/* ============================================================================ Siphrix — the public site's skin: dark only, on the ibis brand kit (v2.1) Loaded LAST by the eight public pages — index, docs, changes, privacy, install, join, proof, reset — and by nothing else. theme.css is shared with the console and the operator panel, which keep both of its themes; this file is the one place the site departs from it, so the split is visible: a token that the site re-skins is re-skinned here, by the name theme.css gave it, and never by a hex value sprinkled in a rule. WHY DARK ONLY. Owner's decision, 2026-09-24, with the new identity: the kit is designed for one ground (#080B13) and the white lockup on it, and a front page that flips to cream on a light-mode laptop would show the logo the kit says never to show on light. The console is a different product surface, a working screen somebody sits in for hours; it keeps its Theme button. So: the device's preference and the console's remembered choice both stop at the site's door, which is stated in every public page's rather than discovered. THE MECHANISM. theme.css writes each colour as light-dark(, ) and lets color-scheme pick the side, in three places: dark by default, light when the device prefers it and nothing is stamped, and whatever data-theme says. The block below out-ranks all three (same specificity, later in the cascade) so the tokens this file does not re-skin — the four risk bands, the eight chart colours, --allow / --block / --abort — still resolve to their dark values on a light device. Without it a light-mode laptop would show a light-theme red on a dark page. CONTRAST (WCAG, calculator; the real-browser test re-measures every run). --ink #E6E9F0 on the ground 16.2:1; --ink-2 #B3BACB 10.4:1; --ink-3 #8B93A7 6.4:1 on the ground and 6.1:1 on a card; the accent as text --teal #9C8CF0 7.0:1 on the ground, 6.6:1 on a card; white on the button fill #6B4CE6 5.5:1. The deep violet is never text: it is the button's face and the far end of the heading gradient (large text, 3:1 floor, 3.6:1 measured). ============================================================================ */ /* The headline face's @font-face lives in theme.css since 2026-09-25, so the console and the operator panel can set headings in it too; this sheet only points --font-display at it (below). */ :root { /* --- The kit's own names (06_brand/colors.css), verbatim ------------------- */ --sx-ink: #080B13; /* page background */ --sx-ink-2: #04070D; /* the alternate section band */ --sx-sidebar: #05080E; /* console sidebar — unused here, kept for the sheet */ --sx-card: #0D1220; /* cards, widgets, popovers */ --sx-border: #1E2738; /* hairlines */ --sx-navy: #0F1B2D; /* the logo on light surfaces, the favicon tile */ --sx-violet: #6B4CE6; /* the eye, the button fill */ --sx-violet-2: #9C8CF0; /* violet as text on dark: links, labels */ --sx-mint: #2ED3A5; /* verified — a product state, not a site colour */ --sx-amber: #F2B233; /* tamper — a product state, not a site colour */ --sx-text: #E6E9F0; --sx-muted: #8B93A7; --sx-font-display: "Space Grotesk", var(--font-sans); --sx-font-ui: var(--font-sans); --sx-font-mono: var(--font-mono); /* --- theme.css names, re-skinned onto the kit ----------------------------- */ --teal: var(--sx-violet-2); /* the accent as text */ --teal-bright: #B7ABF7; /* its hover */ --teal-deep: var(--sx-ink); --ink-on-teal: var(--sx-ink); --accent-fill: var(--sx-violet); /* the primary button */ --accent-fill-hover: color-mix(in srgb, var(--sx-violet) 84%, #ffffff); --ink-on-accent-fill: #ffffff; --violet: var(--sx-violet); /* gradients' far end; never text */ --bg-0: var(--sx-ink); --bg-1: var(--sx-ink-2); /* recessed, and the band */ --bg-2: #0A0E1A; /* raised: chips, fields */ --bg-3: var(--sx-card); --bg-4: #161E33; /* inputs' tracks */ --glass: rgba(13, 18, 32, .72); --glass-2: rgba(8, 11, 19, .88); --scrim: rgba(2, 3, 6, .72); --line: var(--sx-border); --line-2: #2A3447; --line-teal: color-mix(in srgb, var(--sx-violet-2) 45%, transparent); --ink: var(--sx-text); --ink-2: #B3BACB; --ink-3: var(--sx-muted); --shade: rgba(0, 0, 0, .75); --sheen: rgba(255, 255, 255, .16); --shadow-1: 0 2px 8px rgba(0, 0, 0, .35); --font-display: var(--sx-font-display); --logo-ink: #ffffff; } /* One ground, whatever the device or the console's remembered choice says: this out-ranks theme.css's three color-scheme rules (see the header). */ :root, :root:not([data-theme="dark"]), :root[data-theme="light"] { color-scheme: dark; } /* ===================== THE BRAND, ON THE SITE ===================== */ /* The header carries the white lockup at 44px (the kit's height for a light-on-dark header; the lockup is 297.05 × 100 units, so 131px wide). landing.css sizes .brand and .lockup for every page; here only what the site adds. */ .brand small { margin-left: .2rem; } .footer-brand .lockup-img { height: 36px; width: auto; } .footer-brand p { margin-top: .9rem; } /* ===================== THE BAND ===================== */ /* The kit alternates two grounds (#080B13 / #04070D); on the front page the risk section is the band, bordered top and bottom, and keeps its own top padding despite the rhythm rule in sections.css that lets neighbouring sections share one gap. The section after it gets its gap back for the same reason. */ main > .section.band { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: clamp(4rem, 10vw, 8rem); } main > .section.band + .section { padding-top: clamp(4rem, 10vw, 8rem); } /* Text beside the logo in the band: the head and the reveal side by side, the head first on a phone. */ .band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .band-grid .section-head { margin-bottom: 0; } #risk-logo { width: 100%; max-width: 440px; min-height: 120px; margin: 0 auto; } @media (max-width: 900px) { .band-grid { grid-template-columns: 1fr; gap: 2rem; } /* On a phone the heading comes first and the reveal follows it; a logo before the sentence would push the point below the fold. */ #risk-logo { max-width: 320px; order: 2; } } /* ===================== THE HERO'S LOCKUP ===================== */ /* Above the illustration card, in the right-hand column: draws itself once per browser session, then watches the cursor. Sized so the column's illustration keeps its place. */ .hero-side { display: flex; flex-direction: column; gap: 1.6rem; align-items: stretch; } #hero-logo { width: 100%; max-width: 400px; margin: 0 auto; } @media (max-width: 980px) { #hero-logo { max-width: 300px; } } /* ===================== THE LEDGER ===================== */ /* The kit's 16:9 stage (How it works v2.1, SiphrixChain, class prefix .sxl-), in a card under the three steps. Its own caption sits on the stage; the line under it is the site's, in the site's words, because the stage's entries are an illustration and the page says so about every illustration it shows. The v2 belt's overrides (.sxc-*) left with the belt: the kit renamed every class, so they matched nothing. */ .chain-wrap { margin-top: 2.2rem; } #chain { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-3); overflow: hidden; } /* The kit's quiet greys — #5F6A84 on the hash line, the status line and the hint, #56617c on the entry number, #434c64 on the "sha256" label, #6B7590 on the narrow caption's hint — measure 2.0 to 4.1:1 on the entry cards (#141d31 → #0e1526) and the stage (#0D1220). --ink-3 is 5.5:1 on the lightest of those grounds (calculator, 2026-09-25), so it carries all of them; the hierarchy stays in weight and the violet of the hash's first four characters. */ #chain .sxl-l2, #chain .sxl-l2 .k, #chain .sxl-l3, #chain .sxl-hud, #chain .sxl-cap .c2, #chain .sxl-mcap .c2 { color: var(--ink-3); } /* The status line's first word, where the kit draws a pulsing live dot: "Illustration", framed like a label so it reads as a caption on the picture and not as one more reading (index.html says why). */ #chain .sxl-lbl { padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-3); } /* The same word where the status line is gone. The kit's narrow layout (`compact`, a stage under 760px wide — here a page from about 600 to 800 px) hides the status line with its "Illustration", crops the stage from the top, and keeps the entries, their numbers and their seals on screen: fiction with nothing on the picture saying so (product review, 2026-09-25). The word goes on the view itself, outside the scaled stage so it keeps a readable size, top right, where the narrow crop has only the dark ground. Below 600px the whole block is gone (further down). */ #chain .sxl.compact .sxl-view::before { content: "Illustration"; position: absolute; top: 10px; right: 12px; z-index: 20; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-3); color: var(--ink-3); pointer-events: none; font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } /* An entry's action beside its time has 118px of the kit's 250px card (real-browser measure, 2026-09-25). At the kit's 15px "Send money or pay" measured 132px and printed "Send money or …" — the one entry the risk section is about, cut. 13px holds every word the ledger uses. */ #chain .sxl-act { font-size: 13px; } /* A FAILED Verify is the console's alarm red, as in the console (sentinel.css repaints its bird red for the same event): the verdict, the broken link and the eye. The kit paints all three amber; its beam and sparks take the same red through the `alarm` option. The edited entry keeps the kit's amber — that is the edit, not the verdict. */ #chain .sxl-hud .st.bad b { color: var(--block); } #chain .sxl-card.brk .sxl-link i { background: var(--block); } #chain .sxl-card.brk .sxl-link b { border-color: var(--block); color: var(--block); } /* The bird's eye in the kit's "tamper" state, anywhere on the site: the ledger above after a failed Verify, and proof.html's mark when the record does not verify. The kit fills it amber through an SVG attribute; a stylesheet rule out-ranks an attribute, which is how sentinel.css does the same in the console. */ .sx-logo[data-state="tamper"] .sx-eyep { fill: var(--block); } .sx-logo[data-state="tamper"] circle[vector-effect] { stroke: var(--block); } .chain-foot { margin: .85rem 0 0; font-size: .8rem; color: var(--ink-3); line-height: 1.5; } /* The stage is a fixed 1280 × 720 design scaled to the width it gets: at a phone's 360px its entries are three-pixel text, an animation that conveys nothing (real-browser capture, 2026-09-24). Below 600px the whole block, footnote included, stays out; the three steps above it tell the story in words. */ @media (max-width: 600px) { .chain-wrap { display: none; } }