/* Public-site styles — the homepage and the legal pages share this one file. Three pages with three copies of the same 100 lines is the drift this project has spent a lot of effort removing elsewhere; it is not worth reintroducing for a footer. Anything scoped to .legal below is the /privacy and /terms half of that bargain — read §"Legal pages" at the bottom before deleting a rule that looks unused on the homepage. No :root block here. tokens.css is the single source of truth for colour, type and radius (CLAUDE.md, design-system rule 1) — this file only composes what that one defines, and where the public site needs values tokens.css does not carry, they are declared on `body`, not on :root. Scoping to body keeps the cascade identical for every element on these three pages while leaving :root — and therefore every app surface — untouched. COLOUR PRINCIPLE: the page is a warm neutral greyscale, and colour is a punctuation mark, not a paint bucket. One blue does all of it — buttons, links, the logomark, a single chart bar, one avatar. Two consequences worth knowing before editing: 1. The neutrals are WARM (a brown/olive undertone). tokens.css used to be cool (a blue undertone: #f1f2f9, #5c5c66) and has since been moved onto this ramp, so the site and the app share one set of neutrals again — see the note at the bottom of the file for what is and is not shared. 2. The accent is a BLUE. tokens.css used to be indigo-violet (#4b3bf5) and is now this same #0f6fce. --accent drives the logomark too; a violet mark beside a blue button was two brands arguing. 3. There is no black slab anywhere — code sets light and every band stays in one light key from top to bottom. Contrast was checked, not eyeballed: --ink2 >= 6.8:1 and --ink3 >= 4.85:1 against every ground they sit on. */ body{ /* ---- Ground: warm neutrals ------------------------------- Only the roles tokens.css does not carry are declared here. --raised, --border and --border2 came from this file first and are now tokens.css's own values, so they are inherited rather than restated — restating them is exactly the drift the single-source rule exists to stop. NOTE --bg: the site puts its page ground ABOVE its --raised, which the app's lightness order forbids, so the app's --bg is this file's --band. Overriding --bg on body is therefore deliberate. */ --paper:#ffffff; /* cards, the hero, primary surface */ --bg:#f8f7f4; /* alternating band, footer */ --band:#f4f3f0; /* tab hover/active, step numerals */ /* ---- Ink -------------------------------------------------- */ --ink:#1b1a17; /* headings — 17.4:1 on paper */ --ink2:#57544e; /* body — 7.5:1 */ --ink3:#6e6a62; /* meta, captions — 4.9:1 on the band */ /* ---- Accent: a working blue, used sparingly ---------------- Warm neutrals + azure is the pairing that reads as calm and professional; indigo-violet on the same ground reads synthetic. Notion's own UI blue is ~#2383e2, which only makes 3.9:1 with white — under AA for button text — so this is that hue taken a few steps down until white clears 5:1. That argument was made here and won: --accent (#0f6fce), --accent-text (#0d5fb8) and --green (#17654e) are now tokens.css's values and are inherited, not restated. Only --accent-soft stays, because the app names that role --accent-bg and the two files disagree about the NAME, not the colour. */ --accent-soft:#e8f1fc;/* the one tinted fill on the page */ /* ---- Buttons -------------------------------------------- */ --btn:var(--accent); --btn-hover:#0b5cb0; /* white on both: 5.0:1 / 6.6:1 */ /* ---- A soft blue tint, never a black slab — a pale tint of the accent, so a band can carry colour without leaving the page's light key. ------------------------------- */ --wash:#eff5fc; --wash-border:#dbe8f6; /* ---- Radius: smaller than before. 16px cards read soft; 10px reads considered. ------------------------------- */ --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(27,26,23,.05); --shadow-pop:0 4px 14px rgba(27,26,23,.08),0 1px 3px rgba(27,26,23,.06); --shadow-float:0 12px 32px rgba(27,26,23,.10),0 2px 6px rgba(27,26,23,.05); /* --font inserts Inter; tokens.css does not. --mono is identical to tokens.css and is inherited. */ --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; /* ---- Layout: a wide shell, a narrow measure --------------- */ --w-page:1200px; --w-prose:34rem; --gutter:32px; --rail:clamp(240px,26vw,330px); /* ---- Marketing type scale (tokens.css stops at 18px, which is a workspace-UI ceiling, not a landing-page one). This is additive: --fs-* still means what tokens.css says. -- */ --ms-display:clamp(34px,4.4vw,56px); --ms-h2:clamp(23px,2.6vw,33px); --ms-h3:16px; --ms-lede:clamp(17px,1.5vw,19px); --ms-body:15px; --ms-small:13px; --ms-micro:11px; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* body's ground is --bg, the FOOTER's colour, not --paper — and every band below paints its own ground on top. body is only as tall as its content, so on a panel shorter than the viewport (About, on a desktop) the leftover canvas under the footer is body's background: paper there put a white strip below the tinted footer with a hard seam across the screen. The palette is declared on body, so html cannot reference it (var(--bg) there resolves to tokens.css's app ground #f4f3f0, a shade darker than this page's #f8f7f4) — the canvas has to be body's own colour. */ body{margin:0;background:var(--bg);color:var(--ink); font:var(--ms-body)/1.62 var(--font);-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} a{color:var(--accent-text)} img,svg{display:block} .wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)} .prose{max-width:var(--w-prose)} /* ---------- Masthead --------------------------------------------- One 60px bar. The old page stacked a 49px header on a 43px tab strip — 92px of chrome before a single word of the page. All three public pages use this same markup; only the homepage has .tabrow. */ header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85); backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border)} .top{display:flex;align-items:center;gap:14px;height:60px} .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex-shrink:0} .logomark{display:inline-flex;color:var(--accent)} .logomark svg{height:21px;width:auto} .name{font-size:17px;font-weight:650;letter-spacing:-.015em;color:var(--ink)} .tabrow{display:flex;gap:2px;margin-left:20px} .tabrow button{appearance:none;background:none;border:0;cursor:pointer;border-radius:var(--r-sm); font:500 var(--ms-small)/1 var(--font);color:var(--ink3);padding:8px 11px;white-space:nowrap; transition:background .14s,color .14s} .tabrow button:hover{color:var(--ink);background:var(--band)} /* The script toggles aria-selected, never a class — style the state, not a duplicate of it. */ .tabrow button[aria-selected="true"]{color:var(--ink);font-weight:600;background:var(--band)} .signin{margin-left:auto;font-size:var(--ms-small);font-weight:600;text-decoration:none; padding:8px 15px;border-radius:var(--r-sm);background:var(--btn);color:#fff;white-space:nowrap; transition:background .14s} .signin:hover{background:var(--btn-hover)} /* Below ~820px the brand + four tabs + CTA no longer fit on one row — the original page let "About" fall off the right edge instead. The padding shorthand here must restate the gutter, or it wipes .wrap's. */ @media (max-width:820px){ .top{height:auto;padding:11px var(--gutter) 9px;flex-wrap:wrap;row-gap:4px} .signin{margin-left:auto} .tabrow{order:3;width:100%;margin-left:-11px;overflow-x:auto;scrollbar-width:none} .tabrow::-webkit-scrollbar{display:none} } /* ---------- Bands ------------------------------------------------ Flat fills, full bleed. No gradients: the old hero carried two radial washes, and a gradient is the fastest way to make a page look like a template. */ /* Each band states its own ground rather than inheriting the canvas: body is --bg so the page's leftover space matches the footer, which makes "paper" a thing a band declares, not a thing it gets by being transparent. */ .band{padding:80px 0;background:var(--paper)} .band--tint{background:var(--bg);border-top:1px solid var(--border); border-bottom:1px solid var(--border)} .band--tight{padding:60px 0} /* --wash goes with .closer at the bottom of this file: the mockup's closing band. Both are unused until that copy is on the page. */ .band--wash{background:var(--wash);border-top:1px solid var(--wash-border); border-bottom:1px solid var(--wash-border)} /* ---------- The two-tier grid ------------------------------------ Left rail carries the heading and its paragraph at prose width; the right column takes everything that benefits from being wide. The shell is 1200px, but running text never exceeds --w-prose — widening the page should not cost line length. */ .grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(32px,5vw,72px); align-items:start} .rail{position:sticky;top:92px} .rail h2{font-size:clamp(22px,2.3vw,29px)} @media (max-width:980px){ .grid{grid-template-columns:minmax(0,1fr);gap:26px} .rail{position:static} } h1{font-size:var(--ms-display);line-height:1.05;letter-spacing:-.03em;margin:12px 0 20px; font-weight:700;color:var(--ink)} h2{font-size:var(--ms-h2);line-height:1.16;letter-spacing:-.021em;margin:0 0 14px;font-weight:660; color:var(--ink)} h3{font-size:var(--ms-h3);line-height:1.35;letter-spacing:-.008em;margin:0 0 6px;font-weight:620; color:var(--ink)} p{margin:0 0 16px;color:var(--ink2)} p:last-child{margin-bottom:0} /* A lede is running text, so it takes the measure like any other paragraph — widening the shell to 1200px must not widen a line. Without this cap the two ledes in the AI panel ran to 734px (79 characters) directly above a 544px .prose paragraph in the same column. The hero and the legal pages set their own measure below. */ .lede{font-size:var(--ms-lede);line-height:1.55;color:var(--ink2);max-width:var(--w-prose)} /* The eyebrow was an indigo pill. Small caps in grey says the same thing without spending colour on it. */ .eyebrow{font:600 var(--ms-micro)/1 var(--font);letter-spacing:.11em;text-transform:uppercase; color:var(--ink3);margin:0 0 14px} code{font:var(--ms-small)/1.5 var(--mono);background:var(--raised);border:1px solid var(--border); border-radius:var(--r-xs);padding:1px 5px;color:var(--ink)} .cta{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--btn); color:#fff;font-weight:600;padding:11px 19px;border-radius:var(--r-sm);font-size:var(--ms-body); transition:background .14s} .cta:hover{background:var(--btn-hover)} /* The secondary "See a live one" button the mockup puts beside the hero CTA. Unused: the only thing it can do is switch to the See it panel, and the tab script has no handler for a[href="#see"] — the button would set the hash and change nothing on screen. Adding the handler means editing the frozen script, which is a behaviour change, not a redesign. Style kept for that day. */ .cta--ghost{background:var(--paper);color:var(--ink);border:1px solid var(--border2); box-shadow:var(--shadow-sm)} .cta--ghost:hover{background:var(--band)} .ctarow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px} .caption{font-size:var(--ms-small);color:var(--ink3)} /* ---------- Hero -------------------------------------------------- */ .hero{padding:clamp(52px,6.5vw,88px) 0 clamp(56px,6.5vw,88px);background:var(--paper)} .hero .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(36px,5vw,72px); align-items:center} @media (max-width:980px){.hero .grid{grid-template-columns:minmax(0,1fr)}} .hero h1{max-width:15ch} .hero .lede{max-width:45ch} /* The mockup's three-tick reassurance row under the hero CTA. Unused: it is copy the live page does not carry, and this pass is a redesign, not new marketing claims. Ready if that row is approved. */ .trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:32px; font-size:var(--ms-small);color:var(--ink3)} .trust span{display:inline-flex;align-items:center;gap:7px} .tick{width:13px;height:13px;flex:0 0 13px;color:var(--green)} /* Hero visual: a browser window, because the product IS the URL — the address bar is the argument. The pin and the chip live in .heroviz, OUTSIDE .window's overflow:hidden, or they get clipped. */ .heroviz{position:relative} .window{border:1px solid var(--border2);border-radius:var(--r-lg);background:var(--paper); box-shadow:var(--shadow-float);overflow:hidden} .window__bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--raised); border-bottom:1px solid var(--border)} .dots{display:flex;gap:6px} .dots i{width:9px;height:9px;border-radius:50%;background:#dedbd4;display:block} .urlbar{flex:1;display:flex;align-items:center;gap:7px;background:var(--paper); border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 11px; font:var(--ms-micro)/1.4 var(--mono);color:var(--ink3);min-width:0;overflow:hidden} .urlbar b{color:var(--ink);font-weight:600} .lock{width:11px;height:11px;flex:0 0 11px;color:var(--ink3)} .window__body{padding:22px 24px 24px;background:var(--paper)} .deckhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px; border-bottom:1px solid var(--border);padding-bottom:13px;margin-bottom:18px} .deckhead strong{font-size:16px;font-weight:640;letter-spacing:-.015em} .deckhead em{font-style:normal;font-size:var(--ms-micro);color:var(--ink3); text-transform:uppercase;letter-spacing:.09em;white-space:nowrap} /* Bars are neutral; exactly one is the accent. That is the whole colour budget for this graphic. */ .chart{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);height:130px;margin-bottom:12px} .chart div{flex:1;border-radius:var(--r-xs) var(--r-xs) 0 0;background:#e7e5e0;position:relative} .chart div::after{content:attr(data-v);position:absolute;top:-17px;left:0;right:0;text-align:center; font:600 10px/1 var(--font);color:var(--ink3)} .chart div.hi{background:var(--accent)} .chart div.hi::after{color:var(--accent-text)} .axis{display:flex;gap:clamp(6px,1.4vw,14px);border-top:1px solid var(--border);padding-top:8px} .axis span{flex:1;text-align:center;font:500 10px/1 var(--font);color:var(--ink3)} .pin{position:absolute;right:-28px;bottom:-52px;display:flex;gap:9px;align-items:flex-start; background:var(--paper);border:1px solid var(--border2);border-radius:var(--r-md); box-shadow:var(--shadow-pop);padding:10px 13px;max-width:225px} .pin i{width:21px;height:21px;border-radius:50%;background:var(--accent);color:#fff;flex:0 0 21px; display:grid;place-items:center;font:600 10px/1 var(--font);font-style:normal} .pin p{margin:0;font-size:var(--ms-small);line-height:1.42;color:var(--ink2)} .pin p b{color:var(--ink);font-weight:620;display:block} .livedot{display:inline-flex;align-items:center;gap:6px;position:absolute;left:20px;bottom:-14px; background:var(--paper);color:var(--ink2);border:1px solid var(--border2); box-shadow:var(--shadow-sm);border-radius:var(--r-pill);padding:5px 11px; font:600 10px/1 var(--font);letter-spacing:.05em;text-transform:uppercase} /* --green, not --live: tokens.css owns --live (#7ee2bd, a present-mode stage colour). Shadowing it here to the tick green was two names for one value and a shadow of a token this file does not own. */ .livedot i{width:5px;height:5px;border-radius:50%;background:var(--green);display:block} @media (max-width:600px){.pin{display:none}} /* ---------- Compare panels ---------------------------------------- The negative column recedes (grey marks, quiet ground); the positive column is paper with green ticks. No red — a red X per line was four alarms for a problem the copy states calmly. */ /* minmax(min(300px,100%),…), not minmax(300px,…): a bare 300px floor is not a minimum, it is a demand — at 320px the container is 280px and the column still resolved to 300px, so the panels sat flush against the right edge with their border and corner outside it while keeping the gutter on the left. */ .swap{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .swap>div{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg); padding:22px 24px} .swap .was{background:var(--raised);border-color:var(--border)} .swap h3{margin-bottom:14px;color:var(--ink)} .swap .was h3{color:var(--ink2)} .swap ul{margin:0;padding:0;list-style:none} .swap li{display:flex;gap:11px;padding:10px 0;border-top:1px solid var(--border); color:var(--ink2);font-size:var(--ms-body);line-height:1.45} .swap li:first-child{border-top:0;padding-top:0} .swap li::before{content:"";width:15px;height:15px;flex:0 0 15px;margin-top:3px; -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .was li{color:var(--ink3)} .was li::before{background:#a8a49b; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")} .now li::before{background:var(--green); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' stroke='%23000' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' stroke='%23000' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* ---------- Cards -------------------------------------------------- Fixed three-up above 1080px on purpose: at auto-fit minmax(250px) the third card orphans onto its own row and leaves a hole. */ .cards{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1080px){.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}} .card{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px; transition:border-color .14s,box-shadow .14s} .card:hover{border-color:var(--border2);box-shadow:var(--shadow-sm)} .card p{margin:0;font-size:var(--ms-small);line-height:1.55;color:var(--ink2)} /* Shape thumbnails — each card shows the layout it describes. */ .thumb{height:72px;border-radius:var(--r-sm);background:var(--raised);border:1px solid var(--border); margin-bottom:16px;padding:9px;display:flex;gap:6px;overflow:hidden} .thumb b{display:block;background:#e0ddd6;border-radius:2px} .thumb--slides>*{flex:1;background:var(--paper);border:1px solid var(--border);border-radius:3px; padding:6px;display:flex;flex-direction:column;gap:4px} .thumb--slides>*>b{height:4px} .thumb--slides>*>b:first-child{width:70%;background:var(--ink);opacity:.5} .thumb--slides .dim{opacity:.5} .thumb--doc{flex-direction:column;gap:5px} .thumb--doc b{height:4px;width:100%} .thumb--doc b:nth-child(1){width:45%;background:var(--ink);opacity:.5;height:5px} .thumb--doc b:nth-child(4){width:78%} .thumb--doc b:nth-child(6){width:60%} .thumb--tabs{flex-direction:column;gap:7px} .thumb--tabs .tabs-mini{display:flex;gap:4px} .thumb--tabs .tabs-mini b{height:6px;width:26px;border-radius:3px} .thumb--tabs .tabs-mini b:first-child{background:var(--ink);opacity:.55;width:34px} .thumb--tabs .body-mini{flex:1;display:flex;gap:5px;align-items:flex-end} .thumb--tabs .body-mini b{width:100%;border-radius:2px 2px 0 0} .thumb--tabs .body-mini b:nth-child(1){height:52%} /* Ink, not accent. The accent's whole budget is five places (buttons, links, the logomark, the hero chart's one bar, the comment avatar); a sixth spends the colour without buying emphasis — at .75 on --raised it made only 2.45:1 against the neutral bars beside it. Ink at .5 is how the other two thumbnails already mark their emphasised element, and it actually reads. */ .thumb--tabs .body-mini b:nth-child(2){height:80%;background:var(--ink);opacity:.5} .thumb--tabs .body-mini b:nth-child(3){height:36%} .thumb--tabs .body-mini b:nth-child(4){height:64%} /* ---------- Live embed --------------------------------------------- The embedded deck is the argument: a real one, cross-origin from the isolated viewer, running the same bridge every shared deck runs. 16/10 was a SLIDE's shape, and the embed is a scrolling document: the deck's own tab bar falls at 676px, so the blurb invited visitors to "switch its tabs" while the tabs sat below the frame's fold. The max here clears 676. Measured, not guessed. */ .stage{position:relative;border:1px solid var(--border2);border-radius:var(--r-lg);overflow:hidden; background:var(--paper);box-shadow:var(--shadow-float);height:clamp(460px,72vh,720px)} .stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .stagefoot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline; justify-content:space-between;margin-top:13px} /* ---------- Code ---------------------------------------------------- Light, never a dark terminal. pre-wrap because the MCP command overflows its card otherwise. */ pre{background:var(--raised);border:1px solid var(--border);border-radius:var(--r-md); padding:14px 16px;overflow-x:auto;font:var(--ms-small)/1.6 var(--mono);color:var(--ink);margin:0; white-space:pre-wrap;overflow-wrap:anywhere} pre .c{color:var(--accent-text)} .pill{display:inline-block;background:var(--accent-soft);color:var(--accent-text); border-radius:var(--r-xs);padding:2px 7px;font:600 var(--ms-micro)/1.7 var(--font)} /* min() for the same reason as .swap above. */ .steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))} /* The flex column + margin-top:auto is what bottom-aligns the two code blocks when their blurbs run to different heights. */ .step{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px; display:flex;flex-direction:column} .step pre{margin-top:auto} .step .num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--band);color:var(--ink2);font:600 11px/1 var(--font);margin-bottom:12px} .step p{font-size:var(--ms-small);margin-bottom:13px} .note{background:var(--raised);border:1px solid var(--border);border-radius:var(--r-md); padding:14px 16px;font-size:var(--ms-small);color:var(--ink2)} .note b{color:var(--ink);font-weight:620} /* ---------- Closing band -------------------------------------------- Held for the mockup's "Send a link, not a file." closer, which is copy the live page does not carry yet; the styles cost nothing and the band is one
away when that copy is approved. */ .closer{text-align:center;max-width:34rem;margin:0 auto} .closer h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.025em} .closer .ctarow{justify-content:center} /* ---------- Footer ---------------------------------------------------- */ footer{background:var(--bg);border-top:1px solid var(--border);padding:40px 0 38px; font-size:var(--ms-small);color:var(--ink3)} .footgrid{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center} .footgrid nav{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto} footer a{text-decoration:none;color:var(--ink2)} footer a:hover{color:var(--ink);text-decoration:underline} /* ---------- Panels ---------------------------------------------------- .on is the class the tab script toggles. Both of these are a contract with web/home.html's