/* Ten Utah-inspired site style ideas — switch with data-theme on */ html[data-theme="red-rock"] { --ink: #f6ebe0; --muted: #c4b0a0; --bg: #140e0c; --bg-2: #1c1411; --panel: #221814; --green: #5c2e1a; --green-bright: #a85a32; --gold: #d08a4a; --gold-soft: #c77a3a; --gold-deep: #8a4f24; --line: rgba(208, 138, 74, 0.28); --shadow: 0 24px 60px rgba(0, 0, 0, 0.5); --radius: 12px; --font: "Barlow", system-ui, sans-serif; --display: "Archivo Narrow", "Arial Narrow", sans-serif; --script: "Libre Baskerville", Georgia, serif; --btn-ink: #1a1008; --header-bg: rgba(20, 14, 12, 0.88); --gate-scrim: rgba(12, 8, 6, 0.58); --input-bg: #18110e; --glow-a: rgba(168, 90, 50, 0.28); --glow-b: rgba(208, 138, 74, 0.1); --bg-top: #0c0908; --bg-bottom: #1a1210; --theme-label: "Red Rock Mesa"; } html[data-theme="beehive"] { --ink: #eef2f8; --muted: #a7b0c2; --bg: #070b14; --bg-2: #0d1422; --panel: #121a2c; --green: #6e1424; --green-bright: #c4233d; --gold: #c5ceda; --gold-soft: #9aa8bc; --gold-deep: #6b778c; --line: rgba(197, 206, 218, 0.22); --shadow: 0 24px 60px rgba(0, 0, 0, 0.5); --radius: 8px; --font: "DM Sans", system-ui, sans-serif; --display: "Bebas Neue", "Arial Narrow", sans-serif; --script: "Source Serif 4", Georgia, serif; --btn-ink: #0a0e16; --header-bg: rgba(7, 11, 20, 0.9); --gate-scrim: rgba(4, 7, 14, 0.6); --input-bg: #0b1220; --glow-a: rgba(196, 35, 61, 0.22); --glow-b: rgba(197, 206, 218, 0.1); --bg-top: #050812; --bg-bottom: #0c1220; --theme-label: "Beehive Honor"; } html[data-theme="salt-flat"] { --ink: #1c2430; --muted: #5b6676; --bg: #e8edf2; --bg-2: #f4f7fa; --panel: #ffffff; --green: #2a4a63; --green-bright: #3d6f91; --gold: #9a6b2f; --gold-soft: #b8843d; --gold-deep: #6f4c20; --line: rgba(42, 74, 99, 0.18); --shadow: 0 18px 40px rgba(28, 36, 48, 0.12); --radius: 14px; --font: "DM Sans", system-ui, sans-serif; --display: "Source Serif 4", Georgia, serif; --script: "Libre Baskerville", Georgia, serif; --btn-ink: #ffffff; --header-bg: rgba(244, 247, 250, 0.9); --gate-scrim: rgba(28, 36, 48, 0.35); --input-bg: #f7f9fb; --glow-a: rgba(61, 111, 145, 0.16); --glow-b: rgba(154, 107, 47, 0.1); --bg-top: #dfe6ee; --bg-bottom: #f4f7fa; --theme-label: "Salt Flat Day"; } html[data-theme="pine-valley"] { --ink: #13261c; --muted: #4d6557; --bg: #eef6f1; --bg-2: #f7fbf8; --panel: #ffffff; --green: #1f5c3d; --green-bright: #2f8a58; --gold: #2a6f9a; --gold-soft: #3d88b5; --gold-deep: #1a4f70; --line: rgba(31, 92, 61, 0.18); --shadow: 0 18px 42px rgba(19, 38, 28, 0.1); --radius: 20px; --font: "Outfit", system-ui, sans-serif; --display: "Cinzel", Georgia, serif; --script: "Great Vibes", cursive; --btn-ink: #ffffff; --header-bg: rgba(247, 251, 248, 0.92); --gate-scrim: rgba(19, 38, 28, 0.32); --input-bg: #f4faf6; --glow-a: rgba(47, 138, 88, 0.18); --glow-b: rgba(61, 136, 181, 0.12); --bg-top: #ddece3; --bg-bottom: #f7fbf8; --theme-label: "Pine Valley"; } /* —— New Utah looks —— */ html[data-theme="arches"] { --ink: #fff4ec; --muted: #d4b5a4; --bg: #1a0f18; --bg-2: #241520; --panel: #2c1a28; --green: #8a3a28; --green-bright: #e06a3a; --gold: #f0a45a; --gold-soft: #e8884a; --gold-deep: #a85828; --line: rgba(240, 164, 90, 0.28); --shadow: 0 24px 60px rgba(0, 0, 0, 0.5); --radius: 16px; --font: "Outfit", system-ui, sans-serif; --display: "Cinzel", Georgia, serif; --script: "Great Vibes", cursive; --btn-ink: #1a0c08; --header-bg: rgba(26, 15, 24, 0.9); --gate-scrim: rgba(14, 8, 12, 0.6); --input-bg: #1e121c; --glow-a: rgba(224, 106, 58, 0.28); --glow-b: rgba(120, 60, 110, 0.22); --bg-top: #120a14; --bg-bottom: #22141f; --theme-label: "Arches Sunset"; } html[data-theme="zion"] { --ink: #e8f6ef; --muted: #8fb5a0; --bg: #061410; --bg-2: #0a1c16; --panel: #0f241c; --green: #145c48; --green-bright: #2aa878; --gold: #c9b06a; --gold-soft: #b89a52; --gold-deep: #7a682e; --line: rgba(42, 168, 120, 0.25); --shadow: 0 24px 60px rgba(0, 0, 0, 0.5); --radius: 10px; --font: "Barlow", system-ui, sans-serif; --display: "Archivo Narrow", "Arial Narrow", sans-serif; --script: "Libre Baskerville", Georgia, serif; --btn-ink: #061410; --header-bg: rgba(6, 20, 16, 0.9); --gate-scrim: rgba(3, 12, 9, 0.6); --input-bg: #0a1814; --glow-a: rgba(42, 168, 120, 0.22); --glow-b: rgba(201, 176, 106, 0.1); --bg-top: #040e0b; --bg-bottom: #0c1e18; --theme-label: "Zion Narrows"; } html[data-theme="uinta"] { --ink: #e8e4f4; --muted: #9a94b0; --bg: #07060e; --bg-2: #0e0c18; --panel: #141222; --green: #3a2a6e; --green-bright: #6a4ec8; --gold: #e0b45a; --gold-soft: #c99a40; --gold-deep: #8a6820; --line: rgba(224, 180, 90, 0.22); --shadow: 0 24px 60px rgba(0, 0, 0, 0.55); --radius: 6px; --font: "DM Sans", system-ui, sans-serif; --display: "Bebas Neue", "Arial Narrow", sans-serif; --script: "Source Serif 4", Georgia, serif; --btn-ink: #0a0812; --header-bg: rgba(7, 6, 14, 0.92); --gate-scrim: rgba(3, 2, 8, 0.65); --input-bg: #0c0a16; --glow-a: rgba(106, 78, 200, 0.2); --glow-b: rgba(224, 180, 90, 0.12); --bg-top: #04030a; --bg-bottom: #100e1c; --theme-label: "Uinta Dark Sky"; } html[data-theme="golden-spike"] { --ink: #ece7dc; --muted: #a89f90; --bg: #12110f; --bg-2: #1a1916; --panel: #22201b; --green: #4a4030; --green-bright: #8a7860; --gold: #d4a84a; --gold-soft: #c09438; --gold-deep: #7a5e1c; --line: rgba(212, 168, 74, 0.28); --shadow: 0 24px 50px rgba(0, 0, 0, 0.5); --radius: 4px; --font: "Barlow", system-ui, sans-serif; --display: "Archivo Narrow", "Arial Narrow", sans-serif; --script: "Libre Baskerville", Georgia, serif; --btn-ink: #14120c; --header-bg: rgba(18, 17, 15, 0.92); --gate-scrim: rgba(8, 7, 6, 0.6); --input-bg: #161410; --glow-a: rgba(138, 120, 96, 0.2); --glow-b: rgba(212, 168, 74, 0.12); --bg-top: #0c0b0a; --bg-bottom: #1a1814; --theme-label: "Golden Spike"; } html[data-theme="seagull-shore"] { --ink: #1a2a32; --muted: #5a6e78; --bg: #e6eef2; --bg-2: #f3f7f9; --panel: #ffffff; --green: #3a6a78; --green-bright: #4a8a9a; --gold: #c47a3a; --gold-soft: #d49252; --gold-deep: #8a5424; --line: rgba(58, 106, 120, 0.18); --shadow: 0 16px 36px rgba(26, 42, 50, 0.1); --radius: 18px; --font: "Outfit", system-ui, sans-serif; --display: "Source Serif 4", Georgia, serif; --script: "Great Vibes", cursive; --btn-ink: #ffffff; --header-bg: rgba(243, 247, 249, 0.92); --gate-scrim: rgba(26, 42, 50, 0.3); --input-bg: #f5f9fb; --glow-a: rgba(74, 138, 154, 0.16); --glow-b: rgba(196, 122, 58, 0.1); --bg-top: #d8e4ea; --bg-bottom: #f3f7f9; --theme-label: "Seagull Shore"; } /* Theme picker chrome */ .theme-picker { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; max-width: min(520px, 100%); } .theme-picker-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .theme-picker select { appearance: none; border: 1px solid var(--line); background-color: var(--panel); color: var(--ink); border-radius: 999px; padding: 0.35rem 1.8rem 0.35rem 0.75rem; font: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; min-height: 34px; max-width: min(240px, 62vw); } .theme-picker select:focus { outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: 2px; } .theme-swatches { display: flex; flex-wrap: wrap; gap: 0.28rem; align-items: center; max-width: 220px; } .theme-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); } .theme-swatch[data-theme="wasatch-night"] { background: linear-gradient(135deg, #1a3d2a, #d4b24a); } .theme-swatch[data-theme="red-rock"] { background: linear-gradient(135deg, #5c2e1a, #d08a4a); } .theme-swatch[data-theme="beehive"] { background: linear-gradient(135deg, #0d1422, #c4233d 55%, #c5ceda); } .theme-swatch[data-theme="salt-flat"] { background: linear-gradient(135deg, #e8edf2, #2a4a63 55%, #9a6b2f); } .theme-swatch[data-theme="pine-valley"] { background: linear-gradient(135deg, #eef6f1, #2f8a58 50%, #2a6f9a); } .theme-swatch[data-theme="arches"] { background: linear-gradient(135deg, #1a0f18, #e06a3a 50%, #f0a45a); } .theme-swatch[data-theme="zion"] { background: linear-gradient(135deg, #061410, #2aa878 55%, #c9b06a); } .theme-swatch[data-theme="uinta"] { background: linear-gradient(135deg, #07060e, #6a4ec8 50%, #e0b45a); } .theme-swatch[data-theme="golden-spike"] { background: linear-gradient(135deg, #12110f, #8a7860 45%, #d4a84a); } .theme-swatch[data-theme="seagull-shore"] { background: linear-gradient(135deg, #e6eef2, #4a8a9a 50%, #c47a3a); } .theme-swatch.is-active { outline: 2px solid var(--gold); outline-offset: 2px; } .theme-swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Light-theme readability tweaks */ html[data-theme="salt-flat"] .site-nav, html[data-theme="pine-valley"] .site-nav, html[data-theme="seagull-shore"] .site-nav { background: var(--panel); } html[data-theme="salt-flat"] .bg-grain, html[data-theme="pine-valley"] .bg-grain, html[data-theme="seagull-shore"] .bg-grain { opacity: 0.04; } html[data-theme="salt-flat"] .nav-cta, html[data-theme="pine-valley"] .nav-cta, html[data-theme="seagull-shore"] .nav-cta, html[data-theme="salt-flat"] .btn-gold, html[data-theme="pine-valley"] .btn-gold, html[data-theme="seagull-shore"] .btn-gold { color: var(--btn-ink) !important; } html[data-theme="beehive"] .brand-script, html[data-theme="uinta"] .brand-script { font-family: var(--script); font-style: italic; font-size: 0.95rem; } html[data-theme="red-rock"] .brand-script, html[data-theme="golden-spike"] .brand-script { font-family: var(--script); font-style: italic; font-size: 0.92rem; } html[data-theme="salt-flat"] .hero-title, html[data-theme="pine-valley"] .hero-title, html[data-theme="seagull-shore"] .hero-title { color: var(--ink); } @media (max-width: 720px) { .theme-picker-label { display: none; } .theme-swatches { display: none; } }