/* ===== Trip Trek Tours — Design Tokens ===== Fonts (Fraunces/Inter/Amiri/Cairo) are now loaded via parallel tags in each page's instead of @import — @import serializes the fetch behind this whole stylesheet and blocks first paint. */ /* Accessibility: visible focus ring for keyboard navigation across every interactive element — buttons, links, form fields, filter pills, cards. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; } :root{ --canvas:#FBF9F4; --canvas-alt:#F4F0E6; --surface:#FFFFFF; --ink:#1C1B17; --ink-secondary:#4A4740; --ink-muted:#8A8577; --gold:#B08D3F; --gold-hover:#8C6D2E; --emerald:#1F3A32; --emerald-tint:#26483e; --hairline:#E7E1D3; --hairline-soft:#F0ECE0; --error:#B3401F; --success:#2E5C3E; --font-display: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; --font-display-ar: 'Amiri', serif; --font-body-ar: 'Cairo', sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --shadow-float: 0 1px 2px rgba(28,27,23,0.04), 0 8px 24px rgba(28,27,23,0.06); --space: 8px; --container: 1180px; } *{ box-sizing:border-box; } img,video{ max-width:100%; display:block; } @media (min-width:1001px){ body{ zoom:0.85; } } html{ scroll-behavior:smooth; overflow-x:hidden; } body{ margin:0; overflow-x:hidden; background:var(--canvas); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } html[lang="ar"] body{ font-family:var(--font-body-ar); line-height:1.8; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ font-family:var(--font-display-ar); font-weight:700; letter-spacing:0; } p{ margin:0; color:var(--ink-secondary); } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } button{ font-family:inherit; cursor:pointer; border:none; background:none; } .container{ max-width:var(--container); margin:0 auto; padding:0 28px; } @media (max-width:768px){ .container{ padding:0 20px; } } section{ padding:80px 0; } section.canvas-alt{ background:var(--canvas-alt); } @media (max-width:768px){ section{ padding:56px 0; } } .eyebrow{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:16px; } html[lang="ar"] .eyebrow{ font-family:var(--font-body-ar); letter-spacing:0; text-transform:none; } .section-head{ max-width:640px; margin-bottom:56px; } .section-head.center{ margin-inline:auto; text-align:center; } .section-head h2{ font-size:37px; line-height:1.15; } .section-head p{ margin-top:16px; font-size:16px; } @media (max-width:768px){ .section-head h2{ font-size:28px; } } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 32px; border-radius:8px; font-size:15px; font-weight:600; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); white-space:nowrap; } .btn:hover{ transform:translateY(-3px); } .btn:active{ transform:translateY(-1px); transition-duration:.15s; } .btn-primary{ background:var(--gold); color:#fff; } .btn-primary:hover{ background:var(--gold-hover); box-shadow:0 8px 20px rgba(176,141,63,.28); } .btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); } .btn-outline:hover{ background:var(--ink); color:var(--canvas); } .btn-ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); } .btn-ghost-light:hover{ background:rgba(255,255,255,.15); border-color:#fff; } .btn-link{ font-weight:600; border-bottom:1.5px solid var(--gold); padding-bottom:2px; color:var(--ink); display:inline-block; transition:transform .25s var(--ease), border-color .25s var(--ease); } .btn-link:hover{ transform:translateX(3px); } [dir="rtl"] .btn-link:hover{ transform:translateX(-3px); } /* Cards */ .card{ background:var(--surface); border:1px solid var(--hairline); border-radius:12px; overflow:hidden; transition:transform .6s var(--ease), box-shadow .6s var(--ease); } .card:hover{ transform:translateY(-6px) scale(1.015); box-shadow:var(--shadow-float); } .card img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .glass{ background:rgba(255,255,255,0.62); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,0.5); } /* Page load reveal (opacity-only — a transform here would make body a containing block for position:fixed descendants like the header) */ @keyframes tt-page-in{ from{ opacity:0; } to{ opacity:1; } } body{ animation:tt-page-in .6s ease-out both; } /* Reveal on scroll */ [data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].in{ opacity:1; transform:none; } [data-reveal="left"]{ transform:translateX(-32px); } [data-reveal="left"].in{ transform:none; } [data-reveal="right"]{ transform:translateX(32px); } [data-reveal="right"].in{ transform:none; } [data-reveal="scale"]{ transform:scale(0.94); } [data-reveal="scale"].in{ transform:none; } [dir="rtl"] [data-reveal="left"]{ transform:translateX(32px); } [dir="rtl"] [data-reveal="right"]{ transform:translateX(-32px); } @media (prefers-reduced-motion:reduce){ body{ animation:none !important; } [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } html{ scroll-behavior:auto; } .cert-track{ animation:none !important; } } /* ===== Header ===== */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0; transition:background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; } .site-header.solid{ background:rgba(251,249,244,0.92); backdrop-filter:blur(10px); padding:14px 0; box-shadow:0 1px 0 var(--hairline); } .wordmark{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; white-space:nowrap; } .wordmark-group{ display:flex; align-items:center; gap:10px; flex:none; } .brand-mark{ width:36px; height:36px; border-radius:50%; background:#FBF6EE; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; box-shadow:0 1px 3px rgba(0,0,0,.12); } .brand-mark img{ width:130%; height:130%; object-fit:contain; } .footer-brand .brand-mark{ background:#FBF6EE; } .site-header.transparent-mode .wordmark, .site-header.transparent-mode .nav-link{ color:#fff; } .site-header.solid .wordmark, .site-header.solid .nav-link{ color:var(--ink); } /* Header controls (lang toggle, consultation button, search icon) must adapt to both header modes — transparent (over hero video/image) and solid (scrolled, cream background) — so they never render as dark-on-dark. */ .site-header.transparent-mode .header-actions{ color:#fff; } .site-header.solid .header-actions{ color:var(--ink); } .site-header.transparent-mode .header-actions .btn-outline{ color:#fff; border-color:rgba(255,255,255,.65); } .site-header.transparent-mode .header-actions .btn-outline:hover{ background:#fff; color:var(--ink); } .site-header.solid .header-actions .btn-outline{ color:var(--ink); border-color:var(--ink); } .site-header.solid .header-actions .btn-outline:hover{ background:var(--ink); color:var(--canvas); } .site-header.transparent-mode .header-actions .lang-toggle{ color:#fff; border-color:rgba(255,255,255,.65); } .site-header.transparent-mode .header-actions .lang-toggle:hover{ background:rgba(255,255,255,.15); } .site-header.solid .header-actions .lang-toggle{ color:var(--ink); border-color:var(--ink); } .site-header.solid .header-actions .lang-toggle:hover{ background:var(--canvas-alt); } .site-header.transparent-mode .search-icon-btn{ color:#fff; } .site-header.solid .search-icon-btn{ color:var(--ink); } .main-nav{ display:flex; align-items:center; gap:32px; } .nav-link{ font-size:14.5px; font-weight:500; position:relative; padding:6px 0; } .nav-link::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px; background:currentColor; transition:width .25s var(--ease); } .nav-link:hover::after{ width:100%; } .header-actions{ display:flex; align-items:center; gap:14px; } .lang-toggle{ font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; border:1.5px solid currentColor; } @media (max-width:1000px){ .main-nav{ display:none; } .hamburger{ display:flex !important; } .header-actions .btn-outline{ display:none; } .wordmark{ font-size:15px; white-space:normal; line-height:1.15; max-width:110px; } .header-actions{ gap:8px; } } @media (max-width:400px){ .search-icon-btn{ display:none; } } .mobile-nav-overlay{ display:flex; position:fixed; inset:0; background:var(--canvas); z-index:200; flex-direction:column; padding:100px 32px 40px; gap:4px; transform:translateX(100%); opacity:0; visibility:hidden; transition:transform .45s var(--ease), opacity .4s var(--ease), visibility 0s linear .45s; } [dir="rtl"] .mobile-nav-overlay{ transform:translateX(-100%); } .mobile-nav-overlay.open{ transform:translateX(0); opacity:1; visibility:visible; transition:transform .45s var(--ease), opacity .4s var(--ease); } .mobile-nav-overlay .mobile-nav-link{ opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .mobile-nav-overlay.open .mobile-nav-link{ opacity:1; transform:none; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(1){ transition-delay:.08s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(2){ transition-delay:.12s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(3){ transition-delay:.16s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(4){ transition-delay:.2s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(5){ transition-delay:.24s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(6){ transition-delay:.28s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(7){ transition-delay:.32s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(8){ transition-delay:.36s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(9){ transition-delay:.4s; } .mobile-nav-overlay.open .mobile-nav-link:nth-child(10){ transition-delay:.44s; } @media (prefers-reduced-motion:reduce){ .mobile-nav-overlay, .mobile-nav-overlay .mobile-nav-link{ transition:none !important; } } /* Mega menu — unified premium system (Services + Destinations share this) */ .mega-panel-v2{ position:absolute; top:100%; left:0; transform:translateY(-8px); margin-top:12px; width:900px; max-width:calc(100vw - 40px); opacity:0; visibility:hidden; transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; pointer-events:none; } .has-mega:hover .mega-panel-v2, .has-mega.open .mega-panel-v2, .has-mega:focus-within .mega-panel-v2{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .has-mega-services{ position:relative; } .has-mega-dest{ position:relative; } @media (min-width:1001px){ .has-mega-dest .mega-panel-v2{ left:auto; right:0; } } .simple-dropdown{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px); margin-top:8px; min-width:220px; background:var(--surface); border:1px solid var(--hairline); border-radius:12px; box-shadow:var(--shadow-float); padding:10px; z-index:60; opacity:0; visibility:hidden; transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s; pointer-events:none; } .has-mega:hover .simple-dropdown, .has-mega.open .simple-dropdown, .has-mega:focus-within .simple-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; } .main-nav{ align-items:stretch; } .has-mega{ display:flex; align-items:center; position:relative; } .simple-dropdown a{ display:block; padding:10px 14px; font-size:14px; color:var(--ink-secondary); border-radius:8px; white-space:nowrap; } .simple-dropdown a:hover{ background:var(--canvas-alt); color:var(--gold); } .mega-panel-v2 .mega-v2-split{ display:grid; grid-template-columns:45% 55%; gap:0; background:var(--surface); border-radius:18px; box-shadow:0 4px 8px rgba(28,27,23,.06), 0 20px 44px rgba(28,27,23,.16); overflow:hidden; height:380px; } .mega-v2-list-col{ padding:24px 26px; display:flex; flex-direction:column; height:100%; overflow:hidden; } .mega-v2-list-top{ flex:1; } .mega-v2-heading{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); font-family:var(--font-body); font-weight:600; margin-bottom:10px; } .mega-v2-item{ display:flex; align-items:flex-start; gap:12px; padding:8px 10px; margin:0 -10px; border-radius:11px; transition:background .22s var(--ease); } .mega-v2-item:hover{ background:var(--canvas-alt); } .mega-v2-item-icon{ flex:none; width:32px; height:32px; border-radius:9px; background:linear-gradient(160deg, rgba(176,141,63,.14), rgba(31,58,50,.08)); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s var(--ease); } .mega-v2-item:hover .mega-v2-item-icon{ transform:translateY(-1px) scale(1.05); background:linear-gradient(160deg, rgba(176,141,63,.24), rgba(31,58,50,.14)); } .mega-v2-item-icon svg{ width:15px; height:15px; color:var(--gold); } .mega-v2-item-text{ display:flex; flex-direction:column; padding-top:1px; } .mega-v2-item-title{ font-family:var(--font-display); font-size:14.5px; color:var(--ink); position:relative; width:fit-content; } .mega-v2-item-title::after{ content:''; position:absolute; left:0; right:100%; bottom:-1px; height:1px; background:var(--gold); transition:right .25s var(--ease); } .mega-v2-item:hover .mega-v2-item-title::after{ right:0; } .mega-v2-item-desc{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; } .mega-v2-small-link{ font-family:var(--font-display); font-size:12.5px; color:var(--emerald); display:inline-flex; align-items:center; gap:5px; padding-top:10px; margin-top:8px; border-top:1px solid var(--hairline-soft); transition:gap .2s var(--ease), color .2s var(--ease); width:fit-content; } .mega-v2-small-link:hover{ gap:9px; color:var(--gold); } .mega-v2-visual{ position:relative; display:block; overflow:hidden; height:100%; } .mega-v2-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .mega-v2-visual:hover img{ transform:scale(1.05); } .mega-v2-visual-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,19,16,.02) 0%, rgba(20,19,16,.08) 45%, rgba(20,19,16,.68) 100%); } .mega-v2-visual-cap{ position:absolute; left:24px; right:24px; bottom:22px; } .mega-v2-visual-cap h4{ font-size:19px; color:#fff; margin-bottom:6px; text-shadow:0 3px 16px rgba(0,0,0,.35); } .mega-v2-visual-cap p{ font-size:12.5px; color:rgba(255,255,255,.85); margin-bottom:12px; max-width:300px; line-height:1.5; } .mega-v2-visual-cta{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-size:13px; color:#E9D9AE; transition:gap .2s var(--ease); } .mega-v2-visual:hover .mega-v2-visual-cta{ gap:9px; } @media (max-width:1000px){ .mega-panel-v2{ display:none; } } /* Compact luxury dropdown (About) — same design language, smaller scale */ .compact-dropdown{ position:absolute; top:100%; left:50%; margin-top:10px; width:310px; transform:translateX(-50%) translateY(-8px); background:var(--surface); border-radius:18px; box-shadow:0 4px 8px rgba(28,27,23,.06), 0 20px 44px rgba(28,27,23,.16); padding:14px; z-index:60; opacity:0; visibility:hidden; transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; pointer-events:none; } .has-mega:hover .compact-dropdown, .has-mega.open .compact-dropdown, .has-mega:focus-within .compact-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; } .compact-dd-item{ position:relative; display:flex; align-items:flex-start; gap:13px; padding:10px 12px; margin-bottom:2px; border-radius:12px; transition:background .2s var(--ease); } .compact-dd-item:last-child{ margin-bottom:0; } .compact-dd-item::before{ content:''; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px; background:var(--emerald); opacity:0; transition:opacity .2s var(--ease); } .compact-dd-item:hover{ background:var(--canvas-alt); } .compact-dd-item:hover::before{ opacity:1; } .compact-dd-icon{ flex:none; width:34px; height:34px; border-radius:9px; background:linear-gradient(160deg, rgba(176,141,63,.14), rgba(31,58,50,.08)); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), background .3s var(--ease); } .compact-dd-item:hover .compact-dd-icon{ transform:translateY(-1px) scale(1.05); background:linear-gradient(160deg, rgba(176,141,63,.24), rgba(31,58,50,.14)); } .compact-dd-icon svg{ width:16px; height:16px; color:var(--gold); } .compact-dd-text{ display:flex; flex-direction:column; padding-top:2px; } .compact-dd-title{ font-family:var(--font-display); font-size:14.5px; color:var(--ink); } .compact-dd-desc{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; } /* Mobile nav accordion */ .mobile-accordion{ border-bottom:1px solid rgba(255,255,255,.08); } .mobile-accordion summary{ list-style:none; cursor:pointer; padding:16px 0; font-size:17px; color:inherit; display:flex; align-items:center; justify-content:space-between; } .mobile-accordion summary::-webkit-details-marker{ display:none; } .mobile-accordion summary::after{ content:'+'; font-size:20px; color:var(--gold); transition:transform .2s var(--ease); } .mobile-accordion[open] summary::after{ transform:rotate(45deg); } .mobile-accordion-body{ padding:0 0 12px 12px; display:flex; flex-direction:column; } .mobile-accordion-body a{ padding:9px 0; font-size:14.5px; opacity:.85; } /* ===== Hero ===== */ .hero{ position:relative; height:auto; min-height:min(88vh, 860px); display:flex; align-items:flex-end; overflow:hidden; color:#fff; padding-bottom:104px; contain:layout; } .hero-media{ position:absolute; inset:-4% -2%; z-index:0; background:var(--ink, #1C1B17); will-change:transform; } .hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; filter:brightness(0.85); } /* Layered scrim: strong dark-to-light swing, bottom (text zone + vignette) and text-side left far darker than the video's open right side, so contrast reads as deliberately cinematic rather than a flat uniform tint. */ .hero-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.8) 100%), linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.04) 100%); } [dir="rtl"] .hero-scrim{ background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.8) 100%), linear-gradient(270deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.04) 100%); } .hero-content{ position:relative; z-index:1; max-width:760px; transform-origin:left bottom; transition:transform .2s ease-out; will-change:transform; } [dir="rtl"] .hero-content{ transform-origin:right bottom; } .hero-content .eyebrow{ color:#E9D9AE; opacity:.9; text-shadow:0 3px 20px rgba(0,0,0,.45); } .hero-content h1{ font-size:72px; line-height:1.05; letter-spacing:-.015em; color:#fff; text-shadow:0 4px 26px rgba(0,0,0,.5); } .hero-content p.sub{ margin-top:24px; font-size:19px; line-height:1.6; color:#f3f3f3; max-width:520px; text-shadow:0 3px 20px rgba(0,0,0,.45); } .hero-cta-row{ display:flex; align-items:center; gap:24px; margin-top:38px; flex-wrap:wrap; } .hero-cta-row .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(176,141,63,.36); } .hero-cta-row .btn-link:hover{ opacity:.85; } .hero-trust{ display:flex; gap:32px; margin-top:44px; font-size:13px; color:rgba(255,255,255,.78); } .hero-trust span{ display:flex; align-items:baseline; gap:8px; } .hero-stat-num{ font-family:var(--font-display); font-weight:700; font-size:16px; color:#E9D9AE; } .scroll-cue{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:1; color:#fff; opacity:.6; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10px; letter-spacing:.15em; text-transform:uppercase; } .scroll-cue .dot{ width:1px; height:26px; background:rgba(255,255,255,.6); position:relative; overflow:hidden; } .scroll-cue .dot::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff; animation:scrollcue 2s infinite ease-in-out; } @keyframes scrollcue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} } @media (max-width:900px){ .hero-content h1{ font-size:48px; } } @media (max-width:768px){ .hero{ height:auto; min-height:min(78vh, 640px); padding-bottom:64px; } .hero-content h1{ font-size:34px; } .hero-trust{ flex-wrap:wrap; row-gap:10px; } .scroll-cue{ display:none; } } @media (hover:none){ .hero-content{ transform:none !important; } } /* Hero content entrance: label -> heading -> paragraph -> CTA -> trust, staggered */ @keyframes tt-hero-in{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } .hero-content .eyebrow{ animation:tt-hero-in .7s cubic-bezier(0.16,1,0.3,1) both; animation-delay:.1s; } .hero-content h1{ animation:tt-hero-in .8s cubic-bezier(0.16,1,0.3,1) both; animation-delay:.22s; } .hero-content p.sub{ animation:tt-hero-in .8s cubic-bezier(0.16,1,0.3,1) both; animation-delay:.38s; } .hero-cta-row{ animation:tt-hero-in .8s cubic-bezier(0.16,1,0.3,1) both; animation-delay:.52s; } .hero-trust{ animation:tt-hero-in .8s cubic-bezier(0.16,1,0.3,1) both; animation-delay:.64s; } @media (prefers-reduced-motion:reduce){ .hero-content .eyebrow, .hero-content h1, .hero-content p.sub, .hero-cta-row, .hero-trust{ animation:none !important; } } /* Trust bar */ .trust-bar{ padding:56px 0; background:var(--surface); border-bottom:1px solid var(--hairline-soft); } .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; } .stat-num{ font-family:var(--font-display); font-size:44px; color:var(--ink); } .stat-label{ margin-top:8px; font-size:13.5px; color:var(--ink-muted); } @media (max-width:768px){ .stat-row{ grid-template-columns:repeat(2,1fr) !important; row-gap:32px; } } @media (min-width:769px) and (max-width:1000px){ .stat-row{ grid-template-columns:repeat(3,1fr) !important; row-gap:32px; } } /* About split */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; } .split-media{ position:relative; } .split-media-frame{ position:relative; border-radius:14px; overflow:hidden; } .split-media-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(31,58,50,.08), rgba(176,141,63,.05)); mix-blend-mode:soft-light; pointer-events:none; } .split-media-frame img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:contrast(1.03); } .split-media-frame{ box-shadow:var(--shadow-float); } .split > img{ box-shadow:var(--shadow-float); } /* Premium floating overlay card system — used for every rating/stat/achievement card placed over imagery site-wide (About "Our Story", Hajj/Umrah process visuals, etc). One shared shell + content variants (stars or icon lead-in). */ .float-card{ padding:26px 28px; border-radius:20px; max-width:250px; background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(160%); border:1px solid rgba(255,255,255,.5); box-shadow:0 2px 6px rgba(28,27,23,.05), 0 18px 40px rgba(28,27,23,.14); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .float-card:hover{ transform:translateY(-4px); box-shadow:0 4px 10px rgba(28,27,23,.07), 0 26px 52px rgba(28,27,23,.18); } .float-card-stars{ color:var(--gold); font-size:13px; letter-spacing:2px; margin-bottom:10px; } .float-card-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); font-weight:600; margin-bottom:6px; } .float-card-icon{ width:22px; height:22px; color:var(--gold); margin-bottom:12px; } .float-card .stat-num{ font-family:var(--font-display); font-size:30px; color:var(--ink); line-height:1.1; } .float-card .stat-label{ font-size:13px; color:var(--ink-secondary); margin-top:4px; font-weight:600; } .float-card-sub{ font-size:12px; color:var(--ink-muted); margin-top:6px; line-height:1.4; } .split-media .float-card{ position:absolute; bottom:-28px; left:-28px; } [dir="rtl"] .split-media .float-card{ left:auto; right:-28px; } @media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } .split-media .float-card{ position:static; margin-top:16px; max-width:none; } } .about-mini-stats{ display:flex; gap:28px; padding:20px 0 28px; margin-bottom:4px; border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft); } .about-mini-stats > div{ padding-top:20px; } .about-mini-stats .num{ font-family:var(--font-display); font-size:26px; color:var(--gold); } .about-mini-stats .label{ font-size:12.5px; color:var(--ink-muted); margin-top:4px; } @media (max-width:560px){ .about-mini-stats{ gap:20px; flex-wrap:wrap; } } /* Why choose us — distinct: horizontal icon row */ .reasons{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:12px; overflow:hidden; } .reason{ position:relative; background:var(--surface); padding:40px 28px; transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .reason:hover{ background:var(--canvas-alt); transform:translateY(-4px); box-shadow:var(--shadow-float); z-index:1; } .reason .num{ position:absolute; top:24px; right:28px; font-family:var(--font-display); font-size:15px; color:var(--hairline); } [dir="rtl"] .reason .num{ right:auto; left:28px; } .reason .num-lead{ display:block; font-family:var(--font-display); font-size:34px; color:var(--gold); margin-bottom:18px; line-height:1; } .reason .icon{ width:40px; height:40px; color:var(--gold); margin-bottom:20px; transition:transform .35s var(--ease); } .reason:hover .icon{ transform:scale(1.12) translateY(-2px); } .reason h3{ font-family:var(--font-display); font-size:21px; margin-bottom:12px; } .reason p{ font-size:14px; color:var(--ink-muted); line-height:1.6; } @media (max-width:900px){ .reasons{ grid-template-columns:1fr 1fr !important; } } @media (max-width:560px){ .reasons{ grid-template-columns:1fr !important; } } /* Service grid (Hajj) */ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .hajj-bento{ display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-template-rows:repeat(2, 260px); gap:20px; } .hajj-bento .bento-lead{ grid-row:span 2; } .service-card{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:3/4; } .hajj-bento .service-card{ aspect-ratio:auto; height:100%; } .service-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .service-card:hover img{ transform:scale(1.06); } .service-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.68) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff; } .service-overlay .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#E9D9AE; margin-bottom:8px; } .service-overlay h3{ color:#fff; font-size:21px; } .service-overlay p{ color:rgba(255,255,255,.82); font-size:13.5px; margin-top:8px; max-width:260px; } @media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } .hajj-bento{ grid-template-columns:1fr 1fr; grid-template-rows:none; } .hajj-bento .bento-lead{ grid-column:span 2; grid-row:auto; height:320px; } .hajj-bento .service-card:not(.bento-lead){ height:240px; } } @media (max-width:560px){ .grid-3{ grid-template-columns:1fr; } .hajj-bento{ grid-template-columns:1fr; } .hajj-bento .bento-lead{ grid-column:auto; } } /* Umrah — flipped: list rows */ .service-rows{ display:flex; flex-direction:column; } .service-row{ display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:28px; padding:26px 0; border-bottom:1px solid var(--hairline-soft); } .service-row img{ border-radius:10px; aspect-ratio:1; object-fit:cover; } .service-row h3{ font-size:20px; margin-bottom:6px; } .service-row p{ font-size:14.5px; } .service-row .arrow{ width:20px; height:20px; color:var(--gold); } @media (max-width:700px){ .service-row{ grid-template-columns:70px 1fr; } .service-row .arrow{ display:none; } } .slider-arrow{ position:absolute; top:38%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-float); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background .2s, color .2s; z-index:2; } .slider-arrow:hover{ background:var(--gold); color:#fff; border-color:var(--gold); } .slider-arrow svg{ width:18px; height:18px; } .slider-arrow.prev{ left:-22px; } .slider-arrow.next{ right:-22px; } [dir="rtl"] .slider-arrow.prev{ left:auto; right:-22px; } [dir="rtl"] .slider-arrow.next{ right:auto; left:-22px; } @media (max-width:1000px){ .slider-arrow{ display:none; } } /* Hotels — premium editorial section (v2) */ .hotels-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:32px; } .hotels-head-row .section-head{ margin-bottom:0; text-align:left; } [dir="rtl"] .hotels-head-row .section-head{ text-align:right; } .hotels-viewall{ font-family:var(--font-display); font-size:14.5px; color:var(--emerald); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:gap .2s var(--ease), color .2s var(--ease); } .hotels-viewall:hover{ gap:10px; color:var(--gold); } .hfilter{ padding:9px 20px; border-radius:999px; border:1px solid var(--hairline); background:var(--surface); font-size:13.5px; color:var(--ink-secondary); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .hfilter:hover{ border-color:var(--gold); color:var(--ink); } .hfilter.active{ background:var(--emerald); border-color:var(--emerald); color:#fff; } .hotel-carousel-wrap{ position:relative; } .hotel-carousel-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; cursor:grab; } .hotel-carousel-track:active{ cursor:grabbing; } .hotel-carousel-track::-webkit-scrollbar{ display:none; } .hotel-carousel-track:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; } .hotel-carousel-track .lux-hotel-card{ flex:0 0 calc(33.333% - 16px); scroll-snap-align:start; } @media (max-width:1100px){ .hotel-carousel-track .lux-hotel-card{ flex-basis:calc(50% - 12px); } } @media (max-width:640px){ .hotel-carousel-track .lux-hotel-card{ flex-basis:90%; } } .hotel-carousel-track .lux-hotel-media{ aspect-ratio:5/4; } .hotel-carousel-track .lux-hotel-body{ padding:26px 24px 28px; } .hotel-carousel-track .lux-hotel-body h3{ font-size:20px; margin-bottom:8px; } .hotel-carousel-track .lux-hotel-desc{ font-size:14px; margin-bottom:16px; } .hotel-grid-static{ display:grid; grid-template-columns:repeat(2,1fr); gap:56px 40px; } @media (max-width:900px){ .hotel-grid-static{ grid-template-columns:1fr; gap:40px; } } .lux-hotel-card{ display:block; border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-float); transition:transform .45s var(--ease), box-shadow .45s var(--ease); } .lux-hotel-card:hover{ transform:translateY(-7px); box-shadow:0 4px 10px rgba(28,27,23,.07), 0 26px 52px rgba(28,27,23,.15); } .lux-hotel-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--canvas-alt); } .lux-hotel-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(155deg, rgba(31,58,50,.4), rgba(176,141,63,.28)); mix-blend-mode:multiply; pointer-events:none; } .lux-hotel-media::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,19,16,0) 60%, rgba(20,19,16,.5) 100%); pointer-events:none; } .lux-hotel-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.4) sepia(.16) saturate(1.2) contrast(1.05) brightness(.96); transition:transform .7s var(--ease); } .lux-hotel-card:hover .lux-hotel-media img{ transform:scale(1.05); } .lux-hotel-badge{ position:absolute; top:18px; left:18px; z-index:2; background:rgba(20,19,16,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); color:#E9D9AE; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; padding:7px 15px; border-radius:999px; } .lux-hotel-city-badge{ position:absolute; top:18px; right:18px; z-index:2; background:rgba(255,255,255,.94); color:var(--ink); font-size:11px; font-weight:600; padding:7px 15px; border-radius:999px; } [dir="rtl"] .lux-hotel-badge{ left:auto; right:18px; } [dir="rtl"] .lux-hotel-city-badge{ right:auto; left:18px; } .lux-hotel-body{ padding:32px 34px 34px; } .lux-hotel-body h3{ font-size:24px; margin-bottom:12px; line-height:1.22; } .lux-hotel-stars{ color:var(--gold); font-size:14px; letter-spacing:3px; margin-bottom:18px; } .lux-hotel-desc{ font-size:15px; color:var(--ink-muted); line-height:1.65; margin-bottom:22px; } .lux-hotel-distance{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-secondary); padding-top:20px; border-top:1px solid var(--hairline-soft); } .lux-hotel-distance svg{ width:17px; height:17px; color:var(--gold); flex:none; } /* Transportation */ .transport-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .transport-card{ border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-float); transition:transform .4s var(--ease); } .transport-card:hover{ transform:translateY(-4px); } .transport-media{ position:relative; aspect-ratio:4/3; } .transport-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .transport-card:hover .transport-media img{ transform:scale(1.06); } .transport-icon{ position:absolute; bottom:-22px; left:24px; width:52px; height:52px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-float); display:flex; align-items:center; justify-content:center; } [dir="rtl"] .transport-icon{ left:auto; right:24px; } .transport-icon svg{ width:24px; height:24px; color:var(--gold); } .transport-card h3{ font-size:19px; margin:38px 24px 8px; } .transport-card p{ font-size:14px; margin:0 24px 24px; color:var(--ink-muted); } @media (max-width:900px){ .transport-grid{ grid-template-columns:1fr; } } /* Fleet showcase — equal-height editorial cards with a dark scrim caption, distinct from the icon-badge treatment used just above it. */ .fleet-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .fleet-card{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-float); } .fleet-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .fleet-card:hover img{ transform:scale(1.06); } .fleet-card-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,19,16,.05) 0%, rgba(20,19,16,.15) 45%, rgba(20,19,16,.82) 100%); } .fleet-card-cap{ position:absolute; top:20px; left:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:rgba(20,19,16,.4); backdrop-filter:blur(6px); padding:6px 12px; border-radius:999px; } [dir="rtl"] .fleet-card-cap{ left:auto; right:20px; } .fleet-card-body{ position:absolute; left:22px; right:22px; bottom:20px; } .fleet-card-body h3{ font-size:20px; color:#fff; margin-bottom:6px; text-shadow:0 3px 16px rgba(0,0,0,.35); } .fleet-card-body p{ font-size:13px; color:rgba(255,255,255,.85); line-height:1.5; } @media (max-width:900px){ .fleet-grid{ grid-template-columns:1fr; } .fleet-card{ aspect-ratio:4/3; } } /* Visa process */ .process-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; counter-reset:step; } .process-step{ position:relative; padding-top:8px; } .process-step .num{ font-family:var(--font-display); font-size:56px; color:var(--hairline); line-height:1; margin-bottom:18px; } .process-step h3{ font-size:18px; margin-bottom:8px; } .process-step p{ font-size:14px; } @media (max-width:900px){ .process-steps{ grid-template-columns:1fr 1fr; row-gap:36px; } } @media (max-width:560px){ .process-steps{ grid-template-columns:1fr; } } /* Vertical timeline (Visa Assistance) */ .timeline{ position:relative; max-width:760px; margin:0 auto; } .timeline::before{ content:''; position:absolute; left:27px; top:8px; bottom:8px; width:1px; background:var(--hairline); } [dir="rtl"] .timeline::before{ left:auto; right:27px; } .timeline-item{ position:relative; display:flex; gap:28px; padding-bottom:48px; } .timeline-item:last-child{ padding-bottom:0; } .timeline-num{ flex:none; width:56px; height:56px; border-radius:50%; background:var(--surface); border:1.5px solid var(--gold); color:var(--gold); font-family:var(--font-display); font-size:20px; display:flex; align-items:center; justify-content:center; z-index:1; } .timeline-body h3{ font-size:19px; margin-bottom:8px; padding-top:12px; } .timeline-body p{ font-size:14.5px; max-width:560px; } /* Document checklist */ .checklist{ display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; } .checklist-item{ display:flex; align-items:flex-start; gap:14px; } .checklist-item .check{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--canvas-alt); display:flex; align-items:center; justify-content:center; color:var(--gold); margin-top:2px; } .checklist-item .check svg{ width:13px; height:13px; } .checklist-item p{ font-size:14.5px; color:var(--ink); } @media (max-width:700px){ .checklist{ grid-template-columns:1fr; } } /* Experiences */ .exp-scroll{ display:grid; grid-auto-flow:column; grid-auto-columns:280px; gap:20px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; scrollbar-width:none; } .exp-scroll::-webkit-scrollbar{ display:none; } .exp-card{ scroll-snap-align:start; } .exp-img-wrap{ position:relative; } .exp-img-wrap img{ width:100%; border-radius:12px; aspect-ratio:3/4; object-fit:cover; } .exp-duration{ position:absolute; bottom:12px; left:12px; background:rgba(28,27,23,.72); color:#fff; font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px; } [dir="rtl"] .exp-duration{ left:auto; right:12px; } .exp-card h3{ margin-top:14px; font-size:17px; } .exp-loc{ margin-top:6px; font-size:13px; color:var(--ink-muted); } /* Certificates */ .cert-marquee{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .cert-track{ display:flex; gap:20px; width:max-content; animation:cert-scroll 32s linear infinite; } .cert-marquee:hover .cert-track{ animation-play-state:paused; } @keyframes cert-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .cert-item{ flex:none; width:220px; text-align:center; padding:32px 20px; border:1px solid var(--hairline); border-radius:14px; background:var(--surface); transition:border-color .3s, box-shadow .3s, transform .3s; } .cert-item:hover{ border-color:var(--gold); box-shadow:var(--shadow-float); transform:translateY(-3px); } .cert-icon{ width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:linear-gradient(160deg, rgba(176,141,63,.14), rgba(31,58,50,.08)); border:1px solid rgba(176,141,63,.3); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s var(--ease); } .cert-item:hover .cert-icon{ background:linear-gradient(160deg, rgba(176,141,63,.24), rgba(31,58,50,.14)); transform:scale(1.06); } .cert-item .glyph{ width:28px; height:28px; color:var(--gold); transition:color .3s; } .cert-item:hover .glyph{ color:var(--gold); } .cert-item span{ font-size:13.5px; font-weight:600; color:var(--ink); display:block; } @media (max-width:900px){ .cert-item{ width:180px; padding:24px 16px; } } /* Company stats — distinct: dark-tinted band, light text, per section1 stays footer-emerald? no—must be light. Use gold-cream band */ .stats-band{ background:var(--canvas-alt); border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft); } .stats-band .stat-row{ grid-template-columns:repeat(4,1fr); } .stats-band .stat-num{ font-size:56px; color:var(--gold); } /* Testimonials — editorial redesign: no card box, large quotation mark, thin rule */ .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .testi-track{ display:grid; grid-auto-flow:column; grid-auto-columns:min(380px, 84vw); gap:40px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; scrollbar-width:none; } .testi-track::-webkit-scrollbar{ display:none; } .testi-track .testi-card{ scroll-snap-align:start; height:100%; } .testi-card{ background:none; border:none; border-radius:0; padding:0; transition:transform .5s var(--ease); display:flex; flex-direction:column; } .testi-card:hover{ transform:translateY(-3px); } .testi-card::before{ content:'\201C'; display:block; font-family:var(--font-display); font-size:56px; line-height:1; color:var(--gold); margin-bottom:4px; } .testi-stars{ color:var(--gold); font-size:13px; margin-bottom:14px; letter-spacing:2px; order:-1; } .testi-card p.quote{ font-family:var(--font-display); font-size:19px; line-height:1.45; color:var(--ink); margin-bottom:26px; } .testi-author{ display:flex; align-items:center; gap:0; padding-top:18px; border-top:1px solid var(--hairline-soft); } .testi-author img{ display:none; } .testi-author .name{ font-size:14px; font-weight:600; color:var(--ink); } .testi-author .loc{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; } @media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } } /* Gallery */ .gallery-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; } .gfilter{ padding:9px 20px; border-radius:999px; border:1px solid var(--hairline); font-size:13.5px; font-weight:500; color:var(--ink-secondary); background:var(--surface); transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .gfilter:hover{ border-color:var(--gold); color:var(--ink); } .gfilter.active{ background:var(--emerald); color:#fff; border-color:var(--emerald); } /* Column-based masonry: each photo keeps its own natural (judgment-cropped) aspect ratio rather than being forced into a uniform grid cell — mixed portrait/square ratios sit together gracefully, like an editorial photo wall. */ .masonry{ columns:4 260px; column-gap:18px; } .gallery-tile{ position:relative; display:block; break-inside:avoid; margin-bottom:18px; border-radius:10px; overflow:hidden; box-shadow:var(--shadow-float); background:var(--surface); } .gallery-tile img{ display:block; width:100%; height:auto; opacity:0; transition:transform .6s var(--ease), opacity .5s var(--ease); cursor:zoom-in; } .gallery-tile img.gallery-loaded{ opacity:1; } .gallery-tile:hover img{ transform:scale(1.045); } .gallery-caption{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:16px; background:linear-gradient(180deg, rgba(28,27,23,0) 45%, rgba(28,27,23,.72) 100%); opacity:0; transition:opacity .35s var(--ease); pointer-events:none; } .gallery-tile:hover .gallery-caption{ opacity:1; } .gallery-caption-cat{ font-family:var(--font-display); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold); } .gallery-caption-desc{ font-size:13px; line-height:1.35; color:#fff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } @media (max-width:900px){ .masonry{ columns:2 200px; column-gap:12px; } .gallery-tile{ margin-bottom:12px; } } /* Destinations grid (20 tiles) */ .dest-grid-20{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .dest-tile{ position:relative; display:block; border-radius:12px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-float); } .dest-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .dest-tile:hover img{ transform:scale(1.05); } .dest-tile-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.68) 100%); } .dest-tile-caption{ position:absolute; left:0; right:0; bottom:0; padding:16px 18px; color:#fff; } [dir="rtl"] .dest-tile-caption{ text-align:right; } .dest-tile-caption h3{ color:#fff; font-size:17px; line-height:1.25; } .dest-tile-caption p{ color:#E9D9AE; font-size:12.5px; margin-top:3px; } @media (max-width:1100px){ .dest-grid-20{ grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ .hero-trust{ gap:20px; } .hero-cta-row{ gap:14px 20px; } } @media (max-width:700px){ .dest-grid-20{ grid-template-columns:repeat(2,1fr); gap:14px; } } /* Destinations — featured hero */ .dest-featured{ position:relative; height:64vh; min-height:440px; max-height:640px; display:flex; align-items:flex-end; overflow:hidden; } .dest-featured-media{ position:absolute; inset:0; } .dest-featured-media img{ width:100%; height:100%; object-fit:cover; } .dest-featured-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,19,16,.78) 0%, rgba(20,19,16,.42) 55%, rgba(20,19,16,.12) 100%); } .dest-featured-content{ position:relative; padding-bottom:64px; color:#fff; max-width:560px; } .dest-featured-content h2{ font-size:44px; color:#fff; margin:10px 0 6px; text-shadow:0 3px 20px rgba(0,0,0,.45); } .dest-featured-content p{ font-size:18px; color:#f3f3f3; margin-bottom:26px; text-shadow:0 2px 14px rgba(0,0,0,.4); } @media (max-width:768px){ .dest-featured{ height:56vh; } .dest-featured-content h2{ font-size:36px; } } /* Destinations — toolbar (filters + search) */ .dest-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:44px; } .dest-filters{ display:flex; gap:10px; flex-wrap:wrap; } .dfilter{ padding:9px 18px; border-radius:999px; border:1px solid var(--hairline); background:var(--surface); font-size:13.5px; color:var(--ink-secondary); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .dfilter:hover{ border-color:var(--gold); color:var(--ink); } .dfilter.active{ background:var(--emerald); border-color:var(--emerald); color:#fff; } .dest-search{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--hairline); border-radius:999px; padding:9px 18px; min-width:240px; } .dest-search svg{ width:16px; height:16px; color:var(--ink-muted); flex:none; } .dest-search input{ border:none; background:none; font-size:14px; color:var(--ink); width:100%; } .dest-search input:focus{ outline:none; } /* Destinations — editorial bento groups */ .dest-group{ margin-bottom:56px; } .dest-group:last-of-type{ margin-bottom:0; } .dest-group-title{ font-family:var(--font-display); font-size:24px; color:var(--ink); margin-bottom:20px; } .dest-editorial-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; grid-auto-flow:dense; gap:18px; } .dest-card{ position:relative; display:block; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-float); cursor:pointer; } .dest-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .dest-card:hover img{ transform:scale(1.06); } .dest-card-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%); } .dest-card-cap{ position:absolute; left:0; right:0; bottom:0; padding:20px; color:#fff; } [dir="rtl"] .dest-card-cap{ text-align:right; } .dest-card-cap h4{ color:#fff; font-size:19px; } .dest-card-cap p{ color:#E9D9AE; font-size:12.5px; margin-top:4px; } .dest-card.size-xl{ grid-column:span 2; grid-row:span 2; } .dest-card.size-md{ grid-column:span 2; grid-row:span 1; } .dest-card.size-sm{ grid-column:span 1; grid-row:span 1; } .dest-card.size-xl .dest-card-cap h4{ font-size:24px; } .dest-group.filtered-out, .dest-card.filtered-out{ display:none; } .dest-noresults{ text-align:center; color:var(--ink-muted); padding:40px 0; font-size:15px; } @media (max-width:900px){ .dest-editorial-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; } .dest-card.size-xl{ grid-column:span 2; grid-row:span 2; } .dest-card.size-md{ grid-column:span 2; grid-row:span 1; } .dest-card.size-sm{ grid-column:span 1; grid-row:span 1; } } @media (max-width:560px){ .dest-editorial-grid{ grid-template-columns:1fr; grid-auto-rows:220px; } .dest-card.size-xl, .dest-card.size-md, .dest-card.size-sm{ grid-column:span 1; grid-row:span 1; } .dest-toolbar{ flex-direction:column; align-items:stretch; } } /* Journal — featured article + editorial grid (reuses .dest-editorial-grid) */ .journal-feature{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; } .journal-feature img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:var(--shadow-float); transition:transform .6s var(--ease); } .journal-feature:hover img{ transform:scale(1.02); } .journal-feature-text .tag{ display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-weight:600; margin-bottom:14px; } .journal-feature-text h2{ font-size:34px; line-height:1.2; margin-bottom:16px; } .journal-feature-text p{ font-size:15.5px; color:var(--ink-muted); margin-bottom:22px; line-height:1.6; } .journal-feature-read{ font-family:var(--font-display); font-size:14.5px; color:var(--emerald); display:inline-flex; align-items:center; gap:6px; transition:gap .2s var(--ease), color .2s var(--ease); } .journal-feature:hover .journal-feature-read{ gap:10px; color:var(--gold); } @media (max-width:900px){ .journal-feature{ grid-template-columns:1fr; gap:28px; } } /* Blog */ .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .blog-card-overlay{ position:relative; display:block; border-radius:12px; overflow:hidden; aspect-ratio:4/5; } .blog-card-overlay img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .blog-card-overlay:hover img{ transform:scale(1.05); } .blog-overlay-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); } .blog-overlay-caption{ position:absolute; left:0; right:0; bottom:0; padding:24px; color:#fff; } [dir="rtl"] .blog-overlay-caption{ text-align:right; } .blog-overlay-caption .tag{ display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#E9D9AE; margin-bottom:8px; } .blog-overlay-caption h3{ color:#fff; font-size:19px; line-height:1.3; } @media (max-width:900px){ .blog-grid{ grid-template-columns:1fr; } } /* FAQ */ .faq-list{ max-width:760px; margin:0 auto; } .faq-item{ border-bottom:1px solid var(--hairline-soft); } .faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:24px 0; text-align:start; font-size:17px; font-weight:500; font-family:var(--font-display); } .faq-q .plus{ width:20px; height:20px; flex:none; transition:transform .3s var(--ease); color:var(--gold); } .faq-item.open .plus{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .faq-a p{ padding-bottom:24px; font-size:15px; max-width:640px; } /* CTA band */ .cta-band{ background:var(--canvas-alt); text-align:center; border-radius:20px; padding:80px 40px; } .cta-band h2{ font-size:40px; max-width:620px; margin:0 auto; } .cta-band p{ margin-top:16px; font-size:16px; } .cta-band .btn{ margin-top:32px; } /* Contact preview (homepage) */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .contact-card{ padding:28px; border:1px solid var(--hairline); border-radius:12px; background:var(--surface); } .contact-card .icon{ width:28px; height:28px; color:var(--gold); margin-bottom:16px; } .contact-card h3{ font-size:16px; margin-bottom:8px; } /* Contact page — editorial list instead of a card wall */ .contact-panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:48px; box-shadow:var(--shadow-float); } .contact-split{ grid-template-columns:1fr 1fr; } @media (max-width:700px){ .contact-panel{ padding:32px 24px; } } .contact-list{ margin-top:24px; } .contact-list-item{ display:flex; align-items:flex-start; gap:18px; padding:20px 16px; margin:0 -16px; border-radius:12px; transition:background .25s var(--ease); } .contact-list-item:not(:last-child){ border-bottom:1px solid var(--hairline-soft); } .contact-list-item:hover{ background:var(--canvas-alt); } .contact-list-item:hover:not(:last-child){ border-bottom-color:transparent; } .contact-reassure{ display:flex; flex-direction:column; gap:16px; margin-top:36px; padding-top:32px; border-top:1px solid var(--hairline-soft); } .contact-reassure-item{ display:flex; align-items:center; gap:14px; } .contact-reassure-icon{ flex:none; width:34px; height:34px; border-radius:10px; background:linear-gradient(160deg, rgba(176,141,63,.14), rgba(31,58,50,.08)); display:flex; align-items:center; justify-content:center; } .contact-reassure-icon svg{ width:16px; height:16px; color:var(--gold); } .contact-reassure-item p{ font-size:14px; color:var(--ink-secondary); } .contact-list-icon{ flex:none; width:40px; height:40px; border-radius:11px; background:linear-gradient(160deg, rgba(176,141,63,.14), rgba(31,58,50,.08)); display:flex; align-items:center; justify-content:center; margin-top:1px; } .contact-list-icon svg{ width:18px; height:18px; color:var(--gold); } .contact-list-item h3{ font-size:15.5px; margin-bottom:4px; } .contact-list-item p{ font-size:14.5px; color:var(--ink-muted); } .contact-visual{ border-radius:14px; overflow:hidden; box-shadow:var(--shadow-float); margin:20px 0 28px; } .contact-visual img{ width:100%; aspect-ratio:16/9; object-fit:cover; } .contact-card p{ font-size:14px; } .map-preview{ border-radius:12px; overflow:hidden; aspect-ratio:16/7; background:var(--canvas-alt); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ink-muted); font-size:14px; border:1px solid var(--hairline); } /* Full-bleed editorial quote — a quiet "breather" between dense grid sections */ .editorial-quote{ position:relative; min-height:70vh; display:flex; align-items:center; overflow:hidden; color:#fff; } .editorial-quote-media{ position:absolute; inset:0; } .editorial-quote-media img{ width:100%; height:100%; object-fit:cover; } .editorial-quote-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,19,16,.5) 0%, rgba(20,19,16,.62) 100%); } .editorial-quote-content{ position:relative; max-width:760px; margin:0 auto; text-align:center; padding:80px 24px; } .editorial-quote-content .mark{ font-family:var(--font-display); font-size:64px; line-height:1; color:var(--gold); margin-bottom:8px; } .editorial-quote-content p{ font-family:var(--font-display); font-size:27px; line-height:1.4; color:#fff; text-shadow:0 3px 20px rgba(0,0,0,.35); } .editorial-quote-content .attr{ margin-top:28px; font-size:13.5px; color:rgba(255,255,255,.75); letter-spacing:.03em; } @media (max-width:768px){ .editorial-quote{ min-height:56vh; } .editorial-quote-content p{ font-size:23px; } } /* Footer — only dark surface. Premium, editorial rhythm: generous top padding, a subtle top hairline (visual separation from content above), refined column typography, and considered hover states rather than a flat template grid. */ .site-footer{ position:relative; background:linear-gradient(160deg, #24221C 0%, var(--ink) 55%, #221F19 100%); color:rgba(255,255,255,.82); padding:120px 0 40px; } .site-footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(233,217,174,0) 0%, rgba(233,217,174,.35) 50%, rgba(233,217,174,0) 100%); } .footer-top{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:48px; padding-bottom:80px; border-bottom:1px solid rgba(255,255,255,.1); } .footer-brand .wordmark{ color:#fff; letter-spacing:.01em; } .footer-brand p{ color:rgba(255,255,255,.58); font-size:14.5px; margin-top:18px; max-width:270px; line-height:1.75; } .footer-col h4{ font-family:var(--font-body); font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:#E9D9AE; opacity:.85; margin-bottom:24px; } .footer-col a{ display:block; width:fit-content; font-size:14.5px; color:rgba(255,255,255,.72); padding:8px 0; position:relative; transition:color .3s var(--ease), transform .3s var(--ease); } .footer-col a::after{ content:''; position:absolute; left:0; bottom:5px; width:0; height:1px; background:#E9D9AE; transition:width .35s var(--ease); } .footer-col a:hover{ color:#F3E6C4; transform:translateX(4px); } [dir="rtl"] .footer-col a:hover{ transform:translateX(-4px); } .footer-col a:hover::after{ width:100%; } .footer-social{ display:flex; gap:12px; margin-top:28px; } .footer-social .icon{ width:17px; height:17px; padding:11px; box-sizing:content-box; border-radius:50%; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.75); transition:transform .35s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .footer-social a:hover .icon, .footer-social .icon:hover{ transform:translateY(-3px); color:var(--ink); background:#E9D9AE; border-color:#E9D9AE; } .newsletter{ display:flex; margin-top:18px; border:1px solid rgba(255,255,255,.22); border-radius:999px; overflow:hidden; transition:border-color .3s var(--ease); } .newsletter:focus-within{ border-color:#E9D9AE; } .newsletter input{ flex:1; min-width:0; background:transparent; border:none; padding:14px 20px; color:#fff; font-size:13.5px; } .newsletter input::placeholder{ color:rgba(255,255,255,.45); } .newsletter button{ padding:14px 22px; background:var(--gold); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.03em; white-space:nowrap; transition:background .3s var(--ease); } .newsletter button:hover{ background:var(--gold-hover); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:32px; font-size:13px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:14px; } .footer-bottom .legal-links{ display:flex; align-items:center; gap:0; flex-wrap:wrap; } .footer-bottom .legal-links a{ color:rgba(255,255,255,.5); transition:color .25s var(--ease); padding:0 14px; border-right:1px solid rgba(255,255,255,.16); } [dir="rtl"] .footer-bottom .legal-links a{ border-right:none; border-left:1px solid rgba(255,255,255,.16); } .footer-bottom .legal-links a:first-child{ padding-left:0; } [dir="rtl"] .footer-bottom .legal-links a:first-child{ padding-right:0; } .footer-bottom .legal-links a:last-child{ border-right:none; padding-right:0; } [dir="rtl"] .footer-bottom .legal-links a:last-child{ border-left:none; padding-left:0; } .footer-bottom .legal-links a:hover{ color:#E9D9AE; } .back-to-top{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); transition:transform .35s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .back-to-top:hover{ transform:translateY(-4px); background:#E9D9AE; border-color:#E9D9AE; color:var(--ink); } @media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; gap:36px 28px; } } @media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } .site-footer{ padding:88px 0 32px; } } /* Page hero (internal pages) */ .page-hero{ position:relative; padding:220px 0 80px; color:#fff; overflow:hidden; } .page-hero-media{ position:absolute; inset:0; z-index:0; } .page-hero-media img{ width:100%; height:100%; object-fit:cover; } .page-hero-media::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.42); } .breadcrumb{ position:relative; z-index:1; display:flex; gap:8px; font-size:13px; color:rgba(255,255,255,.75); margin-bottom:18px; } .page-hero h1{ position:relative; z-index:1; font-size:46px; color:#fff; max-width:700px; } @media (max-width:768px){ .page-hero h1{ font-size:30px; } .page-hero{ padding:160px 0 60px; } } /* Plain variant: no photo, sits on the canvas — used for utility/form pages where a photo backdrop isn't essential (Cookie Policy, Request a Consultation). */ .page-hero-plain{ background:var(--canvas); color:var(--ink); } .page-hero-plain .breadcrumb{ color:var(--ink-muted); } .page-hero-plain .breadcrumb a{ color:var(--ink-muted); } .page-hero-plain h1{ color:var(--ink); } /* Form */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .form-field{ display:flex; flex-direction:column; gap:8px; } .form-field.full{ grid-column:1/-1; } .form-field label{ font-size:13.5px; font-weight:600; color:var(--ink); } .form-field input, .form-field select, .form-field textarea{ padding:14px 16px; border:1.5px solid var(--hairline); border-radius:10px; font-size:14.5px; font-family:inherit; background:var(--canvas-alt); transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--gold); background:var(--surface); box-shadow:0 0 0 3px rgba(176,141,63,.14); } .form-field textarea{ resize:vertical; min-height:110px; } /* Form submit success state */ .form-success{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:56px 24px; border:1px solid var(--hairline-soft); border-radius:14px; background:var(--surface); } .form-success svg{ width:44px; height:44px; color:#fff; background:var(--emerald); border-radius:50%; padding:10px; box-sizing:border-box; } .form-success p{ font-size:16px; color:var(--ink); max-width:380px; line-height:1.6; } @media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } .split{ gap:32px; } .contact-split{ grid-template-columns:1fr; } .transport-grid, .cert-row, .testi-grid, .blog-grid{ grid-template-columns:1fr; } .dest-grid{ grid-template-columns:1fr 1fr; } } /* Gallery video tile — plays inline in the grid on click, no lightbox. */ .gallery-video-tile{ position:relative; border-radius:14px; overflow:hidden; cursor:pointer; background:var(--canvas-alt); aspect-ratio:4/5; margin-bottom:16px; break-inside:avoid; } .gallery-video-tile video{ width:100%; height:100%; object-fit:cover; display:block; } .gallery-video-play{ position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease), opacity .3s var(--ease); } .gallery-video-play svg{ width:24px; height:24px; margin-left:3px; } .gallery-video-tile:hover .gallery-video-play{ transform:scale(1.08); } .gallery-video-tile.playing .gallery-video-play{ opacity:0; pointer-events:none; } .gallery-video-cap{ position:absolute; left:16px; bottom:14px; color:#fff; font-size:13.5px; font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.5); } .gallery-video-tile.playing{ position:fixed !important; inset:0; margin:auto; width:auto; height:min(85vh,700px); max-width:92vw; z-index:400; aspect-ratio:auto; box-shadow:0 30px 80px rgba(0,0,0,.5); transition:all .35s var(--ease); display:flex !important; align-items:center; justify-content:center; background:transparent !important; } .gallery-video-tile.playing video{ width:auto; height:100%; max-width:92vw; object-fit:contain; margin:0 auto; } .gallery-video-tile{ transition:all .35s var(--ease); } .video-scrim{ position:fixed; inset:0; background:rgba(0,0,0,0); pointer-events:none; z-index:399; transition:background .35s var(--ease); } .video-scrim.active{ background:rgba(0,0,0,.7); pointer-events:auto; } .lightbox{ position:fixed; inset:0; background:rgba(28,27,23,.92); z-index:300; display:none; align-items:center; justify-content:center; } .lightbox.open{ display:flex; } .lightbox-frame{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:82vw; } .lightbox-img{ max-width:82vw; max-height:74vh; border-radius:8px; object-fit:contain; opacity:0; transform:scale(.98); transition:opacity .35s var(--ease), transform .35s var(--ease); } .lightbox-img.fade-in{ opacity:1; transform:scale(1); } .lightbox-cap{ text-align:center; color:#fff; } .lightbox-cap-cat{ display:block; font-family:var(--font-display); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; } .lightbox-cap-desc{ display:block; font-size:14.5px; color:rgba(255,255,255,.85); max-width:560px; } .lightbox-close{ position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; } .lightbox-close svg{ width:20px; height:20px; } .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; } .lightbox-nav svg{ width:22px; height:22px; } .lightbox-nav.prev{ left:24px; } .lightbox-nav.next{ right:24px; } /* Search icon button (header) */ .search-icon-btn{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; } .search-icon-btn svg{ width:18px; height:18px; } .search-icon-btn:hover{ background:rgba(0,0,0,.06); } .site-header.transparent-mode .search-icon-btn:hover{ background:rgba(255,255,255,.15); } /* Legal / long-form layout with sticky TOC */ .legal-layout{ display:grid; grid-template-columns:250px 1fr; gap:64px; align-items:start; } .legal-toc{ position:sticky; top:120px; } .legal-toc .toc-label{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); margin-bottom:14px; display:block; } .legal-toc a{ display:block; padding:8px 0 8px 14px; font-size:13.5px; color:var(--ink-muted); border-left:2px solid var(--hairline); transition:color .2s, border-color .2s; } .legal-toc a:hover, .legal-toc a.active{ color:var(--gold); border-left-color:var(--gold); } .legal-updated{ font-size:13px; color:var(--ink-muted); margin-bottom:32px; } .prose h2{ font-family:var(--font-display); font-size:24px; margin-top:44px; margin-bottom:14px; scroll-margin-top:120px; } .prose h2:first-child{ margin-top:0; } .prose p{ font-size:15.5px; line-height:1.75; color:var(--ink-secondary); margin-bottom:16px; } .prose ul{ margin:0 0 16px; padding-left:20px; } [dir="rtl"] .prose ul{ padding-left:0; padding-right:20px; } .prose li{ font-size:15.5px; line-height:1.75; color:var(--ink-secondary); margin-bottom:8px; } @media (max-width:900px){ .legal-layout{ grid-template-columns:1fr; } .legal-toc{ position:static; display:flex; flex-wrap:wrap; gap:4px 18px; } } /* Article template */ .article-hero{ position:relative; padding:220px 0 60px; color:#fff; overflow:hidden; } .article-hero-media{ position:absolute; inset:0; z-index:0; } .article-hero-media img{ width:100%; height:100%; object-fit:cover; } .article-hero-media::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.46); } .article-meta-row{ position:relative; z-index:1; display:flex; gap:14px; align-items:center; font-size:13px; color:rgba(255,255,255,.8); margin-bottom:16px; } .article-meta-row .tag{ background:rgba(255,255,255,.16); padding:5px 12px; border-radius:999px; font-weight:600; } .article-hero h1{ position:relative; z-index:1; font-size:44px; color:#fff; max-width:820px; } .article-sidebar{ position:sticky; top:120px; display:flex; flex-direction:column; gap:20px; } .article-share{ display:flex; gap:10px; } .article-share a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--ink-secondary); } .article-share a:hover{ border-color:var(--gold); color:var(--gold); } .article-share svg{ width:16px; height:16px; } .article-author-card{ padding:20px; border:1px solid var(--hairline); border-radius:12px; } .article-author-card img{ width:44px; height:44px; border-radius:50%; object-fit:cover; margin-bottom:10px; } .article-author-card .name{ font-size:14px; font-weight:600; } .article-author-card .role{ font-size:12.5px; color:var(--ink-muted); } @media (max-width:900px){ .article-hero h1{ font-size:30px; } } /* Pagination */ .pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:48px; } .page-btn{ min-width:40px; height:40px; padding:0 10px; border-radius:8px; border:1px solid var(--hairline); font-size:14px; color:var(--ink-secondary); display:flex; align-items:center; justify-content:center; } .page-btn.active{ background:var(--ink); color:var(--canvas); border-color:var(--ink); } .page-btn:hover:not(.active){ border-color:var(--gold); color:var(--gold); } /* Search results */ .search-hero{ padding:200px 0 40px; } .search-bar-lg{ display:flex; gap:12px; max-width:640px; } .search-bar-lg input{ flex:1; padding:16px 20px; border:1.5px solid var(--hairline); border-radius:8px; font-size:15px; } .search-bar-lg input:focus{ outline:none; border-color:var(--ink); } .search-empty{ text-align:center; padding:80px 20px; } .search-empty svg{ width:56px; height:56px; color:var(--hairline); margin:0 auto 20px; } .search-empty h3{ font-size:20px; margin-bottom:8px; } .search-empty p{ color:var(--ink-muted); } .result-card{ display:grid; grid-template-columns:140px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--hairline-soft); } .result-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; } .result-card .cat{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:6px; } .result-card h3{ font-size:18px; margin-bottom:6px; } .result-card p{ font-size:14px; color:var(--ink-secondary); } @media (max-width:600px){ .result-card{ grid-template-columns:1fr; } } /* 404 */ .error-page{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:220px 20px 100px; } .error-code{ font-family:var(--font-display); font-size:120px; color:var(--gold); line-height:1; } .error-page h1{ font-size:30px; margin:20px 0 12px; } .error-page p{ max-width:480px; margin:0 auto 32px; } .error-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } @media (max-width:600px){ .error-code{ font-size:80px; } }