/**** RESET ****/ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; outline:none; font-size:1em; -webkit-tap-highlight-color: transparent; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Remove default margin in favour of better control in authored CSS */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role='list'], ol[role='list'] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; line-height: 1.5; } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, button, input, label { line-height: 1.1; } /* Balance text wrapping on headings */ h1, h2, h3, h4 { font-size:1em; text-wrap: balance; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; text-decoration: none; } em { font-style:normal; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font-family: inherit; font-size: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /**** Styles ****/ /*********************************************** Structure ************************************************/ body, a, h1, h2, h3, h4, p, #lightbox, #lightbox * {transition:all 0.2s; -webkit-transition:all 0.2s } #fv_loader { position: fixed; top:0; left:0; height:4px; background-color:var(--accent-1); z-index:99999; width:0; opacity:0; } #fv_transition { position: fixed; top:0; left:0; width:0; height:100%; background-color:#eeeeee; z-index: 99998; overflow: hidden; } /* ::-webkit-scrollbar { display: none; } */ :root { --section-bg-color-light: #F8F8F8; --section-bg-color-dark: #191D1E; --section-bg-color-alt: #737478; --bg-color-dark-pop: #272B2C; --bg-alt-highlightt: #A2A1A0; --bg-alt-highlight: #BEBEBE; /*--bg-alt-highlight: #FFFFFF;*/ --bg-alt-highlight-dark: #000; --pure-white:#ffffff; --deep-dark: #151818; --faded-bg-color-light: #C5CED8; --faded-bg-color-dark: #191D1E; --faded-text-color-light: #A6B4C2; --faded-text-color-dark: #303637; --text-color-light:#151818; --text-color-dark: #FFFFFF; --display-color-light-on: #151818; --display-color-light-off:#ECECEC; /*--accent-1: #FFCD5D;*/ --accent-1: #ffffff; --accent-2: #F9B92A; --accent-dark-1: #151818; --spacer-xxl:150px; --spacer-xl:90px; --spacer-l: 50px; --spacer-m: 30px; --spacer-s: 20px; --spacer-xs:10px; --border-radius:10px; --mobile-cta-padding:8px 8px 8px 16px; --mobile-cta-margin:8px 8px 8px 0px; --mobile-cta-size:16px; --toggle-sizer:12px; --gap:20px; --black-10: rgba(0,0,0,0.1); --white-10: rgba(255,255,255,0.1); --black-20: rgba(0,0,0,0.2); --white-20: rgba(255,255,255,0.2); /* a dimmed page behind a drawer or sheet */ --scrim: rgba(0,0,0,0.6); --scrim-dark: rgba(60,60,60,0.65); /* error / destructive text (.message.error, p.error, destructive menu items) */ --error: #ff0000; --error-dark: #ff6b6b; /* the side glow (call sheet): top to bottom, peach / sand / orchid / cyan — the native app's glowSide */ --glow-side-1:#FD8C6E; --glow-side-2:#FCCE88; --glow-side-3:#E895FF; --glow-side-4:#00FDEE; --full-height-form: calc(100vh - 250px); } .mt-xl{ margin-top:var(--spacer-xl)!important } .mt-l { margin-top:var(--spacer-l)!important } .mt-m { margin-top:var(--spacer-m)!important } .mt-s { margin-top:var(--spacer-s)!important } .mt-xs { margin-top:var(--spacer-xs)!important } .mb-xl{ margin-bottom:var(--spacer-xl)!important } .mb-l { margin-bottom:var(--spacer-l)!important } .mb-m { margin-bottom:var(--spacer-m)!important } .mb-s { margin-bottom:var(--spacer-s)!important } .mb-xs { margin-bottom:var(--spacer-xs)!important } .mr-xl{ margin-right:var(--spacer-xl)!important } .mr-l { margin-right:var(--spacer-l)!important } .mr-m { margin-right:var(--spacer-m)!important } .mr-s { margin-right:var(--spacer-s)!important } .mr-xs { margin-right:var(--spacer-xs)!important } .pt-xxl { padding-top:var(--spacer-xxl)!important } .pb-xxl { padding-bottom:var(--spacer-xxl)!important } .pt-xl{ padding-top:var(--spacer-xl)!important } .pt-l { padding-top:var(--spacer-l)!important } .pt-m { padding-top:var(--spacer-m)!important } .pt-s { padding-top:var(--spacer-s)!important } .pt-xs { padding-top:var(--spacer-xs)!important } .pb-xl{ padding-bottom:var(--spacer-xl)!important } .pb-l { padding-bottom:var(--spacer-l)!important } .pb-m { padding-bottom:var(--spacer-m)!important } .pb-s { padding-bottom:var(--spacer-s)!important } .pb-xs { padding-bottom:var(--spacer-xs)!important } .pl-xl{ padding-left:var(--spacer-xl)!important } .pl-l { padding-left:var(--spacer-l)!important } .pl-m { padding-left:var(--spacer-m)!important } .pl-s { padding-left:var(--spacer-s)!important } .pl-xs { padding-left:var(--spacer-xs)!important } .pr-xl{ padding-right:var(--spacer-xl)!important } .pr-l { padding-right:var(--spacer-l)!important } .pr-m { padding-right:var(--spacer-m)!important } .pr-s { padding-right:var(--spacer-s)!important } .pr-xs { padding-right:var(--spacer-xs)!important } .p-xl { padding:var(--spacer-xl)!important } .p-l { padding:var(--spacer-l)!important } .p-m { padding:var(--spacer-m)!important } .p-s { padding:var(--spacer-s)!important } .p-xs { padding:var(--spacer-xs)!important } .wrap { overflow: hidden; opacity:0; transition:all 0.25s; -webkit-transition:all 0.25s; position: relative } .loaded { opacity: 1 } .nooverflow { overflow: hidden } .overflow { overflow: visible } .none { display: none; opacity:0; position: absolute; top:-10000px; left:-10000px; width:0px; height:0px; overflow: hidden; z-index: -1 } .hidden { display: none } .scale0 { transform:scale(0,0); -webkit-transform:scale(0,0); } .abs { position:absolute; } .fullwidth { width:100% } .fullheight { height:100% } .abs.fullwidth { left:0; right:0; } .below { z-index:9 } .above { z-index:11 } .blurred { background-color:rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dark .blurred { background-color:rgba(0,0,0,0.2) } .rel { position:relative; } .fixed { position:fixed; z-index:11 } .notinteractive { pointer-events:none } .feature-overlay-grid { position:absolute; bottom:0; left:0; right:0; z-index:2 } .vh200 { height:200vh } .vh100 { height:100vh } .vh90 { height:90vh } .vh80 { height:80vh } .vh70 { height:70vh } .vh60 { height:60vh } .vh50 { height:50vh } .vh40 { height:40vh } .vh30 { height:30vh } .vh20 { height:20vh } .vh10 { height:10vh } @supports (height: 100dvh) { .vh100 { height: 100dvh; } } /* The signed-in shell (.layout.vh100, every app page) ends ABOVE the system gesture bar / home indicator. viewport-fit=cover (head.php) lets the page draw under that bar; the shell gives the strip back, so nothing of the app sits beneath it — the strip shows the body background. --app-safe-bottom is the one knob: the inset the browser reports (0 with a 3-button bar, where the page is never drawn under it, and on desktop); add to it if a device under-reports, e.g. calc(env(safe-area-inset-bottom, 0px) + 8px). Floating elements carry their own inset (cookie banner, schedule menu, the call sheet and its close button). */ :root { --app-safe-bottom:env(safe-area-inset-bottom, 0px) } /* .layout.vh100 { height:calc(100vh - var(--app-safe-bottom)) } @supports (height: 100dvh) { body.webapp {height:calc(100dvh - var(--app-safe-bottom)); overflow:hidden; } .layout.vh100 { height:calc(100dvh - var(--app-safe-bottom)) } }*/ .spinner { position: absolute; display: block; overflow: hidden; z-index:30; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; } .spinner svg { width:24px; height: 24px; transition:all 0.25s; -webkit-transition:all 0.25s; transform:scale(0); -webkit-transform:scale(0); opacity:0; } .spinner.active svg { transform:scale(1); -webkit-transform:scale(1); opacity:1; } .spinner { -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite } .pointer { cursor:pointer } .fv_cursor .inner .spinner { width:100px; height:100px; margin:-50px 0 0 -50px } .fv_cursor .inner .spinner svg { width:100px; height:100px; } .fv_cursor.loading .inner .spinner svg { transform:scale(1); -webkit-transform:scale(1); opacity:1; } .dark { color:var(--text-color-dark) } .dark.deepdark, .deepdark { background-color:var(--deep-dark) } .dark #wordmark path { fill:#ffffff } .accentcolor { color:var(--accent-2) } .opacity25 { opacity:0.25 } .fade50, .opacity50 { opacity:0.5 } .opacity75 { opacity:0.75 } .opacity0 { opacity:0 } .shim { position: absolute; z-index:9; left:0; right:0; bottom:-1px; top:0; background:rgba(0,0,0,0.5); } .bgfx { transition: all 1s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 1s cubic-bezier(.17,.67,.22,.98); background-size: cover; background-position: center center; background-repeat: no-repeat; transform:scale(1,1); -webkit-transform:scale(1,1); opacity:0.7; } section.active .bgfx { transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05); opacity:1; transition: all 8s cubic-bezier(.17,.67,.22,.98); -webkit-transition:all 8s cubic-bezier(.17,.67,.22,.98); } .testimonial img { width:100px; margin-left:auto; margin-right:auto } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } /*********************************************** Context menu ************************************************/ .contextmenu-wrap { position:fixed; z-index: 100; /*top:50px;*/; bottom:calc(44px + env(safe-area-inset-bottom, 0px)); left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:10px; height:1px } .contextmenu { display:flex; flex-direction:row; justify-content:space-between; align-items:center; background-color: rgba(230,230,230, 0.7); border-radius: 50px; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:10px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out } .contextmenu.hidden { bottom:-100px } .contextmenu-items { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; transform:rotate(0deg) translate3d(0,0,0); transform-origin: bottom left; margin:0 auto; padding:0; gap:4px } .contextmenu-items a { color:var(--text-color-light); padding:6px 12px; border-radius:30px; opacity:1; text-decoration:none; font-weight:500 } .contextmenu-items a:hover { background-color:var(--black-10) } .contextmenu-items a.active { color:var(--text-color-dark); background-color:var(--accent-dark-1) } .contextmenu-items span { display:none } .dark .contextmenu { background-color: rgba(50,50,50,0.5); } .dark .contextmenu-items a { color:var(--text-color-dark) } .dark .contextmenu-items a:hover { background-color:var(--white-10) } .dark .contextmenu-items a.active { color:var(--text-color-light); background-color:var(--accent-1) } #mobile-menu.contextmenu-wrap, #mobile-menu.contextmenu-wrap { display:none } /*********************************************** Lightbox ************************************************/ .boxshadow1 { box-shadow:0px 0px 60px rgba(0,0,0,0.05) } .dark .boxshadow1 { box-shadow:0px 0px 60px rgba(255,255,255,0.1) } .zmenu { position: fixed; top:0; left:0; right:0; height:100vh; max-height:100vh; z-index: 21; display: none; opacity: 0; } .zmenu.active { display: block; } .zpanel { position: absolute; top:0; left:0; right:0; bottom:0; overflow: auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid transparent; display: none; z-index: 21 } .zpanel.light { background-color: rgba(240,240,240,0.9) } .zpanel.white { background-color: #ffffff } .zpanel.alt { background-color: #191D1E } .zpanel.darkbg { background-color: rgba(0,0,0,0.8) } .zpanel.sectionbg { background-color:var(--section-bg-color-light) } .dark .zpanel.sectionbg { background-color:var(--section-bg-color-dark) } .zpanel.translucent { background-color:rgba(255,255,255,0.7) } .dark .zpanel.translucent { background-color:rgba(0,0,0,0.7) } .zpanel.flex.active { display: flex; align-items:center; } .zpanel.flex section { flex-grow:1; } .zpanel header { justify-content:flex-end; position: fixed; left:auto; right:0; width:100px; padding-bottom:0; } .zpanel.active { display: block; } .lightbox_src { width:100%; margin:auto; cursor: zoom-out } .lightbox_container { position: absolute; z-index: 11; width:90vw; min-height: 100vh; left:5vw; right:5vw; } video.lightbox_video, img.lightbox_image { width:100%; max-width: 1600px; transition:all 0.5s; -webkit-transition:all 0.5s; border-radius:8px; margin:5vh auto; } @media all and (max-height:600px){ .zpanel.flex.active { align-items: flex-start; padding:100px 0; } } .lightbox_zoomout { cursor: zoom-out } a.small_close { font-family:"Inter", sans-serif; text-decoration: none; font-size:25px; color:#fff; width:40px; height:40px; position: absolute; top:0; right:0; z-index:12; text-align: center; line-height: 40px; opacity: 0.3; transition:all 0.25s; -webkit-transition:all 0.25s; } a.small_close:hover { opacity: 1; color:#007fff; } a.small_close.circle { background: rgba(0,0,0,0.5); opacity:1; border-radius:50%; overflow: hidden; color:#ffffff; top:15px; right:15px; position: fixed; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } a.small_close.circle:hover { color:#000000; background: #FFCD5D; } a.chevron-prev, a.chevron-next { padding:10px; display: block; border-radius: 50%; overflow: hidden; background-color: rgba(0,0,0,0.1); transition:all 0.25s; -webkit-transition:all 0.25s; } a.chevron-prev svg, a.chevron-next svg { display: block; width:20px; height:20px; transition:all 0.25s; -webkit-transition:all 0.25s } a.chevron-prev:hover, a.chevron-next:hover { background: #FFCD5D; box-shadow:0px 0px 40px rgba(0,0,0,0.2) } svg .chevron-path { fill:#fff; } a.chevron-prev:hover svg .chevron-path, a.chevron-next:hover svg .chevron-path { fill:#000 } a.chevron-prev { margin:6px 3px 6px 6px } a.chevron-next { margin:6px 6px 6px 3px } .lightbox_controls_container { position:fixed; z-index: 12; bottom:calc(30px + env(safe-area-inset-bottom, 0px)); left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center } .lightbox_controls { border-radius:30px; background:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display:flex; flex-direction:row; justify-content:space-between; align-items:center } /*********************************************** Layout ************************************************/ body { font-family:"Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; background-color:var(--section-bg-color-light); font-weight:300; overflow-x:hidden; } /* viewport-fit=cover (head.php): the page may draw under the system bars, so whatever hugs an edge pads itself with the safe-area insets — 0 wherever there is no notch, home indicator or gesture bar. Sideways: the body; bottom: each bottom-pinned element below (and the call sheet, call-sheet.css). */ body { padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px) } body.dark { background-color:var(--section-bg-color-dark) } .page { position:relative; z-index:10; margin:0 auto; background-color:var(--section-bg-color-light); color:var(--text-color-light); } header { padding:30px 50px; position:absolute; top:0; left:0; right:0; z-index: 11; display:flex; flex-direction:row; justify-content:space-between; align-items:center } header.centered { justify-content:center; } footer { margin:0; padding:0 } nav.mobile-overlay-nav svg.img { width:60px } .applogo { padding:10px 0 } .applogo svg.img, footer svg.img, header svg.img { width:80px } body.dark footer svg.img linearGradient stop.stop-start, nav.mobile-overlay-nav svg.img linearGradient stop.stop-start, nav.appnav svg.img linearGradient stop.stop-start, header svg.img linearGradient stop.stop-start { stop-color:#000000 } body.dark footer svg.img linearGradient stop.stop-end, nav.mobile-overlay-nav svg.img linearGradient stop.stop-end, nav.appnav svg.img linearGradient stop.stop-end, header svg.img linearGradient stop.stop-end { stop-color:#676767 } body.dark header svg.img linearGradient stop.stop-start, body.dark nav.appnav svg.img linearGradient stop.stop-start, body.dark nav.mobile-overlay-nav svg.img linearGradient stop.stop-start, footer svg.img linearGradient stop.stop-start { stop-color:#ffffff } body.dark header svg.img linearGradient stop.stop-end, body.dark nav.appnav svg.img linearGradient stop.stop-end, body.dark nav.mobile-overlay-nav svg.img linearGradient stop.stop-end, footer svg.img linearGradient stop.stop-end { stop-color:#676767 } nav { position:relative; z-index: 11; display:flex; flex-direction:row; justify-content:flex-end; align-items:center; gap:20px } nav a { text-decoration:none; color:currentColor; opacity:0.5; border-bottom: 2px solid rgba(0,0,0,0); } nav a:hover, nav a:focus, nav a:active, nav a.active { opacity:1 } nav a.active { border-bottom-color: var(--accent-2); font-weight:bold } a.menu{ width:36px; height:36px; border-radius:21px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:14px; line-height:14px } a.menu.active { background-color:var(--section-bg-color-dark); color:var(--text-color-light); border:none } .avatar{ cursor: default; width:32px; height:32px; border-radius:21px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:10px; font-weight:600; /*background:rgba(230,230,230, 0.5)*/ } .dark .avatar { border-color:rgba(255,255,255,0.15); /*background-color:rgba(77,77,77,0.5)*/ } .avatar.large { width:48px; height:48px; border-radius:24px; font-size:12px } .avatar.primary { border:none; background-color:var(--section-bg-color-dark); color:var(--text-color-dark) } .dark .avatar.primary { background-color:var(--section-bg-color-light); color:var(--text-color-light) } .large-avatar{ cursor: default; width:80px; height:80px; border-radius:40px; border:1px solid rgba(0,0,0,0.1); display:flex; flex-direction:row; justify-content:center; align-items:center; font-size:40px; font-weight:600; /*background:rgba(230,230,230, 0.5)*/ } .dark .large-avatar { border-color:rgba(255,255,255,0.15); /*background-color:rgba(77,77,77,0.5)*/ } /* a profile photo in place of the initials (avatar_inner / avatar_class): the photo fills the circle, no hairline */ .avatar.has-photo, .large-avatar.has-photo { border-color:transparent; overflow:hidden } .avatar img, .large-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block } .dark nav a.menu { border-color:rgba(255,255,255,0.1) } .dark nav a.menu.active { background-color:var(--section-bg-color-light); color:var(--text-color-dark); } .dark nav a.menu svg path { fill:var(--text-color-dark); } .dark nav a.menu svg path.svg-icon-stroke { fill:none !important } nav a.menu svg.dark-mode { display:block } nav a.menu svg.light-mode { display:none } body.dark nav a.menu svg.dark-mode { display:none } body.dark nav a.menu svg.light-mode { display:block } .page-menu a, section { position:relative; z-index:10; padding:0 120px; overflow:hidden; } section.hero { padding-top:var(--spacer-xxl); } section.signup{padding-top:var(--spacer-xxl); padding-left:0; padding-right:0 } .alt { background-color:var(--pure-white); } .dark .alt, .dark.alt { background-color:var(--deep-dark) } .alt-highlight { background-color:var(--bg-alt-highlight); } .dark .alt-highlight { background-color:var(--bg-alt-highlight-dark); } .cowork { background: linear-gradient(180deg,rgba(150, 89, 58, 1) 0%, rgba(208, 143, 110, 1) 20vh); } .alt2 { background-color:var(--section-bg-color-alt); } section .page-menu { margin:0 -120px } .page-menu a { text-decoration:none; color:currentColor; position:relative; z-index: 10; display: block; padding-top:45px; padding-bottom:45px } .page-menu a p::before { display:block; position:absolute; top:50%; margin-left:-50px; content:"→"; opacity:0.25; transform:translateY(-50%); } .page-menu a p { display:flex; flex-direction:row; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto} .page-menu a p span { opacity:0.8; font-weight:500 } .page-menu a p span.meta { border-radius:20px; display:block; padding:1px 10px; text-transform:uppercase; font-weight:300; opacity:0.4; font-size:10px; } .dark #section-secondary .page-menu a:hover, .page-menu a:hover { background-color:#fff } .dark .page-menu a:hover { background-color:var(--accent-dark-1) } .dark #section-secondary .page-menu, .page-menu { border-bottom:1px solid rgba(0,0,0,0.1) } .dark #section-secondary .page-menu a p span.meta, .page-menu a p span.meta { background-color:#ECECEC } .dark #section-secondary .page-menu a, .page-menu a { border-top:1px solid rgba(0,0,0,0.1) } .dark #section-secondary .page-menu a p::before, .page-menu a p::before {color:currentColor;} .dark #section-secondary .page-menu a.active, .page-menu a.active { background-color:var(--accent-dark-1); color:var(--text-color-dark); } .dark #section-secondary .page-menu a.active p:before, .page-menu a.active p:before{color: var(--text-color-dark); opacity: 1 } .dark #section-secondary .page-menu a.active p span, .page-menu a.active p span { opacity:1; font-weight:400 } .dark #section-secondary .page-menu a.active p span.meta, .page-menu a.active p span.meta { background-color:#ffffff; color:var(--text-color-light); opacity:1; font-weight: 500 } .dark .page-menu a.active { background-color:var(--accent-1); color:var(--text-color-light); } .dark .page-menu a.active p:before{color: var(--text-color-light); opacity: 1 } .dark .page-menu a.active p span.meta { background-color:var(--accent-dark-1); color:var(--text-color-dark); opacity:1} .dark .page-menu { border-bottom:1px solid rgba(255,255,255,0.1) } .dark .page-menu a p span.meta { background-color:#34393A } .dark .page-menu a { border-top:1px solid rgba(255,255,255,0.1) } .dark .page-menu a p::before {color:#ffffff} article { position:relative; display: block; z-index:10; max-width:1200px; margin:0 auto } .product-demo-container { position:absolute; border-radius:var(--border-radius); top:var(--spacer-m); right:var(--spacer-m); left:50%; bottom:var(--spacer-m); overflow:hidden; } .product-demo { position:relative; height:90vh; border-radius:var(--border-radius); overflow: hidden; background-image:url("/_s/img/bg/bg1.webp"); background-repeat: no-repeat; background-position: center center; background-attachment:scroll; background-size:auto 100%; } /* Glow */ #section-intro { background-position:top center; background-repeat:no-repeat; background-size:100% auto } #section-intro { background-image:url("/_s/img/bg/hero/light.jpg"); } .dark #section-intro { background-image:url("/_s/img/bg/hero/dark.jpg") } /* Cowork landing page */ #section-intro-cowork {background: linear-gradient(180deg,rgba(150, 89, 58, 1) 0%, rgba(208, 143, 110, 1) 150px); } .cowork-overlay { position:absolute; z-index:2; top:0; left:0; right:0; height:20% } .cowork-overlay { background: linear-gradient(180deg,rgba(208, 143, 110, 1) 10%, rgba(208, 143, 110, 0) 100%);} .cowork-overlay.bottom { top:auto; bottom:0; } .cowork-overlay.bottom { background: linear-gradient(0deg,rgba(208, 143, 110, 1) 50%, rgba(208, 143, 110, 0) 100%);} .video-bg { position:relative; margin:-300px -120px 0 -120px} .video-bg video {width:100%; margin-bottom:-50px } #onboard-illustration { background-position:center center; background-repeat:no-repeat; background-size:cover } #onboard-illustration { background-image:url("/_s/img/onboard/1-light.webp"); } .dark #onboard-illustration { background-image:url("/_s/img/onboard/1-dark.webp"); } #onboard-illustration.the-village-hive { background-image:url("/_s/img/affiliates/the-village-hive.webp"); } /*#section-intro { background-image:url("/_s/img/bg/bg.png"); background-position:top center ; background-repeat:no-repeat; background-size:100% auto }*/ /*.dark #pattern-2 { background-image:url("/_s/img/Pattern-2-Dark.svg"); background-position:top right; background-repeat:no-repeat; } #pattern-2 { background-image:url("/_s/img/Pattern-2-Light.svg"); background-position:top right; background-repeat:no-repeat; position:absolute; top:0; left:0; right:0; height:100vh; z-index:9 } */ #section-secondary.dark { background-color:var(--section-bg-color-dark); background-image:url("/_s/img/bg/footer/dark.jpg"); background-position:bottom center; background-repeat:no-repeat; background-size: 100% auto } .dark #section-secondary { background-color:var(--section-bg-color-light); color:var(--text-color-light); background-image:url("/_s/img/bg/footer/light.jpg"); background-position:bottom center; background-repeat:no-repeat; background-size: 100% auto} .dark #section-secondary .playlist-container, .dark #section-secondary .playlist .cell { border-color:rgba(0,0,0,0.1) } .dark #section-secondary .flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); } .dark #section-secondary .flexgrid.playlist .cell:hover { background-color:rgba(255,255,255,0.5) } .dark #section-secondary #wordmark path { fill:var(--accent-dark-1) } #section-secondary { z-index:13 } .features { border-radius:4px } .rounded { border-radius:var(--border-radius); } .rounded-container { overflow:hidden; border-radius:var(--border-radius); margin:var(--spacer-m); position:relative } .rounded-container.pop { z-index:20 } .cta-bg { background-image:url("/_s/img/bg/cta.webp"); background-position:center center; background-repeat:no-repeat; background-size:cover } .dark .cta-bg { background-image:url("/_s/img/bg/cta2.webp")} .integrations-block, #integrations-block { background-image:url("/_s/img/integrations/Dots-Light.svg"); background-position:center center; background-repeat:no-repeat; background-size:50% auto } .dark .integrations-block, .dark #integrations-block { background-image:url("/_s/img/integrations/Dots-Dark.svg") } #integrations-block .logos.light {display: block } #integrations-block .logos.dark {display: none } .dark #integrations-block .logos.light {display: none } .dark #integrations-block .logos.dark {display: block } #integrations-block .logos { position:relative; width:100%; height:1px; z-index:20 } #integrations-block .logos img { width:100px; position:absolute; box-shadow:30px 30px 50px rgba(0,0,0,0.1); border-radius:var(--border-radius) } .dark #integrations-block .logos img { box-shadow:30px 30px 50px rgba(0,0,0,0.5) } #integrations-block .logos img.img1 { top:-230px; left:230px; width:70px } #integrations-block .logos img.img2 { top:-120px; left:80px; } #integrations-block .logos img.img3 { top:10px; left:0; width:70px } #integrations-block .logos img.img4 { top:120px; left:80px } #integrations-block .logos img.img5 { top:230px; left:230px; width:70px } #integrations-block .logos img.img6 { top:-230px; right:230px; width:70px } #integrations-block .logos img.img7 { top:-120px; right:80px; } #integrations-block .logos img.img8 { top:10px; right:0; width:70px } #integrations-block .logos img.img9 { top:120px; right:80px } #integrations-block .logos img.img0 { top:230px; right:230px; width:70px } a.cta { display:inline-block; min-width:120px; text-align: center; text-decoration:none; background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; color:var(--text-color-dark); border-radius:4px; padding:10px 16px; font-weight:700; transition: background-position 500ms ease-out; position: relative;} a.cta span { display:none; margin-left:6px; text-align:center; line-height:40px; height:40px; width:40px; border-radius:4px; background-color:var(--section-bg-color-light); color:var(--text-color-light); } a.cta.disabled { opacity:.4; pointer-events:none; } /* wallet-blocked state; server re-gates regardless */ a.cta.round { border-radius:50px } a.cta.round span { border-radius:20px; } .dark a.cta { background-image: linear-gradient(120deg, #fff 25%, #aaa 37.5%, #777, #aaa 62.5%, #fff 75%); color:var(--text-color-light); } .dark a.cta span { background:var(--section-bg-color-dark); color:var(--text-color-dark); } .dark a.cta:hover, a.cta:hover { background-position:left center; /*&::before { --vibrance: 50%; content: " "; position: absolute; inset: 10px 10px -10px; background: linear-gradient(to right in oklch longer hue, oklch(95% var(--vibrance) 0) 0 100%); filter: blur(20px); border-radius: inherit; z-index: -1; }*/ } a.cta.alt { background:transparent; color:currentColor; border:1px solid rgba(0,0,0,0.1); font-weight:400 } a.cta.alt span { background-color:var(--section-bg-color-dark); color:var(--text-color-dark); } a.cta.alt:hover { border-color:#000; color:currentColor; } .dark a.cta.alt { border-color:rgba(255,255,255,0.15); color:currentColor; } .dark a.cta.alt span { background-color:var(--section-bg-color-light); color:var(--text-color-light); } .dark a.cta.alt:hover { border-color:#fff; color:currentColor; } a.large-cta { text-decoration:none; color:var(--accent-2); letter-spacing:-0.04em; font-weight:300; position:relative; padding-right:3em } /*a.large-cta:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; position:absolute; right:-80px; top:50%; margin:-50px 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s;} a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:120px; height:120px; margin-top:-60px; right:-90px }*/ a.large-cta:after { content:""; display:block; width:3em; height:3em; border-radius:3em; background-color:rgba(249,185,42, 0.1); background-image:url("/_s/img/Arrow-right.svg"); background-repeat: no-repeat; background-position: center center; background-size:1.5em; position:absolute; right:0.5em; top:50%; margin:-1.5em 0 0 0; z-index: -1; transition:all 0.25s; -webkit-transition:all 0.25s } a.large-cta:hover:after { background-color:rgba(249,185,42, 0.2); width:3.2em; height:3.2em; margin-top:-1.6em; right:0.4em } a.large-cta.reel-cta:hover:after { background-color:rgba(249,185,42, 0.6); width:400px; height:400px; margin-top:-200px; margin-right:-200px; right:-45px; border-radius:200px } .scrolldash-container { height:100px; position:relative; width:2px } .scrolldash { height:100%; width:2px; background-color:var(--text-color-light); margin-left: 0; position:absolute; top:0; left:0; -webkit-animation:scrolldashanimation 2s linear infinite; -moz-animation:scrolldashanimation 2s linear infinite; animation:scrolldashanimation 2s linear infinite } .dark .scrolldash { background-color:var(--text-color-dark) } .vdash { height:100px; margin-left:auto; margin-right:auto; border:1px solid rgba(0,0,0,0.2); border-width:0 0 0 1px; width:1px } .dark .vdash { border-color:rgba(255,255,255,0.1) } .ldash { height:100px; border:1px solid rgba(0,0,0,0.2); border-width:0 0 0 1px; width:1px } .dark .ldash { border-color:rgba(255,255,255,0.1) } body.dark, .dark .page, .dark section, section.dark { color:var(--text-color-dark); } .dark .page { background-color:var(--section-bg-color-dark) } .page { overflow:hidden; } .faded-text h1.display, .faded-text { color:var(--faded-text-color-light); } .dark .faded-text h1.display, .dark .faded-text { color:var(--faded-text-color-dark) !important; } /* section { color:var(--faded-text-color-light) } section.active { color:var(--text-color-light) } .dark section, section.dark { color:var(--faded-text-color-dark) } .dark section.active, section.dark.active { color:var(--text-color-dark) } */ footer a { text-decoration:none; color:currentColor; } a.deco { text-decoration:none; color:currentColor; } a.deco { position: relative; z-index:12 } a.deco:after { content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:0.2s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.2s all cubic-bezier(.23,.71,.08,.78); } a.deco.active:after, a.deco:focus:after, body.desktop a.deco:active:after, body.desktop a.deco:hover:after { opacity:1; width:100%; left:0;} a.deco2 { text-decoration:none; color:currentColor } a.deco2 { position: relative; z-index:12 } a.deco2:before { content:""; opacity:1; position: absolute; z-index:12; bottom:-5px; width:100%; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:0.25s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.25s all cubic-bezier(.23,.71,.08,.78); } a.deco2.active:before, a.deco2:focus:before, body.desktop a.deco2:active:before, body.desktop a.deco2:hover:before { opacity:0.5; width:0; left:100%;} a.deco2:after { content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:2px solid var(--accent-2); left:0; z-index: -1; transition:1s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:1s all cubic-bezier(.23,.71,.08,.78); } a.deco2.active:after, a.deco2:focus:after, body.desktop a.deco2:active:after, body.desktop a.deco2:hover:after { opacity:1; width:100%; left:0;} /*********************************************** Typography ************************************************/ h1.display { font-family: "Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:600; font-size:70px; letter-spacing:-0.01em; line-height:1em } h1.display.display-small { font-size:60px } h1,h2,h3,h4 { font-family:"Plus Jakarta Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight:200; line-height:1.3em; letter-spacing:-0.02em } h1.gradient-text { background-image: linear-gradient(120deg, #333 25%, #555 37.5%, #ccc, #555 62.5%, #000 75%); background-position: right center; background-size: 400% auto; transition: background-position 3500ms ease-out; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .dark h1.gradient-text { background-image: linear-gradient(120deg, #fff 40%, #aaa 49%, #777, #aaa 51%, #fff 60%); } section.active h1.gradient-text { background-position:left center } /*.large-cta, */ h1 { font-size:40px; } h2 { font-size:32px } h3 { font-size:24px } h4 { font-size:20px } p { font-size:18px; line-height:1.5em } .ts-m { font-size:14px; line-height:1.5em } .ts-s { font-size:12px; line-height:20px } .ts-xs { font-size:10px; line-height:10px } .dark h1.display, h1.display.dark { color:var(--accent-1) } .heavy { font-weight:700 } .center { text-align:center; } .text-block, .quote { max-width:600px; margin-left:auto; margin-right:auto } .strikethrough { text-decoration: line-through; } /*********************************************** Scrollspy Anchors ************************************************/ .scrollspy-anchor-wrap { position:fixed; z-index:13; display:block; margin-left:50px; margin-top:var(--spacer-xxl); } .scrollspy-anchors { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; white-space: nowrap; transform:rotate(90deg) translate3d(0,0,0); transform-origin: bottom left; margin:-25px 0 0 -5px} .scrollspy-anchors a { text-decoration:none; color:currentColor; opacity:0.5 } .scrollspy-anchors a:hover, .scrollspy-anchors a:focus, .scrollspy-anchors a:active, .scrollspy-anchors a.active { opacity:1; font-weight:500 } .scrollspy-anchors span { opacity:0.2 } .dark .scrollspy-anchors a.active { color:var(--accent-1); } .dark.faded .scrollspy-anchors a.active { color:var(--faded-text-color-dark) } /*********************************************** Flexgrid ************************************************/ .flexgrid { box-sizing: border-box; position: relative; z-index: 12; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap } .flexgrid.nowrap { flex-wrap: nowrap } .flexgrid.nowrap .cell { flex-grow: 1 } .flexgrid.reverse { flex-wrap: wrap-reverse; } .flexgrid .cell { display: flex; justify-content: center; align-items: stretch; align-content: space-between; position: relative; z-index: 12; flex-grow: 0; box-sizing: border-box } .flexgrid .cell.col1 { width:8.33% } .flexgrid .cell.col2 { width:16.66% } .flexgrid .cell.col3 { width:24.99% } .flexgrid .cell, .flexgrid .cell.col4 { width:33.33% } .flexgrid .cell.col5 { width:41.66% } .flexgrid .cell.col6 { width:50% } .flexgrid .cell.col7 { width:58.32% } .flexgrid .cell.col8 { width:66.63% } .flexgrid .cell.col9 { width:74.98% } .flexgrid .cell.col10 { width:83.33% } .flexgrid .cell.col11 { width:91.63% } .flexgrid .cell.col12 { width:100% } .flexgrid.project-list.spaced.offset { overflow:visible; } .viewport_desktop .flexgrid.project-list.offset .cell:nth-child(3n+2){ margin-top:-100px; } .viewport_mobile .flexwrap .flexgrid.project-list.offset .cell:nth-child(2n) { margin-top:0 } .viewport_mobile .flexgrid.project-list.offset .cell:nth-child(2n), .viewport_tablet .flexgrid.project-list.offset .cell:nth-child(2n){ margin-top:-50px; } .flexgrid .cell .cc { padding:0; position: relative; white-space:normal; width:100%; } .flexgrid.spaced { margin-left:-10px; margin-right:-10px } .flexgrid.spaced .cell .cc { padding:10px } .flexgrid.cards .cell .cc { background-color:rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin:0 10px 20px; padding:var(--spacer-m); border-radius:var(--border-radius) } .rounded-card { border-radius:var(--border-radius); overflow:hidden; background-color:var(--pure-white) } .dark .rounded-card { background-color:var(--deep-dark) } .dark .flexgrid.cards .cell .cc { background-color:rgba(20,20,20,0.5);} .card-icon { display:block; width:50px; background-color:rgba(0,0,0,0.03); border-radius:4px } .dark .card-icon { background-color:rgba(255,255,255, 0.05); } .project-tile a { display:block; overflow:hidden; } .project-tile img { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; } .project-tile video { width:100%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; opacity:1; display:block; } .grid-video { width:100%; margin-bottom:-10px } .project-tile video.playing { opacity:1 } .flexgrid.project-list { border-radius:var(--border-radius) } .project-tile-wrap, .flexgrid.spaced .project-tile a, .flexgrid.spaced .project-tile img, .flexgrid.spaced .project-tile video { border-radius:var(--border-radius); overflow:hidden; } .project-tile span {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; position:absolute; top:20px; left:20px; color:rgba(255,255,255,0.7); z-index:14; display:block; padding:4px 8px; background-color:rgba(0,0,0,0.5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius:20px; opacity:0; text-align:center; min-width:60px } .project-tile:hover span { opacity:1 } .case-study-container { background-color:var(--accent-dark-1); border-radius:var(--border-radius); overflow:hidden; } .dark #section-secondary .case-study-container { background-color:#ffffff } .flexgrid .cc.signup-form { background-color:var(--pure-white); border-radius:var(--border-radius) } .product-curtain { position:absolute; bottom:0; left:0; right:0; height:200px; background: linear-gradient(0deg, rgba(190,190,190,1) 20%, rgba(190,190,190,0) 100%); } .dark .product-curtain { background: linear-gradient(0deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%); } .product-curtain.cowork { background: linear-gradient(0deg,rgba(208, 143, 110, 1) 50%, rgba(208, 143, 110, 0) 100%); } /*********************************************** Marquee ************************************************/ .marquee { width:100%; overflow:hidden; position:relative; pointer-events: none; display: flex; overflow: hidden; user-select: none; gap: var(--gap);} .marquee .curtain-left { position:absolute; z-index:12; top:0; left:0; width:20%; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,1) 20%, rgba(248,248,248,0) 100%); } .marquee .curtain-right { position:absolute; z-index:12; top:0; right:0; width:20%; bottom:0; background: linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 80%); } .alt .marquee .curtain-left { background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%); } .alt .marquee .curtain-right { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); } .dark .marquee .curtain-left { background: linear-gradient(90deg, rgba(25,29,30,1) 20%, rgba(25,29,30,0) 100%); } .dark .marquee .curtain-right { background: linear-gradient(90deg, rgba(25,29,30,0) 0%, rgba(25,29,30,1) 80%); } .dark .alt .marquee .curtain-left, .dark.deepdark .marquee .curtain-left { background: linear-gradient(90deg, rgba(21,24,24,1) 20%, rgba(21,24,24,0) 100%); } .dark .alt .marquee .curtain-right, .dark.deepdark .marquee .curtain-right { background: linear-gradient(90deg, rgba(21,24,24,0) 0%, rgba(21,24,24,1) 80%); } .marquee .strip { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: var(--gap); } .marquee .strip .tile { min-width:200px; flex-grow:0 } .marquee .strip .tile img { width:100px } .marquee .strip p { white-space:nowrap; display:inline-block; opacity:1; margin-right:20px; font-size:30px; font-weight:900; text-transform:uppercase; font-style:italic; } .marquee .strip p:nth-child(even) { opacity:0.25 } .dark .marquee .strip .tile img { filter:invert(1); } .fast { --speed: 5s; } .slow { --speed: 30s; } .superslow { --speed:180s } .forward { animation: marquee-move-text var(--speed) linear infinite var( --direction, forwards ); } .backward { animation: marquee-move-text var(--speed) linear infinite var( --direction, reverse ); } @keyframes marquee-move-text { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } /*********************************************** Playlist ************************************************/ .playlist-container { border-radius:var(--border-radius); border:1px solid rgba(0,0,0,0.1); overflow:hidden } .flexgrid.playlist { margin:0 -2px -1px 0 } .flexgrid.playlist .cell .cc { padding:20px } .flexgrid.justified .cell .cc { display:flex; flex-direction: column; justify-content:space-between; } .dark .flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-dark); } .flexgrid.playlist .cell .cc svg.icon path { fill:var(--text-color-light); } .flexgrid.playlist .cell .cc svg.icon, .flexgrid.playlist .cell .cc img{ margin-bottom:30px } .flexgrid.playlist .cell { border:1px solid rgba(0,0,0,0.1); border-width:0 1px 1px 0 } /* HOVER */ /*.flexgrid.playlist .cell { cursor:pointer }*/ .flexgrid.playlist .cell:hover { background-color:rgba(255,255,255,0.5) } .dark .flexgrid.playlist .cell:hover { background-color:rgba(0,0,0,0.25) } .dark .playlist-container, .dark .flexgrid.playlist .cell { border-color:rgba(255,255,255,0.1) } a.thumb { display:block; border-radius:35px; position: relative; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out } a.thumb div { margin:0 auto; display:block; width:70px; height:70px; position:relative; border-radius:35px; overflow:hidden; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; border:2px solid rgba(0,0,0,0.2) } a.thumb:hover div { border:3px solid var(--accent-1) } .dark a.thumb div { border-color:rgba(220,220,220,0.2) } .dark a.thumb:hover div { border-color:var(--accent-1) } a.thumb:after { content:""; display:block; width:100px; height:100px; border-radius:60px; background-color:rgba(249,185,42, 0.1); position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; z-index: -1; transition:all 0.15s; -webkit-transition:all 0.15s; opacity: 0; transform:scale(0.8)} a.thumb:hover:after { background-color:rgba(249,185,42, 0.2); opacity:1; transform:scale(1) } /*********************************************** Utility ************************************************/ .valign { align-items: center; display:flex; } .balign { align-items:flex-end; display:flex; } .talign { align-items:flex-start; display:flex; } .bordertop { border-top:1px solid rgba(0,0,0,0.1); } .borderbottom { border-bottom:1px solid rgba(0,0,0,0.1); } .borderright { border-right:1px solid rgba(0,0,0,0.1); } .borderleft { border-left:1px solid rgba(0,0,0,0.1); } .ta-right { text-align:right; } .marginauto { margin-left:auto; margin-right:auto } .dark .bordertop, .dark .borderright, .dark .borderleft, .dark .borderbottom { border-color:rgba(255,255,255,0.1) } .transparent { background:transparent !important; } .pill { display:block; width:100px; padding:6px 12px; border-radius:30px; border:1px solid rgba(0,0,0,0.1); background-color: var(--section-bg-color-light); text-align:center } .dark .pill { border-color:rgba(255,255,255,0.15); background-color:var(--section-bg-color-dark) } /*********************************************** Animations ************************************************/ @keyframes scrolldashanimation { 0% { height:100%; top:0; } 20% { height:0; top:100%; } 80% { height:0; top:0; } 100% { height:100%; top:0; } } /*********************************************** Play-stop button ************************************************/ body.no_cursor *, body.no_cursor { cursor:none !important; } /* fv_cursor custom-cursor-content play-stop-button inner video */ .fv_cursor_backdrop { transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; position: fixed; top:0; left:0; right:0; bottom:-100px; z-index:-1; display:block; background-color:rgba(0,0,0,0.1); opacity:0 } .fv_cursor_backdrop.active { z-index:98; opacity:1 } .fv_cursor { transition:all 0.1s ease-out; -webkit-transition:all 0.1s ease-out; position: absolute; pointer-events: none; z-index:199; top:0; left:0; width:0; height:0; display:block } .fv_cursor .custom-cursor-content { pointer-events:none; margin:0; position:absolute; top:-150px; left:-150px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; display:block; transform:scale(0); } #cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0.35) } .play-stop-button { width:300px; height:300px; border-radius:150px; overflow:hidden; background-color:rgba(100,100,100,0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: flex; align-items: center; justify-content: center; box-shadow:80px 80px 80px rgba(0,0,0,0.2) } .play-stop-button .inner { position: relative; z-index:2; background-color:var(--accent-1); color:var(--text-color-light); width:260px; height:260px; overflow:hidden; border-radius:130px; display: flex; align-items: center; justify-content: center; text-align: center; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(1); font-size:40px; font-weight:500 } .play-stop-button .inner span { transition:opacity 0.2s linear; -webkit-transition:opacity 0.2s linear; opacity:1 } .play-stop-button .video { position: absolute; z-index:1; top:50%; left:50%; margin:-130px 0 0 -130px; width:260px; height:260px; overflow:hidden; border-radius:130px; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:scale(0) } .play-stop-button .video video { width:260px; height:260px; object-fit: cover; overflow:hidden; border-radius:130px; display:block; transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; opacity:0 } .play-stop-button .video .video-progress {opacity:0; display: none; position:absolute; height:2px; bottom:0; left:0; right:0; z-index:12; background-color:rgba(255,255,255,0.3); overflow:hidden; border-radius:1px } .play-stop-button .video .video-progress-inner { height:2px; width:50%; background-color:#ffffff } #cursor.fv_cursor.loading .play-stop-button .inner { background-color:transparent; } #cursor.fv_cursor.loading .play-stop-button .inner span { opacity:0 } #cursor.fv_cursor.active_cursor .play-stop-button .inner {transform:scale(0.8); } #cursor.fv_cursor.active_cursor .play-stop-button .video {transform:scale(0.8); } #cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(1); } #cursor.fv_cursor.active_cursor.playing .play-stop-button .video { transform:scale(1); } #cursor.fv_cursor.active_cursor.playing .play-stop-button .video video { opacity:1 } body.touch #cursor.fv_cursor.active_cursor.playing .play-stop-button .inner, #cursor.fv_cursor.active_cursor.playing .play-stop-button .inner {transform:scale(0); } body.touch .fv_cursor { position:fixed; top:auto; bottom:-20px; left:50% } body.touch .fv_cursor { transition:none; -webkit-transition:none; } body.touch #cursor.fv_cursor.active_cursor .custom-cursor-content { transform:scale(0) } body.touch #cursor.fv_cursor.active_cursor.loading .custom-cursor-content, body.touch #cursor.fv_cursor.active_cursor.playing .custom-cursor-content { transform:scale(0.7) } body.touch .play-stop-button .inner { background-color: transparent} body.touch .play-stop-button .inner span { display: none } .circular-progress { position: absolute; top:0px; left:0px; z-index: 12; pointer-events: none; display:block; } .circular-progress svg { width:260px; height:260px; float:left; transform: rotate(-90deg); transform-origin: center; opacity:0; transition:all 0.5s ease-out } #cursor.fv_cursor.active_cursor.playing .circular-progress svg #circle1 { transition:stroke-dashoffset 0.5s linear; } #cursor.fv_cursor.active_cursor.playing .circular-progress svg { opacity:1 } #cursor.fv_cursor.active_cursor.playing .play-stop-button .video .video-progress {opacity: 1} .background-video { position:absolute; display: flex; align-items: center; justify-content: center; top:50vh; left:0; right:0; height:100vh; z-index:9; opacity:0.25 } .background-video video { display: block; width:50vw; height:50vw; border-radius:25vw; overflow:hidden; object-fit: cover } .hero-video-spacer { height:50vh } .fullscreen_video { display:block; width:100%; height:100vh; object-fit:cover; overflow: hidden } /*********************************************** App nav ************************************************/ nav.appnav { display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:0px; width:70px; min-width:70px; border-right:1px solid rgba(0,0,0,0.1); padding:20px 0 } .dark nav.appnav { border-color:rgba(255,255,255,0.15) } nav a.logo { opacity:1 } nav.appnav svg.img { width:40px; display: block; margin:0 auto 20px } nav.appnav .line { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:12px; background:var(--pure-white); border-radius:50px; padding:5px } nav.appnav .line.active .avatar a { opacity: 1 } .appnav-wrapper { display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:10px; } nav.appnav .line a.active { border-bottom:none } .dark nav.appnav .line { background-color:var(--bg-color-dark-pop) } nav.appnav .line .line-links { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:20px; margin:5px 0 10px 0; white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed; } nav.appnav .line .line-links a { text-decoration:none; color:currentColor; opacity:0.5; border-bottom:none } nav.appnav .line .line-links a:hover, nav.appnav .line .line-links a:focus, nav.appnav .line .line-links a:active, nav.appnav .line .line-links a.active { opacity:1; font-weight:500 } nav.appnav .line .line-links span { opacity:0.2 } .dark nav.appnav .line .line-links a.active { color:var(--accent-1); } .dark.faded nav.appnav .line .line-links a.active { color:var(--faded-text-color-dark) } /*********************************************** Inbox ************************************************/ #deeplink-notice { z-index:999; } section.app { padding:0 } .layout { position:relative; z-index: 13; display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; gap:0px; top:0; left:0; right:0 } .message-list { width:500px; min-width:300px; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; border-right:1px solid rgba(0,0,0,0.1) } .dark .message-list { border-color:rgba(255,255,255,0.1) } .message-item { position:relative; border-bottom:1px none rgba(0,0,0,0.1); border-left:2px solid transparent; cursor:pointer; opacity:1; transition:all 0.25s ease-out; margin-bottom:10px } .message-item.active { z-index:1; border-left-color:#000000; /*background-color:rgba(255,255,255,0.2);*/ opacity:1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .dark .message-item { border-bottom:1px none rgba(255,255,255,0.1) } .dark .message-item.active { border-left-color:#ffffff; /*background-color:rgba(40,40,40,0.3)*/ } .message-item.unseen { border-left-color:var(--accent-2) } /* a call a sync brought in while the page was open; cleared on click (InboxRender.markSeen) */ .message-item[data-remind-due] { border-left-color:var(--accent-2) } /* a call whose follow-up reminder is due: the unseen mark, until the click that opens it completes the reminder */ /* Bulk selection (InboxSelect, inbox_view.js; List View V2 store pages): the caller's avatar is the row's checkbox — tap it to select; while anything is selected every avatar shows the empty box and a tap anywhere on a row toggles it. The look is the schedule table's .sched-box: --text-color-light fill + the same tick, tokens only. The row itself keeps its look (the open call's background would stack with a tint): the checked avatar is the mark, as in the native app. */ .list-view-v2 #message_list .message-item .avatar { cursor:pointer; position:relative; transition:background-color 0.15s ease-out, border-color 0.15s ease-out } @media (hover:hover){ .list-view-v2 #message_list .message-item .avatar:hover { border-color:var(--text-color-light) } } body.call-select-active #message_list .message-item .avatar { color:transparent; border-color:var(--text-color-light) } body.call-select-active #message_list .message-item .avatar svg { visibility:hidden } .list-view-v2 #message_list .message-item.selected .avatar { background-color:var(--text-color-light); border-color:var(--text-color-light); color:transparent } .list-view-v2 #message_list .message-item.selected .avatar svg { visibility:hidden } .list-view-v2 #message_list .message-item.selected .avatar::after { content:''; position:absolute; left:12px; top:8px; width:5px; height:11px; border:solid var(--pure-white); border-width:0 2px 2px 0; transform:rotate(45deg) } @media (hover:hover){ .dark .list-view-v2 #message_list .message-item .avatar:hover { border-color:var(--text-color-dark) } } .dark.call-select-active #message_list .message-item .avatar { border-color:var(--text-color-dark) } .dark .list-view-v2 #message_list .message-item.selected .avatar { background-color:var(--text-color-dark); border-color:var(--text-color-dark) } .dark .list-view-v2 #message_list .message-item.selected .avatar::after { border-color:var(--text-color-light) } /* its menu: the outbound schedule's .contextmenu pill, kept at the bottom of the scrolling list (sticky in the list panel) instead of .contextmenu-wrap's fixed viewport bar */ /* sticky offsets count from inside the scroll container's padding: the list panel's pb-xxl (--spacer-xxl) is taken back out */ .contextmenu-wrap.call-select-menu { position:sticky; z-index:5; left:auto; right:auto; bottom:calc(16px - var(--spacer-xxl) + env(safe-area-inset-bottom, 0px)); height:auto; padding:8px 0 } .message-item .message-item-summary { opacity:0.5 } .message-item.active .message-item-summary { opacity:1 } .message-item.active::after { position:absolute; content:""; display:block; z-index:-1; top:0; left:8px; right:8px; bottom:0; border-radius:4px; overflow:hidden; background-color:rgba(0,0,0,0.03); backdrop-filter: blur(10px) } .dark .message-item.active::after { background-color:rgba(255,255,255,0.06) } /* Plan limits (call views): a locked row (limited AND the owner not entitled) shows the lock line instead of its summary; selecting it swaps the details pane for the pay gate */ .message-item[data-locked] .lock-message {} .message-item[data-locked] .locked-summary {} /*.message-item[data-locked] .locked-summary::before { content:"\1F512\00A0"; font-style:normal }*/ .message-details-paygate { padding:24px; min-height:60vh; display:flex; flex-direction:column; justify-content:flex-start; } .message-details-paygate article { max-width:420px; margin:0 auto } /* Appointments category (call views): Calls | Schedule tabs; the schedule replaces the list while its tab is open */ .appointments-hidden { display:none!important } #appointments-tabs { border-bottom:none } #appointments-tabs .tab.active { margin-bottom:0 } .appointments .appointment-day p { display:flex; gap:8px; align-items:baseline } .appointments .appointment-row { display:flex; flex-direction:row; align-items:baseline; gap:12px; border-top:1px solid rgba(0,0,0,0.1); border-left:2px solid transparent; cursor:pointer; transition:all 0.25s ease-out } .appointments .appointment-row:hover { background-color:rgba(0,0,0,0.03) } .appointments .appointment-row.active { border-left-color:#000000; background-color:rgba(255,255,255,0.2) } .appointments .appointment-time { flex:0 0 64px; white-space:nowrap; font-variant-numeric:tabular-nums } .appointments .appointment-who { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } #appointments-tabs .tab.tab-empty, #appointments-tabs.tab-empty { display:none } /* HIDE_EMPTY_CATEGORIES: an empty Upcoming / Past tab; the bar when only Calls is left */ .dark .appointments .appointment-row { border-top-color:rgba(255,255,255,0.1) } .dark .appointments .appointment-row:hover { background-color:rgba(255,255,255,0.04) } .dark .appointments .appointment-row.active { border-left-color:#ffffff; background-color:rgba(40,40,40,0.3) } .message-details-panel { width:600px; min-width:300px; opacity:0; position:relative; transition:opacity 0.5s ease-out } .message-details-panel.active { opacity:1 } .caller-details-panel { max-width:400px; position:absolute; top:0; right:0; bottom:0; transition:opacity 0.5s ease-out; } .call-record { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px } .caller-details-container, .message-details-container { position:relative; height:100%; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; padding:24px} .full-width-container { overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; } .panel { width:600px; min-width:200px; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; } .panel.xnarrow{ width:250px; } .panel.narrow { width:350px; } .panel.wide { width:950px } .panel.xwide { width:auto; flex-grow:1 } #audio { min-width:100%; display:none; } /* Visualizer .vis { position: relative; z-index:2; width:100%; height:300px; border-radius:16px; overflow: hidden; cursor:pointer; borderr:1px solid rgba(0,0,0,0.05); } .dark .vis { border-color:rgba(255,255,255,0.1) } .vis .container { position: absolute; top:25%; left:var(--spacer-m); right:var(--spacer-m); bottom:25%; z-index:2; pointer-events:none } .vis audio { width: calc( 100% - 40px ); position: absolute; z-index: 3; bottom:20px; left:20px; opacity:1 } .vis #vis_caller_details { position:absolute; top:0; left:0; right:0; pointer-events:none } .vis #message_details_summary { position:absolute; bottom:0; left:0; right:0; pointer-events:none } .vis-line { position:absolute; top:0; bottom:0; left:0; width:0; background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%); z-index:-1; pointer-events: none} .dark .vis-line { background: linear-gradient(90deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.05) 100%);} .vis-progress { height:2px; background-color:#000000; width:50% } .dark .vis-progress { background-color:#ffffff } */ /* Revert colors for the visualizer */ .vis .vis-container { cursor:pointer; height:350px; } .vis .vis-container, .vis { position: relative; z-index:2; width:100%; border-radius:16px; overflow: hidden } .vis .container { position: absolute; top:30%; left:var(--spacer-m); right:var(--spacer-m); bottom:30%; z-index:2; pointer-events:none } .vis audio { width: calc( 100% - 40px ); position: absolute; z-index: 3; bottom:20px; left:20px; opacity:1 } .vis #vis_caller_details { position:absolute; top:0; left:0; right:0; pointer-events:none } .vis .message_details { position:absolute; bottom:0; left:0; right:0; z-index:3 } .vis { color:var(--text-color-dark) !important } .dark .vis { color:var(--text-color-light) !important } .vis { background-color:rgba(0,0,0,1) !important } .dark .vis { background-color:rgba(255,255,255,1) !important } .vis-line { position:absolute; top:0; bottom:0; left:0; width:0; z-index:-1; pointer-events: none} .vis-line { background: linear-gradient(90deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.20) 100%) } .dark .vis-line { background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%) } .vis-progress { height:2px; background-color:#fff; width:50% } .dark .vis-progress { background-color:#000 } #cta-play-pause .hide-on-pause { display:none } #cta-play-pause.playing .hide-on-pause { display:block } #cta-play-pause .hide-on-playing { display:block } #cta-play-pause.playing .hide-on-playing { display:none } /* Mobile ctas */ .mobile-cta-container-wrap { position:absolute; z-index:101; left:0; right:0; top:92dvh; height:8dvh; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;} .mobile-cta-container { width:100%; padding-bottom:24px; z-index:100; display:flex; flex-direction:row; justify-content:center; align-items:center; /*height:1px*/ } .mobile-cta-container { background-image: linear-gradient(0deg,rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 0) 100%); } .mobile-cta-item-wrap { display:flex; flex-direction:row; justify-content:space-between; align-items:center; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out } .mobile-cta-items { display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; white-space: nowrap; margin:0 auto; padding:0; gap:4px } .mobile-nav-container-wrap { position:fixed; z-index:1000; left:auto; right:0; top:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;} .mobile-nav-container-wrap .mobile-cta-container { padding-bottom:0px; padding-top:var(--spacer-m); background-image:none !important; /*linear-gradient(0deg,rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100%);*/ justify-content:flex-end; padding-right:var(--spacer-m)} .mobile-cta { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; white-space:nowrap; border-radius:30px; background-color:var(--section-bg-color-dark); color:var(--text-color-dark); text-decoration:none; padding:var(--mobile-cta-padding); overflow:hidden; position:relative; z-index:2 } .mobile-cta.none { display:none } /* .mobile-cta's display:flex would otherwise beat .none (view switching hides the unused action icon) */ .mobile-cta .icon { display:flex; flex-direction:row; justify-content:center; align-items:center; border-radius:30px; overflow:hidden; position:relative; margin:var(--mobile-cta-margin) } .mobile-cta .icon svg { width:var(--mobile-cta-size); height:var(--mobile-cta-size) } .mobile-cta-icon-stroke { stroke:var(--text-color-dark) } .mobile-cta .label { display:flex; padding:var(--mobile-cta-margin); line-height:var(--mobile-cta-size); box-sizing:border-box; font-weight:500; transition:all 0.2s ease-out; overflow:hidden; } .mobile-cta.icon-button { justify-content:center; padding:0; width:40px; height:40px; } .mobile-cta.icon-button .icon { margin:0 } .dark .mobile-cta-container { background-image: linear-gradient(0deg,rgba(20, 29, 30, 1) 0%, rgba(20, 29, 30, 0) 100%); } .dark .mobile-cta { background-color:var(--section-bg-color-light); color:var(--text-color-light); } .dark .mobile-cta-icon-stroke{ stroke:var(--text-color-light) } .mobile-cta-icon-fill { fill:var(--text-color-dark) } /* a filled glyph (play, pause): the stroke class's twin */ .dark .mobile-cta-icon-fill { fill:var(--text-color-light) } /* the drag handle of a sheet that swipes away (the call sheet, the 3.2 App Menu): centred by its side margins — it sits inside a block wrapper, where align-self does nothing — and its vertical margins are the grab strip's height (call_sheet.js measures the wrapper's box, so keep the handle the strip's only content) */ .sheet-handle { width:40px; height:5px; margin:8px auto; border-radius:999px; background:currentColor; opacity:0.2 } /* .mobile-cta.alt — the outlined (secondary) icon button: a.cta.alt's treatment for .mobile-cta. Transparent, the surrounding text colour, a hairline from the alpha tokens; an inset shadow rather than a border, so it measures exactly what the filled button does. One filled .mobile-cta per group (the primary action), the rest .alt. */ .mobile-cta.alt, .dark .mobile-cta.alt { background-color:transparent; color:currentColor } .mobile-cta.alt { box-shadow:inset 0 0 0 1px var(--black-10) } .dark .mobile-cta.alt { box-shadow:inset 0 0 0 1px var(--white-10) } .mobile-cta.alt:hover, .dark .mobile-cta.alt:hover { box-shadow:inset 0 0 0 1px currentColor } .mobile-cta.alt:after { display:none } .mobile-cta.alt .mobile-cta-icon-stroke, .dark .mobile-cta.alt .mobile-cta-icon-stroke { stroke:currentColor } .mobile-cta.alt .mobile-cta-icon-fill, .dark .mobile-cta.alt .mobile-cta-icon-fill { fill:currentColor } .dark .mobile-nav-container-wrap .mobile-cta-container { background-image:transparent; /* linear-gradient(0deg,rgba(20, 29, 30, 0) 0%, rgba(20, 29, 30, 1) 100%);*/ } .mobile-cta .off-state { transition:all 0.2s ease-out; transform:scale(1,1) } .mobile-cta .on-state { transition:all 0.2s ease-out; transform:scale(0,0); position:absolute } .mobile-cta.active .off-state { transform:scale(0,0) } .mobile-cta.active .on-state { transform:scale(1,1) } .mobile-cta.active .hide-on-active { display:none } .mobile-cta:after { content:""; display:'block'; z-index:-1; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; width:100px; height:100px; border-radius:50px; overflow:hidden; background-color:#fff; opacity:0.5; transform:scale(0,0) } .mobile-cta:hover:after { transform:scale(1,1); opacity:0.2; transition:all 0.5s ease-out; } .dark .mobile-cta:after { background-color:var(--accent-2) } .mobile-cta:hover:after { opacity:0 } /* Mobile overlay */ .mobile-overlay { position:fixed; z-index:101; top:0; left:0; right:0; display:flex; pointer-events:none; flex-direction:column; justify-content:flex-end; align-items:center; background-color:rgba(0,0,0,0); padding:10px 30px 90px 30px; transition:all 0.3s ease-out } .mobile-overlay-backdrop { position:absolute; z-index:100; top:0; left:0; right:0; bottom:0 } .mobile-menu { position:relative; z-index:101; background-color:#F0F0F0; border-radius:24px; width:100%; max-width:400px; padding:4px; opacity:0; transform:translateY(20px) scale(0.95,0.95); transition:all 0.08s ease-out } .mobile-menu.bright { background-color:var(--pure-white) } .dark .mobile-menu.bright { background-color:var(--deep-dark) } .mobile-overlay.top-align { justify-content:flex-start; padding:90px 24px 10px 24px; } .mobile-nav-container-wrap .mobile-cta { box-shadow:0px 0px 20px rgba(0,0,0,0.4); } .dark .mobile-nav-container-wrap .mobile-cta { box-shadow:0px 0px 20px rgba(255,255,255,0.4); } /*.mobile-overlay.top-align .mobile-overlay-backdrop { background-image:linear-gradient(0deg,rgba(20, 29, 30, 0) 0%, rgba(20, 29, 30, 1) 100%); opacity:0; transition:all 0.3s ease-out} .dark .mobile-overlay.top-align .mobile-overlay-backdrop { background-image:linear-gradient(0deg,rgba(128, 128, 128, 0) 0%, rgba(128, 128, 128, 1) 100%); opacity:0 }*/ body.mobile-menu-active .mobile-overlay { pointer-events:unset; background-color:rgba(0,0,0,0.4);} body.mobile-menu-active .mobile-menu { opacity:1; transform:translateY(0) scale(1,1); } body.mobile-menu-active.dark .mobile-overlay { background-color:rgba(50,50,50,0.9) } body.mobile-menu-active .mobile-overlay.top-align .mobile-menu { box-shadow:0px 0px 100px rgba(0,0,0,0.4) } body.dark.mobile-menu-active .mobile-overlay.top-align .mobile-menu { box-shadow:0px 0px 100px rgba(99,99,99,0.7) } body.mobile-menu-active.dark .mobile-overlay.top-align, body.mobile-menu-active .mobile-overlay.top-align { background-color:transparent !important; background-image:none !important } body.mobile-menu-active .mobile-overlay.top-align .mobile-overlay-backdrop { opacity:1 } .mobile-menu-line { background-color:#ffffff; border-radius:20px } .mobile-menu-line a { display:block; text-decoration:none; color:currentColor } .mobile-menu nav { justify-content:space-between; } .dark .mobile-menu { background-color:var(--section-bg-color-dark) } .dark .mobile-menu-line { background-color:var(--bg-color-dark-pop) } .svg-icon-fill-inverse { fill:#ffffff } .dark .svg-icon-fill-inverse { fill:#000000 } .svg-icon-fill { fill:#000000 } .dark .svg-icon-fill { fill:#ffffff } .menu.active .svg-icon-fill { fill:#ffffff } .dark .menu.active .svg-icon-fill { fill:#000000 } .svg-icon-stroke-normal { stroke:#000000 } .dark .svg-icon-stroke-normal { stroke:#ffffff } #section-secondary .svg-icon-fill { fill:#ffffff } .dark #section-secondary .svg-icon-fill { fill:#000000 } .dark .active .svg-icon-stroke, .svg-icon-stroke { stroke:#000000 } .active .svg-icon-stroke, .dark .svg-icon-stroke { stroke:#ffffff } .menu .off-state { transition:all 0.2s ease-out; transform:scale(1,1); width:16px; height:16px } .menu .on-state { transition:all 0.2s ease-out; transform:scale(0,0); position:absolute; width:16px; height:16px } .menu.active .off-state { transform:scale(0,0) } .menu.active .on-state { transform:scale(1,1) } .admin-menu .integration-header { cursor:pointer; border-left:2px solid rgba(0,0,0,0); text-decoration:none; color:currentColor; } .admin-menu .integration-header.active { border-left:2px solid var(--text-color-light)} .dark .admin-menu .integration-header.active { border-left-color:var(--text-color-dark)} .admin-menu .integration-header p { font-weight:500; opacity:0.9 } .admin-menu .integration-header.active p { font-weight:500; opacity:1 } .admin-menu .integration-header.active { position:relative; z-index:1;} .admin-menu .integration-header.active::after { position:absolute; content:""; display:block; z-index:-1; top:0; left:8px; right:8px; bottom:0; border-radius:4px; overflow:hidden; background-color:rgba(0,0,0,0.03); backdrop-filter: blur(10px) } .dark .admin-menu .integration-header.active::after { background-color:rgba(255,255,255,0.06) } .badge { display:flex; border-radius:4px; padding:0 6px; min-width:20px; min-height:20px; align-items: center; justify-content: center; overflow:hidden; background-color:rgba(0,0,0,0.08) } .dark .badge { background-color:rgba(255,255,255,0.2) } .admin-menu .integration-header .badge{opacity:0.5 } .admin-menu .integration-header.active .badge{opacity:1 } .highlight { position:relative; display:inline-block; padding:0 4px; margin:0 2px } .highlight:before { content:""; position:absolute; top:0px; left:-1px; right:-1px; bottom:0px; border-radius:4px; background:rgba(0,0,0,0.1) } .dark .highlight:before { background-color:rgba(255,255,255,0.15) } .large_badge { display:flex; border-radius:4px; padding:0 10px; min-width:40px; min-height:40px; align-items:center; justify-content:center; overflow:hidden; background-color:#000; color:#fff } .dark .large_badge { background-color:#fff; color:#000 } .search_input { background:transparent; border:none; color:var(--text-color-light); } .dark .search_input { color:var(--text-color-dark); } .search_input::placeholder { opacity:0.5; color:var(--text-color-light) } .dark .search_input::placeholder { color:var(--text-color-dark) } /* HIDE_EMPTY_CATEGORIES: a zero-count category, or a group label with nothing left under it */ .admin-menu .tag-empty { display:none } .group-header .inline-cta { display:block; width:20px; height:20px; border-radius:4px; text-decoration:none; text-align:center; color:transparent; overflow:hidden; background-color:rgba(0,0,0,0.1); opacity:0.1 } .group-header:hover .inline-cta { display:block; opacity:0.5; color:currentColor; } .group-header .inline-cta:hover { opacity:1; color:currentColor; } .dark .group-header .inline-cta { background-color:rgba(255,255,255,0.1) } .group-header, .integration-header { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:24px } .integration-header div { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:16px } .integration-header div.stack { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:2px } .integration-header.packed div { gap:6px } .rendered-model { color:rgba(0,0,0,0.5); } .dark .rendered-model {color:rgba(255,255,255,0.5)} .rendered-model span.heavy { color:var(--text-color-light) } .dark .rendered-model span.heavy { color:var(--text-color-dark) } .tile-icon { padding:2px; border:1px solid rgba(0,0,0,0.1); border-radius:7px; display:block !important; width:60px; min-width:60px } .tile-icon img { margin:0 !important } .tile-icon.tile-photo { text-decoration:none } .tile-icon.tile-photo img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:5px; display:block } .dark .tile-icon { border-color:rgba(255,255,255,0.15) } /* Drag-and-drop upload zone (reusable) */ .dropzone { border:2px dashed rgba(0,0,0,0.15); border-radius:var(--border-radius); padding:var(--spacer-s) var(--spacer-s); text-align:center; cursor:pointer; color:var(--faded-text-color-dark); transition:border-color .2s, background-color .2s, color .2s; } .dropzone:hover { border-color:rgba(0,0,0,0.35); } .dropzone.dragover { border-color:var(--accent-2); background-color:rgba(249,185,42,0.06); color:var(--text-color-light); } .dropzone.has-file { border-style:solid; border-color:rgba(0,0,0,0.2); color:var(--text-color-light); } .dropzone svg { display:block; margin:0 auto var(--spacer-xs); } .dark .dropzone { border-color:rgba(255,255,255,0.18); color:var(--faded-text-color-light); } .dark .dropzone:hover { border-color:rgba(255,255,255,0.4); } .dark .dropzone.dragover { background-color:rgba(249,185,42,0.10); color:var(--text-color-dark); } .dark .dropzone.has-file { border-color:rgba(255,255,255,0.25); color:var(--text-color-dark); } /* full-width link-button (the primary