@charset "utf-8"; /* --------------------------------------------------------------- Sutra — vizuelni identitet izveden iz logotipa: tamnoplava podloga, narandžasta kao jedini akcenat i lukovi koji se šire iz tačke u reči „Sutra.“ — isti motiv kao u logotipu. --------------------------------------------------------------- */ @font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-RegularItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Clarity City";src:url("../fonts/ClarityCity-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap} :root{ --flame:#f60; --flame-lit:#ff8c3d; --hair:rgba(255,255,255,.16); --shell:min(1180px,100% - 2.5rem); --step:clamp(1rem,.6rem + 1.4vw,1.6rem); } /* Svetla tema je podrazumevana; tamna se uzima iz podešavanja sistema, a prekidač u podnožju (data-theme na ) nadjačava i jedno i drugo. */ :root,:root[data-theme="light"]{ color-scheme:light; --navy:#036; --navy-deep:#001f3d; --navy-ink:#00162b; --paper:#eceff4; --card:#fff; --ink:#0b1c2c; --ink-2:#5b6d80; --hair-ink:rgba(11,28,44,.12); --hover:rgba(0,51,102,.045); --track:rgba(11,28,44,.14); --knob:var(--navy); --link:var(--navy); --btn-hover:var(--navy); --shadow:rgba(0,31,61,.55); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --navy:#0e2740; --navy-deep:#0b2036; --navy-ink:#071624; --paper:#0a1523; --card:#132537; --ink:#e9eff5; --ink-2:#94aabf; --hair-ink:rgba(255,255,255,.14); --hover:rgba(255,255,255,.055); --track:rgba(255,255,255,.18); --knob:#e9eff5; --link:#8dbdf5; --btn-hover:var(--flame); --shadow:rgba(0,0,0,.6); } } :root[data-theme="dark"]{ color-scheme:dark; --navy:#0e2740; --navy-deep:#0b2036; --navy-ink:#071624; --paper:#0a1523; --card:#132537; --ink:#e9eff5; --ink-2:#94aabf; --hair-ink:rgba(255,255,255,.14); --hover:rgba(255,255,255,.055); --track:rgba(255,255,255,.18); --knob:#e9eff5; --link:#8dbdf5; --btn-hover:var(--flame); --shadow:rgba(0,0,0,.6); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font:400 clamp(1rem,.96rem + .18vw,1.075rem)/1.65 "Clarity City",system-ui,-apple-system,"Segoe UI",sans-serif; font-feature-settings:"ss01"; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:inherit} .shell{width:var(--shell);margin-inline:auto} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--flame);outline-offset:3px} /* eyebrow / utility type ------------------------------------------------ */ .util{ font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; font-variant-numeric:tabular-nums; } /* masthead -------------------------------------------------------------- */ .masthead{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--hair)} .masthead .shell{display:flex;align-items:center;gap:1rem;min-height:64px} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:900;letter-spacing:-.02em;font-size:1.15rem} .brand img{width:34px;height:34px} .masthead nav{margin-left:auto;display:flex;gap:1.4rem} .masthead nav a{text-decoration:none;color:rgba(255,255,255,.78);transition:color .18s} .masthead nav a:hover,.masthead nav a[aria-current]{color:#fff} .masthead nav a[aria-current]{box-shadow:0 2px 0 var(--flame)} /* tamnoplave trake (hero, zaglavlje epizode) ----------------------------- */ .horizon{background:var(--navy);color:#fff;position:relative;overflow:hidden;isolation:isolate} /* hero ------------------------------------------------------------------ */ .hero{padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,8vw,5.5rem)} .hero__inner{max-width:min(42ch,62%)} .hero h1{ font-weight:900;letter-spacing:-.045em;line-height:.86; font-size:clamp(4.2rem,17vw,11rem);margin:0 0 1.4rem;position:relative; } .hero h1 .dot{color:var(--flame)} /* izlazak sutrašnjice — lukovi kreću iz tačke u reči „Sutra.“ */ .sunrise{ --sunrise:200vw; position:absolute;left:100%;top:74%;width:var(--sunrise);height:var(--sunrise); transform:translate(-50%,-50%);overflow:visible;z-index:-1;pointer-events:none; } .sunrise .ray{fill:none;stroke:#fff;stroke-width:1.25;vector-effect:non-scaling-stroke} /* Na uskim ekranima je razmak u vw pretesan, pa se lukovi razmiču na ujednačen korak (~10vw): 8.4, 18, 28, 38, 49vw. */ @media (max-width:720px){ .sunrise .ray{transform-origin:50% 50%} .sunrise .ray:nth-child(1){transform:scale(2.10)} .sunrise .ray:nth-child(2){transform:scale(1.29)} .sunrise .ray:nth-child(3){transform:scale(1.17)} .sunrise .ray:nth-child(4){transform:scale(1.06)} .sunrise .ray:nth-child(5){transform:scale(0.94)} } .hero p{font-size:clamp(1.1rem,.98rem + .55vw,1.45rem);line-height:1.45;max-width:34ch;margin:0;color:rgba(255,255,255,.86)} .hero .util{color:var(--flame-lit);margin:0 0 1.5rem} .listen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;padding:0;list-style:none} .listen a{ display:inline-block;text-decoration:none;padding:.5rem .95rem; border:1px solid var(--hair);color:#fff;font-weight:500;font-size:.9rem; background:rgba(255,255,255,.04);transition:background .18s,border-color .18s; } .listen a:hover{background:var(--flame);border-color:var(--flame)} /* zvanične značke platformi — poravnate po visini, ne po širini */ .badges{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;margin-top:2.4rem} .badge{display:inline-flex;transition:opacity .18s,transform .18s} .badge img{display:block;width:auto} .badge:hover{opacity:.82;transform:translateY(-1px)} .badge--rss img{height:38px} .badge--apple img{height:40px} .badge--pocketcasts img{height:40px} .badge--spotify img{height:40px} /* latest episode -------------------------------------------------------- */ .latest{background:var(--navy-deep);color:#fff;padding-block:clamp(2.5rem,6vw,4rem)} .latest__grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start} .latest__grid img{width:100%;aspect-ratio:1;object-fit:cover} .latest .util{color:var(--flame-lit)} .latest h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:.7rem 0 .6rem} .latest h2 a{text-decoration:none} .latest h2 a:hover{color:var(--flame-lit)} .latest p{color:rgba(255,255,255,.8);margin:0 0 1.4rem;max-width:56ch} /* arhiva ---------------------------------------------------------------- */ .archive{padding-block:clamp(3rem,7vw,5rem)} .archive__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.6rem} .archive__head h2{font-size:1.1rem;font-weight:900;letter-spacing:-.01em;margin:0} .archive__head .count{color:var(--ink-2);font-size:.85rem;margin-left:auto} .year{display:flex;align-items:center;gap:1rem;margin:2.6rem 0 .8rem;color:var(--ink-2)} .year::after{content:"";flex:1;height:1px;background:var(--hair-ink)} .year:first-of-type{margin-top:0} .ep{ display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:1.1rem;align-items:center; padding:.85rem 0;border-bottom:1px solid var(--hair-ink);text-decoration:none;color:inherit; transition:background .16s; } .ep:hover{background:var(--hover)} .ep:hover .ep__title{color:var(--link)} .ep__art{width:64px;height:64px;object-fit:cover;background:var(--navy)} .ep__no{color:var(--flame);font-variant-numeric:tabular-nums;font-weight:700;font-size:.75rem;letter-spacing:.1em} .ep__title{font-weight:600;font-size:1.05rem;line-height:1.3;margin:.1rem 0 .15rem} .ep__sub{color:var(--ink-2);font-size:.9rem;line-height:1.4;margin:0; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .ep__meta{text-align:right;color:var(--ink-2);white-space:nowrap;font-size:.78rem;font-variant-numeric:tabular-nums} .ep__meta b{display:block;color:var(--ink);font-weight:600} /* stranica epizode ------------------------------------------------------ */ .ep-head{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(3.5rem,9vw,6rem)} .ep-head__inner{position:relative} .ep-head__inner h1{max-width:18ch} /* omot epizode kao atmosfera zaglavlja, a ne kao zaseban blok pored teksta */ .ep-head__wash{ position:absolute;inset:0;z-index:-1;pointer-events:none; background-size:cover;background-position:center; opacity:.5;filter:blur(46px) saturate(1.25);transform:scale(1.25); -webkit-mask-image:linear-gradient(100deg,transparent 8%,#000 62%,#000); mask-image:linear-gradient(100deg,transparent 8%,#000 62%,#000); } .ep-head .util{color:var(--flame-lit);margin:0 0 1rem} .ep-head h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem);line-height:1.05;letter-spacing:-.03em;font-weight:900;margin:0} .ep-head__sub{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:rgba(255,255,255,.84);margin:1rem 0 0;max-width:46ch} .ep-head .ep-head__facts{display:flex;gap:2rem;margin:2.4rem 0 0;color:rgba(255,255,255,.65);flex-wrap:wrap} .ep-head__facts span{display:block;color:#fff;font-weight:600;font-size:.95rem;letter-spacing:0;text-transform:none} /* plejer ---------------------------------------------------------------- */ .player{ background:var(--card);border:1px solid var(--hair-ink); box-shadow:0 18px 44px -28px var(--shadow); margin-top:clamp(-4.5rem,-7vw,-3rem);position:relative;z-index:2; --art:clamp(165px,17vw,180px); /* red je visok tačno koliko i omot: slika ostaje kvadratna, a karticа nema višak iznad/ispod njega */ display:grid;grid-template-columns:var(--art) minmax(0,1fr); grid-template-rows:minmax(var(--art),auto);align-items:center; } /* omot je leva ivica plejera — slika i kontrole su jedan objekat */ .player__art{position:relative;width:100%;height:auto;aspect-ratio:1;object-fit:cover} .player__main{padding:.6rem clamp(1.1rem,3vw,1.6rem);min-width:0;display:flex;flex-direction:column;justify-content:center} .player__now{color:var(--ink-2);margin:0 0 .85rem} .player__row{display:flex;align-items:center;gap:1rem} .player__play{ flex:none;width:58px;height:58px;border-radius:50%;border:0;background:var(--flame);color:#fff; display:grid;place-items:center;cursor:pointer;transition:transform .16s,background .16s; } .player__play:hover{background:var(--btn-hover);transform:scale(1.05)} .player__play svg{width:22px;height:22px;fill:currentColor} .player__body{flex:1;min-width:0} .player__scrub{ width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;margin:0;height:22px; } .player__scrub::-webkit-slider-runnable-track{height:6px;background:linear-gradient(var(--flame),var(--flame)) 0/var(--played,0%) 100% no-repeat,var(--track)} .player__scrub::-moz-range-track{height:6px;background:var(--track)} .player__scrub::-moz-range-progress{height:6px;background:var(--flame)} .player__scrub::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--knob);margin-top:-5px} .player__scrub::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--knob)} .player__times{display:flex;justify-content:space-between;color:var(--ink-2);font-size:.78rem;font-variant-numeric:tabular-nums;margin-top:.15rem} .player__aux{display:flex;gap:.4rem;flex:none} .player__aux button,.dl{ border:1px solid var(--hair-ink);background:transparent;color:var(--ink);cursor:pointer; font:inherit;font-size:.78rem;font-weight:600;padding:.42rem .6rem;min-width:44px; transition:background .16s,color .16s,border-color .16s; } .player__aux button:hover,.dl:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#fff} .dl{display:inline-block;text-decoration:none;margin-top:.9rem} audio{width:100%} /* poglavlja ------------------------------------------------------------- */ .chapters{margin-top:2.5rem} .chapters h2,.article h2.section{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600;margin:0 0 .6rem} .chapters ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-ink)} .chapters li{border-bottom:1px solid var(--hair-ink)} .chapters button{ display:flex;gap:1rem;width:100%;text-align:left;background:none;border:0;cursor:pointer; font:inherit;padding:.6rem 0;color:inherit;transition:color .16s; } .chapters button:hover{color:var(--flame)} .chapters time{color:var(--flame);font-variant-numeric:tabular-nums;font-weight:600;font-size:.85rem;flex:none;width:5.5ch} /* tekst epizode --------------------------------------------------------- */ .article{padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem)} .article__body{max-width:66ch;font-size:1.075rem} .article__body p{margin:0 0 1.35em} .article__body a{color:var(--link);text-decoration-color:var(--flame);text-underline-offset:3px;text-decoration-thickness:2px} .article__body a:hover{color:var(--flame)} .article__body ul{padding-left:1.1rem} .article__body li{margin-bottom:.4em} .article__body img{margin:2rem 0} .article__body strong{font-weight:600} /* prev/next ------------------------------------------------------------- */ .pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-ink);border-block:1px solid var(--hair-ink)} .pager a{background:var(--paper);padding:1.2rem 1.1rem;text-decoration:none;transition:background .16s} .pager a:hover{background:var(--card)} .pager a:last-child{text-align:right} .pager .util{color:var(--flame);display:block;margin-bottom:.3rem} .pager strong{font-weight:600;font-size:.98rem;line-height:1.3;display:block} .pager .empty{background:var(--paper)} /* podnožje -------------------------------------------------------------- */ .foot{background:var(--navy-ink);color:rgba(255,255,255,.72);padding-block:clamp(2.5rem,6vw,4rem)} .foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem} .foot h3{color:#fff;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .8rem;font-weight:600} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:.4rem} .foot a{color:rgba(255,255,255,.72);text-decoration:none} .foot a:hover{color:var(--flame-lit)} .foot__mark{display:flex;gap:.8rem;align-items:center;color:#fff;font-weight:900;font-size:1.05rem} .foot__mark img{width:40px;height:40px} .foot__bottom{ display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap; margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--hair); } .foot__legal{margin:0;font-size:.8rem;color:rgba(255,255,255,.5)} /* prekidač teme — nadjačava podešavanje sistema ------------------------- */ .theme{display:flex;align-items:center;gap:.7rem} .theme__label{color:rgba(255,255,255,.5)} .theme__set{display:inline-flex;border:1px solid var(--hair);border-radius:999px;overflow:hidden} .theme__set button{ font:inherit;font-size:.75rem;font-weight:600;padding:.34rem .8rem;border:0;cursor:pointer; background:transparent;color:rgba(255,255,255,.7);transition:background .16s,color .16s; } .theme__set button+button{border-left:1px solid var(--hair)} .theme__set button:hover{color:#fff} .theme__set button[aria-pressed="true"]{background:var(--flame);color:#fff} @media (max-width:720px){ .latest__grid{grid-template-columns:1fr} .player{--art:96px;grid-template-rows:auto;align-items:start} .player__main{padding-block:clamp(1rem,3vw,1.4rem)} .ep{grid-template-columns:52px minmax(0,1fr);gap:.9rem} .ep__art{width:52px;height:52px} .ep__meta{grid-column:2;text-align:left} .ep__meta b{display:inline;margin-right:.6rem} .player__aux{display:none} .pager{grid-template-columns:1fr} .pager a:last-child{text-align:left} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} }