/* ========================================================================= LINHARES TUR — stylesheet Type: Display serif (Cormorant Garamond) + script accent (Yellowtail) + body/utility sans (Jost) Palette derived from brand mark: navy / sunset orange / sand / mist ========================================================================= */ /* Fonts loaded via Google Fonts CDN — see tags in index.html . (Self-hosted woff2 files were dropped: some static hosts don't serve .woff2 with the correct MIME/CORS headers, which silently breaks @font-face and falls back to system fonts — most noticeable on the Yellowtail script accent.) */ /* ---------- Tokens ------------------------------------------------------ */ :root{ /* Brand colors — pulled from the logo artwork */ --navy-900:#12283a; --navy-800:#17334a; /* primary navy (wordmark) */ --navy-600:#3d5468; --navy-400:#667887; --orange-600:#e97a3c; --orange-500:#f18a4f; /* primary sunset orange — decorative fills, illustration only */ --orange-300:#f7a570; --orange-200:#ffc078; --orange-700:#b8551f; /* accessible text/icon orange — 4.5:1+ on sand backgrounds */ --orange-800:#9c4718; /* accessible strong orange — buttons, small labels, hover */ --sand-050:#fbf7f0; /* page background */ --sand-100:#f4ecdf; --sand-200:#eee1d8; --sand-300:#c3b2a9; --mist-200:#cad4d9; --mist-100:#e4eaec; --white:#ffffff; --ink:#1c2b34; /* Semantic */ --bg: var(--sand-050); --bg-alt: var(--sand-100); --surface: var(--white); --text: var(--navy-800); --text-soft: var(--navy-600); --text-on-dark: var(--sand-050); --accent: var(--orange-700); --accent-dark: var(--orange-800); --line: rgba(23,51,74,0.14); --line-soft: rgba(23,51,74,0.08); /* Type */ --font-display:"Cormorant Garamond", "Iowan Old Style", Georgia, serif; --font-script:"Yellowtail", cursive; --font-body:"Jost", "Helvetica Neue", Arial, sans-serif; /* Scale */ --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 1.85rem); --step-3: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem); --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem); --step-5: clamp(2.15rem, 1.6rem + 2.4vw, 3.4rem); /* Layout */ --container: 1180px; --gutter: clamp(1.25rem, 4vw, 3rem); --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --shadow-soft: 0 20px 45px -25px rgba(18,40,58,0.35); --shadow-card: 0 12px 30px -18px rgba(18,40,58,0.28); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- Reset --------------------------------------------------------*/ *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top: 92px; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } h1,h2,h3,h4,p,figure{ margin:0; } svg{ display:block; } :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .visually-hidden{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;border:0; } .skip-link{ position:absolute; left:1rem; top:-4rem; background:var(--navy-800); color:var(--sand-050); padding:.75rem 1.25rem; border-radius:var(--radius-sm); z-index:999; transition:top .25s var(--ease); } .skip-link:focus{ top:1rem; } /* ---------- Typography helpers ------------------------------------------*/ .eyebrow{ font-family:var(--font-script); font-size:clamp(1.35rem, 1.1rem + 1vw, 1.9rem); color:var(--accent); display:inline-block; margin-bottom:.35em; line-height:1; } h2.section-title{ font-family:var(--font-display); font-weight:600; font-size:var(--step-4); line-height:1.05; letter-spacing:-0.01em; color:var(--navy-800); } .section-head{ max-width:640px; margin-bottom:clamp(2.25rem,5vw,3.5rem); } .section-head.center{ margin-inline:auto; text-align:center; } .section-lede{ margin-top:1rem; font-size:var(--step-1); color:var(--text-soft); max-width:52ch; } .section-head.center .section-lede{ margin-inline:auto; } .section-pad{ padding-block:clamp(4rem,9vw,7.5rem); } .btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-body); font-weight:500; font-size:1rem; letter-spacing:.01em; padding:.95rem 1.9rem; border-radius:100px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease); white-space:nowrap; } .btn svg{ width:18px; height:18px; flex:none; } .btn-primary{ background:var(--accent); color:var(--white); box-shadow:0 14px 28px -12px rgba(233,122,60,.65); } .btn-primary:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(233,122,60,.75); } .btn-ghost{ background:transparent; color:var(--navy-800); border:1.5px solid var(--line); } .btn-ghost:hover{ border-color:var(--navy-800); transform:translateY(-2px); } .btn-ghost.on-dark{ color:var(--sand-050); border-color:rgba(251,247,240,.35); } .btn-ghost.on-dark:hover{ border-color:var(--sand-050); } .btn-block{ width:100%; justify-content:center; } .btn-sm{ padding:.7rem 1.35rem; font-size:.9rem; } /* ---------- Reveal-on-scroll ----------------------------------------- Only hides content when html.js is present (added by an inline script in , before paint). If JavaScript fails to load or run, the html.js class is never added, so all content stays visible by default — the animation is a progressive enhancement, never a content gate. */ html.js [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); } html.js [data-reveal].in-view{ opacity:1; transform:none; } [data-reveal-group] > *{ transition-delay:calc(var(--i, 0) * 90ms); } /* ========================================================================== HEADER ========================================================================== */ .site-header{ position:fixed; inset-inline:0; top:0; z-index:100; padding-block:1.35rem; transition:padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .site-header.is-scrolled{ padding-block:.75rem; background:rgba(251,247,240,.9); backdrop-filter:blur(10px); box-shadow:0 8px 30px -18px rgba(18,40,58,.35); } .brand{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-size:1.6rem; color:var(--navy-800); letter-spacing:.02em; white-space:nowrap; } .brand .brand-script{ font-family:var(--font-script); color:var(--accent); font-size:1.35rem; margin-left:.1rem; } .brand-mark{ width:44px; height:44px; flex:none; } .nav-side{ display:none; } .nav-side ul{ display:flex; align-items:center; gap:clamp(1.1rem,2vw,2.1rem); font-size:.95rem; font-weight:500; white-space:nowrap; } .nav-side a{ position:relative; padding-block:.3rem; } .nav-side a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); } .nav-side a:hover::after, .nav-side a:focus-visible::after{ transform:scaleX(1); transform-origin:left; } .header-actions{ display:flex; align-items:center; gap:.75rem; } .header-actions .btn-primary{ display:none; } .nav-toggle{ width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--line); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:20px; height:2px; background:var(--navy-800); position:relative; transition:transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; } .nav-toggle[aria-expanded="true"] span{ background:transparent; } .nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); } .mobile-nav{ position:fixed; inset:0; z-index:150; background:var(--navy-800); color:var(--sand-050); display:flex; flex-direction:column; justify-content:center; padding:6rem var(--gutter) 3rem; transform:translateY(-100%); transition:transform .5s var(--ease); } .mobile-nav.is-open{ transform:translateY(0); } .mobile-nav ul{ display:flex; flex-direction:column; gap:1.1rem; font-family:var(--font-display); font-size:var(--step-3); } .mobile-nav a{ display:inline-block; } .mobile-nav .btn{ margin-top:2.25rem; } .mobile-nav-foot{ margin-top:auto; padding-top:2.5rem; font-size:.9rem; opacity:.7; } body.nav-locked{ overflow:hidden; } /* ========================================================================== HERO ========================================================================== */ .hero{ position:relative; padding-top:clamp(8rem,16vw,11rem); padding-bottom:clamp(4rem,8vw,6rem); overflow:hidden; background: radial-gradient(ellipse 80% 60% at 78% 18%, rgba(255,192,120,.55), transparent 60%), linear-gradient(180deg, var(--sand-050) 0%, var(--sand-100) 55%, var(--sand-200) 100%); } .hero .container{ display:grid; gap:clamp(2.5rem,6vw,4rem); align-items:center; grid-template-columns:1fr; } .hero-copy{ position:relative; z-index:2; max-width:640px; } .hero-copy .eyebrow{ display:block; } .hero-title{ font-family:var(--font-display); font-weight:600; font-size:var(--step-5); line-height:1.08; letter-spacing:-0.015em; color:var(--navy-800); text-wrap:balance; } .hero-title em{ font-style:italic; color:var(--accent-dark); } .hero-sub{ margin-top:1.4rem; font-size:var(--step-1); color:var(--text-soft); max-width:46ch; } .hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; } .hero-scene{ position:relative; z-index:1; aspect-ratio:6/5; width:100%; } .hero-scene svg{ width:100%; height:100%; } .trust-strip{ position:relative; z-index:2; border-top:1px solid var(--line-soft); margin-top:clamp(3rem,6vw,4.5rem); padding-top:clamp(1.75rem,3vw,2.25rem); } .trust-strip ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem 1.5rem; } .trust-strip li{ display:flex; align-items:center; gap:.65rem; font-size:.92rem; font-weight:500; color:var(--navy-700,var(--navy-800)); } .trust-strip svg{ width:22px; height:22px; flex:none; color:var(--accent-dark); } /* Mobile: center the hero copy block and its supporting rows */ @media (max-width:859px){ .hero-copy{ max-width:100%; text-align:center; margin-inline:auto; } .hero-sub{ margin-inline:auto; } .hero-ctas{ justify-content:center; } .trust-strip li{ justify-content:center; text-align:left; } } /* Hero SVG scene elements */ .sc-bird{ transform-origin:center; } .sc-bird-1{ animation:bob 5s ease-in-out infinite; } .sc-bird-2{ animation:bob 5s ease-in-out infinite .6s; } @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } } .sc-sun{ transform-origin:center; animation:rise 1.4s var(--ease) both; } @keyframes rise{ from{ transform:translateY(26px) scale(.9); opacity:0; } to{ transform:translateY(0) scale(1); opacity:1; } } .sc-palm{ animation:sway 7s ease-in-out infinite; transform-origin:85% 100%; } @keyframes sway{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(1.4deg); } } .sc-dune{ animation:dune-in 1.1s var(--ease) both .2s; } @keyframes dune-in{ from{ transform:translateY(18px); opacity:0; } to{ transform:translateY(0); opacity:1; } } .sc-birds-group{ animation:fly-in 1.2s var(--ease) both; } @keyframes fly-in{ from{ transform:translateX(-24px); opacity:0; } to{ transform:translateX(0); opacity:1; } } /* ========================================================================== SOBRE ========================================================================== */ .about{ background:var(--bg); } .about .container{ display:grid; gap:clamp(2.5rem,6vw,4rem); grid-template-columns:1fr; } .about-copy p{ font-size:var(--step-1); color:var(--text-soft); max-width:48ch; } .about-copy .eyebrow{ display:block; } .about-copy h2{ font-family:var(--font-display); font-size:var(--step-3); font-weight:600; color:var(--navy-800); margin-bottom:1rem; max-width:22ch; } .about-signature{ margin-top:1.75rem; display:flex; align-items:center; gap:.85rem; font-family:var(--font-script); font-size:1.6rem; color:var(--accent-dark); } .about-signature .rule{ width:44px; height:1px; background:var(--line); } .diff-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; } .diff-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:1.5rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .diff-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent; } .diff-card svg{ width:28px; height:28px; color:var(--accent-dark); margin-bottom:.85rem; } .diff-card h3{ font-family:var(--font-body); font-weight:600; font-size:1.05rem; color:var(--navy-800); margin-bottom:.4rem; } .diff-card p{ font-size:.92rem; color:var(--text-soft); } /* ========================================================================== PASSEIOS ========================================================================== */ .tours{ background:var(--bg-alt); position:relative; } .tours-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; } .tour-card{ background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--line-soft); padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--shadow-card); } .tour-card.is-featured{ background:linear-gradient(135deg,var(--navy-800),var(--navy-900)); color:var(--sand-050); display:grid; gap:1.75rem; grid-template-columns:1fr; position:relative; overflow:hidden; } .tour-card.is-featured::after{ content:""; position:absolute; inset:auto -10% -40% auto; width:60%; aspect-ratio:1; background:radial-gradient(circle, rgba(241,138,79,.35), transparent 70%); pointer-events:none; } .tour-card.is-featured .tour-icon{ background:rgba(251,247,240,.12); color:var(--orange-300); } .tour-card.is-featured .tour-card-head p{ color:rgba(251,247,240,.78); } .tour-card.is-featured .tour-name{ color:var(--sand-050); } .tour-card.is-featured .tour-tag{ background:rgba(251,247,240,.14); color:var(--orange-200); } .tour-card.is-featured .accordion-trigger{ color:var(--sand-050); border-color:rgba(251,247,240,.25); } .tour-card.is-featured .accordion-panel{ color:rgba(251,247,240,.82); } .tour-card.is-featured .accordion-panel li::before{ color:var(--orange-300); } .tour-icon{ width:60px; height:60px; border-radius:16px; background:var(--sand-100); display:grid; place-items:center; color:var(--navy-800); flex:none; } .tour-icon svg{ width:32px; height:32px; } .tour-card-head{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; margin-bottom:1.1rem; } .tour-card-head > div:not(.tour-icon){ width:100%; } .tour-tag{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-dark); background:var(--sand-100); padding:.3rem .65rem; border-radius:100px; margin-bottom:.5rem; } .tour-name{ font-family:var(--font-display); font-weight:600; font-size:var(--step-2); color:var(--navy-800); line-height:1.15; } .tour-card-head p{ margin-top:.5rem; font-size:.95rem; color:var(--text-soft); max-width:46ch; } .accordion-item{ border-top:1px solid var(--line-soft); } .tour-card.is-featured .accordion-item{ border-color:rgba(251,247,240,.18); } .accordion-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem; font-weight:500; font-size:.95rem; text-align:left; } .accordion-trigger .chevron{ width:18px; height:18px; flex:none; transition:transform .35s var(--ease); } .accordion-trigger[aria-expanded="true"] .chevron{ transform:rotate(180deg); } .accordion-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); font-size:.92rem; color:var(--text-soft); } .accordion-panel-inner{ padding-bottom:1.1rem; } .accordion-panel ul{ display:grid; gap:.55rem; } .accordion-panel li{ display:flex; gap:.55rem; align-items:flex-start; } .accordion-panel li::before{ content:"✓"; color:var(--accent-dark); font-weight:700; flex:none; line-height:1.5; } .tour-cta{ margin-top:1.35rem; } /* ========================================================================== COMO AGENDAR ========================================================================== */ .steps{ background:var(--bg); } .steps-list{ display:grid; gap:1.75rem; grid-template-columns:1fr; counter-reset:step; position:relative; } .step-item{ position:relative; padding-left:4.25rem; } .step-item::before{ counter-increment:step; content:"0" counter(step); position:absolute; left:0; top:0; width:3.1rem; height:3.1rem; border-radius:50%; background:var(--surface); border:1.5px solid var(--line); display:grid; place-items:center; font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--accent-dark); } .step-item h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; color:var(--navy-800); margin-bottom:.35rem; } .step-item p{ color:var(--text-soft); font-size:.95rem; max-width:42ch; } /* ========================================================================== GALERIA ========================================================================== */ .gallery{ background:var(--bg-alt); } .carousel{ position:relative; } .carousel-track{ display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter); -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.25rem; margin:0 calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); } .carousel-track::-webkit-scrollbar{ display:none; } .carousel-item{ scroll-snap-align:start; flex:0 0 auto; width:76%; position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; background:var(--navy-800); } .carousel-item img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .6s var(--ease); } .carousel-item:hover img{ transform:scale(1.05); } .carousel-item .cap{ position:absolute; inset:auto 0 0 0; padding:.9rem .9rem 1rem; font-size:.8rem; color:var(--sand-050); background:linear-gradient(0deg, rgba(18,40,58,.88), transparent); } .carousel-arrow{ position:absolute; top:42%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-card); color:var(--navy-800); display:grid; place-items:center; z-index:3; transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .carousel-arrow:hover{ background:var(--accent-dark); color:var(--white); } .carousel-arrow svg{ width:20px; height:20px; } .carousel-arrow.prev{ left:-6px; } .carousel-arrow.next{ right:-6px; } .carousel-dots{ display:flex; justify-content:center; gap:.55rem; margin-top:1.5rem; } .carousel-dots button{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .3s var(--ease), transform .3s var(--ease); } .carousel-dots button.active{ background:var(--accent-dark); transform:scale(1.35); } @media (min-width:640px){ .carousel-item{ width:42%; } } @media (min-width:1024px){ .carousel-item{ width:26%; } .carousel-arrow.prev{ left:-22px; } .carousel-arrow.next{ right:-22px; } } @media (max-width:639px){ .carousel-arrow{ display:none; } } .lightbox{ position:fixed; inset:0; z-index:200; background:rgba(18,29,37,.92); display:flex; align-items:center; justify-content:center; padding:5vh 4vw; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s linear .3s; } .lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .3s var(--ease), visibility 0s linear 0s; } .lightbox-figure{ position:relative; max-width:min(900px,92vw); max-height:86vh; } .lightbox-figure img{ max-height:86vh; width:auto; margin-inline:auto; border-radius:var(--radius-md); } .lightbox-figure figcaption{ color:var(--sand-050); text-align:center; margin-top:.9rem; font-size:.95rem; opacity:.85; } .lightbox-close, .lightbox-prev, .lightbox-next{ position:absolute; width:46px; height:46px; border-radius:50%; background:rgba(251,247,240,.12); color:var(--sand-050); display:grid; place-items:center; transition:background .3s var(--ease); } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(251,247,240,.24); } .lightbox-close{ top:-3.25rem; right:0; } .lightbox-prev{ left:clamp(-3rem,-6vw,-1rem); top:50%; transform:translateY(-50%); } .lightbox-next{ right:clamp(-3rem,-6vw,-1rem); top:50%; transform:translateY(-50%); } .lightbox-prev svg, .lightbox-next svg, .lightbox-close svg{ width:20px; height:20px; } /* ========================================================================== FAQ ========================================================================== */ .faq{ background:var(--bg); } .faq-list{ max-width:820px; border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.35rem; text-align:left; font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--navy-800); } .faq-trigger .chevron{ width:22px; height:22px; flex:none; color:var(--accent-dark); transition:transform .35s var(--ease); } .faq-trigger[aria-expanded="true"] .chevron{ transform:rotate(45deg); } .faq-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .faq-panel-inner{ padding-bottom:1.5rem; color:var(--text-soft); max-width:64ch; } /* ========================================================================== CTA FINAL ========================================================================== */ .cta-final{ position:relative; overflow:hidden; background:linear-gradient(160deg, var(--navy-800), var(--navy-900)); color:var(--sand-050); text-align:center; } .cta-final::before{ content:""; position:absolute; inset:-20% -10% auto auto; width:55%; aspect-ratio:1; background:radial-gradient(circle, rgba(241,138,79,.4), transparent 70%); } .cta-final::after{ content:""; position:absolute; inset:auto auto -30% -10%; width:50%; aspect-ratio:1; background:radial-gradient(circle, rgba(202,212,217,.16), transparent 70%); } .cta-final .container{ position:relative; z-index:1; } .cta-final .eyebrow{ color:var(--orange-300); } .cta-final h2{ font-family:var(--font-display); font-weight:600; font-size:var(--step-4); max-width:16ch; margin-inline:auto; line-height:1.08; } .cta-final p{ margin-top:1.1rem; font-size:var(--step-1); color:rgba(251,247,240,.78); max-width:44ch; margin-inline:auto; } .cta-final .hero-ctas{ justify-content:center; margin-top:2.25rem; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer{ background:var(--sand-100); padding-top:clamp(3rem,6vw,4.5rem); } .footer-top{ display:grid; gap:2.5rem; grid-template-columns:1fr; padding-bottom:clamp(2.5rem,5vw,3.5rem); border-bottom:1px solid var(--line); } .footer-brand .brand{ margin-bottom:.85rem; } .footer-brand p{ color:var(--text-soft); max-width:36ch; font-size:.95rem; } .footer-cols{ display:grid; gap:2rem; grid-template-columns:repeat(2,1fr); } .footer-col h4{ font-family:var(--font-body); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--navy-800); margin-bottom:.9rem; } .footer-col ul{ display:grid; gap:.6rem; } .footer-col a{ font-size:.92rem; color:var(--text-soft); transition:color .25s var(--ease); } .footer-col a:hover{ color:var(--accent-dark); } .footer-social{ display:flex; gap:.75rem; margin-top:.25rem; } .footer-social a{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--navy-800); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .footer-social a:hover{ background:var(--navy-800); color:var(--sand-050); border-color:var(--navy-800); } .footer-social svg{ width:18px; height:18px; } .footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding-block:1.5rem; font-size:.85rem; color:var(--text-soft); } .footer-bottom a:hover{ color:var(--accent-dark); } .back-to-top{ position:fixed; right:1.5rem; bottom:1.5rem; width:48px; height:48px; border-radius:50%; background:var(--navy-800); color:var(--sand-050); display:grid; place-items:center; box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, background .3s var(--ease); z-index:80; } .back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); } .back-to-top:hover{ background:var(--accent-dark); } .back-to-top svg{ width:20px; height:20px; } /* Floating WhatsApp button (mobile-first quick access) */ .fab-whatsapp{ position:fixed; left:1.5rem; bottom:1.5rem; z-index:80; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 28px -10px rgba(37,211,102,.6); transition:transform .3s var(--ease); } .fab-whatsapp:hover{ transform:translateY(-3px) scale(1.04); } .fab-whatsapp svg{ width:26px; height:26px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (min-width:640px){ .trust-strip ul{ grid-template-columns:repeat(4,1fr); } .diff-grid{ grid-template-columns:repeat(2,1fr); } .tours-grid{ grid-template-columns:repeat(2,1fr); } .tour-card.is-featured{ grid-column:1 / -1; } .footer-cols{ grid-template-columns:repeat(3,1fr); } } @media (min-width:860px){ .hero .container{ grid-template-columns:1.05fr .95fr; } .trust-strip{ grid-column:1/-1; } .about .container{ grid-template-columns:.85fr 1.15fr; align-items:start; } .steps-list{ grid-template-columns:repeat(4,1fr); gap:0; } .step-item{ padding-left:0; padding-top:4.25rem; } .step-item::before{ left:50%; transform:translateX(-50%); top:0; } .step-item h3, .step-item p{ text-align:center; margin-inline:auto; } .footer-top{ grid-template-columns:1fr 1.4fr; } } @media (min-width:1024px){ .nav-side{ display:flex; } .nav-toggle{ display:none; } .header-actions .btn-primary{ display:inline-flex; } .tours-grid{ grid-template-columns:repeat(4,1fr); } } @media (max-width:1023px){ .mobile-nav{ display:flex; } } @media (min-width:1024px){ .mobile-nav{ display:none !important; } }