:root { --bg: #dcedf1; /* page background base — matches the striped cyan/grey banding */ --bar: #23c4e8; /* bright neon-cyan accent, matching the logo stroke — header / sidebar / active panels */ --bar-dark: #159dbd; /* pressed / hover state of the accent cyan */ --bar-text: #ffffff; /* text/icons sitting on top of --bar */ --card: #ffffff; /* card & panel surfaces — pure white, matching the reference */ --card-alt: #eef7f9; /* secondary card surface */ --line: #d7e8ec; /* hairline borders on light surfaces */ --gold: #f0a629; /* warm amber — hover glows, ratings, premium/featured accents */ --pink: #ef3f5c; /* CTA / highlight accent */ --teal: #29b7ae; /* cool accent reserved for "new" / "free" style badges */ --text: #101010; /* primary text — near-black, matching the reference headings/nav */ --muted: #4a4a4a; /* secondary / caption text — neutral dark grey, matching the reference body copy */ --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --link: #17bcdf; /* bright cyan link color, matching the logo */ } /* Light theme — toggled via a class on , set by the switch in the header */ html.theme-light { --bg: #e6f2f4; --bar: #7fd8e4; --bar-dark: #45b9cb; --bar-text: #123842; --card: #ffffff; --card-alt: #f2fafb; --line: #cfe4e8; --gold: #ec9c1f; /* same warm-amber role, pulled back toward the more saturated original so it still reads on the busier mid-tone bg */ --pink: #ea3f5e; --teal: #24aca4; --text: #16262d; --muted: #587680; --link: #1687a0; } html.theme-light .single_cat_img img, html.theme-light .top_block { box-shadow: 0 1px 0 #d7e8ec; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, address, big, cite, code, del, dfn, em, img, ins, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, main, nav, output, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1; } ol, ul, nav { list-style: none; } * { box-sizing: border-box; } img, video, canvas { max-width: 100%; } img { vertical-align: bottom; } a { text-decoration: none; color: #17bcdf; } table { border-collapse: collapse; border-spacing: 0; } a:hover { text-decoration: underline; color: #17bcdf; } html, body { height: 100%; width: 100%; } iframe { width: 100%; } a, button, a:hover, button:hover { cursor: pointer; } button, button:focus, button:active { outline: none; border: none; } blockquote { margin: 0; } body { font-family: 'Poppins', sans-serif; font-style: normal; font-weight: normal; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 100%), repeating-linear-gradient(0deg, #afdfe8 0px, #afdfe8 24px, #92b8c0 24px, #92b8c0 48px); background-attachment: fixed; color: #101010; letter-spacing: normal; font-size: 14px; -webkit-font-smoothing: antialiased; } html.theme-light body { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 100%), repeating-linear-gradient(0deg, #bfe8ee 0px, #bfe8ee 24px, #a6c7cd 24px, #a6c7cd 48px); background-attachment: fixed; } h1, .h1, .page_title h2{ font-family: 'Baloo 2', 'Poppins', sans-serif; font-size: clamp(30px, 4vw, 50px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: #101010; } h2, .h2 { font-family: 'Baloo 2', 'Poppins', sans-serif; font-size: clamp(20px, 2.2vw, 23px); font-weight: 600; line-height: 21px; letter-spacing: -0.01em; color: #ef3f5c; margin-bottom: 25px; margin-top: 25px; } h3, .h3 { font-family: 'Baloo 2', 'Poppins', sans-serif; font-size: 16px; font-weight: 600; line-height: 18px; margin-bottom: 20px; } h4, .h4 { font-family: 'Baloo 2', 'Poppins', sans-serif; font-size: 14px; font-weight: 600; line-height: 16px; margin-bottom: 20px; } p { font-size: 15px; font-weight: normal; line-height: 20px; margin: 0 0 12px 0; } div p:last-child { margin-bottom: 0; } ul, ol { list-style: none; padding: 0; margin: 0; } img { max-width: 100%; height: auto; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-uppercase { text-transform: uppercase; } .sidebar_title { font-family: 'Baloo 2', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; white-space: nowrap; margin: 24px 10px 0 106px; padding: 14px 20px 14px 0; position: relative; } .menu_top ul#menu-main-menu { display: flex; flex-direction: column; align-items: start; margin-left: 65px; } .menu_top ul#menu-main-menu li{ margin: 10px 0; width: 100%; padding: 20px 10px; border-radius: 12px; transition: background .18s ease, transform .18s ease; } .menu_top .all_games a:before { left: -49px; bottom: -4px; } .menu_top .recom_games a:before { left: -49px; bottom: -4px; } .menu_top .best_games a:before { left: -49px; bottom: -3px; } .menu_top .hot_games a:before { left: -49px; bottom: -4px; } .menu_top .simulation_games a:before { left: -49px; bottom: -4px; } .menu_top .adventure_games a:before { left: -49px; bottom: -4px; } .menu_top .indie_games a:before { left: -49px; bottom: -4px; } .menu_top .horror_games a:before { left: -49px; bottom: -4px; } .menu_top .boy_games a:before { left: -49px; bottom: -4px; } .menu_top .girl_games a:before { left: -49px; bottom: -4px; } .menu_top .audio a:before { left: -49px; bottom: -4px; } .menu_top .party a:before { left: -49px; bottom: -4px; } .menu_top .quiz a:before { left: -49px; bottom: -4px; } .menu_top .board a:before { left: -49px; bottom: -4px; } .menu_top .word a:before { left: -49px; bottom: -4px; } .menu_top a{ font-family: 'Baloo 2', sans-serif; font-weight: 600; color: #101010; position: relative; text-decoration: none; } .menu_top { overflow: hidden; width: 280px; margin-top: 8px; margin-left: 10px; background: rgba(0, 0, 0, .05); border-radius: 20px; backdrop-filter: blur(6px); } html.theme-light .menu_top { background: rgba(0, 0, 0, .14); } .menu_top ul#menu-main-menu li:hover{ background: rgba(0, 0, 0, .08); border-radius: 12px; transform: translateX(2px); } .single_cat_img{ width: 64px; } .single_cat_img img { width: 64px; border-radius: 50%; border: solid 2px #101010; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .all_cat{ display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; width: 85px; margin-left: 0; overflow: visible; align-content: flex-start; flex: 0 0 auto; height: auto; padding-bottom: 24px; } /* expanded (hovered) sidebar goes back to the wider multi-column grid */ @media (min-width: 681px) { .sidebar:hover .all_cat { width: 280px; margin-left: 10px; justify-content: flex-start; } } .all_cat::-webkit-scrollbar { display: none; } .single_cat{ margin: 12px; position: relative; margin: 6px 12px; } .single_cat label { position: absolute; color: #fff; text-align: center; width: 100%; opacity: 0; z-index: 100; bottom: 8px; background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); border-radius: 10px; padding: 5px 0 8px; font-size: 12px; cursor:pointer; } .single_cat label:after { content: ' Games'; } .single_cat:hover label { opacity: 1; transition: 1s; } .single_cat:hover img { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; border: solid 2px #f0a629; transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 24px rgba(240, 166, 41, .35); } .header { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 14px 0; align-items: center;} .logo { position: relative; z-index: 2; } .logo img, .logo a { display: block; } .top_block { background: linear-gradient(165deg, #ffffff 0%, #eaf7fa 55%, #d8eef2 100%); margin-bottom: 40px; padding-left: 116px; border-radius: 0 0 0px 75px; box-shadow: 0 10px 26px rgba(23, 40, 46, .14); padding-top: 4px; padding-bottom: 4px; position: relative; z-index: 50; } html.theme-light .top_block { background: linear-gradient(165deg, #7fd8e4 0%, #35b0c4 45%, #135b6d 100%); box-shadow: 0 1px 0 #d7e8ec, 0 16px 34px rgba(22, 38, 45, .10); } .btn-search { padding: 0 28px; height: 52px; position: absolute; right: 4px; align-items: center; background: linear-gradient(90deg, #ef3f5c 0%, #23c4e8 100%); box-shadow: 0 8px 24px rgba(239, 63, 92, .35); border-radius: 999px; color: #ffffff; font-weight: 600; font-size: 14px; outline: 0; transition: transform .18s ease, box-shadow .18s ease; } button.btn-search:hover { background: linear-gradient(90deg, #ef3f5c 0%, #23c4e8 100%); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(239, 63, 92, .4); transition: 1s; } .mobil_menu { display:none; background: #f0a629; padding: 10px; border-radius: 50%; width: 36px; height: 36px; position: fixed; z-index: 10000; top: 94px; } .mobil_menu i { color: #2b1a00; font-size: 18px; } .menu { display: flex; justify-content: center; align-items: center; } .menu i{ display: none; } .menu ul { display: flex; } .menu ul li { position: relative; display: flex; justify-content: center; align-items: center; padding: 0 25px; } .menu ul li a { color: #101010; text-align: center; text-decoration: none; } .menu ul li a span { font-size: 16px; color: #4a4a4a; line-height: 16px; font-weight: 400;} .menu ul li:hover a span{ color: #ef3f5c; } .search input { font-size: 12px; line-height: 14px; border: 1px solid #d7e8ec; outline: 0; align-items: flex-start; padding: 14px 16px; gap: 10px; width: 276px; height: 43px; background: #f2fafb; color: #101010; border-radius: 60px; transition: box-shadow .2s ease, border-color .2s ease; } .search input::placeholder { color: #7a8a90; } .search input:focus { border-color: #f0a629; box-shadow: 0 0 0 3px rgba(240, 166, 41, .18); } html.theme-light .search input { background: #f2fafb; border: 1px solid #d7e8ec; color: #16262d; } html.theme-light .search input::placeholder { color: #4a4a4a; } .header-right { display: flex; align-items: center; } .theme-toggle { display: none !important; } .main { margin-bottom: 30px; padding: 30px 0px 30px 40px; } /* Front-page template doesn't wrap content in .main — it uses body > .page > .container instead (that .container is reused deeper in the tree too, so this is scoped to only the outer/top-level one, the sibling of .top_block and .sidebar). box-sizing: border-box is required here so the extra padding shrinks the inner content instead of growing the block's total width (which caused the horizontal overflow / everything-shifted-right bug). */ body > .page > .container { padding-left: 40px; box-sizing: border-box; } .home .main{ margin-top: 367px; } .main.category, .main.single { padding-top: 0px; } .main.category .popular_cat, h2.popular_cat { margin-top: 0px !important; } .content { max-width: 812px; width: 100%; } .sidebar { position: fixed; /* top / bottom are recalculated live by sidebar-offset.js so the sidebar always leaves a small gap below the header and above the footer, even while it stays fixed on screen during scroll. These values are just the fallback before JS runs. */ top: 110px; bottom: 90px; left: 0; z-index: 100; width: 85px; background: linear-gradient(165deg, #ffffff 0%, #eaf7fa 55%, #d8eef2 100%); border-radius: 0 75px 75px 0; box-shadow: 0 10px 26px rgba(23, 40, 46, .14); overflow: hidden; display: flex; flex-direction: column; -webkit-transition: width 0.2s linear; transition: width 0.2s linear; -o-transition: width 0.2s linear; color: #101010; } .sidebar:hover { width: 300px; } @media (min-width: 681px) { /* Single scroll container for the whole sidebar (title + top menu + categories), instead of the old setup where only .all_cat had its own overflow-y:auto and .menu_top/.sidebar itself didn't scroll at all. That split is what caused the "scroll only works on the game icons, not the categories" bug once more categories were added and the combined content became taller than the sidebar. overscroll-behavior keeps the wheel scroll from "leaking" into the page once the sidebar's own scroll hits its top/bottom edge. */ .sidebar { overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge/IE */ } .sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari/Opera */ .sidebar:hover { overflow-y: auto; } } .sidebar .menu_top { flex: 0 0 auto; } html.theme-light .sidebar { background: linear-gradient(165deg, #7fd8e4 0%, #35b0c4 45%, #135b6d 100%); box-shadow: 0 16px 34px rgba(22, 38, 45, .10); } .rating { font-size: 0px; } .popular-game { width: 255px; background: #ef3f5c; border-radius: 20px; padding: 12px 20px 25px; position: relative; z-index: 16; } .popular-game__title { font-size: 18px; line-height: 21px; color: #ffffff; padding: 10px; padding-bottom: 15px; text-align: center; font-weight: 700; } .popular-game__title span{ font-size: 30px; line-height: 30px; font-weight: 600; } .popular-game__list { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: -5px; margin-right: -5px; } .popular-game__item { width: 65px; height: 65px; border-radius: 5px; margin: 0 5px 10px 5px; } .popular-game__item a { width: 100%; height: 100%; overflow: hidden; } .popular-game__item img { max-width: 100%; height: auto; border: 3px solid #ef3f5c; border-radius: 15px; box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.25); } .popular-game__item:hover img { border-color: #f0a629; transition: 1s; } .tooltip { position: relative; } .tooltip .box { position: absolute; font-size: 14px; line-height: 16px; color: #ffffff; background: #16262d; border-radius: 5px; top: -46px; left: 0; min-width: 156px; white-space: nowrap; text-align: center; padding: 10px 14px; z-index: 1005; } .tooltip .box:after { content: ''; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 8px solid #16262d; position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; } .breadcrumb { display: flex; align-items: center; margin-bottom: 12px;} .breadcrumb li { display: flex; align-items: center; color: #101010; } .breadcrumb li a { font-size: 16px; line-height: 18px; color: #101010; } .breadcrumb li a:hover, .breadcrumb a span:hover { text-decoration: underline; } .breadcrumb li span, .breadcrumb a span { font-size: 16px; line-height: 18px; color: #101010; } .advertising { width: 100%; display: flex; justify-content: center; align-items: center; background: #ffffff; border-radius: 15px; padding: 19px; margin-bottom: 10px; } .catalog__title.bg-pink { margin: 30px 0; } .catalog__description { margin-top: 20px; background: #ffffff; border: 1px solid #d7e8ec; border-radius: 20px; padding: 70px 20px; text-align: center; color: #4a4a4a; font-size: 18px; font-weight: 500; } .catalog__description h2 { color: #16262d; font-weight: 600; font-size: 34px; line-height: 48px; } .game { position: relative; display: flex; flex-wrap: wrap; } .game__title { width: 100%; border-radius: 5px; padding: 7px 10px 9px 10px; margin-bottom: 10px; order: 1; } .game__title h1 { font-weight: 500; font-size: 18px; line-height: 27px; text-align: center; margin: 0; text-transform: none; color: #ffffff; } .game__player { width: 100%; padding: 12px 0px; border-radius: 20px; background: #23c4e8; } .game__player__content { position: relative; min-height: 600px; margin-bottom: 10px; } .game__player__footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 32px; } .game__player__played { display: block; float: left; } .game__player__played span { font-weight: 500; font-size: 14px; line-height: 21px; color: #ffffff; } .game__player__header { background: #23c4e8; border-radius: 25px; padding: 10px 12px 0; margin: 20px; height: 70px; } .game__player .game__player__rate { float: right; margin-top: -70px; font-size: 0px; width: 28%; text-align: right; padding: 14px 10px; border-radius: 15px; background: #23c4e8; } .game__description_block { border: 1px solid #d7e8ec; box-sizing: border-box; box-shadow: 0px 5px 40px rgb(0 0 0 / 5%); border-radius: 65px; margin-top: 20px; } .game__image { width: 100%; max-width: 175px; height: auto; margin: 30px; border-radius: 25px; float: left; } .game__image img { border-radius: 25px; width: 100%; height: auto; } .game__description { width: 100%; padding: 20px; font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -0.02em; color: #4a4a4a; } .game__description h1 { text-transform: uppercase; color: #16262d; margin-bottom: 12px; font-weight: 600; font-size: 36px; line-height: 36px; margin-top: 25px;} .game__promo { width: 100%; display: flex; justify-content: center; align-items: center; /*background: #ef3f5c;*/ border-radius: 5px; padding: 19px; margin-top: 20px; margin-bottom: 20px; order: 6; } .game__similar { background: #ffffff; border: 1px solid #d7e8ec; box-sizing: border-box; border-radius: 20px; padding: 70px 0; float: left; width: 100%; } .single footer.footer { float: left; width: 100%; } .game__similar .catalog__list{ padding: 0 46px; } .comments { width: 100%; margin-top:30px; text-align: center; } .game .comments { width: 100%; background: #ffffff; border-radius: 5px; padding: 19px; } .game .banner { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; order: 2; } .block__title { font-weight: 600; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.1; color: #16262d; margin-bottom: 50px; text-align: center; } .game_body { width: 100%; text-align: center; display: flex; align-items: center; flex-direction: column; } .game-card__name a { color: #101010; font-weight: 500; font-size: 12px; line-height: 12px; } .game-card__rate .rating img { width: 9px; } .game-card { position: relative; margin: 8px auto; width: 120px; height: 120px; } .catalog__list{ margin: 0 8px; width: 140px; height: 180px; background: #ffffff; margin-bottom: 8px; border-radius: 20px; border: 1px solid #d7e8ec; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .catalog__list.no_style { background: none; border: none; box-shadow: none; } .catalog__list:hover{ border: solid 2px #ef3f5c; transform: translateY(-4px); box-shadow: 0 10px 30px rgba(35, 196, 232, .35); transition: 1s; } .catalog__list.no_style:hover{ border: none; } .catalog { display: flex; flex-wrap: wrap; justify-content: space-around; } /* Inside .games_block only: keep full rows exactly as before (they're sized to fill the row edge-to-edge so space-around has nothing extra to distribute), but left-align the last, incomplete row instead of letting it stretch/center like a full row would. Scoped to .games_block so it doesn't touch .catalog anywhere else on the site. */ .games_block .catalog { justify-content: flex-start; } .game-card:hover .game_body{ border-color: #23c4e8; box-shadow: 0px 5px 40px #d7e8ec; } .game-card__thumb { margin: 0 auto; margin-bottom: 10px; overflow: hidden; border-radius: 25px; z-index: 2; transition: transform .2s ease, box-shadow .2s ease;} .game-card__thumb img { width: 100%; height: auto; border-radius: 20px; } .game-card:hover .game-card__thumb { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(35, 196, 232, .35); } .game-card__name { font-size: 14px; line-height: 16px; margin-bottom: 5px; height: auto; word-wrap: break-word; overflow: hidden; text-align: center; width: 100%; } .game-card__name a { text-decoration: none; } .game-card__name a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .pagination-container { display: flex; justify-content: center; margin-top: 20px; margin-bottom: 30px; float: left; width: 100%;} .pagination { display: flex; flex-wrap: wrap; align-items: center; } .pagination li { position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid #d7e8ec; background: #ffffff; border-radius: 10px; width: 49px; height: 49px; margin-right: 10px; } .pagination li a { font-size: 14px; line-height: 24px; font-weight: 500; color: #101010; text-align: center; text-decoration: none; } .pagination li a:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .pagination li span { font-size: 16px; line-height: 18px; color: #fff; text-align: center; text-decoration: none; } .pagination span.current { background: linear-gradient(87.52deg, #ef3f5c -40.4%, #f0a629 130.43%) !important; width: 100%; height: 49px; border-radius: 12px; padding-top: 17px; box-shadow: 0 10px 30px rgba(35, 196, 232, .35); } .pagination li:hover { background: linear-gradient(87.52deg, #ef3f5c -40.4%, #f0a629 130.43%) !important; box-shadow: 0 10px 30px rgba(35, 196, 232, .35); } .pagination li.current a { color: #fff; } .pagination li.bv-prev, .pagination li.bv-next { background: #159dbd; } .pagination li.bv-prev a:before { content: ''; color: #23c4e8; border-right: 2px solid #23c4e8; border-bottom: 2px solid #23c4e8; position: absolute; width: 9px; height: 9px; top: 18px; left: 20px; transform: rotate(135deg); } .pagination li.bv-prev:hover a:before { color: #fff; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } .pagination li.bv-next a:before { content: ''; color: #23c4e8; border-right: 2px solid #23c4e8; border-bottom: 2px solid #23c4e8; position: absolute; width: 9px; height: 9px; top: 18px; left: 14px; transform: rotate(-45deg); } .pagination li.bv-next:hover a:before { color: #fff; border-right: 2px solid #fff; border-bottom: 2px solid #fff; } .pagination li:hover { background: #159dbd; } .pagination li:hover a { color: #fff; } .pagination li:last-child { margin-right: 0; } html.theme-light .pagination li.bv-prev:hover a:before, html.theme-light .pagination li.bv-next:hover a:before { border-right-color: #16262d; border-bottom-color: #16262d; } html.theme-light .pagination li:hover a { color: #16262d; } .seo_block { display: flex; width: 100%; align-items: center; margin-bottom: 40px; } .page_description, .seo_text { color: #4a4a4a; font-size: 16px; line-height: 160%; } .footer { display: flex; flex-wrap: wrap; justify-content: space-between; border-radius: 10px; height: 71px; margin-top: 30px; padding-bottom: 80px; align-items: center; } .footer .menu{ padding-top: 0px; } .footer .menu ul li { padding-left: 0px; margin: 0 15px; } .footer .menu a{ color: #101010; } .footer-logo { margin: 12px 0; } .footer ul#menu-main-menu a { color: #101010; position: relative; } .all_games a:before{ content: url(../img/all.png); position: absolute; left: -30px; bottom: -7px; } .recom_games a:before{ content: url(../img/recom.svg); position: absolute; left: -30px; bottom: -7px; } .best_games a:before{ content: url(../img/best.svg); position: absolute; left: -30px; bottom: -7px; } .hot_games a:before{ content: url(../img/hot.png); position: absolute; left: -30px; bottom: -7px; } .simulation_games a:before{ content: url(../img/simulation.png); position: absolute; left: -30px; bottom: -7px; } .adventure_games a:before{ content: url(../img/adventure1.png); position: absolute; left: -30px; bottom: -7px; } .indie_games a:before{ content: url(../img/indie.png); position: absolute; left: -30px; bottom: -7px; } .horror_games a:before{ content: url(../img/horror.png); position: absolute; left: -30px; bottom: -7px; } .boy_games a:before{ content: url(../img/boy.png); position: absolute; left: -30px; bottom: -7px; } .girl_games a:before{ content: url(../img/girl.png); position: absolute; left: -30px; bottom: -7px; } .audio a:before{ content: url(../img/audio.png); position: absolute; left: -30px; bottom: -7px; } .party a:before{ content: url(../img/party.png); position: absolute; left: -30px; bottom: -7px; } .quiz a:before{ content: url(../img/quiz.png); position: absolute; left: -30px; bottom: -7px; } .board a:before{ content: url(../img/board.png); position: absolute; left: -30px; bottom: -7px; } .word a:before{ content: url(../img/word.png); position: absolute; left: -30px; bottom: -7px; } .popular { width: 70%; margin-right: 30px; } .overflow { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); z-index: 1001; } .all_categorys { background: linear-gradient(165deg, #ffffff 0%, #eaf7fa 55%, #d8eef2 100%); box-shadow: 0 10px 26px rgba(23, 40, 46, .14); border-radius: 28px; text-align: center; position: relative; padding: 0 30px; z-index: 10; display: flex; margin-bottom: 90px; } #owl-carousel { padding-bottom: 30px; width: 100%; } button.owl-dot { width: 5px; height: 5px; background: #23c4e8 !important; margin: 5px; opacity: 0.5; border-radius: 50%; } button.owl-dot.active{ width: 5px; height: 5px; margin-top: 4px; border: 4px solid #f0a629 !important; opacity: 1; background: none !important; } button.owl-prev { position: absolute; left: 0px; bottom: -68px; width: 52px; height: 52px; background: #ffffff 20px center url("../img/left.svg") no-repeat !important; border-radius: 10px; font-size: 0px !important; } button.owl-next { position: absolute; right: 0px; bottom: -68px; width: 52px; height: 52px; background: #ffffff 23px center url("../img/right.svg") no-repeat !important; border-radius: 10px; font-size: 0px !important; } button.owl-prev:hover, button.owl-next:hover { background-color: #f0a629 !important; transition: 1s; } .owl-dots { position: absolute; bottom: -50px; display: flex; width: 100%; justify-content: center; flex-direction: row; } .slide_row label { opacity: 0; position: absolute; width: 100%; left: 0px; bottom: 15px; background: #23c4e85; padding: 5px; border-radius: 10px; cursor: pointer; } .slide_row:hover label{ opacity: 1; transition: 1s; } .slide_row { margin-bottom: 25px; position: relative; } .top_row img { width: 64px; border-radius: 14px; } .block_top_games { background: #ffffff; border-radius: 28px; margin-top: 35px; position: absolute; right: 35px; padding-bottom: 20px; } .block_top_games h3 { font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 700 !important; font-size: 20px !important; letter-spacing: -0.04em; text-transform: uppercase !important; color: #16262d !important; margin-left:55px; position: relative; } .block_top_games h3:before{ content: url("../img/Rating.svg"); position: absolute; left: -30px; bottom: -8px; } .top_row { display: flex; align-items: center; margin: 0 20px; padding: 0 10px; } .top_row:hover{ background: #ffffff; transition: 1s; border-radius: 20px; } .top_row a { font-weight: 500; font-size: 18px; line-height: 100%; letter-spacing: -0.03em; color: #101010; text-decoration: none; } .top_item_img { margin: 10px; } .top_name a { margin-bottom: 5px; } .top_name { display: flex; flex-direction: column; align-items: flex-start; color: #f0a629; font-size: 14px; } .cat_item { height: 350px; width: 164px; margin-top: 20px; } .cat_item:hover .cat_item_img{ border-color: #f0a629; transition: transform .2s ease, border-color .2s ease; transform: translateY(-3px); } .cat_item a { color: #fff; font-weight: 600; font-size: 16px; line-height: 25px; } .cat_item a:hover{ text-decoration: none; } .cat_item_img img{ width: 164px; border-radius: 20px; border: solid 2px transparent; } .slide_row:hover img{ border: solid 2px #f0a629; transition: 1s; } .all_categorys_footer{ background: #23c4e8; border-radius: 20px; position: relative; height: 15px; bottom: 6px; width: 92%; left: 4%; z-index: 1; } .popular_category { display: flex; justify-content: space-between; background: #ffffff; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); border-radius: 75px; padding: 30px; } .popular-game_footer{ background: #c22f48; border-radius: 20px; position: relative; height: 18px; bottom: 14px; width: 70%; left: 15%; z-index: 1; } .all_categorys h3{ font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); line-height: 1; padding-top: 30px; color: #101010; text-align: left; text-transform: uppercase; margin-bottom: 0px; } .top_games h3{ color: #16262d; font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; padding-top: 235px; } .category_item_img img { width: 100px; border-radius: 20px; border: solid 2px transparent; } .category_item_img:hover img { border: solid 2px #f0a629; transition: 1s; } h2.popular_cat, h2.all_games, h1.category_name { color: #16262d; font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); text-transform: uppercase; margin: 20px 0 30px; line-height: 1; } h1.category_name { margin-top: 80px; } h2.popular_cat span { color: #ef3f5c; } h2.all_games span { color: #ef3f5c; } .category_item { position: relative; } .category_item label { position: absolute; text-align: center; left: 0px; bottom: 10px; width: 100%; background: #ffffff; padding: 5px; border-radius: 20px; opacity: 0; cursor: pointer; } .category_item:hover label{ opacity: 1; transition: 1s; } h2.all_games{ margin-top: 85px; } .game-top__thumb{ width: 106px; height: 95px; border-radius: 25px; margin: 0px auto; position: absolute; top: -10px; left: 10px; } .game-top__thumb img { width: 106px; height: 95px; border-radius: 25px; } .game-top__body { text-align: center; background: #ffffff; border: 1px solid #d7e8ec; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); border-radius: 20px; position: relative; height: 142px; width: 126px; margin-top: 20px; padding-top: 94px; transition: transform .2s ease, box-shadow .2s ease; } .game-top .rating img{ float: left; width: 9px !important; } .game-top__body a { color: #101010; font-weight: 600; font-size: 12px; line-height: 12px; } .game-top__body a:hover{ text-decoration: none; } .game-top__body:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(35, 196, 232, .35); } .game-top .game-card__rate { float: left; width: 100%; text-align: center; margin: 10px 34px 10px; } .top_games button.owl-dot { background: #159dbd !important; } .top_games button.owl-dot.active{ border: 1.5px solid #f0a629 !important; background: transparent !important; } div#owl-carousel2 { margin-bottom: 42px; } .no_mobil { display: block; } .to_mobil, .show_content{ display: none; } .archive.category .main { margin-top: 0px; } .main.search { margin-top: 0px; } ul.list_category li { display: inline-block; margin-bottom: 10px; margin-right: 20px; background: linear-gradient(165deg, #ffffff 0%, #eaf7fa 55%, #d8eef2 100%); padding: 20px 15px 14px 15px; border-radius: 15px; font-size: 12px; font-weight: 600; position: relative; height: 50px; transition: transform .18s ease, box-shadow .18s ease; } ul.list_category li:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(35, 196, 232, .35); } ul.list_category li:hover img{ border-color: #f0a629; transition: 1s; } ul.list_category a{ color: #101010; } ul.list_category img { width: 50px; height: 50px; border-radius: 8px; position: absolute; left: 0px; top: 0px; border: 3px solid #ef3f5c; border-radius: 15px; } .container.bottom { display: block; } .game-offer h2, .game-offer h3 { margin-bottom: 20px; } .game-offer__comments { position: relative; max-width: 830px; width: 100%; background: #ffffff; padding: 30px; border-radius: 65px; margin-bottom: 30px; } .game-offer__window { background: linear-gradient(99deg, #123847 1.18%, #123847 97.4%); border-radius: 28px; width: 100%; } .game-offer__window__top { font-family: 'Bungee', sans-serif; color: #ffffff; font-weight: 700; font-size: 44px; margin-left: 0px; } .game-offer__window__frame { position: relative; min-height: 500px; margin: 14px; } .game-offer__window__frame iframe { border-radius: 20px; } .game_title { margin-bottom: 10px; } .game_title span { /*background: #ffffff;*/ padding: 0 12px; } .main__content.game-offer { display: flex; flex-direction: column; } .border-block { margin-right: 25px; width: 200px; } .game_block_with_adv { display: flex; margin-top: 50px; } .game-offer__window__bottom { display: flex; width: 96%; justify-content: space-between; background: #ffffff; border-radius: 20px; margin: 0 2% 14px; padding: 20px; } .btn-fullscreen { visibility: hidden; display: flex; justify-content: center; align-items: center; width: 370px; height: 46px; outline: 0; background: linear-gradient(90deg, #f0a629 0%, #ef3f5c 100%); box-shadow: 0 10px 30px rgba(35, 196, 232, .35); border-radius: 12px; position: relative; font-size: 20px; color: #fff; cursor: pointer; margin-top: 2px; transition: transform .18s ease, box-shadow .18s ease; } .btn-fullscreen:before{ content: url("../img/zoom.svg") ; position: absolute; left: 23px; top: 14px; } .btn-fullscreen span { font-size: 22px; line-height: 16px; font-weight: 600; text-align: center; color: #fff; } .btn-fullscreen:hover { background: linear-gradient(90deg, #f0a629 0%, #ef3f5c 100%); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(239, 63, 92, .42); } .exitfullscreen svg.icon { color: #fff; position: absolute; right: 15px; top: 15px; width: 30px; height: 30px; z-index: 20000; cursor: pointer; } .btn-play { display: none; } .game-offer__window__bottom .rating { padding: 15px; border: solid 2px #d7e8ec; border-radius: 12px; } .game-offer__window__bottom img.post-ratings-image { height: 17px; margin: 0 3px; } .game__player__share { background: #ffffff; border-radius: 12px; padding: 12px 7px 2px; } .single_adv_block { display: flex; justify-content: space-between; } .block_adv { background: #ffffff; padding: 9px 68px; border-radius: 28px; min-width: 696px; width: 100%; min-height: 390px; margin-bottom: 30px; text-align: center; } .middle_block { width: 100%; } .game-offer__content { display: flex; flex-direction: column; background: linear-gradient(360deg,#ffffff 32.94%,rgba(13,56,71,0) 100%),linear-gradient(102.93deg,#ffffff .83%,#eef7f9 98.12%); border-radius: 28px; margin-top: 50px; } .game-offer__image { display: flex; background: #ffffff; border: 2px solid #d7e8ec; box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.5); border-radius: 20px; margin: 40px 40px 20px; align-items: center; } .game-offer__image img { border-radius: 14px; width: 164px; height: 164px; margin: 20px; } .game-offer__image h1 { color: #16262d; font-weight: 700; font-size: 50px; line-height: 110%; } .list_category li { display: inline; margin-right: 20px; } .list_category ul { margin-top: 15px; } .list_category a { text-transform: uppercase; color: #101010 !important; text-decoration: none !important; } .game_description { color: #101010; padding: 20px 40px; } .game_description h2, .game_description h3, .game_description h4 { color: #101010; } .game_description p { margin-bottom: 14px; line-height: 1.6; } .game_description ul { list-style-type: disc; /* Включаем стандартные маркеры-точки */ padding-left: 40px; /* Отступ для маркеров */ margin: 20px auto; } .game_description li { padding: 5px 0; /* Небольшой вертикальный отступ */ margin: 0; border: none; /* Убираем границы */ font-family: 'Poppins', sans-serif; color: #101010; font-size: 16px; display: list-item; /* Убеждаемся, что элемент ведёт себя как обычный пункт списка */ } .game_description li::before { content: none; /* Убираем кастомные иконки */ } .game_description li:hover { background: none; /* Нет фона при наведении */ } .game_description li a, .page_description a, .seo_text a, .catalog__description a { color: #17bcdf; text-decoration: underline; } .game_description li a:hover, .page_description a:hover, .seo_text a:hover, .catalog__description a:hover { color: #ef3f5c; } .game_description strong, .game_description b, .page_description strong, .page_description b, .seo_text strong, .seo_text b, .catalog__description strong, .catalog__description b { font-weight: 700; color: #101010; } .game_description blockquote, .page_description blockquote, .seo_text blockquote { border-left: 3px solid #ef3f5c; padding: 8px 20px; margin: 16px 0; color: #4a4a4a; font-style: italic; } .game_description table, .page_description table, .seo_text table { width: 100%; border-collapse: collapse; margin: 20px 0; background: #ffffff; border-radius: 12px; overflow: hidden; } .game_description th, .game_description td, .page_description th, .page_description td, .seo_text th, .seo_text td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #d7e8ec; color: #101010; } .game_description th, .page_description th, .seo_text th { background: rgba(35, 196, 232, .12); font-weight: 700; } .games_block .catalog__title { font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); line-height: 1; text-transform: uppercase; margin: 10px 0 30px; color: #16262d; } .games_block .catalog__title span{ color: #ef3f5c; } .list_category a:hover { color: #101010; } .block_review { background: #ffffff; border: 1px solid #d7e8ec; border-radius: 20px; padding: 30px; } .reviews h3 { color: #16262d; font-family: 'Baloo 2', 'Poppins', sans-serif; font-size: 28px; font-weight: 700; text-transform: uppercase; } .glsr-reviews { margin-bottom: 20px; } span.glsr-tag-value { font-style: italic; } @keyframes pluto-gradient { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } to { background-position: 0 50% } } .player-overlay-name{ position:absolute; top: 94%; font-size: 20px; } .player-overlay-image img{ border: 2px solid #fff; border-radius: 8px; width:180px; } .player-overlay{ width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; background: linear-gradient(-45deg, #159dbd 0%, #23c4e8 22%, #23c4e8 38%, #8b5cf6 48%, #23c4e8 58%, #23c4e8 74%, #ef3f5c 84%, #23c4e8 92%, #159dbd 100%) 0 0/400% 400%; animation: pluto-gradient 60s ease 0s infinite normal none running; color: #ffffff; font-size: 25px; min-height:650px; position: relative; flex-wrap: wrap; } #js-player-start{ width:180px; height: 60px; font-size: 20px; font-weight: bold; margin-top: 15px; background: rgba(255, 255, 255, 0.8); border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: black; } #js-player-start:hover{ text-decoration:none;} #js-player-start svg{ margin-right:5px;} .game-offer__window__frame { display:none;} @media (max-width: 767px) { .player-overlay { min-height:450px; } .game-offer__content li a { color: #f0a629; text-decoration: none; transition: color 0.3s ease; } .game-offer__content li a:hover { color: #c98000; text-decoration: underline; } .game-offer__content li a:visited { color: #4a4a4a; } } /* ===================================================================== ADAPTIVE LAYOUT — new rules, not present in the original file. Placed at the end since media queries are meant to override the desktop rules above for narrower viewports. ===================================================================== */ @media (max-width: 1400px) { .content { max-width: 720px; } } @media (max-width: 1200px) { .content { max-width: 100%; } .block_top_games { position: static; margin: 30px 0 0; } .popular { width: 100%; margin-right: 0; } } @media (max-width: 992px) { .top_block { padding-left: 96px; } .main { padding-left: 40px; } body > .page > .container { padding-left: 40px; } .home .main { margin-top: 220px; } .search input { width: 200px; } } /* sidebar becomes a bottom tab bar on phones / small tablets */ @media (max-width: 680px) { .sidebar { top: auto; left: 0; right: 0; bottom: 0; width: 100% !important; height: 78px; flex-direction: row; align-items: center; border-radius: 26px 26px 0 0; overflow: visible; } .sidebar:hover { width: 100% !important; } .sidebar_title, .menu_top { display: none; } .all_cat { flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; height: 100%; margin: 0; padding: 0 14px; overflow-x: auto; overflow-y: hidden; } .single_cat { margin: 0 8px; flex: 0 0 auto; } .single_cat_img, .single_cat_img img { width: 46px; } .single_cat label { display: none; } .top_block { padding-left: 16px; padding-right: 16px; border-radius: 0 0 24px 24px; } .home .main { margin-top: 190px; } .main { padding-left: 0; } body > .page > .container { padding-left: 0; } .header { flex-direction: column; align-items: stretch; gap: 10px; } .search { width: 100%; } .search input { width: 100%; box-sizing: border-box; } .header-right { justify-content: space-between; } .main, .footer { padding-bottom: 96px; } .footer { padding-bottom: 110px; } h2.popular_cat, h2.all_games, h1.category_name { font-size: 26px; } } @media (max-width: 420px) { .catalog { justify-content: center; } .catalog__list { width: 128px; height: 164px; } .game-card { width: 100px; height: 100px; } } /* =================================================================== LIGHT THEME — surface & text restorations. Colors were flattened from CSS variables to literal hex per request, which broke html.theme-light's automatic re-coloring for anything not already explicitly scoped under html.theme-light. These rules restore light surfaces/text for cards, panels and content blocks. =================================================================== */ html.theme-light body { color: #16262d; } html.theme-light h1, html.theme-light .h1, html.theme-light .page_title h2 { color: #16262d; } html.theme-light .single_cat_img img { border: solid 2px #16262d; } html.theme-light .menu ul li a span { color: #4a4a4a; } html.theme-light .breadcrumb li { color: #16262d; } html.theme-light .breadcrumb li a { color: #16262d; } html.theme-light .breadcrumb li span, html.theme-light .breadcrumb a span { color: #16262d; } html.theme-light .advertising { background: #eef7f9; } html.theme-light .catalog__description { background: #eef7f9; border: 1px solid #d7e8ec; color: #4a4a4a; } html.theme-light .catalog__description h2 { color: #16262d; } html.theme-light .game__description_block { border: 1px solid #d7e8ec; } html.theme-light .game__description { color: #4a4a4a; } html.theme-light .game__description h1 { color: #16262d; } html.theme-light .game__similar { background: #eef7f9; border: 1px solid #d7e8ec; } html.theme-light .game .comments { background: #eef7f9; } html.theme-light .block__title { color: #16262d; } html.theme-light .game-card__name a { color: #16262d; } html.theme-light .catalog__list { background: #eef7f9; border: 1px solid #d7e8ec; } html.theme-light .catalog__list.no_style { background: none; border: none; box-shadow: none; } html.theme-light .game-card:hover .game_body { box-shadow: 0px 5px 40px #d7e8ec; } html.theme-light .pagination li { border: 1px solid #d7e8ec; background: #eef7f9; } html.theme-light .pagination li a { color: #16262d; } html.theme-light .page_description, html.theme-light .seo_text { color: #4a4a4a; } html.theme-light .footer .menu a { color: #16262d; } html.theme-light .footer ul#menu-main-menu a { color: #16262d; } html.theme-light .block_top_games { background: #eef7f9; } html.theme-light .block_top_games h3 { color: #16262d !important; } html.theme-light .top_row:hover { background: #eef7f9; } html.theme-light .top_row a { color: #16262d; } html.theme-light .top_games h3 { color: #16262d; } html.theme-light h2.popular_cat, html.theme-light h2.all_games, html.theme-light h1.category_name { color: #16262d; } html.theme-light .category_item label { background: #eef7f9; } html.theme-light .game-top__body { background: #eef7f9; border: 1px solid #d7e8ec; } html.theme-light .game-top__body a { color: #16262d; } html.theme-light .game-offer__comments { background: #eef7f9; } html.theme-light .game-offer__window__bottom { background: #eef7f9; } html.theme-light .game-offer__window__bottom .rating { border: solid 2px #d7e8ec; } html.theme-light .game__player__share { background: #eef7f9; } html.theme-light .block_adv { background: #eef7f9; } html.theme-light .game-offer__content { background: linear-gradient(360deg,#eef7f9 32.94%,rgba(13,56,71,0) 100%),linear-gradient(102.93deg,#eef7f9 .83%,#eef7f9 98.12%); } html.theme-light .game-offer__image { background: #eef7f9; border: 2px solid #d7e8ec; } html.theme-light .game-offer__image h1 { color: #16262d; } html.theme-light .game_description { color: #16262d; } html.theme-light .game_description h2, html.theme-light .game_description h3, html.theme-light .game_description h4 { color: #16262d; } html.theme-light .game_description li { color: #16262d; } html.theme-light .game_description strong, html.theme-light .game_description b, html.theme-light .page_description strong, html.theme-light .page_description b, html.theme-light .seo_text strong, html.theme-light .seo_text b, html.theme-light .catalog__description strong, html.theme-light .catalog__description b { color: #16262d; } html.theme-light .game_description blockquote, html.theme-light .page_description blockquote, html.theme-light .seo_text blockquote { color: #4a4a4a; } html.theme-light .game_description table, html.theme-light .page_description table, html.theme-light .seo_text table { background: #eef7f9; } html.theme-light .game_description th, html.theme-light .game_description td, html.theme-light .page_description th, html.theme-light .page_description td, html.theme-light .seo_text th, html.theme-light .seo_text td { border-bottom: 1px solid #d7e8ec; color: #16262d; } html.theme-light .list_category a:hover { color: #16262d; } html.theme-light .block_review { background: #eef7f9; border: 1px solid #d7e8ec; } html.theme-light .reviews h3 { color: #16262d; } html.theme-light .game-offer__content li a:visited { color: #4a4a4a; } html.theme-light .popular_category { background: #eef7f9; box-shadow: 0 10px 24px rgba(22, 38, 45, .10); } html.theme-light .game-offer__window { background: linear-gradient(99deg, #dff3f6 1.18%, #dff3f6 97.4%); } html.theme-light .menu_top ul#menu-main-menu li:hover { background: rgba(255, 255, 255, .18); } html.theme-light ul.list_category li { background: linear-gradient(165deg, #eaf7f9 0%, #dff3f6 100%); } html.theme-light .all_categorys { background: linear-gradient(165deg, #7fd8e4 0%, #35b0c4 45%, #135b6d 100%); } html.theme-light ul.list_category a, html.theme-light .list_category a { color: #16262d !important; } html.theme-light .games_block .catalog__title { color: #16262d; } /* =================================================================== MOBILE OFF-CANVAS SIDEBAR Overrides the earlier "bottom tab bar" mobile rules further up the file. Works together with mobile-sidebar-toggle.js, which creates (or reuses) a .mobile-menu-toggle button and a .sidebar-overlay backdrop and toggles the "is-open" class on both plus .sidebar. =================================================================== */ @media (max-width: 680px) { /* Sidebar becomes a full-height panel that slides in from the left, mirroring the desktop "hovered / expanded" look instead of the bottom bar. */ .sidebar { top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: 300px !important; max-width: 82vw; height: 100vh !important; border-radius: 0 24px 24px 0; flex-direction: column; align-items: stretch; /* clears the fixed .mobil_menu button + gives the panel a visible top instead of starting flush with the very edge of the screen */ padding-top: 150px; box-sizing: border-box; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; overflow-x: hidden; z-index: 2000; } .sidebar.is-open { transform: translateX(0); } /* neutralize the desktop hover-expand rule so width doesn't fight the open/closed state on touch devices */ .sidebar:hover { width: 300px !important; } /* bring back the desktop-style contents inside the panel */ .sidebar .sidebar_title, .sidebar .menu_top { display: block; } .sidebar .all_cat { display: flex; flex-direction: row; /* grid of icons, 2-3 per row */ flex-wrap: wrap; /* wraps DOWN onto new rows */ justify-content: flex-start; align-content: flex-start; flex: 0 0 auto; /* was inheriting "flex: 1 1 auto" from the base .all_cat rule further up the file, which stretched this block to fill the sidebar's remaining height and caused items to wrap sideways instead of just adding more rows */ width: 100%; height: auto; max-height: none; margin-top: 24px; margin-left: 0; padding: 0 12px 24px; overflow: visible; } .sidebar .single_cat { margin: 6px 12px; flex: 0 0 auto; } .sidebar .single_cat_img, .sidebar .single_cat_img img { width: 64px; } .sidebar .single_cat label { display: block; } /* dark backdrop behind the open panel */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 1999; } .sidebar-overlay.is-open { opacity: 1; pointer-events: auto; } /* Existing hamburger button (.mobil_menu, defined earlier in this file around line 359). It was display:none with no "left" value, so it never reliably appeared pinned to the viewport — that's fixed here. It stays fixed to the top-left of the screen at all times and toggles the sidebar via the "is-open" class. */ .mobil_menu { display: flex !important; align-items: center; justify-content: center; position: fixed; top: 64px; /* back to the theme's own value — level with the logo */ left: 14px; z-index: 2100; width: 44px; height: 44px; padding: 0; border-radius: 12px; background: linear-gradient(165deg, #ffffff 0%, #d8eef2 100%); box-shadow: 0 6px 16px rgba(23, 40, 46, .14); } .mobil_menu i { font-size: 20px; color: #101010; transition: transform .25s ease; } .mobil_menu.is-open i { transform: rotate(90deg); } html.theme-light .mobil_menu { background: linear-gradient(165deg, #7fd8e4 0%, #35b0c4 45%, #135b6d 100%); box-shadow: 0 8px 20px rgba(22, 38, 45, .18); } html.theme-light .mobil_menu i { color: #16262d; } /* give the header some breathing room so the logo doesn't sit under the fixed hamburger button */ .top_block { padding-left: 70px; } /* lock background scroll while the panel is open */ body.sidebar-open { overflow: hidden; } } /* .mobil_menu must never show on wider screens, even if it's ever revealed via inline styles by other scripts on the page */ @media (min-width: 681px) { .mobil_menu { display: none !important; } } .catalog__description.game_description { width: 100%; text-align: left; padding: 20px 0; background: none; border: none; box-shadow: none; border-radius: 0; margin-top: 20px; } .content.content--wide { max-width: 100%; } /* =================================================================== STEP-LIST COMPONENT — numbered "How to Play" style cards. Targets any
    rendered inside .game_description, .page_description or .seo_text (the CMS output containers already used on the site), so the article text itself only ever needs plain
    1. tags — no extra classes required in the content body. =================================================================== */ .game_description ol, .page_description ol, .seo_text ol { counter-reset: step; list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 24px 0; padding-left: 0; } .game_description ol > li, .page_description ol > li, .seo_text ol > li { counter-increment: step; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px 18px 74px; color: var(--text); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); } .game_description ol > li::before, .page_description ol > li::before, .seo_text ol > li::before { content: counter(step); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: #ffffff; background: var(--pink); } /* cycle through the three accent colors, same rhythm as the palette used elsewhere on the site (pink / teal / gold) */ .game_description ol > li:nth-child(3n+2)::before, .page_description ol > li:nth-child(3n+2)::before, .seo_text ol > li:nth-child(3n+2)::before { background: var(--teal); } .game_description ol > li:nth-child(3n)::before, .page_description ol > li:nth-child(3n)::before, .seo_text ol > li:nth-child(3n)::before { background: var(--gold); color: #2b1a00; } .game_description ol > li b, .page_description ol > li b, .seo_text ol > li b { display: block; font-family: 'Baloo 2', 'Poppins', sans-serif; font-size: 16px; margin-bottom: 4px; color: var(--text); } html.theme-light .game_description ol > li, html.theme-light .page_description ol > li, html.theme-light .seo_text ol > li { background: #eef7f9; border: 1px solid #d7e8ec; box-shadow: 0 10px 24px rgba(22, 38, 45, .08); }