/* ========================================================================== WORKTYPE — SITE STYLESHEET Structure: direction 05, "The Seam". Palette: the application's "Plot", see apps/web/src/ui/tokens.css in the worktype repo. Single source of truth. Every page links this file. Do not redefine tokens in a page; if a page needs something new, add it here as a component. ========================================================================== */ /* --- TOKENS -------------------------------------------------------------- */ :root{ /* Palette follows the application's "Plot" direction, apps/web/src/ui/tokens.css. The site keeps the drift/std/seam names because the whole stylesheet is built on them, but the values are the app's, so the two products look like one thing. */ /* Ground A — "drift". Unresolved, before, muted. Marketing default. */ --drift: #fcfcfd; --drift-ink: #14161a; --drift-mute: #5c636d; --drift-mute-2: #6b727c; --drift-hair: #e4e6ea; --drift-fill: #f7f9fc; /* Ground B — "standard". Resolved, after, authoritative. App + conversion. The app's signal blue. It means "measured" there and "resolved" here, which is the same claim made twice. */ --std: #1b3a6b; --std-ink: #fcfcfd; --std-mute: #a7b6d0; --std-hair: rgba(252,252,253,.18); --std-fill: rgba(252,252,253,.07); /* Seam — the only accent. Ice blue, chosen to stay in the same temperature as the ink blue so the seam reads as a technical marker rather than decoration. It is tuned for the dark ground, where it is 6.79:1. On the light ground it is deliberately faint: the boundary it marks is already carried by the change of ground, and the rule is an edge, not a signal. Anything that must be seen on the light ground uses --std instead. */ --seam: #a8cfe0; --seam-soft: rgba(168,207,224,.12); /* Type */ --display: "Big Shoulders Display", "Arial Narrow", sans-serif; --body: "Public Sans", system-ui, -apple-system, sans-serif; /* Spacing scale — 4px base. Use these, not arbitrary values. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px; --s8:56px; --s9:76px; --s10:96px; /* Structure */ --maxw: 1200px; --gutter: 44px; --seam-w: 2px; } /* --- RESET --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--drift);color:var(--drift-ink); font-family:var(--body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* Focus is an accessibility control, not decoration, so it uses the highest contrast available on each ground rather than the accent. */ :focus-visible{outline:3px solid var(--std);outline-offset:2px} .ground-std :focus-visible,.on-std :focus-visible,.sec-dark :focus-visible{outline-color:var(--seam)} /* Page-level ground. Put class="ground-std" on for dark-default pages. */ body.ground-std{background:var(--std);color:var(--std-ink)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)} @media(max-width:880px){:root{--gutter:22px}} /* --- TYPE ---------------------------------------------------------------- */ /* RULE: --display is for headings and numerals only, never below 22px, never for body copy, form labels, table cells, or nav. It is condensed and loses legibility fast at small sizes. */ .disp{font-family:var(--display);font-weight:900;text-transform:uppercase; letter-spacing:-.015em;line-height:.88} h1.page{font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:clamp(40px,7vw,96px);line-height:.86;letter-spacing:-.02em;margin:0 0 var(--s5)} h2.sec{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(32px,4.6vw,60px);line-height:.9;letter-spacing:-.015em; margin:0 0 var(--s5);max-width:16ch} h3.sub{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(26px,3.4vw,42px);line-height:.92;letter-spacing:-.015em;margin:0 0 var(--s3)} h4.min{font-family:var(--body);font-size:17px;font-weight:600;margin:0 0 var(--s2);letter-spacing:-.01em} .kick{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; margin:0 0 var(--s5);color:var(--drift-mute-2)} .ground-std .kick,.on-std .kick{color:var(--seam)} .lede{font-size:17.5px;line-height:1.6;max-width:54ch;margin:0;color:#3d444d} .ground-std .lede,.on-std .lede{color:var(--std-mute)} .lede b{font-weight:600;color:var(--drift-ink)} .ground-std .lede b,.on-std .lede b{color:var(--std-ink)} .small{font-size:13px;color:var(--drift-mute-2)} .on-std .small,.ground-std .small{color:#9db0cd} /* --- SEAM ---------------------------------------------------------------- */ /* RULE: the seam marks a real boundary between two states. Three legal forms: 1. .split — a 50/50 comparison of before/after. The canonical use. 2. .spine — a structural divider on interior pages (docs sidebar, form column). Vertical, full height of its container. 3. .seam-stub — a short vertical mark entering a section from its top edge, used once per page maximum as a closing echo. Never use the seam as an underline, a border on a card, or a highlight. */ /* The two columns share rows, so the kicker, heading, lede and item stack line up across the seam no matter how long either lede runs. Without this the comparison silently breaks the moment one side wraps to an extra line, and the paired items stop answering each other. Five rows covers the longest side used (kicker, heading, lede, chips, tally); a side with four children simply leaves the last row at zero. */ /* A band of page ground below the split. Sections are otherwise flush, and the whitespace that reads as a gap above a split is just the preceding section's trailing padding on the light ground. Where a dark section follows, its top padding is dark and gives no break at all, so the light column butts against it. This supplies the matching band. */ .split{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto); position:relative;margin-bottom:var(--s8)} .split::after{content:"";position:absolute;left:50%;top:0;bottom:0; width:var(--seam-w);background:var(--seam);transform:translateX(-1px);z-index:2} .split > .side{display:grid;grid-template-rows:subgrid;grid-row:1 / -1; align-content:start;padding:var(--s8) var(--s7) 62px} .split > .side.a{background:var(--drift);color:var(--drift-mute)} .split > .side.b{background:var(--std);color:var(--std-ink)} .split > .side.a .kick{color:var(--drift-mute-2)} .split > .side.b .kick{color:var(--seam)} .split > .side.a h3.sub{color:#3d444d} .split > .side.b h3.sub{color:var(--std-ink)} .split > .side > p{font-size:16px;line-height:1.62;max-width:38ch;margin:0 0 var(--s6)} .split > .side.b > p{color:var(--std-mute)} @media(max-width:880px){ /* Stacked, so there is nothing to align across. Drop back to normal flow, or the shared rows would force both sides into one column's worth. */ .split{grid-template-columns:1fr;grid-template-rows:none} .split::after{left:0;right:0;top:50%;bottom:auto;width:auto;height:var(--seam-w);transform:none} /* grid-row must be reset too. Left at 1 / -1 it pins both sides to the same row, which silently produces two uneven columns instead of a stack. */ .split > .side{display:block;grid-row:auto;padding:40px var(--gutter) 46px} } .spine{position:relative} .spine::before{content:"";position:absolute;left:0;top:0;bottom:0; width:var(--seam-w);background:var(--seam)} .seam-stub{position:relative} .seam-stub::before{content:"";position:absolute;left:50%;top:0; width:var(--seam-w);height:56px;background:var(--seam);transform:translateX(-1px)} /* --- SECTIONS ------------------------------------------------------------ */ /* RULE: sections alternate ground. A page never runs three sections of the same ground in a row without a split or spine between them. */ .sec-light{background:var(--drift);color:var(--drift-ink); padding:var(--s9) 0 84px;border-top:1px solid var(--drift-hair)} .sec-dark{background:var(--std);color:var(--std-ink);padding:var(--s9) 0 84px} /* A centred section header: kicker, heading and intro lede, sitting over whatever follows. Content beneath keeps its own alignment, so a rail or a split underneath stays left-aligned. Left-aligned these cap at 16ch and 54ch, which leaves the right half of the band empty. Where a two-tone .split starts directly beneath, the dark panel then begins hard against that empty half and the whole thing reads as a ragged step rather than a header over two columns. */ .sec-head{text-align:center} .sec-head h2.sec,.sec-head .lede{margin-left:auto;margin-right:auto} /* Page headers follow the same rule one level up, so an interior page reads the way the homepage hero does and does not flip alignment between its own title and the section headers beneath it. */ .page-head{text-align:center} .page-head h1.page,.page-head .lede{margin-left:auto;margin-right:auto} .sec-dark h2.sec,.sec-dark h1.page{color:var(--std-ink)} .sec-dark .kick{color:var(--seam)} .sec-dark .lede{color:var(--std-mute)} .sec-dark .lede b{color:var(--std-ink)} @media(max-width:880px){.sec-light,.sec-dark{padding:52px 0 58px}} /* --- NAV ----------------------------------------------------------------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(252,252,253,.94); backdrop-filter:blur(10px);border-bottom:1px solid var(--drift-hair)} .nav.on-std{background:rgba(27,58,107,.94);border-bottom-color:var(--std-hair)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:62px; display:flex;align-items:center;gap:30px} .logo{font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:23px;letter-spacing:.01em;margin-right:auto;display:flex;align-items:center; /* Big Shoulders is condensed with almost no left side bearing, so the mark sits visually tighter than the gap value suggests. */ gap:14px} /* The mark is the accent, everywhere. It is 6.79:1 on the dark ground and a deliberately quiet 1.62:1 on the light one. A logo mark is decoration rather than an affordance, so the faint version is a choice, not a defect. It must not be --std: the footer sits on --std, so a blue mark disappears there entirely. */ .logo i{width:4px;height:19px;background:var(--seam);display:inline-block} .nav .lnk{font-size:13.5px;font-weight:500;color:var(--drift-mute)} .nav .lnk:hover{color:var(--drift-ink)} .nav.on-std .lnk{color:var(--std-mute)} .nav.on-std .lnk:hover{color:var(--std-ink)} .nav .lnk[aria-current="page"]{color:var(--drift-ink);box-shadow:inset 0 -2px 0 var(--std)} .nav.on-std .lnk[aria-current="page"]{color:var(--std-ink);box-shadow:inset 0 -2px 0 var(--seam)} /* There is no mobile menu, so below 900px the nav collapses to the logo plus the two doors into the app. Sign in has to survive that: it is the only route back in for someone who already has an account, and dropping it would leave a returning user on a phone with nowhere to go but Start free. */ @media(max-width:900px){.nav .lnk:not(.lnk-auth){display:none}} /* --- BUTTONS ------------------------------------------------------------- */ .btn{display:inline-block;background:var(--std);color:var(--std-ink); font-weight:600;font-size:15.5px;padding:16px 30px;border:0;cursor:pointer; font-family:var(--body);transition:background .15s,color .15s} .btn:hover{background:var(--seam);color:var(--std)} .btn-ghost{display:inline-block;border:2px solid var(--std);color:var(--std); font-weight:600;font-size:15.5px;padding:14px 26px;background:transparent;cursor:pointer; font-family:var(--body);transition:background .15s,color .15s} .btn-ghost:hover{background:var(--std);color:var(--std-ink)} /* Buttons on the standard ground. These are keyed off a CLASS, so a section that sets the dark ground with an inline style and no class gets the light-ground button instead: --std fill on a --std background, contrast 1.0:1, invisible. That shipped on three pages plus both pricing tables. Two cases, two fixes: - A component whose ground is fixed by its own class (.side.b, .tier.hi) is listed here, the same way .item already is. - A one-off section that sets a ground inline gets .on-std in the markup. */ .on-std .btn,.sec-dark .btn,.ground-std .btn,.side.b .btn,.tier.hi .btn{background:var(--seam);color:var(--std)} .on-std .btn:hover,.sec-dark .btn:hover,.ground-std .btn:hover,.side.b .btn:hover,.tier.hi .btn:hover{background:var(--std-ink)} .on-std .btn-ghost,.sec-dark .btn-ghost,.ground-std .btn-ghost,.side.b .btn-ghost,.tier.hi .btn-ghost{border-color:var(--std-ink);color:var(--std-ink)} .on-std .btn-ghost:hover,.sec-dark .btn-ghost:hover,.ground-std .btn-ghost:hover,.side.b .btn-ghost:hover,.tier.hi .btn-ghost:hover{background:var(--std-ink);color:var(--std)} .btn-sm{font-size:13.5px;padding:11px 18px} .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .cta.center{justify-content:center} /* --- SPLIT PROSE GRID ---------------------------------------------------- */ /* Two columns of prose sitting side by side within a section. Lives here rather than inline on the page because it needs a breakpoint, and an inline grid-template-columns outranks any class rule that would collapse it. */ .ind-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8);align-items:start} @media(max-width:880px){.ind-grid{grid-template-columns:1fr;gap:var(--s6)}} /* --- ITEM STACK ---------------------------------------------------------- */ .stack{display:grid;gap:9px} .item{padding:14px 16px;font-size:14px;line-height:1.5; background:var(--drift-fill);border-left:2px solid #c8ccd2;color:#5c636d} .item b{font-weight:600;display:block;margin-bottom:3px;color:#3d444d} .on-std .item,.sec-dark .item,.side.b .item{background:var(--std-fill); border-left-color:var(--seam);color:#dbe3f0} .on-std .item b,.sec-dark .item b,.side.b .item b{color:var(--std-ink)} /* --- RAIL (sequenced steps) ---------------------------------------------- */ .rail{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s7); border-top:1px solid var(--drift-hair)} .sec-dark .rail{border-top-color:var(--std-hair)} .rail > .st{padding:26px 30px 10px 0;border-right:1px solid var(--drift-hair);position:relative} .sec-dark .rail > .st{border-right-color:var(--std-hair)} .rail > .st:last-child{border-right:0} .rail > .st:not(:first-child){padding-left:30px} .rail > .st::before{content:"";position:absolute;top:-4px;left:0;width:6px;height:6px;background:var(--seam)} .rail > .st:not(:first-child)::before{left:30px} .rail h4{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:15px;letter-spacing:.1em;color:var(--seam);margin:0 0 14px} .rail b{display:block;font-size:19px;font-weight:600;margin-bottom:10px} .rail p{margin:0;font-size:14.5px;line-height:1.6;color:var(--drift-mute)} .sec-dark .rail p{color:var(--std-mute)} @media(max-width:880px){ .rail{grid-template-columns:1fr} .rail > .st{border-right:0;border-bottom:1px solid var(--drift-hair);padding:24px 0 22px!important} .sec-dark .rail > .st{border-bottom-color:var(--std-hair)} .rail > .st::before{left:0!important} } /* --- COLUMN GRID (evidence, features) ------------------------------------ */ .cols{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s7); border-top:2px solid var(--drift-ink)} .sec-dark .cols{border-top-color:var(--std-ink)} .cols > .col{padding:var(--s5) 26px 26px 0;border-right:1px solid var(--drift-hair)} .sec-dark .cols > .col{border-right-color:var(--std-hair)} .cols > .col:last-child{border-right:0} .cols > .col:not(:first-child){padding-left:26px} .cols h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--drift-mute-2);margin:0 0 14px} .sec-dark .cols h4{color:var(--seam)} .cols q{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:24px;line-height:.98;letter-spacing:-.01em;margin-bottom:12px;quotes:none;color:var(--drift-ink)} .sec-dark .cols q{color:var(--std-ink)} .cols q::before,.cols q::after{content:""} .cols p{margin:0;font-size:13.5px;line-height:1.55;color:var(--drift-mute)} .sec-dark .cols p{color:var(--std-mute)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-2{grid-template-columns:repeat(2,1fr)} @media(max-width:900px){.cols{grid-template-columns:1fr 1fr} .cols > .col{border-bottom:1px solid var(--drift-hair);padding-bottom:22px}} @media(max-width:560px){.cols,.cols-3,.cols-2{grid-template-columns:1fr} .cols > .col{border-right:0;padding-left:0!important}} /* A .cols-3 holding six items runs two rows of three. The base grid assumes a single row: every non-last column carries a right border and every non-first a left padding, which in a second row indents that row's first column and hangs a border on the grid's right edge. Desktop only; below 900px the two-column rules above already give every cell a bottom border. Harmless on a one-row .cols-3: nth-child(n+4) matches nothing, and the other two rules strip a border and a padding that the edge columns should not have anyway. */ @media(min-width:901px){ .cols-3 > .col:nth-child(3n){border-right:0} .cols-3 > .col:nth-child(3n+1){padding-left:0} .cols-3 > .col:nth-child(n+4){border-top:1px solid var(--drift-hair)} .sec-dark .cols-3 > .col:nth-child(n+4){border-top-color:var(--std-hair)} } /* --- CHIPS + TALLY ------------------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:7px} .chips span{font-size:12.5px;font-weight:500;padding:7px 12px; border:1px solid #c8ccd2;color:var(--drift-mute)} .on-std .chips span,.side.b .chips span{border-color:var(--seam); background:var(--seam-soft);color:#f0d0b8} .tally{margin-top:var(--s5);padding-top:var(--s4);font-size:15.5px;line-height:1.5; border-top:1px solid #c8ccd2;color:#5c636d} .on-std .tally,.side.b .tally{border-top-color:rgba(217,140,95,.5);color:#dbe3f0} .tally b{font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:24px;letter-spacing:0;vertical-align:-1px} .on-std .tally b,.side.b .tally b{color:var(--seam)} /* --- TIERS --------------------------------------------------------------- */ /* Billing toggle. CSS only, because the site ships no JavaScript: a hidden checkbox drives sibling selectors on the tier grid. Both labels point at the same input, so either one flips it. Annual is checked by default, so the lower number anchors first and switching to monthly reveals the penalty. */ .bill-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* Centred under the section header. inline-flex ignores auto margins, so this is flex with a fitted width instead. */ .bill-switch{display:flex;width:fit-content;margin:var(--s5) auto 0; border:1px solid var(--drift-hair);border-radius:2px;overflow:hidden} .bill-opt{padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer; color:var(--drift-mute);transition:background .12s,color .12s} .bill-opt:hover{color:var(--drift-ink)} .bill-monthly{background:var(--drift-ink);color:var(--drift)} .bill-toggle:checked ~ .bill-switch .bill-monthly{background:transparent;color:var(--drift-mute)} .bill-toggle:checked ~ .bill-switch .bill-annual{background:var(--drift-ink);color:var(--drift)} .bill-toggle:focus-visible ~ .bill-switch{outline:3px solid var(--std);outline-offset:2px} .when-annual{display:none} .bill-toggle:checked ~ .tiers .when-annual{display:revert} .bill-toggle:checked ~ .tiers .when-monthly{display:none} .tiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s7); border:2px solid var(--drift-ink)} /* A column so the CTA can be pushed to the bottom. The cards are already equal height — grid stretches them — but content flows top-down, so a one-line description lifted Company's button above the other two. */ .tier{padding:var(--s6) var(--s6) 36px;display:flex;flex-direction:column} /* auto absorbs the leftover space above the button; flex-start stops the anchor stretching to the full column width, which is what a flex item would otherwise do. */ .tier > .btn,.tier > .btn-ghost{margin-top:auto;align-self:flex-start} .tier:not(:last-child){border-right:2px solid var(--drift-ink)} .tier.hi{background:var(--std);color:var(--std-ink)} .tier h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--drift-mute-2);margin:0 0 18px} .tier.hi h4{color:var(--seam)} .amt{display:flex;align-items:baseline;gap:9px;margin-bottom:10px} .amt b{font-family:var(--display);font-weight:900;font-size:56px;line-height:.85;letter-spacing:-.02em} .amt span{font-size:13px;color:var(--drift-mute)} .tier.hi .amt span{color:var(--std-mute)} .tier > p{font-size:15px;line-height:1.6;color:#3d444d;margin:0 0 var(--s5);max-width:36ch} .tier.hi > p{color:var(--std-mute)} .tier ul{list-style:none;padding:0;margin:0 0 var(--s5)} .tier li{font-size:14.5px;line-height:1.45;padding:10px 0 10px 20px;position:relative; border-top:1px solid var(--drift-hair);color:#3d444d} .tier.hi li{border-top-color:var(--std-hair);color:var(--std-mute)} .tier li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:2px;background:var(--drift-ink)} .tier.hi li::before{background:var(--seam)} @media(max-width:900px){.tiers{grid-template-columns:1fr} .tier:not(:last-child){border-right:0;border-bottom:2px solid var(--drift-ink)}} /* --- DOCS SHELL ---------------------------------------------------------- */ /* The seam here is the spine between navigation and content. */ .shell{display:grid;grid-template-columns:264px 1fr;min-height:70vh} .shell-nav{padding:var(--s7) var(--s6) var(--s8) 0} .shell-body{padding:var(--s7) 0 var(--s9) var(--s7);position:relative} .shell-body::before{content:"";position:absolute;left:0;top:0;bottom:0; width:var(--seam-w);background:var(--seam)} .shell-nav h5{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--drift-mute-2);margin:0 0 var(--s3)} .shell-nav ul{list-style:none;padding:0;margin:0 0 var(--s6)} .shell-nav li a{display:block;padding:7px 0;font-size:14.5px;color:var(--drift-mute)} .shell-nav li a:hover{color:var(--drift-ink)} .shell-nav li a[aria-current="page"]{color:var(--drift-ink);font-weight:600} .prose{max-width:66ch} .prose h2{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:32px;line-height:.94;letter-spacing:-.015em;margin:var(--s8) 0 var(--s4)} .prose h2:first-child{margin-top:0} .prose h3{font-size:19px;font-weight:600;margin:var(--s6) 0 var(--s2);letter-spacing:-.01em} .prose p{font-size:16px;line-height:1.68;color:#3d444d;margin:0 0 var(--s4)} .prose ul{margin:0 0 var(--s4);padding-left:20px} .prose li{font-size:16px;line-height:1.68;color:#3d444d;margin-bottom:6px} .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px; background:var(--drift-fill);padding:2px 6px} .callout{border-left:2px solid var(--std);background:rgba(27,58,107,.06); padding:var(--s4) var(--s5);margin:0 0 var(--s5)} .callout p{margin:0;font-size:15px;line-height:1.6} @media(max-width:880px){ .shell{grid-template-columns:1fr} .shell-nav{padding:var(--s5) 0 var(--s4)} .shell-body{padding:var(--s5) 0 var(--s8);border-top:var(--seam-w) solid var(--seam)} .shell-body::before{display:none} } /* --- FORM ---------------------------------------------------------------- */ .field{margin-bottom:var(--s5)} .field label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;margin-bottom:var(--s2);color:var(--drift-mute)} .on-std .field label,.ground-std .field label{color:var(--std-mute)} .field input,.field select{width:100%;font-family:var(--body);font-size:16px; padding:14px 15px;border:2px solid var(--drift-ink);background:#fff;color:var(--drift-ink)} /* Both halves of each pair, or a dark-ground form gets a white select sitting in a row of transparent inputs. No page uses a dark form today; these stay complete so the next one that does is not a bug report. */ .ground-std .field input,.ground-std .field select, .on-std .field input,.on-std .field select{ background:transparent;border-color:var(--std-hair);color:var(--std-ink)} .ground-std .field input:focus,.ground-std .field select:focus, .on-std .field input:focus,.on-std .field select:focus{border-color:var(--seam)} .field .hint{font-size:13px;color:var(--drift-mute-2);margin:var(--s2) 0 0} .ground-std .field .hint,.on-std .field .hint{color:#9db0cd} /* --- TIMELINE (changelog) ------------------------------------------------ */ .tl{list-style:none;padding:0;margin:var(--s7) 0 0} .tl > li{display:grid;grid-template-columns:150px 1fr;gap:var(--s6); padding:var(--s5) 0;border-top:1px solid var(--drift-hair)} .tl > li:first-child{border-top:2px solid var(--drift-ink)} .tl time{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:20px;letter-spacing:.01em;color:var(--drift-mute-2)} .tl h3{font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em} .tl p{margin:0;font-size:15px;line-height:1.6;color:var(--drift-mute)} .badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:4px 9px;background:var(--seam);color:var(--std);margin-bottom:8px} @media(max-width:700px){.tl > li{grid-template-columns:1fr;gap:var(--s2)}} /* --- EMPTY STATE --------------------------------------------------------- */ .empty{border:2px dashed rgba(252,252,253,.28);padding:var(--s8) var(--s7);text-align:center} .empty h3{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:28px;line-height:.95;margin:0 0 var(--s3);color:var(--std-ink)} .empty p{font-size:15.5px;line-height:1.6;color:var(--std-mute);max-width:44ch;margin:0 auto var(--s5)} /* --- FOOTER -------------------------------------------------------------- */ .site-foot{background:var(--std);color:var(--std-ink); border-top:1px solid var(--std-hair);padding:var(--s8) 0 var(--s7)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6);margin-bottom:var(--s8)} .foot-grid h5{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--seam);margin:0 0 var(--s3)} /* Must exclude the logo. At .foot-grid a this rule is 0,1,1 and beats .logo at 0,1,0, so it was overriding the mark's display, size, colour and padding: the footer logo rendered as a 14px muted link with its mark jammed against the word, because gap does nothing on a block. */ .foot-grid a:not(.logo){display:block;padding:5px 0;font-size:14px;color:var(--std-mute)} .foot-grid a:not(.logo):hover{color:var(--std-ink)} .foot-grid p{font-size:14.5px;line-height:1.6;color:var(--std-mute);margin:var(--s3) 0 0;max-width:34ch} .foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; border-top:1px solid var(--std-hair);padding-top:var(--s5);font-size:12.5px;color:#9db0cd} @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} /* --- MOTION -------------------------------------------------------------- */ /* RULE: one orchestrated moment per page maximum, and it must be tied to meaning (a state resolving), never ambient. Everything else is a 150ms colour transition on hover. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;transition-duration:.001ms!important} html{scroll-behavior:auto} }