From 6c3a45f57a6251c50af403982a2d15d494bcfa1a Mon Sep 17 00:00:00 2001 From: Kayos Date: Tue, 28 Apr 2026 20:44:57 -0700 Subject: [PATCH] =?UTF-8?q?ui:=20back=20off=20the=20heavy=20gothic=20?= =?UTF-8?q?=E2=80=94=20revert=20=5Fbase.html=20to=20dd9cc26=20(the=20polis?= =?UTF-8?q?hed=20sulkta-blend=20pass)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cauldron/templates/_base.html | 126 +++++++--------------------------- 1 file changed, 26 insertions(+), 100 deletions(-) diff --git a/cauldron/templates/_base.html b/cauldron/templates/_base.html index 43e75b6..a58aa0f 100644 --- a/cauldron/templates/_base.html +++ b/cauldron/templates/_base.html @@ -30,14 +30,6 @@ --purple-deep: #2d1d4a; --purple-glow: rgba(155, 95, 232, .25); - --blood: #7a2c4a; /* old-blood / aged bordeaux */ - --blood-bright: #a83d62; - --blood-dim: #4d1a30; - --blood-glow: rgba(168, 61, 98, .25); - - --gilt: #8a6e3a; /* aged brass / gold-leaf */ - --gilt-bright: #c0a058; - --bone: #e8e0c8; --bone-dim: #a89d83; --muted: #6e6478; @@ -64,15 +56,13 @@ body { background-image: radial-gradient(ellipse 80% 60% at 15% 0%, rgba(155, 95, 232, .07) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 85% 100%, rgba(110, 168, 72, .05) 0%, transparent 60%); - /* atmospheric layered bg: top-corner candleglow, bottom moss, gothic - filigree tile (vines + crescent moon), and a corner-vignette darkening */ + /* faint witchy sigil tile in bone+purple at 4% */ background-image: - radial-gradient(ellipse 70% 50% at 12% -5%, rgba(155, 95, 232, .09) 0%, transparent 55%), - radial-gradient(ellipse 60% 50% at 88% 105%, rgba(110, 168, 72, .06) 0%, transparent 55%), - radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%), - url("data:image/svg+xml;utf8,"); + radial-gradient(ellipse 80% 60% at 15% 0%, rgba(155, 95, 232, .07) 0%, transparent 60%), + radial-gradient(ellipse 80% 60% at 85% 100%, rgba(110, 168, 72, .05) 0%, transparent 60%), + url("data:image/svg+xml;utf8,"); background-attachment: fixed; - background-size: auto, auto, auto, 120px 120px; + background-size: auto, auto, 80px 80px; } ::selection { background: rgba(155, 95, 232, .35); color: var(--bone); } @@ -96,15 +86,9 @@ header.topbar { .brand { display: flex; align-items: baseline; gap: 14px; min-width: 0; } .brand-mark { font-family: var(--serif); font-weight: 700; - color: var(--purple-bright); font-size: 24px; - letter-spacing: .22em; text-transform: uppercase; + color: var(--purple-bright); font-size: 22px; + letter-spacing: .15em; text-transform: uppercase; text-shadow: 0 0 24px var(--purple-glow); - position: relative; padding: 0 .15em; -} -.brand-mark::before, .brand-mark::after { - content: "✦"; color: var(--blood); opacity: .65; - font-size: .55em; vertical-align: middle; - margin: 0 .35em; text-shadow: 0 0 8px var(--blood-glow); } .brand-sub { color: var(--muted); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-family: var(--mono); } nav.nav { display: flex; gap: 22px; flex-wrap: wrap; } @@ -131,83 +115,41 @@ main { position: relative; } -/* Page header — gothic vertical rhythm + drop cap */ -.page-head { margin-bottom: 2em; animation: fadeIn .5s ease-out forwards; position: relative; } -.page-head::before { - content: ""; position: absolute; left: 0; top: -8px; width: 60px; height: 1px; - background: linear-gradient(90deg, var(--gilt), transparent); - opacity: .6; -} +/* Page header */ +.page-head { margin-bottom: 1.6em; animation: fadeIn .5s ease-out forwards; } .page-head .crumb { - color: var(--blood-bright); font-size: 11px; letter-spacing: .35em; - text-transform: uppercase; font-family: var(--mono); margin-bottom: .8em; - display: inline-block; + color: var(--purple); font-size: 11px; letter-spacing: .25em; + text-transform: uppercase; font-family: var(--mono); margin-bottom: .5em; } -.page-head .crumb::before { content: "❧ "; color: var(--gilt); margin-right: .3em; opacity: .8; } .page-head h1 { margin: 0; color: var(--bone); - font-family: var(--serif); font-weight: 700; - font-size: 2.8em; letter-spacing: .06em; line-height: 1.05; - text-transform: lowercase; + font-family: var(--serif); font-weight: 600; + font-size: 2.2em; letter-spacing: .04em; line-height: 1.2; } -.page-head h1::first-letter { - font-size: 1.5em; color: var(--purple-bright); - text-shadow: 0 0 28px var(--purple-glow), 2px 2px 0 var(--bg); - font-weight: 700; padding-right: .04em; -} -.page-head h1 .accent { - color: var(--blood-bright); - text-shadow: 0 0 24px var(--blood-glow); - font-style: italic; -} -.page-head .lede { - color: var(--bone-dim); font-size: 1em; margin-top: .8em; max-width: 60ch; - font-style: italic; letter-spacing: .015em; -} -.page-head .lede::before { content: "“"; color: var(--gilt); font-size: 1.4em; line-height: 0; vertical-align: -.2em; margin-right: .15em; opacity: .55; } +.page-head h1 .accent { color: var(--purple-bright); text-shadow: 0 0 24px var(--purple-glow); } +.page-head .lede { color: var(--bone-dim); font-size: 1em; margin-top: .5em; max-width: 60ch; } -/* Panel — stone-and-iron card with gothic corner filigree */ +/* Panel */ .panel { - background: - linear-gradient(180deg, rgba(255,255,255,.012) 0%, transparent 30%), - var(--surface); + background: var(--surface); border: 1px solid var(--line); - border-radius: 4px; - padding: 22px 24px; - margin: 18px 0; + border-radius: 6px; + padding: 20px 22px; + margin: 16px 0; position: relative; - box-shadow: - 0 0 28px -10px rgba(155, 95, 232, .12), - inset 0 1px 0 rgba(255, 255, 255, .015); + box-shadow: 0 0 24px -8px rgba(155, 95, 232, .08); animation: fadeIn .5s ease-out forwards; opacity: 0; } -/* corner filigree — top-left + top-right thin gilt brackets */ -.panel::before, .panel::after { - content: ""; position: absolute; top: -1px; width: 18px; height: 18px; - border: 1px solid var(--gilt); opacity: .4; - pointer-events: none; -} -.panel::before { left: -1px; border-right: none; border-bottom: none; } -.panel::after { right: -1px; border-left: none; border-bottom: none; } .panel:nth-child(2) { animation-delay: .05s; } .panel:nth-child(3) { animation-delay: .1s; } .panel:nth-child(4) { animation-delay: .15s; } .panel:hover { border-color: var(--surface-3); } -.panel:hover::before, .panel:hover::after { opacity: .6; border-color: var(--gilt-bright); } .panel.green { - box-shadow: - 0 0 28px -10px rgba(110, 168, 72, .14), - inset 0 1px 0 rgba(255, 255, 255, .015); + box-shadow: 0 0 24px -8px rgba(110, 168, 72, .1); border-left: 2px solid var(--green-dim); } .panel.purple { border-left: 2px solid var(--purple-dim); } -.panel.blood { - border-left: 2px solid var(--blood-dim); - box-shadow: - 0 0 28px -10px var(--blood-glow), - inset 0 1px 0 rgba(255, 255, 255, .015); -} .panel-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; @@ -215,18 +157,10 @@ main { } .panel-head h2 { margin: 0; color: var(--purple-bright); - font-family: var(--serif); font-weight: 700; - font-size: 1.15em; letter-spacing: .22em; text-transform: uppercase; - position: relative; -} -.panel-head h2::before { - content: "✦"; color: var(--blood); opacity: .6; - font-size: .65em; margin-right: .55em; vertical-align: middle; + font-family: var(--serif); font-weight: 600; + font-size: 1.05em; letter-spacing: .15em; text-transform: uppercase; } .panel.green .panel-head h2 { color: var(--green-bright); } -.panel.green .panel-head h2::before { color: var(--gilt); } -.panel.blood .panel-head h2 { color: var(--blood-bright); } -.panel.blood .panel-head h2::before { color: var(--purple); } .panel-head .ctx { color: var(--muted); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; margin-left: auto; font-family: var(--mono); } /* Pill */ @@ -284,12 +218,7 @@ a { color: var(--green-bright); text-decoration: none; transition: color .2s; } a:hover { color: var(--purple-bright); } .muted { color: var(--muted); font-size: .9em; } .lede { color: var(--bone-dim); } -/* gothic flourish divider */ -hr { - border: none; height: 28px; margin: 2.2em 0; - background: url("data:image/svg+xml;utf8,") no-repeat center; - background-size: contain; -} +hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; } code { background: var(--purple-deep); border: 1px solid var(--purple-dim); color: var(--purple-bright); @@ -318,12 +247,9 @@ ol li, ul li { margin: .35em 0; } } .recipe-card .rname { color: var(--bone); font-family: var(--serif); font-weight: 600; - font-size: 1.1em; letter-spacing: .03em; text-transform: lowercase; - line-height: 1.2; + font-size: 1.05em; letter-spacing: .02em; } -.recipe-card .rname::first-letter { color: var(--blood-bright); font-weight: 700; font-size: 1.15em; } .recipe-card:hover .rname { color: var(--purple-bright); } -.recipe-card:hover .rname::first-letter { color: var(--blood-bright); text-shadow: 0 0 12px var(--blood-glow); } .recipe-card .rmeta { color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-family: var(--mono); margin-top: 6px;