diff --git a/assets/css/main.css b/assets/css/main.css index da39a35..c90bd23 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,7 +1,9 @@ /* ========================================================================== Thistle & Moth — site stylesheet Fonts: EB Garamond (headings), Source Serif 4 (body), Inter (UI chrome) - Palette: parchment / ink / oxblood / brass + Palette: emerald banner / cobalt accent / parchment & ink / gold & thistle + ornaments — see the "Thistle & Moth — Visual Identity" reference for the + full rationale behind these choices. ========================================================================== */ /* -------------------------------------------------------------------------- @@ -55,18 +57,31 @@ /* -------------------------------------------------------------------------- 2. Design tokens + + Light mode: an open page in daylight — parchment ground, ink text. + Dark mode (below, @media prefers-color-scheme): the same page read by + lamplight — a deep emerald-black ground holding the parchment content + surface, rather than a naive color inversion. -------------------------------------------------------------------------- */ :root { - /* Color */ - --color-bg: #f7f3ea; - --color-bg-raised: #efe9db; /* cards, code blocks, pull-quote background */ - --color-ink: #2a2521; /* body text */ - --color-ink-heading: #1c1712; /* headings, strongest contrast */ - --color-accent: #7a2e2e; /* links, rules, emphasis — oxblood */ - --color-accent-hover: #5c2222; - --color-brass: #8c7a5b; /* metadata, dividers, secondary accent */ - --color-border: #ddd3bd; + /* Color — light (default) */ + --color-bg: #f6f0df; /* parchment page ground */ + --color-bg-raised: #fbf7ec; /* cards, code blocks, pull-quote background */ + --color-ink: #241c14; /* body text — warm, not flat black */ + --color-ink-heading: #1a140d; /* headings, strongest contrast */ + --color-ink-soft: #4a3f30; /* metadata, dividers, quiet secondary text */ + --color-border: #d8c9a3; + + --color-accent: #1d4f91; /* cobalt — links, rules, emphasis */ + --color-accent-hover: #163b70; + --color-gold: #a9812e; /* ornament — drop caps, sparingly */ + --color-thistle: #6e5a87; /* ornament — tags, quiet secondary accent */ + --color-thistle-bg: #e7e0ee; + + --color-banner-bg: #0b6e4f; /* emerald banner ground */ + --color-banner-bg-deep: #084c37; + --color-banner-text: #f2ecdc; /* warm ivory — not stark white */ /* Type */ --font-body: "Source Serif 4", Georgia, "Times New Roman", serif; @@ -85,6 +100,27 @@ --space-5: 5rem; } +@media (prefers-color-scheme: dark) { + :root { + --color-bg: #12201a; + --color-bg-raised: #efe6cd; + --color-ink: #2a2013; + --color-ink-heading: #1c150c; + --color-ink-soft: #52432c; + --color-border: #cabb92; + + --color-accent: #5b83c9; + --color-accent-hover: #7b9dd6; + --color-gold: #c9a227; + --color-thistle: #9c8ab9; + --color-thistle-bg: #2a2436; + + --color-banner-bg: #0a5a41; + --color-banner-bg-deep: #073f2d; + --color-banner-text: #f5efdd; + } +} + /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ @@ -200,7 +236,7 @@ blockquote p:last-child { hr { border: none; - border-top: 1px solid var(--color-brass); + border-top: 1px solid var(--color-gold); width: 4rem; margin: var(--space-4) auto; } @@ -262,40 +298,57 @@ nav, font-family: var(--font-ui); } +/* The masthead — the "banner" in the visual identity reference: emerald + ground, ivory text, in both color modes (it deliberately does not follow + the page's light/dark swap the way body content does — see --color-banner-* + above, which stay emerald/ivory and only deepen slightly for dark mode). */ .site-header { + background: linear-gradient(180deg, var(--color-banner-bg) 0%, var(--color-banner-bg-deep) 100%); padding: var(--space-3) var(--space-2); - border-bottom: 1px solid var(--color-border); + display: flex; + align-items: baseline; + flex-wrap: wrap; + gap: var(--space-1) var(--space-3); } .site-title { font-family: var(--font-heading); - font-size: 1.6rem; - color: var(--color-ink-heading); + font-size: 1.9rem; + font-weight: 600; + color: var(--color-banner-text); text-decoration: none; } nav a { text-decoration: none; - color: var(--color-ink); + color: var(--color-banner-text); + opacity: 0.88; margin-right: var(--space-2); font-size: 0.95rem; letter-spacing: 0.02em; } nav a:hover { - color: var(--color-accent); + opacity: 1; } .meta { - color: var(--color-brass); + color: var(--color-ink-soft); font-size: 0.85rem; letter-spacing: 0.02em; } +.tags { + color: var(--color-thistle); + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.03em; +} + .site-footer { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-2); - color: var(--color-brass); + color: var(--color-ink-soft); font-size: 0.85rem; text-align: center; } @@ -311,8 +364,8 @@ nav a:hover { left: -9999px; top: 0; z-index: 100; - background-color: var(--color-accent); - color: var(--color-bg); + background-color: var(--color-banner-bg); + color: var(--color-banner-text); font-family: var(--font-ui); padding: var(--space-1) var(--space-2); border-radius: 0 0 4px 0; @@ -334,7 +387,7 @@ nav a:hover { font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; - color: var(--color-bg); + color: var(--color-banner-text); background-color: var(--color-accent); border: none; border-radius: 4px; @@ -344,7 +397,7 @@ nav a:hover { .btn:hover { background-color: var(--color-accent-hover); - color: var(--color-bg); + color: var(--color-banner-text); } label { @@ -396,14 +449,14 @@ textarea { .course-subhead { font-style: italic; - color: var(--color-brass); + color: var(--color-ink-soft); margin-top: 0; } .course-social-proof { font-style: italic; font-size: 0.9rem; - color: var(--color-brass); + color: var(--color-ink-soft); } .enroll-form { @@ -453,7 +506,7 @@ textarea { line-height: 0.8; padding-right: 0.08em; padding-top: 0.05em; - color: var(--color-accent); + color: var(--color-gold); } /* --------------------------------------------------------------------------