/** * cz-content-blocks — set UNIC, reutilizabil, de stiluri de bloc pentru conținut. * ------------------------------------------------------------------------ * Self-contained: culori hardcodate (design system cazino.ro), fără dependență * de tokeni sau de vreun container (.czed etc.). Fiecare stil răspunde la AMBELE * convenții de nume, ca să funcționeze identic pe ORICE template: * - noile clase .cz-* / is-style-cz-* * - clasele vechi .czed-* / is-style-czed-* (compatibilitate: aceleași * blocuri folosite deja pe metodologie merg acum și pe recenzii etc.) * * Se încarcă din inc/cz-content-blocks.php: în editor mereu, iar pe FRONT doar * pe paginile care folosesc efectiv un astfel de stil (pagespeed friendly). * * Componentele de LAYOUT specifice metodologiei (sec, echipă, criterii, * comparație, formula, FAQ) rămân în editorial-page.css — nu sunt „reutilizabile". */ /* ============================ BOX (grup card) ============================ */ :is(.cz-box,.is-style-cz-box){ border:1px solid #E4E9EE; border-radius:16px; background:#fff; box-shadow:0 2px 14px rgba(23,46,82,.05); padding:24px 26px; margin:22px 0; } :is(.cz-box,.is-style-cz-box) > *:first-child{ margin-top:0; } :is(.cz-box,.is-style-cz-box) > *:last-child{ margin-bottom:0; } /* Titlu cu accent — standalone (cz-hacc) sau automat pe h2/h3 din box */ :is(.cz-hacc,.is-style-cz-hacc), :is(.cz-box,.is-style-cz-box) h2, :is(.cz-box,.is-style-cz-box) h3{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:-.02em; color:#203540; } :is(.cz-hacc,.is-style-cz-hacc){ font-size:25px; line-height:33px; margin:0 0 12px; } :is(.cz-box,.is-style-cz-box) h2{ font-size:25px; line-height:33px; margin:0 0 12px; } :is(.cz-box,.is-style-cz-box) h3{ font-size:19px; line-height:27px; margin:20px 0 9px; } :is(.cz-hacc,.is-style-cz-hacc)::before, :is(.cz-box,.is-style-cz-box) h2::before, :is(.cz-box,.is-style-cz-box) h3::before{ content:""; flex:none; border-radius:3px; background:#F36620; } :is(.cz-hacc,.is-style-cz-hacc)::before, :is(.cz-box,.is-style-cz-box) h2::before{ width:6px; height:25px; } :is(.cz-box,.is-style-cz-box) h3::before{ width:5px; height:20px; } /* Tabel în box — striped 2 coloane (etichetă / valoare) */ :is(.cz-box,.is-style-cz-box) .wp-block-table{ margin:16px 0 2px; overflow-x:auto; -webkit-overflow-scrolling:touch; } :is(.cz-box,.is-style-cz-box) .wp-block-table table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; margin:0; border:1px solid #E4E9EE; border-radius:14px; overflow:hidden; } :is(.cz-box,.is-style-cz-box) .wp-block-table th{ text-align:left; padding:12px 18px; font-weight:700; color:#26404C; background:#F5F7F9; border:none; } :is(.cz-box,.is-style-cz-box) .wp-block-table td{ padding:12px 18px; border:none; border-top:1px solid #EEF1F4; color:#3D5866; } :is(.cz-box,.is-style-cz-box) .wp-block-table tr:first-child td{ border-top:none; } :is(.cz-box,.is-style-cz-box) .wp-block-table td:first-child{ font-weight:700; color:#203540; } :is(.cz-box,.is-style-cz-box) .wp-block-table td strong{ color:#F36620; font-weight:700; } /* ============================ PARAGRAFE ============================ */ :is(.cz-note,.is-style-cz-note,.czed-note,.is-style-czed-note){ font-size:13px; line-height:20px; color:#59737F; } :is(.cz-kicker,.is-style-cz-kicker,.czed-kicker,.is-style-czed-kicker){ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#F36620; margin:0 0 8px; } /* ============================ CALLOUT-URI (grup) ============================ */ :is(.cz-callout,.is-style-cz-callout,.czed-callout,.is-style-czed-callout){ margin:16px 0 22px; background:#F0F3F5; border-radius:12px; padding:18px 20px; border-left:3px solid #172E52; } :is(.cz-callout,.is-style-cz-callout,.czed-callout,.is-style-czed-callout) p{ margin:0 0 8px; font-size:14.5px; line-height:23px; color:#26404C; } :is(.cz-callout,.is-style-cz-callout,.czed-callout,.is-style-czed-callout) p:last-child{ margin-bottom:0; } :is(.cz-callout-warm,.is-style-cz-callout-warm,.czed-callout--warm,.is-style-czed-callout-warm){ margin:16px 0 18px; background:#FFF7F2; border:1px solid #FDC9AF; border-radius:12px; padding:20px 22px; } :is(.cz-callout-warm,.is-style-cz-callout-warm,.czed-callout--warm,.is-style-czed-callout-warm) p{ margin:0; font-size:15px; line-height:24px; color:#26404C; } :is(.cz-callout-warm,.is-style-cz-callout-warm,.czed-callout--warm,.is-style-czed-callout-warm) strong, :is(.cz-callout-warm,.is-style-cz-callout-warm,.czed-callout--warm,.is-style-czed-callout-warm) .czed-money{ color:#F36620; font-weight:700; } :is(.cz-callout-ok,.is-style-cz-callout-ok,.czed-callout--ok,.is-style-czed-callout-ok){ margin:16px 0 22px; background:#F5FCF8; border:1px solid #ABEDC7; border-radius:12px; padding:16px 20px; } :is(.cz-callout-ok,.is-style-cz-callout-ok,.czed-callout--ok,.is-style-czed-callout-ok) p{ margin:0; font-size:14.5px; line-height:22px; color:#26404C; padding-left:32px; position:relative; } :is(.cz-callout-ok,.is-style-cz-callout-ok,.czed-callout--ok,.is-style-czed-callout-ok) p::before{ content:""; position:absolute; left:0; top:0; width:22px; height:22px; background:url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* ============================ PANOU NAVY (grup, cu CTA) ============================ */ :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark){ background:#172E52; border-radius:16px; padding:30px 32px; margin:22px 0 26px; } :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark) h2{ font-size:24px; line-height:30px; font-weight:700; letter-spacing:-.02em; color:#fff; margin:0 0 14px; display:flex; align-items:center; gap:12px; } :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark) h2::before{ content:none; } :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark) h2 .pill18{ flex:none; width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; } :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark) p{ margin:0 0 14px; font-size:15.5px; line-height:25px; color:rgba(255,255,255,.85); } /* Buton orange (în panou navy sau standalone) */ :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark) .wp-block-button__link, :is(.is-style-cz-btn,.is-style-czed-btn) .wp-block-button__link, .cz-btn,.czed-btn{ display:inline-flex; align-items:center; gap:8px; background:#F36620; color:#fff !important; font-weight:700; font-size:14.5px; padding:11px 22px; border-radius:10px; text-decoration:none !important; border:none; } :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark) .wp-block-button__link:hover, :is(.is-style-cz-btn,.is-style-czed-btn) .wp-block-button__link:hover, .cz-btn:hover,.czed-btn:hover{ background:#D55515; } /* Titlu cu pastilă „18+" (H2/H3) — pastila e generată de CSS */ :is(h2,h3):is(.cz-h18,.is-style-cz-h18,.czed-h18,.is-style-czed-h18){ display:flex; align-items:center; gap:12px; } :is(h2,h3):is(.cz-h18,.is-style-cz-h18,.czed-h18,.is-style-czed-h18)::before{ content:"18+"; flex:none; width:44px; height:44px; border-radius:999px; background:#172E52; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; } :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark) :is(h2,h3):is(.cz-h18,.is-style-cz-h18,.czed-h18,.is-style-czed-h18)::before{ background:rgba(255,255,255,.12); } /* ============================ LISTE ============================ */ /* Pași numerotați */ .wp-block-list:is(.cz-steps,.is-style-cz-steps,.czed-steps,.is-style-czed-steps){ list-style:none; counter-reset:czstep; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:10px; } .wp-block-list:is(.cz-steps,.is-style-cz-steps,.czed-steps,.is-style-czed-steps) > li{ counter-increment:czstep; position:relative; border:1px solid #DDE6EB; border-radius:12px; padding:16px 18px 16px 66px; font-size:14.5px; line-height:22px; color:#3D5866; } .wp-block-list:is(.cz-steps,.is-style-cz-steps,.czed-steps,.is-style-czed-steps) > li::before{ content:counter(czstep); position:absolute; left:18px; top:16px; width:32px; height:32px; border-radius:999px; background:#FFF1EB; color:#F36620; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; } .wp-block-list:is(.cz-steps,.is-style-cz-steps,.czed-steps,.is-style-czed-steps) > li strong{ display:block; font-weight:700; font-size:15.5px; color:#203540; margin-bottom:2px; } /* Bife verzi */ .wp-block-list:is(.cz-checks,.is-style-cz-checks,.czed-checks,.is-style-czed-checks){ list-style:none; margin:20px 0 26px; padding:0; display:flex; flex-direction:column; gap:10px; } .wp-block-list:is(.cz-checks,.is-style-cz-checks,.czed-checks,.is-style-czed-checks) > li{ position:relative; padding-left:32px; font-size:15px; line-height:23px; color:#26404C; } .wp-block-list:is(.cz-checks,.is-style-cz-checks,.czed-checks,.is-style-czed-checks) > li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px; background:url('data:image/svg+xml;utf8,') no-repeat center/contain; } /* Alerte roșii (cz-alerts / czed-caps) */ .wp-block-list:is(.cz-alerts,.is-style-cz-alerts,.czed-caps,.is-style-czed-caps){ list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; } .wp-block-list:is(.cz-alerts,.is-style-cz-alerts,.czed-caps,.is-style-czed-caps) > li{ position:relative; border:1px solid #F3C6BC; background:#FEF3F0; border-radius:12px; padding:16px 18px 16px 54px; font-size:14px; line-height:21px; color:#3D5866; } .wp-block-list:is(.cz-alerts,.is-style-cz-alerts,.czed-caps,.is-style-czed-caps) > li::before{ content:""; position:absolute; left:18px; top:17px; width:22px; height:22px; background:url('data:image/svg+xml;utf8,') no-repeat center/contain; } .wp-block-list:is(.cz-alerts,.is-style-cz-alerts,.czed-caps,.is-style-czed-caps) > li strong{ display:block; font-weight:700; font-size:15px; color:#203540; margin-bottom:2px; } .wp-block-list:is(.cz-alerts,.is-style-cz-alerts,.czed-caps,.is-style-czed-caps) .lim{ color:#E13011; font-weight:700; } /* Ierarhie numerotată (surse) */ .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src){ list-style:none; counter-reset:czsrc; margin:22px 0 26px; padding:0; border:1px solid #DDE6EB; border-radius:12px; overflow:hidden; } .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src) > li{ counter-increment:czsrc; position:relative; padding:18px 20px 18px 66px; border-top:1px solid #F0F3F5; font-size:13.5px; line-height:20px; color:#3D5866; } .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src) > li:first-child{ border-top:none; background:#F5FCF8; } .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src) > li::before{ content:counter(czsrc); position:absolute; left:20px; top:18px; width:30px; height:30px; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; background:#A8B8BF; } .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src) > li:nth-child(1)::before{ background:#09AE4E; } .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src) > li:nth-child(2)::before{ background:#172E52; } .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src) > li:nth-child(3)::before{ background:#59737F; } .wp-block-list:is(.cz-src,.is-style-cz-src,.czed-src,.is-style-czed-src) > li strong{ display:block; font-weight:700; font-size:15px; color:#203540; } /* Scală de note (ladder) */ .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder){ list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:8px; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li{ display:flex; align-items:center; gap:16px; border-radius:12px; padding:14px 20px; background:#fff; border:1px solid #DDE6EB; font-weight:700; font-size:15px; color:#203540; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li strong{ flex:none; width:82px; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li:nth-child(1){ background:#F5FCF8; border-color:#ABEDC7; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li:nth-child(1) strong{ color:#067434; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li:nth-child(2) strong{ color:#2F80ED; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li:nth-child(3) strong{ color:#B5720C; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li:nth-child(4) strong{ color:#B5720C; } .wp-block-list:is(.cz-ladder,.is-style-cz-ladder,.czed-ladder,.is-style-czed-ladder) > li:nth-child(5) strong{ color:#E13011; } /* Listă cu iconițe (cz-icons / czed-upd); iconiță per element via is-style-*-ico-* */ .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd){ list-style:none; margin:14px 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li{ position:relative; padding-left:48px; font-size:14px; line-height:21px; color:#3D5866; } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li strong{ display:block; font-weight:700; font-size:15px; color:#203540; } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li::before{ content:""; position:absolute; left:0; top:0; width:34px; height:34px; border-radius:999px; background-color:#F0F3F5; background-repeat:no-repeat; background-position:center; background-size:18px 18px; background-image:url('data:image/svg+xml;utf8,'); } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li:is(.cz-ico-refresh,.is-style-cz-ico-refresh,.is-ico-refresh,.is-style-czed-ico-refresh)::before{ background-color:#E1F4E9; background-image:url('data:image/svg+xml;utf8,'); } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li:is(.cz-ico-doc,.is-style-cz-ico-doc,.is-ico-doc,.is-style-czed-ico-doc)::before{ background-color:#FFF1EB; background-image:url('data:image/svg+xml;utf8,'); } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li:is(.cz-ico-alert,.is-style-cz-ico-alert,.is-ico-alert,.is-style-czed-ico-alert)::before{ background-color:#FEF3F0; background-image:url('data:image/svg+xml;utf8,'); } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li:is(.cz-ico-check,.is-style-cz-ico-check,.is-ico-check,.is-style-czed-ico-check)::before{ background-color:#E1F4E9; background-image:url('data:image/svg+xml;utf8,'); } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li:is(.cz-ico-lock,.is-style-cz-ico-lock,.is-ico-lock,.is-style-czed-ico-lock)::before{ background-color:#FEF3F0; background-image:url('data:image/svg+xml;utf8,'); } .wp-block-list:is(.cz-icons,.is-style-cz-icons,.czed-upd,.is-style-czed-upd) > li:is(.cz-ico-star,.is-style-cz-ico-star,.is-ico-star,.is-style-czed-ico-star)::before{ background-color:#FFF1EB; background-image:url('data:image/svg+xml;utf8,'); } @media(max-width:600px){ :is(.cz-box,.is-style-cz-box){ padding:18px 16px; } :is(.cz-hacc,.is-style-cz-hacc),:is(.cz-box,.is-style-cz-box) h2{ font-size:21px; line-height:28px; } :is(.cz-dark,.is-style-cz-dark,.czed-dark,.is-style-czed-dark){ padding:24px 20px; } }