/* ============================================================ Visitech — Design Tokens Source of truth for colors, typography, spacing, radius, shadows. All components reference these variables. ============================================================ */ :root { /* -------- Primary palette 2025 -------- */ --color-light-purple: #a068b1; /* Mystic Lavender · Pantone 3593 C · RAL 4009 */ --color-dark-purple: #5f4a8b; /* Royal Plum · Pantone 3574 C · RAL 4008 */ --color-dark-blue: #302c80; /* Deep Purple · Pantone 2118 C · RAL 5002 */ /* -------- Secondary palette 2025 -------- */ --color-blue: #888bb7; /* Steel Blue Gray · Pantone 2100 C · RAL 4005 */ --color-light-blue: #63b0e6; /* Vibrant Azure · Pantone 2925 C · RAL 5012 */ --color-golden-amber: #d9a156; /* Golden Amber · Pantone 2011 C · RAL 1001 */ --color-teal-ocean: #11737f; /* Teal Ocean · Pantone 7716 C · RAL 5021 */ --color-grey: #878089; /* Muted Charcoal · Pantone 4045 C · RAL 7045 */ --color-purple-black: #2a2a32; /* Anthracite Black · Pantone 7547 C · RAL 7021 */ /* -------- Additions (adopted 2026-06-12 from the approved front-page draft) -------- */ --color-electric-blue: #6e8bff; /* Electric Periwinkle · hero/AI accent on dark surfaces */ /* -------- Tints (80 / 60 / 40 / 20 / 10 %) — mixed to white -------- */ --color-light-purple-80: #b286be; --color-light-purple-60: #c6a4cf; --color-light-purple-40: #d9c2e0; --color-light-purple-20: #ece0f0; --color-light-purple-10: #f5eff7; /* Soft Amethyst Mist */ --color-dark-purple-80: #7f6ea2; --color-dark-purple-60: #9f92b8; --color-dark-purple-60-s: #9f92b8; /* alias */ --color-dark-purple-40: #bfb6cf; --color-dark-purple-20: #dfdbe7; --color-dark-purple-10: #efedf3; /* Muted Lilac Haze */ --color-dark-blue-80: #5956a0; --color-dark-blue-60: #8380b8; --color-dark-blue-40: #acabcf; --color-dark-blue-20: #d6d5e7; --color-dark-blue-10: #eaeaf3; /* Ethereal Periwinkle */ --color-blue-80: #a0a2c5; --color-blue-60: #b8b9d4; --color-blue-40: #cfd1e2; --color-blue-20: #e7e8f1; --color-blue-10: #f3f3f8; /* Frosted Blue Gray */ --color-light-blue-80: #82c0eb; --color-light-blue-60: #a1d0f0; --color-light-blue-40: #c1dff5; --color-light-blue-20: #e0effa; --color-light-blue-10: #eff7fd; /* Soft Arctic Sky */ --color-golden-amber-80: #e1b478; --color-golden-amber-60: #e8c79a; --color-golden-amber-40: #f0d9bb; --color-golden-amber-20: #f7ecdd; --color-golden-amber-10: #fbf6ee; /* Featherlight Sand */ --color-teal-ocean-80: #418f99; --color-teal-ocean-60: #70abb2; --color-teal-ocean-40: #a0c7cc; --color-teal-ocean-20: #cfe3e5; --color-teal-ocean-10: #e7f1f2; /* Icy Nordic Teal */ --color-grey-80: #9f99a1; --color-grey-60: #b7b3b8; --color-grey-40: #cfccd0; --color-grey-20: #e7e6e7; --color-grey-10: #f3f2f3; /* Soft Mist Gray */ --color-purple-black-80: #55555b; --color-purple-black-60: #7f7f84; --color-purple-black-40: #aaaaad; --color-purple-black-20: #d4d4d6; --color-purple-black-10: #eaeaeb; /* Whispering Fog */ /* -------- Semantic surface tokens -------- */ --color-bg: #ffffff; --color-bg-subtle: #faf9fb; /* very faint purple-tinted grey */ --color-bg-muted: #f3f3f3; --color-surface: #ffffff; --color-surface-alt: #faf7fc; --color-border: #e7e5ea; --color-border-strong: #cfcccf; --color-divider: #ececec; --color-ink: #0d0a18; /* cinematic ground — the dark end of --gradient-cinematic. Overlays/scrims mix their alpha from this AT THE USE SITE (color-mix); no token here ever carries an opacity. */ /* -------- Semantic text tokens -------- */ --color-text: #2a2a32; /* anthracite black */ --color-text-muted: #6b6470; --color-text-subtle: #767079; /* darkened to 4.81:1 on white for WCAG AA (was #9f999f → 2.79:1) */ --color-text-inverse: #ffffff; --color-text-brand: #5f4a8b; /* dark purple for headings */ --color-text-accent: #a068b1; /* light purple for emphasis */ --color-link: #5f4a8b; --color-link-hover: #302c80; /* -------- Semantic state tokens (repurposed from palette) -------- */ --color-info: #63b0e6; --color-success: #4a9d7a; /* outside palette — introduced for a functioning system */ --color-warning: #d89b3c; --color-danger: #b1526a; /* Accessible TEXT variants of the state colors — darkened to meet WCAG AA (>=4.5:1) as label text on their own faint tints (status pills). Use these for pill/label text; keep the base tokens for dots, borders and backgrounds. */ --color-success-text: #2f7152; /* 5.1:1 on the success tint (was #4a9d7a → 2.9:1) */ --color-warning-text: #8f6212; /* 4.8:1 on the warning tint (was #d89b3c → 2.2:1) */ /* -------- Gradients -------- Curated, named set. Components must reference these — no inline gradients. Brand = diagonal 135° washes · Tier = 90° accent strips ({color}-60 → {color}) Surface = faint 180° tint→white · Cinematic = dark hero backdrops Glow = radial spotlights (place behind hero content). */ /* Brand — primary diagonal washes */ --gradient-brand: linear-gradient(135deg, var(--color-light-purple) 0%, var(--color-dark-blue) 100%); /* hero / flagship */ --gradient-brand-purple: linear-gradient(135deg, var(--color-light-purple) 0%, var(--color-dark-purple) 100%); --gradient-brand-deep: linear-gradient(135deg, var(--color-dark-purple) 0%, var(--color-dark-blue) 100%); --gradient-azure: linear-gradient(135deg, var(--color-light-blue) 0%, var(--color-blue) 100%); --gradient-electric: linear-gradient(135deg, var(--color-light-purple) 0%, var(--color-electric-blue) 100%); /* hero emphasis + AI accents on dark (adopted 2026-06-12) */ /* Button — subtle in-palette gradients (adopted 2026-06-12) */ --gradient-button: linear-gradient(135deg, var(--color-light-purple) 0%, var(--color-dark-purple) 72%); /* colored primary, subtle */ --gradient-button-deep: linear-gradient(135deg, var(--color-dark-purple) 0%, var(--color-dark-blue) 100%); /* deeper purple→indigo alt */ /* Tier — accent strips on product chips ({color}-60 → {color}) */ --gradient-tier-entry: linear-gradient(90deg, var(--color-grey-60), var(--color-grey)); --gradient-tier-standard: linear-gradient(90deg, var(--color-light-blue-60), var(--color-light-blue)); --gradient-tier-premium: linear-gradient(90deg, var(--color-dark-purple-60), var(--color-dark-purple)); --gradient-tier-flagship: linear-gradient(90deg, var(--color-light-purple), var(--color-dark-blue)); /* Surface — faint tint fading to white */ --gradient-surface: linear-gradient(180deg, var(--color-surface-alt) 0%, #ffffff 70%); --gradient-surface-purple: linear-gradient(180deg, var(--color-light-purple-10) 0%, #ffffff 60%); --gradient-surface-amber: linear-gradient(135deg, var(--color-golden-amber-40) 0%, var(--color-golden-amber-20) 85%); /* warm gold → lighter gold, never white (newsletter) */ /* Cinematic — dark hero backdrops */ --gradient-cinematic: linear-gradient(160deg, #1a1024 0%, #2a1a3a 50%, #5a3478 130%); --gradient-night: linear-gradient(160deg, var(--color-purple-black) 0%, #2a1a3a 100%); --gradient-feature-dark: radial-gradient(130% 120% at 22% 0%, #1c1842 0%, #0d0a18 58%); /* megamenu teaser BG — deep with a soft purple/periwinkle bloom */ /* Glow — radial spotlights (alpha kept literal until RGB-triple tokens land) */ --gradient-glow-purple: radial-gradient(circle, rgba(160, 104, 177, 0.45), transparent 70%); --gradient-glow-azure: radial-gradient(circle, rgba(99, 176, 230, 0.18), transparent 60%); --gradient-glow-deep: radial-gradient(circle, rgba(48, 44, 128, 0.35), transparent 60%); /* -------- Typography -------- Both faces are self-hosted from assets/fonts/ — Typekit and Google Fonts are blocked in mainland China, so nothing may be fetched from them. The @font-face rules come from theme.json, not from this file. Barlow stands in for Amplitude, which Adobe's licence forbids self-hosting; see assets/fonts/README.md before changing the display face. */ /* Amplitude is the brand face and comes first, but it is bounded to printable ASCII in theme.json — outside that range the supplied file is unreliable (no µ, no en dash, and ø draws as ł), so Barlow stands behind it and picks up every one of those characters. See assets/fonts/README.md. */ --font-display: "Amplitude", "Barlow", system-ui, -apple-system, Segoe UI, sans-serif; --font-body: "Noto Sans Display", system-ui, -apple-system, Segoe UI, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale (1.250 modular, anchored at 16px) */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.25rem; /* 20 — lead */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 1.875rem; /* 30 */ --fs-3xl: 2.25rem; /* 36 — h2 */ --fs-4xl: 3rem; /* 48 — h1 */ --fs-5xl: 3.75rem; /* 60 */ --fs-6xl: 4.5rem; /* 72 — display */ /* The smallest text a screen may draw. 0 on desktop, so a label written `font-size: max(11px, var(--fs-floor, 0px))` keeps its design size there; raised below for handheld screens, see the media query after :root. */ --fs-floor: 0px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* -------- Spacing scale (4-pt base) -------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* -------- Radius -------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 10px; /* card/panel radius — consolidated to the approved 10px (2026-06-12, was 8px) */ --radius-xl: 12px; --radius-2xl: 16px; /* large floating panels, e.g. the search dropdown */ --radius-pill: 999px; /* -------- Elevation (very restrained, matches clean look) -------- */ --shadow-xs: 0 1px 2px rgba(42, 42, 50, 0.05); --shadow-sm: 0 2px 4px rgba(42, 42, 50, 0.06), 0 1px 2px rgba(42, 42, 50, 0.04); --shadow-md: 0 6px 14px rgba(42, 42, 50, 0.08), 0 2px 4px rgba(42, 42, 50, 0.04); --shadow-lg: 0 16px 32px rgba(42, 42, 50, 0.12), 0 4px 8px rgba(42, 42, 50, 0.06); --shadow-xl: 0 24px 60px -12px rgba(46, 32, 59, 0.22); /* floating mega/search panels */ /* -------- Layout -------- */ --container-max: 1200px; --sidebar-width: 260px; --content-max: 880px; /* Section width contract (locked 2026-08-20, see sections.css). The designer's 1210px is a BAND: column + 2 x gutter. Stating it that way keeps the text column at 1146px whatever the gutter does — unlike the legacy `.wrap` (border-box 1210px), where the phone gutter silently widened the column to 1170px. `.wrap` keeps its old maths for the chrome; every section block uses these. */ --layout-column: 1146px; /* default content column (1210 band) */ --layout-column-wide: 1576px; /* wide column (1640 band) */ --layout-column-narrow: 880px; /* reading measure ( 944 band) */ --layout-gutter: 32px; /* The floating header's own height, unscrolled — measured, not guessed: 24px padding + a 56.5px nav pill + 24px = 104.5px at 1440px. Any section that is not full-screen has to clear it by hand, because vertical centring inside 100svh (which is how the front-page hero gets away with ignoring it) is not available to a section that ends where its content ends. */ --vt-header-height: 104px; /* -------- Motion -------- */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* -------- Focus -------- TWO rings, not one tinted halo. The old `0 0 0 3px rgba(160,104,177,.35)` measured 1.5:1 against every surface it is used on — the dark header, the nav pill, white page, the near-white mega panel — so the keyboard position was effectively invisible (WCAG 2.1 SC 1.4.11 / 2.4.7 want 3:1). A single colour cannot clear 3:1 on both a near-black header and a white page, so the indicator carries one of each and the background picks the one that shows: white inner ring reads on the dark chrome (19.6:1 on #0d0a18, 10.2:1 on the scrolled strip), Deep Purple outer ring reads on the light pages and panels (11.7:1 on white, 11.4:1 on the mega panel). Worst pair anywhere in the chrome is 4.1:1 — still above the bar. */ --focus-ring: 0 0 0 2px #ffffff, 0 0 0 5px var(--color-dark-blue); } /* Phone gutters. The column is deliberately UNAFFECTED — that is the whole point of the band = column + 2 x gutter contract above. */ @media (max-width: 600px) { :root { --layout-gutter: 20px; } } /* Handheld type floor. The labels drawn at 9–11px on desktop (mosaic captions, card labels, categories, badges, sort labels) measured 11px at 390px wide, where they are hard to read at arm's length; nothing goes under 12px here (Kurt's launch list B29, 2026-09-30). 820px is where the header turns into the phone sheet; `screen` keeps A4 print (~794px) out of it. Rules opt in with max(, var(--fs-floor)). */ @media screen and (max-width: 820px) { :root { --fs-floor: 12px; } } /* -------- CJK (ja, zh) -------- Han and kana are self-hosted too — Noto Sans JP for ja, Noto Sans SC for zh, variable 100-900. Files in assets/fonts/cjk/, @font-face rules generated into assets/css/fonts-cjk.css by tools/fetch-cjk-fonts.py (NOT theme.json: 210 subset faces do not belong in a file WordPress parses every request). Self-hosted rather than borrowed from the platform for two reasons. China blocks Google Fonts, so there was never a CDN option. And the design sets display headings at weight 200, which no Windows CJK face can supply — Microsoft YaHei ships Light/Regular/Bold only, and a browser can synthesise a bolder weight but never a lighter one, so the light hero would silently render heavy for most of the Chinese market. The LATIN face stays first in both stacks. Product names, model numbers and units (LLS1000, LRS-MCx 4K, "1 µm L/S") then keep exactly the shapes they have on the English site, and only Han/kana falls through to the CJK face. Platform faces are kept as a last resort for the seconds before the webfont lands, and for any codepoint outside the shipped subsets. The two stacks are deliberately separate: Han unification means one codepoint has different correct shapes in Japanese and Simplified Chinese, so pointing ja at a Chinese face would draw visibly wrong kanji. Polylang emits lang="ja-JP" / "zh-CN" on , which :lang() matches on the subtag. */ :root:lang(ja) { --font-display: "Amplitude", "Barlow", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif; --font-body: "Noto Sans Display", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif; } :root:lang(zh) { --font-display: "Amplitude", "Barlow", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; --font-body: "Noto Sans Display", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; } /* Kinsoku shori (禁則処理) — which characters may not begin or end a line. Proven on the ja/zh mockups; see Handingoff/07-LANGUAGES-AND-FONTS.md. */ :root:lang(ja) h1, :root:lang(ja) h2, :root:lang(ja) p, :root:lang(zh) h1, :root:lang(zh) h2, :root:lang(zh) p { line-break: strict; } /* CJK display headings need a smaller size than Latin ones: Han and kana are full-width, so N characters occupy N x font-size where Latin averages nearer 0.5em a glyph. Left at the Latin size, a headline overruns its column and wraps mid-word — which is legal Japanese but fractures katakana loanwords ("イメージング" -> "イメージ" + "ング") and reads as sloppy at display size. Stated as a FACTOR, not a size. Every section hands its title the size it wants (--vt-title-size, see visitech-core blocks/title/style.css and blocks/hero/style.css), so a fixed CJK size here cannot be right for all of them: the front-page hero runs to 132px, the product hero to 52px, a section heading to 36px. The earlier rule (clamp(2.25rem, 7.2vw, 6.5rem)) was tuned as ~80% of the front-page hero and then applied to every h1 — on a product page it DOUBLED the Japanese and Chinese title instead of shrinking it. The factor is consumed where a title's size is resolved (the title block, and the base h1-h3 for plain headings), so it shrinks each in proportion. The negative tracking is also measured on Latin; it crowds kanji strokes. */ :root:lang(ja), :root:lang(zh) { --vt-title-scale: 0.85; } :root:lang(ja) :is(h1, h2, h3, .vt-title), :root:lang(zh) :is(h1, h2, h3, .vt-title) { letter-spacing: 0; }