cannot sit inside one, leaving a genuinely empty paragraph either side of the hero. Measured live 2026-08-14: innerHTML "", zero children, height 0, margin-bottom 16px — which is exactly the gap that appeared between the red benefits strip and the carousel. :empty only matches elements with no children AND no text nodes, so this cannot hide real content. */ body.ko-hero p:empty:has(+ .ko-hero), body.ko-hero .ko-hero + p:empty { display: none; } /* IR-046 (design r2.9, 2026-09-26; r3.1, 2026-09-28): the dots sit on the controls' ink tile at every width — the toggle's and the arrows' tile: ink .86, a 1px white keyline as a border, 4px corners. On the photographs alone they fell under 3:1 on desktop (at 1440 the inactive ones 1.44–1.68:1 on the Znamka slides and 2.67–2.97:1 on Ponudba and O nas, the active one 2.28:1 on one Znamka row); on the tile every dot measures 3:1 or more on every row. Phones and tablets: the tile sits on the left pad, its foot level with the toggle's (12px above the slide's foot), so it keeps 14px or more below the cards' buttons; the desktop block centres it. */ body.ko-hero .ko-hero__dots { position: absolute; z-index: 5; left: var(--ko-hero-pad); bottom: 12px; display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--ko-hero-ctrl-keyline); border-radius: var(--ko-hero-ctrl-radius); background: var(--ko-hero-ctrl-fill); } /* Visual dot stays a slim 30x8 pill (unchanged from spec) at any pointer type; position:relative is required so the pointer:coarse hit-zone below centers on THIS dot and not on the .ko-hero__dots row. */ body.ko-hero .ko-hero__dot { position: relative; width: 30px; height: 8px; padding: 0; border: none; cursor: pointer; background: rgba(255, 255, 255, .5); /* IR-046: on the tile (.42 was tuned for the photo) */ border-radius: var(--ko-radius-pill); } /* IR-026 part 5: the tabs pattern marks the active tab with aria-selected (aria-current was dropped from the dots in round 1). */ body.ko-hero .ko-hero__dot[aria-selected="true"] { background: var(--ko-color-text-inverse); } body.ko-hero .ko-hero__toggle { position: absolute; z-index: 5; right: 14px; bottom: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; /* IR-034 (design r2.1): the ink tile — ink .86, a 1px white keyline as a BORDER (forced colours paint it ButtonBorder; a box-shadow would vanish), 4px corners. Worst edge 3.42:1 (p5) on the red panels of offer and O nas (fill 3.24 · keyline 3.42); ≥ 6.4 on the Znamka light field; ≥ 7.6 on phones. Was IR-026 part 3: ink .65 + 1.5px white, round (worst 3.13). Hover / pressed: opaque ink, opaque keyline. */ border: 1px solid var(--ko-hero-ctrl-keyline); border-radius: var(--ko-hero-ctrl-radius); background: var(--ko-hero-ctrl-fill); color: var(--ko-hero-ctrl-on); /* The ❚❚ / ▶ glyph is the no-mask fallback, at a fixed size so a larger default text size cannot push it out of the tile (audit 2026-09-23). With mask support the mark is drawn (below) and the glyph is hidden. */ font-size: 14px; line-height: 1; cursor: pointer; transition: background-color var(--ko-duration-normal) var(--ko-easing-standard), border-color var(--ko-duration-normal) var(--ko-easing-standard); } body.ko-hero .ko-hero__toggle:hover, body.ko-hero .ko-hero__toggle:active { background: var(--ko-hero-ctrl-fill-hover); border-color: var(--ko-hero-ctrl-on); } /* Touch-target gate: the 30x8 visual dot is well under 44x44. Bump the HIT area, not the visual pill, via a centered invisible pseudo-element — the same "expand the target without changing the look" technique as the dots' visual size staying constant. The .ko-hero__dots gap widens too so neighbouring 44px hit-zones don't fully overlap (a few px of overlap between adjacent dots is an accepted, common trade-off for tightly packed pagination controls; it is not eliminated, only reduced). Arrow (52px desktop) and toggle (44px) already clear 44x44 unconditionally, so they need no bump here. */ @media (pointer: coarse) { body.ko-hero .ko-hero__dots { gap: 14px; } body.ko-hero .ko-hero__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* IR-048 (design r3.2, 2026-10-02): six or seven dots (IR-047: up to three Znamka slides) tighten below 1024px, so the tile keeps clear of the pause toggle: 20 x 8 pills, 10px apart on touch (8px with a mouse). Seven dots on a 320px touch phone end 24px before the toggle (as 30 x 8 pills they overlapped it by 70px; five dots end 18px before it). On touch each hit area is the pitch, 30 x 44, so neighbours do not overlap (WCAG 2.5.8 asks 24 x 24); seven 44px areas (308px) cannot fit beside the toggle at 320px. Five dots, and the desktop tile, are unchanged. */ @media (max-width: 1023.98px) { body.ko-hero .ko-hero__dots:has(.ko-hero__dot:nth-child(6)) .ko-hero__dot { width: 20px; } } @media (max-width: 1023.98px) and (pointer: coarse) { body.ko-hero .ko-hero__dots:has(.ko-hero__dot:nth-child(6)) { gap: 10px; } body.ko-hero .ko-hero__dots:has(.ko-hero__dot:nth-child(6)) .ko-hero__dot::before { width: 30px; } } /* The one sanctioned !important: the theme resets outlines globally. IR-026 part 2 + IR-028 part 2 (round 1): the ink ring reads its token, and a 2px white ring sits directly outside it (::after), so one of the two tones reaches 3:1 on every backdrop (design: 3.63:1 or more). */ body.ko-hero .ko-hero__dot:focus-visible, body.ko-hero .ko-hero__arrow:focus-visible, body.ko-hero .ko-hero__toggle:focus-visible { outline: 2px solid var(--ko-color-focus-ring) !important; outline-offset: 2px; } body.ko-hero .ko-hero__dot:focus-visible::after, body.ko-hero .ko-hero__arrow:focus-visible::after, body.ko-hero .ko-hero__toggle:focus-visible::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--ko-color-text-inverse); border-radius: var(--ko-radius-pill); pointer-events: none; } /* The toggle's ::after is placed from its padding box, inside its 1px keyline (IR-034): -7px puts the white ring 4–6px outside the tile, as on the dots; its corner follows the 4px tile (4 + 6 = 10px). The arrows get the same in the desktop block. */ body.ko-hero .ko-hero__toggle:focus-visible::after { inset: -7px; border-radius: 10px; } /* IR-034: the marks are DRAWN — a masked SVG in the CTA arrow's stroke (round caps, 2.5 in a 20 box), coloured by currentColor — so they are the same weight on every OS. The ‹ › / ❚❚ / ▶ text glyphs stay in the DOM at font-size 0 as the no-CSS fallback; without mask support (outside this @supports) they stay visible on the tile. The toggle's mark follows data-ko-state (template + hero-cards.js setPlaying()): playing → the pause bars, paused → the play triangle — the ACTION, as the aria-label says. The arrows are display:none below 1024px, so their ::before is inert there. */ @supports ((-webkit-mask-image: none) or (mask-image: none)) { body.ko-hero .ko-hero__arrow, body.ko-hero .ko-hero__toggle { font-size: 0; } body.ko-hero .ko-hero__arrow::before { content: ""; display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ko-hero-ctrl-chevron) center / contain no-repeat; mask: var(--ko-hero-ctrl-chevron) center / contain no-repeat; transition: transform var(--ko-duration-normal) var(--ko-easing-standard); } body.ko-hero .ko-hero__arrow--prev::before { transform: scaleX(-1); } /* Hover / pressed: the chevron nudges 3px outward, as the CTA arrow does. */ body.ko-hero .ko-hero__arrow--next:hover::before, body.ko-hero .ko-hero__arrow--next:active::before { transform: translateX(3px); } body.ko-hero .ko-hero__arrow--prev:hover::before, body.ko-hero .ko-hero__arrow--prev:active::before { transform: scaleX(-1) translateX(3px); } body.ko-hero .ko-hero__toggle::before { content: ""; display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ko-hero-ctrl-pause) center / contain no-repeat; mask: var(--ko-hero-ctrl-pause) center / contain no-repeat; } body.ko-hero .ko-hero__toggle[data-ko-state="paused"]::before { -webkit-mask-image: var(--ko-hero-ctrl-play); mask-image: var(--ko-hero-ctrl-play); } } /* Forced colours: the tile is ButtonFace with a ButtonBorder edge (the border takes it by itself); a forced background-color would turn the masked mark Canvas-on-ButtonFace, so it is told to keep a colour — ButtonText, like the glyph it replaces. */ @media (forced-colors: active) { body.ko-hero .ko-hero__arrow::before, body.ko-hero .ko-hero__toggle::before { forced-color-adjust: none; background: ButtonText; } /* IR-046: on the tile (Canvas, with the forced edge) a forced dot would be Canvas too and vanish; the dots keep system colours of their own — GrayText, the current one ButtonText. */ body.ko-hero .ko-hero__dot { forced-color-adjust: none; background: GrayText; } body.ko-hero .ko-hero__dot[aria-selected="true"] { background: ButtonText; } } /* IR-026 part 1: the whole-card link fills the slide, so an outline on it falls outside and .ko-hero's overflow clips it (0 pixels changed, all nine slides). The ring is drawn instead on a layer of the viewport: above the body (3) and chip (4 in the slide), below the controls (5). Ink 2px with white 2px inside it; the ink's outer edge 2px inside the slide. */ body.ko-hero .ko-hero__link:focus-visible { outline: none; } body.ko-hero .ko-hero__viewport:has(.ko-hero__link:focus-visible)::after { content: ""; position: absolute; inset: 2px; z-index: 4; pointer-events: none; border: 2px solid var(--ko-color-focus-ring); box-shadow: inset 0 0 0 2px var(--ko-color-text-inverse); } /* IR-026 part 4 (MUST on phones): at up to 200 % text the carousel grows instead of cutting. All slides share one grid cell, so the carousel is as tall as the tallest slide and never shorter than --ko-hero-h; the body is in the flow with the same box as before; media, scrim, chip and link stay absolute over the slide. Pixel-identical at normal text size (design, 0 differing pixels on nine slides). Every slide stays in layout, which is why IR-027 holds the images back instead of hiding slides. Desktop too since 2026-09-23 (design r2 measured it identical at 100 % text; the audit found the absolute body cut badge, title and button on all 14 slides at 1024 with 200 % text). */ body.ko-hero .ko-hero__viewport { height: auto; } body.ko-hero .ko-hero__track { height: auto; display: grid; } body.ko-hero .ko-hero__slide { position: relative; inset: auto; grid-area: 1 / 1; min-height: var(--ko-hero-h); display: grid; } body.ko-hero .ko-hero__body { position: relative; inset: auto; } /* ===================================================================== DESKTOP >= 1024px ===================================================================== */ @media (min-width: 1024px) { body.ko-hero { --ko-hero-h: clamp(480px, 45vw, 576px); --ko-hero-pad: clamp(40px, 5vw, 76px); } /* IR-034 / IR-025 "optional": the arrows' reserved zone — their inset (20px) + width (52px) + the cards' 24px floor. Every card reads var(--ko-hero-safe, 96px) for its text column, so this is where the columns follow if the arrows ever move or grow. Keep it in step with the .ko-hero__arrow rules below. */ body.ko-hero { --ko-hero-safe: calc(20px + 52px + 24px); } /* Desktop moves the content from bottom-anchored to vertically centred and left-aligned — but --ko-hero-grad darkens the BOTTOM, so the title ends up over the brightest part of the photo. Measured live 2026-08-14: white text on a pale marble image, barely holding. This second scrim darkens the left column where the text actually lives, independently of whichever gradient the operator picked, so legibility no longer depends on them choosing correctly. It sits below the content (z-index 1, same layer as ::before) and above the image. */ body.ko-hero .ko-hero__slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20, 20, 20, .66) 0%, rgba(20, 20, 20, .34) 38%, rgba(20, 20, 20, 0) 66%); } body.ko-hero .ko-hero__body { justify-content: center; max-width: 620px; gap: var(--ko-space-3); padding-bottom: var(--ko-hero-pad); } body.ko-hero .ko-hero__title { font-size: clamp(2.2rem, 3.4vw, 3.1rem); } body.ko-hero .ko-hero__meta { font-size: 1.1rem; max-width: 40ch; } body.ko-hero .ko-hero__badge { font-size: .72rem; padding: 8px 14px; } body.ko-hero .ko-hero__chip { min-width: 92px; min-height: 92px; font-size: 1.5rem; top: 24px; right: 24px; } body.ko-hero .ko-hero__logo { height: 38px; } /* IR-034 (design r2.1): the same ink tile as the toggle — ink .86, a 1px white keyline as a border INSIDE the 52px box (so the cards' 24px clearance is untouched), 4px corners, a drawn chevron (see the @supports block above). Worst edge 3.34:1 (p5) over every slide × 1024/1440/1920, Strong and Soft. The white .92 pill it replaces was under 3:1 on 24 of 42 Strong and 28 of 30 Soft renders (the Znamka photos and fields, the O nas photo). */ body.ko-hero .ko-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--ko-hero-ctrl-keyline); border-radius: var(--ko-hero-ctrl-radius); background: var(--ko-hero-ctrl-fill); color: var(--ko-hero-ctrl-on); cursor: pointer; transition: background-color var(--ko-duration-normal) var(--ko-easing-standard), border-color var(--ko-duration-normal) var(--ko-easing-standard); } body.ko-hero .ko-hero__arrow--prev { left: 20px; } body.ko-hero .ko-hero__arrow--next { right: 20px; } body.ko-hero .ko-hero__arrow:hover, body.ko-hero .ko-hero__arrow:active { background: var(--ko-hero-ctrl-fill-hover); border-color: var(--ko-hero-ctrl-on); } /* The white ring follows the 4px corner (see the toggle's rule). */ body.ko-hero .ko-hero__arrow:focus-visible::after { inset: -7px; border-radius: 10px; } /* Decision D8 (operator, 2026-09-22): the arrows fade in on hover over the carousel or on keyboard focus anywhere in it. Only where a hover exists — a touch screen at this width keeps them visible. They stay focusable and clickable while faded, and the pointer is always over the carousel when one is clicked. */ @media (hover: hover) { body.ko-hero .ko-hero__arrow { opacity: 0; transition: opacity var(--ko-duration-normal) var(--ko-easing-standard), background-color var(--ko-duration-normal) var(--ko-easing-standard), border-color var(--ko-duration-normal) var(--ko-easing-standard); } body.ko-hero .ko-hero:hover .ko-hero__arrow, body.ko-hero .ko-hero:has(:focus-visible) .ko-hero__arrow { opacity: 1; } } /* IR-026 part 1: the card-link ring clears a 15–17px classic scrollbar (the block is 100vw wide, so part of it sits under the scrollbar). */ body.ko-hero .ko-hero__viewport:has(.ko-hero__link:focus-visible)::after { inset: 2px 10px; } /* IR-046: the dots tile centred on the dots' old line (28px above the slide's foot), so the cards' clearances to the dots hold. */ body.ko-hero .ko-hero__dots { left: 50%; transform: translateX(-50%); bottom: 14px; padding: 9px 12px; } body.ko-hero .ko-hero__toggle { bottom: 20px; right: 20px; } } @media (prefers-reduced-motion: reduce) { /* IR-038: the card hovers have no duration (each card block also sets transition: none on its own elements). */ body.ko-hero { --ko-hero-hover-dur: 0ms; } /* IR-042: the cascade neither grows nor moves (its shadow still shows). */ body.ko-hero { --ko-hero-cascade-grow: 1; --ko-hero-cascade-shift: 0px; } body.ko-hero .ko-hero__slide, body.ko-hero .ko-hero__slide--active { transition: none; } body.ko-hero .ko-hero__cta { transition: none; } body.ko-hero .ko-hero__arrow, body.ko-hero .ko-hero__arrow::before, body.ko-hero .ko-hero__toggle { transition: none; } /* IR-034: the chevron's 3px nudge is motion — off, like the CTA arrow's. */ body.ko-hero .ko-hero__arrow--next:hover::before, body.ko-hero .ko-hero__arrow--next:active::before { transform: none; } body.ko-hero .ko-hero__arrow--prev:hover::before, body.ko-hero .ko-hero__arrow--prev:active::before { transform: scaleX(-1); } } /* ===================================================================== O nas — body styles (design v11 = r3.1, 2026-09-28; r2 LOCKED 2026-09-23) Block file: hero-cards-about-v11.css — replaces the O nas block of wp-content/themes/spletnik-child/assets/css/woo/hero-cards.css Markup: template-parts/hero-card-body-about.php (same brief folder — the r10 markup plus the drawn arrow inside "Več o nas" and, since v11, the row's subtitle under the title) Spec: briefs/design-about-v11/design-about-card-v11-spec.md (revises briefs/design-about-v9/design-about-card-v9-spec.md; v10, r2.9, was never installed) r2.2 (operator 2026-09-25): every hover here runs on the card-level duration --ko-hero-hover-dur (500ms) and ease --ko-hero-hover-ease (an ease-out quad; the shell defines both, IR-038) — movement at the full duration, colour at .6 of it — instead of the site-wide 220ms and the standard curve, which other buttons keep. The standard curve does 96 % of a move in the first half, so a longer duration alone still looks quick; the softer ease spreads the move across the half second. The benefit cards also stay out while the pointer is on "Več o nas". r2.4 (operator 2026-09-25: "way more pronounced"): the benefit cards start .4 of the hover duration apart (0 / 200 / 400 ms) and go back in reverse, the bottom card first. r2.6 (operator 2026-09-25, infrastructure's design-r2.6 request): the CASCADE, the same motion as the Kategorija samples ("exact copy paste"). On card hover each benefit card grows by --ko-hero-cascade-grow (1.06) and moves --ko-hero-cascade-shift (8px) to the LEFT, --ko-hero-cascade-step (.4) of the hover duration apart (0 / 200 / 400 ms), back in reverse; the middle card grows from its centre and pushes the outer two by its own growth, on its own clock, so both gaps stay constant in every frame; a floating shadow while out. The three tokens live in the shell (IR-042); the fallbacks here are the same values. The stack's rows are equal (the tallest card's height; 104 / 60px at 100 % text). r2.7 (operator 2026-09-25, infrastructure's design-r2.7 request): the label-only rows at 1024–1279px sit CENTRED like the full cards from 1280px up — the same rule, so at 1279 → 1280 only the card height changes, not the centre line. Accepted by the operator with the sign covered while they are there (spec §1: 33 / 12 / 3 % at rest at 1024 / 1152 / 1279). r2.8 (operator 2026-09-26, infrastructure's design-r2.8 request): the card's hover HOLDS while the pointer is anywhere on the hero — the photo, the button, the showroom pills, the arrows, the dots and the toggle — and ends once, when the pointer leaves the hero. Every hover rule below is followed by an @media (hover: hover) twin with the same declarations. Its trigger: the pointer on section.ko-hero, the slide active, and none of the rule's own hover conditions on (its :has(…:hover) triggers, and the button's own :hover where the rule lists it) — :where(section.ko-hero:hover) … .ko-hero__slide.ko-hero__slide--active:where(:not(:has(…))…). The :where() parts weigh nothing and the two classes weigh exactly the :has(…:hover) they replace, so the twin stands in for the whole-card link's hover at the same place in the cascade and never competes with the originals (the button's own hover and a pill's own hover still answer to themselves). Pointer devices only: on a touch screen a tapped arrow or dot would keep the hover and fold every slide it brings. Keyboard focus on a control does not start it (a focused arrow is not the card). r2.1 (operator 2026-09-24; spec §0 has the full list): the benefit stack is a grid item in the flow (it grows the slide at 200 % text); at 1024–1279px the benefits are three label-only rows (r2.1: at the foot; r2.7: centred); the desktop title on the akcija/offer scale; its first baseline on the upper golden line; the panel opaque; no scrim on the photo side on desktop; the phone sky band; card hover, the pressed state, the button family, the set's one phone title size, long words wrap (no tablet ramp on this card: the phone title stops at 35.2px and the desktop title starts at 42px). DESKTOP (≥ 1024px) = the locked v2 r10 design (r9 lock 2026-09-11, polish 2026-09-22): the curved red panel (inline SVG, stations 37/40/34/36 % at 1440), the colour logo on a white 6px chip, the balanced white title, two white pills with ink text, the ink "Več o nas", and the three white benefit cards (icon in a tinted circle + label + line) stacked on the right. r2 (operator 2026-09-23) applies the round-1 layout items and sentence case; nothing else in the desktop block moved: · E5 / L1 the column starts at --ko-rez-col-x = clamp(96px, 8vw, 120px) from the left screen edge (96 at 1024–1200 = 24px clear of the prev arrow, fluid, 115 at 1440, settled at 120 from 1500) — the same rule as the akcija card, instead of r10's fixed max(pad, 96px); · E6 / L3 the benefit stack ends at the same --ko-rez-col-x from the RIGHT edge (the mirror), instead of max(pad + 32px, 96px); · E7 / L4 the gap between the cards is 20px (was 12px) and the three cards ease 6px to the right, one after the other (r2.4: 0 / .4 / .8 of --ko-hero-hover-dur, back in reverse) while the card is hovered. The cards are NOT links, so the motion is DECORATIVE — it follows the whole-card link's :hover through :has(), because the cards never receive the pointer. Off under reduced motion; · case "standardize to lower case": the pills read Domžale / Maribor in sentence case, untracked; "Več o nas" is the set's one button — 52px, 16px 700 sentence case, 4px corners, the drawn arrow (r10: 46px, uppercase, no arrow); · D3 / D4 the panel fill, the title colour and the button read --ko-hero-overlay / --ko-hero-on-overlay / --ko-hero-button / --ko-hero-on-button first, with the r10 tokens as fallbacks (nothing changes while the wp-admin fields are empty). r2.1 (2026-09-23, quick wins): the panel fill is opaque (one #E04141 across the red panels — since T-1a two: akcija and O nas; r10's .97 rendered #DA4041); "Več o nas" also answers a hover anywhere on the card and has a pressed state, as do the town links; --ko-space-3 above the button (24px from the town links). r2.1 (2026-09-24, finding #2): the benefit stack is IN THE FLOW — the desktop body is a two-column grid (intro | stack, both centred), so at 200 % text the stack grows the slide (the shell's in-flow rule, IR-026 part 4 on desktop) instead of spilling past its edges; same pixels at 100 %. Everything else in the desktop block is r10 verbatim (values, sizes, radii, shadows). PHONE (< 1024px) = r3.1 (operator 2026-09-28: "way too many elements … keep the title (now can take up more of the card)+button", then "N1+add a subtitle+golden ratio position"): no panel, the operator's gradient with the top band (as r2.8); the title, the row's subtitle and "Več o nas", nothing else — the logo chip and the town links are not shown below 1024px (display: none; the whole card and "Več o nas" still lead to /o-nas/). The title is white, clamp(2.25rem, 11vw, 3rem) (36px up to 327px, 42.9px at 390, 48px from 437px), balanced; the subtitle 16px 700 white, 30ch, balanced; "Več o nas" white with the brand hover red as its text and the drawn arrow — the set's 48px phone button. The group sits so the space above it and the space below it are 1 : 1.618 (a three-row grid, .382fr / the group / .618fr, the pads as the rows' minimums; at 200 % text the carousel grows). No benefit cards. (r2–r2.8: the logo chip and the two town links in the brand hover red at the top of the card, the title clamp(1.9rem, 8.6vw, 2.2rem). r10 had the intro absolute at the 20 % line.) Focus rings (D7): ink outline + white ring outside, on every inner link at both breakpoints (visible on the photo and on the red panel). Contrast: white on the red panel only at the title's 35.2–49.6px (4.20:1 ≥ 3:1 large text); desktop pills ink on white and the CTA white on ink (15.5:1); benefit label ink 15.5:1, line #5B5B5B 7.0:1; the subtitle 20px 700 white on the panel (4.20:1, large text) and 16px 700 white on the phone's gradient (5.46:1 or more in its worst 5 % of pixels, 320–1023px; the least at 320); phone CTA #C93434 on white 5.22:1 (4.77:1 on its #F7F4F4 hover). r2.9 (operator 2026-09-26, after the /impeccable critique): the arrival gate (IR-046) — every card-level hover trigger below also waits while the section carries ko-hero--auto-arrived, so a slide the timer brought in under a resting pointer stays at rest until the pointer moves (the shell's script sets and clears the class; without it the rules are r2.8's). The button's own hover is not gated. r3.1 (operator 2026-09-28): the phone above (the title, the subtitle, the button; the golden position) and the subtitle on desktop too — the row's Podnaslov (`meta`), 20px 700 white on the panel under the title; with it the intro's golden margin gives back the subtitle's height, so the title's first baseline stays on the upper golden line. r2.9's curve on phones and its showroom fact (v10, never installed) are withdrawn. Scope: every rule hangs off .ko-hero__slide--about; tokens from ko-tokens.css and the shell's per-slide properties only. ===================================================================== */ /* Phone only: a top band layered over the operator's gradient (the brand card's device, mirrored to the top), for the white title on the sky. */ @media (max-width: 1023.98px) { body.ko-hero .ko-hero__slide--about::before { background: linear-gradient(180deg, rgba(20,20,20,.30) 0%, rgba(20,20,20,.16) 38%, rgba(20,20,20,0) 58%), var(--ko-hero-grad); } } /* The curved panel and the benefit cards exist on desktop only. */ body.ko-hero .ko-hero__slide--about .ko-hero__panel { display: none; } body.ko-hero .ko-hero__slide--about .ko-hero__benefits { display: none; } /* Phone and tablet (r3.1): the group (title, subtitle, "Več o nas") sits so the space above it and the space below it are 1 : 1.618 — the operator's "golden ratio position". A three-row grid: .382fr, the group, .618fr; the pad and the pad + the dots' 34px are the rows' minimums, so the group never touches the top edge or the dots, and at 200 % text the carousel grows instead (IR-026 part 4); no row gap (the shell's 8px would add to both sides); one full-width column (the shell's justify-content: flex-end would otherwise push a group narrower than the card to the right on tablets). The desktop block sets its own grid. (r2–r2.8: the intro at the top of the card, padding-top clamp(22px, 7vw, 32px).) */ @media (max-width: 1023.98px) { body.ko-hero .ko-hero__slide--about .ko-hero__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(var(--ko-hero-pad), .382fr) auto minmax(calc(var(--ko-hero-pad) + 34px), .618fr); gap: 0; padding-top: 0; padding-bottom: 0; } body.ko-hero .ko-hero__slide--about .ko-hero__intro { grid-row: 2; } } body.ko-hero .ko-hero__slide--about .ko-hero__intro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; max-width: 100%; } /* Logo chip, both breakpoints: the colour logo (stickers + teal "Keramika" + red "Outlet") on white, 6px corners — "less rounded" than a button, so it never reads as a third button (operator, r9). Drawn on the image itself; content-box keeps the shell's logo height as the logo's own. */ body.ko-hero .ko-hero__slide--about .ko-hero__logo { box-sizing: content-box; padding: 6px 14px; background: var(--ko-color-surface-raised); border-radius: var(--ko-radius-lg); } /* Phone title (r3.1: "now can take up more of the card"): 36px up to 327px, 42.9px at 390, 48px from 437px up to 1023; two lines at 320–414px, one line at 600px and wider (measured), balanced; colour and shadow stay the shell's. The desktop block sets the panel cards' display size (42px at 1024, B). (r2–r2.8: the set's phone size, clamp(1.9rem, 8.6vw, 2.2rem), line-height 1.04.) */ body.ko-hero .ko-hero__slide--about .ko-hero__title { font-size: clamp(2.25rem, 11vw, 3rem); line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere; /* 200 % text: a word never leaves the column */ } /* The subtitle (r3.1): the row's Podnaslov (`meta`), printed by the template under the title since v11; empty = nothing shown. Phone: 16px 700 white with the shell's shadow, 30ch, balanced; 8px under the title and 24px over the button (the intro's 12px gap, -4px / +4px). The desktop block sets it on the panel. */ body.ko-hero .ko-hero__slide--about .ko-hero__meta { margin: -4px 0 4px; font-size: 1rem; font-weight: var(--ko-font-weight-bold); line-height: 1.3; max-width: 30ch; text-wrap: balance; } /* Town links: the town only ("Salon" is hidden screen-reader text). Phone: the brand hover red with white text (5.22:1), 44px, 4px corners, sentence case; darkening to #B03332 on hover (6.24:1). */ body.ko-hero .ko-hero__slide--about .ko-hero__pills { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } body.ko-hero .ko-hero__slide--about .ko-hero__pills li { margin: 0; padding: 0; } body.ko-hero .ko-hero__slide--about .ko-hero__pill { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--ko-radius-md); background: var(--ko-color-brand-primary-hover); color: var(--ko-color-text-inverse); font-size: 1rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; text-decoration: none; transition: background-color calc(var(--ko-hero-hover-dur, 500ms) * .6) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } body.ko-hero .ko-hero__slide--about .ko-hero__pill:hover, body.ko-hero .ko-hero__slide--about .ko-hero__pill:active { background: var(--ko-color-brand-primary-active); } /* Not on the phone or tablet (r3.1, operator 2026-09-28: "remove the location buttons,the logo"): the logo chip and the town links. After the pills' base rule, so its display: flex does not win back. Desktop keeps both. */ @media (max-width: 1023.98px) { body.ko-hero .ko-hero__slide--about .ko-hero__logo, body.ko-hero .ko-hero__slide--about .ko-hero__pills { display: none; } } /* "Več o nas". Phone: white with the brand hover red as its text (5.22:1; 4.77:1 on the warm-light hover), the drawn arrow — the set's phone button: 48px, 0 18px 0 20px, 16px 700, 4px corners, --ko-space-2 above it (r2.1; was 44px, 0 16px 0 18px, 15px). Desktop (below): ink, the set's one button (52px, sentence case, arrow). A typed colour (--ko-hero-button / --ko-hero-on-button) wins on both. */ body.ko-hero .ko-hero__slide--about .ko-hero__cta { box-sizing: border-box; position: relative; z-index: 1; min-height: 48px; padding: 0 18px 0 20px; gap: 10px; margin-top: var(--ko-space-2); border-radius: var(--ko-radius-md); background: var(--ko-hero-button, var(--ko-color-surface-raised)); color: var(--ko-hero-on-button, var(--ko-color-brand-primary-hover)); font-size: 1rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; transition: background-color calc(var(--ko-hero-hover-dur, 500ms) * .6) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } /* "Več o nas" also answers a hover anywhere on the card (the whole-card link under the pointer, via :has) — the akcija / offer / Znamka rule; the button goes where the card goes. Pressed (:active) = the hover colour, so a tap gets feedback. */ body.ko-hero .ko-hero__slide--about .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--about .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-surface-subtle)); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-surface-subtle)); } } body.ko-hero .ko-hero__slide--about .ko-hero__cta-arrow { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--ko-hero-hover-dur, 500ms) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } body.ko-hero .ko-hero__slide--about .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: translateX(3px); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: translateX(3px); } } /* Focus rings (D7): ink with white either side — visible on the photo and on the red panel. The !important is the contract's sanctioned kind. */ body.ko-hero .ko-hero__slide--about .ko-hero__pill:focus-visible, body.ko-hero .ko-hero__slide--about a.ko-hero__cta:focus-visible { outline: 2px solid var(--ko-color-focus-ring) !important; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ko-color-text-inverse); } /* ===================================================================== DESKTOP >= 1024px — the locked r10 design (+ E5 / E6 / E7, sentence case) ===================================================================== */ @media (min-width: 1024px) { /* One width drives the panel (r10): 40 % at 1440px and wider, growing to 50 % at 1024px so the logo chip and the one-line heading stay inside the curve. Measured every 16px from 1024 to 1440: the column clears the curve by 37px or more, the stack by 36px or more. E5 / E6: the column rule — the same as the akcija card — measured from the left edge for the intro and from the right edge for the benefit stack. */ body.ko-hero .ko-hero__slide--about { --ko-hero-panel-w: clamp(40%, calc(40% + (1440px - 100vw) * 0.25), 50%); --ko-rez-col-x: clamp(var(--ko-hero-safe, 96px), 8vw, 120px); } /* Centred column on the left (E5: fluid 96 → 120px from the left screen edge; ≥ 24px clear of the prev arrow at 1024). The right padding is the mirror, so the stack keeps ≥ 24px from the next arrow. */ /* The heading stands on the panel and the benefit cards are white, so the showroom photograph needs no scrim on desktop. A foot band for the dots; the phone keeps the operator's gradient. */ body.ko-hero .ko-hero__slide--about::before { background: linear-gradient(180deg, rgba(20,20,20,0) 64%, rgba(20,20,20,.72) 100%); } body.ko-hero .ko-hero__slide--about::after { background: none; } /* r2.1 (finding #2): a two-column GRID instead of the shell's flex column — the intro left, the 380px benefit stack right, both centred on the slide (align-items). The stack is a grid item, so its height counts: at 200 % text the body, the slide and the carousel grow with it (the shell's in-flow rule, IR-026 part 4 on desktop) instead of the stack spilling past the slide's edges and under the dots. At 100 % every box is where it was (stack right edge on --ko-rez-col-x, centred; intro lifted by its golden margin). No row gap. */ body.ko-hero .ko-hero__slide--about .ko-hero__body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: center; gap: 0 var(--ko-space-3); justify-content: center; max-width: none; padding-top: var(--ko-hero-pad); padding-left: var(--ko-rez-col-x); padding-right: var(--ko-rez-col-x); } /* The curved panel, gently in and out: stations about 92 / 100 / 85 / 90 % of its own width (37 / 40 / 34 / 36 % of the slide at 1440px and wider). Drawn in the markup; this only places and colours it. */ body.ko-hero .ko-hero__slide--about .ko-hero__panel { display: block; position: absolute; left: 0; top: 0; width: var(--ko-hero-panel-w); height: 100%; z-index: 0; pointer-events: none; } /* D4: "Barva prekrivala" (the field once called "Barva poudarka") paints the panel; empty = the brand red, opaque (r2.1: one #E04141 across the red panels, akcija and O nas; r10's .97 rendered #DA4041 over the scrim). */ body.ko-hero .ko-hero__slide--about .ko-hero__panel-fill { fill: var(--ko-hero-overlay, var(--ko-color-brand-primary)); fill-opacity: 1; } /* Back in the flex column (centred by the body), inside the panel. The golden line (operator 2026-09-24): a bottom margin of 9 % of the slide height lifts the block 4.5 %, so the title's first baseline sits on the upper golden line (38.2 % of the height). */ body.ko-hero .ko-hero__slide--about .ko-hero__intro { grid-column: 1; justify-self: start; max-width: 360px; margin-bottom: calc(var(--ko-hero-h) * .09); gap: var(--ko-space-3); } /* Logo chip at the desktop logo height (38px): 52px chip. */ body.ko-hero .ko-hero__slide--about .ko-hero__logo { padding: 7px 16px; } /* The panel cards' display size (the akcija/offer clamp); on the red panel its shadow only muddies the edge. D3: a typed text colour wins. */ body.ko-hero .ko-hero__slide--about .ko-hero__title { font-size: clamp(2.625rem, 4vw, 3.75rem); line-height: 1.04; color: var(--ko-hero-on-overlay, var(--ko-color-text-inverse)); text-shadow: none; } /* The subtitle on the panel (r3.1): 20px 700, the title's colour (white on #E04141, 4.20:1 — large text, >= 3:1), no shadow, 12px under the title (the intro's gap). The intro's golden margin gives back the subtitle's line and gap (26px + 12px), so the intro's margin box and with it the title's first baseline stay where they were; a subtitle on two lines moves the title up by half a line (13px). */ body.ko-hero .ko-hero__slide--about .ko-hero__meta { margin: 0; font-size: 1.25rem; line-height: 1.3; max-width: none; color: var(--ko-hero-on-overlay, var(--ko-color-text-inverse)); text-shadow: none; } body.ko-hero .ko-hero__slide--about .ko-hero__intro:has(.ko-hero__meta) { margin-bottom: calc(var(--ko-hero-h) * .09 - 1.25rem * 1.3 - var(--ko-space-3)); } body.ko-hero .ko-hero__slide--about .ko-hero__pills { gap: 10px; } /* Desktop pills: white with ink text, the shell's full 46px size (locked look) — white text on the red panel would be 4.18:1. Case and tracking are the base rule's (sentence case, untracked); the locked 15px is pinned here (the base rule is the phone's 16px). */ body.ko-hero .ko-hero__slide--about .ko-hero__pill { min-height: 46px; padding: 0 18px; font-size: .9375rem; border-radius: var(--ko-radius-pill); background: var(--ko-color-text-inverse); color: var(--ko-color-text-primary); } body.ko-hero .ko-hero__slide--about .ko-hero__pill:hover, body.ko-hero .ko-hero__slide--about .ko-hero__pill:active { background: var(--ko-color-surface-subtle); } /* Desktop CTA: ink with white text (the system's dark button) — red or white would clash with the red panel and the white pills. The set's one button (operator 2026-09-23: "standardize to lower case"): the akcija / offer desktop button — 52px, 0 20px 0 22px, 16px 700, --ko-space-3 above it (town links → button = 24px, r2.1); corners, case, gap and the arrow are the base rule's. */ body.ko-hero .ko-hero__slide--about .ko-hero__cta { min-height: 52px; padding: 0 20px 0 22px; margin-top: var(--ko-space-3); background: var(--ko-hero-button, var(--ko-color-action-secondary)); color: var(--ko-hero-on-button, var(--ko-color-text-inverse)); font-size: 1rem; } body.ko-hero .ko-hero__slide--about .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--about .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-action-secondary-hover)); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-action-secondary-hover)); } } /* Benefit cards — the focus: a vertical stack of rows (icon + text) on the right, centred on the slide, its right edge at the mirrored column margin (E6), ≥ 24px before the next arrow; 380px wide so each heading holds one line at 18px. Three 104px cards + two 20px gaps (E7) = 352px, centred, so the stack stays above the dots line (32px at 1024). r2.1: the second grid column, in the flow (was absolute, top 50 % / translateY(-50 %)) — a taller stack at 200 % text grows the slide and keeps --ko-hero-pad (51–72px) above the dots line. */ /* r2.6: a one-column grid with equal rows (grid-auto-rows: 1fr — every card as tall as the tallest; at 100 % text all are 104px, so nothing moves at rest). Equal rows make the cascade's push, a share of each card's OWN height, exactly the middle card's growth. */ body.ko-hero .ko-hero__slide--about .ko-hero__benefits { display: grid; grid-auto-rows: 1fr; gap: 20px; grid-column: 2; justify-self: end; align-self: center; position: relative; z-index: 1; width: 380px; list-style: none; margin: 0; padding: 0; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit { box-sizing: border-box; /* 104px card including its padding */ margin: 0; display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 16px 18px; background: var(--ko-color-surface-raised); border-radius: var(--ko-radius-md); /* The Kategorija samples' shadow: a contact line + a soft cast, so the white cards keep an edge on the white building. */ box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 36px rgba(0,0,0,.10); /* r2.6, the cascade (rules below): the growth, the push, the move and the shadow are four properties with their own clocks. The push runs on the MIDDLE card's delay (one step, both ways); the rest on the card's own, k steps: k = its place from the top on enter (--ko-cascade-e), from the bottom on leave (--ko-cascade-l). */ --ko-cascade-e: 0; --ko-cascade-l: 0; --ko-cascade-k: var(--ko-cascade-l); transform-origin: right center; transition-property: scale, translate, transform, box-shadow; transition-duration: var(--ko-hero-hover-dur, 500ms); transition-timing-function: var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); transition-delay: calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4) * var(--ko-cascade-k, 0)), calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4)), calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4) * var(--ko-cascade-k, 0)), calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4) * var(--ko-cascade-k, 0)); } /* Decorative hover (E7 / L4), r2.6 the CASCADE — the same rules as the Kategorija samples. The card is hovered (its whole-card link is under the pointer, also when the pointer rests on the stack or a gap, or the pointer is on "Več o nas") → the cards grow, move left and float, top → middle → bottom; on leave bottom → middle → top. They are not links; nothing is announced. Off under reduced motion (below): the shell's tokens go to 1 / 0px and this block drops every transition. The places, for the clocks: */ body.ko-hero .ko-hero__slide--about .ko-hero__benefit:nth-child(2) { --ko-cascade-e: 1; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit:nth-child(3) { --ko-cascade-e: 2; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit:nth-last-child(2) { --ko-cascade-l: 1; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit:nth-last-child(3) { --ko-cascade-l: 2; } /* The stack grows outward from the middle card: the top card upward, the bottom card downward (a lone card from its centre). */ body.ko-hero .ko-hero__slide--about .ko-hero__benefit:first-child:not(:only-child) { transform-origin: right bottom; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit:last-child:not(:only-child) { transform-origin: right top; } /* Out: the growth, the move (inside the scale, so the right edges end exactly the shift to the left), the floating shadow. */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__benefit, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(.ko-hero__cta:hover) .ko-hero__benefit { --ko-cascade-k: var(--ko-cascade-e); scale: var(--ko-hero-cascade-grow, 1.06); transform: translateX(calc(var(--ko-hero-cascade-shift, 8px) / var(--ko-hero-cascade-grow, 1.06) * -1)); box-shadow: 0 4px 10px rgba(0,0,0,.14), 0 28px 60px rgba(0,0,0,.28); } /* The push (three cards): the outer two move by the middle card's half growth — 50 % × (grow − 1) of their own height, equal rows — on the middle card's clock. 0 when the growth is 1 (the wp-admin switch). */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__benefit:first-child:nth-last-child(3), body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(.ko-hero__cta:hover) .ko-hero__benefit:first-child:nth-last-child(3) { translate: 0 calc(-50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__benefit:nth-child(3):last-child, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(.ko-hero__cta:hover) .ko-hero__benefit:nth-child(3):last-child { translate: 0 calc(50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__benefit { --ko-cascade-k: var(--ko-cascade-e); scale: var(--ko-hero-cascade-grow, 1.06); transform: translateX(calc(var(--ko-hero-cascade-shift, 8px) / var(--ko-hero-cascade-grow, 1.06) * -1)); box-shadow: 0 4px 10px rgba(0,0,0,.14), 0 28px 60px rgba(0,0,0,.28); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__benefit:first-child:nth-last-child(3) { translate: 0 calc(-50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__benefit:nth-child(3):last-child { translate: 0 calc(50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ko-radius-pill); background: var(--ko-color-brand-tint); color: var(--ko-color-brand-primary); } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-icon svg { width: 22px; height: 22px; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-label { margin: 0; font-size: var(--ko-font-size-lg); font-weight: var(--ko-font-weight-display); line-height: 1.2; letter-spacing: var(--ko-letter-spacing-snug); color: var(--ko-color-text-primary); } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-desc { margin: 0; font-size: var(--ko-font-size-sm); line-height: 1.4; color: var(--ko-color-text-secondary); } } /* r2.1 #5 (a), option B (operator 2026-09-24) — narrower desktops (1024–1279px): the photo side is 380–470px wide and the building fills it, so three 104px cards covered 60 % of the façade and 64 % of the "KeramikaOutlet.si" sign at 1024 (measured). Here all THREE benefits stay, as label-only rows (the description returns from 1280px up): 60px rows, a 36px icon, the 17px label, 16px apart, 330px wide (still ending on --ko-rez-col-x: the grid column keeps its 380px, the stack sits at its end). r2.1 anchored the stack to the foot (sign 0 %, façade 31 % at 1024); r2.7 (operator 2026-09-25) centres it on the same rule as from 1280px up — the desktop rule's align-self: center, no override here — so crossing 1280 changes only the card height (and the description), not the centre line. The sign is covered while the rows are here (at rest 33 / 12 / 3 %, fully out 44 / 19 / 8 % at 1024 / 1152 / 1279; accepted by the operator). At 200 % text the rows grow from the centre and the row (the intro's or the stack's height) grows the slide, as the grid rule intends. From 1280px up the locked stack is unchanged. */ @media (min-width: 1024px) and (max-width: 1279.98px) { body.ko-hero .ko-hero__slide--about .ko-hero__benefits { gap: 16px; width: 330px; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit { min-height: 60px; padding: 12px 16px; gap: 12px; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-icon { width: 36px; height: 36px; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-icon svg { width: 20px; height: 20px; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-label { font-size: 1.0625rem; } body.ko-hero .ko-hero__slide--about .ko-hero__benefit-desc { display: none; } } @media (prefers-reduced-motion: reduce) { body.ko-hero .ko-hero__slide--about .ko-hero__pill, body.ko-hero .ko-hero__slide--about .ko-hero__cta, body.ko-hero .ko-hero__slide--about .ko-hero__cta-arrow, body.ko-hero .ko-hero__slide--about .ko-hero__benefit, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__benefit, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(.ko-hero__cta:hover) .ko-hero__benefit { transition: none; } body.ko-hero .ko-hero__slide--about .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: none; } /* r2.6: the cascade neither grows nor moves (the shell's tokens do the same; this keeps the block standing alone). The floating shadow still shows, without a transition. */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__benefit, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(.ko-hero__cta:hover) .ko-hero__benefit, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__benefit:first-child:nth-last-child(3), body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(.ko-hero__cta:hover) .ko-hero__benefit:first-child:nth-last-child(3), body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(> .ko-hero__link:hover) .ko-hero__benefit:nth-child(3):last-child, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--about:has(.ko-hero__cta:hover) .ko-hero__benefit:nth-child(3):last-child { scale: none; translate: none; transform: none; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__benefit { transition: none; } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: none; } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__benefit, body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__benefit:first-child:nth-last-child(3), body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--about.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__benefit:nth-child(3):last-child { scale: none; translate: none; transform: none; } } } /* ===================================================================== Tedenska akcija — body styles (design v9 = r3.1, 2026-09-28) Block file: hero-cards-akcija-v9.css — replaces the Tedenska akcija block of wp-content/themes/spletnik-child/assets/css/woo/hero-cards.css. Markup: template-parts/hero-card-body-akcija.php (unchanged) Spec: briefs/design-akcija-v9/design-akcija-card-v9-spec.md (revises briefs/design-akcija-v7/design-akcija-card-v7-spec.md; v8, r2.9, was never installed) History: v1 r3 locked 2026-09-14; r4 polish 2026-09-22 (24px arrow rule, balanced title, no line on the curve). Design r2 — direction A "Rez" — locked by the operator 2026-09-23 for desktop and phone: the straight cut, the L1 column rule, the peel-off sticker, the D2 positions and the D3/D4 colour properties. r2.1 (operator 2026-09-24; spec §0 has the full list): the pressed state, the phone button family, the tablet ramp, long words wrap, proportional deadline figures; no scrim on the photo side (a foot band for the dots); the corner lifts on hover; the panel's foot never short of the 38.2 % line; the title's first baseline on the upper golden line; the sticker face #CE2222 and the one-line "do" (dormant until the shell prints it, IR-037). r2.2 (operator 2026-09-25): the peel is a real fold driven by one value; the number is a fixed fraction of the disc, the same on both stickers; slower hovers: every hover here runs on the card-level duration --ko-hero-hover-dur (500ms) and ease --ko-hero-hover-ease (an ease-out quad; the shell defines both, IR-038) — movement at the full duration, colour at .6 of it — instead of the site-wide 220ms and the standard curve, which other buttons keep. The standard curve does 96 % of a move in the first half, so a longer duration alone still looks quick; the softer ease spreads the move across the half second. r2.3 (operator 2026-09-25, option C): the discount is printed on the sticker, so the peel takes it along — the fold goes deeper on hover (60 % → 49 %) and the flap covers the tip of the "%" (the digits stay whole), and the whole sticker answers: it tilts −6° → −8° and its drop shadow deepens a little. The face now carries the clip, so the shadow follows the sticker's real outline (r2.2 cut it along the fold line, a straight edge past the disc). r2.4 (operator 2026-09-25): the sticker's type is fixed proportions of the disc only — the number .25 of it alone, .208 with "do" at every width, "do" .41 of the number, no px floor — the same on both stickers, so the discount never shrinks faster than the sticker. r2.8 (operator 2026-09-26, infrastructure's design-r2.8 request): the card's hover HOLDS while the pointer is anywhere on the hero — the photo, the button, the arrows, the dots and the toggle — and ends once, when the pointer leaves the hero. Every hover rule below is followed by an @media (hover: hover) twin with the same declarations. Its trigger: the pointer on section.ko-hero, the slide active, and none of the rule's own hover conditions on (its :has(…:hover) triggers, and the button's own :hover where the rule lists it) — :where(section.ko-hero:hover) … .ko-hero__slide.ko-hero__slide--active:where(:not(:has(…))…). The :where() parts weigh nothing and the two classes weigh exactly the :has(…:hover) they replace, so the twin stands in for the whole-card link's hover at the same place in the cascade and never competes with the originals (the button's own hover and pressed state still answer to themselves). Pointer devices only: on a touch screen a tapped arrow or dot would keep the hover and fold every slide it brings. Keyboard focus on a control does not start it (a focused arrow is not the card). The peel no longer skips (r2.8): the flap is placed with translate — it was left / top, which land on whole pixels, so the fold stood still for frames and then jumped a whole pixel — and the sticker is its own layer (will-change: transform), so a frame repaints the sticker, not the photograph under it. The look is unchanged (the spec's §1 has the before / after frames and numbers). The cut. The red panel stays on the left, but its edge is one straight, raked line — a tile cut clean on the wet saw — instead of the soft curve. This card's cut leans "/": wider at the top, where the two title lines are widest, narrower at the bottom under the button. The panel's width is computed from the text column (column x + column width + 32px, divided by the cut's narrowest station, .86), so the column never crosses the cut at any desktop width: the title's longest line ends 120 / 143 / 152 / 142px inside the cut at 1024 / 1280 / 1440 / 1920 (floor 16px). Column rule (E5 / L1): the text starts at --ko-rez-col-x = clamp(96px, 8vw, 120px) from the left screen edge — 96px at 1024–1200 (24px clear of the prev arrow: 20 + 52 + 24), fluid to 115px at 1440, settling at 120px from 1500px. Column width clamp(300px, 29vw, 420px). Signature: the shell's chip (the live "−71 %") restyled into the brand's own round peel-off sticker — the one on the KeramikaOutlet logo: a flat circle with a white rim, the number set big in 800, and a lifted corner showing the paper back. It sits ON the cut, half on the red, half on the photo, at 30 % of the slide height. Colours: --ko-hero-label / --ko-hero-on-label (D2/D3), brand red / white when empty. Type: display clamp(2.625rem, 4vw, 3.75rem) 800, −0.03em, balanced; label a white tag in sentence case (15px 700 ink — white 15px on the red would be 4.20:1, under 4.5); deadline a plain line, 20px 700 white, proportional figures (large text, 4.20:1 ≥ 3:1); button 52px, 16px 700, sentence case, drawn arrow, ink on the panel (--ko-hero-button / --ko-hero-on-button). Hover and pressed (:active) share one colour; the arrow's nudge is off under reduced motion. Mobile (< 1024px): no overlay (operator). White tag, title clamp(1.9rem, 8.6vw, …) — 33.5px at 390, then ramping on tablets to the desktop floor (42px) at 1023 — deadline 16 → 20px 700, white button 48px 16px, the sticker top-right at 96px ramping to 150px (r2.1). r2.9 (operator 2026-09-26, after the /impeccable critique): the arrival gate (IR-046) — every card-level hover trigger below also waits while the section carries ko-hero--auto-arrived, so a slide the timer brought in under a resting pointer stays at rest until the pointer moves (the shell's script sets and clears the class; without it the rules are r2.8's). The button's own hover is not gated. r3.1 (operator 2026-09-28): the phone and tablet stay r2.8's, as above — "good enough … no new overlay"; r2.9's cut on phones (v8, never installed) is withdrawn. The dots sit on the ink tile at every width (IR-046, the shell). Scope: every rule hangs off .ko-hero__slide--akcija; tokens from ko-tokens.css and the shell's per-slide properties only. ===================================================================== */ /* The panel is desktop only. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__panel { display: none; } body.ko-hero .ko-hero__slide--akcija .ko-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; } /* --- the label: a white tag, sentence case ---------------------------- */ body.ko-hero .ko-hero__slide--akcija .ko-hero__badge { padding: 6px 10px; border-radius: var(--ko-radius-md); background: var(--ko-hero-label, var(--ko-color-surface-raised)); color: var(--ko-hero-on-label, var(--ko-color-text-primary)); font-size: .875rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; } /* --- the title -------------------------------------------------------- */ body.ko-hero .ko-hero__slide--akcija .ko-hero__title { /* 30.4px at 320, 33.5 at 390, 35.2 at 414 (unchanged); from 414 the ceiling ramps 35.2 → 42px at 1023 (= the desktop floor at 1024), so a 768px tablet reads a 39px title instead of the phone's 35. */ font-size: clamp(1.9rem, 8.6vw, 1.911rem + 1.1166vw); line-height: 1.04; text-wrap: balance; overflow-wrap: anywhere; /* 200 % text: a word never leaves the column */ } /* --- the deadline: a quiet line, proportional figures ----------------- */ body.ko-hero .ko-hero__slide--akcija .ko-hero__deadline { margin: 0; color: var(--ko-color-text-inverse); font-size: clamp(1rem, .83rem + .657vw, 1.25rem); /* 16px to 414, 20px at 1023 (= desktop) */ font-weight: var(--ko-font-weight-bold); line-height: 1.3; text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* Proportional figures: nothing aligns to this line, and the tabular "1" (0.6em against 0.4em) read letterspaced in "19. 10. 2026". The date keeps its spaces and never breaks. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__deadline-date { white-space: nowrap; } /* --- the button: white on the photo, sentence case, drawn arrow ------- */ body.ko-hero .ko-hero__slide--akcija .ko-hero__cta { box-sizing: border-box; position: relative; min-height: 48px; padding: 0 18px 0 20px; gap: 10px; margin-top: var(--ko-space-2); border-radius: var(--ko-radius-md); background: var(--ko-hero-button, var(--ko-color-surface-raised)); color: var(--ko-hero-on-button, var(--ko-color-text-primary)); font-size: 1rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; transition: background-color calc(var(--ko-hero-hover-dur, 500ms) * .6) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } body.ko-hero .ko-hero__slide--akcija .ko-hero__cta-arrow { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--ko-hero-hover-dur, 500ms) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } /* Hover from the button itself (it is an now) and from anywhere on the card (the whole-card link, via :has — browsers without it keep the button's own hover); pressed (:active) = the hover colour, so a tap gets feedback. A typed button colour keeps its colour; the fallback goes to the warm light. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--akcija .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-surface-subtle)); } body.ko-hero .ko-hero__slide--akcija .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: translateX(3px); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-surface-subtle)); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: translateX(3px); } } /* Focus ring (D7): ink, with white either side, so it reads on the photo and on the red panel. The !important is the contract's sanctioned kind. */ body.ko-hero .ko-hero__slide--akcija a.ko-hero__cta:focus-visible { outline: 2px solid var(--ko-color-focus-ring) !important; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ko-color-text-inverse); } /* --- the sticker (the shell's chip, restyled) --------------------------- A flat circle with a white rim, the number in 800, and a folded-back corner at the lower right — a real fold, driven by ONE value: · --ko-hero-peel (registered below; 0 at rest, 1 while the card is hovered) sets the fold line x + y = 100 % + fold, fold = 60 % → 49 % of the disc, and the sticker's tilt, −6° → −8°; · the face (::before) is clipped to the face side of that line, so neither the red nor its rim exists beyond the fold at any frame, and the chip's drop shadow follows the sticker as it is (with the flap); · the flap (::after) is the removed corner mirrored across the same line: the disc reflected there, kept on the face side. It is drawn above the number, so on hover it covers the tip of the "%" — the print goes with the paper (r2.3, option C). No ink ever reaches the fold line itself (≥ 2.9px), so nothing of the number shows past it; · the face carries the flap's contact shadow, deepening as the corner lifts; the flap shows the paper back with a light edge on the fold. Measured (spec §1): 0 red pixels beyond the fold in 11 frames (0–100 %) at 1440 and 390; at full hover the digits stay ≥ 4.1px clear of the flap and 16–34 % of the "%" is under it (two-digit discounts, with and without "do", both stickers, 390–1920). The chip stays the shell's element: it renders only with a live discount and stays decorative. */ /* One registered value drives the whole fold (r2.2): 0 at rest, 1 on hover. Registered so it interpolates; without @property support it switches in one step, and the fold stays whole either way. The same rule is in the akcija and the Ponudba block (identical; either can stand alone). */ @property --ko-hero-peel { syntax: ""; inherits: true; initial-value: 0; } body.ko-hero .ko-hero__slide--akcija .ko-hero__chip { --ko-rez-rim: 3px; /* The disc; the fold line x + y = 100 % + fold (in the chip's own box): 60 % at rest, 49 % when the card is hovered; the tilt with it. */ --ko-rez-disc: clamp(96px, 59.3px + 8.87vw, 150px); --ko-rez-fold: calc(60% - 11% * var(--ko-hero-peel)); --ko-rez-tilt: calc(-6deg - 2deg * var(--ko-hero-peel)); /* 96px at 14px from the corner up to 414; on tablets the disc ramps to the desktop floor (150px, 24px inset) at 1023 — the number with it. */ top: clamp(14px, 2.3vw, 24px); right: clamp(14px, 2.3vw, 24px); width: var(--ko-rez-disc); height: var(--ko-rez-disc); min-width: 0; min-height: 0; padding: 0 0 2px; border-radius: 0; background: none; box-shadow: none; color: var(--ko-hero-on-label, var(--ko-color-text-inverse)); /* px on purpose: the sticker is a printed object and keeps its size at 200 % text (the number would otherwise wrap inside the circle); the value is in the card link's accessible name, the chip is aria-hidden. */ /* The number is a quarter of the disc on both stickers, at every width (r2.2: "the same size relative to the sticker"). */ font-size: calc(var(--ko-rez-disc) * .25); font-weight: var(--ko-font-weight-display); letter-spacing: var(--ko-letter-spacing-tight); line-height: 1; white-space: nowrap; filter: drop-shadow(0 calc(8px + 3px * var(--ko-hero-peel)) calc(18px + 6px * var(--ko-hero-peel)) rgb(0 0 0 / calc(.30 + .04 * var(--ko-hero-peel)))); transform: rotate(var(--ko-rez-tilt)); transition: --ko-hero-peel var(--ko-hero-hover-dur, 500ms) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); /* r2.8: its own layer, so each frame of the peel repaints the sticker alone, not the photograph under it. */ will-change: transform; } body.ko-hero .ko-hero__slide--akcija .ko-hero__chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; /* The face one step darker than the sale red (operator 2026-09-24): white reaches 5.42:1 on #CE2222, so the small "do" below passes the 4.5 bar (#E92727 gave 4.39). A typed label colour still wins (D3). */ /* Over the red: the flap's contact shadow, a ring just outside the flap's arc (the reflected disc: centre 50 % + fold, radius 50 %), wider and darker as the corner lifts. The face is clipped to the face side of the fold line, 1px short of it so the red's edge sits under the flap (no pink seam along the fold). */ background: radial-gradient(ellipse calc(55% + 5% * var(--ko-hero-peel)) calc(55% + 5% * var(--ko-hero-peel)) at calc(50% + var(--ko-rez-fold)) calc(50% + var(--ko-rez-fold)), rgb(20 20 20 / 0) calc(100% * 50 / (55 + 5 * var(--ko-hero-peel))), rgb(20 20 20 / calc(.26 + .14 * var(--ko-hero-peel))) calc(100% * 50 / (55 + 5 * var(--ko-hero-peel))), rgb(20 20 20 / 0) 100%), var(--ko-hero-label, var(--ko-color-action-primary-hover)); box-shadow: inset 0 0 0 var(--ko-rez-rim) var(--ko-color-text-inverse); clip-path: polygon(0 0, 100% 0, 100% calc(var(--ko-rez-fold) - 1px), calc(var(--ko-rez-fold) - 1px) 100%, 0 100%); } body.ko-hero .ko-hero__slide--akcija .ko-hero__chip::after { content: ""; position: absolute; /* The removed corner mirrored across the fold line: the disc reflected there sits at (fold, fold) in the chip's box, and only its part on the face side of the line is kept — exactly the corner, folded over. The paper back: a light edge along the fold, then the back of the paper, a shade deeper towards the lifted tip (the 315° gradient meets the fold at 50 % + fold / 2 of its length). r2.8: moved there with translate, not left / top — those land on whole pixels, so the fold stood still and jumped from frame to frame; translate moves it by fractions. The same length: the flap is the chip's size, so fold % of either is the same. */ left: 0; top: 0; translate: var(--ko-rez-fold) var(--ko-rez-fold); width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(315deg, var(--ko-color-surface-raised) calc(50% + var(--ko-rez-fold) / 2), color-mix(in srgb, var(--ko-color-border-strong) 80%, var(--ko-color-text-muted)) calc(52% + var(--ko-rez-fold) / 2), var(--ko-color-surface-subtle) 86%); clip-path: polygon(0 0, calc(100% - var(--ko-rez-fold)) 0, 0 calc(100% - var(--ko-rez-fold))); } /* "do" before the number (operator 2026-09-24; IR-037 prints the span). When the discounts in the set differ, the shell prints do directly before the value. The pair then sits on ONE line, centred across the disc. r2.4 (operator 2026-09-25): only fixed proportions of the sticker, no px — the number is .208 of the disc and "do" .41 of the number (.085 of the disc) at every width, on both stickers, so neither ever shrinks faster than the sticker. The shared baseline sits at 58 % of the disc (the fold's resting corner is at 60 %), which also centres the capitals (.908em = the baseline's depth in a 1.0 line of Plus Jakarta Sans: ascent 1.038, descent .222). A flat discount prints no span and keeps the number alone, as before. Without :has() the pair stays centred on the flex row at the number's usual size. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__chip:has(.ko-hero__chip-pre) { /* With "do" the number is .208 of the disc at every width, on both stickers (r2.4; alone it is .25). */ --ko-rez-num: calc(var(--ko-rez-disc) * .208); flex-wrap: wrap; /* one line; wrap only so align-content can place it */ align-content: flex-start; align-items: baseline; padding-top: calc(var(--ko-rez-disc) * .58 - var(--ko-rez-num) * .908); font-size: var(--ko-rez-num); } body.ko-hero .ko-hero__slide--akcija .ko-hero__chip-pre { /* .41 of the number, no floor (r2.4: a fixed proportion only; white on #CE2222 is 5.42:1 at any size). The gap is .15 of the number. */ margin-right: .36em; font-size: .41em; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; } /* ===================================================================== DESKTOP >= 1024px — the cut panel ===================================================================== */ @media (min-width: 1024px) { /* The geometry, on the slide so the panel, the column and the sticker read the same numbers. */ body.ko-hero .ko-hero__slide--akcija { --ko-rez-col-x: clamp(var(--ko-hero-safe, 96px), 8vw, 120px); --ko-rez-col-w: clamp(300px, 29vw, 420px); /* The panel follows the column (column + 32px at the cut's foot), but its foot never falls short of the golden line — 38.2 % of the width (operator 2026-09-24). From about 1500px up the column alone would stop short (29.8 % at 1920), so the panel widens there; below that the foot is already 15–37px past the line and nothing changes. */ --ko-rez-panel-w: max(calc((var(--ko-rez-col-x) + var(--ko-rez-col-w) + 32px) / .86), calc(38.2% / .86)); --ko-rez-sticker: clamp(150px, 12vw, 176px); } /* The text stands on the panel: on desktop the photo needs no scrim, only the dots need a foot band. The shell's left scrim (::after) and the operator's gradient (::before) both spill past the cut onto the tile wall; off here. The phone keeps the operator's gradient. */ body.ko-hero .ko-hero__slide--akcija::before { background: linear-gradient(180deg, rgba(20,20,20,0) 64%, rgba(20,20,20,.72) 100%); } body.ko-hero .ko-hero__slide--akcija::after { background: none; } body.ko-hero .ko-hero__slide--akcija .ko-hero__body { justify-content: center; max-width: none; padding-left: var(--ko-rez-col-x); padding-right: max(var(--ko-hero-pad), var(--ko-hero-safe, 96px)); } /* The cut panel: top edge at 100 % of its width, bottom at 86 %. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__panel { display: block; position: absolute; left: 0; top: 0; width: var(--ko-rez-panel-w); height: 100%; z-index: 0; pointer-events: none; } body.ko-hero .ko-hero__slide--akcija .ko-hero__panel-fill { fill: var(--ko-hero-overlay, var(--ko-color-brand-primary)); } /* The golden line (operator 2026-09-24): a bottom margin of 9 % of the slide height lifts the centred block 4.5 %, so the title's first baseline sits on the upper golden line (38.2 % of the height) with the live two-line title. The block stays in the flow. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__intro { position: relative; z-index: 1; width: var(--ko-rez-col-w); margin-bottom: calc(var(--ko-hero-h) * .09); gap: 14px; } body.ko-hero .ko-hero__slide--akcija .ko-hero__badge { padding: 7px 11px; font-size: .9375rem; } body.ko-hero .ko-hero__slide--akcija .ko-hero__title { font-size: clamp(2.625rem, 4vw, 3.75rem); color: var(--ko-hero-on-overlay, var(--ko-color-text-inverse)); text-shadow: none; } body.ko-hero .ko-hero__slide--akcija .ko-hero__deadline { margin-top: -2px; color: var(--ko-hero-on-overlay, var(--ko-color-text-inverse)); font-size: 1.25rem; text-shadow: none; } /* Ink on the panel — red on red would disappear. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__cta { min-height: 52px; padding: 0 20px 0 22px; margin-top: var(--ko-space-3); background: var(--ko-hero-button, var(--ko-color-action-secondary)); color: var(--ko-hero-on-button, var(--ko-color-text-inverse)); font-size: 1rem; } body.ko-hero .ko-hero__slide--akcija .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--akcija .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-action-secondary-hover)); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-action-secondary-hover)); } } /* The sticker on the cut: its centre on the edge at 30 % of the height (the edge there is at 95.8 % of the panel's width). */ body.ko-hero .ko-hero__slide--akcija .ko-hero__chip { --ko-rez-rim: 4px; top: 30%; right: auto; left: calc(var(--ko-rez-panel-w) * .958); --ko-rez-disc: var(--ko-rez-sticker); padding-bottom: 4px; filter: drop-shadow(0 calc(12px + 4px * var(--ko-hero-peel)) calc(28px + 8px * var(--ko-hero-peel)) rgb(0 0 0 / calc(.34 + .04 * var(--ko-hero-peel)))); transform: translate(-50%, -50%) rotate(var(--ko-rez-tilt)); } /* D2 positions (desktop only — on a phone the sticker keeps the top right corner, the one corner free of text and controls). On the panel side the sticker keeps to the cut — top and bottom of the edge (its centre on the line); the two right-hand positions are the photo's corners. Every position clears the title, the button, the arrows, the dots and the toggle at 1024–1920 (measured, spec §12). */ body.ko-hero .ko-hero__slide--akcija .ko-hero__chip--tl { top: 24px; left: calc(var(--ko-rez-panel-w) * .972); transform: translateX(-50%) rotate(var(--ko-rez-tilt)); } body.ko-hero .ko-hero__slide--akcija .ko-hero__chip--bl { top: auto; bottom: 44px; left: calc(var(--ko-rez-panel-w) * .894); transform: translateX(-50%) rotate(var(--ko-rez-tilt)); } body.ko-hero .ko-hero__slide--akcija .ko-hero__chip--tr { top: 24px; left: auto; right: 24px; transform: rotate(var(--ko-rez-tilt)); } /* Bottom right: beside the pause toggle (20 + 44 + 24px), because the band between the next arrow and the toggle is shorter than the sticker at 1024px. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__chip--br { top: auto; bottom: 24px; left: auto; right: 88px; transform: rotate(var(--ko-rez-tilt)); } } /* ===================================================================== HOVER — the peel (proposal H-2, r2.2; r2.3): while the card is hovered the one value --ko-hero-peel goes 0 → 1, so the fold line moves from 60 % to 49 % (the flap takes the tip of the "%"), the sticker tilts −6° → −8°, and the contact and drop shadows deepen, in one interpolation. --ko-hero-hover-dur and --ko-hero-hover-ease; off under reduced motion (the sticker stays as it is). ===================================================================== */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(> .ko-hero__link:hover) .ko-hero__chip, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(.ko-hero__cta:hover) .ko-hero__chip { --ko-hero-peel: 1; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__chip { --ko-hero-peel: 1; } } @media (prefers-reduced-motion: reduce) { body.ko-hero .ko-hero__slide--akcija .ko-hero__cta, body.ko-hero .ko-hero__slide--akcija .ko-hero__cta-arrow { transition: none; } body.ko-hero .ko-hero__slide--akcija .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: none; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: none; } } /* The sticker stays as it is: no fold, no tilt. */ body.ko-hero .ko-hero__slide--akcija .ko-hero__chip { transition: none; } body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(> .ko-hero__link:hover) .ko-hero__chip, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija:has(.ko-hero__cta:hover) .ko-hero__chip { --ko-hero-peel: 0; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--akcija.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__chip { --ko-hero-peel: 0; } } } /* ===================================================================== Ponudba / Super akcija — body styles (design v9 = r3.1, 2026-09-28) Block file: hero-cards-offer-v9.css — replaces the Ponudba block of wp-content/themes/spletnik-child/assets/css/woo/hero-cards.css. Markup: template-parts/hero-card-body-offer.php (unchanged) Spec: briefs/design-offer-v9/design-offer-card-v9-spec.md (revises briefs/design-offer-v7/design-offer-card-v7-spec.md; v8, r2.9, was never installed) r2.2 (operator 2026-09-25): the peel is a real fold driven by one value (the construction is described in the akcija block); the number is a fixed fraction of the disc, the same as on the akcija sticker; slower hovers: every hover here runs on the card-level duration --ko-hero-hover-dur (500ms) and ease --ko-hero-hover-ease (an ease-out quad; the shell defines both, IR-038) — movement at the full duration, colour at .6 of it — instead of the site-wide 220ms and the standard curve, which other buttons keep. The standard curve does 96 % of a move in the first half, so a longer duration alone still looks quick; the softer ease spreads the move across the half second. r2.3 (operator 2026-09-25, option C): the discount is printed on the sticker, so the peel takes it along — the fold goes deeper on hover (60 % → 49 %) and the flap covers the tip of the "%" (the digits stay whole), and the whole sticker answers: it tilts −6° → −8° and its drop shadow deepens a little. The face now carries the clip, so the shadow follows the sticker's real outline (r2.2 cut it along the fold line, a straight edge past the disc). r2.4 (operator 2026-09-25): the sticker's type is fixed proportions of the disc only — the number .25 of it alone, .208 with "do" at every width, "do" .41 of the number, no px floor — the same on both stickers, so the discount never shrinks faster than the sticker. r2.8 (operator 2026-09-26, infrastructure's design-r2.8 request): the card's hover HOLDS while the pointer is anywhere on the hero — the photo, the button, the arrows, the dots and the toggle — and ends once, when the pointer leaves the hero. Every hover rule below is followed by an @media (hover: hover) twin with the same declarations. Its trigger: the pointer on section.ko-hero, the slide active, and none of the rule's own hover conditions on (its :has(…:hover) triggers, and the button's own :hover where the rule lists it) — :where(section.ko-hero:hover) … .ko-hero__slide.ko-hero__slide--active:where(:not(:has(…))…). The :where() parts weigh nothing and the two classes weigh exactly the :has(…:hover) they replace, so the twin stands in for the whole-card link's hover at the same place in the cascade and never competes with the originals (the button's own hover and pressed state still answer to themselves). Pointer devices only: on a touch screen a tapped arrow or dot would keep the hover and fold every slide it brings. Keyboard focus on a control does not start it (a focused arrow is not the card). The peel no longer skips (r2.8): the flap is placed with translate — it was left / top, which land on whole pixels, so the fold stood still for frames and then jumped a whole pixel — and the sticker is its own layer (will-change: transform), so a frame repaints the sticker, not the photograph under it. The look is unchanged (the spec's §1 has the before / after frames and numbers). History: v1 r1 locked 2026-09-14; r2 polish 2026-09-22 (24px arrow rule, balanced title). Design r2 — direction A "Rez" — locked by the operator 2026-09-23: the mirrored cut, the L1 column rule from the right, the smaller peel-off sticker, the D2 positions and the D3/D4 colour properties. Phone (operator 2026-09-23): direction A with a WHITE label. r2.1 (operator 2026-09-24; spec §0 has the full list): the desktop panel leaves the brand red for the warm light (T-1a: --ko-color-surface-subtle, ink title and line 14.2:1), so the akcija keeps the only red panel in the loop; the pressed state, the phone button family, the tablet ramp, the set's one phone title size, long words wrap; no scrim on the photo side; the corner lifts on hover; the panel's foot never short of the 61.8 % line; the title's first baseline on the upper golden line; the sticker face #CE2222 and the one-line "do" (dormant, IR-037). Where this header says "red panel" below, read the light panel; the colour rules carry the r2.1 notes. The phone label (< 1024px) is a WHITE tag with ink text — the same tag as the akcija's phone "Tedenska akcija" (6/10px padding, 4px corners, 14px 700, 15.5:1) — so the two panel cards share one label on a phone. Desktop keeps the ink tag with white text on the red panel (this card's own voice next to the akcija's white tag). Both read --ko-hero-label / --ko-hero-on-label first, so a colour typed in wp-admin wins on either breakpoint. The mirrored cut. The red panel sits on the right, its edge one straight raked line leaning "\" — the Tedenska akcija cut from the other side, so slide 2 answers slide 1 instead of repeating it. Wider at the top (the title's widest lines), narrower at the bottom under the button. Column rule (E5 / L1, mirrored): the text column ends at --ko-rez-col-x = clamp(96px, 8vw, 120px) from the RIGHT screen edge (24px clear of the next arrow at 1024–1200, fluid, settling at 120px from 1500px); the text stays left-aligned inside the column. The panel's width is computed from the column, divided by the cut's narrowest station (.86), so nothing crosses the edge at any width. The sticker is the smaller version of the akcija's (clamp 112–132px) on the cut at 30 % of the height. Supporting line 20px 700 ink on the light panel (14.2:1; r2: white on the red, 4.20:1); text-wrap: pretty so no row's line ends in a one-word last line ("zalogi" alone at 1024 — r2). Mobile: no overlay. White tag (ink text), title clamp(1.9rem, 8.6vw, …) — the set's one phone size (TC-02): 33.5px at 390, ramping on tablets to the desktop floor (42px) at 1023 — line 16 → 20px 700, white button 48px 16px, sticker 84px top-right ramping to 112px (r2.1). Hover and pressed (:active) share one colour; the arrow's nudge is off under reduced motion. r2.9 (operator 2026-09-26, after the /impeccable critique): the arrival gate (IR-046) — every card-level hover trigger below also waits while the section carries ko-hero--auto-arrived, so a slide the timer brought in under a resting pointer stays at rest until the pointer moves (the shell's script sets and clears the class; without it the rules are r2.8's). The button's own hover is not gated. r3.1 (operator 2026-09-28): the phone and tablet stay r2.8's, as above — "good enough … no new overlay"; r2.9's cut on phones (v8, never installed) is withdrawn. The dots sit on the ink tile at every width (IR-046, the shell). Scope: every rule hangs off .ko-hero__slide--offer; tokens from ko-tokens.css and the shell's per-slide properties only. ===================================================================== */ /* The panel is desktop only. */ body.ko-hero .ko-hero__slide--offer .ko-hero__panel--right { display: none; } body.ko-hero .ko-hero__slide--offer .ko-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; } /* --- the label: on phones a WHITE tag with ink text (operator, r2) — exactly the akcija's phone tag; the desktop block below turns it into the ink tag on the panel. ---------------------------------------------- */ body.ko-hero .ko-hero__slide--offer .ko-hero__badge { padding: 6px 10px; border-radius: var(--ko-radius-md); background: var(--ko-hero-label, var(--ko-color-surface-raised)); color: var(--ko-hero-on-label, var(--ko-color-text-primary)); font-size: .875rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; } body.ko-hero .ko-hero__slide--offer .ko-hero__title { /* The set's one phone title size (TC-02): the akcija's clamp — 30.4px at 320, 33.5 at 390, 35.2 at 414; from 414 the ceiling ramps 35.2 → 42px at 1023 (= the desktop floor at 1024), the akcija's own ramp. */ font-size: clamp(1.9rem, 8.6vw, 1.911rem + 1.1166vw); line-height: 1.04; text-wrap: balance; overflow-wrap: anywhere; /* 200 % text: a word never leaves the column */ } /* The fact line: 700 on both breakpoints, like the akcija's deadline. */ body.ko-hero .ko-hero__slide--offer .ko-hero__meta { font-size: clamp(1rem, .83rem + .657vw, 1.25rem); /* 16px to 414, 20px at 1023 (= desktop) */ font-weight: var(--ko-font-weight-bold); line-height: 1.35; text-wrap: pretty; /* no one-word last line ("zalogi" alone at 1024) */ } /* --- the button ------------------------------------------------------- */ body.ko-hero .ko-hero__slide--offer .ko-hero__cta { box-sizing: border-box; position: relative; min-height: 48px; padding: 0 18px 0 20px; gap: 10px; margin-top: var(--ko-space-2); border-radius: var(--ko-radius-md); background: var(--ko-hero-button, var(--ko-color-surface-raised)); color: var(--ko-hero-on-button, var(--ko-color-text-primary)); font-size: 1rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; transition: background-color calc(var(--ko-hero-hover-dur, 500ms) * .6) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } body.ko-hero .ko-hero__slide--offer .ko-hero__cta-arrow { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--ko-hero-hover-dur, 500ms) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } /* Hover from the button and from anywhere on the card; pressed (:active) = the hover colour, so a tap gets feedback. */ body.ko-hero .ko-hero__slide--offer .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--offer .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-surface-subtle)); } body.ko-hero .ko-hero__slide--offer .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: translateX(3px); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-surface-subtle)); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: translateX(3px); } } body.ko-hero .ko-hero__slide--offer a.ko-hero__cta:focus-visible { outline: 2px solid var(--ko-color-focus-ring) !important; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ko-color-text-inverse); } /* --- the sticker (the shell's chip, restyled) — the akcija sticker's smaller sibling; the same construction (see the akcija block). */ /* One registered value drives the whole fold (r2.2): 0 at rest, 1 on hover. Registered so it interpolates; without @property support it switches in one step, and the fold stays whole either way. The same rule is in the akcija and the Ponudba block (identical; either can stand alone). */ @property --ko-hero-peel { syntax: ""; inherits: true; initial-value: 0; } body.ko-hero .ko-hero__slide--offer .ko-hero__chip { --ko-rez-rim: 3px; /* The disc; the fold line x + y = 100 % + fold (in the chip's own box): 60 % at rest, 49 % when the card is hovered; the tilt with it. */ --ko-rez-disc: clamp(84px, 65px + 4.6vw, 112px); --ko-rez-fold: calc(60% - 11% * var(--ko-hero-peel)); --ko-rez-tilt: calc(-6deg - 2deg * var(--ko-hero-peel)); /* 84px at 14px from the corner up to 414; on tablets the disc ramps to the desktop floor (112px, 24px inset) at 1023 — the number with it. */ top: clamp(14px, 2.3vw, 24px); right: clamp(14px, 2.3vw, 24px); width: var(--ko-rez-disc); height: var(--ko-rez-disc); min-width: 0; min-height: 0; padding: 0 0 2px; border-radius: 0; background: none; box-shadow: none; color: var(--ko-hero-on-label, var(--ko-color-text-inverse)); /* px on purpose — see the akcija block: the sticker keeps its size at 200 % text; its value is in the card link's accessible name. */ /* The number is a quarter of the disc on both stickers, at every width (r2.2: "the same size relative to the sticker"). */ font-size: calc(var(--ko-rez-disc) * .25); font-weight: var(--ko-font-weight-display); letter-spacing: var(--ko-letter-spacing-tight); line-height: 1; white-space: nowrap; filter: drop-shadow(0 calc(6px + 3px * var(--ko-hero-peel)) calc(14px + 6px * var(--ko-hero-peel)) rgb(0 0 0 / calc(.30 + .04 * var(--ko-hero-peel)))); transform: rotate(var(--ko-rez-tilt)); transition: --ko-hero-peel var(--ko-hero-hover-dur, 500ms) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); /* r2.8: its own layer, so each frame of the peel repaints the sticker alone, not the photograph under it. */ will-change: transform; } body.ko-hero .ko-hero__slide--offer .ko-hero__chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; /* The face one step darker than the sale red (operator 2026-09-24): white reaches 5.42:1 on #CE2222, so the small "do" below passes the 4.5 bar (#E92727 gave 4.39). A typed label colour still wins (D3). */ /* Over the red: the flap's contact shadow, a ring just outside the flap's arc (the reflected disc: centre 50 % + fold, radius 50 %), wider and darker as the corner lifts. The face is clipped to the face side of the fold line, 1px short of it so the red's edge sits under the flap (no pink seam along the fold). */ background: radial-gradient(ellipse calc(55% + 5% * var(--ko-hero-peel)) calc(55% + 5% * var(--ko-hero-peel)) at calc(50% + var(--ko-rez-fold)) calc(50% + var(--ko-rez-fold)), rgb(20 20 20 / 0) calc(100% * 50 / (55 + 5 * var(--ko-hero-peel))), rgb(20 20 20 / calc(.26 + .14 * var(--ko-hero-peel))) calc(100% * 50 / (55 + 5 * var(--ko-hero-peel))), rgb(20 20 20 / 0) 100%), var(--ko-hero-label, var(--ko-color-action-primary-hover)); box-shadow: inset 0 0 0 var(--ko-rez-rim) var(--ko-color-text-inverse); clip-path: polygon(0 0, 100% 0, 100% calc(var(--ko-rez-fold) - 1px), calc(var(--ko-rez-fold) - 1px) 100%, 0 100%); } body.ko-hero .ko-hero__slide--offer .ko-hero__chip::after { content: ""; position: absolute; /* The removed corner mirrored across the fold line: the disc reflected there sits at (fold, fold) in the chip's box, and only its part on the face side of the line is kept — exactly the corner, folded over. The paper back: a light edge along the fold, then the back of the paper, a shade deeper towards the lifted tip (the 315° gradient meets the fold at 50 % + fold / 2 of its length). r2.8: moved there with translate, not left / top — those land on whole pixels, so the fold stood still and jumped from frame to frame; translate moves it by fractions. The same length: the flap is the chip's size, so fold % of either is the same. */ left: 0; top: 0; translate: var(--ko-rez-fold) var(--ko-rez-fold); width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(315deg, var(--ko-color-surface-raised) calc(50% + var(--ko-rez-fold) / 2), color-mix(in srgb, var(--ko-color-border-strong) 80%, var(--ko-color-text-muted)) calc(52% + var(--ko-rez-fold) / 2), var(--ko-color-surface-subtle) 86%); clip-path: polygon(0 0, calc(100% - var(--ko-rez-fold)) 0, 0 calc(100% - var(--ko-rez-fold))); } /* "do" before the number (operator 2026-09-24; IR-037 prints the span). When the discounts in the set differ, the shell prints do directly before the value. The pair then sits on ONE line, centred across the disc. r2.4 (operator 2026-09-25): the same fixed proportions as the akcija sticker, no px — the number .208 of the disc, "do" .41 of the number, at every width: 17.5 / 7.2px on the 84px phone disc, 27 / 11px on the 130px disc at 1440; ≥ 5.6px inside the rim at every width. The shared baseline sits at 58 % of the disc (the fold's resting corner is at 60 %), which also centres the capitals (.908em = the baseline's depth in a 1.0 line of Plus Jakarta Sans: ascent 1.038, descent .222). A flat discount prints no span and keeps the number alone, as before. Without :has() the pair stays centred on the flex row at the number's usual size. */ body.ko-hero .ko-hero__slide--offer .ko-hero__chip:has(.ko-hero__chip-pre) { /* With "do" the number is .208 of the disc at every width, on both stickers (r2.4; alone it is .25). */ --ko-rez-num: calc(var(--ko-rez-disc) * .208); flex-wrap: wrap; /* one line; wrap only so align-content can place it */ align-content: flex-start; align-items: baseline; padding-top: calc(var(--ko-rez-disc) * .58 - var(--ko-rez-num) * .908); font-size: var(--ko-rez-num); } body.ko-hero .ko-hero__slide--offer .ko-hero__chip-pre { /* .41 of the number, no floor (r2.4: a fixed proportion only; white on #CE2222 is 5.42:1 at any size). The gap is .15 of the number. */ margin-right: .36em; font-size: .41em; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; } /* ===================================================================== DESKTOP >= 1024px — the mirrored cut ===================================================================== */ @media (min-width: 1024px) { body.ko-hero .ko-hero__slide--offer { --ko-rez-col-x: clamp(var(--ko-hero-safe, 96px), 8vw, 120px); --ko-rez-col-w: clamp(300px, 29vw, 420px); /* The panel follows the column (column + 32px at the cut's foot), but its foot never falls short of the golden line — 38.2 % of the width (operator 2026-09-24). From about 1500px up the column alone would stop short (29.8 % at 1920), so the panel widens there; below that the foot is already 15–37px past the line and nothing changes. */ --ko-rez-panel-w: max(calc((var(--ko-rez-col-x) + var(--ko-rez-col-w) + 32px) / .86), calc(38.2% / .86)); --ko-rez-sticker: clamp(112px, 9vw, 132px); } /* The shell's second scrim darkens the LEFT of every desktop slide — this card's photo side, which carries no text. Off for this slot. */ body.ko-hero .ko-hero__slide--offer::after { background: none; } /* The text stands on the panel; the operator's bottom gradient darkens the terrace floor — the tiles the card sells. Desktop keeps only a foot band for the dots; the phone keeps the operator's gradient. */ body.ko-hero .ko-hero__slide--offer::before { background: linear-gradient(180deg, rgba(20,20,20,0) 64%, rgba(20,20,20,.72) 100%); } body.ko-hero .ko-hero__slide--offer .ko-hero__body { justify-content: center; align-items: flex-end; max-width: none; padding-left: max(var(--ko-hero-pad), var(--ko-hero-safe, 96px)); padding-right: var(--ko-rez-col-x); } /* The cut panel, anchored right: its edge at 0 % of its width at the top and 14 % at the bottom. */ body.ko-hero .ko-hero__slide--offer .ko-hero__panel--right { display: block; position: absolute; right: 0; top: 0; width: var(--ko-rez-panel-w); height: 100%; z-index: 0; pointer-events: none; } /* r2.1 #6, T-1a (operator 2026-09-24) — Ponudba's own surface: the warm light (--ko-color-surface-subtle, the Znamka Soft field) instead of the brand red, so slide 2 answers slide 1 in the same cut but in the quiet tone: the akcija keeps the only red panel in the loop. Ink text on it: 14.2:1 (was white on red, 4.20:1). "Barva prekrivala" still wins. */ body.ko-hero .ko-hero__slide--offer .ko-hero__panel-fill { fill: var(--ko-hero-overlay, var(--ko-color-surface-subtle)); } /* The golden line (operator 2026-09-24): a bottom margin of 9 % of the slide height lifts the centred block 4.5 %, so the title's first baseline sits on the upper golden line (38.2 % of the height) with the live two-line title. The block stays in the flow. */ body.ko-hero .ko-hero__slide--offer .ko-hero__intro { position: relative; z-index: 1; width: var(--ko-rez-col-w); margin-bottom: calc(var(--ko-hero-h) * .09); gap: 14px; } /* Desktop: the ink tag (white text on ink, 15.5:1) on the red panel. */ body.ko-hero .ko-hero__slide--offer .ko-hero__badge { padding: 7px 11px; background: var(--ko-hero-label, var(--ko-color-surface-inverse)); color: var(--ko-hero-on-label, var(--ko-color-text-inverse)); font-size: .9375rem; } body.ko-hero .ko-hero__slide--offer .ko-hero__title { font-size: clamp(2.625rem, 4vw, 3.75rem); line-height: 1.04; color: var(--ko-hero-on-overlay, var(--ko-color-text-primary)); text-shadow: none; } /* 20px bold ink on the light panel: 14.2:1. */ body.ko-hero .ko-hero__slide--offer .ko-hero__meta { max-width: 100%; margin-top: -2px; color: var(--ko-hero-on-overlay, var(--ko-color-text-primary)); font-size: 1.25rem; font-weight: var(--ko-font-weight-bold); line-height: 1.3; text-shadow: none; } body.ko-hero .ko-hero__slide--offer .ko-hero__cta { min-height: 52px; padding: 0 20px 0 22px; margin-top: var(--ko-space-3); background: var(--ko-hero-button, var(--ko-color-action-secondary)); color: var(--ko-hero-on-button, var(--ko-color-text-inverse)); font-size: 1rem; } body.ko-hero .ko-hero__slide--offer .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--offer .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-action-secondary-hover)); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-action-secondary-hover)); } } /* The sticker on the cut, at 30 % of the height (edge at 4.2 % of the panel's width from its left side). */ body.ko-hero .ko-hero__slide--offer .ko-hero__chip { --ko-rez-rim: 3px; top: 30%; left: auto; right: calc(var(--ko-rez-panel-w) * .958); --ko-rez-disc: var(--ko-rez-sticker); padding-bottom: 3px; filter: drop-shadow(0 calc(10px + 4px * var(--ko-hero-peel)) calc(24px + 8px * var(--ko-hero-peel)) rgb(0 0 0 / calc(.34 + .04 * var(--ko-hero-peel)))); transform: translate(50%, -50%) rotate(var(--ko-rez-tilt)); } /* D2 positions, mirrored (desktop only — on a phone the sticker keeps the top right corner, the one corner free of text and controls): the two right-hand positions keep to the cut (the top of the edge, and the foot of it); the left-hand ones are the photo's corners. Every position clears the title, the button, the arrows, the dots and the toggle at 1024–1920 (measured, spec §12). */ body.ko-hero .ko-hero__slide--offer .ko-hero__chip--tr { top: 24px; right: calc(var(--ko-rez-panel-w) * .972); transform: translateX(50%) rotate(var(--ko-rez-tilt)); } /* Bottom right: at the foot of the cut, on the photo side of it (the column's button sits just inside the panel there, so a sticker centred on the line would cover it). */ body.ko-hero .ko-hero__slide--offer .ko-hero__chip--br { top: auto; bottom: 48px; right: calc(var(--ko-rez-panel-w) * .88); transform: rotate(var(--ko-rez-tilt)); } body.ko-hero .ko-hero__slide--offer .ko-hero__chip--tl { top: 24px; right: auto; left: 24px; transform: rotate(var(--ko-rez-tilt)); } body.ko-hero .ko-hero__slide--offer .ko-hero__chip--bl { top: auto; bottom: 44px; right: auto; left: 24px; transform: rotate(var(--ko-rez-tilt)); } } /* ===================================================================== HOVER — the peel (proposal H-2, r2.2; r2.3): the one value --ko-hero-peel goes 0 → 1 while the card is hovered (the fold 60 % → 49 %, the flap over the tip of the "%", the tilt −6° → −8°, the shadows deeper). --ko-hero-hover-dur and -ease; off under reduced motion (the sticker stays as it is). ===================================================================== */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(> .ko-hero__link:hover) .ko-hero__chip, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(.ko-hero__cta:hover) .ko-hero__chip { --ko-hero-peel: 1; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__chip { --ko-hero-peel: 1; } } @media (prefers-reduced-motion: reduce) { body.ko-hero .ko-hero__slide--offer .ko-hero__cta, body.ko-hero .ko-hero__slide--offer .ko-hero__cta-arrow { transition: none; } body.ko-hero .ko-hero__slide--offer .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: none; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: none; } } /* The sticker stays as it is: no fold, no tilt. */ body.ko-hero .ko-hero__slide--offer .ko-hero__chip { transition: none; } body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(> .ko-hero__link:hover) .ko-hero__chip, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer:has(.ko-hero__cta:hover) .ko-hero__chip { --ko-hero-peel: 0; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--offer.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__chip { --ko-hero-peel: 0; } } } /* ===================================================================== Kategorija — body styles (design v8 = r3.1, 2026-09-28; r2 LOCKED 2026-09-23) Block file: hero-cards-category-v8.css — replaces the Kategorija block of wp-content/themes/spletnik-child/assets/css/woo/hero-cards.css Markup: template-parts/hero-card-body-category.php (same brief folder, unchanged) Spec: briefs/design-category-v8/design-category-card-v8-spec.md (revises briefs/design-category-v6/design-category-card-v6-spec.md; v7, r2.9, was never installed) r2.2 (operator 2026-09-25): every hover here runs on the card-level duration --ko-hero-hover-dur (500ms) and ease --ko-hero-hover-ease (an ease-out quad; the shell defines both, IR-038) — movement at the full duration, colour at .6 of it — instead of the site-wide 220ms and the standard curve, which other buttons keep. The standard curve does 96 % of a move in the first half, so a longer duration alone still looks quick; the softer ease spreads the move across the half second. r2.6 (operator 2026-09-25, infrastructure's design-r2.6 request): the CASCADE, the same motion as the O nas benefit cards ("exact copy paste"). The pointer anywhere on the card — the photo, the button or a sample — sends the samples out: each grows by --ko-hero-cascade-grow (1.06) and moves --ko-hero-cascade-shift (8px) to the LEFT, --ko-hero-cascade-step (.4) of the hover duration apart (0 / 200 / 400 ms), back in reverse; the middle sample grows from its centre and pushes the outer two by its own growth, on its own clock, so both gaps stay constant in every frame; a floating shadow while out, and the sample under the pointer one shadow step more (r2.2's 2px lift is gone). The gaps are O nas' (20px from 1280, 16px below), no longer a unit; the rows are equal (the tallest sample's height). r2.8 (operator 2026-09-26, infrastructure's design-r2.8 request): the card's hover HOLDS while the pointer is anywhere on the hero — the photo, the button, the samples, the arrows, the dots and the toggle — and ends once, when the pointer leaves the hero. Every hover rule below is followed by an @media (hover: hover) twin with the same declarations. Its trigger: the pointer on section.ko-hero, the slide active, and none of the rule's own hover conditions on (its :has(…:hover) triggers, and the button's own :hover where the rule lists it) — :where(section.ko-hero:hover) … .ko-hero__slide.ko-hero__slide--active:where(:not(:has(…))…). The :where() parts weigh nothing and the two classes weigh exactly the :has(…:hover) they replace, so the twin stands in for the whole-card link's hover at the same place in the cascade and never competes with the originals (the button's own hover and a sample's own pointer step still answer to themselves). Pointer devices only: on a touch screen a tapped arrow or dot would keep the hover and fold every slide it brings. Keyboard focus on a control does not start it (a focused arrow is not the card). On a sample the button now keeps its tint and nudge too (G9 keyed them to the whole-card link only). r2.1 (operator 2026-09-24; spec §0 has the full list): the sample stack is a grid item in the flow (it grows the slide at 200 % text instead of clipping), a missing term image shows a quiet "blank sample" instead of the red grid, card hover lights the button, the pressed state, the button family, the tablet ramp, tile min-height, long words wrap, the stack ends on the set's right-hand line. r2 (operator lock 2026-09-23): direction B "Fuga" + a RED button on both breakpoints. What it answers, against v1 r3 (polish 2026-09-22): · E8 / L2 the name is set one size larger than the walls' titles (56px at 1024 → 72px from 1920; was 35.2 → 49.6) and starts a tile and a half in from the left — max(96px, 1.5 tiles, 10vw) = 120 / 144 / 144 / 192px at 1024 / 1280 / 1440 / 1920 — so the text moves toward the centre on wide screens; · E5 / L1 that rule is the column rule: fluid, never under the prev arrow (≥ 24px clear at 1024), settled from 1440; · E6 / L3 the subcategories are tile samples — a one-module square of the term's image (or the blank-sample mark) with the name beside it on a white tile, 3.5 modules wide — stacked from the RIGHT edge at --ko-rez-col-x = clamp(96px, 8vw, 120px) = 96 / 102 / 115 / 120px, the set's right-hand line (r2.1; was max(--ko-col, 8vw) = 96 / 112 / 115 / 154); centred vertically; the module is a min-height, so a three-line name grows its tile instead of being clipped (r2.1). The stack is IN THE FLOW (r2.1, finding #2): the body is a two-column grid — the intro left, the stack right, both centred — so at 200 % text the stack grows the slide (the shell's in-flow rule, IR-026 part 4, desktop too) instead of spilling past its edges; same pixels at 100 %. At larger text the stack also widens with the text (tile + 12.5rem, capped by its column: 3.5 modules at 100 %), so fewer names break mid-word; · mark a subcategory with no term image shows a BLANK SAMPLE (r2.1, finding #4): nine light tiles (--ko-color-surface- subtle) with joints in --ko-color-border-strong, edge to edge — a tile with nothing on it yet, 1.3:1 against its own joints, far below the 15.5:1 name beside it. r2's brand-red glyph on the warm light was the most saturated mark on the slide (critique #4); · E7 / L4 one unit (16px at 1280+, 13.3 at 1024; was 12px) between the samples; each lifts 2px (a joint's width) and deepens its shadow on hover — the samples are links, so the motion is functional; off under reduced motion; · button RED on both breakpoints (operator 2026-09-23): fill var(--ko-hero-button, --ko-color-brand-primary-hover) = #C93434, white 16px 700 text 5.22:1 (the live #E04141 / #E92727 would be 4.20 / 4.39 and fail at 16px; #C93434 is the red the operator approved for the O nas phone buttons); hover / active --ko-color-brand-primary-active #B03332 (6.24:1), also on a hover anywhere on the card (r2.1); 52px desktop / 48px phone, the set's 4px corners and 22px / 20px padding (r2.1; was 3px / 24px / 22px), the 1px inner keyline on desktop, the set's drawn 16px arrow (nudges 3px on hover; off under reduced motion). A colour typed in wp-admin (--ko-hero-button / --ko-hero-on-button) wins on BOTH breakpoints and keeps its colour on hover; · label sentence case, 19.2px 700 with a 14px swatch tile before it (12px on phones), painted by var(--ko-hero-label, white); the label text stays white on the photo. The module: --ko-tile = slide height / 6 (80px at 1024, 96px from 1280), --ko-unit = a sixth of a tile. Everything on the card snaps to it. Phone (< 1024px): no samples (operator, 2026-09-14; again 2026-09-28: "they would take up too much space"), the label with its swatch, the set's one phone title size (33.5px at 390, TC-02), the row's subtitle under it (r3.1) and the red button bottom-left on the shell's scrim, deepened behind the text (r3.1); the body is in the flow (IR-026 part 4). Colour properties (D3 / D4): the button reads --ko-hero-button / --ko-hero-on-button, the swatch --ko-hero-label. Not consumed: --ko-hero-overlay / -on-overlay (no panel — the title and label are the shell's white on the photo, measured per row) and --ko-hero-on-label (the label text is not on the label colour). Contrast reference for the resolver: a typed button colour on this card must clear 4.5:1 against WHITE 16px text (the button's text), not against ink — the default button is red with white text. The samples' text is ink on white (15.5:1) and takes no typed colour. r2.9 (operator 2026-09-26, after the /impeccable critique): the arrival gate (IR-046) — every card-level hover trigger below also waits while the section carries ko-hero--auto-arrived, so a slide the timer brought in under a resting pointer stays at rest until the pointer moves (the shell's script sets and clears the class; without it the rules are r2.8's). The button's own hover is not gated. r3.1 (operator 2026-09-28): "not enough information … there could be an additional subtitle below the Category title". The subtitle is the row's Podnaslov field (`meta`), which the template has always printed under the title (p.ko-hero__meta; empty = nothing shown): 16px 700 on the phone, 30ch, balanced; 20px 700 on desktop (the base and desktop rules below). On the row's gradient alone the phone subtitle measured 3.1:1 in its worst 5 % of pixels (under 4.5:1), so below 1024px the scrim deepens behind the text: a radial ink gradient from the bottom-left corner over the row's own gradient — then, on all five rows at 320–1023px, the subtitle 9.98:1 or more, the label 4.26:1 or more, the title 5.66:1 or more. r2.9's ink cut on phones (v7, never installed) is withdrawn. Scope: every rule hangs off .ko-hero__slide--category; tokens from ko-tokens.css and the shell's per-slide properties only. ===================================================================== */ body.ko-hero .ko-hero__slide--category { --ko-tile: calc(var(--ko-hero-h) / 6); --ko-unit: calc(var(--ko-tile) / 6); --ko-rez-col-x: clamp(var(--ko-hero-safe, 96px), 8vw, 120px); } body.ko-hero .ko-hero__slide--category .ko-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } /* Phone: the set's one title size (TC-02; 33.5px at 390) — the category's larger step is a desktop answer (E8); on a phone the short names are already the biggest text on the card. */ body.ko-hero .ko-hero__slide--category .ko-hero__title { /* 30.4px at 320, 33.5 at 390, 35.2 at 414; from 414 the ceiling ramps 35.2 → 56px at 1023 (= the desktop floor at 1024). */ font-size: clamp(1.9rem, 8.6vw, 1.316rem + 3.415vw); line-height: 1.04; text-wrap: balance; overflow-wrap: anywhere; /* 200 % text: a word never leaves the column */ } /* The label: swatch tile + sentence case. It carries either the operator's label or "Najbolj obiskano", never both. */ body.ko-hero .ko-hero__slide--category .ko-hero__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0; background: none; border-radius: 0; color: var(--ko-color-text-inverse); font-size: 1.2rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; line-height: 1.2; text-transform: none; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.5); } body.ko-hero .ko-hero__slide--category .ko-hero__swatch { display: block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 2px; background: var(--ko-hero-label, var(--ko-color-text-inverse)); box-shadow: 0 1px 4px rgba(0,0,0,.25); } body.ko-hero .ko-hero__slide--category .ko-hero__meta { font-size: 1rem; font-weight: var(--ko-font-weight-bold); line-height: 1.3; } /* The button, both breakpoints: #C93434 (brand-primary-hover) with white 16px text, 5.22:1; hover / active #B03332 (6.24:1). The set's button geometry (r2.1): 48px on the phone with 0 18px 0 20px, 4px corners, --ko-space-2 above it. A real , so :hover works; the drawn arrow nudges 3px. A typed colour wins (--ko-hero-button / --ko-hero-on-button first) and keeps its colour on hover — the arrow still moves. */ body.ko-hero .ko-hero__slide--category .ko-hero__cta { box-sizing: border-box; min-height: 48px; padding: 0 18px 0 20px; gap: 10px; margin-top: var(--ko-space-2); background: var(--ko-hero-button, var(--ko-color-brand-primary-hover)); color: var(--ko-hero-on-button, var(--ko-color-text-inverse)); font-size: 1rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; border-radius: var(--ko-radius-md); transition: background-color calc(var(--ko-hero-hover-dur, 500ms) * .6) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } /* The button also answers a hover anywhere on the card (the whole-card link under the pointer, via :has) — the same rule as the akcija, offer and Znamka buttons, which go to the same place as their card. */ body.ko-hero .ko-hero__slide--category .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--category .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-brand-primary-active)); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-color-brand-primary-active)); } } body.ko-hero .ko-hero__slide--category .ko-hero__cta-arrow { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--ko-hero-hover-dur, 500ms) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } body.ko-hero .ko-hero__slide--category .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: translateX(3px); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: translateX(3px); } } /* The samples are desktop-only (operator, 2026-09-14). */ body.ko-hero .ko-hero__slide--category .ko-hero__subs { display: none; } /* Focus rings (D7): ink outline with a white ring outside (the shell's pair). The !important is the contract's sanctioned kind. */ body.ko-hero .ko-hero__slide--category .ko-hero__sub-link:focus-visible, body.ko-hero .ko-hero__slide--category a.ko-hero__cta:focus-visible { outline: 2px solid var(--ko-color-focus-ring) !important; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ko-color-text-inverse); } /* ===================================================================== PHONE AND TABLET < 1024px — r3.1: the subtitle and its scrim ===================================================================== */ @media (max-width: 1023.98px) { /* The scrim deepens behind the text: a radial ink gradient from the bottom-left corner (.82 at the corner, .68 halfway, clear at 88 %), drawn over the row's own gradient (--ko-hero-grad, the operator's "Gradient" setting, still drawn beneath). The right and the top of the photograph keep the row's gradient alone. */ body.ko-hero .ko-hero__slide--category::before { background: radial-gradient(160% 118% at 0% 100%, rgba(20,20,20,.82) 0%, rgba(20,20,20,.68) 50%, rgba(20,20,20,0) 88%), var(--ko-hero-grad); } /* The subtitle on the phone: 30ch, balanced, so a two-line subtitle breaks evenly (no one-word last line). */ body.ko-hero .ko-hero__slide--category .ko-hero__meta { max-width: 30ch; text-wrap: balance; } } /* ===================================================================== DESKTOP >= 1024px — the sample stack ===================================================================== */ @media (min-width: 1024px) { /* E8 / E5: the title starts a tile and a half in (144px at 1280–1440, 120px at 1024 — never under the prev arrow) and keeps moving toward the centre on wide screens (10vw: 192px at 1920, 284px at 2844); the stack ends on the set's right-hand line, --ko-rez-col-x = clamp(96px, 8vw, 120px) = 96 / 102 / 115 / 120px at 1024 / 1280 / 1440 / 1920 — the same edge as the offer column, the Znamka column and the O nas stack (E6, r2.1). r2.1 (finding #2): a two-column GRID instead of the shell's flex column — six modules for the intro, the rest for the stack, both centred on the slide (align-items). The stack is a grid item, so its height counts: at 200 % text the body, the slide and the carousel grow with it (the shell's in-flow rule), nothing is cut. At 100 % the boxes are where the absolute stack was (right edge on --ko-rez-col-x, centred). No row gap: the two items share one row. */ body.ko-hero .ko-hero__slide--category .ko-hero__body { display: grid; grid-template-columns: minmax(0, calc(var(--ko-tile) * 6)) minmax(calc(var(--ko-tile) * 3.5), 1fr); align-items: center; gap: 0 var(--ko-unit); justify-content: center; max-width: none; padding-left: max(var(--ko-hero-safe, 96px), calc(var(--ko-tile) * 1.5), 10vw); padding-right: var(--ko-rez-col-x); } /* Six modules of column: a two-word name wraps to two big lines. */ body.ko-hero .ko-hero__slide--category .ko-hero__intro { grid-column: 1; justify-self: start; gap: var(--ko-unit); max-width: calc(var(--ko-tile) * 6); } /* One size above the walls' titles: 56px at 1024, 69px at 1440, 72 cap. */ body.ko-hero .ko-hero__slide--category .ko-hero__title { font-size: clamp(3.5rem, 1.6rem + 3vw, 4.5rem); line-height: 1.04; } body.ko-hero .ko-hero__slide--category .ko-hero__badge { gap: 12px; font-size: 1.2rem; } body.ko-hero .ko-hero__slide--category .ko-hero__swatch { width: 14px; height: 14px; } body.ko-hero .ko-hero__slide--category .ko-hero__meta { font-size: 1.25rem; line-height: 1.35; } /* Desktop button: 52px, the set's 22px padding, --ko-space-3 above it (label → title → button = 16 / 28px at 1440) and the 1px inner keyline; fill, text and hover are the base rule's. */ body.ko-hero .ko-hero__slide--category .ko-hero__cta { min-height: 52px; padding: 0 20px 0 22px; margin-top: var(--ko-space-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } /* The stack: 3.5 modules wide, from the right edge on the set's right-hand line (--ko-rez-col-x), centred on the slide; r2.6: 20px between samples (16px at 1024–1279, below), the O nas stack's gaps, in a one-column grid of equal rows (the push of the cascade is a share of each sample's own height, so the rows must match; at 100 % text every sample is one module tall anyway). r2.1: the second grid column, in the flow (was absolute, top 50 % / translateY(-50 %)). Its width follows the text where the text is larger than the module: max(3.5 modules, one module + 12.5rem) = 3.5 modules at 100 % text (280 / 336px), one module + 400px at 200 %, never wider than its column (min(100%, …)), so a long name gets room before it has to break mid-word. */ body.ko-hero .ko-hero__slide--category .ko-hero__subs { display: grid; grid-auto-rows: 1fr; gap: 20px; grid-column: 2; justify-self: end; align-self: center; position: relative; z-index: 1; width: min(100%, max(calc(var(--ko-tile) * 3.5), calc(var(--ko-tile) + 12.5rem))); list-style: none; margin: 0; padding: 0; } /* r2.6: a grid of one, so the tile fills its (equal) row. */ body.ko-hero .ko-hero__slide--category .ko-hero__sub { display: grid; margin: 0; } /* One sample: a white tile one module tall — the module is a MINIMUM, so a three-line name (200 % text, or a name over ~36 characters) grows the tile instead of being clipped; the whole tile is the link (336 × 96px at 1440, far past 44px). */ body.ko-hero .ko-hero__slide--category .ko-hero__sub-link { box-sizing: border-box; display: flex; align-items: stretch; min-height: var(--ko-tile); background: var(--ko-color-surface-raised); border-radius: var(--ko-radius-sm); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 36px rgba(0,0,0,.10); text-decoration: none; /* r2.6, the cascade (rules below) — the O nas benefit cards' clocks: the growth, the push, the move and the shadow on their own; the push on the MIDDLE sample's delay (one step, both ways), the rest on the sample's own, k steps (its place from the top on enter, from the bottom on leave). The pointer's own shadow step (filter) is at once and short, so it follows the pointer from sample to sample. */ --ko-cascade-k: var(--ko-cascade-l, 0); transform-origin: right center; transition-property: scale, translate, transform, box-shadow, filter; transition-duration: var(--ko-hero-hover-dur, 500ms), var(--ko-hero-hover-dur, 500ms), var(--ko-hero-hover-dur, 500ms), var(--ko-hero-hover-dur, 500ms), calc(var(--ko-hero-hover-dur, 500ms) * .6); transition-timing-function: var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); transition-delay: calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4) * var(--ko-cascade-k, 0)), calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4)), calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4) * var(--ko-cascade-k, 0)), calc(var(--ko-hero-hover-dur, 500ms) * var(--ko-hero-cascade-step, .4) * var(--ko-cascade-k, 0)), 0s; } /* Hover (E7), r2.6 the CASCADE — the same rules as the O nas benefit cards. The card is hovered: the whole-card link (the photo, and the gaps between the samples, which are click-transparent), the button, or any sample — so moving from the photo onto a sample keeps the stack out. The places, for the clocks (on the list items): */ body.ko-hero .ko-hero__slide--category .ko-hero__sub { --ko-cascade-e: 0; --ko-cascade-l: 0; } body.ko-hero .ko-hero__slide--category .ko-hero__sub:nth-child(2) { --ko-cascade-e: 1; } body.ko-hero .ko-hero__slide--category .ko-hero__sub:nth-child(3) { --ko-cascade-e: 2; } body.ko-hero .ko-hero__slide--category .ko-hero__sub:nth-last-child(2) { --ko-cascade-l: 1; } body.ko-hero .ko-hero__slide--category .ko-hero__sub:nth-last-child(3) { --ko-cascade-l: 2; } /* The stack grows outward from the middle sample: the top one upward, the bottom one downward (a lone sample from its centre). */ body.ko-hero .ko-hero__slide--category .ko-hero__sub:first-child:not(:only-child) .ko-hero__sub-link { transform-origin: right bottom; } body.ko-hero .ko-hero__slide--category .ko-hero__sub:last-child:not(:only-child) .ko-hero__sub-link { transform-origin: right top; } /* Out: the growth, the move (inside the scale, so the right edges end exactly the shift to the left), the floating shadow. */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__cta:hover) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__sub-link:hover) .ko-hero__sub-link { --ko-cascade-k: var(--ko-cascade-e, 0); scale: var(--ko-hero-cascade-grow, 1.06); transform: translateX(calc(var(--ko-hero-cascade-shift, 8px) / var(--ko-hero-cascade-grow, 1.06) * -1)); box-shadow: 0 4px 10px rgba(0,0,0,.14), 0 28px 60px rgba(0,0,0,.28); } /* A focused sample keeps its white ring (D7) over the float. */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__sub-link:focus-visible, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__cta:hover) .ko-hero__sub-link:focus-visible, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__sub-link:hover) .ko-hero__sub-link:focus-visible { box-shadow: 0 0 0 6px var(--ko-color-text-inverse), 0 4px 10px rgba(0,0,0,.14), 0 28px 60px rgba(0,0,0,.28); } /* The push (three samples): the outer two move by the middle sample's half growth — 50 % × (grow − 1) of their own height, equal rows — on the middle sample's clock. 0 when the growth is 1 (the wp-admin switch). */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__cta:hover) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__sub-link:hover) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link { translate: 0 calc(-50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__cta:hover) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__sub-link:hover) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link { translate: 0 calc(50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover)):not(:has(.ko-hero__sub-link:hover))) .ko-hero__sub-link { --ko-cascade-k: var(--ko-cascade-e, 0); scale: var(--ko-hero-cascade-grow, 1.06); transform: translateX(calc(var(--ko-hero-cascade-shift, 8px) / var(--ko-hero-cascade-grow, 1.06) * -1)); box-shadow: 0 4px 10px rgba(0,0,0,.14), 0 28px 60px rgba(0,0,0,.28); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover)):not(:has(.ko-hero__sub-link:hover))) .ko-hero__sub-link:focus-visible { box-shadow: 0 0 0 6px var(--ko-color-text-inverse), 0 4px 10px rgba(0,0,0,.14), 0 28px 60px rgba(0,0,0,.28); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover)):not(:has(.ko-hero__sub-link:hover))) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link { translate: 0 calc(-50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover)):not(:has(.ko-hero__sub-link:hover))) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link { translate: 0 calc(50% * (var(--ko-hero-cascade-grow, 1.06) - 1)); } } /* The sample under the pointer (and pressed): one more shadow step, so the visitor sees which sample the click goes to. It stays in line with the others (r2.2's 2px lift is gone). A filter, not the box shadow: the float keeps its cascade clock while this one follows the pointer at once. */ body.ko-hero .ko-hero__slide--category .ko-hero__sub-link:hover, body.ko-hero .ko-hero__slide--category .ko-hero__sub-link:active { filter: drop-shadow(0 0 6px rgba(0,0,0,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.85)); } /* The sample square: the term image filling one module, or the blank sample. It follows the tile's height when the tile grows (the image covers, the mark covers too — preserveAspectRatio slice). */ body.ko-hero .ko-hero__slide--category .ko-hero__sub-thumb { flex: 0 0 var(--ko-tile); width: var(--ko-tile); min-height: var(--ko-tile); display: block; overflow: hidden; background: var(--ko-color-surface-subtle); } /* No term image (r2.1, finding #4): a BLANK SAMPLE, not an icon — nine tiles in the warm light (currentColor) on a ground of joints (--ko-color-border-strong #D9D9D9), edge to edge. 1.3:1 tile against joint, 1.4:1 joint against the white name tile: a placeholder that reads as "a tile with nothing on it yet", quieter than the name (15.5:1) and far quieter than r2's brand-red glyph (3.8:1 on the warm light — the most saturated mark on the slide, critique #4). Decorative (aria-hidden in the markup). */ body.ko-hero .ko-hero__slide--category .ko-hero__sub-thumb--mark { background: var(--ko-color-border-strong); color: var(--ko-color-surface-subtle); } body.ko-hero .ko-hero__slide--category .ko-hero__sub-thumb svg { display: block; width: 100%; height: 100%; } body.ko-hero .ko-hero__slide--category .ko-hero__sub-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* A thumbnail printed without a src (the hold of IR-027 once it leaves lazy images src-less, IR-036) must not paint Chromium's empty- image border in the moment between arming and loading; the browser's own lazy loading gives it its src on desktop. No effect while every thumbnail carries a src. */ body.ko-hero .ko-hero__slide--category .ko-hero__sub-img:not([src]) { visibility: hidden; } body.ko-hero .ko-hero__slide--category .ko-hero__sub-label { min-width: 0; align-self: center; padding: 12px 20px; overflow-wrap: anywhere; font-size: 1.0625rem; font-weight: var(--ko-font-weight-display); line-height: 1.2; letter-spacing: var(--ko-letter-spacing-snug); color: var(--ko-color-text-primary); } } /* r2.6: the O nas stack's gaps on the narrower desktops (1024–1279px), where O nas sets its benefit rows 16px apart. */ @media (min-width: 1024px) and (max-width: 1279.98px) { body.ko-hero .ko-hero__slide--category .ko-hero__subs { gap: 16px; } } /* Forced colours: the blank sample keeps its own two tones — Canvas tiles on GrayText joints — instead of nine CanvasText (black) squares, which would be the loudest thing on the slide again. Decorative, so no contrast bar applies. */ @media (forced-colors: active) { body.ko-hero .ko-hero__slide--category .ko-hero__sub-thumb--mark { forced-color-adjust: none; background: GrayText; color: Canvas; } } @media (prefers-reduced-motion: reduce) { body.ko-hero .ko-hero__slide--category .ko-hero__sub-link, body.ko-hero .ko-hero__slide--category .ko-hero__cta, body.ko-hero .ko-hero__slide--category .ko-hero__cta-arrow { transition: none; } body.ko-hero .ko-hero__slide--category .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__cta-arrow { transform: none; } /* r2.6: the cascade neither grows nor moves (the shell's tokens do the same; this keeps the block standing alone). The floating shadow and the pointer's shadow step still show, without a transition. */ body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__cta:hover) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__sub-link:hover) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__cta:hover) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__sub-link:hover) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(> .ko-hero__link:hover) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__cta:hover) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--category:has(.ko-hero__sub-link:hover) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link { scale: none; translate: none; transform: none; } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta-arrow { transform: none; } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover)):not(:has(.ko-hero__sub-link:hover))) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover)):not(:has(.ko-hero__sub-link:hover))) .ko-hero__sub:first-child:nth-last-child(3) .ko-hero__sub-link, body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--category.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover)):not(:has(.ko-hero__sub-link:hover))) .ko-hero__sub:nth-child(3):last-child .ko-hero__sub-link { scale: none; translate: none; transform: none; } } } /* ===================================================================== Znamka — body styles (design v8 = r2.9, 2026-09-26: the hover waits for the pointer on a slide the timer brought in; r2.8 2026-09-26: the hover holds on the whole hero; r2.5 2026-09-25: the Nežno fade slider; r2.2 2026-09-25: slower hovers; r2.1 2026-09-24; r2 2026-09-23. r2.1: the text side by measured contrast with a rescue and a ramp direction, the flat field behind @supports, the title's 200 % floor) Block file: hero-cards-brand-v8.css — replaces the Znamka block in wp-content/themes/spletnik-child/assets/css/woo/hero-cards.css. Markup: template-parts/hero-card-body-brand.php (unchanged) Spec: briefs/design-brand-v8/design-brand-card-v8-spec.md (revises briefs/design-brand-v7/design-brand-card-v7-spec.md) r2.2 (operator 2026-09-25): every hover here runs on the card-level duration --ko-hero-hover-dur (500ms) and ease --ko-hero-hover-ease (an ease-out quad; the shell defines both, IR-038) — movement at the full duration, colour at .6 of it — instead of the site-wide 220ms and the standard curve, which other buttons keep. The standard curve does 96 % of a move in the first half, so a longer duration alone still looks quick; the softer ease spreads the move across the half second. r2.8 (operator 2026-09-26, infrastructure's design-r2.8 request): the card's hover HOLDS while the pointer is anywhere on the hero — the photo, the button, the arrows, the dots and the toggle — and ends once, when the pointer leaves the hero. Every hover rule below is followed by an @media (hover: hover) twin with the same declarations. Its trigger: the pointer on section.ko-hero, the slide active, and none of the rule's own hover conditions on (its :has(…:hover) triggers, and the button's own :hover where the rule lists it) — :where(section.ko-hero:hover) … .ko-hero__slide.ko-hero__slide--active:where(:not(:has(…))…). The :where() parts weigh nothing and the two classes weigh exactly the :has(…:hover) they replace, so the twin stands in for the whole-card link's hover at the same place in the cascade and never competes with the originals (the button's own hover still answers to itself). Pointer devices only: on a touch screen a tapped arrow or dot would keep the hover and fold every slide it brings. Keyboard focus on a control does not start it (a focused arrow is not the card). r2.9 (operator 2026-09-26, after the /impeccable critique): the arrival gate (IR-046) — every card-level hover trigger below also waits while the section carries ko-hero--auto-arrived, so a slide the timer brought in under a resting pointer stays at rest until the pointer moves (the shell's script sets and clears the class; without it the rules are r2.8's). The button's own hover is not gated. The phone and the photograph are unchanged (the Znamka imagery is not part of r2.9); the dots now sit on the ink tile at every width (IR-046, the shell). No overlay (E9, operator 2026-09-22): no panel, silhouette, glow or gradient on the photograph. DESKTOP (≥ 1024px): the photograph WHOLE, beside the text, on a field. The headquarters photo (3:2) stands at full slide height, uncropped where the width allows, in the left ~60 % of the slide; the text stands beside it with its left edge on the vertical golden line. The field carries the brand's colour in one of two styles — ONE wp-admin switch for all rows (operator 2026-09-23: "Strong+black/white logos // Soft+colored logos", "1 switch"), the template's body class: .ko-hero__body--strong (DEFAULT) the field is the brand colour, flat under the photo zone and deepening by 18 % black towards the right edge; text ink or white by MEASURED contrast (template, r2.1: the side that reads better on the colour; the field shifts 12 % when neither reaches 4.5:1, --field-shift; the ramp goes toward white when the deepening would take ink under 4.5:1, --field-light); the logo knocked out to the same ink (#242424) or white; the button the field's inverse; .ko-hero__body--soft the field is the warm light #F7F4F4 washing to a 28 % tint of the brand colour at the right edge; where the wash is half-way is the wp-admin slider "Prehod barve (vse znamke)", shown for Nežno only (r2.5, IR-041); ink text; the logo in its own colours; ink button; .ko-hero__body--plain (no valid brand colour) the plain light field, ink text, own-colour logo, ink button — in both styles. The field is painted on the slide (only the shell's --ko-hero-brand-color reaches it), so the Soft rules select the slide through `:has(> .ko-hero__body--soft)` — the shell itself relies on :has(); a browser without it shows Strong, the default. The ramps, the rescue and the Soft tint need color-mix() and sit behind @supports; without it the field is the flat colour (r2.1 — a declaration whose var() expands to an unsupported color-mix() is dropped, it does not fall back). Geometry (all fluid, no breakpoint of the card's own): --ko-znamka-col-x the mirrored E5 margin from the right edge, clamp(96px, 8vw, 120px) — ≥ 24px clear of the next arrow (20 + 52 + 24 = 96); --ko-znamka-text-x the text column's LEFT edge: the vertical golden line, 61.8 % of the slide width — but never so far right that the column falls under 320px (that moves it in only at 1024–1089px); --ko-znamka-gap between the photo zone and the column, clamp(20px, 1.8vw, 36px); --ko-znamka-photo-w the photo ZONE: from the left edge to text-x − gap (≈ 60 % of the width); --ko-znamka-photo-box the photo's box: the zone, or the photo's natural width at full height (1.5 × --ko-hero-h), whichever is smaller — centred in the zone. At ≥ 1440px the photo is whole (864 × 576) with the field showing either side (144px each at 1920); below 1440 the zone is narrower than the photo and object-fit: cover crops it around the row's focal point (89 % of its width shown at 1280, 79 % at 1024). The block (logo → title → line → button) is an in-flow flex child of the body (the column = the body's padding), centred vertically — its centre at 48.5 % of the height, the optical centre with the heavy button at the foot — and left-aligned on the golden line. Type: title clamp(2.5rem, 3.75vw, 3.5rem) 800 — 40 · 48 · 54 · 56px at 1024 · 1280 · 1440 · 1920 (was 49.6), −0.03em, line-height 1.04, balanced, capped at 9em so the titles break into two even lines, and never above the column / 8 (r2.1: the Ecoceramic title held three lines at 1070–1150); line clamp(1.125rem, 1.4vw, 1.25rem) = 18–20px 700 (r2.1; was 600); the set's button: 52px, 16px 700, sentence case, drawn arrow (--ko-hero-button / --ko-hero-on-button first), hover and pressed (:active) one colour. Logo without a plate, normalised by a box of clamp(50px, 4vw, 68px) tall and clamp(150px, 11.5vw, 184px) wide; under forced colours (Windows High Contrast) every logo is the phone's white mark with a dark halo, and the button and tag keep a box (r2.1). PHONE (< 1024px): direction A's composition — text bottom-left on the photo over the operator's scrim ("Od spodaj,močneje"), the logo knocked out to white — with the text set to read harder (operator: "A+make the text stand out more"): title clamp(1.9rem, 8.6vw, …) (the set's one phone size, 33.5px at 390 — TC-02; ramping on tablets to the desktop floor 40px at 1023 — r2.1), a tight edge shadow plus the wide halo, line 16 → 18px 700, button 16px, logo with the same two-part shadow, and a second, taller bottom gradient layered over the shell's scrim. No overlay (locked); nothing drawn by the card on the photo. Identical in both styles. Shell elements restyled through the slot modifier (styling only): img.ko-hero__media (desktop: box and position — the image's `sizes` hint should follow, see the spec), the slide's ::before and ::after scrims (desktop: off; phone: ::before layered), .ko-hero__body padding. ===================================================================== */ body.ko-hero .ko-hero__slide--brand .ko-hero__intro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; } /* PHONE ONLY: the shell's scrim (the operator's "Gradient" choice) is kept and a second, taller bottom gradient of the card's own is layered over it, so the middle band — where the two title lines sit on a 328px slide — gets darker than "Od spodaj,močneje" alone gives (title p5 3.8–5.6 before, ≥ 4.95 after, spec §5). The top fifth of the photo is untouched. */ @media (max-width: 1023.98px) { body.ko-hero .ko-hero__slide--brand::before { background: linear-gradient(180deg, rgba(20,20,20,0) 20%, rgba(20,20,20,.22) 42%, rgba(20,20,20,.36) 100%), var(--ko-hero-grad); } } /* The logo on the phone: no plate, knocked out to white (every logo in the pool is dark), a tight shadow for the edge and a wide one for the halo. */ body.ko-hero .ko-hero__slide--brand .ko-hero__logo { width: auto; height: auto; max-width: 168px; max-height: 42px; margin-bottom: 2px; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 2px 10px rgba(0,0,0,.5)); } /* The label (rare on this card): a white tag in sentence case. */ body.ko-hero .ko-hero__slide--brand .ko-hero__badge { padding: 6px 10px; border-radius: var(--ko-radius-md); background: var(--ko-hero-label, var(--ko-color-surface-raised)); color: var(--ko-hero-on-label, var(--ko-color-text-primary)); font-size: .875rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; } body.ko-hero .ko-hero__slide--brand .ko-hero__title { max-width: min(100%, 9em); /* The set's one phone title size (TC-02): 30.4px at 320, 33.5 at 390, 35.2 at 414; from 414 the ceiling ramps 35.2 → 40px at 1023 (= the desktop floor at 1024). The 1.9rem floor is capped at the column / 6 (r2.1) so that under text-only zoom a 6em word still holds one line: at 200 % on a 360px phone the title is 54.5px and "Porcelanasti" (5.75em) stays whole instead of breaking as "Porcelanas / ti" at 60.8px. Identical at 100 % (the column / 6 is 48–59px there, above the 30.4px floor). */ font-size: clamp(min(1.9rem, calc((100vw - 2 * var(--ko-hero-pad)) / 6)), 8.6vw, 1.996rem + .788vw); line-height: 1.04; text-wrap: balance; overflow-wrap: anywhere; /* 200 % text: a word never leaves the column */ text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 22px rgba(0,0,0,.62); } /* Origin · meta. One line of fact (the stock line is removed, 2026-09-24). */ body.ko-hero .ko-hero__slide--brand .ko-hero__meta { color: var(--ko-color-text-inverse); font-size: clamp(1rem, .916rem + .326vw, 1.125rem); /* 16px to 410, 18px at 1023 (= desktop) */ font-weight: var(--ko-font-weight-bold); line-height: 1.35; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 1px 14px rgba(0,0,0,.6); } /* The phone button in the brand's colour (direction A): --ko-brand-fill is the template's validated brand colour (moved 12 % toward black or white only when neither ink nor white reached 4.5:1 on it), --ko-brand-on the side it measured; white with ink text without a colour. */ body.ko-hero .ko-hero__slide--brand .ko-hero__cta { box-sizing: border-box; position: relative; min-height: 48px; padding: 0 18px 0 20px; gap: 10px; margin-top: var(--ko-space-2); border-radius: var(--ko-radius-md); background: var(--ko-hero-button, var(--ko-brand-fill, var(--ko-color-surface-raised))); color: var(--ko-hero-on-button, var(--ko-brand-on, var(--ko-color-text-primary))); font-size: 1rem; font-weight: var(--ko-font-weight-bold); letter-spacing: 0; text-transform: none; line-height: 1.2; transition: background-color calc(var(--ko-hero-hover-dur, 500ms) * .6) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } body.ko-hero .ko-hero__slide--brand .ko-hero__cta-arrow { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--ko-hero-hover-dur, 500ms) var(--ko-hero-hover-ease, cubic-bezier(.25, .46, .45, .94)); } /* Hover from the button itself and from anywhere on the card (the whole-card link, via :has); pressed (:active) = the hover colour, so a tap gets feedback: 14 % toward black like the set's other buttons, or toward white when black would take the text under 4.5:1 (template). A typed button colour keeps its colour. */ body.ko-hero .ko-hero__slide--brand .ko-hero__cta:hover, body.ko-hero .ko-hero__slide--brand .ko-hero__cta:active, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand:has(> .ko-hero__link:hover) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-brand-hover, var(--ko-color-surface-subtle))); } body.ko-hero .ko-hero__slide--brand .ko-hero__cta:hover .ko-hero__cta-arrow, body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand:has(> .ko-hero__link:hover) .ko-hero__cta .ko-hero__cta-arrow { transform: translateX(3px); } @media (hover: hover) { body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta { background: var(--ko-hero-button, var(--ko-brand-hover, var(--ko-color-surface-subtle))); } body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand.ko-hero__slide.ko-hero__slide--active:where(:not(:has(> .ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta .ko-hero__cta-arrow { transform: translateX(3px); } } /* Focus ring (D7): ink with white either side — it never depends on the brand colour. The !important is the contract's sanctioned kind. */ body.ko-hero .ko-hero__slide--brand a.ko-hero__cta:focus-visible { outline: 2px solid var(--ko-color-focus-ring) !important; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ko-color-text-inverse); } /* ===================================================================== DESKTOP >= 1024px — the whole photograph beside the text, on the field ===================================================================== */ /* r2.5 (operator 2026-09-25): where the Nežno wash is half-way, in % of the text side (from the photo zone's edge to the slide's right edge). The shell prints it on the slide from the wp-admin slider "Prehod barve (vse znamke)", 10–90 (IR-041); 50 is v4's linear wash. Registered as a number, so a printed value that is not one falls back to 50 instead of dropping the Soft background. Strong does not read it. */ @property --ko-hero-brand-fade { syntax: ""; inherits: false; initial-value: 50; } @media (min-width: 1024px) { body.ko-hero .ko-hero__slide--brand { --ko-znamka-col-x: clamp(var(--ko-hero-safe, 96px), 8vw, 120px); --ko-znamka-text-x: min(61.8%, calc(100% - var(--ko-znamka-col-x) - 320px)); --ko-znamka-gap: clamp(20px, 1.8vw, 36px); --ko-znamka-photo-w: calc(var(--ko-znamka-text-x) - var(--ko-znamka-gap)); --ko-znamka-photo-box: min(var(--ko-znamka-photo-w), calc(var(--ko-hero-h) * 1.5)); /* The field's colour: a typed overlay colour first, else the brand's colour; without either the warm light. */ --ko-znamka-field: var(--ko-hero-overlay, var(--ko-hero-brand-color, var(--ko-color-surface-subtle))); /* The flat colour under the photo zone and at the column's left edge — the field colour, or (r2.1, .ko-hero__body--field-shift) the field moved 12 % toward the text's opposite pole when neither ink nor white reached 4.5:1 on it. */ --ko-znamka-flat: var(--ko-znamka-field); /* The flat field. In a browser without color-mix() (Chrome ≤ 110, Safari ≤ 16.1, Firefox ≤ 112) this is the whole Strong field: the ramps and the rescue are behind @supports below, because a declaration whose var() substitution yields an unsupported color-mix() is dropped at computed-value time and does NOT fall back to an earlier declaration of the same rule (r2 relied on that and left the slide with no field at all there — measured, r2.1). */ background: var(--ko-znamka-flat); } /* SOFT without color-mix(): the warm light, flat. */ body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--soft) { background: var(--ko-color-surface-subtle); } @supports (color: color-mix(in srgb, red 50%, blue)) { /* STRONG (default): the colour flat under the photo zone, then deepening 18 % toward black to the far right edge — the ramp only adds contrast under white text, and under ink text the template has checked the far stop (else --field-light below). */ body.ko-hero .ko-hero__slide--brand { background: linear-gradient(90deg, var(--ko-znamka-flat) var(--ko-znamka-photo-w), color-mix(in srgb, var(--ko-znamka-flat) 82%, #000) 100%); } /* r2.1: the rescue (template, class on the body). White text: the whole field 12 % toward black; ink text: 12 % toward white. Only colours on which neither side reached 4.5:1 (luminance ≈ .18–.26, e.g. #787878, #E92727) get it — none of today's pool. Black and white here are the mixing poles of color-mix(), not surface tokens. */ body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--on-white.ko-hero__body--field-shift) { --ko-znamka-flat: color-mix(in srgb, var(--ko-znamka-field) 88%, #000); } body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--on-ink.ko-hero__body--field-shift) { --ko-znamka-flat: color-mix(in srgb, var(--ko-znamka-field) 88%, #fff); } /* r2.1: ink text whose 18 % deepening would fall under 4.5:1 at the far stop (#009FE3 3.62, #D9822B 3.71): the ramp goes 18 % toward white instead, so the text's contrast grows across the column (6.28 / 6.49 at the stop). Today's pool keeps the deepening. */ body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--field-light) { background: linear-gradient(90deg, var(--ko-znamka-flat) var(--ko-znamka-photo-w), color-mix(in srgb, var(--ko-znamka-flat) 82%, #fff) 100%); } /* SOFT: the warm light under the photo zone, then the tint rising to the far right edge. Ink text on it is ≥ 6.9:1 for any brand colour (a 28 % tint of black on #F7F4F4 is the darkest case) — wherever the wash is half-way, as no point is darker than the tint. r2.5: the middle stop is a colour hint, the half-way point, at --ko-hero-brand-fade % of the text side (clamped to 10–90 here too). 50 is the middle of v4's linear wash, the same pixels; lower brings the tint in sooner, behind the text; higher keeps it at the right edge. */ body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--soft) { background: linear-gradient(90deg, var(--ko-color-surface-subtle) var(--ko-znamka-photo-w), calc(var(--ko-znamka-photo-w) + (100% - var(--ko-znamka-photo-w)) * clamp(10, var(--ko-hero-brand-fade, 50), 90) / 100), color-mix(in srgb, var(--ko-znamka-field) 28%, var(--ko-color-surface-subtle)) 100%); } } /* No valid brand colour: the plain light field, either style. */ body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--plain) { background: var(--ko-hero-overlay, var(--ko-color-surface-subtle)); } /* The photograph: its own box inside the zone, centred, full height; cover crops it around the row's focal point only when the zone is narrower than the photo (below 1440px). */ body.ko-hero .ko-hero__slide--brand .ko-hero__media { left: calc((var(--ko-znamka-photo-w) - var(--ko-znamka-photo-box)) / 2); right: auto; width: var(--ko-znamka-photo-box); } /* No scrim on the desktop: neither the operator's bottom gradient (it would darken the field too) nor the shell's left scrim. The photo is shown as it is. */ body.ko-hero .ko-hero__slide--brand::before, body.ko-hero .ko-hero__slide--brand::after { content: none; } /* The column is the body's own padding: left edge on the golden line, right edge at the mirrored margin; the shell's flex column centres the block vertically. The block stays IN THE FLOW (no absolute position, no transform), so the card also grows with 200 % text if the phone's in-flow slide rule ever goes to desktop (IR-026 part 4). */ body.ko-hero .ko-hero__slide--brand .ko-hero__body { max-width: none; padding: 0 var(--ko-znamka-col-x) 0 var(--ko-znamka-text-x); } /* The block: full column width; a bottom margin of 14.6 % of the slide height lifts it so the title's first baseline sits on the upper golden line, 38.2 % of the height (operator 2026-09-24; was 3 %, the block's centre at 48.5 %). The text column already starts on the vertical golden line. */ body.ko-hero .ko-hero__slide--brand .ko-hero__intro { width: 100%; margin-bottom: calc(var(--ko-hero-h) * .146); gap: 12px; } /* The logo: one box for five marks. Strong: knocked out to the text colour (the template's switch; own colours without a brand colour). Soft: its own colours. */ body.ko-hero .ko-hero__slide--brand .ko-hero__logo { max-width: clamp(150px, 11.5vw, 184px); max-height: clamp(50px, 4vw, 68px); margin-bottom: 10px; filter: var(--ko-znamka-logo-filter, none); } body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--soft) .ko-hero__logo { filter: none; } /* The label: the button's colours (the field's inverse). */ body.ko-hero .ko-hero__slide--brand .ko-hero__badge { padding: 7px 11px; font-size: .9375rem; background: var(--ko-hero-label, var(--ko-znamka-btn, var(--ko-color-surface-inverse))); color: var(--ko-hero-on-label, var(--ko-znamka-on-btn, var(--ko-color-text-inverse))); } body.ko-hero .ko-hero__slide--brand:has(> .ko-hero__body--soft) .ko-hero__badge { background: var(--ko-hero-label, var(--ko-color-surface-inverse)); color: var(--ko-hero-on-label, var(--ko-color-text-inverse)); } body.ko-hero .ko-hero__slide--brand .ko-hero__title { max-width: min(100%, 9em); color: var(--ko-hero-on-overlay, var(--ko-znamka-on, var(--ko-color-text-primary))); /* The size never exceeds the column / 8 — the ratio at 1024 (320px / 40px), where every pool title holds two lines. Between 1061 and 1170px the vw size outgrows the column (38.2vw − col-x) and the widest half-line, "Porcelanasti gres", broke into three lines; the cap bites there by at most 0.75px and nowhere else. The 2rem floor inside it keeps the title growing under text-only zoom — but never past the column / 6 (r2.1), the size at which a 6em word still holds one line: at 200 % text in the 320px column of 1024 the title is 53.3px and "Porcelanasti" (5.75em) stays whole instead of breaking as "Porcelana / sti" at 64px. Identical at 100 % text (the floor is then 2rem,under the column / 8). */ --ko-znamka-col:max(38.2vw - var(--ko-znamka-col-x), 320px);font-size:min(clamp(2.5rem, 3.75vw, 3.5rem), max(min(2rem, calc(var(--ko-znamka-col) / 6)), calc(var(--ko-znamka-col) / 8)));line-height:1.04;text-shadow:none}body.ko-hero .ko-hero__slide--brand .ko-hero__meta{max-width:100%;color:var(--ko-hero-on-overlay,var(--ko-znamka-on,var(--ko-color-text-primary)));font-size:clamp(1.125rem, 1.4vw, 1.25rem);font-weight:var(--ko-font-weight-bold);line-height:1.3;text-shadow:none}body.ko-hero .ko-hero__slide--brand:has(>.ko-hero__body--soft) .ko-hero__title,body.ko-hero .ko-hero__slide--brand:has(>.ko-hero__body--soft) .ko-hero__meta{color:var(--ko-color-text-primary)}body.ko-hero .ko-hero__slide--brand .ko-hero__cta{min-height:52px;padding:0 20px 0 22px;margin-top:var(--ko-space-3);background:var(--ko-hero-button,var(--ko-znamka-btn,var(--ko-color-action-secondary)));color:var(--ko-hero-on-button,var(--ko-znamka-on-btn,var(--ko-color-text-inverse)));font-size:1rem}body.ko-hero .ko-hero__slide--brand .ko-hero__cta:hover,body.ko-hero .ko-hero__slide--brand .ko-hero__cta:active,body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand:has(>.ko-hero__link:hover) .ko-hero__cta{background:var(--ko-hero-button,var(--ko-znamka-btn-hover,var(--ko-color-action-secondary-hover)))}@media (hover:hover){body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand.ko-hero__slide.ko-hero__slide--active:where(:not(:has(>.ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta{background:var(--ko-hero-button,var(--ko-znamka-btn-hover,var(--ko-color-action-secondary-hover)))}}body.ko-hero .ko-hero__slide--brand:has(>.ko-hero__body--soft) .ko-hero__cta{background:var(--ko-hero-button,var(--ko-color-action-secondary));color:var(--ko-hero-on-button,var(--ko-color-text-inverse))}body.ko-hero .ko-hero__slide--brand:has(>.ko-hero__body--soft) .ko-hero__cta:hover,body.ko-hero .ko-hero__slide--brand:has(>.ko-hero__body--soft) .ko-hero__cta:active,body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand:has(>.ko-hero__body--soft):has(>.ko-hero__link:hover) .ko-hero__cta{background:var(--ko-hero-button,var(--ko-color-action-secondary-hover))}@media (hover:hover){body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand:has(>.ko-hero__body--soft).ko-hero__slide.ko-hero__slide--active:where(:not(:has(>.ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta{background:var(--ko-hero-button,var(--ko-color-action-secondary-hover))}}}@media (forced-colors:active) and (min-width:1024px){body.ko-hero .ko-hero__slide--brand .ko-hero__logo,body.ko-hero .ko-hero__slide--brand:has(>.ko-hero__body--soft) .ko-hero__logo{filter:brightness(0) invert(1) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1.5px #000)}}@media (forced-colors:active){body.ko-hero .ko-hero__slide--brand .ko-hero__cta,body.ko-hero .ko-hero__slide--brand .ko-hero__badge{outline:1px solid #fff0;outline-offset:-1px}}@media (prefers-reduced-motion:reduce){body.ko-hero .ko-hero__slide--brand .ko-hero__cta,body.ko-hero .ko-hero__slide--brand .ko-hero__cta-arrow{transition:none}body.ko-hero .ko-hero__slide--brand .ko-hero__cta:hover .ko-hero__cta-arrow,body.ko-hero :where(section.ko-hero:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand:has(>.ko-hero__link:hover) .ko-hero__cta .ko-hero__cta-arrow{transform:none}@media (hover:hover){body.ko-hero :where(section.ko-hero:hover:not(.ko-hero--auto-arrived)) .ko-hero__slide--brand.ko-hero__slide.ko-hero__slide--active:where(:not(:has(>.ko-hero__link:hover)):not(:has(.ko-hero__cta:hover))) .ko-hero__cta .ko-hero__cta-arrow{transform:none}}}