/* ========================================================================== css/theme11-v3.css - «آسمان» (v3): the third skin -------------------------------------------------------------------------- Every selector that restyles the site is prefixed html[data-ui="v3"]:not(#nope), so this file is inert in classic AND in v2. The switch is one attribute flip. WHAT THIS IS A clone of flytoday.ir/hotel's design language, applied to the agency panel, in both a light and a dark scheme. The palette, the shape language, the type scale and the card anatomy below were measured off the live site (computed styles, not eyeballed): brand / CTA #3662DB included / amenities #158554 price #116B46 scarcity #B12724 points #A16207 border #CBD5E1 ink ramp #0F172A #334155 #475569 (the Tailwind slate ramp) The two structural facts that make flytoday look like flytoday: 1. THERE ARE NO SHADOWS. 581 elements measured on their hotel page, every one box-shadow:none. Depth is a 1px #CBD5E1 border and nothing else. Shadows appear here only on things that genuinely float over the page - a dropdown, a modal, the datepicker - because those have no border to sit against. 2. IT IS IMAGE-FORWARD. A room is a card with a photograph on top, its amenities in green underneath, and a full-width pill CTA at the bottom. Not a table row with a price on the end. Their type is IRANYekanX - which is the font this panel already loads as `primary-font`. So v3 does NOT ship a face of its own; matching flytoday and matching the panel are the same thing here, and that is one less network request than the previous draft. STRUCTURE 0 switch 1 tokens 2 token bridge 3 neutraliser (generated) 4 base 5 chrome 6 primitives 7 search page 8 funnel 9 guest + user 10 widgets 11 motion / responsive 12 guards ========================================================================== */ /* ========================================================================== 0. THE SWITCH (unprefixed - lives in all three skins) -------------------------------------------------------------------------- theme11.css already styles .th11 and indicated state with [aria-pressed="true"], which is a lie on a three-state control. The button now carries data-th11-skin; these rules restore the dot and colour it per skin, so the control says which of the three you are in without reading. ========================================================================== */ .th11__ui[data-th11-skin] .th11__dot { opacity: 1; } .th11__ui[data-th11-skin="classic"] .th11__dot { opacity: .45; background: currentColor; } .th11__ui[data-th11-skin="v2"] .th11__dot { background: #06b183; box-shadow: 0 0 0 3px rgba(6,177,131,.22); } .th11__ui[data-th11-skin="v3"] .th11__dot { background: #3662db; box-shadow: 0 0 0 3px rgba(54,98,219,.26); } /* classic has no dark palette, so its scheme button is a no-op. */ html[data-ui="classic"] .th11__scheme { display: none; } /* ========================================================================== 1. TOKENS -------------------------------------------------------------------------- Light is flytoday's own palette, lifted value for value. Dark is not on their site - it is built here from the same language: the blue lifts to stay legible on a dark plane, the greens and ambers lift with it, and the 1px border becomes the lighter of two adjacent planes rather than a line. Contrast is checked against the surface each token actually sits on: ink >= 12:1, ink-2 >= 7:1, muted >= 4.6:1, and every fill that carries white label text >= 4.5:1. ========================================================================== */ html[data-ui="v3"]:not(#nope) { /* -- brand ---------------------------------------------------------- */ --v3-brand: #3662db; --v3-brand-2: #2c4fd8; /* hover / pressed */ --v3-brand-ink: #2c4fd8; /* brand TEXT on a light surface */ --v3-brand-soft: #eef3fd; --v3-brand-line: #c3d3f6; --v3-on-brand: #ffffff; /* -- what is included: amenities, refundable, "free transfer" -------- */ --v3-ok: #158554; --v3-ok-soft: #e7f5ef; --v3-ok-line: #b6e0cd; /* -- money ---------------------------------------------------------- */ --v3-price: #116b46; /* flytoday prices are green */ --v3-save: #158554; /* -- scarcity ------------------------------------------------------- */ --v3-urgent: #b12724; /* -- loyalty points ------------------------------------------------- */ --v3-gold: #a16207; --v3-gold-ink: #8a5206; --v3-gold-soft: #fef6e7; --v3-gold-line: #f0dca8; /* -- planes: white cards, 1px border, no shadow ---------------------- */ --v3-bg: #f4f6fa; --v3-bg-2: #ffffff; --v3-surface: #ffffff; --v3-surface-2: #f8fafc; --v3-surface-3: #eef2f7; --v3-line: #cbd5e1; --v3-line-2: #94a3b8; /* the navy the hero band is cut from */ --v3-navy: #0f2557; --v3-navy-2: #16336f; --v3-ink: #0f172a; --v3-ink-2: #334155; --v3-muted: #64748b; --v3-warn: #a16207; --v3-bad: #b12724; --v3-bad-soft: #fdecea; --v3-chip: #eef2f7; --v3-chip-ink: #334155; /* -- shape ---------------------------------------------------------- */ --v3-r-xs: 6px; --v3-r-sm: 8px; --v3-r: 12px; --v3-r-lg: 16px; --v3-r-xl: 20px; --v3-r-pill: 9999px; /* -- elevation: reserved for things that float, nothing else -------- */ --v3-sh-1: none; --v3-sh-2: 0 4px 16px rgba(15,23,42,.08); --v3-sh-3: 0 12px 40px rgba(15,23,42,.16); /* -- type: their scale, 16px base ----------------------------------- */ --v3-t-xs: .75rem; /* 12 - chips, micro labels */ --v3-t-sm: .875rem; /* 14 - secondary, amenities */ --v3-t-md: 1rem; /* 16 - body, room name */ --v3-t-lg: 1.125rem; /* 18 */ --v3-t-xl: 1.375rem; /* 22 - section heads */ --v3-t-2xl: 1.75rem; /* 28 - hotel name */ --v3-ease: cubic-bezier(.2,.7,.2,1); --v3-fast: .13s; --v3-mid: .2s; --v3-slow: .32s; color-scheme: light; } /* -- dark: the same language after sundown ----------------------------- */ html[data-ui="v3"]:not(#nope)[data-scheme="dark"] { --v3-brand: #4f7df2; --v3-brand-2: #6b93f6; --v3-brand-ink: #8fb0fa; /* brand TEXT must lift on dark */ --v3-brand-soft: #16233e; --v3-brand-line: #2c4468; --v3-on-brand: #ffffff; --v3-ok: #34d399; --v3-ok-soft: #0f2b21; --v3-ok-line: #1e5943; --v3-price: #34d399; --v3-save: #34d399; --v3-urgent: #f87171; --v3-gold: #fbbf24; --v3-gold-ink: #fbbf24; --v3-gold-soft: #2a2110; --v3-gold-line: #4a3a18; --v3-bg: #0b1220; --v3-bg-2: #0f1729; --v3-surface: #141d31; --v3-surface-2: #1a2438; --v3-surface-3: #22304a; --v3-line: #2a3752; --v3-line-2: #3c4d6b; --v3-navy: #0d1830; --v3-navy-2: #16233e; --v3-ink: #e8eef7; --v3-ink-2: #afc0d6; --v3-muted: #7c8fa8; --v3-warn: #fbbf24; --v3-bad: #f87171; --v3-bad-soft: #331a1a; --v3-chip: #1a2438; --v3-chip-ink: #c3d0e2; --v3-sh-1: none; --v3-sh-2: 0 4px 16px rgba(0,0,0,.45); --v3-sh-3: 0 12px 40px rgba(0,0,0,.6); color-scheme: dark; } /* ========================================================================== 2. THE TOKEN BRIDGE (+ the inherited inventory) -------------------------------------------------------------------------- booking-ui11.css declares --bk-* on .bk11; search11.css declares --s11-* on .asa-s11. Both sheets then consume them everywhere. Redefining them here - at higher specificity - repaints both wholesale, including every rule this file never mentions. What follows the bridge is v2's own neutraliser inventory, re-pointed at v3 tokens. It is kept because it covers the 18 inline