/* 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 of * tero/internal/web/assets/style.css — 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-body-bg: #3B7099; /* the blue behind the paper sections */ --color-bg: #FFFFFF; /* paper / surfaces */ --color-header-bg: #FAF9F5; /* creamy paper — the site-header chrome, warmer than the white surfaces */ --color-bg-light: #D6EDFA; /* surface accent: callouts, panels, thead */ --color-list-bg: #f1f8fe; /* the neutral "between" surface (section cards, page-section-header) */ --color-subnav-bg: #dae5ee; /* the sub-navigation bar — a step deeper than the section header */ --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; --color-brand: oklch(0.6897 0.2245 34.52); /* wordmark accent — vermilion, used on dark grounds only */ --color-seal: oklch(0.55 0.205 34.52); /* the mark/seal — cinnabar; baked into favicon.svg, here as the canonical value */ --alert-info-bg: #E5F0F7; --alert-info-text: #2A6085; --alert-info-border: #C9DEED; --alert-success-bg: #E0F5EE; --alert-success-text: #1A6B54; --alert-success-border: #BFE5D8; --alert-error-bg: #F9E5E5; --alert-error-text: #8B3A3A; --alert-error-border: #EFC9C9; --alert-warning-bg: #FDF6E3; --alert-warning-text: #7A5A1A; --alert-warning-border: #EEDFB8; /* 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 */ --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-body-bg: #0A1018; /* near-black navy; paper floats on it */ --color-bg: #141C24; --color-header-bg: #1A1F27; /* warm-lifted chrome — a hair lighter + warmer than the surface */ --color-bg-light: #1E2A35; --color-list-bg: #0c151d; --color-subnav-bg: #091016; --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; --color-footer-text: #98AAB8; --color-footer-link: #F0F4F8; --color-footer-link-hover: #FFFFFF; --alert-info-bg: #1F3348; --alert-info-text: #9dd0eb; --alert-info-border: #2A4258; --alert-success-bg: #1A3D32; --alert-success-text: #5DDBB8; --alert-success-border: #1F4A3D; --alert-error-bg: #2A1A1A; --alert-error-text: #E07070; --alert-error-border: #4A2525; --alert-warning-bg: #1A1A1A; --alert-warning-text: #f5e2a4; --alert-warning-border: #B45309; /* 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 */ --gradient-login: linear-gradient(to bottom right, #003355, #2a5a7f 40%, #286a91); } /* --- 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; 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); background: var(--color-body-bg); 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 --- */ .site-header { position: sticky; top: 0; z-index: 100; height: 4rem; 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: 100%; } /* 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. On light grounds the wordmark * is ink and the seal carries the one warm note; on dark the wordmark turns * vermilion (--color-brand). The brand red 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; } .wordmark .brand { color: var(--color-text); } [data-theme=dark] .wordmark .brand { color: var(--color-brand); } .wordmark .brand-label { font-weight: 400; color: var(--color-text); } @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-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap; } @media (hover: hover) { .site-nav a: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; } @media (hover: hover) { .site-nav a.active:hover { background: var(--color-btn-primary); } } /* 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; } /* --- site shell: page structure --- */ .container { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; } .page-section-header { background: var(--color-list-bg); } .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; } .page-section { background: var(--color-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 (sits directly on the blue) --- */ .site-footer { color: var(--color-footer-text); font-size: 0.875rem; text-align: center; /* sits close under the last paper section */ padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)); } .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; } } /* --- 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