/* ================================================================ Themes — nature-photography palette set. The default is "nature" (defined in style.css); these blocks override CSS variables when [data-theme] is set on . ================================================================ */ /* 1. Nature — soft daylight (DEFAULT). Defined in style.css. Re-declared here so it can also be picked from the menu. */ [data-theme="nature"] { --bg: #f5f3ee; --bg-soft: #ffffff; --bg-strong: #ece7dc; --fg: #1d2420; --fg-soft: #5b6660; --fg-dim: #8a948e; --accent: #5a6f4f; --accent-2: #a87a4b; --border: #e3ddcf; --border-strong: #d2cab8; } /* 2. Forêt — deep dark green/brown for moody wildlife work */ [data-theme="forest"] { --bg: #0e1411; --bg-soft: #161d18; --bg-strong: #1d2722; --fg: #ece7d8; --fg-soft: #aab1a6; --fg-dim: #6f7a72; --accent: #a4c08a; --accent-2: #d6a678; --border: #232c26; --border-strong: #313c34; } [data-theme="forest"] .album-card .cover::after { background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 40%); } [data-theme="forest"] .tile-caption { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.30) 60%, transparent 100%); } [data-theme="forest"] .brand-mark { background: var(--accent); } /* 3. Brume — high-key, foggy mountain whites */ [data-theme="mist"] { --bg: #f7f8f7; --bg-soft: #ffffff; --bg-strong: #e9eceb; --fg: #2a3132; --fg-soft: #6b7575; --fg-dim: #98a1a0; --accent: #4d6d7d; --accent-2: #b08b6c; --border: #e3e7e6; --border-strong: #cdd3d1; } /* 4. Ardoise — slate / mineral, for landscape rock work */ [data-theme="slate"] { --bg: #1b1f22; --bg-soft: #232931; --bg-strong: #2b323a; --fg: #e9ecef; --fg-soft: #aab2bc; --fg-dim: #6f7a86; --accent: #c9a26a; --accent-2: #6d8da6; --border: #2c333a; --border-strong: #3a424b; } [data-theme="slate"] .tile-caption { background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); } /* 5. Sable — desert / golden hour warm beige */ [data-theme="sand"] { --bg: #f4ede0; --bg-soft: #ffffff; --bg-strong: #e9dec9; --fg: #2c2418; --fg-soft: #6b5a3e; --fg-dim: #998d72; --accent: #b06d2b; --accent-2: #6b8a4d; --border: #ddd1b3; --border-strong: #c8b88f; } /* 6. Ornitho — clean white with vivid blue accent (birding lookbook) */ [data-theme="ornitho"] { --bg: #ffffff; --bg-soft: #f6f7f9; --bg-strong: #ecedf0; --fg: #15191e; --fg-soft: #51596b; --fg-dim: #8b95a3; --accent: #1f5e96; --accent-2: #c2643b; --border: #e6e8ec; --border-strong: #cfd3da; --radius: 0px; /* even more austere */ } /* ---------------------------------------------------------------- Theme switcher control (pill in the header) ---------------------------------------------------------------- */ .theme-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; } .theme-switch button { background: transparent; border: 1px solid var(--border-strong); color: var(--fg-soft); padding: 6px 12px; border-radius: 999px; font-size: 0.74em; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color 0.15s, color 0.15s; } .theme-switch > button:hover { color: var(--fg); border-color: var(--fg-dim); } .theme-switch > button .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 1px solid var(--border-strong); } .theme-menu { position: absolute; top: calc(100% + 10px); right: 0; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; display: none; min-width: 200px; z-index: 60; box-shadow: 0 16px 40px rgba(20,28,22,0.12); } .theme-menu.open { display: block; } .theme-menu button { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 0; color: var(--fg); padding: 9px 10px; text-align: left; font-size: 0.92em; border-radius: 3px; cursor: pointer; letter-spacing: 0; text-transform: none; } .theme-menu button:hover { background: var(--bg-strong); } .theme-menu button .swatch { width: 28px; height: 16px; border-radius: 2px; border: 1px solid var(--border-strong); position: relative; overflow: hidden; } .theme-menu button .swatch::after { content: ""; position: absolute; inset: 0; background: var(--swatch-accent, transparent); width: 30%; right: 0; left: auto; } .theme-menu button.is-active { color: var(--accent); font-weight: 500; } .theme-menu button.is-active::after { content: "•"; margin-left: auto; color: var(--accent); }