@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 exclud, 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,800,900&display=swap); *: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; } html, body { font-weight: 400; font-family: "Noto Sans", sans-serif; color: #111; } body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; background: #fff; } p { line-height: 150%; } h2 { font-size: 32px; font-weight: 600; margin: 20px 0; text-align: center; color: #121656; } h3 { font-size: 26px; font-weight: 600; margin: 15px 0; } 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: #0a196c; font-weight: 700; } table { border-collapse: collapse; width: 100%; overflow-x: auto; margin: 20px 0; overflow: auto; } table tr td, table tr th { border: 1px solid #fff; padding: 15px; } table tr th { background-color: #4a88ff; color: #333; font-size: 18px; text-align: center; } table tr td { background-color: #b4bfd0; } table tr td:hover { background-color: #b5c7e2; } .header { width: 100%; z-index: 99; padding: 10px 0; background-color: #fff; box-shadow: 0 0 10px #e0e0e0; } .header .container { display: flex; justify-content: space-between; align-items: center; } .header .container .logo { flex: 0 0 80px; } .btn { display: inline-flex; align-items: center; text-transform: uppercase; text-align: center; font-weight: 700; padding: 12px 24px; border-radius: 16px; } .main { height: 100%; flex: 1 1 auto; padding: 30px 0; } .main .banner { display: flex; align-items: center; gap: 1.5rem; } .main .banner__img { flex: 0 0 30%; } .main .banner__content { display: flex; flex-direction: column; gap: 1rem; } .main .banner__content h1 { font-size: 68px; font-weight: 700; letter-spacing: -1.36px; line-height: 100%; } .main .banner__content p { font-size: 20px; } .main .cards { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem 0; } .main .cards__nav { display: flex; align-items: center; gap: 0.3rem; } .main .cards__nav .nav__item { border-radius: 20px; padding: 12px; background-color: #fff; border: 1px solid #333; cursor: pointer; transition: all 0.3s ease-in-out; } .main .cards__nav .nav__item:hover { background-color: #3cb371; } .main .cards__nav .nav__item.active { color: #fff; background-color: #3cb371; border: 1px solid #3cb371; } .main .cards .cards__empty { background-color: gray; color: #fff; border-radius: 20px; padding: 12px; display: flex; justify-content: center; } .main .cards__wrapper { display: flex; flex-direction: column; gap: 1.5rem; } .main .cards__wrapper .card { display: grid; grid-template-columns: 0.5fr 1fr 1fr 0.5fr; align-items: center; gap: 1rem; border-radius: 10px; background-color: #eeeeee; color: #000; overflow: hidden; border: 1px solid #fff; min-height: 150px; } .main .cards__wrapper .card.card--offer { display: block; width: 100%; min-height: 0; background: #fff; border-radius: 16px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; } .main .cards__wrapper .card--offer:nth-child(1), .main .cards__wrapper .card--offer:nth-child(2), .main .cards__wrapper .card--offer:nth-child(3) { border: 2px solid rgb(94, 255, 0); } .main .cards__wrapper .card__img { background-color: #111; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .main .cards__wrapper .card__img .card__number { top: 10px; left: 10px; position: absolute; width: 28px; height: 28px; background-color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 13px; font-weight: 600; z-index: 98; } .main .cards__wrapper .card__img .casino__type { position: absolute; top: 15px; left: 23px; background-color: #3cb371; color: #fff; font-size: 10px; font-weight: 600; padding: 3px 5px 3px 17px; border-radius: 3px; text-transform: uppercase; } .main .cards__wrapper .card__img img { -o-object-fit: contain; object-fit: contain; width: 100%; } .main .cards__wrapper .card__bonus { padding: 20px 0; } .main .cards__wrapper .card__bonus .card__title { font-size: 22px; font-weight: 700; } .main .cards__wrapper .card .card__list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 14px; padding: 0 0 0 25px; list-style: none; } .main .cards__wrapper .card .card__list li { position: relative; } .main .cards__wrapper .card .card__list li::before { content: ""; position: absolute; top: 4px; left: -20px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: url("../img/vector.svg"); } .main .cards__wrapper .card__btn { padding: 0 20px 0 0; display: flex; flex-direction: column; gap: 0.5rem; } .main .cards__wrapper .card__btn .btn { display: flex; justify-content: space-between; text-align: center; align-items: center; width: 100%; background-color: #a4fc23;; } .main .cards__wrapper .card__btn .btn span { flex: 1; } .main .cards__wrapper .card__btn .btn:hover { background-color: pink; } .main .cards__wrapper .card__btn .rate { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .main .cards__wrapper .card__btn .rate .stars { display: flex; align-items: center; gap: 0.2rem; } .main .cards__wrapper .card__btn .rate .stars img { width: 20px; } .main .cards__wrapper .card:nth-child(1) { border: 2px solid rgb(94, 255, 0); } .main .cards__wrapper .card:nth-child(1) .card__img .card__number { background-color: rgb(94, 255, 0); } .main .cards__wrapper .card:nth-child(2) { border: 2px solid rgb(94, 255, 0); } .main .cards__wrapper .card:nth-child(2) .card__img .card__number { background-color: rgb(94, 255, 0); } .main .cards__wrapper .card:nth-child(3) { border: 2px solid rgb(94, 255, 0); } .main .cards__wrapper .card:nth-child(3) .card__img .card__number { background-color: rgb(94, 255, 0); } /* залишаємо решту стилів контенту без змін */ .card--offer .card__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgb(94 255 0); color: #000; font-weight: 700; font-size: 22px; } .card--offer .card__rank-icon { margin-right: 6px; } .card--offer .card__top-choice { font-size: 12px; letter-spacing: 0.05em; opacity: 0.95; } .card--offer .card__body { padding: 24px; } .card--offer .card__top { display: grid; grid-template-columns: 1fr 3fr; gap: 28px; align-items: start; } .card--offer .card__label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin-bottom: 10px; } .card--offer .card__welcome { display: flex; flex-direction: column; gap: 10px; } .card--offer .card__logo-link { display: block; width: 100%; max-width: 180px; text-decoration: none; } .card--offer .card__logo-img { width: 100%; height: auto; object-fit: contain; } .card--offer .card__offer-text { font-size: 20px; font-weight: 600; color: #4f46e5; line-height: 1.4; margin: 0; } .card--offer .card__rating-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; } .card--offer .card__stars { color: #f59e0b; font-size: 16px; } .card--offer .card__tc { color: #9ca3af; font-size: 12px; } .card--offer .card__right { display: flex; flex-direction: column; gap: 16px; } .card--offer .card__features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .card--offer .card__feature { padding: 12px 14px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; } .card--offer .card__feature-label { font-size: 12px; color: #6b7280; } .card--offer .card__feature-value { font-size: 14px; font-weight: 700; color: #1f2937; } .card--offer .card__advantages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .card--offer .card__advantages li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; } .card--offer .card__check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #10b981; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; } .card--offer .card__divider { border: none; border-top: 1px solid #e5e7eb; margin: 20px 0 10px 0; } .card--offer .card__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .card--offer .card__providers, .card--offer .card__payments { display: flex; flex-direction: column; gap: 10px; } .card--offer .card__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .card--offer .card__provider-logo, .card--offer .card__payment-logo { height: 28px; width: auto; max-width: 64px; object-fit: contain; } .card--offer .card__cta { margin-top: 24px; text-align: center; } .card--offer .card__btn-play { display: inline-block; padding: 16px 48px; background: #22c55e; color: #fff; font-weight: 700; font-size: 18px; border-radius: 12px; text-align: center; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; } .card--offer .card__btn-play:hover { background: #16a34a; transform: translateY(-1px); color: #fff; } /* Акордеон: на ПК тригери приховані, панелі завжди видимі — нічого не зʼїжджає */ .card--offer .card__accordion-trigger { display: none; } .card--offer .card__accordion-item { margin: 0; } .card--offer .card__accordion-panel { display: block; } .card--offer .card__accordion-item--advantages .card__accordion-panel { display: flex; flex-direction: column; } /* Один блок "More details" — тільки для мобілки, на ПК прихований */ .card--offer .card__more-details { display: none; } @media (max-width: 768px) { .card--offer .card__top { grid-template-columns: 1fr; } .card--offer .card__bottom { grid-template-columns: 1fr; } /* На мобільній ховаємо окремі секції (переваги/провайдери), показуємо один акордеон More details */ .card--offer .card__desktop-only { display: none !important; } .card--offer .card__more-details { display: block; margin-top: 16px; } .card--offer .card__more-details-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 14px 16px; font-size: 15px; font-weight: 600; color: #1f2937; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; text-align: left; transition: background 0.2s, border-color 0.2s; } .card--offer .card__more-details-trigger:hover { background: #e5e7eb; } .card--offer .card__more-details-trigger::after { content: ''; width: 10px; height: 10px; margin-left: 8px; flex-shrink: 0; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280; transform: rotate(45deg); transition: transform 0.2s ease; } .card--offer .card__more-details.is-open .card__more-details-trigger::after { transform: rotate(-135deg); } .card--offer .card__more-details-panel { display: none; padding: 14px 0 0; overflow: hidden; } .card--offer .card__more-details.is-open .card__more-details-panel { display: block; } .card--offer .card__more-details-section { margin-bottom: 20px; } .card--offer .card__more-details-section:last-child { margin-bottom: 0; } .card--offer .card__more-details-section .card__label { margin-bottom: 8px; } } .main .content p { margin: 15px 0; } .main .content img { display: flex; margin: 0 auto; max-width: 700px; } .main .payments { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; -moz-column-gap: 5rem; column-gap: 5rem; row-gap: 2rem; max-width: 60vw; padding: 22px 28px; background-color: #142245; 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; } .container { max-width: 90vw; margin: 0 auto; padding: 0 16px; } .footer { padding: 20px 0; background-color: #000000; color: #ffffff; } .footer img { max-width: 100px; } .footer .container { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 1rem; } .footer__icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; border: 1px solid #fff; padding: 15px; } .footer__icons img { height: 20px; } @media (max-width: 768px) { body { background-size: auto; } table { display: block; } .block_2 { align-content: center; } .card--offer .card__welcome { flex-direction: row; } .card--offer .card__offer-text { font-size: 16px; } h1 { margin: 20px 0; font-size: 30px; } h2 { font-size: 24px; margin: 15px 0; } h3 { font-size: 20px; margin: 10px 0; } .container { max-width: 100%; } .header .container { flex-direction: column; gap: 15px; } .header .container .logo { flex: auto; } .header .container .logo img { width: 80px; } .header .container .auth { gap: 10px; } .header .container .auth .btn { padding: 8px 16px; font-weight: 500; font-size: 14px; } .main .banner { flex-direction: column; gap: 1rem; } .main .banner__content h1 { font-size: 40px; } .main .banner__content p { font-size: 18px; } .main .banner__img { flex: auto; max-width: 50%; position: relative; } .card--offer .card__body { padding: 16px; } .card--offer .card__top { grid-template-columns: 1fr; gap: 10px; } .card--offer .card__features { grid-template-columns: 1fr 1fr; } .card--offer .card__bottom { grid-template-columns: 1fr; gap: 20px; } .card--offer .card__btn-play { width: 100%; max-width: 100%; } .main .content img { max-width: 100%; } .main .payments { max-width: 100%; gap: 2rem; } .footer .container { flex-direction: column; gap: 20px; } } @keyframes blickBtn { 0% { transform: translate(-200%, -25%) rotate(20deg); } 20% { transform: translate(250%, -25%) rotate(20deg); } to { transform: translate(250%, -25%) rotate(20deg); } } @keyframes glowing { 0% { box-shadow: 0 0 5px #4d4d4d; } 50% { box-shadow: 0 0 20px #f2ff44; } 100% { box-shadow: 0 0 5px #4d4d4d; } } .author-info { display: flex; align-items: center; gap: 20px; padding: 25px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px; margin: 30px 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-left: 4px solid #0066cc; } .author-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); flex-shrink: 0; } .author-details { flex: 1; } .author-name { font-size: 16px; font-weight: 600; color: #212529; margin: 0 0 8px 0; } .author-name strong { color: #0066cc; } .author-bio { font-size: 14px; color: #6c757d; margin: 0; line-height: 1.6; } Responsive author section @media (max-width: 768px) { .author-info { flex-direction: column; text-align: center; padding: 20px; } .author-avatar { width: 100px; height: 100px; } } /* ========================================== DATE UPDATE SECTION ========================================== */ .date { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background-color: #fff3cd; border-radius: 8px; margin: 20px 0; border-left: 4px solid #ffc107; } .date img { width: 24px; height: 24px; } .updated { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; } .updated p { margin: 0; color: #856404; } .updated time { color: #d39e00; font-weight: 600; }