/* =========================================================== KARIBU SAFARIS — design tokens Palette: dusk savanna, not the generic cream/terracotta combo. Fonts (Unbounded, Manrope) are loaded via in index.html's with preconnect — faster than @import, which blocks until the browser has already downloaded and parsed this whole file. =========================================================== */ :root{ --soil-950:#181310; --soil-900:#211a15; --soil-800:#2b2119; --bone-100:#f3ecdf; --bone-200:#e6dcc8; --gold-500:#c99a3d; --gold-400:#dab35f; --rust-500:#a8462f; --leaf-500:#5c6b4f; --line:rgba(243,236,223,0.14); --glow-gold:rgba(212,167,75,0.08); --font-display:'Unbounded', system-ui, sans-serif; --font-body:'Manrope', system-ui, sans-serif; --container:1180px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--soil-950); color:var(--bone-100); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.12;font-weight:600;} p{margin:0;} .wrap{max-width:var(--container);margin:0 auto;padding:0 24px;} .eyebrow{ font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:20px;height:2px; background:var(--gold-400); display:inline-block; } button{font-family:inherit;cursor:pointer;} /* ---------- focus ---------- */ a:focus-visible,button:focus-visible{ outline:2px solid var(--gold-400); outline-offset:3px; border-radius:2px; } @media (prefers-reduced-motion: reduce){ *:not(.album-track):not(.album-slide){animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} } /* ---------- nav ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; padding:14px 0; background:rgba(20,16,13,.78); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid rgba(243,236,223,0.1); transition:padding .2s ease; } .nav.scrolled{padding:10px 0;} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;} .brand{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:.02em; } .brand span{color:var(--gold-400);} .nav-links{display:flex;gap:28px;align-items:center;} .nav-links a{ font-size:.86rem;font-weight:600; color:var(--bone-200); opacity:.85; transition:opacity .2s; } .nav-links a:hover{opacity:1;color:var(--bone-100);} .burger{ display:none;background:none;border:1px solid var(--line);border-radius:8px; color:var(--bone-100);font-size:1.2rem;line-height:1;padding:8px 11px; } .nav-actions{display:flex;align-items:center;gap:12px;} /* ---------- language switcher buttons ---------- */ .lang-switcher{ display:flex;align-items:center;gap:2px; background:var(--soil-900); border:1px solid var(--line); border-radius:100px; padding:3px; } .lang-btn{ background:none;border:none; padding:5px 11px;border-radius:100px; font-family:var(--font-body);font-size:.76rem;font-weight:700; letter-spacing:.04em;text-transform:uppercase; color:var(--bone-200);cursor:pointer; transition:background .18s ease, color .18s ease; } .lang-btn:hover{color:var(--bone-100);background:rgba(255,255,255,.06);} .lang-btn.active{ background:var(--gold-400); color:var(--soil-950); } .btn{ display:inline-flex;align-items:center;gap:8px; padding:11px 22px;border-radius:100px; font-size:.86rem;font-weight:700; border:1px solid var(--gold-400); transition:all .2s ease; } .btn-solid{ background:var(--gold-400);color:var(--soil-950);border-color:var(--gold-400); box-shadow:0 2px 8px rgba(0,0,0,0.25); } .btn-solid:hover{ transform:translateY(-1px); background:var(--gold-500); border-color:var(--gold-500); box-shadow:0 4px 14px rgba(0,0,0,0.35); } .btn-ghost{color:var(--bone-100);border-color:var(--line);} .btn-ghost:hover{ border-color:var(--gold-400);color:var(--gold-400); transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.2); } /* ---------- photo album — continuous auto-scrolling filmstrip ---------- */ .album{ position:relative; width:100%;height:50vh;min-height:300px;max-height:500px; overflow:hidden; background:var(--soil-900); } .album-track{ display:flex;height:100%;width:max-content; animation:album-scroll 45s linear infinite; will-change:transform; cursor:grab; user-select:none; -webkit-user-select:none; } .album-track.is-dragging{ cursor:grabbing; } @keyframes album-scroll{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} } .album-slide{ flex:0 0 auto;height:100%; width:62vw;max-width:620px; margin-right:6px; background:var(--soil-900); } .album-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;} .album::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(to bottom, rgba(11,8,6,.15) 0%, transparent 25%, transparent 85%, rgba(24,19,16,.2) 100%); } .album::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(to right, var(--soil-950) 0%, transparent 6%, transparent 94%, var(--soil-950) 100%); } @media (max-width:720px){ .album{height:36vh;min-height:220px;} .album-slide{width:78vw;} .album-track{animation-duration:32s;} } /* ---------- hero ---------- */ .hero{ position:relative; padding:40px 0 72px; overflow:hidden; border-bottom:1px solid var(--line); } .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center; } .hero h1{ font-size:clamp(2.4rem,4.6vw,3.6rem); margin:18px 0 22px; max-width:16ch; color:var(--bone-100); } .hero h1 em{ font-style:normal; color:var(--gold-400); } .hero-sub{ font-size:1.05rem;color:var(--bone-200); max-width:46ch;margin-bottom:34px; line-height:1.65; } .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;} .hero-stats{ display:flex;gap:32px;margin-top:48px;flex-wrap:wrap; } .hero-stats div{ border-left:2px solid rgba(212,167,75,0.3);padding-left:14px; transition:border-color .3s ease; } .hero-stats div:hover{border-color:var(--gold-400);} .hero-stats b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--gold-400);} .hero-stats span{font-size:.78rem;color:var(--bone-200);opacity:.8;} /* --- route map signature element --- */ .route-map{position:relative;aspect-ratio:1/1.05;} .route-photo{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;border-radius:20px;opacity:.55; filter:brightness(.55) saturate(.75) contrast(1.05); } .route-map::after{ content:"";position:absolute;inset:0;border-radius:20px; background:radial-gradient(circle at 50% 40%, transparent 0%, rgba(11,8,6,.55) 75%), linear-gradient(180deg, rgba(11,8,6,.25) 0%, rgba(11,8,6,.55) 100%); pointer-events:none; } .route-map svg{position:relative;width:100%;height:100%;z-index:1;} .route-line{ fill:none;stroke:var(--gold-400);stroke-width:2.5;stroke-linecap:round; stroke-dasharray:900;stroke-dashoffset:900; animation:draw 2.6s ease forwards .3s; filter:drop-shadow(0 0 3px rgba(0,0,0,.8)); } @keyframes draw{to{stroke-dashoffset:0;}} .route-dot{fill:var(--soil-950);stroke:var(--gold-400);stroke-width:2;opacity:0;animation:pop .5s ease forwards;} .route-dot.filled{fill:var(--gold-400);} .route-tag{opacity:0;animation:fadein .5s ease forwards;} .route-tag rect{fill:rgba(11,8,6,.72);stroke:rgba(243,236,223,.18);stroke-width:1;} .route-tag text{ font-family:var(--font-body);font-weight:700;font-size:11px; fill:var(--bone-100);letter-spacing:.01em; } @keyframes pop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}} @keyframes fadein{to{opacity:1;}} .route-silhouette{fill:var(--soil-800);opacity:.9;} .route-map.has-photo .route-silhouette{opacity:0;} .route-traveler{opacity:0;animation:fadein .6s ease forwards;} .route-traveler-core{fill:var(--bone-100);} .route-traveler-glow{ fill:var(--gold-400);opacity:.3; } /* ---------- section basics ---------- */ section{ padding:80px 0; position:relative; } .section-head{max-width:640px;margin-bottom:48px;} .section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem);margin-top:14px; color:var(--bone-100); } .section-head p{color:var(--bone-200);margin-top:14px;font-size:1rem;line-height:1.65;} /* ---------- itinerary notebook ---------- */ .notebook{ background:var(--soil-900); border-top:1px solid var(--line);border-bottom:1px solid var(--line); position:relative; } .notebook-list{display:flex;flex-direction:column;} .notebook-row{ display:grid;grid-template-columns:80px 1fr 1fr;gap:32px; padding:28px 0;border-top:1px solid var(--line); transition:all .2s ease; position:relative; } .notebook-row:first-child{border-top:none;} .notebook-num{ font-family:var(--font-display);font-weight:800;font-size:1.6rem; color:var(--rust-500); } .notebook-row:hover .notebook-num{color:var(--gold-400);} .notebook-row h3{font-size:1.1rem;margin-bottom:6px;} .notebook-row p{color:var(--bone-200);font-size:.94rem;line-height:1.6;} /* ---------- destinations ---------- */ .dest-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; } .dest-card{ position:relative;border-radius:16px;overflow:hidden; aspect-ratio:3/4;min-height:380px;border:1px solid var(--line); display:flex;align-items:flex-end;padding:20px; background:var(--soil-900); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .dest-card[data-href]:hover, a.dest-card:hover{ transform:translateY(-4px); border-color:var(--gold-400); cursor:pointer; box-shadow:0 12px 28px rgba(0,0,0,.45); } .dest-img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0; transition:transform .4s ease; } .dest-card[data-href]:hover .dest-img, a.dest-card:hover .dest-img{ transform:scale(1.04); } .dest-card::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top, rgba(10,7,5,0.98) 0%, rgba(10,7,5,0.92) 32%, rgba(10,7,5,0.78) 55%, rgba(10,7,5,0.4) 75%, transparent 95%) !important; pointer-events:none; } /* Strong protective gradient over real photos so text is 100% readable */ .dest-card:has(.dest-img)::before{ opacity:1; background:linear-gradient(to top, rgba(10,7,5,0.98) 0%, rgba(10,7,5,0.92) 35%, rgba(10,7,5,0.78) 58%, rgba(10,7,5,0.38) 78%, transparent 95%) !important; pointer-events:none; } .dest-card.d1::before{background:radial-gradient(circle at 30% 20%, rgba(74,58,36,.5), transparent 60%),linear-gradient(to top, rgba(10,7,5,.98) 0%, rgba(10,7,5,.88) 40%, rgba(10,7,5,.5) 65%, transparent 90%);} .dest-card.d2::before{background:radial-gradient(circle at 70% 15%, rgba(61,74,52,.5), transparent 55%),linear-gradient(to top, rgba(10,7,5,.98) 0%, rgba(10,7,5,.88) 40%, rgba(10,7,5,.5) 65%, transparent 90%);} .dest-card.d3::before{background:radial-gradient(circle at 40% 10%, rgba(36,80,107,.5), transparent 55%),linear-gradient(to top, rgba(10,7,5,.98) 0%, rgba(10,7,5,.88) 40%, rgba(10,7,5,.5) 65%, transparent 90%);} .dest-card.d4::before{background:radial-gradient(circle at 60% 20%, rgba(90,51,36,.5), transparent 55%),linear-gradient(to top, rgba(10,7,5,.98) 0%, rgba(10,7,5,.88) 40%, rgba(10,7,5,.5) 65%, transparent 90%);} .dest-inner{position:relative;z-index:2;width:100%;} .dest-tag{ font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--gold-400);display:inline-block;margin-bottom:8px; background:rgba(14,10,8,0.85);border:1px solid rgba(218,179,95,0.35); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); padding:3px 9px;border-radius:4px;width:fit-content; box-shadow:0 2px 6px rgba(0,0,0,0.5); } .dest-card h3{ font-size:1.3rem;font-weight:800;color:#ffffff; text-shadow:0 2px 8px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8); transition:color .2s ease; } .dest-card[data-href]:hover h3, a.dest-card:hover h3{color:#f7d57f;} .dest-price{ font-family:var(--font-display);font-weight:800;font-size:1.02rem; color:#f6cf70;margin-top:6px; text-shadow:0 2px 8px rgba(0,0,0,0.95); } .dest-cta{ display:inline-flex;align-items:center;justify-content:center;gap:6px; font-size:.78rem;font-weight:700;color:var(--bone-100); padding:9px 16px;border-radius:100px; background:rgba(24,19,16,.85);border:1px solid var(--line); width:100%;text-align:center; transition:all .2s ease; } .dest-card[data-href]:hover .dest-cta, .dest-card:hover .dest-cta{ background:var(--gold-400);color:var(--soil-950);border-color:var(--gold-400); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.3); } .dest-cta-soon{ color:var(--bone-200);background:transparent; border:1px solid var(--line);border-radius:100px;padding:3px 12px; font-size:.68rem;letter-spacing:.05em;text-transform:uppercase; } .dest-soon:hover .dest-cta-soon{background:transparent;color:var(--bone-200);border-color:var(--line);} .dest-soon{cursor:default;} .dest-soon:hover{transform:none;} /* ---------- pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .pillar{ border:1px solid var(--line);border-radius:14px;padding:28px; background:var(--soil-900); transition:all .25s ease; } .pillar:hover{ border-color:var(--gold-400); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); } .pillar .mark{ font-family:var(--font-body); font-size:.72rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--gold-400); margin-bottom:14px; background:none; display:block; width:auto;height:auto; border-radius:0; } .pillar .mark svg{ display:inline; vertical-align:middle; } .pillar h3{font-size:1.05rem;margin-bottom:10px;} .pillar p{color:var(--bone-200);font-size:.92rem;line-height:1.6;} /* ---------- testimonials ---------- */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .testi{ border:1px solid var(--line);border-radius:16px;padding:28px; background:var(--soil-900); transition:all .3s ease; } .testi:hover{ border-color:rgba(218,179,95,.25); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.25); } .testi p{font-size:.98rem;color:var(--bone-200);margin-bottom:18px;line-height:1.65;} .testi footer{display:flex;align-items:center;gap:10px;font-size:.86rem;} .testi .avatar{ width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--gold-400),var(--rust-500)); flex-shrink:0; } .testi b{color:var(--bone-100);} /* ---------- contact ---------- */ .contact{background:var(--soil-900);border-top:1px solid var(--line);} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;} .contact-info h2{margin-bottom:16px;} .contact-info p{color:var(--bone-200);margin-bottom:28px;max-width:40ch;} .contact-line{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line);} .contact-line:last-child{border-bottom:1px solid var(--line);} .contact-line b{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-400);} .contact-line span{font-size:.95rem;} form.card-form{ border:1px solid var(--line);border-radius:16px;padding:30px; background:rgba(255,255,255,.015);display:flex;flex-direction:column;gap:16px; } .field label{display:block;font-size:.78rem;font-weight:700;margin-bottom:6px;color:var(--bone-200);} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;border-radius:10px; border:1px solid var(--line);background:var(--soil-950);color:var(--bone-100); font-family:var(--font-body);font-size:.92rem; } .field textarea{resize:vertical;min-height:96px;} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-400);} /* ---------- call banner ---------- */ .call-banner{ padding:48px 0; background:var(--soil-900); border-top:1px solid var(--line);border-bottom:1px solid var(--line); position:relative; } .call-banner-inner{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:24px; } .call-title{ font-family:var(--font-display);font-weight:600; font-size:1.4rem;margin-top:8px;color:var(--bone-100); } .call-number{ display:inline-flex;align-items:center;gap:12px; padding:15px 26px;border-radius:100px; background:var(--gold-400);color:var(--soil-950); font-family:var(--font-display);font-weight:700;font-size:1.1rem; letter-spacing:.02em;white-space:nowrap; transition:all .2s ease; box-shadow:0 4px 12px rgba(0,0,0,0.3); } .call-number:hover{ transform:translateY(-1px); background:var(--gold-500); box-shadow:0 6px 16px rgba(0,0,0,0.4); } /* ---------- floating contact buttons ---------- */ .floating-contacts{ position:fixed;right:20px;bottom:20px;z-index:60; display:flex;flex-direction:column;gap:10px; } .fab{ width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35); transition:transform .2s ease, box-shadow .2s ease; } .fab:hover{ transform:scale(1.08); box-shadow:0 6px 18px rgba(0,0,0,.45); } .fab svg{width:24px;height:24px;} .fab-whatsapp{background:#25D366;} .fab-telegram{background:#2AABEE;} .fab-viber{background:#7360F2;} /* ---------- footer ---------- */ footer.site-footer{ padding:40px 0; border-top:1px solid var(--line); background:linear-gradient(to top, rgba(24,19,16,.6), transparent); } .footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;} .footer-row small{color:var(--bone-200);opacity:.7;font-size:.82rem;} .footer-legal{display:flex;align-items:center;gap:12px;font-size:.82rem;} .footer-legal-link{color:var(--bone-200);opacity:.75;transition:color .2s ease, opacity .2s ease;} .footer-legal-link:hover{color:var(--gold-400);opacity:1;text-decoration:underline;} .footer-divider{color:var(--bone-200);opacity:.35;} .socials{display:flex;gap:16px;} .socials a{font-size:.82rem;color:var(--bone-200);opacity:.85;transition:color .2s ease;} .socials a:hover{color:var(--gold-400);opacity:1;} /* ---------- lang visibility ---------- RU is default; EN / UA / DE toggled via JS on . !important wins over component display values (e.g. label{display:block}) */ [data-en],[data-ua],[data-de]{display:none !important;} /* --- EN --- */ html[lang="en"] [data-ru],html[lang="en"] [data-ua],html[lang="en"] [data-de]{display:none !important;} html[lang="en"] [data-en]{display:inline !important;} html[lang="en"] h1[data-en],html[lang="en"] h2[data-en],html[lang="en"] h3[data-en], html[lang="en"] p[data-en],html[lang="en"] div[data-en]{display:block !important;} html[lang="en"] span.eyebrow[data-en]{display:inline-flex !important;} html[lang="en"] span.dest-tag[data-en],html[lang="en"] label[data-en]{display:block !important;} /* --- UA --- */ html[lang="ua"] [data-ru],html[lang="ua"] [data-en],html[lang="ua"] [data-de]{display:none !important;} html[lang="ua"] [data-ua]{display:inline !important;} html[lang="ua"] h1[data-ua],html[lang="ua"] h2[data-ua],html[lang="ua"] h3[data-ua], html[lang="ua"] p[data-ua],html[lang="ua"] div[data-ua]{display:block !important;} html[lang="ua"] span.eyebrow[data-ua]{display:inline-flex !important;} html[lang="ua"] span.dest-tag[data-ua],html[lang="ua"] label[data-ua]{display:block !important;} /* --- DE --- */ html[lang="de"] [data-ru],html[lang="de"] [data-en],html[lang="de"] [data-ua]{display:none !important;} html[lang="de"] [data-de]{display:inline !important;} html[lang="de"] h1[data-de],html[lang="de"] h2[data-de],html[lang="de"] h3[data-de], html[lang="de"] p[data-de],html[lang="de"] div[data-de]{display:block !important;} html[lang="de"] span.eyebrow[data-de]{display:inline-flex !important;} html[lang="de"] span.dest-tag[data-de],html[lang="de"] label[data-de]{display:block !important;} /* ---------- responsive ---------- */ @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} .route-map{max-width:420px;margin:0 auto;} .dest-grid{grid-template-columns:repeat(2,1fr);} .pillars{grid-template-columns:1fr;} .testi-grid{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;gap:40px;} .notebook-row{grid-template-columns:50px 1fr;} .notebook-row > p{grid-column:2/3;} } @media (max-width:720px){ section{padding:64px 0;} .hero{padding:48px 0 64px;} .hero-stats{gap:22px;} .hero-ctas{width:100%;} .hero-ctas .btn{flex:1;justify-content:center;} .nav-links{ display:none; position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--soil-900);border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 24px 22px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); } .nav-links.open{display:flex;} .nav-links a{padding:12px 0;border-top:1px solid var(--line);} .nav-links a:first-child{border-top:none;} .nav .wrap{ position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:12px; } .nav-actions{ display:flex; align-items:center; gap:8px; } .nav-actions .btn-solid{ display:none !important; /* Moved to burger menu on mobile to completely prevent overlapping ☰ */ } .lang-switcher{ display:flex !important; align-items:center; gap:2px; padding:2px; border-radius:100px; } .lang-btn{ padding:4px 8px; font-size:.72rem; } .burger{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; margin-left:4px; flex-shrink:0; } .dest-grid{grid-template-columns:1fr 1fr;gap:14px;} .contact-grid{gap:32px;} } @media (max-width:480px){ .wrap{padding:0 16px;} .hero h1{font-size:1.9rem;} .hero-sub{font-size:.96rem;} .hero-stats{gap:18px;} .hero-stats div{padding-left:10px;} .dest-grid{grid-template-columns:1fr;} .brand{font-size:.9rem;letter-spacing:0;flex-shrink:0;} .nav .wrap{gap:8px;padding:0 14px;} .lang-switcher{display:flex !important;padding:2px;gap:1px;} .lang-btn{padding:3px 6px !important;font-size:.66rem !important;} .nav-actions .btn-solid{display:none !important;} .burger{width:36px;height:36px;font-size:1.1rem;flex-shrink:0;} .floating-contacts{right:14px;bottom:14px;gap:10px;} .fab{width:46px;height:46px;} .fab svg{width:22px;height:22px;} .call-banner-inner{flex-direction:column;align-items:flex-start;} .call-number{width:100%;justify-content:center;} } @media (max-width:360px){ .brand span{display:none;} .lang-btn{padding:2px 4px !important;font-size:.62rem !important;} } /* ═══════════════════════════════════════════════════════ FAQ SECTION (BALANCED 2-COLUMN ACCORDION) ═══════════════════════════════════════════════════════ */ #faq { padding: 84px 0 96px; border-top: 1px solid var(--line); } .faq-grid { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: start; } .faq-intro { position: sticky; top: 96px; } .faq-intro h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 14px 0 16px; color: var(--bone-100); } .faq-lead { color: var(--bone-200); font-size: .95rem; line-height: 1.65; margin-bottom: 24px; } .faq-wa-help { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--soil-900); color: var(--bone-100); font-weight: 600; font-size: .88rem; transition: all .2s ease; } .faq-wa-help svg { color: #25D366; flex-shrink: 0; } .faq-wa-help:hover { border-color: var(--gold-400); color: var(--gold-400); transform: translateY(-1px); } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--soil-900); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .2s ease, background .2s ease; } .faq-item:hover { border-color: rgba(218, 179, 95, 0.4); } .faq-item.active, .faq-item:has(.faq-q[aria-expanded="true"]) { border-color: rgba(218, 179, 95, 0.5); background: rgba(33, 26, 21, 0.95); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--bone-100); text-align: left; transition: color .2s ease; } .faq-q:hover, .faq-q[aria-expanded="true"] { color: var(--gold-400); } .faq-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-400); transition: transform .25s ease; display: flex; align-items: center; justify-content: center; } .faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; } .faq-a p { padding: 0 22px 20px; margin: 0; color: var(--bone-200); line-height: 1.68; font-size: .94rem; } .faq-a strong { color: var(--bone-100); } @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } .faq-intro { position: static; } } /* ═══════════════════════════════════════════════════════ PREMIUM TOUR PRICE CALCULATOR ═══════════════════════════════════════════════════════ */ .calc-container { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 32px; align-items: start; max-width: 1040px; margin: 0 auto; } .calc-controls { display: flex; flex-direction: column; gap: 20px; } .calc-block { background: var(--soil-900); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; transition: border-color .2s ease; } .calc-block:focus-within, .calc-block:hover { border-color: rgba(218, 179, 95, 0.4); } .calc-block-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .calc-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-400); display: inline-flex; align-items: center; gap: 8px; } .calc-badge-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--bone-100); } /* Cards grid (Tour Type & Accommodation) */ .calc-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .calc-card-btn { background: var(--soil-950); border: 1px solid var(--line); border-radius: 10px; padding: 13px 13px; cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease; display: flex; flex-direction: column; gap: 5px; width: 100%; color: var(--bone-200); } .calc-card-btn:hover { border-color: var(--gold-400); } .calc-card-btn.active { border-color: var(--gold-400); background: rgba(218, 179, 95, 0.08); } .calc-card-title { font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--bone-100); } .calc-card-btn.active .calc-card-title { color: var(--gold-400); } .calc-card-desc { font-size: .74rem; color: var(--bone-200); opacity: .75; line-height: 1.35; } /* Duration slider & steppers */ .calc-days-wrap { display: flex; flex-direction: column; gap: 12px; } .calc-slider-row { display: flex; align-items: center; gap: 12px; } .calc-stepper-btn { width: 34px; height: 34px; border-radius: 8px; background: var(--soil-950); border: 1px solid var(--line); color: var(--gold-400); font-size: 1.15rem; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; flex-shrink: 0; line-height: 1; } .calc-stepper-btn:hover { background: var(--gold-400); color: var(--soil-950); border-color: var(--gold-400); } .calc-range-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 6px; outline: none; cursor: pointer; } .calc-range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; transition: transform .1s ease; } .calc-range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .calc-range-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); cursor: pointer; border: none; } .calc-presets-row { display: flex; gap: 8px; flex-wrap: wrap; } .calc-preset-pill { background: var(--soil-950); border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px; font-size: .78rem; color: var(--bone-200); cursor: pointer; transition: all .15s ease; } .calc-preset-pill:hover { border-color: var(--gold-400); color: var(--bone-100); } .calc-preset-pill.active { border-color: var(--gold-400); background: rgba(218, 179, 95, 0.1); color: var(--gold-400); font-weight: 700; } /* People selector */ .calc-people-group { display: flex; gap: 10px; } .calc-person-btn { flex: 1; padding: 10px 10px; border: 1px solid var(--line); background: var(--soil-950); border-radius: 8px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--bone-200); cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease; } .calc-person-btn:hover { border-color: var(--gold-400); color: var(--bone-100); } .calc-person-btn.active { border-color: var(--gold-400); background: rgba(218, 179, 95, 0.1); color: var(--gold-400); font-weight: 700; } .calc-hint { font-size: .76rem; color: var(--bone-200); opacity: .8; margin-top: 10px; display: flex; align-items: center; gap: 6px; } /* Right Column Summary Card */ .calc-summary-card { position: sticky; top: 88px; background: var(--soil-900); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .calc-summary-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-400); background: var(--soil-950); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; margin-bottom: 12px; } .calc-summary-selection { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--bone-100); margin-bottom: 14px; line-height: 1.35; } .calc-price-area { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 16px; } .calc-main-price { font-family: var(--font-display); font-size: clamp(2.2rem, 3vw, 2.7rem); font-weight: 700; color: var(--bone-100); line-height: 1; letter-spacing: -.02em; } .calc-price-note { font-size: .82rem; color: var(--bone-200); margin-top: 6px; opacity: .85; } .calc-total-badge { display: inline-block; margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--bone-100); background: var(--soil-950); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; } .calc-included-list { margin: 0 0 20px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .calc-included-item { font-size: .82rem; color: var(--bone-200); padding-left: 20px; position: relative; line-height: 1.45; } .calc-included-item::before { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: rgba(218, 179, 95, 0.12); border: 1px solid var(--gold-400); } .calc-included-item::after { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 3px; border-left: 1.5px solid var(--gold-400); border-bottom: 1.5px solid var(--gold-400); transform: rotate(-45deg); } .calc-actions { display: flex; flex-direction: column; gap: 8px; } .calc-wa-btn { display: flex; align-items: center; justify-content: center; gap: 9px; background: #25D366; color: #fff !important; font-weight: 700; font-size: .9rem; padding: 13px 18px; border-radius: 10px; transition: all .2s ease; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .calc-wa-btn:hover { background: #20BA5A; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .calc-quote-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--soil-950); color: var(--bone-100) !important; font-weight: 600; font-size: .88rem; padding: 12px 18px; border-radius: 10px; transition: all .2s ease; } .calc-quote-btn:hover { border-color: var(--gold-400); color: var(--gold-400) !important; transform: translateY(-1px); } @media (max-width: 860px) { .calc-container { grid-template-columns: 1fr; gap: 24px; } .calc-cards-grid { grid-template-columns: 1fr; } .calc-summary-card { position: static; } } /* ═══════════════════════════════════════════════════════ DESTINATION CARD — ACTIONS & PDF BUTTON ═══════════════════════════════════════════════════════ */ /* Card Actions Container */ .dest-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; width: 100%; } .dest-actions .dest-cta { width: 100%; margin-top: 0; justify-content: center; text-align: center; } /* Bottom PDF Button */ .dest-pdf-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 14px 9px 10px; border-radius: 100px; border: 1px solid rgba(218, 179, 95, 0.55); background: rgba(33, 26, 21, 0.88); color: var(--bone-100); font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: all .2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .pdf-tag-pill { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 4px; background: #c0392b; color: #ffffff; font-size: .62rem; font-weight: 800; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; flex-shrink: 0; transition: all .2s ease; } .dest-pdf-btn .pdf-btn-label { flex-grow: 1; text-align: left; line-height: 1.2; } .dest-pdf-btn .pdf-arrow { color: var(--gold-400); flex-shrink: 0; transition: transform .2s ease; } .dest-pdf-btn:hover { background: var(--gold-400); color: #12100d; border-color: var(--gold-400); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(218, 179, 95, 0.35); } .dest-pdf-btn:hover .pdf-arrow { color: #12100d; transform: translateX(3px); } .dest-pdf-btn:hover .pdf-tag-pill { background: #12100d; color: var(--gold-400); } .dest-pdf-btn:active, .dest-pdf-badge:active { transform: translateY(0); } /* ═══════════════════════════════════════════════════════ PDF MODAL VIEWER ═══════════════════════════════════════════════════════ */ .pdf-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; } .pdf-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 7, 5, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; } .pdf-modal-box { position: relative; z-index: 1; width: min(1100px, 100%); height: min(92vh, 900px); background: var(--soil-900); border: 1px solid rgba(218, 179, 95, 0.25); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(218, 179, 95, 0.1); animation: pdfModalIn .2s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes pdfModalIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .pdf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(24, 19, 16, 0.6); gap: 16px; flex-shrink: 0; } .pdf-modal-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--bone-100); min-width: 0; } .pdf-modal-title svg { color: var(--gold-400); flex-shrink: 0; } .pdf-modal-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdf-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .pdf-action-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 9px; font-family: var(--font-body); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .18s ease; text-decoration: none; white-space: nowrap; } .pdf-download-btn { background: rgba(218, 179, 95, 0.1); border: 1px solid rgba(218, 179, 95, 0.35); color: var(--gold-400); } .pdf-download-btn:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--soil-950); } .pdf-open-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--bone-200); } .pdf-open-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--bone-100); } .pdf-modal-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--bone-200); cursor: pointer; transition: all .18s ease; flex-shrink: 0; } .pdf-modal-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--bone-100); border-color: rgba(255, 255, 255, 0.2); } .pdf-modal-body { flex: 1; position: relative; background: #2a2420; min-height: 0; } .pdf-modal-body iframe { width: 100%; height: 100%; border: none; display: block; } @media (max-width: 640px) { .pdf-modal { padding: 0; align-items: flex-end; } .pdf-modal-box { width: 100%; height: 94vh; border-radius: 16px 16px 0 0; border-bottom: none; } .pdf-action-btn span { display: none; } .pdf-action-btn { padding: 8px 10px; } }