/* consent.css — cookie baner (GA4 tvrda brana). Dosije jezik, tema-aware. * Default tema sajta je dark (current_theme), pa je i dark primarno doteran. * * SPECIFIČNOST: baner je deljena komponenta i mora da izgleda ISTO na svim * stranama. Neke strane imaju sopstvene element-resete (npr. vesti.css: * `body.page-vesti a {text-decoration:none}` i `body.page-vesti button * {border:0;padding:0}`) koji su specifičniji od gole `.cpc-btn` klase i * curili su na baner (nestali okvir dugmeta i podvlačenje linka). Zato su * pravila za link/dugmad pisana kao `.cpc .cpc-…` — dve klase nadjačavaju * page-resete, a baner ostaje imun i na buduće resete drugih strana. */ /* BRENDNE BOJE: neke strane redefinišu --brand na (blog.css za body.page-price, enciklopedija.css) pa bi deljeni baner menjao ton crvene od strane do strane. Aliasi se računaju na :root → page-scope ih ne dodiruje. */ :root { --cpc-brand: var(--brand); --cpc-brand-hover: var(--brand-hover); /* Na tamnoj traci (#202020) --brand-light mere 3.00 na 12px kikeru; --brand-on-dark ga dize na 4.22. Jos je ispod praga 4.5 — na toj podlozi crvena koja bi ga presla vec izlazi iz brenda. Zapisano. (S130) */ --cpc-brand-light: var(--brand-on-dark); } .cpc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: var(--space-4); background: var(--bg-light-card); border-top: var(--border-bold) solid var(--cpc-brand); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.10); } .cpc[hidden] { display: none; } .cpc-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .cpc-body { flex: 1 1 340px; min-width: 0; } .cpc-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cpc-brand); margin: 0 0 var(--space-2); } .cpc-text { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--fg-light-muted); margin: 0; } .cpc .cpc-link { color: var(--fg-light); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .cpc .cpc-link:hover { color: var(--cpc-brand); } .cpc-actions { display: flex; gap: var(--space-3); flex: 0 0 auto; } .cpc .cpc-btn { font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 10px 20px; border: var(--border-thin) solid var(--border-light); border-radius: var(--radius-sm); background: transparent; color: var(--fg-light); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .cpc .cpc-btn-reject:hover { border-color: #7a7a78; } /* ivica, pinovana (S130) */ .cpc .cpc-btn-accept { background: var(--cpc-brand); border-color: var(--cpc-brand); color: #fff; } .cpc .cpc-btn-accept:hover { background: var(--cpc-brand-hover); border-color: var(--cpc-brand-hover); } .cpc .cpc-btn:focus-visible { outline: 2px solid var(--cpc-brand); outline-offset: 2px; } /* „Podešavanja kolačića" u footeru (footer je paper i u dark temi) */ .ftA .ftA-cookie-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; background: none; border: 0; padding: 0; margin-left: var(--space-3); color: inherit; /* Prigusnica je stajala POVRH nasledjene boje futera: na /price/ je #8a857e uz 0.7 davalo 3,14. Razliku prema susednom (c) redu sada nosi podvlaka i hover, ne providnost. (S131) */ cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .ftA .ftA-cookie-btn:hover { color: var(--cpc-brand); } /* Mobilni (ftA-bottom postaje kolona): dugme se razvuče i centrira svoj tekst pa „iskače" naspram © reda (S85, Denis: „neusaglašeno") — levo poravnanje, ista veličina kao © red, bez desktop margine. */ @media (max-width: 880px) { .ftA .ftA-cookie-btn { margin-left: 0; text-align: left; align-self: flex-start; font-size: 11px; } } /* ── Dark tema (default sajta) ───────────────────────────────────────────── */ [data-theme="dark"] .cpc { background: var(--bg-dark-card); border-top-color: var(--cpc-brand-light); } /* Traka za kolacice stoji na #202020, svetlijoj ploci od ostalih na sajtu, pa --brand-on-dark (#ee4130) tu mere 4,22 i promasuje na 12px. Ista nijansa i zasicenje (H8 S85), L60 umesto L56 -> 4,82. (S131) */ [data-theme="dark"] .cpc-kicker { color: var(--brand-on-plate); } [data-theme="dark"] .cpc-text { color: var(--fg-dark-muted); } [data-theme="dark"] .cpc .cpc-link { color: var(--fg-dark); } [data-theme="dark"] .cpc .cpc-link:hover { color: var(--cpc-brand-light); } [data-theme="dark"] .cpc .cpc-btn { color: var(--fg-dark); border-color: var(--border-dark); } [data-theme="dark"] .cpc .cpc-btn-reject:hover { border-color: #626260; } /* ivica, pinovana (S130) */ [data-theme="dark"] .cpc .cpc-btn-accept { background: var(--cpc-brand); border-color: var(--cpc-brand); color: #fff; } [data-theme="dark"] .cpc .cpc-btn-accept:hover { background: var(--cpc-brand-light); border-color: var(--cpc-brand-light); } /* ── Mobilni ─────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .cpc-inner { gap: var(--space-4); } .cpc-actions { width: 100%; } .cpc .cpc-btn { flex: 1 1 auto; text-align: center; } } @media (prefers-reduced-motion: reduce) { .cpc .cpc-btn { transition: none; } }