/* ========================================================================== Child Theme Header -------------------------------------------------------------------------- Theme Name: PokaTheme Child Theme URI: https://pokatheme.com Description: PokaTheme Child Author: PokaTheme Author URI: https://pokatheme.com Template: pokatheme Version: 2.0.2 Text Domain: poka-child ========================================================================== */ /* CSS Version: 2.0.2 */ /* ========================================================================== Table of Contents -------------------------------------------------------------------------- Major sections in this stylesheet, with line numbers as of this commit. Re-run the inventory script (.css-inventory.py) to regenerate if these drift after substantial edits. L 48 Global Styles L 74 Container & Grid Layout L 122 Header & Navigation L 156 Page-Specific Overrides L 171 List Styles (Custom Bullets) L 202 Buttons & Call-to-Actions L 273 Links in Text Areas L 293 Typography: Headings & Widget Titles L 319 Featured Images & Post Meta L 399 Tables: Legacy & Modern L 965 Widgets, Reviews & Misc Components L 1000 Slot Rendering Modules L 1097 Slot Shortcode (cln) L 1826 Balduzzi Top Disclaimer (text-based) L 1920 Footer L 1975 Archives, Reviews & Comparison Tables L 2593 Custom Modifications (catch-all #1) L 4532 Custom Modifications (catch-all #2) L 4614 Hero CTA Replacement (affiliates-single-style1) L 4777 Num Giochi - layout rewrite L 4905 Customizer Additional CSS (merged) ========================================================================== */ /* ========================================================================== Global Styles -------------------------------------------------------------------------- Base typography, colors, and selection highlighting for the entire site. Affects , text selection, and root-level elements. ========================================================================== */ body { /* Default font and text color for all pages */ font-family: "Open Sans", sans-serif; color: #383737; background-color: #ffffff; } /* Highlight color and text color when user selects text */ ::selection { background-color: #FECD06; color: #383737; } ::-moz-selection { background-color: #FECD06; color: #383737; } /* ========================================================================== Container & Grid Layout -------------------------------------------------------------------------- Controls main container width and the default content/sidebar grid. Affects .wider-container, .col-md-8, .col-md-4, and .sidebar. ========================================================================== */ /* Extend container up to 1320px and center it */ .wider-container { max-width: 1320px !important; width: 95%; margin: 0 auto; } @media (max-width: 1400px) { .wider-container { max-width: 95% !important; } } /* Default desktop grid: main content 71%, sidebar 28% */ .col-md-8 { flex: 0 0 71%; max-width: 71%; } .col-md-4 { flex: 0 0 28%; max-width: 28%; } .sidebar { /* Padding around widgets in sidebar */ padding: 30px 25px; } /* Hide sidebar on tablet and smaller screens, make content full-width */ @media screen and (max-width: 1199px) { .col-md-8 { flex: 0 0 100%; max-width: 100%; } .col-md-4 { flex: 0 0 0%; max-width: 0%; } .sidebar { display: none; } } /* ========================================================================== Header & Navigation -------------------------------------------------------------------------- Fixed top bar, header height, and search bar visibility. Affects .appicicoso, header, .form-inline. ========================================================================== */ /* Sticky top element (e.g., promo bar) fixed at viewport top */ .appicicoso { position: fixed; top: 0; width: 100%; z-index: 999; } @media screen and (max-width: 599px) { /* Adjust margins and padding for mobile view */ .balduzzi { margin-bottom: 20px; } .head-logo { margin-top: 3px; } .appicicoso { padding: 4px 0 5px; } } /* Header background and fixed height */ header { background-color: #FECD06; height: 190px; } /* Hide the search bar in mobile header to save space */ .form-inline { display: none; } /* ========================================================================== Page-Specific Overrides -------------------------------------------------------------------------- Remove sidebar (and sometimes featured images) on certain pages and posts, allowing full-width content. Grouped by page IDs and post IDs respectively. ========================================================================== */ /*toglie la feauture image if categoria giochi gratis */ .category-giochi-gratis .attachment-full.size-full.wp-post-image { display: none !important; } /* ========================================================================== List Styles (Custom Bullets) -------------------------------------------------------------------------- Custom image bullets for positive (#limone, #pera) and negative (#mela) lists. ========================================================================== */ #limone li, #pera li, #mela li { background-repeat: no-repeat; background-position: top left; padding-left: 22px; line-height: 1.5em; overflow-x: visible; overflow-y: hidden; } #limone li { /* OK checkmark bullet */ background-image: url('https://casinolegali.net/wp-content/uploads/2017/09/ok.png'); } #pera li { /* Positive aspects bullet */ background-image: url('https://casinolegali.net/wp-content/uploads/2020/05/cose-positve-dei-casino-online-aams.png'); line-height: 2em; } #mela li { /* Negative aspects bullet */ background-image: url('https://casinolegali.net/wp-content/uploads/2020/05/cose-negative-dei-casino-online-aams.png'); line-height: 2em; } /* ========================================================================== Buttons & Call-to-Actions -------------------------------------------------------------------------- Overrides for built-in button styles and "Read more" links. ========================================================================== */ /* Primary button (yellow background, bold text) */ .btn--blue { background: #fecd06; color: #5a5a58; font-weight: bold !important; font-size: 1.3rem !important; } .btn--blue:hover { opacity: 0.85; color: green !important; } /* "Read more" links in tables */ .btn-read-more { color: green !important; border-bottom-color: green !important; } /* Table V2 underline icon color override */ /* Table V2 Colums and

override */ .completa .table-s2 .item .item-row .col-logo { display: block !important; width: 25%; } .completa .table-s2 .item .item-row .col-rating { font-family: "Open Sans"; width: 15%; } .completa .table-s2 .item .item-row .col-rating .btn-read-more{ font-size:1rem; font-family: "Open Sans"; } .completa .table-s2 .item .item-row .col-bonus { width: 15%; } .completa .table-s2 .item .item-row .col-features { display: block !important; width: 20%; } .completa .table-s2 .item .item-row .col-btn{ font-family: "Open Sans"; width: 25%; } /* Green star rating backgrounds */ .rating .star { background: green; } /* Hover background on V2 tables */ .table-s2 .item:hover { background: rgba(254, 205, 6, 0.1); box-shadow: inset 0 0 0 5px #fff; } /* ========================================================================== Links in Text Areas -------------------------------------------------------------------------- Consistent link styling within main content paragraphs and list items. ========================================================================== */ .text-area p a:not(.btn), p a:not(.btn), .lista li a:not(.btn) { color: green; font-weight: bold; text-decoration: none; } .text-area p a:not(.btn):hover, p a:not(.btn):hover, .lista li a:not(.btn):hover { background: rgba(254, 205, 6, 0.5); color: green; } /* ========================================================================== Typography: Headings & Widget Titles -------------------------------------------------------------------------- Font families and weights for headings and sidebar widget titles. ========================================================================== */ h1 { font-family: "Oswald", sans-serif; font-weight: 500; } h2, h3, h4, h5, h6 { font-family: "Oswald", sans-serif; font-weight: 400; } /* Center widget titles in sidebar */ .sidebar h2, .sidebar h3 { text-align: center; } /* Change icon color for featured articles in guides */ .casino-guides .casino-guide-box .label-guide--article i { color: #FECD06; } /* ========================================================================== Featured Images & Post Meta -------------------------------------------------------------------------- Center featured images and hide default post meta. ========================================================================== */ /* Properly center featured images */ .img-wrapper { text-align: center; margin: 20px 0; } .img-wrapper img, .attachment-full.size-full.wp-post-image { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } /* For single post templates */ .single-post-wrapper .img-wrapper { text-align: center; } /* For affiliate templates */ .review-up-area .img-wrapper { text-align: center; } /* Specifically for the wp-post-image class that you mentioned */ .wp-post-image { display: block !important; margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; height: auto !important; } .post-info { display: none; } .review-up-area .review-logo-group { max-width: 100%; } /* ========================================================================== Reduces the Relevant News padding in single.php ========================================================================== */ /* Reduce horizontal gap between carousel items */ .owl-carousel.carousel-relevant .owl-item { margin: 0 10px !important; } /* Remove any extra padding inside each .item */ .owl-carousel.carousel-relevant .item { padding: 10px 0 !important; } /* Optional: remove stage padding so items sit flush */ /* 1) Kill any stage padding so items sit flush */ .owl-carousel.carousel-relevant .owl-stage-outer { padding: 0 !important; } /* 2) Let each .owl-item shrink to its content width */ .owl-carousel.carousel-relevant .owl-item { width: auto !important; flex: 0 0 auto !important; } /* ========================================================================== Tables: Legacy & Modern -------------------------------------------------------------------------- Styles for various comparison and bonus tables across the site. Affects #tabella, #bonusgratis, #slotchepagano, #bonus-mini, #mini-tab-generica, .tabella-v1, .tabella-v2, .tabella-v3. ========================================================================== */ /* Legacy large casino comparison table */ #tabella .show { display: none; } #tabella .piccolo { font: 15px 'Oswald', sans-serif; text-align: justify; } #tabella .grosso { font: 25px 'Oswald', sans-serif; text-align: justify; } #tabella table { display: table; border-collapse: collapse; } #tabella td { padding: 10px; } #tabella tr:nth-child(odd) { background-color: #eee; } #tabella tr:nth-child(even) { background-color: #d6d6d6; } @media screen and (max-width: 900px) { #tabella .hide { display: none; } #tabella .show { display: table-cell; } } /* Bonus gratis table */ #bonusgratis table, th, td { border-collapse: collapse; } #bonusgratis table { table-layout: fixed; } #bonusgratis th { background-color: #008000; color: white; font: 1.8rem 'Oswald', sans-serif; line-height: 3rem; } #bonusgratis td { border-bottom: 1px solid #008000; line-height: 2em; } #bonusgratis a { color: green; text-decoration: underline; font-weight: bold; } #bonusgratis a:hover { background: rgba(254, 205, 6, 0.5); text-decoration: underline; } #bonusgratis tr:hover { background-color: #fecd06; } /* Slotchepagano table (slots that pay) */ #slotchepagano table, th, td { border-collapse: collapse; } #slotchepagano table { table-layout: fixed; } #slotchepagano th { background-color: #FECE08; color: #312F2F; font: 1.8rem 'Oswald', sans-serif; line-height: 3rem; } #slotchepagano td { border-bottom: 1px solid #008000; line-height: 2em; } #slotchepagano a { color: green; text-decoration: underline; font-weight: bold; } #slotchepagano a:hover { background: rgba(254, 205, 6, 0.5); } #slotchepagano tr:hover { background-color: #E8E7E5; } /* Responsive mini vs desktop slot tables */ @media screen and (min-width: 650px) { #tabslotmobile { display: none; } } @media screen and (max-width: 650px) { #tabslotdesktop { display: none; } } /* Bonus-mini small table */ #bonus-mini table, th, td { border-collapse: collapse; } #bonus-mini table { table-layout: fixed; } #bonus-mini th { background-color: #FECE08; color: #312F2F; font: 1.3em 'Oswald', sans-serif; line-height: 2em; } #bonus-mini td { border-bottom: 1px solid #E0E0E0; line-height: 2em; } #bonus-mini a { color: green; font-weight: bold; text-decoration: none; } #bonus-mini a:hover { text-decoration: underline; } #bonus-mini tr:hover { background-color: #FEFAE6; } /* Generic mini table */ #mini-tab-generica table, th, td { border-collapse: collapse; } #mini-tab-generica table { table-layout: fixed; } #mini-tab-generica th { background-color: #FECE08; color: #312F2F; font: 1.8rem 'Oswald', sans-serif; line-height: 3rem; } #mini-tab-generica td { border-bottom: 1px solid #008000; line-height: 2em; } #mini-tab-generica a { color: green; font-weight: bold; text-decoration: underline; } #mini-tab-generica a:hover { background: rgba(254, 205, 6, 0.5); } /* Uncomment to enable row hover #mini-tab-generica tr:hover { background-color: #E8E7E5; } */ /* Tabella V3: advanced comparison table */ .tabella-v3 { margin-bottom: 20px; } .tabella-v3 .blocco { background: #fff; border: 1px solid #e0e0e0; padding: 10px 15px; margin-top: -1px; transition: background-color 400ms ease; } .tabella-v3 .blocco:nth-child(even) { background-color: #faf9f9; } .tabella-v3 .blocco:hover { background: #FEFBEB; box-shadow: inset 0 0 0 5px #fff; } .tabella-v3 .blocco-row { display: flex; flex-wrap: wrap; align-items: center; text-align: center; margin: 0 -5px; } .tabella-v3 .tcol-logo { width: 20%; position: relative; } .tabella-v3 .logo-newbox { background: #eeedeb; padding-bottom: 55%; box-shadow: 0 2px 3px rgba(0,0,0,0.25); border-radius: 5px; position: relative; } .tabella-v3 .logo-newbox img { position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:80%; max-height:90%; } .tabella-v3 .tcol-rating { width: 10%; } .tabella-v3 .tcol-rating .icon-poka { color: #ffce1b; font-size: 18px; } .tabella-v3 .tcol-info1 { width: 7%; } .tabella-v3 .tcol-info2, .tabella-v3 .tcol-info4, .tabella-v3 .tcol-info5 { width: 17%; text-align: left; } .tabella-v3 .tcol-info2 ul li:before, .tabella-v3 .tcol-info5 ul li:before { content: "\02714"; color: #008000; padding-right: 8px; } .tabella-v3 .tcol-info4 ul li:before { content: "\01F512"; color: #008000; padding-right: 8px; } .tabella-v3 .tcol-btn { width: 18%; } .tabella-v3 .blocco .blocco-row > div { padding: 0 5px; } .tabella-v3 .blocco .blocco-row .tcol-logo .logo-newbox { background: #eeedeb; height: 0; padding: 0 0 55%; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); position: relative; border-radius: 5px; } .tabella-v3 .blocco .blocco-row .tcol-rating .blocco-ratings-num { padding-top: 5px; font-size: 12px; font-size: 0.8571428571rem; opacity: 0.6; } .numlic {color:gray; font-weight:bold;} .tabella-v3 .blocco .blocco-row .tcol-info2 { width: 11%; text-align: left; } .tabella-v3 .blocco .blocco-row .tcol-info4 ul li { display: block; margin-bottom: 5px; font-size: 13px; font-size: 0.9285714286rem; line-height: 1.2; } .tabella-v3 .blocco .blocco-row .tcol-info4 ul li:before { content: "\1F512"; color: #008000; padding-right: 8px; font-size: 16px; font-size: 1.1428571429rem; } .tabella-v3 .blocco .blocco-row .tcol-info4 ul li:last-child { margin-bottom: 0; } .tabella-v3 .blocco .blocco-row .tcol-info5 ul li { display: block; margin-bottom: 5px; font-size: 13px; font-size: 0.9285714286rem; line-height: 1.2; } .tabella-v3 .blocco .blocco-row .tcol-info5 ul li:before { content: "\02714"; color: #008000; padding-right: 8px; font-size: 16px; font-size: 1.1428571429rem; } .tabella-v3 .blocco .blocco-row .tcol-info5 ul li:last-child { margin-bottom: 0; } /* V3 Header row */ .tabella-v3 .v3-head .blocco { background: #fecd06; font-family: 'Oswald', sans-serif; font-size: 1.2em; } .tabella-v3 .v3-head .blocco:hover { box-shadow: none; } .tabella-v3 .v3-head .tcol-info2, .tabella-v3 .v3-head .tcol-info3, .tabella-v3 .v3-head .tcol-info4, .tabella-v3 .v3-head .tcol-info5 { text-align: center; } .tabella-v3 .v3-head .blocco .blocco-row .tcol-info2 { text-align: center; } /* Responsive adjustments for Tabella V3 */ @media (max-width: 991px) { .v3-head { display:none; } } @media (max-width: 991px) { .tabella-v3 .blocco .blocco-row .tcol-logo { width: 100%; position: relative; margin-bottom: 15px; } .tabella-v3 .blocco .blocco-row .tcol-logo img{min-height:20px;} .tabella-v3 .blocco .blocco-row .tcol-rating {width: 33%; } .tabella-v3 .blocco .blocco-row .tcol-info1 {width: 33%; position: relative; } .tabella-v3 .blocco .blocco-row .tcol-info2 {width: 33%; position: relative; } .tabella-v3 .blocco .blocco-row .tcol-info4 {width: 100%; margin-top:1em; margin-bottom:1em; text-align: center; } .tabella-v3 .blocco .blocco-row .tcol-info4 ul li { display: inline; margin-bottom: 5px; font-size: 13px; font-size: 0.9285714286rem; line-height: 1.2; } .tabella-v3 .blocco .blocco-row .tcol-info5 {width: 100%; margin-top:1em; margin-bottom:1em; text-align: center; } .tabella-v3 .blocco .blocco-row .tcol-info5 ul li { display: inline; margin-bottom: 5px; font-size: 13px; font-size: 0.9285714286rem; line-height: 1.2; } .tabella-v3 .blocco .blocco-row .tcol-btn {width: 100%; position: relative; } } /* Tabella V2 */ .tabella-v2 { margin-bottom: 20px; } .tabella-v2 .blocco { /* similar structure to V3, adjusted widths */ } /* (Omitted repetitive children for brevity—apply same grouping approach as V3) */ /* Table V2 underline icon color override */ .table-s2 .item .item-row .col-features ul li::before { /* Force text presentation of the HEAVY CHECK MARK (U+2714) by appending Variation Selector-15 (U+FE0E). Without it, iOS Safari renders U+2714 as a system emoji glyph and ignores the CSS color, so the green tint we apply only takes effect on desktop browsers. The VS-15 is invisible on engines that don't recognise it. */ content: "\02714\FE0E" !important; color: green !important; } .table-s1 .item .count { color: green !important; } .tabella-v2 .blocco { background: #fff; border: 1px solid #e0e0e0; padding: 10px 15px; transition: background-color 400ms ease; margin-top: -1px; } .tabella-v2 .blocco .blocco-row { margin-left: -5px; margin-right: -5px; -webkit-box-align: center; -ms-flex-align: center; display: flex; display: -ms-flexbox; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: center; align-items: center; } .tabella-v2 .blocco .blocco-row > div { padding: 0 5px; } .tabella-v2 .blocco .blocco-row .tcol-logo { width: 20%; position: relative; } .tabella-v2 .blocco .blocco-row .tcol-logo .logo-newbox { background: #eeedeb; height: 0; padding: 0 0 55%; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); position: relative; border-radius: 5px; } .tabella-v2 .blocco .blocco-row .tcol-logo .logo-newbox a img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; max-width: 80%; max-height: 90%; } .tabella-v2 .blocco .blocco-row .tcol-rating { width: 12%; } .tabella-v2 .blocco .blocco-row .tcol-rating .rating .stella .icon-poka { color: #ffce1b; font-size: 18px; } .tabella-v2 .blocco .blocco-row .tcol-rating .blocco-ratings-num { padding-top: 5px; font-size: 12px; font-size: 0.8571428571rem; opacity: 0.6; } .tabella-v2 .blocco .blocco-row .tcol-rating .btn-recensione { padding-top: 4px; color: #008000; font-weight: 400; border-bottom: 1px dashed #008000; display: inline-block; line-height: 1.2; } .tabella-v2 .blocco .blocco-row .tcol-info1 { width: 8%; text-align:center; align-items: center; display: inline-block; vertical-align: middle; } .tabella-v2 .blocco .blocco-row .tcol-info2 { width: 15%; text-align: center; } .tabella-v2 .blocco .blocco-row .tcol-info3 { width: 25%; text-align: center; } .tabella-v2 .blocco .blocco-row .tcol-btn { width: 20%; } /* V2 Header */ .tabella-v2 .v2-head .blocco { background:#fecd06; font-family: Oswald; font-size:1.2em; } .tabella-v2 .v2-head .blocco:hover { background: #fecd06; box-shadow: inset 0 0 0 0px #fff; } .tabella-v2 .v2-head .blocco .blocco-row .tcol-info2 { text-align: center; } .tabella-v2 .v2-head .blocco .blocco-row .tcol-info3 { text-align: center; } /* Tabella V2 Responsive Steps */ @media (max-width: 991px) { .v2-head { display:none; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-logo { width: 100%; position: relative; margin-bottom: 15px; } .tabella-v2 .blocco .blocco-row .tcol-logo img{min-height:20px;} } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-logo .logo-newbox { margin-left: 0; padding-bottom: 30%; min-height:126px; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-rating { width: 50%; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-info1 { width: 50%; padding-bottom: 1em; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-info2 { width: 50%; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-info3 { width: 50%; text-align: center; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-info2 ul { padding: 20px 0; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-info2 ul li { text-align: center; line-height: 1.5em; font-size: 0.9em; margin-bottom: 3px; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-info3 ul li { text-align: center; line-height: 1.5em; font-size: 0.9em; margin-bottom: 3px; } } @media (max-width: 991px) { .tabella-v2 .blocco .blocco-row .tcol-btn { width: 100%; display:block; } } /* Tabella V1 */ .tabella-v1 { margin-bottom: 20px; } .tabella-v1 .blocco { /* similar to V2 with different widths */ } /* (Children omitted—follow same pattern above) */ /* ========================================================================== Widgets, Reviews & Misc Components -------------------------------------------------------------------------- Affiliation widget, playthrough text, "Top 3" review links, news headlines. ========================================================================== */ /* Stelline sulla tabella */ .stelline { display: inline-block; font-style: normal; font-weight: normal; line-height: 1; font-size: 18px; color: #ffce1b } /* Adjust padding inside review shortcode spins widget */ .aff-widget-spins { padding: 20px 15px; } /* Small watermark text for wagering requirements */ .playthrough { font: 0.7em 'Open Sans', sans-serif; opacity: 0.6; } /* Top 3 Box */ /* News list item headings styling */ .news-list .item .text h4 { font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 1.3em; } /* Element classes for post & sidebar promo text sizing */ /* ========================================================================== Slot Rendering Modules -------------------------------------------------------------------------- Controls visibility and sizing of slot comparison sliders/modules. Affects .slot-mob, .slot-dsk, .slot-mob-land, .slot-mob-port, .confronto-slot. ========================================================================== */ @media screen and (max-width: 2500px) { .slot-mob, .slot-mob-land, .slot-mob-port { display: none; } .confronto-slot { width: 75%; margin: 0 auto; text-align: center; } } @media screen and (max-width: 1100px) { .slot-dsk { display: none; } .slot-mob { display: flex; width: 100%; margin: 0 auto; text-align: center; } .confronto-slot { width: auto; } } @media screen and (max-width: 1100px) and (orientation: landscape) { .slot-mob-land { display: flex; } .slot-mob-port { display: none; } } @media screen and (max-width: 1100px) and (orientation: portrait) { .slot-mob-port { display: flex; } .slot-mob-land { display: none; } } /* End of CHILD-style-reordered.css */ .freespin-recensione { font-size: 1.3em; margin-bottom: .8em; } /* linked in*/ /* Author bio icons: inline, baseline-aligned */ .author-box__bio .inkedin-icon, .author-box__bio .linkedin-icon { display: inline-block; line-height: 0; width: 1.2em; height: 1.2em; vertical-align: -0.1em; } /* Link color (applies to text and SVG via currentColor) */ .author-box__bio .linkedin-icon path { fill: #0A66C2; } .author-box__bio a { color: green; font-weight: bold; } .author-box__bio a:hover { color: green; font-weight: bold;border-bottom: 1px dashed green; } .author-archive__header .author-archive__header--float .linkedin-icon { display: inline-block; line-height: 0; width: 1.2em; height: 1.2em; vertical-align: -0.1em; } .author-archive__header path { fill: #0A66C2; } .author-archive__header a { color: green; font-weight: bold; } .linkedin-icon { fill:#0A66C2; width: 1.2em; height: 1.2em; vertical-align: -0.255em; } /*removes feature image*/ .img-wrapper {display:none;} h1 {text-transform: capitalize;} /*slots*/ /* === SLOT SHORTCODE (cln) ================================================ */ .cln-slot { width: 98%; margin: 0 auto 20px; } .cln-slot__cover { background-color: #002c48; position: relative; display: flex; align-items: center; justify-content: center; padding: 1%; min-height: 525px; color: #fff; text-align: center; border-radius: 12px; overflow: hidden; } @media (max-width: 1095px) { .cln-slot__cover { min-height: 325px; } } .faded-background { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .faded-background::before { content: ""; position: absolute; inset: 0; z-index: 0; filter: blur(8px); background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; } .cln-slot__cover-inner, .cln-slot__cover img, .cln-slot__cover button { position: relative; z-index: 2; } .cln-slot__thumb { max-width: 440px; width: 70%; height: auto; display: block; margin: 0 auto 16px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.25); } /* === Fixed CTA button: badge + H4-sized label ============================ */ .cln-slot__play { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; padding: 10px 16px; border: 2px solid #002c48; text-align: center; } .cln-slot__play:hover { background: #fff; color: #002c48; } .cln-slot__play-badge { height: 28px; width: auto; display: block; } .cln-slot__play-label { /* mimic theme H4: heading font + size */ font-family: var(--cln-heading, Oswald, Impact, Arial, sans-serif); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.25rem); line-height: 1.2; } /* === Frame / placeholder ================================================== */ .cln-slot__frame { width: 98%; margin: 12px auto 0; } .cln-slot__placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; width: 100%; min-height: 525px; /* JS will adjust on click to match mobile/desktop choice */ background: transparent; color: #383737; border-radius: 10px; border-style: solid; border-width:8px; border-color: #FECD06; padding: 16px; } @media (max-width: 1095px) { .cln-slot__placeholder { min-height: 325px; } } .cln-slot__placeholder-img { max-width: 360px; width: 80%; height: auto; margin-bottom: 10px; } .cln-slot__placeholder-title { font-family: var(--cln-heading, Oswald, Impact, Arial, sans-serif); font-weight: 600; font-size:2em; } /* === Age notice under the frame ========================================= */ .cln-slot__age { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; margin: 3px auto 30px; width: 98%; } .cln-slot__age-badge { height: 28px; width: auto; display: inline-block; } .cln-slot__age-text { font-size: 0.95rem; line-height: 1.3; } /*Nouva Tabella*/ /* Disclosure boxes */ /* Container - inline with H2 */ .table-disclaimers { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px 15px; vertical-align: middle; } /* If you want disclaimers on the same line as H2 */ h2 + .table-disclaimers { display: inline-flex; margin-left: 15px; } /* Individual disclaimer items - compact pills */ .disclaimer-item { position: relative; display: inline-block; background: #fff; border: 1px solid #d0d0d0; border-radius: 20px; transition: all 0.3s ease; } .disclaimer-item:hover { border-color: #007cba; box-shadow: 0 2px 6px rgba(0, 123, 186, 0.12); } /* Trigger button - compact */ .disclaimer-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: transparent; border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: #555; line-height: 1.2; transition: color 0.3s ease; white-space: nowrap; } .disclaimer-trigger:hover { color: #007cba; } .disclaimer-trigger:focus { outline: 2px solid #007cba; outline-offset: 2px; border-radius: 20px; } /* Remove arrows completely */ .disclaimer-trigger::after { display: none !important; } /* Icons - smaller */ .disclaimer-icon { font-size: 14px; opacity: 0.7; transition: opacity 0.3s ease; flex-shrink: 0; } .disclaimer-trigger:hover .disclaimer-icon { opacity: 1; } /* Content panel - hidden by default for no-JS */ .disclaimer-content { /* No-JS fallback: Hide by default for cleaner look */ display: none; } /* When JS is enabled, prepare for hover/click display */ .js-enabled .disclaimer-content { display: block; position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; width: max-content; max-width: min(600px, 90vw); min-width: 300px; background: #fff; color: #333; border: 1px solid #d0d0d0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 16px; z-index: 1000; text-align: left; } /* Show on hover or when expanded */ .js-enabled .disclaimer-item:hover .disclaimer-content, .js-enabled .disclaimer-content[aria-hidden="false"] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } /* Content styling - more compact */ .disclaimer-title { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: #111; padding-bottom: 6px; border-bottom: 1px solid #e5e5e5; text-align: left; } .disclaimer-content ul { margin: 0; padding: 0 0 0 16px; list-style-type: disc; text-align: left; } .disclaimer-content li { margin: 5px 0; line-height: 1.4; color: #555; font-size: 13px; text-align: left; } .disclaimer-content a { color: #007cba; text-decoration: underline; } .disclaimer-content a:hover { text-decoration: none; } .disclaimer-content strong { font-weight: 600; color: #333; } /* Special styling for H2 with disclaimers on same line */ h2[align="center"] { display: inline-block; margin-right: 0; } /* Alternative: Disclaimers on new line but centered */ .disclaimers-below { text-align: center; margin: 10px 0 20px; } .disclaimers-below .table-disclaimers { display: inline-flex; margin: 0; } /* Mobile - ALL SCREENS up to 768px */ @media (max-width: 768px) { /* Base mobile styles */ .table-disclaimers { display: flex; flex-direction: row; gap: 8px; margin: 10px auto 20px; justify-content: center; flex-wrap: wrap; } .disclaimer-item { flex: 0 0 auto; } .disclaimer-trigger { padding: 6px 10px; font-size: 12px; } .disclaimer-icon { font-size: 12px; } /* Default mobile positioning */ .js-enabled .disclaimer-content { max-width: 300px; } .js-enabled .disclaimer-item:first-child .disclaimer-content { left: -60px !important; right: auto !important; transform: translateX(0) translateY(4px) !important; } .js-enabled .disclaimer-item:last-child .disclaimer-content { left: auto !important; right: -30px !important; transform: translateX(0) translateY(4px) !important; } .js-enabled .disclaimer-item:first-child .disclaimer-content[aria-hidden="false"], .js-enabled .disclaimer-item:last-child .disclaimer-content[aria-hidden="false"] { transform: translateX(0) translateY(0) !important; } } /* Override for VERY SMALL screens */ @media (max-width: 480px) { .table-disclaimers2 { gap: 6px; } .disclaimer-trigger2 { padding: 5px 8px; font-size: 11px; } .disclaimer-icon2 { font-size: 11px; } .disclaimer-content2 { padding: 12px; } } /* Print styles - show all content */ @media print { .disclaimer-content { display: block !important; position: static !important; opacity: 1 !important; transform: none !important; margin-top: 10px !important; box-shadow: none !important; border: 1px solid #000 !important; page-break-inside: avoid; text-align: left !important; } .table-disclaimers { display: block !important; margin: 10px 0 !important; } .disclaimer-item { display: block !important; margin: 10px 0 !important; } } /* --- Title bar with disclaimers --- */ .table-titlebar{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin: 0 0 10px; } .table-titlebar h2{ margin:0 !important; } /* Info pills */ .disclaimer-pill{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #e5e5e5; border-radius:999px; background:#fff; font-size:.92rem; line-height:1; user-select:none; } .disclaimer-pill::before{ content:"ⓘ"; font-weight:600; opacity:.75; } .disclaimer-pill button{ all:unset; cursor:pointer; font-weight:600; } .disclaimer-pill button:focus{ outline:2px solid #6ea8fe; outline-offset:2px; border-radius:6px; } /* Popover */ .disclaimer-pop{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,6px); width:min(720px,92vw); background:#fff; color:#333; border:1px solid #e5e5e5; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); padding:12px 14px; z-index:1000; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .disclaimer-pop[aria-hidden="false"], .disclaimer-pill:hover .disclaimer-pop{ opacity:1; transform:translate(-50%,0); pointer-events:auto; } /* Popover content */ .disclaimer-pop .title{ font-weight:700; margin:2px 0 6px; } .disclaimer-pop ul{ margin:0 0 0 18px; padding:0; } .disclaimer-pop li{ margin:.25em 0; } /* Small helper on very narrow screens */ @media (max-width:480px){ .table-titlebar{ gap:8px; } .disclaimer-pop{ width:94vw; } } /* Nascondi inizialmente i casinò dopo il decimo - con maggiore specificità */ #completa-desk .table-s2 .item:nth-child(n+11), #completa-mob .table-s2 .item:nth-child(n+11) { display: none !important; opacity: 0; height: 0; overflow: hidden; transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out; } /* Mostra tutti quando la classe expanded è attiva */ #completa-desk .table-expanded .item, #completa-mob .table-expanded .item { display: block !important; opacity: 1 !important; height: auto !important; overflow: visible !important; } /* Animazione per l'apparizione */ @keyframes fadeInRow { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #completa-desk .table-expanded .item:nth-child(n+11), #completa-mob .table-expanded .item:nth-child(n+11) { animation: fadeInRow 0.4s ease-out forwards; } /* Stile del pulsante espandi/riduci */ .expand-table-btn { display: block; margin: 20px auto; padding: 12px 35px; background: #fecd06; color: #5a5a58; font-weight: bold; font-size: 1.1rem; font-family: 'Open Sans', sans-serif; border: none; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .expand-table-btn:hover { opacity: 0.85; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.25); color: #5a5a58; } .expand-table-btn:active { transform: translateY(0); } /* Icona freccia nel pulsante */ .expand-table-btn .arrow-icon { display: inline-block; margin-left: 5px; transition: transform 0.3s ease; } .expand-table-btn.expanded .arrow-icon { transform: rotate(180deg); } /* Responsive per mobile */ @media (max-width: 768px) { .expand-table-btn { width: 90%; max-width: 300px; } } @media (max-width: 767px) { .item-ratings-num { margin-bottom: -2em; } } /*AUTHOR PAGE*/ /***** AUTHOR PAGE — simple, robust float layout *****/ /* Menus must always be above page content */ .site-header, #page-wrapper header, .header, .main-header { position: relative; z-index: 9999; } /* Author header container - UPDATED for proper text wrapping */ body.author .author-archive__header { /* Remove the overflow:hidden to allow text to wrap around floated image */ background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; margin: 0 0 24px; box-sizing: border-box; clear: both; /* Don't use overflow:hidden - it prevents wrapping */ /* Instead use clearfix approach */ } /* Clearfix for the author header to contain floats */ body.author .author-archive__header::after { content: ""; display: table; clear: both; } /* Portrait: float left so text wraps - UPDATED */ body.author .author-archive__media { float: left; margin: 0 20px 16px 0; /* Increased right margin for better spacing */ } body.author .authorbox__img, body.author .author-archive__avatar { display: block; width: 180px; height: 180px; object-fit: cover; border-radius: 3%; box-shadow: none; background: none; } /* Text block - UPDATED to allow wrapping */ body.author .authorbox__body { /* Remove overflow: hidden to allow text to flow around the image */ /* No float, no overflow hidden - just let it flow naturally */ min-width: 0; } /* Author name styling */ body.author .authorbox__name { margin: 0 0 12px; /* Slightly increased bottom margin */ font-family: "Oswald", sans-serif; font-weight: 500; font-size: 2rem; line-height: 1.2; color: #383737; } /* Bio text styling */ body.author .authorbox__bio { font-family: "Open Sans", sans-serif; color: #383737; line-height: 1.6; word-break: break-word; overflow-wrap: anywhere; } /* Ensure paragraphs in bio have proper spacing */ body.author .authorbox__bio p { margin-bottom: 1em; } body.author .authorbox__bio p:last-child { margin-bottom: 0; } /* Posts title below author box */ body.author .author-archive__posts-title { clear: both; /* Ensure it starts below the floated image */ margin-top: 2rem; font-family: "Oswald", sans-serif; font-weight: 400; font-size: 1.8rem; color: #383737; } /* Kill the theme's negative pull-up on the posts list */ body.author .author-archive__list.single-post-wrapper { margin-top: 0 !important; clear: both !important; } /* Extra specificity in case the skin targets .group-category children */ body.author .group-category .main-col > .author-archive__list.single-post-wrapper { margin-top: 0 !important; } /* Mobile: stack image above text */ @media (max-width: 640px) { body.author .author-archive__media { float: none; margin: 0 auto 16px; text-align: center; } body.author .authorbox__img, body.author .author-archive__avatar { width: 140px; height: 140px; margin: 0 auto; } body.author .author-archive__header { text-align: center; } body.author .authorbox__name { text-align: center; } body.author .authorbox__bio { text-align: left; /* Keep bio text left-aligned for readability */ } } /* Tablet breakpoint - optional intermediate layout */ @media (min-width: 641px) and (max-width: 768px) { body.author .authorbox__img, body.author .author-archive__avatar { width: 150px; height: 150px; } } /* AUTHOR BOX */ .author-box { margin: 2rem 0 0; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.04); } .author-box__inner { display: flex; gap: 20px; padding: 18px; align-items: flex-start; } .author-box__media { flex: 0 0 auto; } .author-box__avatar { width: 120px; height: 120px; border-radius: 3%; object-fit: cover; display: block; box-shadow: 0 0 0 4px #fff, 0 0 0 0px #FECD06; /* brand giallo */ } .author-box__content { flex: 1 1 auto; } .author-box__name { margin: 0 0 .25rem; font-family: "Oswald", sans-serif; /* theme heading font */ font-weight: 500; font-size: 1.8rem; } .author-box__bio { margin: 0 0 .5rem; font-family: "Open Sans", sans-serif; color: #383737; } .author-box__links { margin: 0; font-size: .95rem; } .author-box__link { color: green; /* theme link color */ font-weight: bold; text-decoration: none; border-bottom: 1px dashed green; } .author-box__link:hover { background: rgba(254,205,6,.5); } .author-box__sep { margin: 0 .5rem; opacity: .5; } /* Responsive */ @media (max-width: 640px) { .author-box__inner { flex-direction: column; align-items: center; text-align: center; } .author-box__avatar { width: 100px; height: 100px; } } /* Author Box — make sure it doesn't wrap around floated images above */ .text-area .author-box { clear: both; /* drop below any floats from the content */ width: 100%; box-sizing: border-box; } /* Kill any left padding/indents inherited from .text-area */ .text-area > .author-box, .text-area .author-box__content, .text-area .author-box__bio, .text-area .author-box__links { margin-left: 0 !important; padding-left: 0 !important; } /* Lock in our intended inner padding (18px all around) */ .text-area .author-box__inner { padding: 18px !important; } /* Some Poka skins indent the first paragraph inside .text-area — reset it here */ .text-area .author-box__bio p:first-child { text-indent: 0 !important; margin-top: 0; } /* Keep the avatar corners and prevent it inheriting odd paddings */ .text-area .author-box__avatar { border-radius: 3% !important; display: block; } /* ===== Balduzzi top disclaimer (text-based) ===== */ :root { --balduzzi-h: 25px; } /* height used to offset page below */ .balduzzi { background: #FECD06; } /* same yellow as before */ .balduzzi__inner{ max-width:1320px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px; padding:6px 10px; } .balduzzi__img{ flex:0 0 auto; width:clamp(28px,3.5vw,44px); height:auto; } .balduzzi__img--right{ width:clamp(70px,10vw,120px); } .balduzzi__text{ text-align:center; line-height:1.15; } .balduzzi__row--big{ font-family:'Oswald', sans-serif; font-weight:400; font-size:clamp(14px,1.6vw + .3rem,22px); } .balduzzi__row--small{ font-family:'Open Sans', sans-serif; font-size:clamp(11px,1.1vw + .15rem,14px); margin-top:2px; } .balduzzi a{ color:inherit; text-decoration:underline; } /* The bar is already sticky via .appicicoso in your CSS; add offset for content */ #page-wrapper{ padding-top:var(--balduzzi-h); } @media (max-width:599px){ :root{ --balduzzi-h: 30px; } .balduzzi__inner{ gap:8px; padding:4px 8px; } } /* Force exactly two lines on narrow phones */ @media (max-width:480px){ .balduzzi__img{ width:clamp(22px,6.2vw,30px); } .balduzzi__img--right{ width:clamp(58px,18vw,90px); } /* Prevent the big line from breaking onto two lines */ .balduzzi__row--big{ font-size:clamp(12px,3.2vw,18px); white-space:nowrap; } /* Keep the small line on one line too */ .balduzzi__row--small{ font-size:clamp(10px,2.8vw,13px); white-space:nowrap; } } /*baslduzzi */ /* Fix z-index stacking order - disclaimer should be on top */ .balduzzi.appicicoso { z-index: 10000 !important; /* Higher than menu */ } /* Ensure header and menu stay below disclaimer */ header { position: relative; z-index: 998; /* Lower than disclaimer */ } .head-menu { position: relative; z-index: 998; /* Same as header */ } /* When menu becomes sticky on scroll, keep it below disclaimer */ .head-menu.sticky, .head-menu.fixed { z-index: 998 !important; /* Stay below disclaimer */ } /* Ensure disclaimer is always on top with higher z-index */ .balduzzi.appicicoso { z-index: 10000 !important; position: fixed !important; top: 0 !important; width: 100% !important; } /* Force sticky menu to position below disclaimer */ .head-menu.sticky-element-original.element-is-sticky[style*="z-index: 999"] { z-index: 998 !important; /* Override the inline top value - adjust this value if needed */ top: var(--balduzzi-h) !important; padding-top:2em !important; } /* ========================================================================== Footer ========================================================================== */ /* === Footer rows: equal columns per row, independent of each other === */ .footer .widget-columns { /* kill any legacy float/flex assumptions and take control */ display: grid !important; grid-template-columns: 1fr; /* mobile: single column */ grid-auto-rows: auto; gap: 20px; /* tweak spacing if you like */ } /* Children: neutralise theme grid/floats/widths completely */ .footer .widget-columns > * { float: none !important; width: auto !important; max-width: 100% !important; flex: none !important; display: block !important; box-sizing: border-box; } /* Desktop/tablet: set columns based on that row's widget-count-N */ @media (min-width: 768px) { .footer .widget-columns.widget-count-1 { grid-template-columns: 1fr !important; } .footer .widget-columns.widget-count-2 { grid-template-columns: repeat(2, 1fr) !important; } .footer .widget-columns.widget-count-3 { grid-template-columns: repeat(3, 1fr) !important; } .footer .widget-columns.widget-count-4 { grid-template-columns: repeat(4, 1fr) !important; } .footer .widget-columns.widget-count-5 { grid-template-columns: repeat(5, 1fr) !important; } .footer .widget-columns.widget-count-6 { grid-template-columns: repeat(6, 1fr) !important; } } /* Optional: if the theme wraps widgets in extra grid columns, nuke those too */ .footer .widget-columns > [class*="col-"] { float: none !important; width: auto !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /*scritta dopo il logo*/ .footer-name {font-family: "Oswald", sans-serif; font-weight: 500; font-size: 3em !important; padding-bottom:1em; } /*poka back to top + Ultima riga */ .btn.btn-backToTop {display:none;} .ultima-riga {color:grey; padding-bottom: 1em;} /* ========================================================================== Archives, Reviews & Comparison Tables -------------------------------------------------------------------------- Archive listing styles, single-recensione tweaks, the main comparison table (".completa" / "#completa-mob") with its swap and stacking rules, blog-list typography, sidebar promo widgets, the "Top 3" widget, the tippy-tooltip card styling, and the .cln-tablev2 (cloned table v2) layout overrides for logo box, GAD row, CTA button order, and feature list. Most of this is the casino-affiliate comparison flow. ========================================================================== */ /*ARCHIVE Styles */ h2.news-title.h5.mb-2 {padding-top:1.5em; font-weight:bold;} .news-excerpt a.read-more {color:green; font-weight:bold;} .news-excerpt a:hover.read-more {color: green; background: rgba(254, 205, 6, 0.5);} /* RECENSIONI SINGLE*/ .single-affiliates .review-bonus {display:none !important;} /*Aggiusta Tabellone principale*/ .rating-counter {display:none;} .btn-read-more {margin-top:.3em;} @media only screen and (max-width: 768px) { .btn-read-more {margin-top:1.5em;} } /* Responsive tabella principale. Swap between full-width (.completa) and mobile-stacked (#completa-mob) tables happens at 1000px: ≤999px shows #completa-mob, ≥1000px shows .completa. Bounds are 999/1000 (not 767/767) so they never overlap. */ @media (max-width: 999px) { .completa { display:none; } } @media (min-width: 1000px) { #completa-mob { display:none; } } /* Aggiusta il logo su mobile. Only matters when #completa-mob is the visible table, so tracks the swap breakpoint above. */ @media (max-width: 999px) { .table-s2 .item .item-row .col-logo .logo-box{ min-height:126px; } } /* Stacked-card layout for #completa-mob across the full 0-999px range. The parent theme (pokatheme/css/styles.css) stacks .table-s2 columns into a card layout only at (max-width: 767px). Now that we swap to #completa-mob at <=999px (was 767px), the 768-999px range was rendering #completa-mob with the parent's "narrow horizontal" layout, which is too crowded for the data the table now carries. These rules mirror the parent's <=767px values up to 999px, scoped to #completa-mob so they don't leak into .completa (which is hidden in this range anyway). */ @media (max-width: 999px) { #completa-mob .table-s2 .item .item-row .col-logo { width: 100%; margin-bottom: 15px; } #completa-mob .table-s2 .item .item-row .col-logo .logo-box { margin-left: 0; padding-bottom: 30%; } #completa-mob .table-s2 .item .item-row .col-logo .rank-num { margin-top: 0; left: 5px; top: 0; background: #fff; z-index: 2; width: 20px; line-height: 20px; text-align: center; font-size: 14px; font-size: 1rem; } /* display:block !important defeats the parent rule .main-col .table-s2 .item .item-row .col-rating { display: none } at (max-width: 991px), which would otherwise hide col-rating inside #completa-mob across the 768-991 range. */ #completa-mob .table-s2 .item .item-row .col-rating { width: 50%; display: block !important; } #completa-mob .table-s2 .item .item-row .col-bonus { width: 50%; } #completa-mob .table-s2 .item .item-row .col-features { width: 100%; display: block; } #completa-mob .table-s2 .item .item-row .col-features ul { padding: 20px 0; } #completa-mob .table-s2 .item .item-row .col-features ul li { text-align: center; line-height: 1.1; font-size: 12px; font-size: 0.8571428571rem; margin-bottom: 3px; } /* Defeat the unconditional 'display: inline-block !important' on the 4th feature item (set near the .cln-features-grid block further down in this file). At <=767 the grid container handles layout, so the inline-block is harmless; in 768-999 there is no grid, and the inline-block leaves item 4 left-aligned while items 1-3 render as centered blocks. Use display:block (not list-item) to match items 1-3 — the parent rule sets 'col-features ul li { display: block }', and a list-item value would re-introduce the native bullet marker on this item only. */ #completa-mob .cln-tablev2 .col-features li:nth-child(4), #completa-mob .cln-tablev2 .col-features > *:nth-child(4) { display: block !important; } #completa-mob .table-s2 .item .item-row .col-btn { width: 100%; } } /* aggiusta h4 nei titoli dei blog posts*/ .news-list .item .text h4 { font-family: Oswald, sans-serif; font-weight: 500; font-size: 1.5em; } /* Element classes for post & sidebar promo text sizing */ .info1 { font-size: 1.6em; } .info2 { font-size: 1.6em; font-weight: bold; } .info3 { font-size: 1.2em; } .sidebarpromo .info2 { font-size: 1.2em; } .sidebarpromo .info3 { font-size: 1em; } .col-md-8.main-col .info2, .col-md-8.main-col .info3 { font-size: 1.2em; } /* Guardrails for layout */ .single-post-wrapper, #main{ overflow-x:hidden; } /* Top 3 Box */ .top-3recensione { font-size: 0.7em; border-bottom: 1px dashed #008000; display: inline-block; line-height: 1.2em; } .top-3recensione:hover {border-bottom-style: solid; } a.top-3recensione {color:green !important; font-family: "Open Sans"; font-size: 0.7em; font-weight: normal !important; } a:hover.top-3recensione {background-color: transparent !important;} /* Keep layout intact; just polish spacing for new bits */ .aff-widget-spins .freespin-recensione { margin: 8px 0 15px; text-align: center; font-weight: 600; font-size: 1.5em; } .aff-widget-spins .freespin-recensione a { text-decoration: none; border-bottom: 1px dashed; } .aff-widget-spins .freespin-recensione a:hover { text-decoration: none; border-bottom: 1px solid; } .aff-widget-spins .freespin-responsabile { margin-top: 10px; text-align: center; font-size: 0.875em; opacity: 0.85; } /* Optional: slightly tighten bonus paragraph now that "Recensione" moved out */ .aff-widget-spins > p { margin-bottom: 1px; } .aff-widget-spins .terms-wrapper {margin-top: 0px !important; opacity: 0.6; } .aff-widget-spins .terms-wrapper .tooltip-el {border-bottom: 1px dashed;} .aff-widget-spins .terms-wrapper .tooltip-el:hover {border-bottom: 1px solid;} /* NEW TABLE */ /* Optional: a compact header line if your tooltip text starts with a title */ .tippy-tooltip .tippy-content .popup-title, .tippy-tooltip .tippy-content h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.25; font-weight: 600; color: #1f2937; } .tippy-tooltip .tippy-content br { display: none !important; } .tippy-tooltip .tippy-content ul, .tippy-tooltip .tippy-content ol { margin: 8px 0 8px 22px; padding: 0; } .tippy-tooltip .tippy-content li { margin: 6px 0; } .tippy-tooltip .tippy-content h3 { margin: 0 0 8px; line-height: 1.25; } /* Make the “Termini e Condizioni” trigger look like a subtle help link */ .terms-wrapper .tooltip-el { text-decoration: none; text-underline-offset: 2px; } /* Base tooltip card */ .tippy-tooltip { background: #ffffff; /* card background */ color: #2d2d2c; /* body text */ border: 1px solid #e5e7eb; /* light border */ border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.18); max-width: 640px; /* comfortable reading width */ z-index: 999999; /* on top of carousels/headers */ } /* Inner spacing + readable typography */ .tippy-tooltip .tippy-content { padding: 14px 16px; /* override theme’s 10px 0 */ color: inherit; font-size: 14px; line-height: 1.55; text-align: left; } /* Links inside the tooltip (e.g., operator pages) */ .tippy-tooltip .tippy-content a { color: #2d739b; text-decoration: underline; text-underline-offset: 2px; } /* Arrow (Tippy v4 uses a colored arrow element) */ .tippy-tooltip .tippy-arrow { color: #ffffff; /* arrow fill same as card bg */ filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); } /* Mobile: keep it within the viewport */ @media (max-width: 640px) { .tippy-tooltip { max-width: 92vw; } .tippy-tooltip .tippy-content { padding: 12px 14px; font-size: 13.5px; } } /* (4) Responsible gaming line under CTA. The DOM in .col-btn is: [desktop CTA, .cln-resp-msg, mobile CTA]. At <=999px the desktop CTA is hidden and the mobile CTA is shown, leaving DOM order: cln-resp-msg, mobile CTA — i.e. the responsible- gaming line lands ABOVE the button. Make .col-btn a flex column and push .cln-resp-msg to the end so it always sits below whichever CTA is visible (works at every viewport: at >=1000px the visible item is the desktop CTA and resp-msg still goes after it). */ .cln-tablev2 .col-btn { display: flex; flex-direction: column; } .cln-tablev2 .col-btn .cln-resp-msg { order: 99; margin-top: 1em; font-size: .85em; line-height: 1.2; text-align: center; white-space: nowrap; opacity: .95; pointer-events: none; /* ensure it never becomes part of the button's clickable area */ } /** 3A: style for the "Fonte" link in .col-bonus */ .cln-tablev2 .col-bonus a.cln-bonus-fonte { font-size: .85rem; font-weight: normal; text-decoration: underline; display: inline !important; white-space: nowrap; opacity: .6; } .cln-tablev2 .col-features li:nth-child(4), .cln-tablev2 .col-features > *:nth-child(4) { display: list-item !important; display: inline-block !important; } .terms-wrapper { padding-bottom: .5em;} /* Mobile: 2 columns (2 items per column). Breakpoint extended from 755 to 767 so the 756-767 range also gets the 2-column grid. Above 755 the items would otherwise fall back to default block layout, where the "4th item display: inline-block !important" rule in this file leaves item 4 left-aligned and visually mismatched against items 1-3 (centered blocks). */ @media (max-width: 767px) { .cln-tablev2 .col-features .cln-features-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; align-items: start; } .cln-tablev2 .col-features .cln-features-grid > li { list-style: none; margin: 0; } } /* "Ultima verifica" under the review link, small & tidy */ .cln-tablev2 .col-rating .cln-data-verifica { margin-top: .8em; font-size: .82rem; line-height: 1.25; text-align: center; opacity: .9; } .cln-tablev2 .col-rating .cln-dv-label { opacity: .8; } .cln-dv-label {display: block;} /* Scope to our cloned table only. !important on padding/height is needed because the parent theme sets .table-s2 .item .item-row .col-logo .logo-box { height: 0; padding: 0 0 55% } (an aspect-ratio hack) at higher specificity (5 classes vs our 2/3), which made the box compute to >200px tall regardless of how little actual content sat inside. */ .cln-tablev2 .logo-box { background: transparent !important; box-shadow: none !important; padding: 0 !important; height: auto !important; margin-top: 3px; } /* Stack the logo area neatly */ .cln-tablev2 .logo-box.cln-logo-enhanced { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 !important; background: transparent; box-shadow: none; height: auto !important; } /* Target ONLY the logo anchor (first child) — not the "verifica" link */ .cln-tablev2 .logo-box.cln-logo-enhanced > a:first-child { display: block; margin: 0 auto; } /* GAD line: a single centered line under the 235px logo */ .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row { display: block; /* not flex — avoids space-between overrides */ width: 235px; margin: 2px auto 0; /* tight gap under logo, centered */ padding: 0; text-align: center; white-space: nowrap; /* keep on one line */ word-spacing: normal; letter-spacing: normal; font-size: .85rem; line-height: 1.3; } /* Children inline, tiny consistent spacing */ .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row .cln-gad-label, .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row .cln-gad-num, .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row a { display: inline; margin: 0 .35em 0 0; /* small gap between items */ padding: 0; } /* No trailing gap after the link */ .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row a { margin-right: 0; text-decoration: underline; /* keep your styling */ font-weight: 600; } /* --- GAD line fixes (override parent rules) --- */ /* 1) Reset ALL anchors inside the logo box so they don't become 235px blocks */ .cln-tablev2 .logo-box.cln-logo-enhanced a { display: inline; width: auto !important; margin: 0; padding: 0; } /* 2) Only the LOGO anchor (first direct child) should be inline-block and centered */ .cln-tablev2 .logo-box.cln-logo-enhanced > a:first-child { display: inline-block; /* shrink-wrap to image width */ margin: 0 auto; } /* 3) Keep the logo image at 235x135 and flowing in normal layout. position:static !important is essential — the parent theme sets .table-s2 .item .item-row .col-logo .logo-box a img { position: absolute } to center the IMG inside the original padding-bottom: 55% aspect-ratio box. Now that we've removed that padding hack (height:auto on the logo-box), an absolutely-positioned IMG would not contribute to the box's height, collapsing the layout and pushing the GAD row above the (zero-height) logo. Selector broadened from > a:first-child to a, so both the desktop (.d-none.d-lg-block) and mobile (.hidden-lg-up) anchor variants are covered. */ .cln-tablev2 .logo-box.cln-logo-enhanced a img { position: static !important; display: block; width: 235px; max-width: 100%; height: auto; margin: 0 auto; } /* 4) Make the GAD row shrink to content and stay on one line, centered */ .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row { display: inline-block; width: auto; /* shrink-wrap content */ margin: 4px 0 0; /* tight gap under logo */ white-space: nowrap; /* keep: GAD: 12345 verifica on one line */ text-align: center; } /* 5) Tiny, consistent spacing between bits */ .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row .cln-gad-label, .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row .cln-gad-num { display: inline; margin-right: .35em; color: #383737; opacity: 0.7; } .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row a { display: inline !important; /* neutralise any parent block/link rules */ width: auto !important; margin: 0; text-decoration: none; font-weight: normal; border-bottom: 1px dashed #383737; color: #383737; opacity: 0.6; } .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row a:hover { font-weight: normal; border-bottom: 1px solid #383737; opacity: 0.7; } .cln-gad-row {margin-top:-5px !important; } @media only screen and (max-width: 768px) { .cln-gad-row {margin-top:30px !important;} .col-logo {padding-bottom:10px !important;} } /* Inside the comparison-table logo box, keep the GAD row tight under the logo (the global rule above adds 30px top margin at <=768px, which was a workaround for the now-fixed logo-box padding-bottom hack and would otherwise push the GAD row down by 30px on mobile). */ @media only screen and (max-width: 768px) { .cln-tablev2 .logo-box.cln-logo-enhanced .cln-gad-row { margin-top: 2px !important; } } /* Ultima Modifica */ /*mette in linea il tempo di lettura con l'ultima modifica*/ .info-lettura { font-size:.9em; margin-top: -2.3em; margin-bottom: 1.5em; text-align: left; } .ultima-modifica { font-size:1em; text-decoration-line: underline; text-decoration-style: dotted; } @media only screen and (max-width: 600px) { .post-modified-info { margin-top: -3em; margin-bottom: 0em; color: #002c48; font-size: smaller; } .info-lettura{ padding-top: 1em; } } /*mette in linea il tempo di lettura con l'ultima modifica*/ .contenitore-lettura { margin-top: -1em; text-align: left; } .post-modified-info { display: inline-block; } /*Recensioni NEW */ .op-atf-cta { background-color: #FECC06; border-bottom: 1px solid #FECC06; margin-top: 32px; margin-bottom: -10px; padding: 0px; position: relative; text-align: center; } @media only screen and (min-width: 768px) { .operator-atf-grid { background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border: 10px solid #FECD06; border-image: none 100% 1 0 stretch; border-radius: 20px; display: grid; margin-top: 20px; position: relative; z-index: 2; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-data-point { font-size: 13px; padding: 24px 18px; } } /* ========================================================================== Custom Modifications (catch-all #1) -------------------------------------------------------------------------- Legacy catch-all section. Rules accumulated here over time without being organised into the topical sections above. Touches single-recensione layout (review bottom group, h1, social block), author boxes, post meta, and a long stretch of .operator-atf-grid / affiliates-single-style1 variations. Pending future reorganisation. ========================================================================== */ /* Round avatar */ /* "Scritto da:" and author name styling */ /* Updated date section */ .review-bottom-group {display:none;} ul.social {display:none;} h1.recensione {margin-bottom: -.8em;} .titlecontro {margin-top: 1.5em;} .riassunto{margin-top:2em; color:black;} h1.h1recensione{margin-top:1em; font-size:3em !important; color:black!important;} *, ::after, ::before { box-sizing: border-box; } .sc-author-meta a { background-color: transparent; color: #3b8ede; font-weight: 700; text-decoration: none currentcolor solid; } a.verificadm { color: #3b8ede; border-bottom: 1px dashed #3b8ede; border-bottom-style: dashed; opacity: 0.7; } .op-atf-links-title.titlepro {color:#b2212b; } .op-atf-links-cell .op-atf-links-title { font-size: 13px; font-weight: 600; line-height: 1; text-align: center; text-transform: uppercase; } .op-atf-links-title.titlepro {color:#1c8a3e; } .op-atf-links-title.titlecontro {color:#b2212b; } .sc-list.sc-list li{ position:relative; padding-left:22px; margin:6px 0; } .sc-list.sc-list--pro li::before{ content:"✓"; position:absolute; left:0; top:0; color:#1c8a3e; font-weight:800; } .sc-list.sc-list--con li::before{ content:"✕"; position:absolute; left:0; top:0; color:#b2212b; font-weight:800; } .btn { border-radius: 40px; display: inline-block; text-align: center; transition: all .15s; transition-behavior: normal; vertical-align: middle; } .arrow-btn2 { background-color: #559f3d; background-position: 0 0; background-repeat: repeat; background-size: auto; border: none; border-image: none 100% 1 0 stretch; color: white; font-size: 18px; font-weight: 700; line-height: 1; padding: 2px; position: relative; } .arrow-btn2 span { border-radius: 40px; display: block; padding: 16px 50px 16px 50px; } .arrow-btn2, .arrow-btn2::after, .arrow-btn2:hover, .arrow-btn2:hover span { background-attachment: scroll; background-clip: border-box; background-origin: padding-box; } .arrow-btn2::after { background-position: center center; background-repeat: no-repeat; background-size: 13px; border-radius: 50%; content: ""; height: 34px; margin-top: -17px; position: absolute; right: 11px; top: 50%; transform: rotate(180deg); width: 34px; } .arrow-btn2:hover, .arrow-btn2:hover span { background-color: transparent; background-position: 0 0; background-repeat: repeat; background-size: auto; } .arrow-btn2:hover { background-color: #fecd06; } .arrow-btn2:hover span { background-image: linear-gradient(135deg, #ffd200 23%, #ffd200 23%, #ff9c00 100%); } @media only screen and (min-width: 768px) { .intro-review { background-color: #FECD06; border-top: 3px solid #FECD06; padding-top: 24px; position: relative; } .intro-review::before { background-attachment: scroll, scroll; background-clip: border-box, border-box; background-color: transparent; background-image: radial-gradient(#fff 0, #FECD06 55%), radial-gradient(#fff 0, #fecd06 65%); background-origin: padding-box, padding-box; background-position: left center, right center; background-repeat: no-repeat, no-repeat; background-size: 150px 450px, 150px 350px; bottom: 40%; content: ""; height: 300px; position: absolute; } .intro-review, .intro-review::after { background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; } .intro-review::after { background-color: #fff; bottom: 0; content: ""; height: 45%; /* Qui l'altezza della barra dietro hero*/ left: 0; position: absolute; right: 0; } } @media only screen and (min-width: 1024px) { .intro-review::before { height: 320px; } } @media only screen and (min-width: 1280px) { .intro-review::before { left: 50%; margin-left: -680px; right: auto; width: 1360px; } } @media (min-width: 1024px) { h1 { margin-bottom: 20px; } p { margin: 0 0 35px; } } .container { margin: 0 auto; max-width: 1264px; padding: 0 12px; } .intro-review .container:first-child h1, .intro-review .container:first-child p { color: #fff; text-align: center; } @media only screen and (max-width: 767px) { .intro-review .container:first-child { background-attachment: scroll; background-clip: border-box; background-color: #FECD06; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; padding-bottom: 10px; padding-top: 10px; position: relative; z-index: 1; } .intro-review .shortened:not(.expanded) { margin-bottom: 16px; max-height: 54px; overflow: hidden; pointer-events: none; position: relative; } .intro-review .shortened:not(.expanded)::after { background-attachment: scroll; background-clip: border-box; background-color: #0d8360; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; bottom: 0; color: #fff; content: " . . ."; font-weight: 900; padding-left: 5px; pointer-events: initial; position: absolute; right: 0; } } @media only screen and (min-width: 768px) { .intro-review .container { position: relative; z-index: 2; } } @media only screen and (min-width: 1024px) { .intro-review h1 { font-size: 30px; } } @media only screen and (max-width: 767px) { .intro-review.left-align .container:first-child h1, .intro-review.left-align .container:first-child p { text-align: left; } } @media only screen and (min-width: 768px) { .intro-review .container~.container { z-index: 1; } } .intro-quicknavi-wrapp { flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .intro-quicknavi-wrapp .trigger { align-items: center; cursor: pointer; display: flex; font-size: 16px; line-height: 1.27; text-transform: uppercase; } .intro-quicknavi-wrapp .intro-quicknavi-container { background-attachment: scroll; background-clip: border-box; background-color: #F4F2EF; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; max-height: 0; overflow: hidden; padding: 0 12px; transition: max-height .15s, padding .15s, border-color .15s; transition-behavior: normal, normal, normal; } .intro-quicknavi-wrapp .intro-quicknavi-container-links a { color: #203342; display: block; } .intro-quicknavi-wrapp .intro-quicknavi-container-links span { display: inline-block; position: relative; top: -2px; vertical-align: middle; } @media (max-width: 767px) { .intro-quicknavi-wrapp .intro-quicknavi { display: none; } .intro-quicknavi-wrapp .trigger { font-size: 13px; } .intro-quicknavi-wrapp .intro-quicknavi-container { animation: scrollUp .15s; bottom: 0; left: 0; margin: 0; overflow-x: visible; overflow-y: auto; position: fixed; transition: none 0s; transition-behavior: normal; width: 100%; z-index: 1000; } .intro-quicknavi-wrapp:has(.is-fixed)::before { animation: scrollUp .15s; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, .6); background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; bottom: 0; content: ""; height: 100vh; left: 0; position: fixed; width: 100%; z-index: 5; } } @media (min-width: 768px) { .intro-quicknavi-wrapp .trigger { display: inline-block; font-size: 12px; margin: 0; transition: background-color .15s; transition-behavior: normal; } .intro-quicknavi-wrapp .intro-quicknavi { align-items: center; display: flex; flex: 0 0 20%; flex-direction: column; flex-wrap: wrap; justify-content: center; max-width: 20%; order: 1; position: relative; } } @media (min-width: 1265px) { .intro-quicknavi-wrapp .trigger { font-size: 16px; } .intro-quicknavi-wrapp .intro-quicknavi::before { left: calc(620px - 50vw); width: 100vw; } } @media (min-width: 768px) { .intro-quicknavi-wrapp .intro-quicknavi-container { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border: 0; border-image: none 100% 1 0 stretch; display: flex; flex: 0 0 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; max-width: 100%; order: 3; padding: 0 25px; position: relative; } } @media (min-width: 1265px) { .intro-quicknavi-wrapp .intro-quicknavi-container { display: none; flex-direction: row; flex-wrap: nowrap; max-height: none; overflow: visible; padding: 20px 25px 40px; transition: none .15s; transition-behavior: normal; } } @media (min-width: 768px) { .intro-quicknavi-wrapp .intro-quicknavi-container::after { background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 0 6px 6px 6px; bottom: 12px; content: ""; left: 12px; position: absolute; right: 12px; top: 0; } } @media (min-width: 1265px) { .intro-quicknavi-wrapp .intro-quicknavi-container::before { left: 50%; margin-left: -50vw; width: 100vw; } .intro-quicknavi-wrapp .intro-quicknavi-container::after { bottom: 20px; } } @media (min-width: 768px) { .intro-quicknavi-wrapp .intro-quicknavi-container-links a { flex: 0 0 49%; position: relative; z-index: 1; } } @media (min-width: 1265px) { .intro-quicknavi-wrapp .intro-quicknavi-container-links a { align-content: center; box-shadow: rgba(0, 0, 0, .15) 0 0 12px 0; display: flex; flex: 0 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; line-height: 1.13; text-align: center; transition: border-color .15s, color .15s; transition-behavior: normal, normal; } .intro-quicknavi-wrapp .intro-quicknavi-container-links a:nth-child(n) { margin: 0 10px; } } .op-atf-row-main { display: flex; flex-direction: row; flex-wrap: nowrap; } .op-atf-cta { background-color: #FECC06; border-bottom: 1px solid #FECC06; margin-top: 32px; margin-bottom: -10px; padding: 0px; position: relative; text-align: center; margin-right: -10px; margin-left: -10px; } .op-atf-cta .btn { box-shadow: #fff 0 0 0 7px; margin: -44px 0 16px; min-width: 270px; } .op-atf-cta, .op-atf-detail-cell, .op-atf-details { background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; } .op-atf-details { background-color: #F4F2EF; border-radius: 16px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 5px 0 0; padding: 0 8px 8px; } .op-atf-detail-cell { background-color: #fff; border-radius: 8px; color: #676767; flex-basis: calc(50% - 4px); font-size: 14px; line-height: 1; margin: 8px 0 0; padding: 15px 10px 12px; text-align: center; } .op-atf-detail-cell .value { color: #203342; display: block; font-size: 18px; font-weight: 600; margin-top: 10px; } .op-atf-detail-cell .license-adm { background-color: transparent; background-image: url(https://casinolegali.net/wp-content/uploads/2025/10/licenza-adm-recensioni.webp); background-position: center center; background-repeat: no-repeat; background-size: auto; color: transparent; display: inline-block; font-size: 0; height: 17px; margin-left: 2px; opacity: .66; vertical-align: middle; width: 50px; } .op-atf-author::before, .op-atf-detail-cell .license-adm, .op-atf-links-cell { background-attachment: scroll; background-clip: border-box; background-origin: padding-box; } .op-atf-links-cell { align-items: center; background-color: #fff; background-image: none; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 8px; display: flex; flex-basis: 100%; flex-direction: column; flex-wrap: nowrap; margin: 8px 0 0; padding: 18px 10px; } .op-atf-links-cell ul { font-size: 14px; line-height: 16px; list-style: none; margin: 10px auto 0; padding: 0; } .op-atf-links-cell ul li { padding-left: 12px; position: relative; } .op-atf-links-cell ul li::before { color: #0d8360; content: "•"; left: 0; position: absolute; top: 0; } .op-atf-links-cell ul li+li { margin-top: 6px; } .op-atf-links-cell ul li a { font-weight: inherit; } .op-atf-authors { padding: 16px; } .op-atf-author, .op-atf-editor { line-height: 20px; position: relative; } .op-atf-author { color: #878c92; font-size: 13px; font-weight: 500; padding: 0 0 0 48px; } .op-atf-author strong { color: #2f2a48; display: block; font-size: 16px; text-transform: none; } .op-atf-author strong a { color: inherit; } .op-atf-author strong a::before, .op-atf-editor::before { content: ""; height: 40px; left: 0; position: absolute; top: 0; width: 48px; } .op-atf-editor { border-top: 1px solid #dfe0e2 !important; color: #7b7987; font-size: 14px; padding: 10px 0 0 5px; margin-top: 3em !important; } .op-atf-editor a, .op-atf-editor span { text-decoration: underline currentcolor solid; } .op-atf-editor a { color: inherit; font-weight: inherit; } .op-atf-editor a:hover { text-decoration: none currentcolor solid; } .op-atf-quicknavi { padding: 26px 0 16px; user-select: none; } .op-atf-quicknavi .intro-quicknavi-wrapp { display: block; margin: 0 auto; max-width: 306px; position: relative; } .op-atf-quicknavi .intro-quicknavi-wrapp .trigger, .op-atf-quicknavi .intro-quicknavi-wrapp .trigger::before { background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-size: auto; border-color: #fff; border-image: none 100% 1 0 stretch; border-style: solid; } .op-atf-quicknavi .intro-quicknavi-wrapp .trigger { background-color: #F4F2EF; background-image: url(https://casinolegali.net/wp-content/uploads/2025/10/menu-rec.webp); background-position: 20px center; background-repeat: no-repeat; border-radius: 23px; border-width: 2px; box-shadow: rgba(0, 0, 0, .15) 0 0 10px; color: #213443; font-weight: 700; padding: 13px 44px 13px 58px; position: relative; z-index: 1; } .op-atf-quicknavi .intro-quicknavi-wrapp .trigger strong { color: #0d8360; font-weight: 900; margin-left: 6px; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed) { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(#F4F2EF 16%, #fff 100%); background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border: 2px solid #fff; border-image: none 100% 1 0 stretch; border-radius: 23px; box-shadow: rgba(0, 0, 0, .15) 0 0 10px; display: block; left: 0; max-height: none; padding: 44px 6px 6px; position: absolute; right: 0; top: 0; transition: none 0s; transition-behavior: normal; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed) a, .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed) a:hover { background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed) a { background-color: transparent; border: none; border-image: none 100% 1 0 stretch; border-radius: 6px; font-size: 14px; font-weight: 600; padding: 4px 4px 4px 14px; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed):not(.expanded) { display: none; } @media only screen and (max-width: 767px) { .op-atf-authors { background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border: 8px solid #F4F2EF; border-image: none 100% 1 0 stretch; border-radius: 16px; margin: 10px 0 0; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi { display: block; } } @media only screen and (min-width: 1024px) { .op-atf-main { flex-basis: 41%; order: 2; } } @media only screen and (min-width: 1280px) { .op-atf-main { flex-basis: 43%; } } @media only screen and (min-width: 1024px) { .op-atf-cta .btn { box-shadow: #fff 0 0 0 10px; margin-top: -54px; } } @media only screen and (min-width: 1024px) and (max-width: 1279px) { .op-atf-links-cell { padding: 10px; } } @media only screen and (min-width: 768px) { .op-atf-details { flex-basis: calc(50% - 5px); order: 4; } } @media only screen and (min-width: 1024px) { .op-atf-details { flex-basis: calc(29% - 10px); margin: 0 0 0 10px; order: 3; } } @media only screen and (min-width: 1024px) and (max-width: 1279px) { .op-atf-detail-cell { padding: 10px 8px; } } @media only screen and (min-width: 1265px) { .op-atf-quicknavi .intro-quicknavi-wrapp .trigger { font-size: 14px; } } @media only screen and (min-width: 1280px) { .op-atf-details { flex-basis: calc(29% - 16px); margin: 0 0 0 16px; order: 3; padding: 6px 12px 12px; } .op-atf-links-cell { margin-top: 6px; } .op-atf-cta { border-radius: 0 0 10px 10px; margin-left: -16px; margin-right: -16px; } } @media only screen and (min-width: 768px) { .op-atf-quicknavi .intro-quicknavi-wrapp .trigger:not(.expanded)::after, .op-atf-quicknavi .intro-quicknavi-wrapp .trigger:not(.expanded)::before { content: none; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container::after { content: none; } } @media only screen and (min-width: 1265px) { .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container-links a { box-shadow: none; display: block; line-height: 1.8; text-align: left; transition: none 0s; transition-behavior: normal; } } @media (min-width: 1265px) { .intro-quicknavi-wrapp .intro-quicknavi-container-links a:hover { border-color: #009f93; color: #009f93; } } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed) a:hover { background-color: #fff; text-decoration: none currentcolor solid; } @media only screen and (min-width: 1265px) { .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container-links a:nth-child(n) { margin: 0; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container-links a:hover { color: #203342; } } @media (min-width: 768px) { .intro-quicknavi-wrapp .intro-quicknavi-container-links a:nth-child(n+3) { margin-top: 2%; } } @media (min-width: 1265px) { .intro-quicknavi-wrapp .intro-quicknavi-container-links span { display: block; flex: 0 0 100%; margin-bottom: 10px; margin-left: 0; margin-top: 0; } } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed) a span { margin-right: 3px; } @media only screen and (min-width: 1265px) { .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container-links span { display: inline; margin-bottom: 0; margin-left: 0; margin-top: 0; } } @media (min-width: 768px) { .intro-quicknavi-wrapp .intro-quicknavi-container-links a+a { margin-bottom: 0; margin-left: 0; margin-right: 0; } } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi-container:not(.is-fixed) a+a { margin-top: 0; } .operator-atf-grid, .operator-atf-grid .op-atf-logo { background-attachment: scroll; background-clip: border-box; background-origin: padding-box; } .operator-atf-grid { background-color: #fff; background-image: none; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 8px; padding: 10px; } .operator-atf-grid .op-atf-logo { border-radius: 16px 0 0 16px; flex-basis: 47%; flex-direction: column; justify-content: center; max-width: 47%; padding: 5px 20px 15px 10px; } .operator-atf-grid .op-atf-logo .asset { background-position: center center; background-repeat: no-repeat; background-size: contain; color: transparent; font-size: 0; height: 60px; margin: 0 auto 4px; max-width: 100%; width: 120px; } .operator-atf-grid .op-atf-bonus, .operator-atf-grid .op-atf-logo, .operator-atf-grid .op-atf-rating { align-items: center; background-image: none; background-position: 0 0; background-repeat: repeat; background-size: auto; display: flex; flex-wrap: nowrap; } .operator-atf-grid .op-atf-rating { align-content: center; border-radius: 16px; flex-direction: row; white-space-collapse: collapse; text-wrap-mode: nowrap; background-attachment: scroll; background-clip: border-box; background-color: rgba(255, 255, 255, .49); background-origin: padding-box; color: #213443; font-size: 11px; font-weight: 500; line-height: 13px; padding: 5px 10px; } .operator-atf-grid .op-atf-rating strong { color: #fff; font-size: 13px; } .operator-atf-grid .op-atf-bonus { background-color: #F4F2EF; border-radius: 0 16px 16px 0; color: #203342; flex-basis: 53%; flex-direction: column; font-size: 15px; justify-content: center; line-height: 1.2; max-width: 53%; padding: 10px 10px 10px 20px; position: relative; text-align: center; } .operator-atf-grid .op-atf-bonus strong { color: #000; display: block; font-size: 32px; font-weight: 900; line-height: 1.1; } .operator-atf-grid .op-atf-bonus span { color: #203342; display: block; font-size: 19px; font-weight: 700; } .operator-atf-grid .op-atf-bonus, .operator-atf-grid .op-atf-bonus::before, .operator-atf-grid .op-atf-data-points, .operator-atf-grid .op-atf-rating::before { background-attachment: scroll; background-clip: border-box; background-origin: padding-box; } .operator-atf-grid .op-atf-bonus::before { background-color: #FECD06; background-image: url(https://casinolegali.net/wp-content/uploads/2025/10/freccia.webp); background-position: center center; background-repeat: no-repeat; background-size: 15px; border-radius: 4px; content: ""; height: 40px; left: 0; margin: -20px 0 0 -20px; position: absolute; top: 50%; width: 40px; } .operator-atf-grid .op-atf-data-points { align-items: center; background-color: transparent; background-image: linear-gradient(#F4F2EF 16%, #fff 100%); background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 16px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin: 10px 0 0; padding: 15px 10px; } .operator-atf-grid .op-atf-data-point { color: #636e78; font-size: 11px; font-weight: 500; line-height: 1.2; padding: 0 8px; text-align: center; text-transform: uppercase; } .operator-atf-grid .op-atf-data-point strong { color: #203342; display: block; font-size: 18px; line-height: 1; margin: 5px 0 0; text-transform: none; } @media only screen and (max-width: 767px) { .operator-atf-grid { align-items: stretch; display: flex; flex-direction: column; flex-wrap: nowrap; } .sc-summary {padding-bottom:2em;} } @media only screen and (min-width: 768px) { .operator-atf-grid { background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border: 20px solid #FECD06; border-image: none 100% 1 0 stretch; border-radius: 20px; display: grid; margin-top: 20px; position: relative; z-index: 2; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid { grid-template-columns: calc(50% - 5px) 10px calc(50% - 5px); margin-bottom: 20px; } } @media only screen and (min-width: 1024px) { .operator-atf-grid { grid-template-columns: calc(30% - 10px) 10px 41% 10px calc(29% - 10px); margin-bottom: 20px; padding-bottom: 0; } } @media only screen and (min-width: 1280px) { .operator-atf-grid { border-radius: 36px; border-width: 26px; grid-template-columns: calc(28% - 16px) 16px 43% 16px calc(29% - 16px); margin-bottom: 20px; padding: 16px 16px 0; } } @media only screen and (min-width: 768px) { .op-atf-main { flex-basis: 100%; order: 1; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-main { order: 1; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid .op-atf-main { grid-column-end: 4; grid-column-start: 1; grid-row-end: 2; grid-row-start: 1; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-main { grid-column-end: 4; grid-column-start: 3; grid-row-end: 12; grid-row-start: 1; margin-bottom: 10px; } } @media only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-main { margin-bottom: 16px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-logo { background-attachment: scroll; background-clip: border-box; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; padding: 16px; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-logo { padding: 8px 20px 50px; } .operator-atf-grid .op-atf-logo .asset { height: 80px; margin-bottom: 0; width: 200px; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-row-main { height: 100%; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-bonus { background-attachment: scroll; background-clip: border-box; background-color: #F4F2EF; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-left: 1px solid #fff; color: #203342; font-size: 17px; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-logo { padding-bottom: 40px; } } @media only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-logo { padding-bottom: 50px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-bonus strong { color: #041421; font-size: 28px; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-bonus { min-height: 138px; } } @media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-bonus { font-size: 20px; } .operator-atf-grid .op-atf-bonus strong { font-size: 42px; line-height: 1; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-bonus span { color: inherit; font-size: inherit; } } @media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-bonus span { font-size: 25px; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-bonus { min-height: 130px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-bonus::before { content: none; } } @media only screen and (min-width: 768px) { .op-atf-cta { flex-basis: 100%; flex-grow: 1; order: 2; } } @media only screen and (min-width: 1024px) { .op-atf-cta { border-bottom: none; border-radius: 0 0 16px 16px; order: 4; padding: 18px 12px 12px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-cta { background-image: none; border-bottom: none; margin: 6px 0 0; order: 2; } .operator-atf-grid .op-atf-cta .btn { margin: 0; max-width: 316px; width: 100%; } .operator-atf-grid .op-atf-cta, .operator-atf-grid .op-atf-cta .arrow-btn2 { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; } .operator-atf-grid .op-atf-cta .arrow-btn2 { background-image: linear-gradient(225deg, #ef5a3c 23%, #ef5a3c 23%, #fa6a43 100%); color: #fff; text-transform: uppercase; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-cta { order: 3; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid .op-atf-cta { grid-column-end: 4; grid-column-start: 1; grid-row-end: 4; grid-row-start: 3; } } @media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-rating { border-radius: 16px; font-size: 14px; line-height: 16px; padding: 7px 14px; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-cta { grid-column-end: 6; grid-column-start: 1; grid-row-end: 29; grid-row-start: 28; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-cta .arrow-btn2 span { background-image: linear-gradient(45deg, #ef5a3c 23%, #ef5a3c 23%, #fa6a43 100%); } .operator-atf-grid .op-atf-cta .arrow-btn2::after, .operator-atf-grid .op-atf-cta .arrow-btn2:hover::after { background-color: #559f3d; } .operator-atf-grid .op-atf-cta .arrow-btn2:hover, .operator-atf-grid .op-atf-cta .arrow-btn2:hover span { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(45deg, #ef5a3c 23%, #ef5a3c 23%, #fa6a43 100%); background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; } .operator-atf-grid .op-atf-cta .arrow-btn2:hover span { background-image: linear-gradient(225deg, #ef5a3c 23%, #ef5a3c 23%, #fa6a43 100%); } .operator-atf-grid .op-atf-rating-cell { order: 3; order: 2; order: 1; align-items: center; text-align: center; font-size: 2em; } .recen18.cln-resp-msg {margin-top:.5em;} .voto-stelle {padding-bottom:3em;} } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-rating-cell { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; padding-left: 10px; position: relative; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid .op-atf-rating-cell { align-self: flex-start; grid-column-end: 2; grid-column-start: 1; grid-row-end: 2; grid-row-start: 2; margin-top: -40px; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-rating-cell { align-self: flex-start; grid-column-end: 4; grid-column-start: 3; grid-row-end: 12; grid-row-start: 12; margin-right: 53%; margin-top: -48px; } } @media only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-rating-cell { align-self: flex-start; grid-column-end: 4; grid-column-start: 3; grid-row-end: 12; grid-row-start: 12; margin-right: 53%; margin-top: -68px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-rating-cell p { color: #676767 !important; font-size: 14px; margin: 0; text-align: center !important; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-rating-cell p { display: none; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-rating { color: #7390a6; display: block; font-size: 32px; line-height: 38px; padding-bottom: 22px; position: relative; text-align: center; } .operator-atf-grid .op-atf-rating strong { color: #203342; font-size: 38px; } } @media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-rating::before { height: 12px; width: 78px; } .operator-atf-grid .op-atf-rating strong { font-size: 16px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-links-cell { background-attachment: scroll; background-clip: border-box; background-color: #F4F2EF; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 0 0 16px 16px; margin-top: 0; order: 6; padding: 0 8px 8px; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-links-cell { background-attachment: scroll; background-clip: border-box; background-color: #F4F2EF; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 0 0 16px 16px; margin-top: 0; padding: 0 8px 8px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid .op-atf-links-cell { grid-column-end: 4; grid-column-start: 3; grid-row-end: 6; grid-row-start: 5; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-links-cell { grid-column-end: 6; grid-column-start: 5; grid-row-end: 28; grid-row-start: 18; padding: 8px; } } @media only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-links-cell { padding: 6px 12px 12px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-links { align-items: center; background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 8px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 12px; width: 100%; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-links { align-items: center; background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 8px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; padding: 16px; width: 100%; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-links { padding: 16px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-data-points { background-attachment: scroll; background-clip: border-box; background-color: #F4F2EF; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 16px 16px 0 0; margin-top: 8px; order: 4; padding: 8px 8px 0; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-data-points { order: 2; padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid .op-atf-data-points { grid-column-end: 4; grid-column-start: 1; grid-row-end: 3; grid-row-start: 2; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-data-points { grid-column-end: 4; grid-column-start: 3; grid-row-end: 28; grid-row-start: 12; margin-top: 0; } } @media only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-data-points { padding: 20px 0; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-data-point { background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; padding-bottom: 12px; padding-top: 12px; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-data-point { font-size: 13px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid .op-atf-meta { grid-column-end: 2; grid-column-start: 1; grid-row-end: 6; grid-row-start: 4; } } @media only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-data-point { position: relative; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-data-point:first-child { border-radius: 8px 0 0 8px; } .operator-atf-grid .op-atf-data-point:last-child { border-radius: 0 8px 8px 0; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .operator-atf-grid .op-atf-details { grid-column-end: 4; grid-column-start: 3; grid-row-end: 5; grid-row-start: 4; } } @media only screen and (min-width: 1280px) { .operator-atf-grid .op-atf-data-point:first-child::after { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(rgba(223, 228, 235, 0) 0, #dfe4eb 50%, rgba(223, 228, 235, .02) 99%, rgba(223, 228, 235, 0) 100%); background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; bottom: -10px; content: ""; left: 100%; position: absolute; top: -10px; width: 1px; } .op-atf-detail-cell { flex-basis: calc(50% - 6px); margin: 6px 0; } .operator-atf-grid .op-atf-data-point:last-child::after { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: linear-gradient(rgba(223, 228, 235, 0) 0, #dfe4eb 50%, rgba(223, 228, 235, .02) 99%, rgba(223, 228, 235, 0) 100%); background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; bottom: -10px; content: ""; position: absolute; right: 100%; top: -10px; width: 1px; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-data-point strong { font-size: 20px; } .op-atf-meta { background-attachment: scroll; background-clip: border-box; background-color: #F4F2EF; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 16px; display: flex; flex-basis: calc(50% - 5px); flex-direction: column; flex-wrap: nowrap; margin: 10px 10px 0 0; order: 3; padding: 8px; } } @media only screen and (min-width: 1024px) { .op-atf-meta { flex-basis: calc(30% - 10px); margin: 0 10px 0 0; order: 1; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-details { border-radius: 0; margin-top: 0; order: 5; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-details { border-radius: 16px 16px 0 0; } } @media only screen and (min-width: 1024px) { .operator-atf-grid .op-atf-meta { grid-column-end: 2; grid-column-start: 1; grid-row-end: 28; grid-row-start: 1; } .operator-atf-grid .op-atf-details { grid-column-end: 6; grid-column-start: 5; grid-row-end: 18; grid-row-start: 1; margin-left: 0; padding-bottom: 0; } } @media only screen and (min-width: 768px) { .op-atf-authors { background-attachment: scroll; background-clip: border-box; background-color: #fff; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto; border-radius: 8px; } } @media only screen and (min-width: 1280px) { .op-atf-meta { flex-basis: calc(28% - 16px); margin: 0 16px 0 0; order: 1; padding: 12px; position: relative; z-index: 1; } } @media only screen and (min-width: 768px) { .op-atf-quicknavi { margin: auto; padding: 0; width: 248px; } .op-atf-quicknavi .intro-quicknavi-wrapp .intro-quicknavi { display: block; max-width: none; } .op-atf-quicknavi .intro-quicknavi-wrapp .trigger { display: block; font-size: 14px; padding-right: 13px; } } @media only screen and (max-width: 767px) { .operator-atf-grid .op-atf-meta { order: 7; } } @media only screen and (min-width: 768px) { .operator-atf-grid .op-atf-meta { margin-right: 0; } } /* ========================================================================== Custom Modifications (catch-all #2) -------------------------------------------------------------------------- A second legacy catch-all section that grew separately from the first. Mostly affiliate-page voting/rating widgets (.voto-stelle, .voto-numero), author cards on operator-atf grids, and assorted single-page tweaks. Pending future reorganisation. ========================================================================== */ .voto-stelle {display: inline-block; font-family: poka; font-style: normal; font-weight: 400; line-height: 1;color: #ffce1b; font-size: 18px;} .voto-numero{display: inline-block !important;} /* Round avatar */ .op-atf-authors img.sc-avatar { border-radius: 50% !important; width: 56px !important; height: 56px !important; object-fit: cover; flex-shrink: 0; } /* "Scritto da:" and author name styling */ .op-atf-authors .sc-card-title.autore-recensione { display: ; margin: 0 0 4px 0; font-size: 12px; font-weight: 600; text-align: left; } .op-atf-authors .sc-author-meta { text-align: left; margin: 0; line-height: 1.4; } /* Updated date section */ .op-atf-authors .op-atf-editor { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e0e0; } .op-atf-authors .op-atf-editor .sc-card-title { font-size: 12px; margin-bottom: 4px; } .op-atf-authors .op-atf-editor .sc-review-meta { font-size: 13px; } .op-atf-author { padding: 0 0 0 48px; position: relative; font-size: 13px; line-height: 20px; text-transform: uppercase; font-weight: 500; color: #878c92; } .autore-recensione-lx {display:flex; float:left; padding-right:10px; margin-left:-10px; } .autore-recensione-rx {display:block; } /* ========================================================= REPLACEMENT — HERO CTA (affiliates-single-style1.css) Replace old .btn/.arrow-btn2/.op-atf-cta button rules with this ========================================================= */ /* Base button shell used in hero */ .operator-atf-grid .op-atf-cta .btn, .operator-atf-grid .op-atf-cta .arrow-btn2 { /* match global button geometry */ display: inline-block; width: 100%; max-width: 316px; border: 0; border-radius: 40px; padding: 2px; /* outer pill rim */ text-align: center; line-height: 1; font-weight: 800; text-decoration: none; transition: background .15s, box-shadow .15s; /* site green base (same look on all breakpoints) */ background: #559f3d; color: #fff; /* white ring used throughout the site */ box-shadow: #fff 0 0 0 7px; } /* Inner content span (same role as .btn-p1 site-wide) */ .operator-atf-grid .op-atf-cta .btn > span, .operator-atf-grid .op-atf-cta .arrow-btn2 > span { display: block; padding: 16px 50px; border-radius: 40px; font-size: 18px; font-weight: 800; text-transform: none; /* no mobile caps */ background: none; /* no gradients */ color: inherit; } /* Hover / focus / active: darker green, not yellow */ .operator-atf-grid .op-atf-cta .btn:hover, .operator-atf-grid .op-atf-cta .btn:focus, .operator-atf-grid .op-atf-cta .btn:active, .operator-atf-grid .op-atf-cta .arrow-btn2:hover, .operator-atf-grid .op-atf-cta .arrow-btn2:focus, .operator-atf-grid .op-atf-cta .arrow-btn2:active { background: #4a8d35; /* ~10–15% darker than #559f3d */ outline: none; } .operator-atf-grid .op-atf-cta .btn:hover > span, .operator-atf-grid .op-atf-cta .btn:focus > span, .operator-atf-grid .op-atf-cta .arrow-btn2:hover > span, .operator-atf-grid .op-atf-cta .arrow-btn2:focus > span { background: none; /* keep solid, no yellow gradient */ color: #fff; } /* Keyboard focus ring (accessible, matches site ring aesthetic) */ .operator-atf-grid .op-atf-cta .btn:focus-visible, .operator-atf-grid .op-atf-cta .arrow-btn2:focus-visible { box-shadow: 0 0 0 2px rgba(32,52,66,.15), 0 0 0 7px #fff; } /* Keep your hero CTA placement + ring rhythm */ .operator-atf-grid .op-atf-cta .btn, .operator-atf-grid .op-atf-cta .arrow-btn2 { margin: -44px 0 16px; /* same as your current hero spacing */ min-width: 270px; } /* Mobile: enforce identical look (remove the old orange + uppercase) */ @media (max-width: 767.98px) { .operator-atf-grid .op-atf-cta { margin: 6px 0 0; } .operator-atf-grid .op-atf-cta .btn, .operator-atf-grid .op-atf-cta .arrow-btn2 { background: #559f3d; /* same base green */ text-transform: none; /* never uppercase */ } .operator-atf-grid .op-atf-cta .btn > span, .operator-atf-grid .op-atf-cta .arrow-btn2 > span { background: none; /* kill mobile gradients */ text-transform: none; } } /* Optional: if hero ever switches to .btn--green markup, match it here without touching global theme CSS outside the hero */ .operator-atf-grid .op-atf-cta .btn--green { background:#559f3d; color:#fff; } .operator-atf-grid .op-atf-cta .btn--green:hover, .operator-atf-grid .op-atf-cta .btn--green:focus { background:#4a8d35; } .operator-atf-grid .op-atf-cta .btn--green .btn-p1 { display:block; padding:16px 50px; border-radius:40px; } /*adjustment*/ /* /* HERO CTA — canonical (matches site-wide .btn/.btn--green) */ .operator-atf-grid .op-atf-cta .btn, .operator-atf-grid .op-atf-cta .arrow-btn2{ transition:all 400ms ease; position:relative; overflow:hidden; display:inline-block; text-align:center; color:#fff; background:#559f3d; /* same as .btn--green */ text-transform:none; } .operator-atf-grid .op-atf-cta .btn:after, .operator-atf-grid .op-atf-cta .arrow-btn2:after{ background:#fff; content:""; height:155px; width:50px; left:-75px; top:-50px; opacity:.15; position:absolute; transform:rotate(35deg); transition:all 550ms cubic-bezier(0.19,1,0.22,1); z-index:-10; } .operator-atf-grid .op-atf-cta .btn:hover, .operator-atf-grid .op-atf-cta .arrow-btn2:hover{ color:#fff; opacity:.7; } .operator-atf-grid .op-atf-cta .btn > span, .operator-atf-grid .op-atf-cta .arrow-btn2 > span{ background:none; text-transform:none; } @media (max-width:767px){ .operator-atf-grid .op-atf-cta .btn, .operator-atf-grid .op-atf-cta .arrow-btn2{ text-transform:none; } .operator-atf-grid .op-atf-cta .btn>span, .operator-atf-grid .op-atf-cta .arrow-btn2>span{ background:none; text-transform:none; } } /* Lighter-on-hover WITHOUT transparency (prevents yellow bleed) */ .operator-atf-grid .op-atf-cta .btn:hover, .operator-atf-grid .op-atf-cta .arrow-btn2:hover { /* cancel translucency */ opacity: 1 !important; /* fallback for older browsers: slightly lighter green */ background: #6fba57 !important; /* ~20% lighter than #559f3d */ /* preferred for modern browsers: lighten without see-through */ filter: brightness(1.15); will-change: filter; } /* keep the sweep effect exactly as-is */ .operator-atf-grid .op-atf-cta .btn:hover:after, .operator-atf-grid .op-atf-cta .arrow-btn2:hover:after { left: 120%; } /* ========================================================= NUM GIOCHI — layout rewrite (header + 3 equal tiles) HTML block: .op-atf-cell.op-atf-data-points.num-giochi Children: .op-atf-data-point.giochi-zero|one|two|three ========================================================= */ /* Use CSS Grid only for the Num Giochi section (do not affect other data-points blocks) */ .operator-atf-grid .op-atf-data-points.num-giochi { display: grid !important; /* override original flex row */ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; /* equal heights per row */ gap: 10px; /* replaces space-between */ align-items: stretch; justify-items: stretch; } /* Header/title spans the whole width */ .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point.giochi-zero { grid-column: 1 / -1; /* full-width row */ display: block; align-items: center; /* keeps "giudizio" + score tidy */ min-height: 50px; /* visual balance */ border-radius: 8px; } /* The 3 stats tiles: each exactly 1/3 width and same height */ .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point.giochi-one, .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point.giochi-two, .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point.giochi-three { display: flex; flex-direction: column; align-items: center; justify-content: center; /* perfect vertical centring */ min-height: 72px; /* same footprint; tweak if needed */ border-radius: 8px; } /* Kill legacy first/last corner rounding that assumed 4-in-a-row */ @media (max-width: 767px) { .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point:first-child, .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point:last-child { border-radius: 8px; /* neutral, not left/right pills */ } } /* Remove vertical separator lines added to first/last items on wide screens */ @media (min-width: 1280px) { .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point:first-child::after, .operator-atf-grid .op-atf-data-points.num-giochi .op-atf-data-point:last-child::after { content: none !important; } } .voto-su-rec{color: #203342; font-size: 32px; font-weight: 900; line-height: 1.1; font-family: "Open Sans", sans-serif; margin: 5px 0 0; text-transform: none;} .voto-giudizio{font-size:1.52em; } .voto-numero {margin-top:1em; margin-bottom: -1em; font-size: 1.3em;} /* Adjustable offset for sticky header + a little breathing room */ :root { --sticky-offset: 200px; /* safe default; JS below will keep this in sync */ } /* Smooth scrolling, but respect reduced-motion */ html { scroll-behavior: smooth; scroll-padding-top: var(--sticky-offset); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Make headings stop below the sticky header */ .entry-content h2[id], .entry-content h3[id], .entry-content h4[id] { scroll-margin-top: calc(var(--sticky-offset) + 8px); } /* When logged in, WordPress admin bar adds height — nudge the offset */ body.admin-bar { --sticky-offset: calc(96px + 32px); } /* desktop admin bar */ @media (max-width: 782px) { body.admin-bar { --sticky-offset: calc(96px + 46px); } /* mobile admin bar */ } /* Optional: subtle highlight when arriving at an anchor */ :target { outline: none; } .entry-content :target { animation: anchorFlash 800ms ease-out 1; } @keyframes anchorFlash { from { box-shadow: 0 0 0 0 rgba(254,205,6,.25); } to { box-shadow: 0 0 0 0 rgba(254,205,6,0); } } /* Accessibility: allow headings to receive focus after scroll */ .entry-content h2[id], .entry-content h3[id], .entry-content h4[id] { outline: none; } .entry-content h2[id]:focus, .entry-content h3[id]:focus, .entry-content h4[id]:focus { outline: 2px dashed #559f3d; outline-offset: 4px; } @supports not (scroll-margin-top: 1px) { .entry-content h2[id]::before, .entry-content h3[id]::before, .entry-content h4[id]::before { content: ""; display: block; height: var(--sticky-offset); margin-top: calc(var(--sticky-offset) * -1); visibility: hidden; } } /* ========================================================================== CUSTOMIZER ADDITIONAL CSS (merged 2026-05-09 from WP Admin → Customize → Additional CSS) -------------------------------------------------------------------------- These rules previously lived in the WordPress Customizer. They are appended verbatim and at the END of this file so the cascade order matches what was on the live site at merge time. After visual verification on staging, the matching rules can be removed from the Customizer (WP Admin → Appearance → Customize → Additional CSS). ========================================================================== */ /* */ /*Aggiusta BAck to top on mmobile */ /* */ @media (max-width: 720px){ .fa-5x { font-size: 2.5em !important; } #wpfront-scroll-top-container { right: 12px !important; bottom: 15px !important; } #wpfront-scroll-top-container i { color: #FECD06 !important; } } /* */ /* PLAYTHROUGH TOOLTIP */ /* */ #pt-tooltip { display: none; position: absolute; z-index: 9999; background: #F3FAF8; color: #312F2F; font-size: 0.82em; line-height: 1.5; padding: 8px 12px 8px 12px; border-radius: 6px; border: 1px solid #559F3D; max-width: 280px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); pointer-events: auto; /* necessario per click interno */ cursor: default; } #pt-tooltip::before { content: ''; position: absolute; top: -12px; left: var(--arrow-left, 10px); border-width: 0 8px 10px 8px; border-style: solid; border-color: transparent transparent #559F3D transparent; } #pt-tooltip-link { color: #559F3D; text-decoration: underline; cursor: pointer; } #pt-tooltip-link:hover { opacity: 0.8; } .pt-info-icon { color: #559F3D !important; font-size: 1em; transition: opacity 0.2s ease; } .pt-info-link:hover .pt-info-icon { opacity: 0.75; } td .pt-info-html{ display: none; } @media (max-width: 720px){ td .pt-info-html{ display: inline-block; vertical-align: middle; } } /*---------------------------*/ /* Lista casino adm */ /*---------------------------*/ table.elenco-casino-adm {margin-top:2em; margin-bottom:2em;} .elenco-casino-adm{width:100%; border-collapse:collapse margin:10px 0; font-size:15px } .elenco-casino-adm caption{text-align:center;font-weight:700;margin-bottom:8px;color:grey;caption-side:top; font-size:1.5em;} .elenco-casino-adm th,.elenco-casino-adm td{border:1px solid #e5e8ec;padding:10px;vertical-align:top} .elenco-casino-adm thead th{background:#f7f8fa} .elenco-casino-adm tbody tr:nth-child(even){background:#FAF9F9} .elenco-casino-adm tbody tr:hover{background:#fffbcc; cursor:pointer} .elenco-casino-adm td[data-label="Logo"] ul { list-style: none; padding: 0; margin: 0; } .elenco-casino-adm td[data-label="Logo"] li { display: contents; } .elenco-casino-adm td { text-align: center; vertical-align: middle; } .elenco-casino-adm .sc-list { text-align: left; display: inline-block; /* This keeps the list centered as a block but text left-aligned within */ } .elenco-casino-adm th, .elenco-casino-adm td { text-align: center; vertical-align: middle; } table.cln-confronto-table.tab-lista-pad { margin-bottom: 1.5em; } /* Mobile stack */ @media (max-width: 800px){ .elenco-casino-adm thead{display:none} .elenco-casino-adm tr{display:block;margin:0 0 12px;border:1px solid #e5e8ec;border-radius:8px;overflow:hidden;} .elenco-casino-adm td{display:flex;gap:8px;border:0;border-bottom:1px solid #eef1f4;align-items:center} .elenco-casino-adm td:last-child{border-bottom:0} .elenco-casino-adm td::before{ content:attr(data-label); flex:0 0 33%; font-weight:700;color:#4e5661; } .elenco-casino-adm td .td-content { flex: 1; min-width: 0; /* Ensures text can wrap */ } } /* --- elenco-casino-adm: sortable headers --- */ .elenco-casino-adm thead th { cursor: pointer; user-select: none; white-space: nowrap; } .elenco-casino-adm thead th:hover { background: #eef0f3; } .elenco-casino-adm thead th.sort-asc, .elenco-casino-adm thead th.sort-desc { background: #e8eaf0; color: #1a2a6c; } /* Sort triangle icons */ .elenco-casino-adm .sort-icon { display: inline-flex; flex-direction: column; gap: 1px; margin-left: 6px; vertical-align: middle; opacity: 0.3; transition: opacity .15s; } .elenco-casino-adm thead th.sort-asc .sort-icon, .elenco-casino-adm thead th.sort-desc .sort-icon { opacity: 1; } .elenco-casino-adm .sort-icon .tri-up, .elenco-casino-adm .sort-icon .tri-down { display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; } .elenco-casino-adm .sort-icon .tri-up { border-bottom: 5px solid currentColor; } .elenco-casino-adm .sort-icon .tri-down { border-top: 5px solid currentColor; } .elenco-casino-adm thead th.sort-asc .sort-icon .tri-up { color: #1a2a6c; } .elenco-casino-adm thead th.sort-asc .sort-icon .tri-down { color: #ccc; } .elenco-casino-adm thead th.sort-desc .sort-icon .tri-up { color: #ccc; } .elenco-casino-adm thead th.sort-desc .sort-icon .tri-down { color: #1a2a6c; } /* Mobile sort bar (shown only when thead is hidden) */ .casino-sort-bar { display: none; } @media (max-width: 800px) { .casino-sort-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; justify-content: center; text-align: center; } .casino-sort-label { text-align: center; font-size: 18px; font-weight: 500; margin-bottom: 2px; font-family: "Oswald", sans-serif; color: green; } .casino-sort-btn { font-size: 12px; padding: 5px 10px; border: 1px solid #e5e8ec; border-radius: 6px; background: #f9f9f9; color: #363c51; cursor: pointer; } .casino-sort-btn.active { background: #fecd05; color: #363c51; border-color: #e5e8ec; } } /*---------------------------*/ /* TOC table of content */ /*---------------------------*/ .wpj-jtoc.--jtoc-theme-modern .wpj-jtoc--items li .wpj-jtoc--item-content:hover { border-left: 4px solid var(--jtoc-color-custom-1,#008000); font-weight: 700; } #wpj-jtoc { margin: 0 auto; width: fit-content; border: 1px solid rgba(0, 0, 0, 0.01); border-radius: 4px; padding-top: 5px; padding-bottom: 5px; } .tabella-indice {margin-top:1em; margin-bottom:2em;} /*---------------------------*/ /* INFOBOXES NEW */ /*---------------------------*/ .infoquote { position: relative; margin: 2rem 0; padding: 3.25rem 1.5rem 1.25rem 1.75rem; background: #f8f9f7; border-left: 4px solid #2e7d32; border-radius: 8px; font-style: italic; font-size: 1.1rem; line-height: 1.7; color: #2f2f2f; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .infoquote::before { content: "“"; position: absolute; top: 0.2rem; left: 0.75rem; font-size: 7rem; line-height: 1; color: rgba(46, 125, 50, 0.18); font-style: normal; font-family: Georgia, serif; } .infoquote p:last-child { margin-bottom: 0; } .firma-commento { display: block; margin-top: .6rem; text-align: right; font-style: normal; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; color: #2e7d32; opacity: 0.8; } .firma-commento::before { content: "— "; color: rgba(46, 125, 50, 0.65); } .firma-commento a{ color: #2e7d32; text-decoration:none; } .firma-commento a:hover{ text-decoration:underline; } /* ========================================================================== Info Boxes (General & Review) -------------------------------------------------------------------------- Highlighted callout sections used throughout content pages and reviews. Affects #infobox, #infobox1–#infobox5, #infoboxrec. ========================================================================== */ /* Simple red infobox used for urgent alerts */ #infobox { background-color: red; padding: 1rem; } /* Infobox bonus special */ #infobox6 { padding: 1rem; margin: 1.5rem 0; border-radius: 8px; border: 1px solid rgba(12, 163, 108, 0.2); background-color: rgba(12, 163, 108, 0.05); } .infobox6 { padding: 1rem; margin: 1.5rem 0; border-radius: 8px; border: 1px solid rgba(12, 163, 108, 0.2); background-color: rgba(12, 163, 108, 0.05); } /* Neutral gray infobox style (variant 1) */ #infobox1 { background-color: #F8F6F4; padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } #infobox1:hover { /* Yellow highlight on hover */ background: rgba(254, 205, 6, 0.1); padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } /* Infobox lista casino */ #infobox-lista { background-color: #F8F6F4; padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } #infobox-lista:hover { /* Yellow highlight on hover */ background: rgba(254, 205, 6, 0.1); padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } .tab-lista-head{ font-size:1.3em; font-weight:700; line-height: 2.5em; } .pt-lista { color: #383737; opacity: 0.7; word-spacing: normal; letter-spacing: normal; font-size: .75em; } .tab-lista-disc .table-disclaimers { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px 15px; vertical-align: middle; } .tab-lista-head-nome{color:green; } /* Gray infobox with bold links (variant 2) */ #infobox2 { background-color: #F8F6F4; padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } #infobox2 a:not(.btn) { /* Links inside this box */ color: green; font-weight: bold; text-decoration: none; } #infobox2 a:not(.btn):hover { background: rgba(254, 205, 6, 0.5); } /* Green shaded infobox (variant 3) */ #infobox3 { background: rgba(0, 128, 0, 0.3); padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } #infobox3 a:not(.btn), #infobox4 a:not(.btn) { color: green; font-weight: bold; text-decoration: none; } #infobox3 a:not(.btn):hover, #infobox4 a:not(.btn):hover { background: rgba(254, 205, 6, 0.5); } /* Yellow tinted infobox (variant 4) */ #infobox4 { background-color: #FFF0B3; padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } /* Light yellow infobox (variant 5) */ #infobox5 { background: rgba(254, 205, 6, 0.1); padding: 1rem; margin: 1.5rem 0; border-radius: 8px; } /* Callout in reviews showing game offers */ #infoboxrec { background-color: #F8F6F4; padding: 1rem; margin: 1.5rem 0; } #infoboxrec ul { margin: -1.5em 0 1em; } #infoboxrec a:not(.btn) { color: green; font-weight: bold; text-decoration: none; } #infoboxrec a:not(.btn):hover { background: rgba(254, 205, 6, 0.5); } /* ========================================================================== Ranking Infoboxes (Top Positions) -------------------------------------------------------------------------- Styled numbered boxes (1st, 2nd, 3rd) often used in "Top 3" lists. ========================================================================== */ #infotop1, #infotop2, #infotop3, #infotop { background-color: #FFF; padding: .5rem .4rem; margin: 1rem 0; border: 2px solid; border-radius: 8px; } #infotop1 { border-color: #FFD700; } #infotop1 h2::before, #infotop1 h3::before { /* Gold medal icon for first place */ background-image: url("https://staging.casinolegali.net/wp-content/uploads/2021/04/prima-posizione.png"); display: inline-block; content: ""; background-size: 50px 50px; width: 50px; height: 50px; vertical-align: top; } #infotop2 { border-color: #C0C0C0; } #infotop2 h2::before, #infotop2 h3::before { /* Silver medal icon for second place */ background-image: url("https://staging.casinolegali.net/wp-content/uploads/2021/04/seconda-posizione.png"); background-size: 50px 50px; width: 50px; height: 50px; } #infotop3 { border-color: #FFA500; } #infotop3 h2::before, #infotop3 h3::before { /* Bronze medal icon for third place */ background-image: url("https://staging.casinolegali.net/wp-content/uploads/2021/04/terza-posizione.png"); background-size: 50px 50px; width: 50px; height: 50px; } /*---------------------------*/ /* METODOLOGIA */ /*---------------------------*/ .metodologia-bonus { font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; line-height:1.7; color:#4e5661; } .metodologia-bonus h1, .metodologia-bonus h2, .metodologia-bonus h3 { color:#2f3843; margin:.6em 0 .3em; } .metodologia-bonus .intro p { margin:.3em 0; } .metodologia-bonus .toc { margin:.6em 0 1.2em; } .metodologia-bonus .toc a { margin-right:.6em; text-decoration:none; color:#2f5aa8; } .metodologia-bonus .formula-wrap { background:#f6f8fa; border:1px solid #e3e7ee; border-radius:12px; padding:14px 16px; margin:14px 0; } .metodologia-bonus .formula-title { font-weight:700; font-size:14px; color:#2f3843; margin-bottom:6px; letter-spacing:.02em; } .metodologia-bonus .examples, .metodologia-bonus .faq, .metodologia-bonus .note { background:#f8fafc; border:1px dashed #d7dee9; border-radius:12px; padding:12px 14px; margin-top:8px; } .metodologia-bonus .math { margin:8px 0 12px; } .metodologia-bonus .weights, .metodologia-bonus .classes { padding-left:18px; } .metodologia-bonus .divider { border:0; border-top:1px solid #e9edf3; margin:18px 0; } .examples { background: #f8fafc; border: 1px dashed #d7dee9; border-radius: 12px; padding: 12px 14px; margin-top: 8px; } .note { background: #f8fafc; border: 1px dashed #d7dee9; border-radius: 12px; padding: 12px 14px; margin-top: 8px; } .qualita-bonus h4 {color:green; font-size: 1.8571428571rem;} .qualita-bonus h5 {color:grey; font-size: 1.8571428571rem;} /* ——— Inline math: leave it alone ——— */ mjx-container[display="false"]{ display:inline-block !important; overflow:visible !important; vertical-align:baseline; } /* ——— Display math: scrollable viewport ——— */ .formula-viewport{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; /* Optional aesthetics */ /* padding-bottom: 2px; */ } .formula-viewport .formula-math{ display:inline-block; /* let content define its own width */ white-space:nowrap; /* no forced auto-shrink; we scroll instead */ } /* Ensure the MathJax block keeps its natural width inside the viewport */ .formula-viewport mjx-container[display="true"]{ display:inline-block !important; max-width:none !important; } /* ——— Flex/grid parents on mobile: allow shrinking so scroll appears ——— */ @media (max-width:768px){ .row > *, [class*="col"], .column, [class*="grid"], [class*="flex"]{ min-width:0 !important; } } /* Optional minor downsize on very small screens */ @media (max-width:480px){ #metodologia-bonus .formula-math{ font-size:0.96rem; line-height:1.35; } } /* mobile rendering*/ /* Formula mobile scroll hint */ .formula-mobile-hint { display: none; /* hidden on desktop */ } @media (max-width: 768px) { .formula-mobile-hint { display: block; text-align: center; font-size: 20px; margin-top: -3px; margin-bottom: 5px; animation: swipe-hint 1.4s ease-in-out infinite; transform-origin: center bottom; } } @keyframes swipe-hint { 0% { transform: translateX(0px); opacity: 1; } 30% { transform: translateX(14px); opacity: 1; } 60% { transform: translateX(-4px); opacity: 0.6; } 100% { transform: translateX(0px); opacity: 1; } } /* ----------------------------------------------*/ /* ----------------------------------------------*/ /* VOTO BONUS GRAFICO */ /* ----------------------------------------------*/ /* ----------------------------------------------*/ .bonus-meter {padding-top:10px; padding-bottom:10px;} .bonus-meter-container { border: 1px solid #ddd; background-color: #f9f9f9; padding-top:10px; padding-bottom:30px; padding-left:20px; padding-right:20px; border-radius: 8px; /* rounded corners */ } /* ===== Bonus Quality Meter v3 ===== */ .cln-bonus-meter-v2{ --c1:#E9254C; --c2:#FF6F10; --c3:#FECD06; --c4:#49B959; --c5:#0CA36C; --score:50; --thickness:14px; /* segment proportions: 0-35 / 35-50 / 50-70 / 70-90 / 90-100 */ --p1:35fr; --p2:15fr; --p3:20fr; --p4:20fr; --p5:10fr; --bucket-color: rgba(0,0,0,.4); /* overridden by bucket classes */ } /* bucket colour mapping */ .cln-bonus-meter-v2--scarso { --bucket-color: var(--c1); } .cln-bonus-meter-v2--debole { --bucket-color: var(--c2); } .cln-bonus-meter-v2--media { --bucket-color: var(--c3); } .cln-bonus-meter-v2--molto-buono { --bucket-color: var(--c4); } .cln-bonus-meter-v2--eccellente { --bucket-color: var(--c5); } .cln-bonus-meter-v2__title{ margin:0 0 200px; font-size:1.5em; } .cln-bonus-meter-v2__scale{ position:relative; } /* BAR */ .cln-bonus-meter-v2__bar{ position:relative; display:grid; grid-template-columns: var(--p1) var(--p2) var(--p3) var(--p4) var(--p5); height:var(--thickness); border-radius:999px; overflow:visible; /* badge + lines can extend */ } /* contiguous segments */ .cln-bonus-meter-v2__seg{ display:block; height:100%; z-index:1; } .cln-bonus-meter-v2__seg--1{ background:var(--c1); } .cln-bonus-meter-v2__seg--2{ background:var(--c2); } .cln-bonus-meter-v2__seg--3{ background:var(--c3); } .cln-bonus-meter-v2__seg--4{ background:var(--c4); } .cln-bonus-meter-v2__seg--5{ background:var(--c5); } /* THRESHOLD dotted lines (+40px above & below) */ .cln-bonus-meter-v2__th{ position:absolute; left:calc(var(--pos) * 1%); top:-40px; height:calc(var(--thickness) + 80px); transform:translateX(-50%); border-left:2px dotted rgba(0,0,0,.35); z-index:2; pointer-events:none; } /* value above dotted line */ .cln-bonus-meter-v2__th::before{ content: attr(data-val); position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:600; color: rgba(0,0,0,.30); padding:2px 6px; border-radius:999px; } /* CURRENT score marker (bucket colour) */ /* extends 60px above to reach badge border + 40px below */ .cln-bonus-meter-v2__marker{ position:absolute; left:calc(var(--score) * 1%); top:-70px; height:calc(var(--thickness) + 100px); width:3px; transform:translateX(-50%); background:var(--bucket-color); border-radius:2px; z-index:2; pointer-events:none; } /* BADGE: 60px above the bar */ .cln-bonus-meter-v2__badge{ position:absolute; left: clamp(90px, calc(var(--score) * 1%), calc(100% - 90px)); bottom: calc(100% + 70px); transform: translateX(-50%); z-index:3; background:#fff; border:2px solid var(--bucket-color); border-radius:14px; padding:8px 5px; box-shadow:0 10px 26px rgba(0,0,0,.10); display:flex; flex-direction:column; align-items:center; gap:8px; } /* logo width 120px */ .cln-bonus-meter-v2__logo{ width:120px; height:auto; max-height:60px; object-fit:contain; display:block; } /* score line: x / 100 (separate classes) */ .cln-bonus-meter-v2__scoreline{ line-height:1; display:flex; align-items:baseline; gap:0; } .cln-bonus-meter-v2__score-num{ font-size:18px; font-weight:800; color: rgba(0,0,0,.88); } .cln-bonus-meter-v2__score-slash, .cln-bonus-meter-v2__score-max{ font-size:12px; font-weight:700; color: rgba(0,0,0,.45); } /* Labels aligned to segment widths (text only) */ .cln-bonus-meter-v2__labels{ margin-top:10px; display:grid; grid-template-columns: var(--p1) var(--p2) var(--p3) var(--p4) var(--p5); gap:0; position: relative; z-index: 10; /* Added to ensure labels are on top */ } .cln-bonus-meter-v2__label{ text-align:center; font-size:13px; line-height:1.1; opacity:1; } /* ===== Mobile ===== */ @media (max-width: 640px){ .bonus-meter {padding-top:10px; padding-bottom:10px} .bonus-meter-container { border: 1px solid #ddd; background-color: #f9f9f9; padding-top:10px; padding-bottom:20px; padding-left:20px; padding-right:20px; border-radius: 8px; /* rounded corners */ } .cln-bonus-meter-v2__title{ margin:0 0 20px; font-size:1.5em; } /* Two columns: bar left, content right */ .cln-bonus-meter-v2__scale{ display:grid; grid-template-columns: 18px 1fr; column-gap:14px; align-items:stretch; } /* vertical bar, highest score at TOP */ .cln-bonus-meter-v2__bar{ width: var(--thickness); height: 240px; grid-template-columns: 1fr; grid-template-rows: var(--p5) var(--p4) var(--p3) var(--p2) var(--p1); border-radius:999px; align-self:stretch; } /* flip segment order visually: green on top, red at bottom */ .cln-bonus-meter-v2__seg--5{ grid-row:1; } .cln-bonus-meter-v2__seg--4{ grid-row:2; } .cln-bonus-meter-v2__seg--3{ grid-row:3; } .cln-bonus-meter-v2__seg--2{ grid-row:4; } .cln-bonus-meter-v2__seg--1{ grid-row:5; } /* thresholds become HORIZONTAL dotted lines, positioned correctly, extending ~200px to the right */ .cln-bonus-meter-v2__th{ left:-6px; width:200px; top: calc(100% - (var(--pos) * 1%)); height:0; transform: translateY(-50%); border-left:0; border-top:2px dotted rgba(0,0,0,.35); } .cln-bonus-meter-v2__th::before{ left: 195px; top: -14px; transform: none; } /* marker becomes horizontal too (bucket colour), extends towards badge */ .cln-bonus-meter-v2__marker{ left:-6px; width:130px; top: calc(100% - (var(--score) * 1%)); height:3px; transform: translateY(-50%); border-radius:2px; } /* badge moves to the right of the bar, tracks score vertically */ .cln-bonus-meter-v2__badge{ left: calc(100% + 110px); bottom:auto; top: clamp(36px, calc(100% - (var(--score) * 1%)), calc(100% - 36px)); transform: translateY(-50%); align-items:flex-start; /* looks nicer beside the bar */ } /* Labels on the right column, aligned vertically with segments (top = eccellente) */ .cln-bonus-meter-v2__labels{ margin-top:0; grid-template-columns: 1fr; grid-template-rows: var(--p5) var(--p4) var(--p3) var(--p2) var(--p1); align-items:center; } .cln-bonus-meter-v2__label{ text-align:left; padding-left:6px; } /* put label text in the right order */ .cln-bonus-meter-v2__label--eccellente { grid-row:1; } .cln-bonus-meter-v2__label--molto-buono { grid-row:2; } .cln-bonus-meter-v2__label--media { grid-row:3; } .cln-bonus-meter-v2__label--debole { grid-row:4; } .cln-bonus-meter-v2__label--scarso { grid-row:5; } } /*---------------------------*/ /*TABELLA SICUREZZA */ /*---------------------------*/ .logo-box.cln-logo-enhanced.sicurezza ul { list-style-type: none; } .tcol-info2.sicurezza ul { list-style-type: none; } .tcol-info2.sicurezza li::before { display: none; } .cln-resp-msg.sicurezza {font-size: .9em; padding-top: .5em; color: #383737; opacity: 0.8; } .cln-gad-verifica.sicurezza {text-decoration: none; font-weight: normal; border-bottom: 1px dashed #383737; color: #383737; opacity: 0.6; } .btn-recensione.sicurezza{ margin-top: .6em; color:#008000; font-weight: 400; border-bottom: 1px dashed #008000;} .cln-data-verifica.sicurezza {padding-top: .5em;} .tcol-info4 ul { display: flex; flex-direction: column; } .tcol-info5 ul { display: flex; flex-direction: column; } /*---------------------------*/ /*ACF in text rendering */ /*---------------------------*/ .testo-gad-num { display: inline; margin-right: .35em; color: #383737; opacity: 0.7; word-spacing: normal; letter-spacing: normal; font-size: .85em; line-height: 1.3; } a.testo-gad-verifica:hover{ font-weight: normal; border-bottom: 1px solid #383737; opacity: 0.7; } a.testo-gad-verifica { display: inline ; width: auto ; margin: 0; text-decoration: none; font-weight: normal; border-bottom: 1px dashed #383737; color: #383737; opacity: 0.7; font-size: .85em; } figcaption .casino-img-link { text-align: center; display: inline ; } figure.acf-casino-logo { display: inline-block; text-align: center; float: left; } figure.acf-casino-logo img { float: left; display: block; margin-top: -.5em; margin-right: 1em; margin-bottom: -.8em; } figure.acf-casino-logo figcaption { text-align: center; margin-right: 1em; } /*---------------------------*/ /*---------------------------*/ /*---------------------------*/ /*Recensioni NEW */ /*---------------------------*/ /*---------------------------*/ /*---------------------------*/ /*ALTRI CASINO AL CONFRONTO*/ .cln-confronto-table{width:100%; border-collapse:collapse margin:10px 0; font-size:15px } .cln-confronto-table caption{text-align:center;font-weight:700;margin-bottom:8px;color:grey;caption-side:top; font-size:1.5em;} .cln-confronto-table th,.cln-confronto-table td{border:1px solid #e5e8ec;padding:10px;vertical-align:top} .cln-confronto-table thead th{background:#f7f8fa} .cln-confronto-table tbody tr:nth-child(even){background:#FAF9F9} .cln-confronto-table tbody tr:hover{background:#fffbcc; cursor:pointer} .cln-confronto-table td[data-label="Casinò"] ul { list-style: none; padding: 0; margin: 0; } .cln-confronto-table td[data-label="Casinò"] li { display: contents; } ul.sc-list, .cln-confronto-table ul.sc-list { list-style: none !important; padding-left: 0 !important; } a.confronto {color:green;font-weight:bold;} a.confronto:hover{text-decoration:underline;} .cln-confronto-table td { text-align: center; vertical-align: middle; } .cln-confronto-table .sc-list { text-align: left; display: inline-block; /* This keeps the list centered as a block but text left-aligned within */ } .cln-confronto-table th, .cln-confronto-table td { text-align: center; vertical-align: middle; } /* ...but make PRO/CONTRO lists truly left-aligned */ .cln-confronto-table td .sc-list.sc-list--pro, .cln-confronto-table td .sc-list.sc-list--con{ display: block; /* stops the "centered inline-block" behaviour */ text-align: left; /* left-align list content */ margin: 0; /* remove default ul margins that can look odd */ padding-left: 1.2em; /* keep bullets nicely indented */ } /* Optional: ensure each LI uses normal list layout */ .cln-confronto-table td .sc-list.sc-list--pro li, .cln-confronto-table td .sc-list.sc-list--con li{ text-align: left; } .cln-confronto-table tbody tr:first-child { background: #e8f5e9; } .cln-confronto-table tbody tr:first-child:hover { background: #c8e6c9; } /* Mobile stack */ @media (max-width: 800px){ .cln-confronto-table thead{display:none} .cln-confronto-table tr{display:block;margin:0 0 12px;border:1px solid #e5e8ec;border-radius:8px;overflow:hidden;} .cln-confronto-table td{display:flex;gap:8px;border:0;border-bottom:1px solid #eef1f4;align-items:center} .cln-confronto-table td:last-child{border-bottom:0} .cln-confronto-table td::before{ content:attr(data-label); flex:0 0 33%; font-weight:700;color:#4e5661; } .cln-confronto-table td .td-content { flex: 1; min-width: 0; /* Ensures text can wrap */ } } /*---------------*/ /*---------------*/ /*general adjustment*/ /*---------------*/ /*---------------*/ .body-single-affiliates-s1 .main-area-review { margin-top: -20px; } /*giochi migliori */ /*giochi migliori */ /* ========================================================= GAMES GRID — updated spec - Grey section band - No white card around images - 5 cols desktop, 3 cols mobile - Tighter row gap - Mobile: single-line titles + hide 10th item ========================================================= */ /* Section container (kept as a separate band) */ .games-grid-section { --section-bg: #f5f7fa; --border: #e8edf2; --text: #203342; background: var(--section-bg); border: 1px solid var(--border); border-radius: 5px; padding: 18px 16px 18px; margin: 18px 0 26px; color: var(--text); } .games-grid-section > h2 { margin: 0 0 12px; } /* Grid: 3-up by default (mobile-first), 5-up on desktop */ .games-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* mobile: 3 columns */ gap: 8px 12px; /* tighter row gap */ align-items: start; justify-items: center; /* center content in wide cells */ } @media (min-width: 992px) { .games-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Card/link - IMPORTANT: constrain width on mobile */ .game-card { display: block; width: 100%; /* take full grid cell width */ max-width: 250px; /* but cap it */ } .game-link { display: block; /* CHANGED: from inline-block to block */ text-decoration: none; color: inherit; width: 100%; /* fill the card */ } /* Figure: NO white box (no bg/border/shadow/radius) */ .game-link figure { margin: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; width: 100%; /* fill parent */ } /* Image: consistent sizing */ .game-link img { display: block; width: 100%; /* fill the figure */ max-width: 250px; /* hard cap */ height: auto; margin: 0 auto; /* center inside the cell */ transition: transform .18s ease; } /* Caption under the image */ .game-link figcaption { text-align: center; font-weight: 800; color: var(--text); margin-top: 0px; padding: 0; width: 100%; /* ADDED: ensure full width */ } /* Hover/focus: lift the image slightly (caption not involved) */ .game-link:hover img, .game-link:focus-visible img { transform: translateY(-2px); } .game-link:focus-visible { outline: none; } /* Mobile rules */ @media (max-width: 991.98px) { /* One-line titles with ellipsis */ .game-link figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hide the 10th game: show 9 items → 3 rows of 3 */ .games-grid .game-card:nth-child(10) { display: none; } } /* Center figcaption under image and tighten spacing */ .games-grid figure { text-align: center; width: 100%; /* ADDED */ } .games-grid figcaption { margin-top: -10px; /* tighter than before */ padding: 0; width: 100%; /* ADDED: ensure full width */ } /* Ensure the caption link behaves nicely and centers */ .games-grid figcaption .game-link { display: block; /* CHANGED: from inline-block to block */ color: inherit; text-decoration: none; line-height: 1.2; font-weight: 600; font-size:.9em; width: 100%; /* ADDED: fill container */ white-space: nowrap; /* MOVED: always apply */ overflow: hidden; /* MOVED: always apply */ text-overflow: ellipsis; /* MOVED: always apply */ } .games-grid figcaption .game-link:hover { text-decoration: underline dotted; text-underline-offset: 2px; } /* Fallback for older browsers that don't support dotted underlines */ @supports not (text-decoration: underline dotted) { .games-grid figcaption .game-link:hover { text-decoration: none; border-bottom: 1px dotted currentColor; padding-bottom: 1px; } } /* Mobile: ensure caption stays contained */ @media (max-width: 991.98px) { .game-card { max-width: 100%; /* ADDED: allow full cell width on mobile */ } .games-grid figcaption .game-link { max-width: 100%; /* keep at 100% */ } } /*----------------------*/ /* Tabella su Recensioni */ /*-----------------------*/ a.tabella-bonus {color:green; text-decoration:underline; } a.tabella-bonus:hover {color:green; background-color: rgba(254, 205, 6, 0.5); } .tabella-bonus {color:red; } .tabella-bonus-voto-score{ font-size:16px; font-weight:700; color: rgba(0,0,0,.88); } .tabella-bonus-voto-slash, .tabella-bonus-voto-max{ font-size:12px; font-weight:700; color: rgba(0,0,0,.45); } .cln-bonus-table{width:100%; border-collapse:collapse margin:10px 0; font-size:15px } .cln-bonus-table caption{text-align:center;font-weight:900;margin-bottom:8px;color:#559F3D;caption-side:top; font-size:1.3em;} .cln-bonus-table th,.cln-bonus-table td{border:1px solid #e5e8ec;padding:10px;vertical-align:top} .cln-bonus-table thead th{background:#f7f8fa} .cln-bonus-table tbody tr:nth-child(even){background:#FAF9F9} .cln-bonus-table tbody tr:hover{background:#fffbcc; cursor:pointer} .cln-note{font-size:13px;color:#5a6573; opacity .1;margin-top:8px} .cln-note a {font-size:13px;color:#5a6573; opacity .1;margin-top:8px; text-decoration:underline;} .cln-note a:hover {font-size:13px;color:green; opacity .1;margin-top:8px; text-decoration:underline;} /* Mobile stack */ @media (max-width: 720px){ .cln-bonus-table thead{display:none} .cln-bonus-table tr{display:block;margin:0 0 12px;border:1px solid #e5e8ec;border-radius:8px;overflow:hidden} .cln-bonus-table td{display:flex;gap:8px;border:0;border-bottom:1px solid #eef1f4} .cln-bonus-table td:last-child{border-bottom:0} .cln-bonus-table td::before{ content:attr(data-label); flex:0 0 44%; font-weight:700;color:#4e5661 } } /*---------------------------*/ /*---------------------------*/ /*---------------------------*/ /*FINE Recensioni NEW */ /*---------------------------*/ /*---------------------------*/ /*---------------------------*/ /*Metotologia Formula*/ .metodologia-bonus { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; line-height: 1.7; color: #4e5661; } .metodologia-bonus h2, .metodologia-bonus h3 { color: #2f3843; margin: 0.6em 0 0.3em; } .formula-wrap { background:#f6f8fa; border:1px solid #e3e7ee; border-radius:12px; padding:14px 16px; margin:16px 0; } .formula-title { font-weight:700; font-size:14px; color:#2f3843; margin-bottom:6px; letter-spacing:.02em; } .vars { margin: 8px 0 16px; padding-left: 18px; } .nota { background:#fffceb; border:1px solid #f2e4a7; border-radius:12px; padding:12px 14px; margin:16px 0; } .esempi, .faq { background:#f8fafc; border:1px dashed #d7dee9; border-radius:12px; padding:12px 14px; margin-top:10px; } .classi { columns: 2; margin: 8px 0 16px; padding-left: 18px; } .math { margin: 8px 0 14px; } .formula-math { font-size: 1.05rem; } /*AGGIUSTA TABELLONE*/ .cln-dv-label { font-family: "Open Sans"; font-size: 0.8571428571rem; opacity: 0.6; color: #383737; } .cln-dv-date { font-family: "Open Sans"; font-size: 0.8571428571rem; opacity: 0.9; color: #383737; } /* "Fonte" as a tiny pill button */ .cln-tablev2 .col-bonus .cln-bonus-fonte {margin-top:5em !important;} .cln-tablev2 .col-bonus a.cln-bonus-fonte { display: inline-block; white-space: nowrap; padding: .15em .6em; /* compact oval */ border: 1px solid currentColor;/* outline uses text color */ border-radius: 999px; /* full oval */ background: transparent; /* keep it light */ color: #383737; /* site accent */ font-size: .78rem; font-weight: 600; line-height: 3.0; text-decoration: none; /* no underline inside pill */ vertical-align: baseline; /* rely on the existing “ · ” separator spacing — no extra margins */ } .cln-tablev2 .col-bonus a.cln-bonus-fonte:hover { color: #2d739b; } .cln-tablev2 .col-bonus a.cln-bonus-fonte:focus-visible { outline: 2px solid #2d739b; outline-offset: 2px; } /* ========================================================= Scroll-triggered Pop-under (review template) ========================================================= */ .cln-popunder { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; background: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); border-top: 1px solid rgba(0, 0, 0, .08); /* Above the bsf_rt_progress_bar_container reading-time bar */ z-index: 2147483647; transform: translateY(100%); visibility: hidden; transition: transform .35s ease-out, visibility 0s linear .35s; } .cln-popunder.is-visible { transform: translateY(0); visibility: visible; transition: transform .35s ease-out, visibility 0s linear 0s; } .cln-popunder__inner { max-width: 1300px; margin: 0 auto; padding: 16px 24px; position: relative; } /* Close button: pinned to the far right of the viewport (direct child of .cln-popunder, not .cln-popunder__inner), styled as the ❎ emoji */ .cln-popunder__close { position: absolute; top: 8px; right: 12px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; opacity: .8; transition: opacity .15s ease, transform .15s ease; z-index: 3; } .cln-popunder__close:hover { opacity: 1; transform: scale(1.1); } .cln-popunder__grid { display: grid; grid-template-columns: 300px 500px 200px 1fr; gap: 20px; align-items: center; } .cln-popunder__sec { min-width: 0; } /* --- Section 1 (300px): replicate .operator-atf-grid .op-atf-row-main look --- */ .cln-popunder__sec--info { background-color: #fff; border-radius: 8px; } .cln-popunder__info-link { display: block; text-decoration: none; color: inherit; border-radius: 8px; transition: transform .2s ease, box-shadow .2s ease; } .cln-popunder__info-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } .cln-popunder__info-link:focus-visible { outline: 2px solid #559f3d; outline-offset: 2px; } .cln-popunder .op-atf-row-main { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; margin: 0; } .cln-popunder .op-atf-logo { display: flex; flex-basis: 47%; max-width: 47%; flex-direction: column; justify-content: center; align-items: center; padding: 6px 8px; border-radius: 16px 0 0 16px; } .cln-popunder .op-atf-logo .sc-logo-wrap { width: 100%; } .cln-popunder .op-atf-logo .sc-logo { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; } .cln-popunder .op-atf-logo .voto-stelle { display: block; margin-top: 4px; font-size: 14px; line-height: 1; text-align: center; color: #ffce1b; } .cln-popunder .op-atf-bonus { display: flex; background-color: #F4F2EF; border-radius: 0 16px 16px 0; color: #203342; flex-basis: 53%; max-width: 53%; flex-direction: column; font-size: 13px; font-weight: 700; justify-content: center; line-height: 1.2; padding: 8px 8px 8px 16px; position: relative; text-align: center; } .cln-popunder .op-atf-bonus::before { background-color: #FECD06; background-image: url(https://casinolegali.net/wp-content/uploads/2025/10/freccia.webp); background-position: center center; background-repeat: no-repeat; background-size: 12px; border-radius: 4px; content: ""; height: 26px; width: 26px; left: 0; margin: -16px 0 0 -11px; position: absolute; top: 50%; } .cln-popunder .op-atf-bonus strong { color: #000; display: block; font-size: 22px; font-weight: 900; line-height: 1.1; } .cln-popunder .op-atf-bonus span { color: #203342; display: block; font-size: 13px; font-weight: 700; } /* --- Section 3 (200px): pros & cons --- */ .cln-popunder__sec--proscons ul { list-style: none; padding: 0; margin: 0 0 4px; font-size: 14px; line-height: 1.3; } .cln-popunder__sec--proscons li { position: relative; padding-left: 18px; margin: 2px 0; } .cln-popunder__sec--proscons .cln-popunder__pros li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #559f3d; font-weight: 700; } .cln-popunder__sec--proscons .cln-popunder__cons li::before { content: "✕"; position: absolute; left: 0; top: 0; color: #c0392b; font-weight: 700; } /* --- Section 4: CTA (mirror cln-tablev2 .col-btn) --- */ .cln-popunder__sec--cta .col-btn { text-align: center; } .cln-popunder__sec--cta .col-btn .btn { width: 100%; } .cln-popunder .col-btn .cln-resp-msg { margin-top: .6em; font-size: .85em; line-height: 1.2; text-align: center; white-space: nowrap; opacity: .95; pointer-events: none; } /* --- Tablet / mobile fallback --- */ @media (max-width: 1339px) { .cln-popunder__inner { padding: 14px 16px; } } /* <1250px: hide pros/cons section, keep calc at 500px, CTA takes the rest */ @media (max-width: 1249px) { .cln-popunder__sec--proscons { display: none; } .cln-popunder__grid { grid-template-columns: 300px 500px minmax(0, 1fr); } } /* <992px: hide CTA, keep info + calc; calc gets ~2× the width of info */ @media (max-width: 991px) { .cln-popunder__sec--cta { display: none; } .cln-popunder__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; } .cln-popunder .op-atf-bonus strong { font-size: 18px; } .cln-popunder__close { top: 4px; right: 6px; } } @media (max-width: 560px) { .cln-popunder__inner { padding: 10px 12px 12px; } .cln-popunder .op-atf-logo .sc-logo { max-width: 70px; max-height: 40px; } .cln-popunder .op-atf-bonus { font-size: 12px; } .cln-popunder .op-atf-bonus strong { font-size: 15px; } .cln-popunder .col-btn .cln-resp-msg { font-size: .75em; } } /* <450px: info stacks into 4 rows (logo / stars / "Bonus fino a" / value), calc keeps a 225px minimum width. */ @media (max-width: 449px) { .cln-popunder__grid { grid-template-columns: minmax(120px, 1fr) minmax(225px, 2fr); gap: 8px; } /* Turn the info row into a vertical stack */ .cln-popunder .op-atf-row-main { flex-direction: column; align-items: stretch; } .cln-popunder .op-atf-logo, .cln-popunder .op-atf-bonus { flex-basis: auto; max-width: 100%; width: 100%; border-radius: 8px; padding: 6px; } /* Logo fills the column width (overrides <560 70px cap), centered */ .cln-popunder .op-atf-logo .sc-logo { max-width: 100%; max-height: none; margin: 0 auto; } /* Compact stars row beneath the logo */ .cln-popunder .op-atf-logo .voto-stelle { font-size: 10px; padding-bottom: .5em; } /* Drop the yellow arrow marker (only makes sense horizontally) */ .cln-popunder .op-atf-bonus::before { display: none; } /* Collapse strong + span onto the same fourth row */ .cln-popunder .op-atf-bonus strong, .cln-popunder .op-atf-bonus span { display: inline; font-size: 14px; } }