/* ====================================================== _style-theme.css (R3 / Oakland v1.3) Purpose: Color system, buttons, cards, dividers, footer, theme modes, nav + mobile menu appearance ====================================================== */ /* ---------- Theme Variables (Light as default) ---------- */ :root { --brand: #80013f; /* primary maroon */ --text: #333; /* body text */ --muted: #666; /* secondary text */ --bg: #ffffff; /* page background */ --card-bg: #f9f9f9; /* panels/cards */ --divider: color-mix(in srgb, var(--brand), white 70%); --link: var(--brand); --button-text: #fff; } /* ---------- Optional: auto-respect system Dark Mode ---------- */ @media (prefers-color-scheme: dark) { :root:not(.force-light) { --brand: #e067a5; /* brighter rose for contrast on dark */ --text: #eee; --muted: #aaa; --bg: #1b1b1b; --card-bg: #2b2b2b; --divider: color-mix(in srgb, var(--brand), black 70%); --link: #f3a3c7; --button-text: #fff; } } /* ---------- Manual Dark Mode (add .dark-theme to or ) ---------- */ .dark-theme { --brand: #e067a5; --text: #eee; --muted: #aaa; --bg: #1b1b1b; --card-bg: #2b2b2b; --divider: color-mix(in srgb, var(--brand), black 70%); --link: #f3a3c7; --button-text: #fff; } /* If you ever need to force light even when OS is dark: add .force-light to */ .force-light { } /* ---------- Cards / Panels ---------- */ .card { background: var(--card-bg); } .card p { margin-bottom: 0.9em; } .card .actions { margin-top: 1em; } /* ---------- Dividers (brand-tinted) ---------- */ /* / * Default for light backgrounds * / .divider { height: 1px; background: linear-gradient( to right, transparent, var(--divider), transparent ); margin: 1.6em auto; / * tighter vertical gap around dividers * / width: min(80%, 1100px); border: none; } / * Stronger variant for darker sections (e.g., on gray/maroon bands) * / .divider--light { height: 1px; background: linear-gradient( to right, transparent, color-mix(in srgb, var(--brand), black 60%), transparent ); margin: 2.4em auto; width: min(80%, 1100px); border: none; } */ /* Default divider – best on white */ .divider { height: 1px; background: linear-gradient( to right, transparent, var(--divider), transparent ); margin: 1.6em auto; width: min(80%, 1100px); border: none; } /* Stronger variant for darker sections (already there) */ .divider--strong { height: 1px; background: linear-gradient( to right, transparent, color-mix(in srgb, var(--brand), black 60%), transparent ); margin: 2.4em auto; width: min(80%, 1100px); border: none; } /* NEW: divider tuned for section--light background */ .section--light .divider--on-light { background: linear-gradient( to right, transparent, color-mix(in srgb, var(--brand), black 20%), transparent ); } /* ---------- Buttons (works for and