/* ============================================================================ X3WEB — DESIGN TOKENS The single source of truth for colour, type, space, radius, shadow and glass. Nothing else in this project may hard-code a colour value. Visual language: a pale frame, deep navy brand, orange accent, and frosted glass surfaces that read correctly on pale, white and navy alike. ========================================================================== */ :root{ /* ── Brand ─────────────────────────────────────────────────────────────── */ --brand:#041D36; /* X3WEB navy — dark sections, CTA fill */ --brand-deep:#03142A; /* deeper navy for gradient floors */ --brand-hover:#0A2C4E; --brand-ink:#0F1B31; /* solid CTA body */ --brand-knob:#384B64; /* knob disc on a navy CTA */ --brand-soft:rgba(4,29,54,0.08); --brand-soft-hov:rgba(4,29,54,0.14); /* ── Accent — orange ───────────────────────────────────────────────────── */ --accent:#FF6B00; --accent-strong:#E85D00; --accent-deep:#B84A00; --accent-soft:rgba(255,107,0,0.12); --accent-softer:rgba(255,107,0,0.07); --accent-line:rgba(255,107,0,0.38); --accent-knob:#FF6B00; /* ── Ink and text ──────────────────────────────────────────────────────── */ --ink:#020C21; --ink-soft:#0F182F; --text:#0A1426; /* body copy on light */ --muted:#59627E; --muted-2:#4D5B77; --muted-3:#6C7794; --on-dark:#FFFFFF; --on-dark-soft:rgba(255,255,255,0.80); --on-dark-mute:rgba(255,255,255,0.60); --on-dark-faint:rgba(255,255,255,0.40); /* ── Status ────────────────────────────────────────────────────────────── */ --danger:#D64541; --danger-soft:rgba(214,69,65,0.09); --danger-line:rgba(214,69,65,0.30); --success:#2E9E68; --success-soft:rgba(46,158,104,0.10); --success-line:rgba(46,158,104,0.30); --info:#2F6FB0; --info-soft:rgba(47,111,176,0.10); --info-line:rgba(47,111,176,0.30); --notice:#C77A1A; --notice-soft:rgba(199,122,26,0.10); --notice-line:rgba(199,122,26,0.30); /* "warning" reads as the notice amber; aliased so either name resolves. */ --warning:var(--notice); --warning-soft:var(--notice-soft); --warning-line:var(--notice-line); /* ── Surfaces ──────────────────────────────────────────────────────────── */ --frame:#E6EDF6; /* the pale plate the design sits on */ --frame-deep:#DCE5F1; --white:#FFFFFF; --off-white:#F2F6FB; --hairline:rgba(11,18,32,0.09); --hairline-strong:rgba(11,18,32,0.16); --hairline-on-dark:rgba(255,255,255,0.16); /* ── Glass ─────────────────────────────────────────────────────────────── * Every frosted surface reads these six properties rather than declaring its own colours. Sections re-declare them for their own background, which is why one card component works on pale, white and navy with no overrides. Defaults below are tuned for the pale frame. */ --glass-a:rgba(255,255,255,0.74); --glass-b:rgba(255,255,255,0.44); --glass-border:rgba(255,255,255,0.86); --glass-hi:rgba(255,255,255,0.60); --glass-lo:rgba(255,255,255,0.20); --glass-ring:0 0 0 1px rgba(120,145,180,0.20); --glass-drop:0 18px 40px rgba(28,52,92,0.09); --glass-drop-sm:0 8px 22px rgba(28,52,92,0.06); --glass-drop-lg:0 28px 64px rgba(28,52,92,0.13); --glass-blur:40px; --glass-sat:112%; /* ── Elevation (opaque shadows, for non-glass elements) ────────────────── */ --shadow-xs:0 2px 6px rgba(11,18,32,0.05); --shadow-sm:0 6px 18px rgba(11,18,32,0.07); --shadow-md:0 14px 38px rgba(11,18,32,0.10); --shadow-lg:0 28px 70px rgba(11,18,32,0.16); --shadow-cta:0 10px 24px rgba(11,26,50,0.22); /* Deliberately NOT an orange shadow. A tinted blur behind an orange button reads as a glow bleeding off the element, which is not the look here. Orange stays in the fill and the type; depth is neutral. */ --shadow-accent:0 10px 24px rgba(11,26,50,0.26); /* ── Radius ────────────────────────────────────────────────────────────── */ --radius-xs:8px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px; /* ── Type ──────────────────────────────────────────────────────────────── * Inter variable. The design depends on intermediate weights — use these, never rounded substitutes. */ --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --font-display:var(--font); --font-body:var(--font); --font-btn:var(--font); --w-thin:200; /* statistic numerals */ --w-display:360; /* h1 */ --w-regular:400; /* body, buttons */ --w-label:425; /* pill labels */ --w-medium:470; /* h3, eyebrow, lead */ --w-semi:500; /* panel titles */ --w-strong:520; /* wordmark */ --w-nav:570; /* navigation */ --ls-display:-0.035em; --ls-h2:-0.030em; --ls-h3:-0.020em; --ls-tight:-0.015em; --ls-nav:-0.0561em; --ls-btn:-0.0442em; /* Fluid display scale — the hero uses its own --u system (hero.css). These are the ONLY font sizes on the site. Every piece of text picks the role it belongs to; nothing declares a raw px size of its own. */ --fs-h1:clamp(38px,5.4vw,70px); --fs-h2:clamp(27px,3.3vw,42px); --fs-h3:clamp(19px,1.7vw,24px); --fs-h4:clamp(17px,1.3vw,19px); --fs-lead:clamp(16px,1.15vw,18px); --fs-body:16.5px; --fs-sm:14.5px; --fs-xs:13px; --fs-2xs:11.5px; /* eyebrows, pills, table micro-labels */ --fs-stat:clamp(46px,5.2vw,76px); --fs-stat-sm:clamp(26px,2.6vw,36px); /* ── Spacing scale ─────────────────────────────────────────────────────── * One ladder for every gap, pad and margin. Values between steps (9px, 11px, 13px…) are drift, not design — round to the nearest step. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; /* ── Space and layout ──────────────────────────────────────────────────── */ --container:1500px; --container-wide:1720px; --container-medium:1120px; --container-narrow:860px; --gutter:40px; --section-pad:clamp(64px,7vw,104px); --section-pad-tight:clamp(48px,5vw,72px); --gap-xs:10px; --gap-sm:16px; --gap-md:24px; --gap-lg:32px; --gap-xl:48px; /* ── Motion ────────────────────────────────────────────────────────────── */ --ease-expo:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.22,.7,.25,1); --ease-glass:cubic-bezier(.2,.75,.28,1); --ease-out:cubic-bezier(.2,.7,.3,1); --dur-fast:.18s; --dur-mid:.28s; --dur-slow:.42s; --dur-reveal:.62s; /* scroll-reveal entrance */ --dur-plate:.45s; /* hero video plate fade-in */ /* ── Breakpoints ───────────────────────────────────────────────────────── * Media queries cannot read custom properties, so these are documentation for the ladder every stylesheet must use. Do not invent widths between them — round to the nearest step. 1180px wide desktop -> desktop 1080px desktop -> small desktop / landscape tablet 980px nav collapses into the burger 860px tablet -> stacked 560px stacked -> phone 861px is the paired min-width for the 860 step. */ /* Vertical crop bias for hero video plates. The plates are 16:9 and the hero is wider, so cover crops them vertically; biasing towards the top keeps the headroom shot above the subjects and stops the fixed header cutting across their heads. A page can override this on its own .page-hero. */ --hero-focus:22%; /* ── Header ────────────────────────────────────────────────────────────── */ --header-h:76px; --focus-ring:0 0 0 3px rgba(255,107,0,0.45); /* ── Named glass surfaces ──────────────────────────────────────────────── * Alpha-composited values that belong to one specific chrome element. They live here rather than in the component file so every colour in the project still has exactly one home. */ /* The nav capsule floats over the hero video and, once scrolled, over the navy bar — both dark. So it is white-alpha glass carrying white type, the same recipe as the hero panel, rather than a near-solid white pill. */ --nav-glass-a:rgba(255,255,255,0.18); --nav-glass-b:rgba(255,255,255,0.07); --nav-glass-border:rgba(255,255,255,0.30); --nav-glass-hi:rgba(255,255,255,0.22); --nav-glass-ring:0 0 0 1px rgba(255,255,255,0.08); --nav-glass-drop:0 8px 26px rgba(3,20,42,0.22); --nav-hover:rgba(255,255,255,0.14); --menu-glass:rgba(255,255,255,0.92); --menu-glass-border:rgba(255,255,255,0.90); --menu-glass-drop:0 18px 44px rgba(3,20,42,0.20); --menu-panel-glass:rgba(255,255,255,0.94); --menu-panel-drop:0 20px 44px rgba(3,20,42,0.24); /* The mobile nav panel is a LIGHT plate, so it needs the neutral ring rather than the white-alpha one the dark capsule uses. */ --menu-panel-ring:0 0 0 1px rgba(120,145,180,0.18); --header-scrolled:rgba(4,29,54,0.82); --header-scrolled-drop:0 10px 30px rgba(3,20,42,0.24); --scrim:rgba(3,20,42,0.62); --on-dark-a08:rgba(255,255,255,0.08); --on-dark-a09:rgba(255,255,255,0.09); --on-dark-a12:rgba(255,255,255,0.12); --on-dark-a22:rgba(255,255,255,0.22); --accent-tint:rgba(255,107,0,0.16); --accent-tint-strong:rgba(255,107,0,0.18); /* Hero: the wash over the video plate, and the panel that floats on it. */ --hero-wash: linear-gradient(180deg, rgba(4,29,54,0.62) 0%, rgba(4,29,54,0.40) 46%, rgba(4,29,54,0.72) 100%), linear-gradient(100deg, rgba(3,20,42,0.52) 0%, rgba(3,20,42,0.10) 58%, transparent 100%); --hero-panel-a:rgba(255,255,255,0.28); --hero-panel-b:rgba(255,255,255,0.10); --hero-panel-border:rgba(255,255,255,0.42); --hero-panel-hi:rgba(255,255,255,0.40); --hero-panel-lo:rgba(255,255,255,0.10); --hero-panel-drop:0 24px 56px rgba(3,20,42,0.30); --hero-badge-bg:rgba(255,255,255,0.90); --hero-badge-halo:rgba(255,255,255,0.22); --hero-badge-drop:0 8px 18px rgba(3,20,42,0.18); } /* ── Section glass contexts ──────────────────────────────────────────────── * A card never styles itself per section. The section declares the glass and the card reads it. Adding a new section background means adding a block here — not adding an override next to every card. */ /* White sections: pure white glass would vanish, so the plate is tinted toward the frame colour and given a slightly firmer ring. */ .section, .surface-white{ --glass-a:rgba(237,243,250,0.92); --glass-b:rgba(246,249,253,0.72); --glass-border:rgba(255,255,255,0.95); --glass-hi:rgba(255,255,255,0.90); --glass-lo:rgba(11,18,32,0.03); --glass-ring:0 0 0 1px rgba(120,145,180,0.17); --glass-drop:0 14px 34px rgba(28,52,92,0.07); } /* Pale frame sections: the reference frosted plate. */ .section-alt, .proof-bar, .reviews-section, .booking-section, .legal-body, .thankyou-section, .error-section, .package-detail-page, .surface-pale{ --glass-a:rgba(255,255,255,0.74); --glass-b:rgba(255,255,255,0.44); --glass-border:rgba(255,255,255,0.86); --glass-hi:rgba(255,255,255,0.60); --glass-lo:rgba(255,255,255,0.20); --glass-ring:0 0 0 1px rgba(120,145,180,0.20); --glass-drop:0 18px 40px rgba(28,52,92,0.09); } /* Navy sections: white-alpha glass, the same treatment the nav pill gets over the hero video. Text tokens flip to their on-dark equivalents. */ .section-blue, .cta-section, .package-detail-final-bg, .site-footer, .surface-blue{ --glass-a:rgba(255,255,255,0.13); --glass-b:rgba(255,255,255,0.05); --glass-border:rgba(255,255,255,0.22); --glass-hi:rgba(255,255,255,0.20); --glass-lo:rgba(255,255,255,0.05); --glass-ring:0 0 0 1px rgba(255,255,255,0.09); --glass-drop:0 22px 48px rgba(0,0,0,0.26); --text:var(--on-dark); --ink:var(--on-dark); --ink-soft:var(--on-dark); --muted:var(--on-dark-soft); --muted-2:var(--on-dark-soft); --muted-3:var(--on-dark-mute); --hairline:var(--hairline-on-dark); --hairline-strong:rgba(255,255,255,0.26); --off-white:rgba(255,255,255,0.08); --brand-soft:rgba(255,255,255,0.12); --brand-soft-hov:rgba(255,255,255,0.18); } /* Glass laid directly over a video plate — the hero pill, panel and buttons. */ .surface-media{ --glass-a:rgba(255,255,255,0.20); --glass-b:rgba(255,255,255,0.08); --glass-border:rgba(255,255,255,0.34); --glass-hi:rgba(255,255,255,0.30); --glass-lo:rgba(255,255,255,0.06); --glass-ring:0 0 0 1px rgba(255,255,255,0.10); --glass-drop:0 24px 54px rgba(0,0,0,0.30); }