/* Theme Name: FreshWave Air Theme URI: https://freshwaveair.com Author: FreshWave Air Author URI: https://freshwaveair.com Description: A clean, fresh, conversion-focused theme for FreshWave Air home deodorizing. Edit your logo, colors, contact details, services, and homepage sections entirely from the WordPress Customizer — no code required. Version: 1.4.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: freshwave-air Tags: business, custom-logo, custom-colors, custom-menu, featured-images, full-width-template, front-page-post-form */ /* ========================================================= FreshWave Air — Design tokens Palette is pulled directly from the logo. The three core colors (deep / brand / accent) are overridable in the Customizer and injected as variables in . ========================================================= */ :root{ --fw-deep: #104848; /* deep teal — "fresh" wordmark, headers, footer */ --fw-teal: #089088; /* brand teal — primary */ --fw-turq: #10B8A0; /* turquoise — middle wave */ --fw-cyan: #00B0D0; /* sky cyan — accent, bottom wave */ --fw-mute: #588888; /* muted teal-grey — tagline, secondary text */ --fw-ink: #0F3030; /* body text */ --fw-mist: #EEF8F6; /* light section background */ --fw-mist-2: #E2F2EF; /* slightly deeper mist */ --fw-line: #D5E8E5; /* hairline borders */ --fw-surface: #FFFFFF; --fw-radius: 16px; --fw-radius-sm: 12px; --fw-radius-lg: 26px; --fw-pill: 999px; --fw-shadow: 0 18px 44px -26px rgba(16,72,72,.55); --fw-shadow-sm: 0 8px 22px -16px rgba(16,72,72,.45); --fw-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --fw-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fw-container: 1180px; --fw-gap: clamp(1rem, 3vw, 2rem); } /* ========================================================= Reset / base ========================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--fw-body); font-size:1.0625rem; line-height:1.7; color:var(--fw-ink); background:var(--fw-surface); -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--fw-teal); text-decoration:none; } a:hover{ color:var(--fw-deep); } h1,h2,h3,h4{ font-family:var(--fw-display); color:var(--fw-deep); line-height:1.1; margin:0 0 .5em; font-weight:700; } p{ margin:0 0 1rem; } ul,ol{ margin:0 0 1rem; padding-left:1.2rem; } /* Accessibility helpers */ .fw-skip-link{ position:absolute; left:-999px; top:0; z-index:1000; background:var(--fw-deep); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--fw-radius-sm) 0; } .fw-skip-link:focus{ left:0; color:#fff; } :focus-visible{ outline:3px solid var(--fw-cyan); outline-offset:2px; border-radius:4px; } .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } /* ========================================================= Layout primitives ========================================================= */ .fw-container{ width:100%; max-width:var(--fw-container); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); } .fw-section{ padding-block:clamp(3.5rem,7vw,6rem); } .fw-section--mist{ background:var(--fw-mist); } .fw-section--deep{ background:var(--fw-deep); color:#dff3f0; } .fw-section--deep h2,.fw-section--deep h3{ color:#fff; } .fw-eyebrow{ display:inline-block; font-family:var(--fw-body); font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fw-teal); margin-bottom:.9rem; } .fw-section--deep .fw-eyebrow{ color:var(--fw-cyan); } .fw-section-head{ max-width:640px; margin-bottom:clamp(2rem,4vw,3rem); } .fw-section-head.is-center{ margin-inline:auto; text-align:center; } .fw-h2{ font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-.02em; } .fw-lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--fw-mute); } .fw-section--deep .fw-lead{ color:#bfe4df; } /* ========================================================= Buttons ========================================================= */ .fw-btn{ --_bg:var(--fw-teal); --_fg:#fff; display:inline-flex; align-items:center; gap:.55rem; font-family:var(--fw-display); font-weight:600; font-size:1rem; line-height:1; padding:.95rem 1.5rem; border-radius:var(--fw-pill); background:var(--_bg); color:var(--_fg); border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; box-shadow:var(--fw-shadow-sm); } .fw-btn:hover{ transform:translateY(-2px); color:var(--_fg); } .fw-btn--primary{ background:linear-gradient(100deg,var(--fw-teal),var(--fw-cyan)); } .fw-btn--deep{ --_bg:var(--fw-deep); } .fw-btn--cyan{ --_bg:var(--fw-cyan); } .fw-btn--ghost{ --_fg:var(--fw-deep); background:transparent; border-color:var(--fw-line); box-shadow:none; } .fw-btn--ghost:hover{ border-color:var(--fw-teal); --_fg:var(--fw-deep); } .fw-btn--on-deep{ --_fg:var(--fw-deep); --_bg:#fff; } .fw-btn--ghost-light{ --_fg:#fff; background:transparent; border-color:rgba(255,255,255,.35); box-shadow:none; } .fw-btn--ghost-light:hover{ border-color:#fff; --_fg:#fff; } .fw-btn--lg{ padding:1.1rem 1.9rem; font-size:1.06rem; } /* ========================================================= Top utility bar ========================================================= */ .fw-topbar{ background:var(--fw-deep); color:#cdeae6; font-size:.86rem; } .fw-topbar .fw-container{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center; justify-content:space-between; padding-block:.5rem; } .fw-topbar a{ color:#cdeae6; display:inline-flex; align-items:center; gap:.4rem; } .fw-topbar a:hover{ color:#fff; } .fw-topbar__items{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; } .fw-topbar__cta{ font-weight:600; color:#fff; } .fw-ico{ width:1em; height:1em; flex:none; } /* ========================================================= Header / nav ========================================================= */ .fw-header{ position:sticky; top:0; z-index:90; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--fw-line); } .fw-header .fw-container{ display:flex; align-items:center; gap:1.2rem; padding-block:.75rem; } .fw-brand{ display:flex; align-items:center; flex:none; } .fw-brand img,.fw-brand .custom-logo{ height:46px; width:auto; max-width:230px; object-fit:contain; } .fw-brand__title{ font-family:var(--fw-display); font-weight:700; color:var(--fw-deep); font-size:1.25rem; } .fw-nav{ margin-left:auto; } .fw-nav ul{ list-style:none; display:flex; gap:.4rem; margin:0; padding:0; } .fw-nav a{ display:block; padding:.55rem .85rem; border-radius:var(--fw-pill); font-weight:500; color:var(--fw-ink); font-size:.98rem; } .fw-nav a:hover,.fw-nav .current-menu-item>a{ background:var(--fw-mist); color:var(--fw-deep); } .fw-header__cta{ flex:none; } .fw-burger{ display:none; margin-left:auto; background:var(--fw-mist); border:1px solid var(--fw-line); border-radius:var(--fw-radius-sm); width:46px; height:46px; cursor:pointer; align-items:center; justify-content:center; } .fw-burger span,.fw-burger span::before,.fw-burger span::after{ content:""; display:block; width:20px; height:2px; background:var(--fw-deep); border-radius:2px; position:relative; transition:.2s; } .fw-burger span::before{ position:absolute; top:-6px; } .fw-burger span::after{ position:absolute; top:6px; } .fw-burger[aria-expanded="true"] span{ background:transparent; } .fw-burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); } .fw-burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); } /* ========================================================= Hero — signature: animated three-wave airflow ========================================================= */ .fw-hero{ position:relative; overflow:hidden; background: radial-gradient(120% 90% at 85% -10%, rgba(0,176,208,.16), transparent 60%), radial-gradient(90% 80% at 0% 110%, rgba(16,184,160,.14), transparent 55%), var(--fw-mist); } .fw-hero .fw-container{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(3rem,7vw,5.5rem); } .fw-hero__eyebrow{ color:var(--fw-teal); } .fw-hero h1{ font-size:clamp(2.4rem,5.4vw,4.3rem); letter-spacing:-.025em; font-weight:800; margin-bottom:.4em; } .fw-hero h1 .accent{ color:var(--fw-teal); } .fw-hero__lead{ font-size:clamp(1.08rem,1.7vw,1.3rem); color:var(--fw-mute); max-width:34ch; margin-bottom:1.6rem; } .fw-hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.6rem; } .fw-hero__trust{ display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; list-style:none; padding:0; margin:0; font-size:.92rem; color:var(--fw-deep); font-weight:500; } .fw-hero__trust li{ display:flex; align-items:center; gap:.45rem; } .fw-hero__trust svg{ width:1.1em; height:1.1em; color:var(--fw-teal); flex:none; } /* Hero visual card with flowing waves */ .fw-hero__visual{ position:relative; aspect-ratio:1/1; border-radius:var(--fw-radius-lg); background:linear-gradient(160deg,#0c5550,#0a3f3f); overflow:hidden; box-shadow:var(--fw-shadow); } .fw-hero__waves{ position:absolute; inset:0; width:100%; height:100%; } .fw-hero__waves path{ fill:none; stroke-width:8; stroke-linecap:round; opacity:.9; } .fw-wave-a{ stroke:#0aa79a; } .fw-wave-b{ stroke:#19c9b0; } .fw-wave-c{ stroke:#2bc4e6; } .fw-hero__waves .drift{ animation:fwDrift 9s ease-in-out infinite; } .fw-hero__waves .drift.b{ animation-duration:11s; animation-delay:-2s; } .fw-hero__waves .drift.c{ animation-duration:13s; animation-delay:-4s; } @keyframes fwDrift{ 0%,100%{ transform:translateX(-4%);} 50%{ transform:translateX(4%);} } .fw-hero__badge{ position:absolute; left:1.2rem; bottom:1.2rem; right:1.2rem; background:rgba(255,255,255,.95); border-radius:var(--fw-radius); padding:1rem 1.2rem; display:flex; align-items:center; gap:.9rem; box-shadow:var(--fw-shadow-sm); } .fw-hero__badge strong{ font-family:var(--fw-display); color:var(--fw-deep); display:block; font-size:1.05rem; } .fw-hero__badge span{ color:var(--fw-mute); font-size:.86rem; } .fw-hero__badge .ring{ width:46px; height:46px; flex:none; border-radius:50%; background:conic-gradient(var(--fw-cyan),var(--fw-turq),var(--fw-teal),var(--fw-cyan)); display:grid; place-items:center; } .fw-hero__badge .ring svg{ width:22px; height:22px; color:#fff; } /* Wave divider between sections */ .fw-divider{ display:block; width:100%; height:auto; line-height:0; } .fw-divider svg{ display:block; width:100%; height:clamp(40px,6vw,80px); } /* ========================================================= Services grid ========================================================= */ .fw-grid{ display:grid; gap:clamp(1rem,2.2vw,1.5rem); } .fw-grid--3{ grid-template-columns:repeat(3,1fr); } .fw-grid--4{ grid-template-columns:repeat(4,1fr); } .fw-card{ background:var(--fw-surface); border:1px solid var(--fw-line); border-radius:var(--fw-radius); padding:1.6rem; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .fw-card:hover{ transform:translateY(-4px); box-shadow:var(--fw-shadow); border-color:transparent; } .fw-card__icon{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1rem; background:linear-gradient(135deg,var(--fw-mist),var(--fw-mist-2)); color:var(--fw-teal); } .fw-card__icon svg{ width:28px; height:28px; } .fw-card h3{ font-size:1.18rem; margin-bottom:.35rem; } .fw-card p{ color:var(--fw-mute); font-size:.97rem; margin:0; } /* ========================================================= Process steps (a true sequence -> numbered) ========================================================= */ .fw-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.2rem); counter-reset:step; } .fw-step{ position:relative; } .fw-step__num{ font-family:var(--fw-display); font-weight:800; font-size:2.6rem; color:transparent; -webkit-text-stroke:2px var(--fw-turq); line-height:1; display:block; margin-bottom:.6rem; } .fw-step h3{ font-size:1.2rem; margin-bottom:.3rem; } .fw-step p{ color:var(--fw-mute); margin:0; } /* ========================================================= Stats band ========================================================= */ .fw-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2rem); text-align:center; } .fw-stat strong{ display:block; font-family:var(--fw-display); font-weight:800; font-size:clamp(2rem,4vw,2.8rem); color:#fff; line-height:1; letter-spacing:-.02em; } .fw-stat span{ color:#bfe4df; font-size:.98rem; } /* ========================================================= Testimonials ========================================================= */ .fw-quote{ margin:0; background:var(--fw-surface); border:1px solid var(--fw-line); border-radius:var(--fw-radius); padding:1.6rem; display:flex; flex-direction:column; gap:.9rem; box-shadow:var(--fw-shadow-sm); } .fw-quote__stars{ display:flex; gap:.15rem; color:var(--fw-cyan); } .fw-quote__stars svg{ width:18px; height:18px; } .fw-quote blockquote{ margin:0; padding:0; border:0; font-style:normal; font-size:1.02rem; line-height:1.6; color:var(--fw-ink); } .fw-quote figcaption{ margin-top:auto; padding-top:.4rem; } .fw-quote figcaption strong{ display:block; font-family:var(--fw-display); color:var(--fw-deep); } .fw-quote figcaption span{ color:var(--fw-mute); font-size:.9rem; } /* ========================================================= About / split ========================================================= */ .fw-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; } .fw-checklist{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem; } .fw-checklist li{ display:flex; gap:.65rem; align-items:flex-start; } .fw-checklist svg{ width:1.3em; height:1.3em; color:var(--fw-teal); flex:none; margin-top:.15em; } .fw-media-card{ border-radius:var(--fw-radius-lg); overflow:hidden; box-shadow:var(--fw-shadow); background:linear-gradient(160deg,#0c5550,#0a3f3f); aspect-ratio:4/3; position:relative; display:grid; place-items:center; } .fw-media-card img{ width:100%; height:100%; object-fit:cover; } .fw-media-card__waves{ position:absolute; inset:0; } /* ========================================================= CTA band ========================================================= */ .fw-cta{ background:linear-gradient(110deg,var(--fw-deep),var(--fw-teal)); color:#fff; border-radius:var(--fw-radius-lg); padding:clamp(2.2rem,5vw,3.4rem); text-align:center; position:relative; overflow:hidden; } .fw-cta h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:.4rem; } .fw-cta p{ color:#cfeeea; max-width:48ch; margin:0 auto 1.6rem; } .fw-cta__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; } .fw-cta__waves{ position:absolute; left:0; right:0; bottom:-2px; opacity:.5; pointer-events:none; } /* ========================================================= Footer ========================================================= */ .fw-footer{ background:var(--fw-deep); color:#bfe0dc; padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem; } .fw-footer a{ color:#bfe0dc; } .fw-footer a:hover{ color:#fff; } .fw-footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem); padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12); } .fw-footer__logo img{ height:42px; width:auto; margin-bottom:1rem; } .fw-footer__about{ max-width:34ch; font-size:.95rem; } .fw-footer h4{ color:#fff; font-size:1rem; margin-bottom:.9rem; } .fw-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.95rem; } .fw-footer__social{ display:flex; gap:.6rem; margin-top:1rem; } .fw-footer__social a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); } .fw-footer__social a:hover{ background:var(--fw-teal); } .fw-footer__social svg{ width:18px; height:18px; } .fw-footer__bottom{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; justify-content:space-between; padding-top:1.4rem; font-size:.86rem; color:#9fc8c3; } /* ========================================================= Generic content (pages / posts) ========================================================= */ .fw-page-hero{ background:var(--fw-mist); padding-block:clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--fw-line); } .fw-page-hero h1{ font-size:clamp(2rem,4vw,3rem); } .fw-content{ max-width:760px; margin-inline:auto; padding-block:clamp(2.5rem,5vw,4rem); } .fw-content img{ border-radius:var(--fw-radius); margin-block:1.5rem; } .fw-content h2{ margin-top:2rem; } .fw-content blockquote{ border-left:4px solid var(--fw-turq); margin:1.5rem 0; padding:.5rem 0 .5rem 1.2rem; color:var(--fw-mute); font-style:italic; } .fw-post-meta{ color:var(--fw-mute); font-size:.9rem; margin-bottom:1rem; } .fw-pagination{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2rem; } .fw-pagination a,.fw-pagination span{ padding:.5rem .9rem; border-radius:var(--fw-radius-sm); border:1px solid var(--fw-line); } .fw-pagination .current{ background:var(--fw-teal); color:#fff; border-color:var(--fw-teal); } /* WP alignment + caption helpers */ .aligncenter{ margin-inline:auto; } .alignright{ float:right; margin:0 0 1rem 1.5rem; } .alignleft{ float:left; margin:0 1.5rem 1rem 0; } .wp-caption-text,.wp-element-caption{ font-size:.85rem; color:var(--fw-mute); text-align:center; } .fw-mobile-panel{ display:none; } /* ========================================================= Booking / contact page ========================================================= */ .fw-booking{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; } .fw-booking__info{ background:var(--fw-mist); border:1px solid var(--fw-line); border-radius:var(--fw-radius-lg); padding:clamp(1.5rem,3vw,2.2rem); position:sticky; top:90px; } .fw-booking__info .fw-checklist li{ font-weight:500; color:var(--fw-ink); } .fw-booking__contact{ margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--fw-line); } .fw-booking__or{ font-family:var(--fw-display); font-weight:600; color:var(--fw-deep); margin-bottom:.8rem; } .fw-booking__contact .fw-btn{ width:100%; justify-content:center; } .fw-booking__meta{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem; font-size:.95rem; } .fw-booking__meta li,.fw-booking__meta a{ display:flex; align-items:center; gap:.55rem; color:var(--fw-mute); } .fw-booking__meta a:hover{ color:var(--fw-deep); } .fw-booking__meta .fw-ico{ color:var(--fw-teal); } .fw-booking__form{ background:var(--fw-surface); border:1px solid var(--fw-line); border-radius:var(--fw-radius-lg); padding:clamp(1.6rem,3.5vw,2.6rem); box-shadow:var(--fw-shadow); } .fw-booking__intro-content{ color:var(--fw-mute); margin-bottom:1.4rem; } /* Native fallback form + generic plugin form fields */ .fw-field{ margin-bottom:1.1rem; } .fw-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .fw-field label{ display:block; font-weight:600; font-size:.92rem; color:var(--fw-deep); margin-bottom:.4rem; } .fw-booking__form input[type="text"], .fw-booking__form input[type="tel"], .fw-booking__form input[type="email"], .fw-booking__form input[type="date"], .fw-booking__form input[type="url"], .fw-booking__form input[type="number"], .fw-booking__form select, .fw-booking__form textarea, .fw-booking__form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance), .fw-booking__form .wpforms-field input:not([type="submit"]), .fw-booking__form .wpforms-field select, .fw-booking__form .wpforms-field textarea, .fw-booking__form .ff-el-input--content input, .fw-booking__form .ff-el-input--content select, .fw-booking__form .ff-el-input--content textarea{ width:100%; padding:.8rem 1rem; font:inherit; color:var(--fw-ink); background:#fff; border:1px solid var(--fw-line); border-radius:var(--fw-radius-sm); transition:border-color .15s ease, box-shadow .15s ease; } .fw-booking__form input:focus, .fw-booking__form select:focus, .fw-booking__form textarea:focus{ outline:none; border-color:var(--fw-teal); box-shadow:0 0 0 3px rgba(0,176,208,.18); } .fw-booking__form textarea{ resize:vertical; min-height:120px; } /* Submit buttons across native + common plugins */ .fw-booking__form .wpcf7-submit, .fw-booking__form .wpforms-submit, .fw-booking__form .ff-btn-submit{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-family:var(--fw-display); font-weight:600; font-size:1.06rem; line-height:1; padding:1.1rem 1.9rem; border-radius:var(--fw-pill); border:2px solid transparent; color:#fff; background:linear-gradient(100deg,var(--fw-teal),var(--fw-cyan)); box-shadow:var(--fw-shadow-sm); transition:transform .15s ease; } .fw-booking__form .wpcf7-submit:hover, .fw-booking__form .wpforms-submit:hover, .fw-booking__form .ff-btn-submit:hover{ transform:translateY(-2px); } .fw-booking__form .wpcf7-spinner{ margin:0 0 0 .6rem; } .fw-booking__form .wpcf7-not-valid-tip{ color:#c0392b; font-size:.85rem; margin-top:.3rem; } .fw-booking__form .wpcf7-response-output{ border-radius:var(--fw-radius-sm); padding:.8rem 1rem !important; margin:1rem 0 0 !important; font-size:.95rem; } .fw-fallback__note{ margin-top:1.4rem; padding:.9rem 1.1rem; border-radius:var(--fw-radius-sm); background:var(--fw-mist-2); color:var(--fw-deep); font-size:.9rem; border:1px dashed var(--fw-turq); } .fw-fallback-form .fw-btn{ width:100%; justify-content:center; margin-top:.4rem; } .fw-fallback__sent{ color:var(--fw-teal); font-weight:600; margin-top:.8rem; } .fw-map{ margin-top:1.6rem; border-radius:var(--fw-radius); overflow:hidden; border:1px solid var(--fw-line); line-height:0; } .fw-map iframe{ display:block; width:100%; } /* ========================================================= Responsive ========================================================= */ @media (max-width:980px){ .fw-grid--4{ grid-template-columns:repeat(2,1fr); } .fw-grid--3{ grid-template-columns:repeat(2,1fr); } .fw-footer__top{ grid-template-columns:1fr 1fr; } } @media (max-width:820px){ .fw-nav,.fw-header__cta{ display:none; } .fw-burger{ display:flex; } .fw-hero .fw-container{ grid-template-columns:1fr; } .fw-hero__visual{ order:-1; aspect-ratio:16/11; max-height:340px; } .fw-split{ grid-template-columns:1fr; } .fw-steps{ grid-template-columns:1fr; } .fw-booking{ grid-template-columns:1fr; } .fw-booking__info{ position:static; } .fw-mobile-panel{ display:block; background:#fff; border-bottom:1px solid var(--fw-line); padding:.6rem clamp(1.1rem,4vw,2rem) 1rem; } .fw-mobile-panel[hidden]{ display:none; } .fw-mobile-panel ul{ list-style:none; margin:0; padding:0; } .fw-mobile-panel a{ display:block; padding:.7rem .4rem; border-bottom:1px solid var(--fw-mist); color:var(--fw-ink); font-weight:500; } .fw-mobile-panel .fw-btn{ width:100%; justify-content:center; margin-top:.8rem; } } @media (max-width:560px){ .fw-grid--4,.fw-grid--3{ grid-template-columns:1fr; } .fw-footer__top{ grid-template-columns:1fr; } .fw-stats{ grid-template-columns:1fr; gap:1.4rem; } .fw-topbar__items .hide-sm{ display:none; } .fw-field-row{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; } }