/* Holland Enterprises: the one theme for every page of hollandenterprises.app. Every colour, type, radius, shadow and spacing token lives here. Pages pick a theme with ; the keys match lib/bids/themes.js so saved preferences keep working. forest : evergreen bar, pale-leaf emblem, light pages (default) logo : white bar carrying the full-colour emblem, light pages charcoal : dark bar and dark pages, bright-leaf emblem Contrast for every text pairing is at least 4.5:1 (figures in the site-chrome design note). */ :root { /* type */ --hb-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --hb-font-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; --hb-font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --hb-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --hb-text-xs: 11.5px; --hb-text-sm: 12.5px; --hb-text-md: 13.5px; --hb-text-lg: 15px; /* space, radius, size */ --hb-s-1: 4px; --hb-s-2: 8px; --hb-s-3: 12px; --hb-s-4: 16px; --hb-s-5: 24px; --hb-s-6: 32px; --hb-r-sm: 6px; --hb-r-md: 8px; --hb-r-lg: 12px; --hb-r-pill: 999px; --hb-bar-h: 56px; --hb-subnav-h: 44px; --hb-emblem-h: 48px; --hb-ease: cubic-bezier(.2, .8, .2, 1); /* status colours shared by every theme */ --hb-ok: #2E7D4F; --hb-warn: #B23B3B; --hb-tape: #E8B824; --hb-steel: #3F5B70; --hb-steel-tint: #E4EAEF; --hb-tape-ink: #7A5B00; --hb-tape-tint: #FBF1CC; --hb-ok-tint: #DDEFE3; --hb-warn-tint: #F6E0E0; --hb-violet: #4B3F9E; --hb-violet-tint: #E6E3F5; } /* ---------- forest (default) ---------- */ :root, [data-theme="forest"] { --hb-steel: #3F5B70; --hb-steel-tint: #E4EAEF; --hb-tape-ink: #7A5B00; --hb-tape-tint: #FBF1CC; --hb-ok: #2E7D4F; --hb-ok-tint: #DDEFE3; --hb-warn: #B23B3B; --hb-warn-tint: #F6E0E0; --hb-violet: #4B3F9E; --hb-violet-tint: #E6E3F5; color-scheme: light; /* The emblem is the real logo artwork. Tinted = its shape filled with --hb-logo; original = the full-colour art. Exactly one of the two is `block`. */ --hb-emblem-tinted: block; --hb-emblem-original: none; --hb-logo: #BFE0B3; --hb-bar: #0F2F1C; --hb-bar-ink: #F1F5EF; --hb-bar-ink-2: #A8C3AE; --hb-bar-hover: rgba(241, 245, 239, .08); --hb-bar-active: #1D4A2E; --hb-bar-line: rgba(241, 245, 239, .12); --hb-bar-field: rgba(0, 0, 0, .22); --hb-bar-divider: #0A2213; --hb-paper: #F1F3EE; --hb-paper-2: #E6EAE3; --hb-surface: #FFFFFF; --hb-ink: #17201A; --hb-ink-2: #45524A; --hb-ink-3: #5C6860; --hb-line: #DCE1DA; --hb-line-2: #C8CFC6; --hb-primary: #1D6B2A; --hb-primary-hover: #185A23; --hb-on-primary: #FFFFFF; --hb-primary-ink: #17561F; --hb-tint: #DDEBDC; --hb-focus: #3C9A4A; --hb-shadow: 0 1px 2px rgba(16, 32, 20, .05), 0 4px 14px -6px rgba(16, 32, 20, .12); --hb-shadow-pop: 0 2px 6px rgba(16, 32, 20, .08), 0 24px 48px -16px rgba(16, 32, 20, .32); } /* ---------- logo green ---------- */ [data-theme="logo"] { --hb-steel: #3F5B70; --hb-steel-tint: #E4EAEF; --hb-tape-ink: #7A5B00; --hb-tape-tint: #FBF1CC; --hb-ok: #2E7D4F; --hb-ok-tint: #DDEFE3; --hb-warn: #B23B3B; --hb-warn-tint: #F6E0E0; --hb-violet: #4B3F9E; --hb-violet-tint: #E6E3F5; color-scheme: light; --hb-emblem-tinted: none; --hb-emblem-original: block; --hb-logo: #158900; --hb-bar: #FFFFFF; --hb-bar-ink: #14301E; --hb-bar-ink-2: #56655C; --hb-bar-hover: #F0F5EC; --hb-bar-active: #E3F1DC; --hb-bar-line: #DCE3D8; --hb-bar-field: #F3F6F1; --hb-bar-divider: #DCE3D8; --hb-paper: #F5F7F3; --hb-paper-2: #EAEFE7; --hb-surface: #FFFFFF; --hb-ink: #16201A; --hb-ink-2: #44504A; --hb-ink-3: #5B675F; --hb-line: #DFE5DC; --hb-line-2: #CBD3C8; --hb-primary: #127400; --hb-primary-hover: #0E5C00; --hb-on-primary: #FFFFFF; --hb-primary-ink: #0E5C00; --hb-tint: #E2F3DC; --hb-focus: #158900; --hb-shadow: 0 1px 2px rgba(14, 40, 10, .05), 0 4px 14px -6px rgba(14, 40, 10, .12); --hb-shadow-pop: 0 2px 6px rgba(14, 40, 10, .08), 0 24px 48px -16px rgba(14, 40, 10, .28); } /* ---------- charcoal (dark) ---------- */ [data-theme="charcoal"] { color-scheme: dark; --hb-emblem-tinted: block; --hb-emblem-original: none; --hb-logo: #7FCB63; --hb-steel: #A3C4DF; --hb-steel-tint: #243342; --hb-tape-ink: #EDCE70; --hb-tape-tint: #3A3320; --hb-ok: #88CDA4; --hb-ok-tint: #233B2C; --hb-warn: #EDA2A2; --hb-warn-tint: #432A2A; --hb-violet: #B9ACE9; --hb-violet-tint: #322C48; --hb-bar: #111413; --hb-bar-ink: #ECEFEA; --hb-bar-ink-2: #9CA59E; --hb-bar-hover: rgba(236, 239, 234, .07); --hb-bar-active: #262D28; --hb-bar-line: rgba(236, 239, 234, .10); --hb-bar-field: #1B201D; --hb-bar-divider: #2A302C; --hb-paper: #181C1A; --hb-paper-2: #1E2320; --hb-surface: #212624; --hb-ink: #E6EAE5; --hb-ink-2: #BCC4BD; --hb-ink-3: #939C95; --hb-line: #313833; --hb-line-2: #3D453F; --hb-primary: #2F7F24; --hb-primary-hover: #37902B; --hb-on-primary: #FFFFFF; --hb-primary-ink: #8ED479; --hb-tint: #243A22; --hb-focus: #7FCB63; --hb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px -6px rgba(0, 0, 0, .5); --hb-shadow-pop: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 48px -16px rgba(0, 0, 0, .7); } /* ---------- compatibility names ---------- The existing page stylesheets read these older names. They point at the tokens above so every page follows the theme during the rollout; phase B moves each stylesheet onto the --hb-* names. */ :root, [data-theme] { --surface: var(--hb-surface); --border: var(--hb-line); --danger: var(--hb-warn); --warn-bg: var(--hb-warn-tint); --steel-bg: var(--hb-steel-tint); --ok-bg: var(--hb-ok-tint); --violet-bg: var(--hb-violet-tint); --paper-3: var(--hb-line); --ink-4: var(--hb-ink-3); --ink2: var(--hb-ink-2); --ink3: var(--hb-ink-3); --steel: var(--hb-steel); --steel-2: var(--hb-steel-tint); --tape: var(--hb-tape); --tape-ink: var(--hb-tape-ink); --tape-2: var(--hb-tape-tint); --ok: var(--hb-ok); --ok-2: var(--hb-ok-tint); --warn: var(--hb-warn); --warn-2: var(--hb-warn-tint); --violet: var(--hb-violet); --violet-2: var(--hb-violet-tint); --hover: color-mix(in srgb, var(--hb-ink) 6%, transparent); --bar: var(--hb-bar); --primary: var(--hb-primary); --primary-hover: var(--hb-primary-hover); --primary-ink: var(--hb-primary-ink); --tint: var(--hb-tint); --paper: var(--hb-paper); --paper-2: var(--hb-paper-2); --card: var(--hb-surface); --ink: var(--hb-ink); --ink-2: var(--hb-ink-2); --ink-3: var(--hb-ink-3); --line: var(--hb-line); --line-2: var(--hb-line-2); --accent: var(--hb-primary); --accent-2: var(--hb-tint); --accent-ink: var(--hb-primary-ink); --sans: var(--hb-font); --serif: var(--hb-font-serif); --mono: var(--hb-font-mono); --r: var(--hb-r-md); --shadow: var(--hb-shadow); --shadow-lg: var(--hb-shadow-pop); --topbar: var(--hb-bar-h); } /* Page base every surface shares. */ html { background: var(--hb-paper); } body { color: var(--hb-ink); background: var(--hb-paper); font-family: var(--hb-font); } :focus-visible { outline: 2px solid var(--hb-focus); outline-offset: 2px; } /* Reserve the bar before the element upgrades so nothing jumps. */ hb-topbar { display: block; position: sticky; top: 0; z-index: 40; } hb-topbar:not(:defined) { height: var(--hb-bar-h); background: var(--hb-bar); border-bottom: 1px solid var(--hb-bar-divider); } hb-topbar:not(:defined) > * { display: none; } /* Printed documents use paper and readable ink regardless of the screen preference. */ @media print { :root, [data-theme] { color-scheme: light; --hb-paper: #FFFFFF; --hb-paper-2: #F1F3EE; --hb-surface: #FFFFFF; --hb-ink: #17201A; --hb-ink-2: #45524A; --hb-ink-3: #5C6860; --hb-line: #DCE1DA; --hb-line-2: #C8CFC6; --hb-primary: #1D6B2A; --hb-primary-ink: #17561F; --hb-tint: #DDEBDC; --hb-ok: #2E7D4F; --hb-ok-tint: #DDEFE3; --hb-warn: #B23B3B; --hb-warn-tint: #F6E0E0; --hb-steel: #3F5B70; --hb-steel-tint: #E4EAEF; --hb-tape-ink: #7A5B00; --hb-tape-tint: #FBF1CC; --hb-violet: #4B3F9E; --hb-violet-tint: #E6E3F5; } hb-topbar { display: none !important; } }