/* ============================================================================= LEGACY -> DESIGN-SYSTEM BRIDGE ----------------------------------------------------------------------------- Makes an existing cr.resa client sheet drive cr.resa.core, unchanged. THE PROBLEM. Every client already has a style_custom.css written for cr.resa, in cr.resa's vocabulary: --main-color, --hover-color, --header-color, --button-color, --menu-color, --infos-color, --font-color and --background-first..seventh-degree. cr.resa's own CSS reads those names hundreds of times (--background-first-degree 293x, --font-color 153x, --main-color 102x), which is why the files work there. design-system.css reads NONE of them — zero occurrences. It was built on a new token set (--c-*), and its §36 block copied the reference VALUES (#630005, #ffa500) into that set without ever wiring the old names to it. A custom property nobody reads produces nothing, and raises nothing: it is simply ignored. So a client sheet dropped into custom\ is loaded, served and linked, and changes not one pixel. A silent no-op. THE FIX, ONCE, HERE. Custom properties are late-bound — var() resolves where the value is USED, not where it is declared. So this file can express the --c-* tokens in terms of the legacy variables. The client sheets stay exactly as they are: there are many of them, they are the clients' own, and they are deployed by hand. Nothing below asks any of them to change. LOAD ORDER (_DesignSystem.cshtml): design-system.css -> client-bridge.css -> custom\style_custom.css The bridge sits after §36 so its --c-* declarations win on source order at equal specificity. The client sheet comes LAST on purpose, so a client who prefers to write --c-* tokens directly still overrides everything here. EVERY var() CARRIES ITS §36 VALUE AS FALLBACK. A legacy variable the client did not define leaves that token exactly where design-system.css left it, so this file can never darken or discolour a deployment on its own. NOT MAPPED: --infos-color (no counterpart; the notice surfaces follow the brand below) and --main-font-size (the type scale is deliberately fixed — changing it reflows every page, which is a layout change, not a re-skin). [theme="d"] IS INERT HERE. cr.resa.core never sets a `theme` attribute, so the dark half of a client sheet simply never matches. It is harmless, and wiring a dark mode is a separate piece of work. ========================================================================== */ /* ----------------------------------------------------------------------------- Source values, resolved once. --button-color and --header-color fall back to --main-color, which is what a client sheet that omits them intends. -------------------------------------------------------------------------- */ :root, :root[data-mode] { --x-brand: var(--main-color, #630005); --x-cta: var(--button-color, var(--main-color, #630005)); --x-head: var(--header-color, var(--main-color, #630005)); --x-hi: var(--hover-color, #FFA500); --x-ink: var(--font-color, #1A1315); --x-surface: var(--background-first-degree, #FFFFFF); } /* ----------------------------------------------------------------------------- Direct mappings — no colour maths, so these apply in every browser. -------------------------------------------------------------------------- */ :root, :root[data-mode] { --c-primary-600: var(--x-brand); --c-brand-orange: var(--x-hi); --c-ink: var(--x-ink); --c-faint: var(--background-fourth-degree, #7B7B7B); --c-on-dark: var(--menu-color, #FFFFFF); --c-surface: var(--x-surface); --c-sand: var(--background-seventh-degree, #F7F5F5); --c-surface-2: var(--background-sixth-degree, #EFEFEF); --c-surface-3: var(--background-third-degree, #E2E2E2); --c-border: var(--background-fifth-degree, #DCD6D7); --c-border-2: var(--background-fifth-degree, #CCCCCC); } /* ----------------------------------------------------------------------------- Derived shades. A legacy sheet states ONE brand colour; the design system needs a seven-rung ladder, a CTA ramp and a dark hero ground. color-mix() builds them from that single value. Guarded by @supports because a declaration whose value fails to compute is dropped as "invalid at computed-value time", which would leave the token unset rather than falling back. Browsers without color-mix (pre-2023) keep the §36 shades around the client's base colour — off-key, but never broken. -------------------------------------------------------------------------- */ @supports (color: color-mix(in srgb, red, blue)) { :root, :root[data-mode] { /* Brand ladder around --main-color */ --c-primary-900: color-mix(in srgb, var(--x-brand) 45%, black); --c-primary-700: color-mix(in srgb, var(--x-brand) 72%, black); --c-primary-500: color-mix(in srgb, var(--x-brand) 82%, white); --c-primary-200: color-mix(in srgb, var(--x-brand) 28%, white); --c-primary-100: color-mix(in srgb, var(--x-brand) 12%, white); --c-primary-050: color-mix(in srgb, var(--x-brand) 6%, white); /* CTA. NOT --button-color raw: .btn--accent hardcodes color:#fff, and the mid-tone brands these palettes use fail AA against white (#2db7b9 -> 2.6:1, #109CD4 -> 3.1:1). Mixed 62% with black they clear 5.7:1 and 6.9:1, and the hover LIFTS back toward the client's own colour — the same split §36 used to keep the oxblood CTA readable. */ --c-accent-700: color-mix(in srgb, var(--x-cta) 45%, black); --c-accent-600: color-mix(in srgb, var(--x-cta) 72%, black); --c-accent-500: color-mix(in srgb, var(--x-cta) 62%, black); --c-accent-300: color-mix(in srgb, var(--x-cta) 55%, white); --c-accent-100: color-mix(in srgb, var(--x-cta) 12%, white); /* Hero / utility bar: white text sits on it, so it goes darker still (8.9:1 for #2db7b9). One token repaints .hero, .utility-bar, .gallery__more and .rmc__badge. */ --c-hero-ink: color-mix(in srgb, var(--x-head) 45%, black); /* Highlight ramp around --hover-color: icons, rules, promo tints. */ --c-brand-orange-600: color-mix(in srgb, var(--x-hi) 72%, black); --c-brand-orange-700: color-mix(in srgb, var(--x-hi) 58%, black); --c-brand-orange-100: color-mix(in srgb, var(--x-hi) 18%, white); /* Secondary inks, mixed toward the page surface: #000 on #fff yields the #333 / #666 the legacy sheets state by hand. */ --c-ink-2: color-mix(in srgb, var(--x-ink) 80%, var(--x-surface)); --c-muted: color-mix(in srgb, var(--x-ink) 60%, var(--x-surface)); /* Notices follow the brand; success / danger / warn keep their meaning. */ --c-info: color-mix(in srgb, var(--x-brand) 72%, black); --c-info-bg: color-mix(in srgb, var(--x-brand) 12%, white); /* Focus ring keeps --hover-color: it is the most visible brand cue and reaches every focusable element through §2's :focus-visible rule. */ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--x-hi) 45%, transparent); /* Shadows retinted from the burgundy of §36 to the client's own hue. */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--c-primary-900) 12%, transparent); --shadow-md: 0 2px 6px color-mix(in srgb, var(--c-primary-900) 14%, transparent); --shadow-lg: 0 4px 14px color-mix(in srgb, var(--c-primary-900) 18%, transparent); --ibe-shadow: 0 6px 18px -8px color-mix(in srgb, var(--c-primary-900) 34%, transparent); --ibe-shadow-sm: 0 1px 4px color-mix(in srgb, var(--c-primary-900) 12%, transparent); } } /* ----------------------------------------------------------------------------- TRANSLUCENT SURFACES — the eight rules tokens cannot reach. §36.2 writes these backgrounds as literal rgba() rather than as tokens, and says so itself (design-system.css:2769): "hardcode rgba() and so do NOT follow the token swap on their own". They are translucent and sit over photography, which no opaque token can express — which is why the IBE search panel and the hero tint stay oxblood while the buttons take the client's colour. Selectors are copied verbatim from §36.2, so specificity matches exactly and source order decides. Alphas are unchanged; only the hue moves, to a scrim derived from the hero ground. -------------------------------------------------------------------------- */ @supports (color: color-mix(in srgb, red, blue)) { :root, :root[data-mode] { --x-scrim: color-mix(in srgb, var(--x-head) 30%, black); } /* Hero photo tint — hotel and flight funnels */ :root .hero::after { background: linear-gradient(110deg, color-mix(in srgb, var(--x-scrim) 74%, transparent) 0%, color-mix(in srgb, var(--x-scrim) 44%, transparent) 46%, color-mix(in srgb, var(--x-scrim) 18%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--x-scrim) 10%, transparent), color-mix(in srgb, var(--x-scrim) 58%, transparent)); } /* Search panel over the hero */ :root .searchbar { background: color-mix(in srgb, var(--x-scrim) 68%, transparent); } /* Image captions, gallery gradient, modal backdrop, room-card counter */ :root .media__cap { background: color-mix(in srgb, var(--x-scrim) 66%, transparent); } :root .media--grad::after { background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--x-scrim) 55%, transparent)); } :root .modal-backdrop { background: color-mix(in srgb, var(--x-scrim) 55%, transparent); } :root .rmc__count { background: color-mix(in srgb, var(--x-scrim) 72%, transparent); } /* IBE skin — the hotel's own booking engine (/hotel/ibe/search) */ :root[data-skin="ibe"] .ibe-searchbar { background: color-mix(in srgb, var(--x-scrim) 68%, transparent); } :root[data-skin="ibe"] .hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--x-scrim) 30%, transparent) 0%, color-mix(in srgb, var(--x-scrim) 24%, transparent) 42%, color-mix(in srgb, var(--x-scrim) 74%, transparent) 100%); } }