/* ecryua site shell — Arctic (light) / Nautical (dark). * Implements the ecryua design language (~/Development/ecryua-design): semantic * color tokens as CSS custom properties, the site-shell chrome (sticky white * header, paper sections on the arctic-blue body, footer on the blue), the * shared auth-card-on-gradient login treatment, and the component recipes * (buttons, forms, tables, alerts, badges). Identical copy in mara — * keep the two files in sync. * * Theme switching: site.js resolves cookie -> prefers-color-scheme and sets * data-theme="light|dark" on before first paint. Without JS the Arctic * defaults below apply. */ /* --- tokens: Arctic light --- */ :root { color-scheme: light; --color-bg: #FFFFFF; /* paper / surfaces — cards, tables, sheets */ --color-section-bg: #FAF9F5; /* the cream ground the paper surfaces lift off */ --color-header-bg: #F5F3EC; /* deep cream — a step warmer and deeper than the section ground, so the chrome reads as its own plane */ --color-bg-light: #E4EFF5; /* surface accent, muted against the cream ground (canonical #D6EDFA × ~0.574 sat) */ --color-subnav-bg: #dae5ee; /* the sub-navigation bar — a step deeper than the section header */ --color-footer-bg: #194461; /* the footer band's own ground — the app shell's rail blue */ --color-colophon-bg: #3B7099; /* the colophon band below the footer — a lighter step of the primary */ --color-hero-bg: #194461; /* the hero band — a DARK ground in both themes; Arctic shares the rail blue */ --color-text: #0F1D28; --color-text-light: #374853; --color-border: #C0CDD6; --color-input-border: #889FAB; /* stronger than --color-border: inputs sit on white paper */ --color-card-border: #94B0C4; /* service cards: pronounced, primary-tinted resting border */ --color-input-bg: #FFFFFF; --color-primary: #3A7099; --color-link: #3A7099; --color-btn-primary: #3A7099; --color-btn-primary-hover: #255A7A; --color-secondary-bg: #DDE4E8; --color-secondary-hover: #CDD6DC; --color-secondary-border: #889FAB; --color-btn-danger: #C94A4A; --color-btn-danger-hover: #B03E3E; --color-hover-subtle: #DEEAF2; --color-focus-ring: rgba(58, 112, 153, 0.15); /* darker than the foundations value (#2E9E7A, ~3.3:1): used directly as text * on white (.ok), so it must meet AA (#268466 ≈ 4.6:1) */ --color-success: #268466; --color-error: #C94A4A; --color-footer-text: #F0F6F8; --color-footer-link: #FFFFFF; --color-footer-link-hover: #D6EDFA; /* the wordmark — ink on light, off-white on dark. An alias of --color-text in * BOTH themes, carried as its own role so the lockup can be restyled without * touching body copy. (The old bright-vermilion --color-brand is retired: one * red, one accent, one rule for the wordmark — don't reintroduce it.) */ --color-wordmark: var(--color-text); --color-seal: oklch(0.55 0.205 34.52); /* the mark/seal — cinnabar; baked into favicon.svg, here as the canonical value */ /* fills muted against the cream section ground — same hue, ~half the saturation, * two points darker; the text and border values are the classic ones */ --alert-info-bg: #E2EAF0; --alert-info-text: #2A6085; --alert-info-border: #C8D9E3; --alert-success-bg: #DEEDE8; --alert-success-text: #1A6B54; --alert-success-border: #B8E5D8; --alert-error-bg: #F2E2E2; --alert-error-text: #8B3A3A; --alert-error-border: #E8C4C4; --alert-warning-bg: #F5F0E1; --alert-warning-text: #7A5A1A; --alert-warning-border: #F0DEB0; /* badges: solid in light, white text on top */ --badge-success-bg: #3D7A47; --badge-success-text: #FFFFFF; --badge-error-bg: #A83A3A; --badge-error-text: #FFFFFF; --badge-warning-bg: #9A7B1C; --badge-warning-text: #FFFFFF; --badge-info-bg: #3A7099; --badge-info-text: #FFFFFF; --shadow-header: 0 1px 12px rgba(42, 90, 122, 0.08); --shadow-elevated: 0 1px 2px rgba(16, 38, 64, 0.12), 0 8px 20px rgba(16, 38, 64, 0.18), 0 16px 48px rgba(16, 38, 64, 0.24); /* soft, diffuse; deep-navy tint reads against the login gradient */ --shadow-elevated-soft: 0 1px 2px rgba(16, 38, 64, 0.08), 0 6px 16px rgba(16, 38, 64, 0.12), 0 12px 32px rgba(16, 38, 64, 0.16); /* lighter variant; modals & large surfaces */ --gradient-login: linear-gradient(135deg, #2A5A7A 0%, #3A7099 40%, #4A8AB0 100%); --border-radius: 0.5rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; } /* --- tokens: Nautical dark --- */ [data-theme=dark] { color-scheme: dark; --color-bg: #141C24; /* dark's "between" ground RECEDES — a hair darker than the surfaces, the mirror * of the light theme's cream, so paper still lifts */ --color-section-bg: #10171E; --color-header-bg: #24221E; /* warm charcoal — the cream header mirrored: the same warm chroma at dark lightness */ --color-bg-light: #1E2A35; --color-subnav-bg: #091016; --color-footer-bg: #0a1f30; /* the same navy as the app shell's rail */ --color-colophon-bg: #0A1018; --color-hero-bg: #051019; /* a step below even the body */ --color-text: #F0F4F8; --color-text-light: #98AAB8; --color-border: #2A3A48; --color-input-border: #3A4D58; --color-card-border: #3A5570; --color-input-bg: #1E2A35; --color-primary: #7AA0C0; --color-link: #7AA0C0; --color-btn-primary: #3A5570; --color-btn-primary-hover: #4A6580; --color-secondary-bg: #0E1418; /* darker than every surface, incl. row hover */ --color-secondary-hover: #1E2A35; --color-secondary-border: #495961; --color-btn-danger: #984040; /* destructive shouldn't shout in the dark */ --color-btn-danger-hover: #A85050; --color-hover-subtle: #283848; --color-focus-ring: rgba(122, 160, 192, 0.15); --color-success: #5BC9A0; --color-error: #E07070; /* NOTE: --color-footer-* are deliberately NOT overridden here — the footer and * colophon bands are dark in both themes, so their text roles are defined once * in :root and dark inherits them. */ /* fills and borders re-derived against the receding dark section ground */ --alert-info-bg: #1C2C36; --alert-info-text: #9dd0eb; --alert-info-border: #273E4C; --alert-success-bg: #1C362D; --alert-success-text: #5DDBB8; --alert-success-border: #274C3F; --alert-error-bg: #371A1A; --alert-error-text: #E07070; --alert-error-border: #4E2525; --alert-warning-bg: #393018; --alert-warning-text: #f5e2a4; --alert-warning-border: #504422; /* badges invert: dark tint of the hue, bright text in the same hue */ --badge-success-bg: #1A3D32; --badge-success-text: #5DDBB8; --badge-error-bg: #2A1A1A; --badge-error-text: #E07070; --badge-warning-bg: #1A1A1A; --badge-warning-text: #FCD34D; --badge-info-bg: #1F3348; --badge-info-text: #5DB8E8; --shadow-header: 0 1px 12px rgba(0, 0, 0, 0.20); --shadow-elevated: 0 1px 1px rgba(0, 0, 0, 0.20), 0 8px 20px rgba(0, 0, 0, 0.28), 0 16px 48px rgba(0, 0, 0, 0.36); /* soft, diffuse, neutral & deeper */ --shadow-elevated-soft: 0 1px 1px rgba(0, 0, 0, 0.14), 0 6px 16px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 0, 0.24); /* lighter variant; modals & large surfaces */ --gradient-login: linear-gradient(135deg, #0A1018 0%, #141C24 40%, #1E2A35 100%); } /* --- webfont: Space Grotesk (self-hosted, same-origin) --- * One variable file, weight axis 300–700. The cuandu WORDMARK / brand face — * the UI body & headings use Hyperreadable (below). Served from * /static (tero, mara), /assets (www). License: OFL, see SpaceGrotesk-OFL.txt. */ @font-face { font-family: 'Space Grotesk'; src: url(/static/space-grotesk.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } /* --- webfont: Hyperreadable (self-hosted, same-origin) --- * The UI body & heading face — a plainer cut of Atkinson Hyperlegible, still * engineered for per-character legibility (0/O, 1/l/I), which suits an identity * console. Hyperreadable ships static weights only (no variable axis), so it's * one file per weight the UI uses — 400/500/600/700; the whole face is small and * covers Latin + Latin-ext, so there's no unicode-range subset split. License: * OFL, see Hyperreadable-OFL.txt. */ @font-face { font-family: 'Hyperreadable'; src: url(/static/hyperreadable-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hyperreadable'; src: url(/static/hyperreadable-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Hyperreadable'; src: url(/static/hyperreadable-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Hyperreadable'; src: url(/static/hyperreadable-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* --- base --- */ * { box-sizing: border-box; } html { -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: 'Hyperreadable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* one step up from the root default: Hyperreadable renders visually compact for * its nominal size. It goes on , never (there it would rescale * every rem length), and the root stays unpinned so a user's browser font-size * preference still carries through. Chrome opts back down to 1rem. */ font-size: 1.125rem; line-height: 1.6; /* antialiased — Space Grotesk reads cleaner smoothed; reverses the old * system-font note (ERRATA-2 §3), which applied only while the UI was system-font */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-ligatures: none; color: var(--color-text); /* The canvas stays UNSTYLED — neither html nor body sets a background — so the * browser's overscroll area reads neutral in both themes (the per-theme * color-scheme gives it the right darkness). The page sections carry the cream * ground; the blue lives only where chrome earns it: the footer band. */ display: flex; flex-direction: column; min-height: 100dvh; } h1 { font-size: 1.25rem; font-weight: 500; margin: 0; } h2 { font-size: 1.5rem; font-weight: 500; margin: 0 0 1rem; } h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; } a { color: var(--color-link); text-decoration: none; } @media (hover: hover) { a:hover { text-decoration: underline; } } p { margin: 0 0 1rem; } small, .help { font-size: 0.875rem; color: var(--color-text-light); } .help { margin: 0.25rem 0 0; } code { font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace; font-size: 0.875em; background: var(--color-bg-light); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } /* --- site shell: header --- */ /* The sticky two-tier chrome wraps the primary row (.header-inner, 4rem) and the * optional sub-nav, so its border-bottom + shadow sit at the bottom of the whole * header (the two tiers themselves split by tone, not a border). No fixed height: * it grows to fit both rows. */ .site-header { position: sticky; top: 0; /* Deliberately BELOW the mobile nav sheet's 10001, unlike the single-tier * shells: this header can carry a sub-nav, and the sheet opens at top:4rem — * i.e. over that second tier, which is what should happen. The hamburger sits * in the 4rem primary row above the sheet's origin, so it stays clickable. */ z-index: 100; background: var(--color-header-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-header); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; } /* The lockup: the cinnabar seal + the lowercase "cuandu" wordmark, plus an * optional product descriptor. Parent vs. descriptor differ by WEIGHT, not * colour — "cuandu" is 600, the descriptor 400. The wordmark takes the header's * text colour in both themes (ink on the creamy light header, off-white in * Nautical); the seal carries the one warm note, and cinnabar appears nowhere * else in the UI. */ .wordmark { display: inline-flex; align-items: center; gap: 0.4em; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* the wordmark stays Space Grotesk even though the UI body is Hyperreadable */ font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; /* the logo's tracking, tuned for Space Grotesk */ text-decoration: none; white-space: nowrap; } .wordmark .seal { height: 1.55em; width: auto; flex: none; display: block; } /* no dark-mode override: --color-wordmark aliases --color-text in both themes, so * the wordmark and its descriptor land on the same colour and read as one unit */ .wordmark .brand { color: var(--color-wordmark); } .wordmark .brand-label { font-weight: 400; color: var(--color-wordmark); } @media (hover: hover) { a.wordmark:hover { text-decoration: none; } } .site-nav { display: flex; align-items: center; gap: 0.25rem; } .site-nav form { display: contents; } .site-nav a, .nav-btn { display: inline-block; padding: 0.375rem 0.75rem; border-radius: var(--border-radius); color: var(--color-text); font: inherit; font-size: 1rem; /* chrome pins back to the base; the 1.125rem bump is for content */ font-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; } /* Excluding .active is load-bearing, not tidiness: the active item is already * filled here, and an `.active:hover` override would outrank the mobile sheet's * `.site-nav a.active` (which unfills it and colours the label primary), so * hovering an active row on a narrow viewport would paint primary-on-primary. */ @media (hover: hover) { .site-nav a:not(.active):hover, .nav-btn:hover { text-decoration: none; background: rgba(58, 112, 153, 0.15); background: oklch(from var(--color-btn-primary) l c h / 0.3); } } .site-nav a.active { background: var(--color-btn-primary); color: #FFFFFF; } /* hamburger (mobile only) */ .menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0.625rem; background: none; border: 0; cursor: pointer; } .menu-btn span { display: block; height: 2px; background: var(--color-text); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } /* sub-navigation: the active section's pages — a slim second tier (underline tabs) * living inside

beneath the primary row. Not independently sticky: the * whole header sticks as one block, so its border + shadow fall below the subnav. */ .site-subnav { background: var(--color-subnav-bg); } .subnav-inner { display: flex; align-items: center; gap: 1.5rem; height: 2.75rem; } .site-subnav form { display: contents; } .site-subnav a { display: inline-flex; align-items: center; height: 100%; font-size: 1rem; /* chrome, like the primary nav */ /* the active tab's 2px underline is a bottom border the full tab height sits on, * so it lands flush against the bar's inner bottom edge; transparent on inactive * tabs so toggling never shifts layout. No horizontal padding: the first tab's * label lines up flush with the wordmark and page content, and the underline * spans exactly the label (gap separates). */ border-bottom: 2px solid transparent; color: var(--color-text-light); font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; } .site-subnav a.active { color: var(--color-text); border-bottom-color: var(--color-btn-primary); } @media (hover: hover) { .site-subnav a:hover { color: var(--color-text); } } /* --- site shell: page structure --- */ .container { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; } .page-section-header { background: var(--color-bg-light); } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; padding: 0.75rem 0; } .page-header-actions { white-space: nowrap; } /* --- hero band: the page-section-header's heavier sibling, for a page whose * subject IS the header (the account overview's security checkup). A DARK navy * ground in both themes, so everything on it takes the on-dark text roles. --- */ .page-section-hero { /* a same-hue gradient over the band blue, so a ground this large doesn't sit * flat and the card on it reads as paper — the treatment the other cuandu * dashboards use for their lead band */ background: linear-gradient(160deg, color-mix(in oklab, var(--color-hero-bg), #FFFFFF 10%) 0%, var(--color-hero-bg) 42%, color-mix(in oklab, var(--color-hero-bg), #000000 12%) 100%); color: var(--color-footer-text); padding: 2rem 0 2.25rem; } .page-section-hero h1 { font-size: 2rem; font-weight: 500; line-height: 1.25; color: var(--color-footer-link); } .page-section-hero a { color: var(--color-footer-link); } @media (hover: hover) { .page-section-hero a:hover { color: var(--color-footer-link-hover); } } /* the band's title row: the h1 sits directly on the blue, with any status badge * beside it (the old muted "(2/3)" would be unreadable on the dark ground) */ .hero-head { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem; } /* A paper card may sit on the band. Inside it, text and links return to the * normal on-surface roles — the band's on-dark link colour would be white on * white. It's also the band's last element, so it drops its bottom margin. */ .page-section-hero .section-card { color: var(--color-text); margin-bottom: 0; } .page-section-hero .section-card a { color: var(--color-link); } @media (hover: hover) { .page-section-hero .section-card a:hover { color: var(--color-link); } } /* the cream "water" the paper surfaces float on; header → sub-nav → * page-section-header → here reads as a tonal descent */ .page-section { background: var(--color-section-bg); padding: 2rem 0 3rem; flex: 1; } .section-divider { border-top: 1px solid var(--color-border); margin-top: 2rem; padding-top: 1.5rem; } /* narrow content (focused forms) stays aligned with the page header */ .form-narrow { max-width: 26rem; } /* --- site shell: footer (carries its own blue band) --- */ .site-footer { /* the band, not the page, owns the blue */ background: var(--color-footer-bg); color: var(--color-footer-text); /* the band inherits the body size — the sub-1rem carve-outs don't include footers */ text-align: center; /* sits close under the last section; the safe-area padding lives on the * colophon below, which is now the last in-flow band */ padding: 1rem; } .footer-link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-footer-link); cursor: pointer; } @media (hover: hover) { .footer-link:hover { color: var(--color-footer-link-hover); text-decoration: underline; } } /* --- site shell: colophon (the last band) --- */ /* The true page footer, below the settings footer: attribution only, on a lighter * step of the primary so the footer band stays the deepest chrome. The auth pages * have no bands at all — they use .auth-footer on the gradient. */ .site-colophon { background: var(--color-colophon-bg); color: var(--color-footer-text); text-align: center; /* No safe-area padding in the browser: iOS Safari animates * env(safe-area-inset-bottom) as its toolbar collapses and expands with the * scroll, and in-flow padding tracking it resizes the document mid rubber-band * — a visible stutter at the end of every scroll. Installed standalone there is * no toolbar, the inset is constant, and the padding keeps the text clear of * the home indicator. */ padding: 1rem; } @media (display-mode: standalone) { .site-colophon { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } } /* --- auth pages: card on the gradient (the only gradient in the system) --- */ body.auth { background: var(--gradient-login); align-items: center; justify-content: center; padding: 1.5rem; } .card { background: var(--color-bg); border-radius: 0.75rem; padding: 2rem; width: 100%; max-width: 26rem; box-shadow: var(--shadow-elevated); } .card .wordmark { display: flex; margin-bottom: 1.25rem; } .card h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; } .card-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--color-text-light); font-size: 0.875rem; } .card-divider::before, .card-divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); } .auth-footer { margin-top: 1.5rem; color: var(--color-footer-text); font-size: 0.875rem; text-align: center; padding-bottom: env(safe-area-inset-bottom); } /* --- buttons --- */ /* All variants share identical box metrics: the base carries a transparent * 1px border so filled variants (primary, danger) match bordered ones * (secondary) exactly; variants override ONLY colors. */ .btn { display: inline-block; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--border-radius); background: var(--color-btn-primary); color: #FFFFFF; font: inherit; font-weight: 500; line-height: 1.25; text-align: center; /* doesn't center like