/* ═══════════════════════════════════════════════════════════════════════ PALETĂ ZONA PUBLICĂ — light SAU dark, în funcție de setting.mode din admin ═══════════════════════════════════════════════════════════════════════ */ :root { --bg: #0a0a0a; --bg-card: #111111; --bg-elevated: #161616; --bg-soft: #1a1a1a; --bg-hover: #1f1f1f; --text: #f0ece4; --text-strong: #ffffff; --text-muted: #aaaaaa; --text-soft: #888888; --text-faint: #666666; --border: #222222; --border-strong:#2a2a2a; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 10px 28px rgba(0,0,0,.6); --bg2: #111111; --bg3: #161616; --border2: #2a2a2a; --muted: #888888; --nav-bg: #000000; --nav-text: #ffffff; --nav-link: #aaaaaa; --nav-hover-bg: #1a1a1a; --orange: #f26522; --orange2: #e05510; --orange-light: #f26522; --border-o: #f2652233; } /* ═══════════════════════════════════════════════════════════════════════ FORȚAT DARK — aplicat pe pagini cu class="theme-dark" pe (cont/_header.php, admin/dashboard.php — rămân întotdeauna dark). ═══════════════════════════════════════════════════════════════════════ */ html.theme-dark { --bg: #0a0a0a; --bg-card: #111111; --bg-elevated: #161616; --bg-soft: #1a1a1a; --bg-hover: #1f1f1f; --text: #f0ece4; --text-strong: #ffffff; --text-muted: #aaaaaa; --text-soft: #888888; --text-faint: #666666; --border: #222222; --border-strong:#2a2a2a; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 10px 28px rgba(0,0,0,.6); --bg2: #111111; --bg3: #161616; --border2: #2a2a2a; --muted: #888888; --nav-bg: #000000; --nav-text: #ffffff; --nav-link: #aaaaaa; --nav-hover-bg: #1a1a1a; } body { background: var(--bg) !important; color: var(--text); } /* Secțiunile care rămân DARK pe site-ul light primesc variabile de text inversate ca să păstreze textul deschis pe fundal închis. */ :root:not(.theme-dark) .topbar, :root:not(.theme-dark) nav, :root:not(.theme-dark) .hero, :root:not(.theme-dark) .prod-hero, :root:not(.theme-dark) .page-hero, :root:not(.theme-dark) .page-header, :root:not(.theme-dark) .breadcrumb, :root:not(.theme-dark) .showcase, :root:not(.theme-dark) footer, :root:not(.theme-dark) .stats-bar, :root:not(.theme-dark) .cnav { --text: #f0ece4; --text-strong: #ffffff; --text-muted: #aaaaaa; --text-soft: #888888; --text-faint: #666666; } /* Butoane primary (orange bg) păstrează text alb indiferent de temă */ :root:not(.theme-dark) .btn-primary, :root:not(.theme-dark) .btn-orange, :root:not(.theme-dark) .btn-add-cart, :root:not(.theme-dark) .product-badge, :root:not(.theme-dark) .stat-num, :root:not(.theme-dark) .nav-imprimanta .ni-beta { --text-strong: #ffffff; color: #ffffff; } /* ═══════════════════════════════════════════════════════════════════════ OPTIMIZĂRI MOBILE — aplicate global pe toate paginile (publice + cont). Țintesc clase comune: .prod-hero, .calc-inner, .opt-btn, .how-grid, tabele, inputs, butoane. Folosesc !important doar unde e necesar pentru a suprascrie reguli inline din pagini individuale. ═══════════════════════════════════════════════════════════════════════ */ /* Scale fluid pentru containere (pe sub 1024px reorganizez înainte) */ @media (max-width: 1024px) { .prod-hero-inner, .page-hero-inner, .page-header-inner, .calc-inner, .hero-inner, .showcase-inner, .calc-wrap, .b2b-band { grid-template-columns: 1fr !important; gap: 32px !important; } } /* Tablete + telefoane mari (≤768px) */ @media (max-width: 768px) { /* Container padding mai mic */ .nav-inner, .cnav-in, .topbar .inner, .breadcrumb .breadcrumb-inner, .prod-hero-inner, .page-hero-inner, .page-header-inner, .hero-inner, .showcase-inner, .calc-inner, .calc-wrap, .section-inner, .footer-grid, .footer-bottom { padding-left: 16px !important; padding-right: 16px !important; } /* Imagini hero produs — scalează în loc de înălțime fixă */ .prod-img, .prod-hero img, .page-hero img { height: auto !important; max-height: 240px; width: 100%; object-fit: cover; } /* Fonturi pe mobil — h1 mare și impactant pentru hero */ h1 { font-size: 48px !important; line-height: 1.0 !important; letter-spacing: -1px; } h2, .s-title, .section-title, .showcase-text h2, .calc-info h2 { font-size: 28px !important; line-height: 1.15 !important; } h3 { font-size: 18px !important; } /* Logo + header nav uniformizat pe mobil (toate paginile la fel) */ nav, nav.nav, .cnav { min-height: 60px !important; } nav .nav-inner, .cnav .cnav-in { min-height: 60px !important; } nav .logo, nav.nav .logo, nav > a, .cnav .clogo { font-size: 22px !important; } nav .logo svg, nav.nav .logo svg, nav > a svg, .cnav .clogo svg, .cnav .clogo img { height: 34px !important; } nav .logo span, nav > a span, .cnav .clogo span { font-size: 22px !important; } /* Touch targets — butoane min 44px (recomandare Apple/Material) */ .btn, .btn-primary, .btn-orange, .btn-outline, .btn-lg, .btn-calc, .btn-add-cart, .opt-btn, .tiraj-btn, .hcalc-pill, .pill, .nav-imprimanta, .btn-login { min-height: 44px; padding-top: 11px !important; padding-bottom: 11px !important; } /* Inputs/selects/textarea — min 44px și 16px font (previne zoom iOS) */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea, .form-control, .qty-wrap input, .calc-select { font-size: 16px !important; min-height: 44px; } /* Checkbox-uri / radio mai mari */ input[type="checkbox"], input[type="radio"], .chk input, .check-item input { width: 20px !important; height: 20px !important; transform: scale(1.1); } /* Butoane "opțiune" pe rând întreg ca să nu se taie textul */ .opt-btns, .pill-row, .finisare-checks, .check-row { gap: 8px !important; } .opt-btn, .pill, .check-item { flex: 1 1 calc(50% - 4px); min-width: 0; text-align: center; } /* Pași "Cum funcționează" — pe 2 coloane sub 768px */ .how-grid, .steps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .how-step { padding: 18px 14px !important; border-right: none !important; } .step-num, .how-step .step-num { font-size: 36px !important; } /* Grid-uri produse / categorii — 2 coloane */ .cats-grid, .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Stats bar — 2x2 */ .stats-inner { grid-template-columns: repeat(2, 1fr) !important; } .stat { padding: 6px !important; } .stat:nth-child(2n) { border-right: none !important; } /* Tabele cu scroll horizontal dacă e nevoie */ .price-table-wrap, .specs-table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { font-size: 13px; } /* Hero cu padding mai mic */ .hero, .prod-hero, .page-hero, .page-header { padding: 36px 0 !important; } /* Slogan / subtitle hero — mai mare și mai contrastat pe mobil */ body .hero-sub, body .prod-hero-sub, body .page-hero-sub { font-size: 20px !important; line-height: 1.5 !important; max-width: 100% !important; color: #ffffff !important; font-weight: 500 !important; } .hero-eyebrow { font-size: 11px !important; padding: 5px 12px !important; } /* Footer compactat */ .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; } /* Modal-uri full-width pe mobil */ .modal { max-width: calc(100vw - 24px) !important; padding: 22px !important; } /* Calculator preț box mai compact */ .price-box, .price-result-panel, .calc-panel { padding: 18px !important; } .price-total-val, .price-val, .hcalc-tot-val { font-size: 28px !important; } } /* Telefoane mici (≤480px — iPhone SE etc.) */ @media (max-width: 480px) { body { font-size: 15px; } /* Padding și mai mic */ .nav-inner, .cnav-in, .topbar .inner, .prod-hero-inner, .page-hero-inner, .page-header-inner, .hero-inner, .showcase-inner, .calc-inner, .calc-wrap, .section-inner, .footer-grid, .footer-bottom { padding-left: 12px !important; padding-right: 12px !important; } h1 { font-size: 38px !important; line-height: 1.05 !important; } h2, .s-title, .section-title { font-size: 24px !important; } /* Logo + header pe ecrane mici (păstrăm proporții bune) */ nav, nav.nav, .cnav { min-height: 56px !important; } nav .nav-inner, .cnav .cnav-in { min-height: 56px !important; } nav .logo, nav.nav .logo, nav > a, .cnav .clogo { font-size: 20px !important; } nav .logo svg, nav.nav .logo svg, nav > a svg, .cnav .clogo svg, .cnav .clogo img { height: 30px !important; } nav .logo span, nav > a span, .cnav .clogo span { font-size: 20px !important; } .hero, .prod-hero, .page-hero, .page-header { padding: 24px 0 !important; } /* Subtitle pe ecrane foarte mici */ body .hero-sub, body .prod-hero-sub, body .page-hero-sub { font-size: 18px !important; } /* Pași 1 coloană pe ecrane foarte mici */ .how-grid, .steps-grid { grid-template-columns: 1fr !important; } /* Butoane opțiune pe rând întreg */ .opt-btn, .pill, .check-item { flex: 1 1 100% !important; } /* Footer text mai mic */ .footer-bottom { flex-direction: column; gap: 8px; text-align: center; font-size: 11px !important; } /* Topbar simplificat — ascundem secundar pe foarte mici (deja făcut în CSS pagini, dublez aici) */ .topbar-links:nth-child(2), .topbar .sep { display: none !important; } .topbar { font-size: 11px !important; } /* Section padding redus */ .section { padding: 32px 0 !important; } /* Cards padding mai mic */ .cat-body, .product-body, .testi-card, .b2b-band { padding: 14px !important; } .b2b-band { padding: 24px 16px !important; } /* Modal compactat */ .modal { padding: 18px !important; max-height: 88vh; } .modal h2 { font-size: 20px !important; } } /* Imagini protejate de overflow în orice context */ img { max-width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════════════ PRICE GATE — calculatoarele de pe paginile de produs sunt INACTIVE pentru vizitatori anonimi (body.pub-anon). Apare CTA "Login / Cont firmă". ═══════════════════════════════════════════════════════════════════════ */ body.pub-anon .calc-section .opt-btns, body.pub-anon .calc-section .opt-btn, body.pub-anon .calc-section .qty-wrap, body.pub-anon .calc-section input, body.pub-anon .calc-section select, body.pub-anon .calc-section textarea, body.pub-anon .calc-section button, body.pub-anon .calc-section .chk, body.pub-anon .calc-section .check-item, body.pub-anon .calc-section .pill, body.pub-anon .calc-section .form-control, body.pub-anon .calc-section label { pointer-events: none !important; opacity: 0.75 !important; cursor: not-allowed !important; user-select: none !important; } /* Pe imprimanta-online: dezactivăm formul DAR păstrăm activ upload-ul + detecția */ body.pub-anon .form-card .opt-btn, body.pub-anon .form-card .opt-btns, body.pub-anon .form-card .qty-wrap, body.pub-anon .form-card input, body.pub-anon .form-card select, body.pub-anon .form-card textarea, body.pub-anon .form-card button, body.pub-anon .form-card .fin-item, body.pub-anon .form-card .check-item, body.pub-anon .form-card label, body.pub-anon .form-card .submit-btn, body.pub-anon .form-card #submit-order { pointer-events: none !important; opacity: 0.75 !important; cursor: not-allowed !important; user-select: none !important; } /* Excepție: upload-ul rămâne activ pe imprimanta-online pentru demonstrație */ body.pub-anon .drop-zone, body.pub-anon .drop-zone *, body.pub-anon #file-input, body.pub-anon .detected, body.pub-anon .detected * { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; user-select: auto !important; } body.pub-anon .calc-section .price-result-panel, body.pub-anon .calc-section .price-result, body.pub-anon .calc-section .price-box, body.pub-anon .calc-section .price-row { display: none !important; } body.pub-anon .price-mask-cta, body.pub-anon .price-mask-note { display: none !important; } /* CTA prominentă jos pe calculator pentru anonimi */ .po-pricegate-cta { display: none; margin: 0 auto 28px; max-width: 720px; width: calc(100% - 48px); padding: 24px 24px; background: linear-gradient(135deg, rgba(242,101,34,.12), rgba(242,101,34,.04)); border: 2px solid var(--orange); border-radius: 12px; text-align: center; flex-direction: column; align-items: center; gap: 12px; } body.pub-anon .po-pricegate-cta { display: flex; } .po-pricegate-cta .pgc-title { font-size: 17px; font-weight: 700; color: var(--text-strong); line-height: 1.3; } .po-pricegate-cta .pgc-sub { font-size: 14px; color: var(--text-muted); line-height: 1.5; max-width: 420px; } .po-pricegate-cta .pgc-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 360px; } .po-pricegate-cta a { flex: 1 1 140px; padding: 13px 22px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .po-pricegate-cta .pgc-login { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); } .po-pricegate-cta .pgc-login:hover { border-color: var(--orange); color: var(--orange); } .po-pricegate-cta .pgc-reg { background: var(--orange); color: #fff; border: 1.5px solid var(--orange); } .po-pricegate-cta .pgc-reg:hover { background: var(--orange2); } /* Breadcrumb îmbunătățit pe mobil — font mai mare + tap target generos */ @media (max-width: 768px) { .breadcrumb { padding: 14px 0 !important; font-size: 14px !important; } .breadcrumb .inner { gap: 6px !important; flex-wrap: wrap; line-height: 1.4; } .breadcrumb a { padding: 6px 4px; min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242,101,34,.4); } .breadcrumb a:active { color: var(--orange) !important; } }