/* * Driven Steakhouse — front-end styles for the menu / events / concierge / account app. * Design tokens mirror docs/SHARED-CONTRACT.md §1 (bronze on near-black, Oswald display, * Sorts Mill Goudy accents, Mulish body, ◆ ornaments). Scoped under .ds-app so it can * drop onto any WordPress theme. * * v1.5.0: the menu page is rebuilt Charlie-Palmer style (see art/reference/NOTES.md) — * photo-carousel hero with an overlapping title banner, pill book-switcher (CSS-only * radios), serif section headers with a bronze rule and ◆ terminator, two-column item * grids with the price on the name line (no dot leaders), the LET THEM EAT STEAK * feature panel, and the D-ring allergen footer. The shared .ds-carousel component * (scroll-snap strip, JS-off functional) also serves events / private dining / home. * * v1.6.0: the LIMITED FEATURE surfaces (.ds-feature-* / .ds-prev-*) — the current * showpiece under the banner-hero pattern plus the permanent Previous Features * grid — and the compact text-only weekly-special variant (.ds-special--text). */ /* Tokens live on :root (not only .ds-app) because modals + toasts are appended to . */ :root { --ds-bronze: #C19977; --ds-bronze-bright: #DDB78C; --ds-slate: #222D3B; --ds-bg-darkest: #090C0F; --ds-bg-dark: #10141A; --ds-card: #141922; --ds-ivory: #EDE6DA; --ds-silver: #B1B5B7; --ds-gray: #7C838B; --ds-border: rgba(193, 153, 119, 0.22); --ds-danger: #C07E6E; --ds-font-display: 'Oswald', 'Arial Narrow', sans-serif; --ds-font-serif: 'Sorts Mill Goudy', Georgia, serif; --ds-font-body: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif; } .ds-app { display: block; background: var(--ds-bg-darkest); color: var(--ds-silver); font-family: var(--ds-font-body); /* Fluid base: ~16.5px on phones → 18px on desktop (matches the theme body). */ font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem); line-height: 1.65; -webkit-font-smoothing: antialiased; } .ds-app *, .ds-app *::before, .ds-app *::after { box-sizing: border-box; } .ds-app img { max-width: 100%; display: block; } .ds-app a { color: var(--ds-bronze); text-decoration: none; } .ds-app a:hover { color: var(--ds-bronze-bright); } .ds-app button { font-family: var(--ds-font-body); cursor: pointer; } .ds-app :focus-visible { outline: 2px solid var(--ds-bronze); outline-offset: 2px; } .ds-root { padding: 34px 22px 64px; max-width: 920px; margin: 0 auto; } /* The menus page runs wider: two-column item grids need the room. */ .ds-app[data-ds-view="menu"] .ds-root { max-width: 1080px; } .ds-loading { padding: 60px 0; text-align: center; color: var(--ds-gray); letter-spacing: 3px; text-transform: uppercase; font-size: 0.78rem; } /* Page head with ◆ ornament */ .ds-page-head { text-align: center; margin: 6px 0 26px; } .ds-orn { display: block; color: var(--ds-bronze); font-size: 0.8rem; letter-spacing: 8px; margin-bottom: 12px; } .ds-tagline { font-family: var(--ds-font-serif); font-style: italic; color: var(--ds-silver); font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); margin: 8px auto 0; max-width: 600px; } /* Headings — fluid: confident at 1440w, graceful at 390w */ .ds-h1 { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); color: var(--ds-ivory); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.08; margin: 0; } .ds-h2 { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(1.4rem, 1.25rem + 0.55vw, 1.75rem); color: var(--ds-ivory); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 12px; } .ds-label { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ds-bronze); margin-bottom: 10px; } .ds-muted { color: var(--ds-gray); font-size: 0.95rem; } .ds-sub { color: var(--ds-silver); font-size: 1.02rem; margin: 0 0 22px; } .ds-hint { font-size: 0.8rem; color: var(--ds-gray); margin-top: 8px; } .ds-msg { min-height: 1.2em; color: var(--ds-danger); } /* Buttons — uppercase, letterspaced, square */ .ds-btn { display: inline-block; padding: 15px 36px; border: none; background: var(--ds-card); color: var(--ds-ivory); font-weight: 700; font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; transition: all 0.25s; text-align: center; border-radius: 0; } .ds-btn-primary { background: var(--ds-bronze); color: var(--ds-bg-darkest); } .ds-btn-primary:hover { background: var(--ds-bronze-bright); } .ds-btn-outline { background: transparent; color: var(--ds-bronze); border: 1px solid var(--ds-bronze); } .ds-btn-outline:hover { background: var(--ds-bronze); color: var(--ds-bg-darkest); } .ds-btn-ghost { background: transparent; color: var(--ds-silver); border: 1px solid var(--ds-border); } .ds-btn-ghost:hover { border-color: var(--ds-bronze); color: var(--ds-bronze); } .ds-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .ds-btn-block { display: block; width: 100%; } .ds-btn-sm { padding: 9px 18px; font-size: 0.68rem; } .ds-btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* Banner */ .ds-banner { background: rgba(193, 153, 119, 0.1); border: 1px solid var(--ds-border); color: var(--ds-silver); padding: 12px 16px; font-size: 0.85rem; margin-bottom: 20px; } /* * Branded photo block — a fixed-aspect frame on the card ground with a bronze * hairline. With an image: object-fit cover. Without (photos arrive over time via * WP Admin): the D-ring mark ghosted at ~12% opacity, centered — a deliberate * placeholder instead of empty space. */ .ds-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ds-card); border: 1px solid var(--ds-border); } .ds-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-photo--wide { aspect-ratio: 21 / 9; } .ds-photo--placeholder::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('../img/mark.png') center no-repeat; background-size: 46% auto; opacity: 0.12; } .ds-photo--wide.ds-photo--placeholder::after { background-size: auto 56%; } /* * ───────────────────────── PHOTO CAROUSEL (shared component) ───────────────────────── * Server-rendered scroll-snap strip: one slide ~92% wide with an edge-peek of its * neighbors, swipe/scroll/keyboard functional with JavaScript fully disabled. * Arrows + dots are .ds-js-only enhancements (ds-app.js / theme.js), autoplay is * gentle, pauses on interaction, and never runs under prefers-reduced-motion. * The theme's style.css carries a mirrored copy for plugin-less pages. */ .ds-carousel { position: relative; margin: 0 0 26px; } /* Wider than the text column, centered, never wider than the viewport. */ .ds-carousel--wide { width: min(100vw - 32px, 1280px); margin-left: 50%; transform: translateX(-50%); } .ds-carousel-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 4%; scroll-padding: 0 4%; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .ds-carousel-track::-webkit-scrollbar { display: none; } .ds-carousel-slide { flex: 0 0 92%; margin: 0; scroll-snap-align: center; background: var(--ds-card); border: 1px solid var(--ds-border); } .ds-carousel-slide img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; display: block; } .ds-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 1px solid var(--ds-border); border-radius: 0; background: rgba(9, 12, 15, 0.72); color: var(--ds-ivory); font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.25s; z-index: 3; padding: 0 0 4px; } .ds-carousel-arrow:hover { background: var(--ds-bronze); color: var(--ds-bg-darkest); border-color: var(--ds-bronze); } .ds-carousel-prev { left: 12px; } .ds-carousel-next { right: 12px; } .ds-carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; } .ds-carousel-dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 1px solid var(--ds-bronze); background: transparent; transition: background 0.25s; } .ds-carousel-dot.is-on { background: var(--ds-bronze); } .ds-carousel-dot:hover { background: var(--ds-bronze-bright); border-color: var(--ds-bronze-bright); } @media (max-width: 700px) { .ds-carousel-slide img { aspect-ratio: 4 / 3; } .ds-carousel-arrow { width: 38px; height: 38px; font-size: 1.4rem; } } /* * ───────────────────────── THE MENUS — hero + banner ───────────────────────── * Reference pattern (art/reference/NOTES.md #1): full-width photo carousel with a * solid banner overlapping its bottom-left carrying the page title. The banner * holds the H1, so it stays even when the Wine book hides the photo strip. */ .ds-menu-hero { margin-bottom: 10px; } .ds-menu-hero .ds-carousel { margin-bottom: 0; } .ds-menu-banner { position: relative; z-index: 2; display: inline-block; background: var(--ds-bronze); padding: 16px 34px 14px; margin-top: -34px; } .ds-menu-title { font-family: var(--ds-font-display); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-bg-darkest); line-height: 1.05; margin: 0; } .ds-menu-intro { font-family: var(--ds-font-serif); font-style: italic; color: var(--ds-silver); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); margin: 16px 0 0; max-width: 620px; } @media (max-width: 700px) { .ds-menu-banner { padding: 12px 22px 10px; margin-top: -24px; } } /* * ───────────────────────── THE MENUS — book switcher (pills) ───────────────────────── * CSS-only switching for the SERVER-RENDERED menu (five books as of v1.5.0): * visually hidden radios precede the hero, the pill bar, and the panels; * `:checked ~` sibling rules pick the active panel, fill the active pill, and * swap the hero carousel. Works with JavaScript disabled, delayed, or blocked. * Keyboard: the radios stay focusable (arrow keys switch books). * If CSS itself never loads, panels stack — each section keeps its heading. */ .ds-tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .ds-tabs { display: flex; justify-content: center; gap: 12px; margin: 26px 0 44px; flex-wrap: wrap; } .ds-tab { display: inline-block; padding: 12px 30px; background: transparent; border: 1px solid var(--ds-bronze); color: var(--ds-bronze); font-family: var(--ds-font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; transition: all 0.25s; cursor: pointer; text-align: center; } .ds-tab:hover { background: rgba(193, 153, 119, 0.14); color: var(--ds-bronze-bright); } .ds-menu-body .ds-tab-panel { display: none; } #ds-tab-dinner:checked ~ .ds-menu-body .ds-tab-panel[data-tab="dinner"], #ds-tab-brunch:checked ~ .ds-menu-body .ds-tab-panel[data-tab="brunch"], #ds-tab-dessert:checked ~ .ds-menu-body .ds-tab-panel[data-tab="dessert"], #ds-tab-drinks:checked ~ .ds-menu-body .ds-tab-panel[data-tab="drinks"], #ds-tab-wine:checked ~ .ds-menu-body .ds-tab-panel[data-tab="wine"] { display: block; } #ds-tab-dinner:checked ~ .ds-tabs .ds-tab[for="ds-tab-dinner"], #ds-tab-brunch:checked ~ .ds-tabs .ds-tab[for="ds-tab-brunch"], #ds-tab-dessert:checked ~ .ds-tabs .ds-tab[for="ds-tab-dessert"], #ds-tab-drinks:checked ~ .ds-tabs .ds-tab[for="ds-tab-drinks"], #ds-tab-wine:checked ~ .ds-tabs .ds-tab[for="ds-tab-wine"] { background: var(--ds-bronze); color: var(--ds-bg-darkest); } #ds-tab-dinner:focus-visible ~ .ds-tabs .ds-tab[for="ds-tab-dinner"], #ds-tab-brunch:focus-visible ~ .ds-tabs .ds-tab[for="ds-tab-brunch"], #ds-tab-dessert:focus-visible ~ .ds-tabs .ds-tab[for="ds-tab-dessert"], #ds-tab-drinks:focus-visible ~ .ds-tabs .ds-tab[for="ds-tab-drinks"], #ds-tab-wine:focus-visible ~ .ds-tabs .ds-tab[for="ds-tab-wine"] { outline: 2px solid var(--ds-bronze); outline-offset: 2px; } /* No-JS deep links (/menu/#item-…): surface the panel containing the target too. */ .ds-menu-body .ds-tab-panel:has(:target) { display: block; } /* The hero carousel follows the book: food photos by default, drink photos on the Drinks book, none on Wine (the banner/title stays put). */ .ds-menu-hero .ds-carousel--drinks { display: none; } #ds-tab-drinks:checked ~ .ds-menu-hero .ds-carousel--food { display: none; } #ds-tab-drinks:checked ~ .ds-menu-hero .ds-carousel--drinks { display: block; } #ds-tab-wine:checked ~ .ds-menu-hero .ds-menu-hero-media { display: none; } #ds-tab-wine:checked ~ .ds-menu-hero .ds-menu-banner { margin-top: 0; } /* * JS gating: controls that only work once a script has attached (.ds-js-only) stay * hidden until ds-app.js/theme.js adds `js-enabled` to ; the no-JS fallback * copy (.ds-nojs-note) does the inverse. An optimizer delaying scripts therefore * shows the honest call-us state, never a dead button. */ html:not(.js-enabled) .ds-js-only { display: none !important; } html.js-enabled .ds-nojs-note { display: none !important; } /* * ───────────────────────── THE MENUS — sections + items ───────────────────────── * Three-tier hierarchy per the reference (NOTES.md #3): serif section header with * a thin bronze rule running to the column edge, ◆ terminator; bold-caps item * names with the price right-aligned on the SAME line by plain whitespace (no dot * leaders — and with prices hidden the line is simply the name); sentence-case * descriptions beneath. Two independent columns on desktop, one below 800px. * No divider rules between items — whitespace does the separating. */ .ds-menu-section { margin: 0 0 54px; } .ds-section-head { display: flex; align-items: baseline; gap: 18px; margin: 0 0 6px; } .ds-section-head .ds-h2 { font-family: var(--ds-font-serif); font-weight: 400; text-transform: none; color: var(--ds-bronze); letter-spacing: 0.02em; font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.9rem); margin: 0; flex: none; } .ds-section-rule { flex: 1; display: flex; align-items: center; gap: 0; transform: translateY(-6px); } .ds-section-rule::before { content: ''; flex: 1; height: 1px; background: var(--ds-bronze); opacity: 0.55; } .ds-section-rule i { font-style: normal; color: var(--ds-bronze); font-size: 0.62rem; margin-left: 8px; } .ds-section-note { font-family: var(--ds-font-serif); font-style: italic; color: rgba(193, 153, 119, 0.8); font-size: 1.02rem; margin: 2px 0 10px; } .ds-items { margin-top: 18px; } @media (min-width: 800px) { .ds-items { columns: 2; column-gap: 64px; } .ds-item { break-inside: avoid; -webkit-column-break-inside: avoid; } } .ds-item { margin: 0 0 26px; } .ds-item.is-hilite { background: rgba(193, 153, 119, 0.08); outline: 8px solid rgba(193, 153, 119, 0.08); } .ds-item-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ds-item-name { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.18rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ivory); line-height: 1.35; } .ds-item-price { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.04em; color: var(--ds-bronze); white-space: nowrap; margin-left: auto; padding-left: 14px; } /* * "Market Price" (v1.5.1): food at/above the market-price threshold. Serif italic * (Sorts Mill Goudy) inside the Oswald price slot — the fine-menu convention, read * as a deliberate mark rather than a missing number. Slightly upsized so the serif * x-height sits level with the Oswald numerals; same bronze; consistent everywhere * .ds-item-price appears — item grids, pour lists, wine, and the feature panel * (which only scales the em via its larger slot font-size). */ .ds-item-price .ds-mp { font-family: var(--ds-font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0.03em; font-size: 1.08em; } .ds-item-desc { color: var(--ds-silver); font-size: 0.95rem; line-height: 1.6; margin: 4px 0 0; font-weight: 300; max-width: 46ch; } /* The showpiece: LET THEM EAT STEAK — a bordered, centered feature panel spanning both columns (the reference's boxed-buffet treatment on our dark ground). */ .ds-item--feature { column-span: all; -webkit-column-span: all; border: 1px solid var(--ds-bronze); box-shadow: inset 0 0 0 5px var(--ds-bg-darkest), inset 0 0 0 6px var(--ds-border); background: var(--ds-bg-dark); padding: 34px 30px 30px; margin: 18px 0 30px; text-align: center; } .ds-item--feature .ds-orn { font-size: 0.66rem; letter-spacing: 6px; margin-bottom: 12px; } .ds-item--feature .ds-item-top { display: block; } .ds-item--feature .ds-item-name { display: block; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem); letter-spacing: 0.12em; } .ds-item--feature .ds-item-price { display: inline-block; margin: 8px 0 0; padding: 0; font-size: 1.15rem; } .ds-item--feature .ds-badge + .ds-item-price { margin-left: 12px; } /* breathing room after a badge (e.g. SIGNATURE · Market Price) */ .ds-item--feature .ds-badge { margin-top: 10px; } .ds-item--feature .ds-item-desc { margin: 12px auto 0; max-width: 54ch; } /* * The menu footer (NOTES.md #7): centered D-ring mark, the allergen disclaimer as * a small centered italic paragraph, capped with a thin bronze rule. Silver, not * gray: small text on the darkest ground must hold ≥4.5:1. */ .ds-menu-foot { margin: 46px auto 0; max-width: 720px; text-align: center; } .ds-menu-foot-mark { display: block; width: 54px; height: 54px; margin: 0 auto 16px; background: url('../img/mark.png') center / contain no-repeat; opacity: 0.5; } .ds-menu-footnote { font-family: var(--ds-font-serif); font-style: italic; color: var(--ds-silver); font-size: 0.88rem; font-weight: 300; line-height: 1.7; margin: 0 0 22px; } .ds-menu-foot-rule { display: block; width: 180px; height: 1px; margin: 0 auto; background: var(--ds-bronze); opacity: 0.6; } /* * ───────────────────────── LIMITED FEATURE ───────────────────────── * The rotating showpiece plate: gallery carousel under the bronze banner (the * menus-page hero pattern — .ds-menu-hero/.ds-menu-banner are reused), the * feature title as the serif section header, the description at a full reading * measure, then the permanent PREVIOUS FEATURES card grid. Archived singles * (/previous-features//) reuse the same pieces via feature_single(). */ .ds-feature-bare .ds-menu-banner { margin-top: 0; } /* no carousel → the banner sits flush */ .ds-feature { margin-top: 34px; } .ds-feature-desc { max-width: 68ch; color: var(--ds-silver); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); font-weight: 300; line-height: 1.75; margin-top: 16px; } .ds-feature-desc p { margin: 0 0 1.1em; } .ds-feature-desc p:last-child { margin-bottom: 0; } .ds-feature-desc strong { color: var(--ds-ivory); } .ds-feature-empty { text-align: center; margin: 44px auto 10px; max-width: 560px; } .ds-feature-empty-note { font-family: var(--ds-font-serif); font-style: italic; color: var(--ds-silver); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem); line-height: 1.7; margin: 0; } .ds-feature-back { margin: 34px 0 0; } .ds-feature-back a { font-size: 0.82rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } /* PREVIOUS FEATURES — the permanent archive grid */ .ds-prev { margin-top: 64px; } .ds-prev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; margin-top: 22px; } .ds-prev-card { display: block; background: var(--ds-card); border: 1px solid var(--ds-border); transition: border-color 0.3s, transform 0.3s; } .ds-prev-card:hover { border-color: var(--ds-bronze); transform: translateY(-3px); } .ds-prev-card .ds-photo { display: block; border: 0; border-bottom: 1px solid var(--ds-border); } .ds-prev-body { display: block; padding: 16px 18px 18px; } .ds-prev-title { display: block; font-family: var(--ds-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ivory); line-height: 1.3; } .ds-prev-date { display: block; margin-top: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ds-bronze); } /* Weekly special card */ .ds-special { display: flex; align-items: center; gap: 18px; background: var(--ds-card); border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-bronze); padding: 18px 20px; margin: 26px 0 0; } /* No image set → compact text-only card (no placeholder block — placeholders belong on menu items, not on the special). */ .ds-special--text { padding: 16px 20px; } .ds-special .ds-special-photo { flex: 0 0 116px; width: 116px; } .ds-special-text { flex: 1; min-width: 0; } .ds-special.is-link { cursor: pointer; } .ds-special.is-link:hover { border-color: var(--ds-bronze); } .ds-special-kicker { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--ds-bronze); margin-bottom: 6px; } .ds-special-title { display: block; font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ds-ivory); } .ds-special-sub { display: block; color: var(--ds-silver); font-size: 0.98rem; margin-top: 4px; } /* Luxury badges */ .ds-badge { font-size: 0.62rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ds-bronze-bright); background: var(--ds-slate); padding: 3px 9px; border-radius: 2px; } /* Menu hearts */ .ds-heart { background: none; border: none; color: var(--ds-bronze); font-size: 1rem; line-height: 1; padding: 2px 4px; } .ds-heart:hover { color: var(--ds-bronze-bright); } .ds-heart.is-on { color: var(--ds-bronze-bright); } /* Events */ .ds-events { display: flex; flex-direction: column; gap: 22px; } .ds-event { background: var(--ds-card); border: 1px solid var(--ds-border); overflow: hidden; } /* Flier/photo: shown whole (fliers are usually portrait posters) on the card ground. */ .ds-event-media { display: flex; justify-content: center; background: var(--ds-bg-dark); border-bottom: 1px solid var(--ds-border); } .ds-event-media img { display: block; max-width: 100%; height: auto; max-height: 480px; object-fit: contain; } /* No flier yet → the ghosted-mark placeholder, flush with the card edges. */ .ds-event > .ds-event-photo { border: 0; border-bottom: 1px solid var(--ds-border); } .ds-event-body { padding: 22px 24px 24px; } .ds-event-date { font-size: 0.74rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ds-bronze); margin-bottom: 8px; } .ds-event-meta { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; margin: 10px 0 16px; } .ds-event-price { font-family: var(--ds-font-display); font-weight: 600; letter-spacing: 0.04em; color: var(--ds-ivory); font-size: 1.15rem; } .ds-event-seats { color: var(--ds-gray); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; } .ds-onlist { color: var(--ds-bronze-bright); font-weight: 700; font-size: 0.9rem; margin: 0 0 10px; } .ds-rsvp-form { border-top: 1px solid var(--ds-border); padding-top: 16px; } /* Event descriptions reuse .ds-item-desc — let them fill the card. */ .ds-event .ds-item-desc { max-width: none; } /* Stepper */ .ds-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ds-border); } .ds-stepper button { width: 36px; height: 36px; background: transparent; border: none; color: var(--ds-bronze); font-size: 1.15rem; } .ds-stepper span { min-width: 36px; text-align: center; color: var(--ds-ivory); font-weight: 700; font-size: 0.92rem; } /* Forms */ .ds-form { max-width: 640px; margin: 0 auto; } .ds-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .ds-field { margin-bottom: 14px; } .ds-field label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ds-gray); margin-bottom: 6px; } .ds-input { width: 100%; padding: 14px 16px; background: var(--ds-card); border: 1px solid var(--ds-border); color: var(--ds-ivory); font-family: var(--ds-font-body); font-size: 1rem; border-radius: 0; } .ds-input:focus { outline: none; border-color: var(--ds-bronze); box-shadow: 0 0 0 3px rgba(193, 153, 119, 0.12); } .ds-input::placeholder { color: rgba(124, 131, 139, 0.7); } textarea.ds-input { resize: vertical; min-height: 110px; } /* Dark-scheme native pickers (date/time) */ .ds-app input[type="date"], .ds-app input[type="time"] { color-scheme: dark; } /* Account rows / switches */ .ds-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ds-border); } .ds-row-label { color: var(--ds-gray); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; } .ds-row-value { color: var(--ds-ivory); font-size: 0.95rem; } .ds-switch { position: relative; flex: 0 0 46px; width: 46px; height: 26px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: 40px; transition: all 0.25s; cursor: pointer; } .ds-switch.on { background: var(--ds-bronze); border-color: var(--ds-bronze); } .ds-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ds-ivory); transition: transform 0.25s; } .ds-switch.on::after { transform: translateX(20px); background: var(--ds-bg-darkest); } .ds-history-meta { color: var(--ds-gray); font-size: 0.78rem; margin-top: 3px; } /* Birthday moment */ .ds-bday { background: linear-gradient(135deg, rgba(193, 153, 119, 0.16), rgba(221, 183, 140, 0.06)); border: 1px solid var(--ds-bronze); color: var(--ds-ivory); padding: 14px 18px; margin: 0 0 20px; font-size: 0.92rem; } /* Announcements */ .ds-ann { padding: 12px 0; border-bottom: 1px solid var(--ds-border); } .ds-ann:last-child { border-bottom: none; } .ds-ann-kind { font-size: 0.6rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ds-bronze); margin-bottom: 4px; } /* Modal */ .ds-modal-scrim { position: fixed; inset: 0; background: rgba(4, 6, 8, 0.82); z-index: 100000; display: flex; align-items: flex-end; justify-content: center; padding: 0; } @media (min-width: 720px) { .ds-modal-scrim { align-items: center; padding: 24px; } } .ds-modal { background: var(--ds-bg-dark); color: var(--ds-silver); font-family: var(--ds-font-body); border: 1px solid var(--ds-border); width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .ds-modal-body { padding: 26px; } .ds-modal .ds-btn { border-radius: 0; } /* Toast */ .ds-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ds-bronze); color: var(--ds-bg-darkest); padding: 13px 26px; font-weight: 800; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; z-index: 100001; opacity: 0; transition: all 0.3s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-family: var(--ds-font-body); } .ds-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* No-JS fallback copy (shown until a script attaches — see the gating rules above) */ .ds-nojs-note { margin: 10px 0 0; } /* Reduced motion: no smooth scrolling surprises anywhere in the app. */ @media (prefers-reduced-motion: reduce) { .ds-app *, .ds-carousel-track { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* Phone widths */ @media (max-width: 640px) { .ds-root { padding: 22px 16px 44px; } .ds-form-grid { grid-template-columns: 1fr; } .ds-special .ds-special-photo { flex-basis: 92px; width: 92px; } .ds-tabs { gap: 8px; } .ds-tab { padding: 10px 16px; font-size: 0.72rem; letter-spacing: 2px; } /* five pills — wrap 3+2 cleanly */ .ds-section-head { gap: 12px; } .ds-item--feature { padding: 26px 18px 24px; } .ds-app [style*="max-width"] { max-width: 100% !important; } }