/* ========================================================================== EGYVACATIONS — DESIGN TOKENS · assets/css/tokens.css Three layers: primitive -> semantic -> component. Only the semantic and component layers may be used in stylesheets. A raw hex outside the PRIMITIVE block is a bug. ========================================================================== */ /* Outfit, self-hosted: one variable file covers 100–900. OFL — see assets/fonts/OFL.txt. Preloaded from every page's . */ @font-face{font-family:'Outfit';src:url('../fonts/outfit-variable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} :root{ /* ========================================================================== 1. PRIMITIVE — the only place raw values are allowed Five brand hues, taken from the logo file. Nothing is added, nothing is shifted. Depth comes from alpha over white or over navy, never from a new hue. ========================================================================== */ --ev-navy:#114873; /* logo — eye contour, wave, wordmark */ --ev-orange:#F0901F; /* logo — sun disc */ --ev-charcoal:#23272A; /* logo — "EGY" wordmark */ --ev-ocean:#0478B3; /* logo — inner wave */ --ev-sky:#209EDA; /* logo — outer wave */ --ev-navy-deep:#0C3352; /* the footer only — navy pushed down so the footer separates from the navy enquiry band instead of merging into one wall of blue. White on it measures 12.6:1. */ --ev-white:#FFFFFF; --ev-whatsapp:#25D366; /* functional only — WhatsApp's own brand green */ /* charcoal stepped over white — these are the ONLY greys on the site */ --ev-charcoal-86:rgba(35,39,42,.86); --ev-charcoal-72:rgba(35,39,42,.72); --ev-charcoal-66:rgba(35,39,42,.66); --ev-charcoal-45:rgba(35,39,42,.45); /* navy stepped over white — borders, tints, rules */ --ev-navy-14:rgba(17,72,115,.14); --ev-navy-09:rgba(17,72,115,.09); --ev-navy-05:rgba(17,72,115,.05); /* white stepped over navy — text and chrome on dark sections */ --ev-white-78:rgba(255,255,255,.78); --ev-white-62:rgba(255,255,255,.62); --ev-white-22:rgba(255,255,255,.22); --ev-white-12:rgba(255,255,255,.12); --ev-orange-12:rgba(240,144,31,.12); /* ========================================================================== 2. SEMANTIC — what a value is FOR. Stylesheets use this layer. ========================================================================== */ /* --- surfaces ------------------------------------------------------------ */ --surface:var(--ev-white); /* the page. White. Always. */ --surface-raised:var(--ev-white); /* cards sitting on the page */ --surface-sunken:var(--ev-navy-05); /* alternating section band */ --alt-bg:var(--ev-navy-05); /* the sunken band of .is-alt (fixed: inner parts may redefine --surface-sunken) */ --surface-inverse:var(--ev-navy); /* full navy section */ /* --- text ---------------------------------------------------------------- */ --text:var(--ev-charcoal); /* body 15.1:1 AAA */ --text-heading:var(--ev-navy); /* every heading 9.6:1 AAA */ --text-secondary:var(--ev-charcoal-72); /* lede, captions 6.0:1 AA */ --text-muted:var(--ev-charcoal-66); /* smallest text 5.0:1 AA — floor */ --text-decorative:var(--ev-charcoal-45);/* 2.7:1 — NOT for text. Rules, icons beside a visible label, dividers. */ --text-link:var(--ev-ocean); /* inline links 4.8:1 AA */ --text-on-inverse:var(--ev-white); /* 9.6:1 on navy */ --text-on-inverse-secondary:var(--ev-white-78); /* 6.5:1 */ --text-on-inverse-muted:var(--ev-white-62); /* 4.7:1 — floor on navy */ /* --- lines --------------------------------------------------------------- */ --border:var(--ev-navy-14); /* inputs, visible edges */ --border-soft:var(--ev-navy-09); /* card edges, hairline dividers */ --focus-ring:var(--ev-sky); /* --- accents ------------------------------------------------------------- */ --accent:var(--ev-orange); /* CTA fills, rules, underlines, dashes */ --accent-wash:var(--ev-orange-12); /* highlight behind search matches */ --accent-display:#CC7209; /* LEGACY ONLY, not used by new work; the orange word inside a heading: same hue, one step down, 3.51:1 on white — passes large text (>=24px) only. */ --accent-ink:#9A5A08; /* orange DARKENED until it passes as text: 4.93:1 on white. The brand orange itself is 2.41 and may never carry text. */ --on-accent:var(--ev-navy-deep); /* text ON an orange fill — a price pill, a badge. --ev-navy over brand orange is 3.96 and fails below 24px, which is every badge on the site; navy-deep is 5.41 and passes at any size. Same hue, one step darker — not a new colour. */ --accent-on-navy:#FFB357; /* the SAME orange, lightened for use on a navy field. Brand orange measures 3.96 on --ev-navy and 5.41 on --ev-navy-deep, so it is fine for large display type and nothing else; this tint measures 5.38 and 7.35 and carries any size. Hue is unchanged — it is a tint, not a colour. */ --action:var(--ev-navy); /* secondary solid buttons */ --action-hover:var(--ev-ocean); --info:var(--ev-sky); /* eyebrow rules on navy, focus */ --whatsapp:var(--ev-whatsapp); /* ONLY on WhatsApp affordances */ --whatsapp-ink:#128C4A; /* WhatsApp mark drawn on white — 4.2:1, icon only */ --on-whatsapp:#06301A; /* label on WhatsApp green — 9.1:1 */ --danger:#B3261E; /* validation only — 6.5:1 on white */ --danger-wash:rgba(179,38,30,.07); --ok:#1E7A46; /* semantic "included" mark — white icon on it */ --ok-ink:#176138; /* "included" text on --ok-wash — 6.4:1 */ --ok-wash:rgba(30,122,70,.08); /* ========================================================================== 3. TYPE One family: Outfit. Personality comes from weight contrast, not from a second face. Two weights carry the whole system: 300 and 700/800. ========================================================================== */ --font:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; --fs-display:clamp(2.15rem,4.9vw,3.75rem); /* h1 only; 3.75rem is the ceiling for every heading (standard) */ --fs-h2:clamp(2rem,3.6vw,3rem); --fs-h3:1.16rem; --fs-lede:clamp(1rem,1.4vw,1.12rem); --fs-body:1rem; --fs-sm:.93rem; --fs-xs:.83rem; --fs-micro:.75rem; /* 12px — the floor. Nothing on the site is set smaller. */ --fw-light:300; /* first line of a dual heading, lede, long body */ --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; /* second line of a dual heading, h3, prices */ --fw-black:800; /* h1 second line, statistics */ --lh-display:1.06; --lh-heading:1.1; --lh-body:1.6; --lh-tight:1.32; --ls-display:-.025em; --ls-heading:-.025em; --ls-body:0; --ls-micro:.13em; /* uppercase micro labels */ --ls-eyebrow:.19em; /* ========================================================================== 4. SPACE — 8px base. Section rhythm uses --sp-9 / --sp-10 only. ========================================================================== */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-9:64px; --sp-10:88px; --sp-11:112px; --container:1240px; --measure-head:45ch; /* headings, ledes, section intros (standard) */ --measure-body:65ch; /* running text outside documents, articles and detail pages */ --gutter:20px; /* ========================================================================== 5. RADIUS · ELEVATION · MOTION ========================================================================== */ /* three radii and a pill (standard): 8 small parts, 14 cards and fields, 20 large panels and media */ --r-xs:8px; /* checkbox, small chip */ --r-sm:8px; /* badge, tag, small icon tile */ --r-md:14px; /* input, solid button, thumb */ --r-lg:14px; /* card */ --r-xl:20px; /* search panel, hero media */ --r-pill:99px; /* elevation is always navy-tinted — never neutral black */ --shadow-1:0 1px 2px rgba(17,72,115,.05),0 2px 8px rgba(17,72,115,.05); --shadow-2:0 4px 14px rgba(17,72,115,.09),0 14px 34px rgba(17,72,115,.07); --shadow-3:0 20px 54px rgba(17,72,115,.17),0 4px 14px rgba(17,72,115,.08); --shadow-accent:0 1px 2px rgba(17,72,115,.08),0 6px 16px rgba(240,144,31,.22); /* soft, two layers */ --shadow-whatsapp:0 1px 2px rgba(17,72,115,.08),0 6px 16px rgba(37,211,102,.24); --ease:cubic-bezier(.16,1,.3,1); /* exponential ease-out (standard) */ /* text on photos: one scrim, bottom-up (0.94 / 0.72 / 0.25) */ --scrim:linear-gradient(to top,rgba(12,51,82,.94) 0%,rgba(12,51,82,.72) 38%,rgba(12,51,82,.25) 72%,rgba(12,51,82,0) 100%); --dur-fast:180ms; /* colour, border */ --dur-base:280ms; /* card lift, panel open */ --dur-slow:600ms; /* image zoom inside a card */ /* ========================================================================== 6. COMPONENT — bind components here, never straight to primitives. ========================================================================== */ /* buttons — see the contrast note in the style guide: white on orange is 2.4:1 and fails at every size, so the orange button carries NAVY text. */ --btn-h:52px; --btn-h-sm:44px; --btn-radius:var(--r-pill); /* The CTA is the logo orange, exactly (client decision, 2026-10-20). White on #F0901F is 2.41:1 and fails at every size, so the LABEL moves instead of the fill: navy-deep on brand orange measures 5.41:1. */ --btn-cta-bg:var(--accent); /* the logo orange, exactly */ --btn-cta-fg:var(--on-accent); /* navy-deep on #F0901F = 5.41:1, any size */ --btn-cta-bg-hover:#E5850F; /* one step deeper; navy-deep on it 4.78:1 */ --btn-solid-bg:var(--btn-cta-bg); /* orange is the only action colour */ --btn-solid-fg:var(--btn-cta-fg); --btn-ghost-border:var(--border); --btn-ghost-fg:var(--text-heading); /* form controls */ --control-h:56px; --control-radius:var(--r-md); --control-border:var(--border); --control-border-focus:var(--focus-ring); --control-focus-shadow:0 0 0 2px var(--ev-white),0 0 0 4px var(--ev-ocean); /* 4.8:1 ring, visible on any field */ --control-icon:var(--ev-ocean); --control-placeholder:var(--text-muted); /* cards */ --card-bg:var(--surface-raised); --card-border:var(--border-soft); --card-radius:var(--r-lg); --card-shadow-hover:var(--shadow-2); --card-lift:-5px; --card-media-ratio:5/3; /* tour card internals */ --tourcard-badge-bg:var(--action); --tourcard-badge-fg:var(--ev-white); --tourcard-tag-bg:var(--surface-sunken); --tourcard-tag-fg:var(--text-secondary); --tourcard-route-fg:var(--text-muted); /* section rhythm — three steps, so a major change of subject breathes more than a minor one (the reference sites run 64–96px between chapters). Phones fall back to the old 40px. Change it here, nowhere else. */ --section-py:clamp(30px,3.2vw,46px); --section-py-lg:clamp(38px,4.6vw,62px); --section-py-tight:clamp(20px,2.4vw,30px); --block-pad:40px; --section-head-gap:28px; /* the watermark device — logo mark, low alpha, bottom corner */ --watermark-opacity:.065; --watermark-size:230px; --watermark-img:url("../img/ev-mark.png"); /* the logo mark, 4 KB, transparent */ /* site chrome — header, drawer, footer, app bar These are the only places the chrome's own measurements are declared, so the PHP templates can change a height in one line instead of ten rules. */ --chrome-utility-h:40px; --chrome-navbar-h:78px; --chrome-navbar-h-sticky:66px; --chrome-z-header:60; --chrome-z-drawer:90; --chrome-z-appbar:70; --chrome-z-fab:65; --chrome-header-bg:var(--ev-white); --chrome-header-shadow:0 2px 14px rgba(17,72,115,.07); --chrome-utility-bg:var(--ev-navy); --chrome-utility-fg:var(--ev-white-78); --chrome-mega-w:1160px; --chrome-footer-bg:var(--ev-navy-deep); --chrome-footer-fg:var(--ev-white-78); --chrome-footer-rule:var(--ev-white-22); --chrome-footerbar-bg:#0A2840; /* the footer navy with the bar's 22% black flattened in — body uses the same value so the strip the app bar reserves continues the bar instead of banding */ --appbar-h:60px; --appbar-bg:var(--ev-white); --appbar-fg:var(--text-muted); --appbar-fg-active:var(--ev-navy); --appbar-shadow:0 -4px 20px rgba(17,72,115,.13); } /* ========================================================================== 7. REDUCED MOTION — non-negotiable ========================================================================== */ @media (prefers-reduced-motion:reduce){ :root{--dur-fast:1ms;--dur-base:1ms;--dur-slow:1ms} }