/* ========================================================================== 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. ========================================================================== */ :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 */ --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-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 */ /* ========================================================================== 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.55rem); /* h1 only */ --fs-h2:clamp(1.85rem,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:.72rem; /* uppercase labels only, always >=600 weight */ --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.65; --lh-tight:1.32; --ls-display:-.04em; --ls-heading:-.03em; --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; --gutter:20px; /* ========================================================================== 5. RADIUS · ELEVATION · MOTION ========================================================================== */ --r-xs:5px; /* checkbox */ --r-sm:8px; /* badge, tag, small icon tile */ --r-md:12px; /* input, solid button, thumb */ --r-lg:18px; /* card */ --r-xl:26px; /* search panel, hero media */ --r-pill:999px; /* 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 8px 22px rgba(184,92,0,.30); /* tinted to the CTA fill */ --shadow-whatsapp:0 5px 16px rgba(37,211,102,.38); --ease:cubic-bezier(.22,.61,.36,1); --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 carries WHITE text, as the brand asks. Measured: white on the brand orange #F0901F is 2.41:1 and fails at every size, so the button's FILL is the thing that moves — #B85C00 is the same hue pushed down until white clears 4.5:1 (it measures 4.60). The brand orange is untouched everywhere else: badges, rules, eyebrows, the price pill. Set --btn-cta-bg back to var(--accent) to use the lighter orange and accept the 2.41. */ --btn-cta-bg:#B85C00; --btn-cta-fg:var(--ev-white); --btn-solid-bg:var(--action); --btn-solid-fg:var(--ev-white); --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 4px rgba(32,158,218,.15); --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:16/10; /* 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 — 40px above and below every section, and the same 40px inside every block that has its own background (bands, panels, forms). One number drives the whole page; change it here, nowhere else. */ --section-py:40px; --section-py-lg:40px; --section-py-tight:40px; --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} }