/* ========================================================================== The Roanoke Conference — THEME MANAGER -------------------------------------------------------------------------- Every color on the site is defined in this file and nowhere else. styles.css contains no literal colors; it only reads the role tokens below. How to re-theme • Change a brand color ............ edit 1. PALETTE • Change what a color is used for . edit 2. ROLES • Change how every button looks ... edit 3. BUTTONS • Change how dark sections look ... edit 4. DARK SURFACES Rules that keep this working • Roles reference palette tokens only — never another role. A custom property that points at another role is resolved where it is declared, so it would ignore the overrides in section 3. • Section 4 must redefine every role a dark surface needs to differ. Outside CSS • build.js reads --meta-theme-color and --meta-background-color for the browser theme color and the web app manifest. Keep them as a palette reference (or a plain hex) — build.js cannot evaluate color-mix(). • og-image.svg (the link-preview image) cannot read CSS. Its colors are copied from the palette by hand; re-render og-image.jpg after changing the palette. ========================================================================== */ /* 1. PALETTE ================================================================ The nine brand colors, in the order supplied. Values are exact: sampled from the brand palette and converted from Display P3 to sRGB. */ :root { --palette-forest: #197C3A; /* 1 primary brand green */ --palette-mist: #EDF2EF; /* 2 off-white surface */ --palette-pine: #16582D; /* 3 deep green */ --palette-charcoal: #2B2B2B; /* 4 near-black */ --palette-stone: #6F6F6F; /* 5 mid grey */ --palette-mint: #B7ECC9; /* 6 pale green highlight */ --palette-silver: #A1A5A1; /* 7 light grey */ --palette-sage: #599C71; /* 8 muted green */ --palette-leaf: #1C993F; /* 9 bright green */ --palette-white: #FFFFFF; /* Functional colors — deliberately NOT part of the brand palette. Errors need to read as errors; a green error message reads as success. */ --status-danger: #B42318; --print-ink: #000000; } /* 2. ROLES — default (light) surfaces ======================================= */ :root { /* Browser UI + web manifest — read by build.js */ --meta-theme-color: var(--palette-charcoal); --meta-background-color: var(--palette-charcoal); /* Surfaces */ --color-page: var(--palette-white); --color-surface: var(--palette-white); --color-surface-alt: var(--palette-mist); --color-surface-feature: var(--palette-pine); /* feature bands, panels */ --color-surface-chrome: var(--palette-charcoal); /* header, footer, drawer */ --color-on-chrome: var(--palette-white); /* Text */ --color-text: var(--palette-charcoal); --color-text-strong: var(--palette-charcoal); /* Stone, darkened slightly so small text still passes WCAG AA on mist. */ --color-text-muted: color-mix(in srgb, var(--palette-stone) 85%, var(--palette-charcoal)); --color-text-subtle: color-mix(in srgb, var(--palette-stone) 85%, var(--palette-charcoal)); --color-heading: var(--palette-charcoal); --color-display: var(--palette-pine); /* stats, prices, quote */ --color-accent-text: var(--palette-forest); /* eyebrows, labels, years */ --color-link: var(--palette-forest); --color-link-hover: var(--palette-pine); /* Lines */ --color-border: color-mix(in srgb, var(--palette-charcoal) 14%, transparent); --color-border-soft: color-mix(in srgb, var(--palette-charcoal) 8%, transparent); --color-border-hover: color-mix(in srgb, var(--palette-charcoal) 30%, transparent); --color-border-strong: var(--palette-pine); --color-border-featured: var(--palette-leaf); --color-border-callout: var(--palette-forest); /* Interaction */ --color-focus: var(--palette-leaf); --color-focus-ring: color-mix(in srgb, var(--palette-leaf) 22%, transparent); --color-selection-bg: var(--palette-forest); --color-selection-text: var(--palette-white); --color-hover-wash: color-mix(in srgb, var(--palette-charcoal) 6%, transparent); /* Icons, checkmarks, badges, tags */ --color-icon: var(--palette-forest); --color-icon-bg: color-mix(in srgb, var(--palette-mint) 55%, var(--palette-white)); --color-tick: var(--palette-forest); --color-tick-bg: color-mix(in srgb, var(--palette-mint) 55%, var(--palette-white)); --color-badge-bg: color-mix(in srgb, var(--palette-mint) 55%, var(--palette-white)); --color-badge-text: var(--palette-pine); --color-tag-bg: var(--palette-forest); --color-tag-text: var(--palette-white); --color-tag-highlight-bg: var(--palette-mint); --color-tag-highlight-text: var(--palette-pine); --color-tag-neutral-bg: var(--palette-charcoal); --color-tag-neutral-text: var(--palette-white); --color-medal: var(--palette-forest); --color-avatar-from: var(--palette-pine); --color-avatar-to: var(--palette-forest); --color-avatar-ring: color-mix(in srgb, var(--palette-mint) 70%, transparent); --color-avatar-text: var(--palette-white); /* Staff portal — submission status pills */ --color-pill-new-bg: var(--palette-mint); --color-pill-new-text: var(--palette-pine); --color-pill-progress-bg: color-mix(in srgb, var(--palette-sage) 24%, var(--palette-white)); --color-pill-progress-text: var(--palette-pine); --color-pill-resolved-bg: color-mix(in srgb, var(--palette-charcoal) 8%, var(--palette-white)); --color-pill-resolved-text: var(--palette-charcoal); --color-pill-archived-bg: transparent; --color-pill-archived-text: color-mix(in srgb, var(--palette-stone) 85%, var(--palette-charcoal)); --color-pill-archived-border: color-mix(in srgb, var(--palette-charcoal) 18%, transparent); --color-row-hover: color-mix(in srgb, var(--palette-mint) 22%, var(--palette-white)); --color-row-unread-marker: var(--palette-leaf); /* Progress spinner — ported from era-novum's PageSpinner */ --spinner-accent: var(--palette-forest); --spinner-accent-soft: color-mix(in srgb, var(--palette-forest) 50%, transparent); --spinner-sweep: color-mix(in srgb, var(--palette-leaf) 55%, transparent); --spinner-track: color-mix(in srgb, var(--palette-forest) 15%, transparent); --spinner-disc: var(--palette-white); --spinner-well: var(--palette-mist); --spinner-disc-shadow: 0 10px 28px color-mix(in srgb, var(--palette-charcoal) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--palette-charcoal) 8%, transparent); --spinner-well-shadow: inset 0 2px 6px color-mix(in srgb, var(--palette-charcoal) 14%, transparent), inset 0 -1px 2px color-mix(in srgb, var(--palette-white) 80%, transparent); /* Form status messages */ --color-success-bg: color-mix(in srgb, var(--palette-mint) 35%, var(--palette-white)); --color-success-border: color-mix(in srgb, var(--palette-sage) 55%, transparent); --color-danger-bg: color-mix(in srgb, var(--status-danger) 7%, var(--palette-white)); --color-danger-border: color-mix(in srgb, var(--status-danger) 40%, transparent); /* Feature backgrounds */ --gradient-hero: linear-gradient(165deg, color-mix(in srgb, var(--palette-pine) 45%, var(--palette-charcoal)) 0%, var(--palette-pine) 55%, color-mix(in srgb, var(--palette-pine) 90%, var(--palette-forest)) 100%); --gradient-page-hero: linear-gradient(160deg, color-mix(in srgb, var(--palette-pine) 45%, var(--palette-charcoal)) 0%, var(--palette-pine) 100%); --gradient-cta: linear-gradient(140deg, color-mix(in srgb, var(--palette-pine) 60%, var(--palette-charcoal)) 0%, var(--palette-pine) 100%); --glow-primary: color-mix(in srgb, var(--palette-forest) 30%, transparent); --glow-secondary: color-mix(in srgb, var(--palette-sage) 7%, transparent); /* Lodging — a hotel's own photo sits behind its card. The scrim keeps white text legible over any picture: darkest where the words are, lighter where the rate card sits. Stacked (narrow) cards get an even wash instead. */ --stay-scrim: linear-gradient(100deg, color-mix(in srgb, color-mix(in srgb, var(--palette-pine) 80%, var(--palette-charcoal)) 88%, transparent) 0%, color-mix(in srgb, var(--palette-pine) 68%, transparent) 55%, color-mix(in srgb, var(--palette-pine) 35%, transparent) 100%); --stay-scrim-stacked: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--palette-pine) 80%, var(--palette-charcoal)) 86%, transparent) 0%, color-mix(in srgb, var(--palette-pine) 72%, transparent) 100%); --stay-rate-card-bg: color-mix(in srgb, var(--palette-pine) 72%, transparent); --stay-text-shadow: 0 1px 12px color-mix(in srgb, var(--palette-charcoal) 55%, transparent); --stay-banner-bg: var(--palette-mint); --stay-banner-text: var(--palette-pine); --stay-thumb-empty: color-mix(in srgb, var(--palette-sage) 22%, var(--palette-mist)); /* Sign in with Apple. Apple's guidelines fix this button at black with a white logo and label, so — like the Google "G" in the sign-in markup — it does not follow the palette. */ --apple-button-bg: #000000; --apple-button-text: #FFFFFF; --apple-button-bg-hover: #1F1F1F; /* Headshot editor: the dimmed area outside the crop circle, and its guides. */ --headshot-stage-bg: var(--palette-charcoal); --headshot-mask: color-mix(in srgb, var(--palette-charcoal) 62%, transparent); --headshot-ring: var(--palette-white); --headshot-guide: color-mix(in srgb, var(--palette-white) 45%, transparent); /* Hero landscape — Mt. Rainier behind evergreen forest. Kept close to the sky color so it reads as a quiet backdrop; nearer layers get darker. */ --hero-mountain: color-mix(in srgb, var(--palette-sage) 22%, var(--palette-pine)); --hero-mountain-shade: color-mix(in srgb, var(--palette-charcoal) 16%, transparent); --hero-mountain-snow: color-mix(in srgb, var(--palette-mist) 16%, transparent); --hero-mountain-rock: color-mix(in srgb, var(--palette-sage) 24%, var(--palette-pine)); --hero-hills: color-mix(in srgb, var(--palette-pine) 90%, var(--palette-charcoal)); --hero-trees-far: color-mix(in srgb, var(--palette-pine) 72%, var(--palette-charcoal)); --hero-trees-near: color-mix(in srgb, var(--palette-pine) 42%, var(--palette-charcoal)); --hero-bird: color-mix(in srgb, var(--palette-charcoal) 62%, var(--palette-pine)); --hero-critter: color-mix(in srgb, var(--palette-charcoal) 90%, var(--palette-pine)); --hero-critter-mark: color-mix(in srgb, var(--palette-pine) 42%, var(--palette-charcoal)); --hero-eyes: color-mix(in srgb, var(--palette-mint) 60%, var(--palette-sage)); /* Elephant in the far tree row. A grey-green a step lighter than that row, so it shows through the gaps but the tree silhouettes still mask it. Everything else is a tint or shade of that one base. */ --hero-elephant-base: color-mix(in srgb, var(--palette-silver) 12%, color-mix(in srgb, var(--palette-sage) 28%, var(--palette-pine))); --hero-elephant: var(--hero-elephant-base); --hero-elephant-light: color-mix(in srgb, var(--palette-mist) 14%, var(--hero-elephant-base)); --hero-elephant-shade: color-mix(in srgb, var(--palette-charcoal) 22%, var(--hero-elephant-base)); --hero-elephant-far: color-mix(in srgb, var(--palette-charcoal) 14%, var(--hero-elephant-base)); --hero-elephant-ear: color-mix(in srgb, var(--palette-charcoal) 6%, var(--hero-elephant-base)); --hero-elephant-line: color-mix(in srgb, var(--palette-charcoal) 42%, var(--hero-elephant-base)); --hero-elephant-tusk: color-mix(in srgb, var(--palette-mist) 30%, var(--hero-elephant-base)); --hero-elephant-tusk-far: color-mix(in srgb, var(--palette-mist) 10%, var(--hero-elephant-base)); --hero-elephant-eye: color-mix(in srgb, var(--palette-charcoal) 60%, var(--hero-elephant-base)); --hero-elephant-shine: color-mix(in srgb, var(--palette-mist) 40%, var(--hero-elephant-base)); /* Washington state flag on the summit. These are the flag's own textile colors (WAC 434-04-017), not brand roles: Irish green field, Spanish yellow ring, oriental blue seal ground, black ink, warm face. */ --hero-flag-field: #00843D; --hero-flag-field-light: color-mix(in srgb, var(--palette-white) 11%, var(--hero-flag-field)); /* ripple sheen */ --hero-flag-field-dark: color-mix(in srgb, var(--palette-charcoal) 14%, var(--hero-flag-field)); --hero-flag-gold: #FFCD00; --hero-flag-blue: #05C3DE; --hero-flag-ink: #1A1A1A; --hero-flag-face: #F2C4B0; --hero-flag-hair: #F3EFE4; --hero-flag-pole: color-mix(in srgb, var(--palette-charcoal) 48%, var(--palette-stone)); --hero-highlight-from: var(--palette-mint); --hero-highlight-to: var(--palette-mist); /* Accessibility control (a11y.css): floating button, switches, backdrop */ --a11y-fab-bg: var(--palette-forest); --a11y-fab-bg-hover: var(--palette-pine); --a11y-fab-border: var(--palette-white); --a11y-fab-text: var(--palette-white); --a11y-fab-ring: var(--palette-pine); --a11y-dot: var(--palette-mint); --a11y-switch-off: color-mix(in srgb, var(--palette-charcoal) 58%, var(--palette-white)); /* 3.5:1 on white */ --a11y-switch-on: var(--palette-forest); --a11y-knob: var(--palette-white); --a11y-glyph: var(--palette-white); --a11y-backdrop: color-mix(in srgb, var(--palette-charcoal) 45%, transparent); /* Dialogs (styles.css .modal) */ --color-backdrop: color-mix(in srgb, var(--palette-charcoal) 55%, transparent); /* Shadows */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--palette-charcoal) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--palette-charcoal) 5%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--palette-charcoal) 7%, transparent), 0 12px 32px color-mix(in srgb, var(--palette-charcoal) 8%, transparent); --shadow-lg: 0 8px 24px color-mix(in srgb, var(--palette-charcoal) 10%, transparent), 0 24px 64px color-mix(in srgb, var(--palette-charcoal) 12%, transparent); --shadow-chrome: 0 6px 28px color-mix(in srgb, var(--palette-charcoal) 30%, transparent); --shadow-drawer: 0 24px 48px color-mix(in srgb, var(--palette-charcoal) 40%, transparent); } /* 3. BUTTONS — global button properties ===================================== Every button on the public site and in the staff portal is a .btn, and takes ALL of its styling from these properties — nothing button-related is hard-coded in styles.css. Change a value here and every button follows. Variants .btn--primary filled — the main action in a region .btn--secondary outline — every other action .btn--danger outline in the error color — destructive actions Modifiers .btn--sm .btn--block (full width) .btn--icon (square) A