/* ========================================================================== GOLDEN SAND SAFARI DUBAI — Design System Palette: Desert-night ink + brushed brass gold + oasis teal accent Type: Cormorant Garamond (display) / Jost (body) / Space Mono (utility) Signature: layered dune parallax + tilting brass-edged 3D cards & buttons NOTE: Google Fonts are loaded via in (see head() in build.py) rather than @import, so the browser can fetch them in parallel with this stylesheet instead of blocking on it. ========================================================================== */ :root{ --bg:#FFFFFF; --bg2:#F7F2E8; --panel:#FFFFFF; --panel-2:#FBF8F1; --line: rgba(40,28,12,.12); --gold:#B98A46; --gold-bright:#C79A52; --gold-deep:#8A6A34; --gold-dim: rgba(180,140,70,.4); --cream:#241A0E; --ink:#3E3122; --muted:#6E6353; --muted-2:#948A76; --teal:#1F6E63; --teal-bright:#2E8C7C; --ruby:#8A3A32; --shadow-deep: 0 30px 60px -20px rgba(35,24,10,.22); --radius: 18px; --radius-sm: 10px; --ease: cubic-bezier(.22,1,.36,1); --hero-glow:#FBF1DC; --grain-opacity:.025; --grain-blend:multiply; --header-glass-from: rgba(255,255,255,.96); --header-glass-to: rgba(255,255,255,.88); --header-shadow: rgba(35,24,10,.08); --drawer-from:#FFFFFF; --drawer-to:#F7F2E8; --drawer-shadow: rgba(35,24,10,.12); --input-bg: rgba(30,20,10,.03); --input-bg-strong: rgba(30,20,10,.04); --card-tag-bg: rgba(255,255,255,.92); --card-tag-text: var(--gold-deep); --backtop-bg: rgba(255,255,255,.9); --backtop-shadow: rgba(35,24,10,.15); --map-filter: sepia(.2) saturate(1.15) hue-rotate(-8deg); --dune-1:#F0E0BC; --dune-2:#F7ECD6; --dune-3:#FFFFFF; --logo-glow: drop-shadow(0 3px 8px rgba(35,24,10,.22)); --brand-chip-bg: linear-gradient(135deg, rgba(198,161,91,.16), rgba(198,161,91,.05)); --toggle-icon-op: 1; } [data-theme="dark"]{ --bg:#080B10; --bg2:#111720; --panel:#111720; --panel-2:#141B25; --line: #252D37; --gold:#C6A15B; --gold-bright:#E0C27A; --gold-deep:#AD8A4C; --gold-dim: rgba(198,161,91,.35); --cream:#F5F3ED; --ink:#F5F3ED; --muted:#929AA5; --muted-2:#78808A; --shadow-deep: 0 30px 60px -20px rgba(0,0,0,.75); --hero-glow:#111720; --grain-opacity:.05; --grain-blend:overlay; --header-glass-from: rgba(8,11,16,.94); --header-glass-to: rgba(8,11,16,.8); --header-shadow: rgba(0,0,0,.45); --drawer-from:#111720; --drawer-to:#080B10; --drawer-shadow: rgba(0,0,0,.55); --input-bg: rgba(245,243,237,.04); --input-bg-strong: rgba(245,243,237,.05); --card-tag-bg: rgba(17,23,32,.82); --card-tag-text: #E0C27A; --backtop-bg: rgba(17,23,32,.85); --backtop-shadow: rgba(0,0,0,.4); --map-filter: sepia(.35) saturate(1.25) hue-rotate(-10deg) brightness(.75) contrast(1.15); --dune-1:#151C24; --dune-2:#0E141B; --dune-3:#080B10; --logo-glow: drop-shadow(0 2px 14px rgba(198,161,91,.4)); --brand-chip-bg: transparent; } html{ background:var(--bg); transition:background .4s var(--ease); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } html,body{ margin:0; padding:0; } body{ background: radial-gradient(ellipse 120% 50% at 50% -10%, var(--hero-glow) 0%, var(--bg) 50%), var(--bg); color: var(--ink); font-family:'Jost', sans-serif; font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; transition: background .4s var(--ease), color .4s var(--ease); } /* faint sand-grain texture overlay */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:2; opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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"); } h1,h2,h3,h4{ font-family:'Cormorant Garamond', serif; color: var(--cream); font-weight:600; line-height:1.12; margin:0 0 .4em; letter-spacing:.01em; } h1{ font-size: clamp(2.6rem, 5vw, 4.6rem); font-weight:700; } h2{ font-size: clamp(2rem, 3.4vw, 3rem); } h3{ font-size: clamp(1.35rem, 2vw, 1.7rem); } p{ margin:0 0 1em; color:var(--muted); } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ul{ padding:0; margin:0; list-style:none; } .eyebrow{ font-family:'Space Mono', monospace; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.6em; margin-bottom:1em; } .eyebrow::before{ content:""; width:26px; height:1px; background: linear-gradient(90deg, transparent, var(--gold)); } .wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px,4vw,48px); } .section{ padding: clamp(64px,9vw,120px) 0; position:relative; } .section-tight{ padding: clamp(40px,6vw,72px) 0; } .center{ text-align:center; } .lede{ max-width:620px; color:var(--muted); font-size:1.06rem; } .center .lede{ margin-left:auto; margin-right:auto; } /* ---------- divider ornament ---------- */ .divider{ display:flex; align-items:center; gap:14px; margin: 26px 0; color:var(--gold-dim); } .divider::before,.divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); } .divider svg{ width:18px; height:18px; opacity:.85; } /* ========================================================================== 3D BUTTONS — brushed brass, chunky embossed press ========================================================================== */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:'Jost', sans-serif; font-weight:600; font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; padding:15px 30px; border:none; cursor:pointer; border-radius: 999px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); will-change: transform; } .btn-primary{ color:#2A1D0C; background: linear-gradient(120deg, var(--gold-bright), var(--gold) 50%, var(--gold-deep)); box-shadow: 0 10px 22px -8px rgba(154,119,54,.55); } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(154,119,54,.65); filter:brightness(1.04); } .btn-primary:active{ transform: translateY(0); box-shadow: 0 6px 14px -6px rgba(154,119,54,.5); } .btn-ghost{ color:var(--cream); background: transparent; border:1.5px solid var(--line); } .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-deep); background:rgba(201,164,94,.06); } .btn-ghost:active{ transform: translateY(1px); } .btn-block{ width:100%; } .btn-sm{ padding:11px 20px; font-size:.74rem; } .btn svg{ width:16px; height:16px; } /* ========================================================================== NAVIGATION ========================================================================== */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; padding: 18px 0; transition: padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .site-header::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, var(--header-glass-from), var(--header-glass-to) 70%, transparent); backdrop-filter: blur(10px); opacity:0; transition:opacity .3s var(--ease); z-index:-1; } .site-header.scrolled{ padding:12px 0; box-shadow:0 8px 24px var(--header-shadow); border-bottom:1px solid var(--line); } .site-header.scrolled::before{ opacity:1; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand{ display:flex; align-items:center; gap:12px; padding:6px 14px 6px 8px; border-radius:16px; background:var(--brand-chip-bg); transition:background .4s var(--ease); } .brand img{ height:54px; width:auto; display:block; filter:var(--logo-glow); transition:filter .4s var(--ease); } .nav-links{ display:flex; align-items:center; gap:2px; } .nav-links a{ padding:10px 15px; font-size:.82rem; letter-spacing:.03em; color:var(--muted); border-radius:999px; transition: all .25s var(--ease); position:relative; } .nav-links a:hover, .nav-links a.active{ color:var(--gold-bright); background:rgba(201,164,94,.08); } .nav-cta{ display:flex; align-items:center; gap:12px; } .nav-toggle{ display:none; } /* theme toggle */ .theme-toggle{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: border-color .25s, transform .25s, background .3s var(--ease); flex:none; } .theme-toggle:hover{ border-color:var(--gold-dim); transform:translateY(-2px); } .theme-toggle svg{ width:19px; height:19px; } .theme-toggle .i-moon{ display:none; } [data-theme="dark"] .theme-toggle .i-sun{ display:none; } [data-theme="dark"] .theme-toggle .i-moon{ display:block; } /* mobile drawer — must always be fixed & hidden off-canvas by default, regardless of viewport, so it never renders inline in normal flow */ .drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:199; opacity:0; pointer-events:none; transition:opacity .3s; } .drawer-overlay.open{ opacity:1; pointer-events:auto; } .mobile-drawer{ position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh; z-index:200; background: linear-gradient(180deg,var(--drawer-from),var(--drawer-to)); border-left:1px solid var(--line); padding:100px 30px 40px; transform:translateX(100%); transition: transform .4s var(--ease); display:flex; flex-direction:column; gap:6px; box-shadow:-20px 0 50px var(--drawer-shadow); } .mobile-drawer.open{ transform:translateX(0); } .mobile-drawer a{ padding:14px 4px; font-size:1.05rem; color:var(--ink); border-bottom:1px solid var(--line); font-family:'Cormorant Garamond',serif;} .drawer-close{ position:absolute; top:28px; right:28px; background:none; border:none; color:var(--gold); font-size:1.6rem; cursor:pointer; } @media (max-width: 980px){ .nav-links{ display:none; } .nav-toggle{ display:flex; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer; } .nav-toggle span{ width:18px; height:1.5px; background:var(--gold); display:block; } } /* ========================================================================== HERO + DUNE PARALLAX (signature element) ========================================================================== */ .hero{ position:relative; min-height:88vh; display:flex; align-items:center; padding-top:120px; overflow:hidden; background: radial-gradient(ellipse 90% 60% at 30% 0%, var(--hero-glow) 0%, transparent 60%), var(--bg); } .hero-inner{ position:relative; z-index:5; } .hero-stars{ position:absolute; inset:0; z-index:1; opacity:.5; } .hero-stars span{ position:absolute; width:3px; height:3px; background:var(--gold); border-radius:50%; animation: twinkle 4s ease-in-out infinite; } @keyframes twinkle{ 0%,100%{opacity:.1} 50%{opacity:.7} } .dune-parallax{ position:absolute; left:0; right:0; bottom:-2px; height:46%; z-index:2; pointer-events:none; } .dune-layer{ position:absolute; left:-5%; right:-5%; bottom:0; width:110%; height:100%; transition: transform .25s linear; will-change:transform; } .dune-layer svg{ width:100%; height:100%; display:block; } .dune-layer.l1 path{ fill: var(--dune-1); transition: fill .4s var(--ease); } .dune-layer.l2 path{ fill: var(--dune-2); transition: fill .4s var(--ease); } .dune-layer.l3 path{ fill: var(--dune-3); transition: fill .4s var(--ease); } .hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; background:rgba(201,164,94,.08); border:1px solid var(--line); border-radius:999px; font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:24px; } .hero-badge i{ width:26px; height:26px; border-radius:50%; background:var(--gold); display:inline-flex; align-items:center; justify-content:center; color:#241706; font-style:normal; font-family:'Space Mono',monospace; font-size:.7rem;} .hero h1{ max-width:780px; } .hero h1 em{ font-style:italic; color:var(--gold); } .hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; } .hero-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:70px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; max-width:900px; box-shadow:0 16px 34px -24px rgba(35,24,10,.22); } .hero-stats div{ background:rgba(255,255,255,.85); padding:22px 18px; backdrop-filter:blur(6px); } .hero-stats b{ font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--gold-deep); display:block; } .hero-stats span{ font-size:.72rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; } @media (max-width: 720px){ .hero-stats{ grid-template-columns:repeat(2,1fr);} } /* page (interior) header banner, used on non-home pages */ .page-hero{ position:relative; padding: 168px 0 90px; overflow:hidden; background: radial-gradient(ellipse 80% 70% at 50% -10%, var(--hero-glow), transparent 65%), var(--bg); border-bottom:1px solid var(--line); } .page-hero .dune-parallax{ height:60%; opacity:.8; } .breadcrumb{ font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.1em; color:var(--muted-2); text-transform:uppercase; margin-bottom:18px; position:relative; z-index:3;} .breadcrumb a{ color:var(--gold); } .page-hero h1{ position:relative; z-index:3; } .page-hero .lede{ position:relative; z-index:3; margin-top:14px; } /* ========================================================================== 3D TILT CARDS ========================================================================== */ .grid{ display:grid; gap:28px; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-2{ grid-template-columns:repeat(2,1fr); } @media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } } .tilt{ perspective:1200px; height:100%; } .card{ position:relative; display:flex; flex-direction:column; height:100%; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transform-style:preserve-3d; transition: transform .12s ease-out, box-shadow .3s var(--ease), border-color .3s; box-shadow: 0 16px 34px -22px rgba(35,24,10,.28); } .tilt:hover .card{ box-shadow: var(--shadow-deep); border-color: var(--gold-dim); } .card-media{ position:relative; height:220px; overflow:hidden; transform: translateZ(20px); } .card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); } .tilt:hover .card-media img{ transform:scale(1.08); } .card-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(10,7,5,.9)); } .card-tag{ position:absolute; top:14px; left:14px; z-index:2; transform:translateZ(30px); background:var(--card-tag-bg); border:1px solid var(--line); color:var(--card-tag-text); font-family:'Space Mono',monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px); box-shadow:0 6px 14px rgba(35,24,10,.18); } .card-price{ position:absolute; bottom:14px; right:14px; z-index:2; transform:translateZ(30px); background: linear-gradient(155deg,var(--gold-bright),var(--gold-deep)); color:#241706; font-family:'Space Mono',monospace; font-weight:700; font-size:.82rem; padding:8px 14px; border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.4); } .card-body{ padding:26px; transform: translateZ(14px); display:flex; flex-direction:column; flex:1; } .card-body h3{ margin-bottom:8px; } .card-meta{ display:flex; gap:18px; margin:14px 0; flex-wrap:wrap; } .card-meta span{ font-size:.76rem; color:var(--muted-2); display:flex; align-items:center; gap:5px; font-family:'Space Mono',monospace; letter-spacing:.02em; } .card-meta span svg{ width:13px; height:13px; flex:none; stroke-width:1.8; color:var(--gold-deep); } .card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); } .rating{ display:flex; align-items:center; gap:5px; color:var(--gold-deep); font-size:.8rem; } .rating svg{ width:12px; height:12px; flex:none; } /* icon tile (activities/services) */ .icon-tile{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg, rgba(201,164,94,.18), rgba(201,164,94,.03)); border:1px solid var(--line); color:var(--gold-bright); margin-bottom:18px; transform:translateZ(24px); } .icon-tile svg{ width:26px; height:26px; } /* ========================================================================== SECTIONS: split / panel / testimonial / faq / gallery / forms ========================================================================== */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } @media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } } .booking-split{ align-items:flex-start; gap:40px; } @media (max-width:900px){ .booking-split{ gap:32px; } } .tour-detail-split{ align-items:flex-start; gap:50px; } @media (min-width:901px){ .tour-detail-split{ grid-template-columns:1.5fr 1fr; } } .booking-summary-panel{ position:static; } @media (min-width:901px){ .booking-summary-panel{ position:sticky; top:110px; } } .split img, .split .media-frame{ border-radius:var(--radius); } .media-frame{ position:relative; } .media-frame img{ border-radius:var(--radius); border:1px solid var(--line); } .media-badge{ position:absolute; bottom:-22px; left:-22px; background:linear-gradient(160deg,var(--panel-2),var(--panel)); border:1px solid var(--gold-dim); border-radius:16px; padding:18px 22px; box-shadow:var(--shadow-deep); font-family:'Cormorant Garamond',serif; } .media-badge b{ font-size:1.8rem; color:var(--gold-bright); display:block; } .media-badge span{ font-size:.68rem; color:var(--muted); font-family:'Space Mono',monospace; letter-spacing:.08em; } .check-list li{ display:flex; gap:12px; margin-bottom:12px; color:var(--ink); align-items:flex-start; } .check-list svg{ width:20px; height:20px; flex:none; color:var(--gold); margin-top:2px; } .panel{ background:linear-gradient(160deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); padding:36px; } /* testimonial */ .testi-card{ background:linear-gradient(160deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); padding:34px; } .testi-quote{ font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-style:italic; color:var(--cream); } .testi-person{ display:flex; align-items:center; gap:14px; margin-top:20px; } .testi-avatar{ width:46px; height:46px; border-radius:50%; background:linear-gradient(155deg,var(--gold-bright),var(--gold-deep)); display:flex; align-items:center; justify-content:center; color:#241706; font-family:'Cormorant Garamond',serif; font-weight:700; } .testi-person b{ display:block; color:var(--cream); font-size:.9rem; } .testi-person span{ font-size:.74rem; color:var(--muted-2); } .stars{ color:var(--gold); letter-spacing:2px; } /* FAQ accordion */ .acc-item{ border-bottom:1px solid var(--line); } .acc-q{ display:flex; align-items:center; justify-content:space-between; padding:22px 4px; cursor:pointer; gap:20px; } .acc-q h4{ margin:0; font-size:1.1rem; color:var(--cream); font-weight:600; } .acc-icon{ width:32px; height:32px; border-radius:50%; border:1px solid var(--gold-dim); flex:none; display:flex; align-items:center; justify-content:center; position:relative; transition:transform .3s var(--ease); } .acc-icon::before,.acc-icon::after{ content:""; position:absolute; background:var(--gold); } .acc-icon::before{ width:12px; height:1.5px; } .acc-icon::after{ width:1.5px; height:12px; transition:opacity .25s; } .acc-item.open .acc-icon::after{ opacity:0; } .acc-item.open .acc-icon{ transform:rotate(180deg); background:var(--gold); } .acc-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .acc-a p{ padding:0 4px 22px; max-width:760px; } /* gallery */ .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .gallery-grid a{ position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line); display:block; } .gallery-grid img{ width:100%; height:220px; object-fit:cover; transition:transform .5s var(--ease), filter .5s; } .gallery-grid a:hover img{ transform:scale(1.1); filter:saturate(1.2); } .gallery-grid a::after{ content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--gold-bright); background:rgba(10,7,5,0); opacity:0; transition:.3s; font-family:'Cormorant Garamond',serif;} .gallery-grid a:hover::after{ opacity:1; background:rgba(10,7,5,.4); } .gallery-grid .tall{ grid-row: span 2; } .gallery-grid .tall img{ height:100%; } @media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);} } /* forms */ .field{ margin-bottom:20px; } .field label{ display:block; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-family:'Space Mono',monospace; } .field input, .field select, .field textarea{ width:100%; background:var(--input-bg); border:1px solid var(--line); color:var(--ink); padding:14px 16px; border-radius:12px; font-family:'Jost',sans-serif; font-size:.95rem; transition:border-color .25s, box-shadow .25s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,164,94,.12); } .field textarea{ resize:vertical; min-height:120px; } .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:640px){ .row-2{ grid-template-columns:1fr; } } .form-note{ font-size:.78rem; color:var(--muted-2); margin-top:14px; } .form-success{ display:none; background:rgba(63,163,145,.12); border:1px solid var(--teal-bright); color:var(--teal-bright); padding:16px 20px; border-radius:12px; margin-top:16px; font-size:.9rem; } /* pricing / offer strip */ .offer-strip{ display:flex; align-items:center; gap:20px; background:linear-gradient(90deg, var(--ruby), #4a1e1c); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:12px 24px; margin-bottom:40px; font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.04em; color:#F4D9CF; } .offer-strip b{ color:#fff; } .badge-save{ position:absolute; top:14px; right:14px; z-index:2; background:var(--ruby); color:#fff; font-family:'Space Mono',monospace; font-size:.68rem; padding:6px 12px; border-radius:999px; transform:translateZ(30px); } /* stepper (booking) */ .stepper{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:50px; flex-wrap:wrap; } .step{ display:flex; align-items:center; gap:10px; font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); } .step i{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-style:normal; color:var(--muted); } .step.active{ color:var(--gold-bright); } .step.active i{ background:linear-gradient(155deg,var(--gold-bright),var(--gold-deep)); border-color:transparent; color:#241706; } .step-line{ width:36px; height:1px; background:var(--line); } /* table (T&C) */ .doc table{ width:100%; border-collapse:collapse; margin:20px 0; } @media (max-width:640px){ .doc table{ display:block; overflow-x:auto; white-space:nowrap; } }.doc th,.doc td{ text-align:left; padding:12px 16px; border:1px solid var(--line); font-size:.9rem; color:var(--muted); } .doc th{ color:var(--gold-bright); font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; } .doc h2{ margin-top:2.2em; } .doc ol, .doc ul{ padding-left:1.3em; list-style:decimal; color:var(--muted); } .doc ul{ list-style:disc; } .doc li{ margin-bottom:.5em; } /* blog */ .post-card .card-body p{ -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .post-meta{ display:flex; gap:14px; font-family:'Space Mono',monospace; font-size:.68rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; } /* logos / trust strip */ .trust-strip{ display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:center; opacity:.7; } .trust-strip div{ font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line); padding:10px 18px; border-radius:999px; } /* map */ .map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); filter:var(--map-filter); box-shadow:0 16px 34px -22px rgba(35,24,10,.28); } .map-frame iframe{ width:100%; height:400px; border:0; display:block; } /* floating action stack: booking / email / whatsapp */ .float-stack{ position:fixed; bottom:26px; right:26px; z-index:150; display:flex; flex-direction:column; align-items:center; gap:14px; } .float-btn{ width:56px; height:56px; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .float-btn:hover{ transform:translateY(-4px) scale(1.06); } .float-btn svg{ width:23px; height:23px; } .float-book{ background:linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); box-shadow:0 14px 26px -8px rgba(154,119,54,.55), 0 0 0 1px rgba(255,255,255,.12) inset; color:#2A1D0C; } .float-mail{ background:linear-gradient(155deg,#2E2A24,#15120E); box-shadow:0 14px 26px -8px rgba(20,17,16,.5), 0 0 0 1px rgba(255,255,255,.08) inset; } .float-wa{ width:60px; height:60px; background:linear-gradient(155deg,#3FA391,#1F6E63); box-shadow:0 14px 30px -6px rgba(31,110,99,.6), 0 0 0 1px rgba(255,255,255,.1) inset; } .float-wa::before{ content:""; position:absolute; inset:-11px; border-radius:50%; background:rgba(63,163,145,.18); z-index:-1; animation: waPulse 2.2s ease-out infinite; } .float-wa::after{ content:""; position:absolute; inset:-11px; border-radius:50%; border:1.5px solid rgba(63,163,145,.55); z-index:-1; animation: waPulse 2.2s ease-out .5s infinite; } @keyframes waPulse{ 0%{ transform:scale(.75); opacity:.8; } 80%,100%{ transform:scale(1.55); opacity:0; } } /* back to top */ .back-top{ position:fixed; bottom:96px; left:26px; z-index:150; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--backtop-bg); backdrop-filter:blur(6px); color:var(--gold-deep); box-shadow:0 8px 20px var(--backtop-shadow); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.3s; } .back-top.show{ opacity:1; pointer-events:auto; } /* ========================================================================== OPENING PRELOADER — sunrise over the dunes intro ========================================================================== */ html.preload-lock, html.preload-lock body{ overflow:hidden; height:100%; } .site-preloader{ position:fixed; inset:0; z-index:9999; overflow:hidden; background: radial-gradient(ellipse 90% 70% at 50% 30%, #FBF1DC 0%, var(--bg) 72%), var(--bg); display:flex; align-items:center; justify-content:center; transition: transform .95s var(--ease); will-change: transform; } .site-preloader.hide{ transform: translateY(-100%); pointer-events:none; } .site-preloader.no-anim{ transition:none; } .site-preloader.no-anim *{ animation:none !important; } .preloader-inner{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:16px; padding-bottom:60px; } .preloader-mark{ position:relative; width:78px; height:78px; display:flex; align-items:center; justify-content:center; } .preloader-mark span{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:2rem; color:var(--gold-deep); opacity:0; animation: gssFade .9s ease .85s forwards; } .preloader-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); } .preloader-ring circle{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-dasharray:276; stroke-dashoffset:276; animation: gssRingDraw 2s var(--ease) .2s forwards; } .preloader-word{ display:flex; font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:600; color:var(--cream); } .preloader-word span{ display:inline-block; opacity:0; transform:translateY(12px); animation: gssWordUp .7s var(--ease) forwards; } .preloader-sub{ font-family:'Space Mono',monospace; font-size:.64rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); opacity:0; animation: gssFade .8s ease 2.25s forwards; } .preloader-bar{ width:150px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; opacity:0; animation: gssFade .5s ease 2.5s forwards; } .preloader-bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--gold-bright), var(--gold-deep)); animation: gssBarFill 1.4s var(--ease) 2.65s forwards; } .preloader-scene{ position:absolute; inset:0; z-index:1; overflow:hidden; } .preloader-sun{ position:absolute; left:50%; bottom:64px; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep)); transform:translate(-50%,64px); opacity:0; box-shadow:0 0 46px rgba(201,164,94,.55); animation: gssSunRise 2.1s var(--ease) .4s forwards; } .preloader-dune{ position:absolute; left:0; right:0; bottom:0; width:100%; height:38%; } .preloader-dune path{ fill:#F0E0BC; } .preloader-dune-back{ height:42%; opacity:.8; } .preloader-dune-back path{ fill:#F5E9CB; } .preloader-dune-front{ height:34%; } @keyframes gssFade{ to{ opacity:1; } } @keyframes gssRingDraw{ to{ stroke-dashoffset:0; } } @keyframes gssWordUp{ to{ opacity:1; transform:translateY(0); } } @keyframes gssBarFill{ to{ width:100%; } } @keyframes gssSunRise{ 0%{ transform:translate(-50%,70px); opacity:0; } 100%{ transform:translate(-50%,0); opacity:1; } } @media (max-width:480px){ .preloader-word{ font-size:1.5rem; } } /* ========================================================================== INNER-PAGE OPENER — quick split curtain with wax-seal mark ========================================================================== */ .page-preloader{ position:fixed; inset:0; z-index:9999; overflow:hidden; pointer-events:none; } .pp-half{ position:absolute; left:0; right:0; height:51%; background: radial-gradient(ellipse 140% 100% at 50% 50%, #FBF1DC 0%, var(--bg) 75%), var(--bg); transition: transform 1.15s cubic-bezier(.65,0,.35,1); } .pp-top{ top:0; } .pp-bottom{ bottom:0; } .page-preloader.open .pp-top{ transform: translateY(-100%); } .page-preloader.open .pp-bottom{ transform: translateY(100%); } .pp-seam{ position:absolute; left:0; right:0; top:50%; height:1px; transform:translateY(-.5px); background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:1; transition: opacity .6s ease .45s; } .page-preloader.open .pp-seam{ opacity:0; } .pp-mark{ position:absolute; top:50%; left:50%; width:30px; height:30px; transform:translate(-50%,-50%) rotate(0deg) scale(1); color:var(--gold); opacity:1; transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .8s ease; } .page-preloader.open .pp-mark{ transform:translate(-50%,-50%) rotate(120deg) scale(.15); opacity:0; } /* ========================================================================== MOBILE BOTTOM NAVIGATION — hidden on desktop, shown under 680px ========================================================================== */ .mobile-nav{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:170; height:64px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-top:1px solid var(--line); box-shadow: 0 -10px 30px rgba(35,24,10,.1); padding-bottom: env(safe-area-inset-bottom, 0px); } [data-theme="dark"] .mobile-nav{ background: rgba(15,10,6,.94); } .mobile-nav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 2px; color:var(--muted-2); min-width:0; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.01em; text-transform:uppercase; text-align:center; transition: color .2s; } .mobile-nav a span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .mobile-nav a svg{ width:20px; height:20px; stroke-width:1.6; flex:none; } .mobile-nav a.active{ color:var(--gold-deep); } .mobile-nav a.active svg{ color:var(--gold-deep); } @media (max-width:680px){ .mobile-nav{ display:flex; } body{ padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .float-stack{ bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .chat-widget{ bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .back-top{ bottom: calc(154px + env(safe-area-inset-bottom, 0px)); } } /* ========================================================================== MOBILE QUICK-SEARCH CARD — homepage hero only, hidden on desktop ========================================================================== */ .quick-search-wrap{ display:none; } .quick-search{ background: var(--panel); border:1px solid var(--line); border-radius: 20px; padding:24px 22px 22px; box-shadow: 0 24px 50px -20px rgba(35,24,10,.3); position:relative; z-index:6; } .quick-search .field{ margin-bottom:16px; } .quick-search .field:last-of-type{ margin-bottom:20px; } .quick-search label{ display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; font-family:'Space Mono',monospace; } .quick-search select, .quick-search input{ width:100%; background:rgba(30,20,10,.03); border:1px solid var(--line); color:var(--ink); padding:12px 14px; border-radius:10px; font-family:'Jost',sans-serif; font-size:.88rem; } .quick-search select:focus, .quick-search input:focus{ outline:none; border-color:var(--gold); } @media (max-width:680px){ .quick-search-wrap{ display:block; margin-top:-46px; margin-bottom:36px; position:relative; z-index:6; } } /* ========================================================================== CHAT WIDGET ========================================================================== */ .chat-widget{ position:fixed; bottom:26px; left:26px; z-index:200; } .chat-launcher{ position:relative; width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); color:#2A1D0C; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -6px rgba(154,119,54,.55), 0 0 0 1px rgba(255,255,255,.12) inset; transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .chat-launcher:hover{ transform:translateY(-4px) scale(1.05); } .chat-launcher-icon, .chat-launcher-close{ position:absolute; width:24px; height:24px; transition:opacity .2s, transform .2s; } .chat-launcher-close{ opacity:0; transform:rotate(-45deg) scale(.6); } .chat-widget.open .chat-launcher-icon{ opacity:0; transform:rotate(45deg) scale(.6); } .chat-widget.open .chat-launcher-close{ opacity:1; transform:rotate(0) scale(1); } .chat-ping{ position:absolute; inset:-8px; border-radius:50%; border:1.5px solid var(--gold); opacity:.7; animation: chatPing 2.4s ease-out infinite; } .chat-widget.open .chat-ping{ display:none; } @keyframes chatPing{ 0%{ transform:scale(.85); opacity:.6; } 80%,100%{ transform:scale(1.35); opacity:0; } } .chat-window{ position:absolute; bottom:76px; left:0; width:340px; max-width:88vw; max-height:min(520px,70vh); background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 60px -20px rgba(35,24,10,.35); display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(16px) scale(.97); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); } .chat-widget.open .chat-window{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .chat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 18px; background:linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); color:#2A1D0C; flex:none; } .chat-head-info{ display:flex; align-items:center; gap:12px; } .chat-avatar{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.2rem; } .chat-head-info b{ display:block; font-size:.92rem; } .chat-head-info span{ display:block; font-size:.7rem; opacity:.8; } .chat-close{ background:none; border:none; color:#2A1D0C; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; opacity:.75; } .chat-close:hover{ opacity:1; } .chat-close svg{ width:18px; height:18px; } .chat-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--bg2); } .chat-msg{ max-width:82%; padding:11px 14px; border-radius:14px; font-size:.86rem; line-height:1.5; } .chat-msg.bot{ align-self:flex-start; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px; } .chat-msg.user{ align-self:flex-end; background:linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); color:#2A1D0C; border-bottom-right-radius:4px; } .chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; border-bottom-left-radius:4px; } .chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--muted-2); animation:chatTyping 1.1s infinite; } .chat-typing span:nth-child(2){ animation-delay:.15s; } .chat-typing span:nth-child(3){ animation-delay:.3s; } @keyframes chatTyping{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } .chat-quick{ display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 14px; flex:none; background:var(--bg2); } .chat-quick button{ font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer; transition:.2s; } .chat-quick button:hover{ border-color:var(--gold); color:var(--gold-deep); } .chat-input-row{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--line); background:var(--panel); flex:none; } .chat-input-row input{ flex:1; background:rgba(30,20,10,.03); border:1px solid var(--line); color:var(--ink); padding:11px 14px; border-radius:999px; font-family:'Jost',sans-serif; font-size:.86rem; } .chat-input-row input:focus{ outline:none; border-color:var(--gold); } .chat-input-row button{ width:40px; height:40px; border-radius:50%; border:none; flex:none; cursor:pointer; background:linear-gradient(155deg, var(--gold-bright), var(--gold-deep)); color:#2A1D0C; display:flex; align-items:center; justify-content:center; } .chat-input-row button svg{ width:16px; height:16px; } @media (max-width:480px){ .chat-window{ width:92vw; left:-4px; } } /* custom luxury cursor */ html.has-custom-cursor, html.has-custom-cursor *{ cursor:none !important; } html.has-custom-cursor input, html.has-custom-cursor textarea{ cursor:text !important; } html.has-custom-cursor select{ cursor:pointer !important; } .cursor-dot{ position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%; background:var(--gold-deep); pointer-events:none; z-index:500; transform:translate(-50%,-50%); transition:opacity .25s, transform .15s, background .2s; } .cursor-ring{ position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%; border:1.4px solid var(--gold); pointer-events:none; z-index:499; background:transparent; transform:translate(-50%,-50%); transition:width .28s var(--ease), height .28s var(--ease), background .28s var(--ease), border-color .28s, opacity .25s; } .cursor-ring::after{ content:""; position:absolute; inset:0; margin:auto; width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity .25s; } .cursor-ring.hover{ width:58px; height:58px; background:rgba(185,138,70,.10); border-color:var(--gold-deep); } .cursor-ring.hover::after{ opacity:0; } .cursor-ring.click{ width:24px; height:24px; background:rgba(185,138,70,.18); } .cursor-dot.click{ transform:translate(-50%,-50%) scale(1.6); } /* ambient cursor glow */ .cursor-glow{ position:fixed; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:1; background: radial-gradient(circle, rgba(201,164,94,.10), transparent 70%); transform:translate(-50%,-50%); transition: opacity .3s; will-change:transform; } /* ========================================================================== FOOTER ========================================================================== */ .newsletter{ background:linear-gradient(160deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:24px; padding:50px clamp(24px,4vw,60px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden; } .newsletter form{ display:flex; gap:10px; flex-wrap:wrap; } .newsletter input{ background:var(--input-bg-strong); border:1px solid var(--line); color:var(--ink); padding:15px 18px; border-radius:999px; min-width:260px; font-family:'Jost',sans-serif; } .newsletter input:focus{ outline:none; border-color:var(--gold); } footer.site-footer{ border-top:1px solid var(--line); padding:80px 0 30px; background:var(--bg2); margin-top:60px; } .footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:60px; } @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } } .footer-grid h4{ color:var(--gold-bright); font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; } .footer-grid li{ margin-bottom:12px; } .footer-grid a{ color:var(--muted); font-size:.9rem; transition:color .2s; } .footer-grid a:hover{ color:var(--gold-bright); } .footer-brand p{ max-width:320px; } .footer-brand .brand img{ height:64px; } .social-row{ display:flex; gap:10px; margin-top:20px; } .social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold); } .social-row a:hover{ background:var(--gold); color:#241706; } .social-row svg{ width:16px; height:16px; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; gap:14px; font-size:.8rem; color:var(--muted-2); } .footer-bottom a{ color:var(--muted-2); } .footer-bottom a:hover{ color:var(--gold); } /* reveal on scroll */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity:1; transform:translateY(0); } /* misc */ .tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; } .tag-row span{ border:1px solid var(--line); color:var(--muted); font-family:'Space Mono',monospace; font-size:.68rem; padding:6px 12px; border-radius:999px; } .two-col-text{ columns:2; column-gap:40px; } @media (max-width:760px){ .two-col-text{ columns:1; } } ::selection{ background:var(--gold); color:#241706; } .filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; } .filter-btn{ font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:10px 18px; border-radius:999px; border:1px solid var(--line); color:var(--muted); cursor:pointer; background:transparent; transition:.25s; } .filter-btn:hover{ border-color:var(--gold-dim); color:var(--gold-bright); } .filter-btn.active{ background:linear-gradient(155deg,var(--gold-bright),var(--gold-deep)); color:#241706; border-color:transparent; } .price-old{ text-decoration:line-through; opacity:.55; margin-right:8px; font-size:.8rem; } /* booking tour-detail panel */ .td-tag{ display:inline-block; background:var(--card-tag-bg); border:1px solid var(--line); color:var(--card-tag-text); font-family:'Space Mono',monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:14px; } .td-image{ border-radius:14px; overflow:hidden; margin-bottom:18px; border:1px solid var(--line); } .td-image img{ width:100%; height:200px; object-fit:cover; display:block; } .td-price{ font-family:'Space Mono',monospace; font-weight:700; color:var(--gold-deep); font-size:1.15rem; margin:16px 0 22px; padding-top:16px; border-top:1px solid var(--line); } .td-section{ margin-top:30px; } .td-section-title{ display:flex; align-items:center; gap:10px; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.05rem; color:var(--cream); letter-spacing:.02em; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); } .td-section-title svg{ width:17px; height:17px; color:var(--gold-deep); flex:none; } .td-highlights{ display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; } .td-highlights li{ display:flex; gap:9px; align-items:flex-start; font-size:.84rem; color:var(--ink); line-height:1.4; } .td-highlights li svg{ width:15px; height:15px; color:var(--gold-deep); flex:none; margin-top:2px; } @media (max-width:560px){ .td-highlights{ grid-template-columns:1fr; } } .td-incl-excl{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .td-incl-excl .box{ background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:18px; } .td-incl-excl h5{ font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px; } .td-incl-excl .included h5{ color:var(--teal-bright); } .td-incl-excl .excluded h5{ color:var(--ruby); } .td-incl-excl li{ display:flex; gap:8px; align-items:flex-start; font-size:.78rem; color:var(--muted); margin-bottom:9px; line-height:1.4; } .td-incl-excl li:last-child{ margin-bottom:0; } .td-incl-excl li svg{ width:14px; height:14px; flex:none; margin-top:1px; } .td-incl-excl .included svg{ color:var(--teal-bright); } .td-incl-excl .excluded svg{ color:var(--ruby); } @media (max-width:560px){ .td-incl-excl{ grid-template-columns:1fr; } } .td-pickup{ background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:18px; font-size:.82rem; color:var(--muted); line-height:1.65; } .td-timeline{ position:relative; } .td-timeline-item{ display:flex; gap:15px; padding-bottom:20px; position:relative; } .td-timeline-item:last-child{ padding-bottom:0; } .td-timeline-item::before{ content:""; position:absolute; left:14px; top:28px; bottom:-2px; width:1px; background:var(--line); } .td-timeline-item:last-child::before{ display:none; } .td-timeline-dot{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--gold); background:var(--panel); display:flex; align-items:center; justify-content:center; flex:none; z-index:1; } .td-timeline-dot svg{ width:11px; height:11px; color:var(--gold-deep); } .td-timeline-body{ padding-top:2px; } .td-timeline-time{ font-family:'Space Mono',monospace; font-size:.64rem; letter-spacing:.05em; color:var(--gold-deep); background:rgba(185,138,70,.1); padding:3px 9px; border-radius:6px; display:inline-block; margin-bottom:6px; } .td-timeline-title{ font-weight:600; color:var(--cream); font-size:.87rem; margin-bottom:3px; } .td-timeline-desc{ font-size:.78rem; color:var(--muted); line-height:1.5; } #tour-detail-panel h3{ margin-bottom:10px; } #tour-detail-panel .card-meta{ margin:12px 0 16px; } @media (max-width:900px){ #tour-detail-panel{ position:static !important; } }