/* ===================================================================== Lab-404 — paginile de cont: autentificare, creare cont, resetare parola --------------------------------------------------------------------- Se incarca din login.tpl, clientregister.tpl si password-reset-container.tpl, dupa lab404-pg-base.css (de unde vin tokenii). NUANTA e azurul pasului de finalizare (--sec-h: 222), nu culoarea vreunei game de produse: contul e zona de administrare, nu de vanzare. Toate accentele de aici - marginea câmpului la focus, bifele, legaturile - se calculeaza din ea, deci se schimba dintr-un singur loc. FOAIA NU DECLARA TOKENI. Ii poarta clasa .lab404-pachete pusa pe invelisul din sablon. In tema, tokenii stau pe wrapperul paginii, nu pe :root - vezi comentariul din lab404-pg-base.css - iar fara acea clasa fiecare var(--...) de mai jos ar cadea in tacere, si nu cu o eroare, ci cu un câmp fara chenar. Ordinea in fisier: intai scena si banda (cadrul), apoi bucatile comune (câmpuri, butoane, legaturi), apoi cele doua asezari - a4 pentru autentificare, a2 pentru celelalte doua - si la final piesele randate de WHMCS peste care nu avem control de marcaj (mesaje, Google, captcha). ===================================================================== */ /* ===================================================================== 1. SCENA — fundalul, pe toata latimea --------------------------------------------------------------------- Fundalul nu se poate pune pe invelisul din sablon: acela sta inauntrul .container-ului WHMCS, deci petele si plasa s-ar opri la marginea benzii si pagina ar arata ca o hartie lipita pe alta. Il punem pe #main-body, care e singurul element de latimea ferestrei intre antet si subsol. Selectia se face prin data-tpl de pe (vezi header.tpl): e numele pasului randat de WHMCS, deci tintim exact cele trei pagini, fara sa inventam clase pe body pentru fiecare sablon. ===================================================================== */ body[data-tpl="login"] #main-body, body[data-tpl="clientregister"] #main-body, body[data-tpl="password-reset-container"] #main-body { position: relative; isolation: isolate; padding: 0; background-color: #030712; --sec-h: 222; /* Doar NUANTELE. Cat de aprinsa e fiecare pata - saturatie, luminozitate, transparenta, oprire - vine din reteta comuna din custom.css, ca sa nu existe doua definitii ale aceluiasi fundal care se despart una de alta la prima ajustare. Azur, cu abateri spre cyan si indigo. */ --sc-h1: 222; --sc-h2: 200; --sc-h3: 240; } /* Cele trei pete de lumina, ca pe restul site-ului. */ body[data-tpl="login"] #main-body::before, body[data-tpl="clientregister"] #main-body::before, body[data-tpl="password-reset-container"] #main-body::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(74vw 64vh at 82% 6%, hsl(var(--sc-h1) var(--sc-s1) var(--sc-l1) / var(--sc-a1)), transparent var(--sc-stop1)), radial-gradient(62vw 58vh at 6% 50%, hsl(var(--sc-h2) var(--sc-s2) var(--sc-l2) / var(--sc-a2)), transparent var(--sc-stop2)), radial-gradient(96vw 58vh at 50% 104%, hsl(var(--sc-h3) var(--sc-s3) var(--sc-l3) / var(--sc-a3)), transparent var(--sc-stop3)); } /* Plasa de pătrate, care se stinge spre partea de jos. */ body[data-tpl="login"] #main-body::after, body[data-tpl="clientregister"] #main-body::after, body[data-tpl="password-reset-container"] #main-body::after { content: ''; position: absolute; inset: 0 0 40% 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), linear-gradient(var(--sc-plasa-fin) 1px, transparent 1px), linear-gradient(90deg, var(--sc-plasa-fin) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; mask-image: linear-gradient(#000 0%, #000 26%, transparent 100%); -webkit-mask-image: linear-gradient(#000 0%, #000 26%, transparent 100%); } /* --- Firimitura --- "Portal clienți / Contul meu / Resetare parolă" nu descrie un drum pe care cineva l-a parcurs: omul vine de pe un link din e-mail sau de pe butonul din antet, iar in "Contul meu" n-a fost si nu poate intra - tocmai de aceea e aici. O cale de intoarcere catre pagini in care nu poti ajunge fara sa fii logat e o promisiune falsa, si in plus taie in doua fundalul paginii chiar sub antet. Pe autentificare nu se vedea oricum: acolo WHMCS nu are ce sa scrie in ea. */ body[data-tpl="login"] .master-breadcrumb, body[data-tpl="clientregister"] .master-breadcrumb, body[data-tpl="password-reset-container"] .master-breadcrumb { display: none; } /* --- Banda --- Bootstrap da .container 1140px la ecran mare, dar antetul nostru foloseste 1270px. Cu 1140 aici, logo-ul si meniul incepeau vizibil mai la stânga decat conținutul paginii - doua margini diferite pe acelasi ecran. Cu 1270, marginea din stânga a titlului cade exact sub marginea din stânga a logo-ului. Se scrie doar pentru cele trei pagini, nu global: restul zonei de client e inca pe 1140, iar mutarea ei e o schimbare separata, de facut cu tot cu verificarea tabelelor si a cardurilor de acolo. */ body[data-tpl="login"] #main-body > .container, body[data-tpl="clientregister"] #main-body > .container, body[data-tpl="password-reset-container"] #main-body > .container { max-width: 1270px; } /* Pe creare cont, WHMCS imparte rândul in doua: o coloana de bara laterala si una de conținut. Panoul din bara l-am scos din hook (vezi lab404_meniu_cont.php) - avea aceleasi doua legaturi pe care pagina le are deja - dar coloana goala rămâne in grila si ne-ar lasa conținutul pe trei sferturi de latime. :not(:has(.card)) o scoate doar cand chiar e goala: daca maine se adauga acolo un panou care conteaza, coloana reapare singura si nimic nu se pierde. */ body[data-tpl="clientregister"] #main-body .row > [class*="col-lg-4"]:not(:has(.card)) { display: none; } body[data-tpl="clientregister"] #main-body .row > .primary-content { flex: 0 0 100%; max-width: 100%; } /* ===================================================================== 2. CAMPURI, BUTOANE, LEGATURI ===================================================================== */ /* Formularul e el insusi o grila, cu acelasi pas ca al coloanei din care face parte: asa câmpurile, bifa si butonul stau la distante egale, indiferent daca sunt fratii sau copiii coloanei. */ .cont-form { display: grid; gap: var(--sp-6); } .cont-camp { display: grid; gap: .45rem; } .cont-camp > label { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); margin: 0; } .cont-camp-cutie { position: relative; display: flex; } /* Iconițele sunt SVG inline, ca in antet, nu Font Awesome: acolo unde stau ele - lipite de marginea din stânga a câmpului, la 17px - un glif de icon-font are alt cantar optic decat desenele Tabler folosite in restul paginii. */ .cont-camp-cutie .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-4); pointer-events: none; } .cont-camp input { flex: 1 1 auto; min-width: 0; padding: .85rem 1rem .85rem 2.6rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-family: var(--font-body); font-size: var(--t-base); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); } .cont-camp input::placeholder { color: var(--ink-4); } .cont-camp input:focus { outline: none; border-color: hsl(var(--sec-h) 85% 60%); background: var(--surface); box-shadow: none; } /* Butonul de dezvaluire a parolei, la capatul din dreapta al câmpului. Marcajul WHMCS il cere (.btn-reveal-pw il cauta scripts.min.js), deci il pastram, doar ca il facem sa arate a iconița, nu a al doilea buton. */ .cont-ochi { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--ink-4); cursor: pointer; } .cont-ochi:hover { color: var(--ink-2); } .cont-ochi .ic { width: 17px; height: 17px; } .cont-buton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; padding: .95rem 1.6rem; background: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%); border: 0; border-radius: var(--r-md); color: #fff; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); } .cont-buton:hover, .cont-buton:focus { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(6, 182, 212, .6); } .cont-bifa { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); cursor: pointer; } .cont-bifa input { width: 16px; height: 16px; margin: 0; accent-color: hsl(var(--sec-h) 85% 55%); } .cont-legaturi { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--t-sm); } .cont-legaturi a { color: hsl(var(--sec-h) 85% 72%); text-decoration: none; } .cont-legaturi a:hover { color: hsl(var(--sec-h) 85% 80%); text-decoration: underline; } /* Linia cu "sau", intre autentificarea cu parola si cea cu Google. */ .cont-desparte { display: flex; align-items: center; gap: 1rem; color: var(--ink-4); font-size: var(--t-xs); text-transform: lowercase; } .cont-desparte::before, .cont-desparte::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); } /* ===================================================================== 3. LISTELE CU BIFE --------------------------------------------------------------------- Aceleasi pe toate trei paginile: acelasi desen de bifa, aceeasi marime de litera, aceeasi culoare. Diferenta dintre o lista principala si una secundara o face DOAR treapta de gri a textului - vezi mai jos de ce. ===================================================================== */ .cont-titlu-lista { font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--sp-4); } .cont-lista { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; } .cont-lista li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--t-base); color: var(--ink-2); } .cont-lista .ic { width: 18px; height: 18px; color: hsl(var(--sec-h) 85% 65%); margin-top: .15rem; } /* Un pas din "cum functioneaza": rândul gros deasupra, explicația dedesubt. */ .cont-pas { display: grid; gap: .15rem; } .cont-pas b { font-weight: 600; color: var(--ink); } /* 15px, nu var(--t-sm) = 14px: o singura unitate, dar sub ea explicațiile cadeau sub pragul la care se citesc dintr-o privire si toata coloana din dreapta parea mai slaba decat titlul si butonul din stânga. */ .cont-pas span { font-size: .9375rem; color: var(--ink-3); line-height: 1.5; } /* A doua lista se deosebeste DOAR prin culoarea textului. Avusese si litera mai mica, si bifa mai mica, si bifa mai stinsa - trei diferente deodata, iar rezultatul nu se citea ca "mai putin important", ci ca decalat: o bifa de 15px intr-o coloana de 22px cade in alt loc optic decat una de 18px, si cele doua liste pareau ca pornesc din puncte diferite. Diferența de rang o face deja forma - prima lista are titluri ingrosate cu explicație dedesubt, a doua e un singur rând - deci ajunge o treapta de gri. */ .cont-lista.secundara li { color: var(--ink-3); } /* ===================================================================== 4. ASEZAREA a4 — AUTENTIFICARE --------------------------------------------------------------------- Nicio caseta: titlul mare in stânga, câmpurile in dreapta, despartite de doua linii subtiri. Pagina nu arata ca un formular pus peste un site, ci ca o pagina care iți cere doua lucruri. ===================================================================== */ .cont-a4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; padding: 4rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } @media (max-width: 900px) { .cont-a4 { grid-template-columns: 1fr; padding: 2.5rem 0; } } /* Titlul si propoziția, cu 30px mai jos decat câmpurile din dreapta. Aliniate sus, cele doua coloane porneau de la aceeasi linie, iar titlul - de trei ori mai mare decat eticheta din dreapta - trăgea ochiul in sus si lasa impresia ca partea dreapta a inceput mai tarziu. Coborat, titlul se aseaza in dreptul primului câmp, nu al etichetei lui. Valoarea nu e din ochi: inalțimea etichetei (14px x 1.6 = 22,4px) plus gapul dintre ea si câmp (.45rem = 7,2px), rotunjita. Aceeasi valoare e folosita si de asezarea a2, ca titlurile celor trei pagini sa porneasca de la aceeasi inalțime - daca se schimba aici, se schimba si acolo. */ .cont-a4-stanga { padding-top: 30px; } @media (max-width: 900px) { .cont-a4-stanga { padding-top: 0; } } .cont-a4-dreapta { display: grid; gap: var(--sp-6); } /* Cele trei rânduri cu bife de sub propoziție. Singurul lucru scris aici e distanța fata de ea; marimea, culoarea si bifa vin neatinse din .cont-lista. */ .cont-a4-stanga .cont-lista { margin-top: 2.25rem; } /* ===================================================================== 5. ASEZAREA a2 — CREARE CONT SI RESETARE PAROLA --------------------------------------------------------------------- Formular in stânga, iar in dreapta raspunsul la intrebarea pe care si-o pune omul acolo: la creare cont, "cum imi fac cont?"; la resetare, "ce se intampla dupa ce apas?". ===================================================================== */ .cont-a2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); /* Redus de la 5rem: cu titlul si butonul mari in stânga, coloana din dreapta ramanea singura peste un gol lat si parea firava. */ gap: clamp(2rem, 4.5vw, 4rem); align-items: start; /* Cei 30px in plus sunt cei de pe autentificare (vezi .cont-a4-stanga): acolo titlul e coborat fata de marginea randului ca sa se alinieze cu primul câmp, aici nu exista câmp langa care sa se alinieze, deci coborarea o face randul insusi. Asa, titlurile celor trei pagini stau pe aceeasi linie. */ padding: calc(4rem + 30px) 0 4rem; min-height: 60vh; } /* Pe o coloana, cei 30px dispar odata cu motivul lor: nu mai exista doua coloane care sa se alinieze intre ele. */ @media (max-width: 900px) { .cont-a2 { grid-template-columns: 1fr; padding: 2.5rem 0; } } /* 34rem: sub ea, "Creează-ți contul" nu incape pe un rând la 3,6rem; peste ea, câmpurile devin benzi lungi si greu de citit. Coloana din grila e mai lata, deci limita de aici e o alegere de latime de rând, nu o constrangere. */ .cont-a2-formular { display: grid; gap: var(--sp-6); max-width: 34rem; } .cont-a2-formular > p { margin: 0; font-size: var(--t-base); line-height: 1.65; color: var(--ink-3); } /* Pe resetare, coloana din dreapta se aseaza la mijlocul celei din stânga. Acolo stânga e inalta - titlu mare, trei rânduri de explicație, câmp, buton, legatura - iar dreapta are trei rânduri scurte. Aliniate amandoua sus, coloana din dreapta se termina la jumatatea celeilalte si lasa dedesubt un gol cat ea insasi, care se citeste ca text lipsa. La mijloc, cele trei rânduri se aseaza in dreptul câmpului si al butonului - adica exact langa lucrul despre care vorbesc. Doar pe resetare: la creare cont raportul e invers (dreapta e mai inalta decat stânga), iar acolo centrarea ar cobori pasii sub buton. */ .cont-a2-langa { align-self: center; } @media (max-width: 900px) { .cont-a2-langa { align-self: start; } } /* Al doilea bloc din coloana din dreapta, cu linia care il desparte de primul. Fara ea, al doilea titlu parea inca un pas din primul sir. --line (10% alb), nu --line-soft (6%): pe fundalul asta, 6% se pierde complet. */ .cont-bloc-doi { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--line); } /* Rândul de incheiere. Fara linie deasupra: una exista deja intre liste, iar a doua ar taia coloana in trei si ar face din propoziția asta o a treia sectiune, cand ea e doar o incheiere. */ .cont-subsol { margin: var(--sp-8) 0 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-4); } /* Scurtaturile de sub butonul mare, pentru cine stie deja ce vrea. Scrise mic si pe un singur rând: sunt o iesire laterala, nu drumul principal. nowrap pe legaturi fiindca "Business E-mail" e numele unui serviciu - rupt in doua, se citea ca doua scurtaturi. Rândul se rupe intre legaturi, nu prin ele. */ .cont-scurtaturi { margin: 0; font-size: var(--t-sm); color: var(--ink-4); line-height: 1.9; } .cont-scurtaturi a { color: hsl(var(--sec-h) 85% 72%); text-decoration: none; white-space: nowrap; } .cont-scurtaturi a:hover { text-decoration: underline; } .cont-scurtaturi .sep { opacity: .45; margin: 0 .35rem; } /* ===================================================================== 6. TITLURILE — o singura definiție pentru toate trei paginile --------------------------------------------------------------------- Aceeasi marime peste tot. Doua marimi diferite nu se vad una langa alta, dar se simt la trecerea dintr-o pagina in alta: aceeasi pagina pare sa-si schimbe rangul intre pași. ===================================================================== */ .cont-a4-stanga h1, .cont-a2-formular h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); margin: 0; } .cont-a4-stanga h1 { margin-bottom: var(--sp-4); } .cont-a4-stanga p { margin: 0; font-size: var(--t-base); line-height: 1.65; color: var(--ink-3); max-width: 32ch; } /* ===================================================================== 7. PIESELE RANDATE DE WHMCS --------------------------------------------------------------------- Peste marcajul de aici n-avem control: vine din includes-urile temei parinte sau, in cazul Google, din SDK-ul lor. Le asezam, nu le rescriem. ===================================================================== */ /* Mesajele de eroare si de succes (parola gresita, cont blocat, "ți-am trimis un e-mail"). Bootstrap le da fundal deschis si text inchis - ilizibil pe fundalul nostru. Le aducem la aceeasi familie ca restul paginii: fundal stins in culoarea mesajului, chenar de aceeasi culoare, text deschis. */ .cont-mesaje .alert { margin: 0; padding: .85rem 1rem; border-radius: var(--r-md); border: 1px solid; font-size: var(--t-sm); line-height: 1.55; } .cont-mesaje .alert-danger { background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .35); color: #fca5a5; } .cont-mesaje .alert-success { background: rgba(34, 197, 94, .10); border-color: rgba(34, 197, 94, .35); color: #86efac; } .cont-mesaje .alert-warning { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .35); color: #fcd34d; } .cont-mesaje .alert-info { background: rgba(34, 211, 238, .10); border-color: rgba(34, 211, 238, .35); color: #67e8f9; } .cont-mesaje .alert a { color: inherit; text-decoration: underline; } /* Butonul Google. Marcajul si aspectul lui sunt ale Google - regulile lor de brand nu permit restilizare dincolo de optiunile documentate in SDK. Ce alegem noi e doar locul din pagina si latimea, pe care SDK-ul o accepta ca parametru (vezi data-width din sablon). Zona din jur o facem sa nu mai arate a bloc Bootstrap lipit dedesubt. */ .cont-google { display: grid; justify-items: stretch; } .cont-google .social-signin-btns { display: flex; justify-content: center; } .cont-google .providerPreLinking { width: 100%; } /* Casetele de stare ale modulului de conturi legate raman ascunse pana cand JS-ul lor le arata - clasa e a WHMCS, o respectam. */ .cont-google .w-hidden { display: none; } /* Captcha, daca se activeaza candva: sa nu iasa din coloana pe ecran mic. */ .cont-captcha { max-width: 100%; overflow-x: auto; } /* WHMCS pune sub formularul de autentificare un paragraf cu link catre whmcs.com. Pe pagina noastra nu-si are locul, iar site-chrome.css il scoate deja pe celelalte pagini; aici selectorul de acolo nu prinde, fiindca marcajul e altul. */ body[data-tpl="login"] .primary-content > p:has(> a[href*="whmcs.com"]) { display: none; }