/* ============================================ ZenOmm - Custom Styles & Tailwind Overrides ============================================ This file contains: 1. ZenOmm theme tokens as CSS variables for BOTH themes (:root = Lavender Dusk / light, default; .dark = Royal Blue) 2. Custom utility classes used across the site 3. Carousel + animation styles Single source of truth for the palette is src/themes/tokens.ts (lavender-dusk + royal-blue). Components consume var(--token) so light/dark switching is a single .dark class toggle on . Load Order: 1. inter-font.css (+ noto-sans-*-font.css) — @font-face declarations 2. tailwind.css (compiled) 3. navigation.css 4. This file (custom-styles.css) ============================================ */ /* =========================================== Theme Tokens — LIGHT (Lavender Dusk, default) =========================================== */ :root { --bg-content: #F0ECFA; --bg-panel: #DDD8EE; --bg-panel-deep: #CCC8E0; --text-primary: #1E1244; --text-secondary: #42306A; --text-on-panel: #2A1860; --accent-primary: #6A4FB8; --accent-secondary: #DDD4F8; --accent-text: #2A1060; --action-primary-text: #FFFFFF; --border-panel: #C4BCDC; --border-default: #DCD8F0; --icon-active: #6A4FB8; --icon-inactive: #9070C8; --focus-ring: rgba(106, 79, 184, 0.38); /* Hero gradient (deepened for >= 4.5:1 white headline contrast) */ --hero-gradient: linear-gradient(135deg, #5B3FA8 0%, #6A4FB8 55%, #7C5FC4 100%); /* Legacy brand aliases (mapped to ZenOmm so .text-primary etc. resolve) */ --color-primary: #6A4FB8; --color-primary-dark: #5B3FA8; --color-secondary: #8B6FD0; --color-accent: #DDD4F8; --color-dark: #132042; --color-light: #F0ECFA; --gradient-start: #6A4FB8; --gradient-end: #7C5FC4; } /* =========================================== Theme Tokens — DARK (Royal Blue) =========================================== */ .dark { --bg-content: #223466; --bg-panel: #1A2954; --bg-panel-deep: #132042; --text-primary: #DCE7FF; --text-secondary: #9AB0E2; --text-on-panel: #D0DEFF; --accent-primary: #86B5FF; --accent-secondary: #2C4784; --accent-text: #E7F0FF; --action-primary-text: #1A2954; --border-panel: #152344; --border-default: #364E88; --icon-active: #91BDFF; --icon-inactive: #6782B2; --focus-ring: rgba(134, 181, 255, 0.38); --hero-gradient: linear-gradient(135deg, #223466 0%, #1A2954 55%, #132042 100%); --color-primary: #86B5FF; --color-primary-dark: #86B5FF; --color-secondary: #9AB0E2; --color-accent: #2C4784; --color-dark: #132042; --color-light: #223466; --gradient-start: #223466; --gradient-end: #132042; } /* =========================================== Dark-mode brand-alias override (shared, Phase 9) --------------------------------------------------------------- Tailwind's @theme emits `:root { --color-primary: #6A4FB8 }` into tailwind.css, which is linked AFTER this file. At equal specificity ((0,1,0) `:root` vs (0,1,0) `.dark`) source order wins, so that late `:root` clobbers the `.dark { --color-primary }` above — leaving Tailwind's static `.text-primary { color: var(--color-primary) }` stuck on the light accent in Royal Blue mode. Phases 4–7 patched this per page with a last-loading `.text-primary` override. This `html.dark` rule ((0,1,1) > (0,1,0)) wins regardless of source order, so the brand aliases flip correctly for EVERY page — including future localized pages — without each one re-declaring the override. The per-page overrides remain harmless (they resolve to the same accent) and may be dropped in a later cleanup. =========================================== */ html.dark { --color-primary: #86B5FF; --color-primary-dark: #86B5FF; } /* =========================================== Base Styles =========================================== */ * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } html { scroll-behavior: smooth; } /* Prevent FOUC (Flash of Unstyled Content) */ body { opacity: 1; transition: opacity 0.1s ease-in; } /* =========================================== Color Utilities (mirror ZenOmm tokens for critical elements) =========================================== */ .bg-primary { background-color: var(--accent-primary); } .bg-secondary { background-color: var(--color-secondary); } .bg-accent { background-color: var(--accent-secondary); } .bg-dark { background-color: var(--color-dark); } .bg-light { background-color: var(--bg-content); } .text-primary { color: var(--accent-primary); } .text-secondary { color: var(--text-secondary); } .text-accent { color: var(--accent-text); } .text-dark { color: var(--text-primary); } .text-light { color: var(--bg-content); } .border-primary { border-color: var(--accent-primary); } .border-secondary { border-color: var(--border-default); } .hover\:bg-primary:hover { background-color: var(--accent-primary); } .hover\:text-primary:hover { color: var(--accent-primary); } /* Focus ring helper */ .focus-ring:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* =========================================== Gradient Utilities =========================================== */ .gradient-bg { background: var(--hero-gradient); } .gradient-text { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* =========================================== Animation Utilities =========================================== */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(30, 18, 68, 0.15); } .dark .hover-lift:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .animate-bounce { animation: bounce 1s infinite; } /* =========================================== Screenshot Carousel Styles =========================================== */ .screenshot-container { position: relative; overflow: hidden; margin: 0 auto; } .carousel-track { display: flex; transition: transform 0.5s ease-in-out; } .carousel-slide { flex-shrink: 0; width: 100%; display: flex; justify-content: center; } /* Carousel dots */ .carousel-dot { background-color: var(--icon-inactive); opacity: 0.5; transition: opacity 0.2s ease, background-color 0.2s ease; } .carousel-dot.active { background-color: var(--accent-primary); opacity: 1; } /* Feature cards */ .feature-card { background-color: var(--bg-panel); border: 1px solid var(--border-panel); color: var(--text-on-panel); } /* =========================================== Dark Mode Support =========================================== */ .dark { color-scheme: dark; } .dark .bg-dark { background-color: var(--color-dark); } /* =========================================== Theme-toggle icon swap (cascade-layer fix) --------------------------------------------------------------- The toggle icons use Tailwind's `dark:hidden` / `hidden dark:inline` utilities, which Tailwind emits inside `@layer utilities`. The homepage's critical inline CSS, however, declares an UNLAYERED `.hidden { display:none }`. Per the CSS cascade, unlayered author rules beat layered ones regardless of source order, so that `.hidden` overrode the layered `dark:inline` and the ☀️ sun icon stayed hidden in dark mode — leaving the theme toggle button visually empty (reported as "Light/Dark mode selector is absent in dark mode"). These id-scoped, unlayered rules restore the swap on every page (markup unchanged) and are defensive against any page that adds a critical `.hidden`. =========================================== */ #theme-toggle .dark\:inline, #theme-toggle-mobile .dark\:inline { display: none; } /* light: hide sun */ .dark #theme-toggle .dark\:inline, .dark #theme-toggle-mobile .dark\:inline { display: inline; } /* dark: show sun */ .dark #theme-toggle .dark\:hidden, .dark #theme-toggle-mobile .dark\:hidden { display: none; } /* dark: hide moon */ /* =========================================== Print Styles =========================================== */ @media print { .no-print { display: none !important; } }