/* ═══════════════════════════════════════════════════════════════════════════ landing.css — DOAR pagina de prezentare (truckplan.app). Se încarcă DUPĂ app.css și refolosește variabilele lui: `.marketing` de pe aduce paleta întunecată (--bg, --surface, --line, --ink, --brand…), iar `.btn`, `.input`, `.select`, `.textarea`, `.field`, `.pill-*`, `.alert` vin tot de acolo. Aici stă doar ce e al paginii: nav, hero, machetă, carduri, prețuri, formular, întrebări, subsol. Separat de app.css cu un motiv: pagina asta o vede oricine, aplicația doar clienții. Bundle-ul aplicației nu are de ce să care stilurile de prezentare, iar testul de selectoare duplicate rulează pe app.css. Toate clasele au prefixul `ld-`, ca să nu se calce cu nimic din app.css. Mobile-first: regulile de bază sunt pentru 375px; @media lărgește. ═══════════════════════════════════════════════════════════════════════════ */ .ld { line-height: 1.6; -webkit-font-smoothing: antialiased; } .ld h1, .ld h2, .ld h3 { letter-spacing: -.02em; color: #ffffff; } .ld-wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } .ld-eyebrow { font-family: var(--mono); font-size: .8125rem; color: #60a5fa; margin-bottom: .75rem; } .ld-h2 { font-size: clamp(1.75rem, 4vw + .5rem, 2.5rem); line-height: 1.15; font-weight: 800; } .ld-lead { margin-top: 1rem; color: var(--ink-muted); max-width: 40rem; } .ld-section { padding: 4rem 0; } .ld-section-alt { background: rgba(255, 255, 255, .015); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Linkurile-buton: `.marketing a` din app.css le-ar face albastre. Aici specificitatea (0,1,2) bate (0,1,1), în ambele stări. */ .ld a.btn, .ld a.btn:hover { color: var(--brand-ink); text-decoration: none; } .ld a.btn-secondary, .ld a.btn-secondary:hover { color: #ffffff; } .ld .btn-secondary { background: transparent; border-color: rgba(255, 255, 255, .18); } .ld .btn-secondary:hover { background: rgba(255, 255, 255, .05); border-color: rgba(96, 165, 250, .6); } /* Bifa din liste și din bulinele planurilor. */ .ld-check { width: 1rem; height: 1rem; color: #60a5fa; flex: 0 0 auto; } /* ─── Bara de sus ────────────────────────────────────────────────────────── */ .ld-nav { position: sticky; top: 0; z-index: 50; background: rgba(7, 11, 22, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .ld-nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; } .ld-brand { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; color: #ffffff; } .ld .ld-brand, .ld .ld-brand:hover { color: #ffffff; text-decoration: none; } .ld-brand b { color: #60a5fa; font-weight: 800; } .ld-brand .icon { width: 1.375rem; height: 1.375rem; color: #60a5fa; } /* Pe telefon: doar sigla și butonul de meniu. */ .ld-nav-links, .ld-nav-actions { display: none; } .ld .ld-nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: .75rem .625rem; color: var(--ink-muted); font-weight: 500; font-size: .9375rem; } .ld .ld-nav-links a:hover { color: #ffffff; text-decoration: none; } .ld .ld-nav-login { color: var(--ink-muted); font-weight: 500; font-size: .9375rem; padding: .75rem .5rem; } .ld .ld-nav-login:hover { color: #ffffff; } .ld-lang { display: inline-flex; padding: .125rem; border: 1px solid var(--line); border-radius: .5rem; font-size: .75rem; font-weight: 600; } .ld .ld-lang a { display: inline-flex; align-items: center; min-height: 32px; padding: .375rem .625rem; border-radius: .375rem; color: var(--ink-muted); } .ld .ld-lang a[aria-current="true"] { background: var(--brand); color: #ffffff; } .ld-menu { position: relative; } .ld-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: .5rem; color: #ffffff; } .ld-menu summary::-webkit-details-marker { display: none; } .ld-menu summary .icon { width: 1.5rem; height: 1.5rem; } .ld-menu[open] summary { background: rgba(255, 255, 255, .06); } .ld-menu-panel { position: absolute; right: 0; top: calc(100% + .5rem); width: min(20rem, calc(100vw - 2.5rem)); display: grid; gap: .125rem; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .ld .ld-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: .5rem .875rem; border-radius: .5rem; color: var(--ink); font-weight: 500; } .ld .ld-menu-panel a:hover { background: var(--surface-alt); text-decoration: none; } .ld .ld-menu-panel .ld-menu-cta { color: #60a5fa; font-weight: 600; } .ld-menu-panel .ld-lang { margin: .5rem .875rem .25rem; justify-self: start; } .ld .ld-menu-panel .ld-lang a { min-height: 32px; padding: .375rem .625rem; } @media (min-width: 60rem) { .ld-nav-links, .ld-nav-actions { display: flex; align-items: center; gap: .25rem; } .ld-nav-actions { gap: .75rem; } .ld-menu { display: none; } } /* ─── Antet ──────────────────────────────────────────────────────────────── */ .ld-hero { position: relative; overflow: hidden; padding: 3rem 0 4rem; background: radial-gradient(60rem 30rem at 50% -10%, rgba(37, 99, 235, .28), transparent 70%); } .ld-hero-grid { display: grid; gap: 3rem; align-items: center; } .ld-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 999px; border: 1px solid rgba(96, 165, 250, .3); background: rgba(59, 130, 246, .1); color: #93c5fd; font-size: .8125rem; font-weight: 500; } .ld-badge::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: #60a5fa; } .ld-h1 { margin-top: 1.25rem; font-size: clamp(2rem, 6vw + .5rem, 3.5rem); line-height: 1.08; font-weight: 800; } .ld-h1 span { display: block; background: linear-gradient(90deg, #60a5fa, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; } .ld-hero-sub { margin-top: 1.25rem; font-size: 1.0625rem; color: var(--ink-muted); max-width: 36rem; } .ld-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; } .ld-actions .btn { min-height: 48px; padding: .75rem 1.5rem; font-size: 1rem; } .ld-chips { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .625rem 1.5rem; font-size: .875rem; color: var(--ink-muted); } .ld-chips span { display: inline-flex; align-items: center; gap: .5rem; } @media (min-width: 64rem) { .ld-hero { padding: 5rem 0 6rem; } .ld-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; } } /* ─── Macheta ecranului de curse ─────────────────────────────────────────── */ .ld-mock { position: relative; overflow: hidden; font-size: .8125rem; background: var(--surface-alt); border: 1px solid rgba(96, 165, 250, .18); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 80px -30px rgba(37, 99, 235, .7); } .ld-mock-bar { display: flex; align-items: center; justify-content: space-between; padding: .625rem .875rem; color: var(--ink-muted); background: var(--surface); border-bottom: 1px solid var(--line); } .ld-mock-bar strong { color: var(--ink); font-weight: 600; } .ld-mock-body { padding: .875rem; display: grid; gap: .75rem; } .ld-mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .ld-mock-head h3 { font-size: 1rem; } .ld-mock-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } .ld-kpi { padding: .625rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: .625rem; } .ld-kpi-l { color: var(--ink-muted); font-size: .75rem; } .ld-kpi-v { margin-top: .125rem; font-family: var(--mono); font-weight: 700; font-size: 1rem; color: #ffffff; } .ld-kpi-v small { margin-left: .375rem; font-family: var(--font); font-weight: 500; font-size: .75rem; color: var(--ok); } .ld-mock-table { width: 100%; border-collapse: collapse; } .ld-mock-table th { padding: .375rem .5rem; text-align: left; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-subtle); border-bottom: 1px solid var(--line); } .ld-mock-table td { padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: top; } .ld-mock-table tr:last-child td { border-bottom: 0; } .ld-mock-table .pill { font-size: .6875rem; } .ld-mock-code { font-family: var(--mono); color: #93c5fd; } .ld-mock-route { display: block; color: var(--ink); } .ld-mock-plate { font-family: var(--mono); white-space: nowrap; } .ld-mock-num { text-align: right; font-family: var(--mono); white-space: nowrap; } .ld-mock-alert { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; border-radius: .625rem; color: var(--ink); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); } .ld-mock-alert .icon { width: 1rem; height: 1rem; color: var(--warn); flex: 0 0 auto; } .ld .ld-mock-alert a { margin-left: auto; font-weight: 600; white-space: nowrap; } /* Sub 26rem coloana camionului nu mai încape; traseul rămâne. */ @media (max-width: 26rem) { .ld-mock-hide { display: none; } } /* ─── Venit − cost = rămâne ──────────────────────────────────────────────── */ .ld-flow { margin-top: 2.5rem; display: grid; gap: 1rem; } .ld-flow-card { padding: 1.5rem; background: rgba(7, 11, 22, .6); border: 1px solid var(--line); border-radius: 1rem; } .ld-flow-card h3 { font-size: 1rem; } .ld-flow-card p { margin-top: .5rem; color: var(--ink-muted); font-size: .9375rem; } .ld-flow-op { display: none; } @media (min-width: 48rem) { .ld-flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; } .ld-flow-op { display: block; font-family: var(--mono); font-size: 1.5rem; color: #60a5fa; } } /* ─── Ce face: șase carduri ──────────────────────────────────────────────── */ .ld-grid { margin-top: 2.5rem; display: grid; gap: 1rem; } .ld-feature { padding: 1.5rem; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); border-radius: 1rem; } .ld-feature:hover { border-color: rgba(96, 165, 250, .4); } .ld-feature-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(37, 99, 235, .15); color: #60a5fa; } .ld-feature-icon .icon { width: 1.25rem; height: 1.25rem; } .ld-feature h3 { margin-top: 1rem; font-size: 1.0625rem; } .ld-feature p { margin-top: .5rem; color: var(--ink-muted); font-size: .9375rem; } @media (min-width: 40rem) { .ld-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .ld-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } /* ─── Pentru cine ────────────────────────────────────────────────────────── */ .ld-roles { margin-top: 2.5rem; display: grid; gap: 1.5rem; } .ld-role { padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid var(--brand); } .ld-role h3 { font-size: 1.0625rem; } .ld-role p { margin-top: .5rem; color: var(--ink-muted); font-size: .9375rem; } @media (min-width: 48rem) { .ld-roles { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } /* ─── Prețuri ────────────────────────────────────────────────────────────── */ .ld-plans { margin-top: 2.5rem; display: grid; gap: 1.25rem; } .ld-plan { position: relative; display: flex; flex-direction: column; padding: 1.75rem; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); border-radius: 1rem; } .ld-plan-featured { border-color: rgba(59, 130, 246, .55); background: rgba(59, 130, 246, .05); } .ld-plan-tag { position: absolute; top: -.75rem; left: 1.5rem; padding: .25rem .625rem; border-radius: 999px; background: var(--brand); color: #ffffff; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .ld-plan h3 { font-size: 1.125rem; } .ld-price { margin-top: .75rem; display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; } .ld-price strong { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #ffffff; } .ld-price span { color: var(--ink-muted); font-size: .875rem; } .ld-price-year { margin-top: .5rem; font-size: .8125rem; color: var(--ink-subtle); } .ld-plan ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .625rem; flex: 1 1 auto; font-size: .9375rem; } .ld-plan li { display: flex; gap: .625rem; align-items: flex-start; } .ld-plan li .ld-check { margin-top: .2rem; } .ld-plan li:first-child { color: #ffffff; font-weight: 600; } .ld-plan .btn { margin-top: 1.75rem; min-height: 48px; } .ld-note { margin-top: 1.5rem; font-size: .875rem; color: var(--ink-subtle); max-width: 48rem; } @media (min-width: 48rem) { .ld-plans { grid-template-columns: repeat(3, 1fr); } } /* ─── Demonstrație ───────────────────────────────────────────────────────── */ .ld-contact { max-width: 40rem; } .ld-contact .ld-eyebrow, .ld-contact .ld-h2, .ld-contact .ld-lead { text-align: center; margin-left: auto; margin-right: auto; } .ld-form { margin-top: 2rem; padding: 1.5rem; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-lg); } .ld-form .field + .field { margin-top: 1.25rem; } .ld-form .label .subtle { font-weight: 400; } .ld-form .btn { margin-top: 1.5rem; min-height: 48px; width: 100%; } /* Honeypot-ul: scos din ecran, nu `display:none` — unii roboți sar câmpurile ascunse, dar îl completează pe unul „doar poziționat". */ .ld-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .ld-success { margin-top: 2rem; padding: 2.5rem 1.5rem; text-align: center; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); } .ld-success .icon { width: 2.5rem; height: 2.5rem; color: var(--ok); } .ld-success h3 { margin-top: .75rem; font-size: 1.25rem; } .ld-success p { margin-top: .5rem; color: var(--ink-muted); } .ld-or { margin-top: 1.5rem; text-align: center; font-size: .875rem; color: var(--ink-muted); } .ld .ld-or a { color: #ffffff; font-weight: 600; } .ld-contact .alert { margin-top: 1.5rem; } @media (min-width: 40rem) { .ld-form { padding: 2.25rem; } } /* ─── Întrebări frecvente ────────────────────────────────────────────────── */ .ld-faq { max-width: 46rem; } .ld-faq .ld-eyebrow, .ld-faq .ld-h2 { text-align: center; } .ld-faq-list { margin-top: 2.5rem; display: grid; gap: .75rem; } .ld-faq-list details { padding: 0 1.25rem; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); border-radius: .875rem; } .ld-faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1.125rem 0; font-weight: 600; color: #ffffff; } .ld-faq-list summary::-webkit-details-marker { display: none; } .ld-faq-list summary::after { content: "+"; flex: 0 0 auto; font-family: var(--mono); font-size: 1.25rem; color: #60a5fa; transition: transform .15s; } .ld-faq-list details[open] summary::after { transform: rotate(45deg); } .ld-faq-list details p { padding: 0 0 1.25rem; color: var(--ink-muted); font-size: .9375rem; } /* ─── Îndemnul final ─────────────────────────────────────────────────────── */ .ld-cta { padding: 3rem 1.25rem; text-align: center; border-radius: 1.5rem; border: 1px solid rgba(59, 130, 246, .3); background: radial-gradient(40rem 20rem at 50% 0%, rgba(37, 99, 235, .25), rgba(37, 99, 235, .06)); } .ld-cta .ld-lead { margin-left: auto; margin-right: auto; } .ld-cta .ld-actions { justify-content: center; } /* ─── Subsol ─────────────────────────────────────────────────────────────── */ .ld-footer { padding: 3rem 0 2.5rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-muted); } .ld-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; } .ld .ld-footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-muted); } .ld .ld-footer-links a:hover { color: #ffffff; } .ld-footer-entity { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); text-align: center; font-size: .8125rem; line-height: 1.7; color: var(--ink-subtle); } .ld-footer-entity strong { color: var(--ink-muted); font-weight: 600; } .ld-footer-bottom { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; font-size: .8125rem; color: var(--ink-subtle); } .ld-footer-bottom .ld-brand { font-size: 1rem; } @media (min-width: 48rem) { .ld-footer-bottom { flex-direction: row; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .ld-faq-list summary::after { transition: none; } }