/* ==================================================================== RDY NOIR — the component library ==================================================================== THIS IS THE ONLY PLACE GENERIC STYLING LIVES. Everything reusable is a component here. Page-specific layout lives in app.css. Nothing else in the codebase should declare colors, radii, borders, or type sizes — if you need a new look, add a component here (or a knob in §1c) so every page gets it at once. HOW TO BUILD SOMETHING NEW 1. Find the component below whose grammar fits and copy the markup snippet from its section comment. Do not invent a variant with inline styles — extend the component here instead. 2. Never hardcode a color, radius, or hairline. Use the tokens. 3. demo.html renders every component on this page. Open it after any change here — it is the contract. THE HOUSE GRAMMAR (what makes it look like rdy) • Pure black canvas. Nothing is a box: things are separated by hairlines, never by a filled panel, a drop shadow, or a radius. The only rounded things are pills and circles. • Display text is lowercase and light (500). Emphasis inside a heading = (italic 800). Names are big, meta is small and faint. • Inputs are an underline, not a field. No fill, no border box. • One accent: violet. Status colors are for signals only. • Hover = brighten + a small nudge or scale. Nothing bounces. • The one arrow is the circled ↗ (.circ), and it rotates 45° on hover. ==================================================================== */ /* -------------------------------------------------------------------- 0. THE BRAND FACE -------------------------------------------------------------------- */ @font-face{font-family:"Creato Display";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/CreatoDisplay-Regular.ttf") format("truetype")} @font-face{font-family:"Creato Display";font-style:normal;font-weight:500;font-display:swap; src:url("fonts/CreatoDisplay-Medium.ttf") format("truetype")} @font-face{font-family:"Creato Display";font-style:normal;font-weight:700;font-display:swap; src:url("fonts/CreatoDisplay-Bold.ttf") format("truetype")} @font-face{font-family:"Creato Display";font-style:italic;font-weight:800;font-display:swap; src:url("fonts/CreatoDisplay-ExtraBoldItalic.ttf") format("truetype")} /* -------------------------------------------------------------------- 1a. TOKENS — palette The raw brand values. Change these to re-theme the whole system. -------------------------------------------------------------------- */ :root{ --bg:#000; /* page canvas — always pure black */ --ink:#e5e5e5; /* rdy off-white */ --accent:#8040ff; /* the violet */ --accent-bright:#a375ff; /* violet for small text on black */ --accent-hover:#6f2ff2; --aur-1:#7040ff; /* ambient light, warm side */ --aur-2:#ff2d78; /* ambient light, cool side */ --good:#50ff35; /* status: positive (rdy lime) */ --warn:#ffb224; /* status: attention */ --danger:#ff5a5a; /* status: destructive */ --font:"Creato Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --ease:cubic-bezier(.16,1,.3,1); /* every transition uses this */ } /* -------------------------------------------------------------------- 1b. TOKENS — roles What the palette means. Components reference these, never the raw palette, so a re-theme never needs a component edit. -------------------------------------------------------------------- */ :root{ /* THERE IS NO GREY INK. These three used to be a brightness ramp (.88/.58/.38) and every one of them read as unfinished text on a high-contrast screen: a caption looked like a draft, a label looked disabled. They are all the one off-white now, and the roles still exist only so a component can say what it means. Hierarchy is carried by SIZE and WEIGHT — 700 is what matters, 400 is what helps. See §1d. */ --ink2:var(--ink); /* long-form body text */ --muted:var(--ink); /* secondary text, resting names */ --muted2:var(--ink); /* faint text, labels, meta */ --ink-ghost:rgba(237,237,237,.18); /* inactive / disabled type — a state, not text */ --placeholder:rgba(237,237,237,.4); /* an empty field's prompt is not text either */ --line:rgba(255,255,255,.09); /* the hairline — the only divider */ --line-strong:rgba(255,255,255,.2); /* interactive / emphasized hairline */ --line-soft:rgba(255,255,255,.05); /* nested hairline */ --accent-soft:rgba(128,64,255,.16); /* violet tint — fills, glows */ /* legacy near-black surfaces. Nothing in the house grammar is a filled panel; these exist only for the rare true overlay. */ --surface:#0d0d0f; --surface2:#141416; } /* -------------------------------------------------------------------- 1c. TOKENS — component knobs THE RESTYLE SURFACE. Every component below is built from these, so changing one line here restyles that component everywhere it is used. -------------------------------------------------------------------- */ :root{ /* fields */ --field-line:var(--line); /* the input underline */ --field-line-focus:var(--accent); --field-size:15.5px; --field-pad:9px 2px; --label-size:13px; /* controls */ --pill-radius:999px; --pill-pad:10px 20px; --pill-size:14px; --pill-line:var(--line-strong); /* blocks & lists — the unboxed grammar */ --divider:var(--line); /* every rule between two things */ --block-pad:clamp(20px,2.6vw,28px); /* space a block leaves under its rule */ --row-pad:clamp(18px,2.6vw,28px); /* vertical breathing in a list row */ /* the one true overlay */ --sheet-bg:#000; --sheet-radius:20px; --sheet-pad:clamp(22px,3.4vw,32px); /* type scale */ --t-hero:clamp(46px,7.4vw,86px); --t-h2:clamp(32px,4.6vw,54px); --t-h3:clamp(20px,2.4vw,30px); /* page rhythm */ --pad-x:clamp(22px,4.5vw,64px); --sect:clamp(70px,7.5vw,118px); /* the air between two sections */ --sect-lg:clamp(84px,9.5vw,152px); /* … and between two on an editorial page */ --w:1400px; /* the column every page is set in */ --radius:18px; /* the only radius left: media, tiles */ } /* -------------------------------------------------------------------- 1d. WEIGHT IS THE HIERARCHY Grey-on-black is a hierarchy that only works on a calibrated panel: on a high-contrast or bright screen the .58 and .38 inks fell far enough that supporting copy read as unfinished and a label read as disabled. This used to be an exception for the rdy pages and the footer, with the dealroom keeping the graded inks on the theory that a dense working list needs brightness to separate resting from active. It does not — it needs the same thing every other page needs, which is for the important half of a pair to be BOLD and the helping half to be REGULAR. So the exception is now the rule, everywhere, and §1b holds one ink. THE CONTRACT FOR ANYTHING NEW: two texts sitting next to each other are told apart by weight (700 vs 400) and size. Never by brightness — there is no dimmer ink left to reach for. Colour is for signals only (good / warn / danger / the one accent), never for rank. -------------------------------------------------------------------- */ /* what a thing IS, next to what it does for you */ b,strong{font-weight:700} .callout b,.togglerow b,.fact .fl,.fld label,.qa-label,.frev-q,.ffld label{font-weight:700} /* …and the supporting halves, held at regular so the pair still reads */ .hint,.meta,.desc,.psub,.sect-sub,.lead,.savestate,.count,.tag,.status-note, .disclaimer,.checks,.empty,.row .rmeta,.rowcard .rc-sub{font-weight:400} /* -------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------- */ *{box-sizing:border-box} html,body{margin:0} body{font-family:var(--font);font-optical-sizing:auto;background:var(--bg);color:var(--ink); font-size:14px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} button{font-family:inherit;cursor:pointer;color:inherit} input,select,textarea{font:inherit;color:inherit} a{color:inherit;text-decoration:none;transition:color .25s var(--ease)} a:hover{color:#fff} .hidden{display:none!important} ::selection{background:var(--accent);color:#fff} /* the one thing that stays dim: an empty field's prompt is not text, and a placeholder as bright as a typed answer reads as a filled field */ ::placeholder{color:var(--placeholder)} :focus-visible{outline:1px solid var(--accent);outline-offset:3px} *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px} ::-webkit-scrollbar-track{background:transparent} mark{background:var(--accent-soft);color:#d9c9ff;padding:1px 4px;border-radius:4px} /* -------------------------------------------------------------------- 3. TYPOGRAPHY

where ambition becomes performance

section title

one supporting line.

small label

divider heading

-------------------------------------------------------------------- */ h1{margin:0 0 4px;font-size:clamp(30px,4.4vw,46px);font-weight:500;letter-spacing:-.02em; line-height:1.05;text-transform:lowercase;color:var(--ink)} h1 em,h2 em,h3 em,.em{font-style:italic;font-weight:800;color:#fff} h1.big,h2.big{font-size:var(--t-h2);font-weight:500;letter-spacing:-.01em;line-height:1.05;margin:0; color:var(--ink);text-transform:lowercase} /* A section head owns what comes after it. The gap between a title and its own content is deliberately a third of the gap above the title — that ratio, not the absolute space, is what stops one section's title from reading as the tail of the previous one. */ .sect-head{margin-bottom:clamp(16px,1.8vw,26px)} /* There is no eyebrow. A title says what the section is; a tiny tracked label above it saying the same thing again in grey was noise on every page, so it is gone from the library, not just from the markup. */ .sect-sub{color:var(--muted);font-size:clamp(15px,1.4vw,17.5px);margin:14px 0 0;max-width:56ch;line-height:1.7} .lead{color:var(--muted);margin:0 0 26px;font-size:16px;line-height:1.7;max-width:64ch} h2.sec{margin:38px 0 14px;font-size:13px;font-weight:500;color:var(--muted2);text-transform:lowercase} .hint{font-size:12.5px;color:var(--muted2);text-transform:lowercase;line-height:1.6} .desc{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.7;max-width:65ch} .meta{color:var(--muted2);font-size:13.5px;text-transform:lowercase;line-height:1.5} .status-note{font-size:13px;color:var(--muted2);text-transform:lowercase} .status-note.exited{color:#3ee6a0} /* a heading that opens a new stretch of a long column */ .psec{font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:-.012em;line-height:1.1; color:#fff;text-transform:lowercase;margin:clamp(38px,5vw,58px) 0 clamp(22px,3vw,34px); padding-top:clamp(26px,3.4vw,36px);border-top:1px solid var(--divider)} /* the sentence that says what a .psec stretch is for. Sentence case, so it is not .hint — and the heading tightens up when one follows it. */ .psec:has(+ .psub){margin-bottom:clamp(12px,1.4vw,16px)} .psub{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:62ch; margin:0 0 clamp(20px,2.6vw,30px)} /* …and the same heading a level down, for a stretch inside a stretch */ .psec.sm{font-size:clamp(16.5px,1.7vw,19px);letter-spacing:-.006em; margin:clamp(28px,3.4vw,40px) 0 clamp(14px,1.8vw,20px);padding-top:clamp(18px,2.4vw,26px)} /* …and a level UP, for the one stretch on a page that has to reach off the bottom of the screen and pull somebody down into it. A foldout asks permission and gets refused; a title this size is an invitation you can see from where you already are. */ .psec.lg{font-size:var(--t-h2);letter-spacing:-.018em;line-height:1.04; margin:clamp(56px,7vw,96px) 0 clamp(14px,1.8vw,20px);padding-top:clamp(34px,4.4vw,50px)} /* text links — works on an or a .quiet = de-emphasized · .sm = compact · .danger = destructive There is no second button. If a screen seems to need one, it doesn't. — a bare circular control
…
— a horizontal group of them -------------------------------------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--pill-line); background:transparent;color:var(--ink);padding:var(--pill-pad);border-radius:var(--pill-radius); font-weight:500;font-size:var(--pill-size);line-height:1;text-transform:lowercase;text-decoration:none; transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} .pill:hover{background:var(--ink);border-color:var(--ink);color:#000;transform:translateY(-2px) scale(1.03)} /* the circled arrow rides inside the pill and rotates on hover */ .circ{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px; border:1px solid currentColor;border-radius:50%;flex-shrink:0;transition:transform .35s var(--ease)} .circ svg{width:9px;height:9px;display:block} .pill:hover .circ{transform:rotate(45deg)} .pill.sm{padding:7px 14px;font-size:13px} .pill.sm .circ{width:17px;height:17px} .pill.quiet{border-color:var(--line);color:var(--muted)} .pill.quiet:hover{border-color:var(--ink);background:var(--ink);color:#000} .pill.danger{border-color:rgba(255,90,90,.4);color:var(--danger)} .pill.danger:hover{background:var(--danger);border-color:var(--danger);color:#fff} .pill[disabled]{opacity:.4;pointer-events:none} /* .on = this pill is the page you are already on */ .pill.on{border-color:var(--accent);color:#fff} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px; border:1px solid var(--line);background:none;border-radius:50%;color:var(--muted2); transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease); padding:0;flex-shrink:0} .icon-btn:hover{color:#fff;border-color:var(--ink);transform:scale(1.1)} .btn-danger-ghost{background:none;border:1px solid transparent;color:var(--danger); border-radius:var(--pill-radius);padding:9px 16px;font-weight:500;font-size:14px; text-transform:lowercase;transition:.25s var(--ease)} .btn-danger-ghost:hover{border-color:rgba(255,90,90,.45)} .btn-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap} /* -------------------------------------------------------------------- 5. SIGNALS — chips, tags, dots
neutral violetlive
audience
-------------------------------------------------------------------- */ .chip{display:inline-block;padding:3px 11px;border-radius:var(--pill-radius);font-size:12px; font-weight:400;line-height:1.7;white-space:nowrap;background:none;color:var(--muted); border:1px solid var(--line);text-transform:lowercase;transition:.2s var(--ease)} .chip.accent{border-color:rgba(128,64,255,.45);color:var(--accent-bright)} .chip.good{border-color:rgba(80,255,53,.3);color:#8dff7a} .chip.warn{border-color:rgba(255,178,36,.34);color:#ffcf70} .chip.grey{border-color:var(--line-soft);color:var(--muted2)} a.chip:hover,button.chip:hover{border-color:var(--line-strong);color:#fff} /* align-items:center matters: without it a chip stretches to the tallest thing beside it (an avatar, a votepill) and stops reading as a chip. */ .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center} .gdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle} /* a tag is a chip with the box taken away */ .tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px} .tag{font-size:12.5px;color:var(--muted2);text-transform:lowercase} .tag::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--accent);margin-right:6px;vertical-align:2px;opacity:.7} /* a count on a pill outline — votes, tallies */ .votepill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line); border-radius:var(--pill-radius);padding:6px 14px;font-weight:500;white-space:nowrap; font-variant-numeric:tabular-nums;color:var(--ink)} /* initials in a hairline circle */ .avatar{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted); font-weight:500;font-size:14px;flex-shrink:0} /* big number + small lowercase label — the rdy.vc stat grammar
62 companies
.hstat / .mstat are the same idea at hero and section scale. */ .stat{display:flex;align-items:baseline;gap:7px} .stat b{font-size:clamp(28px,3vw,34px);font-weight:500;letter-spacing:-.02em;color:#fff;line-height:1; font-variant-numeric:tabular-nums} .stat span{font-size:13px;color:var(--muted2);font-weight:400;text-transform:lowercase} .hstat .n{font-size:clamp(24px,3vw,34px);font-weight:500;line-height:1.1;color:#fff; font-variant-numeric:tabular-nums} .hstat .l{font-size:13.5px;color:var(--muted);margin-top:4px;text-transform:lowercase} .mstat .n{font-size:clamp(32px,4.4vw,56px);font-weight:500;color:#fff;letter-spacing:-.01em;line-height:1.1} .mstat .l{font-size:14px;color:var(--muted);margin-top:8px;text-transform:lowercase} /* -------------------------------------------------------------------- 6. FIELDS — an input is an underline, never a box
-------------------------------------------------------------------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px) clamp(24px,4vw,48px)} @media(max-width:640px){.form-grid{grid-template-columns:1fr}} .fld{display:flex;flex-direction:column;gap:6px} .fld.full{grid-column:1/-1} /* a .fld that holds the form's buttons instead of a field: .fld wins the cascade over .btn-row, so restore the row direction and its gap here. */ .fld.btn-row{flex-direction:row;gap:14px} /* a label says what to type, so it is the bold half of the pair and the value it labels is the regular one */ .fld label{font-size:var(--label-size);color:var(--muted2);text-transform:lowercase;font-weight:700} .fld input,.fld select,.fld textarea,.togglerow select,input.uline,select.uline{width:100%;background:none; border:none;border-bottom:1px solid var(--field-line);border-radius:0;padding:var(--field-pad);outline:none; color:var(--ink);font-size:var(--field-size);font-weight:400;transition:border-color .3s var(--ease)} .fld input:focus,.fld select:focus,.fld textarea:focus,.togglerow select:focus,input.uline:focus,select.uline:focus{border-bottom-color:var(--field-line-focus)} .fld input:hover,.fld select:hover,.fld textarea:hover,.togglerow select:hover,input.uline:hover,select.uline:hover{border-bottom-color:var(--line-strong)} /* .uline is the same underline outside a .fld — a lone control sitting in a filter or invite row, where the label belongs to the row and not to the field. A SELECT NEEDS IT AS MUCH AS AN INPUT DOES: without the class reaching selects, a bare
…
12 of 40 -------------------------------------------------------------------- */ .fbar{display:flex;gap:clamp(14px,2.5vw,28px);align-items:baseline;flex-wrap:wrap; margin:0 0 clamp(26px,4vw,44px)} .fbar input.search,.fbar input{background:none;border:none;border-bottom:1px solid var(--field-line); color:var(--ink);padding:8px 2px;font-size:16px;min-width:min(300px,70vw);outline:none;border-radius:0; flex:0 1 auto;transition:border-color .3s var(--ease)} .fbar input::placeholder{color:var(--muted2);text-transform:lowercase} .fbar input:hover,.fbar input:focus{border-bottom-color:var(--ink)} .fchips{display:flex;gap:4px 16px;flex-wrap:wrap;align-items:baseline} .fchip{background:none;border:none;padding:4px 0;font-size:14.5px;color:var(--muted2); text-transform:lowercase;transition:color .25s var(--ease)} .fchip:hover{color:var(--ink)} .fchip.on{color:#fff;border-bottom:1px solid var(--accent)} .fchip.aud{cursor:pointer} .count{color:var(--muted2);font-size:13px;margin-left:auto;text-transform:lowercase; font-variant-numeric:tabular-nums} /* ---- 7b. CONTROLS — a filter you can hit, for the places where a typographic .fchip is too quiet to find. A .tog is a hairline pill that holds a state; three of them plus a .drop is a whole control bar.
…
---------------------------------------------------------------- */ .tog{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:none; color:var(--muted);border-radius:var(--pill-radius);padding:6px 13px;font-size:13px;line-height:1.4; white-space:nowrap;text-transform:lowercase;cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)} .tog:hover{color:#fff;border-color:var(--line-strong)} .tog.on{color:#fff;border-color:var(--accent);background:var(--accent-soft)} .tog i{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;color:var(--accent-bright); border:1px solid rgba(128,64,255,.45);border-radius:999px;min-width:16px;height:16px; display:inline-flex;align-items:center;justify-content:center;padding:0 4px} .tog .caret{width:9px;height:6px;opacity:.6;transition:transform .2s var(--ease)} .drop{position:relative;display:inline-flex} .drop.open .tog{color:#fff;border-color:var(--line-strong)} .drop.open .caret{transform:rotate(180deg)} /* the panel is the one true overlay grammar: black sheet, hairline, the only radius in the system that is not a pill */ .pop{position:absolute;top:calc(100% + 8px);left:0;z-index:120;min-width:212px;max-height:min(60vh,420px); overflow-y:auto;background:var(--sheet-bg);border:1px solid var(--line-strong);border-radius:14px; padding:7px;box-shadow:0 24px 70px rgba(0,0,0,.8);animation:popin .18s var(--ease) both} @keyframes popin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 4px;min-width:300px} .popopt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; background:none;border:none;border-radius:9px;padding:8px 10px;font-size:13.5px;color:var(--muted); text-transform:lowercase;text-align:left;cursor:pointer;transition:background .15s,color .15s} .popopt:hover{background:rgba(255,255,255,.05);color:#fff} .popopt.on{color:#fff} .popopt .tick{color:var(--accent-bright);opacity:0;font-size:12px} .popopt.on .tick{opacity:1} .pop-foot{display:flex;align-items:baseline;gap:9px;padding:6px 10px 2px;margin-top:5px; border-top:1px solid var(--divider);font-size:12px;color:var(--muted2)} .pop-foot input.uline{width:88px;font-size:13.5px;padding:6px 0} @media(max-width:620px){ .pop{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-height:56vh} .pop-grid{min-width:0} } /* -------------------------------------------------------------------- 8. TOGGLES — THERE IS ONE CONTROL, AND IT IS A DOT. There used to be three: a violet tick box, an iOS-style pill switch (any checkbox inside a .togglerow, plus .switch anywhere), and a radio circle. Three shapes for one question — is this on — and the two filled ones were the only chrome in the house that looked like it came from somebody else's design system: a rounded purple square and a sliding glowing capsule, on a page whose whole grammar is hairlines. So every one of them is the same thing now: a hairline ring that takes a violet dot when it is on. Radio, checkbox and .switch are the same pixels — the input TYPE still means what it always meant to the browser, it just stopped being a different drawing. Nothing needs a class; existing .switch markup keeps working and simply renders as the dot. — the dot — the same dot (legacy class)
-------------------------------------------------------------------- */ input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px; margin:0;padding:0;flex-shrink:0;background:none;border:1px solid var(--line-strong); border-radius:50%;cursor:pointer;position:relative;vertical-align:middle; transition:border-color .18s var(--ease)} input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--ink)} input[type=checkbox]:checked,input[type=radio]:checked{border-color:var(--accent)} input[type=checkbox]:checked::before,input[type=radio]:checked::before{content:"";position:absolute; inset:4px;border-radius:50%;background:var(--accent)} input[type=checkbox]:disabled,input[type=radio]:disabled{border-color:var(--line);cursor:default} input[type=checkbox]:disabled:checked::before,input[type=radio]:disabled:checked::before{ background:var(--ink-ghost)} /* a switch row: the dot, then the sentence it answers. What the row is about is bold; the consequence of it is regular — the brightness of the two used to be the difference and there is no grey ink left to spend on that (§1b). */ .togglerow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--divider); font-size:14px;color:var(--ink2);line-height:1.5;font-weight:400} .togglerow:last-child{border-bottom:none} .togglerow label{cursor:pointer} .togglerow b{color:#fff;font-weight:700} /* a choice with a title and an explanation — a row, not a card. This is the layout every multi-option question in the house uses; it works for one-of-many (radio) and any-of-many (checkbox) alike, because the dot is the same either way and the input type carries the difference. */ .optcard{display:flex;gap:14px;align-items:flex-start;border:none;border-bottom:1px solid var(--divider); padding:18px 2px;background:none;cursor:pointer;transition:padding-left .3s var(--ease)} .optcard:hover{padding-left:10px} .optcard input{margin-top:2px} .optcard b{color:var(--ink);font-weight:400;font-size:15.5px; transition:color .25s var(--ease),font-weight .25s var(--ease)} /* the picked one is the bold one — the only signal, now that both read in the same ink */ .optcard.on b{color:#fff;font-weight:700} .optcard:hover b{color:#fff} .optcard .desc{margin:6px 0 0;font-size:14px;font-weight:400} .optcard.on{border-bottom-color:var(--accent)} /* -------------------------------------------------------------------- 9. BLOCKS — a section of content under a hairline. Never a panel.

Title

meta

body

…
— two-up / three-up layout -------------------------------------------------------------------- */ .grid{display:grid;gap:clamp(20px,3vw,36px)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.g2,.g3{grid-template-columns:1fr}} .card{background:none;border:none;border-radius:0;border-top:1px solid var(--divider); padding:var(--block-pad) 2px 8px;transition:background .25s var(--ease)} .card h3{margin:0 0 4px;font-size:clamp(18px,2vw,22px);font-weight:500;letter-spacing:-.01em; color:var(--ink);text-transform:lowercase} .card[onclick]{cursor:pointer} .card[onclick]:hover h3{color:#fff} /* the standard content column and the wide section band. The top bar is fixed, so the column clears it here — not per page. */ .wrap{max-width:var(--w);margin:0 auto;padding:106px var(--pad-x) 90px} .sect{max-width:var(--w);margin:0 auto;padding:var(--sect) var(--pad-x) 0} .sect:last-child{padding-bottom:var(--sect)} /* -------------------------------------------------------------------- THE BEAT — one thought on an editorial page.
…
A beat is exactly as tall as what is in it. The only thing it adds is air above: one constant, --sect-lg, between every two beats and no other vertical spacing anywhere. That constant is the whole rhythm — a three-line section and a fifty-logo wall are separated by the same distance, so the page reads as one continuous column and the scroll never stalls on emptiness. This used to be a full-screen slide with scroll-snap. It padded short sections out to 100svh, which put half a screen of nothing on either side of a three-stat band, and snap-stop made every wheel gesture halt at the next section. Both are gone: the page scrolls. Air belongs above a beat, never below, or two neighbours stack their margins and the gap doubles. The last one is cleared by .wrap. THE AIR IS DRAWN, NOT JUST LEFT. A hairline runs down the middle of it, fading in and out, so two beats read as one continuous column instead of two things that happen to be far apart. The line lives inside the beat's own top padding, which is why the gap is a variable: change --beat-gap on one beat (the first one under the hero does) and the line rescales with it instead of poking out of the section above. -------------------------------------------------------------------- */ .beat{position:relative;--beat-gap:var(--sect-lg);padding-top:var(--beat-gap)} .sect.beat{padding-bottom:0} .beat::before{content:"";position:absolute;left:50%;pointer-events:none; top:calc(var(--beat-gap) * .2);height:calc(var(--beat-gap) * .6);width:1px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0,rgba(255,255,255,.26) 48%,rgba(255,255,255,0) 100%)} /* a page's first beat has no air above it to draw a line in */ .rdy-page>.beat:first-child::before{display:none} /* a beat reveals its own children in sequence — the beat itself never moves, so the scroll position under it cannot drift while it animates */ .reveal.beat{opacity:1;transform:none} .reveal.beat>*{opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease) var(--sd,0ms),transform .7s var(--ease) var(--sd,0ms)} .reveal.beat.in>*{opacity:1;transform:none} .reveal.beat>*:nth-child(2){--sd:100ms} .reveal.beat>*:nth-child(3){--sd:180ms} .reveal.beat>*:nth-child(4){--sd:250ms} .reveal.beat>*:nth-child(n+5){--sd:310ms} @media (prefers-reduced-motion:reduce){ .reveal.beat>*{opacity:1;transform:none} } /* ambient violet light — first child of a full-screen section */ .glow{position:absolute;inset:0;pointer-events:none; background: radial-gradient(44% 55% at 78% 88%, rgba(128,64,255,.28) 0%, transparent 65%), radial-gradient(30% 36% at 12% 8%, rgba(128,64,255,.10) 0%, transparent 60%)} /* a vertical hairline that introduces a centered section. Kept for a one-off; between two beats the line is .beat::before, which needs no markup and cannot be forgotten. */ .vrule{width:1px;height:clamp(56px,9vh,96px); background:linear-gradient(to bottom,transparent,var(--line-strong)); margin:0 auto clamp(30px,5vh,56px)} /* -------------------------------------------------------------------- 10. LISTS — the house workhorse. A directory is rows on hairlines.
name
what it is
status {ARW}
.rowcard is the same row with controls on the right (settings lists). .evrow is the date-led variant (events). -------------------------------------------------------------------- */ .rows,.rowcard-list{border-top:1px solid var(--divider)} .row,.rowcard{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; gap:clamp(14px,3vw,40px);align-items:center;padding:var(--row-pad) 0; border-bottom:1px solid var(--divider);text-decoration:none; transition:padding .3s var(--ease),background .25s var(--ease)} .row.click,.row[onclick]{cursor:pointer} .row .rname,.rowcard .rc-title{font-size:var(--t-h3);font-weight:500;color:var(--muted); text-transform:lowercase;letter-spacing:-.01em;line-height:1.2; transition:color .3s var(--ease),transform .3s var(--ease);transform-origin:left center} .row .rmeta,.rowcard .rc-sub{font-size:14.5px;color:var(--muted2);text-transform:lowercase;line-height:1.5} .row .chips{margin-top:8px} .row:hover .rname{color:#fff;transform:scale(1.04)} .row:hover .rmeta{color:var(--muted)} /* the arrow that ends a row */ .rarrow{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex; align-items:center;justify-content:center;color:var(--muted2);flex-shrink:0; transition:transform .35s var(--ease),color .3s var(--ease),border-color .3s var(--ease)} .rarrow svg{width:12px;height:12px} .row:hover .rarrow{transform:rotate(45deg);color:#fff;border-color:var(--ink)} /* right-hand end cap: status + arrow */ .rend{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);align-self:center} .rend .chip{white-space:nowrap} @media(max-width:700px){ .row,.rowcard{grid-template-columns:1fr auto} .row .rmeta,.rowcard .rc-sub{grid-column:1/-1;margin-top:-8px} } /* a short list inside a stretch of a page — a team, a handful of seats — rather than the editorial run of rows a whole page is made of */ .rows.tight .row{padding:14px 2px;gap:clamp(12px,2vw,24px)} .rows.tight .rname{font-size:16.5px} .rows.tight .row:hover .rname{transform:none} .rows.tight .row:not(.click):hover .rname{color:var(--muted)} /* a settings row: label left, live controls right — no arrow, no scale */ .rowcard{grid-template-columns:minmax(0,1fr) auto} .rowcard .rc-title{font-size:16px;color:var(--ink)} .rowcard .rc-main{min-width:0} .rowcard .rc-sub{margin-top:3px} .rowcard .rc-ctl{display:flex;align-items:center;gap:12px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end} .rowcard:hover .rc-title{color:#fff} /* the detail a row expands into */ .rx{overflow:hidden;max-height:0;opacity:0; transition:max-height .5s var(--ease),opacity .4s var(--ease)} .rx.open{max-height:600px;opacity:1} .rx-in{padding:6px 0 clamp(20px,3vw,30px);display:grid;grid-template-columns:1.6fr 1fr; gap:clamp(20px,4vw,64px)} .rx p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.75;max-width:65ch} @media(max-width:760px){.rx-in{grid-template-columns:1fr}} /* events: the date leads */ .evrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3.5vw,52px); align-items:baseline;padding:var(--row-pad) 0;border-bottom:1px solid var(--divider)} .evrow .edate{font-size:var(--t-h3);font-weight:500;color:var(--muted2);text-transform:lowercase; min-width:112px;font-variant-numeric:tabular-nums;transition:color .3s var(--ease)} .evrow .etitle{font-size:clamp(17px,1.9vw,22px);font-weight:500;color:var(--muted);text-transform:lowercase; transition:color .3s var(--ease),transform .3s var(--ease);transform-origin:left center} .evrow .esub{font-size:14px;color:var(--muted2);margin-top:3px;text-transform:lowercase} .evrow .eloc{font-size:14px;color:var(--muted2);text-align:right;text-transform:lowercase} .evrow:hover .etitle{color:#fff;transform:scale(1.03)} .evrow:hover .edate{color:var(--accent)} @media(max-width:700px){.evrow{grid-template-columns:1fr}.evrow .edate{min-width:0}.evrow .eloc{text-align:left}} /* a plain ranked list — leaderboards, tallies */ .lb{display:flex;flex-direction:column} .lb-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--divider)} .lb-row:last-child{border-bottom:none} .lb-rank{width:22px;text-align:center;color:var(--muted2);font-variant-numeric:tabular-nums} .lb-nm{flex:1;color:var(--ink);font-weight:500} /* -------------------------------------------------------------------- 11. THE WALL — a directory as type. Names are the interface.

…

…

label
value
.wall.people = aligned columns, meta drops underneath. -------------------------------------------------------------------- */ .wall{display:flex;flex-wrap:wrap;column-gap:clamp(22px,3vw,44px);row-gap:clamp(6px,1.2vw,14px); align-items:baseline} .wname{position:relative;display:inline-flex;align-items:baseline;gap:12px;background:none;border:none; padding:2px 0;font-family:inherit;font-size:clamp(24px,3vw,40px);font-weight:500;letter-spacing:-.01em; color:var(--muted2);text-transform:lowercase;line-height:1.25;text-align:left;cursor:pointer; transition:color .3s var(--ease),transform .3s var(--ease),text-shadow .3s var(--ease); transform-origin:left bottom} .wname .wmeta{font-size:13px;font-weight:400;color:var(--muted);opacity:0;transform:translateX(-6px); transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap;text-transform:lowercase} .wname:hover,.wname.open{color:#fff;transform:scale(1.06);text-shadow:0 0 34px rgba(128,64,255,.55)} .wname:hover .wmeta,.wname.open .wmeta{opacity:1;transform:none} .wname.inactive{color:var(--ink-ghost)} .wname.inactive:hover{color:#fff} /* people read better in aligned columns than as a word cloud, so the scale-on-hover is dropped here (it would break the alignment). */ .wall.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr)); column-gap:clamp(20px,3vw,44px);row-gap:clamp(22px,2.4vw,32px);align-items:start} .wall.people .wname{display:block;width:100%;font-size:clamp(19px,2.1vw,27px)} .wall.people .wmeta{position:absolute;left:0;top:100%;transform:translateY(-4px);max-width:100%; white-space:normal} .wall.people .wname:hover .wmeta,.wall.people .wname.open .wmeta{transform:translateY(0)} .wall.people .wname:hover,.wall.people .wname.open{transform:none} .wall.people .wx{grid-column:1/-1;width:100%} /* the detail a name expands into */ .wx{flex-basis:100%;overflow:hidden;max-height:0;opacity:0;margin:0; transition:max-height .55s var(--ease),opacity .45s var(--ease),margin .45s var(--ease)} .wx.open{max-height:720px;opacity:1;margin:18px 0 30px} .wx-in{border-top:1px solid var(--divider);border-bottom:1px solid var(--divider); padding:clamp(22px,3vw,36px) 0;display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,64px)} .wx h3{margin:0 0 10px;font-size:var(--t-h3);font-weight:500;text-transform:lowercase;color:var(--ink)} .wx p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.75;max-width:65ch} @media(max-width:760px){.wx-in{grid-template-columns:1fr}} /* label/value pairs — used inside .wx, details, anywhere */ .facts{display:flex;flex-direction:column;gap:14px;font-size:15px} .fact .fl{color:var(--muted2);font-size:12.5px;text-transform:lowercase;margin-bottom:2px} .fact .fv{color:var(--ink)} .fact a{color:var(--accent-bright)} .fact a:hover{color:#fff} /* -------------------------------------------------------------------- 12. NOTES — a note is a rule and some text, not a tinted box
headline. body
(.amber for attention)
nothing here yet.
Disclaimer. fine print
-------------------------------------------------------------------- */ .callout{border-left:1px solid var(--accent);padding:2px 0 2px 18px;color:var(--muted); font-size:14.5px;line-height:1.7} .callout b{color:#fff;font-weight:500} .callout.amber{border-left-color:var(--warn)} .callout.amber b{color:var(--warn)} .callout.good{border-left-color:var(--good)} .callout.good b{color:#8dff7a} .callout .btn-row{margin-top:14px} .disclaimer{border-top:1px solid var(--divider);padding:14px 0 0;color:var(--muted2); font-size:12.5px;line-height:1.65} .disclaimer b{color:var(--muted);font-weight:500;text-transform:lowercase} .empty{padding:clamp(30px,5vw,48px) 0;text-align:center;color:var(--muted2);font-size:14.5px; text-transform:lowercase} /* what is done and what is still missing — the honest version of a progress bar, because every line is a thing you can go and fix */ .checks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px; font-size:14px;color:var(--muted2);text-transform:lowercase} .checks li{display:flex;gap:10px;align-items:baseline} .checks li::before{content:"○";font-size:11px;color:var(--ink-ghost)} .checks li.done{color:var(--muted)} .checks li.done::before{content:"✓";color:var(--good)} /* -------------------------------------------------------------------- 13. SHEET — the only overlay. A black sheet with its own ambient light.

title

…
-------------------------------------------------------------------- */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none; align-items:flex-start;justify-content:center;z-index:500; padding:clamp(16px,4vh,48px) 20px;overflow-y:auto} .modal-overlay.show{display:flex;animation:fadeIn .35s var(--ease)} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{background:var(--sheet-bg);border:1px solid var(--line);border-radius:var(--sheet-radius); max-width:640px;width:100%;margin:auto 0;position:relative;overflow:hidden; animation:sheetIn .45s var(--ease)} /* the ambient light that says "rdy" instead of a drop shadow */ .modal::before{content:"";position:absolute;top:-120px;right:-80px;width:340px;height:220px; border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(128,64,255,.35) 0,transparent 70%); filter:blur(50px);pointer-events:none} @keyframes sheetIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:var(--sheet-pad) var(--sheet-pad) 0;position:relative} .modal-head h3{margin:0;font-size:var(--t-h3);font-weight:500;color:var(--ink);text-transform:lowercase; letter-spacing:-.01em} .modal-x{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px; font-size:17px;line-height:1;color:var(--muted);flex-shrink:0; transition:transform .3s var(--ease),color .3s,border-color .3s} .modal-x:hover{color:#fff;border-color:var(--ink);transform:rotate(90deg)} .modal-body{padding:clamp(18px,2.4vw,24px) var(--sheet-pad) var(--sheet-pad);position:relative} /* -------------------------------------------------------------------- 14. TOAST — a black pill on a hairline, bottom center
saved ✓
-------------------------------------------------------------------- */ .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(8px); background:#000;color:var(--ink);padding:13px 24px;border-radius:var(--pill-radius);font-size:14px; border:1px solid var(--line);box-shadow:0 18px 60px rgba(0,0,0,.7);opacity:0; transition:.35s var(--ease);z-index:600;text-transform:lowercase;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%)} /* -------------------------------------------------------------------- 15. TOP BAR — fixed, transparent over a hero, solid once scrolled. There is no nav strip: the bar carries the brand, the door into the product, and who you are. Section navigation happens in the page.
name
…
-------------------------------------------------------------------- */ /* the bar's height is a variable because a fixed page (the dealroom) has to start exactly under it — see --bar-h in app.css */ :root{--bar-h:72px} header.topbar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center; gap:clamp(14px,2.5vw,30px);padding:0 26px;height:var(--bar-h);color:var(--ink);background:#000; border-bottom:1px solid var(--line); transition:background .45s var(--ease),height .45s var(--ease),border-color .45s var(--ease)} header.topbar.scrolled{background:rgba(0,0,0,.92);height:60px} .brand{display:inline-flex;flex-direction:row;align-items:center;gap:12px;line-height:1;flex-shrink:0} .brand .app-logo{display:block;height:26px;width:auto} .brand .sub{font-weight:500;font-size:13px;color:var(--muted);text-transform:lowercase; transform:translateY(1px)} .actions{display:flex;gap:12px;align-items:center;margin-left:auto;flex-shrink:0} /* the middle slot: navigation that belongs to a product, dead centre of the bar whatever the two sides weigh. Absolute, so it is centred on the page and not on the space left over. Inside the dealroom this slot is never empty — the founders/investors switch is the way in, the way across, and the only way back out of a settings page, so it is on every page of the product at every width. On a phone the bar has no middle to spare, so it becomes a second row (see body.product in app.css) rather than disappearing. */ .navcenter{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center} .navcenter:empty{display:none} /* a two-state switch: one control, two words, the live one filled in */ .segmented{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px} .segmented button{border:none;background:none;color:var(--muted);border-radius:999px; padding:6px 18px;font-size:13.5px;font-weight:500;text-transform:lowercase;white-space:nowrap; cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease)} .segmented button:hover{color:#fff} .segmented button.on{background:var(--ink);color:#000} @media(max-width:820px){.segmented button{padding:5px 13px;font-size:12.5px}} /* who is signed in — a name, not a button */ .actions button.who,.actions button.who:hover{display:flex;flex-direction:column;align-items:flex-start; gap:2px;background:none;border:none;border-radius:0;padding:2px;text-align:left;line-height:1.2; text-transform:none;transform:none} .who-nm{font-size:14px;font-weight:500;color:var(--ink);transition:.25s} .who-sub{font-size:12px;color:var(--muted2);text-transform:lowercase} .who:hover .who-nm{color:#fff} @media(max-width:700px){.who-sub{display:none}} /* the one required-field mark */ .req{color:var(--accent-bright)} /* in-page panel nav: one strip of words on a hairline, the live one underlined. It is not a row of buttons — a settings page with four jobs needs to look like four jobs, not like four things to click.
…
*/ .panelnav{display:flex;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap;align-items:baseline; border-bottom:1px solid var(--divider);margin:clamp(18px,2.4vw,28px) 0 clamp(24px,3vw,34px)} .panelnav button{border:none;background:none;padding:0 0 12px;font-size:clamp(14.5px,1.5vw,16.5px); font-weight:500;color:var(--muted2);text-transform:lowercase;position:relative; transition:color .25s var(--ease)} .panelnav button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .panelnav button:hover{color:var(--ink)} .panelnav button.active{color:#fff} .panelnav button.active::after{transform:scaleX(1)} /* one panel on screen at a time */ .panel{display:none} .panel.on{display:block;animation:rise .45s var(--ease) both} /* the nav already drew the line the panel opens under */ .panel>.psec:first-child{margin-top:0;padding-top:0;border-top:none} /* in-page tab strip (pill outlines, because they sit inside content) */ .subtabs{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0 22px} .subtabs button{border:1px solid var(--line);background:none;color:var(--muted); border-radius:var(--pill-radius);padding:7px 15px;font-size:13px;text-transform:lowercase; transition:.2s var(--ease)} .subtabs button:hover{border-color:var(--line-strong);color:#fff} .subtabs button.active{border-color:var(--ink);color:#000;background:var(--ink)} /* -------------------------------------------------------------------- 16. FOOTER — one slim row, floating It used to be a black bar with a hairline on top, which cut the page in half across the bottom of the viewport and stopped the hero video dead. Now it floats like the top bar: no fill, no rule, the film runs behind it. Legibility comes from a short scrim under the row, not from a surface — the row itself has no edges. -------------------------------------------------------------------- */ .site-footer{border:none;background:none;display:flex; justify-content:space-between;align-items:center;gap:16px;padding:14px 26px; color:var(--ink);font-size:12.5px;text-transform:lowercase} .site-footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:200%;z-index:-1; pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))} .site-footer a{color:var(--ink)} .site-footer a:hover{color:#fff;font-weight:500} .foot-links{display:flex;gap:22px;flex-wrap:wrap} /* -------------------------------------------------------------------- 17. TABLE — hairlines only, tabular numbers
…
…
-------------------------------------------------------------------- */ .table-wrap{border-top:1px solid var(--divider);overflow-x:auto} table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums} th{text-align:left;font-weight:500;color:var(--muted2);font-size:12.5px;text-transform:lowercase; padding:14px 16px 14px 0;border-bottom:1px solid var(--divider);white-space:nowrap} td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line-soft);white-space:nowrap; color:var(--muted);font-size:14.5px} td.name{font-weight:500;color:var(--ink)} tbody tr:hover td{color:var(--ink)} /* -------------------------------------------------------------------- 18. FOLDOUT — the optional half of a long page, behind one row. A form should not open with everything it could ever ask; what is optional says how much of it you have done and stays shut until asked.
go deeper 3 of 9 answered
…
-------------------------------------------------------------------- */ .fold{border-top:1px solid var(--divider);margin-top:var(--block-pad)} .fold>summary{display:flex;align-items:center;gap:14px;padding:18px 2px;cursor:pointer; list-style:none;transition:padding-left .3s var(--ease)} .fold>summary::-webkit-details-marker{display:none} .fold>summary:hover{padding-left:10px} /* the title takes the slack, so the meta and the chevron end the row */ .f-t{font-size:16.5px;font-weight:500;color:var(--muted);margin-right:auto; transition:color .25s var(--ease)} .fold>summary:hover .f-t,.fold[open] .f-t{color:#fff} .f-m{font-size:12.5px;color:var(--muted2);text-transform:lowercase} /* the chevron: two hairlines, so there is no icon to keep in sync */ .fold>summary::after{content:"";width:7px;height:7px;flex-shrink:0;margin:0 4px 3px 0; border-right:1.4px solid var(--muted2);border-bottom:1.4px solid var(--muted2); transform:rotate(45deg);transition:transform .3s var(--ease)} .fold[open]>summary::after{transform:rotate(225deg);margin-bottom:-3px} .fold-body{padding:2px 2px var(--block-pad)} .fold.quiet .f-t{font-size:15px} .fold.quiet[open] .f-t{color:var(--danger)} /* -------------------------------------------------------------------- 19. DOCK — a page's live state and its one action, on a hairline that follows you down a long form so neither is ever "further down".
saved ✓
-------------------------------------------------------------------- */ .dock{position:sticky;bottom:0;z-index:60;display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin-top:var(--block-pad);padding:14px 0 18px;background:var(--bg); border-top:1px solid var(--divider)} .dock-sp{flex:1 0 8px} /* -------------------------------------------------------------------- 20. MOTION .rise = entrance on render (--d staggers it) .reveal + .in = entrance on scroll -------------------------------------------------------------------- */ @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .rise{animation:rise .6s var(--ease) both;animation-delay:var(--d,0ms)} /* something is happening and it has no progress to report */ @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}} .pulse{animation:pulse 1.4s ease-in-out infinite} .reveal{opacity:0;transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .wall .wname{transition-delay:calc(var(--i,0)*12ms)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important} .reveal{opacity:1;transform:none} } /* -------------------------------------------------------------------- 21. THE FORMSPACE — one question at a time, and the door in front of it The one place in the house with NO GREY IN IT. Everywhere else secondary text is dimmed (§1d); in a form a dimmed instruction reads as "you may ignore this", which is the single thing an application must never say. So every word here is #fff and weight alone carries the hierarchy: 700 is what matters, 400 is what helps, and size does the rest. No placeholders either — placeholder text is grey by definition, and it vanishes exactly when it would be useful. .fgate the door: what the account is for, and three fields .fhead the progress line and the count .fq one question: tag, label, help, field, tip .frev the read-back, before anything is sent The column itself, and making it fit one screen, is app.css. -------------------------------------------------------------------- */ .fspace .backlink,.fspace .empty,.fspace .callout{color:#fff} .fgate-h{font-size:clamp(34px,5.2vw,56px);font-weight:500;letter-spacing:-.02em;line-height:1.04; margin:0;color:#fff;text-transform:lowercase} .fgate-lead{margin:0;font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.65;color:#fff;font-weight:400} .fgate-lead b{font-weight:700} .fwhy{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--divider); display:flex;flex-direction:column;gap:13px} .fwhy li{font-size:14.5px;line-height:1.6;color:#fff;font-weight:400} .fwhy b{font-weight:700} .fgate-form{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--divider);padding-top:24px} .ffld{display:flex;flex-direction:column;gap:7px} .ffld.gone{display:none} .ffld label{font-size:13px;color:#fff;font-weight:700;text-transform:lowercase} .ffld input{width:100%;background:none;border:none;border-bottom:1px solid var(--line-strong); color:#fff;font:inherit;font-size:16.5px;padding:9px 2px;outline:none; transition:border-color .3s var(--ease)} .ffld input:hover{border-bottom-color:rgba(255,255,255,.34)} .ffld input:focus{border-bottom-color:var(--field-line-focus)} .fgate-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px} .fhead{display:flex;flex-direction:column;gap:10px} /* both of these are

, and .rdy-page p forces weight 400 (app.css) — so they take one more class to say bold and mean it */ .fspace .fkicker{margin:0;font-size:13px;color:#fff;font-weight:700;text-transform:lowercase} .fprog{position:relative;height:2px;background:rgba(255,255,255,.18);overflow:hidden} .fprog i{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;transition:width .5s var(--ease)} .fmeta{display:flex;justify-content:space-between;align-items:baseline;gap:14px; font-size:12.5px;color:#fff;font-weight:400;text-transform:lowercase} .fmeta b{font-weight:700} .fq{width:100%;display:flex;flex-direction:column;gap:13px} .fq-tag{margin:0;font-size:12.5px;color:#fff;font-weight:400;text-transform:lowercase} .fq-tag b{font-weight:700} .fq-label{margin:0;font-size:clamp(23px,3.2vw,34px);font-weight:700;line-height:1.18; letter-spacing:-.015em;color:#fff} .fq-help{margin:0;font-size:15px;line-height:1.6;color:#fff;font-weight:400} .fq-in{margin-top:10px} /* the radios of a .fchoice are inputs too, and are not underlined fields */ .fq-in input:not([type=radio]),.fq-in textarea,.fq-in select{width:100%;background:none;border:none; border-bottom:1px solid var(--line-strong);color:#fff;font:inherit; font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;padding:10px 2px;outline:none; transition:border-color .3s var(--ease)} .fq-in textarea{min-height:72px;resize:none;overflow:hidden} .fq-in input:not([type=radio]):hover,.fq-in textarea:hover,.fq-in select:hover{border-bottom-color:rgba(255,255,255,.34)} .fq-in input:not([type=radio]):focus,.fq-in textarea:focus,.fq-in select:focus{border-bottom-color:var(--field-line-focus)} .fq-in select{appearance:none;-webkit-appearance:none;cursor:pointer;color-scheme:dark; background-image:linear-gradient(45deg,transparent 50%,#fff 50%), linear-gradient(135deg,#fff 50%,transparent 50%); background-position:calc(100% - 15px) 58%,calc(100% - 9px) 58%; background-size:6px 6px;background-repeat:no-repeat} .fq-in select option{background:#0a0a0a;color:#fff} .fq-tip{margin:2px 0 0;font-size:12.5px;color:#fff;font-weight:400;text-transform:lowercase} .gone{display:none} /* a yes/no, or any short list: rows on hairlines, and the chosen one is the bold one — the same grammar as everything else in the house */ .fchoice{display:flex;flex-direction:column} .fopt{display:flex;align-items:center;gap:12px;padding:14px 2px;cursor:pointer;color:#fff; font-size:16.5px;font-weight:400;border-bottom:1px solid var(--divider); transition:border-color .3s var(--ease)} .fopt:first-child{border-top:1px solid var(--divider)} .fopt:hover{border-bottom-color:var(--line-strong)} .fopt.on{font-weight:700} .fopt input{margin:0;flex:0 0 auto} /* a file question: one control, and what is attached to it right now */ .ffile{display:flex;align-items:center;gap:14px;flex-wrap:wrap; border-bottom:1px solid var(--line-strong);padding:4px 2px 16px} .ffile-now{font-size:14px;line-height:1.5;color:#fff;font-weight:400} .ffile-now b{font-weight:700} .fnav{display:flex;gap:12px;align-items:center;flex-wrap:wrap; border-top:1px solid var(--divider);padding-top:20px} .fspace .pill.quiet{color:#fff;border-color:var(--line-strong)} .fspace .pill.quiet:hover{color:#000} .fmsg{font-size:13px;line-height:1.5;color:#fff;font-weight:400} .fmsg b{font-weight:700} .ffoot{margin:16px 0 0;font-size:12.5px;line-height:1.7;color:#fff;font-weight:400} .ffoot b{font-weight:700} .fspace .tlink{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px} .fwarn{margin:0;font-size:14px;line-height:1.6;color:#fff;font-weight:400; border-left:1px solid var(--warn);padding-left:14px} .frev{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column} .frev li{border-top:1px solid var(--divider);padding:15px 0; display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 16px;align-items:baseline} .fspace .frev-q{margin:0;font-size:14px;color:#fff;font-weight:700;line-height:1.45} .frev-a{margin:0;grid-column:1/-1;font-size:15px;line-height:1.6;color:#fff;font-weight:400; white-space:pre-wrap;overflow-wrap:anywhere} .frev-a.none{font-style:italic} .frev li .tlink{font-size:13px} /* sixty-nine answers need their sections back on the way out, too */ .frev-sec{display:block;border-top:1px solid var(--line-strong);padding:26px 0 2px} .frev-sec:first-child{border-top:none;padding-top:8px} .fspace .frev-sec p{margin:0;font-size:12.5px;font-weight:700;color:#fff; text-transform:lowercase;letter-spacing:.05em} /* one question replacing another: it comes up, and the page under it does not move */ @keyframes stepin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .stepin{animation:stepin .4s var(--ease) both}