/* ============================================================================ THE RUTHERFORD — oktoberfest.css ---------------------------------------------------------------------------- Self-contained stylesheet for /oktoberfest. Every rule this page needs beyond the shared chassis (reset, type, spacing, nav, footer, buttons — all in styles.css) lives here. Nothing in styles.css was touched to build this page. THE LOOK: a Bavarian beer-tent poster, not another press-sheet page. Like every other themed page (F1, Bills, Clemson), it keeps the site's cream stock and only swaps the accent ink — here to Bavarian flag blue. The house green never appears in it. HOW IT PLUGS IN: styles.css is built on CSS custom properties (--tr-paper, --tr-text, --accent, etc.) that every shared component already reads from — buttons, the plate-type headline, the eyebrow micro-label, rules, links. `.theme-oktoberfest` below rebinds those same tokens the same way `.theme-f1`/`.theme-clemson` do, so the shared components retint automatically without duplicating their CSS here. One exception: the nav pill and footer are a hardcoded green field (styles.css §8/§13, literal #3E3F34 and rgba(243,232,206,…) — not tokens), the same on every other themed page. This page is the one place that field goes blue instead, so §2 below restates those same literal rules with the page's own blue and off-white in place of the house colours. Structure of this file: 1. THEME TOKENS — the blue + off-white system, scoped to .theme-oktoberfest 2. NAV & FOOTER — overriding the site's hardcoded green field to blue 3. DIAMOND PATTERN — the Bavarian Rautenmuster, as a reusable background 4. HERO 5. FEST HIGHLIGHTS — Steins / Pretzels / Wurst 6. SCHEDULE — the five Saturdays 7. BOOKING BAND 8. CLOSER ========================================================================= */ /* ============================================================================ 1. THEME TOKENS ---------------------------------------------------------------------------- Scoped to the class alone (not `body.theme-oktoberfest`), matching every other theme-* block in styles.css — it also works on a single container, not just . ========================================================================= */ .theme-oktoberfest { /* — Stock: the house cream, same as every other page. --tr-paper still drives the body background and every shared card/plate-type component that reads it. */ --tr-paper: #F3E8CE; --tr-paper-deep: #E7E5DC; --tr-paper-edge: #D6DCE6; /* a cool, blue-leaning edge tone instead of the warm house one */ /* — Ink: deep navy instead of the house green. 12.7:1 on --tr-paper. */ --tr-text: #14213D; --tr-text-soft: #52607E; /* large display only — ~5.3:1, clears large-text AA */ /* — Second primary: same navy, doing graphics duty (rules, keylines) — same relationship --tr-tan has to --tr-text on every other page. */ --tr-tan: #14213D; --tr-tan-pale: #AEB7CC; /* — THE ACCENT: Bavarian flag blue. 9.4:1 on --tr-paper — comfortably text-safe, so --accent and --accent-deep can match like most themes. */ --accent: #0F3D91; --accent-deep: #0F3D91; --accent-on: #F3E8CE; --accent-ghost: #071B3D; /* — Second plate: a mustard/gold, the one warm note a real beer tent always carries (rope trim, pretzel crust, tent piping) — decorative only, same contract --accent-soft carries everywhere else. */ --accent-soft: #C89A3E; /* — Page-local tokens, not part of the shared system: the diamond count and size at each breakpoint, kept as custom properties so the hero and closer bands can share one definition. */ --ok-diamond: 56px; } @media (min-width: 700px) { .theme-oktoberfest { --ok-diamond: 72px; } } /* ============================================================================ 2. NAV & FOOTER ---------------------------------------------------------------------------- styles.css paints the nav pill, its dropdown/mobile panel, and the footer with a LITERAL #3E3F34 and literal rgba(243,232,206,…) cream text — not custom properties — specifically so no theme-* class could accidentally shift them (see styles.css §8/§13 comments). This page overrides those same literal rules on purpose, but NOT the same way in both places: - The FOOTER stays the house green field's blue counterpart — this page's --accent, off-white text, same structure as the house rule. - The NAV goes the other way: the off-white stock itself (with the same paper grain that textures the rest of the page), so it reads as a strip of the sheet rather than a printed plate. That flips every text/icon/ border colour inside it from "off-white on a dark field" to "ink or accent on a light one" — every rule below that touches the nav restates its colour for that reason, not just its field. ========================================================================= */ /* — Footer: blue field, same device as the house green — */ .theme-oktoberfest .site-footer { background-color: var(--accent); } .theme-oktoberfest .footer-facts__item p, .theme-oktoberfest .site-footer a:not(.btn) { color: rgba(243, 232, 206, 0.88); } .theme-oktoberfest .btn--onbrown.btn--ghost:hover { background: rgba(243, 232, 206, 0.16); } /* — Nav: the off-white stock, not a colour field — */ .theme-oktoberfest .topnav-container, .theme-oktoberfest .nav-drop__menu, .theme-oktoberfest .topnav { background-color: var(--tr-paper); background-image: url('images/paper-grain.webp'); background-size: 150px 150px; background-blend-mode: multiply; } /* Default link colour — ink, held short of full so the active/hover state (below) has somewhere to go, same "dim vs full" mechanism the house rule uses, just ink instead of cream. */ .theme-oktoberfest .nav-link, .theme-oktoberfest .nav-drop__toggle, .theme-oktoberfest .topnav a.nav-link { color: rgba(20, 33, 61, 0.75); } /* The house rule's hover/current colour is var(--tr-paper) — on a green or blue field that's the stock colour popping forward; on this page's paper nav that token IS the field, so left alone the active state would vanish into its own background. Accent (this page's blue) takes over the job. */ .theme-oktoberfest .nav-link:hover, .theme-oktoberfest .nav-link[aria-current="page"], .theme-oktoberfest .nav-drop__toggle:hover, .theme-oktoberfest .nav-drop__toggle[aria-expanded="true"], .theme-oktoberfest .nav-drop:has(.nav-link[aria-current="page"]) .nav-drop__toggle, .theme-oktoberfest .topnav a.nav-link:hover, .theme-oktoberfest .topnav a.nav-link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } .theme-oktoberfest .nav-drop__menu .nav-link:hover, .theme-oktoberfest .nav-drop__menu .nav-link[aria-current="page"] { background: rgba(15, 61, 145, 0.08); } /* Matches styles.css's own @media (max-width: 980px) boundary exactly — this is the mobile slide-in panel's divider between stacked links, not the hover/current-page underline above. Left unscoped it would draw a visible rule under every desktop nav item too. */ @media (max-width: 980px) { .theme-oktoberfest .topnav a.nav-link, .theme-oktoberfest .nav-drop__toggle { border-bottom-color: rgba(20, 33, 61, 0.16); } } /* Reserve CTA — ghost plate in ink/accent instead of the house rule's stock-colour keyline, for the same reason the link colours above flipped: var(--tr-paper) IS this nav's field now, not a colour popping off it. */ .theme-oktoberfest .nav-link-reserve { color: var(--accent); border-color: var(--accent); } .theme-oktoberfest .nav-link-reserve:hover { background: rgba(15, 61, 145, 0.08); color: var(--accent); border-color: var(--accent); } /* Hamburger icon — currentColor via var(--tr-paper) normally, same fix */ .theme-oktoberfest .icon { color: var(--accent); } /* Wordmark — .nav-logo and .footer-logo share one rule that paints the mask in var(--tr-paper) (styles.css §8), which is exactly right on the footer's blue field but would erase the mark into its own background now that the nav's field IS --tr-paper. .footer-logo is untouched; only the nav's own mark needs the opposite fill. */ .theme-oktoberfest .nav-logo { background-color: var(--accent); } /* ============================================================================ 3. DIAMOND PATTERN — the Rautenmuster ---------------------------------------------------------------------------- The Bavarian flag's blue-and-white diamond field. Each tile is a square (an axis-aligned ) holding one diamond — a square ROTATED 90° onto its corners (an SVG touching the midpoint of each tile edge). Tiled edge to edge, every tile's diamond touches its four neighbours' at those midpoints, and the off-white background left over at each corner forms the alternating diamond in between — the same two-tone checkerboard as the flag, just rotated 90° into proper diamonds instead of squares. An SVG tile (not a gradient trick) so the shape is exact — a rotated square must be a true rhombus, not an approximation. Hardcoded to blue and the off-white stock regardless of any accent shift, so the pattern always reads as the two-tone flag field it's named for. The house paper fibre (images/paper-grain.webp) rides on top, multiplied over the diamonds exactly the way body/.trade-card multiply it over the stock elsewhere (styles.css §6/§10) — same asset, same blend mode, so the pattern reads as printed ink on stock rather than a flat digital tile. */ .ok-diamonds { background-image: url('images/paper-grain.webp'), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23F3E8CE'/%3E%3Cpolygon points='50,0 100,50 50,100 0,50' fill='%230F3D91'/%3E%3C/svg%3E"); background-size: 150px 150px, var(--ok-diamond) var(--ok-diamond); /* Centred, not the 0 0 default — anchors the diamond grid on the middle of whichever box it's painted on (the full-bleed hero, the CTA panel, the closer panel) instead of its top-left corner, so the tiling reads as symmetric around the content rather than cropped arbitrarily at one edge depending on that box's width. */ background-position: center; background-blend-mode: multiply, normal; } /* Thin trim variant — a ribbon rather than a field, for edges/dividers */ .ok-diamonds--trim { --ok-diamond: 28px; height: 14px; } /* ============================================================================ 4. HERO ---------------------------------------------------------------------------- A beer-tent poster, not F1's photo-less split hero: an edge-to-edge, full-screen diamond field (the section itself carries .ok-diamonds — no .wrap around it, so the background runs the full viewport width) behind a single centred off-white card carrying the headline, the dates, and the actions. 100svh rather than 100vh so mobile browser chrome (the address bar showing/hiding) doesn't make the section jump as it resizes. ========================================================================= */ .ok-hero { /* Tucks the hero under the floating nav pill instead of starting below it: pulled up by the pill's own rendered height (--nav-h, styles.css §2/§8 — margin-top + both paddings + the logo's height) so the diamond field runs from the true top of the page, with the sticky pill (z-index 40, its own stacking context) floating over it. Page-specific — every other themed page keeps the nav pushing its hero down in normal flow. */ margin-top: calc(-1 * var(--nav-h)); min-height: 100svh; display: flex; align-items: center; padding-block: var(--space-xl); } .ok-hero__card { max-width: 760px; margin-inline: auto; padding: var(--space-l) var(--space-l) var(--space-xl); background-color: var(--tr-paper); border-radius: var(--radius-lg); border: 3px solid var(--accent); box-shadow: 0 14px 40px rgba(7, 27, 61, 0.35); text-align: center; } @media (min-width: 700px) { .ok-hero__card { padding: var(--space-xl) var(--space-2xl); } } .ok-hero__title { margin: 0 0 var(--space-m); } /* The "Oktoberfest" wordmark is the brand logo, not set type — the H1's text content stays in the DOM (.visually-hidden) for SEO/a11y while this image is what actually renders. */ .ok-hero__logo { display: block; width: min(600px, 100%); height: auto; margin-inline: auto; } .ok-hero__sub { display: block; font-family: var(--tr-font-display); text-transform: uppercase; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); letter-spacing: 0.04em; color: var(--tr-text); margin-top: var(--space-xs); } .ok-hero__lede { max-width: 52ch; margin-inline: auto; } .ok-hero__dates { display: inline-flex; align-items: center; gap: var(--space-xs); margin: var(--space-m) 0; padding: var(--space-xs) var(--space-m); background: var(--accent); color: var(--accent-on); border-radius: var(--pill); font-family: var(--tr-font-mono); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .ok-hero .btn-row { justify-content: center; } /* ============================================================================ GALLERY + INTRO — photo rail right under the hero, then the intro copy spanning the full .wrap (not the shared .lede's 62ch measure) so it reads as a wide banner line under the photos rather than another narrow lede. Sections stack their own padding-block (styles.css §12) — dropped between just these two so the intro line sits close under the photos instead of with a full section gap. ========================================================================= */ .lede--full { max-width: none; } #gallery { padding-bottom: 0; } #intro { padding-top: var(--space-m); } /* ============================================================================ 5. FEST HIGHLIGHTS — Steins / Pretzels / Wurst ========================================================================= */ .ok-highlight-card { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-l); background: var(--tr-paper); border: 2px solid var(--accent); border-radius: var(--radius-m); box-shadow: 4px 4px 0 var(--accent-soft); } .ok-highlight-card__icon { width: 48px; height: 48px; color: var(--accent); flex: none; } .ok-highlight-card__icon svg, .ok-highlight-card__icon img { width: 100%; height: 100%; display: block; } .ok-highlight-card h3 { margin: 0; font-family: var(--tr-font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--step-2); color: var(--accent-deep); } .ok-highlight-card p { margin: 0; } /* ============================================================================ 6. SCHEDULE — the six Saturdays ========================================================================= */ .ok-schedule__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s); margin-top: var(--space-l); } @media (min-width: 700px) { .ok-schedule__row { grid-template-columns: repeat(6, 1fr); } } .ok-date-chip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); padding: var(--space-m) var(--space-xs); background: var(--tr-paper); border: 2px dashed var(--accent); border-radius: var(--radius-m); text-align: center; } .ok-date-chip__day { font-family: var(--tr-font-mono); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tr-text-soft); } .ok-date-chip__date { font-family: var(--tr-font-display); text-transform: uppercase; font-size: var(--step-2); line-height: 1; color: var(--accent-deep); } /* ============================================================================ 7. BOOKING BAND ---------------------------------------------------------------------------- Same device as the hero: the diamond field is a frame, never the ground text sits on directly — half its squares are off-white, so anything laid straight over it reads fine on the blue half and vanishes on the light half. A solid inner panel keeps contrast constant everywhere. ========================================================================= */ .ok-cta { padding-block: var(--space-l); } .ok-cta__field { padding: var(--space-l) var(--gutter); border-radius: var(--radius-lg); border: 3px solid var(--accent); } .ok-cta__panel { max-width: 760px; margin-inline: auto; padding: var(--space-xl) var(--space-l); background: var(--accent); border-radius: var(--radius-lg); text-align: center; } @media (min-width: 700px) { .ok-cta__panel { padding: var(--space-xl) var(--space-2xl); } } .ok-cta__panel .eyebrow { color: var(--accent-on); } .ok-cta__panel h2 { color: var(--accent-on); margin-top: 0; } .ok-cta__panel p { max-width: 52ch; margin-inline: auto; color: var(--accent-on); } .ok-cta__panel .btn-row { justify-content: center; } /* On the solid blue panel the ink-bordered ghost button would vanish — invert it to the stock colour, same device styles.css already uses for .btn--onbrown on the house green footer/nav. */ .ok-cta__panel .btn--ghost { border-color: var(--accent-on); color: var(--accent-on); } .ok-cta__panel .btn--ghost:hover { background: rgba(243, 232, 206, 0.16); color: var(--accent-on); } /* ============================================================================ 8. CLOSER ---------------------------------------------------------------------------- Same diamond-frame-around-a-solid-panel device as the hero and the booking band above — .plate-type's hollow-letter trick only reads correctly when the panel it sits on actually IS --tr-paper (styles.css's own rule for the component), so the panel here is solid off-white, never the pattern. ========================================================================= */ .ok-closer { padding-block: var(--space-l) var(--space-xl); } .ok-closer__field { padding: var(--space-l) var(--gutter); border-radius: var(--radius-lg); border: 3px solid var(--accent); } .ok-closer__panel { max-width: 640px; margin-inline: auto; padding: var(--space-xl) var(--space-l); background: var(--tr-paper); border-radius: var(--radius-lg); border: 3px solid var(--accent); text-align: center; } .ok-closer .plate-type { display: inline-block; } .ok-closer__sub { margin-top: var(--space-xs); font-size: var(--step-2); }