/* ========================================================================== Paws 4 Thought Brighton — 2026 rebuild Design system: warm coastal-woodland palette, editorial serif display type, full-bleed sliding hero, organic wave dividers, quiet motion. ========================================================================== */ /* Fonts are now loaded via in each page's , not @import here -- @import blocks CSS parsing on a second network round-trip before the browser even discovers the hero background-image, which was directly responsible for a ~14s Largest Contentful Paint. */ :root{ --navy: #234f31; /* anchor dark — warm forest green, ties to the woodland photography */ --navy-deep: #122b1c; --cream: #faf5ea; --cream-2: #f2ead9; --paper: #fffdf8; --amber: #dd7e3a; --amber-dark: #b95f24; --amber-light: #f3a869; --sage: #7c9473; --ink: #241c14; --ink-soft: #4a4038; --line: rgba(30,51,38,.14); --gold-glow: rgba(221,126,58,.35); --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius: 22px; --radius-sm: 12px; --shadow-soft: 0 20px 60px -20px rgba(14,26,18,.25); --shadow-lift: 0 30px 80px -24px rgba(14,26,18,.35); --container: 1180px; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--sans); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } h1,h2,h3,h4{ font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -0.01em; } p{ margin: 0 0 1em; } .container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; } .eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-family: var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color: var(--amber-dark); } .hero .eyebrow{ color:#fff; background: rgba(10,16,10,.55); backdrop-filter: blur(4px); padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); } .hero .eyebrow::before{ background: var(--amber-light); } .eyebrow::before{ content:""; width:26px; height:2px; background: var(--amber); display:inline-block; border-radius: 2px; } /* Noise / grain texture, subtle */ .grain{ position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------- Nav ---------------- */ .site-nav{ position: fixed; top:0; left:0; right:0; z-index: 100; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); transition: padding .35s ease, box-shadow .35s ease, border-color .35s ease; } /* Frosted-glass background lives on a ::before, not on .site-nav itself -- an element with backdrop-filter becomes the containing block for any position:fixed descendants (this is correct per spec and Safari enforces it), which was trapping the mobile .nav-links dropdown inside the navbar's own small box instead of letting it cover the full screen. */ .site-nav::before{ content:""; position:absolute; inset:0; z-index:-1; background: rgba(16,26,19,.62); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); transition: background .35s ease; } .site-nav .container{ display:flex; align-items:center; justify-content:space-between; } .site-nav .brand-word{ color:#fff; } .site-nav .nav-links a{ color:#fff; } .site-nav.scrolled{ padding: 10px 0; border-bottom-color: transparent; box-shadow: 0 8px 30px -18px rgba(14,26,18,.35); } .site-nav.scrolled::before{ background: rgba(250,245,234,.92); } .site-nav.scrolled .brand-word{ color: var(--navy); } .site-nav.scrolled .nav-links a{ color: var(--navy); } @media (max-width:1000px){ .site-nav .nav-links a{ color: var(--navy); } } .brand{ display:flex; align-items:center; gap:12px; font-family: var(--serif); } .brand img{ height: 46px; width:auto; transition: height .3s ease; } .site-nav.scrolled .brand img{ height: 38px; } .brand-text{ display:flex; flex-direction:column; line-height:1.2; } .brand-word{ font-size: 1.15rem; font-weight:600; color: var(--navy); } .brand-word span{ color: var(--amber-light); } .site-nav.scrolled .brand-word span{ color: var(--amber-dark); } .brand-est{ font-size:.64rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.6); margin-top:2px; } .site-nav.scrolled .brand-est{ color: rgba(20,34,24,.5); } .nav-links{ display:flex; align-items:center; gap: 30px; list-style:none; margin:0; padding:0; } .nav-links a{ font-weight:600; font-size:.92rem; color: var(--navy); position: relative; padding: 4px 0; } .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--amber); transition: right .3s ease; } .nav-links a:hover::after, .nav-links a.active::after{ right:0; } .nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; } .nav-toggle span{ display:block; width:26px; height:3px; background:#fff; margin:6px 0; border-radius:2px; transition:.3s; box-shadow: 0 1px 3px rgba(0,0,0,.35); } .site-nav.scrolled .nav-toggle span{ background: var(--navy); box-shadow:none; } /* ---------------- Hero / slider ---------------- */ .hero{ position: relative; width:100%; height: 100svh; min-height: 560px; display:flex; align-items:flex-end; overflow:hidden; color:#fff; isolation: isolate; } .hero-slides{ position:absolute; inset:0; } .hero-slide{ position:absolute; inset:0; opacity:0; transform: scale(1.08); background-size: cover; background-position: center; transition: opacity 1.8s ease, transform 7s ease; will-change: opacity, transform; } .hero-slide.is-active{ opacity:1; transform: scale(1); z-index:1; } .hero::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(180deg, rgba(14,26,18,.32) 0%, rgba(14,26,18,.18) 32%, rgba(14,26,18,.55) 78%, rgba(14,26,18,.85) 100%); } .hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: radial-gradient(120% 90% at 15% 0%, rgba(221,126,58,.22), transparent 55%); } .hero-content{ position:relative; z-index:3; width:100%; padding-bottom: 108px; } .hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 22px; } .hero-badge{ display:inline-flex; align-items:center; gap:7px; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); padding: 7px 14px 7px 10px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; } .hero-badge svg{ width:15px; height:15px; color: var(--amber-light); flex-shrink:0; } .hero h1{ font-size: clamp(2.4rem, 5.6vw, 4.6rem); color:#fff; max-width: 16ch; margin-bottom:.28em; text-wrap: balance; } .hero h1 em{ font-style: italic; color: var(--amber-light); font-weight:500; } .hero-sub{ font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 46ch; color: rgba(255,255,255,.88); margin-bottom: 30px; font-weight:500; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .hero-actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; } .btn{ display:inline-flex; align-items:center; gap:10px; padding: 15px 28px; border-radius: 999px; font-weight:700; font-size:.95rem; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; border: 1px solid transparent; cursor:pointer; } .btn svg{ width:18px; height:18px; } .btn-primary{ background: var(--amber); color:#fff; box-shadow: 0 16px 34px -12px var(--gold-glow); } .btn-primary:hover{ transform: translateY(-3px); background: var(--amber-dark); box-shadow: 0 20px 40px -12px var(--gold-glow); } .btn-ghost{ background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); } .btn-ghost:hover{ background: rgba(255,255,255,.2); transform: translateY(-3px); } .btn-dark{ background: var(--navy); color:#fff; box-shadow: 0 16px 34px -14px rgba(20,34,24,.6); } .btn-dark:hover{ transform: translateY(-3px); background: var(--navy-deep); } .hero-dots{ position:absolute; right: 28px; bottom: 130px; z-index:3; display:flex; flex-direction:column; gap:10px; } .hero-dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.4); border:0; padding:0; cursor:pointer; transition: all .3s ease; } .hero-dot.is-active{ background: var(--amber-light); height:26px; border-radius:6px; } .scroll-cue{ position:absolute; left:28px; bottom:36px; z-index:3; display:flex; align-items:center; gap:10px; color: rgba(255,255,255,.75); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } .scroll-cue .line{ width:1px; height:34px; background: linear-gradient(to bottom, rgba(255,255,255,.9), transparent); animation: scrollpulse 2.2s ease-in-out infinite; } @keyframes scrollpulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } } /* wave divider */ .wave{ position:relative; display:block; width:100%; line-height:0; z-index: 4; margin-top:-2px; } .wave svg{ width:100%; height: 90px; display:block; } .wave.flip{ transform: rotate(180deg); margin-top:0; margin-bottom:-2px; } /* ---------------- Sections ---------------- */ section{ position:relative; } .section{ padding: 118px 0; } .section-tight{ padding: 80px 0; } .section-navy{ background: var(--navy); color:#fff; } .section-navy .eyebrow{ color: var(--amber-light); } .section-cream2{ background: var(--cream-2); } .section-head{ max-width: 720px; margin-bottom: 56px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--navy); } .section-navy .section-head h2{ color:#fff; } .section-head .lede{ font-size: 1.08rem; color: var(--ink-soft); } .section-navy .section-head .lede{ color: rgba(255,255,255,.78); } /* reveal-on-scroll — several entrance styles for a livelier, less repetitive feel */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible{ opacity:1; transform:none; } .reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; } .reveal-delay-3{ transition-delay:.24s; } .reveal-delay-4{ transition-delay:.32s; } .reveal-left{ opacity:0; transform: translateX(-46px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,.8,.24,1); } .reveal-left.is-visible{ opacity:1; transform:none; } .reveal-right{ opacity:0; transform: translateX(46px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,.8,.24,1); } .reveal-right.is-visible{ opacity:1; transform:none; } .reveal-scale{ opacity:0; transform: scale(.88); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1.15); } .reveal-scale.is-visible{ opacity:1; transform:none; } .reveal-rise{ opacity:0; transform: translateY(54px) rotate(-1.2deg); transition: opacity 1s ease, transform 1s cubic-bezier(.16,.85,.2,1); } .reveal-rise.is-visible{ opacity:1; transform:none; } /* floating paw prints — ambient decorative drift */ .paw-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; } .paw-field .p{ position:absolute; width: 26px; height:26px; color: rgba(255,255,255,.35); animation: paw-drift linear infinite; opacity:0; } .hero .paw-field .p{ color: rgba(255,255,255,.55); } .section .paw-field{ z-index:0; } .section .paw-field .p{ color: rgba(221,126,58,.3); } .section-navy .paw-field{ z-index:0; } .section-navy .paw-field .p{ color: rgba(255,255,255,.16); } .cta-band .paw-field .p{ color: rgba(255,255,255,.18); } @keyframes paw-drift{ 0%{ transform: translateY(12%) translateX(0) rotate(-8deg) scale(.8); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform: translateY(-118%) translateX(60px) rotate(18deg) scale(1.15); opacity:0; } } /* sitewide floating paw layer — fixed to the viewport, rises continuously on every page regardless of scroll position */ .paw-layer-page{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; } .paw-layer-page .p{ position:absolute; bottom:-80px; opacity:0; animation: paw-rise-a linear infinite; } .paw-layer-page .p.b{ animation-name: paw-rise-b; } .paw-layer-page .p.c1{ color: rgba(35,79,49,.20); } .paw-layer-page .p.c2{ color: rgba(221,126,58,.26); } @keyframes paw-rise-a{ 0%{ transform: translateY(0) translateX(0) rotate(-8deg); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform: translateY(-120vh) translateX(50px) rotate(20deg); opacity:0; } } @keyframes paw-rise-b{ 0%{ transform: translateY(0) translateX(0) rotate(8deg); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform: translateY(-120vh) translateX(-50px) rotate(-20deg); opacity:0; } } @media (max-width: 680px){ .paw-layer-page .p:nth-child(n+13){ display:none; } } /* service-area map embed */ .map-frame{ position:relative; width:100%; aspect-ratio: 16/7; margin-top:36px; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft); border:1px solid var(--line); } .map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } @media (max-width: 680px){ .map-frame{ aspect-ratio: 4/5; } } /* feature rows dropping in one at a time */ .feature-row.drop{ opacity:0; transform: translateY(-38px) scale(.97); transition: opacity .6s cubic-bezier(.2,.8,.25,1), transform .6s cubic-bezier(.2,.8,.25,1); } .feature-row.drop.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .paw-field{ display:none; } .paw-layer-page{ display:none; } .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-rise, .feature-row.drop{ opacity:1 !important; transform:none !important; transition:none !important; } .hero-slide{ transition:none !important; } } /* ---------------- Cards / grids ---------------- */ .grid{ display:grid; gap: 28px; } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } .card{ background: var(--paper); border-radius: var(--radius); padding: 34px 30px; box-shadow: var(--shadow-soft); border: 1px solid var(--line); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; position: relative; overflow:hidden; } .card::before{ content:""; position:absolute; inset:0; opacity:0; transition: opacity .4s ease; background: linear-gradient(135deg, var(--gold-glow), transparent 60%); pointer-events:none; } .card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lift); } .card:hover::before{ opacity:1; } .card-icon{ width:56px; height:56px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); color:#fff; margin-bottom: 20px; box-shadow: 0 12px 24px -10px var(--gold-glow); } .card-icon svg{ width:26px; height:26px; } .card h3{ font-size: 1.28rem; color: var(--navy); margin-bottom:.4em; } .card p{ color: var(--ink-soft); font-size:.98rem; margin-bottom:0; } /* "see live reviews on Google" -- arrow left, text right */ .google-reviews-cta{ display:flex; align-items:center; gap:20px; margin: 48px auto 0; max-width:540px; padding:22px 26px; background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); text-decoration:none; transition: transform .3s ease, box-shadow .3s ease; } .google-reviews-cta:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); } .google-reviews-cta .grc-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); color:#fff; flex-shrink:0; box-shadow: 0 12px 24px -10px var(--gold-glow); } .google-reviews-cta .grc-icon svg{ width:22px; height:22px; } .google-reviews-cta .grc-text strong{ display:block; color:var(--navy); font-family:var(--serif); font-size:1.12rem; } .google-reviews-cta .grc-text span{ display:block; color:var(--ink-soft); font-size:.86rem; margin-top:3px; } @media (max-width:520px){ .google-reviews-cta{ padding:18px 20px; gap:16px; } .google-reviews-cta .grc-text strong{ font-size:1rem; } } .badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin: 26px 0 0; } .pill{ display:inline-flex; align-items:center; gap:7px; background: var(--cream-2); color: var(--navy); border:1px solid var(--line); padding:9px 16px; border-radius:999px; font-size:.82rem; font-weight:700; } .pill svg{ width:15px; height:15px; color: var(--amber-dark); } /* image + text split */ .split{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; } .split-media{ position:relative; } .split-media img{ border-radius: var(--radius); box-shadow: var(--shadow-lift); width:100%; height:520px; object-fit:cover; } .split-media .accent-frame{ position:absolute; inset: 20px -20px -20px 20px; border-radius: var(--radius); background: linear-gradient(135deg, var(--cream-2), var(--paper)); border: 1.5px solid var(--amber); box-shadow: 0 18px 40px -22px var(--gold-glow); z-index:-1; overflow:hidden; } .split-media .accent-frame::after{ content:""; position:absolute; inset:0; background-image: radial-gradient(var(--amber) 1.6px, transparent 1.6px); background-size: 16px 16px; opacity:.22; } .split-media .float-card{ position:absolute; left:-28px; bottom:-28px; background:#fff; border-radius: 18px; padding: 18px 22px; box-shadow: var(--shadow-lift); display:flex; align-items:center; gap:14px; max-width: 260px; } .split-media .float-card .num{ font-family: var(--serif); font-size:1.9rem; color: var(--amber-dark); font-weight:700; } .split-media .float-card small{ display:block; color: var(--ink-soft); font-size:.78rem; font-weight:600; line-height:1.3; } /* gallery */ .gallery{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .gallery a{ display:block; border-radius: 16px; overflow:hidden; position:relative; aspect-ratio: 3/4; } .gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .gallery a:hover img{ transform: scale(1.08); } .gallery a::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(14,26,18,.55)); opacity:0; transition: opacity .4s ease; } .gallery a:hover::after{ opacity:1; } /* reviews carousel — continuous auto-scroll marquee, pauses on hover/touch */ .review-track-wrap{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .review-track{ display:flex; gap: 22px; overflow-x:auto; padding: 6px 6px 30px; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor: grab; } .review-track:active{ cursor: grabbing; } .review-track::-webkit-scrollbar{ display:none; } .review-card{ scroll-snap-align:start; flex: 0 0 320px; background:#fff; border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-soft); border:1px solid var(--line); } /* alternate "feature strip" layout — used to break up repeated card grids */ .feature-strip{ display:flex; flex-direction:column; border-top:1px solid var(--line); } .feature-row{ display:grid; grid-template-columns: 64px 1fr; gap:24px; align-items:flex-start; padding: 30px 6px; border-bottom:1px solid var(--line); transition: padding-left .35s ease, background .35s ease; } .feature-row:hover{ padding-left: 16px; background: rgba(221,126,58,.05); } .feature-row .f-icon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--cream-2); color: var(--amber-dark); flex-shrink:0; } .feature-row .f-icon svg{ width:26px; height:26px; } .feature-row h4{ font-family: var(--serif); font-size:1.2rem; color: var(--navy); margin:0 0 .3em; } .feature-row p{ margin:0; color: var(--ink-soft); } .section-navy .feature-strip, .section-navy .feature-row{ border-color: rgba(255,255,255,.14); } .section-navy .feature-row h4{ color:#fff; } .section-navy .feature-row p{ color: rgba(255,255,255,.72); } .section-navy .feature-row .f-icon{ background: rgba(255,255,255,.1); color: var(--amber-light); } .section-navy .feature-row:hover{ background: rgba(255,255,255,.05); } .review-stars{ display:flex; gap:3px; color: var(--amber); margin-bottom:14px; } .review-stars svg{ width:16px; height:16px; } .review-quote{ font-family: var(--serif); font-size:1.02rem; color: var(--navy); font-style:italic; line-height:1.5; } .review-person{ display:flex; align-items:center; gap:12px; margin-top:20px; } .review-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; } .review-person strong{ display:block; font-size:.92rem; color:var(--navy); } .review-person span{ font-size:.78rem; color: var(--ink-soft); } /* stat strip */ .stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; } .stat{ text-align:center; } .stat .n{ font-family: var(--serif); font-size: clamp(2.1rem,3.6vw,3rem); color: var(--amber-light); font-weight:600; } .stat .l{ font-size:.82rem; color: rgba(255,255,255,.72); font-weight:600; letter-spacing:.03em; } /* credential photos -- licence, diploma, first aid certificate */ .cred-gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:44px; } .cred-card{ display:block; width:100%; background: var(--paper); border-radius: var(--radius-sm); overflow:hidden; box-shadow: var(--shadow-soft); text-decoration:none; transition: transform .3s ease, box-shadow .3s ease; border:0; padding:0; font-family:inherit; cursor:pointer; } .cred-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); } .cred-card img{ display:block; width:100%; height:260px; object-fit:contain; background: var(--cream-2); padding:14px; } .cred-card span{ display:block; padding:12px 14px 16px; font-size:.82rem; font-weight:700; color: var(--navy); text-align:center; } @media (max-width:680px){ .cred-gallery{ grid-template-columns: 1fr; } .cred-card img{ height:320px; } } /* lightbox for credential photos */ .lightbox{ display:none; position:fixed; inset:0; z-index:500; background: rgba(14,26,18,.88); align-items:center; justify-content:center; padding:40px 24px; } .lightbox.is-open{ display:flex; } .lightbox figure{ margin:0; max-width:min(560px,90vw); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:14px; } .lightbox img{ max-width:100%; max-height:76vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); background:#fff; } .lightbox figcaption{ color:#fff; font-weight:700; font-size:.92rem; text-align:center; } .lightbox-close{ position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; transition: background .2s ease; } .lightbox-close:hover{ background: rgba(255,255,255,.24); } @media (max-width:680px){ .lightbox-close{ top:14px; right:14px; width:40px; height:40px; } } /* CTA band */ .cta-band{ background: linear-gradient(120deg, var(--navy), var(--navy-deep)); border-radius: 32px; padding: 64px 56px; color:#fff; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .cta-band::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, var(--gold-glow), transparent 70%); top:-160px; right:-120px; pointer-events:none; } .cta-band h3{ font-size: clamp(1.6rem,2.6vw,2.2rem); color:#fff; max-width: 18ch; } .cta-band p{ color: rgba(255,255,255,.75); max-width: 40ch; } /* footer */ footer{ background: var(--navy-deep); color: rgba(255,255,255,.75); padding: 72px 0 28px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; } .footer-brand img{ height:44px; margin-bottom:16px; } footer h4{ color:#fff; font-family: var(--sans); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; } footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } footer a{ color: rgba(255,255,255,.75); font-size:.92rem; transition: color .2s ease; } footer a:hover{ color: var(--amber-light); } .footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.8rem; } .footer-bottom .credit{ color: rgba(255,255,255,.55); } .footer-bottom .credit a{ color: rgba(255,255,255,.75); font-weight:700; text-decoration: none; transition: color .2s ease; } .footer-bottom .credit a:hover{ color: var(--amber-light); } /* whatsapp floating button */ .wa-float{ position: fixed; right: 24px; bottom: 24px; z-index: 200; width: 60px; height:60px; border-radius: 50%; background: #25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 16px 34px -10px rgba(37,211,102,.6); animation: wa-pulse 2.6s ease-in-out infinite; transition: transform .25s ease; } .wa-float:hover{ transform: scale(1.08); } .wa-float svg{ width:30px; height:30px; } @keyframes wa-pulse{ 0%,100%{ box-shadow: 0 16px 34px -10px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); } 50%{ box-shadow: 0 16px 34px -10px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0); } } /* breadcrumb */ .breadcrumb{ font-size:.8rem; color: rgba(255,255,255,.7); display:flex; gap:8px; margin-bottom:18px; } .breadcrumb a{ color: rgba(255,255,255,.7); } .breadcrumb a:hover{ color:#fff; } /* utility */ .center{ text-align:center; } .mx-auto{ margin-left:auto; margin-right:auto; } .mt-lg{ margin-top: 64px; } /* -------------- responsive -------------- */ @media (max-width: 1000px){ .nav-links{ position:fixed; inset:0 0 0 auto; width: min(320px,80vw); background: var(--cream); flex-direction:column; align-items:flex-start; padding: 100px 32px 32px; box-shadow: -20px 0 60px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); gap:26px; } .nav-links.open{ transform: translateX(0); } .nav-toggle{ display:block; } .grid-3{ grid-template-columns: 1fr 1fr; } .footer-grid{ grid-template-columns: 1fr 1fr; } .split{ grid-template-columns: 1fr; gap:40px; } .split-media img{ height:380px; } .gallery{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 680px){ .section{ padding: 84px 0; } .grid-3, .grid-2{ grid-template-columns: 1fr; } .stat-strip{ grid-template-columns: 1fr 1fr; } .footer-grid{ grid-template-columns: 1fr; gap:28px; } .gallery{ grid-template-columns: repeat(2,1fr); } .cta-band{ padding: 40px 26px; flex-direction:column; align-items:flex-start; } .hero{ padding-top: 96px; } .hero-content{ padding-bottom: 64px; } .hero-dots{ display:none; } .split-media .float-card{ left:12px; bottom:-20px; padding:14px 16px; } /* keep the hero readable and clear of the fixed nav on small screens */ .hero h1{ font-size: clamp(1.9rem, 8vw, 2.6rem); max-width: 18ch; } .hero-sub{ font-size: 1rem; margin-bottom: 18px; -webkit-line-clamp: 2; display:-webkit-box; -webkit-box-orient: vertical; overflow:hidden; } .hero-badges{ gap:6px; margin-bottom: 16px; } .hero-badge{ padding: 6px 12px 6px 9px; font-size: .76rem; background: rgba(14,26,18,.5); } .hero-badge svg{ width:13px; height:13px; } .eyebrow{ font-size:.72rem; } .hero-actions{ gap:10px; } .hero-actions .btn{ padding: 12px 20px; font-size:.86rem; } }