/* Šabloni prikaza — efekti po data-display na */ html[data-display="reveal"] .fx-reveal-target { opacity: 0; transform: translateY(var(--fx-reveal-y, 18px)); transition: opacity calc(var(--fx-reveal-speed, 0.55s)) ease, transform calc(var(--fx-reveal-speed, 0.55s)) ease; } html[data-display="reveal"] .fx-reveal-target.is-visible { opacity: 1; transform: none; } html[data-display="motion"] .site-main { perspective: 1200px; } html[data-display="motion"] .fx-motion-card { transition: transform 0.2s ease, box-shadow 0.2s ease; transform-style: preserve-3d; will-change: transform; } html[data-display="motion"] .fx-motion-card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } html[data-display="motion"] .fx-motion-img { overflow: hidden; } html[data-display="motion"] .fx-motion-img-inner { transition: transform 0.35s ease; will-change: transform; } html[data-display="motion"] .fx-float-hero { animation: fx-float 5s ease-in-out infinite; } @keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } html[data-display="retro"] { --fx-mono: ui-monospace, "Cascadia Code", "Consolas", monospace; } html[data-display="retro"] .site-header, html[data-display="retro"] .site-footer { font-family: var(--fx-mono); letter-spacing: 0.02em; } html[data-display="retro"] .category-header h1, html[data-display="retro"] .section-title, html[data-display="retro"] .featured-body h2 { font-family: var(--fx-mono); letter-spacing: 0.04em; } html[data-display="retro"][data-fx-glow="1"] .category-header h1, html[data-display="retro"][data-fx-glow="1"] .featured-body h2 a { text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 20px color-mix(in srgb, var(--accent-soft) 35%, transparent); } html[data-display="retro"] .fx-retro-scanlines { pointer-events: none; position: fixed; inset: 0; z-index: 9999; background: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, 0.07) 2px, rgba(0, 0, 0, 0.07) 4px ); mix-blend-mode: multiply; opacity: 0.45; } html[data-display="retro"] .fx-retro-cursor { display: inline-block; width: 0.55em; height: 1em; margin-left: 0.15em; vertical-align: text-bottom; background: var(--accent); animation: fx-blink 1s step-end infinite; } @keyframes fx-blink { 50% { opacity: 0; } } html[data-display="magazine"] .fx-magazine-title { position: relative; display: inline-block; } html[data-display="magazine"][data-fx-underline="1"] .fx-magazine-title::after { content: ""; position: absolute; left: 0; bottom: -0.15em; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } html[data-display="magazine"][data-fx-underline="1"] .category-header:hover .fx-magazine-title::after, html[data-display="magazine"][data-fx-underline="1"] .section-title:hover::after { transform: scaleX(1); } html[data-display="magazine"] .section-title { position: relative; display: inline-block; } html[data-display="magazine"][data-fx-underline="1"] .section-title::after { content: ""; position: absolute; left: 0; bottom: -0.12em; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0.35); transform-origin: left; transition: transform 0.35s ease; } html[data-display="magazine"][data-fx-underline="1"] .section-title:hover::after { transform: scaleX(1); } html[data-display="magazine"] .fx-magazine-img { overflow: hidden; } html[data-display="magazine"][data-fx-zoom="1"] .fx-magazine-img { transition: transform 0.45s ease; } html[data-display="magazine"][data-fx-zoom="1"] .card:hover .fx-magazine-img, html[data-display="magazine"][data-fx-zoom="1"] .featured-card:hover .featured-img { transform: scale(1.04); } html[data-display="magazine"] .grid .card { transition: transform 0.3s ease, box-shadow 0.3s ease; } html[data-display="magazine"][data-fx-stagger="1"] .grid .card:nth-child(odd) { transform: translateY(0.35rem); } html[data-display="magazine"][data-fx-stagger="1"] .grid .card:nth-child(even) { transform: translateY(-0.35rem); } html[data-display="magazine"] .grid .card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } /* Pregled u podešavanjima */ .display-preview-stage { margin-top: 0.75rem; padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg-card); min-height: 5rem; position: relative; overflow: hidden; } .display-preview-card { padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border); max-width: 14rem; } .display-option-panel { display: none; margin-top: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .display-option-panel.is-active { display: block; } .display-option-panel label { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; font-family: system-ui, sans-serif; font-size: 0.9rem; } .display-option-panel input[type="range"] { width: 100%; margin: 0.25rem 0 0.75rem; } .display-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.35rem; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border); font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--accent); } /* Automatski tekstualni režim — kad nema slika na stranici */ html[data-text-only="1"] .site-main--text-only { background: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent), var(--bg); } html[data-text-only="1"] .index-intro .category-header h1, html[data-text-only="1"] .category-page .category-header h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: 0.02em; } html[data-text-only="1"] .news-grid .section-title::after, html[data-text-only="1"] .category-page .category-header p::after { content: " · tekstualna edicija"; color: var(--accent-soft); font-family: system-ui, sans-serif; font-size: 0.45em; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; } html[data-text-only="1"] .text-edition-grid { display: flex; flex-direction: column; gap: 0; max-width: 46rem; margin-inline: auto; counter-reset: text-story; } html[data-text-only="1"] .text-story { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.75rem 1.25rem; align-items: start; padding: 1.35rem 0; border: none; border-radius: 0; border-bottom: 1px solid var(--border); background: transparent; box-shadow: none; transform: none !important; } html[data-text-only="1"] .text-story::before { counter-increment: text-story; content: counter(text-story, decimal-leading-zero); font-family: var(--font-display); font-size: 1.85rem; line-height: 1; color: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); padding-top: 0.15rem; } html[data-text-only="1"] .text-story:first-child { grid-template-columns: 1fr; padding: 0.5rem 0 2rem; margin-bottom: 0.5rem; border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); } html[data-text-only="1"] .text-story:first-child::before { display: none; } html[data-text-only="1"] .text-story:first-child .card-body h3 { font-size: clamp(1.65rem, 4.2vw, 2.65rem); line-height: 1.12; margin-top: 0.5rem; } html[data-text-only="1"] .text-story:first-child .excerpt-text { -webkit-line-clamp: 5; font-size: 1.08rem; line-height: 1.65; } html[data-text-only="1"] .text-story .card-body { padding: 0; min-width: 0; } html[data-text-only="1"] .text-story .card-body h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; line-height: 1.28; } html[data-text-only="1"] .text-story .badge { font-family: system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.68rem; } html[data-text-only="1"] .text-story .excerpt-text { -webkit-line-clamp: 2; line-height: 1.55; } html[data-text-only="1"] .text-story .meta { font-family: system-ui, sans-serif; font-size: 0.78rem; opacity: 0.85; } html[data-text-only="1"] .text-story:hover { border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } html[data-text-only="1"] .text-story:hover h3 a { color: var(--accent-soft); } html[data-text-only="1"] .text-story.fx-text-visible { animation: fx-text-in 0.55s ease both; } @keyframes fx-text-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } html[data-text-only="1"] .article-page--text-only { max-width: 42rem; } html[data-text-only="1"] .article-page--text-only .article-header h1 { font-size: clamp(1.85rem, 4.5vw, 2.85rem); line-height: 1.15; border-left: 4px solid var(--accent); padding-left: 1rem; } html[data-text-only="1"] .article-page--text-only .article-body { font-size: 1.12rem; line-height: 1.75; column-count: 1; } html[data-text-only="1"] .article-page--text-only .article-body p::first-letter { float: left; font-family: var(--font-display); font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--accent); } html[data-text-only="1"] .article-page--text-only .article-body p + p::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; } @media (min-width: 900px) { html[data-text-only="1"] .article-page--text-only .article-body { column-count: 2; column-gap: 2.5rem; } html[data-text-only="1"] .article-page--text-only .article-body p:first-of-type { column-span: all; } } @media (prefers-reduced-motion: reduce) { html[data-display] .fx-reveal-target, html[data-display] .fx-motion-card, html[data-display] .fx-float-hero, html[data-display] .grid .card { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } html[data-display="retro"] .fx-retro-cursor { animation: none; } html[data-text-only="1"] .text-story.fx-text-visible { animation: none; } }