/* ============================================================ Assura Home Watch — Global Stylesheet Single file, no build step. All styles live here. Brand colours and spacing tokens are defined in :root below — always use var(--token) rather than hardcoding values. Fonts load via in each page . ============================================================ */ /* ============================================================ DESIGN TOKENS — :root ============================================================ */ :root { --navy: #0d1b3e; --teal: #0d1b3e; --gold: #C9A96E; --aqua: #7BBFCC; --seafoam: #7BBFCC; --aqua-muted: #9BB8BE; --cream: #FDFAF5; --warm-white: #FDFAF5; --grey: #4A4A4A; --white: #FFFFFF; --gold-dark: #B08D52; --sand: #F5F0E8; --border: #D4CFC6; /* 2026 additions */ --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1); --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow-sm: 0 2px 12px rgba(0,0,0,0.08); --shadow-md: 0 8px 32px rgba(0,0,0,0.14); --shadow-lg: 0 20px 60px rgba(0,0,0,0.18); --radius: 6px; --radius-card: 8px; --header-height: 120px; --header-height-mobile: 90px; --fs-h1: clamp(2.25rem, 5.6vw, 4.5rem); --fs-h2: clamp(1.75rem, 3.6vw, 2.625rem); --fs-h3: clamp(1.25rem, 2.1vw, 1.5rem); --fs-hero-brand: clamp(2.875rem, 8vw, 5rem); --fs-hero-sub: clamp(1.75rem, 5vw, 3rem); --fs-hero-tagline: clamp(1rem, 1.6vw, 1.125rem); --gutter: clamp(1rem, 4vw, 1.5rem); --section-y: clamp(3rem, 6vw, 5rem); --prose-width: 42rem; --focus-ring: 0 0 0 3px rgba(201, 169, 110, 0.45); /* Opacity variants — avoids repeating rgba() at point of use. When a brand colour changes, update the base token AND these derivatives. */ --white-70: rgba(255,255,255,0.7); /* outline button borders on dark backgrounds */ --white-85: rgba(255,255,255,0.85); /* body text on navy/dark backgrounds */ --black-08: rgba(0,0,0,0.08); /* hairline shadows */ --black-15: rgba(0,0,0,0.15); /* default header shadow */ --black-28: rgba(0,0,0,0.28); /* scrolled header shadow */ --navy-96: rgba(13,27,62,0.96); /* header background after scroll (glass effect) */ } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 200px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ SCROLL REVEAL SYSTEM Elements with [data-reveal] start invisible and slide in when they enter the viewport. main.js wires the IntersectionObserver. ============================================================ */ [data-reveal] { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); -webkit-transition: opacity 0.8s var(--ease-fluid), -webkit-transform 0.8s var(--ease-fluid); transition: opacity 0.8s var(--ease-fluid), transform 0.8s var(--ease-fluid); } [data-reveal="left"] { -webkit-transform: translateX(-24px); transform: translateX(-24px); } [data-reveal="right"] { -webkit-transform: translateX(24px); transform: translateX(24px); } [data-reveal="up"] { -webkit-transform: translateY(18px); transform: translateY(18px); } [data-reveal="fade"] { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } [data-reveal].is-visible { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } [data-reveal-group] > *:nth-child(1) { -webkit-transition-delay: 0s; transition-delay: 0s; } [data-reveal-group] > *:nth-child(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } [data-reveal-group] > *:nth-child(3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } [data-reveal-group] > *:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } /* inherit reveal from group children */ [data-reveal-group] > * { opacity: 0; -webkit-transform: translateY(14px); transform: translateY(14px); -webkit-transition: opacity 0.75s var(--ease-fluid), -webkit-transform 0.75s var(--ease-fluid); transition: opacity 0.75s var(--ease-fluid), transform 0.75s var(--ease-fluid); } [data-reveal-group].is-visible > * { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } body { font-family: 'Jost', sans-serif; font-weight: 400; color: var(--grey); line-height: 1.7; background: var(--warm-white); overflow-x: hidden; } body.menu-open { overflow: hidden; } ::selection { background: rgba(201, 169, 110, 0.25); color: var(--navy); } a:focus-visible, button:focus-visible, .btn:focus-visible, .main-nav a:focus-visible, .footer-social-link:focus-visible { outline: none; box-shadow: var(--focus-ring); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } p, li, a, span, h1, h2, h3, h4 { overflow-wrap: anywhere; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 300; line-height: 1.2; } h1 { font-size: var(--fs-h1); color: var(--white); } h2 { font-size: var(--fs-h2); color: var(--teal); text-wrap: balance; } h3 { font-size: var(--fs-h3); color: var(--teal); } .italic-accent { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--aqua); } .section-label { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; color: var(--gold); display: block; margin-bottom: 16px; } .divider { width: 60px; height: 2px; background: var(--gold); margin: 20px auto; } .divider-left { width: 60px; height: 2px; background: var(--gold); margin: 20px 0; } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); } .section-pad { padding: var(--section-y) 0; } .section-pad-sm { padding: calc(var(--section-y) * 0.6) 0; } .section-intro { text-align: center; margin-bottom: 48px; } .section-intro-sm { text-align: center; margin-bottom: 40px; } .prose-narrow { max-width: var(--prose-width); margin-left: auto; margin-right: auto; } .media-rounded { border-radius: 4px; width: 100%; object-fit: cover; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; padding: 14px 30px; border-radius: var(--radius); cursor: pointer; transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth), transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth); border: 2px solid transparent; min-height: 50px; white-space: nowrap; } .btn:active { transform: translateY(0); box-shadow: none; } @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.16); } } .btn-gold { background: var(--gold); color: var(--white); border-color: var(--gold); } .btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); } .btn-outline-white { background: transparent; color: var(--white); border-color: var(--white-70); } .btn-outline-white:hover { background: var(--white); color: var(--teal); border-color: var(--white); } .btn-outline-gold { background: transparent; color: var(--gold); border-color: var(--gold); } .btn-outline-gold:hover { background: var(--gold); color: var(--white); } /* ============================================================ HEADER & NAVIGATION components.js injects the nav HTML into #site-header. The .scrolled class is toggled by main.js on scroll. ============================================================ */ .site-header { background: var(--teal); position: sticky; top: 0; z-index: 999; box-shadow: 0 2px 12px var(--black-15); transition: background 0.3s ease, box-shadow 0.3s ease; } .site-header.scrolled { background: var(--navy-96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 2px 28px var(--black-28); } .header-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 0 48px; height: var(--header-height); } /* ── Logo Component ── */ .site-logo-link { text-decoration: none; flex-shrink: 0; } .site-logo-img { height: 114px; width: auto; display: block; } .site-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; } .logo-mark-svg { width: 88px; height: 40px; flex-shrink: 0; display: block; } .logo-text-block { display: flex; flex-direction: column; align-items: center; gap: 3px; } .logo-brand { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; color: var(--white); letter-spacing: 7px; line-height: 1; display: block; text-align: center; } .logo-sub-line { display: flex; align-items: center; gap: 7px; } .logo-rule-line { display: block; height: 1px; width: 13px; background: var(--gold); flex-shrink: 0; } .logo-service { font-family: 'Jost', sans-serif; font-size: 6.5px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: block; } .footer-logo { display: inline-block; margin: 0; } .footer-logo .site-logo-img { height: 160px; } .main-nav { display: flex; align-items: center; justify-content: flex-end; gap: 32px; } .main-nav a { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--white); transition: color 0.2s; position: relative; } .main-nav a:hover, .main-nav a.active { color: var(--gold); } @media (hover: hover) and (pointer: fine) { .main-nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform 0.25s var(--ease-smooth); } .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); } .nav-quote-btn::after { display: none; } } .nav-quote-btn { background: var(--gold); color: var(--white) !important; padding: 10px 20px; border-radius: var(--radius); font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: background 0.2s !important; } .nav-quote-btn:hover { background: var(--gold-dark) !important; color: var(--white) !important; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); transition: all 0.3s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: block; background: rgba(28, 43, 58, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.08); max-height: 0; overflow: hidden; transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1), padding 0.42s ease; padding: 0 24px; } .mobile-nav.open { max-height: 80vh; padding: 8px 24px 20px; } .mobile-nav a { display: block; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--white); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color 0.2s; } .mobile-nav a:hover { color: var(--gold); } .mobile-nav a:last-child { border-bottom: none; } /* ============================================================ HERO SECTIONS ============================================================ */ .hero { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--teal); overflow: hidden; min-height: 420px; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); will-change: transform; } .hero-overlay { position: absolute; inset: 0; background: rgba(28, 58, 69, 0.55); } .hero-content { position: relative; z-index: 2; padding: 80px 24px; max-width: 800px; } .hero-home { min-height: 620px; height: calc(var(--vh, 1vh) * 90); height: 90svh; height: 90dvh; } .hero-services { min-height: 360px; height: calc(var(--vh, 1vh) * 40); height: 40svh; height: 40dvh; } .hero-medium { min-height: 340px; height: calc(var(--vh, 1vh) * 35); height: 35svh; height: 35dvh; } .hero-contact { min-height: 320px; height: calc(var(--vh, 1vh) * 30); height: 30svh; height: 30dvh; } @media (min-width: 768px) { .hero-contact { min-height: 420px; height: 45svh; } } .hero-thankyou { min-height: 520px; height: calc(var(--vh, 1vh) * 60); height: 60svh; height: 60dvh; } /* Hero entrance animations */ @-webkit-keyframes heroFadeUp { from { opacity: 0; -webkit-transform: translateY(22px); transform: translateY(22px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .hero-location { -webkit-animation: heroFadeUp 0.8s 0.1s both cubic-bezier(0.22,1,0.36,1); animation: heroFadeUp 0.8s 0.1s both cubic-bezier(0.22,1,0.36,1); } .hero h1 { -webkit-animation: heroFadeUp 0.9s 0.2s both cubic-bezier(0.22,1,0.36,1); animation: heroFadeUp 0.9s 0.2s both cubic-bezier(0.22,1,0.36,1); } .hero-sub { -webkit-animation: heroFadeUp 0.8s 0.3s both cubic-bezier(0.22,1,0.36,1); animation: heroFadeUp 0.8s 0.3s both cubic-bezier(0.22,1,0.36,1); } .hero-tagline { -webkit-animation: heroFadeUp 0.8s 0.34s both cubic-bezier(0.22,1,0.36,1); animation: heroFadeUp 0.8s 0.34s both cubic-bezier(0.22,1,0.36,1); } .hero-badge { -webkit-animation: heroFadeUp 0.7s 0.44s both cubic-bezier(0.22,1,0.36,1); animation: heroFadeUp 0.7s 0.44s both cubic-bezier(0.22,1,0.36,1); } .hero-buttons { -webkit-animation: heroFadeUp 0.7s 0.52s both cubic-bezier(0.22,1,0.36,1); animation: heroFadeUp 0.7s 0.52s both cubic-bezier(0.22,1,0.36,1); } .hero-location { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; color: var(--gold); margin-bottom: 20px; display: block; } .hero h1 { font-size: var(--fs-h1); font-family: 'Cormorant Garamond', serif; font-weight: 300; color: var(--white); margin-bottom: 8px; } .hero-sub { font-size: var(--fs-hero-sub); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; color: var(--aqua); display: block; margin-bottom: 24px; } .hero-tagline { font-size: var(--fs-hero-tagline); color: var(--white); max-width: 580px; margin: 0 auto 36px; font-weight: 300; } .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ── Trust Bar ── */ @-webkit-keyframes trust-marquee { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } @keyframes trust-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .trust-bar { background: var(--teal); padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.08); overflow: hidden; position: relative; } /* Animated wrapper — contains two identical .trust-set groups */ .trust-track { display: flex; width: max-content; will-change: transform; -webkit-animation: trust-marquee 26s linear infinite; animation: trust-marquee 26s linear infinite; } /* Each group is independently sized — -50% of track = exactly one group */ .trust-set { display: flex; align-items: center; gap: 40px; padding: 0 20px; flex-shrink: 0; } .trust-sep { color: var(--gold); opacity: 0.55; font-size: 9px; flex-shrink: 0; user-select: none; } @media (prefers-reduced-motion: reduce) { .trust-track { -webkit-animation: none; animation: none; } .trust-set[aria-hidden="true"] { display: none; } .trust-set { flex-wrap: wrap; justify-content: center; padding: 0 16px; } *, *::before, *::after { scroll-behavior: auto !important; } [data-reveal], [data-reveal-group] > *, [data-reveal].is-visible, [data-reveal-group].is-visible > * { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; -webkit-transition: none !important; transition: none !important; } .hero-location, .hero h1, .hero-sub, .hero-tagline, .hero-badge, .hero-buttons, .hero-brand-word, .service-block-panel.exiting, .service-block-panel.active [data-reveal="right"], .service-block-panel.active [data-reveal="left"] { -webkit-animation: none !important; animation: none !important; } } .trust-item { display: flex; flex-shrink: 0; align-items: center; gap: 10px; color: var(--white); font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; } .trust-item svg { color: var(--gold); flex-shrink: 0; } /* Static trust bar (4-item grid, replaces scrolling marquee on homepage) */ .trust-bar-static { background: var(--teal); padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.08); } .trust-bar-items { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; } .trust-bar-item { display: flex; align-items: center; gap: 10px; color: var(--white); font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; } .trust-bar-item svg { color: var(--gold); flex-shrink: 0; } @media (max-width: 640px) { .trust-bar-items { gap: 20px; } .trust-bar-item { font-size: 11px; white-space: normal; } } /* Hero CTA button group */ .hero-cta-group { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; } @media (max-width: 767px) { .hero-cta-group { justify-content: center; } } /* Comparison cards */ .comparison-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } .comparison-card { border-radius: var(--radius-card); padding: 24px 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-sm); } .comparison-card--assura { background: rgba(189,152,83,0.1); border-color: var(--gold); } .comparison-card-header { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); } .comparison-card--assura .comparison-card-header { color: var(--gold); border-bottom-color: rgba(189,152,83,0.4); } .comparison-item { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.5); margin-bottom: 10px; } .comparison-item:last-child { margin-bottom: 0; } .comparison-item--pos { color: rgba(255,255,255,0.65); } .comparison-card--assura .comparison-item { color: var(--white); } .comparison-item svg { flex-shrink: 0; margin-top: 1px; } @media (min-width: 641px) and (max-width: 1023px) { .comparison-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comparison-card--assura { grid-column: 1 / -1; } } @media (max-width: 640px) { .comparison-cards { grid-template-columns: 1fr; gap: 12px; } .comparison-card { padding: 20px 16px; } } /* ── Why Assura ── */ .why-assura { background: var(--sand); text-align: center; } .why-assura .container { max-width: 680px; } .why-assura p { font-size: 17px; line-height: 1.8; color: var(--grey); } /* ── Services Icons ── */ .services-intro { background: var(--white); } .services-header { text-align: center; margin-bottom: 50px; } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .service-card { text-align: center; padding: 30px 20px; } .service-icon { width: 56px; height: 56px; color: var(--gold); margin: 0 auto 16px; } .service-card h3 { font-size: 20px; margin-bottom: 10px; } .service-card p { font-size: 14px; color: var(--grey); line-height: 1.6; } /* ── Pricing ── */ .pricing-section { background: var(--cream); } .pricing-header { text-align: center; margin-bottom: 50px; } .pricing-header h2 .break { display: block; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .pricing-card { background: var(--teal); padding: 36px 30px; border-radius: var(--radius-card); color: var(--white); } .pricing-card.featured { background: var(--gold); padding: 46px 30px; position: relative; } .pricing-badge { display: inline-block; background: var(--teal); color: var(--white); font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; } .pricing-tier-label { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.6); margin-bottom: 8px; } .pricing-card.featured .pricing-tier-label { color: rgba(28,58,69,0.7); } .pricing-name { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--white); margin-bottom: 6px; } .pricing-card.featured .pricing-name { color: var(--teal); } .pricing-price { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 400; color: var(--gold); margin-bottom: 4px; } .pricing-card.featured .pricing-price { color: var(--white); } .pricing-from { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 16px; } .pricing-divider { height: 1px; background: rgba(255,255,255,0.2); margin: 16px 0; } .pricing-card.featured .pricing-divider { background: rgba(28,58,69,0.2); } .pricing-features { list-style: none; margin-bottom: 24px; } .pricing-features li { font-size: 13px; color: var(--white-85); padding: 5px 0; padding-left: 18px; position: relative; line-height: 1.5; } .pricing-card.featured .pricing-features li { color: var(--teal); } .pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; } .pricing-card.featured .pricing-features li::before { color: var(--teal); } /* ── How It Works Steps ── */ .steps-section { background: var(--white); } .steps-header { text-align: center; margin-bottom: 50px; } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .step-item { text-align: center; padding: 20px; } .step-number { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 12px; } .step-item h3 { font-size: 20px; margin-bottom: 10px; } .step-item p { font-size: 14px; color: var(--grey); } /* ── Who We Help / Why Assura Split ── */ .split-section { display: grid; grid-template-columns: 1fr 1fr; } .split-panel { padding: 70px 50px; } .split-panel.cream { background: var(--cream); } .split-panel.white { background: var(--white); } .split-panel h3 { font-size: 28px; margin-bottom: 24px; } .icon-list { list-style: none; } .icon-list li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--grey); border-bottom: 1px solid rgba(0,0,0,0.06); } .icon-list li:last-child { border-bottom: none; } .icon-list .bullet { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; } /* ── CTA Banner ── */ .cta-banner { background: var(--teal); text-align: center; padding: 70px 24px; } .cta-banner h2 { color: var(--white); font-size: 36px; margin-bottom: 14px; } .cta-banner p { color: var(--aqua-muted); font-size: 16px; margin-bottom: 32px; } .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ── Contact Form Preview ── */ .contact-preview { background: var(--sand); } .contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 50px; align-items: start; } .contact-grid h2 { margin-bottom: 10px; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--grey); margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--white); font-family: 'Jost', sans-serif; font-size: 15px; color: var(--grey); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); } .form-group textarea { resize: vertical; min-height: 100px; } .btn-submit { width: 100%; padding: 16px; background: var(--gold); color: var(--white); border: none; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; border-radius: 2px; cursor: pointer; transition: background 0.2s; min-height: 50px; } .btn-submit:hover { background: var(--gold-dark); } .contact-info-box { background: var(--teal); padding: 32px; border-radius: var(--radius-card); } .contact-info-item { display: flex; align-items: flex-start; gap: 14px; color: var(--white); margin-bottom: 22px; } .contact-info-item:last-child { margin-bottom: 0; } .contact-info-item svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; } .contact-info-item a { color: var(--white); font-size: 16px; font-weight: 700; } .contact-info-item p { font-size: 14px; color: var(--aqua-muted); margin-top: 2px; } /* ── Services Page ── */ .service-block { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: center; padding: 60px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .service-block:last-child { border-bottom: none; } .service-block.reverse { grid-template-columns: 2fr 1fr; } .service-block.reverse .sb-icon { order: 2; } .service-block.reverse .sb-content { order: 1; } .sb-icon-wrap { display: flex; justify-content: center; align-items: center; } .sb-icon { width: 80px; height: 80px; color: var(--gold); } .sb-content h3 { font-size: 26px; margin-bottom: 16px; } .sb-content ul { list-style: none; } .sb-content ul li { font-size: 14px; color: var(--grey); padding: 5px 0; padding-left: 18px; position: relative; } .sb-content ul li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; } /* ── Add-ons Grid ── */ .addons-section { background: var(--white); } .addons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .addon-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; background: var(--white); box-shadow: var(--shadow-sm); transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth); } .addon-card h4 { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: var(--teal); margin-bottom: 6px; } .addon-price { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .addon-card p { font-size: 13px; color: var(--grey); line-height: 1.5; } .payment-note { font-size: 12px; color: var(--grey); margin-top: 24px; text-align: center; } /* ── How It Works Page ── */ .step-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .step-row:last-child { border-bottom: none; } .step-row.reverse .step-text { order: 1; } .step-row.reverse .step-num-col { order: 2; } .step-num-display { font-family: 'Cormorant Garamond', serif; font-size: 120px; font-weight: 300; color: var(--gold); line-height: 1; text-align: center; } .step-row-white { background: var(--white); } .step-row-cream { background: var(--cream); } .step-row-wrapper { padding: 0; } .step-row-wrapper .container { padding: 0 24px; } .step-text h3 { font-size: 28px; margin-bottom: 16px; } .step-text p { font-size: 16px; margin-bottom: 20px; color: var(--grey); } .step-meta { background: var(--teal); border-radius: var(--radius-card); padding: 20px 24px; margin-top: 16px; } .step-meta h4 { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--gold); margin-bottom: 10px; } .step-meta ul li { font-size: 13px; color: var(--white-85); padding: 4px 0; padding-left: 14px; position: relative; } .step-meta ul li::before { content: '–'; position: absolute; left: 0; color: var(--aqua); } /* ── FAQ Accordion ── */ .faq-section { background: var(--sand); } .faq-section .section-header { text-align: center; margin-bottom: 40px; } .accordion { max-width: 760px; margin: 0 auto; } .acc-item { border-bottom: 1px solid var(--border); } .acc-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; background: none; border: none; cursor: pointer; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 700; color: var(--teal); text-align: left; gap: 16px; } .acc-arrow { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; transition: transform 0.3s; } .acc-item.open .acc-arrow { transform: rotate(180deg); } .acc-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .acc-item.open .acc-content { max-height: 200px; } .acc-content p { font-size: 15px; color: var(--grey); padding-bottom: 20px; line-height: 1.7; } /* ── About Page ── */ .about-story { background: var(--sand); } .about-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 60px; align-items: start; } .about-photo-wrap { position: relative; } .about-photo { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-card); } .about-photo-placeholder { width: 100%; aspect-ratio: 3/4; background: var(--teal); border-radius: var(--radius-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; } .about-photo-placeholder svg { color: var(--aqua-muted); width: 60px; height: 60px; margin-bottom: 16px; } .about-photo-placeholder p { color: var(--aqua-muted); font-size: 13px; line-height: 1.5; } .about-text h2 { margin-bottom: 10px; } .about-text p { margin-bottom: 20px; font-size: 16px; line-height: 1.8; } .trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; } .trust-badge { border-top: 2px solid var(--gold); background: var(--white); padding: 18px 16px; border-radius: 2px; text-align: center; } .trust-badge svg { color: var(--gold); width: 28px; height: 28px; margin: 0 auto 8px; } .trust-badge strong { display: block; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 1px; } /* ── Competitive Advantages ── */ .advantages { background: var(--white); } .advantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; } .advantage-card { padding: 30px; border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth); } .advantage-card h4 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--teal); margin-bottom: 12px; } .advantage-card p { font-size: 14px; color: var(--grey); line-height: 1.7; } /* ── Testimonials ── */ .testimonials { background: var(--sand); } .testimonials-header { text-align: center; margin-bottom: 44px; } .testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .testimonial-card { background: var(--white); padding: 36px; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); position: relative; transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth); } .quote-mark { font-family: 'Cormorant Garamond', serif; font-size: 80px; line-height: 0.5; color: var(--gold); margin-bottom: 16px; display: block; } .testimonial-card blockquote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; color: var(--grey); line-height: 1.6; margin-bottom: 20px; } .testimonial-client { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 1px; } /* ── Service Area ── */ .service-area { background: var(--cream); padding: 30px 0; } .service-area p { max-width: 680px; margin: 0 auto; font-size: 15px; color: var(--grey); text-align: center; line-height: 1.8; } /* ── Thank You ── */ .thankyou-section { background: var(--sand); min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; } .thankyou-inner { padding: 60px 24px; } .thankyou-icon { width: 64px; height: 64px; color: var(--gold); margin: 0 auto 24px; } .thankyou-inner h2 { font-size: 38px; margin-bottom: 16px; } .thankyou-inner p { font-size: 16px; color: var(--grey); margin-bottom: 32px; } /* ============================================================ FOOTER components.js injects footer HTML into #site-footer. ============================================================ */ .site-footer { background: var(--teal); padding: 60px 0 0; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; } .footer-brand .footer-logo { margin: 0; } .footer-brand p { color: var(--aqua-muted); font-size: 14px; line-height: 1.6; } .footer-heading { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--gold); margin-bottom: 16px; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: var(--aqua-muted); font-size: 14px; transition: color 0.2s; } .footer-links a:hover { color: var(--gold); } .footer-contact p { color: var(--aqua-muted); font-size: 14px; margin-bottom: 6px; } .footer-contact a { color: var(--white); font-weight: 700; } .footer-social { margin-top: 14px; display: flex; gap: 14px; align-items: center; } .footer-social-link { color: var(--aqua-muted); display: flex; transition: color 0.2s var(--ease-smooth); } @media (hover: hover) and (pointer: fine) { .footer-social-link:hover { color: var(--gold); } } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 18px 24px; text-align: center; } .footer-bottom p { font-size: 12px; color: #777777; } /* ── Hero Badge ── */ .hero-brand-word { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-hero-brand); font-weight: 300; letter-spacing: 24px; text-indent: 24px; color: var(--white); line-height: 1; margin-bottom: 14px; -webkit-animation: heroFadeUp 0.7s 0.1s both ease-out; animation: heroFadeUp 0.7s 0.1s both ease-out; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(201,169,110,0.5); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; padding: 8px 18px; border-radius: 2px; margin-bottom: 28px; } .hero-badge svg { color: var(--gold); flex-shrink: 0; } /* ── Steps Grid ── */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .step-card { background: var(--white); border: 1px solid var(--border); padding: 32px 28px; border-radius: var(--radius-card); box-shadow: var(--shadow-sm); position: relative; transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth); } .step-number { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 300; color: var(--gold); opacity: 0.4; line-height: 1; margin-bottom: 12px; } .step-card h3 { margin-bottom: 10px; font-size: 20px; } .step-card p { font-size: 15px; line-height: 1.7; color: var(--grey); } /* ── Suburb Grid ── */ .suburb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; } .suburb-heading { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--gold); margin-bottom: 14px; } .suburb-col ul li { font-size: 14px; color: var(--grey); padding: 4px 0; border-bottom: 1px solid var(--border); } .suburb-col ul li:last-child { border-bottom: none; } /* ── Pricing Page ── */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 60px; } .plan-card { background: var(--navy); color: var(--white); padding: 28px 28px; border-radius: var(--radius-card); display: flex; flex-direction: column; } .plan-card.featured { border: 2px solid var(--gold); } .plan-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--white); margin-bottom: 8px; } .plan-desc { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.65); margin-bottom: 4px; font-style: italic; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 12px; } .plan-price { font-size: 38px; font-weight: 600; color: var(--gold); line-height: 1.1; margin: 10px 0 4px; } .plan-price-note { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 24px; } .plan-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 24px 0; } .plan-includes { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--gold); margin-bottom: 14px; display: block; } .plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--white-85); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .plan-features li:last-child { border-bottom: none; } .plan-features li svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; } .plan-badge { background: var(--gold); color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 4px 12px; border-radius: 2px; display: inline-block; margin-bottom: 8px; } /* ── Shared responsive check grids ── */ .check-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; } .check-grid > * { border-radius: var(--radius-card) !important; box-shadow: var(--shadow-sm); } /* ── Holiday & Extras Tables ── */ #holiday, #ongoing, #extras { scroll-margin-top: 200px; } .pricing-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; } .pricing-table th { background: var(--navy); color: var(--gold); font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 12px 16px; text-align: left; } .pricing-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--grey); vertical-align: top; } .pricing-table tr:last-child td { border-bottom: none; } .pricing-table tr:nth-child(even) td { background: var(--sand); } .pricing-table td:first-child { font-weight: 600; color: var(--navy); } /* ── No Lock-in Badge ── */ .no-lockin-badge { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; font-size: 13px; font-weight: 600; padding: 14px 24px; border-radius: var(--radius-card); margin: 40px 0; text-align: center; } /* ── FIFO Page ── */ .fifo-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 40px 0; } .fifo-check-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth); } .fifo-check-item svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; } .fifo-check-item h4 { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 4px; text-transform: none; } .fifo-check-item p { font-size: 13px; color: var(--grey); line-height: 1.5; } /* ── About Page ── */ .about-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-meet { align-items: start; } .about-meet-photo { position: sticky; top: calc(var(--header-height) + 16px); } .credential-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--grey); } .credential-list li:last-child { border-bottom: none; } .credential-list li svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; } .insured-badge { display: flex; align-items: center; gap: 12px; background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; padding: 16px 24px; border-radius: var(--radius-card); font-size: 14px; font-weight: 600; margin-top: 32px; } /* ── Plan Card Featured ── */ .plan-card-featured { border: 2px solid var(--gold); position: relative; } .plan-price span { font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.6); margin-left: 2px; } /* ── Pricing FAQ Accordion ── */ .faq-item { background: #fff; border-radius: 10px; margin-bottom: 8px; box-shadow: 0 2px 10px rgba(28,43,58,0.06); overflow: hidden; transition: box-shadow 0.2s ease; } .faq-item.open { box-shadow: 0 4px 20px rgba(28,43,58,0.11); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: none; border: none; cursor: pointer; font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 600; color: var(--navy); text-align: left; gap: 16px; transition: color 0.15s; -webkit-tap-highlight-color: transparent; } .faq-question:hover { color: var(--gold); } .faq-item.open .faq-question { color: var(--gold); } .faq-icon { color: var(--gold); flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .faq-item.open .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease; font-size: 15px; color: var(--grey); line-height: 1.75; padding: 0 22px; border-top: 0px solid transparent; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.25s ease, border-color 0.2s; } .faq-item.open .faq-answer { max-height: 2000px; padding: 16px 22px 20px; border-top: 1px solid rgba(212,207,198,0.5); } .faq-answer p { margin: 0 0 12px; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer ul { list-style: disc; padding-left: 22px; margin: 0 0 12px; } .faq-answer ul li { margin-bottom: 6px; } .faq-answer a { color: var(--gold); font-weight: 600; } /* ── Hero Contact ── */ .hero-contact .hero-content { padding-bottom: 80px; } /* ============================================================ RESPONSIVE BREAKPOINTS Mobile ≤767px | Tablet 768–1023px | Desktop ≥1024px ============================================================ */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: repeat(2, 1fr); } .suburb-grid { grid-template-columns: repeat(2, 1fr); } .plan-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } .fifo-checklist { grid-template-columns: 1fr; } .about-section { grid-template-columns: 1fr; gap: 32px; } .about-meet-photo { position: static; order: -1; } .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .pricing-card.featured { padding: 36px 30px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { h1, h2, h3 { font-weight: 400 !important; } .hero-content { padding: 60px 20px; } .hero-buttons { flex-direction: column; align-items: center; } .hero-buttons .btn { width: 100%; max-width: 320px; justify-content: center; } .trust-item { font-size: 11px; letter-spacing: 0.5px; } .trust-track { -webkit-animation-duration: 16s; animation-duration: 16s; } .services-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .suburb-grid { grid-template-columns: 1fr 1fr; } .plan-grid { grid-template-columns: 1fr; max-width: 100%; } .fifo-checklist { grid-template-columns: 1fr; } .about-section { grid-template-columns: 1fr; } .pricing-grid { max-width: 100%; } .split-section { grid-template-columns: 1fr; } .split-panel { padding: 40px 24px; } .contact-grid { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; } .service-block { grid-template-columns: 1fr; } .service-block.reverse .sb-icon { order: 0; } .service-block.reverse .sb-content { order: 0; } .addons-grid { grid-template-columns: 1fr; } .advantages-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .trust-badges { grid-template-columns: 1fr; } .step-row { grid-template-columns: 1fr; gap: 20px; } .step-row.reverse .step-text { order: 0; } .step-row.reverse .step-num-col { order: 0; } .step-num-display { font-size: 80px; } .footer-grid { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; align-items: center; } .cta-buttons .btn { width: 100%; max-width: 320px; justify-content: center; } .main-nav { display: none; } .hamburger { display: flex; } .header-inner { display: flex; justify-content: space-between; height: var(--header-height-mobile); } .site-logo-img { height: 86px; } .logo-mark-svg { width: 62px; height: 28px; } .logo-brand { font-size: 15px; letter-spacing: 4px; } .logo-service { font-size: 5px; letter-spacing: 2px; } .site-logo { gap: 3px; } .section-pad { padding: 56px 0; } .container { padding: 0 16px; } .split-panel { padding: 40px 16px; } .check-grid { grid-template-columns: 1fr !important; } .check-grid > * { grid-column: auto !important; max-width: 100% !important; width: 100% !important; } } /* ═══════════════════════════════════════════════════════ MOBILE APP UX — Premium 2026 feel ═══════════════════════════════════════════════════════ */ /* ── Horizontal snap carousels ── */ @media (max-width: 767px) { .snap-carousel { display: flex !important; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px !important; padding: 14px 20px 16px !important; margin: 0 -16px !important; scrollbar-width: none; grid-template-columns: unset !important; } .snap-carousel::-webkit-scrollbar { display: none; } .snap-carousel > * { flex: 0 0 82vw !important; scroll-snap-align: start; scroll-snap-stop: always; } .plan-grid.snap-carousel > * { flex: 0 0 88vw !important; scroll-snap-align: start; } } /* ── Carousel dot indicators ── */ .carousel-dots { display: none; } @media (max-width: 767px) { .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; margin-bottom: 8px; } .carousel-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(201, 169, 110, 0.3); transition: background 0.25s ease, transform 0.25s ease; cursor: pointer; border: none; padding: 0; } .carousel-dots .dot.active { background: var(--gold); transform: scale(1.4); } } /* ── Touch press states ── */ @media (max-width: 767px) { .step-card, .testimonial-card, .plan-card, .fifo-check-item, .advantage-card { transition: transform 0.12s ease, box-shadow 0.12s ease !important; -webkit-tap-highlight-color: transparent; } .step-card:active, .testimonial-card:active, .plan-card:active, .fifo-check-item:active { transform: scale(0.97) !important; } .btn { -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.96) translateY(0) !important; } } /* ── Disable hover lift on touch devices (prevents jump at swipe start) ── */ @media (hover: none) { .step-card:hover, .testimonial-card:hover, .fifo-check-item:hover { transform: none; box-shadow: 0 4px 24px rgba(28,43,58,0.09); border-color: var(--border); } } /* ── Sticky mobile bottom CTA bar ── */ .mobile-cta-bar { display: none; } @media (max-width: 767px) { .mobile-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(20, 32, 46, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(201, 169, 110, 0.25); transform: translateY(0); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-cta-bar.hidden { transform: translateY(110%); } .mobile-cta-bar { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-cta-bar .btn { flex: 1; text-align: center; justify-content: center; font-size: 12px; padding: 11px 8px; white-space: nowrap; } body { padding-bottom: 80px; } html { scroll-padding-bottom: 80px; } } /* ── Mobile hero — tighter, more app-like ── */ @media (max-width: 767px) { .hero { min-height: 92svh; } .hero-home { min-height: 560px; height: calc(var(--vh, 1vh) * 92); height: 92svh; height: 92dvh; } .hero-services, .hero-medium, .hero-contact { min-height: 320px; height: auto; } .hero-content { padding: 80px 20px 40px; } .hero-location { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 12px; opacity: 0.75; } .hero-brand-word { letter-spacing: clamp(0.875rem, 4vw, 1.5rem); text-indent: clamp(0.875rem, 4vw, 1.5rem); margin-bottom: 10px; } .hero h1 { line-height: 1.15 !important; margin-bottom: 16px; } .hero-tagline { margin-bottom: 24px; } .hero-buttons .btn { padding: 14px 20px; border-radius: 50px; font-size: 14px; } } /* ── Service pillar tabs — mobile only ── */ .service-tabs { display: none; } @media (max-width: 767px) { .service-tabs { display: flex; overflow-x: auto; gap: 8px; padding: 0 16px 8px; margin: 0 -16px 24px; scrollbar-width: none; } .service-tabs::-webkit-scrollbar { display: none; } .service-tab-btn { flex: 0 0 auto; padding: 8px 18px; border-radius: 50px; border: 1.5px solid rgba(201, 169, 110, 0.4); background: transparent; color: var(--gold); font-size: 12px; font-family: inherit; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: background 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth); white-space: nowrap; -webkit-tap-highlight-color: transparent; } .service-tab-btn.active { background: var(--gold); border-color: var(--gold); color: var(--navy); } .service-block-panel { display: none; } .service-block-panel.active { display: block; } /* Old panel exits upward */ .service-block-panel.exiting { display: block !important; animation: svcExit 0.28s var(--ease-smooth) forwards; pointer-events: none; } /* Image: slides up from below */ .service-block-panel.active [data-reveal="right"] { animation: svcImgEnter 0.6s var(--ease-fluid) both; } /* Text: falls in almost simultaneously with image */ .service-block-panel.active [data-reveal="left"] { animation: svcTextEnter 0.62s var(--ease-fluid) 0.04s both; } @keyframes svcExit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } /* Photo swipes up into place from below */ @keyframes svcImgEnter { from { opacity: 0.2; transform: translateY(44px); } to { opacity: 1; transform: translateY(0); } } /* Text falls down from under the photo, fading in */ @keyframes svcTextEnter { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } } } @media (min-width: 768px) { .service-block-panel { display: block !important; } } /* ── Service block images fill column height (desktop only) ── */ @media (min-width: 768px) { .service-block { align-items: stretch !important; } .service-block img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; border-radius: var(--radius-card); display: block; aspect-ratio: unset !important; } } /* ── Card glassmorphism on mobile ── */ @media (max-width: 767px) { .step-card { background: rgba(255, 255, 255, 0.97); border-radius: calc(var(--radius-card) * 2) !important; box-shadow: 0 4px 24px rgba(28, 43, 58, 0.09); border: 1px solid rgba(201, 169, 110, 0.12); } .testimonial-card { border-radius: calc(var(--radius-card) * 2) !important; box-shadow: 0 4px 24px rgba(28, 43, 58, 0.09); } .plan-card { border-radius: calc(var(--radius-card) * 2) !important; } .section-pad { padding: 48px 0 !important; } } /* ═══════════════════════════════════════════════════════ SERVICES PAGE — Mobile stacked layout ═══════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Tight section padding and heading */ #svcPillarsSection { padding-top: 20px !important; padding-bottom: 28px !important; } #svcPillarsSection .svc-pillars-head { margin-bottom: 8px !important; } /* Kill all margin/padding between tabs and image */ .service-tabs { margin: 0 -16px 8px !important; padding-bottom: 4px !important; } .service-block-panel { margin: 0 !important; padding: 0 !important; } /* Stack image on top, text below — overrides inline grid style */ .service-block-panel .service-block { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; border-bottom: none !important; } /* Image container always first */ .service-block-panel .service-block [data-reveal="right"] { order: 1; margin: 0 !important; padding: 0 !important; } /* Text container always second */ .service-block-panel .service-block [data-reveal="left"] { order: 2; margin: 0 !important; padding: 12px 0 0 !important; } /* Compact text inside the panel */ .service-block-panel h3 { font-size: 20px !important; margin-bottom: 4px !important; } .service-block-panel .section-label { font-size: 10px !important; } .service-block-panel .divider-left { margin: 8px 0 !important; } .service-block-panel p { font-size: 13px !important; line-height: 1.6 !important; margin-top: 8px !important; } /* Proportional image — 3:2 ratio, no fixed height */ .service-block-panel .service-block [data-reveal="right"] img { width: 100% !important; height: auto !important; min-height: unset !important; aspect-ratio: 3/2 !important; object-fit: cover !important; border-radius: 6px !important; display: block !important; } /* Suppress scroll-reveal transitions inside panels on mobile */ .service-block-panel [data-reveal] { transition: none !important; } } /* ═══════════════════════════════════════════════════════ PRICING PAGE — Mobile compaction ═══════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── Plan cards: ~15% smaller, peek layout ── */ .plan-grid.snap-carousel > * { flex: 0 0 80vw !important; /* was 88vw — shows ~14vw of next card */ scroll-snap-align: start !important; } .plan-card { padding: 18px !important; } .plan-name { font-size: 20px !important; margin-bottom: 6px !important; } .plan-desc { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 8px !important; padding-bottom: 10px !important; } .plan-price { font-size: 30px !important; margin: 6px 0 2px !important; } .plan-features li { font-size: 11px !important; padding: 4px 0 !important; } .plan-badge { font-size: 9px !important; padding: 3px 10px !important; margin-bottom: 6px !important; } /* Tighter heading above plan cards */ .container:has(.plan-grid) > [data-reveal] { margin-bottom: 24px !important; } /* ── Tailored Extras: 2-column mini card grid ── */ #extrasTable { display: block; } #extrasTable thead { display: none; } #extrasTable tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #extrasTable tr { display: flex; flex-direction: column; padding: 12px 10px; border: 1px solid var(--border) !important; border-radius: 8px; background: var(--white) !important; border-bottom: none !important; } #extrasTable tr:nth-child(even) td { background: transparent !important; } #extrasTable td { display: block; padding: 0 !important; border: none !important; background: transparent !important; vertical-align: unset; } #extrasTable td:first-child { font-size: 11px !important; font-weight: 600; color: var(--navy) !important; line-height: 1.3; margin-bottom: 5px; } #extrasTable td:nth-child(2) { font-size: 12px !important; font-weight: 700; color: var(--gold) !important; } #extrasTable td:nth-child(3) { font-size: 10px !important; color: var(--aqua-muted) !important; margin-top: 3px; line-height: 1.3; } } /* ── What We Offer cards ── */ .offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; } .offer-card { background: var(--white); border: 1px solid rgba(201, 169, 110, 0.2); border-top: 3px solid var(--gold); border-radius: var(--radius-card); padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth); } .offer-card p { flex: 1; line-height: 1.8; } .offer-card .btn { align-self: flex-start; margin-top: auto; } @media (max-width: 767px) { .offer-grid { grid-template-columns: 1fr; gap: 20px; } } @media (hover: hover) and (pointer: fine) { .addon-card:hover, .advantage-card:hover, .testimonial-card:hover, .step-card:hover, .fifo-check-item:hover, .offer-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold); } }