/* ============================================================================
STILUL SITE-ULUI Ma'Coeur Photography
============================================================================
Până acum, tot ce e mai jos stătea scris ÎN index.html, între . A fost scos aici pentru un motiv anume: paginile separate
(Portofoliu, Servicii, Contact) au nevoie de ACELAȘI stil ca pagina de start.
Copiat în fiecare, ar fi început să se depărteze de la prima modificare — ai
fi schimbat o culoare acasă și n-ai fi înțeles de ce Contact a rămas altfel.
Acum e un singur fișier și o singură adevărată.
Ordinea din fișier a rămas EXACT cea dinainte. Într-o foaie de stil ordinea
nu e o chestiune de ordine, ci de înțeles: două reguli cu aceeași greutate se
bat între ele, iar câștigătoare e cea scrisă mai jos. Mutarea a fost făcută
prin copiere literală, iar rezultatul a fost comparat cu pagina dinainte,
punct cu punct, la două lățimi de ecran.
„?v=" din adresa cu care e chemat: browserele țin foile de stil luni de zile,
iar regulile din .htaccess le adaugă o lună în plus. Când se schimbă ceva
aici, se schimbă și data de acolo — altfel modificarea nu ajunge la nimeni
care a mai fost pe site.
============================================================================ */
:root{
--bg:#f6f4fb;
--bg-alt:#ece8f7;
/* Fundalul benzilor „Despre" și „Servicii". E ținut separat de --bg-alt
tocmai ca să poată fi reglat singur: acolo stă cel mai mult text, deci
acolo se simte cel mai tare câtă lavandă are pagina. Valoarea e la
jumătatea drumului între tonul dinaintea trecerii la lavandă și lavanda
discretă (#ece8f7) — se vede că e lavandă, dar nu obosește ochiul. Restul
benzi („Înainte–după", „Pași") rămân pe --bg-alt. */
--bg-povesti:#edeaf6;
--ink:#221f2a;
--ink-soft:#56505f;
--line:#d7d2e8;
--accent:#a98f6b;
--accent-soft:#eee4d3;
--white:#ffffff;
--maxw:1180px;
/* SCRISUL CALIGRAFIC, într-un singur loc.
E folosit în trei feluri de locuri (meniul de sus, butonul „Galerii
private", supratitlurile secțiunilor). Scris de trei ori, schimbarea
fontului ar însemna trei modificări și o șansă bună să rămână una uitată.
Aici e una singură.
„cursive" de la coadă NU e un font, e o ghicitoare: fiecare telefon și
fiecare calculator pune altceva în locul lui. De-aia arăta altfel pe
laptop decât pe telefon — pe unul se încărcase Great Vibes, pe celălalt
nu, iar acolo a intrat ghicitoarea sistemului. Rămâne ca ultimă plasă,
dar cu Cormorant înaintea lui: dacă fontul nostru lipsește, măcar iese
ceva din familia site-ului, nu ce s-a nimerit. */
--font-scris:'Great Vibes', 'Cormorant Garamond', cursive;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* „hidden" trebuie să însemne ascuns, oricât de tare ar striga altă regulă.
Ascunderea implicită a browserului e un „display:none" fără putere, deci
orice „display:flex" scris de noi pe aceeași clasă o calcă în picioare —
iar elementul rămâne pe ecran deși codul e convins că l-a ascuns. Exact
așa a rămas vizibil un buton de WhatsApp pentru un număr fără WhatsApp.
Reparat o dată, pentru toată pagina. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
font-family:'Montserrat', sans-serif;
color:var(--ink);
background:var(--bg);
font-weight:300;
line-height:1.7;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:'Cormorant Garamond', serif;
font-weight:500;
letter-spacing:0.5px;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
/* Text citit de motoarele de căutare și de cititoarele de ecran, dar invizibil pe pagină. */
.doar-citit{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
/* Supratitlurile secțiunilor („Despre noi", „Portofoliu", „Servicii",
„Contact"…) — tot scris caligrafic, ca meniul și ca logo-ul.
Aceleași două lucruri pleacă odată cu fontul, din același motiv: literele
mari rărite rup un scris legat. Iar mărimea urcă de la 12 la 26px, fiindcă
un supratitlu trebuie să se vadă ca un supratitlu, nu ca o notă de subsol.
Se schimbă TOATE, nu doar cele patru numite: sunt același fel de etichetă,
iar două rămase în alt font ar arăta a scăpare, nu a alegere. */
.eyebrow{
font-family:var(--font-scris);
text-transform:none;
letter-spacing:0;
font-size:26px;
line-height:1.2;
color:var(--accent);
font-weight:400;
margin-bottom:10px;
display:block;
}
.btn{
display:inline-block;
padding:15px 38px;
border:1px solid var(--ink);
color:var(--ink);
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
transition:all .35s ease;
background:transparent;
cursor:pointer;
}
.btn:hover{ background:var(--ink); color:var(--white); }
.btn-light{ border-color:var(--white); color:var(--white); }
.btn-light:hover{ background:var(--white); color:var(--ink); }
.btn-solid{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.btn-solid:hover{ background:transparent; color:var(--ink); }
/* ===== HEADER ===== */
header{
position:fixed; top:0; left:0; right:0; z-index:1000;
padding:14px 0;
transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
/* Bara derulată e închisă, ca subsolul paginii — nu albă. Are două câștiguri
peste varianta deschisă de dinainte: peste o fotografie deschisă la culoare
se vede întotdeauna (albul se topea în poze), iar logo-ul și meniul rămân
albe, ca sus în hero, deci bara nu-și mai schimbă hainele la derulare.
Umbra e mai apăsată decât înainte fiindcă acum desparte închis de deschis,
nu deschis de deschis. */
header.scrolled{
background:rgba(34,31,42,0.94);
padding:12px 0;
box-shadow:0 2px 22px rgba(0,0,0,0.22);
}
/* „gap" ține logo-ul la distanță de meniu chiar și pe ecrane înguste, unde
„space-between" singur i-ar lăsa să se atingă. */
header .container{ display:flex; align-items:center; justify-content:space-between; gap:34px; }
.brand-logo{ display:block; fill:currentColor; }
/* Logo-ul original, pe două rânduri (vezi marca.css). „Photography" e mic
acolo, deci bara îi dă înălțime: 64px, cu marginile barei micșorate de la
22px la 14px, ca înălțimea totală să rămână aproape neschimbată.
Selectorul e „header .logo-mark", nu doar „.logo-mark", ca să bată
culoarea implicită din marca.css indiferent de ordinea fișierelor. */
header .logo-mark{
display:inline-block; --marca-inaltime:64px;
color:var(--white); transition:color .4s ease, height .4s ease;
}
/* Doar mărimea se schimbă la derulare, nu și culoarea: bara e închisă acum,
deci logo-ul alb de sus e bun și jos. Așa nu mai clipește dintr-o culoare
în alta la fiecare derulare. */
header.scrolled .logo-mark{ --marca-inaltime:50px; }
/* Logoul E linkul către capul paginii — a preluat rolul căsuței „Acasă", care
a fost scoasă. E și locul unde oricine caută din instinct drumul înapoi sus,
pe orice site.
Regulile stau DUPĂ cea de „scrolled", altfel aceea le-ar bate când bara e
albă (aceeași greutate, deci contează ordinea). */
header a.logo-mark{ cursor:pointer; text-decoration:none; }
header .logo-mark:hover,
header.scrolled .logo-mark:hover{ color:var(--accent); }
header a.logo-mark:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:6px; }
/* Căsuța de la „Acasă" — aceeași linie subțire ca aparatul foto de la
„Galerii private", ca să pară desenate de aceeași mână.
Legătura rămâne „inline", exact ca celelalte din meniu. Cu „inline-flex"
linia de bază a legăturii devenea marginea de jos a desenului, iar „Acasă"
urca cu 5px față de „Despre", „Portofoliu" și restul. Așa, desenul e doar
o iconiță așezată pe rândul de text, iar textul stă pe aceeași linie cu
vecinii lui.
„vertical-align" e ales prin măsurare, nu din ochi: la -5px, mijlocul
desenului cade exact pe mijlocul majusculelor de lângă el. */
/* „stretch" ține cele trei blocuri la aceeași înălțime, ca tot ce e în meniu
să stea pe aceeași linie de mijloc. */
nav ul{ display:flex; gap:0; list-style:none; align-items:stretch; }
nav ul > li{ display:flex; align-items:center; }
/* Grupul din mijloc a rămas FĂRĂ cele două linii, sus și jos. Erau acolo ca
să lege „Acasă" de „Galerii private" pe vremea când amândouă erau butoane
cu chenar; „Acasă" și-a pierdut chenarul, deci liniile nu mai încadrau
nimic — doar tăiau antetul în bucăți. Spațiul singur face aceeași treabă. */
.nav-mijloc{ gap:30px; padding:0 26px; }
/* ===== Butonul din capătul dreapta =====
„Galerii private" e singura intrare care te scoate din pagină. De-aia are
cutie și chenar: e îndemnul, nu o secțiune de mai jos.
E și singurul lucru încadrat din tot antetul, de când căsuța „Acasă" a
fost scoasă: drumul înapoi sus îl face acum logoul din stânga. */
.btn-nav{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:39px; box-sizing:border-box; padding:0 17px;
border:1px solid rgba(255,255,255,0.45);
color:var(--white); text-decoration:none;
/* Scris caligrafic, ca vecinii lui din meniu. Majusculele și spațierea
dintre litere pleacă odată cu fontul: un scris legat scris cu litere mari
rărite se destramă. Mărimea urcă de la 11 la 19px — literele mici ale
unui scris caligrafic sunt mult mai scunde decât ale unui font obișnuit,
deci la aceeași cifră s-ar citi cu o treime mai mic. */
/* ACEEAȘI mărime ca cele patru cuvinte de lângă el — 21px, nu 19.
Cu același font, aceeași mărime, și amândouă centrate în cutia lor,
liniile de scris cad una peste alta: butonul și meniul se citesc pe
aceeași linie. La mărimi diferite n-ar fi fost cu putință, oricât le-am
fi centrat. */
font-family:var(--font-scris);
/* Ținut la aceeași cifră cu „nav .nav-mijloc a" de mai sus — vezi nota de
acolo. A urcat de la 21 la 23 odată cu ele. */
font-size:23px; letter-spacing:0; text-transform:none; line-height:1;
transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.btn-nav:hover{ background:var(--accent); border-color:var(--accent); color:#1a1820; }
.btn-nav::after{ display:none; } /* fără linia de subliniere a celorlalte */
/* Pe bara închisă, butonul rămâne exact cum e sus în hero — alb pe întuneric.
Regulile care îl făceau închis la derulare au plecat odată cu fundalul alb. */
/* Butonul „Galerii private" — singura intrare din meniu care duce în altă
pagină, nu la o secțiune de mai jos. De aceea e desprins de restul: stă la
capătul din dreapta, are chenar și iconiță, ca să se vadă că e alt lucru. */
/* fără margine: linia grupului din mijloc trebuie să ajungă la buton */
.nav-galerii{ margin-left:0; }
/* Aceeași cutie ca butonul „Înapoi la site" din paginile de galerii:
aceeași înălțime, aceeași lățime minimă, text centrat. Când treci dintr-o
pagină în alta, butonul rămâne pe loc.
Dacă schimbi ceva aici, schimbă și .inapoi din galerii-stil.css. */
.btn-galerii{ min-width:198px; }
/* Aparatul foto: cu jumătate mai mare decât era (17 → 26), și așezat la
mijlocul distanței dintre chenar și „G"-ul de la „Galerii".
Marginile negative de mai jos NU sunt o potriveală la ochi. Butonul își
centrează cuprinsul, deci orice lățime adăugată iconiței ar fi împins
scrisul spre dreapta cu jumătate din cât a crescut ea. Marginea din stânga
(−21) și cea din dreapta (+12) se scad una pe alta: lățimea cuprinsului
rămâne aceeași, deci „Galerii private" nu se clintește, iar iconița se
mută singură cu 21 de puncte la stânga.
Cifrele vin dintr-o măsurătoare a CERNELII, nu a cutiilor: desenul
aparatului nu atinge marginile pătratului lui, iar „G" caligrafic începe și
el mai la dreapta decât cutia scrisului. Măsurat pe pixeli, semnul rămâne
cu 21,6 puncte de o parte și de alta.
Grosimea liniei coboară de la 1,4 la 1,05: ea se mărește odată cu desenul,
iar la 26 de puncte ar fi ieșit de o dată și jumătate mai groasă decât era
— prea apăsată lângă un scris caligrafic subțire. */
.icon-aparat{
width:26px; height:26px; flex:none;
margin-left:-21px; margin-right:12px;
fill:none; stroke:currentColor; stroke-width:1.05;
stroke-linejoin:round; stroke-linecap:round;
}
nav a{
font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--white);
transition:color .3s ease; position:relative; padding-bottom:4px;
}
/* ===== CELE PATRU CUVINTE DIN MENIU, SCRISE CALIGRAFIC =====
Ca să pară scrise de aceeași mână ca logo-ul de lângă ele.
Ce trebuie schimbat odată cu fontul, altfel iese de necitit:
— MAJUSCULELE pică. Un scris de mână cu toate literele mari nu există;
legăturile dintre litere se rup și cuvântul se destramă;
— SPAȚIEREA dintre litere, la fel. Ea e făcută pentru majuscule rărite;
într-un scris legat, desparte tocmai ce trebuia legat;
— MĂRIMEA crește de la 12 la 21px. Scrisurile caligrafice au litera
mică („x-height") mult mai scundă decât un font obișnuit, deci la
aceeași mărime nominală se citesc cu vreo două treimi mai mic;
— linia de dedesubt coboară puțin, ca să nu taie cozile lui „p" din
„Despre" și „Portofoliu". */
nav .nav-mijloc a{
font-family:var(--font-scris);
/* 23px, nu 21. Dacă schimbi cifra asta, schimb-o și la „.btn-nav" de mai
jos: butonul „Galerii private" e ținut dinadins la ACEEAȘI mărime, ca
liniile de scris să cadă una peste alta. La mărimi diferite, meniul și
butonul se citesc pe două linii, oricât le-ai centra. */
font-size:23px; letter-spacing:0; text-transform:none;
/* Mărirea de la trecerea cu mouse-ul are efect fiindcă legăturile astea sunt
elemente de flex (părintele lor, „nav ul > li", e flex), deci browserul le
tratează ca blocuri — iar transform nu se aplică pe un element pur inline.
Dacă vreodată se scoate flexul de pe „li", aici trebuie pus
„display:inline-block", altfel creșterea dispare fără nicio eroare. */
transform-origin:center bottom;
transition:color .3s ease, transform .28s cubic-bezier(.22,.8,.28,1);
/* Fără margine de jos ÎN cutie. Aceea împingea scrisul mai sus decât
mijlocul cutiei, iar cutia e cea pe care meniul o centrează — deci cele
patru cuvinte stăteau cu vreo patru puncte deasupra butonului de lângă
ele. Acum cutia e chiar rândul de scris, iar linia de subliniere e
coborâtă sub ea, pe cont propriu. */
padding-bottom:0; line-height:1;
}
/* Sub cutie, nu în ea: „-9px" o ține la distanță de cozile lui „p" din
„Despre" și „Portofoliu", fără să miște scrisul din loc. */
nav .nav-mijloc a::after{ bottom:-9px; }
/* Creșterea la trecerea cu mouse-ul — aceeași mișcare ca butoanele din panou,
dar fără chenar și fără umbră: aici nu e o cutie care se ridică, e un
cuvânt care se apropie.
„transform-origin: center bottom" nu e o toană: crescând din mijloc, scrisul
ar urca peste rândul de deasupra și ar împinge optic linia de subliniere.
Ancorat de talpă, cuvântul crește în sus, iar linia rămâne pe loc.
Mărirea nu mișcă vecinii — transform nu ocupă spațiu în așezare — deci
meniul nu „respiră" când plimbi mouse-ul peste el. */
nav .nav-mijloc a:hover,
nav .nav-mijloc a:focus-visible{ transform:scale(1.12); }
/* Pe un ecran cu deget, nu cu mouse, „hover" rămâne lipit după apăsare: ai
atins un cuvânt, ai plecat de pe el, iar el a rămas mărit. Deci creșterea
se dă numai dispozitivelor care chiar au cursor. */
@media (hover:none){
nav .nav-mijloc a:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
nav .nav-mijloc a{ transition:color .3s ease; }
nav .nav-mijloc a:hover,
nav .nav-mijloc a:focus-visible{ transform:none; }
}
nav a::after{
content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent);
transition:width .3s ease;
}
nav a:hover::after{ width:100%; }
/* ===== BUTONUL DE MENIU, PE TELEFON =====
Erau trei linii albe de UN pixel, fără nimic în spate. Pe o fotografie
deschisă — și cele de nuntă sunt aproape toate deschise — se pierdeau:
rămânea un colț gol în care trebuia să ghicești că e ceva de apăsat.
Trei schimbări, fiecare pentru altceva:
— linii de 2px în loc de 1: pe un ecran cu puncte dese, un pixel se
subțiază până aproape de nimic;
— o umbră scurtă sub ele, care le desenează marginea pe orice fundal. E
mai bună decât un chenar: nu se vede ca un obiect în plus, dar ține
liniile lizibile și peste alb;
— cât panoul e deschis, liniile se fac închise la culoare, fiindcă
panoul e deschis — alb pe alb era iar nimic. */
.nav-toggle{
display:none; flex-direction:column; gap:5px; cursor:pointer;
background:none; border:none; padding:6px 2px;
}
.nav-toggle span{
width:26px; height:2px; border-radius:2px;
background:var(--white);
box-shadow:0 0 3px rgba(28,25,34,.55);
transition:background .3s ease, box-shadow .3s ease;
}
.nav-toggle.deschis span{ background:var(--ink); box-shadow:none; }
/* ===== HERO ===== */
.hero{
height:100vh; min-height:640px; position:relative;
display:flex; align-items:center; justify-content:center; text-align:center;
background:
linear-gradient(180deg, rgba(28,25,34,0.35) 0%, rgba(28,25,34,0.55) 100%),
/* DE ÎNLOCUIT cu fotografia ta reală. Până atunci e un fundal generat,
găzduit local — site-ul nu cere nimic de pe alt server, iar politica
de confidențialitate poate afirma asta fără să mintă. */
url('assets/placeholder/hero.jpg') center/cover no-repeat;
}
.hero-inner{ color:var(--white); max-width:700px; padding:0 24px; position:relative; z-index:4; }
/* ===== SLIDER-UL DIN ANTET =====
Se construiește din JavaScript, și doar dacă sunt cel puțin două fotografii
încărcate din admin și schimbarea lor e pornită. Cu o singură poză (sau cu
animația oprită) nu apare nimic din ce urmează: rămâne fundalul obișnuit,
pus prin CSS, exact ca înainte.
Efectul e cel al unui obturator: cele două perdele se închid peste imagine,
fotografia se schimbă în spatele lor, apoi perdelele se ridică. Exact ce
vezi în vizor când apeși pe declanșator. */
.hero-straturi{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-strat{
position:absolute; inset:0; background-size:cover; background-position:center;
}
/* Voalul închis care ținea textul lizibil era parte din fundalul .hero.
Când intră slider-ul, fundalul acela dispare, deci voalul are nevoie de
stratul lui, deasupra fotografiilor. */
.hero-voal{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(28,25,34,0.35) 0%, rgba(28,25,34,0.55) 100%);
}
/* Obturatorul propriu-zis: șase lamele care se rotesc spre centru, ca
diafragma unui obiectiv. Deschiderea rămasă între ele e un hexagon care se
micșorează și se răsucește — exact ce face o diafragmă reală.
Desenul e SVG cu „slice": pătratul de 200×200 se mărește până acoperă tot
antetul, oricât de lat ar fi ecranul, fără să deformeze lamelele. Cât timp
obturatorul e deschis, deschiderea are raza 160, iar colțul cel mai
îndepărtat al zonei vizibile e la 141 — deci nu se vede absolut nimic din
lamele. */
.hero-iris{
position:absolute; inset:0; z-index:2; width:100%; height:100%;
pointer-events:none; display:block;
}
/* Lumina din capătul țevii.
A fost, o vreme, un degrade pus în fiecare lamelă. Arăta bine, dar browserul
trebuia să-l recalculeze de șase ori la fiecare cadru, iar animația sărea pe
ecrane mari (măsurat: 20 din 100 de cadre pierdute la 1920×1080, unele de
100ms). Acum lamelele au o culoare plată — ieftin de desenat — iar lumina e
stratul ăsta, care nu se redesenează niciodată: i se schimbă doar
transparența, lucru pe care placa video îl face fără efort.
Se aprinde abia când deschiderea e aproape închisă, ca să nu spele
fotografia cât timp încă se vede prin ea. */
.hero-lumina{
position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
/* „will-change" îi dă stratului ăsta un plan propriu în placa video. Fără
el, schimbarea transparenței obligă browserul să redeseneze degradeul pe
tot ecranul la fiecare cadru — măsurat, exact asta mai rupea animația
(12 cadre pierdute din 100 la 1920×1080; cu el, zero). */
will-change:opacity;
background:radial-gradient(circle at 50% 50%,
rgba(150,142,166,.60) 0%,
rgba(104,96,120,.38) 11%,
rgba(56,48,70,.15) 26%,
rgba(24,20,32,0) 44%);
}
/* Placa de metal: tot ce nu e deschidere. Opacă, dintr-o bucată — de aceea
schimbarea fotografiei nu se vede prin ea. */
/* Metalul e deliberat mai deschis decât fundalul: altfel fâșiile de mai jos
n-ar avea ce întuneca și placa ar arăta ca o pată plată. Așa, de la
deschidere spre margini se văd șase trepte, câte una pentru fiecare lamelă
care s-a suprapus acolo. */
.hero-iris .metal{ fill:#393346; }
/* Aici au fost, o vreme, șase fâșii translucide care întunecau treptat spre
margini. Le-am scos din două motive: la o valoare vizibilă făceau din
obturator o floare cu petale, iar coborâte până unde nu mai deranjau nu se
mai vedeau oricum. În plus erau partea cea mai scumpă de desenat — șase
suprafețe transparente cât ecranul, amestecate una peste alta la fiecare
cadru. Măsurat pe o pagină cu portofoliul plin: cu ele, 25-46 cadre
pierdute din 95; fără ele, 4-10. Adâncimea o dau acum lumina din mijloc și
muchiile. */
/* Muchiile lamelelor, toate șase într-un singur desen, deasupra plăcii.
Fiecare pornește din colțul deschiderii și se duce în afară, până iese din
cadru — atât cât se vede și la un obiectiv adevărat. Cercuri întregi ar fi
ieșit dincolo, s-ar fi încrucișat între ele și ar fi făcut din obturator o
floare cu șase petale.
„non-scaling-stroke" ține linia de un pixel oricât ar fi mărit desenul. */
.hero-iris .santuri{
stroke:rgba(255,255,255,.28); stroke-width:1; fill:none;
stroke-linecap:round; vector-effect:non-scaling-stroke;
}
/* Butonul de pauză, în colțul din stânga jos. Cine nu vrea mișcare îl apasă
o dată și fotografiile stau pe loc — dar declanșatorul din dreapta rămâne
bun: apeși, poza se schimbă, fără nicio animație. Alegerea se ține minte,
ca să nu fie nevoie s-o repete la fiecare vizită. */
.hero-pauza{
position:absolute; z-index:4; left:38px; bottom:38px;
width:44px; height:44px; border-radius:50%; padding:0; cursor:pointer;
background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.38);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center;
transition:border-color .25s ease, background .25s ease, opacity .25s ease;
opacity:.6;
}
.hero-pauza:hover, .hero-pauza:focus-visible{ opacity:1; border-color:var(--accent); }
.hero-pauza:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.hero-pauza svg{ width:15px; height:15px; display:block; fill:var(--white); }
.hero-pauza:hover svg{ fill:var(--accent); }
/* Când e oprit, butonul rămâne vizibil: e singurul semn că mișcarea e pe pauză. */
.hero-pauza.oprit{ opacity:1; }
.hero-pauza .semn-redare{ display:none; }
.hero-pauza.oprit .semn-pauza{ display:none; }
.hero-pauza.oprit .semn-redare{ display:block; }
@media (max-width:700px){
/* „bottom" potrivit cu al celorlalte două de pe rând — vezi .hero-jos. */
.hero-pauza{ left:20px; bottom:24px; width:40px; height:40px; }
}
/* Declanșatorul. Stă în colțul din dreapta jos, departe de „Derulează". */
.hero-declansator{
position:absolute; z-index:4; right:38px; bottom:38px;
width:58px; height:58px; border-radius:50%; padding:0; cursor:pointer;
background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.55);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center;
transition:border-color .25s ease, background .25s ease;
}
.hero-declansator i{
width:26px; height:26px; border-radius:50%; background:var(--white); display:block;
transition:transform .18s ease, background .25s ease;
}
.hero-declansator:hover{ border-color:var(--accent); background:rgba(255,255,255,0.2); }
.hero-declansator:hover i{ background:var(--accent); }
.hero-declansator:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.hero-declansator.apasat i{ transform:scale(.76); }
.hero-declansator[disabled]{ cursor:default; }
@media (max-width:700px){
.hero-declansator{ right:20px; bottom:24px; width:50px; height:50px; }
.hero-declansator i{ width:22px; height:22px; }
}
/* Cine are pornită setarea de sistem „mai puțină mișcare" vede fotografiile
schimbându-se simplu, fără lamele. Butonul rămâne — schimbarea la cerere
nu e o animație, e o acțiune. (Oprirea efectivă se face în JavaScript:
lamelele nici măcar nu se desenează.) */
@media (prefers-reduced-motion: reduce){
.hero-iris, .hero-lumina{ display:none; }
}
/* „max-width" ține logo-ul în ecran pe telefoanele foarte înguste (320px):
la 170px înălțime desenul iese lat de 300px și, cu marginile secțiunii,
lățea toată pagina. Acum se micșorează singur cât să încapă. */
.brand-logo-hero{ height:170px; width:auto; max-width:100%; margin:0 auto 26px; color:var(--white); }
/* ===== LOGOUL SE SCRIE SINGUR ==========================================
Logoul e desenat din contururi pline, nu din linii — deci nu are un traseu
de parcurs, așa cum are un scris adevărat. Traseul din mască e linia de
mijloc a literelor, scoasă din desen prin subțiere: exact drumul pe care ar
fi mers vârful stiloului.
Linia asta nu se vede niciodată. E doar MASCĂ: o îngroșăm cât litera și o
descoperim treptat, iar prin ea se vede logoul adevărat. Așa cerneala apare
urmând bucla, nu ca o perdea trasă peste desen.
Două lucruri aflate din măsurători, nu presupuse:
— un singur traseu cu toate bucățile NU merge: în Chromium modelul de
linie punctată se reia la fiecare bucată, deci toate apăreau deodată
(prima probă arăta logoul întreg în toate cadrele). De-aia fiecare
bucată e propriul ei traseu, cu întârzierea ei;
— capătul rotund al liniei rămâne vizibil chiar și complet „nedesenat",
și semăna 40 de puncte răzlețe pe logo încă de la început — 2530 de
pixeli, măsurați. De-aia porțiunea ascunsă e cu o grosime mai lungă
decât traseul: așa capătul rotund iese în afara desenului. */
/* 2,55s de scris + 0,45s cât apare copia întreagă = exact 3 secunde.
După ele, logoul mai stă ÎNTREG încă două secunde, și abia apoi îl șterge
obturatorul — vezi SCRIS și STA_INTREG din scripturi.js. Era 2,9s, și atunci
socoteala nu se închidea rotund.
Cele trei numere merg împreună: dacă schimbi durata de aici, schimbă și
SCRIS din scripturi.js, altfel obturatorul prinde logoul nescris. */
.brand-logo-hero{ --durata:2.55s; }
.scrie-traseu path{
fill:none; stroke:#fff; stroke-width:16;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:var(--l); stroke-dashoffset:var(--l);
animation:scrieLinia calc(var(--u) * var(--durata)) linear
calc(var(--s) * var(--durata)) forwards;
}
@keyframes scrieLinia{ to{ stroke-dashoffset:0; } }
/* Copia întreagă, care apare lin la sfârșit: masca lasă pe alocuri un fir de
un pixel pe margine, iar asta îl acoperă fără să se vadă vreo tresărire. */
.scrie-final{ opacity:0; animation:apareIntreg .45s ease-out var(--durata) forwards; }
@keyframes apareIntreg{ to{ opacity:1; } }
/* Cine a cerut mai puțină mișcare primește logoul dintr-o dată, întreg. */
@media (prefers-reduced-motion: reduce){
.scrie-traseu path{ animation:none; stroke-dashoffset:0; }
.scrie-final{ animation:none; opacity:1; }
}
.hero-inner p.tagline{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:22px; margin-bottom:0; font-weight:400; letter-spacing:0.5px; }
/* ===== RÂNDUL DE JOS AL ANTETULUI ======================================
Butonul „Vezi portofoliul" stă la mijloc, pe aceeași linie cu pauza din
stânga și cu declanșatorul din dreapta. Nu e o bară adevărată cu cele trei
înăuntru: pauza și declanșatorul erau deja așezate în colțuri cu „absolute",
iar mutarea lor ar fi însemnat rescrierea unor reguli care merg de mult.
Se potrivește doar ÎNĂLȚIMEA: toate trei au același „bottom", deci ochiul
le vede pe o linie. */
.hero-jos{
position:absolute; z-index:4; left:0; right:0; bottom:38px;
display:flex; justify-content:center; align-items:center;
pointer-events:none; /* fotografia rămâne apăsabilă în rest */
}
.hero-jos > *{ pointer-events:auto; }
/* Înălțimea butonului o potrivim cu a cercurilor din stânga și din dreapta
(44 și 58 px): la mijloc, un buton mult mai scund ar fi părut că plutește. */
.hero-buton{ padding:16px 34px; }
/* ===== UMBRA DE JOS, CARE RĂMÂNE =======================================
După ce voalul se ridică (vezi mai jos), fotografia se vede la culoarea ei
— inclusiv când e una deschisă, cu cer alb. Butoanele albe de pe ea ar
deveni de necitit. Fâșia asta e singurul lucru închis care rămâne: doar jos,
doar cât să țină cele trei butoane lizibile, și atât de slabă încât pe o
fotografie închisă nici nu se observă. */
.hero-poala{
position:absolute; inset:auto 0 0 0; height:190px; z-index:3;
pointer-events:none;
background:linear-gradient(180deg, rgba(20,18,24,0) 0%, rgba(20,18,24,0.42) 78%, rgba(20,18,24,0.5) 100%);
}
/* ===== ȘTERGEREA LOGOULUI ȘI A RÂNDULUI DE SUB EL ======================
Se întâmplă exact cât lamelele obturatorului se închid: când se deschid din
nou, nu mai e nimic peste fotografie.
Nu e o simplă stingere. Blocul se ridică puțin, se strânge aproape
imperceptibil și se topește în neclar — ca o imagine care iese din focus în
vizor, nu ca un text care dispare. De-aia „filter: blur" e aici: fără el,
stingerea singură arăta a element ascuns cu JavaScript.
„visibility" la capăt, nu doar transparență: un bloc nevăzut dar prezent ar
fi rămas peste fotografie și ar fi înghițit apăsările. */
/* 0,76s — exact cât durează DESFACEREA lamelelor (DESCHIDERE din
scripturi.js). Ștergerea pornește când ele încep să se deschidă și se
termină odată cu ele: deschiderea descoperă scrisul pe jumătate dus și îl
ia cu ea. Era 0,62s, cât închiderea, fiindcă înainte ștergerea se petrecea
la închidere — s-a mutat, deci se mută și durata.
CELE DOUĂ MERG ÎMPREUNĂ: dacă schimbi DESCHIDERE, schimbă și aici. */
.hero-inner{
transition:opacity .76s ease, transform .76s ease, filter .76s ease, visibility 0s linear .76s;
}
.hero-inner.sters{
opacity:0; transform:translateY(-16px) scale(.985); filter:blur(7px);
visibility:hidden; pointer-events:none;
}
/* Voalul închis care ținea logoul lizibil se ridică odată cu el: de acum
fotografia se vede exact cum a fost urcată. */
.hero-voal{ transition:opacity .76s ease; }
.hero-voal.limpede{ opacity:0; }
@media (prefers-reduced-motion: reduce){
/* Fără plutire și fără neclar — rămâne doar stingerea, scurtă. */
.hero-inner{ transition:opacity .3s linear, visibility 0s linear .3s; }
.hero-inner.sters{ transform:none; filter:none; }
}
@media (max-width:700px){
/* Aceeași distanță de jos pentru toate trei. Erau 24, 26 și 22 — o
diferență de patru pixeli, prea mică s-o vezi dintr-o privire și exact
cât să facă rândul să pară strâmb. Măsurată la probe, nu din ochi. */
.hero-jos{ bottom:24px; }
.hero-buton{ padding:14px 26px; font-size:11px; }
.hero-poala{ height:150px; }
}
/* ===== SECTION GENERIC ===== */
section{ padding:120px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.section-head h2{ font-size:40px; margin-bottom:18px; }
.section-head p{ color:var(--ink-soft); font-size:15px; }
/* Textul scris din panou poate avea mai multe paragrafe. Ele stau într-un
înveliș (vezi scripturi.js), fiindcă un paragraf nu se poate pune în altul.
Aici primesc aerul dintre ele — altfel s-ar lipi unul de celălalt. */
.section-head-descriere p + p{ margin-top:12px; }
/* ===== DESPRE ===== */
#despre{ background:var(--bg-povesti); }
.despre-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
/* Fotografia din „Despre" — așezată, nu aruncată.
Trei lucruri o scot din pagină: colțurile rotunjite, umbra în două trepte
(una scurtă și apăsată, care o „lipește" de fundal, plus una lungă și
difuză, care o ridică deasupra lui) și o înclinare de o jumătate de grad,
cât să nu pară lipită cu rigla. Chenarul auriu rămâne, dar înclinat invers,
ca o a doua ramă în spate. */
.despre-img{
position:relative;
transform:rotate(-.5deg);
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* CADRUL ține fotografiile, nu ele pe sine.
Înainte, rotunjirea colțurilor și umbra stăteau pe poză. Cu două poze
suprapuse asta ar fi însemnat două umbre una peste alta, care se îngroașă
tocmai cât timp se trece de la una la alta — se vedea ca o pâlpâire pe
margini. Acum umbra e a cadrului, o singură dată, iar pozele dinăuntru sunt
simple. */
.despre-cadru{
position:relative;
height:560px;
border-radius:10px;
overflow:hidden;
/* Umbra în trei trepte: una de contact, foarte scurtă, care o lipește de
pagină; una medie, care îi dă grosime; una lungă și difuză, care o ridică
deasupra fundalului. Una singură ar fi arătat a decupaj lipit. */
box-shadow:
0 1px 2px rgba(28,25,34,.12),
0 6px 14px -6px rgba(28,25,34,.22),
0 26px 52px -16px rgba(28,25,34,.42);
}
.despre-cadru img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; display:block;
}
/* ===== TRECEREA DE LA O FOTOGRAFIE LA ALTA: URMA MIȘCĂRII =====
*
* Cele două fotografii nu sunt două poze diferite: sunt ACELAȘI GEST, la o
* secundă distanță — aparatul întins spre privitor, apoi ridicat la ochi.
* Fundalul, lumina și poziția corpului sunt aceleași; se mișcă brațele.
*
* DE CE NU SE MORFEAZĂ MÂINILE. Am încercat morfarea adevărată (calculul care
* spune unde se mută fiecare punct din prima poză ca să ajungă în a doua) și
* se rupe: peste jumătate din cadru NU are corespondent în cealaltă poză. În
* prima, fața se vede; în a doua e în spatele aparatului. Nu există „unde s-a
* dus fața" — a fost acoperită. Un calcul nu poate duce un lucru către ceva ce
* nu există, poate doar să-l întindă. Ieșeau trei brațe.
*
* CE FACE, ÎN SCHIMB. Fiecare poză lasă în urmă câteva copii tot mai șterse,
* împinse pe direcția ADEVĂRATĂ a gestului — 84°, adică drept în sus, măsurată
* în fotografii. E chiar ce înregistrează un aparat când brațul se mișcă în
* timpul expunerii: o dâră, nu o formă intermediară. De-aia nu poate ieși
* prost: nu inventează nicio poziție a mâinilor care să nu existe în poze.
*
* VITEZA, DINTR-UN SINGUR LOC. „--despre-viteza" înmulțește toate duratele de
* mai jos. 4 înseamnă de patru ori mai încet decât mișcarea firească — ales
* anume: la viteza obișnuită, dâra trece prea repede ca să se vadă.
*/
.despre-cadru{ --despre-viteza:4; }
/* Cadrul devine apăsabil DOAR când există a doua fotografie — clasa se pune
din JavaScript, odată cu straturile. Cu o singură poză n-ar avea ce schimba,
iar un cursor de mână peste ceva care nu face nimic e o promisiune goală. */
.despre-cadru.se-poate-apasa{ cursor:pointer; }
.despre-cadru.se-poate-apasa:focus-visible{
outline:2px solid var(--accent); outline-offset:4px;
}
.despre-urma{ opacity:0; pointer-events:none; }
#desprePoza, #desprePoza2, .despre-urma{
transition:transform calc(820ms * var(--despre-viteza)) cubic-bezier(.18,.82,.28,1),
opacity calc(440ms * var(--despre-viteza)) ease calc(150ms * var(--despre-viteza));
}
/* Starea de repaus: a doua poză și dârele ei stau dedesubt, nevăzute. */
#desprePoza2{ opacity:0; transform:translateY(22px) scale(1.05); }
.despre-cadru .b1{ transform:translateY(40px) scale(1.06); }
.despre-cadru .b2{ transform:translateY(58px) scale(1.07); }
.despre-cadru .b3{ transform:translateY(78px) scale(1.08); }
.despre-cadru.a-doua #desprePoza{ transform:translateY(-16px) scale(1.035); opacity:0; }
.despre-cadru.a-doua .a1{ transform:translateY(-30px) scale(1.045); opacity:.30; }
.despre-cadru.a-doua .a2{ transform:translateY(-44px) scale(1.055); opacity:.18; }
.despre-cadru.a-doua .a3{ transform:translateY(-60px) scale(1.065); opacity:.09; }
.despre-cadru.a-doua #desprePoza2{ transform:translateY(0) scale(1); opacity:1; }
.despre-cadru.a-doua .b1,
.despre-cadru.a-doua .b2,
.despre-cadru.a-doua .b3{ transform:translateY(0) scale(1); opacity:0; }
/* Dârele celei de-a doua se aprind DOAR pe drum, nu la capete: la început și
la sfârșit cadrul trebuie să fie o fotografie curată, nu una dublată. */
.despre-cadru.a-doua .b1{ animation:despreDara calc(820ms * var(--despre-viteza)) ease-out; }
.despre-cadru.a-doua .b2{ animation:despreDara2 calc(820ms * var(--despre-viteza)) ease-out; }
.despre-cadru.a-doua .b3{ animation:despreDara3 calc(820ms * var(--despre-viteza)) ease-out; }
@keyframes despreDara { 0%,100%{opacity:0;} 45%{opacity:.26;} }
@keyframes despreDara2{ 0%,100%{opacity:0;} 45%{opacity:.16;} }
@keyframes despreDara3{ 0%,100%{opacity:0;} 45%{opacity:.08;} }
/* ===== ÎNTOARCEREA: COBORÂREA APARATULUI =====
*
* Aici era, până acum, o tăietură: se stingeau animațiile, se schimba starea
* și se dădea drumul la loc după două cadre desenate, ca drumul înapoi să nu
* se vadă deloc. Motivul scris atunci era că „o ridicare derulată invers arată
* a greșeală". Se vedea ca o pâlpâire, fiindcă asta și era.
*
* Motivul era greșit, nu grija. Mișcarea care se ascundea NU e ridicarea
* rulată îndărăt: e cealaltă jumătate a aceluiași gest — aparatul care
* coboară. Ea arăta a derulare doar fiindcă îi lipsea singurul lucru care
* spune unui ochi în ce direcție merge ceva: dâra.
*
* Deci nu se mai ascunde nimic. Se lasă drumul să se vadă și i se dau dâre
* proprii, ÎN JOS. Fotografia a doua coboară și se stinge, prima vine de sus
* la locul ei. Ridică, ține, coboară, ține — ca în realitate.
*
* Dârele se aprind doar pe drum (0 → aprins → 0), nu la capete: la început și
* la sfârșit cadrul trebuie să fie o fotografie curată, nu una dublată.
*/
/* DE CE ALTE NUME DE ANIMAȚIE AICI (despreDaraJ, nu despreDara)
---------------------------------------------------------------------------
Pare o dublare inutilă: aceleași trei aprinderi, scrise încă o dată sub alt
nume. Nu e. Dârele astea (b1–b3) au deja o animație pe drumul de dus, iar
browserul compară animațiile DUPĂ NUME: dacă la întoarcere le găsește tot
„despreDara", cu aceeași durată, socotește că e aceeași animație — cea care
s-a terminat demult, în timpul ducerii — și n-o mai pornește de la capăt.
Rezultatul se vedea: la întoarcere dârele fotografiei care pleacă rămâneau
stinse pe tot drumul (măsurat: 0, față de 0,25 la ducere), iar amestecul
celor două fotografii rămânea descoperit — se vedeau două cadre suprapuse,
ca o dublă expunere.
Un nume nou înseamnă o animație nouă, deci o pornire nouă. */
.despre-cadru.jos-inapoi .b1{
transform:translateY(30px) scale(1.045); opacity:0;
animation:despreDaraJ calc(820ms * var(--despre-viteza)) ease-out;
}
.despre-cadru.jos-inapoi .b2{
transform:translateY(44px) scale(1.055); opacity:0;
animation:despreDaraJ2 calc(820ms * var(--despre-viteza)) ease-out;
}
.despre-cadru.jos-inapoi .b3{
transform:translateY(60px) scale(1.065); opacity:0;
animation:despreDaraJ3 calc(820ms * var(--despre-viteza)) ease-out;
}
@keyframes despreDaraJ { 0%,100%{opacity:0;} 45%{opacity:.26;} }
@keyframes despreDaraJ2{ 0%,100%{opacity:0;} 45%{opacity:.16;} }
@keyframes despreDaraJ3{ 0%,100%{opacity:0;} 45%{opacity:.08;} }
/* Dârele fotografiei care VINE nu se aprind, ci se sting: pornesc de sus, din
locul în care le lăsase ridicarea, și se topesc în ea pe măsură ce coboară.
E urma care ajunge din urmă fotografia și intră în ea. Aici nu e nevoie de
nicio animație — e o simplă trecere, iar trecerile pornesc de fiecare dată,
fără capcana de mai sus. */
.despre-cadru.jos-inapoi .a1,
.despre-cadru.jos-inapoi .a2,
.despre-cadru.jos-inapoi .a3{
transform:translateY(0) scale(1); opacity:0;
}
/* Oprirea oricărei animații. Nu se mai folosește pentru ascuns drumul, ci doar
pentru curățenia de la sfârșit: scoaterea clasei de mai sus n-are voie să
fie ea însăși o mișcare. */
.despre-cadru.fara-drum #desprePoza,
.despre-cadru.fara-drum #desprePoza2,
.despre-cadru.fara-drum .despre-urma{
transition:none !important; animation:none !important;
}
@media (prefers-reduced-motion: reduce){
#desprePoza, #desprePoza2, .despre-urma{ transition:none; animation:none !important; }
}
.despre-img::before{
content:""; position:absolute; top:20px; left:-20px; right:20px; bottom:-20px;
border:1px solid var(--accent); border-radius:12px; z-index:-1;
transform:rotate(1deg);
transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
/* La trecerea cu mouse-ul se îndreaptă și urcă puțin — atât cât să se simtă
că e un obiect, nu un dreptunghi tipărit pe pagină. */
.despre-img:hover{ transform:rotate(0deg) translateY(-4px); }
.despre-img:hover::before{ transform:rotate(1.6deg); }
@media (prefers-reduced-motion: reduce){
.despre-img, .despre-img::before{ transition:none; }
}
.despre-text h2{ font-size:38px; margin-bottom:22px; }
.despre-text p{ color:var(--ink-soft); margin-bottom:18px; font-size:15px; }
/* Formatarea scrisă din panou. Mărimile sunt în „em", adică față de scrisul
din jur — așa merg la fel și în titlu, și în paragrafe, și pe telefon, unde
o mărime fixă în pixeli ar sparge coloana. Treptele sunt mici dinadins: o
diferență de 22% se vede, dar nu rupe pagina în bucăți de mărimi diferite.
Sublinierea primește aer sub literă: lipită, taie codițele lui ț și ș. */
.despre-text .text-mare{ font-size:1.22em; }
.despre-text .text-mic{ font-size:.86em; }
.despre-text u{ text-underline-offset:.18em; text-decoration-thickness:.06em; }
/* Pe etichetă, treptele sunt mai mici: la 26px de scris de hand, 22% în plus
ar sări peste titlul de dedesubt și ar strica ierarhia dintre ele. */
.despre-text .eyebrow .text-mare{ font-size:1.14em; }
.despre-text .eyebrow .text-mic{ font-size:.9em; }
/* ===== PORTOFOLIU ===== */
.filters{ display:flex; justify-content:center; gap:14px; margin-bottom:50px; flex-wrap:wrap; }
.filter-btn{
padding:10px 26px; font-size:11px; letter-spacing:2px; text-transform:uppercase;
border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;
transition:all .3s ease;
}
.filter-btn:hover, .filter-btn.active{ background:var(--ink); color:var(--white); border-color:var(--ink); }
/* ===== GRILA PORTOFOLIULUI — COLOANE, NU CASETE =====
Înainte era o grilă de trei casete egale, fiecare cu „aspect-ratio:4/5" și
„object-fit:cover". Adică: orice fotografie era TĂIATĂ până încăpea în
dreptunghiul acela — un cadru orizontal pierdea marginile din stânga și
dreapta, unul vertical pierdea sus și jos. Se vedea și pe calculator, și
mai tare pe telefon, unde caseta se îngustează și mai mult.
Acum sunt coloane („columns"): fiecare poză își păstrează forma ei, iar
coloanele se umplu una sub alta, ca într-un album. Nimic nu se mai taie.
Prețul e ordinea: se citește pe coloane, de sus în jos, nu pe rânduri —
ceea ce la un portofoliu e firesc. */
/* ===== A TREIA AȘEZARE, ȘI CEA BUNĂ =====
Întâi au fost casete cu proporție fixă: pozele se tăiau.
Apoi coloane („columns"): nimic nu se mai tăia, dar browserul împarte
pozele în trei teancuri și apoi le pune unul lângă altul. Teancurile ies
inevitabil de înălțimi diferite, iar jos rămâne o margine zdrențuită — la o
probă cu cincisprezece poze, o jumătate de ecran de gol. Asta se și vedea.
Acum e o GRILĂ cu rânduri mărunte de 2 pixeli, iar fiecare poză ocupă atâtea
rânduri câtă înălțime are. Așezarea automată a grilei pune fiecare poză
nouă în primul loc liber de sus în jos — adică în coloana rămasă cea mai
scurtă. De aici „își găsesc singure locul": nu mai sunt trei teancuri, ci un
singur șir care se strecoară.
Câte rânduri ocupă fiecare poză se socotește în scripturi.js, din proporția
ei (lățime și înălțime, trimise de portofoliu-lista.php). Din proporție, nu
din măsurat după încărcare: așa așezarea e bună din prima clipă, înainte ca
vreo poză să fi sosit.
„row-gap" e ZERO dinadins: un spațiu între rânduri s-ar pune între fiecare
două rânduri de 2 pixeli, adică de sute de ori. Distanța dintre poze intră
în socoteala rândurilor, acolo unde se cuvine. */
.grid{
display:grid;
/* Numărul de coloane stă într-o variabilă, nu doar în „repeat(3, ...)".
Motivul e o greșeală prinsă la probe: scripturi.js citea numărul de
coloane din stilul calculat al grilei — dar o poză trimisă de el în
coloana a treia CREEAZĂ o a treia coloană, chiar dacă stilul cere două.
La micșorarea ferestrei, socoteala citea trei, punea în trei, și se
confirma singură la nesfârșit. Variabila n-are cum să fie murdărită de
ce facem noi. */
--grila-coloane:3;
grid-template-columns:repeat(var(--grila-coloane), 1fr);
column-gap:var(--grila-spatiu, 22px);
row-gap:0;
grid-auto-rows:2px;
/* „dense": fiecare poză e pusă în primul loc liber al COLOANEI ei, nu după
ultima așezată. Coloana o alege scripturi.js — cea rămasă cea mai scurtă.
Fără „dense", așezarea automată nu se mai întoarce în sus, iar o poză
trimisă în coloana întâi ar fi coborât sub tot ce fusese pus după ea. */
grid-auto-flow:row dense;
align-items:start;
}
.grid-item{
position:relative; overflow:hidden;
background:var(--bg-alt);
border-radius:8px;
display:block; width:100%; margin:0;
/* Poza nu e apăsabilă — clicul nu face nimic, deci nici cursorul nu promite ceva. */
cursor:default;
transform-origin:center center;
/* Crește tot cadrul, nu conținutul din el. Curba pornește prompt și se așază
domol. Durata: 0,63s — cu 15% mai domoală decât cele 0,55s de dinainte. */
transition:transform .63s cubic-bezier(.22,.8,.28,1), box-shadow .63s cubic-bezier(.22,.8,.28,1);
will-change:transform;
}
/* z-index ridică poza peste vecine cât e mărită, altfel ar fi acoperită de următoarele.
Umbra e în tonul cernelii paginii, nu negru pur — se așază firesc pe lavandă. */
.grid-item:hover{
transform:scale(1.40);
z-index:5;
box-shadow:0 18px 40px rgba(28,25,34,.22);
}
/* AICI A FOST O DECOLORARE, ȘI A FOST SCOASĂ.
Pozele stăteau cu „grayscale(35%)" și își recăpătau culoarea abia la
trecerea cu mouse-ul. Pe un ecran cu mouse arăta a efect; pe telefon, unde
„hover" nu există, culoarea nu se mai întorcea NICIODATĂ — adică tot
portofoliul rămânea, pentru jumătate dintre vizitatori, cu o treime mai
șters decât fotografiile adevărate. Iar portofoliul unui fotograf e tocmai
despre culoarea aceea.
Ce rămâne la hover: apropierea cadrului și eticheta. De culoarea pozei nu
se mai atinge nimic, pe niciun ecran. */
/* „height:auto", nu „100%", și fără „object-fit": poza își ține înălțimea ei,
adică proporția în care a fost făcută. Tăierea de dinainte venea de aici. */
.grid-item img{
display:block; width:100%; height:auto;
}
.grid-item .overlay{
position:absolute; inset:0; background:rgba(28,25,34,0.0);
display:flex; align-items:flex-end; padding:24px; opacity:0; transition:all .4s ease;
}
.grid-item:hover .overlay{ background:rgba(28,25,34,0.28); opacity:1; }
.grid-item .overlay span{ color:var(--white); font-size:11px; letter-spacing:2px; text-transform:uppercase; border-bottom:1px solid var(--white); padding-bottom:4px; }
.grid-item.hidden{ display:none; }
@media (prefers-reduced-motion: reduce){
.grid-item{ transition:none; }
.grid-item:hover{ transform:none; box-shadow:none; }
}
.portofoliu-gol{ grid-column:1 / -1; color:var(--ink-soft); font-size:14px; padding:20px 0; text-align:center; }
/* ===== PAGINILE PORTOFOLIULUI =====
Aceleași butoane ca la galeriile private, ca să nu învețe nimeni două
lucruri diferite pe același site. Fiecare categorie își ține minte pagina
ei: te muți de la „Toate" la o categorie și înapoi, și te găsești unde
erai. */
.paginare{
display:flex; justify-content:center; align-items:center; gap:7px;
flex-wrap:wrap; margin:34px auto 0;
}
.paginare button{
min-width:38px; height:38px; padding:0 11px;
background:transparent; border:1px solid var(--line); color:var(--ink-soft);
font-family:inherit; font-size:13px; font-variant-numeric:tabular-nums;
cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.paginare button:hover:not(:disabled):not(.activa){ border-color:var(--accent); color:var(--accent); }
.paginare button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.paginare button.activa{
background:var(--accent); border-color:var(--accent); color:var(--white); cursor:default;
}
.paginare button:disabled{ opacity:.3; cursor:default; }
.paginare .puncte{ color:var(--ink-soft); padding:0 3px; user-select:none; }
.paginare-info{
text-align:center; font-size:12.5px; color:var(--ink-soft);
margin:26px auto 0; letter-spacing:.4px;
}
/* Bara de sus stă între filtre și grilă, deci trebuie să fie mai discretă:
linie de despărțire, fără spațiu mare. */
.paginare-sus{
margin:-24px auto 30px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.paginare[hidden], .paginare-info[hidden]{ display:none; }
/* Pe ecrane mijlocii trei coloane înseamnă poze de vreo 240px — se vede, dar
nu se simte. Două sunt mai pe măsura unei fotografii.
Pe telefon, una singură, lată cât ecranul. */
@media (max-width:860px){
.grid{ --grila-coloane:2; }
}
@media (max-width:560px){
.grid{ --grila-coloane:1; }
}
/* ===== TRECERILE: ALTA ÎNTRE PAGINI, ALTA ÎNTRE CATEGORII =====
Sunt două lucruri diferite, și e bine să se simtă diferit:
— între PAGINI e aceeași categorie, doar altă felie din ea. Mișcarea e
discretă: grila veche se stinge, cea nouă urcă de jos, poză după poză;
— între CATEGORII se schimbă subiectul. Acolo pozele se ameste: fiecare
pleacă spre locul ei nou dintr-o altă parte și cu o rotire mică, ca un
pachet de cărți împrăștiat și strâns la loc.
Direcțiile nu sunt scrise în CSS, ci puse din JavaScript, în „--dx/--dy/
--rot": altfel toate pozele ar veni din același loc, iar amestecul ar
arăta a alunecare în bloc, nu a amestec. */
.grid{ transition:opacity .16s ease; }
.grid.se-stinge{ opacity:0; }
@keyframes intraPoza{
from{ opacity:0; transform:translateY(9px); }
to { opacity:1; transform:none; }
}
@keyframes amestecaPoza{
from{
opacity:0;
transform:translate(var(--dx,0px), var(--dy,14px)) rotate(var(--rot,0deg)) scale(.9);
}
60%{ opacity:1; }
to { opacity:1; transform:none; }
}
.grid-item.amesteca{
animation:amestecaPoza .62s cubic-bezier(.2,.72,.28,1) backwards;
}
/* „backwards", nu „both": „both" ar fi păstrat după animație și ultimul cadru
(„transform:none"), iar acela bate regula de hover — pozele n-ar mai fi
crescut la trecerea cu mouse-ul. Așa, cadrul de start se aplică doar cât
ține întârzierea, iar după aceea elementul e liber. */
.grid-item.intra{ animation:intraPoza .34s cubic-bezier(.22,.61,.36,1) backwards; }
@media (prefers-reduced-motion: reduce){
.grid{ transition:none; }
.grid.se-stinge{ opacity:1; }
.grid-item.intra, .grid-item.amesteca{ animation:none; }
}
/* ===== SERVICII ===== */
#servicii{ background:var(--bg-povesti); }
/* Numărul de pachete se stabilește din admin, deci aranjarea nu poate fi
fixată la trei coloane: „auto-fit" pune pe un rând câte încap, la cel puțin
250px fiecare. Cu unul sau două, rândul s-ar întinde urât pe toată lățimea,
de aceea sunt strânse la mijloc mai jos. */
.plans{
display:grid; gap:30px;
grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.plans[data-nr="1"]{ max-width:420px; margin-left:auto; margin-right:auto; }
.plans[data-nr="2"]{ max-width:790px; margin-left:auto; margin-right:auto; }
.plan{
background:var(--white); padding:50px 36px; text-align:center; border:1px solid var(--line);
display:flex; flex-direction:column; justify-content:center;
transition:transform .35s ease, box-shadow .35s ease;
}
.plan:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(34,31,42,0.08); }
.plan.featured{ border-color:var(--accent); position:relative; }
/* Eticheta e un element din pagină, nu un „content" din CSS: așa textul ei
poate fi schimbat din admin. */
.plan-eticheta{
position:absolute; top:-13px; left:50%; transform:translateX(-50%);
background:var(--accent); color:var(--white); font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
padding:6px 16px; white-space:nowrap;
}
.plan h3{ font-size:26px; margin-bottom:6px; }
.plan .price{ font-family:'Cormorant Garamond', serif; font-size:42px; color:var(--accent); margin:18px 0; }
.plan .price span{ font-size:13px; color:var(--ink-soft); font-family:'Montserrat',sans-serif; }
.plan ul{ list-style:none; margin:20px 0 0; text-align:left; }
.plan ul li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-soft); }
.plan ul li::before{ content:"— "; color:var(--accent); }
.plan .btn{ margin-top:auto; }
.plans-note{ text-align:center; margin-top:30px; font-size:13px; color:var(--ink-soft); font-style:italic; }
/* --- Comutator Foto / Video --- */
.serviciu-taburi{ display:flex; justify-content:center; gap:14px; margin-bottom:50px; flex-wrap:wrap; }
.serviciu-tab{
padding:12px 36px; font-size:11px; letter-spacing:2px; text-transform:uppercase;
border:1px solid var(--accent); background:transparent; color:var(--accent);
cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:400;
transition:background .3s ease, color .3s ease;
}
.serviciu-tab:hover{ background:var(--accent-soft); }
/* Foto e plin, Video doar conturat — se vede din prima care e disponibil acum. */
.serviciu-tab.activ{ background:var(--accent); color:var(--white); }
.panou-serviciu[hidden]{ display:none; }
/* --- Ofertă personalizată, sub cele trei variante --- */
.oferta-jos{ text-align:center; margin-top:40px; }
.btn-oferta{
display:inline-flex; flex-direction:column; align-items:center; gap:5px;
background:var(--accent); color:var(--white); border:1px solid var(--accent);
padding:16px 40px; cursor:pointer; text-decoration:none;
font-family:'Montserrat',sans-serif; transition:background .3s ease, color .3s ease;
}
.btn-oferta:hover{ background:transparent; color:var(--accent); }
.btn-oferta .oferta-titlu{ font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.btn-oferta .oferta-numar{ font-family:'Cormorant Garamond',serif; font-size:19px; letter-spacing:.5px; }
/* ===== WHATSAPP =====
Butonul principal păstrează auriul mărcii, nu verdele WhatsApp: verdele
ar sări din paletă și ar arăta a reclamă lipită peste site. Iconița e de
ajuns ca să se recunoască instant unde duce. */
.btn-wa{
display:inline-flex; align-items:center; justify-content:center; gap:11px;
background:var(--accent); color:var(--white); text-decoration:none;
padding:17px 38px; border:1px solid var(--accent); cursor:pointer;
transition:background .25s ease, color .25s ease;
}
.btn-wa:hover{ background:transparent; color:var(--accent); }
.btn-wa .oferta-titlu{ font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.wa-icon{ width:19px; height:19px; fill:currentColor; flex:none; }
.oferta-sau{ margin-top:16px; font-size:14px; color:var(--ink-soft); }
.oferta-tel{
color:var(--ink); text-decoration:none; font-family:'Cormorant Garamond',serif;
font-size:19px; letter-spacing:.5px; border-bottom:1px solid var(--line);
padding-bottom:1px; transition:border-color .2s ease, color .2s ease;
}
.oferta-tel:hover{ color:var(--accent); border-bottom-color:var(--accent); }
/* În Contact, pe fundal închis.
„inline", nu „inline-flex": rândul din jur își aliniază părțile pe linia de
scris, iar linia de scris a unei cutii flex e dată de PRIMUL ei element —
aici iconița, nu textul. Așa, rândul WhatsApp ieșea cu vreo trei pixeli mai
sus decât eticheta lui, singurul dintre cele patru. Ca text obișnuit,
linia de scris e chiar a literelor, iar iconița se așază după ea. */
.contact-wa, .contact-tel{
display:inline; color:#c4c0cb; text-decoration:none; font-size:15px;
transition:color .2s ease;
}
.contact-wa:hover, .contact-tel:hover{ color:var(--accent); }
/* Spațiul dintre iconiță și text era „gap"; fără flex, îl ține marginea.
Coborârea de 3px o așază în mijlocul literelor, nu pe linia lor de jos. */
.contact-wa .wa-icon{ width:17px; height:17px; vertical-align:-3px; margin-right:9px; }
.oferta-nota{ margin-top:14px; font-size:13px; color:var(--ink-soft); }
/* --- Video, în pregătire --- */
.video-curand{
background:var(--white); border:1px solid var(--line); padding:64px 40px; text-align:center;
max-width:620px; margin:0 auto;
}
.video-eticheta{
display:inline-block; background:var(--accent-soft); color:var(--accent);
font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:6px 16px; margin-bottom:20px;
}
.video-curand h3{ font-size:28px; margin-bottom:14px; }
.video-curand p{ color:var(--ink-soft); font-size:15px; margin-bottom:30px; }
/* Textul de la „În curând" e acum un cu paragrafe înăuntru (vezi
comentariul din index.html). Spațiul de 30px de mai sus era socotit ca
depărtare ÎNTRE text și butonul de dedesubt; pus pe fiecare paragraf, ar fi
rupt textul în bucăți depărtate. Așa, distanța rămâne o dată, la capăt. */
.video-curand #videoText{ margin-bottom:30px; }
.video-curand #videoText p{ margin-bottom:12px; }
.video-curand #videoText p:last-child{ margin-bottom:0; }
.video-form{ display:none; max-width:420px; margin:0 auto; }
.video-form.deschis{ display:block; }
.video-form label{ display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
.video-form-rand{ display:flex; gap:10px; flex-wrap:wrap; }
.video-form input[type=email]{
flex:1 1 220px; padding:14px 16px; border:1px solid var(--line); background:var(--white);
font-family:inherit; font-size:14px; color:var(--ink); border-radius:6px;
}
.video-form input[type=email]:focus{ outline:none; border-color:var(--accent); }
.video-form button{
background:var(--accent); color:var(--white); border:1px solid var(--accent);
padding:14px 26px; font-family:inherit; font-size:11px; letter-spacing:2px;
text-transform:uppercase; cursor:pointer; border-radius:6px; white-space:nowrap;
transition:background .3s ease, color .3s ease;
}
.video-form button:hover:not(:disabled){ background:transparent; color:var(--accent); }
.video-form button:disabled{ opacity:.5; cursor:default; }
.video-raspuns{ margin-top:16px; font-size:13.5px; color:var(--ink-soft); min-height:20px; }
.video-raspuns.eroare{ color:#b23b3b; }
.video-raspuns.reusit{ color:var(--ink); }
/* capcană pentru roboți — invizibilă pentru vizitatori */
.video-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* ===== TESTIMONIALE ===== */
/* ===== ÎNAINTE / DUPĂ EDITARE =====
Cele două poze stau una peste alta; cea de deasupra e tăiată din dreapta
cu clip-path, iar mânerul mută linia de tăiere. */
#inainte-dupa{ background:var(--bg-alt); }
.id-lista{ display:flex; flex-direction:column; gap:52px; max-width:900px; margin:0 auto; }
.id-pereche{ position:relative; }
.id-cadru{
position:relative; overflow:hidden; background:var(--ink);
aspect-ratio:3/2; user-select:none; touch-action:pan-y; cursor:ew-resize;
}
.id-cadru img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
display:block; pointer-events:none; -webkit-user-drag:none;
}
.id-cadru img.id-dupa{ z-index:1; }
.id-eticheta{
position:absolute; top:16px; z-index:3; font-size:10px; letter-spacing:2px;
text-transform:uppercase; color:var(--white); background:rgba(28,25,34,0.6);
padding:6px 12px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
pointer-events:none; transition:opacity .25s ease;
}
.id-eticheta.stanga{ left:16px; }
.id-eticheta.dreapta{ right:16px; }
.id-maner{
position:absolute; top:0; bottom:0; width:2px; background:var(--white);
z-index:2; pointer-events:none; transform:translateX(-1px);
box-shadow:0 0 12px rgba(0,0,0,0.35);
}
.id-maner::after{
content:""; position:absolute; top:50%; left:50%;
width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
background:var(--white); box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.id-sageti{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
z-index:3; color:var(--ink); font-size:13px; letter-spacing:2px; pointer-events:none;
}
.id-titlu{
margin-top:14px; font-family:'Cormorant Garamond', serif; font-style:italic;
font-size:18px; color:var(--ink-soft); text-align:center;
}
.id-cadru:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* ===== PĂRERILE, CA O BANDĂ =====
Curg de la dreapta la stânga, fără capăt, sub prețuri.
Cum se face bucla fără nicio sfârâială: lista se scrie de DOUĂ ori, una
după alta, iar pista se mută la stânga exact cu jumătate din lățimea ei.
În clipa în care a doua copie ajunge unde era prima, animația o ia de la
zero — ochiul nu are cum să prindă saltul, fiindcă imaginea e identică.
Viteza NU e o durată fixă: durata se calculează în JavaScript din lățimea
reală a pistei, ca banda să meargă la fel de repede fie că ai două păreri,
fie douăzeci. Cu o durată fixă, două păreri ar zbura, iar douăzeci s-ar
târî. Reglajul e o singură cifră — vezi PX_PE_SECUNDA în script. */
.banda-recenzii{
margin-top:64px; padding:30px 0;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
overflow:hidden;
/* Marginile se sting în fundal, ca părerile să nu apară și să dispară
tăiate brusc de muchia ecranului. */
-webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.banda-pista{
display:flex; align-items:center; gap:0;
width:max-content;
animation:bandaCurge var(--durata, 60s) linear infinite;
}
/* Oprire la citit: mouse deasupra, sau degetul pe ecran. */
.banda-recenzii:hover .banda-pista,
.banda-recenzii:focus-within .banda-pista{ animation-play-state:paused; }
@keyframes bandaCurge{
from{ transform:translateX(0); }
to { transform:translateX(-50%); }
}
/* Cine a cerut sistemului mai puțină mișcare primește părerile așezate,
nu o bandă care aleargă. */
@media (prefers-reduced-motion: reduce){
.banda-recenzii{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
.banda-pista{ animation:none; }
}
.recenzie-card{
flex:0 0 auto; width:min(420px, 78vw);
padding:0 34px; box-sizing:border-box; text-align:center;
border-right:1px solid var(--line);
}
.recenzie-card .stele{ color:var(--accent); letter-spacing:3px; margin-bottom:11px; font-size:13px; }
.recenzie-card p{
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px;
line-height:1.6; color:var(--ink); margin-bottom:14px;
/* Trei rânduri, atât: pe o bandă în mișcare nimeni nu citește un paragraf.
Părerile lungi se termină cu „…" — cine vrea tot textul îl are în pagina
de unde a venit. */
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden;
}
.recenzie-card .cine{
font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft);
}
.recenzie-card .cand{ display:block; margin-top:5px; letter-spacing:1px; color:var(--accent); font-size:10px; }
@media (max-width:640px){
.banda-recenzii{ margin-top:48px; padding:24px 0; }
.recenzie-card{ padding:0 22px; }
.recenzie-card p{ font-size:16.5px; }
}
/* ===== CUM DECURGE ===== */
#pasi{ background:var(--bg-alt); }
.pasi-lista{
list-style:none; max-width:760px; margin:0 auto; padding:0;
display:flex; flex-direction:column; gap:0;
}
.pas{
display:flex; gap:26px; align-items:flex-start;
padding:26px 0; border-bottom:1px solid var(--line);
}
.pas:last-child{ border-bottom:none; }
.pas-numar{
flex:none; width:38px; height:38px; border:1px solid var(--accent); border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:'Cormorant Garamond', serif; font-size:19px; color:var(--accent);
font-variant-numeric:tabular-nums;
}
.pas h3{
font-family:'Cormorant Garamond', serif; font-weight:500; font-size:21px;
margin-bottom:7px; color:var(--ink);
}
.pas p{ font-size:15px; line-height:1.8; color:var(--ink-soft); }
.pasi-nota{
max-width:620px; margin:34px auto 0; text-align:center;
font-size:14px; line-height:1.8; color:var(--ink-soft);
padding-top:26px; border-top:1px solid var(--line);
}
@media (max-width:640px){
.pas{ gap:18px; }
.id-lista{ gap:36px; }
}
/* ===== LUMINA ZILEI TALE =====
Stă în Contact, ca al doilea panou, la dreapta calendarului. Fundalul
secțiunii e închis, deci toate culorile de aici sunt pentru fundal închis. */
.lumina-bloc{ max-width:560px; margin:0 auto; width:100%; }
.lumina-loc{ display:flex; flex-direction:column; gap:7px; margin:26px 0 4px; }
.lumina-loc label{
font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#86818f;
}
.lumina-loc select{
background:transparent; border:none; border-bottom:1px solid #524d5c;
padding:9px 2px; font-family:'Montserrat',sans-serif; font-size:14px;
font-weight:300; color:var(--white); width:100%;
}
.lumina-loc select:focus{ outline:none; border-bottom-color:var(--accent); }
.lumina-loc select option{ color:#1a1820; }
/* Îndemnul afișat până când vizitatorul apasă o zi din calendar. */
.lumina-astept{
text-align:center; color:#86818f; font-size:14px; line-height:1.8;
padding:44px 20px; border:1px dashed #3a3543; margin-top:22px;
/* Crește cât e nevoie ca panoul „Lumina" să ajungă la fel de jos ca cel cu
calendarul, iar îndemnul rămâne pe mijloc. Spațiul gol de sub el era
oricum acolo; acum măcar e înăuntru, nu pe lângă. */
flex:1; display:flex; align-items:center; justify-content:center;
}
.lumina-rezultat{ margin-top:22px; }
.lumina-ziua{
text-align:center; font-family:'Cormorant Garamond', serif; font-size:21px;
color:var(--white); margin-bottom:16px;
}
.lumina-ore{ display:flex; flex-direction:column; gap:1px; background:#37323f; border:1px solid #37323f; }
.lumina-ora{
background:#221f2a; padding:13px 16px;
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.lumina-eticheta{
font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:#a09aae;
}
.lumina-valoare{
font-family:'Cormorant Garamond', serif; font-size:21px; line-height:1.1;
color:var(--white); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lumina-ora.principala{ background:#2b2533; }
.lumina-ora.principala .lumina-eticheta{ color:var(--accent); }
.lumina-ora.principala .lumina-valoare{ color:var(--accent); font-size:23px; }
.lumina-disponibil{
margin-top:22px; text-align:center; padding-top:20px; border-top:1px solid #37323f;
}
.lumina-disponibil p{ font-size:14.5px; color:#c4c0cb; line-height:1.75; }
.lumina-disponibil .liber strong{ color:var(--accent); font-weight:500; }
.lumina-nota{
font-size:12px; line-height:1.7; color:#86818f;
text-align:center; margin-top:18px;
}
.testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.testimonial{ text-align:center; }
.testimonial p{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:19px; color:var(--ink); margin-bottom:18px; }
.testimonial .stars{ color:var(--accent); letter-spacing:3px; margin-bottom:14px; }
.testimonial .name{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); }
/* ===== CONTACT ===== */
#contact{ background:var(--ink); color:var(--white); }
#contact .section-head p{ color:#c4c0cb; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact-info h3{ font-size:24px; margin-bottom:22px; color:var(--white); }
.contact-info p{ color:#c4c0cb; font-size:15px; margin-bottom:8px; }
/* „baseline", nu „flex-start": eticheta are 11px, valoarea 15px, iar aliniate
la marginea de sus ele ies cu textele decalate pe verticală — se vede ca o
scăpare, deși fiecare rând e la locul lui. Aliniate pe linia de scris, cele
două chiar stau pe același rând. */
.contact-line{ display:flex; gap:16px; margin-bottom:26px; align-items:baseline; }
.contact-line .label{ text-transform:uppercase; font-size:11px; letter-spacing:2px; color:var(--accent); min-width:100px; }
.social-row{ display:flex; gap:16px; margin-top:30px; }
.social-row a{
width:42px; height:42px; border:1px solid #524d5c; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:1px;
transition:all .3s ease;
}
.social-row a:hover{ background:var(--accent); border-color:var(--accent); }
.social-row a svg{ width:17px; height:17px; fill:currentColor; display:block; transition:transform .3s ease; }
.social-row a:hover svg{ transform:scale(1.12); }
/* ===== CELE DOUĂ PANOURI DIN CONTACT: DISPONIBILITATE + LUMINĂ ===== */
.panouri{
display:grid; grid-template-columns:1fr 1fr; gap:40px;
/* „stretch", nu „start": cele două panouri trebuie să ajungă la fel de jos.
Fără margini nu se vedea, dar de când au contur, „Lumina" se termina la
jumătatea calendarului și arăta a greșeală, nu a alegere. */
align-items:stretch; margin-bottom:64px;
}
/* ===== CELE DOUĂ UNELTE DIN CONTACT, ÎNCADRATE =====
Până acum stăteau direct pe fundalul întunecat al secțiunii, fără nicio
margine — și se citeau ca text al paginii, nu ca două lucruri cu care ai ce
face. Un calendar pe care poți apăsa merită să arate ca un obiect.
De ce așa și nu doar cu un chenar auriu: auriul e o culoare tare, iar pe o
suprafață mare și aproape goală un chenar de aur, cu aceeași culoare
înăuntru ca a paginii, plutește și începe să semene a diplomă înrămată.
Aici lucrul greu îl face fundalul — un ton mai deschis decât secțiunea,
atât cât să se vadă marginea — iar auriul rămâne un fir subțire sus, cât să
spună a cui e pagina. */
.calendar-bloc, .lumina-bloc{
position:relative;
background:#26222f;
border:1px solid rgba(169,143,107,.34);
border-radius:10px;
padding:32px 30px 28px;
box-shadow:0 20px 44px rgba(0,0,0,.28);
display:flex; flex-direction:column;
}
/* Firul auriu de sus. Se stinge spre capete ca să nu pară o linie trasă cu
rigla peste chenar, ci o lumină căzută pe muchie. */
.calendar-bloc::before, .lumina-bloc::before{
content:'';
position:absolute; left:28px; right:28px; top:-1px; height:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
border-radius:2px;
}
.panou-titlu{ text-align:center; margin-bottom:6px; }
.panou-titlu h3{ font-size:24px; color:var(--white); margin-bottom:8px; }
.panou-titlu p{ color:#c4c0cb; font-size:14px; line-height:1.7; }
/* ===== CALENDAR DISPONIBILITATE ===== */
.calendar-bloc{ max-width:560px; margin:0 auto; width:100%; }
.calendar-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:26px 0 16px; }
.calendar-nav .luna{ font-family:'Cormorant Garamond', serif; font-size:21px; color:var(--white); text-align:center; flex:1; }
.calendar-nav button{
background:transparent; border:1px solid #524d5c; color:#c4c0cb; width:34px; height:34px;
cursor:pointer; font-size:14px; font-family:inherit; transition:all .3s ease; flex:none;
}
.calendar-nav button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.calendar-nav button:disabled{ opacity:.25; cursor:default; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calendar-grid .cap{
font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#86818f;
text-align:center; padding-bottom:10px;
}
.calendar-grid .zi{
aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
font-size:14px; color:#e6e3ec; border:1px solid transparent; position:relative;
background:transparent; font-family:inherit; padding:0;
}
.calendar-grid .zi.gol{ border:none; }
.calendar-grid .zi.trecut{ color:#484450; }
.calendar-grid .zi.azi{ border-color:var(--accent); color:var(--accent); }
.calendar-grid .zi.ocupat{ color:#67626f; }
.calendar-grid .zi.ocupat::after{
content:""; position:absolute; left:26%; right:26%; top:50%;
border-top:1px solid #67626f; transform:rotate(-18deg);
}
/* Zilele din viitor se pot apăsa — ele aleg data pentru panoul de lumină. */
.calendar-grid button.zi{ cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.calendar-grid button.zi:hover{ background:rgba(255,255,255,0.06); border-color:#524d5c; }
.calendar-grid button.zi:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.calendar-grid .zi.aleasa{
background:var(--accent); border-color:var(--accent); color:#1a1820; font-weight:500;
}
.calendar-grid .zi.aleasa.ocupat{ color:#1a1820; }
.calendar-grid .zi.aleasa.ocupat::after{ border-top-color:rgba(26,24,32,0.75); }
.calendar-grid button.zi.aleasa:hover{ background:var(--accent); }
.calendar-legenda{
display:flex; gap:26px; justify-content:center; align-items:center; flex-wrap:wrap;
margin-top:22px; font-size:12px; color:#c4c0cb;
}
.calendar-legenda span{ display:flex; align-items:center; gap:9px; }
.calendar-legenda i{
width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center;
font-style:normal; font-size:12px; color:#e6e3ec; position:relative;
}
.calendar-legenda i.ocupat{ color:#67626f; }
.calendar-legenda i.ocupat::after{
content:""; position:absolute; left:10%; right:10%; top:50%;
border-top:1px solid #67626f; transform:rotate(-18deg);
}
.calendar-nota{ text-align:center; font-size:12px; color:#86818f; margin-top:14px; line-height:1.6; }
@media (max-width:900px){
.panouri{ grid-template-columns:1fr; gap:26px; }
/* Unul sub altul, nu mai are rost să fie la fel de înalte: nu se mai compară
cu nimic la stânga sau la dreapta, iar un panou întins degeaba ar fi doar
gol de derulat pe un ecran mic. */
.calendar-bloc, .lumina-bloc{ padding:26px 20px 22px; }
.lumina-astept{ flex:none; display:block; padding:34px 18px; }
}
@media (max-width:640px){
.calendar-grid .zi{ font-size:13px; }
}
form{ display:flex; flex-direction:column; gap:18px; }
form input, form select, form textarea{
background:transparent; border:none; border-bottom:1px solid #524d5c; color:var(--white);
padding:12px 2px; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:300;
}
form ::placeholder{ color:#86818f; }
form input:focus, form select:focus, form textarea:focus{ outline:none; border-color:var(--accent); }
form textarea{ resize:vertical; min-height:100px; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
form select option{ color:#1a1820; }
.form-msg{ font-size:13px; color:var(--accent); min-height:18px; }
/* Bifa de acord GDPR — pe formularul de contact și pe cel de la Video.
Căsuța își păstrează dimensiunea (flex:0 0 auto) ca textul lung de lângă
ea să nu o turtească. Când lipsește bifa, se colorează în roșu. */
.acord{ display:flex; gap:11px; align-items:flex-start; margin:2px 0 16px; text-align:left; }
.acord input[type=checkbox]{
flex:0 0 auto; width:17px; height:17px; margin-top:2px; accent-color:var(--accent); cursor:pointer;
}
/* „text-transform" și „letter-spacing" sunt puse explicit pe normal: în panoul
Video, regula .video-form label le-ar face majuscule spațiate, ceea ce e bine
pentru o etichetă de două cuvinte, dar ilizibil pentru o frază întreagă. */
.acord label{
font-size:12.5px; line-height:1.65; color:var(--ink-soft); font-weight:300; cursor:pointer;
text-transform:none; letter-spacing:normal; margin-bottom:0; display:block;
}
.acord a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.acord a:hover{ color:var(--ink); }
.acord.lipseste input[type=checkbox]{ outline:2px solid #b23b3b; outline-offset:2px; }
.acord.lipseste label{ color:#b23b3b; }
/* Secțiunea Contact are fundal închis, deci acolo textul bifei trebuie
deschis la culoare — altfel gri-ul implicit devine ilizibil. Panoul Video
e pe alb și păstrează varianta de mai sus. */
#contact .acord label{ color:#c4c0cb; }
#contact .acord a{ color:var(--accent); }
#contact .acord a:hover{ color:var(--white); }
#contact .acord.lipseste label{ color:#e88b8b; }
#contact .acord.lipseste input[type=checkbox]{ outline-color:#e88b8b; }
/* ===== FOOTER ===== */
footer{ background:#1a1820; color:#86818f; padding:40px 0; text-align:center; font-size:12px; letter-spacing:1px; }
.brand-logo-footer{ height:60px; width:auto; max-width:100%; margin:0 auto 14px; color:#fff; opacity:.85; }
/* ===== ABONARE NEWSLETTER (în subsol) ===== */
.nl{
border-bottom:1px solid rgba(255,255,255,0.09);
padding-bottom:30px; margin-bottom:32px;
/* 580px: exact cât să încapă pe un rând prenumele, emailul și butonul.
Sub atâta, rândul se rupe — de aceea e centrat mai jos, ca ruperea să
arate intenționată, nu ca un buton rătăcit la stânga. */
max-width:580px; margin-left:auto; margin-right:auto;
text-align:center; letter-spacing:normal; text-transform:none;
}
.nl h3{
font-family:'Cormorant Garamond', serif; font-weight:400; font-style:italic;
font-size:23px; color:var(--white); margin-bottom:8px; letter-spacing:.4px;
}
.nl > p{ font-size:13px; color:#9d98a8; line-height:1.75; margin-bottom:20px; }
.nl-randuri{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.nl-randuri input{
flex:1 1 180px; min-width:0; background:transparent; border:none;
border-bottom:1px solid #45414f; color:var(--white);
padding:11px 2px; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:300;
letter-spacing:normal; text-transform:none;
}
.nl-randuri input::placeholder{ color:#6d6878; }
.nl-randuri input:focus{ outline:none; border-bottom-color:var(--accent); }
/* Destul de lat cât să încapă „Prenume (opțional)" fără să fie tăiat, dar
vizibil mai îngust decât câmpul de email, care e cel important. */
.nl-randuri input#nlPrenume{ flex:0 1 175px; }
.nl-btn{
flex:0 0 auto; background:var(--accent); color:#1a1820; border:none;
padding:11px 24px; font-size:11px; letter-spacing:2px; text-transform:uppercase;
cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:500;
transition:opacity .2s ease;
}
.nl-btn:hover:not(:disabled){ opacity:.85; }
.nl-btn:disabled{ opacity:.45; cursor:default; }
.nl-acord{ display:flex; gap:10px; align-items:flex-start; text-align:left; }
.nl-acord input[type=checkbox]{
flex:0 0 auto; width:16px; height:16px; margin-top:2px; accent-color:var(--accent); cursor:pointer;
}
.nl-acord label{
font-size:11.5px; line-height:1.7; color:#8b8695; cursor:pointer;
letter-spacing:normal; text-transform:none;
}
.nl-acord a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.nl-acord a:hover{ color:var(--white); }
.nl-acord.lipseste label{ color:#e88b8b; }
.nl-acord.lipseste input[type=checkbox]{ outline:2px solid #e88b8b; outline-offset:2px; }
/* Fără min-height: rândul de răspuns ocupă loc doar când chiar are ce spune,
altfel ar lăsa un gol sub bifă tot timpul. „:empty" e exact pentru asta. */
.nl-raspuns{
font-size:13px; line-height:1.7; margin-top:14px;
letter-spacing:normal; text-transform:none;
}
.nl-raspuns:empty{ margin-top:0; }
.nl-raspuns.reusit{ color:var(--accent); }
.nl-raspuns.eroare{ color:#e88b8b; }
.nl .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.footer-legal{
display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
margin-bottom:14px; letter-spacing:.6px; text-transform:none;
}
.footer-legal a{ color:#c4c0cb; text-decoration:none; }
.footer-legal a:hover{ color:#fff; text-decoration:underline; }
.footer-legal span{ opacity:.4; }
/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
.despre-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
/* Înălțimea o dă acum CADRUL, nu poza: pozele dinăuntru se întind după el. */
.despre-cadru{ height:380px; }
.plans, .testimonials{ grid-template-columns:1fr; }
.grid{ columns:2; }
}
@media (max-width: 700px){
nav ul{
position:fixed; top:0; right:-100%; width:78%; height:100vh; background:var(--bg);
flex-direction:column; justify-content:center; align-items:flex-start; padding:0 40px;
transition:right .4s ease; box-shadow:-10px 0 30px rgba(0,0,0,0.08);
}
nav ul.open{ right:0; }
nav a{ color:var(--ink) !important; font-size:15px; }
/* ===== Meniul pe telefon =====
Înainte totul era lipit de stânga, iar „Acasă" avea căsuța trasă într-un
jgheab, ca să-i iasă textul la aceeași verticală cu restul — un reglaj
potrivit din ochi, care se vedea strâmb.
Acum coloana are o singură măsură: cele două butoane, „Acasă" sus și
„Galerii private" jos, se întind pe toată lățimea ei, deci marginile lor
coincid de la sine. Ce e între ele stă centrat între aceleași margini.
Nimic nu mai depinde de un număr ghicit. */
nav ul{ align-items:stretch; gap:0; }
nav ul > li{ width:100%; }
nav ul li a{ display:flex; align-items:center; justify-content:center; }
.btn-nav{ width:100%; }
/* În coloană, grupul din mijloc e doar o listă cu spațiu în jur — fără
linii, ca și pe ecranul mare. */
.nav-mijloc{
flex-direction:column; align-items:stretch;
gap:26px; padding:26px 0; margin:0;
}
/* În panoul de pe telefon, restul meniului urcă la 15px; scrisul caligrafic
trebuie să urce odată cu el, și ceva mai mult — literele lui mici sunt
mai scunde decât ale unui font obișnuit. */
nav .nav-mijloc a{ font-size:27px; padding-bottom:4px; }
/* Panoul meniului e deschis la culoare, indiferent dacă pagina e derulată
sau nu. Chenarul alb al butonului „Galerii private" se pierdea aici
complet — abia se ghicea. */
/* Panoul e deschis la culoare, deci butonul din el trebuie să fie închis —
și chenarul, și textul. Textul alb moștenit din bară se pierdea complet
aici; se ghicea doar chenarul. */
.btn-nav{ border-color:var(--line); color:var(--ink); }
.nav-toggle{ display:flex; z-index:1100; }
/* Pe telefon logo-ul stă lângă butonul de meniu. Pe două rânduri e îngust
(raport 2,5:1), deci încape lejer chiar și înalt. */
header .logo-mark{ --marca-inaltime:52px; }
header.scrolled .logo-mark{ --marca-inaltime:44px; }
.grid{ columns:2; }
section{ padding:80px 0; }
.section-head h2{ font-size:30px; }
.hero-inner p.tagline{ font-size:17px; }
}
/* Telefoanele foarte înguste (320px): lățimea utilă e de 272px, iar butonul
de meniu are nevoie de 26px plus aer. */
@media (max-width: 360px){
header .logo-mark{ --marca-inaltime:46px; }
header.scrolled .logo-mark{ --marca-inaltime:40px; }
}
/* ============================================================================
CAPUL PAGINILOR SEPARATE (Portofoliu, Servicii, Contact)
============================================================================
Paginile astea n-au hero cu fotografie pe tot ecranul, ca pagina de start —
acolo hero-ul e primirea; aici omul a apăsat deja pe un nume și știe unde a
ajuns. Are nevoie doar de o confirmare scurtă și de conținut.
„h1" e ascuns vizual pe pagina de start (îi ține locul logoul), dar aici el e
chiar titlul paginii: e primul lucru pe care îl citește Google și singurul
rând care spune despre ce e vorba.
Distanța de sus ține cont de antetul lipit: fără ea, titlul ar intra sub el. */
.pagina-cap{
padding:calc(96px + 56px) 0 34px;
border-bottom:1px solid rgba(34,31,42,.08);
}
.pagina-cap h1{
font-family:var(--font-titlu, 'Cormorant Garamond', serif);
font-weight:400; font-size:clamp(34px,5vw,52px); line-height:1.08;
letter-spacing:-.01em; margin:0 0 12px; text-wrap:balance;
}
.pagina-cap p{
color:var(--ink-soft); font-size:16px; line-height:1.7; max-width:56ch; margin:0;
}
@media (max-width:820px){
.pagina-cap{ padding:calc(72px + 40px) 0 26px; }
}
/* Rândul de linkuri către pagini, din subsol. Aceleași reguli ca rândul legal de
sub el — sunt două liste de linkuri mici, una lângă alta; dacă ar arăta
diferit, ochiul ar căuta o deosebire care nu există. */
.subsol-pagini{
display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
margin:22px 0 4px; font-size:13px; letter-spacing:.02em;
}
.subsol-pagini a{ color:#e6e3ec; text-decoration:none; border-bottom:1px solid transparent; }
.subsol-pagini a:hover{ border-bottom-color:var(--accent); }
.subsol-pagini span{ color:rgba(230,227,236,.35); }
/* Capul paginii și capul secțiunii, unul sub altul.
Acasă, supratitlul („Portofoliu", „Servicii") e util: el numește secțiunea în
curgerea paginii lungi. Pe pagina proprie, chiar deasupra lui stă deja
TITLUL paginii, cu același cuvânt — același cuvânt de două ori, la doi
centimetri distanță, arată a greșeală, nu a intenție. Aici se ascunde.
Nu se șterge din fișier: același fișier nu se folosește și acasă, dar dacă
într-o zi se mută, supratitlul e la locul lui, doar nearătat. */
.pagina-cap + section .section-head .eyebrow{ display:none; }
/* Și secțiunea începe mai sus: cei 120px de dedesubt erau socotiți pentru o
secțiune care vine după alta, nu pentru una care vine imediat după capul
paginii. */
.pagina-cap + section{ padding-top:56px; }
@media (max-width:820px){
.pagina-cap + section{ padding-top:40px; }
}