/* * heroes/_hero-std.css — Hero standard 70/30 — Deviz Zugrav v4.4.0 * Include în pe orice pagină care folosește _hero-std.php */ /* ============================================================ HERO STANDARD — layout 70/30 ============================================================ */ .hero-std { margin-top: var(--nh); background: linear-gradient(135deg, #111827 0%, #0A2E5C 100%); position: relative; overflow: visible; /* nu hidden — permite shadow-uri să iasă */ } /* Radial gradient decorativ */ .hero-std__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 60%, rgba(232,117,44,.07), transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(33,150,243,.10), transparent 50%); pointer-events: none; } /* Grid 70/30 */ .hero-std__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 70fr 30fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 60px; min-height: clamp(380px, 52vh, 560px); } /* ============================================================ COL STÂNGA — text ============================================================ */ .hero-std__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } /* Badge */ .hero-std__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; margin-bottom: 20px; } .badge-or { color: #92400E; background: #FEF0E2; border: 1px solid rgba(245,158,75,.4); } .badge-gr { color: #166534; background: #DCFCE7; border: 1px solid rgba(34,197,94,.4); } .badge-bl { color: #1e40af; background: #EFF6FF; border: 1px solid rgba(147,197,253,.4);} .badge-pu { color: #6D28D9; background: #F3E8FF; border: 1px solid rgba(124,58,237,.3); } /* H1 */ .hero-std__h1 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; color: #fff; line-height: 1.14; letter-spacing: -.03em; margin-bottom: 18px; } .hero-std__h1 em { font-style: normal; color: var(--o5); } /* Paragraf */ .hero-std__p { font-size: 16px; color: rgba(255,255,255,.58); line-height: 1.72; margin-bottom: 14px; max-width: 540px; } /* Bullets */ .hero-std__bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .hero-std__bullets li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.68); font-weight: 500; } .hero-std__bullets li svg { color: var(--gr5); flex-shrink: 0; } /* Butoane */ .hero-std__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } /* ============================================================ COL DREAPTA — imagine portrait 30% ============================================================ */ .hero-std__visual { display: flex; align-items: center; justify-content: center; } .hero-std__img-wrap { width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 32px 64px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); position: relative; } .hero-std__img-wrap::before { /* Gradient overlay jos pentru tranziție spre conținut */ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, rgba(10,46,92,.15)); pointer-events: none; z-index: 1; } .hero-std__img-wrap img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top center; transition: transform .6s cubic-bezier(.22,1,.36,1); } .hero-std__img-wrap:hover img { transform: scale(1.02); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .hero-std__inner { grid-template-columns: 65fr 35fr; gap: 40px; } } @media (max-width: 767px) { .hero-std__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 40px; min-height: unset; } .hero-std__visual { /* Pe mobile, imaginea apare jos și mai mică */ max-width: 280px; margin: 0 auto; order: -1; /* imaginea sus pe mobile */ } .hero-std__h1 { font-size: clamp(22px, 7vw, 32px); } .hero-std__btns { flex-direction: column; gap: 10px; } .hero-std__btns .bp, .hero-std__btns .bs { width: 100%; justify-content: center; } } @media (max-width: 480px) { .hero-std__visual { display: none; /* ascundem imaginea pe ecrane foarte mici */ } .hero-std__inner { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .hero-std__img-wrap img { transition: none; } } /* Icon placeholder cand nu exista imagine */ .hero-std__icon-placeholder { width: 100%; aspect-ratio: 3/4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.3); } .hero-std__icon-placeholder svg { width: clamp(80px, 12vw, 140px); height: clamp(80px, 12vw, 140px); } /* Placeholder SVG cand imaginea lipseste */ .hero-std__img-placeholder { width: 100%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; } .hero-std__img-placeholder svg { width: 100%; height: 100%; max-width: 280px; }