/* ====================================================================================== 321audio: the site stylesheet. The identity in words: BRAND.md. Paper black, ink white, heavy type and equipment labels. No gradients, no glow, no accent colour: the product screenshots are the only colour. Two looks share this file. - v4 (body.v4): the public pages and the dashboard. Its tokens and skins are scoped to body.v4. - v3: a page without v4 (the hub app) reads the :root tokens; hub.css and dashboard.css build on them. Class names that the hub and dashboard also use (.board, .grid, .tile, .bar) are only styled here inside their page: .lg (/products), .wk-media (/lift). 1 Tokens 5 Header and footer 9 Account and the thank-you dialog 2 Base 6 /products 10 Feedback form 3 Type roles 7 /lift 11 The hub's text logo 4 Buttons 8 Text pages Scale. Type: label 11 mono caps · button 12.5 mono caps · small 13 · side 15 · body 17 · title 22 · price 44 · product name. Corners: pill · tag 7 · panel 14 · window 18. Outlines 1.5px, dividers 1px. ====================================================================================== */ /* ------------------------------------------------------------------ 1 Tokens */ :root { /* v3 palette */ --paper: #0b0b0c; --bg: #1b1a19; --lane: #141413; --raised: #2a2927; --line: rgba(255, 255, 255, 0.09); --hover: rgba(255, 255, 255, 0.05); --ink: #ecebe6; --muted: #8d8b85; --dim: #55534e; --accent: #66a3c8; --accent-soft: rgba(102, 163, 200, 0.16); --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif; /* shared */ --grot: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "SF Mono", ui-monospace, Menlo, "Roboto Mono", monospace; --r-tag: 7px; --r-panel: 14px; --r-window: 18px; /* the v4 page edge: header, footer, home, /lift. On screens wider than --frame it grows, so everything sits in one centred frame */ --frame: 1600px; --edge: max(clamp(16px, 2.2vw, 28px), calc((100vw - var(--frame)) / 2)); --wrap: 1080px; --gutter: 16px; color-scheme: dark; } @media (min-width: 720px) { :root { --gutter: 32px; } } body.v4 { --bg: #0e0e0f; /* paper */ --lane: #151516; /* panel */ --raised: #1c1c1e; /* raised panel, open menus */ --ink: #f0efea; --muted: #a29f97; --dim: #5f5c57; --line: rgba(240, 239, 234, 0.13); --line-strong: rgba(240, 239, 234, 0.9); --hover: rgba(240, 239, 234, 0.06); --accent: var(--ink); --accent-soft: rgba(240, 239, 234, 0.1); --sans: var(--grot); background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--grot); letter-spacing: -0.005em; } /* ------------------------------------------------------------------ 2 Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-color: var(--dim); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(102, 163, 200, 0.32); } .logo { display: block; color: var(--ink); } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; cursor: pointer; } /* skip link: above the header while focused */ .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--edge); top: 6px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; } /* paper grain over everything (pointer-events: none) */ body.v4::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .32; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); } body.v4 ::selection { background: rgba(240, 239, 234, 0.25); } body.v4 :focus-visible { outline: 2px solid var(--ink); } body.v4 :is(p, li, dd, figcaption) { text-wrap: pretty; } /* short pages: the site footer sits at the bottom of the window */ body.v4:has(> :is(.ft, .ft2)) { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } body.v4:has(> :is(.ft, .ft2)) > main { flex: 1 0 auto; width: 100%; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ------------------------------------------------------------------ 3 Type roles */ /* label: mono caps, what you would read on a piece of gear */ .wk-status, .wk-price span, .wk-specs dt, .wk-faq h2, .wk-media .tile figcaption b, .cell-cap, .sample-hint, .track time, .acct-tag, .acct-sub, .prose .updated { font: 500 11px/1.45 var(--mono); letter-spacing: .05em; text-transform: uppercase; } /* ------------------------------------------------------------------ 4 Buttons */ /* v3 base (the hub uses it as is) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; font: 600 15px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; border: 1.2px solid transparent; transition: background-color .15s, border-color .15s, color .15s, opacity .15s; } .btn-fill { background: var(--ink); color: var(--bg); } .btn-fill:hover { background: #fff; } .btn-line { border-color: var(--line); color: var(--ink); background: none; } .btn-line:hover { border-color: rgba(255, 255, 255, 0.28); } .btn-sm { min-height: 34px; padding: 0 14px; font-size: 14px; } .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .btn.is-soon { cursor: default; opacity: .72; } .btn-fill.is-soon:hover { background: var(--ink); } /* checkout loading (main.js) */ .btn.is-busy { opacity: .55; cursor: progress; pointer-events: none; } /* v4: pills, mono caps, 46px (34px small) */ body.v4 .btn { font: 700 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-width: 1.5px; min-height: 46px; padding: 0 22px; } body.v4 .btn-line { border-color: var(--line-strong); color: var(--ink); } body.v4 .btn-line:hover { background: var(--hover); } body.v4 .btn-sm { min-height: 34px; padding: 0 14px; font-size: 11px; } body.v4 .btn.is-soon { opacity: 1; } body.v4 .btn-fill.is-soon { background: transparent; color: var(--ink); border-color: var(--line-strong); } body.v4 .btn.is-soon:hover { background: transparent; } /* checkout error under the buy button (main.js) */ .buy-error { max-width: 46ch; margin: 8px 0 0; padding-left: 8px; border-left: 2px solid var(--ink); color: var(--ink); font: 500 11.5px/1.45 var(--mono); letter-spacing: .05em; text-transform: uppercase; } /* Sales and coupons (main.js dress): the old price struck through on the button, one line under the buy row. */ .btn s { opacity: .55; text-decoration-thickness: 1.5px; } .wk-actions:has(> .buy-promo), .ln-buy:has(> .buy-promo), .buybar:has(> .buy-promo) { flex-wrap: wrap; } .buy-promo { flex-basis: 100%; grid-column: 1 / -1; align-self: center; text-align: center; color: var(--muted); font: 500 11px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; } /* ------------------------------------------------------------------ 5 Header and footer (tools/chrome.py) */ .hd { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 56px; padding: 0 var(--edge); color: var(--ink); font: 500 13px/1 var(--grot); letter-spacing: -0.005em; } .hd a { color: inherit; text-decoration: none; } .hd-logo { justify-self: start; display: block; padding: 9px 0; } .hd-logo .logo { height: 26px; width: auto; } .hd-nav { justify-self: center; } .hd-nav a, .hd-right { opacity: .74; transition: opacity .15s; } .hd-nav a:hover, .hd-right:hover, .hd-nav a[aria-current="page"], .hd-right[aria-current="page"] { opacity: 1; } .hd-right { justify-self: end; } .hd-menu { display: none; justify-self: end; position: relative; } .hd-menu summary { display: flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; padding-left: 12px; list-style: none; cursor: pointer; } .hd-menu summary::-webkit-details-marker { display: none; } .hd-menu[open] summary { opacity: .62; } .hd-menu nav { position: absolute; right: 0; top: calc(100% + 4px); display: grid; min-width: 180px; padding: 8px; background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--line); border-radius: var(--r-panel); } .hd-menu nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; border-radius: var(--r-tag); opacity: .62; } .hd-menu nav a:hover, .hd-menu nav a[aria-current="page"] { opacity: 1; } .hd-menu nav a:hover { background: var(--hover); } @media (max-width: 720px) { .hd { grid-template-columns: 1fr auto; } .hd-nav, .hd-right { display: none; } .hd-menu { display: block; } } .ft { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 16px; align-items: center; margin-top: clamp(80px, 12vw, 160px); padding: 22px var(--edge) 26px; color: var(--muted); font: 500 13px/1.3 var(--grot); } .ft a { color: inherit; text-decoration: none; } .ft a:hover { color: var(--ink); } .ft-nav { justify-self: center; } .ft-right { justify-self: end; } @media (max-width: 720px) { .ft { grid-template-columns: 1fr; gap: 0 16px; } .ft-nav, .ft-right { justify-self: start; } .ft a { display: inline-block; padding: 12px 0; } } /* ------------------------------------------------------------------ 6 Home: the logo, then the products branching from it main.js (.js-motion) flies the big logo into the header as you scroll and grows the branches when they come into view. Without JS or with reduced motion everything is simply in place. */ .home { padding: 0 var(--edge); } .intro { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; } .intro-mark { position: relative; z-index: 30; margin: 0; } .intro-mark .logo { display: block; width: min(640px, 80vw); height: auto; transform-origin: 0 0; will-change: transform; } .intro-cue { position: absolute; left: 50%; bottom: 28px; margin: 0; transform: translateX(-50%); color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: opacity .3s; } .intro-cue::after { content: ""; display: block; width: 1.5px; height: 28px; margin: 12px auto 0; background: var(--line-strong); transform-origin: top; animation: cue 2.2s cubic-bezier(.6, 0, .2, 1) infinite; } @keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* the count-in (main.js .js-count, once per visit): 3, 2, 1 on the beat at 128 BPM, then AUDIO */ .intro-mark .cd { transform-box: fill-box; transform-origin: 50% 60%; } .js-count .intro-mark .cd { opacity: 0; } .js-count .intro-mark .cd.on { opacity: 1; animation: hit .44s cubic-bezier(.2, .7, .2, 1) both; } .js-count .intro-mark .cd-a.on { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; } .js-count .intro-cue { opacity: 0 !important; } @keyframes hit { 0% { transform: scale(1.16); opacity: 0; } 18% { opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes rise { 0% { transform: translateY(22%); opacity: 0; } 100% { transform: none; opacity: 1; } } /* the header on the home page: fixed, empty until the logo lands in it */ .hd-home { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; } .hd-home.is-docked { background: var(--bg); border-bottom-color: var(--line); } .js-motion .hd-home .hd-logo { visibility: hidden; } .js-motion .hd-home.is-docked .hd-logo { visibility: visible; } .js-motion .hd-home :is(.hd-right, .hd-menu) { opacity: var(--hd-p, 0); transform: translateY(calc((1 - var(--hd-p, 0)) * -6px)); } .js-motion .page-home .intro-mark .logo.is-docked { visibility: hidden; } /* the tree: a trunk from the logo, a branch across, one stem per product */ .tree { position: relative; max-width: 1240px; min-height: 70vh; margin: 0 auto; padding: 0 0 clamp(64px, 9vw, 120px); --stem: clamp(40px, 5vw, 64px); } /* min-height: room to scroll the logo home */ .tree-trunk { display: block; width: 24px; height: clamp(56px, 8vw, 104px); margin: 0 auto; transform-origin: top; } /* the trunk and the branch are drawn as a line of audio (tools/pages.py wave()) */ .tree-trunk svg, .tree-wave svg { display: block; width: 100%; height: 100%; overflow: visible; } .tree-trunk path, .tree-wave path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .tree-wave { position: absolute; top: -12px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 24px; pointer-events: none; } .tree-wave svg { transform-origin: center; } .tree.is-in .tree-wave svg { animation: breathe 3.6s ease-in-out 1.8s infinite; } .tree:has(.node > a:hover, .node > a:focus-visible) .tree-wave svg { animation-duration: .55s; } @keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } } /* --n = the number of products in tools/pages.py PRODUCTS */ .tree-row { --n: 8; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .tree-row::before { content: none; } /* desktop: the wave is the branch; phones draw a plain line (below) */ .node { position: relative; display: flex; justify-content: center; padding-top: var(--stem); } .node::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.5px; height: var(--stem); margin-left: -.75px; background: var(--line-strong); transform-origin: top; } .node > a { display: grid; justify-items: center; gap: 16px; padding: 6px; border-radius: var(--r-panel); color: var(--ink); text-align: center; text-decoration: none; } .node .mk { width: clamp(76px, 7vw, 112px); height: auto; transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .node > a:hover .mk { transform: translateY(-4px) scale(1.04); } .node .cell-cap { text-align: center; } .cell-cap { margin: 0; color: var(--ink); } .cell-cap span { color: var(--muted); } /* growing in */ .js-motion .tree-trunk path, .js-motion .tree-wave path { stroke-dasharray: 1; stroke-dashoffset: 0; } .js-motion .tree-trunk path { transition: stroke-dashoffset .6s cubic-bezier(.6, 0, .2, 1); } .js-motion .tree-wave path { transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .2, 1) .45s; } .js-motion .tree:not(.is-in) .tree-trunk path, .js-motion .tree:not(.is-in) .tree-wave path { stroke-dashoffset: 1; } .js-motion .tree-row::before { transition: transform .7s cubic-bezier(.6, 0, .2, 1) .45s; } .js-motion .node::before { transition: transform .35s cubic-bezier(.6, 0, .2, 1) calc(1s + var(--i) * .06s); } .js-motion .node > a { transition: opacity .6s ease calc(1.15s + var(--i) * .07s), transform .7s cubic-bezier(.2, .7, .2, 1) calc(1.15s + var(--i) * .07s); } .js-motion .tree:not(.is-in) .node::before { transform: scaleY(0); } .js-motion .tree:not(.is-in) .node > a { opacity: 0; transform: translateY(18px); } /* phones: the trunk runs down the left and each product hangs off it */ @media (max-width: 760px) { .tree { --stem: 28px; } .tree-trunk { margin: 0 0 0 18px; height: 48px; } .tree-wave { display: none; } .tree-row { --n: 1; grid-template-columns: minmax(0, 1fr); gap: 4px; } .tree-row::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 52px; width: 1.5px; background: var(--line-strong); transform-origin: top; transition: transform .7s cubic-bezier(.6, 0, .2, 1) .45s; } .js-motion .tree:not(.is-in) .tree-row::before { transform: scaleY(0); } .node { justify-content: flex-start; padding: 0 0 0 60px; } .node::before { top: 52px; left: 30px; width: 30px; height: 1.5px; margin: 0; transform-origin: left; } .js-motion .tree:not(.is-in) .node::before { transform: scaleX(0); } .node > a { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 18px; text-align: left; } .node .mk { width: 92px; } .node .cell-cap { text-align: left; } } /* ------------------------------------------------------------------ 7 Product pages (/lift and tools/pages.py): centred */ .pd { padding: 0 var(--edge); } .pd-hero { max-width: 760px; margin: 0 auto; padding: clamp(64px, 10vw, 128px) 0 0; display: grid; justify-items: center; text-align: center; } .pd-name { margin: 0 0 22px; padding-bottom: .09em; font: 700 clamp(104px, 17vw, 220px)/.8 var(--grot); letter-spacing: -0.07em; } /* long names (--n letters, from tools/pages.py) shrink to fit a phone */ .pd-name[style] { font-size: min(clamp(104px, 17vw, 220px), calc((100vw - 2 * var(--edge)) / (var(--n) * 0.56))); } .wk-status { margin: 0 0 22px; } .wk-status span { color: var(--muted); } .wk-text { max-width: 36ch; margin: 0 0 28px; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); } .wk-price { margin: 0 0 18px; font: 700 clamp(40px, 4.4vw, 56px)/1 var(--grot); letter-spacing: -0.05em; } .wk-price span { margin-left: 8px; color: var(--muted); } .wk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(440px, 100%); margin: 0 0 18px; } .wk-actions:has(> :only-child) { grid-template-columns: minmax(0, 260px); justify-content: center; } body.v4 .wk-actions .btn { min-height: 48px; padding: 0 12px; font-size: 12.5px; } /* coming soon (tools/launch.py): buy and demo would be two identical pills, so only the first shows */ .wk-actions:has(.is-soon ~ .is-soon) { grid-template-columns: minmax(0, 260px); justify-content: center; } .wk-actions .is-soon ~ .is-soon { display: none; } .wk-actions + .buy-error { margin: -8px 0 18px; } .btn-off { cursor: default; color: var(--muted); border-color: var(--line); } .pd-meta { margin: 0; color: var(--muted); font: 500 11px/1.45 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .pd-section { max-width: 1120px; margin: 0 auto; padding-top: clamp(64px, 9vw, 120px); } .pd-label { margin: 0 0 14px; text-align: center; color: var(--muted); font: 500 11px/1.45 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .pd-h2 { margin: 0 auto clamp(24px, 3vw, 36px); max-width: 18ch; text-align: center; font: 700 clamp(34px, 5vw, 64px)/.95 var(--grot); letter-spacing: -0.055em; } .pd-h2 .coarse-pointer { display: none; } @media (pointer: coarse) { .pd-h2 .fine-pointer { display: none; } .pd-h2 .coarse-pointer { display: inline; } } .pd-demo { max-width: 1040px; } .pd .wk-media { padding-top: 0; } /* the video: a 16:9 slot until the launch video is up */ .video-slot { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-window); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .video-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .14; filter: grayscale(1); } .video-slot span { position: relative; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .video-slot .pd-art { position: absolute; width: clamp(96px, 16vw, 200px); height: auto; color: var(--line-strong); opacity: .5; } .video-slot .pd-art + span, .video-slot img + span { position: absolute; left: 0; right: 0; bottom: clamp(14px, 2.4vw, 28px); text-align: center; } .video-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* 01 02 03 */ .pd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; counter-reset: s; font-size: 15px; line-height: 1.45; color: var(--muted); } .pd-steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1.5px solid var(--line); } .pd-steps li::before { content: counter(s, decimal-leading-zero); font: 500 11px/1 var(--mono); letter-spacing: .05em; color: var(--ink); } .pd-steps b { display: block; font: 700 22px/1.1 var(--grot); letter-spacing: -0.03em; color: var(--ink); } @media (max-width: 760px) { .pd-steps { grid-template-columns: minmax(0, 1fr); } } .pd-specs-wrap { max-width: 620px; } .wk-specs { margin: 0; display: grid; border-top: 1px solid var(--line); } .wk-specs div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .wk-specs dt { color: var(--muted); } .wk-specs dd { margin: 0; } .wk-faq { max-width: 760px; } .wk-faq h2 { margin: 0 0 12px; text-align: center; } /* one screenshot per row, full width, with room between them */ .pd-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); } /* tiles: a flat panel with a small caption under it */ .wk-media > .tile { margin: 0; display: grid; gap: 10px; align-content: start; } .wk-media > .tile-wide { grid-column: 1 / -1; } .wk-media .tile figcaption { max-width: 70ch; font-size: 13px; line-height: 1.4; color: var(--ink); } .wk-media .tile figcaption b { display: block; margin-bottom: 2px; color: var(--ink); } .wk-media .tile figcaption span { display: block; margin-top: 4px; color: var(--muted); } .wk-media .stage, .tile-demo .demo, .tile-tracks .tracks { margin: 0; overflow: hidden; background: var(--lane); border-radius: var(--r-panel); box-shadow: inset 0 0 0 1.5px var(--line); } /* screenshot crops with notes */ .wk-media .stage { position: relative; padding: clamp(12px, 1.6vw, 20px); } .crop { position: relative; } .crop img { width: 100%; border-radius: var(--r-tag); } .crop img[style] { display: block; margin: 0 auto; } /* shown at its own size (tools/pages.py natural=True) */ .note { position: absolute; width: 0; height: 0; } .note i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(240, 239, 234, 0.18); } .note b { position: absolute; top: 12px; white-space: nowrap; padding: 8px 11px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 500 13px/1 var(--grot); } .note b.r { left: -14px; } .note b.l { right: -14px; } .note b.up { top: auto; bottom: 12px; } @media (max-width: 720px) { .note { display: none; } } /* the drag demo: a sample, then Lift's window */ .tile-demo .demo { position: relative; padding: clamp(20px, 3vw, 44px); } .sample-wrap { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; } .sample { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 0; border-radius: var(--r-panel); background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: inherit; text-align: left; cursor: grab; touch-action: none; user-select: none; transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s; } .sample:active { cursor: grabbing; } .sample.dragging { transition: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1.5px var(--line-strong); } .sample.gone { opacity: 0; pointer-events: none; } .sample-wave { width: 40px; height: 32px; display: grid; place-items: center; border-radius: var(--r-tag); background: var(--lane); } .sample-wave svg { width: 30px; height: 14px; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; fill: none; } .sample-text { display: flex; flex-direction: column; line-height: 1.25; } .sample-text b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .sample-text small { font-size: 13px; color: var(--muted); white-space: nowrap; } .sample-hint { margin: 0; color: var(--muted); transition: opacity .25s; } .sample.gone + .sample-hint { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; } .sample-hint .coarse-pointer { display: none; } @media (pointer: coarse) { .sample-hint .fine-pointer { display: none; } .sample-hint .coarse-pointer { display: inline; } } @media (max-width: 720px) { .sample-wrap { flex-direction: column; align-items: flex-start; gap: 10px; } } .window { position: relative; max-width: 900px; margin: 0; overflow: hidden; border-radius: var(--r-panel); background: var(--lane); } .window img { width: 100%; } /* the built screen fades in; the hidden one leaves the accessibility tree */ .window .state-built { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } .window.built .state-built { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; } .window.built .state-empty { visibility: hidden; transition: visibility 0s linear .45s; } /* drop box of the empty screen: x 36–1104, y 250–454 of 1140×1246 (Lift 1.1.5 shots, 2026-10-30) */ .dropzone { position: absolute; left: 3.16%; width: 93.7%; top: 20.06%; height: 16.37%; border-radius: var(--r-tag); transition: box-shadow .15s, opacity .3s; } .window.hover .dropzone { box-shadow: inset 0 0 0 1.5px var(--line-strong); } .window.built .dropzone { opacity: 0; } /* timeline of the built screen: x 36–1104, y 590–725 */ .playhead { position: absolute; top: 47.35%; height: 10.83%; left: 3.16%; width: 2px; background: var(--ink); opacity: 0; } .window.playing .playhead { opacity: 1; } /* the window's own play button: centre (64, 1197), radius 28; the hit area is larger than the drawing */ .window-play { position: absolute; left: 3.16%; top: 93.82%; width: 4.91%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .window-play::before { content: ""; position: absolute; inset: -14px; } .window-play:disabled { cursor: default; } .window-play:focus-visible { outline-offset: 2px; } .window.built .window-play:not(:disabled) { box-shadow: 0 0 0 0 rgba(240, 239, 234, 0.5); animation: ping 1.6s ease-out 2; } .window.playing .window-play { animation: none; } /* playing: a pause button in Lift's own style (ring and glyph #f0efea on the window's #0f161d) covers the screenshot's play */ .window.playing .window-play { background: #0f161d; box-shadow: inset 0 0 0 1px #f0efea; } .window.playing .window-play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 34%; transform: translate(-50%, -50%); background: linear-gradient(90deg, #f0efea 0 34%, transparent 34% 66%, #f0efea 66%); } @keyframes ping { to { box-shadow: 0 0 0 14px rgba(240, 239, 234, 0); } } .demo-meta { margin: 18px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); } /* hear it: two tracks */ .tile-tracks .tracks { display: grid; counter-reset: trk; padding: 6px 18px; } .tile-tracks .track { counter-increment: trk; display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); } .tile-tracks .track:last-child { border-bottom: 0; } .tile-tracks .track::before { content: counter(trk, decimal-leading-zero); font: 500 11px/1 var(--mono); color: var(--muted); } .track-play { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; } .track-play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 13px solid var(--bg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .track-play[aria-pressed="true"]::before { width: 12px; height: 12px; margin: 0; border: 0; border-radius: 2px; background: var(--bg); } .track-body { display: grid; gap: 2px; min-width: 0; } .track-body b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; } .track-body span { font-size: 13px; color: var(--muted); } .track-wave { display: block; width: 100%; height: 34px; margin-top: 8px; } .track-wave .bar { fill: var(--dim); } .track-wave .bar.on { fill: var(--ink); } .track time { color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .tile-tracks .track { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; } .tile-tracks .track::before { display: none; } } /* questions */ .faq { max-width: 760px; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { position: relative; padding: 18px 40px 18px 0; list-style: none; cursor: pointer; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .18s; } .faq details[open] summary::after { top: 30px; transform: rotate(225deg); } .faq details > div { max-width: 64ch; padding: 0 0 20px; color: var(--muted); } .faq details > div p { margin: 0 0 10px; } /* phone buy bar: slides up once the side column's buttons have scrolled away (main.js sets .is-on) */ .buybar, .buybar + .buy-error { display: none; } @media (max-width: 900px) { .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); transform: translateY(110%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s; } .buybar.is-on { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s; } .buybar-name { font: 700 18px/1 var(--grot); letter-spacing: -0.04em; } .buybar-price { font: 500 12px/1 var(--mono); color: var(--muted); } body.v4 .buybar .btn { margin-left: auto; min-height: 44px; padding: 0 22px; font-size: 12.5px; } .buybar + .buy-error { display: block; position: fixed; left: 0; right: 0; bottom: calc(65px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: none; margin: 0; padding: 10px 16px; border-left: 0; border-top: 1px solid var(--line); background: var(--bg); } .buybar:not(.is-on) + .buy-error { display: none; } /* the last footer row stays readable above the bar */ .page-lift :is(.ft, .ft2) { padding-bottom: calc(26px + 65px + env(safe-area-inset-bottom, 0px)); } } /* ------------------------------------------------------------------ 8 Text pages: account, support, legal, feedback, changelog */ .page { max-width: calc(720px + 2 * var(--gutter)); margin-left: 0; padding-top: 28px; padding-left: clamp(16px, 2.2vw, 28px); } /* wide screens: the text column sits in the middle of the frame instead of hugging the left edge */ @media (min-width: 1280px) { .page { margin-inline: auto; padding-inline: var(--gutter); } } .page h1 { margin: 0 0 20px; font-size: clamp(32px, 4vw, 44px); font-weight: 700; line-height: .9; letter-spacing: -0.045em; } .page .intro { height: auto; display: block; /* not the home page's full-screen .intro */ max-width: 46ch; margin: 0 0 40px; font-size: 17px; line-height: 1.5; color: var(--muted); } .prose { max-width: 680px; } .prose h2 { margin: 48px 0 12px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; } .prose h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 700; } .prose p, .prose li { color: var(--ink); } .prose p { margin: 0 0 14px; } .prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; } .prose li { margin: 6px 0; } .prose strong { color: var(--ink); font-weight: 700; } .prose code { padding: 1px 5px; border-radius: var(--r-tag); background: var(--raised); color: var(--ink); font: 500 13px/1.4 var(--mono); overflow-wrap: anywhere; } .prose .updated { color: var(--muted); } .prose .callout { margin: 24px 0; padding: 18px 20px; border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .prose .callout p:last-child { margin: 0; } /* numbered steps: 01 02 03, as on /lift */ .prose .steps { counter-reset: step; list-style: none; padding: 0; } .prose .steps > li { counter-increment: step; position: relative; margin: 0 0 22px; padding-left: 36px; } .prose .steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 500 11px/25.5px var(--mono); letter-spacing: .05em; color: var(--ink); /* line height = one 17px/1.5 text line */ margin-top: 1px; /* optical: mono caps sit high next to the text baseline */ } .nowrap { white-space: nowrap; } .mail { display: inline-block; padding: 9px 0; font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; text-decoration: none; } /* ------------------------------------------------------------------ 9 Account and the thank-you dialog (account.js, main.js) */ .signin { display: grid; gap: 18px; justify-items: start; max-width: 680px; margin: 8px 0 48px; padding: clamp(22px, 4vw, 36px); border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .signin h2, .acct h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; } .signin p { max-width: 52ch; margin: 0; color: var(--muted); } .acct { max-width: 760px; margin: 8px 0 48px; display: grid; gap: 18px; } .acct > p, .acct-email, .acct-sub, .acct-empty, .acct-hub, .acct-wait { margin: 0; color: var(--muted); } .acct:not([hidden]) + #acct-fallback { display: none; } .acct-head { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: end; } .acct-actions { display: flex; gap: 8px; } .acct-list { display: grid; gap: 14px; } .acct-card { display: grid; gap: 14px; padding: clamp(18px, 3vw, 26px); border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .acct-card.is-revoked { opacity: .55; } .acct-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .acct-card h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.04em; } .acct-tag { color: var(--muted); } .acct-macs { display: grid; gap: 6px; } .acct-mac { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 0 4px; border-top: 1px solid var(--line); } .acct-mac small { grid-column: 1; color: var(--muted); } .acct-mac button { grid-column: 2; grid-row: 1 / span 2; } .acct-clerk { min-height: 420px; } /* a license key and its copy button; the key breaks only at its hyphens */ .keyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; } .keyrow code { display: flex; align-items: center; padding: 10px 12px; border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); font: 500 14px/1.3 var(--mono); letter-spacing: .02em; overflow-wrap: break-word; user-select: all; } dialog.purchase { width: min(520px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: clamp(22px, 4vw, 32px); border: 0; border-radius: var(--r-window); color: var(--ink); background: var(--lane); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 0 0 1.5px var(--line); } dialog.purchase::backdrop { background: rgba(14, 14, 15, 0.8); } dialog.purchase h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; } dialog.purchase .purchase-msg { margin: 0; } dialog.purchase .purchase-keys { display: grid; gap: 10px; margin: 14px 0; } dialog.purchase .purchase-keys:empty { margin: 0; } dialog.purchase .purchase-note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); } dialog.purchase .purchase-note strong { color: var(--ink); } dialog.purchase .btn-sm { min-height: 44px; } dialog.purchase > .btn { margin-top: 20px; } @media (max-width: 480px) { .keyrow { grid-template-columns: minmax(0, 1fr); } .keyrow .btn { justify-self: start; } body.v4 .keyrow .btn { min-height: 44px; } .keyrow code { padding: 10px; font-size: 13px; letter-spacing: 0; } } /* ------------------------------------------------------------------ 10 Feedback form (feedback.js) */ .fbform { max-width: 620px; display: grid; gap: 18px; } .fbform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fbform label { display: grid; gap: 8px; color: var(--muted); font: 500 11px/1.45 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .fbform label small { font: 400 13px/1.4 var(--grot); letter-spacing: 0; text-transform: none; } .fbform :is(input, select, textarea) { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-panel); background: var(--lane); color: var(--ink); font: 400 17px/1.4 var(--sans); letter-spacing: normal; text-transform: none; } .fbform textarea { resize: vertical; line-height: 1.5; } .fbform :is(input, select, textarea):focus { outline: none; border-color: var(--ink); } .fbform .btn { justify-self: start; } .fbform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fbform-status { margin: 0; min-height: 1.4em; color: var(--muted); } .fbform-note { margin-top: 40px; font-size: 15px; color: var(--muted); } @media (max-width: 560px) { .fbform-row { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ 11 The hub's text logo ("321hub" in its sidebar) */ .wordmark-321 { font: 800 21px/1 var(--sans); letter-spacing: -0.035em; color: var(--ink); white-space: nowrap; } .wordmark-321 span { font-weight: 500; letter-spacing: -0.03em; color: var(--muted); } /* ------------------------------------------------------------------ 12 Test themes (2026-10-17): ?theme=light | color | dark main.js keeps the choice in localStorage. light = the same identity on paper; color = paper plus one colour per product. */ html:is([data-theme="light"], [data-theme="color"]) body.v4 { --bg: #f3f2ee; --lane: #e9e7e1; --raised: #ffffff; --ink: #121212; --muted: #6b6862; --dim: #aaa69f; --line: rgba(18, 18, 18, 0.12); --line-strong: rgba(18, 18, 18, 0.86); --hover: rgba(18, 18, 18, 0.05); --accent: var(--ink); --accent-soft: rgba(18, 18, 18, 0.08); color-scheme: light; } html:is([data-theme="light"], [data-theme="color"]) { color-scheme: light; } html:is([data-theme="light"], [data-theme="color"]) body.v4::after { filter: invert(1); mix-blend-mode: multiply; opacity: .45; } html:is([data-theme="light"], [data-theme="color"]) .btn-fill:hover { background: #000; } html:is([data-theme="light"], [data-theme="color"]) body.v4 ::selection { background: rgba(18, 18, 18, 0.16); } html:is([data-theme="light"], [data-theme="color"]) dialog.purchase::backdrop { background: rgba(243, 242, 238, 0.8); } html:is([data-theme="light"], [data-theme="color"]) .sample.dragging { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), inset 0 0 0 1.5px var(--line-strong); } /* color: one accent per product, used only on its icon, its buy button and the "_" of its status */ html[data-theme="color"] :is(.node-lift, .page-lift) { --p: #2f7fb5; } html[data-theme="color"] :is(.node-underlay, .page-underlay) { --p: #5b8c45; } html[data-theme="color"] :is(.node-scope, .page-scope) { --p: #c2363b; } html[data-theme="color"] :is(.node-when, .page-when) { --p: #d9482b; } html[data-theme="color"] :is(.node-stemsep, .page-stemsep) { --p: #2b8576; } html[data-theme="color"] :is(.node-a2m, .page-a2m) { --p: #7462c7; } html[data-theme="color"] :is(.node-second-ear, .page-second-ear) { --p: #1d1d1f; } html[data-theme="color"] :is(.node-mysound, .page-mysound) { --p: #4365e8; } html[data-theme="color"] :is(.node-mosaic, .page-mosaic, .node-mosaic-fx, .page-mosaic-fx) { --p: #0e0e0f; } /* mosaic + mosaic fx, Eclipse: ink only (Joel, 2026-10-31; was copper) */ html[data-theme="color"] .node .mk, html[data-theme="color"] .video-slot .pd-art { color: var(--p); opacity: 1; } html[data-theme="color"] .page-product .wk-status span { color: var(--p); } html[data-theme="color"] .page-product .btn-fill { background: var(--p); border-color: var(--p); color: #fff; } html[data-theme="color"] .page-product .btn-fill:hover { background: var(--p); filter: brightness(.92); } html[data-theme="color"] .page-product .pd-name { color: var(--p); } /* more test themes (2026-10-17), all with the per-product colours of ?theme=color: bone = warm paper, brown-black ink stone = greige paper, charcoal ink tint = bone, and each product page sits on a pale wash of its own colour */ html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) { color-scheme: light; } html:is([data-theme="bone"], [data-theme="tint"]) body.v4 { --bg: #ebe5d9; --lane: #e2dbcd; --raised: #f3eee5; --ink: #1f1c18; --muted: #5c564c; --dim: #8a8275; --line: rgba(31, 28, 24, 0.13); --line-strong: rgba(31, 28, 24, 0.85); --hover: rgba(31, 28, 24, 0.05); --accent: var(--ink); } html[data-theme="stone"] body.v4 { --bg: #d8d5ce; --lane: #ccc8c0; --raised: #e3e0da; --ink: #22211f; --muted: #5f5c57; --dim: #96928a; --line: rgba(34, 33, 31, 0.14); --line-strong: rgba(34, 33, 31, 0.85); --hover: rgba(34, 33, 31, 0.05); --accent: var(--ink); } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) body.v4::after { filter: invert(1); mix-blend-mode: multiply; opacity: .55; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) .btn-fill:hover { background: var(--ink); filter: brightness(1.25); } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) dialog.purchase::backdrop { background: rgba(0, 0, 0, 0.25); } /* the product colours, a touch deeper on warm paper */ html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-lift, .page-lift) { --p: #2a6f9f; --w: #dfe4e3; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-underlay, .page-underlay) { --p: #567d3e; --w: #dfe1cf; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-scope, .page-scope) { --p: #c2363b; --w: #ecd6d4; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-when, .page-when) { --p: #c4431f; --w: #ecd9cb; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-stemsep, .page-stemsep) { --p: #2b8576; --w: #d6ebe6; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-a2m, .page-a2m) { --p: #6655b5; --w: #e1dcdf; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-second-ear, .page-second-ear) { --p: #1d1d1f; --w: #eee6cf; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-mysound, .page-mysound) { --p: #4365e8; --w: #dcdfec; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node-mosaic, .page-mosaic, .node-mosaic-fx, .page-mosaic-fx) { --p: #0e0e0f; --w: #e3e2de; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) :is(.node .mk, .video-slot .pd-art) { color: var(--p); opacity: 1; } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) .page-product :is(.wk-status span, .pd-name) { color: var(--p); } html:is([data-theme="bone"], [data-theme="stone"], [data-theme="tint"]) .page-product .btn-fill { background: var(--p); border-color: var(--p); color: #fff; } /* tint: the page itself takes the product's wash; panels stay a step darker in the same family */ html[data-theme="tint"] body.v4.page-product { --bg: var(--w); --lane: color-mix(in srgb, var(--w) 88%, #000); --raised: color-mix(in srgb, var(--w) 70%, #fff); } html[data-theme="tint"] .page-product .hd-home, html[data-theme="tint"] .page-product .hd { background: transparent; } /* DEFAULT (2026-10-17, Joel): nighttint = black, one colour per product, product pages on a deep wash of it. Test themes: night = black + one colour per product; nighttint = and each product page sits on a deep wash of its colour (like a record sleeve in low light) */ html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-lift, .page-lift) { --p: #6fa8d6; --w: #0f161d; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-underlay, .page-underlay) { --p: #9cc47f; --w: #121710; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-scope, .page-scope) { --p: #c93a3f; --w: #1c0f11; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-when, .page-when) { --p: #f07a55; --w: #1c120e; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-stemsep, .page-stemsep) { --p: #6bbfad; --w: #0e1917; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-a2m, .page-a2m) { --p: #a798ee; --w: #14121d; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-second-ear, .page-second-ear) { --p: #fdfaea; --w: #1b1810; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-mysound, .page-mysound) { --p: #4365e8; --w: #151c30; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node-mosaic, .page-mosaic, .node-mosaic-fx, .page-mosaic-fx) { --p: #f0efea; --w: #141415; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) :is(.node .mk, .video-slot .pd-art) { color: var(--p); opacity: 1; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) .page-product :is(.wk-status span, .pd-name) { color: var(--p); } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) .page-product .btn-fill { background: var(--p); border-color: var(--p); color: #0e0e0f; } html:is(:not([data-theme]), [data-theme="night"], [data-theme="nighttint"]) .page-product .btn-fill:hover { background: var(--p); filter: brightness(1.08); } html:is(:not([data-theme]), [data-theme="nighttint"]) body.v4.page-product { --bg: var(--w); --lane: color-mix(in srgb, var(--w) 82%, #fff 4%); --raised: color-mix(in srgb, var(--w) 70%, #fff 8%); } html:is(:not([data-theme]), [data-theme="nighttint"]) .page-product .hd { background: transparent; } /* mysound's blue is deep enough for a paper-white label */ /* ------------------------------------------------------------------ 13 /join (join.js): the beta invite's account page */ .page-join [hidden] { display: none !important; } /* The column has a fixed width of its own (grid + min()), never one shrunk from its content: in some browsers the flex column with auto margins collapsed it to one word wide, so every line broke after each word. */ body.v4.page-join { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100svh; } .page-join .jn :is(p, li) { text-wrap: wrap; } .jn-hd { justify-content: start; } .jn-logo { display: block; width: 60px; height: auto; } /* Fixed side padding: --edge grows with the window and, inside a 560px column, left 104px for the form on wide screens. */ body.v4.page-join > .jn { box-sizing: border-box; width: min(560px, 100%); justify-self: center; padding: clamp(40px, 8vw, 104px) 20px 80px; } .jn-label { margin: 0 0 18px; color: var(--muted); font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .jn-h1 { margin: 0 0 20px; font: 700 clamp(46px, 8vw, 76px)/.92 var(--grot); letter-spacing: -0.06em; } .jn-h1:focus { outline: none; } .jn-lead { margin: 0 0 36px; font-size: 18px; line-height: 1.5; color: var(--ink); } .jn-banner { margin: -12px 0 28px; padding: 10px 14px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--line-strong); font: 500 11px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .jn-form { display: grid; gap: 16px; } .jn-field { display: grid; gap: 8px; } .jn-field > span { color: var(--muted); font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .jn-field small { margin-left: 6px; color: var(--dim); font-size: inherit; } .jn-form input { box-sizing: border-box; width: 100%; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--lane); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font: 400 16px/1 var(--grot); } .jn-form input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); } .jn-pw { position: relative; display: block; } .jn-pw input { padding-right: 76px; } .jn-show { position: absolute; right: 8px; top: 8px; height: 36px; min-width: 60px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .jn-show:hover, .jn-show:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); outline: none; } .jn-meter { height: 2px; margin: -4px 18px 0; background: var(--line); } .jn-meter i { display: block; width: 0; height: 100%; background: var(--ink); transition: width .2s; } .jn-meter i[data-k="1"] { background: #e5484d; } .jn-hint { min-height: 1.4em; margin: -6px 18px 0; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .jn-rules { margin: 4px 0 6px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--muted); } .jn-rules li { position: relative; padding-left: 22px; } .jn-rules li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); } .jn-rules li.is-ok { color: var(--ink); } .jn-rules li.is-ok::before { background: var(--ink); box-shadow: none; } .jn-go { width: 100%; min-height: 52px; } .jn-error { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--ink); } .jn-error:not(:empty) { border-left: 2px solid #e5484d; padding-left: 10px; } .jn-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; } .jn-steps li { counter-increment: s; display: grid; gap: 6px; padding: 16px 0; border-top: 1.5px solid var(--line); } .jn-steps li::before { content: counter(s, decimal-leading-zero); color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .05em; } .jn-steps li.is-done::before { content: "✓"; color: var(--ink); } .jn-steps b { font: 700 22px/1.1 var(--grot); letter-spacing: -0.03em; } .jn-steps span { color: var(--muted); font-size: 15px; line-height: 1.45; } .jn-steps .btn { justify-self: start; margin-top: 8px; } .jn-ft { justify-content: space-between; } .jn-rules li.jn-info::before { content: "i"; top: .1em; width: 11px; height: auto; box-shadow: none; font: 500 11px/1.4 var(--mono); text-align: center; } /* ------------------------------------------------------------------ 14 inline checkout on /lift (main.js) */ /* #212628 is Paddle's dark checkout background (fixed on their side), so the frame and our panel read as one */ .pd-checkout { width: min(480px, 100%); margin: 0 0 18px; padding: 14px; border-radius: var(--r-panel); background: #212628; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; gap: 8px; } .pd-checkout[hidden] { display: none; } /* the grid above would override the hidden attribute */ .pd-checkout-frame:empty::before { content: "Loading checkout…"; display: block; padding: 40px 0; text-align: center; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .pd-checkout-total { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); } .pd-checkout-total:empty { display: none; } .pd-checkout-cancel { justify-self: center; min-height: 44px; color: var(--muted); } :is(.wk-actions, .ln-buy).is-open [data-buy] { opacity: .45; } /* ------------------------------------------------------------------ 15 /account sign-in (account.js signInPanel): one centred panel */ body.is-signin > .hd, body.is-signin > :is(.ft, .ft2), body.is-signin main > :not(#acct), body.is-signin .skip { display: none !important; } body.is-signin main { min-height: 100svh; display: grid; place-items: center; max-width: none; padding-block: 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } body.is-signin #acct { width: 100%; max-width: none; margin: 0; display: grid; justify-items: center; } .si [hidden] { display: none !important; } .si { width: min(440px, 100%); display: grid; gap: 28px; justify-items: center; } .si-logo { width: 64px; height: auto; display: block; } .si-panel { width: 100%; display: grid; gap: 14px; padding: clamp(24px, 5vw, 40px); border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .si-h { margin: 0 0 10px; font: 700 clamp(36px, 9vw, 44px)/.9 var(--grot); letter-spacing: -0.06em; } .si-text { margin: -4px 0 4px; color: var(--muted); font-size: 15px; line-height: 1.45; text-wrap: wrap; } .si-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .si-sso { height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .si-sso:hover, .si-sso:focus-visible { background: var(--ink); color: var(--bg); outline: none; } .si-sso svg { width: 16px; height: 16px; } .si-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .si-or::before, .si-or::after { content: ""; height: 1px; background: var(--line); } .si-field { display: grid; gap: 8px; } .si-field span { color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .si-field input { height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font: 400 16px/1 var(--grot); } .si-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); } .si-field input[readonly] { color: var(--muted); } .si-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; } .si-link { padding: 0; border: 0; background: none; color: var(--muted); font: 400 14px/1.4 var(--grot); cursor: pointer; min-height: 44px; } .si-link:hover, .si-link:focus-visible { color: var(--ink); outline: none; text-decoration: underline; } .si-next { min-width: 120px; } .si-error { margin: 0; font-size: 14px; color: var(--ink); text-wrap: wrap; } .si-error:empty { display: none; } .si-error:not(:empty) { border-left: 2px solid #e5484d; padding-left: 10px; } .si-legal { display: flex; gap: 18px; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .si-legal a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .si-legal a:hover { color: var(--ink); } /* ------------------------------------------------------------------ 16 /account signed in (account.js): your apps, more apps, folded help */ body.is-account main > h1, body.is-account main > #acct-fallback { display: none !important; } body.is-account #acct { max-width: 1040px; margin: 0 auto 48px; gap: 28px; } .ac-head { display: grid; gap: 6px; padding-top: clamp(16px, 4vw, 40px); } .ac-h { margin: 0; font: 700 clamp(44px, 8vw, 72px)/.9 var(--grot); letter-spacing: -0.06em; } .ac-sub, .ac-meta, .ac-empty { margin: 0; color: var(--muted); } .ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; } .ac-card { display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .ac-card.is-revoked { opacity: .55; } .ac-top { display: flex; align-items: center; gap: 14px; } .ac-icon { width: 72px; height: 72px; margin: -8px; flex: none; display: block; } /* the Hub dock icons (hub/catalog/icons/dock), shape included */ .ac-title { min-width: 0; } .ac-title h2 { margin: 0 0 2px; font: 700 24px/1.05 var(--grot); letter-spacing: -0.04em; } .ac-meta { font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .ac-key { display: flex; align-items: center; gap: 8px; min-width: 0; } .ac-key code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 500 13px/1.3 var(--mono); color: var(--ink); } .ac-mini { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px var(--line); } .ac-mini:hover, .ac-mini:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); outline: none; } .ac-macs summary, .ac-help summary { cursor: pointer; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; list-style: none; min-height: 32px; display: flex; align-items: center; } .ac-macs summary::-webkit-details-marker, .ac-help summary::-webkit-details-marker { display: none; } .ac-macs summary::after, .ac-help summary::after { content: "+"; margin-left: 8px; } .ac-macs[open] summary::after, .ac-help[open] summary::after { content: "\2212"; } .ac-mac { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .ac-mac small { grid-column: 1; color: var(--muted); } .ac-mac button { grid-column: 2; grid-row: 1 / span 2; } .ac-h2 { margin: 0 0 12px; font: 700 24px/1.1 var(--grot); letter-spacing: -0.04em; } .ac-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; } .ac-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-panel); text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .ac-tile:hover, .ac-tile:focus-visible { box-shadow: inset 0 0 0 1.5px var(--line-strong); outline: none; } .ac-tile .ac-icon { width: 60px; height: 60px; margin: -6px; } .ac-tile-txt { display: grid; gap: 2px; min-width: 0; } .ac-tile-txt b { font: 700 17px/1.1 var(--grot); letter-spacing: -0.03em; } .ac-tile-txt small { color: var(--muted); font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; } .ac-extras { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); } .ac-hubline { margin: 8px 0; color: var(--muted); } .ac-help > :not(summary) { margin-top: 12px; } .ac-help .prose { max-width: 72ch; } /* the signed-in menu in the header */ .ac-menu { position: relative; justify-self: end; } .ac-menu summary { cursor: pointer; list-style: none; color: var(--ink); font: 500 13px/1 var(--grot); min-height: 44px; display: flex; align-items: center; gap: 6px; } .ac-menu summary::-webkit-details-marker { display: none; } .ac-menu summary::after { content: "▾"; color: var(--muted); font-size: 11px; } .ac-menu-list { position: absolute; right: 0; top: 100%; z-index: 20; display: grid; min-width: 160px; padding: 6px; border-radius: 12px; background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--line), 0 18px 40px rgba(0, 0, 0, .45); } .ac-menu-list button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .ac-menu-list button:hover, .ac-menu-list button:focus-visible { background: var(--lane); outline: none; } .ac-menu { opacity: 1 !important; } .hd-menu nav button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-tag); background: none; color: var(--ink); opacity: .62; font: 400 15px/1 var(--grot); text-align: left; cursor: pointer; } .hd-menu nav button:hover { opacity: 1; background: var(--hover); } .ac-menu-email { padding: 6px 12px 2px; color: var(--muted); font: 500 11px/1.3 var(--mono); letter-spacing: .03em; overflow-wrap: anywhere; } /* ------------------------------------------------------------------ 17 /account's first frame (account-boot.js, account.js) account-boot.js runs before the first paint and adds acct-boot plus is-account or is-signin: the help page stays hidden until account.js draws the apps or the sign-in panel, so it never flashes first. account.js (or the boot script's 4 s fail-safe) drops the classes when the help page should show. No JS: nothing is hidden. */ body.acct-boot main > :not(#acct) { display: none !important; } body.acct-boot:not(.is-signin) main { min-height: 70svh; } .ac-bar { display: block; border-radius: 6px; background: var(--line); } .ac-title .ac-name { display: block; margin: 0 0 2px; font: 700 24px/1.05 var(--grot); letter-spacing: -0.04em; } .ac-title .ac-bar.ac-name { width: 7ch; height: 25px; } .ac-title .ac-bar.ac-meta { width: 16ch; height: 15px; } .ac-keybar { height: 34px; border-radius: 999px; } .ac-macsbar { width: 10ch; height: 32px; border-radius: 999px; } .ac-icon.ac-blank { width: 56px; height: 56px; margin: 0; border-radius: 14px; background: var(--line); } @media (prefers-reduced-motion: no-preference) { .ac-card.is-skel .ac-bar, .ac-card.is-skel .ac-blank, .ac-loading { animation: ac-wait 1.1s ease-in-out infinite alternate; } } @keyframes ac-wait { to { opacity: .45; } } /* ------------------------------------------------------------------ 18 Site v5 (2026-10-23, Joel): the "mixed" look Light paper pages (the tint theme: tools/chrome.py puts data-theme="tint" on every page's ), and the top of the home page and of each product page, header included, on a dark wash of the product's colour, like Apple's launches. .dark brings back the dark tokens inside any block. */ .dark { --bg: #0e0e0f; --lane: color-mix(in srgb, var(--w, #0e0e0f) 95%, #fff 5%); --raised: color-mix(in srgb, var(--w, #0e0e0f) 91%, #fff 9%); --ink: #f0efea; --muted: #a29f97; --dim: #6b6862; --line: rgba(240, 239, 234, 0.13); --line-strong: rgba(240, 239, 234, 0.85); --hover: rgba(240, 239, 234, 0.06); color: var(--ink); color-scheme: dark; } html[data-theme] :is(.dark.node-lift, .page-lift .dark) { --p: #6fa8d6; --w: #0f161d; } html[data-theme] :is(.dark.node-underlay, .page-underlay .dark) { --p: #9cc47f; --w: #121710; } html[data-theme] :is(.dark.node-scope, .page-scope .dark) { --p: #c93a3f; --w: #1c0f11; } html[data-theme] :is(.dark.node-when, .page-when .dark) { --p: #f07a55; --w: #1c120e; } html[data-theme] :is(.dark.node-stemsep, .page-stemsep .dark) { --p: #6bbfad; --w: #0e1917; } html[data-theme] :is(.dark.node-a2m, .page-a2m .dark) { --p: #a798ee; --w: #14121d; } html[data-theme] :is(.dark.node-second-ear, .page-second-ear .dark) { --p: #fdfaea; --w: #1b1810; } html[data-theme] :is(.dark.node-mysound, .page-mysound .dark) { --p: #6f8cf0; --w: #151c30; } html[data-theme] :is(.dark.node-mosaic, .page-mosaic .dark, .dark.node-mosaic-fx, .page-mosaic-fx .dark) { --p: #f0efea; --w: #141415; } html[data-theme] .dark .btn-fill { background: var(--p, var(--ink)); border-color: var(--p, var(--ink)); color: #0e0e0f; } html[data-theme] .dark .btn-fill:hover { background: var(--p, var(--ink)); filter: brightness(1.08); } html[data-theme] .dark .btn-line { border-color: rgba(240, 239, 234, 0.3); color: var(--ink); } html[data-theme] .dark .btn-line:hover { border-color: rgba(240, 239, 234, 0.6); } html[data-theme] .dark ::selection { background: rgba(240, 239, 234, 0.2); } /* the header on a dark top takes the same wash, so header and hero are one block */ html[data-theme] .hd.dark { background: var(--w); } html[data-theme] .hd.dark .hd-menu nav { background: var(--raised); } /* product pages: the hero and the first screenshot on the dark wash, the rest on the light one */ .pd-top { margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge) clamp(64px, 9vw, 120px); background: var(--w); } .pd-top .pd-hero { padding-top: clamp(40px, 7vw, 96px); } .pd-top > .pd-demo { padding-top: clamp(48px, 7vw, 88px); } /* the home page: lift first, then the other apps as tiles (Apple's home page) */ .ln { display: grid; gap: 12px; padding: 0 var(--edge); } .ln-hero { display: grid; justify-items: center; text-align: center; margin: 0 calc(-1 * var(--edge)); padding: clamp(28px, 5vw, 64px) var(--edge) 0; background: var(--w); overflow: hidden; } .ln-status { margin: 0; color: var(--muted); font: 500 12px/1.4 var(--mono); letter-spacing: .06em; } .ln-status span { color: var(--p); } .ln-hero h1 { margin: 12px 0 0; color: var(--p); font: 700 clamp(84px, 10.5vw, 150px)/.8 var(--grot); letter-spacing: -0.065em; } .ln-hero .ln-line { max-width: 34ch; margin: 18px 0 0; font: 500 clamp(18px, 1.9vw, 23px)/1.25 var(--grot); letter-spacing: -0.02em; text-wrap: balance; } .ln-buy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin: 24px 0 0; } .ln-buy .btn { min-width: 150px; } .ln-note { width: 100%; margin: 2px 0 0; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .ln-h2 { margin: clamp(56px, 8vw, 112px) 0 18px; font: 700 clamp(34px, 5vw, 64px)/.95 var(--grot); letter-spacing: -0.05em; } .ln-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ln-tile { display: grid; grid-template-rows: auto 1fr; justify-items: center; min-height: clamp(440px, 46vw, 620px); padding: clamp(28px, 4vw, 48px) 20px 0; border-radius: var(--r-panel); background: var(--w); text-align: center; overflow: hidden; } .ln-tile.is-wide { grid-column: 1 / -1; min-height: clamp(460px, 44vw, 640px); } .ln-name { margin: 12px 0 0; color: var(--p); font: 700 clamp(52px, 7vw, 92px)/.85 var(--grot); letter-spacing: -0.06em; } .ln-tile .ln-line { max-width: 34ch; margin: 14px auto 0; font: 400 17px/1.35 var(--grot); text-wrap: balance; } .ln-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin: 20px 0 0; } .ln-price { color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .ln-shot { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); } .ln-tile.is-natural .ln-shot { border-radius: 12px; } .ln-pair { align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 1100px); margin-top: 28px; } .ln-pair img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); } .ln-bundle .ln-name { font-size: clamp(44px, 6vw, 80px); } .ln-bundle .ln-name i { font-style: normal; color: var(--muted); } .ln-beta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-panel); background: var(--w); } .ln-beta img { width: 64px; height: 64px; margin: -6px; } .ln-beta b { display: block; color: var(--p); font: 700 30px/1 var(--grot); letter-spacing: -0.04em; } .ln-beta p { margin: 6px 0 0; color: var(--muted); } @media (max-width: 760px) { .ln-grid, .ln-pair { grid-template-columns: 1fr; } .ln-tile, .ln-tile.is-wide { min-height: 0; } .ln-beta { grid-template-columns: auto 1fr; } .ln-beta .btn { grid-column: 1 / -1; justify-self: start; } } /* lift's window plays itself on the home page (main.js "show"): the snare drops in, the build appears, the playhead runs. Muted until "hear it". Overlays use the same boxes as the /lift demo, in % of the full screenshot. */ .show { display: grid; justify-items: center; width: min(900px, 100%); margin: clamp(28px, 4vw, 44px) 0 0; } .show-crop { width: 100%; aspect-ratio: 1140 / 536; overflow: hidden; border-radius: 14px 14px 0 0; box-shadow: inset 0 0 0 1px var(--line); } .show-win { position: relative; margin-top: -17.19%; } /* starts on the line above SOURCE (y 196 of 1140×1246) */ .show-win img { display: block; width: 100%; height: auto; } .show-win .state-built { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; } .show.built .state-built { opacity: 1; } .show-chip { position: absolute; left: 50%; top: 28.25%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--r-panel); background: var(--raised); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1.5px var(--line-strong); font: 700 14px/1 var(--grot); letter-spacing: -0.02em; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) translateY(-340%); pointer-events: none; } .show-chip svg { width: 28px; height: 12px; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; fill: none; } .show.dropping .show-chip { animation: show-drop 1.1s cubic-bezier(.3, .7, .3, 1) forwards; } @keyframes show-drop { 0% { opacity: 0; transform: translate(-50%, -50%) translateY(-340%) rotate(-4deg); } 25% { opacity: 1; } 80% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); } } .show-win .playhead { position: absolute; top: 47.35%; height: 10.83%; left: 3.16%; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--p); box-shadow: 0 0 0 1.5px rgba(14, 14, 15, 0.75); opacity: 0; transition: opacity .2s; } .show.running .playhead { opacity: 1; } .show-hear { gap: 8px; } .show-hear::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; } .show-hear[aria-pressed="true"]::before { width: 8px; height: 10px; border: 0; border-left: 3px solid; border-right: 3px solid; } /* ------------------------------------------------------------------ 19 The footer (2026-10-23): latest launch, columns, the logo big */ .ft2 { margin-top: clamp(80px, 12vw, 160px); padding: clamp(40px, 6vw, 72px) var(--edge) 22px; border-top: 1px solid var(--line); } .ft2-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px 24px; } .ft2-col { display: grid; align-content: start; justify-items: start; gap: 10px; } .ft2-h { margin: 0 0 6px; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; } .ft2-col a { color: var(--ink); text-decoration: none; font-size: 15px; opacity: .82; } .ft2-col a:hover, .ft2-col a[aria-current="page"] { opacity: 1; } .ft2-latest .ft2-new { display: flex; align-items: center; gap: 14px; opacity: 1; } .ft2-new img { width: 64px; height: 64px; margin: -6px; flex: none; } .ft2-new b { display: block; color: var(--p); font: 700 clamp(26px, 2.6vw, 34px)/1 var(--grot); letter-spacing: -0.05em; } .ft2-new small { display: block; margin-top: 5px; color: var(--muted); font: 500 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .ft2 .ft2-mail { overflow-wrap: anywhere; } .ft2-mark { display: block; width: clamp(220px, 42vw, 680px); margin: clamp(56px, 9vw, 120px) 0 0; color: var(--ink); } .ft2-mark .logo { display: block; width: 100%; height: auto; } .ft2-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 22px; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .ft2-base a { color: inherit; text-decoration: none; } .ft2-base a:hover { color: var(--ink); } @media (max-width: 760px) { .ft2-cols { grid-template-columns: 1fr 1fr; } .ft2-latest { grid-column: 1 / -1; } .ft2-col a { padding: 6px 0; } } /* ------------------------------------------------------------------ 20 Site v5 fixes (2026-10-23 QA) */ /* "coming soon" and disabled pills stay outlines on every background (the filled ones looked like a live buy button) */ html[data-theme] body.v4 .btn-fill.is-soon, html[data-theme] body.v4 .btn-fill.is-soon:hover { background: transparent; border-color: var(--line-strong); color: var(--ink); filter: none; } html[data-theme] body.v4 .btn-off, html[data-theme] body.v4 .btn-off:hover { background: none; border-color: var(--line); color: var(--muted); cursor: default; } /* the phone menu: a real divider, and a shadow on the paper */ .hd-menu nav hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line); } html[data-theme] .hd-menu nav { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16), inset 0 0 0 1.5px var(--line); } /* lift's notes on its screenshots keep the light pills they were drawn with */ html[data-theme] .note i { background: #f0efea; box-shadow: 0 0 0 4px rgba(240, 239, 234, 0.22); } html[data-theme] .note b { background: #f0efea; color: #0e0e0f; } /* /lift's phone buy bar matches the dark top it slides over */ html[data-theme] .buybar.dark { background: var(--w); border-top-color: var(--line); } /* fields: outlines that show on the paper */ html[data-theme="tint"] .fbform :is(input, select, textarea) { border-color: rgba(31, 28, 24, 0.38); } html[data-theme="tint"] .si-field input { box-shadow: inset 0 0 0 1.5px rgba(31, 28, 24, 0.38); } html[data-theme="tint"] .si-field input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); } /* second ear's captures come on black: their mat is black too */ html[data-theme] .page-second-ear .wk-media .stage { background: #0b0b0c; box-shadow: none; } /* the home tiles: icons at their size, the underlay + when? pair cut to the same height */ .ln-beta img, .ft2-new img { max-width: none; } .ln-pair { align-items: end; } .ln-pair img { aspect-ratio: 1520 / 1200; object-fit: cover; object-position: top; } .ln-hero .buy-error { margin: 10px auto 0; padding: 8px 0 0; border-left: 0; border-top: 2px solid var(--ink); } @media (max-width: 760px) { .ln-tile.ln-bundle { padding-bottom: 20px; } .ln-pair img { border-radius: 10px; } /* phones: lift's window larger, its left two thirds (drop zone, bars 1-5) */ .show-crop { aspect-ratio: 1140 / 804; } .show-win { width: 150%; margin-left: -6%; margin-top: -25.79%; } /* after the tap, the sample chip's empty row goes */ .sample-wrap:has(.sample.gone) { display: none; } } /* ------------------------------------------------------------------ 21 The header (2026-10-23, Joel: "uma sombrinha pra diferenciar") References on Mobbin: Headspace's soft shadow under a solid bar, Linear's hairline, Superpower and mymind's translucent blurred bar. It stays on top while you scroll (sticky), lets the page show through blurred, and casts a soft shadow, a little stronger once the page has scrolled (main.js adds .is-stuck). */ html[data-theme] .hd { position: sticky; top: 0; z-index: 30; background: var(--bg); box-shadow: 0 1px 0 rgba(31, 28, 24, 0.07), 0 10px 24px -14px rgba(31, 28, 24, 0.28); transition: box-shadow .25s ease, background-color .25s ease; } html[data-theme] .hd.dark { background: var(--w); box-shadow: 0 1px 0 rgba(240, 239, 234, 0.06), 0 12px 28px -14px rgba(0, 0, 0, 0.75); } /* at the top the bar is solid, the same colour as what's under it; scrolled, the page shows through it, blurred */ html[data-theme] .hd.is-stuck { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); box-shadow: 0 1px 0 rgba(31, 28, 24, 0.09), 0 14px 32px -14px rgba(31, 28, 24, 0.38); } html[data-theme] .hd.dark.is-stuck { background: color-mix(in srgb, var(--w) 86%, transparent); box-shadow: 0 1px 0 rgba(240, 239, 234, 0.08), 0 16px 36px -14px rgba(0, 0, 0, 0.85); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-theme] .hd.is-stuck { background: var(--bg); } html[data-theme] .hd.dark.is-stuck { background: var(--w); } } /* anchors and the inline checkout land below the bar */ html { scroll-padding-top: 72px; } /* ------------------------------------------------------------------ 22 Site v5b (2026-10-23, Joel's second round) */ /* the apps in the middle of the header, like Apple's bar; phones and narrow windows keep Menu */ .hd-nav { display: flex; gap: clamp(14px, 1.8vw, 26px); } .hd-nav a { padding: 10px 0; white-space: nowrap; } @media (max-width: 960px) { .hd { grid-template-columns: 1fr auto; } .hd-nav, .hd-right { display: none; } .hd-menu { display: block; } } /* past the product's dark top the bar goes see-through black */ html[data-theme] .hd.dark.is-past { background: color-mix(in srgb, #0e0e0f 74%, transparent); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-theme] .hd.dark.is-past { background: #0e0e0f; } } /* every picture on the home page opens its app */ .ln-name a { color: inherit; text-decoration: none; } .ln-shot-link { align-self: end; display: block; width: 100%; margin-top: 28px; } .ln-tile.is-natural .ln-shot-link { align-self: center; width: min(100%, 520px); margin-bottom: 28px; } .ln-pair a { display: block; } @media (prefers-reduced-motion: no-preference) { .ln-shot, .ln-pair img { transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .ln-shot-link:hover .ln-shot, .ln-pair a:hover img { transform: translateY(-6px); } } /* the quick checkout inside the home hero */ .ln-hero .pd-checkout { width: min(560px, 100%); margin: 22px auto 0; text-align: left; } /* ------------------------------------------------------------------ 23 Borrowed from lift's own UI (Lift/design/guia-visual-321audio.md §6-7) The status line: mono caps, values in ink, separators dim, the build's character in lift blue. */ .show-status { margin: 0 0 12px; color: var(--ink); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; } .show-status i { font-style: normal; color: var(--dim); } .show-status b { font-weight: 500; color: var(--p); } /* the big "lift": each letter goes up 3 px and back in 300 ms, 70 ms apart, on hover, as in the plugin */ .wave span { display: inline-block; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .wave:hover span { animation: lift-wave .3s ease-out; } .wave:hover span:nth-child(2) { animation-delay: 70ms; } .wave:hover span:nth-child(3) { animation-delay: 140ms; } .wave:hover span:nth-child(4) { animation-delay: 210ms; } } @keyframes lift-wave { 50% { transform: translateY(-.04em); } } /* 3 px on the plugin's 80 px logo */ /* the stacked logo in the text colour, for places that can't inline the SVG (account.js, join.html) */ .mark-321 { display: block; aspect-ratio: 296.8 / 156.4; background: currentColor; -webkit-mask: url(/img/logo-321audio.svg) center / contain no-repeat; mask: url(/img/logo-321audio.svg) center / contain no-repeat; } .si-logo.mark-321 { width: 64px; } .jn-logo.mark-321 { width: 52px; } /* ------------------------------------------------------------------ 24 Black is the default again (Joel, 2026-10-23: "prefiro o dark") The v5 layout stays; data-theme="nighttint" on every page (tools/chrome.py), ?look=light shows the paper version. */ /* the header's edge on black pages: a light hairline and a black shadow (the paper shadow can't be seen on black) */ html[data-theme="nighttint"] .hd:not(.dark) { box-shadow: 0 1px 0 rgba(240, 239, 234, 0.07), 0 12px 28px -14px rgba(0, 0, 0, 0.8); } html[data-theme="nighttint"] .hd.is-stuck:not(.dark) { box-shadow: 0 1px 0 rgba(240, 239, 234, 0.09), 0 16px 36px -14px rgba(0, 0, 0, 0.9); } /* past the dark top on the paper look, a lighter shadow; and the open menu matches the black bar */ html[data-theme="tint"] .hd.dark.is-past { box-shadow: 0 1px 0 rgba(240, 239, 234, 0.06), 0 12px 28px -16px rgba(0, 0, 0, 0.35); } html[data-theme] .hd.dark.is-past .hd-menu nav { background: #1c1c1e; } /* screenshots keep an edge on their tile, even when the tile is as dark as the app */ .ln-shot, .ln-pair img { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.45); } /* fields readable on black too */ html[data-theme="nighttint"] .si-field input { box-shadow: inset 0 0 0 1.5px rgba(240, 239, 234, 0.3); } html[data-theme="nighttint"] .si-field input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); } html[data-theme="nighttint"] .fbform :is(input, select, textarea) { border-color: rgba(240, 239, 234, 0.3); } /* the footer: three columns until there's room for four, so the e-mail never breaks; a bigger "back to top" on phones */ @media (max-width: 960px) { .ft2-cols { grid-template-columns: repeat(3, 1fr); } .ft2-latest { grid-column: 1 / -1; } } @media (max-width: 760px) { .ft2-cols { grid-template-columns: 1fr 1fr; } .ft2-base a { padding: 14px 0; margin: -14px 0; } } .ft2 .ft2-mail { overflow-wrap: normal; white-space: nowrap; } @media (max-width: 380px) { .ft2 .ft2-mail { white-space: normal; overflow-wrap: anywhere; } } /* ------------------------------------------------------------------ 25 Site v5c (2026-10-23, Joel's third round) The header's sections: plugins and apps open a list under the bar, like Apple's (Mobbin: apple.com's bar); main.js opens them on hover with a mouse and keeps one open at a time. Without JS they open on click (details). */ .hd-nav { align-items: center; } .hd-cat > summary { padding: 10px 0; list-style: none; cursor: pointer; opacity: .74; transition: opacity .15s; } .hd-cat > summary::-webkit-details-marker { display: none; } .hd-cat > summary:hover, .hd-cat[open] > summary, .hd-cat.is-current > summary { opacity: 1; } .hd-link { opacity: .74; } .hd-link:hover, .hd-link[aria-current="page"] { opacity: 1; } .hd-fly { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 24px 48px -20px rgba(0, 0, 0, 0.6); } html[data-theme] .hd.dark .hd-fly { background: var(--w); } html[data-theme] .hd.dark.is-past .hd-fly, html[data-theme] .hd.is-stuck:not(.dark) .hd-fly { background: color-mix(in srgb, #0e0e0f 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } html[data-theme="tint"] .hd.is-stuck:not(.dark) .hd-fly { background: color-mix(in srgb, var(--bg) 96%, transparent); } .hd-fly-in { display: flex; gap: clamp(40px, 6vw, 96px); width: min(880px, 100%); margin: 0 auto; padding: 26px var(--edge) 34px; } .hd-fly-col { display: grid; align-content: start; gap: 2px; } .hd-fly-h { margin: 0 0 10px; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; } .hd-fly-big { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; text-decoration: none; } .hd-fly-big b { color: var(--p, var(--ink)); font: 700 28px/1.1 var(--grot); letter-spacing: -0.045em; } .hd-fly-big small, .hd-fly-small small { color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .hd-fly-big:hover b, .hd-fly-big[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } .hd-fly-small { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font: 700 17px/1.2 var(--grot); letter-spacing: -0.02em; text-decoration: none; } .hd-fly-small:hover { text-decoration: underline; } /* the phone menu: the same sections, with their labels */ .hd-menu-h { margin: 8px 12px 2px; color: var(--muted); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; } .hd-menu-h:first-child { margin-top: 4px; } /* product pages: the price in the button (as on the home page), the rest in one line under it */ .pd-note { margin: -4px 0 10px; color: var(--ink); opacity: .8; } .pd-pair { margin: 0 0 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .pd-pair a { color: var(--p, var(--ink)); text-decoration: none; } .pd-pair a:hover { text-decoration: underline; } /* underlay + when?: the pair's own page */ .bd-title { font-size: clamp(56px, 9.5vw, 150px); line-height: .9; } .bd-title i { font-style: normal; color: var(--muted); } .bd-title .node-when { color: var(--p); } .bd-pair { margin: 0 auto; } .bd-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bd-app { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .bd-name { margin: 0; font: 700 clamp(40px, 5vw, 64px)/.9 var(--grot); letter-spacing: -0.06em; } .bd-name a { color: var(--p); text-decoration: none; } .bd-line { margin: 0; max-width: 40ch; } .bd-steps { margin: 4px 0; } @media (max-width: 760px) { .bd-apps { grid-template-columns: 1fr; } } /* the footer has five columns now: latest, plugins, apps, help, legal */ @media (min-width: 961px) { .ft2-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } } .bd-steps { display: grid; gap: 12px; margin: 4px 0; padding: 0; list-style: none; counter-reset: bd; } .bd-steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 6px; color: var(--muted); counter-increment: bd; } .bd-steps li::before { content: counter(bd, decimal-leading-zero); grid-row: span 2; padding-top: 3px; color: var(--muted); font: 500 11px/1.4 var(--mono); } .bd-steps li b { display: block; color: var(--ink); font-weight: 700; } /* ------------------------------------------------------------------ 26 Site v5c fixes (2026-10-23 QA) */ /* the header lists: solid (a see-through list over a blurred bar showed the page sharp behind it), full colour, and the summary as tall as the bar so the pointer can travel down into the list */ html[data-theme] .hd.dark.is-past .hd-fly, html[data-theme] .hd.is-stuck:not(.dark) .hd-fly { background: #111113; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="tint"] .hd.is-stuck:not(.dark) .hd-fly { background: var(--bg); } html[data-theme="tint"] .hd:not(.dark) .hd-fly { box-shadow: 0 1px 0 var(--line), 0 18px 36px -18px rgba(31, 28, 24, 0.3); } .hd-fly a { opacity: 1; } .hd-cat > summary { display: flex; align-items: center; height: 56px; padding: 0; } /* product names inside any dark block take their bright colours, on the paper look too */ html[data-theme] .dark .node-lift { --p: #6fa8d6; } html[data-theme] .dark .node-underlay { --p: #9cc47f; } html[data-theme] .dark .node-scope { --p: #c93a3f; } html[data-theme] .dark .node-when { --p: #f07a55; } html[data-theme] .dark .node-stemsep { --p: #6bbfad; } html[data-theme] .dark .node-a2m { --p: #a798ee; } html[data-theme] .dark .node-second-ear { --p: #fdfaea; } html[data-theme] .dark .node-mysound { --p: #6f8cf0; } html[data-theme] .dark :is(.node-mosaic, .node-mosaic-fx) { --p: #f0efea; } /* the phone Menu scrolls when the screen is short, and the lift buy bar steps aside while it is open */ .hd-menu nav { max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; } body:has(.hd-menu[open]) .buybar { visibility: hidden; } /* long one-word names (underlay, stemsep) stay centred on the page */ .pd-hero { max-width: 880px; grid-template-columns: minmax(0, 1fr); } /* ------------------------------------------------------------------ 27 /321hub: the download page for the hub app */ .hb .pd-name { font-size: clamp(88px, 15vw, 200px); } .hb-shot { margin: clamp(32px, 5vw, 56px) auto 0; width: min(1040px, 100%); } .hb-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, 0.7); } .hb-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; } .hb-feat { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-panel); background: var(--lane); box-shadow: inset 0 0 0 1.5px var(--line); } .hb-feat h3 { margin: 0; font: 700 clamp(26px, 2.6vw, 34px)/1 var(--grot); letter-spacing: -0.05em; } .hb-feat p { margin: 0; color: var(--muted); } .hb-k { color: var(--muted); font: 500 11px/1 var(--mono) !important; letter-spacing: .08em; } .hb-try { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 28px 0 0; color: var(--muted); } /* /321hub feature rows: text beside the screenshot, alternating sides */ .hb-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .hb-row:nth-of-type(odd) .hb-txt { order: 2; } .hb-txt { display: grid; gap: 12px; } .hb-txt h2 { margin: 0; font: 700 clamp(34px, 4vw, 54px)/.95 var(--grot); letter-spacing: -0.05em; } .hb-txt p { margin: 0; color: var(--muted); } .hb-txt .hb-k { margin: 0; } .hb-pic { margin: 0; } .hb-pic img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.7); } @media (max-width: 860px) { .hb-row { grid-template-columns: 1fr; } .hb-row:nth-of-type(odd) .hb-txt { order: 0; } } .hb-feats { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .hb-feats { grid-template-columns: 1fr; } } /* mosaic fx (2026-10-30): its window is a narrow portrait (480×716 pt), so the main shot keeps a phone-like width */ .page-mosaic-fx .pd-shot { max-width: 560px; margin-inline: auto; } .page-mosaic-fx .pd-tiles .tile:not(.tile-wide) { max-width: 560px; } /* ------------------------------------------------------------------ 28 Lift launch (2026-11, Joel): calmer type */ /* buttons in sentence case, in the text face, a size up; mono caps stay for small labels only */ body.v4 .btn { font: 600 15px/1 var(--grot); letter-spacing: -0.01em; text-transform: none; min-height: 48px; padding: 0 24px; } body.v4 .btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; } body.v4 .wk-actions .btn { min-height: 50px; font-size: 15px; } .ln-buy .btn { min-width: 168px; } /* the status: one chip, "new" in the product's colour, the rest in plain words */ .ln-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 14px 4px 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: 500 14px/1.2 var(--grot); letter-spacing: -0.005em; text-transform: none; } .ln-status b { padding: 5px 9px 4px; border-radius: 999px; background: var(--p, var(--ink)); color: #0e0e0f; font: 700 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; } .ln-hero h1 { margin-top: 22px; } .pd-hero > .ln-status { margin: 0 0 28px; } .pd-hero .wk-text { margin-top: 24px; } /* the line under the buttons: plain text, not tracking-wide caps */ .ln-note { margin: 8px 0 0; color: var(--muted); font: 400 14px/1.45 var(--grot); letter-spacing: -0.005em; text-transform: none; } .pd-hero .ln-note { width: auto; margin: 0; } .pd-hero .ln-note + .ln-note { margin-top: 4px; } .ln-links { width: 100%; display: flex; justify-content: center; gap: 22px; margin: 14px 0 0; } .ln-links .linkish { color: var(--ink); font: 500 15px/1.3 var(--grot); letter-spacing: -0.01em; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; background: none; border: 0; padding: 0; cursor: pointer; } .ln-links .linkish:hover { text-decoration-color: currentColor; } .ln-links .show-hear::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: 1px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; } .ln-links .show-hear[aria-pressed="true"]::before { width: 8px; height: 10px; border: 0; border-left: 3px solid; border-right: 3px solid; box-sizing: border-box; } /* coming next: the two names in their colours, one line each, nothing to click yet */ .ln-next { padding: clamp(72px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); text-align: center; } .ln-next .ln-h2 { margin: 0 0 clamp(28px, 4vw, 44px); } .ln-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1120px; margin: 0 auto; } .ln-next-item { padding: clamp(36px, 5vw, 64px) 24px; border-radius: var(--r-panel); background: var(--w); } .ln-next-name { margin: 0 0 12px; color: var(--p); font: 700 clamp(52px, 7vw, 92px)/.85 var(--grot); letter-spacing: -0.06em; } .ln-next-item p:last-child { max-width: 30ch; margin: 0 auto; color: var(--muted); font: 400 17px/1.4 var(--grot); } @media (max-width: 720px) { .ln-next-grid { grid-template-columns: 1fr; } } /* no catalogue nav at launch: Account sits on the right at every width */ .hd-right { grid-column: -2; } @media (max-width: 720px) { .hd-right { display: block; } } /* sign in: the way to a new account, and the agreement line on it */ .si-alt { margin: 14px 0 0; font-size: 14px; } .si-alt .si-link { min-height: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .si-agree { font-size: 13px; } .si-agree a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* 29. underlay and when?, free with an account (2026-11-04): the home tiles link to their pages */ a.ln-next-item { display: block; color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } a.ln-next-item:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--p) inset; } a.ln-next-item:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; } .ft2-latest .ft2-new + .ft2-new { margin-top: 14px; }