/* ============================================================================================= * sk-semantic.css — hand-written, readable CSS layered over the compiled Tailwind build (home.css). * ============================================================================================= * ARCHITECTURE (load order set in inc/site_functions.php): * 1. home.css — the Figma→Tailwind COMPILED build (one minified line). Provides the desktop * layout + a handful of `[data-name="…"]{…!important}` mobile overrides that * this file must out-specify or work around (e.g. it hides the Home "Story * Banner Container" on mobile with display:none!important). * 2. sk-semantic.css — THIS file, loaded AFTER home.css so its rules win at equal specificity. * Desktop values are transcribed 1:1 from Figma so the desktop render is * unchanged; each component's mobile rules follow it, plus the WAVE blocks below. * * DESKTOP vs MOBILE: the fixed 1920 canvas is zoom-scaled ≥1024px (savour.js initScale); below 1024px * the zoom is dropped and the @media(max-width:1023px) reflow + the mobile-only .sk-hero-mobile * (from home.css) take over. Tablet-specific tweaks use @media(min-width:600px)and(max-width:1023px). * * FIX HISTORY (mobile QA, 2026-07): the "WAVE 5–10 FIXES" blocks near the end are sequential * loop-until-dry mobile passes. Notable: hero wordmark WCAG contrast (white + dark scrim), marquee * wrap, About "Our Story" clean-crop image, countdown z-index over the hero scrim, funder carousel * auto-height, newsletter wave uncapped to match the pink. Keep later blocks after earlier ones — * several deliberately override earlier rules by source order. * * Design tokens below keep the Figma colour names for continuity. * ============================================================================================= */ :root{ --sk-pink:#ef509d; /* client print-pink 2026-07-21 (was #e20390) */ --sk-pink-2:#ed6993; /* client secondary pink */ --sk-pink-3:#fc63c3; /* client secondary pink (bright) */ --sk-yellow:#fcbf05; /* --black-2 */ --sk-teal:#008299; --sk-black:#3d3935; /* charcoal (client 2026-07-16 round 2: "lighter again, more of a charcoal") — text + buttons site-wide, ~9.5:1 on cream */ --sk-white:#fff; --sk-cream:#f4f4f0; /* --black-6 page bg */ /* Figma-emitted family names (defined via @font-face in home.css), with clean fallbacks */ --sk-oswald:'Oswald:Bold','Oswald',sans-serif; --sk-os-bold:'Open Sans:Bold','Open Sans',sans-serif; --sk-os-reg:'Open Sans:Regular','Open Sans',sans-serif; --sk-os-med:'Open Sans:Medium','Open Sans:Regular','Open Sans',sans-serif; --sk-page:1920px; /* Figma canvas width */ --sk-gutter:205px; /* Figma content inset */ } /* ---- shared page shell (was: main.sk-scale w-[1920px] mx-auto) ---- * Fixed 1920 canvas so savour.js initScale() can `zoom` it to FILL any desktop width * (edge-to-edge on ultrawide, scales down on narrow desktops). Below 1024 the zoom is * dropped and the shell reflows to 100% (mobile @media at the foot of this file). */ .sk-page{background:var(--sk-cream);display:flex;flex-direction:column;align-items:center;position:relative;width:var(--sk-page);max-width:100%;margin-inline:auto} @media (min-width:1024px){ .sk-page{max-width:none} } /* let zoom scale the full 1920, no cap */ /* ---- shared section band (content inset + vertical rhythm) ---- */ .sk-band{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:100px var(--sk-gutter);gap:100px;position:relative} /* ================= SPONSOR PAGE (Figma 365:5411) ================= */ .sponsor-intro{display:flex;flex-direction:column;align-items:flex-start;gap:38px;width:100%} .sponsor-intro__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:100%} .sponsor-eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%} .sponsor-eyebrow img{width:11px;height:20px;display:block} .sponsor-eyebrow p{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-pink);white-space:nowrap} .sponsor-heading{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-align:center;text-transform:uppercase;width:100%;word-break:break-word} .sponsor-lead{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);text-align:center;width:100%} .sponsor-lead a{font-weight:700;text-decoration:underline} .logo-grids{display:flex;flex-direction:column;align-items:flex-start;gap:60px;width:100%} .logo-grid{display:flex;flex-direction:column;align-items:center;width:100%;position:relative} .logo-grid__tag{display:flex;align-items:center;justify-content:center;background:var(--sk-pink);padding:20px 30px;margin-bottom:-28px;position:relative;z-index:2} .logo-grid__tag h3{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-white);text-align:center;text-transform:uppercase;white-space:nowrap} .logo-grid__body{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;width:100%;padding:50px 0;background:var(--sk-white);border:.5px solid var(--sk-black);position:relative;z-index:1} .logo-grid__inner{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;width:1450px;max-width:100%} .logo-cell{display:flex;flex-shrink:0;align-items:center;justify-content:center;background:var(--sk-white);position:relative} .logo-cell--funder{width:346px;height:163px;padding:24px 30px} .logo-cell--funder img{max-width:100%;max-height:100%;object-fit:contain} .logo-cell--sponsor{width:270px;height:190px} .logo-cell--sponsor img{max-width:88%;max-height:80%;object-fit:contain} .partners{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:40px;width:100%;padding:70px 40px;background:var(--sk-white);border:.5px solid var(--sk-black);position:relative;z-index:1} .partners__col{display:flex;flex-shrink:0;flex-direction:column;align-items:center;font-family:var(--sk-os-med);font-size:20px;color:var(--sk-black);text-align:center;text-transform:uppercase} .partners__col p{margin:0;line-height:50px;white-space:nowrap} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .sk-band{padding:60px 24px;gap:60px} .sponsor-heading{font-size:34px;line-height:44px} .logo-grid__tag h3{font-size:22px;line-height:30px;white-space:normal} .logo-grid__body,.partners{padding:32px 16px} .logo-cell--funder{width:calc(50% - 10px);height:auto;aspect-ratio:346/163} .logo-cell--sponsor{width:calc(50% - 10px);height:auto;aspect-ratio:270/190} .partners__col p{white-space:normal} } /* ============ sk-frag-archive-events.css ============ */ /* sk-frag-archive-events.css — Savour Kilkenny event-list archive (Figma "event-list" 365:5279). * Wave 2 semantic rewrite of archive-events.php. Desktop transcribed 1:1 from the Figma/Tailwind build. * Reuses .sk-page (shell) from sk-semantic.css. Pill hover/is-active states + .hidden live in home.css * (loaded site-wide) — not redefined here. */ /* page-local colour tokens (exact hex from the Figma var(--x,#hex) fallbacks) */ :root{ --sk-green:#6bce41; /* --black-4 (day "All" pill) */ --sk-gray:#1e1e1e; /* --gray (off-pill label) */ --sk-border-gray:#d4d4d4; /* --light-border-gray (off-pill border) */ } /* ===== Container intro — Figma 365:5286 ===== */ .event-intro{display:flex;align-items:flex-end;width:100%;padding:100px var(--sk-gutter);background:var(--sk-cream);position:relative;flex-shrink:0} .event-intro__inner{display:flex;flex-direction:column;align-items:flex-start;gap:38px;width:1510px;max-width:100%;position:relative;flex-shrink:0} .event-intro__head{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;position:relative;flex-shrink:0} .event-eyebrow{display:flex;align-items:center;gap:8px;position:relative;flex-shrink:0} .event-eyebrow__marker{position:relative;width:11px;height:20px;flex-shrink:0} .event-eyebrow__marker-inner{position:absolute;inset:-0.61% -4.41%} .event-eyebrow__marker img{display:block;width:100%;height:100%;max-width:none} .event-eyebrow__text{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-pink);white-space:nowrap;word-break:break-word;position:relative;flex-shrink:0} .event-intro__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-align:center;text-transform:uppercase;word-break:break-word;min-width:100%;width:min-content;position:relative;flex-shrink:0} .event-intro__body{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);text-align:center;position:relative;flex-shrink:0} .event-intro__text{margin:0;line-height:30px;width:100%} /* ===== Filters section — Figma 365:5298 ===== */ .event-filters{display:flex;flex-direction:column;align-items:center;gap:49px;width:100%;padding:0 var(--sk-gutter);background:var(--sk-cream);position:relative;flex-shrink:0} .event-filters__panel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;width:100%;padding:30px;border-radius:20px;background:var(--sk-pink);position:relative;flex-shrink:0} .event-filters__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%;position:relative;flex-shrink:0} /* pills — .sk-filter (cursor/hover/is-active) is defined in home.css; these set layout + colour */ .event-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50px;padding:6px 20px;border-radius:100px;position:relative;flex-shrink:0} .event-pill--off{background:var(--sk-white);border:0.5px solid var(--sk-border-gray)} .event-pill--all-day{background:var(--sk-green)} .event-pill--all-cat{background:var(--sk-yellow)} .event-pill__label{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:18px;line-height:30px;color:var(--sk-gray);text-align:center;text-transform:uppercase;white-space:nowrap;word-break:break-word;position:relative;flex-shrink:0} .event-pill__label--active{font-family:var(--sk-os-bold);font-weight:700;color:var(--sk-black);width:100%;white-space:normal} /* Filter restyle (client: "needs to look a lot better") — ONE consistent selected state (yellow) instead of the mismatched green day-ALL + yellow cat-ALL; clean white unselected pills; hover/focus polish. */ .event-filters__panel{gap:14px;padding:26px 22px} .event-filters__row{gap:10px} .event-filters .sk-filter{background:#fff!important;border:0!important;box-shadow:0 1px 3px rgba(0,0,0,.10);transition:transform .12s ease,box-shadow .12s ease,background .15s ease} .event-filters .sk-filter .event-pill__label{color:#3a3a3a;transition:color .15s} .event-filters .sk-filter[aria-pressed="true"],.event-filters .sk-filter.is-active{background:var(--sk-yellow)!important;box-shadow:0 4px 12px rgba(0,0,0,.20)} .event-filters .sk-filter[aria-pressed="true"] .event-pill__label,.event-filters .sk-filter.is-active .event-pill__label{color:var(--sk-black)!important;font-family:var(--sk-os-bold)!important;font-weight:700!important} .event-filters .event-pill--all-day,.event-filters .event-pill--all-cat{background:#fff!important} /* neutralise the old green/yellow ALL defaults — colour now comes only from selected state */ .event-filters .sk-filter:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.20)} .event-filters .sk-filter:focus-visible{outline:3px solid #fff;outline-offset:2px} /* ===== Event cards grid — Figma 365:5326 ===== */ .event-cards{display:flex;flex-direction:column;align-items:center;gap:60px;width:100%;position:relative;flex-shrink:0} .event-cards__grid{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:23px;width:1510px;max-width:100%;position:relative;flex-shrink:0} .event-cards__empty{margin:0;font-family:var(--sk-os-reg);font-size:20px;color:var(--sk-black);padding:40px 0} .event-cards__none{margin:0;font-family:var(--sk-os-reg);font-size:20px;color:var(--sk-black);padding:60px 0} /* ===== responsive (Wave 3 refines further) ===== */ @media(max-width:900px){ .event-intro{padding:60px 24px} .event-intro__title{font-size:34px;line-height:44px} .event-filters{padding:0 24px 64px} /* breathing room after the last card before the yellow sponsors band */ .event-filters__panel{padding:20px} .event-cards__grid{gap:16px;justify-content:center} } /* ============ sk-frag-archive-places.css ============ */ /* sk-frag-archive-places.css — Places directory archive (/directory/). * Wave 2: converted from the Figma/Tailwind build. Desktop values transcribed 1:1. * Reuses page-hero, card-place and site-tail partials + tokens from sk-semantic.css. */ /* main wrapper (was: relative w-full overflow-hidden) */ .places-archive{position:relative;width:100%;overflow:hidden} /* white content band, grouped lists (was: bg-white flex flex-col gap-[80px] items-start px-[205px] py-[100px] shrink-0 w-full) */ .places-directory{background:var(--sk-white);display:flex;flex-direction:column;align-items:flex-start;gap:80px;width:100%;padding:100px var(--sk-gutter);position:relative;flex-shrink:0} /* one place-type group (was: flex flex-col gap-[40px] items-start shrink-0 w-full scroll-mt-[120px]) */ .places-group{display:flex;flex-direction:column;align-items:flex-start;gap:40px;width:100%;position:relative;flex-shrink:0;scroll-margin-top:120px} /* group heading (was: font-['Oswald:Bold'] font-bold leading-[1.1] text-[40px] text-black uppercase) */ .places-group__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:40px;line-height:1.1;color:var(--sk-black);text-transform:uppercase} /* card row (was: flex flex-wrap gap-[23px] items-start shrink-0 w-full) */ .places-group__cards{display:flex;flex-wrap:wrap;align-items:flex-start;gap:23px;width:100%;position:relative;flex-shrink:0} /* empty-state notice (was: font-['Open_Sans:Regular'] text-[20px] text-black) */ .places-empty{font-family:var(--sk-os-reg);font-size:20px;color:var(--sk-black)} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .places-directory{padding:60px 24px;gap:60px} .places-group{gap:28px} .places-group__title{font-size:30px} .places-group__cards{gap:16px} } /* ============ sk-frag-card-event.css ============ */ /* sk-frag-card-event.css — Event card (Figma "events" ffe45fce3094 / 283:1959). * The 3-up card on the home "What's On" slider + the event-list archive grid. * Transcribed 1:1 from the verified Tailwind build; desktop render unchanged. * Shared classes kept as-is: .sk-hover-lift, .sk-zoom, .sr-only. */ /* ---- card shell (was: w-[488px] flex-col isolate items-start shrink-0) ---- */ .event-card{display:flex;flex-direction:column;align-items:flex-start;isolation:isolate;position:relative;flex-shrink:0;width:488px} /* pink category badge — overlaps the image (mb-[-34px]); width fits its label */ .event-card__tag{background:var(--sk-pink);display:flex;flex-direction:column;align-items:flex-end;justify-content:center;isolation:isolate;overflow:clip;padding:10px 20px;margin-bottom:-34px;position:relative;flex-shrink:0;z-index:2} .event-card__cat{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-white);text-align:center;white-space:nowrap;word-break:break-word;position:relative;flex-shrink:0;z-index:1} .event-card__main{display:flex;flex-direction:column;align-items:flex-start;position:relative;flex-shrink:0;width:100%;z-index:1} /* image — 488:359 crop, pulled up under the card-edge svg. Figma image 55 = mb-[-100px] * (I365:6629;25:477); the 89px wave must overlap the image bottom by 100px or the curve * reveals the wrong amount of photo (client Fix 2c "wave inconsistent with the design"). */ .event-card__media{aspect-ratio:488/359;margin-bottom:-100px;position:relative;flex-shrink:0;width:100%} .event-card__media-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none} .event-card__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .event-card__body{display:flex;flex-direction:column;align-items:flex-start;position:relative;flex-shrink:0;width:100%} .event-card__edge{height:89px;position:relative;flex-shrink:0;width:100%} .event-card__edge img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .event-card__inner{background:var(--sk-white);display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 42px 50px;position:relative;flex-shrink:0;width:100%} .event-card__text{display:flex;flex-direction:column;align-items:flex-start;gap:45px;position:relative;flex-shrink:0;width:100%} .event-card__intro{display:flex;flex-direction:column;align-items:flex-start;gap:23px;position:relative;flex-shrink:0;width:100%} .event-card__heading-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;flex-shrink:0;width:100%} .event-card__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-pink);text-transform:uppercase;word-break:break-word;position:relative;flex-shrink:0;width:100%} .event-card__divider{height:0;position:relative;flex-shrink:0;width:401px} .event-card__divider img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .event-card__desc{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);word-break:break-word;position:relative;flex-shrink:0;width:100%} /* date / time / location / entry rows */ .event-card__details{display:flex;flex-direction:column;align-items:flex-start;gap:27px;position:relative;flex-shrink:0;width:401px} .event-card__detail{display:flex;align-items:flex-start;gap:12px;position:relative;flex-shrink:0;width:100%} /* Icon box = the text line-height (30px) so the icon centres on the first line of text; the SVG is contained + centred so mixed-width icons (calendar/clock/pin/ticket) share one optical column. */ .event-card__icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative} .event-card__icon img{position:static;inset:auto;display:block;width:100%;height:100%;object-fit:contain;max-width:none} .event-card__detail-text{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);word-break:break-word;position:relative;flex:1 1 0;min-width:0} /* Read More pill */ .event-card__cta{display:flex;flex-direction:column;align-items:center;border-radius:100px;text-decoration:none;position:relative;flex-shrink:0;width:404px} .event-card__cta-inner{background:var(--sk-pink);display:flex;align-items:center;justify-content:center;padding:20px 54px;border-radius:100px;position:relative;flex-shrink:0;width:100%} .event-card__cta-label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-white);text-transform:uppercase;white-space:nowrap;word-break:break-word;position:relative;flex-shrink:0} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .event-card{width:100%;max-width:488px} .event-card__details,.event-card__divider,.event-card__cta{width:100%} .event-card__inner{padding-left:24px;padding-right:24px} .event-card__title{font-size:26px;line-height:34px} } /* ============ sk-frag-card-news.css ============ */ /* ================= NEWS CARD (Figma "News Item" 365:6198) ================= * 3-up card on the news-listings grid (home.php). Date tag (calendar + date) over an * image, a decorative wave edge, then title + divider + excerpt + Read More on white. * sk-hover-lift + sk-zoom are shared behaviour classes from home.css (not redefined here). */ .news-card{display:flex;flex-direction:column;align-items:flex-start;isolation:isolate;width:488px;position:relative;flex-shrink:0} /* Pink date tag — overlaps the image below it (negative margin), sits on top (z-2) */ .news-card__date{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;isolation:isolate;background:var(--sk-pink);padding:10px 20px;margin-bottom:-45px;overflow:clip;position:relative;flex-shrink:0;z-index:2} .news-card__date-inner{display:flex;align-items:center;gap:12px;position:relative;flex-shrink:0;z-index:1} .news-card__date-icon{width:25px;height:25px;position:relative;flex-shrink:0} .news-card__date-icon img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .news-card__date-text{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-white);text-align:center;white-space:nowrap} /* Image column (sits under the date tag) */ .news-card__media{display:flex;flex-direction:column;align-items:flex-start;width:100%;position:relative;flex-shrink:0;z-index:1} .news-card__image{aspect-ratio:488/359;margin-bottom:-60px;width:100%;position:relative;flex-shrink:0} .news-card__image-inner{position:absolute;inset:0;overflow:hidden;pointer-events:none} .news-card__image-inner img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} /* White body — wave edge + text */ .news-card__body-wrap{display:flex;flex-direction:column;align-items:flex-start;width:100%;position:relative;flex-shrink:0} .news-card__edge{height:89px;width:100%;position:relative;flex-shrink:0} .news-card__edge img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .news-card__body{display:flex;flex-direction:column;align-items:center;background:var(--sk-white);padding:0 42px 50px;width:100%;position:relative;flex-shrink:0} .news-card__content{display:flex;flex-direction:column;align-items:center;gap:42px;width:100%;position:relative;flex-shrink:0} .news-card__text{display:flex;flex-direction:column;align-items:flex-start;gap:23px;width:100%;position:relative;flex-shrink:0} .news-card__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-pink);text-transform:uppercase;width:100%;word-break:break-word} .news-card__divider{height:0;width:401px;position:relative;flex-shrink:0} .news-card__divider img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .news-card__excerpt{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);width:100%;word-break:break-word} /* Read More button */ .news-card__more{display:flex;align-items:center;justify-content:center;background:var(--sk-pink);padding:20px 54px;border-radius:100px;width:100%;position:relative;flex-shrink:0} .news-card__more-label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-white);text-transform:uppercase;white-space:nowrap;position:relative;flex-shrink:0} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .news-card{width:100%} .news-card__body{padding:0 24px 32px} .news-card__title{font-size:26px;line-height:34px} .news-card__divider{width:100%} .news-card__more{padding:18px 32px} } /* ============ sk-frag-card-place.css ============ */ /* sk-frag-card-place.css — Place card (directory: things-to-do / eat / stay). * Converted 1:1 from the Figma/Tailwind build. Desktop render unchanged. * Structure: media (zoom) → wave edge → white content (title + icon rows). * Shared classes kept as-is: .sk-hover-lift, .sk-zoom (defined in home.css). */ .place-card{display:flex;flex-direction:column;align-items:flex-start;isolation:isolate;position:relative;flex-shrink:0;width:488px} .place-card__inner{display:flex;flex-direction:column;align-items:flex-start;position:relative;flex-shrink:0;width:100%;z-index:1} .place-card__media{position:relative;flex-shrink:0;width:100%;aspect-ratio:488/359;margin-bottom:-60px} .place-card__media-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none} .place-card__img{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:cover} .place-card__body{display:flex;flex-direction:column;align-items:flex-start;position:relative;flex-shrink:0;width:100%} .place-card__wave{position:relative;flex-shrink:0;width:100%;height:89px} .place-card__wave-img{position:absolute;display:block;inset:0;max-width:none;width:100%;height:100%} .place-card__content{display:flex;flex-direction:column;align-items:flex-start;gap:33px;background:var(--sk-white);padding:0 42px 50px;position:relative;flex-shrink:0;width:100%} .place-card__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-pink);text-transform:uppercase;word-break:break-word;position:relative;flex-shrink:0;width:100%} .place-card__rows{display:flex;flex-direction:column;align-items:flex-start;gap:29px;position:relative;flex-shrink:0;width:100%} .place-card__row{display:flex;align-items:center;gap:12px;position:relative;flex-shrink:0} .place-card__icon{position:relative;flex-shrink:0;width:29px;height:24.972px} .place-card__icon--flip{transform:scaleX(-1)} .place-card__icon-img{position:absolute;display:block;inset:0;max-width:none;width:100%;height:100%} .place-card__row-text{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);font-variation-settings:'wdth' 100;text-box-edge:cap alphabetic;text-box-trim:trim-both;position:relative;flex-shrink:0} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .place-card{width:100%} .place-card__content{padding:0 24px 32px;gap:24px} .place-card__title{font-size:26px;line-height:36px} } /* ============ sk-frag-front-page.css ============ */ /* sk-frag-front-page.css — Home template (front-page.php) converted from the Figma/Tailwind * build to readable semantic CSS. Desktop geometry is transcribed 1:1 from the Figma bracket * classes (Home 365:6481). Tokens (--sk-*) come from sk-semantic.css; only NEW home-only tokens * are declared below. Mobile rules live in the @media block at the end (breakpoint matches the * theme's existing 1024px cut-over, where home.css swaps in .sk-hero-mobile). * NOTE: .sk-page, .sk-marquee and .sk-hero-mobile are shared (defined elsewhere) — not redefined. */ :root{ --sk-scrim:rgba(0,0,0,.5); /* hero gradient dark stop (Figma linear-gradient) */ } /* Fixed-canvas fit-to-width zoom, applied from a CSS var set pre-paint in (see inc/site_functions.php). Applying it here (not from footer JS) means the 1920 canvas never renders full-size-then-shrinks → CLS 0. --sk-zoom is only set ≥1024px; below that it falls back to 1 (no zoom) and the mobile reflow takes over. */ /* Fixed-canvas zoom ONLY >=1024px. Below that, NO zoom — `zoom:1` still creates a containing block + stacking context that trapped the position:fixed mobile menu panel behind the dim backdrop ("faded" menu). */ @media (min-width:1024px){ .sk-page{zoom:var(--sk-zoom,1)} } /* ---------- shared home helpers ---------- */ .hp-eyebrow{display:flex;align-items:center;gap:8px;position:relative;flex-shrink:0} .hp-eyebrow__marker{position:relative;flex-shrink:0;width:11px;height:20px} .hp-eyebrow__marker>div{position:absolute;inset:-0.61% -4.41%} .hp-eyebrow__marker img{display:block;width:100%;height:100%;max-width:none} .hp-eyebrow__text{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;white-space:nowrap;position:relative;flex-shrink:0;text-decoration:none;font-variation-settings:'wdth' 100} .hp-eyebrow__text--pink{color:var(--sk-pink)} .hp-eyebrow__text--black{color:var(--sk-black)} .hp-eyebrow__text--white{color:var(--sk-white)} .hp-pill-label{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;text-transform:uppercase;white-space:nowrap;position:relative;flex-shrink:0;font-variation-settings:'wdth' 100} .hp-body-p{margin:0;line-height:30px;width:100%} /* ================= HERO (Figma 365:6482) ================= */ .hero{background:var(--sk-cream);display:flex;flex-direction:column;align-items:center;position:relative;width:100%;flex-shrink:0} .hero__imgwrap{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:-64px;position:relative;flex-shrink:0;width:100%} .hero__img{height:900px;overflow:clip;position:relative;flex-shrink:0;width:100%} .hero__bg{position:absolute;inset:0;pointer-events:none} .hero__bg-clip{position:absolute;inset:0;overflow:hidden} .hero__bg-img{position:absolute;height:124.84%;left:-1.82%;top:-15.44%;width:103.66%;max-width:none} .hero__gradient{position:absolute;inset:0;background-image:linear-gradient(89.78887926408143deg,var(--sk-scrim) 20.189%,rgba(0,0,0,0.1) 84.448%)} /* mobile-only stacked hero — geometry from home.css .sk-hero-mobile */ /* WCAG 1.4.3: teal wordmark (#008299) fails contrast over the photo (mid-luminance vs a mixed background → ~1.9:1 median). Fix = a dark scrim behind the hero text + a WHITE wordmark, which reads comfortably over the darkened photo (measured ≥4.5:1). Desktop keeps the teal composition. */ /* Client 2026-07-16: the mobile hero read far too dark — lighter scrim, with stronger text-shadows picking up the contrast slack so the white wordmark stays comfortably legible over busy photos. */ .sk-hero-mobile::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.48) 34%,rgba(0,0,0,.48) 74%,rgba(0,0,0,.26) 100%)} .hero-mobile__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:46px;line-height:.95;color:var(--sk-white);text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.65),0 2px 18px rgba(0,0,0,.55)} .hero-mobile__date{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:20px;color:var(--sk-white);text-transform:uppercase;text-shadow:0 2px 5px rgba(0,0,0,.7),0 2px 14px rgba(0,0,0,.55)} .hero-mobile__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:4px} .hero-mobile__btn{border-radius:100px;padding:12px 24px;font-family:var(--sk-os-bold);font-weight:700;font-size:16px;text-transform:uppercase;text-decoration:none} .hero-mobile__btn--outline{border:1px solid var(--sk-white);color:var(--sk-white)} .hero-mobile__btn--book{background:var(--sk-yellow);color:var(--sk-black)} /* hero overlay canvas — Figma stacks everything in one grid cell, positioned by margins */ .hero-overlay{position:absolute;left:calc(50% - 960px);padding-left:50px;top:202px;width:943px;display:flex;flex-direction:column;align-items:flex-start} .hero-canvas{display:inline-grid;grid-template-columns:max-content;grid-template-rows:max-content;place-items:start;line-height:0;margin-bottom:-70px;position:relative;flex-shrink:0} .hero-canvas>*{grid-column:1;grid-row:1} .hero-brush{display:flex;align-items:center;justify-content:center;height:585.994px;width:764.474px;margin:0;position:relative} .hero-brush__rot{flex:none;transform:rotate(7.88deg) skewX(0.02deg)} .hero-brush__img{height:494.153px;width:703.565px;position:relative} .hero-brush__img img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .hero-dates{margin:370.48px 0 0 274.74px;position:relative;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap;word-break:break-word} .hero-title{display:flex;align-items:center;justify-content:center;height:166.745px;width:328.339px;margin:204.2px 0 0 267.25px;position:relative} .hero-title__rot{flex:none;transform:rotate(-0.48deg)} .hero-title__text{font-family:var(--sk-oswald);font-weight:700;line-height:0;font-size:80px;color:var(--sk-teal);text-transform:uppercase;width:326.979px;white-space:pre-wrap;text-box-trim:trim-both;text-box-edge:cap alphabetic} .hero-title__line{margin:0;line-height:90px;display:block} /* spans (were

) stack as lines after H16 h1 conversion */ .hero-badge{display:inline-grid;grid-template-columns:max-content;grid-template-rows:max-content;place-items:start;height:112.983px;width:344.077px;margin:23.14px 0 0 209.16px;position:relative} .hero-badge>*{grid-column:1;grid-row:1} .hero-badge__text-cell{display:flex;align-items:center;justify-content:center;height:70.779px;width:241.27px;margin:15.97px 0 0 47.95px;position:relative} .hero-badge__text-rot{flex:none;transform:rotate(-1.14deg)} .hero-badge__text{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:40px;line-height:66px;color:var(--sk-yellow);text-transform:uppercase;white-space:nowrap;word-break:break-word;position:relative} .hero-badge__icon{display:flex;align-items:center;justify-content:center;height:62.108px;width:59.638px;position:relative} .hero-badge__icon--1{margin:0 0 0 283px} .hero-badge__icon--2{margin:20px 0 0 0} .hero-badge__icon-rot1{flex:none;transform:rotate(2.62deg)} .hero-badge__icon-rot2{flex:none;transform:rotate(-177.38deg) scaleY(-1)} .hero-badge__icon-img{height:59.57px;width:56.978px;position:relative} .hero-badge__icon-img img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .hero-food{display:flex;align-items:center;justify-content:center;height:406.153px;width:514.729px;margin:93.14px 0 0 172.93px;position:relative} .hero-food__rot{flex:none;transform:rotate(-0.96deg)} .hero-food__frame{height:397.73px;width:508.164px;position:relative} .hero-food__clip{position:absolute;inset:0;overflow:hidden;pointer-events:none} .hero-food__img{position:absolute;height:100.19%;left:0;top:-0.1%;width:97.39%;max-width:none} .hero-datebadge{margin:194.48px 0 0 635.74px;position:relative;width:260px;height:260px} .hero-datebadge img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .hero-links{display:flex;align-items:center;justify-content:center;height:99.15px;position:relative;flex-shrink:0;width:100%} .hero-links__rot{flex:none;transform:rotate(0.07deg);width:100%} .hero-links__row{display:flex;gap:23px;height:98px;align-items:flex-end;padding-left:163px;position:relative;width:100%} .hero-links__item{display:flex;flex-direction:column;height:100%;align-items:center;justify-content:center;padding:22px 0;position:relative;flex-shrink:0;width:189px} .hero-links__item--book{padding:18px 0;width:auto} .hero-btn{display:flex;align-items:center;justify-content:center;padding:20px 30px;position:relative;border-radius:100px;flex-shrink:0;width:100%;text-decoration:none} .hero-btn--outline{border:1px solid var(--sk-white)} .hero-btn--outline .hp-pill-label{color:var(--sk-white)} .hero-btn--book{background:var(--sk-yellow);padding:20px 40px;width:auto} .hero-btn--book .hp-pill-label{color:var(--sk-black)} /* ================= COUNTDOWN (Figma 365:6518) ================= */ .countdown{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 205px;position:relative;flex-shrink:0;width:100%;max-width:1920px} .countdown__inner{background:var(--sk-pink);display:flex;align-items:center;justify-content:center;overflow:clip;padding:50px 70px;border-radius:40px;position:relative;flex-shrink:0;width:100%} .countdown__row{display:flex;gap:22px;align-items:center;justify-content:center;position:relative;flex-shrink:0;width:1335px} .countdown__label{display:flex;flex-direction:column;justify-content:center;line-height:0;position:relative;flex-shrink:0;font-family:var(--sk-oswald);font-weight:700;font-size:24px;color:var(--sk-white);text-transform:uppercase;white-space:nowrap;word-break:break-word} .countdown__label p{margin:0;line-height:normal;white-space:pre} .countdown__timer{display:flex;align-items:center;padding:20px 0;position:relative;flex-shrink:0} .countdown__group{display:flex;gap:66px;align-items:center;position:relative;flex-shrink:0} .countdown__colon{margin:0;font-family:var(--sk-oswald);font-weight:700;height:105px;line-height:120px;font-size:92px;color:var(--sk-white);text-transform:uppercase;width:21px;position:relative;flex-shrink:0;word-break:break-word;text-box-trim:trim-both;text-box-edge:cap alphabetic} .countdown__colon--ghost{opacity:0} .countdown__value{display:flex;align-items:flex-start;position:relative;flex-shrink:0} .countdown__col{display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:relative;flex-shrink:0;font-weight:700;word-break:break-word} .countdown__num{margin:0;font-family:var(--sk-oswald);line-height:120px;font-size:92px;color:var(--sk-white);text-transform:uppercase;white-space:nowrap;position:relative;flex-shrink:0;text-box-trim:trim-both;text-box-edge:cap alphabetic} .countdown__word{margin:0;font-family:var(--sk-os-bold);line-height:30px;font-size:20px;color:var(--sk-white);text-align:center;position:relative;flex-shrink:0;font-variation-settings:'wdth' 100;text-box-trim:trim-both;text-box-edge:cap alphabetic} /* ================= FEATURED STORIES (Figma 365:6554) ================= */ .stories{background:var(--sk-cream);display:flex;gap:56px;align-items:center;justify-content:center;padding:60px 205px 0;position:relative;width:100%;max-width:1920px;flex-shrink:0} .stories__banner{display:flex;flex-direction:column;isolation:isolate;align-items:flex-start;padding-bottom:50px;position:relative;flex-shrink:0;width:837px} .stories__banner-img{height:747px;margin-bottom:-524px;position:relative;flex-shrink:0;width:706px;z-index:2} /* Fix 1 — intro/story image: rectangular photo clipped to the Figma pentagon in CSS * (peak 32.3% top; roof shoulders at ~29% down each side; straight sides + bottom). * The image field now takes any plain rectangular photo — the shape lives here, not baked * into the PNG — so the client can swap the photo from wp-admin. Node 365:6556 "Vector". */ .stories__banner-img{clip-path:polygon(32.3% 0,98.5% 29.2%,98.5% 100%,0 100%,0 29.7%)} .stories__banner-img img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .stories__graphic-wrap{display:flex;flex-direction:column;height:524px;align-items:flex-end;position:relative;flex-shrink:0;width:100%;z-index:1} .stories__graphic{height:497px;position:relative;flex-shrink:0;width:665px} .stories__graphic img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .stories__text{display:flex;flex-direction:column;gap:78px;min-height:663px;align-items:flex-start;position:relative;flex-shrink:0;width:590px} .stories__head{display:flex;flex-direction:column;gap:38px;align-items:flex-start;position:relative;flex-shrink:0;width:100%} .stories__head-inner{display:flex;flex-direction:column;gap:20px;align-items:flex-start;position:relative;flex-shrink:0;width:100%} .stories__title{margin:0;font-family:var(--sk-oswald);font-weight:700;line-height:0;min-width:100%;position:relative;flex-shrink:0;font-size:50px;color:var(--sk-black);text-transform:uppercase;width:min-content;white-space:pre-wrap;word-break:break-word} .stories__title span{display:block;line-height:70px} .stories__body{display:flex;flex-direction:column;gap:26px;align-items:flex-start;position:relative;flex-shrink:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);width:100%;font-variation-settings:'wdth' 100;word-break:break-word} .story-cta{display:flex;flex-direction:column;align-items:flex-start;position:relative;border-radius:100px;flex-shrink:0;width:218px} .story-cta__pill{background:var(--sk-black);display:flex;align-items:center;justify-content:center;padding:20px 30px;position:relative;border-radius:100px;flex-shrink:0;width:100%;text-decoration:none} .story-cta__pill .hp-pill-label{color:var(--sk-white)} /* ================= INFORMATION (Figma 365:6575) ================= */ .info{background:var(--sk-cream);display:flex;align-items:center;justify-content:center;position:relative;width:100%;max-width:1920px;flex-shrink:0} .info__container{display:flex;height:881px;align-items:center;padding-left:205px;padding-right:130px;position:relative;flex-shrink:0} .info__content{background:var(--sk-yellow);display:flex;flex-direction:column;min-height:573px;justify-content:center;align-items:flex-start;margin-right:-152px;padding:100px 80px 100px 76px;position:relative;flex-shrink:0;width:1295px} .info__stack{display:flex;flex-direction:column;gap:44px;align-items:center;position:relative;flex-shrink:0;width:1164px} .info__head{display:flex;flex-direction:column;gap:15px;align-items:center;position:relative;flex-shrink:0;width:100%} .info__heading-wrap{display:flex;flex-direction:column;gap:24px;align-items:center;position:relative;flex-shrink:0;text-align:center;width:100%;word-break:break-word} .info__heading{margin:0;font-family:var(--sk-oswald);font-weight:700;line-height:70px;position:relative;flex-shrink:0;font-size:50px;color:var(--sk-black);text-transform:uppercase;width:100%} .info__body{display:flex;flex-direction:column;gap:24px;align-items:center;position:relative;flex-shrink:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);width:100%;font-variation-settings:'wdth' 100} .info__buttons{display:flex;gap:29px;align-items:center;position:relative;flex-shrink:0} .info-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;border-radius:100px;flex-shrink:0;width:340px;text-decoration:none} .info-btn--disabled{opacity:.7;cursor:default} .info-btn__pill{display:flex;align-items:center;justify-content:center;padding:20px 30px;position:relative;border-radius:100px;flex-shrink:0;width:100%} .info-btn__pill--white{background:var(--sk-white)} .info-btn__pill--black{background:var(--sk-black)} .info-btn__pill--teal{background:var(--sk-teal)} .info-btn__pill--white .hp-pill-label{color:var(--sk-black)} .info-btn__pill--black .hp-pill-label,.info-btn__pill--teal .hp-pill-label{color:var(--sk-white)} .info__image{height:881px;position:relative;flex-shrink:0;width:442px} .info__image img{position:absolute;inset:0;max-width:none;object-fit:cover;pointer-events:none;width:100%;height:100%} /* ================= FESTIVAL GALLERY / WHAT'S ON (Figma 365:6601) ================= */ .gallery{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;position:relative;width:100%;max-width:1920px;flex-shrink:0;overflow-x:hidden} .gallery__container{display:flex;flex-direction:column;isolation:isolate;align-items:flex-start;margin-top:13px;padding-bottom:109px;position:relative;flex-shrink:0;width:100%} .gallery__bg{position:absolute;bottom:0;height:898px;width:1920px;left:50%;transform:translateX(-50%);z-index:1} .gallery__bg img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .gallery__events{display:flex;align-items:center;gap:48px;padding:16px 0 10px 205px;position:relative;flex-shrink:0;z-index:2;width:100%} .gallery__arrow{position:absolute;width:100px;height:100px;z-index:3;top:146px;border-radius:9999px;background:var(--sk-black);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer} .gallery__arrow--prev{left:664px} .gallery__arrow--next{left:1619px} .gallery__intro{display:flex;flex-direction:column;gap:36px;height:501px;align-items:flex-start;position:relative;flex-shrink:0;width:379px} .gallery__intro-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:relative;flex-shrink:0;width:379px} .gallery__title{margin:0;font-family:var(--sk-oswald);font-weight:700;height:203px;line-height:70px;position:relative;flex-shrink:0;font-size:50px;color:var(--sk-white);text-transform:uppercase;width:379px;word-break:break-word} .gallery__lead{margin:0;font-family:var(--sk-os-reg);font-weight:400;line-height:30px;position:relative;flex-shrink:0;font-size:20px;color:var(--sk-white);width:369px;font-variation-settings:'wdth' 100;word-break:break-word} .events-viewall{display:flex;flex-direction:column;align-items:flex-start;position:relative;border-radius:100px;flex-shrink:0;width:218px;text-decoration:none} .events-viewall__pill{background:var(--sk-yellow);display:flex;align-items:center;justify-content:center;padding:16px 30px;position:relative;border-radius:100px;flex-shrink:0;width:100%} .events-viewall__pill .hp-pill-label{color:var(--sk-black)} .gallery__track{display:flex;gap:42px;align-items:flex-start;position:relative;flex:1 1 0;min-width:0;overflow-x:auto;padding-bottom:10px;scrollbar-width:none} .gallery__track::-webkit-scrollbar{display:none} .gallery__contact-vector{position:absolute;bottom:0;left:10px;height:162px;width:278px;z-index:2} .gallery__contact-vector img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} /* ================= CONTACT BAND (Figma 365:6646) ================= */ .contact-band{background:var(--sk-cream);display:flex;flex-direction:column;gap:20px;align-items:center;padding-top:100px;padding-bottom:60px;position:relative;width:100%;max-width:1920px;flex-shrink:0} .contact-band__title{margin:0;font-family:var(--sk-oswald);font-weight:700;height:74px;line-height:70px;min-width:100%;position:relative;flex-shrink:0;font-size:50px;color:var(--sk-black);text-align:center;text-transform:uppercase;width:min-content;word-break:break-word} /* ================= MEDIA CARDS — Festival Map (365:6653) + Family (365:6673) ================= */ .media-cards{background:var(--sk-cream);display:flex;gap:18px;align-items:center;position:relative;width:100%;max-width:1920px;flex-shrink:0} .media-cards--map{justify-content:flex-end} .media-card{position:relative;flex-shrink:0;height:712px;overflow:hidden} .media-card--w627{width:627px} .media-card--w630{width:630px} .media-card--w631{width:631px} .media-card__inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:553px 50px 63px 45px;overflow:hidden} .media-card__bg{position:absolute;inset:0;pointer-events:none} .media-card__bg-clip{position:absolute;inset:0;overflow:hidden} .media-card__img{position:absolute;max-width:none} .media-card__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 55.618%,#000)} .media-card__caption{display:flex;flex-direction:column;gap:36px;align-items:center;position:relative;flex-shrink:0;text-align:center;text-transform:uppercase;width:100%;font-weight:700;word-break:break-word} .media-card__title{margin:0;font-family:var(--sk-oswald);height:46px;line-height:46px;position:relative;flex-shrink:0;font-size:32px;color:var(--sk-white);width:100%} .media-card__link{margin:0;font-family:var(--sk-os-bold);line-height:30px;position:relative;flex-shrink:0;font-size:20px;color:var(--sk-yellow);text-decoration:underline;text-decoration-style:solid;text-underline-position:from-font;width:100%;font-variation-settings:'wdth' 100;text-box-trim:trim-both;text-box-edge:cap alphabetic} /* ================= EXPERIENCE MARQUEE (Figma 365:6669) ================= */ .marquee-band{background:var(--sk-cream);display:flex;flex-direction:column;align-items:flex-start;padding:78px 0;position:relative;width:100%;max-width:1920px;flex-shrink:0;overflow:hidden} .marquee-band__text{margin:0;font-family:var(--sk-oswald);font-weight:700;line-height:120px;position:relative;flex-shrink:0;font-size:92px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap;padding-right:100px} /* ================= TESTIMONIALS (Figma 365:6689) ================= */ .testimonials{background:var(--sk-cream);display:flex;flex-direction:column;align-items:flex-end;padding-top:100px;position:relative;width:100%;max-width:1920px;flex-shrink:0;overflow:hidden} .testimonials__container{display:flex;gap:44px;align-items:center;margin-bottom:-84px;position:relative;flex-shrink:0;width:100%} .testimonials__shape{height:506px;position:relative;flex-shrink:0;width:452px} .testimonials__shape img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .testimonials__list{display:flex;gap:28px;align-items:center;position:relative;flex-shrink:0;width:1218px} .testimonials__meta{display:flex;gap:20px;height:405px;align-items:center;position:relative;flex-shrink:0} .testimonials__meta-inner{display:flex;flex-direction:column;gap:38px;align-items:flex-start;position:relative;flex-shrink:0;width:364px} .testimonials__meta-head{display:flex;flex-direction:column;gap:20px;align-items:flex-start;position:relative;flex-shrink:0;width:100%} .testimonials__heading{margin:0;font-family:var(--sk-oswald);font-weight:700;line-height:70px;min-width:100%;position:relative;flex-shrink:0;font-size:50px;color:var(--sk-black);text-transform:uppercase;width:min-content;word-break:break-word} .testimonials__rating{display:flex;gap:34px;align-items:flex-start;position:relative;flex-shrink:0} .testimonials__stars{height:26px;position:relative;flex-shrink:0;width:145px} .testimonials__stars img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} .testimonials__google{height:32px;position:relative;flex-shrink:0;width:98px} .testimonials__google-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none} .testimonials__google img{position:absolute;height:100%;left:1.98%;top:0;width:99.09%;max-width:none} .testimonials__divider{height:322px;position:relative;flex-shrink:0;width:0} .testimonials__divider>div{position:absolute;inset:0 -0.25px} .testimonials__divider img{display:block;width:100%;height:100%;max-width:none} /* stage = a robust flex row [prev arrow][quote (fills)][next arrow]. The old absolute * magic-number layout (next arrow at left:515) put the arrow on top of the quote text. */ .testimonials__stage{display:flex;align-items:center;gap:32px;width:806px;min-height:424px} .testimonials__slides{order:1;flex:1 1 0;min-width:0;display:grid;align-items:center} /* every slide stacks in one grid cell; JS cross-fades them via .is-active once .is-ready is set */ .testimonials__slide{grid-area:1/1;display:flex;flex-direction:column;gap:47px;align-items:flex-start;width:100%} .testimonials__slides.is-ready .testimonials__slide{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease} .testimonials__slides.is-ready .testimonials__slide.is-active{opacity:1;visibility:visible;pointer-events:auto} .testimonials__slide--hidden{display:none} .testimonials__quote-block{display:flex;flex-direction:column;gap:39px;align-items:flex-start;position:relative;flex-shrink:0;color:var(--sk-black);width:490px;word-break:break-word} .testimonials__quote{margin:0;font-family:var(--sk-oswald);font-weight:700;line-height:46px;position:relative;flex-shrink:0;font-size:32px;text-transform:uppercase;width:100%} .testimonials__body{margin:0;font-family:var(--sk-os-reg);font-weight:400;line-height:30px;position:relative;flex-shrink:0;font-size:20px;color:var(--sk-black);width:100%;white-space:pre-wrap;font-variation-settings:'wdth' 100;text-box-trim:trim-both;text-box-edge:cap alphabetic} .testimonials__author-row{display:flex;gap:29px;align-items:center;position:relative;flex-shrink:0} .testimonials__quote-icon{height:70px;position:relative;flex-shrink:0;width:91px} .testimonials__quote-icon>div{position:absolute;inset:-1.43% -1.1%} .testimonials__quote-icon img{display:block;width:100%;height:100%;max-width:none} .testimonials__author-divider{height:72px;position:relative;flex-shrink:0;width:0} .testimonials__author-divider>div{position:absolute;inset:0 -0.5px} .testimonials__author-divider img{display:block;width:100%;height:100%;max-width:none} .testimonials__author-meta{display:flex;flex-wrap:wrap;gap:16px 161px;align-items:flex-start;align-content:flex-start;line-height:30px;position:relative;flex-shrink:0;font-size:20px;width:270px;word-break:break-word} .testimonials__author{margin:0;font-family:var(--sk-os-bold);font-weight:700;position:relative;flex-shrink:0;color:var(--sk-teal);width:134px;font-variation-settings:'wdth' 100;text-box-trim:trim-both;text-box-edge:cap alphabetic} .testimonials__date{margin:0;font-family:var(--sk-os-reg);font-weight:400;position:relative;flex-shrink:0;color:var(--sk-black);white-space:nowrap;font-variation-settings:'wdth' 100;text-box-trim:trim-both;text-box-edge:cap alphabetic} .testimonials__nav{flex:none;width:72px;height:72px;z-index:2;border:0;background:transparent;cursor:pointer;padding:0} .testimonials__nav--prev{order:0} .testimonials__nav--next{order:2} .testimonials__nav-icon{display:block;width:100%;height:100%} .testimonials__nav--prev .testimonials__nav-icon{transform:rotate(90deg)} .testimonials__nav--next .testimonials__nav-icon{transform:rotate(90deg) scaleY(-1)} .testimonials__nav-icon img{display:block;width:100%;height:100%} .testimonials__sponsors{height:206px;position:relative;flex-shrink:0;width:1920px} .testimonials__sponsors img{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none} /* ================= RESPONSIVE (Wave 3 refines further) ================= * 1024px breakpoint matches the theme: below it home.css shows .sk-hero-mobile and sets * body{overflow-x:hidden}. The old .sk-scale rules keyed off Tailwind class names that no * longer exist, so the collapses below take their place. */ @media(max-width:1023px){ /* hero: hide the fixed desktop canvas; .sk-hero-mobile (home.css) takes over */ .hero__imgwrap{margin-bottom:0} .hero__img{height:auto;min-height:480px} .hero-overlay{display:none} /* countdown */ /* tuck the countdown card up over the bottom of the hero image (desktop does this via the hero's * -64px margin; that's dropped on mobile, so pull the countdown up itself) */ /* z-index:6 so the opaque pink card paints OVER the mobile hero scrim (.sk-hero-mobile z-index:5), otherwise the scrim darkened the card's top 46px into a maroon seam. */ .countdown{padding:0 16px;margin-top:-46px;position:relative;z-index:6} .countdown__inner{padding:24px 18px;border-radius:24px} .countdown__row{width:100%;flex-wrap:wrap;gap:16px} .countdown__timer{flex-wrap:wrap;justify-content:center;gap:8px 0} .countdown__group{gap:20px} .countdown__num,.countdown__colon{font-size:42px;line-height:1.08;height:auto} .countdown__colon{width:auto} .countdown__word{font-size:16px} /* H2: centre the stacked two-line heading on mobile (desktop stays LEFT per Figma) */ .countdown__label{align-items:center;width:100%} .countdown__label p{text-align:center} /* stories */ .stories{flex-direction:column;padding:44px 24px 40px;gap:28px} .stories__banner,.stories__text,.stories__banner-img,.stories__graphic,.stories__graphic-wrap{width:100%} .stories__banner-img{height:auto;margin-bottom:24px;aspect-ratio:706/747} .stories__banner-img img{position:static} .stories__graphic-wrap{height:auto} .stories__graphic{max-width:100%} .stories__text{min-height:0;gap:32px} .stories__title{font-size:30px} .stories__title span{line-height:1.2} /* information */ .info__container{flex-direction:column;height:auto;padding:0} /* Angular motif (client): echo the logo's slanted edge on the full-width COLOUR blocks — the yellow Information block and the yellow footer copyright band cut into the cream above at a slight angle. */ .info__content{width:100%;margin-right:0;min-height:0;padding:52px 24px 36px;clip-path:polygon(0 0, 100% 20px, 100% 100%, 0 100%)} .site-footer__copyright{clip-path:polygon(0 0, 100% 14px, 100% 100%, 0 100%);padding-top:26px} .info__stack{width:100%} .info__heading,.info__stack{max-width:100%} .info__heading{font-size:30px;line-height:1.15} .info__buttons{flex-wrap:wrap;justify-content:center;gap:16px} .info-btn{width:100%;max-width:340px} /* Client override (2026-07-15): hide the chef cutout on mobile — takes up too much space. (Design team's H14 wanted it shown; the client prefers it removed on mobile — client wins.) */ .info__image{display:none} /* gallery */ .gallery__events{flex-direction:column;align-items:stretch;padding:16px 24px 64px;gap:24px;position:relative} /* H12: keep the Events slider arrows on mobile — 44px WCAG tap targets, a centred pair below the row */ .gallery__arrow{display:flex;width:44px;height:44px;position:absolute;top:auto;bottom:12px} .gallery__arrow--prev{left:calc(50% - 50px);right:auto} .gallery__arrow--next{left:calc(50% + 6px);right:auto} .gallery__intro,.gallery__intro-head{width:100%;height:auto} .gallery__title{height:auto;font-size:30px;width:100%} .gallery__lead{width:100%} .gallery__track{width:100%;flex:none} /* contact band */ .contact-band{padding:28px 24px 40px} .contact-band__title{height:auto;font-size:30px} /* media cards (map + family) */ .media-cards{flex-direction:column;gap:16px;padding:0 20px} .media-cards--map{justify-content:center} /* portrait tiles (aspect not fixed height) so faces aren't head-chopped by the wide crop at 600/768 */ .media-card,.media-card--w627,.media-card--w630,.media-card--w631{width:100%;height:auto;aspect-ratio:4/5;max-width:460px;margin-inline:auto} .media-card__img{object-position:center 28%} /* marquee */ /* Mobile: the 32s horizontal scroll reads as hard-clipped mid-sentence text in a screenshot. Present the phrase as one static, centred, wrapped statement (same as the reduced-motion path). */ .marquee-band{padding:48px 0;align-items:center} /* display:block (not the home.css flex) + flex-shrink reset so the single

actually WRAPS instead of expanding to its one-line max-content width and clipping at the gutters. */ .sk-marquee{display:block;width:100%;animation:none} .marquee-band__text{font-size:24px;line-height:1.35;padding-right:0;white-space:normal;flex-shrink:1;max-width:100%;text-align:center} .marquee-band__text:nth-child(2){display:none} /* testimonials */ .testimonials{align-items:stretch} .testimonials__container{flex-direction:column;gap:24px;margin-bottom:0;padding:0 24px} .testimonials__shape{display:none} .testimonials__list{width:100%;flex-direction:column;align-items:stretch;gap:24px} .testimonials__meta,.testimonials__meta-inner{width:100%;height:auto} .testimonials__heading{font-size:30px;line-height:1.15} /* stage wraps: quote fills the first row, the two arrows sit centred on the row below */ .testimonials__stage{flex-wrap:wrap;justify-content:center;width:100%;min-height:0;gap:20px} .testimonials__slides{width:100%;flex:1 1 100%} .testimonials__slide{width:100%} .testimonials__quote-block{width:100%} .testimonials__quote{font-size:24px;line-height:1.2} .testimonials__author-meta{width:100%;gap:8px 40px} .testimonials__nav{width:54px;height:54px} .testimonials__nav--prev{order:1} .testimonials__nav--next{order:2} .testimonials__sponsors{width:100%;height:auto;aspect-ratio:1920/206} .testimonials__sponsors img{position:static} } /* ============ sk-frag-home.css ============ */ /* sk-frag-home.css — home.php (news-listings, Figma "news-listings" 365:6178). * Intro (365:6185) + news grid (365:6194). Desktop transcribed 1:1 from the Figma/Tailwind build. * Shared shell (.sk-page) + partials (page-hero, card-news, pagination, site-tail) live elsewhere. */ /* ---- intro band (365:6185) ---- */ .news-intro{display:flex;align-items:flex-end;flex-shrink:0;width:100%;padding:100px var(--sk-gutter);background:var(--sk-cream);position:relative} .news-intro__inner{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;width:1500px;max-width:100%;position:relative} .news-intro__head{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:20px;width:100%;position:relative} .news-eyebrow{display:flex;align-items:center;flex-shrink:0;gap:8px;position:relative} .news-eyebrow img{width:11px;height:20px;display:block} .news-eyebrow p{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-pink);white-space:nowrap;word-break:break-word} .news-heading{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-align:center;text-transform:uppercase;width:100%;word-break:break-word} .news-intro__body{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:24px;width:100%;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);text-align:center} .news-intro__p{margin:0;line-height:30px;width:100%} /* ---- news grid (365:6194) ---- */ .news-list{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:60px;width:100%;padding:0 var(--sk-gutter) 100px;background:var(--sk-cream);position:relative} .news-list__inner{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:60px;width:1500px;max-width:100%;position:relative} .news-row{display:flex;align-items:flex-start;justify-content:flex-start;flex-shrink:0;gap:18px;width:100%;position:relative} .news-empty{font-family:var(--sk-os-reg);font-size:20px;color:var(--sk-black);padding:60px 0} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .news-intro{padding:60px 24px} .news-list{padding:0 24px 60px} .news-intro__inner,.news-list__inner{width:100%} .news-heading{font-size:34px;line-height:44px} .news-row{flex-wrap:wrap;gap:24px} .news-row > *{width:100%} } /* ============ sk-frag-page-about.css ============ */ /* sk-frag-page-about.css — About page (Figma "about-us" 365:6025). * Wave 2: desktop values transcribed 1:1 from the Figma/Tailwind build. Merged with sk-semantic.css. * Reuses shared tokens (--sk-*) + .sk-page shell; sk-rte / sk-video / sk-video-play stay as JS/CSS hooks. */ /* ---------- shared eyebrow (pink marker + label) — used in Our Story + Information ---------- */ .about-eyebrow{display:flex;align-items:center;gap:8px;position:relative;flex-shrink:0} .about-eyebrow__pin{display:block;position:relative;flex-shrink:0;width:11px;height:20px} .about-eyebrow__pin-inner{position:absolute;inset:-0.61% -4.41%} .about-eyebrow__pin-inner img{display:block;max-width:none;width:100%;height:100%} .about-eyebrow__label{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-pink);white-space:nowrap} .about-eyebrow__label--dark{color:var(--sk-black)} /* ---------- shared rich-text (font shell; sk-rte handles paragraph rhythm) ---------- */ .about-rte{font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);position:relative;flex-shrink:0;width:100%} /* ================= OUR STORY (Figma 365:6034) ================= */ .about-story{background:var(--sk-white);display:flex;align-items:center;gap:122px;width:100%;padding:100px var(--sk-gutter);position:relative;flex-shrink:0} .about-story__media{display:flex;align-items:center;isolation:isolate;position:relative;flex-shrink:0;width:688px} .about-story__photo{display:flex;flex-direction:column;align-items:flex-start;margin-right:-448px;position:relative;flex-shrink:0;width:602px;z-index:2} .about-story__photo-frame{position:relative;flex-shrink:0;width:602px;height:556px} .about-story__photo-img{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%;object-fit:contain} .about-story__shape{position:relative;flex-shrink:0;width:534px;height:454px;z-index:1} .about-story__shape-img{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%} .about-story__body{display:flex;flex-direction:column;align-items:flex-start;gap:38px;padding-top:40px;position:relative;flex-shrink:0;width:700px;max-width:100%} .about-story__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:relative;flex-shrink:0;width:100%} .about-story__heading{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-transform:uppercase;word-break:break-word;width:min-content;min-width:100%;position:relative;flex-shrink:0} /* ================= TEXT BLOCK + INFORMATION (Figma 365:6052) ================= */ .about-info-band{background:var(--sk-cream);display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:100px var(--sk-gutter);position:relative;flex-shrink:0} .about-textblock{display:flex;flex-direction:column;align-items:center;padding-top:80px;position:relative;flex-shrink:0;width:100%} .about-textblock__rte{width:1510px;max-width:100%} .about-info{display:flex;align-items:center;width:100%;margin-top:100px;position:relative;flex-shrink:0} .about-info__card{background:var(--sk-yellow);display:flex;flex-direction:column;align-items:flex-start;margin-right:-208px;padding:100px 80px 100px 76px;border-radius:8px;position:relative;flex-shrink:0;width:1295px;max-width:100%} .about-info__inner{display:flex;flex-direction:column;align-items:center;gap:44px;position:relative;flex-shrink:0;width:1164px;max-width:100%} .about-info__head{display:flex;flex-direction:column;align-items:center;gap:15px;position:relative;flex-shrink:0;width:100%} .about-info__heading-group{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;position:relative;flex-shrink:0;width:100%} .about-info__heading{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-transform:uppercase;width:100%;position:relative;flex-shrink:0} /* action buttons (disabled brochure / black market / teal sponsor) */ .about-info__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:29px;position:relative;flex-shrink:0} .about-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-radius:100px;position:relative;flex-shrink:0;width:340px;max-width:100%;text-decoration:none} .about-btn--disabled{opacity:.7;cursor:default} .about-btn__face{display:flex;align-items:center;justify-content:center;padding:20px 30px;border-radius:100px;position:relative;flex-shrink:0;width:100%} .about-btn__face--white{background:var(--sk-white)} .about-btn__face--black{background:var(--sk-black)} .about-btn__face--teal{background:var(--sk-teal)} .about-btn__label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap} .about-btn__label--light{color:var(--sk-white)} /* decorative firefly (overlaps card on the right) */ .about-info__firefly{position:relative;flex-shrink:0;width:560px;height:935px;max-width:100%} .about-info__firefly-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none} .about-info__firefly-img{position:absolute;top:12.01%;left:12.5%;width:83.57%;height:74.05%;max-width:none;object-fit:contain} /* ================= IMAGE / VIDEO BANNER (Figma 365:6086) ================= */ .about-banner{display:flex;align-items:flex-start;justify-content:center;overflow:clip;width:100%;height:616px;padding:91px 252px 55px;position:relative;flex-shrink:0} .about-banner__media{position:absolute;inset:0;pointer-events:none} .about-banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .about-banner__scrim{position:absolute;inset:0} .about-banner__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:114px;z-index:2;padding:0;border:0;background:transparent;cursor:pointer;transition:transform .2s ease} .about-banner__play:hover{transform:translate(-50%,-50%) scale(1.1)} .about-banner__play img{display:block;width:100%;height:100%} .about-banner__caption{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-white);text-align:center;text-transform:uppercase;width:1354px;max-width:100%;position:relative;flex-shrink:0;z-index:1} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .about-story{flex-direction:column;gap:40px;padding:60px 24px} .about-story__media{width:100%;max-width:602px;justify-content:center} .about-story__photo{margin-right:0;width:100%;max-width:602px} .about-story__photo-frame{width:100%;height:auto;aspect-ratio:602/556} .about-story__shape{display:none} .about-story__body{width:100%;padding-top:0} .about-story__heading{font-size:34px;line-height:44px;width:100%;min-width:0} .about-info-band{padding:60px 24px} .about-textblock{padding-top:40px} .about-textblock__rte{width:100%} .about-info{flex-direction:column;margin-top:60px} .about-info__card{width:100%;margin-right:0;padding:60px 24px} .about-info__inner{width:100%} .about-info__heading{font-size:34px;line-height:44px} .about-info__firefly{display:none} .about-banner{height:auto;padding:60px 24px} .about-banner__caption{font-size:22px;line-height:32px;width:100%} } /* ============ sk-frag-page-contact.css ============ */ /* ================= CONTACT PAGE (Figma 365:6093) ================= * Converted from the Figma/Tailwind build. Desktop values transcribed 1:1. * Reuses tokens + .sk-page from sk-semantic.css. New page-local tokens below. */ :root{ --sk-green:#6bce41; /* --black-4 — form success notice */ --sk-grey:#505050; /* form field border */ } /* ---- Contact container (Get In Touch + Enquire Now) — 365:6101 ---- */ .contact-container{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:90px;width:100%;padding:100px var(--sk-gutter);background:var(--sk-cream);position:relative} /* shared section heading (Get In Touch / Enquire Now / How to get here) */ .contact-heading{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-transform:uppercase;width:100%;word-break:break-word} /* ---- Get In Touch column — 365:6102 ---- */ .contact-getintouch{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:65px;width:464px;max-width:100%;padding-top:50px;position:relative} .contact-getintouch__top{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:51px;width:446px;max-width:100%;position:relative} .contact-details{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:34px;width:100%;position:relative} .contact-detail{display:flex;flex-shrink:0;align-items:flex-start;gap:29px;width:100%;position:relative} .contact-detail__icon{position:relative;flex-shrink:0;width:60px;height:60px} .contact-detail__icon img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .contact-detail__body{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:14px;color:var(--sk-black);position:relative} .contact-detail__label{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-black);text-transform:uppercase;width:100%} .contact-detail__value{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;width:100%;font-variation-settings:'wdth' 100} .contact-detail__email{font-family:var(--sk-os-reg);font-size:19px;line-height:30px;width:100%;word-break:break-word} /* ---- Follow Us — 365 ---- */ .contact-follow{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:20px;width:225px;position:relative} .contact-follow__socials{display:flex;flex-shrink:0;align-items:center;gap:15px;width:100%;position:relative} .contact-follow__social{display:block;flex-shrink:0;width:45px;height:45px} .contact-follow__social img{display:block;width:100%;height:100%} /* ---- Enquire Now form card — 365:6125 ---- */ .contact-form-card{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:24px;width:944px;max-width:100%;padding:50px;background:var(--sk-white);overflow:clip;position:relative} .contact-form-card__intro{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);width:100%;font-variation-settings:'wdth' 100} .contact-form__notice{margin:0;width:100%;padding:16px 20px;background:var(--sk-green);color:var(--sk-black);font-family:var(--sk-os-bold);font-weight:700} .contact-form{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:24px;width:100%;padding:10px 0;position:relative} .contact-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .contact-form__row{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:22px;width:100%;position:relative} .contact-form__field{display:flex;flex:1;min-width:240px;flex-direction:column;align-items:flex-start;gap:13px} .contact-form__field--full{display:flex;flex-direction:column;align-items:flex-start;gap:13px;width:100%} .contact-form__label{font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black)} .contact-form__input,.contact-form__textarea{width:100%;background:var(--sk-white);border:.5px solid var(--sk-grey);font-family:var(--sk-os-reg);font-size:18px;color:var(--sk-black);outline:none} .contact-form__input{height:60px;padding:0 16px} .contact-form__textarea{height:130px;padding:12px 16px;resize:vertical} .contact-form__input:focus,.contact-form__textarea:focus{border-color:var(--sk-pink)} .contact-form__agree{display:flex;flex-shrink:0;align-items:center;gap:13px;width:100%;padding-top:10px;cursor:pointer;position:relative} .contact-form__checkbox{flex-shrink:0;width:30px;height:30px;border:.5px solid var(--sk-grey);appearance:none;background:var(--sk-white)} .contact-form__checkbox:checked{background:var(--sk-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 6'/%3E%3C/svg%3E") center / 70% no-repeat} /* H8: white checkmark on tick */ .contact-form__link{font-family:var(--sk-os-bold);font-weight:700;color:var(--sk-pink);text-decoration:underline} .contact-form__submit{padding-top:20px} /* ---- shared pill button (form Send + travel links) ---- */ .contact-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:20px 54px;border-radius:100px;position:relative} .contact-btn--solid{background:var(--sk-black);color:var(--sk-white)} .contact-btn--outline{border:.5px solid var(--sk-black);color:var(--sk-black)} .contact-btn--send{width:199px} .contact-btn__label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;text-transform:uppercase;white-space:nowrap;font-variation-settings:'wdth' 100} /* ---- Location / How to get here — 365:6155 ---- */ .contact-location{display:flex;flex-shrink:0;align-items:center;gap:64px;width:100%;padding:0 var(--sk-gutter) 100px;background:var(--sk-cream);position:relative} .contact-location__col{display:flex;flex:1;min-width:400px;max-width:817px;flex-direction:column;align-items:flex-start;justify-content:center;gap:88px;position:relative} .contact-location__text{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:42px;width:100%;color:var(--sk-black);position:relative} .contact-location__copy{display:flex;flex-shrink:0;flex-direction:column;align-items:flex-start;gap:39px;width:100%;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;font-variation-settings:'wdth' 100;position:relative} .contact-location__copy p{margin:0;width:100%} .contact-location__copy a{text-decoration:underline} .contact-location__copy .underline{text-decoration:underline} .contact-travel{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:flex-start;gap:20px;width:100%;position:relative} .contact-map{position:relative;flex-shrink:0;width:634px;max-width:100%;height:895px;overflow:hidden;border-radius:4px} .contact-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:4px} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .contact-container{padding:60px 24px;gap:48px} .contact-heading{font-size:34px;line-height:44px} .contact-getintouch,.contact-getintouch__top,.contact-form-card{width:100%} .contact-form-card{padding:32px 20px} .contact-detail__label{font-size:24px;line-height:34px} .contact-location{flex-direction:column;align-items:stretch;gap:40px;padding:0 24px 60px} .contact-location__col{max-width:100%;min-width:0;gap:48px} .contact-map{width:100%;height:400px} .contact-btn{padding:16px 32px} } /* ============ sk-frag-page-hero.css ============ */ /* sk-frag-page-hero.css — shared inner-page hero (Figma "Hero Section"). * Nav in flow (z:2) + a 529px full-bleed image band with a scrim gradient and the * page title bottom-left, tilted -0.48deg. Used by every inner page via page-hero.php. * Desktop values transcribed 1:1 from the Figma/Tailwind build. */ /* ---- Hero Section (root) ---- */ .page-hero{display:flex;flex-direction:column;align-items:flex-start;isolation:isolate;position:relative;width:100%;flex-shrink:0} /* No-banner mode (Events page): the pink logo hangs ~80px below the nav bar (designed to overlap the banner). Without a banner, raise the header above the next section so the logo isn't clipped by it, and give the following section top clearance so the logo overhangs empty space, not the heading. */ .page-hero--nobanner{z-index:5} .page-hero--nobanner + .event-intro{padding-top:110px} /* ---- Hero Header (nav row, sits above the image) ---- */ .page-hero__header{display:flex;flex-direction:column;align-items:flex-start;isolation:isolate;height:103px;width:100%;flex-shrink:0;position:relative;z-index:2} .page-hero__nav{display:flex;flex-direction:column;align-items:center;width:100%;flex-shrink:0;position:relative;z-index:1} /* ---- Hero Image band ---- */ .page-hero__banner{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:529px;width:100%;flex-shrink:0;padding:300px 198px 164px;overflow:hidden;position:relative;z-index:1} .page-hero__media{position:absolute;inset:0;pointer-events:none} .page-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .page-hero__scrim{position:absolute;inset:0;background-image:linear-gradient(89.64deg,rgba(0,0,0,0.5) 20.189%,rgba(0,0,0,0.1) 84.448%)} /* ---- Title overlay ---- */ .page-hero__overlay{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;flex-shrink:0;position:relative;z-index:1} .page-hero__title-wrap{display:flex;align-items:center;max-width:900px;flex-shrink:0;position:relative} .page-hero__title-tilt{flex:none;transform:rotate(-0.48deg)} .page-hero__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:80px;line-height:90px;color:var(--sk-white);text-transform:uppercase;word-break:break-word} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .page-hero__banner{height:auto;min-height:192px;padding:72px 24px 28px} /* M2: ~40% shorter on mobile; page-hero__img is object-fit:cover so it crops, never skews */ .page-hero__title-wrap{max-width:100%} .page-hero__title{font-size:40px;line-height:46px} } /* ============ sk-frag-page-plan-your-visit.css ============ */ /* sk-frag-page-plan-your-visit.css — Plan Your Visit page (Figma "plan-your-visit" 365:6296). * Desktop values transcribed 1:1 from the Figma/Tailwind build. Tokens + shared shells * (.sk-page, --sk-*) live in sk-semantic.css; helper behaviours (.sk-rte, .sk-hover-lift, * .sk-zoom, .sk-ireland, .sk-map-lift) live in home.css. No new colours — reuses the palette. */ /* ---- pink pill buttons (shared on this page) ---- */ .plan-btn{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:20px 54px;border-radius:100px;position:relative;text-decoration:none} .plan-btn--yellow{background:var(--sk-yellow)} .plan-btn--pink{background:var(--sk-pink)} .plan-btn--black{background:var(--sk-black)} .plan-btn__label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;text-transform:uppercase;white-space:nowrap;font-variation-settings:'wdth' 100} .plan-btn--yellow .plan-btn__label{color:var(--sk-black)} .plan-btn--pink .plan-btn__label,.plan-btn--black .plan-btn__label{color:var(--sk-white)} /* ---- marker + eyebrow label (repeated above every section heading) ---- */ .plan-eyebrow{display:flex;align-items:center;gap:8px;flex-shrink:0;position:relative} .plan-eyebrow__marker{position:relative;flex-shrink:0;width:11px;height:20px} .plan-eyebrow__marker>div{position:absolute;inset:-0.61% -4.41%} .plan-eyebrow__marker img{display:block;max-width:none;width:100%;height:100%} .plan-eyebrow__label{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-pink);white-space:nowrap;font-variation-settings:'wdth' 100} .plan-eyebrow__label--dark{color:var(--sk-black)} /* ---- shared 50/70 Oswald section heading ---- */ .plan-h2{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-transform:uppercase;width:100%;word-break:break-word;position:relative} .plan-h2--white{color:var(--sk-white)} /* ================= VISIT SAVOUR intro (Figma 365:6304) ================= */ .visit-intro{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;flex-shrink:0;padding-bottom:100px;background:var(--sk-white);position:relative} .visit-intro__row{display:flex;align-items:center;gap:82px;width:100%;flex-shrink:0;padding:100px var(--sk-gutter) 20px;position:relative} .visit-intro__media{display:flex;align-items:center;width:688px;flex-shrink:0;isolation:isolate;position:relative} .visit-intro__map{display:flex;flex-direction:column;align-items:flex-start;width:602px;flex-shrink:0;margin-right:-448px;z-index:2;position:relative} .visit-intro__map-frame{position:relative;flex-shrink:0;width:602px;height:556px} .visit-intro__map-frame img{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%;object-fit:contain} .visit-intro__shape{position:relative;flex-shrink:0;width:534px;height:454px;z-index:1} .visit-intro__shape img{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%} .visit-intro__text{display:flex;flex-direction:column;align-items:flex-start;gap:38px;width:743px;max-width:100%;flex-shrink:0;position:relative} .visit-intro__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:100%;flex-shrink:0} .visit-intro__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-transform:uppercase;width:min-content;min-width:100%;word-break:break-word;position:relative} .visit-intro__body{width:100%;flex-shrink:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);font-variation-settings:'wdth' 100;position:relative} .visit-intro__notes{display:flex;flex-direction:column;align-items:flex-start;gap:30px;width:1510px;max-width:100%;flex-shrink:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);font-variation-settings:'wdth' 100;position:relative} .visit-intro__note{margin:0;line-height:30px;width:100%;text-box-edge:cap alphabetic;text-box-trim:trim-both} .visit-intro__note a{text-decoration:underline} /* ================= card sections (Things to do / Eat / Stay — Figma 365:6326/6369/6407) ================= */ .plan-cards{display:flex;flex-direction:column;align-items:flex-start;gap:60px;width:100%;flex-shrink:0;padding:100px var(--sk-gutter);background:var(--sk-cream);position:relative} .plan-cards__header{display:flex;align-items:flex-start;gap:88px;width:100%;flex-shrink:0} .plan-cards__intro{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:355px;flex-shrink:0;position:relative} .plan-cards__intro--stay{width:380px} .plan-cards__body{display:flex;flex-direction:column;align-items:flex-start;gap:34px;flex:1 1 0;min-width:0;padding-top:58px;position:relative} .plan-cards__body--fixed{flex:0 0 auto;width:773px;max-width:100%} .plan-cards__copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;color:var(--sk-black);font-variation-settings:'wdth' 100} .plan-cards__copy p{margin:0;line-height:30px} .plan-cards__lead{margin:0;width:100%;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);font-variation-settings:'wdth' 100} /* ---- horizontal card slider (track + edge arrows) ---- */ .plan-slider{position:relative;width:100%} .plan-slider__track{display:flex;flex-shrink:0;gap:26px;align-items:flex-start;width:100%;overflow-x:auto} .plan-slider__arrow{position:absolute;top:180px;width:60px;height:60px;z-index:3;background:none;border:0;padding:0;cursor:pointer;filter:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))} .plan-slider__arrow img{display:block;width:100%;height:100%} .plan-slider__arrow--prev{left:-24px} .plan-slider__arrow--next{right:-24px} .plan-slider__arrow--next img{transform:scaleX(-1)} /* ================= teal Ireland's Ancient East band (Figma 365:6354) ================= */ .iae-band{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:40px;width:100%;flex-shrink:0;padding:100px var(--sk-gutter);background:var(--sk-teal);position:relative} .iae-band__col{display:flex;flex-direction:column;align-items:flex-start;gap:48px;width:811px;max-width:100%;flex-shrink:0} .iae-band__stack{display:flex;flex-direction:column;align-items:flex-start;gap:34px;width:100%;flex-shrink:0} .iae-band__head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%;flex-shrink:0} .iae-band__logo{position:relative;flex-shrink:0;width:460px;max-width:100%;height:135px} .iae-band__logo img{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:contain} .iae-band__text{margin:0;width:100%;flex-shrink:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-white);font-variation-settings:'wdth' 100;text-box-edge:cap alphabetic;text-box-trim:trim-both;position:relative} .iae-band__figure{position:relative;flex-shrink:0;width:100%;height:216px;overflow:hidden} .iae-band__figure img{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:cover} .iae-band__map{position:relative;flex-shrink:0;width:564px;max-width:100%} .iae-band__map-base{position:absolute;inset:0;width:100%;height:100%} .iae-band__map-lift{position:absolute;inset:0} .iae-band__region{position:absolute;left:24.66%;top:18.76%;width:66.8%;height:77.21%;display:flex;align-items:center;justify-content:center} .iae-band__region-inner{width:95.67%;height:98.19%;transform:rotate(-1.68deg)} .iae-band__region-inner img{display:block;width:100%;height:100%} .iae-band__pin{position:absolute;left:60.28%;top:62.16%;width:10.28%;height:11.22%} .iae-band__pin-inner{position:absolute;inset:0 -6.9% -9.64% -6.9%} .iae-band__pin-inner img{display:block;width:100%;height:100%} /* ================= yellow Effortless Travel band (Figma 365:6394) ================= */ .travel-band{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:40px;width:100%;flex-shrink:0;padding:100px var(--sk-gutter);background:var(--sk-yellow);position:relative} .travel-band__col{display:flex;flex-direction:column;align-items:flex-start;gap:57px;width:609px;max-width:100%;flex-shrink:0} .travel-band__stack{display:flex;flex-direction:column;align-items:flex-start;gap:44px;width:100%;flex-shrink:0} .travel-band__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:405px;max-width:100%;flex-shrink:0} .travel-band__text{margin:0;width:100%;flex-shrink:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);font-variation-settings:'wdth' 100;text-box-edge:cap alphabetic;text-box-trim:trim-both;position:relative} .travel-band__figure{position:relative;flex-shrink:0;width:762px;max-width:100%;height:508px;overflow:hidden} .travel-band__figure img{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:cover} /* ================= About Kilkenny & the South-East (Figma 365:6433) ================= */ .about-se{display:flex;flex-direction:column;align-items:flex-start;gap:42px;width:100%;flex-shrink:0;padding:0 var(--sk-gutter) 100px;background:var(--sk-cream);position:relative} .about-se__grid-wrap{position:relative;width:100%} .about-se__grid{display:flex;align-items:flex-start;justify-content:space-between;gap:23px;width:100%;flex-shrink:0} .about-card{display:flex;flex-direction:column;align-items:flex-start;width:360px;flex-shrink:0;isolation:isolate;text-decoration:none;color:inherit;position:relative} .about-card__inner{display:flex;flex-direction:column;align-items:flex-start;width:100%;flex-shrink:0;z-index:1} .about-card__media{position:relative;flex-shrink:0;width:100%;aspect-ratio:360/295;margin-bottom:-60px} .about-card__frame{position:absolute;inset:0;overflow:hidden;pointer-events:none} .about-card__frame img{position:absolute;inset:0;max-width:none;width:100%;height:100%;object-fit:cover} .about-card__body{display:flex;flex-direction:column;align-items:flex-start;width:100%;flex-shrink:0} .about-card__edge{position:relative;flex-shrink:0;width:100%;height:89px} .about-card__edge img{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%} .about-card__text{display:flex;flex-direction:column;align-items:flex-start;width:100%;flex-shrink:0;padding:10px 42px 50px;background:var(--sk-white)} .about-card__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-pink);text-transform:uppercase;width:100%;flex-shrink:0;word-break:break-word} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .visit-intro{padding-bottom:60px} .visit-intro__row{flex-direction:column;gap:40px;padding:60px 24px 0} .visit-intro__media{flex-direction:column;width:100%;isolation:auto;align-items:flex-start} .visit-intro__map{width:100%;margin-right:0} .visit-intro__map-frame{width:100%;height:auto;aspect-ratio:602/556} .visit-intro__shape{display:none} .visit-intro__text{width:100%} .visit-intro__title{font-size:34px;line-height:44px;width:100%;min-width:0} .visit-intro__notes{width:100%;padding:0 24px} .plan-cards,.iae-band,.travel-band{padding:60px 24px} .plan-cards__header{flex-direction:column;gap:24px} .plan-cards__intro,.plan-cards__intro--stay{width:100%} .plan-cards__body,.plan-cards__body--fixed{width:100%;flex:0 0 auto;padding-top:0} .plan-h2{font-size:34px;line-height:44px} .plan-slider__arrow{display:none} .iae-band,.travel-band{flex-wrap:wrap} .iae-band__col,.travel-band__col,.travel-band__head{width:100%} .iae-band__map{width:100%;max-width:520px;margin-inline:0} .travel-band__figure{width:100%} .about-se{padding:0 24px 60px} .about-se__grid{flex-wrap:wrap;gap:40px 23px;justify-content:center} .about-card{width:calc(50% - 12px)} .about-card__title{font-size:26px;line-height:36px} } /* ============ sk-frag-pagination.css ============ */ /* ================= PAGINATION (Figma 365:5341 / 365:6209) ================= * Shared partial: prev + numbered pages + next. Desktop transcribed 1:1 from the * Figma/Tailwind build. Reuses shared tokens (--sk-pink/--sk-white/--sk-black/--sk-os-bold). */ .sk-pagination{display:flex;flex-shrink:0;gap:24px;align-items:center;justify-content:center;position:relative} .sk-pagination__step{display:flex;gap:10px;align-items:center;font-family:var(--sk-os-bold);font-weight:700;font-size:18px;color:var(--sk-black);text-transform:uppercase;text-decoration:none} .sk-pagination__pages{display:flex;gap:8px;align-items:center} .sk-pagination__num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:6px;font-family:var(--sk-os-bold);font-weight:700;font-size:16px;color:var(--sk-black);text-decoration:none} .sk-pagination__num--current{background:var(--sk-pink);color:var(--sk-white)} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .sk-pagination{flex-wrap:wrap;gap:16px} } /* ============ sk-frag-single-events.css ============ */ /* sk-frag-single-events.css — Savour Kilkenny single Event (CPT: events), Figma 365:5194. * Desktop values transcribed 1:1 from the Figma/Tailwind build. Reuses .sk-page shell + tokens * from sk-semantic.css. Responsive block at the end (Wave 3 refines). */ /* ---- article wrapper (was: flex flex-col items-center w-full shrink-0) ---- */ .event-details{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;flex-shrink:0} /* ================= META BAND (Figma 365:5195) — pink strip: date / time / location ================= */ .event-meta{background:var(--sk-pink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 200px;position:relative;flex-shrink:0;width:100%} .event-meta__list{display:flex;flex-wrap:wrap;column-gap:100px;row-gap:40px;align-items:flex-start;justify-content:center;position:relative;flex-shrink:0;max-width:100%} .event-meta__item{display:flex;gap:20px;align-items:flex-start;position:relative;flex-shrink:0} /* width set inline (425 / 454 / 409px) */ .event-meta__icon{position:relative;flex-shrink:0;width:80px;height:80px} .event-meta__icon img{position:absolute;inset:0;display:block;max-width:none;width:100%;height:100%} .event-meta__text{display:flex;flex-direction:column;gap:10px;align-items:flex-start;position:relative;flex-shrink:0;color:var(--sk-white);text-transform:uppercase;font-weight:700;word-break:break-word} /* width set inline (325 / 354 / 309px) */ .event-meta__label{margin:0;font-family:var(--sk-oswald);font-size:32px;line-height:46px;position:relative;flex-shrink:0;width:100%} .event-meta__value{margin:0;font-family:var(--sk-os-bold);font-size:20px;line-height:30px;position:relative;flex-shrink:0;width:100%} /* ================= CONTENT BAND (Figma 365:5217) — white: media stack + copy ================= */ .event-body{background:var(--sk-white);display:flex;flex-wrap:wrap;gap:97px;align-items:center;justify-content:center;padding:100px 210px;position:relative;flex-shrink:0;width:100%} /* --- left column: layered clipped image + "Kindly Sponsored by" logos --- */ .event-media{display:flex;flex-direction:column;gap:59px;align-items:flex-start;position:relative;flex-shrink:0;width:688px;max-width:100%} .event-media__stack{display:flex;isolation:isolate;align-items:center;position:relative;flex-shrink:0;width:100%} .event-media__front{display:flex;flex-direction:column;align-items:flex-start;margin-right:-448px;position:relative;flex-shrink:0;width:602px;z-index:2} .event-media__img{height:556px;position:relative;flex-shrink:0;width:602px;overflow:hidden} /* clip-path set inline */ .event-media__img img{position:absolute;inset:0;display:block;max-width:none;object-fit:cover;width:100%;height:100%} .event-media__back{height:454px;position:relative;flex-shrink:0;width:534px;z-index:1;background:var(--sk-pink)} /* clip-path set inline */ .event-sponsored{display:flex;flex-direction:column;gap:40px;align-items:flex-start;position:relative;flex-shrink:0;width:506px;max-width:100%} .event-sponsored__label{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-pink);position:relative;flex-shrink:0;word-break:break-word} .event-sponsored__logos{display:flex;flex-wrap:wrap;gap:31px;align-items:center;position:relative;flex-shrink:0;width:100%} .event-sponsored__logo{position:relative;flex-shrink:0} /* width/height set inline (172x103 / 303x90.719) */ .event-sponsored__logo img{position:absolute;inset:0;max-width:none;object-fit:contain;width:100%;height:100%} /* --- right column: event copy + Book Now --- */ .event-copy{display:flex;flex-direction:column;gap:67px;align-items:flex-start;position:relative;flex-shrink:0;width:689px;max-width:100%} .event-copy__text{display:flex;flex-direction:column;gap:28px;align-items:flex-start;position:relative;flex-shrink:0;width:100%;font-family:var(--sk-os-reg);font-size:20px;line-height:30px;color:var(--sk-black)} .event-copy__text p{margin:0} .event-book{background:var(--sk-yellow);display:flex;align-items:center;justify-content:center;padding:20px 40px;position:relative;border-radius:100px;flex-shrink:0} .event-book span{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap;position:relative;flex-shrink:0;word-break:break-word} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .event-meta{padding:40px 24px} .event-meta__list{column-gap:40px;row-gap:32px} .event-meta__item{width:100%!important;max-width:454px} .event-meta__text{width:auto!important;flex:1 1 auto} .event-meta__label{font-size:26px;line-height:34px} .event-body{padding:60px 24px;gap:48px} .event-media,.event-copy{width:100%} .event-media__stack{justify-content:center} .event-media__front{margin-right:0;width:100%;max-width:602px;align-items:center} .event-media__img{width:100%;max-width:602px;height:auto;aspect-ratio:602/556} .event-media__back{display:none} .event-sponsored{width:100%} .event-copy__text{font-size:18px;line-height:28px} } /* ============ sk-frag-single.css ============ */ /* ================= SINGLE NEWS-DETAILS (Figma "news-details" 365:6242) ================= * The single-post template: article body (title + date + floated shard image + prose) and an * "Other related news" slider of card-news. Tokens (--sk-*) + .sk-page come from sk-semantic.css. * card-news, page-hero and site-tail are shared partials styled in their own fragments. */ /* ---- Article body (Figma 365:6250) — centred cream band, no gap ---- */ .news-article{background:var(--sk-cream);display:flex;flex-direction:column;align-items:center;padding:100px var(--sk-gutter);position:relative;flex-shrink:0;width:100%} .news-article__body{width:1513px;max-width:100%;position:relative;flex-shrink:0;display:flow-root} .news-article__title{margin:0 0 24px;width:100%;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:60px;color:var(--sk-black);text-transform:uppercase} /* Date row — dark calendar on the light background */ .news-article__date{display:flex;align-items:center;gap:12px;margin-bottom:34px;position:relative} .news-article__date-icon{width:25px;height:25px;position:relative;flex-shrink:0} .news-article__date-icon img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .news-article__date-text{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap} /* Featured image floated right — angular clip with a pink shard behind (clip-path stays inline) */ .news-article__media{float:right;margin-left:60px;margin-bottom:30px;width:560px;height:500px;max-width:100%;position:relative} .news-article__media-shard{position:absolute;left:-28px;top:90px;width:280px;height:300px;z-index:1;background:var(--sk-pink)} .news-article__media-frame{position:absolute;inset:0;z-index:2;overflow:hidden} .news-article__media-frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} /* Prose (Figma 365:6262-6276) — full content width, wraps the floated image */ .news-article__content{font-family:var(--sk-os-reg);font-size:20px;line-height:30px;color:var(--sk-black)} .news-article__content p{margin-bottom:30px} .news-article__content p:last-child{margin-bottom:0} .news-article__content h2{margin:40px 0 20px;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;text-transform:uppercase;color:var(--sk-pink)} .news-article__content h3{font-family:var(--sk-oswald);font-size:26px;text-transform:uppercase;color:var(--sk-pink)} .news-article__content a{color:var(--sk-pink);text-decoration:underline} .news-article__content ul{list-style:disc;padding-left:24px;margin-bottom:30px} .news-article__content ol{list-style:decimal;padding-left:24px} .news-article__content li{margin-bottom:8px} .news-article__content img{border-radius:8px;margin:30px 0} .news-article__content strong{font-weight:700} .news-article__content blockquote{border-left:4px solid var(--sk-pink);padding-left:24px;font-style:italic} /* ---- Other related news (Figma 365:6277) — centred intro + card slider ---- */ .related-news{background:var(--sk-cream);display:flex;flex-direction:column;align-items:center;gap:60px;padding:0 var(--sk-gutter) 100px;position:relative;flex-shrink:0;width:100%} .related-news__head{display:flex;flex-direction:column;align-items:center;gap:20px;width:1510px;max-width:100%;position:relative;flex-shrink:0} .related-news__eyebrow{display:flex;align-items:center;gap:8px;position:relative;flex-shrink:0} .related-news__marker{width:11px;height:20px;position:relative;flex-shrink:0} .related-news__marker-inner{position:absolute;inset:-0.61% -4.41%} .related-news__marker img{display:block;width:100%;height:100%;max-width:none} .related-news__eyebrow-text{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-pink);white-space:nowrap} .related-news__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-align:center;text-transform:uppercase;word-break:break-word;position:relative;flex-shrink:0} /* Slider — horizontal scroll track + overlaid arrow buttons */ .related-news__slider{width:1500px;max-width:100%;position:relative} .related-news__track{display:flex;align-items:flex-start;justify-content:center;gap:18px;width:100%;position:relative;flex-shrink:0;overflow-x:auto;scrollbar-width:none} .related-news__track::-webkit-scrollbar{display:none} .related-news__nav{position:absolute;top:50%;width:77px;height:77px;z-index:3;background:none;border:0;padding:0;cursor:pointer} .related-news__nav img{display:block;width:100%;height:100%} .related-news__nav--prev{left:-30px;transform:translateY(-50%) rotate(90deg)} .related-news__nav--next{right:-30px;transform:translateY(-50%) rotate(90deg) scaleY(-1)} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .news-article{padding:60px 24px} .news-article__title{font-size:34px;line-height:44px} .news-article__media{float:none;margin:0 0 30px;width:100%;max-width:100%;height:auto;aspect-ratio:560/500} .related-news{padding:0 24px 60px;gap:40px} .related-news__title{font-size:34px;line-height:44px} .related-news__track{justify-content:flex-start} .related-news__nav--prev{left:-6px} .related-news__nav--next{right:-6px} } /* ============ sk-frag-site-footer.css ============ */ /* ================= SITE FOOTER (Figma 365:5059 — reusable on every page) ================= * Converted 1:1 from the Figma/Tailwind build. Desktop render unchanged; classes are readable. * Tokens reused from sk-semantic.css (--sk-cream bg, --sk-yellow bar, --sk-pink hover, --sk-black, * --sk-oswald headings, --sk-os-reg body). No new colours. */ /* ---- outer shell (was: bg-[--black-6] flex-col items-center pt-[50px] w-full overflow-hidden) ---- */ /* REDESIGNED 2026-07-15 — neater, curated, centred, on-brand (client brief). Old wordmark + 4-column 20-link layout replaced by: logo -> curated centred nav -> Location + Follow Us -> legal -> copyright. */ .site-footer{background:var(--sk-cream);display:flex;flex-direction:column;align-items:center;padding-top:56px;position:relative;flex-shrink:0;width:100%;overflow:hidden} .site-footer__inner{display:flex;flex-direction:column;gap:34px;align-items:center;text-align:center;position:relative;flex-shrink:0;width:100%;max-width:940px;padding:0 24px 48px} .site-footer__logo{display:block;flex-shrink:0;width:160px;height:auto} .site-footer__logo-img{display:block;width:100%;height:auto} /* curated centred nav (was 4 columns of 20 links) */ .footer-links{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;justify-content:center;max-width:760px} .footer-links__link{font-family:var(--sk-oswald);font-weight:700;font-size:20px;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:var(--sk-pink);transition:color .15s} .footer-links__link:hover,.footer-links__link:focus-visible{color:var(--sk-teal)} /* Location + Follow Us */ .footer-meta{display:flex;flex-wrap:wrap;gap:28px 72px;align-items:flex-start;justify-content:center} .footer-meta__block{display:flex;flex-direction:column;gap:14px;align-items:center} .footer-meta__heading{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:22px;line-height:1.2;text-transform:uppercase;color:var(--sk-pink)} .footer-meta__text{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:17px;line-height:1.5;color:var(--sk-black)} .footer-meta__maplink{color:var(--sk-black);text-decoration:underline;text-underline-offset:2px;transition:color .15s} .footer-meta__maplink:hover,.footer-meta__maplink:focus-visible{color:var(--sk-pink)} .footer-social{display:flex;gap:14px;align-items:center;justify-content:center} .footer-social__link{display:block;width:44px;height:44px;flex-shrink:0;transition:transform .2s ease} .footer-social__link:hover{transform:translateY(-2px)} .footer-social__icon{display:block;width:100%;height:100%} /* legal row */ .footer-legal{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center} .footer-legal__link{font-family:var(--sk-os-reg);font-weight:400;font-size:15px;color:var(--sk-black);opacity:.72;text-decoration:underline;text-underline-offset:2px} .footer-legal__link:hover,.footer-legal__link:focus-visible{opacity:1;color:var(--sk-pink)} .footer-legal__sep{opacity:.4;color:var(--sk-black)} /* yellow copyright band */ .site-footer__copyright{display:flex;align-items:center;justify-content:center;background:var(--sk-yellow);padding:18px 24px;position:relative;flex-shrink:0;width:100%} .site-footer__copyright-text{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:16px;line-height:1.4;color:var(--sk-black);text-align:center} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .site-footer__inner{gap:40px} .site-footer__wordmark{gap:16px;flex-wrap:wrap} .site-footer__wordmark-l,.site-footer__wordmark-r{height:auto;width:100%;max-width:100%} .site-footer__cols{gap:40px} .footer-follow,.footer-nav{width:100%} .footer-follow__heading,.footer-nav__heading{font-size:26px;line-height:36px} .site-footer__base{align-items:center} .site-footer__sprig{width:200px;height:auto;aspect-ratio:366/169} .site-footer__copyright{padding:20px 24px} } /* ============ sk-frag-site-nav.css ============ */ /* sk-frag-site-nav.css — Savour Kilkenny header / primary nav (Figma "Header" 365:4941). * Wave 2: readable replacement for the Figma/Tailwind utilities on the header bar markup. * Desktop values transcribed 1:1 from the bracketed utilities. * * NOTE: the INTERACTIVE + MOBILE behaviour (dropdowns, burger, mobile dropdown nav) lives in * home.css keyed on the shared classes .sk-primary-nav / .sk-has-sub / .sk-submenu / .sk-burger. * Those are intentionally NOT redefined here — this fragment only supplies the desktop base * geometry the utilities used to provide, so home.css keeps layering on top unchanged. * (On desktop home.css zeroes the nav's py-[30px] via !important — the value below is kept for * fidelity but is overridden by that rule, so the render is identical.) */ /* ---- wrapper (default placement: absolute overlay in the home hero; inner pages pass their own class) ---- */ .site-nav{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;width:100%} /* white bar behind the header row (its negative margin lets the row overlap it) */ .site-nav__bar{width:100%;height:105px;margin-bottom:-105px;background:var(--sk-white);box-shadow:0 4px 16px 0 rgba(0,0,0,.25);flex-shrink:0;position:relative} /* header content row: logo + burger + nav + CTA */ .site-nav__inner{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:58px;width:1501px;height:222px;padding-top:6px;flex-shrink:0;position:relative} /* brand / logo column */ .site-nav__brand{display:flex;flex-direction:column;align-items:flex-start;width:268px;height:238px;padding-top:8px;flex-shrink:0;position:relative} .site-nav__logo{display:block;width:246px;height:206px;flex-shrink:0;position:relative} .site-nav__logo img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} /* primary nav (paired with .sk-primary-nav — home.css owns dropdowns/mobile) */ .site-nav__menu{display:flex;justify-content:center;align-items:center;gap:42px;width:904px;height:97px;padding-top:30px;padding-bottom:30px;flex-shrink:0;position:relative} /* ===== Mobile menu redesign (client brief): white slide-in overlay panel, logo + X, icon list, dividers ===== */ .sk-menu-head{display:none} .site-nav__icon{display:none} @media (max-width:1023px){ .sk-primary-nav{position:fixed!important;top:0!important;right:0!important;left:auto!important;bottom:0!important;height:100dvh!important;width:min(88vw,380px)!important;max-width:100%;padding:0!important;margin:0!important;background:#fff!important;box-shadow:-10px 0 40px rgba(0,0,0,.25);z-index:100000;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;overflow-y:auto;overflow-x:hidden;transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);visibility:hidden} .sk-primary-nav.is-open{transform:translateX(0);visibility:visible} body.sk-menu-open{overflow:hidden} body.sk-menu-open::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999} .sk-menu-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.09);flex-shrink:0} /* logo.svg is internally width/height=100%, so height:auto can't derive the ratio and it squashes ("logo skewered"). Pin the true aspect (246/206) like the header logo at .site-nav__logo img. */ .sk-menu-head__logo{width:84px;height:auto;aspect-ratio:246/206;object-fit:contain;display:block} .sk-menu-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--sk-black);cursor:pointer;border-radius:8px} .sk-menu-close svg{width:26px;height:26px} .sk-menu-close:hover{background:rgba(0,0,0,.05)} .sk-primary-nav .site-nav__group,.sk-primary-nav .site-nav__link--plain{width:100%;border-bottom:1px solid rgba(0,0,0,.08);position:relative} .sk-primary-nav .site-nav__group{display:flex;flex-wrap:wrap} .sk-primary-nav .site-nav__link{display:flex!important;align-items:center;gap:14px;width:100%;padding:17px 20px;justify-content:flex-start} .site-nav__icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;color:var(--sk-pink)} .site-nav__icon svg{width:23px;height:23px;display:block} .sk-primary-nav .site-nav__label{font-family:var(--sk-oswald)!important;font-weight:700!important;font-size:18px!important;line-height:1.2!important;color:var(--sk-black)!important;text-transform:uppercase;margin:0!important} /* The exported caret SVG is position:absolute:inset:0 on desktop — on mobile it stretched to fill the panel (a giant pink squiggle). Hide it and draw a clean CSS chevron instead. */ .sk-primary-nav .site-nav__caret{display:flex!important;align-items:center;justify-content:center;position:static!important;width:20px;height:20px;flex-shrink:0;margin-left:auto;inset:auto!important;transform:none} .sk-primary-nav .site-nav__caret-rot,.sk-primary-nav .site-nav__caret-box{display:contents!important} .sk-primary-nav .site-nav__caret img{display:none!important} .sk-primary-nav .sk-has-sub > .site-nav__link .site-nav__caret::after{content:"";display:block;width:9px;height:9px;border-right:2.5px solid var(--sk-pink);border-bottom:2.5px solid var(--sk-pink);transform:rotate(45deg) translateY(-2px);transition:transform .28s ease} .sk-primary-nav .sk-has-sub.is-open .site-nav__caret::after{transform:rotate(-135deg) translateY(2px)} .sk-primary-nav .sk-has-sub.is-open .site-nav__caret{transform:none} /* submenus collapsed by default (accordion) — tap the row to expand */ .sk-primary-nav .sk-submenu{width:100%;max-height:0;overflow:hidden;padding:0 0 0 58px!important;transition:max-height .3s ease} .sk-primary-nav .sk-has-sub.is-open .sk-submenu{max-height:560px;padding-bottom:10px!important} .sk-primary-nav .sk-submenu a{padding:9px 20px 9px 0!important;font-size:15px!important;color:#555!important;border:0!important} } /* a nav entry that has a dropdown (paired with .sk-has-sub) */ .site-nav__group{display:flex;align-items:center;gap:10px;flex-shrink:0;position:relative} /* the clickable label wrapper (top-level anchors) */ .site-nav__link{display:flex;align-items:center;flex-shrink:0;position:relative} .site-nav__link--sub{gap:10px} .site-nav__link--plain{justify-content:center} /* nav / CTA label text */ .site-nav__label{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap;word-break:break-word;flex-shrink:0;position:relative} /* dropdown caret (rotated + flipped brush arrow) */ .site-nav__caret{display:flex;align-items:center;justify-content:center;width:20.012px;height:10.51px;flex-shrink:0;position:relative} .site-nav__caret-rot{flex:none;transform:rotate(-90deg) scaleY(-1)} .site-nav__caret-box{width:10.51px;height:20.012px;position:relative} .site-nav__caret-box img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} /* BOOK NOW call-to-action */ .site-nav__cta-wrap{display:flex;flex-direction:column;align-items:flex-start;padding-top:18px;padding-bottom:18px;flex-shrink:0;position:relative} .site-nav__cta{display:flex;align-items:center;justify-content:center;padding:20px 40px;background:var(--sk-yellow);border-radius:100px;flex-shrink:0;position:relative} /* ---- responsive (home.css already converts .sk-primary-nav -> burger dropdown below 1024px; * here we just relax the fixed desktop widths so the bar is fluid) ---- */ @media(max-width:900px){ .site-nav__inner{width:100%;height:auto;gap:16px;padding-top:0;align-items:center;justify-content:space-between} .site-nav__brand{width:auto;height:auto;padding-top:6px} .site-nav__logo{width:150px;height:auto;aspect-ratio:246/206} /* logo.svg has width/height="100%" internally, so height:auto can't derive the ratio and the * browser falls back to 150px, squashing the badge. Pin the aspect so it scales true. */ .site-nav__logo img{position:static;width:100%;height:auto;aspect-ratio:246/206;object-fit:contain} .site-nav__menu{width:100%} .site-nav__cta-wrap{padding-top:0;padding-bottom:0} .site-nav__cta{padding:12px 24px} } /* H1: Figma pill CTAs are h=54 (Book Now / Story CTA — the text is cap-trimmed to ~14px). Our labels' * 24-30px line-height inflated them to h=70. Tighten the label line-height on desktop so the pill height * matches Figma. Desktop-only (min-width:1024) so the mobile menu / mobile CTAs are untouched. */ @media(min-width:1024px){ .site-nav__cta .site-nav__label{line-height:16px} .story-cta__pill{line-height:16px} /* The primary nav gained a 7th item (Recipes); the fixed 904px menu overflowed into BOOK NOW. Widen the header row + let the menu size to its content with a tighter gap so all 7 fit. */ .site-nav__inner{width:1600px;gap:40px} .site-nav__menu{width:auto;gap:26px} } /* ============ sk-frag-site-tail.css ============ */ /* sk-frag-site-tail.css — Site tail: sponsors + funders + newsletter + Instagram (Figma "Sponsors + Footer" 365:6732). * Shared bottom block on home + inner pages. Desktop transcribed 1:1 from the Tailwind build. */ :root{ --sk-input-text:#333; /* newsletter field text */ } /* ---- outer wrapper (was: content-stretch flex flex-col items-center w-full max-w-[1920px] shrink-0) ---- */ .site-tail{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;max-width:1920px;flex-shrink:0} /* ================= SPONSORS AND FUNDERS (yellow) — 365:5000 ================= */ .sponsors-band{background:var(--sk-yellow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 0;position:relative;flex-shrink:0;width:100%} .sponsors-band__inner{display:flex;flex-direction:column;align-items:center;gap:29px;position:relative;flex-shrink:0;width:1102px;max-width:100%} .sponsors-band__head{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;flex-shrink:0} .sponsors-band__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap;word-break:break-word;position:relative;flex-shrink:0} .sponsors-band__intro{margin:0;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-black);text-align:center;width:100%;word-break:break-word;position:relative;flex-shrink:0} .sponsors-band__intro a{text-decoration:underline} /* anniversary badge (overlapping rings + "20TH" — Figma inline-grid, all layers on 1/1) */ .sponsors-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;height:184px;width:180px;position:relative;flex-shrink:0} .sponsors-badge__grid{display:inline-grid;grid-template-columns:max-content;grid-template-rows:max-content;place-items:start;line-height:0;position:relative;flex-shrink:0} .sponsors-badge__grid>*{grid-column:1;grid-row:1;position:relative} .sponsors-badge__grid img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none} .sponsors-badge__ring1{margin:15.42px 0 0 15.42px;width:180px;height:180px} .sponsors-badge__ring2{margin:47.42px 0 0 47.42px;width:116px;height:116px} .sponsors-badge__ring3{margin:50.42px 0 0 50.42px;width:110px;height:110px} .sponsors-badge__dot{margin:172.42px 0 0 102.42px;width:12px;height:12px} .sponsors-badge__num{margin:70.42px 0 0 64.42px;display:flex;align-items:flex-start;font-family:var(--sk-oswald);font-weight:700;color:var(--sk-black);text-transform:uppercase;word-break:break-word} .sponsors-badge__num-big{margin:0;height:74px;width:59px;line-height:70px;font-size:55px;flex-shrink:0} .sponsors-badge__num-sup{margin:0;height:36px;width:29px;line-height:normal;font-size:24px;flex-shrink:0} /* ================= 2026 FUNDERS / SPONSORS logo carousels ================= */ .funder-row{background:var(--sk-white);display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:0 205px;position:relative;flex-shrink:0;width:100%} .funder-row--first{padding-top:100px} .funder-row--fixed{height:693px} .funder-row__label{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:46px;color:var(--sk-pink);text-align:center;text-transform:uppercase;width:100%;word-break:break-word;position:relative;flex-shrink:0} .funder-row__body{display:flex;flex-direction:column;align-items:flex-start;gap:40px;position:relative;flex-shrink:0;width:100%} .funder-slider{display:flex;align-items:center;justify-content:center;height:217px;position:relative;flex-shrink:0;width:100%} .funder-slider__nav{flex-shrink:0;width:60px;height:60px;background:none;border:0;padding:0;cursor:pointer} .funder-slider__nav--prev{z-index:2;margin-right:-24px} .funder-slider__nav--next{margin-left:-24px} .funder-slider__nav img{display:block;width:100%;height:100%} .funder-slider__nav-flip{display:block;width:60px;height:60px;transform:scaleX(-1)} .funder-slider__track{background:var(--sk-white);display:flex;gap:20px;align-items:center;height:217px;padding:50px 0;position:relative;flex-shrink:0;width:1510px;max-width:100%;overflow-x:auto} .funder-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;height:163px;padding:24px 30px;position:relative;flex-shrink:0;width:346px} .funder-slide img{max-height:100%;max-width:100%;object-fit:contain} .funder-row__cta{background:var(--sk-white);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 200px 60px;position:relative;flex-shrink:0;width:100%} .funder-cta{background:var(--sk-black);display:flex;align-items:center;justify-content:center;height:52px;padding:16px 30px;border-radius:100px;position:relative;flex-shrink:0;width:227px} .funder-cta__label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-white);text-transform:uppercase;white-space:nowrap;position:relative;flex-shrink:0;word-break:break-word} /* ================= NEWSLETTER + INSTAGRAM (pink wave over cream) ================= */ .news-instagram{position:relative;width:100%;overflow:hidden;z-index:1;margin-top:0} .news-instagram--overlap{margin-top:-376px} .news-instagram__cream{position:absolute;left:0;right:0;top:780px;bottom:0;background:var(--sk-cream);z-index:0} .news-instagram__wave{position:absolute;top:0;left:0;width:100%;aspect-ratio:1920/906;z-index:1;pointer-events:none;user-select:none} .news-instagram__wave img{position:absolute;inset:0;width:100%;height:100%} /* Pink painted on the content box (clip:content-box) so the transparent 246px top keeps the wave curve * while the pink covers all white text — WCAG-computable contrast. */ .news-instagram__content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:53px;width:100%;padding-top:246px;padding-bottom:6px;background:var(--sk-pink);background-clip:content-box} /* shared tail heading + eyebrow (used by newsletter AND instagram) */ .tail-heading{display:flex;flex-direction:column;align-items:center;gap:25px;position:relative;flex-shrink:0;width:833px;max-width:100%} .tail-heading__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:50px;line-height:70px;color:var(--sk-white);text-align:center;text-transform:uppercase;width:100%;word-break:break-word;position:relative;flex-shrink:0} .tail-eyebrow{display:flex;align-items:center;gap:8px;position:relative;flex-shrink:0} .tail-eyebrow__marker{position:relative;width:11px;height:20px;flex-shrink:0} .tail-eyebrow__marker-inner{position:absolute;inset:-0.61% -4.41%} .tail-eyebrow__marker img{display:block;width:100%;height:100%;max-width:none} .tail-eyebrow__text{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-white);white-space:nowrap;position:relative;flex-shrink:0} /* newsletter */ .newsletter{display:flex;flex-direction:column;align-items:center;gap:40px;position:relative;flex-shrink:0;width:100%;padding:0 205px} .newsletter__success{margin:0;width:833px;max-width:100%;background:var(--sk-white);color:var(--sk-pink);font-family:var(--sk-os-bold);font-weight:700;text-align:center;padding:16px 20px} .newsletter__form{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;position:relative;flex-shrink:0;width:100%} .newsletter__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .newsletter__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:18px;position:relative;flex-shrink:0;width:100%} .newsletter__fields{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:18px;position:relative;flex-shrink:0;width:964px;max-width:100%} .newsletter__field{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:474px;max-width:100%} .newsletter__field--name{width:458px} .newsletter__label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-white)} .newsletter__input{background:var(--sk-white);height:60px;width:100%;padding:16px 20px 16px 43px;font-family:var(--sk-os-reg);font-size:20px;color:var(--sk-input-text);outline:none} .newsletter__submit{background:var(--sk-yellow);display:flex;align-items:center;justify-content:center;height:61px;padding:19px 54px 18px;position:relative;flex-shrink:0;width:267px;border:0;cursor:pointer} .newsletter__submit-label{font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:30px;color:var(--sk-black);text-transform:uppercase;white-space:nowrap;position:relative;flex-shrink:0;word-break:break-word} .newsletter__consent{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;flex-shrink:0;width:100%;cursor:pointer} .newsletter__checkbox{background:var(--sk-white);border-radius:3px;flex-shrink:0;width:20px;height:20px;appearance:none;-webkit-appearance:none;border:1px solid var(--sk-white)} .newsletter__checkbox:checked{background:var(--sk-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 6'/%3E%3C/svg%3E") center / 70% no-repeat} /* H8: dark checkmark on tick */ .newsletter__consent-text{display:block;width:1220px;max-width:100%;font-family:var(--sk-os-reg);font-weight:400;font-size:20px;line-height:30px;color:var(--sk-white);word-break:break-word;position:relative} .newsletter__consent-text a{font-family:var(--sk-os-bold);font-weight:700;text-decoration:underline} /* instagram gallery */ .instagram{display:flex;flex-direction:column;align-items:center;gap:60px;position:relative;flex-shrink:0;width:1507px;max-width:100%} .instagram__grid{display:flex;align-items:center;position:relative;flex-shrink:0;width:100%} .instagram__item{display:block;height:325px;position:relative;flex-shrink:0;flex:1;min-width:0;overflow:hidden} .instagram__zoom{position:absolute;inset:0;display:block;overflow:hidden} .instagram__img{position:absolute;inset:0;max-width:none;object-fit:cover;pointer-events:none;width:100%;height:100%} /* ---- responsive (Wave 3 refines further) ---- */ @media(max-width:900px){ .sponsors-band{padding:60px 24px} .sponsors-band__inner,.tail-heading,.newsletter__fields,.newsletter__field,.newsletter__field--name,.newsletter__consent-text,.instagram{width:100%} .sponsors-band__title,.tail-heading__title{font-size:34px;line-height:44px;white-space:normal} .funder-row{padding:24px 24px} .funder-row--first{padding-top:32px} .funder-row__body{gap:18px} .funder-row--fixed{height:auto} .funder-slider__track{width:100%} .funder-row__cta{padding:8px 0 24px} /* the -160/-376px pull-up exists only to straddle the tall desktop sponsors block; on mobile * that block is height:auto, so the overlap just swallowed the last row's "View All" button. */ .news-instagram--overlap{margin-top:0} .news-instagram__content{padding-top:180px} .newsletter{padding:0 24px} .newsletter__row{flex-direction:column;align-items:stretch} .newsletter__submit{width:100%} .instagram__grid{flex-wrap:wrap} .instagram__item{flex:1 1 40%;min-width:40%} } /* ============ CLIENT FIXES (2026-07) ============ */ /* Fix 4 — complete anniversary badge image (replaces assembled SVG rings) */ .sponsors-badge__img{display:block;width:100%;height:auto;object-fit:contain} /* Fix 6 — newsletter background: news-wave-photo.png = photo + pink overlay + white wave in one. * The pink is now ONE continuous fill from the wave down to a STRAIGHT bottom at 1050px (the top * ~40% of the IG images), so the Instagram gallery straddles the pink/cream edge exactly like Figma * (365:6734) — no separate magenta band, no seam. Fill colour #de4685 = the photo's own bottom-edge * average, so the solid fill continues the photo invisibly instead of the old vivid #e20390 seam. */ .news-instagram__wave{aspect-ratio:1920/770} .news-instagram__content{background:linear-gradient(#0000 0 762px,#de4685 762px 1050px,#0000 1050px);background-clip:border-box} /* Fix 5 — funders/sponsors carousel shows EXACTLY 4 logos per view (track width - 3 gaps, /4) */ .funder-slide{flex:0 0 calc((100% - 60px) / 4);width:calc((100% - 60px) / 4);max-width:calc((100% - 60px) / 4);min-width:0;display:flex;align-items:center;justify-content:center} .funder-slide img{max-width:100%;max-height:100%;width:auto;object-fit:contain} .funder-slider__track{scroll-snap-type:x mandatory} .funder-slide{scroll-snap-align:start} /* Fix 2a — move the "// All Events" heading down so it sits clearly inside the pink section (off the wave edge) */ .gallery__intro-head{padding-top:56px} @media(max-width:1023px){.gallery__intro-head{padding-top:0}} /* Fix 2b — event slider: snap cards to their left edge so navigating BACK from the last slide * always lands on a clean card boundary (no half-cut leftmost card from scrollBy() drift). * Only the testimonials use Slick; the horizontal card sliders stay native (Slick's variableWidth * fights the fixed-1920 .sk-scale zoom). scroll-snap gives the native track crisp paging. */ .gallery__track{scroll-snap-type:x mandatory;scroll-padding-left:0} .gallery__track>*{scroll-snap-align:start} /* ============================================================================ * MOBILE RESPONSIVE OVERHAUL — 2026-07. Appended LAST so it wins on source order * over the unconditional client-fix rules above (and over home.css). Fixes every * section flagged in the full 12-page mobile audit. 1023px = where savour.js drops * the fixed-1920 .sk-page zoom and the real responsive layout takes over. * ==========================================================================*/ @media (max-width:1023px){ /* == SHARED: Funders / Sponsors logo carousel (every page) == * Was 4 crushed ~10px logos between two 60px arrows that overflowed the viewport * by 72px. Now: 2 legible logos, small in-flow arrows, track absorbs their width. */ .funder-slider{gap:6px;min-width:0;overflow:hidden;height:auto} .funder-slider__nav,.funder-slider__nav-flip{width:38px;height:38px} .funder-slider__nav--prev{margin-right:2px} .funder-slider__nav--next{margin-left:2px} .funder-slider__track{flex:1 1 auto;width:auto;min-width:0;height:auto;padding:20px 0;gap:12px} /* 1 logo per view on phones so wide wordmarks (Dept of Agriculture) don't shrink to an * illegible sliver next to a compact logo; arrows page through the rest */ .funder-slide{flex:0 0 100%;width:100%;max-width:100%;padding:6px 16px;height:104px} .funder-slide img{max-height:96px;max-width:88%} .funder-slider__track{padding:10px 0} .funder-slider{max-width:360px;margin-inline:auto} /* == SHARED: Newsletter — the desktop straddle gradient is fixed-px, so on the * reflowed mobile stack the white text landed on cream (invisible). Repaint a * height-independent pink from just under the wave down through the block. == */ /* pink starts exactly where the wave image ends (wave aspect 1920/770 → height ≈ 40.1vw), so the * photo-wave and the flat pink meet seamlessly at EVERY width (was a fixed 150px = seam at 600/768) */ .news-instagram__content{padding-top:40vw;background:linear-gradient(#0000 0 40vw,#de4685 40vw 100%);background-clip:border-box} /* == SHARED: Instagram grid — clean 2-up square tiles (no lone stretched 5th) == */ .instagram__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .instagram__item{height:auto;aspect-ratio:1/1;min-width:0;flex:none} /* == SHARED: Footer — drop the   spacer headings + tighten stacked spacing == */ .footer-nav:not(:first-of-type) .footer-nav__heading{display:none} .footer-nav{gap:16px} .footer-nav__links{gap:14px} .site-footer__cols{gap:28px} /* == SHARED: inner-page hero title. home.css hides the whole overlay on mobile * ([data-name="Hero Overlay"]{display:none!important}) so EVERY inner page lost its * H1. Restore it (higher specificity + !important beats that) and anchor it bottom-left * over a bottom-up scrim so white text reads on the photo. * IMPORTANT: scope to .page-hero__overlay ONLY — the HOME hero's desktop composition * ALSO carries data-name="Hero Overlay" and must STAY hidden on mobile (the simple * .sk-hero-mobile takes over there), so we must NOT match it. == */ .page-hero .page-hero__overlay{display:flex!important} .page-hero__banner{justify-content:flex-end} /* M2: home.css forces [data-name="Hero Image"]{height:460px!important} at all widths; on mobile beat it with a class+attribute selector (higher specificity) to ~40% shorter. Image is object-fit:cover → crops, no skew. */ .page-hero__banner[data-name]{height:276px!important;min-height:276px!important} .page-hero__scrim{background-image:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.30) 45%,rgba(0,0,0,0) 80%)} /* long titles (e.g. news-detail "MARKET APPLICATIONS NOW OPEN…") must wrap, not clip: * .page-hero__title-tilt{flex:none} locked the H1 to a single line inside overflow:hidden */ .page-hero__title-wrap{width:100%;max-width:100%;min-width:0} .page-hero__title-tilt{flex:1 1 auto;min-width:0;max-width:100%} .page-hero__title{font-size:34px;line-height:40px;text-shadow:0 2px 12px rgba(0,0,0,.55);max-width:100%;overflow-wrap:anywhere} /* == Directory / Plan: place-card address rows must wrap, not clip off-screen == */ .place-card__row{align-items:flex-start;width:100%} .place-card__row-text{flex-shrink:1;min-width:0;overflow-wrap:anywhere} /* == Plan + Contact: long sponsor pill buttons must wrap, not overflow == */ .plan-btn{max-width:100%;padding:16px 26px;flex-shrink:1;min-width:0} .plan-btn__label{white-space:normal;text-align:center} .contact-btn{max-width:100%;padding:14px 24px;flex-shrink:1;min-width:0} .contact-btn__label{white-space:normal;text-align:center;font-size:16px;line-height:22px} /* == Sponsor: Partners list overflow + squat funder cells == */ .partners__col{width:100%} .partners{gap:0} .logo-cell--funder{padding:10px 14px} /* == News single: decorative shard covered body text; related arrows over the card == */ .news-article__media-shard{display:none} .related-news__nav{display:none} /* == Home: testimonials — native CSS-fade slider (Slick removed). Desktop stage rules + * the mobile block above handle layout; these are just the mobile text/meta refinements. == */ .testimonials__divider{display:none} .testimonials__meta{flex-direction:column;gap:16px;height:auto} .testimonials__author-row{flex-wrap:wrap;gap:14px;align-items:center} .testimonials__author,.testimonials__date{white-space:normal} /* == Home: gallery intro needs its pink panel back (desktop .gallery__bg only shows * a random centre-crop on mobile) + fix the double line-height == */ .gallery__bg{display:none} .gallery__intro{background:var(--sk-pink);border-radius:20px;padding:26px 22px;height:auto} .gallery__title{line-height:1.12} /* == Home: countdown — hide the stray colons, lay units in a 2x2 grid == */ /* single row of 4 evenly-distributed units, each centred (no colons). The old 2x2 grid * centred each unit in its own half, spreading them to 25%/75% with a dead gap between. */ .countdown__colon{display:none} .countdown__timer{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:6px;padding:6px 0;width:100%} /* !important + higher specificity to beat home.css `[data-name="Countdown Timer Container"]>div{flex:0 0 46%!important}` which forced the 2x2 spread */ .countdown__timer > .countdown__group{flex:1 1 0 !important;min-width:0;flex-direction:column;align-items:center;gap:0;width:auto} .countdown__group *{text-align:center;width:100%} /* == Home: festival media cards — 2-line title collided with the VIEW MORE link == */ .media-card__title{height:auto;line-height:1.12} .media-card__inner{padding:0 22px 26px;justify-content:flex-end} /* == About: video-banner — stack the play button and caption in flow so they never overlap == */ .about-banner{flex-direction:column;align-items:center;justify-content:center;gap:16px;height:auto;min-height:300px;padding:48px 24px} .about-banner__play{position:static;transform:none;top:auto;left:auto;order:1;margin:0 auto;width:60px;height:68px} .about-banner__caption{order:2;position:static;width:100%;text-align:center} /* == Defensive: a missing/slow image never reads as a stark white void == */ .news-card__image,.place-card__media{background-color:var(--sk-cream)} } /* Narrow phones: About cards stack 1-up, titles stop breaking mid-word */ @media (max-width:600px){ .about-card{width:100%} .about-card__title{font-size:28px;line-height:34px;word-break:normal;overflow-wrap:anywhere} } /* ============ WAVE 1 FIXES (2026-07) — cut/squashed/overlap issues found in the multi-width sweep ============ */ @media (max-width:1023px){ /* Instagram gallery: 5 photos in a 2-col grid left an empty 6th cell (blank pink block) on EVERY * page. Make the lone trailing tile span the full row as a banner — no empty cell, all 5 kept. */ /* a lone trailing (odd) tile: HIDE it for a clean gap-free 2x2 — the full-width banner * version chopped the subjects' heads at 600/768. Even counts (4/6) are unaffected. */ .instagram__item:last-child:nth-child(odd){display:none} /* Home: decorative sprig band clipped/bled off the testimonial block — purely decorative + already * repeated in the footer, so drop it on mobile. */ .testimonials__sponsors{display:none} /* Home: yellow Information CTA buttons hugged the left edge (container shrink-wrapped) — let the * row fill so justify-content:center actually centres them under the centred copy. */ .info__buttons{width:100%;flex-direction:column;align-items:center} /* News/Places single: the angular clip-path notched the featured photo, but the pink shard that * fills the notches is hidden on mobile — neutralise the clip so it's a clean rectangle. */ .news-article__media-frame{clip-path:none !important;border-radius:16px;overflow:hidden} /* News detail: the post headline showed twice (hero overlay + black article H2). Hero already * carries it on mobile, so hide the in-body repeat. */ .news-article__title{display:none} /* News cards with title text baked into the image: the fixed 60px wave overlap ate the shorter * mobile image. Shrink the wave overlap so less of the photo is covered. */ .news-card__image{margin-bottom:-28px} .news-card__edge{height:46px} /* Funders/Sponsors carousel: give wide logos clearance from the arrows (1-up now, but be safe). */ .funder-slider__nav--prev{margin-right:8px} .funder-slider__nav--next{margin-left:8px} /* Single event: the pentagon media has the same clip-path notch (shard hidden on mobile). * Show a clean rounded rectangle and drop the pink back shard. */ .event-media__img{clip-path:none !important;border-radius:16px;overflow:hidden} .event-media__back{display:none} } /* ============ WAVE 2 FIXES (2026-07) — section spacing/seams + remaining cut/overlap ============ */ @media (max-width:1023px){ /* Testimonials: was top-heavy (100px top, ~0 bottom) so the arrows jammed into the next band */ .testimonials{padding-top:52px;padding-bottom:44px} /* Sponsors/Funders yellow band heading centres when it wraps to 2 lines */ .sponsors-band__title{text-align:center;width:100%} /* Newsletter consent checkbox aligns to the first line of the wrapping label */ .newsletter__consent{align-items:flex-start} .newsletter__checkbox{margin-top:3px} /* Contact: kill the dead gap under the hero + shrink the oversized map slab */ .contact-getintouch{padding-top:0} .contact-map{height:380px} /* About: caption legibility over the photo + clean Our-Story rectangle + no double top padding */ .about-banner__caption{text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.75)} /* the Our-Story photo is a parallelogram PNG with transparent corners; its backing shape is * hidden on mobile, so the angled cuts fell on bare white and read as "skewed". Put a pink * panel behind it so the angle looks intentional (like the desktop backing). */ /* Our Story photo: the desktop art is a diagonally-cut PNG whose transparent top corners were filled by the pink frame on mobile — reading as a chopped/skewed photo. Swap in a clean rectangular crop (edge-clamp filled) as a cover background so there is no wedge and no skew. */ .about-story__photo-frame{aspect-ratio:1100/722;height:auto;border-radius:14px;overflow:hidden;background:#e9e7e0 url(../images/savour/about/about-story-mobile.jpg) center/cover no-repeat} .about-story__photo-img{display:none} .about-textblock{padding-top:0} /* Countdown: keep the row of 4 compact/centred on wider mobile */ .countdown__timer{max-width:460px;margin-inline:auto} /* Single-event footer wordmark: match cap-height across the two lines (intrinsic 802 vs 968) */ .site-footer__wordmark-l{width:82%} /* Event cards fill the page gutter (were capped at 488px and centred while panels were full width) */ .event-card{max-width:none} /* Plan travel coach photo + teal-band festival photo: natural aspect instead of a fixed-height slab */ .travel-band__figure{height:auto;aspect-ratio:3/2} .iae-band__figure{height:auto;aspect-ratio:3/2} /* Plan card carousels: peek the next card + snap so it's clear there's more to scroll */ .plan-slider__track{scroll-snap-type:x mandatory;scroll-padding-left:24px;gap:16px} .plan-slider__track .place-card{width:86%;max-width:520px;scroll-snap-align:start} } /* Tablet band (600–1023): use the extra width instead of a lonely left column */ @media (min-width:600px) and (max-width:1023px){ .places-group__cards{display:grid;grid-template-columns:1fr 1fr;gap:20px} .places-group__cards .place-card{width:100%;max-width:none} .logo-cell--sponsor{aspect-ratio:auto;height:150px} .logo-cell--funder{aspect-ratio:auto;height:120px} .footer-nav__links{columns:2;column-gap:40px} } /* ============ WAVE 3 FIXES (2026-07) — polish: tablet 2-up, spacing, remaining cut/overlap ============ */ @media (max-width:1023px){ /* Home Information CTA pills: home.css forces the container align-items:stretch!important + kids * width:100%!important, parking the 340px pill at the left. Make them full-width so they read as * a centred stack under the centred copy. */ .info-btn{width:100%;max-width:none} /* Home: drop the redundant, off-gutter, clipped grass sprig at the events→Festival-Hub seam + tighten */ .gallery__contact-vector{display:none} .gallery__container{padding-bottom:24px} /* Home featured event card: bias the crop left so the character cluster isn't sliced (blank sky crops instead) */ .gallery__track .event-card__img{object-position:left center} /* Event-card wave overlap is proportionally too deep on the narrower mobile card (-100px of a ~250px image) */ .event-card__media{margin-bottom:-56px} /* Newsletter: cap the pink photo band so the top padding is consistent 390→768 (was ballooning with width) */ .news-instagram__content{padding-top:40vw;padding-bottom:48px;background:linear-gradient(#0000 0 40vw,#de4685 40vw 100%)} /* Newsletter inputs: even internal gutter (had a 43px left inset for an icon that isn't there) */ .newsletter__input{padding:16px 20px} /* Directory 2-up grid: cards size to their own content instead of stretching to the tallest */ .places-group__cards .place-card{align-self:start} /* Sponsor logo grids: even breathing room around each logo */ .logo-cell--sponsor img{max-width:78%} .logo-cell--funder img{max-width:84%} /* Single event: normal gap between the copy and the Book Now button */ .event-copy{gap:26px} } /* Tablet band (600–1023): use the width — 2-up carousels, 2-col footer nav, capped prose */ @media (min-width:600px) and (max-width:1023px){ .funder-slider{max-width:640px} .funder-slide{flex:0 0 calc((100% - 20px)/2);width:calc((100% - 20px)/2);max-width:calc((100% - 20px)/2);height:110px} .funder-slide img{max-height:94px;max-width:90%} .event-cards__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .event-cards__grid .event-card{width:100%} /* footer: brand on its own full-width row, then the 4 nav groups in an even 2-col grid * (flex-wrap left the tall brand block beside a short nav column → big dead gap) */ .site-footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;align-items:start;flex-wrap:nowrap} .site-footer__brand{grid-column:1 / -1} .footer-nav{width:auto} .sk-prose,.sk-legal__body{max-width:660px;margin-inline:auto} } /* ============ WAVE 4 FIXES (2026-07) — final polish ============ */ @media (max-width:1023px){ /* Testimonials: hide the dangling little author divider + let name/date sit together */ .testimonials__author-divider{display:none} .testimonials__author-meta{width:auto} /* About: single comfortable gap at the Our-Story white→cream seam (was ~140px of doubled padding) */ .about-story{padding-bottom:40px} .about-info-band{padding-top:40px} /* Instagram gallery: small gutter so edge tiles aren't sliced by the screen edge + bias crop to faces */ .instagram{padding:0 24px} .instagram__img{object-position:center 32%} /* (funder phone/tablet sizing lives in the shared carousel block above + the tablet band below) */ /* Plan teal band: normal gap between the button and the map */ .iae-band{gap:24px} /* Single event: drop only the pentagon graphic (duplicates the hero) — KEEP the "Kindly Sponsored by" logos */ .event-media__stack{display:none} .event-media{gap:0} /* News-detail giant SAVOUR KILKENNY wordmark: keep both lines inside the gutter */ .site-footer__wordmark{padding-inline:20px;box-sizing:border-box} /* Contact map: graceful placeholder tint so a slow/blocked embed isn't a stark void */ /* Contact map: show the static map poster behind the iframe so the box is never a blank void (the live embed paints over it; if it's blocked/consent-gated, the poster still shows). */ .contact-map{background:#e9e7e0 url(../images/savour/contact/map.png) center/cover no-repeat} /* Marquee: reduced-motion users get one static, fully-visible centred line (not a frozen clip) */ } @media (prefers-reduced-motion:reduce){ .sk-marquee{width:100%} .marquee-band__text{white-space:normal;padding-right:0;text-align:center} .marquee-band__text:nth-child(2){display:none} } /* ============ WAVE 5 FIXES (2026-07) — final polish ============ */ @media (max-width:1023px){ /* Sponsor "20th Anniversary" intro: the 38px desktop gap is too airy on a phone */ .sponsor-intro{gap:22px} } /* Narrow phones: the testimonial author + "Posted " date share one row and the date clipped off the right edge at 390 — stack them so both stay inside the card. */ @media (max-width:600px){ .testimonials__author-meta{flex-direction:column;gap:6px} .testimonials__author{width:auto} } /* ============ WAVE 6 FIXES (2026-07) — final polish round 2 ============ */ @media (max-width:1023px){ /* Directory place-card decorative wave: scale with width instead of a fixed 89px slab (was squashing) */ .place-card__wave{height:auto;aspect-ratio:488/89} .place-card__wave-img{object-fit:cover} /* A directory place detail reuses single.php; its hero already shows the photo, so the article-body featured image below is a duplicate on a phone — hide it on place singles only. */ body.single-places .news-article__media{display:none} /* "Other related news" slider: peek the next card + snap so it's clear there's more to scroll */ .related-news__track{scroll-snap-type:x mandatory;scroll-padding-left:24px;gap:16px;justify-content:flex-start} .related-news__track .news-card{flex:0 0 86%;max-width:360px;scroll-snap-align:start} } /* ============ WAVE 7 FIXES (2026-07) — final polish round 3 ============ */ @media (max-width:1023px){ /* Plan "About Kilkenny" card scoop wave: scale by ratio like place-card__wave (was locked to 89px → stretched) */ .about-card__edge{height:auto;aspect-ratio:488/89} .about-card__edge img{object-fit:cover} /* Newsletter wave photo keeps its natural 1920/770 ratio (= 40vw tall). The pink gradient below starts at the same 40vw (see .news-instagram__content) so the wave bottom always meets the pink with no squash and no crop, at every width. */ } /* Narrow phones: a lone funder/sponsor logo should grow to fill the row, not float in a wide cap */ @media (max-width:600px){ .funder-slider{max-width:320px} .funder-slide img{max-height:104px} } /* Tablet: single-event DATE/TIME/LOCATION pills left-align to the gutter (match the body below) */ @media (min-width:600px) and (max-width:1023px){ .event-meta__list{justify-content:flex-start} } /* ============ WAVE 8 FIXES (2026-07) — final polish round 4 (tablet fill + gutter/spacing) ============ */ /* Funder/sponsor carousel: keep the phone 1-up layout up to 768 — the 2-up split at 600 shrank wide multi-line wordmarks (Dept of Agriculture) to an illegible sliver. 2-up resumes at 768 (cells wide enough). */ @media (min-width:600px) and (max-width:767px){ .funder-slide{flex:0 0 100%;width:100%;max-width:100%;height:104px} .funder-slider{max-width:360px} .funder-slide img{max-height:96px} } /* Home image cards: on tablet use the width as a 2-up grid (was pinned max-width:460 centred → ~40% dead gutter at 768). Portrait 4/5 crop kept, lone 3rd card stays a centred portrait. */ @media (min-width:600px) and (max-width:1023px){ .media-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .media-card,.media-card--w627,.media-card--w630,.media-card--w631{max-width:none;width:100%;margin-inline:0} /* Lone 3rd card of a 3-card group: centre-span it as an intentional featured tile (a left-aligned half-cell left a 50% void beside it). */ .media-cards > .media-card:nth-child(3){grid-column:1 / -1;max-width:460px;margin-inline:auto} /* Plan card sliders: widen the card so only a tight peek shows (was a ~35% half-card slice at 768) */ .plan-slider__track .place-card{width:80%;max-width:560px} } /* Contact "Get In Touch": tighten the airy desktop internal gaps for mobile (65px/51px → 40px/28px) */ @media (max-width:1023px){ .contact-getintouch{gap:40px} .contact-getintouch__top{gap:28px} } /* ============ WAVE 9 FIXES (2026-07) — final polish round 5 (funder band + tablet cols) ============ */ /* Funder/sponsor carousel: HUG the logo. Fixed-height slabs (104/110px) left the width-capped logos floating in ~30-40px of dead space; auto-height + a consistent logo cap removes it (recurred waves 5-9). */ @media (max-width:1023px){ .funder-slide{height:auto;min-height:78px} .funder-slide img{max-height:72px;max-width:92%} .funder-row__body{gap:12px} .funder-row__cta{padding:4px 0 20px} .funder-row--first{padding-top:24px} /* Sponsor Partners: tighten the desktop 50px line-height on the stacked mobile list */ .partners__col p{line-height:34px} /* Footer sprig: small clearance so the yellow grass clears the yellow copyright bar (was flush/merged) */ .site-footer__sprig{margin-bottom:14px} } /* Sponsor "2026 Funders" grid at 390: the aspect-ratio cell crushed tall marks (harp / Dept of Ag) — give them a fixed height like the ≥600 cells so they read consistently. */ @media (max-width:599px){ .logo-cell--funder{aspect-ratio:auto;height:100px} } /* Sponsor Partners stays a SINGLE centred column at all mobile/tablet widths — the names are split into 3 fixed PHP columns, so a 2-col reflow orphans the 3rd into a lopsided 2+1. The line-height:34px above keeps the single column from reading too tall. */ /* ============ WAVE 10 FIXES (2026-07) — final polish round 6 ============ */ /* Plan festival map: an unreadable thumbnail on phones — now tap-to-enlarge (Fancybox) with a mobile hint. */ .visit-intro__map-zoom{display:block;position:relative;text-decoration:none;color:inherit;cursor:zoom-in} .visit-intro__map-hint{display:none} @media (max-width:1023px){ .visit-intro__map-hint{display:block;margin-top:8px;text-align:center;font-family:var(--sk-os-bold);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--sk-black);text-decoration:underline} /* Directory place detail reuses single.php: its news-style date band sits above an empty body — hide it. */ body.single-places .news-article__date{display:none} } /* Tablet band: a lone trailing card left-aligns to the grid's left column (centring it read as misaligned). Cards top-align so a 2-col row doesn't stretch the shorter card to the taller one. NB Partners stays a SINGLE column across the whole tablet range — a 2-col reflow orphaned the 3rd name column. */ @media (min-width:600px) and (max-width:1023px){ .event-cards__grid .event-card, .places-group__cards .place-card{align-self:start} } /* ============ ACCESSIBILITY (WCAG 2.2) ============ */ /* 2.4.7 Focus Visible: the contact + newsletter form resets set outline:none and buttons had no focus ring — restore a clear KEYBOARD focus indicator on every interactive element (:focus-visible only, so mouse users don't see it). Black core + white halo = visible on light, dark and photo backgrounds. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, [role="button"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible{ outline:3px solid #111 !important; outline-offset:2px !important; box-shadow:0 0 0 5px rgba(255,255,255,.9) !important; border-radius:2px; } /* 2.5.8 Target Size (Minimum): the newsletter consent checkbox was 20×20 — meet the 24×24 minimum. */ .newsletter__checkbox{width:24px;height:24px} /* 1.4.13 Content on Hover/Focus — Dismissable: Escape hides the hover/focus submenu (savour.js adds .is-dismissed; it's cleared as soon as the user re-hovers or re-focuses the item). */ .sk-primary-nav .sk-has-sub.is-dismissed > .sk-submenu{opacity:0 !important;visibility:hidden !important;pointer-events:none !important} /* 3.3.1 form error messages + required marker */ .newsletter__error,.contact-form__error{margin:0;color:#b00020;font-weight:700} .contact-form__error{padding:10px 0} .sk-req{color:#b00020} .sk-form-note{font-size:14px;opacity:.85} /* ============ Contact — festival site map (below the form, brief §3) ============ */ .contact-festival-map{display:flex;flex-direction:column;gap:24px;align-items:flex-start;width:100%;background:var(--sk-cream);padding:0 var(--sk-gutter) 100px} .contact-festival-map__link{display:block;position:relative;width:100%;max-width:1200px;margin:0 auto;cursor:zoom-in;border-radius:14px;overflow:hidden;background:#e9e7e0;text-decoration:none;color:inherit} .contact-festival-map__img{display:block;width:100%;height:auto} @media (max-width:1023px){ .contact-festival-map{padding:0 24px 60px;gap:16px} } /* ============ Recipes (recipes CPT: archive-recipes / single-recipes / card-recipe) ============ */ /* Cards reuse .news-card. The chef by-line reuses .news-card__date but reads as a chef tag. */ .recipe-card__chef .news-card__date-icon svg{width:17px;height:17px;display:block} .recipe-card__chef .news-card__date-text{white-space:normal} /* Single recipe body */ .recipe-article{display:flex;justify-content:center;width:100%;background:var(--sk-cream);padding:90px var(--sk-gutter) 100px;position:relative} .recipe-article__inner{display:flex;flex-direction:column;gap:40px;width:100%;max-width:1000px} .recipe-article__head{display:flex;flex-direction:column;gap:22px;align-items:flex-start} .recipe-article__chef{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--sk-os-reg);font-size:20px;line-height:1.4;color:var(--sk-black)} .recipe-article__chef strong{font-family:var(--sk-os-bold);font-weight:700} .recipe-article__chef-icon{display:inline-flex;width:26px;height:26px;color:var(--sk-pink);flex-shrink:0} .recipe-article__chef-icon svg{width:24px;height:24px} .recipe-glance{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;width:100%} .recipe-glance__item{display:flex;flex-direction:column;gap:2px;padding:14px 26px;background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.08);min-width:120px} .recipe-glance__label{font-family:var(--sk-os-bold);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--sk-pink)} .recipe-glance__value{font-family:var(--sk-oswald);font-weight:700;font-size:22px;line-height:1.1;color:var(--sk-black)} .recipe-article__intro{font-family:var(--sk-os-reg);font-size:20px;line-height:30px;color:var(--sk-black)} .recipe-article__intro p{margin:0 0 16px} .recipe-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:start;width:100%} .recipe-cols__ingredients{background:#fff;border-radius:18px;padding:30px 32px;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:24px} .recipe-cols__title{margin:0 0 18px;font-family:var(--sk-oswald);font-weight:700;font-size:32px;line-height:1.2;color:var(--sk-black);text-transform:uppercase} .recipe-cols__ingredients .recipe-cols__title{color:var(--sk-pink)} .recipe-cols__body{font-family:var(--sk-os-reg);font-size:18px;line-height:1.6;color:var(--sk-black)} .recipe-cols__body ul,.recipe-cols__body ol{margin:0 0 16px;padding-left:22px} .recipe-cols__body li{margin:0 0 10px} .recipe-cols__body p{margin:0 0 16px} .recipe-cols__body h2,.recipe-cols__body h3,.recipe-cols__body h4{font-family:var(--sk-oswald);font-weight:700;text-transform:uppercase;margin:22px 0 10px;line-height:1.2} .recipe-cols__ingredients .recipe-cols__body ul{list-style:none;padding-left:0} .recipe-cols__ingredients .recipe-cols__body li{position:relative;padding-left:26px} .recipe-cols__ingredients .recipe-cols__body li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;background:var(--sk-yellow);border-radius:50%} .recipe-article__content{font-family:var(--sk-os-reg);font-size:18px;line-height:1.6;color:var(--sk-black)} .recipe-article__content ul,.recipe-article__content ol{padding-left:22px;margin:0 0 16px} .recipe-article__content li{margin:0 0 10px} .recipe-article__back{display:flex;justify-content:center;padding-top:8px} .recipe-article__back .story-cta__pill{display:inline-flex;align-items:center;justify-content:center;background:var(--sk-yellow);color:var(--sk-black);font-family:var(--sk-os-bold);font-weight:700;text-transform:uppercase;text-decoration:none;padding:18px 40px;border-radius:100px} @media (max-width:1023px){ .recipe-article{padding:50px 24px 60px} .recipe-article__inner{gap:28px} .recipe-cols{grid-template-columns:1fr;gap:24px} .recipe-cols__ingredients{position:static;padding:24px} .recipe-cols__title{font-size:26px} .recipe-article__intro{font-size:18px;line-height:28px} .recipe-glance__item{flex:1 1 30%;min-width:0;align-items:center;text-align:center;padding:12px 10px} } /* ============ Recipes v2 — image-free cards + no-banner single (Google-Doc content) ============ */ .recipe-card-x{display:flex;flex-direction:column;gap:14px;width:488px;max-width:100%;min-height:236px;background:#fff;border-radius:20px;border-top:6px solid var(--sk-pink);padding:30px 30px 26px;box-shadow:0 2px 12px rgba(0,0,0,.07);text-decoration:none;color:inherit;position:relative} .recipe-card-x__chef{display:inline-flex;align-items:center;gap:8px;font-family:var(--sk-os-bold);font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--sk-pink)} .recipe-card-x__chef-icon{display:inline-flex;width:20px;height:20px;flex-shrink:0} .recipe-card-x__chef-icon svg{width:19px;height:19px;display:block} .recipe-card-x__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:26px;line-height:1.15;color:var(--sk-black);text-transform:uppercase} .recipe-card-x__serves{margin:0;font-family:var(--sk-os-reg);font-size:16px;line-height:1.3;color:#666} .recipe-card-x__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--sk-os-bold);font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--sk-pink)} .recipe-card-x__more svg{width:18px;height:18px;transition:transform .2s ease} .recipe-card-x:hover .recipe-card-x__more svg{transform:translateX(4px)} .recipe-card-x:focus-visible{outline:3px solid var(--sk-pink);outline-offset:3px} .related-news__track .recipe-card-x{flex:0 0 86%;max-width:360px;scroll-snap-align:start} /* single recipe: no-banner masthead */ .recipe-article--nobanner{padding-top:132px} .recipe-article__masthead{display:flex;flex-direction:column;gap:14px;align-items:flex-start;width:100%;padding-bottom:26px;margin-bottom:6px;border-bottom:2px solid rgba(0,0,0,.09)} .recipe-article__eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--sk-os-bold);font-weight:700;font-size:18px;line-height:1;color:var(--sk-pink);text-transform:uppercase;letter-spacing:.02em} .recipe-article__eyebrow img{width:11px;height:20px;display:block} .recipe-article__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:48px;line-height:1.08;color:var(--sk-black);text-transform:uppercase} .recipe-subhead{margin:16px 0 8px;font-family:var(--sk-oswald);font-weight:700} .recipe-subhead:first-child{margin-top:0} .recipe-subhead strong{font-weight:700;text-transform:uppercase;letter-spacing:.02em} @media (max-width:1023px){ .news-row > .recipe-card-x{width:100%} .recipe-card-x{width:100%;min-height:0;padding:24px 22px 22px} .recipe-card-x__title{font-size:23px} .recipe-article--nobanner{padding-top:36px} .recipe-article__title{font-size:32px} .recipe-article__eyebrow{font-size:16px} .recipe-article__masthead{padding-bottom:20px} } /* Recipe search (archive) */ .recipe-search{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:560px;margin:0 auto 8px} .recipe-search__box{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:2px solid #e6e4dd;border-radius:100px;padding:0 18px;height:58px;transition:border-color .15s,box-shadow .15s} .recipe-search__box:focus-within{border-color:var(--sk-pink);box-shadow:0 4px 16px rgba(239,80,157,.14)} .recipe-search__icon{width:22px;height:22px;color:var(--sk-pink);flex-shrink:0} .recipe-search__input{flex:1;border:0;outline:0;background:transparent;font-family:var(--sk-os-reg);font-size:18px;color:var(--sk-black);min-width:0} .recipe-search__input::placeholder{color:#8a877f} .recipe-search__input::-webkit-search-cancel-button{display:none} .recipe-search__clear{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:#f0eee8;color:#555;border-radius:50%;cursor:pointer;flex-shrink:0} .recipe-search__clear:hover{background:var(--sk-pink);color:#fff} .recipe-search__clear svg{width:15px;height:15px} .recipe-search__count{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--sk-pink);min-height:18px} .recipe-search__empty{text-align:center;width:100%;padding:40px 0} /* Method steps: numbered pink counters instead of default list markers (home.css resets ol) */ .recipe-cols__method .recipe-cols__body ol{list-style:none;counter-reset:sk-step;padding-left:0;margin:0} .recipe-cols__method .recipe-cols__body ol > li{counter-increment:sk-step;position:relative;padding-left:46px;margin:0 0 18px;min-height:32px} .recipe-cols__method .recipe-cols__body ol > li::before{content:counter(sk-step);position:absolute;left:0;top:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--sk-pink);color:#fff;border-radius:50%;font-family:var(--sk-oswald);font-weight:700;font-size:16px;line-height:1} @media (max-width:1023px){ .recipe-search{max-width:100%} .recipe-search__box{height:52px} .recipe-search__input{font-size:16px} } /* ============ Client tweaks 2026-07-16 ============ */ /* Info section without the mascot image: drop the tuck-under negative margin so the yellow block sits centred */ .info__container--noimg .info__content{margin-right:0} /* No "//" glyphs before section headings — hide every eyebrow marker site-wide (the labels stay). */ .hp-eyebrow__marker, .event-eyebrow__marker, .about-eyebrow__pin, .plan-eyebrow__marker, .related-news__marker, .tail-eyebrow__marker, .news-eyebrow > img, .sponsor-eyebrow img, .recipe-article__eyebrow img{display:none!important} /* ============ Sponsor / funder logo standardisation (2026-07-16) ============ */ /* ONE uniform logo tile everywhere (tail carousels + sponsor-page grids): white card, hairline border, soft radius, logo contained at a consistent cap so no mark dwarfs another. Replaces the wave 5-9 patches. */ /* -- site-tail rows: desktop stays a 4-up slider, but each slide is now a tidy tile -- */ .funder-slide{background:#fff;border:1px solid #e9e7e2;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.05);height:150px;padding:22px 26px} .funder-slide img{max-height:84px;max-width:80%;width:auto;height:auto;object-fit:contain} .funder-slider{height:auto} .funder-slider__track{height:auto;padding:26px 4px} /* -- sponsor page: funders + sponsors share ONE cell size + the same tile treatment -- */ .logo-cell--funder,.logo-cell--sponsor{width:270px;height:170px;padding:22px 26px;border:1px solid #efede8;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.04)} .logo-cell--funder img,.logo-cell--sponsor img{max-width:80%;max-height:100px;width:auto;height:auto;object-fit:contain} /* -- mobile/tablet: the logo sliders become a stacked 2-per-row grid (every logo visible, no arrows) -- */ @media (max-width:1023px){ .funder-slider{display:block;max-width:none} .funder-slider__nav{display:none} .funder-slider__track{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;height:auto;padding:10px 0 4px;overflow:visible;scroll-snap-type:none} .funder-slide{flex:none;width:100%;max-width:none;min-height:0;height:100px;padding:14px 16px;scroll-snap-align:none} .funder-slide img{max-height:64px;max-width:84%} /* sponsor-page grid cells: same fixed tile height for both rows, 2-per-row */ .logo-cell--funder,.logo-cell--sponsor{width:calc(50% - 10px);height:108px;aspect-ratio:auto;padding:14px 16px} .logo-cell--funder img,.logo-cell--sponsor img{max-height:68px;max-width:84%} } /* Static funder/sponsor row (≤10 logos): show every tile in a centred wrapped grid — no slider */ .funder-slider--static .funder-slider__track{flex-wrap:wrap;justify-content:center;overflow:visible;scroll-snap-type:none;width:1510px;max-width:100%} /* Hero background VIDEO (admin toggle, home + all page heroes): fills the hero exactly like the image; the still image stays underneath as poster/fallback, and reduced-motion users keep the still. */ .page-hero__video,.hero__bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} @media (prefers-reduced-motion: reduce){.page-hero__video,.hero__bg-video{display:none}} /* ============ Mobile hero: brighter + un-skewed (client 2026-07-16, round 2) ============ * Root causes: (1) the desktop Figma %-crop (124.84% x 103.66% + offsets) stretched the photo out of * its natural aspect on narrow screens — the "skewed" background; (2) the desktop diagonal gradient * (50% black) was STACKING with the mobile scrim (~74% combined). On mobile: natural cover-crop, * no desktop gradient, one light bottom-weighted scrim — the strong text-shadows keep the wordmark legible. */ @media (max-width:1023px){ .hero__bg-img{width:100%;height:100%;left:0;top:0;object-fit:cover} .hero__gradient{display:none} .sk-hero-mobile::before{background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.30) 38%,rgba(0,0,0,.30) 72%,rgba(0,0,0,.10) 100%)} } /* ============ Client batch 2026-07-16 (round 3) ============ */ /* Section eyebrows: PINK + UPPERCASE site-wide ("OUR STORY" style). Contrast exceptions: on the yellow info block they stay charcoal, on the pink newsletter band they stay white — both still uppercase. */ .hp-eyebrow__text,.news-eyebrow p,.event-eyebrow__text,.related-news__eyebrow-text,.sponsor-eyebrow p,.plan-eyebrow__label,.about-eyebrow__label,.tail-eyebrow__text{text-transform:uppercase;letter-spacing:.05em;color:var(--sk-pink)} .hp-eyebrow__text--black,.about-eyebrow__label--dark{color:var(--sk-black)} .tail-eyebrow__text{color:var(--sk-white)} /* Event cards: intro removed → tighter rhythm; icons optically centred on the FIRST line of text */ .event-card__text{gap:22px} .event-card__inner{gap:20px;padding:0 36px 38px} .event-card__details{gap:14px} .event-card__icon{width:26px;height:26px;margin-top:2px} /* Site-wide breathing-space tighten (phones): the desktop-scale paddings read airy at 390px */ @media (max-width:1023px){ .event-card__inner{padding:0 20px 26px;gap:16px} .event-card__text{gap:14px} .event-card__details{gap:10px} .event-card__detail-text{font-size:18px;line-height:26px} .event-card__icon{width:24px;height:24px;margin-top:1px} .event-intro{padding:36px 24px 22px} .news-intro{padding:36px 24px 22px} .news-list__inner{gap:32px} .sponsors-band{padding:38px 24px} .info__content{padding:44px 22px 28px} .event-filters{padding:0 20px 40px} .recipe-article--nobanner{padding-top:28px} .funder-row--first{padding-top:18px} } /* Anchored plan sections land clear of the header */ #things-to-do,#places-to-eat,#places-to-stay,#getting-here{scroll-margin-top:92px} /* About: styled festival photo on an offset yellow block (replaces the presenters cutout, which moved to the home info box). Shown on mobile too (unlike the old cutout). */ .about-photo-styled{display:flex;align-items:center;justify-content:flex-end} .about-photo-styled__block{position:absolute;left:2%;top:16%;width:52%;height:68%;background:var(--sk-yellow)} .about-photo-styled__img{position:relative;width:82%;max-height:76%;object-fit:cover;box-shadow:0 10px 34px rgba(0,0,0,.16)} @media (max-width:1023px){ .about-info__firefly.about-photo-styled{display:flex;width:100%;height:auto;margin-top:18px;padding:0 8px} .about-photo-styled__block{top:10%;height:80%} .about-photo-styled__img{width:86%;max-height:none} } /* Home info box: the presenters image is a transparent cutout — contain, never crop */ .info__image img{object-fit:contain} /* Mobile header logo: the compact horizontal "collapsed" logo (as on the live site); the big badge stays desktop-only */ .site-nav__logo-img--mobile{display:none} @media (max-width:1023px){ /* The brand grows to fill the space up to BOOK NOW; the collapsed logo sits at its TRUE aspect (342.92/100.42 — overriding the old badge 246/206 rule that was squashing it), full header height, stretching across toward the button without any skew. */ /* Top bar like the live site: pink collapsed logo FULL-BLEED (flush left/top/bottom, fills the bar) + a pink MENU stack on the right. Book Now leaves the bar (it's in the hero + drawer). */ .site-nav__inner{align-items:center;gap:8px;padding:0!important;flex-wrap:nowrap!important;justify-content:flex-start!important} .site-nav__brand{order:1;flex:0 0 auto!important;min-width:0;width:auto!important;max-width:none!important;height:auto;padding:0;margin-right:0;display:flex;align-items:center} .site-nav__cta-wrap{display:none!important} .sk-burger{order:3;flex:0 0 auto;margin-left:auto!important;margin-right:16px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:auto!important;height:auto!important;background:none!important;border:0;padding:6px} .sk-burger::before{content:"MENU";font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:17px;line-height:1;letter-spacing:.06em;color:var(--sk-pink)} .sk-burger span{display:block;width:34px;height:4px;border-radius:2px;background:var(--sk-pink)!important;margin:0!important;transform:none!important;position:static!important} .site-nav__logo{flex:0 0 auto!important;width:auto!important;max-width:none!important;height:auto;aspect-ratio:auto;display:block} .site-nav__logo img.site-nav__logo-img--desktop{display:none!important} /* explicit px width (not 100%, which resolves against the collapsed parent) so it fills toward BOOK NOW at TRUE aspect; the parents shrink-wrap it. min() keeps a safe gap before the button on small phones. */ .site-nav__logo img.site-nav__logo-img--mobile{display:block!important;position:static!important;inset:auto!important;width:min(272px,70vw)!important;height:auto!important;aspect-ratio:342.92/100.42!important;object-fit:contain;object-position:left center;max-width:none!important} /* drawer head: horizontal logo, natural aspect */ .sk-menu-head__logo{width:180px!important;height:auto!important;aspect-ratio:342.92/100.42!important} } @media (min-width:1024px){ .site-nav__logo img.site-nav__logo-img--mobile{display:none!important} } /* "Search by event type" dropdown (SPF-style pill select) */ .event-filters__row--type{justify-content:center} .event-type-wrap{position:relative;display:inline-flex;align-items:center} .event-type-select{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;background:var(--sk-yellow);color:var(--sk-black);font-family:var(--sk-os-bold);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;padding:15px 52px 15px 26px;border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,.14)} .event-type-select:focus-visible{outline:3px solid #fff;outline-offset:2px} .event-type-wrap__chevron{position:absolute;right:20px;width:20px;height:20px;color:var(--sk-black);pointer-events:none} @media (max-width:1023px){ .event-type-select{width:100%;font-size:15px;padding:14px 48px 14px 20px} .event-type-wrap{width:100%} } /* ============ Festival map + index (shared partial: plan + contact, above the footer) ============ */ .festival-map{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;background:var(--sk-cream);padding:56px var(--sk-gutter) 72px;position:relative} .festival-map__heading{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:40px;line-height:1.15;color:var(--sk-black);text-transform:uppercase} .festival-map__link{display:block;position:relative;width:min(720px,100%);aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#efede6;cursor:zoom-in;box-shadow:0 4px 18px rgba(0,0,0,.10)} .festival-map__img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140%;height:140%;max-width:none;object-fit:cover} /* zooms past the diagonal transparent corners so the tile reads as a clean square */ .festival-map__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--sk-black);color:#fff;font-family:var(--sk-os-bold);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:8px 16px;border-radius:100px;white-space:nowrap} .festival-map__index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;list-style:none;margin:0;padding:0;width:min(920px,100%)} .festival-map__key{display:flex;align-items:center;gap:10px} .festival-map__num{display:flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:50%;background:var(--sk-pink);color:#fff;font-family:var(--sk-oswald);font-weight:700;font-size:15px;padding:0 7px;flex-shrink:0} .festival-map__label{font-family:var(--sk-os-reg);font-size:17px;line-height:1.35;color:var(--sk-black)} @media (max-width:1023px){ .festival-map{padding:36px 24px 44px;gap:16px} .festival-map__heading{font-size:30px} .festival-map__index{grid-template-columns:1fr 1fr;gap:8px 14px} .festival-map__label{font-size:15px} } /* plan intro is text-only now (map moved above the footer) */ .visit-intro__row{justify-content:center} .visit-intro__text{max-width:980px} /* ============ Bee + grass sprig accents (brand motifs) ============ */ .event-intro__head,.news-intro__head,.about-photo-styled{position:relative} .news-intro__head::after,.event-intro__head::after{content:"";position:absolute;top:-4px;right:-6px;width:54px;height:36px;background:url(../images/savour/sprig-bee.svg) no-repeat center/contain;pointer-events:none} .festival-map::before{content:"";position:absolute;top:18px;right:8%;width:56px;height:37px;background:url(../images/savour/sprig-bee.svg) no-repeat center/contain;pointer-events:none} .about-photo-styled__block::after{content:"";position:absolute;left:10px;top:-46px;width:96px;height:56px;background:url(../images/savour/footer-sprig.svg) no-repeat center/contain;pointer-events:none} @media (max-width:1023px){ .news-intro__head::after,.event-intro__head::after{width:42px;height:28px;right:0;top:-12px} .festival-map::before{right:20px;top:10px;width:44px;height:29px} } /* ============ News page gallery (editable + toggleable) ============ */ .news-gallery{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;background:var(--sk-cream);padding:20px var(--sk-gutter) 72px} .news-gallery__title{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:40px;line-height:1.15;color:var(--sk-black);text-transform:uppercase} .news-gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(1500px,100%)} .news-gallery__item{display:block;position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden} .news-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .news-gallery__item:hover img{transform:scale(1.04)} @media (max-width:1023px){ .news-gallery{padding:8px 24px 44px;gap:16px} .news-gallery__title{font-size:30px} .news-gallery__grid{grid-template-columns:1fr 1fr;gap:10px} } /* ============ Market application form ============ */ .market-apply{display:flex;justify-content:center;width:100%;background:var(--sk-cream);padding:70px var(--sk-gutter) 90px} .market-apply__inner{display:flex;flex-direction:column;gap:30px;width:100%;max-width:960px} .market-apply__intro{font-family:var(--sk-os-reg);font-size:19px;line-height:1.55;color:var(--sk-black)} .market-apply__intro p{margin:0 0 14px} .market-form{background:#fff;border-radius:20px;padding:38px 36px;box-shadow:0 3px 16px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:16px} .market-form__section{margin:18px 0 2px;font-family:var(--sk-oswald);font-weight:700;font-size:24px;line-height:1.2;color:var(--sk-pink);text-transform:uppercase;border-bottom:2px solid #f0eee8;padding-bottom:8px} .market-form__section:first-of-type{margin-top:0} .market-form__prev{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px} .market-form__selectwrap{position:relative;display:block} .market-form__select{width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 49%,var(--sk-black) 50%),linear-gradient(135deg,var(--sk-black) 50%,transparent 51%);background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:7px 7px;background-repeat:no-repeat;padding-right:44px} .market-form__file{display:block;width:100%;font-family:var(--sk-os-reg);font-size:15px;padding:10px 0} .market-form__file::file-selector-button{background:var(--sk-yellow);border:0;border-radius:100px;padding:10px 18px;margin-right:12px;font-family:var(--sk-os-bold);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;color:var(--sk-black)} .market-form small{font-weight:400;text-transform:none;opacity:.75} @media (max-width:1023px){ .market-apply{padding:36px 24px 50px} .market-form{padding:24px 18px;gap:12px} .market-form__prev{grid-template-columns:1fr} .market-form__section{font-size:20px} } /* ============ Past Festivals brochure archive ============ */ .past-festivals{display:flex;justify-content:center;width:100%;background:var(--sk-cream);padding:70px var(--sk-gutter) 90px} .past-festivals__inner{display:flex;flex-direction:column;gap:30px;width:100%;max-width:1200px} .past-festivals__intro{font-family:var(--sk-os-reg);font-size:19px;line-height:1.55;color:var(--sk-black);text-align:center} .past-festivals__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0} .past-festivals__card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid #e9e7e2;border-radius:16px;padding:26px 16px;text-decoration:none;box-shadow:0 1px 5px rgba(0,0,0,.05);transition:transform .15s ease,box-shadow .15s ease} .past-festivals__card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.12)} .past-festivals__year{font-family:var(--sk-oswald);font-weight:700;font-size:34px;color:var(--sk-pink)} .past-festivals__cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--sk-os-bold);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--sk-black)} .past-festivals__cta svg{width:16px;height:16px} @media (max-width:1023px){ .past-festivals{padding:36px 24px 50px} .past-festivals__grid{grid-template-columns:1fr 1fr;gap:12px} .past-festivals__year{font-size:28px} } /* ============ Event details (SPF-style polish) ============ */ /* Meta row → uniform white tile cards (the Figma fixed inline widths are overridden) */ .event-meta__list{gap:18px;flex-wrap:wrap} .event-meta__item{width:auto!important;flex:1 1 0;min-width:220px;background:#fff;border-radius:16px;border-top:5px solid var(--sk-yellow);padding:22px 24px;box-shadow:0 2px 10px rgba(0,0,0,.07)} .event-meta__text{width:auto!important} .event-meta__label{color:var(--sk-pink);text-transform:uppercase;letter-spacing:.05em} /* Sponsors bar: full-width band with uniform logo tiles */ .event-sponsor-bar{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;background:#fff;padding:44px var(--sk-gutter) 52px;border-top:1px solid #f0eee8} .event-sponsor-bar__label{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--sk-pink)} .event-sponsor-bar__logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;width:min(1200px,100%)} .event-sponsor-bar__logo{display:flex;align-items:center;justify-content:center;width:250px;height:130px;background:#fff;border:1px solid #e9e7e2;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.05);padding:18px 22px} .event-sponsor-bar__logo img{max-width:82%;max-height:86px;width:auto;height:auto;object-fit:contain} @media (max-width:1023px){ .event-meta__list{gap:12px} .event-meta__item{min-width:100%;padding:16px 18px} .event-sponsor-bar{padding:30px 24px 36px} .event-sponsor-bar__logos{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%} .event-sponsor-bar__logo{width:100%;height:96px;padding:12px 14px} .event-sponsor-bar__logo img{max-height:64px} } /* ============ Event-card icons v3 (client 2026-07-16): inline stroke icons on a uniform 24-grid. Box height = the text line-height EXACTLY, so each icon centres on the first line of its text. ============ */ .event-card__icon{width:24px;height:30px;margin-top:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;color:var(--sk-pink)} .event-card__icon svg{width:21px;height:21px;display:block} @media (max-width:1023px){ .event-card__icon{width:22px;height:26px;margin-top:0} .event-card__icon svg{width:19px;height:19px} } /* Sponsor/funder tiles: trimmed padding → visibly bigger logos (client 2026-07-16) */ .funder-slide{padding:12px 16px} .funder-slide img{max-height:110px;max-width:88%} .logo-cell--funder,.logo-cell--sponsor{padding:12px 16px} .logo-cell--funder img,.logo-cell--sponsor img{max-height:130px;max-width:88%} .event-sponsor-bar__logo{padding:10px 14px} .event-sponsor-bar__logo img{max-height:104px;max-width:90%} @media (max-width:1023px){ .funder-slide{padding:8px 10px} .funder-slide img{max-height:80px;max-width:90%} .logo-cell--funder,.logo-cell--sponsor{padding:8px 10px} .logo-cell--funder img,.logo-cell--sponsor img{max-height:86px;max-width:90%} .event-sponsor-bar__logo{padding:8px 10px} .event-sponsor-bar__logo img{max-height:74px} } /* ============ 2026-07-16 (eve): drawer logo, flush header, newsletter photo-behind ============ */ @media (max-width:1023px){ /* Drawer logo = same size as the header logo, FLUSH left + top, sitting right on the divider line beneath (no padding hover) — mirrors the header-bar treatment. */ .sk-menu-head{padding:0!important;align-items:stretch!important} .sk-menu-head__logo{width:min(272px,70vw)!important;height:auto!important;margin:0;display:block;align-self:flex-start} .sk-menu-close{align-self:center;margin-left:auto;margin-right:10px} /* Header: the bar's height IS the logo's height (width/aspect), so the white bar always ends flush on the hero video/image — no phantom inline slack can stretch it. */ .site-nav__inner{height:calc(min(272px,70vw)/3.4149)!important;min-height:0} .site-nav__brand{padding:0!important;height:100%!important} .site-nav__logo{line-height:0;height:100%!important;width:auto!important} .site-nav__logo img.site-nav__logo-img--mobile{height:100%!important;width:auto!important} /* Newsletter: the photo-wave now extends BEHIND the eyebrow + heading (was a 40vw strip stacked above mismatched flat pinks). Taller top-anchored cover crop; the flat fill starts at the photo's own bottom-edge colour (#e04785, sampled) and ramps to brand pink over 80px — no visible seam, and the small consent text further down sits on the vivid pink for contrast. */ .news-instagram__wave{height:88vw;aspect-ratio:auto} .news-instagram__wave img{object-fit:cover;object-position:left top} .news-instagram__content{padding-top:20vw;background:linear-gradient(#0000 0 88vw,#e04785 88vw,var(--sk-pink) calc(88vw + 80px),var(--sk-pink) 100%);background-clip:border-box} .newsletter{background:transparent!important} } /* ============ 2026-07-17 client walkthrough fixes (mobile) ============ */ /* Custom "Search by Event Type" dropdown (replaces the OS-native select picker). Works at all widths. */ .sk-select{position:relative;width:100%;max-width:420px} .event-filters__row--type{justify-content:center} .sk-select__native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sk-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:var(--sk-yellow);color:var(--sk-black);font-family:var(--sk-os-bold);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;padding:15px 22px;border:0;border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,.14);cursor:pointer;transition:box-shadow .15s,transform .12s} .sk-select__trigger:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.20)} .sk-select__trigger:focus-visible{outline:3px solid #fff;outline-offset:2px} .sk-select__label{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sk-select__chev{width:20px;height:20px;flex-shrink:0;transition:transform .2s} .sk-select--open .sk-select__chev{transform:rotate(180deg)} .sk-select__panel{list-style:none;margin:8px 0 0;padding:8px;position:absolute;top:100%;left:0;right:0;z-index:60;background:#fff;border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.22);max-height:340px;overflow:auto} .sk-select__option{padding:13px 18px;border-radius:12px;font-family:var(--sk-os-bold);font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:#3a3a3a;cursor:pointer;transition:background .12s,color .12s} .sk-select__option:hover{background:var(--sk-pink);color:#fff} .sk-select__option[aria-selected="true"]{background:var(--sk-yellow);color:var(--sk-black)} /* ===== Sticky header on DESKTOP too (client 2026-07-17) — mobile already sticks below. ===== The desktop nav = a 105px white bar (menu + Book Now) with the OPAQUE pink badge overhanging it, so locking the whole nav reads cleanly (badge floats on its own solid fill over scrolled content). Fixed positioning is unaffected by the .sk-page `zoom` (zoom is not a transform, so no containing block is created); the scale still applies to the nav's own coordinates. */ @media (min-width:1024px){ .site-nav,.page-hero__nav{position:fixed!important;top:0;left:0;width:100%;z-index:1000} .page-hero__header{z-index:1000} .page-hero,.page-hero--nobanner{z-index:1000} } @media (max-width:1023px){ /* 1 — Sticky top bar: the nav already overlays the hero (opaque white), so fixing it to the viewport just keeps it stuck on scroll. Drawer is position:fixed already, unaffected. Two nav roots: home renders `.site-nav`; inner pages render `.page-hero__nav` (the passed class REPLACES site-nav) sitting in a `.page-hero__header` flow block that reserves its space — shrink that block to the bar height so the fixed bar leaves no gap above the banner/content. */ .site-nav,.page-hero__nav{position:fixed!important;top:0;left:0;width:100%;z-index:1000;background:#fff} .page-hero__header{height:calc(min(272px,70vw)/3.4149);z-index:1000} /* The inner-page nav lives inside .page-hero, whose isolation:isolate traps its fixed child's z-order — later sections paint over it. Raise the whole hero's stacking context above siblings so the fixed bar actually shows on scroll. (Banner sits at the top, so this never hides content.) */ .page-hero,.page-hero--nobanner{z-index:1000} /* 2 — Events page (no banner): kill the ~110px of empty space above "Our Events". The nobanner header still reserves the bar height above, so the intro only needs a small top gap. */ .page-hero--nobanner + .event-intro{padding-top:16px} .event-intro{padding:16px 24px 18px} /* 3 — Filter day pills: were 50px tall / 18px caps and staggered one-per-row. Smaller pills that pack into tidy rows, centred. */ .event-filters__row{gap:8px;justify-content:center} .event-pill{height:auto;min-height:0;padding:9px 16px} .event-pill__label{font-size:14px;line-height:18px} .event-filters__panel{padding:18px 16px;gap:12px} /* 5 — Paragraph spacing: 24–26px between paragraphs read as "loads of space" on a phone. Tighten. */ .event-intro__body{gap:12px} .info__body{gap:12px} .about-rte p + p{margin-top:12px} /* 6 — Info / About CTA buttons: fixed 340px width + nowrap labels shot past the yellow box on long labels ("Market Applications 2026"). Full-width of the box, wrapping labels, smaller face. */ .info-btn,.about-btn{width:100%!important;max-width:420px} .info-btn__pill,.about-btn__face{padding:15px 22px} .hp-pill-label,.about-btn__label{white-space:normal!important;font-size:16px;line-height:20px;text-align:center} .info__buttons,.about-info{gap:14px} } /* ============ WAVE 11 (Clank batch 2026-07-21) — Helena's Basecamp feedback round ============ */ /* Brand pinks are swapped at the tokens (top of file): --sk-pink is now the print pink #ef509d, * with --sk-pink-2 (#ed6993) and --sk-pink-3 (#fc63c3) as the client's secondary pinks. */ /* 11.1 Mobile: float the header in on scroll (flagged: "menu isn't sticky"). savour.js * initStickyNav toggles .sk-nav-fixed once you scroll past the bar; fixed only <1024px where * the desktop zoom-canvas is off, so position:fixed behaves. */ @media (max-width:1023px){ .site-nav.sk-nav-fixed{position:fixed;top:0;left:0;right:0;z-index:950;background:var(--sk-white);box-shadow:0 2px 14px rgba(0,0,0,.12)} } /* 11.2 Phones: paragraph rhythm tighter (client: "still loads of space between paragraphs"). * The 26px desktop flex-gaps read airy at 390px. */ @media (max-width:1023px){ .stories__body{gap:14px} .event-intro__body{gap:14px} } /* 11.3 ≤374px: the countdown labels wrapped mid-word (MINUTE-S / SECON-DS) on small phones */ @media (max-width:374px){ .countdown__group{gap:10px} .countdown__word{font-size:12px;line-height:20px} .countdown__num,.countdown__colon{font-size:34px} } /* 11.4 Info block: festival market photo between heading and body (client 2026-07-21) */ .info__banner{width:100%} .info__banner img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover;border-radius:24px} /* 11.5 Info buttons: secondary-pink pill (Brochure Coming Soon) */ .info-btn__pill--pink2{background:var(--sk-pink-2)} .info-btn__pill--pink2 .hp-pill-label{color:var(--sk-white)} /* 11.6 Desktop hero, per the board's preferred version (Helena, Basecamp 2026-07-21): the * paint-box, side swoosh and 20th badge come OFF until the new anniversary logo lands; the * wordmark goes brand pink; badge text now "CELEBRATING 20 YEARS" (ACF option). The text sits * straight on the video, so soft shadows carry the legibility the white box used to provide. */ .hero-brush{display:none} .hero-datebadge{display:none} .hero-title__text{color:var(--sk-pink)} .hero-title__line{text-shadow:0 2px 18px rgba(0,0,0,.35)} .hero-dates{color:var(--sk-white);text-shadow:0 2px 12px rgba(0,0,0,.45)} /* 11.7 Mobile: more video on the screen (hero was min-height 480) */ @media(max-width:1023px){ .hero__img{min-height:620px} } /* 11.8 Mobile: "Explore Our Events" reads as ONE element with the event cards — the intro * loses its own card box (pink-on-pink) and the rhythm tightens; the About Us pill goes * brand pink (client: "About Us in Pink"); arrows sit closer to the next section. */ @media(max-width:1023px){ .gallery__intro{background:transparent;border-radius:0;padding:6px 0 0} .gallery__events{gap:14px;padding:16px 24px 44px} .contact-band{padding:16px 24px 20px} .story-cta__pill{background:var(--sk-pink)} } /* 11.6b The yellow outline frame (hero-food graphic) is part of the old box composition — off * with the box. The two spark icons hugged the shorter "SAVE THE DATE"; they collide with * "CELEBRATING 20 YEARS", so they go too. */ .hero-food{visibility:hidden} /* keeps its grid footprint - display:none collapsed the canvas and the CTAs rode up */ .hero-badge__icon{display:none} /* ============ SPONSORS 2026 (agent batch 2026-07-21) ============ */ /* The client's restructured 2026 sponsorship (Helena, Basecamp): canonical org lists live in * template-parts/sponsors-2026-data.php. This block styles (a) the text tile fallback for orgs * with no logo file, (b) the sponsor page feature photo + tighter/larger 2026 grids, and (c) the * slim funders+sponsors strip above the footer on inner pages. */ /* --- (a) Text tile: org name as a quiet logo-substitute (Oswald bold, charcoal on white) --- */ .s26-text{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--sk-white);padding:10px 14px;font-family:var(--sk-oswald);font-weight:700;font-size:22px;line-height:1.25;color:var(--sk-black);text-align:center;text-transform:uppercase} /* --- (b) Sponsor page (scoped under .sponsor26 so nothing else moves) --- */ /* Less white space overall: the band's 100px stack gap + the grids' 60px gap come down. */ .sponsor26{gap:48px;padding-top:64px;padding-bottom:72px} .sponsor26 .sponsor-intro{gap:24px} .sponsor26 .logo-grids{gap:40px} /* Feature photo (Avonmore/Tirlán stand) - full width, framed like the logo grids. */ .sponsor-feature{width:100%;margin:0;position:relative} .sponsor-feature img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;object-position:center 32%;border:.5px solid var(--sk-black)} /* Larger logos: trim the cells' dead padding and let images fill more of each tile. */ .sponsor26 .logo-grid__body{padding:32px 12px;gap:16px} .sponsor26 .logo-grid__inner{gap:16px} .sponsor26 .logo-cell--funder{padding:12px 16px} .sponsor26 .logo-cell--funder img{max-width:100%;max-height:100%} .sponsor26 .logo-cell--sponsor{height:175px} .sponsor26 .logo-cell--sponsor img{max-width:94%;max-height:90%} /* Partners list: tighter, still airy enough to scan. */ .sponsor26 .partners{padding:40px 28px;gap:20px 64px} .sponsor26 .partners__col p{line-height:40px} @media (max-width:767px){ .sponsor26{gap:32px;padding-top:40px;padding-bottom:48px} .sponsor26 .logo-grids{gap:30px} .sponsor26 .logo-grid__body{padding:20px 10px;gap:12px} .sponsor26 .logo-grid__inner{gap:12px} .sponsor26 .logo-cell--funder{padding:8px 12px} .sponsor26 .logo-cell--sponsor{height:auto;aspect-ratio:270/165} .sponsor26 .partners{padding:24px 14px} .sponsor26 .partners__col p{line-height:32px;font-size:17px} .sponsor-feature img{max-height:300px} .s26-text{font-size:16px;padding:6px 8px} } /* --- (c) Slim sponsors strip above the footer (inner pages; front page has the big band) --- */ /* Quiet by design: white strip on the cream footer, small linked logos, wraps cleanly on mobile. * margin-top cancels .site-footer's 56px padding-top so the strip sits flush at the footer's top. */ .footer-sponsors{width:100%;margin-top:-56px;margin-bottom:8px;background:var(--sk-white);border-bottom:.5px solid rgba(61,57,53,.14);padding:22px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:16px} .footer-sponsors__label{margin:0;font-family:var(--sk-oswald);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--sk-black);text-transform:uppercase} .footer-sponsors__logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;max-width:1240px} .footer-sponsors__logo{display:flex;align-items:center;justify-content:center;height:52px;max-width:120px;flex-shrink:0} .footer-sponsors__logo img{display:block;max-height:52px;max-width:120px;width:auto;height:auto;object-fit:contain} .footer-sponsors__logo .s26-text{font-size:13px;line-height:1.2;padding:4px 6px;height:auto;background:transparent} @media (max-width:600px){ .footer-sponsors{padding:18px 14px 20px;gap:12px} .footer-sponsors__logos{gap:10px 18px} .footer-sponsors__logo{height:40px;max-width:92px} .footer-sponsors__logo img{max-height:40px;max-width:92px} } /* ============ /SPONSORS 2026 ============ */