/* t8-qa.css — T8 Q&A, 1:1 sa izvorom `T8 Q-A.html` (Direction B v2). Svaka vrednost pročitana iz inline stilova izvora; bez procene i bez derived spec-a. PAD = {m:22, t:44, d:80} → var(--pad); maxW 1440 → var(--maxw). NAPOMENA: etalon nema line-height, a base.css postavlja 1.6 → svaki element koji u izvoru NEMA line-height mora ovde dobiti `line-height: normal`. */ /* IZVOR razlikuje DVA omotača: · QA sekcija →
+
(sadržaj 1280 @1440) · hero/related →
+
(sadržaj 1440 @≥1600!) Zato .t8-inner NE sme imati padding — inače je na 1920/2560 uži za 2×PAD. */ .t8-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .t8-inner { max-width: var(--maxw); margin: 0 auto; } /* crvena završna tačka iz stmg_dot() — definiše se per-strana (lekcija I17: ispala je na T7). */ .dot { color: var(--red); } /* ══ 1. HERO (samo tekst) ═════════════════════════════════════════════════ */ .t8-hero { background: var(--bg); padding: 104px var(--pad) 72px; } .t8-hero__h1 { margin: 30px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 88px; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); max-width: 1200px; text-wrap: balance; } .t8-hero__intro { margin: 32px 0 0; max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--ink70); } @media (max-width: 1024px) { .t8-hero__h1 { font-size: 60px; } } @media (max-width: 600px) { .t8-hero { padding: 56px var(--pad) 44px; } .t8-hero__h1 { margin-top: 22px; font-size: 38px; } .t8-hero__intro { margin-top: 22px; font-size: 15.5px; } } /* ══ 2. FILTER PILULE (sticky) + AKORDEON ═════════════════════════════════ */ .t8-qa { background: var(--bg); padding-bottom: 96px; } .t8-pillbar { position: sticky; top: 80px; z-index: 20; background: var(--bg); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink15); padding: 24px 0; } .t8-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .t8-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; cursor: pointer; border-radius: 0; border: 1px solid var(--ink30); background: transparent; color: var(--ink70); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; line-height: normal; transition: background .25s, color .25s, border-color .25s; } .t8-pill__n { opacity: 0.5; } .t8-pill.is-active { border-color: var(--ink); background: var(--ink); color: #fff; } .t8-pill.is-active .t8-pill__n { opacity: 0.7; } .t8-accordion { border-top: 1.5px solid var(--ink); margin-top: 36px; } .t8-faq-row { border-bottom: 1px solid var(--ink15); background: transparent; transition: background .3s; } .t8-faq-row.is-open { background: var(--paper); } .t8-faq-head { width: 100%; display: grid; grid-template-columns: 56px 1fr 36px; gap: 20px; align-items: start; padding: 30px 0; cursor: pointer; background: none; border: 0; text-align: left; color: inherit; font: inherit; line-height: normal; /* `font: inherit` resetuje lh → mora POSLE (lekcija T5) */ } .t8-faq-num { font-family: var(--font-mono); font-size: 13px; color: var(--ink50); padding-top: 5px; letter-spacing: 0.04em; line-height: normal; } .t8-faq-row.is-open .t8-faq-num { color: var(--red); } .t8-faq-qwrap { min-width: 0; } .t8-faq-cat { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 9px; line-height: normal; } .t8-faq-q { display: block; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.24; letter-spacing: -0.015em; color: var(--ink); } /* ikona: izvor je TEKSTUALNI glif „+" / „×" u krugu (ne dve prečke) */ .t8-faq-ic { width: 36px; height: 36px; border-radius: 50%; margin-top: 2px; flex-shrink: 0; justify-self: end; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 20px; font-weight: 300; line-height: 1; transition: all .25s; } .t8-faq-ic::before { content: "+"; } .t8-faq-row.is-open .t8-faq-ic { border-color: var(--red); background: var(--red); color: #fff; transform: rotate(180deg); } .t8-faq-row.is-open .t8-faq-ic::before { content: "×"; } .t8-faq-panel { display: none; grid-template-columns: 56px 1fr 36px; gap: 20px; padding: 0 0 34px; } .t8-faq-row.is-open .t8-faq-panel { display: grid; } .t8-faq-panel__body { max-width: 820px; } /* izvor: maxWidth je na WRAPPER-u, ne na

*/ .t8-faq-a { margin: 0; font-size: 17px; line-height: 1.62; color: var(--ink70); } .t8-res-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 13px 19px; border: 1.5px solid var(--ink); background: var(--bg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); cursor: pointer; text-decoration: none; line-height: normal; transition: background .3s, color .3s, border-color .3s; } .t8-res-link:hover { background: var(--ink); color: #fff; } .t8-res-arrow { flex-shrink: 0; } .t8-res-label { font-weight: 600; } .t8-res-host { opacity: 0.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 600px) { .t8-qa { padding-bottom: 56px; } .t8-pillbar { position: static; top: auto; padding: 18px 0; } .t8-pill { padding: 9px 13px; font-size: 10.5px; } .t8-accordion { margin-top: 24px; } .t8-faq-head { grid-template-columns: 30px 1fr 30px; gap: 12px; padding: 22px 0; } .t8-faq-num { font-size: 12px; } .t8-faq-q { font-size: 18px; } .t8-faq-ic { width: 30px; height: 30px; font-size: 17px; } /* izvor: na mobilnom panel je 1 kolona bez gap-a i bez praznih ćelija */ .t8-faq-panel { grid-template-columns: 1fr; gap: 0; padding: 0 0 26px; } .t8-faq-panel__pad { display: none; } .t8-faq-a { font-size: 15px; } .t8-res-link { padding: 11px 15px; font-size: 10px; } } @media (max-width: 1024px) and (min-width: 601px) { .t8-faq-q { font-size: 21px; } } /* ══ 3. STILL HAVE QUESTIONS (ink) + Capability traka ═════════════════════ */ .t8-cta { background: var(--ink); color: #fff; padding: 120px var(--pad); } .t8-cta__top { max-width: 1100px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .t8-cta__h2 { margin: 34px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -0.035em; color: #fff; max-width: 960px; } .t8-cta__sub { margin: 28px 0 0; max-width: 600px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.72); } .t8-cta__btn { margin-top: 44px; } .t8-cap { max-width: var(--maxw); margin: 72px auto 0; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: nowrap; text-align: left; } .t8-cap__left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-start; } .t8-cap__badge { width: 36px; height: 44px; background: #fff; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--ink); letter-spacing: 0.05em; line-height: normal; } .t8-cap__name { font-family: var(--font-sans); font-size: 17px; font-weight: 700; white-space: nowrap; line-height: normal; } .t8-cap__meta { display: flex; gap: 0 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; line-height: normal; } .t8-cap__btn { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 600px) { .t8-cta { padding: 64px var(--pad); } .t8-cta__h2 { margin-top: 26px; font-size: 32px; } .t8-cta__sub { margin-top: 20px; font-size: 15px; } .t8-cta__btn { margin-top: 30px; } .t8-cap { margin-top: 44px; padding-top: 28px; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: center; } .t8-cap__left { gap: 14px; justify-content: center; width: 100%; } .t8-cap__name { font-size: 15px; } .t8-cap__meta { font-size: 10.5px; } } /* min-width:601 je OBAVEZNO — ovaj blok stoji POSLE mobilnog pa bi ga inače pregazio (48 umesto 32) */ @media (max-width: 1024px) and (min-width: 601px) { .t8-cta__h2 { font-size: 48px; } } /* ══ 4. RELATED LINKS (3 kartice) ═════════════════════════════════════════ */ .t8-related { background: var(--bg-deep); padding: 100px var(--pad); } .t8-related__lab { margin-bottom: 20px; } .t8-related__h2 { margin: 0 0 52px; font-family: var(--font-display); font-weight: 500; font-size: 52px; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); } .t8-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .rel-card { position: relative; border: 1px solid var(--ink15); background: var(--paper); padding: 36px; display: flex; flex-direction: column; gap: 0; height: 100%; cursor: pointer; text-decoration: none; color: inherit; transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s; } .rel-card:hover { transform: translateY(-5px); border-color: rgba(26,26,26,0.4); } .rel-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); } .rel-card:hover::before { transform: scaleX(1); } .rel-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .rel-card__kicker { color: var(--red); } .rel-card__kicker::before { background: var(--red); } .rel-card__idx { font-family: var(--font-mono); font-size: 12px; color: var(--ink30); letter-spacing: 0.06em; line-height: normal; } .rel-card__title { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: -0.028em; line-height: 1.0; color: var(--ink); margin-bottom: 16px; } .rel-card__desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink70); flex: 1; } .rel-card__cta { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ink15); } .rel-card__arrow { width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; line-height: normal; transition: background .3s, border-color .3s, color .3s, transform .3s; } .rel-card:hover .rel-card__arrow { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateX(3px); } .rel-card__go { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: normal; } @media (max-width: 1024px) and (min-width: 601px) { .t8-related__h2 { font-size: 40px; } } @media (max-width: 600px) { .t8-related { padding: 56px var(--pad); } .t8-related__lab { margin-bottom: 16px; } .t8-related__h2 { margin-bottom: 32px; font-size: 28px; } .t8-related__grid { grid-template-columns: 1fr; gap: 14px; } .rel-card { padding: 26px; } .rel-card__top { margin-bottom: 26px; } .rel-card__title { font-size: 28px; } .rel-card__desc { font-size: 14px; } .rel-card__cta { margin-top: 28px; padding-top: 22px; } }