/* ============================================================ Teme / variante de design + comutator Temele se aplică pe ca .t-blazon | .t-noir | .t-agent ============================================================ */ /* ---- variabile per temă ---- */ html.t-noir{ --bg:#05060b; --bg-2:#080a12; --bg-3:#0b0e18; --line:rgba(201,162,39,.16); --line-2:rgba(255,255,255,.06); } html.t-agent{ --bg:#080d1e; --bg-2:#0c1326; --bg-3:#101a34; } /* ---- vizibilitatea hero-urilor în funcție de temă ---- */ .heroes .hero{display:none !important} html.t-blazon .hero--blazon, html.t-noir .hero--noir, html.t-agent .hero--agent{display:flex !important} /* ============ VARIANTA 2: NOIR CINEMATIC ============ */ .hero--noir{position:relative; min-height:100svh; align-items:center; text-align:center; overflow:hidden; padding:120px 0 80px} .noir__bg{position:absolute; inset:0; z-index:0; background:radial-gradient(85% 60% at 50% -5%, #11141f, #05060b 68%)} .noir__spot{ position:absolute; top:-14%; left:50%; width:120vw; height:82vh; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(232,201,106,.16), transparent 70%); filter:blur(8px); animation:noirSpot 10s ease-in-out infinite; } @keyframes noirSpot{0%,100%{transform:translateX(-58%)}50%{transform:translateX(-42%)}} .noir__figure{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); height:94%; width:auto; opacity:.9; filter:drop-shadow(0 0 50px #000); } .noir__fog{position:absolute; inset:0; background:linear-gradient(to top, var(--bg) 5%, rgba(5,6,11,.2) 42%, transparent 62%)} .noir__grain{ position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .noir__inner{position:relative; z-index:2} .noir__title{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:clamp(3.1rem,9vw,6rem); line-height:1.02; margin:8px 0 20px; text-shadow:0 4px 30px rgba(0,0,0,.7)} .noir__lead{color:#c7cbd8; max-width:44ch; margin:0 auto 32px; font-size:1.14rem; text-shadow:0 2px 16px rgba(0,0,0,.8)} .hero--noir .hero__cta{justify-content:center} /* secțiuni mai „flat”, hairline auriu în tema noir */ html.t-noir .card, html.t-noir .review, html.t-noir .plan{background:#0a0d16; border-color:rgba(201,162,39,.14)} /* ============ VARIANTA 3: AGENT PREMIUM ============ */ .hero--agent{position:relative; min-height:100svh; align-items:center; overflow:hidden; padding:120px 0 60px} .agent__bg{ position:absolute; inset:0; z-index:0; background: radial-gradient(60% 55% at 74% 42%, rgba(60,96,200,.30), transparent 60%), radial-gradient(42% 46% at 80% 30%, rgba(201,162,39,.16), transparent 65%), radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 60%), var(--bg); } .agent__inner{position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:34px; align-items:center} .agent__title{font-family:"Cormorant Garamond",serif; font-weight:600; font-size:clamp(3rem,7.5vw,5.4rem); line-height:1.03; margin:8px 0 20px} .agent__lead{color:var(--muted); max-width:38ch; margin:0 0 30px; font-size:1.14rem} .agent__figure{position:relative; display:flex; justify-content:center} .agent__figure::before{ content:""; position:absolute; top:4%; width:76%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(201,162,39,.24), rgba(60,96,200,.10) 55%, transparent 72%); filter:blur(18px); } .agent__figure img{position:relative; width:min(430px,84%); filter:drop-shadow(0 34px 64px rgba(0,0,0,.6))} /* carduri „glass” în tema agent */ html.t-agent .card, html.t-agent .review, html.t-agent .plan, html.t-agent .steps, html.t-agent .contact__form, html.t-agent .contact__list li{ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); backdrop-filter:blur(8px); border-color:rgba(255,255,255,.12); } @media (max-width:900px){ .agent__inner{grid-template-columns:1fr; text-align:center} .agent__content{order:2} .agent__figure{order:1; margin-bottom:6px} .agent__figure img{width:min(250px,60%)} .agent__lead{margin-inline:auto} .hero--agent .hero__cta,.hero--agent .hero__trust{justify-content:center} } @media (prefers-reduced-motion:reduce){ .noir__spot{animation:none} }