@charset "UTF-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is excluded, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ @import url("https://fonts.googleapis.com/css?family=Noto+Sans:100,200,300,regular,500,600,700&display=swap"); /* Основной контейнер для всего контента */ .container, .main-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* Для мобильных устройств */ @media (max-width: 768px) { .container, .main-container { padding: 0 15px; } } /* Для планшетов */ @media (max-width: 1024px) { .container, .main-container { max-width: 960px; padding: 0 20px; } } /* Для больших экранов */ @media (min-width: 1400px) { .container, .main-container { max-width: 1320px; padding: 0 30px; } } /* Убедитесь, что body не имеет overflow */ body { overflow-x: hidden; margin: 0; padding: 0; } /* Обертка для основного контента */ .content-wrapper { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Для таблиц - добавьте overflow для горизонтального скролла */ .table-responsive { overflow-x: auto; margin: 20px 0; max-width: 100%; } /* Для изображений */ img { max-width: 100%; height: auto; } *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* ===== BASE STYLES ===== */ html { scroll-behavior: smooth; } html, body { font-weight: 400; font-family: "Noto Sans", sans-serif; color: #333; background-color: #fff; } body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } mark { background: #afe4ff; padding: 0 2px; } body.lock { overflow: hidden; } p { line-height: 150%; } /* ===== TYPOGRAPHY ===== */ h1 { font-size: 38px; font-weight: 700; margin: 25px 0; color: #333; text-align: center; } h2 { font-size: 32px; font-weight: 600; margin: 20px 0; text-align: center; color: #333; } h3 { font-size: 26px; font-weight: 600; margin: 15px 0; } /* ===== LISTS ===== */ ol { list-style: decimal; padding: 15px 25px; } ul { list-style: disc; padding: 15px 25px; } li { line-height: 150%; } ol li::marker, ul li::marker { color: rgb(17, 151, 79); font-weight: 700; } /* ===== TABLES ===== */ table { border-collapse: collapse; width: 100%; overflow-x: auto; margin: 20px 0; overflow: auto; } table tr td, table tr th { border: 1px solid #333; padding: 15px; } table tr th { background-color: rgb(17, 151, 79); color: #fff; font-size: 18px; text-align: center; } table tr td:hover { background-color: rgba(17, 151, 80, 0.197); } /* ===== HEADER ===== */ .header { position: sticky; width: 100%; top: 0; left: 0; z-index: 99; background: linear-gradient(142deg, rgb(17, 151, 79) 30%, rgb(0, 170, 148) 90%); padding: 20px 0; } .header .container { display: flex; justify-content: space-between; align-items: center; } .header .container .logo { flex: 0 0 150px; } .header__burger { display: none; } .header__nav { display: none; } .header .searching { position: relative; display: flex; flex-direction: column; gap: 1rem; } .header .searching .search { width: 30px; height: 30px; cursor: pointer; display: none; } .header .searching .search.active { display: block; } .header .searching .search-modal .search-box { background-color: #fff; padding: 0.5rem; border-radius: 10px; } /* ===== MAIN CONTENT ===== */ .main { height: 100%; flex: 1 1 auto; padding: 0 0 50px 0; } .main .cards { display: flex; flex-direction: column; gap: 1rem; margin: 50px 0; } .main .cards .card { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; padding: 32px; box-shadow: 0 0 5px rgb(217, 217, 217); border-radius: 10px; position: relative; } .main .cards .card:nth-child(1)::before { background-color: gold; } .main .cards .card:nth-child(2)::before { background-color: silver; } .main .cards .card:nth-child(3)::before { background-color: rgb(206, 132, 79); } .main .cards .card::before { content: ""; position: absolute; left: 5px; top: 5px; width: 30px; text-align: center; font-weight: 600; font-size: 14px; background-color: #e9e9e9; border-radius: 10px; padding: 0.2rem; color: #000; } .main .cards .card__bonus { display: flex; flex-direction: column; gap: 0.5rem; } .main .cards .card__bonus .title { background-color: #e3fcef; border-radius: 10px; padding: 0.2rem; text-align: center; color: #23bf57; font-size: 12px; max-width: 50%; font-weight: 600; } .main .cards .card__bonus .text { font-size: 24px; font-weight: 600; } .main .cards .card__img { width: 200px; position: relative; } .main .cards .card__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .main .cards .card__rate { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .main .cards .card__rate .stars { display: flex; align-items: center; gap: 0.3rem; } .main .cards .card__rate .stars img { max-width: 20px; } .main .cards .card__rate span { font-weight: 600; } .main .cards .card__list { padding: 0; list-style: none; } .main .cards .card__list li { background-image: url("../img/list-img.svg"); background-repeat: no-repeat; background-size: 24px; background-position: 0 0; padding: 0 0 0.5em 29px; } .main .cards .card__promo { display: flex; flex-direction: column; gap: 1rem; } .main .cards .card__promo .promocode { border: 2px dashed #e8881a; border-radius: 10px; padding: 1rem; cursor: pointer; transition: all 0.3s ease-in-out; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .main .cards .card__promo .promocode .code { font-size: 18px; font-weight: 600; } .main .cards .card__promo .promocode:hover { background-color: #e8881a; color: #fff; } .main .cards .card__btn { display: flex; justify-content: center; width: 100%; background-color: #e8881a; border-radius: 10px; padding: 12px; font-weight: 500; color: #fff; transition: all 0.3s ease-in-out; } .main .cards .card__btn:hover { background-color: #ca700a; } /* Card numbering */ .main .cards .card:nth-child(1)::before { content: "#1"; } .main .cards .card:nth-child(2)::before { content: "#2"; } .main .cards .card:nth-child(3)::before { content: "#3"; } .main .cards .card:nth-child(4)::before { content: "#4"; } .main .cards .card:nth-child(5)::before { content: "#5"; } .main .cards .card:nth-child(6)::before { content: "#6"; } .main .cards .card:nth-child(7)::before { content: "#7"; } .main .cards .card:nth-child(8)::before { content: "#8"; } .main .cards .card:nth-child(9)::before { content: "#9"; } .main .cards .card:nth-child(10)::before { content: "#10"; } .main .cards .card:nth-child(11)::before { content: "#11"; } .main .cards .card:nth-child(12)::before { content: "#12"; } .main .cards .card:nth-child(13)::before { content: "#13"; } .main .cards .card:nth-child(14)::before { content: "#14"; } .main .cards .card:nth-child(15)::before { content: "#15"; } .main .content p { margin: 15px 0; } .main .content img { display: flex; margin: 0 auto; max-width: 500px; } .main .payments { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 3rem; row-gap: 2rem; padding: 22px 28px; background-color: rgba(11, 73, 64, 0.6666666667); box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1); border-radius: 16px; margin: 30px auto 0; } .main .payments .payment__item img { height: 32px; } /* ===== LAYOUT ===== */ .container { max-width: 90vw; margin: 0 auto; padding: 0 16px; } /* ===== FOOTER ===== */ .footer { padding: 30px 0; background: linear-gradient(142deg, rgb(17, 151, 79) 30%, rgb(0, 170, 148) 90%); font-size: 14px; font-weight: 300; color: #fff; } .footer .container { display: flex; justify-content: center; flex-direction: column; gap: 1rem; } /* ===== CARD GRID ===== */ .card-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 20px; } .card { border: 1px solid #ddd; border-radius: 12px; padding: 20px; background-color: #f9f9f9; } .card h4 { margin-top: 0; margin-bottom: 10px; font-size: 18px; } .card p { margin: 0; font-size: 15px; } .card::before { content: '🎁'; font-size: 24px; display: block; margin-bottom: 10px; } .card.negative::before { content: '⚠️'; } /* ===== TABLE OF CONTENTS ===== */ .table-of-contents-container { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 2px solid #cbd5e1; border-radius: 12px; margin: 2rem 0; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .toc-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; color: white; } .toc-title { margin: 0; font-size: 1.25rem; font-weight: bold; } .toc-toggle { background: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; font-weight: 500; } .toc-toggle:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .toc-toggle i { transition: transform 0.3s ease; } .toc-toggle.collapsed i { transform: rotate(180deg); } .toc-content { padding: 1.5rem; transition: all 0.4s ease; opacity: 1; max-height: 1000px; overflow: hidden; } .toc-content.collapsed { max-height: 0; padding: 0 1.5rem; opacity: 0; } .toc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.5rem; } .toc-list li { margin: 0; } .toc-link { display: block; padding: 0.75rem 1rem; color: #475569; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; border-left: 3px solid transparent; font-weight: 500; } .toc-link:hover { background: #e2e8f0; color: #1e40af; border-left-color: #3b82f6; transform: translateX(5px); text-decoration: none; } .toc-link:focus { outline: 2px solid #3b82f6; outline-offset: 2px; } .toc-link.active { background: #dbeafe; color: #1e40af; border-left-color: #3b82f6; } /* ===== COMPARISON GRID ===== */ .comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .comparison-item { background: white; border: 2px solid #e5e7eb; border-radius: 16px; padding: 1.5rem; position: relative; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .comparison-item:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .comparison-item.best { border-color: #f59e0b; background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); } .rank-badge { position: absolute; top: -10px; right: 15px; background: white; padding: 0.5rem; border-radius: 50%; font-size: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .comparison-item h3 { margin: 0 0 1rem 0; color: #1f2937; font-size: 1.25rem; } .quick-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .stat { background: #f1f5f9; color: #475569; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; } .key-features { margin: 1rem 0; } .key-features p { margin: 0.25rem 0; font-size: 0.9rem; color: #374151; } .bonus-highlight { background: #dcfce7; color: #166534; padding: 0.75rem; border-radius: 8px; text-align: center; font-weight: bold; margin-top: 1rem; } /* ===== RESPONSIVE TABLES ===== */ .responsive-table { width: 100%; overflow-x: auto; } .responsive-table table { border-collapse: collapse; width: 100%; min-width: 800px; } .responsive-table th, .responsive-table td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; white-space: nowrap; } .responsive-table thead { background-color: #f2f2f2; } /* ===== LEGALITY OVERVIEW ===== */ .legality-overview .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .status-card { text-align: center; padding: 2rem 1.5rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .status-card.legal { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 2px solid #16a34a; } .status-card.restricted { background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%); border: 2px solid #dc2626; } .status-card.gray { background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%); border: 2px solid #ca8a04; } .status-icon { font-size: 2rem; margin-bottom: 1rem; } .state-count { font-size: 1.5rem; font-weight: bold; margin: 0.5rem 0; } .state-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; } .state-tag { background: #f1f5f9; color: #475569; padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .state-tag.restricted { background: #fef2f2; color: #dc2626; } .state-tag.gray { background: #fefce8; color: #ca8a04; } .requirements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } .requirement-item { background: #f8fafc; padding: 1.5rem; border-radius: 12px; text-align: center; border-left: 4px solid #3b82f6; } .req-icon { font-size: 2rem; margin-bottom: 1rem; } .requirement-item h4 { margin: 0.5rem 0; color: #1f2937; } /* ===== FEATURED CASINO CARDS ===== */ .featured-casino { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 2px solid #3b82f6; margin-bottom: 2rem; } .casino-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .casino-rank { background: #3b82f6; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } .bonus-highlight.premium { background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%); border: 2px solid #f59e0b; padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; } .key-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; margin-bottom: 1.5rem; } /* ===== COMPACT CASINO CARDS ===== */ .casino-card.compact { background: white; border: 1px solid #e5e7eb; padding: 1.5rem; margin-bottom: 1rem; border-radius: 12px; } .compact-content { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; } .specialty-tag { background: #dcfce7; color: #166534; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; display: inline-block; margin-bottom: 0.5rem; } .bonus-compact { font-weight: bold; color: #1f2937; margin-bottom: 0.5rem; } .features-compact { display: flex; flex-wrap: wrap; gap: 0.5rem; } .features-compact span { font-size: 0.85rem; color: #6b7280; } .cta-button.compact { padding: 0.5rem 1rem; font-size: 0.9rem; } /* ===== CASINO OPTIONS TABLE ===== */ .casino-options-table { width: 100%; border-collapse: collapse; margin: 2rem 0; } .casino-options-table th, .casino-options-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; } .casino-options-table th { background: #f8fafc; font-weight: bold; color: #374151; } .casino-name { display: flex; flex-direction: column; gap: 0.25rem; } .specialty-badge { background: #dbeafe; color: #1e40af; padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.7rem; font-weight: bold; width: fit-content; } .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { font-size: 0.85rem; color: #6b7280; margin-bottom: 0.25rem; } .feature-list li:before { content: "• "; color: #3b82f6; font-weight: bold; } .table-cta { background: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: bold; transition: all 0.3s ease; } .table-cta:hover { background: #2563eb; } /* ===== ANIMATIONS ===== */ @keyframes blickBtn { 0% { transform: translate(-200%, -25%) rotate(20deg); } 20% { transform: translate(250%, -25%) rotate(20deg); } 100% { transform: translate(250%, -25%) rotate(20deg); } } @keyframes glowing { 0% { box-shadow: 0 0 5px #4d4d4d; } 50% { box-shadow: 0 0 20px #3ec2fa; } 100% { box-shadow: 0 0 5px #4d4d4d; } } /* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 1199px) { .main { padding: 30px 0; } .main .cards { margin: 30px 0; } .main .cards .card { display: flex; flex-direction: column; padding: 16px; } .main .cards .card__bonus { align-items: center; } .main .cards .card__img { width: 100%; height: 100px; } } @media (max-width: 768px) { h1 { margin: 20px 0; font-size: 30px; } table { display: block; } h2 { font-size: 24px; margin: 15px 0; } h3 { font-size: 20px; margin: 10px 0; } .container { max-width: 100%; } .header { position: relative; } .header__burger { display: block; position: relative; width: 30px; height: 20px; z-index: 3; } .header__burger::after, .header__burger::before { content: ""; } .header__burger::after, .header__burger::before, .header__burger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 10px; transition: all 0.3s ease 0s; } .header__burger::before { top: 0; } .header__burger::after { bottom: 0; } .header__burger span { top: 9px; } .header .header__burger.active::before, .header .header__burger.active::after, .header .header__burger.active span { background-color: #23bf57; } .header .header__burger.active::before { transform: rotate(45deg); top: 9px; } .header .header__burger.active::after { transform: rotate(-45deg); bottom: 9px; } .header .header__burger.active span { transform: scale(0); } .header .header__nav.active { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; overflow-y: auto; padding: 0; list-style: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 2; font-size: 18px; } .header .container { gap: 1rem; } .header .container .logo { flex: auto; } .header .container .logo img { max-width: 120px; } .header .searching #search-input { max-width: 100px; } .main .content img { max-width: 100%; } .main .payments { max-width: 100%; gap: 2rem; } /* TOC responsive */ .toc-header { padding: 1rem; flex-direction: column; gap: 0.5rem; text-align: center; } .toc-list { grid-template-columns: 1fr; } .toc-content { padding: 1rem; } /* Comparison grid responsive */ .comparison-grid { grid-template-columns: 1fr; } /* Legality overview responsive */ .legality-overview .grid { grid-template-columns: 1fr; } /* Compact content responsive */ .compact-content { grid-template-columns: 1fr; } .casino-options-table { font-size: 0.85rem; } .casino-options-table th, .casino-options-table td { padding: 0.75rem 0.5rem; } }