/* ========================================================================== WeVisit design tokens — issue #261 (WP1). Linked on every page BEFORE the page's own stylesheet(s), so any later rule wins over the base layer below. Authoring rules for this file: - Logical properties only (padding-inline, inset-inline-*, text-align: start). scripts/gen-ltr.py reads this file first and mirrors any physical property it finds into ltr.css. - No @layer and no @supports: gen-ltr.py skips every @ block other than @media, so a physical property inside one would never be mirrored. ========================================================================== */ :root { /* ---- Colour: brand ---- */ --wv-primary: #270442; --wv-primary-strong: #1C0133; --wv-primary-2: #3A0566; --wv-primary-300: #C9B9D8; --wv-primary-100: #E6DBF0; --wv-primary-50: #F3EDF8; --wv-accent: #F87B1B; /* fills, borders, icons — never text */ --wv-accent-hover: #E06A0A; --wv-accent-soft: #FFF1E6; --wv-accent-ink: #C2410C; /* orange as text on a light surface */ --wv-on-accent: #270442; /* text on an orange fill */ /* ---- Colour: text ---- */ --wv-text: #2C2C2C; --wv-text-2: #555555; --wv-text-muted: #6B6B6B; --wv-title: #324B51; --wv-on-primary: #FFFFFF; --wv-on-primary-muted: #C9B9D8; /* ---- Colour: surfaces and borders ---- */ --wv-surface: #FFFFFF; --wv-surface-soft: #FAFAFA; --wv-surface-warm: #FAF7F2; --wv-surface-app: #F4F6F9; --wv-border-subtle: #EEEEEE; --wv-border: #E0E0E0; --wv-border-input: #8C8C8C; /* ---- Colour: semantic (solid / soft / ink) ---- */ --wv-success: #15803D; --wv-success-soft: #DCFCE7; --wv-success-ink: #15803D; --wv-success-fill: #22C55E; /* dots and bars only, never under text */ --wv-warning: #FFC107; --wv-warning-soft: #FFF3CD; --wv-warning-ink: #92400E; --wv-danger: #DC2626; --wv-danger-soft: #FEE2E2; --wv-danger-ink: #B91C1C; --wv-info: #1D4ED8; --wv-info-soft: #DBEAFE; --wv-info-ink: #1D4ED8; /* ---- Colour: focus and scrim ---- */ --wv-focus: #3A0566; /* outer ring: dark */ --wv-focus-halo: #FFFFFF; /* inner ring: light */ --wv-scrim: rgba(20, 1, 42, .55); /* ---- Typography ---- */ --wv-ff: 'Almarai', 'Segoe UI', Tahoma, system-ui, sans-serif; --wv-fw-regular: 400; --wv-fw-bold: 700; --wv-fw-black: 800; --wv-num: tabular-nums; /* Fluid sizes: the first clamp() argument is the phone size, the last the desktop size. */ --wv-fs-display: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem); /* 34 → 56 */ --wv-fs-h1: clamp(1.75rem, 1.44rem + 1.33vw, 2.5rem); /* 28 → 40 */ --wv-fs-h2: clamp(1.5rem, 1.29rem + 0.88vw, 2rem); /* 24 → 32 */ --wv-fs-h3: clamp(1.25rem, 1.15rem + 0.44vw, 1.5rem); /* 20 → 24 */ --wv-fs-h4: clamp(1.0625rem, 1.04rem + 0.11vw, 1.125rem); /* 17 → 18 */ --wv-fs-body-lg: var(--wv-fs-h4); --wv-fs-body: 1rem; --wv-fs-label: 0.9375rem; --wv-fs-sm: 0.875rem; --wv-fs-meta: 0.8125rem; --wv-fs-xs: 0.75rem; --wv-lh-display: 1.25; --wv-lh-h1: 1.3; --wv-lh-h2: 1.35; --wv-lh-h3: 1.4; --wv-lh-h4: 1.45; --wv-lh-body-lg: 1.75; --wv-lh-body: 1.7; --wv-lh-label: 1.4; --wv-lh-sm: 1.5; --wv-lh-tight: 1.3; --wv-lh-normal: 1.7; /* ---- Spacing (4px base) ---- */ --wv-sp-1: 4px; --wv-sp-2: 8px; --wv-sp-3: 12px; --wv-sp-4: 16px; --wv-sp-5: 20px; --wv-sp-6: 24px; --wv-sp-7: 32px; --wv-sp-8: 40px; --wv-sp-9: 48px; --wv-sp-10: 64px; --wv-sp-11: 80px; --wv-section-y: clamp(48px, 6vw, 80px); /* ---- Radii ---- */ --wv-r-sm: 8px; --wv-r-md: 12px; --wv-r-lg: 16px; --wv-r-xl: 24px; --wv-r-pill: 999px; --wv-r-circle: 50%; /* ---- Shadows ---- */ --wv-sh-xs: 0 1px 2px rgba(39, 4, 66, .06); --wv-sh-sm: 0 2px 12px rgba(0, 0, 0, .05); --wv-sh-md: 0 8px 24px rgba(39, 4, 66, .12); --wv-sh-lg: 0 20px 60px rgba(0, 0, 0, .2); /* Decorative field-focus glow only — it is NOT the focus indicator (below 3:1 against white). The indicator is the two-tone :focus-visible rule below, which replaces this glow while it shows. */ --wv-sh-focus: 0 0 0 3px rgba(58, 5, 102, .35); /* ---- Widths ---- */ --wv-w-page: 1600px; --wv-w-content: 1200px; --wv-w-form: 560px; --wv-w-prose: 68ch; --wv-gutter: clamp(16px, 4vw, 40px); /* ---- Motion ---- */ --wv-t-fast: 150ms; --wv-t-base: 250ms; --wv-ease: ease; /* ---- Layers (z-index) ---- */ /* Issue #265: the controls a page lays over a map (the failure notice, «موقعي الحالي», the mobile preview card). They sit in the map wrapper beside the isolated .leaflet-container (rule below), so 20 puts them above the whole map and below every page layer. */ --wv-z-map-controls: 20; --wv-z-sticky: 100; --wv-z-dropdown: 200; --wv-z-action-bar: 300; --wv-z-floating: 400; --wv-z-drawer: 910; --wv-z-chatbot: 950; --wv-z-modal: 1010; --wv-z-modal-nested: 1020; --wv-z-popover: 1100; --wv-z-toast: 1200; /* Issue #262: the skip link (css/header.css) sits above every layer — it is the first tab stop and must never be covered. */ --wv-z-skip: 1300; /* ---- Legacy names (issue #261 PR-2) ---- The names the pages used before the tokens existed, defined once here as aliases. The :root blocks that used to define them (style.css, dashboard.css, destination-details.html) are deleted, not overridden: a later :root would win over this file. */ --primary: var(--wv-primary); --primary-dark: var(--wv-primary); --primary-light: var(--wv-primary-2); --secondary: var(--wv-accent); --title: var(--wv-title); --white: var(--wv-surface); --gray5: var(--wv-border); --text-muted: var(--wv-text-muted); --text-main: var(--wv-text); --bg-color: var(--wv-surface-soft); --bg: var(--wv-surface-app); --card-bg: var(--wv-surface); --border: var(--wv-border-subtle); --success: var(--wv-success); --card-shadow: 0 10px 40px rgba(0, 0, 0, .06); --border-radius: var(--wv-r-xl); --transition: all var(--wv-t-base) var(--wv-ease); } /* ========================================================================== Base layer ========================================================================== */ html, body { font-family: var(--wv-ff); } button, input, select, textarea { font-family: inherit; } /* Leaflet 1.9.4's stylesheet gives its panes and controls z-index values up to 1000 (the controls). isolation: isolate makes the map container its own stacking context, so those values order the map's layers among themselves and are not compared with the page's layer scale above. */ .leaflet-container { isolation: isolate; } /* Keyboard focus: one two-tone ring on every interactive element. A 2px light ring (the box-shadow, which fills the 2px outline-offset gap) sits inside a 3px dark ring (the outline). Whatever the colour behind the control, one of the two tones contrasts with it by at least 3.88:1 (the worst case, a surface of relative luminance about 0.22): the dark ring on light surfaces, the light ring on dark ones. No list of dark containers is needed. Specificity (0,1,0): the two :where() count 0, only :focus-visible counts. The !important declarations apply only in the :focus-visible state, so they override the inline and stylesheet `outline: none` exactly when a ring is required, and a mouse click on a button still draws none. While a control has the ring, the box-shadow replaces its own shadow, which returns when focus leaves. Any element carrying tabindex="-1" (a programmatic focus target, or a control deliberately taken out of the tab order) is excluded, native controls included; the second :where() keeps that exclusion at specificity 0. */ :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):where(:not([tabindex="-1"])):focus-visible { outline: 3px solid var(--wv-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px var(--wv-focus-halo) !important; } /* Controls inside a box with overflow: hidden that they fill or reach the edge of (everything in a .destination-card, the links of a slider slide, the dashboard sidebar's links in its scrolling list, the newsletter field, whose form is wider than the box at 375px): a ring drawn outside them is cut off by that box, so theirs is drawn inside instead, in the same two tones: a 3px light ring just inside the border (an inset box-shadow; 3px, not 2px, because anti-aliasing at rounded corners can take the outermost pixel) and the dark ring 3-6px in (a negative outline-offset). Same specificity (0,1,0) as the rule above; declared later, so it wins. */ :where(.destination-card a, .destination-card button, .splide__slide a, .sidebar-nav a, .newsletter-box input):where(:not([tabindex="-1"])):focus-visible { outline-offset: -6px !important; box-shadow: inset 0 0 0 3px var(--wv-focus-halo) !important; } /* ========================================================================== Buttons (issue #261 WP1 PR-3) One family: .wv-btn + one variant (--primary | --secondary | --tertiary | --danger | --danger-soft | --accent | --on-dark | --on-dark-outline), an optional size (--sm | --lg; md is the default), --block and --icon. The legacy class names are listed beside each .wv-btn selector, so the existing markup renders through this family with no markup edit. Their own rules in style.css and dash-pages.css carry no background, colour, border, padding, font, radius or shadow declaration; what stays there is layout (flex, margins), the .ev-btn.is-busy opacity, the focus outline list and .act-go.ok, a success fill this family has no variant for. That layout reaches only the pages that link the sheet: institutions.html links no dash-pages.css, so it keeps flex: 1 on its two modal buttons in its own