/* Springle landing page. Near-black and ivory, editorial serif headlines with an italic turn, one idea per screen. Colour is kept for meaning: the orb is the brand, and inside the product the island keeps its four colours (green listening/done, violet acting, amber needs you, red danger). */ @property --a { syntax: ''; inherits: true; initial-value: #8A6CFF; } @property --b { syntax: ''; inherits: true; initial-value: #8FB4FF; } @property --c { syntax: ''; inherits: true; initial-value: #F08CFF; } @property --spin { syntax: ''; inherits: false; initial-value: 0deg; } @property --dim { syntax: ''; inherits: false; initial-value: 0.45; } :root { color-scheme: dark; --bg: #070708; --bg-1: #0b0b0d; --card: #101012; --card-2: #16161a; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12); --ink: #F3F0EA; --ink-2: rgba(243, 240, 234, .62); --ink-3: rgba(243, 240, 234, .4); --hair: rgba(255, 255, 255, .08); /* Brand, for the orb only */ --sky: #8FB4FF; --violet: #8A6CFF; --orchid: #F08CFF; --lavender: #C9BCFF; /* The island's meanings */ --listen: #3CE3A4; --doing: #A98BFF; --doing-ink: #C4B1FF; --caution: #FFB340; --danger: #FF6961; --ring-guide: #FFD60A; --ring-do: #3380FF; --ring-warn: #F23B33; --spring: cubic-bezier(.2, .9, .24, 1.06); --ease: cubic-bezier(.22, .8, .2, 1); --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --mac: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; --round: ui-rounded, 'SF Pro Rounded', -apple-system, 'Inter', system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; } img, svg { display: block; } a { color: inherit; } button { font: inherit; color: inherit; } ::selection { background: rgba(243, 240, 234, .9); color: #0a0a0b; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } em { font-style: italic; } kbd { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font: 600 .84em/1.4 var(--font); color: var(--ink); white-space: nowrap; } .glow-top { position: absolute; inset: 0 0 auto 0; height: 1100px; z-index: 0; pointer-events: none; background: radial-gradient(55% 45% at 50% 0%, rgba(255, 246, 232, .075), transparent 72%); } .glow-top::after { /* fine grain so the dark never bands */ content: ''; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Nav: a floating pill ---------- */ .nav { position: fixed; top: 14px; left: 50%; z-index: 60; width: min(1080px, calc(100% - 28px)); transform: translateX(-50%); } .nav-pill { position: relative; display: flex; align-items: center; gap: 24px; padding: 7px 7px 7px 20px; border-radius: 999px; background: rgba(14, 14, 16, .62); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 0 0 1px var(--line), 0 10px 40px rgba(0, 0, 0, .35); transition: background .3s; } .nav.scrolled .nav-pill { background: rgba(14, 14, 16, .86); } .brand { display: block; line-height: 0; } .brand-svg { height: 32px; width: auto; margin: 2px 0 0 2px; overflow: visible; } /* Springle's living face (brand.js) */ [data-alive] { overflow: visible; } [data-alive] .bm { transform-box: fill-box; transform-origin: 50% 100%; } [data-alive] .bm-eyes { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); } [data-alive] .bm-eye { fill: #0b0b0d; transform-box: fill-box; transform-origin: 50% 50%; transition: transform .25s var(--ease); } [data-alive].blink .bm-eye { animation: face-blink .2s ease-in-out; } @keyframes face-blink { 45%, 55% { transform: scaleY(.1); } } [data-alive].hop .bm { animation: face-hop .95s cubic-bezier(.3, .7, .3, 1); } [data-alive].hop .bm-eye { transform: scaleY(.42) translateY(-12%); } @keyframes face-hop { 0% { transform: none; } 12% { transform: scale(1.12, .84); } 32% { transform: translateY(-34%) scale(.92, 1.1); } 50% { transform: translateY(0) scale(1.1, .9); } 60% { transform: rotate(-9deg); } 70% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } 90% { transform: rotate(2deg); } 100% { transform: none; } } .close-orb .bm-eye { fill: #0a0a0b; } .nav-links { display: flex; gap: 24px; margin-left: auto; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .2s; } .nav-links a:hover { color: var(--ink); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15.5px/1 var(--font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background .25s, box-shadow .25s; } .btn svg { width: 16px; height: 16px; } .btn-light { background: var(--ink); color: #0a0a0b; box-shadow: 0 12px 34px -14px rgba(255, 246, 232, .45); } .btn-light:hover { background: #fff; transform: translateY(-1px); } .btn-light:active { transform: translateY(1px); } .btn-sm { height: 40px; padding: 0 18px; font-size: 14px; } .btn-ghost { height: 48px; background: rgba(255, 255, 255, .05); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); } .btn-ghost:hover { background: rgba(255, 255, 255, .09); transform: translateY(-1px); } /* ---------- Hero ---------- */ .hero { position: relative; z-index: 1; padding: clamp(136px, 18vh, 190px) 16px 24px; text-align: center; } .maker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1 var(--font); color: var(--ink-2); text-decoration: none; transition: background .25s, color .25s; } .maker b { font-weight: 650; color: var(--ink); } .maker svg { width: 14px; height: 14px; transition: transform .25s var(--ease); } .maker:hover { background: rgba(255, 255, 255, .07); color: var(--ink); } .maker:hover svg { transform: translate(2px, -2px); } .maker-orb { width: 18px; height: 18px; color: var(--ink); } h1 { margin: 30px auto 0; font: 400 clamp(58px, 9.4vw, 138px)/.9 var(--serif); letter-spacing: -.028em; text-wrap: balance; } h1 span, h1 em { display: block; } .lede { max-width: 600px; margin: 30px auto 0; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 38px; } .avail { margin: 20px 0 0; font-size: 13.5px; color: var(--ink-3); } .try { display: inline-flex; align-items: center; padding: 6px 10px; margin: 0; border: 0; border-radius: 16px; background: none; color: var(--ink-2); font-size: 15px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } .try-keys { display: inline-flex; align-items: center; gap: 9px; } .try-touch { display: none; align-items: center; gap: 10px; } .try-word { transition: color .2s; } .try:hover .try-word { color: var(--ink); } .mic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .mic svg rect { fill: currentColor; stroke: none; } html.touch .try-keys { display: none; } html.touch .try-touch { display: inline-flex; } .reveal { animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 80ms); } @keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } } /* Keycaps */ .kc { position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; width: 64px; height: 48px; padding: 7px 8px 6px; border-radius: 9px; background: linear-gradient(180deg, #232326 0%, #18181b 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 #0a0a0b, 0 7px 16px rgba(0, 0, 0, .5); color: var(--ink-2); font: 500 10.5px/1 var(--font); text-align: left; transition: transform .12s var(--ease), box-shadow .18s var(--ease), color .18s; } .kc sup, .kc sub { position: static; vertical-align: baseline; line-height: 1; } .kc sup { align-self: flex-end; font-size: 15px; font-weight: 500; } .kc sub { font-size: 10.5px; letter-spacing: .01em; } .kc.down { transform: translateY(3px); color: #fff; box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .7), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 #0a0a0b, 0 0 26px rgba(60, 227, 164, .35); } .kc.mini { width: 30px; height: 28px; padding: 0; justify-content: center; align-items: center; font-size: 14px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 #0a0a0b; } .kc.mini.down { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .7), 0 0 0 #0a0a0b, 0 0 18px rgba(60, 227, 164, .35); } /* ---------- Stage: the Mac ---------- */ .stage { position: relative; max-width: 1180px; margin: clamp(34px, 5vh, 56px) auto 0; perspective: 2000px; perspective-origin: 50% 0; } .halo { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: -1; pointer-events: none; } .halo::before { content: ''; position: absolute; left: -620px; top: -560px; width: 1240px; height: 1240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 232, .09) 0%, rgba(255, 246, 232, .035) 36%, rgba(255, 246, 232, 0) 64%); transition: background .6s; } .halo i { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); transform: translate(-50%, -50%); transition: border-color .5s; } .halo i:nth-child(1) { width: 560px; height: 560px; } .halo i:nth-child(2) { width: 900px; height: 900px; border-color: rgba(255, 255, 255, .05); } .halo i:nth-child(3) { width: 1300px; height: 1300px; border-color: rgba(255, 255, 255, .035); } body.is-listening .halo::before { background: radial-gradient(circle, rgba(60, 227, 164, .16) 0%, rgba(60, 227, 164, .05) 34%, rgba(60, 227, 164, 0) 64%); } body.is-listening .halo i { border-color: rgba(60, 227, 164, .3); animation: radiate 1.8s var(--ease) infinite; } body.is-listening .halo i:nth-child(2) { animation-delay: .3s; } body.is-listening .halo i:nth-child(3) { animation-delay: .6s; } @keyframes radiate { from { transform: translate(-50%, -50%) scale(.82); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.06); opacity: 0; } } .device { position: relative; padding: clamp(6px, 1.1vw, 13px); border-radius: clamp(14px, 2.4vw, 30px); background: linear-gradient(180deg, #1d1c25 0%, #0d0c12 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px #000, 0 60px 160px -50px rgba(255, 246, 232, .12), 0 34px 70px -24px rgba(0, 0, 0, .9); transform-origin: 50% 100%; will-change: transform; } .screen { position: relative; aspect-ratio: 16 / 10; border-radius: clamp(8px, 1.4vw, 17px); overflow: hidden; background: #08060f; isolation: isolate; } .screen-inner { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; overflow: hidden; font-family: var(--mac); text-align: left; } .deck { position: relative; height: clamp(8px, 1.3vw, 16px); margin: 0 -4.5%; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #4a4957 0%, #22212b 42%, #0b0a10 100%); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); } .deck::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #121118, #2b2a35); } /* Wallpaper */ .wall { position: absolute; inset: 0; background: linear-gradient(180deg, #0c0c0f 0%, #16161b 45%, #24222a 75%, #34303a 100%); overflow: hidden; } .wall i { position: absolute; border-radius: 50%; filter: blur(60px); } .wall .w1 { width: 760px; height: 760px; right: -160px; bottom: -420px; background: rgba(255, 170, 120, .26); } .wall .w2 { width: 680px; height: 680px; left: -200px; bottom: -380px; background: rgba(120, 150, 220, .24); } .wall .w3 { width: 520px; height: 520px; left: 380px; top: -300px; background: rgba(255, 255, 255, .07); } /* Menu bar */ .menubar { position: absolute; inset: 0 0 auto 0; height: 34px; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 18px; font: 500 13.5px/1 var(--mac); color: rgba(255, 255, 255, .94); background: rgba(10, 10, 12, .38); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .mb-l, .mb-r { display: flex; align-items: center; gap: 19px; } .mb-l b { font-weight: 700; } .mb-glyph { width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .9); } .mb-r { gap: 15px; } .mb-r svg { width: 18px; height: 18px; } .mb-r .mb-batt { width: 27px; } .mb-face .face-fill { fill: #fff; opacity: 0; transition: opacity .3s; } .mb-face .face-line { fill: none; stroke: #fff; stroke-width: 1.5; } .mb-face .face-eye { fill: #fff; transition: fill .3s; } .mb-face.on .face-fill { opacity: 1; } .mb-face.on .face-eye { fill: #2b1f66; } /* Windows */ .win { position: absolute; border-radius: 12px; overflow: hidden; background: #fff; color: #1d1b26; font: 13px/1.4 var(--mac); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 28px 80px rgba(8, 4, 34, .6), 0 10px 24px rgba(8, 4, 34, .35); transition: opacity .5s var(--ease), transform .5s var(--ease); } .win.gone { opacity: 0; transform: scale(.975) translateY(10px); pointer-events: none; } .win svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .lights { display: flex; gap: 8px; } .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; } /* Mail */ .mail { left: 104px; top: 172px; width: 1072px; height: 546px; display: grid; grid-template-columns: 206px 318px 1fr; } .m-side { background: #efecf6; padding: 17px 10px; border-right: 1px solid #e3dfec; } .m-side .lights { margin: 0 0 14px 7px; } .m-sec { font: 600 11px/1 var(--mac); color: #8e899e; margin: 18px 10px 7px; } .m-box { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; border-radius: 7px; color: #2a2735; font-size: 13px; } .m-box svg { width: 16px; height: 16px; color: #2f6feb; } .m-box span { margin-left: auto; color: #7b7690; font-size: 12px; } .m-box.on { background: rgba(47, 111, 235, .13); } .m-list { border-right: 1px solid #ece9f2; overflow: hidden; } .m-listhead { display: flex; align-items: baseline; gap: 8px; height: 52px; padding: 17px 20px 0; } .m-listhead b { font-size: 15px; font-weight: 700; } .m-listhead small { color: #8e899e; font-size: 12px; } .m-item { position: relative; margin: 0 8px; padding: 11px 12px 12px 22px; border-radius: 9px; } .m-item + .m-item::before { content: ''; position: absolute; left: 22px; right: 12px; top: 0; height: 1px; background: #f0edf4; } .m-item.on + .m-item::before { display: none; } .m-item .u { position: absolute; left: 8px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #2f6feb; } .m-item .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .m-item b { font-size: 13px; font-weight: 600; } .m-item time { font-size: 11.5px; color: #8e899e; } .m-item .subj { font-size: 12.5px; margin-top: 1px; } .m-item p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.38; color: #8e899e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .m-item.on { background: linear-gradient(180deg, #3b7cf0, #2c68e0); color: #fff; } .m-item.on .u { background: #fff; } .m-item.on time, .m-item.on p { color: rgba(255, 255, 255, .82); } .m-read { display: flex; flex-direction: column; min-width: 0; } .m-tools { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 14px; border-bottom: 1px solid #f0edf4; color: #5e5970; } .tb { width: 38px; height: 30px; display: grid; place-items: center; border-radius: 7px; transition: background .15s, transform .15s; } .tb svg { width: 19px; height: 19px; } .tb.pressed, .c-send.pressed, .cp-add.pressed, .yn .pressed { transform: scale(.92); } .tb.pressed { background: #ebe7f4; } .tsep { width: 1px; height: 18px; margin: 0 6px; background: #e6e2ee; } .search { display: flex; align-items: center; gap: 6px; width: 176px; height: 28px; margin-left: auto; padding: 0 9px; border-radius: 7px; background: #f2f0f6; color: #9a95ab; font-size: 12.5px; } .search svg { width: 14px; height: 14px; } .m-msg { padding: 26px 36px; } .m-from { display: flex; align-items: center; gap: 12px; } .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 600; font-size: 14px; color: #fff; background: linear-gradient(135deg, #ffb46b, #ff7aa2); } .m-from b { font-size: 14px; font-weight: 600; } .m-from small { display: block; color: #8e899e; font-size: 12px; } .m-from time { margin-left: auto; font-size: 12px; color: #8e899e; } .m-msg h3 { margin: 24px 0 16px; font: 700 22px/1.25 var(--mac); letter-spacing: -.012em; } .m-msg p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #2f2c3a; } /* Compose */ .compose { left: 470px; top: 214px; width: 600px; height: 452px; z-index: 3; transform-origin: 50% 0; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 40px 100px rgba(8, 4, 34, .55), 0 12px 30px rgba(8, 4, 34, .3); } .compose.sent { animation: send .62s cubic-bezier(.55, 0, .7, .2) forwards; } @keyframes send { 30% { transform: translateY(8px) scale(.99); } to { transform: translate(120px, -560px) scale(.42) rotate(-4deg); opacity: 0; } } .c-head { position: relative; display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 14px; background: #faf9fc; border-bottom: 1px solid #eeebf3; } .c-send { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: 7px; background: #a9c2f5; color: #fff; font: 600 13px/1 var(--mac); transition: background .3s, transform .15s; } .c-send svg { width: 15px; height: 15px; } .c-send.ready { background: #2f6feb; } .c-title { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; color: #4a4658; pointer-events: none; } .c-field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-bottom: 1px solid #f1eff5; color: #2a2735; } .c-field label { width: 62px; color: #8e899e; } .chip { padding: 3px 10px; border-radius: 999px; background: rgba(47, 111, 235, .12); color: #2557c4; font-weight: 500; } .c-write { margin: 12px 12px 0; padding: 10px 12px; min-height: 104px; border-radius: 8px; font-size: 15.5px; line-height: 1.55; color: #1d1b26; } .caret { display: inline-block; width: 2px; height: 19px; margin-left: 1px; vertical-align: -4px; background: #2f6feb; opacity: 0; } .c-write.typing .caret { animation: caret 1s steps(1) infinite; } @keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .compose blockquote { margin: 14px 24px; padding-left: 13px; border-left: 2px solid #ddd6ee; color: #8e899e; font-size: 13px; line-height: 1.55; } /* Browser */ .browser { left: 128px; top: 172px; width: 1024px; height: 546px; display: flex; flex-direction: column; } .b-tabs { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px 0 16px; background: #ebe8f2; } .b-tabs .lights { margin-right: 12px; } .tab { display: flex; align-items: center; gap: 8px; width: 230px; height: 31px; padding: 0 8px 0 12px; border-radius: 8px; overflow: hidden; white-space: nowrap; font-size: 12.5px; color: #5e5970; transition: width .45s var(--ease), padding .45s var(--ease), opacity .3s, background .3s; } .tab.on { background: #fff; color: #1d1b26; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .fav { width: 16px; height: 16px; flex: none; border-radius: 4px; display: grid; place-items: center; } .b-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid #ece9f2; color: #6b6680; } .b-nav { display: flex; gap: 6px; } .b-nav svg { width: 20px; height: 20px; } .b-nav .off { opacity: .35; } .url { flex: 1; max-width: 560px; height: 31px; margin: 0 auto; border-radius: 8px; background: #f2f0f6; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #3a3647; } .url .ns { color: #d23b36; font-weight: 600; } .url .ns:empty { display: none; } .b-page { position: relative; flex: 1; overflow: hidden; } .pg { position: absolute; inset: 0; transition: opacity .45s var(--ease); } .pg.gone { opacity: 0; } /* Dock */ .dock { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; width: max-content; margin: 0 auto; display: flex; gap: 10px; padding: 8px 10px; border-radius: 22px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 12px 30px rgba(10, 4, 40, .3); } .app { position: relative; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px rgba(0, 0, 0, .2); } .app svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .app.run::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, .85); } .a-mail { background: linear-gradient(180deg, #5fb3ff, #2571f2); } .a-web { background: linear-gradient(180deg, #ffffff, #dfe6f5); color: #2f7cf6; } .a-photos { background: #fff; } .a-photos i { position: absolute; width: 18px; height: 18px; border-radius: 50%; mix-blend-mode: multiply; } .a-photos i:nth-child(1) { left: 10px; top: 10px; background: #ff9f43; } .a-photos i:nth-child(2) { right: 10px; top: 10px; background: #ff6fa8; } .a-photos i:nth-child(3) { left: 10px; bottom: 10px; background: #5ad2a0; } .a-photos i:nth-child(4) { right: 10px; bottom: 10px; background: #6fa0ff; } .a-cal { background: #fff; color: #1d1b26; display: flex; flex-direction: column; justify-content: center; gap: 1px; } .a-cal b { font: 700 9px/1 var(--mac); color: #ff3b30; letter-spacing: .04em; } .a-cal em { font: 400 23px/1 var(--mac); font-style: normal; } .a-msg { background: linear-gradient(180deg, #6ef08d, #22c35a); } .a-msg svg { width: 30px; height: 30px; } .a-notes { background: linear-gradient(180deg, #fff 0 34%, #fff7d6 34%); display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 0 10px 11px; } .a-notes::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 15px; border-radius: 12px 12px 0 0; background: #ffcc33; } .a-notes i { display: block; width: 100%; height: 2px; background: #e6dcb8; } .a-set { background: linear-gradient(180deg, #b8b6c2, #7d7a88); } /* Springle's spotlight: dim everything but the target, ring it, point at it */ .spot { position: absolute; z-index: 20; border-radius: 14px; pointer-events: none; opacity: 0; --rc: var(--ring-guide); --dim: .45; box-shadow: 0 0 0 3000px rgba(4, 2, 14, var(--dim)); transition: left .6s var(--spring), top .6s var(--spring), width .6s var(--spring), height .6s var(--spring), opacity .4s var(--ease), --dim .4s; } .spot.on { opacity: 1; } .spot[data-tone="do"] { --rc: var(--ring-do); --dim: .15; } .spot[data-tone="warn"] { --rc: var(--ring-warn); } .ring { position: absolute; inset: -4px; border-radius: 17px; border: 5px solid var(--rc); box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 75%, transparent), inset 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); animation: pulse 1.25s ease-in-out infinite; } @keyframes pulse { 50% { transform: scale(1.05); opacity: .78; } } .arrow { position: absolute; left: 50%; bottom: 100%; width: 30px; height: 50px; margin: 0 0 12px -15px; fill: var(--rc); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); opacity: 0; transition: opacity .3s; animation: bob .9s ease-in-out infinite; } .spot.below .arrow { bottom: auto; top: 100%; margin: 12px 0 0 -15px; rotate: 180deg; } .spot[data-tone="guide"] .arrow, .spot[data-tone="warn"] .arrow { opacity: 1; } @keyframes bob { 50% { translate: 0 -9px; } } .spot.below .arrow { animation-name: bob-up; } @keyframes bob-up { 50% { translate: 0 9px; } } /* Pointers */ .pointer { position: absolute; left: 0; top: 0; z-index: 40; width: 21px; height: 30px; pointer-events: none; will-change: transform; overflow: visible; } .pointer path { stroke-linejoin: round; transition: transform .14s var(--ease); transform-origin: 2px 2px; } .cursor path { fill: #111; stroke: #fff; stroke-width: 1.5; } .cursor { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); } .ghost { opacity: 0; transition: opacity .35s; filter: drop-shadow(0 0 10px rgba(51, 128, 255, .9)); } .ghost path { fill: rgba(51, 128, 255, .82); stroke: rgba(255, 255, 255, .95); stroke-width: 1.5; } .ghost.on { opacity: 1; } .pointer.press path { transform: scale(.86); } .ripple { position: absolute; z-index: 39; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; pointer-events: none; border: 3px solid rgba(255, 255, 255, .9); } .ripple.do { border-color: var(--ring-do); box-shadow: 0 0 16px var(--ring-do); } /* Calendar */ .cal { left: 116px; top: 158px; width: 1048px; height: 560px; z-index: 4; display: flex; flex-direction: column; } .cal-bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; background: #f6f5f8; border-bottom: 1px solid #ebe8f0; } .cal-bar .lights { margin-right: 6px; } .cal-plus { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 6px; font: 300 22px/1 var(--mac); color: #5e5970; } .cal-seg { display: flex; margin: 0 auto; padding: 2px; border-radius: 8px; background: #e9e6ef; } .cal-seg span { padding: 5px 15px; border-radius: 6px; font: 500 12.5px/1 var(--mac); color: #4a4658; } .cal-seg .on { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .cal-today { padding: 5px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px #dcd8e4; font: 500 12.5px/1 var(--mac); color: #3a3647; } .cal-title { padding: 14px 20px 10px; font: 300 26px/1 var(--mac); color: #8e899e; letter-spacing: -.01em; } .cal-title b { font-weight: 800; color: #1d1b26; } .cal-head { display: grid; grid-template-columns: 64px repeat(7, 1fr); height: 38px; align-items: center; border-bottom: 1px solid #ebe8f0; } .cal-head span { padding-left: 10px; font: 500 12.5px/1 var(--mac); color: #6b6680; } .cal-head b { font-weight: 600; color: #1d1b26; } .cal-head .today b { padding: 2px 7px; border-radius: 999px; background: #ff3b30; color: #fff; } .cal-body { position: relative; flex: 1; display: grid; grid-template-columns: 64px repeat(7, 1fr); background: repeating-linear-gradient(180deg, transparent 0 55px, #efecf3 55px 56px); } .cal-times span { display: block; height: 56px; padding: 4px 10px 0 0; font: 500 11px/1 var(--mac); color: #9a95ab; text-align: right; } .cal-col { position: relative; box-shadow: inset 1px 0 0 #efecf3; } .cal-col.today { background: rgba(255, 59, 48, .025); } .cal-ev, .cal-slot { position: absolute; left: 4px; right: 4px; top: calc(var(--s) * 56px + 2px); height: calc(var(--d) * 56px - 4px); border-radius: 6px; } .cal-ev { padding: 5px 8px; overflow: hidden; background: color-mix(in srgb, var(--ev) 15%, #fff); box-shadow: inset 3px 0 0 var(--ev); font: 500 11px/1.35 var(--mac); color: color-mix(in srgb, var(--ev) 72%, #000); } .cal-ev b { display: block; font-size: 12px; font-weight: 650; } .cal-new { opacity: 0; transform: scale(.9); transition: opacity .4s, transform .55s var(--spring); } .cal-new.show { opacity: 1; transform: none; } .cal-pop { position: absolute; left: 632px; top: 168px; z-index: 3; width: 292px; padding: 14px 16px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 18px 50px rgba(10, 6, 30, .3); transition: opacity .2s, transform .3s var(--spring); } .cal-pop::before { content: ''; position: absolute; left: -7px; top: 52px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -.5px .5px 0 rgba(0, 0, 0, .15); } .cal-pop.gone { opacity: 0; transform: translateX(-6px) scale(.97); pointer-events: none; } .cp-title { position: relative; display: flex; align-items: center; min-height: 30px; padding-bottom: 10px; border-bottom: 1px solid #efecf3; font: 650 17px/1.2 var(--mac); color: #1d1b26; } .cp-title em { font-style: normal; font-weight: 500; color: #b3aec0; } #cp-text:not(:empty) ~ em { display: none; } .cp-title .caret { opacity: 0; height: 20px; } .cp-title.typing .caret { animation: caret 1s steps(1) infinite; } .cp-row { display: flex; align-items: center; gap: 9px; padding-top: 10px; font: 400 13px/1.2 var(--mac); color: #3a3647; } .cp-row svg { width: 16px; height: 16px; fill: none; stroke: #8e899e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cp-row.faint { color: #9a95ab; } .cp-foot { display: flex; justify-content: flex-end; margin-top: 12px; } .cp-add { padding: 7px 18px; border-radius: 7px; background: #c9c6d1; color: #fff; font: 600 13px/1 var(--mac); transition: background .3s, transform .15s; } .cp-add.ready { background: #2f6feb; } .url .lock { width: 13px; height: 13px; stroke: #6b6680; } .fav.sun { border-radius: 50%; background: linear-gradient(135deg, #ffd36b, #ff9f43); } /* ---------- The island ---------- */ .island { position: absolute; z-index: 30; top: 0; left: 542px; width: 196px; height: 34px; background: #000; border-radius: 0 0 14px 14px; color: var(--ink); transition: width .6s var(--spring), height .6s var(--spring), left .6s var(--spring), border-radius .5s var(--ease), box-shadow .5s var(--ease); } .island::before, .island::after { content: ''; position: absolute; top: 0; width: 10px; height: 10px; } .island::before { left: -10px; background: radial-gradient(circle at 0 100%, transparent 9.5px, #000 10px); } .island::after { right: -10px; background: radial-gradient(circle at 100% 100%, transparent 9.5px, #000 10px); } .island.open { border-radius: 0 0 28px 28px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); } .island[data-mood="listening"].open { box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 8px 40px rgba(60, 227, 164, .16); } .island[data-mood="warning"] { box-shadow: 0 0 0 1.5px rgba(255, 105, 97, .55), 0 14px 46px rgba(255, 90, 95, .42); } .island.peek { cursor: pointer; } .isl-top { position: absolute; inset: 0 0 auto 0; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 15px; } .isl-body { position: absolute; top: 44px; left: 22px; opacity: 0; transition: opacity .25s; } .island.open .isl-body { opacity: 1; transition-delay: .1s; } .edge { position: absolute; left: 16%; right: 16%; bottom: 0; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--doing), #e2d6ff, var(--doing), transparent); box-shadow: 0 0 14px var(--doing); transition: opacity .4s; } .island.acting .edge { opacity: 1; animation: sweep 1.7s ease-in-out infinite; } @keyframes sweep { 0%, 100% { transform: translateX(-26%); } 50% { transform: translateX(26%); } } /* Springle's face: the orb, built as the brand book says (6.2 eye-widths across, eyes 1×2, 0.6 apart) */ .orb { --s: 22px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; background: conic-gradient(from var(--spin), var(--a), var(--b), var(--c), var(--a)); box-shadow: 0 0 12px color-mix(in srgb, var(--a) 65%, transparent); opacity: 0; transform: scale(.6); animation: spin 7s linear infinite; transition: --a .6s, --b .6s, --c .6s, opacity .35s var(--ease), transform .45s var(--spring); } .orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .86), rgba(255, 255, 255, .2) 38%, transparent 62%); } .orb .eyes { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--s) / 6.2 * .6); } .orb .eyes i { width: calc(var(--s) / 6.2); height: calc(var(--s) / 6.2 * 2); border-radius: 99px; background: #fff; animation: blink 5.5s infinite; } .island.awake .orb, .island.peek .orb { opacity: 1; transform: none; } .orb.hop { animation: spin 7s linear infinite, hop .6s var(--spring); } @keyframes spin { to { --spin: 360deg; } } @keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.12); } } @keyframes hop { 40% { transform: translateY(-3px) scale(1.12); } } .orb[data-mood="idle"] { --a: #8A6CFF; --b: #8FB4FF; --c: #F08CFF; } .orb[data-mood="listening"] { --a: #2EE6A6; --b: #19C3E6; --c: #C2F970; } .orb[data-mood="thinking"] { --a: #8A7CFF; --b: #5AC8FA; --c: #E0B3FF; animation-duration: 1.8s; } .orb[data-mood="speaking"] { --a: #4F8BFF; --b: #9B6BFF; --c: #FF8BC2; animation-duration: 4s; } .orb[data-mood="celebrating"] { --a: #FFC53D; --b: #FF8A3D; --c: #FFF0B0; } .orb[data-mood="warning"] { --a: #FF5A5F; --b: #FF9F43; --c: #FF3B30; animation-duration: 3s; } .bars { display: flex; align-items: center; gap: 2.5px; height: 18px; opacity: 0; transition: opacity .3s; } .bars.on { opacity: 1; } .bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--bc, var(--listen)); } .bars[data-mode="talk"] { --bc: var(--doing-ink); } /* Card contents */ .st { display: flex; align-items: center; gap: 7px; height: 18px; font: 600 12.5px/1 var(--mac); color: var(--tc); letter-spacing: .005em; } .st[data-tone="listen"], .st[data-tone="done"] { --tc: var(--listen); } .st[data-tone="doing"] { --tc: var(--doing-ink); } .st[data-tone="caution"] { --tc: #FFC769; } .st[data-tone="danger"] { --tc: var(--danger); } .st[data-tone="quiet"] { --tc: rgba(255, 255, 255, .62); } .st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tc); box-shadow: 0 0 8px var(--tc); } .st[data-tone="quiet"] .st-dot { box-shadow: none; opacity: .7; } .st-ic { width: 13px; height: 13px; flex: none; } .st-ic svg { width: 13px; height: 13px; } .st-detail { font-weight: 500; opacity: .8; } .st-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; color: rgba(255, 255, 255, .4); } .st-tools .stop { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); } .st-tools .stop::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .85); } .st-tools .fold { width: 9px; height: 9px; border-left: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: translateY(2px) rotate(45deg); } .st-tools .more { font: 700 15px/1 var(--mac); letter-spacing: 1px; transform: translateY(-3px); } .kb { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: rgba(60, 227, 164, .14); color: var(--listen); font: 600 11.5px/1 var(--mac); letter-spacing: .06em; } .dots { display: inline-flex; gap: 3px; margin-left: 4px; } .dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; animation: dot 1.1s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; } @keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } } .w-springle { margin: 11px 0 0; font: 500 17px/1.38 var(--round); color: var(--ink); letter-spacing: -.003em; } .w-springle b { font-weight: 700; color: #fff; } .w-them { margin: 11px 0 0; font: 400 15.5px/1.42 var(--mac); color: rgba(255, 255, 255, .9); } .w-them.w-ph { color: rgba(255, 255, 255, .36); } .w-them.faint { font-size: 13.5px; color: rgba(255, 255, 255, .44); } .yn { display: flex; gap: 8px; margin-top: 14px; } .yn span { flex: 1; height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font: 600 14.5px/1 var(--mac); transition: transform .15s, background .15s; } .yn kbd { font: 500 11px/1 var(--mac); opacity: .5; } .yn .yes { background: #fff; color: #0B0A14; } .yn .yes.pressed { background: #e6e1f7; } .yn .no { background: rgba(255, 255, 255, .1); color: #fff; } .receipt { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 11px 12px; border-radius: 15px; background: rgba(60, 227, 164, .07); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .2); } .r-check { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--listen); color: #00150D; } .r-check svg { width: 14px; height: 14px; } .r-text b { display: block; font: 600 14.5px/1.25 var(--mac); } .r-text small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .6); } .r-save { margin-left: auto; flex: none; height: 28px; padding: 0 11px; display: grid; place-items: center; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 500 12px/1 var(--mac); color: rgba(255, 255, 255, .72); } .peek-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 20px; font: 600 14px/1 var(--round); color: #fff; } .peek-row .kb { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); } /* ---------- Console under the Mac ---------- */ .console { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; width: fit-content; max-width: min(1180px, 100%); margin: 26px auto 0; padding: 6px; border-radius: 30px; background: rgba(14, 14, 16, .76); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 50px rgba(0, 0, 0, .5); } .seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--hair); } .seg button, .asks button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14.5px/1 var(--font); cursor: pointer; white-space: nowrap; transition: color .25s, background .25s, box-shadow .25s; } .seg button svg, .asks button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .seg button:hover, .asks button:hover { color: var(--ink); } .seg button[aria-checked="true"] { color: #fff; } .seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: left .45s var(--spring), width .45s var(--spring); } .asks { display: inline-flex; gap: 6px; } .asks button { box-shadow: inset 0 0 0 1px var(--hair); background: rgba(255, 255, 255, .02); } .asks button[aria-checked="true"] { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } .holdpad { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 18px 0 9px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(60, 227, 164, .07); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .25); color: #bff5df; font: 600 14.5px/1 var(--font); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transition: background .25s, box-shadow .25s, transform .15s; } .holdpad:hover { background: rgba(60, 227, 164, .11); } .holdpad.down { transform: scale(.98); background: rgba(60, 227, 164, .16); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .55), 0 0 30px rgba(60, 227, 164, .25); } .hp-label { margin-left: 6px; } .hp-mic { display: none; width: 38px; height: 38px; background: rgba(60, 227, 164, .14); box-shadow: none; color: var(--listen); } html.touch .holdpad .kc { display: none; } html.touch .hp-mic { display: grid; } .holdpad.down .hp-mic { background: var(--listen); color: #00150D; } .live { min-height: 2.9em; max-width: 560px; margin: 22px auto 0; padding: 0 8px; font: 500 17px/1.45 var(--round); color: var(--ink); } .fine { max-width: 560px; margin: 18px auto 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; } @media (min-width: 821px) { .live { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; overflow: hidden; clip-path: inset(50%); } } /* ---------- Sections ---------- */ .sec, .close { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: clamp(110px, 14vw, 190px) clamp(16px, 4vw, 40px) 0; } .sec-head { text-align: center; } .sec-head.left { text-align: left; } .sec-head.left h2, .sec-head.left .sub { margin-left: 0; } .eyebrow { margin: 0 0 20px; font: 600 12px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } h2 { margin: 0 auto; max-width: 15ch; font: 400 clamp(44px, 6.4vw, 92px)/.98 var(--serif); letter-spacing: -.022em; text-wrap: balance; } .sub { max-width: 560px; margin: 24px auto 0; font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; } /* Visible by default. Only once a page script has started watching (it adds .js-reveal to , after marking what's already on screen) do sections below the fold wait to rise in; if it never hears back, it takes the class away and everything shows. */ .rv { transition: opacity 1s var(--ease), transform 1s var(--ease); } .js-reveal .rv:not(.in) { opacity: 0; transform: translateY(24px); } /* ---------- Things people ask ---------- */ .strip { position: relative; z-index: 1; padding: clamp(90px, 11vw, 140px) 0 0; text-align: center; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 70s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; font: italic 400 clamp(26px, 2.6vw, 36px)/1.3 var(--serif); color: rgba(243, 240, 234, .46); white-space: nowrap; } .marquee-track span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Recording slots ---------- */ .clip { position: relative; margin: 0; } .clip-screen { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16 / 10); border-radius: clamp(18px, 2.4vw, 30px); background: #0c0c0e; container-type: inline-size; isolation: isolate; box-shadow: inset 0 0 0 1px var(--line), 0 50px 120px -50px rgba(0, 0, 0, .95); } .clip-view { position: absolute; inset: 0; overflow: hidden; } .clip-view video { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; cursor: pointer; } .clip-cap { position: absolute; left: 50%; bottom: 8%; z-index: 4; max-width: 74%; padding: .7em 1.1em; transform: translate(-50%, 8px); border-radius: 14px; background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 clamp(12px, 1.8cqw, 19px)/1.35 var(--round); color: #fff; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); } .clip-cap.on { opacity: 1; transform: translate(-50%, 0); } .clip-play { position: absolute; left: 50%; top: 50%; z-index: 5; width: 68px; height: 68px; margin: -34px 0 0 -34px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #0a0a0b; background: rgba(243, 240, 234, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); } .clip-play svg { width: 24px; height: 24px; margin-left: 3px; } .clip-play:hover { transform: scale(1.06); } .clip.has-video:not(.playing) .clip-play { opacity: 1; pointer-events: auto; } .clip-sound, .clip-badge { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font: 600 12.5px/1 var(--font); } .clip-sound { right: 14px; bottom: 14px; cursor: pointer; } .clip-sound svg { width: 16px; height: 16px; } .clip-badge { right: 14px; top: 14px; } /* Placeholder: a quiet stand-in that names the shot */ .ph { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(60% 55% at 50% 115%, rgba(255, 246, 232, .08), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 11px), #0c0c0e; } .ph::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .035) 50%, transparent 60%); background-size: 260% 100%; animation: shimmer 6s ease-in-out infinite; } .ph::after { content: ''; position: absolute; inset: clamp(10px, 2cqw, 20px); border-radius: clamp(10px, 1.6cqw, 18px); border: 1px dashed rgba(255, 255, 255, .09); pointer-events: none; } @keyframes shimmer { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } } .ph-island { position: absolute; left: 50%; top: 0; z-index: 1; display: flex; align-items: center; width: 22%; min-width: 80px; height: max(20px, 4.4cqw); padding-left: max(8px, 1.4cqw); transform: translateX(-50%); border-radius: 0 0 2cqw 2cqw; background: #000; } .ph-orb { --s: clamp(10px, 2.4cqw, 20px); opacity: 1; transform: none; } .ph-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4cqw, 14px); max-width: 76%; text-align: center; } .ph-id { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 600 clamp(9.5px, 1.2cqw, 11.5px)/1 var(--font); letter-spacing: .16em; } .ph-title { font: 400 clamp(20px, 4cqw, 46px)/1.02 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; } .ph-say { font: 400 clamp(12px, 1.8cqw, 17px)/1.45 var(--font); color: var(--ink-2); text-wrap: balance; } .ph-meta { display: inline-flex; align-items: center; gap: 7px; font: 500 clamp(10.5px, 1.3cqw, 12.5px)/1 var(--font); color: var(--ink-3); } .ph-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; } .ph-wave { position: absolute; left: 50%; bottom: clamp(18px, 4.5cqw, 40px); z-index: 1; display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 14px; transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .ph-wave i { width: 3px; height: 8px; border-radius: 2px; background: var(--ink); animation: wave 1.2s ease-in-out infinite; } .ph-wave i:nth-child(2n) { animation-delay: -.3s; } .ph-wave i:nth-child(3n) { animation-delay: -.6s; } .ph-wave i:nth-child(5n) { animation-delay: -.9s; } @keyframes wave { 50% { height: 18px; } } .ph-step { padding: 6px 12px; border-radius: 999px; background: rgba(60, 227, 164, .12); color: var(--listen); font: 600 clamp(11px, 1.4cqw, 13px)/1 var(--font); } @container (max-width: 440px) { .ph-say, .ph-meta { display: none; } } /* ---------- Any app, any task ---------- */ .panel { position: relative; padding: clamp(64px, 9vw, 120px) clamp(18px, 5vw, 72px) clamp(28px, 4vw, 60px); border-radius: clamp(28px, 4vw, 48px); background: radial-gradient(70% 50% at 50% 0%, rgba(255, 246, 232, .06), transparent 70%), var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 720px; margin: 56px auto 0; } .stats div { padding: 0 12px; text-align: center; } .stats div + div { box-shadow: -1px 0 0 var(--line); } .stats dt { font: 400 clamp(64px, 7vw, 96px)/1 var(--serif); color: var(--ink); } .stats dd { margin: 10px 0 0; font: 600 12px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .panel .media { margin-top: clamp(48px, 6vw, 72px); } .film-row { display: flex; justify-content: center; margin-top: 28px; } /* ---------- How it works: a sticky story ---------- */ .flow-wrap { position: relative; height: 270vh; margin-top: clamp(40px, 5vw, 64px); } .flow { position: sticky; top: 11vh; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, clamp(380px, 38vw, 520px)) minmax(250px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; height: 78vh; } .flow-tabs { margin: 0; padding: 0; list-style: none; } .flow-tabs button { display: block; width: 100%; padding: 11px 0 11px 20px; border: 0; border-left: 2px solid var(--line-2); background: none; text-align: left; cursor: pointer; font: 400 clamp(22px, 2vw, 28px)/1.15 var(--serif); color: var(--ink-3); transition: color .3s, border-color .3s; } .flow-tabs button:hover { color: var(--ink-2); } .flow-tabs button[aria-selected="true"] { color: var(--ink); border-left-color: var(--ink); } .flow-media { width: 100%; max-width: min(520px, 61vh); margin: 0 auto; } .flow-copy { position: relative; min-height: 220px; } .flow-copy article { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; } .flow-copy article.on { opacity: 1; transform: none; pointer-events: auto; } .flow-copy h3 { margin: 0 0 14px; font: 400 clamp(32px, 3.2vw, 46px)/1 var(--serif); letter-spacing: -.015em; } .flow-copy p { margin: 0; max-width: 340px; font-size: 17px; line-height: 1.6; color: var(--ink-2); } /* ---------- Guide me or do it for me ---------- */ .ways-switch { position: relative; display: flex; width: fit-content; margin: 40px auto 0; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); } .ways-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 15px/1 var(--font); color: var(--ink-2); transition: color .3s; } .ways-switch button[aria-selected="true"] { color: #0a0a0b; } .ways-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 999px; background: var(--ink); transition: left .45s var(--spring), width .45s var(--spring); } .dot { width: 8px; height: 8px; border-radius: 50%; } .dot-guide { background: var(--ring-guide); box-shadow: 0 0 8px rgba(255, 214, 10, .7); } .dot-do { background: var(--ring-do); box-shadow: 0 0 8px rgba(51, 128, 255, .7); } .ways { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 48px; } .ways-copy { position: relative; min-height: 340px; } .ways-copy article { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; } .ways-copy article.on { position: relative; opacity: 1; transform: none; pointer-events: auto; } .ways-copy .say { margin: 0 0 20px; font: italic 400 clamp(28px, 2.8vw, 40px)/1.12 var(--serif); color: var(--ink); text-wrap: balance; } .ways-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); } .ways-copy ul { margin: 26px 0 0; padding: 0; list-style: none; } .ways-copy li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink); } .ways-copy li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); } /* ---------- Careful by design: small product moments, no screenshots ---------- */ .feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 72px); } .fcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .fcard-wide { grid-column: span 2; } .fui { position: relative; display: grid; place-items: center; height: 280px; overflow: hidden; background: radial-gradient(70% 80% at 50% 20%, rgba(255, 255, 255, .045), transparent 70%), #0b0b0d; box-shadow: inset 0 -1px 0 var(--line); } .fcopy { padding: 26px 28px 30px; } .fcopy h3 { margin: 0 0 10px; font: 400 clamp(26px, 2.3vw, 32px)/1.05 var(--serif); letter-spacing: -.01em; } .fcopy p { margin: 0; max-width: 520px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); } .mini-island { position: relative; z-index: 1; width: min(360px, 84%); padding: 16px 20px 18px; border-radius: 26px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px rgba(0, 0, 0, .7); text-align: left; font-family: var(--mac); } .mi-row { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--mac); color: #FFC769; } .mi-dot { width: 7px; height: 7px; border-radius: 50%; } .mi-dot.amber { background: #FFC769; box-shadow: 0 0 8px #FFC769; } .mi-dot.red { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .mi-dot.green { background: var(--listen); box-shadow: 0 0 8px var(--listen); } .mi-status.red { color: var(--danger); } .mi-status.green { color: var(--listen); } .mi-words { margin: 11px 0 0; font: 500 17px/1.38 var(--round); color: #fff; } .mi-yn { display: flex; gap: 8px; margin-top: 14px; } .mi-yn button { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; cursor: pointer; font: 600 14.5px/1 var(--mac); transition: transform .15s, background .2s, opacity .3s; } .mi-yn button:active { transform: scale(.96); } .mi-yn kbd { padding: 0; background: none; box-shadow: none; font: 500 11px/1 var(--mac); opacity: .5; color: inherit; } .mi-yn [data-answer="yes"] { background: #fff; color: #0a0a0b; } .mi-yn [data-answer="no"] { background: rgba(255, 255, 255, .1); color: #fff; } .mi-yn.gone { opacity: 0; pointer-events: none; } .fui-ask .mini-island { pointer-events: auto; } .fui-ask .mi-yn button { pointer-events: auto; } .fui-check .mail-thumb { position: absolute; left: 50%; top: 32px; width: 300px; padding: 14px 16px 16px; transform: translateX(-56%) rotate(-3deg); border-radius: 12px; background: #f6f4ef; color: #1d1b26; text-align: left; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); } .mt-from { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.3 var(--mac); color: #8e899e; } .mail-thumb b { display: block; margin-top: 6px; font: 700 15px/1.25 var(--mac); } .mt-link { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 6px; background: #2f6feb; color: #fff; font: 600 12px/1 var(--mac); } .fui-check .mini-island { width: 300px; margin-top: 118px; } .fui-notes { align-content: center; gap: 8px; padding: 0 28px; } .note { display: flex; align-items: center; gap: 12px; width: min(330px, 100%); padding: 12px 14px; border-radius: 14px; background: #141417; box-shadow: inset 0 0 0 1px var(--line); text-align: left; } .note:nth-child(2) { transform: translateX(14px); } .note i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); } .note b { display: block; font: 600 13.5px/1.3 var(--mac); color: var(--ink); } .note span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); } .fui-type { align-content: center; justify-items: center; gap: 26px; } .tt-switch { display: flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); } .tt-switch button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 13px/1 var(--font); color: var(--ink-2); transition: background .3s, color .3s; } .tt-switch button.on { background: var(--ink); color: #0a0a0b; } .tt-stage { position: relative; display: grid; place-items: center; width: 280px; height: 64px; } .tt-talk, .tt-type { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: scale(.96); transition: opacity .35s, transform .35s var(--ease); } .tt-talk.on, .tt-type.on { opacity: 1; transform: none; } .tt-talk .kc.mini { color: #fff; box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .7), 0 0 16px rgba(60, 227, 164, .3); } .wave { display: flex; align-items: center; gap: 3px; height: 30px; margin-left: 10px; } .wave i { width: 3px; height: 8px; border-radius: 2px; background: var(--listen); animation: wave 1s ease-in-out infinite; } .wave i:nth-child(2) { animation-delay: -.2s; } .wave i:nth-child(3) { animation-delay: -.5s; } .wave i:nth-child(4) { animation-delay: -.1s; } .wave i:nth-child(5) { animation-delay: -.7s; } .wave i:nth-child(6) { animation-delay: -.35s; } .wave i:nth-child(7) { animation-delay: -.6s; } .tt-box { display: flex; align-items: center; width: 260px; height: 44px; padding: 0 16px; border-radius: 14px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font: 400 14.5px/1 var(--mac); color: #fff; } .tt-caret { width: 2px; height: 18px; margin-left: 2px; background: #fff; animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .fui-apps { grid-template-columns: repeat(4, 56px); gap: 14px; place-content: center; } .fui-apps img { width: 56px; height: 56px; padding: 13px; border-radius: 16px; background: #141417; box-shadow: inset 0 0 0 1px var(--line); animation: float 6s ease-in-out infinite; } .fui-apps img:nth-child(2n) { animation-delay: -1.5s; } .fui-apps img:nth-child(3n) { animation-delay: -3s; } @keyframes float { 50% { transform: translateY(-5px); } } /* ---------- Privacy ---------- */ .privacy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .pt { margin: 0; padding: 0; list-style: none; } .pt li { display: grid; grid-template-columns: 170px 1fr auto; gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); } .pt li:last-child { border-bottom: 1px solid var(--line); } .pt-k { font: 400 24px/1.1 var(--serif); color: var(--ink); } .pt p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .pt-c { padding: 5px 10px; border-radius: 999px; font: 600 11.5px/1 var(--font); white-space: nowrap; } .pt-c.on { background: rgba(60, 227, 164, .1); color: var(--listen); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .3); } .pt-c.off { background: rgba(255, 255, 255, .03); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); } .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 64px 0 0; padding: 0; list-style: none; } .facts li { padding: 24px 26px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); } .facts b { display: block; margin-bottom: 6px; font: 400 22px/1.15 var(--serif); color: var(--ink); } /* ---------- Who it's for ---------- */ .people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 72px); } .person { display: flex; flex-direction: column; padding: 30px 26px 28px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .person .q { margin: 0 0 auto; padding-bottom: 36px; font: 400 clamp(26px, 2.2vw, 32px)/1.08 var(--serif); color: var(--ink); text-wrap: balance; } .person .who { margin: 0 0 6px; font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .person p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .helper { max-width: 640px; margin: 36px auto 0; text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); } /* ---------- FAQ ---------- */ .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { position: relative; padding: 24px 52px 24px 0; list-style: none; cursor: pointer; font-size: clamp(16.5px, 1.4vw, 19px); font-weight: 550; letter-spacing: -.012em; color: var(--ink); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::before, .faq-list summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: var(--ink-2); transition: transform .3s var(--ease); } .faq-list summary::after { transform: rotate(90deg); } .faq-list details[open] summary::after { transform: rotate(0); } .faq-list details p { margin: 0 0 26px; max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--ink-2); animation: open .35s var(--ease); } @keyframes open { from { opacity: 0; transform: translateY(-6px); } } /* ---------- Close ---------- */ .close { text-align: center; padding-bottom: 40px; } .close-orb { width: 200px; height: 200px; margin: 0 auto 6px; animation: breathe 6s ease-in-out infinite; } @keyframes breathe { 50% { transform: scale(1.04); } } .close h2 { max-width: none; } .close h2 span, .close h2 em { display: block; } .ea-form { display: flex; justify-content: center; gap: 10px; max-width: 500px; margin: 36px auto 0; } .ea-form input { flex: 1; min-width: 0; height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 500 15.5px/1 var(--font); outline: none; transition: box-shadow .2s, background .2s; } .ea-form input::placeholder { color: var(--ink-3); } .ea-form input:focus { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); } .ea-note { min-height: 1.5em; margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); } .foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 80px auto 0; padding: 28px clamp(16px, 4vw, 40px) 40px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; } .foot img { height: 24px; width: auto; opacity: .75; } .foot a { color: var(--ink-2); text-decoration: none; } .foot a:hover { color: var(--ink); } .foot-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 22px; } .foot-links { display: flex; gap: 18px; } @media (max-width: 640px) { .foot { flex-direction: column; align-items: flex-start; } .foot-r { justify-content: flex-start; } } /* ---------- The film ---------- */ .film { width: min(1200px, 94vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink); } .film::backdrop { background: rgba(4, 4, 5, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .film[open] { animation: film-in .45s var(--ease); } @keyframes film-in { from { opacity: 0; transform: translateY(16px) scale(.98); } } .film-x { position: absolute; right: 0; top: -54px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } .film-x svg { width: 18px; height: 18px; } /* ---------- Small screens ---------- */ @media (max-width: 1000px) { .feat { grid-template-columns: 1fr 1fr; } .fcard-wide { grid-column: span 2; } .people { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .flow-wrap { height: auto; } .flow { position: static; height: auto; grid-template-columns: 1fr; gap: 28px; } .flow-tabs { display: flex; gap: 8px; overflow-x: auto; order: -1; } .flow-tabs button { width: auto; padding: 10px 16px; border: 0; border-radius: 999px; font: 600 14px/1 var(--font); white-space: nowrap; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); } .flow-tabs button[aria-selected="true"] { background: var(--ink); color: #0a0a0b; } .flow-copy { min-height: 170px; text-align: center; } .flow-copy article { inset: 0 0 auto 0; } .flow-copy p { margin: 0 auto; } .ways, .privacy, .faq { grid-template-columns: 1fr; } .ways-copy { min-height: 0; } .pt li { grid-template-columns: 1fr auto; } .pt li p { grid-column: 1 / -1; grid-row: 2; } .facts { grid-template-columns: 1fr; } } @media (max-width: 820px) { .nav-links { display: none; } .nav .btn-sm { margin-left: auto; } .console { flex-direction: column; width: auto; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; gap: 12px; } .holdpad { order: -1; height: 56px; padding: 0 24px 0 12px; font-size: 16px; } .asks { flex-wrap: wrap; justify-content: center; } .halo i:nth-child(3) { display: none; } } @media (max-width: 640px) { .feat, .people { grid-template-columns: 1fr; } .fcard-wide { grid-column: span 1; } .stats dt { font-size: 56px; } .ea-form { flex-direction: column; } .foot { flex-direction: column; align-items: flex-start; } .seg button, .asks button { padding: 0 13px; font-size: 14px; } } /* ---------- Reduce Motion: everything still works, nothing drifts ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-alive] .bm, [data-alive] .bm-eye, [data-alive] .bm-eyes { animation: none !important; transition: none !important; } .reveal, .close-orb, .ph::before, .ph-wave i, .wave i, .fui-apps img, .marquee-track { animation: none !important; } .marquee { overflow-x: auto; } .rv, .js-reveal .rv:not(.in) { opacity: 1; transform: none; transition: none; } .ring, .mini-ring, .arrow, .edge, .dots i, .orb, .orb .eyes i { animation: none !important; } body.is-listening .halo i { animation: none; } .island, .spot, .seg-thumb, .win, .tab { transition-duration: .01s; } } /* ---------- How it works: the live MacBook ---------- A 600 × 750 stage, scaled to the card: the top of the screen (notch, menu bar, a page) and the keyboard. */ .flow-anim { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: clamp(18px, 2.4vw, 30px); background: radial-gradient(90% 60% at 50% 0%, rgba(255, 246, 232, .07), transparent 70%), #0b0b0d; box-shadow: inset 0 0 0 1px var(--line), 0 50px 120px -50px rgba(0, 0, 0, .95); } .fa-stage { position: absolute; left: 0; top: 0; width: 600px; height: 750px; transform-origin: 0 0; will-change: transform; font-family: var(--mac); } .fa-lid { position: absolute; left: -20px; top: 26px; width: 640px; height: 418px; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #19191d, #0d0d10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .12); } .fa-screen { position: absolute; left: 12px; top: 12px; width: 616px; height: 406px; overflow: hidden; border-radius: 16px 16px 0 0; background: #08080a; isolation: isolate; } .fa-wall { position: absolute; inset: 0; background: radial-gradient(60% 60% at 85% 100%, rgba(255, 170, 120, .26), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(120, 150, 220, .22), transparent 70%), linear-gradient(180deg, #0c0c0f, #1a1a20 55%, #2c2932); } .fa-menubar { position: absolute; inset: 0 0 auto 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 16px 0 18px; background: rgba(10, 10, 12, .4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 500 12.5px/1 var(--mac); color: rgba(255, 255, 255, .92); } .fa-l { display: flex; align-items: center; gap: 17px; } .fa-l b { font-weight: 700; } .fa-r { display: flex; align-items: center; gap: 10px; } .fa-r svg { width: 15px; height: 15px; } .fa-win { position: absolute; left: 34px; top: 52px; width: 548px; height: 400px; overflow: hidden; border-radius: 11px 11px 0 0; background: #fffaf2; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .5); } /* The call on the MacBook's screen: two people, a toolbar, and the Share button nobody can find. */ .fa-call { height: 344px; border-radius: 11px; background: #17161d; color: #fff; transition: box-shadow .4s; } .fc-bar { position: relative; display: flex; align-items: center; height: 34px; padding: 0 12px; background: #201f28; } .fc-bar .lights i { width: 10px; height: 10px; } .fc-bar b { position: absolute; left: 0; right: 0; text-align: center; font: 600 11.5px/1 var(--mac); color: rgba(255, 255, 255, .86); pointer-events: none; } .fc-live { position: relative; z-index: 1; margin-left: auto; padding: 4px 9px; border-radius: 999px; background: rgba(60, 227, 164, .16); color: var(--listen); font: 600 10px/1 var(--mac); opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .4s var(--spring); } .fc-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 248px; padding: 10px 12px 0; } .fc-tile { position: relative; display: grid; place-items: center; border-radius: 12px; background: #24232d; } .fc-tile:nth-child(2) { background: #212a2c; } .fc-tile small, .fc-me small { position: absolute; left: 8px; bottom: 7px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .5); font: 500 10px/1 var(--mac); color: #fff; } .fc-av { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font: 600 22px/1 var(--mac); color: #fff; } .fc-a1 { background: linear-gradient(135deg, #ffb46b, #ff7aa2); } .fc-a2 { background: linear-gradient(135deg, #6fd3c0, #3f8fe0); } .fc-me { position: absolute; right: 20px; bottom: 8px; display: grid; place-items: center; width: 92px; height: 62px; border-radius: 9px; background: #34323f; box-shadow: 0 0 0 2px #17161d, 0 8px 20px rgba(0, 0, 0, .4); } .fc-me small { left: 5px; bottom: 5px; font-size: 9px; } .fc-a3 { width: 30px; height: 30px; background: linear-gradient(135deg, #a89cff, #6a8cff); } .fc-tools { display: flex; align-items: center; justify-content: center; gap: 8px; height: 62px; } .fc-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 64px; height: 44px; border-radius: 11px; background: rgba(255, 255, 255, .09); font: 500 9.5px/1 var(--mac); color: rgba(255, 255, 255, .86); transition: background .2s, color .2s, transform .15s; } .fc-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .fc-leave { background: #e5484d; color: #fff; } .fc-btn.pressed, .fc-opt.pressed { transform: scale(.93); } .fc-pick { position: absolute; left: 124px; bottom: 72px; width: 300px; padding: 12px 12px 12px; border-radius: 14px; background: #2c2b36; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14), 0 18px 44px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(6px) scale(.97); transform-origin: 50% 100%; pointer-events: none; transition: opacity .18s, transform .3s var(--spring); } .fc-pick.open { opacity: 1; transform: none; } .fc-pick b { display: block; margin: 0 2px 9px; font: 600 11px/1 var(--mac); color: rgba(255, 255, 255, .8); } .fc-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fc-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .07); font: 500 10px/1 var(--mac); color: #fff; transition: transform .15s, background .2s; } .fc-opt i { position: relative; width: 44px; height: 28px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); } .fc-o1 { background: rgba(255, 255, 255, .22); } .fc-o2::after { content: ''; position: absolute; left: 9px; top: 7px; right: 9px; bottom: 6px; border-radius: 3px; background: rgba(255, 255, 255, .5); } .fc-o3::after { content: ''; position: absolute; left: 6px; top: 5px; width: 16px; height: 6px; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, .5); } /* Sharing: green, the island's colour for done. */ .fa-call.sharing #fc-share { background: var(--listen); color: #00150D; } .fa-call.sharing .fc-live { opacity: 1; transform: none; } .fa-shareframe { position: absolute; inset: 0; z-index: 9; border: 3px solid var(--listen); border-radius: 16px 16px 0 0; box-shadow: inset 0 0 26px rgba(60, 227, 164, .28); opacity: 0; pointer-events: none; transition: opacity .4s; } .fa-shareframe.on { opacity: 1; } .fa-spot { --dim: .5; } .fa-spot .ring { border-width: 4px; } .fa-spot .arrow { width: 24px; height: 40px; margin-left: -12px; } .fa-bubble { position: absolute; z-index: 21; max-width: 220px; padding: 8px 12px; border-radius: 12px; background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .1); font: 500 13px/1.3 var(--round); color: #fff; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease), left .5s var(--spring), top .5s var(--spring); } .fa-bubble.on { opacity: 1; transform: none; } .fa-bubble b { color: #fff; } .fa-island { left: 233px; width: 150px; height: 28px; } .fa-island .isl-top { height: 28px; padding: 0 12px 0 11px; } .fa-island .orb { --s: 18px; } .fa-island .isl-body { top: 36px; left: 18px; } .fa-cursor { z-index: 40; } .fa-hinge { position: absolute; left: -20px; top: 444px; width: 640px; height: 12px; background: linear-gradient(180deg, #050506 0%, #2a2a30 70%, #3a3a42 100%); } .fa-deck { position: absolute; left: -20px; top: 456px; width: 640px; height: 330px; background: linear-gradient(180deg, #2c2c32 0%, #212126 55%, #1b1b1f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .fa-glow { position: absolute; left: 140px; top: 140px; width: 220px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 227, 164, .35), transparent); filter: blur(10px); opacity: 0; transition: opacity .4s; } .fa-glow.on { opacity: 1; } .fa-row { position: absolute; left: 100px; display: flex; gap: 7px; } .k { position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 56px; border-radius: 8px; background: linear-gradient(180deg, #19191c, #111113); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 0 rgba(0, 0, 0, .55); font: 500 15px/1 var(--mac); color: rgba(255, 255, 255, .8); transition: transform .12s var(--ease), box-shadow .2s var(--ease), color .2s; } .k sub, .k sup { position: absolute; font-size: 10px; line-height: 1; color: rgba(255, 255, 255, .7); } .k sub { left: 8px; bottom: 7px; } .k sup { right: 8px; top: 7px; font-size: 13px; } .k.down { transform: translateY(2px); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1.5px rgba(60, 227, 164, .8), 0 0 28px 2px rgba(60, 227, 164, .45); } .k.down sub, .k.down sup { color: #fff; } .k .touch { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 60%, transparent 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--spring); } .k.down .touch { opacity: 1; transform: scale(1); } .fa-pad { position: absolute; left: 230px; top: 226px; width: 400px; height: 140px; border-radius: 14px; background: linear-gradient(180deg, #26262c, #222227); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .05); } @media (prefers-reduced-motion: reduce) { .k, .k .touch, .fa-bubble, .fc-pick, .fa-shareframe { transition-duration: .01s; } } /* ========================================================================== The page behaves like the island (October 2026). The nav is an island with a status line, each section carries one of the island's colours, and things move only when something happens. Everything here respects Reduce Motion. ========================================================================== */ @property --tone { syntax: ''; inherits: true; initial-value: transparent; } @property --glow { syntax: ''; inherits: false; initial-value: transparent; } /* ---------- Tones: one of the island's colours per section ---------- */ [data-tone="listen"] { --tone: var(--listen); } [data-tone="doing"] { --tone: var(--doing); } [data-tone="caution"] { --tone: var(--caution); } [data-tone="danger"] { --tone: var(--danger); } [data-tone="guide"] { --tone: var(--ring-guide); } #ways { transition: --tone .6s; } #ways[data-ring="do"] { --tone: var(--ring-do); } .sec[data-tone] .eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 10px var(--tone); vertical-align: 1px; } /* An edge light over each section, like the one under the island while it works. */ .sec[data-tone]::before { content: ''; position: absolute; left: 50%; top: clamp(56px, 7.2vw, 98px); width: min(300px, 56%); height: 1px; opacity: 0; transform: translateX(-50%) scaleX(0); background: linear-gradient(90deg, transparent, var(--tone), transparent); box-shadow: 0 0 16px var(--tone); transition: transform 1.3s var(--ease), opacity .8s; pointer-events: none; } .sec[data-tone].lit::before { opacity: .9; transform: translateX(-50%) scaleX(1); } /* ---------- The nav's status line ---------- */ .nav-status { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; margin-left: -6px; padding-left: 18px; box-shadow: inset 1px 0 0 var(--line-2); font: 600 13px/20px var(--font); color: var(--tc); white-space: nowrap; --tc: rgba(243, 240, 234, .72); transition: color .4s; } .nav-status[data-tone="listen"], .nav-status[data-tone="done"] { --tc: var(--listen); } .nav-status[data-tone="doing"] { --tc: var(--doing-ink); } .nav-status[data-tone="caution"] { --tc: #FFC769; } .nav-status[data-tone="danger"] { --tc: #FF8A84; } .ns-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--tc); box-shadow: 0 0 8px var(--tc); transition: background .4s, box-shadow .4s; } .nav-status[data-tone="quiet"] .ns-dot { box-shadow: none; opacity: .7; } .ns-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ns-label.swap { animation: ns-swap .45s var(--ease); } @keyframes ns-swap { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } } .nav-edge { position: absolute; left: 30%; right: 30%; bottom: 0; height: 1.5px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--edge-c, var(--doing)), transparent); box-shadow: 0 0 12px var(--edge-c, var(--doing)); transition: opacity .5s; pointer-events: none; } .nav[data-tone="listen"], .nav[data-tone="done"] { --edge-c: var(--listen); } .nav[data-tone="doing"] { --edge-c: var(--doing); } .nav[data-tone="caution"] { --edge-c: var(--caution); } .nav[data-tone="danger"] { --edge-c: var(--danger); } .nav[data-tone]:not([data-tone="quiet"]) .nav-edge { opacity: .9; } .nav[data-tone="doing"] .nav-edge { animation: nav-sweep 2.2s ease-in-out infinite; } @keyframes nav-sweep { 0%, 100% { transform: translateX(-14%); } 50% { transform: translateX(14%); } } @media (min-width: 821px) and (max-width: 1019px) { .nav-status { display: none; } } @media (max-width: 820px) { .nav-status { padding-left: 12px; margin-left: -12px; font-size: 12px; } .nav-pill { gap: 18px; } } /* On a phone there is room for the dot, not the words: the colour still says what is happening. */ @media (max-width: 480px) { .brand-svg { height: 27px; } .ns-label { display: none; } .nav-status { padding-left: 14px; } .ns-dot { width: 8px; height: 8px; } } /* ---------- Hero: one line, and the Mac above the fold ---------- */ #top { padding-top: clamp(100px, 12.5vh, 128px); } #top h1 { margin-top: 20px; font-size: clamp(52px, 5.6vw, 92px); line-height: .96; } #top h1 .hl { display: block; } #top h1 .hw { display: inline-block; animation: word .9s var(--spring) both; animation-delay: calc(var(--w) * 95ms + 260ms); } @keyframes word { from { opacity: 0; transform: translateY(.34em) rotate(2deg); filter: blur(10px); } } @media (min-width: 1100px) { #top h1 { white-space: nowrap; } #top h1 .hl { display: inline; } } #top .lede { max-width: 780px; margin-top: 18px; } #top .cta-row { margin-top: 26px; gap: 12px 20px; } #top .avail { margin: 0; padding-left: 20px; box-shadow: inset 1px 0 0 var(--line-2); font-size: 13.5px; line-height: 22px; color: var(--ink-2); } @media (max-width: 900px) { #top .avail { flex-basis: 100%; padding: 0; box-shadow: none; } } /* The console docks at the bottom of the window while the Mac is on screen. */ @media (min-width: 1000px) and (min-height: 640px) { .console { position: sticky; bottom: 14px; z-index: 30; } } html[data-springbase="soon"] [data-needs="springbase"] { display: none; } .soon-only { display: none; } html[data-springbase="soon"] .soon-only { display: inline; } /* ---------- The pretend Mac: a scam email, a report, and the deck that comes back ---------- */ .scam-only { display: none; } .mail.scam .scam-only { display: block; } .mail.scam .m-msg:not(.scam-only) { display: none; } .av-grey { background: linear-gradient(135deg, #b9b6c4, #8a8799); } #scam-from { display: inline-block; } .scam-link { display: inline-block; padding: 8px 16px; border-radius: 7px; background: #2f6feb; color: #fff; font-weight: 600; } .fav.doc { background: linear-gradient(135deg, #8A6CFF, #5a4bd6); } .fav.sb { background: linear-gradient(135deg, #f0a878, #d9793c); } .pg-doc { padding: 34px 64px; background: #fff; color: #23202e; } .pg-doc > small { font: 600 11.5px/1 var(--mac); letter-spacing: .1em; text-transform: uppercase; color: var(--ac, #5a4bd6); } .pg-doc h4 { margin: 10px 0 6px; font: 700 40px/1.05 var(--mac); letter-spacing: -.02em; } .rp-meta { margin: 0; color: #8e899e; } .rp-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; margin-top: 28px; } .rp-text p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #3a3647; } .rp-chart { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding: 18px 20px 0; border-radius: 14px; background: #f4f2fb; } .rp-chart i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #8A6CFF, #6a8cff); } /* A bill to circle, a form to fill, a trial to be reminded about */ .pg-bill { --ac: #0c8f5e; } .pg-form { --ac: #c2410c; } .pg-trial { --ac: #be185d; } .fav.bolt { background: linear-gradient(135deg, #34d399, #0c8f5e); } .fav.box { background: linear-gradient(135deg, #fdba74, #c2410c); } .fav.play { background: linear-gradient(135deg, #f9a8d4, #be185d); } .bl-rows { max-width: 440px; } .bl-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 14px; border-bottom: 1px solid #eceaf2; font-size: 15.5px; color: #3a3647; } .bl-row em { margin-left: 10px; font-style: normal; font-size: 13px; color: #8e899e; } .bl-row b { font-weight: 600; font-variant-numeric: tabular-nums; color: #1d1b26; } .bl-total { border-bottom: 0; font-weight: 700; color: #1d1b26; } .bl-total b { font-size: 18px; font-weight: 700; } .pg-bill .rp-chart i { background: linear-gradient(180deg, #34d399, #0c8f5e); } .lasso { position: absolute; z-index: 21; overflow: visible; opacity: 0; pointer-events: none; transform: rotate(-1.2deg); transition: opacity .3s; } .lasso ellipse { fill: rgba(111, 155, 255, .1); stroke: #6f9bff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(111, 155, 255, .6)); } .lasso.on { opacity: 1; } .lasso.on ellipse { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease-in-out; } .circ { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; padding: 5px 10px 5px 7px; border-radius: 9px; background: rgba(111, 155, 255, .14); box-shadow: inset 0 0 0 1px rgba(111, 155, 255, .34); font: 600 12px/1 var(--mac); color: #b9d0ff; } .circ i { width: 18px; height: 13px; border-radius: 50%; border: 2px solid #6f9bff; } .circ + .w-them { margin-top: 8px; } .fm { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; max-width: 640px; margin-top: 22px; } .fm-f { display: flex; flex-direction: column; gap: 6px; font: 600 12px/1 var(--mac); color: #6b6680; } .fm-wide { grid-column: 1 / -1; } .fm-in { display: flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 9px; background: #f6f5f9; box-shadow: inset 0 0 0 1px #dedbe8; font: 400 15px/1 var(--mac); color: #1d1b26; transition: box-shadow .2s, background .2s; } .fm-in b { font-weight: 500; } .fm-in .caret { height: 18px; vertical-align: 0; } .fm-in.typing { background: #fff; box-shadow: inset 0 0 0 2px #2f6feb; } .fm-in.typing .caret { animation: caret 1s steps(1) infinite; } .fm-go { grid-column: 1 / -1; justify-self: start; padding: 11px 20px; border-radius: 9px; background: #c2410c; color: #fff; font: 600 14px/1 var(--mac); transition: transform .15s; } .fm-go.pressed { transform: scale(.94); } .fm-done { position: absolute; inset: -6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: #f3fbf7; box-shadow: inset 0 0 0 1px #bfe8d5; font-size: 14px; color: #3a3647; opacity: 0; transform: scale(.97); pointer-events: none; transition: opacity .4s, transform .5s var(--spring); } .fm-done b { font: 700 22px/1.1 var(--mac); color: #0c5c3e; } .fm-tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #12a36d; color: #fff; } .fm-tick svg { width: 22px; height: 22px; stroke-width: 2; } .fm.sent .fm-done { opacity: 1; transform: none; } .tr-card { max-width: 560px; margin-top: 26px; padding: 26px 28px; border-radius: 16px; background: #faf7fb; box-shadow: inset 0 0 0 1px #ece4ef; } .tr-tag { display: inline-block; padding: 5px 10px; border-radius: 999px; background: #fce7f3; color: #be185d; font: 700 11px/1 var(--mac); letter-spacing: .06em; text-transform: uppercase; } .tr-card p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: #3a3647; } .tr-card p b { display: inline-block; font-weight: 700; color: #1d1b26; } .tr-btn { display: inline-block; margin-top: 20px; padding: 10px 18px; border-radius: 9px; box-shadow: inset 0 0 0 1px #d6cfe0; font: 600 13.5px/1 var(--mac); color: #3a3647; } /* A spoken conversation: the card keeps its text box, and a yes can be said */ .t-box { display: flex; align-items: center; justify-content: space-between; height: 34px; margin-top: 14px; padding: 0 7px 0 13px; border-radius: 12px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font: 400 13.5px/1 var(--mac); color: rgba(255, 255, 255, .45); } .t-box i { width: 22px; height: 22px; border-radius: 50%; background: var(--listen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9.5' y='4' width='5' height='9.5' rx='2.5' fill='%2300150D'/%3E%3Cpath d='M6.5 11.5a5.5 5.5 0 0 0 11 0M12 17v3' fill='none' stroke='%2300150D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 0 10px rgba(60, 227, 164, .45); } .t-said { margin-top: 10px; text-align: right; } .t-said:empty { display: none; } .yn .yes.said { background: var(--listen); color: #00150D; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--listen); box-shadow: 0 0 8px var(--listen); animation: live-dot 1.6s ease-in-out infinite; } @keyframes live-dot { 50% { opacity: .35; } } .pg-deck { padding: 22px 40px; background: #14131a; color: #fff; } .dk-bar { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font: 600 15px/1 var(--mac); } .dk-bar span { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .6); } .dk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .dk-slide { display: flex; flex-direction: column; gap: 7px; aspect-ratio: 16 / 9; padding: 14px 16px; overflow: hidden; border-radius: 10px; background: #fff; color: #23202e; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s var(--ease), transform .6s var(--spring); transition-delay: calc(var(--n, 0) * 70ms); } .pg-deck:not(.gone) .dk-slide { opacity: 1; transform: none; } .dk-slide:nth-child(2) { --n: 1; } .dk-slide:nth-child(3) { --n: 2; } .dk-slide:nth-child(4) { --n: 3; } .dk-slide:nth-child(5) { --n: 4; } .dk-slide:nth-child(6) { --n: 5; } .dk-slide b { font: 700 13.5px/1.2 var(--mac); } .dk-slide u { display: block; height: 6px; border-radius: 3px; background: #e9e6f2; text-decoration: none; } .dk-slide u:nth-of-type(2) { width: 80%; } .dk-slide u:nth-of-type(3) { width: 60%; } .dk-slide .rp-chart { flex: 1; height: auto; gap: 6px; padding: 6px 8px 0; border-radius: 6px; } .dk-title { justify-content: flex-end; background: linear-gradient(135deg, #2a2350, #5a4bd6); color: #fff; } .dk-title b { font-size: 20px; } .dk-title span { font-size: 11px; opacity: .85; } .task { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 11px 12px; border-radius: 15px; background: rgba(169, 139, 255, .08); box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .24); } .task-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(232, 147, 90, .2); color: #F0A878; font: 700 13px/1 var(--mac); } .task b { display: block; font: 600 14.5px/1.25 var(--mac); } .task small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .6); } .task-bar { width: 54px; height: 4px; flex: none; margin-left: auto; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .12); } .task-bar i { display: block; width: var(--p, 8%); height: 100%; border-radius: 2px; background: var(--doing); transition: width .6s var(--ease); } #mb-clock.flip { animation: clock-flip .6s var(--ease); } @keyframes clock-flip { 40% { opacity: 0; transform: translateY(-5px); } 41% { transform: translateY(5px); } 60% { opacity: 0; } } /* On a phone the whole desktop is unreadable, so the screen is a window that follows the action. */ @media (max-width: 640px) { .screen { aspect-ratio: 7 / 10; } } .screen.cropped .screen-inner { transition: transform .9s var(--ease); } /* ---------- Things people ask: the ones with a scene play it ---------- */ .strip-hint { display: inline-flex; align-items: center; gap: 9px; margin: -8px 0 24px; font-size: 13.5px; color: var(--ink-2); } .strip-hint i, .marquee-track button::before { content: ''; width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5.5v9l7-4.5z' fill='%23F3F0EA'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .2s, transform .3s var(--spring); } .strip-hint i { width: 22px; height: 22px; background-size: 11px; } .marquee-track button { display: inline-flex; align-items: center; gap: 14px; margin: 0 44px 0 0; padding: 0; border: 0; background: none; cursor: pointer; font: italic 400 clamp(26px, 2.6vw, 36px)/1.3 var(--serif); color: var(--ink); white-space: nowrap; } .marquee-track button::after { content: ''; width: 6px; height: 6px; margin-left: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .marquee-track button:hover::before, .marquee-track button:focus-visible::before { background-color: rgba(255, 255, 255, .2); transform: scale(1.12); } .marquee:focus-within .marquee-track { animation-play-state: paused; } /* ---------- Headlines arrive a word at a time ---------- */ .sec-head h2 .hw, .close h2 .hw { display: inline-block; transition: opacity .8s var(--ease), transform .9s var(--spring), filter .8s var(--ease); transition-delay: calc(var(--w) * 60ms + 80ms); } .js-reveal .sec-head h2 .hw, .js-reveal .close h2 .hw { opacity: 0; transform: translateY(.38em); filter: blur(6px); } .js-reveal .rv.in h2 .hw, .js-reveal .lit > h2 .hw { opacity: 1; transform: none; filter: none; } /* ---------- How it works ---------- */ .flow-copy p { max-width: 380px; } /* ---------- Guide me or do it for me: the section takes the ring's colour ---------- */ .ways-media { position: relative; } .ways-media::before { content: ''; position: absolute; inset: -14% -10%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--tone) 15%, transparent), transparent 70%); pointer-events: none; } .ways-copy li::before { border-color: var(--tone); } .clip.is-empty[data-empty="hide"] { display: none !important; } .ways-live { display: none; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: clamp(18px, 2.4vw, 30px); background: radial-gradient(80% 60% at 50% 0%, rgba(255, 246, 232, .06), transparent 70%), #0b0b0d; box-shadow: inset 0 0 0 1px var(--line), 0 50px 120px -50px rgba(0, 0, 0, .95); container-type: inline-size; } .ways-media.no-clip .ways-live { display: block; } .wl-inner { position: absolute; inset: 0; font-family: var(--mac); text-align: left; } .wl-win { position: absolute; left: 9%; right: 9%; top: 37%; bottom: -8%; overflow: hidden; isolation: isolate; border-radius: 2cqw 2cqw 0 0; background: #fff; color: #1d1b26; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 3cqw 8cqw rgba(8, 4, 34, .6); } .wl-bar { display: flex; align-items: center; gap: 1.2cqw; height: 10.5cqw; padding: 0 3cqw; border-bottom: 1px solid #f0edf4; color: #5e5970; } .wl-tb { position: relative; display: grid; place-items: center; width: 7.6cqw; height: 6cqw; border-radius: 1.4cqw; } .wl-tb > svg { width: 3.8cqw; height: 3.8cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .wl-spot { position: absolute; inset: -1cqw; z-index: 2; border-radius: 2.2cqw; box-shadow: 0 0 0 200cqw rgba(4, 2, 14, .45); transition: box-shadow .5s; pointer-events: none; } .wl-ring { position: absolute; inset: -.6cqw; border-radius: 2.6cqw; border: .75cqw solid var(--tone); box-shadow: 0 0 3.4cqw color-mix(in srgb, var(--tone) 75%, transparent), inset 0 0 1.8cqw color-mix(in srgb, var(--tone) 35%, transparent); animation: pulse 1.25s ease-in-out infinite; } .wl-arrow { position: absolute; left: 50%; top: 100%; width: 4.6cqw; height: 7.6cqw; margin: 1.6cqw 0 0 -2.3cqw; rotate: 180deg; fill: var(--tone); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); animation: bob-up .9s ease-in-out infinite; transition: opacity .3s; } .ways-live[data-ring="do"] .wl-arrow { opacity: 0; } .ways-live[data-ring="do"] .wl-spot { box-shadow: 0 0 0 200cqw rgba(4, 2, 14, .15); } .wl-msg { padding: 3.6cqw 4.6cqw; } .wl-from { display: flex; align-items: center; gap: 1.8cqw; } .wl-from .av { width: 6cqw; height: 6cqw; font-size: 2.1cqw; } .wl-from b { display: block; font: 600 2.2cqw/1.3 var(--mac); } .wl-from small { font-size: 1.9cqw; color: #8e899e; } .wl-subj { display: block; margin: 2.8cqw 0 1.6cqw; font: 700 3.5cqw/1.2 var(--mac); letter-spacing: -.012em; } .wl-msg p { margin: 0; font-size: 2.3cqw; line-height: 1.55; color: #2f2c3a; } .wl-island { position: absolute; z-index: 5; left: 50%; top: 0; display: grid; width: 64%; padding: 2.4cqw 3.4cqw 3cqw; transform: translateX(-50%); border-radius: 0 0 4.2cqw 4.2cqw; background: #000; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); } .wl-say { grid-area: 1 / 1; opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s var(--ease); } .ways-live[data-ring="guide"] .wl-say[data-for="guide"], .ways-live[data-ring="do"] .wl-say[data-for="do"] { opacity: 1; transform: none; } .wl-island .st { height: auto; font-size: clamp(10.5px, 1.95cqw, 12.5px); } .wl-island .w-springle { margin-top: 1.4cqw; font-size: clamp(13px, 2.7cqw, 17px); } .wl-island .edge { opacity: 0; } .ways-live[data-ring="do"] .wl-island .edge { opacity: 1; animation: sweep 1.7s ease-in-out infinite; } .wl-cursor, .wl-ghost { width: 3.3cqw; height: 4.7cqw; } .wl-cursor { z-index: 6; transform: translate(62cqw, 46cqw); } .wl-ghost { z-index: 7; } .ways-live[data-ring="guide"] .wl-cursor { animation: wl-user 5.4s var(--ease) infinite; } .ways-live[data-ring="do"] .wl-ghost { animation: wl-ghost 4.4s var(--ease) infinite; } @keyframes wl-user { 0%, 40% { transform: translate(62cqw, 46cqw); } 66%, 70% { transform: translate(15.8cqw, 28.4cqw); } 72% { transform: translate(15.8cqw, 28.4cqw) scale(.86); } 76%, 90% { transform: translate(15.8cqw, 28.4cqw); } 100% { transform: translate(62cqw, 46cqw); } } @keyframes wl-ghost { 0%, 6% { opacity: 0; transform: translate(49cqw, 13cqw); } 14% { opacity: 1; transform: translate(49cqw, 13cqw); } 44%, 48% { transform: translate(15.8cqw, 28.4cqw); } 50% { transform: translate(15.8cqw, 28.4cqw) scale(.86); } 54%, 84% { opacity: 1; transform: translate(15.8cqw, 28.4cqw); } 94%, 100% { opacity: 0; transform: translate(15.8cqw, 28.4cqw); } } .wl-ripple { position: absolute; z-index: 6; left: 15.8cqw; top: 28.4cqw; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border-radius: 50%; border: .45cqw solid var(--tone); opacity: 0; pointer-events: none; } .ways-live[data-ring="guide"] .wl-ripple { animation: wl-rip-user 5.4s linear infinite; } .ways-live[data-ring="do"] .wl-ripple { animation: wl-rip-ghost 4.4s linear infinite; } @keyframes wl-rip-user { 0%, 71% { opacity: 0; transform: scale(.2); } 72% { opacity: .95; transform: scale(.2); } 84%, 100% { opacity: 0; transform: scale(1.5); } } @keyframes wl-rip-ghost { 0%, 49% { opacity: 0; transform: scale(.2); } 50% { opacity: .95; transform: scale(.2); } 62%, 100% { opacity: 0; transform: scale(1.5); } } /* ---------- Springbase: the notch hands the big jobs to the workshop ---------- */ #springbase { --copper: #E8935A; --copper-ink: #F0A878; } #springbase h2 { max-width: none; font-size: clamp(40px, 5.2vw, 76px); } #springbase h2 em { display: block; } #springbase .sub { max-width: 640px; } .soon { display: none; margin-left: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(169, 139, 255, .12); box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .3); color: var(--doing-ink); font-size: 10.5px; letter-spacing: .12em; vertical-align: 1px; } html[data-springbase="soon"] .soon { display: inline-block; } .sb { display: grid; grid-template-columns: minmax(0, 5fr) 140px minmax(0, 5.6fr); margin-top: clamp(48px, 6vw, 72px); text-align: left; } .sb-notch { display: flex; flex-direction: column; gap: 14px; } .sb-card { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 16px 20px 18px; border-radius: 24px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-family: var(--mac); opacity: .4; transform: scale(.985); transition: opacity .5s var(--ease), transform .6s var(--spring), box-shadow .5s; } .sb-card.on, .sb[data-phase="rest"] .sb-card { opacity: 1; transform: none; } .sb-card.on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 60px rgba(0, 0, 0, .6); } .sb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sb-when { font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 240, 234, .55); white-space: nowrap; } .sb-card .w-them, .sb-card .w-springle { margin-top: 10px; min-height: 1.4em; } .sb-sub { margin: 4px 0 0; font: 400 12.5px/1.3 var(--mac); color: rgba(255, 255, 255, .6); } .sb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; } .sb-row .yn { margin-top: 8px; transition: opacity .3s; } .sb-row .yn span { flex: none; width: 84px; } .sb-row .yn.gone { opacity: 0; } .sb-card .edge { opacity: 0; } .sb-card[data-sb="send"].on .edge { opacity: 1; animation: sweep 1.7s ease-in-out infinite; } .sb-thread { position: relative; } .sb-line { position: absolute; left: 10px; right: 10px; height: 0; border-top: 1px dashed rgba(243, 240, 234, .26); } .sb-out { top: 50%; } .sb-in { top: calc(83.333% + 2px); } .sb-line small { position: absolute; left: -6px; right: -6px; bottom: 10px; text-align: center; font: 500 11px/1 var(--font); color: rgba(243, 240, 234, .6); white-space: nowrap; } .sb-line i { position: absolute; top: -4.5px; left: 0; width: 8px; height: 8px; border-radius: 50%; opacity: 0; } .sb-out i { background: var(--doing); box-shadow: 0 0 14px var(--doing); } .sb-in i { background: var(--copper); box-shadow: 0 0 14px var(--copper); } .sb[data-phase="send"] .sb-out i { animation: sb-go 1.3s var(--ease) both; } .sb[data-phase="back"] .sb-in i { animation: sb-come 1.1s var(--ease) both; } @keyframes sb-go { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } } @keyframes sb-come { 0% { left: calc(100% - 8px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 0; opacity: 0; } } .sb-shop { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 24px 28px; border-radius: 28px; background: #15100c; box-shadow: inset 0 0 0 1px rgba(232, 147, 90, .34); transition: box-shadow .6s; } .sb[data-phase="work"] .sb-shop { box-shadow: inset 0 0 0 1px rgba(232, 147, 90, .65), 0 30px 80px -30px rgba(232, 147, 90, .4); } .sb-shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .sb-shop-head b { font: 600 18px/1 var(--font); } .sb-shop-head span { font-size: 12.5px; color: var(--copper-ink); } .sb-goal-k { margin: 20px 0 0; font: 600 10.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--copper-ink); } .sb-goal { margin: 6px 0 0; font: 400 clamp(24px, 2.2vw, 30px)/1.08 var(--serif); } .sb-steps { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; } .sb-steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(243, 240, 234, .5); transition: color .4s; } .sb-steps li.now, .sb-steps li.done { color: var(--ink); } .sb-steps i { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(232, 147, 90, .5); transition: background .3s, box-shadow .3s; } .sb-steps li.now i { box-shadow: inset 0 0 0 1.5px var(--copper), 0 0 14px rgba(232, 147, 90, .6); animation: sb-now 1s ease-in-out infinite; } .sb-steps li.done i { background: var(--copper); box-shadow: none; } .sb-steps li.done i::after { content: ''; position: absolute; left: 5px; top: 5.5px; width: 7px; height: 4px; border-left: 2px solid #15100c; border-bottom: 2px solid #15100c; transform: rotate(-45deg); } @keyframes sb-now { 50% { transform: scale(1.16); } } .sb-slides { display: flex; gap: 8px; margin-top: 18px; } .sb-slides span { flex: 1; aspect-ratio: 16 / 10; border-radius: 6px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); opacity: .4; transform: translateY(6px); transition: opacity .4s, transform .5s var(--spring), background .4s; } .sb-slides span.on { opacity: 1; transform: none; background: linear-gradient(160deg, #fff, #e6dfd6); } .sb-credits { margin: auto 0 0; padding-top: 16px; font-size: 12.5px; color: rgba(243, 240, 234, .64); } .sb-asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .sb-ask { padding: 26px 26px 28px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; } .sb-ask .q { margin: 0 0 12px; font: italic 400 clamp(24px, 2.1vw, 29px)/1.12 var(--serif); color: var(--ink); text-wrap: balance; } .sb-ask p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .sb-fine { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 30px 0 0; font-size: 14px; color: var(--ink-2); } .sb-fine a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--copper-ink); text-decoration: none; } .sb-fine a:hover { color: #FFC9A3; } .sb-fine a svg { width: 14px; height: 14px; } @media (max-width: 900px) { .sb { grid-template-columns: 1fr; gap: 14px; } .sb-thread { display: none; } .sb-asks { grid-template-columns: 1fr; } } /* ---------- Safety: the scam check, in red, then calm ---------- */ .fcard-full { grid-column: 1 / -1; flex-direction: row; } .fcard-full .fui { flex: 1.25; height: auto; min-height: 330px; box-shadow: inset -1px 0 0 var(--line); } .fcard-full .fcopy { flex: 1; align-self: center; padding: 36px 40px; } .fui-scam { background: radial-gradient(70% 90% at 50% 100%, var(--glow), transparent 70%), #0b0b0d; transition: --glow .6s; } .fcard-scam[data-phase="warn"] .fui-scam { --glow: rgba(255, 105, 97, .17); } .fcard-scam[data-phase="safe"] .fui-scam { --glow: rgba(60, 227, 164, .1); } .sc-mail { position: absolute; left: 50%; top: 34px; width: min(340px, 78%); padding: 16px 18px 18px; transform: translateX(-60%) rotate(-3deg); border-radius: 14px; background: #f6f4ef; color: #1d1b26; font-family: var(--mac); text-align: left; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); transition: transform .7s var(--spring), opacity .5s, filter .5s; } .sc-from { display: block; font: 500 11.5px/1.5 var(--mac); color: #6f6a80; } .sc-from b { margin: 0 -3px; padding: 1px 3px; border-radius: 5px; font-weight: 600; transition: box-shadow .35s, color .35s, background .35s; } .fcard-scam[data-phase="warn"] .sc-from b { color: #b3261e; background: rgba(242, 59, 51, .1); box-shadow: 0 0 0 2px var(--ring-warn); } .sc-subj { display: block; margin-top: 8px; font: 700 16px/1.25 var(--mac); } .sc-body { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #4a4658; } .sc-link { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: 7px; background: #2f6feb; color: #fff; font: 600 12.5px/1 var(--mac); transition: box-shadow .35s; } .fcard-scam[data-phase="warn"] .sc-link { box-shadow: 0 0 0 2px #f6f4ef, 0 0 0 4.5px var(--ring-warn); } .fcard-scam[data-phase="safe"] .sc-mail { opacity: .45; filter: grayscale(.8); transform: translateX(-60%) rotate(-5deg) translateY(10px) scale(.96); } .sc-island { position: absolute; left: 50%; bottom: 30px; display: grid; width: min(330px, 80%); transform: translateX(-36%); transition: box-shadow .5s; } .fcard-scam[data-phase="warn"] .sc-island { box-shadow: inset 0 0 0 1px rgba(255, 105, 97, .5), 0 14px 46px rgba(255, 90, 95, .35), 0 30px 70px rgba(0, 0, 0, .7); } .sc-say { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s var(--ease); } .fcard-scam[data-phase="check"] .sc-say[data-for="check"], .fcard-scam[data-phase="warn"] .sc-say[data-for="warn"], .fcard-scam[data-phase="safe"] .sc-say[data-for="safe"] { opacity: 1; transform: none; } .mi-dot.violet { background: var(--doing); box-shadow: 0 0 8px var(--doing); } .mi-status.violet { color: var(--doing-ink); } .mi-words.faint { font: 400 14px/1.4 var(--mac); color: rgba(255, 255, 255, .5); } .fcard-wide .fui-apps { grid-template-columns: repeat(6, 56px); } @media (max-width: 1000px) { .feat > :first-child { order: -2; } .fcard-scam { order: -1; } } @media (max-width: 800px) { .fcard-full { flex-direction: column; } .fcard-full .fui { flex: none; min-height: 330px; box-shadow: inset 0 -1px 0 var(--line); } .fcard-full .fcopy { align-self: stretch; padding: 26px 28px 30px; } } @media (max-width: 640px) { .fcard-wide .fui-apps { grid-template-columns: repeat(4, 56px); } } /* ---------- Privacy: a menu bar whose lights follow the story ---------- */ .pv { min-width: 0; } .pm { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 20px; padding: 0 12px 0 16px; overflow: hidden; border-radius: 14px; background: #101012; box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1 var(--mac); color: rgba(255, 255, 255, .8); } .pm-l, .pm-r { display: flex; align-items: center; gap: 12px; } .pm-l b { font-weight: 700; } .pm-notch { position: absolute; left: 50%; top: 0; display: flex; align-items: center; justify-content: space-between; width: 140px; height: 34px; padding: 0 12px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #000; transition: width .5s var(--spring); } .pm .orb { --s: 18px; opacity: .3; transform: none; transition: --a .6s, --b .6s, --c .6s, opacity .4s; } .pm-bars { display: flex; align-items: center; gap: 2.5px; height: 16px; opacity: 0; transition: opacity .3s; } .pm-bars i { width: 3px; height: 6px; border-radius: 2px; background: var(--listen); animation: wave 1s ease-in-out infinite; } .pm-bars i:nth-child(2) { animation-delay: -.2s; } .pm-bars i:nth-child(3) { animation-delay: -.5s; } .pm-bars i:nth-child(4) { animation-delay: -.1s; } .pm-bars i:nth-child(5) { animation-delay: -.7s; } .pm-ind { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 600 11.5px/1 var(--font); color: rgba(243, 240, 234, .5); transition: color .35s, background .35s, box-shadow .35s; } .pm-ind svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .pm-mic svg rect { fill: currentColor; stroke: none; } .pv[data-step="1"] .pm-mic { color: var(--listen); background: rgba(60, 227, 164, .1); box-shadow: inset 0 0 0 1px rgba(60, 227, 164, .4); } .pv[data-step="2"] .pm-screen { color: var(--doing-ink); background: rgba(169, 139, 255, .12); box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .45); } .pv[data-step="1"] .pm-notch, .pv[data-step="2"] .pm-notch { width: 176px; } .pv[data-step="1"] .orb, .pv[data-step="2"] .orb { opacity: 1; } .pv[data-step="1"] .pm-bars { opacity: 1; } .pt li { position: relative; transition: opacity .4s; } .pv[data-step] .pt li { opacity: .46; cursor: default; } .pv[data-step] .pt li.on { opacity: 1; } .pt li::after { content: ''; position: absolute; left: -16px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: var(--ink); transform: scaleY(0); transition: transform .5s var(--spring); } .pv[data-step] .pt li.on::after { transform: scaleY(1); } @media (max-width: 900px) { .pt li::after { display: none; } } @media (max-width: 560px) { .pm-l, .pm-clock { display: none; } .pm { justify-content: flex-end; } .pm-ind { padding: 0 8px; font-size: 0; gap: 0; } } /* ---------- Close: the page points at the button, the way Springle would ---------- */ .guide-cta { position: relative; display: inline-flex; } .gc-ring { position: absolute; inset: -9px; border-radius: 999px; border: 4px solid var(--ring-guide); box-shadow: 0 0 22px rgba(255, 214, 10, .55), inset 0 0 12px rgba(255, 214, 10, .25); opacity: 0; transform: scale(1.25); pointer-events: none; transition: opacity .5s, transform .7s var(--spring); } .guide-cta.on .gc-ring { opacity: 1; transform: none; animation: pulse 1.25s ease-in-out .8s infinite; } .gc-say { position: absolute; left: 50%; top: calc(100% + 26px); padding: 9px 14px; transform: translate(-50%, 6px); border-radius: 13px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 34px rgba(0, 0, 0, .6); font: 500 14px/1.3 var(--round); color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .4s .3s, transform .5s var(--ease) .3s; } .gc-say::before { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; background: #000; transform: rotate(45deg); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14); } .guide-cta.on .gc-say { opacity: 1; transform: translate(-50%, 0); } .close .cta-row { margin-bottom: 44px; } @media (max-width: 640px) { .gc-say { display: none; } .close .cta-row { margin-bottom: 0; } } @media (prefers-reduced-motion: reduce) { #top h1 .hw, .ns-label.swap, .nav .nav-edge, .wl-ring, .wl-arrow, .wl-cursor, .wl-ghost, .wl-ripple, .wl-island .edge, .sb-card .edge, .sb-line i, .sb-steps li.now i, .pm-bars i, .gc-ring, #mb-clock.flip { animation: none !important; } .sec-head h2 .hw, .close h2 .hw, .js-reveal .sec-head h2 .hw, .js-reveal .close h2 .hw { opacity: 1; transform: none; filter: none; transition: none; } .sec[data-tone]::before { transition: none; } .ways-live[data-ring="do"] .wl-ghost { opacity: 1; transform: translate(15.8cqw, 28.4cqw); } .screen.cropped .screen-inner, .sb-card, .sc-mail, .gc-ring, .gc-say, .dk-slide { transition-duration: .01s; } .live-dot { animation: none; } .lasso.on ellipse, .fm-done { transition-duration: .01s; } } @media (max-width: 560px) { .sb-top { flex-direction: column-reverse; align-items: flex-start; gap: 9px; } .fcard-full .fui { min-height: 410px; } .sc-mail { width: 84%; transform: translateX(-54%) rotate(-3deg); } .fcard-scam[data-phase="safe"] .sc-mail { transform: translateX(-54%) rotate(-5deg) translateY(10px) scale(.96); } .sc-island { bottom: 22px; width: 84%; transform: translateX(-46%); } } /* ---------- Real-time talk ---------- */ #talk .sub kbd { margin: 0 1px; } .talk { margin-top: clamp(40px, 5vw, 64px); } .talk .media { max-width: 980px; margin: 0 auto; } .talk-real { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ink-2); } .talk .no-clip, .talk.no-clip .talk-real { display: none; } .talk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .talk .media + .talk-real + .talk-facts { margin-top: 40px; } .talk.no-clip .talk-facts { margin-top: 0; } .talk-facts li { padding: 24px 26px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); } .talk-facts b { display: block; margin-bottom: 6px; font: 400 22px/1.15 var(--serif); color: var(--ink); } @media (max-width: 900px) { .talk-facts { grid-template-columns: 1fr; } }