/* Premium page tokens (accent-only) */ .premium-page{ --ink-900:#14171a; --ink-600:#4b5563; --ink-400:#9aa3ac; --surface:#ffffff; --card-border:rgba(0,0,0,.06); --shadow:0 10px 24px rgba(0,0,0,.08); /* provided inline: --accent --accent2 --accent3 */ --accent-soft: color-mix(in srgb, var(--accent) 14%, white); --accent-ink: color-mix(in srgb, var(--accent) 85%, #111); } /* Theme root (body class) */ .premium-theme{ --ink-900:#14171a; --ink-600:#4b5563; --ink-400:#9aa3ac; --surface:#ffffff; --card-border:rgba(0,0,0,.06); --shadow:0 10px 24px rgba(0,0,0,.08); /* Defaults (will be overridden by inline ) */ --accent:#e63946; --accent2:#f4a261; --accent3:#ff9100; /* If accent-soft wasn’t injected inline, use color-mix when available */ --accent-soft: color-mix(in srgb, var(--accent) 14%, white); --accent-ink: color-mix(in srgb, var(--accent) 85%, #111); /* optional extra */ --accent3-soft: color-mix(in srgb, var(--accent3) 18%, white); --accent3-ink: color-mix(in srgb, var(--accent3) 85%, #111); } /* fallback ONLY if color-mix unsupported (don’t hardcode red) */ @supports not (color-mix(in srgb, red, white)){ .premium-theme{ /* keep accents, just provide sane generic fallbacks */ --accent-soft: rgba(0,0,0,.06); --accent-ink: #111; --accent3-soft: rgba(0,0,0,.06); --accent3-ink: #111; } } /* ========================= FULL-BLEED HERO (100vw) ========================= */ /* Full-bleed section */ .heroFull{ width: 100vw; margin-left: calc(50% - 50vw); /* break out of container */ margin-right: calc(50% - 50vw); } /* Wrapper controls height + cropping */ .heroFull__wrap{ position: relative; overflow: hidden; border-bottom: 1px solid var(--card-border); background: #fff; min-height: clamp(360px, 52vh, 560px); } /* Cover image */ .heroFull__img{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* Default: looks like a modern hero */ object-fit: cover; object-position: center; /* tiny performance hint */ transform: translateZ(0); } /* Fallback if no hero image */ .heroFull__img--fallback{ background: radial-gradient(900px 320px at 18% 35%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(900px 420px at 70% 20%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02)); } /* Bottom shade for readability (the main overlay) */ .heroFull__shade{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.38) 30%, rgba(0,0,0,.10) 55%, rgba(0,0,0,0) 78%); pointer-events: none; } /* “Lighthouse” glow accent */ .heroFull__glow{ position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 260px at 14% 80%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(780px 300px at 80% 88%, color-mix(in srgb, var(--accent3) 18%, transparent), transparent 72%); opacity: .95; } /* Content is anchored to bottom */ .heroFull__content{ position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; /* ✅ center horizontally */ min-height: clamp(360px, 52vh, 560px); padding: clamp(16px, 3vw, 28px) clamp(12px, 3vw, 28px) calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom)) clamp(12px, 3vw, 28px); } /* Constrain inner width like a container */ .heroFull__inner{ width: 100%; max-width: 1140px; margin: 0 auto; display: flex; justify-content: center; /* ✅ center the card */ } /* Glass card */ .heroFull__card{ width: 100%; border-radius: 10px; padding: 16px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 18px 50px rgba(0,0,0,.22); backdrop-filter: blur(12px); } .heroFull__top{ display: flex; gap: 14px; align-items: center; justify-content: center; /* ✅ */ text-align: center; /* ✅ */ flex-wrap: wrap; } /* Top row */ .heroFull__top{ display: flex; gap: 14px; align-items: center; } /* Logo */ .heroFull__logo{ width: auto; height: 100px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--card-border); } .heroFull__logo--placeholder{ display: grid; place-items: center; color: var(--ink-600); } /* Title block */ .heroFull__titleBlock{ min-width: 0; } .heroFull__title{ margin: 0; font-weight: 900; color: var(--ink-900); letter-spacing: -.02em; line-height: 1.08; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem); } .heroFull__tagline{ margin: .35rem 0 0; color: var(--ink-600); font-size: 1rem; } .heroFull__meta{ margin-top: .45rem; display: flex; gap: .5rem; align-items: center; justify-content: center; /* ✅ */ flex-wrap: wrap; color: var(--ink-600); } .heroFull__location{ display: inline-flex; align-items: center; } /* Actions */ .heroFull__actions{ display: flex; flex-wrap: wrap; gap: .5rem; } .heroFull__chips{ justify-content: center; } .heroFull__actions{ justify-content: center; } .heroFull__actions .btn{ white-space: nowrap; } /* Mobile tuning */ @media (max-width: 576px){ .heroFull__card{ padding: 14px; border-radius: 10px; } .heroFull__top{ flex-direction: column; align-items: center; text-align: center; } .heroFull__chips{ justify-content: center; } .heroFull__actions{ justify-content: center; } .heroFull__actions .btn{ flex: 1 1 100%; } .heroFull__logo{ width: 64px; height: 64px; } } /* Large screens: give hero a bit more cinematic height */ @media (min-width: 992px){ .heroFull__wrap, .heroFull__content{ min-height: clamp(420px, 56vh, 620px); } } .videoFrame{ position: relative; width: 100%; height: 100%; } .videoPoster{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #000; cursor: pointer; display: grid; place-items: center; } .videoPoster img{ width: 100%; height: 100%; object-fit: contain; /* ✅ logo visible */ background: #000; opacity: .92; } .videoPoster__play{ position: absolute; width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .videoPoster__fallback{ width: 100%; height: 100%; display: grid; place-items: center; color: #fff; opacity: .85; font-size: 2rem; } /* Optional: if you want FULL image visible (no crop) for certain pages: Add class heroFull--contain on the section */ .heroFull--contain .heroFull__img{ object-fit: contain; background: #fff; /* letterbox */ } .open-pill{ padding:.25rem .5rem; border-radius: 10px; font-size: .85rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); } .hero--cover .hero__img{ object-fit: cover; } /* ensure hidden always hides */ .open-pill[hidden]{ display:none !important; } .open-pill--open{ background: color-mix(in srgb, var(--accent3) 18%, white); color: color-mix(in srgb, var(--accent3) 85%, #111); border: 1px solid color-mix(in srgb, var(--accent3) 28%, transparent); } .open-pill--closed{ background: rgba(0,0,0,.06); color: var(--ink-600); border: 1px solid var(--card-border); } /* fallback if color-mix unsupported */ @supports not (color-mix(in srgb, red, white)){ .open-pill--open{ background: rgba(255,145,0,.18); color: #5a3a00; border-color: rgba(255,145,0,.28); } } .section-card{ background: var(--surface); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.06); overflow: hidden; } .section-card__title{ padding: .85rem 1rem; font-weight: 800; color: var(--ink-900); border-bottom: 1px solid var(--card-border); background: linear-gradient(90deg, var(--accent-soft), transparent); } .section-card__title{ position: relative; display: flex; align-items: center; gap: .6rem; } .title-accent{ width: 10px; height: 26px; border-radius: 999px; background: linear-gradient(180deg, var(--accent), var(--accent3)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent); } /* ========================= CONTACT CARD (CENTERED) ========================= */ .contactCard .section-card__body{ padding-top: 1.15rem; } /* Address block */ .contactCard__address{ display: grid; gap: .35rem; justify-items: center; } .contactCard__label{ font-size: .85rem; color: var(--ink-400); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .contactCard__value{ font-size: 1.02rem; font-weight: 800; color: var(--ink-900); } .contactCard__directions{ display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; padding: .35rem .6rem; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); } @supports not (color-mix(in srgb, red, white)){ .contactCard__directions{ border-color: rgba(230,57,70,.18); } } .contactCard__directions:hover{ filter: brightness(.98); } /* Actions: responsive grid */ .contactCard__actions{ display: grid; gap: .6rem; grid-template-columns: 1fr; justify-items: center; align-items: center; text-align: center; } .contactCard__btn{ width: 80%; max-width: 420px; border-radius: 10px; padding: .7rem .9rem; font-weight: 800; } /* On wider sidebars, allow 2 columns */ /* Social bar */ .contactCard__socialBar{ display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding-bottom: 10px; max-width: 100%; } .contactCard__icon{ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; text-decoration: none; color: var(--accent-ink); background: #fff; border: 1px solid var(--card-border); transition: transform .15s ease, background-color .15s ease; } .contactCard__btn{ min-height: 48px; } .contactCard__icon:hover{ transform: translateY(-1px); background: var(--accent-soft); } .subhead{ font-weight: 700; margin-bottom: .5rem; color: var(--ink-900); } /* Buttons */ .btn-accent{ background: var(--accent); border-color: var(--accent); color: white; } .btn-accent:hover{ filter: brightness(.95); color:white; } .btn-outline-accent{ border-color: color-mix(in srgb, var(--accent) 55%, #0000); color: var(--accent-ink); } .btn-outline-accent:hover{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } /* Chips / badges that never overflow */ .chip-row{ display:flex; flex-wrap: wrap; gap: .5rem; min-width: 0; } .chip{ max-width: 100%; display:inline-flex; align-items:center; padding:.35rem .6rem; border-radius: 999px; border: 1px solid var(--card-border); background: #fff; color: var(--ink-600); font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip--soft{ background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; } .chip--muted{ background: rgba(0,0,0,.04); color: var(--ink-600); } .chip-link{ width: 40px; height: 40px; display:grid; place-items:center; border-radius: 12px; border: 1px solid var(--card-border); color: var(--accent-ink); background: #fff; text-decoration:none; } .chip-link:hover{ background: var(--accent-soft); } /* Media tiles */ .media-tile{ border: 0; padding: 0; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--card-border); cursor: zoom-in; } .media-tile img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; display:block; } /* Hours table */ .hours-table{ display:flex; flex-direction:column; gap:.5rem; } .hours-row{ display:flex; justify-content:space-between; gap:1rem; font-size: .95rem; } .hours-day{ font-weight:700; color: var(--ink-900); } .hours-time{ color: var(--ink-600); text-align:right; } /* Map */ .map{ height: 380px; width: 100%; border-radius: 14px; } /* Sidebar stickiness (desktop) */ .sidebar-sticky{ position: sticky; top: 90px; } /* Reduce work below fold (Lighthouse) */ .section-card{ content-visibility: auto; contain-intrinsic-size: 600px; } .section-card__body{ padding: 1rem; color: var(--ink-900); } .img-modal{ position: fixed; inset: 0; z-index: 9999; } .img-modal[hidden]{ display:none; } .img-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.82); } .img-modal__content{ position: relative; width: min(980px, 92vw); height: min(86vh, 720px); margin: 6vh auto 0; display:flex; align-items:center; justify-content:center; } #modalImg{ max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); background: #000; } .img-modal__close{ position:absolute; top: -12px; right:-12px; border-radius: 999px; } @supports not (color-mix(in srgb, red, white)){ .title-accent{ box-shadow: 0 10px 24px rgba(230,57,70,.25); } } /* Make bootstrap outline buttons match theme */ .btn-outline-accent{ border-width: 2px; } .btn-outline-accent:focus, .btn-accent:focus{ box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 22%, transparent); } @supports not (color-mix(in srgb, red, white)){ .btn-outline-accent:focus, .btn-accent:focus{ box-shadow: 0 0 0 .25rem rgba(230,57,70,.20); } } .accordion-button:not(.collapsed){ background: var(--accent-soft); color: var(--accent-ink); } .accordion-button:focus{ box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 22%, transparent); } @supports not (color-mix(in srgb, red, white)){ .accordion-button:focus{ box-shadow: 0 0 0 .25rem rgba(0,0,0,.15); } }