/* ========================================================================== Imobila. Stratul de design v3 (2026-08-24) Se incarca DUPA style.css si il rescrie. Nu inlocuieste nimic: scoti linkul din si site-ul revine exact cum era. Identitatea ramane "hartie si cerneala", dar cu litere adevarate, lumina calda, adancime discreta si miscare. Doua familii, ca pana acum: Fraunces -> titluri si cifrele mari Instrument Sans -> interfata si textul curent ========================================================================== */ /* ---------- 1. literele ---------- */ @font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/fraunces-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Fraunces"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/fraunces-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/instrument-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/instrument-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------- 2. valorile de baza ---------- */ :root{ /* hartia: mai calda si cu un strat in plus, pentru cartonasele care stau deasupra */ --paper:#FBF9F3; --paper-2:#F2EFE5; --paper-3:#E8E3D5; --paper-card:#FFFDF7; /* cerneala */ --ink:#14120D; --ink-2:#4A463B; --ink-3:#6E6857; /* inchis cat sa treaca pragul de contrast si pe banda colorata */ /* liniile, in trei greutati in loc de una */ --line:#E7E1D1; --line-2:#D3CBB5; --line-3:#B9AF96; /* verdele, cu o treapta deschisa pentru bare si stari */ --accent:#1B5340; --accent-2:#0E3427; --accent-3:#4A8770; --accent-soft:#E8F0EB; --accent-line:#C4D8CD; --warn:#8A5312; --warn-soft:#F8F0E3; /* umbre calde, nu gri: cad in tonul hartiei */ --sh-1:0 1px 2px rgba(58,46,22,.045), 0 2px 6px rgba(58,46,22,.03); --sh-2:0 2px 4px rgba(58,46,22,.05), 0 14px 30px -10px rgba(58,46,22,.11); --sh-3:0 3px 8px rgba(58,46,22,.05), 0 30px 64px -20px rgba(58,46,22,.18); /* un singur limbaj de colturi: comenzile sunt dreptunghiuri moi, etichetele sunt pastile */ --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:20px; --r-pill:999px; /* curbe proprii, nu cuvintele din CSS */ --e-out:cubic-bezier(.16,1,.3,1); --e-snap:cubic-bezier(.22,1,.36,1); --e-io:cubic-bezier(.65,0,.35,1); --maxw:1140px; --gut:clamp(20px,4.2vw,44px); --serif:"Fraunces",Georgia,"Iowan Old Style","Times New Roman",serif; --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* ---------- 3. fundalul si aerul din pagina ---------- */ body{ font-size:17px; line-height:1.62; letter-spacing:-.003em; text-rendering:optimizeLegibility; background: radial-gradient(115% 52% at 50% -8%, rgba(27,83,64,.055) 0%, rgba(27,83,64,0) 62%), radial-gradient(85% 44% at 104% -4%, rgba(150,112,52,.055) 0%, rgba(150,112,52,0) 60%), var(--paper); background-repeat:no-repeat; } /* granulatie de hartie: se simte, nu se vede */ body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* pagina se deruleaza doar pe verticala. "clip" si nu "hidden", pentru ca "hidden" face din pagina un container de derulare si strica antetul lipit sus. */ html{overflow-x:clip} body{overflow-x:clip} .wrap{padding:0 var(--gut)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} ::selection{background:var(--accent-soft);color:var(--accent-2)} /* ---------- 4. tipografia ---------- */ h1,h2{ font-family:var(--serif); font-weight:500; text-wrap:balance; } h1{ font-size:clamp(38px,5.3vw,63px); line-height:1.015; letter-spacing:-.026em; font-variation-settings:"opsz" 144,"wght" 500; } h2{ font-size:clamp(28px,3.3vw,42px); line-height:1.07; letter-spacing:-.021em; font-variation-settings:"opsz" 96,"wght" 500; } h3{ font-family:var(--sans); font-size:17.5px; font-weight:600; letter-spacing:-.012em; line-height:1.34; } h4{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); } .lead{ font-size:clamp(18px,1.65vw,20.5px); line-height:1.54; letter-spacing:-.008em; color:var(--ink-2); max-width:58ch; text-wrap:pretty; } .body{color:var(--ink-2);max-width:66ch;text-wrap:pretty} .small{font-size:14px;color:var(--ink-3);letter-spacing:0} .num,.fig .v,.big,.tbl .p,.dtab td.v,.brk-row dd,.price .v,.step .n,.item .idx,.tag .n,.chips a b{ font-family:var(--serif); font-variant-numeric:lining-nums; font-variation-settings:"opsz" 48,"wght" 500; } strong,b{font-weight:600;color:var(--ink)} /* ---------- 5. antetul ---------- */ .head-bar{ background:rgba(251,249,243,.74); -webkit-backdrop-filter:blur(14px) saturate(165%); backdrop-filter:blur(14px) saturate(165%); border-bottom:1px solid transparent; transition:background .4s var(--e-snap),border-color .4s var(--e-snap),box-shadow .4s var(--e-snap); } .head-bar.is-stuck{ background:rgba(251,249,243,.88); border-bottom-color:var(--line); box-shadow:0 12px 28px -26px rgba(58,46,22,.5); } .navbar{max-width:var(--maxw);padding:0 var(--gut);height:72px;gap:16px} .brand{ font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.035em; font-variation-settings:"opsz" 60,"wght" 600; } .brand i{color:var(--accent)} .menu{gap:2px} .menu a{ position:relative; font-size:15px; font-weight:500; letter-spacing:-.008em; color:var(--ink-2); padding:9px 13px; border-radius:var(--r-xs); transition:color .28s var(--e-snap),background .28s var(--e-snap); } .menu a:hover{color:var(--ink);background:transparent} .menu a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:none} @media (min-width:901px){ /* linia care creste sub legatura, in loc de umbra fixa */ .menu a:not(.btn)::after{ content:""; position:absolute; left:13px;right:13px;bottom:2px; height:1.5px; background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:right center; transition:transform .42s var(--e-out); } .menu a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left center} .menu a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)} } .menu .btn{margin-left:14px;padding:10px 19px} .burger{ border-radius:var(--r-sm); border-color:var(--line-2); background:var(--paper-card); transition:border-color .25s var(--e-snap),background .25s var(--e-snap); } .burger:hover{border-color:var(--ink-3)} /* ---------- 6. butoane si legaturi ---------- */ .btn{ font-size:15px; font-weight:600; letter-spacing:-.008em; padding:13px 22px; border-radius:var(--r-sm); will-change:transform; transition:transform .34s var(--e-snap),box-shadow .34s var(--e-snap), background .26s var(--e-snap),border-color .26s var(--e-snap),color .26s var(--e-snap); } .btn-solid{background:var(--ink);color:#FBF9F3;border-color:var(--ink);box-shadow:var(--sh-1)} .btn-solid:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-2px);box-shadow:var(--sh-2)} .menu a.btn-solid{box-shadow:var(--sh-1)} .menu a.btn-solid:hover{box-shadow:var(--sh-2)} .btn-line{background:var(--paper-card);border-color:var(--line-2);color:var(--ink);box-shadow:var(--sh-1)} .btn-line:hover{background:var(--paper-card);border-color:var(--ink-3);transform:translateY(-2px);box-shadow:var(--sh-2)} .btn:active{transform:translateY(0) scale(.985);transition-duration:.09s} .actions{gap:14px} .tlink{ font-size:15px; font-weight:600; letter-spacing:-.008em; border-bottom-color:var(--accent-line); padding-bottom:3px; transition:border-color .3s var(--e-snap),color .3s var(--e-snap); } .tlink:hover{color:var(--accent-2);border-color:var(--accent)} .tlink .ar{transition:transform .4s var(--e-out)} .tlink:hover .ar{transform:translateX(5px)} /* ---------- 7. ritmul sectiunilor ---------- */ .sec{padding:clamp(62px,7.6vw,102px) 0} .band{padding:clamp(62px,7.6vw,102px) 0} .sec-grid{grid-template-columns:minmax(150px,196px) 1fr;gap:clamp(30px,4.4vw,60px)} .tag{ position:relative; padding-top:16px; font-size:11.5px; letter-spacing:.155em; color:var(--ink-3); } .tag::before{ content:""; position:absolute; top:0;left:0; width:26px;height:2px; background:var(--accent); border-radius:2px; } .tag .n{ color:var(--accent); margin-right:9px; font-size:13px; letter-spacing:0; font-variation-settings:"opsz" 36,"wght" 600; } h2+.lead,h2+.body{margin-top:16px} /* ---------- 8. deschiderea si fisa de scor ---------- */ .hero{position:relative;padding:clamp(56px,7vw,92px) 0 clamp(52px,6vw,78px);isolation:isolate} .hero-grid{grid-template-columns:1fr .88fr;gap:clamp(40px,5vw,72px)} .hero h1{margin-bottom:22px;max-width:15ch} .hero .lead{max-width:46ch} .hero .actions{margin-top:32px} .kicker{ font-size:11.5px; letter-spacing:.17em; color:var(--ink-3); margin-bottom:22px; padding-left:34px; position:relative; } .kicker::before{ content:""; position:absolute; left:0;top:.62em; width:24px;height:1.5px; background:var(--accent); } .note{margin-top:18px;font-size:14px;color:var(--ink-3)} .page-top{padding:clamp(48px,5.6vw,72px) 0 clamp(34px,4vw,50px)} .page-top h1{max-width:18ch;margin-bottom:20px} /* cifrele din deschidere */ .figs{margin-top:clamp(34px,4vw,48px);border-top:1px solid var(--line-2)} .fig{padding:20px 34px 0 0;margin-right:34px;border-right:1px solid var(--line)} .fig .v{ font-size:clamp(32px,3.2vw,38px); line-height:1; letter-spacing:.004em; font-variation-settings:"opsz" 72,"wght" 500; } .fig .k{font-size:13px;color:var(--ink-3);margin-top:8px;letter-spacing:-.002em} /* lumina din spatele fisei. ATENTIE: tine-o in interiorul paginii. Cu "right" negativ pagina se putea trage stanga-dreapta, pentru ca un element absolut care iese in dreapta largeste zona de derulare chiar daca e doar o umbra colorata. */ .hero::before{ content:""; position:absolute; z-index:-1; right:0;top:6%; width:60%;height:78%; background:radial-gradient(52% 50% at 50% 50%, rgba(27,83,64,.10) 0%, rgba(27,83,64,0) 72%); pointer-events:none; } .sheet{ background:var(--paper-card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 30px 26px; box-shadow:var(--sh-3); } .sheet-head{padding-bottom:20px} .sheet-head h3{font-size:17px} .sheet-head p{font-size:13.5px;color:var(--ink-3);margin-top:4px} .badge{ font-size:12px; font-weight:600; letter-spacing:.005em; color:var(--accent-2); background:var(--accent-soft); border-color:var(--accent-line); padding:6px 13px; border-radius:var(--r-pill); } .sheet-score{gap:26px;padding:26px 0} .big{ font-size:clamp(62px,6.6vw,78px); line-height:.86; /* putin aer pozitiv: "4" din Fraunces are o diagonala care se strecoara sub cifra dinainte, iar la marimea asta se atingea de "8". */ letter-spacing:.02em; /* si nu la marimea optica maxima: punctajul e o cifra de citit, nu un titlu. */ font-variation-settings:"opsz" 60,"wght" 600; } .big .max{font-size:19px;color:var(--ink-3);letter-spacing:-.01em;font-variation-settings:"opsz" 36,"wght" 400} .sheet-score .verdict{font-size:15px;color:var(--ink-2);line-height:1.5} .brk{padding-top:22px;gap:17px} .brk-row dt{font-size:14px;color:var(--ink-2)} .brk-row dd{font-size:15px;letter-spacing:.006em;font-variation-settings:"opsz" 36,"wght" 500} .brk-row dd span{color:var(--ink-3);font-size:12.5px} .bar{height:6px;border-radius:var(--r-pill);background:var(--paper-3)} .bar i{ background:linear-gradient(90deg,var(--accent) 0%,var(--accent-3) 100%); border-radius:var(--r-pill); transition:width 1.15s var(--e-out); } /* ---------- 9. liste, pasi, puncte ---------- */ .list,.list.two{border-top-color:var(--line-2)} .item{padding:25px 0} .item .idx{font-size:13px;color:var(--ink-3);padding-top:5px;transition:color .3s var(--e-snap);font-variation-settings:"opsz" 30,"wght" 500} .item p{color:var(--ink-2);font-size:15px;margin-top:6px;text-wrap:pretty} .item.link{position:relative;transition:background .35s var(--e-snap)} .item.link:hover{background:linear-gradient(90deg,rgba(27,83,64,.045) 0%,rgba(27,83,64,0) 72%)} .item.link:hover .idx{color:var(--accent)} .item.link::after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--e-out); } .item.link:hover::after{transform:scaleX(1)} .item.link h3::after{transition:opacity .3s var(--e-snap),transform .4s var(--e-out);display:inline-block} .item.link:hover h3::after{transform:translateX(3px)} .item.w .pt{font-size:14.5px;color:var(--accent);letter-spacing:-.01em;font-variation-settings:"opsz" 30,"wght" 500} .steps{border-top-color:var(--line-2)} .step{padding:26px 30px 28px 0} .step+.step{padding-left:30px} .step .n{ font-size:12.5px; color:var(--accent); margin-bottom:14px; letter-spacing:.02em; font-variation-settings:"opsz" 30,"wght" 600; } .step p{color:var(--ink-2);font-size:15px;margin-top:7px;text-wrap:pretty} .pts li{font-size:15px;padding:12px 0} .pts li::before{font-variation-settings:"opsz" 36,"wght" 600} /* ---------- 10. tabelul de preturi ---------- */ .tbl{border-top-color:var(--line-2)} .tbl a,.tbl div{padding:14px 0;font-size:16px;position:relative} .tbl a{transition:color .28s var(--e-snap)} .tbl a>span:first-child{display:inline-block;transition:transform .4s var(--e-out)} .tbl a:hover>span:first-child{transform:translateX(4px)} .tbl .p{color:var(--ink-2);font-size:15.5px;letter-spacing:.004em;font-variation-settings:"opsz" 36,"wght" 500} .tbl a::after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--e-out); } .tbl a:hover::after{transform:scaleX(1)} /* ---------- 11. textul-exemplu ---------- */ .doc{border-left:2px solid var(--accent);padding-left:28px} .doc .from{font-size:11.5px;letter-spacing:.15em;color:var(--ink-3);margin-bottom:18px} .doc h4{color:var(--accent);letter-spacing:.13em} .doc p{color:var(--ink-2);font-size:15.5px;text-wrap:pretty} /* ---------- 12. intrebarile ---------- */ .faq{border-top-color:var(--line-2)} .faq summary{ font-family:var(--serif); font-size:20px; font-weight:500; line-height:1.32; letter-spacing:-.014em; padding:22px 48px 22px 0; color:var(--ink); font-variation-settings:"opsz" 48,"wght" 500; transition:color .28s var(--e-snap); } .faq summary:hover{color:var(--accent-2)} .faq summary::after{ content:"+"; display:grid; place-items:center; right:0;top:19px; width:27px;height:27px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--paper-card); color:var(--accent); font-family:var(--sans); font-size:16px; line-height:1; transition:transform .42s var(--e-snap),background .28s var(--e-snap), border-color .28s var(--e-snap),color .28s var(--e-snap); } .faq summary:hover::after{border-color:var(--accent-line)} .faq details[open] summary::after{ transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--paper-card); } .faq p{font-size:15.5px;padding-bottom:22px;text-wrap:pretty} .faq details[open] p{animation:g-faq .45s var(--e-out) both} @keyframes g-faq{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} /* ---------- 13. magazine, benzi, pret, etichete ---------- */ .stores{gap:14px} .store{ padding:12px 20px; border-radius:var(--r-sm); border-color:var(--line-2); background:var(--paper-card); box-shadow:var(--sh-1); transition:transform .34s var(--e-snap),box-shadow .34s var(--e-snap),border-color .26s var(--e-snap); } .store:hover{background:var(--paper-card);border-color:var(--ink-3);transform:translateY(-2px);box-shadow:var(--sh-2)} .store small{font-size:11px;color:var(--ink-3);letter-spacing:.01em} .store b{font-size:15px;font-weight:600;letter-spacing:-.012em} .band{ background:var(--paper-2); border-top:1px solid var(--line-2); border-bottom:0; } /* marginea de jos o da sectiunea urmatoare, ca sa nu iasa doua linii lipite */ .band+.sec,.band+.end{border-top:1px solid var(--line-2)} .price{ border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--paper-card); padding:32px; box-shadow:var(--sh-2); } .price .v{font-size:clamp(40px,4.4vw,50px);letter-spacing:.008em;font-variation-settings:"opsz" 72,"wght" 500} .price .v span{font-family:var(--sans);font-size:14.5px;color:var(--ink-3);letter-spacing:0;font-variation-settings:normal} .price p{color:var(--ink-2);font-size:15px} .tags{gap:9px} .tags span{ font-size:13.5px; color:var(--ink-2); border-color:var(--line-2); background:var(--paper-card); padding:7px 14px; border-radius:var(--r-pill); } /* ---------- 14. finalul si subsolul ---------- */ .end{padding:clamp(66px,7.6vw,98px) 0 clamp(72px,8vw,104px);border-top-color:var(--line-2)} .end-grid{gap:24px 56px} .end h2{max-width:18ch;margin-bottom:16px} .end p{color:var(--ink-2);max-width:52ch;text-wrap:pretty} .foot{background:var(--paper-2);border-top-color:var(--line-2);padding:clamp(48px,5vw,64px) 0 32px} .foot-grid{gap:40px} .foot .brand{font-size:23px;margin-bottom:14px} .foot .about{color:var(--ink-3);font-size:14px;max-width:34ch;text-wrap:pretty} .foot h5{font-size:11.5px;letter-spacing:.15em;color:var(--ink-3);margin-bottom:14px} .foot a{ color:var(--ink-2); font-size:14.5px; margin-bottom:10px; width:fit-content; transition:color .26s var(--e-snap),transform .34s var(--e-out); } .foot a:hover{color:var(--accent);transform:translateX(2px)} .foot .pro{font-size:12.5px;color:var(--ink-3)} .foot-end{ max-width:var(--maxw); padding:20px var(--gut) 0; margin-top:40px; border-top-color:var(--line-2); font-size:13px; color:var(--ink-3); } .foot-legal a{font-size:13px;color:var(--ink-3);transform:none} .foot-legal a:hover{color:var(--accent);transform:none} .foot-note{max-width:var(--maxw);padding:0 var(--gut);font-size:12.5px;color:var(--ink-3)} /* ---------- 15. paginile de oras ---------- */ .crumbs{font-size:13px;color:var(--ink-3);margin-bottom:18px} .crumbs a{transition:color .26s var(--e-snap)} .crumbs a:hover{color:var(--accent)} .crumbs i{color:var(--line-3)} .dtab{border-top-color:var(--line-2);font-size:15.5px} .dtab thead th{font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);font-weight:600;padding-bottom:14px} .dtab td{padding:15px 0 15px 18px;color:var(--ink-2)} .dtab tbody tr{transition:background .26s var(--e-snap)} .dtab tbody tr:hover{background:rgba(27,83,64,.032)} .dtab td.v{color:var(--ink);letter-spacing:.004em;font-variation-settings:"opsz" 36,"wght" 500} .dtab caption{font-size:13px;color:var(--ink-3);padding-top:16px} .longread p{color:var(--ink-2);margin-top:16px;text-wrap:pretty} .longread h3{margin:36px 0 6px;font-size:19px;letter-spacing:-.014em} .chips{gap:9px} .chips a{ font-size:14px; color:var(--ink-2); border-color:var(--line-2); border-radius:var(--r-pill); padding:8px 15px; background:var(--paper-card); transition:border-color .26s var(--e-snap),color .26s var(--e-snap), transform .34s var(--e-snap),box-shadow .34s var(--e-snap); } .chips a:hover{border-color:var(--ink-3);color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-1)} .chips a b{color:var(--ink-3);letter-spacing:-.01em;font-variation-settings:"opsz" 30,"wght" 500} .idx section{padding:24px 0;border-bottom-color:var(--line)} .idx h3{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.15em; color:var(--ink-3); margin-bottom:16px; } /* ---------- 16. paginile legale ---------- */ .legal-grid{grid-template-columns:246px 1fr;gap:0 60px} .legal-nav{top:100px;border-left-color:var(--line-2);padding-left:20px} .legal-nav a{font-size:13.5px;color:var(--ink-3);margin-bottom:12px;transition:color .26s var(--e-snap)} .legal-nav a:hover{color:var(--accent)} .legal-body h2{font-size:clamp(22px,2.1vw,27px);line-height:1.16;padding-top:38px;border-top-color:var(--line-2);margin-bottom:16px} .legal-body p,.legal-body li{font-size:16px;color:var(--ink-2);text-wrap:pretty} .legal-body a{color:var(--accent);border-bottom-color:var(--accent-line);transition:border-color .26s var(--e-snap)} .legal-body a:hover{border-color:var(--accent)} .legal-body li::before{background:var(--line-3)} .idt{border-top-color:var(--line-2)} .idt dt{font-size:14px;color:var(--ink-3)} .idt dd{font-size:15px;color:var(--ink)} .idt dd a{color:var(--accent);border-bottom-color:var(--accent-line)} /* ---------- 17. formularul ---------- */ .form{border-top-color:var(--line-2)} .field label{font-size:13px;letter-spacing:.04em;color:var(--ink-3);margin-bottom:9px} .field input,.field select,.field textarea{ font-size:16px; background:var(--paper-card); border-color:var(--line-2); border-radius:var(--r-sm); padding:12px 14px; box-shadow:var(--sh-1); transition:border-color .26s var(--e-snap),box-shadow .26s var(--e-snap); } .field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(27,83,64,.15); } .field .hint{font-size:13px;color:var(--ink-3)} .check{font-size:15px;color:var(--ink-2)} .form-err{border-radius:var(--r-sm);background:var(--warn-soft);color:var(--warn);font-size:14px} .msg{border-color:var(--line-2);background:var(--paper-card);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:20px 22px 22px} .msg-head{font-size:12.5px;letter-spacing:.04em;color:var(--ink-3);border-bottom-color:var(--line-2)} .msg pre{font-size:14px;color:var(--ink-2)} /* ---------- 18. fereastra de consimtamant ---------- */ .cc-card{ background:var(--paper-card); border-color:var(--line-2); border-radius:var(--r-md); padding:26px; box-shadow:var(--sh-3); } .cc-h{ font-family:var(--serif); font-size:24px; font-weight:500; line-height:1.12; letter-spacing:-.02em; font-variation-settings:"opsz" 60,"wght" 500; } .cc-p{font-size:15px;color:var(--ink-2)} .cc-rows{border-top-color:var(--line-2)} .cc-row-n{font-size:15px;font-weight:600;letter-spacing:-.01em} .cc-row-s{font-size:11.5px;letter-spacing:.13em;color:var(--ink-3)} .cc-row-d{font-size:14px;color:var(--ink-2)} .cc-btn{ font-size:14.5px; font-weight:600; letter-spacing:-.008em; padding:12px 19px; border-radius:var(--r-sm); transition:transform .3s var(--e-snap),box-shadow .3s var(--e-snap), background .24s var(--e-snap),border-color .24s var(--e-snap),color .24s var(--e-snap); } .cc-btn:active{transform:scale(.985)} .cc-solid{background:var(--ink);color:var(--paper-card);border-color:var(--ink);box-shadow:var(--sh-1)} .cc-solid:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:var(--sh-2)} .cc-line{border-color:var(--line-2);background:var(--paper-card)} .cc-line:hover{border-color:var(--ink-3);background:var(--paper-card)} .cc-eq{border-color:var(--ink-3);background:var(--paper-card)} .cc-eq:hover{background:var(--ink);color:var(--paper-card);border-color:var(--ink)} .cc-plain{color:var(--ink-3);text-decoration-color:var(--line-2)} .cc-sw i{background:var(--paper-3);border-color:var(--line-2)} .cc-foot{font-size:13px;color:var(--ink-3)} /* ---------- 19. miscarea ---------- */ @keyframes g-up{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } /* deschiderea paginii: h1 nu are intarziere, ca sa nu franeze afisarea */ .hero h1,.page-top h1{animation:g-up .62s var(--e-out) both} .hero .kicker,.page-top .kicker,.crumbs{animation:g-up .62s var(--e-out) .05s both} .hero .lead,.page-top .lead{animation:g-up .66s var(--e-out) .1s both} .hero .actions,.page-top .actions{animation:g-up .66s var(--e-out) .17s both} .hero .note,.page-top .note{animation:g-up .66s var(--e-out) .22s both} .hero .figs,.page-top .figs{animation:g-up .7s var(--e-out) .26s both} .hero .sheet{animation:g-up .8s var(--e-out) .14s both} /* restul sectiunilor: apar la derulare. gold.js pune g-rev si apoi g-in */ .g-anim .g-rev{ opacity:0; transform:translateY(22px); transition:opacity .78s var(--e-out),transform .78s var(--e-out); } .g-anim .g-rev.g-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} .g-anim .g-rev{opacity:1 !important;transform:none !important} body::after{display:none} } /* ---------- 20. ecrane mici ---------- */ @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:44px} .sec-grid{grid-template-columns:1fr;gap:20px} .tag{padding-top:14px} .legal-grid{grid-template-columns:1fr} .legal-nav{border-left:0;padding-left:0} .step,.step+.step{padding:24px 0 26px} .menu{ inset:72px 0 auto 0; background:var(--paper-card); border-bottom:1px solid var(--line-2); box-shadow:var(--sh-2); padding:10px 18px 20px; } .menu a{font-size:16.5px;padding:14px 8px;border-radius:0;border-bottom:1px solid var(--line)} .menu a[aria-current="page"]{color:var(--accent)} .menu .btn{margin:16px 0 0;justify-content:center;border-bottom:0} } @media (max-width:560px){ body{font-size:16.5px} .navbar{height:64px} .menu{inset:64px 0 auto 0} .sheet{padding:24px 22px 20px;border-radius:var(--r-md)} .big{font-size:58px} .fig{padding:18px 0 0;border-right:0;margin-right:0} .figs{border-top-color:var(--line-2)} .actions .btn{flex:1 1 auto;justify-content:center} .hero::before{display:none} } /* ========================================================================== 21. Deschiderea, refacuta (2026-08-24, skill awwwards-hero, arhitectura B) Problema veche: titlul si fisa de scor aveau aceeasi greutate si erau amandoua centrate pe verticala. Doua centre de atentie inseamna niciunul. Ce se schimba, fara sa se atinga HTML-ul: invelisul din .hero-grid devine `display:contents`, deci cele sase bucati de text urca la nivelul grilei si pot fi asezate una cate una. Asa titlul primeste toata latimea paginii, nu 55% din ea, iar fisa coboara mai jos decat blocul de text. [ supratitlu ] [ TITLU, pe toata latimea, doua randuri ] [ text ] [ ] [ indemn ] [ fisa de scor ] [ nota ] [ ] [ cifre, banda cu linie ] Tot ce e mai jos e limitat la .hero. Antetul, subsolul si restul sectiunilor raman neatinse. ========================================================================== */ /* deschiderea ocupa un ecran, cu continutul centrat pe verticala */ .hero{ display:flex; align-items:center; padding:clamp(40px,5vw,64px) 0; /* 72px inaltimea barei + 1px linia de sub ea. Cu 72 iesea fix 1px din ecran. */ min-height:calc(100vh - 74px); min-height:calc(100svh - 74px); } .hero>.wrap{width:100%} /* titlul, la scara de ecran */ .hero h1{ font-size:clamp(2.9rem,6.8vw,6.2rem); line-height:.96; letter-spacing:-.032em; max-width:none; /* pe ecran mare distanta o dau randurile grilei; sub 901px nu exista grila, deci titlul isi tine singur marginea, altfel se lipeste de textul de sub el */ margin-bottom:clamp(18px,2.6vw,24px); } /* un singur indemn. Al doilea ramane, dar ca legatura, nu ca buton care se bate cu primul. */ .hero .actions{gap:10px 26px;align-items:center;margin-top:clamp(26px,3vw,36px)} .hero .actions .btn-solid{font-size:16px;padding:16px 30px} .hero .actions .btn-line{ background:none; border-color:transparent; box-shadow:none; padding:10px 4px; color:var(--ink-2); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--line-2); } .hero .actions .btn-line:hover{ background:none; border-color:transparent; box-shadow:none; transform:none; color:var(--accent); text-decoration-color:var(--accent); } /* cifrele: banda de subsol a deschiderii, nu al treilea concurent */ .hero .figs{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line-2)} .hero .fig .v{font-size:clamp(27px,2.3vw,32px)} .hero .fig .k{font-size:12.5px} @media (min-width:901px){ .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(340px,440px); column-gap:clamp(44px,5vw,76px); row-gap:0; align-items:start; } /* invelisul dispare din grila, copiii lui iau locul lui */ .hero-grid>div{display:contents} .hero .kicker{grid-column:1;grid-row:1;margin-bottom:20px} .hero h1{grid-column:1/-1;grid-row:2;margin-bottom:0} .hero .lead{grid-column:1;grid-row:3;margin-top:26px;max-width:44ch} .hero .actions{grid-column:1;grid-row:4} .hero .note{grid-column:1;grid-row:5} .hero .figs{grid-column:1;grid-row:6} /* fisa sta in dreapta si coboara sub blocul de text: de aici vine tensiunea */ .hero .sheet{ grid-column:2; grid-row:3/7; align-self:end; margin-bottom:0; padding:26px 26px 22px; } .hero .sheet-score{gap:20px} .hero .big{font-size:clamp(54px,4.6vw,64px)} } /* lumina se muta in dreapta jos, langa fisa */ .hero::before{right:0;top:22%;width:54%;height:70%} /* intrarea: sub 800 de milisecunde cap-coada, titlul fara intarziere */ .hero h1{animation:g-up .58s var(--e-out) both} .hero .kicker{animation:g-up .58s var(--e-out) .04s both} .hero .lead{animation:g-up .58s var(--e-out) .09s both} .hero .actions{animation:g-up .58s var(--e-out) .14s both} .hero .note{animation:g-up .58s var(--e-out) .18s both} .hero .figs{animation:g-up .6s var(--e-out) .2s both} .hero .sheet{animation:g-up .66s var(--e-out) .1s both} @media (max-width:900px){ .hero{display:block;min-height:0;padding:clamp(38px,7vw,56px) 0 clamp(44px,7vw,60px)} .hero .sheet{margin-top:8px} } /* --- reglaje dupa masurare pe ecran (2026-08-24) --- Masurat: titlul si fisa se atingeau exact (0px intre ele), iar deschiderea depasea un ecran. Fisa coboara ca sa se vada ca e asezata intentionat mai jos, iar inaltimea se recastiga din marginile de sus-jos si din interiorul fisei, nu din titlu. */ .hero{padding:clamp(26px,2.6vw,36px) 0} /* masurat la 1440x900: deschiderea iesea din ecran cu 1px. Se taie din marginile de sus-jos si dintre bucati, niciodata din titlu. */ .hero h1{line-height:.94} .hero .figs{margin-top:clamp(24px,2.6vw,34px)} @media (min-width:901px){ .hero .sheet{margin-top:clamp(30px,3vw,44px);padding:22px 24px 18px} .hero .sheet-head{padding-bottom:16px} .hero .sheet-score{padding:18px 0} .hero .brk{padding-top:16px;gap:13px} .hero .lead{margin-top:20px} } /* --- ecrane late dar scunde (laptopuri 1366x768 si similare) --- Acolo titlul creste dupa latime, dar inaltimea nu tine pasul si deschiderea iesea din ecran cu ~43px. Se strange spatierea, titlul ramane intreg. Sub 700px inaltime nu mai are ce sa dea spatierea, atunci scade si titlul. */ @media (min-width:901px) and (max-height:840px){ .hero{padding:16px 0} .hero .lead{margin-top:16px;font-size:17px} .hero .actions{margin-top:22px} .hero .note{margin-top:14px} .hero .figs{margin-top:18px} .hero .sheet{margin-top:22px} } /* pe ecranele scunde titlul se masoara si dupa inaltime, nu doar dupa latime: altfel la 1440x720 creste dupa cele 1440 si nu mai incape in cele 720. */ @media (min-width:901px) and (max-height:840px){ .hero h1{font-size:min(clamp(2.6rem,6.2vw,5.2rem),10vh)} } @media (min-width:901px) and (max-height:660px){ .hero .figs{margin-top:14px} .hero .note{display:none} } /* ========================================================================== 22. Calculatorul de evaluare (/evaluare, 2026-08-24) Acelasi obiect ca fisa de scor din deschidere: cartonas ridicat de pe hartie, cu o linie care desparte ce alegi tu de ce iese. ========================================================================== */ .ev{ background:var(--paper-card); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:clamp(22px,2.6vw,30px); max-width:880px; } /* patru campuri: judet, localitate, camere, suprafata. Pe ecran mare stau pe un rand, mai jos se rup in doua pe rand. */ .ev-form{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto minmax(104px,.58fr); gap:18px 18px; align-items:end; } .ev-field{min-width:0} .ev-field label,.ev-lab{ display:block; font-size:12.5px; letter-spacing:.05em; color:var(--ink-3); margin-bottom:9px; } .ev-field select,.ev-mp-wrap{ width:100%; height:50px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); transition:border-color .26s var(--e-snap),box-shadow .26s var(--e-snap); } .ev-field select{ font-family:var(--sans); font-size:16px; color:var(--ink); padding:0 12px; } .ev-field select:focus,.ev-mp-wrap:focus-within{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(27,83,64,.15); } .ev-mp-wrap{display:flex;align-items:center;gap:6px;padding:0 14px} .ev-mp-wrap input{ width:100%; min-width:0; border:0; background:none; font-family:var(--sans); font-size:16px; color:var(--ink); padding:0; } .ev-mp-wrap input:focus{outline:none} .ev-mp-wrap span{flex:none;font-size:14.5px;color:var(--ink-3)} /* camerele: patru butoane lipite, ca un singur comutator */ .ev-seg{display:flex;height:50px;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden} .ev-seg button{ min-width:52px; border:0; border-right:1px solid var(--line); background:var(--paper); font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:background .22s var(--e-snap),color .22s var(--e-snap); } .ev-seg button:last-child{border-right:0} .ev-seg button:hover{background:var(--paper-2)} .ev-seg button[aria-pressed="true"]{background:var(--accent);color:var(--paper-card)} /* rezultatul */ .ev-out{display:block;margin-top:clamp(22px,2.4vw,28px);padding-top:clamp(20px,2.2vw,26px); border-top:1px solid var(--line)} .ev-gol{font-size:15px;color:var(--ink-3)} .ev-eticheta{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)} .ev-suma{ font-family:var(--serif); font-size:clamp(30px,4.2vw,44px); line-height:1.1; letter-spacing:.006em; color:var(--ink); margin-top:8px; font-variation-settings:"opsz" 72,"wght" 500; } .ev-suma i{font-style:normal;font-size:.55em;color:var(--ink-3);margin:0 .16em} .ev-suma span{font-family:var(--sans);font-size:.42em;font-weight:600;color:var(--ink-3); letter-spacing:.02em;margin-left:.2em;font-variation-settings:normal} .ev-sub{margin-top:12px;font-size:15.5px;color:var(--ink-2);max-width:56ch} .ev-linii{margin:22px 0 0;border-top:1px solid var(--line)} .ev-linii>div{ display:grid; grid-template-columns:minmax(150px,45%) 1fr; gap:0 20px; padding:11px 0; border-bottom:1px solid var(--line); } .ev-linii dt{font-size:14.5px;color:var(--ink-3)} .ev-linii dd{ margin:0; font-family:var(--serif); font-size:15.5px; color:var(--ink); letter-spacing:.004em; font-variation-settings:"opsz" 36,"wght" 500; } .ev-nota{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:62ch} .ev-legaturi{margin-top:18px} /* scurtaturi catre orasele mari */ .ev-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px} .ev-quick>span{font-size:13px;color:var(--ink-3);margin-right:2px} .ev-chip{ font-family:var(--sans); font-size:13.5px; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 13px; cursor:pointer; transition:border-color .24s var(--e-snap),color .24s var(--e-snap),background .24s var(--e-snap); } .ev-chip:hover{border-color:var(--ink-3);color:var(--ink);background:var(--paper-card)} /* avertismentul cand suprafata scrisa e departe de cat are categoria de obicei */ .ev-avertisment{ background:var(--warn-soft); border:1px solid #E8D7BC; border-radius:var(--r-sm); padding:13px 16px; margin-bottom:20px; font-size:14.5px; line-height:1.55; color:var(--warn); max-width:60ch; } .ev-avertisment b{color:var(--warn)} @media (max-width:1000px){ .ev-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px} } @media (max-width:560px){ .ev-form{grid-template-columns:1fr 1fr} .ev-form>.ev-field:nth-child(1), .ev-form>.ev-field:nth-child(2){grid-column:1/-1} .ev-seg button{min-width:0;flex:1} .ev-linii>div{grid-template-columns:1fr;gap:2px;padding:10px 0} }