/*!*************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***! \*************************************************************************************************************************************************************************************************************************************************************/ /* ════════════════════════════════════════════════════════════════ JOZIKIDS REDESIGN PROTOTYPE — SHARED DESIGN SYSTEM "Warm editorial" language (April 2026 deck) Fraunces (display serif) + Karla (UI sans) · KidsCompass colours ════════════════════════════════════════════════════════════════ */ :root{ /* v2.3 — KidsCompass brand skin (colours only; layout untouched) */ --paper:#F5F6FA; --paper-2:#FFFFFF; --paper-3:#ECEDF3; --ink:#1A1A2E; --ink-2:#555566; --ink-3:#9999AA; --charcoal:#0F1F3D; --clay:#22A85A; --clay-deep:#1B8A49; --clay-l:#E6F9EE; --green:#22A85A; --green-bright:#2ECC71; --green-dark:#22A85A; --green-l:#E6F9EE; --wa:#25D366; --coral:#FF6058; --coral-l:#FFF5F5; --gold:#F5A623; --gold-l:#FFF8EF; --blue:#5C63C0; --blue-l:#EEEEFF; --line:#EAEAF2; --line-dark:rgba(255,255,255,.12); --shadow-s:0 1px 3px rgba(15,31,61,.06); --shadow-m:0 10px 30px rgba(15,31,61,.10); --shadow-l:0 18px 50px rgba(15,31,61,.16); --r-s:10px; --r-m:14px; --r-l:20px; --serif:'Fraunces',Georgia,serif; --sans:'Karla',-apple-system,sans-serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;color:inherit} .wrap{max-width:1240px;margin:0 auto;padding:0 24px} .eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)} .serif{font-family:var(--serif)} /* ─── Buttons ─── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;font-family:var(--sans);font-weight:800;font-size:14px;padding:11px 22px;transition:all .16s;white-space:nowrap} .btn-green{background:var(--green-bright);color:#fff;box-shadow:0 4px 14px rgba(46,204,113,.3)} .btn-green:hover{background:var(--green-dark);transform:translateY(-1px)} .btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.3)} .btn-wa:hover{filter:brightness(.94);transform:translateY(-1px)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:#000;transform:translateY(-1px)} .btn-clay{background:var(--clay);color:#fff;box-shadow:0 4px 14px rgba(34,168,90,.25)} .btn-clay:hover{background:var(--clay-deep);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--ink)} .btn-sm{font-size:13px;padding:8px 16px} .btn-lg{font-size:15px;padding:14px 28px} .btn-block{width:100%} /* ─── Pills / badges ─── */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:999px} .pill-green{background:var(--green-l);color:var(--green)} .pill-gold{background:var(--gold-l);color:var(--gold)} .pill-coral{background:var(--coral-l);color:var(--coral)} .pill-clay{background:var(--clay-l);color:var(--clay-deep)} .pill-blue{background:var(--blue-l);color:var(--blue)} .pill-paper{background:var(--paper-3);color:var(--ink-2)} /* type badges — the bookable / directory distinction */ .tbadge{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1.5px solid} .tbadge-class{color:var(--green);border-color:#B8E8CE;background:var(--green-l)} .tbadge-camp{color:#C77F00;border-color:#F5D9A8;background:var(--gold-l)} .tbadge-party{color:#7E57C2;border-color:#D9CCF0;background:#F5F0FF} .tbadge-place{color:var(--blue);border-color:#C9CCF0;background:var(--blue-l)} .tbadge-event{color:var(--coral);border-color:#FFD0CC;background:var(--coral-l)} .tbadge-school{color:var(--ink-2);border-color:#DBDDE8;background:var(--paper-3)} .tbadge-product{color:#8E5A00;border-color:#F0D9A8;background:#FFF8EC} .tbadge-service{color:#0E7C7B;border-color:#B7E3E2;background:#EAF8F8} /* Additive capability chips on result tiles (v19) — see components/ResultTile.tsx */ .card-can{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .card-can span{font-size:10px;font-weight:800;letter-spacing:.03em;padding:3px 7px;border-radius:5px;background:var(--green-l);color:var(--green);border:1px solid #D6F2E2} .card-can .more{background:var(--paper-3);color:var(--ink-3);border-color:var(--line)} .tile-can{margin:8px 0 2px} /* "What you can do here" chips (v19) — see components/ListingCanDo.tsx */ .cando-label{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-top:12px} .cando{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2)} .chip.on{border-color:#B8E8CE;background:var(--green-l);color:var(--green)} /* Provider website + social (v19) — see components/ListingBizLinks.tsx */ .biz-links{border-top:1px solid var(--line);padding:13px 22px 15px;background:var(--paper)} .bl-label{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px} .bl-web{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--paper-2);font-size:13px;font-weight:800;color:var(--ink-2);margin-bottom:8px;transition:all .14s} .bl-web:hover{border-color:var(--clay);color:var(--clay);transform:translateY(-1px)} .bl-web .go{margin-left:auto;color:var(--ink-3)} .bs-row{display:flex;gap:8px;flex-wrap:wrap} .bs-row a{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);font-size:12px;font-weight:800;color:var(--ink-2);transition:all .14s} .bs-row a:hover{transform:translateY(-1px);box-shadow:var(--shadow-s)} /* Subcategory page furniture (v19) — see components/SubcatFurniture.tsx */ .subcat-intro{max-width:900px;margin:0;padding:2px 0 22px;color:var(--ink-2);font-size:14.5px} .subcat-jump{padding:0 0 22px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .sj-label{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);flex-shrink:0} .sj-links{display:flex;flex-wrap:wrap;gap:6px} .sj-links a{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);transition:all .14s} .sj-links a:hover{border-color:var(--clay);color:var(--clay)} .subcat-foot{border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper-2);padding:18px 22px} .subcat-foot a{color:var(--clay);font-weight:700} @media(max-width:560px){.subcat-jump{padding:0 0 18px}} /* "Browse by type" subcategory band (v19) — see components/SubcatBand.tsx */ .subcat-band{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:0 0 20px} .sb-label{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);flex-shrink:0} .sb-links{display:flex;flex-wrap:wrap;gap:7px} .sb-links a{font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper-2);color:var(--ink-2);transition:all .14s} .sb-links a:hover{border-color:var(--clay);color:var(--clay);transform:translateY(-1px)} @media(max-width:560px){.subcat-band{padding:0 0 16px}} /* Calendar destination band (v19) — see components/CalDestinations.tsx */ .cal-products{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px;padding:0 0 22px} .cprod{display:block;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper-2);padding:15px 17px;transition:all .16s} .cprod:hover{border-color:var(--clay);transform:translateY(-2px);box-shadow:var(--shadow-s)} .cprod.on{border-color:var(--clay);background:var(--paper-3)} .cp-ic{font-size:22px;display:block;margin-bottom:7px} .cprod b{display:block;font-family:var(--serif);font-size:15.5px;font-weight:700} .cprod span:last-child{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px} @media(max-width:900px){.cal-products{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cal-products{grid-template-columns:1fr;padding:0 0 18px}} /* ─── Top utility bar ─── */ .topbar{background:var(--charcoal);color:rgba(255,255,255,.75);font-size:12px;font-weight:600} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px} .topbar a:hover{color:#fff} .topbar-links{display:flex;gap:18px} /* ─── Header ─── */ .header{position:-webkit-sticky;position:sticky;top:0;z-index:400;background:rgba(245,246,250,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .header-inner{display:flex;align-items:center;gap:18px;height:66px} .logo{font-family:var(--serif);font-weight:700;font-size:25px;letter-spacing:-.02em;flex-shrink:0} .logo em{font-style:normal;color:var(--green)} .h-search{flex:1 1;max-width:440px;display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;overflow:hidden} .h-search:focus-within{border-color:var(--ink)} .h-search input{flex:1 1;border:none;outline:none;background:none;padding:0 16px;font-family:inherit;font-size:14px;height:42px;min-width:0} .h-search .go{background:var(--ink);color:#fff;border:none;height:42px;padding:0 16px;font-weight:800;font-size:13px} .h-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0} .h-burger{display:none} /* main nav row */ .mainnav{border-bottom:1px solid var(--line);background:var(--paper-2)} .mainnav-inner{display:flex;align-items:center;gap:2px;height:48px;overflow-x:auto;scrollbar-width:none} .mainnav-inner::-webkit-scrollbar{display:none} .mn-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink-2);padding:8px 14px;border-radius:999px;white-space:nowrap;transition:all .14s;flex-shrink:0} .mn-link:hover{background:var(--paper-3);color:var(--ink)} .mn-link.on{background:var(--ink);color:#fff} .mn-spacer{margin-left:auto} .mn-cta{color:var(--clay);font-weight:800} /* ─── Page hero (compact, category pages) ─── */ .page-hero{padding:30px 0 20px} .page-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.015em;margin-top:8px} .page-hero h1 em{font-style:italic;color:var(--clay);font-weight:600} .page-hero .sub{font-size:15px;color:var(--ink-2);margin-top:8px;max-width:60ch} .crumbs{padding:18px 0 0;font-size:12.5px;font-weight:600;color:var(--ink-3)} .crumbs a:hover{color:var(--clay)} .crumbs b{color:var(--ink)} /* ════════════════════════════════════════════════════════ FILTER BAR — ActivityHero/Sawyer pattern ════════════════════════════════════════════════════════ */ .filterbar{position:-webkit-sticky;position:sticky;top:66px;z-index:350;background:rgba(245,246,250,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 0 10px} .fb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fchip{position:relative;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--ink);transition:all .14s;white-space:nowrap} .fchip:hover{border-color:var(--ink)} .fchip .car{font-size:9px;opacity:.5} .fchip.active{border-color:var(--ink);background:var(--ink);color:#fff} .fchip.active .car{opacity:.8} .fchip .cnt{background:var(--clay);color:#fff;font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px} .fb-clear{font-size:13px;font-weight:800;color:var(--clay);background:none;border:none;padding:9px 6px} .fb-clear:hover{text-decoration:underline} /* dropdown panels */ .fpanel{position:absolute;top:calc(100% + 8px);left:0;z-index:360;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);padding:18px;min-width:280px;display:none} .fpanel.open{display:block} .fpanel.wide{min-width:520px} .fp-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:4px 24px;gap:4px 24px} .fp-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px} .fp-check{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none} .fp-check:hover{background:var(--paper)} .fp-check input{width:17px;height:17px;accent-color:var(--green);flex-shrink:0} .fp-check .n{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:700} .fp-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:14px;padding-top:12px} .fp-clear{background:none;border:none;font-size:13px;font-weight:800;color:var(--ink-3)} .fp-clear:hover{color:var(--ink)} /* active filter pills row */ .fb-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px} .apill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;padding:6px 8px 6px 14px;border-radius:999px} .apill button{background:rgba(255,255,255,.18);border:none;color:#fff;width:18px;height:18px;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center} .apill button:hover{background:rgba(255,255,255,.35)} /* results header */ .res-head{display:flex;align-items:center;gap:14px;padding:18px 0 14px;flex-wrap:wrap} .res-count{font-family:var(--serif);font-weight:700;font-size:20px} .res-count em{font-style:italic;color:var(--clay);font-weight:600} .res-sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2)} .res-sort select{font-family:inherit;font-size:13px;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;background:#fff;outline:none;color:var(--ink)} /* ════════════════════════════════════════════════════════ RESULT TILES — Sawyer horizontal pattern name · provider · type · time · dates · ages · rating · price ════════════════════════════════════════════════════════ */ .tiles{display:flex;flex-direction:column;gap:14px;padding-bottom:10px} .tile{display:grid;grid-template-columns:220px 1fr;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:transform .16s,box-shadow .16s;position:relative} .tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)} .tile-img{position:relative;min-height:170px;display:flex;align-items:center;justify-content:center;font-size:52px} .tile-fav{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:none;font-size:15px;display:flex;align-items:center;justify-content:center;transition:transform .15s} .tile-fav:hover{transform:scale(1.12)} .tile-promo{position:absolute;bottom:10px;left:10px} .tile-body{padding:16px 20px 14px;display:flex;flex-direction:column;min-width:0} .tile-top{display:flex;align-items:flex-start;gap:14px} .tile-provider{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em} .tile-provider .vf{color:var(--green)} .tile-name{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.15;margin-top:3px} .tile-name a:hover{color:var(--clay)} .tile-price{margin-left:auto;text-align:right;flex-shrink:0} .tile-price b{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)} .tile-price span{display:block;font-size:11px;font-weight:700;color:var(--ink-3)} .tile-rating{font-size:12.5px;font-weight:800;color:var(--gold);margin-top:5px} .tile-rating .muted{color:var(--ink-3);font-weight:600} .tile-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ink-2)} .tile-meta .ico{opacity:.65;margin-right:5px} .tile-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;flex-wrap:wrap} .tile-foot .sp{margin-left:auto;display:flex;gap:8px} .tile-note{font-size:12px;font-weight:700;color:var(--coral)} .dategroup{font-family:var(--serif);font-weight:700;font-size:18px;padding:22px 0 4px;color:var(--ink)} .dategroup em{font-style:italic;color:var(--clay);font-weight:600} .empty-state{text-align:center;padding:60px 20px;color:var(--ink-2)} .empty-state .big{font-size:44px;margin-bottom:12px} .empty-state h3{font-family:var(--serif);font-size:22px;margin-bottom:6px} /* ─── Cards (home rows, small) ─── */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:18px;gap:18px} .card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:transform .16s,box-shadow .16s} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)} .card-img{height:150px;display:flex;align-items:center;justify-content:center;font-size:46px;position:relative} .card-body{padding:14px 16px 16px} .card-tag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-bottom:5px} .card-name{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.2;margin-bottom:4px} .card-meta{font-size:12.5px;font-weight:600;color:var(--ink-3)} /* ─── Section scaffolding ─── */ .section{padding:44px 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px} .sec-head h2{font-family:var(--serif);font-weight:700;font-size:29px;letter-spacing:-.015em} .sec-head h2 em{font-style:italic;color:var(--clay);font-weight:600} .sec-head p{font-size:13px;color:var(--ink-3);margin-top:4px} .sec-link{font-size:13px;font-weight:800;color:var(--green);white-space:nowrap} .sec-link:hover{color:var(--green-dark)} /* ─── Category grid (home) ─── */ .catgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:14px;gap:14px} .catcard{display:flex;align-items:center;gap:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;transition:all .16s} .catcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:var(--clay)} .catcard .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0} .catcard b{display:block;font-family:var(--serif);font-size:16px;font-weight:700} .catcard span{font-size:12px;color:var(--ink-3);font-weight:600} /* ─── Home hero ─── */ .hero{background:linear-gradient(165deg,#E6F9EE 0%,#F5F6FA 70%);border-bottom:1px solid var(--line);padding:64px 0 52px;text-align:center} .hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(36px,5.4vw,60px);line-height:1.05;letter-spacing:-.02em;max-width:760px;margin:14px auto 0} .hero h1 em{font-style:italic;color:var(--clay);font-weight:600} .hero .sub{font-size:16px;color:var(--ink-2);max-width:56ch;margin:16px auto 26px;line-height:1.65} .hero-search{max-width:640px;margin:0 auto;display:flex;background:#fff;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;box-shadow:var(--shadow-m)} .hero-search input{flex:1 1;border:none;outline:none;padding:0 22px;font-family:inherit;font-size:15px;height:56px;min-width:0} .hero-search .go{background:var(--green-bright);color:#fff;border:none;padding:0 28px;font-weight:800;font-size:15px} .hero-search .go:hover{background:var(--green-dark)} .hero-stats{display:flex;gap:34px;justify-content:center;margin-top:30px;flex-wrap:wrap} .hstat b{display:block;font-family:var(--serif);font-size:24px;font-weight:700} .hstat span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} /* ─── Listing detail ─── */ .title-block{padding:14px 0 22px} .badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} h1.l-title{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4vw,44px);letter-spacing:-.015em;line-height:1.08} .l-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink-2)} .l-sub .stars{color:var(--gold);font-weight:800} .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:180px 180px;grid-gap:10px;gap:10px;border-radius:var(--r-l);overflow:hidden} .g-item{position:relative;display:flex;align-items:center;justify-content:center;font-size:52px;cursor:pointer} .g-item:hover{filter:brightness(1.05)} .g-main{grid-row:span 2;font-size:80px} .g-count{position:absolute;bottom:12px;right:12px;background:rgba(15,31,61,.75);color:#fff;font-size:12px;font-weight:800;padding:6px 14px;border-radius:999px} .body-grid{display:grid;grid-template-columns:1fr 380px;grid-gap:44px;gap:44px;padding:32px 0 0;align-items:start} .main-col{min-width:0} .side-col{position:-webkit-sticky;position:sticky;top:86px} .l-section{padding:24px 0;border-bottom:1px solid var(--line)} .l-section h2{font-family:var(--serif);font-weight:700;font-size:23px;margin-bottom:14px} .l-section h2 em{font-style:italic;color:var(--clay);font-weight:600} .l-section p{font-size:15px;color:var(--ink-2);line-height:1.75} .feat-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .feat{display:inline-flex;align-items:center;gap:7px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink-2)} .dl{display:grid;grid-template-columns:130px 1fr;grid-row-gap:13px;row-gap:13px;font-size:14.5px} .dl dt{font-weight:800;color:var(--ink-3);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px} .dl dd{color:var(--ink-2);font-weight:600;line-height:1.6} .dl dd a{color:var(--green);font-weight:800} .dl dd a:hover{text-decoration:underline} .map-ph{margin-top:16px;height:170px;border-radius:var(--r-m);background:linear-gradient(135deg,#D8DBE8,#C5C9DC);display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;color:var(--ink-2);cursor:pointer;border:1px solid var(--line)} /* schedule table (bookable classes) */ .sched{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden} .sched-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);font-size:13.5px;font-weight:600;color:var(--ink-2);flex-wrap:wrap} .sched-row:last-child{border-bottom:none} .sched-row b{color:var(--ink);font-weight:800;min-width:150px} .sched-row .seats{margin-left:auto;font-size:12px;font-weight:800;color:var(--green)} .sched-row .seats.low{color:var(--coral)} .sched-row .full{margin-left:auto;font-size:12px;font-weight:800;color:var(--ink-3)} /* reviews */ .rev-head{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap} .rev-score{font-family:var(--serif);font-size:42px;font-weight:700;line-height:1} .rev-stars{color:var(--gold);font-size:15px;font-weight:800} .rev-sub{font-size:13px;color:var(--ink-3);font-weight:600} .rev-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px} .rev-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px} .rev-top{display:flex;align-items:center;gap:10px;margin-bottom:8px} .rev-av{width:34px;height:34px;border-radius:50%;background:var(--paper-3);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--ink-2);flex-shrink:0} .rev-name{font-weight:800;font-size:13.5px} .rev-meta{font-size:11.5px;color:var(--ink-3);font-weight:600} .rev-txt{font-size:13.5px;color:var(--ink-2);line-height:1.65} .rev-cardstars{color:var(--gold);font-size:12px;margin-left:auto;font-weight:800} /* enquiry / booking panel */ .enq{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-m);overflow:hidden} .enq-head{padding:20px 22px 0} .enq-eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .enq-title{font-family:var(--serif);font-weight:700;font-size:20px;margin-top:4px} .enq-price{font-family:var(--serif);font-weight:700;font-size:26px;margin-top:6px} .enq-price span{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink-3)} .enq-body{padding:14px 22px 20px;display:flex;flex-direction:column;gap:9px} .enq-note{display:flex;align-items:flex-start;gap:8px;background:var(--green-l);border-radius:var(--r-s);padding:10px 12px;font-size:12px;font-weight:600;color:var(--green);line-height:1.5} .enq-note.gold{background:var(--gold-l);color:var(--gold)} .enq-alt{display:grid;grid-template-columns:1fr 1fr;grid-gap:9px;gap:9px} .enq-meta{text-align:center;font-size:11.5px;color:var(--ink-3);font-weight:600;padding-top:4px;line-height:1.7} .enq-meta a{color:var(--clay);font-weight:800} .enq-contact{border-top:1px solid var(--line);padding:14px 22px;display:flex;align-items:center;gap:12px;background:var(--paper)} .enq-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--green),#1ABC9C);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:15px;flex-shrink:0} .enq-cname{font-weight:800;font-size:13.5px} .enq-cmeta{font-size:11.5px;color:var(--ink-3);font-weight:600} .m-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:450;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;gap:10px} /* ─── Calendars page ─── */ .cal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 22px} .cal-tab{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:700;border:1.5px solid var(--line);color:var(--ink-2);background:#fff;transition:all .14s} .cal-tab.on{background:var(--ink);color:#fff;border-color:var(--ink)} .cal-tab:not(.on):hover{border-color:var(--ink);color:var(--ink)} .evrow{display:grid;grid-template-columns:86px 1fr;grid-gap:0;gap:0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:transform .14s,box-shadow .14s} .evrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)} .ev-date{background:var(--clay);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px} .ev-date b{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1} .ev-date span{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-top:3px} .ev-body{padding:13px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .ev-name{font-family:var(--serif);font-weight:700;font-size:17px} .ev-meta{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:2px} .ev-desc{font-size:13px;color:var(--ink-2);margin-top:6px;max-width:62ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .ev-cta{margin-left:auto} /* Sanitised provider copy (lib/sanitize-html). Legacy rows hard-code the old brand red as an inline style; the sanitiser strips the attribute and links pick up the design-system token here instead. */ .rich-text{white-space:pre-wrap} .rich-text a{color:var(--clay);font-weight:800;text-decoration:underline;text-underline-offset:2px} .rich-text a:hover{color:var(--clay-deep)} .term-strip{background:var(--paper-2);border-radius:var(--r-m);border:1.5px solid var(--line);margin-top:20px;padding:14px 20px;display:flex;gap:26px;align-items:center;flex-wrap:wrap} .term-label{font-size:10px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.08em} .term-item{font-size:13px;color:var(--ink-2);font-weight:600} .term-item strong{color:var(--ink)} /* ─── Pricing (advertise) ─── */ .plans{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px;align-items:stretch} .plan{background:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-l);padding:28px 26px;display:flex;flex-direction:column;position:relative} .plan.featured{border-color:var(--clay);box-shadow:var(--shadow-m)} .plan-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%)} .plan h3{font-family:var(--serif);font-size:20px;font-weight:700} .plan .price{font-family:var(--serif);font-size:40px;font-weight:700;margin:10px 0 2px} .plan .price span{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-3)} .plan ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px;flex:1 1} .plan li{font-size:13.5px;font-weight:600;color:var(--ink-2);display:flex;gap:9px} .plan li::before{content:'✓';color:var(--green);font-weight:800} .plan li.no{opacity:.4} .plan li.no::before{content:'—';color:var(--ink-3)} /* ─── Steps / how it works ─── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px} .step{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-l);padding:24px} .step .num{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--clay);font-weight:600} .step h3{font-family:var(--serif);font-size:18px;font-weight:700;margin:8px 0 6px} .step p{font-size:13.5px;color:var(--ink-2);line-height:1.65} /* ─── FAQ ─── */ .faq{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden} .faq details{border-bottom:1px solid var(--line);background:var(--paper-2)} .faq details:last-child{border-bottom:none} .faq summary{padding:16px 20px;font-weight:800;font-size:14.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .faq summary::after{content:'+';font-family:var(--serif);font-size:20px;color:var(--clay)} .faq details[open] summary::after{content:'–'} .faq .a{padding:0 20px 18px;font-size:14px;color:var(--ink-2);line-height:1.7} /* ─── Bands ─── */ .nl-band{background:var(--charcoal);border-radius:var(--r-l);padding:40px 44px;display:grid;grid-template-columns:1.2fr 1fr;grid-gap:36px;gap:36px;align-items:center;color:#fff} .nl-band .eyebrow{color:rgba(255,255,255,.5)} .nl-band h3{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1.15;margin:10px 0 10px} .nl-band p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.65} .nl-form{display:flex;gap:10px} .nl-form input{flex:1 1;min-width:0;background:rgba(255,255,255,.08);border:1.5px solid var(--line-dark);border-radius:999px;padding:12px 18px;font-family:inherit;font-size:14px;color:#fff;outline:none} .nl-form input::placeholder{color:rgba(255,255,255,.4)} .adv-band{background:linear-gradient(115deg,#0F2027 0%,#1A3A2F 55%,#0D3B2E 100%);border-radius:var(--r-l);padding:36px 42px;display:grid;grid-template-columns:1fr auto;grid-gap:28px;gap:28px;align-items:center;color:#fff} .adv-band h3{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.2} .adv-band h3 em{font-style:italic;color:#F5A623;font-weight:600} .adv-band p{font-size:13.5px;color:rgba(255,255,255,.72);margin-top:8px;max-width:52ch} .adslot{border:1px dashed var(--line);border-radius:var(--r-l);background:var(--paper-2);position:relative;overflow:hidden;margin:18px 0} .adslot-label{position:absolute;top:10px;right:14px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);z-index:2} .adband{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:24px;gap:24px;padding:24px 30px;color:#fff} .adband .eyebrow{color:rgba(255,255,255,.6)} .adband h3{font-family:var(--serif);font-size:22px;font-weight:700;margin:6px 0 4px} .adband h3 em{font-style:italic;color:#F5A623;font-weight:600} .adband p{font-size:13px;color:rgba(255,255,255,.72)} .adband .art{font-size:48px} /* ─── Footer ─── */ .footer{background:var(--charcoal);color:#fff;margin-top:56px;padding:52px 0 26px} .f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;grid-gap:36px;gap:36px;margin-bottom:40px} .f-brand{font-family:var(--serif);font-size:24px;font-weight:700} .f-brand em{font-style:normal;color:#4CC58C} .f-desc{font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.7;margin-top:10px;max-width:240px} .f-contact{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.55);line-height:2} .f-h{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px} .f-link{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:9px;transition:color .14s} .f-link:hover{color:#fff} .f-bottom{border-top:1px solid var(--line-dark);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:rgba(255,255,255,.35)} .wa-fab{position:fixed;bottom:22px;right:22px;z-index:440;width:54px;height:54px;border-radius:50%;background:var(--wa);box-shadow:0 6px 20px rgba(37,211,102,.4);display:flex;align-items:center;justify-content:center;transition:transform .16s} .wa-fab:hover{transform:scale(1.08)} .wa-fab svg{width:28px;height:28px;fill:#fff} /* ─── Prototype banner ─── */ .proto-note{background:var(--gold-l);border-bottom:1px solid #F5DFB8;color:#8A5E00;font-size:12px;font-weight:700;text-align:center;padding:7px 16px} /* ─── Filter drawer (mobile) ─── */ /* WP2.1: below 640px the bar keeps only ⚙ Filters + Category + Type (`.always`) and everything else moves into this drawer. The panels inside it are the same markup the chips render, so there is one definition of each panel. */ .drawer-toggle{display:none} .fdrawer{display:none;margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);padding:6px 16px} .fd-group{padding:14px 0;border-bottom:1px solid var(--line)} .fd-group:last-child{border-bottom:none} .fd-group .fp-foot{margin-top:10px;padding-top:10px} @media(max-width:960px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} .catgrid{grid-template-columns:repeat(2,1fr)} .plans,.steps{grid-template-columns:1fr} .body-grid{grid-template-columns:1fr} .side-col{position:static;margin-top:24px} .gallery{grid-template-columns:2fr 1fr;grid-template-rows:160px 160px} .g-item:nth-child(4),.g-item:nth-child(5){display:none} .rev-grid{grid-template-columns:1fr} .f-grid{grid-template-columns:1fr 1fr} .nl-band{grid-template-columns:1fr;padding:32px 26px} .adv-band{grid-template-columns:1fr} .fpanel.wide{min-width:300px} .fp-grid{grid-template-columns:1fr} } @media(max-width:640px){ .wrap{padding:0 16px} .topbar{display:none} .header-inner{height:58px;gap:10px} .h-search{display:none} .h-actions .hide-m{display:none} .h-burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-size:16px} .filterbar{top:58px} .grid-3,.grid-4,.catgrid{grid-template-columns:1fr} .tile{grid-template-columns:1fr} .tile-img{min-height:150px} .tile-price{text-align:left;margin-left:0;order:3} .tile-top{flex-wrap:wrap} .gallery{grid-template-columns:1fr;grid-template-rows:220px} .g-item:nth-child(n+2){display:none} .m-cta{display:grid} body.has-mcta{padding-bottom:76px} body.has-mcta .wa-fab{bottom:86px} .dl{grid-template-columns:1fr;row-gap:4px} .dl dt{margin-top:12px} .nl-form{flex-direction:column} .fb-row .fchip:not(.always){display:none} .drawer-toggle{display:inline-flex} .fdrawer.open{display:block} } /* ══════════════ v2.1 additions ══════════════ */ /* header location select */ select.h-loc{border:none;outline:none;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-2);padding:0 10px 0 14px;height:42px;border-right:1px solid var(--line);max-width:150px;cursor:pointer} /* category panel: other-category links */ .fp-other{display:grid;grid-template-columns:1fr 1fr;grid-gap:2px 20px;gap:2px 20px} .fp-otherlink{font-size:13.5px;font-weight:700;color:var(--clay);padding:6px 4px;border-radius:8px} .fp-otherlink:hover{background:var(--paper)} /* date filter */ .fp-dates{display:flex;gap:10px;flex-wrap:wrap} .fp-dates label{font-size:12px;font-weight:700;color:var(--ink-2);display:flex;flex-direction:column;gap:4px} .fp-dates input{font-family:inherit;font-size:13px;font-weight:600;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;color:var(--ink);outline:none} .fp-dates input:focus{border-color:var(--ink)} .fp-presets{display:flex;gap:6px;flex-wrap:wrap} .fp-preset{font-size:12px;font-weight:700;border:1.5px solid var(--line);border-radius:999px;background:#fff;padding:6px 12px;transition:all .14s} .fp-preset:hover,.fp-preset.on{background:var(--ink);color:#fff;border-color:var(--ink)} /* Every filter control is an carrying the URL it would navigate to, so the bar still works with JS off (T2.11). These rules give the anchors the same box the prototype's