.elementor-412 .elementor-element.elementor-element-cd74145{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-412 .elementor-element.elementor-element-3e3a031{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-412 .elementor-element.elementor-element-1e432f4{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-412 .elementor-element.elementor-element-4577ce1{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-412 .elementor-element.elementor-element-d28791c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-cd74145 */@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================================ * STIKMA WORK - BLOG HUB (Fachbeitraege) * Verzija 1.0 * * Ide u Elementor -> Site Settings -> Custom CSS. * NE u per-widget Custom CSS, jer Elementor tamo prefiksuje selektore * i lomi @import. * * @import MORA ostati prva linija fajla. * * Sve je scope-ovano na korensku klasu .sw-blog. Jedino :root sa tokenima * je globalan, i svi tokeni nose --sw- prefiks da se ne sudare sa temom. * ========================================================================== */ /* =========================================================================== * 1. TOKENI * ========================================================================= */ :root { /* ---- Pisma ---- */ --sw-font-core: "Barlow", "Helvetica Neue", Arial, sans-serif; --sw-font-display: "Barlow Condensed", "Barlow", Arial, sans-serif; --sw-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Brend: navy ---- */ --sw-navy-900: #0E1B2A; --sw-navy-800: #152740; --sw-navy-700: #1C334C; --sw-navy-600: #243954; --sw-navy-500: #2E4763; --sw-navy-400: #435667; --sw-navy-300: #6B7C8E; --sw-navy-200: #9DACBB; --sw-navy-100: #C9D6E1; --sw-navy-050: #E8EEF4; --sw-navy-025: #F4F7FA; /* ---- Brend: cyan ---- */ --sw-cyan-700: #0076A8; --sw-cyan-600: #0091CC; --sw-cyan-500: #00AEEF; --sw-cyan-400: #3EC1F3; --sw-cyan-300: #7FD6F7; --sw-cyan-200: #B7E8FB; --sw-cyan-100: #E1F5FE; /* ---- Neutralne ---- */ --sw-white: #FFFFFF; --sw-grey-050: #F7F8F9; --sw-grey-100: #EEF0F2; --sw-grey-200: #DFE3E7; --sw-grey-300: #C4CAD1; --sw-grey-400: #9AA2AB; --sw-grey-500: #6E767F; --sw-grey-600: #4C545C; --sw-grey-700: #33393F; --sw-grey-900: #16191C; /* ---- Signalne ---- */ --sw-signal-hi-vis: #F2C200; --sw-signal-alert: #D6382B; --sw-signal-eco: #3E9C55; /* ---- Semanticki aliasi ---- */ --sw-text-strong: var(--sw-navy-700); --sw-text-body: var(--sw-grey-600); --sw-text-muted: var(--sw-grey-500); --sw-text-faint: var(--sw-grey-400); --sw-text-accent: var(--sw-cyan-600); --sw-text-on-dark: var(--sw-white); --sw-text-on-dark-muted: var(--sw-navy-100); --sw-border-subtle: var(--sw-grey-200); --sw-border-default: var(--sw-grey-300); --sw-border-on-dark: rgba(255, 255, 255, .16); --sw-action-primary: var(--sw-cyan-500); --sw-action-primary-hover: var(--sw-cyan-600); --sw-action-primary-active: var(--sw-cyan-700); --sw-focus-ring: var(--sw-cyan-500); /* ---- Tipografska skala ---- */ --sw-text-3xs: 11px; --sw-text-2xs: 12px; --sw-text-xs: 13px; --sw-text-sm: 15px; --sw-text-base: 17px; --sw-text-md: 19px; --sw-text-lg: 22px; --sw-text-xl: 27px; --sw-text-2xl: 34px; --sw-text-3xl: 44px; --sw-text-4xl: 56px; --sw-weight-light: 300; --sw-weight-regular: 400; --sw-weight-medium: 500; --sw-weight-semibold: 600; --sw-weight-bold: 700; --sw-leading-flat: 1; --sw-leading-tight: 1.08; --sw-leading-snug: 1.24; --sw-leading-normal: 1.5; --sw-leading-relaxed: 1.62; --sw-tracking-display: -.02em; --sw-tracking-tight: -.01em; --sw-tracking-wide: .04em; --sw-tracking-label: .11em; --sw-tracking-mono: .02em; /* ---- Fluidne velicine naslova ---- */ --sw-size-h1: clamp(34px, 1.35rem + 3.4vw, 56px); --sw-size-h2: clamp(28px, 1.3rem + 2.5vw, 44px); --sw-size-h3: clamp(24px, 1.25rem + 1.5vw, 34px); --sw-size-card: clamp(19px, 1.05rem + .45vw, 22px); --sw-size-lead: clamp(17px, 1rem + .25vw, 19px); --sw-size-stat: clamp(28px, 1.4rem + 1.4vw, 34px); /* ---- Spacing, 4px mreza ---- */ --sw-space-1: 4px; --sw-space-2: 8px; --sw-space-3: 12px; --sw-space-4: 16px; --sw-space-5: 20px; --sw-space-6: 24px; --sw-space-7: 32px; --sw-space-8: 40px; --sw-space-9: 48px; --sw-space-10: 64px; --sw-space-11: 80px; --sw-space-12: 104px; --sw-space-13: 136px; /* ---- Geometrija stranice ---- Bocni razmak je jedna varijabla koju koristi svaki kontejner, pa se sve sekcije poklapaju na svakoj sirini. */ --sw-page-max: 1280px; --sw-gutter: 40px; /* ---- Kontrole ---- */ --sw-control-h-sm: 34px; --sw-control-h-md: 44px; --sw-control-h-lg: 54px; --sw-control-px-sm: 16px; --sw-control-px-md: 24px; --sw-control-px-lg: 40px; /* ---- Radiusi ---- */ --sw-radius-sm: 3px; --sw-radius-md: 4px; --sw-radius-pill: 999px; /* ---- Senke ---- */ --sw-shadow-sm: 0 1px 2px rgba(14, 27, 42, .06), 0 1px 1px rgba(14, 27, 42, .04); --sw-shadow-lifted: 0 12px 28px rgba(14, 27, 42, .13); --sw-shadow-focus: 0 0 0 3px rgba(0, 174, 239, .35); /* ---- Motion ---- */ --sw-dur-instant: 80ms; --sw-dur-fast: 140ms; --sw-dur-base: 220ms; --sw-ease: cubic-bezier(.2, 0, .2, 1); --sw-press-scale: .985; /* ---- Dijagonala, potpisni brend element ---- 17.32% = tan(30deg). PAZI: procenti u clip-path su procenti SIRINE, ne visine, pa isti ugao izgleda drugacije na uskom ekranu. Zato se --sw-wedge koriguje po breakpointima nize. */ --sw-wedge: 17.32%; --sw-clip-left: polygon(var(--sw-wedge) 0, 100% 0, 100% 100%, 0 100%); /* ---- Visine medija ---- */ --sw-featured-h: 440px; } @media (max-width: 1180px) { :root { --sw-gutter: 32px; } } @media (max-width: 980px) { :root { --sw-wedge: 10%; --sw-featured-h: clamp(220px, 52vw, 320px); } } @media (max-width: 900px) { :root { --sw-gutter: 24px; } } @media (max-width: 600px) { :root { --sw-wedge: 0%; } } @media (max-width: 560px) { :root { --sw-gutter: 20px; } } /* =========================================================================== * 2. BASE - koren, kontejner, resetovi unutar scope-a * ========================================================================= */ .sw-blog, .sw-blog *, .sw-blog *::before, .sw-blog *::after { box-sizing: border-box; } .sw-blog { font-family: var(--sw-font-core); font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } .sw-blog h1, .sw-blog h2, .sw-blog h3, .sw-blog h4, .sw-blog p, .sw-blog address, .sw-blog ul, .sw-blog ol { margin: 0; padding: 0; } .sw-blog p, .sw-blog h1, .sw-blog h2, .sw-blog h3 { overflow-wrap: break-word; } .sw-blog a { text-decoration: none; border-bottom: 0; transition: color var(--sw-dur-fast) var(--sw-ease), background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog img, .sw-blog svg { display: block; max-width: 100%; } .sw-blog a:focus-visible, .sw-blog button:focus-visible { outline: 2px solid var(--sw-focus-ring); outline-offset: 2px; border-radius: 1px; } .sw-blog ::selection { background: var(--sw-cyan-200); color: var(--sw-navy-900); } /* Jedan kontejner za sve sekcije. Sirina NIKAD ne dolazi iz Elementora. */ .sw-blog .sw-container { width: 100%; max-width: var(--sw-page-max); margin-inline: auto; padding-inline: var(--sw-gutter); } /* Grid i flex deca ne smeju da rastu po sadrzaju. */ .sw-blog .sw-hero__grid > *, .sw-blog .sw-hero__stats > *, .sw-blog .sw-featured__grid > *, .sw-blog .sw-cards > *, .sw-blog .sw-cta__row > *, .sw-blog .sw-hero__body, .sw-blog .sw-hero__stat, .sw-blog .sw-cta__body, .sw-blog .sw-card__body { min-width: 0; } .sw-blog .sw-icon { flex: none; } /* Placeholder koji se vidi samo u Elementor builderu. */ .sw-blog.sw-placeholder { padding-block: var(--sw-space-7); background: repeating-linear-gradient(-60deg, var(--sw-navy-025) 0 12px, var(--sw-white) 12px 24px); border: 1px dashed var(--sw-navy-200); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-500); } /* =========================================================================== * 3. DELJENE KOMPONENTE * ========================================================================= */ /* ---- Eyebrow ---- */ .sw-blog .sw-eyebrow { font-family: var(--sw-font-core); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; line-height: var(--sw-leading-normal); } .sw-blog .sw-eyebrow--accent { color: var(--sw-cyan-600); } .sw-blog .sw-eyebrow--light { color: var(--sw-cyan-400); } /* ---- Dugmad ---- */ .sw-blog .sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-3); font-family: var(--sw-font-core); font-weight: var(--sw-weight-semibold); line-height: 1; letter-spacing: var(--sw-tracking-label); text-transform: uppercase; border: 2px solid transparent; border-radius: var(--sw-radius-sm); cursor: pointer; white-space: nowrap; text-align: center; transition: background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease), transform var(--sw-dur-instant) var(--sw-ease); } .sw-blog .sw-btn:active { transform: scale(var(--sw-press-scale)); } .sw-blog .sw-btn--sm { height: var(--sw-control-h-sm); padding-inline: var(--sw-control-px-sm); font-size: var(--sw-text-2xs); } .sw-blog .sw-btn--md { height: var(--sw-control-h-md); padding-inline: var(--sw-control-px-md); font-size: var(--sw-text-xs); } .sw-blog .sw-btn--lg { height: var(--sw-control-h-lg); padding-inline: var(--sw-control-px-lg); font-size: var(--sw-text-sm); } .sw-blog .sw-btn--primary { background: var(--sw-action-primary); border-color: var(--sw-action-primary); color: var(--sw-white); } .sw-blog .sw-btn--primary:hover { background: var(--sw-action-primary-hover); border-color: var(--sw-action-primary-hover); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light { background: transparent; border-color: var(--sw-white); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light:hover { background: var(--sw-white); border-color: var(--sw-white); color: var(--sw-navy-700); } /* ---- Meta red sa separatorima ---- Separator je poseban span koji PHP ubacuje samo izmedju postojecih stavki, pa nikad ne visi na kraju reda. */ .sw-blog .sw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-5); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); line-height: var(--sw-leading-normal); } .sw-blog .sw-meta__item { white-space: nowrap; } .sw-blog .sw-meta__sep { flex: none; width: 1px; height: 12px; background: var(--sw-grey-300); } /* ---- Pilule filtera ---- */ .sw-blog .sw-pill { display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-pill); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; white-space: nowrap; color: var(--sw-grey-600); background: transparent; } .sw-blog .sw-pill:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pill.is-active { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } /* =========================================================================== * 4. BREADCRUMB * ========================================================================= */ .sw-blog.sw-crumbs { background: var(--sw-white); padding-top: var(--sw-space-6); } .sw-blog .sw-crumbs__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-3); font-size: var(--sw-text-2xs); color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a { color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a:hover { color: var(--sw-navy-700); } .sw-blog .sw-crumbs__arrow { color: var(--sw-grey-300); } .sw-blog .sw-crumbs__now { color: var(--sw-navy-700); } /* =========================================================================== * 5. HERO * ========================================================================= */ .sw-blog.sw-hero { background: var(--sw-white); } .sw-blog .sw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sw-space-10); align-items: end; padding-block: var(--sw-space-9) var(--sw-space-10); } .sw-blog .sw-hero__title { margin-top: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h1); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); text-wrap: balance; } .sw-blog .sw-hero__lead { margin-top: var(--sw-space-6); max-width: 60ch; font-size: var(--sw-size-lead); line-height: var(--sw-leading-relaxed); color: var(--sw-grey-600); } .sw-blog .sw-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-6); padding-bottom: var(--sw-space-2); } .sw-blog .sw-hero__stat-value { font-family: var(--sw-font-display); font-size: var(--sw-size-stat); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-flat); color: var(--sw-navy-700); } .sw-blog .sw-hero__stat-label { margin-top: var(--sw-space-2); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-text-muted); } @media (max-width: 980px) { .sw-blog .sw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-8); align-items: start; padding-block: var(--sw-space-8) var(--sw-space-9); } .sw-blog .sw-hero__stats { padding-bottom: 0; padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); } } /* =========================================================================== * 6. PREPORUCENI POST * ========================================================================= */ .sw-blog.sw-featured { background: var(--sw-navy-025); border-top: 1px solid var(--sw-grey-200); border-bottom: 1px solid var(--sw-grey-200); } .sw-blog .sw-featured__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sw-space-10); align-items: center; } .sw-blog .sw-featured__body { padding-block: var(--sw-space-11); } .sw-blog .sw-featured__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-4); margin-bottom: var(--sw-space-6); } .sw-blog .sw-featured__badge { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; background: var(--sw-cyan-500); color: var(--sw-white); font-size: var(--sw-text-3xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; } .sw-blog .sw-featured__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-featured__title { margin-bottom: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h2); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); text-wrap: balance; } .sw-blog .sw-featured__title a { color: var(--sw-navy-700); } .sw-blog .sw-featured__title a:hover { color: var(--sw-cyan-600); } .sw-blog .sw-featured__excerpt { margin-bottom: var(--sw-space-6); max-width: 62ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-featured__meta { margin-bottom: var(--sw-space-7); } .sw-blog .sw-featured__media { position: relative; align-self: stretch; min-height: var(--sw-featured-h); } .sw-blog .sw-featured__wedge { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sw-navy-800); clip-path: var(--sw-clip-left); -webkit-clip-path: var(--sw-clip-left); } .sw-blog .sw-featured__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-featured__wedge--prazan { display: flex; align-items: center; justify-content: center; font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-200); } @media (max-width: 980px) { .sw-blog .sw-featured__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .sw-blog .sw-featured__body { order: 2; padding-block: var(--sw-space-9) var(--sw-space-10); } /* Slika ide preko cele sirine ekrana. Negativna margina tacno ponisti bocni razmak kontejnera, pa nema horizontalnog skrola. */ .sw-blog .sw-featured__media { order: 1; min-height: 0; height: var(--sw-featured-h); margin-inline: calc(var(--sw-gutter) * -1); } } /* =========================================================================== * 7. LISTA POSTOVA * ========================================================================= */ /* Sav vertikalni ritam sekcije je na njoj samoj, ne na prethodnoj. Zato razmak ostaje tacan i kad se preporuceni post ne prikazuje. */ .sw-blog.sw-list { background: var(--sw-white); padding-block: var(--sw-space-11) var(--sw-space-12); } .sw-blog .sw-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sw-space-8); flex-wrap: wrap; padding-bottom: var(--sw-space-5); border-bottom: 1px solid var(--sw-grey-200); margin-bottom: var(--sw-space-8); } .sw-blog .sw-list__title { font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); } .sw-blog .sw-list__filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-2); } .sw-blog .sw-list__prazno { padding-block: var(--sw-space-9); font-size: var(--sw-size-lead); color: var(--sw-text-muted); } /* ---- Grid kartica ---- */ .sw-blog .sw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-7); margin-bottom: var(--sw-space-10); } .sw-blog .sw-card { display: flex; flex-direction: column; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-md); background: var(--sw-white); box-shadow: var(--sw-shadow-sm); overflow: hidden; transition: transform var(--sw-dur-fast) var(--sw-ease), box-shadow var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within { transform: translateY(-2px); box-shadow: var(--sw-shadow-lifted); border-color: var(--sw-navy-200); } .sw-blog .sw-card:hover .sw-card__title a, .sw-blog .sw-card:focus-within .sw-card__title a { color: var(--sw-cyan-600); } .sw-blog .sw-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sw-navy-050); overflow: hidden; } .sw-blog .sw-card__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-card__body { display: flex; flex-direction: column; gap: var(--sw-space-3); padding: var(--sw-space-6); flex: 1 1 auto; } .sw-blog .sw-card__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-3xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-cyan-700); line-height: var(--sw-leading-normal); } .sw-blog .sw-card__title { font-family: var(--sw-font-display); font-size: var(--sw-size-card); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); } .sw-blog .sw-card__title a { color: var(--sw-navy-700); } .sw-blog .sw-card__excerpt { font-size: var(--sw-text-sm); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-card__meta { margin-top: auto; padding-top: var(--sw-space-4); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); font-size: var(--sw-text-3xs); } .sw-blog .sw-card__meta .sw-meta__sep { height: 10px; } @media (max-width: 1080px) { .sw-blog .sw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sw-blog.sw-list { padding-block: var(--sw-space-10) var(--sw-space-11); } .sw-blog .sw-list__head { align-items: flex-start; flex-direction: column; gap: var(--sw-space-5); } } @media (max-width: 680px) { .sw-blog .sw-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-6); } } /* =========================================================================== * 8. PAGINACIJA * ========================================================================= */ .sw-blog .sw-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sw-space-6); padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); } .sw-blog .sw-pager__count { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-pager__links { display: flex; align-items: center; gap: var(--sw-space-2); } .sw-blog .sw-pager__num, .sw-blog .sw-pager__step { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--sw-grey-200); font-size: var(--sw-text-xs); font-weight: var(--sw-weight-semibold); color: var(--sw-grey-600); } .sw-blog .sw-pager__step { color: var(--sw-navy-700); } .sw-blog a.sw-pager__num:hover, .sw-blog a.sw-pager__step:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pager__num.is-current { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } .sw-blog .sw-pager__step.is-disabled { color: var(--sw-grey-400); cursor: not-allowed; } .sw-blog .sw-pager__gap { padding-inline: var(--sw-space-1); font-size: var(--sw-text-xs); color: var(--sw-grey-400); } @media (max-width: 560px) { .sw-blog .sw-pager { flex-direction: column; align-items: flex-start; gap: var(--sw-space-4); } } /* =========================================================================== * 9. CTA TRAKA * ========================================================================= */ .sw-blog.sw-cta { background: var(--sw-navy-700); border-top: 6px solid var(--sw-cyan-500); } .sw-blog .sw-cta__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-10); padding-block: var(--sw-space-11); } .sw-blog .sw-cta__body { flex: 1 1 420px; } .sw-blog .sw-cta__title { margin-block: var(--sw-space-4); font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); letter-spacing: var(--sw-tracking-display); color: var(--sw-white); text-wrap: balance; } .sw-blog .sw-cta__text { max-width: 60ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-navy-100); } .sw-blog .sw-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sw-space-4); } @media (max-width: 900px) { .sw-blog .sw-cta__row { gap: var(--sw-space-8); padding-block: var(--sw-space-10); } } @media (max-width: 560px) { .sw-blog .sw-cta__actions { width: 100%; } .sw-blog .sw-cta__actions .sw-btn { flex: 1 1 100%; } } /* =========================================================================== * 10. DIJAGNOSTIKA * ========================================================================= */ .sw-blog.sw-status { padding-block: var(--sw-space-6); } .sw-blog .sw-status__ok { display: inline-block; margin-bottom: var(--sw-space-4); padding: 6px 12px; background: var(--sw-signal-eco); color: var(--sw-white); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; } .sw-blog .sw-status__list { list-style: none; display: flex; flex-direction: column; gap: var(--sw-space-2); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-navy-700); overflow-wrap: anywhere; } .sw-blog .sw-status__list strong { color: var(--sw-navy-900); } .sw-blog .sw-status__warn { padding: 8px 12px; background: var(--sw-signal-alert); color: var(--sw-white); } .sw-blog .sw-status__warn strong { color: var(--sw-white); } /* =========================================================================== * 11. GLOBALNI RESPONSIVE DETALJI * ========================================================================= */ /* Kad se meta red prelomi na telefonu, vertikalna crtica postaje tacka. */ @media (max-width: 560px) { .sw-blog .sw-meta { gap: var(--sw-space-3); } .sw-blog .sw-meta__sep, .sw-blog .sw-card__meta .sw-meta__sep { width: 3px; height: 3px; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .sw-blog *, .sw-blog *::before, .sw-blog *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within, .sw-blog .sw-btn:active { transform: none; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3e3a031 */@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================================ * STIKMA WORK - BLOG HUB (Fachbeitraege) * Verzija 1.0 * * Ide u Elementor -> Site Settings -> Custom CSS. * NE u per-widget Custom CSS, jer Elementor tamo prefiksuje selektore * i lomi @import. * * @import MORA ostati prva linija fajla. * * Sve je scope-ovano na korensku klasu .sw-blog. Jedino :root sa tokenima * je globalan, i svi tokeni nose --sw- prefiks da se ne sudare sa temom. * ========================================================================== */ /* =========================================================================== * 1. TOKENI * ========================================================================= */ :root { /* ---- Pisma ---- */ --sw-font-core: "Barlow", "Helvetica Neue", Arial, sans-serif; --sw-font-display: "Barlow Condensed", "Barlow", Arial, sans-serif; --sw-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Brend: navy ---- */ --sw-navy-900: #0E1B2A; --sw-navy-800: #152740; --sw-navy-700: #1C334C; --sw-navy-600: #243954; --sw-navy-500: #2E4763; --sw-navy-400: #435667; --sw-navy-300: #6B7C8E; --sw-navy-200: #9DACBB; --sw-navy-100: #C9D6E1; --sw-navy-050: #E8EEF4; --sw-navy-025: #F4F7FA; /* ---- Brend: cyan ---- */ --sw-cyan-700: #0076A8; --sw-cyan-600: #0091CC; --sw-cyan-500: #00AEEF; --sw-cyan-400: #3EC1F3; --sw-cyan-300: #7FD6F7; --sw-cyan-200: #B7E8FB; --sw-cyan-100: #E1F5FE; /* ---- Neutralne ---- */ --sw-white: #FFFFFF; --sw-grey-050: #F7F8F9; --sw-grey-100: #EEF0F2; --sw-grey-200: #DFE3E7; --sw-grey-300: #C4CAD1; --sw-grey-400: #9AA2AB; --sw-grey-500: #6E767F; --sw-grey-600: #4C545C; --sw-grey-700: #33393F; --sw-grey-900: #16191C; /* ---- Signalne ---- */ --sw-signal-hi-vis: #F2C200; --sw-signal-alert: #D6382B; --sw-signal-eco: #3E9C55; /* ---- Semanticki aliasi ---- */ --sw-text-strong: var(--sw-navy-700); --sw-text-body: var(--sw-grey-600); --sw-text-muted: var(--sw-grey-500); --sw-text-faint: var(--sw-grey-400); --sw-text-accent: var(--sw-cyan-600); --sw-text-on-dark: var(--sw-white); --sw-text-on-dark-muted: var(--sw-navy-100); --sw-border-subtle: var(--sw-grey-200); --sw-border-default: var(--sw-grey-300); --sw-border-on-dark: rgba(255, 255, 255, .16); --sw-action-primary: var(--sw-cyan-500); --sw-action-primary-hover: var(--sw-cyan-600); --sw-action-primary-active: var(--sw-cyan-700); --sw-focus-ring: var(--sw-cyan-500); /* ---- Tipografska skala ---- */ --sw-text-3xs: 11px; --sw-text-2xs: 12px; --sw-text-xs: 13px; --sw-text-sm: 15px; --sw-text-base: 17px; --sw-text-md: 19px; --sw-text-lg: 22px; --sw-text-xl: 27px; --sw-text-2xl: 34px; --sw-text-3xl: 44px; --sw-text-4xl: 56px; --sw-weight-light: 300; --sw-weight-regular: 400; --sw-weight-medium: 500; --sw-weight-semibold: 600; --sw-weight-bold: 700; --sw-leading-flat: 1; --sw-leading-tight: 1.08; --sw-leading-snug: 1.24; --sw-leading-normal: 1.5; --sw-leading-relaxed: 1.62; --sw-tracking-display: -.02em; --sw-tracking-tight: -.01em; --sw-tracking-wide: .04em; --sw-tracking-label: .11em; --sw-tracking-mono: .02em; /* ---- Fluidne velicine naslova ---- */ --sw-size-h1: clamp(34px, 1.35rem + 3.4vw, 56px); --sw-size-h2: clamp(28px, 1.3rem + 2.5vw, 44px); --sw-size-h3: clamp(24px, 1.25rem + 1.5vw, 34px); --sw-size-card: clamp(19px, 1.05rem + .45vw, 22px); --sw-size-lead: clamp(17px, 1rem + .25vw, 19px); --sw-size-stat: clamp(28px, 1.4rem + 1.4vw, 34px); /* ---- Spacing, 4px mreza ---- */ --sw-space-1: 4px; --sw-space-2: 8px; --sw-space-3: 12px; --sw-space-4: 16px; --sw-space-5: 20px; --sw-space-6: 24px; --sw-space-7: 32px; --sw-space-8: 40px; --sw-space-9: 48px; --sw-space-10: 64px; --sw-space-11: 80px; --sw-space-12: 104px; --sw-space-13: 136px; /* ---- Geometrija stranice ---- Bocni razmak je jedna varijabla koju koristi svaki kontejner, pa se sve sekcije poklapaju na svakoj sirini. */ --sw-page-max: 1280px; --sw-gutter: 40px; /* ---- Kontrole ---- */ --sw-control-h-sm: 34px; --sw-control-h-md: 44px; --sw-control-h-lg: 54px; --sw-control-px-sm: 16px; --sw-control-px-md: 24px; --sw-control-px-lg: 40px; /* ---- Radiusi ---- */ --sw-radius-sm: 3px; --sw-radius-md: 4px; --sw-radius-pill: 999px; /* ---- Senke ---- */ --sw-shadow-sm: 0 1px 2px rgba(14, 27, 42, .06), 0 1px 1px rgba(14, 27, 42, .04); --sw-shadow-lifted: 0 12px 28px rgba(14, 27, 42, .13); --sw-shadow-focus: 0 0 0 3px rgba(0, 174, 239, .35); /* ---- Motion ---- */ --sw-dur-instant: 80ms; --sw-dur-fast: 140ms; --sw-dur-base: 220ms; --sw-ease: cubic-bezier(.2, 0, .2, 1); --sw-press-scale: .985; /* ---- Dijagonala, potpisni brend element ---- 17.32% = tan(30deg). PAZI: procenti u clip-path su procenti SIRINE, ne visine, pa isti ugao izgleda drugacije na uskom ekranu. Zato se --sw-wedge koriguje po breakpointima nize. */ --sw-wedge: 17.32%; --sw-clip-left: polygon(var(--sw-wedge) 0, 100% 0, 100% 100%, 0 100%); /* ---- Visine medija ---- */ --sw-featured-h: 440px; } @media (max-width: 1180px) { :root { --sw-gutter: 32px; } } @media (max-width: 980px) { :root { --sw-wedge: 10%; --sw-featured-h: clamp(220px, 52vw, 320px); } } @media (max-width: 900px) { :root { --sw-gutter: 24px; } } @media (max-width: 600px) { :root { --sw-wedge: 0%; } } @media (max-width: 560px) { :root { --sw-gutter: 20px; } } /* =========================================================================== * 2. BASE - koren, kontejner, resetovi unutar scope-a * ========================================================================= */ .sw-blog, .sw-blog *, .sw-blog *::before, .sw-blog *::after { box-sizing: border-box; } .sw-blog { font-family: var(--sw-font-core); font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } .sw-blog h1, .sw-blog h2, .sw-blog h3, .sw-blog h4, .sw-blog p, .sw-blog address, .sw-blog ul, .sw-blog ol { margin: 0; padding: 0; } .sw-blog p, .sw-blog h1, .sw-blog h2, .sw-blog h3 { overflow-wrap: break-word; } .sw-blog a { text-decoration: none; border-bottom: 0; transition: color var(--sw-dur-fast) var(--sw-ease), background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog img, .sw-blog svg { display: block; max-width: 100%; } .sw-blog a:focus-visible, .sw-blog button:focus-visible { outline: 2px solid var(--sw-focus-ring); outline-offset: 2px; border-radius: 1px; } .sw-blog ::selection { background: var(--sw-cyan-200); color: var(--sw-navy-900); } /* Jedan kontejner za sve sekcije. Sirina NIKAD ne dolazi iz Elementora. */ .sw-blog .sw-container { width: 100%; max-width: var(--sw-page-max); margin-inline: auto; padding-inline: var(--sw-gutter); } /* Grid i flex deca ne smeju da rastu po sadrzaju. */ .sw-blog .sw-hero__grid > *, .sw-blog .sw-hero__stats > *, .sw-blog .sw-featured__grid > *, .sw-blog .sw-cards > *, .sw-blog .sw-cta__row > *, .sw-blog .sw-hero__body, .sw-blog .sw-hero__stat, .sw-blog .sw-cta__body, .sw-blog .sw-card__body { min-width: 0; } .sw-blog .sw-icon { flex: none; } /* Placeholder koji se vidi samo u Elementor builderu. */ .sw-blog.sw-placeholder { padding-block: var(--sw-space-7); background: repeating-linear-gradient(-60deg, var(--sw-navy-025) 0 12px, var(--sw-white) 12px 24px); border: 1px dashed var(--sw-navy-200); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-500); } /* =========================================================================== * 3. DELJENE KOMPONENTE * ========================================================================= */ /* ---- Eyebrow ---- */ .sw-blog .sw-eyebrow { font-family: var(--sw-font-core); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; line-height: var(--sw-leading-normal); } .sw-blog .sw-eyebrow--accent { color: var(--sw-cyan-600); } .sw-blog .sw-eyebrow--light { color: var(--sw-cyan-400); } /* ---- Dugmad ---- */ .sw-blog .sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-3); font-family: var(--sw-font-core); font-weight: var(--sw-weight-semibold); line-height: 1; letter-spacing: var(--sw-tracking-label); text-transform: uppercase; border: 2px solid transparent; border-radius: var(--sw-radius-sm); cursor: pointer; white-space: nowrap; text-align: center; transition: background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease), transform var(--sw-dur-instant) var(--sw-ease); } .sw-blog .sw-btn:active { transform: scale(var(--sw-press-scale)); } .sw-blog .sw-btn--sm { height: var(--sw-control-h-sm); padding-inline: var(--sw-control-px-sm); font-size: var(--sw-text-2xs); } .sw-blog .sw-btn--md { height: var(--sw-control-h-md); padding-inline: var(--sw-control-px-md); font-size: var(--sw-text-xs); } .sw-blog .sw-btn--lg { height: var(--sw-control-h-lg); padding-inline: var(--sw-control-px-lg); font-size: var(--sw-text-sm); } .sw-blog .sw-btn--primary { background: var(--sw-action-primary); border-color: var(--sw-action-primary); color: var(--sw-white); } .sw-blog .sw-btn--primary:hover { background: var(--sw-action-primary-hover); border-color: var(--sw-action-primary-hover); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light { background: transparent; border-color: var(--sw-white); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light:hover { background: var(--sw-white); border-color: var(--sw-white); color: var(--sw-navy-700); } /* ---- Meta red sa separatorima ---- Separator je poseban span koji PHP ubacuje samo izmedju postojecih stavki, pa nikad ne visi na kraju reda. */ .sw-blog .sw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-5); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); line-height: var(--sw-leading-normal); } .sw-blog .sw-meta__item { white-space: nowrap; } .sw-blog .sw-meta__sep { flex: none; width: 1px; height: 12px; background: var(--sw-grey-300); } /* ---- Pilule filtera ---- */ .sw-blog .sw-pill { display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-pill); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; white-space: nowrap; color: var(--sw-grey-600); background: transparent; } .sw-blog .sw-pill:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pill.is-active { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } /* =========================================================================== * 4. BREADCRUMB * ========================================================================= */ .sw-blog.sw-crumbs { background: var(--sw-white); padding-top: var(--sw-space-6); } .sw-blog .sw-crumbs__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-3); font-size: var(--sw-text-2xs); color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a { color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a:hover { color: var(--sw-navy-700); } .sw-blog .sw-crumbs__arrow { color: var(--sw-grey-300); } .sw-blog .sw-crumbs__now { color: var(--sw-navy-700); } /* =========================================================================== * 5. HERO * ========================================================================= */ .sw-blog.sw-hero { background: var(--sw-white); } .sw-blog .sw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sw-space-10); align-items: end; padding-block: var(--sw-space-9) var(--sw-space-10); } .sw-blog .sw-hero__title { margin-top: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h1); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); text-wrap: balance; } .sw-blog .sw-hero__lead { margin-top: var(--sw-space-6); max-width: 60ch; font-size: var(--sw-size-lead); line-height: var(--sw-leading-relaxed); color: var(--sw-grey-600); } .sw-blog .sw-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-6); padding-bottom: var(--sw-space-2); } .sw-blog .sw-hero__stat-value { font-family: var(--sw-font-display); font-size: var(--sw-size-stat); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-flat); color: var(--sw-navy-700); } .sw-blog .sw-hero__stat-label { margin-top: var(--sw-space-2); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-text-muted); } @media (max-width: 980px) { .sw-blog .sw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-8); align-items: start; padding-block: var(--sw-space-8) var(--sw-space-9); } .sw-blog .sw-hero__stats { padding-bottom: 0; padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); } } /* =========================================================================== * 6. PREPORUCENI POST * ========================================================================= */ .sw-blog.sw-featured { background: var(--sw-navy-025); border-top: 1px solid var(--sw-grey-200); border-bottom: 1px solid var(--sw-grey-200); } .sw-blog .sw-featured__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sw-space-10); align-items: center; } .sw-blog .sw-featured__body { padding-block: var(--sw-space-11); } .sw-blog .sw-featured__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-4); margin-bottom: var(--sw-space-6); } .sw-blog .sw-featured__badge { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; background: var(--sw-cyan-500); color: var(--sw-white); font-size: var(--sw-text-3xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; } .sw-blog .sw-featured__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-featured__title { margin-bottom: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h2); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); text-wrap: balance; } .sw-blog .sw-featured__title a { color: var(--sw-navy-700); } .sw-blog .sw-featured__title a:hover { color: var(--sw-cyan-600); } .sw-blog .sw-featured__excerpt { margin-bottom: var(--sw-space-6); max-width: 62ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-featured__meta { margin-bottom: var(--sw-space-7); } .sw-blog .sw-featured__media { position: relative; align-self: stretch; min-height: var(--sw-featured-h); } .sw-blog .sw-featured__wedge { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sw-navy-800); clip-path: var(--sw-clip-left); -webkit-clip-path: var(--sw-clip-left); } .sw-blog .sw-featured__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-featured__wedge--prazan { display: flex; align-items: center; justify-content: center; font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-200); } @media (max-width: 980px) { .sw-blog .sw-featured__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .sw-blog .sw-featured__body { order: 2; padding-block: var(--sw-space-9) var(--sw-space-10); } /* Slika ide preko cele sirine ekrana. Negativna margina tacno ponisti bocni razmak kontejnera, pa nema horizontalnog skrola. */ .sw-blog .sw-featured__media { order: 1; min-height: 0; height: var(--sw-featured-h); margin-inline: calc(var(--sw-gutter) * -1); } } /* =========================================================================== * 7. LISTA POSTOVA * ========================================================================= */ /* Sav vertikalni ritam sekcije je na njoj samoj, ne na prethodnoj. Zato razmak ostaje tacan i kad se preporuceni post ne prikazuje. */ .sw-blog.sw-list { background: var(--sw-white); padding-block: var(--sw-space-11) var(--sw-space-12); } .sw-blog .sw-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sw-space-8); flex-wrap: wrap; padding-bottom: var(--sw-space-5); border-bottom: 1px solid var(--sw-grey-200); margin-bottom: var(--sw-space-8); } .sw-blog .sw-list__title { font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); } .sw-blog .sw-list__filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-2); } .sw-blog .sw-list__prazno { padding-block: var(--sw-space-9); font-size: var(--sw-size-lead); color: var(--sw-text-muted); } /* ---- Grid kartica ---- */ .sw-blog .sw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-7); margin-bottom: var(--sw-space-10); } .sw-blog .sw-card { display: flex; flex-direction: column; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-md); background: var(--sw-white); box-shadow: var(--sw-shadow-sm); overflow: hidden; transition: transform var(--sw-dur-fast) var(--sw-ease), box-shadow var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within { transform: translateY(-2px); box-shadow: var(--sw-shadow-lifted); border-color: var(--sw-navy-200); } .sw-blog .sw-card:hover .sw-card__title a, .sw-blog .sw-card:focus-within .sw-card__title a { color: var(--sw-cyan-600); } .sw-blog .sw-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sw-navy-050); overflow: hidden; } .sw-blog .sw-card__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-card__body { display: flex; flex-direction: column; gap: var(--sw-space-3); padding: var(--sw-space-6); flex: 1 1 auto; } .sw-blog .sw-card__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-3xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-cyan-700); line-height: var(--sw-leading-normal); } .sw-blog .sw-card__title { font-family: var(--sw-font-display); font-size: var(--sw-size-card); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); } .sw-blog .sw-card__title a { color: var(--sw-navy-700); } .sw-blog .sw-card__excerpt { font-size: var(--sw-text-sm); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-card__meta { margin-top: auto; padding-top: var(--sw-space-4); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); font-size: var(--sw-text-3xs); } .sw-blog .sw-card__meta .sw-meta__sep { height: 10px; } @media (max-width: 1080px) { .sw-blog .sw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sw-blog.sw-list { padding-block: var(--sw-space-10) var(--sw-space-11); } .sw-blog .sw-list__head { align-items: flex-start; flex-direction: column; gap: var(--sw-space-5); } } @media (max-width: 680px) { .sw-blog .sw-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-6); } } /* =========================================================================== * 8. PAGINACIJA * ========================================================================= */ .sw-blog .sw-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sw-space-6); padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); } .sw-blog .sw-pager__count { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-pager__links { display: flex; align-items: center; gap: var(--sw-space-2); } .sw-blog .sw-pager__num, .sw-blog .sw-pager__step { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--sw-grey-200); font-size: var(--sw-text-xs); font-weight: var(--sw-weight-semibold); color: var(--sw-grey-600); } .sw-blog .sw-pager__step { color: var(--sw-navy-700); } .sw-blog a.sw-pager__num:hover, .sw-blog a.sw-pager__step:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pager__num.is-current { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } .sw-blog .sw-pager__step.is-disabled { color: var(--sw-grey-400); cursor: not-allowed; } .sw-blog .sw-pager__gap { padding-inline: var(--sw-space-1); font-size: var(--sw-text-xs); color: var(--sw-grey-400); } @media (max-width: 560px) { .sw-blog .sw-pager { flex-direction: column; align-items: flex-start; gap: var(--sw-space-4); } } /* =========================================================================== * 9. CTA TRAKA * ========================================================================= */ .sw-blog.sw-cta { background: var(--sw-navy-700); border-top: 6px solid var(--sw-cyan-500); } .sw-blog .sw-cta__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-10); padding-block: var(--sw-space-11); } .sw-blog .sw-cta__body { flex: 1 1 420px; } .sw-blog .sw-cta__title { margin-block: var(--sw-space-4); font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); letter-spacing: var(--sw-tracking-display); color: var(--sw-white); text-wrap: balance; } .sw-blog .sw-cta__text { max-width: 60ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-navy-100); } .sw-blog .sw-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sw-space-4); } @media (max-width: 900px) { .sw-blog .sw-cta__row { gap: var(--sw-space-8); padding-block: var(--sw-space-10); } } @media (max-width: 560px) { .sw-blog .sw-cta__actions { width: 100%; } .sw-blog .sw-cta__actions .sw-btn { flex: 1 1 100%; } } /* =========================================================================== * 10. DIJAGNOSTIKA * ========================================================================= */ .sw-blog.sw-status { padding-block: var(--sw-space-6); } .sw-blog .sw-status__ok { display: inline-block; margin-bottom: var(--sw-space-4); padding: 6px 12px; background: var(--sw-signal-eco); color: var(--sw-white); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; } .sw-blog .sw-status__list { list-style: none; display: flex; flex-direction: column; gap: var(--sw-space-2); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-navy-700); overflow-wrap: anywhere; } .sw-blog .sw-status__list strong { color: var(--sw-navy-900); } /* =========================================================================== * 11. GLOBALNI RESPONSIVE DETALJI * ========================================================================= */ /* Kad se meta red prelomi na telefonu, vertikalna crtica postaje tacka. */ @media (max-width: 560px) { .sw-blog .sw-meta { gap: var(--sw-space-3); } .sw-blog .sw-meta__sep, .sw-blog .sw-card__meta .sw-meta__sep { width: 3px; height: 3px; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .sw-blog *, .sw-blog *::before, .sw-blog *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within, .sw-blog .sw-btn:active { transform: none; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1e432f4 */@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================================ * STIKMA WORK - BLOG HUB (Fachbeitraege) * Verzija 1.0 * * Ide u Elementor -> Site Settings -> Custom CSS. * NE u per-widget Custom CSS, jer Elementor tamo prefiksuje selektore * i lomi @import. * * @import MORA ostati prva linija fajla. * * Sve je scope-ovano na korensku klasu .sw-blog. Jedino :root sa tokenima * je globalan, i svi tokeni nose --sw- prefiks da se ne sudare sa temom. * ========================================================================== */ /* =========================================================================== * 1. TOKENI * ========================================================================= */ :root { /* ---- Pisma ---- */ --sw-font-core: "Barlow", "Helvetica Neue", Arial, sans-serif; --sw-font-display: "Barlow Condensed", "Barlow", Arial, sans-serif; --sw-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Brend: navy ---- */ --sw-navy-900: #0E1B2A; --sw-navy-800: #152740; --sw-navy-700: #1C334C; --sw-navy-600: #243954; --sw-navy-500: #2E4763; --sw-navy-400: #435667; --sw-navy-300: #6B7C8E; --sw-navy-200: #9DACBB; --sw-navy-100: #C9D6E1; --sw-navy-050: #E8EEF4; --sw-navy-025: #F4F7FA; /* ---- Brend: cyan ---- */ --sw-cyan-700: #0076A8; --sw-cyan-600: #0091CC; --sw-cyan-500: #00AEEF; --sw-cyan-400: #3EC1F3; --sw-cyan-300: #7FD6F7; --sw-cyan-200: #B7E8FB; --sw-cyan-100: #E1F5FE; /* ---- Neutralne ---- */ --sw-white: #FFFFFF; --sw-grey-050: #F7F8F9; --sw-grey-100: #EEF0F2; --sw-grey-200: #DFE3E7; --sw-grey-300: #C4CAD1; --sw-grey-400: #9AA2AB; --sw-grey-500: #6E767F; --sw-grey-600: #4C545C; --sw-grey-700: #33393F; --sw-grey-900: #16191C; /* ---- Signalne ---- */ --sw-signal-hi-vis: #F2C200; --sw-signal-alert: #D6382B; --sw-signal-eco: #3E9C55; /* ---- Semanticki aliasi ---- */ --sw-text-strong: var(--sw-navy-700); --sw-text-body: var(--sw-grey-600); --sw-text-muted: var(--sw-grey-500); --sw-text-faint: var(--sw-grey-400); --sw-text-accent: var(--sw-cyan-600); --sw-text-on-dark: var(--sw-white); --sw-text-on-dark-muted: var(--sw-navy-100); --sw-border-subtle: var(--sw-grey-200); --sw-border-default: var(--sw-grey-300); --sw-border-on-dark: rgba(255, 255, 255, .16); --sw-action-primary: var(--sw-cyan-500); --sw-action-primary-hover: var(--sw-cyan-600); --sw-action-primary-active: var(--sw-cyan-700); --sw-focus-ring: var(--sw-cyan-500); /* ---- Tipografska skala ---- */ --sw-text-3xs: 11px; --sw-text-2xs: 12px; --sw-text-xs: 13px; --sw-text-sm: 15px; --sw-text-base: 17px; --sw-text-md: 19px; --sw-text-lg: 22px; --sw-text-xl: 27px; --sw-text-2xl: 34px; --sw-text-3xl: 44px; --sw-text-4xl: 56px; --sw-weight-light: 300; --sw-weight-regular: 400; --sw-weight-medium: 500; --sw-weight-semibold: 600; --sw-weight-bold: 700; --sw-leading-flat: 1; --sw-leading-tight: 1.08; --sw-leading-snug: 1.24; --sw-leading-normal: 1.5; --sw-leading-relaxed: 1.62; --sw-tracking-display: -.02em; --sw-tracking-tight: -.01em; --sw-tracking-wide: .04em; --sw-tracking-label: .11em; --sw-tracking-mono: .02em; /* ---- Fluidne velicine naslova ---- */ --sw-size-h1: clamp(34px, 1.35rem + 3.4vw, 56px); --sw-size-h2: clamp(28px, 1.3rem + 2.5vw, 44px); --sw-size-h3: clamp(24px, 1.25rem + 1.5vw, 34px); --sw-size-card: clamp(19px, 1.05rem + .45vw, 22px); --sw-size-lead: clamp(17px, 1rem + .25vw, 19px); --sw-size-stat: clamp(28px, 1.4rem + 1.4vw, 34px); /* ---- Spacing, 4px mreza ---- */ --sw-space-1: 4px; --sw-space-2: 8px; --sw-space-3: 12px; --sw-space-4: 16px; --sw-space-5: 20px; --sw-space-6: 24px; --sw-space-7: 32px; --sw-space-8: 40px; --sw-space-9: 48px; --sw-space-10: 64px; --sw-space-11: 80px; --sw-space-12: 104px; --sw-space-13: 136px; /* ---- Geometrija stranice ---- Bocni razmak je jedna varijabla koju koristi svaki kontejner, pa se sve sekcije poklapaju na svakoj sirini. */ --sw-page-max: 1280px; --sw-gutter: 40px; /* ---- Kontrole ---- */ --sw-control-h-sm: 34px; --sw-control-h-md: 44px; --sw-control-h-lg: 54px; --sw-control-px-sm: 16px; --sw-control-px-md: 24px; --sw-control-px-lg: 40px; /* ---- Radiusi ---- */ --sw-radius-sm: 3px; --sw-radius-md: 4px; --sw-radius-pill: 999px; /* ---- Senke ---- */ --sw-shadow-sm: 0 1px 2px rgba(14, 27, 42, .06), 0 1px 1px rgba(14, 27, 42, .04); --sw-shadow-lifted: 0 12px 28px rgba(14, 27, 42, .13); --sw-shadow-focus: 0 0 0 3px rgba(0, 174, 239, .35); /* ---- Motion ---- */ --sw-dur-instant: 80ms; --sw-dur-fast: 140ms; --sw-dur-base: 220ms; --sw-ease: cubic-bezier(.2, 0, .2, 1); --sw-press-scale: .985; /* ---- Dijagonala, potpisni brend element ---- 17.32% = tan(30deg). PAZI: procenti u clip-path su procenti SIRINE, ne visine, pa isti ugao izgleda drugacije na uskom ekranu. Zato se --sw-wedge koriguje po breakpointima nize. */ --sw-wedge: 17.32%; --sw-clip-left: polygon(var(--sw-wedge) 0, 100% 0, 100% 100%, 0 100%); /* ---- Visine medija ---- */ --sw-featured-h: 440px; } @media (max-width: 1180px) { :root { --sw-gutter: 32px; } } @media (max-width: 980px) { :root { --sw-wedge: 10%; --sw-featured-h: clamp(220px, 52vw, 320px); } } @media (max-width: 900px) { :root { --sw-gutter: 24px; } } @media (max-width: 600px) { :root { --sw-wedge: 0%; } } @media (max-width: 560px) { :root { --sw-gutter: 20px; } } /* =========================================================================== * 2. BASE - koren, kontejner, resetovi unutar scope-a * ========================================================================= */ .sw-blog, .sw-blog *, .sw-blog *::before, .sw-blog *::after { box-sizing: border-box; } .sw-blog { font-family: var(--sw-font-core); font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } .sw-blog h1, .sw-blog h2, .sw-blog h3, .sw-blog h4, .sw-blog p, .sw-blog address, .sw-blog ul, .sw-blog ol { margin: 0; padding: 0; } .sw-blog p, .sw-blog h1, .sw-blog h2, .sw-blog h3 { overflow-wrap: break-word; } .sw-blog a { text-decoration: none; border-bottom: 0; transition: color var(--sw-dur-fast) var(--sw-ease), background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog img, .sw-blog svg { display: block; max-width: 100%; } .sw-blog a:focus-visible, .sw-blog button:focus-visible { outline: 2px solid var(--sw-focus-ring); outline-offset: 2px; border-radius: 1px; } .sw-blog ::selection { background: var(--sw-cyan-200); color: var(--sw-navy-900); } /* Jedan kontejner za sve sekcije. Sirina NIKAD ne dolazi iz Elementora. */ .sw-blog .sw-container { width: 100%; max-width: var(--sw-page-max); margin-inline: auto; padding-inline: var(--sw-gutter); } /* Grid i flex deca ne smeju da rastu po sadrzaju. */ .sw-blog .sw-hero__grid > *, .sw-blog .sw-hero__stats > *, .sw-blog .sw-featured__grid > *, .sw-blog .sw-cards > *, .sw-blog .sw-cta__row > *, .sw-blog .sw-hero__body, .sw-blog .sw-hero__stat, .sw-blog .sw-cta__body, .sw-blog .sw-card__body { min-width: 0; } .sw-blog .sw-icon { flex: none; } /* Placeholder koji se vidi samo u Elementor builderu. */ .sw-blog.sw-placeholder { padding-block: var(--sw-space-7); background: repeating-linear-gradient(-60deg, var(--sw-navy-025) 0 12px, var(--sw-white) 12px 24px); border: 1px dashed var(--sw-navy-200); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-500); } /* =========================================================================== * 3. DELJENE KOMPONENTE * ========================================================================= */ /* ---- Eyebrow ---- */ .sw-blog .sw-eyebrow { font-family: var(--sw-font-core); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; line-height: var(--sw-leading-normal); } .sw-blog .sw-eyebrow--accent { color: var(--sw-cyan-600); } .sw-blog .sw-eyebrow--light { color: var(--sw-cyan-400); } /* ---- Dugmad ---- */ .sw-blog .sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-3); font-family: var(--sw-font-core); font-weight: var(--sw-weight-semibold); line-height: 1; letter-spacing: var(--sw-tracking-label); text-transform: uppercase; border: 2px solid transparent; border-radius: var(--sw-radius-sm); cursor: pointer; white-space: nowrap; text-align: center; transition: background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease), transform var(--sw-dur-instant) var(--sw-ease); } .sw-blog .sw-btn:active { transform: scale(var(--sw-press-scale)); } .sw-blog .sw-btn--sm { height: var(--sw-control-h-sm); padding-inline: var(--sw-control-px-sm); font-size: var(--sw-text-2xs); } .sw-blog .sw-btn--md { height: var(--sw-control-h-md); padding-inline: var(--sw-control-px-md); font-size: var(--sw-text-xs); } .sw-blog .sw-btn--lg { height: var(--sw-control-h-lg); padding-inline: var(--sw-control-px-lg); font-size: var(--sw-text-sm); } .sw-blog .sw-btn--primary { background: var(--sw-action-primary); border-color: var(--sw-action-primary); color: var(--sw-white); } .sw-blog .sw-btn--primary:hover { background: var(--sw-action-primary-hover); border-color: var(--sw-action-primary-hover); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light { background: transparent; border-color: var(--sw-white); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light:hover { background: var(--sw-white); border-color: var(--sw-white); color: var(--sw-navy-700); } /* ---- Meta red sa separatorima ---- Separator je poseban span koji PHP ubacuje samo izmedju postojecih stavki, pa nikad ne visi na kraju reda. */ .sw-blog .sw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-5); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); line-height: var(--sw-leading-normal); } .sw-blog .sw-meta__item { white-space: nowrap; } .sw-blog .sw-meta__sep { flex: none; width: 1px; height: 12px; background: var(--sw-grey-300); } /* ---- Pilule filtera ---- */ .sw-blog .sw-pill { display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-pill); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; white-space: nowrap; color: var(--sw-grey-600); background: transparent; } .sw-blog .sw-pill:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pill.is-active { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } /* =========================================================================== * 4. BREADCRUMB * ========================================================================= */ .sw-blog.sw-crumbs { background: var(--sw-white); padding-top: var(--sw-space-6); } .sw-blog .sw-crumbs__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-3); font-size: var(--sw-text-2xs); color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a { color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a:hover { color: var(--sw-navy-700); } .sw-blog .sw-crumbs__arrow { color: var(--sw-grey-300); } .sw-blog .sw-crumbs__now { color: var(--sw-navy-700); } /* =========================================================================== * 5. HERO * ========================================================================= */ .sw-blog.sw-hero { background: var(--sw-white); } .sw-blog .sw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sw-space-10); align-items: end; padding-block: var(--sw-space-9) var(--sw-space-10); } .sw-blog .sw-hero__title { margin-top: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h1); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); text-wrap: balance; } .sw-blog .sw-hero__lead { margin-top: var(--sw-space-6); max-width: 60ch; font-size: var(--sw-size-lead); line-height: var(--sw-leading-relaxed); color: var(--sw-grey-600); } .sw-blog .sw-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-6); padding-bottom: var(--sw-space-2); } .sw-blog .sw-hero__stat-value { font-family: var(--sw-font-display); font-size: var(--sw-size-stat); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-flat); color: var(--sw-navy-700); } .sw-blog .sw-hero__stat-label { margin-top: var(--sw-space-2); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-text-muted); } @media (max-width: 980px) { .sw-blog .sw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-8); align-items: start; padding-block: var(--sw-space-8) var(--sw-space-9); } .sw-blog .sw-hero__stats { padding-bottom: 0; padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); } } /* =========================================================================== * 6. PREPORUCENI POST * ========================================================================= */ .sw-blog.sw-featured { background: var(--sw-navy-025); border-top: 1px solid var(--sw-grey-200); border-bottom: 1px solid var(--sw-grey-200); } .sw-blog .sw-featured__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sw-space-10); align-items: center; } .sw-blog .sw-featured__body { padding-block: var(--sw-space-11); } .sw-blog .sw-featured__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-4); margin-bottom: var(--sw-space-6); } .sw-blog .sw-featured__badge { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; background: var(--sw-cyan-500); color: var(--sw-white); font-size: var(--sw-text-3xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; } .sw-blog .sw-featured__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-featured__title { margin-bottom: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h2); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); text-wrap: balance; } .sw-blog .sw-featured__title a { color: var(--sw-navy-700); } .sw-blog .sw-featured__title a:hover { color: var(--sw-cyan-600); } .sw-blog .sw-featured__excerpt { margin-bottom: var(--sw-space-6); max-width: 62ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-featured__meta { margin-bottom: var(--sw-space-7); } .sw-blog .sw-featured__media { position: relative; align-self: stretch; min-height: var(--sw-featured-h); } .sw-blog .sw-featured__wedge { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sw-navy-800); clip-path: var(--sw-clip-left); -webkit-clip-path: var(--sw-clip-left); } .sw-blog .sw-featured__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-featured__wedge--prazan { display: flex; align-items: center; justify-content: center; font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-200); } @media (max-width: 980px) { .sw-blog .sw-featured__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .sw-blog .sw-featured__body { order: 2; padding-block: var(--sw-space-9) var(--sw-space-10); } /* Slika ide preko cele sirine ekrana. Negativna margina tacno ponisti bocni razmak kontejnera, pa nema horizontalnog skrola. */ .sw-blog .sw-featured__media { order: 1; min-height: 0; height: var(--sw-featured-h); margin-inline: calc(var(--sw-gutter) * -1); } } /* =========================================================================== * 7. LISTA POSTOVA * ========================================================================= */ /* Sav vertikalni ritam sekcije je na njoj samoj, ne na prethodnoj. Zato razmak ostaje tacan i kad se preporuceni post ne prikazuje. */ .sw-blog.sw-list { background: var(--sw-white); padding-block: var(--sw-space-11) var(--sw-space-12); } .sw-blog .sw-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sw-space-8); flex-wrap: wrap; padding-bottom: var(--sw-space-5); border-bottom: 1px solid var(--sw-grey-200); margin-bottom: var(--sw-space-8); } .sw-blog .sw-list__title { font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); } .sw-blog .sw-list__filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-2); } .sw-blog .sw-list__prazno { padding-block: var(--sw-space-9); font-size: var(--sw-size-lead); color: var(--sw-text-muted); } /* ---- Grid kartica ---- */ .sw-blog .sw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-7); margin-bottom: var(--sw-space-10); } .sw-blog .sw-card { display: flex; flex-direction: column; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-md); background: var(--sw-white); box-shadow: var(--sw-shadow-sm); overflow: hidden; transition: transform var(--sw-dur-fast) var(--sw-ease), box-shadow var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within { transform: translateY(-2px); box-shadow: var(--sw-shadow-lifted); border-color: var(--sw-navy-200); } .sw-blog .sw-card:hover .sw-card__title a, .sw-blog .sw-card:focus-within .sw-card__title a { color: var(--sw-cyan-600); } .sw-blog .sw-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sw-navy-050); overflow: hidden; } .sw-blog .sw-card__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-card__body { display: flex; flex-direction: column; gap: var(--sw-space-3); padding: var(--sw-space-6); flex: 1 1 auto; } .sw-blog .sw-card__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-3xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-cyan-700); line-height: var(--sw-leading-normal); } .sw-blog .sw-card__title { font-family: var(--sw-font-display); font-size: var(--sw-size-card); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); } .sw-blog .sw-card__title a { color: var(--sw-navy-700); } .sw-blog .sw-card__excerpt { font-size: var(--sw-text-sm); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-card__meta { margin-top: auto; padding-top: var(--sw-space-4); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); font-size: var(--sw-text-3xs); } .sw-blog .sw-card__meta .sw-meta__sep { height: 10px; } @media (max-width: 1080px) { .sw-blog .sw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sw-blog.sw-list { padding-block: var(--sw-space-10) var(--sw-space-11); } .sw-blog .sw-list__head { align-items: flex-start; flex-direction: column; gap: var(--sw-space-5); } } @media (max-width: 680px) { .sw-blog .sw-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-6); } } /* =========================================================================== * 8. PAGINACIJA * ========================================================================= */ .sw-blog .sw-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sw-space-6); padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); } .sw-blog .sw-pager__count { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-pager__links { display: flex; align-items: center; gap: var(--sw-space-2); } .sw-blog .sw-pager__num, .sw-blog .sw-pager__step { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--sw-grey-200); font-size: var(--sw-text-xs); font-weight: var(--sw-weight-semibold); color: var(--sw-grey-600); } .sw-blog .sw-pager__step { color: var(--sw-navy-700); } .sw-blog a.sw-pager__num:hover, .sw-blog a.sw-pager__step:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pager__num.is-current { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } .sw-blog .sw-pager__step.is-disabled { color: var(--sw-grey-400); cursor: not-allowed; } .sw-blog .sw-pager__gap { padding-inline: var(--sw-space-1); font-size: var(--sw-text-xs); color: var(--sw-grey-400); } @media (max-width: 560px) { .sw-blog .sw-pager { flex-direction: column; align-items: flex-start; gap: var(--sw-space-4); } } /* =========================================================================== * 9. CTA TRAKA * ========================================================================= */ .sw-blog.sw-cta { background: var(--sw-navy-700); border-top: 6px solid var(--sw-cyan-500); } .sw-blog .sw-cta__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-10); padding-block: var(--sw-space-11); } .sw-blog .sw-cta__body { flex: 1 1 420px; } .sw-blog .sw-cta__title { margin-block: var(--sw-space-4); font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); letter-spacing: var(--sw-tracking-display); color: var(--sw-white); text-wrap: balance; } .sw-blog .sw-cta__text { max-width: 60ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-navy-100); } .sw-blog .sw-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sw-space-4); } @media (max-width: 900px) { .sw-blog .sw-cta__row { gap: var(--sw-space-8); padding-block: var(--sw-space-10); } } @media (max-width: 560px) { .sw-blog .sw-cta__actions { width: 100%; } .sw-blog .sw-cta__actions .sw-btn { flex: 1 1 100%; } } /* =========================================================================== * 10. DIJAGNOSTIKA * ========================================================================= */ .sw-blog.sw-status { padding-block: var(--sw-space-6); } .sw-blog .sw-status__ok { display: inline-block; margin-bottom: var(--sw-space-4); padding: 6px 12px; background: var(--sw-signal-eco); color: var(--sw-white); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; } .sw-blog .sw-status__list { list-style: none; display: flex; flex-direction: column; gap: var(--sw-space-2); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-navy-700); overflow-wrap: anywhere; } .sw-blog .sw-status__list strong { color: var(--sw-navy-900); } /* =========================================================================== * 11. GLOBALNI RESPONSIVE DETALJI * ========================================================================= */ /* Kad se meta red prelomi na telefonu, vertikalna crtica postaje tacka. */ @media (max-width: 560px) { .sw-blog .sw-meta { gap: var(--sw-space-3); } .sw-blog .sw-meta__sep, .sw-blog .sw-card__meta .sw-meta__sep { width: 3px; height: 3px; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .sw-blog *, .sw-blog *::before, .sw-blog *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within, .sw-blog .sw-btn:active { transform: none; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4577ce1 */@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================================ * STIKMA WORK - BLOG HUB (Fachbeitraege) * Verzija 1.0 * * Ide u Elementor -> Site Settings -> Custom CSS. * NE u per-widget Custom CSS, jer Elementor tamo prefiksuje selektore * i lomi @import. * * @import MORA ostati prva linija fajla. * * Sve je scope-ovano na korensku klasu .sw-blog. Jedino :root sa tokenima * je globalan, i svi tokeni nose --sw- prefiks da se ne sudare sa temom. * ========================================================================== */ /* =========================================================================== * 1. TOKENI * ========================================================================= */ :root { /* ---- Pisma ---- */ --sw-font-core: "Barlow", "Helvetica Neue", Arial, sans-serif; --sw-font-display: "Barlow Condensed", "Barlow", Arial, sans-serif; --sw-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Brend: navy ---- */ --sw-navy-900: #0E1B2A; --sw-navy-800: #152740; --sw-navy-700: #1C334C; --sw-navy-600: #243954; --sw-navy-500: #2E4763; --sw-navy-400: #435667; --sw-navy-300: #6B7C8E; --sw-navy-200: #9DACBB; --sw-navy-100: #C9D6E1; --sw-navy-050: #E8EEF4; --sw-navy-025: #F4F7FA; /* ---- Brend: cyan ---- */ --sw-cyan-700: #0076A8; --sw-cyan-600: #0091CC; --sw-cyan-500: #00AEEF; --sw-cyan-400: #3EC1F3; --sw-cyan-300: #7FD6F7; --sw-cyan-200: #B7E8FB; --sw-cyan-100: #E1F5FE; /* ---- Neutralne ---- */ --sw-white: #FFFFFF; --sw-grey-050: #F7F8F9; --sw-grey-100: #EEF0F2; --sw-grey-200: #DFE3E7; --sw-grey-300: #C4CAD1; --sw-grey-400: #9AA2AB; --sw-grey-500: #6E767F; --sw-grey-600: #4C545C; --sw-grey-700: #33393F; --sw-grey-900: #16191C; /* ---- Signalne ---- */ --sw-signal-hi-vis: #F2C200; --sw-signal-alert: #D6382B; --sw-signal-eco: #3E9C55; /* ---- Semanticki aliasi ---- */ --sw-text-strong: var(--sw-navy-700); --sw-text-body: var(--sw-grey-600); --sw-text-muted: var(--sw-grey-500); --sw-text-faint: var(--sw-grey-400); --sw-text-accent: var(--sw-cyan-600); --sw-text-on-dark: var(--sw-white); --sw-text-on-dark-muted: var(--sw-navy-100); --sw-border-subtle: var(--sw-grey-200); --sw-border-default: var(--sw-grey-300); --sw-border-on-dark: rgba(255, 255, 255, .16); --sw-action-primary: var(--sw-cyan-500); --sw-action-primary-hover: var(--sw-cyan-600); --sw-action-primary-active: var(--sw-cyan-700); --sw-focus-ring: var(--sw-cyan-500); /* ---- Tipografska skala ---- */ --sw-text-3xs: 11px; --sw-text-2xs: 12px; --sw-text-xs: 13px; --sw-text-sm: 15px; --sw-text-base: 17px; --sw-text-md: 19px; --sw-text-lg: 22px; --sw-text-xl: 27px; --sw-text-2xl: 34px; --sw-text-3xl: 44px; --sw-text-4xl: 56px; --sw-weight-light: 300; --sw-weight-regular: 400; --sw-weight-medium: 500; --sw-weight-semibold: 600; --sw-weight-bold: 700; --sw-leading-flat: 1; --sw-leading-tight: 1.08; --sw-leading-snug: 1.24; --sw-leading-normal: 1.5; --sw-leading-relaxed: 1.62; --sw-tracking-display: -.02em; --sw-tracking-tight: -.01em; --sw-tracking-wide: .04em; --sw-tracking-label: .11em; --sw-tracking-mono: .02em; /* ---- Fluidne velicine naslova ---- */ --sw-size-h1: clamp(34px, 1.35rem + 3.4vw, 56px); --sw-size-h2: clamp(28px, 1.3rem + 2.5vw, 44px); --sw-size-h3: clamp(24px, 1.25rem + 1.5vw, 34px); --sw-size-card: clamp(19px, 1.05rem + .45vw, 22px); --sw-size-lead: clamp(17px, 1rem + .25vw, 19px); --sw-size-stat: clamp(28px, 1.4rem + 1.4vw, 34px); /* ---- Spacing, 4px mreza ---- */ --sw-space-1: 4px; --sw-space-2: 8px; --sw-space-3: 12px; --sw-space-4: 16px; --sw-space-5: 20px; --sw-space-6: 24px; --sw-space-7: 32px; --sw-space-8: 40px; --sw-space-9: 48px; --sw-space-10: 64px; --sw-space-11: 80px; --sw-space-12: 104px; --sw-space-13: 136px; /* ---- Geometrija stranice ---- Bocni razmak je jedna varijabla koju koristi svaki kontejner, pa se sve sekcije poklapaju na svakoj sirini. */ --sw-page-max: 1280px; --sw-gutter: 40px; /* ---- Kontrole ---- */ --sw-control-h-sm: 34px; --sw-control-h-md: 44px; --sw-control-h-lg: 54px; --sw-control-px-sm: 16px; --sw-control-px-md: 24px; --sw-control-px-lg: 40px; /* ---- Radiusi ---- */ --sw-radius-sm: 3px; --sw-radius-md: 4px; --sw-radius-pill: 999px; /* ---- Senke ---- */ --sw-shadow-sm: 0 1px 2px rgba(14, 27, 42, .06), 0 1px 1px rgba(14, 27, 42, .04); --sw-shadow-lifted: 0 12px 28px rgba(14, 27, 42, .13); --sw-shadow-focus: 0 0 0 3px rgba(0, 174, 239, .35); /* ---- Motion ---- */ --sw-dur-instant: 80ms; --sw-dur-fast: 140ms; --sw-dur-base: 220ms; --sw-ease: cubic-bezier(.2, 0, .2, 1); --sw-press-scale: .985; /* ---- Dijagonala, potpisni brend element ---- 17.32% = tan(30deg). PAZI: procenti u clip-path su procenti SIRINE, ne visine, pa isti ugao izgleda drugacije na uskom ekranu. Zato se --sw-wedge koriguje po breakpointima nize. */ --sw-wedge: 17.32%; --sw-clip-left: polygon(var(--sw-wedge) 0, 100% 0, 100% 100%, 0 100%); /* ---- Visine medija ---- */ --sw-featured-h: 440px; } @media (max-width: 1180px) { :root { --sw-gutter: 32px; } } @media (max-width: 980px) { :root { --sw-wedge: 10%; --sw-featured-h: clamp(220px, 52vw, 320px); } } @media (max-width: 900px) { :root { --sw-gutter: 24px; } } @media (max-width: 600px) { :root { --sw-wedge: 0%; } } @media (max-width: 560px) { :root { --sw-gutter: 20px; } } /* =========================================================================== * 2. BASE - koren, kontejner, resetovi unutar scope-a * ========================================================================= */ .sw-blog, .sw-blog *, .sw-blog *::before, .sw-blog *::after { box-sizing: border-box; } .sw-blog { font-family: var(--sw-font-core); font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } .sw-blog h1, .sw-blog h2, .sw-blog h3, .sw-blog h4, .sw-blog p, .sw-blog address, .sw-blog ul, .sw-blog ol { margin: 0; padding: 0; } .sw-blog p, .sw-blog h1, .sw-blog h2, .sw-blog h3 { overflow-wrap: break-word; } .sw-blog a { text-decoration: none; border-bottom: 0; transition: color var(--sw-dur-fast) var(--sw-ease), background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog img, .sw-blog svg { display: block; max-width: 100%; } .sw-blog a:focus-visible, .sw-blog button:focus-visible { outline: 2px solid var(--sw-focus-ring); outline-offset: 2px; border-radius: 1px; } .sw-blog ::selection { background: var(--sw-cyan-200); color: var(--sw-navy-900); } /* Jedan kontejner za sve sekcije. Sirina NIKAD ne dolazi iz Elementora. */ .sw-blog .sw-container { width: 100%; max-width: var(--sw-page-max); margin-inline: auto; padding-inline: var(--sw-gutter); } /* Grid i flex deca ne smeju da rastu po sadrzaju. */ .sw-blog .sw-hero__grid > *, .sw-blog .sw-hero__stats > *, .sw-blog .sw-featured__grid > *, .sw-blog .sw-cards > *, .sw-blog .sw-cta__row > *, .sw-blog .sw-hero__body, .sw-blog .sw-hero__stat, .sw-blog .sw-cta__body, .sw-blog .sw-card__body { min-width: 0; } .sw-blog .sw-icon { flex: none; } /* Placeholder koji se vidi samo u Elementor builderu. */ .sw-blog.sw-placeholder { padding-block: var(--sw-space-7); background: repeating-linear-gradient(-60deg, var(--sw-navy-025) 0 12px, var(--sw-white) 12px 24px); border: 1px dashed var(--sw-navy-200); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-500); } /* =========================================================================== * 3. DELJENE KOMPONENTE * ========================================================================= */ /* ---- Eyebrow ---- */ .sw-blog .sw-eyebrow { font-family: var(--sw-font-core); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; line-height: var(--sw-leading-normal); } .sw-blog .sw-eyebrow--accent { color: var(--sw-cyan-600); } .sw-blog .sw-eyebrow--light { color: var(--sw-cyan-400); } /* ---- Dugmad ---- */ .sw-blog .sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-3); font-family: var(--sw-font-core); font-weight: var(--sw-weight-semibold); line-height: 1; letter-spacing: var(--sw-tracking-label); text-transform: uppercase; border: 2px solid transparent; border-radius: var(--sw-radius-sm); cursor: pointer; white-space: nowrap; text-align: center; transition: background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease), transform var(--sw-dur-instant) var(--sw-ease); } .sw-blog .sw-btn:active { transform: scale(var(--sw-press-scale)); } .sw-blog .sw-btn--sm { height: var(--sw-control-h-sm); padding-inline: var(--sw-control-px-sm); font-size: var(--sw-text-2xs); } .sw-blog .sw-btn--md { height: var(--sw-control-h-md); padding-inline: var(--sw-control-px-md); font-size: var(--sw-text-xs); } .sw-blog .sw-btn--lg { height: var(--sw-control-h-lg); padding-inline: var(--sw-control-px-lg); font-size: var(--sw-text-sm); } .sw-blog .sw-btn--primary { background: var(--sw-action-primary); border-color: var(--sw-action-primary); color: var(--sw-white); } .sw-blog .sw-btn--primary:hover { background: var(--sw-action-primary-hover); border-color: var(--sw-action-primary-hover); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light { background: transparent; border-color: var(--sw-white); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light:hover { background: var(--sw-white); border-color: var(--sw-white); color: var(--sw-navy-700); } /* ---- Meta red sa separatorima ---- Separator je poseban span koji PHP ubacuje samo izmedju postojecih stavki, pa nikad ne visi na kraju reda. */ .sw-blog .sw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-5); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); line-height: var(--sw-leading-normal); } .sw-blog .sw-meta__item { white-space: nowrap; } .sw-blog .sw-meta__sep { flex: none; width: 1px; height: 12px; background: var(--sw-grey-300); } /* ---- Pilule filtera ---- */ .sw-blog .sw-pill { display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-pill); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; white-space: nowrap; color: var(--sw-grey-600); background: transparent; } .sw-blog .sw-pill:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pill.is-active { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } /* =========================================================================== * 4. BREADCRUMB * ========================================================================= */ .sw-blog.sw-crumbs { background: var(--sw-white); padding-top: var(--sw-space-6); } .sw-blog .sw-crumbs__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-3); font-size: var(--sw-text-2xs); color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a { color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a:hover { color: var(--sw-navy-700); } .sw-blog .sw-crumbs__arrow { color: var(--sw-grey-300); } .sw-blog .sw-crumbs__now { color: var(--sw-navy-700); } /* =========================================================================== * 5. HERO * ========================================================================= */ .sw-blog.sw-hero { background: var(--sw-white); } .sw-blog .sw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sw-space-10); align-items: end; padding-block: var(--sw-space-9) var(--sw-space-10); } .sw-blog .sw-hero__title { margin-top: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h1); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); text-wrap: balance; } .sw-blog .sw-hero__lead { margin-top: var(--sw-space-6); max-width: 60ch; font-size: var(--sw-size-lead); line-height: var(--sw-leading-relaxed); color: var(--sw-grey-600); } .sw-blog .sw-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-6); padding-bottom: var(--sw-space-2); } .sw-blog .sw-hero__stat-value { font-family: var(--sw-font-display); font-size: var(--sw-size-stat); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-flat); color: var(--sw-navy-700); } .sw-blog .sw-hero__stat-label { margin-top: var(--sw-space-2); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-text-muted); } @media (max-width: 980px) { .sw-blog .sw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-8); align-items: start; padding-block: var(--sw-space-8) var(--sw-space-9); } .sw-blog .sw-hero__stats { padding-bottom: 0; padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); } } /* =========================================================================== * 6. PREPORUCENI POST * ========================================================================= */ .sw-blog.sw-featured { background: var(--sw-navy-025); border-top: 1px solid var(--sw-grey-200); border-bottom: 1px solid var(--sw-grey-200); } .sw-blog .sw-featured__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sw-space-10); align-items: center; } .sw-blog .sw-featured__body { padding-block: var(--sw-space-11); } .sw-blog .sw-featured__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-4); margin-bottom: var(--sw-space-6); } .sw-blog .sw-featured__badge { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; background: var(--sw-cyan-500); color: var(--sw-white); font-size: var(--sw-text-3xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; } .sw-blog .sw-featured__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-featured__title { margin-bottom: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h2); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); text-wrap: balance; } .sw-blog .sw-featured__title a { color: var(--sw-navy-700); } .sw-blog .sw-featured__title a:hover { color: var(--sw-cyan-600); } .sw-blog .sw-featured__excerpt { margin-bottom: var(--sw-space-6); max-width: 62ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-featured__meta { margin-bottom: var(--sw-space-7); } .sw-blog .sw-featured__media { position: relative; align-self: stretch; min-height: var(--sw-featured-h); } .sw-blog .sw-featured__wedge { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sw-navy-800); clip-path: var(--sw-clip-left); -webkit-clip-path: var(--sw-clip-left); } .sw-blog .sw-featured__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-featured__wedge--prazan { display: flex; align-items: center; justify-content: center; font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-200); } @media (max-width: 980px) { .sw-blog .sw-featured__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .sw-blog .sw-featured__body { order: 2; padding-block: var(--sw-space-9) var(--sw-space-10); } /* Slika ide preko cele sirine ekrana. Negativna margina tacno ponisti bocni razmak kontejnera, pa nema horizontalnog skrola. */ .sw-blog .sw-featured__media { order: 1; min-height: 0; height: var(--sw-featured-h); margin-inline: calc(var(--sw-gutter) * -1); } } /* =========================================================================== * 7. LISTA POSTOVA * ========================================================================= */ /* Sav vertikalni ritam sekcije je na njoj samoj, ne na prethodnoj. Zato razmak ostaje tacan i kad se preporuceni post ne prikazuje. */ .sw-blog.sw-list { background: var(--sw-white); padding-block: var(--sw-space-11) var(--sw-space-12); } .sw-blog .sw-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sw-space-8); flex-wrap: wrap; padding-bottom: var(--sw-space-5); border-bottom: 1px solid var(--sw-grey-200); margin-bottom: var(--sw-space-8); } .sw-blog .sw-list__title { font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); } .sw-blog .sw-list__filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-2); } .sw-blog .sw-list__prazno { padding-block: var(--sw-space-9); font-size: var(--sw-size-lead); color: var(--sw-text-muted); } /* ---- Grid kartica ---- */ .sw-blog .sw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-7); margin-bottom: var(--sw-space-10); } .sw-blog .sw-card { display: flex; flex-direction: column; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-md); background: var(--sw-white); box-shadow: var(--sw-shadow-sm); overflow: hidden; transition: transform var(--sw-dur-fast) var(--sw-ease), box-shadow var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within { transform: translateY(-2px); box-shadow: var(--sw-shadow-lifted); border-color: var(--sw-navy-200); } .sw-blog .sw-card:hover .sw-card__title a, .sw-blog .sw-card:focus-within .sw-card__title a { color: var(--sw-cyan-600); } .sw-blog .sw-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sw-navy-050); overflow: hidden; } .sw-blog .sw-card__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-card__body { display: flex; flex-direction: column; gap: var(--sw-space-3); padding: var(--sw-space-6); flex: 1 1 auto; } .sw-blog .sw-card__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-3xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-cyan-700); line-height: var(--sw-leading-normal); } .sw-blog .sw-card__title { font-family: var(--sw-font-display); font-size: var(--sw-size-card); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); } .sw-blog .sw-card__title a { color: var(--sw-navy-700); } .sw-blog .sw-card__excerpt { font-size: var(--sw-text-sm); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-card__meta { margin-top: auto; padding-top: var(--sw-space-4); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); font-size: var(--sw-text-3xs); } .sw-blog .sw-card__meta .sw-meta__sep { height: 10px; } @media (max-width: 1080px) { .sw-blog .sw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sw-blog.sw-list { padding-block: var(--sw-space-10) var(--sw-space-11); } .sw-blog .sw-list__head { align-items: flex-start; flex-direction: column; gap: var(--sw-space-5); } } @media (max-width: 680px) { .sw-blog .sw-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-6); } } /* =========================================================================== * 8. PAGINACIJA * ========================================================================= */ .sw-blog .sw-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sw-space-6); padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); } .sw-blog .sw-pager__count { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-pager__links { display: flex; align-items: center; gap: var(--sw-space-2); } .sw-blog .sw-pager__num, .sw-blog .sw-pager__step { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--sw-grey-200); font-size: var(--sw-text-xs); font-weight: var(--sw-weight-semibold); color: var(--sw-grey-600); } .sw-blog .sw-pager__step { color: var(--sw-navy-700); } .sw-blog a.sw-pager__num:hover, .sw-blog a.sw-pager__step:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pager__num.is-current { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } .sw-blog .sw-pager__step.is-disabled { color: var(--sw-grey-400); cursor: not-allowed; } .sw-blog .sw-pager__gap { padding-inline: var(--sw-space-1); font-size: var(--sw-text-xs); color: var(--sw-grey-400); } @media (max-width: 560px) { .sw-blog .sw-pager { flex-direction: column; align-items: flex-start; gap: var(--sw-space-4); } } /* =========================================================================== * 9. CTA TRAKA * ========================================================================= */ .sw-blog.sw-cta { background: var(--sw-navy-700); border-top: 6px solid var(--sw-cyan-500); } .sw-blog .sw-cta__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-10); padding-block: var(--sw-space-11); } .sw-blog .sw-cta__body { flex: 1 1 420px; } .sw-blog .sw-cta__title { margin-block: var(--sw-space-4); font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); letter-spacing: var(--sw-tracking-display); color: var(--sw-white); text-wrap: balance; } .sw-blog .sw-cta__text { max-width: 60ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-navy-100); } .sw-blog .sw-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sw-space-4); } @media (max-width: 900px) { .sw-blog .sw-cta__row { gap: var(--sw-space-8); padding-block: var(--sw-space-10); } } @media (max-width: 560px) { .sw-blog .sw-cta__actions { width: 100%; } .sw-blog .sw-cta__actions .sw-btn { flex: 1 1 100%; } } /* =========================================================================== * 10. DIJAGNOSTIKA * ========================================================================= */ .sw-blog.sw-status { padding-block: var(--sw-space-6); } .sw-blog .sw-status__ok { display: inline-block; margin-bottom: var(--sw-space-4); padding: 6px 12px; background: var(--sw-signal-eco); color: var(--sw-white); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; } .sw-blog .sw-status__list { list-style: none; display: flex; flex-direction: column; gap: var(--sw-space-2); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-navy-700); overflow-wrap: anywhere; } .sw-blog .sw-status__list strong { color: var(--sw-navy-900); } /* =========================================================================== * 11. GLOBALNI RESPONSIVE DETALJI * ========================================================================= */ /* Kad se meta red prelomi na telefonu, vertikalna crtica postaje tacka. */ @media (max-width: 560px) { .sw-blog .sw-meta { gap: var(--sw-space-3); } .sw-blog .sw-meta__sep, .sw-blog .sw-card__meta .sw-meta__sep { width: 3px; height: 3px; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .sw-blog *, .sw-blog *::before, .sw-blog *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within, .sw-blog .sw-btn:active { transform: none; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d28791c */@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================================ * STIKMA WORK - BLOG HUB (Fachbeitraege) * Verzija 1.0 * * Ide u Elementor -> Site Settings -> Custom CSS. * NE u per-widget Custom CSS, jer Elementor tamo prefiksuje selektore * i lomi @import. * * @import MORA ostati prva linija fajla. * * Sve je scope-ovano na korensku klasu .sw-blog. Jedino :root sa tokenima * je globalan, i svi tokeni nose --sw- prefiks da se ne sudare sa temom. * ========================================================================== */ /* =========================================================================== * 1. TOKENI * ========================================================================= */ :root { /* ---- Pisma ---- */ --sw-font-core: "Barlow", "Helvetica Neue", Arial, sans-serif; --sw-font-display: "Barlow Condensed", "Barlow", Arial, sans-serif; --sw-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Brend: navy ---- */ --sw-navy-900: #0E1B2A; --sw-navy-800: #152740; --sw-navy-700: #1C334C; --sw-navy-600: #243954; --sw-navy-500: #2E4763; --sw-navy-400: #435667; --sw-navy-300: #6B7C8E; --sw-navy-200: #9DACBB; --sw-navy-100: #C9D6E1; --sw-navy-050: #E8EEF4; --sw-navy-025: #F4F7FA; /* ---- Brend: cyan ---- */ --sw-cyan-700: #0076A8; --sw-cyan-600: #0091CC; --sw-cyan-500: #00AEEF; --sw-cyan-400: #3EC1F3; --sw-cyan-300: #7FD6F7; --sw-cyan-200: #B7E8FB; --sw-cyan-100: #E1F5FE; /* ---- Neutralne ---- */ --sw-white: #FFFFFF; --sw-grey-050: #F7F8F9; --sw-grey-100: #EEF0F2; --sw-grey-200: #DFE3E7; --sw-grey-300: #C4CAD1; --sw-grey-400: #9AA2AB; --sw-grey-500: #6E767F; --sw-grey-600: #4C545C; --sw-grey-700: #33393F; --sw-grey-900: #16191C; /* ---- Signalne ---- */ --sw-signal-hi-vis: #F2C200; --sw-signal-alert: #D6382B; --sw-signal-eco: #3E9C55; /* ---- Semanticki aliasi ---- */ --sw-text-strong: var(--sw-navy-700); --sw-text-body: var(--sw-grey-600); --sw-text-muted: var(--sw-grey-500); --sw-text-faint: var(--sw-grey-400); --sw-text-accent: var(--sw-cyan-600); --sw-text-on-dark: var(--sw-white); --sw-text-on-dark-muted: var(--sw-navy-100); --sw-border-subtle: var(--sw-grey-200); --sw-border-default: var(--sw-grey-300); --sw-border-on-dark: rgba(255, 255, 255, .16); --sw-action-primary: var(--sw-cyan-500); --sw-action-primary-hover: var(--sw-cyan-600); --sw-action-primary-active: var(--sw-cyan-700); --sw-focus-ring: var(--sw-cyan-500); /* ---- Tipografska skala ---- */ --sw-text-3xs: 11px; --sw-text-2xs: 12px; --sw-text-xs: 13px; --sw-text-sm: 15px; --sw-text-base: 17px; --sw-text-md: 19px; --sw-text-lg: 22px; --sw-text-xl: 27px; --sw-text-2xl: 34px; --sw-text-3xl: 44px; --sw-text-4xl: 56px; --sw-weight-light: 300; --sw-weight-regular: 400; --sw-weight-medium: 500; --sw-weight-semibold: 600; --sw-weight-bold: 700; --sw-leading-flat: 1; --sw-leading-tight: 1.08; --sw-leading-snug: 1.24; --sw-leading-normal: 1.5; --sw-leading-relaxed: 1.62; --sw-tracking-display: -.02em; --sw-tracking-tight: -.01em; --sw-tracking-wide: .04em; --sw-tracking-label: .11em; --sw-tracking-mono: .02em; /* ---- Fluidne velicine naslova ---- */ --sw-size-h1: clamp(34px, 1.35rem + 3.4vw, 56px); --sw-size-h2: clamp(28px, 1.3rem + 2.5vw, 44px); --sw-size-h3: clamp(24px, 1.25rem + 1.5vw, 34px); --sw-size-card: clamp(19px, 1.05rem + .45vw, 22px); --sw-size-lead: clamp(17px, 1rem + .25vw, 19px); --sw-size-stat: clamp(28px, 1.4rem + 1.4vw, 34px); /* ---- Spacing, 4px mreza ---- */ --sw-space-1: 4px; --sw-space-2: 8px; --sw-space-3: 12px; --sw-space-4: 16px; --sw-space-5: 20px; --sw-space-6: 24px; --sw-space-7: 32px; --sw-space-8: 40px; --sw-space-9: 48px; --sw-space-10: 64px; --sw-space-11: 80px; --sw-space-12: 104px; --sw-space-13: 136px; /* ---- Geometrija stranice ---- Bocni razmak je jedna varijabla koju koristi svaki kontejner, pa se sve sekcije poklapaju na svakoj sirini. */ --sw-page-max: 1280px; --sw-gutter: 40px; /* ---- Kontrole ---- */ --sw-control-h-sm: 34px; --sw-control-h-md: 44px; --sw-control-h-lg: 54px; --sw-control-px-sm: 16px; --sw-control-px-md: 24px; --sw-control-px-lg: 40px; /* ---- Radiusi ---- */ --sw-radius-sm: 3px; --sw-radius-md: 4px; --sw-radius-pill: 999px; /* ---- Senke ---- */ --sw-shadow-sm: 0 1px 2px rgba(14, 27, 42, .06), 0 1px 1px rgba(14, 27, 42, .04); --sw-shadow-lifted: 0 12px 28px rgba(14, 27, 42, .13); --sw-shadow-focus: 0 0 0 3px rgba(0, 174, 239, .35); /* ---- Motion ---- */ --sw-dur-instant: 80ms; --sw-dur-fast: 140ms; --sw-dur-base: 220ms; --sw-ease: cubic-bezier(.2, 0, .2, 1); --sw-press-scale: .985; /* ---- Dijagonala, potpisni brend element ---- 17.32% = tan(30deg). PAZI: procenti u clip-path su procenti SIRINE, ne visine, pa isti ugao izgleda drugacije na uskom ekranu. Zato se --sw-wedge koriguje po breakpointima nize. */ --sw-wedge: 17.32%; --sw-clip-left: polygon(var(--sw-wedge) 0, 100% 0, 100% 100%, 0 100%); /* ---- Visine medija ---- */ --sw-featured-h: 440px; } @media (max-width: 1180px) { :root { --sw-gutter: 32px; } } @media (max-width: 980px) { :root { --sw-wedge: 10%; --sw-featured-h: clamp(220px, 52vw, 320px); } } @media (max-width: 900px) { :root { --sw-gutter: 24px; } } @media (max-width: 600px) { :root { --sw-wedge: 0%; } } @media (max-width: 560px) { :root { --sw-gutter: 20px; } } /* =========================================================================== * 2. BASE - koren, kontejner, resetovi unutar scope-a * ========================================================================= */ .sw-blog, .sw-blog *, .sw-blog *::before, .sw-blog *::after { box-sizing: border-box; } .sw-blog { font-family: var(--sw-font-core); font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; } .sw-blog h1, .sw-blog h2, .sw-blog h3, .sw-blog h4, .sw-blog p, .sw-blog address, .sw-blog ul, .sw-blog ol { margin: 0; padding: 0; } .sw-blog p, .sw-blog h1, .sw-blog h2, .sw-blog h3 { overflow-wrap: break-word; } .sw-blog a { text-decoration: none; border-bottom: 0; transition: color var(--sw-dur-fast) var(--sw-ease), background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog img, .sw-blog svg { display: block; max-width: 100%; } .sw-blog a:focus-visible, .sw-blog button:focus-visible { outline: 2px solid var(--sw-focus-ring); outline-offset: 2px; border-radius: 1px; } .sw-blog ::selection { background: var(--sw-cyan-200); color: var(--sw-navy-900); } /* Jedan kontejner za sve sekcije. Sirina NIKAD ne dolazi iz Elementora. */ .sw-blog .sw-container { width: 100%; max-width: var(--sw-page-max); margin-inline: auto; padding-inline: var(--sw-gutter); } /* Grid i flex deca ne smeju da rastu po sadrzaju. */ .sw-blog .sw-hero__grid > *, .sw-blog .sw-hero__stats > *, .sw-blog .sw-featured__grid > *, .sw-blog .sw-cards > *, .sw-blog .sw-cta__row > *, .sw-blog .sw-hero__body, .sw-blog .sw-hero__stat, .sw-blog .sw-cta__body, .sw-blog .sw-card__body { min-width: 0; } .sw-blog .sw-icon { flex: none; } /* Placeholder koji se vidi samo u Elementor builderu. */ .sw-blog.sw-placeholder { padding-block: var(--sw-space-7); background: repeating-linear-gradient(-60deg, var(--sw-navy-025) 0 12px, var(--sw-white) 12px 24px); border: 1px dashed var(--sw-navy-200); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-500); } /* =========================================================================== * 3. DELJENE KOMPONENTE * ========================================================================= */ /* ---- Eyebrow ---- */ .sw-blog .sw-eyebrow { font-family: var(--sw-font-core); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; line-height: var(--sw-leading-normal); } .sw-blog .sw-eyebrow--accent { color: var(--sw-cyan-600); } .sw-blog .sw-eyebrow--light { color: var(--sw-cyan-400); } /* ---- Dugmad ---- */ .sw-blog .sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-3); font-family: var(--sw-font-core); font-weight: var(--sw-weight-semibold); line-height: 1; letter-spacing: var(--sw-tracking-label); text-transform: uppercase; border: 2px solid transparent; border-radius: var(--sw-radius-sm); cursor: pointer; white-space: nowrap; text-align: center; transition: background-color var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease), transform var(--sw-dur-instant) var(--sw-ease); } .sw-blog .sw-btn:active { transform: scale(var(--sw-press-scale)); } .sw-blog .sw-btn--sm { height: var(--sw-control-h-sm); padding-inline: var(--sw-control-px-sm); font-size: var(--sw-text-2xs); } .sw-blog .sw-btn--md { height: var(--sw-control-h-md); padding-inline: var(--sw-control-px-md); font-size: var(--sw-text-xs); } .sw-blog .sw-btn--lg { height: var(--sw-control-h-lg); padding-inline: var(--sw-control-px-lg); font-size: var(--sw-text-sm); } .sw-blog .sw-btn--primary { background: var(--sw-action-primary); border-color: var(--sw-action-primary); color: var(--sw-white); } .sw-blog .sw-btn--primary:hover { background: var(--sw-action-primary-hover); border-color: var(--sw-action-primary-hover); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light { background: transparent; border-color: var(--sw-white); color: var(--sw-white); } .sw-blog .sw-btn--ghost-light:hover { background: var(--sw-white); border-color: var(--sw-white); color: var(--sw-navy-700); } /* ---- Meta red sa separatorima ---- Separator je poseban span koji PHP ubacuje samo izmedju postojecih stavki, pa nikad ne visi na kraju reda. */ .sw-blog .sw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-5); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); line-height: var(--sw-leading-normal); } .sw-blog .sw-meta__item { white-space: nowrap; } .sw-blog .sw-meta__sep { flex: none; width: 1px; height: 12px; background: var(--sw-grey-300); } /* ---- Pilule filtera ---- */ .sw-blog .sw-pill { display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-pill); font-size: var(--sw-text-2xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; white-space: nowrap; color: var(--sw-grey-600); background: transparent; } .sw-blog .sw-pill:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pill.is-active { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } /* =========================================================================== * 4. BREADCRUMB * ========================================================================= */ .sw-blog.sw-crumbs { background: var(--sw-white); padding-top: var(--sw-space-6); } .sw-blog .sw-crumbs__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-3); font-size: var(--sw-text-2xs); color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a { color: var(--sw-text-muted); } .sw-blog .sw-crumbs__row a:hover { color: var(--sw-navy-700); } .sw-blog .sw-crumbs__arrow { color: var(--sw-grey-300); } .sw-blog .sw-crumbs__now { color: var(--sw-navy-700); } /* =========================================================================== * 5. HERO * ========================================================================= */ .sw-blog.sw-hero { background: var(--sw-white); } .sw-blog .sw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sw-space-10); align-items: end; padding-block: var(--sw-space-9) var(--sw-space-10); } .sw-blog .sw-hero__title { margin-top: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h1); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); text-wrap: balance; } .sw-blog .sw-hero__lead { margin-top: var(--sw-space-6); max-width: 60ch; font-size: var(--sw-size-lead); line-height: var(--sw-leading-relaxed); color: var(--sw-grey-600); } .sw-blog .sw-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-6); padding-bottom: var(--sw-space-2); } .sw-blog .sw-hero__stat-value { font-family: var(--sw-font-display); font-size: var(--sw-size-stat); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-flat); color: var(--sw-navy-700); } .sw-blog .sw-hero__stat-label { margin-top: var(--sw-space-2); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-text-muted); } @media (max-width: 980px) { .sw-blog .sw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-8); align-items: start; padding-block: var(--sw-space-8) var(--sw-space-9); } .sw-blog .sw-hero__stats { padding-bottom: 0; padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); } } /* =========================================================================== * 6. PREPORUCENI POST * ========================================================================= */ .sw-blog.sw-featured { background: var(--sw-navy-025); border-top: 1px solid var(--sw-grey-200); border-bottom: 1px solid var(--sw-grey-200); } .sw-blog .sw-featured__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sw-space-10); align-items: center; } .sw-blog .sw-featured__body { padding-block: var(--sw-space-11); } .sw-blog .sw-featured__tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-4); margin-bottom: var(--sw-space-6); } .sw-blog .sw-featured__badge { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; background: var(--sw-cyan-500); color: var(--sw-white); font-size: var(--sw-text-3xs); font-weight: var(--sw-weight-semibold); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; } .sw-blog .sw-featured__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-featured__title { margin-bottom: var(--sw-space-5); font-family: var(--sw-font-display); font-size: var(--sw-size-h2); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); text-wrap: balance; } .sw-blog .sw-featured__title a { color: var(--sw-navy-700); } .sw-blog .sw-featured__title a:hover { color: var(--sw-cyan-600); } .sw-blog .sw-featured__excerpt { margin-bottom: var(--sw-space-6); max-width: 62ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-featured__meta { margin-bottom: var(--sw-space-7); } .sw-blog .sw-featured__media { position: relative; align-self: stretch; min-height: var(--sw-featured-h); } .sw-blog .sw-featured__wedge { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sw-navy-800); clip-path: var(--sw-clip-left); -webkit-clip-path: var(--sw-clip-left); } .sw-blog .sw-featured__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-featured__wedge--prazan { display: flex; align-items: center; justify-content: center; font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); color: var(--sw-navy-200); } @media (max-width: 980px) { .sw-blog .sw-featured__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .sw-blog .sw-featured__body { order: 2; padding-block: var(--sw-space-9) var(--sw-space-10); } /* Slika ide preko cele sirine ekrana. Negativna margina tacno ponisti bocni razmak kontejnera, pa nema horizontalnog skrola. */ .sw-blog .sw-featured__media { order: 1; min-height: 0; height: var(--sw-featured-h); margin-inline: calc(var(--sw-gutter) * -1); } } /* =========================================================================== * 7. LISTA POSTOVA * ========================================================================= */ /* Sav vertikalni ritam sekcije je na njoj samoj, ne na prethodnoj. Zato razmak ostaje tacan i kad se preporuceni post ne prikazuje. */ .sw-blog.sw-list { background: var(--sw-white); padding-block: var(--sw-space-11) var(--sw-space-12); } .sw-blog .sw-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sw-space-8); flex-wrap: wrap; padding-bottom: var(--sw-space-5); border-bottom: 1px solid var(--sw-grey-200); margin-bottom: var(--sw-space-8); } .sw-blog .sw-list__title { font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-tight); letter-spacing: var(--sw-tracking-display); color: var(--sw-navy-700); } .sw-blog .sw-list__filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-2); } .sw-blog .sw-list__prazno { padding-block: var(--sw-space-9); font-size: var(--sw-size-lead); color: var(--sw-text-muted); } /* ---- Grid kartica ---- */ .sw-blog .sw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sw-space-7); margin-bottom: var(--sw-space-10); } .sw-blog .sw-card { display: flex; flex-direction: column; border: 1px solid var(--sw-grey-200); border-radius: var(--sw-radius-md); background: var(--sw-white); box-shadow: var(--sw-shadow-sm); overflow: hidden; transition: transform var(--sw-dur-fast) var(--sw-ease), box-shadow var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease); } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within { transform: translateY(-2px); box-shadow: var(--sw-shadow-lifted); border-color: var(--sw-navy-200); } .sw-blog .sw-card:hover .sw-card__title a, .sw-blog .sw-card:focus-within .sw-card__title a { color: var(--sw-cyan-600); } .sw-blog .sw-card__media { display: block; aspect-ratio: 16 / 9; background: var(--sw-navy-050); overflow: hidden; } .sw-blog .sw-card__img { width: 100%; height: 100%; object-fit: cover; } .sw-blog .sw-card__body { display: flex; flex-direction: column; gap: var(--sw-space-3); padding: var(--sw-space-6); flex: 1 1 auto; } .sw-blog .sw-card__cat { font-family: var(--sw-font-mono); font-size: var(--sw-text-3xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-cyan-700); line-height: var(--sw-leading-normal); } .sw-blog .sw-card__title { font-family: var(--sw-font-display); font-size: var(--sw-size-card); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); } .sw-blog .sw-card__title a { color: var(--sw-navy-700); } .sw-blog .sw-card__excerpt { font-size: var(--sw-text-sm); line-height: var(--sw-leading-relaxed); color: var(--sw-text-body); } .sw-blog .sw-card__meta { margin-top: auto; padding-top: var(--sw-space-4); border-top: 1px solid var(--sw-grey-200); gap: var(--sw-space-4); font-size: var(--sw-text-3xs); } .sw-blog .sw-card__meta .sw-meta__sep { height: 10px; } @media (max-width: 1080px) { .sw-blog .sw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .sw-blog.sw-list { padding-block: var(--sw-space-10) var(--sw-space-11); } .sw-blog .sw-list__head { align-items: flex-start; flex-direction: column; gap: var(--sw-space-5); } } @media (max-width: 680px) { .sw-blog .sw-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sw-space-6); } } /* =========================================================================== * 8. PAGINACIJA * ========================================================================= */ .sw-blog .sw-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sw-space-6); padding-top: var(--sw-space-6); border-top: 1px solid var(--sw-grey-200); } .sw-blog .sw-pager__count { font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; color: var(--sw-text-muted); } .sw-blog .sw-pager__links { display: flex; align-items: center; gap: var(--sw-space-2); } .sw-blog .sw-pager__num, .sw-blog .sw-pager__step { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--sw-grey-200); font-size: var(--sw-text-xs); font-weight: var(--sw-weight-semibold); color: var(--sw-grey-600); } .sw-blog .sw-pager__step { color: var(--sw-navy-700); } .sw-blog a.sw-pager__num:hover, .sw-blog a.sw-pager__step:hover { color: var(--sw-navy-700); border-color: var(--sw-navy-200); } .sw-blog .sw-pager__num.is-current { background: var(--sw-navy-700); border-color: var(--sw-navy-700); color: var(--sw-white); } .sw-blog .sw-pager__step.is-disabled { color: var(--sw-grey-400); cursor: not-allowed; } .sw-blog .sw-pager__gap { padding-inline: var(--sw-space-1); font-size: var(--sw-text-xs); color: var(--sw-grey-400); } @media (max-width: 560px) { .sw-blog .sw-pager { flex-direction: column; align-items: flex-start; gap: var(--sw-space-4); } } /* =========================================================================== * 9. CTA TRAKA * ========================================================================= */ .sw-blog.sw-cta { background: var(--sw-navy-700); border-top: 6px solid var(--sw-cyan-500); } .sw-blog .sw-cta__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-10); padding-block: var(--sw-space-11); } .sw-blog .sw-cta__body { flex: 1 1 420px; } .sw-blog .sw-cta__title { margin-block: var(--sw-space-4); font-family: var(--sw-font-display); font-size: var(--sw-size-h3); font-weight: var(--sw-weight-bold); line-height: var(--sw-leading-snug); letter-spacing: var(--sw-tracking-display); color: var(--sw-white); text-wrap: balance; } .sw-blog .sw-cta__text { max-width: 60ch; font-size: var(--sw-text-base); line-height: var(--sw-leading-relaxed); color: var(--sw-navy-100); } .sw-blog .sw-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sw-space-4); } @media (max-width: 900px) { .sw-blog .sw-cta__row { gap: var(--sw-space-8); padding-block: var(--sw-space-10); } } @media (max-width: 560px) { .sw-blog .sw-cta__actions { width: 100%; } .sw-blog .sw-cta__actions .sw-btn { flex: 1 1 100%; } } /* =========================================================================== * 10. DIJAGNOSTIKA * ========================================================================= */ .sw-blog.sw-status { padding-block: var(--sw-space-6); } .sw-blog .sw-status__ok { display: inline-block; margin-bottom: var(--sw-space-4); padding: 6px 12px; background: var(--sw-signal-eco); color: var(--sw-white); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); letter-spacing: var(--sw-tracking-mono); text-transform: uppercase; } .sw-blog .sw-status__list { list-style: none; display: flex; flex-direction: column; gap: var(--sw-space-2); font-family: var(--sw-font-mono); font-size: var(--sw-text-2xs); line-height: var(--sw-leading-normal); color: var(--sw-navy-700); overflow-wrap: anywhere; } .sw-blog .sw-status__list strong { color: var(--sw-navy-900); } /* =========================================================================== * 11. GLOBALNI RESPONSIVE DETALJI * ========================================================================= */ /* Kad se meta red prelomi na telefonu, vertikalna crtica postaje tacka. */ @media (max-width: 560px) { .sw-blog .sw-meta { gap: var(--sw-space-3); } .sw-blog .sw-meta__sep, .sw-blog .sw-card__meta .sw-meta__sep { width: 3px; height: 3px; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .sw-blog *, .sw-blog *::before, .sw-blog *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .sw-blog .sw-card:hover, .sw-blog .sw-card:focus-within, .sw-blog .sw-btn:active { transform: none; } }/* End custom CSS */