/* WideSplit — landing page prototype Dark, quiet, Apple-like. Inter, served from /fonts/ (MV-642); Chinese and Japanese fall through to the system font. */ /* Inter (SIL OFL 1.1, fonts/OFL-Inter.txt), one variable file per subset, weights 400-700. Files and ranges come from Brand/tokens.json font.family.web; check_brand.py compares them. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: dark; /* native controls (select lists, number spinners, checkboxes) drawn for a dark page */ --bg: #000; --bg-2: #0b0b0d; --bg-3: #141416; --fg: #f5f5f7; --fg-2: #a1a1a6; --fg-3: #6e6e73; --line: rgba(255,255,255,.10); --accent: #2997ff; --green: #34c759; --amber: #ff9f0a; --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.3,.64,1); --ease-io: cubic-bezier(.65,0,.35,1); --maxw: 1180px; --pad: clamp(20px, 5vw, 64px); --radius: 22px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; } /* clear of the sticky nav when focus or an anchor scrolls */ body { margin: 0; background: var(--bg); color: var(--fg); font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.47; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; } h1, h2, h3, p { margin: 0; } img, svg { display: block; } /* ---------- typography ---------- */ .display { font-size: clamp(44px, 7.4vw, 96px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; } .headline { font-size: clamp(34px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 700; } .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--accent); margin-bottom: 14px; } .lede { font-size: clamp(18px, 2vw, 23px); line-height: 1.38; color: var(--fg-2); max-width: 640px; margin-top: 22px; font-weight: 400; letter-spacing: -0.005em; } .lede--tight { margin-left: auto; margin-right: auto; } .accent { color: var(--accent); } .fine { color: var(--fg-3); font-size: 14px; margin-top: 18px; } .hint { color: var(--fg); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; padding: 13px 24px; border-radius: 999px; font-weight: 500; font-size: 17px; border: 0; cursor: pointer; transition: transform .25s var(--ease-out), background .25s; } .btn:hover { background: #4aa8ff; transform: translateY(-1px); } .btn:disabled, .btn:disabled:hover { opacity: .6; cursor: default; transform: none; background: var(--accent); } .btn--small { padding: 6px 14px; font-size: 13px; } .btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); } .nav__brand + .btn { margin-left: auto; } /* a page without nav links (/beta/): the pill still sits on the right */ .btn--ghost:hover { background: rgba(255,255,255,.06); } .link-arrow { color: var(--accent); font-size: 17px; } .link-arrow::after { content: " ›"; } .link-arrow:hover { text-decoration: underline; } .cta-row { display: flex; gap: 26px; align-items: center; margin-top: 34px; flex-wrap: wrap; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(0,0,0,.6); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); } .nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); height: 48px; display: flex; align-items: center; gap: 28px; } .nav__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; } .dm-icon { width: 26px; height: 8px; color: var(--fg); } .nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 13px; color: var(--fg-2); } .nav__links a:hover { color: var(--fg); } @media (max-width: 720px) { .nav__links { display: none; } .nav__inner .btn { margin-left: auto; } } /* ---------- beta banner (MV-509): one line above the sticky nav, scrolls away with the page ---------- */ .beta-banner { display: block; text-align: center; padding: 9px var(--pad); min-height: 36px; background: var(--bg-3); color: var(--fg-2); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; } .beta-banner:hover, .beta-banner:focus-visible { color: var(--fg); } .beta-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .beta-banner__short { display: none; } @media (max-width: 720px) { .beta-banner__long { display: none; } .beta-banner__short { display: inline; } } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } /* ---------- hero ---------- */ .hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 10vh, 120px) var(--pad) 40px; text-align: center; } .hero__copy { max-width: 820px; margin: 0 auto; } .hero__copy .lede { margin-left: auto; margin-right: auto; } .hero__stage { margin-top: clamp(48px, 8vh, 96px); position: relative; } .stage-caption { text-align: center; color: var(--fg-3); font-size: 15px; margin-top: 26px; min-height: 1.5em; transition: opacity .4s; } /* ---------- monitor component ---------- */ .monitor { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; user-select: none; } .monitor__bezel { background: linear-gradient(180deg, #2a2a2e, #101012); border-radius: 18px; padding: 9px; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); } .monitor__panel { position: relative; aspect-ratio: 32 / 9; border-radius: 10px; overflow: hidden; background: #000; container-type: inline-size; /* cqw below = 1 % of the panel width, whatever the screen inside is doing */ } .monitor__stand { display: flex; justify-content: center; } .monitor__stand span { display: block; width: 18%; height: 18px; background: linear-gradient(180deg, #17171a, #0a0a0b); border-radius: 0 0 10px 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); } .monitor--hero .monitor__bezel { box-shadow: 0 40px 120px rgba(41,151,255,.14), 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); } /* virtual screen inside the panel */ .vscreen { position: absolute; overflow: hidden; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); opacity: var(--o, 1); background: var(--wall); background-size: cover; background-position: center; transition: box-shadow .3s; /* the sharing frame animates on and off; .anim keeps its own list */ } .vscreen.anim { transition: left .9s var(--ease-spring), top .9s var(--ease-spring), width .9s var(--ease-spring), height .9s var(--ease-spring), opacity .6s; } .vscreen__bar { position: absolute; left: 0; right: 0; top: 0; height: clamp(6px, 1.3cqw, 16px); /* fixed in panel units: 13 px at 1000 px, every shape */ background: rgba(20,20,24,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; padding: 0 0.5cqw; gap: 0.4cqw; overflow: hidden; font-size: clamp(5px, .9vw, 9px); color: rgba(255,255,255,.85); } /* menu-bar items in panel units too: the same size on every screen, whatever its width */ .vscreen__bar i { display: block; flex: none; height: 32%; border-radius: 2px; background: rgba(255,255,255,.75); } .vscreen__bar .apple { width: 0.4cqw; height: 46%; border-radius: 50% 50% 45% 45%; } .vscreen__bar .app { width: 1.6cqw; background: rgba(255,255,255,.95); } .vscreen__bar .t { width: 1.2cqw; background: rgba(255,255,255,.5); } .vscreen__bar .spacer { flex: 1; background: none; } .vscreen__bar .dm { width: 1.1cqw; height: 40%; border-radius: 2px; border: 1px solid rgba(255,255,255,.8); background: none; position: relative; } .vscreen__bar .dm::before, .vscreen__bar .dm::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.8); } .vscreen__bar .dm::before { left: 25%; } .vscreen__bar .dm::after { left: 75%; } .vscreen__bar .dm.on { border-color: var(--green); box-shadow: 0 0 6px rgba(52,199,89,.6); } .vscreen__bar .dm.on::before, .vscreen__bar .dm.on::after { background: var(--green); } .vscreen__bar .clock { width: 1.3cqw; background: rgba(255,255,255,.5); } /* mock windows inside a screen */ .win { position: absolute; border-radius: 4.5%/8%; overflow: hidden; background: rgba(28,28,30,.92); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); left: calc(var(--wx) * 1%); top: calc(var(--wy) * 1%); /* a window keeps a window's proportions: percent of its screen, but never wider/taller than a real window on this panel */ width: min(calc(var(--ww) * 1%), 30cqw); height: min(calc(var(--wh) * 1%), 24cqw); /* a screen that is still sliding in (narrow or flat) shows no window instead of a squashed sliver */ opacity: min(clamp(0, (var(--w, 100) - 6) / 2, 1), clamp(0, (var(--h, 100) - 8) / 4, 1)); transition: left .8s var(--ease-spring), top .8s var(--ease-spring), width .8s var(--ease-spring), height .8s var(--ease-spring), opacity .4s; } /* desk clutter only when its screen is (nearly) the whole panel */ .win--extra { opacity: clamp(0, (var(--w, 100) - 60) / 20, 1); } .win__bar { height: 9%; min-height: 6px; background: rgba(50,50,54,.9); display: flex; align-items: center; gap: 3px; padding-left: 4px; } .win__bar i { width: 5px; height: 5px; border-radius: 50%; display: block; } .win__bar i:nth-child(1) { background: #ff5f57; } .win__bar i:nth-child(2) { background: #febc2e; } .win__bar i:nth-child(3) { background: #28c840; } .win__body { position: absolute; inset: 9% 0 0; padding: 6% 5%; display: grid; gap: 4%; align-content: start; } .win__body i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); } .win--code .win__body i:nth-child(odd) { width: 70%; background: rgba(41,151,255,.45); } .win--code .win__body i:nth-child(even) { width: 45%; background: rgba(255,255,255,.18); } .win--code .win__body i:nth-child(3n) { width: 85%; background: rgba(255,159,10,.4); } .win--slides .win__body { padding: 8% 8%; } .win--slides .win__body i:first-child { height: 8px; width: 60%; background: rgba(255,255,255,.7); } .win--slides .win__body i { width: 90%; background: rgba(255,255,255,.22); } .win--slides .win__body i:last-child { height: 34%; width: 100%; border-radius: 4px; background: linear-gradient(135deg, rgba(41,151,255,.5), rgba(175,82,222,.5)); } /* rows as grid tracks, not item heights: a percentage height on an item of an auto track resolves to 0 (measured 2026-09-16, the bubbles never rendered); 7 rows fit: 7×8 + 6×4 + 2×~8 padding ≈ 96 % */ .win--chat .win__body { grid-auto-rows: 8%; } .win--chat .win__body i { border-radius: 8px; height: auto; } .win--chat .win__body i:nth-child(odd) { width: 55%; background: rgba(255,255,255,.14); } .win--chat .win__body i:nth-child(even) { width: 48%; margin-left: auto; background: rgba(41,151,255,.6); } .win--call, .win--meet { background: #101012; } .win--call .win__body, .win--meet .win__body { padding: 4%; grid-template-columns: 1fr 1fr; gap: 4%; align-content: stretch; } .win--call .win__body i, .win--meet .win__body i { height: auto; border-radius: 6px; background: linear-gradient(160deg, #3a3a44, #1b1b20); position: relative; } .win--call .win__body i::after, .win--meet .win__body i::after { content: ""; position: absolute; left: 50%; top: 40%; width: 22%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.22); } /* meeting window: neutral greys, a toolbar at the bottom; the Share button's pressed state uses the site accent, no brand colour */ .win--meet .win__body { inset: 9% 0 16%; } .win__tools { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; display: flex; align-items: center; justify-content: center; gap: .8cqw; background: rgba(20,20,24,.9); } .win__tools b { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #3a3a40; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); position: relative; transition: box-shadow .12s, background .12s; } .win__tools b::after { content: ""; position: absolute; inset: 30%; border-radius: 2px; background: rgba(255,255,255,.85); } .win__tools-share { width: 2cqw; height: 2cqw; } .win__tools-share.pressed { background: var(--accent); box-shadow: 0 0 0 2px rgba(41,151,255,.45); } .win__tools span { font-size: clamp(5px, .8cqw, 9px); color: rgba(255,255,255,.85); font-weight: 600; margin-right: .6cqw; } .win__tools-leave { background: #b3261e; } /* private message on the unshared screen: a 7th bubble and a title-bar badge, hidden until the proof */ .win__new { opacity: 0; transform: translateY(40%); transition: opacity .26s, transform .26s var(--ease-out); } .win__new.show { opacity: 1; transform: none; background: rgba(255,255,255,.34); } /* the incoming bubble is the brightest row: it must read as new at 200 px */ .win__badge { margin-left: auto; margin-right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; transform: scale(0); transition: transform .2s var(--ease-spring); } .win__badge.show { transform: scale(1); } .win--full { --wx: 0; --wy: 5.2; --ww: 100; --wh: 94.8; border-radius: 0; width: 100%; height: 94.8%; } /* dividers */ .divider { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; left: calc(var(--dx) * 1%); background: rgba(0,0,0,.9); transition: left .9s var(--ease-spring), opacity .4s; opacity: var(--o, 1); } .divider--h { left: calc(var(--dx0, 0) * 1%); right: auto; width: calc(var(--dw, 100) * 1%); height: 2px; margin: -1px 0 0; top: calc(var(--dy) * 1%); } .divider.no-anim { transition: none; } /* drag handles */ .handle { position: absolute; top: 0; bottom: 0; width: 22px; margin-left: -11px; left: calc(var(--dx) * 1%); cursor: col-resize; z-index: 5; touch-action: none; } .handle::before { content: ""; position: absolute; top: 44%; bottom: 44%; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.4); transition: background .2s, transform .2s, box-shadow .2s; } .handle:hover::before, .handle.is-active::before { background: var(--accent); transform: scaleX(1.6); box-shadow: 0 0 14px rgba(41,151,255,.8); } .handle.anim { transition: left .9s var(--ease-spring); } .ghost { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; left: calc(var(--dx) * 1%); background: rgba(41,151,255,.9); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 4; } .ghost.show { opacity: 1; } /* cursor overlay */ .cursor { position: absolute; z-index: 20; left: 60%; top: 60%; pointer-events: none; transition: left .8s var(--ease-io), top .8s var(--ease-io), transform .12s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); } .cursor.click { transform: scale(.85); } .cursor.hidden { opacity: 0; } /* the app's menu mock */ .dm-menu { position: absolute; z-index: 15; right: 2.6%; top: 6%; min-width: 26%; background: rgba(40,40,44,.78); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border-radius: 8px; padding: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18); font-size: clamp(7px, 1.05vw, 12px); color: #fff; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s, transform .2s var(--ease-out); pointer-events: none; } .dm-menu.show { opacity: 1; transform: none; } .dm-menu__item { padding: .5em .9em; border-radius: 5px; display: flex; align-items: center; gap: .6em; } .dm-menu__item--primary { font-weight: 600; } .dm-menu__item.hl { background: var(--accent); } .dm-menu__dot { width: .7em; height: .7em; border-radius: 50%; background: var(--fg-3); } .dm-menu__item.hl .dm-menu__dot { background: #fff; } .dm-menu__chev { margin-left: auto; opacity: .6; } .dm-menu__sep { height: 1px; background: rgba(255,255,255,.15); margin: 3px 8px; } /* keep-this-layout card */ .keep-card { position: absolute; z-index: 15; left: 50%; top: 50%; transform: translate(-50%,-40%) scale(.96); display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; background: rgba(30,30,34,.82); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18); font-size: clamp(8px, 1.15vw, 13px); opacity: 0; transition: opacity .25s, transform .3s var(--ease-out); pointer-events: none; white-space: nowrap; } .keep-card.show { opacity: 1; transform: translate(-50%,-50%) scale(1); } .keep-card__ring { position: relative; width: 2.8em; height: 2.8em; } .keep-card__ring svg { width: 100%; height: 100%; } .keep-card__ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: .95em; } .keep-card__text { display: flex; flex-direction: column; gap: 2px; } .keep-card__text span { color: var(--fg-2); font-size: .9em; } .keep-card__text em { font-style: normal; color: var(--fg); } .keep-card__btn { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: .5em 1.2em; font-weight: 600; font-size: 1em; margin-left: 6px; } .keep-card__btn.pressed { filter: brightness(.8); } /* ---------- layouts section (autoplaying morph) ---------- */ .scrub { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--pad) 0; } .scrub__sticky { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 40px); } .scrub__head { text-align: center; max-width: 860px; } .scrub__head .headline, .scrub__head .lede { transition: opacity .3s; } .scrub__stage { width: 100%; display: flex; align-items: flex-end; justify-content: center; } /* one desk line: the stand stays put, only the top grows */ .monitor--wide { max-width: 1000px; } .monitor--scrub { width: var(--mw, 100%); margin: 0; } .monitor--scrub .monitor__panel { aspect-ratio: var(--ar, 32 / 9); } .monitor--scrub .monitor__stand span { width: clamp(60px, 18%, 180px); } /* iMac on one clock: bezel tint, chin and stand all follow --imac (0..1) frame by frame — no class flips, no CSS transitions */ .monitor--scrub .monitor__bezel { position: relative; } .monitor--scrub .monitor__bezel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #f6f6f8, #e4e4e8); opacity: var(--imac, 0); pointer-events: none; } .monitor--scrub .monitor__panel { position: relative; } .monitor--scrub .monitor__chin { height: calc(var(--imac, 0) * var(--mw, 1000px) * 0.075); opacity: clamp(0, var(--imac, 0) * 4, 1); background: linear-gradient(180deg, #ececef, #d6d6db); border-radius: 0 0 10px 10px; margin: 0 -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .monitor--scrub .monitor__stand span { position: relative; width: calc(18% - var(--imac, 0) * 8%); height: calc(18px + var(--imac, 0) * 16px); } .monitor--scrub .monitor__stand span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #d9d9de, #c4c4ca); opacity: var(--imac, 0); } .monitor--scrub .monitor__bezel, .monitor--scrub .monitor__stand span { transition: none; } /* the top monitor's stand folds away while a second monitor is out (stacked ultrawides hang on an arm; the laptop sits in front) */ .monitor--scrub .monitor__stand span { height: calc((18px + var(--imac, 0) * 16px) * (1 - var(--cmp, 0))); } /* companion monitor on the same clock: --cmp slides it out from under the top one, --mac morphs ultrawide → MacBook */ .monitor__companion { height: calc(var(--cmp, 0) * var(--ch, 0px)); margin-top: calc(var(--cmp, 0) * var(--mw, 1000px) * 0.03); display: flex; justify-content: center; clip-path: inset(0 -160px -160px -160px); } .companion__inner { position: relative; width: var(--cw, 100%); transform: translateY(calc((1 - var(--cmp, 0)) * var(--ch, 0px) * -1)); } .companion__bezel { position: relative; border-radius: calc(18px + var(--mac, 0) * 6px); } .companion__bezel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #3a3a3f, #1c1c1f); opacity: var(--mac, 0); pointer-events: none; } .monitor--scrub .companion__bezel .monitor__panel { aspect-ratio: var(--car, 32 / 9); } .companion__notch { position: absolute; top: 9px; left: 50%; width: calc(var(--cw, 1000px) * 0.085); height: calc(var(--cw, 1000px) * 0.013); transform: translateX(-50%); background: #000; border-radius: 0 0 5px 5px; opacity: var(--mac, 0); pointer-events: none; } .companion__base { height: calc(var(--mac, 0) * var(--cw, 1000px) * 0.035); margin: 0 calc(var(--mac, 0) * -3%); background: linear-gradient(180deg, #dcdce1 0%, #c3c3ca 55%, #9d9da5 100%); border-radius: 0 0 14px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.45); opacity: clamp(0, var(--mac, 0) * 4, 1); position: relative; } .companion__base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 14%; height: 26%; background: rgba(0,0,0,.18); border-radius: 0 0 6px 6px; } /* a laptop panel is ~1/3 of the ultrawide, so its window may take the same share of the page: the cap grows with --mac */ .companion__inner .win { width: min(calc(var(--ww) * 1%), calc(30cqw * (1 + var(--mac, 0) * 1.17))); height: min(calc(var(--wh) * 1%), calc(24cqw * (1 + var(--mac, 0) * 1.17))); } .companion__stand { display: flex; justify-content: center; } .companion__stand span { display: block; width: clamp(60px, 18%, 180px); height: calc((1 - var(--mac, 0)) * 18px); background: linear-gradient(180deg, #17171a, #0a0a0b); border-radius: 0 0 10px 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); } .scrub__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(4px, 1.2vw, 18px); justify-content: center; flex-wrap: wrap; } .scrub__steps li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 12px; color: var(--fg-3); transition: color .3s, background .3s; font-size: 12px; cursor: pointer; text-align: center; } .scrub__steps li:hover { color: var(--fg-2); } .scrub__steps li b { font-weight: 600; color: inherit; font-size: 14px; } .scrub__steps li.is-active { color: var(--fg); background: rgba(255,255,255,.06); } .scrub__steps li.is-active b { color: var(--fg); } /* ---------- generic section ---------- */ .section { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--pad) 0; } .section__head { text-align: center; max-width: 860px; margin: 0 auto clamp(36px, 6vh, 64px); } /* drag */ .drag-readout { display: flex; max-width: 1000px; margin: 14px auto 0; padding: 0 9px; } .drag-readout div { text-align: center; color: var(--fg-2); font-variant-numeric: tabular-nums; font-size: 14px; transition: flex .9s var(--ease-spring); } .drag-readout b { color: var(--fg); font-weight: 600; font-size: 16px; } .drag-readout span { margin-left: 3px; } .drag-readout.live div { transition: none; } .preset-row { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; } .preset-row button { background: rgba(255,255,255,.06); color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; } .preset-row button:hover, .preset-row button.is-active { background: rgba(255,255,255,.14); color: var(--fg); } /* share */ .platforms { list-style: none; padding: 0; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; } .platforms li { color: var(--fg); font-size: 15px; font-weight: 500; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); } .section__head .fine { margin-top: 14px; } /* share — pair layout: "What you see" (monitor) and "What they see" (viewer) as two labelled columns */ .share-stage { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; } @media (min-width: 900px) { .share-stage { grid-template-columns: 1fr clamp(260px, 28%, 320px); gap: 28px; align-items: stretch; } } /* both labels on one line: the columns stretch to the row, labels sit at the top, monitor and viewer centre in the rest (measured 2026-09-16 with align-items: center on the grid: the labels sat 18 px apart because of the monitor stand) */ .share-col { min-width: 0; display: flex; flex-direction: column; } .share-col > :last-child { margin: auto 0; } .share-col--they .viewer { width: 72%; } /* phone: "you" stays the bigger object */ @media (min-width: 600px) { .share-col--they .viewer { width: 100%; max-width: 420px; } } @media (min-width: 900px) { .share-col--they .viewer { max-width: none; } } .share-stage__caption { grid-column: 1 / -1; margin-top: 10px; } .share-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--fg-2); } @media (max-width: 599px) { .share-label { font-size: 12px; } } .share-label__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); transition: background .3s; } .share-stage.is-live .share-label__dot { background: var(--green); } .vscreen.sharing { box-shadow: inset 0 0 0 3px var(--green); } .vscreen .share-pill { position: absolute; left: 50%; bottom: 8%; transform: translate(-50%, 8px); background: rgba(52,199,89,.95); color: #062b10; font-weight: 600; font-size: clamp(6px, .9vw, 11px); padding: .35em .9em; border-radius: 999px; opacity: 0; transition: opacity .3s, transform .3s var(--ease-out); z-index: 3; } .vscreen.sharing .share-pill { opacity: 1; transform: translate(-50%, 0); } /* picker: one screen wide (31 % of the panel = inside Screen 2 with margins; 44 % only on phones, where 31 % is ~100 px), sized in panel units so it scales with the screen it belongs to (measured 2026-09-16: a 220 px floor overflowed Screen 2 below 1100 px), anchored just above the meeting toolbar (window bottom 88 % − toolbar 12.16 % of the screen) so the sheet visibly rises from the button */ .picker { position: absolute; z-index: 15; left: 50%; bottom: 26%; transform: translate(-50%, 6%) scale(.92); transform-origin: 50% 100%; width: 31%; background: rgba(30,30,34,.85); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18); padding: 2.5% 3% 2%; font-size: clamp(7px, 1.55cqw, 11px); line-height: 1.2; opacity: 0; transition: opacity .18s, transform .26s var(--ease-out); pointer-events: none; } .picker.show { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .2s, transform .26s var(--ease-out); } @media (max-width: 599px) { .picker { width: 44%; bottom: 3%; } } /* the sheet is nearly as tall as the phone panel: keep it inside */ .picker__title { font-weight: 600; margin-bottom: .6em; font-size: 1.1em; white-space: nowrap; } .picker__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; } .picker__grid button { background: rgba(255,255,255,.05); border: 1.5px solid transparent; border-radius: 8px; padding: 4% 4% 5%; color: var(--fg-2); display: flex; flex-direction: column; gap: .5em; align-items: stretch; font-size: 1em; white-space: nowrap; pointer-events: none; transition: border-color .2s, background .2s, color .2s; } .picker__grid button.hl { border-color: var(--accent); background: rgba(41,151,255,.14); color: var(--fg); } .thumb { display: block; aspect-ratio: 16/9; border-radius: 4px; position: relative; overflow: hidden; } /* background painted from WALLS in app.js */ .thumb::after { content: ""; position: absolute; inset: 24% 12% 14%; border-radius: 3px; background: rgba(255,255,255,.16); box-shadow: inset 0 2px 0 rgba(255,255,255,.22); } .picker__foot { display: flex; justify-content: flex-end; margin-top: .8em; } .picker__foot b { background: var(--accent); color: #fff; padding: .35em 1.1em; border-radius: 6px; font-weight: 600; transition: filter .15s; } .picker__foot b.pressed { filter: brightness(.75); } /* viewer: a participant's 16:9 window; the shared 32:27 screen is pillarboxed inside, like every meeting app does with a tall source */ .viewer { border-radius: 14px; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(0,0,0,.5); opacity: .35; transform: scale(.98); transition: opacity .5s, transform .5s var(--ease-out); } .viewer.live { opacity: 1; transform: none; } .viewer__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #2a2a2e; font-size: 12px; color: var(--fg-2); } .viewer__bar span { width: 10px; height: 10px; border-radius: 50%; background: #48484d; } .viewer__live { display: flex; align-items: center; gap: 6px; margin-left: auto; font-style: normal; opacity: 0; transition: opacity .2s; } .viewer__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .share-stage.is-live .viewer__live { opacity: 1; } .viewer__screen { aspect-ratio: 16/9; background: #000; position: relative; overflow: hidden; } /* a 32:27 screen is 2/3 of a 16:9 box; a canvas 3× the screen = 200 % of the box ⇒ 1 cqw here = 1 cqw on the monitor panel */ .viewer__canvas { position: absolute; top: 0; height: 100%; width: 200%; left: -50%; container-type: inline-size; } .viewer__canvas .vscreen { left: 33.33%; top: 0; width: 33.34%; height: 100%; opacity: 0; transform: scale(.98); transition: opacity .35s, transform .35s var(--ease-out); } .share-stage.is-live .viewer__canvas .vscreen { opacity: 1; transform: none; } .viewer__screen .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-3); font-size: 13px; transition: opacity .2s; } /* spaces */ .vscreen__stage { position: absolute; inset: 0; display: flex; width: 200%; transition: transform .8s var(--ease-io); } .vscreen__stage > div { position: relative; width: 50%; height: 100%; background: var(--wall2, var(--wall)); background-size: cover; } .vscreen__stage > div:first-child { background: none; } .vscreen__stage.next { transform: translateX(-50%); } .fingers { position: absolute; z-index: 12; display: flex; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .25s, left .8s var(--ease-io); } .fingers i { width: clamp(10px, 1.6vw, 18px); height: clamp(10px, 1.6vw, 18px); border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); } .fingers.show { opacity: 1; } /* strain */ .strain-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; } .load { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 10px; } .load__bars { height: 64px; display: flex; align-items: flex-end; gap: 3px; padding: 0 2px; border-bottom: 1px solid var(--line); } .load__bars i { flex: 1; display: block; height: 10%; border-radius: 2px 2px 0 0; background: var(--c, var(--fg-3)); transition: height .28s var(--ease-out), background .5s; } .load__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--fg-3); } .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--fg-2); font-weight: 500; transition: color .3s; } .status-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); transition: background .3s; } .status-pill.paused i { background: #8e8e93; } .status-pill.starting i { background: var(--amber); } .hud { position: absolute; z-index: 15; left: 50%; bottom: 9%; transform: translate(-50%, 8px); max-width: 70%; padding: .7em 1.1em; border-radius: 12px; text-align: center; background: rgba(30,30,34,.85); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.18); font-size: clamp(8px, 1.15vw, 13px); font-weight: 500; opacity: 0; transition: opacity .3s, transform .35s var(--ease-out); pointer-events: none; } .hud.show { opacity: 1; transform: translate(-50%, 0); } /* bento */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .card { grid-column: span 2; background: var(--bg-3); border-radius: var(--radius); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .card--wide { grid-column: span 3; } .card h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; margin-top: 10px; } .card p { color: var(--fg-2); font-size: 15px; line-height: 1.45; } .card__art { height: 120px; border-radius: 14px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } @media (max-width: 900px) { .card, .card--wide { grid-column: span 3; } } @media (max-width: 600px) { .card, .card--wide { grid-column: span 6; } } .art-film { flex-direction: column; gap: 10px; } .art-film__player { width: 46%; aspect-ratio: 16/9; border-radius: 6px; background: #000; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.12); } .art-film__player span { width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; } .art-film__split { display: flex; gap: 3px; width: 46%; } .art-film__split i { flex: 1; height: 6px; border-radius: 2px; background: var(--green); animation: filmsplit 4s infinite; } .art-film__split i:nth-child(2) { animation-delay: .15s; } .art-film__split i:nth-child(3) { animation-delay: .3s; } @keyframes filmsplit { 0%, 35% { opacity: 1; transform: scaleX(1); } 45%, 75% { opacity: .2; transform: scaleX(.3); } 85%, 100% { opacity: 1; transform: scaleX(1); } } .art-keys kbd { font-family: inherit; background: #2a2a2e; color: var(--fg); border-radius: 8px; padding: 10px 14px; min-width: 42px; text-align: center; box-shadow: 0 2px 0 #000, inset 0 0 0 1px rgba(255,255,255,.1); font-size: 17px; } .art-keys kbd:last-child { background: var(--accent); } .art-panic__key { background: #2a2a2e; color: var(--fg); border-radius: 12px; padding: 14px 26px; font-size: 18px; box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(255,255,255,.1); animation: press 3s infinite; } @keyframes press { 0%, 80%, 100% { transform: translateY(0); } 85% { transform: translateY(3px); box-shadow: 0 0 0 #000; } } .art-profiles i { width: 54px; height: 20px; border-radius: 4px; border: 1.5px solid var(--fg-2); position: relative; } .art-profiles i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 33%; width: 1.5px; background: var(--fg-2); } .art-profiles i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 66%; width: 1.5px; background: var(--fg-2); } .art-profiles i:nth-child(2) { border-color: var(--green); } .art-profiles i:nth-child(2)::before, .art-profiles i:nth-child(2)::after { background: var(--green); } .art-profiles i:nth-child(3)::after { display: none; } .art-profiles i:nth-child(3)::before { left: 50%; } .art-status .dm-icon { width: 72px; height: 22px; animation: statuscolor 6s infinite; } @keyframes statuscolor { 0%, 30% { color: #8e8e93; } 40%, 45% { color: var(--amber); } 55%, 100% { color: var(--green); } } .art-lang { flex-wrap: wrap; gap: 8px 14px; padding: 0 20px; font-size: 14px; color: var(--fg-2); } .art-zones i { flex: 1; height: 60%; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.25); margin: 0 4px; } .art-zones i:nth-child(2) { background: rgba(41,151,255,.18); border-color: var(--accent); } /* privacy */ .section--privacy { text-align: center; } .facts { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; display: grid; gap: 10px; text-align: left; } .facts li { background: var(--bg-3); border-radius: 16px; padding: 20px 24px; display: grid; gap: 4px; } .facts b { font-size: 18px; letter-spacing: -0.01em; } .facts span { color: var(--fg-2); font-size: 15px; } /* pricing */ .plans { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 820px; margin: 0 auto; } @media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } } .plan { background: var(--bg-3); border-radius: var(--radius); padding: 34px 32px; display: flex; flex-direction: column; gap: 10px; } .plan h3 { font-size: 20px; } .plan__price b { font-size: 46px; letter-spacing: -0.03em; font-weight: 700; } .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; } /* "Bezpłatnie" + "na czas bety" wrap cleanly at 375 px (MV-509) */ .plan__price b { line-height: 1.1; } .plan__price span { color: var(--fg-2); } .plan ul { list-style: none; padding: 0; margin: 12px 0 22px; display: grid; gap: 8px; color: var(--fg-2); font-size: 15px; } .plan li::before { content: "✓ "; color: var(--green); } .plan .btn { margin-top: auto; } .plan__fine { margin-top: 10px; font-size: 13px; } /* fine print under the beta buttons carries the offer terms (end date, paid 1.0): --fg-2 keeps it >= 4.5:1 on black and on the plan cards (--fg-3 was ~4.1:1 on black) - checked by testy_wizualne/zrzuty.py (MV-509 round 3) */ [data-beta-fine] { color: var(--fg-2); } /* about the beta (MV-509): FAQ as
, keyboard-usable by default */ .section--faq { text-align: center; } .faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; text-align: left; } .faq__item { background: var(--bg-3); border-radius: 16px; } .faq__item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 24px; position: relative; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; border-radius: 16px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; content: "+" / ""; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--fg-3); font-weight: 400; font-size: 22px; } .faq__item[open] summary::after { content: "−"; content: "−" / ""; } /* alt text "": VoiceOver does not read plus/minus;
says open/closed itself */ .faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .faq__a { padding: 0 24px 20px; color: var(--fg-2); font-size: 15px; display: grid; gap: 10px; } .faq__a ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; } .faq__a a { color: var(--accent); overflow-wrap: anywhere; } .faq__a a:hover { text-decoration: underline; } .faq__a b { color: var(--fg); font-weight: 600; } .faq__thanks { text-align: center; color: var(--fg-2); margin-top: 26px; } [dir="rtl"] .faq__item summary { padding: 18px 24px 18px 52px; } [dir="rtl"] .faq__item summary::after { right: auto; left: 24px; } /* footer */ .footer { margin-top: clamp(80px, 14vh, 160px); border-top: 1px solid var(--line); padding: 36px 0 48px; color: var(--fg-3); font-size: 13px; } .footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; } .footer__brand { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-weight: 600; } .footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; } /* wraps: five German links are 532 px wide on a 390 px phone (measured 2026-09-18, MV-267) */ .footer nav a:hover { color: var(--fg); } .footer p { flex-basis: 100%; } .footer__legal { line-height: 1.6; } /* beta (lista oczekujących; cel przycisków w build.py BETA_FORM_URL) */ .section--beta { text-align: center; } .section--beta .cta-row { justify-content: center; } .lang-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .lang-switch select { background: var(--bg-3); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; } [dir="rtl"] .lang-switch { margin-left: 0; margin-right: auto; } .lang-switch:not(:has(select)) { display: none; } /* build.py --langs en: one language, no switcher, so no orphan "Language" label */ [dir="rtl"] .nav__links { margin-left: 0; margin-right: auto; } [dir="rtl"] .dm-menu { right: auto; left: 2.6%; transform-origin: top left; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .vscreen.anim, .divider, .win, .cursor, .handle.anim, .vscreen__stage { transition: none; } .viewer, .viewer__canvas .vscreen, .viewer__live, .picker, .win__new, .win__badge, .share-label__dot, .win__tools b { transition: none; } .art-film__split i, .art-panic__key, .art-status .dm-icon { animation: none; } } /* legal pages */ .legal { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vh, 96px) var(--pad) 80px; } .legal h1 { font-size: clamp(32px, 4.5vw, 48px); letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 10px; } .legal .meta { color: var(--fg-3); font-size: 14px; margin-bottom: 40px; } .legal h2 { font-size: 22px; letter-spacing: -0.015em; margin: 40px 0 10px; } .legal p, .legal li { color: var(--fg-2); font-size: 17px; line-height: 1.55; } .legal p + p { margin-top: 12px; } .legal ul { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; } .legal strong { color: var(--fg); font-weight: 600; } .legal .note { border-left: 2px solid var(--amber); padding: 10px 16px; background: rgba(255,159,10,.06); border-radius: 0 10px 10px 0; font-size: 15px; } .legal a { color: var(--accent); } /* legal pages: tables, code and the wide variant used by /releases/ */ .legal--wide { max-width: 1040px; } .legal h3 { font-size: 18px; margin: 28px 0 8px; } .legal .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 8px; } .legal table.grid { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; font-size: 15px; } .legal table.grid th, .legal table.grid td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--fg-2); } .legal table.grid th { color: var(--fg-3); font-weight: 500; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; } .legal table.grid td:first-child { color: var(--fg); } .legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--fg); word-break: break-all; } .legal pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; overflow-x: auto; } .legal pre code { font-size: 13.5px; line-height: 1.55; word-break: normal; white-space: pre; } .legal .fine { font-size: 13px; } /* topic pages (MV-773, SEO_STRATEGY.md § 4): the legal column with a lede, an FAQ and a call to the beta list — the existing tokens only, no new colours */ .topic .eyebrow { margin-bottom: 10px; color: var(--accent); font-size: 15px; } /* .legal p would turn it grey */ .topic .topic__lede { color: var(--fg); font-size: clamp(19px, 2vw, 22px); line-height: 1.45; margin-top: 6px; } .topic__faq h2 { margin-bottom: 16px; } .topic .faq__a p { margin: 0; font-size: 15px; } .topic__cta { margin-top: 56px; padding: 28px 24px 30px; background: var(--bg-3); border-radius: var(--radius); text-align: center; } .topic__cta h2 { margin-top: 0; } .topic__cta .cta-row { justify-content: center; margin-top: 20px; } .topic .btn { color: #fff; } /* .legal a paints links in the accent: a button keeps its white label */ /* beta sign-up (/beta/, MV-430) — the existing tokens only, no new colours */ .signup { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vh, 80px) var(--pad) 0; /* MV-526: one height for every control. 44 px on a phone and on anything touched; 40 px with a mouse on a wide window. Explicit height + appearance:none, because Safari draws a native