@charset "utf-8"; /* ============================================================ Terapeut Cristian — „Din întuneric spre lumină" Sistem de design. Pagina este transformarea: fundalul urcă de la noapte caldă la lumină plină pe măsură ce derulezi. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Atmosfera — opririle călătoriei. Drumul urcă prin verde, nu prin maro: un verde care se deschide spre salvie și apoi spre crem. Căldura o dă aura de chihlimbar de deasupra, nu tonurile de mijloc — altfel se înnoroiește exact la jumătatea paginii. */ --sky-0: #080e0c; --sky-1: #0e1712; --sky-2: #1b2b21; --sky-3: #334a37; --sky-4: #6b8a6d; --sky-5: #b6c7b3; --sky-6: #e0d6c2; /* Materiale */ --chihlimbar: #e8b562; /* lumina lămpii, aurul din brand */ --chihlimbar-cald: #f0c069; --chihlimbar-adanc: #c8912f; --aur-inchis: #6f4a0f; /* bronz adânc: trece AA și în punctul cel mai prost al tranziției */ --crem: #e0d6c2; --cerneala: #14201a; --salvie: #cfdcc9; --grad-ig: linear-gradient(135deg, #b85428, #c13584 55%, #833ab4); /* Text — se schimbă în trepte, per secțiune, ca să rămână mereu lizibil */ --text: #f4efe4; --text-bland: #c3cdc0; --text-sters: #8d9a8c; --accent: var(--chihlimbar); --linie: rgb(244 239 228 / 0.14); --card: rgb(244 239 228 / 0.045); --card-linie: rgb(244 239 228 / 0.1); /* Tipografie */ --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --corp: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --t-eyebrow: 0.75rem; --t-mic: 0.9375rem; --t-corp: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); --t-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --t-h2: clamp(2rem, 1.45rem + 2.5vw, 3.5rem); --t-h1: clamp(2.5rem, 1.35rem + 4.4vw, 4.75rem); /* Ritm */ --lat: min(1180px, 100% - 2.5rem); --lat-ingust: min(720px, 100% - 2.5rem); --sectiune-y: clamp(1.75rem, 1.25rem + 2.4vw, 3.125rem); --r: 4px; --usor: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Secțiunile din a doua jumătate a călătoriei — text închis pe lumină */ [data-lum="lumina"] { --text: #14201a; --text-bland: #43514a; --text-sters: #525e56; --accent: var(--aur-inchis); --linie: rgb(20 32 26 / 0.16); --card: rgb(252 249 242 / 0.72); --card-linie: rgb(20 32 26 / 0.1); } /* Zona de tranziție — text deschis, dar fundal deja luminat: are nevoie de propriul văl */ [data-lum="amurg"] { --text: #fbf7ef; --text-bland: #ded6c4; --text-sters: #b3ab98; --linie: rgb(251 247 239 / 0.18); --card: rgb(8 14 12 / 0.22); --card-linie: rgb(251 247 239 / 0.12); } /* `color` trebuie redeclarat aici, nu doar pe : variabilele se rezolvă acolo unde e scrisă proprietatea, iar copiii moștenesc culoarea deja calculată. Fără linia asta, un h3 dintr-un palier luminos ar rămâne crem. */ [data-lum] { color: var(--text); } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Derularea lină rămâne doar unde e cerută: la navigarea cu Tab face ca pagina să ajungă mult după focus, ceea ce dezorientează. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--sky-0); color: var(--text); font: 400 var(--t-corp)/1.68 var(--corp); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; } a { color: inherit; } h1, h2, h3, p, ul, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } /* Inelul urmează palierul. Chihlimbarul fix dădea 1,65:1 pe crem — invizibil exact peste butoanele de contact. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---------- 3. Motorul de lumină ---------- */ /* O bandă înaltă de gradient, mutată prin transform (doar compositor, 60fps). */ .cer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2; overflow: hidden; background: var(--sky-0); } .cer__banda { position: absolute; top: 0; right: 0; bottom: auto; left: 0; inset: 0 0 auto; height: 600vh; transform: translate3d(0, calc(var(--p, 0) * -500vh), 0); will-change: transform; background: linear-gradient( 180deg, var(--sky-0) 0%, var(--sky-1) 16%, var(--sky-2) 34%, var(--sky-3) 52%, var(--sky-4) 70%, var(--sky-5) 86%, var(--sky-6) 97% ); } /* Aura caldă care crește odată cu lumina — ea aduce răsăritul. Fără ea, mijlocul paginii ar fi doar verde deschis, fără soare. */ .cer__aura { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: radial-gradient( 130% 60% at 50% 106%, rgb(232 181 98 / calc(0.1 + var(--p, 0) * 0.34)) 0%, transparent 70% ), radial-gradient( 90% 45% at 78% -8%, rgb(255 214 140 / calc(var(--p, 0) * 0.22)) 0%, transparent 72% ); } /* ---------- 4. Tipografie ---------- */ .display { font-family: var(--display); font-weight: 300; letter-spacing: -0.018em; line-height: 1.02; } h1 { font: 300 var(--t-h1)/0.98 var(--display); letter-spacing: -0.022em; } /* Engleza scrie aceeași idee cu mai multe litere: „You have carried enough” trece pe un al treilea rând și împinge ultimul buton de contact sub marginea ecranului, pe telefoanele scunde. Titlul coboară doar aici, cât să încapă fiecare frază pe rândul ei. */ html[lang="en"] { --t-h1: clamp(2.125rem, 1.2rem + 3.55vw, 4.25rem); } h2 { font: 300 var(--t-h2)/1.04 var(--display); letter-spacing: -0.018em; } h3 { font: 400 var(--t-h3)/1.25 var(--display); letter-spacing: -0.01em; } .eyebrow { font: 600 var(--t-eyebrow)/1 var(--corp); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--text-bland); } .mic { font-size: var(--t-mic); line-height: 1.6; color: var(--text-sters); } /* ---------- 5. Butoane ---------- */ .btn { --btn-bg: linear-gradient(170deg, var(--chihlimbar-cald), var(--chihlimbar-adanc)); display: inline-flex; align-items: center; gap: 0.7rem; padding: 1.0625rem 1.75rem; border-radius: 999px; background: var(--btn-bg); color: #1a1206; font: 600 1rem/1 var(--corp); letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: transform 0.35s var(--usor), box-shadow 0.35s var(--usor), filter 0.35s var(--usor); box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 10px 34px -12px rgb(232 181 98 / 0.75); } .btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 16px 44px -12px rgb(232 181 98 / 0.9); } .btn:active { transform: translateY(0); } .btn svg { width: 21px; height: 21px; flex: none; } .btn--sec { background: none; color: var(--text); border: 1px solid rgb(244 239 228 / 0.36); box-shadow: none; padding: 0.9375rem 1.375rem; font-weight: 500; } [data-lum="lumina"] .btn--sec { border-color: rgb(20 32 26 / 0.48); } .btn--sec:hover { background: var(--card); border-color: var(--accent); filter: none; box-shadow: none; } .btn--sec svg { width: 19px; height: 19px; } .canale { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* ---------- 6. Carcasa secțiunilor ---------- */ .sectiune { position: relative; padding-block: var(--sectiune-y); } .lat { width: var(--lat); margin-inline: auto; } .lat-ingust { width: var(--lat-ingust); margin-inline: auto; } .sectiune__cap { max-width: 46ch; margin-bottom: clamp(2.5rem, 4vw, 4rem); } .sectiune__cap .eyebrow { display: block; margin-bottom: 1.125rem; } .sectiune__cap h2 + p { margin-top: 1.375rem; } /* ---------- 7. Hero ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; padding-block: 8rem clamp(4.5rem, 9vh, 7rem); overflow: hidden; isolation: isolate; } .hero__foto { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; } /* e doar un container: fără înălțime explicită, `height:100%` de pe nu are față de ce se rezolva și imaginea cade la înălțimea ei naturală. */ .hero__foto picture { display: block; width: 100%; height: 100%; } .hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 32%; transform: scale(1.06); animation: heroCalm 2.6s var(--usor) forwards; } /* Vălul: noapte caldă peste tot, ruptă doar de lumina lămpii din stânga-sus. Textul stă în întuneric, fața lui Cristian rămâne cel mai luminos punct. */ .hero__val { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; background: /* lumina lămpii din stânga-sus, păstrată caldă */ radial-gradient(52% 46% at 9% 12%, rgb(240 196 120 / 0.2), transparent 64%), /* fața rămâne cel mai luminos punct din cadru */ radial-gradient(38% 44% at 62% 30%, rgb(255 240 210 / 0.12), transparent 70%), /* baltă de întuneric sub text — radială, ca să nu apară o dungă dreaptă */ radial-gradient(88% 72% at 20% 88%, rgb(6 11 9 / 0.94) 0%, rgb(6 11 9 / 0.6) 38%, rgb(6 11 9 / 0.1) 74%, transparent 88%), linear-gradient(100deg, rgb(6 11 9 / 0.72) 0%, rgb(6 11 9 / 0.5) 28%, rgb(6 11 9 / 0.18) 56%, rgb(6 11 9 / 0.06) 78%, rgb(6 11 9 / 0.22) 100%); } .hero__continut { position: relative; max-width: min(44rem, 58%); } .hero h1 { text-wrap: balance; } .hero h1 .lumina { font-style: italic; color: var(--chihlimbar); text-shadow: 0 0 60px rgb(232 181 98 / 0.45); } .hero__sub { max-width: 46ch; margin-top: 1.75rem; color: #d8d2c4; } .hero__actiuni { margin-top: 2.5rem; } .hero__nota { margin-top: 1.375rem; max-width: 54ch; color: #9aa397; } .hero__jos { position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; display: grid; justify-items: center; gap: 0.5rem; color: rgb(244 239 228 / 0.62); font: 600 0.6875rem/1 var(--corp); letter-spacing: 0.2em; text-transform: uppercase; } .hero__jos span::after { content: ""; display: block; width: 1px; height: 44px; margin: 0.75rem auto 0; background: linear-gradient(rgb(232 181 98 / 0.8), transparent); animation: fir 2.6s ease-in-out infinite; } @keyframes heroCalm { to { transform: scale(1); } } @keyframes fir { 0%, 100% { opacity: 0.25; transform: scaleY(0.65); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* ---------- 8. Praful de lumină ---------- */ .motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } /* Opacitatea de bază stă pe element, iar keyframe-ul animă doar `transform` și o `opacity` literală. Cu `var(--o)` în interiorul keyframe-ului, browserul nu poate compozita animația și o recalculează pe firul principal la fiecare cadru — 28 de particule ajungeau să ardă ~16% din procesor permanent, chiar și când omul doar citea. */ .mote { position: absolute; top: var(--y); left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--chihlimbar); opacity: var(--o, 0.6); box-shadow: 0 0 12px 2px rgb(232 181 98 / 0.5); will-change: transform, opacity; animation: pluteste var(--d) ease-in-out var(--delay) infinite; } @keyframes pluteste { 0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.6); } 22% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx, 18px), -110px, 0) scale(1); } } /* Pe telefon, praful de lumină nu merită prețul: un scroll care se poticnește strică mai mult decât adaugă atmosfera. Rămâne doar pe ecrane mari. */ @media (max-width: 860px) { .motes { display: none; } } /* ---------- 9. Zidul tăcerii (elementul-semnătură) ---------- */ .zid { position: relative; } .zid__cap { text-align: center; max-width: 46ch; margin-inline: auto; } .zid__cap h2 { text-wrap: balance; } /* „scrie-mi" nu are voie să se rupă la cratimă: arată ca o greșeală. */ .nowrap { white-space: nowrap; } .zid__cap .eyebrow { display: block; margin-bottom: 1.125rem; } .zid__cap p { margin-top: 1.375rem; font-size: var(--t-lead); line-height: 1.55; color: var(--text-bland); } .zid__nor { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.5rem 1.25rem; max-width: 60rem; margin: clamp(3rem, 5vw, 4.5rem) auto 0; } .cuvant { position: relative; font-family: var(--display); font-weight: 300; font-size: var(--cs, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; color: rgb(244 239 228 / var(--co, 0.3)); text-decoration: none; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 3px; transition: color 0.5s var(--usor), text-shadow 0.5s var(--usor), transform 0.5s var(--usor); } .cuvant::after { content: ""; position: absolute; left: 50%; bottom: 0.05em; width: 0; height: 1px; translate: -50% 0; background: var(--chihlimbar); transition: width 0.5s var(--usor); } .cuvant:hover, .cuvant:focus-visible { color: var(--chihlimbar-cald); text-shadow: 0 0 34px rgb(232 181 98 / 0.65); transform: translateY(-2px); } .cuvant:hover::after, .cuvant:focus-visible::after { width: calc(100% - 1rem); } .zid__jos { margin-top: clamp(2.75rem, 4vw, 3.75rem); text-align: center; } .zid__jos p { max-width: 42ch; margin: 0 auto 1.75rem; font-size: var(--t-corp); color: var(--text-sters); } /* ---------- 10. Contact — capătul luminos ---------- */ .contact { text-align: center; } /* `ch` se măsoară în fontul elementului, nu în cel al titlului: 22ch la corpul de text însemnau ~230px, iar titlul de 56px se rupea în două. */ .contact__cap { max-width: 40rem; margin-inline: auto; } .contact__cap h2 { text-wrap: balance; } .contact__cap .eyebrow { display: block; margin-bottom: 1.125rem; } .contact .lead { max-width: 46ch; margin-inline: auto; } .contact__canale { justify-content: center; margin-top: clamp(2.5rem, 4vw, 3.25rem); gap: 0.875rem; } .contact__dupa { margin-top: 2.25rem; max-width: 40ch; margin-inline: auto; } .contact__tel { margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid var(--linie); } .contact__tel a { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; letter-spacing: 0.01em; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--linie); padding-bottom: 0.1em; transition: border-color 0.3s var(--usor), color 0.3s var(--usor); } .contact__tel a:hover { color: var(--accent); border-color: var(--accent); } /* ---------- 11. Bara fixă pe mobil ---------- */ .bara { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; gap: 0.5rem; padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom)); background: rgb(8 14 12 / 0.86); backdrop-filter: blur(14px); border-top: 1px solid rgb(244 239 228 / 0.1); translate: 0 110%; transition: translate 0.45s var(--usor); } .bara.e-vizibila { translate: 0 0; } .bara .btn { flex: 1; justify-content: center; padding-block: 0.9375rem; } .bara__mic { flex: none; display: grid; place-items: center; width: 52px; border-radius: 999px; border: 1px solid rgb(244 239 228 / 0.4); color: #f4efe4; } .bara__mic svg { width: 22px; height: 22px; } /* ---------- 12. Dezvăluiri la scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); filter: blur(7px); transition: opacity 0.9s var(--usor), transform 0.9s var(--usor), filter 0.9s var(--usor); transition-delay: var(--rd, 0ms); } .reveal.e-vizibil { opacity: 1; transform: none; filter: none; } /* ---------- 13. Responsive ---------- */ @media (max-width: 860px) { .hero { align-items: end; padding-block: 6rem 6.5rem; } .hero__foto img { object-position: 62% 22%; } .hero__val { background: radial-gradient(60% 40% at 22% 12%, rgb(232 181 98 / 0.14), transparent 62%), linear-gradient(0deg, rgb(8 14 12 / 0.96) 22%, rgb(8 14 12 / 0.55) 55%, rgb(8 14 12 / 0.15) 82%); } .hero__continut { max-width: 100%; } .hero__jos { display: none; } .bara { display: flex; } body { padding-bottom: 0; } } @media (max-width: 560px) { :root { --lat: min(1180px, 100% - 2rem); --lat-ingust: min(720px, 100% - 2rem); } .contact__canale { flex-direction: column; align-items: stretch; } } /* ---------- 14. Mișcare redusă ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; filter: none; } .motes { display: none; } .hero__foto img { transform: scale(1); } /* Aceeași călătorie de la noapte la lumină, dar înghețată: gradientul stă pe document, nu pe un strat care se mișcă. Fără el, secțiunile luminoase ar rămâne cu text închis pe fundal de noapte. */ .cer { display: none; } body { background: linear-gradient( 180deg, var(--sky-0) 0%, var(--sky-1) 16%, var(--sky-2) 34%, var(--sky-3) 52%, var(--sky-4) 70%, var(--sky-5) 86%, var(--sky-6) 97% ); } } /* ---------- 15. Cum decurge — drumul luminii ---------- */ .drum { display: grid; gap: clamp(2.5rem, 5vw, 5rem); } .drum__parcurs { display: grid; gap: clamp(2rem, 3vw, 2.75rem); } .drum__pasi { position: relative; display: grid; gap: clamp(2.25rem, 3.5vw, 3.25rem); } /* Firul care leagă momentele: linia pe care coboară lumina */ .drum__pasi::before { content: ""; position: absolute; left: 17px; top: 1.9rem; bottom: 1.9rem; width: 1px; background: linear-gradient(var(--accent), rgb(232 181 98 / 0.18)); } .pas { position: relative; padding-left: 4rem; } /* Un singur marcaj, nu trei: cifra locuieste chiar in nodul de pe fir. */ .pas__nr { position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent); background: rgb(8 14 12 / 0.92); box-shadow: 0 0 0 5px rgb(232 181 98 / 0.06); font: 600 0.75rem/1 var(--corp); letter-spacing: 0.02em; color: var(--accent); } .pas p { margin-top: 0.625rem; color: var(--text-bland); } /* ---------- 16. Ce nu este ---------- */ .nueste { text-align: center; } /* Opt negații, unele lungi: la mărimea de dinainte fiecare curgea pe două rânduri și litania devenea un zid. Corp mai mic, coloană mai lată. */ .nueste__lista { display: grid; gap: 0; max-width: 44ch; margin: clamp(2.25rem, 4vw, 3rem) auto 0; /* Cu marcator la început, lista trece pe stânga: centrată, marcatorul ar pluti odată cu textul și rândul al doilea ar rămâne suspendat. */ text-align: left; } .nueste__lista li { position: relative; padding-left: 1.6rem; font-family: var(--display); font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--text-sters); } /* Marcatorul stă agățat în afara textului, deci rândul al doilea rămâne aliniat cu primul, nu sub semn. */ .nueste__lista li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 11px; height: 1px; background: var(--accent); opacity: 0.75; } /* „NU" e accentul întregii secțiuni: e singurul cuvânt care schimbă sensul. */ .nueste__nu { color: var(--accent); font-style: italic; } .nueste__este { max-width: 52ch; margin: clamp(2.75rem, 4vw, 3.75rem) auto 0; padding-top: clamp(2rem, 3vw, 2.5rem); border-top: 1px solid var(--linie); } .nueste__este strong { color: var(--accent); font-weight: 600; } /* ---------- 17. Despre Cristian ---------- */ .despre__grila { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .despre__foto { position: relative; } .despre__foto img { width: 100%; /* Fără `height:auto`, atributul height="1080" din HTML se aplică literal și portretul se întinde pe verticală. */ height: auto; border-radius: 2px; filter: saturate(0.92) contrast(1.02); } .despre__foto::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(190deg, transparent 55%, rgb(8 14 12 / 0.28)); pointer-events: none; } .despre__text > * + * { margin-top: 1.375rem; } .despre__text p { color: var(--text-bland); } .despre__citat { margin-block: clamp(2rem, 3vw, 2.75rem); padding-left: 1.5rem; border-left: 1px solid var(--accent); font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.2; color: var(--accent); } .despre__cum { font-size: var(--t-mic); color: var(--text-sters); } .despre__cum strong { color: var(--text); font-weight: 600; } /* ---------- 18. Cele 4 ședințe ---------- */ .sedinte { display: grid; gap: 1.25rem; } .sedinta { display: grid; gap: 1rem; padding: clamp(1.75rem, 2.5vw, 2.5rem); background: var(--card); border: 1px solid rgb(20 32 26 / 0.28); border-radius: var(--r); transition: border-color 0.4s var(--usor), transform 0.4s var(--usor); } .sedinta:hover { border-color: var(--accent); transform: translateY(-3px); } .sedinta__pret { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .sedinta__suma { font-family: var(--display); font-weight: 400; font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); line-height: 1; color: var(--accent); } .sedinta__durata { font: 600 0.75rem/1 var(--corp); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sters); } .sedinta__pentru { color: var(--text-bland); } .sedinta__ce { display: grid; gap: 0.625rem; font-size: var(--t-mic); color: var(--text-sters); } .sedinta__ce li { position: relative; padding-left: 1.25rem; } .sedinta__ce li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.75; } /* Ședința cea mai adâncă poartă cea mai multă lumină */ .sedinta--adanca { box-shadow: 0 0 0 1px rgb(232 181 98 / 0.25), 0 26px 60px -34px rgb(138 95 22 / 0.55); } .sedinte__nota { margin-top: 2rem; text-align: center; } /* ---------- 19. Pentru cine ---------- */ .cine { display: grid; gap: clamp(2.5rem, 4vw, 4rem); } .cine__col h3 { margin-bottom: 1.5rem; } .cine__lista { display: grid; gap: 0.875rem; } .cine__lista li { position: relative; padding-left: 1.875rem; color: var(--text-bland); } .cine__lista li::before { position: absolute; left: 0; top: 0; font-weight: 600; } .cine__lista--da li::before { content: "—"; color: var(--accent); } .cine__lista--nu li::before { content: "—"; color: var(--text-sters); opacity: 0.5; } .cine__col--nu .cine__lista li { color: var(--text-sters); } /* ---------- 20. Footer ---------- */ .subsol { padding-block: clamp(3.5rem, 5vw, 5rem) 2.5rem; border-top: 1px solid var(--linie); } /* Invitația și pictogramele stau una sub alta, centrate: alăturate, textul de trei rânduri și rândul de iconuri ieșeau dezechilibrate. */ .subsol__sus { display: grid; justify-items: center; gap: 1.75rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); text-align: center; } .subsol__inchidere { max-width: 46ch; font-family: var(--display); font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.4; } .social { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } /* Culorile fiecărei rețele, dar coborâte cât să treacă pragul de contrast cu glifa albă: roșul YouTube pur și portocaliul din gradientul Instagram cad sub 3:1 și lasă iconul spălat pe cineva cu vedere slabă. */ .social a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; color: #fff; box-shadow: 0 8px 20px -12px rgb(20 32 26 / 0.7); transition: transform 0.3s var(--usor), filter 0.3s var(--usor); } .social a:hover { transform: translateY(-2px); filter: brightness(1.1); } .social svg { width: 25px; height: 25px; } .social__fb { background: #1877f2; } .social__ig { background: var(--grad-ig); } .social__tt { background: #111; } .social__yt { background: #d40000; } .subsol__legal { font-size: 0.8125rem; line-height: 1.7; color: var(--text-sters); max-width: 88ch; } .subsol__jos { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; font-size: 0.8125rem; color: var(--text-sters); } .subsol__jos a { text-decoration: none; } .subsol__jos a:hover { color: var(--accent); } /* ---------- 21. Așezări pe ecrane late ---------- */ @media (min-width: 861px) { .drum { grid-template-columns: 0.8fr 1.2fr; align-items: start; } .drum__cap { position: sticky; top: 5rem; } .despre__grila { grid-template-columns: 0.8fr 1.2fr; } .cine { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .sedinte { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } } /* Bara fixă acoperă finalul paginii pe mobil */ @media (max-width: 860px) { .subsol { padding-bottom: 6.5rem; } } /* ---------- 22. Palierele de lumină ---------- */ /* Cerul se schimbă continuu, dar textul are nevoie de contrast garantat. Fiecare palier își pune propriul strat: întuneric cald peste zona de tranziție, lumină cremoasă peste final. Stratul se stinge la capete, ca trecerea dintre paliere să rămână o topire, nu o muchie. */ .pane { position: relative; } .pane::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; pointer-events: none; } .pane--amurg::before { background: linear-gradient( 180deg, rgb(8 14 12 / 0) 0, rgb(8 14 12 / 0.66) 140px, rgb(8 14 12 / 0.68) 50%, rgb(8 14 12 / 0.52) calc(100% - 260px), rgb(8 14 12 / 0) 100% ); } /* Subsolul stă la capătul drumului, unde cerul e deja crem: scrim plin, fără stingere la margini, ca să nu apară o cusătură sub ultima secțiune. */ .subsol.pane--lumina::before { background: rgb(224 214 194 / 0.97); } .pane--lumina::before { background: linear-gradient( 180deg, rgb(224 214 194 / 0) 0, rgb(224 214 194 / 0.95) 70px, rgb(224 214 194 / 0.96) 420px, rgb(224 214 194 / 0.97) 100% ); } /* ---------- 23. Hero pe telefon ---------- */ /* Fotografia sursă e panoramică (1536x864). Forțată într-un ecran de telefon, `cover` ar arăta o felie verticală de 26% din lățime — crop claustrofobic, cu textul peste bărbia lui. Așa că pe ecran îngust nu mai e fundal, ci fereastră: fotografia ocupă partea de sus și se stinge în noapte, iar mesajul stă dedesubt, pe teren curat. */ @media (max-width: 640px) { /* Fotografia nu mai primește o înălțime fixă, ci ocupă exact spațiul rămas deasupra textului: hero-ul devine o grilă cu două rânduri, iar rândul de sus ia tot ce prisosește. Așa marginea ei de jos se aliniază singură cu „Ai purtat destul", pe orice înălțime de ecran. Cu o valoare fixă în svh, s-ar fi potrivit pe un telefon și ar fi acoperit titlul pe altul mai scund. `minmax` păstrează o bandă minimă, ca fotografia să nu dispară de tot dacă textul crește (setare de text mărit, ecran foarte mic). */ .hero { grid-template-rows: minmax(9rem, 1fr) auto; align-items: stretch; padding-block: 0 1.5rem; } .hero__foto { position: relative; grid-row: 1; top: auto; right: auto; bottom: auto; left: auto; inset: auto; height: auto; min-height: 0; overflow: hidden; } /* Vălul trece în interiorul fotografiei, ca stingerea să cadă mereu fix pe marginea ei, oricât de înaltă ar fi banda. */ .hero__val { display: none; } .hero__foto::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: radial-gradient(64% 38% at 18% 10%, rgb(240 196 120 / 0.22), transparent 64%), linear-gradient( 180deg, rgb(6 11 9 / 0.5) 0%, rgb(6 11 9 / 0.1) 24%, rgb(6 11 9 / 0.34) 58%, rgb(6 11 9 / 0.88) 86%, var(--sky-0) 100% ); } .hero > .lat { grid-row: 2; } .hero__foto img { object-position: 58% 26%; } .hero h1 { text-wrap: pretty; } .hero__sub { margin-top: 1rem; } .hero__actiuni { margin-top: 1.375rem; } } @media (max-width: 640px) { .hero h1 .fraza { display: block; } } /* Eticheta din bara fixă nu are voie să curgă pe două rânduri: ar dubla înălțimea barei și ar mânca din ecran exact unde omul citește. */ .bara .btn { padding-inline: 1rem; font-size: 0.9375rem; white-space: nowrap; } /* ---------- 24. Remedieri de accesibilitate ---------- */ /* Bara fixă se rupea la text mărit din setările telefonului: `nowrap` plus `flex:1` cu `min-width:auto` împingeau Telegram și Viber în afara ecranului, iar `overflow-x:hidden` făcea imposibil să mai ajungi la ele. */ .bara { flex-wrap: wrap; } .bara .btn { min-width: 0; white-space: normal; font-size: clamp(0.8125rem, 3.6vw, 0.9375rem); } /* Elementul focusat nu are voie să ajungă sub bara fixă (WCAG 2.4.11). */ @media (max-width: 860px) { .cuvant, .btn, .bara__mic, a[href^="tel:"] { scroll-margin-bottom: 7rem; } } /* Ținte de atingere: publicul e în suferință, mulți vârstnici, pe telefon. 44px e ținta corectă aici, chiar dacă pragul obligatoriu e 24px. */ .cuvant { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0.6rem; } .zid__nor { gap: 2.75rem 1.75rem; } .contact__tel a, .subsol__jos a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; } /* Link de salt: 20 de cuvinte-linkuri stau înaintea butoanelor de contact. Apare doar la navigarea cu tastatura. */ .sari { position: absolute; left: 1rem; top: -100%; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0.875rem 1.25rem; border-radius: 0 0 6px 6px; background: var(--chihlimbar); color: #1a1206; font: 600 0.9375rem/1 var(--corp); text-decoration: none; transition: top 0.25s var(--usor); } .sari:focus { top: 0; } /* ---------- 24b. Alegerea limbii ---------- */ /* Sus, peste fotografie, dar aproape șoptit: cine are nevoie de ea o găsește, iar restul nu sunt distrași de la primul lucru pe care trebuie să-l citească. Stă în hero, nu fixat pe ecran, ca să nu se bată cu bara de contact de jos. */ .limbi { position: absolute; top: max(1.125rem, env(safe-area-inset-top)); right: max(1.125rem, env(safe-area-inset-right)); z-index: 6; display: flex; align-items: center; gap: 0.125rem; padding: 0.1875rem; border-radius: 999px; /* Fundalul trebuie să țină și peste partea luminoasă a fotografiei, altfel limba nefolosită devine ilizibilă exact pentru cine o caută. */ background: rgb(8 14 12 / 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgb(244 239 228 / 0.16); } .limbi a { display: grid; place-items: center; min-width: 2.125rem; min-height: 1.875rem; padding-inline: 0.5rem; border-radius: 999px; color: rgb(244 239 228 / 0.78); font: 600 0.75rem/1 var(--corp); letter-spacing: 0.06em; text-decoration: none; transition: color 0.2s var(--usor), background 0.2s var(--usor); } .limbi a:hover { color: #f4efe4; } /* Limba curentă e marcată, nu ascunsă: vezi dintr-o privire unde ești. */ .limbi a[aria-current="page"] { background: rgb(244 239 228 / 0.14); color: #f7f2e7; } .limbi a:focus-visible { outline: 2px solid var(--chihlimbar); outline-offset: 2px; } @media (prefers-reduced-transparency: reduce) { .limbi { background: rgb(8 14 12 / 0.88); backdrop-filter: none; } } /* Ancorele venite din redirecturile vechi (/sedinte, /despre-mine) nu au voie să aterizeze lipite de marginea de sus a ecranului. */ [id] { scroll-margin-top: 2rem; } /* ---------- 25. Butoane cu culoarea canalului ---------- */ /* Recunoașterea instantanee a verdelui WhatsApp face mai mult pentru clic decât coerența cromatică a paginii. Nuanțele sunt însă coborâte față de culorile oficiale: verdele #25D366 cu text alb dă 2,3:1 — ilizibil pentru cine are vedere slabă, adică fix o parte din publicul acestei pagini. */ .btn--wa, .btn--tg, .btn--vb, .btn--ms, .btn--ig { color: #fff; border: 0; box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.55); } .btn--wa:hover, .btn--tg:hover, .btn--vb:hover, .btn--ms:hover, .btn--ig:hover { filter: brightness(1.1); box-shadow: 0 16px 38px -14px rgb(0 0 0 / 0.6); } /* Verdele WhatsApp, în același tratament cu Messenger și Instagram: gradient din paleta mărcii. Verdele viu #25D366 dă doar 2,3:1 cu text alb, deci gradientul merge de la turcoazul închis al WhatsApp către verde, oprindu-se acolo unde eticheta încă se citește. */ .btn--wa { background: linear-gradient(135deg, #075e54, #0a8754); } /* Gradiente din paleta fiecărei mărci, ca la celelalte trei. Capătul deschis e limitat de textul alb: albastrul Telegram #229ED9 dă 3,0:1, iar mov-ul Viber #7360F2 dă 4,5:1 la limită — amândouă coborâte până trec confortabil. */ .btn--tg { background: linear-gradient(135deg, #135a80, #1b7caa); } .btn--vb { background: linear-gradient(135deg, #4c37b0, #6f56ea); } /* Gradientul albastru-mov al pictogramei Messenger. Capătul deschis al gradientului original (#0099FF) dă 3:1 cu alb — sub pragul de 4,5:1 cerut de text — așa că pornim din albastrul mai adânc. Bonus: mov-ul îl separă clar de albastrul Telegram, cu care ar fi ușor de confundat alăturat. */ .btn--ms { background: linear-gradient(135deg, #006aff, #a033ff); } /* Gradientul Instagram. Portocaliul original de la capăt dă 3,19:1 cu alb — destul pentru o pictogramă, prea puțin pentru text — deci e coborât până trece pragul de 4,5:1. Aceeași valoare o folosește și pictograma din subsol, ca butonul și iconul să arate identic. */ .btn--ig { background: var(--grad-ig); } /* Butonul principal rămâne cel mai greu vizual */ .btn--wa.btn--mare { padding: 1.1875rem 2rem; font-size: 1.0625rem; } /* În bara fixă de pe telefon, iconurile secundare capătă și ele culoarea lor */ .bara__mic--tg { background: #1b76a8; border-color: transparent; color: #fff; } .bara__mic--vb { background: #6a4fe8; border-color: transparent; color: #fff; } /* ---------- 26. Straturile ședinței ---------- */ /* Ședințele nu sunt trei oferte paralele, ci trei adâncimi ale aceleiași lucrări. Straturile arată exact asta: ce era deja acolo rămâne stins, ce se adaugă se aprinde. */ .straturi { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: -0.25rem; } .strat { font: 600 0.6875rem/1 var(--corp); letter-spacing: 0.09em; text-transform: uppercase; padding: 0.4375rem 0.625rem; border-radius: 999px; border: 1px solid rgb(20 32 26 / 0.18); color: var(--text-sters); } .strat--nou { border-color: transparent; background: rgb(111 74 15 / 0.12); color: var(--aur-inchis); } /* ---------- 27. Butonul de detalii al ședinței ---------- */ .sedinta__detalii { display: inline-flex; align-items: center; gap: 0.4375rem; align-self: start; min-height: 44px; margin-top: -0.25rem; padding: 0; color: var(--aur-inchis); font: 600 0.9375rem/1 var(--corp); cursor: pointer; border-bottom: 1px solid rgb(111 74 15 / 0.35); transition: border-color 0.3s var(--usor), gap 0.3s var(--usor); } .sedinta__detalii:hover { border-color: var(--aur-inchis); gap: 0.75rem; } .sedinta__detalii svg { width: 15px; height: 15px; flex: none; } /* ---------- 28. Modalul cu descrierea lungă ---------- */ .modal { width: min(46rem, 100% - 2rem); max-height: min(88svh, 88vh); padding: 0; border: 0; border-radius: 6px; background: #fbf7ef; color: #14201a; overflow: visible; } .modal::backdrop { background: rgb(6 11 9 / 0.72); backdrop-filter: blur(3px); } .modal__cadru { position: relative; } .modal__continut { max-height: min(88svh, 88vh); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.75rem, 4vw, 3rem); -webkit-overflow-scrolling: touch; } .modal__continut > * + * { margin-top: 1.25rem; } .modal__continut p, .modal__continut li { color: #43514a; } .modal__continut em { font-style: italic; color: #14201a; } .modal__continut strong { color: #14201a; font-weight: 600; } .modal__pret { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .modal__pret .sedinta__suma { color: var(--aur-inchis); } .modal__pret .sedinta__durata { color: #617067; } .modal__continut .straturi { margin-top: 1rem; } .modal__actiuni { margin-top: 2rem; } .modal__inchide { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #43514a; /* Opac, nu translucid: textul derulează pe sub el și trebuie acoperit curat. */ background: #fbf7ef; box-shadow: 0 0 0 6px #fbf7ef, 0 2px 10px -4px rgb(20 32 26 / 0.35); cursor: pointer; transition: background 0.25s var(--usor), color 0.25s var(--usor); } .modal__inchide:hover { background: rgb(20 32 26 / 0.09); color: #14201a; } .modal__inchide svg { width: 20px; height: 20px; } /* Blocheaza scroll-ul paginii cat timp modalul e deschis */ body.are-modal { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .modal[open] { animation: modalIntra 0.32s var(--usor); } .modal[open]::backdrop { animation: fundalIntra 0.32s var(--usor); } } @keyframes modalIntra { from { opacity: 0; transform: translateY(14px) scale(0.985); } } @keyframes fundalIntra { from { opacity: 0; } } /* Varianta pentru browserele fara */ .modal.modal--simplu { position: fixed; top: 50%; left: 50%; z-index: 80; transform: translate(-50%, -50%); box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.7); } .modal-fundal { position: fixed; inset: 0; z-index: 79; background: rgb(6 11 9 / 0.72); } /* Cât e modalul deschis, bara fixă nu are ce căuta pe ecran: stă în stratul de sus, deci bara ar rămâne vizibilă sub voal, ca un rest. */ body.are-modal .bara { translate: 0 110%; } /* ---------- 29. Canalele din hero ---------- */ .hero__canale { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } @media (max-width: 560px) { /* Unul sub altul, cum cere ritmul de citire pe telefon. Cinci butoane cresc blocul cu ~80px față de trei, așa că banda foto scade cu 6svh ca să compenseze — iar fotografia se vede oricum mai larg, fiindcă `cover` scalează mai puțin la o bandă mai scundă. */ .hero__canale { flex-direction: column; align-items: stretch; gap: 0.5rem; } .hero__canale .btn { justify-content: center; } .hero__canale .btn--mare { padding-block: 1.0625rem; font-size: 1.0625rem; } .hero__canale .btn:not(.btn--mare) { padding-block: 0.8125rem; font-size: 0.9375rem; } } /* ---------- 30. Lumina de pe butonul din bara fixă ---------- */ /* Un inel de lumină care se aprinde scurt din când în când. Ritmul e lung (11s) și trecerea e blândă: cât să atragă privirea când omul ezită, nu cât să pulseze agresiv într-o pagină care vinde liniște. Umbra e desenată o singură dată în strat, iar animația mișcă doar `opacity` și `transform` — rămâne pe compositor, fără repaint la fiecare cadru. */ .bara .btn--wa { position: relative; } .bara .btn--wa::after { content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; inset: -5px; border-radius: 999px; border: 2px solid rgb(45 212 118 / 0.85); box-shadow: 0 0 18px 3px rgb(45 212 118 / 0.5); opacity: 0; pointer-events: none; will-change: opacity, transform; animation: auraWa 11s ease-in-out 5s infinite; } @keyframes auraWa { 0%, 62% { opacity: 0; transform: scale(0.97); } 70% { opacity: 0.9; transform: scale(1.035); } 78% { opacity: 0.28; transform: scale(1.005); } 84% { opacity: 0.72; transform: scale(1.02); } 100% { opacity: 0; transform: scale(0.99); } } /* Fără mișcare: inelul rămâne stins de tot. */ @media (prefers-reduced-motion: reduce) { .bara .btn--wa::after { animation: none; opacity: 0; } } /* ---------- 31. Promisiunea de confidențialitate ---------- */ /* Stă imediat sub butoanele din hero, acolo unde apare întrebarea „e sigur?". Bandă îngustă, fără titlu: e o promisiune, nu o secțiune. */ .confid { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); } .confid__text { position: relative; max-width: 62ch; margin-inline: auto; padding-top: 1.75rem; border-top: 1px solid rgb(232 181 98 / 0.22); text-align: center; font-size: 0.9375rem; line-height: 1.75; color: var(--text-sters); } .confid__text strong { color: var(--accent); font-weight: 600; } .confid__semn { display: block; width: 22px; height: 22px; margin: 0 auto 0.875rem; color: var(--accent); opacity: 0.8; } /* ---------- 32. Sclipirea canalelor ---------- */ /* Fiecare buton se aprinde o dată la 40 de secunde, pentru ~1,4s. Întârzierile nu sunt în ordinea butoanelor (4s, 15s, 9s, 30s, 21s), tocmai ca ochiul să nu prindă o secvență care se plimbă de la stânga la dreapta — asta ar face instalație de Crăciun. Așa, se aprinde câte unul, rar și fără tipar. Umbra e desenată o dată în strat; animația mișcă doar opacity și transform. */ .btn--wa { --inel: 45 212 118; } .btn--tg { --inel: 76 168 219; } .btn--vb { --inel: 150 128 255; } .btn--ms { --inel: 120 110 255; } .btn--ig { --inel: 236 106 168; } .hero__canale .btn, .canale--modal .btn, .despre__cta .btn { position: relative; } .hero__canale .btn::after, .canale--modal .btn::after, .despre__cta .btn::after { content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; inset: -5px; border-radius: 999px; border: 2px solid rgb(var(--inel) / 0.95); box-shadow: 0 0 22px 5px rgb(var(--inel) / 0.55); opacity: 0; pointer-events: none; animation: sclipire 14s ease-in-out var(--sd, 0s) infinite; } /* Clipire dublă, ca la bara fixă: două pulsuri scurte atrag privirea mai bine decât unul lung, fără să pară că butonul e stricat. */ @keyframes sclipire { 0%, 90% { opacity: 0; transform: scale(0.985); } 93.5% { opacity: 1; transform: scale(1.04); } 96% { opacity: 0.3; transform: scale(1.006); } 98% { opacity: 0.9; transform: scale(1.026); } 100% { opacity: 0; transform: scale(1); } } .hero__canale .btn:nth-child(1)::after, .canale--modal .btn:nth-child(1)::after { --sd: 0s; } /* La capătul poveștii butonul e singur, deci nu concurează cu nimic. Ritm mai rar decât în hero: omul tocmai a terminat de citit, nu are nevoie să fie grăbit. */ .despre__cta .btn::after { --sd: 3s; animation-duration: 22s; } .hero__canale .btn:nth-child(2)::after, .canale--modal .btn:nth-child(2)::after { --sd: 8.4s; } .hero__canale .btn:nth-child(3)::after, .canale--modal .btn:nth-child(3)::after { --sd: 2.8s; } .hero__canale .btn:nth-child(4)::after, .canale--modal .btn:nth-child(4)::after { --sd: 11.2s; } .hero__canale .btn:nth-child(5)::after, .canale--modal .btn:nth-child(5)::after { --sd: 5.6s; } @media (prefers-reduced-motion: reduce) { .hero__canale .btn::after, .canale--modal .btn::after, .despre__cta .btn::after { animation: none; opacity: 0; } } /* ---------- 33. Canalele din modal ---------- */ .modal__intreb { margin-bottom: 1rem; font-size: 0.9375rem; color: var(--text-sters); } .canale--modal { gap: 0.625rem; } .canale--modal .btn { padding: 0.8125rem 1.125rem; font-size: 0.9375rem; } .canale--modal .btn svg { width: 19px; height: 19px; } .modal__lista { display: grid; gap: 0.5rem; margin-top: 0.25rem; } .modal__lista li { position: relative; padding-left: 1.25rem; } .modal__lista li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--aur-inchis); opacity: 0.7; } /* ---------- 34. Cuvântul aprins ---------- */ /* `:not(:hover):not(:focus-visible)` ca pulsul să nu se bată cu starea de hover: dacă omul ține degetul sau cursorul pe un cuvânt, acela rămâne al lui, indiferent unde a ajuns rândul pulsului. */ .cuvant { transition: color 0.9s var(--usor), text-shadow 0.9s var(--usor); /* Decalajul propriu al fiecărui cuvânt. `translate` se aplică după așezarea în pagină, deci mutarea unuia nu îi împinge pe vecini. */ translate: var(--dx, 0) var(--dy, 0); } /* Lumina urmează forma literelor, nu o pată ovală în spatele lor. Costul stă în raza de blur: varianta cu trei umbre de până la 78px scotea 57 fps și 10 cadre pierdute. Două umbre de maximum 30px arată la fel de bine și nu se simt. */ .cuvant.e-aprins:not(:hover):not(:focus-visible) { color: #fff7e6; text-shadow: 0 0 12px rgb(255 228 172 / 0.55), 0 0 30px rgb(232 181 98 / 0.32); } @media (prefers-reduced-motion: reduce) { .cuvant.e-aprins { color: inherit; text-shadow: none; } } /* Nota de final a parcursului: iese din firul de lumină, dar rămâne aliniată cu textul pașilor, ca să se citească drept concluzie, nu ca al cincilea pas. */ .drum__nota { padding-left: 4rem; font-size: var(--t-mic); line-height: 1.7; color: var(--text-sters); } @media (max-width: 560px) { .drum__nota { padding-left: 0; } } /* Eticheta secțiunii se centrează în coloana ei, ca în celelalte secțiuni, chiar dacă titlul de sub ea rămâne aliniat la stânga. */ .drum__eyebrow { display: block; margin-bottom: 1.125rem; text-align: center; } /* ---------- 35. Ce este acest proces ---------- */ /* Antetul copiază tratamentul de la „Ce NU este": etichetă și titlu centrate. Textul rămâne însă aliniat la stânga — patru paragrafe centrate obosesc ochiul, iar cine citește pagina asta e deja obosit. */ .esteproces__cap { text-align: center; } .esteproces__cap h2 { text-wrap: balance; } .esteproces__text { max-width: 58ch; margin: clamp(2.25rem, 4vw, 3rem) auto 0; } .esteproces__text > p + p { margin-top: 1.25rem; } .esteproces__text p { color: var(--text-bland); } /* ---------- 36. Povestea care se deschide ---------- */ /* `grid-template-rows: 0fr → 1fr` animează înălțimea fără să fie nevoie de o valoare `max-height` ghicită, care ori taie textul, ori lasă blocul să sară la final. Conținutul rămâne mereu în pagină, deci Google îl citește și cititoarele de ecran îl găsesc chiar și închis. */ .despre__mai { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--usor); } .despre__mai-in { overflow: hidden; min-height: 0; } .despre__mai-in > * + * { margin-top: 1.375rem; } .despre__text.e-deschis .despre__mai { grid-template-rows: 1fr; } .despre__buton { display: inline-flex; align-items: center; gap: 0.5rem; align-self: start; min-height: 44px; padding: 0; color: var(--accent); font: 600 0.9375rem/1 var(--corp); cursor: pointer; border-bottom: 1px solid rgb(232 181 98 / 0.35); transition: border-color 0.3s var(--usor); } .despre__buton:hover { border-color: var(--accent); } .despre__buton svg { width: 16px; height: 16px; flex: none; transition: rotate 0.4s var(--usor); } .despre__text.e-deschis .despre__buton svg { rotate: 180deg; } @media (prefers-reduced-motion: reduce) { .despre__mai { transition: none; } .despre__buton svg { transition: none; } } /* Ultima frază a poveștii e o invitație directă: primește greutatea unui final, nu a unui paragraf oarecare. */ /* `.despre__text p` are specificitate mai mare, deci culoarea trebuie declarată de la același nivel ca ea, altfel fraza rămâne în gri. */ .despre__text .despre__final { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); line-height: 1.35; color: var(--accent); } .despre__mai-in .despre__final { margin-top: 1.75rem; } /* Pe telefon zidul genera prea mult scroll: 24 de cuvinte, câte două pe rând, cu 44px între rânduri. Spațiul vertical scade la jumătate. Odată cu el trebuie scăzute și decalajele proprii ale cuvintelor — la ±18px, două rânduri vecine s-ar apropia cu 36px, adică mai mult decât noul spațiu dintre ele, și s-ar suprapune. */ @media (max-width: 640px) { .zid__nor { gap: 1.375rem 1.25rem; } .cuvant { translate: calc(var(--dx, 0px) * 0.55) calc(var(--dy, 0px) * 0.45); } } /* ---------- 37. Ultimul pas ---------- */ /* Frazele se scurtează pe măsură ce coboară, iar greutatea lor vizuală crește: ultimul rând e cel mai scurt și cel mai puternic. */ .contact__text { max-width: 52ch; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; } .contact__text > * + * { margin-top: 1.125rem; } .contact__text p { color: var(--text-bland); } .contact__radacina { margin-top: 1.75rem !important; } .contact__radacina span { color: var(--text); } .contact__pas { margin-top: 1.75rem !important; font-size: var(--t-lead); color: var(--text) !important; } .contact__final { margin-top: 1.5rem !important; font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); line-height: 1.25; color: var(--accent) !important; } .contact__tel-nota { max-width: 52ch; margin: 0 auto 0.875rem; text-wrap: balance; } /* ---------- 38. Înainte să alegi ---------- */ /* Ascuns vizual, dar citit de tehnologiile asistive și numărat în structura paginii. Nu `display:none`: acela l-ar scoate complet din arborele de accesibilitate, iar `aria-labelledby` al secțiunii ar rămâne fără țintă. */ .doar-citit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .cine__cap { text-align: center; margin-bottom: clamp(2rem, 3.5vw, 3rem); } .cine__jos { max-width: 52ch; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; text-align: center; } .cine__jos p { color: var(--text-bland); } .cine__final { margin-top: 1.25rem; font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.3; color: var(--accent) !important; } /* ---------- 39. Bannerul ANPC ---------- */ .subsol__anpc { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: flex; justify-content: center; } .subsol__anpc a { display: block; transition: opacity 0.3s var(--usor); } .subsol__anpc a:hover { opacity: 0.82; } .subsol__anpc img { width: 230px; height: auto; border-radius: 3px; } /* ---------- 40. Documentele legale ---------- */ .subsol__firma { margin-top: clamp(1.75rem, 3vw, 2.25rem); font-size: 0.8125rem; line-height: 1.75; color: var(--text-sters); text-align: center; } .subsol__firma a { text-decoration: none; border-bottom: 1px solid var(--linie); } .subsol__firma a:hover { color: var(--accent); border-color: var(--accent); } .subsol__legal-linkuri { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 1.25rem; } .subsol__legal-linkuri button { min-height: 44px; padding: 0; font: 500 0.8125rem/1 var(--corp); color: var(--text-bland); cursor: pointer; border-bottom: 1px solid var(--linie); transition: color 0.3s var(--usor), border-color 0.3s var(--usor); } .subsol__legal-linkuri button:hover { color: var(--accent); border-color: var(--accent); } /* Documentele legale sunt lungi și se citesc, nu se răsfoiesc: corp mai mic, rând mai strâns, titluri clare care rup textul în bucăți parcurgibile. */ .modal--legal .modal__continut { font-size: 0.9375rem; line-height: 1.72; } .modal--legal .modal__continut > * + * { margin-top: 0.875rem; } .modal--legal h4 { margin-top: 2rem; font: 600 0.9375rem/1.4 var(--corp); letter-spacing: 0.01em; color: #14201a; } .modal--legal h4:first-of-type { margin-top: 1.5rem; } .modal--legal ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; } .modal--legal li { position: relative; padding-left: 1rem; color: #43514a; } .modal--legal li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--aur-inchis); opacity: 0.6; } .modal--legal a { color: var(--aur-inchis); } .legal__data { font-size: 0.8125rem; color: #617067; } .legal__model { margin-top: 1rem; padding: 1.125rem 1.25rem; border-left: 2px solid var(--aur-inchis); background: rgb(20 32 26 / 0.04); font-size: 0.875rem; line-height: 1.7; color: #43514a; } /* Trimitere de la un document legal la altul */ .legal__leg { padding: 0; font: inherit; color: var(--aur-inchis); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* Butonul de la capătul poveștii: apare doar după ce omul a citit tot, deci e momentul cel mai „cald" din pagină. */ .despre__cta { margin-top: 1.75rem; }