/* ========================================================================== Tierce — landing page Implements project/Landing.dc.html in the "Tierce / The Thread" grammar: one ground, one ink at eight opacities, one amber accent, hairlines instead of cards. Desktop values are the design's values verbatim; everything under 1100px is a responsive addition (the prototype was desktop-only). ========================================================================== */ :root { /* Ground — one background. --raised exists only for document sheets. */ --ground: #08080B; --raised: #111114; /* Ink — a single hue at eight opacities. There is no second grey. */ --ink: #ECECEF; --ink-85: rgba(236, 236, 239, .85); --ink-72: rgba(236, 236, 239, .72); --ink-62: rgba(236, 236, 239, .62); --ink-55: rgba(236, 236, 239, .55); --ink-50: rgba(236, 236, 239, .50); --ink-42: rgba(236, 236, 239, .42); --ink-38: rgba(236, 236, 239, .38); --ink-30: rgba(236, 236, 239, .30); /* Accent — one live thing per view. */ --accent: #D4A574; --accent-fill: rgba(212, 165, 116, .92); --accent-bright: #F5DFB8; /* wake marker + hover only */ --accent-on: #1A1410; --destructive: #C4796F; /* error text only */ --violet: #8B7BA8; /* the reading dot */ /* Sleep stages */ --stage-rem: rgba(212, 165, 116, .85); --stage-light: rgba(236, 236, 239, .16); --stage-deep: rgba(236, 236, 239, .11); --stage-awake: rgba(236, 236, 239, .34); /* Structure */ --hairline: rgba(255, 255, 255, .07); --edge: rgba(255, 255, 255, .09); /* Type */ --serif: Newsreader, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --mono: ui-monospace, Menlo, monospace; /* Layout */ --shell: 1180px; --gutter: 40px; /* Phone mock scale — 393x852 screen inside a 417x876 device. */ --phone-scale: .72; --phone-w: 300px; --phone-h: 631px; } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--ground); scroll-behavior: smooth; /* The hero wash is meant to bleed off the page edge. `clip` contains it without creating a scroll container, which `hidden` would — and a scroll container on breaks the sticky masthead. */ overflow-x: clip; } /* The masthead is sticky at 74px — anchors must land below it. */ section[id], [id="main"] { scroll-margin-top: 94px; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-bright); } img, svg { display: block; } button { font-family: var(--sans); } input { font-family: var(--sans); color: inherit; } input:focus { outline: none; } ::selection { background: rgba(212, 165, 116, .3); } /* Hover is not a concept on touch; focus rings are, everywhere. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 50%; top: 0; z-index: 100; transform: translate(-50%, -120%); padding: 12px 22px; border-radius: 0 0 12px 12px; background: var(--accent-fill); color: var(--accent-on); font: 600 13px/1 var(--sans); letter-spacing: .3px; } .skip-link:focus { transform: translate(-50%, 0); color: var(--accent-on); } /*
is focusable only as the skip link's landing point. */ main:focus { outline: none; } /* ---------------------------------------------------------- primitives -- */ .shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* Eyebrow: the one place uppercase is allowed. */ .eyebrow { font: 600 11px/1 var(--sans); letter-spacing: 1.6px; color: var(--ink-55); } .eyebrow--faint { color: var(--ink-38); } .rule { height: 1px; background: var(--hairline); } .rule--short { width: 56px; } .meta { font: 400 10.5px/1 var(--mono); letter-spacing: .6px; color: var(--ink-38); } /* Body copy — system sans, never serif. */ .body { font: 400 13.5px/22px var(--sans); color: var(--ink-50); margin: 14px 0 0; max-width: 32ch; } /* The app explaining itself: italic serif, one sentence. */ .voice { font: italic 300 22px/34px var(--serif); color: var(--ink-50); margin: 0; } .display { font-family: var(--serif); font-weight: 200; color: var(--ink); margin: 0; } .note { font: 400 12px/19px var(--sans); color: var(--ink-38); } /* One button shape, everywhere: fully round, amber face, dark label. */ .pill { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 40px; border: none; border-radius: 999px; background: var(--accent-fill); color: var(--accent-on); font: 600 15px/1 var(--sans); letter-spacing: .3px; cursor: pointer; transition: background .25s ease, opacity .25s ease; } .pill:hover { background: var(--accent-bright); color: var(--accent-on); } .pill[disabled] { cursor: default; opacity: .55; } .pill[disabled]:hover { background: var(--accent-fill); } /* Refusals are quiet and never styled as a mistake. */ .quiet { font: 400 16px/1 var(--sans); color: var(--ink-50); } .quiet:hover { color: var(--ink); } /* ------------------------------------------------------------- header --- */ .masthead { position: sticky; top: 0; z-index: 40; background: rgba(8, 8, 11, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--hairline); } .masthead__inner { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); } .brand:hover { color: var(--ink); } .brand__mark { width: 30px; height: 30px; } .brand__word { font: 200 26px/1 var(--serif); letter-spacing: -.6px; color: var(--ink); } .masthead__nav { display: flex; align-items: center; gap: 34px; } .navlink { font: 400 13px/1 var(--sans); color: var(--ink-55); } .navlink:hover { color: var(--ink); } .navcta { height: 40px; padding: 0 22px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-on); font: 600 13px/1 var(--sans); letter-spacing: .3px; display: flex; align-items: center; transition: background .25s ease; } .navcta:hover { background: var(--accent-bright); color: var(--accent-on); } /* --------------------------------------------------------------- hero --- */ .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; min-height: calc(100vh - 74px); } .hero__copy { padding: 80px 0; animation: riseIn .8s cubic-bezier(.2, .8, .2, 1) both; } .hero__eyebrow { display: block; margin-bottom: 34px; } .hero__title { font-size: 76px; line-height: 1.02; letter-spacing: -.025em; text-wrap: pretty; } .hero__title em { font-style: normal; color: var(--accent); } .hero__voice { margin-top: 26px; max-width: 32ch; } .hero__cta { display: flex; align-items: center; gap: 26px; margin-top: 44px; flex-wrap: wrap; } .badge-link { display: block; border-radius: 9px; opacity: .96; transition: opacity .25s ease; } .badge-link:hover { opacity: 1; } .badge-link img { width: 174px; height: 58px; } .hero__appmeta { display: flex; align-items: center; gap: 16px; } .hero__appicon { width: 52px; height: 52px; border-radius: 12px; } .hero__rule { margin: 56px 0 24px; max-width: 420px; } .hero__claims { display: flex; gap: 40px; flex-wrap: wrap; } .claim__title { font: 200 30px/1 var(--serif); color: var(--ink); letter-spacing: -.8px; } .claim__body { font: 400 12px/19px var(--sans); color: var(--ink-38); margin-top: 6px; } .hero__stage { display: flex; justify-content: center; align-items: center; padding: 60px 0; animation: fadeIn 1.4s ease both; } .stage { position: relative; } /* The one decorative gradient allowed: a faint amber wash behind a hero. */ .stage__wash { position: absolute; left: -140px; right: -140px; top: -110px; bottom: -110px; background: radial-gradient(60% 46% at 50% 42%, rgba(212, 165, 116, .09) 0%, rgba(212, 165, 116, .045) 42%, rgba(212, 165, 116, .014) 68%, rgba(212, 165, 116, 0) 100%); pointer-events: none; } /* --------------------------------------------------------------- phone -- */ .phone { position: relative; width: var(--phone-w); height: var(--phone-h); } .phone--clipped { overflow: hidden; } .phone__device { width: 417px; height: 876px; transform: scale(var(--phone-scale)); transform-origin: top left; border-radius: 62px; padding: 12px; background: linear-gradient(160deg, #26262B, #141417); box-shadow: 0 50px 90px rgba(0, 0, 0, .6); } .phone--flat .phone__device { border-radius: 56px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); } .phone__screen { position: relative; width: 393px; height: 852px; border-radius: 50px; background: var(--ground); overflow: hidden; } .phone--flat .phone__screen { border-radius: 44px; } .statusbar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 16px 30px 0; z-index: 5; } .statusbar__time { font: 600 17px/1 var(--sans); letter-spacing: -.3px; color: var(--ink-85); } .statusbar__right { display: flex; align-items: center; gap: 6px; } .signal { display: flex; align-items: flex-end; gap: 2px; height: 11px; } .signal i { display: block; width: 3px; background: var(--ink-85); border-radius: 1px; } .signal i:nth-child(1) { height: 4px; } .signal i:nth-child(2) { height: 6px; } .signal i:nth-child(3) { height: 9px; } .signal i:nth-child(4) { height: 11px; background: rgba(255, 255, 255, .28); } .battery { width: 22px; height: 11px; border: 1.2px solid rgba(255, 255, 255, .42); border-radius: 3.5px; display: flex; align-items: center; padding: 1.2px; } .battery i { display: block; width: 62%; height: 100%; background: var(--ink-85); border-radius: 2px; } /* The thread: a rail down the left, content shifted to 82px. */ .thread-rail { position: absolute; left: 44px; width: 1px; background: linear-gradient(180deg, rgba(212, 165, 116, .5), rgba(255, 255, 255, .06)); } .thread-rail--full { top: 0; bottom: 72px; } .thread-rail--list { top: 158px; bottom: 72px; } .bead { position: absolute; width: 13px; height: 13px; border-radius: 7px; background: var(--accent); box-shadow: 0 0 24px rgba(212, 165, 116, .85); } /* Three 3px squares, drawn in markup — the settings target. */ .dots { position: absolute; right: 22px; top: 56px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 4px; } .dots i { display: block; width: 3px; height: 3px; border-radius: 2px; background: var(--ink-50); } .entry { position: absolute; left: 82px; right: 30px; top: 112px; } .entry__gap { height: 22px; } .entry__transcript { margin: 0 0 22px; font: 300 21px/34px var(--serif); color: var(--ink); text-wrap: pretty; } .moodline { width: 190px; height: 30px; margin-bottom: 6px; } .moodline path, .moodline--small path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } .moodline--small { width: 88px; height: 20px; margin-top: 9px; margin-bottom: 0; opacity: .7; } .entry__readback { font: italic 300 15px/1 var(--serif); color: var(--ink-62); margin-bottom: 22px; } /* Context is a quiet line of words, never chips. */ .tags { display: flex; flex-wrap: wrap; gap: 16px; } .tags span { font: 400 12.5px/1 var(--sans); color: var(--ink-55); } .entry__tags { margin-bottom: 24px; } .reading-head { display: flex; align-items: center; gap: 9px; } .reading-head__dot { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--violet); } .reading-head--entry { margin-bottom: 12px; } .local-pill { font: 600 10px/1 var(--sans); letter-spacing: 1.4px; color: var(--accent); padding: 5px 10px; border: 1px solid rgba(212, 165, 116, .32); border-radius: 999px; } .entry__reading { margin: 0 0 18px; font: italic 300 17px/29px var(--serif); color: var(--ink-72); text-wrap: pretty; } .entry__question { margin: 0 0 20px; font: 300 17px/28px var(--serif); color: var(--ink-50); text-wrap: pretty; } .answer { color: var(--accent); } .entry__signoff { font: 400 13px/1 var(--sans); color: var(--ink-55); } /* Tabs are words. */ .tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; border-top: 1px solid rgba(255, 255, 255, .06); display: flex; align-items: flex-start; padding: 14px 24px 0; background: var(--ground); z-index: 4; } .tabbar span { flex: 1; text-align: center; font: 600 11px/1 var(--sans); letter-spacing: 1.5px; color: var(--ink-55); } .tabbar span[aria-current] { color: var(--accent); } .home-indicator { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); z-index: 6; } /* Thread screen (second phone) */ .thread-count { position: absolute; left: 28px; right: 24px; top: 64px; display: flex; justify-content: space-between; align-items: flex-start; } .thread-count__n { font: 300 34px/1 var(--serif); color: var(--ink); letter-spacing: -.4px; } .thread-count__sub { font: 400 13px/1 var(--sans); color: var(--ink-55); margin-top: 10px; } .thread-list { position: absolute; left: 0; right: 0; top: 186px; } .thread-list .bead { left: 38px; top: 4px; } .night-dot { position: absolute; left: 41px; width: 7px; height: 7px; border-radius: 4px; } /* Kept nights are filled, blank mornings are hollow. The two fill values sit between the documented ink steps — they are the design file's. */ .night-dot--filled { background: rgba(236, 236, 239, .34); } .night-dot--dim { background: rgba(236, 236, 239, .26); } .night-dot--hollow { border: 1px solid rgba(236, 236, 239, .22); } .night { padding: 0 28px 24px 82px; position: relative; min-height: 72px; } .night__date { font: 500 12px/1 var(--sans); color: var(--ink-62); margin-bottom: 8px; } .night__text { font: 300 16px/25px var(--serif); color: rgba(236, 236, 239, .82); max-width: 255px; } .night__text--blank { font-style: italic; color: var(--ink-62); } /* ---------------------------------------------------------- movements --- */ .section { padding-top: 110px; } .movements { padding-top: 120px; } /* Grouping is done with rules and space: a 1px gap over a hairline ground. */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); } .trio > * { background: var(--ground); padding: 44px 40px 54px; } .trio > *:first-child { padding-left: 0; } .trio > *:last-child { padding-right: 0; } .movement__index { font: 400 10.5px/1 var(--mono); color: var(--accent); letter-spacing: .6px; } .movement__title, .aside__title { font-family: var(--serif); font-weight: 300; color: var(--ink); margin: 22px 0 0; } .movement__title { font-size: 26px; line-height: 1.2; letter-spacing: -.5px; } /* -------------------------------------------------------------- focus --- */ .section__title { font-size: 52px; line-height: 1.05; letter-spacing: -1.2px; margin: 26px 0 0; } .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 64px; } .focus__label { display: block; margin-bottom: 22px; } .crossed { display: flex; flex-direction: column; gap: 18px; } .crossed p { margin: 0; font: 300 19px/28px var(--serif); color: var(--ink-42); text-decoration: line-through; text-decoration-color: rgba(236, 236, 239, .2); } .focus__answer { color: var(--ink-72); text-wrap: pretty; max-width: 34ch; } /* -------------------------------------------------------------- night --- */ /* Longhands only — a `padding` shorthand here would wipe .shell's gutters. */ .night-section { padding-top: 100px; padding-bottom: 120px; } /* Sections that close with the same measure they open with. */ .section--closed { padding-bottom: 110px; } .night-head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 54px; } .night-head h2 { max-width: 24ch; } .night-head p { font: italic 300 18px/28px var(--serif); color: var(--ink-50); margin: 0; max-width: 34ch; } /* The hypnogram: equal-width bars, height encodes the stage. Stage heights are the design's rounded values of 168 × { rem .22, light .5, deep .86, awake .1 } — stated in px rather than % so they land on whole pixels. */ .hypnogram { display: flex; align-items: flex-start; gap: 3px; height: 168px; } .hypnogram i { flex: 1; display: block; min-width: 0; border-radius: 2px; } .hypnogram i[data-stage="rem"] { height: 37px; background: var(--stage-rem); } .hypnogram i[data-stage="light"] { height: 84px; background: var(--stage-light); } .hypnogram i[data-stage="deep"] { height: 144px; background: var(--stage-deep); } .hypnogram i[data-stage="awake"] { height: 17px; background: var(--stage-awake); } .hypnogram i[data-marker] { background: var(--accent); box-shadow: 0 0 12px rgba(212, 165, 116, .6); } .legend { display: flex; gap: 16px; margin-top: 12px; align-items: center; } .legend span { display: flex; align-items: center; gap: 6px; font: 400 10.5px/1 var(--mono); color: var(--ink-38); } .legend i { display: block; width: 7px; height: 7px; border-radius: 2px; } .legend span.legend__source { margin-left: auto; color: var(--ink-30); } .wake { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: center; } .wake-track { position: relative; width: 100%; height: 44px; } .wake-track__line { position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: var(--edge); } .wake-track__span { position: absolute; left: 26%; width: 48%; top: 14px; height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(212, 165, 116, .22), rgba(212, 165, 116, .5)); } .wake-track__marker { position: absolute; left: 63%; top: 8px; width: 3px; height: 26px; border-radius: 2px; background: var(--accent-bright); box-shadow: 0 0 16px rgba(245, 223, 184, .6); } .wake-track__label { position: absolute; top: 34px; font: 400 10.5px/1 var(--mono); color: var(--ink-38); transform: translateX(-50%); } .wake-track__label--now { color: var(--accent); } /* ------------------------------------------------------------ meaning --- */ .meaning__intro { max-width: 44ch; } .meaning__intro .voice { margin-top: 22px; } .meaning__body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; margin-top: 76px; align-items: start; } /* Nothing floats loose — the thread runs through the reading too. */ .reading { position: relative; padding-left: 58px; padding-bottom: 8px; } .reading__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(212, 165, 116, .5), rgba(255, 255, 255, .06)); } .reading .bead { left: -6px; top: 7px; } .reading__voice { margin: 22px 0 0; font: italic 300 22px/36px var(--serif); color: var(--ink-72); text-wrap: pretty; max-width: 40ch; } .reading__pattern { margin: 20px 0 0; font: 300 20px/32px var(--serif); color: var(--ink-72); text-wrap: pretty; max-width: 40ch; } .reading__question { margin: 0; font: 300 20px/32px var(--serif); color: var(--ink-50); max-width: 40ch; } .reading__rule--top { margin: 32px 0 22px; } .reading__rule--bottom { margin: 26px 0 18px; } .reading__disclaimer { margin: 0; font: 400 13.5px/22px var(--sans); color: var(--ink-62); max-width: 46ch; } .reading__signoff { font: 400 13px/1 var(--sans); color: var(--ink-55); margin-top: 10px; } .meaning__phone { display: flex; justify-content: center; } .asides { margin-top: 0; } .asides > * { padding: 40px 40px 48px; } .asides > *:nth-child(2) { padding: 40px; } .aside__title { font-size: 22px; line-height: 1; margin: 0; } .aside__tags { margin-top: 18px; } .meaning__rule { margin-top: 90px; } /* ------------------------------------------------------------- letter --- */ .letter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .letter__title { font-size: 44px; line-height: 1.06; letter-spacing: -1.2px; margin: 26px 0 0; } .letter__lede { font: italic 300 18px/28px var(--serif); color: var(--ink-50); margin: 20px 0 0; max-width: 34ch; } .signup { padding-top: 4px; } .field-label { display: block; font: 600 11px/1 var(--sans); letter-spacing: 1.6px; color: var(--ink-38); margin-bottom: 18px; } /* Field grammar is an underline, never a box. */ .field { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--hairline); padding: 0 0 14px; font: 400 20px/1.2 var(--serif); color: var(--ink); transition: border-bottom-color .25s ease; } .field::placeholder { color: var(--ink-38); } /* Selection is an amber underline — that is the focus indicator too, so no ring on top of it. */ .field:focus { border-bottom-color: rgba(212, 165, 116, .55); } .field:focus-visible { outline: none; } .signup__actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; } .signup__terms { font: 400 12px/19px var(--sans); color: var(--ink-38); max-width: 26ch; } .signup__terms a { color: var(--ink-55); border-bottom: 1px solid var(--hairline); } .signup__terms a:hover { color: var(--ink); } .signup__status { font: 400 12px/19px var(--sans); color: var(--ink-62); margin: 18px 0 0; min-height: 19px; } .signup__status[data-tone="error"] { color: var(--destructive); } .subscribed { padding: 30px 0; } .subscribed__title { font: 200 38px/1.1 var(--serif); letter-spacing: -1px; color: var(--ink); } .subscribed__body { font: italic 300 18px/28px var(--serif); color: var(--ink-50); margin: 14px 0 0; } /* ------------------------------------------------------------- footer --- */ .colophon { border-top: 1px solid var(--hairline); } .colophon__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-top: 70px; padding-bottom: 40px; } .colophon__brand .brand { gap: 14px; } .colophon__brand .brand__mark { width: 38px; height: 38px; } .colophon__tagline { font: italic 300 18px/28px var(--serif); color: var(--ink-38); margin: 16px 0 0; max-width: 26ch; } .colophon__col { display: flex; flex-direction: column; gap: 14px; } .colophon__col .eyebrow { margin-bottom: 4px; } .colophon__base { padding: 26px 0 14px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .colophon__copy { font: 400 12px/19px var(--sans); color: var(--ink-30); } .colophon__consent { color: var(--ink-30); } /* The company details Italian law wants on the site itself: P.IVA on the site (art. 35 DPR 633/1972), company data (art. 2250 c.c.), e-commerce information duties (art. 7 D.Lgs. 70/2003). */ .colophon__company { font: 400 11px/18px var(--sans); color: var(--ink-30); margin: 0; padding-bottom: 60px; } /* Placeholders that must be replaced before launch. Not styled at all, by request: the class exists so a grep for "legal-todo" finds every one before launch, not so visitors see them. (Also defined in legal.css for the standalone legal pages.) */ .legal-todo { color: inherit; } /* ------------------------------------------------------------ consent --- */ .banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(17, 17, 20, .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--hairline); animation: riseIn .5s cubic-bezier(.2, .8, .2, 1) both; } .banner[hidden] { display: none; } .banner__inner { padding-top: 26px; padding-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .banner__copy { max-width: 52ch; } .banner__copy .eyebrow { display: block; margin-bottom: 12px; } .banner__copy p { font: 400 13.5px/22px var(--sans); color: var(--ink-62); margin: 0; } .banner__copy a { border-bottom: 1px solid rgba(212, 165, 116, .55); } .banner__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .btn-ghost { height: 52px; padding: 0 26px; border-radius: 999px; background: transparent; border: 1px solid var(--edge); color: var(--ink-85); font: 600 14px/1 var(--sans); cursor: pointer; transition: border-color .25s ease; } .btn-ghost:hover { border-color: rgba(255, 255, 255, .2); } .btn-solid { height: 52px; padding: 0 32px; border: none; border-radius: 999px; background: var(--accent-fill); color: var(--accent-on); font: 600 14px/1 var(--sans); cursor: pointer; transition: background .25s ease; } .btn-solid:hover { background: var(--accent-bright); } /* -------------------------------------------------------------- sheets -- */ dialog.sheet { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: none; background: transparent; color: inherit; overflow: hidden; } dialog.sheet::backdrop { background: rgba(4, 4, 6, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .25s ease both; } .sheet__scroll { height: 100%; overflow-y: auto; display: flex; justify-content: center; padding: 60px 24px; } .sheet--center .sheet__scroll { align-items: center; padding: 40px; } /* #111114 exists only for raised planes in documents and sheets. */ .sheet__panel { width: 100%; background: var(--raised); border: 1px solid var(--edge); border-radius: 20px; height: fit-content; animation: riseIn .35s cubic-bezier(.2, .8, .2, 1) both; } .sheet__panel--prefs { max-width: 560px; padding: 40px; } .sheet__panel--doc { max-width: 720px; padding: 56px; } .sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; } .sheet__title { font-size: 44px; line-height: 1.04; letter-spacing: -1.2px; margin: 22px 0 0; } .sheet__updated { color: var(--ink-30); margin-top: 18px; } .sheet__rule { margin: 40px 0 0; } .doc h3 { font: 300 20px/1 var(--serif); color: var(--ink); margin: 30px 0 0; } .doc h3:first-of-type { margin-top: 34px; } .doc p { font: 400 13.5px/22px var(--sans); color: var(--ink-62); margin: 12px 0 0; } .doc__controller { font: 400 12px/19px var(--sans); color: var(--ink-38); margin: 0; } .doc__rule-end { margin: 40px 0 26px; } /* Preferences */ .prefs__title { font-size: 36px; line-height: 1.08; letter-spacing: -1px; margin: 22px 0 0; } .prefs__rule-top { margin: 32px 0 0; } .prefs__rule-last { margin-bottom: 32px; } .switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 24px 0; } .switch-row__name { font: 300 20px/1 var(--serif); color: var(--ink); } .switch-row__body { font: 400 12px/19px var(--sans); color: var(--ink-50); margin: 10px 0 0; max-width: 44ch; } .switch-row__always { padding-top: 6px; white-space: nowrap; } .switch { width: 56px; min-width: 56px; height: 32px; padding: 3px; border: none; cursor: pointer; border-radius: 999px; display: flex; align-items: center; margin-top: 4px; justify-content: flex-start; background: var(--hairline); transition: background .25s ease; } .switch[aria-pressed="true"] { justify-content: flex-end; background: var(--accent-fill); } .switch span { display: block; width: 26px; height: 26px; border-radius: 999px; background: var(--ink-50); transition: background .25s ease; } .switch[aria-pressed="true"] span { background: var(--accent-on); } .sheet__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .prefs__actions { margin-top: 0; } .cookies__actions { margin-top: 32px; } /* Cookie table */ .cookie-lede { margin: 30px 0 0; } .cookie-table__rule--first { margin: 34px 0 0; } .cookie-row { display: grid; grid-template-columns: 1.1fr 1fr .7fr; gap: 24px; padding: 22px 0; } .cookie-row__name { font: 400 10.5px/1 var(--mono); color: var(--accent); letter-spacing: .6px; } .cookie-row__what { font: 400 12px/19px var(--sans); color: var(--ink-50); margin-top: 10px; } .cookie-row__cell { font: 400 12px/19px var(--sans); color: var(--ink-50); } /* ------------------------------------------------------------- motion --- */ @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after, dialog.sheet::backdrop { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* =========================================================== responsive == The prototype was desktop-only. Everything below reduces the same grammar rather than introducing a second one: columns collapse, type steps down, the phone mocks shrink. No new colours, no new shapes. ========================================================================= */ @media (max-width: 1100px) { .hero { gap: 44px; } /* Once the display sizes scale, tracking has to scale with them — em, computed from each design value (-1.2px / 52px = -0.023077em). */ .hero__title { font-size: clamp(44px, 6.4vw, 76px); } .section__title { font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.023077em; } .letter__title { font-size: clamp(32px, 4vw, 44px); letter-spacing: -.027273em; } .pair, .meaning__body, .letter__grid { gap: 56px; } } @media (max-width: 960px) { .masthead__nav { gap: 24px; } .hero { grid-template-columns: 1fr; min-height: 0; gap: 0; } .hero__copy { padding: 64px 0 0; } .hero__stage { padding: 48px 0 64px; } .hero__voice, .focus__answer, .night-head p, .letter__lede { max-width: 46ch; } .meaning__body { grid-template-columns: 1fr; } .meaning__phone, .hero__stage { justify-content: flex-start; } .reading__voice, .reading__pattern, .reading__question, .reading__disclaimer { max-width: 52ch; } .wake { grid-template-columns: 1fr; gap: 34px; } .wake .body { max-width: 46ch; } } @media (max-width: 880px) { /* No hamburger — the mark has three glyphs and none of them is a menu. Section links live in the footer; the one CTA stays. */ .masthead__nav .navlink { display: none; } .trio { grid-template-columns: 1fr; } .trio > * { padding: 36px 0 !important; } .colophon__grid { grid-template-columns: 1fr 1fr; } .colophon__brand { grid-column: 1 / -1; } } @media (max-width: 800px) { .pair, .letter__grid { grid-template-columns: 1fr; gap: 44px; } } @media (max-width: 760px) { :root { --gutter: 28px; } .section { padding-top: 76px; } .section--closed { padding-bottom: 76px; } .movements { padding-top: 80px; } .night-section { padding-top: 76px; padding-bottom: 80px; } .meaning__body { margin-top: 52px; } .meaning__rule { margin-top: 60px; } .night-head { margin-bottom: 40px; } .hero__rule { margin: 44px 0 24px; } .hero__claims { gap: 30px; } /* Same proportions against a 120px night. */ .hypnogram { height: 120px; gap: 2px; } .hypnogram i[data-stage="rem"] { height: 26px; } .hypnogram i[data-stage="light"] { height: 60px; } .hypnogram i[data-stage="deep"] { height: 103px; } .hypnogram i[data-stage="awake"] { height: 12px; } .sheet__scroll { padding: 24px 16px; } .sheet--center .sheet__scroll { padding: 24px 16px; } .sheet__panel--prefs, .sheet__panel--doc { padding: 30px 24px; } .sheet__title { font-size: clamp(30px, 7vw, 44px); letter-spacing: -.027273em; } .prefs__title { font-size: clamp(27px, 6.4vw, 36px); letter-spacing: -.027778em; } .banner__inner { gap: 26px; } .banner__actions { gap: 14px; } } @media (max-width: 560px) { .colophon__grid { grid-template-columns: 1fr; } .colophon__brand { grid-column: auto; } .cookie-row { grid-template-columns: 1fr; gap: 10px; } .switch-row { gap: 20px; } .banner__actions { width: 100%; } .banner__actions .btn-ghost, .banner__actions .btn-solid { flex: 1; padding: 0 18px; } .signup__actions { gap: 18px; } .signup__terms { max-width: none; } .pill { padding: 0 32px; } } @media (max-width: 440px) { :root { --gutter: 20px; } .hypnogram { gap: 1px; } .legend { flex-wrap: wrap; gap: 12px; } .legend__source { margin-left: 0; } /* Keep the device inside the viewport rather than clipping it. */ :root { --phone-scale: .62; --phone-w: 259px; --phone-h: 544px; } .hero__cta { gap: 20px; } .reading { padding-left: 40px; } /* Tighten the wash with the phone so it stays a glow, not a haze. */ .stage__wash { left: -70px; right: -70px; top: -70px; bottom: -70px; } }