/* t7-careers.css — T7 Careers, 1:1 sa izvorom `T7 Careers.html` (Direction B v2).
Svaka vrednost pročitana iz inline stilova izvora; bez procene.
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`. */
.t7-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
/* crvena završna tačka iz stmg_dot() — izvor: `with STMG.`.
Definiše se per-strana (isto kao t1/t2/t3/t5/t8/t9); merni katalog ovo NE hvata — našao vizuelni gate. */
.dot { color: var(--red); }
/* section-label u hero-u: izvor color="rgba(255,255,255,0.7)" (CTA koristi 0.55 = --light) */
.section-label--light70 { color: rgba(255,255,255,0.7); }
.section-label--light70::before { background: rgba(255,255,255,0.7); }
/* ══ 1. HERO ══════════════════════════════════════════════════════════════ */
.t7-hero { position: relative; background: var(--ink); overflow: hidden; height: 720px; }
.t7-hero__img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
object-position: center 35%; filter: contrast(1.04) brightness(0.74) saturate(0.95);
transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.hero-wrap:hover .hero-img { transform: scale(1.05); }
.t7-hero__g1 { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,26,26,0.9) 0%, rgba(26,26,26,0.62) 46%, rgba(26,26,26,0.22) 100%); }
.t7-hero__g2 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0.32) 0%, transparent 26%, transparent 64%, rgba(26,26,26,0.55) 100%); }
.t7-hero__inner {
position: relative; max-width: var(--maxw); margin: 0 auto; height: 100%;
padding: 0 var(--pad); display: flex; flex-direction: column; justify-content: center;
}
.t7-hero__h1 {
margin: 28px 0 0; font-family: var(--font-display); font-weight: 500;
font-size: 96px; line-height: 0.94; letter-spacing: -0.04em; color: #fff; max-width: 1180px;
}
.t7-hero__p { margin: 32px 0 0; max-width: 660px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.84); }
.t7-hero__cta { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 1024px) {
.t7-hero { height: 600px; }
.t7-hero__h1 { font-size: 66px; }
}
@media (max-width: 600px) {
.t7-hero { height: 540px; }
.t7-hero__h1 { margin-top: 20px; font-size: 42px; }
.t7-hero__p { margin-top: 22px; font-size: 15.5px; }
.t7-hero__cta { margin-top: 28px; }
}
/* ══ 2. WHY STMG ══════════════════════════════════════════════════════════
Izvor ima DVA odvojena rendera. Desktop: sticky naslov+tracker levo,
3 skrolujuća panela desno (parallax). Stacked (≤1024): kartice, bez trackera. */
.t7-why { background: var(--bg); border-top: 1px solid var(--ink15); }
.t7-why__s { display: none; }
/* — desktop — */
.t7-why__d {
max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 88px; align-items: start;
}
.t7-why__sticky {
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column; justify-content: center; padding-right: 16px;
}
.t7-why__h2 {
margin: 26px 0 0; font-family: var(--font-display); font-weight: 500;
font-size: 56px; line-height: 1.0; letter-spacing: -0.035em; color: var(--ink);
max-width: 520px; text-wrap: balance;
}
.t7-why__accent { color: var(--red); }
.t7-why__track { margin-top: 52px; }
.t7-track {
display: flex; align-items: center; gap: 18px; padding: 16px 0;
border: 0; border-top: 1px solid var(--ink15); background: none;
width: 100%; text-align: left; cursor: pointer; line-height: normal;
}
.t7-track__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink30); width: 22px; transition: color .4s; line-height: normal; }
.t7-track__title { font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink30); transition: color .4s; line-height: normal; }
.t7-track__spacer { flex: 1; }
.t7-track__bar { height: 2px; width: 0; background: var(--red); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.t7-track.is-active .t7-track__num { color: var(--red); }
.t7-track.is-active .t7-track__title { color: var(--ink); }
.t7-track.is-active .t7-track__bar { width: 44px; }
.t7-why__panels { padding-top: 14vh; padding-bottom: 14vh; }
.t7-panel { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; }
.t7-panel__media { position: relative; height: 460px; overflow: hidden; margin-bottom: 34px; }
.t7-panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); will-change: transform; }
.t7-panel__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(26,26,26,0.5) 100%); }
.t7-panel__badge {
position: absolute; top: 24px; left: 24px; padding: 7px 13px;
font-family: var(--font-mono); font-size: 13px; color: #fff; background: var(--red);
letter-spacing: 0.06em; line-height: normal;
}
.t7-panel__h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 42px; letter-spacing: -0.028em; color: var(--ink); line-height: 1.0; }
.t7-panel__p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink70); max-width: 580px; }
/* — stacked (m/t) — */
@media (max-width: 1024px) {
/* izvor: stacked varijanta stavlja padding na , ne na unutrašnji kontejner */
.t7-why { padding: 96px var(--pad); }
.t7-why__d { display: none; }
.t7-why__s { display: block; }
.t7-why__s .t7-wrap { padding-left: 0; padding-right: 0; }
.t7-why__s .t7-why__h2 { margin: 0; font-size: 44px; max-width: 1080px; }
.t7-why__s-lab { margin-bottom: 22px; }
.t7-why__s-list { margin-top: 60px; display: flex; flex-direction: column; gap: 52px; }
.t7-scard {
display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center;
border-top: 1.5px solid var(--ink); padding-top: 36px;
}
.t7-scard__num { font-family: var(--font-mono); font-size: 12px; color: var(--red); letter-spacing: 0.08em; margin-bottom: 16px; line-height: normal; }
.t7-scard__h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -0.025em; color: var(--ink); line-height: 1.02; }
.t7-scard__p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink70); max-width: 420px; }
.t7-scard__media { position: relative; height: 300px; overflow: hidden; }
.t7-scard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); }
.t7-scard__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(26,26,26,0.4) 100%); }
}
@media (max-width: 600px) {
.t7-why { padding: 64px var(--pad); }
.t7-why__s .t7-why__h2 { font-size: 30px; }
.t7-why__s-lab { margin-bottom: 16px; }
.t7-why__s-list { margin-top: 40px; gap: 36px; }
.t7-scard { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
.t7-scard__h3 { font-size: 25px; }
.t7-scard__p { font-size: 14.5px; }
.t7-scard__media { height: 220px; }
}
/* ══ 3. LIFE AT STMG ═══════════════════════════════════════════════════════
Grid je FULL-BLEED (izvan padovanog wrap-a) — izvor: padding `0 ${m?0:4}px`. */
.t7-life { background: var(--bg); padding: 96px 0; }
.t7-life__lab { margin-bottom: 18px; }
.t7-life__h2wrap { margin-bottom: 44px; }
.t7-life__h2 {
margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 48px;
line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); max-width: 880px; text-wrap: balance;
}
.t7-life__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 4px; }
.life-frame { position: relative; height: 460px; overflow: hidden; }
.life-tile {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
filter: contrast(1.03) saturate(1.02); transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.life-frame:hover .life-tile { transform: scale(1.05); }
.life-frame__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(26,26,26,0.78) 100%); }
.life-frame__label {
position: absolute; left: 20px; bottom: 18px; font-family: var(--font-mono);
font-size: 11px; color: #fff; letter-spacing: 0.06em; text-transform: uppercase; line-height: normal;
}
@media (max-width: 1024px) {
.t7-life__h2 { font-size: 36px; }
.t7-life__grid { grid-template-columns: repeat(2, 1fr); }
.life-frame { height: 360px; }
}
@media (max-width: 600px) {
.t7-life { padding: 56px 0; }
.t7-life__lab { margin-bottom: 14px; }
.t7-life__h2wrap { margin-bottom: 28px; }
.t7-life__h2 { font-size: 26px; }
.t7-life__grid { grid-template-columns: 1fr; padding: 0; }
.life-frame { height: 300px; }
.life-frame__label { left: 14px; bottom: 14px; font-size: 10px; }
}
/* ══ 4. FROM THE TEAM ═════════════════════════════════════════════════════ */
.t7-voice { background: var(--bg-deep); padding: 110px var(--pad); border-top: 1px solid var(--ink15); }
.t7-voice .t7-wrap { padding-left: 0; padding-right: 0; } /* padding je već na sekciji (izvor) */
.t7-voice__lab { margin-bottom: 48px; }
.t7-voice__grid { display: grid; grid-template-columns: 420px 1fr; gap: 72px; align-items: center; }
.t7-voice__photo { position: relative; height: 520px; overflow: hidden; background: #9fb4c4; }
.t7-voice__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: contrast(1.02); }
.t7-voice__mark { font-family: var(--font-mono); font-size: 56px; color: var(--red); line-height: 0.4; height: 30px; }
.t7-voice__quote {
margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 32px;
line-height: 1.32; letter-spacing: -0.02em; color: var(--ink); max-width: 760px;
}
.t7-voice__who { margin-top: 36px; display: flex; align-items: center; gap: 16px; }
.t7-voice__line { width: 36px; height: 1.5px; background: var(--red); display: inline-block; flex: none; }
.t7-voice__name { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--ink); line-height: normal; }
.t7-voice__role { margin-top: 5px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink50); letter-spacing: 0.04em; line-height: normal; }
@media (max-width: 1024px) {
.t7-voice { padding: 110px var(--pad); }
.t7-voice__grid { grid-template-columns: 1fr; gap: 72px; }
.t7-voice__photo { height: 440px; }
.t7-voice__quote { font-size: 26px; }
}
@media (max-width: 600px) {
.t7-voice { padding: 64px var(--pad); }
.t7-voice__lab { margin-bottom: 32px; }
.t7-voice__grid { gap: 28px; }
.t7-voice__photo { height: 380px; }
.t7-voice__mark { font-size: 44px; height: 26px; }
.t7-voice__quote { font-size: 21px; }
.t7-voice__who { margin-top: 24px; }
.t7-voice__name { font-size: 15px; }
}
/* ══ 5. OPEN APPLICATION CTA (blue) ═══════════════════════════════════════ */
.t7-open { position: relative; background: var(--blue); color: #fff; padding: 130px var(--pad); text-align: center; overflow: hidden; }
.t7-open__img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
opacity: 0.22; mix-blend-mode: luminosity; filter: grayscale(0.3) contrast(1.05); pointer-events: none;
}
.t7-open__veil {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(15,37,64,0.82) 0%, rgba(15,37,64,0.9) 55%, rgba(15,37,64,0.95) 100%);
}
.t7-open__inner { position: relative; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.t7-open__h2 { margin: 34px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: 0.98; letter-spacing: -0.04em; color: #fff; }
.t7-open__p { margin: 30px 0 0; max-width: 600px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.8); }
.t7-open__cta { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.t7-open__note { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.03em; line-height: normal; }
@media (max-width: 1024px) { .t7-open__h2 { font-size: 52px; } }
@media (max-width: 600px) {
.t7-open { padding: 72px var(--pad); }
.t7-open__h2 { margin-top: 26px; font-size: 36px; }
.t7-open__p { margin-top: 22px; font-size: 15.5px; }
.t7-open__cta { margin-top: 30px; }
}
/* ── OTVORENE POZICIJE (nema u etalonu; renderuje se samo kad lista nije prazna) ──
Vizuelni jezik preuzet od reda tržišta na T1: isti okvir 1px ink, mono redni broj,
hover crvena strelica. Ništa novo nije izmišljeno. */
.t7-roles { padding: 120px var(--pad); background: var(--bg); line-height: normal; }
.t7-roles__inner { max-width: var(--maxw); margin: 0 auto; }
.t7-roles__h2 { margin: 20px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); max-width: 16ch; }
.t7-roles__list { margin-top: 48px; border: 1px solid var(--ink); }
.t7-role { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 16px; padding: 22px 28px; text-decoration: none; color: var(--ink); transition: background .18s ease; }
.t7-role + .t7-role { border-top: 1px solid var(--ink); }
.t7-role:hover { background: var(--ink04, rgba(26,26,26,0.04)); }
.t7-role__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink50, rgba(26,26,26,0.5)); }
.t7-role__body { display: flex; flex-direction: column; gap: 6px; }
.t7-role__title { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.t7-role__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink70); }
.t7-role__cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
@media (max-width: 1024px) { .t7-roles { padding: 96px var(--pad); } .t7-roles__h2 { font-size: 36px; } }
@media (max-width: 600px) {
.t7-roles { padding: 72px var(--pad); }
.t7-roles__h2 { font-size: 28px; max-width: none; }
.t7-role { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
.t7-role__cta { justify-self: start; }
}