/** * BiyoSoil Gold Master - Theme System * * Auto-detects OS/browser preference via prefers-color-scheme. * Manual override via data-theme attribute on . * User choice persisted in localStorage('biyosoil-theme'). * * Architecture: * :root → Dark Theme (official default) * [data-theme="light"] → Light Theme * prefers-color-scheme: light → Auto-detection (when no manual override) */ /* ═══════════════════════════════════════════════════════════ DARK THEME TOKENS (Default / Official) ═══════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* Gold accent — space-separated RGB for Tailwind alpha support */ --gold-rgb: 199 160 72; --gold-light-rgb: 212 181 90; --gold-dark-rgb: 184 148 62; /* Semantic gold */ --gold: rgb(var(--gold-rgb)); --gold-light: rgb(var(--gold-light-rgb)); --gold-dark: rgb(var(--gold-dark-rgb)); /* Backgrounds */ --bg-body-start: #0a0a0a; --bg-body-mid: #050505; --bg-body-end: #0a0a0a; --bg-primary: #0a0a0a; --bg-elevated: #000000; /* Body ambient gradient alphas */ --ambient-gold-alpha: 0.15; --ambient-green-alpha: 0.15; --ambient-gold-soft-alpha: 0.08; --ambient-glow-alpha: 0.10; /* Text */ --text-primary: #ededed; --text-secondary: rgba(255, 255, 255, 0.68); --text-tertiary: rgba(255, 255, 255, 0.58); --text-faint: rgba(255, 255, 255, 0.42); /* Borders */ --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.18); --border-subtle: rgba(255, 255, 255, 0.10); --border-section: #171717; --border-header: #262626; /* Surfaces & Glass */ --surface-start: rgba(255, 255, 255, 0.03); --surface-end: rgba(255, 255, 255, 0.01); --surface-strong-start: rgba(255, 255, 255, 0.06); --surface-strong-end: rgba(255, 255, 255, 0.02); --glass-start: rgba(255, 255, 255, 0.08); --glass-end: rgba(255, 255, 255, 0.03); --glass-highlight: rgba(255, 255, 255, 0.15); --glass-highlight-soft: rgba(255, 255, 255, 0.12); --glass-shimmer: rgba(255, 255, 255, 0.08); /* Shadows */ --shadow-surface: 0 4px 24px rgba(0, 0, 0, 0.3); --shadow-surface-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-strong-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgb(var(--gold-rgb) / 0.05); --shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 16px rgb(var(--gold-rgb) / 0.15); --shadow-light: 0 4px 16px rgba(0, 0, 0, 0.2); --shadow-chip: 0 2px 8px rgba(0, 0, 0, 0.2); /* Hover lift */ --hover-lift-shadow: 0 12px 40px rgb(var(--gold-rgb) / 0.15), 0 4px 16px rgba(0, 0, 0, 0.3); --hover-lift-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); /* Buttons */ --btn-primary-shadow: 0 4px 16px rgb(var(--gold-rgb) / 0.3); --btn-primary-shadow-hover: 0 8px 24px rgb(var(--gold-rgb) / 0.4), 0 4px 12px rgb(var(--gold-rgb) / 0.3); --btn-primary-inset-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.2); --btn-primary-inset-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2); --btn-shimmer: rgba(255, 255, 255, 0.3); /* CTA */ --cta-bg-start: rgba(255, 255, 255, 0.08); --cta-bg-end: rgba(255, 255, 255, 0.03); --cta-border: rgba(255, 255, 255, 0.2); --cta-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.15); --cta-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Overlays */ --overlay-menu: rgba(0, 0, 0, 0.95); --veil-bg: rgba(0, 0, 0, 0.9); /* Header */ --header-bg-start: rgba(10, 10, 10, 0.95); --header-bg-end: rgba(5, 5, 5, 0.9); --header-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --header-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); /* Mobile menu */ --menu-bg: rgba(0, 0, 0, 0.98); --menu-ambient-gold: rgba(199, 160, 72, 0.1); --menu-ambient-green: rgba(47, 77, 46, 0.1); --menu-shadow: 2px 0 20px rgba(0, 0, 0, 0.5); /* Section overlays */ --section-overlay-from: rgba(0, 0, 0, 0.90); --section-overlay-via: rgba(0, 0, 0, 0.85); --section-overlay-to: rgba(0, 0, 0, 0.90); /* Scroll indicator */ --scroll-glow: rgb(var(--gold-rgb) / 0.6); --scroll-glow-soft: rgb(var(--gold-rgb) / 0.3); --scroll-tip: rgba(255, 255, 255, 0.6); /* Logo */ --logo-brightness: 1.1; --logo-brightness-hover: 1.2; --logo-shadow: drop-shadow(0 2px 8px rgb(var(--gold-rgb) / 0.3)); --logo-shadow-hover: drop-shadow(0 4px 12px rgb(var(--gold-rgb) / 0.5)); /* Focus & selection */ --focus-ring: rgb(var(--gold-rgb) / 0.6); --selection-bg: rgb(var(--gold-rgb) / 0.3); --selection-color: #ffffff; /* Misc */ --line-soft-bg: rgba(255, 255, 255, 0.2); --bg-subtle: rgba(255, 255, 255, 0.05); --hover-bg-subtle: rgba(255, 255, 255, 0.05); --dot-pattern-alpha: 0.2; --dot-pattern-opacity: 0.05; --divider-color: rgb(var(--gold-rgb) / 0.5); --divider-glow: rgb(var(--gold-rgb) / 0.8); --divider-shadow: 0 0 12px rgb(var(--gold-rgb) / 0.6); --footer-bg: #000000; --footer-overlay-start: #000000; --footer-overlay-mid: rgba(0, 0, 0, 0.95); --scrollbar-thumb: rgb(var(--gold-rgb) / 0.3); --tag-bg: rgba(255, 255, 255, 0.05); --scroll-btn-shadow: 0 4px 20px rgb(var(--gold-rgb) / 0.4); --hero-overlay: linear-gradient(to top, rgba(0,0,0,0.7), transparent, rgba(0,0,0,0.3)); --float-shadow-lg: 0 0 12px rgb(var(--gold-rgb) / 0.4); --float-shadow-sm: 0 0 8px rgb(var(--gold-rgb) / 0.5); --float-shadow-md: 0 0 10px rgb(var(--gold-rgb) / 0.45); } /* ═══════════════════════════════════════════════════════════ LIGHT THEME TOKENS ═══════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; /* Gold — darker for WCAG AA on light bg (#8B7029 = 4.85:1 on #f8f7f4) */ --gold-rgb: 139 112 41; --gold-light-rgb: 184 148 62; --gold-dark-rgb: 122 98 36; /* Backgrounds */ --bg-body-start: #f8f7f4; --bg-body-mid: #f4f1ea; --bg-body-end: #f8f7f4; --bg-primary: #f8f7f4; --bg-elevated: #ffffff; /* Ambient */ --ambient-gold-alpha: 0.06; --ambient-green-alpha: 0.05; --ambient-gold-soft-alpha: 0.03; --ambient-glow-alpha: 0.04; /* Text */ --text-primary: #1a1a1a; --text-secondary: rgba(0, 0, 0, 0.62); --text-tertiary: rgba(0, 0, 0, 0.52); --text-faint: rgba(0, 0, 0, 0.38); /* Borders */ --border-default: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.15); --border-subtle: rgba(0, 0, 0, 0.07); --border-section: #e5e1d8; --border-header: #ddd9d0; /* Surfaces & Glass — frosted on light */ --surface-start: rgba(255, 255, 255, 0.60); --surface-end: rgba(255, 255, 255, 0.40); --surface-strong-start: rgba(255, 255, 255, 0.70); --surface-strong-end: rgba(255, 255, 255, 0.50); --glass-start: rgba(255, 255, 255, 0.70); --glass-end: rgba(255, 255, 255, 0.50); --glass-highlight: rgba(255, 255, 255, 0.90); --glass-highlight-soft: rgba(255, 255, 255, 0.70); --glass-shimmer: rgba(255, 255, 255, 0.50); /* Shadows — softer, natural */ --shadow-surface: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-surface-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.8); --shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.08); --shadow-strong-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.9); --shadow-glass: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgb(var(--gold-rgb) / 0.04); --shadow-glass-hover: 0 8px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgb(var(--gold-rgb) / 0.08); --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-chip: 0 1px 4px rgba(0, 0, 0, 0.06); /* Hover lift */ --hover-lift-shadow: 0 8px 30px rgb(var(--gold-rgb) / 0.10), 0 4px 12px rgba(0, 0, 0, 0.06); --hover-lift-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.8); /* Buttons */ --btn-primary-shadow: 0 2px 8px rgb(var(--gold-rgb) / 0.25); --btn-primary-shadow-hover: 0 4px 16px rgb(var(--gold-rgb) / 0.35), 0 2px 8px rgb(var(--gold-rgb) / 0.25); --btn-primary-inset-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.3); --btn-primary-inset-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.15); --btn-shimmer: rgba(255, 255, 255, 0.4); /* CTA */ --cta-bg-start: rgba(0, 0, 0, 0.04); --cta-bg-end: rgba(0, 0, 0, 0.02); --cta-border: rgba(0, 0, 0, 0.12); --cta-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); --cta-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Overlays */ --overlay-menu: rgba(0, 0, 0, 0.40); --veil-bg: rgba(248, 247, 244, 0.95); /* Header */ --header-bg-start: rgba(248, 247, 244, 0.95); --header-bg-end: rgba(240, 237, 230, 0.92); --header-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); --header-inset: inset 0 -1px 0 0 rgba(0, 0, 0, 0.06); /* Mobile menu */ --menu-bg: rgba(248, 247, 244, 0.98); --menu-ambient-gold: rgba(199, 160, 72, 0.04); --menu-ambient-green: rgba(47, 77, 46, 0.03); --menu-shadow: 2px 0 12px rgba(0, 0, 0, 0.08); /* Section overlays */ --section-overlay-from: rgba(248, 247, 244, 0.93); --section-overlay-via: rgba(248, 247, 244, 0.90); --section-overlay-to: rgba(248, 247, 244, 0.93); /* Scroll indicator */ --scroll-glow: rgb(var(--gold-rgb) / 0.4); --scroll-glow-soft: rgb(var(--gold-rgb) / 0.2); --scroll-tip: rgba(255, 255, 255, 0.4); /* Logo — invert for light bg */ --logo-brightness: 0.15; --logo-brightness-hover: 0.10; --logo-shadow: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.10)); --logo-shadow-hover: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)); /* Focus & selection */ --focus-ring: rgb(var(--gold-rgb) / 0.5); --selection-bg: rgb(var(--gold-rgb) / 0.20); --selection-color: #1a1a1a; /* Misc */ --line-soft-bg: rgba(0, 0, 0, 0.12); --bg-subtle: rgba(0, 0, 0, 0.03); --hover-bg-subtle: rgba(0, 0, 0, 0.04); --dot-pattern-alpha: 0.15; --dot-pattern-opacity: 0.08; --divider-color: rgb(var(--gold-rgb) / 0.35); --divider-glow: rgb(var(--gold-rgb) / 0.6); --divider-shadow: 0 0 8px rgb(var(--gold-rgb) / 0.4); --footer-bg: #f0ede6; --footer-overlay-start: #f0ede6; --footer-overlay-mid: rgba(240, 237, 230, 0.98); --scrollbar-thumb: rgb(var(--gold-rgb) / 0.25); --tag-bg: rgba(0, 0, 0, 0.04); --scroll-btn-shadow: 0 2px 12px rgb(var(--gold-rgb) / 0.3); --hero-overlay: linear-gradient(to top, rgba(0,0,0,0.5), transparent, rgba(0,0,0,0.15)); --float-shadow-lg: 0 0 8px rgb(var(--gold-rgb) / 0.25); --float-shadow-sm: 0 0 6px rgb(var(--gold-rgb) / 0.3); --float-shadow-md: 0 0 7px rgb(var(--gold-rgb) / 0.28); } /* ═══════════════════════════════════════════════════════════ THEME TRANSITION Applied after page load to prevent FOUC. Toggled via JS: html.classList.add('theme-transition') ═══════════════════════════════════════════════════════════ */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, fill 0.35s ease, stroke 0.35s ease, filter 0.35s ease !important; transition-delay: 0s !important; } /* ═══════════════════════════════════════════════════════════ LIGHT THEME — Structural Overrides Override hardcoded Tailwind utilities on structural elements. Specificity [attr]+.class (0-2-0) beats Tailwind (0-1-0). ═══════════════════════════════════════════════════════════ */ /* ---- HTML root ---- */ html[data-theme="light"] { background-color: var(--bg-primary); color: var(--text-primary); } /* ---- Body ---- */ [data-theme="light"] body { background-color: var(--bg-body-start); } /* ---- Sections ---- */ [data-theme="light"] section { background-color: var(--bg-primary); } [data-theme="light"] footer { background-color: var(--footer-bg); } /* Hero video overlay — keep darker for video legibility */ [data-theme="light"] #hero .absolute.inset-0.pointer-events-none { background: var(--hero-overlay) !important; } /* ---- Text color overrides ---- */ [data-theme="light"] .text-white { color: var(--text-primary); } /* Preserve text colors on colored backgrounds */ [data-theme="light"] .btn-primary, [data-theme="light"] .btn-primary .text-white, [data-theme="light"] a.btn-primary.text-white, [data-theme="light"] a.btn-primary { color: #ffffff; } /* Scroll-to-top stays dark text on gold bg */ [data-theme="light"] #scrollToTop { color: #000000; } /* White with opacity → dark equivalent */ [data-theme="light"] .text-white\/80 { color: rgba(0, 0, 0, 0.72); } [data-theme="light"] .text-white\/90 { color: rgba(0, 0, 0, 0.82); } [data-theme="light"] .text-white\/70 { color: rgba(0, 0, 0, 0.62); } /* Hero text stays white (on video) */ [data-theme="light"] #hero .text-white { color: #ffffff; } [data-theme="light"] #hero .text-white\/80 { color: rgba(255, 255, 255, 0.80); } /* ---- Border overrides ---- */ [data-theme="light"] .border-neutral-900 { border-color: var(--border-section); } [data-theme="light"] .border-neutral-800 { border-color: var(--border-header); } [data-theme="light"] .border-white\/10 { border-color: var(--border-subtle); } [data-theme="light"] .border-white\/5 { border-color: rgba(0, 0, 0, 0.04); } /* ---- Background opacity overrides ---- */ [data-theme="light"] .bg-white\/5 { background-color: var(--bg-subtle); } [data-theme="light"] .hover\:bg-white\/5:hover { background-color: var(--hover-bg-subtle); } [data-theme="light"] .bg-black\/5 { background-color: rgba(0, 0, 0, 0.05); } /* ---- Drop shadow on hero text ---- */ [data-theme="light"] #hero .drop-shadow-lg { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15)); } [data-theme="light"] #hero .drop-shadow-md { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); } /* ═══════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ═══════════════════════════════════════════════════════════ */ .theme-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-default); background-color: var(--glass-start); cursor: pointer; transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } .theme-toggle:hover { border-color: rgb(var(--gold-rgb) / 0.35); } .theme-toggle svg { width: 18px; height: 18px; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* Sun icon (shown in dark mode → "switch to light") */ .theme-toggle .icon-sun { color: var(--gold); } /* Moon icon (shown in light mode → "switch to dark") */ .theme-toggle .icon-moon { color: var(--gold); position: absolute; } /* Dark mode: show sun, hide moon */ :root .theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg); } :root .theme-toggle .icon-moon, [data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* Light mode: show moon, hide sun */ [data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); }