/* ========================================================================== MONTE KUTS -- DESIGN SYSTEM Direction: "The Chair" (BUILD-SPEC.md section 4). Dark studio ground so the work photographs glow. Premium, sharp, restrained. The photography is the design; the interface gets out of its way. This is the ONE stylesheet for all 8 pages. Every component the site needs lives here, even ones index.html and 404.html do not use themselves (gallery filter chips, price tables, FAQ, forms), so the remaining pages can be built against this file without editing it. Sections are ordered: 1. Tokens 8. Sticky mobile action bar 15. FAQ 2. Reset + base 9. Hero 16. Forms 3. Layout 10. Image bands / proof strip 17. CTA band 4. Accessibility 11. Craft cards 18. Footer 5. Type utilities 12. Numbered steps 19. 404 6. Buttons 13. Gallery + scroll-snap 20. Scroll reveal 7. Header / nav 14. Filter chips 21. Utilities Fonts (Archivo 500/800, Instrument Serif 400 roman+italic) are self-hosted and declared in fonts.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS Primitive tokens are BUILD-SPEC's exact palette. Semantic tokens are the aliases every component below actually uses, so `.ground-light` (the services.html inversion) can flip the whole system by redefining ONE layer instead of touching every component. -------------------------------------------------------------------------- */ :root { /* Primitives -- BUILD-SPEC section 4 */ --carbon: #0B0B0A; --espresso: #17120E; --gold: #D6A85F; --gold-lo: #8A6B3A; --paper: #F2E9DA; --steel: #9A948C; --line: rgba(242, 233, 218, .14); /* Semantic (dark ground, the default on every page except services.html) */ --bg: var(--carbon); --surface: var(--espresso); --ink: var(--paper); --ink-soft: var(--steel); --accent: var(--gold); --accent-lo: var(--gold-lo); --border: var(--line); --focus: var(--gold); --scrim: 11, 11, 10; /* rgb triplet of --carbon, for rgba() scrims */ /* Type */ --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-accent: 'MK Serif', ui-serif, Georgia, 'Times New Roman', serif; /* Spacing scale */ --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --section-pad: clamp(3.5rem, 8vw, 7rem); /* Layout */ --container: 1200px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --radius: 4px; /* Motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --dur-reveal: 500ms; --stagger: 60ms; /* Stacking */ --z-skip: 80; --z-nav: 40; --z-action-bar: 50; } /* services.html inversion: light ground, dark ink. Apply `ground-light` on . A 24-row price table is a reading task, not a mood; see BUILD-SPEC section 4 for why this inversion is deliberate. */ .ground-light { --bg: var(--paper); --surface: #FFFFFF; --ink: var(--carbon); --ink-soft: #55504A; --border: rgba(11, 11, 10, .14); --scrim: 242, 233, 218; } /* -------------------------------------------------------------------------- 2. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; } .proof-strip picture, .craft-card__media picture, .gallery__item picture { width: 100%; height: 100%; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; } p { max-width: 68ch; } p + p { margin-top: 1em; } /* Instrument Serif signature gesture: an italic accent phrase inside a heading. Scoped to headings only (never body copy), per BUILD-SPEC: "at most one per section." */ h1 em, h2 em, .heading-accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--accent); } /* prefers-reduced-motion: reduce everywhere by default; components opt IN to motion, never opt out. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 3. LAYOUT -------------------------------------------------------------------------- */ .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); } .section--tight { padding-block: calc(var(--section-pad) * .6); } /* Full-bleed band: an image or color block that breaks the container. */ .band { position: relative; overflow: hidden; } .split { display: grid; gap: var(--space-4); } /* Grid items default to `min-width: auto`, so a wide child (the 640px-min price table) stretches its whole track and pushes sibling text off-screen. With `overflow-x: hidden` on body the clipped text is then unreachable: on locs.html this silently ate the back half of a sentence at 390px. */ .split > * { min-width: 0; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-6); } } /* 1px gold-lo hairline divider. Used sparingly (never more than one per screen per BUILD-SPEC). */ .hairline { border: 0; border-top: 1px solid var(--accent-lo); margin-block: var(--space-6); } /* -------------------------------------------------------------------------- 4. ACCESSIBILITY -------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-skip); background: var(--accent); color: var(--carbon); font-weight: 500; padding: .85em 1.5em; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 5. TYPE UTILITIES -------------------------------------------------------------------------- */ .eyebrow { display: block; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; color: var(--accent); margin-bottom: .85em; } .section-title { font-size: clamp(1.9rem, 4vw, 3rem); } .section-intro { font-size: 1.0625rem; color: var(--ink-soft); margin-top: var(--space-2); } .text-link { display: inline-flex; align-items: center; gap: .4em; color: var(--accent); font-family: var(--font-display); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--accent-lo); padding-bottom: .1em; transition: border-color .2s ease, gap .2s ease; } .text-link:hover { border-color: var(--accent); gap: .6em; } /* Archivo 500 uppercase numbered index (01, 02, 03...) used on price-table rows and the numbered-steps component. */ .num { font-family: var(--font-display); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 6. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 44px; padding: .9em 1.85em; font-family: var(--font-display); font-weight: 500; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-out); } .btn:active { transform: scale(.97); } .btn--fill { background: var(--accent); color: var(--carbon); border-color: var(--accent); } .btn--fill:hover { background: var(--paper); border-color: var(--paper); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--block { width: 100%; } /* -------------------------------------------------------------------------- 7. HEADER / NAV Progressive-enhancement pattern: `.nav-links` ships visible and wrapping in plain HTML (works fully with JS disabled -- links just wrap under the logo on narrow screens). The toggle button ships `hidden` in the HTML; site.js un-hides it and collapses `.nav-links` behind it below the 900px breakpoint only. No JS = no collapse = every link always reachable. -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-nav); background: var(--carbon); border-bottom: 1px solid var(--border); } .site-header__inner { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 72px; padding-block: var(--space-1); } .brand-mark { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; color: var(--paper); margin-right: auto; } .brand-mark span { color: var(--accent); } .nav-toggle { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: .5em .25em; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; cursor: pointer; } .nav-toggle__bars { position: relative; width: 22px; height: 14px; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--paper); transition: transform .25s var(--ease-out), opacity .25s ease; } .nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { bottom: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6.5px) rotate(-45deg); } .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); } .nav-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); border-bottom: 1px solid transparent; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--paper); border-color: var(--accent); } .nav-links .btn { margin-left: var(--space-1); } .nav-phone { display: none; text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--ink-soft); white-space: nowrap; } .nav-phone:hover { color: var(--accent); } @media (max-width: 899px) { /* JS-off fallback: nav-links has no `.js-enhanced` marker (see site.js), so it never leaves normal flow -- links just wrap under the header row inline, always visible, no toggle button (it stays `hidden`). */ .nav-links.is-collapsed { display: none; } /* JS-on: once site.js marks the nav `.js-enhanced`, an un-collapsed state only ever means "the user opened it" -- render it as a dropdown panel instead of competing for space in the header's flex row. */ .nav-links.js-enhanced { position: absolute; top: 100%; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); flex-direction: column; align-items: stretch; gap: 0; background: var(--carbon); border-bottom: 1px solid var(--border); padding: var(--space-1) var(--gutter) var(--space-3); max-height: calc(100svh - 72px); overflow-y: auto; } .nav-links.js-enhanced a { border-bottom: 1px solid var(--line); } .nav-links.js-enhanced .btn { margin: var(--space-2) 0 0; width: 100%; } } @media (min-width: 900px) { .nav-toggle { display: none; } .nav-phone { display: inline-flex; align-items: center; min-height: 44px; margin-left: var(--space-2); } } /* -------------------------------------------------------------------------- 8. STICKY MOBILE ACTION BAR Ships `hidden` in HTML: it is a convenience layer (Call/Book already live in the nav and CTA band), so its absence with JS off is a non-event, not a broken path. site.js un-hides it and toggles visibility once the hero has scrolled out of view. -------------------------------------------------------------------------- */ .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-action-bar); display: flex; background: var(--carbon); border-top: 1px solid var(--border); padding: var(--space-1) var(--gutter); padding-bottom: max(var(--space-1), env(safe-area-inset-bottom)); gap: var(--space-1); transform: translateY(100%); transition: transform .3s var(--ease-out); } .action-bar.is-visible { transform: translateY(0); } .action-bar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; border-radius: var(--radius); border: 1px solid var(--border); color: var(--paper); } .action-bar a.action-bar__book { background: var(--accent); color: var(--carbon); border-color: var(--accent); } @media (min-width: 900px) { .action-bar { display: none; } } /* -------------------------------------------------------------------------- 9. HERO Full-bleed, tall (min-height: 100svh) so a landscape source photo still reads as an immersive portrait-leaning frame via object-fit: cover. -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--paper); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; } .hero__media--triptych { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.4fr) minmax(0, .72fr); gap: 3px; background: var(--carbon); } .hero__frame { min-width: 0; overflow: hidden; } .hero__frame picture { height: 100%; } .hero__frame--side { opacity: .62; } .hero__frame--side:first-child img { object-position: 54% center; } .hero__frame--side:last-child img { object-position: 47% center; } .hero__frame--primary img { object-position: center 24%; } @media (prefers-reduced-motion: no-preference) { .hero__frame { animation: hero-frame-in 900ms var(--ease-in-out) both; } .hero__frame:nth-child(2) { animation-delay: 90ms; } .hero__frame:nth-child(3) { animation-delay: 180ms; } @keyframes hero-frame-in { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(.985); } } } @media (max-width: 639px) { .hero__media--triptych { grid-template-columns: 18% 64% 18%; gap: 2px; } .hero__frame--side { opacity: .45; } } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 11, 10, .1) 0%, rgba(11, 11, 10, .35) 45%, rgba(11, 11, 10, .88) 100%); } .hero__content { position: relative; z-index: 2; padding-block: var(--space-6) var(--space-4); } .hero__title { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.02em; } .hero__lede { margin-top: var(--space-2); font-size: 1.125rem; color: var(--paper); max-width: 42ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--line); } .hero__meta a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; text-decoration: none; font-size: .875rem; color: var(--steel); text-transform: uppercase; letter-spacing: .06em; } .hero__meta a:hover { color: var(--accent); } /* -------------------------------------------------------------------------- 10. IMAGE BANDS / PROOF STRIP Edge-to-edge row, no captions, pure craft. Wraps on narrow screens rather than scrolling (scroll-snap is reserved for the "selected work" gallery per BUILD-SPEC). -------------------------------------------------------------------------- */ .proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); } .proof-strip__item { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .proof-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } @media (max-width: 639px) { .proof-strip { grid-template-columns: repeat(3, 1fr); } .proof-strip__item { aspect-ratio: 3 / 5; } } /* Generic full-bleed image band with optional overlaid content, for use on other pages (e.g. the locs.html consultation-gate block). */ .band--image { min-height: 50vh; display: flex; align-items: center; color: var(--paper); } .band--image > picture { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .band--image img { width: 100%; height: 100%; object-fit: cover; } .band--image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(11, 11, 10, .55); } .band__content { position: relative; z-index: 2; } /* -------------------------------------------------------------------------- 11. CRAFT CARDS ("One chair, two crafts") -------------------------------------------------------------------------- */ .craft-cards { display: grid; gap: var(--space-3); margin-top: var(--space-4); } @media (min-width: 700px) { .craft-cards { grid-template-columns: 1fr 1fr; } } .craft-card { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--border); } .craft-card__media { aspect-ratio: 4 / 5; overflow: hidden; } .craft-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .craft-card__body { padding: var(--space-3); } .craft-card__title { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: .3em; } .craft-card__price { display: block; margin-top: .75em; color: var(--accent); font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; } /* -------------------------------------------------------------------------- 12. NUMBERED STEPS ("How booking works") -------------------------------------------------------------------------- */ .steps { display: grid; gap: var(--space-3); margin-top: var(--space-4); counter-reset: step; } @media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } } .step__index { display: block; font-size: 1.75rem; margin-bottom: .4em; } .step__title { font-size: 1.15rem; font-weight: 800; } .step p { margin-top: .5em; color: var(--ink-soft); font-size: .9375rem; } /* -------------------------------------------------------------------------- 13. GALLERY: scroll-snap track (mobile) / asymmetric grid (900px+) -------------------------------------------------------------------------- */ .gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); margin-top: var(--space-4); scrollbar-width: none; } .gallery::-webkit-scrollbar { display: none; } .gallery__item { scroll-snap-align: start; position: relative; display: block; text-decoration: none; color: var(--ink); aspect-ratio: 4 / 5; overflow: hidden; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .policy-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); } .policy-list li { padding-left: var(--space-2); border-left: 1px solid var(--accent-lo); } .visit-note { grid-column: 1 / -1; padding: var(--space-2); border: 1px solid var(--border); color: var(--ink-soft); font-size: .9375rem; } @media (hover: hover) and (pointer: fine) { .proof-strip__item:hover img, .gallery__item:hover img { transform: scale(1.05); } .craft-card:hover .craft-card__media img { transform: scale(1.04); } } .gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--space-2); background: linear-gradient(0deg, rgba(11, 11, 10, .85) 0%, rgba(11, 11, 10, 0) 100%); font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; color: var(--paper); } @media (min-width: 900px) { .gallery { grid-auto-flow: unset; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, clamp(200px, 22vw, 320px)); grid-template-areas: "a a a b b c" "a a a d e f"; overflow: visible; scroll-snap-type: none; padding-inline: 0; margin-inline: 0; gap: var(--space-3); } .gallery__item { aspect-ratio: auto; } .gallery__item:nth-child(1) { grid-area: a; } .gallery__item:nth-child(2) { grid-area: b; } .gallery__item:nth-child(3) { grid-area: c; } .gallery__item:nth-child(4) { grid-area: d; } .gallery__item:nth-child(5) { grid-area: e; } .gallery__item:nth-child(6) { grid-area: f; } } /* -------------------------------------------------------------------------- 14. FILTER CHIPS (work.html) Ship `hidden` in HTML; site.js reveals the group once it can drive the filtering. With JS off, every gallery item stays visible (no chips, no hidden items) per BUILD-SPEC section 5. -------------------------------------------------------------------------- */ .chip-group { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); } .chip { display: inline-flex; align-items: center; min-height: 44px; padding: .5em 1.15em; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .chip:hover { border-color: var(--accent); color: var(--ink); } .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--carbon); } [data-gallery-item][hidden] { display: none; } /* -------------------------------------------------------------------------- 15. SERVICE / PRICE TABLE (services.html) Real semantic ; price tables are exactly what AI assistants extract, and a real table extracts cleanly. Rows numbered 01/02/03 in Archivo 500 gold, matching the layout language. -------------------------------------------------------------------------- */ .price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-3); /* Without these the wrapper grows to the 640px table instead of containing it, so `overflow-x: auto` never engages and the 640px leaks out to the document. body's overflow-x:hidden hid the symptom, but the root element still measured wider than the viewport, which is what audit tools flag. max-width bounds it; min-width:0 stops a flex/grid parent re-inflating it. */ max-width: 100%; min-width: 0; /* CSS-only scroll shadows. The table scrolls horizontally on mobile with no visual cue, so a visitor could miss the Price and Book columns entirely, which on a price page is the whole point of the table. The `local` gradients are the mask that retracts as you scroll; the `scroll` ones are the shadow that shows there is more. No JS, no scrollbar dependency. */ background: linear-gradient(to right, var(--bg) 40%, transparent) left center / 36px 100% no-repeat local, linear-gradient(to left, var(--bg) 40%, transparent) right center / 36px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), transparent) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), transparent) right center / 14px 100% no-repeat scroll; } .price-table { width: 100%; min-width: 640px; border-collapse: collapse; } .price-table caption { text-align: left; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; padding-bottom: var(--space-2); } .price-table th, .price-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); vertical-align: top; } .price-table thead th { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: var(--ink-soft); } .price-table__index { width: 2.5em; white-space: nowrap; } .price-table__price { font-family: var(--font-display); font-weight: 800; white-space: nowrap; } .price-table__note { color: var(--ink-soft); font-size: .9rem; max-width: 32ch; } .price-table tbody tr:hover { background: rgba(var(--scrim), .04); } /* -------------------------------------------------------------------------- 16. FAQ Native

: works fully with JS disabled. -------------------------------------------------------------------------- */ .faq { margin-top: var(--space-4); border-top: 1px solid var(--border); } .faq__item { border-bottom: 1px solid var(--border); } .faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) 0; font-weight: 500; font-size: 1.0625rem; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex-shrink: 0; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform .25s ease; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { padding-bottom: var(--space-3); color: var(--ink-soft); } /* -------------------------------------------------------------------------- 17. FORMS -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: .4em; margin-bottom: var(--space-3); } .field label { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; color: var(--ink-soft); } .field input, .field textarea, .field select { min-height: 44px; padding: .75em 1em; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); font-family: inherit; font-size: 1rem; } .field textarea { min-height: 120px; resize: vertical; } .field-hint { font-size: .875rem; color: var(--ink-soft); } .field-error { font-size: .875rem; color: var(--accent); } /* -------------------------------------------------------------------------- 18. CTA BAND Gold, high contrast, single Book action. -------------------------------------------------------------------------- */ .cta-band { background: var(--accent); color: var(--carbon); text-align: center; } .cta-band .section-title { color: var(--carbon); } .cta-band .btn--fill { background: var(--carbon); color: var(--paper); border-color: var(--carbon); margin-top: var(--space-3); } .cta-band .btn--fill:hover { background: var(--espresso); border-color: var(--espresso); } /* -------------------------------------------------------------------------- 19. FOOTER Full NAP, hours, directions link, links to every page (BUILD-SPEC 3). -------------------------------------------------------------------------- */ .site-footer { background: var(--espresso); border-top: 1px solid var(--border); color: var(--steel); padding-bottom: calc(var(--space-4) + 60px); /* clears the mobile action bar */ } @media (min-width: 900px) { .site-footer { padding-bottom: var(--space-4); } } .footer__grid { display: grid; gap: var(--space-4); padding-block: var(--space-5); } @media (min-width: 700px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } } .footer__name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--paper); text-transform: uppercase; } .footer__grid address { font-style: normal; margin-top: var(--space-2); } .footer__grid address p + p { margin-top: .35em; } .footer__grid a { text-decoration: none; } .footer__grid a:hover { color: var(--accent); } .footer__label { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; color: var(--paper); margin-bottom: var(--space-2); } .footer__nav { display: flex; flex-direction: column; gap: .35em; } .footer__nav a { display: inline-flex; align-items: center; min-height: 44px; } .footer__hours-row { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: .25em; font-size: .9rem; } .footer__base { border-top: 1px solid var(--border); padding-block: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); justify-content: space-between; font-size: .8125rem; } .footer__base a { text-decoration: none; } .footer__base a:hover { color: var(--accent); } /* -------------------------------------------------------------------------- 20. 404 -------------------------------------------------------------------------- */ .error-page { min-height: 70svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; } .error-page__code { font-size: clamp(4rem, 16vw, 9rem); line-height: .9; color: var(--accent); } .error-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } /* -------------------------------------------------------------------------- 21. SCROLL REVEAL Visible by default always (JS-off = fully visible, nothing load-bearing). site.js adds `.reveal-ready` to only once it can drive the IntersectionObserver; only then do [data-reveal] elements go transparent and wait for `.is-visible`. Reduced-motion visitors always see final state, even with JS on. -------------------------------------------------------------------------- */ html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) ease-out, transform var(--dur-reveal) ease-out; } html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 22. RESPONSIVE GUARDRAILS -------------------------------------------------------------------------- */ html, body { max-width: 100%; } /* The [hidden] attribute must beat any component `display` rule (.btn sets inline-flex, which otherwise wins over the UA `[hidden]{display:none}` and leaks feature-flagged CTAs onto the page). Keep this last. */ [hidden] { display: none !important; }