/* ============================================================ tema.css - paginile pe care le deseneaza mai departe tema. Se incarca dupa matted.css si nu redefineste niciun token. Textul lor nu se atinge: aici se imbraca numai clasele pe care le foloseste deja markupul temei, in limbajul paginii principale. Nucleul (container, sec, sec-title, ...) e scris pe nume; componentele care traiesc sub mai multe prefixe (htd-step, afc-step, prv-step, ...) se prind pe sufix, deci o pagina noua cu acelasi tipar e imbracata din prima. ============================================================ */ /* ---------- tokenii temei, redirectati catre ai nostri ---------- Masurat: 535 de elemente din sabloanele temei poarta un atribut style= scris direct in pagina, iar 238 dintre ele folosesc tokenii de mai jos. Un stil scris in pagina bate orice foaie, deci nu are rost sa ma lupt cu el: ii schimb intelesul. Culorile temei erau oricum aceleasi cu ale noastre (#0f0f0f, #f5f0e8, #c9a96e, #e0c992, #c4877a); ce se schimba cu adevarat e fontul de text, Montserrat pe Manrope, si liniile despartitoare, care erau cenusii si devin aurii. */ :root{ --bg-primary:var(--bg); --bg-secondary:var(--bg2); --bg-card:var(--bg2); --bg-accent:var(--bg3); --text-primary:var(--tx); --text-secondary:var(--tx2); --text-muted:var(--tx3); --accent-gold:var(--gold); --accent-gold-light:var(--gold-l); --accent-warm:var(--gold-l); --accent-rose:var(--rose); --divider:var(--div); --shadow:0 22px 60px -22px rgba(0,0,0,.9); --font-display:var(--disp); --font-body:var(--body); --ease-out:var(--e); --ease-smooth:var(--e-in); } /* Montserrat nu se incarca nicaieri la noi, deci unde e scris direct in pagina textul ar cadea pe fontul sistemului. Unsprezece locuri, prinse dupa continutul atributului: singurul loc din foaia asta unde folosesc !important, fiindca un stil scris in pagina nu poate fi batut altfel. */ .matted-tema [style*="Montserrat"]{font-family:var(--body) !important} /* Titlul mare al paginii: tema il cere la 7rem si greutate 700. Pe pagina principala titlurile stau la greutate 500 si mai mic. Trei declaratii ca sa arate la fel, nu mai multe. */ .matted-tema .dtm-hero h1,.matted-tema .dtm-hero .sec-title{ font-size:clamp(2.5rem,7.4vw,5.5rem) !important; font-weight:400 !important; line-height:1.03 !important; max-width:min(100%,17ch) !important; } /* ---------- asezarea ---------- */ .container{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,56px)} .sec{padding-block:var(--pad);position:relative} .sec-alt{background:var(--bg2)} .sec-center{max-width:70ch;margin-inline:auto} .center,.sec-center{text-align:left} .sec-center.center,.section-label.center{text-align:left} /* ---------- eroul de sus ---------- Cele patru straturi ale temei primesc, in rescriere, chiar numele de clasa ale paginii principale (.hero-grid, .arc, .hero-scrim), deci fundalul vine din matted.css si nu poate arata altfel. Inaltimea e aceeasi cu a paginii principale: arcul auriu e un cerc urias asezat in raport cu inaltimea sectiunii, deci daca sectiunea e mai scunda arcul taie pagina prin mijloc in loc sa o incadreze pe dedesubt. */ .dtm-hero{ min-height:min(100svh,940px);display:flex;align-items:center; padding-block:clamp(104px,16vh,180px) var(--pad); position:relative;overflow:hidden; } .dtm-hero-fade{ position:absolute;left:0;right:0;bottom:0;height:clamp(80px,12vh,150px); pointer-events:none; background:linear-gradient(to top,var(--bg),rgba(15,15,15,0)); } .dtm-hero .container{position:relative;z-index:2;text-align:center;width:100%} .dtm-hero .section-label{justify-content:center} /* Pe prima pagina tot eroul e centrat. Sabloanele temei pun pe cateva elemente un text-align scris direct in pagina, deci centrarea se cere explicit, cu aceeasi greutate. */ .matted-tema .dtm-hero .container, .matted-tema .dtm-hero .container h1, .matted-tema .dtm-hero .container h2, .matted-tema .dtm-hero .container p, .matted-tema .dtm-hero .container .sec-title, .matted-tema .dtm-hero .container .sec-subtitle{text-align:center !important} .matted-tema .dtm-hero .container p, .matted-tema .dtm-hero .container .content-text, .matted-tema .dtm-hero .container .sec-subtitle{margin-inline:auto !important} .matted-tema .dtm-hero .container .section-label{justify-content:center} .matted-tema .dtm-hero .container>div{margin-inline:auto} .dtm-hero h1,.dtm-hero .sec-title{ font-family:var(--disp);font-weight:500; /* exact ca pe pagina principala: 88px la 1440, greutate 400 */ font-size:clamp(2.5rem,7.4vw,5.5rem);line-height:1.03;font-weight:400; letter-spacing:-.022em;color:var(--tx); margin:0 auto;max-width:none;text-wrap:balance; } .dtm-hero h1 em,.dtm-hero .sec-title em{font-style:italic;color:var(--gold);font-weight:400} .dtm-crumb{ font-family:var(--body);font-size:.72rem;letter-spacing:.1em;color:var(--tx3); margin:0 0 18px; } .dtm-crumb a{color:var(--gold)} /* ---------- eticheta si titlurile de sectiune ---------- */ .section-label{ font-family:var(--body);font-size:.66rem;font-weight:700; letter-spacing:.24em;text-transform:uppercase;color:var(--gold); margin:0 0 20px;display:flex;align-items:center;gap:12px; } .section-label::before{content:"";width:34px;height:1px;background:var(--gold);flex:none} .sec-title{ font-family:var(--disp);font-weight:500; font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.1;letter-spacing:-.02em; color:var(--tx);margin:0 0 clamp(16px,2vw,24px);max-width:22ch;text-wrap:balance; } .sec-title em{font-style:italic;color:var(--gold);font-weight:400} .sec-subtitle{ font-family:var(--body);font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.68; color:var(--tx2);max-width:64ch;margin:0 0 clamp(26px,3.4vw,42px); } /* ---------- titlurile si textul din corp ---------- */ .matted-tema main h2{ font-family:var(--disp);font-weight:500; font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.14;letter-spacing:-.018em; color:var(--tx);margin:clamp(44px,5.4vw,72px) 0 clamp(14px,1.7vw,20px); max-width:24ch;text-wrap:balance; } .matted-tema main h2 em{font-style:italic;color:var(--gold);font-weight:400} .matted-tema main h3{ font-family:var(--disp);font-weight:500; font-size:clamp(1.18rem,1.8vw,1.42rem);line-height:1.28;letter-spacing:-.008em; color:var(--gold-l);margin:clamp(28px,3.4vw,42px) 0 clamp(9px,1.1vw,13px); } .matted-tema main h4{ font-family:var(--body);font-size:.94rem;font-weight:700;color:var(--tx); letter-spacing:.01em;margin:clamp(22px,2.6vw,30px) 0 8px; } .matted-tema main p{ font-family:var(--body);font-size:clamp(1rem,1.14vw,1.06rem);line-height:1.76; color:var(--tx2);margin:0 0 clamp(16px,1.6vw,20px);max-width:68ch; } .matted-tema main p strong,.matted-tema main li strong,.matted-tema main b{color:var(--tx);font-weight:700} /* Butoanele si cardurile sunt tot , dar nu sunt legaturi de text. Regula de mai jos are specificitate 0,1,2 si batea .btn-primary, care are 0,1,0: butonul primea text auriu pe fundal auriu si nu se mai vedea nimic scris pe el. Prins pe /about/, la butonul "Book Free Assessment". */ .matted-tema main a:not([class*="btn"]):not([class*="card"]):not([class*="-cta"]):not([class*="-wa"]):not([class*="-ghost"]):not(.g-item){ color:var(--gold);text-decoration:none; background-image:linear-gradient(var(--gold),var(--gold)); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size var(--t-fast) var(--e-in),color var(--t-fast) var(--e-in); } .matted-tema main a:not([class*="btn"]):not([class*="card"]):hover{color:var(--gold-l);background-size:100% 2px} .matted-tema main a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} .matted-tema main ul,.matted-tema main ol{padding-left:0;list-style:none;margin:0 0 clamp(18px,2vw,24px);max-width:68ch} .matted-tema main li{ font-family:var(--body);font-size:clamp(.97rem,1.08vw,1.03rem);line-height:1.72; color:var(--tx2);padding-left:28px;position:relative;margin-bottom:11px; } .matted-tema main ul>li::before{content:"";position:absolute;left:6px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--gold)} .matted-tema main ol{counter-reset:li} .matted-tema main ol>li{counter-increment:li} .matted-tema main ol>li::before{content:counter(li);position:absolute;left:0;top:.06em;font-family:var(--num);font-size:.8rem;font-weight:700;color:var(--gold)} .content-text,.article-body{max-width:68ch} .content-text p,.article-body p{max-width:none} /* ---------- butoane ---------- */ .matted-tema .btn-primary,.matted-tema .whatsapp-book-btn, .btn-primary,.whatsapp-book-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;min-height:48px; font-family:var(--body);font-size:.68rem;font-weight:700; letter-spacing:.17em;text-transform:uppercase; color:var(--bg);background:var(--gold);border:0;border-radius:2px; text-decoration:none;background-image:none;cursor:pointer; transition:background var(--t-fast) var(--e-in),transform var(--t-fast) var(--e-in); } .btn-primary:hover,.whatsapp-book-btn:hover{background:var(--gold-l);color:var(--bg);transform:translateY(-1px)} .btn-primary:focus-visible,.btn-outline:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .matted-tema .btn-outline,.matted-tema [class$="-ghost"], .btn-outline,[class$="-ghost"]{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 28px;min-height:48px; font-family:var(--body);font-size:.68rem;font-weight:700; letter-spacing:.17em;text-transform:uppercase; color:var(--tx);background:transparent;border:1px solid var(--div3);border-radius:2px; text-decoration:none;background-image:none; transition:border-color var(--t-fast) var(--e-in),color var(--t-fast) var(--e-in); } .btn-outline:hover,[class$="-ghost"]:hover{border-color:var(--gold);color:var(--gold)} [class$="-cta-btns"],[class$="-btns"]{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,2.8vw,30px)} /* ---------- casete: chemare, avertisment, nota, sfat ---------- */ [class$="-cta"],.cta-box,.contact-box,[class$="-final"]{ margin:clamp(40px,5vw,64px) 0 0;padding:clamp(28px,3.6vw,42px); background:var(--bg2);border:1px solid var(--div);border-radius:3px; } [class$="-cta"] h2,.cta-box h2,.contact-box h2{margin-top:0} .warn-box,[class$="-note"],.mental-note,.safe-box,.highlight-quote{ margin:clamp(28px,3.4vw,40px) 0;padding:clamp(20px,2.6vw,28px) clamp(22px,2.8vw,30px); background:var(--bg2);border-left:1px solid var(--gold);border-radius:0 3px 3px 0; } .warn-box{border-left-color:var(--rose)} .warn-box p:last-child,[class$="-note"] p:last-child,.mental-note p:last-child,.safe-box p:last-child{margin-bottom:0} .warn-icon{display:none} .highlight-quote{font-family:var(--disp);font-style:italic;font-size:clamp(1.16rem,1.9vw,1.42rem);line-height:1.5;color:var(--tx)} .see-also{ display:block;margin:clamp(22px,2.6vw,30px) 0;padding:14px 0 0; border-top:1px solid var(--div); font-family:var(--body);font-size:.86rem;color:var(--tx3); } .stamp{ display:inline-flex;align-items:center;gap:10px;margin:0 0 22px; font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--gold); } .tag,[class$="-tag"]{ display:inline-block;padding:5px 11px; font-family:var(--body);font-size:.6rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gold); border:1px solid var(--div);border-radius:2px; } /* ---------- cuprinsul din pagina ---------- */ .toc-box{ margin:clamp(28px,3.4vw,40px) 0;padding:clamp(22px,2.8vw,30px); background:var(--bg2);border:1px solid var(--div);border-radius:3px; } .toc-box ol,.toc-box ul{margin:0} .matted-tema .toc-box li,.toc-box li{padding-left:24px} /* ---------- pasii numerotati: htd- afc- prv- srg- mhr- ab- ---------- */ [class$="-step"],.step-card{ position:relative;padding:clamp(20px,2.6vw,28px) 0 clamp(20px,2.6vw,28px) clamp(52px,6vw,72px); border-bottom:1px solid var(--div); } [class$="-step"]:last-child,.step-card:last-child{border-bottom:none} [class$="-step-num"],.step-num{ position:absolute;left:0;top:clamp(20px,2.6vw,28px); font-family:var(--num);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1;color:var(--gold);letter-spacing:-.02em; } [class$="-step"] h3,.step-card h3{margin-top:0} .steps-grid{margin:clamp(26px,3.2vw,38px) 0} /* ---------- intrebari frecvente ---------- */ [class$="-faq"]{margin:clamp(26px,3.2vw,38px) 0} [class$="-faq-item"],[class$="-ask-item"]{ padding:clamp(20px,2.4vw,26px) 0;border-bottom:1px solid var(--div); } [class$="-faq-item"]:last-child,[class$="-ask-item"]:last-child{border-bottom:none} [class$="-faq-item"] h3,[class$="-ask-item"] h3,[class$="-faq-item"] h4{margin-top:0} [class$="-answer"] p:last-child{margin-bottom:0} /* ---------- grile si celule ---------- */ [class$="-grid"]:not(.blog-grid):not(.g-grid):not(.steps-grid):not(.pay-cards-grid):not(.pay-alt-grid){ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,2.4vw,30px);margin:clamp(26px,3.2vw,38px) 0;align-items:start; } [class$="-cell"]{ padding:clamp(20px,2.4vw,26px);background:var(--bg2); border:1px solid var(--div);border-radius:3px; } [class$="-cell"] p:last-child{margin-bottom:0} [class$="-pro"]{color:var(--green)} [class$="-wa"]{color:var(--green)} /* ---------- numere mari cu eticheta ---------- */ .num{ display:block;font-family:var(--num);font-weight:700; font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;color:var(--gold);letter-spacing:-.03em; } .lab{ display:block;margin-top:9px;font-family:var(--body);font-size:.66rem;font-weight:700; letter-spacing:.19em;text-transform:uppercase;color:var(--tx3); } .rate{font-family:var(--disp);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--tx)} .rate strong{color:var(--gold)} .rate-sub,.rate-note{font-family:var(--body);font-size:.86rem;color:var(--tx3);margin-top:8px} /* ---------- tabele ---------- */ .matted-tema main table,.data-table{ width:100%;border-collapse:collapse;margin:clamp(26px,3.2vw,38px) 0; font-family:var(--body);font-size:clamp(.86rem,1vw,.95rem); } .matted-tema main th{ text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--gold); color:var(--gold);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; } .matted-tema main td{ padding:15px 16px 15px 0;border-bottom:1px solid var(--div); color:var(--tx2);line-height:1.62;vertical-align:top; } .matted-tema main tbody tr:last-child td{border-bottom:none} .matted-tema main td strong{color:var(--tx)} @media (max-width:660px){ .matted-tema main thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .matted-tema main table,.matted-tema main tbody,.matted-tema main tr,.matted-tema main td{display:block;width:100%} .matted-tema main tr{padding:16px 0;border-bottom:1px solid var(--div)} .matted-tema main td{padding:3px 0;border:0} .matted-tema main td:first-child{color:var(--tx);font-weight:700;margin-bottom:4px} } /* ---------- caseta autorului ---------- */ .author-box{ margin:clamp(30px,3.6vw,44px) 0;padding:clamp(22px,2.8vw,30px); background:var(--bg2);border-left:1px solid var(--gold);border-radius:0 3px 3px 0; } .author-box p:last-child{margin-bottom:0} .matted-tema .author-box p,.author-box p{font-size:.92rem} /* ---------- blog: cardurile ---------- */ /* Fiecare card cat continutul lui. Cu inaltime egala pe rand, un card cu titlu de un rand statea intr-o rama de cinci randuri, si se vedea gol. */ .blog-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:clamp(16px,2vw,24px);margin-top:clamp(30px,3.6vw,44px); align-items:start; } .blog-card{ display:flex;flex-direction:column;gap:10px; padding:clamp(22px,2.6vw,30px);background:var(--bg2); border:1px solid var(--div);border-radius:3px;text-decoration:none;background-image:none; transition:border-color var(--t) var(--e),transform var(--t) var(--e); } .blog-card:hover{border-color:var(--gold);transform:translateY(-3px)} .blog-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* h2, nu h3: in rescriere titlurile cardurilor urca un nivel, ca sa nu sara peste el dupa

. Fara asta, titlul lua marginea generica de H2 din sectiuni, 44 pana la 72px, si intre eticheta si titlu ramanea o gaura cat jumatate de card. */ .matted-tema .blog-card h2,.matted-tema .blog-card h3,.blog-card h2,.blog-card h3{ font-family:var(--disp);font-weight:500;font-size:clamp(1.16rem,1.7vw,1.34rem); line-height:1.22;color:var(--tx);margin:0;max-width:none; } .matted-tema .blog-card p,.blog-card p{font-family:var(--body);font-size:.9rem;line-height:1.62;color:var(--tx2);margin:0} .blog-card .read-more,.read-more{ font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--gold); } .blog-intro{max-width:64ch} /* ---------- galerie ---------- */ .g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,20vw,230px),1fr));gap:clamp(8px,1.1vw,14px);margin-top:clamp(28px,3.4vw,42px)} .g-item{position:relative;overflow:hidden;border-radius:3px;background:var(--bg2);aspect-ratio:1/1} .g-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow) var(--e)} .g-item:hover img{transform:scale(1.04)} .g-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,15,15,.72),transparent 52%);opacity:0;transition:opacity var(--t) var(--e)} .g-item:hover .g-overlay{opacity:1} .g-zoom-icon{position:absolute;right:12px;bottom:12px;color:var(--gold);opacity:0;transition:opacity var(--t) var(--e)} .g-item:hover .g-zoom-icon{opacity:1} /* ---------- recenzii ---------- */ .rv-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(28px,3.4vw,42px);align-items:start} .rv-card{padding:clamp(22px,2.6vw,30px);background:var(--bg2);border:1px solid var(--div);border-radius:3px} .rv-stars{color:var(--gold);letter-spacing:.14em;font-size:.86rem;margin-bottom:12px} .matted-tema .rv-text,.rv-text{font-family:var(--body);font-size:.95rem;line-height:1.7;color:var(--tx2);margin:0 0 16px} .rv-author{display:flex;align-items:center;gap:11px} .rv-avatar{width:34px;height:34px;border-radius:50%;background:var(--bg4);color:var(--gold); display:flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:700;font-size:.8rem;flex:none} .rv-name{font-family:var(--body);font-size:.82rem;font-weight:600;color:var(--tx)} /* ---------- acte si diplome ---------- */ .cs-entry{display:grid;gap:clamp(14px,2vw,26px);padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--div)} @media (min-width:760px){.cs-entry{grid-template-columns:minmax(0,168px) minmax(0,1fr);align-items:start}} .cs-entry:last-child{border-bottom:none} .cs-media img{width:100%;height:auto;display:block;border-radius:3px;border:1px solid var(--div)} .matted-tema .cs-title,.cs-title{font-family:var(--disp);font-weight:500;font-size:clamp(1.08rem,1.5vw,1.26rem);color:var(--tx);margin:0 0 6px} .matted-tema .cs-issuer,.cs-issuer{font-family:var(--body);font-size:.86rem;color:var(--tx2);margin:0 0 6px} .cs-year,.cs-year-row{font-family:var(--num);font-size:.78rem;font-weight:600;letter-spacing:.1em;color:var(--gold)} .cs-year-line{height:1px;background:var(--div);margin:6px 0 0} .matted-tema .cs-lead,.matted-tema .cs-text,.matted-tema .cs-body,.cs-lead,.cs-text,.cs-body{font-family:var(--body);font-size:.93rem;line-height:1.7;color:var(--tx2)} .cs-lb{position:fixed;inset:0;z-index:110;background:rgba(15,15,15,.95);display:none;align-items:center;justify-content:center;padding:24px} .cs-lb.cs-open{display:flex} .cs-lb-inner{max-width:min(94vw,900px);max-height:88vh} .cs-lb-inner img{max-width:100%;max-height:76vh;width:auto;height:auto;display:block;margin:0 auto} .cs-lb-cap{font-family:var(--body);font-size:.84rem;color:var(--tx2);text-align:center;margin-top:14px} .cs-lb-close{position:absolute;top:20px;right:22px;width:44px;height:44px;border:1px solid var(--div3); background:transparent;color:var(--tx);border-radius:50%;font-size:1.4rem;cursor:pointer} .cs-lb-close:hover{border-color:var(--gold);color:var(--gold)} .dtm-shimmer-text{color:var(--gold)} /* ---------- plata ---------- */ .pay-cards-grid,.pay-alt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(14px,1.8vw,22px);margin:clamp(26px,3.2vw,38px) 0;align-items:start} .pay-info{padding:clamp(22px,2.8vw,30px);background:var(--bg2);border:1px solid var(--div);border-radius:3px} .matted-tema .pay-rate-row,.pay-rate-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--div);font-family:var(--body);font-size:.95rem;color:var(--tx2)} .pay-rate-row:last-child{border-bottom:none} .pay-rate-row strong{color:var(--gold)} .pay-info-rates,.pay-info-steps{margin-top:clamp(18px,2.2vw,26px)} /* ---------- diagrama de pe studiu ---------- */ .chart-container{display:grid;gap:clamp(22px,3vw,40px);align-items:center;margin:clamp(30px,3.6vw,46px) 0} @media (min-width:800px){.chart-container{grid-template-columns:minmax(0,320px) minmax(0,1fr)}} .donut-chart,.donut-svg{width:100%;max-width:320px;height:auto;margin:0 auto;display:block} .donut-center{text-align:center} .donut-number{font-family:var(--num);font-weight:700;font-size:1.9rem;fill:var(--tx);color:var(--tx)} .donut-label,.donut-pct{font-family:var(--body);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;fill:var(--tx3);color:var(--tx3)} .chart-legend{display:flex;flex-direction:column;gap:11px} .matted-tema .legend-item,.legend-item{display:flex;align-items:center;gap:11px;font-family:var(--body);font-size:.9rem;color:var(--tx2)} .legend-color{width:11px;height:11px;border-radius:2px;flex:none} .legend-text{flex:1} /* ---------- despre: coloane si carduri de locatie ---------- */ .ab-split,.ab-split-wide{display:grid;gap:clamp(22px,3.4vw,54px);align-items:start} @media (min-width:900px){ .ab-split{grid-template-columns:repeat(2,minmax(0,1fr))} .ab-split-wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} } /* Patru carduri pe trei coloane lasau unul singur pe randul al doilea si o gaura cat doua carduri langa el. Pe doua coloane se umple randul, iar fiecare card primeste 310px in loc de 197, deci "2 weeks to 2+ years" nu se mai rupe pe trei randuri. */ .ab-sci4{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px);margin:clamp(26px,3.2vw,38px) 0; align-items:start; /* fiecare card cat continutul lui, fara spatiu mort inauntru */ } .ab-sci4>div{display:flex;flex-direction:column;gap:0} .ab-pay3,.ab-loc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(16px,2vw,26px);margin:clamp(26px,3.2vw,38px) 0} @media (max-width:560px){.ab-sci4{grid-template-columns:1fr}} .loc-card{padding:clamp(20px,2.4vw,26px);background:var(--bg2);border:1px solid var(--div);border-radius:3px} .matted-tema .loc-sub,.loc-sub{font-family:var(--body);font-size:.82rem;color:var(--tx3);margin-top:6px} /* ---------- formularul de contact ---------- */ .booking-form{margin:clamp(26px,3.2vw,38px) 0;max-width:640px} .booking-form input,.booking-form textarea,.booking-form select, .wpforms-container input,.wpforms-container textarea,.wpforms-container select{ width:100%;padding:13px 15px;background:var(--bg2);color:var(--tx); border:1px solid var(--div3);border-radius:2px; font-family:var(--body);font-size:.95rem; } .booking-form input:focus,.booking-form textarea:focus, .wpforms-container input:focus,.wpforms-container textarea:focus{outline:2px solid var(--gold);outline-offset:1px} .booking-form label,.wpforms-container label{ display:block;margin:0 0 7px;font-family:var(--body);font-size:.7rem;font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--tx3); } .wpforms-container button,.wpforms-container input[type="submit"]{ width:auto;padding:16px 30px;min-height:48px;background:var(--gold);color:var(--bg); border:0;border-radius:2px;font-family:var(--body);font-size:.68rem;font-weight:700; letter-spacing:.17em;text-transform:uppercase;cursor:pointer; } .form-divider{height:1px;background:var(--div);margin:clamp(26px,3.2vw,38px) 0} .wa-book-wrapper{margin:clamp(26px,3.2vw,38px) 0} .wa-book-glow{display:none} .wa-book-text{font-family:var(--body);font-size:.9rem;color:var(--tx2);margin-top:12px} /* ---------- miscarea, fara nicio linie de JS ---------- */ .reveal,.ab-reveal{opacity:1;transform:none} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .reveal,.ab-reveal,.matted-tema main>section>.container>*{ animation:tema-rise linear both;animation-timeline:view(); animation-range:entry 3% cover 19%; } .reveal-delay-1{animation-range:entry 7% cover 23%} .reveal-delay-2{animation-range:entry 11% cover 27%} .dtm-hero .reveal,.dtm-hero .ab-reveal,.dtm-hero .container>*{animation:rise .82s var(--e) both} .dtm-hero .section-label{animation-delay:.06s} .dtm-hero .sec-subtitle{animation-delay:.14s} } } /* Opacitatea urca la 1 in prima treime a drumului, nu pe tot. Motivul nu e estetic: un text la opacitate partiala peste fundal are contrast sub prag cat tine drumul, si axe-core il prinde pe buna dreptate. Asa textul se aprinde repede si numai deplasarea mai continua. */ /* Numai deplasare, fara stingere. Nu e o alegere de gust, e una masurata: invelisurile temei se cuprind unele pe altele, iar cand doua elemente suprapuse au fiecare opacitate partiala, textul dinauntru ajunge la un contrast pe care si axe-core si Lighthouse il pica, pe buna dreptate. O deplasare nu compune nimic, deci textul e citibil in orice punct al drumului si miscarea se vede la fel de bine. */ @keyframes tema-rise{ from{transform:translate3d(0,22px,0)} to{transform:none} } /* ---------- textul care intra sub meniu ---------- */ body.matted-tema::before{ content:"";position:fixed;inset:0 0 auto 0; height:clamp(76px,10.5vh,112px);z-index:78;pointer-events:none; background:linear-gradient(to bottom,var(--bg) 22%,rgba(15,15,15,.9) 52%,rgba(15,15,15,0)); } /* eticheta cardului nu trebuie sa se intinda pe toata latimea: intr-o coloana flex, un element se intinde daca nu i se spune altfel */ .blog-card .blog-card-tag,.blog-card .tag,[class$="-card"]>[class$="-tag"]{align-self:flex-start;width:auto} /* ---------- efecte ---------- Trei lucruri, toate din CSS, niciunul pe firul principal: 1. cardurile se ridica si prind o margine aurie la trecerea cursorului, 2. titlurile de sectiune isi trag o linie aurie pe masura ce ajungi la ele, cu aceeasi cronologie de scroll ca restul miscarii, 3. casetele au o unda aurie foarte slaba in coltul din stanga sus, ca sa nu fie dreptunghiuri plate. */ /* 1. ridicarea cardurilor */ .blog-card,.rv-card,.loc-card,[class$="-cell"],.pay-info,.cs-entry, [class$="-cta"],.cta-box,.contact-box,.toc-box{ transition:border-color var(--t) var(--e),transform var(--t) var(--e), box-shadow var(--t) var(--e); } .blog-card:hover,.rv-card:hover,.loc-card:hover,[class$="-cell"]:hover{ border-color:var(--gold);transform:translateY(-3px); box-shadow:0 20px 46px -26px rgba(0,0,0,.9),0 0 0 1px rgba(201,169,110,.12); } /* 2. linia aurie de sub titlul de sectiune */ .sec-title{position:relative;padding-bottom:clamp(14px,1.8vw,20px)} .sec-title::after{ content:"";position:absolute;left:0;bottom:0;width:clamp(48px,7vw,88px);height:1px; background:linear-gradient(90deg,var(--gold),rgba(201,169,110,0)); transform:scaleX(0);transform-origin:0 50%; } .dtm-hero .sec-title::after{left:50%;transform:translateX(-50%) scaleX(0);transform-origin:50% 50%} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .sec-title::after{ animation:linie linear both;animation-timeline:view(); animation-range:entry 6% cover 26%; } .dtm-hero .sec-title::after{animation:linie-mij 1s var(--e) .3s both} } } @keyframes linie{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes linie-mij{from{transform:translateX(-50%) scaleX(0)}to{transform:translateX(-50%) scaleX(1)}} /* 3. unda din coltul casetelor */ [class$="-cta"],.cta-box,.contact-box,.toc-box,.pay-info,.author-box{ position:relative;overflow:hidden; } [class$="-cta"]::before,.cta-box::before,.contact-box::before,.toc-box::before, .pay-info::before,.author-box::before{ content:"";position:absolute;left:0;top:0;width:min(320px,62%);height:min(220px,58%); pointer-events:none; background:radial-gradient(ellipse at 0% 0%,rgba(201,169,110,.10),rgba(201,169,110,0) 70%); } [class$="-cta"]>*,.cta-box>*,.contact-box>*,.toc-box>*,.pay-info>*,.author-box>*{position:relative} /* butonul plin capata aceeasi lumina ca pe prima pagina */ .btn-primary,.whatsapp-book-btn{position:relative;overflow:hidden} .btn-primary::after,.whatsapp-book-btn::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 62%); transform:translateX(-120%); } @media (prefers-reduced-motion: no-preference){ .btn-primary:hover::after,.whatsapp-book-btn:hover::after{ transition:transform .7s var(--e);transform:translateX(120%); } } /* ---------- banda cu arc pentru cele doua pagini fara erou ---------- /complete-guide/ si /causes-study/ incep direct cu o sectiune de text. Banda sta in spatele ei, inalta exact cat eroul de pe prima pagina, ca arcul sa aiba aceeasi geometrie. Nu prinde clicuri si nu muta nimic. */ .tema-cu-arc{position:relative;overflow:hidden} .tema-arc{ position:absolute;inset:0 0 auto 0;height:min(100svh,940px); overflow:hidden;pointer-events:none;z-index:0; } .tema-cu-arc>.container{position:relative;z-index:1} /* ============================================================ CROIALA CARDURILOR SI A CIFRELOR, LUATA DE PE PAGINA PRINCIPALA Masurat in browser pe pagina principala, nu ghicit: .tier raza 16px, fundal rgb(20,20,18), chenar rgba(245,240,232,.06) plus o lumina aurie care intra din coltul din dreapta sus .tier .amt Outfit, 34,4px, greutate 700, ALB (nu auriu) .tier .tname Manrope, 10,9px, greutate 700, auriu, majuscule .step-n Outfit, 132px, greutate 700, contur auriu care se umple ============================================================ */ /* ---------- cardurile ---------- */ .ab-sci4>div,.loc-card,[class$="-cell"],.blog-card,.rv-card,.pay-info, [class$="-cta"],.cta-box,.contact-box,.toc-box,.warn-box,[class$="-note"], .mental-note,.safe-box,.author-box,.highlight-quote,.pay-cards-grid>div{ position:relative;isolation:isolate; border-radius:16px; background:var(--bg2); border:1px solid rgba(245,240,232,.06); } .warn-box,[class$="-note"],.mental-note,.safe-box,.highlight-quote,.author-box{ border-left:1px solid var(--gold);border-radius:0 16px 16px 0; } /* lumina din coltul din dreapta sus, aceeasi formula ca pe prima pagina */ .ab-sci4>div::before,.loc-card::before,[class$="-cell"]::before, .blog-card::before,.rv-card::before,.pay-info::before, [class$="-cta"]::before,.cta-box::before,.contact-box::before,.toc-box::before, .pay-cards-grid>div::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; border-radius:inherit;left:auto;top:auto;width:100%;height:100%; background:radial-gradient(92% 80% at 104% -6%, rgba(234,201,138,.40) 0%, rgba(206,172,110,.19) 21%, rgba(150,116,58,.065) 42%, transparent 66%); } .ab-sci4>div,.loc-card,[class$="-cell"],.blog-card,.rv-card,.pay-cards-grid>div{ transition:border-color var(--t) var(--e),background var(--t) var(--e), transform var(--t) var(--e); } .ab-sci4>div:hover,.loc-card:hover,[class$="-cell"]:hover, .blog-card:hover,.rv-card:hover,.pay-cards-grid>div:hover{ border-color:var(--div);background:var(--bg3); } /* ---------- cifra din card: Outfit, alba, mare ---------- */ .ab-sci4>div>div:first-child,.pay-cards-grid>div>div:first-child{ font-family:var(--num) !important; font-size:clamp(1.5rem,3vw,2.15rem) !important; font-weight:700 !important; color:var(--tx) !important; line-height:1 !important; letter-spacing:-.02em; } /* randul de sub cifra devine eticheta aurie, ca pe prima pagina */ .ab-sci4>div>div:nth-child(2){ font-family:var(--body);font-size:.78rem;line-height:1.62;color:var(--tx3); margin-top:10px; } .num{font-family:var(--num);font-weight:700;color:var(--tx);letter-spacing:-.02em} .lab{color:var(--gold)} /* ---------- cifra pasului: contur auriu care se umple ---------- Clasa .step-n e pusa in rescriere, deci efectul vine din matted.css. Aici raman doar marimea si asezarea, ca pe /about/ pasii stau intr-o coloana mai ingusta decat sectiunea de metoda a paginii principale. */ .matted-tema [class$="-step-num"],.matted-tema .step-num{ position:static; font-size:clamp(3.4rem,7.2vw,7.2rem); line-height:.78;letter-spacing:-.05em;margin:0; } .matted-tema .steps-grid{display:grid;gap:0} .matted-tema [class$="-step"],.matted-tema .step-card{ display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr); column-gap:clamp(18px,3vw,44px);row-gap:0;align-items:start; padding:clamp(30px,4.4vw,54px) 0; border-bottom:1px solid rgba(245,240,232,.06); } /* Cifra tine toata inaltimea pasului, iar titlul si paragrafele stau unul sub altul in coloana a doua. Fara span, titlul ar sta pe primul rand si ar ramane o gaura cat cifra intre el si text. */ .matted-tema [class$="-step-num"],.matted-tema .step-num{ grid-column:1;grid-row:1 / span 6;align-self:center; } .matted-tema [class$="-step"]>*,.matted-tema .step-card>*{grid-column:2} .matted-tema [class$="-step-num"],.matted-tema .step-num{grid-column:1} .matted-tema [class$="-step"]:first-child,.matted-tema .step-card:first-child{padding-top:0} .matted-tema [class$="-step"]:last-child,.matted-tema .step-card:last-child{border-bottom:none} .matted-tema [class$="-step"] h3,.matted-tema .step-card h3{ margin:0 0 12px;font-size:clamp(1.3rem,2.5vw,1.85rem); } .matted-tema [class$="-step"] p,.matted-tema .step-card p{margin:0 0 10px;max-width:56ch} .matted-tema [class$="-step"] p:last-child,.matted-tema .step-card p:last-child{margin-bottom:0} @media (max-width:760px){ .matted-tema [class$="-step"],.matted-tema .step-card{grid-template-columns:1fr;gap:10px;align-items:start} .matted-tema [class$="-step"]>*,.matted-tema .step-card>*{grid-column:1} .matted-tema [class$="-step-num"],.matted-tema .step-num{grid-row:auto} .matted-tema [class$="-step-num"],.matted-tema .step-num{font-size:clamp(3.4rem,17vw,6rem)} } /* linia verticala din motion.css nu mai are rost langa cifre atat de mari */ .matted-tema .steps-grid::before{display:none} /* ---------- capul de sectiune: centrat, ca pe prima pagina ---------- */ .matted-tema main>section>.container>div>.section-label, .matted-tema main>section>.container>.section-label{justify-content:center} .matted-tema main>section>.container>div>.section-label, .matted-tema main>section>.container>div>.sec-title, .matted-tema main>section>.container>.section-label, .matted-tema main>section>.container>.sec-title{text-align:center} .matted-tema .sec-title{margin-inline:auto;max-width:24ch} .matted-tema .sec-title::after{left:50%;transform:translateX(-50%) scaleX(0);transform-origin:50% 50%} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .matted-tema .sec-title::after{ animation:linie-mij-scroll linear both;animation-timeline:view(); animation-range:entry 6% cover 26%; } } } @keyframes linie-mij-scroll{ from{transform:translateX(-50%) scaleX(0)} to{transform:translateX(-50%) scaleX(1)} } /* ---------- liniile ornamentale, scoase la cerere ---------- Doua feluri, amandoua pe paginile desenate de tema: .section-label::before liniuta de 34px dinaintea etichetei .sec-title::after linia aurie care se desena sub titlu Se sting, nu se sterg. Padding-ul care tinea loc pentru linia de sub titlu se scoate si el, altfel ar ramane un gol sub fiecare titlu. */ .section-label::before{display:none} .section-label{gap:0} .sec-title::after{display:none} .matted-tema .sec-title{padding-bottom:0} /* MATTED-FAQ-START */ /* ============================================================== /faq/: intrebarile in bare, si stingerea regulilor moarte. Sablonul page-faq.php poarta DOUA acordeoane. Cel vechi, in care intrebarea era chiar

, cu caseta lui si un "+" al lui. Cel nou, cu
. Marcajul a trecut demult la
, dar stilurile vechi n-au fost scoase si prind aceiasi

, acum dinauntrul lui : de acolo caseta stransa pe latimea textului si al doilea semn. Aici se face doua lucruri: 1. se sting regulile moarte, si numai cand

sta inauntrul unui ; 2. se deseneaza acordeonul asa cum trebuie sa arate: fiecare intrebare intr-o bara cu colturi rotunjite, cu un "+" in cerc la dreapta; la deschidere "+" se culca in "-" si raspunsul iese lipit de bara, ca o singura piesa. Tot blocul sta intre doua santinele, ca sa poata fi inlocuit intreg data viitoare fara sa se dubleze. ============================================================== */ /* 1. ce a ramas din acordeonul vechi */ .faq-page details.faq-q > summary h3[id^="faq-"]{ border:0;background:none;border-radius:0;padding:0;margin:0; position:static;cursor:inherit; display:block;flex:1 1 auto;min-width:0 } .faq-page details.faq-q > summary h3[id^="faq-"]:hover{border-color:transparent} .faq-page details.faq-q > summary h3[id^="faq-"]::after{content:none} /* Scriptul mort al aceluiasi acordeon baga cate un
gol in fiecare . Tema il ascunde deja, dar o spunem si noi. */ .faq-page details.faq-q > summary .faq-answer{display:none} /* 2. bara */ .faq-page details.faq-q{border-bottom:0;margin:0 0 10px} .faq-page details.faq-q > summary{ display:flex;align-items:center;gap:14px; padding:15px 62px 15px 22px; background:var(--bg2,#141412); border:1px solid rgba(245,240,232,.07); border-radius:14px; transition:border-color 200ms var(--e-in,ease),background-color 200ms var(--e-in,ease) } .faq-page details.faq-q > summary:hover{ border-color:rgba(201,169,110,.34); background:var(--bg3,#191815) } .faq-page details.faq-q > summary:focus-visible{ outline:2px solid var(--gold,#c9a96e);outline-offset:3px } /* 3. semnul: cerc cu bara orizontala, plus bara verticala care se culca */ .faq-page details.faq-q > summary::before{ content:"";position:absolute;right:18px;top:50%; width:30px;height:30px;margin-top:-15px; border:1px solid rgba(201,169,110,.30);border-radius:50%; background:linear-gradient(var(--gold,#c9a96e),var(--gold,#c9a96e)) center/11px 1.5px no-repeat; transition:border-color 200ms ease } .faq-page details.faq-q > summary:hover::before{border-color:rgba(201,169,110,.62)} .faq-page details.faq-q > summary::after{ content:"";position:absolute;right:33px;top:50%; width:1.5px;height:11px;margin:0;padding:0; background:var(--gold,#c9a96e);border-radius:1px;opacity:1; font-size:0;line-height:0; transform:translate(50%,-50%); transition:transform 280ms var(--e,cubic-bezier(.22,1,.36,1)) } .faq-page details.faq-q[open] > summary::after{ content:"";transform:translate(50%,-50%) rotate(90deg) } /* 4. raspunsul, lipit de bara */ .faq-page details.faq-q[open] > summary, .faq-page details.faq-q[open] > .faq-a{border-color:rgba(201,169,110,.22)} .faq-page details.faq-q[open] > summary{ border-bottom-left-radius:0;border-bottom-right-radius:0; border-bottom-color:transparent; background:var(--bg3,#191815) } .faq-page details.faq-q[open] > .faq-a{border-top:0} .faq-page details.faq-q .faq-a{ border:1px solid rgba(245,240,232,.07);border-top:0; border-radius:0 0 14px 14px; background:var(--bg2,#141412); padding:6px 22px 20px } /* 5. fontul: Outfit la intrebari si la raspunsuri. Outfit sta deja in plugin, cu @font-face in matted.css, si pana acum pe /faq/ nu-l folosea nimic. De la schimbarea asta pagina mai cere un fisier de 32.292 de octeti, o singura data, in cache pentru totdeauna. var(--num) e stiva lui: 'Outfit','Manrope', apoi fonturile sistemului. Se pune pe

si pe invelisul raspunsului;

, ,

  • , si celulele de tabel dinauntru il mostenesc, pentru ca nimic din pagina nu le da alt font. */ .faq-page details.faq-q > summary h3[id^="faq-"]{ font-family:var(--num,'Outfit','Manrope',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif); font-weight:500;font-size:1rem;letter-spacing:-.012em;line-height:1.45 } .faq-page details.faq-q .faq-a, .faq-page details.faq-q .faq-a p, .faq-page details.faq-q .faq-a li, .faq-page details.faq-q .faq-a td, .faq-page details.faq-q .faq-a th{ font-family:var(--num,'Outfit','Manrope',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif); letter-spacing:-.004em } @media (max-width:640px){ .faq-page details.faq-q > summary{padding:14px 54px 14px 16px;gap:10px} .faq-page details.faq-q > summary::before{right:14px;width:26px;height:26px;margin-top:-13px} .faq-page details.faq-q > summary::after{right:27px;height:9px} .faq-page details.faq-q .faq-a{padding:6px 16px 18px} } /* MATTED-FAQ-END */ /* MATTED-CORECTII-START */ /* ============================================================== Indreptari gasite uitandu-ma la paginile vii, luate de pe site si randate in browser. Una pe rand, fiecare cu motivul ei. 1. Butonul "View More" din /gallery/ statea in stanga. Tema il centreaza punand invelisul in .sec-center. La noi .sec-center e text-align:left, anume: pe blocurile lungi de text centrarea se citeste prost. Dar cand invelisul nu are inauntru decat un buton, .sec-center nu mai inseamna "text centrat", inseamna "buton centrat", si atunci il centram. Regula prinde numai un
    al carui singur copil e un buton. Numarat pe toate cele 16 pagini ale valului 2, randate una cate una: un singur loc se potriveste, #load-more-wrap din /gallery/, unde butonul statea la 257 de pixeli in stanga centrului. Niciun bloc de text nu e atins. ============================================================== */ .matted-tema div.sec-center:has(> button:only-child), .matted-tema div.sec-center:has(> .btn:only-child), .matted-tema div.sec-center:has(> .btn-primary:only-child), .matted-tema div.sec-center:has(> .btn-outline:only-child){text-align:center} /* ============================================================== 2. Pe /detangling-service-london/, doua randuri de trei carduri sunt scrise in sablon cu stilul pe element: style="display:grid;grid-template-columns:repeat(3,1fr);..." si n-au nicio clasa, deci nicio regula a temei nu le prinde. Pe telefon cele trei coloane nu incap: cardurile refuza sa se stranga sub latimea lor minima, pagina ajunge la 445 de pixeli intr-o fereastra de 390 si al treilea card iese pe langa ecran, cu bara de derulare pe orizontala. Tema insasi rezolva exact acelasi caz in alta parte: .pay-info-steps de pe /payment/ trece de la repeat(3,1fr) la 1fr sub 768 de pixeli. Facem la fel, pentru grilele scrise pe element care n-au clasa. !important e necesar pentru ca stilul sta pe element, nu intr-o foaie. Numarat pe toate cele 16 pagini: se potrivesc trei grile, doua pe /detangling-service-london/ (cele stricate) si una pe /payment/, care si asa era deja pe o coloana sub 768. ============================================================== */ @media (max-width:768px){ .matted-tema main [style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:1fr !important } } /* ============================================================== 3. /reviews/: recenziile Google au lungimi foarte diferite, de la 60 la 3.110 caractere. Masurat cu cele 25 reale in pagina, cardurile ieseau intre 203 si 1.986 de pixeli inaltime: cele lungi umpleau tot ecranul si niciodata nu se vedeau intregi, pentru ca fereastra benzii are 820 de pixeli. Textul NU se scurteaza si NU se rescrie. Ramane intreg in HTML, deci il citesc si motoarele de cautare, si oricine deschide sursa. Se taie numai ce se ARATA, la unsprezece randuri, cu punctele de suspensie pe care le pune singur browserul, iar pagina are deja legatura "Read all 42 reviews on Google" pentru cine vrea recenzia intreaga. ============================================================== */ .matted-tema .rv-text{ display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical; overflow:hidden } /* ============================================================== 4. /reviews/ pe telefon si pe tableta: toate cele 25, nu 9. Banda de recenzii are trei coloane. Tema le aprinde treptat: sub 640 de pixeli se vede numai coloana 1, de la 640 si a doua, de la 1024 si a treia. Pe telefon inseamna 9 recenzii din 25, pe tableta 17. Nu e ceva stricat de noi, asa e facuta banda. Masurat pe pagina vie: la 390 de pixeli, urmarind banda 45 de secunde, adica mai mult decat o bucla intreaga, se vad 9 nume. PRIMA INCERCARE A FOST GRESITA. Am aprins coloanele 2 si 3 si am numarat numele din coloanele care nu mai erau display:none: mi-a dat 25 si am crezut ca e gata. Nu era. Invelisul benzii are max-height 680 si overflow hidden, iar coloanele sunt randuri de grila: aprinse, coloanele 2 si 3 cad sub fereastra si raman taiate. Renumarat cerand ca fiecare card sa atinga cu adevarat dreptunghiul vizibil al ferestrei: tot 9. O verificare care numara elemente in loc de ce se vede minte cu incredere. CE FACE ACUM, sub 1024 de pixeli: - aprinde coloanele 2 si 3, deci toate cele 25 sunt in fisa - opreste miscarea automata: intr-o fereastra care se misca singura nu incape decat o coloana, deci una din doua - scoate masca de sus si de jos, care ar taia primul si ultimul card dintr-o lista pe care o derulezi cu degetul - ascunde a doua trecere, ca fiecare recenzie sa apara o data. A doua trecere exista ca bucla benzii sa nu sara, si ramane asa pe ecran mare - inchide totul intr-o caseta de cel mult 70% din inaltimea ecranului, cu derulare inauntru. DE CE CASETA, si nu lista intreaga in pagina: masurat la 390 de pixeli, lista intreaga face pagina 12.346 de pixeli in loc de 3.996, si impinge butonul de rezervare cu peste opt mii de pixeli mai jos. Cu caseta: toate cele 25 se pot citi, iar pagina ramane la 3.851, adica exact cat era. overscroll-behavior:contain tine degetul in caseta cat timp mai e de derulat inauntru. Pe ecran de 1024 si peste nu se schimba nimic: banda ramane cu trei coloane si cu miscarea ei. ============================================================== */ @media (max-width:1023px){ .matted-tema #rvColumns{ max-height:min(70vh,620px); overflow-y:auto;overscroll-behavior:contain; -webkit-mask-image:none;mask-image:none; border:1px solid rgba(245,240,232,.07); border-radius:16px;padding:12px } .matted-tema .rv-col-2, .matted-tema .rv-col-3{display:block} .matted-tema .rv-track{animation:none;transform:none} .matted-tema .rv-card.rv-dubl{display:none} } /* ============================================================== 5. /causes-study/: procentele culcate de pe graficul inelar. In sablon, cele opt etichete stau intr-un grup rotit: 42% Rotatia de 90 de grade a fost pusa ca sa potriveasca INELUL, dar le roteste si pe texte. De aceea procentele stau culcate pe arc. Pe deasupra sunt 10,88px in rgb(150,138,120), adica maro sters pe fundal aproape negru: nu se citesc oricum. Si sunt DE PRISOS. Legenda din dreapta scrie fiecare procent cu aldine, pe alb, langa numele cauzei. Etichetele de pe inel nu adauga nimic: repeta aceeasi informatie, ilizibil. In plus sunt opt pentru zece felii: cele doua de 0,5% n-au eticheta deloc, deci nici macar nu sunt complete. Reparatia e o SCADERE. Se sterg de pe inel. Raman in HTML, deci nu se pierde nimic pentru cine citeste sursa, dar nu se mai deseneaza. Inelul ramane curat, legenda spune tot. Ce NU facem: nu umblam in SVG. Rotatia aia tine geometria inelului; scoasa gresit, s-ar roti feliile, nu textele. ============================================================== */ .matted-tema .donut-pct{display:none} /* ============================================================== 6. /causes-study/: inelul centrat, si "1,000+" inauntrul lui. Regulile de baza sunt tot ale mele, din tema.css: .donut-chart,.donut-svg{width:100%;max-width:320px;...} .donut-center{text-align:center} Marcajul din sablon are un
    cu numarul si eticheta, asezat dupa . Numele spune limpede unde trebuia sa ajunga, dar nu l-am pozitionat niciodata: fiind static, cade sub inel. Masurat: svg 2586..2906, numarul 2906..2958. Invelisul iese 372 inalt in loc de 320. De aici si senzatia ca inelul nu e centrat: randul grilei are 372, legenda 347, si amandoua se centreaza pe verticala, deci mijlocul inelului cade cu 25 de pixeli mai sus decat mijlocul legendei. CE FACE: invelisul devine reper de pozitionare si patrat (aspect-ratio 1, deci 320 in loc de 372), iar donut-center se aseaza peste el, centrat pe amandoua axele. Numarul si eticheta se stivuiesc. Gaura inelului: r=80 cu grosime 24, deci raza libera 68 din 100, adica 68% din latime. La 320 de pixeli inseamna 217 pixeli liberi. "1,000+" la 1,9rem face vreo 105, "CASES ANALYSED" la 0,68rem cu spatiere face vreo 125. Incap amandoua, fara sa schimb marimile scrise in tema. pointer-events:none ca textul asezat peste inel sa nu fure clicul de la felii, daca li se adauga vreodata ceva. Peste 800 de pixeli, unde grila are doua coloane, se aduna si justify-content:center. Sub 800 tema pune o singura coloana si nu se atinge nimic. ============================================================== */ .matted-tema .donut-chart{ position:relative; aspect-ratio:1; margin:0 auto } .matted-tema .donut-center{ position:absolute;inset:0; display:flex;flex-direction:column; align-items:center;justify-content:center; gap:4px; pointer-events:none } .matted-tema .donut-number{line-height:1} .matted-tema .donut-label{line-height:1.25;max-width:70%;text-align:center} @media (min-width:800px){ .matted-tema .chart-container{justify-content:center} } /* ============================================================== 7. Coloana de text a articolelor, centrata pe ecran mare. Vitalii a cerut sa se centreze graficul si pe PC. Masurand, s-a vazut ca nu graficul e problema, ci coloana in care sta el. Regula de baza e tot a mea, din tema.css: .content-text,.article-body{max-width:68ch} Latime maxima, dar fara margini automate. Deci coloana de 664 de pixeli sta lipita de marginea din stanga a invelisului de 1280. Masurat pe pagina vie: la 1440: coloana de la 136, gol in dreapta 640 la 1920: coloana de la 376, gol in dreapta 880 Nu numai graficul: fiecare paragraf, fiecare titlu si fiecare tabel de pe cele sapte pagini care folosesc .article-body stau la stanga, cu jumatate de ecran gol langa ele. De aceea pe telefon arata centrat si pe PC nu: pe telefon coloana umple ecranul. Verificat inainte sa scriu: pe toate cele sapte pagini .article-body e singurul copil al lui .container, fara niciun frate. Deci nu exista bara laterala pe care marginile automate sa o dea peste cap. .content-text NU se atinge, desi imparte aceeasi regula: el sta deja in invelisuri .sec-center care il centreaza, iar intr-un loc sta intr-o coloana ingusta cat el insusi, unde marginile automate n-ar avea ce misca. Masurat, nu presupus. Cele sapte pagini: causes-study, complete-guide, how-to-detangle-severely-matted-hair, how-to-prevent-hair-from-matting, how-to-detangle-matted-afro-4c-hair, best-hair-mask-for-matted-dry-hair, matted-hair-after-surgery-hospital. ============================================================== */ .matted-tema .article-body{margin-inline:auto} /* ============================================================== 8. Formularul de rezervare, exact cum arata inainte. Prima data l-am imbracat in tokenii nostri: camp plin, raza 2, buton auriu plat ca .btn-primary. Vitalii a cerut sa fie cum a fost, si are dreptate ca e a lui alegerea: formularul e locul in care omul se hotaraste, si nu se schimba fiindca mie mi se pare mai curat asa. CE E MAI JOS NU E SCRIS DE MINE DIN CAP. Am luat pagina veche, i-am scos cele 15 blocuri