/* ========================================================= Egypt History Tours - Core Styles Brand colors are defined as CSS variables so they can be changed from ONE place (see :root below). ========================================================= */ :root { --color-primary: #F31A00; /* Egypt Orange/Red */ --color-secondary: #08275C; /* Deep Navy Blue */ --color-white: #ffffff; --color-light-bg: #f7f8fa; --color-surface: #ffffff; --color-border: #e2e4e8; --color-muted: #666666; --color-text: #222831; --font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif; --font-display: 'Playfair Display', Georgia, serif; --text-xs: clamp(.72rem, .69rem + .12vw, .82rem); --text-sm: clamp(.86rem, .82rem + .16vw, .98rem); --text-base: clamp(.98rem, .93rem + .2vw, 1.08rem); --text-lg: clamp(1.16rem, 1.02rem + .42vw, 1.42rem); --text-xl: clamp(1.62rem, 1.32rem + 1vw, 2.32rem); --text-hero: clamp(2.28rem, 1.55rem + 3.1vw, 4.65rem); --header-height: 90px; } /* ---------- Dark mode ---------- Toggled by adding data-theme="dark" on (see the blocking script in layouts/app.blade.php and the toggle button in the header). Only the "surface" tokens change — brand colors (primary/secondary) stay the same in both modes for consistent identity. */ [data-theme="dark"] { --color-light-bg: #0c1120; --color-surface: #131a2b; --color-border: #2a3348; --color-muted: #9aa4bf; --color-text: #dfe4f0; } [data-theme="dark"] .partner-logos img { filter: grayscale(1) brightness(1.8) invert(0.9); } [data-theme="dark"] .search-box input, [data-theme="dark"] .search-box select { background: var(--color-surface); color: var(--color-text); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); color: var(--color-text); line-height: 1.6; background: var(--color-surface); transition: background-color 0.25s ease, color 0.25s ease; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; display: block; } .site-main h1, .site-main h2, .site-main h3, .site-main h4 { font-family: var(--font-display); line-height: 1.12; text-wrap: balance; } .site-main p, .site-main li { font-size: var(--text-base); text-wrap: pretty; } .site-main small, .site-main .eyebrow, .site-main .form-help { font-size: var(--text-sm); } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 12px 28px; border-radius: 6px; font-weight: 600; transition: 0.25s; cursor: pointer; border: none; } .btn-primary { background: var(--color-primary); color: var(--color-white); } .btn-primary:hover { background: #c91500; } .btn-outline { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); } .btn-outline:hover { background: var(--color-white); color: var(--color-secondary); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 999; background: var(--color-surface); box-shadow: 0 2px 10px rgba(0,0,0,0.08); height: var(--header-height); transition: background-color 0.25s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .logo img { height: 60px; } .main-nav ul { display: flex; gap: 32px; } .main-nav a { font-weight: 600; color: var(--color-secondary); padding: 8px 0; position: relative; } .main-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-primary); transition: 0.25s; } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } .header-tools { display: flex; align-items: center; gap: 18px; } .selector { position: relative; } .selector-toggle { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-secondary); padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); cursor: pointer; } .selector-menu { display: none; position: absolute; right: 0; top: 110%; background: var(--color-surface); box-shadow: 0 8px 24px rgba(0,0,0,0.15); border-radius: 8px; min-width: 160px; overflow: hidden; } .selector.open .selector-menu { display: block; } .selector-menu a, .selector-menu button { display: block; width: 100%; text-align: left; padding: 10px 16px; background: none; border: none; font: inherit; color: var(--color-text); cursor: pointer; } .selector-menu a:hover, .selector-menu button:hover { background: var(--color-light-bg); } .currency-selector .selector-menu { min-width: 218px; padding: 6px; } .currency-selector form + form { border-top: 1px solid var(--color-border); } .currency-selector .currency-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 6px; font-size: 13px; } .currency-selector .currency-option > span { color: var(--color-secondary); font-weight: 700; white-space: nowrap; } .currency-selector .currency-option small { color: var(--color-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .currency-selector .currency-option[aria-current="true"] { background: #edf4ff; color: var(--color-secondary); } .currency-selector-symbol { min-width: 20px; text-align: center; color: var(--color-primary); } [data-theme="dark"] .currency-selector .currency-option[aria-current="true"] { background: rgba(243, 26, 0, .16); } .tailor-trip { background: var(--color-secondary); color: var(--color-white); padding: 10px 20px; border-radius: 30px; font-weight: 600; font-size: 14px; white-space: nowrap; } .tailor-trip:hover { background: var(--color-primary); } .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .nav-toggle span { width: 26px; height: 3px; background: var(--color-secondary); border-radius: 2px; } /* ---------- Theme toggle ---------- */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-secondary); cursor: pointer; transition: background-color 0.2s; } .theme-toggle:hover { background: var(--color-light-bg); } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 560px; display: flex; align-items: center; background: linear-gradient(180deg, rgba(8,39,92,0.75), rgba(8,39,92,0.55)), url('../images/hero-placeholder.jpg') center/cover no-repeat; background-color: var(--color-secondary); color: var(--color-white); } .hero-content { max-width: 640px; } .hero-content h1 { font-size: 44px; margin-bottom: 18px; } .hero-content p { font-size: 18px; margin-bottom: 28px; opacity: 0.95; } .search-box { margin-top: 32px; background: var(--color-surface); border-radius: 10px; padding: 18px; display: flex; gap: 12px; flex-wrap: wrap; } .search-box input, .search-box select { flex: 1; min-width: 160px; padding: 12px; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; color: var(--color-text); } /* ---------- Section Titles ---------- */ .section { padding: 70px 0; } .section-title { text-align: center; margin-bottom: 40px; } .section-title span { color: var(--color-primary); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; } .section-title h2 { color: var(--color-secondary); font-size: 32px; margin-top: 6px; } /* ---------- Trip Cards ---------- */ .trip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .trip-card { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.08); transition: transform 0.25s, background-color 0.25s; background: var(--color-surface); } .trip-card:hover { transform: translateY(-6px); } .trip-card img { height: 200px; width: 100%; object-fit: cover; } .trip-card-body { padding: 18px; } .trip-card-body h3 { color: var(--color-secondary); margin-bottom: 8px; font-size: 18px; } .trip-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 14px; color: var(--color-muted); } .trip-price { color: var(--color-primary); font-weight: 700; font-size: 16px; } /* ---------- Destinations strip ---------- */ .destinations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; } .destination-card { position: relative; height: 220px; border-radius: 10px; overflow: hidden; } .destination-card img { width: 100%; height: 100%; object-fit: cover; } .destination-card span { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, transparent, rgba(8,39,92,0.85)); color: var(--color-white); padding: 30px 16px 14px; font-weight: 700; } /* ---------- Why Choose Us ---------- */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; } .feature-item { text-align: center; } .feature-item .icon { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--color-secondary); color: var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; } .feature-item h4 { color: var(--color-secondary); margin-bottom: 8px; } .bg-light { background: var(--color-light-bg); } /* ---------- Testimonials ---------- */ .testimonial-card { background: var(--color-surface); border-radius: 10px; padding: 24px; box-shadow: 0 4px 18px rgba(0,0,0,0.08); transition: background-color 0.25s; } .testimonial-card .stars { color: var(--color-primary); margin-bottom: 10px; } .testimonial-card h5 { margin-top: 14px; color: var(--color-secondary); } /* ---------- Newsletter ---------- */ .newsletter { background: var(--color-secondary); color: var(--color-white); padding: 60px 0; text-align: center; } .newsletter form { display: flex; max-width: 480px; margin: 26px auto 0; gap: 10px; flex-wrap: wrap; } .newsletter input { flex: 1; min-width: 220px; padding: 12px 16px; border-radius: 6px; border: none; } /* ---------- Footer ---------- */ .site-footer { background: var(--color-secondary); color: #dfe4f0; padding-top: 60px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.15); } .footer-logo img { height: 50px; margin-bottom: 14px; } .footer-col h5 { color: var(--color-white); margin-bottom: 18px; font-size: 16px; } .footer-col ul li { margin-bottom: 10px; } .footer-col a:hover { color: var(--color-primary); } .social-icons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .social-icons a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; } .social-icons a:hover { background: var(--color-primary); } .partner-logos { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 24px 0; opacity: 0.85; } .partner-logos img { height: 28px; filter: grayscale(1) brightness(2); } .footer-bottom { padding: 20px 0 30px; text-align: center; font-size: 14px; color: #b9c2da; } /* ---------- Responsive ---------- */ @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: flex; } .tailor-trip { display: none; } .hero-content h1 { font-size: 32px; } .detail-grid { grid-template-columns: 1fr; } .booking-box { position: static !important; top: auto !important; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .hero { min-height: 460px; } .search-box { flex-direction: column; } .split-grid { grid-template-columns: 1fr !important; } .day-item { gap: 12px !important; } .day-badge { min-width: 56px !important; height: 56px !important; font-size: 12px; } } /* ---------- Mobile dropdown nav ---------- .nav-toggle (hamburger, shown ≤860px) toggles this open via app.js by adding/removing the "open" class on .main-nav. */ .main-nav .mobile-only-link { display: none; } @media (max-width: 860px) { .header-inner { flex-wrap: wrap; } .main-nav { display: none; width: 100%; order: 3; background: var(--color-surface); border-top: 1px solid var(--color-border); } .main-nav.open { display: block; } .main-nav ul { flex-direction: column; gap: 0; padding: 8px 0; } .main-nav a { display: block; padding: 14px 4px; } .main-nav a::after { display: none; } .main-nav .mobile-only-link { display: block; margin: 10px 4px; padding: 12px 20px; text-align: center; background: var(--color-primary); color: #fff; border-radius: 8px; font-weight: 600; } } /* ---------- Reusable responsive layout utilities (trip/destination pages) ---------- */ .detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; } .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .day-item { display: flex; gap: 18px; margin-bottom: 22px; } .day-badge { min-width: 70px; height: 70px; border-radius: 50%; background: var(--color-secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .booking-box { position: sticky; top: 110px; } /* ---------- Responsive video embed (16:9, YouTube/Vimeo) ---------- */ .video-embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ border-radius: 10px; overflow: hidden; background: #000; } .video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; object-fit: cover; } /* ---------- Touch-friendly tap targets on small screens ---------- */ @media (max-width: 560px) { .selector-toggle, .theme-toggle { min-height: 42px; } .btn { padding: 13px 24px; } .site-header { height: 72px; } .logo img { height: 44px; } } /* ---------- Scroll-reveal animations ---------- Add class="reveal" to any element (cards, section titles, ...) and it fades/slides in the first time it enters the viewport. Handled in app.js via IntersectionObserver — kept subtle on purpose per the brief ("حركات ناعمة"), not flashy. Respects reduced-motion. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Gentle page-load fade so navigating between pages doesn't feel abrupt. */ body { animation: page-fade-in 0.35s ease; } @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- Journey-card and page transitions ---------- */ @media (prefers-reduced-motion: no-preference) { html.motion-ready [data-journey-card] { opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .34s cubic-bezier(.23,1,.32,1), transform .34s cubic-bezier(.23,1,.32,1), box-shadow .22s ease; transition-delay: calc(var(--journey-delay, 0) * 48ms); } html.motion-ready [data-journey-card].is-entered { opacity: 1; transform: translateY(0) scale(1); } html[data-motion-level="expressive"].motion-ready [data-journey-card] { transition-delay: calc(var(--journey-delay, 0) * 72ms); transform: translateY(22px) scale(.975); } html.is-page-leaving main { opacity: .28; transform: translateY(8px); transition: opacity .16s ease-out, transform .16s ease-out; } html.is-page-leaving [data-journey-card] { opacity: 0; transform: translateY(-8px) scale(.99); transition-delay: 0ms; } .catalog-trip-card:hover { box-shadow:0 14px 30px rgba(8,39,92,.15); } .catalog-trip-card .trip-card-media img { transition: transform .36s cubic-bezier(.23,1,.32,1), filter .28s ease; } .catalog-trip-card:hover .trip-card-media img { transform:scale(1.045); filter:saturate(1.04); } .text-link span { display:inline-block; transition:transform .18s cubic-bezier(.23,1,.32,1); } .text-link:hover span { transform:translateX(4px); } } /* ---------- WhatsApp floating button ---------- */ .whatsapp-float { position: fixed; inset-inline-end: max(16px, env(safe-area-inset-right)); bottom: max(56px, calc(56px + env(safe-area-inset-bottom))); width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.25); z-index: 998; animation: whatsapp-pulse 2.4s infinite; transition: transform 0.2s; } .whatsapp-float:hover { transform: scale(1.08); } @keyframes whatsapp-pulse { 0% { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.5); } 70% { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0); } } @media (prefers-reduced-motion: reduce) { .whatsapp-float { animation: none; } } @media (max-width: 560px) { .whatsapp-float { inset-inline-end: max(14px, env(safe-area-inset-right)); bottom: max(72px, calc(72px + env(safe-area-inset-bottom))); width: 52px; height: 52px; } } /* ---------- P1: Commercial catalog and destination discovery ---------- */ .catalog-hero { min-height: 360px; } .eyebrow-light, .catalog-kicker { display:block; font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .eyebrow-light { color:#F31A00; margin-bottom:10px; } .catalog-kicker { color:var(--color-primary); margin-bottom:8px; } .catalog-section { padding-top:54px; } .catalog-intro, .destination-story { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,.8fr); gap:32px; align-items:end; margin-bottom:26px; } .catalog-intro h2, .destination-index-intro h2 { color:var(--color-secondary); font-size:30px; margin:0 0 10px; } .catalog-intro p, .destination-index-intro p { max-width:760px; color:var(--color-muted); } .catalog-planner-link { display:flex; flex-direction:column; gap:3px; padding:18px; border-radius:10px; color:var(--color-secondary); background:#f6f8fc; border:1px solid var(--color-border); } .catalog-planner-link strong { color:var(--color-primary); } .catalog-chips { display:flex; gap:9px; flex-wrap:wrap; margin:0 0 28px; } .catalog-chip { border:1px solid var(--color-border); border-radius:999px; padding:8px 13px; background:var(--color-surface); color:var(--color-secondary); font-size:14px; font-weight:700; } .catalog-chip:hover, .catalog-chip.is-active { background:var(--color-secondary); color:#fff; border-color:var(--color-secondary); } .catalog-chip small { opacity:.75; margin-inline-start:3px; } .catalog-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; } .catalog-sidebar { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:18px; position:sticky; top:98px; } .filter-heading, .catalog-results-bar, .trip-card-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; } .filter-heading { margin-bottom:14px; }.filter-heading h3 { color:var(--color-secondary); margin:0; }.filter-heading a { color:var(--color-primary); font-size:13px; font-weight:700; } .catalog-filter-form label { display:block; margin:0 0 14px; color:var(--color-secondary); font-weight:700; font-size:13px; } .catalog-filter-form select, .catalog-mobile-sort select { display:block; margin-top:6px; width:100%; padding:10px; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font:inherit; } .catalog-filter-form .btn { width:100%; margin-top:4px; } .catalog-results-bar { margin:0 0 18px; }.catalog-results-bar p { margin:0; color:var(--color-muted); }.catalog-mobile-sort { min-width:180px; }.catalog-mobile-sort select { margin:0; } .catalog-trip-grid { gap:22px; }.catalog-trip-card { display:flex; flex-direction:column; }.trip-card-media { position:relative; display:block; }.trip-card-media img { display:block; }.trip-badge { position:absolute; z-index:1; top:12px; inset-inline-start:12px; padding:5px 9px; background:var(--color-primary); color:#fff; border-radius:4px; font-size:12px; font-weight:800; } .trip-card-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }.trip-card-tags span { color:#4e607f; background:#eef3fa; border-radius:999px; font-size:11px; padding:4px 7px; font-weight:700; }.trip-card-body h3 a { color:inherit; }.trip-fact-row { display:flex; gap:9px; flex-wrap:wrap; padding:11px 0; color:var(--color-muted); font-size:12px; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); margin-top:14px; }.trip-fact-row span + span::before { content:'•'; margin-inline-end:9px; color:var(--color-primary); } .trip-card-footer { margin-top:14px; }.trip-card-footer small { display:block; color:var(--color-muted); font-size:12px; }.trip-card-footer strong { color:var(--color-primary); font-size:17px; }.text-link { color:var(--color-secondary); font-weight:800; font-size:14px; }.text-link:hover { color:var(--color-primary); } .catalog-empty { grid-column:1/-1; text-align:center; padding:48px 22px; border:1px dashed var(--color-border); border-radius:10px; }.catalog-empty h3 { color:var(--color-secondary); margin-bottom:7px; }.catalog-empty p { color:var(--color-muted); margin-bottom:18px; }.catalog-pagination { margin-top:28px; }.catalog-pagination nav { display:flex; justify-content:center; }.catalog-pagination nav > div:first-child { display:none; } .destination-index-intro { max-width:800px; margin-bottom:28px; }.destination-index-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }.destination-index-card { height:260px; box-shadow:0 4px 16px rgba(0,0,0,.09); }.destination-index-card span { display:flex; flex-direction:column; gap:3px; }.destination-index-card span small { font-size:12px; font-weight:500; opacity:.88; }.destination-category-section { background:#f6f8fc; padding:42px 0; }.destination-category-section h2 { color:var(--color-secondary); font-size:24px; margin-bottom:16px; }.section-cta { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:32px; } .destination-story { align-items:start; }.destination-story h2 { color:var(--color-secondary); font-size:30px; margin:0 0 12px; }.destination-story p { font-size:17px; max-width:720px; }.destination-plan-card, .destination-note { padding:22px; background:#f7f9fc; border-radius:10px; border:1px solid var(--color-border); }.destination-plan-card h3, .destination-note h3, .destination-detail-grid h3 { color:var(--color-secondary); margin-bottom:9px; }.destination-plan-card .btn { width:100%; text-align:center; margin-top:10px; }.destination-gallery { margin:36px 0; }.destination-gallery .destination-card { height:190px; }.destination-detail-grid { align-items:start; }.destination-highlights { display:grid; gap:10px; list-style:none; padding:0; margin:0; }.destination-highlights li { padding-inline-start:20px; position:relative; }.destination-highlights li::before { content:'✓'; color:var(--color-primary); position:absolute; inset-inline-start:0; font-weight:900; }.destination-tour-section { background:#f8fafc; } @media (max-width: 900px) { .catalog-layout { grid-template-columns:1fr; }.catalog-sidebar { position:static; }.catalog-filter-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.catalog-filter-form .filter-heading, .catalog-filter-form .btn { grid-column:1/-1; }.catalog-filter-form label { margin:0; }.catalog-intro, .destination-story { grid-template-columns:1fr; } } @media (max-width: 560px) { .catalog-filter-form { grid-template-columns:1fr; }.catalog-results-bar { align-items:flex-start; flex-direction:column; }.catalog-mobile-sort { width:100%; }.catalog-hero .hero-content h1 { font-size:36px; }.catalog-intro h2, .destination-index-intro h2, .destination-story h2 { font-size:26px; } } /* ---------- P2: Trip product page ---------- */ .trip-product-hero { min-height:390px; color:#fff; display:flex; align-items:center; background-color:var(--color-secondary); background-size:cover; background-position:center; }.trip-product-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; }.trip-product-heading h1 { font-size:44px; max-width:800px; margin:0 0 12px; }.trip-product-heading p { font-size:19px; max-width:680px; margin:0; opacity:.94; }.trip-hero-tags span { background:rgba(255,255,255,.15); color:#fff; }.trip-hero-facts { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; font-weight:700; }.trip-hero-facts span + span::before { content:'•'; margin-inline-end:12px; color:#F31A00; } .trip-gallery-section { background:#f5f7fb; padding:24px 0; }.trip-mosaic { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:150px 150px; gap:8px; position:relative; }.trip-mosaic-item { display:block; overflow:hidden; border-radius:7px; background:#e3e8f0; }.trip-mosaic-item.item-1 { grid-row:span 2; }.trip-mosaic-item img { height:100%; width:100%; object-fit:cover; transition:transform .35s ease; }.trip-mosaic-item:hover img { transform:scale(1.04); }.trip-gallery-more { position:absolute; bottom:14px; inset-inline-end:14px; color:#fff; background:rgba(8,39,92,.82); border-radius:5px; padding:8px 10px; font-weight:800; font-size:13px; } .trip-section-nav { position:sticky; top:0; z-index:20; background:var(--color-surface); border-bottom:1px solid var(--color-border); }.trip-section-nav .container { display:flex; gap:20px; overflow:auto; white-space:nowrap; }.trip-section-nav a { padding:14px 0; color:var(--color-secondary); font-size:13px; font-weight:800; }.trip-section-nav a:hover { color:var(--color-primary); } .trip-product-section { padding-top:48px; }.trip-product-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:42px; align-items:start; }.trip-content-block { padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--color-border); }.trip-content-block h2 { color:var(--color-secondary); font-size:28px; margin:0 0 14px; }.trip-summary { color:#34455f; font-size:18px; line-height:1.8; max-width:860px; }.trip-facts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:24px; }.trip-facts-grid div { padding:14px; background:#f6f8fc; border:1px solid #e7ebf2; border-radius:8px; }.trip-facts-grid small { display:block; color:var(--color-muted); font-size:12px; margin-bottom:4px; }.trip-facts-grid strong { color:var(--color-secondary); font-size:14px; }.trip-tag-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }.trip-tag-list span, .trip-tag-list a { padding:6px 9px; border-radius:999px; font-size:12px; font-weight:700; background:#edf2fa; color:#435977; }.trip-tag-list a { color:var(--color-primary); } .trip-accordion { display:grid; gap:10px; }.trip-accordion-item { border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); }.trip-accordion-item summary { display:flex; align-items:center; gap:12px; padding:16px; cursor:pointer; color:var(--color-secondary); list-style:none; }.trip-accordion-item summary::-webkit-details-marker { display:none; }.trip-accordion-item .day-badge { flex:0 0 auto; padding:5px 8px; border-radius:4px; background:var(--color-primary); color:#fff; font-size:12px; }.trip-accordion-item summary strong { flex:1; }.accordion-symbol { font-size:23px; line-height:1; font-weight:400; }.trip-accordion-item[open] .accordion-symbol { transform:rotate(45deg); }.trip-accordion-content { padding:0 16px 16px 56px; color:var(--color-text); }.trip-accordion-content p { margin:0; } .trip-inclusions { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.trip-inclusions h2 { font-size:21px; }.trip-inclusions ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }.trip-inclusions li { position:relative; padding-inline-start:22px; }.trip-inclusions li::before { content:'✓'; position:absolute; inset-inline-start:0; color:#0f8b58; font-weight:900; }.trip-inclusions .not-included li::before { content:'–'; color:#cb3e32; } .stay-list { display:grid; gap:12px; }.stay-card { display:flex; gap:16px; padding:12px; border:1px solid var(--color-border); border-radius:8px; }.stay-card img { width:142px; height:106px; object-fit:cover; border-radius:5px; }.stay-card h3 { color:var(--color-secondary); margin:0 0 4px; }.stay-location { color:var(--color-primary); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 4px; }.stay-stars { color:#e9a522; margin:5px 0; }.stay-card small { color:var(--color-muted); }.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }.pricing-card { padding:20px; border:1px solid var(--color-border); border-radius:9px; background:#fff; }.pricing-card h3 { color:var(--color-secondary); margin:0 0 7px; }.pricing-card > p { color:var(--color-muted); }.pricing-price { margin:16px 0 8px; }.pricing-price small { display:block; color:var(--color-muted); }.pricing-price strong { color:var(--color-primary); font-size:22px; }.pricing-child, .pricing-notes { font-size:13px; }.pricing-card > small { color:var(--color-muted); }.trip-seo-intro { background:#f6f8fc; border:0; border-radius:9px; padding:24px; } .trip-inquiry-sidebar { position:sticky; top:72px; }.trip-inquiry-card { padding:22px; border-radius:10px; border:1px solid var(--color-border); box-shadow:0 8px 28px rgba(8,39,92,.1); background:var(--color-surface); }.trip-inquiry-card h2 { color:var(--color-secondary); margin:0 0 8px; font-size:25px; }.trip-inquiry-card form { margin-top:18px; }.trip-inquiry-card .form-group label, .review-form-card .form-group label { display:block; color:var(--color-secondary); font-weight:700; font-size:13px; margin-bottom:6px; }.trip-inquiry-card input, .trip-inquiry-card select, .review-form-card input, .review-form-card select, .review-form-card textarea { width:100%; padding:10px; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); font:inherit; }.secondary-cta { display:block; margin-top:14px; text-align:center; color:var(--color-secondary); font-weight:800; font-size:13px; } .related-trip-section, .trip-review-section { background:#f7f9fc; }.review-average, .review-stars { color:#e9a522; }.review-average span { color:var(--color-muted); font-size:14px; }.trip-review-card { margin-bottom:16px; }.trip-review-card h3 { color:var(--color-secondary); margin:4px 0; font-size:17px; }.trip-review-card small { color:var(--color-muted); }.review-photo-grid { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }.review-photo-grid img { border-radius:5px; width:70px; height:70px; object-fit:cover; }.review-form-card { padding:24px; border-radius:10px; background:var(--color-surface); box-shadow:0 4px 18px rgba(0,0,0,.08); }.review-form-card h3 { color:var(--color-secondary); margin-bottom:16px; }.honeypot { position:absolute; inset-inline-start:-9999px; } @media (max-width: 900px) { .trip-product-layout { grid-template-columns:1fr; }.trip-inquiry-sidebar { position:static; }.trip-product-heading { align-items:flex-start; flex-direction:column; }.trip-product-heading h1 { font-size:38px; } } @media (max-width: 600px) { .trip-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:160px 120px; }.trip-mosaic-item.item-1 { grid-column:span 2; grid-row:span 1; }.trip-mosaic-item.item-4, .trip-mosaic-item.item-5 { display:none; }.trip-section-nav .container { gap:16px; }.trip-inclusions { grid-template-columns:1fr; }.stay-card img { width:100px; height:80px; }.trip-product-heading h1 { font-size:32px; }.trip-product-heading p { font-size:17px; }.trip-accordion-content { padding-inline-start:16px; } } /* ---------- P3: Secure multi-step tailor-made planner ---------- */ .tailor-container { max-width:900px; }.tailor-success, .tailor-error { padding:16px 18px; border-radius:9px; margin-bottom:24px; }.tailor-success { color:#1f6f43; background:#e6f7ec; border:1px solid #34c26e; }.tailor-error { color:#9d1c1c; background:#fff1f1; border:1px solid #ec7f7f; }.tailor-error ul { margin:8px 0 0; padding-inline-start:20px; }.tailor-progress { display:flex; align-items:center; justify-content:center; margin:0 auto 26px; max-width:680px; }.tailor-step { display:flex; flex-direction:column; align-items:center; gap:6px; color:#8390a5; font-size:12px; text-align:center; min-width:92px; }.tailor-step span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:2px solid #c9d2e0; font-weight:800; }.tailor-step.is-current { color:var(--color-secondary); }.tailor-step.is-current span { color:#fff; background:var(--color-primary); border-color:var(--color-primary); }.tailor-progress-line { height:2px; flex:1; max-width:130px; background:#dbe2ec; margin-top:-22px; }.tailor-trip-context { display:flex; justify-content:space-between; gap:12px; padding:14px 16px; background:#f2f6fb; border-inline-start:4px solid var(--color-primary); color:var(--color-secondary); margin-bottom:20px; border-radius:0 7px 7px 0; }.tailor-trip-context span { color:var(--color-muted); font-size:13px; }.tailor-form-card { padding:30px; background:var(--color-surface); box-shadow:0 7px 26px rgba(8,39,92,.09); border-radius:11px; }.tailor-form-card h2 { color:var(--color-secondary); font-size:28px; margin:0 0 8px; }.tailor-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.party-grid { grid-template-columns:repeat(3,1fr); }.tailor-form-card .form-group { margin-top:18px; }.tailor-form-card .form-group label { display:block; color:var(--color-secondary); font-weight:700; font-size:13px; margin-bottom:6px; }.tailor-form-card input:not([type=checkbox]), .tailor-form-card textarea, .tailor-form-card select { width:100%; padding:11px; border:1px solid var(--color-border); border-radius:6px; font:inherit; background:var(--color-surface); }.tailor-destination-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:22px 0 26px; }.tailor-destination-choice { position:relative; overflow:hidden; height:140px; border-radius:8px; cursor:pointer; background:var(--color-secondary); border:2px solid transparent; }.tailor-destination-choice input { position:absolute; z-index:2; top:10px; inset-inline-start:10px; width:18px; height:18px; accent-color:var(--color-primary); }.tailor-destination-choice img { width:100%; height:100%; object-fit:cover; opacity:.72; transition:transform .25s; }.tailor-destination-choice:hover img { transform:scale(1.04); }.tailor-destination-choice:has(input:checked) { border-color:#F31A00; box-shadow:0 0 0 3px rgba(243,26,0,.25); }.tailor-destination-choice span { position:absolute; bottom:0; inset-inline:0; color:#fff; padding:28px 12px 11px; font-weight:800; background:linear-gradient(transparent,rgba(8,39,92,.86)); }.tailor-consent { display:block; padding:13px; border-radius:7px; background:#f7f9fc; font-size:13px; line-height:1.5; margin:18px 0; }.tailor-consent a { color:var(--color-primary); font-weight:700; }.tailor-form-actions { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:22px; }.tailor-form-actions .btn { text-align:center; }.honeypot { position:absolute; inset-inline-start:-9999px; } @media (max-width: 600px) { .tailor-form-card { padding:22px 16px; }.tailor-form-grid, .party-grid { grid-template-columns:1fr; }.tailor-progress { margin-inline:-10px; }.tailor-step { min-width:72px; font-size:11px; }.tailor-progress-line { max-width:50px; }.tailor-trip-context { flex-direction:column; }.tailor-form-actions { align-items:stretch; flex-direction:column; }.tailor-form-actions .btn { width:100%; } } /* ---------- P4: Homepage commercial CMS ---------- */ .promotion-strip { background:#102b55; color:#fff; }.promotion-track { display:flex; overflow:auto; scrollbar-width:none; }.promotion-track::-webkit-scrollbar { display:none; }.promotion-item { display:flex; justify-content:space-between; align-items:center; gap:18px; flex:1 0 100%; padding:12px 0; background:var(--promotion-color,#102b55); }.promotion-item strong { display:block; font-size:14px; }.promotion-item span { opacity:.86; font-size:13px; }.promotion-item a { color:#fff; font-weight:800; font-size:13px; white-space:nowrap; }.home-hero .search-box { margin-bottom:0; }.home-trip-search { align-items:center; }.home-trip-search label.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }.section-title p { max-width:680px; margin:10px auto 0; color:var(--color-muted); }.destination-card span small { display:block; margin-top:3px; font-size:11px; font-weight:500; opacity:.86; }.trust-grid .feature-item { border:1px solid var(--color-border); border-radius:9px; padding:22px; background:var(--color-surface); }.newsletter .eyebrow-light { color:#F31A00; }.newsletter-success { display:inline-block; background:rgba(255,255,255,.15); padding:10px 16px; border-radius:8px; margin-bottom:14px; }.newsletter small { display:block; margin:8px 0 12px; opacity:.9; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (min-width: 720px) { .promotion-item { flex-basis:50%; padding-inline:12px; } }.home-trip-search input { min-width:190px; } /* ---------- P5: Progressive interaction and Web Vitals ---------- */ .home-hero, .catalog-hero, .trip-product-hero { contain:paint; }.trip-card, .feature-item, .destination-index-card { content-visibility:auto; contain-intrinsic-size:auto 360px; }.catalog-filter-form input[type=search] { display:block; margin-top:6px; width:100%; padding:10px; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font:inherit; }.trip-lightbox { width:min(96vw,1200px); max-width:none; border:0; padding:0; background:transparent; overflow:visible; }.trip-lightbox::backdrop { background:rgba(4,17,40,.88); }.trip-lightbox figure { margin:0; display:grid; justify-items:center; gap:10px; }.trip-lightbox img { max-width:92vw; max-height:80vh; object-fit:contain; border-radius:6px; background:#0a1930; }.trip-lightbox figcaption { color:#fff; font-size:13px; }.trip-lightbox button { position:absolute; border:0; cursor:pointer; color:#fff; background:rgba(8,39,92,.75); width:42px; height:42px; border-radius:50%; font-size:31px; line-height:1; }.trip-lightbox .lightbox-close { top:-50px; inset-inline-end:0; }.trip-lightbox .lightbox-next { top:50%; inset-inline-end:10px; transform:translateY(-50%); }.trip-lightbox .lightbox-previous { top:50%; inset-inline-start:10px; transform:translateY(-50%); }.trip-lightbox button:hover { background:var(--color-primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal { opacity:1 !important; transform:none !important; } } /* ---------- Trust, expertise and public service pages ---------- */ :root { --font-display: "Playfair Display", Georgia, "Times New Roman", serif; } h1, h2, h3, .display-title { font-family:var(--font-display); letter-spacing:-.018em; } .hero--compact { min-height:320px; display:flex; align-items:center; } .hero--compact .hero-content { max-width:740px; } .hero--compact .eyebrow, .deal-card__eyebrow, .team-card__role { display:block; color:var(--color-primary); font-family:var(--font-main); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .container--narrow { max-width:920px; } .deal-grid, .team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:24px; } .deal-card, .team-card { overflow:hidden; border:1px solid var(--color-border); border-radius:14px; background:var(--color-surface); box-shadow:0 12px 28px rgba(8,39,92,.08); } .deal-card > img { width:100%; height:205px; object-fit:cover; } .deal-card__content, .team-card__content { padding:24px; } .deal-card__content { border-top:4px solid var(--deal-accent, var(--color-primary)); } .deal-card h2, .team-card h2 { margin:7px 0 10px; color:var(--color-secondary); font-size:27px; line-height:1.18; } .deal-card p, .team-card p { color:var(--color-muted); } .deal-card .btn { margin-top:18px; } .deal-card__deadline { margin-top:14px; font-size:13px; font-weight:700; } .team-card { display:flex; flex-direction:column; } .team-card > img, .team-card__initial { width:100%; height:270px; object-fit:cover; } .team-card__initial { display:grid; place-items:center; background:linear-gradient(135deg, var(--color-secondary), #1d5d9b); color:#fff; font-family:var(--font-display); font-size:96px; } .team-card__role { margin-bottom:14px; } .team-card__credentials, .team-card__languages { margin-top:12px; padding-top:12px; border-top:1px solid var(--color-border); font-size:13px; } .team-card__content > a { display:inline-block; margin-top:14px; color:var(--color-primary); font-family:var(--font-main); font-size:14px; font-weight:800; } .faq-group + .faq-group { margin-top:42px; } .faq-group h2 { margin-bottom:14px; color:var(--color-secondary); font-size:31px; } .accordion { display:grid; gap:10px; } .accordion-item { border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); overflow:hidden; } .accordion-item summary { position:relative; padding:18px 54px 18px 20px; color:var(--color-secondary); cursor:pointer; font-weight:800; list-style:none; } .accordion-item summary::-webkit-details-marker { display:none; } .accordion-item summary::after { content:'+'; position:absolute; inset-inline-end:20px; top:50%; transform:translateY(-50%); color:var(--color-primary); font:300 28px/1 var(--font-main); } .accordion-item[open] summary::after { content:'−'; } .accordion-answer { padding:0 20px 20px; color:var(--color-text); line-height:1.8; } .empty-state { max-width:720px; margin:0 auto; padding:54px 30px; text-align:center; border:1px dashed var(--color-border); border-radius:14px; background:color-mix(in srgb, var(--color-light-bg) 80%, var(--color-surface)); } .empty-state h2 { margin:8px 0 12px; color:var(--color-secondary); font-size:34px; } .empty-state p { max-width:540px; margin:0 auto 22px; color:var(--color-muted); } [data-theme="dark"] .deal-card, [data-theme="dark"] .team-card, [data-theme="dark"] .accordion-item { box-shadow:0 12px 28px rgba(0,0,0,.22); } @media (max-width:650px) { .hero--compact { min-height:280px; }.hero--compact .hero-content h1 { font-size:39px; }.deal-grid, .team-grid { grid-template-columns:1fr; }.deal-card > img { height:190px; }.team-card > img, .team-card__initial { height:230px; }.faq-group h2, .empty-state h2 { font-size:28px; }.accordion-item summary { padding-inline:16px 46px; } } .trust-section { background:linear-gradient(135deg, #f2f6fb, #fff8ee); } .trust-card { padding:30px; border:1px solid #dbe5f2; border-radius:14px; background:var(--color-surface); box-shadow:0 12px 28px rgba(8,39,92,.08); } .trust-card h2 { margin:8px 0 12px; color:var(--color-secondary); font-size:32px; } .trust-card p { max-width:760px; color:var(--color-text); } .trust-card__details { margin-top:16px; padding-top:16px; border-top:1px solid var(--color-border); } .footer-trust-line { margin-top:24px; padding:13px 16px; border:1px solid rgba(255,255,255,.18); border-radius:8px; color:#dce8fc; font-size:13px; line-height:1.6; } .footer-trust-line a { margin-inline-start:7px; color:#F31A00; font-weight:800; } [data-theme="dark"] .trust-section { background:linear-gradient(135deg, #101b31, #191b25); } @media (max-width:650px) { .trust-card { padding:23px 18px; }.trust-card h2 { font-size:28px; } } .trip-hero-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; flex-wrap:wrap; } .trip-hero-actions .btn { white-space:nowrap; } .trip-print-button { appearance:none; border:1px solid rgba(255,255,255,.72); border-radius:6px; padding:10px 13px; color:#fff; background:rgba(8,39,92,.16); font:700 13px var(--font-main); cursor:pointer; } .trip-print-button:hover { color:var(--color-secondary); background:#fff; } @media (max-width:900px) { .trip-hero-actions { justify-content:flex-start; }.trip-hero-actions .btn, .trip-print-button { padding:10px 14px; } } @media print { .site-header, .site-footer, .whatsapp-float, .trip-gallery-section, .trip-section-nav, .trip-inquiry-sidebar, .trip-hero-actions, .related-trip-section, #reviews { display:none !important; } .trip-product-hero { min-height:auto; padding:32px 0; color:#111; background:none !important; } .trip-product-hero h1, .trip-product-hero p, .trip-hero-facts { color:#111 !important; } .trip-product-layout { display:block; } .trip-content-block { break-inside:avoid; } }