of | */
.game-offer__description table th {
background: rgba(108,135,168,0.28);
color: var(--c-text);
font-weight: 700; }
.game-offer__description table thead tr:first-child td,
.game-offer__description table tr:first-child.pp-table-head td {
background: rgba(108,135,168,0.28);
color: var(--c-text);
font-weight: 700; }
/* First column keеps its own "label" look, no matter how many columns follow */
.game-offer__description table tr td:first-child {
min-width: 120px;
background: rgba(108,135,168,0.10);
color: var(--c-text);
font-weight: 700; }
.game-offer__description table tr td:first-child b { color: var(--c-text); }
/* Sidebar guides block */
.character-guides .character-games__list {
background: var(--c-panel2);
border-radius: 26px;
padding: 10px 14px;
}
.character-guides .character-games__list ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.character-guides .character-games__list li {
display: block;
width: 100%;
float: none;
margin: 0;
padding: 0;
background: none;
position: static;
}
.character-guides .character-games__list li a {
display: block;
padding: 9px 4px;
border-bottom: 1px solid rgba(255,255,255,0.08);
text-decoration: none;
}
.character-guides .character-games__list li:last-child a {
border-bottom: none;
}
.character-guides .character-name {
position: static;
width: auto;
background: none;
padding: 0;
border-radius: 0;
bottom: auto;
}
.character-guides .character-games__list li a:hover .character-name {
background: none;
}
.character-guides .character-name span {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.35;
text-align: left;
color: var(--c-muted) !important;
}
.character-guides .character-games__list li a:hover .character-name span {
color: #B5738C !important;
}
.character-guides {
background: var(--c-panel);
outline: 2px solid #6670A8;
outline-offset: -2px;
box-shadow: 0 0 22px -6px rgba(102,112,168,0.3);
border-radius: 34px;
padding: 25px 10px 10px 10px;
margin-bottom: 24px;
}
.character-guides .block-title {
margin-bottom: 16px;
}
.game-banner {
display: flex;
flex-direction: column;
align-items: center;
padding: 18px;
margin-bottom: 30px;
background: rgba(217, 140, 61, 0.08);
border: 2px solid rgba(217, 140, 61, 0.25);
border-radius: 20px;
}
.game-banner img {
display: block;
max-width: 100%;
height: auto;
border-radius: 14px;
}
/* ============================================
Character guide — additive styles (eg-*)
Paste into your main stylesheet
============================================ */
/* ---------- Character card ---------- */
.eg-character {
margin: 24px 0;
padding: 22px 24px;
background: rgba(108,135,168,0.07);
border: 2px solid #6C87A8;
border-radius: 14px;
}
/* full-width heading */
.eg-character h2 {
margin-top: 0;
margin-bottom: 12px;
}
/* full-width row of fact pills */
.eg-character__facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
/* text body: image floats inside here, so its top edge lines up
with the first line of the first paragraph */
.eg-character__body::after {
content: '';
display: table;
clear: both;
}
.eg-character__media {
display: block;
float: left;
width: 250px;
height: 150px;
margin: 0 25px 25px 0;
object-fit: cover;
border-radius: 16px;
outline: 1px solid rgba(255,255,255,0.16);
outline-offset: -1px;
box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
/* alternate sides for visual rhythm */
.eg-character:nth-of-type(even) .eg-character__media {
float: right;
margin: 0 0 12px 25px;
}
/* accent colors, matching the existing site palette — used on the pills */
.eg-character--purple { --eg-accent: #9683B0; }
.eg-character--navy { --eg-accent: #6670A8; }
.eg-character--pink { --eg-accent: #B5738C; }
.eg-character--green { --eg-accent: #6B9E7E; }
.eg-character--red { --eg-accent: #B85A52; }
.eg-character--gold { --eg-accent: var(--c-accent); }
.eg-character--orange { --eg-accent: #B98A52; }
/* ---------- Fact pills ---------- */
.eg-pill {
display: inline-flex;
align-items: center;
padding: 5px 13px;
font-size: 12px;
font-weight: 500;
color: var(--c-text);
background: rgba(255,255,255,0.06);
border: 1px solid var(--eg-accent, rgba(255,255,255,.18));
border-radius: 999px;
white-space: nowrap;
}
.eg-pill--warn {
background: rgba(184,90,82,0.12);
border-color: #B85A52;
color: #E8B6B0;
}
/* ---------- Responsive ---------- */
@media (max-width: 600px) {
.eg-character__media,
.eg-character:nth-of-type(even) .eg-character__media {
float: none;
width: 100%;
max-width: 250px;
margin: 0 auto 16px auto;
}
}
.container {
max-width: 1140px;
margin: 0 auto; }
.container::before {
content: '';
display: table; }
.container::after {
content: '';
clear: both; }
@media all and (max-width: 389px) {
.game-card {
max-width: calc(100% / 2 - 10px); } }
@media all and (max-width: 767px) {
.container {
padding: 0 16px; }
.btn-search {
height: 44px; }
.btn-menu {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, #EC5260 -8.44%, #F53439 74.75%);
border-radius: 14px;
width: 100%;
height: 44px; }
.btn-menu .text {
font-weight: 500;
font-size: 14px;
line-height: 22px;
color: #ffffff; }
.hamburger {
position: relative;
width: 12px;
height: 12px;
margin-right: 5px; }
.hamburger span {
display: block;
position: absolute;
width: 12px;
height: 2px;
-webkit-transition: transform .15s linear;
-o-transition: transform .15s linear;
transition: transform 0.15s ease;
border-radius: 3px;
background-color: #fff; }
.hamburger span:nth-child(1) {
top: 0; }
.hamburger span:nth-child(2) {
top: 50%;
margin-top: -1px; }
.hamburger span:nth-child(3) {
top: auto;
bottom: 0; }
.header {
position: relative; }
.header__content {
margin-top: 16px;
margin-bottom: 16px; }
.header .logo {
margin-right: auto;
margin-left: auto;
margin-bottom: 15px; }
.header .search input {
width: 100%;
max-width: 250px;
height: 44px;
background: #F7F8FA url(../img/icon-search.svg) 12px 15px no-repeat; }
.header .menu {
margin-top: 10px; }
.header .menu ul {
display: none; }
.header .menu ul li {
height: 44px;
max-width: calc(100% / 2 - 5px);
margin-bottom: 10px; }
.open .hamburger span:nth-child(1) {
top: 5px;
transform: rotate(45deg); }
.open .hamburger span:nth-child(2) {
top: 0;
opacity: 0; }
.open .hamburger span:nth-child(3) {
bottom: 5px;
transform: rotate(-45deg); }
.open.menu ul {
display: flex;
margin-top: 15px; }
.content {
flex-wrap: wrap;
padding: 20px; }
.side {
max-width: 100%; }
.character-games__list ul {
justify-content: center; }
.catalog__list {
justify-content: space-between; }
.game-series__slider {
margin: 0; }
.game-series__item {
margin-left: 0;
margin-right: 0;
margin-bottom: 10px;
max-width: 100%; }
.slick-next {
top: auto;
bottom: 0;
right: 0; }
.slick-prev {
top: auto;
bottom: 0;
left: 0;
right: auto; }
.slick-dots {
max-width: calc(100% - (80px + 20px));
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 40px; }
.slick-dots li {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 7px; }
.slick-dots li button {
font-size: 0;
border-radius: 50%;
padding: 3px;
background: #72B9FA; }
.slick-dots li.slick-active {
width: 10px;
height: 10px;
background: #ffffff; }
.slick-dots li.slick-active button {
background: #FC8500; }
.game-card {
margin: 5px; }
.game-offer h1 {
font-size: 28px;
line-height: 30px; }
.game-offer__window__top {
flex-wrap: wrap; }
.game-offer__window__top .left {
justify-content: center;
margin-bottom: 10px; }
.game-offer__window__top .right {
justify-content: center;
width: 100%; }
.game-offer__window__frame {
min-height: 320px; }
.game-offer__window__bottom {
flex-wrap: wrap; }
.game-offer__window__bottom .left {
order: 13; }
.game-offer__window__bottom .right {
width: 100%;
justify-content: space-between;
margin-bottom: 10px;
order: 1; }
.game-offer__window__bottom .links a {
margin-bottom: 5px; }
.description h1, .description .h1 {
font-size: 28px;
line-height: 30px; }
.description h2, .description .h2 {
font-size: 28px;
line-height: 30px; }
.description--padding {
padding: 20px; }
.footer__content {
flex-wrap: wrap; }
.footer__content .logo {
margin-bottom: 20px;
margin-right: auto;
margin-left: auto; }
.footer__content .privacy {
text-align: center;
margin: 0 auto; } }
/* --- builder additions (not from theme) --- */
:root{
--c-bg:#0A0C0E; --c-panel:#2E333F; --c-panel2:#3C424F; --c-panel3:#4A5162;
--c-text:#F2F1EC; --c-muted:#A6A2AE; --c-accent:#C9A227; --c-accent-text:#2A1F08;
}
.text-logo{display:inline-block;font-family:'Inter',Arial,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.5px;color:#fff;
background:linear-gradient(135deg,#9683B0,#6670A8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.footer .foot-note{color:#8a8aa0;font-size:11px;margin-top:8px;max-width:340px;line-height:1.5}
.header .menu ul li a img{display:inline-block}
/* Pre-play teaser: capped at a fixed, sane height (was ~650px, inherited from the
theme's wide row layout) — once Play is pressed the frame below takes over at
its own normal (taller) size, so the actual game is never cramped. */
.player-overlay{
min-height:450px !important;
height:450px;
flex-direction:column !important;
gap:16px;
padding:24px;
position:relative;
z-index:0;
overflow:hidden;
}
/* Blurred, full-bleed backdrop made from the game's own thumbnail (set inline as
--bg-img per game) — sits behind everything else in the card. Falls back to the
theme's original animated gradient when a game has no image at all. */
.player-overlay::before{
content:'';
position:absolute;
inset:-30px;
background-image:var(--bg-img,none);
background-size:cover;
background-position:center;
filter:blur(28px) brightness(.55) saturate(1.15);
z-index:-1;
}
.player-overlay-image{ order:1; position:relative; z-index:1; }
.player-overlay-image img{ width:140px; height:140px; object-fit:cover; }
.player-overlay-name{
position:relative !important;
top:auto !important;
z-index:1;
order:2;
font-size:22px;
text-align:center;
max-width:90%;
text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.player-button-name{ order:3; position:relative; z-index:1; }
/* Uniform thumbnail size for the category/similar-games grid — actual pixel size
comes from --thumb-w/--thumb-h, injected per-page from the Games tab's
width/height setting. Deliberately NOT applied to the sidebar "Most Played"
list — that one has its own compact 2-per-row layout (98px, flex-wrap) that a
125px override would break by no longer fitting two across. */
:root{ --thumb-w:125px; --thumb-h:125px; }
.game-card .thumb img {
width: var(--thumb-w) !important;
height: var(--thumb-h) !important;
object-fit: cover !important;
}
/* A real, visible Play button — red, pill-shaped, gently pulsing to draw the eye,
and a touch larger on hover for tactile feedback (the theme styled a #js-player-start
id that our markup never used, so this had been rendering as bare unstyled text). */
.player-overlay__start{
font-family:inherit;
display:inline-flex !important;
align-items:center;
justify-content:center;
gap:9px;
width:auto !important;
height:auto !important;
min-width:210px;
padding:16px 38px;
background:linear-gradient(135deg,#FF6A4D,#E42A3F);
color:#fff !important;
font-size:19px;
font-weight:800;
letter-spacing:.3px;
border-radius:999px;
cursor:pointer;
text-decoration:none;
box-shadow:0 0 0 0 rgba(228,42,63,.55);
animation:playPulse 2.2s ease-out infinite;
transition:transform .2s ease, box-shadow .2s ease;
}
.player-overlay__start:hover{
transform:scale(1.08);
text-decoration:none;
color:#fff;
}
.player-overlay__start .play-ico{ font-size:14px; }
@keyframes playPulse{
0% { box-shadow:0 0 0 0 rgba(228,42,63,.55); }
70% { box-shadow:0 0 0 22px rgba(228,42,63,0); }
100% { box-shadow:0 0 0 0 rgba(228,42,63,0); }
}
@media (max-width:767px){
.player-overlay{ min-height:450px !important; height:450px; }
}
/* Post-play frame height — was the theme's default 600px, now 550px (still full
per-game auto width/positioning, just a shorter minimum). */
.game-offer__window__frame{ min-height:550px; }
|