/* Self-hosted, subsetted fonts. The Google Fonts used to sit in every and it was the single biggest performance problem on this site: Lighthouse measured it blocking first render for 1,254 ms on mobile, which held First Contentful Paint at a score of 47 and dragged the whole Performance number to 88. Two cross-origin round trips (googleapis for the CSS, then gstatic for the files) sat on the critical path before a single pixel could paint. These files are the latin subsets cut down to the 115 characters the site actually uses. Inter ships as a VARIABLE font, so one file covers 400-600 and replaces what was three separate 25 KB downloads. Whole set: 59 KB. Rebuild: tools/build_fonts.sh */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap; src:url('../fonts/inter-var.woff2') format('woff2-variations');} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/barlow-semi-condensed-500.woff2') format('woff2');} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/barlow-semi-condensed-600.woff2') format('woff2');} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/barlow-semi-condensed-700.woff2') format('woff2');} @font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/barlow-semi-condensed-800.woff2') format('woff2');} @font-face{font-family:'Fredoka';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/fredoka-extrabold.woff2') format('woff2');} /* ============================================================= Aloha Hand Car Wash Services — Apopka, FL Direction: COASTAL COAT, logo-driven. Derek's call, 2026-08-20. The palette is taken from her own logo (k-means + region sampling of FINAL Aloha Car Wash Logo.png): a deep navy badge field, an orange-amber "Aloha" script, sunset coral/gold, and ocean turquoise. Navy is the ground, amber and orange act, turquoise is the single second accent. CONTRAST RULES, BINDING (every pair computed, see analysis/design-direction.md): - Labels on orange/amber/teal fills are navy --ink (4.73 / 8.51 / 8.06). NEVER white on orange (3.35, fails AA). - Orange is never body text on cream (3.04). Use --orange-deep (5.86). - Teal is never body text on cream (1.78). Use --teal-deep (5.52). - Amber --glow is a dark-ground accent only (1.69 on cream, fails). ============================================================= */ :root { --hdr-h: 96px; /* How far header blooms may hang below the navy bar. Keep this small: anything taller becomes layout-overflow on the sticky header, and iOS treats that overflow as sticky-range — the bar creeps up as you scroll. */ --hdr-flower-hang: 38px; /* Room below the left cluster so drop-shadow isn't clipped. Flowers stay on the hang line; this is shadow-only, not a visual raise. */ --hdr-flower-shadow-room: 8px; /* Extra clip-margin on the RIGHT so the condensed shadow can finish. PNG alpha stays cropped at the viewport by the right-flower wrap. */ --hdr-flower-shadow-side: 14px; /* Tight still, but black — navy-on-navy was invisible. */ --flower-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.58)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.40)); /* Sticky corner-flower overlay. Footer padding below 900px uses the same value so the blooms rest in blank navy, not on the credit. */ --stickybar-h: min(58vw, 340px); /* ground — her badge navy */ --ink: #0A2340; /* deep navy, from the logo ring */ --ink-raised: #143654; /* card surface on navy */ --ink-line: #22496B; /* hairline on navy */ --cream: #F7F4E9; --sand: #EDE6D3; /* recessed surface on cream */ --line: #DCD3BB; /* hairline on cream */ --white: #FFFFFF; /* action — her "Aloha" script */ --orange: #E8641F; --orange-deep: #A63B0D; /* text-safe on cream (5.86) and sand (5.18) */ --orange-lift: #FF7C36; /* hover only, on dark or as fill */ --glow: #F8B048; /* logo amber. Dark-ground accent only */ /* accent 2 — her ocean. Used sparingly, never as body text on cream */ --teal: #5CC6E8; /* on navy: 8.06 */ --teal-deep: #0A6A8C; /* text-safe on cream (5.52) and sand (4.88) */ /* print CTAs — measured from her 2026-08-24 price flyer. Navy on this teal is the label (same rule as orange: never white on a mid fill). */ --print-teal: #1C94B4; --print-teal-deep: #157A94; /* hover */ --salmon: #C45454; /* package names on cream */ /* text */ --muted-cream: #574E45; /* on cream: 7.39 */ --muted-ink: #B9C9DA; /* on navy: 9.36 */ --muted-faint: #8AA0B5; /* footer note on navy: 5.86 */ /* type */ --display: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif; --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* radius system — mixed on purpose: pills act, frames hold, chips label */ --r-pill: 999px; --r-frame: 16px; --r-chip: 5px; --pad: clamp(1.15rem, 5vw, 2rem); --section: clamp(3.5rem, 11vw, 6.5rem); --maxw: 1120px; --ease: cubic-bezier(.2, .7, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; /* `hidden` on one axis makes the other `auto`, so body becomes a scroll container and iOS sticky headers go soft. `clip` keeps the edge crop without that. */ overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } img, svg { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 0.98; letter-spacing: -0.005em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.9rem, 13vw, 5.6rem); font-weight: 800; } h2 { font-size: clamp(2.1rem, 8vw, 3.4rem); } h3 { font-size: clamp(1.35rem, 4.6vw, 1.7rem); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .narrow { max-width: 46rem; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--orange); color: var(--ink); padding: .7rem 1.1rem; border-radius: 0 0 var(--r-chip) 0; font-weight: 700; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 3px; } /* ---------- utility label: the third "voice" without a third font ---------- */ .eyebrow { font-family: var(--display); font-weight: 600; font-size: .82rem; letter-spacing: .19em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem; color: var(--muted-cream); } .eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--teal-deep); border-radius: 2px; } .on-ink .eyebrow { color: var(--glow); } .on-ink .eyebrow::before { background: var(--glow); } .lede { font-size: clamp(1.08rem, 3.6vw, 1.25rem); line-height: 1.6; color: var(--muted-cream); } .on-ink .lede { color: var(--muted-ink); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .85rem 1.5rem; border-radius: var(--r-pill); font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: .015em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease); } .btn:active { transform: translateY(1px); } /* Navy on her print teal. Same label rule as orange: never white on the fill. */ .btn-primary { background: var(--print-teal); color: var(--ink); } .btn-primary:hover { background: var(--print-teal-deep); color: var(--cream); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-outline:hover { background: var(--ink); color: var(--cream); } .on-ink .btn-outline { color: var(--cream); border-color: #3D5A78; } .on-ink .btn-outline:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } .btn-row .btn { flex: 1 1 14rem; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 90; background: transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-stuck { background-color: #142C4C; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; overflow: visible; } /* Phone: sticky + overflowing badge/flowers makes the bar creep up with the scroll (the "soft" slide). Fixed pins it to the viewport; body padding replaces the in-flow height the header used to occupy. Hero already pulls up by --hdr-h, so the overlay math is unchanged. */ @media (max-width: 899px) { .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; } body { padding-top: var(--hdr-h); } } .header-flower-clip { position: absolute; top: 0; left: 0; right: 0; /* Header plus the hang — NOT the full L-shaped PNG. The top of that asset is always off-screen; clip-path used to hide it visually while leaving it in layout, which is what made iOS sticky creep. */ height: calc(var(--hdr-h) + var(--hdr-flower-hang) + var(--hdr-flower-shadow-room)); z-index: 0; pointer-events: none; /* `clip` + clip-margin lets the RIGHT shadow finish; left margin stays 0 so leftover PNG alpha on that side stays cropped. The right PNG is cropped separately by .header-flowers-r-crop. */ overflow: clip; overflow-clip-margin: 0 var(--hdr-flower-shadow-side) var(--hdr-flower-shadow-room) 0; /* Same motion as the stickybar, inverted: park above the viewport, slide down. */ transform: translateY(-24rem); transition: transform .3s var(--ease); } .site-header.is-stuck .header-flower-clip { transform: translateY(0); } .header-flowers { display: block; position: absolute; width: auto; height: auto; max-width: clamp(165px, 25vw, 220px); max-height: none; object-fit: contain; pointer-events: none; z-index: 0; filter: var(--flower-shadow); } .header-flowers-l { left: 0; bottom: var(--hdr-flower-shadow-room); max-width: clamp(192px, 30vw, 258px); transform: translateX(-14%); } .header-flowers-r-wrap { position: absolute; top: 0; right: 0; /* Explicit header + hang — `height: 100%` was resolving to the navy bar and chopping the bottom plumeria. Hang room lets the stack finish after we shift it up for the top hard-edge. */ height: calc(var(--hdr-h) + var(--hdr-flower-hang)); width: clamp(80px, 16vw, 120px); overflow: visible; filter: var(--flower-shadow); pointer-events: none; } .header-flowers-r-crop { display: block; width: 100%; height: 100%; overflow: hidden; } .header-flowers-r { right: 0; /* PNG has empty space above the orange bloom. Negative top clips that (and the bloom's tip) at the header edge; the bottom plumeria slides up out of the old crop line. */ top: -24px; max-width: clamp(60px, 10.5vw, 82px); max-height: none; transform: translateX(22%); filter: none; } @media (min-width: 900px) { .header-flowers-r { max-width: 74px; top: -20px; } } .header-in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--hdr-h, 96px); } .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--cream); } .brand img { width: 92px; height: 92px; } .brand-name { font-family: var(--display); font-weight: 800; font-size: 1.22rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; } .brand-sub { display: block; font-family: var(--display); font-weight: 500; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glow); margin-top: 2px; } .page-ink .brand, .page-ink .navtoggle { color: var(--cream); } .navtoggle { display: inline-flex; align-items: center; gap: .45rem; background: transparent; border: 1px solid #3D5A78; color: var(--cream); border-radius: var(--r-pill); padding: .5rem .85rem; font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; min-height: 44px; } .navtoggle .bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; } .navtoggle .bars::before, .navtoggle .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .22s var(--ease); } .navtoggle .bars::before { top: -6px; } .navtoggle .bars::after { top: 6px; } .navtoggle[aria-expanded="true"] .bars { background: transparent; } .navtoggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); } .navtoggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); } .nav { position: fixed; inset: 0; z-index: 95; background: var(--ink); padding: 5.5rem var(--pad) 2rem; display: flex; flex-direction: column; gap: .25rem; transform: translateY(-101%); transition: transform .34s var(--ease); overflow-y: auto; } .nav.is-open { transform: none; } .nav a { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 8vw, 2.4rem); text-transform: uppercase; letter-spacing: .01em; color: var(--cream); text-decoration: none; padding: .5rem 0; border-bottom: 1px solid var(--ink-line); } .nav a[aria-current="page"] { color: var(--glow); } /* in the drawer the CTA is a real pill, not another link in the list. These need the type in the selector to out-specify `.nav a`. */ .nav a.nav-cta { margin-top: 1.5rem; border: 0; background: var(--print-teal); color: var(--ink); border-radius: var(--r-pill); font-size: 1.35rem; text-align: center; padding: .9rem 1.25rem; } .nav-close { position: absolute; top: 1rem; right: var(--pad); } .nav a.nav-phone { margin-top: 1.5rem; font-family: var(--display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; color: var(--muted-ink); border: 0; padding: 0; } @media (min-width: 900px) { .navtoggle { display: none; } .nav { position: static; transform: none; background: transparent; padding: 0; flex-direction: row; align-items: center; gap: 1.6rem; overflow: visible; } .nav a { font-size: .95rem; border-bottom: 0; padding: 0; letter-spacing: .13em; font-weight: 600; } .nav a:hover { color: var(--glow); } .nav a.nav-cta { margin-top: 0; background: var(--print-teal); color: var(--ink); border-radius: var(--r-pill); padding: .65rem 1.15rem; font-size: .95rem; text-align: center; } .nav a.nav-cta:hover { background: var(--print-teal-deep); color: var(--cream); } /* near-black on orange, even when this page IS the CTA target */ .nav a.nav-cta[aria-current="page"] { color: var(--ink); } .nav-close, .nav-phone, .nav-flowers { display: none; } } /* Drawer flowers — same footer clusters as the stickybar, sitting in the leftover navy under the links. Hidden from 900px (horizontal nav). */ .nav-flowers { display: none; } @media (max-width: 899px) { .nav { overflow-x: hidden; } .nav > a { position: relative; z-index: 1; } .nav-close { z-index: 1; } .nav-flowers { display: block; position: absolute; left: 0; right: 0; bottom: 0; /* 37.5rem keeps a gap under the phone on short phones; 52vw is the normal-phone cluster. Don't use the stickybar's full 58vw here — the drawer leftover is smaller than the bottom chrome strip. */ height: min(52vw, max(0px, 100dvh - 37.5rem), 280px); z-index: 0; pointer-events: none; overflow: hidden; } .nav-flowers-img { display: block; position: absolute; width: auto; height: auto; max-height: none; object-fit: contain; pointer-events: none; filter: var(--flower-shadow); } .nav-flowers-l { left: 0; bottom: 0; max-width: clamp(200px, 44vw, 280px); transform: translate(-16%, 28px); } .nav-flowers-r-wrap { position: absolute; right: 0; bottom: 0; top: 0; width: clamp(170px, 36vw, 240px); overflow: hidden; filter: var(--flower-shadow); pointer-events: none; } .nav-flowers-r-crop { display: block; width: 100%; height: 100%; overflow: hidden; } .nav-flowers-r { right: 0; bottom: 0; max-width: clamp(170px, 36vw, 240px); transform: translate(18%, 28px); filter: none; } } /* ============================================================= SIGNATURE: the wet-paint hero. Everything here is drawn in code — gradients plus one generated vector bead field. No photograph, no AI image, nothing that claims to be her work. ============================================================= */ .hero { position: relative; background: var(--ink); color: var(--cream); margin-top: calc(-1 * var(--hdr-h, 96px)); padding: calc(var(--hdr-h, 96px) + clamp(3rem, 14vw, 6rem)) 0 clamp(3rem, 10vw, 5rem); overflow: hidden; isolation: isolate; } .hero::before { /* the clear coat: warm sun falling across a dark panel */ content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(120% 85% at 78% 8%, rgba(248, 176, 72, .32), rgba(248, 176, 72, 0) 58%), radial-gradient(90% 70% at 12% 96%, rgba(232, 100, 31, .26), rgba(232, 100, 31, 0) 60%), linear-gradient(168deg, #14375A 0%, #0A2340 46%, #05162B 100%); } .hero::after { /* the bead field, tier-1 texture */ content: ""; position: absolute; inset: -6% -4% -4%; z-index: -2; background: url("../img/bead-field.svg") center / cover no-repeat; opacity: .5; mix-blend-mode: screen; } @media (min-width: 900px) { .hero::after { opacity: .68; } } .glare { position: absolute; top: -30%; bottom: -30%; left: -60%; width: 55%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(255, 246, 228, 0) 0%, rgba(255, 246, 228, .16) 42%, rgba(255, 179, 103, .22) 55%, rgba(255, 246, 228, 0) 100%); transform: skewX(-14deg); will-change: transform; animation: sweep 2.6s var(--ease) .35s 1 forwards; } /* The sweep animates TRANSFORM, never `left`. Animating `left` is a layout property: it re-laid-out the hero on every frame and Lighthouse scored the result as 33 layout shifts / CLS 0.99 on an otherwise 1.1s page. translateX is relative to the element's OWN width (55% of the hero), so the old -60% -> 118% travel (178% of the hero) is 178/55 = 324% here. */ @keyframes sweep { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(324%) skewX(-14deg); } } /* animated hero background: desktop only, statics beneath remain the fallback */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; display: none; pointer-events: none; filter: brightness(.72) saturate(.95); } .hero-video-pass { transition: opacity .45s linear; } .hero-video-pass.is-done { opacity: 0; } .hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none; background: linear-gradient(100deg, rgba(5,22,43,.80) 0%, rgba(5,22,43,.60) 46%, rgba(5,22,43,.42) 80%, rgba(5,22,43,.36) 100%), linear-gradient(180deg, rgba(5,22,43,.50) 0%, rgba(5,22,43,.10) 34%, rgba(5,22,43,.30) 100%); } .hero-video.is-on ~ .hero-scrim { display: block; } /* the navy grade is BAKED into the clip and poster (ffmpeg colorchannelmixer), not applied as a runtime filter — Safari composites filters on video unreliably. */ .hero-video.is-on { display: block; } @media (prefers-reduced-motion: reduce) { /* same resting position the old `left: 28%` gave: (28 - -60) / 55 = 160% */ .glare { animation: none; transform: translateX(160%) skewX(-14deg); opacity: .55; } } .hero-in { position: relative; } .hero-line { margin: .85rem 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 3.4vw, 1.45rem); letter-spacing: .02em; color: var(--cream); } .hero h1 { font-family: "Fredoka", "Barlow Semi Condensed", "Arial Rounded MT Bold", Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: #FCC44C; } .hero h1 .accent { color: #FC8C64; display: block; } .hero .lede { max-width: 34rem; margin-top: 1.35rem; } .hero .btn-row { margin-top: 2rem; max-width: 32rem; } /* the honest trust strip — no invented review counts, only checkable facts */ .trust { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-line); } .trust li { list-style: none; font-family: var(--display); font-weight: 600; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-ink); border: 1px solid var(--ink-line); border-radius: var(--r-chip); padding: .42rem .7rem; background: rgba(255, 255, 255, .02); } .trust { padding-left: 0; margin-bottom: 0; } /* ---------- sections ---------- */ .section { padding: var(--section) 0; position: relative; } .section.on-ink { background: var(--ink); color: var(--cream); } .section.on-sand { background: var(--sand); } .section.on-ink h1, .section.on-ink h2, .section.on-ink h3 { color: var(--cream); } .grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/grain.svg") repeat; opacity: .045; mix-blend-mode: multiply; } .on-ink.grain::before { opacity: .09; mix-blend-mode: screen; } .section-head { margin-bottom: clamp(2rem, 6vw, 3rem); max-width: 44rem; } .section-head p { margin-top: 1rem; } /* ---------- the service menu ---------- */ .menu { display: grid; gap: 1.15rem; } .pkg { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-frame); padding: clamp(1.35rem, 5vw, 2rem); position: relative; } .on-ink .pkg { background: var(--ink-raised); border-color: var(--ink-line); } .pkg-pick { border-color: var(--print-teal); border-width: 2px; } .pkg-flag { position: absolute; top: -.72rem; left: clamp(1.35rem, 5vw, 2rem); background: var(--print-teal); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding: .28rem .6rem; border-radius: var(--r-chip); } .pkg-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; } .pkg h3 { flex: 1 1 12rem; text-transform: uppercase; color: var(--salmon); } .on-ink .pkg h3 { color: var(--cream); } .price { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 9vw, 2.9rem); line-height: 1; letter-spacing: -.01em; } .price small { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-cream); margin-top: .3rem; } .on-ink .price small { color: var(--muted-ink); } .pkg-note { margin-top: .9rem; color: var(--muted-cream); font-size: .97rem; } .on-ink .pkg-note { color: var(--muted-ink); } /* duration rendered as length, so packages compare on time as well as money */ .timebar { margin-top: 1.25rem; } .timebar-label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-cream); } .on-ink .timebar-label { color: var(--muted-ink); } .timebar-track { display: block; margin-top: .45rem; height: 8px; border-radius: var(--r-pill); background: var(--sand); overflow: hidden; } .on-ink .timebar-track { background: #1B3B5A; } .timebar-fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--orange-deep), var(--orange)); width: 0; transition: width 1.05s var(--ease); } .is-shown .timebar-fill { width: var(--w, 50%); } @media (prefers-reduced-motion: reduce) { .timebar-fill { transition: none; width: var(--w, 50%); } } .inout { display: grid; gap: 1.25rem; margin-top: 1.5rem; } @media (min-width: 560px) { .inout { grid-template-columns: 1fr 1fr; } } .inout h4 { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-bottom: .6rem; color: var(--muted-cream); } .on-ink .inout h4 { color: var(--muted-ink); } .inout ul { margin: 0; padding: 0; list-style: none; font-size: .97rem; } .inout li { position: relative; padding-left: 1.5rem; margin-bottom: .38rem; } .inout li::before { position: absolute; left: 0; top: 0; font-family: var(--display); font-weight: 700; } .list-in li::before { content: "✓"; color: var(--teal-deep); } .on-ink .list-in li::before { color: var(--teal); } .list-out li { color: var(--muted-cream); } .on-ink .list-out li { color: var(--muted-ink); } .list-out li::before { content: "—"; opacity: .7; } .pkg .btn { margin-top: 1.6rem; width: 100%; } /* per-size price rows under a package: label left, price right, hairline between */ .sizes { list-style: none; margin: 1.1rem 0 0; padding: 0; font-size: .97rem; } .sizes li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); } .sizes li:last-child { border-bottom: 1px solid var(--line); } .sizes span { color: var(--muted-cream); } .sizes b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .on-ink .sizes li { border-color: #3D5A78; } .on-ink .sizes span { color: var(--muted-ink); } .on-ink .sizes b { color: var(--cream); } @media (min-width: 900px) { .menu { grid-template-columns: repeat(3, 1fr); align-items: start; } .menu .pkg { display: flex; flex-direction: column; height: 100%; } .menu .pkg .btn { margin-top: auto; } .menu .inout { grid-template-columns: 1fr; } } .size-note { margin-top: 1.5rem; padding: 1rem 1.15rem; border-left: 3px solid var(--orange); background: var(--sand); border-radius: 0 var(--r-chip) var(--r-chip) 0; font-size: .97rem; } .on-ink .size-note { background: var(--ink-raised); } /* ---------- add-ons ---------- */ .addons { display: grid; gap: .7rem; margin-top: 1.5rem; padding: 0; list-style: none; } @media (min-width: 620px) { .addons { grid-template-columns: 1fr 1fr; } } .addons li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: .55rem; } .on-ink .addons li { border-bottom-color: var(--ink-line); } .addons b { font-weight: 600; } .addons span { font-family: var(--display); font-weight: 700; font-size: 1.12rem; white-space: nowrap; } /* ---------- the driveway timeline ---------- */ .steps { list-style: none; margin: 0; padding: 0; position: relative; } .steps::before { content: ""; position: absolute; left: 7px; top: .6rem; bottom: 2.4rem; width: 2px; background: linear-gradient(180deg, var(--orange), rgba(232,100,31,.15)); } .step { position: relative; padding: 0 0 2rem 2.4rem; } .step::before { content: ""; position: absolute; left: 0; top: .45rem; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--cream); } .on-ink .step::before { box-shadow: 0 0 0 4px var(--ink); } .on-sand .step::before { box-shadow: 0 0 0 4px var(--sand); } .step-when { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-cream); display: block; margin-bottom: .2rem; } .on-ink .step-when { color: var(--glow); } .step h3 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: .4rem; } .step p { color: var(--muted-cream); font-size: .99rem; } .on-ink .step p { color: var(--muted-ink); } /* ---------- driveway facts (yes/no spec rows) ---------- */ .facts { display: grid; gap: .9rem; margin-top: 2rem; padding: 0; list-style: none; } @media (min-width: 700px) { .facts { grid-template-columns: 1fr 1fr; } } .fact { border: 1px solid var(--line); border-radius: var(--r-frame); padding: 1.1rem 1.2rem; background: var(--cream); } .on-ink .fact { background: var(--ink-raised); border-color: var(--ink-line); } .fact-q { font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: .02em; text-transform: uppercase; display: block; margin-bottom: .35rem; } .fact-a { font-size: .97rem; color: var(--muted-cream); margin: 0; } .on-ink .fact-a { color: var(--muted-ink); } .fact-tag { float: right; font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; background: var(--orange); color: var(--ink); border-radius: var(--r-chip); padding: .18rem .5rem; margin-left: .6rem; } .fact-tag.is-quiet { background: var(--sand); color: var(--ink); } .on-ink .fact-tag.is-quiet { background: #332C26; color: var(--cream); } /* ---------- tier-2 placeholder slots ---------- */ .slot { position: relative; border-radius: var(--r-frame); border: 1px dashed var(--line); background: linear-gradient(150deg, rgba(232,100,31,.12), rgba(232,100,31,0) 55%), repeating-linear-gradient(-45deg, var(--sand) 0 10px, #E7E0CC 10px 20px); display: flex; align-items: flex-end; overflow: hidden; aspect-ratio: 4 / 3; } .on-ink .slot { border-color: var(--ink-line); background: linear-gradient(150deg, rgba(248,176,72,.16), rgba(248,176,72,0) 55%), repeating-linear-gradient(-45deg, #0D2745 0 10px, #143351 10px 20px); } .slot-caption { width: 100%; padding: .9rem 1rem; background: rgba(20, 18, 16, .88); color: var(--cream); font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; } .slot-square { aspect-ratio: 1 / 1; } .slot-portrait { aspect-ratio: 3 / 4; } /* two-up tiles on a phone are small, so the caption bar has to give ground */ @media (max-width: 560px) { .slot-caption { padding: .6rem .7rem; font-size: .68rem; letter-spacing: .1em; } } /* the branded placeholder: a slot that is still waiting on a photo, but is finished furniture rather than a hole. Same box, same caption bar, same radius as .shot below, so dropping a real photo in is a content swap. */ .slot-brand { border-style: solid; border-color: var(--ink-line); background: radial-gradient(115% 85% at 50% 4%, rgba(248, 176, 72, .22), rgba(248, 176, 72, 0) 62%), linear-gradient(160deg, #164066 0%, #0A2340 58%, #061C33 100%); background-color: var(--ink); } .slot-brand::after { content: ""; position: absolute; inset: 0; background: url("../img/bead-field.svg") center / cover no-repeat; opacity: .5; pointer-events: none; } .slot-mark { position: absolute; left: 0; right: 0; top: 0; bottom: 2.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; z-index: 1; padding: .5rem; } .slot-mark img { width: 38px; height: 38px; opacity: .92; } .slot-mark b { font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--glow); } .slot-brand .slot-caption { background: rgba(5, 22, 43, .84); position: relative; z-index: 1; } /* a real photo. Geometry is identical to .slot on purpose */ .shot { position: relative; margin: 0; border-radius: var(--r-frame); overflow: hidden; border: 1px solid var(--line); background: var(--ink); display: flex; align-items: flex-end; } .on-ink .shot, .on-sand .shot { border-color: rgba(10, 35, 64, .18); } .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .shot .slot-caption { position: relative; z-index: 1; background: rgba(5, 22, 43, .82); } .shot-43 { aspect-ratio: 4 / 3; } .shot-32 { aspect-ratio: 3 / 2; } @media (max-width: 560px) { .shot-32 { aspect-ratio: 4 / 3; } } .gallery-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } @media (min-width: 780px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } /* a grid holding a full-width band plus two tiles: two columns, so the tiles fill their row instead of leaving a hole in the third cell */ @media (min-width: 780px) { .gallery-grid.duo { grid-template-columns: 1fr 1fr; } } .gallery-feature { margin-bottom: 1rem; } /* Gallery tiles are always 2-up or 3-up and therefore always narrow, but the caption bar was sized off the VIEWPORT, so it wrapped to two lines and ate the picture. Measured on the live page: at a 780px viewport the 3-up tile is 228x171 and the bar covered 41% of it; at 390px, 44%. One line, always. */ .gallery-grid .slot-caption { padding: .55rem .7rem; font-size: .66rem; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* An establishing shot whose subject runs to the frame edge. The caption sits BELOW the picture instead of over it, because an overlay bar hides the only thing in the frame worth seeing (the sign). Width is capped so the 361px source — an Instagram reel cover, which is all that exists — is never upscaled past 2x. */ .shot-band { display: block; aspect-ratio: auto; grid-column: 1 / -1; max-width: 720px; margin-inline: auto; } .shot-band img { position: static; width: 100%; height: auto; } .shot-band .slot-caption { display: block; text-align: center; } /* before/after: fixed pair geometry so a real photo drops straight in */ .ba { margin-bottom: 2rem; } .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .ba-grid .slot, .ba-grid .shot { border-radius: var(--r-frame); } .ba-grid .slot:first-child, .ba-grid .shot:first-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .ba-grid .slot:last-child, .ba-grid .shot:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .ba-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap; } .ba-title h3 { text-transform: uppercase; font-size: 1.2rem; } .ba-meta { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-cream); } .on-ink .ba-meta { color: var(--muted-ink); } /* before/after WIPE: a cursor/touch-tracked reveal for the one pair that is pixel-aligned (same wheel, same crop, before layered on after). The console pair below is NOT pixel-aligned — different camera angles — so it stays a plain side-by-side .ba-grid instead of going in here. */ .ba-wipe { --x: 55%; position: relative; max-width: 720px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: var(--r-frame); border: 1px solid var(--line); overflow: hidden; background: var(--ink); touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; } .ba-wipe:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; } .ba-wipe > img, .ba-wipe-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ba-wipe-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); } .ba-wipe-divider { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; transform: translateX(-50%); background: var(--cream); box-shadow: 0 0 0 1px rgba(248, 176, 72, .65), 0 0 10px rgba(248, 176, 72, .35); pointer-events: none; z-index: 2; } .ba-wipe-handle { position: absolute; top: 50%; left: var(--x); transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--ink); border: 2px solid var(--glow); color: var(--cream); display: flex; align-items: center; justify-content: center; gap: .18rem; box-shadow: 0 3px 10px rgba(5, 22, 43, .4); pointer-events: none; z-index: 3; animation: ba-breathe 2.6s ease-in-out infinite; } .ba-wipe.is-touched .ba-wipe-handle { animation: none; } .ba-wipe-handle svg { width: 10px; height: 10px; } @keyframes ba-breathe { 0%, 100% { box-shadow: 0 3px 10px rgba(5, 22, 43, .4), 0 0 0 0 rgba(248, 176, 72, .55); } 50% { box-shadow: 0 3px 10px rgba(5, 22, 43, .4), 0 0 0 9px rgba(248, 176, 72, 0); } } .ba-wipe-label { position: absolute; bottom: .6rem; z-index: 4; background: rgba(5, 22, 43, .84); color: var(--cream); font-family: var(--display); font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .6rem; border-radius: var(--r-pill); pointer-events: none; } .ba-wipe-label.is-before { left: .6rem; } .ba-wipe-label.is-after { right: .6rem; } /* ---------- service area ---------- */ .towns { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; margin: 1.5rem 0 0; } .towns li { border: 1px solid var(--line); border-radius: var(--r-pill); padding: .42rem .9rem; font-size: .93rem; background: var(--cream); } .on-ink .towns li { background: var(--ink-raised); border-color: var(--ink-line); } .towns li.is-core { border-color: var(--orange); border-width: 2px; font-weight: 600; padding: .38rem .86rem; } .town-link { text-decoration: none; } .town-link:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); } .cards { display: grid; gap: 1rem; margin-top: 1.75rem; } @media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } } .who-grid { grid-template-columns: 1fr; } @media (min-width: 720px) { .who-grid { grid-template-columns: 1fr 1fr; } } .who-grid .card h3 { color: var(--salmon); text-transform: none; letter-spacing: 0; font-size: 1.15rem; } .card { border: 1px solid var(--line); border-radius: var(--r-frame); padding: clamp(1.25rem, 4.5vw, 1.75rem); background: var(--cream); text-decoration: none; display: block; transition: transform .2s var(--ease), border-color .2s var(--ease); } .on-ink .card { background: var(--ink-raised); border-color: var(--ink-line); } a.card:hover { transform: translateY(-3px); border-color: var(--orange); } .card h3 { text-transform: uppercase; margin-bottom: .5rem; } .card p { color: var(--muted-cream); font-size: .98rem; } .on-ink .card p { color: var(--muted-ink); } .card-more { display: inline-block; margin-top: .9rem; font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; border-bottom: 2px solid var(--orange); padding-bottom: 2px; } /* ---------- quote / booking form ---------- */ .form { display: grid; gap: 1.25rem; margin-top: 1.5rem; } .field { display: grid; gap: .4rem; } .field label, .fieldset-legend { font-family: var(--display); font-weight: 600; font-size: .84rem; letter-spacing: .15em; text-transform: uppercase; } .field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: .85rem .95rem; min-height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); } .field textarea { min-height: 8rem; resize: vertical; } .hint { font-size: .88rem; color: var(--muted-cream); } fieldset { border: 0; padding: 0; margin: 0; } .fieldset-legend { display: block; margin-bottom: .75rem; } .opts { display: grid; gap: .55rem; } @media (min-width: 620px) { .opts { grid-template-columns: 1fr 1fr; } } .opt { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); border-radius: 10px; padding: .8rem .95rem; background: var(--white); cursor: pointer; min-height: 52px; transition: border-color .16s var(--ease), background-color .16s var(--ease); } .opt:hover { border-color: var(--orange); } .opt input { accent-color: var(--orange); width: 20px; height: 20px; flex: none; } .opt-price { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 1.05rem; } .opt:has(input:checked) { border-color: var(--orange); background: #FFF1E6; } .estimate { margin-top: 1.5rem; border-radius: var(--r-frame); background: var(--ink); color: var(--cream); padding: clamp(1.25rem, 5vw, 1.75rem); } .estimate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--ink-line); font-size: .97rem; } .estimate-row:last-of-type { border-bottom: 0; } .estimate-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 2px solid var(--orange); } .estimate-total .price { color: var(--glow); } .estimate p { color: var(--muted-ink); font-size: .9rem; margin-top: 1rem; } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); margin-top: 1.75rem; } .on-ink .faq { border-top-color: var(--ink-line); } .faq details { border-bottom: 1px solid var(--line); } .on-ink .faq details { border-bottom-color: var(--ink-line); } .faq summary { cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 4.2vw, 1.3rem); text-transform: uppercase; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--orange); line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq-a { padding: 0 0 1.35rem; color: var(--muted-cream); max-width: 44rem; } .on-ink .faq-a { color: var(--muted-ink); } /* ---------- quote strip ---------- */ .quotestrip { border-left: 3px solid var(--orange); padding: .35rem 0 .35rem 1.25rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 5.5vw, 2rem); line-height: 1.2; margin: 2rem 0; } /* ---------- CTA band ---------- */ .band { background: linear-gradient(112deg, var(--orange-deep), var(--orange) 62%, #F0803C); color: var(--ink); padding: var(--section) 0; position: relative; overflow: hidden; } .band::after { content: ""; position: absolute; inset: 0; background: url("../img/grain.svg") repeat; opacity: .06; mix-blend-mode: multiply; pointer-events: none; } .band h2 { color: var(--ink); text-transform: uppercase; } .band p { max-width: 40rem; margin-top: 1rem; font-size: 1.08rem; } .band .btn-row { margin-top: 1.85rem; max-width: 34rem; } .band .btn-primary { background: var(--ink); color: var(--cream); } .band .btn-primary:hover { background: #06182E; } .band .btn-outline { border-color: var(--ink); color: var(--ink); } .band .btn-outline:hover { background: var(--ink); color: var(--cream); } /* ---------- footer ---------- */ .site-footer { background: var(--ink); color: var(--muted-ink); padding: clamp(3rem, 8vw, 4.5rem) 0; font-size: .95rem; } @media (max-width: 899px) { /* Calibrated at 496px (the look we want). Below that, overlay clearance and extra air both taper so a 390px phone doesn't get a tall empty band. min() and clamp() meet the 496px amount, so there is no jump. Floor keeps the credit off the blooms on very narrow screens. */ .site-footer { padding-bottom: max(12.5rem, calc(clamp(3rem, 8vw, 4.5rem) + min(var(--stickybar-h), 100vw - 13rem) + clamp(0rem, 100vw - 28.5rem, 2.5rem))); } } .footer-grid { display: grid; gap: 2.25rem; } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer h4 { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); margin-bottom: .85rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .45rem; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--glow); text-decoration: underline; } .footer-brand .brand { margin-bottom: 1rem; } /* Social links sit under the hours in the brand column rather than becoming a fourth footer column, because .footer-grid is 1.4fr 1fr 1fr and a fourth child would wrap onto its own row. Underlined so they read as links against the footer's text-decoration:none default. */ .footer-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.9rem; } .footer-social a { text-decoration: underline; text-underline-offset: 3px; } .footer-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-line); font-size: .84rem; color: var(--muted-faint); } .footer-note a { color: var(--muted-faint); } /* ---------- corner flowers at the bottom of the viewport (no CTA chrome) ---------- */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: transparent; border: 0; padding: 0; min-height: 0; height: var(--stickybar-h); transform: translateY(100%); transition: transform .35s var(--ease); overflow: clip; overflow-clip-margin: 12px var(--hdr-flower-shadow-side) 0 0; pointer-events: none; } .stickybar-flowers { display: block; position: absolute; width: auto; height: auto; max-width: clamp(236px, 42vw, 328px); max-height: none; object-fit: contain; pointer-events: none; z-index: 0; filter: var(--flower-shadow); } .stickybar-flowers-l { left: 0; bottom: 0; transform: translate(-16%, 32px); } .stickybar-flowers-r-wrap { position: absolute; right: 0; bottom: 0; top: 0; width: clamp(200px, 38vw, 290px); overflow: visible; filter: var(--flower-shadow); pointer-events: none; } .stickybar-flowers-r-crop { display: block; width: 100%; height: 100%; overflow: hidden; } .stickybar-flowers-r { right: 0; bottom: 0; max-width: clamp(196px, 34vw, 268px); transform: translate(18%, 32px); filter: none; } .stickybar.is-up { transform: translateY(0); } @media (min-width: 900px) { .stickybar { display: block; } } /* ---------- scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-shown { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- misc ---------- */ .demo-flag { background: #143654; color: var(--cream); font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: .5rem var(--pad); } .demo-flag b { color: var(--glow); font-weight: 700; } .page-head { background: var(--ink); color: var(--cream); margin-top: calc(-1 * var(--hdr-h, 96px)); padding: calc(var(--hdr-h, 96px) + clamp(2.75rem, 10vw, 4.5rem)) 0 clamp(2.5rem, 8vw, 4rem); position: relative; overflow: hidden; } .page-head::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(100% 90% at 88% 0%, rgba(248, 176, 72, .24), rgba(248, 176, 72, 0) 62%), linear-gradient(170deg, #12314E, #071A31); } .page-head::after { content: ""; position: absolute; right: -8%; top: -30%; width: 70%; height: 180%; background: url("../img/bead-field.svg") center / cover no-repeat; opacity: .34; mix-blend-mode: screen; z-index: 0; } .page-head .wrap { position: relative; z-index: 1; } .page-head h1 { text-transform: uppercase; font-size: clamp(2.4rem, 10vw, 4.2rem); } .page-head .lede { margin-top: 1rem; max-width: 36rem; } .crumbs { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-ink); margin-bottom: 1rem; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--glow); } .prose h2 { margin-top: 2.5rem; margin-bottom: .9rem; text-transform: uppercase; } .prose h3 { margin-top: 1.75rem; margin-bottom: .6rem; } .prose ul { padding-left: 1.15rem; } .prose li { margin-bottom: .4rem; } .rule { height: 1px; background: var(--line); border: 0; margin: clamp(2.5rem, 8vw, 4rem) 0; } .on-ink .rule { background: var(--ink-line); } /* ---------- hero price ticket ---------- The teardown's first finding: show real dollars, prominently. This puts them above the fold on desktop and one thumb-flick down on mobile. */ .hero-grid { display: grid; gap: 2.75rem; } @media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(19rem, .9fr); gap: 3.5rem; align-items: center; } } .ticket { background: rgba(18, 16, 14, .78); backdrop-filter: blur(10px); border: 1px solid var(--ink-line); border-top: 3px solid var(--orange); border-radius: var(--r-frame); padding: clamp(1.35rem, 5vw, 1.75rem); } .ticket-head { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--glow); margin-bottom: 1rem; } .ticket-list { list-style: none; margin: 0 0 1.1rem; padding: 0; } .ticket-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--ink-line); } .ticket-list li:last-child { border-bottom: 0; } .ticket-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: var(--cream); line-height: 1.1; } .ticket-time { grid-column: 1; font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-ink); } .ticket-price { grid-column: 2; grid-row: 1 / span 2; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--cream); } .ticket-note { font-size: .88rem; color: var(--muted-ink); margin-bottom: 1.25rem; } .ticket .btn { width: 100%; font-size: 1.05rem; } /* --- footer address (added with the Aloha rebrand) --- */ .footer-addr { margin-top: .35rem; } .footer-addr a { font-style: normal; font-weight: 600; line-height: 1.45; border-bottom: 1px solid var(--ink-line); } /* real logo badge: transparent emblem, own navy ring frames it; hangs below the bar */ .brand-badge { width: 92px; height: 92px; margin: 0 0 -20px; flex: 0 0 auto; object-fit: contain; /* the badge has its own navy field, so on a navy header it needs a rim, not a disc. A cream disc was tried and rejected — it read as a sticker. */ filter: drop-shadow(0 0 1px rgba(248,176,72,.55)) drop-shadow(0 2px 7px rgba(0,0,0,.5)); } /* header is logo-only (text dropped 2026-08-20, Derek); badge hangs well below the bar */ .site-header .brand-badge { width: 124px; height: 124px; margin: 6px 0 -40px; } .site-header { overflow: visible; } .footer-brand .brand-badge { width: 108px; height: 108px; margin: 0; } @media (max-width: 480px) { :root { --hdr-h: 80px; } .site-header .brand-badge { width: 92px; height: 92px; margin: 4px 0 -28px; } .footer-brand .brand-badge { width: 88px; height: 88px; margin-bottom: 0; } } /* --- Google rating card (real aggregate; no invented quotes) --- */ .rating-card { text-align: center; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-frame); padding: 2.2rem 1.5rem; max-width: 26rem; margin: 0 auto; } .rating-score { font-family: var(--display); font-size: clamp(3.2rem, 12vw, 4.4rem); line-height: 1; font-weight: 800; color: var(--ink); margin: 0; } .rating-stars { color: var(--orange-deep); font-size: 1.5rem; letter-spacing: .16em; margin: .35rem 0 .5rem; } .rating-meta { color: var(--muted-cream); font-weight: 600; margin: 0 0 1.4rem; } /* ---- Location map (OpenStreetMap embed) ------------------------------ Orientation only. People navigate with the Google "Get directions" button beside it; the frame is for "where is this, roughly". */ .mapframe { position: relative; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--ink-line); border-radius: var(--r-frame); overflow: hidden; background: var(--ink-raised); } .mapframe iframe, .mapframe #shop-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .on-sand .mapframe, .page-sand .mapframe { border-color: var(--line); background: var(--sand); } @media (max-width: 640px) { .mapframe { aspect-ratio: 4 / 3; } } .shop-map-label { background: var(--ink, #0A2340); color: #fff; font-weight: 700; font-size: .85rem; padding: .3rem .6rem; border: 0; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); } .shop-map-label::before { display: none; } /* Honeypot. Off-screen rather than display:none — some bots skip fields that are display:none, which would defeat the trap. Never focusable. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }