/* ===================================================================== STIL STRANICA — preseljen ovamo 14-09-2026 (nalog korisnika: JEDAN STIL). Stranice vise nemaju svoju datoteku stila; sva njihova pravila stoje ovdje, IZNAD zajednickih, tocno onim redom kojim su se i prije ucitavala (stranicni stil pa zajednicki), pa se izgled ne mijenja. Svako pravilo i dalje nosi kljuc svoje stranice (.strSportPage, .strKoncertiPage...), pa ne moze procuriti na tudju stranicu. Kopije su izbacene: pravilo koje je vec bilo u zajednickom dijelu obrisano je, a pravilo koje se ponavljalo na vise stranica stoji jednom, s kljucevima svih tih stranica u istom retku. ===================================================================== */ .theme-2027 .strNatjPage .row {display:flex;flex-wrap:wrap;margin-left:-.75rem;margin-right:-.75rem} .theme-2027 .strNatjPage .row>* {padding-left:.75rem;padding-right:.75rem;width:100%} .theme-2027 .strNatjPage .g-4 {row-gap:1.5rem} .theme-2027 .strNatjPage .g-3 {row-gap:1rem} .theme-2027 .strNatjPage .h-100 {height:100%} .theme-2027 .strNatjPage .pt-0 {padding-top:0!important} .theme-2027 .strNatjPage .text-end {text-align:right!important} .theme-2027 .strNatjPage .table-responsive {width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .theme-2027 .strNatjPage .table {width:100%;border-collapse:collapse} .theme-2027 .strNatjPage .mb-0 {margin-bottom:0!important} .theme-2027 .strNatjPage .nav {display:flex;flex-wrap:wrap;list-style:none;padding-left:0;margin:0} .theme-2027 .strNatjPage .nav-item {list-style:none} .theme-2027 .strNatjPage .nav-link {border:0;background:transparent} .theme-2027 .strNatjPage .tab-pane {display:none} .theme-2027 .strNatjPage .tab-pane.show.active, .theme-2027 .strNatjPage .tab-pane.active {display:block} .theme-2027 .strNatjPage .fade {transition:opacity .15s linear} .theme-2027 .strNatjPage .strStaticChart {display:block} .theme-2027 .strNatjPage .strCanvasWrap canvas {display:none} .theme-2027 .strNatjPage .strFallbackDonut {width:250px;height:250px;border-radius:50%;margin:auto;background:conic-gradient(#e11d48 0 68.9%,#6557ff 68.9% 86.3%,#6fe5ff 86.3% 90.4%,#d9ff66 90.4% 93.6%,#ffcf5a 93.6% 95.7%,#31c48d 95.7% 97.7%,rgba(255,255,255,.18) 97.7% 100%);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .theme-2027 .strNatjPage .strFallbackDonut:after {content:"";position:absolute;inset:54px;border-radius:50%;background:#171821} .theme-2027 .strNatjPage .strFallbackDonut span {position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center;font-weight:900;font-size:2rem} .theme-2027 .strNatjPage .strFallbackDonut small {display:block;color:rgba(255,255,255,.5);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strNatjPage .strFallbackBars {display:grid;gap:10px;padding-top:8px} .theme-2027 .strNatjPage .strFallbackBar {display:grid;grid-template-columns:145px minmax(0,1fr) 34px;gap:10px;align-items:center;font-size:.7rem;font-weight:800} .theme-2027 .strNatjPage .strFallbackTrack {height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden} .theme-2027 .strNatjPage .strFallbackFill {display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#6fe5ff,#6557ff)} .theme-2027 .strNatjPage .strFallbackBar:first-child .strFallbackFill {background:linear-gradient(90deg,#e11d48,#6557ff)} .theme-2027 .strNatjPage .strFallbackColumns {height:235px;display:flex;align-items:flex-end;justify-content:space-around;gap:14px;padding:20px 10px 30px;border-bottom:1px solid rgba(255,255,255,.12)} .theme-2027 .strNatjPage .strFallbackColumn {flex:1;max-width:84px;display:flex;height:100%;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px} .theme-2027 .strNatjPage .strFallbackColumn i {display:block;width:100%;min-height:8px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#e11d48,#6557ff)} .theme-2027 .strNatjPage .strFallbackColumn strong {font-size:.72rem} .theme-2027 .strNatjPage .strFallbackColumn span {font-size:.62rem;color:rgba(255,255,255,.52);text-align:center} @media(min-width:992px) { .theme-2027 .strNatjPage .col-lg-4 {width:33.333333%} .theme-2027 .strNatjPage .col-lg-5 {width:41.666667%} .theme-2027 .strNatjPage .col-lg-7 {width:58.333333%} } @media(min-width:1200px) { .theme-2027 .strNatjPage .col-xl-5 {width:41.666667%} .theme-2027 .strNatjPage .col-xl-7 {width:58.333333%} } .theme-2027 .strNatjPage .strSearchIcon {display:grid;place-items:center;color:var(--strViolet);font-size:1.2rem} .theme-2027 .strNatjPage .strTitle {margin:0;font-size:clamp(2.2rem,4vw,4.5rem);line-height:1.02;letter-spacing:-.055em} .theme-2027 .strNatjPage .strIntro {max-width:760px;margin:16px 0 0;color:var(--strMuted);font-size:1.03rem} .theme-2027 .strNatjPage .strSportGrid {display:grid;grid-template-columns:repeat(7,1fr);gap:12px} .theme-2027 .strNatjPage .strSportCard {position:relative;border:1px solid var(--strLine);border-radius:22px;background:rgba(255,255,255,.78);padding:16px;cursor:pointer;transition:.2s ease;min-height:132px} .theme-2027 .strNatjPage .strSportCard:hover {transform:translateY(-3px);box-shadow:0 16px 38px rgba(37,33,68,.10)} .theme-2027 .strNatjPage .strSportIcon {width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--strInk);color:#fff;font-weight:950;font-size:.72rem} .theme-2027 .strNatjPage .strSportName {display:block;margin-top:14px;font-size:.82rem;font-weight:900} /* 🔴 14-09-2026 (izmjereno): kartice sporta nisu se smjele suziti ispod duljine svoga najduzeg natpisa, pa je francuski („Sports mecaniques", „2 451 evenements") razvukao stupce preko sirine mreze i zadnja je kartica ostala odrezana — i na 360 i na 1280 px. Kartica sada smije biti uza od sadrzaja, a natpis se prelomi. */ .theme-2027 .strNatjPage .strSportCard {min-width:0} .theme-2027 .strNatjPage .strSportCard .strSportName, .theme-2027 .strNatjPage .strSportCard .strSportMeta {overflow-wrap:anywhere} .theme-2027 .strNatjPage .strSportMeta {display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:var(--strMuted);font-size:.66rem;font-weight:750} .theme-2027 .strNatjPage .strAnalyticsSection {background:var(--strInk);color:#fff;position:relative;overflow:hidden} .theme-2027 .strNatjPage .strAnalyticsSection:before {content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-120px;top:-120px;background:radial-gradient(circle,rgba(111,229,255,.18),transparent 70%)} .theme-2027 .strNatjPage .strAnalyticsSection .strEyebrow {color:var(--strAqua)} .theme-2027 .strNatjPage .strAnalyticsSection .strIntro {color:rgba(255,255,255,.62)} .theme-2027 .strNatjPage .strPanelLight {border:1px solid var(--strLine);border-radius:28px;background:#fff;padding:24px;box-shadow:var(--strShadow)} .theme-2027 .strNatjPage .strPanelTitle {display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px} .theme-2027 .strNatjPage .strPanelTitle h3 {font-size:1.2rem;margin:0} .theme-2027 .strNatjPage .strPanelTitle p {font-size:.78rem;color:rgba(255,255,255,.52);margin:4px 0 0} .theme-2027 .strNatjPage .strExplorerShell {border:1px solid var(--strLine);border-radius:32px;background:#fff;box-shadow:var(--strShadow);overflow:hidden} .theme-2027 .strNatjPage .strExplorerFilters {display:grid;grid-template-columns:minmax(280px,1.6fr) repeat(3,minmax(150px,.65fr));gap:10px} .theme-2027 .strNatjPage .strField {min-height:50px;border:1px solid var(--strLine);border-radius:16px;background:#fff;padding:0 14px;font-size:.82rem;font-weight:700;color:var(--strInk);outline:0} .theme-2027 .strNatjPage .strField:focus {border-color:rgba(101,87,255,.42);box-shadow:0 0 0 4px rgba(101,87,255,.08)} .theme-2027 .strNatjPage .strExplorerStatus {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;color:var(--strMuted);font-size:.76rem} .theme-2027 .strNatjPage .strSwitches {display:flex;gap:8px;flex-wrap:wrap} .theme-2027 .strNatjPage .strSwitch {border:1px solid var(--strLine);background:#fff;border-radius:999px;padding:8px 12px;font-size:.72rem;font-weight:850} .theme-2027 .strNatjPage .strSwitch[aria-pressed="true"] {background:var(--strInk);color:#fff;border-color:var(--strInk)} .theme-2027 .strNatjPage .strCompetitionHeader {display:grid;grid-template-columns:minmax(260px,1.7fr) .65fr .55fr .58fr .55fr 108px;gap:12px;padding:13px 20px;border-bottom:1px solid var(--strLine);color:var(--strMuted);font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em} .theme-2027 .strNatjPage .strCompetitionRow {display:grid;grid-template-columns:minmax(260px,1.7fr) .65fr .55fr .58fr .55fr 108px;gap:12px;align-items:center;padding:15px 20px;border-bottom:1px solid rgba(17,18,26,.07);transition:.15s ease} .theme-2027 .strNatjPage .strCompetitionRow:hover {background:#faf9fd} .theme-2027 .strNatjPage .strCompetitionRow:last-child {border-bottom:0} .theme-2027 .strNatjPage .strCompetitionName {display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center} .theme-2027 .strNatjPage .strCompetitionLogo {width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,77,114,.12),rgba(101,87,255,.13));color:var(--strViolet);font-size:.69rem;font-weight:950} .theme-2027 .strNatjPage .strCompetitionName strong {display:block;font-size:.86rem} .theme-2027 .strNatjPage .strCompetitionName small {display:block;margin-top:2px;color:var(--strMuted);font-size:.67rem} .theme-2027 .strNatjPage .strCellMain {font-size:.76rem;font-weight:850} .theme-2027 .strNatjPage .strCellSub {font-size:.65rem;color:var(--strMuted);margin-top:2px} .theme-2027 .strNatjPage .strTag {display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;background:#f3f2f7;font-size:.62rem;font-weight:850} .theme-2027 .strNatjPage .strTagAI {background:rgba(101,87,255,.10);color:var(--strViolet)} .theme-2027 .strNatjPage .strTagTickets {background:rgba(49,196,141,.11);color:#16885f} .theme-2027 .strNatjPage .strOpenBtn {display:inline-flex;justify-content:center;align-items:center;min-height:36px;border-radius:12px;background:var(--strInk);color:#fff;font-size:.69rem;font-weight:850} .theme-2027 .strNatjPage .strOpenBtn:hover {color:#fff;background:var(--strPink)} .theme-2027 .strNatjPage .strEmpty {padding:50px;text-align:center;color:var(--strMuted)} .theme-2027 .strNatjPage .strFeaturedGrid {display:grid;grid-template-columns:1.3fr repeat(2,.85fr);gap:18px} .theme-2027 .strNatjPage .strFeatured {min-height:330px;border-radius:28px;overflow:hidden;position:relative;background:var(--strInk);color:#fff;box-shadow:var(--strShadow)} .theme-2027 .strNatjPage .strFeatured img {width:100%;height:100%;object-fit:cover;opacity:.64;transition:.4s ease} .theme-2027 .strNatjPage .strFeatured:hover img {transform:scale(1.04)} .theme-2027 .strNatjPage .strFeatured:after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(17,18,26,.92))} .theme-2027 .strNatjPage .strFeaturedTop {position:absolute;z-index:2;top:18px;left:18px;right:18px;display:flex;justify-content:space-between} .theme-2027 .strNatjPage .strFeaturedPill {border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.91);color:var(--strInk);font-size:.65rem;font-weight:900} .theme-2027 .strNatjPage .strAiBridge {border-radius:32px;padding:34px;background:linear-gradient(135deg,#191a25,#0f1017);color:#fff;position:relative;overflow:hidden} .theme-2027 .strNatjPage .strAiBridge:before {content:"AI";position:absolute;right:-20px;top:-36px;font-size:13rem;line-height:1;font-weight:950;color:rgba(255,255,255,.035)} .theme-2027 .strNatjPage .strAiBridgeGrid {position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center} .theme-2027 .strNatjPage .strAiBridge h2 {font-size:clamp(2rem,4vw,4.2rem);line-height:1.02;letter-spacing:-.05em;margin:0} .theme-2027 .strNatjPage .strAiBridge p {color:rgba(255,255,255,.62);max-width:720px;margin:16px 0 0} .theme-2027 .strNatjPage .strButtonRow {display:flex;gap:10px;flex-wrap:wrap;margin-top:20px} .theme-2027 .strNatjPage .strSeoPanel {display:grid;grid-template-columns:1fr 1fr;gap:18px} .theme-2027 .strNatjPage .strSeoCard {padding:24px;border:1px solid var(--strLine);border-radius:26px;background:#fff} .theme-2027 .strNatjPage .strSeoCard h3 {font-size:1.1rem;margin:0} .theme-2027 .strNatjPage .strSeoCard p {color:var(--strMuted);font-size:.82rem;margin:10px 0 0} .theme-2027 .strNatjPage .strSeoLinks {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .theme-2027 .strNatjPage .strSeoLinks a {border:1px solid var(--strLine);border-radius:999px;padding:8px 11px;font-size:.7rem;font-weight:820} @media(max-width:1180px) { .theme-2027 .strNatjPage .strSportGrid {grid-template-columns:repeat(4,1fr)} .theme-2027 .strNatjPage .strCompetitionHeader, .theme-2027 .strNatjPage .strCompetitionRow {grid-template-columns:minmax(230px,1.5fr) .7fr .6fr .6fr 100px} .theme-2027 .strNatjPage .strCompetitionHeader>*:nth-child(5), .theme-2027 .strNatjPage .strCompetitionRow>*:nth-child(5) {display:none} .theme-2027 .strNatjPage .strFeaturedGrid {grid-template-columns:1fr 1fr} .theme-2027 .strNatjPage .strFeatured:first-child {grid-column:1/3} } @media(max-width:860px) { .theme-2027 .strNatjPage .strSportGrid {grid-template-columns:repeat(2,1fr)} .theme-2027 .strNatjPage .strExplorerFilters {grid-template-columns:1fr 1fr} .theme-2027 .strNatjPage .strExplorerFilters .strField:first-child {grid-column:1/3} .theme-2027 .strNatjPage .strCompetitionHeader {display:none} .theme-2027 .strNatjPage .strCompetitionRow {grid-template-columns:minmax(0,1fr) auto;gap:12px} .theme-2027 .strNatjPage .strCompetitionRow>*:not(:first-child):not(:last-child) {display:none} .theme-2027 .strNatjPage .strCompetitionRow .strOpenBtn {width:82px} .theme-2027 .strNatjPage .strFeaturedGrid {grid-template-columns:1fr} .theme-2027 .strNatjPage .strFeatured:first-child {grid-column:auto} .theme-2027 .strNatjPage .strAiBridgeGrid, .theme-2027 .strNatjPage .strSeoPanel {grid-template-columns:1fr} } @media(max-width:560px) { .theme-2027 .strNatjPage .strSportGrid {grid-template-columns:1fr 1fr} .theme-2027 .strNatjPage .strExplorerFilters {grid-template-columns:1fr} .theme-2027 .strNatjPage .strExplorerFilters .strField:first-child {grid-column:auto} .theme-2027 .strNatjPage .strExplorerStatus {align-items:flex-start;flex-direction:column} .theme-2027 .strNatjPage .strFeatured {min-height:300px} } .theme-2027 .strNatjPage .strSportGo {position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(101,87,255,.08);color:var(--strViolet)} .theme-2027 .strNatjPage .strChartCard {border:1px solid rgba(255,255,255,.12);border-radius:30px;background:rgba(255,255,255,.055);padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.12)} .theme-2027 .strNatjPage .strChartHead {display:flex;justify-content:space-between;gap:20px;align-items:flex-start} .theme-2027 .strNatjPage .strChartHead small {text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.45);font-weight:850;font-size:.66rem} .theme-2027 .strNatjPage .strChartHead h3 {font-size:1.22rem;margin:5px 0 0} .theme-2027 .strNatjPage .strChartBadge {border:1px solid rgba(217,255,102,.22);background:rgba(217,255,102,.09);color:var(--strLime);padding:7px 10px;border-radius:999px;font-size:.68rem;font-weight:850} .theme-2027 .strNatjPage .strCanvasWrap {position:relative;margin-top:18px} .theme-2027 .strNatjPage .strCanvasDonut {height:300px} .theme-2027 .strNatjPage .strCanvasWide {height:330px} .theme-2027 .strNatjPage .strCanvasTime {height:260px} .theme-2027 .strNatjPage .strChartLegend {display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-top:10px} .theme-2027 .strNatjPage .strChartLegend span {display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:8px;color:rgba(255,255,255,.64);font-size:.72rem} .theme-2027 .strNatjPage .strChartLegend i {width:9px;height:9px;border-radius:50%;background:var(--strC)} .theme-2027 .strNatjPage .strChartLegend strong {color:#fff} .theme-2027 .strNatjPage .strCountryMetric {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px} .theme-2027 .strNatjPage .strCountryMetric span {display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04);font-size:.78rem;color:rgba(255,255,255,.68)} .theme-2027 .strNatjPage .strCountryMetric strong {font-size:1.25rem;color:#fff} .theme-2027 .strNatjPage .strLiveBadge {display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(49,196,141,.10);color:#178a63;font-size:.72rem;font-weight:850} .theme-2027 .strNatjPage .strPulseTabs {padding:0 30px 18px;gap:8px;border-bottom:1px solid var(--strLine)} .theme-2027 .strNatjPage .strPulseTabs .nav-link {border-radius:999px;color:var(--strInk2);font-size:.78rem;font-weight:850;background:#f2f1f6} .theme-2027 .strNatjPage .strPulseTabs .nav-link.active {background:var(--strInk);color:#fff} .theme-2027 .strNatjPage .strPulseTabs .nav-link span {margin-left:5px;opacity:.55} .theme-2027 .strNatjPage .strPulseTable thead th {padding:12px 22px;background:#f7f6fa;border:0;color:var(--strMuted);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em} .theme-2027 .strNatjPage .strPulseTable td {padding:15px 22px;border-color:#efedf4;font-size:.78rem} .theme-2027 .strNatjPage .strPulseTable tbody tr:hover {background:#faf9fc} .theme-2027 .strNatjPage .strScoreChip {display:inline-flex;padding:7px 10px;border-radius:10px;background:var(--strInk);color:#fff;font-weight:900} .theme-2027 .strNatjPage .strMiniStandings {margin:20px;border:1px solid var(--strLine);border-radius:22px;overflow:hidden} .theme-2027 .strNatjPage .strMiniStandingsHead {display:flex;justify-content:space-between;align-items:center;padding:16px 17px;border-bottom:1px solid var(--strLine)} .theme-2027 .strNatjPage .strMiniStandingsHead a {font-size:.7rem;color:var(--strViolet);font-weight:850} .theme-2027 .strNatjPage .strMiniStandings ol {list-style:none;margin:0;padding:0;counter-reset:strStand} .theme-2027 .strNatjPage .strMiniStandings li {counter-increment:strStand;display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:11px 16px;border-bottom:1px solid #f0eef4;font-size:.76rem} .theme-2027 .strNatjPage .strMiniStandings li:before {content:counter(strStand);color:var(--strMuted);font-size:.68rem} .theme-2027 .strNatjPage .strMiniStandings li:last-child {border-bottom:0} .theme-2027 .strNatjPage .strMiniStandings li strong {font-size:.78rem} .theme-2027 .strNatjPage .strTagWrap {display:flex;gap:5px;flex-wrap:wrap} .theme-2027 .strNatjPage .strRankList {display:grid;gap:0} .theme-2027 .strNatjPage .strRankList div {display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--strLine)} .theme-2027 .strNatjPage .strRankList div:first-child {border-top:0} .theme-2027 .strNatjPage .strRankList span {color:var(--strViolet);font-size:.7rem;font-weight:900} .theme-2027 .strNatjPage .strRankList strong {font-size:.84rem} .theme-2027 .strNatjPage .strRankList em {font-style:normal;font-size:1.15rem;font-weight:950} .theme-2027 .strNatjPage .strLocationCloud {display:flex;flex-wrap:wrap;gap:9px} .theme-2027 .strNatjPage .strLocationCloud span {padding:10px 12px;border-radius:999px;background:#f1f0f5;border:1px solid var(--strLine);font-size:.73rem;font-weight:800} .theme-2027 .strNatjPage .strCompetitionName a:hover {color:var(--strViolet)} .theme-2027 .strNatjPage .strFeaturedOverlay {position:absolute;inset:0;z-index:3;padding:20px;display:flex;flex-direction:column;justify-content:space-between} .theme-2027 .strNatjPage .strFeaturedStat {padding:7px 10px;border-radius:999px;background:rgba(17,18,26,.68);backdrop-filter:blur(10px);font-size:.66rem;font-weight:900} .theme-2027 .strNatjPage .strFeaturedOverlay small {display:block;color:rgba(255,255,255,.62);font-size:.7rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase} .theme-2027 .strNatjPage .strFeaturedOverlay h3 {margin:6px 0 12px;font-size:clamp(1.5rem,2.4vw,2.6rem);line-height:1.02;letter-spacing:-.04em} .theme-2027 .strNatjPage .strFeaturedLink {display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:850} @media(max-width:860px) { .theme-2027 .strNatjPage .strLiveBadge {margin-top:14px} .theme-2027 .strNatjPage .strChartLegend {grid-template-columns:1fr} .theme-2027 .strNatjPage .strCountryMetric {grid-template-columns:1fr} .theme-2027 .strNatjPage .strPulseTabs {overflow-x:auto;flex-wrap:nowrap} .theme-2027 .strNatjPage .strPulseTabs .nav-link {white-space:nowrap} } @media (max-width: 700px) { .theme-2027 .strNatjPage .strPulseTabs {overflow-x:visible;flex-wrap:wrap;gap:8px} .theme-2027 .strNatjPage .strPulseTabs .nav-link {white-space:normal;text-align:left} } @media(min-width:701px) and (max-width:860px) { .theme-2027 .strNatjPage .strPulseTable {min-width:780px} } .theme-2027 .strNatjPage .strHeroSearch {position: relative; max-width: 790px; margin-top: 32px;} .theme-2027 .strNatjPage .strHeroQuick, .theme-2027 .strLigaPage .strHeroQuick, .theme-2027 .strAiPage .strHeroQuick {display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px;} .theme-2027 .strNatjPage .strHeroQuick a, .theme-2027 .strLigaPage .strHeroQuick a, .theme-2027 .strAiPage .strHeroQuick a {padding: 8px 12px; border: 1px solid var(--strLine); border-radius: 999px; color: var(--strInkSoft); background: rgba(255, 255, 255, .64); font-size: .78rem; font-weight: 760; transition: color .18s ease, border-color .18s ease, background .18s ease;} .theme-2027 .strNatjPage .strHeroQuick a:hover, .theme-2027 .strLigaPage .strHeroQuick a:hover, .theme-2027 .strAiPage .strHeroQuick a:hover {color: var(--strViolet); border-color: rgba(101, 87, 255, .35); background: #fff;} .theme-2027 .strNatjPage .strDonut {background: conic-gradient(var(--strAqua) 0 var(--strDonutPct, 0%), rgba(255,255,255,.09) var(--strDonutPct, 0%) 100%);} .theme-2027 .strNatjPage .strChipNum, .theme-2027 .strLigaPage .strChipNum, .theme-2027 .strAiPage .strChipNum {display: inline-block; min-width: 24px; margin-left: 6px; padding: 2px 7px; border: 1px solid rgba(17,18,26,.12); border-radius: 999px; background: rgba(17,18,26,.05); font-size: .68rem; font-variant-numeric: tabular-nums; text-align: center;} .theme-2027 .strNatjPage .strFilterButton[aria-pressed="true"] .strChipNum, .theme-2027 .strLigaPage .strFilterButton[aria-pressed="true"] .strChipNum, .theme-2027 .strAiPage .strFilterButton[aria-pressed="true"] .strChipNum {color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.2);} .theme-2027 .strNatjPage .strFilterButton[disabled], .theme-2027 .strLigaPage .strFilterButton[disabled], .theme-2027 .strAiPage .strFilterButton[disabled] {opacity: .42; cursor: not-allowed;} .theme-2027 .strNatjPage .strLeagueIcon.strLeagueFlagIcon, .theme-2027 .strLigaPage .strLeagueIcon.strLeagueFlagIcon, .theme-2027 .strAiPage .strLeagueIcon.strLeagueFlagIcon {overflow: hidden; background: rgba(17,18,26,.05);} .theme-2027 .strNatjPage .strLeagueIcon.strLeagueFlagIcon img, .theme-2027 .strLigaPage .strLeagueIcon.strLeagueFlagIcon img, .theme-2027 .strAiPage .strLeagueIcon.strLeagueFlagIcon img {width: 100%; height: 100%; object-fit: cover; display: block;} .theme-2027 .strNatjPage [hidden], .theme-2027 .strLigaPage [hidden], .theme-2027 .strAiPage [hidden] {display: none !important;} .theme-2027 .strNatjPage .strExperienceImage img, .theme-2027 .strNatjPage .strIntelligencePhoto img, .theme-2027 .strNatjPage .strExperienceCardImage img, .theme-2027 .strNatjPage .strLeagueFlag img, .theme-2027 .strLigaPage .strExperienceImage img, .theme-2027 .strLigaPage .strIntelligencePhoto img, .theme-2027 .strLigaPage .strExperienceCardImage img, .theme-2027 .strLigaPage .strLeagueFlag img {width: 100%; display: block;} .theme-2027 .strNatjPage .strStatusPill {align-self: center; gap: 4px; align-items: center; white-space: nowrap; text-align: center;} .theme-2027 .strNatjPage .strEmptyState, .theme-2027 .strLigaPage .strEmptyState, .theme-2027 .strAiPage .strEmptyState {margin-top: 18px; padding: 26px 22px; border: 1px dashed rgba(17,18,26,.16); border-radius: var(--strRadiusM); text-align: center;} .theme-2027 .strNatjPage .strEmptyState h3, .theme-2027 .strLigaPage .strEmptyState h3, .theme-2027 .strAiPage .strEmptyState h3 {margin: 0 0 6px; font-size: 1.1rem;} .theme-2027 .strNatjPage .strEmptyState p, .theme-2027 .strLigaPage .strEmptyState p, .theme-2027 .strAiPage .strEmptyState p {margin: 0; color: var(--strMuted); font-size: .86rem;} @media (max-width: 620px) { .theme-2027 .strNatjPage .strSettledRow {grid-template-columns: 1fr 72px 92px;} } @media (max-width: 900px) { .theme-2027 .strNatjPage .strLeagueTableHeader, .theme-2027 .strNatjPage .strLeagueTableRow {grid-template-columns: minmax(160px,1fr) 92px 92px;} } @media (max-width: 620px) { .theme-2027 .strNatjPage .strRoundResultScores {grid-column: 2/3;} .theme-2027 .strNatjPage .strResultScore {padding: 6px;} } .theme-2027 .strNatjPage .strStandingsTableWrap, .theme-2027 .strLigaPage .strStandingsTableWrap {overflow-x: auto;} .theme-2027 .strNatjPage .strConcertGrid {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:265px;gap:18px} .theme-2027 .strNatjPage .strConcertCard, .theme-2027 .strLigaPage .strConcertCard, .theme-2027 .strStandupPage .strConcertCard, .theme-2027 .strFestivaliPage .strConcertCard, .theme-2027 .strKoncertiPage .strConcertCard {position:relative;isolation:isolate;overflow:hidden;border-radius:30px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowS);transition:transform .25s ease,box-shadow .25s ease} .theme-2027 .strNatjPage .strConcertCard:hover, .theme-2027 .strLigaPage .strConcertCard:hover, .theme-2027 .strStandupPage .strConcertCard:hover, .theme-2027 .strFestivaliPage .strConcertCard:hover, .theme-2027 .strKoncertiPage .strConcertCard:hover {transform:translateY(-6px);box-shadow:var(--strShadowL)} .theme-2027 .strNatjPage .strConcertCard img, .theme-2027 .strLigaPage .strConcertCard img, .theme-2027 .strStandupPage .strConcertCard img, .theme-2027 .strFestivaliPage .strConcertCard img, .theme-2027 .strKoncertiPage .strConcertCard img {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .theme-2027 .strNatjPage .strConcertCard:hover img, .theme-2027 .strLigaPage .strConcertCard:hover img, .theme-2027 .strStandupPage .strConcertCard:hover img, .theme-2027 .strFestivaliPage .strConcertCard:hover img, .theme-2027 .strKoncertiPage .strConcertCard:hover img {transform:scale(1.055)} .theme-2027 .strNatjPage .strConcertCard::after, .theme-2027 .strLigaPage .strConcertCard::after, .theme-2027 .strStandupPage .strConcertCard::after, .theme-2027 .strFestivaliPage .strConcertCard::after, .theme-2027 .strKoncertiPage .strConcertCard::after {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,14,.05) 18%,rgba(8,8,14,.45) 54%,rgba(8,8,14,.95) 100%);content:""} .theme-2027 .strNatjPage .strConcertLead {grid-column:span 7;grid-row:span 2} .theme-2027 .strNatjPage .strConcertTall {grid-column:span 5;grid-row:span 2} .theme-2027 .strNatjPage .strConcertSmall, .theme-2027 .strLigaPage .strConcertSmall, .theme-2027 .strStandupPage .strConcertSmall, .theme-2027 .strFestivaliPage .strConcertSmall, .theme-2027 .strKoncertiPage .strConcertSmall {grid-column:span 4} .theme-2027 .strNatjPage .strConcertWide, .theme-2027 .strLigaPage .strConcertWide, .theme-2027 .strStandupPage .strConcertWide, .theme-2027 .strFestivaliPage .strConcertWide, .theme-2027 .strKoncertiPage .strConcertWide {grid-column:span 4} .theme-2027 .strNatjPage .strConcertTop {position:absolute;top:18px;right:18px;left:18px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .theme-2027 .strNatjPage .strConcertDate, .theme-2027 .strLigaPage .strConcertDate, .theme-2027 .strStandupPage .strConcertDate, .theme-2027 .strFestivaliPage .strConcertDate, .theme-2027 .strKoncertiPage .strConcertDate {padding:7px 10px;border-radius:999px;background:rgba(17,18,26,.58);font-size:.68rem;font-weight:780;backdrop-filter:blur(10px)} .theme-2027 .strNatjPage .strConcertBody, .theme-2027 .strLigaPage .strConcertBody, .theme-2027 .strStandupPage .strConcertBody, .theme-2027 .strFestivaliPage .strConcertBody, .theme-2027 .strKoncertiPage .strConcertBody {position:absolute;right:23px;bottom:22px;left:23px;z-index:2} .theme-2027 .strNatjPage .strConcertGenre, .theme-2027 .strLigaPage .strConcertGenre, .theme-2027 .strStandupPage .strConcertGenre, .theme-2027 .strFestivaliPage .strConcertGenre, .theme-2027 .strKoncertiPage .strConcertGenre {color:var(--strLime);font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .theme-2027 .strNatjPage .strConcertBody h3, .theme-2027 .strLigaPage .strConcertBody h3 {max-width:720px;margin:7px 0 12px;font-size:clamp(1.75rem,2.8vw,3.35rem);line-height:1.02;letter-spacing:-.045em} .theme-2027 .strNatjPage .strConcertLead .strConcertBody h3, .theme-2027 .strLigaPage .strConcertLead .strConcertBody h3 {font-size:clamp(2.4rem,4.2vw,4.4rem)} .theme-2027 .strNatjPage .strConcertFoot {display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.82rem;font-weight:850} @media (max-width: 1160px) { .theme-2027 .strNatjPage .strConcertLead {grid-column:span 8} .theme-2027 .strNatjPage .strConcertTall {grid-column:span 4} .theme-2027 .strNatjPage .strConcertSmall, .theme-2027 .strNatjPage .strConcertWide, .theme-2027 .strLigaPage .strConcertSmall, .theme-2027 .strLigaPage .strConcertWide {grid-column:span 4} } @media (max-width: 900px) { .theme-2027 .strNatjPage .strConcertGrid {grid-template-columns:repeat(2,1fr);grid-auto-rows:310px} .theme-2027 .strNatjPage .strConcertLead, .theme-2027 .strNatjPage .strConcertTall, .theme-2027 .strNatjPage .strConcertSmall, .theme-2027 .strNatjPage .strConcertWide {grid-column:auto;grid-row:auto} .theme-2027 .strNatjPage .strConcertLead {grid-column:span 2;grid-row:span 2} .theme-2027 .strNatjPage .strConcertTall {grid-column:span 2} } @media (max-width: 620px) { .theme-2027 .strNatjPage .strConcertGrid {grid-template-columns:1fr;grid-auto-rows:430px} .theme-2027 .strNatjPage .strConcertLead, .theme-2027 .strNatjPage .strConcertTall, .theme-2027 .strNatjPage .strConcertSmall, .theme-2027 .strNatjPage .strConcertWide {grid-column:auto!important;grid-row:auto!important} .theme-2027 .strNatjPage .strConcertLead .strConcertBody h3, .theme-2027 .strNatjPage .strConcertBody h3, .theme-2027 .strLigaPage .strConcertLead .strConcertBody h3, .theme-2027 .strLigaPage .strConcertBody h3 {font-size:2.35rem} .theme-2027 .strNatjPage .strConcertTop {align-items:flex-start;flex-direction:column} } .theme-2027 .strNatjPage .strHeroActions {margin-top:18px} .theme-2027 .strNatjPage .strHeroSearch {margin-top:20px} .theme-2027 .strNatjPage .strStatusPill.strMiss {color:#8a1220;background:rgba(255,107,107,.18);border-color:rgba(138,18,32,.28)} .theme-2027 .strNatjPage .strRoundButton.strRoundPhase, .theme-2027 .strLigaPage .strRoundButton.strRoundPhase {width:auto;padding:0 16px;font-size:.72rem} .theme-2027 .strNatjPage .strPreviewCell, .theme-2027 .strLigaPage .strPreviewCell {display:inline-grid;justify-items:center;gap:2px} .theme-2027 .strNatjPage .strPreviewCell small, .theme-2027 .strLigaPage .strPreviewCell small {color:rgba(255,255,255,.6);font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strNatjPage .strPreviewCell b, .theme-2027 .strLigaPage .strPreviewCell b {font-size:1.5rem;font-weight:900} .theme-2027 .strNatjPage .strRoundButton.strComplete, .theme-2027 .strLigaPage .strRoundButton.strComplete {position:relative} .theme-2027 .strNatjPage .strRoundButton.strComplete:after {content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--strGreen)} .theme-2027 .strNatjPage .strMatchNote, .theme-2027 .strLigaPage .strMatchNote {grid-column:1/-1;margin-top:10px;color:var(--strMuted);font-size:.83rem;line-height:1.55} .theme-2027 .strNatjPage .strMatchNoteMeta, .theme-2027 .strLigaPage .strMatchNoteMeta {display:block;margin-bottom:4px;color:var(--strViolet);font-size:.72rem;font-weight:800;letter-spacing:.02em} .theme-2027 .strNatjPage .strMatchMeta {grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:var(--strMuted);font-size:.74rem;font-weight:700} .theme-2027 .strNatjPage .strMatchTickets, .theme-2027 .strLigaPage .strMatchTickets {white-space:nowrap} .theme-2027 .strNatjPage .strExperienceCards {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:265px;gap:18px} .theme-2027 .strNatjPage .strExperienceCard {position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:30px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowS);transition:transform .25s ease,box-shadow .25s ease;grid-column:span 4;grid-row:span 1} .theme-2027 .strNatjPage .strExperienceCard:nth-child(1), .theme-2027 .strLigaPage .strExperienceCard:nth-child(1) {grid-column:span 7;grid-row:span 2} .theme-2027 .strNatjPage .strExperienceCard:nth-child(2), .theme-2027 .strLigaPage .strExperienceCard:nth-child(2) {grid-column:span 5;grid-row:span 2} .theme-2027 .strNatjPage .strExperienceCard:hover {transform:translateY(-6px);box-shadow:var(--strShadowL)} .theme-2027 .strNatjPage .strExperienceCardImage {position:absolute;inset:0;z-index:-2;height:100%;border-radius:0} .theme-2027 .strNatjPage .strExperienceCardImage img {width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .theme-2027 .strNatjPage .strExperienceCard:hover .strExperienceCardImage img, .theme-2027 .strLigaPage .strExperienceCard:hover .strExperienceCardImage img {transform:scale(1.055)} /* 🔴 14-09-2026 (nalog korisnika): zastor preko fotografije bio je prevec proziran u sredini (.45), pa se na svijetloj fotografiji stadiona bijeli naslov gubio. */ .theme-2027 .strNatjPage .strExperienceCard::after, .theme-2027 .strLigaPage .strExperienceCard::after {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,14,.28) 0%,rgba(8,8,14,.58) 45%,rgba(8,8,14,.96) 100%);content:""} .theme-2027 .strNatjPage .strExperienceCardTag {position:absolute;top:18px;left:18px;z-index:2;padding:7px 12px;border-radius:999px;color:var(--strInk);background:var(--strLime);font-size:.68rem;font-weight:880} .theme-2027 .strNatjPage .strExperienceCardBody {position:absolute;right:23px;bottom:22px;left:23px;z-index:2;padding:0} .theme-2027 .strNatjPage .strExperienceCardBody small {display:block;color:rgba(255,255,255,.72);font-size:.68rem;font-weight:820;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strNatjPage .strExperienceCardBody h3 {margin:8px 0 6px;color:#fff;font-size:clamp(1.5rem,2.2vw,2.4rem);line-height:1.05;letter-spacing:-.04em} /* 🔴 14-09-2026 (nalog korisnika): kartica je TAMNA fotografija — datum je nasljedivao sivu boju pisanu za svijetle plohe i gubio se. Uz to natpisi preko fotografije dobivaju istu sjenu koju portal vec koristi na tamnim karticama koncerata. */ .theme-2027 .strNatjPage .strExperienceCardDate, .theme-2027 .strLigaPage .strExperienceCardDate {margin:0 0 12px;color:rgba(255,255,255,.88);font-size:.8rem;font-weight:700} .theme-2027 .strNatjPage .strExperienceCardBody small, .theme-2027 .strLigaPage .strExperienceCardBody small, .theme-2027 .strNatjPage .strExperienceCardBody h3, .theme-2027 .strLigaPage .strExperienceCardBody h3, .theme-2027 .strNatjPage .strExperienceCardDate, .theme-2027 .strLigaPage .strExperienceCardDate {text-shadow:0 1px 3px rgba(0,0,0,.6)} .theme-2027 .strNatjPage .strExperienceCardMeta {display:flex;align-items:center;justify-content:space-between;gap:14px;border:0;padding:0} .theme-2027 .strNatjPage .strExperienceCardMeta .strTicketButton, .theme-2027 .strLigaPage .strExperienceCardMeta .strTicketButton {color:#fff;font-size:.9rem;font-weight:900} /* 🔴 14-09-2026 (nalog korisnika): kartica je TAMNA fotografija, a portalska cijena uz gumb pisana je za svijetlu karticu (siva, podebljano tamno) — na tamnome se nije vidjela. Ista iznimka koju vec imaju tamne kartice koncerata i festivala. */ .theme-2027 .strNatjPage .strExperienceCardMeta .strFxPr, .theme-2027 .strLigaPage .strExperienceCardMeta .strFxPr {color:rgba(255,255,255,.82)} .theme-2027 .strNatjPage .strExperienceCardMeta .strFxPr b, .theme-2027 .strLigaPage .strExperienceCardMeta .strFxPr b {color:#fff} @media (max-width: 1160px) { .theme-2027 .strNatjPage .strExperienceCards {grid-template-columns:repeat(8,1fr)} .theme-2027 .strNatjPage .strExperienceCard, .theme-2027 .strNatjPage .strExperienceCard:nth-child(1), .theme-2027 .strNatjPage .strExperienceCard:nth-child(2) {grid-column:span 4} } @media (max-width: 900px) { .theme-2027 .strNatjPage .strExperienceCards {grid-template-columns:repeat(2,1fr);grid-auto-rows:300px} .theme-2027 .strNatjPage .strExperienceCard, .theme-2027 .strNatjPage .strExperienceCard:nth-child(1), .theme-2027 .strNatjPage .strExperienceCard:nth-child(2) {grid-column:span 1;grid-row:span 1} } @media (max-width: 620px) { .theme-2027 .strNatjPage .strExperienceCards {grid-template-columns:1fr;grid-auto-rows:340px} } @media (min-width: 1181px) { .theme-2027 .strNatjPage .strRoundMatch {grid-template-columns:120px minmax(220px,1fr) 214px minmax(200px,.6fr) 48px} } @media (min-width: 981px) and (max-width: 1180px) { .theme-2027 .strNatjPage .strRoundMatch {grid-template-columns:100px minmax(170px,1fr) 214px minmax(170px,.55fr) 44px} } @media (min-width: 981px) { .theme-2027 .strNatjPage .strResultScore small {white-space:nowrap} } .theme-2027 .strNatjPage .strRoundHeadRow {padding-top:14px;padding-bottom:0;border-top:0} .theme-2027 .strNatjPage .strRoundHeadRow span, .theme-2027 .strLigaPage .strRoundHeadRow span {color:var(--strMuted);font-size:.58rem;font-weight:840;letter-spacing:.06em;text-transform:uppercase} .theme-2027 .strNatjPage .strRoundHeadRow span:nth-child(4), .theme-2027 .strLigaPage .strRoundHeadRow span:nth-child(4) {text-align:center} @media (max-width: 700px) { .theme-2027 .strNatjPage .strRoundHeadRow {display:none} } .theme-2027 .strNatjPage .strPublishWindow {align-items:flex-start} .theme-2027 .strNatjPage .strPublishWindow span.strPublishIcon, .theme-2027 .strLigaPage .strPublishWindow span.strPublishIcon {display:grid;place-items:center;flex:0 0 auto;width:auto;min-width:34px;height:34px;padding:0 8px;border-radius:11px;color:#3a2ea8;background:rgba(101,87,255,.18);font-size:.67rem;font-weight:920;line-height:1} .theme-2027 .strNatjPage .strSportIcon svg, .theme-2027 .strNatjPage .strRadarBadge svg, .theme-2027 .strNatjPage .strCompetitionLogo svg {width: 22px; height: 22px; display: block; flex: 0 0 auto;} .theme-2027 .strNatjPage .strSportIcon svg path, .theme-2027 .strNatjPage .strSportIcon svg circle, .theme-2027 .strNatjPage .strSportIcon svg rect, .theme-2027 .strNatjPage .strSportIcon svg line, .theme-2027 .strNatjPage .strSportIcon svg polyline, .theme-2027 .strNatjPage .strSportIcon svg polygon {vector-effect: non-scaling-stroke;} .theme-2027 .strNatjPage .strCompetitionLogo img {width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;} .theme-2027 .strNatjPage .strSportIcon svg {fill: currentColor; stroke: currentColor;} .theme-2027 .strNatjPage .strSportIcon svg [fill="none"] {fill: none;} .theme-2027 .strNatjPage .strSearchField {position: relative; display: flex; align-items: center; gap: 10px;} .theme-2027 .strNatjPage .strSearchIcon {display: inline-flex; flex: 0 0 auto; color: var(--strMuted);} .theme-2027 .strNatjPage .strSearchIcon svg {width: 18px; height: 18px; display: block;} .theme-2027 .strNatjPage .strSearchField .strField {flex: 1 1 auto; min-width: 0;} .theme-2027 .strNatjPage {--strInk2: var(--strInkSoft); --strGreen: var(--strSuccess); --strRed: var(--strDanger); --strShadow: var(--strShadowSmall); --strShadow2: var(--strShadowLarge); --strRadius: var(--strRadiusLarge); --strRadiusSm: var(--strRadiusMedium);} .theme-2027 .strNatjPage .strShopMreza {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;} .theme-2027 .strNatjPage .strShopKartica {display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--strLine); border-radius: var(--strRadiusSm); background: var(--strCard); box-shadow: var(--strShadow); color: inherit; transition: transform .18s ease, box-shadow .18s ease;} .theme-2027 .strNatjPage .strShopKartica:hover {transform: translateY(-3px); box-shadow: var(--strShadow2);} .theme-2027 .strNatjPage .strShopSlika {display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f0eff5;} .theme-2027 .strNatjPage .strShopSlika img {width: 100%; height: 100%; object-fit: contain; display: block;} .theme-2027 .strNatjPage .strShopTijelo {display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 16px;} .theme-2027 .strNatjPage .strShopTijelo small {color: var(--strMuted); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;} .theme-2027 .strNatjPage .strShopTijelo strong {font-size: .88rem; line-height: 1.25; overflow-wrap: anywhere;} .theme-2027 .strNatjPage .strShopCijena {margin-top: auto; color: var(--strInk); font-size: 1rem; font-weight: 900;} .theme-2027 .strNatjPage .strObjektiStat {margin-bottom: 22px;} .theme-2027 .strNatjPage .strNatjNapomena {margin: 16px 0 0; color: var(--strMuted); font-size: .74rem;} .theme-2027 .strNatjPage .strEmpty {margin-top: 18px; color: var(--strMuted);} @media (max-width: 1180px) { .theme-2027 .strNatjPage .strShopMreza {grid-template-columns: repeat(3, minmax(0, 1fr));} } @media (max-width: 860px) { .theme-2027 .strNatjPage .strShopMreza {grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (max-width: 560px) { .theme-2027 .strNatjPage .strShopMreza {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;} } @media (max-width: 720px) { .theme-2027 .strNatjPage .strFallbackColumns {gap: 4px; justify-content: space-between; padding: 20px 0 26px; overflow-x: visible;} .theme-2027 .strNatjPage .strFallbackColumn {flex: 1 1 0; min-width: 0; max-width: none; gap: 5px;} .theme-2027 .strNatjPage .strFallbackColumn strong {font-size: .6rem;} .theme-2027 .strNatjPage .strFallbackColumn span {font-size: .54rem; overflow-wrap: anywhere;} } @media (max-width: 460px) { .theme-2027 .strNatjPage .strFallbackColumns {gap: 2px;} .theme-2027 .strNatjPage .strFallbackColumn strong {font-size: .53rem;} .theme-2027 .strNatjPage .strFallbackColumn span {font-size: .5rem;} } .theme-2027 .strNatjPage .strPulseTable thead th {text-align: left;} .theme-2027 .strNatjPage .strSeoLinks a {display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; line-height: 1.2;} .theme-2027 .strNatjPage .strSeoLinks a small {color: var(--strMuted); font-size: .62rem; font-weight: 700; letter-spacing: .04em;} .theme-2027 .strNatjPage .strTagWrap a.strTagAI {text-decoration: none;} .theme-2027 .strNatjPage .strTagWrap a.strTagAI:hover {filter: brightness(.94);} .theme-2027 .strNatjPage .strExplorerShell {padding: 18px; background: linear-gradient(145deg, #fff, #f7f6fb); overflow: visible;} .theme-2027 .strNatjPage .strExplorerFilters {align-items: stretch;} @media (min-width: 861px) and (max-width: 1399px) { .theme-2027 .strNatjPage .strExplorerFilters {grid-template-columns: 1fr 1fr;} .theme-2027 .strNatjPage .strExplorerFilters .strField:first-child {grid-column: 1 / 3;} } .theme-2027 .strNatjPage .strSearchField {min-height: 50px; padding: 0 14px; border: 1px solid var(--strLine); border-radius: 16px; background: #fff;} .theme-2027 .strNatjPage .strSearchField:focus-within {border-color: rgba(101, 87, 255, .42); box-shadow: 0 0 0 4px rgba(101, 87, 255, .08);} .theme-2027 .strNatjPage .strSearchField .strField {min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none;} .theme-2027 .strNatjPage .strSearchField .strField:focus {border: 0; box-shadow: none;} .theme-2027 .strNatjPage select.strField {padding-right: 38px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6e7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 13px 13px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;} .theme-2027 .strNatjPage select.strField::-ms-expand {display: none;} .theme-2027 .strNatjPage .strPicker {position: relative; min-width: 0;} .theme-2027 .strNatjPage .strPickerBtn {display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; padding-right: 38px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b6e7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 13px 13px;} .theme-2027 .strNatjPage .strPickerBtn span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .theme-2027 .strNatjPage .strPickerBtn[aria-expanded="true"] {border-color: rgba(101, 87, 255, .42); box-shadow: 0 0 0 4px rgba(101, 87, 255, .08);} .theme-2027 .strNatjPage select.strPickerNativni {position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; background-image: none; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;} .theme-2027 .strNatjPage .strPickerPop {position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; padding: 10px; border: 1px solid var(--strLine); border-radius: 18px; background: #fff; box-shadow: var(--strShadow2);} .theme-2027 .strNatjPage .strPickerSearch {width: 100%; min-height: 38px; margin-bottom: 8px; padding: 0 12px; border: 1px solid var(--strLine); border-radius: 12px; background: #fff; font-size: .78rem; font-weight: 700; color: var(--strInk); outline: 0;} .theme-2027 .strNatjPage .strPickerSearch:focus {border-color: rgba(101, 87, 255, .42); box-shadow: 0 0 0 3px rgba(101, 87, 255, .08);} .theme-2027 .strNatjPage .strPickerList {max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain;} .theme-2027 .strNatjPage .strPickerItem {padding: 9px 12px; border-radius: 10px; color: var(--strInk2); font-size: .8rem; font-weight: 750; cursor: pointer;} .theme-2027 .strNatjPage .strPickerItem:hover {background: #f4f3f9; color: var(--strViolet);} .theme-2027 .strNatjPage .strPickerOdabran {color: #fff; background: var(--strInk);} .theme-2027 .strNatjPage .strPickerOdabran:hover {color: #fff; background: var(--strInk);} .theme-2027 .strNatjPage .strPickerEmpty {margin: 8px 4px 4px; color: var(--strMuted); font-size: .76rem;} .theme-2027 .strNatjPage .strFeaturedOverlay > *:not(.strFeaturedTop) {margin-top: auto;} .theme-2027 .strNatjPage .strCompetitionFoto {width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;} .theme-2027 .strNatjPage .strPulseTable td a {color: inherit; text-decoration: none; border-bottom: 1px solid rgba(101,87,255,.28);} .theme-2027 .strNatjPage .strPulseTable td a:hover {color: var(--strViolet); border-bottom-color: var(--strViolet);} .theme-2027 .strNatjPage .strFallbackColumn span {color: var(--strMuted);} .theme-2027 .strNatjPage .strFallbackColumns {border-bottom-color: var(--strLine);} .theme-2027 .strNatjPage .strChartCard {border-color: var(--strLine);} .theme-2027 .strNatjPage .strPulseTable td .strAgendaPrice {display: inline-block; margin-right: 14px; text-align: left; vertical-align: middle;} .theme-2027 .strNatjPage .strPulseTable td .tn-flag-img {display: inline-block; margin-right: 6px; vertical-align: middle;} .theme-2027 .strIzvodaciPage #strCompetitionRows {max-height: min(80vh, 1900px); overflow-y: auto; overscroll-behavior: contain;} .theme-2027 .strNatjPage .strPulseTable td a.strFxBuy, .theme-2027 .strNatjPage .strPulseTable td a.strFxBuy:hover {border-bottom: 0; color: inherit;} .theme-2027 .strNatjPage .strPulseTable td .strFxBuy {align-items: flex-end;} .theme-2027 .strNatjPage .strRouteStrip + .strAnalyticsSection {margin-top: 3rem;} .theme-2027 .strLigaPage, .theme-2027 .strAiPage {--strInk:#11121a;--strInk2:#202231;--strPaper:#f6f5f9;--strCard:#fff;--strLine:rgba(17,18,26,.11);--strMuted:#6b6e7d; --strPink:#e11d48;--strPink2:#b8163a;--strViolet:#6557ff;--strLime:#d9ff66;--strAqua:#6fe5ff;--strYellow:#ffcf5a; --strGreen:#31c48d;--strRed:#ff6b6b;--strOrange:#ff9f43;--strShadowS:0 12px 34px rgba(25,23,43,.09);--strShadowL:0 28px 82px rgba(23,20,45,.18); --strRadiusS:14px;--strRadiusM:22px;--strRadiusL:34px;--strContainer:1380px;} .theme-2027 .strLigaPage .strHeroActions {display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .theme-2027 .strLigaPage .strToolbar {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px} .theme-2027 .strLigaPage .strSearchCompact {min-width:min(100%,370px);display:grid;grid-template-columns:22px 1fr;align-items:center;gap:9px;padding:11px 14px;border:1px solid var(--strLine);border-radius:999px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strSearchCompact input, .theme-2027 .strAiPage .strSearchCompact input {min-width:0;border:0;outline:0;background:transparent;font-size:.84rem} .theme-2027 .strLigaPage .strCount, .theme-2027 .strAiPage .strCount {color:var(--strMuted);font-size:.79rem;font-weight:740} /* 🔴 14-09-2026 (izmjereno na 360 px): naslov i izbornik stajali su u jednom redu koji se nije smio prelomiti, pa je na njemackom i francuskom izbornik virio izvan kartice. Red se sada prelama, a izbornik smije biti uzi od svog natpisa. */ .theme-2027 .strLigaPage .strCardHead, .theme-2027 .strAiPage .strCardHead {display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid var(--strLine)} .theme-2027 .strLigaPage .strCardHead > *, .theme-2027 .strAiPage .strCardHead > * {min-width:0} .theme-2027 .strLigaPage .strCardHead h3, .theme-2027 .strAiPage .strCardHead h3 {margin:0;font-size:1.3rem;letter-spacing:-.025em} .theme-2027 .strLigaPage .strCardHead p, .theme-2027 .strAiPage .strCardHead p {margin:5px 0 0;color:var(--strMuted);font-size:.78rem} .theme-2027 .strLigaPage .strStatusPill {display:inline-flex;justify-content:center;padding:6px 8px;border-radius:999px;font-size:.65rem;font-weight:860} .theme-2027 .strLigaPage .strStatusPill.strHit, .theme-2027 .strAiPage .strStatusPill.strHit {color:#071b13;background:var(--strLime)} .theme-2027 .strLigaPage .strStatusPill.strMiss {color:#fff;background:rgba(255,107,107,.23);border:1px solid rgba(255,107,107,.35)} .theme-2027 .strLigaPage .strMethodGrid {display:grid;grid-template-columns:repeat(4,1fr);gap:15px} .theme-2027 .strLigaPage .strMethodCard {min-height:230px;padding:22px;border:1px solid rgba(17,18,26,.08);border-radius:24px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strMethodNo, .theme-2027 .strAiPage .strMethodNo {width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:var(--strViolet);background:rgba(101,87,255,.1);font-size:.72rem;font-weight:920} .theme-2027 .strLigaPage .strMethodCard h3, .theme-2027 .strAiPage .strMethodCard h3 {margin:40px 0 9px;font-size:1.14rem} .theme-2027 .strLigaPage .strMethodCard p, .theme-2027 .strAiPage .strMethodCard p {margin:0;color:var(--strMuted);font-size:.79rem} .theme-2027 .strLigaPage .strMethodCard:nth-child(2) .strMethodNo, .theme-2027 .strAiPage .strMethodCard:nth-child(2) .strMethodNo {color:var(--strPink2);background:rgba(255,77,114,.1)} .theme-2027 .strLigaPage .strMethodCard:nth-child(3) .strMethodNo, .theme-2027 .strAiPage .strMethodCard:nth-child(3) .strMethodNo {color:#08795a;background:rgba(49,196,141,.1)} .theme-2027 .strLigaPage .strMethodCard:nth-child(4) .strMethodNo, .theme-2027 .strAiPage .strMethodCard:nth-child(4) .strMethodNo {color:#7c5a00;background:rgba(255,207,90,.2)} .theme-2027 .strLigaPage .strExperienceRow, .theme-2027 .strAiPage .strExperienceRow {display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.78rem;font-weight:760} .theme-2027 .strLigaPage .strExperienceRow i, .theme-2027 .strAiPage .strExperienceRow i {width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:var(--strInk);background:var(--strLime);font-style:normal;font-size:.7rem;font-weight:920} .theme-2027 .strLigaPage .strExperienceRow span:last-child, .theme-2027 .strAiPage .strExperienceRow span:last-child {color:rgba(255,255,255,.46);font-size:.67rem;text-transform:uppercase} .theme-2027 .strLigaPage .strFaqGrid {display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .theme-2027 .strLigaPage .strFaqItem, .theme-2027 .strAiPage .strFaqItem {overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:20px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strFaqButton {width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:0;color:var(--strInk);background:#fff;cursor:pointer;text-align:left;font-weight:830} .theme-2027 .strLigaPage .strFaqButton span:last-child {font-size:1.25rem} .theme-2027 .strLigaPage .strFaqAnswer, .theme-2027 .strAiPage .strFaqAnswer {padding:0 20px 20px;color:var(--strMuted);font-size:.82rem} .theme-2027 .strLigaPage .strRoundPreview {position:relative;width:min(560px,100%);margin:0 auto;overflow:hidden;border-radius:28px;color:#fff;background:rgba(17,18,26,.97);box-shadow:var(--strShadowL);transform:rotate(-2deg)} /* 🔴 14-09-2026 (izmjereno na 768 px): red se nije prelamao, a plocica ishoda nije se smjela suziti, pa je poljski natpis („rozstrzygniecie") virio izvan ploce i bio odrezan. Red se sada prelama, a predug natpis dobiva tri tockice umjesto reza. */ .theme-2027 .strLigaPage .strRoundPreviewHead {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1)} .theme-2027 .strLigaPage .strStatusPill {max-width:100%;overflow:hidden;text-overflow:ellipsis} .theme-2027 .strLigaPage .strRoundPreviewHead strong {font-size:.85rem} .theme-2027 .strLigaPage .strRoundPreviewHead span {color:var(--strLime);font-size:.66rem;font-weight:820} .theme-2027 .strLigaPage .strRoundPreviewMatch {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:22px 18px;text-align:center} .theme-2027 .strLigaPage .strRoundPreviewMatch strong {font-size:.82rem} .theme-2027 .strLigaPage .strRoundPreviewScore {font-size:2rem;font-weight:930} .theme-2027 .strLigaPage .strRoundPreviewScore span {color:var(--strPink)} .theme-2027 .strLigaPage .strRoundPreviewFoot {padding:13px 18px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);font-size:.67rem} .theme-2027 .strLigaPage .strRoundPreviewFoot strong {color:#fff} .theme-2027 .strLigaPage .strRoundRail {max-width:100%;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none} .theme-2027 .strLigaPage .strRoundRail::-webkit-scrollbar {display:none} .theme-2027 .strLigaPage .strRoundRailInner {display:flex;min-width:max-content;gap:7px} .theme-2027 .strLigaPage .strRoundButton {width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--strLine);border-radius:16px;color:var(--strMuted);background:#fff;cursor:pointer;font-size:.76rem;font-weight:880} .theme-2027 .strLigaPage .strRoundButton[aria-pressed="true"] {color:#fff;border-color:var(--strInk);background:var(--strInk);box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strRoundButton.strComplete:after {position:absolute} .theme-2027 .strLigaPage .strRoundButton.strFuture {opacity:.42;cursor:not-allowed} .theme-2027 .strLigaPage .strRoundLegend {display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;color:var(--strMuted);font-size:.68rem} .theme-2027 .strLigaPage .strRoundLegend span {display:inline-flex;align-items:center;gap:6px} .theme-2027 .strLigaPage .strRoundLegend i {width:8px;height:8px;border-radius:50%;background:var(--strGreen)} .theme-2027 .strLigaPage .strRoundLegend span:nth-child(2) i {background:var(--strInk)} .theme-2027 .strLigaPage .strRoundLegend span:nth-child(3) i {background:#c6c4cd} .theme-2027 .strLigaPage .strRoundBoard {overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:30px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strRoundBoardHead {display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px;border-bottom:1px solid var(--strLine)} .theme-2027 .strLigaPage .strRoundBoardHead h3 {margin:0;font-size:1.45rem} .theme-2027 .strLigaPage .strRoundBoardHead p {margin:5px 0 0;color:var(--strMuted);font-size:.78rem} .theme-2027 .strLigaPage .strRoundStatus {display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;color:#08795a;background:rgba(49,196,141,.11);font-size:.68rem;font-weight:840} .theme-2027 .strLigaPage .strRoundStatus i {width:7px;height:7px;border-radius:50%;background:var(--strGreen)} .theme-2027 .strLigaPage .strRoundMatch {display:grid;grid-template-columns:120px minmax(300px,1fr) 120px minmax(220px,.65fr) 48px;align-items:center;gap:14px;padding:18px 22px;border-top:1px solid var(--strLine)} .theme-2027 .strLigaPage .strRoundDate strong {display:block;font-size:.87rem} .theme-2027 .strLigaPage .strRoundDate span {color:var(--strMuted);font-size:.7rem} .theme-2027 .strLigaPage .strRoundTeams {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px} .theme-2027 .strLigaPage .strRoundTeamBadge {width:39px;height:39px;display:grid;flex:0 0 auto;place-items:center;border-radius:12px;color:#fff;background:var(--strPink);font-size:.65rem;font-weight:920} .theme-2027 .strLigaPage .strVersus {color:var(--strMuted);font-size:.7rem;font-weight:900} .theme-2027 .strLigaPage .strPredictionPending {text-align:center} .theme-2027 .strLigaPage .strPredictionPending strong {display:block;font-size:.82rem} .theme-2027 .strLigaPage .strPredictionPending span {display:block;color:var(--strMuted);font-size:.65rem} .theme-2027 .strLigaPage .strPublishWindow {display:flex;align-items:center;gap:9px} .theme-2027 .strLigaPage .strPublishIcon {width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:var(--strViolet);background:rgba(101,87,255,.1);font-size:.67rem;font-weight:920} .theme-2027 .strLigaPage .strPublishWindow strong {display:block;font-size:.74rem} .theme-2027 .strLigaPage .strPublishWindow span {display:block;color:var(--strMuted);font-size:.64rem} .theme-2027 .strLigaPage .strExpandButton {width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--strLine);border-radius:50%;background:#fff;cursor:pointer;font-weight:900} .theme-2027 .strLigaPage .strMatchDetail {grid-column:1/-1;padding:0 22px 19px} .theme-2027 .strLigaPage .strMatchDetailInner {display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;border-radius:18px;background:var(--strPaper)} .theme-2027 .strLigaPage .strMatchDetailItem small {display:block;color:var(--strMuted);font-size:.62rem;font-weight:820;text-transform:uppercase} .theme-2027 .strLigaPage .strMatchDetailItem strong {display:block;margin-top:4px;font-size:.76rem} .theme-2027 .strLigaPage .strRoundResultScores {display:grid;grid-template-columns:1fr 1fr;gap:6px} .theme-2027 .strLigaPage .strResultScore {padding:8px;border-radius:12px;text-align:center} .theme-2027 .strLigaPage .strResultScore small {display:block;color:var(--strMuted);font-size:.58rem;text-transform:uppercase} .theme-2027 .strLigaPage .strResultScore strong {font-size:.92rem} .theme-2027 .strLigaPage .strResultScore.strAi {background:rgba(101,87,255,.09)} .theme-2027 .strLigaPage .strResultScore.strActual {background:var(--strPaper)} .theme-2027 .strLigaPage .strRoundOutcome {text-align:center} .theme-2027 .strLigaPage .strRoundOutcome .strStatusPill {min-width:76px} .theme-2027 .strLigaPage .strLeagueDashboard {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:22px} .theme-2027 .strLigaPage .strStandingsCard, .theme-2027 .strLigaPage .strFormCard {overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strStandingsTabs {display:flex;gap:7px;padding:0 22px 16px} .theme-2027 .strLigaPage .strStandingsTab {padding:8px 12px;border:1px solid var(--strLine);border-radius:999px;background:#fff;cursor:pointer;font-size:.72rem;font-weight:820} .theme-2027 .strLigaPage .strStandingsTab[aria-pressed="true"] {color:#fff;border-color:var(--strInk);background:var(--strInk)} .theme-2027 .strLigaPage .strStandingsTable {width:100%;border-collapse:collapse} .theme-2027 .strLigaPage .strStandingsTable th, .theme-2027 .strLigaPage .strStandingsTable td {padding:11px 14px;border-top:1px solid var(--strLine);font-size:.72rem;text-align:center} .theme-2027 .strLigaPage .strStandingsTable th {color:var(--strMuted);background:#f0eff5;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase} .theme-2027 .strLigaPage .strStandingsTable th:nth-child(2), .theme-2027 .strLigaPage .strStandingsTable td:nth-child(2) {text-align:left} .theme-2027 .strLigaPage .strStandingsTable tbody tr:nth-child(-n+6) td:first-child {box-shadow:inset 4px 0 0 var(--strGreen)} .theme-2027 .strLigaPage .strStandingsTeam {display:flex;align-items:center;gap:9px} .theme-2027 .strLigaPage .strStandingsBadge {width:29px;height:29px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--strViolet);font-size:.58rem;font-weight:920} .theme-2027 .strLigaPage .strStandingsTeam strong {font-size:.72rem} .theme-2027 .strLigaPage .strFormCard {padding:24px} .theme-2027 .strLigaPage .strFormCard h3 {margin:0;font-size:1.35rem} .theme-2027 .strLigaPage .strFormCard p {margin:5px 0 0;color:var(--strMuted);font-size:.74rem} .theme-2027 .strLigaPage .strFormList {display:grid;gap:10px;margin-top:20px} .theme-2027 .strLigaPage .strFormRow {display:grid;grid-template-columns:minmax(0,1fr) repeat(3,26px) 46px;align-items:center;gap:7px} .theme-2027 .strLigaPage .strFormRow strong {font-size:.77rem} .theme-2027 .strLigaPage .strFormMark {width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:#fff;font-size:.6rem;font-weight:920} .theme-2027 .strLigaPage .strFormMark.strWin {background:var(--strGreen)} .theme-2027 .strLigaPage .strFormMark.strDraw {color:var(--strInk);background:var(--strYellow)} .theme-2027 .strLigaPage .strFormMark.strLoss {background:var(--strRed)} .theme-2027 .strLigaPage .strFormPoints {text-align:right;color:var(--strMuted);font-size:.68rem;font-weight:800} .theme-2027 .strLigaPage .strLeagueInsight {margin-top:22px;padding:18px;border-radius:18px;color:#fff;background:var(--strInk)} .theme-2027 .strLigaPage .strLeagueInsight small {display:block;color:var(--strLime);font-size:.62rem;font-weight:850;text-transform:uppercase} .theme-2027 .strLigaPage .strLeagueInsight strong {display:block;margin-top:6px;font-size:1.1rem} .theme-2027 .strLigaPage .strLeagueInsight p {margin:7px 0 0;color:rgba(255,255,255,.58);font-size:.7rem} .theme-2027 .strLigaPage .strLeagueLab {overflow:hidden;color:#fff;background:radial-gradient(circle at 13% 20%,rgba(255,77,114,.17),transparent 30rem),radial-gradient(circle at 88% 12%,rgba(111,229,255,.14),transparent 28rem),var(--strInk)} .theme-2027 .strLigaPage .strLeagueLab .strEyebrow {color:var(--strLime)} .theme-2027 .strLigaPage .strLeagueLab .strEyebrow:before {background:var(--strLime);box-shadow:0 0 0 6px rgba(217,255,102,.1)} .theme-2027 .strLigaPage .strLeagueLab .strSectionIntro {color:rgba(255,255,255,.61)} .theme-2027 .strLigaPage .strLeagueLabGrid {display:grid;grid-template-columns:1fr 1fr;gap:22px} .theme-2027 .strLigaPage .strRoundTrend, .theme-2027 .strLigaPage .strOutcomeAudit {padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:rgba(255,255,255,.055);box-shadow:0 24px 70px rgba(0,0,0,.2)} .theme-2027 .strLigaPage .strRoundTrend h3, .theme-2027 .strLigaPage .strOutcomeAudit h3 {margin:0;font-size:1.35rem} .theme-2027 .strLigaPage .strRoundBars {display:grid;gap:15px;margin-top:24px} .theme-2027 .strLigaPage .strRoundBarRow {display:grid;grid-template-columns:82px 1fr 58px;align-items:center;gap:12px} .theme-2027 .strLigaPage .strRoundBarRow span {font-size:.72rem;font-weight:780} .theme-2027 .strLigaPage .strRoundBarTrack {height:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09)} .theme-2027 .strLigaPage .strRoundBarFill {height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--strPink),var(--strAqua))} .theme-2027 .strLigaPage .strRoundBarRow strong {text-align:right;font-size:.8rem} .theme-2027 .strLigaPage .strOutcomeAuditGrid {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px} .theme-2027 .strLigaPage .strOutcomeAuditCard {padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.04)} .theme-2027 .strLigaPage .strOutcomeAuditCard small {display:block;color:rgba(255,255,255,.48);font-size:.62rem;font-weight:800;text-transform:uppercase} .theme-2027 .strLigaPage .strOutcomeAuditCard strong {display:block;margin-top:5px;font-size:1.7rem} .theme-2027 .strLigaPage .strOutcomeAuditCard span {color:rgba(255,255,255,.58);font-size:.67rem} .theme-2027 .strLigaPage .strWeakness {margin-top:18px;padding:16px;border-left:4px solid var(--strYellow);border-radius:0 14px 14px 0;background:rgba(255,207,90,.08)} .theme-2027 .strLigaPage .strWeakness strong {display:block;color:var(--strYellow);font-size:.75rem} .theme-2027 .strLigaPage .strWeakness p {margin:5px 0 0;color:rgba(255,255,255,.6);font-size:.72rem} .theme-2027 .strLigaPage .strFormatGrid {display:grid;grid-template-columns:repeat(3,1fr);gap:15px} .theme-2027 .strLigaPage .strFormatCard {padding:24px;border:1px solid rgba(17,18,26,.08);border-radius:24px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strFormatCard span {display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--strViolet);background:rgba(101,87,255,.1);font-size:.72rem;font-weight:920} .theme-2027 .strLigaPage .strFormatCard h3 {margin:28px 0 9px;font-size:1.15rem} .theme-2027 .strLigaPage .strFormatCard p {margin:0;color:var(--strMuted);font-size:.78rem} .theme-2027 .strLigaPage .strExperienceCards {display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .theme-2027 .strLigaPage .strExperienceCard {overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:26px;background:#fff;box-shadow:var(--strShadowS);transition:transform .2s ease,box-shadow .2s ease} .theme-2027 .strLigaPage .strExperienceCard:hover {transform:translateY(-5px);box-shadow:0 22px 55px rgba(25,23,43,.15)} .theme-2027 .strLigaPage .strExperienceCardImage {position:relative;height:220px;overflow:hidden} .theme-2027 .strLigaPage .strExperienceCardImage:after {position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,11,17,.78));content:""} .theme-2027 .strLigaPage .strExperienceCardImage img {height:100%;object-fit:cover;transition:transform .4s ease} .theme-2027 .strLigaPage .strExperienceCard:hover img {transform:scale(1.04)} .theme-2027 .strLigaPage .strExperienceCardTag {position:absolute;top:14px;left:14px;z-index:2;padding:7px 10px;border-radius:999px;color:var(--strInk);background:var(--strLime);font-size:.65rem;font-weight:850} .theme-2027 .strLigaPage .strExperienceCardBody {padding:20px} .theme-2027 .strLigaPage .strExperienceCardBody small {color:var(--strViolet);font-size:.67rem;font-weight:850;text-transform:uppercase} .theme-2027 .strLigaPage .strExperienceCardBody h3 {margin:6px 0 8px;font-size:1.18rem;line-height:1.08} .theme-2027 .strLigaPage .strExperienceCardBody p {margin:0;color:var(--strMuted);font-size:.76rem} .theme-2027 .strLigaPage .strExperienceCardMeta {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--strLine);font-size:.73rem} .theme-2027 .strLigaPage .strExperienceCardMeta strong {font-size:.88rem} /* 🔴 14-09-2026 (nalog korisnika): ljubicasta vrijedi samo za NEPOSREDNI natpis u retku, nikad za sadrzaj portalskog gumba za ulaznice — ondje je pisala ljubicastim po ruzicastoj podlozi, pa se natpis „Kupi ulaznice" i cijena nisu vidjeli. */ .theme-2027 .strLigaPage .strExperienceCardMeta > span:not(.strFxBuy) {color:var(--strViolet);font-weight:850} @media(max-width:1160px) { .theme-2027 .strLigaPage .strLeagueDashboard {grid-template-columns:1fr} .theme-2027 .strLigaPage .strMethodGrid {grid-template-columns:repeat(2,1fr)} .theme-2027 .strLigaPage .strRoundMatch {grid-template-columns:100px minmax(260px,1fr) 110px minmax(190px,.6fr) 44px} } @media(max-width:900px) { .theme-2027 .strLigaPage .strLeagueLabGrid {grid-template-columns:1fr} .theme-2027 .strLigaPage .strMethodGrid, .theme-2027 .strLigaPage .strFormatGrid {grid-template-columns:repeat(2,1fr)} .theme-2027 .strLigaPage .strFaqGrid {grid-template-columns:1fr} .theme-2027 .strLigaPage .strRoundMatch {grid-template-columns:88px minmax(0,1fr) 96px 42px} .theme-2027 .strLigaPage .strPublishWindow {grid-column:2/5} .theme-2027 .strLigaPage .strRoundTeams {grid-template-columns:1fr auto 1fr} .theme-2027 .strLigaPage .strMatchDetailInner {grid-template-columns:repeat(2,1fr)} .theme-2027 .strLigaPage .strExperienceCards {grid-template-columns:1fr 1fr} } @media(max-width:620px) { .theme-2027 .strLigaPage .strHeroActions {display:grid} .theme-2027 .strLigaPage .strHeroActions .strButton, .theme-2027 .strAiPage .strHeroActions .strButton {width:100%} .theme-2027 .strLigaPage .strToolbar {align-items:stretch;flex-direction:column} .theme-2027 .strLigaPage .strSearchCompact {min-width:100%} .theme-2027 .strLigaPage .strMethodGrid, .theme-2027 .strLigaPage .strFormatGrid {grid-template-columns:1fr} .theme-2027 .strLigaPage .strMethodCard {min-height:190px} .theme-2027 .strLigaPage .strRoundBoard {overflow:visible;border:0;background:transparent;box-shadow:none} .theme-2027 .strLigaPage .strRoundBoardHead {margin-bottom:10px;border:1px solid rgba(17,18,26,.08);border-radius:20px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strRoundMatch {grid-template-columns:66px minmax(0,1fr) 38px;gap:9px;margin-bottom:10px;padding:14px;border:1px solid rgba(17,18,26,.08);border-radius:20px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strLigaPage .strPredictionPending, .theme-2027 .strLigaPage .strRoundOutcome {grid-column:2/3;text-align:left} .theme-2027 .strLigaPage .strPublishWindow {grid-column:1/4;padding-top:10px;border-top:1px solid var(--strLine)} .theme-2027 .strLigaPage .strRoundTeams {grid-template-columns:1fr;gap:5px} .theme-2027 .strLigaPage .strVersus {display:none} .theme-2027 .strLigaPage .strMatchDetail {grid-column:1/4;padding:0} .theme-2027 .strLigaPage .strMatchDetailInner {grid-template-columns:1fr} .theme-2027 .strLigaPage .strLeagueDashboard {gap:14px} .theme-2027 .strLigaPage .strStandingsTable th, .theme-2027 .strLigaPage .strStandingsTable td {padding:9px 7px;font-size:.65rem} .theme-2027 .strLigaPage .strStandingsTable th:nth-child(4), .theme-2027 .strLigaPage .strStandingsTable td:nth-child(4), .theme-2027 .strLigaPage .strStandingsTable th:nth-child(5), .theme-2027 .strLigaPage .strStandingsTable td:nth-child(5), .theme-2027 .strLigaPage .strStandingsTable th:nth-child(6), .theme-2027 .strLigaPage .strStandingsTable td:nth-child(6) {display:none} .theme-2027 .strLigaPage .strOutcomeAuditGrid {grid-template-columns:1fr} .theme-2027 .strLigaPage .strExperienceCards {grid-template-columns:1fr} } .theme-2027 .strLigaPage .strHeroSearch {position: relative; max-width: 790px; margin-top: 32px;} .theme-2027 .strLigaPage .strDonut {background: conic-gradient(var(--strAqua) 0 var(--strDonutPct, 0%), rgba(255,255,255,.09) var(--strDonutPct, 0%) 100%);} .theme-2027 .strLigaPage .strFaqButton {list-style: none;} .theme-2027 .strLigaPage .strFaqButton::-webkit-details-marker, .theme-2027 .strAiPage .strFaqButton::-webkit-details-marker {display: none;} .theme-2027 .strLigaPage .strFaqButton span:last-child {transition: transform .18s ease;} .theme-2027 .strLigaPage .strFaqItem[open] .strFaqButton span:last-child, .theme-2027 .strAiPage .strFaqItem[open] .strFaqButton span:last-child {transform: rotate(45deg);} .theme-2027 .strLigaPage .strStatusPill {align-self: center; gap: 4px; align-items: center; white-space: nowrap; text-align: center;} @media (max-width: 620px) { .theme-2027 .strLigaPage .strSettledRow {grid-template-columns: 1fr 72px 92px;} } @media (max-width: 900px) { .theme-2027 .strLigaPage .strLeagueTableHeader, .theme-2027 .strLigaPage .strLeagueTableRow {grid-template-columns: minmax(160px,1fr) 92px 92px;} } @media (max-width: 620px) { .theme-2027 .strLigaPage .strRoundResultScores {grid-column: 2/3;} .theme-2027 .strLigaPage .strResultScore {padding: 6px;} } .theme-2027 .strLigaPage .strConcertGrid {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:265px;gap:18px} .theme-2027 .strLigaPage .strConcertLead {grid-column:span 7;grid-row:span 2} .theme-2027 .strLigaPage .strConcertTall {grid-column:span 5;grid-row:span 2} .theme-2027 .strLigaPage .strConcertTop {position:absolute;top:18px;right:18px;left:18px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .theme-2027 .strLigaPage .strConcertFoot {display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.82rem;font-weight:850} @media (max-width: 1160px) { .theme-2027 .strLigaPage .strConcertLead {grid-column:span 8} .theme-2027 .strLigaPage .strConcertTall {grid-column:span 4} } @media (max-width: 900px) { .theme-2027 .strLigaPage .strConcertGrid {grid-template-columns:repeat(2,1fr);grid-auto-rows:310px} .theme-2027 .strLigaPage .strConcertLead, .theme-2027 .strLigaPage .strConcertTall, .theme-2027 .strLigaPage .strConcertSmall, .theme-2027 .strLigaPage .strConcertWide {grid-column:auto;grid-row:auto} .theme-2027 .strLigaPage .strConcertLead {grid-column:span 2;grid-row:span 2} .theme-2027 .strLigaPage .strConcertTall {grid-column:span 2} } @media (max-width: 620px) { .theme-2027 .strLigaPage .strConcertGrid {grid-template-columns:1fr;grid-auto-rows:430px} .theme-2027 .strLigaPage .strConcertLead, .theme-2027 .strLigaPage .strConcertTall, .theme-2027 .strLigaPage .strConcertSmall, .theme-2027 .strLigaPage .strConcertWide {grid-column:auto!important;grid-row:auto!important} .theme-2027 .strLigaPage .strConcertTop {align-items:flex-start;flex-direction:column} } .theme-2027 .strLigaPage .strHeroActions {margin-top:18px} .theme-2027 .strLigaPage .strHeroSearch {margin-top:20px} .theme-2027 .strLigaPage .strStatusPill.strMiss {color:#8a1220;background:rgba(255,107,107,.18);border-color:rgba(138,18,32,.28)} /* 🔴 14-09-2026 (nalog korisnika): u TAMNOJ ploci najave kola ta je pilula ostajala tamnocrvena na tamnoj podlozi, pa se natpis „promasaj" nije vidio. Na tamnome ide svijetlo, kao sto je i pisalo u pravilu za tamne plohe. */ .theme-2027 .strLigaPage .strRoundPreview .strStatusPill.strMiss {color:#fff} .theme-2027 .strLigaPage .strRoundButton.strComplete:after {content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--strGreen)} .theme-2027 .strLigaPage .strMatchMeta {grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:var(--strMuted);font-size:.74rem;font-weight:700} .theme-2027 .strLigaPage .strExperienceCards {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:265px;gap:18px} .theme-2027 .strLigaPage .strExperienceCard {position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:30px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowS);transition:transform .25s ease,box-shadow .25s ease;grid-column:span 4;grid-row:span 1} .theme-2027 .strLigaPage .strExperienceCard:hover {transform:translateY(-6px);box-shadow:var(--strShadowL)} .theme-2027 .strLigaPage .strExperienceCardImage {position:absolute;inset:0;z-index:-2;height:100%;border-radius:0} .theme-2027 .strLigaPage .strExperienceCardImage img {width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .theme-2027 .strLigaPage .strExperienceCardTag {position:absolute;top:18px;left:18px;z-index:2;padding:7px 12px;border-radius:999px;color:var(--strInk);background:var(--strLime);font-size:.68rem;font-weight:880} .theme-2027 .strLigaPage .strExperienceCardBody {position:absolute;right:23px;bottom:22px;left:23px;z-index:2;padding:0} .theme-2027 .strLigaPage .strExperienceCardBody small {display:block;color:rgba(255,255,255,.72);font-size:.68rem;font-weight:820;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strLigaPage .strExperienceCardBody h3 {margin:8px 0 6px;color:#fff;font-size:clamp(1.5rem,2.2vw,2.4rem);line-height:1.05;letter-spacing:-.04em} .theme-2027 .strLigaPage .strExperienceCardMeta {display:flex;align-items:center;justify-content:space-between;gap:14px;border:0;padding:0} @media (max-width: 1160px) { .theme-2027 .strLigaPage .strExperienceCards {grid-template-columns:repeat(8,1fr)} .theme-2027 .strLigaPage .strExperienceCard, .theme-2027 .strLigaPage .strExperienceCard:nth-child(1), .theme-2027 .strLigaPage .strExperienceCard:nth-child(2) {grid-column:span 4} } @media (max-width: 900px) { .theme-2027 .strLigaPage .strExperienceCards {grid-template-columns:repeat(2,1fr);grid-auto-rows:300px} .theme-2027 .strLigaPage .strExperienceCard, .theme-2027 .strLigaPage .strExperienceCard:nth-child(1), .theme-2027 .strLigaPage .strExperienceCard:nth-child(2) {grid-column:span 1;grid-row:span 1} } @media (max-width: 620px) { .theme-2027 .strLigaPage .strExperienceCards {grid-template-columns:1fr;grid-auto-rows:340px} } @media (min-width: 1181px) { .theme-2027 .strLigaPage .strRoundMatch {grid-template-columns:120px minmax(220px,1fr) 214px minmax(200px,.6fr) 48px} } @media (min-width: 981px) and (max-width: 1180px) { .theme-2027 .strLigaPage .strRoundMatch {grid-template-columns:100px minmax(170px,1fr) 214px minmax(170px,.55fr) 44px} } @media (min-width: 981px) { .theme-2027 .strLigaPage .strResultScore small {white-space:nowrap} } .theme-2027 .strLigaPage .strRoundHeadRow {padding-top:14px;padding-bottom:0;border-top:0} @media (max-width: 700px) { .theme-2027 .strLigaPage .strRoundHeadRow {display:none} } .theme-2027 .strLigaPage .strPublishWindow {align-items:flex-start} @media (min-width: 981px) { .theme-2027 .strLigaPage .strLeagueDashboard {align-items: start;} } @media (max-width: 700px) { .theme-2027 .strLigaPage .strMatchMeta {grid-column: 1 / -1;} .theme-2027 .strLigaPage .strExpandButton {grid-column: 3; grid-row: 1; justify-self: end; align-self: start;} } .theme-2027 .strStandupPage {--strInk:#11121a;--strInkSoft:#292b38;--strPaper:#f6f5f9;--strCard:#fff;--strLine:rgba(17,18,26,.11); --strMuted:#6b6e7d;--strPink:#e11d48;--strPinkDark:#b8163a;--strViolet:#6557ff;--strLime:#d9ff66; --strAqua:#6fe5ff;--strYellow:#ffcf5a;--strSuccess:#31c48d;--strShadowS:0 12px 34px rgba(25,23,43,.09); --strShadowL:0 28px 80px rgba(23,20,45,.18);--strContainer:1380px} .theme-2027 .strStandupPage *, .theme-2027 .strStandupPage *::before, .theme-2027 .strStandupPage *::after {box-sizing:border-box} .theme-2027 .strStandupPage {scroll-behavior:smooth;-webkit-text-size-adjust:100%} .theme-2027 .strStandupPage img, .theme-2027 .strFestivaliPage img, .theme-2027 .strKoncertiPage img, .theme-2027 .strSportPage img {display:block;width:100%;height:auto} .theme-2027 .strStandupPage a, .theme-2027 .strFestivaliPage a, .theme-2027 .strKoncertiPage a, .theme-2027 .strSportPage a {color:inherit;text-decoration:none} .theme-2027 .strStandupPage button, .theme-2027 .strStandupPage input, .theme-2027 .strStandupPage select, .theme-2027 .strFestivaliPage button, .theme-2027 .strFestivaliPage input, .theme-2027 .strFestivaliPage select, .theme-2027 .strKoncertiPage button, .theme-2027 .strKoncertiPage input, .theme-2027 .strKoncertiPage select, .theme-2027 .strSportPage button, .theme-2027 .strSportPage input, .theme-2027 .strSportPage select {font:inherit} .theme-2027 .strStandupPage button, .theme-2027 .strStandupPage a, .theme-2027 .strFestivaliPage button, .theme-2027 .strFestivaliPage a, .theme-2027 .strKoncertiPage button, .theme-2027 .strKoncertiPage a, .theme-2027 .strSportPage button, .theme-2027 .strSportPage a {-webkit-tap-highlight-color:transparent} .theme-2027 .strStandupPage button:focus-visible, .theme-2027 .strStandupPage a:focus-visible, .theme-2027 .strStandupPage input:focus-visible, .theme-2027 .strStandupPage select:focus-visible, .theme-2027 .strFestivaliPage button:focus-visible, .theme-2027 .strFestivaliPage a:focus-visible, .theme-2027 .strFestivaliPage input:focus-visible, .theme-2027 .strFestivaliPage select:focus-visible, .theme-2027 .strKoncertiPage button:focus-visible, .theme-2027 .strKoncertiPage a:focus-visible, .theme-2027 .strKoncertiPage input:focus-visible, .theme-2027 .strKoncertiPage select:focus-visible, .theme-2027 .strSportPage button:focus-visible, .theme-2027 .strSportPage a:focus-visible, .theme-2027 .strSportPage input:focus-visible, .theme-2027 .strSportPage select:focus-visible {outline:3px solid rgba(101,87,255,.42);outline-offset:3px} .theme-2027 .strStandupPage .strContainer {width:min(calc(100% - 40px),var(--strContainer));margin-inline:auto} .theme-2027 .strStandupPage .strSection {position:relative;padding:96px 0} .theme-2027 .strStandupPage .strSectionHead {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px} .theme-2027 .strStandupPage .strSectionHeadText, .theme-2027 .strFestivaliPage .strSectionHeadText, .theme-2027 .strKoncertiPage .strSectionHeadText {max-width:850px} .theme-2027 .strStandupPage .strEyebrow, .theme-2027 .strFestivaliPage .strEyebrow, .theme-2027 .strKoncertiPage .strEyebrow, .theme-2027 .strSportPage .strEyebrow {display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--strViolet);font-size:.76rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase} .theme-2027 .strStandupPage .strEyebrow::before, .theme-2027 .strFestivaliPage .strEyebrow::before, .theme-2027 .strKoncertiPage .strEyebrow::before, .theme-2027 .strSportPage .strEyebrow::before {width:8px;height:8px;border-radius:50%;background:var(--strPink);box-shadow:0 0 0 6px rgba(255,77,114,.1);content:""} .theme-2027 .strStandupPage .strSectionTitle, .theme-2027 .strFestivaliPage .strSectionTitle, .theme-2027 .strKoncertiPage .strSectionTitle {margin:0;font-size:clamp(2.15rem,4.1vw,4.6rem);line-height:1.01;letter-spacing:-.058em} .theme-2027 .strStandupPage .strSectionIntro, .theme-2027 .strFestivaliPage .strSectionIntro, .theme-2027 .strKoncertiPage .strSectionIntro, .theme-2027 .strSportPage .strSectionIntro {max-width:760px;margin:18px 0 0;color:var(--strMuted);font-size:clamp(1rem,1.4vw,1.17rem)} .theme-2027 .strStandupPage .strTextLink, .theme-2027 .strFestivaliPage .strTextLink, .theme-2027 .strKoncertiPage .strTextLink, .theme-2027 .strSportPage .strTextLink {display:inline-flex;flex:0 0 auto;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid currentColor;font-weight:780;transition:gap .18s ease,color .18s ease} .theme-2027 .strStandupPage .strTextLink:hover, .theme-2027 .strFestivaliPage .strTextLink:hover, .theme-2027 .strKoncertiPage .strTextLink:hover, .theme-2027 .strSportPage .strTextLink:hover {gap:14px;color:var(--strPinkDark)} .theme-2027 .strStandupPage .strButton, .theme-2027 .strFestivaliPage .strButton, .theme-2027 .strKoncertiPage .strButton, .theme-2027 .strSportPage .strButton {display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:10px;padding:12px 19px;border:1px solid transparent;border-radius:999px;cursor:pointer;font-weight:800;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease} .theme-2027 .strStandupPage .strButton:hover, .theme-2027 .strFestivaliPage .strButton:hover, .theme-2027 .strKoncertiPage .strButton:hover, .theme-2027 .strSportPage .strButton:hover {transform:translateY(-2px)} .theme-2027 .strStandupPage .strButtonPrimary {color:#fff;background:var(--strPink);box-shadow:0 12px 28px rgba(101,87,255,.24)} .theme-2027 .strStandupPage .strButtonPrimary:hover, .theme-2027 .strFestivaliPage .strButtonPrimary:hover, .theme-2027 .strKoncertiPage .strButtonPrimary:hover, .theme-2027 .strSportPage .strButtonPrimary:hover {box-shadow:0 16px 34px rgba(101,87,255,.34)} .theme-2027 .strStandupPage .strButtonDark, .theme-2027 .strFestivaliPage .strButtonDark, .theme-2027 .strKoncertiPage .strButtonDark, .theme-2027 .strSportPage .strButtonDark {color:#fff;background:var(--strInk)} .theme-2027 .strStandupPage .strButtonLight, .theme-2027 .strFestivaliPage .strButtonLight, .theme-2027 .strKoncertiPage .strButtonLight, .theme-2027 .strSportPage .strButtonLight {color:var(--strInk);background:#fff;border-color:var(--strLine)} .theme-2027 .strStandupPage .strButtonGhost, .theme-2027 .strFestivaliPage .strButtonGhost, .theme-2027 .strKoncertiPage .strButtonGhost, .theme-2027 .strSportPage .strButtonGhost {color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)} .theme-2027 .strStandupPage .strIcon, .theme-2027 .strFestivaliPage .strIcon, .theme-2027 .strKoncertiPage .strIcon, .theme-2027 .strSportPage .strIcon {width:20px;height:20px;flex:0 0 auto;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .theme-2027 .strStandupPage .strPill, .theme-2027 .strFestivaliPage .strPill, .theme-2027 .strKoncertiPage .strPill {display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:.72rem;font-weight:850;letter-spacing:.04em} .theme-2027 .strStandupPage .strPillLight, .theme-2027 .strFestivaliPage .strPillLight, .theme-2027 .strKoncertiPage .strPillLight {color:var(--strInk);background:rgba(255,255,255,.91);backdrop-filter:blur(10px)} .theme-2027 .strStandupPage .strPillPink, .theme-2027 .strFestivaliPage .strPillPink, .theme-2027 .strKoncertiPage .strPillPink {color:#fff;background:rgba(255,77,114,.94)} .theme-2027 .strStandupPage .strPillLime, .theme-2027 .strFestivaliPage .strPillLime, .theme-2027 .strKoncertiPage .strPillLime {color:var(--strInk);background:var(--strLime)} .theme-2027 .strStandupPage .strExperienceStep, .theme-2027 .strFestivaliPage .strExperienceStep, .theme-2027 .strKoncertiPage .strExperienceStep {display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--strLine);font-size:.72rem;font-weight:740} .theme-2027 .strStandupPage .strExperienceStep:first-of-type, .theme-2027 .strFestivaliPage .strExperienceStep:first-of-type, .theme-2027 .strKoncertiPage .strExperienceStep:first-of-type {border-top:0} .theme-2027 .strStandupPage .strExperienceStepIcon, .theme-2027 .strFestivaliPage .strExperienceStepIcon, .theme-2027 .strKoncertiPage .strExperienceStepIcon {width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:var(--strViolet);background:rgba(101,87,255,.1);font-size:.68rem;font-weight:900} .theme-2027 .strStandupPage .strExperienceStepStatus, .theme-2027 .strFestivaliPage .strExperienceStepStatus, .theme-2027 .strKoncertiPage .strExperienceStepStatus {color:var(--strSuccess)} .theme-2027 .strStandupPage .strPulse {position:relative;z-index:3;margin-top:-18px} .theme-2027 .strStandupPage .strConcertToolbar, .theme-2027 .strFestivaliPage .strConcertToolbar, .theme-2027 .strKoncertiPage .strConcertToolbar {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px} .theme-2027 .strStandupPage .strFilterGroup {display:flex;flex-wrap:wrap;gap:8px} .theme-2027 .strStandupPage .strFilterButton {padding:10px 15px;border:1px solid var(--strLine);border-radius:999px;color:var(--strInkSoft);background:#fff;cursor:pointer;font-size:.82rem;font-weight:800;transition:color .18s ease,background .18s ease,border-color .18s ease} .theme-2027 .strStandupPage .strFilterButton[aria-pressed="true"], .theme-2027 .strFestivaliPage .strFilterButton[aria-pressed="true"], .theme-2027 .strKoncertiPage .strFilterButton[aria-pressed="true"], .theme-2027 .strSportPage .strFilterButton[aria-pressed="true"] {color:#fff;border-color:var(--strInk);background:var(--strInk)} .theme-2027 .strStandupPage .strFilterButton:hover, .theme-2027 .strFestivaliPage .strFilterButton:hover, .theme-2027 .strKoncertiPage .strFilterButton:hover, .theme-2027 .strSportPage .strFilterButton:hover {border-color:rgba(101,87,255,.35)} .theme-2027 .strStandupPage .strConcertGrid {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:265px;gap:18px} .theme-2027 .strStandupPage .strConcertCard.strHidden, .theme-2027 .strFestivaliPage .strConcertCard.strHidden, .theme-2027 .strKoncertiPage .strConcertCard.strHidden {display:none} .theme-2027 .strStandupPage .strConcertLead {grid-column:span 7;grid-row:span 2} .theme-2027 .strStandupPage .strConcertTall {grid-column:span 5;grid-row:span 2} .theme-2027 .strStandupPage .strConcertTop {position:absolute;top:18px;right:18px;left:18px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .theme-2027 .strStandupPage .strConcertBody h3, .theme-2027 .strFestivaliPage .strConcertBody h3, .theme-2027 .strKoncertiPage .strConcertBody h3 {max-width:720px;margin:7px 0 12px;font-size:clamp(1.75rem,2.8vw,3.35rem);line-height:.95;letter-spacing:-.045em} .theme-2027 .strStandupPage .strConcertLead .strConcertBody h3, .theme-2027 .strFestivaliPage .strConcertLead .strConcertBody h3, .theme-2027 .strKoncertiPage .strConcertLead .strConcertBody h3 {font-size:clamp(2.8rem,5vw,5.5rem)} .theme-2027 .strStandupPage .strConcertFoot {display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.82rem;font-weight:850} .theme-2027 .strStandupPage .strAgendaSection, .theme-2027 .strFestivaliPage .strAgendaSection, .theme-2027 .strKoncertiPage .strAgendaSection {background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0))} .theme-2027 .strStandupPage .strAgendaShell {display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start} .theme-2027 .strStandupPage .strAgendaAside {position:sticky;top:120px;padding:27px;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strStandupPage .strAgendaAside h3, .theme-2027 .strFestivaliPage .strAgendaAside h3, .theme-2027 .strKoncertiPage .strAgendaAside h3 {margin:0;font-size:1.45rem;letter-spacing:-.035em} .theme-2027 .strStandupPage .strAgendaAside p, .theme-2027 .strFestivaliPage .strAgendaAside p, .theme-2027 .strKoncertiPage .strAgendaAside p {margin:10px 0 20px;color:var(--strMuted);font-size:.84rem} .theme-2027 .strStandupPage .strDateLinks, .theme-2027 .strFestivaliPage .strDateLinks, .theme-2027 .strKoncertiPage .strDateLinks {display:grid;gap:7px} .theme-2027 .strStandupPage .strDateLink, .theme-2027 .strFestivaliPage .strDateLink, .theme-2027 .strKoncertiPage .strDateLink {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border:1px solid var(--strLine);border-radius:14px;background:var(--strPaper);font-size:.78rem;font-weight:800;transition:border-color .18s ease,background .18s ease,color .18s ease} .theme-2027 .strStandupPage .strDateLink:hover, .theme-2027 .strStandupPage .strDateLink.strActive, .theme-2027 .strFestivaliPage .strDateLink:hover, .theme-2027 .strFestivaliPage .strDateLink.strActive, .theme-2027 .strKoncertiPage .strDateLink:hover, .theme-2027 .strKoncertiPage .strDateLink.strActive {color:#fff;border-color:var(--strInk);background:var(--strInk)} .theme-2027 .strStandupPage .strDateLink span, .theme-2027 .strFestivaliPage .strDateLink span, .theme-2027 .strKoncertiPage .strDateLink span {color:inherit;opacity:.62} .theme-2027 .strStandupPage .strCountryFilter {display:grid;gap:8px;margin-top:23px;padding-top:21px;border-top:1px solid var(--strLine)} .theme-2027 .strStandupPage .strCountryFilter h4 {margin:0 0 4px;color:var(--strMuted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase} .theme-2027 .strStandupPage .strCountryButton, .theme-2027 .strFestivaliPage .strCountryButton, .theme-2027 .strKoncertiPage .strCountryButton {display:flex;align-items:center;justify-content:space-between;padding:9px 0;border:0;color:var(--strInkSoft);background:transparent;cursor:pointer;font-size:.78rem;font-weight:760;text-align:left} .theme-2027 .strStandupPage .strCountryButton[aria-pressed="true"], .theme-2027 .strFestivaliPage .strCountryButton[aria-pressed="true"], .theme-2027 .strKoncertiPage .strCountryButton[aria-pressed="true"] {color:var(--strViolet)} .theme-2027 .strStandupPage .strAgendaList, .theme-2027 .strFestivaliPage .strAgendaList, .theme-2027 .strKoncertiPage .strAgendaList {display:grid;gap:10px} .theme-2027 .strStandupPage .strAgendaRow {display:grid;grid-template-columns:48px 126px minmax(0,1fr) 120px 48px;align-items:center;gap:18px;padding:13px;border:1px solid rgba(17,18,26,.08);border-radius:22px;background:#fff;box-shadow:0 8px 25px rgba(25,23,43,.055);transition:transform .2s ease,box-shadow .2s ease} .theme-2027 .strStandupPage .strAgendaRow:hover, .theme-2027 .strFestivaliPage .strAgendaRow:hover, .theme-2027 .strKoncertiPage .strAgendaRow:hover {transform:translateX(5px);box-shadow:var(--strShadowS)} .theme-2027 .strStandupPage .strAgendaRow.strHidden, .theme-2027 .strFestivaliPage .strAgendaRow.strHidden, .theme-2027 .strKoncertiPage .strAgendaRow.strHidden {display:none} .theme-2027 .strStandupPage .strAgendaNumber, .theme-2027 .strFestivaliPage .strAgendaNumber, .theme-2027 .strKoncertiPage .strAgendaNumber {color:#a0a2ad;font-size:.74rem;font-weight:900;letter-spacing:.08em;text-align:center} .theme-2027 .strStandupPage .strAgendaThumb {height:78px;overflow:hidden;border-radius:16px;background:#e8e7ee} .theme-2027 .strStandupPage .strAgendaThumb img, .theme-2027 .strFestivaliPage .strAgendaThumb img, .theme-2027 .strKoncertiPage .strAgendaThumb img {height:100%;object-fit:cover} .theme-2027 .strStandupPage .strAgendaMain, .theme-2027 .strFestivaliPage .strAgendaMain, .theme-2027 .strKoncertiPage .strAgendaMain {min-width:0} .theme-2027 .strStandupPage .strAgendaMeta, .theme-2027 .strFestivaliPage .strAgendaMeta, .theme-2027 .strKoncertiPage .strAgendaMeta {color:var(--strViolet);font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strStandupPage .strAgendaMain h3 {margin:5px 0 4px;font-size:1.18rem;line-height:1.05;letter-spacing:-.025em} .theme-2027 .strStandupPage .strAgendaMain p {margin:0;color:var(--strMuted);font-size:.78rem} .theme-2027 .strStandupPage .strAgendaPrice small, .theme-2027 .strKoncertiPage .strAgendaPrice small {display:block;color:var(--strMuted);font-size:.63rem;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strStandupPage .strAgendaPrice strong, .theme-2027 .strKoncertiPage .strAgendaPrice strong {font-size:1rem} .theme-2027 .strStandupPage .strAgendaEmpty, .theme-2027 .strFestivaliPage .strAgendaEmpty, .theme-2027 .strKoncertiPage .strAgendaEmpty {display:none;padding:28px;border:1px dashed rgba(17,18,26,.18);border-radius:22px;color:var(--strMuted);text-align:center} .theme-2027 .strStandupPage .strAgendaEmpty.strShow, .theme-2027 .strFestivaliPage .strAgendaEmpty.strShow, .theme-2027 .strKoncertiPage .strAgendaEmpty.strShow {display:block} .theme-2027 .strStandupPage .strArtistSection, .theme-2027 .strFestivaliPage .strArtistSection, .theme-2027 .strKoncertiPage .strArtistSection {overflow:hidden;color:#fff;background:radial-gradient(circle at 15% 20%,rgba(255,77,114,.18),transparent 32rem),radial-gradient(circle at 88% 15%,rgba(111,229,255,.14),transparent 30rem),var(--strInk)} .theme-2027 .strStandupPage .strArtistSection .strEyebrow, .theme-2027 .strFestivaliPage .strArtistSection .strEyebrow, .theme-2027 .strKoncertiPage .strArtistSection .strEyebrow {color:var(--strLime)} .theme-2027 .strStandupPage .strArtistSection .strEyebrow::before, .theme-2027 .strFestivaliPage .strArtistSection .strEyebrow::before, .theme-2027 .strKoncertiPage .strArtistSection .strEyebrow::before {background:var(--strLime);box-shadow:0 0 0 6px rgba(217,255,102,.1)} .theme-2027 .strStandupPage .strArtistSection .strSectionIntro, .theme-2027 .strFestivaliPage .strArtistSection .strSectionIntro, .theme-2027 .strKoncertiPage .strArtistSection .strSectionIntro {color:rgba(255,255,255,.65)} .theme-2027 .strStandupPage .strArtistSection .strTextLink, .theme-2027 .strFestivaliPage .strArtistSection .strTextLink, .theme-2027 .strKoncertiPage .strArtistSection .strTextLink {color:#fff} .theme-2027 .strStandupPage .strArtistLayout {display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start} .theme-2027 .strStandupPage .strArtistFeature {position:relative;min-height:540px;overflow:hidden;border-radius:30px;background:#0d0e15;box-shadow:var(--strShadowL)} .theme-2027 .strStandupPage .strArtistFeature img, .theme-2027 .strFestivaliPage .strArtistFeature img, .theme-2027 .strKoncertiPage .strArtistFeature img {height:100%;object-fit:cover} .theme-2027 .strStandupPage .strArtistFeature::after, .theme-2027 .strFestivaliPage .strArtistFeature::after, .theme-2027 .strKoncertiPage .strArtistFeature::after {position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,16,.04),rgba(10,10,16,.94));content:""} .theme-2027 .strStandupPage .strArtistFeatureBody, .theme-2027 .strFestivaliPage .strArtistFeatureBody, .theme-2027 .strKoncertiPage .strArtistFeatureBody {position:absolute;right:28px;bottom:28px;left:28px;z-index:2} .theme-2027 .strStandupPage .strArtistFeatureBody h3 {margin:8px 0 12px;font-size:clamp(2.8rem,5vw,5.8rem);line-height:.9;letter-spacing:-.06em} .theme-2027 .strStandupPage .strArtistFeatureBody p, .theme-2027 .strFestivaliPage .strArtistFeatureBody p, .theme-2027 .strKoncertiPage .strArtistFeatureBody p {max-width:620px;margin:0;color:rgba(255,255,255,.68)} .theme-2027 .strStandupPage .strArtistList, .theme-2027 .strFestivaliPage .strArtistList, .theme-2027 .strKoncertiPage .strArtistList {display:grid;gap:10px} .theme-2027 .strStandupPage .strArtistRow, .theme-2027 .strFestivaliPage .strArtistRow, .theme-2027 .strKoncertiPage .strArtistRow {display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.055);transition:transform .18s ease,background .18s ease} .theme-2027 .strStandupPage .strArtistRow:hover, .theme-2027 .strFestivaliPage .strArtistRow:hover, .theme-2027 .strKoncertiPage .strArtistRow:hover {transform:translateX(5px);background:rgba(255,255,255,.09)} .theme-2027 .strStandupPage .strArtistRank, .theme-2027 .strFestivaliPage .strArtistRank, .theme-2027 .strKoncertiPage .strArtistRank {width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:var(--strInk);background:var(--strLime);font-size:.72rem;font-weight:900} .theme-2027 .strStandupPage .strArtistRow:nth-child(even) .strArtistRank, .theme-2027 .strFestivaliPage .strArtistRow:nth-child(even) .strArtistRank, .theme-2027 .strKoncertiPage .strArtistRow:nth-child(even) .strArtistRank {background:var(--strAqua)} .theme-2027 .strStandupPage .strArtistName, .theme-2027 .strFestivaliPage .strArtistName, .theme-2027 .strKoncertiPage .strArtistName {font-weight:850} .theme-2027 .strStandupPage .strArtistName span, .theme-2027 .strFestivaliPage .strArtistName span, .theme-2027 .strKoncertiPage .strArtistName span {display:block;margin-top:2px;color:rgba(255,255,255,.5);font-size:.7rem;font-weight:650} .theme-2027 .strStandupPage .strArtistCount, .theme-2027 .strFestivaliPage .strArtistCount, .theme-2027 .strKoncertiPage .strArtistCount {color:rgba(255,255,255,.72);font-size:.75rem;font-weight:780} .theme-2027 .strStandupPage .strJourneyGrid {display:grid;grid-template-columns:1.08fr .92fr;gap:18px} .theme-2027 .strStandupPage .strJourneyFeature {position:relative;min-height:650px;overflow:hidden;border-radius:30px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowL)} .theme-2027 .strStandupPage .strJourneyFeature img, .theme-2027 .strFestivaliPage .strJourneyFeature img, .theme-2027 .strKoncertiPage .strJourneyFeature img {height:100%;object-fit:cover} .theme-2027 .strStandupPage .strJourneyFeature::after, .theme-2027 .strFestivaliPage .strJourneyFeature::after, .theme-2027 .strKoncertiPage .strJourneyFeature::after {position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,15,.05),rgba(10,10,15,.94));content:""} .theme-2027 .strStandupPage .strJourneyBody, .theme-2027 .strFestivaliPage .strJourneyBody, .theme-2027 .strKoncertiPage .strJourneyBody {position:absolute;right:28px;bottom:28px;left:28px;z-index:2} .theme-2027 .strStandupPage .strJourneyBody h3, .theme-2027 .strFestivaliPage .strJourneyBody h3, .theme-2027 .strKoncertiPage .strJourneyBody h3 {max-width:700px;margin:9px 0 12px;font-size:clamp(2.6rem,4.7vw,5.2rem);line-height:.92;letter-spacing:-.058em} .theme-2027 .strStandupPage .strJourneyBody p, .theme-2027 .strFestivaliPage .strJourneyBody p, .theme-2027 .strKoncertiPage .strJourneyBody p {max-width:660px;margin:0;color:rgba(255,255,255,.69)} .theme-2027 .strStandupPage .strJourneySteps {display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:22px} .theme-2027 .strStandupPage .strJourneyStep, .theme-2027 .strFestivaliPage .strJourneyStep, .theme-2027 .strKoncertiPage .strJourneyStep {padding:12px;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px)} .theme-2027 .strStandupPage .strJourneyStep span, .theme-2027 .strFestivaliPage .strJourneyStep span, .theme-2027 .strKoncertiPage .strJourneyStep span {display:block;color:var(--strLime);font-size:.66rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strStandupPage .strJourneyStep strong, .theme-2027 .strFestivaliPage .strJourneyStep strong, .theme-2027 .strKoncertiPage .strJourneyStep strong {display:block;margin-top:4px;font-size:.79rem} .theme-2027 .strStandupPage .strJourneySide {display:grid;gap:18px} .theme-2027 .strStandupPage .strJourneyCard {min-height:316px;display:grid;grid-template-columns:.92fr 1.08fr;overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strStandupPage .strJourneyCardImage {min-height:100%} .theme-2027 .strStandupPage .strJourneyCardImage img, .theme-2027 .strFestivaliPage .strJourneyCardImage img, .theme-2027 .strKoncertiPage .strJourneyCardImage img {height:100%;object-fit:cover} .theme-2027 .strStandupPage .strJourneyCardBody, .theme-2027 .strFestivaliPage .strJourneyCardBody, .theme-2027 .strKoncertiPage .strJourneyCardBody {display:flex;flex-direction:column;padding:22px} .theme-2027 .strStandupPage .strJourneyCardBody h3, .theme-2027 .strFestivaliPage .strJourneyCardBody h3, .theme-2027 .strKoncertiPage .strJourneyCardBody h3 {margin:9px 0 10px;font-size:1.55rem;line-height:1.02;letter-spacing:-.04em} .theme-2027 .strStandupPage .strJourneyCardBody p, .theme-2027 .strFestivaliPage .strJourneyCardBody p, .theme-2027 .strKoncertiPage .strJourneyCardBody p {margin:0;color:var(--strMuted);font-size:.82rem} .theme-2027 .strStandupPage .strJourneyCardBody .strTextLink, .theme-2027 .strFestivaliPage .strJourneyCardBody .strTextLink, .theme-2027 .strKoncertiPage .strJourneyCardBody .strTextLink {margin-top:auto;align-self:flex-start;font-size:.79rem} .theme-2027 .strStandupPage .strPopularBox {padding:34px;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strStandupPage .strPopularGrid {display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start} .theme-2027 .strStandupPage .strPopularBox h2, .theme-2027 .strFestivaliPage .strPopularBox h2, .theme-2027 .strKoncertiPage .strPopularBox h2, .theme-2027 .strSportPage .strPopularBox h2 {margin:0;font-size:clamp(1.9rem,3.2vw,3.1rem);line-height:1.04;letter-spacing:-.045em} .theme-2027 .strStandupPage .strPopularBox p, .theme-2027 .strFestivaliPage .strPopularBox p, .theme-2027 .strKoncertiPage .strPopularBox p, .theme-2027 .strSportPage .strPopularBox p {margin:12px 0 0;color:var(--strMuted)} .theme-2027 .strStandupPage .strPopularGroups {display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .theme-2027 .strStandupPage .strPopularGroup h3, .theme-2027 .strFestivaliPage .strPopularGroup h3, .theme-2027 .strKoncertiPage .strPopularGroup h3, .theme-2027 .strSportPage .strPopularGroup h3 {margin:0 0 11px;color:var(--strMuted);font-size:.69rem;text-transform:uppercase;letter-spacing:.11em} .theme-2027 .strStandupPage .strPopularLinks, .theme-2027 .strFestivaliPage .strPopularLinks, .theme-2027 .strKoncertiPage .strPopularLinks, .theme-2027 .strSportPage .strPopularLinks {display:flex;flex-wrap:wrap;gap:8px} .theme-2027 .strStandupPage .strPopularLinks a, .theme-2027 .strFestivaliPage .strPopularLinks a, .theme-2027 .strKoncertiPage .strPopularLinks a, .theme-2027 .strSportPage .strPopularLinks a {padding:8px 11px;border:1px solid var(--strLine);border-radius:999px;background:var(--strPaper);font-size:.76rem;font-weight:760;transition:color .18s ease,border-color .18s ease,background .18s ease} .theme-2027 .strStandupPage .strPopularLinks a:hover, .theme-2027 .strFestivaliPage .strPopularLinks a:hover, .theme-2027 .strKoncertiPage .strPopularLinks a:hover, .theme-2027 .strSportPage .strPopularLinks a:hover {color:var(--strViolet);border-color:rgba(101,87,255,.32);background:#fff} .theme-2027 .strStandupPage .strNewsletter, .theme-2027 .strFestivaliPage .strNewsletter, .theme-2027 .strKoncertiPage .strNewsletter, .theme-2027 .strSportPage .strNewsletter {padding:80px 0} .theme-2027 .strStandupPage .strNewsletterBox {position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:48px;border-radius:32px;color:#fff;background:var(--strPink);box-shadow:var(--strShadowL)} .theme-2027 .strStandupPage .strNewsletterBox::after, .theme-2027 .strFestivaliPage .strNewsletterBox::after, .theme-2027 .strKoncertiPage .strNewsletterBox::after, .theme-2027 .strSportPage .strNewsletterBox::after {position:absolute;right:-100px;bottom:-130px;width:330px;height:330px;border:60px solid rgba(255,255,255,.08);border-radius:50%;content:""} .theme-2027 .strStandupPage .strNewsletterCopy, .theme-2027 .strStandupPage .strNewsletterFormWrap, .theme-2027 .strFestivaliPage .strNewsletterCopy, .theme-2027 .strFestivaliPage .strNewsletterFormWrap, .theme-2027 .strKoncertiPage .strNewsletterCopy, .theme-2027 .strKoncertiPage .strNewsletterFormWrap, .theme-2027 .strSportPage .strNewsletterCopy, .theme-2027 .strSportPage .strNewsletterFormWrap {position:relative;z-index:2} .theme-2027 .strStandupPage .strNewsletterCopy h2, .theme-2027 .strFestivaliPage .strNewsletterCopy h2, .theme-2027 .strKoncertiPage .strNewsletterCopy h2, .theme-2027 .strSportPage .strNewsletterCopy h2 {margin:0;font-size:clamp(2.2rem,4.5vw,4.8rem);line-height:1.02;letter-spacing:-.055em} .theme-2027 .strStandupPage .strNewsletterCopy p, .theme-2027 .strFestivaliPage .strNewsletterCopy p, .theme-2027 .strKoncertiPage .strNewsletterCopy p, .theme-2027 .strSportPage .strNewsletterCopy p {max-width:620px;margin:17px 0 0;color:rgba(255,255,255,.76)} .theme-2027 .strStandupPage .strNewsletterForm {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:8px;border-radius:18px;background:#fff} .theme-2027 .strStandupPage .strNewsletterForm input, .theme-2027 .strFestivaliPage .strNewsletterForm input, .theme-2027 .strKoncertiPage .strNewsletterForm input, .theme-2027 .strSportPage .strNewsletterForm input {min-width:0;min-height:52px;padding:10px 14px;border:0;outline:0;color:var(--strInk);background:transparent} .theme-2027 .strStandupPage .strNewsletterForm .strButton, .theme-2027 .strFestivaliPage .strNewsletterForm .strButton, .theme-2027 .strKoncertiPage .strNewsletterForm .strButton, .theme-2027 .strSportPage .strNewsletterForm .strButton {min-height:52px} .theme-2027 .strStandupPage .strNewsletterStatus, .theme-2027 .strFestivaliPage .strNewsletterStatus, .theme-2027 .strKoncertiPage .strNewsletterStatus, .theme-2027 .strSportPage .strNewsletterStatus {min-height:22px;margin:10px 0 0;color:rgba(255,255,255,.86);font-size:.78rem;font-weight:700} .theme-2027 .strStandupPage .strNewsletterFine, .theme-2027 .strFestivaliPage .strNewsletterFine, .theme-2027 .strKoncertiPage .strNewsletterFine, .theme-2027 .strSportPage .strNewsletterFine {margin-top:8px;color:rgba(255,255,255,.58);font-size:.7rem} @media(max-width:1180px) { .theme-2027 .strStandupPage .strConcertLead {grid-column:span 8} .theme-2027 .strStandupPage .strConcertTall {grid-column:span 4} .theme-2027 .strStandupPage .strConcertSmall, .theme-2027 .strStandupPage .strConcertWide, .theme-2027 .strFestivaliPage .strConcertSmall, .theme-2027 .strFestivaliPage .strConcertWide, .theme-2027 .strKoncertiPage .strConcertSmall, .theme-2027 .strKoncertiPage .strConcertWide {grid-column:span 4} .theme-2027 .strStandupPage .strAgendaShell {grid-template-columns:250px minmax(0,1fr)} .theme-2027 .strStandupPage .strArtistLayout {grid-template-columns:1fr 1fr} .theme-2027 .strStandupPage .strPopularGrid {grid-template-columns:1fr} } @media(max-width:980px) { .theme-2027 .strStandupPage .strSection {padding:76px 0} .theme-2027 .strStandupPage .strConcertGrid {grid-template-columns:repeat(2,1fr);grid-auto-rows:310px} .theme-2027 .strStandupPage .strConcertLead, .theme-2027 .strStandupPage .strConcertTall, .theme-2027 .strStandupPage .strConcertSmall, .theme-2027 .strStandupPage .strConcertWide {grid-column:auto;grid-row:auto} .theme-2027 .strStandupPage .strConcertLead {grid-column:span 2;grid-row:span 2} .theme-2027 .strStandupPage .strConcertTall {grid-column:span 2} .theme-2027 .strStandupPage .strAgendaShell {grid-template-columns:1fr} .theme-2027 .strStandupPage .strAgendaAside {position:static} .theme-2027 .strStandupPage .strCountryFilter {grid-template-columns:repeat(5,1fr)} .theme-2027 .strStandupPage .strCountryFilter h4 {grid-column:1/-1} .theme-2027 .strStandupPage .strArtistLayout {grid-template-columns:1fr} .theme-2027 .strStandupPage .strJourneyGrid {grid-template-columns:1fr} .theme-2027 .strStandupPage .strJourneySide {grid-template-columns:repeat(2,1fr)} .theme-2027 .strStandupPage .strJourneyCard {grid-template-columns:1fr} .theme-2027 .strStandupPage .strJourneyCardImage {height:190px} .theme-2027 .strStandupPage .strPopularGroups {grid-template-columns:1fr} .theme-2027 .strStandupPage .strNewsletterBox {grid-template-columns:1fr} } @media(max-width:700px) { .theme-2027 .strStandupPage .strContainer {width:min(calc(100% - 24px),var(--strContainer))} .theme-2027 .strStandupPage .strPulse {margin-top:8px} .theme-2027 .strStandupPage .strSectionHead {align-items:flex-start;flex-direction:column;margin-bottom:25px} .theme-2027 .strStandupPage .strFilterGroup {flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .theme-2027 .strStandupPage .strFilterGroup::-webkit-scrollbar, .theme-2027 .strFestivaliPage .strFilterGroup::-webkit-scrollbar, .theme-2027 .strKoncertiPage .strFilterGroup::-webkit-scrollbar, .theme-2027 .strSportPage .strFilterGroup::-webkit-scrollbar {display:none} .theme-2027 .strStandupPage .strFilterButton {flex:0 0 auto} .theme-2027 .strStandupPage .strConcertGrid {grid-template-columns:1fr;grid-auto-rows:430px} .theme-2027 .strStandupPage .strConcertLead, .theme-2027 .strStandupPage .strConcertTall, .theme-2027 .strStandupPage .strConcertSmall, .theme-2027 .strStandupPage .strConcertWide {grid-column:auto!important;grid-row:auto!important} .theme-2027 .strStandupPage .strConcertLead .strConcertBody h3, .theme-2027 .strStandupPage .strConcertBody h3, .theme-2027 .strFestivaliPage .strConcertLead .strConcertBody h3, .theme-2027 .strFestivaliPage .strConcertBody h3, .theme-2027 .strKoncertiPage .strConcertLead .strConcertBody h3, .theme-2027 .strKoncertiPage .strConcertBody h3 {font-size:2.35rem} .theme-2027 .strStandupPage .strConcertTop {align-items:flex-start;flex-direction:column} .theme-2027 .strStandupPage .strAgendaAside {padding:22px} .theme-2027 .strStandupPage .strCountryFilter {grid-template-columns:1fr 1fr} .theme-2027 .strStandupPage .strAgendaRow {grid-template-columns:44px 84px minmax(0,1fr) 42px;gap:11px;padding:10px} .theme-2027 .strStandupPage .strAgendaThumb {height:68px} .theme-2027 .strStandupPage .strAgendaPrice, .theme-2027 .strFestivaliPage .strAgendaPrice, .theme-2027 .strKoncertiPage .strAgendaPrice {grid-column:3/4} .theme-2027 .strStandupPage .strAgendaMain h3 {font-size:1rem} .theme-2027 .strStandupPage .strAgendaMain p {font-size:.69rem} .theme-2027 .strStandupPage .strArtistFeature {min-height:500px} .theme-2027 .strStandupPage .strArtistFeatureBody h3 {font-size:3.2rem} .theme-2027 .strStandupPage .strJourneyFeature {min-height:600px} .theme-2027 .strStandupPage .strJourneySteps {grid-template-columns:1fr 1fr} .theme-2027 .strStandupPage .strJourneySide {grid-template-columns:1fr} .theme-2027 .strStandupPage .strPopularBox {padding:23px} .theme-2027 .strStandupPage .strNewsletterBox {padding:30px 23px} .theme-2027 .strStandupPage .strNewsletterForm {grid-template-columns:1fr} } @media(max-width:480px) { .theme-2027 .strStandupPage .strConcertGrid {grid-auto-rows:400px} } @media(prefers-reduced-motion:reduce) { .theme-2027 .strStandupPage {scroll-behavior:auto} .theme-2027 .strStandupPage *, .theme-2027 .strStandupPage *::before, .theme-2027 .strStandupPage *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } .theme-2027 .strStandupPage .strDateLink span, .theme-2027 .strStandupPage .strCountryButton span, .theme-2027 .strFestivaliPage .strDateLink span, .theme-2027 .strFestivaliPage .strCountryButton span, .theme-2027 .strKoncertiPage .strDateLink span, .theme-2027 .strKoncertiPage .strCountryButton span {display:inline-flex;min-width:24px;padding:2px 7px;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(17,18,26,.09);background:rgba(17,18,26,.055);color:var(--strMuted);font-size:.71rem;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.5;opacity:1} .theme-2027 .strStandupPage .strDateLink:hover span, .theme-2027 .strStandupPage .strDateLink.strActive span, .theme-2027 .strFestivaliPage .strDateLink:hover span, .theme-2027 .strFestivaliPage .strDateLink.strActive span, .theme-2027 .strKoncertiPage .strDateLink:hover span, .theme-2027 .strKoncertiPage .strDateLink.strActive span {border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.2);color:#fff} .theme-2027 .strStandupPage .strFilterButton {display:inline-flex;align-items:center;gap:8px} .theme-2027 .strStandupPage .strFilterButton[aria-pressed="true"] span, .theme-2027 .strFestivaliPage .strFilterButton[aria-pressed="true"] span {border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.2);color:#fff} .theme-2027 .strStandupPage .strHidden, .theme-2027 .strFestivaliPage .strHidden {display:none} .theme-2027 .strStandupPage .strTourGrid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:358px;gap:18px} .theme-2027 .strStandupPage .strTourCard {position:relative;isolation:isolate;overflow:hidden;border-radius:30px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowS);transition:transform .25s ease,box-shadow .25s ease} .theme-2027 .strStandupPage .strTourCard:hover {transform:translateY(-6px);box-shadow:var(--strShadowL)} .theme-2027 .strStandupPage .strTourLead {grid-column:span 2;grid-row:span 2} .theme-2027 .strStandupPage .strTourCard img {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .theme-2027 .strStandupPage .strTourCard:hover img {transform:scale(1.055)} .theme-2027 .strStandupPage .strTourCard::after {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,14,0) 26%,rgba(8,8,14,.3) 55%,rgba(8,8,14,.88) 100%);content:""} .theme-2027 .strStandupPage .strTourLead::after {background:linear-gradient(180deg,rgba(8,8,14,.05) 20%,rgba(8,8,14,.42) 56%,rgba(8,8,14,.94) 100%)} .theme-2027 .strStandupPage .strTourTop {position:absolute;top:18px;right:18px;left:18px;z-index:2;display:flex;flex-wrap:nowrap;align-items:flex-start;gap:10px} .theme-2027 .strStandupPage .strTourTop .strPill {max-width:100%;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .theme-2027 .strStandupPage .strTourTop .strPill:hover {background:#fff} .theme-2027 .strStandupPage .strTourSpan {display:block;margin-bottom:7px;color:rgba(255,255,255,.9);font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.01em} .theme-2027 .strStandupPage .strTourBody {position:absolute;right:23px;bottom:22px;left:23px;z-index:2} .theme-2027 .strStandupPage .strTourBody h3 {max-width:720px;margin:0 0 11px;font-size:clamp(1.55rem,2.2vw,2.2rem);line-height:.98;letter-spacing:-.04em} .theme-2027 .strStandupPage .strTourLead .strTourBody h3 {font-size:clamp(2.4rem,4vw,4.2rem)} .theme-2027 .strStandupPage .strTourBody h3 a {color:inherit} .theme-2027 .strStandupPage .strTourFacts {display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px} .theme-2027 .strStandupPage .strTourFact {padding:5px 11px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.12);font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums;backdrop-filter:blur(10px)} .theme-2027 .strStandupPage .strTourFact:empty {display:none} .theme-2027 .strStandupPage .strTourFoot {display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.82rem;font-weight:850} .theme-2027 .strStandupPage .strMonthHead {display:flex;margin:16px 0 2px;align-items:center;gap:14px} .theme-2027 .strStandupPage .strMonthHead:first-child {margin-top:0} .theme-2027 .strStandupPage .strMonthName {color:var(--strInk);font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .theme-2027 .strStandupPage .strMonthHead::after {content:"";height:1px;flex:1;background:rgba(17,18,26,.1)} .theme-2027 .strStandupPage .strGuideCard {position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowS);transition:transform .22s ease,box-shadow .22s ease} .theme-2027 .strStandupPage .strGuideCard:hover {transform:translateY(-5px);box-shadow:var(--strShadowL)} .theme-2027 .strStandupPage .strGuideCard img {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .52s ease} .theme-2027 .strStandupPage .strGuideCard:hover img {transform:scale(1.05)} .theme-2027 .strStandupPage .strGuideCard::after {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,14,.08) 16%,rgba(8,8,14,.5) 52%,rgba(8,8,14,.94) 100%);content:""} .theme-2027 .strStandupPage .strCountryCloud {display:flex;flex-wrap:wrap;gap:12px} .theme-2027 .strStandupPage .strCountryChip {display:flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid rgba(17,18,26,.09);border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(25,23,43,.05);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .theme-2027 .strStandupPage .strCountryChip:hover {transform:translateY(-3px);border-color:rgba(101,87,255,.35);box-shadow:var(--strShadowS)} .theme-2027 .strStandupPage .strCountryName {color:var(--strInk);font-size:.95rem;font-weight:850;letter-spacing:-.01em} .theme-2027 .strStandupPage .strCountryCount {display:inline-flex;min-width:24px;padding:2px 7px;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(17,18,26,.09);background:rgba(17,18,26,.055);color:var(--strMuted);font-size:.71rem;font-weight:850;font-variant-numeric:tabular-nums;line-height:1.5} .theme-2027 .strStandupPage .strCountryCities {color:var(--strMuted);font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap} .theme-2027 .strStandupPage .strCountryCities:empty {display:none} @media (max-width: 1180px) { .theme-2027 .strStandupPage .strTourGrid {grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:300px} } @media (max-width: 980px) { .theme-2027 .strStandupPage .strTourGrid {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:280px} .theme-2027 .strStandupPage .strTourLead {grid-column:span 2;grid-row:span 1} .theme-2027 .strStandupPage .strTourLead .strTourBody h3 {font-size:clamp(2rem,5vw,2.6rem)} } @media (max-width: 700px) { .theme-2027 .strStandupPage .strTourGrid {grid-template-columns:minmax(0,1fr);grid-auto-rows:262px} .theme-2027 .strStandupPage .strTourLead {grid-column:span 1} .theme-2027 .strStandupPage .strCountryChip {width:100%;justify-content:space-between} .theme-2027 .strStandupPage .strMonthHead {margin:12px 0 2px} } .theme-2027 .strStandupPage .strConcertFoot {justify-content:flex-end} .theme-2027 .strStandupPage .strConcertFoot .strFxBuy, .theme-2027 .strFestivaliPage .strConcertFoot .strFxBuy, .theme-2027 .strKoncertiPage .strConcertFoot .strFxBuy {align-items:flex-end;text-align:right} .theme-2027 .strStandupPage .strConcertFoot .strFxPr, .theme-2027 .strFestivaliPage .strConcertFoot .strFxPr, .theme-2027 .strKoncertiPage .strConcertFoot .strFxPr {color:rgba(255,255,255,.82);font-size:.8rem;text-shadow:0 1px 2px rgba(0,0,0,.55)} .theme-2027 .strStandupPage .strConcertFoot .strFxPr b, .theme-2027 .strFestivaliPage .strConcertFoot .strFxPr b, .theme-2027 .strKoncertiPage .strConcertFoot .strFxPr b {color:#fff;font-size:.95rem} .theme-2027 .strStandupPage .strConcertFoot .strFxSoon, .theme-2027 .strFestivaliPage .strConcertFoot .strFxSoon, .theme-2027 .strKoncertiPage .strConcertFoot .strFxSoon {color:rgba(255,255,255,.82);text-shadow:0 1px 2px rgba(0,0,0,.55)} .theme-2027 .strStandupPage .strTourFoot .strFxPr {color: rgba(255,255,255,.72);} .theme-2027 .strStandupPage .strTourFoot .strFxPr b {color: #fff;} .theme-2027 .strFestivaliPage {--strInk:#11121a;--strInkSoft:#292b38;--strPaper:#f6f5f9;--strCard:#fff;--strLine:rgba(17,18,26,.11); --strMuted:#6b6e7d;--strPink:#e11d48;--strPinkDark:#b8163a;--strViolet:#6557ff;--strLime:#d9ff66; --strAqua:#6fe5ff;--strYellow:#ffcf5a;--strSuccess:#31c48d;--strShadowS:0 12px 34px rgba(25,23,43,.09); --strShadowL:0 28px 80px rgba(23,20,45,.18);--strContainer:1380px} .theme-2027 .strFestivaliPage *, .theme-2027 .strFestivaliPage *::before, .theme-2027 .strFestivaliPage *::after {box-sizing:border-box} .theme-2027 .strFestivaliPage {scroll-behavior:smooth;-webkit-text-size-adjust:100%} .theme-2027 .strFestivaliPage .strContainer {width:min(calc(100% - 40px),var(--strContainer));margin-inline:auto} .theme-2027 .strFestivaliPage .strSection {position:relative;padding:96px 0} .theme-2027 .strFestivaliPage .strSectionHead {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px} .theme-2027 .strFestivaliPage .strButtonPrimary, .theme-2027 .strKoncertiPage .strButtonPrimary, .theme-2027 .strSportPage .strButtonPrimary {color:#fff;background:var(--strPink);box-shadow:0 12px 28px rgba(225,29,72,.26)} .theme-2027 .strFestivaliPage .strPulse {position:relative;z-index:3;margin-top:-18px} .theme-2027 .strFestivaliPage .strFilterGroup {display:flex;flex-wrap:wrap;gap:8px} .theme-2027 .strFestivaliPage .strFilterButton {padding:10px 15px;border:1px solid var(--strLine);border-radius:999px;color:var(--strInkSoft);background:#fff;cursor:pointer;font-size:.82rem;font-weight:800;transition:color .18s ease,background .18s ease,border-color .18s ease} .theme-2027 .strFestivaliPage .strConcertGrid {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:265px;gap:18px} .theme-2027 .strFestivaliPage .strConcertLead {grid-column:span 7;grid-row:span 2} .theme-2027 .strFestivaliPage .strConcertTall {grid-column:span 5;grid-row:span 2} .theme-2027 .strFestivaliPage .strConcertTop {position:absolute;top:18px;right:18px;left:18px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .theme-2027 .strFestivaliPage .strConcertFoot {display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.82rem;font-weight:850} .theme-2027 .strFestivaliPage .strAgendaShell {display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start} .theme-2027 .strFestivaliPage .strAgendaAside {position:sticky;top:120px;padding:27px;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strFestivaliPage .strCountryFilter {display:grid;gap:8px;margin-top:23px;padding-top:21px;border-top:1px solid var(--strLine)} .theme-2027 .strFestivaliPage .strCountryFilter h4 {margin:0 0 4px;color:var(--strMuted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase} .theme-2027 .strFestivaliPage .strAgendaRow {display:grid;grid-template-columns:48px 126px minmax(0,1fr) 120px 48px;align-items:center;gap:18px;padding:13px;border:1px solid rgba(17,18,26,.08);border-radius:22px;background:#fff;box-shadow:0 8px 25px rgba(25,23,43,.055);transition:transform .2s ease,box-shadow .2s ease} .theme-2027 .strFestivaliPage .strAgendaThumb {height:78px;overflow:hidden;border-radius:16px;background:#e8e7ee} .theme-2027 .strFestivaliPage .strAgendaMain h4 {margin:5px 0 4px;font-size:1.18rem;line-height:1.05;letter-spacing:-.025em} .theme-2027 .strFestivaliPage .strAgendaMain p {margin:0;color:var(--strMuted);font-size:.78rem} .theme-2027 .strFestivaliPage .strArtistLayout {display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start} .theme-2027 .strFestivaliPage .strArtistFeature {position:relative;min-height:540px;overflow:hidden;border-radius:30px;background:#0d0e15;box-shadow:var(--strShadowL)} .theme-2027 .strFestivaliPage .strArtistFeatureBody h3 {margin:8px 0 12px;font-size:clamp(2.8rem,5vw,5.8rem);line-height:.9;letter-spacing:-.06em} .theme-2027 .strFestivaliPage .strJourneyGrid {display:grid;grid-template-columns:1.08fr .92fr;gap:18px} .theme-2027 .strFestivaliPage .strJourneyFeature {position:relative;min-height:650px;overflow:hidden;border-radius:30px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowL)} .theme-2027 .strFestivaliPage .strJourneySteps {display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:22px} .theme-2027 .strFestivaliPage .strJourneySide {display:grid;gap:18px} .theme-2027 .strFestivaliPage .strJourneyCard {min-height:316px;display:grid;grid-template-columns:.92fr 1.08fr;overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strFestivaliPage .strJourneyCardImage {min-height:100%} .theme-2027 .strFestivaliPage .strPopularBox {padding:34px;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strFestivaliPage .strPopularGrid {display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start} .theme-2027 .strFestivaliPage .strPopularGroups {display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .theme-2027 .strFestivaliPage .strNewsletterBox {position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:48px;border-radius:32px;color:#fff;background:var(--strPink);box-shadow:var(--strShadowL)} .theme-2027 .strFestivaliPage .strNewsletterForm {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:8px;border-radius:18px;background:#fff} @media(max-width:1180px) { .theme-2027 .strFestivaliPage .strConcertLead {grid-column:span 8} .theme-2027 .strFestivaliPage .strConcertTall {grid-column:span 4} .theme-2027 .strFestivaliPage .strAgendaShell {grid-template-columns:250px minmax(0,1fr)} .theme-2027 .strFestivaliPage .strArtistLayout {grid-template-columns:1fr 1fr} .theme-2027 .strFestivaliPage .strPopularGrid {grid-template-columns:1fr} } @media(max-width:980px) { .theme-2027 .strFestivaliPage .strSection {padding:76px 0} .theme-2027 .strFestivaliPage .strConcertGrid {grid-template-columns:repeat(2,1fr);grid-auto-rows:310px} .theme-2027 .strFestivaliPage .strConcertLead, .theme-2027 .strFestivaliPage .strConcertTall, .theme-2027 .strFestivaliPage .strConcertSmall, .theme-2027 .strFestivaliPage .strConcertWide {grid-column:auto;grid-row:auto} .theme-2027 .strFestivaliPage .strConcertLead {grid-column:span 2;grid-row:span 2} .theme-2027 .strFestivaliPage .strConcertTall {grid-column:span 2} .theme-2027 .strFestivaliPage .strAgendaShell {grid-template-columns:1fr} .theme-2027 .strFestivaliPage .strAgendaAside {position:static} .theme-2027 .strFestivaliPage .strCountryFilter {grid-template-columns:repeat(5,1fr)} .theme-2027 .strFestivaliPage .strCountryFilter h4 {grid-column:1/-1} .theme-2027 .strFestivaliPage .strArtistLayout {grid-template-columns:1fr} .theme-2027 .strFestivaliPage .strJourneyGrid {grid-template-columns:1fr} .theme-2027 .strFestivaliPage .strJourneySide {grid-template-columns:repeat(2,1fr)} .theme-2027 .strFestivaliPage .strJourneyCard {grid-template-columns:1fr} .theme-2027 .strFestivaliPage .strJourneyCardImage {height:190px} .theme-2027 .strFestivaliPage .strPopularGroups {grid-template-columns:1fr} .theme-2027 .strFestivaliPage .strNewsletterBox {grid-template-columns:1fr} } @media(max-width:700px) { .theme-2027 .strFestivaliPage .strContainer {width:min(calc(100% - 24px),var(--strContainer))} .theme-2027 .strFestivaliPage .strPulse {margin-top:8px} .theme-2027 .strFestivaliPage .strSectionHead {align-items:flex-start;flex-direction:column;margin-bottom:25px} .theme-2027 .strFestivaliPage .strFilterGroup {flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .theme-2027 .strFestivaliPage .strFilterButton {flex:0 0 auto} .theme-2027 .strFestivaliPage .strConcertGrid {grid-template-columns:1fr;grid-auto-rows:430px} .theme-2027 .strFestivaliPage .strConcertLead, .theme-2027 .strFestivaliPage .strConcertTall, .theme-2027 .strFestivaliPage .strConcertSmall, .theme-2027 .strFestivaliPage .strConcertWide {grid-column:auto!important;grid-row:auto!important} .theme-2027 .strFestivaliPage .strConcertTop {align-items:flex-start;flex-direction:column} .theme-2027 .strFestivaliPage .strAgendaAside {padding:22px} .theme-2027 .strFestivaliPage .strCountryFilter {grid-template-columns:1fr} .theme-2027 .strFestivaliPage .strAgendaRow {grid-template-columns:44px 84px minmax(0,1fr) 42px;gap:11px;padding:10px} .theme-2027 .strFestivaliPage .strAgendaThumb {height:68px} .theme-2027 .strFestivaliPage .strAgendaMain h4 {font-size:1rem} .theme-2027 .strFestivaliPage .strAgendaMain p {font-size:.69rem} .theme-2027 .strFestivaliPage .strArtistFeature {min-height:500px} .theme-2027 .strFestivaliPage .strArtistFeatureBody h3 {font-size:2.2rem} .theme-2027 .strFestivaliPage .strJourneyFeature {min-height:600px} .theme-2027 .strFestivaliPage .strJourneySteps {grid-template-columns:1fr 1fr} .theme-2027 .strFestivaliPage .strJourneySide {grid-template-columns:1fr} .theme-2027 .strFestivaliPage .strPopularBox {padding:23px} .theme-2027 .strFestivaliPage .strNewsletterBox {padding:30px 23px} .theme-2027 .strFestivaliPage .strNewsletterForm {grid-template-columns:1fr} } @media(max-width:480px) { .theme-2027 .strFestivaliPage .strConcertGrid {grid-auto-rows:400px} } @media(prefers-reduced-motion:reduce) { .theme-2027 .strFestivaliPage {scroll-behavior:auto} .theme-2027 .strFestivaliPage *, .theme-2027 .strFestivaliPage *::before, .theme-2027 .strFestivaliPage *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } .theme-2027 .strFestivaliPage .strFestSpan {display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px} .theme-2027 .strFestivaliPage .strFestDays {display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid rgba(101,87,255,.2);color:var(--strViolet);background:rgba(101,87,255,.1);font-size:.71rem;font-weight:860;letter-spacing:.04em;white-space:nowrap} .theme-2027 .strFestivaliPage .strFestEditions {display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--strLine);color:var(--strMuted);background:rgba(255,255,255,.7);font-size:.71rem;font-weight:800;white-space:nowrap} .theme-2027 .strFestivaliPage .strArtistFeatureBody h3 {font-size:clamp(2rem,3.2vw,3.4rem);line-height:.98} .theme-2027 .strFestivaliPage .strFilterButton[disabled] {opacity:.38;cursor:not-allowed} .theme-2027 .strFestivaliPage .strFilterButton[disabled]:hover {border-color:var(--strLine)} .theme-2027 .strFestivaliPage .strFilterButton {display:inline-flex;align-items:center;gap:9px} .theme-2027 .strFestivaliPage .strFilterStack {display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:10px} .theme-2027 .strFestivaliPage .strFilterGroupMonths {margin-top:0} .theme-2027 .strFestivaliPage .strFilterGroupMonths .strFilterButton[aria-pressed="true"] {color:#fff;border-color:var(--strInk);background:var(--strInk)} .theme-2027 .strFestivaliPage .strFestMonthHead {display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:26px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--strLine)} .theme-2027 .strFestivaliPage .strFestMonthHead:first-child {margin-top:0} .theme-2027 .strFestivaliPage .strFestMonthName {margin:0;font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:860;letter-spacing:-.03em;text-transform:capitalize} @media (max-width: 980px) { .theme-2027 .strFestivaliPage .strFilterStack {width:100%} } @media (max-width: 700px) { .theme-2027 .strFestivaliPage .strFestMonthHead {margin:20px 0 10px} } .theme-2027 .strFestivaliPage .strConcertFoot {justify-content:flex-end} @media (min-width: 981px) { .theme-2027 .strFestivaliPage .strConcertSmall .strConcertBody h3, .theme-2027 .strFestivaliPage .strConcertWide .strConcertBody h3 {font-size: clamp(1.3rem, 1.6vw, 1.85rem); line-height: 1.06; margin: 6px 0 9px;} } .theme-2027 .strKoncertiPage {--strInk:#11121a;--strInkSoft:#292b38;--strPaper:#f6f5f9;--strCard:#fff;--strLine:rgba(17,18,26,.11); --strMuted:#6b6e7d;--strPink:#e11d48;--strPinkDark:#b8163a;--strViolet:#6557ff;--strLime:#d9ff66; --strAqua:#6fe5ff;--strYellow:#ffcf5a;--strSuccess:#31c48d;--strShadowS:0 12px 34px rgba(25,23,43,.09); --strShadowL:0 28px 80px rgba(23,20,45,.18);--strContainer:1380px} .theme-2027 .strKoncertiPage *, .theme-2027 .strKoncertiPage *::before, .theme-2027 .strKoncertiPage *::after {box-sizing:border-box} .theme-2027 .strKoncertiPage {scroll-behavior:smooth;-webkit-text-size-adjust:100%} .theme-2027 .strKoncertiPage .strContainer {width:min(calc(100% - 40px),var(--strContainer));margin-inline:auto} .theme-2027 .strKoncertiPage .strSection {position:relative;padding:96px 0} .theme-2027 .strKoncertiPage .strSectionHead {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px} .theme-2027 .strKoncertiPage .strPulse {position:relative;z-index:3;margin-top:-18px} .theme-2027 .strKoncertiPage .strFilterGroup {display:flex;flex-wrap:wrap;gap:8px} .theme-2027 .strKoncertiPage .strFilterButton {padding:10px 15px;border:1px solid var(--strLine);border-radius:999px;color:var(--strInkSoft);background:#fff;cursor:pointer;font-size:.82rem;font-weight:800;transition:color .18s ease,background .18s ease,border-color .18s ease} .theme-2027 .strKoncertiPage .strConcertGrid {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:265px;gap:18px} .theme-2027 .strKoncertiPage .strConcertLead {grid-column:span 7;grid-row:span 2} .theme-2027 .strKoncertiPage .strConcertTall {grid-column:span 5;grid-row:span 2} .theme-2027 .strKoncertiPage .strConcertTop {position:absolute;top:18px;right:18px;left:18px;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .theme-2027 .strKoncertiPage .strConcertFoot {display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.82rem;font-weight:850} .theme-2027 .strKoncertiPage .strAgendaShell {display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start} .theme-2027 .strKoncertiPage .strAgendaAside {position:sticky;top:120px;padding:27px;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strKoncertiPage .strCountryFilter {display:grid;gap:8px;margin-top:23px;padding-top:21px;border-top:1px solid var(--strLine)} .theme-2027 .strKoncertiPage .strCountryFilter h4 {margin:0 0 4px;color:var(--strMuted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase} .theme-2027 .strKoncertiPage .strAgendaRow {display:grid;grid-template-columns:48px 126px minmax(0,1fr) 120px 48px;align-items:center;gap:18px;padding:13px;border:1px solid rgba(17,18,26,.08);border-radius:22px;background:#fff;box-shadow:0 8px 25px rgba(25,23,43,.055);transition:transform .2s ease,box-shadow .2s ease} .theme-2027 .strKoncertiPage .strAgendaThumb {height:78px;overflow:hidden;border-radius:16px;background:#e8e7ee} .theme-2027 .strKoncertiPage .strAgendaMain h3 {margin:5px 0 4px;font-size:1.18rem;line-height:1.05;letter-spacing:-.025em} .theme-2027 .strKoncertiPage .strAgendaMain p {margin:0;color:var(--strMuted);font-size:.78rem} .theme-2027 .strKoncertiPage .strArtistLayout {display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start} .theme-2027 .strKoncertiPage .strArtistFeature {position:relative;min-height:540px;overflow:hidden;border-radius:30px;background:#0d0e15;box-shadow:var(--strShadowL)} .theme-2027 .strKoncertiPage .strArtistFeatureBody h3 {margin:8px 0 12px;font-size:clamp(2.8rem,5vw,5.8rem);line-height:.9;letter-spacing:-.06em} .theme-2027 .strKoncertiPage .strJourneyGrid {display:grid;grid-template-columns:1.08fr .92fr;gap:18px} .theme-2027 .strKoncertiPage .strJourneyFeature {position:relative;min-height:650px;overflow:hidden;border-radius:30px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowL)} .theme-2027 .strKoncertiPage .strJourneySteps {display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:22px} .theme-2027 .strKoncertiPage .strJourneySide {display:grid;gap:18px} .theme-2027 .strKoncertiPage .strJourneyCard {min-height:316px;display:grid;grid-template-columns:.92fr 1.08fr;overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strKoncertiPage .strJourneyCardImage {min-height:100%} .theme-2027 .strKoncertiPage .strPopularBox {padding:34px;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strKoncertiPage .strPopularGrid {display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start} .theme-2027 .strKoncertiPage .strPopularGroups {display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .theme-2027 .strKoncertiPage .strNewsletterBox {position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:48px;border-radius:32px;color:#fff;background:var(--strPink);box-shadow:var(--strShadowL)} .theme-2027 .strKoncertiPage .strNewsletterForm {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:8px;border-radius:18px;background:#fff} @media(max-width:1180px) { .theme-2027 .strKoncertiPage .strConcertLead {grid-column:span 8} .theme-2027 .strKoncertiPage .strConcertTall {grid-column:span 4} .theme-2027 .strKoncertiPage .strAgendaShell {grid-template-columns:250px minmax(0,1fr)} .theme-2027 .strKoncertiPage .strArtistLayout {grid-template-columns:1fr 1fr} .theme-2027 .strKoncertiPage .strPopularGrid {grid-template-columns:1fr} } @media(max-width:980px) { .theme-2027 .strKoncertiPage .strSection {padding:76px 0} .theme-2027 .strKoncertiPage .strConcertGrid {grid-template-columns:repeat(2,1fr);grid-auto-rows:310px} .theme-2027 .strKoncertiPage .strConcertLead, .theme-2027 .strKoncertiPage .strConcertTall, .theme-2027 .strKoncertiPage .strConcertSmall, .theme-2027 .strKoncertiPage .strConcertWide {grid-column:auto;grid-row:auto} .theme-2027 .strKoncertiPage .strConcertLead {grid-column:span 2;grid-row:span 2} .theme-2027 .strKoncertiPage .strConcertTall {grid-column:span 2} .theme-2027 .strKoncertiPage .strAgendaShell {grid-template-columns:1fr} .theme-2027 .strKoncertiPage .strAgendaAside {position:static} .theme-2027 .strKoncertiPage .strCountryFilter {grid-template-columns:repeat(5,1fr)} .theme-2027 .strKoncertiPage .strCountryFilter h4 {grid-column:1/-1} .theme-2027 .strKoncertiPage .strArtistLayout {grid-template-columns:1fr} .theme-2027 .strKoncertiPage .strJourneyGrid {grid-template-columns:1fr} .theme-2027 .strKoncertiPage .strJourneySide {grid-template-columns:repeat(2,1fr)} .theme-2027 .strKoncertiPage .strJourneyCard {grid-template-columns:1fr} .theme-2027 .strKoncertiPage .strJourneyCardImage {height:190px} .theme-2027 .strKoncertiPage .strPopularGroups {grid-template-columns:1fr} .theme-2027 .strKoncertiPage .strNewsletterBox {grid-template-columns:1fr} } @media(max-width:700px) { .theme-2027 .strKoncertiPage .strContainer {width:min(calc(100% - 24px),var(--strContainer))} .theme-2027 .strKoncertiPage .strPulse {margin-top:8px} .theme-2027 .strKoncertiPage .strSectionHead {align-items:flex-start;flex-direction:column;margin-bottom:25px} .theme-2027 .strKoncertiPage .strFilterGroup {flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .theme-2027 .strKoncertiPage .strFilterButton {flex:0 0 auto} .theme-2027 .strKoncertiPage .strConcertGrid {grid-template-columns:1fr;grid-auto-rows:430px} .theme-2027 .strKoncertiPage .strConcertLead, .theme-2027 .strKoncertiPage .strConcertTall, .theme-2027 .strKoncertiPage .strConcertSmall, .theme-2027 .strKoncertiPage .strConcertWide {grid-column:auto!important;grid-row:auto!important} .theme-2027 .strKoncertiPage .strConcertTop {align-items:flex-start;flex-direction:column} .theme-2027 .strKoncertiPage .strAgendaAside {padding:22px} .theme-2027 .strKoncertiPage .strCountryFilter {grid-template-columns:1fr} .theme-2027 .strKoncertiPage .strAgendaRow {grid-template-columns:44px 84px minmax(0,1fr) 42px;gap:11px;padding:10px} .theme-2027 .strKoncertiPage .strAgendaThumb {height:68px} .theme-2027 .strKoncertiPage .strAgendaMain h3 {font-size:1rem} .theme-2027 .strKoncertiPage .strAgendaMain p {font-size:.69rem} .theme-2027 .strKoncertiPage .strArtistFeature {min-height:500px} .theme-2027 .strKoncertiPage .strArtistFeatureBody h3 {font-size:3.2rem} .theme-2027 .strKoncertiPage .strJourneyFeature {min-height:600px} .theme-2027 .strKoncertiPage .strJourneySteps {grid-template-columns:1fr 1fr} .theme-2027 .strKoncertiPage .strJourneySide {grid-template-columns:1fr} .theme-2027 .strKoncertiPage .strPopularBox {padding:23px} .theme-2027 .strKoncertiPage .strNewsletterBox {padding:30px 23px} .theme-2027 .strKoncertiPage .strNewsletterForm {grid-template-columns:1fr} } @media(max-width:480px) { .theme-2027 .strKoncertiPage .strConcertGrid {grid-auto-rows:400px} } @media(prefers-reduced-motion:reduce) { .theme-2027 .strKoncertiPage {scroll-behavior:auto} .theme-2027 .strKoncertiPage *, .theme-2027 .strKoncertiPage *::before, .theme-2027 .strKoncertiPage *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } .theme-2027 .strKoncertiPage .strConcertFoot {justify-content:flex-end} .theme-2027 .strDogadajPage .strSaleHead {position: relative; margin-top: 1.25rem; padding: 2.25rem; border-radius: 34px; background: var(--strInk); color: #fff; overflow: hidden;} .theme-2027 .strDogadajPage .strVodicTekst {max-width: 72ch; font-size: 1.02rem; line-height: 1.7;} .theme-2027 .strDogadajPage .strVodicTekst p {margin: 0 0 1rem;} .theme-2027 .strDogadajPage .strVodicTekst img {max-width: 100%; height: auto; border-radius: 18px;} .theme-2027 .strDogadajPage .strSaleHead::after {content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(17, 18, 26, .88), rgba(17, 18, 26, .88)), var(--strSaleFoto, none); background-size: cover; background-position: center; pointer-events: none;} .theme-2027 .strDogadajPage .strSaleHead > * {position: relative; z-index: 1;} .theme-2027 .strDogadajPage .strSaleHead::before {content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; z-index: 2; background: var(--strCta);} .theme-2027 .strDogadajPage .strSaleBadges {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;} .theme-2027 .strDogadajPage .strSaleBadge {display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .82); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;} .theme-2027 .strDogadajPage .strSaleBadgeMain {border-color: transparent; background: var(--strCta); color: #fff;} .theme-2027 .strDogadajPage .strSaleTitle {margin: 0 0 14px; color: #fff; font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.04;} .theme-2027 .strDogadajPage .strSaleFacts {display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none;} .theme-2027 .strDogadajPage .strSaleFact {display: flex; flex-direction: column; gap: 3px; min-width: 0;} .theme-2027 .strDogadajPage .strSaleFact span {color: rgba(255, 255, 255, .5); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;} .theme-2027 .strDogadajPage .strSaleFact strong {color: #fff; font-size: 1rem; font-weight: 750; letter-spacing: -.01em;} .theme-2027 .strDogadajPage .strSaleOffer {display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; background: rgba(255, 255, 255, .06);} .theme-2027 .strDogadajPage .strSaleOffer small {color: rgba(255, 255, 255, .55); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;} .theme-2027 .strDogadajPage .strSaleOfferPrice {color: #fff; font-size: 2.6rem; font-weight: 850; letter-spacing: -.05em; line-height: 1;} .theme-2027 .strDogadajPage .strSaleOffer p {margin: 0; color: rgba(255, 255, 255, .56); font-size: .8rem;} .theme-2027 .strDogadajPage .strSaleOfferBtn {display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 14px 20px; border-radius: 999px; background: var(--strCta); color: #fff; font-size: .82rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;} .theme-2027 .strDogadajPage .strSaleOfferBtn:hover {background: var(--strCtaDark); color: #fff;} .theme-2027 .strDogadajPage .strSaleList {margin-top: 26px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12);} .theme-2027 .strDogadajPage .strSaleListNad {margin: 14px 0 10px; color: rgba(255, 255, 255, .5); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;} .theme-2027 .strDogadajPage .strSaleRow {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .08);} .theme-2027 .strDogadajPage .strSaleRowName {display: flex; flex-direction: column; gap: 2px; min-width: 0;} .theme-2027 .strDogadajPage .strSaleRowName strong {color: #fff; font-size: .98rem; font-weight: 800;} .theme-2027 .strDogadajPage .strSaleRowName span {color: rgba(255, 255, 255, .5); font-size: .78rem;} .theme-2027 .strDogadajPage .strSaleRowBuy {display: flex; align-items: center; gap: 16px; margin-left: auto;} .theme-2027 .strDogadajPage .strSaleRowPrice {min-width: 130px; color: #fff; font-size: 1.25rem; font-weight: 850; letter-spacing: -.03em; text-align: right; white-space: nowrap;} .theme-2027 .strDogadajPage .strSaleRowBtn {display: inline-flex; align-items: center; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--strCta); color: #fff; font-size: .74rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;} .theme-2027 .strDogadajPage .strSaleRowBtn:hover {background: var(--strCtaDark); color: #fff;} @media (max-width: 767px) { .theme-2027 .strDogadajPage .strSaleRowBuy {width: 100%; justify-content: space-between;} .theme-2027 .strDogadajPage .strSaleHead {padding: 1.5rem 1.25rem; border-radius: 26px;} .theme-2027 .strDogadajPage .strSaleOffer {padding: 18px;} .theme-2027 .strDogadajPage .strSaleOfferPrice {font-size: 2.2rem;} } @media (max-width: 480px) { .theme-2027 .strDogadajPage .strSaleRowBuy {flex-wrap: wrap; gap: 10px;} .theme-2027 .strDogadajPage .strSaleRowPrice {min-width: 0; text-align: left;} .theme-2027 .strDogadajPage .strSaleRowBtn {flex: 1 1 100%; justify-content: center; white-space: normal; text-align: center;} } .theme-2027 .strDogadajPage #strPrognoza .strStatsDuo {grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr); align-items: stretch;} .theme-2027 .strDogadajPage #strPrognoza .strStatsCard {border: 1px solid rgba(255, 255, 255, .12); border-radius: 29px; background: rgba(255, 255, 255, .05); color: #fff; box-shadow: none;} .theme-2027 .strDogadajPage #strPrognoza .strStatsCard p {color: rgba(255, 255, 255, .74);} @media (max-width: 991px) { .theme-2027 .strDogadajPage #strPrognoza .strStatsDuo {grid-template-columns: minmax(0, 1fr);} } .theme-2027 .strDogadajPage .strBuyBar {position: fixed; inset: auto 0 0 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(14px, 4vw, 42px); border-top: 1px solid rgba(255, 255, 255, .1); background: var(--strInk); color: #fff;} .theme-2027 .strDogadajPage .strBuyBarName {display: flex; flex-direction: column; gap: 2px; min-width: 0;} .theme-2027 .strDogadajPage .strBuyBarName strong {color: #fff; font-size: 1rem; font-weight: 850; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .theme-2027 .strDogadajPage .strBuyBarName span {color: var(--strCta); font-size: .86rem; font-weight: 800;} .theme-2027 .strDogadajPage .strBuyBarBtn {display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: var(--strCta); color: #fff; font-size: .82rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;} .theme-2027 .strDogadajPage .strBuyBarBtn:hover {background: var(--strCtaDark); color: #fff;} .theme-2027 .strDogadajPage {padding-bottom: 88px;} @media (max-width: 575px) { .theme-2027 .strDogadajPage .strBuyBarBtn {padding: 12px 18px; font-size: .74rem;} .theme-2027 .strDogadajPage .strBuyBarName strong {font-size: .86rem; line-height: 1.15; white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .theme-2027 .strDogadajPage {padding-bottom: 104px;} } .theme-2027 .strDogadajPage .strAiGrafika {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 1.75rem;} .theme-2027 .strDogadajPage .strAiRezultat {color: var(--strCta);} .theme-2027 .strDogadajPage #strPrognoza .strTextLink {display: block; width: fit-content; margin-left: auto;} @media (max-width: 1180px) { .theme-2027 .strDogadajPage .strAiGrafika {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));} } .theme-2027 .strDogadajPage .strPrgSusret {display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 14px 22px; margin: 14px 0 0;} .theme-2027 .strDogadajPage .strPrgSusretIme:first-of-type {justify-self: end;} .theme-2027 .strDogadajPage .strPrgSusretIme:first-of-type .strFxTeam {flex-direction: row-reverse;} .theme-2027 .strDogadajPage .strPrgSusretIme:last-of-type {justify-self: start;} .theme-2027 .strDogadajPage .strPrgSusretIme .strFxTeam {display: inline-flex; flex-direction: row; align-items: center; gap: 10px;} .theme-2027 .strDogadajPage .strPrgSusretIme .strFxNm {font-size: 1.6rem; font-weight: 850; line-height: 1.1; white-space: nowrap;} .theme-2027 .strDogadajPage .strPrgSusret .strAiRezultat {font-size: 2.4rem; font-weight: 950; letter-spacing: -.04em; white-space: nowrap; text-align: center;} .theme-2027 .strDogadajPage #strPrognoza .section-intro {max-width: none;} @media (max-width: 767px) { .theme-2027 .strDogadajPage .strPrgSusret {flex-wrap: wrap; gap: 10px 12px;} .theme-2027 .strDogadajPage .strPrgSusretIme .strFxNm {font-size: 1.15rem;} .theme-2027 .strDogadajPage .strPrgSusret .strAiRezultat {font-size: 1.8rem;} .theme-2027 .strDogadajPage .strPrgSusretIme {min-width: 0;} .theme-2027 .strDogadajPage .strPrgSusretIme .strFxTeam {min-width: 0; max-width: 100%;} .theme-2027 .strDogadajPage .strPrgSusretIme .strFxNm {white-space: normal; overflow-wrap: break-word; min-width: 0;} .theme-2027 .strDogadajPage .strPrgSusretIme:first-of-type .strFxNm {text-align: right;} } .theme-2027 .strDogadajPage .strKonKartice {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 1.5rem;} .theme-2027 .strDogadajPage .strKonKartice .strStatsCard h3 {margin: 0 0 12px; font-size: 1.05rem; font-weight: 850;} .theme-2027 .strDogadajPage .strPrgBod {margin: 0; color: var(--strInk); font-size: .86rem; font-weight: 800;} .theme-2027 .strDogadajPage .strTablicaGlava {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; margin: 1.75rem 0 .75rem;} .theme-2027 .strDogadajPage .strTablicaGlava h3 {margin: 0; font-size: 1.15rem; font-weight: 850;} .theme-2027 .strDogadajPage .strTablicaGlava span {color: var(--strMuted); font-size: .82rem;} @media (max-width: 991px) { .theme-2027 .strDogadajPage .strKonKartice {grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));} } .theme-2027 .strDogadajPage .strPrgForma {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;} .theme-2027 .strDogadajPage .strPrgFm {display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 13px; font-size: .9rem; font-weight: 900; font-style: normal;} .theme-2027 .strDogadajPage .strPrgFmW {background: rgba(22,163,74,.14); color: #16a34a;} .theme-2027 .strDogadajPage .strPrgFmD {background: rgba(245,158,11,.18); color: #b45309;} .theme-2027 .strDogadajPage .strPrgFmL {background: rgba(225,29,72,.12); color: var(--strCta);} .theme-2027 .strDogadajPage .strPrgRecenica {margin: 0 0 12px; color: var(--strMuted); font-size: .88rem; line-height: 1.5;} .theme-2027 .strDogadajPage .strPrgH2H {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid var(--strLine);} .theme-2027 .strDogadajPage .strPrgH2H:last-of-type {border-bottom: 0;} .theme-2027 .strDogadajPage .strPrgH2H span {color: var(--strMuted); font-size: .82rem;} .theme-2027 .strDogadajPage .strPrgH2H b {color: var(--strInk); font-size: .92rem; font-weight: 850;} .theme-2027 .strDogadajPage #strMomcadi .strStatsDuo {grid-template-columns: repeat(2, minmax(0, 1fr));} .theme-2027 .strDogadajPage #strMomcadi .strStatsCard h3 {margin: 0 0 6px; font-size: 1.1rem; font-weight: 850;} .theme-2027 .strDogadajPage .strSljRedak {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--strLine);} .theme-2027 .strDogadajPage .strSljRedak:last-child {border-bottom: 0;} .theme-2027 .strDogadajPage .strSljIme {display: flex; flex-direction: column; gap: 2px; min-width: 0;} .theme-2027 .strDogadajPage .strSljIme strong {color: var(--strInk); font-size: .92rem; font-weight: 850;} .theme-2027 .strDogadajPage .strSljIme span {color: var(--strMuted); font-size: .82rem;} @media (max-width: 991px) { .theme-2027 .strDogadajPage #strMomcadi .strStatsDuo {grid-template-columns: minmax(0, 1fr);} } .theme-2027 .strDogadajPage #strPresjek .strStatsDuo {grid-template-columns: repeat(2, minmax(0, 1fr));} .theme-2027 .strDogadajPage #strPresjek .strStatsCard h3 {margin: 0 0 10px; font-size: 1.02rem; font-weight: 850;} .theme-2027 .strDogadajPage #strPresjek .strStatsCard > p {margin: 0 0 8px; font-size: .88rem; line-height: 1.55;} .theme-2027 .strDogadajPage #strPresjek .strStatsCard > p:last-child {margin-bottom: 0;} @media (max-width: 991px) { .theme-2027 .strDogadajPage #strPresjek .strStatsDuo {grid-template-columns: minmax(0, 1fr);} } .theme-2027 .strDogadajPage .strPutOpisi {grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;} .theme-2027 .strDogadajPage .strPutOpisi .strStatsCard {height: 100%; display: flex; flex-direction: column;} .theme-2027 .strDogadajPage .strPutOpisi .strStatsCard p {flex: 1 1 auto;} .theme-2027 .strDogadajPage .strPutKarta {margin-top: 1.75rem; border-radius: var(--strRadiusMedium); overflow: hidden; border: 1px solid var(--strLine);} @media (max-width: 991px) { .theme-2027 .strDogadajPage .strPutOpisi {grid-template-columns: minmax(0, 1fr);} } .theme-2027 .strDogadajPage .strSljZnak {flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 10px;} .theme-2027 .strDogadajPage .strSljRedak .strSljIme {flex: 1 1 auto;} .theme-2027 .strDogadajPage .strDrugiMreza {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 1.5rem;} .theme-2027 .strDogadajPage .strDrugiKartica {display: block; min-height: 280px; text-decoration: none;} .theme-2027 .strDogadajPage .strDrugiKartica .strMosaicBody {position: absolute; inset: auto 0 0 0; z-index: 2; padding: 20px;} .theme-2027 .strDogadajPage .strDrugiKartica .strMosaicDate {color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;} .theme-2027 .strDogadajPage .strDrugiKartica .strMosaicTitle {margin: 6px 0 4px; color: #fff; font-size: 1.15rem; font-weight: 850; letter-spacing: -.02em; line-height: 1.2;} .theme-2027 .strDogadajPage .strDrugiKartica .strMosaicLocation {color: rgba(255,255,255,.72); font-size: .82rem;} .theme-2027 .strDogadajPage .strTurRedak {position: relative; padding-right: 190px;} .theme-2027 .strDogadajPage .strTurVeza {display: block; color: inherit; text-decoration: none;} .theme-2027 .strDogadajPage .strTurGumb {position: absolute; top: 50%; right: 18px; transform: translateY(-50%); white-space: nowrap;} .theme-2027 .strDogadajPage .strTurGumb .strFxPr {display: block; margin: 0; color: var(--strMuted); font-size: 11px;} .theme-2027 .strDogadajPage .strTurGumb .strFxPr b {margin-left: 4px; color: var(--strInk); font-size: 13px;} .theme-2027 .strDogadajPage .strTurGumb .strFxBt {display: inline-block; margin: 0; padding: 7px 12px; border-radius: var(--strRadiusSmall); color: #fff; background: var(--strCta); font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;} .theme-2027 .strDogadajPage .strTurGumb:hover .strFxBt {background: var(--strCtaDark);} @media (max-width: 575px) { .theme-2027 .strDogadajPage .strTurRedak {padding-right: 18px;} .theme-2027 .strDogadajPage .strTurGumb {position: static; transform: none; margin-top: 10px;} } .theme-2027 .strDogadajPage .strIzvGrid {display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: stretch; margin-top: 1.25rem;} .theme-2027 .strDogadajPage .strIzvGrid > .strStatsCard {height: 100%;} .theme-2027 .strDogadajPage .strIzvSlika {border-radius: var(--strRadiusMedium); overflow: hidden; background: var(--strPaper);} .theme-2027 .strDogadajPage .strIzvSlika img {display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover;} @media (max-width: 767px) { .theme-2027 .strDogadajPage .strIzvGrid {grid-template-columns: minmax(0, 1fr);} .theme-2027 .strDogadajPage .strIzvSlika img {min-height: 200px;} } .theme-2027 .strDogadajPage .strOsvjezeno {margin: 12px 2px 0; color: var(--strMuted); font-size: .78rem;} .theme-2027 .strDogadajPage .strPrgSusret .strPrgSusretIme .strFxNm {color: #fff;} .theme-2027 .strDogadajPage .strPrgSusret .strPrgSusretIme .strFxTeam {min-width: 0;} .strDogadajPage .strKreTblRed {margin-top: 1.25rem;} .strDogadajPage .strKreTblRed .strStatsCard {padding: 16px 18px;} .strDogadajPage .strKreTblRed h3 {margin-bottom: 10px;} .strDogadajPage .strKreTblRed .strTbl th {padding: 5px 8px;} .strDogadajPage .strKreTblRed .strTbl td {padding: 5px 8px; line-height: 1.25;} .theme-2027 .strDogadajPage .strKonTablica {margin-top: 1.75rem;} .theme-2027 .strDogadajPage .strKreGrafRed {margin-top: 1.25rem;} .theme-2027 .strDogadajPage .strSaleUvjeti {margin: 14px 0 0; color: rgba(255, 255, 255, .5); font-size: .74rem; line-height: 1.5;} .theme-2027 .strDogadajPage .strSignali {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;} .theme-2027 .strDogadajPage .strSignal {display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;} .theme-2027 .strDogadajPage .strSignal i {font-style: normal; color: rgba(255, 255, 255, .5); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;} .theme-2027 .strDogadajPage .strSignal b {font-size: .86rem; font-weight: 850; color: #fff;} .theme-2027 .strDogadajPage .strSigGore b {color: #ff8fa8;} .theme-2027 .strDogadajPage .strSigDolje b {color: #6ee7a8;} .theme-2027 .strDogadajPage .strKreGrafOs {display: flex; justify-content: space-between; margin-top: 6px; color: var(--strMuted); font-size: .7rem; font-weight: 700; letter-spacing: .04em;} .theme-2027 .strDogadajPage .strKreGrafPod {margin: 2px 0 10px; color: var(--strMuted); font-size: .78rem;} .theme-2027 .strDogadajPage .strKreGrafOkvir {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;} .theme-2027 .strDogadajPage .strKreGrafOsY {display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0 24px; color: var(--strMuted); font-size: .7rem; font-weight: 800; text-align: right; white-space: nowrap;} .theme-2027 .strDogadajPage .strKreGrafPloha {min-width: 0;} .theme-2027 .strDogadajPage .strKreGrafOsY:has(.strKreGrafOsJedan) {justify-content: center;} .theme-2027 .strAiPage .strHeroActions {display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .theme-2027 .strAiPage .strLiveBoard {position:relative;width:min(430px,100%);margin:0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:28px;color:#fff;background:rgba(17,18,26,.96);box-shadow:var(--strShadowL);transform:rotate(-2deg);backdrop-filter:blur(18px)} .theme-2027 .strAiPage .strLiveBoardHead {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.1)} .theme-2027 .strAiPage .strLiveLabel {display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:860;letter-spacing:.09em;text-transform:uppercase} .theme-2027 .strAiPage .strLiveLabel i {width:8px;height:8px;border-radius:50%;background:var(--strLime);box-shadow:0 0 0 6px rgba(217,255,102,.1)} .theme-2027 .strAiPage .strLiveTime {color:rgba(255,255,255,.56);font-size:.68rem;font-weight:720} .theme-2027 .strAiPage .strLiveMatch {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:23px 18px 19px;text-align:center} .theme-2027 .strAiPage .strTeamMini {display:grid;justify-items:center;gap:8px;min-width:0} .theme-2027 .strAiPage .strTeamMini:last-child .strTeamBadge {background:linear-gradient(135deg,#fff,var(--strYellow))} .theme-2027 .strAiPage .strTeamMini strong {max-width:120px;font-size:.8rem;line-height:1.15} .theme-2027 .strAiPage .strLiveScore {font-size:2.5rem;font-weight:940;letter-spacing:-.07em} .theme-2027 .strAiPage .strLiveScore span {color:var(--strPink);margin-inline:3px} .theme-2027 .strAiPage .strSignalList {display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1)} .theme-2027 .strAiPage .strSignal {padding:12px 8px;background:rgba(17,18,26,.96);text-align:center} .theme-2027 .strAiPage .strSignal small {display:block;color:rgba(255,255,255,.5);font-size:.58rem;font-weight:760;text-transform:uppercase} .theme-2027 .strAiPage .strSignal strong {display:block;margin-top:2px;font-size:.72rem} .theme-2027 .strAiPage .strLiveBoardFoot {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 18px;color:rgba(255,255,255,.58);font-size:.68rem} .theme-2027 .strAiPage .strLiveBoardFoot a {color:#fff;font-weight:790} .theme-2027 .strAiPage .strToolbar {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px} .theme-2027 .strAiPage .strSearchCompact {min-width:min(100%,370px);display:grid;grid-template-columns:22px 1fr;align-items:center;gap:9px;padding:11px 14px;border:1px solid var(--strLine);border-radius:999px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strAiPage .strPredictionDesk {overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:30px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strAiPage .strDeskHeader {display:grid;grid-template-columns:120px minmax(260px,1.2fr) 100px minmax(230px,.8fr) 72px;gap:16px;padding:14px 22px;color:var(--strMuted);background:#f0eff5;font-size:.67rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strAiPage .strPredictionDeskRow {display:grid;grid-template-columns:120px minmax(260px,1.2fr) 100px minmax(230px,.8fr) 72px;align-items:center;gap:16px;padding:19px 22px;border-top:1px solid var(--strLine);transition:background .18s ease,transform .18s ease} .theme-2027 .strAiPage .strPredictionDeskRow:hover {background:#fbfaff} .theme-2027 .strAiPage .strKickoff strong {display:block;font-size:.9rem} .theme-2027 .strAiPage .strKickoff span {color:var(--strMuted);font-size:.72rem} .theme-2027 .strAiPage .strMatchIdentity small {display:block;color:var(--strViolet);font-size:.66rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strAiPage .strMatchIdentity h3 {margin:4px 0 0;font-size:1rem;line-height:1.18} .theme-2027 .strAiPage .strScoreBox {display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;border-radius:16px;color:#fff;background:var(--strInk);font-size:1.35rem;font-weight:930} .theme-2027 .strAiPage .strScoreBox span {color:var(--strPink)} .theme-2027 .strAiPage .strEvidenceTags {display:flex;flex-wrap:wrap;gap:6px} .theme-2027 .strAiPage .strEvidenceTag {padding:6px 8px;border-radius:999px;color:var(--strInk2);background:var(--strPaper);font-size:.64rem;font-weight:780} .theme-2027 .strAiPage .strEvidenceTag.strPositive {color:#08795a;background:rgba(49,196,141,.11)} .theme-2027 .strAiPage .strEvidenceTag.strNeutral {color:#5948dc;background:rgba(101,87,255,.1)} .theme-2027 .strAiPage .strRowArrow {width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--strLine);border-radius:50%;font-weight:900;transition:transform .18s ease,background .18s ease} .theme-2027 .strAiPage .strPredictionDeskRow:hover .strRowArrow {color:#fff;background:var(--strViolet);transform:translateX(3px)} .theme-2027 .strAiPage .strCompetitionPanel {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:22px} .theme-2027 .strAiPage .strLeagueTableCard, .theme-2027 .strAiPage .strModelSummary {overflow:hidden;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} /* 🔴 14-09-2026 (izmjereno na 360 px): izbornik se sirio prema najduljem natpisu, pa je na njemackom („Hochste Trefferquote") i francuskom („Meilleur taux de reussite") virio izvan kartice i bio odrezan. Sirina sada ne prelazi karticu. */ .theme-2027 .strAiPage .strSortSelect {min-height:40px;padding:8px 30px 8px 12px;border:1px solid var(--strLine);border-radius:999px;background:#fff;font-size:.75rem;font-weight:780;max-width:100%} .theme-2027 .strAiPage .strLeagueTableHeader, .theme-2027 .strAiPage .strLeagueTableRow {display:grid;grid-template-columns:minmax(200px,1fr) 110px 100px 100px 70px;align-items:center;gap:12px;padding:13px 22px} .theme-2027 .strAiPage .strLeagueTableHeader {color:var(--strMuted);background:#f0eff5;font-size:.65rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strAiPage .strLeagueTableRow {border-top:1px solid var(--strLine)} .theme-2027 .strAiPage .strLeagueName {display:flex;align-items:center;gap:12px;min-width:0} .theme-2027 .strAiPage .strLeagueIcon {width:42px;height:42px;display:grid;flex:0 0 auto;place-items:center;border-radius:13px;color:var(--strViolet);background:rgba(101,87,255,.1);font-size:.7rem;font-weight:920} .theme-2027 .strAiPage .strLeagueName strong {display:block;font-size:.88rem} .theme-2027 .strAiPage .strLeagueName span {display:block;color:var(--strMuted);font-size:.68rem} .theme-2027 .strAiPage .strAccuracyPill {display:inline-flex;align-items:center;gap:7px;font-weight:880} .theme-2027 .strAiPage .strAccuracyDot {width:8px;height:8px;border-radius:50%;background:var(--strGreen)} .theme-2027 .strAiPage .strAccuracyDot.strMedium {background:var(--strYellow)} .theme-2027 .strAiPage .strAccuracyDot.strLow {background:var(--strRed)} .theme-2027 .strAiPage .strLeagueMeta {color:var(--strMuted);font-size:.72rem} .theme-2027 .strAiPage .strLeagueOpen {width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--strViolet);background:rgba(101,87,255,.09);font-weight:900} .theme-2027 .strAiPage .strModelSummary {padding:24px;color:#fff;background:radial-gradient(circle at 88% 10%,rgba(111,229,255,.16),transparent 20rem),var(--strInk)} .theme-2027 .strAiPage .strModelSummary .strEyebrow {color:var(--strLime)} .theme-2027 .strAiPage .strModelSummary .strEyebrow:before {background:var(--strLime);box-shadow:0 0 0 6px rgba(217,255,102,.1)} .theme-2027 .strAiPage .strModelSummary h3 {margin:0;font-size:clamp(2rem,3vw,3.25rem);line-height:1.02;letter-spacing:-.05em} .theme-2027 .strAiPage .strDonut {width:190px;height:190px;display:grid;place-items:center;margin:28px auto;border-radius:50%;background:conic-gradient(var(--strAqua) 0 56%,rgba(255,255,255,.09) 56% 100%);box-shadow:inset 0 0 0 22px var(--strInk)} .theme-2027 .strAiPage .strDonut span {text-align:center} .theme-2027 .strAiPage .strDonut strong {display:block;font-size:2.6rem;line-height:1} .theme-2027 .strAiPage .strDonut small {color:rgba(255,255,255,.58);font-size:.68rem} .theme-2027 .strAiPage .strModelBars {display:grid;gap:12px} .theme-2027 .strAiPage .strModelBarRow {display:grid;grid-template-columns:1fr auto;gap:10px;color:rgba(255,255,255,.72);font-size:.72rem} .theme-2027 .strAiPage .strModelBarTrack {grid-column:1/3;height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09)} .theme-2027 .strAiPage .strModelBarFill {height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--strPink),var(--strAqua))} .theme-2027 .strAiPage .strModelSummaryNote {margin:20px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.57);font-size:.72rem} .theme-2027 .strAiPage .strAuditSection {overflow:hidden;color:#fff;background:radial-gradient(circle at 15% 20%,rgba(255,77,114,.17),transparent 30rem),radial-gradient(circle at 88% 15%,rgba(111,229,255,.14),transparent 28rem),var(--strInk)} .theme-2027 .strAiPage .strAuditSection .strEyebrow {color:var(--strLime)} .theme-2027 .strAiPage .strAuditSection .strEyebrow:before {background:var(--strLime);box-shadow:0 0 0 6px rgba(217,255,102,.1)} .theme-2027 .strAiPage .strAuditSection .strSectionIntro {color:rgba(255,255,255,.62)} .theme-2027 .strAiPage .strAuditGrid {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px} .theme-2027 .strAiPage .strTrendPanel, .theme-2027 .strAiPage .strSettledPanel {border:1px solid rgba(255,255,255,.11);border-radius:28px;background:rgba(255,255,255,.055);box-shadow:0 24px 70px rgba(0,0,0,.2);backdrop-filter:blur(16px)} .theme-2027 .strAiPage .strTrendPanel {padding:24px} .theme-2027 .strAiPage .strTrendPanel h3, .theme-2027 .strAiPage .strSettledPanel h3 {margin:0;font-size:1.3rem} .theme-2027 .strAiPage .strTrendPanel p, .theme-2027 .strAiPage .strSettledPanel p {margin:6px 0 0;color:rgba(255,255,255,.55);font-size:.75rem} .theme-2027 .strAiPage .strTrendChart {margin-top:24px} .theme-2027 .strAiPage .strTrendChart svg {width:100%;height:230px;overflow:visible} .theme-2027 .strAiPage .strTrendGrid {stroke:rgba(255,255,255,.1);stroke-width:1} .theme-2027 .strAiPage .strTrendLine {fill:none;stroke:url(#strTrendGradient);stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .theme-2027 .strAiPage .strTrendArea {fill:url(#strTrendAreaGradient)} .theme-2027 .strAiPage .strTrendPoint {fill:var(--strLime);stroke:var(--strInk);stroke-width:4} .theme-2027 .strAiPage .strTrendLabels {display:flex;justify-content:space-between;color:rgba(255,255,255,.48);font-size:.65rem} .theme-2027 .strAiPage .strOutcomeMatrix {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px} .theme-2027 .strAiPage .strOutcomeCell {padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.04)} .theme-2027 .strAiPage .strOutcomeCell small {display:block;color:rgba(255,255,255,.48);font-size:.62rem;font-weight:800;text-transform:uppercase} .theme-2027 .strAiPage .strOutcomeCell strong {display:block;margin-top:5px;font-size:1.45rem} .theme-2027 .strAiPage .strOutcomeCell span {color:rgba(255,255,255,.62);font-size:.68rem} .theme-2027 .strAiPage .strSettledPanel {overflow:hidden} .theme-2027 .strAiPage .strSettledHead {padding:22px 24px} .theme-2027 .strAiPage .strSettledList {display:grid} .theme-2027 .strAiPage .strSettledRow {display:grid;grid-template-columns:1fr 92px 92px 92px;align-items:center;gap:12px;padding:15px 22px;border-top:1px solid rgba(255,255,255,.09)} .theme-2027 .strAiPage .strSettledRow h4 {margin:0;font-size:.86rem} .theme-2027 .strAiPage .strSettledRow small {display:block;color:rgba(255,255,255,.48);font-size:.64rem} .theme-2027 .strAiPage .strSettledScore {text-align:center} .theme-2027 .strAiPage .strSettledScore small {display:block} .theme-2027 .strAiPage .strSettledScore strong {font-size:.92rem} .theme-2027 .strAiPage .strStatusPill {display:inline-flex;justify-content:center;padding:6px 8px;border-radius:999px;font-size:.65rem;font-weight:860} .theme-2027 .strAiPage .strStatusPill.strMiss {color:#fff;background:rgba(255,107,107,.23);border:1px solid rgba(255,107,107,.35)} .theme-2027 .strAiPage .strMethodGrid {display:grid;grid-template-columns:repeat(4,1fr);gap:15px} .theme-2027 .strAiPage .strMethodCard {min-height:230px;padding:22px;border:1px solid rgba(17,18,26,.08);border-radius:24px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strAiPage .strExperiencePanel {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);overflow:hidden;border-radius:32px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowL)} .theme-2027 .strAiPage .strExperienceImage {min-height:520px} .theme-2027 .strAiPage .strExperienceImage img {height:100%;object-fit:cover} .theme-2027 .strAiPage .strExperienceCopy {padding:50px} .theme-2027 .strAiPage .strExperienceCopy .strEyebrow {color:var(--strLime)} .theme-2027 .strAiPage .strExperienceCopy .strEyebrow:before {background:var(--strLime);box-shadow:0 0 0 6px rgba(217,255,102,.1)} .theme-2027 .strAiPage .strExperienceCopy h2 {margin:0;font-size:clamp(2.7rem,5vw,5.3rem);line-height:1.02;letter-spacing:-.064em} .theme-2027 .strAiPage .strExperienceCopy p {margin:20px 0 0;color:rgba(255,255,255,.62)} .theme-2027 .strAiPage .strExperienceCopy .strHeroActions {margin-top:28px} .theme-2027 .strAiPage .strFaqGrid {display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .theme-2027 .strAiPage .strFaqButton {width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:0;color:var(--strInk);background:#fff;cursor:pointer;text-align:left;font-weight:830} .theme-2027 .strAiPage .strFaqButton span:last-child {font-size:1.25rem} @media(max-width:1160px) { .theme-2027 .strAiPage .strPredictionDeskRow, .theme-2027 .strAiPage .strDeskHeader {grid-template-columns:100px minmax(230px,1fr) 90px minmax(190px,.7fr) 50px} .theme-2027 .strAiPage .strCompetitionPanel {grid-template-columns:1fr} .theme-2027 .strAiPage .strMethodGrid {grid-template-columns:repeat(2,1fr)} } @media(max-width:900px) { .theme-2027 .strAiPage .strPredictionDesk {overflow:visible;border:0;background:transparent;box-shadow:none} .theme-2027 .strAiPage .strDeskHeader {display:none} .theme-2027 .strAiPage .strPredictionDeskRow {grid-template-columns:88px minmax(0,1fr) 74px 40px;gap:10px;margin-bottom:10px;padding:15px;border:1px solid rgba(17,18,26,.08);border-radius:20px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strAiPage .strEvidenceTags {grid-column:2/5} .theme-2027 .strAiPage .strScoreBox {min-height:46px;font-size:1.14rem} .theme-2027 .strAiPage .strCompetitionPanel, .theme-2027 .strAiPage .strAuditGrid, .theme-2027 .strAiPage .strExperiencePanel {grid-template-columns:1fr} .theme-2027 .strAiPage .strLeagueTableHeader, .theme-2027 .strAiPage .strLeagueTableRow {grid-template-columns:minmax(160px,1fr) 80px 80px 56px} .theme-2027 .strAiPage .strLeagueTableHeader>*:nth-child(4), .theme-2027 .strAiPage .strLeagueTableRow>*:nth-child(4) {display:none} .theme-2027 .strAiPage .strMethodGrid {grid-template-columns:repeat(2,1fr)} .theme-2027 .strAiPage .strExperienceImage {min-height:360px} .theme-2027 .strAiPage .strExperienceCopy {padding:36px} .theme-2027 .strAiPage .strFaqGrid {grid-template-columns:1fr} } @media(max-width:620px) { .theme-2027 .strAiPage .strHeroActions {display:grid} .theme-2027 .strAiPage .strLiveBoard {width:100%;transform:rotate(-1deg)} .theme-2027 .strAiPage .strLiveMatch {padding:16px 12px} .theme-2027 .strAiPage .strLiveScore {font-size:2rem} .theme-2027 .strAiPage .strSignalList {display:none} .theme-2027 .strAiPage .strToolbar {align-items:stretch;flex-direction:column} .theme-2027 .strAiPage .strSearchCompact {min-width:100%} .theme-2027 .strAiPage .strPredictionDeskRow {grid-template-columns:70px minmax(0,1fr) 68px 36px;padding:13px} .theme-2027 .strAiPage .strKickoff strong {font-size:.78rem} .theme-2027 .strAiPage .strMatchIdentity h3 {font-size:.88rem} .theme-2027 .strAiPage .strMatchIdentity small {font-size:.58rem} .theme-2027 .strAiPage .strEvidenceTags {grid-column:1/5} .theme-2027 .strAiPage .strLeagueTableHeader, .theme-2027 .strAiPage .strLeagueTableRow {grid-template-columns:minmax(150px,1fr) 72px 50px} .theme-2027 .strAiPage .strLeagueTableHeader>*:nth-child(3), .theme-2027 .strAiPage .strLeagueTableRow>*:nth-child(3) {display:none} .theme-2027 .strAiPage .strModelSummary {padding:20px} .theme-2027 .strAiPage .strAuditGrid {gap:14px} .theme-2027 .strAiPage .strSettledRow {grid-template-columns:1fr 72px 72px} .theme-2027 .strAiPage .strSettledRow>*:nth-child(3) {display:none} .theme-2027 .strAiPage .strOutcomeMatrix {grid-template-columns:1fr} .theme-2027 .strAiPage .strMethodGrid {grid-template-columns:1fr} .theme-2027 .strAiPage .strMethodCard {min-height:190px} .theme-2027 .strAiPage .strExperienceCopy {padding:28px 22px} .theme-2027 .strAiPage .strExperienceCopy h2 {font-size:2.65rem} } .theme-2027 .strAiPage .strHeroSearch {position: relative; max-width: 790px; margin-top: 32px;} .theme-2027 .strAiPage .strDonut {background: conic-gradient(var(--strAqua) 0 var(--strDonutPct, 0%), rgba(255,255,255,.09) var(--strDonutPct, 0%) 100%);} .theme-2027 .strAiPage .strFaqButton {list-style: none;} .theme-2027 .strAiPage .strFaqButton span:last-child {transition: transform .18s ease;} .theme-2027 .strAiPage .strExperienceImage img, .theme-2027 .strAiPage .strIntelligencePhoto img {width: 100%; display: block;} .theme-2027 .strAiPage .strStatusPill {align-self: center; gap: 4px; align-items: center; white-space: nowrap; text-align: center;} @media (max-width: 620px) { .theme-2027 .strAiPage .strSettledRow {grid-template-columns: 1fr 72px 92px;} } @media (max-width: 900px) { .theme-2027 .strAiPage .strLeagueTableHeader, .theme-2027 .strAiPage .strLeagueTableRow {grid-template-columns: minmax(160px,1fr) 92px 92px;} } .theme-2027 .strAiPage .strVisualMain, .theme-2027 .strStaticPage .strVisualMain {background: var(--strInk);} .theme-2027 .strAiPage .strVisualMain::after {background: linear-gradient(160deg, rgba(101,87,255,.22), rgba(225,29,72,.18) 55%, rgba(17,18,26,.10));} .theme-2027 .strAiPage .strVisualMainBody {color: #fff;} @media (max-width: 980px) { .theme-2027 .strAiPage .strPredictionDeskRow .strRowArrow {grid-column: 4; grid-row: 1; justify-self: end;} } .theme-2027 .strAiPage .strMatchIdentity h3 {overflow-wrap: break-word;} .theme-2027 .strAiPage .strMatchIdentity {min-width: 0;} .theme-2027 .strSportPage {--strInk:#11121a;--strInkSoft:#292b38;--strPaper:#f6f5f9;--strCard:#fff;--strLine:rgba(17,18,26,.11); --strMuted:#6b6e7d;--strPink:#e11d48;--strPinkDark:#b8163a;--strViolet:#6557ff;--strLime:#d9ff66; --strAqua:#6fe5ff;--strYellow:#ffcf5a;--strSuccess:#31c48d;--strRadiusS:14px;--strRadiusM:22px; --strRadiusL:34px;--strShadowS:0 12px 34px rgba(25,23,43,.09);--strShadowL:0 28px 80px rgba(23,20,45,.18); --strContainer:1380px} .theme-2027 .strSportPage *, .theme-2027 .strSportPage *::before, .theme-2027 .strSportPage *::after {box-sizing:border-box} .theme-2027 .strSportPage {scroll-behavior:smooth;-webkit-text-size-adjust:100%} .theme-2027 .strSportPage .strContainer {width:min(calc(100% - 40px),var(--strContainer));margin-inline:auto} .theme-2027 .strSportPage .strSection {position:relative;padding:96px 0} .theme-2027 .strSportPage .strSectionHead {display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px} .theme-2027 .strSportPage .strSectionHeadText {max-width:820px} .theme-2027 .strSportPage .strSectionTitle {margin:0;font-size:clamp(2.15rem,4.1vw,4.5rem);line-height:1.03;letter-spacing:-.055em} .theme-2027 .strSportPage .strHero {position:relative;min-height:760px;overflow:hidden;padding:72px 0 64px} .theme-2027 .strSportPage .strHero::before {position:absolute;top:5%;right:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(111,229,255,0.40),rgba(101,87,255,0.08) 54%,transparent 70%);pointer-events:none;content:""} .theme-2027 .strSportPage .strHero::after {position:absolute;bottom:0;left:-140px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,114,0.18),transparent 68%);pointer-events:none;content:""} .theme-2027 .strSportPage .strHeroGrid {position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(430px,.78fr);align-items:center;gap:clamp(44px,7vw,108px)} .theme-2027 .strSportPage .strHero h1 {max-width:820px;margin:0;font-size:clamp(3.4rem,7.2vw,7.2rem);line-height:1.02;letter-spacing:-.072em} .theme-2027 .strSportPage .strHero h1 span {display:block;color:var(--strPink);background:var(--strPink);-webkit-background-clip:text;background-clip:text} @supports ((-webkit-background-clip:text) or (background-clip:text)) { .theme-2027 .strSportPage .strHero h1 span {color:transparent} } .theme-2027 .strSportPage .strHeroLead {max-width:720px;margin:28px 0 0;color:var(--strInkSoft);font-size:clamp(1.08rem,1.6vw,1.32rem)} .theme-2027 .strSportPage .strHeroSearch {max-width:760px;margin-top:30px} .theme-2027 .strSportPage .strHeroTrust {display:flex;flex-wrap:wrap;gap:17px;margin-top:25px;color:var(--strMuted);font-size:.82rem;font-weight:700} .theme-2027 .strSportPage .strHeroTrust span {display:inline-flex;align-items:center;gap:8px} .theme-2027 .strSportPage .strHeroTrust i {width:7px;height:7px;border-radius:50%;background:var(--strSuccess);box-shadow:0 0 0 5px rgba(49,196,141,.11)} .theme-2027 .strSportPage .strSportTools {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px} .theme-2027 .strSportPage .strFilterGroup {display:flex;flex-wrap:wrap;gap:8px} .theme-2027 .strSportPage .strFilterButton {padding:10px 15px;border:1px solid var(--strLine);border-radius:999px;color:var(--strInkSoft);background:#fff;cursor:pointer;font-size:.82rem;font-weight:800;transition:color .18s ease,background .18s ease,border-color .18s ease} .theme-2027 .strSportPage .strVisibleCount {color:var(--strMuted);font-size:.84rem;font-weight:700} .theme-2027 .strSportPage .strSportsGrid {display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:230px;gap:18px} .theme-2027 .strSportPage .strSportCard {position:relative;isolation:isolate;grid-column:span 3;overflow:hidden;border-radius:28px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowS);transition:transform .22s ease,box-shadow .22s ease} .theme-2027 .strSportPage .strSportCard:hover {transform:translateY(-5px);box-shadow:var(--strShadowL)} .theme-2027 .strSportPage .strSportCard.strHidden {display:none} .theme-2027 .strSportPage .strSportHero {grid-column:span 6;grid-row:span 2} .theme-2027 .strSportPage .strSportWide {grid-column:span 6} .theme-2027 .strSportPage .strSportMedium {grid-column:span 3} .theme-2027 .strSportPage .strSportSmall {grid-column:span 3} .theme-2027 .strSportPage .strSportCard>img {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .56s cubic-bezier(.2,.7,.2,1)} .theme-2027 .strSportPage .strSportCard:hover>img {transform:scale(1.055)} .theme-2027 .strSportPage .strSportOverlay {position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,17,.04) 13%,rgba(10,11,17,.22) 40%,rgba(10,11,17,.92) 100%)} .theme-2027 .strSportPage .strSportCardTop {position:absolute;top:16px;right:16px;left:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .theme-2027 .strSportPage .strSportCode {width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(17,18,26,.46);backdrop-filter:blur(12px);font-size:.74rem;font-weight:950} .theme-2027 .strSportPage .strSportMeta {max-width:70%;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--strInk);font-size:.65rem;font-weight:830;text-align:right;backdrop-filter:blur(10px)} .theme-2027 .strSportPage .strSportCardBody {position:absolute;right:18px;bottom:17px;left:18px} .theme-2027 .strSportPage .strSportCardBody>p {max-width:560px;margin:0 0 6px;color:rgba(255,255,255,.68);font-size:.72rem;font-weight:650} .theme-2027 .strSportPage .strSportCard h2 {margin:0;font-size:clamp(1.55rem,2.5vw,3.15rem);line-height:1.02;letter-spacing:-.045em} .theme-2027 .strSportPage .strSportSmall h2, .theme-2027 .strSportPage .strSportMedium h2 {font-size:clamp(1.45rem,2vw,2.05rem)} .theme-2027 .strSportPage .strSportRoutes {display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:15px} .theme-2027 .strSportPage .strSportRoutes a {min-width:0;padding:10px 9px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(17,18,26,.48);backdrop-filter:blur(12px);transition:background .18s ease,border-color .18s ease,transform .18s ease} .theme-2027 .strSportPage .strSportRoutes a:hover {transform:translateY(-2px);border-color:rgba(255,255,255,.34);background:rgba(17,18,26,.72)} .theme-2027 .strSportPage .strSportRoutes span {display:block;color:var(--strLime);font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase} .theme-2027 .strSportPage .strSportRoutes strong {display:block;margin-top:2px;color:#fff;font-size:.64rem;font-weight:760;line-height:1.2} .theme-2027 .strSportPage .strSportSmall .strSportCardBody>p, .theme-2027 .strSportPage .strSportSmall .strSportRoutes strong {display:none} .theme-2027 .strSportPage .strSportSmall .strSportRoutes a {padding:9px 7px} .theme-2027 .strSportPage .strSportSmall .strSportRoutes span {font-size:.56rem;text-align:center} .theme-2027 .strSportPage .strEmptyState {display:none;padding:34px;border:1px solid var(--strLine);border-radius:24px;background:#fff;text-align:center;box-shadow:var(--strShadowS)} .theme-2027 .strSportPage .strEmptyState.strShow {display:block} .theme-2027 .strSportPage .strEmptyState h3 {margin:0;font-size:1.4rem} .theme-2027 .strSportPage .strEmptyState p {margin:8px 0 0;color:var(--strMuted)} .theme-2027 .strSportPage .strPopularBox {padding:34px;border:1px solid rgba(17,18,26,.08);border-radius:28px;background:#fff;box-shadow:var(--strShadowS)} .theme-2027 .strSportPage .strPopularGrid {display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start} .theme-2027 .strSportPage .strPopularGroups {display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .theme-2027 .strSportPage .strNewsletterBox {position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:48px;border-radius:32px;color:#fff;background:var(--strPink);box-shadow:var(--strShadowL)} .theme-2027 .strSportPage .strNewsletterForm {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:8px;border-radius:18px;background:#fff} .theme-2027 .strSportPage .strMobileDock {display:none} .theme-2027 .strSportPage .strReveal {opacity:1;transform:none} @media(max-width:1180px) { .theme-2027 .strSportPage .strHeroGrid {grid-template-columns:1fr .86fr;gap:42px} .theme-2027 .strSportPage .strHero h1 {font-size:clamp(3.3rem,7vw,6rem)} .theme-2027 .strSportPage .strSportsGrid {grid-auto-rows:220px} .theme-2027 .strSportPage .strSportHero {grid-column:span 8} .theme-2027 .strSportPage .strSportWide {grid-column:span 4;grid-row:span 2} .theme-2027 .strSportPage .strSportMedium, .theme-2027 .strSportPage .strSportSmall {grid-column:span 4} .theme-2027 .strSportPage .strPopularGrid {grid-template-columns:1fr} } @media(max-width:980px) { .theme-2027 .strSportPage .strSection {padding:76px 0} .theme-2027 .strSportPage .strHero {min-height:auto;padding-top:42px} .theme-2027 .strSportPage .strHeroGrid {grid-template-columns:1fr} .theme-2027 .strSportPage .strSportsGrid {grid-template-columns:repeat(2,1fr);grid-auto-rows:260px} .theme-2027 .strSportPage .strSportHero, .theme-2027 .strSportPage .strSportWide, .theme-2027 .strSportPage .strSportMedium, .theme-2027 .strSportPage .strSportSmall {grid-column:auto;grid-row:auto} .theme-2027 .strSportPage .strSportHero {grid-column:span 2;grid-row:span 2} .theme-2027 .strSportPage .strSportWide {grid-column:span 2} .theme-2027 .strSportPage .strSportSmall .strSportCardBody>p {display:block} .theme-2027 .strSportPage .strSportSmall .strSportRoutes strong {display:block} .theme-2027 .strSportPage .strPopularGroups {grid-template-columns:1fr} .theme-2027 .strSportPage .strNewsletterBox {grid-template-columns:1fr} } @media(max-width:700px) { .theme-2027 .strSportPage .strContainer {width:min(calc(100% - 24px),var(--strContainer))} .theme-2027 .strSportPage .strHero h1 {font-size:clamp(3rem,15vw,5rem)} .theme-2027 .strSportPage .strHeroLead {font-size:1rem} .theme-2027 .strSportPage .strHeroTrust {align-items:flex-start;flex-direction:column;gap:8px} .theme-2027 .strSportPage .strSectionHead {align-items:flex-start;flex-direction:column;margin-bottom:25px} .theme-2027 .strSportPage .strFilterGroup {flex-wrap:nowrap;width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} .theme-2027 .strSportPage .strFilterButton {flex:0 0 auto} .theme-2027 .strSportPage .strSportsGrid {grid-template-columns:1fr;grid-auto-rows:430px} .theme-2027 .strSportPage .strSportHero, .theme-2027 .strSportPage .strSportWide {grid-column:auto;grid-row:auto} .theme-2027 .strSportPage .strSportCard {grid-column:auto!important;grid-row:auto!important} .theme-2027 .strSportPage .strSportCardBody>p, .theme-2027 .strSportPage .strSportSmall .strSportCardBody>p {display:block} .theme-2027 .strSportPage .strSportRoutes strong, .theme-2027 .strSportPage .strSportSmall .strSportRoutes strong {display:block;font-size:.65rem} .theme-2027 .strSportPage .strSportRoutes a {padding:10px 7px} .theme-2027 .strSportPage .strSportCard h2, .theme-2027 .strSportPage .strSportSmall h2, .theme-2027 .strSportPage .strSportMedium h2 {font-size:2.15rem} .theme-2027 .strSportPage .strPopularBox {padding:23px} .theme-2027 .strSportPage .strNewsletterBox {padding:30px 23px} .theme-2027 .strSportPage .strNewsletterForm {grid-template-columns:1fr} .theme-2027 .strSportPage .strMobileDock {position:fixed;right:12px;bottom:10px;left:12px;z-index:900;display:grid;grid-template-columns:repeat(4,1fr);padding:8px;border:1px solid rgba(255,255,255,.2);border-radius:20px;color:#fff;background:rgba(17,18,26,.93);box-shadow:0 18px 44px rgba(17,18,26,.35);backdrop-filter:blur(18px)} .theme-2027 .strSportPage .strMobileDock a {display:grid;place-items:center;gap:3px;padding:5px;color:rgba(255,255,255,.65);font-size:.61rem;font-weight:760;text-align:center} .theme-2027 .strSportPage .strMobileDock a:hover, .theme-2027 .strSportPage .strMobileDock a:nth-child(2) {color:#fff} .theme-2027 .strSportPage .strMobileDock .strIcon {width:19px;height:19px} } @media(max-width:480px) { .theme-2027 .strSportPage .strSportsGrid {grid-auto-rows:400px} .theme-2027 .strSportPage {scroll-behavior:auto} .theme-2027 .strSportPage *, .theme-2027 .strSportPage *::before, .theme-2027 .strSportPage *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } .theme-2027 .strSportPage .strSportMedium .strSportCardBody > p, .theme-2027 .strSportPage .strSportWide .strSportCardBody > p, .theme-2027 .strSportPage .strSportSmall .strSportCardBody > p {display: none;} @media (max-width: 700px) { .theme-2027 .strSportPage .strSportCardBody > p {display: none;} } .theme-2027 .strSportPage .strSportRoutes strong {white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;} .theme-2027 .strSportPage .strSportRoutes span {letter-spacing: .02em; overflow-wrap: break-word;} .theme-2027 .strSportPage .strSportMedium .strSportRoutes strong, .theme-2027 .strSportPage .strSportSmall .strSportRoutes strong {font-size: .6rem;} .theme-2027 .strSportPage .strSportSmall .strSportRoutes strong {display: block;} .theme-2027 .strClanakPage .clnWrap {max-width: 1360px; margin: 0 auto; padding: 0 20px;} .theme-2027 .strClanakPage .clnGrid {display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; padding: 44px 0 20px; align-items: start;} .theme-2027 .strClanakPage .clnRubrika {display: inline-block; margin: 0 0 16px; padding-bottom: 7px; border-bottom: 3px solid var(--strCta); color: var(--strInk); font-size: .73rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;} .theme-2027 .strClanakPage .clnNaslov {margin: 0; max-width: 24ch; color: var(--strInk); font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.07; letter-spacing: -.035em; font-weight: 800; hyphens: manual;} .theme-2027 .strClanakPage .clnLead {max-width: 66ch; margin: 20px 0 0; color: var(--strInkSoft); font-size: 1.2rem; line-height: 1.6;} .theme-2027 .strClanakPage .clnMeta {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 22px 0 0; color: var(--strMuted); font-size: .84rem; font-weight: 600;} .theme-2027 .strClanakPage .clnMeta span {display: inline-flex; align-items: center; gap: 8px;} .theme-2027 .strClanakPage .clnMeta span + span::before {content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--strCta);} .theme-2027 .strClanakPage .clnMeta a {color: var(--strInk);} .theme-2027 .strClanakPage .clnMeta a:hover {color: var(--strCta);} .theme-2027 .strClanakPage .clnShare {margin: 22px 0 26px; padding: 16px 0; border-block: 1px solid var(--strLine);} .theme-2027 .strClanakPage .tn-share {display: flex; align-items: center; gap: 14px; flex-wrap: wrap;} .theme-2027 .strClanakPage .tn-share-label {color: var(--strMuted); font-size: .72rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;} .theme-2027 .strClanakPage .tn-share-list {display: flex; gap: 10px; list-style: none; margin: 0; padding: 0;} .theme-2027 .strClanakPage .tn-share-btn {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; border: 1px solid var(--strLine); background: #fff; color: var(--strInk); transition: background 160ms ease, color 160ms ease, border-color 160ms ease;} .theme-2027 .strClanakPage .tn-share-btn svg {width: 17px; height: 17px; fill: currentColor;} .theme-2027 .strClanakPage .tn-share-btn:hover {background: var(--strInk); border-color: var(--strInk); color: #fff;} .theme-2027 .strClanakPage .tn-share-copied {background: var(--strCta); border-color: var(--strCta); color: #fff;} .theme-2027 .strClanakPage .tn-share-copied-msg {color: var(--strMuted); font-size: .78rem;} .theme-2027 .strClanakPage .clnFoto {margin: 0 0 30px;} .theme-2027 .strClanakPage .tn-img-frame {position: relative; overflow: hidden; border-radius: 20px; line-height: 0; box-shadow: 0 24px 56px rgba(20,18,45,.14);} .theme-2027 .strClanakPage .tn-img-frame-img {width: 100%; height: auto; display: block;} .theme-2027 .strClanakPage .tn-img-credit {position: absolute; right: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(13,14,20,.62); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.2;} .theme-2027 .strClanakPage .tn-img-credit-link:hover {background: var(--strCta);} .theme-2027 .strClanakPage .tn-img-ai-caption {margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--strPaper); color: var(--strMuted); font-size: .82rem; line-height: 1.45; font-style: italic;} .theme-2027 .strClanakPage .tn-img-ai-caption-link {color: var(--strCta); font-style: normal; font-weight: 700;} .theme-2027 .strClanakPage .clnSmjestaj {margin: 0 0 32px;} .theme-2027 .strClanakPage .clnBlokNaslov {margin: 0 0 14px; font-size: .73rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--strInk);} .theme-2027 .strClanakPage .clnVrijeme {display: inline-block; margin: 0 0 20px; padding: 10px 16px; background: var(--strPaper); border-left: 3px solid var(--strCta); border-radius: 0 10px 10px 0; font-weight: 700; color: var(--strInk);} .theme-2027 .strClanakPage .clnTekst {color: var(--strInk); font-size: 1.08rem; line-height: 1.78; max-width: 72ch;} .theme-2027 .strClanakPage .clnTekst p {margin: 0 0 1.2em;} .theme-2027 .strClanakPage .clnTekst h2 {font-size: 1.58rem; line-height: 1.22; letter-spacing: -.025em; font-weight: 800; margin: 2em 0 .5em;} .theme-2027 .strClanakPage .clnTekst h2::before {content: ""; display: block; width: 46px; height: 4px; margin-bottom: 14px; background: var(--strCta); border-radius: 2px;} .theme-2027 .strClanakPage .clnTekst h3 {font-size: 1.2rem; font-weight: 750; margin: 1.7em 0 .4em;} .theme-2027 .strClanakPage .clnTekst a {color: var(--strCta); text-decoration: underline; text-underline-offset: 3px;} .theme-2027 .strClanakPage .clnTekst ul, .theme-2027 .strClanakPage .clnTekst ol {margin: 0 0 1.2em; padding-left: 1.3em;} .theme-2027 .strClanakPage .clnTekst li {margin-bottom: .45em;} .theme-2027 .strClanakPage .clnTekst blockquote {margin: 1.8em 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--strCta); font-size: 1.2rem; line-height: 1.55; font-weight: 500;} .theme-2027 .strClanakPage .clnTekst img {border-radius: 16px;} .theme-2027 .strClanakPage .clnTekst iframe {width: 100%; border: 0; border-radius: 16px;} .theme-2027 .strClanakPage .tn-ai-note {margin: 26px 0 0; padding: 14px 18px; border-radius: 12px; background: #fff1f4; color: var(--strInk); font-size: .84rem; line-height: 1.5;} .theme-2027 .strClanakPage .tn-ai-note-label {font-weight: 800; color: var(--strCta); margin-right: 6px;} .theme-2027 .strClanakPage .clnOznake {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 0;} .theme-2027 .strClanakPage .clnOznakeNatpis {color: var(--strMuted); font-size: .72rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; margin-right: 4px;} .theme-2027 .strClanakPage .clnOznaka {padding: 7px 12px; border-radius: 10px; background: var(--strPaper); color: var(--strInk); font-size: .78rem; font-weight: 700;} .theme-2027 .strClanakPage .clnOznaka:hover {background: var(--strCta); color: #fff;} .theme-2027 .strClanakPage .clnPotpis {margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--strLine);} .theme-2027 .strClanakPage .portal-author-byline {display: inline-flex; align-items: center; gap: 12px;} .theme-2027 .strClanakPage .portal-author-byline-photo {width: 52px; height: 52px; border-radius: 50%; object-fit: cover;} .theme-2027 .strClanakPage .portal-author-byline-prefix {color: var(--strMuted); font-size: .78rem; margin-right: 4px;} .theme-2027 .strClanakPage .portal-author-byline-name {font-weight: 800; color: var(--strInk);} .theme-2027 .strClanakPage .clnBok {display: grid; gap: 34px; align-content: start;} .theme-2027 .strClanakPage .tn-side-card {display: block;} .theme-2027 .strClanakPage .tn-side-title {display: block; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--strInk); font-size: .72rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--strInk);} .theme-2027 .strClanakPage .tn-side-stories {display: grid; list-style: none; margin: 0; padding: 0;} .theme-2027 .strClanakPage .tn-side-stories li {margin: 0; padding: 0; list-style: none;} .theme-2027 .strClanakPage .tn-side-story-link {display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--strLine);} .theme-2027 .strClanakPage .tn-side-story-img {display: block; width: 76px; height: 58px; border-radius: 10px; background-size: cover; background-position: center; background-repeat: no-repeat;} .theme-2027 .strClanakPage .tn-side-story-body {display: block; min-width: 0;} .theme-2027 .strClanakPage .tn-side-story-title {display: block; font-size: .88rem; font-weight: 700; line-height: 1.35; color: var(--strInk);} .theme-2027 .strClanakPage .tn-side-story-link:hover .tn-side-story-title {color: var(--strCta);} .theme-2027 .strClanakPage .tn-side-story-date {display: block; margin-top: 5px; color: var(--strMuted); font-size: .72rem;} @media (max-width: 1100px) { .theme-2027 .strClanakPage .clnGrid {grid-template-columns: minmax(0, 1fr); gap: 40px;} } @media (max-width: 700px) { .theme-2027 .strClanakPage .clnNaslov {font-size: clamp(1.7rem, 7vw, 2.2rem);} .theme-2027 .strClanakPage .clnLead {font-size: 1.05rem;} .theme-2027 .strClanakPage .clnTekst {font-size: 1.02rem;} .theme-2027 .strClanakPage .clnTekst h2 {font-size: 1.32rem;} .theme-2027 .strClanakPage .tn-hotel-row {grid-template-columns: 56px minmax(0, 1fr);} } heme-2027 .strStaticPage .strStaticNav {position: sticky; top: 104px; display: grid; gap: 2px; counter-reset: strStaticBrojac; padding-left: 18px; border-left: 2px solid var(--strLine);} .theme-2027 .strStaticPage .strStaticNav a {display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: var(--strRadiusSmall); color: var(--strMuted); font-size: .88rem; font-weight: 650; line-height: 1.35; text-decoration: none; transition: color 160ms ease, background 160ms ease, transform 160ms ease;} .theme-2027 .strStaticPage .strStaticNav a:before {counter-increment: strStaticBrojac; content: counter(strStaticBrojac, decimal-leading-zero); color: var(--strCta); font-size: .7rem; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: .08em;} .theme-2027 .strStaticPage .strStaticNav a:hover {color: var(--strInk); background: #fff; box-shadow: var(--strShadowSmall); transform: translateX(3px);} .theme-2027 .strStaticPage .strStaticIssn {position: relative; overflow: hidden; padding: 34px; border-radius: var(--strRadiusLarge); color: #fff; background: var(--strInk); box-shadow: var(--strShadowLarge);} .theme-2027 .strStaticPage .strStaticIssn:after {position: absolute; top: -120px; right: -110px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(225, 29, 72, .38), transparent 68%); content: ""; pointer-events: none;} .theme-2027 .strStaticPage .strStaticIssnMark {position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: .82rem; font-weight: 850; letter-spacing: .1em;} .theme-2027 .strStaticPage .strStaticIssnMark:before {width: 8px; height: 8px; border-radius: 50%; background: var(--strCta); box-shadow: 0 0 0 6px rgba(225, 29, 72, .18); content: "";} .theme-2027 .strStaticPage .strStaticIssnLead {position: relative; z-index: 1; max-width: 60ch; margin: 18px 0 0; color: #fff; font-size: 1.12rem; font-weight: 600; line-height: 1.55;} .theme-2027 .strStaticPage .strStaticIssnHist {position: relative; z-index: 1; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);} .theme-2027 .strStaticPage .strStaticIssnHist p {margin: 0 0 10px; color: rgba(255, 255, 255, .70); font-size: .95rem; line-height: 1.7;} .theme-2027 .strStaticPage .strStaticIssnHist p:last-child {margin-bottom: 0;} .theme-2027 .strStaticPage .strStaticBlock {margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--strLine); scroll-margin-top: 110px;} .theme-2027 .strStaticPage .strStaticBlock h2 {margin: 0 0 16px; font-size: clamp(1.5rem, 2.4vw, 2.05rem); font-weight: 830; letter-spacing: -.035em; line-height: 1.12;} .theme-2027 .strStaticPage .strStaticBlock p {max-width: 68ch; margin: 0 0 14px; color: var(--strMuted); font-size: 1.02rem; line-height: 1.78;} .theme-2027 .strStaticPage .strStaticBlock p:last-child {margin-bottom: 0;} .theme-2027 .strStaticPage .strStaticVert {display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 16px 18px; border: 1px solid var(--strLine); border-radius: var(--strRadiusMedium); background: var(--strCard); color: var(--strInk); font-size: .95rem; font-weight: 700; line-height: 1.45; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;} .theme-2027 .strStaticPage .strStaticVert:hover {border-color: transparent; box-shadow: var(--strShadowSmall); transform: translateY(-3px);} .theme-2027 .strStaticPage .strStaticVert:before {flex: 0 0 auto; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--strCta); content: "";} .theme-2027 .strStaticPage .tn-ai-note {margin: 0; padding: 13px 16px; border-radius: 14px; color: #8b4052; background: #fff1f4; font-size: .74rem;} .theme-2027 .strStaticPage .tn-ai-note p {margin: 0;} .theme-2027 .strStaticPage .strStaticCta {margin-top: 44px; padding: 34px; border-radius: var(--strRadiusLarge); background: linear-gradient(135deg, #fff 0%, var(--strPaper) 100%); border: 1px solid var(--strLine); box-shadow: var(--strShadowSmall); text-align: center;} .theme-2027 .strStaticPage .strStaticCta h2 {margin: 0 0 10px; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 830; letter-spacing: -.03em;} .theme-2027 .strStaticPage .strStaticCta p {max-width: 58ch; margin: 0 auto 22px; color: var(--strMuted); font-size: 1rem; line-height: 1.7;} .theme-2027 .strStaticPage .strStaticCtaActions {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;} .theme-2027 .strStaticPage .strStaticMember {display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border: 1px solid var(--strLine); border-radius: var(--strRadiusLarge); background: var(--strCard); color: var(--strInk); text-decoration: none; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;} .theme-2027 .strStaticPage .strStaticMember:hover {border-color: transparent; box-shadow: var(--strShadowSmall); transform: translateY(-4px);} .theme-2027 .strStaticPage .strStaticMemberFoto {display: block; width: 112px; height: 112px; padding: 4px; border-radius: 50%; background: linear-gradient(135deg, var(--strCta), var(--strViolet));} .theme-2027 .strStaticPage .strStaticMemberFoto img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--strPaper);} .theme-2027 .strStaticPage .strStaticMemberTijelo {display: grid; gap: 6px;} .theme-2027 .strStaticPage .strStaticMemberIme {font-size: 1.12rem; font-weight: 820; letter-spacing: -.025em; line-height: 1.25;} .theme-2027 .strStaticPage .strStaticMemberPodrucje {color: var(--strMuted); font-size: .9rem; line-height: 1.5;} .theme-2027 .strStaticPage .strStaticMemberBrojka {display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--strMuted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;} .theme-2027 .strStaticPage .strStaticMemberZnacka {padding: 4px 11px; border-radius: 999px; background: var(--strInk); color: #fff; font-size: .82rem; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none;} .theme-2027 .strStaticPage .strStaticBlockPrvi {margin-top: 0; padding-top: 0; border-top: 0;} .theme-2027 .strStaticPage .strStaticBlockPrvi p {max-width: 68ch; margin: 0 0 14px; color: var(--strMuted); font-size: 1.02rem; line-height: 1.78;} .theme-2027 .strStaticPage .strStaticPag {margin-top: 28px;} @media (max-width: 991.98px) { .theme-2027 .strStaticPage .strStaticNav {position: static; display: flex; gap: 8px; overflow-x: auto; padding: 0 0 6px; border-left: 0;} .theme-2027 .strStaticPage .strStaticNav a {flex: 0 0 auto; border: 1px solid var(--strLine); background: var(--strCard); white-space: nowrap;} .theme-2027 .strStaticPage .strStaticIssn, .theme-2027 .strStaticPage .strStaticCta {padding: 24px;} } .theme-2027 .strStaticPage .strStaticNapomena {margin-top: 34px;} .theme-2027 .strStaticPage .strStaticDl {display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--strLine);} .theme-2027 .strStaticPage .strStaticDl dt, .theme-2027 .strStaticPage .strStaticDl dd {margin: 0; padding: 13px 0; border-bottom: 1px solid var(--strLine);} .theme-2027 .strStaticPage .strStaticDl dt {color: var(--strMuted); font-size: .82rem; font-weight: 750; letter-spacing: .02em;} .theme-2027 .strStaticPage .strStaticDl dd {color: var(--strInk); font-size: 1rem; font-weight: 700; overflow-wrap: anywhere;} .theme-2027 .strStaticPage .strStaticDl dd a {color: var(--strCta); text-decoration: none;} .theme-2027 .strStaticPage .strStaticDl dd a:hover {text-decoration: underline;} .theme-2027 .strStaticPage .strStaticMeta {margin-top: 20px !important; color: var(--strMuted) !important; font-size: .8rem !important;} @media (max-width: 575.98px) { .theme-2027 .strStaticPage .strStaticDl {grid-template-columns: minmax(0, 1fr);} .theme-2027 .strStaticPage .strStaticDl dt {padding-bottom: 0; border-bottom: 0;} } .theme-2027 .strStaticPage .strVisualMain img {object-fit: contain;} .theme-2027 .strStaticPage .strVisualMain::after {background: none;} .theme-2027 .strStaticPage .strStaticKartica {height: 100%; padding: 20px 22px; border: 1px solid var(--strLine); border-radius: var(--strRadiusMedium); background: var(--strCard); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;} .theme-2027 .strStaticPage .strStaticKartica:hover {border-color: transparent; box-shadow: var(--strShadowSmall); transform: translateY(-3px);} .theme-2027 .strStaticPage .strStaticKartica h3 {margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;} .theme-2027 .strStaticPage .strStaticKartica .strPill + h3 {margin-top: 12px;} .theme-2027 .strStaticPage .strStaticKartica p {max-width: none; margin: 0; color: var(--strMuted); font-size: .92rem; line-height: 1.62;} .theme-2027 .strStaticPage .strStaticBrojka {display: grid; gap: 4px; align-content: start;} .theme-2027 .strStaticPage .strStaticBrojka strong {font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.05; color: var(--strCta);} .theme-2027 .strStaticPage .strStaticBrojka span {font-size: .86rem; font-weight: 750;} .theme-2027 .strStaticPage .strStaticBrojka small {color: var(--strMuted); font-size: .76rem; line-height: 1.5;} .theme-2027 .strStaticPage .strStaticForm {display: grid; gap: 6px; margin-top: 4px;} .theme-2027 .strStaticPage .strStaticForm label {margin-top: 12px; color: var(--strMuted); font-size: .82rem; font-weight: 750;} .theme-2027 .strStaticPage .strStaticForm input[type="text"], .theme-2027 .strStaticPage .strStaticForm input[type="email"], .theme-2027 .strStaticPage .strStaticForm textarea {width: 100%; padding: 13px 16px; border: 1px solid var(--strLine); border-radius: var(--strRadiusSmall); background: var(--strCard); color: var(--strInk); font: inherit; font-size: .95rem;} .theme-2027 .strStaticPage .strStaticForm textarea {resize: vertical; min-height: 150px;} .theme-2027 .strStaticPage .strStaticForm input:focus, .theme-2027 .strStaticPage .strStaticForm textarea:focus {border-color: var(--strCta); outline: 2px solid rgba(225, 29, 72, .14); outline-offset: 1px;} .theme-2027 .strStaticPage .strStaticHoneypot {position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;} .theme-2027 .strStaticPage .strStaticPrivola {display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; color: var(--strMuted); font-size: .86rem; font-weight: 500; line-height: 1.5;} .theme-2027 .strStaticPage .strStaticPrivola input {margin-top: 3px; accent-color: var(--strCta);} .theme-2027 .strStaticPage .strStaticFormAkcija {margin-top: 20px;} .theme-2027 .strStaticPage .strStaticPoruka:empty {display: none;} .theme-2027 .strStaticPage .strStaticPoruka {margin-top: 14px; padding: 13px 16px; border-radius: var(--strRadiusSmall); font-size: .88rem; line-height: 1.55;} .theme-2027 .strStaticPage .strStaticPorukaOk {background: rgba(49, 196, 141, .12); color: #1c7a56;} .theme-2027 .strStaticPage .strStaticPorukaGreska {background: #fff1f4; color: #8b4052;} .theme-2027 .strStaticPage .strStaticVrsta {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 28px 0 10px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;} .theme-2027 .strStaticPage .strStaticChipLink {padding: 7px 14px; border: 1px solid var(--strLine); border-radius: 999px; background: var(--strCard); color: var(--strInk); font-size: .82rem; font-weight: 700; text-decoration: none;} .theme-2027 .strStaticPage .strStaticChipLink:hover {background: var(--strInk); color: #fff;} .theme-2027 .strStaticPage .strStaticBlock .strTblScroll {margin: 6px 0 4px;} /* ===================================================================== karlobag.eu - portal2027.css (dizajn 2027, rebrand KarloBag.eu) IZVOR ISTINE: karlobag.eu/pregled-hibrid.html Taj hibrid gradi claude/karlobag.eu/notes/slozi-hibrid-2027.js iz dizajnerova predloska v2 ("--- nije za upload/NOVI DIZAJN 2027/index.html"), zamjenjujuci cetiri sekcije rasporedom iz prvog predloska (mozaik dogadaja, putovanje i smjestaj, vijesti 1+4, sedmodnevni raspored). Ova skripta samo dodaje prefiks .theme-2027 svakom selektoru. NISTA se ne prepisuje rucno. Kad stigne nova verzija predloska, redoslijed je: 1) node slozi-hibrid-2027.js 2) node prefiksiraj-css-2027.js Font Inter dolazi iz hibrida (@font-face, /css/fonts/inter/) - NE iz Google Fontsa, i namjerno se ne preloada (utrkivao bi se s LCP slikom heroa). PRAVILO: nikad globalni !important na tipografiji. Jedini !important je u @media (prefers-reduced-motion), gdje gasi vec deklarirane animacije. Stari portalNew.css se na stranicama s .theme-2027 uopce ne ucitava. ===================================================================== */ .theme-2027 { --strInk: #11121a; --strInkSoft: #292b38; --strPaper: #f6f5f9; --strCard: #ffffff; --strLine: rgba(17, 18, 26, 0.11); --strMuted: #6b6e7d; --strPink: #e11d48; --strPinkDark: #b8163a; --strViolet: #6557ff; --strLime: #d9ff66; --strAqua: #6fe5ff; --strYellow: #ffcf5a; --strSuccess: #31c48d; --strDanger: #ff6b6b; /* 🔴 25-08-2026 (nalog korisnika): boja poziva na kupnju je BOJA SLOVA B iz imena portala (#E11D48) — ista koju nosi i znak (torba). Do sada je ovdje stajala naranča #ff6b35 preuzeta iz starog stila, pa marku nije gradila nijedna zajednička boja. Sada su znak, slovo B i gumb za ulaznice isti ton. */ --strCta: #e11d48; --strCtaDark: #b8163a; --strShadowSmall: 0 12px 34px rgba(25, 23, 43, 0.09); --strShadowLarge: 0 28px 80px rgba(23, 20, 45, 0.18); --strRadiusSmall: 14px; --strRadiusMedium: 22px; --strRadiusLarge: 34px; --strContainer: 1380px; } .theme-2027 *, .theme-2027 *::before, .theme-2027 *::after { box-sizing: border-box; } html.theme-2027 { scroll-behavior: smooth; } body.theme-2027 { margin: 0; color: var(--strInk); background: radial-gradient(circle at 15% 0%, rgba(255, 77, 114, 0.08), transparent 28rem), radial-gradient(circle at 90% 8%, rgba(101, 87, 255, 0.09), transparent 34rem), var(--strPaper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.theme-2027.strMenuOpen { overflow: hidden; } .theme-2027 img { display: block; width: 100%; height: auto; } .theme-2027 button, .theme-2027 input, .theme-2027 select { font: inherit; } .theme-2027 button, .theme-2027 a { -webkit-tap-highlight-color: transparent; } .theme-2027 a { color: inherit; text-decoration: none; } .theme-2027 button:focus-visible, .theme-2027 a:focus-visible, .theme-2027 input:focus-visible, .theme-2027 select:focus-visible { outline: 3px solid rgba(101, 87, 255, 0.42); outline-offset: 3px; } .theme-2027 .strSkipLink { position: fixed; top: 10px; left: 10px; z-index: 9999; padding: 10px 16px; border-radius: 999px; color: #fff; background: var(--strInk); transform: translateY(-160%); transition: transform 180ms ease; } .theme-2027 .strSkipLink:focus { transform: translateY(0); } .theme-2027 .strContainer { width: min(calc(100% - 40px), var(--strContainer)); margin-inline: auto; } .theme-2027 .strSection { position: relative; padding: 96px 0; } .theme-2027 .strSectionHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; } .theme-2027 .strSectionHeadText { max-width: 780px; } /* 🔴 25-08-2026 (kontrast, mjereno): ljubicasta marke na papirnatoj plohi daje 4,43 uz prag 4,5 — nadnaslov je bio taman ispod granice. Zato NADNASLOV (i samo on) nosi za nijansu tamniju ljubicastu s omjerom 4,74; boja marke se ne mijenja. */ .theme-2027 .strEyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; color: #6252f5; font-size: 0.76rem; font-weight: 850; letter-spacing: 0.15em; text-transform: uppercase; } .theme-2027 .strEyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--strPink); box-shadow: 0 0 0 6px rgba(255, 77, 114, 0.10); content: ""; } .theme-2027 .strSectionTitle { margin: 0; font-size: clamp(2rem, 4vw, 4.3rem); line-height: 0.98; letter-spacing: -0.055em; } .theme-2027 .strSectionIntro { max-width: 720px; margin: 18px 0 0; color: var(--strMuted); font-size: clamp(1rem, 1.4vw, 1.18rem); } .theme-2027 .strTextLink { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid currentColor; font-weight: 780; transition: gap 180ms ease, color 180ms ease; } .theme-2027 .strTextLink:hover { gap: 14px; color: var(--strPinkDark); } .theme-2027 .strButton { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 12px 19px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease; } .theme-2027 .strButton:hover { transform: translateY(-2px); } .theme-2027 .strButtonPrimary { color: #fff; background: var(--strPink); box-shadow: 0 12px 28px rgba(225, 29, 72, 0.26); } .theme-2027 .strButtonPrimary:hover { box-shadow: 0 16px 34px rgba(101, 87, 255, 0.34); } .theme-2027 .strButtonDark { color: #fff; background: var(--strInk); } .theme-2027 .strButtonLight { color: var(--strInk); background: #fff; border-color: var(--strLine); } /* 🔴 GUMB ZA KUPNJU ULAZNICA — JEDAN ZA CIJELI PORTAL 2027 (nalog korisnika 19-08-2026). 🔴 BOJA PROMIJENJENA 25-08-2026 (nalog korisnika): više nije naranča #FF6B35 nego BOJA SLOVA B iz imena portala (#E11D48), ista koju nosi i znak (torba) — da znak, ime i gumb grade istu prepoznatljivost. Boja se čita iz `--strCta`. Tekst je uvijek BIJEL i podebljan; nema prijelaza boja jer se na tamnoj kartici nije mogao pročitati. Natpis je uvijek "Ulaznice od {cijena}". 🔴 Nijedna stranica ne smije imati svoju inačicu ovog gumba ni drugu boju. */ .theme-2027 .strTicketButton, .theme-2027 a.strTicketButton, .theme-2027 .strTicketButton:visited { color: #fff; border-color: transparent; background: var(--strCta); box-shadow: 0 12px 28px rgba(255, 107, 53, 0.32); gap: 6px; font-weight: 900; } .theme-2027 .strTicketButton:hover { color: #fff; background: var(--strCtaDark); box-shadow: 0 16px 34px rgba(255, 107, 53, 0.42); } .theme-2027 .strTicketButton strong { color: #fff; font-weight: 900; } /* ===================================================================== MREZA VIJESTI — ZAJEDNICKA ZA CIJELI PORTAL 2027 (nalog korisnika 19-08-2026). Markup ispisuje kontrola webKontrole/portalVijesti2027.ascx; stranica joj samo preda podatke. Raspored 1+4 u 12 stupaca: velika (7 x 3), visoka (5 x 2), mala (5) i dvije po pola sirine (6 + 6) — zadnji red je uvijek popunjen do kraja. 🔴 Nijedna stranica ne smije imati svoju inacicu ove mreze. ===================================================================== */ .theme-2027 .strVijestiMreza2027 { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 250px; gap: 18px; } .theme-2027 .strVijestKartica { position: relative; isolation: isolate; overflow: hidden; min-height: 0; height: 100%; border-radius: 28px; color: #fff; background: var(--strInk); box-shadow: var(--strShadowSmall); transition: transform 220ms ease, box-shadow 220ms ease; } .theme-2027 .strVijestKartica:hover { transform: translateY(-5px); box-shadow: var(--strShadowLarge); } .theme-2027 .strVijestKartica img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 520ms ease; } .theme-2027 .strVijestKartica:hover img { transform: scale(1.045); } /* 🔴 12-09-2026: preljev je pocinjao gotovo prozirno, pa se na svijetloj fotografiji (nebo, staklena procelja) bijeli naslov gubio. Sada tamni od samog vrha kartice. */ .theme-2027 .strVijestKartica::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,12,18,0.30) 0%, rgba(11,12,18,0.42) 44%, rgba(11,12,18,0.97) 100%); content: ""; } /* Velika kartica ima najdulji naslov pa tekst seze u gornju trecinu slike. */ .theme-2027 .strVijestVelika::after { background: linear-gradient(180deg, rgba(11,12,18,0.50) 0%, rgba(11,12,18,0.44) 32%, rgba(11,12,18,0.72) 64%, rgba(11,12,18,0.97) 100%); } .theme-2027 .strVijestVelika { grid-column: span 7; grid-row: span 3; } .theme-2027 .strVijestVisoka { grid-column: span 5; grid-row: span 2; } .theme-2027 .strVijestMala { grid-column: span 5; } .theme-2027 .strVijestPola { grid-column: span 6; } /* 🔴 13-09-2026: boja teksta stoji na TIJELU kartice, ne samo na poveznici — stranica koja ima svoje pravilo za poveznice (npr. „a {color:inherit}") inace pobijedi i naslov potamni. */ .theme-2027 .strVijestTijelo { position: absolute; right: 22px; bottom: 21px; left: 22px; z-index: 2; color: #fff; } .theme-2027 .strVijestTijelo small { display: block; margin-bottom: 8px; color: var(--strLime); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .theme-2027 .strVijestTijelo h3 { max-width: 720px; margin: 0; font-size: 1.42rem; line-height: 1.07; letter-spacing: -0.03em; } .theme-2027 .strVijestVelika .strVijestTijelo h3 { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.02; } .theme-2027 .strVijestTijelo p { max-width: 720px; margin: 11px 0 0; color: rgba(255,255,255,0.7); font-size: 0.82rem; } @media (max-width: 1160px) { .theme-2027 .strVijestiMreza2027 { grid-template-columns: repeat(8, 1fr); } .theme-2027 .strVijestVelika { grid-column: span 8; } .theme-2027 .strVijestVisoka, .theme-2027 .strVijestMala, .theme-2027 .strVijestPola { grid-column: span 4; } } @media (max-width: 900px) { .theme-2027 .strVijestiMreza2027 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; } .theme-2027 .strVijestVelika { grid-column: span 2; grid-row: span 2; } .theme-2027 .strVijestVisoka, .theme-2027 .strVijestMala, .theme-2027 .strVijestPola { grid-column: auto; grid-row: auto; } } @media (max-width: 620px) { /* 🔴 11-09-2026: kartica je imala tvrdu visinu, pa je duzi naslov s uvodom gurao oznaku rubrike i datum izvan kartice — nestajali su. Kartica raste s tekstom. */ .theme-2027 .strVijestiMreza2027 { grid-template-columns: 1fr; grid-auto-rows: auto; } .theme-2027 .strVijestVelika, .theme-2027 .strVijestVisoka, .theme-2027 .strVijestMala, .theme-2027 .strVijestPola { grid-column: auto; grid-row: auto; } .theme-2027 .strVijestKartica { display: flex; align-items: flex-end; min-height: 320px; } .theme-2027 .strVijestTijelo { position: relative; inset: auto; right: auto; bottom: auto; left: auto; width: 100%; padding: 22px; } .theme-2027 .strVijestVelika .strVijestTijelo h3 { font-size: 1.9rem; } } .theme-2027 .strButtonGhost { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); } .theme-2027 .strIcon { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .theme-2027 .strTopBar { color: rgba(255,255,255,0.75); background: var(--strInk); font-size: 0.78rem; } .theme-2027 .strTopBarInner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .theme-2027 .strTopBarBrand { color: #fff; font-weight: 750; } .theme-2027 .strTopBarMeta { display: flex; align-items: center; gap: 18px; white-space: nowrap; } .theme-2027 .strTopBarDot { width: 4px; height: 4px; border-radius: 50%; background: var(--strLime); } .theme-2027 .strHeader { position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(17,18,26,0.07); background: rgba(246,245,249,0.88); backdrop-filter: blur(18px) saturate(160%); } .theme-2027 .strHeaderInner { min-height: 80px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; } .theme-2027 .strBrand { display: inline-grid; grid-template-columns: 42px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; } .theme-2027 .strBrandMark { grid-row: 1 / 3; width: 42px; height: 48px; filter: drop-shadow(0 8px 14px rgba(101,87,255,0.16)); } .theme-2027 .strWordmark { display: inline-flex; align-items: baseline; font-size: 1.62rem; font-weight: 880; line-height: 1; letter-spacing: -0.055em; } .theme-2027 .strWordmarkB { position: relative; z-index: 1; display: inline-block; margin-left: 1px; color: var(--strPink); font-size: 1.2em; font-weight: 950; transform: translateY(1px); } .theme-2027 .strWordmarkB::after { position: absolute; right: -4px; bottom: -1px; left: -3px; z-index: -1; height: 8px; border-radius: 999px; background: rgba(255,77,114,0.12); content: ""; } .theme-2027 .strWordmarkEu { margin-left: 2px; color: var(--strViolet); font-size: 0.72em; letter-spacing: -0.02em; } .theme-2027 .strTagline { color: var(--strMuted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .theme-2027 .strMainNav { display: flex; align-items: center; justify-content: center; gap: 4px; } .theme-2027 .strMainNav a { padding: 10px 13px; border-radius: 999px; font-size: 0.91rem; font-weight: 760; transition: color 180ms ease, background 180ms ease; } .theme-2027 .strMainNav a:hover { color: var(--strViolet); background: rgba(101,87,255,0.08); } .theme-2027 .strHeaderActions { display: flex; align-items: center; gap: 9px; } .theme-2027 .strIconButton { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--strLine); border-radius: 50%; color: var(--strInk); background: #fff; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease; } .theme-2027 .strIconButton:hover { transform: translateY(-2px); border-color: rgba(101,87,255,0.38); } .theme-2027 .strMenuButton { display: none; } .theme-2027 .strMobileNav { position: fixed; inset: 114px 0 0; z-index: 999; display: none; padding: 24px 20px 120px; overflow-y: auto; background: var(--strPaper); } .theme-2027 .strMobileNav.strOpen { display: block; } .theme-2027 .strMobileNav a { display: flex; align-items: center; justify-content: space-between; padding: 17px 4px; border-bottom: 1px solid var(--strLine); font-size: 1.3rem; font-weight: 800; } /* 🔴 11-09-2026: na mobitelu se vide samo skupine, podstavke se otvaraju dodirom (isti obrazac kao padajuci izbornik na velikom zaslonu). */ .theme-2027 .strMobileTop { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 4px; border: 0; border-bottom: 1px solid var(--strLine); background: transparent; color: inherit; font-family: inherit; font-size: 1.3rem; font-weight: 800; line-height: inherit; text-align: left; cursor: pointer; } .theme-2027 .strMobileArrow { flex: 0 0 auto; font-size: 0.62em; opacity: 0.5; transition: transform 180ms ease; } .theme-2027 .strMobileTop[aria-expanded="true"] .strMobileArrow { transform: rotate(180deg); opacity: 0.9; } .theme-2027 .strMobileSub { padding-left: 14px; } .theme-2027 .strMobileSub[hidden] { display: none; } .theme-2027 .strMobileSub a { padding: 14px 4px; font-size: 1.02rem; font-weight: 760; } .theme-2027 .strHero { position: relative; min-height: 760px; overflow: hidden; padding: 72px 0 64px; } .theme-2027 .strHero::before, .theme-2027 .strHero::after { position: absolute; border-radius: 50%; filter: blur(0); pointer-events: none; content: ""; } .theme-2027 .strHero::before { top: 5%; right: -160px; width: 520px; height: 520px; background: radial-gradient(circle at 35% 35%, rgba(111,229,255,0.40), rgba(101,87,255,0.08) 54%, transparent 70%); } .theme-2027 .strHero::after { bottom: 0; left: -140px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(255,77,114,0.18), transparent 68%); } .theme-2027 .strHeroGrid { position: relative; z-index: 2; display: grid; /* 🔴 11-09-2026 (nalog korisnika): desni stupac vrha je sirok — velika fotografija mora biti dominantna, a ne uski isjecak uz tekst. */ grid-template-columns: minmax(0, 0.88fr) minmax(560px, 1.12fr); align-items: center; gap: clamp(44px, 7vw, 108px); } /* 🔴 14-09-2026 (izmjereno na svim stranicama 2027 × 6 jezika): stupac vrha nije se smio suziti ispod duljine najduze rijeci, pa je na 360-390 px njemacki naslov („Sportnachrichten") razvukao stupac na 386 px u prozoru od 360 i okvir vrha ga je odrezao s desne strane. Stupac sada smije biti uzi od sadrzaja, a duga rijec se prelomi. Na ostalim jezicima nema promjene jer ondje rijeci ionako stanu. */ .theme-2027 .strHeroCopy { padding: 30px 0; min-width: 0; overflow-wrap: anywhere; } .theme-2027 .strBrandStatement { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 8px 13px; border: 1px solid rgba(101,87,255,0.18); border-radius: 999px; color: var(--strViolet); background: rgba(255,255,255,0.64); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--strShadowSmall); } .theme-2027 .strBrandStatement strong { color: var(--strPinkDark); } .theme-2027 .strHero h1, .theme-2027 .strHero h2 { max-width: 820px; margin: 0; font-size: clamp(3.4rem, 7.2vw, 7.2rem); line-height: 0.88; letter-spacing: -0.072em; /* 🔴 12-09-2026: dugacka slozenica u naslovu (njemacki „Reisenachrichten") izlazila je izvan zaslona jer se nije smjela prelomiti. Prvo se pokusa rastaviti crticom po pravilima jezika stranice, a lom bez crtice je zadnja brana. */ hyphens: auto; overflow-wrap: break-word; } .theme-2027 .strHero h1 span, .theme-2027 .strHero h2 span { display: block; color: transparent; background: var(--strPink); -webkit-background-clip: text; background-clip: text; } .theme-2027 .strHeroLead { max-width: 720px; margin: 28px 0 0; color: var(--strInkSoft); font-size: clamp(1.08rem, 1.6vw, 1.32rem); } .theme-2027 .strSearchArea { position: relative; max-width: 780px; margin-top: 32px; } .theme-2027 .strSearchForm { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 9px 9px 18px; border: 1px solid rgba(17,18,26,0.10); border-radius: 22px; background: #fff; box-shadow: 0 18px 54px rgba(37,34,70,0.15); } .theme-2027 .strSearchForm input { min-width: 0; min-height: 54px; border: 0; outline: 0; color: var(--strInk); background: transparent; font-size: 1rem; font-weight: 620; } .theme-2027 .strSearchForm input::placeholder { color: #8b8d99; font-weight: 520; } .theme-2027 .strSearchForm .strButton { min-height: 52px; padding-inline: 22px; } .theme-2027 .strSearchSuggestions { position: absolute; top: calc(100% + 10px); right: 0; left: 0; z-index: 20; display: none; padding: 8px; border: 1px solid var(--strLine); border-radius: 20px; background: #fff; box-shadow: var(--strShadowLarge); } .theme-2027 .strSearchSuggestions.strOpen { display: block; } .theme-2027 .strSuggestion { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; } .theme-2027 .strSuggestion:hover { background: var(--strPaper); } .theme-2027 .strSuggestionIcon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--strViolet); background: rgba(101,87,255,0.10); font-size: 0.75rem; font-weight: 900; } .theme-2027 .strSuggestionTitle { font-weight: 800; } .theme-2027 .strSuggestionMeta { color: var(--strMuted); font-size: 0.78rem; } .theme-2027 .strHeroTrust { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; color: var(--strMuted); font-size: 0.83rem; font-weight: 700; } .theme-2027 .strHeroTrust span { display: inline-flex; align-items: center; gap: 8px; } .theme-2027 .strHeroTrust i { width: 7px; height: 7px; border-radius: 50%; background: var(--strSuccess); box-shadow: 0 0 0 5px rgba(49,196,141,0.11); } .theme-2027 .strHeroVisual { position: relative; min-height: 585px; } .theme-2027 .strPill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.04em; } .theme-2027 .strPillLight { color: var(--strInk); background: rgba(255,255,255,0.91); backdrop-filter: blur(10px); } .theme-2027 .strPillPink { color: #fff; background: rgba(255,77,114,0.94); } .theme-2027 .strPillLime { color: var(--strInk); background: var(--strLime); } .theme-2027 .strExperienceMini { position: absolute; right: -8px; bottom: 4px; z-index: 5; width: 228px; padding: 18px; border: 1px solid rgba(17,18,26,0.09); border-radius: 24px; background: rgba(255,255,255,0.95); box-shadow: var(--strShadowLarge); transform: rotate(-3deg); } .theme-2027 .strExperienceMiniTitle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; font-size: 0.78rem; font-weight: 850; } .theme-2027 .strExperienceMiniTitle span { color: var(--strPinkDark); } .theme-2027 .strExperienceStep { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--strLine); font-size: 0.74rem; font-weight: 740; } .theme-2027 .strExperienceStep:first-of-type { border-top: 0; } /* 🔴 25-08-2026 (kontrast, mjereno 4,2 uz prag 4,5): brojka u kvadraticu dobiva istu tamniju ljubicastu kao nadnaslovi; ploha ispod nje ostaje ista. */ .theme-2027 .strExperienceStepIcon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #4f3fdb; background: rgba(101,87,255,0.10); font-size: 0.7rem; font-weight: 900; } .theme-2027 .strExperienceStepStatus { color: var(--strSuccess); } .theme-2027 .strPulse { position: relative; z-index: 3; margin-top: -20px; } .theme-2027 .strCategoryMosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 210px; gap: 18px; } .theme-2027 .strCategoryCard { position: relative; overflow: hidden; border-radius: 26px; color: #fff; background: var(--strInk); box-shadow: var(--strShadowSmall); isolation: isolate; } .theme-2027 .strCategoryCard::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,12,18,0.04) 15%, rgba(11,12,18,0.86) 100%); content: ""; } .theme-2027 .strCategoryCard img { height: 100%; object-fit: cover; transition: transform 520ms cubic-bezier(.2,.7,.2,1); } .theme-2027 .strCategoryCard:hover img { transform: scale(1.055); } .theme-2027 .strCategorySport { grid-column: span 6; grid-row: span 2; } .theme-2027 .strCategoryConcert { grid-column: span 3; } .theme-2027 .strCategoryFestival { grid-column: span 3; } .theme-2027 .strCategoryComedy { grid-column: span 3; } .theme-2027 .strCategoryTravel { grid-column: span 3; } .theme-2027 .strCategoryBody { position: absolute; right: 22px; bottom: 20px; left: 22px; z-index: 2; } .theme-2027 .strCategoryCount { color: rgba(255,255,255,0.66); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .theme-2027 .strCategoryName { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 5px; } /* 🔴 14-09-2026 (izmjereno na 76 sirina): dugacak naziv nije se smio suziti, pa je gurao okruglu strelicu izvan kartice, gdje ju je okvir odrezao (1024-1440 px, svih sest jezika). Pravilo je vec postojalo, ali samo na najuzem zaslonu — sada vrijedi svugdje, pa se naziv prelomi umjesto da izgura strelicu. */ .theme-2027 .strCategoryName strong { font-size: clamp(1.45rem, 2.7vw, 3rem); line-height: 0.95; letter-spacing: -0.04em; min-width: 0; overflow-wrap: anywhere; } .theme-2027 .strCategoryArrow { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; background: rgba(255,255,255,0.10); backdrop-filter: blur(10px); } .theme-2027 .strEventToolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .theme-2027 .strFilterGroup { display: flex; flex-wrap: wrap; gap: 8px; } .theme-2027 .strFilterButton { padding: 10px 15px; border: 1px solid var(--strLine); border-radius: 999px; color: var(--strInkSoft); background: #fff; cursor: pointer; font-size: 0.82rem; font-weight: 800; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; } .theme-2027 .strFilterButton[aria-pressed="true"] { color: #fff; border-color: var(--strInk); background: var(--strInk); } .theme-2027 .strFilterButton:hover { border-color: rgba(101,87,255,0.35); } /* 🔴 14-09-2026: BROJ U PILULI je vlastita plocica, ne nastavak naziva — na koncertima je pisalo „Pop 1.110" kao da je to naziv. Pravilo je bilo samo na dvije stranice (festivali, stand-up), pa je ovdje na razini teme i vrijedi svugdje. */ .theme-2027 .strFilterButton span { display: inline-flex; min-width: 24px; margin-left: 7px; padding: 2px 7px; align-items: center; justify-content: center; border: 1px solid rgba(17,18,26,0.09); border-radius: 999px; background: rgba(17,18,26,0.055); color: var(--strMuted); font-size: 0.71rem; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.5; } .theme-2027 .strFilterButton[aria-pressed="true"] span { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.16); color: #fff; } .theme-2027 .strEventGrid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 18px; } .theme-2027 .strEventCard { grid-column: span 4; min-height: 460px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(17,18,26,0.08); border-radius: 26px; background: var(--strCard); box-shadow: var(--strShadowSmall); transition: transform 220ms ease, box-shadow 220ms ease; } .theme-2027 .strEventCard:hover { transform: translateY(-5px); box-shadow: 0 22px 55px rgba(25,23,43,0.15); } .theme-2027 .strEventCard.strHidden { display: none; } .theme-2027 .strEventCard.strPrimary { grid-column: span 8; grid-row: span 2; min-height: 650px; } .theme-2027 .strSaveButton { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--strInk); background: rgba(255,255,255,0.92); cursor: pointer; box-shadow: 0 8px 22px rgba(17,18,26,0.16); } .theme-2027 .strSaveButton[aria-pressed="true"] { color: #fff; background: var(--strPink); } .theme-2027 .strSaveButton[aria-pressed="true"] .strIcon { fill: currentColor; } .theme-2027 .strEventActions { display: flex; align-items: center; gap: 7px; } .theme-2027 .strEventActions .strButton { min-height: 42px; padding: 9px 14px; font-size: 0.78rem; } .theme-2027 .strAiSection { overflow: hidden; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(255,77,114,0.18), transparent 32rem), radial-gradient(circle at 88% 15%, rgba(111,229,255,0.14), transparent 30rem), var(--strInk); } .theme-2027 .strAiSection .strEyebrow { color: var(--strLime); } .theme-2027 .strAiSection .strEyebrow::before { background: var(--strLime); box-shadow: 0 0 0 6px rgba(217,255,102,0.10); } .theme-2027 .strAiSection .strSectionIntro { color: rgba(255,255,255,0.65); } .theme-2027 .strAiSection .strTextLink { color: #fff; } .theme-2027 .strAiLayout { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 44px; align-items: start; } .theme-2027 .strAiPanel { padding: 30px; border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; background: rgba(255,255,255,0.055); backdrop-filter: blur(16px); } .theme-2027 .strAiPanelTitle { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .theme-2027 .strAiPanelTitle h3 { margin: 0; font-size: 1.35rem; } .theme-2027 .strLiveMark { display: inline-flex; align-items: center; gap: 8px; color: var(--strLime); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.1em; } .theme-2027 .strLiveMark::before { width: 7px; height: 7px; border-radius: 50%; background: var(--strLime); box-shadow: 0 0 0 5px rgba(217,255,102,0.10); content: ""; } .theme-2027 .strAiStats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; } .theme-2027 .strAiStat { padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.065); } .theme-2027 .strAiStat strong { display: block; font-size: 2rem; line-height: 1; } .theme-2027 .strAiStat span { display: block; margin-top: 7px; color: rgba(255,255,255,0.58); font-size: 0.72rem; font-weight: 700; } .theme-2027 .strAiNote { margin: 20px 0 0; color: rgba(255,255,255,0.58); font-size: 0.79rem; } .theme-2027 .strPredictionGrid { display: grid; gap: 13px; } .theme-2027 .strPredictionCard { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 15px; padding: 18px 19px; border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; background: rgba(255,255,255,0.055); transition: background 180ms ease, transform 180ms ease; } .theme-2027 .strPredictionCard:hover { transform: translateX(5px); background: rgba(255,255,255,0.09); } .theme-2027 .strTeam { display: flex; align-items: center; gap: 11px; min-width: 0; } .theme-2027 .strTeam.strRight { flex-direction: row-reverse; text-align: right; } .theme-2027 .strTeamBadge:not([class*="tn-team-color"]) { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 13px; color: var(--strInk); background: var(--strLime); font-size: 0.72rem; font-weight: 900; } .theme-2027 .strTeam.strRight .strTeamBadge:not([class*="tn-team-color"]) { background: var(--strAqua); } .theme-2027 .strTeamName { min-width: 0; font-size: 0.88rem; font-weight: 780; } .theme-2027 .strPredictionScore { display: flex; align-items: center; gap: 5px; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.04em; } .theme-2027 .strPredictionScore span { color: rgba(255,255,255,0.35); } .theme-2027 .strPredictionMeta { min-width: 112px; color: rgba(255,255,255,0.55); font-size: 0.68rem; font-weight: 700; text-align: right; } .theme-2027 .strPredictionMeta strong { display: block; color: #fff; font-size: 0.72rem; } .theme-2027 .strJourneyGrid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; } .theme-2027 .strJourneyFeature { position: relative; min-height: 650px; overflow: hidden; border-radius: 30px; color: #fff; background: var(--strInk); box-shadow: var(--strShadowLarge); } .theme-2027 .strJourneyFeature::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,15,0.08), rgba(10,10,15,0.92)); content: ""; } .theme-2027 .strJourneyFeature img { height: 100%; object-fit: cover; } .theme-2027 .strJourneyFeature h3 { max-width: 650px; margin: 9px 0 12px; font-size: clamp(2.2rem, 4.2vw, 4.8rem); line-height: 0.92; letter-spacing: -0.055em; } .theme-2027 .strJourneyFeature p { max-width: 650px; margin: 0; color: rgba(255,255,255,0.69); } .theme-2027 .strJourneySteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 22px; } .theme-2027 .strJourneyStep { padding: 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); } .theme-2027 .strJourneyStep span { display: block; color: var(--strLime); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .theme-2027 .strJourneyStep strong { display: block; margin-top: 4px; font-size: 0.79rem; } .theme-2027 .strJourneySide { display: grid; gap: 18px; } .theme-2027 .strJourneyCard { min-height: 316px; display: grid; grid-template-columns: 0.9fr 1.1fr; overflow: hidden; border: 1px solid rgba(17,18,26,0.08); border-radius: 28px; background: #fff; box-shadow: var(--strShadowSmall); } .theme-2027 .strJourneyCardImage { min-height: 100%; } .theme-2027 .strJourneyCardImage img { height: 100%; object-fit: cover; } .theme-2027 .strJourneyCardBody { display: flex; flex-direction: column; padding: 22px; } .theme-2027 .strJourneyCard h3 { margin: 9px 0 10px; font-size: 1.45rem; line-height: 1.02; letter-spacing: -0.035em; } .theme-2027 .strJourneyCard p { margin: 0; color: var(--strMuted); font-size: 0.82rem; } .theme-2027 .strJourneyCard .strTextLink { margin-top: auto; align-self: flex-start; font-size: 0.79rem; } .theme-2027 .strEntitySection { padding-top: 20px; } .theme-2027 .strEntityBox { padding: 32px; border: 1px solid rgba(17,18,26,0.08); border-radius: 28px; background: #fff; box-shadow: var(--strShadowSmall); } .theme-2027 .strEntityBox h2 { margin: 0; font-size: 1.65rem; letter-spacing: -0.035em; } .theme-2027 .strEntityBox p { max-width: 720px; margin: 8px 0 0; color: var(--strMuted); font-size: 0.88rem; } .theme-2027 .strEntityGroups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 24px; } .theme-2027 .strEntityGroup h3 { margin: 0 0 11px; color: var(--strMuted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.11em; } .theme-2027 .strEntityLinks { display: flex; flex-wrap: wrap; gap: 8px; } .theme-2027 .strEntityLinks a { padding: 8px 11px; border: 1px solid var(--strLine); border-radius: 999px; background: var(--strPaper); font-size: 0.76rem; font-weight: 760; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } .theme-2027 .strEntityLinks a:hover { color: var(--strViolet); border-color: rgba(101,87,255,0.32); background: #fff; } .theme-2027 .strBrandStory { overflow: hidden; padding: 84px 0; color: #fff; background: linear-gradient(120deg, #161724 0%, #28203d 55%, #3b1f45 100%); } .theme-2027 .strBrandStoryGrid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; align-items: center; } .theme-2027 .strBrandStoryMark { position: relative; min-height: 360px; display: grid; place-items: center; } .theme-2027 .strBrandStoryBag { width: min(300px, 74vw); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.28)); } .theme-2027 .strOrbit { position: absolute; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; } .theme-2027 .strOrbitOne { width: 340px; height: 340px; } .theme-2027 .strOrbitTwo { width: 440px; height: 220px; transform: rotate(-21deg); } .theme-2027 .strOrbitDot { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--strLime); box-shadow: 0 0 0 7px rgba(217,255,102,0.10); } .theme-2027 .strOrbitDotOne { top: 48px; right: 84px; } .theme-2027 .strOrbitDotTwo { bottom: 40px; left: 96px; background: var(--strAqua); box-shadow: 0 0 0 7px rgba(111,229,255,0.10); } .theme-2027 .strBrandStoryCopy .strEyebrow { color: var(--strLime); } .theme-2027 .strBrandStoryCopy h2 { margin: 0; font-size: clamp(2.8rem, 5.7vw, 6.3rem); line-height: 0.9; letter-spacing: -0.065em; } .theme-2027 .strBrandStoryCopy h2 span { color: var(--strPink); } .theme-2027 .strBrandStoryCopy p { max-width: 720px; margin: 24px 0 0; color: rgba(255,255,255,0.67); font-size: 1.06rem; } .theme-2027 .strBrandValues { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; } .theme-2027 .strBrandValue { padding: 15px; border: 1px solid rgba(255,255,255,0.11); border-radius: 16px; background: rgba(255,255,255,0.05); } .theme-2027 .strBrandValue span { color: rgba(255,255,255,0.54); font-size: 0.67rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .theme-2027 .strBrandValue strong { display: block; margin-top: 4px; font-size: 0.88rem; } .theme-2027 .strBrandStoryActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } /* 🔴 11-09-2026: na mobitelu su dva gumba bila razlicite sirine i gurnuta ulijevo — idu jedan ispod drugoga, punom sirinom i s tekstom u sredini. Uz to su razmaci medju odjeljcima bili preveliki (76px gore i dolje), pa je zaslon ostajao prazan. */ @media (max-width: 700px) { .theme-2027 .strBrandStoryActions { flex-direction: column; align-items: stretch; } .theme-2027 .strBrandStoryActions .strButton { width: 100%; justify-content: center; text-align: center; } .theme-2027 .strSection { padding: 46px 0; } } .theme-2027 .strNewsletter { padding: 80px 0; } .theme-2027 .strNewsletterBox { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; padding: 48px; border-radius: 32px; color: #fff; background: var(--strPink); box-shadow: var(--strShadowLarge); } .theme-2027 .strNewsletterBox::after { position: absolute; right: -100px; bottom: -130px; width: 330px; height: 330px; border: 60px solid rgba(255,255,255,0.08); border-radius: 50%; content: ""; } .theme-2027 .strNewsletterCopy, .theme-2027 .strNewsletterForm { position: relative; z-index: 2; } .theme-2027 .strNewsletterCopy h2 { margin: 0; font-size: clamp(2.2rem, 4.5vw, 4.8rem); line-height: 0.92; letter-spacing: -0.055em; } .theme-2027 .strNewsletterCopy p { max-width: 620px; margin: 17px 0 0; color: rgba(255,255,255,0.76); } .theme-2027 .strNewsletterForm { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 8px; border-radius: 18px; background: #fff; } .theme-2027 .strNewsletterForm input { min-width: 0; min-height: 52px; padding: 10px 14px; border: 0; outline: 0; color: var(--strInk); background: transparent; } .theme-2027 .strNewsletterForm .strButton { min-height: 52px; } .theme-2027 .strNewsletterStatus { min-height: 22px; margin: 10px 0 0; color: rgba(255,255,255,0.86); font-size: 0.78rem; font-weight: 700; } .theme-2027 .strNewsletterFine { margin-top: 8px; color: rgba(255,255,255,0.58); font-size: 0.7rem; } .theme-2027 .strFooter { color: rgba(255,255,255,0.67); background: #0c0d13; } .theme-2027 .strFooterTop { display: grid; grid-template-columns: 1.3fr repeat(4, 0.7fr); gap: 44px; padding: 66px 0 42px; } .theme-2027 .strFooter .strBrand { color: #fff; } .theme-2027 .strFooter .strTagline { color: rgba(255,255,255,0.50); } .theme-2027 .strFooterIntro { max-width: 370px; margin: 19px 0 0; font-size: 0.84rem; } .theme-2027 .strFooter h3 { margin: 0 0 13px; color: #fff; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; } .theme-2027 .strFooterLinks { display: grid; gap: 9px; } .theme-2027 .strFooterLinks a { font-size: 0.81rem; transition: color 180ms ease; } .theme-2027 .strFooterLinks a:hover { color: #fff; } .theme-2027 .strFooterBottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0 34px; border-top: 1px solid rgba(255,255,255,0.10); font-size: 0.73rem; } .theme-2027 .strFooterLanguages { display: flex; flex-wrap: wrap; gap: 12px; } .theme-2027 .strFooterLanguages a:hover { color: #fff; } .theme-2027 .strMobileDock { display: none; } .theme-2027 .strReveal { opacity: 1; transform: none; } .theme-2027 .strReveal.strVisible { opacity: 1; transform: none; } @media (max-width: 1180px) { .theme-2027 .strHeaderInner { gap: 20px; } .theme-2027 .strMainNav a { padding-inline: 9px; font-size: 0.84rem; } .theme-2027 .strHeroGrid { grid-template-columns: 1fr 0.86fr; gap: 42px; } .theme-2027 .strHero h1, .theme-2027 .strHero h2 { font-size: clamp(3.3rem, 7vw, 6rem); } .theme-2027 .strExperienceMini { right: 0; } .theme-2027 .strEventCard { grid-column: span 6; } .theme-2027 .strEventCard.strPrimary { grid-column: span 12; grid-row: auto; } .theme-2027 .strJourneyGrid { grid-template-columns: 1fr; } .theme-2027 .strJourneySide { grid-template-columns: repeat(2, 1fr); } .theme-2027 .strJourneyCard { grid-template-columns: 1fr; } .theme-2027 .strJourneyCardImage { min-height: 200px; } .theme-2027 .strBrandStoryGrid { gap: 38px; } .theme-2027 .strFooterTop { grid-template-columns: 1.2fr repeat(2, 0.8fr); } } @media (max-width: 980px) { .theme-2027 .strSection { padding: 76px 0; } .theme-2027 .strMainNav, .theme-2027 .strMiniSelect { display: none; } .theme-2027 .strHeaderInner { grid-template-columns: auto 1fr auto; } .theme-2027 .strHeaderActions { justify-self: end; } .theme-2027 .strMenuButton { display: inline-grid; } .theme-2027 .strHero { min-height: auto; padding-top: 42px; } .theme-2027 .strHeroGrid { grid-template-columns: 1fr; } .theme-2027 .strHeroVisual { min-height: 610px; } .theme-2027 .strExperienceMini { right: 10px; } .theme-2027 .strCategoryMosaic { grid-auto-rows: 190px; } .theme-2027 .strCategorySport { grid-column: span 12; } .theme-2027 .strCategoryConcert, .theme-2027 .strCategoryFestival, .theme-2027 .strCategoryComedy, .theme-2027 .strCategoryTravel { grid-column: span 6; } .theme-2027 .strAiLayout { grid-template-columns: 1fr; } .theme-2027 .strEntityGroups { grid-template-columns: 1fr; } .theme-2027 .strBrandStoryGrid { grid-template-columns: 1fr; } .theme-2027 .strBrandStoryMark { min-height: 300px; } .theme-2027 .strNewsletterBox { grid-template-columns: 1fr; } } @media (max-width: 700px) { .theme-2027 .strContainer { width: min(calc(100% - 24px), var(--strContainer)); } .theme-2027 .strTopBarMeta span:nth-child(n+3) { display: none; } .theme-2027 .strHeaderInner { min-height: 70px; } .theme-2027 .strBrand { grid-template-columns: 36px auto; column-gap: 9px; } .theme-2027 .strBrandMark { width: 36px; height: 42px; } .theme-2027 .strWordmark { font-size: 1.35rem; } .theme-2027 .strTagline { font-size: 0.54rem; } .theme-2027 .strHeaderActions .strIconButton:not(.strMenuButton) { display: none; } .theme-2027 .strMobileNav { inset: 104px 0 0; } .theme-2027 .strHero h1, .theme-2027 .strHero h2 { font-size: clamp(3rem, 15vw, 5rem); } .theme-2027 .strHeroLead { font-size: 1rem; } .theme-2027 .strSearchForm { grid-template-columns: 24px minmax(0,1fr); padding: 10px 14px; border-radius: 19px; } .theme-2027 .strSearchForm .strButton { grid-column: 1 / 3; width: 100%; } .theme-2027 .strHeroTrust { align-items: flex-start; flex-direction: column; gap: 8px; } .theme-2027 .strHeroVisual { min-height: 540px; } .theme-2027 .strExperienceMini { right: 0; bottom: -3px; width: 195px; padding: 14px; } .theme-2027 .strPulse { margin-top: 8px; } .theme-2027 .strSectionHead { align-items: flex-start; flex-direction: column; margin-bottom: 25px; } .theme-2027 .strCategoryMosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 175px; } .theme-2027 .strCategorySport { grid-column: span 2; grid-row: span 2; } .theme-2027 .strCategoryConcert, .theme-2027 .strCategoryFestival, .theme-2027 .strCategoryComedy, .theme-2027 .strCategoryTravel { grid-column: span 1; } .theme-2027 .strCategoryName strong { font-size: 1.35rem; } .theme-2027 .strCategoryArrow { width: 34px; height: 34px; } .theme-2027 .strEventToolbar { align-items: flex-start; } .theme-2027 .strFilterGroup { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .theme-2027 .strFilterGroup::-webkit-scrollbar { display: none; } .theme-2027 .strFilterButton { flex: 0 0 auto; } .theme-2027 .strEventGrid { display: grid; grid-template-columns: 1fr; } .theme-2027 .strEventCard, .theme-2027 .strEventCard.strPrimary { grid-column: auto; min-height: 0; } .theme-2027 .strEventActions { width: 100%; } .theme-2027 .strEventActions .strButton { flex: 1; } .theme-2027 .strAiPanel { padding: 22px; } .theme-2027 .strPredictionCard { grid-template-columns: 1fr auto 1fr; padding: 15px; } .theme-2027 .strPredictionMeta { grid-column: 1 / 4; min-width: 0; text-align: center; } .theme-2027 .strTeam { align-items: center; flex-direction: column; text-align: center; } .theme-2027 .strTeam.strRight { flex-direction: column; text-align: center; } .theme-2027 .strTeamName { font-size: 0.75rem; } .theme-2027 .strJourneyFeature { min-height: 620px; } .theme-2027 .strJourneySteps { grid-template-columns: repeat(2, 1fr); } .theme-2027 .strJourneySide { grid-template-columns: 1fr; } .theme-2027 .strJourneyCard { grid-template-columns: 0.88fr 1.12fr; } .theme-2027 .strEntityBox { padding: 23px; } .theme-2027 .strBrandValues { grid-template-columns: repeat(2, 1fr); } .theme-2027 .strBrandStoryMark { min-height: 250px; } .theme-2027 .strOrbitOne { width: 280px; height: 280px; } .theme-2027 .strOrbitTwo { width: 330px; height: 180px; } .theme-2027 .strNewsletterBox { padding: 30px 23px; } .theme-2027 .strNewsletterForm { grid-template-columns: 1fr; } .theme-2027 .strFooterTop { grid-template-columns: 1fr 1fr; gap: 34px 24px; padding-bottom: 30px; } .theme-2027 .strFooterBrand { grid-column: span 2; } .theme-2027 .strFooterBottom { align-items: flex-start; flex-direction: column; padding-bottom: 92px; } /* 🔴 19-08-2026: z-index 900, NE 1001. S 1001 je mobilna traka sportske stranice stajala PREKO otvorenog mobilnog izbornika (z-index 999) i preko rezultata tražilice — izmjereno elementFromPoint. Ljestvica portala: sadržaj ≤ 50, traka stranice 900, mobilni izbornik 999, zaglavlje 1000, prijedlozi 2000, „Preskoci na sadrzaj“ 9999. */ .theme-2027 .strMobileDock { position: fixed; right: 12px; bottom: 10px; left: 12px; z-index: 900; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; border: 1px solid rgba(255,255,255,0.20); border-radius: 20px; color: #fff; background: rgba(17,18,26,0.93); box-shadow: 0 18px 44px rgba(17,18,26,0.35); backdrop-filter: blur(18px); } .theme-2027 .strMobileDock a { display: grid; place-items: center; gap: 3px; padding: 5px; color: rgba(255,255,255,0.65); font-size: 0.61rem; font-weight: 760; } /* 🔴 12-09-2026: traka je bila razlicito visoka po jezicima (natpis u jednom, dva ili tri reda). Sada ima istu visinu na svih sest jezika, a natpis se poravnava po sredini svoje celije. */ .theme-2027 .strMobileDock a { min-height: 53px; align-content: center; line-height: 1.08; } .theme-2027 .strMobileDock a:hover, .theme-2027 .strMobileDock a:first-child { color: #fff; } .theme-2027 .strMobileDock .strIcon { width: 19px; height: 19px; } } @media (max-width: 480px) { /* 🔴 11-09-2026: dvije kartice u redu na 390px ostavljale su nazivu ~76px, pa je okrugla strelica lezala preko rijeci i virila izvan kartice. Jedna po redu. */ .theme-2027 .strCategoryMosaic { grid-template-columns: 1fr; grid-auto-rows: 160px; } .theme-2027 .strCategoryConcert, .theme-2027 .strCategoryFestival, .theme-2027 .strCategoryComedy, .theme-2027 .strCategoryTravel { grid-column: auto; } .theme-2027 .strCategoryName strong { min-width: 0; overflow-wrap: anywhere; } .theme-2027 .strCategorySport { grid-column: auto; grid-row: span 2; } .theme-2027 .strJourneyCard { grid-template-columns: 1fr; } .theme-2027 .strJourneyCardImage { min-height: 190px; } .theme-2027 .strJourneyFeature h3 { font-size: 2.4rem; } } @media (prefers-reduced-motion: reduce) { html.theme-2027 { scroll-behavior: auto; } .theme-2027 *, .theme-2027 *::before, .theme-2027 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .theme-2027 .strReveal { opacity: 1; transform: none; } }/* --- FONT: predlozak trazi Inter ali ga nigdje ne ucitava, pa pada na sistemski Segoe UI. Ovdje se poslužuje s naseg posluzitelja, isto kao sto ce biti na pravoj stranici, da se tipografija vidi onakva kakva ce biti. --- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/css/fonts/inter/inter-latin-ext.woff2') format('woff2'); /* 🔴 SUZENO 12-08-2026 (odluka korisnika): datoteka je izrezana s 83 KB na 14 KB skriptom claude\karlobag.eu\notes\smanji-font-2027.bat i sada sadrzi SAMO Latin Extended-A (hrvatski, poljski, ceski, slovacki, madarski, turski, baltiCki) i rumunjsko s/t sa zarezom. Prebrojano na svih 6 jezika: portal iznad U+00FF ispisuje 15 slova i sva su u ovom opsegu. Raspon MORA odgovarati sadrzaju datoteke - inace bi preglednik skidao font za znak koji u njemu ne postoji. Puni original je inter-latin-ext-puni.woff2. */ unicode-range: U+0100-017F, U+0218-021B; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/css/fonts/inter/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }/* ================================================================== HIBRID - sve nize NIJE dizajnerov CSS. Cetiri sekcije preuzete iz prvog predloska (mozaik dogadaja, putovanje+smjestaj, vijesti 1+4, sedmodnevni raspored) i obucene u paletu, tipografiju i oblike v2. Plus popravci za hrvatski. ================================================================== */ /* --- POPRAVAK 1: prelom retka. Predlozak ima line-height 0,88-0,98 na devet naslovnih pravila. Na engleskom izgleda moderno, na hrvatskom se redovi NALIJEZU I REZU: c c z s dj dodaju visinu iznad slova, j p g rep ispod. Vidljivo na dizajnerovoj vlastitoj slici. --- */ .theme-2027 .strSectionTitle { line-height: 1.04; } .theme-2027 .strHero h1, .theme-2027 .strHero h2 { line-height: 1.02; } .theme-2027 .strCategoryName strong { line-height: 1.04; } .theme-2027 .strJourneyFeature h3 { line-height: 1.04; } .theme-2027 .strBrandStoryCopy h2 { line-height: 1.02; } .theme-2027 .strNewsletterCopy h2 { line-height: 1.02; }/* --- POPRAVAK 2: gradijentni naslov ima color: transparent. Bez podrske za background-clip: text naslov bi bio NEVIDLJIV. --- */ .theme-2027 .strHero h1 span, .theme-2027 .strHero h2 span { color: var(--strPink); padding-bottom: 0.08em; } @supports (-webkit-background-clip: text) or (background-clip: text) { .theme-2027 .strHero h1 span, .theme-2027 .strHero h2 span { color: transparent; } }/* --- POPRAVAK 3: panel "Tvoja torba" bio je na bottom: 4px, tocno preko naslova i gumba hero kartice. Pomaknut na okomitu sredinu desno. --- */ .theme-2027 .strExperienceMini { top: 84px; bottom: auto; transform: rotate(-3deg); } @media (max-width: 980px) { .theme-2027 .strExperienceMini { display: none; } } @media (max-width: 700px) { .theme-2027 .strExperienceMini { top: 76px; bottom: auto; } }/* --- PREBACIVANJE JEZIKA I VALUTE --- Predlozak je imao dva obicna ; ovdje strelicu crtamo sami pa taj prostor nije potreban. ===================================================================== */ .theme-2027 .strLangSwitch, .theme-2027 .strCurrencySwitch, .theme-2027 .strPickSwitch { position: relative; } .theme-2027 .strLangToggle, .theme-2027 .strCurrencyToggle, .theme-2027 .strPickToggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--strLine); border-radius: 999px; color: var(--strInk); background: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 750; white-space: nowrap; cursor: pointer; } .theme-2027 .strMiniArrow { color: var(--strMuted); font-size: 1.1rem; line-height: 1; } .theme-2027 .strLangToggle .tn-flag-img, .theme-2027 .strLangItem .tn-flag-img { display: block; width: 20px; height: 14px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(17, 18, 26, 0.16); } .theme-2027 .strLangMenu, .theme-2027 .strCurrencyMenu, .theme-2027 .strPickMenu, .theme-2027 .strNavSub { position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; padding: 8px; border: 1px solid var(--strLine); border-radius: 20px; background: #fff; box-shadow: var(--strShadowLarge); } .theme-2027 .strLangMenu, .theme-2027 .strCurrencyMenu, .theme-2027 .strPickMenu { display: grid; gap: 2px; min-width: 178px; } .theme-2027 .strLangMenu[hidden], .theme-2027 .strCurrencyMenu[hidden], .theme-2027 .strPickMenu[hidden] { display: none; } .theme-2027 .strLangItem, .theme-2027 .strCurrencyItem, .theme-2027 .strPickItem, .theme-2027 .strNavSub a { display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 14px; background: transparent; color: var(--strInk); font-family: inherit; font-size: 0.82rem; font-weight: 750; white-space: nowrap; text-align: left; cursor: pointer; } .theme-2027 .strLangItem:hover, .theme-2027 .strCurrencyItem:hover, .theme-2027 .strPickItem:hover, .theme-2027 .strNavSub a:hover { color: var(--strViolet); background: rgba(101, 87, 255, 0.08); } .theme-2027 .strLangItemActive, .theme-2027 .strCurrencyItemActive { color: var(--strViolet); background: rgba(101, 87, 255, 0.12); }/* --- MOZAIK DOGADAJA --- */ .theme-2027 .strEventToolbar { align-items: center; } .theme-2027 .strEventCount { color: var(--strMuted); font-size: 0.84rem; font-weight: 700; } .theme-2027 .strEventMosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 152px; gap: 18px; } .theme-2027 .strMosaicCard { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--strRadiusLarge); background: var(--strInk); box-shadow: var(--strShadowSmall); transition: transform 220ms ease, box-shadow 220ms ease; } .theme-2027 .strMosaicCard:hover { transform: translateY(-4px); box-shadow: var(--strShadowLarge); } .theme-2027 .strMosaicCard.strHidden { display: none; } .theme-2027 .strMosaicCard img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .theme-2027 .strMosaicCard:hover img { transform: scale(1.045); } .theme-2027 .strMosaicCard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(178deg, rgba(17,18,26,0.05) 16%, rgba(17,18,26,0.58) 58%, rgba(17,18,26,0.94) 100%); } .theme-2027 .strMosaicHero { grid-column: span 7; grid-row: span 3; } .theme-2027 .strMosaicTall { grid-column: span 5; grid-row: span 3; } .theme-2027 .strMosaicMedium { grid-column: span 4; grid-row: span 2; } .theme-2027 .strMosaicWide { grid-column: span 8; grid-row: span 2; } .theme-2027 .strMosaicTop { position: absolute; top: 18px; right: 18px; left: 18px; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .theme-2027 .strSaveOnImage { border-color: rgba(255,255,255,0.28); background: rgba(17,18,26,0.52); color: #fff; backdrop-filter: blur(10px); } .theme-2027 .strSaveOnImage[aria-pressed="true"] { border-color: var(--strPink); background: var(--strPink); } .theme-2027 .strMosaicBody { position: absolute; inset: auto 0 0; z-index: 2; padding: 26px; color: #fff; } .theme-2027 .strMosaicDate { color: rgba(255,255,255,0.82); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .theme-2027 .strMosaicTitle { margin: 9px 0 7px; font-size: 1.3rem; line-height: 1.06; letter-spacing: -0.03em; } .theme-2027 .strMosaicHero .strMosaicTitle { font-size: clamp(2rem, 3.2vw, 3.3rem); line-height: 1.03; letter-spacing: -0.045em; } .theme-2027 .strMosaicTall .strMosaicTitle { font-size: clamp(1.7rem, 2.4vw, 2.4rem); line-height: 1.04; } .theme-2027 .strMosaicWide .strMosaicTitle { font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height: 1.04; } .theme-2027 .strMosaicLocation { color: rgba(255,255,255,0.76); font-size: 0.86rem; } .theme-2027 .strMosaicBadges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .theme-2027 .strMosaicBadge { padding: 5px 10px; border: 1px solid rgba(255,255,255,0.24); border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font-size: 0.68rem; font-weight: 800; backdrop-filter: blur(8px); } .theme-2027 .strMosaicFooter { display: flex; align-items: center; gap: 9px; margin-top: 16px; } .theme-2027 .strMosaicFooter .strButton { min-height: 40px; padding: 0 15px; font-size: 0.82rem; } .theme-2027 .strButtonGlass { border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(10px); } .theme-2027 .strButtonGlass:hover { background: rgba(255,255,255,0.24); } .theme-2027 .strMosaicPrice { margin-left: auto; text-align: right; } .theme-2027 .strMosaicPrice small { display: block; color: rgba(255,255,255,0.7); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; } .theme-2027 .strMosaicPrice strong { font-size: 1.3rem; } .theme-2027 .strMosaicMedium .strMosaicBadges { display: none; } .theme-2027 .strMosaicMedium .strMosaicBody { padding: 20px; }/* --- PUTOVANJE I SMJESTAJ --- */ .theme-2027 .strTripLayout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr); gap: 22px; } .theme-2027 .strGuideCard, .theme-2027 .strStayCard { overflow: hidden; border: 1px solid var(--strLine); border-radius: var(--strRadiusLarge); background: var(--strCard); box-shadow: var(--strShadowSmall); } .theme-2027 .strGuideImage { position: relative; height: 430px; overflow: hidden; } .theme-2027 .strGuideImage img { width: 100%; height: 100%; object-fit: cover; } .theme-2027 .strGuideOverlay { position: absolute; inset: auto 22px 22px; padding: 24px; border-radius: var(--strRadiusMedium); background: rgba(17,18,26,0.82); color: #fff; backdrop-filter: blur(12px); } .theme-2027 .strEyebrowLight { color: var(--strLime); } .theme-2027 .strGuideOverlay h3 { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.06; letter-spacing: -0.035em; } .theme-2027 .strGuideOverlay p { margin: 10px 0 0; color: rgba(255,255,255,0.8); font-size: 0.9rem; } .theme-2027 .strGuideFooter { display: flex; align-items: center; gap: 14px; padding: 20px 24px; } .theme-2027 .strGuideTags { display: flex; flex-wrap: wrap; gap: 7px; margin-right: auto; } .theme-2027 .strGuideTags span { padding: 7px 11px; border-radius: 999px; background: var(--strPaper); color: var(--strInkSoft); font-size: 0.7rem; font-weight: 800; } .theme-2027 .strStayCard { padding: 22px; } .theme-2027 .strStayImage { height: 190px; overflow: hidden; border-radius: var(--strRadiusMedium); } .theme-2027 .strStayImage img { width: 100%; height: 100%; object-fit: cover; } .theme-2027 .strStayCard h3 { margin: 20px 0 6px; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.03em; } .theme-2027 .strStayCard > p { margin: 0 0 16px; color: var(--strMuted); font-size: 0.88rem; } .theme-2027 .strStayList { display: grid; gap: 10px; margin-bottom: 16px; } .theme-2027 .strStayItem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 15px; border: 1px solid var(--strLine); border-radius: var(--strRadiusSmall); transition: transform 180ms ease, border-color 180ms ease; } .theme-2027 .strStayItem:hover { transform: translateY(-2px); border-color: var(--strViolet); } .theme-2027 .strStayItem strong { display: block; font-size: 0.92rem; } .theme-2027 .strStayItem span { display: block; margin-top: 3px; color: var(--strMuted); font-size: 0.74rem; } .theme-2027 .strStayPrice { align-self: center; color: var(--strViolet); font-size: 1.02rem; font-weight: 900; white-space: nowrap; } .theme-2027 .strDestinations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; } .theme-2027 .strDestination { padding: 18px; border: 1px solid var(--strLine); border-radius: var(--strRadiusMedium); background: var(--strCard); transition: transform 180ms ease, box-shadow 180ms ease; } .theme-2027 .strDestination:hover { transform: translateY(-3px); box-shadow: var(--strShadowSmall); } .theme-2027 .strDestination strong { display: block; font-size: 1.05rem; } .theme-2027 .strDestination span { display: block; margin-top: 4px; color: var(--strMuted); font-size: 0.78rem; } /* --- SEDMODNEVNI RASPORED --- */ .theme-2027 .strWeekBox { padding: 22px; border: 1px solid var(--strLine); border-radius: var(--strRadiusLarge); background: var(--strCard); box-shadow: var(--strShadowSmall); } .theme-2027 .strDayTabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; } .theme-2027 .strDayButton { min-height: 84px; padding: 12px 6px; border: 1px solid var(--strLine); border-radius: var(--strRadiusSmall); background: var(--strPaper); cursor: pointer; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .theme-2027 .strDayButton:hover { transform: translateY(-2px); border-color: var(--strViolet); } .theme-2027 .strDayButton span { display: block; color: var(--strMuted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .theme-2027 .strDayButton strong { display: block; margin-top: 3px; font-size: 1.45rem; line-height: 1.1; } .theme-2027 .strDayButton em { display: block; color: var(--strMuted); font-size: 0.64rem; font-style: normal; } .theme-2027 .strDayActive { border-color: transparent; background: var(--strPink); color: #fff; } .theme-2027 .strDayActive span, .theme-2027 .strDayActive em { color: rgba(255,255,255,0.82); } .theme-2027 .strDayResults { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .theme-2027 .strDayEvent { padding: 18px; border: 1px solid var(--strLine); border-radius: var(--strRadiusMedium); background: var(--strPaper); transition: transform 180ms ease, background 180ms ease; } .theme-2027 .strDayEvent:hover { transform: translateY(-2px); background: var(--strCard); } .theme-2027 .strDayEvent small { color: var(--strViolet); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .theme-2027 .strDayEvent strong { display: block; margin: 8px 0 4px; font-size: 1rem; line-height: 1.2; } .theme-2027 .strDayEvent span { display: block; color: var(--strMuted); font-size: 0.78rem; } /* 🔴 SELIDBA 11-09-2026: blok preslikanih v1 pravila stajao je IZA upita za uske zaslone i gasio ih (mozaik je na mobitelu ostajao u 12 stupaca). Sada stoji ispred. */ /* ===================================================================== CETIRI SEKCIJE IZ PRVOG PREDLOSKA - mozaik dogadaja, putovanje i smjestaj, vijesti 1+4, sedmodnevni raspored. 🔴 Sve vrijednosti su PREPISANE iz "starije/karlobag-nova-naslovnica-live.html" skriptom claude/karlobag.eu/notes/prepisi-v1-sekcije.js. Nijedan piksel nije pisan napamet. Mijenjaju se samo nazivi klasa i CSS varijable (v1 paleta -> paleta 2027), po tablici u toj skripti. ===================================================================== */ .theme-2027 .strEventMosaic {display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 145px; gap: 18px; } .theme-2027 .strMosaicCard {position: relative; overflow: hidden; border-radius: var(--strRadiusMedium); background: #101827; box-shadow: var(--strShadowSmall); isolation: isolate; } .theme-2027 .strMosaicCard[hidden] {display: none; } .theme-2027 .strMosaicCard::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 6, 23, .02) 20%, rgba(2, 6, 23, .88) 100%); } .theme-2027 .strMosaicCard img {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .theme-2027 .strMosaicCard:hover img {transform: scale(1.035); } .theme-2027 .strMosaicHero {grid-column: span 7; grid-row: span 3; } .theme-2027 .strMosaicTall {grid-column: span 5; grid-row: span 3; } .theme-2027 .strMosaicMedium {grid-column: span 4; grid-row: span 2; } .theme-2027 .strMosaicWide {grid-column: span 8; grid-row: span 2; } .theme-2027 .strMosaicBody {position: absolute; inset: auto 0 0; padding: 24px; color: #fff; } .theme-2027 .strMosaicTop {position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .theme-2027 .strSaveOnImage {width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(7, 15, 29, .6); color: #fff; cursor: pointer; backdrop-filter: blur(10px); } .theme-2027 .strMosaicDate {margin-bottom: 9px; color: #c8d4e4; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; } .theme-2027 .strMosaicCard h3 {margin: 0; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.02; letter-spacing: -.045em; } .theme-2027 .strMosaicMedium h3 {font-size: 24px; } .theme-2027 .strMosaicLocation {margin-top: 10px; color: #d3deeb; font-size: 13px; } .theme-2027 .strMosaicFooter {display: flex; align-items: center; gap: 9px; margin-top: 18px; } .theme-2027 .strMosaicPrice {margin-left: auto; text-align: right; } .theme-2027 .strMosaicPrice small {display: block; color: #b9c7d8; font-size: 10px; } .theme-2027 .strMosaicPrice strong {font-size: 21px; } .theme-2027 .strMosaicCard .strMosaicBadges {display: flex; gap: 12px; margin-top: 12px; color: #c6d7ec; font-size: 11px; font-weight: 800; } .theme-2027 .strTripLayout {display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 22px; } .theme-2027 .strGuideCard, .theme-2027 .strStayCard {overflow: hidden; border: 1px solid var(--strLine); border-radius: 24px; background: #fff; box-shadow: var(--strShadowSmall); } .theme-2027 .strGuideImage {position: relative; height: 400px; overflow: hidden; } .theme-2027 .strGuideImage img {width: 100%; height: 100%; object-fit: cover; } .theme-2027 .strGuideOverlay {position: absolute; inset: auto 22px 22px; padding: 22px; border-radius: 17px; background: rgba(6, 15, 29, .82); color: #fff; backdrop-filter: blur(12px); } .theme-2027 .strGuideOverlay h3 {margin: 0; font-size: 29px; line-height: 1.05; letter-spacing: -.04em; } .theme-2027 .strGuideOverlay p {margin: 10px 0 0; color: #c9d5e4; font-size: 13px; } .theme-2027 .strGuideFooter {display: flex; align-items: center; gap: 12px; padding: 20px 22px; } .theme-2027 .strGuideTags {display: flex; flex-wrap: wrap; gap: 7px; margin-right: auto; } .theme-2027 .strGuideTags span {padding: 7px 9px; border-radius: 999px; background: #edf3f8; color: #526276; font-size: 10px; font-weight: 800; } .theme-2027 .strStayCard {padding: 22px; } .theme-2027 .strStayImage {position: relative; height: 210px; overflow: hidden; border-radius: 17px; } .theme-2027 .strStayImage img {width: 100%; height: 100%; object-fit: cover; } .theme-2027 .strStayCard h3 {margin: 20px 0 7px; font-size: 25px; line-height: 1.08; letter-spacing: -.035em; } .theme-2027 .strStayCard > p {margin: 0 0 18px; color: var(--strMuted); font-size: 13px; } .theme-2027 .strStayList {display: grid; gap: 10px; } .theme-2027 .strStayItem {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px; border: 1px solid var(--strLine); border-radius: 13px; } .theme-2027 .strStayItem strong {display: block; font-size: 13px; } .theme-2027 .strStayItem span {display: block; margin-top: 4px; color: var(--strMuted); font-size: 10px; } .theme-2027 .strStayPrice {align-self: center; color: var(--strSuccess); font-size: 16px; font-weight: 900; white-space: nowrap; } .theme-2027 .strDestinations {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; } .theme-2027 .strDestination {padding: 16px; border: 1px solid var(--strLine); border-radius: 15px; background: #fff; transition: transform .18s ease, box-shadow .18s ease; } .theme-2027 .strDestination:hover {transform: translateY(-3px); box-shadow: var(--strShadowSmall); } .theme-2027 .strDestination strong {display: block; } .theme-2027 .strDestination span {display: block; margin-top: 4px; color: var(--strMuted); font-size: 11px; } .theme-2027 .strWeekBox {padding: 20px; border: 1px solid var(--strLine); border-radius: 24px; background: #fff; box-shadow: var(--strShadowSmall); } .theme-2027 .strDayTabs {display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .theme-2027 .strDayButton {min-height: 72px; padding: 10px 6px; border: 1px solid var(--strLine); border-radius: 13px; background: #f8fafc; cursor: pointer; } .theme-2027 .strDayButton span {display: block; color: var(--strMuted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .theme-2027 .strDayButton strong {display: block; margin-top: 3px; font-size: 20px; } .theme-2027 .strDayButton em {display: block; margin-top: 2px; color: var(--strMuted); font-size: 9px; font-style: normal; } .theme-2027 .strDayButton.strDayActive {border-color: var(--strInk); background: var(--strInk); color: #fff; } .theme-2027 .strDayButton.strDayActive span, .theme-2027 .strDayButton.strDayActive em {color: #b9c7d8; } .theme-2027 .strDayResults {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .theme-2027 .strDayEvent {padding: 16px; border-radius: 15px; background: #f3f7fb; } /* 🔴 ISPRAVAK 25-08-2026: ovdje je stajala DRUGA inacica istog pravila (ruzicasta), koja je preglasavala ljubicastu iznad i davala omjer 2,98 na svijetloj plohi (prag 4,5). Dvije inacice istog pravila su zabranjene (0.4b), pa je ova maknuta — ostaje ljubicasta, ista koju nose nadnaslovi sekcija. */ .theme-2027 .strDayEvent small {color: #5a4ae8; font-weight: 900; } .theme-2027 .strDayEvent strong {display: block; margin: 7px 0 4px; font-size: 14px; } .theme-2027 .strDayEvent span {color: var(--strMuted); font-size: 10px; } .theme-2027 .strMosaicCard .strMosaicBadges a {color: #c6d7ec; } .theme-2027 .strMosaicCard .strMosaicBadges a:hover {color: #fff; text-decoration: underline; } .theme-2027 .strDayEvent {display: block; transition: transform .18s ease, background .18s ease; } .theme-2027 .strDayEvent:hover {transform: translateY(-2px); background: #eaf1f8; } .theme-2027 .strStayItem {color: inherit; transition: transform .18s ease, border-color .18s ease; } .theme-2027 .strStayItem:hover {transform: translateY(-2px); border-color: #aebdcd; } @media (max-width: 1180px) { .theme-2027 .strEventMosaic { grid-auto-rows: 168px; } } @media (max-width: 980px) { .theme-2027 .strLangSwitch, .theme-2027 .strCurrencySwitch { display: none; }/* Pribijanje desnog bloka na 247px vrijedi samo na sirokom zaslonu. Ispod 980px su jezik i valuta skriveni, pa bi ta sirina gurala sadrzaj izvan zaslona. Izmjereno na 390px: prelijev 445px (i na hibridu, jer je pravilo moje). */ .theme-2027 .strHeaderActions { min-width: 0; } .theme-2027 .strMosaicHero, .theme-2027 .strMosaicTall { grid-column: span 12; grid-row: span 3; } .theme-2027 .strMosaicMedium { grid-column: span 6; grid-row: span 2; } .theme-2027 .strMosaicWide { grid-column: span 12; grid-row: span 2; } .theme-2027 .strGuideImage { height: 360px; } .theme-2027 .strDestinations { grid-template-columns: repeat(2, 1fr); } .theme-2027 .strDayResults { grid-template-columns: 1fr; } } @media (max-width: 700px) { .theme-2027 .strEventMosaic { grid-template-columns: 1fr; grid-auto-rows: auto; } .theme-2027 .strMosaicHero, .theme-2027 .strMosaicTall, .theme-2027 .strMosaicMedium, .theme-2027 .strMosaicWide { grid-column: auto; grid-row: auto; min-height: 400px; } .theme-2027 .strMosaicMedium { min-height: 340px; } .theme-2027 .strMosaicMedium .strMosaicBadges { display: flex; } .theme-2027 .strEventToolbar { flex-direction: column; align-items: flex-start; gap: 12px; } /* 🔴 11-09-2026: na uskom zaslonu tekst je visi od fotografije, pa je okvir pritisnut uz dno rastao uvis i prvi red naslova bio je odrezan. Ovdje tekst ide ISPOD fotografije, u obicnom toku, i kartica raste s njim. */ .theme-2027 .strGuideImage { height: auto; min-height: 0; } .theme-2027 .strGuideImage img { height: auto; display: block; } .theme-2027 .strGuideOverlay { position: static; inset: auto; margin: 0; padding: 18px; border-radius: 0; } .theme-2027 .strGuideFooter { align-items: flex-start; flex-direction: column; } roditelja i stranica dobije vodoravni prelijev (izmjereno na 390px: 417px). Zato flex + min-width:0 na cijelom lancu, pa se traka pomice unutar sebe. */ .theme-2027 .strDayTabs { display: flex; overflow-x: auto; min-width: 0; padding-bottom: 4px; scrollbar-width: none; } .theme-2027 .strDayTabs::-webkit-scrollbar { display: none; } .theme-2027 .strDayButton { flex: 0 0 84px; } .theme-2027 .strWeekBox, .theme-2027 .strWeekSection .strContainer { min-width: 0; } .theme-2027 .strDestinations { grid-template-columns: 1fr 1fr; } }/* --- Nuzni popravci NAKON preslikanih v1 pravila (pobjeduju jer su zadnji) --- */ /* 1. Sedam tipki po 84px sire je od mobilnog zaslona; traka se pomice unutar sebe. */ @media (max-width: 700px) { .theme-2027 .strDayTabs { display: flex; overflow-x: auto; min-width: 0; padding-bottom: 4px; scrollbar-width: none; } .theme-2027 .strDayTabs::-webkit-scrollbar { display: none; } .theme-2027 .strDayButton { flex: 0 0 84px; } .theme-2027 .strWeekBox { min-width: 0; } }/* 2. Pribijanje desnog bloka zaglavlja na 247px vrijedi samo iznad 980px. */ @media (max-width: 980px) { .theme-2027 .strHeaderActions { min-width: 0; } }/* ===================================================================== Padajuci izbornik u zaglavlju. Deklaracije nadredene stavke prepisane iz .strMainNav a (padding 10px 13px, radius 999px, 0.91rem, 760), panel iz .strSearchSuggestions, stavka iz .strSuggestion. Blok stoji NA KRAJU jer pravila prve verzije predloska dolaze prije njega, a ne smiju ga pregaziti. ===================================================================== */ .theme-2027 .strMainNav .strNavItem { position: relative; } .theme-2027 .strMainNav .strNavTop { display: inline-flex; align-items: center; gap: 5px; padding: 10px 13px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-family: inherit; font-size: 0.91rem; font-weight: 760; line-height: inherit; cursor: pointer; transition: color 180ms ease, background 180ms ease; } .theme-2027 .strMainNav .strNavItem:hover .strNavTop, .theme-2027 .strMainNav .strNavItem:focus-within .strNavTop { color: var(--strViolet); background: rgba(101, 87, 255, 0.08); } .theme-2027 .strMainNav .strNavArrow { font-size: 0.58em; opacity: 0.55; } .theme-2027 .strMainNav .strNavSub { position: absolute; top: calc(100% + 10px); left: 0; right: auto; z-index: 20; display: grid; gap: 2px; min-width: 210px; padding: 8px; border: 1px solid var(--strLine); border-radius: 20px; background: #fff; box-shadow: var(--strShadowLarge); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; } /* 🔴 POPRAVAK 13-08-2026 (kvar koji je uocio korisnik): panel je ostajao otvoren nakon klika. Uzrok: :focus-within — klik daje gumbu fokus, pa je panel ostajao vidljiv i kad mis ode na drugu stavku (vidjela su se dva panela), a drugi klik ga nije mogao zatvoriti jer fokus ostaje. Otvaranje mišem ostaje na :hover, a klik/tipkovnicu sada vodi JS preko atributa aria-expanded (portal2027.js). :focus-within je maknut da fokus sam po sebi vise nista ne otvara. */ .theme-2027 .strMainNav .strNavItem:hover .strNavSub, .theme-2027 .strMainNav .strNavTop[aria-expanded="true"] + .strNavSub { opacity: 1; visibility: visible; transform: translateY(0); }/* --- Zadnji popravci, izmjereni --------------------------------- 1. Na 390px: u podnozju kartice mozaika stoje dva gumba i cijena u jednom redu (.strMosaicFooter). Ne stanu, pa je cijena izlazila 138px izvan zaslona. Rjesenje: red se lomi. 2. Na 980px: vijesti su u dva stupca, a kartica ima slicicu od 132px iz prve verzije predloska; datum je izlazio 5px van. Slicica se suzava na 104px dok su dva stupca. ---------------------------------------------------------------- */ @media (max-width: 700px) { .theme-2027 .strMosaicFooter { flex-wrap: wrap; } .theme-2027 .strMosaicPrice { margin-left: 0; text-align: left; } } /* Izmjereno na 390px: gornja traka je gurala meta tekst (+23px), destinacije su ostale preduge (+82px), gumb za spremanje virio je iz kartice (+24px). */ @media (max-width: 700px) { .theme-2027 .strTopBarInner { flex-wrap: wrap; } .theme-2027 .strTopBarMeta { display: none; } .theme-2027 .strDestinations { grid-template-columns: 1fr 1fr; } .theme-2027 .strDestination { min-width: 0; overflow-wrap: anywhere; } .theme-2027 .strMosaicTop { right: 14px; left: 14px; } } /* Zadnji krug, sve izmjereno detektorom koji preskace pomicne trake: - na 390px popis vijesti je jos bio u DVA stupca (moje pravilo za <=1180px vrijedi i ondje), pa je datum izlazio van; vraca se na jedan stupac - sadrzaj kartica ne smije siriti roditelja: min-width:0 na lancu */ @media (max-width: 700px) { .theme-2027 .strMosaicCard, .theme-2027 .strMosaicBody, .theme-2027 .strMosaicFooter { min-width: 0; } }/* Preostalih ~50px na 390px: potomci mreza i flex redaka po zadanom imaju min-width:auto, pa ih dugi sadrzaj (naslov vijesti, gumbi u kartici) siri preko roditelja. Ovo je standardno rjesenje - dopusta im da se stisnu. */ @media (max-width: 700px) { .theme-2027 .strMosaicFooter > * { min-width: 0; } }/* --- Prelom dviju mreza na uskom zaslonu ------------------------- Izmjereno na 390px detektorom koji preskace odrezane elemente: scrollWidth 423px pri rubu 375px. Korijeni: aside.strStayCard (+19px, sirina 360) i time u popisu vijesti (+23px, roditelj sirok 132px). Uzrok je JEDAN i zajednicki: blok preslikan iz prve verzije predloska postavlja .strTripLayout na minmax(0,1.2fr) minmax(360px,.8fr) i .strNewsGrid na 1.2fr .8fr BEZ upita za sirinu, a stoji IZA upita /* --- Znak (torba s B): boja rucke ------------------------------ Crtez dolazi iz jednog izvora, vbClass.funcBrandMarkSvg2027, pa je svugdje isti. Jedino se rucka mora prilagoditi podlozi, i to radi CSS preko currentColor: tamna na svijetloj podlozi zaglavlja, bijela na tamnoj podlozi podnozja. Tijelo torbe je uvijek isti gradijent. Vrijednost #11121A je --strInk iz palete v2. ---------------------------------------------------------------- */ .theme-2027 .strBrandMark { color: #11121A; } .theme-2027 .strFooter .strBrandMark { color: #fff; }/* --- Slovo B u imenu marke, gdje god se ime pojavi kao tekst ------- Znak i wordmark vec imaju svoje isticanje (.strWordmarkB). Ovdje se ime pojavljuje unutar recenice (gornja traka, hero, podnozje), pa se mijenja SAMO boja i debljina - bez vece velicine i podloge, da se redak ne razlomi i dizajn ostane isti. --strPink je boja marke iz palete v2. */ .theme-2027 .strBrandB { color: var(--strPink); font-weight: 900; } .theme-2027 .strFooter .strBrandB { color: var(--strPink); }/* Hero traka je inline-flex s gap:10px, pa bi svaki span u njoj postao stavka i dobio razmak s obje strane - ime bi se razlomilo u "KARLO B AG.EU" (vidljivo na snimci). display:contents mice kutiju, a boja i debljina se i dalje nasljeduju na slovo. */ .theme-2027 .strBrandStatement .strBrandB { display: contents; } /* ===================================================================== DODATAK - GDPR prozorcic (nema ga u predlosku) Sve nize je namjerno odvojeno na kraj datoteke da dizajnerov dio ostane doslovan i provjerljiv. Kad stigne nova verzija predloska, gornji dio se regenerira, a ovaj blok ostaje. ===================================================================== */ /* --- GDPR prozorcic. Predlozak ga nema jer je samostalna datoteka, ali privola za kolacice je zakonska obveza i master ga mora prikazati. Struktura i dimenzije preuzete iz postojeceg prozorcica (portalNew.css), samo su stare CSS varijable zamijenjene varijablama dizajna 2027. --- */ .theme-2027 .tn-gdpr-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; align-items: center; justify-content: center; padding: 16px; background: rgba(17, 18, 26, 0.72); backdrop-filter: blur(4px); } .theme-2027 .tn-gdpr-dialog { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; border-radius: var(--strRadiusMedium); background: var(--strCard); box-shadow: var(--strShadowLarge); } .theme-2027 .tn-gdpr-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--strLine); } .theme-2027 .tn-gdpr-title { margin: 0; font-size: 1.12rem; font-weight: 850; color: var(--strInk); } .theme-2027 .tn-gdpr-close { padding: 0 4px; border: none; background: none; color: var(--strMuted); font-size: 1.75rem; line-height: 1; cursor: pointer; } .theme-2027 .tn-gdpr-close:hover { color: var(--strInk); } .theme-2027 .tn-gdpr-body { padding: 18px 22px; } .theme-2027 .tn-gdpr-intro { margin: 0 0 16px; color: var(--strMuted); font-size: 0.86rem; line-height: 1.55; } .theme-2027 .tn-gdpr-option { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid var(--strLine); border-radius: var(--strRadiusSmall); color: var(--strInk); font-size: 0.86rem; line-height: 1.45; cursor: pointer; } .theme-2027 .tn-gdpr-option:hover { background: var(--strPaper); } .theme-2027 .tn-gdpr-option input { margin-top: 3px; accent-color: var(--strViolet); } .theme-2027 .tn-gdpr-footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 18px 22px; border-top: 1px solid var(--strLine); } .theme-2027 .tn-gdpr-footer .strButton { font-size: 0.86rem; } @media (max-width: 576px) { .theme-2027 .tn-gdpr-footer { flex-direction: column; } .theme-2027 .tn-gdpr-footer .strButton { width: 100%; } } /* ===================================================================== POPRAVAK 12-08-2026 — kartica vodica ostavljala je praznu bijelu plohu. Uzrok (izmjereno na snimci 1440px): .strTripLayout je mreza, pa se kartica vodica rasteze na visinu kartice smjestaja, a .strGuideImage ima tvrdih 430px — visak ispod podnozja ostajao je prazan. Rjesenje: kartica je stupac, slika raste do dna. Vrijedi SAMO iznad 1180px, jer ispod te sirine mreza pada u jedan stupac i slika ima svoje visine (360px / 300px) iz postojecih upita za sirinu. ===================================================================== */ @media (min-width: 1181px) { .theme-2027 .strGuideCard { display: flex; flex-direction: column; } .theme-2027 .strGuideImage { flex: 1 1 auto; height: auto; min-height: 430px; } } /* ===================================================================== POPRAVAK 12-08-2026 — AI kartice se nisu poravnavale (snimka korisnika). Zadnji stupac (datum + naziv natjecanja) bio je "auto", pa je duzi naziv ("Europska liga - kvalifikacije" naspram "Copa Libertadores") sirio stupac, stiskao ekipe i pomicao rezultat ulijevo — svaki redak drugacije. Fiksna sirina zadnjeg stupca poravna sve retke, a naziv se prelama u dva reda. Vrijedi samo iznad 1180px; ispod te sirine postojeci upit slaze karticu u tri stupca i meta ide u svoj red, sto se ne dira. ===================================================================== */ @media (min-width: 1181px) { .theme-2027 .strPredictionCard { grid-template-columns: 1fr auto 1fr 168px; } .theme-2027 .strPredictionMeta { min-width: 0; white-space: normal; overflow-wrap: anywhere; } } /* ===================================================================== TRAZILICA 12-08-2026 — prijedlozi sada dolaze iz postojeceg /api/search.aspx, koji vraca oznake stare teme (tn-search-*). Ovdje dobivaju izgled 2027: isti razmaci, radijusi i boje kao .strSuggestion iz predloska. ===================================================================== */ .theme-2027 .strSearchSuggestions .tn-search-section { padding: 6px 0; } .theme-2027 .strSearchSuggestions .tn-search-section-title { padding: 8px 14px 6px; color: var(--strMuted); font-size: 0.66rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.09em; } .theme-2027 .strSearchSuggestions .tn-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; color: var(--strInk); text-decoration: none; } .theme-2027 .strSearchSuggestions .tn-search-item:hover { background: var(--strPaper); } .theme-2027 .strSearchSuggestions .tn-search-item-img { width: 54px; height: 40px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; } .theme-2027 .strSearchSuggestions .tn-search-item-body { min-width: 0; } .theme-2027 .strSearchSuggestions .tn-search-item-title { display: block; font-size: 0.86rem; font-weight: 800; line-height: 1.25; } .theme-2027 .strSearchSuggestions .tn-search-item-meta { display: block; color: var(--strMuted); font-size: 0.72rem; font-weight: 600; line-height: 1.35; } .theme-2027 .strSearchSuggestions .tn-team-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--strLime); color: var(--strInk); font-size: 0.58rem; font-weight: 900; vertical-align: middle; } .theme-2027 .strSearchSuggestions .tn-flag-img { width: 16px; height: auto; margin-right: 6px; vertical-align: middle; } /* ===================================================================== POPRAVAK 12-08-2026 (drugi prolaz) — AI kartice su i nakon fiksiranja zadnjeg stupca ostale razmaknute za 2 px: IZMJERENO rezultatX = 970, 968, 968, 968. Uzrok su PROPORCIONALNE znamenke — "1" je uza od "2", pa je stupac rezultata (sirina "auto") svaki put drugacije sirok. Rjesenje: stupac dobiva fiksnu sirinu (stane i dvoznamenkasti rezultat), a znamenke se crtaju tablicarski (tabular-nums), pa su sve jednako siroke. ===================================================================== */ @media (min-width: 1181px) { .theme-2027 .strPredictionCard { grid-template-columns: 1fr 104px 1fr 168px; } } .theme-2027 .strPredictionScore { justify-content: center; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ===================================================================== POPRAVAK 12-08-2026 — rezultati tražilice bili su ODSJEČENI i prekriveni. Izmjereno (elementFromPoint u pravom pregledniku): popis ide od y=497 do y=944, ali na y=765 najgornji element je .strPulseItem. Dva uzroka: 1) .strHero ima overflow: hidden -> sve izvan heroja se odsijeca; 2) .strPulse je z-index 3, a spremnik heroja samo 2. 🔴 PRVI POKUSAJ NIJE VALJAO: maknut je overflow s heroja, a ukrasne kugle odsjecene s clip-path. Izmjereno odmah: scrollWidth 551 naspram 390 - clip-path reze SAMO crtanje, ne i sirinu, pa se vratio vodoravni prelijev na svih 5 sirina. Rjesenje koje radi: hero i dalje odsijeca (kugle ostaju unutra), a popis prijedloga izlazi iz njega kao position: fixed - koordinate mu postavlja JS iz polozaja trazilice (fixed bjezi iz overflow-a jer nijedan predak nema transform). Uz to se spremnik heroja dize iznad pulsa (z-index 6 naspram 3). ===================================================================== */ .theme-2027 .strHero > .strContainer, .theme-2027 .strHeroGrid { position: relative; z-index: 6; } /* 🔴 27-08-2026 (nalog korisnika): FOTOGRAFIJA VRHA STOJI NA VRHU, nikad okomito centrirana uz naslov. Prije je mreža vrha imala lign-items:center, pa je slika padala niže ili više ovisno o tome koliko redaka ima naslov i uvod — izmjereno na devet stranica: 232, 248, 261, 277 i 316 px, a tekst je svugdje počinjao na 187 px. 🔴 Popravak je NA JEDNOM mjestu, na samoj slici: ista naredba lign-items:center prepisana je u pet datoteka stilova (tema + sport + koncerti + festivali + stand-up), pa bi je trebalo mijenjati pet puta. lign-self na djetetu nadjačava roditeljski lign-items u svima, a tekst se ne miče. */ .theme-2027 .strHeroVisual { align-self: start; } .theme-2027 .strSearchArea { z-index: 7; } .theme-2027 .strSearchSuggestions { position: fixed; z-index: 40; max-height: 70vh; overflow-y: auto; } /* ===================================================================== POPRAVAK 19-08-2026 — LJEPLJIVA TRAKA JE IŠLA PREKO REZULTATA TRAŽILICE. Korisnik je uslikao sidrenu traku AI stranice („Aktualne prognoze | Natjecanja | …") PREKO otvorenog popisa prijedloga. Izmjereno: popis je bio unutar .strSearchArea, a ona unutar .strHero > .strContainer koji ima z-index 6 i time SLAGAĆI KONTEKST — pa je z-index popisa (40) vrijedio samo unutar heroja i nikad nije mogao prijeći traku (z-index 50), niti mobilnu traku sportske stranice (.strMobileDock, 1001). Rješenje na izvoru, jedno za cijeli portal: • JS (portal2027.js) popis PREMJESTI u — položaj se ne mijenja jer je position: fixed s koordinatama iz funcPostaviPolozaj; • ovdje mu se z-index digne iznad svega osim „Preskoči na sadržaj" (9999): iznad zaglavlja (1000), mobilnog izbornika (1001) i svake trake stranice. ===================================================================== */ .theme-2027 .strSearchSuggestions { z-index: 2000; } /* ===================================================================== POPRAVAK 12-08-2026 — ".eu" u znaku marke bio je ljubicast, a mora biti ISTE boje kao "Karlo" (nalog korisnika). Slovo B ostaje u boji marke. ===================================================================== */ .theme-2027 .strWordmarkEu { color: inherit; } /* ===================================================================== POPRAVAK 12-08-2026 — istaknuto slovo B lomilo je ime u "KARLO B AG.EU". Uzrok: od trenutka kad se isticanje primjenjuje na SVAKI tekst iz baze, span .strBrandB moze zavrsiti u bilo kojem flex/grid spremniku s razmakom (.strEyebrow je inline-flex s gap: 9px, .strBrandStatement s gap: 10px) i ondje postaje zasebna stavka - pa razmak upadne usred rijeci. Rjesenje: span nema vlastitu kutiju (display: contents), pa se slovo vraca u isti tekstualni tok, a boja i debljina se i dalje nasljeduju na to slovo. Prije je isto pravilo postojalo SAMO za .strBrandStatement; sada vrijedi svugdje. ===================================================================== */ .theme-2027 .strBrandB { display: contents; color: var(--strPink); font-weight: 900; } /* ===================================================================== POPRAVAK 12-08-2026 — traka trazilice u zaglavlju (.strHeaderSearch). Povecalo je prije vodilo na sidro #strHeroSearch, a to sidro postoji SAMO na naslovnici; na ostalih 25 stranica klik nije radio nista. Sada otvara ovu traku, koja koristi ISTE klase kao hero trazilica (.strSearchArea / .strSearchForm / .strSearchSuggestions) — ovdje su samo razlike zbog zaglavlja: bez gornjeg razmaka, puna sirina, plosniji okvir bez sjene. Popis prijedloga je i dalje position: fixed s koordinatama iz JS-a. ===================================================================== */ .theme-2027 .strHeaderSearch { padding: 14px 0 18px; border-top: 1px solid var(--strLine); background: #fff; } .theme-2027 .strHeaderSearch .strSearchArea { max-width: none; margin-top: 0; } .theme-2027 .strHeaderSearch .strSearchForm { grid-template-columns: 24px minmax(0, 1fr); padding: 6px 16px; border-radius: 18px; box-shadow: none; } .theme-2027 .strHeaderSearch .strSearchForm input { min-height: 44px; } /* Na mobitelu su sve ikone osim izbornika skrivene (pravilo u @media 700px). Povecalo je iznimka: 81 % posjeta dolazi s mobitela, a na ostalim stranicama portala drugog ulaza u trazilicu nema. Ista tezina selektora kao pravilo koje skriva (4 klase), pa presudjuje redoslijed — ovo je nize u datoteci. */ @media (max-width: 700px) { .theme-2027 .strHeaderActions .strIconButton.strSearchButton { display: inline-grid; } } /* ===================================================================== POPRAVAK 12-08-2026 — padajuci popis trazilice (nalog korisnika: dva elementa u njemu nemaju veze s dizajnom 2027). 1. Gumb „Ucitaj vise" dolazi iz /api/search.aspx (isti endpoint koristi i stari portal) i endpoint vraca samo 2 retka po vrsti — bez tog gumba nema nacina da se vidi vise. Rukovatelj mu je bio samo u js/portalNew.js, koji se u ovoj temi ne ucitava, pa je gumb bio mrtav; sada je prepisan u portal2027.js, a ovdje dobiva izgled teme 2027 umjesto starog. 2. Klizac je bio sistemski, sirok i sivi. Popis moze biti duzi od zaslona (do 2 retka po sekciji, a sekcija je do sedam), pa se pomicanje ne moze ukinuti — moze se samo stisati i utisati. ===================================================================== */ .theme-2027 .strSearchSuggestions .tn-search-load-more { display: block; width: 100%; margin-top: 6px; padding: 13px 16px; border: 1px solid var(--strLine); border-radius: 15px; background: var(--strPaper); color: var(--strViolet); font-family: inherit; font-size: 0.86rem; font-weight: 800; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; } .theme-2027 .strSearchSuggestions .tn-search-load-more:hover { border-color: rgba(101, 87, 255, 0.38); background: rgba(101, 87, 255, 0.08); } .theme-2027 .strSearchSuggestions .tn-search-load-more-loading { opacity: 0.55; cursor: progress; } .theme-2027 .strSearchSuggestions { scrollbar-width: thin; scrollbar-color: rgba(17, 18, 26, 0.22) transparent; } .theme-2027 .strSearchSuggestions::-webkit-scrollbar { width: 10px; } .theme-2027 .strSearchSuggestions::-webkit-scrollbar-track { background: transparent; } .theme-2027 .strSearchSuggestions::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(17, 18, 26, 0.22); background-clip: content-box; } .theme-2027 .strSearchSuggestions::-webkit-scrollbar-thumb:hover { background: rgba(17, 18, 26, 0.4); background-clip: content-box; } /* ===================================================================== POPRAVAK 12-08-2026 — „Pronadi iskustvo" u heroju ostaje kao SLIKA (nalog korisnika). Izgled je nepromijenjen, ali gumb vise nije gumb: se ne moze kliknuti ni fokusirati, pa se mice i pokazivac ruke i podizanje na prelazak misem, da nista ne obecava klik. ===================================================================== */ .theme-2027 .strButtonStatic { cursor: default; pointer-events: none; user-select: none; } .theme-2027 .strButtonStatic:hover { transform: none; } /* ===================================================================== POPRAVAK 13-08-2026 — sedmodnevni raspored na mobitelu. Preslikano v1 pravilo .strDayResults { repeat(3, 1fr) } stoji IZVAN medijskog upita i gasi mobilno pravilo (jedan stupac ispod 980px), pa su se tri kartice na 390px probijale van zaslona: dokument je bio sirok 446px umjesto 390. Nije se vidjelo 12-08 jer je popis tog dana bio prazan. Isto pravilo dodano je i u slozi-hibrid-2027.js, inace bi ga regeneracija hibrida pojela. ===================================================================== */ @media (max-width: 980px) { .theme-2027 .strDayResults { grid-template-columns: 1fr; } } /* ===================================================================== AI PANEL — oznaka „Azurirano" (13-08-2026, prijava korisnika). Natpis i datum stajali su u jednom retku i lomili traku u drugi red. Sada su dva elementa: natpis gore, datum ispod, oba centrirana. Vrijedi za sve stranice — sekcija je zajednicka kontrola. ===================================================================== */ .theme-2027 .strLiveMark { display: inline-grid; justify-items: center; gap: 2px; line-height: 1.15; text-align: center; } .theme-2027 .strLiveMarkLabel { display: block; } .theme-2027 .strLiveMarkValue { display: block; font-weight: 700; opacity: 0.85; white-space: nowrap; } /* 🔴 11-09-2026: na mobitelu je oznaka stajala uz naslov i lomila se u tri retka — ide u vlastiti red ispod naslova, poravnata lijevo. */ @media (max-width: 700px) { .theme-2027 .strAiPanelTitle { flex-direction: column; align-items: flex-start; gap: 8px; } .theme-2027 .strLiveMark { display: inline-flex; align-items: center; gap: 7px; text-align: left; } } /* ===================================================================== TRAKA S BROJKAMA (.strMetricRail) — JEDNA IZVEDBA ZA CIJELI PORTAL 2027. Nalog korisnika 21-08-2026: isto se ne pise po stranicama. Do tada je ovaj blok bio prepisan u css/aiPrognoze2027.css i css/prognozeLiga2027.css (dva puta, znak po znak jednako, samo s klasom stranice ispred). Ovdje je spojen u jedan izvor i iz obiju datoteka obrisan; vrijednosti su NEPROMIJENJENE, pa izgled tih stranica ostaje isti (izmjereno prije i poslije, na 1400 / 1000 / 700 / 390 px). Prijelomne tocke 1160 / 900 / 620 px su iz dizajnerova predloska. ===================================================================== */ .theme-2027 .strMetricRail {position:relative;z-index:4;margin-top:-24px} .theme-2027 .strMetricRailInner {display:grid;grid-template-columns:1.25fr repeat(4,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:25px;color:#fff;background:var(--strInk);box-shadow:var(--strShadowLarge)} .theme-2027 .strMetricLead, .theme-2027 .strMetricItem {min-height:118px;padding:22px 24px} .theme-2027 .strMetricLead {display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(255,77,114,.28),rgba(101,87,255,.22))} .theme-2027 .strMetricLead small {color:rgba(255,255,255,.6);font-size:.7rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase} .theme-2027 .strMetricLead strong {margin-top:4px;font-size:1.4rem;line-height:1.08} .theme-2027 .strMetricItem {display:flex;flex-direction:column;justify-content:center;border-left:1px solid rgba(255,255,255,.1)} .theme-2027 .strMetricItem strong {font-size:1.8rem;line-height:1} .theme-2027 .strMetricItem span {margin-top:7px;color:rgba(255,255,255,.57);font-size:.73rem;font-weight:720} .theme-2027 .strMetricItem small {margin-top:3px;color:var(--strLime);font-size:.66rem;font-weight:820} @media(max-width:1160px) { .theme-2027 .strMetricRailInner {grid-template-columns:1.2fr repeat(2,1fr)} .theme-2027 .strMetricItem:nth-child(4), .theme-2027 .strMetricItem:nth-child(5) {border-top:1px solid rgba(255,255,255,.1)} } @media(max-width:900px) { .theme-2027 .strMetricRail {margin-top:0;padding-top:20px} .theme-2027 .strMetricRailInner {grid-template-columns:1fr 1fr} .theme-2027 .strMetricLead {grid-column:1/3} .theme-2027 .strMetricItem:nth-child(n) {border-top:1px solid rgba(255,255,255,.1)} } @media(max-width:620px) { .theme-2027 .strMetricRailInner {grid-template-columns:1fr 1fr} .theme-2027 .strMetricLead {grid-column:1/3} .theme-2027 .strMetricLead, .theme-2027 .strMetricItem {min-height:98px;padding:17px} .theme-2027 .strMetricItem strong {font-size:1.45rem} } /* ===================================================================== CIJENA U POPISU (.strAgendaPrice + .strAgendaAction + .strAgendaSoon) — JEDNA IZVEDBA ZA CIJELI PORTAL 2027 (pravilo 1.4z, nalog korisnika 22-08-2026). U retku popisa (agenda festivala, sportski puls, direktorij) cijena NIJE gumb: sitni natpis „Ulaznice", ispod njega „od {cijena}" podebljano, pa okrugla strelica prema ponudi. Kad cijene nema, stoji natpis „Uskoro" (.strAgendaSoon), nikad poziv na radnju. Vrijednosti su doslovno one koje je imala stranica festivala (css/festivali2027.css, redci 164-166); ondje su obrisane da izvedba bude samo OVDJE — isto kao što je .strMetricRail spojen po pravilu 1.4x. Stranica smije dodati samo POLOŽAJ (stupac mreže, poravnanje u ćeliji), nikad boju, veličinu ni oblik. ===================================================================== */ .theme-2027 .strAgendaPrice small { display: block; color: var(--strMuted); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; } .theme-2027 .strAgendaPrice strong { font-size: 1rem; } .theme-2027 .strAgendaSoon { color: var(--strMuted); font-size: .78rem; font-weight: 800; } /* ===================================================================== PRAVNA NAPOMENA UZ AI (.strDisclosure) — JEDNA IZVEDBA ZA CIJELI PORTAL 2027 (pravilo 1.4i za sadrzaj, 1.4z za prikaz; nalog korisnika 22-08-2026). Do sada je ista definicija stajala u tri stila stranica (aiPrognoze2027.css, prognozeLiga2027.css, natjecanja2027.css) i nije izgledala isto: na tamnoj plohi huba prozirna ruzicasta (.08) potamnila je u ljubicastu. Zato je boja podloge sada PUNA (#fff1f4 = ista nijansa koju je prozirna davala na bijelom), pa napomena izgleda identicno bez obzira na to sto je iza nje. Stranica ne smije imati svoju inacicu — samo polozaj. ===================================================================== */ .theme-2027 .strDisclosure { margin: 18px 0 0; padding: 13px 16px; border-radius: 14px; color: #8b4052; background: #fff1f4; font-size: .74rem; } .theme-2027 .strDisclosure + .strDisclosure { margin-top: 8px; } /* ===================================================================== STRANICA POJEDINACNOG NATJECANJA - VRH STRANICE (deveta stranica 2027). Nalog korisnika 23-08-2026: izgled mora biti IDENTICAN dizajnerovu predlosku ("--- nije za upload/NOVI DIZAJN 2027/natjecanje pojedinacno/index.html"), uz jednu jedinu njegovu iznimku: fotografija smije biti nagnuta. Sve vrijednosti ispod DOSLOVNO su prepisane iz tog predloska (njegov