/* * av adapter — ONLY what Elementor has no property for. * * Layout, spacing, colour, type, breakpoints, hover/active/focus states all * live in Elementor: global classes, element styles and widget settings. * Everything left here targets a class or an element Elementor cannot reach, * and each block says why. Before adding a rule, check whether it can be a * class property instead (2026-09-30 migration: ~/ajda-audit/phase2/). */ /* ------------------------------------------------------------ 1. Layout -- */ /* Sticky header. The sticky element must be the Theme Builder LOCATION * WRAPPER (
), which is exactly as tall as * the header inside it, so a sticky child has no room to move — and the * wrapper is not an element Elementor lets you style. */ [data-elementor-type="header"] { position: sticky; top: 0; z-index: 100; } /* --------------------------------------------------- 1b. Header menu CTA -- * "Pridruži se" is a MENU item for the opened phone/tablet menu, where it is a * pill (as live); on the full desktop menu the header button does that job. * The Nav Menu widget renders one menu for both states and has no per-item * styling, so this is class-targeted CSS. */ [data-elementor-type="header"] .elementor-nav-menu--main .av-nav-cta { display: none; } /* The opened panel's own padding (live: 16 / page gutter / 24) — the widget only pads items. */ [data-elementor-type="header"] nav.elementor-nav-menu--dropdown { padding: 1rem var(--av-gutter) 1.5rem; } [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.av-nav-cta { margin: 1rem 0 0; } [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.av-nav-cta a.elementor-item { justify-content: center; min-height: 44px; padding: 0.55em 1.3em; border: 2px solid transparent; border-radius: 999px; background-color: var(--av-accent); color: var(--av-on-accent); font-size: 15.04px; font-weight: 700; line-height: 1.2; } [data-elementor-type="header"] .elementor-nav-menu--dropdown .elementor-nav-menu li.av-nav-cta a.elementor-item:hover { background-color: var(--av-ink); color: var(--av-on-accent); } /* The menu button: live's 48px bordered square with a thin three-line glyph * (the Nav Menu widget has no size/padding/border-colour control for it). * The open state keeps Elementor's ×. */ [data-elementor-type="header"] .elementor-menu-toggle { width: 48px; height: 48px; padding: 0; justify-content: center; border: 1px solid var(--av-line); } [data-elementor-type="header"] .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--open { display: none; } [data-elementor-type="header"] .elementor-menu-toggle:not(.elementor-active)::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; } /* ------------------------------------------------------- 2. Typography -- */ /* Balanced heading wrap: `text-wrap` is not in Elementor's style schema. */ .elementor h1, .elementor h2, .elementor h3, .elementor h4 { text-wrap: balance; } /* The hero headline's script line ("že od 1991") is a INSIDE the h1 * (one heading for screen readers and search), and heading text is rich text: * the span can carry no class, so only a descendant selector reaches it. */ .elementor .av-hero h1 span { display: block; font-family: "Caveat", "Segoe Script", cursive; font-weight: 700; font-size: 1.32em; line-height: 0.95; letter-spacing: 0; color: var(--av-accent-light); } /* ------------------------------------------------------- 3. Decoration -- */ /* The torn paper edge under the header and above the facts panel. Drawn on * pseudo-elements (no element, no class, no pointer events over the content * beneath), as a mask so the colour stays the --av-bg token. */ :root { --av-deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='16' viewBox='0 0 900 16' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0 0H900 V10 L7.4 9.9 L21.8 12.5 L35.6 11.3 L48.5 10.3 L61.5 9.1 L67.8 11.5 L75.7 12.2 L89.9 14.9 L97.1 15.2 L105.6 13.1 L121.2 15.1 L136.8 12.8 L150.1 11.2 L159.7 14.0 L168.3 13.2 L180.5 14.7 L189.6 15.2 L201.4 14.7 L211.3 15.2 L222.7 15.2 L235.0 15.2 L241.1 11.2 L248.1 13.1 L259.0 15.2 L265.4 15.2 L279.3 13.9 L290.6 14.3 L300.9 15.2 L316.2 15.2 L327.3 15.2 L340.4 12.7 L350.8 15.2 L359.1 12.8 L374.7 12.3 L383.9 15.2 L392.7 15.2 L402.0 12.6 L408.7 12.7 L422.5 15.0 L432.6 15.2 L443.8 14.8 L456.0 15.2 L463.9 15.2 L473.4 15.2 L486.7 13.2 L494.0 12.8 L507.0 14.5 L516.1 15.2 L527.8 14.8 L535.1 14.8 L548.7 14.1 L556.6 15.2 L564.2 13.9 L575.7 15.1 L582.8 15.0 L592.3 14.2 L604.0 13.4 L618.4 15.0 L633.2 9.9 L640.7 10.2 L656.4 10.4 L672.3 12.7 L682.7 14.8 L693.0 13.8 L702.0 12.2 L712.0 11.4 L726.3 15.2 L738.4 15.0 L746.1 12.2 L752.2 11.1 L766.9 8.5 L775.9 8.6 L789.5 9.6 L797.5 9.0 L809.4 10.7 L824.7 10.7 L840.7 12.9 L848.7 13.2 L859.0 12.3 L871.6 11.5 L878.6 12.1 L890.4 9.7 L897.1 8.5 L900 10.0 L0 10 Z'/%3E%3C/svg%3E"); } [data-elementor-type="header"]::after, .av-facts__panel::before { content: ""; position: absolute; left: 0; right: 0; height: 16px; background-color: var(--av-bg); -webkit-mask-image: var(--av-deckle); mask-image: var(--av-deckle); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 900px 16px; mask-size: 900px 16px; pointer-events: none; } [data-elementor-type="header"]::after { top: 100%; } /* `top: auto`: Elementor gives `.e-con::before` (its overlay layer) top: 0. */ .av-facts__panel::before { top: auto; bottom: 100%; transform: scaleY(-1); } /* The breadcrumb chevron, drawn BETWEEN crumbs (so the last has none) — a * pseudo-element; a real separator element would have to be copied into every * crumb on every page. `position: relative` overrides Elementor's absolute * `.e-con::before`. */ .elementor .av-crumbs__item + .av-crumbs__item::before { content: ""; position: relative; width: 5px; height: 5px; flex: 0 0 auto; align-self: center; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.65; } /* ------------------------------------------------------- 4. Rich text -- */ /* Links and lists typed INTO a paragraph or text editor carry no class * (the editor strips them), so they are reached by descendant selectors. */ /* Body links: accent + underline. Every classed component link opts out — * Elementor's own (`e-…`, `elementor-…`) and ours (`av-…`); :where() keeps the * exclusions at zero specificity so component rules still win. */ .elementor a:not(:where(.av-btn, [class*="av-"], [class*="elementor-"], [class^="e-"], [class*=" e-"])) { color: var(--av-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .elementor a:not(:where(.av-btn, [class*="av-"], [class*="elementor-"], [class^="e-"], [class*=" e-"])):hover { color: var(--av-ink); } /* …except on the dark footer, where they are white and undecorated. */ .elementor .av-footer a { color: var(--av-on-accent); text-decoration: none; } .elementor .av-footer a:hover { color: var(--av-accent-light); } /* Lists: the design's indent and rhythm; the reset zeroes list padding so * Elementor's own (classed) lists stay flush. */ .elementor ul:not(:where([class])), .elementor ol:not(:where([class])) { padding-inline-start: 1.2em; } .elementor :is(ul, ol):not(:where([class])):not(:last-child) { margin-block-end: 16px; } .elementor .av-article li::marker { color: var(--av-accent-tint); } /* Long e-mail addresses break inside the narrow cards (`overflow-wrap` is not * in the style schema). */ .elementor .av-aside-card a, .elementor .av-contact-block a { overflow-wrap: anywhere; } /* ------------------------------------------- 4b. Sibling rhythm & rich text -- * "Every child except the first gets 1rem" is an adjacent-sibling rule, and * block-flow margin COLLAPSING between components is what the design's spacing * relies on — neither has an Elementor property (a flex gap adds instead of * collapsing, verified against live 2026-09-30: every article drifted 8-24px). * Plus the few inline bits typed into rich text (bold price, tel/mail lines, * links inside headings). Restored verbatim from the pre-migration file. */ /* 6. The article column's vertical rhythm. * `.prose > * + *` is an adjacent-sibling combinator: it spaces every child * except the first, and there is no prop for "except the first". Doing it * with per-element margin classes instead would give the first child a top * margin that collapses out of the column and pushes the whole grid down. * * The exclusion list is the load-bearing part. This rule has to BEAT the * elements' own base classes (`.elementor .e-heading-base { margin: 0 }`, * 0-2-0) and LOSE to the components that carry a margin of their own. Both * are 0-2-0, so specificity cannot separate them — dropping the `.elementor` * prefix to score 0-1-0 lost to e-heading-base instead and cost the legal * pages ~800px of heading air. `:not(:where(…))` adds nothing to the score, * so the rule stays 0-2-0 and simply does not apply to the listed * components, which keep their margins as props. The source does the same * thing by declaring those classes later in the stylesheet. */ .elementor .av-article > * + *:not(:where( .av-post-when, .av-callout, .av-post-funders, .av-post-nav, .av-figure, .av-blockquote, .av-steps, .av-price-line )) { margin-block-start: 1rem; } .elementor .av-article > h2 { margin-block-start: clamp(3.5rem, 2rem + 6vw, 6rem); margin-block-end: 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--av-line); } .elementor .av-article > h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: none; } .elementor .av-article > h3 { margin-block-start: 2rem; margin-block-end: 0; } /* DESCENDANT, not child. Prose lists arrive inside a V3 text-editor widget, so * the