/* ============================================================ MAŠINA — nf design tokens (canonical) File: generatemasina/assets/css/tokens.css Namespace: --nf- (single dash, networkfailure) Source of truth for the design system. theme.json declares editor presets that resolve to these tokens via var(). Enqueue early (functions.php) and load into the editor with add_editor_style(). Palette: v4 "Boje 2" (2026-07-02) — 12 colors, light + dark. Simplified from 21. Merged tokens are kept as :root aliases so var() references resolve without migration. ------------------------------------------------------------ TABLE OF CONTENTS 1 @layer order 2 TOKENS @layer nf.tokens 2.1 Color — light (:root) 2.2 Color — dark (html.dark-mode) 2.3 Typography — families & weights 2.4 Typography — fluid scale 2.5 Spacing 2.6 Border width 2.7 Layout / grid 2.8 Radius 2.9 Shadows 3 BASE ELEMENTS unlayered — must beat GP/core 3.1 Misc 4 COMPONENTS unlayered 4.1 Theme toggle 4.2 Site logo 4.3 Header shell 4.4 Primary nav + utils 4.5 Header dropdown (D3.3) 4.6 Footer (D4) — GP Footer Block Element 4.7 SINGLE POST — Vesti (D5) 4.8 LIST MODULE — Najnovije (D5, sidebar column) 4.9 LIST MODULE — Srodni članci (related, main column) 4.10 SHARE PANEL — single post ([masina_share]) 4.11 Stav — author box (component) 4.12 Stav — sidebar placement (author box + Najnovije) 4.13 Video single — hero embed 4.14 Video — play overlay on thumbnails 4.15 Blog uživo — live single 4.16 Cards — category / tag / author archives + search 4.17 Author archive — profile block 4.18 Search results 4.18b Search No Results 4.29 Alignwide / alignfull containment — single article body 5 DARK MODE — component overrides unlayered 6 LINKS & content anchors unlayered ------------------------------------------------------------ CASCADE NOTE (why base/components are NOT layered): Layered styles always lose to unlayered ones, regardless of specificity. WordPress global-styles-inline-css and GP are unlayered. Only the token DECLARATIONS live in @layer nf.tokens (nothing competes on --nf-* names). Base/component rules stay unlayered so their :root-prefix specificity fixes still beat core. Full-file layer refactor is a separate gated pass. ============================================================ */ /* ============================================================ 1 @layer ORDER Reserved now; only nf.tokens is populated (Option 1). ============================================================ */ @layer nf.tokens, nf.base, nf.components, nf.overrides; /* ============================================================ 2 TOKENS — @layer nf.tokens ============================================================ */ @layer nf.tokens { /* ---------------------------------------------------------- 2.1 COLOR — light (:root). Flips in dark via html.dark-mode. ---------------------------------------------------------- */ :root { /* Surface */ --nf-surface-page: #fefdfa; /* page background */ --nf-surface-warm: #f0ebe1; /* warm sections, footer, inline CTA */ /* Merged in v4 — kept as aliases (pure-white removed; inputs → page/warm) */ --nf-surface-pure-white: var(--nf-surface-page); --nf-surface-input: var(--nf-surface-page); --nf-surface-input-warm: var(--nf-surface-warm); --nf-surface-placeholder: #c2c2c2; /* input placeholder text; non-flipping (designer) */ /* Text */ --nf-color-text-heading: #2d2a2a; /* headings AND excerpts/descriptions */ --nf-color-text-quote: #868686; /* quotes, author names, meta */ --nf-color-text-on-color: #fefdfa; /* text/icons on brand/accent fills — DOES NOT flip */ /* Merged in v4 — aliases resolve at use-time, flip with targets */ --nf-color-text-secondary: var(--nf-color-text-heading); --nf-color-text-caption: var(--nf-color-text-heading); --nf-color-text-inverse: var( --nf-color-text-quote ); /* deprecated; coltitle now uses quote directly */ --nf-color-text-primary: var(--nf-color-text-heading); --nf-color-text-muted: var(--nf-color-text-quote); /* Border — v4 collapses to one color; default darkens to match medium */ --nf-border-default: #c2c2c2; --nf-border-medium: var(--nf-border-default); /* Brand */ --nf-color-brand-primary: #f94538; --nf-color-brand-blue-soft: #4491b7; --nf-color-brand-blue-deep: #2426b4; --nf-color-brand-blue-accent: var( --nf-color-brand-blue-deep ); /* merged; alias only */ /* Accent — error / alert / notice */ --nf-accent-red-soft: #fef2f2; --nf-accent-red-border: #ffe2e2; --nf-accent-red-strong: #c10007; /* UI */ --nf-ui-control: var(--nf-color-text-quote); /* merged; alias only */ } /* ---------------------------------------------------------- 2.2 COLOR — dark (html.dark-mode, nf class switch). Only tokens that DIFFER from :root are redeclared. Non-flipping tokens (text-on-color) are intentionally absent. Blues do NOT flip in dark (designer, 2026-08); light values carry over. blue-deep is fill-only in dark — as text on surface-page it is 1.7:1. ---------------------------------------------------------- */ html.dark-mode { --nf-surface-page: #1a1a1a; --nf-surface-warm: #2e2e2e; --nf-color-text-heading: #f0ebe1; /* secondary/caption/primary aliases inherit */ --nf-color-text-quote: #d5d2d2; /* inverse/muted aliases inherit */ --nf-border-default: #727272; /* medium alias inherits */ --nf-color-brand-primary: #fa5c51; --nf-accent-red-strong: #f94538; --nf-accent-red-soft: #f0ebe1; --nf-accent-red-border: #c2c2c2; } /* ---------------------------------------------------------- 2.3 TYPOGRAPHY — families & weights Families self-hosted by GP Local Font Library; the fallback chain (source of truth) lives here, not in GP. ---------------------------------------------------------- */ :root { --nf-font-display: "Zilla Slab", "Zilla Fallback", Georgia, serif; --nf-font-ui: "Rethink Sans", "Rethink Fallback", system-ui, -apple-system, sans-serif; --nf-fw-regular: 400; --nf-fw-medium: 500; --nf-fw-semibold: 600; --nf-fw-bold: 700; } /* ============================================================ §2.4 FLUID TYPE SCALE — GENERATED from masina_sizes.csv Do NOT hand-edit the clamps. Edit the CSV, run `python3 fluid_type.py masina_sizes.csv`, paste the output over this block wholesale (see tools/design-tokens/README). Anchors 375→1134px, root 16px. Flat rows (min==max) emit a fixed rem. Everything below this comment is regenerable; §2.41 header geometry is NOT — keep it out of the paste span. ============================================================ */ :root { --nf-fs-display: clamp(2.5rem, 1.5119rem + 4.2161vw, 4.5rem); --nf-lh-display: 1.05; --nf-track-display: -0.025em; --nf-fs-h1-live: clamp(2.125rem, 1.5692rem + 2.3715vw, 3.25rem); --nf-lh-h1-live: 1.1; --nf-track-h1-live: -0.025em; --nf-fs-h1-article: clamp(1.75rem, 1.4721rem + 1.1858vw, 2.3125rem); --nf-lh-h1-article: 1.1892; --nf-track-h1-article: -0.0135em; --nf-fs-h2: clamp(1.625rem, 1.4397rem + 0.7905vw, 2rem); --nf-lh-h2: 1.2; --nf-track-h2: 0em; --nf-fs-stav-title: clamp(1.5625rem, 1.4081rem + 0.6588vw, 1.875rem); --nf-lh-stav-title: 1.2; --nf-track-stav-title: 0em; --nf-fs-h3: clamp(1.3125rem, 1.2199rem + 0.3953vw, 1.5rem); --nf-lh-h3: 1.3333; --nf-track-h3: 0em; --nf-fs-alt-card-title: clamp(1rem, 0.9074rem + 0.3953vw, 1.1875rem); --nf-lh-alt-card-title: 1.35; --nf-track-alt-card-title: 0em; --nf-fs-article-h2: clamp(1.0625rem, 1.0316rem + 0.1318vw, 1.125rem); --nf-lh-article-h2: 1.4444; --nf-track-article-h2: 0em; --nf-fs-h4: 1.0625rem; --nf-lh-h4: 1.3889; --nf-track-h4: 0em; --nf-fs-body-large: clamp(1.1875rem, 1.1257rem + 0.2635vw, 1.3125rem); --nf-lh-body-large: 1.409; --nf-track-body-large: 0em; --nf-fs-footer-link: clamp(1rem, 0.9691rem + 0.1318vw, 1.0625rem); --nf-lh-footer-link: 1.3235; --nf-track-footer-link: 0em; --nf-fs-footer-social: clamp(1rem, 0.9691rem + 0.1318vw, 1.0625rem); --nf-lh-footer-social: 1.5; --nf-track-footer-social: 0em; --nf-fs-body-base: clamp(0.875rem, 0.7824rem + 0.3953vw, 1.0625rem); --nf-lh-body-base: 1.4118; --nf-track-body-base: -0.01em; --nf-fs-caption: 0.875rem; --nf-lh-caption: 1.4286; --nf-track-caption: 0em; --nf-fs-quote: clamp(1.125rem, 1.0632rem + 0.2635vw, 1.25rem); --nf-lh-quote: 1.2; --nf-track-quote: 0em; --nf-fs-dropdown-link: clamp(1.125rem, 1.0632rem + 0.2635vw, 1.25rem); --nf-lh-dropdown-link: 1.4; --nf-track-dropdown-link: 0em; --nf-fs-section-name: clamp(1.125rem, 1.0632rem + 0.2635vw, 1.25rem); --nf-lh-section-name: 1.4; --nf-track-section-name: 0em; --nf-fs-nav: clamp(1.0625rem, 1.0316rem + 0.1318vw, 1.125rem); --nf-lh-nav: 1.3333; --nf-track-nav: 0em; --nf-fs-author: 1rem; --nf-lh-author: 1.27; --nf-track-author: 0em; --nf-fs-button: 1rem; --nf-lh-button: 1.0063; --nf-track-button: 0.0156em; --nf-fs-dates: 0.875rem; --nf-lh-dates: 1.3; --nf-track-dates: 0em; --nf-fs-label-base: 0.75rem; --nf-lh-label-base: 1.3333; --nf-track-label-base: 0.02em; --nf-fs-label-category: clamp(0.6875rem, 0.6566rem + 0.1318vw, 0.75rem); --nf-lh-label-category: normal; --nf-track-label-category: 0.02em; --nf-fs-tags: clamp(1rem, 0.9382rem + 0.2635vw, 1.125rem); --nf-lh-tags: 1.4444; --nf-track-tags: 0em; --nf-fs-excerpt: clamp(1.0625rem, 1.0007rem + 0.2635vw, 1.1875rem); --nf-lh-excerpt: 1.4118; --nf-track-excerpt: -0.01em; --nf-fs-card-title: 1.125rem; --nf-lh-card-title: 1.35; --nf-track-card-title: 0em; --nf-fs-card-title-sm: 1rem; --nf-lh-card-title-sm: 1.35; --nf-track-card-title-sm: -0.02em; --nf-fs-card-author: 0.75rem; --nf-lh-card-author: 1.375; --nf-track-card-author: 0.023em; --nf-fs-h1-article-large: clamp(1.75rem, 1.3794rem + 1.581vw, 2.5rem); --nf-lh-h1-article-large: 1.25; --nf-track-h1-article-large: -0.0135em; --nf-fs-lead: clamp(1.1875rem, 1.0022rem + 0.7905vw, 1.5625rem); --nf-lh-lead: 1.44; --nf-track-lead: 0em; --nf-fs-cta-title: clamp(1.25rem, 1.0647rem + 0.7905vw, 1.625rem); --nf-lh-cta-title: 1.26; --nf-track-cta-title: -0.01em; --nf-fs-cta-text: clamp(1.0625rem, 0.9699rem + 0.3953vw, 1.25rem); --nf-lh-cta-text: 1.4; --nf-track-cta-text: 0em; /* ============================================================ §2.41 HEADER GEOMETRY — NOT generated; hand-maintained. Kept out of §2.4's paste span so a scale regen never touches it. Figma "Header - FINALE": 162/118/140 nominal; rendered totals 164/120/142 incl. the two 1px band borders. Derived tokens recompute from the two base values, so a breakpoint override only restates top-h / bottom-h. Consumed by §4.3 (band heights, sticky dock offset) and the overlay clamp. ============================================================ */ --nf-header-top-h: 108px; --nf-header-bottom-h: 54px; --nf-header-logo-w: 218px; --nf-header-h: calc( var(--nf-header-top-h) + var(--nf-header-bottom-h) + 2px ); --nf-header-dock: calc( var(--nf-header-top-h) + 1px ); /* two-tier sticky: how far the shell rides up */ --nf-overlay-offset: calc( var(--nf-header-h) + var(--wp-admin--admin-bar--height, 0px) ); /* dropdown max-height offset (see §4.5) — conservative: budgets the FULL header, though once scrolled only the docked band is above the panel. Panels clamp ~109px short when scrolled; safe, not optimal. Revisit if short-viewport scrolled panels feel cramped. */ /* ============================================================ §2.42 TEMPORARY TOKEN OVERRIDES — hand-maintained, outside §2.4's paste span. Each entry restates a GENERATED token and must be deleted once masina_sizes.csv carries the value. Same :root as §2.4, later declaration → wins. ============================================================ */ /* TODO post-launch: set the `dates` row in masina_sizes.csv to 12/12, regenerate, delete this line. Designer ruling 2026-08-22: dates are a flat 12px at every breakpoint. Generated value is 0.875rem (14px). */ --nf-fs-dates: 0.75rem; } /* ============================================================ §2.41b HEADER GEOMETRY — responsive. Hand-maintained, outside §2.4's paste span. Tablet from the Figma "Header - FINALE" doc; mobile measured off the frame screenshot 2026-08-22 — the doc's 100/40 is a misread, the frame is 54/43 (~99px total). Designer-confirmed 2026-08-22. All three tokens are restated per breakpoint rather than cascaded, so each block reads on its own. --nf-header-h, --nf-header-dock and the overlay clamp all recompute from these. ============================================================ */ @media (max-width: 1024px) { :root { --nf-header-top-h: 75px; --nf-header-bottom-h: 43px; --nf-header-logo-w: 137px; } } @media (max-width: 767px) { :root { --nf-header-top-h: 54px; --nf-header-bottom-h: 43px; --nf-header-logo-w: 128px; } } /* ---------------------------------------------------------- 2.5 SPACING — rem (px-named for predictability) ---------------------------------------------------------- */ :root { --nf-space-4: 0.25rem; --nf-space-8: 0.5rem; --nf-space-12: 0.75rem; --nf-space-16: 1rem; --nf-space-20: 1.25rem; --nf-space-24: 1.5rem; --nf-space-32: 2rem; --nf-space-36: 2.25rem; --nf-space-40: 2.5rem; --nf-space-48: 3rem; --nf-space-64: 4rem; --nf-space-80: 5rem; --nf-space-112: 7rem; } /* ---------------------------------------------------------- 2.6 BORDER WIDTH — px (hairlines shouldn't sub-pixel scale). Named -bw- to avoid colliding with the --nf-border-* colors. ---------------------------------------------------------- */ :root { --nf-bw-thin: 1px; --nf-bw-medium: 2px; --nf-bw-thick: 4px; } /* ---------------------------------------------------------- 2.7 LAYOUT / GRID ---------------------------------------------------------- */ :root { --nf-content-max: 1280px; /* GP container width */ --nf-measure: 35em; /* = designer's 58ch of Zilla (701.56px at 1280, body-large 20px). em, not ch: ch resolves against the fallback font during the swap window and the whole reading column re-clamps when the webfont lands. */ --nf-measure-wide: 44.75em; /* = 74ch, same conversion */ --nf-lh-article-body: 1.38; /* TODO: fold into masina_sizes.csv */ --nf-page-max: 1440px; /* full-bleed sections out to here */ --nf-gutter: clamp(1rem, 0.0482rem + 4.0609vw, 3.7031rem); /* new per designer's revision) */ --nf-gutter-mob: 1rem; /* 16px */ --nf-logo-h: 2.466rem; /* 218×39.46 desktop; reduce on mobile in D3.4 */ /* --nf-overlay-offset lives in §2.41, derived from --nf-header-h. A hardcoded 164px duplicate sat here and, loading later at equal specificity, silently won — so the derived token was dead and any edit to it did nothing. Removed 2026-08-22. */ } /* Dead below 1025 now the 767 value is the stale @media (max-width: 1024px) { :root { --nf-overlay-offset: calc( 120px + var(--wp-admin--admin-bar--height, 0px) ); } } @media (max-width: 767px) { :root { --nf-overlay-offset: calc( 142px + var(--wp-admin--admin-bar--height, 0px) ); } } */ /* ---------------------------------------------------------- 2.8 BORDER RADIUS ---------------------------------------------------------- */ :root { --nf-radius-chip: 20px; --nf-radius-pill: 100px; --nf-radius-circle: 9999px; } /* ---------------------------------------------------------- 2.9 SHADOWS ---------------------------------------------------------- */ :root { --nf-shadow-subtle: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); --nf-shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --nf-shadow-dropdown: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Figma shadow-2xl */ } } /* end @layer nf.tokens */ /* ============================================================ 3 BASE ELEMENTS (unlayered — must beat GP/core) The :root prefixes below reach (0,0,2,0) to win specificity ties against WordPress global-styles-inline-css and GP's own sheets, which load after tokens.css. These MUST stay unlayered. ============================================================ */ html body { background-color: var(--nf-surface-page); color: var(--nf-color-text-primary); font-family: var(--nf-font-display); font-size: var( --nf-fs-body-base ); /* baseline; entry-content p overrides to body-large */ line-height: var(--nf-lh-body-base); letter-spacing: var(--nf-track-body-base); } h1, h2, h3, h4, h5, h6, .entry-title, .entry-title a { font-family: var(--nf-font-display); color: var( --nf-color-text-heading ); /* explicit → flips via token, not inheritance */ } /* GP article container: :root prefix wins the tie against GP's own .inside-article rule (loads after tokens.css). article bg = page. INTERIM — remove when GP Elements/templates carry surface tokens (~D5). */ :root .separate-containers .inside-article { background-color: var(--nf-surface-page); color: var(--nf-color-text-primary); padding-inline: 0; } :root body.page #page { max-width: none; width: 100%; margin-inline: 0; } :root body.page .site-main { width: min(100% - (2 * var(--nf-gutter)), var(--nf-content-max)); max-width: none; padding-inline: 0; } :root body.page #main { margin-inline: auto; } :root #page { overflow-x: clip; } /* UI font (Rethink Sans) on buttons — the one base override of inherited Zilla. :root prefix beats global-styles-inline-css button presets. */ :root button, :root input[type="button"], :root input[type="submit"], :root input[type="reset"], :root .wp-element-button, :root .wp-block-button__link, :root .wp-block-search__button { font-family: var(--nf-font-ui); font-size: var(--nf-fs-button); font-weight: var(--nf-fw-medium); line-height: var(--nf-lh-button); letter-spacing: var(--nf-track-button); } /* Buttons — one visual contract: core, GB (.masina-btn), .wp-element-button. Normal: brand-primary / on-color. Hover: text-heading / surface-page. The light↔dark swap is automatic — all four tokens flip under html.dark-mode, so no dark-mode rule is needed. ⚠ Core sets .wp-block-button__link:not(.has-background) at (0,2,0), tying :root .wp-block-button__link and winning on load order. Matching :not(.has-background) lifts us to (0,3,0) and breaks the tie by specificity. GB buttons render as bare with no shared button class, so they are opt-in via .masina-btn added in the editor (Advanced → Additional CSS class). Hover replaces the old filter:brightness — the designer specified a colour swap, not a darken. */ :root .wp-block-button__link:not(.has-background), :root .wp-block-button__link, :root .wp-element-button, :root a.masina-btn { background-color: var(--nf-color-brand-primary); color: var(--nf-color-text-on-color); } :root .wp-block-button__link:not(.has-background):hover, :root .wp-block-button__link:not(.has-background):focus-visible, :root .wp-block-button__link:hover, :root .wp-block-button__link:focus-visible, :root .wp-element-button:hover, :root .wp-element-button:focus-visible, :root a.masina-btn:hover, :root a.masina-btn:focus-visible { background-color: var(--nf-color-text-heading); color: var(--nf-surface-page); } /* .masina-btn carries the full pill shape, not just the colour contract */ :root a.masina-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.1875rem; /* matches .masina-donate */ border-radius: var(--nf-radius-pill); font-family: var(--nf-font-ui); font-weight: var(--nf-fw-medium); font-size: var(--nf-fs-button); line-height: var(--nf-lh-button); letter-spacing: var(--nf-track-button); text-decoration: none; } /* Component copy never soft-hyphenates — card excerpts, the Blog uživo lead, and quote leads all inherit hyphens:auto from .entry-content p (they render inside the Home page content). Card excerpt / hero lead ARE the

; the quote lead is inner

s that match .entry-content p directly, so reach those too. */ :root .masina-card__excerpt, :root .masina-hero-live__excerpt, :root .masina-quote__text, :root .masina-quote__text p { -webkit-hyphens: none; hyphens: none; } /* Article body copy → fluid body-large (18→20px) */ .entry-content p { font-size: var(--nf-fs-body-large); line-height: var(--nf-lh-article-body); letter-spacing: var(--nf-track-body-large); font-weight: var(--nf-fw-medium); max-width: var(--nf-measure); text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; } /* --- Measure: cap the reading column so long lines don't outrun the paragraph width. Headings included — below 900 the article column has no sidebar and an uncapped h2 hangs well past the body text. Images, embeds and galleries are deliberately excluded and stay full-column. */ .entry-content :is(ul, ol, dl, blockquote, figcaption), .entry-content :is(h2, h3, h4) { max-width: var(--nf-measure); } .entry-content :is(pre, .wp-block-preformatted, .wp-block-code) { max-width: var(--nf-measure-wide); } :is(.masina-single__title, .entry-content h3) { text-wrap: balance; } /* Quote + preformatted: same warm callout box; differ only in left-border color (designer). Quote = brand red; preformatted = heading token (#2D2A2A / #F0EBE1). :root prefix beats core/GP box + border defaults. */ :root .wp-block-quote, :root .wp-block-preformatted { background-color: var(--nf-surface-warm); border-left: var(--nf-bw-thick) solid var(--nf-color-brand-primary); padding: var(--nf-space-16) var(--nf-space-24); } :root .wp-block-preformatted { border-left-color: var(--nf-color-text-heading); } /* Color tokens to GP sidebars — :root prefix beats GP's own sidebar bg (ties on specificity, loads after tokens.css). Mirrors the :root .separate-containers .inside-article fix in §3. */ :root .sidebar .widget { background-color: transparent; } :root .separate-containers .inside-right-sidebar, :root .separate-containers .inside-left-sidebar { background-color: transparent; } /* Color tokens to GP Page Header */ .page-header { background-color: var(--nf-surface-page) !important; color: var(--nf-color-text-primary); } /* Content-link conventions live in §6 (Links). The old blanket .entry-content a rule was removed — it out-specified component anchors (.masina-donate, tags) that sit inside content. */ /* Form fields */ input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], textarea, select { background-color: var(--nf-surface-input); color: var(--nf-color-text-heading); border: var(--nf-bw-thin) solid var(--nf-border-default); } input::placeholder, textarea::placeholder { color: var(--nf-surface-placeholder); } /* --- Search-input clear button (WebKit/Blink only) --- The UA glyph is a fat X in the OS accent color and can't be styled, so appearance:none removes it and a masked SVG replaces it. Covers the header's inline search as well as the search-page form: both are type="search", both get the same treatment. Firefox renders no clear button at all — unchanged, not a regression. */ :root .masina-searchform__input::-webkit-search-cancel-button, :root .masina-inlinesearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 0.85em; /* TUNE */ height: 0.85em; cursor: pointer; background-color: var(--nf-color-brand-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5 12.5 12.5M12.5 3.5 3.5 12.5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; } /* 3.1 Misc */ /* Video Play Button for LLV */ .lazy-load-div:before { font-size: 7.5rem !important; text-shadow: 0px 0px 60px rgba(0, 0, 0, 0.8); color: var(--nf-color-brand-primary); } /* Image captions !!!CATCH ALL */ .entry-content figcaption, .featured-caption { text-align: left; } :root .wp-block-image figcaption { text-align: left; } /* Text select color */ ::selection { color: var(--nf-color-text-on-color); background: var(--nf-color-brand-primary); } /* ============================================================ 4 COMPONENTS (unlayered) ============================================================ */ /* ------------------------------------------------------------ 4.1 Theme toggle Colors reference the semantic token layer, so the button themes itself via html.dark-mode. The .dark-mode rules below control icon visibility/transform only (not color). ------------------------------------------------------------ */ button.theme-toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--nf-color-text-primary); border-radius: 50%; background: transparent; color: var(--nf-color-text-primary); cursor: pointer; overflow: hidden; -webkit-appearance: none; appearance: none; flex: 0 0 auto; } .theme-toggle:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle:focus-visible { outline: 2px solid var(--nf-color-text-primary); outline-offset: 2px; } /* Icon containers */ .theme-icon { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity 0.2s ease; } .theme-icon svg { width: 20px; height: 20px; transition: fill 0.2s ease; } /* Swap: sun in DARK, moon in LIGHT — the icon shows the mode you'd switch TO, per editorial decision (2026-08-24). Visibility/transform only; SVGs use currentColor and inherit the button's text-primary token. */ .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-icon-sun { opacity: 0; transform: rotate(-30deg) scale(0.8); } .dark-mode .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .dark-mode .theme-icon-moon { opacity: 0; transform: rotate(30deg) scale(0.8); } /* Restore hover redden over the JS-pinned inline fill. CSS !important beats the inline style the toggle sets on flip; only applies on hover/focus, so the resting inline fill is untouched. */ .theme-toggle:hover .theme-icon svg, .theme-toggle:focus-visible .theme-icon svg { fill: var(--nf-color-brand-primary) !important; } /* ------------------------------------------------------------ 4.2 Site logo — light/dark asset swap on .dark-mode. line-height:0 + symmetric inline-flex = identical box height. ------------------------------------------------------------ */ .site-logo { display: inline-flex; align-items: center; line-height: 0; } .site-logo svg { display: block; height: var(--nf-logo-h); width: auto; } .site-logo .logo-light, .site-logo .logo-dark { display: inline-flex; } .site-logo .logo-dark { display: none; } .dark-mode .site-logo .logo-light { display: none; } .dark-mode .site-logo .logo-dark { display: inline-flex; } /* Logo Size on snaller screns - !!!CHECK */ @media (max-width: 767px) { :root { --nf-logo-h: 2rem; } } /* ------------------------------------------------------------ 4.3 Header shell (plain-HTML Site Header element) Two-tier sticky: the shell sticks with a NEGATIVE offset equal to the top band's height, so the logo row slides off above the viewport and the utils/nav band docks at top. (Sticky on the band itself cannot work — a sticky element never leaves its parent's box.) Geometry comes from the §2 --nf-header-* tokens; nothing here restates a Figma number. ------------------------------------------------------------ */ .masina-header { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--nf-header-dock)); z-index: 100; background: var(--nf-surface-page); transition: transform 0.18s ease-out; } /* WP switches the admin bar to position:absolute below 600px (it scrolls away) but still publishes --wp-admin--admin-bar--height: 46px — so the offset must not be applied here, or the dock lands 46px short. */ @media (max-width: 600px) { .masina-header { top: calc(-1 * var(--nf-header-dock)); } } /* Header Smart Sticky - the current solution */ .masina-header--peek { transform: translateY(var(--nf-header-dock)); } /* Paired with snippet 39 (PARKED 2026-07-22): hide-on-scroll was superseded by the two-tier dock. Rule kept so reactivating the snippet is a one-switch change. */ .masina-header--hidden { transform: translateY(-100%); } /* full-width bands; visible row divider = top band's bottom border */ .masina-header__top { border-bottom: 1px solid var(--nf-border-medium); } .masina-header__bottom { background: var(--nf-surface-page); border-bottom: 1px solid var(--nf-border-medium); } /* shared band layout (load-bearing: flex + centering + gutters) */ .masina-header__top-inner, .masina-header__bottom-inner { width: min(100% - (2 * var(--nf-gutter)), var(--nf-content-max)); max-width: none; padding-inline: 0; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; } .masina-header__bottom-inner { gap: var(--nf-space-36); /* hold a gap before the nav */ } /* band heights — explicit (content-derived heights drifted ~30px) */ .masina-header__top-inner { height: var(--nf-header-top-h); } .masina-header__bottom-inner { height: var(--nf-header-bottom-h); } /* logo scale (SVG is viewBox-only, 970:176 — explicit width is load-bearing, not cosmetic; without it the SVG fills the band) */ .masina-header__top-inner .site-logo svg { width: var(--nf-header-logo-w); height: auto; display: block; /* kills the inline baseline gap under the SVG */ } /* Donirajte (pill) */ .masina-donate { display: inline-flex; align-items: center; background: var(--nf-color-brand-primary); color: var( --nf-color-text-on-color ); /* v4: on-brand text stays light in dark */ font-family: var(--nf-font-ui); font-weight: 500; font-size: var(--nf-fs-button); line-height: var(--nf-lh-button); letter-spacing: var(--nf-track-button); padding: 0.625rem 1.1875rem; /* 10 / 19 */ border-radius: 999px; text-decoration: none; } .masina-donate:hover, .masina-donate:focus-visible { background: var(--nf-color-text-heading); color: var(--nf-surface-page); } /* Old hover style kept here as the designer may want it back .masina-donate:hover { filter: brightness(0.94); color: var(--nf-color-text-on-color); }*/ /* ------------------------------------------------------------ 4.4 Primary nav + utils cluster ------------------------------------------------------------ */ .masina-header__utils { display: flex; align-items: center; gap: var(--nf-space-12); flex-shrink: 0; } /* separator: 1px, header ink. The frame draws it in the same ink as the burger and EN (#2d2a2a), not the grey meta token — a 1px hairline at 50% grey read as faint, which is what the old 1.5px width was compensating for. Fractional widths round to 1 or 2 device px depending on subpixel position, so the two separators disagreed and swapped with zoom. 14px is an optical correction from the frame's 16: at full ink a 16px rule reads heavier than the frame's grey one. */ .masina-header__sep { display: inline-block; flex: 0 0 auto; width: 1px; height: 14px; background: var(--nf-color-text-heading); } /* inline icons — currentColor follows the trigger, so hover + dark reach it */ .masina-icon { display: inline-flex; color: inherit; } .masina-icon svg { display: block; } .masina-icon--search svg { width: 18px; height: 18px; } /* header icons follow currentColor → hover-redden and flip with theme */ .masina-icon svg [stroke]:not([stroke="none"]), .masina-icon svg[stroke]:not([stroke="none"]) { stroke: currentColor; } .masina-icon svg [fill]:not([fill="none"]), .masina-icon svg[fill]:not([fill="none"]) { fill: currentColor; } .masina-menu-trigger, .masina-search-trigger { display: inline-flex; align-items: center; gap: var(--nf-space-8); background: none; border: 0; padding: 0; cursor: pointer; color: var(--nf-color-text-heading); } /* "Vidi još": typography lives in the :root rule below (GP's :root button rule beats a bare class); only the uncontested bits sit here. */ .masina-menu-trigger { white-space: nowrap; transition: color 0.2s ease; /* eye-tuned: label + bars fade together */ } .masina-menu-trigger:focus-visible, .masina-search-trigger:focus-visible { outline: 2px solid var(--nf-color-text-primary); outline-offset: 2px; } /* UI/Nav type stack, asserted above the :root button base rule (--nf-font-ui) that the label would otherwise inherit. */ :root .masina-header__utils .masina-menu-trigger { font-family: var(--nf-font-display); font-weight: 500; font-size: var(--nf-fs-nav); line-height: var(--nf-lh-nav); } /* GP paints the trigger var(--base-2) (#fff) on :focus. The overlay returns focus to the trigger on close, so it sits focused-not-hovered = white-on- white until the next blur. Cover :focus:not(:focus-visible) with heading at utils specificity to beat GP; keyboard focus still reddens below. */ :root .masina-header__utils .masina-menu-trigger:focus:not(:focus-visible), :root .masina-header__utils .masina-search-trigger:focus:not(:focus-visible) { color: var(--nf-color-text-heading); } /* language switch — UI/Nav style, same ink as nav links */ .masina-lang { font-family: var(--nf-font-display); font-weight: 500; font-size: var(--nf-fs-nav); line-height: var(--nf-lh-nav); letter-spacing: var(--nf-track-nav); color: var(--nf-color-text-heading); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } :root .masina-header__utils .masina-lang:hover, :root .masina-header__utils .masina-lang:focus-visible { color: var(--nf-color-brand-primary); } :root .masina-header__utils .masina-lang:focus:not(:focus-visible) { color: var(--nf-color-text-heading); } /* utils buttons: :root prefix strips GP button chrome + sets hover color */ :root .masina-header__utils .masina-menu-trigger, :root .masina-header__utils .masina-search-trigger, :root .masina-header__utils .theme-toggle { background: none; } :root .masina-header__utils .masina-menu-trigger:hover, :root .masina-header__utils .masina-menu-trigger:focus-visible, :root .masina-header__utils .masina-search-trigger:hover, :root .masina-header__utils .masina-search-trigger:focus-visible, :root .masina-header__utils .theme-toggle:hover, :root .masina-header__utils .theme-toggle:focus-visible { background: none; color: var(--nf-color-brand-primary); } /* primary nav — horizontal scroll strip when it can't fit: scrolls internally, never widens the page (no global overflow-x:hidden needed). */ .masina-nav { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .masina-nav::-webkit-scrollbar { display: none; } .masina-nav ul { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--nf-space-36); margin: 0; padding: 0; list-style: none; } .masina-nav a { font-family: var(--nf-font-display); font-weight: 500; font-size: var(--nf-fs-nav); line-height: var(--nf-lh-nav); letter-spacing: var(--nf-track-nav); color: var(--nf-color-text-heading); text-decoration: none; white-space: nowrap; } .masina-nav a:hover { color: var(--nf-color-brand-primary); /* provisional, designer-pending */ } /* ------------------------------------------------------------ 4.4b Hamburger "Spin" — SVG-stroke rebuild (from jonsuh, MIT) Bars are SVG strokes = identical rendering model to the header icons → uniform weight at every DPR/zoom/engine. The CSS-box version failed because each bar pixel-snapped independently. Line y-coords (1.5 / 7.5 / 13.5 in a 16x15 viewBox) are half-integers so 1px strokes land on whole pixel rows at 1x — CSS height MUST equal viewBox height or they rescale fractional. State = trigger's [aria-expanded]; stroke rides currentColor. ------------------------------------------------------------ */ .masina-burger { display: block; width: 16px; height: 15px; flex: 0 0 auto; overflow: visible; } .masina-burger line { stroke: currentColor; stroke-width: 1; stroke-linecap: round; transform-box: fill-box; transform-origin: center; } .masina-burger__botwrap { transform-box: fill-box; transform-origin: center; } /* closed-state (reverse) clocks */ .masina-burger__top { transition: transform 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .masina-burger__mid { transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .masina-burger__botwrap { transition: transform 0.1s 0.25s ease-in; } .masina-burger__bot { transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } /* open state: top folds in + fades, mid spins 225deg (overshoot past 180 is what reads as the gear-spin), bottom folds then lands at 135 → X */ .masina-menu-trigger[aria-expanded="true"] .masina-burger__top { transform: translateY(6px); opacity: 0; transition: transform 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .masina-menu-trigger[aria-expanded="true"] .masina-burger__mid { transform: rotate(225deg); transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } .masina-menu-trigger[aria-expanded="true"] .masina-burger__botwrap { transform: translateY(-6px); transition: transform 0.1s ease-out; } .masina-menu-trigger[aria-expanded="true"] .masina-burger__bot { transform: rotate(135deg); transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* ------------------------------------------------------------ 4.4c Utils cluster — responsive (frames: desktop full, tablet/mobile = burger | theme | EN, search in dropdown only) MUST stay after 4.4: these display rules beat 4.4's by load order only (media queries add no specificity). ------------------------------------------------------------ */ .masina-header__sep--lang { display: none; /* desktop: no sep before EN */ } @media (max-width: 1024px) { .masina-menu-trigger__label { display: none; } .masina-search-trigger, .masina-inlinesearch { display: none; /* search = dropdown field <=tablet */ } .masina-header__sep--lang { display: inline-block; } } @media (max-width: 767px) { .masina-nav { display: none; } } /* ------------------------------------------------------------ 4.5 Header dropdown (D3 Step 3, revised 2026-07-22) GB Pro Anchored Overlay Panel, content = one wp:html block. GB panel settings (not CSS): Type Anchored · Trigger Click · Position to Parent .masina-header__bottom · Placement Bottom Start · Width Full · Animation In "Fade In" 400ms (no animation-out exists in GB — close is instant by design) · zero the panel container padding + bg so .masina-dropdown owns every visual. Dark mode: no overrides here by design — every value is a token. Two intentional inversions to eyeball in dark: · mission text = on-color (light) on brand-primary block · "Analiza" tag = surface-page text on text-heading pill ------------------------------------------------------------ */ /* panel shell + viewport clamp + page dim, one rule */ .masina-dropdown { width: 100%; background: var(--nf-surface-page); border-bottom: var(--nf-bw-thick) solid var(--nf-color-brand-primary); max-height: calc(100vh - var(--nf-overlay-offset)); max-height: calc(100dvh - var(--nf-overlay-offset)); overflow: hidden auto; overscroll-behavior: contain; /* page dim below the panel: offset-down + equal spread paints only beneath the panel's bottom edge, and rides GB's opacity fade (same node tree) — frame-synced with the panel, vanishes on close. A separate backdrop element could never sync with GB's JS clock. */ box-shadow: 0 100vmax 0 100vmax rgba(0, 0, 0, 0.45); } .masina-dropdown__inner { width: min(100% - (2 * var(--nf-gutter)), var(--nf-content-max)); margin-inline: auto; padding-block: var(--nf-space-64) var(--nf-space-48); } /* grid: one reflow point via grid-template-areas */ .masina-dropdown__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "cats feat mission"; gap: var(--nf-space-48); align-items: start; } .masina-dropdown__col--cats { grid-area: cats; } .masina-dropdown__col--feat { grid-area: feat; } .masina-dropdown__col--mission { grid-area: mission; } /* column titles (Article-H2) — v4: quote grey (confirmed vs Figma). Desktop shows all three; tablet loses "Kategorije" (search takes its slot); mobile loses all three. Hidden, not removed — screen readers keep the column structure. */ .masina-dropdown__coltitle { margin: 0 0 var(--nf-space-24); padding-bottom: var(--nf-space-12); border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); font-family: var(--nf-font-display); font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-article-h2); line-height: var(--nf-lh-article-h2); color: var(--nf-color-text-quote); } @media (max-width: 1024px) { .masina-dropdown__col--cats .masina-dropdown__coltitle { display: none; } } @media (max-width: 767px) { .masina-dropdown__inner { padding: var(--nf-space-24) 0 var(--nf-space-40); /* vertical only; the horizontal gutter already comes from the base width:min(100% − 2·gutter) */ } } /* Kategorije list */ .masina-dropdown__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nf-space-16); } .masina-dropdown__cat { display: inline-flex; align-items: center; font-family: var(--nf-font-display); font-weight: var(--nf-fw-medium); font-size: var(--nf-fs-dropdown-link); line-height: var(--nf-lh-dropdown-link); color: var(--nf-color-text-heading); text-decoration: none; } .masina-dropdown__cat:hover, .masina-dropdown__cat:focus-visible { color: var(--nf-color-brand-primary); } /* Dropdown Desktop Second Menu */ .masina-dropdown__cats--desktop { display: none; } @media (min-width: 1025px) { .masina-dropdown__cats--desktop { display: flex; } .masina-dropdown__cats--compact { display: none; } } /* GP sets a:focus/:active { color: var(--contrast) } (#222, non-flipping), which beats our base color and, because the overlay focus-traps onto the first item on open, paints it black-on-black in dark. Pin non-keyboard focus + active to the heading token; keyboard focus stays red above. */ .masina-dropdown__cat:focus:not(:focus-visible), .masina-dropdown__cat:active { color: var(--nf-color-text-heading); } .masina-dropdown__cat:hover, .masina-dropdown__cat:focus-visible { color: var(--nf-color-brand-primary); } .masina-dropdown__cat:focus-visible { outline: 2px solid var(--nf-color-text-primary); outline-offset: 2px; } /* Izdvajamo card — flex column so the CTA pins to the bottom (designer rev 2026-07-22: both cards' buttons on one baseline). Children that shouldn't stretch across the column carry align-self: flex-start. */ .masina-dropdown__card { background: var(--nf-surface-pure-white); /* alias → page in v4 */ border: var(--nf-bw-thin) solid var(--nf-border-default); padding: var(--nf-space-32); /* = mission padding (designer rev) */ display: flex; flex-direction: column; } .masina-dropdown__tag { display: inline-block; align-self: flex-start; margin-bottom: var(--nf-space-16); padding: var(--nf-space-4) var(--nf-space-12); border-radius: var(--nf-radius-pill); background: var(--nf-color-text-heading); color: var(--nf-surface-page); /* inverts with theme by design */ font-family: var(--nf-font-ui); font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-label-base); line-height: var(--nf-lh-label-base); letter-spacing: var(--nf-track-label-base); text-transform: uppercase; } .masina-dropdown__cardtitle { display: block; /*

; link injected via {{post_title link:post}} */ margin: 0 0 var(--nf-space-12); font-family: var(--nf-font-display); font-weight: var(--nf-fw-bold); font-size: var( --nf-fs-dropdown-link ); /* no dedicated card-title token yet; mint --nf-fs-card-title in D6 */ line-height: 1.25; } .masina-dropdown__cardtitle:hover, .masina-dropdown__cardtitle a:hover { color: var(--nf-color-brand-primary); } .masina-dropdown__cardtitle a { color: var(--nf-color-text-heading); text-decoration: none; } .masina-dropdown__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .masina-dropdown__more { display: inline-flex; align-items: center; gap: var(--nf-space-8); margin-top: auto; /* pins to card bottom */ align-self: flex-start; padding-top: var(--nf-space-16); /* minimum gap above (auto carries none) */ font-family: var(--nf-font-ui); font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-label-base); letter-spacing: var(--nf-track-label-base); text-transform: uppercase; color: var(--nf-color-brand-primary); text-decoration: none; } /* hover → primary text (designer); beats GP a:hover --contrast */ .masina-dropdown__more:hover, .masina-dropdown__more:focus-visible { color: var(--nf-color-text-primary); } /* Izdvajamo query wrappers must fill the feat column — GB Looper's grid default collapses a single card to min-content (words break one-per-line). */ .masina-dropdown__col--feat .gb-query, .masina-dropdown__col--feat .gb-looper, .masina-dropdown__col--feat .gb-loop-item, .masina-dropdown__col--feat .gb-query-no-results { display: contents; } /* Naša misija */ .masina-dropdown__mission { position: relative; /* anchor for blur + z-index children */ overflow: hidden; padding: var(--nf-space-32); background: var(--nf-color-brand-primary); display: flex; flex-direction: column; } .masina-dropdown__mission > * { position: relative; z-index: 1; /* sit above the blur */ } /* NOTE: same specificity (0,1,0) as the rule above — must stay AFTER it or the blur loses position:absolute and joins the flex flow. */ .masina-dropdown__mission-blur { position: absolute; z-index: 0; right: -20px; bottom: -20px; width: 160px; height: 160px; border-radius: var(--nf-radius-circle); background: var(--nf-color-brand-primary); filter: blur(64px); opacity: 0.5; display: none; /* desktop hidden; shown <=tablet */ } .masina-dropdown__missiontitle { margin: 0 0 var(--nf-space-16); font-family: var(--nf-font-display); font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-h3); line-height: var(--nf-lh-h3); color: var(--nf-color-text-on-color); /* v4: light on brand block */ } .masina-dropdown__missiondesc { margin: 0 0 var(--nf-space-32); /* was 16 — floor under the auto-pushed btn */ font-family: var(--nf-font-display); font-size: var(--nf-fs-body); /* Body/Base 17 */ font-weight: 500; /* eye-tuned vs frame; doc says Regular — designer flag */ line-height: 1.6; color: var(--nf-color-text-on-color); } .masina-dropdown__missionbtn { display: inline-flex; align-items: center; gap: var(--nf-space-8); margin-top: auto; /* pins to card bottom */ align-self: flex-start; padding: var(--nf-space-12) var(--nf-space-24); border-radius: var(--nf-radius-pill); background: var( --nf-color-text-on-color ); /* v4: light pill stays light in dark */ color: var(--nf-color-brand-primary); font-family: var(--nf-font-ui); font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-button); text-decoration: none; } /* Focus rings for the dropdown panel. A colour change alone leaves the UA default ring painting on top — only setting `outline` replaces it. Mirrors the header trigger pattern in §4.4. */ .masina-dropdown__cat:focus-visible, .masina-dropdown__cardtitle a:focus-visible, .masina-dropdown__more:focus-visible, .masina-dropdown__missionbtn:focus-visible { outline: 2px solid var(--nf-color-text-primary); outline-offset: 2px; } /* shared arrow mask (more + mission button) */ .masina-dropdown__more::after, .masina-dropdown__missionbtn::after { content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 11'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M.667 5.333H10M5.335.667 10 5.333 5.335 10'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 11'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M.667 5.333H10M5.335.667 10 5.333 5.335 10'/%3E%3C/svg%3E") center/contain no-repeat; } /* search field (<=tablet) — lives inside the cats column so it takes the "Kategorije" title's slot on tablet and tops the stack on mobile. Vertical rhythm mirrors .masina-dropdown__coltitle so the two hairlines land on one line across the gutter. */ .masina-dropdown__search { display: none; /* desktop hidden */ align-items: center; gap: var(--nf-space-12); margin-bottom: var(--nf-space-24); /* = coltitle margin */ padding-bottom: 0.2rem; /* literal: token space-4 misaligns the hairline vs coltitle by <1px; token candidate if recurring */ border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); } .masina-dropdown__search-input { flex: 1; background: transparent; border: 0; font-family: var(--nf-font-display); font-size: var(--nf-fs-nav); color: var(--nf-color-text-heading); } .masina-dropdown__search-input:focus { outline: none; } /* GP input chrome strip — bg/border/padding must be asserted at :root weight or GP's :root input[type="search"] rule wins (grey filled box, 20px vertical padding, non-flipping text colour). */ :root .masina-dropdown .masina-dropdown__search-input { background: transparent; border: 0; padding: var(--nf-space-4) 0; color: var(--nf-color-text-heading); } .masina-dropdown__search-btn { display: inline-flex; padding: 0; background: none; border: 0; cursor: pointer; color: var(--nf-color-text-heading); order: -1; /* icon before input (Figma) */ } .masina-dropdown__search-btn svg { width: 18px; height: 18px; } /* GB's focus trap force-focuses this button on open (it ignores tabindex="-1" — that only removes it from Tab order, not from programmatic focus), and GP paints button:focus as a filled box. Pin bg + colour; the button is mouse-only, Enter submits the form. */ :root .masina-dropdown .masina-dropdown__search-btn:focus, :root .masina-dropdown .masina-dropdown__search-btn:focus-visible { outline: none; background: none; color: var(--nf-color-text-heading); } :root .masina-dropdown .masina-dropdown__search-btn:hover { background: none; color: var(--nf-color-brand-primary); } /* desktop equal-height columns */ @media (min-width: 1025px) { .masina-dropdown__grid { align-items: stretch; } .masina-dropdown__col--feat, .masina-dropdown__col--mission { display: flex; flex-direction: column; } .masina-dropdown__col--feat .masina-dropdown__card { flex: 1; } .masina-dropdown__mission { flex: 1; } } /* TABLET: cats left (full height), feat top-right, mission bottom-right */ @media (max-width: 1024px) { .masina-dropdown__search { display: flex; } .masina-dropdown__mission-blur { display: block; } .masina-dropdown__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "cats feat" "cats mission"; gap: var(--nf-space-40); } } /* Full height at <=1024 (designer). Height comes from the overlay box — GB sets .gb-overlay's top from the live header and bottom:0 gives the exact remainder — NOT from --nf-overlay-offset, whose responsive branches are tombstoned in §2 as stale. Equal cards reuse the >=1025 pattern (stretch + flex column + flex:1) over 1fr row tracks. */ @media (max-width: 1024px) { .gb-overlay.gb-overlay--anchored { bottom: 0; } .gb-overlay.gb-overlay--anchored .gb-overlay__content { height: 100%; max-height: 100%; } .masina-dropdown { height: 100%; max-height: none; } .masina-dropdown__inner { min-height: 100%; display: flex; flex-direction: column; } .masina-dropdown__grid { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .masina-dropdown__col--feat, .masina-dropdown__col--mission { display: flex; flex-direction: column; } .masina-dropdown__col--feat .masina-dropdown__card { flex: 1; } .masina-dropdown__mission { flex: 1; } } @media (max-width: 767px) { .masina-dropdown__grid { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); } } /* MOBILE: single column — search, then cats, feat, mission */ @media (max-width: 767px) { .masina-dropdown__inner { padding-block: var(--nf-space-24) var(--nf-space-40); } .masina-dropdown__grid { grid-template-columns: 1fr; grid-template-areas: "cats" "feat" "mission"; gap: var(--nf-space-32); } } /* ------------------------------------------------------------ 4.5c Inline header search (desktop) — in-flow flex child right of the search icon; the expanding field pushes theme/EN toward the nav (nav absorbs the squeeze via its overflow strip). The form node is BUILT BY SNIPPET 38, not authored in markup: the GP Site Header element's render pipeline strips
and from wp:html. State = .is-open. ------------------------------------------------------------ */ .masina-inlinesearch { max-width: 0; overflow: hidden; margin: 0 0 0 calc(-1 * var(--nf-space-12)); /* cancel the flex gap slot when closed */ background: var(--nf-surface-page); transition: max-width 0.25s ease, margin-left 0.25s ease; } .masina-inlinesearch.is-open { max-width: min(320px, 30vw); margin-left: 0; border-bottom: var(--nf-bw-thin) solid var(--nf-color-text-heading); } /* fixed intrinsic width: only the clip window animates, so the text inside never reflows mid-transition */ .masina-inlinesearch__input { width: min(320px, 30vw); padding: 0; line-height: var(--nf-lh-nav); background: transparent; border: 0; font-family: var(--nf-font-display); font-size: var(--nf-fs-nav); color: var(--nf-color-text-heading); } /* GP chrome strip — padding here is load-bearing: GP's 20px vertical padding made the input the row's tallest child and grew the band. */ :root .masina-header__utils .masina-inlinesearch__input { background: transparent; border: 0; padding: 0; color: var(--nf-color-text-heading); } .masina-inlinesearch__input:focus { outline: none; } /* ------------------------------------------------------------ 4.6 Footer (D4) — GP Footer Block Element Fully tokenized (designer footer-context.md). NO dark-specific rules: every value is a semantic token that flips via html.dark-mode. bg = surface-warm; all text = text-heading; CTA text = on-color (non-flip, on brand fill); lines = border-default. One reflow via grid-template-areas. Selectors scoped through .masina-footer so GB's .gb-text / .gb-element base classes can't out-specify us. ------------------------------------------------------------ */ .masina-footer { background: var(--nf-surface-warm); color: var(--nf-color-text-heading); } .masina-footer .masina-footer__inner { width: min(100% - (2 * var(--nf-gutter)), var(--nf-content-max)); max-width: none; padding-block: var(--nf-space-80) var(--nf-space-48); padding-inline: 0; margin-inline: auto; display: flex; flex-direction: column; gap: var(--nf-space-64); } /* --- TOP: logo · description · CTA --- */ .masina-footer .masina-footer__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nf-space-24); } /* footer logo larger than header's --nf-logo-h; reuses .site-logo swap */ .masina-footer .masina-footer__logo .site-logo svg { height: clamp(2.75rem, 2.4rem + 1.5vw, 3.5rem); } .masina-footer .masina-footer__desc { max-width: 46ch; margin: 0; font-family: var(--nf-font-display); font-size: var(--nf-fs-body-large); line-height: var(--nf-lh-body-large); color: var(--nf-color-text-heading); } /* CTA pill — brand fill, on-color text (does NOT flip), arrow */ .masina-footer .masina-footer__cta { display: inline-flex; align-items: center; gap: var(--nf-space-12); padding: var(--nf-space-16) var(--nf-space-32); background: var(--nf-color-brand-primary); color: var(--nf-color-text-on-color); font-family: var(--nf-font-ui); font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-button); line-height: var(--nf-lh-button); letter-spacing: var(--nf-track-button); text-transform: uppercase; text-decoration: none; border-radius: var(--nf-radius-pill); } .masina-footer .masina-footer__cta:hover, .masina-footer .masina-footer__cta:focus-visible { background: var(--nf-color-text-heading); color: var(--nf-surface-page); } /* Old hover style kept here as the designer may want it back .masina-footer .masina-footer__cta:hover, .masina-footer .masina-footer__cta:focus-visible { color: var( --nf-color-text-on-color ); filter: brightness(0.94); }*/ .masina-footer .masina-footer__cta-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; } /* --- COLUMNS: cats · social · newsletter --- */ .masina-footer .masina-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; grid-template-areas: "cats social news"; gap: var(--nf-space-48); align-items: start; } .masina-footer .masina-footer__col--cats { grid-area: cats; } .masina-footer .masina-footer__col--social { grid-area: social; } .masina-footer .masina-footer__col--news { grid-area: news; } /* column heading + underline divider */ .masina-footer .masina-footer__heading { margin: 0 0 var(--nf-space-24); padding-bottom: var(--nf-space-16); border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); font-family: var(--nf-font-ui); font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-label-base); line-height: var(--nf-lh-label-base); letter-spacing: var(--nf-track-label-base); text-transform: uppercase; color: var(--nf-color-text-heading); } /* category links — Rethink regular */ .masina-footer .masina-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nf-space-16); } .masina-footer .masina-footer__links a { font-family: var( --nf-font-display ); /* was --nf-font-ui — designer: Zilla Slab */ font-weight: var(--nf-fw-regular); font-size: var(--nf-fs-footer-link); line-height: var(--nf-lh-footer-link); color: var(--nf-color-text-heading); text-decoration: none; } .masina-footer .masina-footer__links a:hover, .masina-footer .masina-footer__links a:focus-visible { color: var( --nf-color-brand-primary ); /* provisional — designer-pending, matches nav */ } /* social links — Zilla italic + external arrow, space-between */ .masina-footer .masina-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nf-space-16); } .masina-footer .masina-footer__social a { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-16); font-family: var(--nf-font-display); font-style: italic; font-weight: var(--nf-fw-regular); font-size: var(--nf-fs-footer-social); line-height: var(--nf-lh-footer-social); color: var(--nf-color-text-heading); text-decoration: none; } .masina-footer .masina-footer__social a:hover, .masina-footer .masina-footer__social a:focus-visible { color: var(--nf-color-brand-primary); } .masina-footer .masina-footer__ext-icon { display: inline-flex; flex-shrink: 0; color: inherit; } .masina-footer .masina-footer__ext-icon svg { width: 14px; height: 14px; display: block; stroke: currentColor; } /* newsletter */ .masina-footer .masina-footer__news-desc { margin: 0 0 var(--nf-space-32); font-family: var(--nf-font-display); font-size: var(--nf-fs-body-large); line-height: var(--nf-lh-body-large); color: var(--nf-color-text-heading); } .masina-footer .masina-footer__news-form { display: flex; align-items: center; gap: var(--nf-space-12); padding-bottom: var(--nf-space-12); border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); } /* scope beats the §3 input[type=email] base (bg/border) without !important */ .masina-footer .masina-footer__news-input { flex: 1; min-width: 0; padding: var(--nf-space-8) 0; background: transparent; border: 0; font-family: var(--nf-font-display); font-size: var(--nf-fs-body-large); line-height: var(--nf-lh-body-large); color: var(--nf-color-text-heading); } .masina-footer .masina-footer__news-input:focus { outline: none; } /* placeholder = heading tone (not the grey §3 default), flips with mode */ .masina-footer .masina-footer__news-input::placeholder { color: var(--nf-color-text-heading); opacity: 0.75; } /* GP's input:focus paints background: var(--base-2) at (0,0,2,1); our base rule didn't cover :focus. (0,0,3,0) beats it — no :root prefix needed. */ .masina-footer .masina-footer__news-input:focus, .masina-footer .masina-footer__news-input:hover { background-color: transparent; color: var(--nf-color-text-heading); outline: none; } .gb-overlay[role="dialog"] { box-shadow: none; overflow: visible; /* was hidden auto — stop clipping the panel's shadow */ max-height: none; /* clamp moves down to the panel */ } .masina-footer .masina-footer__news-btn { display: inline-flex; flex-shrink: 0; padding: 0; background: none; border: 0; cursor: pointer; color: var(--nf-color-text-heading); } .masina-footer .masina-footer__news-btn:hover, .masina-footer .masina-footer__news-btn:focus-visible { color: var(--nf-color-brand-primary); } .masina-footer .masina-footer__news-btn svg { width: 20px; height: 20px; display: block; stroke: currentColor; } /* --- TEMP: newsletter form hidden until the real form is wired. Ghost button links to the standalone signup page meanwhile. Form stays in the DOM (display:none) — we need it back soon. --- */ .masina-footer .masina-footer__news-form { display: none; } .masina-footer .masina-footer__news-link { display: inline-flex; align-items: center; gap: var(--nf-space-8); padding: 0.625rem 1.1875rem; /* matches .masina-donate */ background: transparent; border: var(--nf-bw-thin) solid var(--nf-color-text-primary); border-radius: var(--nf-radius-pill); color: var(--nf-color-text-primary); font-family: var(--nf-font-ui); font-weight: var(--nf-fw-medium); font-size: var(--nf-fs-button); line-height: var(--nf-lh-button); letter-spacing: var(--nf-track-button); text-decoration: none; } :root .masina-footer .masina-footer__inner .masina-footer__news-link:hover, :root .masina-footer .masina-footer__inner .masina-footer__news-link:focus-visible { background: var(--nf-color-text-heading); color: var(--nf-surface-page); text-decoration: none; } .masina-footer .masina-footer__news-link svg { width: 18px; height: 18px; display: block; stroke: currentColor; } /* Footer links - TEMP - will consolidate with all links */ .masina-footer .masina-footer__col--cats a:hover { text-decoration: underline; } .masina-footer .masina-footer__social a:hover { text-decoration: underline; } .masina-footer__cta:hover { text-decoration: none; } /* --- BOTTOM: copyright · legal links --- */ .masina-footer .masina-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-24); padding-top: var(--nf-space-32); border-top: var(--nf-bw-thin) solid var(--nf-border-default); } .masina-footer .masina-footer__copy { margin: 0; font-family: var(--nf-font-display); font-style: italic; font-size: var(--nf-fs-caption); line-height: var(--nf-lh-caption); color: var(--nf-color-text-heading); } .masina-footer .masina-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--nf-space-32); } .masina-footer .masina-footer__legal a { font-family: var(--nf-font-ui); font-weight: var(--nf-fw-medium); font-size: var(--nf-fs-caption); line-height: var(--nf-lh-caption); color: var(--nf-color-text-heading); text-decoration: none; } .masina-footer .masina-footer__legal a:hover, .masina-footer .masina-footer__legal a:focus-visible { color: var(--nf-color-brand-primary); } /* --- TABLET: cats+social top, newsletter full-width below --- */ @media (max-width: 1024px) { .masina-footer .masina-footer__cols { grid-template-columns: 1fr 1fr; grid-template-areas: "cats social" "news news"; gap: var(--nf-space-48) var(--nf-space-40); } } /* --- MOBILE: single column; CTA full-width; bottom centers, legal UPPER 2-up --- */ @media (max-width: 767px) { .masina-footer .masina-footer__inner { padding-block: var(--nf-space-48) var(--nf-space-40); gap: var(--nf-space-48); } .masina-footer .masina-footer__cols { grid-template-columns: 1fr; grid-template-areas: "cats" "social" "news"; gap: var(--nf-space-40); } .masina-footer .masina-footer__cta { width: 100%; justify-content: center; } .masina-footer .masina-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: var(--nf-space-24); } .masina-footer .masina-footer__copy { text-align: center; } .masina-footer .masina-footer__legal { justify-content: center; gap: var(--nf-space-24) var(--nf-space-32); } .masina-footer .masina-footer__legal a { font-weight: var(--nf-fw-bold); font-size: var(--nf-fs-label-base); letter-spacing: var(--nf-track-label-base); text-transform: uppercase; } } /* ============================================================ 4.7 SINGLE POST — Vesti (D5) [consolidated] Two related rules live OUTSIDE this section (don't move them here): · §3 .entry-content p → add font-weight: var(--nf-fw-medium); · §6 .tags-links a (tag block) → add text-underline-offset: 0.3em; §6 loads after §4.7, so a tag underline-offset placed here would lose to §6's shared 0.18em on .tags-links a. Keep it in §6, after that rule. ============================================================ */ /* --- Layout shell --------------------------------------- */ .masina-single { --_main: 734px; --_aside: 296px; --_gap: var(--nf-space-40); box-sizing: border-box; /* Same shape as every other container, capped at the article+aside block rather than at --nf-content-max. Below the cap the element is viewport-width and the gutter IS the padding, so its left edge tracks the header exactly; above it, it centres — which is how the Vest frame draws it (block ~1050 at ~189 in 1440). Replaces the Block A pin: padding no longer participates. */ width: min( 100% - (2 * var(--nf-gutter)), calc(var(--_main) + var(--_aside) + var(--_gap)) ); max-width: none; padding-inline: 0; margin-inline: auto; } @media (min-width: 768px) { .masina-single { --_pad: 2rem; /* .masina-single pinned to its pre-migration value: its max-width feeds the 1134 fluid-type anchor, and the article-column alignment is still open with the designer (answer 5). Do not let it read the clamp until both are settled. */ } } /* --- Column structure ----------------------------------- */ /* Tablet (768–1024): one column, order main → Srodni → Najnovije. Mobile (≤767): header/cols/main collapse to display:contents (mobile block below) so every leaf shares one flex context and `order` can drop the lead below the hero without duplicating the ACF field. Desktop (≥1025): grid. */ .masina-single__cols { display: flex; flex-direction: column; } .masina-single__main { order: 1; } .masina-single__related { order: 2; } .masina-single__aside { order: 3; } /* Aside is a fixed track, not minmax: with both flexible the sidebar shrinks to ~226px at 900 and breaks the 300px ad slot. The article column takes the squeeze instead (489 at 900, 603 at 1024, 734 from ~1170 up).*/ @media (min-width: 900px) { .masina-single__cols { display: grid; grid-template-columns: minmax(0, var(--_main)) var(--_aside); column-gap: var(--_gap); align-items: start; border-top: var(--nf-bw-thin) solid var(--nf-border-default); padding-top: var(--nf-space-16); } .masina-single__main { grid-column: 1; grid-row: 1; } .masina-single__aside { grid-column: 2; grid-row: 1; position: sticky; top: 11rem; } .masina-single__related { grid-column: 1; grid-row: 2; } } /* --- Meta row (cat = §6 red · | · Dates) ---------------- */ /* One wrapping flex line for the whole row. .cat-links is display:contents so its s and its inline .masina-single__sep spans become items of the meta row itself. Without it the category list is a SINGLE flex item: it wraps internally, and the trailing sep + date get parked beside that block at its first baseline instead of continuing after the last category (visible on mobile at 3+ categories). Scoped to __meta — card/related/live .cat-links keep their own box. Row gap eye-tuned; the 8px column gap reads loose between stacked meta lines. */ .masina-single__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nf-space-4) var(--nf-space-8); margin-bottom: var(--nf-space-16); } .masina-single__meta .cat-links { display: contents; } .masina-single__meta .cat-links a { font-family: var(--nf-font-ui); font-size: var(--nf-fs-label-base); font-weight: var(--nf-fw-bold); line-height: var(--nf-lh-label-base); letter-spacing: var(--nf-track-label-base); text-transform: uppercase; } .masina-single__sep::before { content: "|"; color: var(--nf-color-text-quote); } .masina-single__date { font-family: var(--nf-font-ui); font-size: var(--nf-fs-dates); line-height: var(--nf-lh-dates); letter-spacing: var(--nf-track-dates); } :root .masina-single__date { color: #9a9a9a; /* #3 lighter grey — interim, confirm hex (AA: open dec. #1) */ text-transform: uppercase; } /* --- Title --------------------------------------------- */ .masina-single__title { font-size: var(--nf-fs-h1-article-large); line-height: var(--nf-lh-h1-article-large); letter-spacing: var(--nf-track-h1-article-large); font-weight: var(--nf-fw-semibold); margin: 0 0 var(--nf-space-16); } /* --- Lead / podnaslov ---------------------------------- */ /* max-width in ch, not --_main: capping at the article column reopens the right-hand gap this revision exists to close (tested 2026-08-05). ch tracks the fluid --nf-fs-lead, so the measure holds a constant character count across breakpoints, and goes inert below ~1000px where the container is already narrower. ~78 real characters in Zilla. Designer-approved value. */ .masina-single__lead { font-size: var(--nf-fs-lead); line-height: var(--nf-lh-lead); font-weight: var(--nf-fw-medium); color: var(--nf-color-text-heading); max-width: 67ch; margin: 0 0 var(--nf-space-20); } /* --- Byline -------------------------------------------- */ .masina-single__byline { font-size: var(--nf-fs-author); line-height: var(--nf-lh-author); font-weight: var(--nf-fw-semibold); color: var(--nf-color-text-quote); margin-bottom: var(--nf-space-24); } .masina-single__byline .author.url.fn { text-decoration: none; /* no underline per screenshots */ } /* --- Featured hero ------------------------------------- */ .masina-single__hero { margin: 0 0 var(--nf-space-32); } .masina-single__heroimg { margin: 0; } .masina-single__heroimg img { display: block; width: 100%; height: auto; /* natural ratio — crop removed 2026-07-18 (designer) */ } .masina-single__herofoot { display: flex; align-items: center; /* Podeli centers with caption */ justify-content: space-between; align-content: center; gap: var(--nf-space-16); padding-block: var(--nf-space-16); /* caption hairline — all breakpoints; sits on the hero band so it renders directly under the caption/share row everywhere */ border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); } /* Podeli stays pinned right when the caption is empty (lone flex child under space-between would otherwise sit left — e.g. Video posts). */ .masina-single__herofoot > :last-child { margin-left: auto; } .featured-caption { font-style: italic; font-size: var(--nf-fs-body-base); color: var(--nf-color-text-quote); text-align: left; } /* --- Drop Cap Style ------------- */ :root .masina-single .entry-content > p:first-of-type::first-letter, .has-drop-cap:not(:focus)::first-letter { font-size: 3.05em; /* = 64px at the 21px article body */ font-weight: 500; float: left; line-height: 0.8; margin-right: 0.25em; } /* --- In-body subheads (H2 per screenshots) ------------- */ .entry-content h2 { font-size: var(--nf-fs-h2); line-height: var(--nf-lh-h2); letter-spacing: var(--nf-track-h2); font-weight: var(--nf-fw-semibold); margin: var(--nf-space-40) 0 var(--nf-space-16); } /* --- Article body rhythm (embeds lacked the margin images have) --- */ .entry-content > *:not([class*="align"]) { margin-block: 0; } .entry-content > *:not([class*="align"]) + *:not([class*="align"]) { margin-block-start: var(--nf-space-24); } .entry-content > [class*="align"] { margin-block: var(--nf-space-24); } /* --- Tags row ------------------------------------------ */ /* Bracketed by hairlines top + bottom. Podeli aligns to the LAST tag row when tags wrap (last baseline). Tags ride the dedicated fluid token (16→18px). */ .masina-single__tagsrow { display: flex; align-items: last baseline; justify-content: space-between; gap: var(--nf-space-24); margin-top: var(--nf-space-40); padding-top: var(--nf-space-32); padding-bottom: var(--nf-space-32); border-top: var(--nf-bw-thin) solid var(--nf-border-default); border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); } /* GP out-specifies plain .tags-links (0,1,0). Scope + :root → (0,3,0). */ :root .masina-single__tagsrow .tags-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nf-space-8) var(--nf-space-16); font-family: var(--nf-font-display); } .tags-links a { font-size: var(--nf-fs-tags); line-height: var(--nf-lh-tags); font-weight: var(--nf-fw-bold); /* red underline + its 0.3em offset live in §6 (loads after this section) */ } /* --- Share pill (visual only until the share thread) --- */ .masina-single__sharebtn { display: inline-flex; align-items: center; gap: var(--nf-space-8); font-family: var(--nf-font-ui); font-size: var(--nf-fs-button); font-weight: var(--nf-fw-medium); line-height: var(--nf-lh-button); letter-spacing: var(--nf-track-button); color: var(--nf-color-text-heading); background: transparent; border: var(--nf-bw-thin) solid var(--nf-border-default); border-radius: var(--nf-radius-pill); padding: var(--nf-space-8) var(--nf-space-16); cursor: pointer; } .masina-single__sharebtn:hover, .masina-single__sharebtn:focus-visible { border-color: var(--nf-color-text-quote); } .masina-single__sharebtn svg { flex: none; } /* Analiza single — category chain blue. tag-analiza comes from post_class() on the loop wrapper (an ancestor of .masina-single, NOT on it). Scoped to __meta so Najnovije/Srodni cards under the same wrapper stay red. (0,3,1) beats §6 html.light-mode .cat-links a (0,2,2) on specificity. blue-soft does not flip in dark; #4491b7 carries over at 5.4:1. */ .tag-analiza .masina-single__meta .cat-links a, .tag-analiza .masina-single__meta .cat-links a:hover, .tag-analiza .masina-single__meta .cat-links a:focus-visible { color: var(--nf-color-brand-blue-soft); } /* --- Mobile (≤767) ------------------------------------- */ /* Flatten the two DOM branches (header vs cols>main) into one flex context so the lead moves below the hero. Final order: meta → H1 → byline → hero → lead → body → tags → Srodni → Najnovije. */ @media (max-width: 767px) { .masina-single { display: flex; flex-direction: column; } .masina-single__header, .masina-single__cols, .masina-single__main { display: contents; } .masina-single__meta { order: 1; } .masina-single__title { order: 2; } .masina-single__byline { order: 3; } .masina-single__hero { order: 4; margin-bottom: var(--nf-space-20); } .masina-single__lead { order: 5; margin: 0 0 var(--nf-space-16); padding-bottom: var(--nf-space-20); border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); } :root .masina-single .entry-content { order: 6; margin-top: 0; } .masina-single__tagsrow { order: 7; gap: var(--nf-space-16); } .masina-single__related { order: 8; } .masina-single__aside { order: 9; } /* Podeli stays top-right of the last tag row; tags wrap on the left */ .masina-single__tagsrow .tags-links { flex: 1 1 auto; min-width: 0; } .masina-single__tagsrow .masina-single__sharebtn { flex: 0 0 auto; } .featured-caption { font-size: var(--nf-fs-caption); } } /* ============================================================ 4.8 LIST MODULE — Najnovije (D5, sidebar column) [consolidated] Container-query-first. Separators = border-top on each card (immune to GB's per-item wrapper; first card's top = under-head line). Includes the ANALIZA/STAV card variant. The card styles itself from its own content: masina_lead_category_cb emits .masina-flag--{slug} in place of the category link when the post carries the tag, and :has() drives the rest. Every loop on the site inherits this — NO per-loop query changes. ============================================================ */ .masina-najnovije { container-type: inline-size; container-name: najnovije; } /* --- Section head — shared Najnovije + Srodni ------------ */ .masina-najnovije__head, .masina-related__head { display: flex; align-items: center; font-family: var(--nf-font-ui); font-size: var(--nf-fs-section-name); line-height: var(--nf-lh-section-name); font-weight: var(--nf-fw-semibold); color: var(--nf-color-text-heading); margin: 0; padding-bottom: var(--nf-space-16); } /* Brand diaeresis dots (masked SVG — crisp, flips via background-color) */ .masina-najnovije__head::after, .masina-related__head::after { content: ""; margin-left: auto; width: 1.15em; height: 0.5em; background-color: var(--nf-color-brand-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; } /* Desktop: Srodni's wide head puts dots beside the title; Najnovije keeps them far-right in the 296px sidebar (margin-left:auto above). */ @media (min-width: 1025px) { .masina-related__head::after { margin-left: var(--nf-space-12); } } @media (max-width: 1025px) { .masina-najnovije__head { padding-top: var(--nf-space-20); } } /* --- List / looper -------------------------------------- */ /* 1 col; 2×2 only when the aside goes full-width (tablet). Grid + meta-pin on the LOOPER; __list stays a plain block. */ .masina-najnovije__list { display: block; } .masina-najnovije__loop { display: grid; grid-template-columns: 1fr; } @container najnovije (min-width: 34rem) { .masina-najnovije__loop { grid-template-columns: 1fr 1fr; column-gap: var(--nf-space-32); } .masina-najnovije__loop > * { display: flex; /* the loop-item wrapper becomes a column… */ flex-direction: column; } .masina-najnovije .masina-card { display: flex; flex-direction: column; height: 100%; /* …so the card can fill the grid cell's height */ } .masina-najnovije .masina-card__meta { margin-top: auto; /* meta sinks to the bottom */ } } /* Last card bottom border */ @media (min-width: 1025px) { .masina-najnovije__loop:last-child { border-bottom: var(--nf-bw-thin) solid var(--nf-border-default); } } /* --- Card ----------------------------------------------- */ /* border-top gives between-item lines + the under-head divider */ .masina-najnovije .masina-card { padding-block: var(--nf-space-16); border-top: var(--nf-bw-thin) solid var(--nf-border-default); } .masina-card__title { font-family: var(--nf-font-display); font-size: var(--nf-fs-h4); line-height: var(--nf-lh-h4); font-weight: var(--nf-fw-semibold); margin: 0 0 var(--nf-space-8); } /* Title link fills the heading box. Inline anchors only take hover over the font content area, so the leading between lines (18px font in 25px LH) is dead space → hover drops out between lines. Applies to all card loops. */ .masina-card__title a { display: block; } .masina-card__meta { display: flex; align-items: baseline; gap: var(--nf-space-8); } .masina-najnovije .cat-links a { font-family: var(--nf-font-ui); font-size: var(--nf-fs-label-category); font-weight: var(--nf-fw-bold); letter-spacing: var(--nf-track-label-category); text-transform: uppercase; } .masina-card__date { font-family: var(--nf-font-ui); font-size: var(--nf-fs-dates); line-height: var(--nf-lh-dates); letter-spacing: var(--nf-track-dates); } :root .masina-card__date { color: #9a9a9a; } /* interim — matches the single meta date; AA open decision #1 */ .masina-card__date::before { content: "|"; margin-inline-end: var(--nf-space-8); color: var(--nf-color-text-quote); } /* Flagged cards carry dots after the category, so the date's "|" reads as a second separator. Both meta containers, all loops. */ .masina-card__meta:has([class*="masina-flag--"]) .masina-card__date::before, .masina-card__label:has([class*="masina-flag--"]) .masina-card__date::before { content: none; } .masina-flag--blog-uzivo.is-live::before { animation: nf-blink 1.6s ease-in-out infinite; /* TUNE */ } @media (prefers-reduced-motion: reduce) { .masina-flag--blog-uzivo.is-live::before { animation: none; } } /* --- ANALIZA / STAV card variant ------------------------ */ /* Flag label — blue in ALL loops (Najnovije, Srodni, home cards, archives). (0,3,1) clears §6's html.light-mode/.dark-mode .cat-links a at (0,2,2), so it holds in both modes; blue-soft does not flip in dark; #4491b7 carries over at 5.4:1. */ :root .cat-links a.masina-flag--analiza, :root .cat-links a.masina-flag--analiza:hover, :root .cat-links a.masina-flag--analiza:focus-visible { color: var(--nf-color-brand-blue-soft); } /* Flag = text + dots on one centred line. inline-flex, NOT vertical-align: middle — that aligns to x-height and sits visibly low under uppercase text (and drifts as the dot box grows). Baseline with the date still holds: an inline-flex box reports the baseline of its first item (the text). */ .masina-flag--analiza { display: inline-flex; align-items: center; gap: 0.5em; } /* Blue dots — same masked SVG as the section heads, recoloured. */ .masina-flag--analiza::after { content: ""; flex: none; width: 1.75em; height: 1em; background-color: var(--nf-color-brand-blue-soft); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; } /* Blue rule — Najnovije only. Full card height (separator to separator). A pseudo-element rather than border-left, so it doesn't corner-join with the card's border-top separator. */ .masina-najnovije .masina-card:has(.masina-flag--analiza) { position: relative; padding-left: var(--nf-space-16); } .masina-najnovije .masina-card:has(.masina-flag--analiza)::before { content: ""; position: absolute; left: 0; top: var(--nf-space-16); /* = .masina-card padding-block → stops short */ bottom: var(--nf-space-16); /* of both hairlines, spans title→meta */ width: 3px; background: var(--nf-color-brand-blue-soft); } /* Stav flag — red dots, same two-dot mask. Category keeps brand red. */ .masina-flag--stav { display: inline-flex; align-items: center; gap: 0.5em; } .masina-flag--stav::after { content: ""; flex: none; width: 1.75em; height: 1em; background-color: var(--nf-color-brand-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; } /* Blog uživo flag — pair + offset single, matching the archive title band. Split across two pseudo-elements so the last dot can animate alone: ::after carries the static pair, ::before the single, pushed to the end with order. A true three-dot wave would need real elements in the markup — the callback would have to emit them. The dot is static by default and animates only under .is-live, which masina-live-blog.js adds when the post is inside the freshness window. Client-side by design: a PHP freshness test would be frozen into page-cached HTML and keep blinking after the window closed. */ .masina-flag--blog-uzivo { display: inline-flex; align-items: center; gap: 0.5em; } .masina-flag--blog-uzivo::after { content: ""; flex: none; order: 2; width: 1.75em; /* viewBox 19x8 — same pair as Analiza/Stav */ height: 1em; background-color: var(--nf-color-brand-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 8'%3E%3Ccircle cx='4' cy='4' r='4'/%3E%3Ccircle cx='15' cy='4' r='4'/%3E%3C/svg%3E") center / contain no-repeat; } .masina-flag--blog-uzivo::before { content: ""; flex: none; order: 3; width: .75em; height: .75em; /* + the 0.5em flex gap = clearance to the pair. TUNE */ margin-inline-start: 0.35em; border-radius: 50%; background-color: var(--nf-color-brand-primary); } @keyframes nf-blink { 50% { opacity: 0.15; } } /* ============================================================ 4.9 LIST MODULE — Srodni članci (related, main column) [consolidated] Container-query-first: • narrow → vertical card, horizontal scroll, excerpt hidden, 6 cards • ≥34rem → horizontal card (image | body), stacked, excerpt, 3 cards Reuses §4.8 .masina-card__* globals + the shared head/dots (§4.8). Layout on the LOOPER (its children are the loop-items). ⚠ Query fetches 6 posts; the wide state hides items 4–6 in CSS. The count is a server-side arg and cannot vary by breakpoint. ============================================================ */ .masina-related { container-type: inline-size; container-name: related; } /* Section head — symmetric band (the shared §4.8 rule gives padding-bottom only, and this head sits directly under the tags-row hairline). */ .masina-related__head { padding-top: var(--nf-space-24); padding-bottom: var(--nf-space-4); } /* --- Looper = layout owner ------------------------------ */ /* Narrow default: horizontal scroll. Scrollbar is token-driven → flips in dark for free. NOTE: padding-bottom lives HERE, before the @container that zeroes it — container queries add no specificity, so a later unscoped rule would win and put a phantom 16px gap under the wide layout. */ .masina-related__loop { display: flex; gap: var(--nf-space-24); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--nf-space-16); scrollbar-width: thin; scrollbar-color: var(--nf-color-brand-primary) var(--nf-border-default); } .masina-related__loop::-webkit-scrollbar { height: 6px; } .masina-related__loop::-webkit-scrollbar-track { background: var(--nf-border-default); } .masina-related__loop::-webkit-scrollbar-thumb { background: var(--nf-color-brand-primary); border-radius: var(--nf-radius-pill); } .masina-related__loop > * { flex: 0 0 82%; max-width: 320px; scroll-snap-align: start; } /* --- Card — narrow default: vertical (image top), no excerpt --- */ .masina-card--related { display: block; } .masina-card__media { display: block; margin: 0; } .masina-card__media img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; } .masina-card--related .masina-card__body { display: flex; flex-direction: column; height: 100%; padding-top: var(--nf-space-12); } .masina-card--related .masina-card__meta { margin-top: auto; /* pin to bottom (see OPEN A/B in the handover) */ } .masina-card__excerpt { display: none; } /* Title → Alternative-Card-Title (overrides §4.8 h4). Negative margin-top cancels the line box's top half-leading so the optical gap above the title matches the padding below it. */ .masina-related .masina-card__title { font-size: var(--nf-fs-alt-card-title); line-height: var(--nf-lh-alt-card-title); margin-top: calc((1 - var(--nf-lh-alt-card-title)) * 0.5em); } /* Category → Label/Category (§4.8's sizing is najnovije-scoped) */ .masina-related .cat-links a { font-family: var(--nf-font-ui); font-size: var(--nf-fs-label-category); font-weight: var(--nf-fw-bold); letter-spacing: var(--nf-track-label-category); text-transform: uppercase; } /* --- Wide container (≥34rem): horizontal card, excerpt shown --- */ @container related (min-width: 34rem) { .masina-related__loop { display: block; overflow: visible; padding-bottom: 0; } .masina-related__loop > * { flex: none; max-width: none; padding-block: var(--nf-space-24); } .masina-related__loop > * + * { border-top: var(--nf-bw-thin) solid var(--nf-border-default); } /* the slider shows all 6; stacked layout shows 3 */ .masina-related__loop > *:nth-child(n + 4) { display: none; } /* align-items: stretch (not start) + the image-fill rules below let the image grow to the body's height. Kills the dead space under short images when a title runs to 4 lines — no truncation, even spacing. ⚠ Consequence: image aspect ratio now VARIES per card. Flagged to the designer (open decision). */ .masina-card--related { display: grid; grid-template-columns: 1fr 1fr; /* bias 1.1fr 1fr for a wider image */ gap: var(--nf-space-24); align-items: stretch; } /* Bottom-align the meta with the image edge. The label's line box carries the font's descent below the last baseline; the image ends on a hard edge. Pull the descent off so the two bottoms read level. Wide state only — the slider has no image edge to align to. */ .masina-card--related .masina-card__meta { line-height: 1; margin-bottom: -0.18em; /* TUNE: Rethink Sans descent */ } .masina-card--related .masina-card__body { padding-top: 0; } .masina-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: var(--nf-space-8) 0 var(--nf-space-12); font-size: var(--nf-fs-body-base); line-height: var(--nf-lh-body-base); color: var(--nf-color-text-heading); } } /* slider state only — the narrow head is a lone line and reads top-heavy */ @container related (max-width: 34rem) { .masina-related__head { padding-top: var(--nf-space-16); padding-bottom: var(--nf-space-16); } } /* ============================================================ 4.10 SHARE PANEL — single post ([masina_share]) Popover, not a modal: no focus trap. Behaviour (toggle / Escape / click-away / focus-return / copy / navigator.share) lives in the FluentSnippets JS on wp_footer (priority 20). ============================================================ */ /* CRITICAL: [hidden] is only a UA display:none — any author `display` rule on the panel beats it and the panel renders open. This must stay. */ .masina-share__panel[hidden] { display: none; } .masina-share { position: relative; display: inline-block; } /* the flex child in herofoot/tagsrow is .masina-share (the wrapper), not the button — the shortcode brings its own wrapper */ .masina-single__herofoot .masina-share, .masina-single__tagsrow .masina-share { flex: 0 0 auto; } /* --- Panel --------------------------------------------- */ /* Absolutely positioned: an `overflow: hidden/auto` on any ancestor will clip it (and its shadow) — same trap that ate the header dropdown's box-shadow. */ .masina-share__panel { position: absolute; top: calc(100% + var(--nf-space-8)); right: 0; z-index: 30; min-width: 220px; padding: var(--nf-space-8) var(--nf-space-16); background: var(--nf-surface-page); border: var(--nf-bw-thin) solid var(--nf-border-default); box-shadow: var(--nf-shadow-dropdown); } .masina-share__list { list-style: none; margin: 0; padding: 0; } .masina-share__list > li + li { border-top: var(--nf-bw-thin) solid var(--nf-border-default); } /* --- Rows (footer-social styling: Zilla italic) --------- */ .masina-share__link { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-16); width: 100%; padding: var(--nf-space-12) 0; font-family: var(--nf-font-display); font-style: italic; font-weight: var(--nf-fw-regular); font-size: var(--nf-fs-footer-social); line-height: var(--nf-lh-footer-social); color: var(--nf-color-text-heading); text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer; } .masina-share__link:hover, .masina-share__link:focus-visible { color: var(--nf-color-brand-primary); } /* --- Outbound arrow (anchors only; buttons carry no arrow) --- */ /* mirrors .masina-footer__ext-icon — same SVG, same 14px/stroke treatment */ .masina-share__ext-icon { display: inline-flex; flex-shrink: 0; color: inherit; } .masina-share__ext-icon svg { width: 14px; height: 14px; display: block; stroke: currentColor; } /* --- Button rows (Aplikacije… / Kopiraj link) ----------- */ /* GP declares its own button styling and out-specifies the plain .masina-share__link rule above — the rows are fine, only the