/* ============================================================ Laivy Hart shared theme: Pure Bordeaux palette, typography, light/dark tokens, and shared UI primitives. Loaded by index.html, about.html and admin.html so the whole site feels like one place in two lightings. ============================================================ */ /* ------------------------------------------------------------ Theming is two independent dimensions: data-color = bordeaux | emerald | royal | gold (the accent family) data-theme = dark | light (the lighting) The final look is color x lighting. The accent family (accent 1/2/3, wash tones) is identical in both lightings; the backgrounds and text change with the lighting. Both attributes live on and are set before first paint by an inline script on each page. ------------------------------------------------------------ */ :root{ /* Bordeaux is the default color theme. accent-*-rgb are bare triplets so they can be dropped into rgba() for accent-tinted shadows and washes. */ --accent-1:#9E2B4E; --accent-2:#C13584; --accent-3:#E0699A; --accent-1-rgb:158,43,78; --accent-2-rgb:193,53,132; --wash-1:#4A1230; --wash-2:#7A1F6B; --stroke-alpha:0.16; /* Derived accent tokens, shared by every color theme. Because these hold var() references, they resolve per-element against whichever accent the active data-color sets, so switching color recolors the whole UI. */ --accent-grad:linear-gradient(135deg, var(--accent-1), var(--accent-2)); --accent-solid:var(--accent-1); --logo-grad:linear-gradient(135deg, var(--accent-1), var(--accent-3)); --font-heb:'Frank Ruhl Libre', serif; --font-display:'Fraunces', 'Frank Ruhl Libre', Georgia, serif; --font-ui:'Inter', system-ui, -apple-system, sans-serif; --radius:20px; --radius-sm:12px; --radius-xs:9px; --ease:cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---- Color themes: accent family + wash (identical in both lightings) ---- */ [data-color="emerald"]{ --accent-1:#0F7B5A; --accent-2:#14A67C; --accent-3:#4FD1A5; --accent-1-rgb:15,123,90; --accent-2-rgb:20,166,124; --wash-1:#0E4A38; --wash-2:#166B52; } [data-color="royal"]{ --accent-1:#3A4FC4; --accent-2:#5B6BF0; --accent-3:#8E9BFF; --accent-1-rgb:58,79,196; --accent-2-rgb:91,107,240; --wash-1:#1E2456; --wash-2:#3730A3; } [data-color="gold"]{ --accent-1:#B08423; --accent-2:#D6A93E; --accent-3:#EBCB7E; --accent-1-rgb:176,132,35; --accent-2-rgb:214,169,62; --wash-1:#4A3714; --wash-2:#6B5220; --stroke-alpha:0.18; } /* ---- Lighting: neutral tokens (same across all color themes) ---- */ /* Dark is the default lighting. */ :root, [data-theme="dark"]{ --glass-bg:rgba(255,255,255,0.045); --glass-border:rgba(255,255,255,0.10); --glass-hi:rgba(255,255,255,0.07); --line:rgba(255,255,255,0.08); --chip-bg:rgba(255,255,255,0.06); --chip-border:rgba(255,255,255,0.12); --play-bg:var(--accent-grad); --play-fg:#ffffff; /* Accent-tinted hairline: accent-2 in dark, accent-1 in light. */ --accent-stroke:rgba(var(--accent-2-rgb), var(--stroke-alpha)); --ambient-opacity:0.55; --ambient-blur:72px; color-scheme:dark; } [data-theme="light"]{ --glass-bg:rgba(255,255,255,0.58); --glass-border:rgba(42,16,24,0.09); --glass-hi:rgba(255,255,255,0.75); --line:rgba(42,16,24,0.10); --chip-bg:rgba(42,16,24,0.05); --chip-border:rgba(42,16,24,0.12); --play-bg:var(--accent-solid); --play-fg:#ffffff; --accent-stroke:rgba(var(--accent-1-rgb), var(--stroke-alpha)); --ambient-opacity:0.16; --ambient-blur:84px; color-scheme:light; } /* ---- Backgrounds + text: color theme x lighting ---- */ /* :root doubles as the Bordeaux-dark fallback if JS is disabled. */ :root, [data-color="bordeaux"][data-theme="dark"]{ --bg:#140810; --bg-2:#1d0d17; --text:#F4E9EE; --text-dim:#B598A4; --text-faint:#7C6470; } [data-color="bordeaux"][data-theme="light"]{ --bg:#F5ECEE; --bg-2:#efe1e5; --text:#2A1018; --text-dim:#8A6875; --text-faint:#A88E99; } [data-color="emerald"][data-theme="dark"]{ --bg:#08130F; --bg-2:#0E1F17; --text:#E9F5EF; --text-dim:#94B8AB; --text-faint:#5E7C71; } [data-color="emerald"][data-theme="light"]{ --bg:#ECF4F0; --bg-2:#E2EDE7; --text:#0C231A; --text-dim:#5E7C71; --text-faint:#8AA89C; } [data-color="royal"][data-theme="dark"]{ --bg:#0A0C1A; --bg-2:#12152B; --text:#ECEEF9; --text-dim:#9599B8; --text-faint:#63678A; } [data-color="royal"][data-theme="light"]{ --bg:#ECEEF7; --bg-2:#E2E5F1; --text:#12152C; --text-dim:#63678A; --text-faint:#9599B8; } [data-color="gold"][data-theme="dark"]{ --bg:#14100A; --bg-2:#201A0F; --text:#F5EEDE; --text-dim:#B8A582; --text-faint:#7C6E52; } [data-color="gold"][data-theme="light"]{ --bg:#F5F0E4; --bg-2:#EDE6D3; --text:#2A2110; --text-dim:#7C6E52; --text-faint:#A89A76; } *{box-sizing:border-box;} html,body{margin:0; padding:0;} body{ background:var(--bg); color:var(--text); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; transition:background 0.5s var(--ease), color 0.4s var(--ease); } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } /* ---------- Glass surface ---------- */ .glass{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius); backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25); } /* ---------- Brand wordmark ---------- */ .wordmark{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:0.01em; display:inline-flex; align-items:center; gap:0.5rem; color:var(--text); } .wordmark .brand-dot{ width:0.7rem; height:0.7rem; border-radius:50%; background:var(--accent-grad); box-shadow:0 0 14px rgba(var(--accent-2-rgb),0.6); flex-shrink:0; } .wordmark .hl-ai{ background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-style:italic; } /* ---------- LAIVYHART logo (one line, color shift is the separator) ---------- */ .logo{ display:inline-flex; align-items:baseline; white-space:nowrap; font-family:'Archivo Black', var(--font-ui); font-weight:900; text-transform:uppercase; letter-spacing:-0.03em; line-height:1; font-size:clamp(1.5rem, 5.2vw, 2.4rem); text-decoration:none; } .logo .l1{ color:var(--text); } .logo .l2{ background:var(--logo-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ---------- Small icon / ghost buttons ---------- */ .icon-btn{ width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-hi); color:var(--text); cursor:pointer; font-size:0.95rem; display:inline-flex; align-items:center; justify-content:center; transition:transform 0.2s var(--ease), border-color 0.2s var(--ease); } .icon-btn:hover{transform:translateY(-1px); border-color:var(--accent-2);} /* ---------- Color-theme swatch picker ---------- */ /* Four small round swatches, each showing its own theme gradient (fixed, so they always advertise the color they switch to). The active one wears a ring in the current text color so it reads in both light and dark. */ .palette{display:inline-flex; align-items:center; gap:0.4rem;} .swatch{ width:1.15rem; height:1.15rem; border-radius:50%; border:none; padding:0; cursor:pointer; box-shadow:0 0 0 1px var(--glass-border); transition:transform 0.18s var(--ease), box-shadow 0.18s var(--ease); } .swatch:hover{transform:translateY(-1px) scale(1.1);} .swatch:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;} .swatch.is-active{ transform:scale(1.12); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--text); } /* Swatch fills are deliberately DEEPER jewel tones than the live accents, so the picker reads as a set of dark, elegant gems rather than bright circles. These colors are cosmetic to the swatch only; they do not affect theming. */ .swatch.bordeaux{background:linear-gradient(135deg, #4A0F22, #7A1B3C);} .swatch.emerald{background:linear-gradient(135deg, #063326, #0C5A42);} .swatch.royal{background:linear-gradient(135deg, #10184A, #232C7A);} .swatch.gold{background:linear-gradient(135deg, #4A3410, #8A6420);} @media (max-width: 460px){ .swatch{width:1.05rem; height:1.05rem;} .palette{gap:0.32rem;} } .quiet-link{ font-family:var(--font-ui); font-size:0.82rem; color:var(--text-dim); text-decoration:none; letter-spacing:0.02em; transition:color 0.2s var(--ease); } .quiet-link:hover{color:var(--text);} /* ---------- Share / Install buttons, toast, iOS hint ---------- */ .pill-btn{ font-family:var(--font-ui); font-size:0.72rem; letter-spacing:0.02em; padding:0.4rem 0.8rem; border-radius:16px; cursor:pointer; white-space:nowrap; background:var(--chip-bg); border:1px solid var(--chip-border); color:var(--text-dim); transition:color 0.2s var(--ease), border-color 0.2s var(--ease), filter 0.2s var(--ease); } .pill-btn:hover{color:var(--text); border-color:var(--accent-2);} .pill-btn.accent{background:var(--accent-grad); border-color:transparent; color:#fff;} .pill-btn.accent:hover{filter:brightness(1.08); color:#fff;} .pill-btn[hidden]{display:none;} .laivy-toast{ position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%) translateY(0.8rem); background:var(--bg-2); color:var(--text); border:1px solid var(--glass-border); padding:0.6rem 1rem; border-radius:14px; font-family:var(--font-ui); font-size:0.82rem; box-shadow:0 12px 30px rgba(0,0,0,0.4); opacity:0; pointer-events:none; z-index:200; transition:opacity 0.25s var(--ease), transform 0.25s var(--ease); } .laivy-toast.show{opacity:1; transform:translateX(-50%) translateY(0);} .ios-hint{ position:fixed; left:1rem; right:1rem; bottom:1rem; margin:0 auto; max-width:26rem; display:flex; align-items:center; gap:0.7rem; z-index:150; background:var(--bg-2); border:1px solid var(--glass-border); border-radius:14px; padding:0.7rem 0.9rem; box-shadow:0 12px 30px rgba(0,0,0,0.4); font-family:var(--font-ui); font-size:0.82rem; color:var(--text); } .ios-hint strong{color:var(--accent-2); font-weight:600;} .ios-hint-close{margin-left:auto; background:none; border:none; color:var(--text-faint); font-size:1.15rem; line-height:1; cursor:pointer; padding:0 0.2rem;} .ios-hint[hidden]{display:none;} /* ---------- Chips and pills ---------- */ .chip{ font-family:var(--font-ui); font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase; padding:0.3rem 0.66rem; border-radius:20px; background:var(--chip-bg); border:1px solid var(--chip-border); color:var(--text-dim); cursor:pointer; white-space:nowrap; transition:all 0.2s var(--ease); } .chip:hover{color:var(--text); border-color:var(--accent-2);} .chip.active{ background:var(--accent-grad); border-color:transparent; color:#fff; } /* ---------- Ambient background wash ---------- */ .ambient{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; border-radius:inherit; opacity:var(--ambient-opacity); transition:opacity 0.6s var(--ease); } .ambient .blob{ position:absolute; width:60%; aspect-ratio:1; border-radius:50%; filter:blur(var(--ambient-blur)); animation:drift 24s var(--ease) infinite alternate; animation-play-state:paused; } .ambient.is-playing .blob{animation-play-state:running;} .ambient .blob.b1{background:radial-gradient(circle, var(--accent-2), transparent 68%); top:-12%; left:-10%;} .ambient .blob.b2{background:radial-gradient(circle, var(--accent-1), transparent 68%); bottom:-18%; right:-12%; animation-duration:31s;} .ambient .blob.b3{background:radial-gradient(circle, var(--wash-2), transparent 68%); top:35%; left:38%; animation-duration:38s; width:50%;} @keyframes drift{ 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(8%, 6%) scale(1.14);} 100%{transform:translate(-6%, -8%) scale(0.96);} } /* ---------- Playing equalizer ---------- */ .eq{display:inline-flex; align-items:flex-end; gap:2px; height:14px;} .eq span{ width:3px; background:var(--accent-2); border-radius:2px; animation:eqbar 0.9s var(--ease) infinite; } .eq span:nth-child(1){animation-delay:-0.1s;} .eq span:nth-child(2){animation-delay:-0.45s;} .eq span:nth-child(3){animation-delay:-0.25s;} .eq span:nth-child(4){animation-delay:-0.6s;} @keyframes eqbar{ 0%,100%{height:25%;} 50%{height:100%;} } /* ---------- Scrollbars ---------- */ *::-webkit-scrollbar{width:9px; height:9px;} *::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px;} *::-webkit-scrollbar-thumb:hover{background:var(--text-faint);}