/* ═══════════════════════════════════════════════════════════ BREWELLA NOIR — shared stylesheet Every page links this file. Change it once, changes everywhere. ── SEASON SWITCH ──────────────────────────────────────── On each page, the tag carries a season: Change that one word and the accent + ornament change site-wide. Options: standard · spring · summer · autumn · hallow · yule Ornaments live in each page's sprite (spider, snowflake…). ═══════════════════════════════════════════════════════════ */ :root{ /* the house — constant year round */ --ink:#0E0A0B; --wall:#191012; --lift:#241719; --chalk:#F3EBE0; --dim:#B5A79A; --faint:rgba(243,235,224,.16); --rose:#AA6668; /* their existing brand color */ --brass:#C0A15E; /* lamp light */ /* the decorations — these are what move */ --accent:var(--brass); --damask:var(--rose); --measure:34rem; --ease:cubic-bezier(.22,.61,.36,1); } [data-season="spring"]{--accent:#7FA06A;--damask:#7FA06A} [data-season="summer"]{--accent:#D9A24B;--damask:#C98F52} [data-season="autumn"]{--accent:#C46B2A;--damask:#B4622A} [data-season="hallow"]{--accent:#A3B63A;--damask:#8A5CA8} [data-season="yule"] {--accent:#C0A15E;--damask:#2F6B4F} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--ink); color:var(--chalk); font-family:"EB Garamond",Georgia,serif; font-size:clamp(1.02rem,.5vw + .93rem,1.14rem); line-height:1.64; overflow-x:hidden; } /* ── the wallpaper ──────────────────────────────────────── */ .wall{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.42} .lamp{ position:fixed;inset:0;z-index:1;pointer-events:none; background: radial-gradient(115% 62% at 50% 0%, rgba(255,226,180,.11), transparent 60%), radial-gradient(100% 100% at 50% 45%, transparent 38%, rgba(8,5,5,.7) 100%); } .page{position:relative;z-index:2} .shell{width:100%;max-width:62rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)} /* ── type utilities ─────────────────────────────────────── */ .eyebrow{ font-size:.68rem;letter-spacing:.32em;text-transform:uppercase; color:var(--dim);margin:0; } .display{ font-family:"Bodoni Moda",Didot,"Times New Roman",serif; font-weight:400;line-height:1.06;margin:0; } h2.display{font-size:clamp(1.8rem,5vw,2.85rem);margin:.6rem 0 0} h3.display{font-size:1.3rem;line-height:1.18;margin:.5rem 0 .45rem} .divider{display:flex;align-items:center;gap:.85rem;color:var(--accent)} .divider::before,.divider::after{content:"";height:1px;flex:1;background:currentColor;opacity:.45} .divider .orn{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.1} /* ── masthead + nav ─────────────────────────────────────── */ .masthead{padding:clamp(1.5rem,4vh,2.4rem) 0;position:relative;z-index:3} .masthead .shell{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap} .sig{ font-family:"Bodoni Moda",Didot,serif;font-size:1.1rem;letter-spacing:.16em; text-transform:uppercase;text-decoration:none;color:var(--chalk); } .sig em{font-style:italic;color:var(--rose);letter-spacing:.06em} .nav{display:flex;gap:clamp(.9rem,2.5vw,1.9rem);list-style:none;margin:0;padding:0;flex-wrap:wrap} .nav a{ color:var(--dim);text-decoration:none;font-size:.72rem; letter-spacing:.2em;text-transform:uppercase; padding-bottom:3px;border-bottom:1px solid transparent; transition:color 220ms,border-color 220ms; } .nav a:hover{color:var(--chalk);border-color:var(--accent)} .nav a[aria-current="page"]{color:var(--chalk);border-color:var(--accent)} .nav a:focus-visible,.sig:focus-visible{outline:2px solid var(--accent);outline-offset:4px} /* ── hero ───────────────────────────────────────────────── */ .hero{min-height:78svh;display:grid;place-items:center;text-align:center;padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(3rem,8vh,5rem)} .cameo{position:relative;padding:clamp(2.6rem,6vw,4.25rem) clamp(1.25rem,5vw,3.5rem)} .cameo-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .cameo-frame ellipse{fill:none;stroke:var(--faint);stroke-width:1;vector-effect:non-scaling-stroke} .cameo-frame .in{stroke:var(--accent);opacity:.5} .wordmark{ font-family:"Bodoni Moda",Didot,serif;font-weight:500; font-size:clamp(2.9rem,12.5vw,7.2rem);line-height:.87; letter-spacing:-.012em;margin:0;text-transform:uppercase; } .wordmark .noir{display:block;font-style:italic;font-weight:400;letter-spacing:.055em;color:var(--rose)} .trade{ margin:1.35rem auto 0;max-width:25rem;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--dim);line-height:2; } .tagline{margin:1.9rem auto 0;max-width:27rem;font-style:italic;color:var(--dim);font-size:1.05rem} /* ── generic band ───────────────────────────────────────── */ .band{padding:clamp(3.5rem,9vh,6.5rem) 0} .band-head{text-align:center;margin-bottom:clamp(2rem,5vh,3rem)} /* ── her letter ─────────────────────────────────────────── */ .letter{max-width:var(--measure);margin:0 auto} .letter p{margin:0 0 1.15rem} .letter p:first-of-type::first-letter{ font-family:"Bodoni Moda",Didot,serif;float:left;font-size:4em; line-height:.8;padding:.05em .12em 0 0;color:var(--rose); } .sign{font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-size:1.3rem;color:var(--accent);margin:1.8rem 0 0} .sign small{ display:block;font-family:"EB Garamond",serif;font-style:normal; font-size:.66rem;letter-spacing:.22em;text-transform:uppercase; color:var(--dim);margin-top:.65rem; } /* ── menu ───────────────────────────────────────────────── */ .course{margin-bottom:clamp(2.5rem,6vh,4rem)} .course:last-child{margin-bottom:0} .course-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem} .course-head h3{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:clamp(1.45rem,3.6vw,1.95rem);margin:0;white-space:nowrap} .course-head .fill{flex:1;height:1px;background:var(--faint)} .course-head .note{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .item{ display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem; padding:1rem 0;border-bottom:1px solid rgba(243,235,224,.08); } .item:last-child{border-bottom:0} .item h4{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:1.18rem;margin:0;line-height:1.3} .item .cost{font-family:"Bodoni Moda",Didot,serif;font-size:1.02rem;color:var(--accent);white-space:nowrap} .item p{grid-column:1/-1;margin:0;color:var(--dim);font-size:.96rem;max-width:40rem} .item .flag{ display:inline-block;margin-left:.6rem;vertical-align:2px; font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink);background:var(--accent);padding:.2rem .5rem; } /* ── curios ─────────────────────────────────────────────── */ .trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(1.5rem,3.5vw,2.5rem)} .curio{text-align:center;padding:0 .4rem} .curio svg{width:46px;height:46px;fill:none;stroke:var(--accent);stroke-width:1.1} .curio p{margin:0;color:var(--dim);font-size:.95rem} /* ── visit / faq ────────────────────────────────────────── */ .card{border:1px solid var(--faint);padding:clamp(1.75rem,5vw,3.25rem);background:rgba(36,23,25,.5)} .card.center{text-align:center} .hours{list-style:none;margin:1.6rem auto 0;padding:0;max-width:21rem;text-align:left} .hours li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(243,235,224,.09);font-size:.97rem} .hours dfn{font-style:normal;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--dim)} .hours .dark{color:rgba(181,167,154,.6);font-style:italic} .addr{margin:1.75rem 0 0;line-height:1.75} .addr a{color:var(--chalk);text-decoration:none;border-bottom:1px solid var(--rose)} .addr a:hover{color:var(--rose)} .btn{ display:inline-block;margin-top:1.9rem;padding:.9rem 2.3rem; background:var(--accent);color:var(--ink);font-size:.72rem; letter-spacing:.24em;text-transform:uppercase;text-decoration:none; transition:transform 200ms,filter 200ms; } .btn:hover{transform:translateY(-2px);filter:brightness(1.08)} .btn.ghost{background:transparent;color:var(--chalk);border:1px solid var(--faint)} .btn.ghost:hover{border-color:var(--accent)} .btn:focus-visible{outline:2px solid var(--chalk);outline-offset:3px} .btn-note{margin:.9rem 0 0;font-size:.78rem;color:rgba(181,167,154,.6);font-style:italic} .qa{max-width:var(--measure);margin:0 auto} .qa dt{font-family:"Bodoni Moda",Didot,serif;font-size:1.14rem;margin:1.6rem 0 .4rem} .qa dt:first-child{margin-top:0} .qa dd{margin:0;color:var(--dim)} /* ── footer ─────────────────────────────────────────────── */ footer{padding:3.5rem 0 4.5rem;text-align:center;color:rgba(181,167,154,.6);font-size:.8rem} footer .nav{justify-content:center;margin-bottom:1.5rem} footer p{margin:.3rem 0} /* ── entrance ───────────────────────────────────────────── */ .rise{opacity:0;transform:translateY(13px);animation:rise .95s var(--ease) forwards} .d1{animation-delay:.08s}.d2{animation-delay:.24s}.d3{animation-delay:.4s}.d4{animation-delay:.56s} @keyframes rise{to{opacity:1;transform:none}} .cameo-frame ellipse{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2s var(--ease) .12s forwards} @keyframes draw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important} .rise{opacity:1;transform:none} .cameo-frame ellipse{stroke-dashoffset:0} } /* ── seasonal ornaments ───────────────────────────────────── All six live in the markup; CSS shows only the active one. Add a new season = one line here + one ornament in the page. */ .orn-standard,.orn-spring,.orn-summer,.orn-autumn,.orn-hallow,.orn-yule{display:none} :root .orn-standard,[data-season="standard"] .orn-standard{display:block} [data-season="spring"] .orn-standard, [data-season="summer"] .orn-standard, [data-season="autumn"] .orn-standard, [data-season="hallow"] .orn-standard, [data-season="yule"] .orn-standard{display:none} [data-season="spring"] .orn-spring{display:block} [data-season="summer"] .orn-summer{display:block} [data-season="autumn"] .orn-autumn{display:block} [data-season="hallow"] .orn-hallow{display:block} [data-season="yule"] .orn-yule{display:block} /* ── press pull-quote ───────────────────────────────────── */ .press{ max-width:38rem;margin:0 auto;text-align:center; border-top:1px solid var(--faint);border-bottom:1px solid var(--faint); padding:clamp(2rem,5vh,3rem) 0; } .press blockquote{ margin:0;font-family:"Bodoni Moda",Didot,serif;font-style:italic; font-size:clamp(1.35rem,3.6vw,1.95rem);line-height:1.34;color:var(--chalk); } .press cite{ display:block;margin-top:1.35rem;font-family:"EB Garamond",serif; font-style:normal;font-size:.68rem;letter-spacing:.24em; text-transform:uppercase;color:var(--dim); } /* ── lore ───────────────────────────────────────────────── */ .lore{max-width:var(--measure);margin:0 auto} .lore p{margin:0 0 1.2rem} .lore p.lead{ font-family:"Bodoni Moda",Didot,serif;font-size:clamp(1.3rem,3.4vw,1.7rem); line-height:1.36;color:var(--chalk);margin-bottom:1.6rem; } .lore p.lead em{font-style:italic;color:var(--rose)} .lore p:last-child{margin-bottom:0} .lore .wink{color:var(--dim);font-style:italic} .mark{ font-family:"Bodoni Moda",Didot,serif;font-style:italic; font-size:1.5rem;color:var(--accent);margin:1.9rem 0 0;text-align:right; }