/* ========================================================================= layout-fix.css — bonossindeposito.com Foglio di sovrascrittura del layout, caricato per ultimo su tutte le pagine con il parametro di versione. Corregge difetti misurati senza toccare il markup: si ritira togliendo una riga. Famiglia B (Bootstrap 4.5.2, Owl, styles.css e responsive.css). ========================================================================= */ /* ---------- 1. Contenitori e sforamenti ---------------------------------- */ /* .container-fluid ha padding 0: la .row figlia diretta non deve uscire di 15 px */ .container-fluid>.row{margin-left:0;margin-right:0} /* parole lunghe (nomi di dominio, nomi di slot) vanno a capo invece di allargare la pagina */ h1,h2,h3,h4,h5,h6,p,li,td,th,.page-heading{overflow-wrap:break-word;word-wrap:break-word} /* nessuna immagine del contenuto supera la sua colonna */ .all-slots-single{flex-wrap:wrap} .all-slots-single img,.sec-content img{max-width:100%;height:auto} /* le tabelle larghe scorrono nel loro riquadro */ .sec-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} /* ---------- 2. Contrasto ------------------------------------------------- */ /* pulsante giallo: testo scuro (11,8:1 sul tono piu' chiaro); varianti scure in bianco */ a.btn,a.btn:hover,.btn,.btn:hover{color:#1d1d1d;text-shadow:none} a.btn.btn-red,a.btn.btn-red:hover,a.btn.btn-grey,a.btn.btn-grey:hover, .btn.btn-red,.btn.btn-red:hover,.btn.btn-grey,.btn.btn-grey:hover{color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.55)} /* ---------- 3. Componenti ------------------------------------------------ */ /* nota sotto le condizioni d'offerta delle schede */ .termes-note{display:block;margin-top:.35rem;font-size:.75rem;font-style:italic;opacity:.85} /* FAQ a casella: la casella resta raggiungibile da tastiera e la domanda mostra il fuoco */ .faq-item{position:relative} .faq-item input{display:block;position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .faq-item input:focus-visible+.faq-question{outline:3px solid #d81d04;outline-offset:2px} /* ---------- 4. Accessibilita' di base ------------------------------------ */ a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #d81d04;outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* ---------- 5. Banner del consenso (js/cookie-consent.js) ---------------- */ .cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center; padding:14px 16px;background:#1d1d1d;color:#fff;font-size:14px;line-height:1.5;box-shadow:0 -2px 12px rgba(0,0,0,.35)} .cc-banner .cc-text{margin:0;max-width:760px} .cc-banner a{color:#ffd24d;text-decoration:underline} .cc-banner .cc-btns{display:flex;gap:10px} .cc-banner .cc-btn{min-height:44px;min-width:110px;padding:8px 18px;border:2px solid #fff;border-radius:4px;background:#fff;color:#1d1d1d;font-weight:700;cursor:pointer} .cc-banner .cc-btn:hover{background:#e9ecf1} /* Recensioni: un riquadro per ogni mercato */ .market-box h3 { font-size: 1.05rem; margin: 0 0 .35rem; } .market-box .market-licence { font-size: .9rem; margin: 0 0 .5rem; opacity: .9; } .market-box p { margin-bottom: 0; } /* ---------- 6. Contrasto misurato con controlla_contrasto.py ------------- */ /* il rosso dei link, portato a 5:1 su bianco e sui fondi chiari del tema: la tinta resta quella del marchio, cambia solo la profondita' */ a{color:#b8170a} .cont-main-menu ul li a:hover,.cont-main-menu ul li.active a{color:#b8170a} /* il riquadro «Como valoramos» ha fondo chiaro ma sta dentro .text-white, che colora di bianco anche i suoi link: 1,28:1 (il piu' basso di tutto il sito) */ .text-white .alert,.text-white .alert strong,.text-white .alert em{color:#1d1d1d} .text-white .alert a{color:#a21805;text-decoration:underline} /* la riga della data porta il colore nel markup: serve !important per scavalcarlo, e la misura sale alla scala di lettura */ .alert>div[style]{color:#595959!important;font-size:.95em!important} /* i riquadri scuri della home colorano di rosso i link che contengono */ .home-pick-single a:not(.btn),.cont-home-picks a:not(.btn), .all-slots-single a:not(.btn),.best-site-single a:not(.btn){color:#ffd24d} /* l'offerta sotto il nome, rossa su fondo quasi nero */ .best-site-single .best-site-sub-title{color:#ff8a76} /* le schede moderne: il rosso del pulsante e del numero di posizione, e l'oro delle stelle, portati a contrasto; il grigio delle note pure */ :root{--bnpr-primary:#c4111a;--bnpr-star:#8a6100;--bnpr-muted:#4a505c} /* le sfumature rosse su cui sta del testo bianco, scurite di un passo */ .bsd-casino-card__btn{background:linear-gradient(180deg,#cf200c,#a81603)} .ed-hero{background:linear-gradient(120deg,#cf200c 0,#8d1202 100%)} .ed-hero__score .lbl,.ed-hero__score .out{opacity:1} .review-sidebar-head{background:linear-gradient(180deg,#cf200c,#a21304)!important} /* la verifica dell'eta': bianco su verde chiaro era 2,22:1 */ #modal_content nav .av_go,.av_btn.av_go{background-color:#2e7d32} /* ---------- 7. Gli ultimi tre contrasti e lo sforamento a 320 px -------- */ /* la riga della data e la nota 18+ portano colore e misura nell'attributo style: serve il selettore sull'attributo, e il colore sale a 7:1 sul bianco */ p[style*="color:#888"],div[style*="color:#888"], p[style*="color:#6b6f7a"],div[style*="color:#6b6f7a"]{color:#595959!important;font-size:1em!important} /* styles.css azzera il padding di ogni elemento con «*{margin:0;padding:0}»: le colonne perdono i 15 px che compensano i margini negativi di .row, e la riga sporge di 30 px dentro .container esattamente come dentro .container-fluid */ .container>.row{margin-left:0;margin-right:0} /* ---------- 8. Le colonne sotto i 576 px -------------------------------- */ /* Sotto i 576 px le classi .col-sm-*, .col-md-* e .col-lg-* non si applicano, e la colonna resta senza larghezza; styles.css fa «section{float:left;width:100%}», e un float non contribuisce alla larghezza di una colonna che si adatta al contenuto: la colonna collassa a zero e il contenuto sporge (84 px sulle intestazioni delle FAQ). Alla larghezza del telefono ogni colonna occupa la riga intera, com'e' giusto. */ @media (max-width:575.98px){ .row>[class*="col-"]{flex:0 0 100%;max-width:100%} } /* ---------- 9. I float non liberati ------------------------------------- */ /* styles.css fa «header,footer,section{float:left;width:100%}» e non libera mai i float. Un contenitore flessibile apre un contesto di formattazione proprio: non si sovrappone al float, gli si mette accanto. La .row delle domande frequenti, che segue una
larga quanto lo schermo, finiva percio' tutta fuori dal viewport, con la colonna a zero e il contenuto a sporgere. */ .container,.container-fluid{clear:both} /* ---------- 10. Riquadri legali per paese ------------------------------- */ /* Il riquadro che apre ogni pagina di paese con la normativa vigente, prima della tabella degli operatori. Ha l'aspetto di .ed-callout del tema editoriale, ma le regole stanno qui per intero: editorial.css e' caricato solo su 44 delle 68 pagine e otto delle nove pagine con il riquadro non lo hanno. Tutto e' sotto .ed-legal, cosi' dove i due fogli convivono non si toccano a vicenda. */ .ed-legal{ position:relative; background:#eef4f9; border-radius:8px; border-left:6px solid #005687; padding:22px 26px; margin:0 0 32px; color:#1d1d1d; font-family:inherit; } .ed-legal .ed-callout-title{ display:flex;align-items:flex-start;gap:10px; font-weight:800;font-size:17px;line-height:1.35; text-transform:none;letter-spacing:0; margin:0 0 14px;color:#0a3252; } .ed-legal .ed-callout-title::before{ content:"\f05a"; font-family:"Font Awesome 5 Free";font-weight:900; font-size:18px;line-height:1.35;color:#005687;flex:0 0 auto; } .ed-legal > :last-child{margin-bottom:0} .ed-legal p{font-size:1rem;line-height:1.7;margin:0 0 14px;color:#1d1d1d} .ed-legal strong{font-weight:700} .ed-legal a{color:#a21805;text-decoration:underline} .ed-legal a:hover{color:#7d1204} .ed-legal a:focus-visible{outline:2px solid #005687;outline-offset:2px} /* Fondo pieno, non una trasparenza: su un fondo trasparente il controllo del contrasto legge il colore come pieno e il dominio .bet.ar risultava 1,25:1. */ .ed-legal code{ background:#e4e8ee;border-radius:3px;padding:1px 5px; font-size:.92em;color:#1d1d1d; } /* Le due varianti: il rischio (Uruguay, licenze internazionali) e il caso in regola (Spagna, dove gli operatori in tabella sono autorizzati davvero). */ .ed-legal.ed-callout--risk{background:#fdecea;border-left-color:#d81d04} .ed-legal.ed-callout--risk .ed-callout-title{color:#a21805} .ed-legal.ed-callout--risk .ed-callout-title::before{content:"\f071";color:#d81d04} .ed-legal.ed-callout--risk code{background:#f3dedb} .ed-legal.ed-callout--safe{background:#eaf5ee;border-left-color:#1f7a3d} .ed-legal.ed-callout--safe .ed-callout-title{color:#0f5226} .ed-legal.ed-callout--safe .ed-callout-title::before{content:"\f058";color:#1f7a3d} .ed-legal.ed-callout--safe code{background:#dceade} /* La riga dei dati pratici: eta' minima, autoesclusione, servizi di aiuto, fonti. */ .ed-legal .ed-legal-dato{ font-size:.94rem;line-height:1.65;color:#3a3d44; background:rgba(255,255,255,.62); border-radius:6px;padding:12px 14px;margin:0 0 14px; } /* L'avvertenza: gli operatori in tabella non rispettano questa normativa. */ .ed-legal .ed-legal-aviso{ font-size:.96rem;line-height:1.65;margin:16px 0 0; padding:14px 16px;border-radius:6px; background:#fdecea;border-left:4px solid #d81d04;color:#1d1d1d; } .ed-legal .ed-legal-aviso strong{color:#a21805} /* Nella scheda della Spagna la stessa riga non e' un avviso di rischio. */ .ed-legal.ed-callout--safe .ed-legal-aviso{background:#eaf5ee;border-left-color:#1f7a3d} .ed-legal.ed-callout--safe .ed-legal-aviso strong{color:#0f5226} @media (max-width:575.98px){ .ed-legal{padding:16px 16px;margin:0 0 24px} .ed-legal .ed-callout-title{font-size:16px} .ed-legal p{font-size:.97rem} .ed-legal .ed-legal-dato,.ed-legal .ed-legal-aviso{padding:12px} } /* ---------- 11. Aviso obligatorio DGOJ (sección española) --------------- */ /* Resolución de 18 de septiembre de 2026, BOE-A-2026-20745, eficaz el 5 de diciembre de 2026. Las medidas no son de gusto: el Anexo I, Séptima fija fondo bianco, nero pieno, Helvetica bold minuscola, marco nero di 18 px e, per un affiliato, un bordo esterno bianco di 2 px; le due righe finali stanno al 60 % del corpo principale. Il resto lo fa aviso-dgoj.js, che misura la finestra e la porta al 15 % del contenuto visibile. */ .dgoj-fondo{ position:fixed;inset:0;z-index:2147483000; display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.55);padding:16px; /* Il velo non intercetta i clic: l'art. 23.3 del RD 958/2020 vuole che la comunicazione non blocchi mai la navigazione, e il banner del consenso deve restare usabile mentre l'avviso è in pagina. */ pointer-events:none; } .dgoj-caja,.dgoj-marco,.dgoj-cerrar{pointer-events:auto} /* La caja non aggiunge altezza: il marco resta centrato sullo schermo, come chiede l'Anexo I, Cuarta.1 («de forma centrada»), e il pulsante di chiusura gli sta sopra, fuori dal bordo. */ .dgoj-caja{position:relative;max-width:100%;display:block} /* Il pulsante di chiusura sta fuori dal marco: il mensaje non si mescola con altre indicazioni (Apartado Cuarto.2), e si chiude con facilità (art. 23.3 RD 958/2020). */ .dgoj-cerrar{ position:absolute;right:0;bottom:calc(100% + 8px); appearance:none;border:0;border-radius:4px;cursor:pointer; background:#fff;color:#1d1d1d; font-family:Helvetica,"Helvetica Neue",Arial,sans-serif; font-size:14px;font-weight:700;line-height:1;padding:9px 14px; } .dgoj-cerrar:hover{background:#e8e8e8} .dgoj-cerrar:focus-visible{outline:3px solid #fff;outline-offset:2px} /* Il marco: bordo esterno bianco di 2 px, poi il marco nero di 18 px. */ .dgoj-marco{ display:block;text-decoration:none;cursor:pointer; background:#000;border:2px solid #fff;padding:18px; width:min(620px,92vw);box-sizing:border-box; font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;font-size:16px; } .dgoj-marco:focus-visible{outline:3px solid #fff;outline-offset:3px} /* Il pannello bianco, con il testo centrato in larghezza e in altezza e un margine di circa 10 px verso il marco. */ .dgoj-panel{ background:#fff;color:#000;height:100%;box-sizing:border-box; padding:10px 10px 12px; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:.55em; } .dgoj-marco p{margin:0;color:#000;font-weight:700;line-height:1.16} .dgoj-mensaje{font-size:2.05em} /* «Solo para mayores de 18 años» e l'indirizzo: circa il 60 % del corpo. */ .dgoj-menores{font-size:1.23em;margin-top:.5em!important} .dgoj-web{font-size:1.23em} @media (max-width:575.98px){ .dgoj-marco{padding:14px;border-width:2px} .dgoj-mensaje{font-size:1.65em} .dgoj-menores,.dgoj-web{font-size:1em} } /* ---------- 12. Il fuori dai riquadri legali ---------------------- */ /* Bootstrap lo colora di rosa (#e83e8c): su fondo bianco fa 3,82:1 e non passa la soglia. Lo stesso trattamento dei riquadri, dove il contrasto è già misurato. */ .ed-article code,.sec-content code,.cont-inner-section code{ background:#e4e8ee;border-radius:3px;padding:1px 5px; font-size:.92em;color:#1d1d1d; } /* ---------- 13. La tabella del registro DGOJ --------------------------- */ /* Sessanta righe: su schermo largo si legge come tabella, sul telefono scorre in orizzontale dentro il suo contenitore invece di sfondare la pagina. L'intestazione resta visibile mentre si scorre. */ .bsd-registro-env{ overflow-x:auto;-webkit-overflow-scrolling:touch; margin:0 0 28px;border:1px solid #d7dbe2;border-radius:8px; } .bsd-registro{ width:100%;min-width:620px;border-collapse:collapse; font-size:.95rem;line-height:1.45;background:#fff;margin:0; } .bsd-registro caption{ caption-side:top;text-align:left;padding:12px 14px; font-size:.9rem;color:#3a3d44;background:#f1f3f6; border-bottom:1px solid #d7dbe2; } .bsd-registro thead th{ position:sticky;top:0;z-index:1; background:#1d1d1d;color:#fff;text-align:left; padding:10px 14px;font-size:.88rem;font-weight:700; letter-spacing:.02em;white-space:nowrap; } .bsd-registro td{padding:10px 14px;border-top:1px solid #e6e9ee;vertical-align:top;color:#1d1d1d} .bsd-registro tbody tr:nth-child(even){background:#fafbfc} .bsd-registro tbody tr:hover{background:#f1f5fa} .bsd-registro td:first-child{white-space:nowrap} .bsd-registro code{ background:#e4e8ee;border-radius:3px;padding:1px 5px; font-size:.88em;color:#1d1d1d;white-space:nowrap; } .bsd-registro small{color:#4a505c} @media (max-width:575.98px){ .bsd-registro{font-size:.9rem} .bsd-registro caption{font-size:.85rem;padding:10px 12px} .bsd-registro td,.bsd-registro thead th{padding:8px 10px} } /* ---------- 14. Dimensione della prosa ----------------------------------- */ /* responsive.css porta il corpo a 12 px sotto i 768 px, e il tema lo tiene a 14 px sopra: ogni paragrafo che non abbia una misura propria si legge quindi a 12 px sul telefono, prosa compresa. Il kit chiede che il testo corrente stia a 16 px (10_CONTROLLI_E_STRUMENTI.md, --testo-minimo). Si alzano i paragrafi e gli elenchi dentro i due contenitori del contenuto, piede, menu e banner del consenso restano fuori perche' stanno fuori da quei contenitori. */ .sec-content p, .sec-content li, .ed-page p, .ed-page li, /* le pagine di fiducia e un paio di guide tengono il testo in un .container figlio diretto di body, senza contenitore con una classe propria; il piede ha il suo .container dentro