/* ============================================================ KEELZA THEME ------------------------------------------------------------ Two palettes in one place. Default = Keel Navy + Marigold. Add data-palette="green" on to switch to the original green (the on-page toggle does this and remembers your choice). To make ONE the permanent default, delete the toggle script tags from the pages and keep whichever :root block you want. ============================================================ */ /* ---------- Default: Keel Navy + Marigold ---------- */ :root { --paper: #FBF8F2; --paper-2: #EFE9DD; --ink: #12202F; --ink-soft: #33404E; --muted: #66707B; --green: #23507E; /* primary accent (navy-blue) — buttons, links */ --green-deep: #0E2135; /* dark grounds — firms lane, bands */ --green-ink: #23507E; /* accent text on paper */ --green-tint: #E7EDF5; /* faint wash / hovers / hero glow */ --marigold: #E8A11C; /* character pop */ --brass: #E8A11C; --hairline: #E7E1D4; --line: #D5CDBD; --on-dark: #F4F0E7; --on-dark-mut:#9EB2C8; } /* marigold pops (navy palette) */ .topline { background: var(--marigold); } .tier.feat { border-color: var(--marigold); box-shadow: 0 1px 2px rgba(18,32,47,.05), 0 24px 48px -20px rgba(232,161,28,.5); } .word .bead { background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='16'%20cy='9'%20r='3.7'%20fill='%23E8A11C'/%3E%3Cpath%20d='M5%2014.5Q16%2029%2027%2014.5'%20fill='none'%20stroke='%2323507E'%20stroke-width='3.7'%20stroke-linecap='round'/%3E%3C/svg%3E"); } /* more light/dark rhythm on scroll: give the platform band a wash */ .platform { background: var(--paper-2); } /* ---------- Alternate: original Green ---------- */ :root[data-palette="green"] { --paper: #FBFAF7; --paper-2: #F2F1EC; --ink: #1B231F; --ink-soft: #39443D; --muted: #6A736C; --green: #1E6B52; --green-deep: #123D2E; --green-ink: #16523F; --green-tint: #E9F0EB; --marigold: #1E6B52; --brass: #C1912F; --hairline: #E4E3DC; --line: #D2D1C7; --on-dark: #F1EFE8; --on-dark-mut:#9DB0A5; } :root[data-palette="green"] .topline { background: var(--green); } :root[data-palette="green"] .tier.feat { border-color: var(--green); box-shadow: 0 1px 2px rgba(27,35,31,.04), 0 24px 48px -20px rgba(30,107,82,.35); } :root[data-palette="green"] .word .bead { background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='16'%20cy='9'%20r='3.7'%20fill='%231E6B52'/%3E%3Cpath%20d='M5%2014.5Q16%2029%2027%2014.5'%20fill='none'%20stroke='%231E6B52'%20stroke-width='3.7'%20stroke-linecap='round'/%3E%3C/svg%3E"); } :root[data-palette="green"] .platform { background: transparent; } /* ---------- palette toggle button ---------- */ #palette-toggle { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 8px 22px -10px rgba(0,0,0,.3); } #palette-toggle::before { content:""; display:inline-block; width:0.7rem; height:0.7rem; border-radius:50%; background: var(--marigold); margin-right:0.45rem; vertical-align:-1px; }