/* ============================================================ Kia Electromotor Part — public site stylesheet (design v3). Brand language of the control tower (navy ink + copper accent, Vazirmatn) as a modern glass design system. Architecture ───────────── 1. Fonts (self-hosted Vazirmatn, font-display swap, preloaded) 2. Tokens — one definition per token: • colors via light-dark() (color-scheme drives auto + manual dark mode; plain-light fallbacks precede for old engines) • fluid type scale --step--2 … --step-5 (rem-based clamp(), interpolated 400→1200px viewport; respects user font size) • per-language rhythm: fa gets taller line-height, en gets tighter headings with slight negative tracking 3. Base / typography rules — no raw px font sizes anywhere, body copy never below 16px, meta text never below 13px 4. Components (glass surfaces, spotlight cards, catalogue…) 5. Motion (view transitions, scroll-driven, reveals) — all disabled under prefers-reduced-motion 6. Responsive (44px tap targets on touch layouts) + print Logical properties throughout — one sheet serves RTL and LTR. ============================================================ */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Vazirmatn-Regular.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Vazirmatn-Medium.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Vazirmatn-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Vazirmatn-Bold.woff2') format('woff2'); } /* ---------- Registered properties (animatable gradients) ---------- */ @property --ga { syntax: ''; inherits: false; initial-value: 0deg; } /* ============================================================ 2. TOKENS ============================================================ */ :root { --font: 'Vazirmatn', 'Tahoma', 'Segoe UI', Arial, sans-serif; /* brand constants — identical in both themes */ --navy: #1f4e78; --navy-d: #173f63; --navy-xd: #0e2438; --navy-l: #2e74b5; --copper: #a5601f; --copper-l: #b76e28; --copper-xl: #ebaa66; /* ---- fluid type scale (interpolated 400→1200px; rem-based so it follows the user's font-size preference). Never use a raw px font-size in a component — pick a step. ---- */ --step--2: clamp(0.75rem, 0.7344rem + 0.0625vw, 0.7813rem); /* 12 → 12.5 tiny labels */ --step--1: clamp(0.8125rem, 0.7813rem + 0.125vw, 0.875rem); /* 13 → 14 meta/small */ --step-0: clamp(1rem, 0.9688rem + 0.125vw, 1.0625rem); /* 16 → 17 body */ --step-1: clamp(1.125rem, 1.0781rem + 0.1875vw, 1.2188rem); /* 18 → 19.5 lede / h3 */ --step-2: clamp(1.3125rem, 1.2188rem + 0.375vw, 1.5rem); /* 21 → 24 small h2 */ --step-3: clamp(1.5313rem, 1.3594rem + 0.6875vw, 1.875rem); /* 24.5 → 30 section h2 */ --step-4: clamp(1.75rem, 1.4688rem + 1.125vw, 2.3125rem); /* 28 → 37 page h1 */ --step-5: clamp(2.125rem, 1.6875rem + 1.75vw, 3rem); /* 34 → 48 hero h1 */ /* ---- rhythm (overridden per language on ) ---- */ --lh-body: 1.8; /* the Persian script needs generous leading */ --lh-head: 1.45; --ls-head: 0; /* ---- fluid space + shape ---- */ --sp-section: clamp(3rem, 2.25rem + 3vw, 4.75rem); --radius: 18px; --radius-sm: 11px; --wrap: 1140px; --header-h: 4.375rem; /* ---- semantic colors ---- Plain-light values first as fallback: engines without light-dark() drop the second declaration and render light. */ color-scheme: light dark; --bg: #edf1f7; --heading: #16344f; --text: #1b2733; --text-2: #435363; --muted: #66757f; --link: #2e74b5; --surface: rgba(255, 255, 255, 0.66); --surface-2: rgba(255, 255, 255, 0.42); --surface-solid: #ffffff; --glass-brd: rgba(255, 255, 255, 0.75); --glass-edge: rgba(23, 63, 99, 0.12); --line: rgba(23, 63, 99, 0.12); --line-2: rgba(23, 63, 99, 0.07); --chip-bg: rgba(31, 78, 120, 0.08); --chip-cu-bg: rgba(183, 110, 40, 0.12); --thead-bg: rgba(31, 78, 120, 0.05); --row-hover: rgba(46, 116, 181, 0.055); --stat-a: #2e74b5; --stat-b: #173f63; --accent: #a5601f; --accent-bright: #b76e28; --ok: #1c7d33; --ok-bg: #e7f4ea; --err: #c0322f; --err-bg: #fbe9e8; --icon-fg: #2e74b5; --spot: rgba(165, 96, 31, 0.12); --icon-bg: linear-gradient(145deg, rgba(46, 116, 181, 0.14), rgba(23, 63, 99, 0.08)); --icon-cu-bg: linear-gradient(145deg, rgba(235, 170, 102, 0.28), rgba(165, 96, 31, 0.14)); --bg-mesh: radial-gradient(900px 620px at 88% -6%, rgba(46, 116, 181, 0.14), transparent 60%), radial-gradient(760px 540px at -8% 26%, rgba(183, 110, 40, 0.1), transparent 55%), radial-gradient(900px 700px at 50% 120%, rgba(31, 78, 120, 0.1), transparent 60%); /* modern engines: every color follows color-scheme automatically */ --bg: light-dark(#edf1f7, #0a121d); --heading: light-dark(#16344f, #dcebf9); --text: light-dark(#1b2733, #e7eef6); --text-2: light-dark(#435363, #b3c1cf); --muted: light-dark(#66757f, #8a9cae); --link: light-dark(#2e74b5, #7db3e2); --surface: light-dark(rgba(255, 255, 255, 0.66), rgba(21, 33, 48, 0.6)); --surface-2: light-dark(rgba(255, 255, 255, 0.42), rgba(21, 33, 48, 0.42)); --surface-solid: light-dark(#ffffff, #16222f); --glass-brd: light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.12)); --glass-edge: light-dark(rgba(23, 63, 99, 0.12), rgba(0, 0, 0, 0.5)); --line: light-dark(rgba(23, 63, 99, 0.12), rgba(255, 255, 255, 0.1)); --line-2: light-dark(rgba(23, 63, 99, 0.07), rgba(255, 255, 255, 0.06)); --chip-bg: light-dark(rgba(31, 78, 120, 0.08), rgba(110, 168, 221, 0.14)); --chip-cu-bg: light-dark(rgba(183, 110, 40, 0.12), rgba(224, 160, 94, 0.16)); --thead-bg: light-dark(rgba(31, 78, 120, 0.05), rgba(255, 255, 255, 0.035)); --row-hover: light-dark(rgba(46, 116, 181, 0.055), rgba(110, 168, 221, 0.07)); --stat-a: light-dark(#2e74b5, #9cc4ea); --stat-b: light-dark(#173f63, #5fa3e0); --accent: light-dark(#a5601f, #e0a05e); --accent-bright: light-dark(#b76e28, #f0be80); --ok: light-dark(#1c7d33, #57c06f); --ok-bg: light-dark(#e7f4ea, rgba(87, 192, 111, 0.14)); --err: light-dark(#c0322f, #e07c73); --err-bg: light-dark(#fbe9e8, rgba(224, 124, 115, 0.14)); --icon-fg: light-dark(#2e74b5, #8db9e6); --spot: light-dark(rgba(165, 96, 31, 0.12), rgba(240, 190, 128, 0.1)); --icon-bg: linear-gradient( 145deg, light-dark(rgba(46, 116, 181, 0.14), rgba(110, 168, 221, 0.2)), light-dark(rgba(23, 63, 99, 0.08), rgba(46, 116, 181, 0.1)) ); --icon-cu-bg: linear-gradient( 145deg, light-dark(rgba(235, 170, 102, 0.28), rgba(240, 190, 128, 0.24)), light-dark(rgba(165, 96, 31, 0.14), rgba(165, 96, 31, 0.14)) ); --bg-mesh: radial-gradient( 900px 620px at 88% -6%, light-dark(rgba(46, 116, 181, 0.14), rgba(46, 116, 181, 0.2)), transparent 60% ), radial-gradient( 760px 540px at -8% 26%, light-dark(rgba(183, 110, 40, 0.1), rgba(208, 138, 62, 0.12)), transparent 55% ), radial-gradient( 900px 700px at 50% 120%, light-dark(rgba(31, 78, 120, 0.1), rgba(31, 78, 120, 0.18)), transparent 60% ); /* shadow lists hold lengths, not colors — themed the classic way below */ --shadow: 0 1px 2px rgba(20, 40, 70, 0.05), 0 10px 34px rgba(20, 40, 70, 0.08); --shadow-lg: 0 24px 70px rgba(15, 30, 55, 0.3); } :root[data-theme='dark'] { --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 40px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 40px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.6); } } /* Manual override (theme toggle) just forces the color-scheme; every light-dark() token follows automatically. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* Latin pages: tighter leading, slight negative tracking on display sizes. Never applied to the Persian script (fa is the default). */ html[lang='en'] { --lh-body: 1.65; --lh-head: 1.28; --ls-head: -0.015em; } /* ============================================================ 3. BASE / TYPOGRAPHY ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1.25rem); } body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: var(--lh-body); color: var(--text); background-color: var(--bg); background-image: var(--bg-mesh); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; accent-color: var(--copper); } h1, h2, h3, h4 { line-height: var(--lh-head); letter-spacing: var(--ls-head); text-wrap: balance; color: var(--heading); } p { text-wrap: pretty; } img, svg { max-width: 100%; vertical-align: middle; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: rgba(235, 170, 102, 0.45); color: inherit; } :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 6px; } @supports (scrollbar-width: thin) { * { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--navy-l) 45%, transparent) transparent; } } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.125rem, 0.5rem + 2.5vw, 1.75rem); } .num { font-variant-numeric: tabular-nums; } /* ---------- Glass utility ---------- */ .glass { background: var(--surface); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px var(--glass-edge), var(--shadow); } /* ---------- Reveal-on-scroll ---------- The hide applies ONLY when JS is enabled (scripting: enabled) AND motion is allowed. So content is NEVER stuck invisible: no-JS, a browser without the `scripting` feature, a JS error, or reduced-motion all fall through to fully visible — the reveal is a pure enhancement over always-legible content. site.js also runs a failsafe that reveals everything after a short timeout. Above-the-fold content (hero, stats) is not reveal-gated; it gets the CSS-only entrance below, which plays on load independent of JS. */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { [data-reveal] { opacity: 0; translate: 0 14px; transition: opacity 0.55s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 55ms); } [data-reveal].in { opacity: 1; translate: 0 0; } } /* Hero + stats entrance — CSS only, painted immediately then rises in. */ @media (prefers-reduced-motion: no-preference) { .hero .inner > * { animation: rise-in 0.72s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero .kicker { animation-delay: 0.03s; } .hero h1 { animation-delay: 0.1s; } .hero .lede { animation-delay: 0.18s; } .hero .cta-row { animation-delay: 0.26s; } .stats .grid { animation: rise-in 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both; } } /* Translate only — opacity stays at its natural 1, so the hero is always painted; if the animation is ever deferred (backgrounded tab), the worst case is content resting 18px lower, never invisible. */ @keyframes rise-in { from { translate: 0 18px; } to { translate: 0 0; } } /* ---------- Skip link ---------- */ .skip { position: absolute; inset-block-start: -3.5rem; inset-inline-start: 12px; background: var(--navy-d); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 10px 10px; z-index: 99; transition: inset-block-start 0.15s; } .skip:focus { inset-block-start: 0; } /* ============================================================ 4. COMPONENTS ============================================================ */ /* ---------- Header (floating glass bar) ---------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 50; background: var(--surface-2); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); border-block-end: 1px solid var(--line-2); transition: box-shadow 0.25s, background 0.25s; } .site-header.scrolled { background: var(--surface); box-shadow: 0 8px 30px rgba(10, 25, 45, 0.12); } .site-header .bar { display: flex; align-items: center; gap: 14px; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand img { width: 42px; height: 42px; filter: drop-shadow(0 2px 6px rgba(23, 63, 99, 0.25)); } .brand .t1 { font-size: var(--step-0); line-height: 1.3; color: var(--heading); } .brand .t2 { display: block; font-size: var(--step--2); font-weight: 500; letter-spacing: 0.09em; color: var(--muted); } .site-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .actions { display: flex; align-items: center; gap: 9px; margin-inline-start: auto; } .site-nav a { color: var(--text-2); font-weight: 500; font-size: var(--step--1); padding: 0.5rem 0.875rem; border-radius: 999px; position: relative; } .site-nav a:hover { color: var(--heading); background: var(--chip-bg); text-decoration: none; } .site-nav a[aria-current='page'] { color: var(--heading); background: var(--chip-bg); font-weight: 600; } .site-nav a[aria-current='page']::after { content: ''; position: absolute; inset-inline: 18px; inset-block-end: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--copper-xl), var(--copper)); } .lang-menu { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); } .lang-switch { font-size: var(--step--2); font-weight: 600; color: var(--muted); padding: 0.25rem 0.625rem; border-radius: 999px; white-space: nowrap; min-width: 2.125rem; text-align: center; } .lang-switch:hover { color: var(--heading); background: var(--chip-bg); text-decoration: none; } .lang-switch.active { color: #fff; background: linear-gradient(135deg, var(--navy-l), var(--navy-d)); pointer-events: none; } /* screen-reader-only helper */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .icon-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; padding: 0; transition: color 0.15s, border-color 0.15s, rotate 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .icon-btn:hover { color: var(--accent); border-color: var(--accent); } .icon-btn svg { width: 1.125rem; height: 1.125rem; } .theme-btn:active { rotate: 40deg; } .theme-btn .moon { display: none; } :root[data-theme='dark'] .theme-btn .sun { display: none; } :root[data-theme='dark'] .theme-btn .moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-btn .sun { display: none; } :root:not([data-theme='light']) .theme-btn .moon { display: block; } } .menu-btn { display: none; } .btn-login { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--copper-l), var(--copper)); color: #fff; font-weight: 600; font-size: var(--step--1); padding: 0.625rem 1.125rem; min-height: 2.75rem; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 16px rgba(165, 96, 31, 0.4); white-space: nowrap; position: relative; overflow: hidden; } .btn-login:hover { text-decoration: none; filter: brightness(1.07); } .btn-login svg { width: 0.9375rem; height: 0.9375rem; } /* ---------- Buttons (sheen sweep, ≥44px targets) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: var(--step-0); padding: 0.8125rem 1.75rem; min-height: 3rem; border-radius: 999px; position: relative; overflow: hidden; transition: filter 0.15s, box-shadow 0.15s, translate 0.15s; } .btn:hover { text-decoration: none; filter: brightness(1.07); translate: 0 -1px; } .btn::after, .btn-login::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-18deg); transition: inset-inline-start 0.6s ease; pointer-events: none; } .btn:hover::after, .btn-login:hover::after { inset-inline-start: 125%; } .btn-copper { background: linear-gradient(135deg, var(--copper-xl), var(--copper)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 28px rgba(165, 96, 31, 0.45); } .btn-ghost { color: #eaf2fb; border: 1.5px solid rgba(234, 242, 251, 0.4); background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-ghost:hover { border-color: #fff; } .btn-navy { background: linear-gradient(135deg, var(--navy-l), var(--navy-d)); color: #fff; box-shadow: 0 8px 28px rgba(31, 78, 120, 0.4); } /* Directional icons follow the reading direction. */ [dir='rtl'] .btn svg, [dir='rtl'] .btn-login svg { transform: scaleX(-1); } /* ---------- Hero (mesh + grain + conic ring + spinning rotor) ---------- */ .hero { position: relative; overflow: hidden; color: #eaf2fb; background: radial-gradient(1100px 540px at 82% -12%, rgba(46, 116, 181, 0.6), transparent 62%), radial-gradient(820px 460px at 6% 112%, rgba(183, 110, 40, 0.38), transparent 60%), radial-gradient(600px 380px at 40% 30%, rgba(46, 116, 181, 0.18), transparent 70%), linear-gradient(160deg, var(--navy-d) 0%, var(--navy-xd) 100%); } .hero::before { /* film grain */ content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero .aura { position: absolute; inset-block-start: 50%; inset-inline-end: -150px; translate: 0 -50%; width: 640px; height: 640px; pointer-events: none; user-select: none; } .hero .aura::before { /* slow conic sweep ring */ content: ''; position: absolute; inset: -30px; border-radius: 50%; background: conic-gradient( from var(--ga), transparent 0turn 0.62turn, rgba(235, 170, 102, 0.55) 0.8turn, rgba(46, 116, 181, 0.4) 0.9turn, transparent 1turn ); -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 65.5% 68%, transparent 69.5%); mask: radial-gradient(closest-side, transparent 64%, #000 65.5% 68%, transparent 69.5%); animation: ga-spin 16s linear infinite; } .hero .rotor { position: absolute; inset: 60px; opacity: 0.08; filter: blur(0.4px); animation: spin 120s linear infinite; } @keyframes ga-spin { to { --ga: 360deg; } } @keyframes spin { to { rotate: 360deg; } } .hero .inner { position: relative; padding-block: clamp(4rem, 3rem + 4vw, 6.25rem) clamp(4.5rem, 3.5rem + 4vw, 6rem); max-width: 46em; } .hero .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; color: var(--copper-xl); background: rgba(235, 170, 102, 0.1); border: 1px solid rgba(235, 170, 102, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 0.375rem 0.9375rem; border-radius: 999px; margin-block-end: 1.5rem; } .hero .kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--copper-xl); box-shadow: 0 0 12px 2px rgba(235, 170, 102, 0.8); animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.35; } } .hero h1 { margin: 0 0 0.5em; font-size: var(--step-5); font-weight: 700; color: #fff; } .hero h1 .accent { background: linear-gradient(100deg, #f4c98d, var(--copper-xl) 45%, #d98f3f); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lede { margin: 0 0 2.125rem; font-size: var(--step-1); color: #c6d6e6; max-width: 52ch; } .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- Stats band (floating glass, gradient numerals) ---------- */ .stats { position: relative; z-index: 2; margin-block-start: -2.5rem; } .stats .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-radius: var(--radius); overflow: hidden; background: var(--surface); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--glass-brd); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px var(--glass-edge), var(--shadow-lg); } .stats .cell { position: relative; padding: 1.625rem 1.125rem 1.25rem; text-align: center; } .stats .cell + .cell { border-inline-start: 1px solid var(--line-2); } .stats .v { font-size: var(--step-4); font-weight: 700; line-height: 1.25; background: linear-gradient(160deg, var(--stat-a), var(--stat-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stats .v small { font-size: var(--step-0); font-weight: 600; background: linear-gradient(160deg, var(--accent-bright), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stats .k { font-size: var(--step--1); color: var(--muted); margin-block-start: 0.3125rem; } /* ---------- Sections ---------- */ .section { padding-block: var(--sp-section) 1.375rem; } .section-head { max-width: 42em; margin-block-end: 2.5rem; } .section-head .eyebrow { display: inline-block; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.07em; color: var(--accent); margin-block-end: 0.5rem; } .section-head .eyebrow::before { content: ''; display: inline-block; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--copper-xl), var(--copper)); margin-inline-end: 10px; vertical-align: middle; } .section-head h2 { margin: 0 0 0.375em; font-size: var(--step-3); } .section-head p { margin: 0; color: var(--text-2); font-size: var(--step-0); } /* ---------- Cards (glass + pointer spotlight) ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr)); gap: 18px; } .card { position: relative; overflow: hidden; background: var(--surface); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--glass-brd); border-radius: var(--radius); padding: 1.5625rem 1.4375rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px var(--glass-edge), var(--shadow); transition: translate 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.22s; } .card::after { /* cursor spotlight — JS feeds --mx/--my */ content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s; background: radial-gradient( 280px circle at var(--mx, 50%) var(--my, 40%), var(--spot), transparent 65% ); } .card:hover::after { opacity: 1; } a.card { color: inherit; display: block; } a.card:hover, .card:hover { text-decoration: none; translate: 0 -4px; border-color: color-mix(in oklab, var(--navy-l) 55%, var(--glass-brd)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px var(--glass-edge), 0 18px 50px rgba(20, 40, 70, 0.16); } .card .icon, .family > header .icon, .contact-rows .ico { flex: none; display: grid; place-items: center; background: var(--icon-bg); color: var(--icon-fg); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .card .icon, .family > header .icon { width: 3rem; height: 3rem; border-radius: 14px; margin-block-end: 0.9375rem; } .card .icon svg, .family > header .icon svg { width: 1.625rem; height: 1.625rem; } .card.copper .icon { background: var(--icon-cu-bg); color: var(--accent); } .card h3 { margin: 0 0 0.375em; font-size: var(--step-1); } .card p { margin: 0; font-size: var(--step--1); color: var(--text-2); } .card .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 0.875rem; } .chip { display: inline-block; font-size: var(--step--2); font-weight: 600; color: var(--heading); background: var(--chip-bg); border-radius: 999px; padding: 0.1875rem 0.75rem; } .chip.cu { color: var(--accent); background: var(--chip-cu-bg); } .card .models { margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--text-2); } .card .models li { padding-block: 0.1875rem; border-block-start: 1px dashed var(--line-2); } .card .models li:first-child { border-block-start: 0; } /* ---------- Catalogue ---------- */ .fam-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 2.25rem; } .fam-nav a { font-size: var(--step--1); font-weight: 600; color: var(--text-2); background: var(--surface); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--glass-brd); box-shadow: 0 0 0 1px var(--glass-edge); border-radius: 999px; padding: 0.4375rem 0.9375rem; transition: color 0.15s, border-color 0.15s, translate 0.15s; } .fam-nav a:hover { color: var(--heading); border-color: var(--navy-l); text-decoration: none; translate: 0 -1px; } .group-title { display: flex; align-items: center; gap: 12px; margin: 3.25rem 0 1.25rem; font-size: var(--step-2); } .group-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } .family { position: relative; background: var(--surface); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--glass-brd); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px var(--glass-edge), var(--shadow); margin-block-end: 1.375rem; overflow: hidden; } /* deep-linked family (fam-nav chips) glows so the eye lands on it */ .family:target { border-color: color-mix(in oklab, var(--copper) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px color-mix(in oklab, var(--copper) 35%, transparent), 0 0 46px rgba(183, 110, 40, 0.28), var(--shadow); } .family > header { display: flex; gap: 16px; align-items: flex-start; padding: 1.4375rem 1.5rem 1.125rem; border-block-end: 1px solid var(--line-2); } .family > header .icon { margin-block-end: 0; } .family h3 { margin: 0; font-size: var(--step-1); } .family .sub { font-size: var(--step--2); color: var(--muted); letter-spacing: 0.03em; } .family .desc { margin: 0.5rem 0 0; font-size: var(--step--1); color: var(--text-2); max-width: 72ch; } .family .counts { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .family table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .family th { text-align: start; font-size: var(--step--2); font-weight: 600; color: var(--muted); padding: 0.625rem 1.5rem; background: var(--thead-bg); border-block-end: 1px solid var(--line-2); } .family td { padding: 0.5625rem 1.5rem; border-block-start: 1px solid var(--line-2); vertical-align: top; } .family td.code { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--step--1); white-space: nowrap; direction: ltr; text-align: end; } .family td.variants { white-space: nowrap; text-align: center; color: var(--text-2); } .family tbody tr { transition: background 0.12s; } .family tbody tr:hover { background: var(--row-hover); } /* ---------- Feature / about blocks ---------- */ .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; } .prose p { margin: 0 0 1em; color: var(--text-2); font-size: var(--step-0); max-width: 65ch; } .prose p:last-child { margin-block-end: 0; } .panel { background: var(--surface); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid var(--glass-brd); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px var(--glass-edge), var(--shadow); padding: 1.875rem 1.75rem; } .panel-narrow { max-width: 48em; } .steps { counter-reset: step; list-style: none; margin: 0; padding: 0; } .steps li { counter-increment: step; position: relative; padding: 0.875rem 0; padding-inline-start: 3.625rem; border-block-start: 1px dashed var(--line-2); } .steps li:first-child { border-block-start: 0; } .steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0.875rem; width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--step-0); color: #fff; background: linear-gradient(145deg, var(--navy-l), var(--navy-d)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(23, 63, 99, 0.35); } .steps h4 { margin: 0 0 0.1875em; font-size: var(--step-0); } .steps p { margin: 0; font-size: var(--step--1); color: var(--text-2); } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step-0); color: var(--text-2); } .checklist .tick { flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); margin-block-start: 0.25rem; } .checklist .tick svg { width: 0.75rem; height: 0.75rem; } .checklist b { color: var(--text); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: start; } .contact-title { margin: 0 0 0.25rem; font-size: var(--step-2); } .contact-sub { color: var(--muted); font-size: var(--step--1); } .contact-rows { list-style: none; margin: 1.125rem 0 0; padding: 0; } .contact-rows li { display: flex; gap: 14px; align-items: flex-start; padding: 0.8125rem 0; border-block-start: 1px solid var(--line-2); font-size: var(--step-0); } .contact-rows li:first-child { border-block-start: 0; } .contact-rows .ico { width: 2.5rem; height: 2.5rem; border-radius: 12px; } .contact-rows .ico svg { width: 1.25rem; height: 1.25rem; } .contact-rows .k { font-size: var(--step--2); color: var(--muted); } .contact-rows .v { font-weight: 600; color: var(--text); } .note { font-size: var(--step--1); color: var(--muted); background: var(--chip-bg); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-block-start: 1.125rem; } /* ---------- Inquiry form ---------- */ .inquiry-form { max-width: 56em; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem 1.25rem; } @media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } } .field.full { grid-column: 1 / -1; } .field label { display: block; font-size: var(--step--1); font-weight: 600; color: var(--heading); margin-block-end: 0.375rem; } .field .req { color: var(--accent); } .field .help, .form-foot .help { font-size: var(--step--2); color: var(--muted); margin-block-start: 0.3125rem; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: var(--step-0); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.625rem 0.875rem; min-height: 2.75rem; transition: border-color 0.15s, box-shadow 0.15s; } .field textarea { resize: vertical; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--navy-l); box-shadow: 0 0 0 3px color-mix(in oklab, var(--navy-l) 25%, transparent); } .field input:user-invalid { border-color: var(--err); } .form-foot { display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap; margin-block-start: 1.5rem; } .form-foot .help { margin: 0; } .form-banner { border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-block-end: 1.25rem; } .form-banner h2 { margin: 0 0 0.25em; font-size: var(--step-1); } .form-banner p { margin: 0; font-size: var(--step--1); } .form-banner.ok { background: var(--ok-bg); border: 1px solid color-mix(in oklab, var(--ok) 35%, transparent); color: var(--ok); display: none; /* shown via :target (no-JS redirect) or .show (JS) */ } .form-banner.ok h2 { color: var(--ok); } .form-banner.ok:target, .form-banner.ok.show { display: block; } .form-banner.err { background: var(--err-bg); border: 1px solid color-mix(in oklab, var(--err) 35%, transparent); color: var(--err); margin-block: 1.25rem 0; } button.btn { border: 0; cursor: pointer; font-family: inherit; } button.btn[disabled] { opacity: 0.6; cursor: progress; } /* ---------- Admin login panel ---------- */ .admin-panel { position: relative; overflow: hidden; background: radial-gradient(520px 280px at 85% -20%, rgba(46, 116, 181, 0.55), transparent 65%), radial-gradient(420px 240px at 0% 120%, rgba(183, 110, 40, 0.3), transparent 60%), linear-gradient(155deg, var(--navy-d), var(--navy-xd)); color: #d9e6f2; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--shadow-lg); padding: 2rem 1.75rem; } .admin-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .admin-panel h3 { margin: 0 0 0.5rem; color: #fff; font-size: var(--step-1); } .admin-panel p { margin: 0 0 1.375rem; font-size: var(--step--1); color: #b7c9da; } /* ---------- CTA band (aurora) ---------- */ .cta-band { margin-block-start: 4.25rem; position: relative; overflow: hidden; color: #fff; background: linear-gradient(155deg, var(--navy-d), var(--navy-xd)); } .cta-band::before { content: ''; position: absolute; inset: -40% -20%; background: radial-gradient(46% 60% at 22% 65%, rgba(183, 110, 40, 0.5), transparent 62%), radial-gradient(42% 60% at 78% 30%, rgba(46, 116, 181, 0.55), transparent 60%); animation: aurora 14s ease-in-out infinite alternate; pointer-events: none; } @keyframes aurora { to { rotate: 8deg; scale: 1.15; } } .cta-band .inner { position: relative; padding-block: 3.625rem; display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .cta-band h2 { margin: 0 0 0.25em; font-size: var(--step-2); color: #fff; } .cta-band p { margin: 0; color: #c6d6e6; font-size: var(--step-0); max-width: 55ch; } .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ---------- Footer ---------- */ .site-footer { position: relative; background: var(--navy-xd); color: #9fb3c6; } .site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .site-footer .cols { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; padding-block: 3rem 1.875rem; } .site-footer h4 { color: #fff; font-size: var(--step-0); margin: 0 0 0.875rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--step--1); } .site-footer a { color: #9fb3c6; } .site-footer a:hover { color: #fff; } .site-footer .brandline { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 700; margin-block-end: 0.75rem; } .site-footer .brandline img { width: 40px; height: 40px; } .footer-blurb { font-size: var(--step--1); margin: 0; max-width: 40ch; } .site-footer .fine { position: relative; border-block-start: 1px solid rgba(255, 255, 255, 0.1); padding-block: 1.125rem; font-size: var(--step--2); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ---------- Page hero (inner pages) ---------- */ .page-hero { position: relative; overflow: hidden; background: radial-gradient(800px 320px at 85% -30%, rgba(46, 116, 181, 0.55), transparent 62%), radial-gradient(520px 260px at 0% 130%, rgba(183, 110, 40, 0.25), transparent 60%), linear-gradient(160deg, var(--navy-d), var(--navy-xd)); color: #fff; } .page-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .page-hero .inner { position: relative; padding-block: clamp(2.75rem, 2rem + 3vw, 3.375rem) clamp(2.5rem, 1.75rem + 3vw, 3rem); max-width: 46em; } .page-hero h1 { margin: 0 0 0.375em; font-size: var(--step-4); color: #fff; } .page-hero p { margin: 0; color: #c6d6e6; font-size: var(--step-0); max-width: 60ch; } .crumbs { font-size: var(--step--2); color: #8fa9c0; margin-block-end: 1rem; } .crumbs a { color: #c6d6e6; } /* ---------- utilities (last: they win specificity ties) ---------- */ .ta-s, th.ta-s, td.ta-s { text-align: start; } .ta-c, th.ta-c, td.ta-c { text-align: center; } .ta-e, th.ta-e, td.ta-e { text-align: end; } .section-tight { padding-block-start: 2.75rem; } /* ============================================================ 5. MOTION EXTRAS (progressive; Chromium) ============================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; } @supports (animation-timeline: scroll()) { /* reading-progress hairline — zero JS */ .scroll-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 60; pointer-events: none; background: linear-gradient(90deg, var(--copper-xl), var(--copper) 55%, var(--navy-l)); transform-origin: 0 50%; animation: progress-grow linear both; animation-timeline: scroll(); } [dir='rtl'] .scroll-progress { transform-origin: 100% 50%; } @keyframes progress-grow { from { scale: 0 1; } to { scale: 1 1; } } } @supports (animation-timeline: view()) { .hero .aura { animation: hero-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } @keyframes hero-drift { to { translate: 0 calc(-50% + 90px); opacity: 0.4; } } } /* ============================================================ 6. RESPONSIVE + PRINT ============================================================ */ @media (max-width: 980px) { .brand .t2 { display: none; } .site-nav a { padding: 0.4375rem 0.625rem; } } @media (max-width: 860px) { .split, .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .menu-btn { display: grid; } .site-nav { position: absolute; inset-inline: 12px; inset-block-start: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border-radius: var(--radius); /* near-solid glass: the dropdown floats over arbitrary page content */ background: color-mix(in oklab, var(--surface-solid) 97%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--glass-brd); box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-lg); opacity: 0; translate: 0 -8px; visibility: hidden; transition: opacity 0.22s, translate 0.22s, visibility 0.22s; } .site-nav.open { opacity: 1; translate: 0 0; visibility: visible; } /* dropdown rows: comfortable ≥44px touch targets */ .site-nav a { text-align: center; padding: 0.75rem; min-height: 2.75rem; font-size: var(--step-0); } .site-nav .lang-menu { justify-content: center; margin-inline-start: 0; } .site-nav .lang-switch { min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; flex: 1; } .fam-nav a { padding: 0.5625rem 1rem; min-height: 2.5rem; display: inline-flex; align-items: center; } .hero .aura { width: 420px; height: 420px; inset-inline-end: -190px; opacity: 0.8; } .family > header { flex-wrap: wrap; } .family .counts { margin-inline-start: 0; justify-content: flex-start; } .family th, .family td { padding-inline: 0.875rem; } .stats .grid { grid-template-columns: 1fr 1fr; } .stats .cell + .cell { border-inline-start: 0; border-block-start: 1px solid var(--line-2); } .stats .cell:nth-child(2) { border-block-start: 0; border-inline-start: 1px solid var(--line-2); } .stats .cell:nth-child(4) { border-inline-start: 1px solid var(--line-2); } } @media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr; } } @media (max-width: 470px) { /* logo-only brand keeps the prominent login label on tiny screens */ .brand .t1 { display: none; } } /* ---------- Reduced motion: calm everything ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal] { opacity: 1; translate: none; } } /* ---------- Print ---------- */ @media print { .site-header, .site-footer, .cta-band, .btn, .btn-login, .fam-nav, .skip, .hero .aura, .scroll-progress { display: none !important; } body { background: #fff; } .family, .card, .panel { box-shadow: none; break-inside: avoid; background: #fff; } [data-reveal] { opacity: 1; translate: none; } }