/* ========================================================================== Rosanne subpages: the same keynote stage as the home hero. Loaded after site.css on every generated subpage. Page heads are centred stages: a two-tone headline over the page's own visual standing on a dotted floor, with hairline annotations where they help. Below: sections built from the home page's system (a hairline label, a two-tone title, a lede, the home's section rhythm), hairline figures and product shots drawn in hairlines, and a closing section where a small version of the page's visual stands on the floor again. Layers: tokens, section system (mirrors home.css), stage, annotations, figures, product shots, download, about, events, contact, legal, FAQ (mirrors home.css), coda, fallbacks, motion, responsive. ========================================================================== */ /* ---------- Tokens: light ---------- */ :root { --bart-bg: #F7F7F8; /* the quiet surface under a blog cover */ --rove-floor: rgba(0, 0, 0, 0.16); --rl-1: #5B1E8F; --rl-2: #93278F; --rl-3: #D115B5; --rl-band: rgba(255, 255, 255, 0.96); --rl-glow: rgba(255, 236, 252, 1); --hm-gap: clamp(112px, 6.4vw + 76px, 208px); --hm-quiet: #8A8A8A; /* the second tone of every title; 3.4:1, used only at large sizes */ --hm-dim: #8A8A8A; /* vision words before the reading line reaches them (large text) */ --fig-line: rgba(0, 0, 0, 0.22); --fig-line-2: rgba(0, 0, 0, 0.10); --fig-bar: #E8E8E8; --fig-bar-2: #F1F1F1; --fig-glyph: #0D0D0D; --fig-accent: #93278F; --fig-accent-soft: rgba(147, 39, 143, 0.08); --fig-accent-bar: rgba(147, 39, 143, 0.42); --shot-bg: #FFFFFF; --shot-panel: #FAFAFA; --shot-3: #6B6B6B; --shot-accent: #93278F; --shot-line: rgba(0, 0, 0, 0.08); --shot-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04), 0 28px 64px -30px rgba(0, 0, 0, 0.22), 0 70px 120px -70px rgba(0, 0, 0, 0.18); --th-1: #1F3BD1; --th-2: #93278F; --th-3: #D2601A; --sk: #EDEDED; --sk-2: #F5F5F5; --dev-line: rgba(13, 13, 13, 0.74); --dev-soon: rgba(13, 13, 13, 0.30); --dev-screen: #FCFCFC; --dev-glow: rgba(147, 39, 143, 0.035); --ticket-bg: #FFFFFF; --ticket-edge: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.32)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.05)); --fb-dot: rgba(147, 39, 143, 0.45); --mark-shadow: drop-shadow(0 22px 36px rgba(13, 13, 13, 0.16)) drop-shadow(0 4px 10px rgba(13, 13, 13, 0.08)); } /* ---------- Tokens: dark ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bart-bg: #0C0C0D; --rove-floor: rgba(255, 255, 255, 0.10); --rl-1: #9A4BD6; --rl-2: #C04CBB; --rl-3: #F05AD9; --rl-band: rgba(255, 255, 255, 1); --rl-glow: rgba(255, 200, 248, 1); --hm-quiet: #7C7C7C; --hm-dim: #616161; --fig-line: rgba(255, 255, 255, 0.30); --fig-line-2: rgba(255, 255, 255, 0.13); --fig-bar: #2B2B2B; --fig-bar-2: #1E1E1E; --fig-glyph: #FFFFFF; --fig-accent: #D26ECD; --fig-accent-soft: rgba(210, 110, 205, 0.14); --fig-accent-bar: rgba(210, 110, 205, 0.6); --shot-bg: #0D0D0D; --shot-panel: #121212; --shot-3: #AFAFAF; --shot-accent: #D878D3; --shot-line: rgba(255, 255, 255, 0.09); --shot-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 40px 100px -40px rgba(0, 0, 0, 0.9); --th-1: #5C8BFF; --th-2: #D23CC4; --th-3: #F08A3C; --sk: #262626; --sk-2: #1B1B1B; --dev-line: rgba(255, 255, 255, 0.82); --dev-soon: rgba(255, 255, 255, 0.34); --dev-screen: #0A0A0A; --dev-glow: rgba(140, 92, 255, 0.10); --ticket-bg: #0B0B0B; --ticket-edge: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.55)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)); --fb-dot: rgba(210, 110, 205, 0.6); --mark-shadow: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25)); } } :root[data-theme="dark"] { --bart-bg: #0C0C0D; --rove-floor: rgba(255, 255, 255, 0.10); --rl-1: #9A4BD6; --rl-2: #C04CBB; --rl-3: #F05AD9; --rl-band: rgba(255, 255, 255, 1); --rl-glow: rgba(255, 200, 248, 1); --hm-quiet: #7C7C7C; --hm-dim: #616161; --fig-line: rgba(255, 255, 255, 0.30); --fig-line-2: rgba(255, 255, 255, 0.13); --fig-bar: #2B2B2B; --fig-bar-2: #1E1E1E; --fig-glyph: #FFFFFF; --fig-accent: #D26ECD; --fig-accent-soft: rgba(210, 110, 205, 0.14); --fig-accent-bar: rgba(210, 110, 205, 0.6); --shot-bg: #0D0D0D; --shot-panel: #121212; --shot-3: #AFAFAF; --shot-accent: #D878D3; --shot-line: rgba(255, 255, 255, 0.09); --shot-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 40px 100px -40px rgba(0, 0, 0, 0.9); --th-1: #5C8BFF; --th-2: #D23CC4; --th-3: #F08A3C; --sk: #262626; --sk-2: #1B1B1B; --dev-line: rgba(255, 255, 255, 0.82); --dev-soon: rgba(255, 255, 255, 0.34); --dev-screen: #0A0A0A; --dev-glow: rgba(140, 92, 255, 0.10); --ticket-bg: #0B0B0B; --ticket-edge: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.55)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)); --fb-dot: rgba(210, 110, 205, 0.6); --mark-shadow: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25)); } /* ---------- Section system: the same frame as the home page (mirrors home.css) ---------- A label with a short purple hairline, a two-tone title, a lede; the home page's section gap between sections. */ .page--sub .section { margin-top: var(--hm-gap); } .page--sub .section--first { margin-top: clamp(96px, 5vw + 64px, 168px); } .hm-head { margin-bottom: clamp(48px, 3.2vw + 24px, 88px); } .hm-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; } .hm-head:not(.hm-head--center) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; } .hm-head__main { grid-column: 1 / span 7; } .hm-head:not(.hm-head--center) > .hm-lede { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 440px; margin-top: 0; padding-bottom: 5px; } .hm-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0; color: var(--text-2); } .hm-kicker::before { content: ""; width: 16px; height: 1px; background: var(--accent); flex: none; } .hm-head--center .hm-kicker::after { content: ""; width: 16px; height: 1px; background: var(--accent); flex: none; } .hm-title { margin-top: 14px; font-size: clamp(30px, 1.55vw + 18px, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; } .hm-title--sm { font-size: clamp(26px, 0.9vw + 17px, 36px); line-height: 1.12; letter-spacing: -0.03em; } .hm-quiet { color: var(--hm-quiet); } .hm-lede { margin-top: 18px; max-width: 600px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: pretty; } .hm-head--center .hm-lede { max-width: 620px; text-wrap: balance; } @media (max-width: 1023px) { .hm-head:not(.hm-head--center) { display: block; } .hm-head:not(.hm-head--center) > .hm-lede { justify-self: start; max-width: 600px; margin-top: 16px; padding: 0; } } /* ---------- Stage: the page head ---------- */ .stage { position: relative; overflow-x: clip; padding-top: clamp(36px, 5.6vh, 72px); } @supports not (overflow-x: clip) { .stage { overflow: hidden; } } .stage__head { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; } .stage__eyebrow { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; line-height: 18px; color: var(--text-3); } .stage__eyebrow b { font-weight: 500; color: var(--text); } .stage__eyebrow b + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 8px 0 0; background: var(--line-heavy); vertical-align: -1px; } .stage__app { width: 20px; height: 20px; } /* A product lockup leading the stage (/ros/): wide enough that "by Rosanne" stays legible. */ .stage__lockup { margin-bottom: 10px; } .stage__lockup img { width: clamp(190px, 8vw + 110px, 250px); height: auto; } .stage__glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-heavy); color: var(--text); } .stage__glyph .ico { width: 14px; height: 14px; } .stage__title { --ls-from: 0.01em; --ls-to: -0.035em; margin-top: 18px; max-width: 16.5em; font-size: clamp(36px, 2.5vw + 16px, 62px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; } .stage__line { display: block; padding-bottom: 0.04em; } .stage__quiet { color: var(--hero-quiet); } .stage__sub { margin-top: 18px; max-width: 580px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: balance; } .stage__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 26px; } .stage__actions .btn--outline { background: transparent; } .stage__actions .btn .ico, .coda .btn .ico { width: 18px; height: 18px; } /* The rig: the visual, the floor it stands on, its shadow and its annotations share one grid cell */ .stage__rig { --cw: clamp(260px, min(34vw, 100svh - 470px), 460px); --ar: 1; position: relative; display: grid; place-items: center; margin-top: clamp(24px, 4vh, 44px); padding-bottom: clamp(36px, 6vh, 64px); } .stage__core { position: relative; z-index: 1; grid-area: 1 / 1; width: var(--cw); aspect-ratio: var(--ar); } .stage__core > .field { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } .stage__shadow { position: absolute; left: 50%; bottom: -3%; width: 64%; height: 10%; transform: translateX(-50%); z-index: -1; pointer-events: none; } .stage__shadow::before, .stage__shadow::after { content: ""; position: absolute; border-radius: 50%; } .stage__shadow::before { inset: 0; background: radial-gradient(closest-side, var(--hx-floor-1), var(--hx-floor-2) 45%, transparent 100%); } .stage__shadow::after { left: 24%; right: 24%; top: 32%; bottom: 32%; background: radial-gradient(closest-side, var(--hx-floor-core), transparent 100%); } .stage__floor { position: absolute; left: 50%; top: 0; bottom: 0; width: 100vw; transform: translateX(-50%); pointer-events: none; } .stage__floor.is-on .field__canvas, .coda__floor.is-on .field__canvas { opacity: 1; } /* Still floor (no script or no canvas): the same dots as a CSS plane tilted into perspective */ .stage__floor::before, .coda__floor::before { content: ""; position: absolute; left: -25%; right: -25%; top: 58%; bottom: -30%; display: none; background: radial-gradient(circle, var(--floor-dot) 1px, transparent 1.4px) 0 0 / 28px 28px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 0; -webkit-mask: radial-gradient(ellipse 60% 90% at 50% 0, #000 20%, transparent 70%); mask: radial-gradient(ellipse 60% 90% at 50% 0, #000 20%, transparent 70%); } .no-js .stage__floor::before, .stage__floor.is-static::before, .no-js .coda__floor::before, .coda__floor.is-static::before { display: block; } /* Sizes and proportions per visual */ .stage__rig--ros { --cw: clamp(300px, min(48vw, (100svh - 490px) * 1.6), 760px); --ar: 1.6; } .stage__rig--os { --cw: clamp(260px, min(36vw, 100svh - 400px), 520px); } .stage__rig--about { --cw: clamp(260px, min(34vw, 100svh - 480px), 440px); } .stage__rig--events { --cw: clamp(260px, min(34vw, (100svh - 480px) * 1.08), 460px); --ar: 1.08; } .stage__rig--contact { --cw: clamp(280px, min(44vw, (100svh - 440px) * 1.3), 600px); --ar: 1.3; } .stage__rig--notfound { --cw: clamp(260px, min(40vw, (100svh - 470px) * 2), 520px); --ar: 2; } .stage__rig--ros .stage__shadow { bottom: -1%; width: 80%; } .stage__rig--os .stage__shadow { display: none; } .stage__rig--about .stage__shadow { bottom: 6%; width: 52%; } .stage__rig--contact .stage__shadow { bottom: 14%; width: 34%; } .stage__rig--events .stage__shadow { bottom: 0; } .stage--contact .field__badge { top: 46%; width: 60px; height: 60px; box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, 0.08); } /* ---------- Annotations: keynote callouts, one pin on the visual, a hairline out, a quiet label ---------- */ .annos { position: relative; z-index: 2; grid-area: 1 / 1; width: var(--cw); aspect-ratio: var(--ar); pointer-events: none; } .anno { --len: clamp(28px, 3.6vw, 64px); position: absolute; top: var(--ay); display: flex; align-items: center; transform: translateY(-50%); color: var(--text-3); transition: color 500ms var(--ease); } .anno--r { left: calc(var(--ax) - 4px); } .anno--l { right: calc(100% - var(--ax) - 4px); flex-direction: row-reverse; } .anno__pin { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--pin-line), 0 0 0 2px var(--bg); transition: background-color 500ms var(--ease), box-shadow 500ms var(--ease); } .anno__wire { position: relative; flex: none; width: var(--len); height: 1px; background: var(--line); overflow: hidden; } .anno__wire::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translateX(-100%); opacity: 0; } .anno__text { position: relative; display: grid; padding-inline: 12px; white-space: nowrap; text-align: left; } .anno--l .anno__text { text-align: right; justify-items: end; } .anno__text::before { content: ""; position: absolute; inset: -14px -18px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--bg) 55%, transparent); } .anno__name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-3); transition: color 500ms var(--ease); } .anno__note { font-size: 12px; line-height: 16px; color: var(--text-3); transition: color 500ms var(--ease); } .anno.is-active .anno__name { color: var(--text); } .anno.is-active .anno__note { color: var(--text-2); } .anno.is-active .anno__pin { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 2px var(--bg), 0 0 0 5px var(--pin-glow); } /* Pin positions for the still drawings (no script); fields.js moves each pin onto the drawing as it turns in 3D. */ .stage__rig--ros .anno--1 { --ax: 1.5%; --ay: 25.8%; } .stage__rig--ros .anno--2 { --ax: 98.5%; --ay: 10.9%; } .stage__rig--ros .anno--3 { --ax: 1.5%; --ay: 49.6%; } .stage__rig--ros .anno--4 { --ax: 98.5%; --ay: 82%; } .stage__rig--os .anno--1 { --ax: 10%; --ay: 29%; } .stage__rig--os .anno--2 { --ax: 90%; --ay: 29%; } .stage__rig--os .anno--3 { --ax: 90%; --ay: 71%; } .stage__rig--os .anno--4 { --ax: 10%; --ay: 71%; } /* Feature columns: every drawing in the same 16:10 art box, the same width, standing on one hairline baseline */ .feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; } .feat { display: flex; flex-direction: column; min-width: 0; } .feat__fig { display: flex; align-items: flex-end; justify-content: flex-start; aspect-ratio: 16 / 10; min-height: 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .feat__title { padding-top: 20px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; } .feat__text { margin-top: 8px; max-width: 400px; font-size: 15px; line-height: 22px; color: var(--text-2); } /* Three or four principles across the page */ .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; } .trio__item { padding-top: 20px; border-top: 1px solid var(--line); } .trio__item > .ico { color: var(--text); } .trio__title { margin-top: 16px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; } .trio__text { margin-top: 8px; max-width: 420px; font-size: 15px; line-height: 22px; color: var(--text-2); } /* ---------- Research (/research/): the Roslang mark, alive; one source fanning out; the repository ---------- */ .stage__rig--research { --ar: 1.6; } .stage__rig--research .stage__core { width: calc(var(--cw) * 0.86); } .stage__rig--research .stage__core { display: grid; place-items: center; } .stage__rig--research .stage__shadow { bottom: 2%; width: 70%; } .rl-live { width: 100%; } .rl-live svg { display: block; width: 100%; height: auto; overflow: visible; } .rl-s1 { stop-color: var(--rl-1); } .rl-s2 { stop-color: var(--rl-2); } .rl-s3 { stop-color: var(--rl-3); } /* Each band of light is a tapered streak: short segments that thin and fade behind a bright head, all inside the mark's line (research.js moves them along it). Still until the script runs. */ .rl-streak { stroke: var(--rl-band); stroke-linecap: butt; stroke-dasharray: 0.77 99.23; stroke-dashoffset: 0; } .rl-fan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); align-items: center; max-width: 1040px; margin-inline: auto; } .rl-fan__src { display: grid; justify-items: center; gap: 14px; } .rl-fan__mark { height: 64px; width: auto; } .rl-fan__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .rl-fan__wires { width: 100%; height: 330px; fill: none; stroke: var(--line-heavy); stroke-width: 1; } .rl-fan__list { display: grid; } .rl-fan__item { display: flex; align-items: center; gap: 12px; height: 55px; border-bottom: 1px solid var(--line); font-size: 15px; } .rl-fan__item:first-child { border-top: 1px solid var(--line); } .rl-fan__item > .ico { color: var(--text); } .rl-fan__note { margin-left: auto; font-size: 13px; color: var(--text-3); } .rl-repo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 22px 0; border-block: 1px solid var(--line); color: var(--text); text-decoration: none; } .rl-repo__img { height: 24px; width: auto; display: block; } .rl-repo__main { display: grid; gap: 2px; min-width: 0; } .rl-repo__main b { font-size: 16px; font-weight: 600; } .rl-repo__main span { font-size: 14px; color: var(--text-2); } .rl-repo__meta { font-size: 13px; color: var(--text-3); } .rl-repo__go { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; } .rl-repo__go .ico { width: 16px; height: 16px; transition: transform 200ms var(--ease); } .rl-repo:hover .rl-repo__go { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .rl-repo:hover .rl-repo__go .ico { transform: translate(2px, -2px); } @media (max-width: 767px) { .rl-fan { grid-template-columns: minmax(0, 1fr); gap: 28px; } .rl-fan__wires { display: none; } .rl-repo { grid-template-columns: auto minmax(0, 1fr); } .rl-repo__meta { display: none; } .rl-repo__go { grid-column: 2; } } /* ---------- Changelog (/changelog/): the legal layout, one release per section, newest first ---------- */ .log__toc-v { flex: none; width: 44px; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-3); } .log { margin-top: 56px; border-bottom: 1px solid var(--line); } .rel { padding-block: 44px 48px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--sticky-top) + 8px); } .rel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .rel__v { font-size: clamp(26px, 0.6vw + 19px, 32px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; } /* The newest release: a quiet accent hairline, the only colour on the page */ .rel__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--accent); font-size: 12px; line-height: 1; color: var(--accent); } .rel__meta { flex-basis: 100%; font-size: 13px; line-height: 20px; color: var(--text-3); } .rel__meta a, .log__gh { display: inline-flex; align-items: center; gap: 2px; color: var(--text); text-decoration: none; text-underline-offset: 3px; } .rel__meta a:hover, .log__gh:hover { text-decoration: underline; text-decoration-color: var(--accent); } .rel__meta .ico, .log__gh .ico { width: 14px; height: 14px; } .rel__sum { margin-top: 18px; max-width: 680px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: pretty; } .rel__hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); margin-top: 32px; } .rel__item { display: flex; flex-direction: column; min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); } .rel__item > .ico { color: var(--text); } .rel__title { margin-top: 14px; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; } .rel__text { margin-top: 6px; max-width: 420px; font-size: 14px; line-height: 21px; color: var(--text-2); text-wrap: pretty; } .rel__item .wn__keys { margin-top: 0; padding-top: 12px; } .rel__all { margin-top: 32px; } .rel__all summary { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text); cursor: pointer; list-style: none; border-radius: 6px; } .rel__all summary::-webkit-details-marker { display: none; } .rel__count { color: var(--text-3); } .rel__all summary .ico { width: 16px; height: 16px; color: var(--text-3); transition: transform 250ms var(--ease); } .rel__all[open] summary .ico { transform: rotate(180deg); } .rel__groups { display: grid; gap: 24px; margin-top: 24px; } .rel__group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gap); padding-top: 16px; border-top: 1px solid var(--line); } .rel__gh { font-size: 13px; line-height: 21px; font-weight: 600; } .rel__list { display: grid; gap: 10px; } .rel__list li { max-width: 640px; font-size: 14px; line-height: 21px; color: var(--text-2); text-wrap: pretty; } .rel__list b { font-weight: 600; color: var(--text); } .log__more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 40px; font-size: 14px; } @media (max-width: 767px) { .rel__hl { grid-template-columns: minmax(0, 1fr); } .rel__group { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } } /* ---------- What's new (/ros/): five highlights in one hairline row; below 1024px, a list ---------- */ .wn { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .wn__item { display: flex; flex-direction: column; min-width: 0; padding: 28px clamp(16px, 1.6vw, 28px) 30px; } .wn__item:first-child { padding-left: 0; } .wn__item:last-child { padding-right: 0; } .wn__item + .wn__item { border-left: 1px solid var(--line); } .wn__item > .ico { color: var(--text); } .wn__title { margin-top: 18px; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; } .wn__text { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--text-2); text-wrap: pretty; } /* Shortcuts as small key labels: a hairline edge and a slightly heavier base, like the keys themselves */ .wn__keys { margin-top: auto; padding-top: 16px; } .wn__keys > [aria-hidden] { display: flex; gap: 4px; } .wn__keys kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; font: inherit; font-size: 12px; line-height: 1; font-weight: 500; color: var(--text-2); background: var(--bg); border: 1px solid var(--line-heavy); border-radius: 6px; box-shadow: inset 0 -1px 0 var(--line-heavy); } .wn__meta { margin-top: 18px; font-size: 13px; line-height: 20px; color: var(--text-3); } .wn__notes { display: inline-flex; align-items: center; gap: 2px; color: var(--text); text-decoration: none; text-underline-offset: 3px; } .wn__notes:hover { text-decoration: underline; text-decoration-color: var(--accent); } .wn__notes .ico { width: 14px; height: 14px; } /* The five arrive one after another the first time the row comes into view */ .motion .wn__item[data-reveal]:nth-child(2) { transition-delay: 70ms; } .motion .wn__item[data-reveal]:nth-child(3) { transition-delay: 140ms; } .motion .wn__item[data-reveal]:nth-child(4) { transition-delay: 210ms; } .motion .wn__item[data-reveal]:nth-child(5) { transition-delay: 280ms; } /* On narrow desktops a title can take two lines; give every title that room so the five descriptions still line up */ @media (min-width: 1024px) and (max-width: 1199px) { .wn__title { min-height: 48px; } } @media (max-width: 1023px) { .wn { grid-template-columns: minmax(0, 1fr); border-bottom: 0; } .wn__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); } .wn__item + .wn__item { border-left: 0; } .wn__item > .ico { grid-row: 1 / span 3; margin-top: 2px; } .wn__item > :not(.ico) { grid-column: 2; } .wn__title { margin-top: 0; } .wn__text { max-width: 560px; } .wn__keys { padding-top: 12px; } .motion .wn__item[data-reveal]:nth-child(n) { transition-delay: 0ms; } } /* ---------- Figures: hairline drawings, each cropped to its drawing (one stroke weight at any size) ---------- */ .fig { display: block; width: 72%; height: 100%; max-height: 100%; overflow: visible; } .fig .l, .fig .l2, .fig .a { fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .fig .l { stroke: var(--fig-line); } .fig .l2 { stroke: var(--fig-line-2); } .fig .a { stroke: var(--fig-accent); stroke-width: 1.5; } .fig .l > *, .fig .l2 > *, .fig .a > * { vector-effect: non-scaling-stroke; } .fig .bgf { fill: var(--bg); } .fig .b { fill: var(--fig-bar); } .fig .b2 { fill: var(--fig-bar-2); } .fig .ab { fill: var(--fig-accent-bar); } .fig .as { fill: var(--fig-accent-soft); stroke: none; } .fig .ink { fill: var(--text); } .fig .inv { fill: none; stroke: var(--bg); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .fig .gl { fill: none; stroke: var(--fig-glyph); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--fig-glyph); } .fig .t { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; fill: var(--text-3); } .fig .ta { fill: var(--fig-accent); font-weight: 600; } .fig .tl { font-family: var(--font); font-size: 11px; } .fig .tr { font-family: var(--font); font-size: 11px; text-anchor: end; } .fig .fig-ring rect { opacity: 0; } .fig .fig-ring .r1 { opacity: 1; } .fig .fig-orbit { stroke-dasharray: 46 318; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 160px 104px; } .fig .fig-dash { stroke-dasharray: 3 7; opacity: 0.8; } .fig .fig-scan { fill: var(--fig-accent); opacity: 0; } /* ---------- Product shots (illustrative UI drawn in hairlines) ---------- */ .shot { margin: 0; } .shot__frame { position: relative; width: min(100%, 920px); margin-inline: auto; } .shot__cap { margin-top: 28px; text-align: center; } .win { position: relative; border-radius: 16px; background: var(--shot-bg); box-shadow: var(--shot-shadow); font-size: 13px; line-height: 18px; color: var(--text); text-align: left; } .win, .phone { --text-3: var(--shot-3); --icon-3: var(--shot-3); } .win .ico { width: 16px; height: 16px; } .win__top { display: flex; align-items: center; height: 48px; padding: 0 14px; border-bottom: 1px solid var(--shot-line); } .win__tabs { position: relative; display: flex; gap: 4px; min-width: 0; } .win__tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9999px; color: var(--text-3); white-space: nowrap; } .win__tab .ico { width: 14px; height: 14px; } .win__tab.is-on { background: var(--hover); color: var(--text); } .win__addr { display: flex; align-items: center; gap: 8px; height: 32px; margin: 12px 14px 0; padding: 0 12px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--shot-line); color: var(--text-3); font-size: 12px; } .win__addr .ico { width: 14px; height: 14px; } .win__body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); margin-top: 12px; border-top: 1px solid var(--shot-line); } .win__page { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 32px; } .win__h { display: block; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .win__h--lg { margin-bottom: 2px; font-size: 19px; line-height: 24px; letter-spacing: -0.02em; } .win__page .win__h:not(.win__h--lg) { margin-top: 8px; } .sk { display: block; height: 7px; width: 100%; border-radius: 9999px; background: var(--sk); } .sk--w40 { width: 40%; } .sk--w50 { width: 50%; } .sk--w60 { width: 60%; } .sk--w70 { width: 70%; } .sk--w80 { width: 80%; } .sk--w90 { width: 90%; } .sk--mark { position: relative; display: flex; align-items: center; gap: 4px; width: auto; height: auto; margin: -5px -8px; padding: 5px 8px; border-radius: 6px; background: var(--fig-accent-soft); } .sk--mark > .sk { background: var(--fig-accent-bar); } .sk--mark sup { font-size: 10px; line-height: 1; font-weight: 600; color: var(--shot-accent); top: -0.2em; } .win__media { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 16px; margin-block: 6px; } /* The page's picture: a ribbon of particles in the brand's colours, drawn as dotted strokes */ .win__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--shot-panel); box-shadow: inset 0 0 0 1px var(--shot-line); } .win__art { position: absolute; inset: 0; width: 100%; height: 100%; } .win__ribbon polyline { fill: none; stroke: url(#thumb-ink); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 3.4; } .win__art .th-1 { stop-color: var(--th-1); } .win__art .th-2 { stop-color: var(--th-2); } .win__art .th-3 { stop-color: var(--th-3); } .win__lines { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; } .win__panel { padding: 24px 20px 24px; border-left: 1px solid var(--shot-line); background: var(--shot-panel); border-bottom-right-radius: 16px; } .win__label { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-3); } .win__goal { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; text-wrap: pretty; } .win__plan { position: relative; margin-top: 18px; } .win__steps li, .os__trail li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; padding: 10px 0; border-top: 1px solid var(--shot-line); color: var(--text-2); } .win__steps .ico, .os__trail .ico { margin-top: 1px; color: var(--icon-3); } .win__steps .is-done .ico, .os__trail .is-done .ico { color: var(--text); } .win__steps .is-wait, .os__trail .is-wait { color: var(--text); } .win__steps .is-wait .ico, .os__trail .is-wait .ico { color: var(--accent); } .win__steps li:not(.is-done):not(.is-wait) { color: var(--text-3); } .win__steps em, .os__trail em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--shot-accent); } .win__btns { display: flex; gap: 6px; margin-top: 10px; } .win__btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line-heavy); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text); white-space: nowrap; } .win__btn--solid { position: relative; background: var(--solid); color: var(--solid-text); box-shadow: none; } /* Keynote notes on the shot: a ring on the element, a hairline out past the window edge, a label */ .pin { position: absolute; top: 50%; display: none; align-items: center; transform: translateY(-50%); pointer-events: none; z-index: 2; } .pin--l { right: 100%; flex-direction: row-reverse; } .pin--r { left: 100%; } .pin__wire { position: relative; width: calc(var(--reach, 16px) + 44px); height: 1px; background: var(--line-heavy); } .pin__wire::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--shot-bg); box-shadow: inset 0 0 0 1.5px var(--accent); } .pin--l .pin__wire::after { right: -3px; } .pin--r .pin__wire::after { left: -3px; } .pin__text { padding-inline: 10px; font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; } .win__tabs > .pin { --reach: 14px; } .sk--mark > .pin { --reach: 22px; } .win__plan > .pin { --reach: 20px; top: 40px; } .win__steps .is-wait > .pin { --reach: 20px; top: 22px; } .os__list--agents li:first-child > .pin { --reach: 16px; } .phone > .pin { --reach: 0px; top: 34%; } /* Agentic OS shot: a desktop window and a phone */ .shot--os .shot__frame { width: min(100%, 940px); padding-bottom: 44px; } .win--os { width: calc(100% - 132px); } .win__app { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } .win__icon { width: 16px; height: 16px; border-radius: 4px; } .os { display: grid; grid-template-columns: 200px minmax(0, 1fr); } .os__side { position: relative; padding: 18px 12px 24px; border-right: 1px solid var(--shot-line); background: var(--shot-panel); border-bottom-left-radius: 16px; } .os__side .win__label { padding: 0 8px; } .os__list { margin: 6px 0 18px; } .os__list li { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--text-2); } .os__list li.is-on { background: var(--hover); color: var(--text); } .os__main { padding: 22px 88px 24px 28px; } .os__main .win__goal { margin-bottom: 20px; } .os__trail { margin-top: 6px; } .os__trail b { font-weight: 600; color: var(--text); } .phone { position: absolute; right: 0; bottom: 0; width: 196px; aspect-ratio: 9 / 17.6; padding: 7px; border-radius: 34px; background: var(--shot-bg); box-shadow: var(--shot-shadow); } .phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; padding: 46px 14px 16px; border-radius: 27px; background: var(--shot-panel); box-shadow: inset 0 0 0 1px var(--shot-line); font-size: 12px; line-height: 16px; } .phone__island { position: absolute; top: 10px; left: 50%; width: 58px; height: 17px; transform: translateX(-50%); border-radius: 9999px; background: #0D0D0D; box-shadow: 0 0 0 1px var(--shot-line); } .phone__title { margin-top: 6px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; } .phone__meta { margin-top: 4px; color: var(--text-3); } .phone__card { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--shot-bg); box-shadow: inset 0 0 0 1px var(--shot-line); } .phone__card .sk { height: 6px; } .phone__note { display: flex; gap: 6px; margin-top: 12px; color: var(--text-3); font-size: 11px; line-height: 15px; } .phone__note .ico { width: 14px; height: 14px; flex: none; margin-top: 1px; } .phone .win__btn { width: 100%; height: 32px; margin-top: 8px; font-size: 13px; } .phone .win__btn--solid { margin-top: auto; } /* ---------- ROS: the new tab page (a real capture, its card fan stepping through), iPhone, Ask Rosanne ---------- */ .ntp { width: min(100%, 1000px); margin: clamp(40px, 4vw, 64px) auto 0; } .ntp__win { position: relative; } .ntp__base { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.4)) drop-shadow(0 22px 48px rgba(0, 0, 0, 0.12)); } /* The fan's box in the 2788 × 1748 capture: left 700, top 470, 1460 × 940 */ .ntp__fan { position: absolute; left: 25.108%; top: 26.888%; width: 52.367%; height: 53.776%; } .ntp__frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(0.985); transition: opacity 900ms var(--ease), transform 1200ms var(--ease); } .ntp__frame.is-on { opacity: 1; transform: none; } .ntp__cap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 28px; text-align: center; } .ntp__now { font-size: 14px; line-height: 20px; color: var(--text-3); } .ntp__now b { margin-right: 8px; font-weight: 500; color: var(--text); } .iphones { display: flex; justify-content: center; gap: clamp(20px, 5vw, 72px); margin-top: clamp(40px, 4vw, 64px); } .iphone { width: min(300px, 42vw); margin: 0; text-align: center; } .iphone__screen { padding: clamp(6px, 0.8vw, 10px); border-radius: clamp(30px, 4vw, 50px); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-heavy); } .iphone__screen img { display: block; width: 100%; height: auto; border-radius: clamp(24px, 3.3vw, 41px); } .iphone figcaption { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--text-3); } .ask { display: flex; flex-direction: column; align-items: center; text-align: center; } .ask__orb { position: relative; width: clamp(168px, 18vw, 240px); aspect-ratio: 1; } .ask__orb canvas, .ask__still { position: absolute; inset: 0; width: 100%; height: 100%; } .ask__orb.is-live .ask__still { display: none; } .ask__kicker { margin-top: 36px; } .ask__title { margin-top: 14px; } .ask__soon { margin-top: 16px; padding: 0 12px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line-heavy); font-size: 12px; line-height: 26px; color: var(--text-2); } .ask__lede { margin-top: 18px; max-width: 560px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: pretty; } .ask + .shot { margin-top: clamp(48px, 5vw, 80px); } .shot + .trio { margin-top: clamp(56px, 5vw, 88px); } /* ---------- Blog: the index (a featured post, then two), and each post ---------- Covers sit on a quiet surface with a hairline; their particle scene (blog.js) rests until hover. A post opens on its own hero (one layout per scene), then reads in a measured column beside a floating contents sidebar. */ .blog { padding-block: clamp(48px, 7vh, 88px) clamp(96px, 12vh, 160px); } .blog__head { display: flex; flex-direction: column; align-items: center; text-align: center; } .blog__title { margin-top: 16px; font-size: clamp(40px, 2.4vw + 22px, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; } .blog__lede { margin-top: 18px; max-width: 560px; font-size: 18px; line-height: 28px; color: var(--text-2); text-wrap: pretty; } .blog__list { margin-top: clamp(48px, 5vw, 80px); } .blog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--gap); } .blog__list > .blog__grid { margin-top: clamp(56px, 5vw, 88px); } .bcard__link { display: block; color: inherit; } .bcard__art { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--bart-bg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 250ms; } .bcard__link:hover .bcard__art, .bcard__link:focus-visible .bcard__art { box-shadow: inset 0 0 0 1px var(--line-heavy); } .bart { position: absolute; inset: 0; } .bart canvas { display: block; width: 100%; height: 100%; } /* Without script: a still, soft light where the scene would be */ .bart:not(.is-live) { background: radial-gradient(40% 50% at 50% 50%, var(--accent-line), transparent 70%); opacity: 0.5; } .bcard__text { margin-top: 22px; } .bcard__meta { display: flex; gap: 8px; font-size: 13px; line-height: 18px; color: var(--text-3); } .bcard__title { margin-top: 10px; font-size: clamp(24px, 0.5vw + 19px, 28px); /* 24px at least: the quiet grey half is large text */ line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; } .bcard__desc { margin-top: 10px; max-width: 560px; font-size: 16px; line-height: 24px; color: var(--text-2); text-wrap: pretty; } .bcard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; line-height: 20px; font-weight: 500; } .bcard__go .ico { width: 16px; height: 16px; transition: transform 300ms var(--ease); } .bcard__link:hover .bcard__go .ico { transform: translateX(3px); } .bcard--feature .bcard__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--gap) * 2); align-items: center; } .bcard--feature .bcard__art { aspect-ratio: 16 / 9.5; border-radius: 22px; } .bcard--feature .bcard__text { margin-top: 0; } .bcard--feature .bcard__title { font-size: clamp(30px, 1.4vw + 18px, 44px); line-height: 1.08; letter-spacing: -0.035em; } .bcard--feature .bcard__desc { font-size: 18px; line-height: 28px; } .post__hero { position: relative; } .post__art { position: relative; } .post__art .bart:not(.is-live) { opacity: 0.35; } .post__head { position: relative; z-index: 1; } .post__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--text-3); } .post__meta a { color: var(--text-2); transition: color 150ms; } .post__meta a:hover { color: var(--text); } .post__title { margin-top: 18px; font-size: clamp(40px, 2.8vw + 20px, 72px); line-height: 1.03; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; } .post__line { display: block; } .post__info { display: flex; gap: 8px; margin-top: 20px; font-size: 14px; line-height: 20px; color: var(--text-3); } /* ros: a centred keynote title, the mark gathering below it */ .post__hero--ros { display: flex; flex-direction: column; padding-top: clamp(48px, 7vh, 88px); } .post__hero--ros .post__head { display: flex; flex-direction: column; align-items: center; text-align: center; } .post__hero--ros .post__art { order: 2; height: clamp(300px, 34vw, 500px); margin-top: clamp(8px, 2vw, 24px); } /* aos: the title on the left, the flow of questions running in from behind it to the right */ .post__hero--aos .post__head { display: flex; flex-direction: column; justify-content: center; min-height: clamp(460px, 42vw, 640px); } .post__hero--aos .post__title { max-width: 11em; } .post__hero--aos .post__art { position: absolute; inset: 0 0 0 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); } /* edge: the device first, full width, and the title under it */ .post__hero--edge { padding-top: clamp(24px, 4vh, 48px); } .post__hero--edge .post__art { height: clamp(300px, 32vw, 480px); } .post__hero--edge .post__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(8px, 1.5vw, 20px); } .post__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: clamp(56px, 6vw, 104px); } .post__side { grid-column: 1 / span 3; position: sticky; top: var(--sticky-top); } .post__toc { position: relative; } .post__toc-label { font-size: 13px; line-height: 18px; color: var(--text); } .post__toc ol { position: relative; margin-top: 14px; border-left: 1px solid var(--line); } .post__toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; font-size: 13px; line-height: 18px; color: var(--text-3); transition: color 250ms; } .post__toc a:hover { color: var(--text-2); } .post__toc a[aria-current="true"] { color: var(--text); } /* The bar that glides to the section being read */ .post__toc-bar { position: absolute; left: 0; top: 0; width: 2px; height: 0; margin-left: -0.5px; border-radius: 2px; background: var(--accent); opacity: 0; transition: transform 500ms var(--ease), height 500ms var(--ease), opacity 300ms; } .post__toc-bar.is-on { opacity: 1; } .post__back { display: inline-flex; align-items: center; gap: 6px; margin-top: 32px; font-size: 13px; line-height: 18px; color: var(--text-2); transition: color 150ms; } .post__back:hover { color: var(--text); } .post__back .ico { width: 14px; height: 14px; transition: transform 300ms var(--ease); } .post__back:hover .ico { transform: translateX(-3px); } .post__toc-m { display: none; } .post__body { grid-column: 4 / span 6; } .post__lead { font-size: clamp(20px, 0.5vw + 16px, 24px); line-height: 1.45; letter-spacing: -0.012em; text-wrap: pretty; } .post__sec { margin-top: 56px; scroll-margin-top: 88px; } .post__sec h2 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; } .post__sec > * + * { margin-top: 16px; } .post__sec > h2 + * { margin-top: 14px; } .post__sec p, .post__list li { font-size: 17px; line-height: 28px; color: var(--text-2); text-wrap: pretty; } .post__sec b { font-weight: 500; color: var(--text); } .post__sec a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 150ms; } .post__sec a:hover { text-decoration-color: var(--accent); } .post__sec code { padding: 1px 5px; border-radius: 5px; background: var(--hover); font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; color: var(--text); } /* List items take a short hairline dash, never a dot */ .post__list li { position: relative; padding-left: 24px; } .post__list li + li { margin-top: 10px; } .post__list li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 10px; height: 1px; background: var(--text-3); } .post__sec > .post__quote { margin-block: 40px; padding-left: 22px; border-left: 2px solid var(--accent); } .post__quote p { font-size: clamp(20px, 0.6vw + 16px, 24px); line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; color: var(--text); } .post__sec > .post__fig { margin-block: 36px; } .post__fig figcaption { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--text-3); text-align: center; } .post__fig img { display: block; width: 100%; height: auto; } .post__fig--window .post__shot img { filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.4)) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.12)); } .post__phones { display: flex; justify-content: center; gap: clamp(16px, 4vw, 40px); } .post__phone { width: min(240px, 44%); text-align: center; } /* A phone that reads as a phone even when its screen is white: a hairline edge and a soft lift off the page */ .post__phone .post__shot { padding: 7px; border-radius: 42px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-heavy), 0 16px 36px rgba(0, 0, 0, 0.10); } .post__phone .post__shot img { border-radius: 35px; } .post__phone-cap { display: block; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-3); } .post__more { margin-top: clamp(96px, 10vw, 160px); padding-top: 48px; padding-bottom: clamp(96px, 12vh, 160px); border-top: 1px solid var(--line); } .post__more-title { margin-bottom: 36px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; } /* ---------- The Roves (Agentic OS): four heads, each named, each with a role and a line, then "Yours" ---------- */ .roves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px var(--gap); margin-top: clamp(40px, 4vw, 72px); } .rove { display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 20px; outline: none; } .rove:focus-visible { box-shadow: 0 0 0 2px var(--focus); } .rove__head { position: relative; width: min(220px, 82%); aspect-ratio: 1; } /* A soft pool of light on the floor under each head: in dark mode it lifts Langa's black cap off the page */ .rove__head::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, var(--rove-floor), transparent); } .rove__head img, .rove__head svg { position: relative; display: block; width: 100%; height: auto; transform-origin: 50% 90%; transition: transform 700ms var(--ease); } .rove:hover .rove__head img, .rove:focus-visible .rove__head img, .rove:hover .rove__head svg, .rove:focus-visible .rove__head svg { transform: translateY(-8px) rotate(var(--tilt, -3deg)); } .rove--yivi { --tilt: 3deg; } .rove--ayo { --tilt: -2.5deg; } .rove--langa { --tilt: 3.5deg; } /* Yours: an empty Rove in hairlines, with no floor under it; it takes the accent when you reach for it */ .rove--yours .rove__head { color: var(--text-3); transition: color 700ms var(--ease); } .rove--yours .rove__head::before { content: none; } .rove--yours:hover .rove__head, .rove--yours:focus-visible .rove__head { color: var(--accent); } .rove__head svg { height: 100%; } .rove__name { margin-top: 18px; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; } .rove__role { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--text-3); } .rove__line { margin-top: 12px; max-width: 220px; font-size: 15px; line-height: 22px; color: var(--text-2); text-wrap: balance; } @media (prefers-reduced-motion: reduce) { .rove__head img, .rove__head svg, .rove--yours .rove__head { transition: none; } .rove:hover .rove__head img, .rove:focus-visible .rove__head img, .rove:hover .rove__head svg, .rove:focus-visible .rove__head svg { transform: none; } } /* Below desktop the four share a row and Yours sits centred under them, one column wide */ @media (max-width: 1023px) { .roves { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rove--yours { grid-column: 1 / -1; justify-self: center; width: calc((100% - 3 * var(--gap)) / 4); } } /* ---------- Voice (Agentic OS): a mic and a waveform, the sentence you said, the steps it becomes ---------- Built from type and hairlines like the rest of the page: no box around it, one solid ink mic, grey bars. */ .voice { display: flex; flex-direction: column; align-items: center; text-align: center; margin: clamp(40px, 4vw, 64px) 0 clamp(64px, 6vw, 96px); } .voice__stage { display: flex; align-items: center; gap: 22px; width: min(620px, 100%); } .voice__mic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 9999px; background: var(--text); color: var(--bg); } .voice__mic .ico { width: 22px; height: 22px; } .voice__wave { flex: 1; min-width: 0; height: 72px; overflow: visible; } .voice__wave rect { fill: var(--fig-line); transform-box: fill-box; transform-origin: center; } .voice__said { margin-top: 36px; max-width: 22em; font-size: clamp(22px, 0.8vw + 15px, 30px); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; } .voice__said span { display: inline-block; } .voice__steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 10px; margin-top: 28px; font-size: 13px; line-height: 18px; color: var(--text-2); } .voice__steps li { display: inline-flex; align-items: center; gap: 8px; } .voice__steps li + li::before { content: ""; width: 28px; height: 1px; margin-inline: 14px; background: var(--line-heavy); } .voice__steps .ico { width: 16px; height: 16px; color: var(--icon-3); } .voice__steps .is-wait { color: var(--text); } .voice__steps .is-wait .ico { color: var(--accent); } .voice .shot__cap { margin-top: 22px; } /* ---------- Calls (Agentic OS): one illustrative call in type and hairlines, then a quiet line on disclosure ---------- */ .call { width: min(680px, 100%); margin: clamp(40px, 4vw, 64px) auto 0; } .call__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .call__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--text); color: var(--bg); } .call__icon .ico { width: 18px; height: 18px; } .call__who { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 20px; } .call__who b { font-weight: 500; } .call__who span { font-size: 13px; line-height: 18px; color: var(--text-3); } .call__time { margin-left: auto; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-3); } .call__lines { padding-block: 10px; } .call__line { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; padding-block: 12px; } .call__by { font-size: 13px; line-height: 24px; color: var(--text-3); } .call__line p { font-size: 16px; line-height: 24px; color: var(--text-2); text-wrap: pretty; } .call__line--agent .call__by { color: var(--accent); } .call__line--agent p { color: var(--text); } .call__sum { display: flex; align-items: flex-start; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; color: var(--text-2); } .call__sum .ico { flex: none; width: 16px; height: 16px; margin-top: 2.5px; color: var(--accent); } .call__sum b { margin-right: 6px; font-weight: 500; color: var(--text); } .call__note { margin-top: 8px; padding-left: 26px; font-size: 12px; line-height: 16px; color: var(--text-3); } .call .shot__cap { margin-top: 28px; } .calls__fine { max-width: 520px; margin: 24px auto 0; text-align: center; font-size: 13px; line-height: 20px; color: var(--text-3); text-wrap: balance; } /* The OS window notes where the outcome came from */ .win__label--via { display: flex; align-items: center; gap: 10px; } .win__via { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; letter-spacing: 0; color: var(--text-3); } .win__via .ico { width: 12px; height: 12px; color: var(--accent); } /* ---------- Download: the app icon with its rings, the page head, the four devices on the floor ---------- */ .stage--dl { padding-top: clamp(104px, 13vh, 136px); } .dl-mark { position: relative; z-index: 0; width: 128px; height: 128px; margin-bottom: 22px; } .dl-mark .field { position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(100% + 240px); height: calc(100% + 240px); transform: translate(-50%, -50%); } .dl-mark__icon { width: 100%; height: 100%; filter: var(--mark-shadow); } .stage--dl .stage__title { margin-top: 14px; } .stage__rig--dl { --art-h: 180px; display: block; margin-top: clamp(36px, 5vh, 56px); padding-bottom: 0; } .stage__rig--dl .stage__floor { bottom: auto; height: calc(var(--art-h) + 6px); } .stage__rig--dl .stage__core { width: auto; aspect-ratio: auto; } .devices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); } .device { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-margin-top: 80px; } .device__art { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; height: var(--art-h); } .dev { display: block; height: 100%; width: auto; max-width: 100%; overflow: visible; } .device__shadow { position: absolute; left: 50%; bottom: 10px; z-index: -1; width: 72%; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--hx-floor-1), transparent); } .device--soon .device__shadow { opacity: 0.5; } .d-fill { fill: var(--bg); stroke: none; } .d-body { fill: var(--bg); stroke: var(--dev-line); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .d-screen { fill: var(--dev-screen); stroke: var(--dev-line); stroke-width: 1; stroke-opacity: 0.5; vector-effect: non-scaling-stroke; } .d-glow { fill: var(--dev-glow); stroke: none; } .d-line { fill: none; stroke: var(--dev-line); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; } .d-ink { fill: var(--dev-line); } .device--soon .d-body, .device--soon .d-screen, .device--soon .d-line { stroke: var(--dev-soon); stroke-dasharray: 3 4; stroke-opacity: 1; } .device--soon .d-screen { fill: var(--bg); } .device__info { display: flex; flex-direction: column; align-items: center; margin-top: 28px; } .device__name { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; } .device .device-tag { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); } .device__state { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text-2); } .device__state .ico { width: 16px; height: 16px; color: var(--accent); } .device--soon .device__state { color: var(--text-3); } .device--soon .device__state .ico { color: var(--icon-3); } .device__action { margin-top: 20px; } /* Under the Mac button: the version and release links, then the fallback (it confirms the download once it starts) */ .device__meta, .device__alt { max-width: 100%; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--text-3); text-wrap: balance; } .device__alt { margin-top: 4px; } .device__meta a, .device__alt a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-heavy); text-underline-offset: 3px; transition: color 150ms, text-decoration-color 150ms; } .device__meta a:hover, .device__alt a:hover { color: var(--text); text-decoration-color: var(--accent); } .device__alt.is-started { color: var(--text-2); } .dl-note { margin-top: 28px; text-align: center; font-size: 13px; line-height: 18px; color: var(--text-3); } /* ---------- About ---------- */ /* Mission: four short lines, two by two, between hairlines */ .tenets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-bottom: 1px solid var(--line); } .tenets li { padding-block: 26px 30px; border-top: 1px solid var(--line); font-size: clamp(18px, 0.35vw + 15px, 22px); line-height: 1.45; letter-spacing: -0.012em; color: var(--text-2); text-wrap: pretty; } .tenets b { font-weight: 600; color: var(--text); } /* Vision: one statement set, large, across the page; words brighten as they cross the reading line (pages.js) */ .vset { margin: 0; } .vset blockquote p { max-width: 23em; font-size: clamp(28px, 2vw + 12px, 60px); line-height: 1.18; font-weight: 500; letter-spacing: -0.03em; text-wrap: pretty; } .vset figcaption { display: flex; align-items: center; gap: 12px; margin-top: 32px; font-size: 13px; line-height: 18px; color: var(--text-3); } .vset figcaption::before { content: ""; width: 24px; height: 1px; background: var(--line-heavy); } .vw { color: var(--hm-dim); transition: color 400ms var(--ease); } .vw.is-lit { color: var(--text); } /* Humans + machines: two columns across the full grid, the plus between them */ .pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 12px; } .pair__col:first-child { grid-column: 1 / span 5; } .pair__plus { grid-column: 6 / span 2; } .pair__col:last-child { grid-column: 8 / -1; } .pair__h { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; } .pair__col:first-child { text-align: right; } .pair__col:first-child .pair__h { justify-content: flex-start; flex-direction: row-reverse; } .pair__list { border-bottom: 1px solid var(--line); } .pair__list li { padding-block: 16px; border-top: 1px solid var(--line); font-size: 17px; line-height: 26px; color: var(--text-2); } .pair__plus { position: relative; display: grid; place-items: center; } .pair__plus span { position: relative; width: 44px; height: 44px; } .pair__plus span::before, .pair__plus span::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent); border-radius: 1px; } .pair__plus span::before { width: 44px; height: 1.5px; transform: translate(-50%, -50%); } .pair__plus span::after { width: 1.5px; height: 44px; transform: translate(-50%, -50%); } /* Partners: one still row, each logo in its own cell between hairlines */ .logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); } .logos li { display: grid; place-items: center; min-height: clamp(96px, 5vw + 48px, 144px); background: var(--bg); } .logos .partner { height: 30px; background-color: var(--marquee-base); transition: background-color 300ms var(--ease); } .logos li:hover .partner { background-color: var(--marquee-lit); } .logos .partner--sisu { width: 86px; } .logos .partner--skylake { width: 100px; } .logos .partner--kalon { width: 83px; } .logos .partner--openai4africa { width: 97px; } .logos .partner--vadersoft { width: 112px; } .pull { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; padding-top: 40px; border-top: 1px solid var(--line); } .pull blockquote { grid-column: 1 / span 8; } .pull blockquote p { font-size: clamp(32px, 2.2vw + 14px, 58px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; } .pull blockquote span { display: block; } .pull__quiet { color: var(--hm-quiet); } .pull figcaption { grid-column: 9 / -1; padding-bottom: 6px; } .pull__by { display: block; font-size: 13px; line-height: 18px; color: var(--text-3); } .pull__text { display: block; margin-top: 8px; max-width: 380px; font-size: 15px; line-height: 22px; color: var(--text-2); } /* ---------- Events: the ticket ---------- */ .ticket-wrap { filter: var(--ticket-edge); } .ticket { --stub: 92px; --notch: 12px; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) var(--stub); max-width: 1200px; margin-inline: auto; border-radius: 24px; background: var(--ticket-bg); overflow: hidden; -webkit-mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; } .ticket__art { position: relative; min-height: 360px; } /* The crop keeps the poster's monogram and words whole at every width */ .ticket__art picture, .ticket__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } .ticket__main { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 3.6vw, 60px); } .ticket__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--text-2); } .ticket__kicker .ico { width: 16px; height: 16px; color: var(--text); } .ticket__title { margin-top: 18px; font-size: clamp(34px, 2.2vw + 14px, 56px); line-height: 1.02; font-weight: 600; letter-spacing: -0.04em; } .ticket__theme { margin-top: 18px; max-width: 540px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: pretty; } .ticket__facts { display: flex; flex-wrap: wrap; gap: 12px 44px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .ticket__facts dt { font-size: 12px; line-height: 16px; color: var(--text-3); } .ticket__facts dd { margin: 4px 0 0; font-size: 15px; line-height: 22px; font-weight: 500; } .ticket .source { margin-top: 20px; } .ticket__stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding-block: 28px; border-left: 1px dashed var(--line-heavy); } .ticket__stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .ticket__stub .ticket__stub-mark { color: var(--text); font-weight: 600; } /* ---------- Contact: every channel across the page ---------- */ .channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; } .channel { display: flex; flex-direction: column; align-items: flex-start; padding-top: 20px; border-top: 1px solid var(--line); } .channel__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; line-height: 18px; color: var(--text-3); } .channel__label .ico { width: 16px; height: 16px; color: var(--text); } .channel__link { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding-block: 2px; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.015em; overflow-wrap: anywhere; } .channel__link > span:first-child { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 350ms var(--ease); } .channel__link:hover > span:first-child, .channel__link:focus-visible > span:first-child { background-size: 100% 1px; } .channel__link .ico { width: 16px; height: 16px; flex: none; color: var(--icon-3); transition: transform 300ms var(--ease), color 200ms; } .channel__link:hover .ico { color: var(--text); transform: translateX(2px); } .channel__text { margin-top: 12px; max-width: 300px; font-size: 14px; line-height: 20px; color: var(--text-2); } .page--sub > .section:last-child { margin-bottom: clamp(96px, 12vh, 144px); } /* ---------- Legal ---------- */ .legal { padding-block: clamp(48px, 7vh, 88px) clamp(96px, 12vh, 144px); } .legal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; } .legal__head { grid-column: 1 / span 4; position: sticky; top: var(--sticky-top); } .legal__icon { width: 56px; height: 56px; } .legal__title { margin-top: 24px; font-size: clamp(32px, 1.3vw + 18px, 44px); line-height: 1.06; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; } .legal__line { display: block; } .legal__date { margin-top: 14px; } .legal__switch { display: inline-flex; margin-top: 28px; padding: 3px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--line); } .legal__switch a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 9999px; font-size: 13px; line-height: 18px; color: var(--text-2); transition: background-color 150ms, color 150ms; } .legal__switch a:hover { color: var(--text); } .legal__switch a[aria-current="page"] { background: var(--hover); color: var(--text); } .legal__body { grid-column: 6 / -1; padding-top: 80px; } .legal__lead { max-width: 760px; font-size: clamp(20px, 0.5vw + 15px, 24px); line-height: 1.45; letter-spacing: -0.012em; text-wrap: pretty; } /* Contents: a quiet list in the sticky column, the current section marked with a short accent rule */ .legal__toc { margin-top: 36px; } .legal__toc summary { display: flex; align-items: center; gap: 8px; width: fit-content; font-size: 13px; line-height: 18px; color: var(--text); cursor: pointer; list-style: none; } .legal__toc summary::-webkit-details-marker { display: none; } .legal__toc-count { color: var(--text-3); } .legal__toc summary .ico { width: 16px; height: 16px; color: var(--text-3); transition: transform 250ms var(--ease); } .legal__toc[open] summary .ico { transform: rotate(180deg); } .legal__toc ol { margin-top: 14px; border-left: 1px solid var(--line); } .legal__toc a { display: flex; gap: 12px; margin-left: -1px; padding: 5px 0 5px 16px; border-left: 1px solid transparent; font-size: 13px; line-height: 18px; color: var(--text-2); transition: color 150ms, border-color 250ms var(--ease); } .legal__toc a:hover { color: var(--text); } .legal__toc a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); } .legal__toc-n { flex: none; width: 18px; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-3); } @media (min-width: 1024px) { /* The column can be taller than the window on long documents: let it scroll on its own */ .legal__head { max-height: calc(100vh - var(--sticky-top) - 24px); overflow-y: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; } .legal__head::-webkit-scrollbar { display: none; } } /* The document: numbered sections divided by hairlines, the number in a narrow gutter */ .legal__doc { margin-top: 56px; border-bottom: 1px solid var(--line); } .lsec { padding-block: 32px 36px; border-top: 1px solid var(--line); scroll-margin-top: 64px; } .lsec__h, .lsec__body { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; } .lsec__n { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 28px; font-weight: 400; color: var(--text-3); } .lsec__h > span:last-child { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; } .lsec__body { margin-top: 12px; } .lsec__body > * { grid-column: 2; max-width: 680px; } .lsec__body > * + * { margin-top: 14px; } .lsec__body p, .lsec__list li { font-size: 16px; line-height: 26px; color: var(--text-2); text-wrap: pretty; } .lsec__body b { font-weight: 500; color: var(--text); } .lsec__body a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 150ms; } .lsec__body a:hover { text-decoration-color: var(--accent); } .lsec__body > .lsec__h3 { margin-top: 26px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); } .lsec__body > .lsec__h3:first-child { margin-top: 2px; } .lsec__body > .lsec__h3 + * { margin-top: 8px; } /* List items take a short hairline dash, never a dot */ .lsec__list li { position: relative; padding-left: 24px; } .lsec__list li + li { margin-top: 8px; } .lsec__list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 1px; background: var(--text-3); } .lsec__table { max-width: 760px !important; } .lsec__table table { width: 100%; border-collapse: collapse; } .lsec__table thead th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-heavy); font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-3); text-align: left; } .lsec__table tbody th, .lsec__table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 21px; text-align: left; vertical-align: top; } .lsec__table tbody tr:last-child > * { border-bottom: 0; } .lsec__table tbody th { width: 26%; font-weight: 500; color: var(--text); } .lsec__table td { color: var(--text-2); } .lsec__table td:last-child { width: 28%; } .legal__contact { margin-top: 56px; } .legal__h { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-3); } .legal__contact p { margin-top: 8px; color: var(--text-2); } .legal__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.015em; } .legal__mail > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 350ms var(--ease); } .legal__mail:hover > span, .legal__mail:focus-visible > span { background-size: 100% 1px; } .legal__mail .ico { width: 18px; height: 18px; transition: transform 300ms var(--ease); } .legal__mail:hover .ico { transform: translateX(3px); } /* ---------- FAQ: the home page's accordion (mirrors home.css) ---------- */ .qa-list { border-bottom: 1px solid var(--line); } .qa2 { border-top: 1px solid var(--line); interpolate-size: allow-keywords; } .qa2 summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; border-radius: 8px; font-size: 17px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; } .qa2 summary::-webkit-details-marker { display: none; } .qa2__icon { color: var(--text-2); transition: transform 350ms var(--ease), color 150ms; } .qa2 summary:hover .qa2__icon { color: var(--text); } .qa2__v { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 350ms var(--ease); } .qa2[open] .qa2__icon { transform: rotate(180deg); } .qa2[open] .qa2__v { transform: scaleY(0); } .qa2__a { padding: 0 56px 26px 0; } .qa2__a p { max-width: 680px; font-size: 16px; line-height: 26px; color: var(--text-2); } .qa2__a .inline-link { color: var(--text); } .qa2::details-content { block-size: 0; overflow: hidden; transition: block-size 420ms var(--ease), content-visibility 420ms allow-discrete; } .qa2[open]::details-content { block-size: auto; } .split__head .hm-title { margin-top: 14px; } .split__head .split__text { margin-top: 16px; } /* ---------- Coda: the way on, and the page's visual once more, small, on the floor ---------- */ .coda { --floor-h: clamp(230px, 11vw + 120px, 340px); position: relative; isolation: isolate; margin-top: var(--hm-gap); padding-bottom: calc(var(--floor-h) + 24px); overflow: clip; text-align: center; } @supports not (overflow: clip) { .coda { overflow: hidden; } } .coda__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; } .coda__title { max-width: 15em; font-size: clamp(34px, 2.1vw + 16px, 56px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; } .coda__text { margin-top: 16px; max-width: 520px; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: balance; } .coda__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 28px; } .coda__actions:empty { display: none; } .coda__stage { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor-h); pointer-events: none; } .coda__floor { position: absolute; inset: 0; -webkit-mask: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); } .coda__floor::before { top: 50%; } .coda__core { position: absolute; left: 50%; bottom: 16%; width: var(--mw); aspect-ratio: var(--mar, 1); transform: translateX(-50%); } .coda--ros { --mw: clamp(220px, 12vw + 120px, 330px); --mar: 1.6; } .coda--os { --mw: clamp(160px, 8vw + 80px, 220px); } .coda--about { --mw: clamp(170px, 8vw + 84px, 230px); } .coda--events { --mw: clamp(150px, 6vw + 90px, 200px); } .coda--os .stage__shadow { display: none; } .coda--about .stage__shadow { bottom: 4%; width: 50%; } .coda--events .stage__shadow { bottom: 6%; width: 50%; } /* ---------- 404 ---------- */ .page--404 .stage { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 44px); padding-bottom: 24px; } /* ---------- Still visuals: without script (or if a canvas cannot start), each visual keeps a dotted likeness ---------- */ .field::before, .field::after { content: ""; position: absolute; display: none; pointer-events: none; } .no-js .stage .field::before, .no-js .stage .field::after, .stage .field.is-static::before, .stage .field.is-static::after, .no-js .coda .field::before, .no-js .coda .field::after, .coda .field.is-static::before, .coda .field.is-static::after { display: block; } .field--browser::before { inset: 2% 1.5%; border: 2px dotted var(--fb-dot); border-radius: 22px; /* dotted text rows inside the window, so the still reads as a page, not an empty frame */ padding: 21% 7% 9% 6%; box-sizing: border-box; background: radial-gradient(circle, var(--fb-dot) 1.1px, transparent 1.6px) 0 0 / 7px 20px content-box; } .field--browser::after { left: 4.5%; right: 4.5%; top: 21%; height: 7%; border: 2px dotted var(--fb-dot); border-radius: 9999px; } .field--agents::before { inset: 11%; background: radial-gradient(circle, var(--fb-dot) 1.2px, transparent 1.7px) 0 0 / 7px 7px; -webkit-mask: linear-gradient(90deg, #000 45%, transparent 45%, transparent 55%, #000 55%), linear-gradient(#000 45%, transparent 45%, transparent 55%, #000 55%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 45%, transparent 45%, transparent 55%, #000 55%) intersect, linear-gradient(#000 45%, transparent 45%, transparent 55%, #000 55%); } .field--globe::before { inset: 13%; border-radius: 50%; background: radial-gradient(circle, var(--fb-dot) 1.1px, transparent 1.6px) 0 0 / 8px 8px; -webkit-mask: radial-gradient(circle, #000 69%, transparent 70.5%); mask: radial-gradient(circle, #000 69%, transparent 70.5%); opacity: 0.8; } .field--calendar::before { content: "1"; left: 68.5%; top: 21%; width: 11%; aspect-ratio: 1; display: none; place-items: center; border: 1.5px solid var(--fb-dot); border-radius: 50%; font-size: 14px; color: var(--text-2); } .no-js .stage .field--calendar::before, .stage .field--calendar.is-static::before { display: grid; } .field--date::before { inset: 14%; border: 2px dotted var(--fb-dot); border-radius: 50%; } .field--signal::before { inset: 0; background: repeating-radial-gradient(circle at 50% 46%, transparent 0 34px, var(--fb-dot) 34px 35.5px, transparent 35.5px 56px); -webkit-mask: radial-gradient(circle at 50% 46%, #000 20%, transparent 62%); mask: radial-gradient(circle at 50% 46%, #000 20%, transparent 62%); opacity: 0.7; } .field--notfound::before { content: "404"; inset: 0; display: none; place-items: center; font-size: clamp(80px, 12vw, 180px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--fb-dot); } .no-js .stage .field--notfound::before, .stage .field--notfound.is-static::before { display: grid; } /* ---------- Motion (only when allowed and the page script is alive) ---------- */ @media (prefers-reduced-motion: no-preference) { /* Voice: bars breathe and the sentence arrives word by word, only while the figure is on screen */ .is-playing .voice__wave rect { animation: voice-bar 1.2s ease-in-out infinite alternate; } .is-playing .voice__said span { animation: voice-word 520ms var(--ease) both; animation-delay: calc(var(--i) * 110ms + 250ms); } /* Calls: the conversation plays out line by line, then the summary */ .is-playing .call__line, .is-playing .call__sum { animation: voice-word 600ms var(--ease) both; } .is-playing .call__line:nth-child(2) { animation-delay: 700ms; } .is-playing .call__line:nth-child(3) { animation-delay: 1400ms; } .is-playing .call__line:nth-child(4) { animation-delay: 2100ms; } .is-playing .call__sum { animation-delay: 2800ms; } .is-playing .fig-wave rect { transform-box: fill-box; transform-origin: center; animation: voice-bar 1.1s ease-in-out infinite alternate; } .motion .stage__line { animation: hero-settle 1400ms cubic-bezier(0.16, 1, 0.3, 1) both; } .motion .stage__line + .stage__line { animation-delay: 140ms; } .motion .stage__in { animation: hero-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; } .motion .stage__sub.stage__in { animation-delay: 360ms; } .motion .stage__actions.stage__in { animation-delay: 460ms; } .motion .dl-note.stage__in { animation-delay: 900ms; } .motion .stage__rig { animation: stage-rise 1500ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; } .motion .anno__wire { animation: wire-in 900ms cubic-bezier(0.65, 0, 0.35, 1) both; transform-origin: left center; } .motion .anno--l .anno__wire { transform-origin: right center; } .motion .anno__pin { animation: pin-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both; } .motion .anno__text { animation: label-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .motion .anno--1 > * { animation-delay: 900ms; } .motion .anno--1 .anno__text { animation-delay: 1300ms; } .motion .anno--2 > * { animation-delay: 1030ms; } .motion .anno--2 .anno__text { animation-delay: 1430ms; } .motion .anno--3 > * { animation-delay: 1160ms; } .motion .anno--3 .anno__text { animation-delay: 1560ms; } .motion .anno--4 > * { animation-delay: 1290ms; } .motion .anno--4 .anno__text { animation-delay: 1690ms; } .motion .device { animation: stage-rise 1200ms cubic-bezier(0.16, 1, 0.3, 1) both; } .motion .device:nth-child(1) { animation-delay: 420ms; } .motion .device:nth-child(2) { animation-delay: 500ms; } .motion .device:nth-child(3) { animation-delay: 580ms; } .motion .device:nth-child(4) { animation-delay: 660ms; } .anno.is-active .anno__wire::after { animation: wire-signal 1800ms cubic-bezier(0.45, 0, 0.2, 1) 200ms both; } .anno--l.is-active .anno__wire::after { animation-name: wire-signal-rev; } .anno.is-active .anno__pin::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--accent); animation: pin-ping 1800ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both; } /* Section heads settle the way the home page's do: rise, and come into focus */ .motion .hm-head[data-reveal] { filter: blur(6px); transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms cubic-bezier(0.16, 1, 0.3, 1); transform: translateY(20px); } .motion .hm-head[data-reveal].is-in { filter: none; transform: none; } /* Figures play while on screen */ .is-playing .fig-flow { stroke-dasharray: 4 5; animation: fig-dashflow 900ms linear infinite; } .is-playing .fig-seq > g { animation: fig-seq 4.8s var(--ease) infinite both; } .is-playing .fig-seq > .s2 { animation-delay: 0.35s; } .is-playing .fig-seq > .s3 { animation-delay: 0.7s; } .is-playing .fig-tab { animation: fig-tab 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; } .is-playing .fig-scan { animation: fig-scan 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite; } .is-playing .fig-draw { stroke-dasharray: 120; animation: fig-draw 4s var(--ease) infinite; } .is-playing .fig-pop { animation: fig-pop 4s var(--ease) infinite; } .is-playing .fig-fill { transform-box: fill-box; transform-origin: left center; animation: fig-fill 5s var(--ease) infinite both; } .is-playing .fig-fill.f2 { animation-name: fig-fill2; } .is-playing .fig-tick { stroke-dasharray: 14; animation: fig-tick 5s var(--ease) infinite both; } .is-playing .fig-send { transform-box: fill-box; transform-origin: center; animation: fig-send 5s var(--ease) infinite both; } .is-playing .fig-ring rect { animation: fig-ring 6s steps(1, end) infinite; } .is-playing .fig-ring .r2 { animation-delay: -4.5s; } .is-playing .fig-ring .r3 { animation-delay: -3s; } .is-playing .fig-ring .r4 { animation-delay: -1.5s; } .is-playing .fig-orbit { animation: fig-orbit 4.2s linear infinite; } .is-playing .fig-dash { animation: fig-dashflow2 1.4s linear infinite; } .is-playing .fig-hop { transform-box: fill-box; transform-origin: center; animation: fig-hop 5s cubic-bezier(0.65, 0, 0.35, 1) infinite; } .is-paused * { animation-play-state: paused !important; } } @keyframes stage-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes fig-dashflow { to { stroke-dashoffset: -18; } } @keyframes fig-dashflow2 { to { stroke-dashoffset: -20; } } @keyframes fig-seq { 0%, 6% { opacity: 0.18; } 16%, 86% { opacity: 1; } 96%, 100% { opacity: 0.18; } } @keyframes fig-tab { 0%, 26% { transform: translateX(0); } 33%, 59% { transform: translateX(60px); } 66%, 92% { transform: translateX(120px); } 100% { transform: translateX(0); } } @keyframes fig-scan { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(196px); opacity: 0; } } @keyframes fig-draw { 0% { stroke-dashoffset: 120; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } } @keyframes fig-pop { 0%, 22% { opacity: 0.25; transform: translateY(4px); } 38%, 86% { opacity: 1; transform: none; } 100% { opacity: 0.25; transform: translateY(4px); } } @keyframes fig-fill { 0%, 6% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } } @keyframes fig-fill2 { 0%, 22% { transform: scaleX(0); } 38%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } } @keyframes fig-tick { 0%, 42% { stroke-dashoffset: 14; } 52%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 14; } } @keyframes fig-send { 0%, 56% { opacity: 0.35; transform: scale(0.96); } 64%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0.35; transform: scale(0.96); } } @keyframes fig-ring { 0% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes fig-orbit { to { stroke-dashoffset: -364; } } @keyframes voice-bar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } } @keyframes voice-word { from { opacity: 0.18; filter: blur(3px); } to { opacity: 1; filter: none; } } @keyframes fig-hop { 0%, 18% { transform: translate(0, 0); } 42%, 68% { transform: translate(111px, -19px) scale(0.8); } 92%, 100% { transform: translate(0, 0); } } /* ---------- Responsive ---------- */ @media (min-width: 1360px) { .pin { display: flex; } } @media (max-width: 1199px) { .post__side { grid-column: 1 / span 3; } .post__body { grid-column: 4 / -1; } .anno__note { display: none; } .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal__head { grid-column: 1 / span 5; } .legal__body { grid-column: 6 / -1; } } /* Annotations become one quiet row of steps under the visual */ @media (max-width: 1023px) { .stage__rig { --cw: min(420px, 82vw); } .stage__rig--ros { --cw: min(620px, 88vw); } .stage__rig--contact { --cw: min(520px, 88vw); } .stage__rig--notfound { --cw: min(460px, 86vw); } .annos { grid-area: 2 / 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; width: auto; aspect-ratio: auto; margin-top: 28px; } .stage__rig:has(.annos) .stage__floor { bottom: calc(clamp(36px, 6vh, 64px) + 48px); } .anno, .anno--l, .anno--r { position: static; transform: none; flex-direction: row; gap: 8px; } .anno__wire, .anno__text::before { display: none; } /* No dot markers in the step row: the active step is marked by ink and a short accent underline */ .anno__pin { display: none; } .anno__name { text-decoration: underline 1.5px transparent; text-underline-offset: 7px; transition: color 500ms var(--ease), text-decoration-color 500ms var(--ease); } .anno.is-active .anno__name { text-decoration-color: var(--accent); } .anno__text, .anno--l .anno__text { padding: 0; text-align: left; justify-items: start; } .pull blockquote, .pull figcaption { grid-column: 1 / -1; } .legal__head { grid-column: 1 / -1; position: static; } /* Blog: one column; the contents fold into a slim bar that stays under the header while you read */ .bcard--feature .bcard__link { grid-template-columns: minmax(0, 1fr); } .bcard--feature .bcard__text { margin-top: 22px; } .post__side { display: none; } .post__body { grid-column: 1 / -1; max-width: 680px; width: 100%; margin-inline: auto; } .post__sec { scroll-margin-top: 116px; } /* clears the header and the sticky contents bar when you jump to a section */ .post__toc-m { display: block; grid-column: 1 / -1; position: sticky; top: calc(44px + env(safe-area-inset-top, 0px)); z-index: 5; max-width: 680px; width: 100%; margin: 0 auto 8px; background: var(--bg); border-bottom: 1px solid var(--line); } .post__toc-m summary { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 14px; line-height: 20px; list-style: none; cursor: pointer; } .post__toc-m summary::-webkit-details-marker { display: none; } .post__toc-m-label { flex: none; font-size: 12px; color: var(--text-3); } .post__toc-m-now { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post__toc-m summary .ico { width: 16px; height: 16px; color: var(--text-3); transition: transform 250ms var(--ease); } .post__toc-m[open] summary .ico { transform: rotate(180deg); } .post__toc-m ol { padding: 4px 0 14px; } .post__toc-m a { display: block; padding: 8px 0; font-size: 14px; line-height: 20px; color: var(--text-2); } .post__toc-m a[aria-current="true"] { color: var(--text); } .post__hero--aos .post__art { inset: auto 0 0 0; height: 46%; -webkit-mask-image: none; mask-image: none; opacity: 0.9; } .post__hero--aos .post__head { justify-content: flex-start; padding-top: clamp(40px, 6vh, 72px); padding-bottom: 48%; min-height: 0; } .legal__body { grid-column: 1 / -1; padding-top: 48px; } /* Contents fold into one hairline row that opens on tap */ .legal__toc { margin-top: 28px; border-block: 1px solid var(--line); } .legal__toc summary { justify-content: space-between; width: 100%; min-height: 48px; } .legal__toc summary .ico { margin-left: auto; } .legal__toc ol { margin: 0 0 16px; } .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ticket { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 72px; --stub: 72px; } .shot--os .shot__frame { padding-bottom: 0; } .win--os { width: 100%; } .phone { display: none; } .os__main { padding-right: 28px; } .pair__col:first-child { grid-column: 1 / span 5; } .pair__plus { grid-column: 6 / span 2; } .pair__col:last-child { grid-column: 8 / -1; } } @media (max-width: 899px) { .trio { grid-template-columns: minmax(0, 1fr); } .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; } /* Two rows of devices: each stands on its own shelf line instead of one floor */ .stage__rig--dl .stage__floor { display: none; } .device__art::after { content: ""; position: absolute; bottom: 0; height: 1px; pointer-events: none; } .device:nth-child(odd) .device__art::after { left: 0; right: calc(var(--gap) / -2); background: linear-gradient(90deg, transparent, var(--line-heavy) 35%); } .device:nth-child(even) .device__art::after { left: calc(var(--gap) / -2); right: 0; background: linear-gradient(90deg, var(--line-heavy) 65%, transparent); } .device__shadow { bottom: 0; } .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logos li:nth-child(4) { grid-column: 1 / span 2; } .logos li:nth-child(5) { grid-column: 3; } .tenets { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .page--sub .section { margin-top: var(--hm-gap); } .stage__title { max-width: 12em; } .hm-head { margin-bottom: 40px; } .win__body { grid-template-columns: minmax(0, 1fr); } .win__page { display: none; } .win__panel { border-left: 0; border-bottom-left-radius: 16px; } .win__tab:not(.is-on) { display: none; } .os { grid-template-columns: minmax(0, 1fr); } .os__side { display: none; } .os__main { padding: 20px; } .ticket { --ny: calc(100% - 60px); grid-template-columns: minmax(0, 1fr); -webkit-mask: radial-gradient(circle at 0 var(--ny), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% var(--ny), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 var(--ny), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% var(--ny), transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; } .ticket__art { min-height: 0; aspect-ratio: 692 / 568; } .ticket__main { padding: 28px 24px 32px; } .ticket__stub { flex-direction: row; justify-content: space-between; height: 60px; padding: 0 24px; border-left: 0; border-top: 1px dashed var(--line-heavy); } .ticket__stub span { writing-mode: horizontal-tb; transform: none; } .pair { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); } .pair__col:first-child, .pair__plus, .pair__col:last-child { grid-column: auto; } } @media (max-width: 599px) { .blog__grid { grid-template-columns: minmax(0, 1fr); } .roves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } .rove--yours { width: calc(50% - 8px); } .post__sec p, .post__list li { font-size: 16px; line-height: 26px; } .stage__sub { font-size: 16px; line-height: 24px; } .stage__actions { gap: 12px 20px; margin-top: 22px; } .stage--dl .stage__title { font-size: clamp(26px, 7.8vw, 36px); } .dl-mark { width: 104px; height: 104px; margin-bottom: 18px; } .stage__rig--dl { --art-h: 132px; } .feats { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } .feat__fig { aspect-ratio: auto; padding-top: 8px; } .feat__fig .fig { width: 66%; height: auto; } .channels { grid-template-columns: minmax(0, 1fr); } .device__name { font-size: 18px; line-height: 26px; } .device__action { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .device__action .btn { height: auto; min-height: 40px; max-width: 100%; padding: 8px 16px; font-size: 14px; line-height: 18px; white-space: normal; text-align: center; } /* The platform is named right above the button, so the long tail of the label is kept for screen readers only */ .dev-more { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pair { grid-template-columns: minmax(0, 1fr); } .pair__col:first-child { text-align: left; } .pair__col:first-child .pair__h { justify-content: flex-start; flex-direction: row; } .pair__plus { height: 72px; } .pair__plus span { width: 32px; height: 32px; } .pair__plus span::before { width: 32px; } .pair__plus span::after { height: 32px; } .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logos li:nth-child(4), .logos li:nth-child(5) { grid-column: auto; } .logos li:nth-child(5) { grid-column: 1 / -1; } .logos .partner { transform: scale(0.86); } .vset figcaption { margin-top: 24px; } .voice__stage { gap: 14px; } .voice__mic { width: 40px; height: 40px; } .voice__mic .ico { width: 18px; height: 18px; } .voice__wave { height: 56px; } .voice__steps { flex-direction: column; row-gap: 12px; } .voice__steps li + li::before { display: none; } .call__line { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .call__line p { font-size: 15px; line-height: 23px; } .lsec__h, .lsec__body { grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; } .lsec__h > span:last-child { font-size: 18px; line-height: 26px; } .lsec__body p, .lsec__list li { font-size: 15px; line-height: 24px; } .lsec__list li::before { top: 12px; } /* Tables stack: each row becomes a small block with its labels */ .lsec__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .lsec__table tr { display: block; padding-block: 14px; border-bottom: 1px solid var(--line); } .lsec__table tr:first-child { border-top: 1px solid var(--line-heavy); } .lsec__table tbody tr:last-child { border-bottom: 0; } .lsec__table tbody th, .lsec__table td, .lsec__table td:last-child { display: block; width: auto; padding: 0; border: 0; } .lsec__table td::before { content: attr(data-label); display: block; margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--text-3); } .legal__mail { font-size: 20px; line-height: 28px; } .channel__link { font-size: 18px; line-height: 26px; } .anno__name { font-size: 13px; } .qa2 summary { padding: 18px 0; font-size: 16px; line-height: 24px; } .qa2__a { padding-right: 0; } .coda__title { font-size: 34px; line-height: 38px; letter-spacing: -0.03em; } .coda__text { font-size: 16px; line-height: 24px; } } @media (pointer: coarse) and (max-width: 599px) { .device__action .btn { min-height: 44px; } }