/* ============================================================ DayGo Tours Egypt — design tokens ------------------------------------------------------------ THE source of truth for every value used by both the public site (v2.css) and the operator panel (admin.css). Load this BEFORE v2.css or admin.css. If you need a number that isn't here, add a token — do not inline a literal. Retuned 2026-08-27 for the marketplace revamp, against the eight artboards in export/*.dc.html. v2.css carries three hex literals against 1,466 var() uses, so this file is where the whole palette, type ramp and radius scale actually move. Every ratio quoted below is measured by TokenContrastTests. If you change a value, run that test rather than trusting the comment beside it. ============================================================ */ :root { /* ── Brand core — navy (grounds) ── The artboards' dark surfaces: the home hero, the footer and the CTA panels. navy-950 carries white body text at 17.50:1. */ --v2-navy-950: #0d1a2b; --v2-navy-900: #132338; --v2-navy-850: #16293f; --v2-navy-800: #1e3c5c; /* ── Brand core — sand (warmth) ── Unchanged by the revamp. sand-300 is the price accent on a dark panel; see --v2-cta-panel for why that ground is the 700 step and not the button fill. */ --v2-sand-300: #f3d9b0; --v2-sand-200: #f6e8cd; --v2-sand-100: #fbf4e8; /* ── Brand core — royal (primary) ── The artboards use exactly three blues, so the ramp has three working steps plus one decorative. Ratios are against --v2-white. royal-600 is the primary CTA fill AND the link colour (5.09:1). The design uses one blue for both; two near-identical ramp steps would have been a lie. royal-700 is hover (7.19:1). royal-800 is pressed and small accent text (9.26:1). royal-500 is DECORATIVE ONLY — 3.46:1, which fails AA. Icon fills, borders and glows. Never a button fill. The pre-revamp ramp ran darker (650 at #1b4fd0) and carried a separate 650 step for the fill. That step is gone: nothing referenced it outside this file and the contrast test. */ --v2-royal-800: #0b429b; --v2-royal-700: #0f52b8; --v2-royal-600: #1668e3; --v2-royal-500: #4d86f7; /* ── Logo lockup (3A "Departure") ── A logotype palette, deliberately separate from the UI ramp: the wordmark must not move when the product palette is retuned. navy carries DAY and TOURS EGYPT at 12.77:1 on white; sky carries GO at 4.71:1 on navy. sky on WHITE is 2.71:1 and fails AA outright. That is legal here and only here, because WCAG 1.4.3 exempts text that is part of a logo. Never reach for --v2-logo-sky for links, labels or body copy — LogoTokenTests pins the failure so this stays a decision, not a drift. */ --v2-logo-navy: #16325c; --v2-logo-sky: #4da3ea; --v2-logo-rule: #e4e8ee; /* ── Section band tints ── The artboards' two blue grounds. tint-100 is the deeper of the pair and still carries --v2-text-muted at 5.35:1. */ --v2-tint-50: #f5f9ff; --v2-tint-100: #e7f1fd; /* ── Semantic aliases ── Rules reference THESE, never a raw ramp token. Repointing the palette is then an edit to this block alone, and any rule that still names a ramp token directly stands out as unmigrated. StylesheetTokenDisciplineTests enforces it. */ --v2-primary: var(--v2-royal-600); --v2-primary-hover: var(--v2-royal-700); --v2-primary-active: var(--v2-royal-800); --v2-primary-decorative: var(--v2-royal-500); --v2-link: var(--v2-royal-600); --v2-focus: var(--v2-royal-600); --v2-band: var(--v2-tint-100); --v2-band-strong: var(--v2-tint-50); /* The filled CTA panel's ground. Deliberately the 700 step and not --v2-primary: --v2-sand-300 measures 3.73:1 on the button blue and fails AA, but 5.26:1 on this one. The panel is a large block of colour rather than a control, so the deeper step also reads better at that size. */ --v2-cta-panel: var(--v2-royal-700); /* ── Sale / discount ── The artboards draw their badges and count bubbles in #e8262a, which measures 4.43:1 under white and so cannot carry the 11px white numerals it is drawn with. sale-600 is that red darkened to 6.54:1; #e8262a survives only as the decorative step. NOT --v2-danger: that alias already exists and is consumed by validation-error text in both stylesheets. A sale badge and an error are not the same signal. */ --v2-sale-700: #8c1d18; --v2-sale-600: #b3261e; --v2-sale-500: #e8262a; --v2-sale-100: #fbe3e4; --v2-sale: var(--v2-sale-600); --v2-sale-strong: var(--v2-sale-700); --v2-sale-decorative: var(--v2-sale-500); --v2-sale-tint: var(--v2-sale-100); /* Fact strip: the cell grid and its dividers. */ --v2-fact-cell-min: 11rem; --v2-fact-gap: var(--space-4); /* Gallery mosaic: the large frame's share of the row, and the tile gap. */ --v2-mosaic-lead: 2fr; --v2-mosaic-gap: 0.75rem; --v2-mosaic-row: 11.625rem; /* Gallery lightbox: a near-black navy ground so photography reads true, and round glass controls that stay legible over any picture. The white fills are translucent on purpose - a solid disc would hide the photo's edge on a narrow screen. */ --v2-lightbox-ground: rgb(9 16 27 / 0.94); --v2-lightbox-control: 3rem; --v2-lightbox-control-sm: 2.75rem; --v2-lightbox-icon: 1.375rem; --v2-lightbox-fill: rgb(255 255 255 / 0.1); --v2-lightbox-fill-hover: rgb(255 255 255 / 0.22); --v2-lightbox-edge: rgb(255 255 255 / 0.2); --v2-lightbox-blur: 12px; --v2-lightbox-image-max-h: calc(100dvh - 9rem); --v2-lightbox-press: 0.94; --v2-lightbox-nudge: 2px; /* Home category tiles: the bento row height from the Home artboard (200px), the photo scrim that carries the white label, and the round arrow cue. The scrim deepens on hover so the label stays legible as the photo zooms. The fallback ground is the navy pair, for a category with no photo. */ --v2-cat-row: 12.5rem; --v2-cat-rail-item: 72%; /* Phone tour cards. The rail is 78% of the row so the next card peeks, and never wider than 17.5rem. The results photo caps at 11.5rem so a second card starts on the first screen. */ --v2-tour-rail-item: min(17.5rem, 78%); --v2-tour-card-photo-max: 11.5rem; /* Home hero. Lighter through the middle than the old 0.72/0.42/0.80 scrim so the photograph reads, with darker bands where the title and the search sit. */ --v2-hero-scrim: linear-gradient(180deg, rgb(9 20 35 / 0.62) 0%, rgb(9 20 35 / 0.28) 42%, rgb(9 20 35 / 0.72) 100%); --v2-cat-scrim: linear-gradient(180deg, rgb(9 20 35 / 0) 40%, rgb(9 20 35 / 0.78) 100%); --v2-cat-scrim-hover: linear-gradient(180deg, rgb(9 20 35 / 0.08) 25%, rgb(9 20 35 / 0.86) 100%); --v2-cat-label-shadow: 0 1px 2px rgb(9 20 35 / 0.45); --v2-cat-fallback: linear-gradient(145deg, var(--v2-navy-800) 0%, var(--v2-navy-950) 100%); --v2-cat-cue: 2.25rem; --v2-cat-cue-fill: rgb(255 255 255 / 0.16); --v2-cat-cue-edge: rgb(255 255 255 / 0.32); --v2-cat-zoom: 1.06; --v2-cat-initial: rgb(255 255 255 / 0.12); --v2-cat-icon: rgb(255 255 255 / 0.88); /* Score bars, shared by the category breakdown and the star distribution. */ --v2-score-bar-height: 0.5rem; /* How-it-works steps: narrowest column before the grid wraps a step onto its own row — wide enough for "Wir bestätigen persönlich". */ --v2-step-min: 15rem; /* ── Neutrals & surfaces ── */ --v2-bg: #ffffff; --v2-surface: #ffffff; --v2-surface-alt: #f7f8f9; --v2-mist-100: #f1f2f4; --v2-mist-200: #eaecf0; /* Solid rather than the pre-revamp rgba(): the artboards draw hairlines over photography as well as over white, and a translucent line shifts colour when it crosses a tile edge. */ --v2-line: #eaecf0; --v2-line-strong: #dfe2e6; /* ── Text ── */ --v2-text: #14181c; --v2-text-soft: #3d4650; --v2-text-muted: #5b636b; /* Brand-coloured text small enough that the primary would be the weakest thing on the page — a 12px eyebrow, a 14px label. Dark enough (11.81:1 on white) to clear AA on white, the band and the sand alike. */ --v2-accent-text: #15395e; --v2-white: #ffffff; /* ── Feedback & ratings ── */ --v2-gold: #f0a92e; --v2-danger: #dc3545; --v2-success: #28a745; /* ── Space scale (4px base) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; /* ── Vertical rhythm ── 76px between major sections on desktop, 44px on mobile; banded sections carry 64px of internal padding. The vw coefficient is set so the ramp reaches its ceiling at the 1290px container the artboards are drawn at (76 / 1290 ≈ 5.89vw), not far past it. */ --section-y: clamp(2.75rem, 5.89vw, 4.75rem); --section-y-tight: clamp(1.75rem, 3.4vw, 2.75rem); --band-y: 4rem; /* ── Type scale (one fluid ramp) ── Each step is pinned to a role and interpolates between the mobile size at 390px and the artboard's desktop size at 1280px. Reach for the step that matches the role; do not add a parallel clamp for a one-off heading. xs 12px eyebrow, micro label sm 14px body small, card copy base 15px body ← was 16px pre-revamp md 16.5px long-form body, lede lg 18→19px card H3 xl 19→20px sub-heading / card price 2xl 22→26px sub-section H2 3xl 24→30px section H2 4xl 22→34px page H1 5xl 27→50px large heading display 32→60px home hero H1 */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 0.9375rem; --text-md: 1.03125rem; --text-lg: clamp(1.125rem, 0.11vw + 1.0976rem, 1.1875rem); --text-xl: clamp(1.1875rem, 0.11vw + 1.1601rem, 1.25rem); --text-2xl: clamp(1.375rem, 0.45vw + 1.2654rem, 1.625rem); --text-3xl: clamp(1.5rem, 0.67vw + 1.3357rem, 1.875rem); --text-4xl: clamp(1.375rem, 1.35vw + 1.0463rem, 2.125rem); --text-5xl: clamp(1.6875rem, 2.58vw + 1.0576rem, 3.125rem); --text-display: clamp(2rem, 3.15vw + 1.23rem, 3.75rem); /* Prices sit off the heading ramp: the booking rail runs 34px, a list row 30px, a grid card uses --text-xl. */ --text-price: 2.125rem; --text-price-list: 1.875rem; /* Meta and captions — between --text-xs and --text-sm. */ --text-meta: 0.8125rem; /* ── Line heights & tracking ── */ --leading-hero: 1.08; --leading-tight: 1.1; --leading-heading: 1.15; --leading-title: 1.2; --leading-card: 1.28; --leading-snug: 1.3; --leading-meta: 1.5; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-display: -0.03em; --tracking-h1: -0.035em; --tracking-heading: -0.025em; --tracking-tight: -0.01em; --tracking-eyebrow: 0.18em; /* Micro labels (form and filter headers) sit tighter than an eyebrow so a two-word label doesn't sprawl. */ --tracking-label: 0.12em; /* ── Radii ── The revamp flattens the scale hard. The artboards use 3–5px on micro chips, 6px on every field and button, 8px on cards and image tiles, 9px on badges, and pills. Nothing above 9px, where the pre-revamp scale ran to 32px. --v2-radius is the generic step for anything that has not picked a role. It was CONSUMED by .global-search__field and .dest-count-pill and never declared, so both rendered square; declaring it here is that fix. */ --v2-radius: 6px; --v2-radius-xs: 4px; --v2-radius-sm: 5px; --v2-radius-control: 6px; --v2-radius-md: 6px; --v2-radius-card: 8px; --v2-radius-lg: 8px; --v2-radius-panel: 9px; --v2-radius-xl: 9px; /* Kept only for the full-bleed decorative frames that predate the revamp. Do not reach for it on new work. */ --v2-radius-2xl: 12px; --v2-radius-pill: 999px; /* ── Control heights ── Nothing interactive drops below --tap on a touch target. The artboards run their search fields and primary buttons at 52px. */ --control-cta: 52px; --control-height: 52px; --control-md: 46px; --control-input: 52px; --control-sm: 40px; --control-chip: 36px; /* ── Elevation ── Retinted to the new navy so shadows read as the same family as the grounds they fall on. */ --v2-shadow-sm: 0 2px 8px rgba(13, 26, 43, 0.05); --v2-shadow-md: 0 4px 16px rgba(13, 26, 43, 0.07); --v2-shadow-lg: 0 10px 28px rgba(13, 26, 43, 0.09); --v2-shadow-xl: 0 20px 48px rgba(13, 26, 43, 0.13); /* ── Measure ── 32px side padding on desktop, 16px on mobile. The container is the artboards' 1290px, up from 1200px. */ --gutter: clamp(1rem, 4vw, 2rem); --v2-width: min(1290px, 100% - (var(--gutter) * 2)); --measure: 68ch; /* ── Motion ── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --duration: 0.25s; /* ── Hero crossfade ── The home hero cycles the photos in wwwroot/images/daygo/hero. Slow on purpose: the headline and the search bar sit on top of it, and a brisk fade behind text someone is reading is a distraction rather than an effect. site.js reads --hero-hold to time its interval, so the two never drift apart. */ --hero-fade: 1.2s; --hero-hold: 6s; /* Live height of the sticky header. site.js measures the real element with a ResizeObserver and writes the value back here, so nothing downstream (scroll-padding, anchor offsets) hardcodes a pixel guess. This declaration is only the pre-JS fallback, set to the artboards' 84px header. */ --nav-h: 84px; /* The bar's own intrinsic floor. Deliberately a *separate* token from --nav-h: site.js writes --nav-h from a measurement of the bar, so using --nav-h for the bar's own min-height made the measurement an input to the thing being measured. That loop could only ratchet upward — one open/close of the mobile menu published the height of the open panel and the bar stayed at ~378px for the rest of the session. Nothing may write to this token at runtime. */ --nav-bar-h: 84px; /* Minimum comfortable touch target. */ --tap: 44px; /* ── Focus ring ── royal-600 measures 5.09:1 on white, 4.46 on the band and 4.66 on sand — but only 2.31 on navy-950, which fails WCAG 1.4.11 for non-text UI. The dark CTA band and the footer therefore switch to a white ring (17.50:1) rather than the whole site dropping to a lighter blue. One declaration so the public site and the operator panel focus identically. */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--v2-focus); --focus-ring-color-dark: var(--v2-white); /* ── Layer scale ── One declared order for everything that overlaps. Anything that stacks reads from here; do not inline a raw z-index. */ --z-backdrop: 900; --z-header: 1000; --z-nav-panel: 1010; /* Above the nav panel: the utility bar sits earlier in the DOM, so its dropdowns lost to .site-nav__inner's 1010 and the nav links painted straight through the open language menu. */ --z-utility: 1020; /* Above header chrome: undo toast on the wishlist page. */ --z-toast: 1100; --z-skip: 9999; /* Wishlist row media — artboard 272×190. */ --v2-wishlist-media-w: 17rem; --v2-wishlist-media-h: 11.875rem; }