/* ══════════════════════════════════════════════════════ Tao Te Ching Institute — style.css assets/css/style.css ══════════════════════════════════════════════════════ */ /* ── DESIGN TOKENS ───────────────────────────────────── */ :root { /* Core palette */ --void: #070710; /* Deepest background */ --ink: #0f0f17; /* Near-black surfaces — re-spaced to match the light ladder's separation from --void (was #0a0a0f, too compressed against black) */ --deep: #16151f; /* Elevated surfaces (text boxes/cards) — now visibly lifts off --void, mirroring light-theme deep (was #0f0e18) */ --lifted: #1f1d2c; /* Cards, panels — top tier of the ladder (was #161525) */ /* Text */ --silk: #e8e2d4; /* Primary text */ --mist: #d6d1c4; /* Secondary text — one contrast step up from #c8c4b8 (02b legibility) */ --smoke: #9b9688; /* Tertiary / disabled — one step up from #8a8678 */ /* Accents */ --gold-rgb: 241,229,160; /* the gold as raw channels — every gold glow/border/tint derives from THIS one source so they can't drift two-tone */ --gold: #f1e5a0; /* Primary accent — light-yellow gold so it stands out on void black (was #c9a84c → #e0c878) */ --gold-dim: #d9c87f; /* Subdued gold — light-yellow family, dimmer than --gold (was #8a6f30 → #c0a860) */ --gold-glow: rgba(var(--gold-rgb),0.12); /* Glass-plate chrome — shared translucent-surface primitives so the scrolled navbar, the cookie banner, and the verse float-nav don't drift independently. Each component still sets its OWN alpha/blur where it intentionally differs (e.g. the float-nav is more translucent and uses a lighter 6px blur). */ --glass-void-rgb: 7, 7, 16; /* dark plate base — nav.scrolled + verse float-nav */ --glass-paper-rgb: 244, 239, 226; /* light plate base — cookie banner + float-nav (light theme) */ --glass-blur: 8px; /* default plate blur (float-nav intentionally uses 6px) */ --jade: #4a7c6f; /* Secondary accent */ --jade-light: #6aab9a; /* Lighter jade */ --jade-glow: rgba(74,124,111,0.1); --crimson: #8b2635; /* Rare highlight */ /* Typography scale — TYPE FLOOR (02b): no rendered text below 0.84rem (16px) except legal/footer fine print. Letterspaced-caps styles stay, just legible. */ --text-xs: 0.84rem; --text-sm: 0.9rem; --text-base: 1rem; --text-md: 1.1rem; --text-lg: 1.3rem; --text-xl: 1.6rem; --text-2xl: 2rem; --text-3xl: 2.8rem; --text-4xl: 3.8rem; /* Spacing scale */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem; --space-8: 4rem; --space-12: 6rem; --space-16: 8rem; /* Layout */ --max-width: 1100px; --reading-width: 720px; /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --duration: 0.3s; --duration-slow: 0.6s; /* Borders */ --border-subtle: 1px solid rgba(232,226,212,0.08); --border-gold: 1px solid rgba(var(--gold-rgb),0.2); --border-glow: 1px solid rgba(var(--gold-rgb),0.5); /* Semantic aliases (theme-agnostic; future components target these) */ --bg: var(--void); --surface: var(--deep); --text: var(--silk); --text-muted: var(--mist); --text-faint: var(--smoke); } /* ── LIGHT THEME ───────────────────────────────────────── A *designed* warm "rice-paper" palette — not an inversion. Activated by data-theme="light" on (set before paint by the inline script in header.php; honors prefers-color-scheme). */ [data-theme="light"] { --void: #f4efe2; /* rice-paper background */ --ink: #efe9da; /* near-bg surfaces */ --deep: #eae3d1; /* elevated surfaces */ --lifted: #e3dac6; /* cards, panels */ --silk: #2a2620; /* primary text — warm ink, never pure black */ --mist: #443e34; /* secondary text — one contrast step down from #514b40 (02b legibility) */ --smoke: #6b6457; /* tertiary — one step down from #7c7568 */ --gold-rgb: 147,116,31; /* light-theme gold channels — darker, for contrast on rice paper; same single-source mechanism as dark */ --gold: #93741f; /* retuned for contrast on light */ --gold-dim: #6f571a; --gold-glow: rgba(var(--gold-rgb),0.12); --jade: #2f5a4d; --jade-light: #356b5b; --jade-glow: rgba(47,90,77,0.10); --crimson: #7a2230; --border-subtle: 1px solid rgba(42,38,32,0.12); --border-gold: 1px solid rgba(var(--gold-rgb),0.28); --border-glow: 1px solid rgba(var(--gold-rgb),0.5); } /* Light-theme fixes for the few hardcoded dark backgrounds in components */ [data-theme="light"] #navbar { background: linear-gradient(to bottom, rgba(244,239,226,0.97) 0%, transparent 100%); } [data-theme="light"] #navbar.scrolled { background: rgba(244,239,226,0.97); } [data-theme="light"] .nav-overlay { background: rgba(42,38,32,0.4); } [data-theme="light"] body::before { mix-blend-mode: multiply; opacity: 0.15; } /* ── RESET & BASE ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 100%; /* respect the user's browser font size; body sets 19px via rem */ -webkit-text-size-adjust: 100%; } body { background-color: var(--void); color: var(--silk); font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 1.1875rem; /* 19px base — older-adult-inclusive legibility */ font-weight: 500; /* lift off the thin end; thin weights are display-only */ line-height: 1.65; overflow-x: hidden; min-height: 100vh; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); } /* Noise texture overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9000; opacity: 0.3; mix-blend-mode: overlay; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ── TYPOGRAPHY ──────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; line-height: 1.2; color: var(--silk); } /* Chinese character display */ .chinese, .zh { font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif; letter-spacing: 0.1em; } /* Cinzel for labels, UI elements */ .label, .eyebrow, #navbar, .btn { font-family: 'Cinzel', 'Palatino Linotype', serif; } p { color: var(--mist); line-height: 1.7; font-size: 1.1875rem; /* 19px body copy */ font-weight: 500; } p + p { margin-top: 1.25rem; } blockquote { border-left: 2px solid var(--gold); padding: 1.5rem 2rem; background: var(--gold-glow); margin: 2rem 0; font-style: italic; font-size: var(--text-lg); color: var(--silk); } blockquote cite { display: block; margin-top: 0.75rem; font-family: 'Cinzel', serif; font-size: var(--text-xs); letter-spacing: 0.3em; color: var(--gold-dim); font-style: normal; } /* ── LAYOUT UTILITIES ────────────────────────────────── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); } .container--narrow { max-width: var(--reading-width); margin: 0 auto; padding: 0 var(--space-4); } .section { padding: 5.5rem var(--space-4); /* density pass (02b): was var(--space-16) = 8rem, ~30% tighter */ position: relative; } .section--deep { background: var(--deep); } .section--ink { background: var(--ink); } .section--void { background: var(--void); } .section-label { display: block; font-family: 'Cinzel', serif; font-size: var(--text-xs); letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-3); opacity: 0.9; } .section-title { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); font-style: italic; color: var(--silk); margin-bottom: var(--space-3); } .section-lead { font-size: var(--text-lg); color: var(--mist); max-width: 640px; line-height: 1.85; } /* Horizontal rule / divider */ .divider { width: 80px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: var(--space-4) 0; } .divider--center { margin-left: auto; margin-right: auto; } /* ── NAVIGATION ──────────────────────────────────────── */ /* Scoped to #navbar, NEVER the bare `nav` element (fixed 2026-07-27). A bare `nav {}` rule turned every OTHER semantic