/* ===================================================================== Maccar Medical — design system "Calibrated" (base.css) Binding spec: DESIGN-DIRECTION.md (tokens §2.1–2.3, motion tokens §3.2–3.3, plates §2.5). Owned by WS1. Module CSS (layout, home, shop, quote, checkout, account, pages, payment) only CONSUMES these tokens — it never redefines them. Token names are frozen. Two rooms: Lab (paper white, default) and Studio (near-black; .theme-studio / .section--dark / .site-footer redeclare the semantic tokens). Blue = action only, teal = measurement graphics only. Gradients only as plate lighting. Radius 0 (surfaces) / 2px (controls) / 999px (count badges, switch). RTL: logical properties only (physical values only on lines marked "physical: photo space"). JS and CSS share one direction factor: --dir (1 / -1). ===================================================================== */ /* ---------------------------------------------------------------- Fonts (self-hosted, OFL — see assets/fonts/LICENSE-*.txt) Storefront: Mona Sans (variable 200–900, Latin + Latin-ext), IBM Plex Sans Arabic 400/600 (Arabic subset only), IBM Plex Mono 300/400. The admin keeps declaring IBM Plex Sans / Plex Mono 500 itself — never delete font files. */ @font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/mona-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/mona-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/mona-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/mona-sans-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched fallbacks (from @capsizecss/metrics 4.4.0: Mona Sans UPM 1000, asc 1090, desc -320, xWidthAvg 464; Arial UPM 2048, xWidthAvg 913; Plex Sans Arabic UPM 1000, asc 1085, desc -415, xWidthAvg 451; Tahoma UPM 2048, xWidthAvg 917) */ @font-face { font-family: "Mona Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 104.08%; ascent-override: 104.72%; descent-override: 30.75%; line-gap-override: 0%; unicode-range: U+0000-02FF, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Plex Arabic Fallback"; src: local("Tahoma"); size-adjust: 100.73%; ascent-override: 107.72%; descent-override: 41.20%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC; } /* Registered properties animated by "light-up" and "register" (§3.4) */ @property --light { syntax: ''; inherits: true; initial-value: 1; } @property --mk { syntax: ''; inherits: true; initial-value: 12px; } /* ---------------------------------------------------------------- Tokens */ :root { /* ===== LAB (default) — paper & plates (§2.1) */ --paper: #FFFFFF; /* page */ --paper-2: #F4F6F8; /* alternate sheet, table heads, hover rows, summary panels */ --paper-3: #ECEFF3; /* recessed: segmented controls, skeleton plates */ --plate-hi: #FAFBFC; /* studio plate — key light */ --plate: #F0F3F6; /* studio plate — body */ --plate-lo: #E7EBF0; /* studio plate — floor / falloff */ --rule: #DCE1E7; /* decorative hairlines (no contrast requirement) */ --rule-strong: #7E8A9B; /* control boundaries: 3.50:1 on paper, 3.23 on paper-2, 3.14 on plate */ --grid-line: rgba(13, 23, 38, .055); /* ===== LAB — ink */ --text: #0D1726; /* headings — 17.98:1 */ --text-body: #3A4658; /* body — 9.56:1 (8.58 on plate) */ --text-muted: #5B6678; /* meta — 5.81:1 paper, 5.36 paper-2, 5.21 plate, 5.03 paper-3 */ --text-faint: #7E8A9B; /* LARGE text ≥ 24 px and graphics only — 3.50:1 */ /* ===== Signal (logo royal blue) = action only */ --signal: #1F63E0; /* primary buttons, focus — 5.36:1; white on it 5.36:1 */ --signal-press: #1850BD; /* hover / pressed, inline link text — 7.19:1 */ --signal-tint: #EEF3FD; /* selected rows / options (text on it ≥ 6.46:1) */ --link: var(--signal-press); /* ===== Measure (logo teal) = annotation graphics only */ --measure: #0E8F9C; /* nodes, leader lines, scan line — NEVER body text */ --measure-text: #0A6E78; /* teal text — 5.98:1 paper, 5.52 paper-2, 5.37 plate */ --measure-logo: #15B3C3; /* logo only (2.54:1) */ /* ===== Semantic */ --success: #12795A; --success-bg: #EAF6F1; --success-border: #BFE3D5; --danger: #C2323C; --danger-bg: #FDEEEF; --danger-border: #F5C6CA; --warning: #A8620C; --warning-bg: #FDF5E6; --warning-border: #F1D9AE; /* ===== STUDIO (dark sections + footer) */ --s-bg: #0A0F17; --s-bg-2: #0F1622; --s-plate-hi: #1B2535; --s-plate: #131B27; --s-plate-lo: #0C121B; --s-rule: rgba(255, 255, 255, .10); --s-rule-strong: rgba(255, 255, 255, .40); /* control boundaries on dark — 3.81:1 */ --s-ink: #F2F5F8; /* 17.55:1 */ --s-ink-2: #B4BECB; /* 10.21:1 (9.20 on s-plate) */ --s-ink-3: #8792A3; /* 6.10:1 (5.50 on s-plate) */ --s-signal: #6F95F0; /* links on dark — 6.61:1 */ --s-measure: #3FD0DE; /* annotation graphics + teal text on dark — 10.32:1 */ /* ===== Light effects (the ONLY gradients allowed, on plates only) */ --key-light: rgba(255, 255, 255, .75); --s-key-light: rgba(160, 190, 255, .10); --shadow-contact: rgba(13, 23, 38, .22); --s-shadow-contact: rgba(0, 0, 0, .55); /* ===== Shape & depth */ --r-0: 0; /* plates, images, cards, sections, tables, drawers, modals, mega */ --r-1: 2px; /* buttons, inputs, chips, tooltips, notes, badges */ --r-pill: 999px; /* count badges and the motion switch only */ --elev-float: 0 0 0 1px var(--rule), 0 16px 40px -16px rgba(13, 23, 38, .20); /* dropdowns, popovers, drawers, modals */ /* ===== Type (§2.2) — fluid 360 → 1440 */ --font-sans: "Mona Sans", "Mona Sans Fallback", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-mega: clamp(2.75rem, 0.8333rem + 8.519vw, 8.5rem); /* 44 → 136, Plex Mono 300 */ --fs-hero: clamp(2.5rem, 1.5rem + 4.444vw, 5.5rem); /* 40 → 88 */ --fs-display: var(--fs-hero); --fs-h1: clamp(2.125rem, 1.5rem + 2.778vw, 4rem); /* 34 → 64 */ --fs-h2: clamp(1.75rem, 1.333rem + 1.852vw, 3rem); /* 28 → 48 */ --fs-h3: clamp(1.375rem, 1.208rem + 0.7407vw, 1.875rem); /* 22 → 30 */ --fs-h4: clamp(1.125rem, 1.062rem + 0.2778vw, 1.312rem); /* 18 → 21 */ --fs-figure: clamp(2rem, 1.5rem + 2.222vw, 3.5rem); /* 32 → 56, Plex Mono 300 */ --fs-lead: clamp(1.125rem, 1.042rem + 0.3704vw, 1.375rem); /* 18 → 22 */ --fs-body: clamp(1rem, 0.9792rem + 0.09259vw, 1.0625rem); /* 16 → 17 */ --fs-small: clamp(0.875rem, 0.8542rem + 0.09259vw, 0.9375rem);/* 14 → 15 */ --fs-data: clamp(0.75rem, 0.7292rem + 0.09259vw, 0.8125rem); /* 12 → 13, Plex Mono 400 */ --fs-label: clamp(0.6875rem, 0.6667rem + 0.09259vw, 0.75rem); /* 11 → 12, caps +0.14em */ /* weights / line-heights per role (Arabic overrides below) */ --fw-hero: 300; --fw-h1: 320; --fw-h2: 360; --fw-h3: 440; --fw-h4: 520; --fw-lead: 380; --fw-label: 560; --lh-hero: .98; --lh-h1: 1.02; --lh-h2: 1.08; --lh-h3: 1.2; --lh-h4: 1.3; --lh-lead: 1.5; --lh-body: 1.6; --lh-small: 1.5; --lh-label: 1.2; --tr-hero: -.035em; --tr-h1: -.03em; --tr-h2: -.024em; --tr-h3: -.014em; --tr-h4: -.006em; --tr-lead: -.006em; --tr-small: .005em; --tr-data: .02em; /* legacy type tokens (unchanged values) */ --fs-xs: .75rem; /* 12 */ --fs-sm: .875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.25rem; /* 20 */ --lh-tight: 1.1; --lh-snug: 1.3; --lh: 1.6; --tracking-tight: -.03em; --tracking-snug: -.014em; --tracking-caps: .14em; /* ===== Grid, spacing (§2.3) */ --container: 1440px; /* max content width */ --container-narrow: 760px; /* reading, forms */ --container-wide: 1680px; --gutter: clamp(1rem, 0.3333rem + 2.963vw, 3rem); /* 16 → 48; exactly 16 at 360 */ --col-gap: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem); /* 16 → 24 */ --space-section: clamp(4.5rem, 2.667rem + 8.148vw, 10rem); /* 72 → 160 */ --space-block: clamp(2.5rem, 1.5rem + 4.444vw, 5.5rem); /* 40 → 88 */ --space-head: clamp(3rem, 2.5rem + 2.222vw, 4.5rem); /* 48 → 72, title block → content */ --section-y: var(--space-section); /* legacy alias */ --header-h: 60px; --header-offset: 0px; /* set by app.js: visible height of the sticky header (72/60px or 0px when hidden) */ --cols: 4; --dir: 1; /* ===== Motion (§3.2, §3.3) — identical names in GSAP (motion.js CustomEase) */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* state changes */ --ease-precise: cubic-bezier(.16, 1, .3, 1); /* entrances, panels, sheets (expo-out) */ --ease-settle: cubic-bezier(.165, .84, .44, 1); /* images, plates, light-up (quart-out) */ --ease-measure: cubic-bezier(.65, 0, .35, 1); /* line drawing, rules, wipes, scan */ --ease-exit: cubic-bezier(.4, 0, 1, 1); /* leaving */ --ease-hover: cubic-bezier(.4, 0, .6, 1); /* colour / opacity hovers */ --ease: var(--ease-standard); --ease-out: var(--ease-precise); --ease-in-out: var(--ease-measure); /* legacy */ --t-press: 90ms; --t-hover: 160ms; --t-ui: 240ms; --t-panel: 360ms; --t-sheet: 520ms; --t-reveal: 720ms; --t-headline: 960ms; --t-draw: 1200ms; --dur-fast: var(--t-hover); --dur: var(--t-ui); --dur-slow: var(--t-panel); /* legacy */ /* ===== Layers */ --z-sticky: 40; --z-header: 50; --z-mega: 55; --z-drawer: 80; --z-modal: 90; --z-cookie: 95; --z-toast: 100; color-scheme: light; } /* Legacy tokens — keep module CSS working while it is migrated (§2.1). Same :root, right after the block above. */ :root { --bg: var(--paper); --bg-alt: var(--paper-2); --surface: var(--paper); --plate-strong: var(--plate-lo); --border: var(--rule); --border-strong: var(--rule-strong); --hairline: 1px solid var(--rule); --focus: var(--signal); --info: var(--signal-press); --info-bg: var(--signal-tint); --info-border: #BFD3FB; --sale: var(--danger); /* brand scale: 600/700/50 re-pointed, others unchanged */ --brand-50: #EEF3FD; --brand-100: #DFE9FD; --brand-200: #BFD3FB; --brand-300: #93B5F6; --brand-400: #5F90EE; --brand-500: #3877E6; --brand-600: #1F63E0; --brand-700: #1850BD; --brand-800: #173F93; --brand-900: #153372; --brand: var(--brand-600); /* teal: 600 stays #0E8F9C but is graphics-only from now on; 700 becomes the text teal */ --teal-50: #EBFAFB; --teal-100: #CDF1F4; --teal-200: #9EE3EA; --teal-300: #62D0DB; --teal-400: #2DBFCD; --teal-500: #15B3C3; --teal-600: #0E8F9C; --teal-700: #0A6E78; --teal: var(--teal-500); /* ink scale re-tuned to the new cool ramp */ --ink-50: #F4F6F8; --ink-100: #ECEFF3; --ink-150: #E7EBF0; --ink-200: #DCE1E7; --ink-300: #B9C2CD; --ink-400: #7E8A9B; --ink-500: #5B6678; --ink-600: #4A5567; --ink-700: #3A4658; --ink-800: #232F42; --ink-900: #0D1726; --ink-950: #0A0F17; /* shape */ --radius-xs: 2px; --radius-sm: 2px; --radius: 2px; --radius-lg: 0px; --radius-pill: 999px; --shadow-sm: none; --shadow: 0 0 0 1px var(--rule); --shadow-lg: var(--elev-float); } @media (min-width: 768px) { :root { --cols: 8; } } @media (min-width: 1024px) { :root { --cols: 12; } } @media (min-width: 1200px) { :root { --header-h: 72px; } } [dir="rtl"] { --dir: -1; } /* Arabic pages: Mona first, so Latin model names and digits match the EN pages; Arabic glyphs fall through to Plex Arabic. No tracking anywhere (it breaks joining), no uppercase, weights 400/600 only, more leading. */ :lang(ar) { --font-sans: "Mona Sans", "IBM Plex Sans Arabic", "Mona Sans Fallback", "Plex Arabic Fallback", Tahoma, Arial, sans-serif; /* Plex Mono has no Arabic glyphs: Arabic words that end up inside a mono run fall through to Plex Sans Arabic (never to a system monospace such as Courier New); Latin codes and digits stay Plex Mono */ --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", "Plex Arabic Fallback", Tahoma, ui-monospace, Menlo, Consolas, monospace; --fs-mega: clamp(2.375rem, 0.9167rem + 6.481vw, 6.75rem); /* 38 → 108; numerals stay Plex Mono */ --fs-hero: clamp(2.125rem, 1.333rem + 3.519vw, 4.5rem); /* 34 → 72 */ --fs-display: var(--fs-hero); --fs-h1: clamp(1.875rem, 1.375rem + 2.222vw, 3.375rem); /* 30 → 54 */ --fs-h2: clamp(1.625rem, 1.292rem + 1.481vw, 2.625rem); /* 26 → 42 */ --fs-h3: clamp(1.312rem, 1.167rem + 0.6481vw, 1.75rem); /* 21 → 28 */ --fs-body: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 → 18 */ --fs-small: 0.9375rem; /* 15 */ --fs-label: 0.8125rem; /* 13 */ --fw-hero: 400; --fw-h1: 400; --fw-h2: 400; --fw-h3: 600; --fw-h4: 600; --fw-lead: 400; --fw-label: 600; --lh-hero: 1.2; --lh-h1: 1.25; --lh-h2: 1.3; --lh-h3: 1.4; --lh-h4: 1.5; --lh-lead: 1.75; --lh-body: 1.8; --lh-small: 1.7; --lh-label: 1.4; --tr-hero: 0; --tr-h1: 0; --tr-h2: 0; --tr-h3: 0; --tr-h4: 0; --tr-lead: 0; --tr-small: 0; --tr-data: 0; --tracking-tight: 0; --tracking-snug: 0; --tracking-caps: 0; --lh: 1.8; --lh-snug: 1.45; --lh-tight: 1.3; } html { font-synthesis: none; } /* never faux-bold Arabic (only 400/600 exist) */ /* Studio scope (§2.1): the same markup works in both rooms */ .theme-studio, .section--dark, .site-footer { --bg: var(--s-bg); --bg-alt: var(--s-bg-2); --surface: var(--s-bg-2); --text: var(--s-ink); --text-body: var(--s-ink-2); --text-muted: var(--s-ink-3); --text-faint: var(--s-ink-3); --rule: var(--s-rule); --rule-strong: var(--s-rule-strong); --border: var(--s-rule); --border-strong: var(--s-rule-strong); --grid-line: rgba(255, 255, 255, .05); --link: var(--s-signal); --focus: #FFFFFF; --measure: var(--s-measure); --measure-text: var(--s-measure); background: var(--bg); color: var(--text-body); } /* prefers-contrast: more (§3.11) */ @media (prefers-contrast: more) { :root { --rule: #7E8A9B; --text-muted: var(--text-body); --grid-line: rgba(13, 23, 38, .15); } .plate, .empty, .sr-thumb { background: var(--plate) !important; } .plate--studio { background: var(--s-plate) !important; } } /* ---------------------------------------------------------------- Reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-offset) + 16px); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "kern" 1; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } body.is-locked { overflow: hidden; } img, svg, video, canvas, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } button:disabled { cursor: not-allowed; } p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4, h5, h6 { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } table { border-collapse: collapse; width: 100%; } fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; } summary { cursor: pointer; } [hidden] { display: none !important; } ::selection { background: var(--brand-100); color: var(--ink-950); } ::placeholder { color: var(--text-muted); opacity: 1; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); } abbr[title] { text-decoration: none; } address { font-style: normal; } strong, b { font-weight: 600; color: var(--text); } small { font-size: var(--fs-sm); } mark { background: var(--signal-tint); color: var(--text); border-radius: 0; padding: 0 1px; } :target { scroll-margin-top: calc(var(--header-offset) + 16px); } /* ---------------------------------------------------------------- Accessibility helpers */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; inset-inline-start: 16px; top: 12px; z-index: calc(var(--z-toast) + 1); padding: 10px 16px; background: var(--text); color: var(--paper); border-radius: var(--r-1); font-weight: 500; font-size: var(--fs-small); transform: translateY(-160%); transition: transform var(--t-ui) var(--ease-precise); } .skip-link:focus { transform: none; outline-color: var(--text); } /* ---------------------------------------------------------------- Icons (§2.6) — functional controls only */ .icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.25; vertical-align: middle; } .icon--sm { width: 16px; height: 16px; stroke-width: 1.5; } .icon--lg { width: 24px; height: 24px; } .icon--xl { width: 32px; height: 32px; stroke-width: 1.25; } .icon--long, .icon.icon-arrow-long { width: 16px; height: 8px; stroke-width: 1.5; } [dir="rtl"] .icon-flip { transform: scaleX(-1); } .icon-prev { transform: scaleX(-1); } [dir="rtl"] .icon-prev { transform: none; } /* ---------------------------------------------------------------- Typography */ h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display { color: var(--text); font-weight: var(--fw-h4); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); text-wrap: balance; } /* type scale (§2.2) — sizes, weights, leading and tracking come from the role tokens (Arabic overrides via :lang(ar)) */ .display, .hero-title { font-size: var(--fs-hero); font-weight: var(--fw-hero); line-height: var(--lh-hero); letter-spacing: var(--tr-hero); } h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); } h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); } h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); } p { text-wrap: pretty; } /* additive type utilities (§2.2) */ .caps { font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; } :lang(ar) .caps { text-transform: none; letter-spacing: 0; } .idx { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 400; line-height: 1.4; letter-spacing: var(--tr-data); color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; } .fig, .meta { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 400; line-height: 1.4; letter-spacing: var(--tr-data); color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; } .fig { max-width: 40ch; } /* Arabic (§2.2: Plex Sans Arabic 400/600 only): the mixed-text data utilities switch to the sans stack; only an inner (codes, digits, dates) keeps Plex Mono */ :lang(ar) :is(.fig, .meta, .idx-text, .callout-text, .tb-fact dt) { font-family: var(--font-sans); letter-spacing: 0; } :lang(ar) :is(.fig, .meta, .idx-text) :is(.mono, bdi.mono, time, [data-local-time]) { font-family: var(--font-mono); } .num-figure { font-family: var(--font-mono); font-size: var(--fs-figure); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums lining-nums; } .num-mega { font-family: var(--font-mono); font-size: var(--fs-mega); font-weight: 300; line-height: .9; letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums lining-nums; } :lang(ar) .num-mega { line-height: 1; } .lead { font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); color: var(--text-muted); max-width: 52ch; text-wrap: pretty; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .small { font-size: var(--fs-small); } .xsmall { font-size: var(--fs-xs); } .strong { font-weight: 600; color: var(--text); } /* eyebrow = caps label (the dash is gone, §6 #6) */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .eyebrow--plain, .eyebrow--muted { color: var(--text-muted); } .eyebrow--teal { color: var(--measure-text); } :lang(ar) .eyebrow { text-transform: none; letter-spacing: 0; } .mono, code, kbd, samp { font-family: var(--font-mono); font-size: .92em; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; } kbd { display: inline-block; min-width: 1.8em; padding: 0 5px; border: 1px solid var(--rule); border-radius: var(--r-1); background: transparent; font-size: 11px; line-height: 18px; text-align: center; color: var(--text-muted); } .tabular { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .text-start { text-align: start; } .text-end, .text-right { text-align: end; } .text-center { text-align: center; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ltr { direction: ltr; unicode-bidi: isolate; } /* phone numbers, SKUs inside Arabic text */ [dir="rtl"] .ltr { text-align: end; } .prose { color: var(--text-body); font-size: 1.0625rem; line-height: 1.65; max-width: 68ch; } :lang(ar) .prose { font-size: 1.125rem; line-height: 1.8; } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); margin-top: 1.8em; } .prose h3 { font-size: var(--fs-h4); font-weight: var(--fw-h4); margin-top: 1.6em; } .prose h4 { font-size: 1.0625rem; font-weight: 560; margin-top: 1.4em; } :lang(ar) .prose h4 { font-weight: 600; } .prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose a:hover { color: var(--text); } .prose ul, .prose ol { padding-inline-start: 1.4em; } .prose ul { list-style: none; } .prose ul > li { position: relative; } .prose ul > li::before { content: "–"; position: absolute; inset-inline-start: -1.2em; color: var(--text-faint); } .prose li + li { margin-top: .4em; } .prose ol li::marker { color: var(--text-faint); font-family: var(--font-mono); font-size: .9em; } .prose img { border-radius: 0; } .prose blockquote { border-inline-start: 1px solid var(--text); padding-inline-start: 24px; color: var(--text); font-size: var(--fs-h4); font-weight: 300; line-height: 1.45; } :lang(ar) .prose blockquote { font-weight: 400; } .prose table { font-size: var(--fs-small); border-top: 1px solid var(--text); } .prose th, .prose td { padding: 12px 16px 12px 0; padding-inline: 0 16px; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; } .prose th { color: var(--text-muted); font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; } :lang(ar) .prose th { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); } .prose hr { margin: 2em 0; } /* ---------------------------------------------------------------- Layout */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); } .container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); } .section { padding-block: var(--section-y); } .section--flush-top { padding-top: 0; } .section--alt { background: var(--paper-2); } .section--line { border-top: 1px solid var(--rule); } /* .section--dark = the Studio room (tokens redeclared in the Studio scope above); a hard cut, never a gradient */ .section--dark .eyebrow { color: var(--s-ink-3); } /* Title block (§2.3) — partials/section-head.php */ .section-head { position: relative; display: grid; gap: 16px; margin-bottom: var(--space-head); padding-top: 24px; } .section-head__rule { position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--rule); } .section-head--plain { padding-top: 0; } .section-head--plain .section-head__rule { display: none; } .section-head__idx { display: flex; align-items: baseline; gap: 12px; color: var(--text-muted); } .section-head__idx .idx { color: var(--text-muted); } .section-head__text { display: grid; gap: 24px; min-width: 0; } .section-head__text > p { color: var(--text-muted); font-size: var(--fs-lead); font-weight: var(--fw-lead); line-height: var(--lh-lead); max-width: 52ch; } .section-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .section-head__actions .meta { margin: 0; } @media (min-width: 1024px) { .section-head:not(.section-head--plain) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; } .section-head:not(.section-head--plain) .section-head__idx { grid-column: 1 / 3; padding-top: .55em; } .section-head:not(.section-head--plain) .section-head__text { grid-column: 3 / 10; } .section-head:not(.section-head--plain) .section-head__actions { grid-column: 10 / -1; justify-content: flex-end; align-self: end; } .section-head--plain { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; } .section-head--plain .section-head__text { max-width: 760px; } } .section-head--center .section-head__text > p { max-width: 60ch; } .grid { display: grid; gap: var(--grid-gap, 24px); } .grid-2, .grid-3, .grid-4 { display: grid; gap: var(--grid-gap, 24px); grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap, 12px); } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .row--top { align-items: flex-start; } .stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); } .stack--sm { --stack-gap: 8px; } .stack--lg { --stack-gap: 32px; } .spacer { flex: 1; } .divider { height: 1px; background: var(--rule); border: 0; margin: 24px 0; } /* Spacing utilities (8-pt) */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px !important; } .mt-2 { margin-top: 16px !important; } .mt-3 { margin-top: 24px !important; } .mt-4 { margin-top: 32px !important; } .mt-6 { margin-top: 48px !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px !important; } .mb-2 { margin-bottom: 16px !important; } .mb-3 { margin-bottom: 24px !important; } .mb-4 { margin-bottom: 32px !important; } .mb-6 { margin-bottom: 48px !important; } .w-full { width: 100%; } .hide-sm { display: none !important; } @media (min-width: 768px) { .hide-sm { display: revert !important; } .show-sm { display: none !important; } } @media (max-width: 1023.98px) { .hide-md-down { display: none !important; } } @media (min-width: 1024px) { .hide-lg { display: none !important; } } /* ---------------------------------------------------------------- Links (§2.8): the underline draws from the inline start, and retracts toward the inline end on leave */ .link { --ul-from: 0%; --ul-to: 100%; color: var(--link); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor 0 0) no-repeat var(--ul-to) 100% / 0% 1px; transition: background-size var(--t-panel) var(--ease-precise), color var(--t-hover) var(--ease-hover); } [dir="rtl"] .link { --ul-from: 100%; --ul-to: 0%; } .link:hover, .link:focus-visible { background-size: 100% 1px; background-position-x: var(--ul-from); } .link--muted { color: var(--text-body); } .link--muted:hover { color: var(--text); } .link-arrow { --ul-from: 0%; --ul-to: 100%; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: .875rem; font-weight: 500; line-height: 1.4; } [dir="rtl"] .link-arrow { --ul-from: 100%; --ul-to: 0%; } .link-arrow > span { background: linear-gradient(currentColor 0 0) no-repeat var(--ul-to) 100% / 0% 1px; padding-bottom: 2px; transition: background-size var(--t-panel) var(--ease-precise); } .link-arrow:hover > span, .link-arrow:focus-visible > span { background-size: 100% 1px; background-position-x: var(--ul-from); } .link-arrow .icon { width: 16px; height: 8px; stroke-width: 1.5; transition: transform var(--t-ui) var(--ease-precise); } .link-arrow .icon:not(.icon--long):not(.icon-arrow-long) { height: 16px; } .link-arrow:hover .icon { transform: translateX(4px); } [dir="rtl"] .link-arrow .icon-flip, [dir="rtl"] .link-arrow .icon:not(.icon-arrow-long) { transform: scaleX(-1); } [dir="rtl"] .link-arrow:hover .icon-flip, [dir="rtl"] .link-arrow:hover .icon:not(.icon-arrow-long) { transform: scaleX(-1) translateX(4px); } .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ---------------------------------------------------------------- Buttons (§2.8) 48 px, 2 px radius, Mona 15 / 500 (AR 600). One filled blue button per viewport. In Studio, primary is white. */ .btn { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--text); --btn-bg-h: var(--btn-bg); --btn-fg-h: var(--btn-fg); --btn-bd-h: var(--btn-bd); --wipe: transparent; --wipe-from: left; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--btn-bd); border-radius: var(--r-1); background: linear-gradient(var(--wipe) 0 0) no-repeat var(--wipe-from) / 0% 100%, var(--btn-bg); color: var(--btn-fg); font-size: .9375rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-align: center; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--t-hover) var(--ease-hover), background-size var(--t-panel) var(--ease-precise), border-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover), transform var(--t-press) var(--ease-standard), opacity var(--t-hover) var(--ease-hover); } [dir="rtl"] .btn { --wipe-from: right; } :lang(ar) .btn { font-weight: 600; } .btn:hover { background-color: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); } .btn:active { transform: scale(.98); } .btn .icon { width: 18px; height: 18px; } .btn .icon-arrow-long, .btn .icon--long { width: 16px; height: 8px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn--primary { --btn-bg: var(--signal); --btn-fg: #FFFFFF; --btn-bd: var(--signal); --btn-bg-h: var(--signal-press); --btn-bd-h: var(--signal-press); } /* secondary / outline: an ink fill wipes in from the inline start, the label turns paper 80 ms later */ .btn--secondary, .btn--outline { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--text); --wipe: var(--text); --btn-fg-h: var(--paper); } .btn--secondary:hover, .btn--outline:hover, .btn--outline-light:hover { background-size: 100% 100%; transition-delay: 0s, 0s, 0s, 80ms, 0s, 0s; } .btn--dark { --btn-bg: var(--text); --btn-fg: var(--paper); --btn-bd: var(--text); --btn-bg-h: #232F42; --btn-bd-h: #232F42; } .btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-body); --btn-bg-h: var(--paper-2); --btn-fg-h: var(--text); } .btn--light { --btn-bg: #FFFFFF; --btn-fg: #0D1726; --btn-bd: #FFFFFF; --btn-bg-h: #E7EBF0; --btn-bd-h: #E7EBF0; } .btn--outline-light { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-bd: var(--s-rule-strong); --wipe: #FFFFFF; --btn-fg-h: #0A0F17; --btn-bd-h: #FFFFFF; } .btn--danger { --btn-bg: var(--danger); --btn-fg: #FFFFFF; --btn-bd: var(--danger); --btn-bg-h: #A82830; --btn-bd-h: #A82830; } .btn--teal { --btn-bg: var(--measure-text); --btn-fg: #FFFFFF; --btn-bd: var(--measure-text); --btn-bg-h: #08585F; --btn-bd-h: #08585F; } .btn--link { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--link); --btn-fg-h: var(--link); padding-inline: 0; min-height: 44px; border-radius: 0; background: linear-gradient(currentColor 0 0) no-repeat var(--wipe-from) calc(100% - 12px) / 0% 1px; } .btn--link:hover { background-size: 100% 1px; } .btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; } .btn--sm .icon { width: 16px; height: 16px; } .btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; } .btn--block { display: flex; width: 100%; } .btn--icon { width: 48px; padding: 0; } .btn--icon.btn--sm { width: 40px; } .btn--icon.btn--lg { width: 56px; } .btn--pill { border-radius: var(--r-1); } /* renders exactly like .btn (§2.4) */ .btn .btn-arrow { transition: transform var(--t-ui) var(--ease-precise); } .btn:hover .btn-arrow { transform: translateX(4px); } [dir="rtl"] .btn .btn-arrow { transform: scaleX(-1); } [dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1) translateX(4px); } /* Studio: primary buttons are white with ink text (blue never fills a dark room) */ .theme-studio .btn--primary, .section--dark .btn--primary, .site-footer .btn--primary { --btn-bg: var(--s-ink); --btn-fg: var(--s-bg); --btn-bd: var(--s-ink); --btn-bg-h: #FFFFFF; --btn-bd-h: #FFFFFF; } .theme-studio .btn--secondary, .section--dark .btn--secondary, .theme-studio .btn--outline, .section--dark .btn--outline { --btn-bd: var(--s-rule-strong); --wipe: #FFFFFF; --btn-fg-h: #0A0F17; --btn-bd-h: #FFFFFF; } /* loading: label at 60 %, a 1 px indeterminate bar along the inner bottom edge (static when reduced) */ .btn.is-loading { pointer-events: none; overflow: hidden; } .btn.is-loading > * { opacity: .6; } .btn.is-loading::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 34%; height: 1px; background: currentColor; animation: mc-bar 1200ms linear infinite; } @keyframes mc-bar { from { transform: translateX(calc(-100% * var(--dir))); } to { transform: translateX(calc(300% * var(--dir))); } } /* done (Store.morph): same colours; the label cross-fades and a 16 px check draws */ .btn.is-done > [data-label] { animation: mc-xfade 240ms var(--ease-hover); } .btn.is-done::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; order: -1; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center / 16px no-repeat; clip-path: inset(0 100% 0 0); animation: mc-check 280ms var(--ease-precise) forwards; } [dir="rtl"] .btn.is-done::before { clip-path: inset(0 0 0 100%); } @keyframes mc-check { to { clip-path: inset(0); } } @keyframes mc-xfade { from { opacity: 0; } } .btn-group { display: flex; flex-wrap: wrap; gap: 12px; } @keyframes mc-spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------- Forms (§2.8) */ .field { display: grid; gap: 8px; margin-bottom: 20px; min-width: 0; } .field:last-child { margin-bottom: 0; } .label { display: block; font-size: .875rem; font-weight: 500; color: var(--text-body); line-height: 1.4; } .label .req, .req { color: var(--danger); margin-inline-start: 2px; } .label .optional { color: var(--text-muted); font-weight: 400; } .input, .select, .textarea { display: block; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper); color: var(--text); font-size: 1rem; line-height: 1.4; transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover); -webkit-appearance: none; appearance: none; } .form--doc .input, .form--doc .select { min-height: 52px; } .input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); } .input:disabled, .select:disabled, .textarea:disabled, .input[readonly] { background: var(--paper-2); color: var(--text-muted); } .input--sm, .select--sm { min-height: 40px; padding: 7px 12px; font-size: .875rem; } .textarea { min-height: 120px; resize: vertical; line-height: 1.55; } .select { padding-inline-end: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6678' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: calc(100% - 14px) center; /* physical: photo space — chevron glyph */ } [dir="rtl"] .select { background-position: 14px center; } /* physical: photo space */ input[type="number"].input { -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .input[type="tel"], .input[type="email"], .input[inputmode="numeric"], .input.ltr { direction: ltr; } [dir="rtl"] .input[type="tel"], [dir="rtl"] .input[type="email"] { text-align: end; } .field-hint { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; } .field-error { font-size: .8125rem; color: var(--danger); line-height: 1.5; display: flex; gap: 6px; align-items: flex-start; animation: mc-err 200ms var(--ease-precise); } .field-error::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(currentColor 0 0) center 3px / 1px 5px no-repeat, linear-gradient(currentColor 0 0) center 9px / 1px 1px no-repeat; } @keyframes mc-err { from { opacity: 0; transform: translateY(-4px); } } .has-error .input, .has-error .select, .has-error .textarea, .input.has-error, .select.has-error, .textarea.has-error { border-color: var(--danger); } .has-error .input:focus, .has-error .select:focus, .has-error .textarea:focus { box-shadow: 0 0 0 1px var(--danger); } .has-error .label { color: var(--danger); } .form-row { display: grid; gap: 0 16px; grid-template-columns: 1fr; } /* Every field in a row keeps its spacing (also when it is the last child) and does not stretch to the tallest cell. */ .form-row > .field { margin-bottom: 20px; align-self: start; } @media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; } .form-legal { font-size: .8125rem; color: var(--text-muted); line-height: 1.55; } .form-legal a { color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; } .input-group { display: flex; align-items: stretch; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper); transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); } .input-group:hover { border-color: var(--text-muted); } .input-group:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); } .input-group .input { border: 0; box-shadow: none !important; background: transparent; min-width: 0; flex: 1; } .input-group .btn { border-radius: 0; border: 0; margin: -1px; margin-inline-end: -1px; border-start-end-radius: var(--r-1); border-end-end-radius: var(--r-1); } .input-group-text { display: flex; align-items: center; padding: 0 12px; color: var(--text-muted); font-size: .875rem; white-space: nowrap; } .password-wrap { position: relative; } .password-wrap .input { padding-inline-end: 52px; } .password-toggle { position: absolute; top: 50%; inset-inline-end: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-muted); border-radius: var(--r-1); } .password-toggle:hover { color: var(--text); } .password-toggle .icon-hide { display: none; } .password-toggle.is-visible .icon-show { display: none; } .password-toggle.is-visible .icon-hide { display: block; } /* Checkbox / radio: 18 px box, 1 px --rule-strong; checked: --signal fill and a white check drawn in 160 ms */ .check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .875rem; line-height: 1.5; color: var(--text-body); position: relative; min-height: 24px; } .check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; } .check .box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper); display: grid; place-items: center; transition: background-color var(--t-hover) var(--ease-hover), border-color var(--t-hover) var(--ease-hover); } .check .box::after { content: ""; width: 12px; height: 12px; background: #FFFFFF; clip-path: inset(0 100% 0 0); transition: clip-path 160ms var(--ease-precise); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 6.2 4.8 9 10 3'/%3E%3C/svg%3E") center / 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 6.2 4.8 9 10 3'/%3E%3C/svg%3E") center / 12px no-repeat; } .check:hover .box { border-color: var(--text-muted); } .check input[type="radio"] + .box { border-radius: 50%; } .check input[type="radio"] + .box::after { width: 8px; height: 8px; border-radius: 50%; -webkit-mask: none; mask: none; clip-path: none; transform: scale(0); transition: transform 160ms var(--ease-precise); } .check input:checked + .box { background: var(--signal); border-color: var(--signal); } .check input:checked + .box::after { clip-path: inset(0); } .check input[type="radio"]:checked + .box::after { transform: scale(1); } .check input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; } .check input:disabled + .box { background: var(--paper-2); border-color: var(--rule); } .check a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .has-error .check .box { border-color: var(--danger); } .theme-studio .check .box, .section--dark .check .box, .site-footer .check .box { background: transparent; border-color: var(--s-rule-strong); } .theme-studio .check input:checked + .box, .section--dark .check input:checked + .box, .site-footer .check input:checked + .box { background: var(--s-ink); border-color: var(--s-ink); } .theme-studio .check .box::after, .section--dark .check .box::after, .site-footer .check .box::after { background: var(--s-bg); } /* Selectable card: */ .choice { position: relative; display: block; cursor: pointer; } .choice input { position: absolute; opacity: 0; pointer-events: none; } .choice-body { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--paper); transition: border-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); } .choice:hover .choice-body { border-color: var(--rule-strong); } .choice input:checked + .choice-body { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--paper); } .choice input:focus-visible + .choice-body { outline: 2px solid var(--focus); outline-offset: 2px; } .choice input:disabled + .choice-body { opacity: .55; cursor: not-allowed; } /* Quantity stepper:
(the digit rolls: app.js) */ .qty { display: inline-flex; align-items: stretch; height: 44px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); background: var(--paper); overflow: hidden; } .qty button { width: 44px; display: grid; place-items: center; color: var(--text-body); transition: color var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover); } .qty button:hover { color: var(--text); background: var(--paper-2); } .qty button:disabled, .qty button[aria-disabled="true"] { color: var(--text-faint); background: transparent; cursor: default; } .qty input { width: 48px; border: 0; border-inline: 1px solid var(--rule); text-align: center; font-family: var(--font-mono); font-size: .9375rem; font-variant-numeric: tabular-nums; background: transparent; color: var(--text); -moz-appearance: textfield; } .qty input:focus { outline: none; background: var(--signal-tint); } .qty--sm { height: 36px; } .qty--sm button { width: 36px; } .qty--sm input { width: 40px; font-size: .875rem; } .qty--lg { height: 48px; } .qty.is-rolling input { animation: mc-roll-in 200ms var(--ease-precise); } html.motion-reduced .qty.is-rolling input { animation: none; } /* ---------------------------------------------------------------- Note blocks, flags, status (§2.8) */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--info-border); border-radius: var(--r-1); background: var(--info-bg); color: var(--text-body); font-size: .875rem; line-height: 1.55; } .alert > .icon { width: 16px; height: 16px; stroke-width: 1.5; color: var(--info); margin-top: 2px; } .alert strong { color: var(--text); } .alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } .alert--success { background: var(--success-bg); border-color: var(--success-border); } .alert--success > .icon { color: var(--success); } .alert--error, .alert--danger { background: var(--danger-bg); border-color: var(--danger-border); } .alert--error > .icon, .alert--danger > .icon { color: var(--danger); } .alert--warning { background: var(--warning-bg); border-color: var(--warning-border); } .alert--warning > .icon { color: var(--warning); } .alert--info { background: var(--info-bg); border-color: var(--info-border); } .alert--neutral { background: var(--paper-2); border-color: var(--rule); } .alert--neutral > .icon { color: var(--text-muted); } .alert-body { flex: 1; min-width: 0; } .alert-title { display: block; font-weight: 600; color: var(--text); margin-bottom: 2px; } /* .badge = a mono flag: 20 px, 1 px inset ring, no fill (only --dark is filled) */ .badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-1); background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--text); font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } :lang(ar) .badge { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; } .badge .icon { width: 12px; height: 12px; stroke-width: 1.5; } .badge--brand { color: var(--signal-press); } .badge--teal { color: var(--measure-text); } .badge--sale, .badge--danger { color: var(--danger); } .badge--success { color: var(--success); } .badge--warning { color: var(--warning); } .badge--light { background: var(--paper); } .badge--outline { color: var(--text-body); } .badge--dark { background: var(--text); color: var(--paper); box-shadow: none; } /* .pill = status: an 8 px square in the status colour + 13 px text (colour is never the only signal) */ .pill { --pill-c: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0; border-radius: 0; background: none; color: var(--text-body); font-size: .8125rem; font-weight: 500; white-space: nowrap; } .pill::before { content: ""; width: 8px; height: 8px; border-radius: 0; background: var(--pill-c); flex-shrink: 0; } .pill--plain::before { display: none; } .pill--success { --pill-c: var(--success); } .pill--warning { --pill-c: var(--warning); } .pill--danger { --pill-c: var(--danger); } .pill--info, .pill--brand { --pill-c: var(--signal); } .pill--teal { --pill-c: var(--measure); } .pill--dark { --pill-c: var(--text); } .pill--muted { --pill-c: var(--rule-strong); color: var(--text-muted); } /* Count badge: 18 px ink pill, white mono 11 px; the digits roll on change (no ring, no bump) */ .count-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); overflow: hidden; background: var(--text); color: var(--paper); font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums lining-nums; } .count-badge--teal { background: var(--text); } .digit-roll { display: inline-grid; overflow: hidden; vertical-align: top; height: 1.2em; line-height: 1.2em; } .digit-roll > span { grid-area: 1 / 1; } .digit-roll .dr-old { animation: mc-roll-out 320ms var(--ease-precise) forwards; } .digit-roll .dr-new { animation: mc-roll-in 320ms var(--ease-precise) both; } .count-badge .digit-roll { height: 18px; line-height: 18px; } @keyframes mc-roll-out { to { transform: translateY(-100%); } } @keyframes mc-roll-in { from { transform: translateY(100%); } } /* Model-number chip (copy button) */ .model-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--text); font-family: var(--font-mono); font-size: .8125rem; transition: border-color var(--t-hover) var(--ease-hover); } .model-chip:hover { border-color: var(--rule-strong); } .model-chip .icon { width: 14px; height: 14px; color: var(--text-muted); } .model-chip.is-copied { border-color: var(--rule-strong); } /* ---------------------------------------------------------------- Prices (§2.8) */ .price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-variant-numeric: tabular-nums lining-nums; line-height: 1.25; } .price-now { color: var(--text); font-family: var(--font-mono); font-weight: 400; font-size: .9375rem; letter-spacing: 0; } .price-old { position: relative; color: var(--text-muted); font-family: var(--font-mono); font-size: .8125rem; text-decoration: line-through; text-decoration-thickness: 1px; } .price-off { color: var(--danger); font-family: var(--font-mono); font-size: .75rem; font-weight: 400; } .price-from { color: var(--text-muted); font-size: .75rem; font-weight: 400; } .price-note { display: block; width: 100%; color: var(--text-muted); font-size: .75rem; font-weight: 400; } .price-quote { color: var(--text-muted); font-weight: 400; font-size: .875rem; } .price--lg .price-now { font-size: 1.75rem; } .price--lg .price-quote { font-size: var(--fs-h4); } /* ---------------------------------------------------------------- Cards (§2.8): hairline, radius 0, no shadow */ .card { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: 0; padding: clamp(20px, 2vw + 8px, 32px); } .card--flat { border-color: transparent; background: var(--paper-2); } .card--plate { background: var(--plate); border-color: transparent; } .card--shadow { border-color: transparent; box-shadow: 0 0 0 1px var(--rule); } .card--link { transition: border-color var(--t-hover) var(--ease-hover); } .card--link:hover { border-color: var(--rule-strong); box-shadow: none; } .card-title { font-size: var(--fs-h4); font-weight: var(--fw-h4); color: var(--text); margin-bottom: 8px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } /* Specimen plate (§2.5) — rendered by partials/plate.php, which sets --plate-ratio, --plate-r, --iw, --ih, --off-x, --pad-b, --bw and --lie-h through a Design::vars() class (the CSP allows no style=""). */ .plate { --floor: 11%; --fill-w: 82%; --fill-h: .78; --plate-r: 1; position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: 0; background: radial-gradient(70% 55% at 50% 22%, rgb(255 255 255 / calc(.75 * var(--light))) 0%, transparent 70%), radial-gradient(130% 100% at 50% 30%, var(--plate-hi) 0%, var(--plate) 52%, var(--plate-lo) 100%); } .plate--alpha, .plate--white, .plate--other, .plate--empty { aspect-ratio: var(--plate-ratio, 1 / 1); } /* object box: never upscaled (cap = intrinsic ÷ 1.5), fits the plate's height too */ .plate-obj { position: absolute; inset-inline: 0; bottom: var(--floor); margin-inline: auto; z-index: 1; display: block; width: min(var(--fill-w), calc(var(--iw) * 1px / 1.5), calc(var(--fill-h) * var(--iw) / var(--ih) / var(--plate-r) * 100%)); aspect-ratio: var(--iw) / var(--ih); } .plate-obj > img { display: block; width: 100%; height: 100%; object-fit: contain; translate: calc(var(--off-x, 0) * -100%) calc(var(--pad-b, 0) * 100%); } /* physical: photo space — centres the object and rests its real bottom on the floor */ .plate-obj > img.plate-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 480ms var(--ease-hover); } .plate-obj > img.plate-alt:not([src]) { visibility: hidden; } .plate-shadow { /* contact shadow — sibling of .plate-obj, so it stays on the floor when the object lifts */ position: absolute; inset-inline: 0; margin-inline: auto; bottom: calc(var(--floor) - 2.2%); height: 4.5%; z-index: 0; display: block; width: calc(min(var(--fill-w), calc(var(--iw) * 1px / 1.5), calc(var(--fill-h) * var(--iw) / var(--ih) / var(--plate-r) * 100%)) * var(--bw, .8) * .9); background: radial-gradient(50% 50% at 50% 50%, var(--shadow-contact) 0%, rgb(13 23 38 / .07) 55%, transparent 100%); transform-origin: 50% 50%; } /* stances */ .plate--lie { --fill-w: 86%; } .plate--lie .plate-obj { bottom: auto; top: 50%; translate: 0 -50%; } .plate--lie .plate-shadow { bottom: calc(50% - var(--lie-h, 10%) - 3%); height: 3%; opacity: .6; } /* white / grey backgrounds: centred, multiplied into the plate, no floor shadow */ .plate--white, .plate--other { --fill-w: 84%; --fill-h: .8; } /* the blend sits on .plate-obj: it is the stacking context (absolute + z-index, translate, GSAP transforms), so an img-level multiply would only blend against the transparent box; .plate keeps isolation: isolate as the group */ .plate--white .plate-obj, .plate--other .plate-obj { bottom: auto; top: 50%; translate: 0 -50%; mix-blend-mode: multiply; } .plate--white img, .plate--other img { translate: none; } .plate--white .plate-shadow, .plate--other .plate-shadow { display: none; } /* ratio helpers (legacy names) */ .plate--square { --plate-ratio: 1 / 1; --plate-r: 1; aspect-ratio: 1 / 1; } .plate--4x3 { --plate-ratio: 4 / 3; --plate-r: 1.3333; aspect-ratio: 4 / 3; } .plate--3x4 { --plate-ratio: 3 / 4; --plate-r: .75; aspect-ratio: 3 / 4; } .plate--wide { --plate-ratio: 16 / 10; --plate-r: 1.6; aspect-ratio: 16 / 10; } /* Legacy markup (
) until every owner migrates to partials/plate.php */ .plate:not(.plate--alpha):not(.plate--white):not(.plate--other):not(.plate--empty) { display: grid; place-items: center; } .plate > img, .plate > picture img { width: 100%; height: 100%; object-fit: contain; padding: 10%; } /* no global multiply (§6 #11): only plate--white / --other images multiply */ .plate--tight > img { padding: 4%; } /* Studio plate (inside Studio sections; alpha images only — the partial enforces it) */ .plate--studio { background: radial-gradient(40% 35% at 28% 18%, rgb(160 190 255 / calc(.10 * var(--light))), transparent 70%), /* physical: photo space — key light top-left, NOT mirrored */ linear-gradient(to top, rgb(255 255 255 / .035), transparent 30%), radial-gradient(90% 70% at 50% 20%, var(--s-plate-hi) 0%, var(--s-plate) 55%, var(--s-plate-lo) 100%); } .plate--studio .plate-shadow { background: radial-gradient(50% 50% at 50% 50%, var(--s-shadow-contact), transparent 100%); } .plate--studio::after { content: ""; position: absolute; inset-inline: 0; bottom: var(--floor); height: 1px; background: var(--s-rule); } /* floor line */ /* Registration marks (four corner brackets, inset 12 px, arms --mk long) */ .plate.has-marks::before { content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none; --c: var(--text-faint); background: linear-gradient(var(--c),var(--c)) 0 0 / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 0 / 1px var(--mk) no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / 1px var(--mk) no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / 1px var(--mk) no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / 1px var(--mk) no-repeat; } .plate--studio.has-marks::before { --c: var(--s-rule-strong); } .plate.has-marks { transition: --mk var(--t-ui) var(--ease-precise), --light var(--t-reveal) var(--ease-settle); } .plate.has-marks--hover { --mk: 0px; } .pcard:hover .plate.has-marks--hover, .pcard:focus-within .plate.has-marks--hover { --mk: 12px; } /* Edge ruler (hero plate, PDP main plate): minor ticks every 8 px, major every 40 px */ .plate.has-ruler::after { content: ""; position: absolute; inset-inline: 12px; bottom: 12px; height: 8px; z-index: 2; pointer-events: none; background: repeating-linear-gradient(to right, var(--text-faint) 0 1px, transparent 1px 40px) bottom / 100% 8px no-repeat, repeating-linear-gradient(to right, rgb(13 23 38 / .28) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; } [dir="rtl"] .plate.has-ruler::after { background: repeating-linear-gradient(to left, var(--text-faint) 0 1px, transparent 1px 40px) bottom / 100% 8px no-repeat, repeating-linear-gradient(to left, rgb(13 23 38 / .28) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; } /* Specimen figure + title-block callouts (two facts on opposite plate corners) */ .specimen { position: relative; margin: 0; } .tb-callouts { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; } .tb-fact { position: absolute; display: grid; gap: 2px; max-width: 44%; padding-block-start: 16px; } .tb-fact::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 12px; background: var(--measure); } .tb-fact--start { top: 24px; inset-inline-start: 24px; } .tb-fact--end { bottom: 32px; inset-inline-end: 24px; text-align: end; } .tb-fact--end::before { inset-inline-start: auto; inset-inline-end: 0; } .tb-fact dt { color: var(--text-muted); } .tb-fact dd { margin: 0; font-size: var(--fs-data); color: var(--text); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; } /* Leader callouts — photo coordinates (physical left/top, never mirrored). The first row (label) sits on the leader; the value hangs below it. The label always sits OUTSIDE the object: .callouts is a size container (the object box), so the leader runs from the node past the object's real edge (bbox width --bw, centred by the plate) and the text starts at the end of the leader, reading away from the object. Alignment comes from data-side, never from the page direction. --lead-len is the minimum leader (section owners may tune it). app.js gives each label the room left to the plate edge (--room, the label wraps into it) and marks a callout .is-off when it still does not fit or collides with another. */ .callouts { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; container-type: size; } .callout { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); --lead-len: clamp(24px, 2.5vw, 40px); --lead-gap: 16px; } /* physical: photo space */ .callout[data-side="right"] { --lead: max(var(--lead-len), calc((.5 + var(--bw, 1) / 2 - var(--x)) * 100cqw + var(--lead-gap))); } .callout[data-side="left"] { --lead: max(var(--lead-len), calc((var(--x) - .5 + var(--bw, 1) / 2) * 100cqw + var(--lead-gap))); } .callout-node { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--measure); } /* physical: photo space */ .callout-node::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--measure); opacity: .35; } .callout-num { display: none; } .callout-line { position: absolute; top: 0; height: 1px; width: var(--lead, var(--lead-len)); background: var(--measure); } .callout-line::after { content: ""; position: absolute; top: -2px; width: 1px; height: 5px; background: var(--measure); } /* end tick */ .callout[data-side="right"] .callout-line { left: 6px; transform-origin: 0 50%; } /* physical: photo space */ .callout[data-side="right"] .callout-line::after { right: 0; } /* physical: photo space */ .callout[data-side="left"] .callout-line { right: 6px; transform-origin: 100% 50%; } /* physical: photo space */ .callout[data-side="left"] .callout-line::after { left: 0; } /* physical: photo space */ .callout-text { position: absolute; top: -9px; display: grid; gap: 2px; width: max-content; max-width: var(--room, none); color: var(--text); font-size: var(--fs-label); line-height: 1.35; } /* --room: space left to the plate edge (app.js); the label wraps into it */ .callout-label { text-wrap: balance; } .callout-value { white-space: nowrap; } /* codes and units never break */ .callout[data-side="right"] .callout-text { left: calc(var(--lead, var(--lead-len)) + 10px); justify-items: left; text-align: left; } /* physical: photo space */ .callout[data-side="left"] .callout-text { right: calc(var(--lead, var(--lead-len)) + 10px); justify-items: right; text-align: right; } /* physical: photo space */ .callout-label { font-weight: var(--fw-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } :lang(ar) .callout-label { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .8125rem; } .callout-value { font-size: var(--fs-data); color: var(--text); font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; } .callout-legend { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--fs-small); } .callout-legend li { display: flex; gap: 10px; align-items: baseline; } .callout-legend .callout-label { font-size: var(--fs-label); } .callout-legend .callout-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--measure); font-size: 11px; flex-shrink: 0; } @media (min-width: 768px) { .callout-legend { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 767.98px) { .callout-line, .callout-text { display: none; } .callout-node { left: -10px; top: -10px; width: 20px; height: 20px; background: var(--paper); border: 1px solid var(--measure); display: grid; place-items: center; } /* physical: photo space */ .callout-node::after { display: none; } .callout-num { display: block; font-size: 11px; line-height: 1; color: var(--text); } } /* a callout whose label cannot fit between the object and the plate edge, or collides with another (app.js), steps aside (kept in layout so it can be measured again on resize); the facts stay readable in the visually hidden legend */ .callout.is-off { visibility: hidden; } /* Lazy images (never LCP): the plate colour shows first, the image fades in on load (app.js adds .is-loaded) */ html.js .plate-obj > img[loading="lazy"]:not(.is-loaded) { opacity: 0; } html.js .plate-obj > img[loading="lazy"] { transition: opacity 320ms var(--ease-hover); } html.js:not(.motion-ready) .plate-obj > img[loading="lazy"] { animation: mc-failsafe 0s 2s forwards; } /* PDP first image morph target (§3.10) */ html.motion-ok:not(.motion-lite) .vt-specimen { view-transition-name: specimen; } /* Grid sheet utility (§2.3) and visible sheet frame (§2.3; home hero, About hero, 404 only) */ .sheet { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); } .sheet-frame { position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--rule); } @media (min-width: 768px) { .sheet-frame { background: repeating-linear-gradient(to right, transparent 0 calc(100% / 12 - 1px), var(--grid-line) calc(100% / 12 - 1px) calc(100% / 12)); } } .section--tight { padding-block: clamp(3rem, 2rem + 4.444vw, 6rem); } /* Native rails (§3.8; app.js Store.rail) */ .rail-track { --rail-w: 80%; display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-w); gap: var(--col-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rail-track::-webkit-scrollbar { display: none; } .rail-cell { scroll-snap-align: start; min-width: 0; } @media (min-width: 768px) { .rail-track { --rail-w: calc((100% - var(--col-gap)) / 2.3); } } @media (min-width: 1024px) { .rail-track { --rail-w: calc((100% - 3 * var(--col-gap)) / 3.5); } } @media (pointer: fine) { .rail-track.is-draggable { cursor: grab; } .rail-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } } .ruler { position: relative; height: 8px; margin-top: 24px; background: linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat, repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 40px) bottom / 100% 8px no-repeat, repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; } [dir="rtl"] .ruler { background: linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat, repeating-linear-gradient(to left, var(--rule-strong) 0 1px, transparent 1px 40px) bottom / 100% 8px no-repeat, repeating-linear-gradient(to left, var(--rule) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; } .ruler__indicator { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: calc(var(--rail-vis, .25) * 100%); background: var(--text); transform: translateX(calc(var(--rail-pos, 0) * (100% / var(--rail-vis, .25) - 100%) * var(--dir))); transition: width var(--t-ui) var(--ease-precise); } [data-rail-prev], [data-rail-next] { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: var(--r-1); color: var(--text); transition: border-color var(--t-hover) var(--ease-hover), opacity var(--t-hover) var(--ease-hover); } [data-rail-prev]:hover:not(:disabled), [data-rail-next]:hover:not(:disabled) { border-color: var(--text); } [data-rail-prev]:disabled, [data-rail-next]:disabled { opacity: .35; } /* Live clocks ([data-local-time], app.js) */ [data-local-time] { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; } /* "Added" popover (§4.6; app.js Store.added) */ .added-pop { position: fixed; z-index: var(--z-toast); top: calc(var(--header-offset, 0px) + 8px); inset-inline-end: var(--gutter); width: min(360px, calc(100vw - 32px)); background: var(--paper); box-shadow: var(--elev-float); border-radius: 0; padding: 20px; color: var(--text-body); opacity: 0; transform: translateY(-8px); transition: opacity var(--t-ui) var(--ease-precise), transform var(--t-ui) var(--ease-precise); } .added-pop.is-in { opacity: 1; transform: none; } .added-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .added-pop__close { display: grid; place-items: center; width: 44px; height: 44px; margin: -12px; margin-inline-end: -12px; color: var(--text-muted); } .added-pop__close:hover { color: var(--text); } .added-pop__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; } .added-pop__thumb { width: 56px; height: 56px; background: var(--plate); display: grid; place-items: center; overflow: hidden; } .added-pop__thumb img { width: 84%; height: 84%; object-fit: contain; } .added-pop__name { color: var(--text); font-size: .9375rem; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* actions: the same stack on cart and quotation (and in Arabic): full-width button, then the text link, one size */ .added-pop__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; } .added-pop__actions .btn { width: 100%; justify-content: center; } .added-pop__actions .link { justify-self: center; padding-block: 3px; font-size: .875rem; line-height: 1.4; } @media (max-width: 767.98px) { .added-pop { top: auto; bottom: 0; inset-inline: 0; width: auto; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); touch-action: pan-x; } .added-pop.is-in { transform: none; } } /* ---------------------------------------------------------------- Tables & definition lists (§2.8) */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 0; border-top: 1px solid var(--text); border-radius: 0; } .table { width: 100%; font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; } .table-wrap > .table { border-top: 0; } .table:not(.table-wrap > .table) { border-top: 1px solid var(--text); } .table th, .table td { padding: 12px 16px; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--rule); } .table th:first-child, .table td:first-child { padding-inline-start: 0; } .table th:last-child, .table td:last-child { padding-inline-end: 0; } .table thead th { background: none; color: var(--text-muted); font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; } :lang(ar) .table thead th { text-transform: none; letter-spacing: 0; font-size: .8125rem; } .table tbody tr { transition: background-color var(--t-hover) var(--ease-hover); } .table tbody tr:hover td { background: var(--paper-2); } .table .num { text-align: end; white-space: nowrap; font-family: var(--font-mono); } .table--plain thead th { background: transparent; } .table--compact th, .table--compact td { padding-block: 8px; } .dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; border-top: 1px solid var(--rule); } .dl dt, .dl dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); } .dl dt { color: var(--text-muted); font-size: .875rem; padding-inline-end: 16px; } .dl dd { color: var(--text); font-size: .9375rem; font-weight: 400; overflow-wrap: anywhere; } .dl .mono { font-weight: 400; } .dl--stacked { grid-template-columns: 1fr; } .dl--stacked dt { padding-bottom: 0; border-bottom: 0; } /* ---------------------------------------------------------------- Breadcrumb (mono 12 px, "/" separators) & pagination */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font-mono); font-size: var(--fs-data); letter-spacing: var(--tr-data); color: var(--text-muted); } :lang(ar) .breadcrumb { font-family: var(--font-sans); font-size: .8125rem; } .breadcrumb ol { display: contents; } .breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .breadcrumb-sep { color: var(--text-faint); } .breadcrumb a { color: var(--text-muted); display: inline-flex; align-items: center; min-height: 24px; transition: color var(--t-hover) var(--ease-hover); } .breadcrumb a:hover { color: var(--text); } .breadcrumb [aria-current] { color: var(--text); text-align: match-parent; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb-back { display: none; } /* phones: one line, "← parent" (breadcrumbs.php marks the parent); short trails stay on one ellipsised line */ @media (max-width: 767.98px) { .breadcrumb { flex-wrap: nowrap; min-width: 0; } .breadcrumb li:last-child { min-width: 0; flex: 0 1 auto; } .breadcrumb--deep li:not(.breadcrumb-parent) { display: none; } .breadcrumb--deep .breadcrumb-parent { min-width: 0; } .breadcrumb--deep .breadcrumb-parent .breadcrumb-sep { display: none; } .breadcrumb--deep .breadcrumb-parent a { display: block; max-width: 100%; min-height: 44px; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb-back { display: inline-block; margin-inline-end: 8px; vertical-align: middle; line-height: 0; } .breadcrumb-back .icon { width: 16px; height: 16px; stroke-width: 1.5; } } .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 48px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--r-1); font-size: .875rem; color: var(--text-body); transition: border-color var(--t-hover) var(--ease-hover); } .pagination a:hover { border-color: var(--rule-strong); color: var(--text); } .pagination [aria-current="page"] { border-color: var(--text); color: var(--text); background: transparent; } .pagination .is-disabled { color: var(--text-faint); pointer-events: none; } .pagination .gap { border: 0; min-width: 24px; color: var(--text-faint); } /* ---------------------------------------------------------------- Empty states (an empty plate with marks) & skeletons */ .empty { display: grid; justify-items: center; gap: 16px; padding: clamp(40px, 6vw, 80px) 24px; text-align: center; border: 0; border-radius: 0; background: radial-gradient(130% 100% at 50% 30%, var(--plate-hi) 0%, var(--plate) 52%, var(--plate-lo) 100%); position: relative; } .empty::before { content: ""; position: absolute; inset: 12px; pointer-events: none; --c: var(--text-faint); --mk: 12px; background: linear-gradient(var(--c),var(--c)) 0 0 / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 0 / 1px var(--mk) no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / 1px var(--mk) no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / 1px var(--mk) no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / var(--mk) 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / 1px var(--mk) no-repeat; } .empty > .icon, .empty-icon { display: none; } .empty h2, .empty h3, .empty-title { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); color: var(--text); } .empty p { color: var(--text-muted); max-width: 46ch; font-size: .9375rem; } .empty .btn-group { justify-content: center; margin-top: 8px; } .skeleton { position: relative; overflow: hidden; background: var(--paper-3); border-radius: 0; color: transparent !important; animation: mc-pulse 1200ms ease-in-out infinite alternate; } .skeleton::after { content: none; } @keyframes mc-pulse { from { opacity: 1; } to { opacity: .6; } } html.motion-reduced .skeleton { animation: none; } /* ---------------------------------------------------------------- Tabs (one sliding 1 px indicator) & accordion */ .tabs { position: relative; display: flex; gap: 24px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: color var(--t-hover) var(--ease-hover); } .tab::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: var(--text); transform: scaleX(0); transition: transform 280ms var(--ease-precise); } .tabs.has-indicator .tab::after { display: none; } .tab:hover { color: var(--text); } .tab[aria-selected="true"], .tab.is-active { color: var(--text); } .tab[aria-selected="true"]::after, .tab.is-active::after { transform: none; } .tab-indicator { position: absolute; inset-inline-start: 0; bottom: 0; height: 1px; width: var(--tab-w, 0px); background: var(--text); transform: translateX(var(--tab-x, 0px)); transition: transform 280ms var(--ease-precise), width 280ms var(--ease-precise); pointer-events: none; } /* Overflowing tab rails (.tabs, .pg-tabs, any [data-fade-rail]): app.js sets data-fade="s" / "e" / "s e" while content is hidden at the inline start / end; the hidden side fades out (mirrored in RTL) as the scroll cue */ [data-fade] { --fade-s: 0px; --fade-e: 0px; -webkit-mask-image: linear-gradient(to var(--fade-to, right), transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%); mask-image: linear-gradient(to var(--fade-to, right), transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%); } [dir="rtl"] [data-fade] { --fade-to: left; } [data-fade~="s"] { --fade-s: 40px; } [data-fade~="e"] { --fade-e: 56px; } .tab-count { margin-inline-start: 6px; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 400; font-variant-numeric: tabular-nums; } .tab-panel { padding-top: 32px; } .accordion { border-top: 1px solid var(--rule); } .accordion-item { border-bottom: 1px solid var(--rule); } .accordion-item > summary, .accordion-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 12px 0; list-style: none; font-size: 1rem; font-weight: 500; color: var(--text); text-align: start; cursor: pointer; } .accordion-item > summary::-webkit-details-marker { display: none; } /* 12 px hairline plus / minus: the vertical bar rotates 90° */ .accordion-item > summary::before, .accordion-head::before, .accordion-item > summary::after, .accordion-head::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; width: 12px; height: 1px; background: var(--text-body); } .accordion-item > summary::after, .accordion-head::after { transform: rotate(90deg); transition: transform var(--t-ui) var(--ease-precise); } .accordion-item[open] > summary::after, .accordion-head[aria-expanded="true"]::after { transform: rotate(0deg); } .accordion-item > summary, .accordion-head { padding-inline-end: 28px; } .accordion-item > summary:hover, .accordion-head:hover { color: var(--text); } .accordion-body { padding: 0 0 24px; color: var(--text-body); font-size: .9375rem; line-height: 1.7; } html.motion-ok .accordion-item[open] > .accordion-body { animation: mc-acc 360ms var(--ease-standard); } @keyframes mc-acc { from { opacity: 0; transform: translateY(-4px); } } /* grid-rows accordion for JS-driven panels:
…
*/ .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease-standard); } .acc-panel > * { overflow: hidden; min-height: 0; } .acc-panel.is-open { grid-template-rows: 1fr; } /* ---------------------------------------------------------------- Toasts (ink, 2 px; bottom inline-end; mobile bottom centre) */ .toasts { position: fixed; z-index: var(--z-toast); inset-inline-end: 24px; bottom: 24px; display: grid; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--text); color: #FFFFFF; border-radius: var(--r-1); box-shadow: var(--elev-float); font-size: .875rem; line-height: 1.5; pointer-events: auto; animation: mc-toast-in var(--t-ui) var(--ease-precise); } .toast > .icon { width: 16px; height: 16px; stroke-width: 1.5; flex-shrink: 0; margin-top: 2px; color: var(--s-ink-3); } .toast--success > .icon { color: var(--s-measure); } .toast--error > .icon { color: #FF8A91; } .toast-text { flex: 1; min-width: 0; } .toast-action { color: #FFFFFF; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .toast-close { margin: -12px; margin-inline-start: 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--s-ink-3); flex-shrink: 0; } .toast-close:hover { color: #FFFFFF; } .toast-close .icon { width: 16px; height: 16px; } .toast :focus-visible { outline-color: #FFFFFF; } .toast.is-leaving { animation: mc-toast-out 200ms var(--ease-exit) forwards; } @keyframes mc-toast-in { from { opacity: 0; transform: translateY(12px); } } @keyframes mc-toast-out { to { opacity: 0; transform: translateY(8px); } } @media (max-width: 639.98px) { .toasts { inset-inline: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom)); } } /* ---------------------------------------------------------------- Modal & drawer Drawers open from the inline end (right in English, left in Arabic): 520 ms precise in, 220 ms exit out. */ .modal, .drawer { position: fixed; inset: 0; z-index: var(--z-modal); } .drawer { z-index: var(--z-drawer); } .modal-backdrop, .drawer-backdrop { position: absolute; inset: 0; background: rgb(10 15 23 / .32); opacity: 0; transition: opacity var(--t-ui) var(--ease-hover); } .modal.is-open .modal-backdrop, .drawer.is-open .drawer-backdrop { opacity: 1; } .modal { display: grid; place-items: center; padding: 16px; overflow-y: auto; } .modal-panel { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--paper); border-radius: 0; box-shadow: var(--elev-float); padding: clamp(24px, 3vw + 8px, 40px); opacity: 0; transform: translateY(12px); transition: opacity 220ms var(--ease-exit), transform 220ms var(--ease-exit); } .modal.is-open .modal-panel { opacity: 1; transform: none; transition: opacity var(--t-sheet) var(--ease-precise), transform var(--t-sheet) var(--ease-precise); } .modal--wide .modal-panel { width: min(1040px, 100%); } .modal--sm .modal-panel { width: min(420px, 100%); } .modal-head { margin-bottom: 24px; padding-inline-end: 44px; } .modal-head h2, .modal-title { font-size: var(--fs-h3); font-weight: var(--fw-h3); } .modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 32px; } .modal-close, .drawer-close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-1); color: var(--text-body); transition: color var(--t-hover) var(--ease-hover); } .modal-close:hover, .drawer-close:hover { color: var(--text); } .drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(480px, 100vw); background: var(--paper); box-shadow: var(--elev-float); display: flex; flex-direction: column; transform: translateX(calc(100% * var(--dir))); transition: transform 220ms var(--ease-exit); } .drawer--start .drawer-panel, .drawer--left .drawer-panel { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(calc(-100% * var(--dir))); } .drawer--wide .drawer-panel { width: min(560px, 100vw); } .drawer.is-open .drawer-panel { transform: none; transition: transform var(--t-sheet) var(--ease-precise); } .drawer-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding-block: 12px; padding-inline: 24px 12px; border-bottom: 1px solid var(--rule); } .drawer-head h2, .drawer-title { font-size: var(--fs-h4); font-weight: var(--fw-h4); color: var(--text); } .drawer-head .drawer-close { position: static; } .drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px; } .drawer-foot { padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--paper-2); } .drawer-empty { display: grid; justify-items: center; align-content: center; gap: 12px; height: 100%; padding: 40px 16px; text-align: center; color: var(--text-muted); } /* ---------------------------------------------------------------- Scroll reveal (motion.js §3.6) Tiers on (head script, before first paint): motion-ok | motion-ok motion-lite | motion-reduced. Content is never hidden from crawlers or no-JS visitors: these states apply only with html.motion-ok, and the fail-safe reveals everything after 2 s if motion.js never boots. A plate is never at opacity 0 (light-up only). */ html.motion-ok [data-reveal] { opacity: 0; transform: translateY(16px); } html.motion-ok [data-reveal="fade"] { transform: none; } html.motion-ok [data-reveal="plate"] { opacity: 1; transform: none; --light: .35; } html.motion-ok [data-reveal="rule"] { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; } html.motion-ok[dir="rtl"] [data-reveal="rule"] { transform-origin: 100% 50%; } html.motion-ok [data-reveal="marks"] { opacity: 1; transform: none; --mk: 0px; } html.motion-ok [data-reveal].is-in { opacity: 1; transform: none; --light: 1; transition: opacity var(--t-reveal) var(--ease-settle), transform var(--t-reveal) var(--ease-settle), --light var(--t-draw) var(--ease-settle); } html.motion-ok [data-reveal="rule"].is-in { transition: transform 900ms var(--ease-measure); } html.motion-ok [data-reveal="marks"].is-in { --mk: 12px; transition: --mk var(--t-ui) var(--ease-precise); } html.motion-ok:not(.motion-ready) [data-reveal] { animation: mc-failsafe 0s 2s forwards; } html.motion-ok:not(.motion-ready) [data-reveal="plate"] { animation-name: mc-failsafe-plate; } html.motion-ok:not(.motion-ready) [data-reveal="marks"] { animation-name: mc-failsafe-marks; } @keyframes mc-failsafe { to { opacity: 1; transform: none; } } @keyframes mc-failsafe-plate { to { --light: 1; } } @keyframes mc-failsafe-marks { to { --mk: 12px; } } /* Specimen card (pointer: fine): the object lifts, the shadow tightens, the marks draw (§3.7) */ @media (hover: hover) and (pointer: fine) { html:not(.motion-reduced) .pcard .plate-obj { transition: transform 360ms var(--ease-settle); } html:not(.motion-reduced) .pcard .plate-shadow { transition: transform 360ms var(--ease-settle), opacity 360ms var(--ease-settle); } html:not(.motion-reduced) .pcard:hover .plate-obj, html:not(.motion-reduced) .pcard:focus-within .plate-obj { transform: translateY(-6px); transition-duration: var(--t-reveal); } html:not(.motion-reduced) .pcard:hover .plate-shadow, html:not(.motion-reduced) .pcard:focus-within .plate-shadow { transform: scaleX(.92); opacity: .7; transition-duration: var(--t-reveal); } .pcard:hover .plate-alt[src], .pcard:focus-within .plate-alt[src] { opacity: 1; } } /* ---------------------------------------------------------------- Page transitions (§3.10; motion.js skips them per tier / origin) */ @view-transition { navigation: auto; } .site-header { view-transition-name: site-header; } ::view-transition-old(root) { animation: 180ms var(--ease-exit) both vt-out; } ::view-transition-new(root) { animation: 420ms var(--ease-precise) 60ms both vt-in; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(12px); } } ::view-transition-group(specimen) { animation-duration: 520ms; animation-timing-function: var(--ease-precise); } ::view-transition-old(specimen), ::view-transition-new(specimen) { height: 100%; object-fit: contain; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* reduced / lite keep the root snapshot (with nothing named on both pages Chrome skips the transition and logs an uncaught AbortError): the head script adds html.vt-off for these tiers, so the swap is instant */ html.motion-reduced .site-header, html.motion-lite .site-header { view-transition-name: none; } body.is-minimal, body.is-minimal .site-header { view-transition-name: none; } /* checkout / payment */ /* a transition the head script declines (not from a listing, reduced / lite motion): no animation, so it ends on the next frame without skipTransition() (Chrome logs every skip as an uncaught AbortError) */ html.vt-off::view-transition-group(*), html.vt-off::view-transition-image-pair(*), html.vt-off::view-transition-old(*), html.vt-off::view-transition-new(*) { animation: none !important; } /* ---------------------------------------------------------------- Reduced motion (OS setting or the footer switch: html.motion-reduced) Final states for rules, marks, callouts; only short opacity cross-fades remain. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.motion-ok [data-reveal] { opacity: 1 !important; transform: none !important; } } html.motion-reduced *, html.motion-reduced *::before, html.motion-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.motion-reduced [data-reveal] { opacity: 1 !important; transform: none !important; --light: 1; } html.motion-reduced [data-reveal="marks"] { --mk: 12px; } /* loops become static: the hairline loading bars sit still, digits swap without rolling */ html.motion-reduced .btn.is-loading::after, html.motion-reduced .search-busy::before { animation: none; transform: none; width: 100%; opacity: .5; } html.motion-reduced .digit-roll .dr-old { display: none; } html.motion-reduced .digit-roll .dr-new { animation: none; } @media (prefers-reduced-motion: reduce) { .btn.is-loading::after, .search-busy::before { animation: none !important; transform: none; width: 100%; opacity: .5; } .skeleton { animation: none; } } /* Sticky sub-bars follow the header (§4.1): position: sticky; top: 0 + this class. --header-offset is 72px / 60px while the header shows and 0px while it is hidden (app.js sets it at the start of each change). */ .follow-header { position: sticky; top: 0; transform: translateY(var(--header-offset)); transition: transform var(--t-panel) var(--ease-standard); } /* ---------------------------------------------------------------- Print */ @media print { .site-header, .site-footer, .announce, .toasts, .drawer, .modal, .skip-link, .cookie-banner, .no-print { display: none !important; } body { color: #000; background: #fff; } a { text-decoration: underline; } .container { max-width: none; padding: 0; } html.motion-ok [data-reveal] { opacity: 1 !important; transform: none !important; } } /* CSP utilities: the Content-Security-Policy allows no inline style="" attributes. Views print pct_class() ("pct-N" = --pct: N%) and bars / meters / progress tracks read var(--pct) for their width or height. */ .pct-0{--pct:0%}.pct-1{--pct:1%}.pct-2{--pct:2%}.pct-3{--pct:3%}.pct-4{--pct:4%}.pct-5{--pct:5%}.pct-6{--pct:6%}.pct-7{--pct:7%}.pct-8{--pct:8%}.pct-9{--pct:9%} .pct-10{--pct:10%}.pct-11{--pct:11%}.pct-12{--pct:12%}.pct-13{--pct:13%}.pct-14{--pct:14%}.pct-15{--pct:15%}.pct-16{--pct:16%}.pct-17{--pct:17%}.pct-18{--pct:18%}.pct-19{--pct:19%} .pct-20{--pct:20%}.pct-21{--pct:21%}.pct-22{--pct:22%}.pct-23{--pct:23%}.pct-24{--pct:24%}.pct-25{--pct:25%}.pct-26{--pct:26%}.pct-27{--pct:27%}.pct-28{--pct:28%}.pct-29{--pct:29%} .pct-30{--pct:30%}.pct-31{--pct:31%}.pct-32{--pct:32%}.pct-33{--pct:33%}.pct-34{--pct:34%}.pct-35{--pct:35%}.pct-36{--pct:36%}.pct-37{--pct:37%}.pct-38{--pct:38%}.pct-39{--pct:39%} .pct-40{--pct:40%}.pct-41{--pct:41%}.pct-42{--pct:42%}.pct-43{--pct:43%}.pct-44{--pct:44%}.pct-45{--pct:45%}.pct-46{--pct:46%}.pct-47{--pct:47%}.pct-48{--pct:48%}.pct-49{--pct:49%} .pct-50{--pct:50%}.pct-51{--pct:51%}.pct-52{--pct:52%}.pct-53{--pct:53%}.pct-54{--pct:54%}.pct-55{--pct:55%}.pct-56{--pct:56%}.pct-57{--pct:57%}.pct-58{--pct:58%}.pct-59{--pct:59%} .pct-60{--pct:60%}.pct-61{--pct:61%}.pct-62{--pct:62%}.pct-63{--pct:63%}.pct-64{--pct:64%}.pct-65{--pct:65%}.pct-66{--pct:66%}.pct-67{--pct:67%}.pct-68{--pct:68%}.pct-69{--pct:69%} .pct-70{--pct:70%}.pct-71{--pct:71%}.pct-72{--pct:72%}.pct-73{--pct:73%}.pct-74{--pct:74%}.pct-75{--pct:75%}.pct-76{--pct:76%}.pct-77{--pct:77%}.pct-78{--pct:78%}.pct-79{--pct:79%} .pct-80{--pct:80%}.pct-81{--pct:81%}.pct-82{--pct:82%}.pct-83{--pct:83%}.pct-84{--pct:84%}.pct-85{--pct:85%}.pct-86{--pct:86%}.pct-87{--pct:87%}.pct-88{--pct:88%}.pct-89{--pct:89%} .pct-90{--pct:90%}.pct-91{--pct:91%}.pct-92{--pct:92%}.pct-93{--pct:93%}.pct-94{--pct:94%}.pct-95{--pct:95%}.pct-96{--pct:96%}.pct-97{--pct:97%}.pct-98{--pct:98%}.pct-99{--pct:99%} .pct-100{--pct:100%} /* Turkish: letters outside Latin-1 (ğ ş İ Ş Ğ) are not in the bundled Plex Mono subset — fall back to Mona Sans, never a system mono */ :lang(tr) { --font-mono: "IBM Plex Mono", "Mona Sans", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }