/* Google Fonts переехали в как неблокирующие ссылки */ :root { --default-color: #e8437e; --link-hover: #f4729b; /*Hero*/ --hero-bg1: #1b1464; --hero-bg2: #0d0b2e; /*end Hero*/ --default-lighten-color: #f4729b; --default-catifsh-color: rgb(0, 0, 0); --default-header-color: #1d1028; --default-footer-color: #100816; --btn-text: #fff; } *, *::before, *::after { box-sizing: border-box; } ::selection { background-color: #ffffff; color: #e8437e; } html { height: 100%; } body { margin: 0; font: 16px/1.75 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; /* Стабилизация метрик шрифта на мобильных: уменьшает CLS при переключении с fallback */ font-size-adjust: 0.5; background-color: #fff; color: #333; display: flex; flex-direction: column; min-height: 100%; } h1, h2, h3, h4, h5, h6, p, ol, ul { margin-top: 0; margin-bottom: 0; } ul, ol { padding: 0; list-style: none; } img { max-width: 100%; height: auto; vertical-align: middle; } button { border-radius: 0; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; outline: 0; } button, select { text-transform: none; } [role=button] { cursor: pointer; } select { word-wrap: normal; } select:disabled { opacity: 1; } [list]::-webkit-calendar-picker-indicator { display: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) { cursor: pointer; } ::-moz-focus-inner { padding: 0; border-style: none; } textarea { resize: vertical; } /* page */ .page__main { flex-shrink: 0; overflow:hidden; } .page__footer { margin-top: auto; } /* container */ .container { max-width: 1276px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; } @media (min-width: 768px) { .container { padding-left: 50px; padding-right: 50px; } } /* icons */ .icon { display: block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; } /* grid */ .grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr)); gap: var(--gap-y, 32px) var(--gap-x, 32px) } .gap-24 { --gap-x: 24px; --gap-y: 24px; } @media (min-width: 480px) { .sm\:grid_cols_2 { --grid-cols: 2; } } @media (min-width: 992px) { .lg\:grid_cols_3 { --grid-cols: 3; } } /* btn */ .btn { color: #363636; font-weight: 900; font-size: 16px; line-height: 1.4; padding: 16px 30px; border-radius: 50px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; transition: transform .3s; user-select: none; font-size: 30px; border: none; text-align: center; column-gap: .3em; } .btn:disabled { opacity: .65; } .btn_size_sm { padding-top: 8px; padding-bottom: 8px; } .btn_theme_white { background-color: #fff; } .btn_theme_primary { background-image: linear-gradient(to bottom, #f4729b 37%, #e8437e 98%); color: #fff; } .btn:not(:disabled):hover { transform: scale(1.03); } .btn_theme_white .btn__label { background-image: linear-gradient(to bottom, #e8437e 10%, #1b1464 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn__icon { flex-shrink: 0; } @media (min-width: 576px) { .btn { font-size: 18px; padding: 15px 40px; } .btn_size_sm { padding-top: 12px; padding-bottom: 12px; } } /* bs-input */ .bs-input { padding: 6px 12px; border: 1px solid; border-radius: 4px; font-size: 16px; font-weight: 400; line-height: 1.5; } .bs-input_theme_white { background-color: #fff; border: none; color: #495057; } .bs-input_theme_white::placeholder { opacity: 1; } /* bs-btn */ .bs-btn { border-radius: 4px; border: none; transition: filter .3s; user-select: none; } .bs-btn_theme_burgundy { background-color: #c42d68; color: #fff; } .bs-btn_theme_primary { background-image: linear-gradient(to bottom, #f4729b 37%, #e8437e 98%); color: #fff; } @media (hover: hover) { .bs-btn:hover { filter: brightness(120%); } } /* headings */ h1 { font-size: calc(17.3518px + 4.43951vw); font-weight: 900; line-height: 1.1; } h2 { font-size: calc(17.5139px + 3.32963vw); font-weight: 900; line-height: 1.1; color: #363636; } @media (min-width: 1276px) { h1 { font-size: 70px; } h2 { font-size: 60px; } h3 { font-size: 40px; } } /* hero */ .hero { background-color: #1a1a2e; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 1; pointer-events: none; } .hero__inner { position: relative; z-index: 2; padding: 30px 15px 40px; max-width: 1200px; margin: 0 auto; } .hero__title { color: #fff; font-size: clamp(26px, 4vw, 44px); font-weight: 900; margin: 0 0 24px; overflow-wrap: anywhere; text-align: left; } /* Layout: banner + overview side by side */ .hero__layout { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 992px) { .hero__layout { flex-direction: row; align-items: flex-start; } .hero__banner { flex: 1 1 0; min-width: 0; } .hero__overview { flex: 0 0 300px; } } @media (min-width: 1200px) { .hero__overview { flex: 0 0 340px; } } /* ---- Game banner card ---- */ .hero__game-img-wrap { position: relative; border-radius: 12px 12px 0 0; overflow: hidden; line-height: 0; } .hero__game-img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; } .hero__game-buttons { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 12px; align-items: center; z-index: 3; } /* Buttons */ .hero__btn { display: inline-block; padding: 16px 50px; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none !important; border-radius: 6px; cursor: pointer; transition: transform 0.15s, background 0.15s; white-space: nowrap; line-height: 1.2; min-width: 220px; color: inherit; } .hero__btn:hover { transform: scale(1.02); text-decoration: none !important; } .hero__btn--primary { background: #f5c518; color: #000 !important; border: none; } .hero__btn--primary:hover { background: #ffd234; } .hero__btn--secondary { background: rgba(20,20,20,0.75); color: #fff !important; border: 2px solid #f5c518; } .hero__btn--secondary:hover { background: rgba(20,20,20,0.9); } .hero__btn--full { width: 100%; box-sizing: border-box; } /* ---- Casino offer bar (below game image) ---- */ .hero__casino-offer { background: #333318; border-radius: 0 0 12px 12px; padding: 18px 24px; display: flex; align-items: center; gap: 20px; } .hero__casino-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; } .hero__casino-center { flex: 1 1 0; min-width: 0; } .hero__offer-label { display: block; color: #ffcc00; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; } .hero__offer-text { color: #fff; font-size: 22px; font-weight: 700; margin: 0; line-height: 1.25; } .hero__casino-cta { flex-shrink: 0; } .hero__casino-rating { color: #fff; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; } .hero__casino-rating-row { display: flex; align-items: baseline; gap: 4px; } .hero__casino-rating strong { font-size: 24px; line-height: 1; } .hero__casino-rating span { font-size: 14px; } .hero__stars { color: #ffaa00; letter-spacing: 1px; font-size: 14px; } .hero__casino-link { color: rgba(255,255,255,0.55); font-size: 12px; text-decoration: underline; display: block; margin-top: 2px; } .hero__casino-link:hover { color: #fff; } /* Mobile casino offer */ @media (max-width: 767px) { .hero__casino-offer { flex-wrap: wrap; padding: 16px; gap: 12px; } /* Row 1: logo left, rating right */ .hero__casino-logo { order: 1; height: 36px; } .hero__casino-rating { order: 2; margin-left: auto; } /* Row 2: offer label + text */ .hero__casino-center { order: 3; flex-basis: 100%; } .hero__offer-text { font-size: 20px; } /* Row 3: button full width */ .hero__casino-cta { order: 4; width: 100%; text-align: center; } } /* ---- Overview sidebar ---- */ .hero__overview { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.2); } .hero__overview-logo-wrap { background: linear-gradient(135deg, #d94fa0, #a84fd9); display: flex; justify-content: center; align-items: center; padding: 16px 16px; } .hero__overview-logo { max-width: 180px; max-height: 120px; height: auto; width: auto; } .hero__overview-header { background: #f9f9f4; font-weight: 700; font-size: 15px; padding: 8px 16px; color: #111; border-bottom: 1px solid #eee; } .hero__overview-table { width: 100%; border-collapse: collapse; background: #fff; } .hero__overview-table td { padding: 7px 16px; font-size: 13px; color: #222; border-bottom: 1px solid #f0efe8; } .hero__overview-table tr:last-child td { border-bottom: none; } .hero__overview-table tr:nth-child(even) { background: #fafaf5; } .hero__overview-table td:first-child { font-weight: 600; color: #333; white-space: nowrap; } .hero__overview-table td:last-child { text-align: right; font-weight: 700; color: #111; } /* Rating dots */ .hero__rating-cell { display: flex !important; align-items: center; justify-content: flex-end; gap: 6px; } .hero__rating-num { font-weight: 700; font-size: 16px; color: #222; } .hero__rating-dots { display: inline-flex; gap: 3px; } .hero__dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #ddd; } .hero__dot--filled { background: #ffaa00; } /* nav-toggle */ .nav-toggle { padding: 0; border: none; background-color: transparent; color: inherit; } @media (min-width: 1200px) { .nav-toggle { display: none; } } /* hamburger */ .hamburger { flex-shrink: 0; width: 40px; height: 40px; position: relative; border-radius: 4px; background-image: linear-gradient(to bottom, var(--hero-bg1) 37%, var(--hero-bg2) 98%); color: #fff; } .hamburger_active { background-image: none; } .hamburger__box { display: block; position: relative; width: 26px; height: 14px; margin-inline: auto; } .hamburger__inner, .hamburger__inner::after, .hamburger__inner::before { position: absolute; width: 100%; height: 2px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; background-color: currentColor; } .hamburger__inner { top: 0; display: block; } .hamburger__inner::before { top: 6px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform,opacity; } .hamburger__inner::after, .hamburger__inner::before { display: block; content: ""; } .hamburger__inner::after { top: 12px; } .hamburger_active .hamburger__inner { transform: translate3d(0,6px,0) rotate(45deg); } .hamburger_active .hamburger__inner::before { transform: rotate(-45deg) translate3d(-5.71429px,-6px,0); opacity: 0; } .hamburger_active .hamburger__inner::after { transform: translate3d(0,-12px,0) rotate(-90deg); } /* nav */ .nav { line-height: 1.4; } .nav__list { column-gap: 2.22em; } .nav__link_accent { font-weight: 700; } .subnav__link, .nav__link { color: inherit; text-decoration: none; display: block; } .subnav { display: none; } .subnav__link { padding: 10px 15px; } @media (max-width: 1199.98px) { .nav-scroll-lock { overflow: hidden; } .nav__list { margin-inline: calc(var(--header-pd-inline) * -1); } .nav__link { display: flex; align-items: center; column-gap: 8px; padding: 15px var(--header-pd-inline); } .nav__link_accent { font-size: 1.2em; background-color: #fff; color: #f4729b; width: max-content; border-radius: 10px; margin-left: 11px; } .subnav { width: 100%; } .nav__dropdown_expanded > .subnav { display: block; } .nav__dropdown { display: flex; flex-wrap: wrap; } .nav__dropdown > .nav__link, .nav__dropdown > .subnav__link { width: calc(100% - 26px); } .subnav__link { padding-left: 40px; } .subnav .subnav .subnav__link { padding-left: 60px; } .nav__btn { width: 26px; border: none; padding: 0; position: relative; background-color: transparent; color: inherit; } .nav__btn::before, .nav__btn::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 2px; background-color: currentColor; transition: transform .2s; } .nav__btn:not(.nav__btn_active)::after { transform: translate(-50%, -50%) rotate(90deg); } } @media (min-width: 1200px) { .nav { font-size: 18px; } .nav__list { display: flex; justify-content: flex-end; align-items: center; } .nav__link { padding-top: 25px; padding-bottom: 25px; display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; } .nav__link-icon { display: none; } .nav__link_accent { border: 1px solid var(--default-color); padding: 5px 15px; border-radius: 10px; } .nav__item:hover .nav__link { color: var(--link-hover); } .subnav { position: absolute; z-index: 100; background-color: #fff; width: 260px; box-shadow: 0 0 15px rgba(34,52,67,.3); font-size: 15px; } .nav__item > .subnav { left: 0; top: 100%; } .subnav .subnav { top: 0; left: 100%; } .nav__dropdown > .nav__link, .nav__dropdown > .subnav__link { position: relative; } .nav__btn { display: none; } @media (hover:hover) { .nav__dropdown { position: relative; } .nav__dropdown > .nav__link::after, .nav__dropdown > .subnav__link::after { content: ''; position: absolute; border-color: transparent; border-style: solid; } .nav__dropdown > .nav__link::after { border-width: 4px 3px 0 3px; border-top-color: rgba(0,0,0,.7); bottom: 4px; left: 50%; margin-left: -2px; } .nav__dropdown > .subnav__link::after { top: 50%; right: 4px; margin-top: -2px 0 0; border-width: 3px 0 3px 5px; border-left-color: rgba(0,0,0,.7); } .nav__dropdown:hover > .subnav { display: block; } .subnav__link:hover { color: #f4729b; } } } /* languages */ .languages { position: relative; } .languages__toggle-btn { display:flex; padding: 0; background-color: transparent; /*display: block;*/ border: none; } .languages__list { display: none; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); box-shadow: 0px 1px 8px 0 rgb(0, 0, 0, .58); padding: 8px; border-radius: 5px; min-width: 100%; background-color: #fff; } .languages_open .languages__list { display: block; } .languages__item:not(:last-child) { margin-bottom: 10px; } .languages__link { display: flex; text-decoration: none; color: inherit; width: max-content; } .languages__flag { display: block; border: solid 1px; max-width: none; width: 20px; height: 14px; object-fit: cover; margin-right: 8px; margin-top: 6px; } @media (min-width: 1200px) { .languages__flag { width: 20px; height: 14px; } } /* languages-links */ .languages-links { display: flex; flex-wrap: wrap; justify-content: center; } .languages-links__item:not(:last-child)::after { content: '|'; margin-right: .25em; } .languages-links__link { color: #fff; } .languages-links__link:hover { text-decoration: none; } /* flags-list */ .flags-list { display: flex; flex-wrap: wrap; gap: 10px; } .flags-list__link { text-decoration: none; color: inherit; display: block; } .flags-list__flag { width: 38px; height: 26px; display: block; border: solid 1px; object-fit: cover; max-width: none; } /* header */ .header { --header-pd-inline: 12px; position: relative; z-index: 100; left: 0; top: 0; width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .header__inner { background-color: #394426; display: flex; align-items: center; column-gap: 16px; position: relative; padding: 8px var(--header-pd-inline); } .header__logo { line-height: 1; font-size: 28px; font-weight: 900; color: #fff; text-decoration: none; white-space: nowrap; margin-right: auto; max-width: 120px; } body > header > div > a > img { width: 70px; height: auto; } .header .header__logo img, .header__inner .header__logo img { filter: none; transition: transform .2s ease; height: auto; object-fit: contain; } .header .header__logo:hover img, .header__inner .header__logo:hover img { transform: translateY(-1px); filter: none; } .header_open .header__logo { color: inherit; } .header__languages { display: none !important; flex-shrink: 0; margin-left:25px; } @media (min-width: 768px) { .header { --header-pd-inline: 50px; } .header__inner { column-gap: 24px; } .header__logo { max-width: 160px; } } @media (max-width: 1199.98px) { .header_open .header__content, .header_open .header__inner { background-color: #1d1028; color: #fff; } .header:not(.header_open) .header__content { display: none; } .header__content { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; padding: 0 var(--header-pd-inline) 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: -1; overflow-y: auto; } .header__flags { margin-top: 20px; } } @media (min-width: 1200px) { .header__inner { padding-block: 12px; } .header__content { display: flex; align-items: center; column-gap: 40px; } .header__nav { margin-top: -12px; margin-bottom: -12px; } .header__flags { display: none; } } /* social */ .social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .social__link { color: inherit; text-decoration: none; transition: color .2s; } .social__link:hover { color: var(--social-hover-color); } /* about */ .about { padding-top: 50px; padding-bottom: 50px; background: #fff !important; color: #222 !important; } .about h1, .about h2, .about h3, .about h4, .about h5, .about h6 { color: #111 !important; } .about p, .about li, .about dd, .about dt, .about blockquote, .about small, .about span { color: #333 !important; } .about a { color: #394426 !important; text-decoration: underline; } .about a:hover { color: #2a3319 !important; } .about a.cta-btn { text-decoration: none !important; } .about a.cta-btn.cta-btn--primary { color: #000 !important; } .about a.cta-btn.cta-btn--secondary { color: #fff !important; } .about a.cta-btn.cta-btn--outline { color: #394426 !important; } .about a.cta-btn.cta-btn--outline:hover { color: #fff !important; } .about table:not(.hero__overview-table) { background: #fff !important; border: 1px solid #ddd !important; color: #333 !important; } .about table:not(.hero__overview-table) td, .about table:not(.hero__overview-table) th { background-color: #fff !important; border-color: #eee !important; color: #333 !important; } .about .author-block { background: #f5ecd7 !important; border: 1px solid #d4c9a8 !important; color: #333 !important; border-radius: 16px; box-shadow: 2px 3px 12px rgba(0,0,0,0.08); } .about .author-block::before { display: none !important; } .about .author-block .author-block__name { color: #222 !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #222 !important; } .about .author-block .author-block__line { color: #555 !important; } .about .author-block .author-block__text, .about .author-block .author-block__text p { color: #333 !important; } .about .author-block .author-block__photo img { border: 3px solid #394426 !important; background: #fff !important; } .about .author-block .author-block__socials .author-block__socials__item { background: rgba(57,68,38,0.12) !important; border: none !important; } /* === Author page === */ .main { background: #fff !important; padding: 40px 0; } .main .author-block { background: #f5ecd7 !important; border: 1px solid #d4c9a8 !important; color: #333 !important; border-radius: 16px; box-shadow: 2px 3px 12px rgba(0,0,0,0.08); } .main .author-block::before { display: none !important; } .main .author-block .author-block__name { color: #222 !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #222 !important; } .main .author-block .author-block__line { color: #555 !important; } .main .author-block .author-block__text, .main .author-block .author-block__text p { color: #333 !important; } .main .author-block .author-block__photo img { border: 3px solid #394426 !important; background: #fff !important; } .main .author-block .author-block__socials .author-block__socials__item { background: rgba(57,68,38,0.12) !important; border: none !important; } .main h1, .main h2, .main h3 { color: #222 !important; } .main p, .main li, .main time { color: #444 !important; } .main a { color: #394426 !important; } .main a:hover { color: #2a3319 !important; } .author-publications__list { list-style: none; padding: 0; } .author-publications__item { padding: 12px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .author-publications__item a { font-weight: 600; } .author-publications__item time { font-size: 13px; color: #999 !important; flex-shrink: 0; } .about .faq-block .faq-block--items .faq-block--items__item .faq-block--items__item--header { background: #e8e8e8 !important; border: none !important; border-radius: 6px !important; color: #111 !important; font-size: 18px; font-weight: 700; padding: 20px 60px 20px 20px !important; } .about .faq-block .faq-block--items .faq-block--items__item .title-faq:after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23394426'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat center !important; background-color: rgba(57,68,38,0.1) !important; background-size: 20px !important; border: none !important; box-shadow: none !important; filter: none !important; width: 32px; height: 32px; border-radius: 50% !important; } .about .faq-block .faq-block--items .faq-block--items__item.-toggle .faq-block--items__item--header { background: #e0e0e0 !important; color: #111 !important; } .about .faq-block .faq-block--items .faq-block--items__item .faq-block--items__item--content { background: #fff !important; color: #333 !important; border: none !important; padding: 20px !important; } .about .faq-block .faq-block--items .faq-block--items__item .faq-block--items__item--content a { color: #394426 !important; } .about .faq-block .faq-block--items .faq-block--items__item { margin-bottom: 10px; } .toc { background: #fff !important; color: #333 !important; } .toc-block { background: #f9f9f9 !important; color: #333 !important; border: 1px solid #ddd !important; } .toc-block a { color: #1a73e8 !important; } .page__main { background: #fff; } .about_content_trainer { padding-top: min(50px, 1.05882px + 6.37255vw); } .about__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-content: space-between; gap: 32px; } .about__img-wrapper { text-align: center; } .about__title { margin-bottom: .5em; } .about_content_trainer .about__title { margin-bottom: .3em; } .about__descr { font-size: 18px; line-height: 2; } .about_content_trainer .about__descr { font-size: 16px; line-height: inherit; } .about__descr a:not([class]) { color: #000; } .about__descr a:hover { text-decoration: none; } .about__form { max-width: 350px; } .about__form, .about__btn { margin-top: 30px; } @media (min-width: 768px) { .about__inner { grid-template-columns: 300px minmax(0, 572px); } .about_revers .about__inner { grid-template-columns: minmax(0, 572px) 300px; } .about__img-wrapper { text-align: left; } .about_revers .about__img-wrapper { order: 1; text-align: right; } } /* section */ .section { padding-top: calc(37.5139px + 3.32963vw); padding-bottom: calc(37.5139px + 3.32963vw); } @media (min-width: 1276px) { .section { padding-top: 80px; padding-bottom: 80px; } } /* sites */ .sites { text-align: center; color: #1b354c; } .sites__item { display:flex; flex-wrap: wrap; position: relative; padding: 5px 10px 10px; border: 1px solid #dcdede; border-radius: 2px; background-color: #fff; } .sites__item:not(:last-child) { margin-bottom: 10px; } .sites__logo-col { flex: 0 0 130px; } .sites__logo-link { color: inherit; text-decoration: none; display: flex; align-items: center; height: 100%; margin: 0 auto; max-width: 130px; } .sites__logotype { height: 60px; object-fit: contain; } .sites__num { position: absolute; width: 24px; height: 30px; top: -5px; left: -10px; font-size: 15px; line-height: 2; font-weight: 700; } .sites__bonus-col { max-width: calc(100% - 150px); flex-basis: 100%; line-height: 1.1; font-size: 13px; align-self: center; } .sites__bonus { font-size: 18px; display: block; font-weight: 900; } .sites__info-col { flex: 0 0 33.333333%; padding: 5px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; line-height: 1.1; } .sites__icon::before { content: ''; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center center; background-size: contain; position: relative; display: inline-block; top: -1px; vertical-align: middle; margin: 0 4px 0 0; } .sites__icon_type_games::before { background-image: url('../images/other-games.png'); } .sites__icon_type_mobile::before { background-image: url('../images/mobile.png'); } .sites__icon_type_live::before { background-image: url('../images/live.png'); } .sites__actions-col { flex: 0 0 100%; margin-top: 10px; margin-bottom: 10px; } .sites__btn { text-decoration: none; display: block; } .sites__btn_theme_primary::before { background-color: #e8437e; } .sites__btn_theme_secondary::before { background-color: #f5a623; } .sites__btn::before { content: attr(data-text-before); padding: 12px 10px; color: #fff; text-transform: uppercase; border-radius: 6px; display: block; font-size: 20px; line-height: 1.2; transition: filter .3s; } .sites__btn:hover::before { filter: brightness(120%); } .sites__rating-col { isolation: isolate; } @media (min-width: 500px) and (max-width: 767.98px) { .sites__logo-col, .sites__bonus-col, .sites__actions-col { max-width: calc((100% - 130px) / 2); } .sites__actions-col { padding-right: 40px; } } @media (max-width: 767.98px) { .sites__header { display: none; } .sites__logo-col { position: relative; } .sites__logo-col::after { content: ''; position: absolute; width: 1px; height: 34px; top: 50%; right: 0; margin-top: -17px; background-color: #dddedf; } .sites__info-col { order: 2; margin-top: 10px; background-color: #f6f6f7; color: #4f6375; } .sites__info-col::before { content: attr(data-title); display: block; width: 100%; margin-bottom: 3px; font-size: 11px; line-height: 1.1; color: #545454; } .sites__btn-label { display: none; } } @media (min-width: 768px) { .sites__header { display: flex; align-items: center; background-color: #d4d7db; padding-right: 25px; padding-left: 37px; } .sites__item { padding: 17px 25px 17px 35px; align-items: center; } .sites__col-name { padding: 5px 10px; font-size: 12px; line-height: 1.08; color: #667583; text-transform: capitalize; } .sites__info-col { font-weight: 700; color: #1b354c; } .sites__num { display: flex; width: 24px; height: 100%; top: 0; left: 0; justify-content: center; align-items: center; border-right: 1px solid #d6d8d9; font-size: 15px; color: #fff; text-align: center; background-color: #1b354c; } .sites__btn-label { font-size: 11px; color: #1b1464; } .sites__icon::before { width: 25px; height: 25px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .w-t-11 { flex: 0 0 11%; } .w-t-13 { flex: 0 0 13%; } .w-t-14 { flex: 0 0 14%; } .w-t-15 { flex: 0 0 15%; } .w-t-21 { flex: 0 0 21%; } } @media (min-width: 1024px) { .w-d-11 { flex: 0 0 11%; } .w-d-15 { flex: 0 0 15%; } .w-d-16 { flex: 0 0 16%; } .w-d-17 { flex: 0 0 17%; } .w-d-19 { flex: 0 0 19%; } .sites__bonus { font-size: 27px; } .sites__icon::before { width: 30px; height: 30px; } } /* site-rating */ @media (max-width: 767.98px) { .site-rating { position: absolute; width: 42px; height: 42px; top: 0; right: 0; overflow: hidden; padding-left: 5px; } .site-rating::before { content: ''; position: absolute; width: 84px; height: 84px; bottom: 0; left: 0; border-radius: 50%; background: #1b354c; z-index: -1; } .site-rating__val { color: #fff; font-size: 13px; font-weight: 700; padding: 3px 0 12px; background: url('../images/star-rating.png') center bottom / 14px 14px no-repeat; line-height: 1.25; } .site-rating__stars { display: none; } } @media (min-width: 768px) { .site-rating { position: relative; width: 52px; padding: 10px 5px; margin: 0 auto; border: 1px solid #dfe0e1; border-radius: 2px; text-align: center; } .site-rating__val { font-size: 20px; line-height: 1; font-weight: 400; color: #1b354c; } .site-rating__stars { font-size: 0; width: 22px; height: 18px; margin: 5px auto 0; background: url('../images/rating-star-tablet-grey.png') 0 0 / auto 100% repeat-x; } .site-rating__stars::before { content: ''; display: block; height: 100%; background: url('../images/rating-star-tablet.png') repeat-x 0 0 / auto 100%; width: var(--site-rating); } } @media (min-width: 1024px) { .site-rating { width: 122px; padding: 12px 5px; } .site-rating__val { font-size: 38px; } .site-rating__stars { width: 107px; } } /* step */ .step { color: #fff; background-image: linear-gradient(to bottom, #f4729b 37%, #e8437e 98%); } .step__title { margin-bottom: 0.27em; text-align: center; } .step__descr { font-size: calc(12.1832px + 1.01781vw); text-align: center; margin-bottom: 30px; } .step__actions { margin-top: 40px; text-align: center; } .step__descr + .step__actions { margin-top: 10px; } .step__btn { box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15); } .step__tab:not(._active) { display: none; } @media (max-width: 767.98px) { .step { display: flex; flex-direction: column; } .step_single_col { justify-content: center; } .step__text { display: contents; } .step__actions { order: 1; } .step__img-wrapper { width: 300px; max-width: 100%; margin: 0 auto 30px; } .step__video { margin-bottom: 30px; } .step__form { margin-bottom: 30px; } } @media (min-width: 768px) { .step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: center; min-height: 80vh; } .step__title { text-align: left; } .step__descr { text-align: left; font-size: calc(14.2353px + 0.490196vw); } .step__img-wrapper { display: block; position: relative; } .step__img { display: block; margin-left: auto; margin-right: auto; width: 280px; } .step__lottie { position: absolute; left: 50%; transform: translateX(-50%); width: calc(280px - 4%); } .step__actions { text-align: left; } } @media (min-width: 1276px) { .step__descr { font-size: 20px; } } /* step-form */ .step-form__group { display: flex; flex-wrap: wrap; column-gap: 5px; position: relative; } .step-form__group:not(:last-child) { margin-bottom: 15px; } .step-form__controll { flex-grow: 1; flex-basis: 0; min-width: 0; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .4); } .step-form_placement_hero .step-form__btn { box-shadow: 2px 2px 0px rgba(30, 30, 30, 0.7); } .step-form__error { width: 100%; display: none; position: relative; padding-left: 1.5em; line-height: 1.2; margin-top: .3em; } .step-form_placement_content .step-form__error { color: #f00; } .step-form__error a { color: inherit; } ._invalid ~ .step-form__error { display: block; } .step-form__error > .icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } /* step-info */ .step-info { text-align: center; } .step-info p:not(:last-child) { margin-bottom: 25px; } @media (min-width: 576px) { .step-info { font-size: 18px; } } /* screen-live */ .screen-live { margin-top: 30px; border-top: 1px solid #e0e0e0; } .screen-live__title { text-align: center; margin-bottom: 1em; } /* screenshot */ .screenshot__figure { margin: 0; } .screenshot__figcaption { background-image: linear-gradient(to bottom, #f4729b 10%, #e8437e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; font-size: 18px; } /* howto */ .howto { text-align: center; } .howto__bg { background-image: linear-gradient(to bottom, #f4729b 37%, #e8437e 98%); padding-top: 50px; padding-bottom: 50px; } .howto__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 32px; color: #fff; } .howto__item:not(:last-child) { margin-bottom: 20px; } .howto__title { font-size: 24px; line-height: 1.2; font-weight: 900; margin-bottom: .2em; } .howto__img { width: 271px; display: block; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .howto { padding-top: 56px; padding-bottom: 56px; } .howto__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .howto { text-align: left; } .howto__col:first-child { text-align: right; } .howto__img { display: block; margin-top: -106px; margin-bottom: -106px; } } /* onewin */ .onewin__logo { display: block; width: 100%; max-height: 150px; object-fit: contain; background-color: #000; } .onewin__descr { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; padding: 20px; text-align: center; } /* instruction */ .instruction { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; } .instruction__actions { margin-top: 30px; } @media (min-width: 992px) { .instruction { grid-template-columns: repeat(2, minmax(0, 1fr)); } .instruction__img { order: 1; } } /* download */ .download { text-align: center; } .download__inner > *:not(:last-child) { margin-bottom: 30px; } .download__btn { display: inline-block; vertical-align: middle; background-color: #141313; color: #f4729b; font-weight: 900; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15); text-decoration: none; font-size: 18px; border-radius: 50px; padding: 10px 40px; transition: color .3s, background-color .3s, transform .3s; } .download__btn:hover { transform: scale(1.03); background-color: #f4729b; color: #ffff; } /* download-languages */ .download-languages { display: flex; flex-wrap: wrap; justify-content: center; } .download-languages__item:not(:last-child):after { content: '|'; margin-right: .25em; } .download-languages__link { background-color: #141313; color: #fff; text-decoration: none; padding: 2px; } /* footer */ .footer { background-color: #394426; padding-top: 30px; padding-bottom: 30px; padding-left:15px; } .footer__descr { color: #777; margin-bottom: 60px; text-align: center; } .footer__descr a { color: #fff; text-decoration: none; } .footer__descr a:hover { text-decoration: underline; } .footer__languages { margin-bottom: 60px; color: #777; } .footer__partners { margin-bottom: 30px; } .footer__copyright { color: #c8c8c8; font-size: 15px; text-align: center; } .footer__copyright a { color: inherit; text-decoration: none; } .footer__copyright a:hover { text-decoration: underline; } .footer__social { --social-hover-color: #fff; color: #777; margin-bottom: 5px; font-size: 20px; } .footer-logo { max-width: 160px; } /* footer menu */ .footer__nav { text-align: center; margin: 16px 0; } .footer__menu { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .footer__menu li { margin: 0; } .footer__menu a { color: #fff; text-decoration: none; } .footer__menu a:hover { text-decoration: underline; } /* === Footer === */ .footer { position: relative; background: #394426 !important; color: #fff; padding: 24px 0; display: flex; flex-direction: column; align-content: center; align-items: center; } .footer::before { display: none; } .footer .logo .footer-logo { filter: none; } .footer .logo a:hover .footer-logo { transform: translateY(-1px); filter: none; } .footer .contact.container { background: rgba(0,0,0,0.15); color: #fff; padding: 16px; border-radius: 8px; border: none; } .footer__nav { display: inline-block; background: linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta)) border-box; border: 1px solid transparent; border-radius: 10px; padding: 12px 16px; box-shadow: none; } .footer__menu a { color: var(--text-color); } .footer__menu a:hover { color: #fff; text-decoration: none; text-shadow: none; } .leng-links { gap: 18px; } .lengs-list__link { color: var(--text-color); text-decoration: none; } .lengs-list__link:hover { color: #fff; text-shadow: none; } /* partners */ .partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; gap: 32px; } .partners__img { max-height: 60px; opacity: .2; } /* scroll-top */ .scroll-top { width: 50px; height: 50px; border-radius: 50%; background: #394426; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; position: fixed; bottom: 30px; right: 30px; z-index: 99; transition: transform 0.3s, opacity 1s, visibily 1s, box-shadow .3s; opacity: 0; visibility: hidden; text-decoration: none; } .scroll-top_visible { opacity: 1; visibility: visible; } @media (hover: hover) { .scroll-top:hover { transform: scale(1.08); box-shadow: none; } } /* blockquote */ .blockquote { font-size: 20px; } .blockquote__footer { font-size: 80%; color: #6c757d; } .blockquote__footer::before { content: "\2014\00A0"; } /* share */ .share { background-color: #0e0e0e; padding: 0 10px 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; } .share__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; } .share__link { width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; font-size: 32px; transition: filter .3s; } .share__link_whatsapp { background: linear-gradient(to bottom, #e8437e, #c42d68); color: #fff; } .share__link_messenger { background: #fff; } .share__link_telegram { background: #f5a623; color: #fff; } .share__copy-btn { display: inline-flex; align-items: center; justify-content: center; column-gap: 10px; border: 2px solid #fff; background-color: transparent; color: #fff; border-radius: 15px; padding: 10px 15px; font-size: 16px; transition-property: color, background-color; transition-duration: .1s; } .share__copy-btn .icon { font-size: 1.4em; } @media (hover: hover) { .share__link:hover { filter: brightness(120%); } .share__copy-btn:not(:disabled):hover { background-color: #fff; color: #000 } } /*WP STYLE*/ /*POST*/ /* Defer heavy post content rendering below the fold to reduce style/layout work */ .post-entry { content-visibility: auto; contain-intrinsic-size: 1000px; } @media (min-width: 768px) { .post-entry { contain-intrinsic-size: 1400px; } } .post-entry p:not(:last-child) { margin-bottom: 24px; } .post-entry p { font-size: 18px; } .post-entry h1, .post-entry h2, .post-entry h3, .post-entry h4, .post-entry h5, .post-entry h6 { line-height: 1.2; margin-bottom: 14px } .post-entry table { font-size: 14px; margin-bottom: 24px; width: 100% } .post-entry table tr:first-child { background: #2d314d; } .post-entry table tr:first-child td { color: #fff; font-weight: 700 } .post-entry table tr:nth-child(odd) { background: rgba(18,19,26,.74); } .post-entry table tr td { padding: 16px 12px } .post-entry .wp-block-image { margin-bottom: 24px } .post-entry .wp-block-image img { border-radius:15px; margin: 0 auto; } .post-entry ol, .post-entry ul{ counter-reset: num; list-style-type: none; margin-bottom: 24px; margin-left: 32px } .post-entry ol li, .post-entry ul li{ margin: 0 0 16px; padding: 0; position: relative } .post-entry ol li:before { background: var(--default-color); border-radius: 50%; color: #fff; content: counter(num); counter-increment: num; display: inline-block; font-size: 16px; font-weight: 500; height: 24px; left: -32px; line-height: 24px; position: absolute; text-align: center; top: 0; width: 24px } .post-entry ul li:before{ background: var(--default-color); border-radius: 50%; color: #fff; content: "✔"; display: inline-block; font-size: 16px; font-weight: 500; height: 24px; left: -32px; line-height: 24px; position: absolute; text-align: center; top: 0; width: 24px } .post-entry .btn { margin-bottom: 5px; } .post-entry .btn a { color: #fff; } blockquote { margin: 1.5rem 0 !important; background: #f5ecd7 !important; background-image: url('data:image/svg+xml,') !important; color: #333 !important; padding: 32px 40px !important; position: relative; border-radius: 4px !important; border-left: 5px solid #394426 !important; border-right: none !important; border-top: none !important; border-bottom: none !important; font-style: italic; font-size: 17px; line-height: 1.6; box-shadow: 2px 3px 12px rgba(0,0,0,0.08) !important; } blockquote p { color: #333 !important; } blockquote::before { content: '\201C' !important; position: absolute !important; left: 12px !important; top: 8px !important; width: auto !important; height: auto !important; font-size: 48px !important; color: #394426 !important; font-family: Georgia, serif; line-height: 1; opacity: 0.4; background: none !important; filter: none !important; } /*FAQ*/ .faq-block { margin-bottom: 32px; margin-top: 32px } .faq-block .faq-block--title { margin-bottom: 16px; } .faq-block .faq-block--subtitle { color: #000; font-size: 16px; margin-bottom: 16px; margin-top: -4px } .faq-block .faq-block--items .faq-block--items__item:not(:last-child) { margin-bottom: 16px } .faq-block .faq-block--items .faq-block--items__item .faq-block--items__item--header { background: #f7f7f7; border: 1px solid var(--default-color); border-radius: 4px; font-size: 18px; font-weight: 700; padding: 20px; position: relative; cursor: pointer; } .faq-block .faq-block--items .faq-block--items__item .title-faq { max-width: 80%; width: 80% } .faq-block .faq-block--items .faq-block--items__item .title-faq:after { background: url(../img/icon-arrow-b.svg) no-repeat 50%, linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta)) border-box; background-size: 14px, 100% 100%, 100% 100%; border: 2px solid transparent; border-radius: 8px; box-shadow: none; content: ""; height: 42px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(90deg); width: 42px; filter: invert(1) brightness(1.2) saturate(1.2); } .faq-block .faq-block--items .faq-block--items__item .faq-block--items__item--content { display: none } .faq-block .faq-block--items .faq-block--items__item.-toggle .faq-block--items__item--header { background: var(--default-color); color: #fff } .faq-block .faq-block--items .faq-block--items__item.-toggle .title-faq:after { transform: translateY(-50%) rotate(-90deg); } .faq-block .faq-block--items .faq-block--items__item.-toggle .faq-block--items__item--content { display: block; padding: 20px } .faq-block .faq-block--items .faq-block--items__item.-toggle .faq-block--items__item--content p:not(:last-child) { margin-bottom: 8px } .faq-block .faq-block--items .faq-block--items__item.-toggle .faq-block--items__item--content a { color: #e8437e } .faq-block .faq-block--items .faq-block--items__item.-toggle .faq-block--items__item--content a:hover { color: #0b4e35 } .contact { color: #fff; font-size: 12px; text-align: center; margin-top: 20px; } /*Footer*/ .leng-links { display: flex; justify-content: center; margin-top:25px; } .lengs-list { display: flex; gap: 25px; } .lengs-list__link { color: #fff; } .lengs-list__link:hover { color:var(--link-hover) } @media (max-width: 768px) { .lengs-list { flex-wrap: wrap; } } tbody > tr:nth-child(1), .post-entry table tr:nth-child(odd) { color: #fff; } /* === Responsive Tables (mobile horizontal scroll) === */ @media (max-width: 768px) { /* Make the table scrollable via wrapper; keep native table flow */ .wp-block-table { /* WordPress figure wrapper */ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Also enable scroll for standalone tables not wrapped by Gutenberg */ .post-entry table, .content-text table, .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Reset header/body display to match column widths */ .post-entry table thead, .content-text table thead, .entry-content table thead, .wp-block-table table thead { display: table-header-group; width: auto; } .post-entry table tbody, .content-text table tbody, .entry-content table tbody, .wp-block-table table tbody { display: table-row-group; width: auto; } /* Let table grow to content width, but keep its box within viewport */ .wp-block-table table, .post-entry table, .content-text table, .entry-content table { width: max-content; max-width: 100%; border-spacing: 0; } /* Prevent ugly wraps; columns scroll horizontally */ .post-entry table th, .post-entry table td, .content-text table th, .content-text table td, .entry-content table th, .entry-content table td, .wp-block-table table th, .wp-block-table table td { white-space: nowrap; } /* Optional scrollbar styling on wrapper */ .wp-block-table::-webkit-scrollbar { height: 6px; } .wp-block-table::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; } } /*SLOTS STYLE*/ .game-title { font-size: 34px; margin: 15px 0 30px; color: #fff; font-weight: bold; text-align: center; line-height: 32px; } .game-title span { color: #4caf50; } .game__code { width: 100%; flex-grow: 1; height: 100%; position: relative; } .star-rating { position: relative; width: 95px; } .star-rating--inner, .star-rating--outer { position: absolute; left: 0; display: flex; flex-direction: row; } .star-rating--outer { overflow: hidden; } .screen-reader-text { display: inline-block; margin-left: 5px; height: 18px; font-size: 18px; line-height: 21px; font-weight: normal !important; color: #faab00; } .game-rating { display: flex; flex-wrap: wrap; top: 15px; left: 15px; position: absolute; z-index: 1; } .game-rating-title { width: 100%; } .box__game-main { position: relative; z-index: 1; overflow: hidden; width: 100%; height: 65vh; } .slotogamemain { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; } .body__fullscreen .wrapper__container { z-index: 30; } .body__fullscreen .box__game-main { z-index: 10; } .body__fullscreen .header { display: none !important; } .box__game { position: relative; } .box__game-main:after { content: ""; display: block; position: absolute; top: 0; left: 0; background-color: rgba(29, 38, 45, 0.7); width: 100%; height: 100%; } .box__game { background: #000; border-radius: 7px; } .box__game-info { display: flex; align-items: center; justify-content: space-between; position: relative; margin-bottom: 10px; z-index: 2; } .share-text { margin-right: 15px; } .share-text span { display: block; font-size: 15px; line-height: 18px; } .share-wrap { display: flex; align-items: center; position: relative; z-index: 2; } .share__toggle { flex-shrink: 0; display: block; width: 32px; height: 32px; padding: 0; background-color: #2f8f41; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='m19.823 8.666-7.348-6.874c-.088-.083-.171-.13-.291-.125-.23.01-.521.172-.521.417V5.53a.222.222 0 0 1-.187.213C4.17 6.864 1.092 12.332.004 18.008c-.042.224.26.432.4.255 2.667-3.359 5.911-5.551 11.04-5.593.115 0 .219.136.219.25v3.385c0 .364.484.526.755.276l7.4-6.994A.575.575 0 0 0 20 9.15c-.005-.167-.047-.36-.177-.484Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); border-radius: 4px; cursor: pointer; } .share__toggle:hover { background-color: #39833c; } .share__content { display: none; position: absolute; top: 100%; right: 0; margin-top: 15px; margin-right: calc(-50% - -14px); padding: 10px 3px; background-color: #fff; border-radius: 4px; z-index: 5; } .share__content:before { content: ""; display: block; position: absolute; top: -10px; left: 50%; margin-left: -5px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid #fff; } .share__content--visible { display: block; -webkit-animation: fadein 0.2s; -moz-animation: fadein 0.2s; -ms-animation: fadein 0.2s; -o-animation: fadein 0.2s; animation: fadein 0.2s; } .report-problem, .expand-wrap { display: flex; cursor: pointer; font-size: 15px; } .actions-btns .favorites-button, .actions-btns .report-problem, .actions-btns .expand-wrap { margin: 0 0 0 5px; } .report-problem:hover, .expand-wrap:hover { opacity: 0.8; } .report-problem:before, .expand-wrap:before { content: ""; width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: contain; } .report-problem:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNMTIgMjJjNS41IDAgMTAtNC41IDEwLTEwUzE3LjUgMiAxMiAyIDIgNi41IDIgMTJzNC41IDEwIDEwIDEwWk0xMiA4djUiLz48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNMTEuOTk1IDE2aC4wMDkiLz48L3N2Zz4=); } .expand-wrap:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNOSAyMmg2YzUgMCA3LTIgNy03VjljMC01LTItNy03LTdIOUM0IDIgMiA0IDIgOXY2YzAgNSAyIDcgNyA3Wk0xOCA2IDYgMTgiLz48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xOCAxMFY2aC00TTYgMTR2NGg0TTYgNmwxMiAxMk02IDEwVjZoNE0xOCAxNHY0aC00Ii8+PC9zdmc+); } .expand-wrap svg { margin-right: 10px; } .actions-btns { display: flex; flex-direction: row; } .play-btn { width: 128px; height: 128px; position: absolute; z-index: 1; top: 50%; left: 50%; margin-left: -64px; margin-top: -64px; cursor: pointer; text-shadow: none; -webkit-transition: all 0.4s; transition: all 0.4s; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 455 455'%3E%3Cpath d='M227.5 0C101.855 0 0 101.855 0 227.5S101.855 455 227.5 455 455 353.145 455 227.5 353.145 0 227.5 0zm-61.438 321.575v-188.15L328.938 227.5l-162.876 94.075z' fill='%23ffffff' /%3E%3C/svg%3E"); } .play-btn:hover { opacity: 0.8; } .box__game-iframe { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: none; overflow: hidden; } .box__game-iframe.fullscreen { position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 1020; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; align-content: center; align-items: center; width: 100%; max-width: 100%; height: 100%; margin: 0; background: #000; overflow: visible; /* чтобы кнопка не обрезалась */ } /* exit fullscreen button */ .box__game-iframe .exit__fullscreen { display: none; } .box__game-iframe.fullscreen .exit__fullscreen { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9999; /* поверх iframe и других элементов */ width: 40px; height: 40px; border: none; border-radius: 8px; background: rgba(0,0,0,0.4); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .box__game-iframe.fullscreen .exit__fullscreen svg { stroke: #fff !important; } .game__info { float: right; clear: right; width: 340px; } .list__dotted { list-style: none; margin: 0 0 30px; padding: 0; } .list__dotted li { border-bottom: 1px dashed #475158; position: relative; padding: 0; margin-bottom: 18px; line-height: normal; } .list__dotted li span { background-color: #000; margin: 0; } .list__dotted li span.list-label, .list__dotted li span.list-value { bottom: -5px; font-size: 18px; line-height: 16px; } .list__dotted span.list-label { position: relative; margin-right: 7em; padding-right: 2px; } .list__dotted span.list-value { position: absolute; right: 0; padding-left: 2px; } .list__dotted a { color: #fff; } .item__header .heading__section { color: #fff; } .list-rhombus { list-style: none; margin: 0; padding: 0; } .list-rhombus li { padding-left: 20px; position: relative; } .list-rhombus li + li { margin-top: 10px; } .list-rhombus li:not(.nostyle):before { content: ""; display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: #fff; position: absolute; left: 0; top: 9px; } .list-rhombus a { color: #fff; } .table-contents { padding: 20px 15px; border: solid 1px #e0e0e0; background: #fff; } .table-contents p { margin: 0; } .exit__fullscreen { position: absolute; top: 5px; right: 5px; width: 32px; height: 32px; border: 0; background: none; fill: #fff; padding: 0; display: none; cursor: pointer; z-index: 1; } .exit__fullscreen svg { width: 32px; height: 32px; } .box__game-iframe.fullscreen .exit__fullscreen { display: block; } @media (min-width: 576px) { .actions-btns .favorites-button, .actions-btns .report-problem, .actions-btns .expand-wrap { margin: 0 0 0 13px; } .actions-btns .expand-wrap:before { margin-right: 10px; } } @media (min-width: 1140px) { .item__header { margin-left: -30px; margin-right: 30px; width: calc(100% + 60px); } } @media (max-width: 1140px) { .box__game-main { height: 30vh; } } @media (min-width: 768px) and (max-width: 1140px) { .item__header { margin-left: -15px; margin-right: 15px; width: calc(100% + 30px); border-radius: 0; } .game__code { max-width: 100%; } .box__game-main img { width: 100%; object-fit: cover; } .game__info { float: right; clear: right; width: 100%; margin: 30px 0; } .game__info .btn-red, .game__info .btn-yellow, .game__info .btn-green { width: 250px; margin-left: auto; margin-right: auto; } } @media (max-width: 767.8px) { .item__header { margin-left: -15px; margin-right: 15px; width: calc(100% + 30px); border-radius: 0; padding: 0 15px 30px; } .game__code { max-width: 100%; } .game__info { float: right; clear: right; width: 100%; margin: 30px 0; } .game__info .btn-red, .game__info .btn-yellow, .game__info .btn-green { width: 250px; margin-left: auto; margin-right: auto; } .play-btn { width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; } .play-btn svg { width: 64px; height: 64px; } .game-title { font-size: 25px; } .list__dotted span.list-label { white-space: nowrap; } .game__code { height: inherit; } .box__game-iframe { padding-top: 56.25%; } .box__game-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } } .game__died { position: absolute; background: rgba(36, 37, 38, 0.85); top: 0; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; } .game__died-text { display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 22px; } .game__died-text:before { content: ""; display: block; flex-shrink: 0; width: 24px; height: 24px; margin-right: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ0NjFfMjgxNTg0KSI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iMTIiIGZpbGw9IiNmZmYiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTS4wMDIgMTEuOTljMCA2LjU0NyA1LjM2NCAxMS45OSAxMS45ODkgMTEuOTkgNi41NDYgMCAxMS45ODktNS40NDMgMTEuOTg5LTExLjk5QzIzLjk4IDUuMzY3IDE4LjUzNy4wMDMgMTEuOTkuMDAzIDUuMzY3LjAwMi4wMDMgNS4zNjYuMDAzIDExLjk5MVptMTYuMTY5IDYuNjI2LTQuMTgtNC4xOC00LjE4IDQuMTgtMi40NDYtMi40NDUgNC4xMDItNC4xOC00LjEwMi00LjE4TDcuODEgNS4yODdsNC4xOCA0LjE4IDQuMTAyLTQuMTggMi41MjQgMi41MjQtNC4xOCA0LjE4IDQuMTggNC4xOC0yLjQ0NSAyLjQ0NVoiIGZpbGw9IiNEODIxM0YiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80NDYxXzI4MTU4NCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iMTIiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=); } @media (min-width: 768px) { .game__died-text { font-size: 34px; line-height: 36px; font-weight: bold; } .game__died-text:before { width: 32px; height: 32px; } } .box__subpage { float: left; clear: both; width: 100%; margin-bottom: -30px; } .page-list { list-style: none; display: flex; align-items: flex-end; padding: 0; margin: 0; } .page-list li a { display: block; font-size: 16px; font-weight: bold; width: 170px; height: 40px; line-height: 40px; text-align: center; text-decoration: none; color: #3f4143; background: #e3e4e5; border-right: 1px solid #b2b7ba; border-bottom: 1px solid #b2b7ba; -webkit-box-sizing: content-box; box-sizing: content-box; white-space: nowrap; } .page-list li a:hover { background: #cccdce; } .page-list li.active a { height: 41px; background: #fff; color: #4caf50; border-top: 3px solid #4caf50; border-left: 1px solid #4caf50; border-right: 1px solid #4caf50; border-bottom: 0; } @media (max-width: 768px) { .page-list { overflow-x: scroll; } .page-list li a { width: auto; padding: 0 30px; } .page-list::-webkit-scrollbar { height: 5px; margin-top: 1px; background: #fff; } .page-list::-webkit-scrollbar-track { background: #fff; height: 5px; } .page-list::-webkit-scrollbar-thumb { border-radius: 2px; height: 5px; -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.3); } } /* === Casino List Styles === */ .casino-list-block { display: flex; flex-direction: column; gap: 24px; } .casino-list-item { display: flex; flex-direction: row; align-items: stretch; background: #fff; border-radius: 18px; box-shadow: 0 4px 32px 0 rgba(0,0,0,0.08); padding: 28px 32px; gap: 24px; position: relative; } .casino-list-logo-badge-row { display: flex; flex-direction: row; align-items: center; gap: 18px; margin-bottom: 0; } .casino-list-logo { width: 160px; height: 80px; min-width: 160px; border-radius: 12px; background: #000000; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; } .casino-list-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } /* Вариант для логотипов с большими пустыми полями вокруг: заполнять круг полностью */ .casino-list-logo--cover img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; } .casino-list-badge { display: inline-block; font-size: 15px; font-weight: 600; border-radius: 8px; padding: 6px 18px; color: #fff; margin: 0; white-space: nowrap; } .casino-list-info { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .casino-list-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 4px; } .casino-list-desc { color: #6b7280; font-size: 1rem; margin-bottom: 0; } .casino-list-bonus { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 230px; background: linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(135deg, rgba(143,211,255,0.35), rgba(255,34,80,0.35)) border-box; border: 1px solid transparent; border-radius: 12px; color: #fff; font-weight: 700; font-size: 1.2rem; margin: 0 24px; padding: 16px 24px; box-shadow: 0 10px 24px rgba(0,0,0,0.4); } .casino-list-bonus .bonus-label { font-size: 1.05rem; color: #f8c8dc; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .casino-list-bonus .bonus-value { font-size: 2rem; color: #ff3b6b; font-weight: 800; text-shadow: none; } .casino-list-actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; background: linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(135deg, rgba(143,211,255,0.25), rgba(255,34,80,0.25)) border-box; border: 1px solid transparent; border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .casino-list-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 1rem; border-radius: 10px; padding: 12px 20px; border: 1px solid #2a2a2e; cursor: pointer; transition: background 0.2s, transform 0.2s, filter 0.2s; text-decoration: none; } .casino-list-btn--play { background: linear-gradient(180deg, #e8437e, #c42d68); color: #fff; box-shadow: none; } .casino-list-btn--play:hover { background: linear-gradient(180deg, #f06292, #e8437e); transform: translateY(-1px); filter: saturate(110%); } .casino-list-btn--download { background: #202024; color: #e6e6e6; border: 1px solid #2a2a2e; } .casino-list-btn--download:hover { background: #26262b; } /* === Мобильная адаптация === */ @media (max-width: 900px) { .casino-list-item { flex-direction: column; align-items: stretch; padding: 20px 8px; gap: 16px; } .casino-list-logo-badge-row { justify-content: center; margin-bottom: 8px; } .casino-list-logo { width: 160px; height: 80px; min-width: 160px; border-radius: 12px; } .casino-list-badge { font-size: 14px; padding: 5px 14px; } .casino-list-info { align-items: center; text-align: center; } .casino-list-bonus { margin: 16px 0; min-width: 0; width: 100%; } .casino-list-actions { flex-direction: row; gap: 10px; width: 100%; justify-content: center; } } @media (max-width: 600px) { .casino-list-item { padding: 10px 2px; gap: 8px; } .casino-list-logo { width: 160px; height: 80px; min-width: 160px; border-radius: 12px; } .casino-list-badge { font-size: 13px; padding: 4px 10px; } .casino-list-title { font-size: 1rem; } .casino-list-bonus { font-size: 1rem; padding: 10px 8px; } .casino-list-btn { font-size: 0.95rem; padding: 10px 10px; } } /* === ПК-стили для casino-list-item: всё в одну строку через flex === */ @media (min-width: 901px) { .casino-list-item { display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 120px; padding: 20px 32px; gap: 32px; background: #fff; border-radius: 18px; box-shadow: 0 4px 32px 0 rgba(0,0,0,0.08); margin-bottom: 24px; } .casino-list-logo-badge-row { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0; min-width: 120px; } .casino-list-logo { width: 160px; height: 80px; min-width: 160px; border-radius: 12px; margin: 0; } .casino-list-badge { margin: 0; font-size: 14px; padding: 4px 14px; white-space: nowrap; } .casino-list-info { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; text-align: left; gap: 6px; min-width: 180px; max-width: 340px; } .casino-list-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; } .casino-list-desc { font-size: 1rem; color: #6b7280; margin-bottom: 0; } .casino-list-bonus { min-width: 160px; width: 160px; padding: 12px 0; margin: 0 16px; border-radius: 10px; font-size: 1.1rem; align-items: center; justify-content: center; background: #181c2b; display: flex; flex-direction: column; } .casino-list-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: center; min-width: 140px; } .casino-list-btn { width: 100%; min-width: 120px; justify-content: center; } } /* === ПК-стили для casino-list-inner: всё в одну строку через flex === */ @media (min-width: 901px) { .casino-list-inner { display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 120px; padding: 20px 32px; gap: 32px; background: #fff; border-radius: 18px; box-shadow: 0 4px 32px 0 rgba(0,0,0,0.08); margin-bottom: 24px; } .casino-list-logo-badge-row { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0; min-width: 120px; } .casino-list-logo { width: 160px; height: 80px; min-width: 160px; border-radius: 12px; margin: 0; } .casino-list-badge { margin: 0; font-size: 14px; padding: 4px 14px; white-space: nowrap; } .casino-list-info { flex: 1 1 0%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; min-width: 0; } .casino-list-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; } .casino-list-desc { font-size: 1rem; color: #6b7280; margin-bottom: 0; } .casino-list-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: center; min-width: 160px; margin-left: auto; flex-shrink: 0; } .casino-list-btn { width: 100%; min-width: 120px; justify-content: center; } } @media (min-width: 901px) { .casino-list-item { padding: 0; background: none; box-shadow: none; margin-bottom: 32px; } .casino-list-inner { display: flex !important; flex-direction: row; align-items: stretch; justify-content: flex-start; width: 100%; min-height: 140px; padding: 32px 40px; gap: 32px; background: #fff; border-radius: 18px; box-shadow: 0 4px 32px 0 rgba(0,0,0,0.08); margin-bottom: 0; } .casino-list-logo-badge-row { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0; min-width: 120px; } .casino-list-logo { width: 160px; height: 80px; min-width: 160px; border-radius: 12px; margin: 0; } .casino-list-badge { margin: 0; font-size: 14px; padding: 4px 14px; white-space: nowrap; } .casino-list-info { flex: 1 1 0%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; min-width: 0; justify-content: center; } .casino-list-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 2px; } .casino-list-desc { font-size: 1rem; color: #6b7280; margin-bottom: 0; } .casino-list-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: center; min-width: 180px; margin-left: auto; flex-shrink: 0; } .casino-list-btn { width: 100%; min-width: 120px; justify-content: center; } } /*AUTHOR*/ .author-block { grid-gap: 30px; border: 1px solid #d8d8d8; border-radius: 20px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, .078); display: grid; grid-template-columns: max-content 1fr; margin-bottom: 32px; padding: 32px } @media (max-width:768px) { .author-block { grid-gap: 20px; grid-template-columns: 1fr; padding: 20px 16px } } .author-block .author-block__photo img { border-radius: 50%; height: 168px; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; width: 168px } .author-block .author-block__top-grid { grid-gap: 20px; display: grid; grid-template-columns: 1fr max-content; margin-bottom: 20px } @media (max-width:768px) { .author-block .author-block__top-grid { grid-gap: 20px; grid-template-columns: 1fr } } .author-block .author-block__line { color: #828282; font-size: 18px } .author-block .author-block__name { font-size: 24px; font-weight: 700 } .author-block .author-block__socials { display: flex; gap: 10px } .author-block .author-block__socials .author-block__socials__item { background: #f2f2f2; border-radius: 4px; display: inline-block; height: 32px; overflow: hidden; width: 32px } .author-block .author-block__socials .author-block__socials__item:hover { opacity: .86 } /* Collapsible TOC */ .toc { margin: 20px 0; } .toc-block { border: 1px solid #ddd; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .toc-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; position: relative; background: #394426; border-bottom: none; border-radius: 12px 12px 0 0; color: #fff; } .toc-header .toc-title { color: #fff !important; font-weight: 700; } .toc-header .toc-toggle { color: #fff !important; background: rgba(255,255,255,0.15); border: none; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 600; } .toc-header::after { display: none; } .toc-title { font-weight: 800; letter-spacing: 0.02em; color: #fff0f5; text-shadow: none; } .toc-toggle { background: linear-gradient(135deg, #f4729b 0%, #e8437e 80%); color: #0d0b2e; border: none; border-radius: 10px; padding: 8px 12px; font-weight: 700; box-shadow: none; transition: transform .15s ease, box-shadow .2s ease; } .toc-toggle:hover { transform: translateY(-1px); box-shadow: none; } .toc-toggle:active { transform: translateY(0); } .toc-body { display: none; } .toc-block.is-open .toc-body { display: block; } .toc-list { list-style: none; margin: 0; padding: 8px 16px 16px; } .toc-list li { margin: 6px 0; } .toc-list li.toc-h3 { padding-left: 12px; opacity: 0.9; } .toc-list a { color: #f8c8dc; text-decoration: none; } .toc-list a:hover { color: #ffffff; text-shadow: none; } @media (max-width: 768px) { .toc { margin: 16px 0; } .toc-header { padding: 10px 12px; } .toc-list { padding: 6px 12px 12px; } } .author-block .author-block__socials .author-block__socials__item i { display: inline-block; height: 32px; width: 32px } .author-block .author-block__socials .author-block__socials__item i.icon-fb { background: url(../assets/img/icon-fb.svg) no-repeat 50%; background-size: 22px } .author-block .author-block__socials .author-block__socials__item i.icon-tw { background: url(../assets/img/icon-tw.svg) no-repeat 50%; background-size: 22px } .author-block .author-block__socials .author-block__socials__item i.icon-email { background: url(../assets/img/icon-email.svg) no-repeat 50%; background-size: 22px } .author-block .author-block__text { font-size: 18px } .author-block .author-block__text p:not(:last-child) { margin-bottom: 20px } .author-block__img { display: block; margin: 0 auto; border-radius: 50% !important; object-fit: cover; object-position: center; width: 120px; height: 120px; } /* === Dark Theme Overrides === */ :root { --bg-color: #180221; --surface-color: rgba(0, 0, 0, 0.4); --text-color: #e6e6e6; --muted-text: #b6b6b6; --link-color: #f4729b; --link-hover: #f4729b; --border-color: #222; } body { background-color: var(--bg-color); color: var(--text-color); } h1, h2, h3, h4, h5, h6 { color: var(--text-color); } p, li, dd, dt, blockquote, small { color: var(--text-color); } a { color: var(--link-color); } a:hover { color: var(--link-hover); } .header, .footer { background: transparent; color: var(--text-color); } .header a, .footer a { color: var(--link-color); } .header a:hover, .footer a:hover { color: var(--link-hover); } .nav__list a { color: var(--text-color); font-weight: 700;} .nav__list a:hover { color: var(--link-hover);} .container, .content, .box, .widget, .card, .author-block { border-color: var(--border-color); } .table-contents { background: #111; border-color: #222; } input, textarea, select { background-color: #111; color: #eee; border: 1px solid #333; } button, .btn { background-color: #171717; color: #eee; border: 1px solid #333; } button:hover, .btn:hover { background-color: #222; } /* === Header Fix === */ .header, .header__inner, .header__content { background-color: #394426 !important; color: #fff !important; } .header_open .header__content, .header_open .header__inner { background-color: #394426 !important; } .header__content { box-shadow: none; } .nav__link, .subnav__link { color: var(--text-color); } .nav__link:hover, .subnav__link:hover { color: var(--link-hover); } .nav__link_accent { background-color: transparent; color: var(--link-color); } /* === Author Block Tweaks === */ .author-block { background-color: #1b1464; border: 1px solid #2a2a2e; } .author-block .author-block__line { color: var(--muted-text); } .author-block .author-block__socials .author-block__socials__item { background: #242428; } .author-block .author-block__socials .author-block__socials__item i { filter: brightness(0.9); } /* === Casino List (Inner) Dark === */ .casino-list-inner { background: #1b1464 !important; border: 1px solid #2a2a2e; color: var(--text-color); } /* === Cyberpunk Lists === */ .post-entry ul, .content-text ul, .wp-block-list ul, .entry-content ul { list-style: none; padding-left: 0; } .post-entry ul li, .content-text ul li, .wp-block-list li, .entry-content ul li { position: relative; padding-left: 24px; margin-bottom: 10px; } .post-entry ul li::before, .content-text ul li::before, .wp-block-list li::before, .entry-content ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(90deg, var(--cyber-cyan, #f4729b), var(--cyber-magenta, #e8437e)); box-shadow: none; } .post-entry ol, .content-text ol, .entry-content ol { counter-reset: cyber-counter; padding-left: 0; } .post-entry ol li, .content-text ol li, .entry-content ol li { position: relative; padding-left: 32px; margin-bottom: 10px; } .post-entry ol li::before, .content-text ol li::before, .entry-content ol li::before { counter-increment: cyber-counter; content: counter(cyber-counter); position: absolute; left: 0; top: 0.15em; min-width: 22px; height: 22px; border-radius: 8px; text-align: center; line-height: 20px; color: #fff; background: linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(90deg, var(--cyber-cyan, #f4729b), var(--cyber-magenta, #e8437e)) border-box; border: 1px solid transparent; box-shadow: none; } .post-entry ul li:hover, .content-text ul li:hover, .wp-block-list li:hover, .entry-content ul li:hover, .post-entry ol li:hover, .content-text ol li:hover, .entry-content ol li:hover { filter: brightness(1.02); } .casino-list-desc { color: var(--muted-text); } /* === FAQ Items Dark === */ .faq-block .faq-block--items .faq-block--items__item .faq-block--items__item--header { background: #1b1464; border: 1px solid #2a2a2e; color: var(--text-color); } .faq-block .faq-block--items .faq-block--items__item.-toggle .faq-block--items__item--header { background: #222226; color: #fff; } .faq-block .faq-block--items .faq-block--items__item .faq-block--items__item--content { background: #1b1464; color: var(--text-color); } .faq-block .faq-block--items .faq-block--items__item .title-faq:after { background: url(../img/icon-arrow-b.svg) no-repeat 50%, linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta)) border-box; background-size: 14px, 100% 100%, 100% 100%; border: 2px solid transparent; border-radius: 8px; box-shadow: none; content: ""; height: 42px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(90deg); width: 42px; filter: invert(1) brightness(1.2) saturate(1.2); } /* === Casino List Block: Enhanced Dark Styling === */ .casino-list-block { position: relative; gap: 24px; padding: 8px 0; } .casino-list-block::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; background: linear-gradient(90deg, rgba(143,211,255,0), rgba(143,211,255,0.6), rgba(255,34,80,0.6), rgba(255,34,80,0)); border-radius: 2px; pointer-events: none; } .casino-list-block::after { content: ""; position: absolute; right: -10%; top: -5%; width: 40%; height: 40%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,34,80,0.12) 0%, rgba(255,34,80,0) 60%); filter: blur(6px); pointer-events: none; } /* Gradient border and subtle glow for items */ .casino-list-item, .casino-list-inner { background: linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(135deg, rgba(143,211,255,0.5), rgba(255,34,80,0.5)) border-box !important; border: 1px solid transparent; color: var(--text-color); box-shadow: 0 8px 40px rgba(0,0,0,0.35); } .casino-list-item:hover, .casino-list-inner:hover { transform: translateY(-2px); box-shadow: 0 12px 48px rgba(0,0,0,0.45); } /* Decorative light wash behind each item */ .casino-list-item::before, .casino-list-inner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(800px 800px at 10% 50%, rgba(255,34,80,0.12) 0%, rgba(255,34,80,0) 50%), radial-gradient(800px 800px at 90% 50%, rgba(143,211,255,0.12) 0%, rgba(143,211,255,0) 50%); z-index: -1; } /* Text tones inside items */ .casino-list-title { color: var(--text-color); } .casino-list-desc { color: var(--muted-text); } .casino-list-badge { box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; } /* === Cyberpunk Header + Hero Button === */ :root { --cyber-cyan: #f4729b; --cyber-magenta: #e8437e; --cyber-violet: #1b1464; --cyber-amber: #ffcc00; } /* Header styling */ .header, .header__inner, .header__content { background: #394426 !important; color: #fff !important; border-bottom: none; } .header::after { display: none; } .nav__link, .subnav__link { color: var(--text-color); text-transform: uppercase; letter-spacing: .02em; } .nav, .nav__list, .subnav, .header__content { background: transparent !important; } .nav__link:hover, .subnav__link:hover { color: transparent; background-image: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta)); -webkit-background-clip: text; background-clip: text; text-shadow: none; } .nav__link_accent { color: transparent; background-image: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta)); -webkit-background-clip: text; background-clip: text; } .hamburger { background: linear-gradient(135deg, rgba(232,67,126,.18), rgba(244,114,155,.18)); color: #fff; box-shadow: none; border: 1px solid rgba(232,67,126,.35); } /* === Cyberpunk Tables === */ .wp-block-table, .wp-block-table table, table:not(.hero__overview-table) { background: linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta)) border-box; border: 1px solid transparent; border-radius: 8px; color: var(--text-color); box-shadow: none; } .wp-block-table th, .wp-block-table td, table:not(.hero__overview-table) th, table:not(.hero__overview-table) td { border: 1px solid rgba(232,67,126,.15); background-color: rgba(18,19,26,.6); } table:not(.hero__overview-table) th { background-image: linear-gradient(135deg, rgba(232,67,126,.12), rgba(244,114,155,.12)); color: #fff; } table:not(.hero__overview-table) tr:hover td { background-color: rgba(18,19,26,.82); } .table-contents { background: linear-gradient(#1b1464, #1b1464) padding-box, linear-gradient(90deg, var(--cyber-cyan), var(--cyber-magenta)) border-box; border: 1px solid transparent; border-radius: 8px; color: var(--text-color); } /* === CTA Buttons === */ .cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 8px; text-decoration: none !important; font-weight: 700; letter-spacing: .2px; color: #fff !important; background: #394426; border: none; transition: transform .15s ease, background .2s ease; } .cta-btn:hover { transform: translateY(-1px); background: #4a5a30; } .cta-btn:active { transform: translateY(0); } .cta-btn--primary { background: #f5c518; color: #000 !important; } .cta-btn--primary:hover { background: #ffd234; color: #000 !important; } .cta-btn--secondary { background: #394426; color: #fff !important; } .cta-btn--secondary:hover { background: #4a5a30; } .cta-btn--outline { background: transparent; border: 2px solid #394426; color: #394426 !important; } .cta-btn--outline:hover { background: #394426; color: #fff !important; } /* Layout for multiple buttons */ .cta-btns { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0; } @media (min-width: 768px) { .cta-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cta-btns .cta-btn { width: 100%; } /* Fallback: inline placement without wrapper */ .entry-content .cta-btn { display: inline-flex; margin-right: 12px; margin-bottom: 12px; } /* CTA Buttons: WordPress paragraph fallback */ .entry-content .cta-btns p { margin: 0; display: contents; } .entry-content .cta-btns br { display: none; } .cta-btns > p > .cta-btn { width: 100%; } @media (min-width: 768px) { .entry-content .cta-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================== Cyberpunk Cookie Banner ===================== */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; display: none; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: #394426; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.2); color: #fff; } .cookie-banner.is-visible { display: flex; } .cookie-banner__content { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; } .cookie-banner__text { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.85); } .cookie-banner__link { color: #f5c518; text-decoration: underline; text-underline-offset: 3px; transition: color .25s ease; } .cookie-banner__link:hover { color: #ffd234; } .cookie-banner__btn { flex: 0 0 auto; min-width: 90px; padding: 7px 14px; font-weight: 700; font-size: 13px; color: #000; background: #f5c518; border: none; border-radius: 6px; box-shadow: none; cursor: pointer; transition: transform .2s ease, background .2s ease; } .cookie-banner__btn:hover { transform: translateY(-1px); box-shadow: none; filter: brightness(1.05); } .cookie-banner__btn:active { transform: translateY(0); } .cookie-banner__glow { display: none; } @media (min-width: 768px) { .cookie-banner { left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); max-width: 720px; } .cookie-banner__content { flex-direction: row; align-items: center; gap: 12px; } .cookie-banner__text { flex: 1 1 auto; } } /* ===================== Footer badges (18+, RGF, BeGambleAware) ===================== */ .footer__badges { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px auto 0; } .footer-badge { height: 28px; width: auto; display: block; filter: grayscale(100%) brightness(0.8); opacity: 0.9; } @media (min-width: 768px) { .footer__badges { gap: 80px; } .footer-badge { height: 40px; } } .footer-badge__link { display: inline-flex; align-items: center; } /* ===================== 404 page styling and rabbit animation ===================== */ .error-404 .page-header { text-align: center; } .error-404 .page-title { margin-bottom: 16px; } .error-404 .btn { display: inline-block; margin-top: 16px; padding: 0; background: transparent; border: none; border-radius: 0; } .error-404 .btn .btn__label { display: inline-block; padding: 12px 24px; background-image: linear-gradient(to bottom, #f4729b 37%, #e8437e 98%); color: #fff; border: none; border-radius: 8px; text-decoration: none; box-shadow: none; } .error-404 .btn .btn__label:hover { filter: brightness(1.06); } .error-404 .rabbit-row { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; line-height: 1; margin: 10px 0 4px; } .error-404 .rabbit-row .rabbit { display: inline-block; animation: rabbit-hop 1.2s ease-in-out infinite; } .error-404 .rabbit-row .rabbit:nth-child(2) { animation-delay: 0.2s; } .error-404 .rabbit-row .rabbit:nth-child(3) { animation-delay: 0.4s; } @keyframes rabbit-hop { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-6px) scale(1.05); } 50% { transform: translateY(0) scale(1); } 75% { transform: translateY(3px) scale(0.98); } 100% { transform: translateY(0) scale(1); } } /* === Reviews Block (Product Reviews) === */ .reviews-block { display: flex; flex-direction: column; gap: 24px; } .reviews-block__title { font-size: 1.6rem; font-weight: 700; margin-bottom: 4px; } .reviews-block__items { display: flex; flex-direction: column; gap: 18px; } .review-item { display: flex; flex-direction: row; align-items: stretch; background: #fff; border-radius: 18px; box-shadow: 0 4px 32px 0 rgba(0,0,0,0.08); padding: 24px 28px; gap: 24px; } .review-item__content { flex: 1 1 0%; } .review-item__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .review-item__title { font-size: 1.3rem; font-weight: 700; margin: 0; } .review-item__date { color: #6b7280; font-size: 0.95rem; margin-bottom: 8px; } .review-item__body { color: #111827; font-size: 1rem; } .review-item__author { margin-top: 10px; font-weight: 700; } .review-item__stars .stars { color: #f59e0b; /* amber */ font-size: 1.1rem; letter-spacing: 2px; } .review-item__image { width: 220px; max-width: 260px; min-width: 160px; display: flex; align-items: center; justify-content: center; } .review-item__image img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .review-item__title { color: #e3e7ee; } .review-item__date { color: #9aa0a6; } .review-item__body { color: #c9d1d9; } .review-item__stars .stars { color: #ffd36b; text-shadow: 0 0 6px rgba(255,211,107,0.6); } @media (max-width: 900px) { .review-item { flex-direction: column; } .review-item__image { width: 100%; max-width: none; margin-top: 12px; } } /* === Breadcrumbs (accessible + unobtrusive) === */ .breadcrumbs { margin: 6px auto 12px auto; max-width: 1200px; padding: 0 16px; } .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #9aa0a6; } .breadcrumbs__item { display: inline-flex; align-items: center; } .breadcrumbs__link { color: #9aa0a6; text-decoration: none; } .breadcrumbs__link:hover { color: #c0c6cc; } .breadcrumbs__item::after { content: "/"; margin: 0 6px; color: #565b65; } .breadcrumbs__item:last-child::after { content: none; } .breadcrumbs__current { color: #c0c6cc; } /* === QAPage styles === */ .qa-page { margin: 24px 0; padding: 16px; background: linear-gradient(180deg,#0d0b2e 0%,#0d0b2e 100%); border: 1px solid rgba(232,67,126,0.15); border-radius: 12px; } .qa-page__title { color: #e3e7ee; margin: 0 0 12px 0; } .qa-page__list { margin: 0; } .qa-page__item { padding: 12px; border-radius: 10px; background: rgba(10,14,22,0.6); box-shadow: none; } .qa-page__item + .qa-page__item { margin-top: 10px; } .qa-page__q { color: #f4729b; font-weight: 600; } .qa-page__a { color: #c9d1d9; } /* === Reviews block: dark cyberpunk === */ .reviews-block__items { display: grid; grid-template-columns: 1fr; gap: 16px; background: radial-gradient(1200px 300px at 10% -20%, rgba(255,0,120,0.12) 0%, transparent 60%), radial-gradient(1200px 300px at 90% -20%, rgba(0,255,255,0.12) 0%, transparent 60%), #0d0b2e; padding: 20px; border-radius: 16px; border: 1px solid rgba(0,255,255,0.15); } .reviews-block__item { background: linear-gradient(180deg, rgba(19,25,35,0.85) 0%, rgba(14,20,30,0.85) 100%); border-radius: 14px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,255,255,0.08) inset; position: relative; } .review-item { background: linear-gradient(180deg, rgba(19,25,35,0.85) 0%, rgba(14,20,30,0.85) 100%); border-radius: 14px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,255,255,0.08) inset; position: relative; } .reviews-block__item::before { content: ""; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none; background: linear-gradient(90deg, rgba(0,255,255,0.35), rgba(255,0,150,0.35)); opacity: 0.25; mask: linear-gradient(#000, transparent); } .review-item::before { content: ""; position: absolute; inset: -1px; border-radius: 14px; pointer-events: none; background: linear-gradient(90deg, rgba(0,255,255,0.35), rgba(255,0,150,0.35)); opacity: 0.25; mask: linear-gradient(#000, transparent); } .reviews-block__author { color: #e3e7ee; font-weight: 600; } .reviews-block__date { color: #9aa0a6; font-size: 12px; } .reviews-block__rating { color: #ffd36b; } .reviews-block__text { color: #c9d1d9; } .reviews-block__thumb img { border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); } @media (min-width: 768px) { .reviews-block__items { grid-template-columns: repeat(1, 1fr); } } @media (min-width: 1024px) { .reviews-block__items { grid-template-columns: repeat(1, 1fr); } } /* ===================== Screenshots (dark cyber) ===================== */ .screenshots { margin: 3rem 0; padding: 1.25rem 1.25rem 1.5rem; background: #f5f5f0; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .screenshots__title { margin: 0 0 1rem; font-size: 1.8rem; line-height: 1.25; color: #222 !important; border-left: 4px solid #394426; padding-left: 0.75rem; text-shadow: none; } .screenshots__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1200px) { .screenshots__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 840px) { .screenshots__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .screenshots__grid { grid-template-columns: 1fr; } } .screenshots__item { border: 1px solid #ddd; border-radius: 12px; background: #fff; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .screenshots__thumb { position: relative; } .screenshots__thumb::after { content: ""; position: absolute; inset: 0; box-shadow: none; pointer-events: none; } .screenshots__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(1.05) contrast(1.02); transition: transform 0.2s ease; } .screenshots__item:hover { border-color: #394426; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .screenshots__item:hover .screenshots__thumb img { transform: scale(1.015); } .screenshots__caption { padding: 12px 12px 14px; border-top: 1px solid #eee; } .screenshots__name { margin: 0; font-size: 1rem; color: #333 !important; letter-spacing: 0.2px; } /* === Lightbox Modal (dark cyber style) === */ .lightbox-open { overflow: hidden; } .lightbox-modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 1000; } .lightbox-modal.is-open { display: block; } .lightbox-modal__overlay { position: absolute; inset: 0; background: rgba(8,10,15,0.92); backdrop-filter: blur(2px); } .lightbox-modal__content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 96vw; max-height: 92vh; padding: 12px; background: linear-gradient(#0d0b2e, #0d0b2e) padding-box, linear-gradient(135deg, rgba(143,211,255,0.45), rgba(244,114,155,0.45)) border-box; border: 2px solid transparent; border-radius: 12px; box-shadow: none; display: flex; flex-direction: column; align-items: center; } .lightbox-modal__image { max-width: 100%; max-height: 80vh; border-radius: 10px; border: 1px solid rgba(143,211,255,0.35); box-shadow: 0 12px 30px rgba(0,0,0,0.45); } .lightbox-modal__caption { margin-top: 8px; color: #f8c8dc; font-size: 0.95rem; text-align: center; } .lightbox-modal__close { position: absolute; right: 10px; top: 6px; background: transparent; color: #f8c8dc; border: none; font-size: 28px; line-height: 1; cursor: pointer; filter: drop-shadow(0 0 6px rgba(143,211,255,0.6)); } .lightbox-modal__close:hover { color: #e8437e; } /* Mobile: fullscreen lightbox */ @media (max-width: 640px) { .lightbox-modal__content { left: 0; right: 0; top: 0; bottom: 0; transform: none; width: 100vw; height: 100vh; max-width: none; max-height: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .lightbox-modal__image { width: 100vw; height: 100vh; max-width: none; max-height: none; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; } .lightbox-modal__caption { display: none; } .lightbox-modal__close { top: 12px; right: 12px; font-size: 32px; } } /* === Sticky Banner === */ .sticky-banner { position: fixed; top: 0; left: 0; right: 0; bottom: auto; z-index: 10000; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #394426; border-bottom: 1px solid rgba(255,255,255,0.1); border-top: none; transform: translateY(-100%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; } .sticky-banner[aria-hidden="false"] { transform: translateY(0); opacity: 1; } .sticky-banner[aria-hidden="false"] ~ .header { position: sticky; top: auto; } .sticky-banner__logo { width: auto; max-width: 120px; height: 44px; object-fit: contain; flex-shrink: 0; border-radius: 8px; } .sticky-banner__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sticky-banner__title { font-size: 14px; font-weight: 600; color: #fff; } .sticky-banner__text { font-size: 18px; font-weight: 700; color: #fff; } .sticky-banner__btn { flex-shrink: 0; padding: 10px 28px; background: #f5c518; color: #000 !important; font-size: 16px; font-weight: 700; border-radius: 6px; text-decoration: none !important; white-space: nowrap; transition: background 0.2s ease; } .sticky-banner__btn:hover { background: #ffd234; } .sticky-banner__close { flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px; transition: color 0.2s; } .sticky-banner__close:hover { color: #fff; } @media (max-width: 600px) { .sticky-banner { gap: 10px; padding: 10px 12px; } .sticky-banner__logo { max-width: 80px; height: 36px; } .sticky-banner__title { font-size: 12px; } .sticky-banner__text { font-size: 14px; } .sticky-banner__btn { padding: 10px 16px; font-size: 13px; } } /* === Table updated date label === */ .table-updated-date { font-size: 11px; color: #999 !important; font-style: italic; margin: 4px 0 16px; text-align: right; }