@charset "UTF-8";body > #page > #header[role=banner]{display:none}:root{--width:80rem;--margin:6.25rem;--padding:1rem}@media (max-width:1000px){:root{--margin:1rem}}@media (max-width:600px){:root{--margin:1rem}}*{box-sizing:border-box;margin:0}html{font-size:16px;scroll-behavior:smooth}body{overflow-x:hidden}body.prevent-scroll{overflow:hidden}.component a{text-decoration:none}.underline{text-decoration:underline}.mw{max-width:var(--width);width:100%;margin-left:auto;margin-right:auto}.mw-200{max-width:12.5rem}@media (min-width:calc(1000px + 1px)){.mw-200-d{max-width:12.5rem}}.mw-210{max-width:13.125rem}@media (min-width:calc(1000px + 1px)){.mw-210-d{max-width:13.125rem}}.mw-220{max-width:13.75rem}@media (min-width:calc(1000px + 1px)){.mw-220-d{max-width:13.75rem}}.mw-230{max-width:14.375rem}@media (min-width:calc(1000px + 1px)){.mw-230-d{max-width:14.375rem}}.mw-240{max-width:15rem}@media (min-width:calc(1000px + 1px)){.mw-240-d{max-width:15rem}}.mw-250{max-width:15.625rem}@media (min-width:calc(1000px + 1px)){.mw-250-d{max-width:15.625rem}}.mw-260{max-width:16.25rem}@media (min-width:calc(1000px + 1px)){.mw-260-d{max-width:16.25rem}}.mw-270{max-width:16.875rem}@media (min-width:calc(1000px + 1px)){.mw-270-d{max-width:16.875rem}}.mw-280{max-width:17.5rem}@media (min-width:calc(1000px + 1px)){.mw-280-d{max-width:17.5rem}}.mw-290{max-width:18.125rem}@media (min-width:calc(1000px + 1px)){.mw-290-d{max-width:18.125rem}}.mw-300{max-width:18.75rem}@media (min-width:calc(1000px + 1px)){.mw-300-d{max-width:18.75rem}}.mw-310{max-width:19.375rem}@media (min-width:calc(1000px + 1px)){.mw-310-d{max-width:19.375rem}}.mw-320{max-width:20rem}@media (min-width:calc(1000px + 1px)){.mw-320-d{max-width:20rem}}.mw-330{max-width:20.625rem}@media (min-width:calc(1000px + 1px)){.mw-330-d{max-width:20.625rem}}.mw-340{max-width:21.25rem}@media (min-width:calc(1000px + 1px)){.mw-340-d{max-width:21.25rem}}.mw-350{max-width:21.875rem}@media (min-width:calc(1000px + 1px)){.mw-350-d{max-width:21.875rem}}.mw-360{max-width:22.5rem}@media (min-width:calc(1000px + 1px)){.mw-360-d{max-width:22.5rem}}.mw-370{max-width:23.125rem}@media (min-width:calc(1000px + 1px)){.mw-370-d{max-width:23.125rem}}.mw-380{max-width:23.75rem}@media (min-width:calc(1000px + 1px)){.mw-380-d{max-width:23.75rem}}.mw-390{max-width:24.375rem}@media (min-width:calc(1000px + 1px)){.mw-390-d{max-width:24.375rem}}.mw-400{max-width:25rem}@media (min-width:calc(1000px + 1px)){.mw-400-d{max-width:25rem}}.mw-410{max-width:25.625rem}@media (min-width:calc(1000px + 1px)){.mw-410-d{max-width:25.625rem}}.mw-420{max-width:26.25rem}@media (min-width:calc(1000px + 1px)){.mw-420-d{max-width:26.25rem}}.mw-430{max-width:26.875rem}@media (min-width:calc(1000px + 1px)){.mw-430-d{max-width:26.875rem}}.mw-440{max-width:27.5rem}@media (min-width:calc(1000px + 1px)){.mw-440-d{max-width:27.5rem}}.mw-450{max-width:28.125rem}@media (min-width:calc(1000px + 1px)){.mw-450-d{max-width:28.125rem}}.mw-460{max-width:28.75rem}@media (min-width:calc(1000px + 1px)){.mw-460-d{max-width:28.75rem}}.mw-470{max-width:29.375rem}@media (min-width:calc(1000px + 1px)){.mw-470-d{max-width:29.375rem}}.mw-480{max-width:30rem}@media (min-width:calc(1000px + 1px)){.mw-480-d{max-width:30rem}}.mw-490{max-width:30.625rem}@media (min-width:calc(1000px + 1px)){.mw-490-d{max-width:30.625rem}}.mw-500{max-width:31.25rem}@media (min-width:calc(1000px + 1px)){.mw-500-d{max-width:31.25rem}}.mw-510{max-width:31.875rem}@media (min-width:calc(1000px + 1px)){.mw-510-d{max-width:31.875rem}}.mw-520{max-width:32.5rem}@media (min-width:calc(1000px + 1px)){.mw-520-d{max-width:32.5rem}}.mw-530{max-width:33.125rem}@media (min-width:calc(1000px + 1px)){.mw-530-d{max-width:33.125rem}}.mw-540{max-width:33.75rem}@media (min-width:calc(1000px + 1px)){.mw-540-d{max-width:33.75rem}}.mw-550{max-width:34.375rem}@media (min-width:calc(1000px + 1px)){.mw-550-d{max-width:34.375rem}}.mw-560{max-width:35rem}@media (min-width:calc(1000px + 1px)){.mw-560-d{max-width:35rem}}.mw-570{max-width:35.625rem}@media (min-width:calc(1000px + 1px)){.mw-570-d{max-width:35.625rem}}.mw-580{max-width:36.25rem}@media (min-width:calc(1000px + 1px)){.mw-580-d{max-width:36.25rem}}.mw-590{max-width:36.875rem}@media (min-width:calc(1000px + 1px)){.mw-590-d{max-width:36.875rem}}.mw-600{max-width:37.5rem}@media (min-width:calc(1000px + 1px)){.mw-600-d{max-width:37.5rem}}.mw-610{max-width:38.125rem}@media (min-width:calc(1000px + 1px)){.mw-610-d{max-width:38.125rem}}.mw-620{max-width:38.75rem}@media (min-width:calc(1000px + 1px)){.mw-620-d{max-width:38.75rem}}.mw-630{max-width:39.375rem}@media (min-width:calc(1000px + 1px)){.mw-630-d{max-width:39.375rem}}.mw-640{max-width:40rem}@media (min-width:calc(1000px + 1px)){.mw-640-d{max-width:40rem}}.mw-650{max-width:40.625rem}@media (min-width:calc(1000px + 1px)){.mw-650-d{max-width:40.625rem}}.mw-660{max-width:41.25rem}@media (min-width:calc(1000px + 1px)){.mw-660-d{max-width:41.25rem}}.mw-670{max-width:41.875rem}@media (min-width:calc(1000px + 1px)){.mw-670-d{max-width:41.875rem}}.mw-680{max-width:42.5rem}@media (min-width:calc(1000px + 1px)){.mw-680-d{max-width:42.5rem}}.mw-690{max-width:43.125rem}@media (min-width:calc(1000px + 1px)){.mw-690-d{max-width:43.125rem}}.mw-700{max-width:43.75rem}@media (min-width:calc(1000px + 1px)){.mw-700-d{max-width:43.75rem}}.mw-710{max-width:44.375rem}@media (min-width:calc(1000px + 1px)){.mw-710-d{max-width:44.375rem}}.mw-720{max-width:45rem}@media (min-width:calc(1000px + 1px)){.mw-720-d{max-width:45rem}}.mw-730{max-width:45.625rem}@media (min-width:calc(1000px + 1px)){.mw-730-d{max-width:45.625rem}}.mw-740{max-width:46.25rem}@media (min-width:calc(1000px + 1px)){.mw-740-d{max-width:46.25rem}}.mw-750{max-width:46.875rem}@media (min-width:calc(1000px + 1px)){.mw-750-d{max-width:46.875rem}}.mw-760{max-width:47.5rem}@media (min-width:calc(1000px + 1px)){.mw-760-d{max-width:47.5rem}}.mw-770{max-width:48.125rem}@media (min-width:calc(1000px + 1px)){.mw-770-d{max-width:48.125rem}}.mw-780{max-width:48.75rem}@media (min-width:calc(1000px + 1px)){.mw-780-d{max-width:48.75rem}}.mw-790{max-width:49.375rem}@media (min-width:calc(1000px + 1px)){.mw-790-d{max-width:49.375rem}}.mw-800{max-width:50rem}@media (min-width:calc(1000px + 1px)){.mw-800-d{max-width:50rem}}.mw-810{max-width:50.625rem}@media (min-width:calc(1000px + 1px)){.mw-810-d{max-width:50.625rem}}.mw-820{max-width:51.25rem}@media (min-width:calc(1000px + 1px)){.mw-820-d{max-width:51.25rem}}.mw-830{max-width:51.875rem}@media (min-width:calc(1000px + 1px)){.mw-830-d{max-width:51.875rem}}.mw-840{max-width:52.5rem}@media (min-width:calc(1000px + 1px)){.mw-840-d{max-width:52.5rem}}.mw-850{max-width:53.125rem}@media (min-width:calc(1000px + 1px)){.mw-850-d{max-width:53.125rem}}.mw-860{max-width:53.75rem}@media (min-width:calc(1000px + 1px)){.mw-860-d{max-width:53.75rem}}.mw-870{max-width:54.375rem}@media (min-width:calc(1000px + 1px)){.mw-870-d{max-width:54.375rem}}.mw-880{max-width:55rem}@media (min-width:calc(1000px + 1px)){.mw-880-d{max-width:55rem}}.mw-890{max-width:55.625rem}@media (min-width:calc(1000px + 1px)){.mw-890-d{max-width:55.625rem}}.mw-900{max-width:56.25rem}@media (min-width:calc(1000px + 1px)){.mw-900-d{max-width:56.25rem}}.mw-910{max-width:56.875rem}@media (min-width:calc(1000px + 1px)){.mw-910-d{max-width:56.875rem}}.mw-920{max-width:57.5rem}@media (min-width:calc(1000px + 1px)){.mw-920-d{max-width:57.5rem}}.mw-930{max-width:58.125rem}@media (min-width:calc(1000px + 1px)){.mw-930-d{max-width:58.125rem}}.mw-940{max-width:58.75rem}@media (min-width:calc(1000px + 1px)){.mw-940-d{max-width:58.75rem}}.mw-950{max-width:59.375rem}@media (min-width:calc(1000px + 1px)){.mw-950-d{max-width:59.375rem}}.mw-960{max-width:60rem}@media (min-width:calc(1000px + 1px)){.mw-960-d{max-width:60rem}}.mw-970{max-width:60.625rem}@media (min-width:calc(1000px + 1px)){.mw-970-d{max-width:60.625rem}}.mw-980{max-width:61.25rem}@media (min-width:calc(1000px + 1px)){.mw-980-d{max-width:61.25rem}}.mw-990{max-width:61.875rem}@media (min-width:calc(1000px + 1px)){.mw-990-d{max-width:61.875rem}}.mw-1000{max-width:62.5rem}@media (min-width:calc(1000px + 1px)){.mw-1000-d{max-width:62.5rem}}.mw-1010{max-width:63.125rem}@media (min-width:calc(1000px + 1px)){.mw-1010-d{max-width:63.125rem}}.mw-1020{max-width:63.75rem}@media (min-width:calc(1000px + 1px)){.mw-1020-d{max-width:63.75rem}}.mw-1030{max-width:64.375rem}@media (min-width:calc(1000px + 1px)){.mw-1030-d{max-width:64.375rem}}.mw-1040{max-width:65rem}@media (min-width:calc(1000px + 1px)){.mw-1040-d{max-width:65rem}}.mw-1050{max-width:65.625rem}@media (min-width:calc(1000px + 1px)){.mw-1050-d{max-width:65.625rem}}.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}@media (max-width:1000px){.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}}@media (max-width:600px){.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}}.fw{width:100%}.center{text-align:center}button{cursor:pointer}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.noscroll{-ms-overflow-style:none;scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}@media (max-width:1000px){.desktop{display:none !important}}@media (min-width:calc(1000px + 1px)){.mobile{display:none !important}}.fw{width:100%}.flex{display:flex;justify-content:center;align-items:center}.flex-c{display:flex;justify-content:center;align-items:center;flex-direction:column}.auto{margin-left:auto;margin-right:auto}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.upper{text-transform:uppercase}.component{position:relative}.component:empty{display:none}.component-error code{padding:0.1875rem 0.3125rem 0.125rem;background:rgba(0, 0, 0, 0.07);margin-top:0.5rem;font-weight:400 !important}/* ============================================================================ BETTRWEB — theme globals (design tokens, grid, base styles, primitives). Single source of truth:design-system.md (repo root). Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for mixins/@extend) → components → theme style.scss. ========================================================================== */ /* LEGACY COMPAT:hero / not_found / post_content still reference these two. Remove together with those components' rebuild. */
/* ---- Self-hosted fonts:PP Neue Montreal (design-system §2.1) -------------- The design uses exactly two styles:Medium 500 (~everything) and Book 400 (footer contact values). Book registers at 400 (the slot the design references);Regular is parked at 450 so the two 400-embedded files never collide. */
@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Thin.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-ThinItalic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:300;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Light.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Book.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Regular.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Italic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Medium.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Bold.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-BoldItalic.woff2") format("woff2")}:root{--width:90rem;--padding:2rem;--color-black:#141414;--color-white:#ffffff;--color-grey:#515151;--color-orange:#ff3b14;/* LEGACY COMPAT remaps (hero / not_found / post_content still reference the old Wine Collectors names;remapped onto the BETTRWEB palette so nothing renders off-brand while those components await their rebuild). */ --green:var(--color-black);--verde:var(--color-white);--gold:var(--color-orange);--red:var(--color-orange);--mint:var(--color-white);--font-h:"PP Neue Montreal", system-ui, sans-serif;--font-b:"PP Neue Montreal", system-ui, sans-serif;--grid-columns:12;--grid-gutter:1rem;--grid-margin:2rem;--cols:var(--grid-columns);--gutter:var(--grid-gutter);--margin:var(--grid-margin);/* Header offset — MUST equal the rendered .component-header height, because 13 sections use it as their fixed-header padding-top. Derived, not guessed:block padding ×2 + the TALLEST bar child + the 1px bottom rule. The tallest child is the "Sazināties" button (38px) on desktop and the burger (44px) once the nav collapses — NOT the 26px logo (the old 90px value assumed the logo and left the header overlapping content by 13px). Keep --header-pad in sync with .header__bar padding-block;the bar reads this same variable so the two cannot drift apart again. */ --header-pad:32px;--header-control-h:38px;--header-h:calc(var(--header-pad) * 2 + var(--header-control-h) + 1px);--text-h1:clamp(40px, 2.1vw + 32px, 80px);--text-h2:clamp(30px, 0.94vw + 30px, 48px);--text-h3:clamp(20px, 0.2vw + 20px, 24px);--text-lg:clamp(18px, 0.1vw + 18px, 20px);--text-nav:18px;--text-body:clamp(16px, 0.1vw + 16px, 18px);--text-sm:16px;--text-xs:14px;--track-1:-0.01em;--track-2:-0.02em;--space-1:1rem;--space-2:2rem;--space-3:3rem;--space-4:4rem;--space-6:6rem;--section-pad:var(--space-6);--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);/* Underlined-link convention (client fix 2026-08-11):PP Neue Montreal's embedded underline metrics place a `from-font` underline INSIDE the glyph box (strike-through look), so every text underline uses an explicit offset + 1px hairline instead — matches the Figma clean 1px line below the baseline. skip-ink:none keeps the line continuous. */ --underline-offset:0.15em;--t-display:var(--text-h1);--t-h2:var(--text-h2);--t-h3:var(--text-h3);--t-lead:var(--text-body);--t-body:var(--text-body);--t-small:var(--text-xs);/* Header shrinks with the nav:below $tablet the bar padding drops and the 44px burger becomes the tallest child, so the offset must follow. */}@media (min-width:1440px){:root{--grid-margin:3rem}}@media (max-width:1023px){:root{--header-pad:24px;--header-control-h:44px}}@media (max-width:767px){:root{--grid-columns:4;--padding:1.25rem;--header-pad:20px}}html{font-size:16px;scroll-behavior:auto;/* clip (not hidden):hidden creates a scroll container that breaks position:sticky descendants;clip doesn't. */ overflow-x:hidden;overflow-x:clip;/* Native scrollbar fully hidden — the fixed grey pill (.scroll-indicator, JS-driven, ported from wine-collectors) replaces it. */ scrollbar-width:none}::-webkit-scrollbar{display:none;width:0}body{font-family:var(--font-b);font-weight:500;font-size:var(--text-body);line-height:1.5;letter-spacing:var(--track-1);color:var(--color-white);background:var(--color-black);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}main[data-barba=container]{position:relative;z-index:1}/* Headings — sentence case (no auto-uppercase;.u-caps is the only caps utility, reserved for card meta / legal lines). All Medium 500. */
h1, h2, h3, h4, h5, h6{font-family:var(--font-h);font-weight:500;font-style:normal;margin:0}h1{font-size:var(--text-h1);line-height:1;letter-spacing:var(--track-2)}h2{font-size:var(--text-h2);line-height:1.2;letter-spacing:var(--track-1)}h3{font-size:var(--text-h3);line-height:1.2;letter-spacing:var(--track-1)}p{margin:0}p + p{margin-top:9px}a{color:inherit}em, i, .italic{font-style:italic}::selection{background:var(--color-orange);color:var(--color-white)}.t-h1, .t-display{font-size:var(--text-h1);font-weight:500;line-height:1;letter-spacing:var(--track-2)}.t-h2{font-size:var(--text-h2);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-h3{font-size:var(--text-h3);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-lg, .t-lead{font-size:var(--text-lg);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-body{font-size:var(--text-body);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-sm{font-size:var(--text-sm);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-xs, .t-small, .t-meta{font-size:var(--text-xs);font-weight:500;line-height:1;letter-spacing:var(--track-1)}.u-caps{text-transform:uppercase}/* ---- Grid (design-system §3 — non-negotiable) -------------------------------- 12 columns (4 on mobile), 1rem gutters, fluid side margins. Components place content with grid-column — no arbitrary flexbox positioning. */
.grid{display:grid;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin);position:relative}.grid-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin)}.grid-overlay span{background:rgba(255, 59, 20, 0.06);outline:1px solid rgba(255, 59, 20, 0.18);height:100%}body.show-grid .grid-overlay{display:grid}/* ---- Custom scroll indicator (native scrollbar hidden above) ------------------ Ported from wine-collectors (same JS driver, brand colors swapped:grey #515151 thumb on the transparent/near-black canvas, no accent — orange is reserved for the one hover moment per view). JS (initWCScrollIndicator) sizes the thumb and translates it;fades in on scroll activity, out after 900ms idle. z-index 1500:above content + header, below the transition curtain (10000) and grid overlay (9998... below grid overlay too). */
.scroll-indicator{position:fixed;top:0;right:5px;width:6px;height:44px;border-radius:999px;background:var(--color-grey);z-index:1500;pointer-events:none;opacity:0;transition:opacity 0.2s ease;will-change:transform, opacity}.scroll-indicator.is-visible{opacity:1}/* ---- Pill button (design-system §5.1, Figma 129:13403) ----------------------- Reusable:.btn-pill anywhere (header CTA, section CTAs). Dark-surface default (white);.btn-pill--dark derived for white surfaces (no on-white button exists in Figma — flagged for design review). Hover:white → orange (border+text+arrow via currentColor), gap 4→8px. */
.btn-pill,
.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 11px 6px 15px;border:1px solid currentColor;border-radius:100px;background:transparent;color:var(--color-white);font-family:var(--font-b);font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-2);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color 0.3s var(--ease-osmo), gap 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.btn-pill:hover, .wc-btn:hover{color:var(--color-orange);gap:8px}}.btn-pill--dark{color:var(--color-black)}/* 24px icon box;the real Figma arrow vector (12.36×19.14 up-arrow) rotated 90° reads as the right-pointing 24px arrow. fill/stroke = currentColor so the hover recolor needs no second file. */
.btn-pill__icon{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center}.btn-pill__icon svg{display:block;width:12.4px;height:19.2px;transform:rotate(90deg)}/* ---- Inline text link (design-system §5.3) ------------------------------------ "Uzzināt vairāk" / "Apskatīt visus" pattern:white, no underline;hover = orange + underline. 20px inside list rows (.link--lg), 18px elsewhere. */
.link{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:none;transition:color 0.3s var(--ease-osmo)}.link--lg{font-size:var(--text-lg);line-height:1.2}@media (hover:hover) and (pointer:fine){.link:hover{color:var(--color-orange);text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:1px;text-decoration-skip-ink:none}}/* Section-top underlined link (Figma "Apskatīt visus" / "Atsauksmes" / "Vairāk par mums":18px, white, underlined by default;hover → orange). `a.link-u` is needed to out-rank the plugin's `.component a{text-decoration:none}` (equal specificity, later source order). */
a.link-u,
.link-u{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:1px;text-decoration-skip-ink:none;transition:color 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){a.link-u:hover{color:var(--color-orange)}}/* ---- Animated underline sweep (§5.2 header-nav language, shared) -------------- The hover underline convention for single-line links:a 1px currentColor line sweeps in from the LEFT (scaleX 0 → 1, 0.3s house osmo ease). Extracted from the header menu item (client fix 2026-08-12) so footer/service/legal links share one mechanism instead of instant text-decoration flips. Include sweep-underline on the link (or its label span), then trigger with `&::after{transform:scaleX(1)}` from the hover/active rule. NOT for:permanent underlines (.link-u, footer contact values, active filter — those stay static), or links that can WRAP to multiple lines (a pseudo-element underline only draws under the element box, so it breaks on wrapped lines — those keep static text-decoration, see footer mobile). */ .hairline{border:0;height:1px;background:var(--color-grey)}.rotating-badge{position:absolute;width:110px;height:110px;z-index:5}.rotating-badge__ring{width:100%;height:100%;will-change:transform}@media (max-width:699px){.rotating-badge{display:none}}/* ---- Accordion primitive (Figma BUJ sekcija 156:8171 + service single 181:8667 — the two accordion usages share one mechanic) -------------------- Rows on #515151 hairlines, 24px Medium question, right-side icon (chevron in the BUJ spec, plus in the service-single spec — .acc__icon--plus). Height animation is GSAP-owned (initAccordions, components/faq/index.js);CSS only defines states + the reduced-motion/no-JS fallback. Answer typography is DERIVED (Figma shows only closed rows) — 18px Book on 66% width — flagged for design review. */
.acc{display:flex;flex-direction:column;width:100%}.acc__item{border-bottom:1px solid var(--color-grey)}.acc__item:first-child{border-top:1px solid var(--color-grey)}.acc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);width:100%;padding:var(--space-2) 0;background:none;border:0;color:inherit;font-family:var(--font-h);text-align:left;cursor:pointer}.acc__title{position:relative;font-size:var(--text-h3);font-weight:500;line-height:1.2;letter-spacing:var(--track-1);/* Orange dot after the label on hover — the nav-item language (header__link::after):10px circle, 8px right of the text, eased scale + fade. Absolutely positioned so it never shifts the row. */}.acc__title::after{content:"";position:absolute;left:calc(100% + 8px);top:50%;width:10px;height:10px;border-radius:50%;background:var(--color-orange);transform:translateY(-50%) scale(0.4);opacity:0;transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.acc__icon{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform 0.5s var(--ease-osmo)}.acc__icon svg{display:block;fill:currentColor}.acc__item.is-open .acc__icon--chevron{transform:rotate(180deg)}.acc__item.is-open .acc__icon--plus{transform:rotate(45deg)}.acc__panel{overflow:hidden}.acc__panel[hidden]{display:none}.acc__body{padding-bottom:var(--space-2);max-width:66%;font-size:var(--text-body);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}@media (max-width:767px){.acc__body{max-width:100%}}/* Hover reveals the orange dot after the title (client 2026-08-15 — replaces the old red text-colour change, which the client didn't want). */
@media (hover:hover) and (pointer:fine){.acc__head:hover .acc__title::after{opacity:1;transform:translateY(-50%) scale(1)}}@media (prefers-reduced-motion:reduce){.acc__icon{transition:none}}/* ---- Accent dot (Figma Ellipse 14 — 24px orange circle preceding display copy in the CTA + service intro;the sanctioned one-orange-moment) -------- */
.accent-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--color-orange);flex:none}/* ---- Contact-form validation message (shared primitive) ----------------------- Both contact forms carry the .contact__field class (components/contact's dark placeholder rows AND contact_page's light label rows — the kontakti markup stacks .cp__field on top), so this lives here like the .acc primitive. The message (.contact__error, injected by initContactForm) sits ABSOLUTE just below the field's underline — showing/hiding never shifts the layout — 14px orange, fading/rising in 0.3s osmo while the underline flips orange in sync (is-invalid). No Figma spec for form errors (design-system §5 "no form fields exist in Figma") — derived;FLAGGED for design review. */
.contact__field{position:relative}.contact__error{position:absolute;left:0;top:calc(100% + 5px);font-size:var(--text-xs);font-weight:500;line-height:1;letter-spacing:var(--track-1);color:var(--color-orange);opacity:0;transform:translateY(-4px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo);pointer-events:none}.contact__field.is-invalid .contact__error{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.contact__error{transition:none}}/* ---- Contact-form attachments (shared primitive) ------------------------------ File-upload row for both contact forms (services CTA on dark, kontakti on light) — same underline-row language as the text fields:"Pielikumi" label + hint left, "Pievienot failu" trigger (the Figma plus glyph, same vector as the service-single accordion) right, all on one hairline row. Selected files stack as rows above the underline;drag-and-drop highlights the row with a dashed hairline + orange accent (the sanctioned hover-orange). Everything currentColor so the dark/light surfaces both work. No Figma spec for file fields (design-system §5:none exist) — DERIVED from the underline-row + accordion primitives;FLAGGED for design review. */
.contact__attach{display:flex;flex-direction:column;border-bottom:1px solid currentColor;padding-bottom:7px;transition:border-color 0.3s var(--ease-osmo);/* Drag-over:dashed hairline + the orange accent (subtle — border+trigger only, no fills;orange discipline §1). Two-class specificity so it out-ranks the component sheets' .contact__field border rules. */}.contact__attach.is-invalid, .contact__attach:focus-within{border-bottom-color:var(--color-orange)}.contact__attach.is-dragover{border-bottom-style:dashed;border-bottom-color:var(--color-orange)}.contact__attach.is-dragover .contact__attach-trigger{color:var(--color-orange)}.contact__attach-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-1);flex-wrap:wrap}.contact__attach-label{font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-1)}.contact__attach-hint{font-size:var(--text-xs);opacity:0.5;white-space:nowrap}/* The real stays in the DOM, focusable, visually hidden (sr-only recipe — NOT display:none) inside the trigger label;clicking or activating the trigger opens the native picker. Two-class specificity out-ranks the component sheets' `.contact__field input` sizing rules. */
.contact__attach .contact__attach-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.contact__attach-trigger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-1);color:inherit;transition:color 0.3s var(--ease-osmo);/* Keyboard focus on the hidden input lights the trigger like every other focusable (mirrors the global:focus-visible outline). */}.contact__attach-trigger:has(.contact__attach-input:focus-visible){outline:2px solid var(--color-orange);outline-offset:3px}@media (hover:hover) and (pointer:fine){.contact__attach-trigger:hover{color:var(--color-orange)}}.contact__attach-plus{flex:none;display:flex;align-items:center;justify-content:center;width:15px;height:15px}.contact__attach-plus svg{display:block;width:100%;height:100%;fill:currentColor}/* Selected-files list:each file is a row (hairline-separated, echoing the underline language) — truncated name left, size + remove "×" right. Rows animate in/out with the house 0.3s osmo fade/rise (JS toggles .is-in / .is-leaving);reduced-motion renders instantly. */
.contact__attach-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}.contact__attach-list[hidden]{display:none}.contact__attach-item{display:flex;align-items:center;gap:var(--space-1);padding:8px 0;border-top:1px dashed color-mix(in srgb, currentColor 25%, transparent);font-size:var(--text-xs);line-height:1.5;letter-spacing:var(--track-1);opacity:0;transform:translateY(6px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.contact__attach-item.is-in{opacity:1;transform:none}.contact__attach-item.is-leaving{opacity:0;transform:translateY(-4px)}.contact__attach-name{font-weight:500;min-width:0;overflow:hidden;white-space:nowrap}.contact__attach-size{margin-left:auto;flex:none;font-weight:400;opacity:0.5}.contact__attach-remove{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:-4px;padding:0;background:none;border:0;color:inherit;font-family:var(--font-b);font-weight:400;font-size:18px;line-height:1;cursor:pointer;transition:color 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.contact__attach-remove:hover{color:var(--color-orange)}}@media (prefers-reduced-motion:reduce){.contact__attach, .contact__attach-item{transition:none}}/* Sending state (files can take seconds):the pill's label swaps to "Sūta..." (JS) and the arrow pulses subtly while disabled. DERIVED (no Figma loading spec) — FLAGGED for design review. */
.btn-pill.loading{cursor:progress}.btn-pill.loading .btn-pill__icon svg{animation:bw-send-pulse 1.1s var(--ease-osmo) infinite alternate}@keyframes bw-send-pulse{from{opacity:1}to{opacity:0.3}}@media (prefers-reduced-motion:reduce){.btn-pill.loading .btn-pill__icon svg{animation:none;opacity:0.5}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}a:focus-visible,
button:focus-visible{outline:2px solid var(--color-orange);outline-offset:3px}.wc-anchor{position:absolute;top:0;left:0;width:1px;height:1px}/* ---- Honeypot (spam trap, shared by every form) -------------------------- A real field to a bot, invisible and unreachable to a person:off-canvas rather than display:none (which naive scrapers skip), out of the tab order, aria-hidden so screen readers never announce it, and autocomplete off so no browser ever fills it on someone's behalf. Any value arriving in it means the sender was not a person — submissions.php drops those. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}/* ---- Hero WebGL slider canvas (components/hero/index.js) ----------------- Sits above the DOM slide stack inside .hero__media / .sh__media (the imgs stay as the LCP/SEO source and the CSS-crossfade fallback). Removed by JS on context loss / reduced motion / no WebGL. */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}/* ============================================================================ BETTRWEB — theme globals (design tokens, grid, base styles, primitives). Single source of truth:design-system.md (repo root). Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for mixins/@extend) → components → theme style.scss. ========================================================================== */ /* LEGACY COMPAT:hero / not_found / post_content still reference these two. Remove together with those components' rebuild. */
/* ---- Self-hosted fonts:PP Neue Montreal (design-system §2.1) -------------- The design uses exactly two styles:Medium 500 (~everything) and Book 400 (footer contact values). Book registers at 400 (the slot the design references);Regular is parked at 450 so the two 400-embedded files never collide. */
@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Thin.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:100;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-ThinItalic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:300;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Light.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Book.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Regular.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:450;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Italic.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Medium.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-Bold.woff2") format("woff2")}@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:700;font-display:swap;src:url("/wp-content/themes/dev/fonts/PPNeueMontreal-BoldItalic.woff2") format("woff2")}:root{--width:90rem;--padding:2rem;--color-black:#141414;--color-white:#ffffff;--color-grey:#515151;--color-orange:#ff3b14;/* LEGACY COMPAT remaps (hero / not_found / post_content still reference the old Wine Collectors names;remapped onto the BETTRWEB palette so nothing renders off-brand while those components await their rebuild). */ --green:var(--color-black);--verde:var(--color-white);--gold:var(--color-orange);--red:var(--color-orange);--mint:var(--color-white);--font-h:"PP Neue Montreal", system-ui, sans-serif;--font-b:"PP Neue Montreal", system-ui, sans-serif;--grid-columns:12;--grid-gutter:1rem;--grid-margin:2rem;--cols:var(--grid-columns);--gutter:var(--grid-gutter);--margin:var(--grid-margin);/* Header offset — MUST equal the rendered .component-header height, because 13 sections use it as their fixed-header padding-top. Derived, not guessed:block padding ×2 + the TALLEST bar child + the 1px bottom rule. The tallest child is the "Sazināties" button (38px) on desktop and the burger (44px) once the nav collapses — NOT the 26px logo (the old 90px value assumed the logo and left the header overlapping content by 13px). Keep --header-pad in sync with .header__bar padding-block;the bar reads this same variable so the two cannot drift apart again. */ --header-pad:32px;--header-control-h:38px;--header-h:calc(var(--header-pad) * 2 + var(--header-control-h) + 1px);--text-h1:clamp(40px, 2.1vw + 32px, 80px);--text-h2:clamp(30px, 0.94vw + 30px, 48px);--text-h3:clamp(20px, 0.2vw + 20px, 24px);--text-lg:clamp(18px, 0.1vw + 18px, 20px);--text-nav:18px;--text-body:clamp(16px, 0.1vw + 16px, 18px);--text-sm:16px;--text-xs:14px;--track-1:-0.01em;--track-2:-0.02em;--space-1:1rem;--space-2:2rem;--space-3:3rem;--space-4:4rem;--space-6:6rem;--section-pad:var(--space-6);--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1);/* Underlined-link convention (client fix 2026-08-11):PP Neue Montreal's embedded underline metrics place a `from-font` underline INSIDE the glyph box (strike-through look), so every text underline uses an explicit offset + 1px hairline instead — matches the Figma clean 1px line below the baseline. skip-ink:none keeps the line continuous. */ --underline-offset:0.15em;--t-display:var(--text-h1);--t-h2:var(--text-h2);--t-h3:var(--text-h3);--t-lead:var(--text-body);--t-body:var(--text-body);--t-small:var(--text-xs);/* Header shrinks with the nav:below $tablet the bar padding drops and the 44px burger becomes the tallest child, so the offset must follow. */}@media (min-width:1440px){:root{--grid-margin:3rem}}@media (max-width:1023px){:root{--header-pad:24px;--header-control-h:44px}}@media (max-width:767px){:root{--grid-columns:4;--padding:1.25rem;--header-pad:20px}}html{font-size:16px;scroll-behavior:auto;/* clip (not hidden):hidden creates a scroll container that breaks position:sticky descendants;clip doesn't. */ overflow-x:hidden;overflow-x:clip;/* Native scrollbar fully hidden — the fixed grey pill (.scroll-indicator, JS-driven, ported from wine-collectors) replaces it. */ scrollbar-width:none}::-webkit-scrollbar{display:none;width:0}body{font-family:var(--font-b);font-weight:500;font-size:var(--text-body);line-height:1.5;letter-spacing:var(--track-1);color:var(--color-white);background:var(--color-black);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}main[data-barba=container]{position:relative;z-index:1}/* Headings — sentence case (no auto-uppercase;.u-caps is the only caps utility, reserved for card meta / legal lines). All Medium 500. */
h1, h2, h3, h4, h5, h6{font-family:var(--font-h);font-weight:500;font-style:normal;margin:0}h1{font-size:var(--text-h1);line-height:1;letter-spacing:var(--track-2)}h2{font-size:var(--text-h2);line-height:1.2;letter-spacing:var(--track-1)}h3{font-size:var(--text-h3);line-height:1.2;letter-spacing:var(--track-1)}p{margin:0}p + p{margin-top:9px}a{color:inherit}em, i, .italic{font-style:italic}::selection{background:var(--color-orange);color:var(--color-white)}.t-h1, .t-display{font-size:var(--text-h1);font-weight:500;line-height:1;letter-spacing:var(--track-2)}.t-h2{font-size:var(--text-h2);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-h3{font-size:var(--text-h3);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-lg, .t-lead{font-size:var(--text-lg);font-weight:500;line-height:1.2;letter-spacing:var(--track-1)}.t-body{font-size:var(--text-body);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-sm{font-size:var(--text-sm);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}.t-xs, .t-small, .t-meta{font-size:var(--text-xs);font-weight:500;line-height:1;letter-spacing:var(--track-1)}.u-caps{text-transform:uppercase}/* ---- Grid (design-system §3 — non-negotiable) -------------------------------- 12 columns (4 on mobile), 1rem gutters, fluid side margins. Components place content with grid-column — no arbitrary flexbox positioning. */
.grid{display:grid;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin);position:relative}.grid-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;grid-template-columns:repeat(var(--grid-columns), minmax(0, 1fr));column-gap:var(--grid-gutter);padding-inline:var(--grid-margin)}.grid-overlay span{background:rgba(255, 59, 20, 0.06);outline:1px solid rgba(255, 59, 20, 0.18);height:100%}body.show-grid .grid-overlay{display:grid}/* ---- Custom scroll indicator (native scrollbar hidden above) ------------------ Ported from wine-collectors (same JS driver, brand colors swapped:grey #515151 thumb on the transparent/near-black canvas, no accent — orange is reserved for the one hover moment per view). JS (initWCScrollIndicator) sizes the thumb and translates it;fades in on scroll activity, out after 900ms idle. z-index 1500:above content + header, below the transition curtain (10000) and grid overlay (9998... below grid overlay too). */
.scroll-indicator{position:fixed;top:0;right:5px;width:6px;height:44px;border-radius:999px;background:var(--color-grey);z-index:1500;pointer-events:none;opacity:0;transition:opacity 0.2s ease;will-change:transform, opacity}.scroll-indicator.is-visible{opacity:1}/* ---- Pill button (design-system §5.1, Figma 129:13403) ----------------------- Reusable:.btn-pill anywhere (header CTA, section CTAs). Dark-surface default (white);.btn-pill--dark derived for white surfaces (no on-white button exists in Figma — flagged for design review). Hover:white → orange (border+text+arrow via currentColor), gap 4→8px. */
.btn-pill,
.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 11px 6px 15px;border:1px solid currentColor;border-radius:100px;background:transparent;color:var(--color-white);font-family:var(--font-b);font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-2);white-space:nowrap;text-decoration:none;cursor:pointer;transition:color 0.3s var(--ease-osmo), gap 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.btn-pill:hover, .wc-btn:hover{color:var(--color-orange);gap:8px}}.btn-pill--dark{color:var(--color-black)}/* 24px icon box;the real Figma arrow vector (12.36×19.14 up-arrow) rotated 90° reads as the right-pointing 24px arrow. fill/stroke = currentColor so the hover recolor needs no second file. */
.btn-pill__icon{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center}.btn-pill__icon svg{display:block;width:12.4px;height:19.2px;transform:rotate(90deg)}/* ---- Inline text link (design-system §5.3) ------------------------------------ "Uzzināt vairāk" / "Apskatīt visus" pattern:white, no underline;hover = orange + underline. 20px inside list rows (.link--lg), 18px elsewhere. */
.link{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:none;transition:color 0.3s var(--ease-osmo)}.link--lg{font-size:var(--text-lg);line-height:1.2}@media (hover:hover) and (pointer:fine){.link:hover{color:var(--color-orange);text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:1px;text-decoration-skip-ink:none}}/* Section-top underlined link (Figma "Apskatīt visus" / "Atsauksmes" / "Vairāk par mums":18px, white, underlined by default;hover → orange). `a.link-u` is needed to out-rank the plugin's `.component a{text-decoration:none}` (equal specificity, later source order). */
a.link-u,
.link-u{font-weight:500;font-size:var(--text-nav);line-height:1.5;letter-spacing:var(--track-1);color:inherit;text-decoration:underline;text-underline-offset:var(--underline-offset);text-decoration-thickness:1px;text-decoration-skip-ink:none;transition:color 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){a.link-u:hover{color:var(--color-orange)}}/* ---- Animated underline sweep (§5.2 header-nav language, shared) -------------- The hover underline convention for single-line links:a 1px currentColor line sweeps in from the LEFT (scaleX 0 → 1, 0.3s house osmo ease). Extracted from the header menu item (client fix 2026-08-12) so footer/service/legal links share one mechanism instead of instant text-decoration flips. Include sweep-underline on the link (or its label span), then trigger with `&::after{transform:scaleX(1)}` from the hover/active rule. NOT for:permanent underlines (.link-u, footer contact values, active filter — those stay static), or links that can WRAP to multiple lines (a pseudo-element underline only draws under the element box, so it breaks on wrapped lines — those keep static text-decoration, see footer mobile). */ .hairline{border:0;height:1px;background:var(--color-grey)}.rotating-badge{position:absolute;width:110px;height:110px;z-index:5}.rotating-badge__ring{width:100%;height:100%;will-change:transform}@media (max-width:699px){.rotating-badge{display:none}}/* ---- Accordion primitive (Figma BUJ sekcija 156:8171 + service single 181:8667 — the two accordion usages share one mechanic) -------------------- Rows on #515151 hairlines, 24px Medium question, right-side icon (chevron in the BUJ spec, plus in the service-single spec — .acc__icon--plus). Height animation is GSAP-owned (initAccordions, components/faq/index.js);CSS only defines states + the reduced-motion/no-JS fallback. Answer typography is DERIVED (Figma shows only closed rows) — 18px Book on 66% width — flagged for design review. */
.acc{display:flex;flex-direction:column;width:100%}.acc__item{border-bottom:1px solid var(--color-grey)}.acc__item:first-child{border-top:1px solid var(--color-grey)}.acc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);width:100%;padding:var(--space-2) 0;background:none;border:0;color:inherit;font-family:var(--font-h);text-align:left;cursor:pointer}.acc__title{position:relative;font-size:var(--text-h3);font-weight:500;line-height:1.2;letter-spacing:var(--track-1);/* Orange dot after the label on hover — the nav-item language (header__link::after):10px circle, 8px right of the text, eased scale + fade. Absolutely positioned so it never shifts the row. */}.acc__title::after{content:"";position:absolute;left:calc(100% + 8px);top:50%;width:10px;height:10px;border-radius:50%;background:var(--color-orange);transform:translateY(-50%) scale(0.4);opacity:0;transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.acc__icon{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform 0.5s var(--ease-osmo)}.acc__icon svg{display:block;fill:currentColor}.acc__item.is-open .acc__icon--chevron{transform:rotate(180deg)}.acc__item.is-open .acc__icon--plus{transform:rotate(45deg)}.acc__panel{overflow:hidden}.acc__panel[hidden]{display:none}.acc__body{padding-bottom:var(--space-2);max-width:66%;font-size:var(--text-body);font-weight:500;line-height:1.5;letter-spacing:var(--track-1)}@media (max-width:767px){.acc__body{max-width:100%}}/* Hover reveals the orange dot after the title (client 2026-08-15 — replaces the old red text-colour change, which the client didn't want). */
@media (hover:hover) and (pointer:fine){.acc__head:hover .acc__title::after{opacity:1;transform:translateY(-50%) scale(1)}}@media (prefers-reduced-motion:reduce){.acc__icon{transition:none}}/* ---- Accent dot (Figma Ellipse 14 — 24px orange circle preceding display copy in the CTA + service intro;the sanctioned one-orange-moment) -------- */
.accent-dot{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--color-orange);flex:none}/* ---- Contact-form validation message (shared primitive) ----------------------- Both contact forms carry the .contact__field class (components/contact's dark placeholder rows AND contact_page's light label rows — the kontakti markup stacks .cp__field on top), so this lives here like the .acc primitive. The message (.contact__error, injected by initContactForm) sits ABSOLUTE just below the field's underline — showing/hiding never shifts the layout — 14px orange, fading/rising in 0.3s osmo while the underline flips orange in sync (is-invalid). No Figma spec for form errors (design-system §5 "no form fields exist in Figma") — derived;FLAGGED for design review. */
.contact__field{position:relative}.contact__error{position:absolute;left:0;top:calc(100% + 5px);font-size:var(--text-xs);font-weight:500;line-height:1;letter-spacing:var(--track-1);color:var(--color-orange);opacity:0;transform:translateY(-4px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo);pointer-events:none}.contact__field.is-invalid .contact__error{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.contact__error{transition:none}}/* ---- Contact-form attachments (shared primitive) ------------------------------ File-upload row for both contact forms (services CTA on dark, kontakti on light) — same underline-row language as the text fields:"Pielikumi" label + hint left, "Pievienot failu" trigger (the Figma plus glyph, same vector as the service-single accordion) right, all on one hairline row. Selected files stack as rows above the underline;drag-and-drop highlights the row with a dashed hairline + orange accent (the sanctioned hover-orange). Everything currentColor so the dark/light surfaces both work. No Figma spec for file fields (design-system §5:none exist) — DERIVED from the underline-row + accordion primitives;FLAGGED for design review. */
.contact__attach{display:flex;flex-direction:column;border-bottom:1px solid currentColor;padding-bottom:7px;transition:border-color 0.3s var(--ease-osmo);/* Drag-over:dashed hairline + the orange accent (subtle — border+trigger only, no fills;orange discipline §1). Two-class specificity so it out-ranks the component sheets' .contact__field border rules. */}.contact__attach.is-invalid, .contact__attach:focus-within{border-bottom-color:var(--color-orange)}.contact__attach.is-dragover{border-bottom-style:dashed;border-bottom-color:var(--color-orange)}.contact__attach.is-dragover .contact__attach-trigger{color:var(--color-orange)}.contact__attach-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-1);flex-wrap:wrap}.contact__attach-label{font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-1)}.contact__attach-hint{font-size:var(--text-xs);opacity:0.5;white-space:nowrap}/* The real stays in the DOM, focusable, visually hidden (sr-only recipe — NOT display:none) inside the trigger label;clicking or activating the trigger opens the native picker. Two-class specificity out-ranks the component sheets' `.contact__field input` sizing rules. */
.contact__attach .contact__attach-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.contact__attach-trigger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:500;font-size:var(--text-sm);line-height:1.5;letter-spacing:var(--track-1);color:inherit;transition:color 0.3s var(--ease-osmo);/* Keyboard focus on the hidden input lights the trigger like every other focusable (mirrors the global:focus-visible outline). */}.contact__attach-trigger:has(.contact__attach-input:focus-visible){outline:2px solid var(--color-orange);outline-offset:3px}@media (hover:hover) and (pointer:fine){.contact__attach-trigger:hover{color:var(--color-orange)}}.contact__attach-plus{flex:none;display:flex;align-items:center;justify-content:center;width:15px;height:15px}.contact__attach-plus svg{display:block;width:100%;height:100%;fill:currentColor}/* Selected-files list:each file is a row (hairline-separated, echoing the underline language) — truncated name left, size + remove "×" right. Rows animate in/out with the house 0.3s osmo fade/rise (JS toggles .is-in / .is-leaving);reduced-motion renders instantly. */
.contact__attach-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}.contact__attach-list[hidden]{display:none}.contact__attach-item{display:flex;align-items:center;gap:var(--space-1);padding:8px 0;border-top:1px dashed color-mix(in srgb, currentColor 25%, transparent);font-size:var(--text-xs);line-height:1.5;letter-spacing:var(--track-1);opacity:0;transform:translateY(6px);transition:opacity 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.contact__attach-item.is-in{opacity:1;transform:none}.contact__attach-item.is-leaving{opacity:0;transform:translateY(-4px)}.contact__attach-name{font-weight:500;min-width:0;overflow:hidden;white-space:nowrap}.contact__attach-size{margin-left:auto;flex:none;font-weight:400;opacity:0.5}.contact__attach-remove{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:-4px;padding:0;background:none;border:0;color:inherit;font-family:var(--font-b);font-weight:400;font-size:18px;line-height:1;cursor:pointer;transition:color 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.contact__attach-remove:hover{color:var(--color-orange)}}@media (prefers-reduced-motion:reduce){.contact__attach, .contact__attach-item{transition:none}}/* Sending state (files can take seconds):the pill's label swaps to "Sūta..." (JS) and the arrow pulses subtly while disabled. DERIVED (no Figma loading spec) — FLAGGED for design review. */
.btn-pill.loading{cursor:progress}.btn-pill.loading .btn-pill__icon svg{animation:bw-send-pulse 1.1s var(--ease-osmo) infinite alternate}@keyframes bw-send-pulse{from{opacity:1}to{opacity:0.3}}@media (prefers-reduced-motion:reduce){.btn-pill.loading .btn-pill__icon svg{animation:none;opacity:0.5}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}a:focus-visible,
button:focus-visible{outline:2px solid var(--color-orange);outline-offset:3px}.wc-anchor{position:absolute;top:0;left:0;width:1px;height:1px}/* ---- Honeypot (spam trap, shared by every form) -------------------------- A real field to a bot, invisible and unreachable to a person:off-canvas rather than display:none (which naive scrapers skip), out of the tab order, aria-hidden so screen readers never announce it, and autocomplete off so no browser ever fills it on someone's behalf. Any value arriving in it means the sender was not a person — submissions.php drops those. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}/* ---- Hero WebGL slider canvas (components/hero/index.js) ----------------- Sits above the DOM slide stack inside .hero__media / .sh__media (the imgs stay as the LCP/SEO source and the CSS-crossfade fallback). Removed by JS on context loss / reduced motion / no WebGL. */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}/* About teaser (Figma 129:12903) — heading 1/3 + credit, portrait 5/3 (~square, bottom-cropped), body 9/4 with 9px paragraph rhythm. About uses the −2% H2 tracking in Figma;standardized to −1% per §8.4 ruling. */
.component-about{padding-top:var(--space-3);padding-bottom:var(--section-pad)}.component-about .about__left{grid-column:1/span 3;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-3)}.component-about .about__credit{font-size:var(--text-body);line-height:1.5}.component-about .about__portrait{grid-column:5/span 3;position:relative;overflow:hidden;background:#1d1d1d;/* Height = max(Figma ~1:1, the row) — client 2026-08-12. The grid is fluid but the type is not, so below 1920 the body column wraps to MORE lines while the photo shrinks with its three columns. An aspect-locked square therefore floated short and left a hole that grew as the viewport narrowed:12px at 1920 (Figma), 83px at 1728, 185px at 1512, 255px at 1280 — read as "the image column is narrower than Figma". Grid stretch now sizes the box to the row;::before keeps the square as the FLOOR so ultrawide, where the copy runs shorter than the photo is wide, never goes landscape. */}.component-about .about__portrait::before{content:"";display:block;aspect-ratio:800/802}.component-about .about__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;/* 2026-08-10 "squeezed portrait" fix:the Figma MCP export had vertically STRETCHED the 800:802 fill to 683×1024, so any crop of it showed a distorted face. The asset is now un-stretched to 683×685 (true 800:802) and re-uploaded, so cover ≈ 1:1 with no real crop;object-position kept for any future taller source. */ object-position:50% 25%;display:block}.component-about .about__right{grid-column:9/span 4;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;/* No gap:this column is the row's height driver, so a gap here does not just space the link, it makes the whole block taller than the photo. Figma puts the link at y=432 — flush against the body's last line box (the 1.5 half-leading gives the ~9px optical gap). The old 48px gap pushed the row to 505 against Figma's 459. */ gap:0}.component-about .about__body{font-size:var(--text-body);line-height:1.5}@media (max-width:1023px){.component-about .about__left{grid-column:1/-1;gap:var(--space-2)}.component-about .about__portrait{grid-column:1/span 6;margin-top:var(--space-3)}.component-about .about__right{grid-column:7/-1;margin-top:var(--space-3)}}@media (max-width:767px){.component-about .about__left, .component-about .about__portrait, .component-about .about__right{grid-column:1/-1}.component-about .about__portrait{margin-top:var(--space-2)}.component-about .about__right{margin-top:var(--space-2);align-items:flex-start;/* Stacked full-width:nothing shares this row, so the gap costs no alignment and the link needs the breathing room back. */ gap:var(--space-3)}}/* Clients logo band (Figma 129:11702) — heading row, then hairline-separated rows of 120×48 monochrome logo cells with 48px-tall vertical dividers. */
.component-clients{padding-top:var(--space-3);padding-bottom:var(--section-pad)}.component-clients .clients__grid{row-gap:var(--space-4)}.component-clients .clients__heading{grid-column:1/span 3;grid-row:1;align-self:center}.component-clients .clients__lede{grid-column:7/span 3;grid-row:1;align-self:center;font-weight:400;font-size:var(--text-body);line-height:1.5}.component-clients .clients__link{grid-column:12/span 1;grid-row:1;justify-self:end;align-self:center;white-space:nowrap}.component-clients .clients__band{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column}.component-clients .clients__row{display:flex;align-items:center;gap:24px;padding-block:var(--space-3);border-top:1px solid var(--color-grey)}.component-clients .clients__row:last-child{border-bottom:1px solid var(--color-grey)}.component-clients .clients__cell{flex:none;width:120px;height:48px;display:flex;align-items:center;justify-content:center}.component-clients .clients__cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}.component-clients .clients__sep{flex:1 0 0;min-width:1px;align-self:stretch;position:relative}.component-clients .clients__sep::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:1px;height:48px;background:var(--color-grey)}@media (max-width:767px){.component-clients{/* Stacked header (client 2026-08-11:lede was crushed against the link) — lede full-width, link on its own row below. */ /* 3-up rows, hairline after EVERY logo row (client 2026-08-11/12):left logo flush to the container's left edge, middle centered, right logo flush right — edges anchor the clean look. Zero gaps so each cell's border-bottom forms one continuous line;consecutive .clients__row containers flow seamlessly. NOTE:hidden .clients__sep spans interleave the cells in the DOM, so cell positions are nth-child 1,3,5,7,9,11 → per-3 pattern = 6n+1 / 6n+3 / 6n+5. */}.component-clients .clients__grid{row-gap:var(--space-2)}.component-clients .clients__heading{grid-column:1/-1}.component-clients .clients__lede{grid-column:1/-1;grid-row:2}.component-clients .clients__link{grid-column:1/-1;grid-row:3;justify-self:start}.component-clients .clients__band{grid-row:4;border-top:1px solid var(--color-grey)}.component-clients .clients__row{display:grid;grid-template-columns:repeat(3, 1fr);gap:0;padding-block:0;border-top:0}.component-clients .clients__row:last-child{border-bottom:0}.component-clients .clients__sep{display:none}.component-clients .clients__cell{width:100%;height:72px;border-bottom:1px solid var(--color-grey)}.component-clients .clients__cell img{max-width:96px;max-height:36px}.component-clients .clients__cell:nth-child(6n+1){justify-content:flex-start}.component-clients .clients__cell:nth-child(6n+3){justify-content:center}.component-clients .clients__cell:nth-child(6n+5){justify-content:flex-end}}/* Feature comparison table (DERIVED — no Figma frame;FLAGGED). Hairline rows in the services-row language at a denser table rhythm:feature col 1–3, values 4–6 / 7–9 / 10–12. The