/* ========================================================================== Maui Golf & Sports Park Public site design system Built around the park logo: deep ocean navy, sunset gold, hibiscus pink, lagoon teal and palm green. Bold, warm and unmistakably a family fun park. Sections in this file: 1. Tokens 2. Reset and base 3. Layout primitives 4. Typography 5. Buttons 6. Header and navigation 7. Announcement bar 8. Hero 9. Page cover 10. Cards 11. Prose (editor-managed rich text) 12. Tables 13. Gallery and slideshow 14. Feature panels 15. Footer 16. Forms 17. Utilities 18. Motion and print ========================================================================== */ /* 1. Tokens ========================================================================== */ :root { /* Brand ------------------------------------------------------------- */ --navy-900: #06192a; --navy-800: #0a2438; --navy-700: #0e3049; --navy-600: #14425f; --navy-500: #1d5a7d; --teal-600: #128fa3; --teal-500: #17b3c9; --teal-400: #34cde0; --teal-100: #d5f4f9; --gold-600: #e08c00; --gold-500: #f5a623; --gold-400: #ffc02e; --gold-300: #ffd977; --gold-100: #fff2d0; --coral-600: #cf2a55; --coral-500: #ee3d6b; --coral-400: #f76a8d; --coral-100: #ffe0e8; --palm-600: #227a3d; --palm-500: #2e9e4f; --palm-400: #62bf6b; --sand-100: #fffdf8; --sand-200: #fff8ec; --sand-300: #fdeed6; --sand-400: #f3ddbf; --ink-900: #14232e; --ink-700: #3b4d5a; /* Was #667c8b, which is 4.36:1 on white and 4.13:1 on the sand sections. Both miss WCAG 2.1 AA 1.4.3 (4.5:1). This is 5.72:1 and 5.41:1. */ --ink-500: #556977; --ink-300: #a8bac5; /* Semantic ---------------------------------------------------------- */ --bg: var(--sand-100); --bg-alt: var(--sand-200); --bg-deep: var(--navy-800); --surface: #ffffff; --text: var(--ink-900); --text-muted: var(--ink-700); --text-on-deep: #eaf6fb; --border: #e8dcc8; --border-deep: rgba(255, 255, 255, .16); --accent: var(--coral-500); --accent-warm: var(--gold-400); --accent-cool: var(--teal-500); /* ⚠ ACCESSIBILITY TOKENS. These are deliberately NOT --teal-500/600. The brand ramp is tuned for large fills and gradients; at text size and at 1px it misses WCAG 2.1 AA. Keep the ramp for decoration and use these for anything that has to be READ or IDENTIFIED: --link 4.76:1 on the page, 4.83:1 on white (1.4.3, 4.5:1) --focus same colour, used for the focus ring (1.4.11, 3:1) --border-input 3.59:1 on white, 3.40:1 on sand (1.4.11, 3:1) --border stays light because a decorative card edge carries no information and 1.4.11 does not apply to it. A form control's edge does. */ --link: #0f7d8e; --focus: #0f7d8e; --border-input: #94856f; --focus-ring: 0 0 0 3px var(--sand-100), 0 0 0 6px var(--focus); /* Gradients --------------------------------------------------------- */ --sunset: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 42%, var(--coral-500) 100%); --lagoon: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-600) 100%); --deep: linear-gradient(170deg, var(--navy-700) 0%, var(--navy-900) 100%); --sunrays: radial-gradient(circle at 50% 120%, rgba(255, 192, 46, .30) 0%, rgba(255, 192, 46, 0) 62%); /* Type -------------------------------------------------------------- */ --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --step--1: clamp(.83rem, .80rem + .14vw, .92rem); --step-0: clamp(1rem, .96rem + .20vw, 1.12rem); --step-1: clamp(1.20rem, 1.12rem + .38vw, 1.45rem); --step-2: clamp(1.45rem, 1.30rem + .72vw, 1.95rem); --step-3: clamp(1.75rem, 1.48rem + 1.30vw, 2.65rem); --step-4: clamp(2.10rem, 1.62rem + 2.30vw, 3.60rem); --step-5: clamp(2.50rem, 1.65rem + 4.00vw, 5.00rem); /* Space ------------------------------------------------------------- */ --space-2xs: .375rem; --space-xs: .75rem; --space-sm: 1.25rem; --space-md: 2rem; --space-lg: 3rem; --space-xl: 4.5rem; --space-2xl: 7rem; /* Shape ------------------------------------------------------------- */ --radius-sm: 8px; --radius: 16px; --radius-lg: 26px; --radius-pill: 999px; --shadow-sm: 0 2px 6px rgba(6, 25, 42, .08); --shadow: 0 10px 28px -8px rgba(6, 25, 42, .22); --shadow-lg: 0 26px 60px -18px rgba(6, 25, 42, .38); --header-h: 84px; --container: 1220px; --container-narrow: 780px; --container-wide: 1480px; } @media (max-width: 900px) { :root { --header-h: 68px; } } /* 2. Reset and base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; /* Deliberately NO overflow-x: hidden here. It is the usual reflex for a stray horizontal scrollbar, but it turns into a scroll container and that is exactly what breaks position: sticky on the header in several browsers. Anything that overflows is clipped where it overflows instead; see .hero and .cover. */ } img, picture, video, svg { display: block; max-width: 100%; height: auto; } a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { color: var(--coral-600); } button { font: inherit; color: inherit; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } hr { border: 0; height: 3px; margin: var(--space-lg) auto; max-width: 220px; border-radius: var(--radius-pill); background: var(--sunset); opacity: .75; } ::selection { background: var(--gold-300); color: var(--navy-900); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .75rem 1.25rem; background: var(--navy-900); color: #fff; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /*
carries tabindex="-1" so the skip link can move real focus into it. It must not paint a focus ring when it does: nothing was tabbed to, and a ring around the entire page reads as a fault rather than as a cue. */ main:focus, main:focus-visible { outline: none; box-shadow: none; } /* 3. Layout primitives ========================================================================== */ .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); } .container--wide { width: min(100% - 2.5rem, var(--container-wide)); } @media (max-width: 640px) { .container, .container--narrow, .container--wide { width: min(100% - 1.75rem, var(--container)); } } .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } .section--loose { padding-block: var(--space-2xl); } .section--sand { background: var(--bg-alt); } .section--deep { background: var(--deep); color: var(--text-on-deep); position: relative; overflow: hidden; } .section--deep::after { content: ""; position: absolute; inset: 0; background: var(--sunrays); pointer-events: none; } .section--deep > * { position: relative; z-index: 1; } .section--deep :where(h1, h2, h3, h4) { color: #fff; } .section--deep a:not(.btn) { color: var(--gold-300); } .section--deep a:not(.btn):hover { color: var(--gold-400); } /* Torn-edge divider between a deep section and the sand below it. */ .section--deep + .section:not(.section--deep) { position: relative; } .grid { display: grid; gap: var(--space-sm); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); } .split { display: grid; gap: var(--space-lg); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* 4. Typography ========================================================================== */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; color: var(--navy-800); margin: 0 0 var(--space-xs); text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } h5 { font-size: var(--step-0); letter-spacing: .04em; text-transform: uppercase; } p { margin: 0 0 var(--space-xs); } /* The eyebrow above a section heading. */ .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--link); margin-bottom: var(--space-2xs); } .section--deep .eyebrow { color: var(--gold-400); } /* Section heading with the brand rule underneath. */ .section-head { text-align: center; max-width: 62ch; margin: 0 auto var(--space-lg); } .section-head p { color: var(--text-muted); font-size: var(--step-1); } .section--deep .section-head p { color: var(--text-on-deep); opacity: .92; } .section-head::after { content: ""; display: block; width: 84px; height: 5px; margin: var(--space-sm) auto 0; border-radius: var(--radius-pill); background: var(--sunset); } .lead { font-size: var(--step-1); color: var(--text-muted); } /* A word or phrase highlighted with a hand-drawn sunset underline. */ .mark { background: linear-gradient(transparent 62%, var(--gold-300) 62%); padding-inline: .1em; } /* 5. Buttons ========================================================================== */ .btn { --btn-bg: var(--navy-800); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .85em 1.9em; border: 0; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; } .btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); filter: saturate(1.08); } .btn:active { transform: translateY(0); } .btn--primary { --btn-bg: var(--sunset); --btn-fg: var(--navy-900); } .btn--book { --btn-bg: var(--coral-500); --btn-fg: #fff; } .btn--cool { --btn-bg: var(--lagoon); --btn-fg: #062733; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy-800); box-shadow: inset 0 0 0 2.5px currentColor; } .btn--ghost:hover { background: var(--navy-800); color: #fff; box-shadow: inset 0 0 0 2.5px var(--navy-800); } /* * ⚠ THE OUTLINE BUTTON MUST FLIP TO WHITE ON EVERY DARK GROUND. * * .btn--ghost defaults to navy text with a navy ring, which is right on the * cream page background and invisible on anything dark. It has now been * missed twice: first on the hero, where "See All Activities" was * navy-on-photo, and then in the mobile drawer, where "Book a Party" was * navy-on-navy and looked like an empty gap under "Buy Tickets". * * THIS LIST MUST NAME EVERY DARK-BACKGROUND CONTAINER IN THIS FILE. * tools/csscheck.py enforces that: it finds every rule that paints a navy or * --deep background and fails if the selector is not below. Add a dark panel, * add it here in the same edit, or the check will tell you. * * Deliberately NOT here: .cta. It is a sunset gradient, which is light, and * navy-on-sunset is the correct, readable pairing. */ .section--deep .btn--ghost, .hero .btn--ghost, .cover .btn--ghost, .mgsp-popup--deep .btn--ghost, .nav-drawer .btn--ghost, .site-header .btn--ghost, .site-footer .btn--ghost { --btn-fg: #fff; /* A touch of shade behind the glass so the ring reads against a bright patch of sky or sand in the photo underneath. */ background: rgba(6, 25, 42, .28); backdrop-filter: blur(2px); } .section--deep .btn--ghost:hover, .hero .btn--ghost:hover, .cover .btn--ghost:hover, .mgsp-popup--deep .btn--ghost:hover, .nav-drawer .btn--ghost:hover, .site-header .btn--ghost:hover, .site-footer .btn--ghost:hover { background: #fff; color: var(--navy-900); box-shadow: inset 0 0 0 2.5px #fff; } .btn--lg { padding: 1.05em 2.4em; font-size: var(--step-1); } .btn--sm { padding: .6em 1.35em; font-size: var(--step--1); } .btn--block { display: flex; width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; } .btn-row--center { justify-content: center; } /* 6. Header and navigation ========================================================================== */ /* * ⚠ THE HEADER IS ALWAYS SOLID. * * It used to start transparent over the hero and fill in on scroll. That only * works when the bar genuinely overlays the photo. Here it does not: the * header is sticky IN NORMAL FLOW, so it occupies its own band above the hero. * A semi-transparent navy over the cream page background rendered as a dull * grey stripe across the top of every page. * * Solid navy against the photo below is both better looking and one less * state to get wrong. */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--navy-800); border-bottom: 1px solid var(--border-deep); transition: box-shadow .25s ease; } .site-header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(6, 25, 42, .6); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; } .brand img { width: auto; height: calc(var(--header-h) - 18px); max-height: 66px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); transition: height .25s ease; } .brand-text { display: none; } @media (min-width: 1100px) { .brand-text { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.15; color: #fff; letter-spacing: -.01em; } .brand-text span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-400); } } /* Desktop navigation ------------------------------------------------- */ .nav { display: none; } @media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: .15rem; } } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: .35em; padding: .6rem .85rem; border-radius: var(--radius-pill); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; transition: background .18s ease, color .18s ease; } .nav-link:hover, .nav-item:focus-within > .nav-link { background: rgba(255, 255, 255, .14); color: #fff; } .nav-link[aria-current="page"] { color: var(--gold-400); } .nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: .28rem; transform: translateX(-50%); width: 22px; height: 3px; border-radius: var(--radius-pill); background: var(--gold-400); } .nav-caret { width: .55em; height: .55em; transition: transform .18s ease; } .nav-item.is-open .nav-caret { transform: rotate(180deg); } /* Dropdown ------------------------------------------------------------ */ .nav-menu { position: absolute; top: calc(100% + .4rem); left: 50%; translate: -50% 0; min-width: 250px; margin: 0; padding: .5rem; list-style: none; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-item.is-open > .nav-menu, .nav-item:focus-within > .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu::before { content: ""; position: absolute; top: -6px; left: 50%; translate: -50% 0; width: 14px; height: 14px; rotate: 45deg; background: var(--surface); border-radius: 3px; } .nav-menu a { display: block; padding: .6rem .85rem; border-radius: var(--radius-sm); color: var(--navy-800); font-weight: 600; font-size: .95rem; text-decoration: none; } .nav-menu a:hover { background: var(--gold-100); color: var(--coral-600); } .nav-menu .nav-group { padding: .7rem .85rem .25rem; font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-500); } /* Header call-to-action ------------------------------------------------ */ .header-actions { display: flex; align-items: center; gap: .6rem; } .header-phone { display: none; align-items: center; gap: .4rem; color: #fff; font-family: var(--font-display); font-weight: 700; text-decoration: none; white-space: nowrap; } .header-phone:hover { color: var(--gold-400); } @media (min-width: 1280px) { .header-phone { display: inline-flex; } } .header-book { display: none; } @media (min-width: 640px) { .header-book { display: inline-flex; } } /* Mobile toggle -------------------------------------------------------- */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .14); cursor: pointer; } @media (min-width: 1024px) { .nav-toggle { display: none; } } .nav-toggle span { display: block; height: 3px; border-radius: 2px; background: #fff; transition: transform .22s ease, opacity .18s ease; } .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile drawer -------------------------------------------------------- */ .nav-drawer { position: fixed; inset: var(--header-h) 0 0 auto; width: min(90vw, 400px); padding: var(--space-sm) var(--space-sm) var(--space-xl); background: var(--navy-800); /* Declared, not inherited. Without this the drawer inherits the body's dark ink, and anything that does not set its own colour goes invisible on the navy. */ color: var(--text-on-deep); overflow-y: auto; overscroll-behavior: contain; transform: translateX(102%); /* ⚠ VISIBILITY, NOT JUST TRANSFORM. A translated element is still in the tab order: with transform alone a keyboard user tabbing through the header fell into ~20 invisible off-screen links and had no idea where focus had gone. aria-hidden does not help, because that hides it from a screen reader and not from Tab. visibility:hidden removes it from both. WCAG 2.4.3/2.4.7. */ visibility: hidden; transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s; z-index: 99; box-shadow: var(--shadow-lg); } .site-header.is-open .nav-drawer { transform: translateX(0); visibility: visible; } @media (min-width: 1024px) { .nav-drawer { display: none; } } .nav-backdrop { position: fixed; inset: 0; background: rgba(6, 25, 42, .55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 98; } .site-header.is-open .nav-backdrop { opacity: 1; visibility: visible; } @media (min-width: 1024px) { .nav-backdrop { display: none; } } .drawer-nav { list-style: none; margin: 0; padding: 0; } .drawer-nav > li { border-bottom: 1px solid var(--border-deep); } .drawer-nav a, .drawer-nav .drawer-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem .35rem; background: none; border: 0; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; text-align: left; text-decoration: none; cursor: pointer; } .drawer-nav a[aria-current="page"] { color: var(--gold-400); } .drawer-sub { list-style: none; margin: 0; padding: 0 0 .5rem .9rem; display: none; } .drawer-sub a { font-size: .97rem; font-weight: 500; color: var(--teal-100); padding: .6rem .35rem; } li.is-open > .drawer-sub { display: block; } li.is-open > .drawer-toggle .nav-caret { transform: rotate(180deg); } .drawer-cta { margin-top: var(--space-sm); display: grid; gap: .6rem; } .drawer-contact { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--border-deep); color: var(--teal-100); font-size: .95rem; } .drawer-contact a { color: #fff; font-weight: 700; text-decoration: none; } /* 7. (Announcement bar: removed in the September 2026 revisions. The hours it showed live in the footer; time-sensitive notices are popups now.) ========================================================================== */ /* 8. Hero ========================================================================== */ .hero { position: relative; min-height: min(94vh, 860px); display: grid; isolation: isolate; background: var(--navy-900); /* The slow drift below scales the photo past 100% width. Clip it HERE, or it pushes the document wider than the viewport and every page gets a horizontal scrollbar. */ overflow: hidden; } .hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; } .hero-slide.is-active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; /* A slow drift keeps a still photo from reading as a broken video. */ animation: hero-drift 22s ease-in-out infinite alternate; } /* ⚠ LEFT-ANCHORED CROP ONCE THE CARD SITS BESIDE THE PHOTO. The headline card occupies the left of the hero, so on any screen narrower than the photo's 16:9 the crop should give up the RIGHT edge, not both edges. That pushes each slide's subject rightward, clear of the card, which is what keeps the rock climber's face and arm out from behind the headline. Below 768px the card spans the full width anyway, so the crop stays centred there and the subject stays in frame on a phone. */ @media (min-width: 768px) { .hero-slide img { object-position: 0% 50%; } } @keyframes hero-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); } } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(6, 25, 42, .62) 0%, rgba(6, 25, 42, .12) 34%, rgba(6, 25, 42, .82) 100%), radial-gradient(ellipse at 20% 90%, rgba(238, 61, 107, .28), transparent 58%); } .hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-xl); color: #fff; } /* The headline card. ⚠ ITS OPACITY IS A CONTRAST CALCULATION, NOT A TASTE CALL. The slides are often pale sky, so the card has to carry the text on its own. At .74 navy over a pure white pixel, the gold headline emphasis is 3.7:1 at its darkest stop (WCAG large text needs 3:1) and the white body text is 7:1+. The hero's own gradient and the backdrop blur only add margin to that. Go lighter and "Fun Park" fails over the sky; go back to the coral end of the sunset gradient and it fails at any opacity short of about .85. */ .hero-card { align-self: flex-start; width: 100%; max-width: 640px; padding: clamp(1.2rem, .9rem + 1.2vw, 2rem) clamp(1.2rem, .9rem + 1.6vw, 2.25rem); border-radius: var(--radius-lg); background: rgba(6, 25, 42, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55); } /* Quick-read activity chips: the four activities at a glance, each a link. */ .hero-chips { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .hero-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem .45rem .7rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .hero-chip svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--gold-400); } a.hero-chip:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); } a.hero-chip:hover svg { color: var(--navy-900); } .hero h1 { color: #fff; font-size: var(--step-5); max-width: 16ch; margin-bottom: var(--space-xs); text-shadow: 0 4px 30px rgba(0, 0, 0, .45); } .hero h1 em { font-style: normal; /* Gold only, deliberately not --sunset. The sunset gradient ends in coral, which is 2.1:1 on this card over a white sky pixel and fails WCAG large text. Every stop of this gold ramp clears 3:1. See .hero-card. */ background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 55%, var(--gold-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { max-width: 46ch; font-size: var(--step-0); color: #eaf6fb; margin-bottom: 0; } .hero-card .btn-row { margin-top: var(--space-sm); } /* Slide caption naming the pictured activity. */ .hero-caption { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; font-size: .95rem; color: #d7ecf5; } .hero-caption strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--gold-400); } .hero-dots { display: flex; align-items: center; gap: .5rem; margin-top: var(--space-sm); } .hero-dot { width: 34px; height: 5px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .34); cursor: pointer; transition: background .2s ease, width .2s ease; } .hero-dot.is-active { background: var(--gold-400); width: 52px; } /* The WCAG 2.2.2 stop control, on the hero and on the slideshow block. ⚠ It sits in the dot row rather than over the photo on purpose: a control that only appears on hover is not a control a keyboard or magnifier user can find, which is the whole failure it exists to fix. */ .hero-pause, .slide-pause { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; margin-left: .35rem; padding: 0; border: 0; border-radius: 50%; background: rgba(6, 25, 42, .55); color: #fff; cursor: pointer; transition: background .2s ease; } .hero-pause:hover, .slide-pause:hover { background: var(--coral-500); } /* One button, two glyphs: whichever one describes what the click will DO. */ .hero-pause .icon-play, .slide-pause .icon-play { display: none; } .hero-pause.is-paused .icon-pause, .slide-pause.is-paused .icon-pause { display: none; } .hero-pause.is-paused .icon-play, .slide-pause.is-paused .icon-play { display: block; } .slide-pause { position: absolute; left: .85rem; bottom: .85rem; margin-left: 0; backdrop-filter: blur(4px); } .hero-scroll { position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; z-index: 3; color: #fff; opacity: .8; animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } } /* 9. Page cover (interior pages) ========================================================================== */ .cover { position: relative; display: grid; place-items: center; min-height: clamp(300px, 42vh, 460px); padding-block: calc(var(--header-h) + var(--space-md)) var(--space-lg); background: var(--navy-800); isolation: isolate; text-align: center; overflow: hidden; } .cover img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(6, 25, 42, .74), rgba(6, 25, 42, .55) 45%, rgba(6, 25, 42, .86)); } .cover h1 { color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); margin-bottom: .35rem; } .cover p { color: #d7ecf5; font-size: var(--step-1); max-width: 60ch; margin-inline: auto; } .breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0 0 var(--space-xs); padding: 0; list-style: none; font-size: .88rem; color: rgba(255, 255, 255, .74); } .breadcrumb a { color: var(--teal-400); text-decoration: none; } .breadcrumb a:hover { color: var(--gold-400); text-decoration: underline; } .breadcrumb li + li::before { content: "/"; margin-right: .35rem; opacity: .5; } /* 10. Cards ========================================================================== */ .card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: transform .22s ease, box-shadow .22s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-300); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card:hover .card-media img { transform: scale(1.06); } .card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-sm); } .card-body h3 { margin-bottom: .35rem; font-size: var(--step-1); } .card-body p { color: var(--text-muted); font-size: .98rem; } .card-body .btn { margin-top: auto; align-self: flex-start; } /* A ribbon across the card image, e.g. a price. */ .card-tag { position: absolute; top: .8rem; left: .8rem; padding: .3rem .85rem; border-radius: var(--radius-pill); background: var(--sunset); color: var(--navy-900); font-family: var(--font-display); font-weight: 700; font-size: .82rem; box-shadow: var(--shadow-sm); } /* Whole card is one link. */ .card--link { text-decoration: none; color: inherit; } .card--link:hover { color: inherit; } .card--link .card-body h3 { color: var(--navy-800); } .card--link:hover .card-body h3 { color: var(--coral-600); } /* Compact card used inside deep sections. */ .section--deep .card { background: rgba(255, 255, 255, .06); border-color: var(--border-deep); color: var(--text-on-deep); } .section--deep .card-body p { color: rgba(234, 246, 251, .82); } /* Fact tiles ---------------------------------------------------------- */ .facts { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } .fact { padding: var(--space-sm); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); text-align: center; } .fact strong { display: block; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--coral-500); margin-bottom: .25rem; } .fact span { font-size: .95rem; color: var(--text-muted); } .section--deep .fact { background: rgba(255, 255, 255, .07); border-color: var(--border-deep); } .section--deep .fact strong { color: var(--gold-400); } .section--deep .fact span { color: rgba(234, 246, 251, .84); } /* 11. Prose (everything the block editor produces) ========================================================================== */ .prose { max-width: 72ch; } .prose--center { margin-inline: auto; text-align: center; } .prose--wide { max-width: none; } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose h2 { margin-top: var(--space-lg); font-size: var(--step-2); } .prose h3 { margin-top: var(--space-md); font-size: var(--step-1); } .prose h4 { margin-top: var(--space-sm); } .prose p { margin-bottom: var(--space-xs); } .prose ul, .prose ol { margin: 0 0 var(--space-sm); padding-left: 1.3em; } .prose li { margin-bottom: .4em; } .prose ul { list-style: none; padding-left: 0; } .prose ul > li { position: relative; padding-left: 1.7em; } .prose ul > li::before { content: ""; position: absolute; left: 0; top: .58em; width: .62em; height: .62em; border-radius: 50%; background: var(--sunset); } .prose--center ul { display: inline-block; text-align: left; } .prose ul ul { margin-top: .4em; margin-bottom: .4em; } .prose ul ul > li::before { background: var(--teal-400); } .prose blockquote { margin: var(--space-sm) 0; padding: var(--space-sm) var(--space-md); border-left: 5px solid var(--gold-400); border-radius: 0 var(--radius) var(--radius) 0; background: var(--gold-100); font-size: var(--step-1); font-style: italic; color: var(--navy-700); } .prose blockquote p:last-child { margin-bottom: 0; } .prose a { font-weight: 700; } .prose img { border-radius: var(--radius); margin-block: var(--space-sm); } .section--deep .prose { color: var(--text-on-deep); } .section--deep .prose blockquote { background: rgba(255, 255, 255, .08); color: #fff; } /* 12. Tables ========================================================================== */ /* Wide tables scroll inside their own box; the page body never scrolls. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .98rem; } thead th { position: sticky; top: 0; padding: 1rem; background: var(--navy-800); color: #fff; font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; white-space: nowrap; } thead th:not(:first-child) { text-align: center; } tbody td { padding: 1rem; border-top: 1px solid var(--border); vertical-align: top; } tbody td:not(:first-child) { text-align: center; white-space: nowrap; } tbody tr:nth-child(even) { background: var(--sand-200); } tbody tr:hover { background: var(--gold-100); } tbody td:first-child { font-weight: 700; color: var(--navy-800); } tbody td:first-child p:first-child strong { font-family: var(--font-display); font-size: var(--step-0); } tbody td :where(p, ul):last-child { margin-bottom: 0; } tbody td ul { font-weight: 400; } tbody td p { font-weight: 400; color: var(--text-muted); } tbody td p:first-child { color: var(--text); } /* A price cell that is also a buy link. */ tbody td a[href*="aluvii"], .price-link { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .95rem; border-radius: var(--radius-pill); background: var(--gold-100); color: var(--navy-800); font-family: var(--font-display); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease, transform .18s ease; } tbody td a[href*="aluvii"]:hover, .price-link:hover { background: var(--sunset); color: var(--navy-900); transform: translateY(-2px); } .table-note { margin-top: var(--space-sm); font-size: .95rem; color: var(--text-muted); } /* Hours table, narrower and centred. */ .table-wrap--hours table { min-width: 320px; } .table-wrap--hours tbody td { text-align: center; } .table-wrap--hours tbody td:first-child { text-align: left; } .table-wrap--hours tr.is-today { background: var(--gold-100); box-shadow: inset 4px 0 0 var(--gold-500); } .table-wrap--hours tr.is-today td:first-child::after { content: "Today"; margin-left: .6rem; padding: .1rem .55rem; border-radius: var(--radius-pill); background: var(--gold-500); color: var(--navy-900); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; } /* 13. Gallery and slideshow ========================================================================== */ .slideshow { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow); aspect-ratio: 16 / 9; } @media (max-width: 640px) { .slideshow { aspect-ratio: 4 / 3; } } .slideshow-track { position: absolute; inset: 0; } .slideshow-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; } .slideshow-slide.is-active { opacity: 1; } .slideshow-slide img { width: 100%; height: 100%; object-fit: cover; } .slide-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(6, 25, 42, .55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background .18s ease, transform .18s ease; } .slide-nav:hover { background: var(--coral-500); transform: translateY(-50%) scale(1.08); } .slide-nav--prev { left: .85rem; } .slide-nav--next { right: .85rem; } .slide-count { position: absolute; right: .85rem; bottom: .85rem; padding: .3rem .8rem; border-radius: var(--radius-pill); background: rgba(6, 25, 42, .6); color: #fff; font-size: .82rem; font-weight: 700; backdrop-filter: blur(4px); } /* Masonry-ish photo grid. */ .gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .gallery a { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gallery a:hover img { transform: scale(1.08); } /* Lightbox ------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-sm); background: rgba(6, 25, 42, .93); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--coral-500); } .lightbox-close { top: 1rem; right: 1rem; } .lightbox-prev { left: 1rem; top: 50%; translate: 0 -50%; } .lightbox-next { right: 1rem; top: 50%; translate: 0 -50%; } /* 14. Feature panels ========================================================================== */ /* Image on one side, copy on the other; alternates automatically. */ .feature { display: grid; gap: var(--space-lg); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); } .feature-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5 / 4; } .feature-media img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 900px) { .feature--flip .feature-media { order: 2; } } /* A row of round activity links. */ .ribbon { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); text-align: center; } .ribbon a { text-decoration: none; color: inherit; } .ribbon-img { aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto var(--space-xs); max-width: 190px; border: 5px solid var(--surface); box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease; } .ribbon a:hover .ribbon-img { transform: translateY(-6px) scale(1.03); border-color: var(--gold-400); } .ribbon-img img { width: 100%; height: 100%; object-fit: cover; } .ribbon h3 { font-size: var(--step-1); margin-bottom: .15rem; } .ribbon p { font-size: .93rem; color: var(--text-muted); } .section--deep .ribbon p { color: rgba(234, 246, 251, .82); } .section--deep .ribbon-img { border-color: rgba(255, 255, 255, .16); } /* Big call-to-action strip. */ .cta { position: relative; border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); background: var(--sunset); color: var(--navy-900); text-align: center; overflow: hidden; box-shadow: var(--shadow); } .cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .38), transparent 46%); pointer-events: none; } .cta > * { position: relative; } .cta h2 { color: var(--navy-900); } .cta p { max-width: 56ch; margin-inline: auto; font-size: var(--step-1); } .cta .btn { --btn-bg: var(--navy-800); --btn-fg: #fff; } /* Info panel: address, hours, phone. */ .info-panel { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .info-row { display: flex; gap: .9rem; align-items: flex-start; } /* ⚠ DIRECT CHILD ONLY. This paints the row's leading icon coral, and the rule used to be `.info-row svg`, which also caught every nested svg. The Follow us row's marks are fill="currentColor", so they inherited coral and then went coral-on-coral (invisible) once the hover lit the disc up. */ .info-row > svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--coral-500); margin-top: .2rem; } .info-row h4 { margin-bottom: .1rem; font-size: var(--step-0); } .info-row p, .info-row address { margin: 0; font-style: normal; color: var(--text-muted); font-size: .98rem; } .info-row a { font-weight: 700; } .map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--sand-300); } .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; } /* 15. Footer ========================================================================== */ .site-footer { background: var(--navy-900); color: var(--text-on-deep); padding-block: var(--space-xl) var(--space-md); position: relative; overflow: hidden; } .site-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 12% 0%, rgba(23, 179, 201, .20), transparent 55%); pointer-events: none; } .site-footer > * { position: relative; } /* Four equal columns: three link lists, then Find Us. There is no brand column any more, so auto-fit is free to give each list the same width. */ .footer-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .site-footer h5 { color: var(--gold-400); font-size: .82rem; letter-spacing: .14em; margin-bottom: var(--space-xs); } .footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .footer-list a { color: var(--text-on-deep); text-decoration: none; font-size: .97rem; } .footer-list a:hover { color: var(--gold-400); text-decoration: underline; } .footer-list address { font-style: normal; color: rgba(234, 246, 251, .82); font-size: .97rem; line-height: 1.5; } /* Social row. Rendered by social_row() in includes/layout/social.php, which is the only place the markup exists. ⚠ THE BASE STYLE IS FOR A DARK GROUND: a translucent WHITE disc with WHITE icons, which is invisible on the cream and sand sections. Anything on a light surface must pass 'social-row--light'. The contact panel and the Follow us block both do. */ .social-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-sm); } .social-row a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .10); color: #fff; transition: background .2s ease, transform .2s ease; } .social-row a:hover { background: var(--coral-500); transform: translateY(-3px); color: #fff; } /* The marks are fill="currentColor", so they must take their colour from the and from nothing else. This block can be dropped inside any container, and an ancestor that styles `svg` broadly would otherwise repaint them. */ .social-row svg { width: 20px; height: 20px; color: inherit; } .social-row--light a { background: var(--sand-300); color: var(--navy-800); } .social-row--light a:hover { background: var(--coral-500); color: #fff; } .social-row--center { justify-content: center; } /* Centred stack: copyright, the Contact link, then the agency mark. It used to be a space-between row, which threw the three items to the far edges of a 1900px viewport with nothing in the middle. */ .footer-bottom { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: 1px solid var(--border-deep); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); font-size: .88rem; color: rgba(234, 246, 251, .62); } .footer-bottom a { color: rgba(234, 246, 251, .82); } .footer-bottom img { height: 34px; width: auto; opacity: .8; transition: opacity .2s ease; } .footer-bottom a:hover img { opacity: 1; } /* 16. Forms ========================================================================== */ .form-grid { display: grid; gap: var(--space-sm); } @media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: .35rem; } .field label { font-weight: 700; font-size: .95rem; color: var(--navy-800); } .field .req { color: var(--coral-500); } .field .hint { font-size: .87rem; color: var(--text-muted); } .field input, .field textarea, .field select { width: 100%; padding: .8rem 1rem; /* ⚠ --border-input, not --border. A form control's edge is what tells you the control is there, so 1.4.11 wants 3:1 against the page. */ border: 2px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--step-0); transition: border-color .18s ease, box-shadow .18s ease; } .field textarea { min-height: 150px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--teal-100); } .field [aria-invalid="true"] { border-color: var(--coral-500); } .field-error { font-size: .88rem; font-weight: 700; color: var(--coral-600); } /* Honeypot: present for a bot, gone for everyone else. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { padding: var(--space-sm); border-radius: var(--radius); font-weight: 600; } .form-note--ok { background: #e5f6ea; color: #17632f; border: 1px solid #b7e2c4; } .form-note--bad { background: var(--coral-100); color: var(--coral-600); border: 1px solid #f8c3d1; } /* 17. Utilities ========================================================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .no-scroll { overflow: hidden; } /* 18. Motion and print ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .hero-slide img { animation: none; transform: scale(1.04); } } @media print { .site-header, .nav-drawer, .nav-backdrop, .hero-scroll, .slide-nav, .lightbox, .cta { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .cover { min-height: auto; padding-block: 0 1rem; background: none; } .cover img, .cover::after { display: none; } .cover h1, .cover p { color: #000; text-shadow: none; } .section { padding-block: 1rem; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } .table-wrap { border: 1px solid #999; box-shadow: none; } thead th { background: #eee; color: #000; } } /* 19. Block components Added alongside the block partials. Anything a block renders that is not already covered by sections 10-14 lives here. ========================================================================== */ /* Sunset-painted word, produced by *asterisks* in a plain-text heading. */ .section-head h2 em, .feature h2 em, .cta h2 em { font-style: normal; background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; } .section--deep .section-head h2 em { background: linear-gradient(135deg, var(--gold-300), var(--coral-400)); -webkit-background-clip: text; background-clip: text; } /* Party packages -------------------------------------------------------- */ .packages { display: grid; gap: var(--space-xs); max-width: 940px; margin-inline: auto; } .package { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .package[open] { box-shadow: var(--shadow); border-color: var(--gold-400); } .package-summary { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; list-style: none; user-select: none; } /* Both are needed: WebKit uses the pseudo-element, everyone else uses none. */ .package-summary::-webkit-details-marker { display: none; } .package-summary:hover { background: var(--sand-200); } .package-name { flex: 1; min-width: 0; } .package-name strong { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--navy-800); } .package-name span { display: block; font-size: .95rem; color: var(--text-muted); } .package-price { flex: 0 0 auto; padding: .4rem 1rem; border-radius: var(--radius-pill); background: var(--sunset); color: var(--navy-900); font-family: var(--font-display); font-weight: 700; white-space: nowrap; } .package-caret { flex: 0 0 auto; color: var(--ink-500); transition: transform .22s ease; } .package[open] .package-caret { transform: rotate(180deg); } .package-body { display: grid; gap: var(--space-md); padding: 0 var(--space-md) var(--space-md); border-top: 1px solid var(--border); padding-top: var(--space-sm); } @media (min-width: 780px) { .package-body { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; } } .package-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; } .package-media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 560px) { .package-summary { flex-wrap: wrap; padding: var(--space-sm); } .package-price { order: 3; } .package-body { padding-inline: var(--space-sm); } } /* List in columns ------------------------------------------------------- */ /* One