/* ========================================================================== PAGINI DEDICATE: /voucher-cadou/ și /team-building/ (v2.11.0) -------------------------------------------------------------------------- Pagini statice, cu adresă proprie (pentru Google și pentru reclame). Se încarcă DUPĂ styles.css și refolosesc tot ce există acolo (antet, butoane, carduri de pachet, FAQ, footer, bara de jos de pe telefon). Aici stau doar piesele noi, toate cu prefixul lp- (landing page), ca să nu atingă nimic din pagina principală. Nu folosim .reveal-on-scroll: fără app.js, conținutul ar rămâne ascuns. ========================================================================== */ /* --- Antetul paginii (poză + titlu + butoane) ---------------------------------- */ .lp-hero { position: relative; max-width: none; min-height: 78vh; display: flex; align-items: flex-end; padding: calc(var(--fx-header-height, 76px) + 3rem) 2rem 4rem; background-color: var(--bg-main); background-size: cover; background-position: center; isolation: isolate; } .lp-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 15, 26, 0.35) 0%, rgba(10, 15, 26, 0.75) 55%, var(--bg-main) 100%); } .lp-hero-inner { max-width: 1100px; width: 100%; margin: 0 auto; } .lp-eyebrow { display: inline-block; margin-bottom: 0.9rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon-red); } .lp-hero h1 { max-width: 760px; margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; } .lp-hero h1 span { color: var(--neon-red); } .lp-lead { max-width: 620px; margin-bottom: 1.8rem; font-size: 1.12rem; line-height: 1.6; color: var(--text-secondary); } .lp-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; } .lp-facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.6rem; padding: 0; list-style: none; font-size: 0.9rem; color: var(--text-secondary); } .lp-facts li { display: inline-flex; align-items: center; gap: 0.45rem; } .lp-facts i { color: var(--neon-red); } /* --- Secțiuni ------------------------------------------------------------------- */ .lp-section { padding-top: 4rem; padding-bottom: 4rem; scroll-margin-top: var(--fx-header-height, 76px); } .lp-section .section-header { margin-bottom: 2.5rem; } .lp-inner { max-width: 1100px; margin: 0 auto; } /* Pași numerotați („Cum funcționează") */ .lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: pas; } .lp-steps li { position: relative; padding: 1.3rem 1.2rem 1.2rem 3.6rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); counter-increment: pas; } .lp-steps li::before { content: counter(pas); position: absolute; left: 1.1rem; top: 1.2rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--neon-red); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; } .lp-steps h3 { margin-bottom: 0.3rem; font-size: 1.05rem; } .lp-steps p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); } /* Carduri cu iconiță (beneficii / ce include) */ .lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .lp-card { padding: 1.4rem 1.3rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); } .lp-card i { display: inline-flex; margin-bottom: 0.8rem; font-size: 1.4rem; color: var(--neon-red); } .lp-card h3 { margin-bottom: 0.4rem; font-size: 1.08rem; } .lp-card p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); } /* Condiții (listă cu bife) */ .lp-conditions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.7rem 1.5rem; max-width: 900px; margin: 0 auto; padding: 1.4rem 1.5rem; list-style: none; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); } .lp-conditions li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; color: var(--text-secondary); } .lp-conditions i { margin-top: 0.2rem; color: #22c55e; } .lp-conditions strong { color: var(--text-primary); } .lp-note { max-width: 900px; margin: 1rem auto 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); text-align: center; } /* Pachetele: refolosesc .packages-grid / .package-card din styles.css. Butonul de pe card e un , deci îl întindem pe toată lățimea ca pe pagina principală. */ .lp-packages .package-card .btn { width: 100%; justify-content: center; text-decoration: none; } /* Blocul final cu îndemn */ .lp-cta { max-width: 900px; margin: 0 auto; padding: 2.4rem 2rem; text-align: center; background: linear-gradient(135deg, rgba(250, 0, 58, 0.12), rgba(250, 0, 58, 0.02)); border: 1px solid rgba(250, 0, 58, 0.35); border-radius: var(--radius-lg); } .lp-cta h2 { margin-bottom: 0.6rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); } .lp-cta p { max-width: 560px; margin: 0 auto 1.4rem; color: var(--text-secondary); line-height: 1.6; } .lp-cta .lp-actions { justify-content: center; } /* Firul de navigare (breadcrumb). E un