/* ============================================================ SUPERCLEVER / SUPERZNALAC — glavni stylesheet cijelog sitea Dizajn po uzoru na superclever.com/umag i /kastela. Boje: pink #E32285 · navy #27326F · sky #B2DFF3 Fontovi: Showcard Gothic (wordmark) · Lilita One (naslovi) · Poppins (tekst) ============================================================ */ /* ---------- Fontovi ---------- VAŽNO: Lilita One i Showcard Gothic NEMAJU slova č ć đ Č Ć Đ — preglednik ih tada vadi iz sistemskog fonta i naslov izgleda kao da je slagan iz dva fonta. Zato je font naslova **Titan One** (ima sve hrvatske znakove). Showcard Gothic ostaje samo za wordmark (SUPERZNALAC / SUPERCLEVER — bez dijakritike), s Titan Oneom kao zamjenom. Coiny se NE koristi za tekst (renderira v→u). */ @font-face{font-family:'TitanOne';src:url('fonts/TitanOne-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Showcard Gothic';src:url('fonts/ShowcardGothic.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap; unicode-range:U+0020-007E,U+00A0-00FF} /* samo osnovna latinica — hrvatske znakove preuzima TitanOne */ @font-face{font-family:'Poppins';src:url('fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Poppins';src:url('fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap} /* ---------- Design tokeni ---------- */ :root{ --pink:#E32285; --pink-dark:#C11A70; --pink-soft:#FDEAF3; --navy:#27326F; --navy-dark:#1D2555; --sky:#B2DFF3; --sky-soft:#EAF6FC; --white:#fff; --ink:#2A2F45; --ink-soft:#5A6178; --line:#E3EAF5; --font-display:'Showcard Gothic','TitanOne',system-ui,sans-serif; --font-heading:'TitanOne',system-ui,sans-serif; --font-body:'Poppins','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif; --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --radius-pill:999px; --shadow-card:0 6px 24px rgba(39,50,111,.10); --shadow-card-hover:0 12px 32px rgba(39,50,111,.18); --header-height:74px; --container-max:1140px; /* Akcent se po stranici mijenja inline na (program stranice) */ --accent:var(--pink); --accent-soft:var(--pink-soft); } /* ---------- Reset / baza ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 12px)} body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--pink)} h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-family:var(--font-heading);color:var(--navy);font-weight:400} p{margin:0 0 1em} ul,ol{margin:0;padding:0;list-style:none} .container,.wrap{max-width:var(--container-max);margin:0 auto;padding:0 20px} .container--narrow,.narrow{max-width:820px;margin-left:auto;margin-right:auto} .section,section.section{padding:72px 0} .section--sky{background:var(--sky-soft)} .section--navy{background:var(--navy);color:var(--sky)} .section--navy .section__title,.section--navy h2,.section--navy h3{color:var(--white)} .section--navy .section__lead{color:var(--sky)} .center{text-align:center} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- Gumbi ---------- */ .btn{display:inline-block;font-family:var(--font-heading);font-size:1rem;text-align:center;text-decoration:none;padding:.8em 1.6em;border:3px solid transparent;border-radius:var(--radius-pill);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;line-height:1.2} .btn--primary,.btn-primary{background:var(--pink);color:var(--white);box-shadow:0 6px 18px rgba(227,34,133,.35)} .btn--primary:hover,.btn-primary:hover{background:var(--pink-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(227,34,133,.45)} .btn--ghost,.btn-ghost{background:var(--white);color:var(--navy);border-color:var(--navy)} .btn--ghost:hover,.btn-ghost:hover{background:var(--sky-soft);transform:translateY(-2px)} .btn--light{background:var(--white);color:var(--navy)} .btn--light:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)} .btn--lg{font-size:1.1rem;padding:.95em 1.9em} .btn--block{display:block;width:100%} /* ---------- Naslovi sekcija ---------- */ .section__eyebrow{font-family:var(--font-heading);color:var(--pink);text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;margin:0 0 4px;text-align:center} .eyebrow{font-family:var(--font-heading);color:var(--pink);text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;margin:0 0 10px;text-align:left} .section__eyebrow--light{color:var(--sky)} .section__title{font-family:var(--font-heading);color:var(--navy);font-size:clamp(1.7rem,4vw,2.4rem);text-align:center;margin:0 0 .4em} .section__lead{max-width:660px;margin:0 auto 44px;text-align:center;color:var(--ink-soft)} .section__head--left .section__eyebrow, .section__head--left .section__title, .section__head--left .section__lead{text-align:left;margin-left:0} /* ============================================================ HEADER ============================================================ */ .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(39,50,111,.08)} .site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-height)} .site-logo{display:flex;align-items:center;gap:10px;text-decoration:none} .site-logo__mark{font-family:var(--font-display);font-size:1.5rem;line-height:1;letter-spacing:.01em;white-space:nowrap} .site-logo__mark .a{color:var(--navy)} .site-logo__mark .b{color:var(--pink)} .site-nav{display:flex;align-items:center;gap:22px} .site-nav__link{font-weight:600;color:var(--navy);text-decoration:none;font-size:.98rem} .site-nav__link:hover{color:var(--pink)} .site-nav__link.is-active{color:var(--pink)} .site-nav__cta{font-size:.92rem;padding:.6em 1.3em} .site-nav__lang{font-weight:700;color:var(--ink-soft);text-decoration:none;font-size:.9rem;border:2px solid var(--line);border-radius:var(--radius-pill);padding:.25em .8em} .site-nav__lang:hover{border-color:var(--pink);color:var(--pink)} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:8px;background:none;border:2px solid var(--navy);border-radius:var(--radius-sm);cursor:pointer} .nav-toggle span{display:block;height:3px;background:var(--navy);border-radius:2px} /* ============================================================ HERO — naslovnica ============================================================ */ .hero{background: radial-gradient(circle at 12% 18%,rgba(227,34,133,.10) 0,transparent 180px), radial-gradient(circle at 88% 30%,rgba(39,50,111,.10) 0,transparent 220px), linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 100%); padding:64px 0 40px;overflow:hidden} .hero__inner{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:24px} .hero__badge{display:inline-block;background:var(--white);color:var(--navy);font-weight:700;font-size:.9rem;padding:8px 18px;border-radius:var(--radius-pill);box-shadow:var(--shadow-card);margin:0 0 20px} .hero__title{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,7vw,4.4rem);letter-spacing:.01em;margin:0 0 6px;color:var(--navy)} .hero__title-super{color:var(--navy)} .hero__title-clever{color:var(--pink)} .hero__title-tag{display:block;background:var(--navy);color:var(--white);font-size:.36em;letter-spacing:.3em;text-indent:.3em;padding:.4em .95em .3em;border-radius:var(--radius-pill);width:fit-content;margin-top:14px} .hero__tagline{font-family:var(--font-heading);color:var(--navy);font-size:clamp(1.25rem,2.8vw,1.75rem);margin:18px 0 10px} .hero__subtitle{max-width:540px;color:var(--ink);margin:0 0 26px} .hero__cta-group{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px} .hero__note{font-size:.88rem;color:var(--ink-soft);margin:0} .hero__visual{display:flex;align-items:flex-end;justify-content:center} .hero__character{max-height:400px;width:auto;filter:drop-shadow(0 12px 20px rgba(39,50,111,.25))} .hero__character--boy{transform:rotate(-3deg) translateX(12px);z-index:2} .hero__character--girl{transform:rotate(3deg) translateX(-12px)} .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:22px 26px;margin-top:40px} .hero-stats__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px} .hero-stats__item strong{font-family:var(--font-heading);color:var(--pink);font-size:1.8rem} .hero-stats__item span{font-size:.85rem;color:var(--ink-soft)} /* ---------- Hero unutarnjih stranica ---------- */ .phero{background:linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 100%);padding:52px 0 56px;overflow:hidden} .phero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center} .phero--solo .phero__inner{grid-template-columns:1fr;max-width:820px;text-align:center;margin:0 auto} .phero--solo .phero__lead{margin-left:auto;margin-right:auto} .phero__chip{display:inline-block;background:var(--white);color:var(--navy);font-weight:700;font-size:.85rem;padding:7px 16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-card);margin:0 0 16px} .phero__title{font-family:var(--font-heading);color:var(--navy);font-size:clamp(2rem,5vw,3.1rem);margin:0 0 .3em} .phero__title em{color:var(--pink);font-style:normal} .phero__lead{font-size:1.1rem;color:var(--ink);max-width:560px;margin:0 0 26px} .phero__cta{display:flex;gap:14px;flex-wrap:wrap} .phero__art{position:relative} .phero__art img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:0 18px 40px rgba(39,50,111,.22);border:6px solid var(--white)} .phero__art--free img{aspect-ratio:auto;object-fit:contain;border:0;box-shadow:none;max-height:340px;margin:0 auto;filter:drop-shadow(0 14px 22px rgba(39,50,111,.25))} .crumb{font-size:.88rem;color:var(--ink-soft);padding:16px 0 0} .crumb a{color:var(--navy);font-weight:600;text-decoration:none} .crumb a:hover{color:var(--pink)} /* ============================================================ KARTICE ============================================================ */ .cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cardgrid--2{grid-template-columns:repeat(2,1fr)} .cardgrid--4{grid-template-columns:repeat(4,1fr)} .card{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:26px 22px;transition:transform .15s ease,box-shadow .15s ease} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .card__icon{font-size:2rem;display:block;margin-bottom:10px;line-height:1} .card__title{font-family:var(--font-heading);color:var(--navy);font-size:1.15rem;margin:0 0 .4em} .card__text{margin:0;color:var(--ink-soft);font-size:.95rem} /* Program kartice (naslovnica + pregled programa) */ .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .pcard{position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px 26px 28px;border:3px solid transparent;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none;color:inherit} .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .pcard--featured{border-color:var(--pink)} .pcard__flag{position:absolute;top:14px;right:14px;background:var(--pink);color:var(--white);font-family:var(--font-heading);font-size:.8rem;padding:5px 14px;border-radius:var(--radius-pill);margin:0;z-index:2} .pcard__photo{width:calc(100% + 52px);margin:-24px -26px 20px;aspect-ratio:4/3;object-fit:cover;max-width:none} .pcard__body{display:flex;flex-direction:column;flex:1} .pcard__age{display:inline-block;align-self:flex-start;background:var(--sky);color:var(--navy);font-weight:700;font-size:.85rem;padding:4px 14px;border-radius:var(--radius-pill);margin:0 0 12px} .pcard__name{font-family:var(--font-heading);color:var(--navy);font-size:1.5rem;margin:0 0 .3em} .pcard__text{color:var(--ink-soft);font-size:.96rem;margin:0 0 18px} .pcard__more{margin-top:auto;font-family:var(--font-heading);color:var(--pink);font-size:1rem} /* Koraci / metoda */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .steps--3{grid-template-columns:repeat(3,1fr)} .step{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:26px 20px;text-align:center} .step__num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--navy);color:var(--white);font-family:var(--font-heading);font-size:1.3rem;border-radius:50%;margin-bottom:12px} .step__title{font-family:var(--font-heading);color:var(--navy);font-size:1.1rem;margin:0 0 .4em} .step__text{margin:0;color:var(--ink-soft);font-size:.93rem} /* Osobe */ .people{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .people--2{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto} .person{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:30px 24px;text-align:center} .person__photo{width:150px;height:150px;object-fit:cover;object-position:50% 30%;border-radius:50%;border:3px solid var(--sky);margin:0 auto 18px} .person__name{font-family:var(--font-heading);color:var(--navy);font-size:1.25rem;margin:0 0 .2em} .person__role{color:var(--pink);font-weight:700;font-size:.92rem;margin:0 0 12px} .person__bio{margin:0;color:var(--ink-soft);font-size:.95rem} /* Citati */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .quote{background:var(--white);border:2px solid var(--sky-soft);border-left:6px solid var(--pink);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:24px 22px;margin:0} .quote p{font-style:italic;color:var(--ink);margin:0 0 12px;font-size:.97rem} .quote cite{color:var(--ink-soft);font-size:.88rem;font-style:normal} /* ---------- Brojke u traci ---------- */ .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px 26px} .facts--3{grid-template-columns:repeat(3,1fr)} .fact{text-align:center} .fact strong,.fact b{display:block;font-family:var(--font-heading);color:var(--pink);font-size:1.8rem;line-height:1.1} .fact span{font-size:.85rem;color:var(--ink-soft)} /* ---------- Popisi s kvačicom ---------- */ .checklist li{position:relative;padding-left:30px;margin-bottom:10px} .checklist li::before{content:'✔';position:absolute;left:0;top:0;color:var(--pink);font-weight:700} .checklist--light li::before{color:var(--sky)} /* ---------- Fotografije ---------- */ .photoband{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .photoband--2{grid-template-columns:repeat(2,1fr)} .photoband--4{grid-template-columns:repeat(4,1fr)} .photoband img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-card)} .photoband figure{margin:0} .photoband figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:8px;text-align:center} .photo-tall img{aspect-ratio:3/4} .split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center} .split img{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)} .split--wide{grid-template-columns:1.15fr .85fr} /* ---------- Panel / istaknuti okvir ---------- */ .panel{background:var(--sky-soft);border-radius:var(--radius-lg);padding:34px 32px;border:2px solid var(--sky)} .panel--pink{background:var(--pink-soft);border-color:#F6C3DE} .panel--navy{background:var(--navy);color:var(--sky);border:0} .panel--navy h2,.panel--navy h3{color:var(--white)} .note{background:var(--sky-soft);border-left:5px solid var(--pink);border-radius:var(--radius-sm);padding:18px 22px;color:var(--ink);font-size:.97rem} /* ============================================================ FAQ ============================================================ */ .faq{display:grid;gap:14px;max-width:820px;margin:0 auto} .faq details,.faq-item{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:0 22px;overflow:hidden} .faq summary{font-family:var(--font-heading);color:var(--navy);font-size:1.05rem;padding:18px 30px 18px 0;cursor:pointer;list-style:none;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);color:var(--pink);font-size:1.6rem;transition:transform .2s ease} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq details p{margin:0;padding:0 0 20px;color:var(--ink-soft)} /* ============================================================ FORME ============================================================ */ .formsec{background: radial-gradient(circle at 85% 15%,rgba(227,34,133,.25) 0,transparent 240px), radial-gradient(circle at 10% 85%,rgba(178,223,243,.30) 0,transparent 260px), var(--navy); padding:72px 0} .formsec .section__title{color:var(--white)} .formsec .section__lead{color:var(--sky)} .formsec .section__lead strong{color:var(--white)} .scform{background:var(--white);border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(0,0,0,.25);padding:34px 30px 30px;text-align:left;max-width:720px;margin:0 auto} .scform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:18px} .scform__row--1{grid-template-columns:1fr} .scform__field{display:flex;flex-direction:column} .scform__label{font-weight:700;color:var(--navy);font-size:.92rem;margin-bottom:6px} .scform__req{color:var(--pink)} .scform__opt{font-weight:400;color:var(--ink-soft);font-size:.85rem} .scform__input{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--sky-soft);border:2px solid transparent;border-radius:var(--radius-sm);padding:.75em .9em;transition:border-color .15s,background .15s,box-shadow .15s} .scform__input::placeholder{color:#9AA2B8} .scform__input:focus{outline:none;background:var(--white);border-color:var(--pink);box-shadow:0 0 0 4px rgba(227,34,133,.14)} .scform__input.is-invalid{border-color:#D93025;background:#FDF1F0} textarea.scform__input{resize:vertical;min-height:96px} .scform__error{color:#C5221F;font-size:.83rem;font-weight:700;margin:6px 0 0} .scform__error:empty{display:none} .scform__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .scform__submit{width:100%;margin-top:6px;font-size:1.15rem} .scform__submit[disabled]{opacity:.65;cursor:not-allowed;transform:none} .scform__privacy{font-size:.82rem;color:var(--ink-soft);text-align:center;margin:14px 0 0} .scform__status{margin:18px 0 0;padding:16px 18px;border-radius:var(--radius-md);font-weight:700;text-align:center} .scform__status--success{background:#E8F5E9;color:#1B5E20;border:2px solid #A5D6A7} .scform__status--error{background:#FDF1F0;color:#C5221F;border:2px solid #F2B8B5} /* ============================================================ KONTAKT ============================================================ */ .contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start} .infocard{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px 28px;align-self:start} .infocard h3{font-size:1.25rem;margin:0 0 18px} .inforow{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px} .inforow .ii{font-size:1.35rem;line-height:1.3;flex:0 0 auto} .inforow .il{font-family:var(--font-heading);color:var(--navy);font-size:1rem;line-height:1.3} .infocard a{color:var(--pink);font-weight:700;text-decoration:none} .infocard a:hover{text-decoration:underline} .infocard .socials{margin-top:6px;flex-wrap:wrap} .infocard .socials a{color:var(--pink);font-size:.9rem} .centres{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .centre{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:22px 22px} .centre h3{font-size:1.15rem;margin:0 0 .3em} .centre p{margin:0 0 .3em;font-size:.95rem;color:var(--ink-soft)} .centre a{color:var(--pink);font-weight:700;text-decoration:none} /* ============================================================ BLOG ============================================================ */ .postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .postcard{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s} .postcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .postcard img{width:100%;aspect-ratio:16/10;object-fit:cover} .postcard__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1} .postcard__meta{font-size:.8rem;color:var(--pink);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px} .postcard__title{font-family:var(--font-heading);color:var(--navy);font-size:1.2rem;margin:0 0 .4em} .postcard__text{color:var(--ink-soft);font-size:.94rem;margin:0 0 16px} .postcard__more{margin-top:auto;font-family:var(--font-heading);color:var(--pink)} .postfeat{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden} .postfeat img{width:100%;height:100%;min-height:280px;object-fit:cover} .postfeat__body{padding:34px 34px 34px 4px} /* Članak */ .art-hero{background:linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 100%);padding:48px 0} .art-meta{font-size:.88rem;color:var(--ink-soft);margin:0 0 10px} .artbody{max-width:760px;margin:0 auto;padding:56px 20px} .artbody h2{font-size:1.6rem;margin:1.6em 0 .5em} .artbody h3{font-size:1.2rem;margin:1.4em 0 .4em} .artbody p{margin:0 0 1.1em} .artbody ul{margin:0 0 1.2em} .artbody ul li{position:relative;padding-left:26px;margin-bottom:8px} .artbody ul li::before{content:'●';position:absolute;left:0;color:var(--pink);font-size:.7rem;top:.45em} .artbody figure{margin:2em 0} .artbody figure img{border-radius:var(--radius-md);box-shadow:var(--shadow-card)} .artbody figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:8px;text-align:center} .authors{background:var(--sky-soft);border-radius:var(--radius-lg);padding:26px 28px;margin:2.4em 0;border:2px solid var(--sky)} .authors h3{font-size:1.1rem;margin:0 0 .5em} .author{display:flex;gap:16px;align-items:center;margin-bottom:16px} .author img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--white);flex:0 0 auto} .author p{margin:0;font-size:.93rem;color:var(--ink-soft)} .author strong{color:var(--navy);font-family:var(--font-heading);font-weight:400} /* ============================================================ PROGRAM STRANICE — razine, značajke, tijek sata, knjiga ============================================================ */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .feature{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:26px 22px} .feature h3{font-size:1.1rem;margin:0 0 .4em} .feature p{margin:0;color:var(--ink-soft);font-size:.95rem} .feature .ico{font-size:1.9rem;display:block;margin-bottom:10px;line-height:1} .levels{display:grid;gap:18px} .level{background:var(--white);border:2px solid var(--sky-soft);border-left:6px solid var(--pink);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:24px 26px} .level h3{font-size:1.15rem;margin:0 0 .4em} .level p{margin:0;color:var(--ink-soft)} .level .lvl{display:inline-block;background:var(--sky);color:var(--navy);font-weight:700;font-size:.8rem;padding:3px 12px;border-radius:var(--radius-pill);margin-bottom:10px} .tline{display:grid;gap:0;max-width:760px;margin:0 auto;position:relative} .tstep{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:0 0 26px;position:relative} .tstep::before{content:'';position:absolute;left:47px;top:26px;bottom:0;width:2px;background:var(--sky)} .tstep:last-child::before{display:none} .tstep .t{font-family:var(--font-heading);color:var(--pink);background:var(--white);border:2px solid var(--sky);border-radius:var(--radius-pill);text-align:center;padding:4px 0;height:fit-content;position:relative;z-index:1;font-size:.9rem} .tstep h3{font-size:1.05rem;margin:0 0 .25em} .tstep p{margin:0;color:var(--ink-soft);font-size:.95rem} .book{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center} .book-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px} .book-shots img{border-radius:var(--radius-md);box-shadow:var(--shadow-card)} .bookfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 0} .bookfact{background:var(--sky-soft);border-radius:var(--radius-md);padding:16px 18px;text-align:center} .bookfact strong{display:block;font-family:var(--font-heading);color:var(--pink);font-size:1.5rem} .bookfact span{font-size:.85rem;color:var(--ink-soft)} .units{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .unit{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-sm);padding:12px 16px;font-size:.93rem;color:var(--navy);font-weight:600} .expgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .exp{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden} .exp img{width:100%;aspect-ratio:1/1;object-fit:cover} .exp span{display:block;padding:10px 12px;font-size:.88rem;color:var(--navy);font-weight:600;text-align:center} /* ============================================================ CTA traka ============================================================ */ .cta{background: radial-gradient(circle at 85% 20%,rgba(227,34,133,.28) 0,transparent 260px), radial-gradient(circle at 12% 80%,rgba(178,223,243,.28) 0,transparent 280px), var(--navy); padding:64px 0;text-align:center;color:var(--sky)} .cta h2{color:var(--white);font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 .4em} .cta p{max-width:620px;margin:0 auto 28px;color:var(--sky)} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--navy-dark);color:var(--sky);padding:52px 0 28px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} .foot-grid h4{color:var(--white);font-size:1rem;margin:0 0 .8em} .foot-grid a{color:var(--sky);text-decoration:none;font-size:.93rem} .foot-grid a:hover{color:var(--pink)} .foot-grid li{margin-bottom:8px} .foot-brand{font-family:var(--font-display);font-size:1.5rem;color:var(--white);margin:0 0 12px;display:block} .foot-brand .b{color:var(--pink)} .foot-about{font-size:.92rem;color:var(--sky);max-width:320px;opacity:.9} .socials{display:flex;gap:14px;margin-top:14px} .socials a{font-size:.9rem;font-weight:700;color:var(--white)} .foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;opacity:.85} /* ============================================================ B2B — franšizne stranice (ozbiljniji, poslovni ton) ============================================================ */ body.b2b{--accent:var(--navy);font-size:16.5px} .b2b .hero,.b2b .phero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%);color:#DCE3F5;padding:76px 0} .b2b .phero__title,.b2b .hero__title{color:var(--white);font-size:clamp(2rem,4.6vw,3rem);letter-spacing:0} .b2b .phero__title em{color:var(--sky)} .b2b .phero__lead{color:#C8D2EC;font-size:1.12rem;max-width:600px} .b2b .phero__chip{background:rgba(255,255,255,.12);color:var(--white);box-shadow:none;border:1px solid rgba(255,255,255,.25)} .b2b .phero__art img{border-color:rgba(255,255,255,.16)} .b2b .section__eyebrow{color:var(--navy);letter-spacing:.14em;font-size:.82rem} .b2b .section__title{font-size:clamp(1.6rem,3.4vw,2.15rem)} .b2b .card,.b2b .step,.b2b .feature{border-radius:var(--radius-sm);border:1px solid var(--line);box-shadow:none} .b2b .card:hover,.b2b .step:hover{transform:none;box-shadow:var(--shadow-card)} .b2b .step__num{background:var(--navy)} .b2b .facts{border-radius:var(--radius-sm);box-shadow:none;border:1px solid var(--line)} .b2b .fact strong{color:var(--navy)} .b2b .btn--primary{background:var(--pink)} .b2b .cta,.b2b .formsec{background:var(--navy)} .b2b .scform{border-radius:var(--radius-md)} .b2b .checklist li::before{color:var(--navy)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:960px){ .hero__inner,.phero__inner{grid-template-columns:1fr} .hero__visual{margin-top:10px} .hero__character{max-height:280px} .cardgrid,.cardgrid--4,.features,.postlist,.units{grid-template-columns:repeat(2,1fr)} .steps,.steps--3{grid-template-columns:repeat(2,1fr)} .people{grid-template-columns:1fr;max-width:480px;margin:0 auto} .quotes{grid-template-columns:1fr} .contactgrid,.split,.split--wide,.book,.postfeat{grid-template-columns:1fr} .postfeat__body{padding:28px 26px} .postfeat img{min-height:220px} .expgrid,.photoband--4{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .section,section.section{padding:52px 0} .nav-toggle{display:flex} .site-header__inner{position:relative} .site-nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;flex-direction:column;align-items:stretch;text-align:center;background:var(--white);box-shadow:0 12px 24px rgba(39,50,111,.15);padding:18px 20px;gap:14px} .site-nav.is-open{display:flex} .hero{padding-top:40px} .hero__cta-group .btn,.phero__cta .btn{width:100%} .hero-stats,.facts,.facts--3{grid-template-columns:repeat(2,1fr);row-gap:20px} .pgrid,.cardgrid,.cardgrid--2,.cardgrid--4,.features,.postlist,.steps,.steps--3,.centres,.photoband,.photoband--2,.photoband--4,.units,.bookfacts{grid-template-columns:1fr} .expgrid{grid-template-columns:repeat(2,1fr)} .scform{padding:26px 20px 24px} .scform__row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .tstep{grid-template-columns:74px 1fr;gap:14px} .tstep::before{left:36px} .artbody{padding:40px 20px} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} .expgrid{grid-template-columns:1fr} } /* ============================================================ KOMPATIBILNOST — stare klase iz prvog prototipa (programs.css) dobivaju novi izgled, da se sadržaj stranica ne mora prepisivati. ============================================================ */ .display{font-family:var(--font-heading);font-weight:400;letter-spacing:0;line-height:1.12;color:var(--navy)} h1.display{font-size:clamp(2rem,5vw,3.1rem)} h2.display{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:.4em} h3.display{font-size:1.3rem} .lead{font-size:1.1rem;color:var(--ink-soft);max-width:680px} p.body{font-size:1.05rem;color:var(--ink);margin-bottom:16px} .hi{color:var(--pink)} section{padding:72px 0} section.alt{background:var(--sky-soft)} /* Stari header / footer (ako gdje ostane) */ header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(39,50,111,.08)} .nav-in{display:flex;align-items:center;justify-content:space-between;padding:0 20px;max-width:var(--container-max);margin:0 auto;height:var(--header-height)} .logo{font-family:var(--font-display);font-size:1.5rem;text-decoration:none;line-height:1} .logo .a{color:var(--navy)} .logo .b{color:var(--pink)} .nav-links{display:flex;gap:22px;align-items:center;font-weight:600} .nav-links a{text-decoration:none;color:var(--navy);font-size:.98rem} .nav-links a:hover,.nav-links a.active{color:var(--pink)} .nav-cta{background:var(--pink);color:#fff!important;padding:.6em 1.3em;border-radius:var(--radius-pill);font-family:var(--font-heading);box-shadow:0 6px 18px rgba(227,34,133,.35)} footer{background:var(--navy-dark);color:var(--sky);padding:52px 0 28px} footer h4{color:#fff;font-size:1rem;margin:0 0 .8em} footer a{color:var(--sky);text-decoration:none;font-size:.93rem} footer a:hover{color:var(--pink)} footer .foot-grid > div > a{display:block;margin-bottom:8px} footer .logo .a{color:#fff} footer .logo .b{color:var(--pink)} /* Program hero */ .p-hero{background:linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 100%);padding:20px 0 56px;overflow:hidden} .p-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center} .p-hero h1{color:var(--navy)} .p-hero .lead{margin:18px 0 26px;color:var(--ink)} .p-hero-cta{display:flex;gap:14px;flex-wrap:wrap} .chip{display:inline-block;background:var(--white);color:var(--navy);font-weight:700;font-size:.85rem;padding:7px 16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-card);margin-bottom:16px} .p-hero-art{display:flex;justify-content:center;align-items:center;position:relative;min-height:260px} .p-hero-art::before{content:none} .p-hero-art img{position:relative;z-index:1;max-height:300px;width:auto;filter:drop-shadow(0 14px 22px rgba(39,50,111,.25))} .p-hero-art .frame{width:100%} .p-hero-art .frame img{max-height:none;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);border:6px solid var(--white);box-shadow:0 18px 40px rgba(39,50,111,.22);filter:none} .p-hero-art .emoji{font-size:8rem;position:relative;z-index:1} .p-hero-art.pic{min-height:0} /* Traka s činjenicama (stari .facts-grid) */ section.facts{display:block;padding:0;background:transparent;box-shadow:none;border-radius:0} section.facts .wrap{transform:translateY(-28px)} .facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px 26px} .facts-grid .fact{text-align:center} .facts-grid .fact .ic{font-size:1.6rem;line-height:1;margin-bottom:6px} .facts-grid .fact .k{font-family:var(--font-heading);color:var(--pink);font-size:1.2rem;line-height:1.2} .facts-grid .fact .l{font-size:.85rem;color:var(--ink-soft)} /* Razine */ .levels .level{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start} .levels .level .n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--navy);color:#fff;font-family:var(--font-heading);font-size:1.3rem;border-radius:50%} .levels .level h3{font-size:1.15rem;margin:0 0 .3em} /* Kvačice sa */ .checklist li .ck{position:absolute;left:0;color:var(--pink);font-weight:700} .checklist li{position:relative;padding-left:30px;margin-bottom:10px} .panel .checklist li .ck{color:var(--pink)} /* Fotogalerija */ .photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .photogrid figure{margin:0} .photogrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-card)} .photogrid figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:8px;text-align:center} .photoband img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-card)} .photo-cap{font-size:.88rem;color:var(--ink-soft);text-align:center;margin-top:12px} /* Stara naslovnica: mreže i kartice */ .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid2 > .card,.grid3 > .card{border-top:none} .card .ico{font-size:2rem;display:block;margin-bottom:10px;line-height:1} .card h3{font-size:1.25rem;margin:0 0 .4em} .card .age{display:inline-block;background:var(--sky);color:var(--navy);font-weight:700;font-size:.82rem;padding:4px 14px;border-radius:var(--radius-pill);margin-top:6px} /* Stara naslovnica: hero, stats */ .hero-grid{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:24px} .hero-art{display:flex;align-items:flex-end;justify-content:center} .hero-art img{max-height:380px;width:auto;filter:drop-shadow(0 12px 20px rgba(39,50,111,.25))} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:22px 26px;margin-top:40px} .stats .stat{text-align:center} .stats .num{font-family:var(--font-heading);color:var(--pink);font-size:1.8rem;line-height:1.1} .stats .lab{font-size:.85rem;color:var(--ink-soft)} /* Osnivači (stara naslovnica/about) */ .founders{background:var(--sky-soft)} .founder{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px 30px;margin-top:24px} .founder .avatar img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--sky)} .founder h3{font-size:1.3rem;margin:0 0 .2em} .founder .role{color:var(--pink);font-weight:700;font-size:.95rem;margin-bottom:10px} .founder .badge{display:inline-block;background:var(--sky-soft);color:var(--navy);font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:var(--radius-pill);margin-top:10px} /* Franšizni popis sa zvjezdicom */ .fr-list li{position:relative;padding-left:32px;margin-bottom:12px} .fr-list .star{position:absolute;left:0;color:var(--pink)} /* Proof band */ .proof{padding:0} .proof .ph{background: radial-gradient(circle at 85% 20%,rgba(227,34,133,.28) 0,transparent 260px), radial-gradient(circle at 12% 80%,rgba(178,223,243,.28) 0,transparent 280px), var(--navy); padding:64px 0;color:var(--sky);text-align:center} .proof .display{color:#fff} .proof .in{max-width:720px;margin:0 auto} /* Stare blog kartice */ .post{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;transition:transform .15s,box-shadow .15s} .post:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .post .thumb img{width:100%;height:190px;object-fit:cover} .post .body{padding:20px 22px 24px} .post .cat{display:inline-block;font-size:.78rem;color:var(--pink);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} .post h3{font-size:1.15rem;margin:0 0 .4em} .post p{color:var(--ink-soft);font-size:.94rem;margin:0 0 12px} .post .meta{font-size:.83rem;color:var(--pink);font-weight:700} /* Stari citati */ .quotes .quote .mark{font-family:var(--font-heading);color:var(--sky);font-size:2.4rem;line-height:1;margin-bottom:4px} .quotes .quote .who{font-family:var(--font-heading);color:var(--navy);margin-top:10px} .quotes .quote .where{font-size:.85rem;color:var(--ink-soft)} /* Stara kontakt sekcija na naslovnici */ section.contact{background: radial-gradient(circle at 85% 15%,rgba(227,34,133,.25) 0,transparent 240px), radial-gradient(circle at 10% 85%,rgba(178,223,243,.30) 0,transparent 260px), var(--navy);color:var(--sky)} section.contact .display{color:#fff} section.contact .lead{color:var(--sky)} .form-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(0,0,0,.25);padding:30px 28px;max-width:640px;margin-top:26px} .form-card input,.form-card textarea,.form-card select{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:var(--sky-soft);border:2px solid transparent;border-radius:var(--radius-sm);padding:.75em .9em;margin-bottom:14px} .form-card input:focus,.form-card textarea:focus{outline:none;background:#fff;border-color:var(--pink);box-shadow:0 0 0 4px rgba(227,34,133,.14)} .form-card .toggle{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap} .form-card .toggle button{font-family:var(--font-body);font-weight:700;font-size:.9rem;padding:.55em 1.1em;border-radius:var(--radius-pill);border:2px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer} .form-card .toggle button.active{border-color:var(--pink);color:var(--pink);background:var(--pink-soft)} .contact-info{margin-top:22px;color:var(--sky)} .contact-info a{color:#fff;font-weight:700;text-decoration:none} /* Ostalo iz prototipa */ .formok{display:none;background:#E8F5E9;color:#1B5E20;border:2px solid #A5D6A7;border-radius:var(--radius-md);padding:16px 18px;font-weight:700;text-align:center;margin-top:18px} .formcard{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:30px 28px} .formcard input,.formcard textarea,.formcard select{width:100%;font-family:var(--font-body);font-size:1rem;background:var(--sky-soft);border:2px solid transparent;border-radius:var(--radius-sm);padding:.75em .9em;margin-bottom:14px;color:var(--ink)} .formcard label{display:block;font-weight:700;color:var(--navy);font-size:.92rem;margin-bottom:6px} .recipe{background:var(--sky-soft);border-radius:var(--radius-md);padding:22px 24px;margin-bottom:18px;border:2px solid var(--sky)} .rmat,.rwhy{font-size:.94rem;color:var(--ink-soft)} .pcat{display:inline-block;font-size:.78rem;color:var(--pink);font-weight:700;text-transform:uppercase;letter-spacing:.06em} .pmeta{font-size:.85rem;color:var(--ink-soft)} .paper{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:24px 26px} .f2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid2 .card,.grid3 .card{display:flex;flex-direction:column} @media (max-width:960px){ .p-hero-grid,.hero-grid,.grid2,.grid3,.f2{grid-template-columns:1fr} .facts-grid{grid-template-columns:repeat(2,1fr)} .photogrid{grid-template-columns:repeat(2,1fr)} .founder{grid-template-columns:1fr;text-align:center;justify-items:center} .founder .avatar img{margin:0 auto} } @media (max-width:760px){ section{padding:52px 0} .stats,.facts-grid{grid-template-columns:repeat(2,1fr);row-gap:20px} .photogrid{grid-template-columns:1fr} .nav-links{display:none} .levels .level{grid-template-columns:44px 1fr;gap:12px} } /* Kontakt / forme — sitnice iz prototipa */ .formcard h3{font-size:1.3rem;margin:0 0 .3em} .formcard .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px} .formcard .fine{font-size:.82rem;color:var(--ink-soft);text-align:center;margin:14px 0 0} .formcard .btn{width:100%;margin-top:4px} .centre .more{display:inline-block;margin-top:8px;color:var(--pink);font-weight:700;text-decoration:none} .centres{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.centres{grid-template-columns:1fr}} /* ---------- Preostale klase iz prototipa (about, blog, superlab) ---------- */ .a-hero{background:linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 100%);padding:44px 0 52px} .a-hero h1{max-width:840px} .crumbs{font-size:.88rem;color:var(--ink-soft);margin-bottom:14px} .crumbs a{color:var(--navy);font-weight:600;text-decoration:none} .a-meta{font-size:.9rem;color:var(--ink-soft);margin-top:14px} .dot{color:var(--pink);margin:0 6px} article{max-width:760px;margin:0 auto;padding:56px 20px} article h2{font-size:1.6rem;margin:1.6em 0 .5em} article h3{font-size:1.2rem;margin:1.4em 0 .4em} article p{margin:0 0 1.1em} article figure{margin:2em 0} article figure img{border-radius:var(--radius-md);box-shadow:var(--shadow-card)} article figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:8px;text-align:center} article ul li{position:relative;padding-left:26px;margin-bottom:8px} article ul li::before{content:'●';position:absolute;left:0;color:var(--pink);font-size:.7rem;top:.45em} .related{background:var(--sky-soft)} .related .wrap > .display{margin-bottom:24px} .rcard{display:block;background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:22px 24px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s} .rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .rcard h3{font-size:1.1rem;margin:0 0 .3em} .rcard p{margin:0;color:var(--ink-soft);font-size:.94rem} .pull{background:var(--sky-soft);border-left:6px solid var(--pink);border-radius:var(--radius-md);padding:24px 26px;font-family:var(--font-heading);color:var(--navy);font-size:1.15rem;line-height:1.4} .story .cols{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start} .research{background:var(--sky-soft)} .stats-band .stats{margin-top:0} .value{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:26px 22px} .value h3{font-size:1.1rem;margin:0 0 .4em} .value p{margin:0;color:var(--ink-soft);font-size:.95rem} .timeline{background:var(--white)} .tl{display:grid;gap:0;max-width:820px;margin:0 auto;position:relative} .tl-item{position:relative;padding:0 0 30px 110px} .tl-item::before{content:'';position:absolute;left:92px;top:14px;bottom:0;width:2px;background:var(--sky)} .tl-item:last-child::before{display:none} .tl-year{position:absolute;left:0;top:2px;width:84px;text-align:right;font-family:var(--font-heading);color:var(--pink);font-size:1.1rem} .tl-item::after{content:'';position:absolute;left:87px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--pink);border:3px solid var(--white);box-shadow:0 0 0 2px var(--sky)} .tl-item h3{font-size:1.1rem;margin:0 0 .3em} .tl-item p{margin:0;color:var(--ink-soft);font-size:.96rem} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .tags span{background:var(--sky-soft);color:var(--navy);font-weight:600;font-size:.82rem;padding:5px 13px;border-radius:var(--radius-pill)} .tag{display:inline-block;background:var(--pink-soft);color:var(--pink);font-weight:700;font-size:.8rem;padding:5px 13px;border-radius:var(--radius-pill)} .cover,.page{border-radius:var(--radius-md);box-shadow:var(--shadow-card)} .ni{font-size:1.8rem;display:block;margin-bottom:8px;line-height:1} .tt{font-family:var(--font-heading);color:var(--pink);font-size:.9rem} .tb{font-family:var(--font-heading);color:var(--navy);font-size:1.05rem;margin:2px 0 4px} .postfeat{text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s} .postfeat:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .postfeat .pf{padding:34px 34px 34px 6px} .postfeat .pf h2{font-size:1.5rem;margin:.2em 0 .4em} .postfeat .pf p{color:var(--ink-soft);margin:0 0 14px} .postcard .pc,.postlist .pc{padding:20px 22px 24px} .postlist > a{text-decoration:none;color:inherit} .postlist .postcard h3{font-size:1.12rem;margin:.3em 0 .4em} .postlist .postcard p{color:var(--ink-soft);font-size:.94rem;margin:0 0 12px} @media (max-width:900px){ .story .cols{grid-template-columns:1fr} .tl-item{padding-left:0;padding-top:26px} .tl-item::before,.tl-item::after{display:none} .tl-year{position:static;width:auto;text-align:left;margin-bottom:4px} .postfeat .pf{padding:26px 24px} } /* .pcard bez fotografije (franšiza, programi u prototipu) */ .pcard > h3{font-size:1.35rem;margin:0 0 .35em} .pcard > p{color:var(--ink-soft);font-size:.96rem;margin:0 0 14px} .pcard > .age{display:inline-block;background:var(--sky);color:var(--navy);font-weight:700;font-size:.82rem;padding:4px 14px;border-radius:var(--radius-pill)} .pcard > .more{display:inline-block;margin-top:14px;font-family:var(--font-heading);color:var(--pink)} .pcard > .ico{font-size:2rem;display:block;margin-bottom:10px;line-height:1} img.ico{height:48px;width:auto;margin-bottom:12px} /* B2B — i stari .p-hero mora biti u poslovnom tonu */ .b2b .p-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%);color:#DCE3F5;padding:20px 0 64px} .b2b .p-hero h1,.b2b .p-hero .display{color:#fff} .b2b .p-hero .lead{color:#C8D2EC} .b2b .p-hero .crumb{color:#A8B4D8} .b2b .p-hero .crumb a{color:var(--sky)} .b2b .chip{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.25)} .b2b .p-hero-art .frame img{border-color:rgba(255,255,255,.16)} .b2b .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .b2b .btn-ghost:hover{background:rgba(255,255,255,.1)} .b2b section.facts .wrap{transform:translateY(-32px)} .b2b .pcard,.b2b .value,.b2b .level{border-radius:var(--radius-sm);box-shadow:var(--shadow-card)} .b2b .level{border-left-color:var(--navy)} /* ---------- Konverzijski landing (franchise.superclever.com) ---------- */ .lp-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(39,50,111,.08)} .b2b .lp-head{background:var(--navy-dark)} .b2b .lp-head .logo .a{color:#fff} .lp-head .in{max-width:var(--container-max);margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:68px} .lp-cta-sm{background:var(--pink);color:#fff;padding:.6em 1.3em;border-radius:var(--radius-pill);text-decoration:none;font-family:var(--font-heading);font-size:.95rem;box-shadow:0 6px 18px rgba(227,34,133,.35)} .lp-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%);padding:56px 0 64px;color:#DCE3F5} .lp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .lp-hero h1,.lp-hero .display{color:#fff;font-size:clamp(2rem,4.6vw,3rem)} .lp-hero h1 .hi{color:var(--sky)} .lp-hero .lead{margin:20px 0 24px;color:#C8D2EC} .ticks{display:grid;gap:10px;margin-top:8px} .ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:#DCE3F5} .ticks .ck{color:var(--sky);font-weight:800} .trust{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:26px;color:#A8B4D8;font-size:.9rem} .trust b{color:#fff;font-family:var(--font-heading);font-weight:400} .lp-hero .scform{margin:0;max-width:none} .lp-hero .scform h2{font-size:1.4rem;margin:0 0 .2em} .lp-foot{background:var(--navy-dark);padding:34px 0;text-align:center;color:var(--sky);font-size:.9rem} .lp-foot a{color:#fff;text-decoration:none} @media(max-width:900px){.lp-grid{grid-template-columns:1fr}} /* Samostalna fotografija u .photoband traci ide punom širinom */ .photoband > img:only-child, .photoband > figure:only-child{grid-column:1/-1} .photoband > img:only-child{aspect-ratio:21/9;object-fit:cover} /* Sprječavanje vodoravnog prelijevanja na uskim ekranima */ .socials{flex-wrap:wrap} .foot-grid > div,.hero-stats__item,.facts .fact,.stats .stat{min-width:0} .foot-grid a,.infocard a,.foot-about{overflow-wrap:anywhere} /* ---------- Naslovi sekcija na unutarnjim stranicama idu na sredinu ---------- Centriramo samo ono što je izravno dijete .wrap-a (naslov sekcije); isti razredi unutar .split / .p-hero-grid / .cols ostaju lijevo poravnati. */ section > .wrap > .eyebrow, section > .wrap > h2.display, section > .wrap > h1.display, section > .wrap > .lead, section > .wrap > p.body{text-align:center;margin-left:auto;margin-right:auto} section > .wrap > .lead{max-width:680px} section > .wrap > .p-hero-cta, section > .wrap > .cta-btns{justify-content:center} /* Hero programa i landinga ostaje lijevo — tamo je tekst uz sliku */ .p-hero > .wrap > .crumb, .lp-hero > .wrap > *{text-align:left} /* Okvir sa znanstvenim radom */ .paper .tag{margin-bottom:12px} .paper h3,.paper h4{font-size:1.1rem;margin:0 0 .5em} .paper .cite{font-size:.9rem;color:var(--ink-soft);margin-bottom:14px} .paper p{margin:0} /* ---------- Video (16:9, responzivno) ---------- */ .videoframe{position:relative;width:100%;max-width:860px;aspect-ratio:16/9;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 18px 44px rgba(39,50,111,.28);background:#000} .videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .videocap{text-align:center;font-size:.9rem;color:var(--ink-soft);margin-top:14px} .b2b .videocap{color:#A8B4D8} /* ---------- Traka društvenih mreža ---------- */ .social-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px} .social-band a{display:block;background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:22px 18px;text-align:center;text-decoration:none;transition:transform .15s,box-shadow .15s} .social-band a:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .social-band .n{display:block;font-family:var(--font-heading);color:var(--pink);font-size:1.7rem;line-height:1.1} .social-band .p{display:block;font-family:var(--font-heading);color:var(--navy);font-size:1rem;margin-top:4px} .social-band .s{display:block;font-size:.82rem;color:var(--ink-soft)} @media (max-width:760px){.social-band{grid-template-columns:repeat(2,1fr)}} /* ---------- Karta centara ---------- */ .mapwrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);border:3px solid var(--white)} #sc-map{height:460px;width:100%;background:var(--sky-soft);z-index:1} #sc-map .leaflet-container{font-family:var(--font-body)} .sc-pin span{display:block;width:22px;height:22px;border-radius:50%;background:var(--pink);border:3px solid #fff;box-shadow:0 2px 8px rgba(39,50,111,.45)} .leaflet-popup-content{font-family:var(--font-body);font-size:.92rem;line-height:1.5} .leaflet-popup-content strong{font-family:var(--font-heading);font-weight:400;color:var(--navy);font-size:1.02rem} .leaflet-popup-content a{color:var(--pink);font-weight:700;text-decoration:none} .maphint{font-size:.85rem;color:var(--ink-soft);text-align:center;margin-top:12px} /* Carousel centara — preslikan s produkcije */ #sc-centres{margin-top:34px} .centres__track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch} .centre{background:var(--white);border:2px solid var(--sky-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:24px 22px;display:flex;flex-direction:column;text-align:center} .centre__name{font-family:var(--font-heading);font-weight:400;color:var(--navy);font-size:1.12rem;margin:0 0 14px;line-height:1.25} .centre__row{display:flex;gap:9px;align-items:flex-start;justify-content:center;margin:0 0 7px;font-size:.88rem;color:var(--ink-soft);line-height:1.45;overflow-wrap:anywhere} .centre__ico{flex:0 0 auto;font-size:.95rem;line-height:1.4} .centre__row a{color:var(--pink);font-weight:600;text-decoration:none} .centre__row a:hover{text-decoration:underline} .centre__btn{margin-top:auto;padding-top:14px;background:none;border:0;color:var(--navy);font-family:var(--font-heading);font-size:.88rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .centre__btn:hover{color:var(--pink)} .centres__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px} .centres__arrow{width:42px;height:42px;border-radius:50%;border:2px solid var(--sky);background:var(--white);color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .centres__arrow:hover{background:var(--pink);border-color:var(--pink);color:#fff} .centres__dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:520px} .centres__dot{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--sky);cursor:pointer;transition:background .15s,transform .15s} .centres__dot:hover{transform:scale(1.25)} .centres__dot.is-active{background:var(--pink)} .centres__count{text-align:center;font-size:.83rem;color:var(--ink-soft);margin:12px 0 0} .centre--popup strong{display:block;font-family:var(--font-heading);font-weight:400;color:var(--navy);font-size:1.02rem;margin-bottom:4px} .centre--popup{min-width:200px} @media (max-width:1000px){.centres__track{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.centres__track{grid-template-columns:1fr}} @media (max-width:760px){#sc-map{height:360px}} /* ---------- Ljepljiva traka društvenih mreža (lijevi rub) ---------- */ .sc-social{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:2px} .sc-social a{position:relative;display:flex;align-items:center;gap:10px;width:46px;height:46px;padding:0 13px; background:var(--navy);color:#fff;text-decoration:none;overflow:hidden;white-space:nowrap; border-radius:0 var(--radius-sm) var(--radius-sm) 0;transition:width .22s ease,background .22s ease} .sc-social a:first-child{border-top-right-radius:var(--radius-md)} .sc-social a:last-child{border-bottom-right-radius:var(--radius-md)} .sc-social svg{width:20px;height:20px;flex:0 0 20px;fill:currentColor} .sc-social span{font-family:var(--font-heading);font-size:.88rem;opacity:0;transition:opacity .18s ease .04s} .sc-social a:hover,.sc-social a:focus-visible{width:150px;background:var(--brand)} .sc-social a:hover span,.sc-social a:focus-visible span{opacity:1} @media (max-width:900px){.sc-social{display:none}}