/* ══════════════════════════════════════════════════════════ TCMVP — Public site shared styles Loaded by: index.html, about.html, contact.html, terms.html, privacy.html, license.html NOT loaded by: app.html, settings.html (use styles.css) Note: Theme init IIFE stays inline in each page — it must run before CSS paints to avoid flash. ══════════════════════════════════════════════════════════ */ /* ── Tokens — Light (default) ── */ :root { --bg: #faf9f5; --surface: #ffffff; --surface2: #f4f2ea; --surface3: #efece2; --border: #e5e2d6; --border2: #d8d4c4; --text: #1a1d1a; --text2: #4a4d48; --text3: #8a8e84; --accent: #1a7a47; --accent-h: #155c35; --accent-dim: rgba(26,122,71,0.08); --gold: #8a6a2a; --gold-dim: rgba(138,106,42,0.1); --red: #a33028; --red-dim: rgba(163,48,40,0.08); --btn-primary: #1fa05c; --btn-primary-h: #28c775; --btn-primary-dim: rgba(31,160,92,0.15); --shadow-sm: 0 1px 2px rgba(60,50,20,0.04), 0 1px 3px rgba(60,50,20,0.06); --shadow-md: 0 4px 12px rgba(60,50,20,0.06), 0 2px 4px rgba(60,50,20,0.04); --shadow-lg: 0 12px 32px rgba(60,50,20,0.08), 0 4px 8px rgba(60,50,20,0.04); --header-h: 60px; --radius: 8px; --radius-lg: 12px; } /* ── Tokens — Dark ── */ /* --btn-primary pinned to emerald — intentionally NOT overridden here */ [data-theme="dark"] { --bg: #0f1210; --surface: #141713; --surface2: #181b17; --surface3: #1d2019; --border: #23262a; --border2: #2f3330; --text: #ece9e1; --text2: #b8b4a8; --text3: #6a6e67; --accent: #1fa05c; --accent-h: #28c775; --accent-dim: rgba(31,160,92,0.1); --gold: #c8a064; --gold-dim: rgba(200,160,100,0.12); --red: #d85a50; --red-dim: rgba(216,90,80,0.12); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); } /* ── Reset & base ── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 } html { scroll-behavior:smooth; -webkit-text-size-adjust:100% } body { font-family:'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background:var(--bg); color:var(--text); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } a { color:var(--accent); text-decoration:none; transition:color 0.15s } a:hover { color:var(--accent-h) } button { cursor:pointer; font-family:inherit } ::selection { background:var(--accent-dim); color:var(--accent-h) } /* ── Brand ── */ .brand { display:flex; align-items:baseline; gap:0.7rem; text-decoration:none; flex-shrink:0 } .brand-title { font-family:'Cormorant Garamond', Georgia, serif; font-size:1.4rem; font-weight:700; letter-spacing:0.02em; color:var(--text); line-height:1; } .brand-sub { font-family:'DM Mono', monospace; font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--text3); line-height:1; white-space:nowrap; } /* ── Public nav ── */ .pub-nav { position:sticky; top:0; z-index:200; background:rgba(255,255,255,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:0.5px solid var(--border); height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.25rem,4vw,3rem); gap:1rem; } [data-theme="dark"] .pub-nav { background:rgba(20,23,19,0.92) } .nav-links { display:flex; align-items:center; gap:1.5rem; flex:1; justify-content:center; } .nav-link { font-size:0.85rem; font-weight:400; color:var(--text2); transition:color 0.15s; text-decoration:none; white-space:nowrap; } .nav-link:hover { color:var(--text); text-decoration:none } .nav-link.active { color:var(--text); font-weight:500 } .nav-right { display:flex; align-items:center; gap:1.25rem; flex-shrink:0 } .btn-nav { display:inline-flex; align-items:center; gap:0.4rem; background:var(--btn-primary); color:#fff; font-size:0.82rem; font-weight:500; padding:0.48rem 1rem; border-radius:var(--radius); box-shadow:0 1px 2px var(--btn-primary-dim); transition:background 0.15s, transform 0.1s, box-shadow 0.2s; white-space:nowrap; text-decoration:none; } .btn-nav:hover { background:var(--btn-primary-h); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 12px rgba(31,160,92,0.25); } /* ── Theme segmented control ── */ .theme-seg { display:flex; gap:2px; padding:2px; background:var(--surface2); border:0.5px solid var(--border); border-radius:6px; } .theme-seg button { padding:4px 9px; border:none; background:transparent; color:var(--text3); font-size:11px; font-family:'DM Sans', sans-serif; font-weight:500; border-radius:4px; cursor:pointer; transition:background 0.1s, color 0.1s; line-height:1.3; } .theme-seg button:hover { color:var(--text2) } .theme-seg button.active { background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); } /* ── Hamburger button — mobile only ── */ .hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:36px; height:36px; background:transparent; border:0.5px solid var(--border); border-radius:var(--radius); padding:0; transition:border-color 0.15s; } .hamburger:hover { border-color:var(--border2) } .hamburger span { display:block; width:16px; height:1.5px; background:var(--text2); border-radius:2px; transition:transform 0.2s, opacity 0.2s; transform-origin:center; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0 } .hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) } /* ── Mobile drawer — slides down in normal flow ── */ .nav-drawer { overflow:hidden; max-height:0; transition:max-height 0.28s ease-out; background:var(--surface); border-bottom:0.5px solid var(--border); position:sticky; top:var(--header-h); z-index:199; } .nav-drawer.open { max-height:420px; transition:max-height 0.32s ease-in } .drawer-link { display:block; padding:0.85rem clamp(1.25rem,4vw,3rem); font-size:0.95rem; font-weight:400; color:var(--text2); text-decoration:none; border-bottom:0.5px solid var(--border); transition:background 0.1s, color 0.1s; } .drawer-link:hover { background:var(--surface2); color:var(--text) } .drawer-link.active { color:var(--accent); font-weight:500 } .drawer-bottom { padding:1rem clamp(1.25rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .btn-drawer { display:inline-flex; align-items:center; background:var(--btn-primary); color:#fff; font-size:0.88rem; font-weight:500; padding:0.6rem 1.25rem; border-radius:var(--radius); text-decoration:none; white-space:nowrap; transition:background 0.15s; } .btn-drawer:hover { background:var(--btn-primary-h); color:#fff; text-decoration:none } /* ── Responsive breakpoints ── */ @media (max-width:768px) { .nav-links { display:none } .nav-right .theme-seg { display:none } .nav-right .nav-link { display:none } .nav-right .btn-nav { display:none } .hamburger { display:flex } } @media (min-width:769px) { .nav-drawer { display:none !important } } /* ── Shared public footer ── */ .pub-footer { max-width:1060px; margin:0 auto; padding:2.5rem clamp(1.25rem,4vw,2.5rem); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; border-top:0.5px solid var(--border); } .pub-footer-brand { font-family:'Cormorant Garamond', Georgia, serif; font-size:1rem; font-weight:700; color:var(--text); text-decoration:none; } .pub-footer-copy { font-family:'DM Mono', monospace; font-size:0.68rem; letter-spacing:0.06em; color:var(--text3); } .pub-footer-links { display:flex; gap:1.5rem; flex-wrap:wrap } .pub-footer-links a { font-size:0.8rem; color:var(--text3); transition:color 0.15s; } .pub-footer-links a:hover { color:var(--accent); text-decoration:none } /* ── Reduced motion ── */ @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } .nav-drawer { transition:none } }