/* ========================================================================== SPA BRIDGE Added 2026-08-12, after the owner said the platform surface looked like a different company from the rest of the site. He was right, and here is the measurement behind it. Captured side by side at one viewport: marketing pages platform demonstration ------------------- ----------------------------- Avenir Next SF Pro Display Bodoni 72, high IBM Plex Serif, low contrast contrast Didone zero corner radius 8, 14, 20, 28 and 999 px pills hairline rectangles filled teal pills with arrows teal on micro-labels teal as headline colour and fill flat ink ground teal radial glow, gradient washes no green anywhere a green figure Two whole design languages under one wordmark. THE MECHANISM. The demonstration surface never hardcodes a font or a colour: every rule already reads var(--font), var(--serif), var(--mono), var(--paper) and var(--r-*). So this file changes no component. It redefines the tokens those components already consume, and the whole surface moves at once. Corner radius is the loudest single difference, and one line retires all of it. WHAT IS DELIBERATELY LEFT ALONE. The clinical semantic colours (--alarm, --warn, --good) carry meaning at a bedside and are not brand decoration. Status dots stay circular, because a dot is a dot. Load order: lumen.css, then the surface's own sheets, then this. Last wins. ========================================================================== */ :root{ /* typography: the marketing families, verbatim from the design system */ --font:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Bodoni 72","Didot","Iowan Old Style",ui-serif,Georgia,serif; --mono:"SF Mono","Menlo",ui-monospace,monospace; /* the warm paper of the marketing site, not the SPA's own warmer cast */ --paper:#f4f1ea; --paper-2:rgba(244,241,234,.60); --paper-3:rgba(244,241,234,.34); /* hairlines, matched to --hair and --hair-strong */ --line:rgba(244,241,234,.12); --line-2:rgba(244,241,234,.22); /* one line retires every rounded corner on the surface */ --r-s:0px; --r-m:0px; --r-l:0px; --r-xl:0px; /* the marketing site has no drop shadows and no glows; it has hairlines */ --shadow:none; --glow-ember:none; /* the accent is the signal teal, and only the signal teal */ --ember:#5ad6c6; --ember-soft:#8ff0e2; --ember-deep:#2aa896; --teal:#5ad6c6; --teal-deep:#2aa896; } /* pills become hairline rectangles, the site's only action grammar. The status dots keep their 50 percent, so they are excluded by name. */ .btn,.pill,.vchip,.langset,.turn__cite,.demobadge,.chip,.tag{border-radius:0!important} /* the filled call to action: paper ground, ink type, no gradient, no glow */ .btn--primary,.btn--ember{ background:var(--paper);color:#06080b;border-color:var(--paper); box-shadow:none;background-image:none;font-weight:400; font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase; padding:14px 26px; } .btn--primary:hover,.btn--ember:hover{background:var(--teal);border-color:var(--teal);color:#06080b} .btn--ghost{ background:transparent;border-color:var(--line-2);color:var(--paper); font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase; padding:14px 26px;font-weight:400; } .btn--ghost:hover{border-color:var(--teal-deep);color:var(--teal);background:transparent} /* the brand lockup: the letterspaced wordmark the rest of the site uses. The rounded tile with the glowing mark inside it exists nowhere else. */ .brand__mark{ inline-size:0!important;block-size:0!important; border:0!important;box-shadow:none!important;background:none!important; } .brand__mark::after{content:none!important} .brand__word{ font-family:var(--serif);font-weight:400;font-size:15px; letter-spacing:.32em;text-transform:uppercase; } /* the top bar: the marketing header's tracked mono navigation */ .topbar{border-block-end:1px solid var(--line);background:rgba(6,8,11,.82)} .nav a,.nav button{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; border-radius:0; } /* saturated hero washes: the marketing site opens on flat ink */ .hero,.hero--glow,.landing__hero{background-image:none!important;background:var(--ink)!important} /* headline colour: the display serif is paper, never teal. Teal is reserved for micro-labels, rules and single figures. */ .hero h1 em,.hero h1 span.accent,h1 .accent{color:var(--paper)} /* Figures. The marketing site sets a number that carries an argument in the display serif at figure scale, in paper, with the unit or symbol in teal. The demonstration surface was setting 300 ms as heavy teal sans and 0 in NVIDIA green, which is a fourth typeface behaviour and a colour that appears nowhere else on a public surface. */ .proof__n{ font-family:var(--serif);font-weight:300;letter-spacing:-.02em; color:var(--paper);font-variant-numeric:tabular-nums; } .proof__n.accent,.proof__n.green,.proof__n.tealc{color:var(--paper)} .green{color:var(--teal)} .pill--green b{color:var(--teal)} .proof__l b{font-family:var(--mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;font-weight:400;color:var(--paper)} .proof__l span{color:var(--paper-3)} /* the demonstration badge was amber, which reads as a warning state rather than as a statement of fact about the data. The app shell calls the same disclosure .ap-demo and was left amber when the platform shell was corrected, so one disclosure wore two different faces across two surfaces. */ .demobadge,.ap-demo{color:var(--paper-3);border-color:var(--line);background:transparent} /* the hero glow panel */ .hero__glow,.card--glow{background-image:none;box-shadow:none} /* focus rings follow the hairline grammar */ :focus-visible{outline:1px solid var(--teal);outline-offset:3px;border-radius:0} /* the eyebrow above a headline is the site's .kicker grammar: tracked mono micro-label in the deep teal, never bold sans */ .eyebrow{ font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.30em; text-transform:uppercase;color:var(--ember-deep); } .eyebrow.green{color:var(--ember-deep)} /* -------------------------------------------------------------------------- LAYOUT LEAK REPAIR, added 2026-08-12 after the three element cards rendered about 55px wide inside the demo. The demo loads /assets/lumen.css before its own app.css so it inherits the brand tokens. app.css then defines .grid as { display:grid; gap:18px } with NO template, because it supplies columns through .g2 / .g3 / .g4. It never sets grid-template-columns, so the marketing sheet's twelve column template was never overridden and survived into every untagged .grid in the demo: three cards landed in three of twelve columns and collapsed to a twelfth of the width each. Restore the demo's own intent, and leave the tagged grids alone because app.css already re-sets those. -------------------------------------------------------------------------- */ .grid:not(.g2):not(.g3):not(.g4){grid-template-columns:none} /* The exit from the demonstration. The wordmark returns to the site, the label under it returns to the demo's first view. The two are STACKED, not set side by side. Placed inline they widened the left cluster by about 180px and the primary nav clipped: HARDWARE was followed by a severed S where STORY should have been. Stacked, the exit costs no horizontal space at all, because the label is narrower than the wordmark above it. */ .brandset{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0} .brand__demo{ font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--paper-3);text-decoration:none; white-space:nowrap;transition:color .3s;line-height:1; } .brand__demo:hover{color:var(--paper)} /* -------------------------------------------------------------------------- THE APP SHELL'S LANGUAGE CONTROL, 2026-08-12. The marketing sheet styles .lang-switch , and the app shell builds the same control from