/* ============================================================ public.css — javna web stranica PK Mursa (redizajn 2026-09-13) Stil: World Aquatics struktura u klupskim bojama (navy + zlatna + bijela), mekoca iz club.css (Nunito, zaobljeni rubovi, meke sjene). SVE je scopeano na #publicSite ili :is(html.pk-site body, body.pub-mode), pa clanska aplikacija (memberSite) i login ekran ostaju netaknuti. :is(html.pk-site body, body.pub-mode) postavlja showPublic(), a skidaju showMember()/showLogin(). ============================================================ */ :root { --pub-navy: #0F1E3C; --pub-navy-deep: #000C1A; --pub-navy-2: #1A2F58; --pub-navy-soft: rgba(15,30,60,.08); --pub-gold: #E8A838; --pub-gold-dk: #CD8C24; --pub-gold-soft: rgba(232,168,56,.14); --pub-wrap: 1180px; } [data-theme="dark"] { --pub-navy-soft: rgba(232,168,56,.10); } /* ── Header u javnom nacinu ──────────────────────────────────── */ :is(html.pk-site body, body.pub-mode) .site-header { box-shadow: var(--shadow); } :is(html.pk-site body, body.pub-mode) .header-top { display: none !important; } :is(html.pk-site body, body.pub-mode) .header-main { height: 66px; width: 100%; padding: 0 16px; } /* puna sirina: izbornik skroz lijevo, gumbi skroz desno */ :is(html.pk-site body, body.pub-mode) .header-nav .nav-link { font-weight: 700; padding: 7px 14px; border-radius: 9px; } :is(html.pk-site body, body.pub-mode) .header-nav .nav-link:hover { background: var(--pub-navy-soft); color: var(--pub-navy); } [data-theme="dark"] :is(html.pk-site body, body.pub-mode) .header-nav .nav-link:hover { color: var(--pub-gold); } :is(html.pk-site body, body.pub-mode) #headerPublic { display: flex; gap: 6px; align-items: center; margin-left: auto; } :is(html.pk-site body, body.pub-mode) #headerPublic .hp-sep { width: 1px; height: 24px; background: var(--border); margin: 0 6px; } :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn { width: 30px; height: 30px; font-size: .85rem; } @media (max-width: 900px) { :is(html.pk-site body, body.pub-mode) #headerPublic .header-contact-link, :is(html.pk-site body, body.pub-mode) #headerPublic .hp-sep { display: none; } } :is(html.pk-site body, body.pub-mode) #headerPublic .btn-outline { border-width: 2px; font-weight: 800; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { background: linear-gradient(135deg, var(--pub-gold), var(--pub-gold-dk)); color: var(--pub-navy-deep); border: none; font-weight: 800; box-shadow: 0 3px 10px rgba(205,140,36,.35); } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(205,140,36,.45); } @media (max-width: 720px) { :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { padding: 6px 10px; font-size: .78rem; } } /* ── Opce ────────────────────────────────────────────────────── */ #publicSite { --surface1: var(--surface); --text1: var(--text); --bg2: var(--surface2); } #publicSite .pub-wrap { max-width: var(--pub-wrap); margin: 0 auto; padding-inline: 20px; } #publicSite .eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-gold-dk); text-align: center; margin-bottom: 6px; } #publicSite .num { font-variant-numeric: tabular-nums; } /* Sekcije: naslov + zlatni naglasak, bez plave */ #publicSite .section { padding: 56px 20px; } #publicSite .section-alt { background: var(--surface); } #publicSite .section-title { font-size: 1.85rem; } #publicSite .section-title span { color: var(--pub-gold-dk) !important; } [data-theme="dark"] #publicSite .section-title span { color: var(--pub-gold) !important; } #publicSite .section-sub { margin-bottom: 32px; } /* Genericke kartice (inline stil s border-radius:14px) — mekoca + lift */ #publicSite .section [style*="border-radius:14px"], #publicSite .section [style*="border-radius:10px"] { box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; } #publicSite .section a[style*="border-radius:10px"]:hover, #publicSite #uprava [style*="border-radius:14px"]:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } #publicSite .feature-card { border-radius: 16px; } #publicSite .feature-icon { background: linear-gradient(135deg, var(--pub-navy), var(--pub-navy-2)); color: var(--pub-gold); border-radius: 16px; } #publicSite .badge { border-radius: 999px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; } #publicSite #uprava .badge, #publicSite #coaches .badge { background: var(--pub-gold-soft) !important; color: #9A6A12 !important; } [data-theme="dark"] #publicSite #uprava .badge, [data-theme="dark"] #publicSite #coaches .badge { color: var(--pub-gold) !important; } #publicSite .avatar-circle { background: linear-gradient(135deg, var(--pub-navy), var(--pub-navy-2)); color: var(--pub-gold); } #publicSite #uprava [style*="border-radius:14px"] { position: relative; overflow: hidden; } #publicSite #uprava [style*="border-radius:14px"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pub-gold), var(--pub-gold-dk)); } #publicSite .coach-card { border-radius: 16px; } /* Treneri i uprava: kartice po cijeloj sirini sadrzaja, ravnomjerno rastegnute */ #publicSite #coachCardsBody { max-width: var(--pub-wrap) !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 24px !important; } #publicSite #uprava > div[style*="grid"] { max-width: var(--pub-wrap) !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 24px !important; } #publicSite .coach-card { padding: 30px 24px 22px; } #publicSite .coach-card img { width: 128px !important; height: 128px !important; border: 3px solid var(--pub-gold) !important; box-shadow: 0 6px 18px rgba(15,30,60,.25); } #publicSite .coach-card > div[style*="font-weight:800"] { font-size: 1.15rem !important; margin-top: 4px; } /* ── HERO: tekst lijevo, grb "most + M" desno ─────────────────── */ #publicSite .hero { background: linear-gradient(135deg, var(--pub-navy-deep) 0%, var(--pub-navy) 55%, var(--pub-navy-2) 100%); } #publicSite .hero-lanes { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(100deg, transparent 0 120px, rgba(232,168,56,.10) 120px 123px, transparent 123px 240px); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 90%); mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 90%); } #publicSite .hero { --crest-w: min(440px, 88vw); /* sirina grba; sve ostalo se skalira iz nje (viewBox 440x260) */ --crest-h: calc(var(--crest-w) * 260 / 440); --deck-y: calc(var(--crest-w) * 172 / 440); /* visina palube unutar grba */ padding: 36px 20px 130px; text-align: center; } /* Most preko cijele sirine: kontejner visine grba, sve unutra apsolutno i centrirano */ #publicSite .hero-bridge { position: relative; z-index: 1; height: var(--crest-h); margin: 0 auto 14px; } #publicSite .hb-crest { position: absolute; left: 50%; top: 0; width: var(--crest-w); height: var(--crest-h); transform: translateX(-50%); overflow: visible; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); } /* Sajle: lijevi SVG od lijevog ruba ekrana do lijevog pilona (25 % sirine grba od sredine), desni zrcalno. Pozicioniramo ih relativno prema .hero (100 % sirine) — zato left/right u calc s 50 %. */ #publicSite .hb-cables { position: absolute; top: 0; height: var(--crest-h); overflow: visible; opacity: .95; } #publicSite .hb-cables-l { left: calc(-1 * (50vw - 50%)); width: calc(50vw - var(--crest-w) * 0.25); } #publicSite .hb-cables-r { left: calc(50% + var(--crest-w) * 0.25); width: calc(50vw - var(--crest-w) * 0.25); } /* Drava: puna sirina, odmah ispod palube; vrh trake = paluba + malo */ #publicSite .hb-drava { position: absolute; left: calc(-1 * (50vw - 50%)); width: 100vw; top: calc(var(--deck-y) + 14px); height: calc(var(--crest-w) * 120 / 440); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); } /* Natpis s grba */ #publicSite .hero-lockup { position: relative; z-index: 1; margin-bottom: 26px; } #publicSite .hl-name { font-weight: 900; font-size: clamp(2rem, 6vw, 3.1rem); letter-spacing: .16em; color: #fff; line-height: 1; } #publicSite .hl-city { font-size: clamp(.9rem, 2.2vw, 1.15rem); font-weight: 700; letter-spacing: .42em; color: var(--pub-gold); margin-top: 8px; } #publicSite .hl-slogan{ font-family: 'Caveat', cursive; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 600; color: var(--pub-gold); margin-top: 6px; } /* Sredisnji tekst ispod grba */ #publicSite .hero-center { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; } #publicSite .hero-badge { background: rgba(232,168,56,.14); border: 1px solid rgba(232,168,56,.4); color: var(--pub-gold); gap: 8px; margin-bottom: 18px; } #publicSite .hero-badge i { color: var(--pub-gold); } #publicSite .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.06; } #publicSite .hero h1 span { color: var(--pub-gold); } #publicSite .hero p { margin: 16px auto 26px; max-width: 52ch; } #publicSite .hero-actions { justify-content: center; } #publicSite .hero-actions .btn-hero-gold { background: linear-gradient(135deg, var(--pub-gold), var(--pub-gold-dk)); color: var(--pub-navy-deep); border: none; box-shadow: 0 3px 10px rgba(205,140,36,.35); font-weight: 800; } #publicSite .hero-actions .btn-hero-gold:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(205,140,36,.45); } #publicSite .hero-actions .btn-hero-ghost { color: #fff; border: 2px solid rgba(255,255,255,.45); background: transparent; font-weight: 800; } #publicSite .hero-actions .btn-hero-ghost:hover { border-color: var(--pub-gold); color: var(--pub-gold); } #publicSite .hero-stats { justify-content: center; gap: 40px; margin-top: 36px; } #publicSite .hero-stat { text-align: center; } #publicSite .hero-stat-num { color: var(--pub-gold); font-size: 1.9rem; line-height: 1; } #publicSite .hero-stat-label { margin-top: 4px; font-size: .7rem; } #publicSite .hero-waves { z-index: 1; } /* ── Sekundarna (sticky) navigacija ─────────────────────────── */ #publicSite .subnav { position: sticky; top: 66px; z-index: 150; padding: 8px 20px; background: linear-gradient(var(--bg) 70%, transparent); } #publicSite .subnav .in { max-width: var(--pub-wrap); margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 5px; box-shadow: var(--shadow); } #publicSite .subnav .in::-webkit-scrollbar { display: none; } #publicSite .subnav a { white-space: nowrap; padding: 7px 14px; border-radius: 9px; font-size: .85rem; font-weight: 700; color: var(--text2); text-decoration: none; cursor: pointer; transition: var(--transition); } #publicSite .subnav a.on, #publicSite .subnav a:hover { background: var(--pub-navy); color: #fff; } [data-theme="dark"] #publicSite .subnav a.on, [data-theme="dark"] #publicSite .subnav a:hover { background: var(--pub-gold); color: var(--pub-navy-deep); } /* ── Kalendar natjecanja ─────────────────────────────────────── */ #publicSite .cal-year-btn.active { background: var(--pub-navy); border-color: var(--pub-navy); } [data-theme="dark"] #publicSite .cal-year-btn.active { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .cal-table-wrap { border-radius: 16px; box-shadow: var(--shadow); max-width: var(--pub-wrap); margin: 0 auto; } #publicSite .cal-table thead tr { background: var(--pub-navy); } #publicSite .cal-table th { color: rgba(255,255,255,.85); border-bottom: 3px solid var(--pub-gold); } #publicSite .cal-row-nat { border-left-color: var(--pub-gold); } #publicSite .cal-badge-nat { background: var(--pub-gold-soft); color: #9A6A12; } #publicSite .cal-legend { max-width: var(--pub-wrap); margin: 12px auto 0; } /* ── Norme / rekordi akordeon ────────────────────────────────── */ #publicSite .norme-toggle { border-radius: 14px; font-weight: 800; box-shadow: var(--shadow); } #publicSite .norme-toggle.open { border-color: var(--pub-gold); } #publicSite .norme-chevron { color: var(--pub-gold-dk); } #publicSite .norme-toggle span i { color: var(--pub-gold-dk); margin-right: 6px; } #publicSite .norme-body { border-radius: 0 0 14px 14px; } /* ── Raspored ────────────────────────────────────────────────── */ #publicSite .schedule-day { border-radius: 16px; box-shadow: var(--shadow); } #publicSite .schedule-day-header { background: var(--pub-navy); color: #fff; border-bottom: 3px solid var(--pub-gold); } #publicSite .schedule-time { color: var(--pub-navy); } [data-theme="dark"] #publicSite .schedule-time { color: var(--pub-gold); } /* ── Donator + poziv na upis ─────────────────────────────────── */ #publicSite #donator [style*="border-radius:14px"] { border-top: 4px solid var(--pub-gold) !important; } #publicSite .join { max-width: var(--pub-wrap); margin: 0 auto; background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); color: #fff; border-radius: 24px; box-shadow: var(--shadow-md); padding: 32px 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border: 1px solid rgba(232,168,56,.35); text-align: left; } #publicSite .join h2 { font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; margin: 0; } #publicSite .join h2 span { color: var(--pub-gold); } #publicSite .join p { margin: 4px 0 0; opacity: .85; max-width: 56ch; } #publicSite .join .acts { display: flex; gap: 10px; flex-wrap: wrap; } #publicSite .join .btn-hero-gold { background: linear-gradient(135deg, var(--pub-gold), var(--pub-gold-dk)); color: var(--pub-navy-deep); border: none; box-shadow: 0 3px 10px rgba(205,140,36,.35); font-weight: 800; } #publicSite .hero-join { margin-top: 10px; padding: 24px 28px; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); border-color: rgba(232,168,56,.45); } #publicSite .hero-join h2 { font-size: 1.4rem; } #publicSite .hero-join p { font-size: .92rem; } /* ── Footer u 4 stupca ───────────────────────────────────────── */ #publicSite .site-footer { background: var(--pub-navy-deep); color: rgba(255,255,255,.62); text-align: left; padding: 0; font-size: .84rem; } #publicSite .site-footer .ft-grid { max-width: var(--pub-wrap); margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; align-items: start; } #publicSite .site-footer .ft-logo { width: 150px; margin-bottom: 10px; } #publicSite .site-footer h4 { color: var(--pub-gold); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; font-weight: 800; } #publicSite .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #publicSite .site-footer a { color: inherit; text-decoration: none; cursor: pointer; } #publicSite .site-footer a:hover { color: #fff; } #publicSite .site-footer p { margin: 0 0 8px; max-width: 40ch; line-height: 1.6; } #publicSite .site-footer .ft-soc { display: flex; gap: 10px; margin-top: 12px; } #publicSite .site-footer .ft-soc a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 1rem; transition: var(--transition); } #publicSite .site-footer .ft-soc a:hover { background: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .site-footer .ft-bot { border-top: 1px solid rgba(255,255,255,.08); font-size: .74rem; } #publicSite .site-footer .ft-bot .in { max-width: var(--pub-wrap); margin: 0 auto; padding: 14px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ── Responzivno ─────────────────────────────────────────────── */ @media (max-width: 900px) { #publicSite .hero { padding-bottom: 100px; } #publicSite .hl-name { letter-spacing: .1em; } #publicSite .hero-stats { gap: 24px; } #publicSite .site-footer .ft-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { #publicSite .section { padding: 44px 16px; } #publicSite .join { padding: 24px 20px; } #publicSite .site-footer .ft-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { #publicSite .section [style*="border-radius"], #publicSite .btn { transition: none; } } /* ── Vizija i misija ─────────────────────────────────────────── */ #publicSite .vm-head { max-width: var(--pub-wrap); margin: 0 auto; text-align: center; } #publicSite .vm-grid { max-width: var(--pub-wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch; } #publicSite .vm-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pub-gold); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } #publicSite .vm-vizija { background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); color: #fff; border: 1px solid rgba(232,168,56,.35); border-radius: 24px; padding: 32px 30px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; } #publicSite .vm-vizija p { margin: 0 0 14px; line-height: 1.7; font-size: 1rem; opacity: .92; } #publicSite .vm-slogan { margin-top: auto; padding-top: 10px; font-family: 'Caveat', cursive; font-size: 1.6rem; color: var(--pub-gold); } #publicSite .vm-misija { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 32px 30px; box-shadow: var(--shadow); } #publicSite .vm-misija .vm-eyebrow { color: var(--pub-gold-dk); } #publicSite .vm-misija ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } #publicSite .vm-misija li { display: flex; gap: 14px; align-items: flex-start; font-size: .92rem; line-height: 1.6; color: var(--text2); } #publicSite .vm-misija li b { color: var(--text); } #publicSite .vm-misija li i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pub-navy), var(--pub-navy-2)); color: var(--pub-gold); font-size: .9rem; margin-top: 2px; } @media (max-width: 900px) { #publicSite .vm-grid { grid-template-columns: 1fr; } } /* ── Plivacke tehnike (piktogrami u banneru) ─────────────────── */ #publicSite .strokes { display: flex; gap: 6px; align-items: flex-end; margin: 0 8px; } #publicSite .stroke { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--pub-gold); width: 66px; } #publicSite .stroke svg { width: 56px; height: 36px; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } #publicSite .stroke span { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); } #publicSite .hero-join { justify-content: space-between; } @media (max-width: 640px) { #publicSite .strokes { width: 100%; justify-content: center; margin: 4px 0; } } #publicSite .hero-join > div:first-child { flex: 1 1 280px; max-width: 420px; } #publicSite .hero-join { gap: 18px; } #publicSite .strokes { flex: 0 0 auto; } #publicSite .hero-join { flex-wrap: nowrap; } @media (max-width: 900px) { #publicSite .hero-join { flex-wrap: wrap; } } /* Banner u heroju: sve centrirano, jedno ispod drugog */ #publicSite .hero-join { flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 14px; max-width: 720px; margin-left: auto; margin-right: auto; } #publicSite .hero-join > div:first-child { max-width: none; flex: none; } #publicSite .hero-join p { margin-left: auto; margin-right: auto; } #publicSite .hero-join .acts { justify-content: center; } /* Gornja traka: sve centrirano u sredini (bez lijevo/desno razmaka) */ :is(html.pk-site body, body.pub-mode) .header-main { justify-content: center; gap: 28px; } :is(html.pk-site body, body.pub-mode) #publicNav { flex: none; } :is(html.pk-site body, body.pub-mode) #headerPublic { margin-left: 0; } /* Naslov kao natpis s loga: ime bijelo, grad i slogan zlatni */ #publicSite h1.hero-lockup .hl-name { color: #fff; } #publicSite h1.hero-lockup .hl-city, #publicSite h1.hero-lockup .hl-slogan { color: var(--pub-gold); } /* Poziv na upis u heroju bez okvira */ #publicSite .hero-cta { margin-top: 26px; } #publicSite .hero-cta h2 { font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; margin: 0 0 6px; color: #fff; } #publicSite .hero-cta h2 span { color: var(--pub-gold); } #publicSite .hero-cta p { margin: 0 auto 18px; opacity: .88; } /* Bez donjih valova: hero zavrsava ravno, manji donji razmak */ #publicSite .hero { padding-bottom: 56px; } /* Sadrzaj ispod mosta pomaknut nize, da valovi Drave ostanu slobodni */ #publicSite .hero-bridge { margin-bottom: 70px; } /* ── Nas znak / vrijednosti / nas trener (tekst s plakata) ────── */ #publicSite .id-grid { max-width: var(--pub-wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } #publicSite .id-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px; box-shadow: var(--shadow); text-align: center; position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } #publicSite .id-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pub-gold), var(--pub-gold-dk)); } #publicSite .id-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } #publicSite .id-item svg { width: 72px; height: 46px; color: var(--pub-gold-dk); margin: 0 auto 10px; display: block; } [data-theme="dark"] #publicSite .id-item svg { color: var(--pub-gold); } #publicSite .id-item h3 { font-size: 1rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; color: var(--text); } #publicSite .id-item p { margin: 0; font-size: .88rem; color: var(--text2); line-height: 1.6; } #publicSite .id-quote { max-width: var(--pub-wrap); margin: 22px auto 0; text-align: center; font-family: 'Caveat', cursive; font-size: 1.7rem; color: var(--pub-gold-dk); } [data-theme="dark"] #publicSite .id-quote { color: var(--pub-gold); } #publicSite .tim-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; } #publicSite .tim-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; font-size: .95rem; } #publicSite .tim-list li i { color: var(--pub-gold); margin-top: 4px; font-size: .85rem; } #publicSite .vm-lead { font-weight: 800; color: inherit; } #publicSite .vm-misija .vm-lead { color: var(--text); margin: 0 0 14px; line-height: 1.6; } #publicSite .coach-creed { max-width: 760px; margin: -8px auto 30px; background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); color: #fff; border: 1px solid rgba(232,168,56,.35); border-radius: 20px; padding: 24px 28px; box-shadow: var(--shadow-md); } #publicSite .coach-creed ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } #publicSite .coach-creed li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.55; } #publicSite .coach-creed li i { color: var(--pub-gold); margin-top: 4px; font-size: .85rem; } #publicSite .coach-creed li:last-child { grid-column: 1 / -1; } @media (max-width: 640px) { #publicSite .coach-creed ul { grid-template-columns: 1fr; } } /* Drava: tanja i decentnija traka */ #publicSite .hb-drava { height: calc(var(--crest-w) * 72 / 440); top: calc(var(--deck-y) + 16px); } /* Znacka "Osnovan 2026." vise gore, veci razmak do natpisa PK MURSA */ #publicSite .hero-bridge { margin-bottom: 40px; } #publicSite .hero-center .hero-badge { margin-bottom: 34px; } /* Most i Drava iste sirine kao sadrzaj (ne puna sirina ekrana); bez kosih zlatnih linija u pozadini */ #publicSite .hero-lanes { display: none; } #publicSite .hero-bridge { max-width: var(--pub-wrap); margin-left: auto; margin-right: auto; } #publicSite .hb-cables-l { left: 0; width: calc(50% - var(--crest-w) * 0.25); } #publicSite .hb-cables-r { left: calc(50% + var(--crest-w) * 0.25); width: calc(50% - var(--crest-w) * 0.25); } #publicSite .hb-drava { left: 0; width: 100%; } /* Drava: meki rubovi lijevo/desno + prijelaz na dnu */ #publicSite .hb-drava { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ── Novosti ─────────────────────────────────────────────────── */ #publicSite .news-list { max-width: var(--pub-wrap); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } #publicSite .news-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); } #publicSite .news-img { display: block; background: var(--pub-navy-deep); } #publicSite .news-img img { width: 100%; height: 100%; object-fit: cover; display: block; } #publicSite .news-body { padding: 28px 30px; } #publicSite .news-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } #publicSite .news-meta .pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } #publicSite .news-meta .pill-gold { background: var(--pub-gold-soft); color: #9A6A12; } [data-theme="dark"] #publicSite .news-meta .pill-gold { color: var(--pub-gold); } #publicSite .news-date { font-size: .78rem; font-weight: 700; color: var(--text3); } #publicSite .news-body h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 14px; color: var(--text); } #publicSite .news-body p { margin: 0 0 10px; color: var(--text2); line-height: 1.65; font-size: .95rem; } #publicSite .news-body p:last-child { margin-bottom: 0; } @media (max-width: 900px) { #publicSite .news-item { grid-template-columns: 1fr; } #publicSite .news-img img { max-height: 420px; } } /* Hero = tocno prvi ekran (visina prozora minus traka); sadrzaj vertikalno centriran */ #publicSite .hero { min-height: calc(100vh - 66px); display: flex; flex-direction: column; justify-content: center; } #publicSite .hero-bridge { width: 100%; } /* u flex koloni margin:auto ne smije suziti most */ /* Karusel v2: jedna vijest vidljiva, ostale skrivene; prijelaz fade */ #publicSite .news-track { display: block; transition: none; transform: none !important; } #publicSite .news-track .news-item { display: none; } #publicSite .news-track .news-item.on { display: grid; animation: newsFade .35s ease; } @keyframes newsFade { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } #publicSite .news-count { text-align: center; font-size: .78rem; font-weight: 700; color: var(--text3); margin-top: 8px; } #publicSite .news-img img { max-height: 560px; } /* ── Novosti: karusel — okvir, strelice, tockice ─────────────── */ #publicSite .news-carousel { position: relative; max-width: var(--pub-wrap); margin: 0 auto; padding: 0 60px; } #publicSite .news-viewport { overflow: hidden; border-radius: 20px; } #publicSite .news-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--pub-navy); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer; z-index: 2; transition: var(--transition); } #publicSite .news-nav:hover { background: var(--pub-gold); color: var(--pub-navy-deep); border-color: var(--pub-gold); } #publicSite .news-prev { left: 0; } #publicSite .news-next { right: 0; } [data-theme="dark"] #publicSite .news-nav { color: var(--pub-gold); } #publicSite .news-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } #publicSite .news-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--border2); cursor: pointer; padding: 0; transition: var(--transition); } #publicSite .news-dots button.on { background: var(--pub-gold); width: 26px; border-radius: 999px; } @media (max-width: 640px) { #publicSite .news-carousel { padding: 0; } #publicSite .news-nav { width: 38px; height: 38px; } #publicSite .news-prev { left: 6px; } #publicSite .news-next { right: 6px; } } /* Gumb Upisi se i brojke nize na prvom ekranu */ #publicSite .hero-center .hero-actions { margin-top: 34px; } #publicSite .hero-stats { margin-top: 44px; } #publicSite .hero-center .hero-actions { margin-top: 64px; } #publicSite .hero-stats { margin-top: 56px; } /* Mobitel: visina ekrana bez adresne trake (svh) da hero ne skace pri skrolu */ @supports (height: 100svh) { #publicSite .hero { min-height: calc(100svh - 66px); } } /* ── Mobilni izbornik javne stranice (hamburger) ─────────────── */ #publicSite ~ * .pub-burger, .pub-burger { display: none; } @media (max-width: 768px) { :is(html.pk-site body, body.pub-mode) .pub-burger { display: inline-flex; font-size: 1.05rem; } :is(html.pk-site body, body.pub-mode) .header-main { gap: 10px; padding: 0 12px; justify-content: space-between; } :is(html.pk-site body, body.pub-mode) #publicNav { display: none; } :is(html.pk-site body, body.pub-mode) #publicNav.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; z-index: 250; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 10px 12px 14px; } :is(html.pk-site body, body.pub-mode) #publicNav.open .nav-link { width: 100%; text-align: left; padding: 11px 12px; font-size: .95rem; justify-content: space-between; } :is(html.pk-site body, body.pub-mode) #publicNav.open .nav-dropdown { width: 100%; } :is(html.pk-site body, body.pub-mode) #publicNav.open .dropdown-menu { position: static; box-shadow: none; border: none; background: var(--surface2); border-radius: 10px; margin: 2px 0 6px; padding: 6px; } :is(html.pk-site body, body.pub-mode) #publicNav.open .dropdown-item { padding: 9px 12px; } :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn { display: none; } } /* ============================================================ v2 (2026-09-13): pozadina s nazivom kluba, plitka stranica, nizi header/footer ============================================================ */ :root { --pub-hdr-h: 54px; } /* Header nizi */ :is(html.pk-site body, body.pub-mode) .header-main { height: 54px; flex-wrap: nowrap; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 40px !important; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(1) { font-size: .9rem; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(2) { font-size: .5rem; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(3) { font-size: .86rem; } :is(html.pk-site body, body.pub-mode) .header-nav .nav-link { padding: 6px 11px; font-size: .86rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { padding: 6px 12px; font-size: .8rem; } /* Plitka stranica: sekcije skrivene dok ih izbornik ne otvori */ #publicSite > section:not(.hero):not(.on) { display: none; } /* Hero: pozadina s nazivom kluba (bez mosta) */ #publicSite .hero-bg { min-height: calc(100vh - var(--pub-hdr-h)); padding: 0; background: #0a1730 url('mursa_pozadina.jpg') center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; } @supports (height: 100svh) { #publicSite .hero-bg { min-height: calc(100svh - var(--pub-hdr-h)); } } #publicSite .hero-bridge, #publicSite .hero-lanes { display: none; } #publicSite .hero-row { max-width: var(--pub-wrap); width: 100%; margin: 0 auto; padding: 16px 20px 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: end; } #publicSite .hero-crest-img { justify-self: start; } #publicSite .hero-crest-img img { width: min(220px, 26vw); height: auto; display: block; filter: drop-shadow(0 12px 28px rgba(0,0,0,.55)); } #publicSite .hero-cap-img { justify-self: end; } #publicSite .hero-cap-img img { width: min(300px, 30vw); height: auto; display: block; border-radius: 16px; box-shadow: 0 14px 34px rgba(0,0,0,.55); border: 1px solid rgba(232,168,56,.45); } #publicSite .hero-bg .hero-center { max-width: none; text-align: center; padding-bottom: 6px; } #publicSite .hero-bg .hero-badge { margin-bottom: 14px; } #publicSite .hero-bg .hero-actions { margin-top: 0; } #publicSite .hero-bg .hero-stats { margin-top: 22px; gap: 30px; } #publicSite .hero-bg .hero-stat-num { font-size: 1.7rem; } @media (max-width: 900px) { #publicSite .hero-row { grid-template-columns: 1fr 1fr; padding-bottom: 20px; } #publicSite .hero-bg .hero-center { grid-column: 1 / -1; order: 3; } #publicSite .hero-crest-img img { width: min(150px, 34vw); } #publicSite .hero-cap-img img { width: min(200px, 44vw); } } /* Footer plitki: jedan red */ #publicSite .site-footer .ft-row { max-width: var(--pub-wrap); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .78rem; } #publicSite .site-footer .ft-crest { width: 40px; height: auto; } #publicSite .site-footer .ft-txt { display: flex; flex-direction: column; line-height: 1.4; } #publicSite .site-footer .ft-txt strong { color: #fff; font-size: .84rem; } #publicSite .site-footer .ft-soc { margin: 0; gap: 8px; } #publicSite .site-footer .ft-soc a { width: 30px; height: 30px; font-size: .85rem; } #publicSite .site-footer .ft-links { display: flex; gap: 14px; margin-left: auto; } #publicSite .site-footer .ft-links a { color: var(--pub-gold); font-weight: 700; } #publicSite .site-footer .ft-copy { width: 100%; text-align: center; opacity: .6; font-size: .72rem; margin-top: 2px; } @media (max-width: 720px) { #publicSite .site-footer .ft-links { margin-left: 0; } } /* v2.1: hero bez grba i kartice s kapicom — samo sredisnji sadrzaj dolje */ #publicSite .hero-row { grid-template-columns: 1fr; justify-items: center; } /* Logo gore lijevo: prozirna kapica (mursa_kapica_logo.png), bez elipticnog reza */ :is(html.pk-site body, body.pub-mode) .header-brand img { border-radius: 0 !important; height: 44px !important; filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)) !important; } /* v2.2: kliknuta sekcija zamjenjuje prvi ekran i ispunjava ga (hero skriven) */ #publicSite > section.hero:not(.on) { display: none; } #publicSite > section.hero { display: flex; } #publicSite.pub-sec > section.on { min-height: calc(100vh - var(--pub-hdr-h) - 96px); } @supports (height: 100svh) { #publicSite.pub-sec > section.on { min-height: calc(100svh - var(--pub-hdr-h) - 96px); } } /* v2.3: prvi ekran = tocno visina prozora minus header i footer (bez skrolanja) */ :root { --pub-ftr-h: 96px; } #publicSite .hero-bg { min-height: 0; height: calc(100vh - var(--pub-hdr-h) - var(--pub-ftr-h)); overflow: hidden; } @supports (height: 100svh) { #publicSite .hero-bg { min-height: 0; height: calc(100svh - var(--pub-hdr-h) - var(--pub-ftr-h)); } } #publicSite .hero-row { padding-bottom: 18px; } #publicSite .hero-bg .hero-stats { margin-top: 16px; } #publicSite.pub-sec > section.on { min-height: calc(100vh - var(--pub-hdr-h) - var(--pub-ftr-h)); } @supports (height: 100svh) { #publicSite.pub-sec > section.on { min-height: calc(100svh - var(--pub-hdr-h) - var(--pub-ftr-h)); } } /* v2.4: footer jos plici — bez reda "Pokrece", manji razmaci */ #publicSite .site-footer .ft-row { padding: 8px 20px; gap: 12px; } #publicSite .site-footer .ft-crest { width: 32px; } #publicSite .site-footer .ft-txt { line-height: 1.3; font-size: .74rem; } #publicSite .site-footer .ft-txt strong { font-size: .8rem; } #publicSite .site-footer .ft-soc a { width: 26px; height: 26px; font-size: .78rem; } /* v2.5: footer u istom ruhu kao header (svijetla podloga, isti font i boje) */ #publicSite .site-footer { background: var(--surface); color: var(--text2); border-top: 1px solid var(--border); box-shadow: 0 -1px 4px rgba(15,30,60,.06); font-family: var(--font); } #publicSite .site-footer .ft-txt strong { color: var(--text); font-weight: 900; letter-spacing: .02em; } #publicSite .site-footer .ft-txt span { color: var(--text2); font-weight: 600; } #publicSite .site-footer a { color: var(--text2); } #publicSite .site-footer a:hover { color: var(--pub-navy); } #publicSite .site-footer .ft-soc a { background: var(--accent-soft); color: var(--accent); } #publicSite .site-footer .ft-soc a:hover { background: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .site-footer .ft-links a { color: var(--text2); font-weight: 700; font-size: .86rem; padding: 6px 11px; border-radius: 9px; } #publicSite .site-footer .ft-links a:hover { background: var(--pub-navy-soft); color: var(--pub-navy); } [data-theme="dark"] #publicSite .site-footer a:hover, [data-theme="dark"] #publicSite .site-footer .ft-links a:hover { color: var(--pub-gold); } /* v2.6: aduti u heroju umjesto brojki */ #publicSite .hero-feats { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } #publicSite .hero-feat { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 128px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(232,168,56,.35); color: #fff; cursor: pointer; text-decoration: none; transition: var(--transition); backdrop-filter: blur(4px); } #publicSite .hero-feat i { font-size: 1.35rem; color: var(--pub-gold); } #publicSite .hero-feat span { font-size: .78rem; font-weight: 800; letter-spacing: .02em; text-align: center; } #publicSite .hero-feat:hover { background: rgba(232,168,56,.16); border-color: var(--pub-gold); transform: translateY(-2px); } @media (max-width: 640px) { #publicSite .hero-feats { gap: 8px; } #publicSite .hero-feat { min-width: calc(50% - 8px); padding: 10px 8px; } } /* v2.7: znacka "Osnovan 2026." gore iznad naziva kluba, s grbom */ #publicSite .hero-top { margin-bottom: auto; padding-top: 22px; display: flex; justify-content: center; } #publicSite .hero-top .hero-badge { margin: 0; padding: 6px 16px 6px 8px; gap: 10px; font-size: .8rem; background: rgba(10,23,48,.55); backdrop-filter: blur(4px); } #publicSite .hero-top .hero-badge img { width: 30px; height: auto; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); } /* v2.8: aduti bez okvira i bez klika — samo ikona + tekst */ #publicSite .hero-feats { gap: 34px; margin-top: 22px; } #publicSite .hero-feat { background: none; border: none; backdrop-filter: none; padding: 0; min-width: 0; cursor: default; } #publicSite .hero-feat:hover { background: none; border: none; transform: none; } #publicSite .hero-feat i { font-size: 1.6rem; } #publicSite .hero-feat span { font-size: .8rem; } /* v2.9: header ne smije rasti ni prelamati se; footer visina se mjeri, header je fiksan */ :is(html.pk-site body, body.pub-mode) .site-header { height: 54px; overflow: visible; } :is(html.pk-site body, body.pub-mode) .header-main { min-height: 54px; max-height: 54px; } :is(html.pk-site body, body.pub-mode) #headerPublic { flex-wrap: nowrap; } /* v2.10: gumb Upisi se malo vise (veci razmak izmedju gumba i aduta, sadrzaj podignut) */ #publicSite .hero-row { padding-bottom: 26px; } #publicSite .hero-feats { margin-top: 40px; } /* v2.11: znacka Osnovan 2026. na sredini izmedju dna headera i natpisa PLIVACKI KLUB (natpis je na ~34 % visine heroja) */ #publicSite .hero-bg { position: relative; } #publicSite .hero-top { position: absolute; left: 0; right: 0; top: 17%; transform: translateY(-50%); padding-top: 0; margin: 0; } /* ── v3 MOBILE (2026-09-13) ──────────────────────────────────── */ /* Uzrok horizontalnog preljeva: grid 1fr = minmax(auto,1fr) pa se celija sirila na sirinu 4 aduta u redu */ #publicSite .hero-row { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; overflow: hidden; } #publicSite .hero-bg .hero-center { min-width: 0; max-width: 100%; width: 100%; } #publicSite .hero-feats { flex-wrap: wrap; } :is(html.pk-site body, body.pub-mode) { overflow-x: hidden; } #publicSite, #publicSite > section { max-width: 100vw; overflow-x: hidden; } @media (max-width: 640px) { /* Pozadina: cijeli logotip vidljiv (slika po sirini), iznad i ispod navy; znacka iznad, gumb ispod */ #publicSite .hero-bg { background: #0a1730 url('mursa_pozadina.jpg') center 42% / 118% auto no-repeat; } #publicSite .hero-top { top: 11%; } #publicSite .hero-top .hero-badge { font-size: .72rem; padding: 5px 12px 5px 7px; } #publicSite .hero-top .hero-badge img { width: 24px; } #publicSite .hero-row { padding: 0 14px 14px; } #publicSite .hero-bg .hero-actions .btn { padding: 11px 26px; font-size: .95rem; } #publicSite .hero-feats { gap: 6px 18px; margin-top: 18px; } #publicSite .hero-feat { width: calc(50% - 9px); } #publicSite .hero-feat i { font-size: 1.3rem; } #publicSite .hero-feat span { font-size: .72rem; } /* Footer: kompaktan */ #publicSite .site-footer .ft-row { padding: 8px 12px; gap: 8px 12px; } #publicSite .site-footer .ft-crest { width: 28px; } #publicSite .site-footer .ft-txt { font-size: .7rem; flex: 1 1 200px; } #publicSite .site-footer .ft-txt strong { font-size: .76rem; } #publicSite .site-footer .ft-links { width: 100%; justify-content: center; gap: 6px; } #publicSite .site-footer .ft-links a { padding: 4px 8px; font-size: .78rem; } /* Sekcije: manji rubovi, kartice na punu sirinu */ #publicSite .section { padding: 28px 12px; } #publicSite .section-title { font-size: 1.4rem; } #publicSite .section-sub { margin-bottom: 18px; font-size: .84rem; } #publicSite .news-carousel { padding: 0; } #publicSite .news-nav { top: 120px; transform: none; } #publicSite .news-body { padding: 18px 16px; } #publicSite .news-body h3 { font-size: 1.1rem; } #publicSite .news-body p { font-size: .88rem; } #publicSite .vm-vizija, #publicSite .vm-misija, #publicSite .coach-creed { padding: 20px 16px; border-radius: 16px; } #publicSite #coachCardsBody, #publicSite #uprava > div[style*="grid"] { grid-template-columns: 1fr !important; gap: 14px !important; } #publicSite .cal-table-wrap { border-radius: 12px; } } @media (max-width: 640px) { /* mekani prijelaz gornjeg i donjeg ruba pozadinske slike u navy */ #publicSite .hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, #0a1730 0%, rgba(10,23,48,0) 26%, rgba(10,23,48,0) 58%, #0a1730 82%); } #publicSite .hero-top, #publicSite .hero-row { z-index: 1; } /* aduti: dva po redu, centrirani parovi */ #publicSite .hero-feats { gap: 10px 0; justify-content: center; } #publicSite .hero-feat { width: 46%; } } @media (max-width: 640px) { #publicSite .hero-bg::after { background: linear-gradient(180deg, #0a1730 27%, rgba(10,23,48,0) 40%, rgba(10,23,48,0) 58%, #0a1730 71%); } } /* ── v4 (2026-09-13): navy gradijent umjesto tkanine, kapica u prvom planu, dublji header/footer ── */ :root { --pub-hdr-h: 120px; --pub-ftr-h: 120px; } #publicSite .hero-bg, #publicSite .hero-bg::after { background: linear-gradient(135deg, var(--pub-navy-deep) 0%, var(--pub-navy) 55%, var(--pub-navy-2) 100%) !important; } #publicSite .hero-bg::after { display: none; } #publicSite .hero-bg { justify-content: center; } #publicSite .hero-top { position: static; transform: none; margin: 0 0 8px; padding: 0; } #publicSite .hero-row { padding: 0 20px 10px; } #publicSite .hero-cap-main { display: flex; justify-content: center; margin-bottom: 6px; } #publicSite .hero-cap-main img { width: min(560px, 82vw); height: auto; display: block; filter: drop-shadow(0 24px 50px rgba(0,0,0,.6)); } #publicSite .hero-feats { margin-top: 22px; } /* Header dublji, veci logo i stavke */ :is(html.pk-site body, body.pub-mode) .site-header { height: var(--pub-hdr-h); } :is(html.pk-site body, body.pub-mode) .header-main { height: var(--pub-hdr-h); min-height: var(--pub-hdr-h); max-height: var(--pub-hdr-h); gap: 34px; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 84px !important; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(1) { font-size: 1.35rem; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(2) { font-size: .7rem; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(3) { font-size: 1.25rem; } :is(html.pk-site body, body.pub-mode) .header-nav .nav-link { padding: 10px 16px; font-size: 1.02rem; } :is(html.pk-site body, body.pub-mode) #headerPublic { gap: 10px; } :is(html.pk-site body, body.pub-mode) #headerPublic .header-contact-link { font-size: .92rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn { width: 38px; height: 38px; font-size: 1rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .btn-icon { width: 38px; height: 38px; font-size: 1.05rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { padding: 11px 20px; font-size: .98rem; border-radius: 12px; } /* Footer dublji, veci grb i tekst */ #publicSite .site-footer .ft-row { padding: 26px 20px; gap: 22px; } #publicSite .site-footer .ft-crest { width: 64px; } #publicSite .site-footer .ft-txt { font-size: .92rem; line-height: 1.5; } #publicSite .site-footer .ft-txt strong { font-size: 1.08rem; } #publicSite .site-footer .ft-soc a { width: 38px; height: 38px; font-size: 1rem; } #publicSite .site-footer .ft-links a { font-size: 1rem; padding: 9px 14px; } @media (max-width: 900px) { :root { --pub-hdr-h: 84px; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 60px !important; } :is(html.pk-site body, body.pub-mode) #publicNav.open { top: var(--pub-hdr-h); } } @media (max-width: 640px) { #publicSite .hero-cap-main img { width: 78vw; } #publicSite .site-footer .ft-row { padding: 14px 12px; } #publicSite .site-footer .ft-crest { width: 40px; } } @media (min-width: 901px) { #publicSite .site-footer .ft-row { flex-wrap: nowrap; max-width: 1320px; } #publicSite .site-footer .ft-links { white-space: nowrap; } } /* v4.1: footer bez linkova — sadrzaj centriran; mreze desno od teksta */ #publicSite .site-footer .ft-row { justify-content: center; } #publicSite .hero-bg .hero-center { padding-top: 10px; } /* v4.2: aduti nize; stavke izbornika kao gumbi sa zlatnim obrubom (kao znacka Osnovan) */ #publicSite .hero-feats { margin-top: 46px; } #publicSite .hero-row { padding-bottom: 18px; } :is(html.pk-site body, body.pub-mode) #publicNav > .nav-link, :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown > .nav-link { border: 1px solid rgba(232,168,56,.55); border-radius: 999px; padding: 8px 18px; color: var(--pub-navy); font-weight: 800; letter-spacing: .04em; background: transparent; } :is(html.pk-site body, body.pub-mode) #publicNav > .nav-link:hover, :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown > .nav-link:hover, :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown.open > .nav-link { background: var(--pub-gold-soft); border-color: var(--pub-gold); color: var(--pub-navy); } [data-theme="dark"] :is(html.pk-site body, body.pub-mode) #publicNav .nav-link { color: var(--pub-gold); } :is(html.pk-site body, body.pub-mode) #publicNav { gap: 8px; } @media (max-width: 768px) { :is(html.pk-site body, body.pub-mode) #publicNav.open .nav-link { border-radius: 12px; } } /* v4.3: pozadina = fotografija kapice na startnom bloku (mursa_pozadina2.jpg); kapica u prvom planu skrivena (vec je na slici) */ #publicSite .hero-bg { background: #050d1e url('mursa_pozadina2.jpg') center 40% / cover no-repeat !important; justify-content: flex-end; } #publicSite .hero-cap-main { display: none; } #publicSite .hero-row { padding-bottom: 26px; } #publicSite .hero-feats { margin-top: 26px; } #publicSite .hero-feat span { text-shadow: 0 2px 6px rgba(0,0,0,.7); } @media (max-width: 640px) { #publicSite .hero-bg { background: #050d1e url('mursa_pozadina2.jpg') 58% 35% / cover no-repeat !important; } #publicSite .hero-bg::after { display: none; } } /* v4.4: header i footer 30 % plici od v4 (120 -> 84 px) */ :root { --pub-hdr-h: 84px; --pub-ftr-h: 84px; } :is(html.pk-site body, body.pub-mode) .header-main { gap: 24px; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 60px !important; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(1) { font-size: 1.1rem; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(2) { font-size: .6rem; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(3) { font-size: 1.02rem; } :is(html.pk-site body, body.pub-mode) #publicNav > .nav-link, :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown > .nav-link { padding: 7px 15px; font-size: .92rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn, :is(html.pk-site body, body.pub-mode) #headerPublic .btn-icon { width: 32px; height: 32px; font-size: .9rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { padding: 9px 16px; font-size: .9rem; } #publicSite .site-footer .ft-row { padding: 18px 20px; gap: 16px; } #publicSite .site-footer .ft-crest { width: 46px; } #publicSite .site-footer .ft-txt { font-size: .84rem; } #publicSite .site-footer .ft-txt strong { font-size: .96rem; } #publicSite .site-footer .ft-soc a { width: 32px; height: 32px; font-size: .9rem; } @media (max-width: 900px) { :root { --pub-hdr-h: 64px; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 46px !important; } } /* v4.5: citljivost preko fotografije — bijeli gumb, aduti na tamnoj traci */ #publicSite .hero-bg .btn-hero-gold { background: #fff !important; color: var(--pub-navy) !important; box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 0 3px rgba(232,168,56,.55) !important; } #publicSite .hero-bg .btn-hero-gold:hover { background: var(--pub-gold) !important; color: var(--pub-navy-deep) !important; } #publicSite .hero-bg .hero-feats { background: rgba(5,13,30,.72); backdrop-filter: blur(6px); border: 1px solid rgba(232,168,56,.45); border-radius: 16px; padding: 12px 26px; gap: 34px; margin-top: 22px; display: inline-flex; } #publicSite .hero-bg .hero-feat i { color: #fff; font-size: 1.5rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); } #publicSite .hero-bg .hero-feat span { color: #fff; text-shadow: none; font-size: .8rem; } @media (max-width: 640px) { #publicSite .hero-bg .hero-feats { gap: 8px 0; padding: 10px 8px; width: 100%; } } /* v4.6: bez gumba Upisi se u heroju (ostaje gore desno) */ #publicSite .hero-bg .hero-feats { margin-top: 0; } /* v4.7: header malo visi (84 -> 96 px) */ :root { --pub-hdr-h: 96px; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 68px !important; } @media (max-width: 900px) { :root { --pub-hdr-h: 70px; } } /* Norme bez akordeona: tijelo odmah vidljivo, zaobljeno sa svih strana */ #publicSite #normeBody { display: block; border-radius: 14px; border-top: 1px solid var(--border); } /* ── Norme: tablica iz baze u klupskom stilu ─────────────────── */ #publicSite .norme-wrap { max-width: 1000px; margin: 0 auto; } #publicSite .norme-filters { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } #publicSite .norme-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); } #publicSite .norme-seg button { border: none; background: transparent; color: var(--text2); font-weight: 800; font-size: .86rem; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: var(--transition); font-family: var(--font); } #publicSite .norme-seg button.on { background: var(--pub-navy); color: #fff; } [data-theme="dark"] #publicSite .norme-seg button.on { background: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .norme-table-wrap { border-radius: 16px; box-shadow: var(--shadow); overflow: auto; } #publicSite .norme-table th { text-align: center; } #publicSite .norme-table th:first-child { text-align: left; } #publicSite .norme-table .norme-stroke td { background: var(--pub-gold-soft); color: #9A6A12; font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px; } [data-theme="dark"] #publicSite .norme-table .norme-stroke td { color: var(--pub-gold); } #publicSite .norme-table .norme-disc { font-weight: 700; white-space: nowrap; } #publicSite .norme-table .norme-time { font-family: var(--font-mono); font-size: .95rem; text-align: center; color: var(--pub-navy); font-weight: 500; } [data-theme="dark"] #publicSite .norme-table .norme-time { color: var(--pub-gold); } #publicSite .norme-table tbody tr:hover { background: var(--pub-navy-soft); } /* Footer: lijevo grb + naziv, desno mail + mreze */ #publicSite .site-footer .ft-row { justify-content: space-between; flex-wrap: nowrap; } #publicSite .site-footer .ft-txt { flex: 1 1 auto; } #publicSite .site-footer .ft-txt strong { font-size: 1.02rem; } #publicSite .site-footer .ft-right { display: flex; align-items: center; gap: 14px; margin-left: auto; } #publicSite .site-footer .ft-mail { font-weight: 700; color: var(--text2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #publicSite .site-footer .ft-mail i { color: var(--pub-gold-dk); } #publicSite .site-footer .ft-mail:hover { color: var(--pub-navy); } @media (max-width: 640px) { #publicSite .site-footer .ft-row { flex-wrap: wrap; } #publicSite .site-footer .ft-right { margin-left: 0; width: 100%; justify-content: space-between; } } /* ── Kontakt kartica ─────────────────────────────────────────── */ #publicSite .kontakt-card { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); background: var(--surface); } #publicSite .kontakt-left { background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); color: #fff; padding: 34px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 8px; } #publicSite .kontakt-left img { width: 120px; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); margin-bottom: 8px; } #publicSite .kontakt-name { font-weight: 900; font-size: 1.25rem; letter-spacing: -.01em; } #publicSite .kontakt-sub { color: var(--pub-gold); font-size: .86rem; font-weight: 700; } #publicSite .kontakt-soc { display: flex; gap: 10px; margin-top: 12px; } #publicSite .kontakt-soc a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; transition: var(--transition); } #publicSite .kontakt-soc a:hover { background: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .kontakt-grid { padding: 28px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-content: center; } #publicSite .kontakt-item { display: flex; gap: 14px; align-items: flex-start; } #publicSite .kontakt-item i { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--pub-gold-soft); color: var(--pub-gold-dk); font-size: 1rem; } #publicSite .kontakt-item span { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); } #publicSite .kontakt-item b { display: block; font-weight: 700; color: var(--text); font-size: .95rem; line-height: 1.4; } #publicSite .kontakt-item a { color: var(--pub-navy); } #publicSite .kontakt-item a:hover { color: var(--pub-gold-dk); } [data-theme="dark"] #publicSite .kontakt-item a { color: var(--pub-gold); } @media (max-width: 800px) { #publicSite .kontakt-card { grid-template-columns: 1fr; } #publicSite .kontakt-grid { grid-template-columns: 1fr; padding: 22px 18px; } } /* Kartica Natjecanja: brojka plivaca s normom */ #publicSite .feat-norm { display: flex; flex-direction: column; align-items: center; gap: 2px; } #publicSite .feat-norm-num { font-size: 2rem; font-weight: 900; color: var(--pub-gold-dk); line-height: 1; letter-spacing: -.03em; } [data-theme="dark"] #publicSite .feat-norm-num { color: var(--pub-gold); } #publicSite .feat-norm-lbl { font-size: .74rem; font-weight: 700; color: var(--text2); line-height: 1.35; } /* Footer: mail identican headeru (ista klasa .header-contact-link) */ #publicSite .site-footer .header-contact-link { font-size: .92rem; font-weight: 600; color: var(--text2); } #publicSite .site-footer .header-contact-link i { color: var(--accent); font-size: .8rem; } #publicSite .site-footer .header-contact-link:hover { background: var(--accent-soft); color: var(--accent); } /* ── Grupe i natjecatelji: 3x3 mreza + podnaslovi + Skola plivanja / Rekreativci ── */ #publicSite .grp-sub { max-width: 900px; margin: 0 auto 14px; display: flex; align-items: baseline; gap: 10px; font-weight: 900; font-size: 1.1rem; color: var(--text); } #publicSite .grp-sub i { color: var(--pub-gold-dk); } #publicSite .grp-sub small { font-weight: 600; font-size: .8rem; color: var(--text3); } #publicSite .grp-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #publicSite .grp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #publicSite .grp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; text-align: center; box-shadow: var(--shadow); } #publicSite .grp-ico { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pub-navy), var(--pub-navy-2)); color: var(--pub-gold); font-size: 1.3rem; } #publicSite .grp-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; } #publicSite .grp-desc { font-size: .84rem; color: var(--text2); line-height: 1.55; } @media (max-width: 720px) { #publicSite .grp-grid, #publicSite .grp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } @media (max-width: 420px) { #publicSite .grp-grid { grid-template-columns: 1fr; } } /* ── Gumbi izbornika: bijela podloga, tamnoplavi tekst, zlatni obrub; hover/aktivno = tamnoplavo sa zlatnim tekstom ── */ :is(html.pk-site body, body.pub-mode) #publicNav > .nav-link, :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown > .nav-link { background: #fff; color: var(--pub-navy); border: 1.5px solid var(--pub-gold); box-shadow: 0 1px 3px rgba(15,30,60,.08); } :is(html.pk-site body, body.pub-mode) #publicNav > .nav-link:hover, :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown > .nav-link:hover, :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown.open > .nav-link { background: var(--pub-navy); color: var(--pub-gold); border-color: var(--pub-navy); box-shadow: 0 4px 12px rgba(15,30,60,.3); } /* Tamna tema: tamnoplava podloga sa zlatnim obrubom; hover = zlatna podloga s tamnoplavim tekstom (jasno vidljivo) */ [data-theme="dark"] :is(html.pk-site body, body.pub-mode) #publicNav > .nav-link, [data-theme="dark"] :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown > .nav-link { background: var(--pub-navy); color: #fff; border-color: var(--pub-gold); } [data-theme="dark"] :is(html.pk-site body, body.pub-mode) #publicNav > .nav-link:hover, [data-theme="dark"] :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown > .nav-link:hover, [data-theme="dark"] :is(html.pk-site body, body.pub-mode) #publicNav .nav-dropdown.open > .nav-link { background: var(--pub-gold); color: var(--pub-navy-deep); border-color: var(--pub-gold); box-shadow: 0 4px 14px rgba(232,168,56,.35); } /* Padajuca lista u tamnoj temi: vidljiv hover */ [data-theme="dark"] :is(html.pk-site body, body.pub-mode) #publicNav .dropdown-item:hover { background: rgba(232,168,56,.18); color: var(--pub-gold); } /* Nas trener: dva stupca (3 + 2), zadnja stavka vise ne ide preko oba stupca */ #publicSite .coach-creed ul { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 10px 32px; } #publicSite .coach-creed li:last-child { grid-column: auto; } @media (max-width: 640px) { #publicSite .coach-creed ul { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } } #publicSite .coach-creed ul { align-items: start; grid-template-rows: none; } #publicSite .coach-creed li { align-self: start; } /* Nas trener — konacni raspored: dva stupca, eksplicitno 3 lijevo / 2 desno, sve uz vrh */ #publicSite .coach-creed ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; align-items: start; align-content: start; gap: 10px 32px; } #publicSite .coach-creed li:nth-child(4) { grid-column: 2; grid-row: 1; } #publicSite .coach-creed li:nth-child(5) { grid-column: 2; grid-row: 2; } @media (max-width: 640px) { #publicSite .coach-creed ul { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } #publicSite .coach-creed li:nth-child(4), #publicSite .coach-creed li:nth-child(5) { grid-column: auto; grid-row: auto; } } /* Nas trener — dva NEOVISNA stupca (CSS columns), pa visina jednog retka ne utjece na drugi stupac */ #publicSite .coach-creed ul { display: block; columns: 2; column-gap: 32px; } #publicSite .coach-creed li { break-inside: avoid; margin-bottom: 10px; display: flex; } #publicSite .coach-creed li:nth-child(4), #publicSite .coach-creed li:nth-child(5) { grid-column: auto; grid-row: auto; } #publicSite .coach-creed li:nth-child(3) { break-after: column; } @media (max-width: 640px) { #publicSite .coach-creed ul { columns: 1; } #publicSite .coach-creed li:nth-child(3) { break-after: auto; } } /* Footer: slogan u sredini, isti font i boja kao u headeru (Caveat, zlatna) */ #publicSite .site-footer .ft-txt { flex: 1 1 0; } #publicSite .site-footer .ft-slogan { flex: 1 1 0; text-align: center; font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 600; color: var(--gold); white-space: nowrap; } #publicSite .site-footer .ft-right { flex: 1 1 0; justify-content: flex-end; margin-left: 0; } @media (max-width: 640px) { #publicSite .site-footer .ft-slogan { width: 100%; flex: none; order: 3; } #publicSite .site-footer .ft-right { flex: none; } } /* ── Raspored treninga (javni tjedni prikaz) ─────────────────── */ #publicSite .rs-toolbar { max-width: 1100px; margin: 0 auto 16px; display: flex; justify-content: center; align-items: center; gap: 10px; } #publicSite .rs-toolbar button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--pub-navy); cursor: pointer; box-shadow: var(--shadow); font-size: .95rem; } #publicSite .rs-toolbar button:hover { background: var(--pub-gold); color: var(--pub-navy-deep); border-color: var(--pub-gold); } #publicSite .rs-toolbar select { font-family: var(--font); font-weight: 700; font-size: .92rem; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--pub-gold); background: var(--surface); color: var(--pub-navy); min-width: 260px; text-align: center; } [data-theme="dark"] #publicSite .rs-toolbar select, [data-theme="dark"] #publicSite .rs-toolbar button { color: var(--pub-gold); } #publicSite .rs-legend { max-width: 1100px; margin: 0 auto 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: .8rem; font-weight: 700; color: var(--text2); } #publicSite .rs-leg { display: inline-flex; align-items: center; gap: 6px; } #publicSite .rs-leg i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } #publicSite .rs-week { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } #publicSite .rs-day { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } #publicSite .rs-day.today { border-color: var(--pub-gold); box-shadow: 0 0 0 2px rgba(232,168,56,.35); } #publicSite .rs-day-h { background: var(--pub-navy); color: #fff; padding: 8px 10px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--pub-gold); } #publicSite .rs-day-h b { font-size: .82rem; } #publicSite .rs-day-h span { font-size: .72rem; opacity: .8; } #publicSite .rs-day.today .rs-day-h { background: var(--pub-gold); color: var(--pub-navy-deep); border-bottom-color: var(--pub-navy); } #publicSite .rs-day-b { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; } #publicSite .rs-slot { border-left: 4px solid; border-radius: 8px; padding: 7px 8px; } #publicSite .rs-time { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--text); } #publicSite .rs-name { font-size: .74rem; font-weight: 800; line-height: 1.25; margin-top: 2px; } #publicSite .rs-place { font-size: .68rem; color: var(--text3); margin-top: 2px; } #publicSite .rs-empty { font-size: .74rem; color: var(--text3); text-align: center; padding: 14px 0; } @media (max-width: 1000px) { #publicSite .rs-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { #publicSite .rs-week { grid-template-columns: 1fr 1fr; } #publicSite .rs-toolbar select { min-width: 0; flex: 1; } } /* ── Nase vrijednosti: sve na jednom ekranu (Zasto + Vizija/Misija + vrijednosti) ── */ #publicSite #about { padding-top: 34px; padding-bottom: 30px; } #publicSite #about .section-sub { margin-bottom: 18px; } #publicSite .nv-feats { max-width: 1180px; margin: 0 auto 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #publicSite .nv-feat { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); transition: var(--transition); } #publicSite .nv-feat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } #publicSite .nv-feat > i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pub-navy), var(--pub-navy-2)); color: var(--pub-gold); font-size: 1.05rem; } #publicSite .nv-feat b { display: block; font-size: .92rem; font-weight: 800; margin-bottom: 2px; } #publicSite .nv-feat span { font-size: .76rem; color: var(--text2); line-height: 1.45; } #publicSite .nv-feat em { font-style: normal; font-weight: 900; color: var(--pub-gold-dk); font-size: .95rem; } #publicSite .nv-vm { max-width: 1180px; margin: 0 auto 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #publicSite .nv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow); } #publicSite .nv-card .vm-eyebrow { margin-bottom: 8px; color: var(--pub-gold-dk); } #publicSite .nv-card p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text2); } #publicSite .nv-dark { background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); color: #fff; border-color: rgba(232,168,56,.35); } #publicSite .nv-dark .vm-eyebrow { color: var(--pub-gold); } #publicSite .nv-dark p { color: rgba(255,255,255,.9); } #publicSite .nv-vals { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } #publicSite .nv-val { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 12px; text-align: center; box-shadow: var(--shadow); position: relative; overflow: hidden; } #publicSite .nv-val::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pub-gold), var(--pub-gold-dk)); } #publicSite .nv-val i { display: block; font-size: 1.25rem; color: var(--pub-gold-dk); margin-bottom: 6px; } #publicSite .nv-val b { display: block; font-size: .88rem; font-weight: 800; margin-bottom: 3px; } #publicSite .nv-val span { font-size: .74rem; color: var(--text2); line-height: 1.4; } #publicSite .nv-slogan { text-align: center; margin-top: 14px; font-family: 'Caveat', cursive; font-size: 1.4rem; color: var(--pub-gold-dk); } #publicSite .nv-slogan b { font-weight: 700; color: var(--pub-navy); } [data-theme="dark"] #publicSite .nv-slogan b { color: var(--pub-gold); } @media (max-width: 1000px) { #publicSite .nv-feats { grid-template-columns: 1fr 1fr; } #publicSite .nv-vals { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { #publicSite .nv-feats, #publicSite .nv-vm, #publicSite .nv-vals { grid-template-columns: 1fr; } } /* Logo u headeru = kapica s login forme (elipticni rez kao na loginu) */ :is(html.pk-site body, body.pub-mode) .header-brand img { border-radius: 48% 48% 8px 8px / 62% 62% 8px 8px !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)) !important; } /* Zahtjev za clanstvo: naslovi grupa */ .upis-grp { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-gold-dk, #CD8C24); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } /* Datum rodenja u zahtjevu: ikona kalendara uz polje */ #upisModal input[type="date"] { width: 220px; padding-right: 10px; } #upisModal input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 4px; cursor: pointer; opacity: .8; } /* ── Aduti okomito uz lijevi rub prvog ekrana ─────────────────── */ #publicSite .hero-bg .hero-feats { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 18px; width: auto; } #publicSite .hero-bg .hero-feat { flex-direction: row; align-items: center; gap: 12px; width: auto; } #publicSite .hero-bg .hero-feat i { font-size: 1.25rem; width: 28px; text-align: center; } #publicSite .hero-bg .hero-feat span { font-size: .82rem; text-align: left; } #publicSite .hero-bg .hero-row { padding-bottom: 0; } @media (max-width: 900px) { #publicSite .hero-bg .hero-feats { position: static; transform: none; margin: 0 auto 14px; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; gap: 8px 0; padding: 10px 8px; } #publicSite .hero-bg .hero-feat { flex-direction: column; gap: 4px; width: 46%; } #publicSite .hero-bg .hero-feat i { width: auto; } #publicSite .hero-bg .hero-feat span { text-align: center; } } /* aduti: sidro na hero (ne na hero-row), sredina visine prvog ekrana */ #publicSite .hero-bg { position: relative; } #publicSite .hero-bg .hero-row, #publicSite .hero-bg .hero-center { position: static; } #publicSite .hero-bg .hero-feats { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 2; } @media (max-width: 900px) { #publicSite .hero-bg .hero-feats { position: static; transform: none; } } /* ── Aduti: prozirna traka uz dno fotografije (bez kutije) ───── */ #publicSite .hero-bg .hero-feats { position: absolute; left: 0; right: 0; bottom: 0; top: auto; transform: none; z-index: 2; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0; width: 100%; margin: 0; padding: 44px 20px 22px; border: none; border-radius: 0; backdrop-filter: none; background: linear-gradient(180deg, rgba(5,13,30,0) 0%, rgba(5,13,30,.78) 55%, rgba(5,13,30,.92) 100%); } #publicSite .hero-bg .hero-feat { flex-direction: row; align-items: center; gap: 10px; padding: 0 28px; width: auto; cursor: default; } #publicSite .hero-bg .hero-feat + .hero-feat { border-left: 1px solid rgba(232,168,56,.35); } #publicSite .hero-bg .hero-feat i { font-size: 1.35rem; width: auto; color: var(--pub-gold); filter: none; } #publicSite .hero-bg .hero-feat span { font-size: .86rem; font-weight: 800; color: #fff; letter-spacing: .02em; } @media (max-width: 900px) { #publicSite .hero-bg .hero-feats { position: absolute; flex-wrap: wrap; gap: 8px 0; padding: 36px 8px 14px; } #publicSite .hero-bg .hero-feat { width: 50%; justify-content: center; padding: 4px 6px; flex-direction: column; gap: 4px; } #publicSite .hero-bg .hero-feat + .hero-feat { border-left: none; } #publicSite .hero-bg .hero-feat span { font-size: .74rem; text-align: center; } } /* ── Sekcije (sve sto se klikne u headeru) na zatamnjenoj fotografiji ── */ #publicSite.pub-sec > section.on { background: #050d1e url('mursa_bg_sekcije.jpg') center / cover no-repeat fixed; --bg: transparent; --surface: rgba(12,24,48,.86); --surface1: rgba(12,24,48,.86); --surface2: rgba(20,38,71,.9); --bg2: rgba(20,38,71,.9); --border: rgba(255,255,255,.14); --border2: rgba(255,255,255,.28); --text: #eef2fb; --text1: #eef2fb; --text2: #c3cde0; --text3: #93a3c2; --accent: #9db6e6; --accent2: #b9c9ec; --accent-soft: rgba(157,182,230,.16); --accent2-soft: rgba(185,201,236,.14); --pub-navy-soft: rgba(232,168,56,.14); --pub-gold-dk: #E8A838; --shadow: 0 1px 4px rgba(0,0,0,.35); --shadow-md: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 12px 40px rgba(0,0,0,.55); } #publicSite.pub-sec > section.on.section-alt { background-color: transparent; } #publicSite.pub-sec > section.on .section-title { color: #fff; } #publicSite.pub-sec > section.on .section-title span { color: var(--pub-gold) !important; } /* elementi koji koriste navy kao boju teksta → zlatna / svijetla */ #publicSite.pub-sec > section.on :is(.norme-time, .rs-time, .grp-sub, .nv-slogan b, .news-nav, .rs-toolbar button, .rs-toolbar select, .kontakt-item a, .id-quote, .tbl td.t) { color: var(--pub-gold); } #publicSite.pub-sec > section.on .rs-toolbar select { background: rgba(12,24,48,.86); } #publicSite.pub-sec > section.on .norme-seg button.on { background: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite.pub-sec > section.on .news-nav { background: rgba(12,24,48,.9); } #publicSite.pub-sec > section.on .news-meta .pill-gold, #publicSite.pub-sec > section.on .norme-table .norme-stroke td { color: var(--pub-gold); } #publicSite.pub-sec > section.on .cal-badge-nat { color: var(--pub-gold); } #publicSite.pub-sec > section.on .nv-card:not(.nv-dark) p, #publicSite.pub-sec > section.on .vm-misija li { color: var(--text2); } #publicSite.pub-sec > section.on .nv-feat b, #publicSite.pub-sec > section.on .nv-val b, #publicSite.pub-sec > section.on .grp-name, #publicSite.pub-sec > section.on .kontakt-item b { color: #fff; } #publicSite.pub-sec > section.on .nv-val i, #publicSite.pub-sec > section.on .nv-feat em { color: var(--pub-gold); } #publicSite.pub-sec > section.on .norme-table th { color: rgba(255,255,255,.85); } #publicSite.pub-sec > section.on .cal-table tbody tr:hover { background: rgba(232,168,56,.10); } /* kategorije natjecatelja imaju svoje svijetle boje — ostaju, ali s tamnim tekstom kako je i bilo */ @media (max-width: 900px) { #publicSite.pub-sec > section.on { background-attachment: scroll; } } /* citljivost na tamnoj pozadini sekcija: imena trenera, imena dana u rasporedu, kartice kategorija */ #publicSite.pub-sec > section.on .coach-card > div[style*="font-weight:800"] { color: #fff !important; } #publicSite.pub-sec > section.on .rs-day-h b, #publicSite.pub-sec > section.on .rs-day-h span { color: #fff; } #publicSite.pub-sec > section.on .rs-day.today .rs-day-h b, #publicSite.pub-sec > section.on .rs-day.today .rs-day-h span { color: var(--pub-navy-deep); } #publicSite.pub-sec > section.on .rs-empty, #publicSite.pub-sec > section.on .rs-place { color: var(--text3); } #publicSite.pub-sec > section.on .rs-time { color: #fff; } #publicSite.pub-sec > section.on .rs-slot { background: rgba(255,255,255,.06) !important; } #publicSite.pub-sec > section.on .norme-table td { color: var(--text); } #publicSite.pub-sec > section.on .news-body h3 { color: #fff; } #publicSite.pub-sec > section.on .coach-creed li, #publicSite.pub-sec > section.on .nv-dark p { color: #fff; } /* ── MOBILE polish (2026-09-14) ─────────────────────────────── */ @media (max-width: 640px) { /* footer: grb+naziv / slogan / mail+mreze — sve centrirano i kompaktno */ #publicSite .site-footer .ft-row { flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 12px; flex-wrap: nowrap; } #publicSite .site-footer .ft-crest { width: 34px; } #publicSite .site-footer .ft-txt { flex: none; text-align: center; } #publicSite .site-footer .ft-txt strong { font-size: .92rem; } #publicSite .site-footer .ft-slogan { order: 0; width: auto; font-size: 1.25rem; line-height: 1.1; } #publicSite .site-footer .ft-right { order: 0; width: auto; justify-content: center; gap: 10px; } #publicSite .site-footer .header-contact-link span { display: inline; font-size: .82rem; } #publicSite .site-footer .ft-soc a { width: 30px; height: 30px; } /* kategorije natjecatelja: dva stupca i na uskim ekranima */ #publicSite .grp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #publicSite #kategorijePillsBody button { padding: 14px 10px !important; } #publicSite #kategorijePillsBody button > div:first-child { font-size: .95rem !important; } #publicSite .grp-card { padding: 16px 12px; } #publicSite .grp-desc { font-size: .78rem; } /* hero aduti: manji razmak da slika dobije prostor */ #publicSite .hero-bg .hero-feats { padding: 28px 8px 12px; } #publicSite .hero-bg .hero-feat { padding: 2px 6px; } /* naslovi sekcija */ #publicSite .section-title { font-size: 1.5rem; } /* kontakt kartica: manji grb */ #publicSite .kontakt-left img { width: 90px; } #publicSite .kontakt-left { padding: 22px 16px; } /* novosti: strelice manje i unutar slike */ #publicSite .news-nav { width: 34px; height: 34px; top: 110px; } } /* ── Modali na javnoj stranici: plitko zaglavlje (ikona + naslov u jednom redu) ── */ body.pub-mode .modal-top { padding: 12px 52px 12px 16px; display: flex; align-items: center; gap: 12px; } body.pub-mode .modal-top-logo { width: 34px; height: 34px; font-size: .95rem; margin: 0; flex-shrink: 0; border-radius: 9px; } body.pub-mode .modal-top h2 { font-size: 1.02rem; margin: 0; line-height: 1.2; } body.pub-mode .modal-top p { font-size: .76rem; margin: 1px 0 0; } body.pub-mode .modal-close { top: 10px; right: 10px; width: 28px; height: 28px; } /* ── Rezultati s natjecanja ──────────────────────────────────── */ #publicSite .rez-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } #publicSite .rez-tabs button { border: 1.5px solid var(--pub-gold); background: transparent; color: var(--text); font-family: var(--font); font-weight: 800; font-size: .84rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; } #publicSite .rez-tabs button.on { background: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .rez-head { max-width: 1180px; margin: 0 auto 18px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); color: #fff; border: 1px solid rgba(232,168,56,.4); border-radius: 20px; padding: 22px 26px; box-shadow: var(--shadow-md); } #publicSite .rez-eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pub-gold); margin-bottom: 6px; } #publicSite .rez-head h3 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: #fff; } #publicSite .rez-meta { font-size: .86rem; color: rgba(255,255,255,.8); } #publicSite .rez-meta i { color: var(--pub-gold); } #publicSite .rez-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: .86rem; align-content: center; } #publicSite .rez-hl li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; } #publicSite .rez-hl li span { font-size: 1rem; flex-shrink: 0; } #publicSite .rez-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; } #publicSite .rez-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); } #publicSite .rez-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--pub-gold); } #publicSite .rez-name b { font-size: 1rem; font-weight: 900; color: var(--text); } #publicSite .rez-name span { font-size: .72rem; color: var(--text3); font-weight: 700; white-space: nowrap; } #publicSite .rez-card table { width: 100%; border-collapse: collapse; font-size: .84rem; } #publicSite .rez-card td { padding: 5px 2px; border-bottom: 1px solid var(--border); vertical-align: middle; } #publicSite .rez-card tr:last-child td { border-bottom: 0; } #publicSite .rez-card td.d { color: var(--text2); font-weight: 600; } #publicSite .rez-card td.t { font-family: var(--font-mono); font-weight: 700; color: var(--pub-navy); text-align: right; white-space: nowrap; } #publicSite .rez-card td.pl { text-align: right; color: var(--text3); font-weight: 700; white-space: nowrap; font-size: .78rem; } #publicSite .rez-card td.b { text-align: right; font-weight: 900; color: var(--pub-gold-dk); white-space: nowrap; } #publicSite .rez-card td.b small { font-weight: 600; color: var(--text3); margin-left: 3px; font-size: .68rem; } #publicSite .rez-card tr.best td.t, [data-theme="dark"] #publicSite .rez-card td.t { color: var(--pub-gold-dk); } #publicSite.pub-sec > section.on .rez-card td.t, #publicSite.pub-sec > section.on .rez-card td.b { color: var(--pub-gold); } @media (max-width: 800px) { #publicSite .rez-head { grid-template-columns: 1fr; } #publicSite .rez-hl { grid-template-columns: 1fr; } } /* ── Novosti: mreza 2x2 + modal ──────────────────────────────── */ #publicSite .news-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #publicSite .news-grid .news-item { grid-template-columns: 1fr; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } #publicSite .news-grid .news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } #publicSite .news-grid .news-img { aspect-ratio: 16 / 9; overflow: hidden; } #publicSite .news-grid .news-img img { width: 100%; height: 100%; object-fit: cover; } #publicSite .news-grid .news-body { padding: 16px 18px 18px; } #publicSite .news-grid .news-body h3 { font-size: 1.08rem; margin-bottom: 8px; } #publicSite .news-grid .news-body p { display: none; font-size: .86rem; } #publicSite .news-grid .news-body p:first-of-type { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } #publicSite .news-grid .news-body::after { content: "Pročitaj više →"; display: block; margin-top: 10px; font-size: .78rem; font-weight: 800; color: var(--pub-gold-dk); } #publicSite.pub-sec > section.on .news-grid .news-body::after { color: var(--pub-gold); } #newsModal .modal { max-width: 760px; } #newsModal .modal-body { padding: 0 0 20px; } #newsModal img { width: 100%; max-height: 420px; object-fit: cover; display: block; } #newsModal .news-body { padding: 18px 24px 0; } #newsModal .news-body h3 { font-size: 1.3rem; font-weight: 900; margin: 6px 0 12px; } #newsModal .news-body p { margin: 0 0 10px; line-height: 1.65; color: var(--text2); } #newsModal .news-meta { display: flex; gap: 10px; align-items: center; } #newsModal .pill-gold { background: var(--pub-gold-soft); color: #9A6A12; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; } #newsModal .news-date { font-size: .78rem; color: var(--text3); font-weight: 700; } @media (max-width: 640px) { #publicSite .news-grid { grid-template-columns: 1fr; } } /* ── Foto i video ────────────────────────────────────────────── */ #publicSite .media-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } #publicSite .media-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform .18s ease, box-shadow .18s ease; } #publicSite .media-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } #publicSite .media-ico { width: 100%; aspect-ratio: 16/9; border-radius: 12px; background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); color: var(--pub-gold); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; } #publicSite .media-ph { width: 100%; aspect-ratio: 16/9; border-radius: 12px; background-size: cover; background-position: center; border: 1px solid var(--border); } #publicSite .media-ph-tall { background-position: center 30%; } #publicSite .media-ph-logo { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pub-navy-deep), var(--pub-navy-2)); } #publicSite .media-ph-logo img { height: 70%; width: auto; } #publicSite .media-card b { font-size: .98rem; font-weight: 900; margin-top: 4px; } #publicSite .media-card span { font-size: .8rem; color: var(--text2); line-height: 1.45; } #publicSite .media-card em { font-style: normal; font-size: .8rem; font-weight: 800; color: var(--pub-gold-dk); margin-top: auto; padding-top: 6px; } #publicSite.pub-sec > section.on .media-card em { color: var(--pub-gold); } #publicSite .media-note { max-width: 1180px; margin: 16px auto 0; font-size: .82rem; color: var(--text2); text-align: center; } #publicSite .media-note a { color: var(--pub-gold-dk); font-weight: 700; } @media (max-width: 900px) { #publicSite .media-grid { grid-template-columns: 1fr 1fr; } } /* ── Iduce natjecanje na naslovnici ──────────────────────────── */ /* ── Iduca natjecanja (lijevo na naslovnici) ─────────────────── */ #publicSite .hero-next { position: absolute; left: max(24px, calc(50% - 640px)); top: 50%; transform: translateY(-50%); z-index: 3; width: min(330px, 34vw); color: #fff; text-align: left; background: linear-gradient(135deg, rgba(5,13,30,.78), rgba(10,23,48,.62)); backdrop-filter: blur(8px); border: 1px solid rgba(232,168,56,.45); border-radius: 18px; padding: 18px 20px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.45); } #publicSite .hero-next .hn-lbl { color: var(--pub-gold); font-weight: 800; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } #publicSite .hero-next .hn-name { font-size: 1.45rem; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; } #publicSite .hero-next .hn-meta { color: rgba(255,255,255,.82); font-size: .84rem; margin-top: 5px; } #publicSite .hero-next .hn-doc { border: none; background: var(--pub-gold); color: var(--pub-navy-deep); font-family: var(--font); font-weight: 800; font-size: .78rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; } #publicSite .hero-next .hn-doc:hover { background: #fff; } #publicSite .hero-next .hn-next { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 8px; } #publicSite .hero-next .hn-next-lbl { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); } #publicSite .hero-next .hn-next-row b { display: block; font-size: .88rem; font-weight: 700; line-height: 1.25; } #publicSite .hero-next .hn-next-row span { display: block; font-size: .74rem; color: rgba(255,255,255,.65); margin-top: 1px; } #publicSite .hero-next .hn-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .78rem; font-weight: 800; color: var(--pub-gold); cursor: pointer; } #publicSite .hero-next .hn-all:hover { color: #fff; } @media (max-width: 1100px) { #publicSite .hero-next { width: 290px; padding: 14px 16px; } #publicSite .hero-next .hn-name { font-size: 1.2rem; } } @media (max-width: 900px) { #publicSite .hero-next { position: static; transform: none; width: auto; max-width: 560px; margin: 0 auto 14px; border-radius: 16px; } } /* 5 aduta */ #publicSite .hero-bg .hero-feat { padding: 0 18px; } #publicSite .hero-bg .hero-feat span { font-size: .8rem; } #publicSite .cal-doc-btn { border: 1px solid var(--pub-gold); background: transparent; color: var(--pub-gold-dk); font-family: var(--font); font-weight: 800; font-size: .74rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; } #publicSite .cal-doc-btn:hover { background: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite.pub-sec > section.on .cal-doc-btn { color: var(--pub-gold); } /* Mobitel: kartica idućih natjecanja u toku, aduti ispod nje (bez preklapanja) */ @media (max-width: 900px) { #publicSite .hero-bg { height: auto; min-height: calc(100svh - var(--pub-hdr-h) - var(--pub-ftr-h)); justify-content: flex-start; padding-top: 16px; } #publicSite .hero-bg .hero-feats { position: static; transform: none; margin-top: auto; background: linear-gradient(180deg, rgba(5,13,30,0) 0%, rgba(5,13,30,.78) 45%, rgba(5,13,30,.92) 100%); } #publicSite .hero-next { margin: 0 auto 18px; } } /* Mobitel: samo iduće natjecanje (popis "Slijedi" ide u kalendar) */ @media (max-width: 640px) { #publicSite .hero-next .hn-next { display: none; } #publicSite .hero-next { padding: 14px 16px 12px; } #publicSite .hero-next .hn-name { font-size: 1.15rem; } #publicSite .hero-next .hn-all { margin-top: 12px; } } /* Desktop: kartica poravnata desnim rubom uz početak kapice (kapica počinje na ~40 % širine) */ @media (min-width: 901px) { #publicSite .hero-next { left: max(24px, calc(40% - 350px)); } } /* ── Mobilni prvi ekran (2026-09-16): kartica gore, aduti kao popis uz dno ── */ @media (max-width: 900px) { #publicSite .hero-bg { justify-content: space-between; padding-top: 14px; } #publicSite .hero-next { margin: 0 auto; } #publicSite .hero-bg .hero-row { margin-top: auto; width: 100%; } } @media (max-width: 640px) { #publicSite .hero-bg .hero-feats { flex-direction: column; align-items: flex-start; gap: 7px; width: 100%; padding: 34px 20px 14px; flex-wrap: nowrap; } #publicSite .hero-bg .hero-feat { flex-direction: row; align-items: center; gap: 11px; width: 100%; padding: 0; } #publicSite .hero-bg .hero-feat + .hero-feat { border-left: none; } #publicSite .hero-bg .hero-feat i { width: 22px; font-size: 1.05rem; text-align: center; flex-shrink: 0; } #publicSite .hero-bg .hero-feat span { font-size: .82rem; text-align: left; } #publicSite .hero-next { width: 100%; max-width: none; } } @media (max-width: 640px) { #publicSite .hero-next { width: auto; margin: 0 14px; } #publicSite .hero-bg .hero-feats { align-items: center; } #publicSite .hero-bg .hero-feat { justify-content: flex-start; width: 100%; max-width: 300px; } } /* ── Propozicije: isti izgled i ponašanje u kalendaru i na naslovnici ── */ #publicSite .cal-doc-btn, #publicSite.pub-sec > section.on .cal-doc-btn { background: transparent; border: 1.5px solid rgba(255,255,255,.65); color: #fff; transition: background .18s ease, color .18s ease, border-color .18s ease; } #publicSite .cal-doc-btn:hover, #publicSite .cal-doc-btn:focus-visible, #publicSite .cal-doc-btn:active, #publicSite.pub-sec > section.on .cal-doc-btn:hover, #publicSite.pub-sec > section.on .cal-doc-btn:focus-visible, #publicSite.pub-sec > section.on .cal-doc-btn:active { background: #fff; color: var(--pub-navy-deep); border-color: #fff; } #publicSite .hero-next .hn-doc { transition: background .18s ease, color .18s ease; } /* ── Foto i video: video + grb gore, galerija wallpapera ─────── */ #publicSite .media-top { max-width: 1180px; margin: 0 auto 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #publicSite .wp-head { max-width: 1180px; margin: 0 auto 14px; display: flex; align-items: baseline; gap: 10px; font-weight: 900; font-size: 1.1rem; color: var(--text); } #publicSite .wp-head i { color: var(--pub-gold-dk); } #publicSite .wp-head small { font-weight: 600; font-size: .8rem; color: var(--text3); } #publicSite .wp-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } #publicSite .wp-card { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } #publicSite .wp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } #publicSite .wp-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } #publicSite .wp-card figcaption { padding: 10px 14px 0; font-weight: 800; font-size: .92rem; color: var(--text); } #publicSite .wp-dl { display: flex; gap: 8px; padding: 10px 14px 14px; margin-top: auto; } #publicSite .wp-dl a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 999px; border: 1.5px solid var(--border2); color: var(--text2); font-size: .78rem; font-weight: 800; text-decoration: none; transition: var(--transition); } #publicSite .wp-dl a:hover { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite.pub-sec > section.on .wp-head { color: #fff; } #publicSite.pub-sec > section.on .wp-head i { color: var(--pub-gold); } #publicSite.pub-sec > section.on .wp-card figcaption { color: #fff; } #publicSite.pub-sec > section.on .wp-dl a { border-color: rgba(255,255,255,.35); color: #fff; } #publicSite.pub-sec > section.on .wp-dl a:hover { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); } @media (max-width: 640px) { #publicSite .media-top { grid-template-columns: 1fr; } #publicSite .wp-grid { grid-template-columns: 1fr 1fr; gap: 10px; } #publicSite .wp-dl { flex-direction: column; } } #publicSite .media-top .media-ico, #publicSite .media-top .media-ph { aspect-ratio: auto; height: 150px; } #publicSite .media-top .media-ico { font-size: 1.9rem; } /* ── Footer: suradnja (logotipi institucija) ─────────────────── */ #publicSite .site-footer .ft-partners { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; } #publicSite .site-footer .ft-part-lbl { font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); white-space: nowrap; } #publicSite .site-footer .ft-logos { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; } #publicSite .site-footer .ft-logo { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 4px 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; transition: var(--transition); } #publicSite .site-footer .ft-logo:hover { border-color: var(--pub-gold); transform: translateY(-1px); } #publicSite .site-footer .ft-logo img { max-height: 28px; width: auto; max-width: 74px; object-fit: contain; display: block; } @media (max-width: 900px) { #publicSite .site-footer .ft-partners { order: 3; width: 100%; flex: none; flex-direction: column; gap: 8px; } } @media (max-width: 640px) { #publicSite .site-footer .ft-logo { height: 34px; padding: 3px 6px; } #publicSite .site-footer .ft-logo img { max-height: 24px; max-width: 62px; } } /* Suradnja u vlastitom redu ispod naziva i kontakta */ #publicSite .site-footer .ft-row { flex-wrap: wrap; row-gap: 10px; } #publicSite .site-footer .ft-txt strong { white-space: nowrap; } #publicSite .site-footer .ft-partners { order: 3; width: 100%; flex: none; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; } /* Suradnja: logotipi bez bijelih pločica */ #publicSite .site-footer .ft-logo { background: none; border: none; padding: 0 6px; height: auto; } #publicSite .site-footer .ft-logo:hover { transform: translateY(-2px); border: none; } #publicSite .site-footer .ft-logo img { max-height: 34px; max-width: 96px; } #publicSite .site-footer .ft-logos { gap: 16px 22px; } /* u tamnoj temi cijeli red dobiva svijetlu podlogu da logotipi ostanu citljivi */ [data-theme="dark"] #publicSite .site-footer .ft-logos { background: rgba(255,255,255,.92); border-radius: 12px; padding: 8px 14px; } @media (max-width: 640px) { #publicSite .site-footer .ft-logo img { max-height: 28px; max-width: 78px; } #publicSite .site-footer .ft-logos { gap: 12px 16px; } } /* Natpis iznad logotipa, logotipi u jednom redu */ #publicSite .site-footer .ft-partners { flex-direction: column; gap: 10px; } #publicSite .site-footer .ft-logos { gap: 14px 26px; width: 100%; } /* ── Suradnja: u istom redu kao naziv kluba, bez podloge ─────── */ #publicSite .site-footer .ft-row { flex-wrap: nowrap; } #publicSite .site-footer .ft-partners { order: 0; width: auto; flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: center; gap: 12px; border-top: none; padding-top: 0; margin-top: 0; min-width: 0; } #publicSite .site-footer .ft-logos { flex-wrap: nowrap; gap: 12px; width: auto; background: none; padding: 0; border-radius: 0; } #publicSite .site-footer .ft-logo { padding: 0; } #publicSite .site-footer .ft-logo img { max-height: 26px; max-width: 64px; } /* tamna tema: bijele siluete umjesto svijetle podloge */ [data-theme="dark"] #publicSite .site-footer .ft-logos { background: none; padding: 0; } [data-theme="dark"] #publicSite .site-footer .ft-logo img { filter: brightness(0) invert(1); opacity: .88; } [data-theme="dark"] #publicSite .site-footer .ft-logo:hover img { opacity: 1; } @media (max-width: 1200px) { #publicSite .site-footer .ft-logo img { max-height: 22px; max-width: 54px; } #publicSite .site-footer .ft-logos { gap: 9px; } } @media (max-width: 900px) { #publicSite .site-footer .ft-row { flex-wrap: wrap; } #publicSite .site-footer .ft-partners { order: 3; width: 100%; flex: none; flex-direction: column; gap: 8px; } #publicSite .site-footer .ft-logos { flex-wrap: wrap; justify-content: center; } } /* Ispravak: red se smije prelomiti, logotipi manji da stanu uz naziv kluba */ #publicSite .site-footer .ft-row { flex-wrap: wrap; } #publicSite .site-footer .ft-partners { flex: 1 1 520px; min-width: 0; } #publicSite .site-footer .ft-logos { flex-wrap: wrap; gap: 10px 12px; } #publicSite .site-footer .ft-logo img { max-height: 22px; max-width: 50px; } @media (max-width: 1200px) { #publicSite .site-footer .ft-logo img { max-height: 20px; max-width: 44px; } } /* Logotipi u jednom redu uz naziv kluba */ #publicSite .site-footer .ft-partners { flex: 1 1 700px; } #publicSite .site-footer .ft-logos { gap: 10px; } #publicSite .site-footer .ft-logo img { max-height: 24px; max-width: 46px; } #publicSite .site-footer .ft-txt { flex: 0 0 auto; } #publicSite .site-footer .ft-right { flex: 0 0 auto; } /* ── Footer: karusel logotipa, isti prikaz u obje teme ───────── */ #publicSite .site-footer .ft-partners { flex: 1 1 560px; flex-direction: column; gap: 6px; align-items: center; } #publicSite .site-footer .ft-car { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; } #publicSite .site-footer .ft-car-view { flex: 1; overflow: hidden; } #publicSite .site-footer .ft-logos { display: flex; flex-wrap: nowrap; gap: 0; width: 100%; background: none; padding: 0; transition: transform .35s ease; } #publicSite .site-footer .ft-logo { flex: 0 0 25%; display: flex; align-items: center; justify-content: center; padding: 0 8px; background: none; border: none; height: 42px; } #publicSite .site-footer .ft-logo img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; filter: none !important; opacity: 1 !important; } #publicSite .site-footer .ft-car-nav { width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--border2); background: transparent; color: var(--text2); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .7rem; transition: var(--transition); } #publicSite .site-footer .ft-car-nav:hover { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .site-footer .ft-dots { display: flex; gap: 6px; justify-content: center; } #publicSite .site-footer .ft-dots button { width: 6px; height: 6px; border-radius: 50%; border: none; background: var(--border2); padding: 0; cursor: pointer; transition: var(--transition); } #publicSite .site-footer .ft-dots button.on { background: var(--pub-gold); width: 16px; border-radius: 999px; } /* logotipi su citljivi u obje teme: uvijek puna boja na svijetloj podlozi trake */ [data-theme="dark"] #publicSite .site-footer .ft-car-view { background: rgba(255,255,255,.96); border-radius: 10px; } @media (max-width: 900px) { #publicSite .site-footer .ft-partners { order: 3; width: 100%; flex: none; } #publicSite .site-footer .ft-logo { flex-basis: 33.333%; } } @media (max-width: 640px) { #publicSite .site-footer .ft-logo { flex-basis: 50%; height: 38px; } #publicSite .site-footer .ft-logo img { max-height: 26px; } } /* Traka kreće od prvog logotipa (centriranje je rezalo prva tri) */ #publicSite .site-footer .ft-logos { justify-content: flex-start; } /* Isti prikaz u obje teme: puna boja, bez podloge */ [data-theme="dark"] #publicSite .site-footer .ft-car-view { background: none; border-radius: 0; } /* ── Footer bez maila i mreza: svi logotipi u jednom redu ────── */ #publicSite .site-footer .ft-partners { flex: 1 1 auto; } #publicSite .site-footer .ft-car { max-width: none; } #publicSite .site-footer .ft-logo { flex-basis: 10%; padding: 0 6px; } #publicSite .site-footer .ft-logo img { max-height: 28px; max-width: 100%; } @media (max-width: 1200px) { #publicSite .site-footer .ft-logo { flex-basis: 20%; } } @media (max-width: 900px) { #publicSite .site-footer .ft-logo { flex-basis: 33.333%; } } @media (max-width: 640px) { #publicSite .site-footer .ft-logo { flex-basis: 50%; } } /* Prvi red: grb i naziv lijevo; logotipi u vlastitom redu ispod */ #publicSite .site-footer .ft-row { justify-content: flex-start; gap: 12px; } #publicSite .site-footer .ft-partners { flex: 1 1 100%; width: 100%; } /* ── Footer: sve u jednom redu, zbijeniji logotipi ───────────── */ @media (min-width: 901px) { #publicSite .site-footer .ft-row { flex-wrap: nowrap; justify-content: flex-start; gap: 14px; } #publicSite .site-footer .ft-partners { flex: 1 1 auto; width: auto; flex-direction: row; align-items: center; gap: 10px; min-width: 0; } #publicSite .site-footer .ft-car { flex: 1; min-width: 0; max-width: none; } #publicSite .site-footer .ft-logo { padding: 0 3px; } #publicSite .site-footer .ft-logo img { max-height: 26px; } } /* Tamna tema: zlatna kartica ispod logotipa radi vidljivosti */ [data-theme="dark"] #publicSite .site-footer .ft-car-view { background: var(--pub-gold); border-radius: 12px; padding: 5px 10px; } [data-theme="dark"] #publicSite .site-footer .ft-part-lbl { color: var(--pub-gold); } /* ── Footer: natpis iznad, plića traka, blaža zlatna ─────────── */ @media (min-width: 901px) { #publicSite .site-footer .ft-partners { flex-direction: column; align-items: center; gap: 4px; } #publicSite .site-footer .ft-car { width: 100%; } } #publicSite .site-footer .ft-logo { height: 32px; } #publicSite .site-footer .ft-logo img { max-height: 22px; } [data-theme="dark"] #publicSite .site-footer .ft-car-view { background: #C08F39; border-radius: 10px; padding: 3px 10px; } [data-theme="dark"] #publicSite .site-footer .ft-part-lbl { color: #D9A94F; } /* Tamna tema: svijetla krem pločica sa zlatnim obrubom (logotipi čitljivi, ton kluba) */ [data-theme="dark"] #publicSite .site-footer .ft-car-view { background: rgba(255,251,243,.93); border: 1px solid rgba(232,168,56,.55); box-shadow: 0 0 0 3px rgba(232,168,56,.12); border-radius: 12px; padding: 3px 10px; } /* Grb i naziv poravnati s vertikalnom sredinom pločice (natpis Suradnja je iznad nje) */ @media (min-width: 901px) { #publicSite .site-footer .ft-crest, #publicSite .site-footer .ft-txt { margin-top: 18px; } } /* ── Traka suradnje ispod headera (svi logotipi odjednom) ────── */ #publicSite .pub-strip { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 7px 18px; background: rgba(255,251,243,.95); border-bottom: 1px solid rgba(232,168,56,.5); box-shadow: 0 2px 10px rgba(15,30,60,.08); } #publicSite .ps-lbl { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #9A6A12; white-space: nowrap; } #publicSite .ps-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 20px; } #publicSite .ps-logo { display: inline-flex; align-items: center; justify-content: center; height: 30px; opacity: .92; transition: var(--transition); } #publicSite .ps-logo:hover { opacity: 1; transform: translateY(-1px); } #publicSite .ps-logo img { max-height: 24px; max-width: 62px; width: auto; object-fit: contain; display: block; } @media (max-width: 900px) { #publicSite .pub-strip { gap: 10px; padding: 6px 12px; } #publicSite .ps-logos { gap: 4px 14px; } #publicSite .ps-logo img { max-height: 20px; max-width: 52px; } } @media (max-width: 640px) { #publicSite .ps-lbl { width: 100%; text-align: center; } #publicSite .ps-logo img { max-height: 17px; max-width: 44px; } #publicSite .ps-logos { gap: 4px 10px; } } /* prvi ekran i sekcije uzimaju u obzir visinu trake */ #publicSite .hero-bg { height: calc(100vh - var(--pub-hdr-h) - var(--pub-ftr-h) - var(--pub-strip-h, 0px)); } @supports (height: 100svh) { #publicSite .hero-bg { height: calc(100svh - var(--pub-hdr-h) - var(--pub-ftr-h) - var(--pub-strip-h, 0px)); } } #publicSite.pub-sec > section.on { min-height: calc(100svh - var(--pub-hdr-h) - var(--pub-ftr-h) - var(--pub-strip-h, 0px)); } @media (max-width: 900px) { #publicSite .hero-bg { height: auto; min-height: calc(100svh - var(--pub-hdr-h) - var(--pub-ftr-h) - var(--pub-strip-h, 0px)); } } /* footer vise nema natpis iznad pa naslov ne treba spustati */ @media (min-width: 901px) { #publicSite .site-footer .ft-crest, #publicSite .site-footer .ft-txt { margin-top: 0; } } #publicSite .site-footer .ft-row { justify-content: space-between; } #publicSite .site-footer .ft-right { margin-left: auto; } /* Traka suradnje: bijela u obje teme */ #publicSite .pub-strip, [data-theme="dark"] #publicSite .pub-strip { background: #fff; } /* ── Traka suradnje: zlatna u obje teme, veće ikone na desktopu ── */ #publicSite .pub-strip, [data-theme="dark"] #publicSite .pub-strip { background: linear-gradient(180deg, #E9C883 0%, #D8AC53 100%); border-bottom: 1px solid rgba(15,30,60,.22); box-shadow: 0 2px 10px rgba(15,30,60,.14); } #publicSite .ps-lbl { color: #5A3E0B; } @media (min-width: 901px) { #publicSite .pub-strip { padding: 9px 20px; gap: 26px; } #publicSite .ps-logos { gap: 8px 26px; } #publicSite .ps-logo { height: 40px; } #publicSite .ps-logo img { max-height: 32px; max-width: 84px; } #publicSite .ps-lbl { font-size: .7rem; } } /* ── Traka suradnje: "Suradnja" ispod kapice, logotipi razvuceni do gumba Upisi se ── */ @media (min-width: 901px) { #publicSite .pub-strip { justify-content: flex-start; flex-wrap: nowrap; gap: 18px; padding-left: var(--pub-strip-l, 18px); padding-right: var(--pub-strip-r, 18px); } #publicSite .ps-lbl { flex: 0 0 auto; } #publicSite .ps-logos { flex: 1 1 auto; justify-content: space-between; flex-wrap: nowrap; gap: 0 10px; } #publicSite .ps-logo { height: 48px; flex: 0 1 auto; } #publicSite .ps-logo img { max-height: 40px; max-width: 104px; } } /* ── Footer: slogan natrag u sredinu, malo veci ─────────────── */ #publicSite .site-footer .ft-slogan { flex: 1 1 0; text-align: center; white-space: nowrap; font-family: 'Caveat', cursive; font-weight: 700; color: var(--pub-gold); font-size: 1.9rem; line-height: 1.1; } @media (max-width: 900px) { #publicSite .site-footer .ft-slogan { font-size: 1.55rem; } } @media (max-width: 640px) { #publicSite .site-footer .ft-slogan { flex: 1 1 100%; order: 3; font-size: 1.35rem; } } /* ── Traka suradnje premjestena ISPOD footera ───────────────── */ #publicSite .pub-strip, [data-theme="dark"] #publicSite .pub-strip { border-bottom: 0; border-top: 1px solid rgba(15,30,60,.22); box-shadow: 0 -2px 10px rgba(15,30,60,.14); } /* ── Footer slogan: tamnoplav u svijetloj, zlatan u tamnoj temi ── */ #publicSite .site-footer .ft-slogan { color: var(--pub-navy); } [data-theme="dark"] #publicSite .site-footer .ft-slogan { color: var(--pub-gold); } /* ── Mobitel: slogan i desno od kapice u zaglavlju ─────────────── */ @media (max-width: 900px) { :is(html.pk-site body, body.pub-mode) .header-brand { min-width: 0; overflow: hidden; } :is(html.pk-site body, body.pub-mode) .hdr-lockup { display: block; min-width: 0; margin-left: 8px !important; text-align: left; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(1), :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(2) { display: none; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(3) { font-size: .92rem; margin-top: 0; white-space: nowrap; } } /* ── Mobitel footer: grb + naziv u jednom redu, ispod mail i mreze, pa slogan ── */ @media (max-width: 640px) { #publicSite .site-footer .ft-row { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 8px; column-gap: 10px; } #publicSite .site-footer .ft-crest { order: 1; width: 30px; } #publicSite .site-footer .ft-txt { order: 2; flex: 0 1 auto; text-align: left; } #publicSite .site-footer .ft-right { order: 3; flex: 1 1 100%; width: 100%; justify-content: center; gap: 12px; } #publicSite .site-footer .ft-slogan { order: 4; flex: 1 1 100%; width: 100%; text-align: center; } } /* Uski mobitel: slogan uz kapicu mora stati zajedno s gumbom Upisi se */ @media (max-width: 480px) { :is(html.pk-site body, body.pub-mode) .header-main { gap: 6px; padding: 0 8px; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 40px !important; } :is(html.pk-site body, body.pub-mode) .hdr-lockup { margin-left: 6px !important; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(3) { font-size: .76rem; } :is(html.pk-site body, body.pub-mode) #headerPublic { gap: 2px; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { padding: 6px 9px; font-size: .74rem; } } /* ── Mobitel zaglavlje: tema lijevo, Upisi se u sredini, hamburger desno ── */ @media (max-width: 768px) { :is(html.pk-site body, body.pub-mode) .header-main { gap: 6px; padding: 0 10px; justify-content: flex-start; } :is(html.pk-site body, body.pub-mode) .header-brand { flex: 0 0 auto; } /* slogan uz kapicu u dva reda da ostane vise mjesta gumbu */ :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(3) { white-space: normal; max-width: 88px; line-height: 1.05; font-size: .78rem; } :is(html.pk-site body, body.pub-mode) #headerPublic { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; margin-left: 0; } :is(html.pk-site body, body.pub-mode) #headerPublic .header-contact-link, :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn, :is(html.pk-site body, body.pub-mode) #headerPublic .hp-sep { display: none; } :is(html.pk-site body, body.pub-mode) #headerPublic #themeToggle { order: 1; width: 34px; height: 34px; font-size: 1rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { order: 2; margin: 0 auto; padding: 10px 16px; font-size: .95rem; border-radius: 12px; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-burger { order: 3; width: 42px; height: 42px; font-size: 1.45rem; } } /* ── Mobitel footer: prvo mail i mreze, pa grb + naziv, pa slogan ── */ @media (max-width: 640px) { #publicSite .site-footer .ft-right { order: 1; flex: 1 1 100%; width: 100%; justify-content: center; } #publicSite .site-footer .ft-crest { order: 2; } #publicSite .site-footer .ft-txt { order: 3; } #publicSite .site-footer .ft-slogan{ order: 4; } } /* Mobitel: zamijenjen redoslijed — Upisi se prvi, pa promjena teme */ @media (max-width: 768px) { :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { order: 1; margin: 0; } :is(html.pk-site body, body.pub-mode) #headerPublic #themeToggle { order: 2; margin: 0 auto; } } /* ── Iduca natjecanja: kompaktnija i fluidna kartica ──────────── */ #publicSite .hero-next { width: clamp(210px, 24vw, 300px); padding: clamp(10px, 1.1vw, 14px) clamp(12px, 1.2vw, 16px); border-radius: 14px; } #publicSite .hero-next .hn-lbl { font-size: clamp(.58rem, .7vw, .66rem); margin-bottom: 5px; } #publicSite .hero-next .hn-name { font-size: clamp(.98rem, 1.35vw, 1.28rem); } #publicSite .hero-next .hn-meta { font-size: clamp(.72rem, .85vw, .8rem); margin-top: 3px; } #publicSite .hero-next .hn-doc { font-size: clamp(.68rem, .8vw, .75rem); padding: 5px 11px; margin-top: 9px; } #publicSite .hero-next .hn-next { margin-top: 10px; padding-top: 9px; gap: 6px; } #publicSite .hero-next .hn-next-row b { font-size: clamp(.76rem, .9vw, .84rem); } #publicSite .hero-next .hn-next-row span { font-size: clamp(.66rem, .78vw, .72rem); } #publicSite .hero-next .hn-all { margin-top: 10px; font-size: clamp(.7rem, .82vw, .76rem); } @media (max-width: 900px) { #publicSite .hero-next { width: auto; max-width: 520px; } } /* ── Mobitel: kalendar natjecanja kao kartice (bez vodoravnog skrolanja) ── */ @media (max-width: 720px) { #publicSite .cal-table-wrap { overflow: visible; box-shadow: none; } #publicSite .cal-table:not(.norme-table), #publicSite .cal-table:not(.norme-table) tbody, #publicSite .cal-table:not(.norme-table) tr, #publicSite .cal-table:not(.norme-table) td { display: block; width: 100%; } #publicSite .cal-table:not(.norme-table) { border-collapse: separate; border-spacing: 0; } #publicSite .cal-table:not(.norme-table) thead { display: none; } #publicSite .cal-table:not(.norme-table) tbody tr { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--pub-gold); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--shadow); } #publicSite .cal-table:not(.norme-table) td { border: none !important; padding: 1px 0; font-size: .84rem; word-break: break-word; } #publicSite .cal-table:not(.norme-table) td:empty { display: none; } #publicSite .cal-table:not(.norme-table) td.cal-date { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pub-gold-dk); } [data-theme="dark"] #publicSite .cal-table:not(.norme-table) td.cal-date { color: var(--pub-gold); } #publicSite .cal-table:not(.norme-table) td.cal-name { font-size: .98rem; font-weight: 800; line-height: 1.25; margin: 2px 0 4px; } #publicSite .cal-table:not(.norme-table) td[data-l]::before { content: attr(data-l) ": "; font-weight: 700; font-size: .74rem; color: var(--text2); } #publicSite .cal-table:not(.norme-table) td.cal-doc { margin-top: 8px; } #publicSite .cal-table:not(.norme-table) td.cal-doc .cal-doc-btn { width: 100%; justify-content: center; } } /* ── Mobitel: tablica normi stane u sirinu ekrana ─────────────── */ @media (max-width: 720px) { #publicSite .norme-table-wrap { overflow: hidden; } #publicSite .norme-table { width: 100%; table-layout: fixed; } #publicSite .norme-table th, #publicSite .norme-table td { padding: 5px 3px; font-size: .68rem; } #publicSite .norme-table th { font-size: .6rem; line-height: 1.15; word-break: break-word; hyphens: auto; } #publicSite .norme-table th:first-child, #publicSite .norme-table .norme-disc { width: 31%; } #publicSite .norme-table .norme-disc { white-space: normal; font-size: .7rem; line-height: 1.15; } #publicSite .norme-table .norme-time { font-size: .7rem; } #publicSite .norme-table .norme-stroke td { padding: 5px 8px; font-size: .64rem; } } @media (max-width: 720px) { #publicSite .norme-table th { white-space: normal !important; overflow-wrap: anywhere; } #publicSite .norme-table th:first-child, #publicSite .norme-table .norme-disc { width: 27%; } #publicSite .norme-table th, #publicSite .norme-table td { padding: 5px 2px; } } /* ── Donacije: HUB-3 barkod ───────────────────────────────────── */ #publicSite .don-bar { text-align: center; flex: 0 0 auto; max-width: 320px; } #publicSite .don-bar-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; display: inline-block; box-shadow: 0 2px 12px rgba(0,0,0,.06); } #publicSite .don-bar-box canvas { display: block; max-width: 100%; height: auto; } #publicSite .don-bar-err { font-size: .8rem; color: var(--text2); max-width: 240px; } #publicSite .don-amt { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; } #publicSite .don-amt button { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font); font-weight: 800; font-size: .82rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: var(--transition); } #publicSite .don-amt button:hover { border-color: var(--pub-gold); } #publicSite .don-amt button.on { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); } #publicSite .don-amt-own { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; background: var(--surface); } #publicSite .don-amt-own input { width: 62px; border: none; background: none; color: var(--text); font-family: var(--font); font-weight: 700; font-size: .82rem; outline: none; } #publicSite .don-bar-note { margin-top: 10px; font-size: .78rem; color: var(--text3); } @media (max-width: 640px) { #publicSite .don-bar { max-width: 100%; } } /* Podaci za uplatu uz barkod: citljivi i na tamnoj pozadini sekcije */ #publicSite .don-info { background: var(--surface1); border: 1px solid var(--border); } #publicSite.pub-sec > section.on .don-info { background: rgba(5,13,30,.72); border-color: rgba(232,168,56,.35); backdrop-filter: blur(6px); } #publicSite.pub-sec > section.on .don-info, #publicSite.pub-sec > section.on .don-info div { color: #fff; } #publicSite.pub-sec > section.on .don-info div[style*="text-transform:uppercase"] { color: rgba(255,255,255,.62) !important; } #publicSite.pub-sec > section.on .don-info #ibanText { color: var(--pub-gold); } #publicSite.pub-sec > section.on .don-info button { color: rgba(255,255,255,.7) !important; } /* Logotip s vlastitom tamnom podlogom (VK Iktus) — blago zaobljen */ #publicSite .ps-logo-dark img { border-radius: 5px; } /* Gumb zvuka u podnozju izgleda kao ostale ikone drustvenih mreza */ #publicSite .site-footer .ft-soc button#sndBtn { display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; font-family: inherit; width: 30px; height: 30px; font-size: .85rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); transition: var(--transition); } #publicSite .site-footer .ft-soc button#sndBtn:hover { background: var(--pub-gold); color: var(--pub-navy-deep); } /* Novosti: poveznica na izvornu objavu (Instagram) */ #publicSite .news-src { margin-top: 10px; font-size: .8rem; font-weight: 700; } #publicSite .news-src a { color: var(--pub-gold-dk); display: inline-flex; align-items: center; gap: 6px; } [data-theme="dark"] #publicSite .news-src a, #publicSite.pub-sec > section.on .news-src a { color: var(--pub-gold); } /* Novosti: znak za video/reel i galeriju preko slike */ #publicSite .news-img { position: relative; } #publicSite .news-badge { position: absolute; right: 10px; top: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(5,13,30,.62); color: #fff; font-size: .82rem; backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,.35); } /* Gumb za temu je maknut (17.09.2026.) — Upisi se ostaje u sredini mobilnog zaglavlja */ @media (max-width: 768px) { :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { order: 1; margin: 0 auto; } } /* Rezultati: kad natjecanje ima samo jednog plivaca (MI, EP), kartica ide u sredinu */ #publicSite .rez-grid.rez-one { grid-template-columns: minmax(280px, 460px); justify-content: center; } @media (max-width: 640px) { #publicSite .rez-grid.rez-one { grid-template-columns: 1fr; } } /* ── Mobilno zaglavlje (17.09.2026.): slogan uz kapicu, veci Upisi se u sredini, mreze lijevo od hamburgera kad ima mjesta. Hamburger se NE smanjuje. ── */ @media (max-width: 768px) { :is(html.pk-site body, body.pub-mode) .hdr-lockup { margin-left: 2px !important; } :is(html.pk-site body, body.pub-mode) .hdr-lockup > div:nth-child(3) { max-width: 82px; font-size: .74rem; } :is(html.pk-site body, body.pub-mode) #headerPublic { gap: 3px; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { order: 1; margin: 0 auto; padding: 11px 18px; font-size: 1.02rem; border-radius: 13px; flex: 0 0 auto; } /* mreze: skrivene na najuzim ekranima, vidljive cim stanu */ :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn { display: none; order: 2; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-burger { order: 3; flex: 0 0 auto; } } @media (min-width: 400px) and (max-width: 768px) { :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn { display: inline-flex; width: 32px; height: 32px; font-size: .9rem; flex: 0 0 auto; } } /* ── Mobilno zaglavlje, dorada: veca kapica, bez slogana, jos veci Upisi se ── */ @media (max-width: 768px) { /* slogan uz kapicu vise ne treba — kapica nosi naziv kluba */ :is(html.pk-site body, body.pub-mode) .hdr-lockup { display: none !important; } :is(html.pk-site body, body.pub-mode) .header-brand img { height: 58px !important; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { padding: 13px 22px; font-size: 1.1rem; border-radius: 14px; } /* oslobodjeno mjesto -> mreze stanu i na uzim ekranima */ :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn { display: inline-flex; width: 34px; height: 34px; font-size: .95rem; } } @media (max-width: 480px) { :is(html.pk-site body, body.pub-mode) .header-brand img { height: 52px !important; } } /* ── Wallpaperi: format za uredjaj s kojeg se gleda je istaknut, drugi ostaje ── (prvi link u kartici je Racunalo, drugi Mobitel) */ #publicSite .wp-dl a.wp-prim { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); flex: 1.5; } #publicSite .wp-dl a.wp-sec { flex: 1; font-size: .72rem; opacity: .85; } @media (min-width: 769px) { #publicSite .wp-dl a:first-child { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); flex: 1.5; } #publicSite .wp-dl a:last-child { flex: 1; font-size: .72rem; opacity: .85; } } @media (max-width: 768px) { #publicSite .wp-dl a:last-child { order: -1; background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); flex: 1.5; } #publicSite .wp-dl a:first-child { flex: 1; font-size: .72rem; opacity: .85; } } #publicSite.pub-sec > section.on .wp-dl a:first-child, #publicSite.pub-sec > section.on .wp-dl a:last-child { color: var(--pub-navy-deep); } @media (min-width: 769px) { #publicSite.pub-sec > section.on .wp-dl a:last-child { color: #fff; } } @media (max-width: 768px) { #publicSite.pub-sec > section.on .wp-dl a:first-child { color: #fff; } } /* Wallpaperi: natrag na jednake bijele gumbe (bez zutog punjenja), ostaje samo redoslijed — na mobitelu gore Mobitel, ispod Racunalo. */ #publicSite .wp-dl a, #publicSite .wp-dl a:first-child, #publicSite .wp-dl a:last-child { background: none; border-color: var(--border2); color: var(--text2); flex: 1; font-size: .78rem; opacity: 1; } #publicSite.pub-sec > section.on .wp-dl a, #publicSite.pub-sec > section.on .wp-dl a:first-child, #publicSite.pub-sec > section.on .wp-dl a:last-child { border-color: rgba(255,255,255,.35); color: #fff; } #publicSite .wp-dl a:hover { background: var(--pub-gold); border-color: var(--pub-gold); color: var(--pub-navy-deep); } @media (max-width: 768px) { #publicSite .wp-dl a:last-child { order: -1; } } /* ── Novosti: video i galerija u modalu (21.09.2026.) ────────────── Videa dolaze kao mp4 iz ig_sync.ps1, albumi kao popis slika (o.galerija). #newsModal img pravilo gore reze na 420px, pa stage ima svoje mjere. */ #newsModal .news-video, #newsModal .news-stage-img { width: 100%; max-height: 72vh; display: block; background: #05091a; object-fit: contain; border-radius: 0; } /* bez zadanog omjera - preglednik ga uzme iz postera, pa i uspravni reel i polozeni video dobiju svoj oblik umjesto da ih se rastegne */ #newsModal .news-video { margin: 0 auto; } #newsModal .news-gal { position: relative; background: #05091a; } #newsModal .news-stage { display: flex; align-items: center; justify-content: center; min-height: 40vh; } #newsModal .news-stage img { max-height: 72vh; width: auto; max-width: 100%; } #newsModal .news-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(5,13,30,.62); color: #fff; cursor: pointer; font-size: .95rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); transition: background .15s ease; } #newsModal .news-nav:hover { background: rgba(5,13,30,.86); } #newsModal .news-prev { left: 10px; } #newsModal .news-next { right: 10px; } #newsModal .news-count { position: absolute; right: 12px; top: 12px; z-index: 3; background: rgba(5,13,30,.62); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; } #newsModal .news-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; background: rgba(5,13,30,.06); scrollbar-width: thin; } #newsModal .news-thumb { position: relative; flex: 0 0 auto; width: 58px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .62; transition: opacity .15s ease, border-color .15s ease; } #newsModal .news-thumb.on { opacity: 1; border-color: var(--pub-gold); } #newsModal .news-thumb:hover { opacity: 1; } #newsModal .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: none; } #newsModal .news-thumb i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; text-shadow: 0 1px 4px rgba(0,0,0,.8); } /* znak galerije nosi i broj slika, pa nije vise krug */ #publicSite .news-badge.news-badge-wide { width: auto; min-width: 32px; padding: 0 9px; border-radius: 999px; gap: 5px; font-size: .74rem; font-weight: 800; } @media (max-width: 640px) { #newsModal .news-nav { width: 34px; height: 34px; } #newsModal .news-thumb { width: 46px; height: 46px; } } /* ── Novosti: 8 kartica odmah, bez skrolanja (21.09.2026.) ───────── Mreza 4x2 na siroj slici; ostale 4 objave dolaze na skrol. Visina slike je vezana uz visinu prozora (svh), pa dva reda stanu i na nizak prijenosnik 1366x768, a na velikom zaslonu su slike vece. */ @media (min-width: 1100px) { #publicSite #novosti { padding-top: 48px; padding-bottom: 40px; } #publicSite #novosti .section-sub { margin-bottom: 16px; } #publicSite #novosti .news-grid { max-width: 1280px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } #publicSite #novosti .news-grid .news-img { aspect-ratio: auto; height: 170px; height: clamp(110px, 17svh, 190px); } #publicSite #novosti .news-grid .news-body { padding: 10px 13px 12px; } #publicSite #novosti .news-grid .news-body h3 { font-size: .95rem; line-height: 1.3; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* opis i poveznica na Instagram ostaju u modalu - na kartici bi pojeli dva reda */ #publicSite #novosti .news-grid .news-body p { display: none !important; } #publicSite #novosti .news-grid .news-body::after { margin-top: 7px; font-size: .72rem; } #publicSite #novosti .news-grid .news-meta { gap: 8px; } #publicSite #novosti .news-grid .news-date { font-size: .72rem; } #publicSite #novosti .news-grid .pill-gold { font-size: .64rem; padding: 2px 8px; } } /* srednji zasloni: tri u redu, i dalje kompaktno */ @media (min-width: 860px) and (max-width: 1099px) { #publicSite #novosti .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } #publicSite #novosti .news-grid .news-img { aspect-ratio: auto; height: clamp(120px, 19svh, 200px); } #publicSite #novosti .news-grid .news-body p { display: none !important; } } /* Duboki link (web.html#novosti) skoci na sekciju jos prije nego pubShow vrati na vrh; bez ovoga naslov zavrsi ispod ljepljivog zaglavlja. */ #publicSite > section { scroll-margin-top: 104px; } /* ══ Mini-portal za roditelje (22.09.2026.) ════════════════════════ Tri komponente koje se ponavljaju na svim stranicama portala: .par-grid (raskrizje), .faq (pitanje/odgovor), .steps (tijek dana). */ /* Raskrizje: kartice prema temama */ #publicSite .par-grid { max-width: 1080px; margin: 0 auto 40px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } #publicSite .par-card { text-align: left; cursor: pointer; font: inherit; color: inherit; background: var(--surface1); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } #publicSite .par-card:hover { transform: translateY(-3px); border-color: var(--pub-gold); box-shadow: var(--shadow-md); } #publicSite .par-ico { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 3px; background: var(--pub-gold-soft); color: var(--pub-gold-dk); font-size: 1.02rem; } #publicSite .par-card b { font-size: 1.02rem; font-weight: 800; } /* samo IZRAVNI span je opis kartice - inace pravilo smanji i "Swim" u znaku */ #publicSite .par-card > span { font-size: .85rem; color: var(--text2); line-height: 1.5; } /* Naslov skupine pitanja */ #publicSite .faq-head { max-width: 820px; margin: 30px auto 12px; display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pub-gold-dk); } [data-theme="dark"] #publicSite .faq-head, #publicSite.pub-sec > section.on .faq-head { color: var(--pub-gold); } /* Pitanje i odgovor */ #publicSite .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } #publicSite .faq { background: var(--surface1); border: 1px solid var(--border); border-left: 3px solid var(--pub-gold); border-radius: 10px; overflow: hidden; } #publicSite .faq > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 10px; } #publicSite .faq > summary::-webkit-details-marker { display: none; } #publicSite .faq > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: .7rem; color: var(--text3); transition: transform .18s ease; } #publicSite .faq[open] > summary::after { transform: rotate(180deg); } #publicSite .faq[open] > summary { border-bottom: 1px solid var(--border); } #publicSite .faq-a { padding: 14px 18px; font-size: .9rem; line-height: 1.7; color: var(--text2); } #publicSite .faq-a a { color: var(--pub-gold-dk); font-weight: 700; } [data-theme="dark"] #publicSite .faq-a a, #publicSite.pub-sec > section.on .faq-a a { color: var(--pub-gold); } /* Rupa u sadrzaju: vidi se na prvi pogled dok tajnik ne upise odgovor. Kad se tekst upise, makne se klasa faq-todo i redak izgleda normalno. */ #publicSite .faq-todo { display: block; border-left: 2px dashed var(--pub-gold); padding-left: 12px; font-style: italic; opacity: .75; } #publicSite .faq-todo::before { content: "ZA DOPUNITI"; display: block; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: var(--pub-gold-dk); margin-bottom: 4px; } [data-theme="dark"] #publicSite .faq-todo::before, #publicSite.pub-sec > section.on .faq-todo::before { color: var(--pub-gold); } /* Poziv na pitanje + napomena */ #publicSite .faq-ask, #publicSite .faq-note { max-width: 820px; margin: 26px auto 0; display: flex; gap: 14px; align-items: center; background: var(--pub-gold-soft); border-radius: 12px; padding: 16px 20px; font-size: .88rem; line-height: 1.6; color: #6B4A0F; } #publicSite .faq-ask i, #publicSite .faq-note i { font-size: 1.15rem; color: var(--pub-gold-dk); flex-shrink: 0; } #publicSite .faq-ask a, #publicSite .faq-note a { color: #6B4A0F; font-weight: 800; text-decoration: underline; } #publicSite .faq-note { font-size: .82rem; } /* Tijek dana natjecanja */ #publicSite .steps { max-width: 1080px; margin: 0 auto; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } #publicSite .step { background: var(--surface1); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 18px; position: relative; } #publicSite .step-n { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; margin-bottom: 10px; background: var(--pub-gold); color: #16233C; font-weight: 900; font-size: .8rem; } #publicSite .step b { display: block; font-size: .95rem; margin-bottom: 5px; } #publicSite .step p { font-size: .82rem; line-height: 1.6; color: var(--text2); margin: 0; } /* Iza kulisa: izrezak iz Instagram objava */ #publicSite .bs-grid { max-width: 1080px; margin: 0 auto; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } #publicSite .bs-card { border: 0; padding: 0; cursor: pointer; background: var(--surface1); border-radius: 12px; overflow: hidden; text-align: left; color: inherit; font: inherit; transition: transform .15s ease, box-shadow .15s ease; } #publicSite .bs-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } #publicSite .bs-card img { width: 100%; height: 130px; object-fit: cover; display: block; } #publicSite .bs-card span { display: block; padding: 9px 12px 12px; font-size: .78rem; color: var(--text2); } /* Stavka "Za roditelje" u traci se istice */ #publicSite ~ * .nav-parents, .header-nav .nav-parents { border-color: var(--pub-gold); color: var(--pub-gold); font-weight: 800; } /* Traka "Niste nasli odgovor" na tamnoj sekciji: zlatna podloga s tamnim tekstom se ne cita, pa u tamnoj temi ide obrub umjesto ispune. */ [data-theme="dark"] #publicSite .faq-ask, [data-theme="dark"] #publicSite .faq-note, #publicSite.pub-sec > section.on .faq-ask, #publicSite.pub-sec > section.on .faq-note { background: rgba(255,255,255,.04); border: 1px solid var(--pub-gold); color: #fff; } [data-theme="dark"] #publicSite .faq-ask a, [data-theme="dark"] #publicSite .faq-note a, #publicSite.pub-sec > section.on .faq-ask a, #publicSite.pub-sec > section.on .faq-note a { color: var(--pub-gold); } /* Duzi odgovor u FAQ-u: odlomci, popis cimbenika i kartice po grupama */ #publicSite .faq-a p { margin: 0 0 12px; } #publicSite .faq-a p:last-child { margin-bottom: 0; } #publicSite .faq-ul { margin: 0 0 4px; padding-left: 20px; } #publicSite .faq-ul li { margin-bottom: 9px; } #publicSite .faq-ul li b { color: var(--text); } #publicSite .faq-sub { margin: 20px 0 12px; font-size: .74rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--pub-gold-dk); } [data-theme="dark"] #publicSite .faq-sub, #publicSite.pub-sec > section.on .faq-sub { color: var(--pub-gold); } #publicSite .trn-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } #publicSite .trn-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 16px; } #publicSite .trn-n { font-size: 1.7rem; font-weight: 900; line-height: 1; color: var(--pub-gold-dk); display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } [data-theme="dark"] #publicSite .trn-n, #publicSite.pub-sec > section.on .trn-n { color: var(--pub-gold); } #publicSite .trn-n small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--text3); } #publicSite .trn-card b { display: block; font-size: .95rem; margin-bottom: 5px; } #publicSite .trn-card p { font-size: .82rem; line-height: 1.6; margin: 0; } #publicSite .faq-fine { margin-top: 16px; font-size: .84rem; color: var(--text3); font-style: italic; } /* Cetiri grupe u odgovoru o broju treninga: 2x2 umjesto tri u redu i jednog siroceta (popis pitanja je sirok 820 px). */ #publicSite .trn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 620px) { #publicSite .trn-grid { grid-template-columns: 1fr; } } #publicSite .trn-dob { font-size: .68rem; font-weight: 700; color: var(--text3); letter-spacing: .04em; margin-left: 6px; white-space: nowrap; } /* Dobne kategorije HPS-a u odgovoru o grupama: niz oznaka, ne tablica */ #publicSite .kat-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; } #publicSite .kat-list span { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: .78rem; color: var(--text2); white-space: nowrap; } #publicSite .kat-list span b { color: var(--text); font-weight: 800; } /* Broj treninga: veliki broj = treninzi u vodi, oznaka ispod = suhi trening */ #publicSite .trn-suhi { display: inline-block; margin: -4px 0 8px; background: var(--pub-gold-soft); color: #6B4A0F; border-radius: 999px; padding: 2px 10px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; } [data-theme="dark"] #publicSite .trn-suhi, #publicSite.pub-sec > section.on .trn-suhi { background: rgba(255,255,255,.06); color: var(--pub-gold); border: 1px solid var(--pub-gold); } /* sest kartica: tri u redu na sirem zaslonu, dvije na srednjem, jedna na mobitelu */ @media (min-width: 900px) { #publicSite .trn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Citat trenera: isti rukopisni slog kao slogan "Tim koji diše zajedno" */ #coachModal .coach-quote { font-family: 'Caveat', cursive; font-size: 1.3rem; font-weight: 600; line-height: 1.4; color: var(--pub-gold-dk); text-align: center; margin: 18px 0 2px; padding-top: 16px; border-top: 1px solid var(--border); } [data-theme="dark"] #coachModal .coach-quote { color: var(--pub-gold); } /* Poveznica na pojedino pitanje: ikona u retku pitanja, desno od strelice. order je nuzan jer je strelica ::after element istog flex retka. */ #publicSite .faq > summary::after { order: 2; } #publicSite .faq-link { order: 3; margin-left: 10px; cursor: pointer; font-size: .72rem; color: var(--text3); opacity: .45; transition: opacity .15s ease, color .15s ease; } #publicSite .faq > summary:hover .faq-link { opacity: 1; } #publicSite .faq-link:hover { color: var(--pub-gold); opacity: 1; } /* ── Aplikacija Swimetric na javnoj stranici (22.09.2026.) ───────── Kartica na "Za roditelje", kratka oznaka uz svako spominjanje, gumb Prijava u zaglavlju i potpis proizvoda u podnozju. */ #publicSite .app-box { max-width: 820px; margin: 0 auto 30px; display: flex; gap: 18px; align-items: flex-start; background: var(--surface1); border: 1px solid var(--border); border-left: 3px solid #21C4C1; border-radius: 14px; padding: 20px 22px; } #publicSite .app-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(33,196,193,.12); color: #21C4C1; font-size: 1.15rem; } #publicSite .app-txt { flex: 1 1 auto; min-width: 0; } #publicSite .app-txt > b { display: block; font-size: 1.08rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 6px; } #publicSite .app-txt > b span { color: #21C4C1; } #publicSite .app-txt p { font-size: .88rem; line-height: 1.65; color: var(--text2); margin: 0 0 8px; } #publicSite .app-note { font-size: .82rem !important; margin: 0 !important; } #publicSite .app-note i { color: #21C4C1; margin-right: 4px; } #publicSite .app-btn { flex-shrink: 0; align-self: center; white-space: nowrap; } @media (max-width: 680px) { #publicSite .app-box { flex-wrap: wrap; } #publicSite .app-btn { width: 100%; justify-content: center; } } /* kratka oznaka uz odgovore koji spominju aplikaciju */ #publicSite .app-tag { margin: 12px 0 0 !important; font-size: .78rem !important; color: var(--text3) !important; display: flex; align-items: center; gap: 6px; } #publicSite .app-tag i { color: #21C4C1; font-size: .72rem; } #publicSite .app-tag a { color: var(--text3); border-bottom: 1px dotted var(--text3); font-weight: 600; } #publicSite .app-tag a:hover { color: #21C4C1; border-bottom-color: #21C4C1; } /* potpis proizvoda u podnozju */ #publicSite .ft-powered { text-align: center; padding: 10px 16px 2px; font-size: .74rem; color: var(--text3); } #publicSite .ft-powered a { color: var(--text2); font-weight: 800; letter-spacing: .01em; } #publicSite .ft-powered a span { color: #21C4C1; } /* Znak proizvoda: "Swi" u boji teksta, "Metric" tirkizno (veliko M od 22.09.2026.) */ #publicSite .sm-word, .header-main .sm-word { font-weight: 800; letter-spacing: -.01em; } #publicSite .sm-word > span, .header-main .sm-word > span { color: #21C4C1; } /* Ulaz u aplikaciju u zaglavlju: znak + strelica, desno od mreza */ .header-main #headerPublic .pub-login { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); text-decoration: none; font-size: .86rem; transition: border-color .15s ease, color .15s ease; } .header-main #headerPublic .pub-login:hover { border-color: #21C4C1; } .header-main #headerPublic .pub-login > i { font-size: .78rem; color: var(--text3); } .header-main #headerPublic .pub-login:hover > i { color: #21C4C1; } @media (max-width: 900px) { .header-main #headerPublic .pub-login .sm-word { display: none; } } /* Potpis u podnozju: Pokrece + znak + Swimetric */ #publicSite .ft-powered { text-align: center; padding: 12px 16px 2px; } #publicSite .ft-powered a { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--text3); text-decoration: none; } #publicSite .ft-powered a:hover .sm-word { color: #fff; } #publicSite .ft-powered .sm-word { color: var(--text2); font-size: .92rem; } /* Gumb za ulazak u aplikaciju — isti u zaglavlju i u kartici na "Za roditelje" */ #publicSite .sm-btn, .header-main .sm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); text-decoration: none; font-size: .88rem; transition: border-color .15s ease; } #publicSite .sm-btn:hover, .header-main .sm-btn:hover { border-color: #21C4C1; } #publicSite .sm-btn > i, .header-main .sm-btn > i { font-size: .78rem; color: var(--text3); } #publicSite .sm-btn:hover > i, .header-main .sm-btn:hover > i { color: #21C4C1; } #publicSite .app-btn { align-self: center; flex-shrink: 0; } /* Sedma kartica na "Za roditelje": aplikacija Swimetric (tirkizna, ne zlatna) */ #publicSite .par-card-sm:hover { border-color: #21C4C1; } #publicSite .par-ico-sm { background: rgba(33,196,193,.12); color: #21C4C1; } #publicSite .par-card-sm b .sm-m { color: #21C4C1; font-size: inherit; line-height: inherit; } /* okvir se otvara klikom, pa ima malo razmaka od mreze */ #publicSite .app-box { scroll-margin-top: 120px; } /* display:flex na .app-box nadjacava atribut hidden (UA pravilo je samo display:none), pa ga treba izricito poništiti - inace je okvir uvijek vidljiv. */ #publicSite .app-box[hidden] { display: none !important; } /* Mobitel: ulaz u Swimetric stoji DESNO od "Upiši se". "Upiši se" ima margin:0 auto pa ostaje u sredini, a ovaj gumb (order 2, iza njega) zavrsi uz desni rub. Mreze su ondje skrivene. */ @media (max-width: 768px) { :is(html.pk-site body, body.pub-mode) #headerPublic .pub-login { display: inline-flex; order: 2; flex: 0 0 auto; margin-left: 4px; padding: 9px 11px; gap: 6px; } } /* Na najuzim ekranima nema mjesta za sve: mreze (Facebook, Instagram) se skrivaju jer stoje i u podnozju, a zaglavlje zadrzava ono bez cega se ne moze — kapicu, "Upiši se", ulaz u Swimetric i hamburger. */ @media (max-width: 480px) { :is(html.pk-site body, body.pub-mode) #headerPublic .header-social-btn { display: none !important; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-join { padding: 11px 16px; font-size: 1.02rem; } :is(html.pk-site body, body.pub-mode) #headerPublic .pub-login { padding: 9px 9px; margin-left: 2px; } }