/* ===== THEME — the one config for colors, fonts, and buttons ===== Loaded before style.css (public) and admin.css (admin); both layouts inherit everything here. DIALS — each is a one-line change: · color-scheme — `light` | `dark` flips the whole site; `light dark` follows the visitor's OS setting. This is only the baseline: the sun/moon nav toggle overrides it per visitor by setting `color-scheme` on and persisting a `theme` cookie the server reads back on the next request. · --btn-radius — 100px = pill buttons, 8px = boxy buttons. */ :root { color-scheme: light dark; /* DIAL 1: light | dark | light dark (baseline; nav toggle overrides) */ --btn-radius: 100px; /* DIAL 2: 100px = pill, 8px = boxy */ /* Brand palette — identical in both schemes */ --green-deep: #1a5632; --green-mid: #2d7a4f; --green-light: #4a9e6e; --blue-mid: #2a6496; --gold: #d4a843; --gold-light: #e8c96a; --orange: #e8882a; --red: #c0392b; --mtn-yellow: #ffcc00; --mtn-yellow-deep: #f0be00; --white: #ffffff; /* text/icons on dark brand sections — never a surface */ --dark: #1a1a1a; /* footer bg + text on gold — never flips */ /* Scheme-aware tokens — light values; dark pairs in the block below */ --surface: #ffffff; /* page background */ --surface-card: #ffffff; /* cards, panels, inputs */ --surface-dim: #f5f6fa; /* dimmed app background (admin shell) */ --sand: #f7f2e8; --sand-light: #faf8f2; --ink-strong: #1a1a1a; /* headings, strong text */ --text: #3a3a3a; --text-light: #6b6b6b; --text-muted: #888888; --line: #e4e4e4; /* borders, dividers */ --nav-bg: rgba(255, 255, 255, 0.95); /* Status tints — paired bg/fg for badges, status pills, alerts. The dark pairs use translucent fills so they read as tinted rows, not light patches. */ --tint-green-bg: #e8f5e9; --tint-green-fg: #2d7a4f; --tint-blue-bg: #e3f2fd; --tint-blue-fg: #1565c0; --tint-orange-bg: #fff3e0; --tint-orange-fg: #e65100; --tint-red-bg: #ffebee; --tint-red-fg: #c0392b; /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Playfair Display', Georgia, serif; /* Shape */ --radius: 12px; } /* Dark values — activated by the color-scheme dial above. Browsers without light-dark() keep the plain light values from :root. */ @supports (color: light-dark(#000, #fff)) { :root { --surface: light-dark(#ffffff, #171511); --surface-card: light-dark(#ffffff, #211e18); --sand: light-dark(#f7f2e8, #262219); --sand-light: light-dark(#faf8f2, #1c1915); --ink-strong: light-dark(#1a1a1a, #f3f0e8); --text: light-dark(#3a3a3a, #d8d4ca); --text-light: light-dark(#6b6b6b, #a39e92); --text-muted: light-dark(#888888, #8a857a); --line: light-dark(#e4e4e4, #38342c); --nav-bg: light-dark(rgba(255, 255, 255, 0.95), rgba(23, 21, 17, 0.92)); --surface-dim: light-dark(#f5f6fa, #15140f); --tint-green-bg: light-dark(#e8f5e9, rgba(74, 158, 110, 0.18)); --tint-green-fg: light-dark(#2d7a4f, #7fc79b); --tint-blue-bg: light-dark(#e3f2fd, rgba(91, 164, 217, 0.18)); --tint-blue-fg: light-dark(#1565c0, #8fc3ef); --tint-orange-bg: light-dark(#fff3e0, rgba(232, 136, 42, 0.18)); --tint-orange-fg: light-dark(#e65100, #f0a85f); --tint-red-bg: light-dark(#ffebee, rgba(192, 57, 43, 0.22)); --tint-red-fg: light-dark(#c0392b, #e88b80); } } /* ===== ACCESSIBILITY ===== */ /* Keyboard focus ring — visible for tab navigation, suppressed for mouse clicks (:focus-visible). One rule covers both layouts since theme.css loads first. */ :focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; border-radius: 2px; } /* Skip-to-content link — off-screen until focused, so keyboard users can jump past the nav. Targets the
landmark. */ .skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; padding: 10px 18px; background: var(--green-deep); color: var(--white); border-radius: 8px; font-family: var(--font-body); font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 8px; } /* ===== BUTTONS ===== */ /* Public site */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; border-radius: var(--btn-radius); font-family: var(--font-body); font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all 0.3s; } .btn-primary { background: var(--gold); color: var(--dark); } .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(212,168,67,0.35); } /* Green action button — forms, "give"/"contribute" CTAs. (btn-primary is the gold hero button; this is the recurring secondary action.) */ .btn-green { background: var(--green-mid); color: var(--white); } .btn-green:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,86,50,0.3); } .btn-secondary { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.3); } .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); } /* Admin panel — radius follows the dial, capped so admin stays compact */ .btn-admin { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--green-mid); color: var(--white); border: none; border-radius: min(var(--btn-radius), 8px); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.2s; } .btn-admin:hover { background: var(--green-deep); } .btn-admin.secondary { background: var(--surface-card); color: var(--text); border: 1px solid var(--line); } .btn-admin.secondary:hover { background: var(--surface-dim); } .btn-icon { width: 32px; height: 32px; border: none; border-radius: min(var(--btn-radius), 6px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-dim); color: var(--text-muted); transition: all 0.2s; } .btn-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn-icon.danger:hover { background: var(--tint-red-bg); color: var(--tint-red-fg); }