/* ═══════════════════════════════════════════════════════════════════════ Glimmer website — one stylesheet, no build step. The look follows the app: a deep colour ground, one lit object (the diamond), Newsreader for anything that speaks, the system sans for anything you operate. The ground is a variable: it changes with the feeling picked in the preview, the same way the app's home screen does. Rules this file keeps (see README, "Constraints"): - no backdrop-filter, no vh/dvh layout sizing, nothing essential fixed (in-app browsers on iOS get these wrong) - animate transform and opacity only - no inline styles anywhere: the CSP is style-src 'self' ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } /* Registered so the ground can cross-fade when a feeling is picked. Browsers without @property simply switch colour at once. */ @property --ground { syntax: ""; inherits: true; initial-value: #10393e; } @property --ground-deep { syntax: ""; inherits: true; initial-value: #0d2a2e; } @property --ground-lift { syntax: ""; inherits: true; initial-value: #1a5c61; } @property --glow { syntax: ""; inherits: true; initial-value: #39a0a3; } @property --accent { syntax: ""; inherits: true; initial-value: #a6ebe6; } :root { /* Ground: jade-petrol by default. Never black, never white, never grey. */ --ground: #10393e; --ground-deep: #0d2a2e; --ground-lift: #1a5c61; --glow: #39a0a3; --accent: #a6ebe6; /* Text and lines — the app's "veil" (TokenHex.veil) at its three weights */ --veil: #eaf0f7; --veil-72: rgb(234 240 247 / 0.78); --veil-56: rgb(234 240 247 / 0.6); --hairline: rgb(234 240 247 / 0.13); --ink: #0b111a; /* The four feeling families (Spectrum.swift centres: red, amber, teal-green, indigo) */ --wired: #f28a9d; --bright: #f2c57c; --settled: #8fdcc0; --heavy: #aab2f7; --spectrum: linear-gradient(90deg, var(--wired) 0%, var(--bright) 36%, var(--settled) 68%, var(--heavy) 100%); /* Light fan under the diamond: five beams */ --f1: rgb(242 197 124 / 0.55); --f2: rgb(143 220 192 / 0.5); --f3: rgb(255 255 255 / 0.4); --f4: rgb(170 178 247 / 0.55); --f5: rgb(242 138 157 / 0.55); --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --radius-card: 28px; --gutter: clamp(20px, 5vw, 40px); transition: --ground 1.4s ease, --ground-deep 1.4s ease, --ground-lift 1.4s ease, --glow 1.4s ease, --accent 1.4s ease; } /* A family's ground. On (feel-*) the whole page takes it, following the feeling named in the preview. On a section or a card (tone-*) only that takes it. */ :root.feel-wired, .tone-wired { --ground: #3d1732; --ground-deep: #2c1226; --ground-lift: #642850; --glow: #c44a72; --accent: #ffb0c0; } :root.feel-bright, .tone-bright { --ground: #402c14; --ground-deep: #2e200f; --ground-lift: #694a1c; --glow: #c99133; --accent: #ffd896; } :root.feel-heavy, .tone-heavy { --ground: #212258; --ground-deep: #181940; --ground-lift: #393987; --glow: #666bd3; --accent: #c8ccff; } :root.feel-settled, .tone-settled { --ground: #103f33; --ground-deep: #0d2e26; --ground-lift: #1c6351; --glow: #37af89; --accent: #afefd6; } :root.feel-wired { --f1: rgb(242 138 157 / 0.5); --f2: rgb(242 138 157 / 0.3); --f3: rgb(255 214 222 / 0.45); --f4: rgb(242 138 157 / 0.3); --f5: rgb(242 138 157 / 0.5); } :root.feel-bright { --f1: rgb(242 197 124 / 0.5); --f2: rgb(242 197 124 / 0.3); --f3: rgb(255 238 208 / 0.45); --f4: rgb(242 197 124 / 0.3); --f5: rgb(242 197 124 / 0.5); } :root.feel-heavy { --f1: rgb(170 178 247 / 0.5); --f2: rgb(170 178 247 / 0.3); --f3: rgb(226 229 255 / 0.45); --f4: rgb(170 178 247 / 0.3); --f5: rgb(170 178 247 / 0.5); } :root.feel-settled { --f1: rgb(143 220 192 / 0.5); --f2: rgb(143 220 192 / 0.3); --f3: rgb(220 250 238 / 0.45); --f4: rgb(143 220 192 / 0.3); --f5: rgb(143 220 192 / 0.5); } /* The drained ground: the story's blocker beats, and the "most blockers" side of the comparison. */ :root.feel-flat, .tone-flat { --ground: #1e2428; --ground-deep: #14181b; --ground-lift: #2e363b; --glow: #48525a; --accent: #b4bdc4; } :root.feel-flat { --f1: rgb(180 189 196 / 0.25); --f2: rgb(180 189 196 / 0.15); --f3: rgb(220 226 230 / 0.25); --f4: rgb(180 189 196 / 0.15); --f5: rgb(180 189 196 / 0.25); } /* A section in its own family colour, fading into the page above and below. */ .section[class*="tone-"] { background: radial-gradient(64% 38% at 82% 36%, var(--ground-lift) 0%, transparent 72%), radial-gradient(54% 34% at 12% 70%, var(--ground) 0%, transparent 72%), linear-gradient(180deg, transparent 0, var(--ground-deep) 150px, var(--ground-deep) calc(100% - 150px), transparent 100%); } /* The four colours as one line of type. */ .spectrum { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--bright); padding-bottom: 0.08em; /* descenders stay inside the clip */ } /* ───────────────────────────── Base ───────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; position: relative; background-color: var(--ground-deep); color: var(--veil); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } /* Grain over everything, so the gradients read as light and not as a ramp. */ body::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.11; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } main, .footer, .nav { position: relative; z-index: 2; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; color: inherit; } h1, h2, h3, p, ol, ul { margin: 0; } ol, ul { padding: 0; list-style: none; } h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 9.6vw, 4.9rem); line-height: 1.02; } h2 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.08; } h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; } .eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--accent); } .lede { font-size: clamp(1.0625rem, 2.6vw, 1.25rem); line-height: 1.5; color: var(--veil-72); text-wrap: pretty; } .body { color: var(--veil-72); text-wrap: pretty; } .fine { font-size: 0.8125rem; line-height: 1.5; color: var(--veil-56); } .fine a { color: var(--veil-72); text-underline-offset: 3px; } .caption { font-size: 0.8125rem; line-height: 1.5; color: var(--veil-56); text-align: center; max-width: 34ch; margin-inline: auto; } .container { width: min(1120px, 100%); margin-inline: auto; padding-inline: var(--gutter); } .container.narrow { width: min(780px, 100%); } .section { position: relative; padding-block: clamp(72px, 13vw, 144px); } .section-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 6vw, 60px); max-width: 44rem; } .visually-hidden, .honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--veil); color: var(--ink); font-weight: 600; } .skip-link:focus { top: 16px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* The app's one bright control: the pale blue pill ("Allow Screen Time"). */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #edf3ff 0%, #c3d4fb 100%); color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 14px 34px -14px rgb(160 190 255 / 0.75); transition: transform 0.18s ease, opacity 0.18s ease; -webkit-tap-highlight-color: transparent; } .button:hover { transform: translateY(-1px); } .button:active { transform: translateY(1px) scale(0.985); } .button[disabled] { opacity: 0.55; cursor: default; transform: none; } .button-small { min-height: 40px; padding: 0 18px; font-size: 0.9rem; } .button-quiet { background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.05)); color: var(--veil); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px var(--hairline); } /* ───────────────────────────── Nav ─────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 20; padding: 12px var(--gutter) 0; } .nav-capsule { width: min(1120px, 100%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--ground-deep); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), inset 0 0 0 1px var(--hairline), 0 18px 40px -24px rgb(0 0 0 / 0.7); } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.375rem; letter-spacing: -0.02em; text-decoration: none; color: var(--veil); } .brand img { width: 32px; height: 32px; border-radius: 9px; } .nav-links { display: none; gap: 28px; font-size: 0.9rem; color: var(--veil-72); } .nav-links a { text-decoration: none; padding: 8px 0; } .nav-links a:hover { color: var(--veil); } @media (min-width: 860px) { .nav-links { display: flex; } } /* ───────────────────────────── Hero ────────────────────────────── */ .hero { --hp: clamp(270px, 78vw, 312px); /* the phone's width */ --cw: clamp(178px, 50vw, 204px); /* the diamond's width, inside it */ position: relative; padding: 0 var(--gutter) clamp(56px, 9vw, 96px); margin-top: -64px; /* the ground runs up behind the nav */ padding-top: calc(64px + clamp(28px, 6vw, 60px)); text-align: center; overflow-x: clip; background: radial-gradient(90% 46% at 50% 26%, var(--ground-lift) 0%, transparent 72%), radial-gradient(140% 80% at 50% 0%, var(--ground) 0%, transparent 78%); } /* Words, then the phone. Side by side from 900px. */ .hero-grid { display: grid; justify-items: center; gap: clamp(34px, 7vw, 52px); max-width: 68rem; margin-inline: auto; } /* The phone: the screen Glimmer shows before a paused app opens. The light stays inside the glass. */ .hero-phone { position: relative; width: var(--hp); } .hero-phone::before { content: ""; position: absolute; z-index: 0; inset: -14% -42% -8%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--glow) 0%, transparent 100%); opacity: 0.34; transition: background 0.6s ease; } .hero-screen { position: relative; z-index: 1; display: grid; justify-items: center; gap: 13px; overflow: hidden; padding: 54px 18px 28px; border-radius: 46px; background: radial-gradient(130% 62% at 50% 34%, var(--ground-lift) 0%, var(--ground-deep) 100%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--veil) 44%, transparent), 0 0 0 8px var(--ink), 0 0 0 9.5px color-mix(in srgb, var(--veil) 24%, transparent), 0 50px 80px -44px rgb(0 0 0 / 0.95); } /* The island and the home bar. */ .hero-screen::before, .hero-screen::after { content: ""; position: absolute; z-index: 5; left: 50%; border-radius: 999px; } .hero-screen::before { top: 14px; width: 90px; height: 26px; margin-left: -45px; background: var(--ink); } .hero-screen::after { bottom: 9px; width: 116px; height: 4px; margin-left: -58px; background: var(--veil); opacity: 0.7; } .hp-before { position: relative; z-index: 4; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--veil-72); } .hp-result { position: relative; z-index: 4; min-height: 1.35em; font-size: 0.82rem; line-height: 1.35; color: var(--veil); } .hero-phone-note { position: relative; z-index: 1; margin-top: 16px; font-size: 0.85rem; color: var(--veil-56); text-wrap: balance; } .hero-light { position: relative; height: calc(var(--cw) * 0.98 + 28px); margin-inline: auto; width: var(--cw); pointer-events: none; } .crystal { position: absolute; left: 0; bottom: 0; width: var(--cw); height: var(--cw); z-index: 3; animation: float 8s ease-in-out infinite; } /* The white beam coming in from above — the app icon's vertical line. */ .beam-in { position: absolute; z-index: 2; left: 50%; top: -120px; bottom: calc(var(--cw) * 0.86); width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent 0%, rgb(255 255 255 / 0.5) 35%, #fff 100%); box-shadow: 0 0 14px 2px rgb(255 255 255 / 0.35); border-radius: 2px; animation: pulse 8s ease-in-out infinite; } .halo { position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(var(--cw) * 2.3); height: calc(var(--cw) * 2.3); margin: calc(var(--cw) * -1.1) 0 0 calc(var(--cw) * -1.15); border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 62%); opacity: 0.42; } /* Five beams leaving the diamond's tip. */ .fan { position: absolute; z-index: 1; left: 50%; top: calc(100% - var(--cw) * 0.225); width: min(1100px, 190vw); height: calc(var(--cw) * 1.9); transform: translateX(-50%); background: conic-gradient(from 90deg at 50% 0%, transparent 20deg, var(--f1) 34deg, transparent 49deg, var(--f2) 63deg, transparent 77deg, var(--f3) 90deg, transparent 103deg, var(--f4) 117deg, transparent 131deg, var(--f5) 146deg, transparent 160deg); -webkit-mask-image: radial-gradient(ellipse 58% 92% at 50% 0%, #000 0%, rgb(0 0 0 / 0.45) 42%, transparent 76%); mask-image: radial-gradient(ellipse 58% 92% at 50% 0%, #000 0%, rgb(0 0 0 / 0.45) 42%, transparent 76%); mix-blend-mode: screen; opacity: 0.85; } /* The live diamond (crystal.js) sits exactly over the still image. */ .crystal-live { position: absolute; left: 0; bottom: 0; z-index: 3; width: var(--cw); height: var(--cw); pointer-events: auto; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity 0.6s ease; } .is-dragging .crystal-live { cursor: grabbing; } /* Light on the floor under the tip. The canvas is wide and low-resolution on purpose: it is soft light. */ .floor { --fw: calc(var(--hp) * 2.2); position: absolute; z-index: 1; left: 50%; top: calc(28px + var(--cw) * 0.7565 - var(--fw) * 0.12); width: var(--fw); height: calc(var(--fw) * 0.75); margin-left: calc(var(--fw) * -0.5); pointer-events: none; opacity: 0; transition: opacity 0.9s ease; } .hero-light.is-live .crystal-live, .hero-light.is-live .floor { opacity: 1; } .hero-light.is-live .crystal, .hero-light.is-live .fan { opacity: 0; animation: none; } .hero-light.is-live .crystal-live { animation: float 8s ease-in-out infinite; } .hero-light .crystal, .hero-light .fan { transition: opacity 0.6s ease; } /* The app's question, with four answers. Tapping one colours the diamond and the page. */ .hero-ask { position: relative; z-index: 4; display: grid; gap: 12px; justify-items: center; width: 100%; } .hero-question { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; color: var(--veil); } .hero-copy { position: relative; z-index: 4; display: grid; justify-items: center; gap: 18px; max-width: 40rem; } .hero-copy h1 { font-size: clamp(2.5rem, 9vw, 4.3rem); } .hero-copy .lede { max-width: 36rem; color: var(--veil); } /* What it asks of you, as three counted steps. */ @media (min-width: 900px) { .hero { text-align: left; } .hero-grid { grid-template-columns: minmax(0, 1fr) var(--hp); align-items: center; justify-items: stretch; column-gap: clamp(36px, 6vw, 84px); } .hero-copy { justify-items: start; max-width: 35rem; } .hero-copy h1 { font-size: clamp(2.9rem, 5.4vw, 4.3rem); } .hero-science { justify-content: flex-start; } .hero .join .fine, .hero .join-status { text-align: left; } .hero-phone { text-align: center; } } /* ───────────────────────────── Join form ───────────────────────── */ .join { width: min(480px, 100%); display: grid; gap: 12px; margin-top: 8px; } .join-row { display: grid; gap: 10px; } .join :is(input[type="email"], input[type="tel"]) { width: 100%; min-height: 56px; padding: 0 22px; border: 0; border-radius: 999px; outline: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.05)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(234 240 247 / 0.16); color: var(--veil); font-family: var(--sans); font-size: 1rem; /* 16px: iOS does not zoom */ -webkit-appearance: none; appearance: none; } .join :is(input[type="email"], input[type="tel"])::placeholder { color: var(--veil-56); } .join :is(input[type="email"], input[type="tel"]):focus-visible { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 2px var(--accent); } .join input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--wired); } .join .button { min-height: 56px; width: 100%; } .join-status { min-height: 1.3em; font-size: 0.875rem; color: var(--veil); text-align: center; } .join-status:empty { display: none; } .join .fine { text-align: center; text-wrap: pretty; } @media (min-width: 480px) { /* One capsule: field with the button inside it. */ .join-row { grid-template-columns: 1fr auto; gap: 0; padding: 6px; border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.05)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(234 240 247 / 0.16); } .join-row:focus-within { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 2px var(--accent); } .join :is(input[type="email"], input[type="tel"]), .join :is(input[type="email"], input[type="tel"]):focus-visible { min-height: 48px; background: none; box-shadow: none; padding-left: 20px; } .join .button { min-height: 48px; width: auto; } } .joined { width: min(480px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px 24px; border-radius: var(--radius-card); background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.035)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px var(--hairline); } .joined-title { font-family: var(--serif); font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.1; } .joined-body { color: var(--veil-72); } /* The second step: a mobile number, if they want a text. */ .phone-join { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--hairline); justify-items: stretch; } .text-ask { font-weight: 600; color: var(--veil); text-align: center; } /* not .phone-ask: that is the story phone's screen */ .phone-done { font-weight: 600; color: var(--accent); } .joined .fine:empty { display: none; } /* ───────────────────────────── Why: the scroll story ──────────── A tall section whose stage stays pinned while you scroll through it. site.js writes data-beat (0..5), data-moment (0..4), .is-go, .is-off, --sweep and the count. The picture is one grid, read in order: what happens, what you feel, what you do. On a phone it runs down the left and across to the phone; from 720px it is one row. Every part sits in its own grid cell, so nothing can land on anything else at an odd width. One reach is played at a time. site.js restarts the keyframes below (all --cycle long) by toggling .is-go, so they always start together. Everything that moves is a transform or an opacity. */ @property --sweep { syntax: ""; inherits: true; initial-value: 0deg; } /* What happens: five moments in a day (the fifth is in "Pass 33"), all on screen, the one that is reaching lit. */ .moment { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; height: var(--ch); padding: 0 10px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--veil) 8%, transparent); color: var(--veil-72); box-shadow: inset 0 0 0 1px var(--hairline); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; } /* Each moment is lit by its time of day. Skies are pictures, not theme colours: afternoon gold, morning peach, noon blue, night. */ .moment::before { content: ""; position: absolute; inset: 0; background: var(--sky); opacity: 0; transition: opacity 0.5s ease; } .moment > * { position: relative; } /* The line from one step to the next, and the dot that travels it. */ .link { position: relative; z-index: 1; transition: opacity 0.6s ease; } .link::before { content: ""; position: absolute; background: color-mix(in srgb, var(--veil) 30%, transparent); } /* What you feel. Hidden in the first beat: that is the point of the second. */ .feel { grid-area: feel; justify-self: stretch; position: relative; z-index: 3; display: grid; place-items: center; padding-block: 3px; } /* On a phone the path turns a corner here: this is the piece from under the moment across to the arrow. */ .feel::before { content: ""; position: absolute; z-index: -1; left: 50%; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: color-mix(in srgb, var(--veil) 30%, transparent); transition: opacity 0.6s ease; } .feel-pill { opacity: 0; transform: scale(0.5); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Four apps, one per moment. */ .app { position: absolute; inset: 0; overflow: hidden; background: #10151a; opacity: 0; transition: opacity 0.35s ease; } /* the app opens as the dot lands */ .app-bar { position: relative; z-index: 2; padding: calc(var(--u) * 14.5) calc(var(--u) * 7) calc(var(--u) * 4.5); background: #10151a; box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); font-size: calc(var(--u) * 7.8); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; text-align: left; color: #f2f5f8; } .app-feed { animation: feed 9s linear infinite; } .app-feed i { display: block; position: relative; } .app-feed i::before, .app-feed i::after, .post::before { content: ""; position: absolute; } .post { display: block; position: relative; --face: var(--wired); } .post:nth-child(3n + 2) { --face: var(--bright); } .post:nth-child(3n) { --face: var(--settled); } /* Each feed is its three posts twice, so half its height is one clean loop. It runs while the phone is open. */ @keyframes feed { to { transform: translateY(-50%); } } /* Stand-ins for photos: small drawn scenes with a blur over them (assets/story/*.svg), so they read as real pictures out of focus. Each fills whatever shape it is given. */ .app-feed .pic { background: #1c232b center / cover no-repeat; } .app-feed .p-beach { background-image: url("/assets/story/beach.svg"); } .app-feed .p-table { background-image: url("/assets/story/table.svg"); } .app-feed .p-park { background-image: url("/assets/story/dog.svg"); } /* A month of them: the ring fills as you scroll (9, 8, 4 and 2 of 23), the count under it. */ .numeral { font-family: var(--sans); font-weight: 300; font-variant-numeric: tabular-nums; line-height: 0.95; letter-spacing: -0.05em; color: var(--veil); } /* ── One reach, played ───────────────────────────────────────── */ /* Straight through: nobody noticed a feeling on the way. */ /* Through the feeling, after a beat spent behind it. */ /* Up to the lock, and turned away. */ /* The step the dot is in lights up. */ /* And the note about that step gives a small jump. "scale" is its own property, so it adds to the note's tilt. */ /* The moment that is reaching: its drawing jumps as the dot leaves. */ /* The feeling swells as the dot passes through it, lands back on it, or stops at it. */ /* The phone takes the reach: it opens, or it refuses. */ /* A note: one bold line with a word marked, and a quieter line under it. It pops in with a little overshoot, and the marker is drawn across its word just after. From 720px it is a card with a tail. */ .note b { font-size: 1.08rem; font-weight: 650; line-height: 1.22; letter-spacing: -0.015em; } .note span { font-size: 0.9rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--veil-72); } /* A note that is three steps. On a phone they run on as one line of text; from 720px each is its own line. The marker crosses the three verbs in turn. */ .note.steps b:nth-child(2) mark::before { transition-delay: 0.6s; } .note.steps b:nth-child(3) mark::before { transition-delay: 0.95s; } .story-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 13px; margin-top: 6px; font-size: 0.78rem; font-weight: 400; color: var(--veil-72); } .story-legend span { display: inline-flex; align-items: center; gap: 6px; } .story-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); } .story-legend b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--veil); } .l-wired { --dot: var(--wired); } .l-heavy { --dot: var(--heavy); } .l-bright { --dot: var(--bright); } .l-settled { --dot: var(--settled); } /* ── From 720px: one row, left to right ──────────────────────── */ @media (min-width: 720px) { .moment { padding: 0 13px; gap: 1px 11px; border-radius: 14px; grid-template-columns: auto 1fr; grid-template-areas: "pic what" "pic when"; align-content: center; } /* on to the phone, which is narrower than its column */ .feel { padding: 0; justify-self: center; } .feel::before { display: none; } /* Notes are cards here, a little tilted, each with a tail that points up at what it is about. They may be a touch wider than their column, but never by enough to meet the note in the next one. */ .note b { font-size: 1.1rem; } .note.steps b { font-size: 1.02rem; } } @media (min-width: 900px) { .moment { padding: 0 15px; column-gap: 13px; } .note b { font-size: 1.2rem; } .note.steps b { font-size: 1.12rem; } .note span { font-size: 0.95rem; } } /* The sixth card is the question the next section answers. It is plain glass with the spectrum on its edge, so it reads as the turn and not as a sixth complaint. */ .pain .section-head .body b, .different .section-head .body b, .verbs p b { font-weight: 650; color: var(--veil); } .sit-grid > .sources { grid-column: 1 / -1; margin-top: 0; } /* One number for each of the three ways, above the switch that compares them. */ .to-cell sup { font-size: 0.68em; color: var(--accent); margin-left: 2px; } /* ───────────────────────────── The quick way costs more ────────── One feeling, two ways to deal with it, followed over time. Left is grey and goes nowhere; right is in colour. Two columns at every width: the point is the comparison. */ .tradeoff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .to-head { padding: 0 4px 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; } .to-head.to-a { color: #aab3ba; } .to-head.to-b { color: var(--accent); } .to-when { grid-column: 1 / -1; margin-top: 12px; padding-left: 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--veil-56); } .to-cell { padding: 16px 16px 18px; border-radius: 20px; font-family: var(--serif); font-size: clamp(1.05rem, 3.5vw, 1.42rem); line-height: 1.18; letter-spacing: -0.012em; text-wrap: pretty; } .to-cell.to-a { background: #23292e; color: #b9c1c7; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); } .to-cell.to-b { background: linear-gradient(150deg, var(--ground-lift), var(--ground) 78%); color: var(--veil); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); } .to-cell a { color: inherit; } @media (min-width: 720px) { .tradeoff { gap: 12px 18px; } .to-cell { padding: 22px 24px 24px; border-radius: 24px; } } /* ───────────────────────────── A button between sections ────────── */ .cta-band { display: grid; justify-items: center; gap: 14px; margin-top: clamp(34px, 6vw, 56px); text-align: center; } .cta-band p { max-width: 24ch; font-family: var(--serif); font-size: clamp(1.4rem, 4.4vw, 1.8rem); line-height: 1.12; letter-spacing: -0.018em; text-wrap: balance; color: var(--veil); } .cta-band .button { min-height: 52px; padding-inline: 28px; } .coming .sit-copy .button { min-height: 52px; padding-inline: 28px; } /* ───────────────────────────── Sources ────────────────────────── A number in the text (.cite) opens the paper it stands for. Under each section, .sources lists that section's papers, numbered from 1 in the order they were cited, each with what it cannot show. .science-chip is the "Backed by science" mark; as a link it goes to the research section. */ .science-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: 0.8125rem; line-height: 1.2; color: var(--veil-72); background: color-mix(in srgb, var(--veil) 9%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); } .science-chip::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 0.72rem; font-weight: 800; } .science-chip b { font-weight: 650; letter-spacing: 0.01em; color: var(--veil); } a.science-chip { transition: background-color 0.25s ease; } a.science-chip:hover { background: color-mix(in srgb, var(--veil) 16%, transparent); } .hero-science, .closing-science { display: flex; justify-content: center; } .sources { margin-top: clamp(26px, 5vw, 44px); padding-top: 16px; border-top: 1px solid var(--hairline); text-align: left; } .sources-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.8125rem; color: var(--veil-56); } .sources ol { margin-top: 14px; padding-left: 1.6em; list-style: decimal; font-size: 0.8rem; line-height: 1.48; color: var(--veil-56); } .sources li { margin-bottom: 8px; padding-left: 2px; break-inside: avoid; } .sources li::marker { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .sources li a { color: var(--veil); text-decoration: underline; text-decoration-color: var(--veil-56); text-underline-offset: 3px; } .sources li a:hover { text-decoration-color: var(--accent); } @media (min-width: 720px) { .sources ol { columns: 2; column-gap: 40px; } .sit .sources ol { columns: 1; } } /* ───────────────────────────── The band of words ───────────────── */ .marquee { display: grid; gap: 10px; padding-block: 28px 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-row { display: flex; gap: 30px; width: max-content; font-family: var(--serif); font-size: clamp(1.3rem, 4.4vw, 2rem); letter-spacing: -0.015em; white-space: nowrap; animation: drift 80s linear infinite; } .marquee-reverse { animation-direction: reverse; animation-duration: 96s; } .marquee-row span { opacity: 0.86; } .marquee-row .w-wired { color: var(--wired); } .marquee-row .w-bright { color: var(--bright); } .marquee-row .w-heavy { color: var(--heavy); } .marquee-row .w-settled { color: var(--settled); } .marquee-caption { text-align: center; font-size: 0.8125rem; color: var(--veil-56); padding: 4px var(--gutter) 0; } /* ───────────────────────────── The pause ───────────────────────── */ .try { background: radial-gradient(70% 50% at 82% 45%, var(--ground) 0%, transparent 70%); } @media (min-width: 900px) { .steps { grid-area: steps; } } .steps { display: grid; gap: 4px; align-content: start; } .steps li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 16px 18px; border-radius: 20px; color: var(--veil-56); } .steps li h3 { color: var(--veil-72); margin-bottom: 4px; } .steps li p { font-size: 0.95rem; } /* ───────────────────────────── Phone ───────────────────────────── */ .phone { position: relative; width: min(310px, 84vw); aspect-ratio: 480 / 1043; padding: 9px; border-radius: 50px; background: linear-gradient(155deg, #4a5559 0%, #171d20 38%, #0d1113 62%, #343d41 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 60px 90px -50px rgb(0 0 0 / 0.85), 0 0 110px -26px var(--glow); } /* ───────────────────────────── Why feel it: the stack ─────────── Cards stick a little lower than the one before, so they pile up as you scroll. */ .whyfeel { background: radial-gradient(70% 30% at 50% 8%, var(--ground) 0%, transparent 72%); } .whyfeel h2 { font-size: clamp(2.1rem, 6.6vw, 3.6rem); } .stack { display: grid; gap: 18px; counter-reset: card; } .stack-card { position: sticky; top: calc(84px + var(--i, 0) * 11px); display: grid; gap: 14px; align-content: start; min-height: 300px; padding: clamp(26px, 5vw, 40px); border-radius: 32px; background: linear-gradient(150deg, var(--ground-lift) 0%, var(--ground) 58%, var(--ground-deep) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 -18px 40px -22px rgb(0 0 0 / 0.55); overflow: hidden; } .stack-card::after { /* the family's light, top right */ content: ""; position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 66%); opacity: 0.5; pointer-events: none; } .stack-card:nth-child(1) { --i: 0; } .stack-card:nth-child(2) { --i: 1; } .stack-card:nth-child(3) { --i: 2; } .stack-card:nth-child(4) { --i: 3; } .stack-card:nth-child(5) { --i: 4; } .stack-card:nth-child(6) { --i: 5; } .stack-card:nth-child(7) { --i: 6; } .stack-card:nth-child(8) { --i: 7; } .stack-card > * { position: relative; z-index: 1; } .stack-tag { display: flex; align-items: center; gap: 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .stack-tag b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--ground-deep); font-size: 0.86rem; letter-spacing: 0; font-variant-numeric: tabular-nums; } .stack-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 5.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } .stack-card p:not(.stack-tag) { color: var(--veil-72); font-size: 1.05rem; max-width: 52ch; text-wrap: pretty; } .stack-card sup, .sit sup { font-size: 0.68em; color: var(--accent); margin-left: 2px; } .stack-card a, .sit a { color: inherit; text-decoration: none; } /* ───────────────────────────── Sit with it ─────────────────────── */ .sit-grid { display: grid; gap: clamp(44px, 8vw, 72px); align-items: center; } .sit-copy { display: grid; gap: 20px; } .sit-stage { display: grid; gap: 22px; justify-items: center; } @media (min-width: 900px) { .sit-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } } .verbs { display: grid; gap: 10px; margin-top: 6px; } .verbs li { --c: var(--accent); display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; padding: 16px 18px; border-radius: 20px; background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 3px 0 0 var(--c); } .verbs h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.015em; color: var(--c); } .verbs p { color: var(--veil-72); font-size: 0.98rem; } .verbs .v-notice { --c: var(--settled); } .verbs .v-name { --c: var(--bright); } .verbs .v-welcome { --c: var(--wired); } /* One breath, to try. Three soft rings grow for four seconds and settle for six, on ONE timeline (@keyframes breathe), so nothing snaps between states: they start and end at the size they rest at. The middle is a button before and after, and a plain word while the breath runs. */ .breath { position: relative; width: min(300px, 78vw); aspect-ratio: 1; display: grid; place-items: center; } .breath-ring { position: absolute; inset: 0; border-radius: 50%; transform: scale(0.52); opacity: 0.6; } .r1 { background: radial-gradient(circle, transparent 46%, color-mix(in srgb, var(--wired) 72%, transparent) 60%, transparent 72%); } .r2 { inset: 9%; background: radial-gradient(circle, transparent 42%, color-mix(in srgb, var(--bright) 70%, transparent) 58%, transparent 72%); } .r3 { inset: 18%; background: radial-gradient(circle, color-mix(in srgb, var(--settled) 60%, var(--ground-lift)) 0%, color-mix(in srgb, var(--settled) 34%, transparent) 52%, transparent 72%); } .breath.is-breathing .breath-ring { animation: breathe 10s cubic-bezier(0.4, 0, 0.3, 1) both; } .breath.is-breathing .r2 { animation-delay: 0.1s; } .breath.is-breathing .r1 { animation-delay: 0.2s; } @keyframes breathe { 0% { transform: scale(0.52); opacity: 0.6; } 40% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(0.52); opacity: 0.6; } } .breath-button { position: relative; z-index: 2; width: 44%; aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; padding: 10px; background: none; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease; } /* The light disc is its own layer, so it can fade out and leave the word. */ .breath-button::before { content: ""; position: absolute; inset: 0; border-radius: 50%; transition: opacity 0.6s ease; background: linear-gradient(180deg, #edf3ff, #c3d4fb); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 18px 44px -16px rgb(0 0 0 / 0.6); } .breath-button > span { position: relative; transition: color 0.6s ease; } .breath-button:focus:not(:focus-visible) { outline: none; } .breath-button:active { transform: scale(0.96); } .breath.is-breathing .breath-button { pointer-events: none; outline: none; } .breath.is-breathing .breath-button::before { opacity: 0; } .breath.is-breathing .breath-button > span { color: var(--veil); } /* ───────────────────────────── What's different: the switch ───── One switch flips six cards between what most blockers do (grey, locked) and what Glimmer does (the family's colour). One typeface per card. */ .different { transition: --ground 0.9s ease, --ground-deep 0.9s ease, --ground-lift 0.9s ease, --glow 0.9s ease; } /* ───────────────────────────── Research and questions ──────────── */ .research .d-n, .research .d-body a { color: var(--accent); } .disclosures { border-top: 1px solid var(--hairline); } .disclosures details { border-bottom: 1px solid var(--hairline); } .disclosures summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 4px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .disclosures summary::-webkit-details-marker { display: none; } .faq .disclosures summary { grid-template-columns: 1fr auto; } .d-n { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); width: 1.4em; } .d-name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; } .d-name small { display: block; margin-top: 3px; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--veil-56); } .d-plus { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform 0.3s ease; } .d-plus::before, .d-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: var(--veil-72); border-radius: 2px; } .d-plus::after { transform: rotate(90deg); } details[open] > summary .d-plus { transform: rotate(45deg); } .d-body { display: grid; gap: 12px; padding: 0 4px 26px; color: var(--veil-72); font-size: 0.98rem; max-width: 62ch; } .research .d-body { padding-left: calc(1.4em * 0.8 + 22px); } .d-body a { color: var(--accent); text-underline-offset: 3px; } .research-note { margin-top: 22px; max-width: 62ch; } /* On a phone the six cards sit in one row you swipe, so the section is one card tall. */ .findings { display: flex; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .findings::-webkit-scrollbar { display: none; } .findings > li { flex: 0 0 84%; scroll-snap-align: start; } .finding { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 28px; background: linear-gradient(150deg, var(--ground-lift) 0%, var(--ground) 58%, var(--ground-deep) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.1); } .finding h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.12; letter-spacing: -0.018em; text-wrap: balance; } .finding p { color: var(--veil-72); font-size: 0.98rem; text-wrap: pretty; } .finding .finding-refs { font-size: 0.8125rem; color: var(--veil-56); } .finding-refs a { margin-left: 8px; color: var(--accent); text-underline-offset: 3px; } @media (min-width: 700px) { .findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-inline: 0; padding-inline: 0; overflow: visible; } } @media (min-width: 1040px) { .findings { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Every study, behind one row. */ .all-studies { width: min(780px, 100%); margin-top: 28px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .all-studies > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 22px 4px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .all-studies > summary::-webkit-details-marker { display: none; } .all-studies .disclosures details:last-child { border-bottom: 0; } /* ───────────────────────────── Closing ─────────────────────────── */ .closing { --cw: clamp(150px, 34vw, 200px); text-align: center; overflow-x: clip; padding-bottom: clamp(88px, 14vw, 160px); background: radial-gradient(86% 60% at 50% 34%, var(--ground-lift) 0%, transparent 72%); } .closing-light { position: relative; width: var(--cw); height: var(--cw); margin: 0 auto 4px; pointer-events: none; } .closing-inner { position: relative; z-index: 4; display: grid; gap: 20px; justify-items: center; } .closing h2 { font-size: clamp(2.5rem, 9vw, 4.6rem); line-height: 1.02; } .closing .lede { max-width: 30rem; } /* ───────────────────────────── Footer ──────────────────────────── */ .footer { border-top: 1px solid var(--hairline); padding-block: 36px 44px; } .footer-inner { display: grid; gap: 24px; } .footer-inner > div { display: grid; gap: 10px; align-content: start; } .footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9rem; color: var(--veil-72); } .footer nav a { text-decoration: none; padding: 6px 0; } .footer nav a:hover { color: var(--veil); } .footer .fine { max-width: 46ch; } @media (min-width: 760px) { .footer-inner { grid-template-columns: 1fr auto; } .footer-right { justify-items: end; text-align: right; } } .local-banner { position: fixed; left: 12px; bottom: 12px; z-index: 40; padding: 7px 12px; border-radius: 999px; background: #0b111a; color: var(--veil-72); font-size: 0.72rem; box-shadow: inset 0 0 0 1px var(--hairline); } /* ───────────────────────────── Legal pages ─────────────────────── */ .legal { display: grid; gap: 18px; padding-block: clamp(48px, 9vw, 96px) clamp(72px, 12vw, 128px); } .legal h1 { font-size: clamp(2.3rem, 8vw, 3.8rem); margin-bottom: 8px; } .legal h2 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 18px; } .legal p { color: var(--veil-72); max-width: 66ch; } .legal p a { color: var(--accent); text-underline-offset: 3px; } .legal .button { justify-self: start; margin-top: 18px; } .legal-ground { background: radial-gradient(110% 50% at 50% 0%, var(--ground) 0%, transparent 78%); } /* ───────────────────────────── Motion ──────────────────────────── */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Sections ease in as they enter, where the browser can do it without script. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } :root { transition: none; } .crystal, .crystal-live, .beam-in, .marquee-row, .breath-ring { animation: none !important; } .stack-card { position: static; } .breath-ring { transition: none !important; } /* The story still follows the scroll, one beat at a time, but nothing loops and nothing slides. */ .app-feed { animation: none !important; } .moment, .feel-pill { transition-property: opacity; } .button, .steps li { transition: none; } } /* Hero: one bright sentence in the lede, and the offer said before the form. */ .hero-copy .lede { color: var(--veil-72); } .hero-copy .lede b { font-weight: 600; color: var(--veil); } .offer { position: relative; display: inline-flex; align-items: baseline; justify-content: center; gap: 7px; white-space: nowrap; margin-top: 2px; padding: 7px 16px 8px; border-radius: 999px; background: var(--spectrum); color: var(--ink); box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.8); } .offer b { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; } .offer span { font-size: 0.95rem; font-weight: 500; } .hero .join { margin-top: 0; } /* On a phone the product comes without the phone drawn round it, and sooner. */ @media (max-width: 899px) { /* The words, then the product, then the offer and the form under it, then the proof chip (Vlad, Nov 11: the form "goes UNDER the diamond"). The copy block is laid out with the picture so its parts can be ordered around it. */ .hero { overflow-x: clip; } .hero-grid { gap: 14px; } .hero-copy { display: contents; } .hero-copy > * { order: 3; } .hero-copy > h1, .hero-copy > .lede { order: 1; } .hero-phone { order: 2; margin-top: 2px; width: min(100%, 340px); } .hero-copy > .offer { margin-top: 10px; } .hero-copy > .hero-science { order: 4; margin-top: 6px; } /* With no glass to stop it, the beam would run up through the words: it starts just above the diamond. */ .hero-light .beam-in { top: -14px; } .hero-screen { overflow: visible; padding: 4px 0 0; border-radius: 0; background: none; box-shadow: none; gap: 11px; } .hero-screen::before, .hero-screen::after { display: none; } .hero-phone-note { margin-top: 12px; } } /* Story on a narrow screen: the path is one unbroken corner, so the dot never skips a piece. The line down stops exactly on the line across, which now starts under the moments, not halfway. */ @media (max-width: 719px) { .feel { grid-area: 3 / 1 / 4 / 2; height: 40px; padding-block: 0; } .feel::before { display: none; } } /* A narrow window that is tall has room for a bigger picture. */ @media (min-width: 480px) and (max-width: 719px) and (min-height: 760px) { .note b { font-size: 1.3rem; } .note span { font-size: 1.02rem; } } /* The month's note carries a legend and a small line; they keep their own sizes. */ .note .story-legend, .note .story-legend span { font-size: 0.8rem; font-weight: 400; } .note .story-legend { margin-top: 7px; } .note .story-legend b { font-size: inherit; } .note span.fine { font-size: 0.74rem; font-weight: 400; color: var(--veil-56); } /* Why feel it: four rows, each in a feeling's colour, on a plain ground. The grey side stays grey. */ .cost { overflow-x: clip; } /* rows arrive from outside the column */ .tradeoff { position: relative; --p: 1; } .to-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; position: relative; } .to-when { margin-top: 16px; padding: 0; justify-self: center; text-align: center; font-size: inherit; letter-spacing: 0; text-transform: none; position: relative; z-index: 1; } .to-when b { display: inline-block; padding: 6px 15px 7px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.005em; background: var(--accent); color: var(--ink); } .to-cell.to-b { background: linear-gradient(150deg, var(--ground-lift), var(--ground) 82%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 46%, transparent), 0 18px 34px -24px var(--glow); } .to-head.to-b { color: var(--veil); } /* The line down the middle: grey all the way, the four colours as far as you have scrolled. */ .tradeoff::before, .tradeoff::after { content: ""; position: absolute; left: 50%; top: 34px; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; pointer-events: none; } .tradeoff::before { background: rgb(255 255 255 / 0.1); } .tradeoff::after { background: linear-gradient(180deg, var(--wired), var(--bright), var(--heavy), var(--settled)); transform-origin: 50% 0; transform: scaleY(var(--p)); } /* Rows arrive from both sides once the script has armed the table. */ .tradeoff[data-armed] .to-row .to-cell { transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 1.3, 0.4, 1); } .tradeoff[data-armed] .to-row .to-b { transition-delay: 0.22s; } .tradeoff[data-armed] .to-row .to-when b { transition: transform 0.5s cubic-bezier(0.2, 1.8, 0.4, 1), opacity 0.3s ease; } .tradeoff[data-armed] .to-row:not(.is-in) .to-a { opacity: 0; transform: translateX(-34px) rotate(-2deg); } .tradeoff[data-armed] .to-row:not(.is-in) .to-b { opacity: 0; transform: translateX(34px) rotate(2deg); } .tradeoff[data-armed] .to-row:not(.is-in) .to-when b { opacity: 0; transform: scale(0.6); } /* The button in this section was taking the pale link colour of the copy around it. */ .coming .sit-copy .button { color: var(--ink); } @media (min-width: 900px) { .offer { justify-self: start; } } /* After the breath: what are you feeling, and did it ease. */ .breath-check { display: grid; justify-items: center; gap: 12px; margin-top: 18px; text-align: center; } .breath-check[hidden], .breath-pills[hidden], .breath-ease[hidden] { display: none; } .breath-q { font-family: var(--serif); font-size: clamp(1.35rem, 4.4vw, 1.7rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--veil); } .breath-pills, .breath-ease { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .breath-pills button, .breath-ease button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--sans); font-size: 0.98rem; font-weight: 600; color: var(--ink); background: var(--veil); -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease; } .breath-pills button[data-feel="wired"] { background: var(--wired); } .breath-pills button[data-feel="bright"] { background: var(--bright); } .breath-pills button[data-feel="heavy"] { background: var(--heavy); } .breath-pills button[data-feel="settled"] { background: var(--settled); } .breath-pills button:active, .breath-ease button:active { transform: scale(0.96); } .breath-answer { max-width: 22rem; min-height: 2.9em; font-size: 0.98rem; line-height: 1.45; color: var(--veil-72); text-wrap: balance; } /* On a phone, sections sit closer together and the cards are tighter. */ @media (max-width: 699px) { .section { padding-block: 56px; } .section-head { gap: 12px; margin-bottom: 26px; } .to-cell { padding: 13px 13px 15px; font-size: 1rem; } .marquee { padding-block: 14px 8px; } } /* Sources fold away (Vlad, Nov 11): each list is closed until its "Backed by science" row is tapped. The small numbers in the text still open the paper directly. */ details.sources > summary { list-style: none; cursor: pointer; width: fit-content; -webkit-tap-highlight-color: transparent; } details.sources > summary::-webkit-details-marker { display: none; } .sources-count { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--veil-72); } .sources-count::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; } details.sources[open] .sources-count::after { margin-top: 3px; transform: rotate(-135deg); } details.sources > summary:hover .sources-count { color: var(--veil); } details.sources > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 999px; } /* ═════════════ Pass 23: the curriculum ═════════════ */ .teach { display: grid; gap: clamp(44px, 7vw, 72px); margin-top: clamp(48px, 8vw, 84px); } /* A lesson for each feeling: a row to swipe on a phone, a grid of nine from 700px. */ .lessons { display: grid; grid-auto-flow: column; grid-auto-columns: min(74%, 17rem); gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lessons::-webkit-scrollbar { display: none; } /* Bored sits in two families, and the good ones in the other two. */ @media (min-width: 700px) { .lessons { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 14px; margin-inline: 0; padding: 0; overflow: visible; } } /* The three points read better with the name over the text than beside it in a narrow column. */ .coming .verbs li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } .coming .cta-band .button { color: var(--ink); } .coming .cta-band .fine { max-width: 30rem; text-wrap: balance; } /* On a phone the curriculum stays short: each question is one compact row, and the eight lessons are a row to swipe. */ @media (max-width: 699px) { .teach { gap: 40px; margin-top: 44px; } } /* ═════════════ Pass 25: the folded lists say what each study found ═════════════ */ details.sources ul { display: grid; gap: 14px; margin-top: 16px; padding: 0; list-style: none; } details.sources li { margin: 0; padding: 0 0 0 16px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); break-inside: avoid; } details.sources li b { display: block; font-size: 0.95rem; font-weight: 500; line-height: 1.45; color: var(--veil); text-wrap: pretty; } details.sources .src { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.45; color: var(--veil-56); } details.sources .src a { color: var(--veil-72); text-decoration: underline; text-decoration-color: var(--veil-56); text-underline-offset: 3px; } details.sources .src a:hover { color: var(--veil); text-decoration-color: var(--accent); } @media (min-width: 720px) { details.sources ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; } } /* One set of line icons for the whole page. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* The mark: the diamond in the four feeling colours with an ink flame, on a pale tile (assets/logo.svg). The tile and its corners are part of the drawing. */ .brand .brand-mark { display: block; width: 36px; height: 36px; border-radius: 22.6%; box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6); } .brand .brand-mark img { display: block; width: 100%; height: 100%; border-radius: 0; } /* The cost table says each thing in a few words. */ .to-cell { display: grid; align-items: center; min-height: 64px; font-size: clamp(1.1rem, 3.6vw, 1.5rem); } /* What we teach: three points, the name with its icon over one line. */ .teach3 h3 { display: flex; align-items: center; gap: 10px; } .teach3 h3 .ico { width: 24px; height: 24px; } .coming .sit-grid > details.sources { grid-column: 1 / -1; } /* A plain comparison: what you want, down the side; the three ways, across. */ .matrix { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .matrix .c-label { width: 42%; } .matrix th, .matrix td { padding: 14px 8px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--hairline); } .matrix thead th { padding-block: 12px; border-bottom: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.2; color: var(--veil-72); } .matrix tbody th { padding-left: 0; text-align: left; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--veil); } .matrix .ico { width: 24px; height: 24px; vertical-align: middle; } .matrix .yes { color: var(--settled); } .matrix .no { color: #6f7b84; } .matrix .us { background: rgb(255 255 255 / 0.08); } .matrix thead .us { border-radius: 18px 18px 0 0; background: var(--spectrum); color: var(--ink); font-weight: 700; } .matrix tbody tr:last-child .us { border-bottom: 0; border-radius: 0 0 18px 18px; } .matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; } .matrix td.us .ico { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--settled); color: var(--ink); stroke-width: 2.6; } .different .cta-band { margin-top: clamp(28px, 5vw, 44px); } @media (max-width: 520px) { .matrix thead th { font-size: 0.76rem; } .matrix tbody th { font-size: 0.92rem; } .matrix th, .matrix td { padding: 12px 4px; } .matrix .c-label { width: 40%; } } /* An icon on each finding. */ .finding-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgb(255 255 255 / 0.12); color: var(--accent); } .finding-ico .ico { width: 24px; height: 24px; } /* How it works: four phones, each a real screen. A row to swipe on a phone. */ .shots { display: grid; grid-auto-flow: column; grid-auto-columns: min(58%, 14rem); gap: 18px; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .shots::-webkit-scrollbar { display: none; } .shot { display: grid; align-content: start; justify-items: center; gap: 6px; text-align: center; scroll-snap-align: start; } .shot-phone { position: relative; width: 100%; aspect-ratio: 480 / 1043; margin-bottom: 12px; border-radius: 15% / 7%; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--veil) 40%, transparent), 0 0 0 7px var(--ink), 0 0 0 8.5px color-mix(in srgb, var(--veil) 22%, transparent), 0 40px 60px -40px rgb(0 0 0 / 0.95); } .shot-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .shot-b { animation: shot-fade 7s ease-in-out infinite; } @keyframes shot-fade { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } } /* The first phone breathes: a soft light over the glimmer, in and out. */ .shot-glow { position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 1; margin: -35% 0 0 -35%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(closest-side, rgb(255 255 255 / 0.2), transparent); animation: shot-breathe 10s ease-in-out infinite; } @keyframes shot-breathe { 0%, 100% { transform: scale(0.6); opacity: 0.3; } 40% { transform: scale(1.25); opacity: 1; } } .shot h3 { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.015em; } .shot h3 b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-family: var(--sans); font-size: 0.86rem; font-weight: 700; background: var(--accent); color: var(--ink); } .shot p { max-width: 15rem; font-size: 0.95rem; color: var(--veil-72); text-wrap: balance; } .shots-note { margin-top: 18px; text-align: center; font-size: 0.8125rem; color: var(--veil-56); } @media (min-width: 760px) { .shots { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: clamp(12px, 2vw, 28px); max-width: 70rem; margin-inline: auto; padding: 10px 0 0; overflow: visible; } .shot:nth-child(even) { margin-top: 26px; } } @media (prefers-reduced-motion: reduce) { .shot-b { animation: none; opacity: 0; } .shot-glow { animation: none; } } /* A fold inside a card: one line shows, the mechanism opens under it. */ details.more { margin-top: 4px; } details.more > summary { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 12px 6px; border-radius: 999px; cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 600; color: var(--veil); background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); -webkit-tap-highlight-color: transparent; } details.more > summary::-webkit-details-marker { display: none; } details.more > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; } details.more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } details.more > p { margin-top: 10px; font-size: 0.95rem; line-height: 1.5; color: var(--veil-72); text-wrap: pretty; } /* The four benefits stack as you scroll; each keeps its icon in the corner. */ .stack-card { position: sticky; } .stack-card > .ico { position: absolute; right: 22px; top: 22px; width: 30px; height: 30px; color: var(--accent); } /* What we teach sits inside "How it works" as a panel in its own colour. */ .teach-panel { margin-top: clamp(40px, 7vw, 76px); padding: clamp(22px, 5vw, 52px); border-radius: clamp(26px, 4vw, 40px); background: radial-gradient(90% 70% at 80% 30%, var(--ground-lift) 0%, transparent 70%), var(--ground); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); } .teach-panel h2 { font-size: clamp(1.9rem, 5.6vw, 3rem); } .teach-panel details.sources { margin-top: clamp(22px, 4vw, 34px); } .teach-panel .sit-grid { align-items: center; } /* Comparison header: a mark over each name. */ .matrix thead th .ico { display: block; width: 26px; height: 26px; margin: 0 auto 6px; } .matrix thead th span { display: block; } .matrix thead .us .ico { stroke-width: 2; } /* The override, told in order: each line lights when its turn comes, every time the scene replays. */ /* What people say, as short pop-ups: the words, then one number. Each rolls open to say what the study found, with a link to it. The li keeps the closed size, so with a mouse the open card grows over the row below and nothing jumps; with a finger it opens in place (site.js, "Problem cards"). */ .pops { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px; } .pop { position: relative; z-index: 0; transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), z-index 0s linear 0.4s; } .pop.is-open { z-index: 5; transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), z-index 0s; } .pop-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: center; padding: 13px 16px 14px 15px; border-radius: 22px; color: var(--veil); cursor: default; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--glow) 46%, transparent) 0%, transparent 62%), linear-gradient(150deg, var(--ground-lift), var(--ground) 78%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 30px -22px rgb(0 0 0 / 0.9); transition: box-shadow 0.3s ease; } .pop.is-open .pop-in { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 30px 44px -20px rgb(0 0 0 / 0.95); } .pop-in > .ico { grid-column: 1; grid-row: 1 / span 2; width: 26px; height: 26px; color: var(--accent); } .pop-in > h3 { grid-column: 2; font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.12; letter-spacing: -0.015em; } .pop-stat { grid-column: 2; font-size: 0.86rem; font-weight: 600; color: var(--accent); } /* A small arrow says there is more. */ .pop-in::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 7px; height: 7px; margin: -4px 2px 0 4px; opacity: 0.6; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.3s ease, margin 0.3s ease; } .pop.is-open .pop-in::after { margin-top: 4px; transform: rotate(-135deg); } /* The roll-out. It adds nothing to the card's width, so a closed card is as wide as its words. */ .pop-more { grid-column: 1 / -1; contain: inline-size; display: grid; grid-template-rows: 1fr; } .pop-more > div { min-height: 0; overflow: hidden; } .pop-more p { margin-top: 10px; font-size: 0.9rem; font-weight: 400; line-height: 1.45; color: var(--veil); text-wrap: pretty; } .pop-more .pop-src { margin-top: 6px; padding-bottom: 2px; font-size: 0.76rem; line-height: 1.4; color: var(--veil-72); } .pop-src a { color: inherit; text-decoration: underline; text-decoration-color: var(--veil-56); text-underline-offset: 3px; } .pop-src a:hover { color: var(--veil); text-decoration-color: var(--accent); } /* Closed until asked, once the script is there to open it. */ .pops.is-ready .pop-more { grid-template-rows: 0fr; opacity: 0; } .pops.is-live .pop-more { transition: grid-template-rows 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; } .pops.is-ready .pop.is-open .pop-more { grid-template-rows: 1fr; opacity: 1; } .pops.is-ready .pop-in { cursor: pointer; } .pop-why .pop-in { grid-template-columns: minmax(0, 1fr) auto; background: linear-gradient(118deg, var(--wired) 0%, var(--bright) 36%, var(--settled) 68%, var(--heavy) 100%); color: var(--ink); } .pop-why .pop-in > h3, .pop-why .pop-stat { grid-column: 1; } .pop-why .pop-in::after { grid-column: 2; } .pop-why .pop-stat, .pop-why .pop-more p { color: color-mix(in srgb, var(--ink) 86%, transparent); } .pop-why .pop-more .pop-src { color: color-mix(in srgb, var(--ink) 74%, transparent); } .pop-why .pop-src a { text-decoration-color: color-mix(in srgb, var(--ink) 50%, transparent); } .pop-why .pop-src a:hover { color: var(--ink); text-decoration-color: var(--ink); } @media (min-width: 700px) { /* Room between the cards on a laptop, and a little drift so the rows do not line up like a table. */ .pops { gap: 30px 44px; padding-block: 10px 18px; } .pop:nth-child(3n + 1) { translate: 0 -4px; } .pop:nth-child(3n) { translate: 0 5px; } .pop:nth-child(odd) { rotate: -1.2deg; } .pop:nth-child(even) { rotate: 1deg; } .pop:hover, .pop.is-open { transform: translateY(-4px) scale(1.03); } } @media (max-width: 699px) { .pops { gap: 8px; } .pop { width: 100%; } .pop-in { padding: 11px 14px 12px 13px; border-radius: 18px; } .pop-in > h3 { font-size: 1.14rem; } } @media (prefers-reduced-motion: reduce) { .pops.is-live .pop-more, .pop, .pop-in::after { transition: none; } } /* Each moment pops up as it happens: a call, an email, a notification, a clock. It never sits over the other moments. From 720px it flies out of the deck to the middle of the picture and drops onto the line as the dot gets there. On a phone the lit card itself turns into it. Not played once the diamond is in the middle. */ @keyframes tick { 50% { opacity: 0.15; } } /* It comes out of the deck, lands with a small bounce, stays long enough to read, and lifts away. */ /* The moments arrive one at a time, each with its pop-up, the first time round (site.js adds .is-seq, then .seen-1 to .seen-4). After that all four stay, and hovering or tapping one plays it. */ .moment { cursor: pointer; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease, color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; } /* The lock beat, in order, once per reach: locked, with a slider to get past it; shame; the wish to numb it; the slide; the app opens and the streak goes, with more shame. The numbered lines under the feeling light at the same moments (6, 24, 42, 60 and 78% of the reach). */ /* The ground under it flushes with the shame: a little at "ashamed", more when the streak goes. */ /* A month later: the three things that got better pop up beside the ring, one after another. Under 720px there is no room at the sides, so they arrive one by one inside the note. */ .wins { display: none; } @media (min-width: 720px) { .wins { display: block; grid-area: feel; place-self: center; position: relative; z-index: 3; width: 0; height: 0; pointer-events: none; } } /* The cost timeline: a row is grey until the line reaches it, then takes its colour (site.js sets --p and .is-lit). */ .to-cell { position: relative; isolation: isolate; } .to-cell.to-b::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: #23292e; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07); opacity: 0; transition: opacity 0.7s ease; } .tradeoff[data-armed] .to-row:not(.is-lit) .to-b::before { opacity: 1; } .tradeoff[data-armed] .to-row .to-b { transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 1.3, 0.4, 1), color 0.6s ease; } .tradeoff[data-armed] .to-row:not(.is-lit) .to-b { color: #8d979e; box-shadow: none; } .tradeoff[data-armed] .to-row .to-b { transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 1.3, 0.4, 1), color 0.6s ease, box-shadow 0.6s ease; } .tradeoff[data-armed] .to-row .to-when b { transition: transform 0.5s cubic-bezier(0.2, 1.8, 0.4, 1), opacity 0.3s ease, background-color 0.6s ease, color 0.6s ease; } .tradeoff[data-armed] .to-row.is-in:not(.is-lit) .to-when b { background: #39424a; color: #aab3ba; } .tradeoff[data-armed] .to-row.is-lit .to-when b { transform: scale(1.06); } /* Two-sentence headings break at the sentence when there is room for each on a line. */ @media (min-width: 720px) { .try h2 .spectrum, .cost h2 .spectrum { display: block; } .try h2, .cost h2 { max-width: none; } } /* The teaching panel in the four colours, quietly, on a dark ground. */ .teach-panel { background: radial-gradient(64% 58% at 0% 0%, color-mix(in srgb, var(--wired) 40%, transparent) 0%, transparent 74%), radial-gradient(58% 54% at 100% 0%, color-mix(in srgb, var(--bright) 32%, transparent) 0%, transparent 74%), radial-gradient(64% 60% at 100% 100%, color-mix(in srgb, var(--settled) 36%, transparent) 0%, transparent 74%), radial-gradient(64% 60% at 0% 100%, color-mix(in srgb, var(--heavy) 46%, transparent) 0%, transparent 74%), #191d30; } /* Four groups sit on four rays. Turning the stone brings one to the front; that one is in focus and the room leans to its colour (site.js writes --ground and the rest on .hero every frame, mixed by how far each ray faces the reader). Tapping the group in front chooses it, and the app's four next steps appear. Below the hero every section keeps one colour of its own. */ .hero { background: radial-gradient(90% 46% at 50% 26%, var(--ground-lift) 0%, transparent 72%), radial-gradient(140% 80% at 50% 0%, var(--ground) 0%, transparent 78%), linear-gradient(180deg, var(--ground-deep) 0%, var(--ground-deep) calc(100% - 200px), transparent 100%); } .hero-screen > .hero-question { position: relative; z-index: 4; margin-top: 2px; transition: color 0.4s ease; } .hero-phone.is-named .hero-question { color: var(--accent); } .hero-light { pointer-events: none; } .ray-label { position: absolute; z-index: 4; left: 0; top: 0; margin: 0; padding: 5px 7px; border: 0; background: none; cursor: pointer; pointer-events: auto; font-family: var(--serif); font-size: 1rem; line-height: 1; letter-spacing: -0.01em; color: var(--veil-72); white-space: nowrap; opacity: 0; -webkit-tap-highlight-color: transparent; } .ray-label:hover { color: var(--veil); } .hero-phone.is-named .ray-label { visibility: hidden; } .hero-ask { margin-top: 14px; } .hero-focus, .hero-next { grid-area: 1 / 1; display: grid; justify-items: center; align-content: start; width: 100%; } .hero-focus { gap: 5px; height: 100%; grid-template-rows: auto auto 1fr; transition: opacity 0.3s ease, visibility 0s; } .focus-name { position: relative; margin: 0; padding: 2px 16px 8px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; font-family: var(--serif); font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.015em; color: var(--veil); transition: color 0.3s ease, transform 0.2s ease; } .focus-name::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 32px; height: 2px; margin-left: -16px; border-radius: 2px; background: var(--accent); transition: width 0.25s ease, margin 0.25s ease; } .focus-name:hover { color: var(--accent); } .focus-name:hover::after { width: 56px; margin-left: -28px; } .focus-name:active { transform: scale(0.96); } .focus-line { font-size: 0.92rem; color: var(--veil-72); } .focus-hint { align-self: end; margin-top: 14px; font-size: 0.78rem; color: var(--veil-56); } .hero-next { gap: 9px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .hero-phone.is-named .hero-next { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.2s, visibility 0s; } .hero-phone.is-named .hero-focus { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; } .next-grid button { min-height: 42px; margin: 0; padding: 0 6px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: -0.01em; color: var(--veil); background: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.12); transition: transform 0.2s ease, background-color 0.3s ease; } .next-grid button:hover { background: rgb(255 255 255 / 0.2); } .next-grid button:active { transform: scale(0.96); } .next-links { display: flex; justify-content: space-between; width: 100%; padding-inline: 4px; } .next-links button { margin: 0; padding: 6px 4px; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 0.78rem; color: var(--veil-72); -webkit-tap-highlight-color: transparent; } .next-links button:hover { color: var(--veil); } @media (max-width: 899px) { .next-grid button { font-size: 0.86rem; } } /* The hero phone has a phone's proportions from 900px, and a nudge on the stone until it is first turned. */ @media (min-width: 900px) { .hero-screen { min-height: calc(var(--hp) * 2.06); grid-template-rows: auto auto auto 1fr auto; padding-top: 62px; } .hero-ask { align-self: stretch; } .hero-next { align-content: end; height: 100%; } } .drag-hint { position: absolute; z-index: 5; left: 50%; top: 46%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; font-size: 0.8rem; font-weight: 650; letter-spacing: -0.005em; color: var(--ink); background: var(--veil); box-shadow: 0 12px 22px -10px rgb(0 0 0 / 0.8); transform: translateX(-50%); animation: drag-hint 2.6s ease-in-out infinite; transition: opacity 0.4s ease; } .drag-hint .ico { width: 17px; height: 17px; stroke-width: 2; } @keyframes drag-hint { 0%, 100% { transform: translateX(calc(-50% - 26px)); } 50% { transform: translateX(calc(-50% + 26px)); } } .hero-phone.is-turned .drag-hint, .hero-phone.is-named .drag-hint { opacity: 0; } @media (prefers-reduced-motion: reduce) { .drag-hint { animation: none; } } /* An unroll: one line shows, the rest opens on hover (mouse), tap (finger) or focus (site.js, "Unrolls"). Used by the four benefit cards and the three teaching cards. Without the script it is simply open. */ .roll { display: grid; grid-template-rows: 1fr; } .roll > div { min-height: 0; overflow: hidden; } .rolls-ready .roll { grid-template-rows: 0fr; opacity: 0; } .rolls-live .roll { transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; } .rolls-ready [data-roll].is-open .roll { grid-template-rows: 1fr; opacity: 1; } .roll p, .roll ul { margin: 10px 0 0; padding: 0 0 2px; font-size: 0.98rem; line-height: 1.5; color: var(--veil-72); text-wrap: pretty; } .roll ul { list-style: none; display: grid; gap: 5px; } .roll li { position: relative; padding-left: 16px; } .roll li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .roll-cue, .stack-card p.roll-cue { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 6px; padding: 5px 12px 6px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--veil); background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); } .roll-cue::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease, margin 0.25s ease; } [data-roll].is-open .roll-cue::after { margin-top: 3px; transform: rotate(-135deg); } .rolls-ready [data-roll] { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .rolls-live .roll, .roll-cue::after { transition: none; } } /* A bullet inside a teaching card is a plain line, not another card. */ .verbs .roll li { all: unset; display: block; position: relative; padding-left: 16px; } /* Every size is in --u (a hundredth of the phone's width), so the same feed can be drawn at any size. Names are grey bars. The glyphs are generic (heart, bubble, plane, bookmark); no logos. */ .app { display: flex; flex-direction: column; color: #f2f5f8; } .feed-win { position: relative; flex: 1; min-height: 0; overflow: hidden; } .app-bar { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); } .app-bar b { font-weight: 700; } .bar-ic { display: flex; align-items: center; gap: calc(var(--u) * 4.5); } .g { display: block; flex: none; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .app .av { display: block; flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--face, var(--wired)); } .app .ln { display: block; flex: none; height: calc(var(--u) * 2.5); border-radius: 99px; background: rgb(255 255 255 / 0.36); } .app .ln.b { background: rgb(255 255 255 / 0.72); } .app .ln.s { height: calc(var(--u) * 2); background: rgb(255 255 255 / 0.24); } .w24 { width: 24%; } .w30 { width: 30%; } .w50 { width: 50%; } .w80 { width: 80%; } .dots { flex: none; margin-left: auto; width: calc(var(--u) * 5.4); height: calc(var(--u) * 1.8); background: radial-gradient(circle, rgb(255 255 255 / 0.8) 0 calc(var(--u) * 0.62), transparent calc(var(--u) * 0.7)) 0 0 / 33.34% 100%; } .dots.v { margin: 0; width: calc(var(--u) * 1.8); height: calc(var(--u) * 5.4); background-size: 100% 33.34%; } .tabs { position: relative; z-index: 2; display: flex; justify-content: space-around; align-items: center; padding: calc(var(--u) * 3.2) calc(var(--u) * 3) calc(var(--u) * 9); background: #10151a; box-shadow: 0 -1px 0 rgb(255 255 255 / 0.09); } .tabs .g { width: calc(var(--u) * 7.8); height: calc(var(--u) * 7.8); } /* Photos: a row of stories, then who posted, the picture, the buttons, the likes and two lines. */ .ig-stories { position: relative; z-index: 2; display: flex; gap: calc(var(--u) * 4); padding: calc(var(--u) * 1) calc(var(--u) * 5) calc(var(--u) * 4); background: #10151a; box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); } .ig-stories i { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; --face: var(--bright); background: radial-gradient(circle, var(--face) 0 54%, #10151a 56% 66%, transparent 68%), conic-gradient(#f2c57c, #f28a9d, #b58ad8, #f2c57c); } .ig-stories i:nth-child(2) { --face: var(--settled); } .ig-stories i:nth-child(3) { --face: var(--heavy); } .ig-stories i:nth-child(4) { --face: var(--wired); } .ig-stories i:nth-child(5) { --face: #d8dde2; } .ig { padding-bottom: calc(var(--u) * 4); } .ig .hd { display: flex; align-items: center; gap: calc(var(--u) * 3.5); padding: calc(var(--u) * 3.5) calc(var(--u) * 5); } .ig .pic { display: block; aspect-ratio: 1 / 1.04; } .ig .ac { display: flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 3.5) calc(var(--u) * 5) calc(var(--u) * 3); } .sp { flex: 1; } .ig > .ln { margin: 0 calc(var(--u) * 5) calc(var(--u) * 2.4); } /* Clips: one tall video at a time, two tabs at the top, buttons down the side, a caption at the bottom. */ .tabs .add { flex: none; width: calc(var(--u) * 13); height: calc(var(--u) * 8.4); border-radius: calc(var(--u) * 2.6); background: #fff; } /* The lock step, in order, once per reach (which is longer here: site.js sets --cycle for this step). */ /* The seven lines light in turn from 720px; on a phone only the current one shows. */ /* The first phone is the drawn photo feed from the story, at this phone's size: --u is a hundredth of the phone's width, taken from the container. The other four are real screens (644 x 1400). */ .shot-phone { aspect-ratio: 644 / 1400; container-type: inline-size; } .shot-app { --u: 1.8px; --pw: 180px; position: absolute; inset: 0; overflow: hidden; background: #10151a; text-align: left; } @supports (width: 1cqw) { .shot-app { --u: 1cqw; --pw: 100cqw; } } .shot-app .app { opacity: 1; } .shot-app::before, .shot-app::after { content: ""; position: absolute; left: 50%; z-index: 3; border-radius: 999px; } .shot-app::before { top: calc(var(--u) * 4); width: 30%; height: calc(var(--u) * 7); margin-left: -15%; background: #05080b; } .shot-app::after { bottom: calc(var(--u) * 3.4); width: 36%; height: calc(var(--u) * 2.4); margin-left: -18%; background: var(--veil); opacity: 0.75; } .shot h3 { font-size: 1.2rem; } @media (min-width: 720px) and (max-width: 1099px) { .shot h3 { font-size: 1.05rem; gap: 7px; } .shot p { font-size: 0.86rem; } } /* site.js writes --t (0 to 1) on the stage as the lock step is scrolled through. Every animation of the step is one second long, paused, and set back by --t seconds, so the scroll is the playhead: scroll down and it plays, scroll up and it runs backwards. Nothing in this step is on a timer. */ /* The icon is lifted, carried under a finger down to the bin, and dropped in. */ /* The seven lines, one at a time, as pop-ups in the family colours (the style of the month's wins). */ /* Where the scroll comes to rest: one point for each step. Proximity only, so it lands when you stop near one and never fights a long scroll. To turn this off, delete the next line. */ html { scroll-snap-type: y proximity; } .snaps { position: absolute; inset: 0; pointer-events: none; } .snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; } /* The swipe rows are scrollers only on a phone. Wider, their cards must not be landing points for the page. */ @media (min-width: 700px) { .findings > li { scroll-snap-align: none; } } @media (min-width: 760px) { .shot { scroll-snap-align: none; } } /* How it works: each step's name is a solid pop-up that sits on the bottom edge of its phone. site.js adds .is-waiting, then .is-in when the row comes on screen, and they arrive one at a time. */ .shot h3 { position: relative; z-index: 2; margin-top: -22px; padding: 8px 15px 9px 9px; border-radius: 16px; white-space: nowrap; font-family: var(--sans); font-weight: 650; font-size: 0.98rem; letter-spacing: -0.005em; color: var(--ink); background: var(--pc, var(--wired)); box-shadow: 0 20px 30px -18px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.5); rotate: -2deg; } .shot:nth-child(even) h3 { rotate: 1.8deg; } .shot:nth-child(2) h3 { --pc: var(--heavy); } .shot:nth-child(3) h3 { --pc: var(--bright); } .shot:nth-child(4) h3 { --pc: var(--settled); } .shot:nth-child(5) h3 { --pc: #e6e9ee; } .shot h3 b { width: 22px; height: 22px; font-size: 0.78rem; background: var(--ink); color: #fff; } .shot p { margin-top: 4px; } @media (min-width: 720px) and (max-width: 1099px) { .shot h3 { font-size: 0.86rem; gap: 6px; padding: 7px 12px 8px 8px; } .shot h3 b { width: 20px; height: 20px; } } .shots.is-waiting h3 { opacity: 0; } .shots.is-waiting.is-in h3 { animation: pop-in 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .shots.is-in .shot:nth-child(2) h3 { animation-delay: 0.16s; } .shots.is-in .shot:nth-child(3) h3 { animation-delay: 0.32s; } .shots.is-in .shot:nth-child(4) h3 { animation-delay: 0.48s; } .shots.is-in .shot:nth-child(5) h3 { animation-delay: 0.64s; } @keyframes pop-in { from { opacity: 0; transform: scale(0.6) translateY(12px); } to { opacity: 1; transform: none; } } /* "Find, name, stay, feel": four pop-ups. site.js writes data-steps (0 to 4) from the scroll. */ .note.steps b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 8px 8px; border-radius: 15px; white-space: nowrap; font-size: 0.98rem; font-weight: 650; line-height: 1.2; color: var(--ink); background: var(--pc, var(--bright)); box-shadow: 0 18px 26px -16px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.5); rotate: -2deg; opacity: 0; transform: translateY(12px) scale(0.6); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); } .note.steps b:nth-child(even) { rotate: 1.6deg; } .note.steps b:nth-child(2) { --pc: var(--wired); } .note.steps b:nth-child(3) { --pc: var(--heavy); } .note.steps b:nth-child(4) { --pc: var(--settled); } .note.steps b i { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; font-style: normal; font-size: 0.76rem; font-weight: 700; background: var(--ink); color: #fff; } @media (min-width: 1100px) { .note.steps b { font-size: 1.06rem; } } /* Between 720 and 1100 the middle column is narrow: smaller pop-ups, nudged left, clear the note under the phone. */ @media (min-width: 720px) and (max-width: 1099px) { .note.steps b { gap: 6px; padding: 6px 11px 7px 7px; font-size: 0.88rem; } .note.steps b i { width: 19px; height: 19px; } } /* The comparison ends on a row of words: how you end up with each. */ .matrix .ends th, .matrix .ends td { padding-block: 18px; } .matrix .ends td { font-size: 0.8rem; font-weight: 600; line-height: 1.25; text-wrap: balance; } .matrix .ends td.no { color: #98a3ab; } .matrix .ends td.us { font-size: 0.95rem; font-weight: 700; color: var(--settled); } @media (min-width: 720px) { .matrix .ends td { font-size: 0.92rem; } .matrix .ends td.us { font-size: 1.08rem; } } /* On a phone they are the same solid coloured pop-ups as beside the ring on a laptop. */ @media (max-width: 719px) { /* The hero carries less: the headline, what Glimmer does, the value, then the check-in. */ .hero-phone-note, .focus-hint { display: none; } } /* How it works on a phone: the row of screens moves sideways as the page scrolls down. The run is tall, the hold sticks under the bar, and site.js slides the row by how far through the run you are. */ @media (max-width: 759px) { .shots-run { height: 240vh; height: 240svh; } .shots-hold { position: sticky; top: 76px; height: calc(100vh - 76px); height: calc(100svh - 76px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; overflow: hidden; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .shots { overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; grid-auto-columns: min(58%, 14rem, calc((100svh - 240px) / 2.18)); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; } .shot { scroll-snap-align: none; } } /* One spine: it pauses the scroll, it shows you the feeling, it teaches you to feel it. The three parts carry the same numbered tag in the three steps under the hero and on their own sections. */ .part-tag { display: inline-flex; align-items: center; gap: 10px; } .part-tag b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 0.8rem; letter-spacing: 0; background: var(--accent); color: var(--ink); } .part-proof { font-size: 0.86rem; line-height: 1.4; color: var(--veil-56); text-align: center; text-wrap: balance; } .part-proof a { text-decoration: none; } .part-proof a:hover { text-decoration: underline; text-underline-offset: 3px; } .part-proof b { color: var(--veil); font-weight: 650; } .try .part-proof { margin-top: 18px; } /* The hero says what the product is before anything else. */ .hero-sub { max-width: 31rem; } /* Three steps: three solid cards, no motion beyond arriving. */ .spine { position: relative; padding-block: clamp(30px, 6vw, 64px) clamp(40px, 8vw, 88px); } .spine-title { text-align: center; font-size: clamp(1.7rem, 5vw, 2.6rem); } .spine-steps { display: grid; gap: 14px; margin-top: clamp(22px, 4vw, 38px); } .spine-step { --c: var(--wired); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; height: 100%; box-sizing: border-box; padding: 18px 20px 20px; border-radius: 22px; text-decoration: none; color: var(--ink); background: var(--c); box-shadow: 0 22px 34px -22px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.5); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .spine-steps li:nth-child(2) .spine-step { --c: var(--bright); } .spine-steps li:nth-child(3) .spine-step { --c: var(--settled); } .spine-step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; font-weight: 700; background: var(--ink); color: #fff; } .spine-step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 4.4vw, 1.6rem); line-height: 1.1; letter-spacing: -0.015em; } .spine-step p { grid-column: 2; font-size: 0.95rem; line-height: 1.35; color: color-mix(in srgb, var(--ink) 76%, transparent); } @media (hover: hover) { .spine-step:hover { transform: translateY(-4px); } } @media (min-width: 760px) { .spine-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .spine-step { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 10px; padding: 22px 22px 26px; } .spine-step p { grid-column: 1; } .spine-steps li:nth-child(1) .spine-step { rotate: -1.2deg; } .spine-steps li:nth-child(3) .spine-step { rotate: 1.2deg; } } @media (prefers-reduced-motion: reduce) { .spine-step { transition: none; } } /* What you get: four still cards, two by two from 720px. They no longer pile up as you scroll. */ .stack-card { position: relative; min-height: 0; gap: 12px; padding: clamp(22px, 4vw, 30px); border-radius: 26px; } .stack-card h3 { font-size: clamp(1.45rem, 4.6vw, 1.9rem); padding-right: 38px; } .stack-why { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--veil-72); } .stack-card > .ico { right: 20px; top: 20px; width: 26px; height: 26px; } @media (min-width: 720px) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } /* Pause on a phone: the row of five screens crosses in less scrolling. */ @media (max-width: 759px) { .shots-run { height: 160vh; height: 160svh; } } .later .section-head, .try .section-head, .learn .section-head { justify-items: center; margin-inline: auto; text-align: center; } /* A month later: a ring of an example month, the diamond inside it, three tags and one note. */ .later { --sweep: 360deg; } .later-pic { display: grid; justify-items: center; gap: 16px; } .later-ring { --ring: clamp(200px, 58vw, 290px); position: relative; width: var(--ring); aspect-ratio: 1; } .later-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--wired) 0deg 139deg, transparent 139deg 142deg, var(--heavy) 142deg 265deg, transparent 265deg 268deg, var(--bright) 268deg 328deg, transparent 328deg 331deg, var(--settled) 331deg 357deg, transparent 357deg 360deg); -webkit-mask-image: radial-gradient(circle, transparent 60%, #000 61%), conic-gradient(from -90deg, #000 0deg var(--sweep), transparent var(--sweep) 360deg); mask-image: radial-gradient(circle, transparent 60%, #000 61%), conic-gradient(from -90deg, #000 0deg var(--sweep), transparent var(--sweep) 360deg); -webkit-mask-composite: source-in; mask-composite: intersect; } .later-gem { position: absolute; left: 22%; top: 18%; width: 56%; aspect-ratio: 1; } .later-gem img, .later-gem canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .later-gem canvas { opacity: 0; transition: opacity 0.5s ease; } .later-gem.is-live canvas { opacity: 1; } .later-gem.is-live img { opacity: 0; } .later-total { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 0.9rem; color: var(--veil-56); } .later-total .numeral { font-size: clamp(2.6rem, 9vw, 3.4rem); } .later-wins { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 6px; } .later-win { --c: var(--settled); max-width: 13rem; padding: 10px 15px 11px; border-radius: 18px; font-size: 0.95rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; text-align: left; text-wrap: balance; color: var(--ink); background: var(--c); box-shadow: 0 20px 30px -18px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.5); rotate: -3deg; } .later-win:nth-child(2) { --c: var(--bright); rotate: 2.5deg; } .later-win:nth-child(3) { --c: var(--heavy); rotate: 2deg; } .later.is-live .later-win { opacity: 0; transform: scale(0.6) translateY(12px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); } .later[data-wins="1"] .later-win:nth-child(-n+1), .later[data-wins="2"] .later-win:nth-child(-n+2), .later[data-wins="3"] .later-win { opacity: 1; transform: none; } .later-note { width: fit-content; max-width: min(100%, 30rem); margin: clamp(22px, 4vw, 36px) auto 0; padding: 16px 22px 18px; border-radius: 20px; text-align: center; rotate: -1deg; background: color-mix(in srgb, var(--ink) 80%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wired) 70%, transparent), 0 24px 34px -24px rgb(0 0 0 / 0.8); } .later-note > b { display: block; font-size: clamp(1.1rem, 3.6vw, 1.35rem); font-weight: 650; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; } .later-note mark { padding: 0 0.25em 0.06em; border-radius: 7px; color: var(--ink); background: var(--wired); } .later-note .story-legend { margin-top: 10px; font-size: 0.85rem; } .later .part-proof { margin-top: 18px; } @media (min-width: 760px) { .later-pic { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "a ring b" "c ring b" ". total ."; align-items: center; column-gap: clamp(20px, 4vw, 44px); max-width: 58rem; margin-inline: auto; } .later-ring { grid-area: ring; } .later-total { grid-area: total; } .later-wins { display: contents; } .later-win:nth-child(1) { grid-area: a; justify-self: end; align-self: end; } .later-win:nth-child(2) { grid-area: b; justify-self: start; } .later-win:nth-child(3) { grid-area: c; justify-self: end; align-self: start; } } /* Pause and Notice: two phones, then three. The steps carry the numbers now, so the phones do not. */ .shots-2 h3, .shots-3 h3 { padding: 8px 14px 9px; } .shots-2 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 11.5rem)); justify-content: center; gap: 14px; margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; } @media (max-width: 419px) { .shots-2 h3 { font-size: 0.82rem; padding: 7px 10px 8px; } .shots-2 .shot p { font-size: 0.86rem; } } @media (min-width: 760px) { .shots-2 { grid-template-columns: repeat(2, minmax(0, 12.5rem)); gap: clamp(18px, 3vw, 36px); max-width: none; } .shots-3 { grid-template-columns: repeat(3, minmax(0, 12.5rem)); justify-content: center; gap: clamp(18px, 3vw, 36px); max-width: none; } } @media (prefers-reduced-motion: reduce) { .later.is-live .later-win { transition: none; } }