/* ------------------------------------------------------- Global theme variables (switch via ) Themes: - luxury (Option A) : dark + Rolex green #006039 - editorial (Option B): clean white editorial - tech (Option C) : deep navy + cool blue -------------------------------------------------------- */ :root { --bg: #0b0e11; --fg: #f4f4f5; --muted: #a1a1aa; --card: rgba(17, 24, 39, 0.35); --panel: rgba(17, 24, 39, 0.25); --border: rgba(31, 41, 55, 1); --accent: #006039; /* Rolex green */ --accent-soft: rgba(0, 96, 57, 0.25); --link: rgba(244, 244, 245, 0.9); --link-hover: #ffffff; --shadow: 0 10px 30px rgba(0,0,0,0.35); --radius: 18px; } /* Option B: Clean Editorial */ html[data-theme="editorial"] { --bg: #fafafa; --fg: #111827; --muted: #4b5563; --card: rgba(255, 255, 255, 0.85); --panel: rgba(255, 255, 255, 0.65); --border: rgba(229, 231, 235, 1); --accent: #111827; /* understated */ --accent-soft: rgba(17, 24, 39, 0.10); --link: rgba(17, 24, 39, 0.92); --link-hover: #000000; --shadow: 0 8px 20px rgba(0,0,0,0.08); } /* Option C: Tech Neutral */ html[data-theme="tech"] { --bg: #020617; --fg: #e5e7eb; --muted: #94a3b8; --card: rgba(15, 23, 42, 0.55); --panel: rgba(15, 23, 42, 0.35); --border: rgba(15, 23, 42, 1); --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.18); --link: rgba(229, 231, 235, 0.9); --link-hover: #ffffff; --shadow: 0 12px 35px rgba(0,0,0,0.4); } /* Base */ html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Utility-ish helpers */ .muted { color: var(--muted); } .link { color: var(--link); transition: color .15s ease, opacity .15s ease; } .link:hover { color: var(--link-hover); } /* Badge */ .badge { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--border); background: var(--panel); padding: .45rem .9rem; border-radius: 999px; font-size: 12px; color: var(--muted); box-shadow: var(--shadow); } .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); } /* Cards / panels */ .card, .panel { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); } .card { padding: 1.25rem; } .panel { padding: 1.5rem; background: var(--panel); } /* Brandmark */ .brandmark { height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); box-shadow: var(--shadow); } /* Theme Switch */ .theme-switch { display: inline-flex; border: 1px solid var(--border); background: var(--panel); border-radius: 999px; overflow: hidden; box-shadow: var(--shadow); } .theme-btn { width: 34px; height: 28px; font-size: 12px; color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: background .15s ease, color .15s ease; } .theme-btn:hover { background: var(--accent-soft); color: var(--fg); } .theme-btn.is-active { background: var(--accent); color: #fff; } /* Background glows + subtle noise */ .glow { position: absolute; border-radius: 999px; filter: blur(60px); opacity: 0.22; } .glow-1 { top: -120px; left: 50%; width: 720px; height: 280px; transform: translateX(-50%); background: var(--accent); opacity: 0.16; } .glow-2 { top: 280px; left: 20%; width: 280px; height: 280px; background: rgba(255,255,255,0.35); opacity: 0.10; } .glow-3 { bottom: -120px; right: -80px; width: 360px; height: 360px; background: rgba(255,255,255,0.35); opacity: 0.08; } .noise { position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay; background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.12), transparent 40%), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.08), transparent 45%), radial-gradient(circle at 30% 80%, rgba(255,255,255,0.06), transparent 45%); }