/* ========================================================================== Fastkava — base / reset / primitives ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--fk-font-sans); font-weight: 500; color: var(--fk-text); background: var(--fk-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--fk-accent); text-decoration: none; transition: color var(--fk-dur) var(--fk-ease); } a:hover { color: var(--fk-accent-bright); } h1, h2, h3, h4 { margin: 0; color: var(--fk-heading); font-weight: 800; letter-spacing: 0.2px; } p { margin: 0; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 3px; border-radius: 4px; } .fk-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link */ .fk-skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--fk-accent); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; transition: top var(--fk-dur) var(--fk-ease); } .fk-skip-link:focus { top: 12px; color: #fff; } /* Layout container */ .fk-container { width: 100%; max-width: var(--fk-maxw); margin-inline: auto; padding-inline: var(--fk-gutter); } /* * The continuous block surface. Every section between the hero and the footer * lives inside .fk-flow and paints no background of its own, so the page reads * as one uninterrupted surface instead of a stack of differently-tinted bands. * That surface is now the fixed animated field (.fk-bgfx, see bgfx.css) showing * through; --fk-flow-bg survives only as the fallback. */ .fk-flow { position: relative; background: transparent; /* Sections inside the flow may let ambient glows bleed past their own box so the light carries across a boundary. `clip` contains that on the horizontal axis only — unlike `hidden`, it does not turn the flow into a scroll container, so vertical bleed between sections still works. */ overflow-x: clip; } /* Block content always sits above the decorative field behind it. */ .fk-flow > section { position: relative; z-index: 1; } /* Section rhythm */ .fk-section { padding-block: clamp(56px, 8vw, 112px); } /* ---- Buttons ------------------------------------------------------------- */ .fk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: 1.5px; padding: 17px 34px; border-radius: var(--fk-radius); border: 1px solid transparent; cursor: pointer; transition: background-color var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease), transform var(--fk-dur) var(--fk-ease); } .fk-btn:active { transform: translateY(1px); } .fk-btn--primary { background: var(--fk-accent); color: #fff; } .fk-btn--primary:hover { background: var(--fk-accent-strong); color: #fff; } .fk-btn--ghost { background: var(--fk-surface-soft); color: var(--fk-text-strong); border-color: var(--fk-border-strong); } .fk-btn--ghost:hover { background: var(--fk-surface-hover); color: var(--fk-text-strong); } /* Eyebrow / kicker label */ .fk-kicker { color: var(--fk-accent); font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; } /* ---- Icon optical centring ------------------------------------------------ Both glyphs sit in a round button, and both are drawn off-centre inside their own 24x24 viewBox — the paper plane's mass leans right, WhatsApp's leans left, so geometric centring reads as crooked. These two nudges centre them by eye. Applies wherever the icons appear (header bar and footer socials both use .fk-iconbtn) because the hook is the icon itself, not the button. */ .fk-icon--telegram { transform: translateX(-1px); } .fk-icon--whatsapp { transform: translateX(1px); } /* ---- Slider controls ------------------------------------------------------ Shared by every slider on the site (B3 groups, B10 machines, the catalogue rails) so the controls read identically wherever they appear: a row of dots with an orange arrow either side. Blocks supply their own wrapper class for positioning and reuse these for the controls themselves. */ .fk-slider-nav { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 18px); margin-top: clamp(14px, 2vw, 20px); } /* Dot styling is B10's original treatment, promoted to the shared component rather than replaced — B10 already shipped with this look, so adopting it here means the new sliders match the existing one instead of the other way round. */ .fk-slider-dots { display: flex; align-items: center; justify-content: center; gap: 8px; } .fk-slider-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .22); transition: background-color .3s var(--fk-ease), transform .3s var(--fk-ease); } :root[data-theme="light"] .fk-slider-dot { background: rgba(26, 21, 18, .20); } /* Hover and active carry the theme prefix too: the light-theme base rule above is more specific than a bare `.fk-slider-dot.is-active`, so without it the active dot stayed grey on the light theme — only its scale gave it away. */ .fk-slider-dot:hover, :root[data-theme="light"] .fk-slider-dot:hover { background: var(--fk-accent-bright); } .fk-slider-dot.is-active, :root[data-theme="light"] .fk-slider-dot.is-active { background: var(--fk-accent); transform: scale(1.15); } /* Bare chevron — no ring. The 38px box stays: it is the tap target, and a lone chevron would otherwise be far too small to hit on a phone. */ .fk-slider-arrow { flex: none; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--fk-accent); transition: color var(--fk-dur) var(--fk-ease), opacity var(--fk-dur) var(--fk-ease); } /* Drawn from two borders — no icon file. Slightly larger than it was inside the ring, which had been giving it most of its visual weight. */ .fk-slider-arrow::before { content: ''; width: 11px; height: 11px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .fk-slider-arrow--prev::before { transform: rotate(-135deg); margin-left: 4px; } .fk-slider-arrow--next::before { transform: rotate(45deg); margin-right: 4px; } /* Hover brightens the chevron rather than filling a circle — with the ring gone there is no circle to fill. */ .fk-slider-arrow:hover { color: var(--fk-accent-bright); } .fk-slider-arrow:disabled { opacity: .3; cursor: default; } .fk-slider-arrow:disabled:hover { color: var(--fk-accent); } /* * Motion off — one rule, two triggers. * * The media query is the visitor's OS preference. The attribute is the theme's * own FKL_MOTION switch (see functions.php), stamped onto server-side. * Both mean the same thing, so they share one declaration block: kill every * keyframe animation and every transition on the page, including in the ~17 * block stylesheets that each animate something of their own. * * `animation: none` rather than `animation-play-state: paused` on purpose — a * paused animation still holds its element on a composited layer, and on the * background orbs that layer carries a 90–110px blur. Removing the animation * outright drops the element back to its base style and lets the layer go. */ @media (prefers-reduced-motion: reduce) { html, *, *::before, *::after, ::backdrop { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* * `html` and the pseudo-elements are listed explicitly on purpose. * * `:root[…] *` matches DESCENDANTS of the root, so it never reaches * itself — and `scroll-behavior: smooth` lives exactly there, which left every * in-page anchor still animating its jump. `*` does not match pseudo-elements * either, so ::before/::after/::backdrop need naming too. */ :root[data-fk-motion="off"], :root[data-fk-motion="off"] *, :root[data-fk-motion="off"] *::before, :root[data-fk-motion="off"] *::after, :root[data-fk-motion="off"] ::backdrop { scroll-behavior: auto !important; transition: none !important; animation: none !important; }