/* ===================================================================== Lab-404 — chrome-ul comun al pasilor din coș (domeniu + configurare) --------------------------------------------------------------------- Tokenii, fundalul, layoutul cu sidebar, pilula de pas, titlul, butoanele si plasa pentru .w-hidden sunt IDENTICE pe cei doi pasi. Stateau in lab404-dom.css, iar pasul de configurare le-ar fi duplicat - 460 de linii copiate care apoi se despart una de alta la prima modificare. Selectoarele sunt scrise cu :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) fiindca :is() ia specificitatea celui mai tare argument, adica a unei singure clase - exact cat avea .lab404-dom singur. Asa nu se schimba nimic in cascada, iar regulile prefixate cu ID care bat tema (vezi comentariile de mai jos) rămân la aceeasi putere. NUANTA fundalului NU e aici: fiecare pas o pune in fisierul lui. Domeniu 162 (verde-turcoaz) · configurare 30 (ambra) · coș 168 (teal) · finalizare 222 (azur) · pachete 280. DOVADA CA E REALA: la portarea transferului am uitat-o, iar pagina a ieșit text pe fundal negru - fara panouri, fara grila, fara butoane. CAND ADAUGI O PAGINA NOUA, trece clasa ei in lista din :is(). Altfel pagina nu primeste NIMIC de aici - nici tokenii - iar var(--sp-3) & co. rămân nerezolvate, deci proprietatile care le folosesc se ignora in silence. Asa a ieșit coșul fara spatii intre "Modifică" si "Șterge": regula avea gap: var(--sp-3), dar --sp-3 nu exista, deci gap-ul calculat era "normal". Se incarca INAINTEA fisierului de pagina. ===================================================================== */ /* ===================================================================== Lab-404 — pasul de domeniu (configureproductdomain) --------------------------------------------------------------------- Port al designului aprobat din WHMCS-tests/domB-segmentat.html, cu aceleasi clase ca in prototip: .pagina, .sidebar-whmcs, .panou, .segment (aici .domain-selection-options), .rand-caută, .grup-domeniu, .zona-text. Marcajul il scrie templates/orderforms/lab404_cart/configureproductdomain.tpl. Trei lucruri de reținut: 1. Tokenii stau pe invelisul paginii, nu pe :root. Tema foloseste si ea --bg, dar cu alt sens (#0b1220, suprafata de card); pe :root am fi schimbat toate cardurile din zona de client. 2. Layoutul segmentat se obține fara sa mutam nimic in DOM. JS-ul WHMCS cere panoul INAUNTRU opțiunii lui, deci .option primește `display: contents`: eticheta si panoul devin celule ale grilei din .domain-selection-options. grid-row e fixat explicit, altfel plasarea automata pune panoul intre etichete. Consecinta: .option nu deseneaza nimic, deci vizualul merge pe `> label`. 3. Radio-urile trec prin iCheck, care le inlocuiește cu div.iradio_* si lasa inputul real cu opacity 0. Bulina se deseneaza pe wrapperul lui. ===================================================================== */ /* .modal-cos-lab e in lista fiindca modalele de confirmare se mută la (vezi viewcart.tpl: altfel raman prinse in contextul de stivuire al fundalului si backdropul le acopera). Iesind de sub wrapperul paginii, ies si de sub tokenii lui: fara linia asta, var(--surface), var(--line) si var(--r-lg) nu mai exista in modal, deci dialogul apărea ca un dreptunghi gri, fara colțuri rotunde si fara contur. */ :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret, .modal-cos-lab) { --bg: #030712; --surface: #0b1220; --surface-2: #0f172a; --cyan: #06b6d4; --cyan-light: #22d3ee; --cyan-pale: #67e8f9; --violet: #8b5cf6; /* Contrastul fiecarei trepte pe --bg e verificat: ink 19.4:1 · ink-2 12.6:1 · ink-3 7.9:1 · ink-4 5.8:1 */ --ink: #f8fafc; --ink-2: #cbd5e1; --ink-3: #94a3b8; --ink-4: #7c8aa0; --line: rgba(255, 255, 255, .10); --line-soft: rgba(255, 255, 255, .06); --line-strong: rgba(255, 255, 255, .20); --ok: #22c55e; --err: #f87171; /* 'Inter' vine dinadins imediat dupa Space Grotesk, inaintea fontului de sistem. Space Grotesk are doar latin + latin-ext + vietnameza: nu are chirilice si nu are grecesti. Deci pe rusa, ucraineana, macedoneana sau greaca titlurile cadeau pe fontul sistemului, iar pagina isi schimba vizibil aerul la comutarea limbii - exact ce s-a reclamat. Inter are chirilice, grecesti si vietnameza, e deja incarcat si e tot fontul nostru, deci nu costa nicio cerere in plus si nu aduce un al treilea caracter de scris in pagina. Araba, ebraica si CJK rămân pe fontul sistemului: nici Space Grotesk, nici Inter nu au acele alfabete. Ar fi nevoie de Noto Sans Arabic / Hebrew / SC, cate o familie pentru fiecare. */ --font-display: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'Fira Code', ui-monospace, Consolas, monospace; --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-lg: 1.25rem; --t-xl: 1.5625rem; --t-2xl: 1.953rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --ease-out: cubic-bezier(.22, 1, .36, 1); color: var(--ink-2); font-family: var(--font-body); /* 1,6, ca pe paginile de pachete. Cu 1,65, fiecare text care nu-si declara propriul line-height ieșea cu ~0,7px pe rând mai inalt decat acelasi text de pe pagina de pachete: bifele din cardul de plan, etichetele, notele. Nu se numeste, dar cand pui paginile una langa alta se vede ca nu respira la fel. */ line-height: 1.6; } /* ===================================================================== FUNDALUL — portat din WibePress (assets/css/style.css:1945-1990) Nuanta 162 e cea a secțiunii "pricing". Se pune pe section#main-body, nu pe un element fixed cu z-index negativ ingropat in pagina: acela cade sub fundalurile parintilor nepoziționați. ===================================================================== */ @property --sec-h { syntax: ""; inherits: true; initial-value: 220; } body:has(:is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret)) section#main-body { position: relative; z-index: 0; background-image: /* Saturatia, luminozitatea, transparenta si opririle vin din reteta comuna din custom.css. Aici rămâne doar nuanta paginii, cu cele doua abateri de +22 si -18 grade care dau adancime petelor. */ radial-gradient(74vw 64vh at 82% 6%, hsl(var(--sec-h) var(--sc-s1) var(--sc-l1) / var(--sc-a1)), transparent var(--sc-stop1)), radial-gradient(62vw 58vh at 6% 50%, hsl(calc(var(--sec-h) + 22) var(--sc-s2) var(--sc-l2) / var(--sc-a2)), transparent var(--sc-stop2)), radial-gradient(96vw 58vh at 50% 104%, hsl(calc(var(--sec-h) - 18) var(--sc-s3) var(--sc-l3) / var(--sc-a3)), transparent var(--sc-stop3)); background-attachment: fixed; } /* Plasa de 88px, pe pseudo-element: masca ei nu trebuie sa atinga gradientul */ /* Checkout-ul e scos dinadins din lista: acolo pagina e numai formulare - adresa, metoda de plata, cardul, comentariile - iar reteaua din spate trece pe sub campuri si sub casutele de bifat, si nu se mai intelege ce e camp si ce e fundal. Pe celelalte pagini de cos, unde continutul e in carduri opace, reteaua ramane. */ body:has(:is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret)) section#main-body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--sc-plasa) 1px, transparent 1px), linear-gradient(90deg, var(--sc-plasa) 1px, transparent 1px); background-size: 88px 88px; background-attachment: fixed; -webkit-mask-image: radial-gradient(120vw 90vh at 50% 42%, #000 10%, transparent 72%); mask-image: radial-gradient(120vw 90vh at 50% 42%, #000 10%, transparent 72%); } /* Banda de 1240px utili, ca pe site. Foaia se incarca doar aici. */ body:has(:is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret)) .container { width: min(1270px, 100% - 3rem); max-width: none; } /* Breadcrumb-ul are un singur nivel care nu duce nicaieri; pagina are titlu */ body:has(:is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret)) nav.master-breadcrumb { display: none; } /* --- Revelarea la scroll --------------------------------------------- */ :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .fx-i { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .5s linear, transform .6s cubic-bezier(.2, .8, .3, 1); transition-delay: calc(var(--n, 0) * 55ms); } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .fx-i.fx-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .fx-i { opacity: 1; transform: none; transition: none; } } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .doar-citit-de-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ===================================================================== LAYOUTUL ===================================================================== */ /* Fara padding sus: pe pagina de pachete .pagina porneste de la 0, deci categoriile si titlul incepeau cu 32px mai jos aici, iar la "Continuare" din pachete se vedea saltul. Amandoua pornesc acum la 131px de la marginea de sus a paginii. */ :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .pagina { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; padding: 0 0 var(--sp-12); } @media (max-width: 860px) { :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .pagina { grid-template-columns: 1fr; } } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .sidebar-whmcs { position: sticky; top: calc(var(--bara-h, 0px) + var(--sp-4)); display: grid; gap: var(--sp-4); align-content: start; } @media (max-width: 860px) { :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .sidebar-whmcs { position: static; } } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-titlu { margin: 0; padding: var(--sp-4); background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line-soft); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-lista { display: grid; } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-lista a { display: flex; align-items: center; /* space-between, ca in lab404-pg-pagina.css: eticheta la stanga, insigna la dreapta. Trebuie sa fie identic cu pagina de produse. */ justify-content: space-between; gap: var(--sp-2); padding: .6rem var(--sp-4); border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); color: var(--ink-3); transition: color .18s var(--ease-out), background-color .18s var(--ease-out); } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-lista a:last-child { border-bottom: 0; } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-lista a:hover { /* Bleu, ca pe paginile de pachete: aceeasi bara laterala, acelasi hover. */ background: rgba(6, 182, 212, .08); color: var(--cyan-pale); } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-lista .badge { margin-left: auto; } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-lista a[aria-current="page"] { position: relative; background: rgba(6, 182, 212, .1); color: var(--cyan-pale); font-weight: 500; } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-lista a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cyan); } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-corp { padding: var(--sp-4); } :is(.lab404-dom, .lab404-cfg, .lab404-cos, .lab404-chk, .lab404-dcf, .lab404-dtr, .lab404-ren, .lab404-dpret) .panou-corp select { width: 100%; appearance: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-family: var(--font-body); font-size: var(--t-sm); padding: .4rem 2rem .4rem .6rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; } /* Lista derulanta a unui