/* * bdr-tema.css · La imatge nova (brandbook 2026, H45) a les pantalles de WHMCS que no son de la botiga nova · bdr-efg · 2026-10-08 * * QUE FA * Dona forma a la base comuna del pla 07_Web/06_Resto_del_tema_marca_2026.md (fase 0): migues i capcalera de pagina * (includes/bdr_tema_cap.tpl), navegacio lateral de l'area de client (includes/bdr_tema_lateral.tpl), estats * (includes/bdr_tema_estat.tpl) i els components de Bootstrap i de WHMCS d'aquestes pantalles: botons, tarjetes, * formularis, adjunts, taules i DataTables (amb les files com a tarjetes per sota de 768 px a les taules bdrt-taula), * etiquetes d'estat, avisos, buits, paginacio, l'ajuda humana i les dues pantalles de prova (contacte i avis legal). * Tot penja de body.bdrw.bdrt: bdrw nomes existeix amb la web nova i bdrt nomes el posa header.tpl a les pantalles de * la llista (includes/bdr_tema_pantalla.tpl). Les pagines de producte, la cistella, el pagament i la factura de la botiga * nova, i la portada, no porten bdrt: aqui res no les toca. * Colors: nomes els de la paleta, per les variables de bdr-web.css (--navy, --vora, --alterna, --exit...) i de * bdr-botiga.css (--bdrx-*), que header.tpl tambe carrega en aquestes pantalles. Cap color nou. Contrast (WCAG 2.2 AA), * calculat a codigo/web4/proves/tema.test.js amb els valors d'aqui i de les dues fulles: * - estats: #1F6F46 sobre #E7F4EC, #8A5A00 sobre #FFF6E0, #B42318 sobre #FDECEC i #3D3D3D sobre #F3F1EE, tots per * sobre de 4,5:1 a 13 px; * - boto principal: blanc sobre #EB5420 nomes en negreta de 19 px (text gran), com a la botiga; * - vores dels camps #8A8580 (3,58:1 sobre blanc) i focus de 3 px #3D3D3D (10,86:1). * Amb colors forcats i moviment reduit, com bdr-web.css i bdr-botiga.css (al final). * * Fases 3 i 1 (09/10/2026): els formularis d'acces (tarjeta, contrasenya amb el boto de mostrar-la, caselles natives, * mesurador de la contrasenya, el modul del segon factor i la finestra del generador de contrasenyes), els comptes, la * pagina no trobada, els preus dels dominis (filtres i taula) i els textos legals (mesura de lectura, index plegat i taules). * * Fase 4a (09/10/2026): l'area de client (inici amb les xifres i els taulers, serveis, la fitxa d'un servei amb el resum, les * accions, l'us i la sortida dels moduls, la baixa i el canvi de pla), el boto destructiu en contorn, l'aire entre els grups * del registre, i la sortida dels moduls de tercers nomes amb CSS: Plesk (fora el bloc gran de Sitejet, els dials de l'us i * el resum de facturacio repetit) i ProxmoxVeVpsCloud (les seves variables de color a la paleta i Poppins). * * Entrega 4c (10/10/2026): facturacio i pagaments (pressupostos i el pressupost, afegir credit, pagar una factura amb la tria, els * camps, l'adreca i el resum, les formes de pagament, pagar diverses factures, 3-D Secure, el pas cap a la passarel·la, el canvi * de pla per la ruta nova i el consum facturable), i les opcions de WHMCS amb iCheck amb la caixa de la base. * * Entrega 4d (11/10/2026): el compte (les dades del titular amb els camps de contacte i les preferencies de correu, la seguretat del * compte, els contactes i afegir-ne un), els usuaris (la llista, les invitacions i els permisos), el perfil, la contrasenya i la * seguretat de l'usuari (amb la finestra del segon factor de WHMCS), els correus enviats i un correu (pagina sencera). * * Entrega 4b (09/10/2026): els dominis (la llista amb les accions per als marcats, la fitxa amb el resum i les pestanyes, les * taules amb camps dels registres DNS i dels reenviaments, el text enganxat als camps, les dades de contacte per tipus i * canviar diversos dominis) i els certificats SSL (els tres passos de configurar-ne un, amb els camps del modul dins de la * seva etiqueta i els botons de copiar, i la llista), i la finestra de l'IRTP de WHMCS. * * Fase 5b (11/10/2026): la botiga de sempre, nomes aspecte (les plantilles del carret no canvien): els grups (el cataleg de * l'orderform hostingandorra i els productes del standard_cart), configurar un producte (el resum del producte, les opcions amb * el control lliscant, els extres i el resum de la comanda) i el seu pas de domini, els extres, renovar dominis i serveis amb * les etiquetes de WHMCS als quatre estats, l'error del carret, la comanda feta i la comprovacio antifrau. Sense la barra * lateral de categories de la botiga. Aquestes pantalles porten bdrt (la llista les hi posa); la cistella, el pagament i la * factura nous, no. * * PER QUE EXISTEIX * bdr-web.css ja hi posa la lletra i la paleta, pero no pot canviar l'estructura ni els components de Bootstrap (barres * laterals de tarjetes, migues al peu, verd #5CB85C, blau #336699, insignies, quatre radis de boto, camps de 13 px...): * inventari, apartat 3.8. * * Ronda d'obertura (12/10/2026, decisions H49 i H50): a contacte, l'apartat «Telefon i adreca» al costat del mapa * (.bdrt-contacte-on i .bdrt-atencio). El formulari compartit nou i l'ajuda amb el telefon, a bdr-botiga.css; el peu, a bdr-web.css. * * COM ES DESACTIVA * La carrega header.tpl nomes amb bdrTema. Treure una pantalla de includes/bdr_tema_pantalla.tpl la torna a la de * sempre; BdrWebNova = off, totes. Esborrant la linia del de header.tpl les pantalles de la llista queden amb * l'estructura nova i els components de bdr-web.css. */ /* ========================================================================================================= Contenidors propis: el reinici que a les pagines de producte dona .bdrx-pagina ========================================================================================================= */ body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-ajuda) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; } body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-ajuda) :where(ul, ol) { list-style: none; } body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-ajuda, .bdrt-cos) *, body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-ajuda, .bdrt-cos) *::before, body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-ajuda, .bdrt-cos) *::after { box-sizing: border-box; } body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-ajuda, .bdrt-cos) { font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--navy); } body.bdrw.bdrt :is(.bdrt-cap, .bdrt-ajuda) { line-height: 1.55; font-variant-numeric: lining-nums; } /* Enllacos de les migues: #3D3D3D subratllat en #EB5420 (WCAG 1.4.1), el de la casa */ body.bdrw.bdrt .bdrt-cap a:not(.bdrx-btn) { color: var(--bdrx-enllac); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-cap a:not(.bdrx-btn):hover { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; } /* ========================================================================================================= Estructura: migues, capcalera de pagina, cos amb la navegacio lateral (pla 5.1 i 5.2) ========================================================================================================= */ body.bdrw.bdrt #bdrw-contingut { display: block; padding-bottom: clamp(48px, 6vw, 80px); } body.bdrw.bdrt .bdrt-cap { padding-bottom: clamp(24px, 3vw, 36px); } body.bdrw.bdrt .bdrt-capcalera { padding-top: clamp(20px, 2.6vw, 32px); } body.bdrw.bdrt .bdrt-cap-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; } body.bdrw.bdrt .bdrt-cap-text { flex: 1 1 520px; min-width: 0; max-width: 820px; display: flex; flex-direction: column; gap: 12px; } body.bdrw.bdrt .bdrt-h1 { margin: 0; color: var(--navy); overflow-wrap: break-word; } body.bdrw.bdrt .bdrt-cap-accio { flex: 0 0 auto; } body.bdrw.bdrt .bdrt-cos { width: 100%; max-width: calc(var(--bdrx-ample) + 2 * var(--bdrx-marge)); margin: 0 auto; padding: 0 var(--bdrx-marge); } body.bdrw.bdrt .bdrt-graella { display: block; } body.bdrw.bdrt .bdrt-contingut { min-width: 0; padding: 0; } @media (min-width: 1060px) { body.bdrw.bdrt .bdrt-graella.amb-lateral { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } } @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cap-accio { flex: 1 1 100%; } body.bdrw.bdrt .bdrt-cap-accio .bdrx-btn { width: 100%; } } /* ========================================================================================================= Navegacio lateral de l'area de client: sense tarjetes ni icones, l'actual amb barra #EB5420 de 3 px ========================================================================================================= */ body.bdrw.bdrt .bdrt-lateral { margin: 0 0 28px; font-size: 15px; } body.bdrw.bdrt .bdrt-lateral-resum { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); color: var(--navy); font-weight: 600; cursor: pointer; list-style: none; } body.bdrw.bdrt .bdrt-lateral-resum::-webkit-details-marker { display: none; } body.bdrw.bdrt .bdrt-lateral-resum::after { content: ''; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; transition: transform 0.15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } body.bdrw.bdrt .bdrt-lateral-plega[open] > .bdrt-lateral-resum { border-radius: 12px 12px 0 0; } body.bdrw.bdrt .bdrt-lateral-plega[open] > .bdrt-lateral-resum::after { transform: rotate(180deg); } body.bdrw.bdrt .bdrt-lateral-cos { display: flex; flex-direction: column; gap: 24px; padding: 16px 12px 16px; border: 1px solid var(--vora); border-top: 0; border-radius: 0 0 12px 12px; } body.bdrw.bdrt .bdrt-lateral-titol { display: block; padding: 0 12px 6px; font-size: 15px; line-height: 1.35; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--navy); } /* Titols en majuscula de frase: els del nucli arriben en minuscula («suport»); la resta del text, tal com ve. Bloc i no flex: ::first-letter no s'aplica a un contenidor flex */ body.bdrw.bdrt .bdrt-lateral-titol::first-letter { text-transform: uppercase; } body.bdrw.bdrt .bdrt-lateral-text { padding: 0 12px 8px; font-size: 14px; line-height: 1.5; color: var(--secundari); } body.bdrw.bdrt .bdrt-lateral-text :where(p) { margin: 0 0 8px; } body.bdrw.bdrt .bdrt-lateral-llista { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; border-radius: 0; } body.bdrw.bdrt .bdrt-lateral-llista .list-group-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--navy); font-size: 15px; line-height: 1.35; font-weight: 500; text-decoration: none; } body.bdrw.bdrt .bdrt-lateral-llista .list-group-item + .list-group-item { border-top: 0; } body.bdrw.bdrt .bdrt-lateral-llista a.list-group-item:hover { background: var(--alterna); color: var(--navy); } body.bdrw.bdrt .bdrt-lateral-llista .list-group-item.active, body.bdrw.bdrt .bdrt-lateral-llista .list-group-item[aria-current="page"] { z-index: auto; border-radius: 0 10px 10px 0; background: var(--alterna); color: var(--navy); font-weight: 700; box-shadow: inset 3px 0 0 var(--ha-primari); } body.bdrw.bdrt .bdrt-lateral-llista .list-group-item.disabled { color: var(--secundari); background: transparent; pointer-events: none; } body.bdrw.bdrt .bdrt-lateral-etiqueta { min-width: 0; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-lateral :is(.badge, .bdrt-lateral-xifra) { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--bdrx-info-fons); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } body.bdrw.bdrt .bdrt-lateral-peu { padding: 8px 12px 0; } body.bdrw.bdrt .bdrt-lateral-peu .btn { width: 100%; } @media (min-width: 1060px) { body.bdrw.bdrt .bdrt-lateral { margin: 0; } body.bdrw.bdrt .bdrt-lateral-resum { display: none; } body.bdrw.bdrt .bdrt-lateral-cos { padding: 0; border: 0; border-radius: 0; } } /* Enllacos sense classe dins del contingut (per exemple el de la politica de privacitat del formulari de contacte, dins d'un div i no d'un p): #3D3D3D subratllat en #EB5420, com la regla de bdr-web.css per als p, li, td i dd (WCAG 1.4.1). Dins de :where(), perque qualsevol component amb el seu estil hi passi per sobre */ body.bdrw.bdrt .bdrt-cos :where(a:not([class])) { color: var(--bdrx-enllac); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-cos :where(a:not([class])):hover { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; } /* Fases 3 i 1 (revisio d'accessibilitat): els enllacos forts de la base i els dels avisos tambe subratllats en repos; en #3D3D3D com el text, nomes la negreta no els distingia (WCAG 1.4.1) */ body.bdrw.bdrt .bdrt-cos :is(a.bdrx-enllac-fort, .bdrx-avis a) { text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-cos :is(a.bdrx-enllac-fort, .bdrx-avis a):hover { text-decoration-thickness: 3px; } /* ========================================================================================================= Botons (pla 5.4): radi 12 (14 els grans), alt minim 44 px, pes de 600 a 700, cap pastilla de radi 999, cap verd ni blau de Bootstrap (bdr-web.css ja els passa a la paleta) i el destructiu en contorn #B42318 ========================================================================================================= */ body.bdrw.bdrt .bdrt-cos .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; } body.bdrw.bdrt .bdrt-cos .btn-lg { min-height: 52px; padding: 10px 24px; border-radius: 14px; font-size: 17px; } body.bdrw.bdrt .bdrt-cos :is(.btn-sm, .btn-xs) { padding: 6px 14px; font-size: 15px; } body.bdrw.bdrt .bdrt-cos .btn-block { display: flex; width: 100%; } body.bdrw.bdrt .bdrt-cos .btn.rounded-pill { border-radius: 12px !important; } body.bdrw.bdrt .bdrt-cos :is(.btn-danger, .btn-outline-danger) { background: var(--fons) !important; background-image: none !important; border: 1.5px solid var(--perill) !important; color: var(--perill) !important; box-shadow: none !important; } body.bdrw.bdrt .bdrt-cos :is(.btn-danger, .btn-outline-danger):hover { background: var(--perill-fons) !important; color: var(--perill) !important; } body.bdrw.bdrt .bdrt-cos .btn:focus { box-shadow: none !important; } /* ========================================================================================================= Tarjetes (pla 5.3): blanques, vora #E1DEDA, radi 16, sense ombra ni franja gris a la capcalera ========================================================================================================= */ body.bdrw.bdrt .bdrt-cos .card { border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); box-shadow: none; } body.bdrw.bdrt .bdrt-cos .card-header { padding: 16px 20px; background: transparent; border-bottom: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos .card-footer { padding: 16px 20px; background: transparent; border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos .card-body { padding: 20px; } body.bdrw.bdrt .bdrt-cos .card-title { color: var(--navy); font-size: 18px; font-weight: 700; } body.bdrw.bdrt .bdrt-cos .bg-light { background-color: var(--alterna) !important; } body.bdrw.bdrt .bdrt-cos :is(.border, .border-top, .border-right, .border-bottom, .border-left) { border-color: var(--vora) !important; } body.bdrw.bdrt .bdrt-cos .rounded { border-radius: 12px !important; } /* ========================================================================================================= Formularis (pla 5.5): etiqueta a sobre, camps de 16 px, vora #8A8580, focus de 3 px #3D3D3D, errors en #B42318 ========================================================================================================= */ body.bdrw.bdrt .bdrt-cos :is(label, .form-label, .col-form-label) { color: var(--navy); font-weight: 500; } body.bdrw.bdrt .bdrt-cos .form-label { display: inline-block; margin-bottom: 6px; } body.bdrw.bdrt .bdrt-cos :is(.form-control, .custom-select, .form-select) { min-height: 44px; height: auto; padding: 10px 14px; border: 1px solid var(--vora-forta); border-radius: 10px; background-color: var(--fons); color: var(--navy); font-size: 16px; line-height: 1.4; box-shadow: none; } body.bdrw.bdrt .bdrt-cos textarea.form-control { min-height: 120px; } body.bdrw.bdrt .bdrt-cos :is(.form-control, .custom-select, .form-select):focus { border-color: var(--navy) !important; box-shadow: none; outline: 3px solid var(--navy); outline-offset: 1px; } body.bdrw.bdrt .bdrt-cos .form-control::placeholder { color: var(--bdrx-exemple); opacity: 1; } body.bdrw.bdrt .bdrt-cos :is(.form-text, .help-block) { color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-cos :is(.form-control, .custom-select).is-invalid { border-color: var(--perill); } body.bdrw.bdrt .bdrt-cos :is(.invalid-feedback, .field-error-msg) { color: var(--perill); font-size: 14px; } body.bdrw.bdrt .bdrt-cos .input-group-text { border-color: var(--vora-forta); background: var(--alterna); color: var(--navy); } body.bdrw.bdrt .bdrt-cos fieldset { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; } body.bdrw.bdrt .bdrt-cos legend { width: auto; margin-bottom: 12px; color: var(--navy); font-size: 18px; font-weight: 700; } body.bdrw.bdrt .bdrt-cos :is(input[type="checkbox"], input[type="radio"]) { width: 24px; height: 24px; accent-color: var(--navy); } /* Casella i interruptor de Bootstrap: la vora sense marcar a 3:1 (WCAG 1.4.11) i la marcada en #3D3D3D, mai el verd */ body.bdrw.bdrt .bdrt-cos .custom-control-label::before { border: 1px solid var(--vora-forta); background-color: var(--fons); } body.bdrw.bdrt .bdrt-cos .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--navy); background-color: var(--navy); } body.bdrw.bdrt .bdrt-cos .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: none; outline: 3px solid var(--navy); outline-offset: 2px; } /* Adjunts: el boto el pinta Bootstrap des de la CSS amb «Browse»; si WHMCS no hi posa data-browse, el de l'idioma */ body.bdrw.bdrt .bdrt-cos .custom-file-label { border: 1px solid var(--vora-forta); border-radius: 10px; color: var(--navy); font-size: 16px; } body.bdrw.bdrt .bdrt-cos .custom-file-label::after { background: var(--alterna); color: var(--navy); font-weight: 600; border-left: 1px solid var(--vora-forta); border-radius: 0 10px 10px 0; } body.bdrw.bdrt:lang(ca) .bdrt-cos .custom-file-label:not([data-browse])::after { content: "Tria"; } body.bdrw.bdrt:lang(es) .bdrt-cos .custom-file-label:not([data-browse])::after { content: "Elige"; } body.bdrw.bdrt:lang(en) .bdrt-cos .custom-file-label:not([data-browse])::after { content: "Choose"; } body.bdrw.bdrt:lang(fr) .bdrt-cos .custom-file-label:not([data-browse])::after { content: "Parcourir"; } /* ========================================================================================================= Taules i DataTables (pla 5.6) ========================================================================================================= */ /* El contenidor es desplaca quan la taula no hi cap (sense JavaScript); 6 px de farciment amb el mateix marge negatiu perque l'anell de focus (3 px a 2 px) de la paginacio i del selector no quedi retallat a la vora (WCAG 2.4.11) */ body.bdrw.bdrt .bdrt-cos .table-container { max-width: calc(100% + 12px); margin: -6px; padding: 6px; overflow-x: auto; } body.bdrw.bdrt .bdrt-cos .table { margin-bottom: 0; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; border-collapse: separate; border-spacing: 0; } body.bdrw.bdrt .bdrt-cos .table caption { caption-side: top; } /* La vora de DataTables (table.dataTable, #DDDDDD) i la de Bootstrap (#DEE2E6), a la de la paleta */ body.bdrw.bdrt .bdrt-cos table.dataTable, body.bdrw.bdrt .bdrt-cos table.dataTable :is(thead th, tbody td) { border-color: var(--vora); } body.bdrw.bdrt .bdrt-cos table.dataTable.no-footer { border-bottom: 1px solid var(--vora); } body.bdrw.bdrt .bdrt-cos .table thead th { padding: 12px 14px; text-align: left; border-top: 0; border-bottom: 1px solid var(--vora); background: var(--alterna); color: var(--navy); font-size: 14px; font-weight: 600; vertical-align: bottom; } body.bdrw.bdrt .bdrt-cos .table td { padding: 14px; border-top: 1px solid var(--vora-suau); vertical-align: middle; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .table tbody tr:first-child td { border-top: 0; } body.bdrw.bdrt .bdrt-cos :is(.table-list, .table-hover) > tbody > tr:hover > td { background: var(--alterna); } body.bdrw.bdrt .bdrt-cos .table-list > tbody > tr { cursor: pointer; } body.bdrw.bdrt .bdrt-cos .table thead th.bdrt-xifra, body.bdrw.bdrt .bdrt-cos .bdrt-xifra { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; } body.bdrw.bdrt .bdrt-cos .bdrt-taula-enllac { color: var(--bdrx-enllac); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-cos .bdrt-taula-enllac:hover { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; } /* La caixa de DataTables (div.listtable de WHMCS): vora i radi de tarjeta, el cercador i la informacio a dalt */ body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .listtable { overflow: hidden; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); box-shadow: none; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper :is(.dataTables_filter, .dataTables_info) { padding: 12px 14px; color: var(--secundari); font-size: 14px; } /* El tema de WHMCS hi posa 30 px de marge a dalt i, al mobil, el cercador flotant feia creixer la informacio */ body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter { margin-top: 0; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter label { margin: 0; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter input { min-height: 44px; margin: 0; padding: 8px 14px 8px 40px; border: 1px solid var(--vora-forta); border-radius: 10px; background-color: var(--fons); color: var(--navy); font-size: 16px; box-shadow: none; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--navy); outline: 3px solid var(--navy); outline-offset: 1px; box-shadow: none; } /* Les capcaleres ordenables (tabindex de DataTables) son dins de la caixa amb overflow: hidden; l'anell, per dins */ body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .listtable th:focus-visible { outline-offset: -4px; } /* La lupa del cercador: la imatge del tema era gris clar (per sota de 3:1); la pinta la CSS en #636363 (6,0:1) */ body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter label { position: relative; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter input { background-image: none; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter label::before { content: ''; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--secundari); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_length { color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_length select { min-height: 44px; padding: 6px 10px; border: 1px solid var(--vora-forta); border-radius: 10px; background-color: var(--fons); color: var(--navy); font-size: 16px; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper td.dataTables_empty { padding: 32px 16px; color: var(--secundari); font-size: 15px; text-align: center; cursor: default; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper :is(.dataTables_paginate, .dataTables_length) { margin-top: 16px; } /* Per sota de 768 px, a les taules bdrt-taula (amb data-label a cada cel·la: les plantilles noves el posen, i js/bdr-tema.js el posa a les llistes de DataTables de les pantalles que encara no es refan, amb el text de la capcalera de la columna) cada fila es una tarjeta: sense desplacament horitzontal. Sense JavaScript, la taula que no te data-label es desplaca dins de la seva caixa i la pagina no. Les cel·les que DataTables Responsive amaga amb display: none en linia tornen a sortir; el + de Responsive no hi fa falta. */ @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos table.bdrt-taula, body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody, body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr { display: block; width: 100% !important; } /* Fora del tot (i del tabulador: DataTables hi posa tabindex per ordenar): cada cel·la ja diu la seva etiqueta, i un thead recortat a 1 px deixava cinc parades de focus invisibles (WCAG 2.4.7). Al mobil la llista no s'ordena. */ body.bdrw.bdrt .bdrt-cos table.bdrt-taula > thead { display: none; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .listtable:has(table.bdrt-taula) { border: 0; border-radius: 0; overflow: visible; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .listtable:has(table.bdrt-taula) .dataTables_filter { float: none; padding: 0 0 8px; text-align: left; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .listtable:has(table.bdrt-taula) .dataTables_filter :is(label, input) { width: 100%; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .listtable:has(table.bdrt-taula) .dataTables_info { padding: 0 0 12px; text-align: left; } /* Cap tarjeta dins d'una altra (pla 5.3): la taula feta tarjetes no porta vora propia */ body.bdrw.bdrt .bdrt-cos table.bdrt-taula { margin-top: 0 !important; border: 0 !important; } /* L'assumpte dels tiquets porta la classe border-left de Bootstrap: dins de la tarjeta sobra la ratlla */ body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > td > a.border-left { border-left: 0 !important; padding-left: 0 !important; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr { margin: 0 0 12px; padding: 4px 16px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > td { display: flex !important; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 10px 0; border-top: 1px solid var(--vora-suau); background: transparent; text-align: right; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > td:first-child { border-top: 0; } /* Fase 5a: una capcalera de fila (th scope=row, la taula de preus de dominis) es el titol de la tarjeta */ body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > th { display: block; width: 100%; padding: 12px 0 6px; border: 0; background: transparent; color: var(--navy); font-size: 17px; text-align: left; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > th + td { border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > td[data-label]::before { content: attr(data-label) !important; position: static !important; display: block !important; flex: 0 0 auto; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; color: var(--navy) !important; font-family: inherit !important; font-size: 14px; font-weight: 600; line-height: 1.4 !important; text-align: left; text-indent: 0 !important; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > td.dataTables_empty { display: block !important; text-align: center; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr.child { display: none; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr:hover > td { background: transparent; } } /* ========================================================================================================= Estats (pla 5.7): els quatre de la marca, sempre amb text. El mapa es includes/bdr_tema_estat.tpl; aqui, les classes de WHMCS de les pantalles que no es refan, amb els mateixos quatre tipus (tema.test.js comprova que coincideixen) ========================================================================================================= */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-estat, .label.status) { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border: 1px solid var(--clar-navy); border-radius: 8px; background: var(--bdrx-info-fons); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap; text-shadow: none; } body.bdrw.bdrt .bdrt-cos :is(.bdrt-estat-exit, .label.status-active, .label.status-completed, .label.status-paid, .label.status-answered, .label.status-accepted) { border-color: #B7DEC6; background: var(--exit-fons); color: var(--exit); } body.bdrw.bdrt .bdrt-cos :is(.bdrt-estat-avis, .label.status-pending, .label.status-pending-transfer, .label.status-pending-registration, .label.status-payment-pending, .label.status-unpaid, .label.status-open, .label.status-customer-reply, .label.status-inprogress, .label.status-onhold, .label.status-draft, .label.status-delivered, .label.status-grace) { border-color: #F2D894; background: var(--avis-fons); color: var(--avis); } body.bdrw.bdrt .bdrt-cos :is(.bdrt-estat-perill, .label.status-suspended, .label.status-overdue, .label.status-refunded, .label.status-collections, .label.status-fraud, .label.status-redemption) { border-color: #F4B7B2; background: var(--perill-fons); color: var(--perill); } body.bdrw.bdrt .bdrt-cos :is(.bdrt-estat-neutre, .label.status-cancelled, .label.status-closed, .label.status-terminated, .label.status-expired, .label.status-transferred-away, .label.status-lost, .label.status-dead) { border-color: var(--clar-navy); background: var(--bdrx-info-fons); color: var(--navy); } /* Estats propis dels tiquets (status-custom, amb el color de l'administracio en linia): neutre, el text diu l'estat */ body.bdrw.bdrt .bdrt-cos .label.status.status-custom { border-color: var(--clar-navy) !important; background: var(--bdrx-info-fons) !important; color: var(--navy) !important; } /* Xifres i insignies de Bootstrap dins del contingut */ body.bdrw.bdrt .bdrt-cos .badge { border-radius: 8px; background: var(--bdrx-info-fons); color: var(--navy); font-weight: 600; } /* ========================================================================================================= Avisos, buits i paginacio (pla 5.8) ========================================================================================================= */ body.bdrw.bdrt .bdrt-cos .alert { padding: 14px 16px; border: 1px solid; border-radius: 12px; font-size: 15px; line-height: 1.5; } body.bdrw.bdrt .bdrt-cos :is(.alert-secondary, .alert-light, .alert-dark) { border-color: var(--clar-navy); background: var(--bdrx-info-fons); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .alert a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: 3px; } body.bdrw.bdrt .bdrt-cos .alert .close { min-width: 44px; min-height: 44px; color: inherit; opacity: 1; text-shadow: none; } body.bdrw.bdrt .bdrt-cos .bdrt-buit { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--vora); border-radius: 16px; background: var(--alterna); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-buit-titol { margin: 0; font-size: 18px; font-weight: 700; } body.bdrw.bdrt .bdrt-cos .bdrt-buit p { margin: 0; color: var(--secundari); } body.bdrw.bdrt .bdrt-cos .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } body.bdrw.bdrt .bdrt-cos .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--vora); border-radius: 10px !important; background: var(--fons); color: var(--navy); font-weight: 600; line-height: 1; } body.bdrw.bdrt .bdrt-cos .pagination .page-link:hover { background: var(--alterna); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .pagination .page-item.active .page-link { border-color: var(--navy); background: var(--navy); color: var(--fons); } body.bdrw.bdrt .bdrt-cos .pagination .page-item.disabled .page-link { background: var(--fons); color: var(--secundari); } body.bdrw.bdrt .bdrt-cos .pagination .page-link:focus { box-shadow: none; } /* ========================================================================================================= Focus: anell de 3 px #3D3D3D a tot el que es pot enfocar de la capcalera, la lateral i el contingut (WCAG 2.4.7) ========================================================================================================= */ body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-cos) :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; } /* L'ombra de focus de Bootstrap, fora; nomes als seus controls (els bdrx-btn-sec porten la vora en box-shadow) */ body.bdrw.bdrt .bdrt-cos :is(.btn, .form-control, .custom-select, .form-select, .page-link):focus-visible { box-shadow: none; } body.bdrw.bdrt .bdrt-lateral-llista .list-group-item:focus-visible { z-index: 1; outline-offset: -3px; } /* ========================================================================================================= Ajuda humana al final (bdrx/ajuda.tpl, el component de la botiga): el mateix lloc a cada pantalla (WCAG 3.2.6) ========================================================================================================= */ body.bdrw.bdrt .bdrt-ajuda { padding-top: clamp(32px, 4vw, 56px); } body.bdrw.bdrt .bdrt-ajuda .bdrx-ajuda { padding-bottom: 0; } /* ========================================================================================================= Pantalles de prova de la fase 0: contacte (el formulari compartit, nomes d'aspecte) i avis legal ========================================================================================================= */ body.bdrw.bdrt .bdrt-contacte, body.bdrw.bdrt .bdrt-mapa { max-width: 760px; } body.bdrw.bdrt .bdrt-contacte #bdr-lead { margin: 0 !important; } body.bdrw.bdrt .bdrt-contacte #bdr-lead > :is(h2, p).text-center { text-align: left !important; } body.bdrw.bdrt .bdrt-contacte #bdr-lead > h2 { margin: 0 0 8px; font-size: clamp(22px, 18px + 0.8vw, 26px); line-height: 1.25; } body.bdrw.bdrt .bdrt-contacte #bdr-lead > p { margin: 0 0 20px !important; font-size: 16px; } body.bdrw.bdrt .bdrt-contacte #bdr-lead form { padding: clamp(20px, 3vw, 32px) !important; border: 1px solid var(--vora) !important; border-radius: 16px !important; background: var(--fons) !important; } body.bdrw.bdrt .bdrt-contacte #bdr-lead form .text-center { text-align: left !important; } /* «Envia» es l'accio principal de la pantalla: blanc sobre #EB5420 en negreta de 19 px (text gran, 3,61:1; #D2461A al passar-hi, 4,53:1), com bdrx-btn-pri. bdr-web.css el pinta en #F4A000 amb !important: aqui mes especific. */ body.bdrw.bdrt .bdrt-contacte #bdr-lead [type="submit"] { min-height: 52px; padding: 10px 28px !important; border: 0 !important; border-radius: 14px !important; background: var(--ha-btn-fons) !important; color: var(--ha-btn-text) !important; font-size: var(--ha-btn-mida) !important; font-weight: 700 !important; } body.bdrw.bdrt .bdrt-contacte #bdr-lead [type="submit"]:hover { background: var(--ha-btn-hover) !important; color: var(--ha-btn-text) !important; } body.bdrw.bdrt .bdrt-contacte #bdr-lead [type="submit"] > .fa-paper-plane { display: none; } body.bdrw.bdrt .bdrt-mapa { margin-top: 40px; } body.bdrw.bdrt .bdrt-mapa .bdr-mapa-cara { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--vora); border-radius: 16px; background: var(--alterna); color: var(--navy); text-align: left; } body.bdrw.bdrt .bdrt-mapa .bdr-mapa-cara p { max-width: 62ch; margin: 0; } body.bdrw.bdrt .bdrt-mapa .bdrt-mapa-botons { display: flex; flex-wrap: wrap; gap: 12px; } body.bdrw.bdrt .bdrt-mapa iframe { display: block; width: 100%; border-radius: 16px; } /* Ronda d'obertura (12/10/2026, decisio H49): «Telefon i adreca», el telefon amb l'horari i l'adreca en text (includes/bdr_tema_atencio.tpl, forma contacte), al costat del mapa i dins del mateix apartat. Una llista de definicions en una tarjeta clara; el telefon i l'adreca van un al costat de l'altre quan hi caben (cada fila, flex 1 1 240px: uns 580 px de tarjeta), i si no, un sota l'altre. El numero, gran i subratllat, amb 44 px d'alt (es l'accio per trucar) */ body.bdrw.bdrt .bdrt-contacte-on { max-width: 760px; margin-top: clamp(32px, 4vw, 48px); } body.bdrw.bdrt .bdrt-contacte-on > h2 { margin: 0 0 16px; font-size: clamp(22px, 18px + 0.8vw, 26px); line-height: 1.25; } body.bdrw.bdrt .bdrt-contacte-on-graella { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-contacte-on .bdrt-mapa { margin-top: 0; } body.bdrw.bdrt .bdrt-atencio { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); color: var(--navy); } body.bdrw.bdrt .bdrt-atencio-fila { flex: 1 1 240px; min-width: 0; } body.bdrw.bdrt .bdrt-atencio dt { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--navy); } body.bdrw.bdrt .bdrt-atencio dd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-atencio a.bdrt-atencio-tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-size: 20px; font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-atencio a.bdrt-atencio-tel:hover { color: var(--taronja-text-hover); } body.bdrw.bdrt .bdrt-atencio-horari { color: var(--secundari); font-size: 15px; } body.bdrw.bdrt .bdrt-text { max-width: 72ch; font-size: 17px; line-height: 1.65; } body.bdrw.bdrt .bdrt-text :where(h2) { margin: 40px 0 12px; font-size: clamp(21px, 18px + 0.7vw, 25px); line-height: 1.25; } body.bdrw.bdrt .bdrt-text > :where(p):first-child { margin-top: 0; } body.bdrw.bdrt .bdrt-text :where(p) { margin: 0 0 16px; } body.bdrw.bdrt .bdrt-text hr { margin: 40px 0 24px; } /* ========================================================================================================= Fase 2 (ajuda i tiquets) i 5a (registrar i traslladar domini), 08/10/2026. Els components de la botiga (bdrx-cerca, bdrx-resultat, bdrx-avis, bdrx-btn) ja els dona bdr-botiga.css; aqui, els propis de les pantalles ========================================================================================================= */ body.bdrw.bdrt .bdrt-cap .bdrt-suport { padding-top: 20px; } /* Els accessos de suport (includes/bdr_tema_suport.tpl): enllacos de text en fila, l'actual en negreta amb la barra #EB5420 de la navegacio. Sense pastilles */ body.bdrw.bdrt .bdrt-suport-llista { display: flex; flex-wrap: wrap; gap: 4px 20px; } body.bdrw.bdrt .bdrt-cap .bdrt-suport-llista a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration-thickness: 1px; text-decoration-color: var(--clar-navy); } body.bdrw.bdrt .bdrt-cap .bdrt-suport-llista a:hover { text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; } body.bdrw.bdrt .bdrt-cap .bdrt-suport-llista a[aria-current] { font-weight: 700; text-decoration-color: var(--ha-primari); text-decoration-thickness: 3px; } body.bdrw.bdrt .bdrt-ajuda-cos { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); max-width: 980px; } body.bdrw.bdrt .bdrt-ajuda-cos.bdrt-estret, body.bdrw.bdrt .bdrt-ajuda-cos.bdrt-formulari { max-width: 760px; } body.bdrw.bdrt .bdrt-cos :where(.bdrt-ajuda-cos, .bdrt-tiquet, .bdrt-xarxa, .bdrt-domini) :where(h2, h3, p, ul, ol, dl, dd, fieldset) { margin: 0; } body.bdrw.bdrt .bdrt-cos :where(.bdrt-ajuda-cos, .bdrt-tiquet, .bdrt-xarxa, .bdrt-domini) :where(ul, ol)[role="list"] { padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-seccio { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-h2 { color: var(--navy); font-size: clamp(20px, 17px + 0.7vw, 24px); font-weight: 700; line-height: 1.3; } body.bdrw.bdrt .bdrt-seccio-intro { color: var(--secundari); } body.bdrw.bdrt .bdrt-torna { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } body.bdrw.bdrt .bdrt-botons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } body.bdrw.bdrt .bdrt-cos .bdrt-edita { display: inline-flex; align-items: center; min-height: 44px; color: var(--secundari); font-size: 14px; } /* Cercador de l'ajuda i de les descarregues: etiqueta a sobre, camp i boto en fila */ body.bdrw.bdrt .bdrt-cerca { display: flex; flex-direction: column; gap: 8px; } body.bdrw.bdrt .bdrt-cerca-et { margin: 0; color: var(--navy); font-size: 16px; font-weight: 600; } body.bdrw.bdrt .bdrt-cerca-fila { display: flex; flex-wrap: wrap; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-cerca-fila .form-control { flex: 1 1 240px; width: auto; min-width: 0; min-height: 52px; font-size: 17px; } body.bdrw.bdrt .bdrt-cerca-fila .bdrx-btn { min-height: 52px; } body.bdrw.bdrt .bdrt-cerca-ajuda { color: var(--secundari); font-size: 14px; } /* Tarjetes enllac (categories, departaments): blanques, vora, radi 16, sense ombra; tota la tarjeta es l'enllac */ body.bdrw.bdrt .bdrt-targetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; } body.bdrw.bdrt .bdrt-targeta-elem { display: flex; flex-direction: column; gap: 4px; min-width: 0; } body.bdrw.bdrt .bdrt-cos a.bdrt-targeta { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); color: var(--navy); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.bdrw.bdrt .bdrt-cos a.bdrt-targeta:hover { border-color: var(--linia-navy); box-shadow: var(--ombra); color: var(--navy); } body.bdrw.bdrt .bdrt-targeta-titol { font-size: 18px; font-weight: 700; line-height: 1.35; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-targeta-text { color: var(--secundari); font-size: 15px; line-height: 1.5; } body.bdrw.bdrt .bdrt-targeta-meta { margin-top: auto; padding-top: 4px; color: var(--secundari); font-size: 14px; font-weight: 500; } /* Llista d'articles i de descarregues: titol enllac i extracte a 6:1 (abans #87939F, 3,13:1) */ body.bdrw.bdrt .bdrt-articles { border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); overflow: hidden; } body.bdrw.bdrt .bdrt-article-elem { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 0 20px; } body.bdrw.bdrt .bdrt-article-elem + .bdrt-article-elem { border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos a.bdrt-article { display: flex; flex: 1 1 260px; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 0; color: var(--navy); text-decoration: none; } body.bdrw.bdrt .bdrt-article-titol { font-weight: 600; line-height: 1.4; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos a.bdrt-article:hover .bdrt-article-titol { text-decoration-thickness: 3px; } /* La llista retalla el que en surt (overflow: hidden): l'anell de focus, per dins */ body.bdrw.bdrt .bdrt-cos a.bdrt-article:focus-visible { outline-offset: -3px; } body.bdrw.bdrt .bdrt-article-text, body.bdrw.bdrt .bdrt-article-meta { color: var(--secundari); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } /* Un article de l'ajuda, un avis */ body.bdrw.bdrt .bdrt-article-cos :where(img) { max-width: 100%; height: auto; } body.bdrw.bdrt .bdrt-article-peu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 16px; border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-etiqueta-nom { font-weight: 600; } body.bdrw.bdrt .bdrt-vot fieldset { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--alterna); } body.bdrw.bdrt .bdrt-cos .bdrt-vot legend { float: left; width: 100%; margin: 0 0 4px; font-size: 17px; } body.bdrw.bdrt .bdrt-vot-botons { display: flex; flex-wrap: wrap; gap: 12px; clear: both; } body.bdrw.bdrt .bdrt-avis-in { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-avisos { display: flex; flex-direction: column; gap: 20px; } body.bdrw.bdrt .bdrt-avis-titol a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-avis-data { color: var(--secundari); font-size: 15px; } body.bdrw.bdrt .bdrt-avis-text { font-size: 16px; } body.bdrw.bdrt .bdrt-paginacio { margin-top: 8px; } body.bdrw.bdrt .bdrt-cos span.page-link { cursor: default; } /* Formularis de tiquets: grups amb llegenda, camps en fila des de 768 px, l'editor de Markdown de WHMCS */ body.bdrw.bdrt .bdrt-tiquet-form, body.bdrw.bdrt .bdrt-formulari form { display: flex; flex-direction: column; gap: 28px; } body.bdrw.bdrt .bdrt-cos .bdrt-grup { display: flex; flex-direction: column; gap: 16px; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-grup > legend { float: left; width: 100%; margin: 0; } body.bdrw.bdrt .bdrt-grup > legend + * { clear: both; } body.bdrw.bdrt .bdrt-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-camp { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-camp > label { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-ajuda-camp { margin: 0; color: var(--secundari); font-size: 14px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .form-control:disabled, body.bdrw.bdrt .bdrt-cos .form-control.disabled { background: var(--alterna); color: var(--navy); opacity: 1; } body.bdrw.bdrt .bdrt-adjunts .input-group { flex-wrap: wrap; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .custom-file { flex: 1 1 240px; min-width: 0; height: 44px; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .custom-file-input { height: 44px; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .custom-file-label { height: 44px; padding: 10px 14px; line-height: 1.4; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .custom-file-label::after { height: 42px; padding: 10px 14px; line-height: 1.4; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .input-group-append { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .input-group > .custom-file:not(:last-child) .custom-file-label, body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-radius: 10px; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts .custom-file-label::after { border-radius: 0 10px 10px 0; } /* El camp de fitxer real es transparent (Bootstrap): el focus es veu a l'etiqueta, 3 px #3D3D3D (WCAG 2.4.7) */ body.bdrw.bdrt .bdrt-cos .custom-file-input:focus-visible ~ .custom-file-label { border-color: var(--navy); box-shadow: none; outline: 3px solid var(--navy); outline-offset: 2px; } /* Camps obligatoris: l'asterisc es visual (aria-hidden); la nota del principi del formulari ho diu amb text */ body.bdrw.bdrt .bdrt-cos .bdrt-oblig { color: var(--perill); font-weight: 700; } body.bdrw.bdrt .bdrt-cos .bdrt-oblig-nota { margin: 0; color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-cos .form-control[aria-invalid="true"] { border-color: var(--perill); border-width: 2px; } /* L'editor de Markdown de WHMCS (bootstrap-markdown): barra d'eines amb botons de 44 px, peu a 6:1 (abans #959694 sobre #F5F5F5, 2,73:1), sense radi 0 */ body.bdrw.bdrt .bdrt-cos .md-editor { border: 1px solid var(--vora-forta); border-radius: 10px; background: var(--fons); overflow: hidden; } body.bdrw.bdrt .bdrt-cos .md-editor.active { border-color: var(--navy); box-shadow: none; outline: 3px solid var(--navy); outline-offset: 1px; } body.bdrw.bdrt .bdrt-cos .md-editor > .md-header { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 6px; border-bottom: 1px solid var(--vora); background: var(--alterna); } body.bdrw.bdrt .bdrt-cos .md-editor .btn-group { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; } body.bdrw.bdrt .bdrt-cos .md-editor .md-header .btn { min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px !important; background: transparent; color: var(--navy); font-size: 15px; } body.bdrw.bdrt .bdrt-cos .md-editor .md-header .btn:hover { border-color: var(--vora-forta); background: var(--fons); } body.bdrw.bdrt .bdrt-cos .md-editor .md-header .btn.active, body.bdrw.bdrt .bdrt-cos .md-editor .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"] { border-color: var(--navy); background: var(--fons); font-weight: 600; } body.bdrw.bdrt .bdrt-cos .md-editor > textarea { min-height: 220px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--fons); color: var(--navy); font-size: 16px; line-height: 1.5; box-shadow: none; outline: 0; } /* bootstrap-markdown hi posa vores discontinues #DDDDDD a dalt i a baix (fora de la paleta): la caixa ja porta la seva */ body.bdrw.bdrt .bdrt-cos .md-editor textarea.md-input { border: 0 !important; } body.bdrw.bdrt .bdrt-cos .md-editor > .md-preview { min-height: 220px; padding: 12px 14px; color: var(--navy); } body.bdrw.bdrt .bdrt-cos .md-editor > .md-footer, body.bdrw.bdrt .bdrt-cos .md-editor .markdown-editor-status { padding: 6px 12px; border-top: 1px solid var(--vora); background: var(--alterna); color: var(--secundari); font-size: 14px; } /* Sugerencies de l'ajuda mentre s'escriu (supportticketsubmit-kbsuggestions.tpl, per AJAX dins de #autoAnswerSuggestions) */ body.bdrw.bdrt .bdrt-cos .bdrt-suggeriments { padding: 20px; border: 1px solid var(--clar-navy); border-radius: 16px; background: var(--bdrx-info-fons); } body.bdrw.bdrt .bdrt-cos .bdrt-suggeriments .card-title { margin: 0 0 6px; font-size: 18px; } body.bdrw.bdrt .bdrt-cos .bdrt-suggeriments .list-group { margin: 12px 0 0; border: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-suggeriments .list-group-item { padding: 10px 0; border: 0; border-top: 1px solid var(--clar-navy); background: transparent; } body.bdrw.bdrt .bdrt-cos .bdrt-suggeriments .list-group-item a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-cos .bdrt-suggeriments .list-group-item small { display: block; margin-top: 4px; color: var(--secundari); font-size: 14px; font-weight: 400; } body.bdrw.bdrt .bdrt-cos .bdrt-suggeriments :is(.fa, .fal, .fas, .far) { display: none; } /* La guia de Markdown (markdown-guide.tpl, dins del dialeg de WHMCS) */ body.bdrw.bdrt .modal-body :where(h4) { margin: 20px 0 8px; color: var(--navy); font-size: 17px; font-weight: 700; } body.bdrw.bdrt .modal-body pre { padding: 12px 14px; border: 1px solid var(--vora); border-radius: 10px; background: var(--alterna); color: var(--navy); font-size: 14px; white-space: pre-wrap; } /* Un tiquet: accions, conversa (el missatge de l'equip marcat amb text i amb vora, no nomes amb color), valoracio */ body.bdrw.bdrt .bdrt-tiquet { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); max-width: 860px; } body.bdrw.bdrt .bdrt-tiquet-accions { display: flex; flex-wrap: wrap; gap: 12px; } body.bdrw.bdrt .bdrt-btn-perill, body.bdrw.bdrt a.bdrt-btn-perill { background: var(--fons); color: var(--perill); box-shadow: inset 0 0 0 1.5px var(--perill); } body.bdrw.bdrt .bdrt-btn-perill:hover { background: var(--perill-fons); color: var(--perill); } body.bdrw.bdrt .bdrt-missatges { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-missatge { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-missatge-equip { border-color: var(--clar-navy); background: var(--alterna); box-shadow: inset 4px 0 0 var(--ha-primari); } body.bdrw.bdrt .bdrt-missatge-cap { color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-missatge-cap .posted-by-name { color: var(--navy); font-weight: 700; } body.bdrw.bdrt .bdrt-missatge-qui { display: inline-flex; align-items: center; min-height: 24px; margin-left: 6px; padding: 0 8px; border: 1px solid var(--clar-navy); border-radius: 8px; background: var(--bdrx-info-fons); color: var(--navy); font-size: 13px; font-weight: 600; } body.bdrw.bdrt .bdrt-missatge-text { color: var(--navy); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-missatge-text :where(p) { margin: 0 0 12px; } body.bdrw.bdrt .bdrt-missatge-ip { padding-top: 8px; border-top: 1px solid var(--vora-suau); color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-valora { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } body.bdrw.bdrt .bdrt-valora-et { color: var(--navy); font-size: 14px; font-weight: 600; } /* Les estrelles de WHMCS (span.star, JavaScript del tema): 44 px, el contorn en #3D3D3D i les triades plenes en #8A5A00. La plantilla nova les posa de 1 a 5 (el tema de WHMCS les posava de 5 a 1 amb direction: rtl): l'ordre del tabulador i el visual coincideixen, i les anteriors a la que s'assenyala s'omplen amb :has (revisio d'accessibilitat del 08/10/2026) */ body.bdrw.bdrt .bdrt-valora :is(.rating, .rating-done) { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; direction: ltr; unicode-bidi: normal; } body.bdrw.bdrt .bdrt-valora .star { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; color: var(--navy); } body.bdrw.bdrt .bdrt-valora .rating-done .star { width: 24px; height: 24px; cursor: default; } body.bdrw.bdrt .bdrt-valora .star::before { content: ''; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E") center / contain no-repeat; } body.bdrw.bdrt .bdrt-valora .rating .star:hover, body.bdrw.bdrt .bdrt-valora .rating .star:has(~ .star:hover), body.bdrw.bdrt .bdrt-valora .rating .star:focus-visible, body.bdrw.bdrt .bdrt-valora .rating .star:has(~ .star:focus-visible), body.bdrw.bdrt .bdrt-valora .rating-done .star.active { color: var(--avis); } body.bdrw.bdrt .bdrt-valora .rating .star:hover::before, body.bdrw.bdrt .bdrt-valora .rating .star:has(~ .star:hover)::before, body.bdrw.bdrt .bdrt-valora .rating .star:focus-visible::before, body.bdrw.bdrt .bdrt-valora .rating .star:has(~ .star:focus-visible)::before, body.bdrw.bdrt .bdrt-valora .rating-done .star.active::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.8z'/%3E%3C/svg%3E"); } body.bdrw.bdrt .bdrt-valora .rated { margin-left: 8px; color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-adjunts-llista { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-adjunts-titol { font-size: 14px; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts-llista .attachment-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-adjunts-llista .attachment-list a { display: inline-flex; align-items: center; min-height: 44px; } body.bdrw.bdrt .bdrt-adjunt-tret { color: var(--secundari); text-decoration: line-through; } /* Valoracio d'un tiquet tancat: el resum en files, la nota de 1 a 10 amb etiquetes de 44 px */ body.bdrw.bdrt .bdrt-resum { display: grid; gap: 0; border: 1px solid var(--vora); border-radius: 16px; overflow: hidden; } body.bdrw.bdrt .bdrt-resum > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-resum > div + div { border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-resum dt { color: var(--secundari); font-weight: 500; } body.bdrw.bdrt .bdrt-resum dd { color: var(--navy); font-weight: 600; } body.bdrw.bdrt .bdrt-nota { padding: 20px; border: 1px solid var(--vora); border-radius: 16px; } body.bdrw.bdrt .bdrt-nota-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } body.bdrw.bdrt .bdrt-nota-extrem { color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-nota-opcions { display: flex; flex-wrap: wrap; gap: 6px; } body.bdrw.bdrt .bdrt-cos .bdrt-nota-opcio { position: relative; display: inline-flex; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-nota-opcio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } body.bdrw.bdrt .bdrt-nota-opcio span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--vora-forta); border-radius: 10px; background: var(--fons); color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; } body.bdrw.bdrt .bdrt-nota-opcio input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--fons); } body.bdrw.bdrt .bdrt-nota-opcio input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; } /* Estat de la xarxa */ body.bdrw.bdrt .bdrt-xarxa { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); } body.bdrw.bdrt .bdrt-incidencies { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-incidencia { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-incidencia-titol { color: var(--navy); font-size: 18px; font-weight: 700; } body.bdrw.bdrt .bdrt-incidencia-estat { display: flex; flex-wrap: wrap; gap: 8px; } body.bdrw.bdrt .bdrt-incidencia-dates { color: var(--secundari); font-size: 14px; } /* Registrar i traslladar domini (fase 5a): el cercador de la botiga sense ombra, els resultats, la taula de preus */ body.bdrw.bdrt .bdrt-domini { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); max-width: 980px; } body.bdrw.bdrt .bdrt-domini .bdrx-cerca { box-shadow: none; } body.bdrw.bdrt .bdrt-dom-cistella { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border: 1px solid #B7DEC6; border-radius: 16px; background: var(--exit-fons); color: var(--exit); font-weight: 600; } body.bdrw.bdrt .bdrt-dom-cistella[hidden] { display: none; } body.bdrw.bdrt .bdrt-dom-res .bdrx-btn[aria-disabled="true"] { cursor: default; } body.bdrw.bdrt .bdrt-dom-res .bdrx-btn.bdrt-dom-afegit { background: var(--exit-fons); color: var(--exit); box-shadow: inset 0 0 0 1.5px var(--exit); } body.bdrw.bdrt .bdrt-dom-res .bdrx-enllac-fort { font-size: 15px; } body.bdrw.bdrt .bdrt-dom-doble { color: var(--avis); font-weight: 600; } /* A la taula de preus, l'avis del doble va sota el preu i parteix linia (la cel·la de xifres no ho fa: white-space: nowrap) */ body.bdrw.bdrt .bdrt-cos .bdrt-dom-taula .bdrt-dom-renova { min-width: 0; margin-left: auto; overflow-wrap: anywhere; } /* A les tarjetes del mobil, si l'avis no hi cap al costat de l'etiqueta, baixa a la linia de sota */ body.bdrw.bdrt .bdrt-cos table.bdrt-dom-taula > tbody > tr > td { flex-wrap: wrap; } body.bdrw.bdrt .bdrt-cos .bdrt-dom-taula .bdrt-dom-doble { display: block; white-space: normal; font-size: 14px; font-variant-numeric: normal; } body.bdrw.bdrt .bdrt-cos .bdrt-dom-taula th[scope="row"] { font-weight: 700; } body.bdrw.bdrt .bdrt-dom-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; } @media (min-width: 900px) { body.bdrw.bdrt .bdrt-dom-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } } body.bdrw.bdrt .bdrt-dom-trasllat-form .bdrt-camp + .bdrt-camp { margin-top: 4px; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-error { margin: 0; color: var(--perill); font-size: 14px; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-error[hidden] { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-camp .form-control[aria-invalid="true"] { border-color: var(--perill); border-width: 2px; } body.bdrw.bdrt .bdrt-tra-preu:empty { display: none; } /* Errors en afegir a la cistella (role=alert): en #B42318, i res quan es buida */ body.bdrw.bdrt .bdrt-cos .bdrt-dom-alerta { margin: 0; color: var(--perill); font-size: 15px; font-weight: 600; } /* Buida, fora de la vista pero no amb display: none: una regio viva que passa d'amagada a visible amb el text alhora sovint no s'anuncia (revisio d'accessibilitat de les fases 3 i 1) */ body.bdrw.bdrt .bdrt-cos .bdrt-dom-alerta:empty { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* La llista de resultats buida i amagada (bdr-botiga.css li dona display: flex) i el text d'exemple del camp de domini */ body.bdrw.bdrt .bdrt-cos .bdrx-resultats[hidden] { display: none; } body.bdrw.bdrt .bdrt-domini ::placeholder { color: var(--bdrx-exemple); opacity: 1; } body.bdrw.bdrt .bdrt-domini .bdrx-cerca-fila input[aria-invalid="true"] { border-color: var(--perill); border-width: 2px; } body.bdrw.bdrt .bdrt-dom-passos { display: flex; flex-direction: column; gap: 16px; } /* ========================================================================================================= Fases 3 (acces i registre) i 1 (informatives i errors), 09/10/2026 ========================================================================================================= */ /* Formularis d'acces: el formulari en una tarjeta blanca; el text d'entrada i l'alternativa («No tens compte?») fora */ body.bdrw.bdrt .bdrt-cos .bdrt-targeta-form { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-targeta-form[hidden] { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-targeta-form :where(p) { margin: 0; } body.bdrw.bdrt .bdrt-cos :is(.bdrt-intro, .bdrt-alternativa) { margin: 0; color: var(--navy); font-size: 16px; line-height: 1.6; } body.bdrw.bdrt .bdrt-cos .bdrt-alternativa :where(p) { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-alternativa[hidden] { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-acces { max-width: 520px; } body.bdrw.bdrt .bdrt-cos .bdrt-etiqueta { margin: 0; color: var(--navy); font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-etiqueta label { margin: 0; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-enllac { margin: 2px 0 0; font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-opcional { color: var(--secundari); font-weight: 400; } /* Contrasenya amb el boto de mostrar-la al costat (includes/bdr_tema_mostra.tpl, el fa visible js/bdr-tema.js) */ body.bdrw.bdrt .bdrt-cos .bdrt-contrasenya { display: flex; gap: 8px; align-items: stretch; } body.bdrw.bdrt .bdrt-cos .bdrt-contrasenya > .form-control { flex: 1 1 auto; min-width: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-mostra { flex: 0 0 auto; min-height: 44px; padding: 8px 16px; font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-mostra[hidden] { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-mostra[aria-pressed="true"], body.bdrw.bdrt .bdrt-cos .bdrt-mostra[aria-pressed="true"]:hover { box-shadow: none; background: var(--navy); color: var(--fons); } /* A1 de la revisio: el boto desactivat ho sembla (el de desar la contrasenya nova, que desactiva includes/pwstrength.tpl mentre no coincideixen; el de reCAPTCHA va amb aria-disabled, que ja pinta bdr-botiga.css) */ body.bdrw.bdrt .bdrt-cos .bdrx-btn:disabled, body.bdrw.bdrt .bdrt-cos .bdrx-btn:disabled:hover { background: var(--alterna); color: var(--secundari); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); cursor: not-allowed; opacity: 1; transform: none; } /* Caselles natives (recorda'm, llista de correu, condicions, consentiment de reCAPTCHA): la casella a l'esquerra, el text al costat; tota l'etiqueta es clicable i fa com a minim 24 px d'alt (WCAG 2.5.8) */ body.bdrw.bdrt .bdrt-cos .bdrt-casella { display: flex; align-items: flex-start; gap: 10px; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-casella > input:is([type="checkbox"], [type="radio"]) { flex: 0 0 auto; margin: 2px 0 0; } body.bdrw.bdrt .bdrt-cos .bdrt-casella > label { min-height: 24px; margin: 0; font-weight: 400; line-height: 1.5; cursor: pointer; } body.bdrw.bdrt .bdrt-cos .bdrt-files-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } body.bdrw.bdrt .bdrt-cos .bdrt-grup-text { margin: 0; color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-genera { margin: 0; } /* El telefon amb el prefix internacional de WHMCS (intl-tel-input): el camp ocupa tota l'amplada, i el selector del pais sense els grisos i el negre del component */ body.bdrw.bdrt .bdrt-cos .bdrt-camp :is(.intl-tel-input, .iti) { display: block; width: 100%; } body.bdrw.bdrt .bdrt-cos :is(.intl-tel-input, .iti) :is(.selected-flag, .iti__selected-flag) { background-color: transparent !important; } body.bdrw.bdrt .bdrt-cos :is(.intl-tel-input, .iti) :is(.iti-flag, .iti__flag) { background-color: transparent; box-shadow: none; } body.bdrw.bdrt .bdrt-cos :is(.intl-tel-input, .iti) :is(.iti-arrow, .iti__arrow) { border-top-color: var(--navy); border-bottom-color: var(--navy); } body.bdrw.bdrt .bdrt-cos :is(.intl-tel-input, .iti) :is(.country-list, .iti__country-list) { border-color: var(--vora); color: var(--navy); } /* El mesurador de la contrasenya: barra prima amb els colors d'estat (abans el verd i el vermell de Bootstrap) */ body.bdrw.bdrt .bdrt-cos .bdrt-forca { display: flex; flex-direction: column; gap: 6px; } body.bdrw.bdrt .bdrt-cos .bdrt-forca .progress { height: 8px; margin: 0; border-radius: 4px; background: var(--alterna); box-shadow: inset 0 0 0 1px var(--vora); } body.bdrw.bdrt .bdrt-cos .bdrt-forca .progress-bar { border-radius: 4px; background-image: none; background-color: var(--linia-navy); } body.bdrw.bdrt .bdrt-cos .bdrt-forca .progress-bar.bg-danger { background-color: var(--perill) !important; } body.bdrw.bdrt .bdrt-cos .bdrt-forca .progress-bar.bg-warning { background-color: var(--avis) !important; } body.bdrw.bdrt .bdrt-cos .bdrt-forca .progress-bar.bg-success { background-color: var(--exit) !important; } body.bdrw.bdrt .bdrt-cos .bdrt-forca .alert { margin: 8px 0 0; } body.bdrw.bdrt .bdrt-cos .bdrt-forca .alert-info { border-color: var(--clar-navy); background: var(--bdrx-info-fons); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-forca .alert-info .fa { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-forca > br { display: none; } body.bdrw.bdrt .bdrt-cos #inputNewPassword2Msg :where(p) { margin: 4px 0 0; color: var(--perill); font-size: 14px; font-weight: 600; } /* El generador de contrasenyes de WHMCS (la finestra del peu, includes/generate-password.tpl): capcalera sense el blau */ body.bdrw.bdrt #modalGeneratePassword .modal-content { border: 0; border-radius: 16px; color: var(--navy); font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif; } body.bdrw.bdrt #modalGeneratePassword .modal-header { border-bottom: 1px solid var(--vora); background: var(--fons) !important; color: var(--navy) !important; } body.bdrw.bdrt #modalGeneratePassword .modal-title { font-size: 20px; font-weight: 700; } body.bdrw.bdrt #modalGeneratePassword .close { min-width: 44px; min-height: 44px; color: var(--navy); opacity: 1; } body.bdrw.bdrt #modalGeneratePassword .form-control { min-height: 44px; border: 1px solid var(--vora-forta); border-radius: 10px; font-size: 16px; } body.bdrw.bdrt #modalGeneratePassword .btn { min-height: 44px; border-radius: 12px; font-weight: 600; } body.bdrw.bdrt #modalGeneratePassword .btn-primary { border: 0; background: var(--ha-btn-fons); color: var(--ha-btn-text); font-size: var(--ha-btn-mida); font-weight: 700; } body.bdrw.bdrt #modalGeneratePassword .btn-primary:hover { background: var(--ha-btn-hover); } body.bdrw.bdrt #modalGeneratePassword :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: none; } /* Segon factor: el que pinta el modul (camp i boto) amb l'aspecte de la base; el seu boto es l'accio principal */ body.bdrw.bdrt .bdrt-cos .bdrt-2fa-modul { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-2fa-modul :where(div, p) { margin: 0; text-align: left; } body.bdrw.bdrt .bdrt-cos .bdrt-2fa-modul :is(input[type="text"], input[type="number"], input[type="tel"]) { width: 100%; max-width: 280px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--vora-forta); border-radius: 10px; background: var(--fons); color: var(--navy); font-size: 22px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; } body.bdrw.bdrt .bdrt-cos .bdrt-2fa-modul :is(.btn-primary, input[type="submit"], button[type="submit"]) { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 52px; padding: 10px 28px; border: 0; border-radius: 14px; background: var(--ha-btn-fons); color: var(--ha-btn-text); font-size: var(--ha-btn-mida); font-weight: 700; } body.bdrw.bdrt .bdrt-cos .bdrt-2fa-modul :is(.btn-primary, input[type="submit"], button[type="submit"]):hover { background: var(--ha-btn-hover); color: var(--ha-btn-text); } body.bdrw.bdrt .bdrt-cos .bdrt-2fa-modul br { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-codi { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-codi code { display: inline-block; padding: 12px 18px; border: 1px solid var(--vora); border-radius: 12px; background: var(--alterna); color: var(--navy); font-size: clamp(20px, 4vw, 26px); font-weight: 700; letter-spacing: 0.08em; overflow-wrap: anywhere; user-select: all; } /* Invitacio: les dues opcions en dues columnes des de 900 px */ body.bdrw.bdrt .bdrt-dues { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 900px) { body.bdrw.bdrt .bdrt-dues { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } body.bdrw.bdrt .bdrt-ajuda-cos.bdrt-invitacio { max-width: 980px; } } body.bdrw.bdrt .bdrt-cos .bdrt-invitacio-qui { font-size: 18px; } body.bdrw.bdrt .bdrt-cos .bdrt-intro :where(p) { margin: 0 0 8px; } /* Comptes: la fitxa del compte i la llista per triar-ne un (cada compte es un boto) */ body.bdrw.bdrt .bdrt-cos .bdrt-compte-fitxa { gap: 4px; } body.bdrw.bdrt .bdrt-cos .bdrt-compte-correu { color: var(--secundari); overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-comptes-llista { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-compte-boto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; min-height: 56px; padding: 12px 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); color: var(--navy); font: inherit; font-weight: 600; text-align: left; cursor: pointer; } body.bdrw.bdrt .bdrt-cos .bdrt-compte-boto:hover:not(:disabled) { border-color: var(--linia-navy); background: var(--alterna); } body.bdrw.bdrt .bdrt-cos .bdrt-compte-boto:disabled { color: var(--secundari); cursor: default; } body.bdrw.bdrt .bdrt-cos .bdrt-compte-boto .bdrt-compte-nom { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-cos .bdrt-compte-boto:disabled .bdrt-compte-nom { text-decoration: none; } /* IP bloquejada, acces denegat: dades en una llista de definicions, permisos en una llista */ body.bdrw.bdrt .bdrt-cos .bdrt-dades { display: flex; flex-direction: column; gap: 0; margin: 0; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-dades > div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 14px 20px; } body.bdrw.bdrt .bdrt-cos .bdrt-dades > div + div { border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos .bdrt-dades dt { flex: 0 0 180px; margin: 0; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-dades dd { flex: 1 1 200px; margin: 0; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-permisos { margin: 0; padding-left: 1.25em; } /* Pagina no trobada: els llocs on anar */ body.bdrw.bdrt .bdrt-cos .bdrt-enllacos { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-enllacos a { display: inline-flex; align-items: center; min-height: 44px; } body.bdrw.bdrt .bdrt-cos .bdrt-error-origen { margin: 0; overflow-wrap: anywhere; } /* Preus dels dominis: filtres (cercador i categories com a botons de commutacio) i la taula */ body.bdrw.bdrt .bdrt-ajuda-cos.bdrt-preus-dominis { max-width: none; } body.bdrw.bdrt .bdrt-cos .bdrt-filtres { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-filtres[hidden] { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-filtres .bdrt-cerca { max-width: 520px; } body.bdrw.bdrt .bdrt-cos .bdrt-cats { display: flex; flex-direction: column; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-cats-botons { display: flex; flex-wrap: wrap; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-cat { min-height: 44px; padding: 8px 14px; font-size: 15px; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-cat[aria-pressed="true"] { box-shadow: none; background: var(--navy); color: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-cat-n { font-weight: 400; } body.bdrw.bdrt .bdrt-cos .bdrt-filtres-estat { margin: 0; color: var(--secundari); font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-filtres-estat:empty { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } body.bdrw.bdrt .bdrt-cos .bdrt-preus-taula tr[hidden] { display: none !important; } body.bdrw.bdrt .bdrt-cos .bdrt-preus-taula th[scope="row"] { font-weight: 700; white-space: nowrap; } body.bdrw.bdrt .bdrt-cos .bdrt-nota { margin: 0; color: var(--secundari); font-size: 15px; max-width: 72ch; } body.bdrw.bdrt .bdrt-cos .bdrt-moneda { display: flex; flex-direction: column; gap: 8px; max-width: 420px; } body.bdrw.bdrt .bdrt-cos .bdrt-moneda label { margin: 0; font-weight: 600; } /* Textos legals (bdr-legal: l'avis legal de la fase 0 i l'embolcall dels altres sis): el text a uns 72 caracters per linia, el H1 de la plantilla amb l'aspecte de la capcalera de pagina (els que el porten), l'index plegat que hi posa js/bdr-tema.js i les taules de la base (tarjetes per sota de 768 px) */ body.bdrw.bdrt .bdrt-legal-cru .legal-page { padding: 0 !important; } body.bdrw.bdrt .bdrt-legal-cru .legal-page > .container { width: auto; max-width: none !important; margin: 0; padding: 0; } body.bdrw.bdrt .bdrt-legal-cru :where(h1) { margin: 0 0 16px !important; color: var(--navy); font-size: clamp(30px, 24px + 2vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: break-word; } body.bdrw.bdrt .bdrt-legal :where(p, li, h2, h3, ul, ol, hr) { max-width: 72ch; } body.bdrw.bdrt .bdrt-legal-cru :where(p, li) { font-size: 17px; line-height: 1.65; overflow-wrap: break-word; } body.bdrw.bdrt .bdrt-legal-cru .lead { font-size: 19px; } body.bdrw.bdrt .bdrt-legal-cru :where(h2) { margin: 40px 0 12px !important; color: var(--navy); font-size: clamp(21px, 18px + 0.7vw, 25px); font-weight: 700; line-height: 1.25; } body.bdrw.bdrt .bdrt-legal-cru :where(h3) { margin: 28px 0 10px; color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.3; } body.bdrw.bdrt .bdrt-legal-cru .mb-4 > :where(h2) { margin-top: 32px !important; } body.bdrw.bdrt .bdrt-legal :is(.text-muted, .small) { color: var(--secundari) !important; } body.bdrw.bdrt .bdrt-legal hr { margin: 40px 0 24px; border-top: 1px solid var(--vora); } body.bdrw.bdrt .bdrt-legal code { padding: 1px 6px; border-radius: 6px; background: var(--alterna); color: var(--navy); font-size: 0.92em; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-legal :where(h2[id]) { scroll-margin-top: 96px; } body.bdrw.bdrt .bdrt-legal .table-responsive { max-width: 100%; overflow-x: auto; } body.bdrw.bdrt .bdrt-legal .table-bordered, body.bdrw.bdrt .bdrt-legal .table-bordered :is(th, td) { border-color: var(--vora); } body.bdrw.bdrt .bdrt-legal .table { max-width: 100%; margin: 16px 0 8px; } body.bdrw.bdrt .bdrt-legal .table td { vertical-align: top; } /* L'index plegat (js/bdr-tema.js): un details amb la llista dels apartats */ body.bdrw.bdrt .bdrt-index { max-width: 72ch; margin: 8px 0 32px; border: 1px solid var(--vora); border-radius: 16px; background: var(--alterna); } body.bdrw.bdrt .bdrt-index > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 20px; color: var(--navy); font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; } body.bdrw.bdrt .bdrt-index > summary::-webkit-details-marker { display: none; } body.bdrw.bdrt .bdrt-index > summary::after { content: ''; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; transition: transform 0.15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } body.bdrw.bdrt .bdrt-index[open] > summary::after { transform: rotate(180deg); } body.bdrw.bdrt .bdrt-index ol { margin: 0; padding: 0 20px 16px; list-style: none; } body.bdrw.bdrt .bdrt-index li { max-width: none; margin: 0; padding: 2px 0; font-size: 16px; } body.bdrw.bdrt .bdrt-index a { display: inline-flex; align-items: center; min-height: 32px; color: var(--bdrx-enllac); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-index :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; } /* Retoc de la fase 3 (09/10/2026, mesurat a 1440 px): al registre, els grups de camps de dins de #containerNewUserSignup no son fills del formulari (que els separa 28 px) i el titol «Adreça de facturació» quedava enganxat a la fila de camps de sobre; ara, el mateix aire que entre la resta de grups */ body.bdrw.bdrt .bdrt-cos .bdrt-registre-form .bdrt-grup + .bdrt-grup { margin-top: 28px; } /* ========================================================================================================= Fase 4a (area de client: inici, serveis, la fitxa d'un servei, la baixa i el canvi de pla), 09/10/2026 ========================================================================================================= */ body.bdrw.bdrt .bdrt-cos :where(.bdrt-inici, .bdrt-servei, .bdrt-baixa, .bdrt-canvi) :where(h2, h3, p, ul, ol, dl, dd, fieldset) { margin: 0; } body.bdrw.bdrt .bdrt-cos :where(.bdrt-inici, .bdrt-servei, .bdrt-canvi) :where(ul, ol)[role="list"] { padding: 0; list-style: none; } /* Llista de definicions de la base (dades del servei, facturacio, el servei de la baixa): l'etiqueta a sobre, en gris fosc. Classe propia (bdrt-fitxa): .bdrt-dades es la de la fase 3 (IP bloquejada, acces denegat), amb vora i files, i no es toca */ body.bdrw.bdrt .bdrt-cos .bdrt-fitxa { display: flex; flex-direction: column; gap: 14px; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-fitxa > div { min-width: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-fitxa dt { margin: 0 0 2px; color: var(--secundari); font-size: 14px; font-weight: 600; line-height: 1.4; } body.bdrw.bdrt .bdrt-cos .bdrt-fitxa dd { margin: 0; color: var(--navy); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-fitxa-graella { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px 24px; } body.bdrw.bdrt .bdrt-cos .bdrt-xifra-text { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } /* El boto destructiu (pla 5.4): contorn i text #B42318, mai un bloc vermell */ body.bdrw.bdrt .bdrt-cos .bdrx-btn.bdrt-btn-perill { background: var(--fons); color: var(--perill); box-shadow: inset 0 0 0 1.5px var(--perill); } body.bdrw.bdrt .bdrt-cos .bdrx-btn.bdrt-btn-perill:hover { background: var(--perill-fons); color: var(--perill); } /* Inici: quatre xifres (enllacos a les llistes) i els taulers de WHMCS com a tarjetes */ body.bdrw.bdrt .bdrt-inici { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); } body.bdrw.bdrt .bdrt-cos .bdrt-recomptes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 900px) { body.bdrw.bdrt .bdrt-cos .bdrt-recomptes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } body.bdrw.bdrt .bdrt-cos a.bdrt-recompte { display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 96px; padding: 16px 18px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); color: var(--navy); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.bdrw.bdrt .bdrt-cos a.bdrt-recompte:hover { border-color: var(--linia-navy); box-shadow: var(--ombra); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-recompte-n { font-size: clamp(28px, 24px + 1vw, 34px); font-weight: 700; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; } body.bdrw.bdrt .bdrt-cos .bdrt-recompte-et { font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos a.bdrt-recompte.bdrt-recompte-avis { border-color: #F2D894; background: var(--avis-fons); color: var(--avis); } body.bdrw.bdrt .bdrt-cos a.bdrt-recompte.bdrt-recompte-avis:hover { border-color: var(--avis); color: var(--avis); } body.bdrw.bdrt .bdrt-panells { display: flex; flex-direction: column; gap: 24px; } body.bdrw.bdrt .bdrt-panells > *, body.bdrw.bdrt .bdrt-panells-graella > * { min-width: 0; } body.bdrw.bdrt .bdrt-panells-graella { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 1200px) { body.bdrw.bdrt .bdrt-panells-graella { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.bdrw.bdrt .bdrt-cos .bdrt-panell { min-width: 0; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); overflow: hidden; } /* Amb un desplegable d'accions obert (el del darrer servei surt per sota del tauler), el tauler no el retalla */ body.bdrw.bdrt .bdrt-cos .bdrt-panell:has(.dropdown-menu.show) { overflow: visible; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; border-bottom: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos .bdrt-panell-titol { margin: 0; color: var(--navy); font-size: 18px; font-weight: 700; line-height: 1.35; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-titol .badge { margin-left: 6px; vertical-align: middle; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-boto { min-height: 44px; padding: 0 16px; font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-boto i { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos { padding: 16px 20px; color: var(--navy); font-size: 15px; line-height: 1.55; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos :where(p) { margin: 0 0 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos :where(p):last-child { margin-bottom: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-llista { margin: 0; border: 0; border-radius: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-llista > .list-group-item { margin: 0; padding: 14px 20px; border: 0; border-top: 1px solid var(--vora-suau); border-radius: 0; background: var(--fons); color: var(--navy); font-size: 15px; line-height: 1.5; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-llista > .list-group-item:first-child { border-top: 0; } /* El JavaScript de WHMCS posa en linia una vora #DDDDDD sota l'ultim servei actiu (fora de la paleta): la separacio ja es la vora de dalt de cada element */ body.bdrw.bdrt .bdrt-cos .bdrt-panell-llista > .list-group-item { border-bottom: 0 !important; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos + .bdrt-panell-llista > .list-group-item:first-child { border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos .bdrt-panell-llista > a.list-group-item { text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-llista > a.list-group-item:hover { background: var(--alterna); color: var(--navy); } /* L'anell de focus de l'element de la llista, per dins (el tauler retalla el que en surt) */ body.bdrw.bdrt .bdrt-cos .bdrt-panell :is(.list-group-item, a, button):focus-visible { outline-offset: -3px; } /* Les icones de WHMCS fora, llevat de la de «carregant» de les accions dels moduls (el seu JavaScript la mostra) */ body.bdrw.bdrt .bdrt-cos .bdrt-panell-llista i[class*="fa-"]:not(.fa-spinner) { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-peu { padding: 12px 20px; border-top: 1px solid var(--vora-suau); font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-peu :where(p) { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-peu .btn { min-height: 44px; } /* El cos que pinta WHMCS: formulari de registrar domini (input-group), textos i enllacos */ body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos .input-group { display: flex; flex-wrap: wrap; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos .input-group > .form-control { flex: 1 1 200px; width: auto; min-width: 0; border-radius: 10px !important; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos :is(.input-group-btn, .input-group-append) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-panell-cos :is(.input-group-btn, .input-group-append) > .btn { border-radius: 12px !important; } /* Els serveis actius (includes/active-products-services-item.tpl, el pinta WHMCS dins del tauler): estat, nom i botons */ body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; cursor: pointer; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-status { flex: 0 0 auto; width: auto !important; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-status .label-placeholder { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-status .label { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border: 1px solid var(--clar-navy); border-radius: 8px; background: var(--bdrx-info-fons); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.3; text-transform: none; white-space: nowrap; /* El tema de WHMCS, per sota de 768 px, li dona 3rem i talla el text («Actiu», «Suspès»): aqui, l'amplada del text */ width: auto; overflow: visible; text-overflow: clip; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-status .label-success { border-color: #B7DEC6; background: var(--exit-fons); color: var(--exit); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-status .label-warning { border-color: #F2D894; background: var(--avis-fons); color: var(--avis); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-status .label-danger { border-color: #F4B7B2; background: var(--perill-fons); color: var(--perill); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-name { display: flex; flex: 1 1 220px; flex-direction: column; min-width: 0; gap: 2px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-name { margin: 0; } /* El tema de WHMCS talla el nom amb punts suspensius en una sola linia: aqui parteix linia i es llegeix sencer */ body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-name > span { white-space: normal; overflow: visible; text-overflow: clip; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-name .font-weight-bold { font-weight: 600 !important; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-name .text-domain { color: var(--secundari); font-size: 14px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Les accions de cada servei, sempre com a botons amb text (el tema de WHMCS, per sota de 768 px, les amaga i en deixa un desplegable nomes amb la fletxa i el boto de detalls nomes amb la icona). El desplegable de dalt (btn-group-primary) repeteix les mateixes accions que els botons (el principal i el desplegable de la resta): no es pinta. */ body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons .btn-group { display: inline-flex; gap: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons:has(.btn-group-secondary) .btn-group-primary { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons .btn { min-height: 44px; padding: 6px 14px; font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons .btn-primary { border: 0; background: var(--taronja); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons .btn-primary:hover { background: var(--taronja-hover); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons :is(.btn-default, .btn-view-details) { border: 0; background: var(--fons); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons :is(.btn-default, .btn-view-details):hover { background: var(--alterna); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .btn-view-details > i { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .btn-view-details > span:not(.sr-only) { display: inline; } /* El text visible ja dona el nom al boto: la copia per a lector de pantalla el faria llegir dues vegades */ body.bdrw.bdrt .bdrt-cos .bdrt-panell .btn-view-details > .sr-only { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .dropdown-menu { border: 1px solid var(--vora); border-radius: 12px; box-shadow: var(--ombra); } body.bdrw.bdrt .bdrt-cos .bdrt-panell .dropdown-item { min-height: 44px; display: flex; align-items: center; color: var(--navy); font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .btn-view-more { min-height: 44px; } /* Serveis: la columna de l'estat SSL estreta, el domini i el cicle com a segona linia */ body.bdrw.bdrt .bdrt-cos .bdrt-serveis-taula .bdrt-col-ssl { width: 56px; text-align: center; } body.bdrw.bdrt .bdrt-cos .bdrt-serveis-taula .bdrt-col-ssl img { width: 24px; height: auto; } body.bdrw.bdrt .bdrt-cos .bdrt-taula-sec { display: block; color: var(--secundari); font-size: 14px; font-weight: 400; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-xifra .bdrt-cicle { white-space: normal; } @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos .bdrt-serveis-taula > tbody > tr > td.bdrt-col-ssl:not(.ssl-info):not(:has(img)) { display: none !important; } body.bdrw.bdrt .bdrt-cos .bdrt-serveis-taula > tbody > tr > td.bdrt-col-servei { flex-direction: column; align-items: flex-start; text-align: left; } body.bdrw.bdrt .bdrt-cos .bdrt-serveis-taula > tbody > tr > td.bdrt-col-servei::before { margin-bottom: 4px !important; } } /* La fitxa del servei: resum, accions, seccions i us */ body.bdrw.bdrt .bdrt-cos .bdrt-servei { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-servei > .tab-pane { min-width: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-cos { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); } body.bdrw.bdrt .bdrt-cos .bdrt-servei > .tab-pane > .bdrt-seccio, body.bdrw.bdrt .bdrt-cos .bdrt-servei-cos > .bdrt-seccio { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-resum { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-servei-resum-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-accions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 4px; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-accions .bdrx-btn { min-height: 44px; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-baixa-feta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #F2D894; border-radius: 12px; background: var(--avis-fons); color: var(--avis); font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-enganx:empty { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-us { display: flex; flex-direction: column; gap: 16px; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-us-fila dt { margin: 0 0 4px; color: var(--navy); font-size: 16px; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-us-fila dd { display: flex; flex-direction: column; gap: 8px; margin: 0; max-width: 520px; color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-us-text { font-variant-numeric: lining-nums tabular-nums; } body.bdrw.bdrt .bdrt-cos .bdrt-us-barra { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--alterna); box-shadow: inset 0 0 0 1px var(--vora-forta); overflow: hidden; } body.bdrw.bdrt .bdrt-cos .bdrt-us-barra > span { display: block; height: 100%; min-width: 2px; border-radius: 5px; background: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-us-barra.bdrt-us-avis > span { background: var(--avis); } body.bdrw.bdrt .bdrt-cos .bdrt-us-barra.bdrt-us-perill > span { background: var(--perill); } body.bdrw.bdrt .bdrt-cos .bdrt-us-nota { color: var(--avis); font-size: 14px; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-us-nota-perill { color: var(--perill); } body.bdrw.bdrt .bdrt-cos .bdrt-us-data { color: var(--secundari); font-size: 14px; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-llista { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-element { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-servei-element-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-element-titol { margin: 0; font-size: 17px; font-weight: 700; } /* Entrega 4b: les accions d'un extra (fitxa del domini i del servei), en fila i separades */ body.bdrw.bdrt .bdrt-cos .bdrt-servei-element-accions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-servei .tab-pane .bdrt-formulari { max-width: 760px; } /* La sortida dels moduls: dins de la columna, sense desbordar la pagina */ body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul { display: flow-root; min-width: 0; max-width: 100%; overflow-x: auto; color: var(--navy); } /* Les classes de WHMCS es conserven (product-details-tab-container, module-client-area), pero no la caixa del tema (vora gris #DDD sense la de dalt i marges propis): la seccio ja fa de caixa */ body.bdrw.bdrt .bdrt-cos div.bdrt-servei-modul.product-details-tab-container { margin: 0; padding: 0; border: 0; background: none; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul.module-client-area { text-align: left; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul img { max-width: 100%; height: auto; } /* Plesk (modules/servers/plesk/templates/overview.tpl, no es toca): fora el bloc gran de Sitejet amb la vista previa i el logotip (decisio 5: l'accio es un boto del resum), el de l'us amb els dials i «Il·limitat» (decisio 6: el resum en porta un de propi) i el resum de facturacio (repetit al resum). La resta (dreceres, WordPress, extres, opcions, informacio) es veu */ body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul #PleskPackagePanel { display: none; } /* Mentre es publica el que s'ha fet amb Sitejet (en tornar del constructor, el JavaScript del modul mostra #sitejetAlert i la barra de progres, dins de #PleskPackagePanel): el bloc torna, pero nomes amb l'avis i la barra (sense :has(), amagat) */ body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul #PleskPackagePanel:has(#sitejetAlert:not([style*="none"])) { display: block; border: 0; background: none; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul #PleskPackagePanel:has(#sitejetAlert:not([style*="none"])) :is(.card-header, .row > .col-sm-6:first-child, .plesk-package-details, .plesk-package-details + p) { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul #PleskPackagePanel:has(#sitejetAlert:not([style*="none"])) :is(.card-body, .row > .col-sm-6) { flex: 0 0 100%; max-width: 100%; padding: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul .card:has(> .plesk-usage-stats), body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul .card:has(#billingCycle) { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul .card-title { font-size: 18px; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul .plesk-feature-row a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ProxmoxVeVpsCloud de ModulesGarden (decisio 7: nomes CSS; els seus fitxers no es toquen). L'aplicacio pinta amb les seves variables dins de #layers2 (i les finestres, a #layers2-body): aqui hi van els colors de la paleta (el blau #2368AD, el verd #62CA5F i el vermell #F55656 del modul no arriben a AA amb text blanc), la lletra Poppins i el text a 6:1. Amb mes especificitat que la seva (#layers2), sense !important */ body.bdrw.bdrt :is(#layers2, #layers2-body) { --type-primary: #3D3D3D; --type-primary-hover: #2A2A2A; --type-primary-active: #111111; --type-primary-faded: #D9D6D1; --type-secondary: #3D3D3D; --type-secondary-hover: #2A2A2A; --type-secondary-active: #111111; --type-secondary-faded: #D9D6D1; --type-info: #3D3D3D; --type-info-hover: #2A2A2A; --type-info-active: #111111; --type-info-faded: #F3F1EE; --type-success: #1F6F46; --type-success-hover: #1F6F46; --type-success-active: #1F6F46; --type-success-faded: #E7F4EC; --type-warning: #8A5A00; --type-warning-hover: #8A5A00; --type-warning-active: #8A5A00; --type-warning-faded: #FFF6E0; --type-danger: #B42318; --type-danger-hover: #B42318; --type-danger-active: #B42318; --type-danger-faded: #FDECEC; --text-default: #3D3D3D; --text-faded: #636363; --components-border: #E1DEDA; } body.bdrw.bdrt #layers2 .lu-app, body.bdrw.bdrt #layers2-body { font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif; } body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul .mg-wrapper { max-width: 100%; } /* La zona de Cloudflare (modules/servers/cloudflare_dns): el codi gris clar #F5F5F5, a la paleta */ body.bdrw.bdrt .bdrt-cos .bdrt-servei-modul .cloudflare-dns-clientarea code { background: var(--alterna); color: var(--navy); } /* La baixa: el tipus com dues opcions amb la seva explicacio */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-baixa-servei, .bdrt-canvi-actual) { padding: 16px 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--alterna); } body.bdrw.bdrt .bdrt-cos .bdrt-opcions-baixa { display: flex; flex-direction: column; gap: 12px; } body.bdrw.bdrt .bdrt-cos .bdrt-opcio-desc { display: block; color: var(--secundari); font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-baixa-domini { padding: 16px 20px; border: 1px solid #F2D894; border-radius: 16px; background: var(--avis-fons); } /* El canvi de pla o d'opcions */ body.bdrw.bdrt .bdrt-cos .bdrt-canvi-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-pla { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-pla-nom { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-pla-desc { color: var(--secundari); font-size: 15px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-pla-desc :where(p, ul) { margin: 0 0 6px; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-pla-form { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-preu { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-opcions { display: flex; flex-direction: column; gap: 20px; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-opcio { gap: 10px; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-ara { color: var(--secundari); font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-ara-et { font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-quantitat .form-control { max-width: 160px; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-taula tfoot :is(th, td) { padding: 12px 14px; border-top: 1px solid var(--vora-suau); background: var(--fons); font-weight: 400; text-align: right; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-taula tfoot .bdrt-canvi-total :is(th, td) { border-top: 2px solid var(--navy); font-size: 18px; font-weight: 700; } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-taula tfoot th { color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-canvi-promo .bdrt-cerca-fila .form-control { min-height: 44px; font-size: 16px; } @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos table.bdrt-canvi-taula > tfoot, body.bdrw.bdrt .bdrt-cos table.bdrt-canvi-taula > tfoot > tr { display: block; width: 100%; } body.bdrw.bdrt .bdrt-cos table.bdrt-canvi-taula > tfoot > tr { display: flex; justify-content: space-between; gap: 16px; } body.bdrw.bdrt .bdrt-cos table.bdrt-canvi-taula > tfoot > tr > :is(th, td) { display: block; border-top: 0; padding: 8px 0; } } /* ========================================================================================================= Entrega 4b (area de client: els dominis, la fitxa d'un domini i les seves pantalles, canviar diversos dominis i els certificats SSL), 09/10/2026 ========================================================================================================= */ body.bdrw.bdrt .bdrt-cos :where(.bdrt-dominis, .bdrt-dom-fitxa, .bdrt-domini-pantalla, .bdrt-ssl) :where(h2, h3, p, ul, ol, dl, dd, fieldset) { margin: 0; } body.bdrw.bdrt .bdrt-cos :where(.bdrt-dominis, .bdrt-dom-fitxa, .bdrt-domini-pantalla, .bdrt-ssl) :where(ul, ol)[role="list"] { padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos :is(.bdrt-domini-pantalla, .bdrt-ssl) { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); max-width: 980px; } body.bdrw.bdrt .bdrt-cos .bdrt-h3 { margin: 0; color: var(--navy); font-size: 18px; font-weight: 700; line-height: 1.35; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-nota { margin: 0; color: var(--secundari); font-size: 14px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-peu-nota { margin: 0; color: var(--secundari); font-size: 14px; } /* Els dominis: les accions per als marcats, botons amb text en fila sobre la taula; la casella i l'estat SSL estrets */ body.bdrw.bdrt .bdrt-cos form.bdrt-dominis { display: flex; flex-direction: column; gap: 20px; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-accions { display: flex; flex-direction: column; gap: 10px; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-botons { display: flex; flex-wrap: wrap; gap: 10px; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-botons .bdrx-btn { min-height: 44px; padding: 8px 16px; font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula :is(.bdrt-col-marca, .bdrt-col-ssl) { width: 56px; text-align: center; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula .bdrt-col-marca input { width: 24px; height: 24px; margin: 0; vertical-align: middle; cursor: pointer; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula .bdrt-col-ssl img { width: 24px; height: auto; } body.bdrw.bdrt .bdrt-cos .bdrt-col-estat { white-space: normal; } body.bdrw.bdrt .bdrt-cos .bdrt-col-estat .bdrt-estat { margin: 2px 6px 2px 0; } /* El domini es la capcalera de cada fila (th scope=row): es veu com les altres cel·les */ body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula > tbody > tr > th.bdrt-col-domini { padding: 10px 8px; border-color: var(--vora); background-color: var(--fons); font-size: .9em; font-weight: 400; text-align: left; vertical-align: middle; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula > tbody > tr:hover > th.bdrt-col-domini { background: var(--alterna); } /* L'avis de cap domini marcat (js/bdr-tema.js): buit, no ocupa res */ body.bdrw.bdrt .bdrt-cos .bdrt-dominis-cap:empty { display: block; margin: 0; padding: 0; border: 0; } @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula > tbody > tr > td.bdrt-col-ssl:not(:has(img)) { display: none !important; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula > tbody > tr > td:is(.bdrt-col-marca, .bdrt-col-ssl) { width: 100%; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula > tbody > tr > th.bdrt-col-domini { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--vora-suau); background: transparent; color: inherit; font-size: inherit; text-align: left; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula > tbody > tr > th.bdrt-col-domini + td { border-top: 1px solid var(--vora-suau); } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-taula > tbody > tr > th.bdrt-col-domini[data-label]::before { content: attr(data-label); display: block; color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr > td.bdrt-col-estat { flex-wrap: wrap; justify-content: space-between; } } /* La fitxa del domini: l'estat de la renovacio i del bloqueig, amb la seva etiqueta */ body.bdrw.bdrt .bdrt-cos .bdrt-domini-estat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } /* Les taules amb camps (registres DNS, reenviaments): el camp ocupa la cel·la; la fila nova, sobre gris clar. Per sota de 768 px, a cada tarjeta l'etiqueta va a sobre del camp */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-dns-taula, .bdrt-reenvia-taula) td { vertical-align: top; } body.bdrw.bdrt .bdrt-cos :is(.bdrt-dns-taula, .bdrt-reenvia-taula) .form-control { width: 100%; min-width: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-dns-taula .bdrt-dns-prioritat { max-width: 110px; } body.bdrw.bdrt .bdrt-cos .bdrt-dns-nou > td { background: var(--alterna); } @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos table:is(.bdrt-dns-taula, .bdrt-reenvia-taula) > tbody > tr > td { flex-direction: column; align-items: stretch; gap: 6px; text-align: left; } body.bdrw.bdrt .bdrt-cos .bdrt-dns-nou > td { background: transparent; } body.bdrw.bdrt .bdrt-cos table.bdrt-taula > tbody > tr.bdrt-dns-nou { background: var(--alterna); } body.bdrw.bdrt .bdrt-cos .bdrt-dns-taula .bdrt-dns-prioritat { max-width: none; } } /* Un camp amb un text enganxat darrere («@domini», «.domini»): el text a la vora del camp, del mateix alt */ body.bdrw.bdrt .bdrt-cos .bdrt-amb-sufix { display: flex; align-items: stretch; min-width: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-amb-sufix > .form-control { flex: 1 1 auto; width: auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-sufix { display: inline-flex; flex: 0 1 auto; align-items: center; max-width: 60%; padding: 6px 12px; border: 1px solid var(--vora-forta); border-left: 0; border-radius: 0 10px 10px 0; background: var(--alterna); color: var(--navy); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } /* Un camp de nomes lectura amb el boto de copiar al costat (el codi EPP, el registre DNS del certificat) */ body.bdrw.bdrt .bdrt-cos .bdrt-amb-boto { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } body.bdrw.bdrt .bdrt-cos .bdrt-amb-boto > .form-control { flex: 1 1 240px; width: auto; min-width: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-amb-boto > .bdrx-btn { min-height: 44px; } body.bdrw.bdrt .bdrt-cos .bdrt-codi-camp { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 16px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-codi-camp[readonly] { background: var(--alterna); } /* Les dades de contacte: un grup per tipus, el desplegable i els camps sagnats sota l'opcio que els activa */ body.bdrw.bdrt .bdrt-cos .bdrt-dom-contacte { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-dom-contacte > legend.bdrt-dom-contacte-titol { padding: 0; font-size: 19px; } body.bdrw.bdrt .bdrt-cos .bdrt-sagnat { margin-left: 34px; } body.bdrw.bdrt .bdrt-cos .bdrt-dom-contacte-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px 20px; } @media (max-width: 479.98px) { body.bdrw.bdrt .bdrt-cos .bdrt-sagnat { margin-left: 0; } } /* Canviar diversos dominis: la llista dels dominis afectats */ body.bdrw.bdrt .bdrt-cos .bdrt-dominis-llista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-dominis-llista > li { padding: 6px 12px; border: 1px solid var(--vora); border-radius: 10px; background: var(--alterna); color: var(--navy); font-size: 15px; overflow-wrap: anywhere; } /* Els camps addicionals del modul del certificat: el camp que pinta el modul, dins de la seva etiqueta */ body.bdrw.bdrt .bdrt-cos .bdrt-camp-modul > label { display: flex; flex-direction: column; gap: 6px; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-modul :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--vora-forta); border-radius: 10px; background-color: var(--fons); color: var(--navy); font-size: 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-modul :is(input, select, textarea):focus { border-color: var(--navy); outline: 3px solid var(--navy); outline-offset: 1px; } /* Les adreces de validacio i els noms llargs de les opcions es parteixen si no caben (320 px) */ body.bdrw.bdrt .bdrt-cos .bdrt-ssl .bdrt-casella > label { min-width: 0; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-ssl-metodes { display: flex; flex-direction: column; gap: 16px; } /* Els certificats: les accions en fila dins de la cel·la */ body.bdrw.bdrt .bdrt-cos .bdrt-taula-accions { display: flex; flex-wrap: wrap; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-taula-accions form { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-taula-accions .bdrx-btn { min-height: 44px; padding: 8px 14px; font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-ssl-domini { display: block; margin-bottom: 4px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-ssl-avis.alert { margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--clar-navy); border-radius: 12px; background: var(--bdrx-info-fons); color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-ssl-avis.alert-success { border-color: #B7DEC6; background: var(--exit-fons); color: var(--exit); } body.bdrw.bdrt .bdrt-cos .bdrt-ssl-avis.alert-danger { border-color: #F4B7B2; background: var(--perill-fons); color: var(--perill); } @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos .bdrt-ssl-taula > tbody > tr > td.bdrt-col-domini { flex-direction: column; align-items: flex-start; text-align: left; } body.bdrw.bdrt .bdrt-cos .bdrt-ssl-taula > tbody > tr > td.bdrt-col-accions { flex-direction: column; align-items: flex-start; } /* El nom del certificat i el tipus de validacio no caben en una linia a 320 px: el tipus baixa */ body.bdrw.bdrt .bdrt-cos .bdrt-ssl-taula > tbody > tr > td { flex-wrap: wrap; } } /* La finestra de confirmacio de l'IRTP de WHMCS (#modalIRTPConfirmation): com la del generador de contrasenyes */ body.bdrw.bdrt .bdrt-finestra .modal-content { border: 0; border-radius: 16px; color: var(--navy); font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif; } body.bdrw.bdrt .bdrt-finestra .modal-header { border-bottom: 1px solid var(--vora); background: var(--fons); color: var(--navy); } body.bdrw.bdrt .bdrt-finestra .modal-body { display: flex; flex-direction: column; gap: 16px; } body.bdrw.bdrt .bdrt-finestra .modal-body :where(p) { margin: 0; } body.bdrw.bdrt .bdrt-finestra .close { min-width: 44px; min-height: 44px; color: var(--navy); opacity: 1; } body.bdrw.bdrt .bdrt-finestra :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: none; } /* ========================================================================================================= Entrega 4c (10/10/2026): facturacio i pagaments. Els pressupostos (i el pressupost, pagina sencera com la factura nova), afegir credit, pagar una factura amb targeta o compte (la tria, els camps, l'adreca de facturacio i el resum), les formes de pagament, pagar diverses factures, la verificacio 3-D Secure i el pas cap a la passarel·la, el canvi de pla per la ruta nova i el consum facturable. Les opcions de WHMCS amb iCheck (les formes de pagament: el JavaScript de WHMCS escolta ifChecked) amb la caixa de la base, com la factura nova (bdr-carret.css) ========================================================================================================= */ /* Una nota de text, sense caixa (.bdrt-nota es la caixa de la valoracio de la fase 2) */ body.bdrw.bdrt .bdrt-nota-text { margin: 0; color: var(--secundari); font-size: 15px; line-height: 1.5; max-width: 72ch; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-curt { width: 100%; max-width: 15rem; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } body.bdrw.bdrt .bdrt-cos .bdrt-carregant { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--secundari); } /* Els errors de la validacio de WHMCS: showInputError posa .has-error al grup i ensenya el .field-error-msg */ body.bdrw.bdrt .bdrt-cos .has-error :is(.form-control, .custom-select) { border-color: var(--perill); border-width: 2px; } body.bdrw.bdrt .bdrt-cos .bdrt-camp .field-error-msg { margin: 0; font-weight: 600; } /* La regio d'estat del «Copied!» (js/bdr-tema.js, la crea en carregar al final del contingut): fixa a dalt, perque l'element amagat de 1 px (bdrx-sr, absolut) no allargui el document per sota del body (la comparacio de pixels de les pantalles anteriors ho va trobar: el document passava a desplacar-se fins on acabava el contingut) */ body.bdrw.bdrt .bdrt-cos > .bdrt-copiat-estat { position: fixed !important; top: 0; left: 0; } /* L'error de la finestra de l'adreca nova (json-form de WHMCS: nomes un title al camp) en text sota el camp (js/bdr-tema.js) */ body.bdrw.bdrt .bdrt-cos .bdrt-err-json:not([hidden]) { display: block; color: var(--perill); } /* Els errors de la passarel·la (.gateway-errors, que omplen WHMCS i la passarel·la; neix amagat amb w-hidden) */ body.bdrw.bdrt .bdrt-cos .bdrt-errors-passarela.alert { margin: 0 0 16px; padding: 14px 18px; border: 1px solid #F4B7B2; border-radius: 12px; background: var(--perill-fons); color: var(--perill); text-align: left; } /* Les caselles i opcions amb iCheck: la caixa de 24 px de la base en lloc de la imatge blava de iCheck */ body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue) { position: relative; display: inline-block; flex: 0 0 auto; width: 24px; height: 24px; margin: 0; vertical-align: middle; border: 2px solid var(--vora-forta); border-radius: 6px; background: var(--fons); background-image: none; cursor: pointer; } body.bdrw.bdrt .bdrt-cos .iradio_square-blue { border-radius: 50%; } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).checked { border-color: var(--navy); box-shadow: inset 0 0 0 5px var(--fons); background: var(--navy); } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).focus { outline: 3px solid var(--navy); outline-offset: 2px; } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).disabled { border-color: var(--vora); background: var(--alterna); cursor: not-allowed; } /* Triada i desactivada (el tipus d'una forma de pagament que s'edita): s'ha de veure quina es */ body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).checked.disabled { border-color: var(--secundari); background: var(--secundari); box-shadow: inset 0 0 0 5px var(--fons); } /* Opcions: la casella i el text en una fila de 44 px com a minim, amb vora; la triada amb la vora del text */ body.bdrw.bdrt .bdrt-cos .bdrt-opcio { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); color: var(--navy); font-weight: 400; line-height: 1.5; cursor: pointer; } body.bdrw.bdrt .bdrt-cos .bdrt-opcio:has(.checked, input:checked) { border-color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-opcio-text { min-width: 0; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-grup.bdrt-adreces { gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-adreca-nova { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px 20px; margin-top: 16px; } /* Les llistes de pressupostos i de formes de pagament: el numero o el nom com a capcalera de la fila */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-pressupostos-taula, .bdrt-metodes-taula) tbody th[scope="row"] { font-weight: 700; } /* L'estat i «Per defecte» baixen a una altra linia si no caben: el tema de WHMCS (theme.min.css, «#payMethodList tr td:nth-child(2), ...(3)») deixa aquestes cel·les sense salts de linia i estretes («Predeterminada», en castella, en sortia 8 px). Amb l'id, per guanyar-li */ body.bdrw.bdrt .bdrt-cos #payMethodList.bdrt-metodes-taula > tbody > tr > td { white-space: normal; max-width: none; } /* Al mobil, el boto de descarregar el PDF baixa sota la seva etiqueta si no hi cap al costat (a 320 px en sortia 6 px) */ @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos .bdrt-pressupostos-taula > tbody > tr > td.bdrt-col-accions { flex-wrap: wrap; } body.bdrw.bdrt .bdrt-cos .bdrt-pressupostos-taula > tbody > tr > td.bdrt-col-accions form { min-width: 0; max-width: 100%; margin-left: auto; } body.bdrw.bdrt .bdrt-cos .bdrt-pressupostos-taula > tbody > tr > td.bdrt-col-accions .bdrx-btn { max-width: 100%; white-space: normal; } /* L'estat i «Per defecte» de les formes de pagament: a 320 px no cabien al costat de l'etiqueta (en castella, 4 px): baixen */ body.bdrw.bdrt .bdrt-cos .bdrt-metodes-taula > tbody > tr > td { flex-wrap: wrap; row-gap: 6px; } } body.bdrw.bdrt .bdrt-cos .bdrt-metodes-afegeix { margin: 0 0 20px; } body.bdrw.bdrt .bdrt-cos .bdrt-metode-nom { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos a.bdrx-btn.disabled { opacity: 1; color: var(--secundari); background: var(--alterna); box-shadow: inset 0 0 0 1.5px var(--vora); pointer-events: none; } /* Pagar una factura: el pagament i el resum en dues columnes des de 1024 px */ body.bdrw.bdrt .bdrt-cos .bdrt-pagament-graella { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; } @media (min-width: 1024px) { body.bdrw.bdrt .bdrt-cos .bdrt-pagament-graella { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } body.bdrw.bdrt .bdrt-cos .bdrt-pagament-dades { display: flex; flex-direction: column; gap: 20px; min-width: 0; } body.bdrw.bdrt .bdrt-cos :is(.bdrt-pagament-dades .bdrt-seccio, .bdrt-pagament-resum-cos) { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-pagament-resum-cos { display: flex; flex-direction: column; gap: 12px; } body.bdrw.bdrt .bdrt-cos .cc-payment-form { display: flex; flex-direction: column; gap: 16px; } /* Dins dels contenidors que WHMCS ensenya i amaga (la targeta o el compte nou, sense flex): l'aire entre camps */ body.bdrw.bdrt .bdrt-cos .cc-payment-form > div > :is(.bdrt-camp, .bdrt-grup) + :is(.bdrt-camp, .bdrt-grup) { margin-top: 16px; } /* La casella de desar la targeta: nativa, de 24 px, en lloc de l'interruptor bootstrapSwitch de WHMCS */ body.bdrw.bdrt .bdrt-cos .bdrt-desa-targeta .bdrt-casella > input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-pag-tria { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-metodes { display: flex; flex-direction: column; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-metode { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-metode-etiqueta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; margin: 0; font-weight: 500; cursor: pointer; } body.bdrw.bdrt .bdrt-cos :is(.bdrt-metode-desc, .bdrt-metode-data) { color: var(--secundari); font-size: 15px; font-weight: 400; } body.bdrw.bdrt .bdrt-cos .bdrt-metode-caducat .bdrt-metode-etiqueta { cursor: not-allowed; } body.bdrw.bdrt .bdrt-cos .bdrt-pag-segur { display: flex; align-items: flex-start; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-pag-segur svg { flex: 0 0 auto; margin-top: 2px; } body.bdrw.bdrt .bdrt-cos .bdrt-pagament-remot iframe, body.bdrw.bdrt .bdrt-cos .bdrt-metode-pagament iframe, body.bdrw.bdrt .bdrt-cos .bdrt-3ds-marc { display: block; width: 100%; max-width: 100%; min-height: 500px; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); } /* El marc del banc rep el focus amb el tabulador (el focus entra a la pagina del banc): l'anell de la base al marc */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-pagament-remot, .bdrt-metode-pagament) iframe:is(:focus, .bdrt-marc-focus), body.bdrw.bdrt .bdrt-cos .bdrt-3ds-marc:is(:focus, .bdrt-marc-focus) { outline: 3px solid var(--navy); outline-offset: 2px; } /* Els resums de factura (la que es paga i les de pagar-ne diverses): el text a l'esquerra, l'import a la dreta */ body.bdrw.bdrt .bdrt-cos .bdrt-pag-resum-taula tfoot th { font-weight: 500; } body.bdrw.bdrt .bdrt-cos .bdrt-pag-resum-taula tfoot .bdrt-canvi-total :is(th, td) { font-weight: 700; } body.bdrw.bdrt .bdrt-cos .bdrt-taula-titol { caption-side: top; padding: 0 0 8px; color: var(--navy); font-size: 18px; font-weight: 700; text-align: left; } body.bdrw.bdrt .bdrt-cos .bdrt-pagament-multiple { display: flex; flex-direction: column; gap: 24px; } body.bdrw.bdrt .bdrt-cos .bdrt-mp-totals > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-mp-totals dd { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } body.bdrw.bdrt .bdrt-cos .bdrt-mp-total :is(dt, dd) { color: var(--navy); font-size: 18px; font-weight: 700; } /* Afegir o editar una forma de pagament: els grups de WHMCS (fieldgroup-*) i la finestra de l'adreca nova */ body.bdrw.bdrt .bdrt-cos .bdrt-metode-pagament .bdrt-targeta-form > :where(div, fieldset) { margin: 0; } /* L'aire entre camps amb marges i no amb gap: WHMCS ensenya els grups amb show(), que els posa display: block en linia */ body.bdrw.bdrt .bdrt-cos .bdrt-metode-pagament :is(.fieldgroup-creditcard, .fieldgroup-bankaccount, .cc-details) > * + * { margin-top: 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-metode-pagament :is(.fieldgroup-creditcard, .fieldgroup-bankaccount, .fieldgroup-auxfields, .fieldgroup-loading, .fieldgroup-remoteinput).w-hidden { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-mp-tipus { flex-direction: row; flex-wrap: wrap; gap: 8px; } body.bdrw.bdrt .bdrt-cos .bdrt-mp-tipus > .bdrt-opcio { width: auto; } /* L'adreca de facturacio desada (account-paymentmethods-billing-contacts.tpl, la de sempre, que WHMCS torna a pintar per AJAX) */ body.bdrw.bdrt .bdrt-cos #billingContactsContainer > #innerBillingContactsContainer { display: flex; flex-direction: column; gap: 8px; } body.bdrw.bdrt .bdrt-cos #innerBillingContactsContainer > br { display: none; } body.bdrw.bdrt .bdrt-cos #innerBillingContactsContainer > label.form-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); color: var(--navy); font-weight: 400; line-height: 1.5; cursor: pointer; } body.bdrw.bdrt .bdrt-cos #innerBillingContactsContainer > label.form-check:has(.checked, input:checked) { border-color: var(--navy); } body.bdrw.bdrt .bdrt-finestra .bdrt-mp-adreca-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px 20px; } body.bdrw.bdrt .bdrt-finestra .bdrt-camp { display: flex; flex-direction: column; gap: 6px; margin: 0; } body.bdrw.bdrt .bdrt-finestra :is(.form-control, .custom-select) { min-height: 44px; height: auto; padding: 10px 14px; border: 1px solid var(--vora-forta); border-radius: 10px; background-color: var(--fons); color: var(--navy); font-size: 16px; } body.bdrw.bdrt .bdrt-finestra :is(.form-control, .custom-select):focus { border-color: var(--navy); box-shadow: none; outline: 3px solid var(--navy); outline-offset: 1px; } body.bdrw.bdrt .bdrt-finestra label { color: var(--navy); font-weight: 500; } body.bdrw.bdrt .bdrt-finestra .modal-footer.bdrt-botons { justify-content: flex-start; } /* La verificacio 3-D Secure i el pas cap a la passarel·la: l'avis, l'espera i el formulari de la passarel·la */ body.bdrw.bdrt .bdrt-cos .bdrt-pas-pagament { display: flex; flex-direction: column; gap: 20px; max-width: 820px; } body.bdrw.bdrt .bdrt-cos .bdrt-3ds { padding: 12px; border: 1px solid var(--vora); border-radius: 16px; } body.bdrw.bdrt .bdrt-cos .bdrt-roda { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; border: 3px solid var(--vora); border-top-color: var(--navy); border-radius: 50%; animation: bdrx-gira 0.9s linear infinite; } body.bdrw.bdrt .bdrt-cos .bdrt-passarela-boto :is(input[type="submit"], button[type="submit"], .btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 24px; border: 0; border-radius: 14px; background: var(--ha-btn-fons); color: var(--ha-btn-text); font-size: var(--ha-btn-mida); font-weight: 700; cursor: pointer; } body.bdrw.bdrt .bdrt-cos .bdrt-passarela-boto :is(input[type="submit"], button[type="submit"], .btn):hover { background: var(--ha-btn-hover); } body.bdrw.bdrt .bdrt-cos .bdrt-passarela-boto :is(input[type="image"], img) { max-width: 100%; height: auto; } /* El canvi de pla per la ruta nova: una tarjeta per pla, en graella */ body.bdrw.bdrt .bdrt-cos .bdrt-canvi-producte { display: flex; flex-direction: column; gap: 32px; } body.bdrw.bdrt .bdrt-cos .bdrt-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-pla { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-pla-actual { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-pla-nom { margin: 0; color: var(--navy); font-size: 18px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-pla-marques { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-pla-desc { color: var(--secundari); font-size: 15px; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-pla-desc :where(p, ul) { margin: 0 0 6px; } body.bdrw.bdrt .bdrt-cos .bdrt-pla-carac { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-pla-carac > li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--vora-suau); font-size: 15px; } body.bdrw.bdrt .bdrt-cos .bdrt-pla-carac-valor { font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-pla-form { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } /* El consum facturable a la fitxa del servei */ body.bdrw.bdrt .bdrt-cos .bdrt-consum-boto { margin-top: 8px; } body.bdrw.bdrt .bdrt-finestra .bdrt-consum-trams { width: 100%; margin: 0; } body.bdrw.bdrt .bdrt-finestra .bdrt-consum-trams :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--vora-suau); color: var(--navy); } body.bdrw.bdrt .bdrt-finestra .bdrt-consum-trams .bdrt-xifra { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; } /* El pressupost (bdr_t/viewquote.tpl): el document de la factura nova (bdr-carret.css) amb l'estat de la marca, la proposta i la finestra d'acceptar */ body.bdrw.bdrt.bdrt-pressupost .bdrt-estat { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.3; } body.bdrw.bdrt.bdrt-pressupost .bdrt-estat-exit { background: var(--exit-fons); color: var(--exit); } body.bdrw.bdrt.bdrt-pressupost .bdrt-estat-avis { background: var(--avis-fons); color: var(--avis); } body.bdrw.bdrt.bdrt-pressupost .bdrt-estat-perill { background: var(--perill-fons); color: var(--perill); } body.bdrw.bdrt.bdrt-pressupost .bdrt-estat-neutre { background: var(--bdrx-info-fons); color: var(--navy); } body.bdrw.bdrt.bdrt-pressupost .bdrt-pre-text { color: var(--navy); overflow-wrap: anywhere; } body.bdrw.bdrt.bdrt-pressupost .bdrt-pre-text :where(p, ul, ol) { margin: 0 0 8px; } body.bdrw.bdrt.bdrt-pressupost .bdrt-casella { display: flex; align-items: flex-start; gap: 10px; margin: 0; } body.bdrw.bdrt.bdrt-pressupost .bdrt-casella > input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--navy); } body.bdrw.bdrt.bdrt-pressupost .bdrt-casella > label { margin: 0; font-weight: 400; line-height: 1.5; cursor: pointer; } body.bdrw.bdrt.bdrt-pressupost .bdrt-finestra .bdrt-h2 { margin: 0; font-size: 20px; } body.bdrw.bdrt.bdrt-pressupost .bdrt-botons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } body.bdrw.bdrt.bdrt-pressupost .bdrt-imprimeix { cursor: pointer; } /* A 320 px la taula del pressupost no cabia (8 px): menys aire a les cel·les i el descompte en dues linies si cal */ @media (max-width: 559.98px) { body.bdrw.bdrt.bdrt-pressupost .bdrt-pre-taula :is(th, td) { padding-left: 6px; padding-right: 6px; } body.bdrw.bdrt.bdrt-pressupost .bdrt-pre-taula :is(th, td):first-child { padding-left: 0; } body.bdrw.bdrt.bdrt-pressupost .bdrt-pre-taula :is(th, td):last-child { padding-right: 0; } body.bdrw.bdrt.bdrt-pressupost .bdrt-pre-taula tbody .bdrx-num:not(:last-child) { white-space: normal; } } /* El pressupost que no s'ha trobat: el titol de l'error es el H1 de la pagina, amb la mida del text de l'error */ body.bdrw.bdrt.bdrt-pressupost h1.bdrx-pag-error-t { margin: 0; color: inherit; font-family: inherit; font-size: 17px; line-height: 1.4; } /* ========================================================================================================= Entrega 4d (area de client: compte, usuaris i correus enviats), 11/10/2026 ========================================================================================================= */ /* Les pantalles del compte i de l'usuari: blocs amb aire entre ells, a una amplada de formulari llegible */ body.bdrw.bdrt .bdrt-cos .bdrt-ac { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); max-width: 880px; } body.bdrw.bdrt .bdrt-cos .bdrt-ac :where(h2, p, ul, ol, fieldset, dl, dd) { margin: 0; } body.bdrw.bdrt .bdrt-cos .bdrt-ac-form { display: flex; flex-direction: column; gap: 28px; } body.bdrw.bdrt .bdrt-cos .bdrt-ac .bdrt-seccio-intro { max-width: 72ch; color: var(--secundari); } body.bdrw.bdrt .bdrt-cos .bdrt-camp-mig { width: 100%; max-width: 28rem; } body.bdrw.bdrt .bdrt-cos .bdrt-ac .bdrt-camp-mig.form-control { max-width: 28rem; } /* El perfil, la seguretat de l'usuari, l'inici de sessio unic i convidar un usuari: cada apartat en una tarjeta (pla 5.3) */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-ac-perfil, .bdrt-ac-seguretat) > .bdrt-seccio, body.bdrw.bdrt .bdrt-cos .bdrt-ac-targeta, body.bdrw.bdrt .bdrt-cos .bdrt-ac-usuaris > .bdrt-seccio.bdrt-formulari { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } /* Les dades que no es poden canviar: el text de sobre, sense la tarjeta */ body.bdrw.bdrt .bdrt-cos .bdrt-ac-noedit { color: var(--navy); } /* Les preferencies de correu i els permisos: una casella per linia; la descripcio del permis sota el seu nom, alineada amb ell */ body.bdrw.bdrt .bdrt-cos .bdrt-ac-preferencies, body.bdrw.bdrt .bdrt-cos .bdrt-ac-perms { gap: 12px; } body.bdrw.bdrt .bdrt-cos .bdrt-ac-perms[hidden] { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-casella.bdrt-ac-perm { flex-wrap: wrap; row-gap: 2px; } body.bdrw.bdrt .bdrt-cos .bdrt-casella.bdrt-ac-perm > label { flex: 1 1 0; min-width: 0; font-weight: 600; } body.bdrw.bdrt .bdrt-cos .bdrt-casella.bdrt-ac-perm > .bdrt-ajuda-camp { flex: 1 0 100%; padding-left: 34px; } /* El triador de contacte */ body.bdrw.bdrt .bdrt-cos .bdrt-ac-tria .bdrt-camp-fila > .custom-select { flex: 1 1 18rem; width: auto; min-width: 0; max-width: 32rem; } /* La llista d'usuaris: el correu parteix si cal; les marques (titular, segon factor) en fila */ body.bdrw.bdrt .bdrt-cos .bdrt-ac-usuari-correu { overflow-wrap: break-word; } body.bdrw.bdrt .bdrt-cos .bdrt-ac-usuari-marques { display: inline-flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; } body.bdrw.bdrt .bdrt-cos .bdrt-ac-usuari-marques .bdrt-estat { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; } body.bdrw.bdrt .bdrt-cos .bdrt-ac-usuaris-taula .bdrt-col-accions .bdrt-taula-sec { max-width: 28ch; } /* Les invitacions pendents: cada una en una fila amb vora, el correu i quan es va enviar a l'esquerra i les accions a la dreta */ body.bdrw.bdrt .bdrt-cos .bdrt-ac-convidats { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; } body.bdrw.bdrt .bdrt-cos .bdrt-ac-convidat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos .bdrt-ac-convidat-qui { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; } /* L'estat de l'inici de sessio unic i del segon factor */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-ac-sso-estat, .bdrt-ac-2fa-estat, .bdrt-ac-perfil-estat) { color: var(--navy); } body.bdrw.bdrt .bdrt-cos .bdrt-ac .twofa-config-link.w-hidden { display: none; } body.bdrw.bdrt .bdrt-cos .bdrt-etiqueta-pre { font-weight: 600; } /* Els correus enviats: a les tarjetes del mobil, l'assumpte (la capcalera de fila, segona columna) va a dalt de tot */ @media (max-width: 767.98px) { body.bdrw.bdrt .bdrt-cos table.bdrt-ac-correus-taula > tbody > tr { display: flex !important; flex-direction: column; } body.bdrw.bdrt .bdrt-cos table.bdrt-ac-correus-taula > tbody > tr > th { order: -1; } body.bdrw.bdrt .bdrt-cos table.bdrt-ac-correus-taula > tbody > tr > td:first-child { border-top: 1px solid var(--vora-suau); } /* Les marques d'un usuari (titular, segon factor), a la dreta de la tarjeta com la resta de valors */ body.bdrw.bdrt .bdrt-cos .bdrt-ac-usuari-marques { justify-content: flex-end; } /* El boto «Mostra el missatge» passa a sota de la seva etiqueta si no hi cap al costat (320 px; revisio d'accessibilitat, 1.4.10) */ body.bdrw.bdrt .bdrt-cos table.bdrt-ac-correus-taula > tbody > tr > td.bdrt-col-accions { flex-wrap: wrap; } body.bdrw.bdrt .bdrt-cos table.bdrt-ac-correus-taula > tbody > tr > td.bdrt-col-accions .bdrx-btn { max-width: 100%; margin-left: auto; white-space: normal; } } /* El motiu d'un pla que no es pot triar al canvi de pla per la ruta nova (bdr_t/upgrade-configure.tpl, revisio de la 4c): text secundari, sense el marge de Bootstrap dins del formulari del pla */ body.bdrw.bdrt .bdrt-cos .bdrt-pla-motiu { margin: 0; color: var(--secundari); font-size: 14px; line-height: 1.45; } /* La finestra del segon factor de WHMCS (#modalAjax amb la classe twofa-setup, al peu): capcalera sense el blau, camps i botons de la base; el boto de desactivar en contorn vermell, com a la resta (pla 5.4). El contingut el pinta WHMCS: aqui nomes l'aspecte */ body.bdrw.bdrt #modalAjax.twofa-setup .modal-content { border: 0; border-radius: 16px; color: var(--navy); font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif; } body.bdrw.bdrt #modalAjax.twofa-setup .modal-header { border-bottom: 1px solid var(--vora); background: var(--fons) !important; color: var(--navy) !important; } body.bdrw.bdrt #modalAjax.twofa-setup .modal-title { font-size: 20px; font-weight: 700; } body.bdrw.bdrt #modalAjax.twofa-setup .close { min-width: 44px; min-height: 44px; color: var(--navy); opacity: 1; } body.bdrw.bdrt #modalAjax.twofa-setup .form-control { min-height: 44px; border: 1px solid var(--vora-forta); border-radius: 10px; color: var(--navy); font-size: 16px; } body.bdrw.bdrt #modalAjax.twofa-setup .btn { min-height: 44px; border-radius: 12px; font-weight: 600; } body.bdrw.bdrt #modalAjax.twofa-setup .btn-default { border: 0; background: var(--fons); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); } body.bdrw.bdrt #modalAjax.twofa-setup .btn-primary { border: 0; background: var(--ha-btn-fons); color: var(--ha-btn-text); font-size: var(--ha-btn-mida); font-weight: 700; } body.bdrw.bdrt #modalAjax.twofa-setup .btn-primary:hover { background: var(--ha-btn-hover); } body.bdrw.bdrt #modalAjax.twofa-setup .btn-danger { border: 0; background: var(--fons); color: var(--perill); box-shadow: inset 0 0 0 1.5px var(--perill); } body.bdrw.bdrt #modalAjax.twofa-setup .btn-danger:hover { background: var(--perill-fons); color: var(--perill); } body.bdrw.bdrt #modalAjax.twofa-setup :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: none; } /* Un correu enviat (bdr_t/viewemail.tpl): pagina sencera, sense capcalera ni peu del lloc; el correu en un marc que ocupa la finestra */ body.bdrw.bdrt.bdrt-correu { margin: 0; background: var(--alterna); color: var(--navy); font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif; } body.bdrw.bdrt.bdrt-correu .bdrt-correu-pag { display: flex; flex-direction: column; gap: 20px; max-width: 960px; margin: 0 auto; padding: 24px 16px 32px; } body.bdrw.bdrt.bdrt-correu .bdrt-correu-h1 { margin: 0; color: var(--navy); font-size: clamp(22px, 1.6vw + 16px, 30px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } body.bdrw.bdrt.bdrt-correu .bdrt-correu-h2 { margin: 0 0 6px; color: var(--navy); font-size: 16px; font-weight: 700; } body.bdrw.bdrt.bdrt-correu .bdrt-correu-adjunts ul { margin: 0; padding-left: 1.25em; overflow-wrap: anywhere; } body.bdrw.bdrt.bdrt-correu .bdrt-correu-marc { display: block; width: 100%; height: 60vh; min-height: 320px; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); } body.bdrw.bdrt.bdrt-correu :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: none; } /* L'enllac de tornar a la llista, amb el color i el subratllat dels enllacos del contingut (la pagina no te .bdrt-cos) */ body.bdrw.bdrt.bdrt-correu a.bdrx-enllac-fort { color: var(--bdrx-enllac); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; } body.bdrw.bdrt.bdrt-correu a.bdrx-enllac-fort:hover { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; } /* ========================================================================================================= Fase 5b (11/10/2026): la botiga de sempre. Els grups (el cataleg de l'orderform hostingandorra i el standard_cart dels grups sense orderform propi), configurar un producte i el seu pas de domini, els extres, renovar dominis i serveis, l'error del carret, la comanda feta i la comprovacio antifrau. Nomes aspecte: les plantilles i els formularis de WHMCS no canvien. La custom.css de l'orderform porta pastilles de 999 px, pesos de 800 a 950 i colors fora de la paleta, part amb !important i part amb l'id doble (#order-standard_cart#order-standard_cart): aqui, el mateix pes i les classes de la base al davant. Els camps, amb els valors de bdr-carret.css (web3), que als passos de configurar i del domini tambe hi es: sigui quina sigui la que guanya, es veuen igual ========================================================================================================= */ /* Sense la barra lateral de categories ni la plegada del mobil: el menu de la capcalera ja porta les families i la cistella. El cos a tota l'amplada */ body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.cart-sidebar, .sidebar-collapsed) { display: none !important; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .cart-body { float: none; width: 100%; max-width: none; padding-left: 15px !important; padding-right: 15px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart { padding-bottom: 0; font-size: 16px; color: var(--navy); } /* El H1 de la plantilla (WHMCS el posa dins de .header-lined): el de la base (bdrx-h1) */ /* Nomes el marge de sota: a renovar serveis, .header-lined tambe es .row i conserva els marges negatius de la graella */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .header-lined { margin-bottom: clamp(20px, 2.6vw, 32px); padding: 0; border: 0; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .header-lined h1 { margin: 0 0 10px; color: var(--navy); font-size: clamp(32px, 22px + 1.8vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: break-word; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .header-lined p { margin: 0; max-width: 62ch; color: var(--secundari); font-size: 17px; line-height: 1.5; } /* Etiquetes i textos d'ajuda: #3D3D3D a 15 px (WHMCS els deixa a 13 px en #666, i l'orderform en taronja) */ body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(label, .control-label, p.domain-renewal-desc) { margin-right: 0; color: var(--navy); font-size: 15px; font-weight: 500; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .service-renewals .div-renewal-period-label { margin-right: 0; color: var(--secundari); font-size: 15px; font-weight: 500; } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.text-muted, .small.text-muted) { color: var(--secundari) !important; } /* Titols de seccio (Opcions, Extres disponibles): a l'esquerra, sense la ratlla ni el fons gris del rotul */ body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.sub-heading, .sub-heading-borderless) { height: auto; margin: 32px 0 14px; border: 0; text-align: left; } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.sub-heading, .sub-heading-borderless) span { position: static; display: block; padding: 0; background: transparent !important; color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.3; } /* Botons: radi 12 (14 els grans), 44 px d'alt com a minim, pes de 600 a 700, cap pastilla. El principal es el de la casa (#F4A000 amb text #3D3D3D, bdr-web.css); el secundari, el contorn #3D3D3D (l'orderform el pintava en taronja sobre blanc, 3,6:1). Amb .btn sol (no :is(.btn, a.btn), que pujava l'especificitat i deixava sense efecte .btn-lg i .btn-block) */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px !important; border-radius: 12px !important; font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; white-space: normal; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .btn-lg { min-height: 52px; padding: 10px 24px !important; border-radius: 14px !important; font-size: 17px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.btn-default, .btn-secondary) { border: 1.5px solid var(--navy) !important; background: var(--fons) !important; color: var(--navy) !important; } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.btn-default, .btn-secondary):hover { background: var(--alterna) !important; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .btn-block { display: flex; width: 100%; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .btn .arrow { margin-left: 4px; padding: 0; border-radius: 0; background: transparent; } /* Els botons que WHMCS amaga amb .w-hidden (display: none sense !important) i ensenya amb .show() del seu JavaScript (estil en linia, que guanya): el display de dalt no els ha de treure a la vista (el «Continua» del pas de domini abans de cercar, i els botons de cada extensio destacada mentre es consulta) */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .btn.w-hidden { display: none; } /* Camps: blancs, vora #8A8580 de 1,5 px (3,58:1), radi 12, 16 px; focus de 3 px #3D3D3D. La custom.css de l'orderform els pintava en #F5F7FA amb vora #C3CAD3 amb l'id doble i !important */ body.bdrw.bdrt .bdrt-cos #order-standard_cart#order-standard_cart :is(.form-control, .field, .custom-select):not(.irs-hidden-input) { min-height: 46px; border: 1.5px solid var(--vora-forta) !important; border-radius: 12px !important; background-color: var(--fons) !important; color: var(--navy) !important; font-size: 16px; box-shadow: none !important; } body.bdrw.bdrt .bdrt-cos #order-standard_cart#order-standard_cart :is(.form-control, .field, .custom-select):not(.irs-hidden-input):focus { border-color: var(--navy) !important; outline: 3px solid var(--navy) !important; outline-offset: 1px; } /* El prefix «www.»: un sol marc, el del text (l'embolcall .input-group-prepend de Bootstrap 4 no en porta) */ body.bdrw.bdrt .bdrt-cos #order-standard_cart#order-standard_cart .input-group-text, body.bdrw.bdrt .bdrt-cos #order-standard_cart#order-standard_cart .input-group-addon:not(.input-group-prepend) { display: flex; align-items: center; min-height: 46px; border: 1.5px solid var(--vora-forta) !important; background-color: var(--alterna) !important; color: var(--navy) !important; font-size: 16px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart#order-standard_cart .input-group-addon.input-group-prepend { display: flex; padding: 0; border: 0 !important; background: transparent !important; } /* Per sota de 576 px, l'extensio sota el nom del domini (al 25 % de l'ample no se'n llegia el valor) */ @media (max-width: 575.98px) { body.bdrw.bdrt .bdrt-cos #order-standard_cart .domain-input-group .domains-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .domain-input-group .domains-row > [class*="col-"] + [class*="col-"] { margin-top: 8px; } } /* Productes d'un grup (standard_cart) i extres: tarjetes blanques, vora #E1DEDA, radi 16, sense ombra. La descripcio i el preu un sota l'altre per sota de 576 px (WHMCS els posa al 60 % i al 40 % flotant, i el boto sortia de la tarjeta) */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product { display: flow-root; margin: 0 0 20px; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); box-shadow: none; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product:hover { transform: none; box-shadow: none; border-color: var(--clar-navy); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product header { padding: 0 0 12px; margin: 0; background: transparent; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product header span { color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.3; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product div.product-desc { padding: 0 16px 0 0; color: var(--navy); font-size: 15px; line-height: 1.55; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product span.feature-value { color: var(--navy); font-weight: 700; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product footer { margin: 0; font-size: 15px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product div.product-pricing { margin: 0 0 12px; color: var(--navy); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product div.product-pricing span.price { color: var(--navy); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } @media (max-width: 575.98px) { body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product :is(div.product-desc, footer) { float: none; width: auto; padding: 0; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product footer { margin-top: 16px; text-align: left; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .products .product footer .btn { width: 100%; } } /* Configurar un producte: el resum del producte, els extres i el resum de la comanda */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .product-info { margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--vora); border-radius: 12px; background: var(--alterna); color: var(--navy); font-size: 15px; line-height: 1.55; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .product-info .product-title { margin: 0 0 6px; color: var(--navy); font-size: 19px; font-weight: 700; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .addon-products .panel-addon { margin-bottom: 16px; overflow: hidden; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); box-shadow: none; color: var(--navy); font-size: 15px; text-align: left; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .addon-products .panel-addon .panel-body { padding: 14px 16px; border-radius: 0; line-height: 1.5; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .addon-products .panel-addon .panel-body label { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 6px; color: var(--navy); font-size: 16px; font-weight: 700; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .addon-products .panel-addon .panel-price { padding: 8px 16px; border-top: 1px solid var(--vora-suau); background: var(--alterna); color: var(--navy); font-weight: 600; } /* «Afegeix»: el verd #5CB85C amb text blanc de 11 px feia 2,48:1; ara #3D3D3D amb blanc (10,86:1) i, triat, el verd d'estat #1F6F46 (6,1:1) amb la vora del mateix color */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .addon-products .panel-addon .panel-add { padding: 10px 16px; border-radius: 0; background: var(--navy); color: var(--fons); font-size: 15px; font-weight: 600; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .addon-products .panel-addon-selected { border-color: var(--exit); box-shadow: 0 0 0 1px var(--exit); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .addon-products .panel-addon-selected .panel-add { background: var(--exit); color: var(--fons); } /* L'avis groc de «Tens dubtes?» de configurar: l'ajuda humana de sota ja ho diu, al mateix lloc a totes les pantalles */ body.bdrw.bdrt .bdrt-cos #order-standard_cart #frmConfigureProduct .alert.info-text-sm { display: none; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary { margin: 0 0 20px; overflow: hidden; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary h2 { margin: 0; padding: 14px 20px; background: var(--navy); color: var(--fons); font-size: 18px; font-weight: 700; line-height: 1.3; text-align: left; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary .summary-container { min-height: 100px; padding: 16px 20px; border-radius: 0; background: var(--fons); color: var(--navy); font-size: 15px; line-height: 1.5; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary .product-name { font-size: 17px; font-weight: 700; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary :is(.product-group, .recurring-charges) { color: var(--secundari); font-style: normal; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary :is(.summary-totals, .subtotal, .bordered-totals) { border-color: var(--vora); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary .total-due-today { margin-top: 8px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary .total-due-today .amt { color: var(--navy); font-size: 28px; font-weight: 700; line-height: 1.15; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary .loader { color: var(--secundari); } /* El pas del domini: cada opcio en una tarjeta, la triada amb vora #3D3D3D */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .domain-selection-options .option { margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--vora); border-radius: 12px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .domain-selection-options .option-selected { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--alterna); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .domain-selection-options .option label { font-size: 16px; } /* El resultat de la cerca: WHMCS el pinta #5CB85C (2,48:1 sobre blanc, per sota del 3:1 del text gran) i #D9534F. Els colors de la base. Vist amb sessio el 11/10/2026 */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .domain-checker-available { color: var(--exit); } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.domain-checker-unavailable, .domain-checker-invalid) { color: var(--perill); } /* Renovar dominis i serveis: una tarjeta per element; les etiquetes de WHMCS (label-success, -warning, -danger, -info) amb els quatre estats de la base, sempre amb text (#5CB85C, #F0AD4E i #D9534F amb text blanc feien de 1,95 a 3,96:1) */ body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.domain-renewals, .service-renewals) { margin: 12px 0; border: 0; background: transparent; } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.domain-renewals .domain-renewal, .service-renewals .service-renewal) { margin: 0 0 12px; padding: 20px; border: 1px solid var(--vora); border-radius: 16px; background: var(--fons); } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.domain-renewal, .service-renewal) h3 { margin: 0 0 4px; color: var(--navy); font-size: 21px; font-weight: 700; overflow-wrap: break-word; } /* Per sota de 576 px, l'etiqueta d'estat sobre el nom i no flotant (estrenyia el nom i el partia a mitja paraula) */ @media (max-width: 575.98px) { body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.domain-renewal, .service-renewal) > .pull-right:first-child { float: none !important; display: block; margin: 0 0 8px; } } body.bdrw.bdrt .bdrt-cos #order-standard_cart .service-renewals .div-renewal-ineligible { color: var(--secundari); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .label { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border: 1px solid var(--clar-navy); border-radius: 8px; background: var(--bdrx-info-fons); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: normal; text-align: left; text-shadow: none; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .label-success { border-color: #B7DEC6; background: var(--exit-fons); color: var(--exit); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .label-warning { border-color: #F2D894; background: var(--avis-fons); color: var(--avis); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .label-danger { border-color: #F4B7B2; background: var(--perill-fons); color: var(--perill); } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.label-info, .label-grey) { border-color: var(--clar-navy); background: var(--bdrx-info-fons); color: var(--navy); } /* Les opcions amb control lliscant (ion.rangeSlider, pell «modern» de WHMCS): la barra i el valor en #3D3D3D (el verd #20B426 amb text blanc de 10 px feia 2,76:1), el carril en #E1DEDA, les xifres en #636363 a 12 i 13 px (el gris #C0C0C0 de 9 px feia 1,82:1) i les marques en #8A8580. El text d'ajuda dels camps del modul, en #636363 (el #888888 feia 3,54:1) */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-line { border-radius: 3px; background: var(--vora-forta); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs :is(.irs-line-left, .irs-line-mid, .irs-line-right) { background: transparent; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs :is(.irs-bar, .irs-bar-edge) { background: var(--navy); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs :is(.irs-min, .irs-max) { padding: 1px 4px; border-radius: 4px; background: var(--alterna); color: var(--secundari); font-size: 13px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs :is(.irs-from, .irs-to, .irs-single) { padding: 1px 5px; border-radius: 4px; background: var(--navy); color: var(--fons); font-size: 13px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs :is(.irs-from, .irs-to, .irs-single)::after { border-top-color: var(--navy); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-grid-pol { background: var(--vora-forta); } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-grid-text { color: var(--secundari); font-size: 12px; } /* El tirador: rodo de 24 px, blanc amb vora #3D3D3D de 2 px (el de la pell era un sprite gris de 11 x 18 px), centrat sobre el carril (que fa 6 px a 25 px de dalt). js/bdr-tema.js fa enfocable el carril (role=slider): l'anell del focus, al carril (la llibreria li treu amb outline: none !important) i al tirador */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-slider { width: 24px; height: 24px; top: 16px; border: 2px solid var(--navy); border-radius: 50%; background: var(--fons); cursor: pointer; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-slider:is(:hover, .state_hover) { background: var(--alterna); } body.bdrw.bdrt .bdrt-cos #order-standard_cart span.irs:has(.irs-line:focus-visible) > .irs-slider { outline: 3px solid var(--navy); outline-offset: 2px; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-line:focus-visible { overflow: visible; outline: 3px solid var(--navy) !important; outline-offset: 4px; } /* El camp que la llibreria amaga (alt 0, vora transparent): sense l'alt minim ni la vora dels camps, que en feien una ratlla */ body.bdrw.bdrt .bdrt-cos #order-standard_cart#order-standard_cart input.irs-hidden-input { min-height: 0 !important; padding: 0 !important; border: 0 !important; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .field-help-text { color: var(--secundari); font-size: 14px; } /* La comanda feta: el numero en una tarjeta */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-confirmation { padding: 16px 20px; border: 1px solid var(--vora); border-radius: 12px; background: var(--alterna); color: var(--navy); } /* El cataleg de l'orderform hostingandorra: la nota del domini i les caracteristiques dels plans amb la paleta */ body.bdrw.bdrt .bdrt-cos .ha-catalog .ha-catalog-disclaimer { border: 1px solid var(--vora); background: var(--alterna); color: var(--secundari); } body.bdrw.bdrt .bdrt-cos .ha-catalog .ha-card .ha-features li { border-bottom-color: var(--vora-suau); color: var(--navy); } /* El preu gran: a 1024 px, amb tres plans, «€199.00/mes» a 48 px no hi cabia (sortia de la tarjeta i de la finestra) */ body.bdrw.bdrt .bdrt-cos .ha-catalog .ha-card .ha-price-amount { max-width: 100%; font-size: clamp(32px, 2.4vw + 10px, 48px); } /* ========================================================================================================= Moviment reduit i colors forcats (pla 5.12) ========================================================================================================= */ @media (prefers-reduced-motion: reduce) { /* Els pseudoelements van en selectors a part: dins de :is() o :where() no hi poden ser i el navegador els descarta */ body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-cos, .bdrt-ajuda) *, body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-cos, .bdrt-ajuda) *::before, body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-cos, .bdrt-ajuda) *::after { transition: none !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* Fases 3 i 1: la finestra del generador de contrasenyes (fora del contingut) sense l'animacio de Bootstrap */ body.bdrw.bdrt #modalGeneratePassword, body.bdrw.bdrt #modalGeneratePassword .modal-dialog { transition: none !important; } /* Entrega 4b: la finestra de l'IRTP de les dades de contacte del domini, igual */ body.bdrw.bdrt .bdrt-finestra, body.bdrw.bdrt .bdrt-finestra .modal-dialog { transition: none !important; } /* Entrega 4c: l'espera del pas cap a la passarel·la, quieta (el text ja diu que s'espera) */ body.bdrw.bdrt .bdrt-cos .bdrt-roda { animation: none !important; border-top-color: var(--vora); } /* Entrega 4d: la finestra del segon factor de WHMCS (fora del contingut) sense l'animacio de Bootstrap */ body.bdrw.bdrt #modalAjax.twofa-setup, body.bdrw.bdrt #modalAjax.twofa-setup .modal-dialog { transition: none !important; } body.bdrw.bdrt #modalAjax.twofa-setup .fa-spin { animation: none !important; } /* Fase 5b: els plans del cataleg no s'aixequen en passar-hi el ratoli */ body.bdrw.bdrt .bdrt-cos .ha-catalog .ha-card:hover { transform: none; } } @media (forced-colors: active) { /* Etiquetes d'estat i xifres: el fons no es veu; la vora les fa reconeixibles */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-estat, .label.status, .badge), body.bdrw.bdrt .bdrt-lateral :is(.badge, .bdrt-lateral-xifra) { border: 1px solid CanvasText; } /* L'apartat actual de la navegacio: la barra es una ombra (no es pinta); seleccio del sistema */ body.bdrw.bdrt .bdrt-lateral-llista .list-group-item:is(.active, [aria-current="page"]) { forced-color-adjust: none; background-color: Highlight; color: HighlightText; box-shadow: none; } body.bdrw.bdrt .bdrt-lateral-llista .list-group-item:is(.active, [aria-current="page"]) :is(.badge, .bdrt-lateral-xifra) { background-color: Canvas; color: CanvasText; border-color: CanvasText; } body.bdrw.bdrt .bdrt-lateral-resum::after { background: CanvasText; } body.bdrw.bdrt .bdrt-cos :is(.btn, .page-link) { border: 1px solid ButtonText; } /* El boto principal del contacte porta border: 0 !important; sense vora, en colors forcats era text solt (WCAG 1.4.11) */ body.bdrw.bdrt .bdrt-contacte #bdr-lead [type="submit"] { border: 1px solid ButtonText !important; } /* L'apartat actual, tambe en passar-hi el ratoli (la regla de hover te mes pes), i el seu focus en HighlightText */ body.bdrw.bdrt .bdrt-lateral-llista a.list-group-item:is(.active, [aria-current="page"]):hover { background-color: Highlight; color: HighlightText; } body.bdrw.bdrt .bdrt-lateral-llista .list-group-item:is(.active, [aria-current="page"]):focus-visible { outline-color: HighlightText; } body.bdrw.bdrt .bdrt-cos .pagination .page-item.disabled .page-link { color: GrayText; border-color: GrayText; } body.bdrw.bdrt .bdrt-cos .dataTables_wrapper .dataTables_filter label::before { background: CanvasText; } /* La pagina actual: el fons #3D3D3D d'aqui passava per sobre del Highlight de bdr-web.css i es veia gris */ body.bdrw.bdrt .bdrt-cos .pagination .page-item.active .page-link { forced-color-adjust: none; background-color: Highlight; color: HighlightText; border-color: Highlight; } body.bdrw.bdrt :is(.bdrt-cap, .bdrt-lateral, .bdrt-cos) :focus-visible, body.bdrw.bdrt .bdrt-lateral-llista .list-group-item:focus-visible { outline: 3px solid CanvasText; } /* Fase 2 i 5a: tarjetes, missatges i resultats amb vora; l'actual dels accessos, les estrelles i la nota triada */ body.bdrw.bdrt .bdrt-cos :is(a.bdrt-targeta, .bdrt-articles, .bdrt-missatge, .bdrt-incidencia, .bdrt-nota, .bdrt-resum, .md-editor, .bdrt-dom-cistella) { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-missatge-equip { border-width: 3px; box-shadow: none; } body.bdrw.bdrt .bdrt-cap .bdrt-suport-llista a[aria-current] { text-decoration-color: CanvasText; } body.bdrw.bdrt .bdrt-valora .star { color: CanvasText; } body.bdrw.bdrt .bdrt-valora .rating .star:is(:hover, :focus-visible), body.bdrw.bdrt .bdrt-valora .rating .star:has(~ .star:is(:hover, :focus-visible)), body.bdrw.bdrt .bdrt-valora .rating-done .star.active { color: Highlight; } body.bdrw.bdrt .bdrt-cos .custom-file-input:focus-visible ~ .custom-file-label { outline-color: CanvasText; } body.bdrw.bdrt .bdrt-valora .star::before { background: currentColor; forced-color-adjust: none; } body.bdrw.bdrt .bdrt-nota-opcio span { border-color: ButtonText; } body.bdrw.bdrt .bdrt-nota-opcio input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } body.bdrw.bdrt .bdrt-nota-opcio input:focus-visible + span { outline-color: CanvasText; } body.bdrw.bdrt .bdrt-dom-res .bdrx-btn { border: 1px solid ButtonText; } body.bdrw.bdrt .bdrt-cos .bdrt-camp .form-control[aria-invalid="true"] { border: 2px solid CanvasText; } /* Fases 3 i 1: tarjetes de formulari, dades, comptes, index i filtres amb vora; el filtre triat i el boto de mostrar premut, en la seleccio del sistema; el boto principal del segon factor amb vora */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-targeta-form, .bdrt-dades, .bdrt-compte-boto, .bdrt-codi code) { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-index { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-index > summary::after { background: CanvasText; } body.bdrw.bdrt .bdrt-cos .bdrt-cat[aria-pressed="true"], body.bdrw.bdrt .bdrt-cos .bdrt-mostra[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 1px solid Highlight; box-shadow: none; } body.bdrw.bdrt .bdrt-cos .bdrt-2fa-modul :is(.btn-primary, input[type="submit"], button[type="submit"]) { border: 1px solid ButtonText; } body.bdrw.bdrt .bdrt-cos .bdrt-forca .progress { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos .bdrt-forca .progress-bar { forced-color-adjust: none; background-color: CanvasText !important; } body.bdrw.bdrt #modalGeneratePassword .modal-content { border: 1px solid CanvasText; } body.bdrw.bdrt #modalGeneratePassword :focus-visible { outline-color: CanvasText; } body.bdrw.bdrt .bdrt-cos .bdrx-btn:is(:disabled, [aria-disabled="true"]) { color: GrayText; border: 1px solid GrayText; } /* La fletxa dels desplegables de Bootstrap es una imatge gris que es perd sobre fons negre: la del sistema */ body.bdrw.bdrt .bdrt-cos select.custom-select { appearance: auto; background-image: none; } /* Fase 4a: xifres, taulers, resum, elements i opcions amb vora (el fons no es veu); la barra de l'us pintada en CanvasText dins d'una vora; les etiquetes d'estat dels serveis actius amb vora */ body.bdrw.bdrt .bdrt-cos :is(a.bdrt-recompte, .bdrt-panell, .bdrt-servei-resum, .bdrt-servei-element, .bdrt-canvi-pla, .bdrt-canvi-opcio, .bdrt-baixa-servei, .bdrt-canvi-actual, .bdrt-baixa-domini, .bdrt-servei-baixa-feta) { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-status .label { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos .bdrt-us-barra { border: 1px solid CanvasText; box-shadow: none; } body.bdrw.bdrt .bdrt-cos .bdrt-us-barra > span { forced-color-adjust: none; background: CanvasText; } body.bdrw.bdrt .bdrt-cos .bdrt-panell .div-service-buttons .btn { border: 1px solid ButtonText; } /* Entrega 4b: grups de contacte, dominis afectats, el text enganxat als camps, l'avis de la llista de certificats i la finestra de l'IRTP amb vora (el fons no es veu) */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-dom-contacte, .bdrt-dominis-llista > li, .bdrt-sufix, .bdrt-ssl-avis) { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-finestra .modal-content { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-finestra :focus-visible { outline-color: CanvasText; } body.bdrw.bdrt .bdrt-cos .bdrt-camp-modul :is(input, select, textarea):focus { outline-color: CanvasText; } /* Entrega 4c: opcions, formes de pagament, resums, plans i caixes de pagament amb vora; la casella d'iCheck triada en la seleccio del sistema i el seu focus visible; el boto de la passarel·la i els botons desactivats amb vora */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-opcio, .bdrt-metode, .bdrt-pla, .bdrt-pagament-resum-cos, .bdrt-pagament-dades .bdrt-seccio, .bdrt-3ds, .bdrt-errors-passarela, #innerBillingContactsContainer > label.form-check) { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue) { forced-color-adjust: none; border-color: CanvasText; background: Canvas; } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).checked { background: Highlight; border-color: Highlight; box-shadow: inset 0 0 0 5px Canvas; } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).focus { outline: 3px solid CanvasText; } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).disabled { border-color: GrayText; background: Canvas; } body.bdrw.bdrt .bdrt-cos :is(.iradio_square-blue, .icheckbox_square-blue).checked.disabled { border-color: GrayText; background: GrayText; box-shadow: inset 0 0 0 5px Canvas; } body.bdrw.bdrt .bdrt-cos .bdrt-passarela-boto :is(input[type="submit"], button[type="submit"], .btn) { border: 1px solid ButtonText; } body.bdrw.bdrt .bdrt-cos a.bdrx-btn.disabled { color: GrayText; border: 1px solid GrayText; } body.bdrw.bdrt.bdrt-pressupost .bdrt-estat { border: 1px solid CanvasText; } body.bdrw.bdrt.bdrt-pressupost :focus-visible { outline: 3px solid CanvasText; } body.bdrw.bdrt .bdrt-cos :is(.bdrt-pagament-remot, .bdrt-metode-pagament) iframe:is(:focus, .bdrt-marc-focus), body.bdrw.bdrt .bdrt-cos .bdrt-3ds-marc:is(:focus, .bdrt-marc-focus) { outline: 3px solid CanvasText; } /* Entrega 4d: les tarjetes dels apartats, les invitacions, la finestra del segon factor i el marc del correu amb vora (el fons no es veu); el focus de la finestra i de la pagina del correu en CanvasText */ body.bdrw.bdrt .bdrt-cos :is(.bdrt-ac-perfil, .bdrt-ac-seguretat) > .bdrt-seccio, body.bdrw.bdrt .bdrt-cos :is(.bdrt-ac-targeta, .bdrt-ac-convidat), body.bdrw.bdrt .bdrt-cos .bdrt-ac-usuaris > .bdrt-seccio.bdrt-formulari { border: 1px solid CanvasText; } body.bdrw.bdrt #modalAjax.twofa-setup .modal-content { border: 1px solid CanvasText; } body.bdrw.bdrt #modalAjax.twofa-setup :is(.btn, .btn-default, .btn-danger) { border: 1px solid ButtonText; } body.bdrw.bdrt #modalAjax.twofa-setup :focus-visible, body.bdrw.bdrt.bdrt-correu :focus-visible { outline: 3px solid CanvasText; } body.bdrw.bdrt.bdrt-correu .bdrt-correu-marc { border-color: CanvasText; } /* Fase 5b: les tarjetes, les opcions, els extres, el resum, la comanda feta i les etiquetes de la botiga de sempre amb vora (el fons no es veu); l'extre i l'opcio del domini triats amb la vora gruixuda en Highlight; la barra del control lliscant pintada en CanvasText dins d'un carril amb vora, i les seves xifres amb vora */ body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.products .product, .product-info, .addon-products .panel-addon, .order-summary, .domain-selection-options .option, .domain-renewal, .service-renewal, .order-confirmation, .label) { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos #order-standard_cart :is(.addon-products .panel-addon-selected, .domain-selection-options .option-selected) { border: 3px solid Highlight; box-shadow: none; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .order-summary h2 { border-bottom: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-line { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs :is(.irs-bar, .irs-bar-edge) { forced-color-adjust: none; background: CanvasText; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs :is(.irs-from, .irs-to, .irs-single, .irs-min, .irs-max) { border: 1px solid CanvasText; } body.bdrw.bdrt .bdrt-cos #order-standard_cart#order-standard_cart :is(.form-control, .field, .custom-select):focus { outline-color: CanvasText !important; } body.bdrw.bdrt .bdrt-cos .ha-catalog .ha-catalog-disclaimer { border: 1px solid CanvasText; } /* Els botons de la botiga amb vora: el principal porta border: 0 !important de l'orderform i era text solt; el tirador del control lliscant, en CanvasText, i l'anell del seu focus */ body.bdrw.bdrt .bdrt-cos #order-standard_cart .btn { border: 1px solid ButtonText !important; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-slider { forced-color-adjust: none; border-color: CanvasText; background: Canvas; } body.bdrw.bdrt .bdrt-cos #order-standard_cart span.irs:has(.irs-line:focus-visible) > .irs-slider { outline-color: CanvasText; } body.bdrw.bdrt .bdrt-cos #order-standard_cart .irs .irs-line:focus-visible { outline-color: CanvasText !important; } }