/* * Vigil — the halloween.cafe palette. * Oxblood leather on char, lit by a hearth from below — a seasonal property: * open in season, banked the rest of the year. * * Sibling of @kung-fu/sulfur. Where sulfur's registers are tonal (Illuminated / * Carcosa), vigil's are temporal, switched by [data-palette] on : * • Open (default, :root) — the season, September 1 – November 2. * • Closed ([data-palette="closed"]) — the banked off-season. * * Raw palette colours are exposed as named tokens; semantic tokens * (--bg, --text, --accent, …) map onto them and are what you should style with. */ /* ── Open (the season) ───────────────────────────────────────────────── */ :root { /* raw palette — native */ --char: #1A0F0C; /* ground; roasted, not tarry */ --ember: #CB6045; /* links & small accents (4.74:1 on char) */ --banked-ember: #BA624A; /* the one live link in the closed register */ --tallow: #DECFAF; /* body text by candle fat (12.2:1) */ --scorched-ash: #3B2C26; /* rules & hairlines */ /* raw palette — inherited from @kung-fu/sulfur (duplicated, never imported) */ --oxblood: #6E1F1A; /* sulfur accent → vigil surface; never fine lines (1.68:1) */ --foxing-sepia: #8A6A38; /* sulfur carcosa accent → vigil wordmark & quiet labels */ --vellum: #E7DCC2; /* sulfur paper → vigil headings; text on oxblood (8.2:1) */ --bone: #D8CFB8; /* sulfur text → vigil hover states, secondary light */ /* semantic tokens */ --bg: var(--char); --bg-raised: #221411; --bg-sunken: #130B08; --text: var(--tallow); --text-dim: color-mix(in srgb, var(--tallow) 65%, transparent); --heading: var(--vellum); --accent: var(--ember); --accent-2: var(--oxblood); --rule: var(--scorched-ash); /* the hearth — light from below; sulfur is lit from above */ --hearth-mix: 13%; --hearth-glow: 0 -14px 34px -18px color-mix(in srgb, var(--accent) 45%, transparent); --font-display: "IM Fell English", "Sorts Mill Goudy", Georgia, serif; --font-display-sc: "IM Fell English SC", Georgia, serif; --font-body: "Alegreya", Georgia, serif; --font-body-sc: "Alegreya SC", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; } /* ── Closed (banked off-season) ──────────────────────────────────────── */ [data-palette="closed"] { --bg: #120B09; /* banked ground */ --bg-raised: #181010; --bg-sunken: #0C0706; --text: #B5A88C; /* tallow, cooled */ --text-dim: color-mix(in srgb, #B5A88C 60%, transparent); --heading: #C9BCA0; /* vellum, dimmed */ --accent: var(--banked-ember); /* 4.58:1 — the one live link */ --accent-2: #4A1713; /* oxblood, dried */ --rule: #2E211C; --hearth-mix: 4%; /* almost out */ --hearth-glow: none; } /* ── Base element styling on the active register ─────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } /* The hearth sits at the page foot and breathes (cycle ≥9s, opacity .55–1). Closed register: banked to a static ≤4% glow. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(130% 55% at 50% 112%, color-mix(in srgb, var(--accent) var(--hearth-mix), var(--bg)) 0%, var(--bg) 60%); animation: vigil-hearth 11s ease-in-out infinite; } @keyframes vigil-hearth { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } [data-palette="closed"] body::before { animation: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; /* Fell ships one weight — no bold, ever */ line-height: 1.12; color: var(--heading); margin: 0 0 .4em; } /* hierarchy is size, italic, and small caps — never weight */ b, strong { font-weight: 500; } a { color: var(--accent); } a:hover { color: var(--bone); } hr, .rule { border: 0; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); margin: 2.5rem 0; } /* oxblood is a surface, not a line — spines ≥2px, light text on top */ blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--accent-2); } code, pre { font-family: var(--font-mono); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { transition: none; } body::before { animation: none; opacity: .7; } } /* * Self-hosted type — IM Fell English (+SC) and Alegreya (+SC), all SIL OFL 1.1. * woff2 files live in /fonts/ with each family's OFL.txt beside them (the * license text must ship with the fonts — the x51.dev JetBrains Mono pattern). * Latin subsets only; sourced from the Fontsource builds of the google/fonts * OFL originals. */ @font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "IM Fell English SC"; src: url("/fonts/im-fell-english-sc-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Alegreya SC"; src: url("/fonts/alegreya-sc-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya SC"; src: url("/fonts/alegreya-sc-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* * halloween.cafe — site chrome. Palette, hearth, and base element styling * come from @kung-fu/vigil (bundled ahead of this file — see css:bundle). * Everything here styles with vigil's semantic tokens so the whole page * banks when the register flips to [data-palette="closed"]. * * Layout/copy is normative from design/halloween-cafe-index.html (rev 2), * with the mockup's token block and .hearth overlay dropped in favour of * the package's own tokens and body::before hearth. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* TEMPORARY — vigil 0.0.1 ships --text-dim at 65%/60%; the palette raised it to 80%/75% for legibility (vigil 0.0.2). Remove this block once the dep is bumped past 0.0.1. */ :root { --text-dim: color-mix(in srgb, var(--tallow) 80%, transparent); } [data-palette="closed"] { --text-dim: color-mix(in srgb, #B5A88C 75%, transparent); } body { font-size: 1.125rem; line-height: 1.75; } main { position: relative; z-index: 1; } .measure { max-width: 40rem; margin-inline: auto; padding-inline: 1.5rem; } /* ── Seasonal copy variants ───────────────────────────────────────── Elements marked .when-open show only in season; .when-closed only in the banked off-season. The flip is the data-palette attribute on (see templates/layout.hbs). */ .when-closed { display: none; } [data-palette="closed"] .when-open { display: none; } [data-palette="closed"] .when-closed { display: revert; } /* ── Hero ───────────────────────────────────────────────────────── */ .hero { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding-block: 6rem 4rem; } .wordmark { font-family: var(--font-body-sc); font-weight: 500; font-size: 1rem; letter-spacing: .3em; color: var(--foxing-sepia); margin-bottom: 3rem; } .wordmark .dot { color: var(--accent); } .hero h1 { font-size: clamp(2.8rem, 7.5vw, 4.6rem); line-height: 1.08; text-wrap: balance; margin-bottom: 1.5rem; } .hero .sub { color: var(--text); font-style: italic; font-size: 1.1875rem; max-width: 30rem; margin-inline: auto; text-wrap: balance; } /* hours placard — the double-ruled sign, lit from beneath */ .hours { margin: 3.5rem auto 0; display: inline-block; border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 4px; padding: 1.6rem 2.8rem 1.7rem; background: color-mix(in srgb, var(--bg-raised) 82%, transparent); box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--accent) 45%, transparent); } .hours .label { font-family: var(--font-body-sc); font-weight: 500; font-size: .9rem; letter-spacing: .3em; color: var(--foxing-sepia); margin-bottom: .8rem; } .hours .open { font-family: var(--font-display); font-size: 1.9rem; color: var(--heading); line-height: 1.3; } .hours .open em { font-style: italic; color: var(--accent); } .hours .closed { margin-top: .5rem; font-size: 1.0625rem; font-style: italic; color: var(--text-dim); } .season-note { margin-top: 2.2rem; font-style: italic; color: var(--text-dim); } .down { margin-top: 3.2rem; font-family: var(--font-body-sc); font-weight: 500; font-size: 1rem; letter-spacing: .22em; } .down a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: .2em; } .down a:hover { border-bottom-color: var(--accent); color: var(--accent); } .down a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* ── Menu ───────────────────────────────────────────────────────── */ .menu { padding-block: 5.5rem 6rem; } .menu-head { text-align: center; margin-bottom: 4rem; } .menu-head .eyebrow { font-family: var(--font-body-sc); font-weight: 500; font-size: .95rem; letter-spacing: .28em; color: var(--foxing-sepia); margin-bottom: .8rem; } .menu-head h2 { font-family: var(--font-display-sc); font-size: 2.5rem; letter-spacing: .06em; margin-bottom: 0; } .menu-head .menu-rule { width: 5.5rem; height: 1px; margin: 1.5rem auto 0; background: linear-gradient(90deg, transparent, var(--foxing-sepia), transparent); } .course + .course { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--rule); } .course .kind { font-family: var(--font-body-sc); font-weight: 500; font-size: 1rem; letter-spacing: .24em; color: var(--accent); margin-bottom: .8rem; } .course h3 { font-size: 2.1rem; line-height: 1.15; margin-bottom: .3rem; } .course .price { font-style: italic; color: var(--text-dim); font-size: 1.0625rem; margin-bottom: 1.3rem; } .course p { max-width: 36rem; } .course p + p { margin-top: 1rem; } /* nightly fare — oxblood spine (a surface ≥2px, never a hairline) */ .nightly { margin-top: 1.6rem; padding-left: 1.4rem; border-left: 2px solid var(--accent-2); font-style: italic; color: var(--text-dim); max-width: 34rem; } .edition { display: inline-block; margin-top: 1.5rem; font-family: var(--font-body-sc); font-weight: 500; font-size: 1rem; letter-spacing: .14em; color: var(--text-dim); border: 1px solid var(--rule); padding: .5rem 1.1rem; } /* ── Reserve — the oxblood surface, glow rising from beneath ────── */ .reserve { background: var(--accent-2); color: var(--vellum); padding-block: 5rem; border-top: 1px solid color-mix(in srgb, var(--vellum) 14%, transparent); border-bottom: 1px solid var(--rule); box-shadow: 0 -18px 44px -22px color-mix(in srgb, var(--accent) 50%, transparent); } .reserve .inner { text-align: center; } .reserve .eyebrow { font-family: var(--font-body-sc); font-weight: 500; font-size: .95rem; letter-spacing: .28em; color: color-mix(in srgb, var(--vellum) 75%, transparent); margin-bottom: .8rem; } .reserve h2 { font-size: 2.5rem; line-height: 1.15; color: var(--vellum); margin-bottom: .9rem; text-wrap: balance; } .reserve p { color: color-mix(in srgb, var(--vellum) 92%, transparent); max-width: 30rem; margin-inline: auto; } /* the pre-keeper placeholder where the signup form will sit */ .comingsoon { display: inline-block; margin-top: 2.4rem; font-family: var(--font-body-sc); font-weight: 500; font-size: 1.05rem; letter-spacing: .18em; color: var(--vellum); border: 1px solid color-mix(in srgb, var(--vellum) 40%, transparent); padding: .8rem 1.7rem; } .seatform { margin-top: 2.4rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } .seatform input { font-family: var(--font-body); font-size: 1rem; padding: .85rem 1.1rem; width: min(20rem, 100%); background: color-mix(in srgb, var(--char) 35%, var(--accent-2)); border: 1px solid color-mix(in srgb, var(--vellum) 30%, transparent); color: var(--vellum); } .seatform input::placeholder { color: color-mix(in srgb, var(--vellum) 45%, transparent); font-style: italic; } .seatform button { font-family: var(--font-body-sc); font-weight: 500; font-size: 1rem; letter-spacing: .14em; padding: .85rem 1.8rem; background: var(--vellum); color: var(--accent-2); border: none; cursor: pointer; } .seatform button:hover { background: var(--bone); } .seatform input:focus-visible, .seatform button:focus-visible { outline: 2px solid var(--vellum); outline-offset: 3px; } .reserve .fineprint { margin-top: 1.4rem; font-size: 1rem; font-style: italic; color: color-mix(in srgb, var(--vellum) 75%, transparent); } /* ── Footer ─────────────────────────────────────────────────────── */ footer { padding-block: 3.5rem 4rem; text-align: center; font-size: .95rem; color: var(--foxing-sepia); } footer .close-note { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--text-dim); margin-bottom: .8rem; } @media (max-width: 480px) { .hours { padding: 1.2rem 1.5rem 1.3rem; } .hours .open { font-size: 1.45rem; } }