/* ========================================================================== ŽOGU FABRIKA — PUBLIC design tokens v0.1 · 2026-10-11 · zogufabrika.lv + zoguveikals.lv -------------------------------------------------------------------------- The public variant of design system v2 (ref/zf-tokens.css). Same brand, same hue families, same accent anchors — different DENSITY and a single theme. WHAT IS THE SAME AS THE PORTAL (copied verbatim, do not fork) · the three raw ramps: cool neutral, cyan, amber · the dark-theme semantic aliases (--zf-bg-*, --zf-text-*, --zf-border-*, --zf-accent*, --zf-focus-ring, --zf-elev-*) — same names, same values, so a recipe written for the portal's dark theme works here untouched · font stack, weights, letter-spacing, motion · self-hosted Inter at /static/fonts/ (same file names as the portal) WHAT IS DIFFERENT (and why — see DESIGN-NOTES.md) · ONE theme. Decision D9: the public sites are dark. There is no light theme and no theme stamping; `color-scheme: dark` is set once. · a marketing TYPE SCALE on top of the portal's UI scale — fluid display sizes (clamp) up to 72 px, body 16/26 instead of 14/21 · a longer SPACE scale (up to 160 px) for section rhythm · a rounder RADIUS scale (cards 16, hero/media 24, sheets 28) · CONTAINER widths and page GUTTERS for a centred, max-width layout (the portal is a full-bleed app shell) · BREAKPOINTS, documented here; CSS cannot read custom properties inside @media, so the numbers are repeated literally in the component CSS THIS FILE STANDS ALONE. It does not need shell.css or zf-components.css. Public pages link: zf-public-tokens.css → zf-public-components.css. NAMING --zf-* tokens with the same meaning as in the portal (values identical) --zfp-* tokens that exist only on the public sites Never write a raw hex in a component file; reference a token. ========================================================================== */ /* -------------------------------------------------------------------------- 1. PRIMITIVES — identical to portal v2 §1. Do not use in components. -------------------------------------------------------------------------- */ :root { --zf-logo-gray: #808080; --zf-logo-ink: #111111; --zf-logo-line: #FFFFFF; /* cool neutral ramp, OKLCH hue ≈ 240°, chroma ≤ .025 */ --zf-neutral-0: #0A0D10; --zf-neutral-50: #0E1317; --zf-neutral-100: #11171B; --zf-neutral-200: #161D22; --zf-neutral-300: #1E262C; --zf-neutral-400: #232C33; --zf-neutral-500: #2C373F; --zf-neutral-600: #3D4A53; --zf-neutral-700: #626F79; --zf-neutral-800: #8695A0; --zf-neutral-900: #A8B6C0; --zf-neutral-950: #EAF0F4; /* cyan ramp, OKLCH hue 212.3° */ --zf-cyan-100: #BCF3FF; --zf-cyan-200: #93DBEB; --zf-cyan-300: #4FC3D9; /* brand accent anchor */ --zf-cyan-400: #2AA6BC; --zf-cyan-500: #02899D; --zf-cyan-600: #016D7D; --zf-cyan-700: #01515E; --zf-cyan-800: #003A43; /* amber ramp, OKLCH hue 73.0° */ --zf-amber-100: #FFE3C1; --zf-amber-200: #F6C483; --zf-amber-300: #F0A83C; /* secondary anchor */ --zf-amber-400: #C98500; --zf-amber-500: #A66D01; --zf-amber-600: #835501; --zf-amber-700: #633F00; } /* -------------------------------------------------------------------------- 2. SEMANTIC — the portal's DARK theme, promoted to the only theme. Contrast ratios are the portal's measurements on --zf-bg-surface (#161D22). -------------------------------------------------------------------------- */ :root { color-scheme: dark; /* Surfaces. Content advances (lighter), chrome recedes (darker). */ --zf-bg-page: var(--zf-neutral-50); /* page background */ --zf-bg-sunken: var(--zf-neutral-0); /* footer, cookie bar, wells */ --zf-bg-inset: var(--zf-neutral-100); /* inputs */ --zf-bg-surface: var(--zf-neutral-200); /* cards */ --zf-bg-surface-hover: var(--zf-neutral-300); --zf-bg-surface-raised:var(--zf-neutral-300); /* menus, popovers */ --zf-bg-nav: var(--zf-neutral-100); /* top bar */ /* Ink */ --zf-text-primary: var(--zf-neutral-950); /* 14.8:1 · AAA */ --zf-text-secondary: var(--zf-neutral-900); /* 8.2:1 · AAA */ --zf-text-muted: var(--zf-neutral-800); /* 5.5:1 · AA */ --zf-text-disabled: var(--zf-neutral-700); /* 3.3:1 · disabled only */ --zf-text-on-accent: var(--zf-neutral-50); /* 9.0:1 on accent fill */ --zf-text-inverse: var(--zf-neutral-50); /* Lines */ --zf-border-subtle: var(--zf-neutral-400); --zf-border-default: var(--zf-neutral-500); --zf-border-strong: var(--zf-neutral-600); --zf-border-accent: var(--zf-cyan-300); /* Accent — steel cyan. On dark the brand step itself carries text (8.2:1). */ --zf-accent: var(--zf-cyan-300); --zf-accent-hover: var(--zf-cyan-200); --zf-accent-active: var(--zf-cyan-400); --zf-accent-quiet: var(--zf-cyan-500); --zf-accent-wash: rgba(79, 195, 217, .12); --zf-accent-wash-hi: rgba(79, 195, 217, .20); --zf-accent-on-wash: var(--zf-cyan-200); /* Accent 2 — amber. Used for the shop CTA ("Nopirkt"), price, sale badge. */ --zf-accent-2: var(--zf-amber-300); /* 8.4:1 · AA */ --zf-accent-2-hover: var(--zf-amber-200); --zf-accent-2-active: var(--zf-amber-400); --zf-accent-2-wash: rgba(240, 168, 60, .12); --zf-text-on-accent-2: var(--zf-neutral-50); /* 9.4:1 on amber fill */ --zf-focus-ring: var(--zf-cyan-300); --zf-focus-ring-width: 2px; --zf-focus-ring-offset:2px; /* Status — only the two the public sites need (form success / error). */ --zf-status-good-fill: #0CA30C; --zf-status-good-text: #3FD07A; /* 8.5:1 */ --zf-status-critical-fill: #D03B3B; --zf-status-critical-text: #EF7A7A; /* 6.3:1 */ /* Elevation — on dark the border reads first, the shadow second. */ --zf-elev-0: none; --zf-elev-1: 0 1px 2px rgba(0, 0, 0, .40); --zf-elev-2: 0 4px 12px rgba(0, 0, 0, .45); --zf-elev-3: 0 12px 32px rgba(0, 0, 0, .55); --zf-logo-ring: var(--zf-logo-line); /* Public-only: image overlays and the hero scrim. */ --zfp-scrim: linear-gradient(180deg, rgba(10,13,16,.15) 0%, rgba(10,13,16,.75) 100%); --zfp-scrim-strong: linear-gradient(90deg, rgba(10,13,16,.92) 0%, rgba(10,13,16,.55) 55%, rgba(10,13,16,.15) 100%); --zfp-media-placeholder: linear-gradient(135deg, var(--zf-neutral-300), var(--zf-neutral-500)); } /* -------------------------------------------------------------------------- 3. TYPE Two scales live side by side: --zf-fs-* the portal UI scale (11–40 px) — used for labels, captions, badges, form controls, breadcrumbs, the footer. Unchanged. --zfp-fs-* the marketing scale — fluid between 360 px and 1280 px viewports. Body is 16/26, not 14/21: reading distance on a marketing page is longer than on a dashboard. -------------------------------------------------------------------------- */ :root { --zf-font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --zf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* portal UI scale (kept) */ --zf-fs-11: 11px; --zf-lh-11: 16px; --zf-fs-12: 12px; --zf-lh-12: 16px; --zf-fs-13: 13px; --zf-lh-13: 20px; --zf-fs-14: 14px; --zf-lh-14: 21px; --zf-fs-16: 16px; --zf-lh-16: 24px; --zf-fs-20: 20px; --zf-lh-20: 28px; --zf-fs-24: 24px; --zf-lh-24: 32px; --zf-fs-32: 32px; --zf-lh-32: 38px; --zf-fs-40: 40px; --zf-lh-40: 46px; /* marketing scale (new) — min @360px → max @1280px */ --zfp-fs-body: 16px; --zfp-lh-body: 1.625; /* 26px */ --zfp-fs-lead: clamp(17px, 1rem + 0.45vw, 20px); --zfp-lh-lead: 1.55; --zfp-fs-h4: clamp(17px, 1rem + 0.35vw, 19px); --zfp-lh-h4: 1.4; --zfp-fs-h3: clamp(20px, 1.05rem + 0.6vw, 24px); --zfp-lh-h3: 1.3; --zfp-fs-h2: clamp(28px, 1.3rem + 1.6vw, 40px); --zfp-lh-h2: 1.15; --zfp-fs-h1: clamp(34px, 1.5rem + 2.6vw, 56px); --zfp-lh-h1: 1.08; --zfp-fs-display: clamp(40px, 1.6rem + 4vw, 72px); --zfp-lh-display: 1.02; /* hero only */ --zfp-fs-stat: clamp(32px, 1.4rem + 2.2vw, 48px); --zfp-lh-stat: 1.05; /* stat strip figure */ --zfp-fs-price: clamp(22px, 1.1rem + 1vw, 28px); --zfp-lh-price: 1.1; --zfp-fs-eyebrow: 12px; --zfp-lh-eyebrow: 16px; /* uppercase, wide */ --zf-fw-regular: 400; --zf-fw-medium: 500; --zf-fw-semibold: 600; --zf-fw-bold: 700; --zf-ls-tight: -0.02em; /* ≥ 24px */ --zf-ls-tighter:-0.03em; /* display */ --zf-ls-snug: -0.01em; /* 16–20px */ --zf-ls-normal: 0; --zf-ls-wide: 0.06em; /* uppercase eyebrows */ /* Measure for running text. SEO sections are long; cap the line. */ --zfp-measure: 68ch; } /* -------------------------------------------------------------------------- 4. SPACE The portal scale (4–48) plus section-rhythm steps. Section padding is fluid so a phone does not get 128 px of empty space between blocks. -------------------------------------------------------------------------- */ :root { --zf-space-1: 4px; --zf-space-2: 8px; --zf-space-3: 12px; --zf-space-4: 16px; --zf-space-5: 20px; --zf-space-6: 24px; --zf-space-8: 32px; --zf-space-10: 40px; --zf-space-12: 48px; --zf-space-16: 64px; --zf-space-20: 80px; --zf-space-24: 96px; --zf-space-32: 128px; --zf-space-40: 160px; --zfp-section-y: clamp(56px, 4rem + 3vw, 112px); /* between page sections */ --zfp-section-y-sm: clamp(32px, 2rem + 2vw, 64px); /* stat strip, CTA bands */ --zfp-stack: var(--zf-space-6); /* heading → paragraph */ --zfp-grid-gap: clamp(16px, 1rem + 1vw, 32px); /* card grids */ } /* -------------------------------------------------------------------------- 5. SHAPE — rounder than the portal (D9 "rounded corners"). Portal: 4 / 6 / 10 / 14. Public: 6 / 10 / 16 / 24 / 28. -------------------------------------------------------------------------- */ :root { --zf-radius-sm: 6px; /* badges, chips */ --zf-radius-md: 10px; /* buttons, inputs */ --zf-radius-lg: 16px; /* cards, FAQ items, form panels */ --zf-radius-xl: 24px; /* hero media, map, large image tiles */ --zf-radius-2xl: 28px; /* cookie sheet, modal */ --zf-radius-pill: 999px; } /* -------------------------------------------------------------------------- 6. MOTION — same as portal, plus one slower step for carousels. -------------------------------------------------------------------------- */ :root { --zf-dur-fast: 120ms; --zf-dur-base: 180ms; --zf-dur-slow: 320ms; --zf-ease: cubic-bezier(.2, 0, .2, 1); } /* -------------------------------------------------------------------------- 7. LAYOUT — containers, gutters, breakpoints, fixed heights. -------------------------------------------------------------------------- */ :root { --zfp-container: 1200px; /* default content width */ --zfp-container-wide: 1360px; /* hero, carousels, product grid */ --zfp-container-narrow: 800px; /* long text (SEO copy), articles */ --zfp-container-form: 640px; /* contact form, request form */ /* Page gutter: 16 on phones (prompt requirement), 24 from 768, 32 from 1024 */ --zfp-gutter: 16px; --zfp-topbar-h: 64px; /* portal: 56 — a touch taller, roomier */ --zfp-topbar-h-compact: 56px; /* after scroll / on phones */ /* Breakpoints (documentation only — repeat literally in @media): --bp-sm 480px two-up card grid, inline form rows --bp-md 768px gutter 24, nav still a drawer --bp-lg 1024px gutter 32, full horizontal nav, 3-up grids --bp-xl 1280px 4-up product grid, hero text + media side by side */ } @media (min-width: 768px) { :root { --zfp-gutter: 24px; } } @media (min-width: 1024px) { :root { --zfp-gutter: 32px; } } /* -------------------------------------------------------------------------- 8. SELF-HOSTED INTER — same four files as the portal (277 KB total). The latin-ext subset carries ā ē ī ķ ļ ņ š ū ž. NOTE: Cyrillic is NOT in these subsets, so the RU pages fall back to the system stack until a cyrillic subset (inter-cyrillic-wght-normal.woff2) is added — DESIGN-NOTES Q3. -------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-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: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin-wght-italic.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: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin-ext-wght-italic.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; } /* Cyrillic subsets for /ru/ (chat E, Dima 11.10.2026 — Q3 of DESIGN-NOTES). Source: @fontsource-variable/inter 5.2.5, OFL. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-cyrillic-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-cyrillic-wght-italic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* -------------------------------------------------------------------------- 9. BASE — public body defaults. (Component recipes live in zf-public-components.css, not here, so this file stays a token sheet.) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--zf-bg-page); color: var(--zf-text-primary); font-family: var(--zf-font-sans); font-size: var(--zfp-fs-body); line-height: var(--zfp-lh-body); font-weight: var(--zf-fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv05" 1, "ss03" 1; overflow-x: clip; /* a stray 1px overflow must never produce a horizontal scrollbar on phones */ } img, video, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0; font-weight: var(--zf-fw-semibold); color: var(--zf-text-primary); text-wrap: balance; } h1 { font-size: var(--zfp-fs-h1); line-height: var(--zfp-lh-h1); letter-spacing: var(--zf-ls-tight); } h2 { font-size: var(--zfp-fs-h2); line-height: var(--zfp-lh-h2); letter-spacing: var(--zf-ls-tight); } h3 { font-size: var(--zfp-fs-h3); line-height: var(--zfp-lh-h3); letter-spacing: var(--zf-ls-snug); } h4 { font-size: var(--zfp-fs-h4); line-height: var(--zfp-lh-h4); letter-spacing: var(--zf-ls-snug); } p { margin: 0 0 var(--zf-space-4); } p:last-child { margin-bottom: 0; } a { color: var(--zf-accent); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; } a:hover { color: var(--zf-accent-hover); text-decoration-color: currentColor; } :focus-visible { outline: var(--zf-focus-ring-width) solid var(--zf-focus-ring); outline-offset: var(--zf-focus-ring-offset); border-radius: var(--zf-radius-sm); } ::selection { background: var(--zf-accent-wash-hi); color: var(--zf-text-primary); } .zf-tnum { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media (forced-colors: active) { .zfp-btn, .zfp-card, .zfp-input { border: 1px solid CanvasText; } }