/* ============================================================
AK Mobile Polish — tablet + mobile (≤ 768px)
Additive only. Does not change desktop layout.
============================================================ */
@media (max-width: 768px) {
/* ---------- Kill horizontal overflow ---------- */
html, body { overflow-x: hidden; max-width: 100vw; }
/* Elementor containers with desktop-sized margins/padding overflow
at 375px. Normalize gutter on mobile. */
body .elementor-section,
body .elementor-container,
body .e-con,
body .e-con-full,
body .e-con-boxed {
max-width: 100% !important;
}
body .e-con.e-parent,
body .e-con-full.e-parent,
body .e-con-boxed.e-parent {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Specific offenders on homepage (captured in audit). */
.elementor-element-01d256a,
.elementor-element-4f7cf74 {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 16px !important;
padding-right: 16px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Any image/video that might break out. */
body img, body video, body iframe, body svg {
max-width: 100%;
height: auto;
}
/* Force tables to wrap / scroll horizontally inside their own box
rather than pushing the page wider. */
body table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---------- Typography ---------- */
body h1, body .elementor-heading-title[class*="h1"] {
font-size: clamp(28px, 7.2vw, 36px) !important;
line-height: 1.15 !important;
letter-spacing: -0.01em;
}
body h2 {
font-size: clamp(22px, 5.6vw, 28px) !important;
line-height: 1.2 !important;
}
body h3 { font-size: clamp(18px, 4.8vw, 22px) !important; line-height: 1.3 !important; }
body h4 { font-size: clamp(16px, 4.2vw, 20px) !important; }
body p, body li { font-size: 16px; line-height: 1.55; }
/* Hero title should take the full column on mobile. */
body h1 {
max-width: 100% !important;
width: 100% !important;
text-wrap: balance;
}
/* ---------- Tap targets (WCAG AA = 44x44) ---------- */
body a.elementor-button,
body .ts-btn,
body .e-btn,
body .ak-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
}
/* Icon-only save buttons: keep fixed square, no padding hijack. */
body .ak-place-save,
body .ak-event-save,
body .ak-deal-save,
body [class*="-save"][class*="ak-"] {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
padding: 0 !important;
}
body .ak-place-save svg,
body .ak-event-save svg,
body .ak-deal-save svg {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
}
/* Sign Up button was 29px tall on mobile — lift. */
body .elementor-button-link.elementor-size-sm {
padding: 10px 16px !important;
font-size: 14px !important;
min-height: 40px;
}
/* ---------- Forms ---------- */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="tel"],
body input[type="url"],
body input[type="search"],
body input[type="number"],
body textarea,
body select {
font-size: 16px !important; /* Prevent iOS zoom on focus */
min-height: 44px;
box-sizing: border-box;
max-width: 100%;
}
body textarea { min-height: 96px; }
/* ---------- Homepage hero ---------- */
.elementor-element.ak-home-hero,
.ak-home-hero {
padding: 40px 16px !important;
min-height: auto !important;
}
.ak-home-hero > .e-con-inner,
.ak-home-hero .elementor-container {
gap: 24px !important;
}
/* Force multi-column flex containers to stack on mobile
— EXCEPT the header, which must stay a single horizontal row. */
body .e-con.e-flex:not(.elementor-location-header *):not(.elementor-location-header) > .e-con-inner,
body .e-con.e-flex:not(.elementor-location-header *):not(.elementor-location-header) {
flex-wrap: wrap !important;
}
body .elementor-location-header .e-con.e-flex,
body .elementor-location-header .e-con.e-flex > .e-con-inner {
flex-wrap: nowrap !important;
}
body .e-con-inner > .e-con:not(.elementor-location-header *) {
flex: 1 1 100% !important;
max-width: 100% !important;
}
body .elementor-location-header .e-con-inner > .e-con {
flex: 0 1 auto !important;
width: auto !important;
}
/* ---------- Category grid ---------- */
.ak-cat-grid,
.ak-categories,
.ak-categories-grid,
[class*="category-grid"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
/* ---------- Deals row ---------- */
.elementor-element-751a50d .ts-post-feed,
.elementor-element-751a50d .elementor-widget-container > * {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.elementor-element-751a50d .ts-preview:nth-of-type(n+4) {
display: block !important; /* Re-show hidden 4th on mobile — stacks cleanly */
}
/* ---------- Feed grids ---------- */
.ts-post-feed .ts-preview-list,
.ts-post-feed-list,
.elementor-widget-ts-post-feed .ts-preview-list {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* ---------- Auth page ---------- */
/* Removed: the old-design auth overrides (#ak-auth-panel hidden-panel
hack, .elementor-2247 column resets, #ak-auth-mini-footer). The auth
pages were rebuilt Jul-2026 (ak-auth-pages.php split-card) and own all
their responsive styling now — these stale selectors no longer exist
in the DOM and only risked fighting the new layout. */
/* ---------- Business CTA (ak-biz-v2) ---------- */
.ak-biz-v2 { padding: 36px 16px !important; }
.ak-biz-v2-steps { grid-template-columns: 1fr !important; gap: 14px !important; }
.ak-biz-v2-cta-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.ak-biz-v2-cta-row a { width: 100% !important; justify-content: center !important; }
.ak-biz-v2 h2 { font-size: clamp(24px, 6.4vw, 30px) !important; }
/* ---------- Footer ---------- */
.elementor-location-footer .e-con,
.elementor-location-footer .elementor-container {
flex-direction: column !important;
gap: 24px !important;
text-align: center;
}
.elementor-location-footer ul {
justify-content: center;
flex-wrap: wrap;
}
/* ---------- Header: full-width, compact, single row ---------- */
body .elementor-location-header,
body .elementor-location-header > .elementor,
body .elementor-location-header .elementor > section,
body .elementor-location-header .elementor > .e-con,
body .elementor-location-header .e-con {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body .elementor-location-header .e-con,
body .elementor-location-header .elementor-container {
padding: 6px 14px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
min-height: 60px !important;
}
body .elementor-location-header .e-con-inner {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
/* Logo sizing: compact */
body .elementor-location-header img {
max-height: 38px !important;
width: auto !important;
}
/* Hamburger button: decent tap target, no extra underline */
body .elementor-location-header .elementor-menu-toggle {
width: 44px !important;
height: 44px !important;
padding: 8px !important;
border: none !important;
background: transparent !important;
}
body .elementor-location-header .elementor-menu-toggle::after,
body .elementor-location-header .elementor-menu-toggle::before {
display: none !important;
}
/* Voxel nav widget hamburger (ts-mobile-menu) — stop it making header 98px tall */
body .elementor-location-header .ts-nav-menu,
body .elementor-location-header .ts-nav,
body .elementor-location-header .ts-mobile-menu,
body .elementor-location-header .ts-item-link {
height: 48px !important;
min-height: 48px !important;
}
body .elementor-location-header .ts-item-icon {
height: 24px !important;
min-height: 24px !important;
}
body .elementor-location-header .ts-item-icon svg {
width: 22px !important;
height: 22px !important;
}
body .elementor-location-header .ts-item-link {
padding: 8px !important;
}
/* Remove underline/strike through on nav items on mobile */
body .elementor-location-header .ts-nav li,
body .elementor-location-header .ts-nav li::after,
body .elementor-location-header .ts-nav li::before {
border-bottom: none !important;
}
/* Force outer header containers full-width (reach into inline widths) */
body .elementor-location-header > .elementor,
body .elementor-location-header > .elementor > .elementor-element {
width: 100% !important;
max-width: 100% !important;
}
/* Cap header height */
body .elementor-location-header,
body .elementor-location-header > .elementor,
body .elementor-location-header .elementor-element[data-id] {
max-height: 64px !important;
}
body .elementor-location-header .e-con-inner,
body .elementor-location-header .e-con {
min-height: 0 !important;
}
/* Remove the decorative underline/accent bar beneath header on mobile */
body .elementor-location-header .elementor-widget-nav-menu::after,
body .elementor-location-header .ak-header-accent,
body .elementor-location-header [class*="accent-bar"] {
display: none !important;
}
/* Hide Sign Up button on narrowest screens (hamburger has Sign In) */
body .elementor-location-header .elementor-button-link.elementor-size-sm {
display: none !important;
}
/* ---------- Hero stats row (14K Followers, 500+ Places, 100+ Events) ---------- */
/* Parent column that holds 3 stat rows — force horizontal 3-col layout. */
body .elementor-element-055a042 {
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 10px 0 !important;
}
body .elementor-element-055a042 > .e-con {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 4px !important;
padding: 6px 4px !important;
}
body .elementor-element-055a042 > .e-con h6,
body .elementor-element-055a042 > .e-con .elementor-heading-title {
font-size: 13px !important;
font-weight: 600 !important;
text-align: center !important;
line-height: 1.25 !important;
}
body .elementor-element-055a042 > .e-con .elementor-icon {
font-size: 16px !important;
}
/* ---------- Instagram badge on hero image ---------- */
/* The badge is absolutely positioned with a desktop left:-20px offset.
Pull it inward on mobile so it sits nicely over the image. */
body .elementor-element-ec9e294 {
left: 14px !important;
right: auto !important;
bottom: 14px !important;
top: auto !important;
max-width: calc(100% - 28px) !important;
border-radius: 14px !important;
box-shadow: 0 8px 22px rgba(0,0,0,0.15) !important;
padding: 10px 14px !important;
}
/* ---------- Event card date badge ---------- */
body .elementor-element-de5bfd7 .ts-preview .elementor-element-4494d12,
body .elementor-element-de5bfd7 .ts-preview [class*="event-date"],
body .elementor-widget-ts-post-feed .ts-preview .elementor-element-4494d12 {
min-width: 56px !important;
width: 56px !important;
padding: 6px 8px !important;
gap: 2px !important;
align-items: center !important;
justify-content: center !important;
}
body .elementor-element-de5bfd7 .ts-preview .elementor-element-cf99ca4 .elementor-heading-title,
body .elementor-element-de5bfd7 .ts-preview .elementor-element-cf99ca4 {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
line-height: 1.1 !important;
}
body .elementor-element-de5bfd7 .ts-preview .elementor-element-dfe2066 .elementor-heading-title,
body .elementor-element-de5bfd7 .ts-preview .elementor-element-dfe2066 {
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1.05 !important;
}
/* ---------- Section-to-section spacing: compress ---------- */
body .elementor-2226 > .elementor-element,
body .elementor-2226 .e-con.e-parent {
padding-top: 24px !important;
padding-bottom: 24px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Hero a little more breathing room */
body .ak-home-hero,
body .elementor-element.ak-home-hero {
padding-top: 24px !important;
padding-bottom: 16px !important;
}
/* Section headings tighter against their feeds */
body .elementor-2226 h2 { margin-top: 0 !important; margin-bottom: 10px !important; }
/* ---------- Category grid: 2 columns on mobile ---------- */
body .elementor-element-b4df3cf {
padding-top: 20px !important;
padding-bottom: 24px !important;
}
/* The inner cards-row container (3c0d17d) holds all category cards. */
body .elementor-element-3c0d17d,
body .elementor-element-3c0d17d > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
flex-direction: unset !important;
}
body .elementor-element-3c0d17d > .e-con-inner > .e-con,
body .elementor-element-3c0d17d > .e-con {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
padding: 16px 8px !important;
min-height: 110px !important;
}
body .elementor-element-3c0d17d .elementor-icon,
body .elementor-element-3c0d17d img {
max-height: 48px !important;
width: auto !important;
}
/* Biz band margin collapse (was +40px top+bottom) */
body .elementor-element-01d256a {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Deals band margin collapse (was +20px) */
body .elementor-element-add160b {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Hamburger toggle tap area */
.elementor-menu-toggle {
min-width: 44px !important;
min-height: 44px !important;
padding: 10px !important;
}
/* Search forms stretch full width on mobile */
.ts-search-form,
.ts-search-form .ts-form,
.elementor-widget-ts-search-form {
width: 100% !important;
max-width: 100% !important;
}
/* ---------- Pricing plans ---------- */
.elementor-widget-ts-pricing-plan .ts-pricing-plans,
.ts-pricing-plans {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* ---------- Create-post hero + form ---------- */
.ak-guest-section, .ak-auth-section {
padding: 20px 16px !important;
}
/* ---------- Improve image rendering on small viewports ---------- */
body img[loading="lazy"] { content-visibility: auto; }
/* ---------- Remove accidental fixed widths ---------- */
body [style*="width: 1200px"],
body [style*="width:1200px"],
body [style*="min-width: 1200px"] {
width: 100% !important;
min-width: 0 !important;
}
/* ---------- Smooth scroll + momentum ---------- */
html { scroll-behavior: smooth; }
body { -webkit-overflow-scrolling: touch; }
/* ---------- Avoid text-size auto-inflation in iOS ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}
/* ---------- Very small phones (<= 380px) ---------- */
@media (max-width: 380px) {
body h1 { font-size: clamp(26px, 7vw, 32px) !important; }
body .elementor-button { padding: 10px 14px !important; font-size: 14px !important; }
}
/* ---------- Touch-only device refinements ---------- */
@media (hover: none) and (pointer: coarse) {
/* Disable hover-only effects that look stuck on touch devices. */
body .ts-preview:hover,
body .ak-place-card:hover,
body .ak-event-card:hover {
transform: none !important;
}
}
.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li > a[href*="things-to-do-with-kids"]:hover,.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li.current-menu-item > a[href*="things-to-do-with-kids"]{background:#E4F3F4;color:#0F4F53;}.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li > a[href*="playgrounds"]:hover,.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li.current-menu-item > a[href*="playgrounds"]{background:#FDF0E6;color:#9A4F1D;}.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li > a[href*="kid-friendly-restaurants"]:hover,.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li.current-menu-item > a[href*="kid-friendly-restaurants"]{background:#FBEBE9;color:#7D2E27;}.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li > a[href*="amsterdam-with-a-baby"]:hover,.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li.current-menu-item > a[href*="amsterdam-with-a-baby"]{background:#EFECFB;color:#453A84;}
.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li > a[href*="birthday-parties"]:hover,
.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li.current-menu-item > a[href*="birthday-parties"] {
background: #FDEBF1; color: #A32350;
}
.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li > a[href*="sports-schools"]:hover,
.ts-popup-root.elementor-element-a2444e2-wrap .ts-term-dropdown-list > li.current-menu-item > a[href*="sports-schools"] {
background: #E7F4ED; color: #1F5B41;
}
@media (max-width: 1024px) {
/* Shell: 8px above the island, nothing below it. 8 + 56 = 64px, which is
exactly the max-height ak-mobile-polish.php caps the header at, so the
island no longer overflows its own shell. */
html body header.elementor-location-header,
html body header#site-header,
html body .ts-header {
padding: 8px 10px 0 !important;
}
/* One 40px row — logo · account · burger — 8px apart. Dropping the row
from 48px to 40px is the whole height saving: the island's 7px
vertical padding and 1px border are left alone, so 40 + 14 + 2 = 56. */
html body header.elementor-location-header .e-con-inner {
gap: 8px !important;
}
html body header.elementor-location-header nav.ts-nav-menu,
html body header.elementor-location-header ul.ts-nav,
html body header.elementor-location-header li.ts-mobile-menu,
html body header.elementor-location-header .ts-mobile-menu .ts-item-link {
height: 40px !important;
min-height: 40px !important;
}
/* post-2270.css ships the nav item with `margin: 0 8px` and the account
dropdown with `margin-left: 8px`; the 8px rhythm is the flex gap's job
now, so each control is exactly 40px wide with nothing added. */
html body header.elementor-location-header .ts-mobile-menu .ts-item-link {
margin: 0 !important;
}
html body header.elementor-location-header .ak-account-dd {
margin-left: 0 !important;
}
/* header-premium-style.php paints `.ts-mobile-menu` white for the stock
Voxel slide-out; that class is also on the , which printed a white
square behind the round burger. The drawer (ak-mobile-menu.php)
replaced that popup, so the needs no surface of its own — and at
40px the square is exactly the size of the button it sits behind. */
html body header.elementor-location-header li.ts-mobile-menu {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Logo: 24px tall (was 26px on phones, 30px at 768–1024), capped at
28px so no other rule can grow it back. Same image as desktop —
scaled, not swapped. */
html body header.elementor-location-header .elementor-widget-image img,
html body header.elementor-location-header.header-scrolled .elementor-widget-image img {
height: 24px !important;
max-height: 28px !important;
width: auto !important;
}
/* Account: an icon-only 40×40 circle at every width up to the
breakpoint. ak-header-account-dropdown.php only does this ≤767px, so
768–1024 still showed a 66px icon+caret capsule next to a 40px
burger. */
html body header.elementor-location-header .ak-account-dd .ak-account-trigger {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
justify-content: center !important;
}
html body header.elementor-location-header .ak-account-dd .ak-account-caret {
display: none !important;
}
/* header-premium-style.php shrinks the island to 4px padding once the
page is scrolled past 24px. At this size the island is already
compact, and a 6px shrink mid-scroll just shifts the page under the
reader's thumb — so the scrolled state keeps the same box. */
html body header.elementor-location-header.header-scrolled > .elementor-element.e-con-boxed {
padding: 7px 12px 7px 18px !important;
}
html body header.elementor-location-header > .elementor-element.e-con-boxed {
padding: 7px 12px 7px 18px !important;
}
}
/* Heroes that pull up under the header. At ≤860px each template already
uses -64px, which is still exactly the shell height, so nothing to do
there. Between 861px and the breakpoint they keep their desktop -72px,
which was 4px deeper than the old 68px shell and would now be 8px
deeper than the 64px one — so here they pull up by exactly 64px and
the hero top sits flush with the page top. */
@media (min-width: 861px) and (max-width: 1024px) {
html body .akhc-hero,
html body .akps-hero,
html body .akfs-hero,
html body .akgl-hero,
html body .akab-hero,
html body .akfs-top {
margin-top: -64px;
}
}
.ak-map-host .ts-map-defer,.akev-map .ts-map-defer{display:block;width:100%;height:100%}
/* every H1: the logo's Fredoka. High specificity + !important to beat the
per-template Plus Jakarta Sans H1 rules (incl. inline + body-injected). */
/* Specificity-proof: templates set their H1 font with a CLASS selector +
!important (e.g. `.ak-guide-single-title`), which outranks a plain
`html body h1 !important`. Enumerating every class meant every NEW template
silently fell back to Plus Jakarta Sans (the guides single page did).
These attribute-selector forms out-specify any single/double class rule
without needing to know the class name. */
html body h1,
html body h1[class],
html body h1[style],
html body [class] h1,
html body [class] [class] h1,
html body [class] [class] [class] h1,
html body h1.elementor-heading-title,
html body h1.akh-h1,
html body h1.akb-h1,
html body h1.akev-h1,
html body h1.akp-h1,
html body .akd-hero h1,
html body .ak-guides-hero h1,
html body .blog-custom-template h1,
html body [data-id="32db6b7"] .elementor-heading-title,
html body [data-id="f74d5c0"] .elementor-heading-title {
font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif !important;
letter-spacing: -0.01em !important;
}
picture.ak-webp{display:contents}.akpv-link>picture.ak-webp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.ts-preview.akpv:hover .akpv-link>picture.ak-webp>img{transform:scale(1.05)}.akpa-pop .ts-preview.akpv:hover .akpv-link>picture.ak-webp>img,.akhc-pop .ts-preview.akpv:hover .akpv-link>picture.ak-webp>img{transform:none}@media (prefers-reduced-motion:reduce){.akpv-link>picture.ak-webp>img{transition:none!important}}
.akpil {
--accent: #1E8A8F;
--deep: #14686D;
--aink: #0F4F53;
--tint: #E4F3F4;
--tint2: #CDE9EA;
/* the camps / section furniture, unchanged, so every landing page on the
site reads as one family */
--sun: #F4B942;
--cream: #FFF8EA;
--cream-2: #FFF3DA;
--navy: #0B1324;
--scribble: #C83D3D;
--ink: #465268;
--line: rgba(11,19,36,.10);
font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--navy);
}
.akpil *, .akpil *::before, .akpil *::after { box-sizing: border-box; }
.akpil-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.akpil .ak-pil-ico { width: 16px; height: 16px; flex: none; fill: currentColor; display: inline-block; vertical-align: -3px; }
.akpil h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.5px; margin: 0; }
/* ══════════ hero ══════════ */
/* Runs up under the translucent sticky header — the same measured offsets as
.akhc-hero and .akps-hero (72px desktop, 66/64 under 860). CSS, not JS. */
.akpil-hero {
background: linear-gradient(180deg, var(--cream) 0%, #FFFDF8 100%);
margin-top: -72px; padding: calc(72px + 46px) 0 52px;
position: relative; overflow: hidden;
}
.akpil-blob { position: absolute; top: -120px; right: -80px; width: 380px; height: 380px; border-radius: 50%; background: var(--cream-2); pointer-events: none; }
.akpil-blob-2 { position: absolute; top: -46px; right: 6px; width: 190px; height: 190px; border-radius: 50%; background: var(--tint2); opacity: .6; pointer-events: none; }
.akpil-hero .akpil-wrap { position: relative; z-index: 1; }
.akpil-herogrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 46px; align-items: center; }
.akpil-eyebrow {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px;
font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase; background: var(--tint); color: var(--aink);
}
.akpil-eyebrow .ak-pil-ico { width: 15px; height: 15px; vertical-align: 0; }
.akpil-hero h1 {
font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important;
font-size: clamp(32px, 4.6vw, 50px) !important; line-height: 1.1 !important;
letter-spacing: -1px; margin: 16px 0 0 !important; max-width: 19ch; color: var(--navy);
}
.akpil-hero h1 em { font-style: normal; color: var(--accent); }
.akpil-note { display: block; font-family: 'Caveat', cursive; font-size: 25px; font-weight: 700; color: var(--scribble); transform: rotate(-1.6deg); margin: 14px 0 0; }
.akpil-lead { margin: 16px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 58ch; }
.akpil-btn {
display: inline-flex; align-items: center; gap: 9px; background: var(--navy); color: #fff;
text-decoration: none; border-radius: 9999px; padding: 14px 28px;
font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; font-weight: 800;
transition: background .2s ease, transform .2s ease;
}
.akpil-btn:hover { background: var(--deep); color: #fff; transform: translateY(-2px); }
.akpil-btn .ak-pil-ico { width: 17px; height: 17px; vertical-align: 0; }
.akpil-herocta { margin: 22px 0 0; }
.akpil-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.akpil-fact {
display: inline-flex; align-items: center; gap: 8px; background: #fff;
border: 1px solid rgba(11,19,36,.09); border-radius: 9999px; padding: 8px 16px;
font-size: 13px; font-weight: 600; color: #3B4658;
}
.akpil-fact b { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--navy); }
.akpil-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.akpil-heroshot { margin: 0; position: relative; }
.akpil-heroshot img {
display: block; width: 100%; height: auto; border-radius: 20px;
aspect-ratio: 3 / 2; object-fit: cover; background: var(--cream-2); border: 7px solid #fff;
box-shadow: 0 26px 60px -26px rgba(11,19,36,.42), 0 3px 10px rgba(11,19,36,.07);
transform: rotate(1.4deg);
}
.akpil-heroshot figcaption { margin: 16px 0 0; font-size: 12.5px; color: #6B7686; text-align: right; }
.akpil-heroshot figcaption a { color: var(--aink); font-weight: 700; }
/* ══════════ intro ══════════ */
.akpil-intro { padding: 42px 0 6px; }
.akpil-intro p { max-width: 70ch; margin: 0 0 14px; color: var(--ink); font-size: 16.5px; line-height: 1.75; }
/* ══════════ a block ══════════ */
.akpil-block { padding: 34px 0 6px; }
.akpil-blockhead { margin: 0 0 20px; }
.akpil-blockhead h2 { font-size: 24px; }
.akpil-blockhead p { margin: 9px 0 0; max-width: 70ch; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.akpil-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.akpil-grid .ts-preview.akpv { min-height: 320px; }
.akpil .akpv-where .ak-pil-ico, .akpil .akpv-rating .ak-pil-ico { width: 15px; height: 15px; margin-right: 3px; }
.akpil .ts-preview.akpv .akpv-price {
top: 12px; left: auto; right: 12px; background: var(--sun); color: #4A340A; border: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
padding: 6px 12px; font-size: 11.5px; letter-spacing: -.1px;
box-shadow: 0 3px 10px rgba(227,155,31,.36);
max-width: 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.akpil .akpv-type { max-width: 52%; }
.akpil-more { margin: 20px 0 0; }
.akpil-more a {
display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
color: var(--aink); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 800;
border-bottom: 2px solid var(--tint2); padding-bottom: 2px;
}
.akpil-more a:hover { border-color: var(--accent); }
.akpil-empty {
background: #fff; border: 1px solid var(--line); border-radius: 18px;
padding: 28px 24px; color: var(--ink); font-size: 15px; line-height: 1.65;
}
/* ══════════ event cards ══════════ */
.akpil-egrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* A grid item's default `min-width: auto` is its MIN-CONTENT width, so a long
venue line pushed the card 11px past a 390px viewport. Both grids get an
explicit floor, and the two strings that can be longer than the card wrap. */
.akpil-egrid > *, .akpil-grid > * { min-width: 0; }
.akpe-title, .akpil-blockhead h2 { overflow-wrap: anywhere; }
.akpe {
display: flex; gap: 16px; align-items: flex-start; text-decoration: none; background: #fff;
border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; color: var(--navy);
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.akpe:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 18px 34px -24px rgba(11,19,36,.45); }
.akpe-date {
flex: none; width: 56px; border-radius: 14px; background: var(--tint); color: var(--aink);
display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9px 0;
}
.akpe-date b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 21px; font-weight: 800; line-height: 1; }
.akpe-date i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin-top: 3px; }
.akpe-body { min-width: 0; display: block; }
.akpe-when { display: block; font-size: 12px; font-weight: 700; color: #7A8496; letter-spacing: .2px; }
.akpe-cd { font-style: normal; font-weight: 800; color: var(--aink); margin-left: 6px; }
.akpe-cd.is-now { color: #B23A2E; }
.akpe-title {
display: block; margin: 5px 0 0; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15.5px; font-weight: 800; line-height: 1.35; color: var(--navy);
}
.akpe-where { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: 13px; color: #6B7686; }
.akpe-where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akpe-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.akpe-tag {
font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
background: #F2F4F7; color: #5A6478; border-radius: 9999px; padding: 4px 9px;
}
.akpe-tag.is-free { background: var(--tint); color: var(--aink); }
/* ══════════ chips ══════════ */
.akpil-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.akpil-chip {
display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
background: #fff; border: 1.5px solid var(--line); border-radius: 9999px;
padding: 8px 16px; text-decoration: none; color: #33474a;
font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 700; white-space: nowrap;
transition: border-color .16s ease, color .16s ease;
}
.akpil-chip:hover { border-color: var(--accent); color: var(--aink); }
.akpil-chip small { font-weight: 700; opacity: .55; }
/* ══════════ notes, faq, read next ══════════ */
.akpil-notes { padding: 34px 0 0; }
.akpil-notes h2 { font-size: 20px; margin: 26px 0 10px; }
.akpil-notes p { max-width: 70ch; margin: 0 0 12px; color: var(--ink); font-size: 16px; line-height: 1.75; }
.akpil-faq { padding: 40px 0 6px; }
.akpil-faq > .akpil-wrap > h2 { font-size: 24px; margin: 0 0 18px; }
.akpil-q {
background: #fff; border: 1px solid var(--line); border-radius: 16px;
padding: 18px 22px; margin: 0 0 12px;
}
.akpil-q h3 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; color: var(--navy); }
.akpil-q p { margin: 8px 0 0; color: var(--ink); font-size: 15.5px; line-height: 1.7; max-width: 74ch; }
.akpil-next { padding: 36px 0 0; }
.akpil-next h2 { font-size: 20px; margin: 0 0 12px; }
.akpil-next ul { margin: 0; padding: 0 0 0 18px; }
.akpil-next li { margin: 0 0 7px; }
.akpil-next a { color: var(--aink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* ══════════ cta ══════════ */
.akpil-cta { padding: 40px 0 70px; }
.akpil-cta-in {
background: var(--navy); border-radius: 24px; padding: 34px 36px;
display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.akpil-cta h2 { font-size: 22px; color: #fff; }
.akpil-cta p { margin: 8px 0 0; color: rgba(255,255,255,.76); font-size: 15px; }
.akpil-cta .akpil-btn { background: var(--sun); color: #3A2905; }
.akpil-cta .akpil-btn:hover { background: #fff; color: var(--navy); }
@media (max-width: 1024px) { .akpil-herogrid { gap: 30px; } }
@media (max-width: 860px) {
.akpil-hero { margin-top: -64px; padding: calc(64px + 18px) 0 40px; }
.akpil-wrap { padding: 0 18px; }
.akpil-herogrid { grid-template-columns: 1fr; gap: 26px; }
.akpil-heroshot img { transform: none; border-width: 5px; border-radius: 16px; }
.akpil-heroshot figcaption { text-align: left; }
.akpil-hero h1 { max-width: none; }
.akpil-btn { width: 100%; justify-content: center; }
.akpil-blob { width: 260px; height: 260px; top: -110px; right: -70px; }
.akpil-blob-2 { width: 130px; height: 130px; top: -40px; right: 0; }
.akpil-grid, .akpil-egrid { grid-template-columns: 1fr; }
.akpil-grid .ts-preview.akpv { min-height: 0; }
/* the chip rows bleed to the screen edge so they read as swipeable */
.akpil-chips {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
margin-left: -18px; margin-right: -18px; padding: 2px 18px;
}
.akpil-chips::-webkit-scrollbar { display: none; }
.akpil-cta-in { padding: 26px 22px 28px; border-radius: 20px; }
.akpil-cta h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.akpil *, .akpil *::before, .akpil *::after { transition: none !important; animation: none !important; }
.akpil a:hover { transform: none !important; }
}
.akloc {
--akloc-navy: #0B1324;
--akloc-ink: #465268;
--akloc-line: rgba(11,19,36,.10);
--akloc-tint: #E4F1F2;
--akloc-tint2: #D2E9EB;
--akloc-accent: #368D96;
--akloc-aink: #1D5B62;
--akloc-cream: #FFF8EA;
max-width: 1240px;
margin: 0 auto;
padding: 0 28px;
box-sizing: border-box;
}
.akloc * { box-sizing: border-box; }
.akloc-h2 {
margin: 0 0 6px;
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-size: 23px; font-weight: 800; letter-spacing: -.4px; line-height: 1.25;
color: var(--akloc-navy);
}
.akloc-sub { margin: 0 0 16px; font-size: 14.5px; color: var(--akloc-ink); }
/* ── about the town ─────────────────────────────────────────────── */
.akloc-about { padding: 8px 28px 4px; }
.akloc-card {
display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
gap: 26px; align-items: center;
background: #fff; border: 1px solid var(--akloc-line); border-radius: 22px;
overflow: hidden;
}
.akloc-card.is-plain { grid-template-columns: 1fr; background: var(--akloc-cream); }
.akloc-shot { position: relative; aspect-ratio: 4 / 3; background: var(--akloc-tint); }
.akloc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a soft brand wash over the photo, so a listing photo standing in for a city
shot still reads as part of the page rather than as a stray card */
.akloc-shot::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(115deg, rgba(29,91,98,.30), rgba(29,91,98,0) 58%);
pointer-events: none;
}
.akloc-words { padding: 26px 30px 26px 4px; }
.akloc-card.is-plain .akloc-words { padding: 26px 30px; }
.akloc-blurb {
margin: 6px 0 0; font-size: 15.5px; line-height: 1.68;
color: var(--akloc-ink); max-width: 62ch;
}
/* ── weather, in the words column of the hero card ──────────────── */
/* `is-wait` holds the filled card's height; a failed request collapses it. */
.akwx{margin:18px 0 0;max-width:620px;padding:13px 16px 6px;border:1px solid var(--akloc-line);border-radius:16px;background:var(--akloc-cream)}
.akwx.is-wait{min-height:162px;border-color:transparent;background:none}
.akwx.is-wait>*{visibility:hidden}
.akwx.is-off{display:none}
.akwx-eyebrow{margin:0}
.akwx-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:9px}
.akwx-now{display:flex;align-items:center;gap:11px}
.akwx-ico{display:block;flex:none;width:20px;height:20px;color:var(--akloc-accent)}
.akwx-ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.akwx-now .akwx-ico{width:34px;height:34px}
.akwx-temp b{font-size:27px;letter-spacing:-.6px}
.akwx-temp i{margin-left:6px;font-size:15px;font-weight:700}
.akwx-rain{font-size:12.5px;font-weight:800;white-space:nowrap;color:var(--akloc-aink);background:var(--akloc-tint);border-radius:9999px;padding:5px 11px}
.akwx-days{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.akwx-days li{display:flex;flex-direction:column;align-items:center;gap:3px}
.akwx-days em{display:flex;align-items:baseline;gap:5px}
.akwx-days b{font-size:13px}
.akwx b{font-weight:800;color:var(--akloc-navy)}
.akwx-days i{font-size:11.5px}
.akwx i,.akwx em{font-style:normal;color:#7C8798}
.akwx-days li>span:first-child{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#7C8798}
.akwx-nudge,.akwx-by{margin:0}
.akwx-nudge a,.akwx-by a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.akwx-nudge a{font-size:14px;font-weight:800;line-height:1.35;color:var(--akloc-aink)}
.akwx-nudge a:hover{text-decoration:underline}
.akwx-by a{font-size:11px;color:#8A94A3}
/* ── chips ──────────────────────────────────────────────────────── */
.akloc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.akloc-chiplabel {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
color: #7C8798; margin-right: 2px;
}
.akloc-chip {
display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
padding: 0 15px; border-radius: 9999px; text-decoration: none;
background: var(--akloc-tint); color: var(--akloc-aink);
border: 1.5px solid transparent;
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-size: 13.5px; font-weight: 800; line-height: 1;
transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.akloc-chip:hover { background: var(--akloc-tint2); border-color: var(--akloc-accent); color: var(--akloc-aink); transform: translateY(-1px); }
.akloc-chip i { font-style: normal; font-size: 11.5px; font-weight: 800; opacity: .62; }
.akloc-chip.is-big { min-height: 44px; font-size: 14.5px; padding: 0 18px; }
/* ── the map ────────────────────────────────────────────────────── */
.akloc-mapwrap { padding: 30px 28px 4px; }
.akloc-map {
position: relative; height: 420px; border-radius: 20px; overflow: hidden;
border: 1px solid var(--akloc-line); background: var(--akloc-tint);
}
.akloc .akloc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.akloc-boot {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: var(--akloc-tint); font-size: 14px; color: var(--akloc-aink); font-weight: 700;
}
.akloc-boot.is-done { opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.akloc-spin {
width: 26px; height: 26px; border-radius: 50%;
border: 3px solid rgba(54,141,150,.28); border-top-color: var(--akloc-accent);
animation: akloc-spin .8s linear infinite;
}
@keyframes akloc-spin { to { transform: rotate(360deg); } }
.akloc-note { margin: 12px 0 0; font-size: 13.5px; color: #6B7686; }
/* vx:map.css strips the provider's own info-window chrome; this is the card
inside it, deliberately small — the full card is one tap away on the grid. */
.akloc-pop { width: 234px; }
.akloc-poplink {
display: flex; gap: 11px; align-items: center; padding: 10px;
background: #fff; border-radius: 14px; text-decoration: none;
box-shadow: 0 18px 40px -22px rgba(11,19,36,.55);
}
.akloc-popshot { width: 56px; height: 56px; flex: none; border-radius: 11px; overflow: hidden; background: var(--akloc-tint); }
.akloc-popshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akloc-popbody { min-width: 0; display: block; }
.akloc-popbody b {
display: block; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-size: 14px; font-weight: 800; color: var(--akloc-navy); line-height: 1.3;
}
.akloc-popbody em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: #6B7686; }
/* ── nearby + siblings ──────────────────────────────────────────── */
.akloc-strip { padding: 34px 28px 4px; }
.akloc-townrow { padding: 34px 28px 20px; }
.akloc-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.akloc-tile {
display: block; padding: 18px 18px 20px; border-radius: 16px; text-decoration: none;
background: #fff; border: 1px solid var(--akloc-line); color: var(--akloc-navy);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.akloc-tile:hover {
transform: translateY(-3px); border-color: var(--akloc-tint2);
box-shadow: 0 18px 38px -26px rgba(11,19,36,.45); color: var(--akloc-navy);
}
.akloc-tile b {
display: block; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3;
}
.akloc-tile span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #6B7686; }
.akloc-up { padding: 26px 28px 8px; margin: 0; }
.akloc-up a {
font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-size: 14px; font-weight: 800; color: var(--akloc-aink);
text-decoration: underline; text-underline-offset: 3px;
}
/* ── the towns a category has, as tiles (a category page) ────────── */
.akloc-towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; }
.akloc-town {
display: flex; align-items: center; gap: 12px; min-width: 0;
padding: 10px 16px 10px 10px; border-radius: 16px; text-decoration: none;
background: #fff; border: 1px solid var(--akloc-line); color: var(--akloc-navy);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.akloc-town.is-plain { padding: 15px 16px; }
.akloc-town:hover {
transform: translateY(-2px); border-color: var(--akloc-tint2);
box-shadow: 0 16px 32px -26px rgba(11,19,36,.45); color: var(--akloc-navy);
}
.akloc-town-shot { width: 54px; height: 54px; flex: none; border-radius: 12px; overflow: hidden; background: var(--akloc-tint); display: block; }
.akloc-town-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akloc-town-body { min-width: 0; display: block; }
.akloc-town-body b {
display: block; font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
font-size: 15px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3; overflow-wrap: anywhere;
}
.akloc-town-body span { display: block; margin-top: 3px; font-size: 12.5px; color: #6B7686; }
/* ── browse by town, on a section archive (a crawl path, kept small) ─ */
/* Real space underneath: on /places/ and /events/ the next thing down the page
is the dark footer band, and the chips were sitting on its edge. */
.akloc-townbar { padding: 30px 28px 40px; }
.akloc-townbar .akloc-chiplabel { display: block; margin: 0; }
.akloc-townbar .akloc-chips { margin-top: 8px; }
/* ── where to find them, injected into a single listing ──────────── */
/* Two classes on purpose: this block is a CHILD of somebody else's column, so
the wrapper's own gutter and max-width have to come off, including inside the
860px query below where `.akloc` sets a gutter again. */
.akloc.akloc-where { max-width: none; margin: 30px 0 0; padding: 0; }
.akloc-where .akloc-h2 { font-size: 20px; }
.akloc-where .akloc-sub { margin: 0 0 12px; }
.akloc-where .akloc-chips { margin-top: 0; }
/* The last chip carries a whole sentence and wraps on a phone; `.akloc-chip`
has no vertical padding because a one-line chip does not need any. */
.akloc-where .akloc-chip { padding-top: 9px; padding-bottom: 9px; line-height: 1.3; text-align: left; }
.akloc-chip.is-here { background: var(--akloc-accent); color: #fff; }
.akloc-chip.is-here:hover { background: var(--akloc-aink); border-color: transparent; color: #fff; }
.akloc-chip.is-here i { opacity: .85; }
.akloc-chip.is-all { background: #fff; border-color: var(--akloc-line); }
.akloc-chip.is-all:hover { background: var(--akloc-tint); }
.akloc-chip .ak-ico { width: 15px; height: 15px; flex: none; }
@media (max-width: 1100px) { .akloc-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
.akloc, .akloc-about, .akloc-mapwrap, .akloc-strip, .akloc-townrow, .akloc-townbar, .akloc-up { padding-left: 18px; padding-right: 18px; }
.akloc-card { grid-template-columns: 1fr; gap: 0; }
.akloc-shot { aspect-ratio: 16 / 9; }
.akloc-words, .akloc-card.is-plain .akloc-words { padding: 22px; }
.akloc-h2 { font-size: 20px; }
.akloc-map { height: 340px; }
.akloc-tiles { grid-template-columns: 1fr 1fr; }
.akwx { max-width: none; }
}
/* Today and the three days stop fitting on one line. */
@media (max-width: 620px) {
.akwx.is-wait{min-height:201px}
.akwx-days{width:100%;justify-content:space-between;gap:10px}
}
@media (max-width: 520px) {
.akloc-tiles, .akloc-towns { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.akloc-spin { animation: none; }
.akloc-tile:hover, .akloc-chip:hover, .akloc-town:hover { transform: none; }
.akloc-boot.is-done { transition: none; }
}
.ak-footer { background: #0B1324; color: #cfd8dc; font-family: 'Plus Jakarta Sans','Manrope',system-ui,sans-serif; margin-top: 0; }
.ak-footer * { box-sizing: border-box; }
.ak-footer a { color: #cfd8dc; text-decoration: none; transition: color .15s; }
.ak-footer a:hover { color: #7AB0B5; }
.ak-footer-inner { max-width: 1200px; margin: 0 auto; padding: 56px 24px 0; }
.ak-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 0.8fr; gap: 36px; padding-bottom: 40px; }
.ak-footer-brand .ak-f-logo img { width: 230px; max-width: 100%; height: auto; display: block; filter: brightness(1.18) drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.ak-footer-brand p { font-size: 14px; line-height: 1.65; color: #9fb0b5; margin: 12px 0 18px; max-width: 300px; }
.ak-f-social { display: flex; gap: 10px; }
.ak-f-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.ak-f-social a:hover { background: #7AB0B5; border-color: #7AB0B5; }
.ak-f-social svg { width: 17px; height: 17px; fill: #fff; }
.ak-f-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #7AB0B5; margin: 4px 0 16px; }
.ak-f-col ul { list-style: none; margin: 0; padding: 0; }
.ak-f-col li { margin: 0 0 11px; font-size: 14.5px; }
.ak-f-col li a { display: inline-flex; align-items: center; gap: 7px; }
.ak-f-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(240,144,144,.18); color: #F09090; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; }
.ak-f-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border-radius: 16px; background: linear-gradient(120deg, rgba(122,176,181,.16), rgba(240,144,144,.12)); border: 1px solid rgba(255,255,255,.10); margin-bottom: 40px; }
.ak-f-cta-txt strong { display: block; color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.ak-f-cta-txt span { font-size: 13.5px; color: #9fb0b5; }
.ak-f-cta a.ak-f-btn { flex-shrink: 0; padding: 13px 26px; border-radius: 999px; background: #ffffff; color: #0B1324 !important; font-weight: 800; font-size: 14.5px; box-shadow: 0 4px 14px rgba(0,0,0,.30); }
.ak-f-cta a.ak-f-btn:hover { background: #7AB0B5; color: #0B1324 !important; transform: translateY(-1px); }
/* D1: the inline form inside the dark footer band. */
.ak-f-cta-form { align-items: flex-start; }
.ak-f-cta-form .ak-f-cta-txt { flex: 1 1 320px; }
.ak-f-nl { flex: 0 1 340px; min-width: 260px; max-width: 100%; }
.ak-f-nl .ak-nl-ff input[type=text], .ak-f-nl .ak-nl-ff input[type=email] { border-color: rgba(255,255,255,.28) !important; }
.ak-f-nl-fine { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: #8b9ba0; }
@media (max-width: 700px) { .ak-f-nl { flex-basis: 100%; } }
.ak-footer-bottom { border-top: 1px solid rgba(255,255,255,.10); padding: 20px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #8b9ba0; }
.ak-footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ak-footer-bottom nav a { color: #8b9ba0; }
.ak-footer-bottom nav a:hover { color: #fff; }
/* Affiliate disclosure — must sit with the legal line, never as a footnote
* nobody reads. Same muted colour as the copyright so it reads as fine
* print, not as a claim. */
.ak-f-affil a { color: #75868b; text-decoration: underline; }
.ak-f-affil { display: block; width: 100%; font-size: 12px; line-height: 1.6; color: #75868b; margin: 4px 0 0; }
@media (max-width: 1100px) { .ak-footer-grid { grid-template-columns: 1fr 1fr 1fr; } .ak-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ak-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) {
.ak-footer-grid { grid-template-columns: 1fr; gap: 26px; }
.ak-footer-inner { padding-top: 42px; }
.ak-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* belt & braces: never show the retired Elementor footer template */
.elementor-2269 { display: none !important; }
/* Newsletter sign-up (FluentForm 5) — shared across the single templates.
!important throughout: Tailwind's forms reset and Voxel both style bare inputs. */
.ak-nl-ff { --aknl-accent: #368d96; --aknl-accent-hover: #2a7780; --aknl-ink: #fff; --aknl-radius: 10px; --aknl-field: #f8fafb; }
.ak-nl-ff .ff-el-group { margin: 0 0 10px !important; }
.ak-nl-ff .ff-el-input--label { display: none !important; } /* placeholders carry the labels */
.ak-nl-ff input[type=text], .ak-nl-ff input[type=email] {
width: 100% !important; height: 44px !important;
padding: 10px 14px !important; box-sizing: border-box !important;
border: 1.5px solid #d6e4e6 !important; border-radius: var(--aknl-radius) !important;
background: var(--aknl-field) !important; color: #0b1324 !important;
font: 600 14px/1.4 Manrope, sans-serif !important;
-webkit-appearance: none !important; appearance: none !important;
}
.ak-nl-ff input[type=text]:focus, .ak-nl-ff input[type=email]:focus {
outline: none !important; border-color: var(--aknl-accent) !important; background: #fff !important;
}
.ak-nl-ff input::placeholder { color: #6e7a74 !important; font-weight: 500 !important; opacity: 1 !important; }
/* Every field row full width. A sidebar is ~300px, so the first/last name pair
stacks instead of sharing a row — side by side both placeholders truncate.
(Selectors are FluentForm's current ff-t-* grid, not the legacy ff_columns
ones the places sidebar block still names.) */
.ak-nl-ff .ff-el-group,
.ak-nl-ff .ff-t-container,
.ak-nl-ff .ff-t-cell {
width: 100% !important; max-width: 100% !important;
flex: 1 1 100% !important;
padding-left: 0 !important; padding-right: 0 !important;
}
.ak-nl-ff .ff-name-field-wrapper > .ff-t-container { display: block !important; }
.ak-nl-ff .ff-name-field-wrapper .ff-t-cell { display: block !important; width: 100% !important; }
.ak-nl-ff .ff_name_middle, .ak-nl-ff .ff-name-middle { display: none !important; }
.ak-nl-ff .ff-el-input--content input { width: 100% !important; box-sizing: border-box !important; }
.ak-nl-ff button[type=submit], .ak-nl-ff .ff-btn-submit {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 100% !important; height: 46px !important; padding: 0 16px !important;
background: var(--aknl-accent) !important; background-image: none !important;
color: var(--aknl-ink) !important; border: 0 !important; border-radius: var(--aknl-radius) !important;
font: 700 14px/1 'Plus Jakarta Sans', sans-serif !important;
-webkit-appearance: none !important; appearance: none !important;
text-transform: none !important;
transition: background .15s, color .15s, transform .1s !important; cursor: pointer !important;
margin-top: 4px !important;
}
.ak-nl-ff button[type=submit]:hover, .ak-nl-ff .ff-btn-submit:hover {
background: var(--aknl-accent-hover) !important;
color: var(--aknl-ink-hover, var(--aknl-ink)) !important;
transform: translateY(-1px) !important;
}
.ak-nl-ff .ff-message-success {
background: #f0fdf4 !important; color: #166534 !important;
padding: 10px 14px !important; border-radius: 8px !important;
font-size: 13px !important; font-weight: 600 !important;
border: 1px solid #bbf7d0 !important; margin-top: 10px !important;
}
.ak-nl-ff .ff-el-is-error input { border-color: #ef4444 !important; }
.ak-nl-ff .text-danger, .ak-nl-ff .error-text { font-size: 12px !important; }
form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit { background-color:rgba(255, 107, 107, 1);border-color:rgba(255, 107, 107, 1);color:#ffffff; }form.fluent_form_5 .wpf_has_custom_css.ff-btn-submit:hover { background-color:#ffffff;border-color:#409EFF;color:#409EFF; }
/* Hidden by default — JS moves it into the header, then unhides */
.ak-account-dd { display: none; }
.ak-account-dd.ak-mounted { display: inline-block; }
body.logged-in .ak-account-dd { display: none !important; }
/* Hide Voxel's default logged-out trio in the user bar so our single
icon stands alone. Show again for logged-in users. */
body:not(.logged-in) .elementor-widget-ts-user-bar .ts-user-area .ts-comp-actions { display: none !important; }
/* Hide the stand-alone "Sign Up" Elementor button widget in the header
(element 95df272) — our dropdown now owns the signup CTA. Permanent;
another rule already hides it for logged-in users. */
.elementor-element-95df272 { display: none !important; }
.ak-account-dd { position: relative !important; margin-left: 8px !important; }
.ak-account-dd .ak-account-trigger {
display: inline-flex !important; align-items: center !important; gap: 4px !important;
width: auto !important; min-width: 0 !important; height: 40px !important;
padding: 0 10px 0 12px !important;
background: transparent !important;
border: 1px solid rgba(54, 141, 150, 0.2) !important;
border-radius: 999px !important;
color: #368d96 !important; cursor: pointer !important;
box-shadow: none !important; outline: none !important;
font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.ak-account-dd .ak-account-trigger:hover,
.ak-account-dd .ak-account-trigger:focus {
background: rgba(181, 213, 217, 0.18) !important;
border-color: #368d96 !important;
box-shadow: 0 4px 12px rgba(54, 141, 150, 0.12) !important;
}
.ak-account-dd .ak-account-icon { width: 22px !important; height: 22px !important; color: #368d96 !important; }
.ak-account-dd .ak-account-caret { width: 16px !important; height: 16px !important; color: #6e7a74 !important; transition: transform 0.2s ease !important; }
.ak-account-dd[data-open="true"] .ak-account-caret { transform: rotate(180deg) !important; color: #368d96 !important; }
.ak-account-menu {
position: absolute; top: calc(100% + 10px); right: 0;
width: 300px;
background: #fff; border-radius: 14px;
box-shadow: 0 20px 48px rgba(11, 19, 36, 0.18), 0 0 0 1px rgba(181, 213, 217, 0.40);
padding: 8px; z-index: 10000;
opacity: 0; transform: translateY(-8px); pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.ak-account-dd[data-open="true"] .ak-account-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ak-account-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 10px;
text-decoration: none; color: #0b1324;
font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-size: 14px; font-weight: 600;
transition: background 0.15s ease;
}
.ak-account-item:hover { background: #f4fafb; }
.ak-account-item .ak-ico { width: 20px; height: 20px; color: #6e7a74; flex-shrink: 0; }
/* "List Your Business" handshake — brand turquoise, not orange */
.ak-account-item-icon-orange { color: #368d96 !important; }
.ak-account-item-title { font-size: 14px; font-weight: 700; color: #0b1324; line-height: 1.2; }
.ak-account-item-sub { font-size: 12px; color: #6e7a74; font-weight: 500; margin-top: 2px; }
.ak-account-divider { height: 1px; background: rgba(181, 213, 217, 0.40); margin: 8px 4px; }
.ak-account-section-label {
padding: 8px 14px 6px;
font-family: 'Plus Jakarta Sans', Inter, sans-serif;
font-size: 10px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
color: #94a3b8;
}
@media (max-width: 767px) {
/* icon-only circle inside the island header (caret overflowed it) */
.ak-account-dd .ak-account-trigger { width: 40px !important; height: 40px !important; padding: 0 !important; justify-content: center !important; }
.ak-account-dd .ak-account-caret { display: none !important; }
.ak-account-menu { right: -8px; width: 260px; }
}