/* ═══════════════════════════════════════════════════════════════
SOLUM — site.css: tokens, base, nav, buttons, type, footer.
The "Clean" design in the Solum palette, shared by every inner page
(views/*.html and the server's error page). The homepage does NOT load
this file — it carries its own copy of the same language in home.css.
Load order on an inner page: site.css → app.css → shell.css → page css
The full API (tokens, classes, data attributes, what shell.js does) is
documented at the top of /css/shell.css.
═══════════════════════════════════════════════════════════════ */
:root{
/* ── surfaces ── */
--page:#04070E; /* page background */
--band:#070B15; /* alternate section band, wells, code fields */
--surface:#0B1322; /* cards */
--surface-2:#0F192C; /* raised card / gradient end */
--chip:#111A2B; /* chips, soft buttons, tab track hover */
--chip-2:#18243A; /* chip hover */
/* ── brand ── */
--blue:#0070F8; /* primary actions */
--blue-d:#0A62D6; /* primary hover */
--blue-deep:#003A8C;
--blue-soft:rgba(0,112,248,.16);
--cyan:#6EC8FF; /* small accents, labels, links */
--gloss:#ECF6FF; /* the light "gloss" button, gradient start */
/* ── text ── */
--fg:#F0F6FD; /* headings, strong text */
--fg-2:#C3CCDA; /* body on cards */
--mute:#94A0B4; /* secondary */
--mute-2:#8B97AB; /* paragraphs, ledes */
--faint:#4F5B70; /* disabled / tertiary */
/* ── lines ── */
--hair:rgba(110,200,255,.10);
--hair-2:rgba(110,200,255,.18);
/* ── status ── */
--ok:#7CF2A6;
--warn:#FFC85A;
--bad:#FF6B74;
/* ── gradients ── */
--grad-text:linear-gradient(100deg,var(--gloss) 0%,var(--cyan) 42%,var(--blue) 100%);
--grad-big:linear-gradient(100deg,#F0F6FD 0%,#F0F6FD 38%,#6EC8FF 70%,#0070F8 100%);
/* ── type ── */
--f-display:"Sora",ui-sans-serif,system-ui,sans-serif;
--f-body:"Geist",ui-sans-serif,system-ui,sans-serif;
--f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
--f-mark:"Michroma","Sora",ui-sans-serif,system-ui,sans-serif;
/* ── shape ── */
--r-sm:12px;
--r-md:20px;
--r-lg:28px;
--r-xl:36px;
--r-pill:999px;
/* ── depth ── */
--sh-1:inset 0 1px 0 rgba(236,246,255,.04),0 10px 28px -12px rgba(0,0,0,.55);
--sh-2:inset 0 1px 0 rgba(236,246,255,.05),0 28px 60px -18px rgba(0,0,0,.7),0 0 80px -30px rgba(0,112,248,.35);
--sh-3:0 30px 70px -20px rgba(0,112,248,.38),0 0 0 1px rgba(110,200,255,.22);
--ring:0 0 0 4px rgba(0,112,248,.22);
/* ── motion ── */
--ease:cubic-bezier(.22,.8,.24,1);
--ease-2:cubic-bezier(.65,0,.35,1);
/* ── layout ── */
--wrap:1200px;
--gutter:clamp(16px,4vw,40px);
--nav-h:64px;
}
/* ───────────────────────── base ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* `clip`, not `hidden`: hidden makes the element a scroll container and
breaks position:sticky underneath it */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 24px);color-scheme:dark}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
margin:0;min-height:100vh;
background:var(--page);color:var(--fg);
font:400 16px/1.6 var(--f-body);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1.1}
p,figure{margin:0}
b,strong{font-weight:600}
code,kbd,samp{font-family:var(--f-mono)}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
/* ───────────────────────── nav ─────────────────────────
Markup (inner pages):
Solum
← account pill
Transparent at the top, opaque with a hairline once scrolled
(.is-scrolled, set by shell.js). No backdrop-filter. Links are centred
on desktop; under 860px they drop to a scrolling second row. */
.nav{
position:fixed;inset:0 0 auto 0;z-index:100;
height:var(--nav-h);
display:flex;align-items:center;gap:16px;
padding:0 max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));
background-color:rgba(4,7,14,0);
border:0;
transition:background-color .3s,transform .45s var(--ease);
}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--hair);opacity:0;transition:opacity .3s;pointer-events:none}
.nav.is-scrolled{background-color:rgba(4,7,14,.94)}
.nav.is-scrolled::after{opacity:1}
/* like the homepage, the bar stays put on desktop; only the taller two-row
bar on small screens tucks away while scrolling down (see below) */
.nav__brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;
font:700 18px/1 var(--f-display);letter-spacing:-.04em;color:var(--fg)}
.nav__brand img{width:26px;height:26px}
/* the markup may still say "SOLUM"; the wordmark in the nav reads "Solum" */
.nav__brand span{font-size:0;letter-spacing:0}
.nav__brand span::after{content:"Solum";content:"Solum"/"";font-size:18px;letter-spacing:-.04em}
.nav__links{display:flex;gap:4px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav__links a{
display:block;padding:8px 14px;border-radius:var(--r-pill);
font:400 14.5px/1.2 var(--f-body);color:var(--fg-2);white-space:nowrap;
transition:background-color .2s,color .2s}
.nav__links a:hover{background:var(--chip);color:var(--fg)}
.nav__links a[aria-current="page"]{background:var(--chip);color:var(--fg);box-shadow:inset 0 0 0 1px var(--hair)}
/* the account button on the right: the homepage's light gloss pill. Either
a .btn straight in the nav, or the slot api.js fills
() */
.nav__account,#navAccount{margin-left:auto;display:inline-flex;min-width:84px;justify-content:flex-end;flex:none}
.nav > .btn,.nav__account .btn,#navAccount .btn{margin-left:auto;flex:none;
background:var(--gloss);color:var(--page);box-shadow:none}
.nav > .btn:hover,.nav__account .btn:hover,#navAccount .btn:hover{background:#fff;color:var(--page)}
.nav__brand + .btn{margin-left:0}
@media (max-width:860px){
:root{--nav-h:58px}
.nav{flex-wrap:wrap;height:auto;min-height:var(--nav-h);row-gap:0;padding-top:0;padding-bottom:0}
.nav__brand{height:58px}
.nav.is-hidden{transform:translateY(-100%)}
.nav:focus-within{transform:none}
.nav__links{position:static;transform:none;order:3;flex:1 0 100%;
margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;gap:4px;
overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.nav__links::-webkit-scrollbar{display:none}
.nav__links a{flex:none;padding:7px 13px;font-size:14px}
/* when the row is wider than the screen (shell.js sets .is-over), the
side that has more links fades out, so it reads as "scroll me" */
.nav__links.is-over:not(.is-end){
-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
.nav__links.is-over.is-end:not(.is-start){
-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
.nav__links.is-over:not(.is-start):not(.is-end){
-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
/* a nav with a link row is two rows tall; shell.js sets .sh-nav on */
.sh-nav{--nav-h:102px}
}
/* phones: five links fit on one row down to ~380px wide */
@media (max-width:480px){
.nav__links{gap:2px}
.nav__links a{padding:7px 8px;font-size:13.5px}
}
/* ───────────────────────── buttons ─────────────────────────
.btn primary: blue pill with a soft glow
.btn--ghost soft dark pill (alias .btn--soft)
.btn--gloss light pill (alias .btn--light) — the nav's account button
.btn--danger red pill
.btn--sm / --big (alias --lg) / --wide (alias --block)
A inside is fine (old markup wraps the label); an