:root {
--color-main-bg: #fff8e1;
--color-hero-bg: #ffeab6;
--color-header-bg: #d7261b;
--color-main-link: #d7261b;
--color-th-bg: #d7261b;
--color-th-text: #fff;
--color-footer-bg: #d7261b;
--color-footer-text: #fff;
--text: #222;
--muted: #6b5a4f;
--radius-logo: 6px;
--radius-btn: 10px;
--radius-chip: 12px;
--radius-card: 14px;
--gap: 18px;
--shadow-sm: 0 2px 10px #d7261b22;
--shadow-md: 0 4px 18px #d7261b1f;
--shadow-lg: 0 8px 24px #d7261b23;
--accent-grad: linear-gradient(135deg, #ff6f61, #d7261b);
--spark: radial-gradient(6px 6px at 50% 50%, #ffd36e 0, #ffd36e 40%, transparent 41%);
--star-gold: #ffd36e;
--star-grey: #e3e3e3;
} html,
body {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--text);
background: linear-gradient(120deg, var(--color-main-bg) 0%, var(--color-hero-bg) 70%, #ffb84d 90%, var(--color-header-bg) 100%);
}
a {
color: var(--color-main-link);
text-decoration: underline;
}
a:hover {
text-decoration-thickness: 2px;
}
a:focus {
outline: 2px solid #006cff;
outline-offset: 2px;
} @media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
} .front-page #main-container > .ct-container > header,
.front-page .site-header,
.front-page [data-device="desktop"] .ct-header,
.front-page [data-device="mobile"] .ct-header,
body.home #main-container > .ct-container > header,
body.home .site-header,
body.home [data-device="desktop"] .ct-header,
body.home [data-device="mobile"] .ct-header {
display: none !important;
} .skip-link,
a.skip-link {
display: none !important;
} .header-row {
background: var(--color-header-bg);
color: #fff;
padding: 28px 0 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
text-align: center;
box-shadow: 0 4px 18px #0002;
min-height: 72px;
}
.header-row img {
width: 44px;
height: 44px;
border-radius: 13px;
background: #fff6;
box-shadow: 0 0 12px #fff3;
display: block;
}
.header-title {
font-size: 1.85rem;
font-weight: 800;
letter-spacing: 1px;
line-height: 1.2;
text-shadow: 1px 2px 10px #810;
}
@media (max-width: 700px) {
.header-row {
padding: 20px 0 12px;
min-height: 60px;
}
.header-row img {
width: 34px;
height: 34px;
}
.header-title {
font-size: 1.28rem;
}
} .hero {
background: linear-gradient(100deg, var(--color-hero-bg) 0%, #ffd59e 70%, var(--color-header-bg) 100%);
color: #841400;
text-align: center;
padding: 16px 10px 18px;
border-radius: 0 0 28px 28px;
box-shadow: 0 6px 28px #d7261b38;
margin-bottom: 16px;
} .sys-menu {
display: block;
margin: 8px auto 12px;
max-width: 1120px;
}
.sys-menu-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 0 10px 4px;
margin: 0;
list-style: none;
}
.sys-menu-list a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
background: var(--color-header-bg);
color: #fff;
border: 1.5px solid var(--color-header-bg);
font-weight: 800;
font-size: 0.92rem;
white-space: nowrap;
box-shadow: var(--shadow-sm);
text-decoration: none;
}
.sys-menu-list a:hover {
filter: brightness(1.1);
transform: translateY(-1px);
} .hero-desc,
.module-desc,
.sub-desc {
display: block;
max-width: min(820px, 100%);
margin: 10px auto;
color: #5a4236;
font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
line-height: 1.65;
background: #fffdf4;
border: 1px dashed #ffd59e;
border-radius: 12px;
padding: 10px 12px;
text-align: center;
}
.hero-desc a {
text-decoration: underline;
} .container {
max-width: 1120px;
margin: 0 auto;
padding: 0 16px 24px;
}
.home-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
align-items: start;
margin-top: 22px;
}
@media (max-width: 980px) {
.home-row {
grid-template-columns: 1fr;
}
} .module {
background: #fff;
border: 1px solid #ffeab6;
border-radius: var(--radius-card);
box-shadow: var(--shadow-md);
padding: 14px 12px 12px;
display: flex;
flex-direction: column;
min-height: 420px; }
.module-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin: 2px 4px 18px;
flex-shrink: 0;
}
.module-head .view-all {
font-size: 0.92rem;
font-weight: 800;
padding: 6px 12px;
border-radius: 999px;
border: 1.5px solid var(--color-main-link);
color: var(--color-main-link);
background: #fff;
white-space: nowrap;
text-decoration: none;
}
.module-head .view-all:hover {
background: #fff8;
}
.module-desc {
margin: 0 0 14px 0;
flex-shrink: 0;
} .post-card-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
min-height: 200px;
}
@media (max-width: 700px) {
.post-card-grid {
grid-template-columns: 1fr;
}
} .sub-block {
margin-top: 22px;
} .title-wrap {
display: flex;
align-items: center;
justify-content: center;
margin: 22px auto 14px;
}
.fancy-title {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.28rem 0.9rem;
border-radius: 999px;
background: linear-gradient(90deg, rgba(215, 38, 27, 0.08), rgba(255, 164, 0, 0.12));
color: var(--color-main-link);
font-size: clamp(1.06rem, 1rem + 0.2vw, 1.18rem);
font-weight: 900;
letter-spacing: 0.3px;
text-align: center;
}
.fancy-title:after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -6px;
height: 4px;
width: 160px;
border-radius: 999px;
background: var(--accent-grad);
box-shadow: 0 2px 10px #d7261b33;
pointer-events: none;
}
.module-head .fancy-title:after {
width: 120px;
height: 3px;
bottom: -5px;
}
.fancy-title .spark {
width: 10px;
height: 10px;
background: var(--spark);
border-radius: 50%;
box-shadow: 0 0 18px #ffd36e88, 0 0 2px #ffd36e inset;
} .post-card {
background: #fff;
border-radius: 12px;
box-shadow: var(--shadow-md);
overflow: hidden;
border: 1px solid #ffeab6;
transition: transform 0.12s;
display: flex;
flex-direction: column;
}
.post-card:hover {
transform: translateY(-2px);
}
.post-card a {
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
}
.post-thumb {
width: 100%;
aspect-ratio: 16/9;
background: #fffbe8;
overflow: hidden;
flex-shrink: 0;
}
.post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.post-meta {
padding: 10px 12px 12px;
font-size: 1rem;
color: #222;
font-weight: 600;
line-height: 1.4;
flex: 1;
} .site-search {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
max-width: 540px;
margin: 14px auto 0;
padding: 4px;
background: #fff;
border: 1.5px solid #ffd59e;
border-radius: 999px;
box-shadow: var(--shadow-sm);
min-height: 44px;
}
.site-search input[type="search"] {
flex: 1 1 auto;
padding: 8px 12px;
border: none;
border-radius: 999px;
font-size: 0.97rem;
background: transparent;
min-width: 0;
}
.site-search input[type="search"]::placeholder {
color: #9f877a;
}
.site-search button {
padding: 8px 12px;
border-radius: 999px;
border: 1.5px solid var(--color-header-bg);
background: var(--color-header-bg);
color: #fff;
font-weight: 900;
letter-spacing: 0.2px;
font-size: 0.94rem;
cursor: pointer;
}
.site-search button:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.site-search button:active {
transform: translateY(0);
} .btn-primary,
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
border-radius: var(--radius-btn);
font-size: 0.96rem;
font-weight: 800;
line-height: 1;
cursor: pointer;
text-decoration: none;
user-select: none;
white-space: nowrap;
}
.btn-primary {
background: var(--color-header-bg);
color: #fff;
border: 0;
box-shadow: 0 2px 14px #d7261b44;
}
.btn-primary:hover {
transform: translateY(-1px);
filter: brightness(1.06);
}
.btn-ghost {
background: #fff;
color: var(--color-main-link);
border: 1.5px solid var(--color-main-link);
box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
background: #fff8;
}
.i {
font-style: normal;
display: inline-block;
line-height: 1;
}
.i-ext {
margin-left: 2px;
}
.i-search {
opacity: 0.95;
} .platforms-grid {
display: flex;
flex-wrap: wrap;
gap: 22px;
justify-content: center;
}
.platform-card {
position: relative;
flex: 1 1 200px;
background: linear-gradient(120deg, #fffbe8 80%, var(--color-hero-bg) 100%);
border-radius: var(--radius-card);
box-shadow: var(--shadow-md);
padding: 18px 12px;
text-align: center;
min-width: 200px;
max-width: 320px;
border: 1px solid #ffd59e;
transform: translateZ(0);
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s;
will-change: transform;
display: flex;
flex-direction: column;
gap: 12px;
}
.platform-card:before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(120px 60px at 30% 0%, #fff8, transparent 60%);
opacity: 0;
transition: opacity 0.2s;
pointer-events: none; }
.platform-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 16px 36px #d7261b30;
}
.platform-card:hover:before {
opacity: 0.9;
} .platform-logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 62px;
margin-bottom: 8px;
} .platform-card img,
.platform-logo {
display: block;
width: 112px;
height: 62px;
max-width: 100%;
object-fit: contain;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: var(--radius-logo);
image-rendering: auto;
margin: 0 auto;
}
.platform-card h3 {
margin: 6px 0 6px;
font-size: 1.12rem;
color: var(--color-main-link);
font-weight: 800;
}
.platform-card p {
font-size: 0.98rem;
color: #2b2b2b;
margin: 0 0 10px;
flex: 1;
} .highlight-points {
display: flex;
flex-direction: column;
gap: 6px;
margin: 10px 0;
}
.highlight-tag {
display: inline-block;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid #ffd59e;
background: #fff;
font-size: 0.82rem;
color: #7a523f;
} .platform-card .btn-primary {
position: relative;
z-index: 10; pointer-events: auto;
} .table-scroll {
overflow-x: auto;
}
.top10-table {
width: 100%;
background: #fff;
border-radius: 13px;
box-shadow: var(--shadow-lg);
border-collapse: separate;
border-spacing: 0;
min-width: 860px;
}
.top10-table th,
.top10-table td {
padding: 13px 10px;
text-align: center;
font-size: 1rem;
vertical-align: middle;
}
.top10-table th {
background: var(--color-th-bg);
color: var(--color-th-text);
font-weight: 800;
letter-spacing: 0.6px;
}
.top10-table tr {
transition: background 0.15s;
}
.top10-table tr:hover {
background: #fff6df;
}
.nc-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
justify-content: center;
} .nc-logo {
display: inline-block !important;
width: 98px !important;
height: 54px !important;
object-fit: contain;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: var(--radius-logo);
}
.nc-name {
font-weight: 800;
color: var(--color-main-link);
font-size: 1.08rem;
letter-spacing: 0.2px;
}
.stars-row {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
margin-bottom: 4px;
}
.star {
position: relative;
display: inline-block;
width: 1.1em;
height: 1.1em;
}
.star::before {
content: "★";
position: absolute;
inset: 0;
color: var(--star-gold);
}
.star.empty::before {
color: var(--star-grey);
}
.star.half::before {
color: var(--star-grey);
}
.star.half::after {
content: "★";
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
color: var(--star-gold);
}
.score-number {
font-weight: 800;
color: #333;
}
.offer-meta {
margin-top: 6px;
}
.offer-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.offer-tags .tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid #ffd59e;
background: #fff;
font-size: 0.82rem;
color: #7a523f;
}
.offer-countdown {
margin-top: 6px;
font-weight: 800;
color: #b11300;
} .top10-mobile {
display: none;
}
.top10-card {
background: #fff;
border-radius: 14px;
box-shadow: var(--shadow-md);
padding: 17px 10px 13px;
margin: 10px 0;
font-size: 1rem;
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
width: 100%;
} .card-logo {
display: inline-block !important;
width: 62px !important;
height: 34px !important;
object-fit: contain;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: var(--radius-logo);
}
.card-name {
font-weight: 800;
font-size: 1.06rem;
color: var(--color-main-link);
}
.card-rank {
background: #222;
color: #fff;
border-radius: 8px;
padding: 2px 10px;
font-weight: 700;
}
.card-bonus {
text-align: center;
}
.card-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 820px) {
.top10-desktop {
display: none;
}
.top10-mobile {
display: block;
}
} .faq {
background: #fffbe0;
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 18px 12px 10px;
margin: 28px 0 20px;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.faq h3 {
color: var(--color-main-link);
font-size: 1.04rem;
}
.faq-item {
margin-bottom: 12px;
}
.faq-q {
font-weight: bold;
}
.faq-a {
margin-top: 3px;
color: #314;
} .entry-content img,
.ct-entry-content img,
.wp-block-image img,
.wp-block-gallery img,
.gallery img,
.entry-content video,
.ct-entry-content video,
.entry-content iframe,
.ct-entry-content iframe,
.entry-content embed,
.ct-entry-content embed {
max-width: 100%;
height: auto;
display: block;
margin: 14px auto;
}
.entry-content figure,
.ct-entry-content figure {
max-width: 100%;
}
.wp-block-gallery {
margin-left: auto;
margin-right: auto;
} @media (max-width: 768px) {
.entry-content .alignwide,
.entry-content .alignfull,
.ct-entry-content .alignwide,
.ct-entry-content .alignfull {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
} .entry-content .wp-block-table,
.entry-content table,
.ct-entry-content .wp-block-table,
.ct-entry-content table {
width: 100%;
border-collapse: collapse;
}
@media (max-width: 768px) {
.entry-content .wp-block-table,
.entry-content table,
.ct-entry-content .wp-block-table,
.ct-entry-content table {
display: block;
max-width: 100% !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.entry-content table td,
.entry-content table th,
.ct-entry-content table td,
.ct-entry-content table th {
white-space: nowrap;
}
} @media (max-width: 768px) {
.tablepress {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tablepress tbody td,
.tablepress thead th {
white-space: nowrap;
}
} @media (max-width: 768px) {
.entry-content img,
.ct-entry-content img,
.wp-block-image img {
width: 100% !important;
height: auto !important;
}
} @media (max-width: 768px) {
.entry-content .alignleft,
.entry-content .alignright,
.ct-entry-content .alignleft,
.ct-entry-content .alignright {
float: none !important;
display: block;
margin-left: auto !important;
margin-right: auto !important;
}
} .entry-content pre,
.ct-entry-content pre {
max-width: 100%;
overflow: auto;
white-space: pre;
}
.entry-content code,
.ct-entry-content code,
.entry-content kbd,
.ct-entry-content kbd,
.entry-content samp,
.ct-entry-content samp {
max-width: 100%;
overflow-wrap: anywhere;
} .entry-content .wp-block-embed__wrapper iframe,
.ct-entry-content .wp-block-embed__wrapper iframe,
.entry-content .wp-has-aspect-ratio iframe,
.ct-entry-content .wp-has-aspect-ratio iframe {
width: 100% !important;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.responsive-embed {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.responsive-embed iframe,
.responsive-embed video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
} @media (max-width: 768px) {
.entry-content,
.ct-entry-content {
overflow-x: hidden;
}
} .entry-content,
.ct-entry-content {
overflow-wrap: anywhere;
word-break: break-word;
} @media (min-width: 981px) {
.entry-content img,
.ct-entry-content img,
.entry-content figure img,
.ct-entry-content figure img {
max-width: 720px;
}
}