/* ============================================================ Eden's Rise — Theme System Include on every page: Requires data-theme="dark"|"light" on . ============================================================ */ /* ===== Dark theme tokens ===== */ :root[data-theme="dark"] { --bg: #0f1419; --sheet-bg: rgba(15, 20, 25, 0.65); --bg-gradient: linear-gradient(180deg, #0f1a2e 0%, #0f1419 40%, #0d1208 100%); --text: #cbd5e1; --text-body: #94a3b8; --text-muted: #64748b; --text-label: #475569; --text-footer: #334155; --ice: #c8dff0; --glacier: #7aadcc; --accent: #22d3ee; --accent-deep: #0e7490; --pill-border: rgba(122,173,204,0.25); --mountain-opacity: 0.3; --card-bg: rgba(15,26,46,0.5); --card-border: rgba(122,173,204,0.12); --border: rgba(30,41,59,0.6); --btn-outline-border: #155e75; --btn-outline-text: #22d3ee; --btn-outline-hover: rgba(22,78,99,0.3); --btn-bg: #164e63; --btn-hover: #155e75; --btn-text: #ecfeff; --btn-border: #155e75; --input-bg: rgba(15,23,42,0.6); --input-border: #334155; --input-text: #cbd5e1; --input-placeholder: #475569; --input-focus: #0e7490; --cover-shadow: 0 30px 70px rgba(0,0,0,0.9), 0 0 50px rgba(180,60,20,0.12); --img-shadow-alpha: 0.7; --author-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 20px rgba(122,173,204,0.08); --author-border: rgba(122,173,204,0.12); } /* ===== Light theme tokens ===== */ :root[data-theme="light"] { --bg: #F8F7F2; --sheet-bg: rgba(248, 247, 242, 0.65); --bg-gradient: linear-gradient(180deg, #F8F7F2 0%, #ECEAE6 100%); --text: #334155; --text-body: #475569; --text-muted: #64748b; --text-label: #94a3b8; --text-footer: #94a3b8; --ice: #1a3450; --glacier: #2a6b8c; --accent: #0891b2; --accent-deep: #0891b2; --pill-border: rgba(30,80,110,0.3); --mountain-opacity: 0.25; --card-bg: rgba(255,255,255,0.75); --card-border: rgba(30,80,110,0.14); --border: rgba(226,232,240,0.8); --btn-outline-border: #0891b2; --btn-outline-text: #0e7490; --btn-outline-hover: rgba(207,250,254,0.6); --btn-bg: #0e7490; --btn-hover: #0891b2; --btn-text: #ffffff; --btn-border: #0e7490; --input-bg: rgba(255,255,255,0.8); --input-border: #cbd5e1; --input-text: #334155; --input-placeholder: #94a3b8; --input-focus: #06b6d4; --cover-shadow: 0 30px 70px rgba(0,0,0,0.2), 0 0 50px rgba(180,60,20,0.06); --img-shadow-alpha: 0.18; --author-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 0 20px rgba(42,107,140,0.08); --author-border: rgba(42,107,140,0.15); } /* ===== Base styles ===== */ body { font-family: 'Montserrat', sans-serif; background-color: var(--bg); background-image: var(--bg-gradient); color: var(--text); } .serif { font-family: 'Cormorant Garamond', serif; } h1, h2 { font-family: 'Cormorant Garamond', serif; } /* ===== Semantic color classes ===== */ .ice { color: var(--ice); } .glacier { color: var(--glacier); } /* ===== Components ===== */ .pill { border: 1px solid var(--pill-border); border-radius: 9999px; padding: 0.25rem 0.85rem; font-size: 0.65rem; color: var(--glacier); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; } .mountain-line { background: linear-gradient(to right, transparent, var(--glacier) 20%, var(--ice) 50%, var(--glacier) 80%, transparent); height: 1px; opacity: var(--mountain-opacity); } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; } /* ===== Interactive elements ===== */ .nav-link { color: var(--text-muted); transition: color 0.15s; } .nav-link:hover { color: var(--accent); } .outline-btn { border: 1px solid var(--btn-outline-border); color: var(--btn-outline-text); transition: background 0.15s, color 0.15s; } .outline-btn:hover { background: var(--btn-outline-hover); } .solid-btn { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); transition: background 0.15s; } .solid-btn:hover { background: var(--btn-hover); } .theme-input { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--input-text); } .theme-input::placeholder { color: var(--input-placeholder); } .theme-input:focus { outline: none; border-color: var(--input-focus); } .collab-link .collab-name { color: var(--text); transition: color 0.15s; } .collab-link:hover .collab-name { color: var(--accent); } .collab-link .collab-url { color: var(--text-label); transition: color 0.15s; } .collab-link:hover .collab-url { color: var(--accent-deep); } .footer-link { color: var(--text-footer); transition: color 0.15s; } .footer-link:hover { color: var(--accent-deep); } /* ===== Theme toggle button ===== */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; display: flex; align-items: center; transition: color 0.15s; } .theme-toggle:hover { color: var(--accent); } :root[data-theme="dark"] .theme-icon-sun { display: block; } :root[data-theme="dark"] .theme-icon-moon { display: none; } :root[data-theme="light"] .theme-icon-sun { display: none; } :root[data-theme="light"] .theme-icon-moon { display: block; } :root[data-theme="dark"] .dark-only { display: inline; } :root[data-theme="dark"] .light-only { display: none; } :root[data-theme="light"] .dark-only { display: none; } :root[data-theme="light"] .light-only { display: inline; } /* ===== Mobile hamburger menu ===== */ .hamburger-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem; align-items: center; transition: color 0.15s; } .hamburger-btn:hover { color: var(--accent); } .mobile-menu { display: none; background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 1.5rem; padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); } .mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .mobile-menu .mobile-menu-cta { margin-top: 1rem; display: inline-block; } .nav-links { display: flex; } .nav-get-notified { display: inline-block; } /* ===== Email signup row ===== */ .email-row { display: flex; } @media (max-width: 767px) { .nav-links { display: none; } .nav-get-notified { display: none; } .hamburger-btn { display: flex; } } @media (max-width: 599px) { .email-row { flex-direction: column; } .email-row button { width: 100%; } } /* ===== Blog tag link ===== */ .tag-link { border: 1px solid var(--pill-border); border-radius: 9999px; padding: 0.15rem 0.6rem; font-size: 0.6rem; color: var(--glacier); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; text-decoration: none; transition: border-color 0.15s, color 0.15s; } .tag-link:hover { border-color: var(--accent); color: var(--accent); } /* ===== Blog post card hover ===== */ a.card { transition: border-color 0.15s, box-shadow 0.15s; } a.card:hover { border-color: var(--accent-deep); box-shadow: 0 4px 20px rgba(0,0,0,0.15); } a.card:hover h2 { color: var(--accent); }