/* ============================================================ Auto AS Premium — mockup v3 "FULL VOLUME" Si mai indraznet, si mai MARE: scara tipografica maximalista, paragrafe marite, titluri gigantice, galben la volum maxim. ACELEASI clase ca v1/v2 — HTML identic, doar haina difera. ============================================================ */ /* Fonturile NU se mai iau de la Google — sunt gazduite de noi, in `css/fonturi.css`, legat din inaintea acestui fisier. Un `@import` catre fonts.googleapis.com ar fi trimis IP-ul fiecarui vizitator la Google inainte de orice consimtamant, pe o pagina care nu are nici macar un formular. Vezi comentariul din fonturi.css. */ :root { --ink: #f4f3ec; --ink-soft: #cfd0c9; --muted: #a7adb8; /* mai deschis ca v2 — text mare cere contrast bun */ --paper: #0a0b0e; --white: #ffffff; --line: #26282f; --dark: #0a0b0e; --dark-2: #121419; --dark-line: #2a2d36; --dark-text: #eceae4; --dark-muted: #a7adb8; --gold: #fee702; --gold-soft: #fff35c; --gold-deep: #e8d413; --radius: 0px; /* zero rotunjire — muchii de metal */ /* COLTUL MARCII. Logoul e numai curbe; butoanele si etichetele erau numai unghiuri drepte. Compromisul: coltul din stanga sus ramane drept (ancora, „metalul"), celelalte trei se rotunjesc — asa cum se deschide curba masinii din logo. Ordinea in `border-radius`: stanga-sus, dreapta-sus, dreapta-jos, stanga-jos. */ --colt-mic: 0 12px 12px 12px; --colt: 0 16px 16px 16px; --colt-mare: 0 26px 26px 26px; --panel: #15171d; --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --display: "Anton", "Arial Narrow", Impact, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.7; font-size: 19px; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold); color: #131200; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #0a0b0e; } ::-webkit-scrollbar-thumb { background: #2c2f38; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(6, 7, 10, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--dark-line); } .site-header::after { content: ""; display: block; height: 3px; background: var(--gold); } .site-header .wrap { display: flex; align-items: center; gap: 30px; height: 88px; } .logo { display: flex; align-items: center; } .logo img { height: 78px; width: auto; display: block; } .logo .as { color: var(--gold); } .logo .premium { font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.72rem; color: var(--dark-muted); } nav.main-nav { display: flex; gap: 24px; margin-left: auto; align-items: center; align-self: stretch; } nav.main-nav a { color: var(--dark-muted); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 2px; border-bottom: 3px solid transparent; transition: color .15s; } nav.main-nav a:hover { color: var(--gold); } nav.main-nav a.active { color: var(--white); border-bottom-color: var(--gold); } .main-nav .nav-item { position: relative; height: 100%; display: flex; align-items: center; } .nav-item .caret { font-size: 0.6rem; opacity: 0.7; } .main-nav .dropdown { position: absolute; top: 100%; left: -14px; min-width: 280px; background: #101218; border: 1px solid var(--dark-line); border-top: 3px solid var(--gold); padding: 8px; display: none; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.65); } .main-nav .nav-item:hover .dropdown, .main-nav .nav-item:focus-within .dropdown { display: block; } .main-nav .dropdown a { display: block; padding: 11px 13px; color: var(--dark-muted); font-size: 0.92rem; border-bottom: none; text-transform: none; letter-spacing: 0; font-weight: 600; } .main-nav .dropdown a:hover { background: var(--gold); color: #131200; } .main-nav .dropdown a.all { margin-top: 6px; border-top: 1px solid var(--dark-line); color: var(--gold-soft); } /* ---------- Butoane — mari, drepte, cu umbra dura ---------- */ .btn { display: inline-block; padding: 17px 32px; border-radius: var(--colt); font-weight: 900; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; transition: transform .12s, box-shadow .15s, background .15s, color .15s; } .btn:hover { transform: translate(-3px, -3px); } .btn-gold { background: var(--gold); color: #131200; box-shadow: 6px 6px 0 rgba(254, 231, 2, 0.28); } .btn-gold:hover { box-shadow: 10px 10px 0 rgba(254, 231, 2, 0.35); } .btn-outline { border: 2px solid #4d515c; color: var(--dark-text); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-outline-dark { border: 2px solid #4d515c; color: var(--ink); } .btn-outline-dark:hover { border-color: var(--gold); color: var(--gold); } .btn-sm { padding: 12px 20px; font-size: 0.8rem; } /* ---------- Hero — GIGANTIC ---------- */ .hero { background: radial-gradient(1300px 600px at 80% -15%, #1e212b 0%, transparent 60%), var(--dark); color: var(--dark-text); padding: 100px 0 96px; position: relative; overflow: hidden; } .hero .kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #131200; border-radius: var(--colt-mic); padding: 9px 18px; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 34px; } .hero h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(3.4rem, 9vw, 7.6rem); line-height: 1.14; letter-spacing: 0; color: var(--white); max-width: none; } .hero h1 em { font-style: normal; color: var(--gold); display: inline-block; } .hero p.lead { margin: 34px 0 44px; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.6; color: var(--ink-soft); max-width: 760px; } .hero .cta-row { display: flex; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; } /* trust-bar — banda galbena, mai inalta, litere mai mari */ .trust-bar { background: var(--gold); color: #131200; } .trust-bar .wrap { display: flex; flex-wrap: wrap; gap: 10px 44px; padding: 22px 28px; font-size: 1rem; font-weight: 700; } .trust-bar strong { color: #131200; font-weight: 900; text-transform: uppercase; } /* ---------- Sectiuni — respiratie mare, titluri enorme ---------- */ section.block { padding: 110px 0; background: var(--paper); } section.block.alt { background: #101319; border-block: 1px solid var(--line); } .section-head { max-width: 940px; margin-bottom: 56px; } .section-head .kicker { display: inline-block; background: var(--gold); color: #131200; border-radius: var(--colt-mic); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 900; padding: 6px 14px; } .section-head h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.18; margin: 18px 0 18px; color: var(--white); } .section-head p { color: var(--muted); font-size: 1.18rem; line-height: 1.65; } .blog-cat-head h2, .cta-band h2, .cta-full h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; } /* paragrafele generice din sectiuni (inline-styled in HTML) mostenesc 19px din body */ /* ---------- Carduri ---------- */ .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid transparent; border-radius: var(--colt-mare); padding: 34px 28px; transition: transform .15s, border-color .15s, background .15s; display: flex; flex-direction: column; } .card p { flex: 1; } section.block.alt .card { background: #15181f; } .card:hover { transform: translateY(-6px); border-top-color: var(--gold); background: #191c25; } .card .icon { width: 54px; height: 54px; background: var(--gold); color: #131200; border-radius: var(--colt); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 20px; } .card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.25rem; margin-bottom: 10px; color: var(--white); } .card p { font-size: 1.02rem; color: var(--muted); line-height: 1.65; } .card .more { display: inline-block; margin-top: 18px; font-size: 0.84rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); align-self: flex-end; } .card .more:hover { color: var(--gold-soft); } .more { color: var(--gold); font-weight: 800; } .more:hover { color: var(--gold-soft); } /* audience */ .audience { padding: 40px 34px; color: var(--dark-text); background: var(--panel); border: 1px solid var(--line); border-top: 4px solid #3d414c; border-radius: var(--colt-mare); display: flex; flex-direction: column; } .audience h3 { color: var(--white); font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.02em; margin-bottom: 12px; } .audience p { color: var(--dark-muted); font-size: 1.02rem; flex: 1; } .audience .btn { margin-top: 26px; align-self: flex-start; } .audience.gold { background: linear-gradient(165deg, #2b270b, #161409); border-color: #5e5808; border-top-color: var(--gold); } /* pasi — cifre SOLIDE gigantice */ .steps { counter-reset: step; } .step { display: flex; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: flex-start; } .step:last-child { border-bottom: none; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--display); font-size: 4.6rem; line-height: 0.85; color: var(--gold); min-width: 110px; } .step h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.3rem; margin-bottom: 6px; color: var(--white); } .step p { font-size: 1.02rem; color: var(--muted); } /* checklist */ ul.check { list-style: none; } ul.check li { padding: 11px 0 11px 38px; position: relative; font-size: 1.08rem; } ul.check li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 900; font-size: 1.3rem; line-height: 1.4; } ul.check strong { color: var(--white); } /* split + media */ .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .media-ph { background: repeating-linear-gradient(45deg, #101318, #101318 16px, #15181f 16px, #15181f 32px); border: 2px dashed #4a4a20; border-radius: var(--colt-mare); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #737680; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 12px; } /* CTA band — panou cu rama galbena groasa */ .cta-band { background: var(--panel); color: var(--white); border-radius: var(--colt-mare); padding: 54px 50px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; border: 1px solid var(--line); border-left: 8px solid var(--gold); } .cta-band h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 8px; color: var(--white); } .cta-band p { color: var(--dark-muted); font-size: 1.08rem; } /* CTA full-bleed — GALBEN TOTAL, tipografie uriasa */ .cta-full { background: var(--gold); color: #131200; padding: 80px 0; } .cta-full .wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; } .cta-full h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.16; margin-bottom: 12px; color: #131200; } .cta-full p { color: rgba(19, 18, 0, 0.8); max-width: 800px; font-weight: 600; font-size: 1.15rem; } .cta-full .btn { flex-shrink: 0; } .cta-full .btn-gold { background: #131200; color: var(--gold); box-shadow: 6px 6px 0 rgba(19, 18, 0, 0.28); } .cta-full .nl-badge { background: #131200; color: var(--gold); } /* newsletter */ .nl-form { display: flex; gap: 12px; flex-wrap: wrap; } .nl-form input { padding: 16px 20px; border-radius: var(--colt); border: 3px solid #131200; background: var(--white); color: #131200; font: inherit; font-size: 1.05rem; min-width: 300px; font-weight: 700; } .nl-form input:focus { outline: 4px solid rgba(19, 18, 0, 0.3); outline-offset: 1px; } .nl-form input::placeholder { color: #6d6a50; } .nl-badge { display: inline-block; background: var(--gold); color: #131200; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; margin-bottom: 14px; } /* blog */ .cat-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .cat-chips a { border: 2px solid #3d414c; color: var(--dark-text); padding: 10px 18px; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transition: border-color .15s, color .15s, background .15s; } .cat-chips a:hover { border-color: var(--gold); color: #131200; background: var(--gold); } .post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .post-mini { background: var(--panel); border: 1px solid var(--line); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s, border-color .15s; } .post-mini:hover { transform: translateY(-4px); border-color: var(--gold); } .post-mini h3 { font-size: 1.02rem; line-height: 1.45; flex: 1; font-weight: 700; color: var(--ink); } .post-mini .soon { font-size: 0.72rem; color: var(--gold-deep); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; } .blog-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .blog-cat-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--white); letter-spacing: 0.02em; } @media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } } /* tabele */ table.price { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); overflow: hidden; } table.price th, table.price td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 1.05rem; } table.price th { background: var(--gold); color: #131200; font-weight: 900; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.1em; } table.price tr:last-child td { border-bottom: none; } table.price td.pret { font-family: var(--display); font-size: 1.3rem; color: var(--gold); white-space: nowrap; } /* formulare */ form.mock { display: grid; gap: 16px; } form.mock .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } form.mock label { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 7px; } form.mock input, form.mock select, form.mock textarea { width: 100%; padding: 15px 16px; border: 2px solid #363a44; border-radius: var(--colt-mic); font: inherit; font-size: 1.02rem; background: #0d0f14; color: var(--ink); } form.mock input::placeholder, form.mock textarea::placeholder { color: #5f636d; } form.mock input:disabled { background: #201f08; border-color: #5e5808; color: var(--gold-soft); font-weight: 800; } form.mock input:focus, form.mock select:focus, form.mock textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } form.mock .note { font-size: 0.85rem; color: var(--muted); } /* FAQ */ details.faq { border: 1px solid var(--line); border-left: 5px solid #363a44; background: var(--panel); border-radius: var(--colt); padding: 0 24px; margin-bottom: 14px; transition: border-color .15s; } details.faq[open] { border-left-color: var(--gold); } details.faq summary { cursor: pointer; font-weight: 800; font-size: 1.08rem; padding: 20px 0; list-style: none; position: relative; padding-right: 34px; color: var(--ink); } details.faq summary::after { content: "+"; position: absolute; right: 2px; top: 14px; color: var(--gold); font-size: 1.8rem; line-height: 1; font-weight: 400; } details.faq[open] summary::after { content: "–"; } details.faq p { padding: 0 0 20px; color: var(--muted); font-size: 1.02rem; } /* badge */ .badge { display: inline-block; border-radius: var(--colt-mic); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; background: var(--gold); color: #131200; } .badge.dark { background: #2d3039; color: var(--dark-text); } /* ---------- Footer ---------- */ .site-footer { background: #060708; color: var(--dark-muted); padding: 0 0 34px; margin-top: 100px; font-size: 1rem; border-top: 4px solid var(--gold); } .site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 70px 0 46px; border-bottom: 1px solid var(--dark-line); } .site-footer h4 { color: var(--gold); font-family: var(--display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; } .site-footer a:hover { color: var(--gold-soft); } .site-footer ul { list-style: none; } .site-footer li { margin-bottom: 10px; } .social-row { display: flex; gap: 12px; margin-top: 8px; } .social-row a { width: 42px; height: 42px; border: 2px solid var(--dark-line); display: flex; align-items: center; justify-content: center; color: var(--dark-muted); transition: background .15s, color .15s, border-color .15s, transform .12s; } .social-row a:hover { background: var(--gold); border-color: var(--gold); color: #131200; transform: translateY(-3px); } .social-row svg { width: 19px; height: 19px; fill: currentColor; } .footnote { padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.88rem; } .footnote a { color: var(--gold-soft); } /* ---------- Page hero (subpagini) — la fel de mare ---------- */ .page-hero { background: radial-gradient(1000px 460px at 82% -20%, #1e212b 0%, transparent 60%), var(--dark); color: var(--dark-text); padding: 84px 0 76px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .page-hero h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--white); font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1.14; max-width: 1050px; } .page-hero p { margin-top: 24px; color: var(--ink-soft); max-width: 760px; position: relative; z-index: 1; font-size: 1.22rem; line-height: 1.6; } .page-hero p strong { color: var(--gold); } .page-hero .kicker { display: inline-block; background: var(--gold); color: #131200; border-radius: var(--colt-mic); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 900; padding: 7px 15px; margin-bottom: 22px; } h2 { color: var(--white); } h3, h4 { color: var(--ink); } /* DIACRITICE ROMANESTI × font display: regula globala, peste orice valoare de mai sus — virgula lui Ș/Ț coboara mult sub linia de baza in Anton, caciulita lui Î/Ă urca peste inaltimea majusculelor. */ h2, h3, h4, h5, h6 { line-height: 1.32 !important; } h1 { line-height: 1.2 !important; } /* H1 mai strans (cerinta Alex) — suficient pt Î/Ș/Ț la dimensiunile mari */ /* ---------- Responsive ---------- */ @media (max-width: 900px) { body { font-size: 17px; } .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .split { grid-template-columns: 1fr; } .site-footer .cols { grid-template-columns: 1fr 1fr; } nav.main-nav { display: none; } /* mockup: fara meniu mobil */ .step::before { min-width: 70px; font-size: 3rem; } } @media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } form.mock .row { grid-template-columns: 1fr; } } /* ============================================================ PROTOTIP SCROLL IMERSIV — „O zi in service" (doar homepage) Totul e activ DOAR sub html.motion (adaugat de js/scroll.js cand prefers-reduced-motion NU e setat). Fara JS = static. ============================================================ */ /* Hero fixat pe ~2.8 ecrane, scenele in spate */ .hero-scenes, .steps-visual { display: none; } .motion .hero-scenes { display: block; } .motion .hero-pin { height: 280vh; position: relative; } .motion .hero-pin .hero { position: sticky; top: 0; height: 100vh; min-height: 620px; display: flex; align-items: center; padding: 0; } .motion .hero-pin .hero .wrap { position: relative; z-index: 2; width: 100%; } .hero-scenes { position: absolute; inset: 0; z-index: 0; } .hero-scenes .scene { position: absolute; inset: 0; opacity: 0; transform: scale(1.1); will-change: opacity, transform; display: flex; align-items: flex-end; justify-content: flex-end; padding: 88px 34px 26px; } .hero-scenes .scene span { display: none; } /* etichetele au fost pt faza de placeholder */ /* SCENELE REALE (generate in Flow, 01.09) + overlay pt lizibilitatea textului */ .scene.s1 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.28) 0%, rgba(10, 11, 14, 0.62) 88%), url("../assets/scenes/s1-exterior.jpg") center / cover no-repeat; } .scene.s2 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.35) 0%, rgba(10, 11, 14, 0.68) 90%), url("../assets/scenes/s2-hala.jpg") center / cover no-repeat; } .scene.s3 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.38) 0%, rgba(10, 11, 14, 0.66) 90%), url("../assets/scenes/s3-receptia.jpg") center / cover no-repeat; } /* coregrafia textului: lead + butoane apar in actul 3 (JS le anima) */ .motion .hero-pin .hero p.lead, .motion .hero-pin .hero .cta-row { opacity: 0; transform: translateY(20px); } .motion .hero-pin .hero::after { content: "SCROLL ▾"; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; letter-spacing: 0.32em; color: var(--gold); opacity: 0.75; z-index: 2; } /* Pasii 01–04: coloana vizuala sticky + cifra activa se umple */ .motion .steps-visual { display: block; position: sticky; top: 130px; align-self: start; aspect-ratio: 4/3; border: 1px solid var(--line); overflow: hidden; } .motion section:has(.steps-visual) .wrap { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: 56px; align-items: start; } .motion section:has(.steps-visual) .section-head { grid-column: 1 / -1; } .steps-visual .pane { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; display: flex; align-items: flex-end; padding: 22px; } .steps-visual .pane.on { opacity: 1; } .steps-visual .pane span { display: none; } /* etichetele au fost pt faza de placeholder */ .pane.p1 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.10) 0%, rgba(10, 11, 14, 0.32) 100%), url("../assets/scenes/s3-receptia.jpg") 62% center / cover no-repeat; } .pane.p2 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.10) 0%, rgba(10, 11, 14, 0.32) 100%), url("../assets/scenes/p2-diagnoza.jpg") center / cover no-repeat; } .pane.p3 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.10) 0%, rgba(10, 11, 14, 0.32) 100%), url("../assets/scenes/p3-rampa.jpg") center / cover no-repeat; } .pane.p4 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.10) 0%, rgba(10, 11, 14, 0.32) 100%), url("../assets/scenes/p4-predarea.jpg") center bottom / auto 142% no-repeat; } /* panourile paginii DAUNE (cei 5 pasi de dupa accident) */ .pane.ph span { display: inline-block; font-size: 0.72rem; letter-spacing: 0.16em; font-weight: 800; text-transform: uppercase; color: rgba(254, 231, 2, 0.6); border: 1px dashed rgba(254, 231, 2, 0.35); padding: 6px 13px; } .pane.d1 { background: radial-gradient(700px 380px at 30% 75%, rgba(254, 231, 2, 0.08) 0%, transparent 60%), linear-gradient(180deg, #131722 0%, #0a0b0e 75%); } .pane.d2 { background: radial-gradient(460px 460px at 60% 40%, rgba(254, 231, 2, 0.12) 0%, transparent 55%), #0f1117; } .pane.d3 { background: radial-gradient(600px 300px at 45% 85%, #1d202a 0%, transparent 65%), #0c0e13; } .pane.d4 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.10) 0%, rgba(10, 11, 14, 0.32) 100%), url("../assets/scenes/p3-rampa.jpg") center / cover no-repeat; } .pane.d5 { background: linear-gradient(180deg, rgba(10, 11, 14, 0.10) 0%, rgba(10, 11, 14, 0.32) 100%), url("../assets/scenes/p4-predarea.jpg") center bottom / auto 142% no-repeat; } /* pe homepage cifrele stau in contur si se UMPLU cu galben la pasul activ */ .motion section:has(.steps-visual) .step::before { color: transparent; -webkit-text-stroke: 2px var(--gold); transition: color 0.3s ease; } .motion section:has(.steps-visual) .step.is-active::before { color: var(--gold); } .motion section:has(.steps-visual) .step { opacity: 0.45; transition: opacity 0.3s ease; } .motion section:has(.steps-visual) .step.is-active { opacity: 1; } /* Reveal generic (JS adauga .rv + .in la intrarea in viewport) */ .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .rv.in { opacity: 1; transform: none; } @media (max-width: 900px) { /* pe mobil renuntam la pin si la coloana sticky — raman doar reveal-urile */ .motion .hero-pin { height: auto; } .motion .hero-pin .hero { position: static; height: auto; min-height: 0; padding: 100px 0 96px; display: block; } .motion .hero-pin .hero p.lead, .motion .hero-pin .hero .cta-row { opacity: 1; transform: none; } .motion .hero-pin .hero::after { display: none; } .hero-scenes .scene { opacity: 0 !important; } .motion .hero-scenes .scene.s1 { opacity: 1 !important; transform: none; } .motion section:has(.steps-visual) .wrap { display: block; } .motion .steps-visual { display: none; } }