/* Source: aplicativo.html */
:root { --color-primary: #2fc66b; --color-secondary: #f3fbff; --color-muted: #def7ea; --on-primary: #ffffff; --on-secondary: #102a43; --btn-bg: #2fc66b; --btn-fg: #ffffff; --footer-bg: #2fc66b; --header-bg: #2fc66b; --on-header: #ffffff; --on-footer: #ffffff; --heading-color: #0f8a4a; --surface-bg: #e3f7ff; --on-surface: #0c2f3d; --toy-header-bg: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); --toy-btn-bg: #2fc66b; --toy-btn-color: #ffffff; --toy-nav-color: #ffffff; --color-accent-sky: #44baf5; --brand-gradient: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial, sans-serif; margin:0; color: var(--on-secondary); background: var(--color-secondary); font-size:14px; }
main { max-width: 1080px; margin: auto; padding: 16px; }
/* Header layout */
body > header { background: var(--brand-gradient); color: var(--on-header); position: sticky; top: 0; z-index: 1000; padding: 16px 0; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:nowrap; }
header img { border-radius:8px; }
header img.logo-square { width:52px; height:auto; }
header img.logo-landscape { width:auto; height:48px; max-width: 180px; object-fit: contain; }
.brand { display:flex; align-items:center; gap:12px; }
.nav-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; }
.nav-center a { text-decoration:none; font-weight:600; color: var(--on-header); padding:4px 8px; border-radius:999px; transition: background-color .15s ease, color .15s ease; white-space:nowrap; font-size:0.88rem; }
.kw-highlight { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.nav-center a.nav-child { font-size:0.92em; opacity:.85; padding-left:12px; position:relative; }
.nav-center a.nav-child::before { content:"•"; font-size:0.75em; margin-right:4px; vertical-align:middle; }
.nav-center a:hover { background: color-mix(in srgb, var(--on-header) 18%, rgba(255,255,255,0.2)); color: var(--on-header); }
@media (prefers-color-scheme: dark) {
.nav-center a { color:#fff; }
.nav-center a:hover { background: color-mix(in srgb, #ffffff 22%, rgba(255,255,255,0.05)); color:#fff; }
}
.actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; flex:0 0 auto; }
.menu.responsive { display:none; }
/* Buttons */
.btn {margin-top: 1.5rem; display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration:none; border:1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-weight:700; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease, color .12s ease; }
/* Remove margin-top for buttons in header */
header .btn { margin-top: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); opacity:.98; background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login:hover { background: color-mix(in srgb, #ffffff 82%, var(--color-secondary) 18%); color: var(--color-secondary); }
.btn-signup:hover { background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); font-weight:700; }
.btn-signup { background: transparent; color: var(--color-primary); font-weight:700; }
/* Ensure login stays visible on header background */
header .btn-login { color: var(--on-header); border-color: var(--on-header); }
header .btn-login:hover { background: color-mix(in srgb, var(--on-header) 20%, transparent); color: var(--on-header); }
/* Ensure signup stays visible on primary header background */
header .btn-signup { background: var(--on-primary); color: var(--color-primary); border-color: var(--on-primary); }
header .btn-signup:hover { background: color-mix(in srgb, var(--on-primary) 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-buy { background: transparent; color:#111; border-color:#111; font-weight:700; }
/* Mobile-only top CTA (hidden on desktop) */
.top-cta { display:none; }
/* Burger */
.burger { display:none; border:none; width:44px; height:36px; padding:6px; border-radius:10px; background: color-mix(in srgb, var(--color-primary) 20%, white); color: var(--on-primary); align-items:center; justify-content:center; }
.burger i { font-size:18px; }
/* Mobile */
@media (max-width: 720px) {
header img.logo-landscape { max-width: 100px; height: 40px; }
body { font-size:13px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:12px; }
.brand { flex:0 0 auto; }
.nav-center { display:none; }
.actions { flex:0 0 auto; justify-content:center; gap:10px; }
.actions .btn { padding:8px 14px; font-size:13px; line-height:1.2; margin-top:0; }
.burger { display:inline-flex; justify-self:end; }
.menu.responsive { display:none; position:absolute; top:64px; left:0; right:0; background: var(--color-primary); color: var(--on-primary); border-top:1px solid rgba(255,255,255,0.15); padding:12px; flex-direction:column; gap:8px; }
.menu.responsive.open { display:flex; }
header img { width:42px; height:42px; }
main .block img,
main .card img {
width:100%;
display:block;
object-fit:cover;
border-radius:16px;
aspect-ratio:1 / 1;
}
main .block.hero img,
.hero-banner img,
.hero-banner {
aspect-ratio:auto;
border-radius:18px;
}
.hero-logo-wrapper { width:100%; max-width: calc(100vw - 32px); margin:24px auto 0; }
.hero-logo-wrapper img { width:100%; height:100%; max-width:100%; aspect-ratio:1/1; }
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
position:relative;
width:100%;
max-width: calc(100vw - 32px);
margin:0 auto 16px;
}
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content:"";
display:block;
padding-top:100%;
}
main .block:not(.hero) figure img,
main .card picture img,
main .card .figure-wrapper img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
}
.hero-banner { border-radius:14px; }
.hero-banners { gap:10px; margin-bottom:14px; }
.floating-corner-stack { right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:40vw; }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* Ensure media right-left blocks stack with text above image on mobile */
.swap-mobile .text { order: 1; }
.swap-mobile .figure { order: 2; }
/* Mobile fixed footer CTA: prevent overflow on narrow screens */
.footer-bonus-btn {
font-size:18px;
padding:14px 14px;
width:100%;
border-radius:16px;
box-sizing:border-box;
flex-wrap:wrap;
row-gap:8px;
}
.footer-bonus-btn span {
font-size:18px;
flex:1 1 100%;
min-width:0;
white-space:normal;
word-break:break-word;
line-height:1.2;
}
.footer-bonus-btn .fa-gift { font-size:1.15em; }
.footer-bonus-btn.floating {
padding-top:14px;
padding-bottom:max(14px, env(safe-area-inset-bottom));
padding-left:max(14px, env(safe-area-inset-left));
padding-right:max(14px, env(safe-area-inset-right));
}
body.floating-bonus-active { padding-bottom:150px; }
.footer-icon-row { gap:12px; padding:0; }
.footer-icon-row.payments i { font-size:2.4rem; }
.footer-icon-row.social i { font-size:1.5rem; }
.footer-copy h2 { font-size:1rem; }
}
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a.nav-child { padding-left: 24px; font-size: 0.95em; opacity: .9; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
.header-toy { border-bottom: 1px solid rgba(0,0,0,0.08); background: var(--toy-header-bg); padding: 18px clamp(12px,4vw,32px) 10px; }
.header-toy .toy-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-toy .toy-top.two-row {
position:relative;
justify-content:center;
gap:0;
padding:0 150px 0 60px;
min-height:64px;
}
.header-toy .toy-logo-center {
text-align:center;
flex:1;
display:flex;
justify-content:center;
}
.header-toy .toy-logo-center img { max-height:58px; width:auto; display:inline-block; }
.header-toy .toy-actions.align-right {
position:absolute;
right:60px;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
}
.header-toy .toy-logo img { max-height:48px; width:auto; display:block; }
.header-toy .toy-logo-text { font-size:1.4rem; font-weight:700; color:#111; letter-spacing:0.08em; }
.header-toy .toy-actions { display:flex; align-items:center; gap:12px; }
.header-toy .toy-btn { padding:10px 22px; border-radius:999px; border:1px solid var(--toy-btn-bg); background:var(--toy-btn-bg); color:var(--toy-btn-color); font-weight:600; text-decoration:none; transition:.15s ease; }
.header-toy .toy-btn:hover { opacity:.85; }
.header-toy .toy-btn.toy-auth { background:#fff; color:#111; border-color:#ddd; }
.header-toy .toy-btn.toy-auth.secondary { background:transparent; color:#111; border-color:#111; }
.header-toy .toy-burger { display:none; border:none; background:none; font-size:1.4rem; padding:6px; cursor:pointer; }
.toy-nav { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px clamp(8px,4vw,32px) 14px; }
.toy-nav .nav-link { text-decoration:none; color: var(--toy-nav-color); font-weight:600; position:relative; padding-bottom:6px; }
.toy-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#000; }
.toy-nav .nav-link.nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile { display:none; flex-direction:column; gap:10px; padding:12px clamp(8px,4vw,24px); border-top:1px solid rgba(0,0,0,0.08); }
.toy-nav-mobile a { text-decoration:none; color: var(--toy-nav-color); font-weight:600; }
.toy-nav-mobile .nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile.open { display:flex; }
@media (max-width: 920px) {
.toy-nav { display:none; }
.header-toy .toy-burger { display:inline-flex; }
.header-toy .toy-btn { font-size:0.9rem; padding:8px 18px; }
}
.toy-nav-divider {
width:100%;
height:1px;
background:rgba(0,0,0,0.12);
margin:12px 0 8px;
}
@media (max-width: 720px) {
.header-toy .toy-top.two-row { padding-right:0; flex-direction:column; }
.header-toy .toy-actions.align-right {
position:static;
transform:none;
width:100%;
justify-content:center;
margin-top:10px;
}
}
@media (max-width: 540px) {
.header-toy .toy-logo img { max-height:40px; }
.header-toy .toy-btn { display:inline-flex; }
.toy-nav-mobile { font-size:0.95rem; }
}
.container { padding: 12px; }
body.mazu-site .container { width:100%; max-width:100%; padding:0; }
.block {
padding: 24px;
border-radius: 14px;
margin: 16px 0;
background: var(--surface-bg);
border: 1px solid color-mix(in srgb, var(--surface-bg) 78%, rgba(0,0,0,0.2));
color: var(--on-surface);
transition: background-color .2s ease, color .2s ease;
}
.block p, .block li, .block span, .block td, .block th, .block a {
color: inherit;
}
.block .muted {
color: color-mix(in srgb, var(--on-surface) 72%, rgba(255,255,255,0) 28%);
}
.block.dark-surface {
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface td,
.block.dark-surface span,
.block.dark-surface a {
color: #fff;
}
.block.dark-surface .muted {
color: rgba(255,255,255,0.78);
}
body.style-28g { overflow-x:hidden; }
body.style-28g main {
max-width: 100%;
padding: 0;
}
body.style-28g main .block {
margin: 0;
border-radius: 0;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: clamp(32px, 6vw, 80px);
display:flex;
flex-direction:column;
align-items:center;
gap: clamp(18px,3vw,32px);
}
body.style-28g main .block + .block {
margin-top: 0;
}
body.style-28g main .block > *:not(style):not(script) {
width: min(1080px, 100%);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px) {
body.style-28g main .block > *:not(style):not(script) {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
}
body.style-28g main .block:nth-of-type(odd) {
background: color-mix(in srgb, var(--color-primary) 85%, #000000 15%);
color: var(--on-primary);
}
body.style-28g main .block:nth-of-type(odd) h1,
body.style-28g main .block:nth-of-type(odd) h2,
body.style-28g main .block:nth-of-type(odd) h3,
body.style-28g main .block:nth-of-type(odd) p,
body.style-28g main .block:nth-of-type(odd) li {
color: inherit;
}
body.style-28g main .block:nth-of-type(even) {
background: color-mix(in srgb, var(--color-secondary) 85%, #ffffff 15%);
color: var(--on-secondary);
}
body.style-28g main .block:nth-of-type(even) .muted {
color: color-mix(in srgb, var(--on-secondary) 65%, rgba(0,0,0,0) 35%);
}
.grid { display:grid; gap:16px; }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Responsive wrapping for dense card grids to avoid over-compression */
@media (max-width: 1024px) { .grid.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 880px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.muted { color: color-mix(in srgb, var(--on-surface) 55%, rgba(255,255,255,0) 45%); }
/* Hero layout helper */
.hero .hero-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; align-items:center; }
@media (max-width: 720px) { .hero .hero-grid { grid-template-columns: 1fr; } }
.hero-banners { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.hero-banner { display:block; border-radius:16px; overflow:hidden; background: var(--color-secondary); box-shadow: 0 12px 26px rgba(0,0,0,0.14); transition: transform .18s ease, box-shadow .18s ease; }
.hero-banner img { width:100%; display:block; object-fit:cover; }
.hero-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,0.2); }
.hero-logo-wrapper { margin:24px auto 0; width:100%; max-width:512px; }
.hero-logo-wrapper img { width:100% !important; max-width:512px; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); display:block; margin:0 auto; }
/* Hero toy variant */
.hero.hero-toy {
position: relative;
padding: clamp(48px, 12vw, 120px) 16px;
border-radius: 28px;
background: linear-gradient(135deg, #f7a5c5, #ffd966);
background-size: cover;
background-position: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.hero-toy-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
backdrop-filter: blur(2px);
}
.hero-toy-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-toy-logo {
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.hero-toy-logo img {
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
object-fit: contain;
border-radius: 28px;
background: rgba(255,255,255,0.1);
padding: 12px;
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
.hero-toy-logo-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
border-radius: 28px;
background: rgba(0,0,0,0.35);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.hero-toy-cta-wrap {
width: 100%;
display:flex;
justify-content:center;
}
.hero-toy-body h1 {
font-size: clamp(1.8rem, 4.4vw, 3rem);
margin: 0;
color: #fff;
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.hero-toy-body p {
display: block;
margin: 12px auto;
padding: 14px 18px;
border-radius: 18px;
background: rgba(0,0,0,0.45);
max-width: 720px;
font-size: 1.05rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
.hero-toy-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 42px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #ff6cab 0%, #ff9a44 100%);
color: #111;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
transition: transform .2s ease, box-shadow .2s ease;
}
.hero-toy-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,0.4);
}
.hero-toy-photo img {
width: clamp(220px, 28vw, 320px);
height: clamp(220px, 28vw, 320px);
border-radius: 28px;
object-fit: cover;
background: rgba(0,0,0,0.1);
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
@media (max-width: 540px) {
.hero.hero-toy {
border-radius: 20px;
padding: 48px 12px;
}
.hero-toy-logo img,
.hero-toy-logo-text {
width: min(320px, 90vw);
height: min(320px, 90vw);
border-radius: 32px;
}
.hero-toy-body p {
width: 100%;
box-sizing: border-box;
font-size: 0.98rem;
}
.hero-toy-cta {
width: 100%;
max-width: 320px;
}
}
.style-28g .hero.hero-toy {
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
border-radius: 0;
}
.floating-corner-stack { position:fixed; right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:13rem; display:flex; flex-direction:column; gap:16px; align-items:center; z-index:1100; padding:0 4px; }
.floating-corner-stack.hidden { display:none !important; }
.floating-corner-banner { display:flex; flex-direction:column; align-items:center; width:100%; border-radius:16px; overflow:visible; background:transparent; transition: transform .2s ease; text-decoration:none; gap:8px; }
.floating-corner-banner img {
width:72px;
height:auto;
display:block;
margin:0 auto;
}
/* 右側動圖文字背景不透明 */
.floating-corner-banner .floating-caption {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
margin:0 auto;
padding:8px 12px;
border-radius:14px;
background: color-mix(in srgb, var(--color-primary) 90%, #000000 10%);
color: #ffffff;
text-align:center;
box-shadow:0 4px 18px rgba(0,0,0,0.2);
max-width:100%;
width:100%;
}
.floating-caption-line { display:block; font-size:0.78rem; font-weight:600; line-height:1.3; letter-spacing:0.2px; white-space:nowrap; }
@media (max-width: 720px) {
/* Restore Floating Banners but scaled and safe */
.floating-corner-stack {
display: flex !important;
top: auto;
bottom: 90px;
right: 4px;
left: auto;
transform: none;
flex-direction: column;
align-items: flex-end;
width: auto;
max-width: 120px;
gap: 8px;
z-index: 1050;
}
.floating-corner-banner {
width: 100%;
align-items: flex-end;
}
.floating-corner-banner img {
width: 48px;
height: auto;
}
/* Hide caption on mobile to prevent clutter/overflow */
.floating-corner-banner .floating-caption {
display: none;
}
.floating-close-banners {
top: auto;
bottom: 150px;
right: 6px;
}
.floating-close-bonus {
right: 8px;
bottom: 78px;
}
/* Fix CTA button layout */
.btn {
font-size: 0.9rem !important;
padding: 8px 16px !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
display: inline-block;
}
/* Ensure text wraps correctly */
.block p, .block li, .block span, h1, h2, h3 {
word-break: break-word;
overflow-wrap: anywhere;
}
}
.floating-corner-banner:hover { transform: translateY(-3px) scale(1.03); }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* More interactive hovers */
.block figure img { transition: transform .18s ease, box-shadow .18s ease; }
.block figure img:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
table tr:hover td { background: color-mix(in srgb, var(--btn-bg) 8%, #ffffff); }
footer { color: var(--on-footer); border-top: 1px solid rgba(255,255,255,0.15); background: var(--footer-bg); padding: 24px 0; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; text-align:center; }
.footer-logo { margin-bottom: 12px; display:flex; justify-content:center; }
.footer-logo img { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.footer-bonus-btn { display:flex; align-items:center; justify-content:center; gap:12px; background: var(--color-secondary); color: var(--color-primary); text-decoration:none; font-weight:800; font-size:26px; border-radius:18px; padding:18px 28px; margin:16px auto; width:min(100%, 720px); box-shadow: 0 18px 32px rgba(0,0,0,0.24); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; position:relative; box-sizing:border-box; }
/* Footer按鈕文字加亮 */
.footer-bonus-btn span {
flex:1;
text-align:center;
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.6);
font-size:26px;
font-weight:800;
letter-spacing:0.4px;
}
.footer-bonus-btn .fa-gift { color:#ffcc33; font-size:1.35em; animation: footer-gift-pulse 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes footer-gift-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.footer-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px rgba(0,0,0,0.28); }
.footer-bonus-btn.floating { position:fixed; left:0; right:0; bottom:0; width:100%; margin:0; padding:20px clamp(20px, 4vw, 36px); border-radius:0; box-shadow: 0 -6px 28px rgba(0,0,0,0.3); transform:none; z-index:1200; box-sizing:border-box; }
body.floating-bonus-active { padding-bottom:160px; transition: padding-bottom .2s ease; }
body.bonus-float-hidden .footer-bonus-btn.floating { display:none !important; }
body.bonus-float-hidden { padding-bottom:0 !important; }
.floating-close {
position:fixed;
width:28px;
height:28px;
border:1px solid rgba(255,255,255,0.6);
border-radius:50%;
background:rgba(0,0,0,0.72);
color:#fff;
font-size:18px;
line-height:1;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:1301;
box-shadow:0 6px 14px rgba(0,0,0,0.28);
}
.floating-close:hover { background:rgba(0,0,0,0.86); }
.floating-close-bonus { right:10px; bottom:120px; display:none; }
body.floating-bonus-active:not(.bonus-float-hidden) .floating-close-bonus { display:flex; }
.floating-close-banners { right:10px; top:calc(50% - 118px); }
.footer-copy, .footer-payments, .footer-social { margin:24px auto 0; text-align:center; max-width:960px; }
.footer-copy h2 { font-size:1.12rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.3px; }
.footer-copy p { margin:0; color: color-mix(in srgb, var(--on-footer) 85%, rgba(255,255,255,0.55)); line-height:1.6; }
.footer-payments h3, .footer-social h3 { font-size:1.02rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.4px; text-transform:uppercase; }
.footer-icon-row { display:flex; justify-content:center; align-items:center; gap:18px; padding:0; background:transparent; flex-wrap:wrap; }
.footer-icon-row a { display:flex; align-items:center; justify-content:center; color: inherit; text-decoration:none; min-width:88px; padding:16px; border-radius:18px; background: rgba(0,0,0,0.2); box-shadow: 0 12px 24px rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.1); transition: transform .2s ease, box-shadow .2s ease; }
.footer-icon-row a:hover, .footer-icon-row a:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0,0,0,0.18); background: rgba(0,0,0,0.3); }
.footer-icon-row.payments a { min-width:130px; padding:20px; }
/* Footer icon使用加亮的主色/輔色 */
.footer-icon-row i {
color: #ffffff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
transition: color .2s ease, transform .2s ease, filter .2s ease;
font-size:2.4rem;
}
.footer-icon-row.payments i { font-size:2.8rem; }
.footer-icon-row.social i { font-size:1.8rem; }
.footer-icon-row a:hover i, .footer-icon-row a:focus-visible i {
color:#ffae00;
filter: brightness(1.2);
transform: translateY(-3px);
}
.footer-icon-row a:focus-visible { outline:2px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.5)); outline-offset:4px; box-shadow: 0 14px 28px rgba(0,0,0,0.15); }
body.footer-secondary-light .footer-icon-row i { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a:hover i, body.footer-secondary-light .footer-icon-row a:focus-visible i { color: var(--color-primary); filter:brightness(0.8); }
body.footer-secondary-light .footer-bonus-btn .fa-gift { color: #ff9900; }
body.footer-secondary-light .footer-bonus-btn span { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.footer-secondary-light .footer-icon-row a:hover { background: #ffffff; }
body.footer-primary-bright .footer-bonus-btn .fa-gift { color: #ff9900; }
h1, h2, h3 { color: var(--heading-color); }
/* Card/list hover */
.card { border:1px solid color-mix(in srgb, var(--surface-bg) 80%, rgba(0,0,0,0.15)); border-radius:10px; padding:16px; background:var(--surface-bg); color:var(--on-surface); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); background: color-mix(in srgb, var(--surface-bg) 90%, rgba(255,255,255,0.2)); }
.list-emoji li { transition: background-color .12s ease, transform .12s ease; border-radius:8px; padding:6px 8px; }
.list-emoji li:hover { background: color-mix(in srgb, var(--color-primary) 20%, rgba(255,255,255,0.8)); transform: translateX(2px); }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
/* Card content safety */
.card h3, .card p { word-wrap: break-word; overflow-wrap: anywhere; }
body.mazu-site .block p { line-height:1.65; }
/* Override for full image display (contain mode) - Global */
main .block img,
main .card img,
.hero-toy-photo img,
main .block figure img,
main .card picture img,
main .card .figure-wrapper img {
aspect-ratio: auto !important;
object-fit: contain !important;
height: auto !important;
max-height: 85vh;
width: auto !important;
max-width: 100%;
position: relative !important;
border-radius: 12px !important;
}
/* Reset containers */
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
height: auto !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
/* Remove padding hacks */
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content: none !important;
padding-top: 0 !important;
display: none !important;
}
/* Fixed button visibility on dark backgrounds (odd blocks) */
body.style-28g main .block:nth-of-type(odd) .btn {
border-color: currentColor;
color: inherit;
}
/* Ensure dark-surface blocks always have white text regardless of position */
.block.dark-surface,
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface span,
.block.dark-surface div {
color: #ffffff !important;
}
/* 修正 Home Numbers 在有背景圖時必須是白色 */
.home-numbers-block.with-bg .home-numbers-inner,
.home-numbers-block.with-bg .home-numbers-title,
.home-numbers-block.with-bg .home-number-value,
.home-numbers-block.with-bg .home-number-label {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
/* Neon Style - 螢光風格 */
body.style-neon main .block:not(.hero) {
border: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
box-shadow:
0 0 8px var(--color-primary),
0 0 20px color-mix(in srgb, var(--color-primary) 60%, transparent),
inset 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
margin-bottom: 24px; /* 增加間距避免重疊 */
}
body.style-neon main .block .figure img,
body.style-neon main .block figure img {
border: 4px solid transparent !important; /* 透明間距層 */
border-radius: 16px !important;
max-width: 100% !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, #ffffff), /* 更亮的實線外框 */
0 0 10px var(--color-primary), /* 緊密光暈 */
0 0 30px color-mix(in srgb, var(--color-primary) 80%, transparent) !important; /* 擴散光暈 */
}
/* 針對 full-width block (style-28g) 調整 border */
body.style-28g.style-neon main .block {
width: 100% !important; /* 確保邊框在視窗內 */
box-sizing: border-box !important; /* 確保 padding 和 border 不會撐開寬度 */
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 16px !important;
/* 確保邊框顏色一致 */
border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
border-right: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
}
/* Hero Left-Right Mobile Layout Adjustment */
@media (max-width: 720px) {
/* Interleave Image between H1 and Content */
.hero-left-right .grid .text,
.hero-left-right .grid .figure {
display: contents;
}
.hero-left-right .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-left-right .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-left-right .grid .text > *:not(h1) { order: 3; }
.hero-left-right .grid { text-align: center !important; justify-items: center; }
}
/* Fix Standard 28g Mobile Overflow (Containment) */
@media (max-width: 720px) {
body.style-28g main .block {
width: 100% !important;
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.style-28g .hero.hero-toy {
width: 100% !important;
left: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* Boxed Style */
body.style-boxed main {
max-width: 1200px;
margin: 40px auto;
background: var(--surface-bg);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
padding: 40px;
}
body.style-boxed main .block {
background: transparent;
border: none;
box-shadow: none;
padding: 24px 0;
margin: 24px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.style-boxed main .block:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Hero Split Diagonal */
.hero-split-diagonal {
position: relative;
overflow: hidden;
border: none !important;
background: transparent !important;
padding: 60px 24px;
}
.hero-split-diagonal::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(115deg, var(--surface-bg) 55%, var(--color-primary) 55.1%, var(--color-primary) 100%);
z-index: 1;
}
.hero-split-diagonal .content-wrapper {
position: relative;
z-index: 2;
}
/* Ensure split-diagonal text stays readable on varied backgrounds */
.hero-split-diagonal .text,
.hero-split-diagonal .text h1,
.hero-split-diagonal .text h2,
.hero-split-diagonal .text h3,
.hero-split-diagonal .text p,
.hero-split-diagonal .text li,
.hero-split-diagonal .text span {
color: var(--on-surface);
}
.hero-split-diagonal .text .muted {
color: color-mix(in srgb, var(--on-surface) 70%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.hero-split-diagonal {
padding: 32px 16px;
}
.hero-split-diagonal::before {
background: var(--surface-bg); /* Reset diagonal on mobile */
}
.hero-split-diagonal .grid .text,
.hero-split-diagonal .grid .figure {
display: contents;
}
.hero-split-diagonal .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-split-diagonal .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-split-diagonal .grid .text > *:not(h1) { order: 3; }
.hero-split-diagonal .grid { text-align: center !important; justify-items: center; }
}
/* Mobile Header Bottom Sticky Style */
@media (max-width: 720px) {
body.mobile-header-bottom-sticky .actions {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: var(--header-bg) !important;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 12px !important;
display: flex !important;
justify-content: center;
gap: 12px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
z-index: 9999 !important;
padding-bottom: max(12px, env(safe-area-inset-bottom));
box-sizing: border-box;
visibility: visible !important;
opacity: 1 !important;
}
body.mobile-header-bottom-sticky .actions .btn {
flex: 1;
text-align: center;
padding: 12px 0;
margin: 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile-header-bottom-sticky main {
padding-bottom: 90px !important;
}
/* Footer is outside main; add safe space so last icons aren't covered */
body.mobile-header-bottom-sticky .site-footer {
padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
body.mobile-header-bottom-sticky .floating-corner-stack {
bottom: 90px !important;
}
/* Hide conflicting floating bonus button when sticky header is active */
body.mobile-header-bottom-sticky .footer-bonus-btn.floating,
body.mobile-header-bottom-sticky .footer-bonus-btn {
display: none !important;
}
body.mobile-header-bottom-sticky .burger {
display: inline-flex !important;
margin-left: auto !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1101 !important;
}
/* Top CTA: Logo + CTA + Burger (mobile) */
body.mobile-header-bottom-sticky .header-inner { position: relative; }
body.mobile-header-bottom-sticky .top-cta {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 10px 16px;
min-height: 52px; /* bigger than logo(42) & burger(36) */
border-radius: 14px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
white-space: nowrap;
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
/* Red text + contrasting bg (avoid blending into header bg) */
color: #ff2a2a;
background: color-mix(in srgb, #ffffff 92%, var(--color-primary) 8%);
border: 2px solid color-mix(in srgb, #ff2a2a 72%, rgba(0,0,0,0));
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
z-index: 1102;
}
/* Subtle sheen sweep (no blinking) */
body.mobile-header-bottom-sticky .top-cta::before {
content: "";
position: absolute;
top: -30%;
left: -70%;
width: 60%;
height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
transform: rotate(20deg);
opacity: 0.65;
animation: topCtaSheen 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes topCtaSheen {
0% { left: -70%; }
55% { left: 120%; }
100% { left: 120%; }
}
/* Gentle bob (no flashing) */
body.mobile-header-bottom-sticky .top-cta {
animation: topCtaBob 3.2s ease-in-out infinite;
}
@keyframes topCtaBob {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -50%) translateY(-1px); }
}
}
/* Parallax & Grid & Animation */
body.parallax-bg {
background-attachment: fixed !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 720px) {
body.parallax-bg { background-attachment: scroll !important; }
}
@media (min-width: 721px) {
.grid.grid-60-40 { grid-template-columns: 1.5fr 1fr !important; }
.grid.grid-40-60 { grid-template-columns: 1fr 1.5fr !important; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.cards-block .cards-title {
color: var(--on-surface);
}
.cards-block .cards-desc {
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
opacity: 0.8;
}
/* 響應式調整：手機版保持正方形不裁切 */
@media (max-width: 720px) {
.cards-grid {
grid-template-columns: 1fr !important;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.cards-item img {
max-width: 100% !important;
aspect-ratio: 1/1;
object-fit: contain;
}
}
.feature-sections {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 92%, #ffffff 8%),
color-mix(in srgb, var(--color-secondary) 82%, #000000 18%)
);
border-radius: 32px;
padding: clamp(28px, 6vw, 64px);
color: var(--on-primary);
}
.feature-sections-inner {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.feature-main-title {
color: var(--on-primary);
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.feature-subheading,
.feature-footer {
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
margin: 0;
line-height: 1.6;
}
.feature-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.feature-row {
display: flex;
gap: 16px;
padding: 18px 20px;
background: color-mix(in srgb, var(--color-secondary) 18%, rgba(0,0,0,0.7));
border-radius: 20px;
align-items: flex-start;
}
.feature-icon {
font-size: 1.8rem;
line-height: 1;
margin-top: 4px;
}
.feature-icon-img {
width: 40px;
height: 40px;
object-fit: contain;
margin-top: 4px;
}
.feature-text h3 {
margin: 0 0 6px;
color: var(--on-primary);
font-size: 1.2rem;
}
.feature-text p {
margin: 0;
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
line-height: 1.6;
}
.feature-text ul {
margin: 10px 0 0;
padding-left: 18px;
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
}
.feature-text li {
margin-bottom: 4px;
}
.feature-table-wrapper {
background: color-mix(in srgb, var(--color-secondary) 20%, rgba(0,0,0,0.75));
border-radius: 20px;
padding: 18px;
}
.feature-table-title {
font-weight: 600;
margin-bottom: 12px;
}
.feature-table-scroll {
overflow-x: auto;
}
.feature-table {
width: 100%;
border-collapse: collapse;
color: var(--on-primary);
}
.feature-table th,
.feature-table td {
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--on-primary) 35%, rgba(255,255,255,0) 65%);
text-align: left;
white-space: nowrap;
}
.feature-table th {
background: color-mix(in srgb, var(--color-secondary) 30%, rgba(0,0,0,0.6));
font-weight: 600;
}
.feature-table td {
background: color-mix(in srgb, var(--color-secondary) 18%, rgba(0,0,0,0.5));
}
@media (max-width: 640px) {
.feature-row {
flex-direction: column;
}
.feature-icon,
.feature-icon-img {
margin-bottom: 6px;
}
.feature-table {
font-size: 0.9rem;
}
}
.crosslink-cards .crosslink-grid {
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crosslink-card {
display:flex;
flex-direction:column;
gap:12px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 12%, rgba(255,255,255,0.04));
border:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 30%, rgba(0,0,0,0.1));
border-radius:14px;
text-decoration:none;
color: inherit;
overflow:hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.crosslink-card:hover {
transform: translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.14);
border-color: color-mix(in srgb, var(--surface-bg, #224e60) 10%, #ffffff 40%);
}
.crosslink-card figure {
margin:0;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.2));
background: color-mix(in srgb, #000 5%, rgba(255,255,255,0.08));
display:flex;
align-items:center;
justify-content:center;
}
.crosslink-card img {
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}
.crosslink-icon {
width:100%;
aspect-ratio: 2/1;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap: 6px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 5%, rgba(255,255,255,0.02));
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.1));
}
.crosslink-icon-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 78px;
padding: 0 14px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--on-primary, #fff);
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 56%, #ffffff 44%) 100%);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.crosslink-icon-hint {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-surface, #fff) 62%, rgba(255,255,255,0));
}
.crosslink-icon--mobile .crosslink-icon-mark,
.crosslink-icon--sports .crosslink-icon-mark,
.crosslink-icon--offer .crosslink-icon-mark {
min-width: 92px;
}
.crosslink-icon--stage .crosslink-icon-mark,
.crosslink-icon--default .crosslink-icon-mark {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 66%, #ffffff 34%) 100%);
}
.crosslink-body {
padding:0 14px 14px;
}
.crosslink-body h3 {
margin:0 0 8px;
font-size:1.05rem;
}
.crosslink-body p {
margin:0;
font-size:0.95rem;
line-height:1.5;
color: color-mix(in srgb, var(--on-surface, #fff) 80%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.crosslink-cards .crosslink-grid {
grid-template-columns:1fr;
}
}
.seo-long-block { line-height: 1.75; }
.seo-long-block h2 { line-height: 1.35; margin: 1.1rem 0 0.7rem; }
.seo-long-block p { margin: 0 0 1rem; line-height: 1.75; white-space: normal; word-break: normal; overflow-wrap: break-word; }
.seo-long-block a,
.seo-long-block strong {
display: inline !important;
line-height: inherit;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
vertical-align: baseline;
}
.seo-long-block a {
color: var(--seo-link-color, #56d4ff);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
font-weight: 700;
}
.seo-long-block a:hover {
color: color-mix(in srgb, var(--seo-link-color, #56d4ff) 80%, #ffffff 20%);
}
.seo-long-block .seo-long-rich { color: var(--on-surface); line-height: 1.75; margin-bottom: 1rem; }
.ribbon-shell {
max-width: 1180px;
margin: 0 auto;
padding: 30px 20px 60px;
}
.ribbon-stack {
display: grid;
gap: 22px;
}
.ribbon-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ribbon-tag {
position: sticky;
top: 92px;
align-self: start;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 68%, #ffffff 32%) 100%);
color: var(--on-primary, #fff);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 14px 26px rgba(16, 33, 49, 0.16);
}
.ribbon-panel {
position: relative;
overflow: hidden;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, rgba(0,0,0,0.08));
box-shadow: 0 18px 38px rgba(16, 33, 49, 0.08);
}
.ribbon-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
}
.ribbon-panel > .block,
.ribbon-panel > section.block,
.ribbon-panel > .media-tabs {
margin: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ribbon-panel--seo {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,244,238,0.94) 100%);
}
@media (max-width: 920px) {
.ribbon-row {
grid-template-columns: 1fr;
}
.ribbon-tag {
position: static;
width: fit-content;
}
}
@media (max-width: 720px) {
.ribbon-shell {
padding-inline: 16px;
}
.ribbon-panel {
border-radius: 22px;
}
}
/* Promocoes-only innovative sections */
.promo-funnel-map h2,
.promo-rules-guide h2,
.promo-compare-table h2,
.promo-support-ladder h2 {
margin-top: 0;
}
.promo-funnel-lead {
margin: 0 0 16px;
line-height: 1.7;
color: color-mix(in srgb, var(--on-surface) 84%, transparent);
}
.promo-funnel-steps {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.promo-funnel-step {
padding: 14px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--surface-bg, #224e60) 24%, rgba(255,255,255,0.25));
background: linear-gradient(165deg, rgba(255,255,255,0.86), rgba(255,255,255,0.65));
}
.promo-funnel-kicker {
display: inline-block;
margin-bottom: 8px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
color: #fff;
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 55%, #ffffff 45%) 100%);
}
.promo-funnel-step h3 {
margin: 0 0 8px;
font-size: 1rem;
}
.promo-funnel-step p {
margin: 0;
line-height: 1.6;
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
}
.promo-rules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 12px;
}
.promo-rules-grid article {
position: relative;
padding: 14px 14px 14px 16px;
border-radius: 14px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 10%, rgba(255,255,255,0.9));
border: 1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.35));
}
.promo-rules-grid article::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 45%, #fff 55%) 100%);
}
.promo-rules-grid h3 {
margin: 0 0 8px;
font-size: 1rem;
}
.promo-rules-grid p {
margin: 0;
line-height: 1.6;
}
.promo-table-wrap {
overflow-x: auto;
}
.promo-compare-table table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
}
.promo-compare-table th,
.promo-compare-table td {
padding: 11px 12px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--surface-bg, #224e60) 24%, rgba(255,255,255,0.3));
vertical-align: top;
}
.promo-compare-table thead th {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: color-mix(in srgb, var(--on-surface) 70%, transparent);
}
.promo-compare-table tbody tr:hover {
background: color-mix(in srgb, var(--surface-bg, #224e60) 8%, rgba(255,255,255,0.85));
}
.promo-support-intro {
margin: 0 0 14px;
line-height: 1.7;
}
.promo-support-lanes {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 12px;
}
.promo-support-lanes article {
border-radius: 14px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--surface-bg, #224e60) 24%, rgba(255,255,255,0.28));
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.68));
}
.promo-support-lanes h3 {
margin: 0 0 8px;
}
.promo-support-lanes p {
margin: 0;
line-height: 1.6;
}
@media (max-width: 920px) {
.promo-support-lanes {
grid-template-columns: 1fr;
}
}
/* Global brand refresh: grass green + sky blue */
.ribbon-tag,
.crosslink-icon-mark,
.hero-toy-cta,
.btn-signup,
.footer-bonus-btn {
background: var(--brand-gradient) !important;
}
.btn-signup {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
border-color: rgba(255, 255, 255, 0.95) !important;
}
.ribbon-tag,
.crosslink-icon-mark,
.hero-toy-cta,
.footer-bonus-btn,
.footer-bonus-btn span,
.btn-signup,
.btn-signup:hover {
color: #ffffff !important;
}
/* Prevent unreadable titles inside card-local blocks */
.ribbon-panel header {
background: transparent !important;
color: inherit !important;
position: static !important;
top: auto !important;
z-index: auto !important;
padding: 0 !important;
}
/* Readability pass: light purple section palette */
:root {
--lilac-soft-bg: #f6f1ff;
--lilac-soft-bg-2: #efe8ff;
--lilac-soft-border: #d7c7ff;
--lilac-soft-text: #1f2440;
--lilac-soft-muted: #4a5378;
}
.ribbon-panel {
background: linear-gradient(180deg, var(--lilac-soft-bg) 0%, var(--lilac-soft-bg-2) 100%) !important;
border: 1px solid var(--lilac-soft-border) !important;
}
.ribbon-panel::before {
background: linear-gradient(180deg, #cbb6ff 0%, rgba(203, 182, 255, 0.2) 100%) !important;
}
.ribbon-panel .block,
.ribbon-panel section.block,
.ribbon-panel .media-tabs,
.ribbon-panel .card,
.ribbon-panel .qa-block details,
.ribbon-panel table {
background: transparent !important;
color: var(--lilac-soft-text) !important;
}
.ribbon-panel .block.dark-surface {
background: linear-gradient(180deg, #f3edff 0%, #ebe4ff 100%) !important;
border-color: var(--lilac-soft-border) !important;
color: var(--lilac-soft-text) !important;
}
.ribbon-panel h1,
.ribbon-panel h2,
.ribbon-panel h3,
.ribbon-panel p,
.ribbon-panel li,
.ribbon-panel td,
.ribbon-panel th,
.ribbon-panel span,
.ribbon-panel a,
.ribbon-panel .block.dark-surface h1,
.ribbon-panel .block.dark-surface h2,
.ribbon-panel .block.dark-surface h3,
.ribbon-panel .block.dark-surface p,
.ribbon-panel .block.dark-surface li,
.ribbon-panel .block.dark-surface td,
.ribbon-panel .block.dark-surface th,
.ribbon-panel .block.dark-surface span,
.ribbon-panel .block.dark-surface a {
color: var(--lilac-soft-text) !important;
text-shadow: none !important;
}
.ribbon-panel .muted,
.ribbon-panel .block.dark-surface .muted {
color: var(--lilac-soft-muted) !important;
}
/* Legibilidade: cards .feature-row na faixa ribbon (fundo escuro + texto lilás) */
.ribbon-panel .feature-sections .feature-row {
background: color-mix(in srgb, #ffffff 92%, var(--lilac-soft-border) 8%) !important;
border: 1px solid var(--lilac-soft-border) !important;
}
.ribbon-panel .feature-sections .feature-table-wrapper {
background: color-mix(in srgb, #ffffff 90%, var(--lilac-soft-border) 10%) !important;
border: 1px solid var(--lilac-soft-border) !important;
}
/* Emoji: fontes de pictogramas (Windows/Android) para reduzir “quadrado” vazio */
.crosslink-icon-mark,
.feature-icon {
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.ribbon-panel table th {
background: #e7dbff !important;
}
/* Aplicativo-only experimental layouts */
.app-journey-block h2,
.app-device-matrix h2,
.app-ready-check h2,
.app-support-flow h2 {
margin-top: 0;
}
.app-journey-intro {
margin: 0 0 18px;
line-height: 1.7;
color: color-mix(in srgb, var(--on-surface) 82%, transparent);
}
.app-journey-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
}
.app-journey-timeline li {
position: relative;
padding: 18px 18px 18px 22px;
border-radius: 16px;
background: color-mix(in srgb, var(--surface-bg) 88%, #ffffff 12%);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.app-journey-timeline li::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 5px;
border-radius: 999px;
background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 38%, #ffffff 62%) 100%);
}
.app-journey-timeline h3 {
margin: 0 0 6px;
color: var(--heading-color);
}
.app-journey-timeline p {
margin: 0;
line-height: 1.65;
}
.app-device-table-wrap {
overflow-x: auto;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--color-primary) 15%, rgba(0,0,0,0.1));
}
.app-device-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.app-device-table th,
.app-device-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgba(0,0,0,0.1));
}
.app-device-table th {
background: color-mix(in srgb, var(--color-primary) 12%, #ffffff 88%);
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.app-device-table tr:last-child td {
border-bottom: 0;
}
.app-ready-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.app-ready-item {
border-radius: 14px;
padding: 16px;
background: linear-gradient(180deg, color-mix(in srgb, var(--surface-bg) 92%, #ffffff 8%), #ffffff);
border: 1px solid color-mix(in srgb, var(--color-primary) 15%, rgba(0,0,0,0.1));
}
.app-ready-item h3 {
margin: 0 0 8px;
font-size: 1.04rem;
}
.app-ready-item p {
margin: 0;
line-height: 1.65;
}
.app-support-flow {
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 16px;
align-items: start;
}
.app-support-main p {
margin-top: 0;
line-height: 1.7;
}
.app-support-main ul {
margin: 0;
padding-left: 20px;
display: grid;
gap: 6px;
}
.app-support-aside {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--color-primary) 8%, #ffffff 92%);
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.08));
}
.app-support-aside h3 {
margin: 0 0 10px;
font-size: 1rem;
}
.app-support-aside dl {
margin: 0;
display: grid;
gap: 8px;
}
.app-support-aside dl div {
display: flex;
justify-content: space-between;
gap: 12px;
padding-bottom: 6px;
border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 22%, rgba(0,0,0,0.1));
}
.app-support-aside dl div:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.app-support-aside dt {
font-weight: 600;
}
.app-support-aside dd {
margin: 0;
font-weight: 700;
color: var(--color-primary);
}
@media (max-width: 920px) {
.app-ready-grid {
grid-template-columns: 1fr;
}
.app-support-flow {
grid-template-columns: 1fr;
}
}
/* Apostas esportivas unique layouts */
.sports-odds-ladder h2,
.sports-market-radar h2,
.sports-bankroll-board h2,
.sports-matchday-protocol h2 {
margin-top: 0;
}
.sports-odds-intro {
margin: 0 0 16px;
line-height: 1.7;
}
.sports-odds-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.sports-odds-steps article {
padding: 16px;
border-radius: 14px;
background: linear-gradient(165deg, color-mix(in srgb, var(--color-primary) 8%, #ffffff 92%), #ffffff);
border: 1px solid color-mix(in srgb, var(--color-primary) 24%, rgba(0,0,0,0.08));
position: relative;
}
.sports-odds-steps article::after {
content: "";
position: absolute;
right: 12px;
top: 10px;
width: 36px;
height: 3px;
border-radius: 999px;
background: var(--color-primary);
opacity: 0.55;
}
.sports-odds-steps h3 {
margin: 0 0 8px;
font-size: 1.02rem;
}
.sports-odds-steps p {
margin: 0;
line-height: 1.62;
}
.sports-radar-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.sports-radar-card {
border-radius: 16px;
padding: 18px;
background: color-mix(in srgb, var(--surface-bg) 86%, #ffffff 14%);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, rgba(0,0,0,0.1));
box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}
.sports-radar-card h3 {
margin: 0 0 8px;
}
.sports-radar-card p {
margin: 0;
line-height: 1.65;
}
.sports-bankroll-table-wrap {
margin-top: 10px;
overflow-x: auto;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.12));
}
.sports-bankroll-table {
width: 100%;
min-width: 780px;
border-collapse: collapse;
}
.sports-bankroll-table th,
.sports-bankroll-table td {
padding: 11px 13px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgba(0,0,0,0.12));
}
.sports-bankroll-table th {
background: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.sports-bankroll-table tr:last-child td {
border-bottom: 0;
}
.sports-matchday-protocol {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 16px;
align-items: start;
}
.sports-matchday-main p {
margin-top: 0;
line-height: 1.72;
}
.sports-matchday-main ol {
margin: 0;
padding-left: 20px;
display: grid;
gap: 8px;
}
.sports-matchday-side {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--color-primary) 9%, #ffffff 91%);
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.08));
}
.sports-matchday-side h3 {
margin: 0 0 10px;
}
.sports-matchday-side ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
@media (max-width: 920px) {
.sports-odds-steps,
.sports-radar-grid {
grid-template-columns: 1fr;
}
.sports-matchday-protocol {
grid-template-columns: 1fr;
}
}
/* Cadastre-se exclusive layouts */
.cad-access-flow h2,
.cad-verify-lane h2,
.cad-risk-board h2,
.cad-first-week h2 {
margin-top: 0;
}
.cad-access-sub {
margin: 0 0 16px;
line-height: 1.7;
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
}
.cad-flow-track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.cad-flow-track article {
border-radius: 14px;
padding: 14px;
background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--surface-bg) 80%, #ffffff 20%));
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.08));
}
.cad-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 999px;
margin-bottom: 10px;
font-weight: 800;
color: #fff;
background: linear-gradient(140deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, #ffffff 38%));
}
.cad-flow-track h3 {
margin: 0 0 8px;
font-size: 1.02rem;
}
.cad-flow-track p {
margin: 0;
line-height: 1.62;
}
.cad-verify-head p {
margin: 0 0 14px;
line-height: 1.68;
}
.cad-verify-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.cad-verify-card {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--surface-bg) 84%, #ffffff 16%);
border: 1px dashed color-mix(in srgb, var(--color-primary) 28%, rgba(0,0,0,0.08));
}
.cad-verify-card h3 {
margin: 0 0 8px;
}
.cad-verify-card ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
.cad-risk-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.cad-risk-col {
border-radius: 14px;
padding: 16px;
border: 1px solid rgba(0,0,0,0.08);
}
.cad-risk-col.ok {
background: linear-gradient(180deg, rgba(47, 158, 68, 0.12), rgba(47, 158, 68, 0.03));
border-color: rgba(47, 158, 68, 0.35);
}
.cad-risk-col.warn {
background: linear-gradient(180deg, rgba(214, 51, 108, 0.13), rgba(214, 51, 108, 0.03));
border-color: rgba(214, 51, 108, 0.34);
}
.cad-risk-col h3 {
margin: 0 0 8px;
}
.cad-risk-col ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
.cad-weekline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 8px;
}
.cad-weekline article {
border-radius: 12px;
padding: 14px;
background: color-mix(in srgb, var(--surface-bg) 88%, #ffffff 12%);
border-top: 3px solid var(--color-primary);
border-left: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.1));
border-right: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.1));
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.1));
}
.cad-weekline h3 {
margin: 0 0 8px;
font-size: 1rem;
}
.cad-weekline p {
margin: 0;
line-height: 1.62;
}
@media (max-width: 980px) {
.cad-flow-track,
.cad-weekline {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.cad-verify-columns,
.cad-risk-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.cad-flow-track,
.cad-weekline {
grid-template-columns: 1fr;
}
}
/* Cassino online exclusive layouts */
.casino-floor-map h2,
.casino-session-modes h2,
.casino-trust-console h2,
.casino-night-plan h2 {
margin-top: 0;
}
.casino-floor-lead {
margin: 0 0 16px;
line-height: 1.7;
}
.casino-floor-lanes {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.casino-floor-lanes article {
position: relative;
padding: 14px 16px 14px 20px;
border-radius: 14px;
background: color-mix(in srgb, var(--surface-bg) 82%, #ffffff 18%);
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.08));
}
.casino-floor-lanes article::before {
content: "";
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 6px;
border-radius: 999px;
background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 45%, #ffffff 55%));
}
.casino-floor-lanes h3 {
margin: 0 0 6px;
}
.casino-floor-lanes p {
margin: 0;
line-height: 1.64;
}
.casino-modes-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.casino-mode-card {
border-radius: 14px;
padding: 14px;
background: linear-gradient(160deg, #ffffff, color-mix(in srgb, var(--surface-bg) 76%, #ffffff 24%));
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.casino-mode-card header {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: baseline;
margin-bottom: 8px;
}
.casino-mode-card h3 {
margin: 0;
}
.casino-mode-card header span {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.casino-mode-card p {
margin: 0;
line-height: 1.62;
}
.casino-console-wrap {
overflow-x: auto;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.12));
}
.casino-console-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.casino-console-table th,
.casino-console-table td {
padding: 12px 12px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgba(0,0,0,0.1));
}
.casino-console-table th {
background: color-mix(in srgb, var(--color-primary) 12%, #ffffff 88%);
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.casino-console-table tr:last-child td {
border-bottom: 0;
}
.casino-night-plan {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: 16px;
align-items: start;
}
.casino-night-main p {
margin-top: 0;
line-height: 1.7;
}
.casino-night-main ol {
margin: 0;
padding-left: 20px;
display: grid;
gap: 7px;
}
.casino-night-aside {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--color-primary) 9%, #ffffff 91%);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.casino-night-aside h3 {
margin: 0 0 10px;
}
.casino-night-aside ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
@media (max-width: 920px) {
.casino-modes-grid {
grid-template-columns: 1fr;
}
.casino-night-plan {
grid-template-columns: 1fr;
}
}
/* Home page unique layouts */
.home-signal-deck h2,
.home-playbook h2,
.home-route-board h2,
.home-confidence-panel h2,
.home-lighthouse h2 {
margin-top: 0;
}
.home-signal-intro {
margin: 0 0 14px;
line-height: 1.7;
}
.home-signal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.home-signal-grid article {
border-radius: 14px;
padding: 14px;
background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--surface-bg) 84%, #ffffff 16%));
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.08));
}
.home-signal-grid h3 {
margin: 0 0 8px;
}
.home-signal-grid p {
margin: 0;
line-height: 1.63;
}
.home-playbook-track {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.home-playbook-track article {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--surface-bg) 88%, #ffffff 12%);
border-top: 3px solid var(--color-primary);
border-left: 1px solid color-mix(in srgb, var(--color-primary) 22%, rgba(0,0,0,0.08));
border-right: 1px solid color-mix(in srgb, var(--color-primary) 22%, rgba(0,0,0,0.08));
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 22%, rgba(0,0,0,0.08));
}
.home-playbook-k {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
margin-bottom: 8px;
font-weight: 800;
color: #fff;
background: var(--color-primary);
}
.home-playbook-track h3 {
margin: 0 0 6px;
}
.home-playbook-track p {
margin: 0;
line-height: 1.62;
}
.home-route-table-wrap {
overflow-x: auto;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.1));
}
.home-route-table {
width: 100%;
min-width: 820px;
border-collapse: collapse;
}
.home-route-table th,
.home-route-table td {
padding: 11px 12px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgba(0,0,0,0.1));
}
.home-route-table th {
background: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
font-size: 0.9rem;
}
.home-route-table tr:last-child td {
border-bottom: 0;
}
.home-route-table a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 700;
}
.home-confidence-panel {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 16px;
align-items: start;
}
.home-confidence-main p {
margin-top: 0;
line-height: 1.68;
}
.home-confidence-main ul {
margin: 0;
padding-left: 20px;
display: grid;
gap: 6px;
}
.home-confidence-side {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--color-primary) 9%, #ffffff 91%);
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.08));
}
.home-confidence-side h3 {
margin: 0 0 10px;
}
.home-confidence-side dl {
margin: 0;
display: grid;
gap: 8px;
}
.home-confidence-side dl div {
display: flex;
justify-content: space-between;
gap: 10px;
border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 24%, rgba(0,0,0,0.1));
padding-bottom: 6px;
}
.home-confidence-side dl div:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.home-confidence-side dt {
font-weight: 600;
}
.home-confidence-side dd {
margin: 0;
color: var(--color-primary);
font-weight: 700;
}
.home-lighthouse-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.home-lighthouse-columns article {
border-radius: 14px;
padding: 15px;
background: linear-gradient(155deg, color-mix(in srgb, var(--surface-bg) 82%, #ffffff 18%), #ffffff);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
box-shadow: 0 10px 20px rgba(0,0,0,0.04);
}
.home-lighthouse-columns h3 {
margin: 0 0 8px;
}
.home-lighthouse-columns p {
margin: 0;
line-height: 1.64;
}
@media (max-width: 980px) {
.home-signal-grid,
.home-playbook-track,
.home-lighthouse-columns {
grid-template-columns: 1fr;
}
.home-confidence-panel {
grid-template-columns: 1fr;
}
}
/* Jogos page unique layouts */
.games-discovery-lab h2,
.games-mode-switcher h2,
.games-balance-matrix h2,
.games-progress-compass h2 {
margin-top: 0;
}
.games-lab-intro {
margin: 0 0 14px;
line-height: 1.7;
}
.games-lab-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.games-lab-grid article {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--surface-bg) 86%, #ffffff 14%);
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.08));
}
.games-lab-grid h3 {
margin: 0 0 8px;
}
.games-lab-grid p {
margin: 0;
line-height: 1.62;
}
.games-mode-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.games-mode-card {
border-radius: 14px;
padding: 14px;
background: linear-gradient(160deg, #ffffff, color-mix(in srgb, var(--surface-bg) 78%, #ffffff 22%));
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.games-mode-card header {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: baseline;
margin-bottom: 8px;
}
.games-mode-card h3 {
margin: 0;
}
.games-mode-card header span {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-primary);
}
.games-mode-card p {
margin: 0;
line-height: 1.62;
}
.games-balance-wrap {
overflow-x: auto;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.1));
}
.games-balance-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.games-balance-table th,
.games-balance-table td {
padding: 11px 12px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgba(0,0,0,0.1));
}
.games-balance-table th {
background: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
font-size: 0.9rem;
}
.games-balance-table tr:last-child td {
border-bottom: 0;
}
.games-progress-compass {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: 16px;
align-items: start;
}
.games-compass-main p {
margin-top: 0;
line-height: 1.7;
}
.games-compass-main ol {
margin: 0;
padding-left: 20px;
display: grid;
gap: 7px;
}
.games-compass-side {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--color-primary) 9%, #ffffff 91%);
border: 1px solid color-mix(in srgb, var(--color-primary) 20%, rgba(0,0,0,0.08));
}
.games-compass-side h3 {
margin: 0 0 10px;
}
.games-compass-side ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
@media (max-width: 980px) {
.games-lab-grid,
.games-mode-cards {
grid-template-columns: 1fr;
}
.games-progress-compass {
grid-template-columns: 1fr;
}
}
/* Link de acesso unique layouts */
.access-gateway-matrix h2,
.access-signal-console h2,
.access-journey-strip h2,
.access-recovery-pulse h2 {
margin-top: 0;
}
.access-gateway-intro {
margin: 0 0 14px;
line-height: 1.7;
}
.access-gateway-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.access-gateway-grid article {
border-radius: 14px;
padding: 14px;
background: linear-gradient(170deg, #ffffff, color-mix(in srgb, var(--surface-bg) 80%, #ffffff 20%));
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.access-gateway-grid h3 {
margin: 0 0 8px;
}
.access-gateway-grid p {
margin: 0;
line-height: 1.62;
}
.access-console-wrap {
overflow-x: auto;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.1));
}
.access-console-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.access-console-table th,
.access-console-table td {
padding: 11px 12px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgba(0,0,0,0.1));
}
.access-console-table th {
background: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
font-size: 0.9rem;
}
.access-console-table tr:last-child td {
border-bottom: 0;
}
.access-strip-track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.access-strip-track article {
border-radius: 13px;
padding: 14px;
background: color-mix(in srgb, var(--surface-bg) 86%, #ffffff 14%);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.access-strip-track article span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 999px;
margin-bottom: 8px;
font-weight: 800;
color: #fff;
background: var(--color-primary);
}
.access-strip-track h3 {
margin: 0 0 7px;
font-size: 1rem;
}
.access-strip-track p {
margin: 0;
line-height: 1.6;
}
.access-recovery-pulse {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 16px;
align-items: start;
}
.access-pulse-main p {
margin-top: 0;
line-height: 1.68;
}
.access-pulse-main ol {
margin: 0;
padding-left: 20px;
display: grid;
gap: 7px;
}
.access-pulse-aside {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--color-primary) 9%, #ffffff 91%);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.access-pulse-aside h3 {
margin: 0 0 10px;
}
.access-pulse-aside ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
@media (max-width: 980px) {
.access-gateway-grid {
grid-template-columns: 1fr;
}
.access-strip-track {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.access-recovery-pulse {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.access-strip-track {
grid-template-columns: 1fr;
}
}
/* Plataforma page unique layouts */
.platform-stack-map h2,
.platform-ux-channels h2,
.platform-integrity-board h2,
.platform-operational-compass h2 {
margin-top: 0;
}
.platform-stack-intro {
margin: 0 0 14px;
line-height: 1.7;
}
.platform-stack-layers {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.platform-stack-layers article {
border-radius: 14px;
padding: 14px;
background: linear-gradient(175deg, #ffffff, color-mix(in srgb, var(--surface-bg) 82%, #ffffff 18%));
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.platform-stack-layers h3 {
margin: 0 0 8px;
}
.platform-stack-layers p {
margin: 0;
line-height: 1.62;
}
.platform-ux-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.platform-ux-card {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--surface-bg) 86%, #ffffff 14%);
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.08));
}
.platform-ux-card header {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: baseline;
margin-bottom: 8px;
}
.platform-ux-card h3 {
margin: 0;
}
.platform-ux-card header span {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-primary);
}
.platform-ux-card p {
margin: 0;
line-height: 1.62;
}
.platform-integrity-wrap {
overflow-x: auto;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, rgba(0,0,0,0.1));
}
.platform-integrity-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.platform-integrity-table th,
.platform-integrity-table td {
padding: 11px 12px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgba(0,0,0,0.1));
}
.platform-integrity-table th {
background: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
font-size: 0.9rem;
}
.platform-integrity-table tr:last-child td {
border-bottom: 0;
}
.platform-operational-compass {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 16px;
align-items: start;
}
.platform-ops-main p {
margin-top: 0;
line-height: 1.68;
}
.platform-ops-main ol {
margin: 0;
padding-left: 20px;
display: grid;
gap: 7px;
}
.platform-ops-side {
border-radius: 14px;
padding: 14px;
background: color-mix(in srgb, var(--color-primary) 9%, #ffffff 91%);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(0,0,0,0.08));
}
.platform-ops-side h3 {
margin: 0 0 10px;
}
.platform-ops-side ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
@media (max-width: 980px) {
.platform-stack-layers,
.platform-ux-grid {
grid-template-columns: 1fr;
}
.platform-operational-compass {
grid-template-columns: 1fr;
}
}
/* Source: apostas-esportivas.html */
:root { --color-primary: #2fc66b; --color-secondary: #f3fbff; --color-muted: #def7ea; --on-primary: #ffffff; --on-secondary: #102a43; --btn-bg: #2fc66b; --btn-fg: #ffffff; --footer-bg: #2fc66b; --header-bg: #2fc66b; --on-header: #ffffff; --on-footer: #ffffff; --heading-color: #0f8a4a; --surface-bg: #e3f7ff; --on-surface: #0c2f3d; --toy-header-bg: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); --toy-btn-bg: #2fc66b; --toy-btn-color: #ffffff; --toy-nav-color: #ffffff; --color-accent-sky: #44baf5; --brand-gradient: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial, sans-serif; margin:0; color: var(--on-secondary); background: var(--color-secondary); font-size:14px; }
main { max-width: 1080px; margin: auto; padding: 16px; }
/* Header layout */
body > header { background: var(--brand-gradient); color: var(--on-header); position: sticky; top: 0; z-index: 1000; padding: 16px 0; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:nowrap; }
header img { border-radius:8px; }
header img.logo-square { width:52px; height:auto; }
header img.logo-landscape { width:auto; height:48px; max-width: 180px; object-fit: contain; }
.brand { display:flex; align-items:center; gap:12px; }
.nav-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; }
.nav-center a { text-decoration:none; font-weight:600; color: var(--on-header); padding:4px 8px; border-radius:999px; transition: background-color .15s ease, color .15s ease; white-space:nowrap; font-size:0.88rem; }
.kw-highlight { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.nav-center a.nav-child { font-size:0.92em; opacity:.85; padding-left:12px; position:relative; }
.nav-center a.nav-child::before { content:"•"; font-size:0.75em; margin-right:4px; vertical-align:middle; }
.nav-center a:hover { background: color-mix(in srgb, var(--on-header) 18%, rgba(255,255,255,0.2)); color: var(--on-header); }
@media (prefers-color-scheme: dark) {
.nav-center a { color:#fff; }
.nav-center a:hover { background: color-mix(in srgb, #ffffff 22%, rgba(255,255,255,0.05)); color:#fff; }
}
.actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; flex:0 0 auto; }
.menu.responsive { display:none; }
/* Buttons */
.btn {margin-top: 1.5rem; display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration:none; border:1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-weight:700; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease, color .12s ease; }
/* Remove margin-top for buttons in header */
header .btn { margin-top: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); opacity:.98; background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login:hover { background: color-mix(in srgb, #ffffff 82%, var(--color-secondary) 18%); color: var(--color-secondary); }
.btn-signup:hover { background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); font-weight:700; }
.btn-signup { background: transparent; color: var(--color-primary); font-weight:700; }
/* Ensure login stays visible on header background */
header .btn-login { color: var(--on-header); border-color: var(--on-header); }
header .btn-login:hover { background: color-mix(in srgb, var(--on-header) 20%, transparent); color: var(--on-header); }
/* Ensure signup stays visible on primary header background */
header .btn-signup { background: var(--on-primary); color: var(--color-primary); border-color: var(--on-primary); }
header .btn-signup:hover { background: color-mix(in srgb, var(--on-primary) 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-buy { background: transparent; color:#111; border-color:#111; font-weight:700; }
/* Mobile-only top CTA (hidden on desktop) */
.top-cta { display:none; }
/* Burger */
.burger { display:none; border:none; width:44px; height:36px; padding:6px; border-radius:10px; background: color-mix(in srgb, var(--color-primary) 20%, white); color: var(--on-primary); align-items:center; justify-content:center; }
.burger i { font-size:18px; }
/* Mobile */
@media (max-width: 720px) {
header img.logo-landscape { max-width: 100px; height: 40px; }
body { font-size:13px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:12px; }
.brand { flex:0 0 auto; }
.nav-center { display:none; }
.actions { flex:0 0 auto; justify-content:center; gap:10px; }
.actions .btn { padding:8px 14px; font-size:13px; line-height:1.2; margin-top:0; }
.burger { display:inline-flex; justify-self:end; }
.menu.responsive { display:none; position:absolute; top:64px; left:0; right:0; background: var(--color-primary); color: var(--on-primary); border-top:1px solid rgba(255,255,255,0.15); padding:12px; flex-direction:column; gap:8px; }
.menu.responsive.open { display:flex; }
header img { width:42px; height:42px; }
main .block img,
main .card img {
width:100%;
display:block;
object-fit:cover;
border-radius:16px;
aspect-ratio:1 / 1;
}
main .block.hero img,
.hero-banner img,
.hero-banner {
aspect-ratio:auto;
border-radius:18px;
}
.hero-logo-wrapper { width:100%; max-width: calc(100vw - 32px); margin:24px auto 0; }
.hero-logo-wrapper img { width:100%; height:100%; max-width:100%; aspect-ratio:1/1; }
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
position:relative;
width:100%;
max-width: calc(100vw - 32px);
margin:0 auto 16px;
}
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content:"";
display:block;
padding-top:100%;
}
main .block:not(.hero) figure img,
main .card picture img,
main .card .figure-wrapper img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
}
.hero-banner { border-radius:14px; }
.hero-banners { gap:10px; margin-bottom:14px; }
.floating-corner-stack { right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:40vw; }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* Ensure media right-left blocks stack with text above image on mobile */
.swap-mobile .text { order: 1; }
.swap-mobile .figure { order: 2; }
/* Mobile fixed footer CTA: prevent overflow on narrow screens */
.footer-bonus-btn {
font-size:18px;
padding:14px 14px;
width:100%;
border-radius:16px;
box-sizing:border-box;
flex-wrap:wrap;
row-gap:8px;
}
.footer-bonus-btn span {
font-size:18px;
flex:1 1 100%;
min-width:0;
white-space:normal;
word-break:break-word;
line-height:1.2;
}
.footer-bonus-btn .fa-gift { font-size:1.15em; }
.footer-bonus-btn.floating {
padding-top:14px;
padding-bottom:max(14px, env(safe-area-inset-bottom));
padding-left:max(14px, env(safe-area-inset-left));
padding-right:max(14px, env(safe-area-inset-right));
}
body.floating-bonus-active { padding-bottom:150px; }
.footer-icon-row { gap:12px; padding:0; }
.footer-icon-row.payments i { font-size:2.4rem; }
.footer-icon-row.social i { font-size:1.5rem; }
.footer-copy h2 { font-size:1rem; }
}
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a.nav-child { padding-left: 24px; font-size: 0.95em; opacity: .9; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
.header-toy { border-bottom: 1px solid rgba(0,0,0,0.08); background: var(--toy-header-bg); padding: 18px clamp(12px,4vw,32px) 10px; }
.header-toy .toy-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-toy .toy-top.two-row {
position:relative;
justify-content:center;
gap:0;
padding:0 150px 0 60px;
min-height:64px;
}
.header-toy .toy-logo-center {
text-align:center;
flex:1;
display:flex;
justify-content:center;
}
.header-toy .toy-logo-center img { max-height:58px; width:auto; display:inline-block; }
.header-toy .toy-actions.align-right {
position:absolute;
right:60px;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
}
.header-toy .toy-logo img { max-height:48px; width:auto; display:block; }
.header-toy .toy-logo-text { font-size:1.4rem; font-weight:700; color:#111; letter-spacing:0.08em; }
.header-toy .toy-actions { display:flex; align-items:center; gap:12px; }
.header-toy .toy-btn { padding:10px 22px; border-radius:999px; border:1px solid var(--toy-btn-bg); background:var(--toy-btn-bg); color:var(--toy-btn-color); font-weight:600; text-decoration:none; transition:.15s ease; }
.header-toy .toy-btn:hover { opacity:.85; }
.header-toy .toy-btn.toy-auth { background:#fff; color:#111; border-color:#ddd; }
.header-toy .toy-btn.toy-auth.secondary { background:transparent; color:#111; border-color:#111; }
.header-toy .toy-burger { display:none; border:none; background:none; font-size:1.4rem; padding:6px; cursor:pointer; }
.toy-nav { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px clamp(8px,4vw,32px) 14px; }
.toy-nav .nav-link { text-decoration:none; color: var(--toy-nav-color); font-weight:600; position:relative; padding-bottom:6px; }
.toy-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#000; }
.toy-nav .nav-link.nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile { display:none; flex-direction:column; gap:10px; padding:12px clamp(8px,4vw,24px); border-top:1px solid rgba(0,0,0,0.08); }
.toy-nav-mobile a { text-decoration:none; color: var(--toy-nav-color); font-weight:600; }
.toy-nav-mobile .nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile.open { display:flex; }
@media (max-width: 920px) {
.toy-nav { display:none; }
.header-toy .toy-burger { display:inline-flex; }
.header-toy .toy-btn { font-size:0.9rem; padding:8px 18px; }
}
.toy-nav-divider {
width:100%;
height:1px;
background:rgba(0,0,0,0.12);
margin:12px 0 8px;
}
@media (max-width: 720px) {
.header-toy .toy-top.two-row { padding-right:0; flex-direction:column; }
.header-toy .toy-actions.align-right {
position:static;
transform:none;
width:100%;
justify-content:center;
margin-top:10px;
}
}
@media (max-width: 540px) {
.header-toy .toy-logo img { max-height:40px; }
.header-toy .toy-btn { display:inline-flex; }
.toy-nav-mobile { font-size:0.95rem; }
}
.container { padding: 12px; }
body.mazu-site .container { width:100%; max-width:100%; padding:0; }
.block {
padding: 24px;
border-radius: 14px;
margin: 16px 0;
background: var(--surface-bg);
border: 1px solid color-mix(in srgb, var(--surface-bg) 78%, rgba(0,0,0,0.2));
color: var(--on-surface);
transition: background-color .2s ease, color .2s ease;
}
.block p, .block li, .block span, .block td, .block th, .block a {
color: inherit;
}
.block .muted {
color: color-mix(in srgb, var(--on-surface) 72%, rgba(255,255,255,0) 28%);
}
.block.dark-surface {
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface td,
.block.dark-surface span,
.block.dark-surface a {
color: #fff;
}
.block.dark-surface .muted {
color: rgba(255,255,255,0.78);
}
body.style-28g { overflow-x:hidden; }
body.style-28g main {
max-width: 100%;
padding: 0;
}
body.style-28g main .block {
margin: 0;
border-radius: 0;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: clamp(32px, 6vw, 80px);
display:flex;
flex-direction:column;
align-items:center;
gap: clamp(18px,3vw,32px);
}
body.style-28g main .block + .block {
margin-top: 0;
}
body.style-28g main .block > *:not(style):not(script) {
width: min(1080px, 100%);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px) {
body.style-28g main .block > *:not(style):not(script) {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
}
body.style-28g main .block:nth-of-type(odd) {
background: color-mix(in srgb, var(--color-primary) 85%, #000000 15%);
color: var(--on-primary);
}
body.style-28g main .block:nth-of-type(odd) h1,
body.style-28g main .block:nth-of-type(odd) h2,
body.style-28g main .block:nth-of-type(odd) h3,
body.style-28g main .block:nth-of-type(odd) p,
body.style-28g main .block:nth-of-type(odd) li {
color: inherit;
}
body.style-28g main .block:nth-of-type(even) {
background: color-mix(in srgb, var(--color-secondary) 85%, #ffffff 15%);
color: var(--on-secondary);
}
body.style-28g main .block:nth-of-type(even) .muted {
color: color-mix(in srgb, var(--on-secondary) 65%, rgba(0,0,0,0) 35%);
}
.grid { display:grid; gap:16px; }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Responsive wrapping for dense card grids to avoid over-compression */
@media (max-width: 1024px) { .grid.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 880px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.muted { color: color-mix(in srgb, var(--on-surface) 55%, rgba(255,255,255,0) 45%); }
/* Hero layout helper */
.hero .hero-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; align-items:center; }
@media (max-width: 720px) { .hero .hero-grid { grid-template-columns: 1fr; } }
.hero-banners { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.hero-banner { display:block; border-radius:16px; overflow:hidden; background: var(--color-secondary); box-shadow: 0 12px 26px rgba(0,0,0,0.14); transition: transform .18s ease, box-shadow .18s ease; }
.hero-banner img { width:100%; display:block; object-fit:cover; }
.hero-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,0.2); }
.hero-logo-wrapper { margin:24px auto 0; width:100%; max-width:512px; }
.hero-logo-wrapper img { width:100% !important; max-width:512px; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); display:block; margin:0 auto; }
/* Hero toy variant */
.hero.hero-toy {
position: relative;
padding: clamp(48px, 12vw, 120px) 16px;
border-radius: 28px;
background: linear-gradient(135deg, #f7a5c5, #ffd966);
background-size: cover;
background-position: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.hero-toy-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
backdrop-filter: blur(2px);
}
.hero-toy-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-toy-logo {
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.hero-toy-logo img {
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
object-fit: contain;
border-radius: 28px;
background: rgba(255,255,255,0.1);
padding: 12px;
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
.hero-toy-logo-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
border-radius: 28px;
background: rgba(0,0,0,0.35);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.hero-toy-cta-wrap {
width: 100%;
display:flex;
justify-content:center;
}
.hero-toy-body h1 {
font-size: clamp(1.8rem, 4.4vw, 3rem);
margin: 0;
color: #fff;
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.hero-toy-body p {
display: block;
margin: 12px auto;
padding: 14px 18px;
border-radius: 18px;
background: rgba(0,0,0,0.45);
max-width: 720px;
font-size: 1.05rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
.hero-toy-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 42px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #ff6cab 0%, #ff9a44 100%);
color: #111;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
transition: transform .2s ease, box-shadow .2s ease;
}
.hero-toy-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,0.4);
}
.hero-toy-photo img {
width: clamp(220px, 28vw, 320px);
height: clamp(220px, 28vw, 320px);
border-radius: 28px;
object-fit: cover;
background: rgba(0,0,0,0.1);
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
@media (max-width: 540px) {
.hero.hero-toy {
border-radius: 20px;
padding: 48px 12px;
}
.hero-toy-logo img,
.hero-toy-logo-text {
width: min(320px, 90vw);
height: min(320px, 90vw);
border-radius: 32px;
}
.hero-toy-body p {
width: 100%;
box-sizing: border-box;
font-size: 0.98rem;
}
.hero-toy-cta {
width: 100%;
max-width: 320px;
}
}
.style-28g .hero.hero-toy {
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
border-radius: 0;
}
.floating-corner-stack { position:fixed; right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:13rem; display:flex; flex-direction:column; gap:16px; align-items:center; z-index:1100; padding:0 4px; }
.floating-corner-stack.hidden { display:none !important; }
.floating-corner-banner { display:flex; flex-direction:column; align-items:center; width:100%; border-radius:16px; overflow:visible; background:transparent; transition: transform .2s ease; text-decoration:none; gap:8px; }
.floating-corner-banner img {
width:72px;
height:auto;
display:block;
margin:0 auto;
}
/* 右側動圖文字背景不透明 */
.floating-corner-banner .floating-caption {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
margin:0 auto;
padding:8px 12px;
border-radius:14px;
background: color-mix(in srgb, var(--color-primary) 90%, #000000 10%);
color: #ffffff;
text-align:center;
box-shadow:0 4px 18px rgba(0,0,0,0.2);
max-width:100%;
width:100%;
}
.floating-caption-line { display:block; font-size:0.78rem; font-weight:600; line-height:1.3; letter-spacing:0.2px; white-space:nowrap; }
@media (max-width: 720px) {
/* Restore Floating Banners but scaled and safe */
.floating-corner-stack {
display: flex !important;
top: auto;
bottom: 90px;
right: 4px;
left: auto;
transform: none;
flex-direction: column;
align-items: flex-end;
width: auto;
max-width: 120px;
gap: 8px;
z-index: 1050;
}
.floating-corner-banner {
width: 100%;
align-items: flex-end;
}
.floating-corner-banner img {
width: 48px;
height: auto;
}
/* Hide caption on mobile to prevent clutter/overflow */
.floating-corner-banner .floating-caption {
display: none;
}
.floating-close-banners {
top: auto;
bottom: 150px;
right: 6px;
}
.floating-close-bonus {
right: 8px;
bottom: 78px;
}
/* Fix CTA button layout */
.btn {
font-size: 0.9rem !important;
padding: 8px 16px !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
display: inline-block;
}
/* Ensure text wraps correctly */
.block p, .block li, .block span, h1, h2, h3 {
word-break: break-word;
overflow-wrap: anywhere;
}
}
.floating-corner-banner:hover { transform: translateY(-3px) scale(1.03); }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* More interactive hovers */
.block figure img { transition: transform .18s ease, box-shadow .18s ease; }
.block figure img:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
table tr:hover td { background: color-mix(in srgb, var(--btn-bg) 8%, #ffffff); }
footer { color: var(--on-footer); border-top: 1px solid rgba(255,255,255,0.15); background: var(--footer-bg); padding: 24px 0; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; text-align:center; }
.footer-logo { margin-bottom: 12px; display:flex; justify-content:center; }
.footer-logo img { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.footer-bonus-btn { display:flex; align-items:center; justify-content:center; gap:12px; background: var(--color-secondary); color: var(--color-primary); text-decoration:none; font-weight:800; font-size:26px; border-radius:18px; padding:18px 28px; margin:16px auto; width:min(100%, 720px); box-shadow: 0 18px 32px rgba(0,0,0,0.24); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; position:relative; box-sizing:border-box; }
/* Footer按鈕文字加亮 */
.footer-bonus-btn span {
flex:1;
text-align:center;
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.6);
font-size:26px;
font-weight:800;
letter-spacing:0.4px;
}
.footer-bonus-btn .fa-gift { color:#ffcc33; font-size:1.35em; animation: footer-gift-pulse 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes footer-gift-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.footer-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px rgba(0,0,0,0.28); }
.footer-bonus-btn.floating { position:fixed; left:0; right:0; bottom:0; width:100%; margin:0; padding:20px clamp(20px, 4vw, 36px); border-radius:0; box-shadow: 0 -6px 28px rgba(0,0,0,0.3); transform:none; z-index:1200; box-sizing:border-box; }
body.floating-bonus-active { padding-bottom:160px; transition: padding-bottom .2s ease; }
body.bonus-float-hidden .footer-bonus-btn.floating { display:none !important; }
body.bonus-float-hidden { padding-bottom:0 !important; }
.floating-close {
position:fixed;
width:28px;
height:28px;
border:1px solid rgba(255,255,255,0.6);
border-radius:50%;
background:rgba(0,0,0,0.72);
color:#fff;
font-size:18px;
line-height:1;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:1301;
box-shadow:0 6px 14px rgba(0,0,0,0.28);
}
.floating-close:hover { background:rgba(0,0,0,0.86); }
.floating-close-bonus { right:10px; bottom:120px; display:none; }
body.floating-bonus-active:not(.bonus-float-hidden) .floating-close-bonus { display:flex; }
.floating-close-banners { right:10px; top:calc(50% - 118px); }
.footer-copy, .footer-payments, .footer-social { margin:24px auto 0; text-align:center; max-width:960px; }
.footer-copy h2 { font-size:1.12rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.3px; }
.footer-copy p { margin:0; color: color-mix(in srgb, var(--on-footer) 85%, rgba(255,255,255,0.55)); line-height:1.6; }
.footer-payments h3, .footer-social h3 { font-size:1.02rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.4px; text-transform:uppercase; }
.footer-icon-row { display:flex; justify-content:center; align-items:center; gap:18px; padding:0; background:transparent; flex-wrap:wrap; }
.footer-icon-row a { display:flex; align-items:center; justify-content:center; color: inherit; text-decoration:none; min-width:88px; padding:16px; border-radius:18px; background: rgba(0,0,0,0.2); box-shadow: 0 12px 24px rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.1); transition: transform .2s ease, box-shadow .2s ease; }
.footer-icon-row a:hover, .footer-icon-row a:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0,0,0,0.18); background: rgba(0,0,0,0.3); }
.footer-icon-row.payments a { min-width:130px; padding:20px; }
/* Footer icon使用加亮的主色/輔色 */
.footer-icon-row i {
color: #ffffff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
transition: color .2s ease, transform .2s ease, filter .2s ease;
font-size:2.4rem;
}
.footer-icon-row.payments i { font-size:2.8rem; }
.footer-icon-row.social i { font-size:1.8rem; }
.footer-icon-row a:hover i, .footer-icon-row a:focus-visible i {
color:#ffae00;
filter: brightness(1.2);
transform: translateY(-3px);
}
.footer-icon-row a:focus-visible { outline:2px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.5)); outline-offset:4px; box-shadow: 0 14px 28px rgba(0,0,0,0.15); }
body.footer-secondary-light .footer-icon-row i { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a:hover i, body.footer-secondary-light .footer-icon-row a:focus-visible i { color: var(--color-primary); filter:brightness(0.8); }
body.footer-secondary-light .footer-bonus-btn .fa-gift { color: #ff9900; }
body.footer-secondary-light .footer-bonus-btn span { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.footer-secondary-light .footer-icon-row a:hover { background: #ffffff; }
body.footer-primary-bright .footer-bonus-btn .fa-gift { color: #ff9900; }
h1, h2, h3 { color: var(--heading-color); }
/* Card/list hover */
.card { border:1px solid color-mix(in srgb, var(--surface-bg) 80%, rgba(0,0,0,0.15)); border-radius:10px; padding:16px; background:var(--surface-bg); color:var(--on-surface); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); background: color-mix(in srgb, var(--surface-bg) 90%, rgba(255,255,255,0.2)); }
.list-emoji li { transition: background-color .12s ease, transform .12s ease; border-radius:8px; padding:6px 8px; }
.list-emoji li:hover { background: color-mix(in srgb, var(--color-primary) 20%, rgba(255,255,255,0.8)); transform: translateX(2px); }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
/* Card content safety */
.card h3, .card p { word-wrap: break-word; overflow-wrap: anywhere; }
body.mazu-site .block p { line-height:1.65; }
/* Override for full image display (contain mode) - Global */
main .block img,
main .card img,
.hero-toy-photo img,
main .block figure img,
main .card picture img,
main .card .figure-wrapper img {
aspect-ratio: auto !important;
object-fit: contain !important;
height: auto !important;
max-height: 85vh;
width: auto !important;
max-width: 100%;
position: relative !important;
border-radius: 12px !important;
}
/* Reset containers */
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
height: auto !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
/* Remove padding hacks */
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content: none !important;
padding-top: 0 !important;
display: none !important;
}
/* Fixed button visibility on dark backgrounds (odd blocks) */
body.style-28g main .block:nth-of-type(odd) .btn {
border-color: currentColor;
color: inherit;
}
/* Ensure dark-surface blocks always have white text regardless of position */
.block.dark-surface,
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface span,
.block.dark-surface div {
color: #ffffff !important;
}
/* 修正 Home Numbers 在有背景圖時必須是白色 */
.home-numbers-block.with-bg .home-numbers-inner,
.home-numbers-block.with-bg .home-numbers-title,
.home-numbers-block.with-bg .home-number-value,
.home-numbers-block.with-bg .home-number-label {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
/* Neon Style - 螢光風格 */
body.style-neon main .block:not(.hero) {
border: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
box-shadow:
0 0 8px var(--color-primary),
0 0 20px color-mix(in srgb, var(--color-primary) 60%, transparent),
inset 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
margin-bottom: 24px; /* 增加間距避免重疊 */
}
body.style-neon main .block .figure img,
body.style-neon main .block figure img {
border: 4px solid transparent !important; /* 透明間距層 */
border-radius: 16px !important;
max-width: 100% !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, #ffffff), /* 更亮的實線外框 */
0 0 10px var(--color-primary), /* 緊密光暈 */
0 0 30px color-mix(in srgb, var(--color-primary) 80%, transparent) !important; /* 擴散光暈 */
}
/* 針對 full-width block (style-28g) 調整 border */
body.style-28g.style-neon main .block {
width: 100% !important; /* 確保邊框在視窗內 */
box-sizing: border-box !important; /* 確保 padding 和 border 不會撐開寬度 */
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 16px !important;
/* 確保邊框顏色一致 */
border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
border-right: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
}
/* Hero Left-Right Mobile Layout Adjustment */
@media (max-width: 720px) {
/* Interleave Image between H1 and Content */
.hero-left-right .grid .text,
.hero-left-right .grid .figure {
display: contents;
}
.hero-left-right .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-left-right .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-left-right .grid .text > *:not(h1) { order: 3; }
.hero-left-right .grid { text-align: center !important; justify-items: center; }
}
/* Fix Standard 28g Mobile Overflow (Containment) */
@media (max-width: 720px) {
body.style-28g main .block {
width: 100% !important;
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.style-28g .hero.hero-toy {
width: 100% !important;
left: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* Boxed Style */
body.style-boxed main {
max-width: 1200px;
margin: 40px auto;
background: var(--surface-bg);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
padding: 40px;
}
body.style-boxed main .block {
background: transparent;
border: none;
box-shadow: none;
padding: 24px 0;
margin: 24px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.style-boxed main .block:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Hero Split Diagonal */
.hero-split-diagonal {
position: relative;
overflow: hidden;
border: none !important;
background: transparent !important;
padding: 60px 24px;
}
.hero-split-diagonal::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(115deg, var(--surface-bg) 55%, var(--color-primary) 55.1%, var(--color-primary) 100%);
z-index: 1;
}
.hero-split-diagonal .content-wrapper {
position: relative;
z-index: 2;
}
/* Ensure split-diagonal text stays readable on varied backgrounds */
.hero-split-diagonal .text,
.hero-split-diagonal .text h1,
.hero-split-diagonal .text h2,
.hero-split-diagonal .text h3,
.hero-split-diagonal .text p,
.hero-split-diagonal .text li,
.hero-split-diagonal .text span {
color: var(--on-surface);
}
.hero-split-diagonal .text .muted {
color: color-mix(in srgb, var(--on-surface) 70%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.hero-split-diagonal {
padding: 32px 16px;
}
.hero-split-diagonal::before {
background: var(--surface-bg); /* Reset diagonal on mobile */
}
.hero-split-diagonal .grid .text,
.hero-split-diagonal .grid .figure {
display: contents;
}
.hero-split-diagonal .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-split-diagonal .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-split-diagonal .grid .text > *:not(h1) { order: 3; }
.hero-split-diagonal .grid { text-align: center !important; justify-items: center; }
}
/* Mobile Header Bottom Sticky Style */
@media (max-width: 720px) {
body.mobile-header-bottom-sticky .actions {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: var(--header-bg) !important;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 12px !important;
display: flex !important;
justify-content: center;
gap: 12px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
z-index: 9999 !important;
padding-bottom: max(12px, env(safe-area-inset-bottom));
box-sizing: border-box;
visibility: visible !important;
opacity: 1 !important;
}
body.mobile-header-bottom-sticky .actions .btn {
flex: 1;
text-align: center;
padding: 12px 0;
margin: 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile-header-bottom-sticky main {
padding-bottom: 90px !important;
}
/* Footer is outside main; add safe space so last icons aren't covered */
body.mobile-header-bottom-sticky .site-footer {
padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
body.mobile-header-bottom-sticky .floating-corner-stack {
bottom: 90px !important;
}
/* Hide conflicting floating bonus button when sticky header is active */
body.mobile-header-bottom-sticky .footer-bonus-btn.floating,
body.mobile-header-bottom-sticky .footer-bonus-btn {
display: none !important;
}
body.mobile-header-bottom-sticky .burger {
display: inline-flex !important;
margin-left: auto !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1101 !important;
}
/* Top CTA: Logo + CTA + Burger (mobile) */
body.mobile-header-bottom-sticky .header-inner { position: relative; }
body.mobile-header-bottom-sticky .top-cta {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 10px 16px;
min-height: 52px; /* bigger than logo(42) & burger(36) */
border-radius: 14px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
white-space: nowrap;
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
/* Red text + contrasting bg (avoid blending into header bg) */
color: #ff2a2a;
background: color-mix(in srgb, #ffffff 92%, var(--color-primary) 8%);
border: 2px solid color-mix(in srgb, #ff2a2a 72%, rgba(0,0,0,0));
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
z-index: 1102;
}
/* Subtle sheen sweep (no blinking) */
body.mobile-header-bottom-sticky .top-cta::before {
content: "";
position: absolute;
top: -30%;
left: -70%;
width: 60%;
height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
transform: rotate(20deg);
opacity: 0.65;
animation: topCtaSheen 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes topCtaSheen {
0% { left: -70%; }
55% { left: 120%; }
100% { left: 120%; }
}
/* Gentle bob (no flashing) */
body.mobile-header-bottom-sticky .top-cta {
animation: topCtaBob 3.2s ease-in-out infinite;
}
@keyframes topCtaBob {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -50%) translateY(-1px); }
}
}
/* Parallax & Grid & Animation */
body.parallax-bg {
background-attachment: fixed !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 720px) {
body.parallax-bg { background-attachment: scroll !important; }
}
@media (min-width: 721px) {
.grid.grid-60-40 { grid-template-columns: 1.5fr 1fr !important; }
.grid.grid-40-60 { grid-template-columns: 1fr 1.5fr !important; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.qa-block,
.qa-block h2,
.qa-block summary,
.qa-block summary strong,
.qa-block p {
color: var(--on-surface);
}
.qa-block summary {
cursor: pointer;
}
.qa-block p {
opacity: 0.88;
}
.cards-block .cards-title {
color: var(--on-surface);
}
.cards-block .cards-desc {
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
opacity: 0.8;
}
/* 響應式調整：手機版保持正方形不裁切 */
@media (max-width: 720px) {
.cards-grid {
grid-template-columns: 1fr !important;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.cards-item img {
max-width: 100% !important;
aspect-ratio: 1/1;
object-fit: contain;
}
}
.feature-sections {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 92%, #ffffff 8%),
color-mix(in srgb, var(--color-secondary) 82%, #000000 18%)
);
border-radius: 32px;
padding: clamp(28px, 6vw, 64px);
color: var(--on-primary);
}
.feature-sections-inner {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.feature-main-title {
color: var(--on-primary);
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.feature-subheading,
.feature-footer {
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
margin: 0;
line-height: 1.6;
}
.feature-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.feature-row {
display: flex;
gap: 16px;
padding: 18px 20px;
background: color-mix(in srgb, var(--color-secondary) 18%, rgba(0,0,0,0.7));
border-radius: 20px;
align-items: flex-start;
}
.feature-icon {
font-size: 1.8rem;
line-height: 1;
margin-top: 4px;
}
.feature-icon-img {
width: 40px;
height: 40px;
object-fit: contain;
margin-top: 4px;
}
.feature-text h3 {
margin: 0 0 6px;
color: var(--on-primary);
font-size: 1.2rem;
}
.feature-text p {
margin: 0;
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
line-height: 1.6;
}
.feature-text ul {
margin: 10px 0 0;
padding-left: 18px;
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
}
.feature-text li {
margin-bottom: 4px;
}
.feature-table-wrapper {
background: color-mix(in srgb, var(--color-secondary) 20%, rgba(0,0,0,0.75));
border-radius: 20px;
padding: 18px;
}
.feature-table-title {
font-weight: 600;
margin-bottom: 12px;
}
.feature-table-scroll {
overflow-x: auto;
}
.feature-table {
width: 100%;
border-collapse: collapse;
color: var(--on-primary);
}
.feature-table th,
.feature-table td {
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--on-primary) 35%, rgba(255,255,255,0) 65%);
text-align: left;
white-space: nowrap;
}
.feature-table th {
background: color-mix(in srgb, var(--color-secondary) 30%, rgba(0,0,0,0.6));
font-weight: 600;
}
.feature-table td {
background: color-mix(in srgb, var(--color-secondary) 18%, rgba(0,0,0,0.5));
}
@media (max-width: 640px) {
.feature-row {
flex-direction: column;
}
.feature-icon,
.feature-icon-img {
margin-bottom: 6px;
}
.feature-table {
font-size: 0.9rem;
}
}
.crosslink-cards .crosslink-grid {
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crosslink-card {
display:flex;
flex-direction:column;
gap:12px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 12%, rgba(255,255,255,0.04));
border:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 30%, rgba(0,0,0,0.1));
border-radius:14px;
text-decoration:none;
color: inherit;
overflow:hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.crosslink-card:hover {
transform: translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.14);
border-color: color-mix(in srgb, var(--surface-bg, #224e60) 10%, #ffffff 40%);
}
.crosslink-card figure {
margin:0;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.2));
background: color-mix(in srgb, #000 5%, rgba(255,255,255,0.08));
display:flex;
align-items:center;
justify-content:center;
}
.crosslink-card img {
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}
.crosslink-icon {
width:100%;
aspect-ratio: 2/1;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap: 6px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 5%, rgba(255,255,255,0.02));
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.1));
}
.crosslink-icon-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 78px;
padding: 0 14px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--on-primary, #fff);
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 56%, #ffffff 44%) 100%);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.crosslink-icon-hint {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-surface, #fff) 62%, rgba(255,255,255,0));
}
.crosslink-icon--mobile .crosslink-icon-mark,
.crosslink-icon--sports .crosslink-icon-mark,
.crosslink-icon--offer .crosslink-icon-mark {
min-width: 92px;
}
.crosslink-icon--stage .crosslink-icon-mark,
.crosslink-icon--default .crosslink-icon-mark {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 66%, #ffffff 34%) 100%);
}
.crosslink-body {
padding:0 14px 14px;
}
.crosslink-body h3 {
margin:0 0 8px;
font-size:1.05rem;
}
.crosslink-body p {
margin:0;
font-size:0.95rem;
line-height:1.5;
color: color-mix(in srgb, var(--on-surface, #fff) 80%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.crosslink-cards .crosslink-grid {
grid-template-columns:1fr;
}
}
.seo-long-block { line-height: 1.75; }
.seo-long-block h2 { line-height: 1.35; margin: 1.1rem 0 0.7rem; }
.seo-long-block p { margin: 0 0 1rem; line-height: 1.75; white-space: normal; word-break: normal; overflow-wrap: break-word; }
.seo-long-block a,
.seo-long-block strong {
display: inline !important;
line-height: inherit;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
vertical-align: baseline;
}
.seo-long-block a {
color: var(--seo-link-color, #56d4ff);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
font-weight: 700;
}
.seo-long-block a:hover {
color: color-mix(in srgb, var(--seo-link-color, #56d4ff) 80%, #ffffff 20%);
}
.seo-long-block .seo-long-rich { color: var(--on-surface); line-height: 1.75; margin-bottom: 1rem; }
.ribbon-shell {
max-width: 1180px;
margin: 0 auto;
padding: 30px 20px 60px;
}
.ribbon-stack {
display: grid;
gap: 22px;
}
.ribbon-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ribbon-tag {
position: sticky;
top: 92px;
align-self: start;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 68%, #ffffff 32%) 100%);
color: var(--on-primary, #fff);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 14px 26px rgba(16, 33, 49, 0.16);
}
.ribbon-panel {
position: relative;
overflow: hidden;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, rgba(0,0,0,0.08));
box-shadow: 0 18px 38px rgba(16, 33, 49, 0.08);
}
.ribbon-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
}
.ribbon-panel > .block,
.ribbon-panel > section.block,
.ribbon-panel > .media-tabs {
margin: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ribbon-panel--seo {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,244,238,0.94) 100%);
}
@media (max-width: 920px) {
.ribbon-row {
grid-template-columns: 1fr;
}
.ribbon-tag {
position: static;
width: fit-content;
}
}
@media (max-width: 720px) {
.ribbon-shell {
padding-inline: 16px;
}
.ribbon-panel {
border-radius: 22px;
}
}
/* Source: index.html */
:root { --color-primary: #2fc66b; --color-secondary: #f3fbff; --color-muted: #def7ea; --on-primary: #ffffff; --on-secondary: #102a43; --btn-bg: #2fc66b; --btn-fg: #ffffff; --footer-bg: #2fc66b; --header-bg: #2fc66b; --on-header: #ffffff; --on-footer: #ffffff; --heading-color: #0f8a4a; --surface-bg: #e3f7ff; --on-surface: #0c2f3d; --toy-header-bg: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); --toy-btn-bg: #2fc66b; --toy-btn-color: #ffffff; --toy-nav-color: #ffffff; --color-accent-sky: #44baf5; --brand-gradient: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial, sans-serif; margin:0; color: var(--on-secondary); background: var(--color-secondary); font-size:14px; }
main { max-width: 1080px; margin: auto; padding: 16px; }
/* Header layout */
body > header { background: var(--brand-gradient); color: var(--on-header); position: sticky; top: 0; z-index: 1000; padding: 16px 0; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:nowrap; }
header img { border-radius:8px; }
header img.logo-square { width:52px; height:auto; }
header img.logo-landscape { width:auto; height:48px; max-width: 180px; object-fit: contain; }
.brand { display:flex; align-items:center; gap:12px; }
.nav-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; }
.nav-center a { text-decoration:none; font-weight:600; color: var(--on-header); padding:4px 8px; border-radius:999px; transition: background-color .15s ease, color .15s ease; white-space:nowrap; font-size:0.88rem; }
.kw-highlight { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.nav-center a.nav-child { font-size:0.92em; opacity:.85; padding-left:12px; position:relative; }
.nav-center a.nav-child::before { content:"•"; font-size:0.75em; margin-right:4px; vertical-align:middle; }
.nav-center a:hover { background: color-mix(in srgb, var(--on-header) 18%, rgba(255,255,255,0.2)); color: var(--on-header); }
@media (prefers-color-scheme: dark) {
.nav-center a { color:#fff; }
.nav-center a:hover { background: color-mix(in srgb, #ffffff 22%, rgba(255,255,255,0.05)); color:#fff; }
}
.actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; flex:0 0 auto; }
.menu.responsive { display:none; }
/* Buttons */
.btn {margin-top: 1.5rem; display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration:none; border:1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-weight:700; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease, color .12s ease; }
/* Remove margin-top for buttons in header */
header .btn { margin-top: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); opacity:.98; background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login:hover { background: color-mix(in srgb, #ffffff 82%, var(--color-secondary) 18%); color: var(--color-secondary); }
.btn-signup:hover { background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); font-weight:700; }
.btn-signup { background: transparent; color: var(--color-primary); font-weight:700; }
/* Ensure login stays visible on header background */
header .btn-login { color: var(--on-header); border-color: var(--on-header); }
header .btn-login:hover { background: color-mix(in srgb, var(--on-header) 20%, transparent); color: var(--on-header); }
/* Ensure signup stays visible on primary header background */
header .btn-signup { background: var(--on-primary); color: var(--color-primary); border-color: var(--on-primary); }
header .btn-signup:hover { background: color-mix(in srgb, var(--on-primary) 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-buy { background: transparent; color:#111; border-color:#111; font-weight:700; }
/* Mobile-only top CTA (hidden on desktop) */
.top-cta { display:none; }
/* Burger */
.burger { display:none; border:none; width:44px; height:36px; padding:6px; border-radius:10px; background: color-mix(in srgb, var(--color-primary) 20%, white); color: var(--on-primary); align-items:center; justify-content:center; }
.burger i { font-size:18px; }
/* Mobile */
@media (max-width: 720px) {
header img.logo-landscape { max-width: 100px; height: 40px; }
body { font-size:13px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:12px; }
.brand { flex:0 0 auto; }
.nav-center { display:none; }
.actions { flex:0 0 auto; justify-content:center; gap:10px; }
.actions .btn { padding:8px 14px; font-size:13px; line-height:1.2; margin-top:0; }
.burger { display:inline-flex; justify-self:end; }
.menu.responsive { display:none; position:absolute; top:64px; left:0; right:0; background: var(--color-primary); color: var(--on-primary); border-top:1px solid rgba(255,255,255,0.15); padding:12px; flex-direction:column; gap:8px; }
.menu.responsive.open { display:flex; }
header img { width:42px; height:42px; }
main .block img,
main .card img {
width:100%;
display:block;
object-fit:cover;
border-radius:16px;
aspect-ratio:1 / 1;
}
main .block.hero img,
.hero-banner img,
.hero-banner {
aspect-ratio:auto;
border-radius:18px;
}
.hero-logo-wrapper { width:100%; max-width: calc(100vw - 32px); margin:24px auto 0; }
.hero-logo-wrapper img { width:100%; height:100%; max-width:100%; aspect-ratio:1/1; }
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
position:relative;
width:100%;
max-width: calc(100vw - 32px);
margin:0 auto 16px;
}
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content:"";
display:block;
padding-top:100%;
}
main .block:not(.hero) figure img,
main .card picture img,
main .card .figure-wrapper img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
}
.hero-banner { border-radius:14px; }
.hero-banners { gap:10px; margin-bottom:14px; }
.floating-corner-stack { right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:40vw; }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* Ensure media right-left blocks stack with text above image on mobile */
.swap-mobile .text { order: 1; }
.swap-mobile .figure { order: 2; }
/* Mobile fixed footer CTA: prevent overflow on narrow screens */
.footer-bonus-btn {
font-size:18px;
padding:14px 14px;
width:100%;
border-radius:16px;
box-sizing:border-box;
flex-wrap:wrap;
row-gap:8px;
}
.footer-bonus-btn span {
font-size:18px;
flex:1 1 100%;
min-width:0;
white-space:normal;
word-break:break-word;
line-height:1.2;
}
.footer-bonus-btn .fa-gift { font-size:1.15em; }
.footer-bonus-btn.floating {
padding-top:14px;
padding-bottom:max(14px, env(safe-area-inset-bottom));
padding-left:max(14px, env(safe-area-inset-left));
padding-right:max(14px, env(safe-area-inset-right));
}
body.floating-bonus-active { padding-bottom:150px; }
.footer-icon-row { gap:12px; padding:0; }
.footer-icon-row.payments i { font-size:2.4rem; }
.footer-icon-row.social i { font-size:1.5rem; }
.footer-copy h2 { font-size:1rem; }
}
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a.nav-child { padding-left: 24px; font-size: 0.95em; opacity: .9; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
.header-toy { border-bottom: 1px solid rgba(0,0,0,0.08); background: var(--toy-header-bg); padding: 18px clamp(12px,4vw,32px) 10px; }
.header-toy .toy-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-toy .toy-top.two-row {
position:relative;
justify-content:center;
gap:0;
padding:0 150px 0 60px;
min-height:64px;
}
.header-toy .toy-logo-center {
text-align:center;
flex:1;
display:flex;
justify-content:center;
}
.header-toy .toy-logo-center img { max-height:58px; width:auto; display:inline-block; }
.header-toy .toy-actions.align-right {
position:absolute;
right:60px;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
}
.header-toy .toy-logo img { max-height:48px; width:auto; display:block; }
.header-toy .toy-logo-text { font-size:1.4rem; font-weight:700; color:#111; letter-spacing:0.08em; }
.header-toy .toy-actions { display:flex; align-items:center; gap:12px; }
.header-toy .toy-btn { padding:10px 22px; border-radius:999px; border:1px solid var(--toy-btn-bg); background:var(--toy-btn-bg); color:var(--toy-btn-color); font-weight:600; text-decoration:none; transition:.15s ease; }
.header-toy .toy-btn:hover { opacity:.85; }
.header-toy .toy-btn.toy-auth { background:#fff; color:#111; border-color:#ddd; }
.header-toy .toy-btn.toy-auth.secondary { background:transparent; color:#111; border-color:#111; }
.header-toy .toy-burger { display:none; border:none; background:none; font-size:1.4rem; padding:6px; cursor:pointer; }
.toy-nav { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px clamp(8px,4vw,32px) 14px; }
.toy-nav .nav-link { text-decoration:none; color: var(--toy-nav-color); font-weight:600; position:relative; padding-bottom:6px; }
.toy-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#000; }
.toy-nav .nav-link.nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile { display:none; flex-direction:column; gap:10px; padding:12px clamp(8px,4vw,24px); border-top:1px solid rgba(0,0,0,0.08); }
.toy-nav-mobile a { text-decoration:none; color: var(--toy-nav-color); font-weight:600; }
.toy-nav-mobile .nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile.open { display:flex; }
@media (max-width: 920px) {
.toy-nav { display:none; }
.header-toy .toy-burger { display:inline-flex; }
.header-toy .toy-btn { font-size:0.9rem; padding:8px 18px; }
}
.toy-nav-divider {
width:100%;
height:1px;
background:rgba(0,0,0,0.12);
margin:12px 0 8px;
}
@media (max-width: 720px) {
.header-toy .toy-top.two-row { padding-right:0; flex-direction:column; }
.header-toy .toy-actions.align-right {
position:static;
transform:none;
width:100%;
justify-content:center;
margin-top:10px;
}
}
@media (max-width: 540px) {
.header-toy .toy-logo img { max-height:40px; }
.header-toy .toy-btn { display:inline-flex; }
.toy-nav-mobile { font-size:0.95rem; }
}
.container { padding: 12px; }
body.mazu-site .container { width:100%; max-width:100%; padding:0; }
.block {
padding: 24px;
border-radius: 14px;
margin: 16px 0;
background: var(--surface-bg);
border: 1px solid color-mix(in srgb, var(--surface-bg) 78%, rgba(0,0,0,0.2));
color: var(--on-surface);
transition: background-color .2s ease, color .2s ease;
}
.block p, .block li, .block span, .block td, .block th, .block a {
color: inherit;
}
.block .muted {
color: color-mix(in srgb, var(--on-surface) 72%, rgba(255,255,255,0) 28%);
}
.block.dark-surface {
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface td,
.block.dark-surface span,
.block.dark-surface a {
color: #fff;
}
.block.dark-surface .muted {
color: rgba(255,255,255,0.78);
}
body.style-28g { overflow-x:hidden; }
body.style-28g main {
max-width: 100%;
padding: 0;
}
body.style-28g main .block {
margin: 0;
border-radius: 0;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: clamp(32px, 6vw, 80px);
display:flex;
flex-direction:column;
align-items:center;
gap: clamp(18px,3vw,32px);
}
body.style-28g main .block + .block {
margin-top: 0;
}
body.style-28g main .block > *:not(style):not(script) {
width: min(1080px, 100%);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px) {
body.style-28g main .block > *:not(style):not(script) {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
}
body.style-28g main .block:nth-of-type(odd) {
background: color-mix(in srgb, var(--color-primary) 85%, #000000 15%);
color: var(--on-primary);
}
body.style-28g main .block:nth-of-type(odd) h1,
body.style-28g main .block:nth-of-type(odd) h2,
body.style-28g main .block:nth-of-type(odd) h3,
body.style-28g main .block:nth-of-type(odd) p,
body.style-28g main .block:nth-of-type(odd) li {
color: inherit;
}
body.style-28g main .block:nth-of-type(even) {
background: color-mix(in srgb, var(--color-secondary) 85%, #ffffff 15%);
color: var(--on-secondary);
}
body.style-28g main .block:nth-of-type(even) .muted {
color: color-mix(in srgb, var(--on-secondary) 65%, rgba(0,0,0,0) 35%);
}
.grid { display:grid; gap:16px; }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Responsive wrapping for dense card grids to avoid over-compression */
@media (max-width: 1024px) { .grid.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 880px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.muted { color: color-mix(in srgb, var(--on-surface) 55%, rgba(255,255,255,0) 45%); }
/* Hero layout helper */
.hero .hero-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; align-items:center; }
@media (max-width: 720px) { .hero .hero-grid { grid-template-columns: 1fr; } }
.hero-banners { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.hero-banner { display:block; border-radius:16px; overflow:hidden; background: var(--color-secondary); box-shadow: 0 12px 26px rgba(0,0,0,0.14); transition: transform .18s ease, box-shadow .18s ease; }
.hero-banner img { width:100%; display:block; object-fit:cover; }
.hero-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,0.2); }
.hero-logo-wrapper { margin:24px auto 0; width:100%; max-width:512px; }
.hero-logo-wrapper img { width:100% !important; max-width:512px; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); display:block; margin:0 auto; }
/* Hero toy variant */
.hero.hero-toy {
position: relative;
padding: clamp(48px, 12vw, 120px) 16px;
border-radius: 28px;
background: linear-gradient(135deg, #f7a5c5, #ffd966);
background-size: cover;
background-position: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.hero-toy-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
backdrop-filter: blur(2px);
}
.hero-toy-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-toy-logo {
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.hero-toy-logo img {
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
object-fit: contain;
border-radius: 28px;
background: rgba(255,255,255,0.1);
padding: 12px;
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
.hero-toy-logo-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
border-radius: 28px;
background: rgba(0,0,0,0.35);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.hero-toy-cta-wrap {
width: 100%;
display:flex;
justify-content:center;
}
.hero-toy-body h1 {
font-size: clamp(1.8rem, 4.4vw, 3rem);
margin: 0;
color: #fff;
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.hero-toy-body p {
display: block;
margin: 12px auto;
padding: 14px 18px;
border-radius: 18px;
background: rgba(0,0,0,0.45);
max-width: 720px;
font-size: 1.05rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
.hero-toy-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 42px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #ff6cab 0%, #ff9a44 100%);
color: #111;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
transition: transform .2s ease, box-shadow .2s ease;
}
.hero-toy-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,0.4);
}
.hero-toy-photo img {
width: clamp(220px, 28vw, 320px);
height: clamp(220px, 28vw, 320px);
border-radius: 28px;
object-fit: cover;
background: rgba(0,0,0,0.1);
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
@media (max-width: 540px) {
.hero.hero-toy {
border-radius: 20px;
padding: 48px 12px;
}
.hero-toy-logo img,
.hero-toy-logo-text {
width: min(320px, 90vw);
height: min(320px, 90vw);
border-radius: 32px;
}
.hero-toy-body p {
width: 100%;
box-sizing: border-box;
font-size: 0.98rem;
}
.hero-toy-cta {
width: 100%;
max-width: 320px;
}
}
.style-28g .hero.hero-toy {
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
border-radius: 0;
}
.floating-corner-stack { position:fixed; right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:13rem; display:flex; flex-direction:column; gap:16px; align-items:center; z-index:1100; padding:0 4px; }
.floating-corner-stack.hidden { display:none !important; }
.floating-corner-banner { display:flex; flex-direction:column; align-items:center; width:100%; border-radius:16px; overflow:visible; background:transparent; transition: transform .2s ease; text-decoration:none; gap:8px; }
.floating-corner-banner img {
width:72px;
height:auto;
display:block;
margin:0 auto;
}
/* 右側動圖文字背景不透明 */
.floating-corner-banner .floating-caption {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
margin:0 auto;
padding:8px 12px;
border-radius:14px;
background: color-mix(in srgb, var(--color-primary) 90%, #000000 10%);
color: #ffffff;
text-align:center;
box-shadow:0 4px 18px rgba(0,0,0,0.2);
max-width:100%;
width:100%;
}
.floating-caption-line { display:block; font-size:0.78rem; font-weight:600; line-height:1.3; letter-spacing:0.2px; white-space:nowrap; }
@media (max-width: 720px) {
/* Restore Floating Banners but scaled and safe */
.floating-corner-stack {
display: flex !important;
top: auto;
bottom: 90px;
right: 4px;
left: auto;
transform: none;
flex-direction: column;
align-items: flex-end;
width: auto;
max-width: 120px;
gap: 8px;
z-index: 1050;
}
.floating-corner-banner {
width: 100%;
align-items: flex-end;
}
.floating-corner-banner img {
width: 48px;
height: auto;
}
/* Hide caption on mobile to prevent clutter/overflow */
.floating-corner-banner .floating-caption {
display: none;
}
.floating-close-banners {
top: auto;
bottom: 150px;
right: 6px;
}
.floating-close-bonus {
right: 8px;
bottom: 78px;
}
/* Fix CTA button layout */
.btn {
font-size: 0.9rem !important;
padding: 8px 16px !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
display: inline-block;
}
/* Ensure text wraps correctly */
.block p, .block li, .block span, h1, h2, h3 {
word-break: break-word;
overflow-wrap: anywhere;
}
}
.floating-corner-banner:hover { transform: translateY(-3px) scale(1.03); }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* More interactive hovers */
.block figure img { transition: transform .18s ease, box-shadow .18s ease; }
.block figure img:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
table tr:hover td { background: color-mix(in srgb, var(--btn-bg) 8%, #ffffff); }
footer { color: var(--on-footer); border-top: 1px solid rgba(255,255,255,0.15); background: var(--footer-bg); padding: 24px 0; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; text-align:center; }
.footer-logo { margin-bottom: 12px; display:flex; justify-content:center; }
.footer-logo img { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.footer-bonus-btn { display:flex; align-items:center; justify-content:center; gap:12px; background: var(--color-secondary); color: var(--color-primary); text-decoration:none; font-weight:800; font-size:26px; border-radius:18px; padding:18px 28px; margin:16px auto; width:min(100%, 720px); box-shadow: 0 18px 32px rgba(0,0,0,0.24); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; position:relative; box-sizing:border-box; }
/* Footer按鈕文字加亮 */
.footer-bonus-btn span {
flex:1;
text-align:center;
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.6);
font-size:26px;
font-weight:800;
letter-spacing:0.4px;
}
.footer-bonus-btn .fa-gift { color:#ffcc33; font-size:1.35em; animation: footer-gift-pulse 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes footer-gift-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.footer-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px rgba(0,0,0,0.28); }
.footer-bonus-btn.floating { position:fixed; left:0; right:0; bottom:0; width:100%; margin:0; padding:20px clamp(20px, 4vw, 36px); border-radius:0; box-shadow: 0 -6px 28px rgba(0,0,0,0.3); transform:none; z-index:1200; box-sizing:border-box; }
body.floating-bonus-active { padding-bottom:160px; transition: padding-bottom .2s ease; }
body.bonus-float-hidden .footer-bonus-btn.floating { display:none !important; }
body.bonus-float-hidden { padding-bottom:0 !important; }
.floating-close {
position:fixed;
width:28px;
height:28px;
border:1px solid rgba(255,255,255,0.6);
border-radius:50%;
background:rgba(0,0,0,0.72);
color:#fff;
font-size:18px;
line-height:1;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:1301;
box-shadow:0 6px 14px rgba(0,0,0,0.28);
}
.floating-close:hover { background:rgba(0,0,0,0.86); }
.floating-close-bonus { right:10px; bottom:120px; display:none; }
body.floating-bonus-active:not(.bonus-float-hidden) .floating-close-bonus { display:flex; }
.floating-close-banners { right:10px; top:calc(50% - 118px); }
.footer-copy, .footer-payments, .footer-social { margin:24px auto 0; text-align:center; max-width:960px; }
.footer-copy h2 { font-size:1.12rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.3px; }
.footer-copy p { margin:0; color: color-mix(in srgb, var(--on-footer) 85%, rgba(255,255,255,0.55)); line-height:1.6; }
.footer-payments h3, .footer-social h3 { font-size:1.02rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.4px; text-transform:uppercase; }
.footer-icon-row { display:flex; justify-content:center; align-items:center; gap:18px; padding:0; background:transparent; flex-wrap:wrap; }
.footer-icon-row a { display:flex; align-items:center; justify-content:center; color: inherit; text-decoration:none; min-width:88px; padding:16px; border-radius:18px; background: rgba(0,0,0,0.2); box-shadow: 0 12px 24px rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.1); transition: transform .2s ease, box-shadow .2s ease; }
.footer-icon-row a:hover, .footer-icon-row a:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0,0,0,0.18); background: rgba(0,0,0,0.3); }
.footer-icon-row.payments a { min-width:130px; padding:20px; }
/* Footer icon使用加亮的主色/輔色 */
.footer-icon-row i {
color: #ffffff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
transition: color .2s ease, transform .2s ease, filter .2s ease;
font-size:2.4rem;
}
.footer-icon-row.payments i { font-size:2.8rem; }
.footer-icon-row.social i { font-size:1.8rem; }
.footer-icon-row a:hover i, .footer-icon-row a:focus-visible i {
color:#ffae00;
filter: brightness(1.2);
transform: translateY(-3px);
}
.footer-icon-row a:focus-visible { outline:2px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.5)); outline-offset:4px; box-shadow: 0 14px 28px rgba(0,0,0,0.15); }
body.footer-secondary-light .footer-icon-row i { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a:hover i, body.footer-secondary-light .footer-icon-row a:focus-visible i { color: var(--color-primary); filter:brightness(0.8); }
body.footer-secondary-light .footer-bonus-btn .fa-gift { color: #ff9900; }
body.footer-secondary-light .footer-bonus-btn span { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.footer-secondary-light .footer-icon-row a:hover { background: #ffffff; }
body.footer-primary-bright .footer-bonus-btn .fa-gift { color: #ff9900; }
h1, h2, h3 { color: var(--heading-color); }
/* Card/list hover */
.card { border:1px solid color-mix(in srgb, var(--surface-bg) 80%, rgba(0,0,0,0.15)); border-radius:10px; padding:16px; background:var(--surface-bg); color:var(--on-surface); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); background: color-mix(in srgb, var(--surface-bg) 90%, rgba(255,255,255,0.2)); }
.list-emoji li { transition: background-color .12s ease, transform .12s ease; border-radius:8px; padding:6px 8px; }
.list-emoji li:hover { background: color-mix(in srgb, var(--color-primary) 20%, rgba(255,255,255,0.8)); transform: translateX(2px); }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
/* Card content safety */
.card h3, .card p { word-wrap: break-word; overflow-wrap: anywhere; }
body.mazu-site .block p { line-height:1.65; }
/* Override for full image display (contain mode) - Global */
main .block img,
main .card img,
.hero-toy-photo img,
main .block figure img,
main .card picture img,
main .card .figure-wrapper img {
aspect-ratio: auto !important;
object-fit: contain !important;
height: auto !important;
max-height: 85vh;
width: auto !important;
max-width: 100%;
position: relative !important;
border-radius: 12px !important;
}
/* Reset containers */
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
height: auto !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
/* Remove padding hacks */
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content: none !important;
padding-top: 0 !important;
display: none !important;
}
/* Fixed button visibility on dark backgrounds (odd blocks) */
body.style-28g main .block:nth-of-type(odd) .btn {
border-color: currentColor;
color: inherit;
}
/* Ensure dark-surface blocks always have white text regardless of position */
.block.dark-surface,
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface span,
.block.dark-surface div {
color: #ffffff !important;
}
/* 修正 Home Numbers 在有背景圖時必須是白色 */
.home-numbers-block.with-bg .home-numbers-inner,
.home-numbers-block.with-bg .home-numbers-title,
.home-numbers-block.with-bg .home-number-value,
.home-numbers-block.with-bg .home-number-label {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
/* Neon Style - 螢光風格 */
body.style-neon main .block:not(.hero) {
border: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
box-shadow:
0 0 8px var(--color-primary),
0 0 20px color-mix(in srgb, var(--color-primary) 60%, transparent),
inset 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
margin-bottom: 24px; /* 增加間距避免重疊 */
}
body.style-neon main .block .figure img,
body.style-neon main .block figure img {
border: 4px solid transparent !important; /* 透明間距層 */
border-radius: 16px !important;
max-width: 100% !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, #ffffff), /* 更亮的實線外框 */
0 0 10px var(--color-primary), /* 緊密光暈 */
0 0 30px color-mix(in srgb, var(--color-primary) 80%, transparent) !important; /* 擴散光暈 */
}
/* 針對 full-width block (style-28g) 調整 border */
body.style-28g.style-neon main .block {
width: 100% !important; /* 確保邊框在視窗內 */
box-sizing: border-box !important; /* 確保 padding 和 border 不會撐開寬度 */
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 16px !important;
/* 確保邊框顏色一致 */
border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
border-right: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
}
/* Hero Left-Right Mobile Layout Adjustment */
@media (max-width: 720px) {
/* Interleave Image between H1 and Content */
.hero-left-right .grid .text,
.hero-left-right .grid .figure {
display: contents;
}
.hero-left-right .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-left-right .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-left-right .grid .text > *:not(h1) { order: 3; }
.hero-left-right .grid { text-align: center !important; justify-items: center; }
}
/* Fix Standard 28g Mobile Overflow (Containment) */
@media (max-width: 720px) {
body.style-28g main .block {
width: 100% !important;
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.style-28g .hero.hero-toy {
width: 100% !important;
left: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* Boxed Style */
body.style-boxed main {
max-width: 1200px;
margin: 40px auto;
background: var(--surface-bg);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
padding: 40px;
}
body.style-boxed main .block {
background: transparent;
border: none;
box-shadow: none;
padding: 24px 0;
margin: 24px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.style-boxed main .block:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Hero Split Diagonal */
.hero-split-diagonal {
position: relative;
overflow: hidden;
border: none !important;
background: transparent !important;
padding: 60px 24px;
}
.hero-split-diagonal::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(115deg, var(--surface-bg) 55%, var(--color-primary) 55.1%, var(--color-primary) 100%);
z-index: 1;
}
.hero-split-diagonal .content-wrapper {
position: relative;
z-index: 2;
}
/* Ensure split-diagonal text stays readable on varied backgrounds */
.hero-split-diagonal .text,
.hero-split-diagonal .text h1,
.hero-split-diagonal .text h2,
.hero-split-diagonal .text h3,
.hero-split-diagonal .text p,
.hero-split-diagonal .text li,
.hero-split-diagonal .text span {
color: var(--on-surface);
}
.hero-split-diagonal .text .muted {
color: color-mix(in srgb, var(--on-surface) 70%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.hero-split-diagonal {
padding: 32px 16px;
}
.hero-split-diagonal::before {
background: var(--surface-bg); /* Reset diagonal on mobile */
}
.hero-split-diagonal .grid .text,
.hero-split-diagonal .grid .figure {
display: contents;
}
.hero-split-diagonal .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-split-diagonal .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-split-diagonal .grid .text > *:not(h1) { order: 3; }
.hero-split-diagonal .grid { text-align: center !important; justify-items: center; }
}
/* Mobile Header Bottom Sticky Style */
@media (max-width: 720px) {
body.mobile-header-bottom-sticky .actions {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: var(--header-bg) !important;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 12px !important;
display: flex !important;
justify-content: center;
gap: 12px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
z-index: 9999 !important;
padding-bottom: max(12px, env(safe-area-inset-bottom));
box-sizing: border-box;
visibility: visible !important;
opacity: 1 !important;
}
body.mobile-header-bottom-sticky .actions .btn {
flex: 1;
text-align: center;
padding: 12px 0;
margin: 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile-header-bottom-sticky main {
padding-bottom: 90px !important;
}
/* Footer is outside main; add safe space so last icons aren't covered */
body.mobile-header-bottom-sticky .site-footer {
padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
body.mobile-header-bottom-sticky .floating-corner-stack {
bottom: 90px !important;
}
/* Hide conflicting floating bonus button when sticky header is active */
body.mobile-header-bottom-sticky .footer-bonus-btn.floating,
body.mobile-header-bottom-sticky .footer-bonus-btn {
display: none !important;
}
body.mobile-header-bottom-sticky .burger {
display: inline-flex !important;
margin-left: auto !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1101 !important;
}
/* Top CTA: Logo + CTA + Burger (mobile) */
body.mobile-header-bottom-sticky .header-inner { position: relative; }
body.mobile-header-bottom-sticky .top-cta {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 10px 16px;
min-height: 52px; /* bigger than logo(42) & burger(36) */
border-radius: 14px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
white-space: nowrap;
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
/* Red text + contrasting bg (avoid blending into header bg) */
color: #ff2a2a;
background: color-mix(in srgb, #ffffff 92%, var(--color-primary) 8%);
border: 2px solid color-mix(in srgb, #ff2a2a 72%, rgba(0,0,0,0));
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
z-index: 1102;
}
/* Subtle sheen sweep (no blinking) */
body.mobile-header-bottom-sticky .top-cta::before {
content: "";
position: absolute;
top: -30%;
left: -70%;
width: 60%;
height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
transform: rotate(20deg);
opacity: 0.65;
animation: topCtaSheen 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes topCtaSheen {
0% { left: -70%; }
55% { left: 120%; }
100% { left: 120%; }
}
/* Gentle bob (no flashing) */
body.mobile-header-bottom-sticky .top-cta {
animation: topCtaBob 3.2s ease-in-out infinite;
}
@keyframes topCtaBob {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -50%) translateY(-1px); }
}
}
/* Parallax & Grid & Animation */
body.parallax-bg {
background-attachment: fixed !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 720px) {
body.parallax-bg { background-attachment: scroll !important; }
}
@media (min-width: 721px) {
.grid.grid-60-40 { grid-template-columns: 1.5fr 1fr !important; }
.grid.grid-40-60 { grid-template-columns: 1fr 1.5fr !important; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.crosslink-cards .crosslink-grid {
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crosslink-card {
display:flex;
flex-direction:column;
gap:12px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 12%, rgba(255,255,255,0.04));
border:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 30%, rgba(0,0,0,0.1));
border-radius:14px;
text-decoration:none;
color: inherit;
overflow:hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.crosslink-card:hover {
transform: translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.14);
border-color: color-mix(in srgb, var(--surface-bg, #224e60) 10%, #ffffff 40%);
}
.crosslink-card figure {
margin:0;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.2));
background: color-mix(in srgb, #000 5%, rgba(255,255,255,0.08));
display:flex;
align-items:center;
justify-content:center;
}
.crosslink-card img {
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}
.crosslink-icon {
width:100%;
aspect-ratio: 2/1;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap: 6px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 5%, rgba(255,255,255,0.02));
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.1));
}
.crosslink-icon-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 78px;
padding: 0 14px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--on-primary, #fff);
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 56%, #ffffff 44%) 100%);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.crosslink-icon-hint {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-surface, #fff) 62%, rgba(255,255,255,0));
}
.crosslink-icon--mobile .crosslink-icon-mark,
.crosslink-icon--sports .crosslink-icon-mark,
.crosslink-icon--offer .crosslink-icon-mark {
min-width: 92px;
}
.crosslink-icon--stage .crosslink-icon-mark,
.crosslink-icon--default .crosslink-icon-mark {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 66%, #ffffff 34%) 100%);
}
.crosslink-body {
padding:0 14px 14px;
}
.crosslink-body h3 {
margin:0 0 8px;
font-size:1.05rem;
}
.crosslink-body p {
margin:0;
font-size:0.95rem;
line-height:1.5;
color: color-mix(in srgb, var(--on-surface, #fff) 80%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.crosslink-cards .crosslink-grid {
grid-template-columns:1fr;
}
}
.home-numbers-block {
position: relative;
overflow: hidden;
background: color-mix(in srgb, var(--color-primary) 6%, #ffffff);
}
.home-numbers-block.with-bg {
background: transparent;
}
.home-numbers-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(8px) brightness(0.88);
transform: scale(1.06);
}
.home-numbers-inner {
position: relative;
padding: clamp(32px, 5vw, 64px);
display: flex;
flex-direction: column;
gap: clamp(18px, 4vw, 32px);
}
.home-numbers-title {
margin: 0 auto;
text-align: center;
}
.home-number-card {
text-align: center;
}
.home-number-value {
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.2;
word-break: break-word;
/* color managed by base.j2 */
}
.home-number-label {
font-size: 0.95rem;
margin-top: 4px;
/* color managed by base.j2 */
opacity: 0.85;
}
@media (max-width: 960px) {
.home-numbers-block .grid.cols-3 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
}
}
@media (max-width: 720px) {
.home-numbers-inner {
padding: 32px 16px;
}
.home-numbers-block .grid.cols-3 {
grid-template-columns: 1fr;
gap: 24px;
}
}
.cards-block .cards-title {
color: var(--on-surface);
}
.cards-block .cards-desc {
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
opacity: 0.8;
}
/* 響應式調整：手機版保持正方形不裁切 */
@media (max-width: 720px) {
.cards-grid {
grid-template-columns: 1fr !important;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.cards-item img {
max-width: 100% !important;
aspect-ratio: 1/1;
object-fit: contain;
}
}
.feature-sections {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary) 92%, #ffffff 8%),
color-mix(in srgb, var(--color-secondary) 82%, #000000 18%)
);
border-radius: 32px;
padding: clamp(28px, 6vw, 64px);
color: var(--on-primary);
}
.feature-sections-inner {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.feature-main-title {
color: var(--on-primary);
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.feature-subheading,
.feature-footer {
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
margin: 0;
line-height: 1.6;
}
.feature-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.feature-row {
display: flex;
gap: 16px;
padding: 18px 20px;
background: color-mix(in srgb, var(--color-secondary) 18%, rgba(0,0,0,0.7));
border-radius: 20px;
align-items: flex-start;
}
.feature-icon {
font-size: 1.8rem;
line-height: 1;
margin-top: 4px;
}
.feature-icon-img {
width: 40px;
height: 40px;
object-fit: contain;
margin-top: 4px;
}
.feature-text h3 {
margin: 0 0 6px;
color: var(--on-primary);
font-size: 1.2rem;
}
.feature-text p {
margin: 0;
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
line-height: 1.6;
}
.feature-text ul {
margin: 10px 0 0;
padding-left: 18px;
color: color-mix(in srgb, var(--on-primary) 88%, rgba(255,255,255,0) 12%);
}
.feature-text li {
margin-bottom: 4px;
}
.feature-table-wrapper {
background: color-mix(in srgb, var(--color-secondary) 20%, rgba(0,0,0,0.75));
border-radius: 20px;
padding: 18px;
}
.feature-table-title {
font-weight: 600;
margin-bottom: 12px;
}
.feature-table-scroll {
overflow-x: auto;
}
.feature-table {
width: 100%;
border-collapse: collapse;
color: var(--on-primary);
}
.feature-table th,
.feature-table td {
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--on-primary) 35%, rgba(255,255,255,0) 65%);
text-align: left;
white-space: nowrap;
}
.feature-table th {
background: color-mix(in srgb, var(--color-secondary) 30%, rgba(0,0,0,0.6));
font-weight: 600;
}
.feature-table td {
background: color-mix(in srgb, var(--color-secondary) 18%, rgba(0,0,0,0.5));
}
@media (max-width: 640px) {
.feature-row {
flex-direction: column;
}
.feature-icon,
.feature-icon-img {
margin-bottom: 6px;
}
.feature-table {
font-size: 0.9rem;
}
}
.crosslink-cards .crosslink-grid {
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crosslink-card {
display:flex;
flex-direction:column;
gap:12px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 12%, rgba(255,255,255,0.04));
border:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 30%, rgba(0,0,0,0.1));
border-radius:14px;
text-decoration:none;
color: inherit;
overflow:hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.crosslink-card:hover {
transform: translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.14);
border-color: color-mix(in srgb, var(--surface-bg, #224e60) 10%, #ffffff 40%);
}
.crosslink-card figure {
margin:0;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.2));
background: color-mix(in srgb, #000 5%, rgba(255,255,255,0.08));
display:flex;
align-items:center;
justify-content:center;
}
.crosslink-card img {
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}
.crosslink-icon {
width:100%;
aspect-ratio: 2/1;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap: 6px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 5%, rgba(255,255,255,0.02));
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.1));
}
.crosslink-icon-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 78px;
padding: 0 14px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--on-primary, #fff);
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 56%, #ffffff 44%) 100%);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.crosslink-icon-hint {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-surface, #fff) 62%, rgba(255,255,255,0));
}
.crosslink-icon--mobile .crosslink-icon-mark,
.crosslink-icon--sports .crosslink-icon-mark,
.crosslink-icon--offer .crosslink-icon-mark {
min-width: 92px;
}
.crosslink-icon--stage .crosslink-icon-mark,
.crosslink-icon--default .crosslink-icon-mark {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 66%, #ffffff 34%) 100%);
}
.crosslink-body {
padding:0 14px 14px;
}
.crosslink-body h3 {
margin:0 0 8px;
font-size:1.05rem;
}
.crosslink-body p {
margin:0;
font-size:0.95rem;
line-height:1.5;
color: color-mix(in srgb, var(--on-surface, #fff) 80%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.crosslink-cards .crosslink-grid {
grid-template-columns:1fr;
}
}
.seo-long-block { line-height: 1.75; }
.seo-long-block h2 { line-height: 1.35; margin: 1.1rem 0 0.7rem; }
.seo-long-block p { margin: 0 0 1rem; line-height: 1.75; white-space: normal; word-break: normal; overflow-wrap: break-word; }
.seo-long-block a,
.seo-long-block strong {
display: inline !important;
line-height: inherit;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
vertical-align: baseline;
}
.seo-long-block a {
color: var(--seo-link-color, #56d4ff);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
font-weight: 700;
}
.seo-long-block a:hover {
color: color-mix(in srgb, var(--seo-link-color, #56d4ff) 80%, #ffffff 20%);
}
.seo-long-block .seo-long-rich { color: var(--on-surface); line-height: 1.75; margin-bottom: 1rem; }
.ribbon-shell {
max-width: 1180px;
margin: 0 auto;
padding: 30px 20px 60px;
}
.ribbon-stack {
display: grid;
gap: 22px;
}
.ribbon-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ribbon-tag {
position: sticky;
top: 92px;
align-self: start;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 68%, #ffffff 32%) 100%);
color: var(--on-primary, #fff);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 14px 26px rgba(16, 33, 49, 0.16);
}
.ribbon-panel {
position: relative;
overflow: hidden;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, rgba(0,0,0,0.08));
box-shadow: 0 18px 38px rgba(16, 33, 49, 0.08);
}
.ribbon-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
}
.ribbon-panel > .block,
.ribbon-panel > section.block,
.ribbon-panel > .media-tabs {
margin: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ribbon-panel--seo {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,244,238,0.94) 100%);
}
@media (max-width: 920px) {
.ribbon-row {
grid-template-columns: 1fr;
}
.ribbon-tag {
position: static;
width: fit-content;
}
}
@media (max-width: 720px) {
.ribbon-shell {
padding-inline: 16px;
}
.ribbon-panel {
border-radius: 22px;
}
}
/* Source: jogos.html */
:root { --color-primary: #2fc66b; --color-secondary: #f3fbff; --color-muted: #def7ea; --on-primary: #ffffff; --on-secondary: #102a43; --btn-bg: #2fc66b; --btn-fg: #ffffff; --footer-bg: #2fc66b; --header-bg: #2fc66b; --on-header: #ffffff; --on-footer: #ffffff; --heading-color: #0f8a4a; --surface-bg: #e3f7ff; --on-surface: #0c2f3d; --toy-header-bg: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); --toy-btn-bg: #2fc66b; --toy-btn-color: #ffffff; --toy-nav-color: #ffffff; --color-accent-sky: #44baf5; --brand-gradient: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial, sans-serif; margin:0; color: var(--on-secondary); background: var(--color-secondary); font-size:14px; }
main { max-width: 1080px; margin: auto; padding: 16px; }
/* Header layout */
body > header { background: var(--brand-gradient); color: var(--on-header); position: sticky; top: 0; z-index: 1000; padding: 16px 0; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:nowrap; }
header img { border-radius:8px; }
header img.logo-square { width:52px; height:auto; }
header img.logo-landscape { width:auto; height:48px; max-width: 180px; object-fit: contain; }
.brand { display:flex; align-items:center; gap:12px; }
.nav-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; }
.nav-center a { text-decoration:none; font-weight:600; color: var(--on-header); padding:4px 8px; border-radius:999px; transition: background-color .15s ease, color .15s ease; white-space:nowrap; font-size:0.88rem; }
.kw-highlight { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.nav-center a.nav-child { font-size:0.92em; opacity:.85; padding-left:12px; position:relative; }
.nav-center a.nav-child::before { content:"•"; font-size:0.75em; margin-right:4px; vertical-align:middle; }
.nav-center a:hover { background: color-mix(in srgb, var(--on-header) 18%, rgba(255,255,255,0.2)); color: var(--on-header); }
@media (prefers-color-scheme: dark) {
.nav-center a { color:#fff; }
.nav-center a:hover { background: color-mix(in srgb, #ffffff 22%, rgba(255,255,255,0.05)); color:#fff; }
}
.actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; flex:0 0 auto; }
.menu.responsive { display:none; }
/* Buttons */
.btn {margin-top: 1.5rem; display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration:none; border:1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-weight:700; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease, color .12s ease; }
/* Remove margin-top for buttons in header */
header .btn { margin-top: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); opacity:.98; background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login:hover { background: color-mix(in srgb, #ffffff 82%, var(--color-secondary) 18%); color: var(--color-secondary); }
.btn-signup:hover { background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); font-weight:700; }
.btn-signup { background: transparent; color: var(--color-primary); font-weight:700; }
/* Ensure login stays visible on header background */
header .btn-login { color: var(--on-header); border-color: var(--on-header); }
header .btn-login:hover { background: color-mix(in srgb, var(--on-header) 20%, transparent); color: var(--on-header); }
/* Ensure signup stays visible on primary header background */
header .btn-signup { background: var(--on-primary); color: var(--color-primary); border-color: var(--on-primary); }
header .btn-signup:hover { background: color-mix(in srgb, var(--on-primary) 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-buy { background: transparent; color:#111; border-color:#111; font-weight:700; }
/* Mobile-only top CTA (hidden on desktop) */
.top-cta { display:none; }
/* Burger */
.burger { display:none; border:none; width:44px; height:36px; padding:6px; border-radius:10px; background: color-mix(in srgb, var(--color-primary) 20%, white); color: var(--on-primary); align-items:center; justify-content:center; }
.burger i { font-size:18px; }
/* Mobile */
@media (max-width: 720px) {
header img.logo-landscape { max-width: 100px; height: 40px; }
body { font-size:13px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:12px; }
.brand { flex:0 0 auto; }
.nav-center { display:none; }
.actions { flex:0 0 auto; justify-content:center; gap:10px; }
.actions .btn { padding:8px 14px; font-size:13px; line-height:1.2; margin-top:0; }
.burger { display:inline-flex; justify-self:end; }
.menu.responsive { display:none; position:absolute; top:64px; left:0; right:0; background: var(--color-primary); color: var(--on-primary); border-top:1px solid rgba(255,255,255,0.15); padding:12px; flex-direction:column; gap:8px; }
.menu.responsive.open { display:flex; }
header img { width:42px; height:42px; }
main .block img,
main .card img {
width:100%;
display:block;
object-fit:cover;
border-radius:16px;
aspect-ratio:1 / 1;
}
main .block.hero img,
.hero-banner img,
.hero-banner {
aspect-ratio:auto;
border-radius:18px;
}
.hero-logo-wrapper { width:100%; max-width: calc(100vw - 32px); margin:24px auto 0; }
.hero-logo-wrapper img { width:100%; height:100%; max-width:100%; aspect-ratio:1/1; }
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
position:relative;
width:100%;
max-width: calc(100vw - 32px);
margin:0 auto 16px;
}
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content:"";
display:block;
padding-top:100%;
}
main .block:not(.hero) figure img,
main .card picture img,
main .card .figure-wrapper img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
}
.hero-banner { border-radius:14px; }
.hero-banners { gap:10px; margin-bottom:14px; }
.floating-corner-stack { right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:40vw; }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* Ensure media right-left blocks stack with text above image on mobile */
.swap-mobile .text { order: 1; }
.swap-mobile .figure { order: 2; }
/* Mobile fixed footer CTA: prevent overflow on narrow screens */
.footer-bonus-btn {
font-size:18px;
padding:14px 14px;
width:100%;
border-radius:16px;
box-sizing:border-box;
flex-wrap:wrap;
row-gap:8px;
}
.footer-bonus-btn span {
font-size:18px;
flex:1 1 100%;
min-width:0;
white-space:normal;
word-break:break-word;
line-height:1.2;
}
.footer-bonus-btn .fa-gift { font-size:1.15em; }
.footer-bonus-btn.floating {
padding-top:14px;
padding-bottom:max(14px, env(safe-area-inset-bottom));
padding-left:max(14px, env(safe-area-inset-left));
padding-right:max(14px, env(safe-area-inset-right));
}
body.floating-bonus-active { padding-bottom:150px; }
.footer-icon-row { gap:12px; padding:0; }
.footer-icon-row.payments i { font-size:2.4rem; }
.footer-icon-row.social i { font-size:1.5rem; }
.footer-copy h2 { font-size:1rem; }
}
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a.nav-child { padding-left: 24px; font-size: 0.95em; opacity: .9; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
.header-toy { border-bottom: 1px solid rgba(0,0,0,0.08); background: var(--toy-header-bg); padding: 18px clamp(12px,4vw,32px) 10px; }
.header-toy .toy-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-toy .toy-top.two-row {
position:relative;
justify-content:center;
gap:0;
padding:0 150px 0 60px;
min-height:64px;
}
.header-toy .toy-logo-center {
text-align:center;
flex:1;
display:flex;
justify-content:center;
}
.header-toy .toy-logo-center img { max-height:58px; width:auto; display:inline-block; }
.header-toy .toy-actions.align-right {
position:absolute;
right:60px;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
}
.header-toy .toy-logo img { max-height:48px; width:auto; display:block; }
.header-toy .toy-logo-text { font-size:1.4rem; font-weight:700; color:#111; letter-spacing:0.08em; }
.header-toy .toy-actions { display:flex; align-items:center; gap:12px; }
.header-toy .toy-btn { padding:10px 22px; border-radius:999px; border:1px solid var(--toy-btn-bg); background:var(--toy-btn-bg); color:var(--toy-btn-color); font-weight:600; text-decoration:none; transition:.15s ease; }
.header-toy .toy-btn:hover { opacity:.85; }
.header-toy .toy-btn.toy-auth { background:#fff; color:#111; border-color:#ddd; }
.header-toy .toy-btn.toy-auth.secondary { background:transparent; color:#111; border-color:#111; }
.header-toy .toy-burger { display:none; border:none; background:none; font-size:1.4rem; padding:6px; cursor:pointer; }
.toy-nav { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px clamp(8px,4vw,32px) 14px; }
.toy-nav .nav-link { text-decoration:none; color: var(--toy-nav-color); font-weight:600; position:relative; padding-bottom:6px; }
.toy-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#000; }
.toy-nav .nav-link.nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile { display:none; flex-direction:column; gap:10px; padding:12px clamp(8px,4vw,24px); border-top:1px solid rgba(0,0,0,0.08); }
.toy-nav-mobile a { text-decoration:none; color: var(--toy-nav-color); font-weight:600; }
.toy-nav-mobile .nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile.open { display:flex; }
@media (max-width: 920px) {
.toy-nav { display:none; }
.header-toy .toy-burger { display:inline-flex; }
.header-toy .toy-btn { font-size:0.9rem; padding:8px 18px; }
}
.toy-nav-divider {
width:100%;
height:1px;
background:rgba(0,0,0,0.12);
margin:12px 0 8px;
}
@media (max-width: 720px) {
.header-toy .toy-top.two-row { padding-right:0; flex-direction:column; }
.header-toy .toy-actions.align-right {
position:static;
transform:none;
width:100%;
justify-content:center;
margin-top:10px;
}
}
@media (max-width: 540px) {
.header-toy .toy-logo img { max-height:40px; }
.header-toy .toy-btn { display:inline-flex; }
.toy-nav-mobile { font-size:0.95rem; }
}
.container { padding: 12px; }
body.mazu-site .container { width:100%; max-width:100%; padding:0; }
.block {
padding: 24px;
border-radius: 14px;
margin: 16px 0;
background: var(--surface-bg);
border: 1px solid color-mix(in srgb, var(--surface-bg) 78%, rgba(0,0,0,0.2));
color: var(--on-surface);
transition: background-color .2s ease, color .2s ease;
}
.block p, .block li, .block span, .block td, .block th, .block a {
color: inherit;
}
.block .muted {
color: color-mix(in srgb, var(--on-surface) 72%, rgba(255,255,255,0) 28%);
}
.block.dark-surface {
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface td,
.block.dark-surface span,
.block.dark-surface a {
color: #fff;
}
.block.dark-surface .muted {
color: rgba(255,255,255,0.78);
}
body.style-28g { overflow-x:hidden; }
body.style-28g main {
max-width: 100%;
padding: 0;
}
body.style-28g main .block {
margin: 0;
border-radius: 0;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: clamp(32px, 6vw, 80px);
display:flex;
flex-direction:column;
align-items:center;
gap: clamp(18px,3vw,32px);
}
body.style-28g main .block + .block {
margin-top: 0;
}
body.style-28g main .block > *:not(style):not(script) {
width: min(1080px, 100%);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px) {
body.style-28g main .block > *:not(style):not(script) {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
}
body.style-28g main .block:nth-of-type(odd) {
background: color-mix(in srgb, var(--color-primary) 85%, #000000 15%);
color: var(--on-primary);
}
body.style-28g main .block:nth-of-type(odd) h1,
body.style-28g main .block:nth-of-type(odd) h2,
body.style-28g main .block:nth-of-type(odd) h3,
body.style-28g main .block:nth-of-type(odd) p,
body.style-28g main .block:nth-of-type(odd) li {
color: inherit;
}
body.style-28g main .block:nth-of-type(even) {
background: color-mix(in srgb, var(--color-secondary) 85%, #ffffff 15%);
color: var(--on-secondary);
}
body.style-28g main .block:nth-of-type(even) .muted {
color: color-mix(in srgb, var(--on-secondary) 65%, rgba(0,0,0,0) 35%);
}
.grid { display:grid; gap:16px; }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Responsive wrapping for dense card grids to avoid over-compression */
@media (max-width: 1024px) { .grid.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 880px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.muted { color: color-mix(in srgb, var(--on-surface) 55%, rgba(255,255,255,0) 45%); }
/* Hero layout helper */
.hero .hero-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; align-items:center; }
@media (max-width: 720px) { .hero .hero-grid { grid-template-columns: 1fr; } }
.hero-banners { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.hero-banner { display:block; border-radius:16px; overflow:hidden; background: var(--color-secondary); box-shadow: 0 12px 26px rgba(0,0,0,0.14); transition: transform .18s ease, box-shadow .18s ease; }
.hero-banner img { width:100%; display:block; object-fit:cover; }
.hero-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,0.2); }
.hero-logo-wrapper { margin:24px auto 0; width:100%; max-width:512px; }
.hero-logo-wrapper img { width:100% !important; max-width:512px; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); display:block; margin:0 auto; }
/* Hero toy variant */
.hero.hero-toy {
position: relative;
padding: clamp(48px, 12vw, 120px) 16px;
border-radius: 28px;
background: linear-gradient(135deg, #f7a5c5, #ffd966);
background-size: cover;
background-position: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.hero-toy-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
backdrop-filter: blur(2px);
}
.hero-toy-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-toy-logo {
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.hero-toy-logo img {
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
object-fit: contain;
border-radius: 28px;
background: rgba(255,255,255,0.1);
padding: 12px;
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
.hero-toy-logo-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
border-radius: 28px;
background: rgba(0,0,0,0.35);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.hero-toy-cta-wrap {
width: 100%;
display:flex;
justify-content:center;
}
.hero-toy-body h1 {
font-size: clamp(1.8rem, 4.4vw, 3rem);
margin: 0;
color: #fff;
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.hero-toy-body p {
display: block;
margin: 12px auto;
padding: 14px 18px;
border-radius: 18px;
background: rgba(0,0,0,0.45);
max-width: 720px;
font-size: 1.05rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
.hero-toy-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 42px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #ff6cab 0%, #ff9a44 100%);
color: #111;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
transition: transform .2s ease, box-shadow .2s ease;
}
.hero-toy-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,0.4);
}
.hero-toy-photo img {
width: clamp(220px, 28vw, 320px);
height: clamp(220px, 28vw, 320px);
border-radius: 28px;
object-fit: cover;
background: rgba(0,0,0,0.1);
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
@media (max-width: 540px) {
.hero.hero-toy {
border-radius: 20px;
padding: 48px 12px;
}
.hero-toy-logo img,
.hero-toy-logo-text {
width: min(320px, 90vw);
height: min(320px, 90vw);
border-radius: 32px;
}
.hero-toy-body p {
width: 100%;
box-sizing: border-box;
font-size: 0.98rem;
}
.hero-toy-cta {
width: 100%;
max-width: 320px;
}
}
.style-28g .hero.hero-toy {
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
border-radius: 0;
}
.floating-corner-stack { position:fixed; right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:13rem; display:flex; flex-direction:column; gap:16px; align-items:center; z-index:1100; padding:0 4px; }
.floating-corner-stack.hidden { display:none !important; }
.floating-corner-banner { display:flex; flex-direction:column; align-items:center; width:100%; border-radius:16px; overflow:visible; background:transparent; transition: transform .2s ease; text-decoration:none; gap:8px; }
.floating-corner-banner img {
width:72px;
height:auto;
display:block;
margin:0 auto;
}
/* 右側動圖文字背景不透明 */
.floating-corner-banner .floating-caption {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
margin:0 auto;
padding:8px 12px;
border-radius:14px;
background: color-mix(in srgb, var(--color-primary) 90%, #000000 10%);
color: #ffffff;
text-align:center;
box-shadow:0 4px 18px rgba(0,0,0,0.2);
max-width:100%;
width:100%;
}
.floating-caption-line { display:block; font-size:0.78rem; font-weight:600; line-height:1.3; letter-spacing:0.2px; white-space:nowrap; }
@media (max-width: 720px) {
/* Restore Floating Banners but scaled and safe */
.floating-corner-stack {
display: flex !important;
top: auto;
bottom: 90px;
right: 4px;
left: auto;
transform: none;
flex-direction: column;
align-items: flex-end;
width: auto;
max-width: 120px;
gap: 8px;
z-index: 1050;
}
.floating-corner-banner {
width: 100%;
align-items: flex-end;
}
.floating-corner-banner img {
width: 48px;
height: auto;
}
/* Hide caption on mobile to prevent clutter/overflow */
.floating-corner-banner .floating-caption {
display: none;
}
.floating-close-banners {
top: auto;
bottom: 150px;
right: 6px;
}
.floating-close-bonus {
right: 8px;
bottom: 78px;
}
/* Fix CTA button layout */
.btn {
font-size: 0.9rem !important;
padding: 8px 16px !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
display: inline-block;
}
/* Ensure text wraps correctly */
.block p, .block li, .block span, h1, h2, h3 {
word-break: break-word;
overflow-wrap: anywhere;
}
}
.floating-corner-banner:hover { transform: translateY(-3px) scale(1.03); }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* More interactive hovers */
.block figure img { transition: transform .18s ease, box-shadow .18s ease; }
.block figure img:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
table tr:hover td { background: color-mix(in srgb, var(--btn-bg) 8%, #ffffff); }
footer { color: var(--on-footer); border-top: 1px solid rgba(255,255,255,0.15); background: var(--footer-bg); padding: 24px 0; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; text-align:center; }
.footer-logo { margin-bottom: 12px; display:flex; justify-content:center; }
.footer-logo img { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.footer-bonus-btn { display:flex; align-items:center; justify-content:center; gap:12px; background: var(--color-secondary); color: var(--color-primary); text-decoration:none; font-weight:800; font-size:26px; border-radius:18px; padding:18px 28px; margin:16px auto; width:min(100%, 720px); box-shadow: 0 18px 32px rgba(0,0,0,0.24); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; position:relative; box-sizing:border-box; }
/* Footer按鈕文字加亮 */
.footer-bonus-btn span {
flex:1;
text-align:center;
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.6);
font-size:26px;
font-weight:800;
letter-spacing:0.4px;
}
.footer-bonus-btn .fa-gift { color:#ffcc33; font-size:1.35em; animation: footer-gift-pulse 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes footer-gift-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.footer-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px rgba(0,0,0,0.28); }
.footer-bonus-btn.floating { position:fixed; left:0; right:0; bottom:0; width:100%; margin:0; padding:20px clamp(20px, 4vw, 36px); border-radius:0; box-shadow: 0 -6px 28px rgba(0,0,0,0.3); transform:none; z-index:1200; box-sizing:border-box; }
body.floating-bonus-active { padding-bottom:160px; transition: padding-bottom .2s ease; }
body.bonus-float-hidden .footer-bonus-btn.floating { display:none !important; }
body.bonus-float-hidden { padding-bottom:0 !important; }
.floating-close {
position:fixed;
width:28px;
height:28px;
border:1px solid rgba(255,255,255,0.6);
border-radius:50%;
background:rgba(0,0,0,0.72);
color:#fff;
font-size:18px;
line-height:1;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:1301;
box-shadow:0 6px 14px rgba(0,0,0,0.28);
}
.floating-close:hover { background:rgba(0,0,0,0.86); }
.floating-close-bonus { right:10px; bottom:120px; display:none; }
body.floating-bonus-active:not(.bonus-float-hidden) .floating-close-bonus { display:flex; }
.floating-close-banners { right:10px; top:calc(50% - 118px); }
.footer-copy, .footer-payments, .footer-social { margin:24px auto 0; text-align:center; max-width:960px; }
.footer-copy h2 { font-size:1.12rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.3px; }
.footer-copy p { margin:0; color: color-mix(in srgb, var(--on-footer) 85%, rgba(255,255,255,0.55)); line-height:1.6; }
.footer-payments h3, .footer-social h3 { font-size:1.02rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.4px; text-transform:uppercase; }
.footer-icon-row { display:flex; justify-content:center; align-items:center; gap:18px; padding:0; background:transparent; flex-wrap:wrap; }
.footer-icon-row a { display:flex; align-items:center; justify-content:center; color: inherit; text-decoration:none; min-width:88px; padding:16px; border-radius:18px; background: rgba(0,0,0,0.2); box-shadow: 0 12px 24px rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.1); transition: transform .2s ease, box-shadow .2s ease; }
.footer-icon-row a:hover, .footer-icon-row a:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0,0,0,0.18); background: rgba(0,0,0,0.3); }
.footer-icon-row.payments a { min-width:130px; padding:20px; }
/* Footer icon使用加亮的主色/輔色 */
.footer-icon-row i {
color: #ffffff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
transition: color .2s ease, transform .2s ease, filter .2s ease;
font-size:2.4rem;
}
.footer-icon-row.payments i { font-size:2.8rem; }
.footer-icon-row.social i { font-size:1.8rem; }
.footer-icon-row a:hover i, .footer-icon-row a:focus-visible i {
color:#ffae00;
filter: brightness(1.2);
transform: translateY(-3px);
}
.footer-icon-row a:focus-visible { outline:2px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.5)); outline-offset:4px; box-shadow: 0 14px 28px rgba(0,0,0,0.15); }
body.footer-secondary-light .footer-icon-row i { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a:hover i, body.footer-secondary-light .footer-icon-row a:focus-visible i { color: var(--color-primary); filter:brightness(0.8); }
body.footer-secondary-light .footer-bonus-btn .fa-gift { color: #ff9900; }
body.footer-secondary-light .footer-bonus-btn span { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.footer-secondary-light .footer-icon-row a:hover { background: #ffffff; }
body.footer-primary-bright .footer-bonus-btn .fa-gift { color: #ff9900; }
h1, h2, h3 { color: var(--heading-color); }
/* Card/list hover */
.card { border:1px solid color-mix(in srgb, var(--surface-bg) 80%, rgba(0,0,0,0.15)); border-radius:10px; padding:16px; background:var(--surface-bg); color:var(--on-surface); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); background: color-mix(in srgb, var(--surface-bg) 90%, rgba(255,255,255,0.2)); }
.list-emoji li { transition: background-color .12s ease, transform .12s ease; border-radius:8px; padding:6px 8px; }
.list-emoji li:hover { background: color-mix(in srgb, var(--color-primary) 20%, rgba(255,255,255,0.8)); transform: translateX(2px); }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
/* Card content safety */
.card h3, .card p { word-wrap: break-word; overflow-wrap: anywhere; }
body.mazu-site .block p { line-height:1.65; }
/* Override for full image display (contain mode) - Global */
main .block img,
main .card img,
.hero-toy-photo img,
main .block figure img,
main .card picture img,
main .card .figure-wrapper img {
aspect-ratio: auto !important;
object-fit: contain !important;
height: auto !important;
max-height: 85vh;
width: auto !important;
max-width: 100%;
position: relative !important;
border-radius: 12px !important;
}
/* Reset containers */
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
height: auto !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
/* Remove padding hacks */
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content: none !important;
padding-top: 0 !important;
display: none !important;
}
/* Fixed button visibility on dark backgrounds (odd blocks) */
body.style-28g main .block:nth-of-type(odd) .btn {
border-color: currentColor;
color: inherit;
}
/* Ensure dark-surface blocks always have white text regardless of position */
.block.dark-surface,
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface span,
.block.dark-surface div {
color: #ffffff !important;
}
/* 修正 Home Numbers 在有背景圖時必須是白色 */
.home-numbers-block.with-bg .home-numbers-inner,
.home-numbers-block.with-bg .home-numbers-title,
.home-numbers-block.with-bg .home-number-value,
.home-numbers-block.with-bg .home-number-label {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
/* Neon Style - 螢光風格 */
body.style-neon main .block:not(.hero) {
border: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
box-shadow:
0 0 8px var(--color-primary),
0 0 20px color-mix(in srgb, var(--color-primary) 60%, transparent),
inset 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
margin-bottom: 24px; /* 增加間距避免重疊 */
}
body.style-neon main .block .figure img,
body.style-neon main .block figure img {
border: 4px solid transparent !important; /* 透明間距層 */
border-radius: 16px !important;
max-width: 100% !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, #ffffff), /* 更亮的實線外框 */
0 0 10px var(--color-primary), /* 緊密光暈 */
0 0 30px color-mix(in srgb, var(--color-primary) 80%, transparent) !important; /* 擴散光暈 */
}
/* 針對 full-width block (style-28g) 調整 border */
body.style-28g.style-neon main .block {
width: 100% !important; /* 確保邊框在視窗內 */
box-sizing: border-box !important; /* 確保 padding 和 border 不會撐開寬度 */
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 16px !important;
/* 確保邊框顏色一致 */
border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
border-right: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
}
/* Hero Left-Right Mobile Layout Adjustment */
@media (max-width: 720px) {
/* Interleave Image between H1 and Content */
.hero-left-right .grid .text,
.hero-left-right .grid .figure {
display: contents;
}
.hero-left-right .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-left-right .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-left-right .grid .text > *:not(h1) { order: 3; }
.hero-left-right .grid { text-align: center !important; justify-items: center; }
}
/* Fix Standard 28g Mobile Overflow (Containment) */
@media (max-width: 720px) {
body.style-28g main .block {
width: 100% !important;
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.style-28g .hero.hero-toy {
width: 100% !important;
left: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* Boxed Style */
body.style-boxed main {
max-width: 1200px;
margin: 40px auto;
background: var(--surface-bg);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
padding: 40px;
}
body.style-boxed main .block {
background: transparent;
border: none;
box-shadow: none;
padding: 24px 0;
margin: 24px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.style-boxed main .block:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Hero Split Diagonal */
.hero-split-diagonal {
position: relative;
overflow: hidden;
border: none !important;
background: transparent !important;
padding: 60px 24px;
}
.hero-split-diagonal::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(115deg, var(--surface-bg) 55%, var(--color-primary) 55.1%, var(--color-primary) 100%);
z-index: 1;
}
.hero-split-diagonal .content-wrapper {
position: relative;
z-index: 2;
}
/* Ensure split-diagonal text stays readable on varied backgrounds */
.hero-split-diagonal .text,
.hero-split-diagonal .text h1,
.hero-split-diagonal .text h2,
.hero-split-diagonal .text h3,
.hero-split-diagonal .text p,
.hero-split-diagonal .text li,
.hero-split-diagonal .text span {
color: var(--on-surface);
}
.hero-split-diagonal .text .muted {
color: color-mix(in srgb, var(--on-surface) 70%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.hero-split-diagonal {
padding: 32px 16px;
}
.hero-split-diagonal::before {
background: var(--surface-bg); /* Reset diagonal on mobile */
}
.hero-split-diagonal .grid .text,
.hero-split-diagonal .grid .figure {
display: contents;
}
.hero-split-diagonal .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-split-diagonal .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-split-diagonal .grid .text > *:not(h1) { order: 3; }
.hero-split-diagonal .grid { text-align: center !important; justify-items: center; }
}
/* Mobile Header Bottom Sticky Style */
@media (max-width: 720px) {
body.mobile-header-bottom-sticky .actions {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: var(--header-bg) !important;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 12px !important;
display: flex !important;
justify-content: center;
gap: 12px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
z-index: 9999 !important;
padding-bottom: max(12px, env(safe-area-inset-bottom));
box-sizing: border-box;
visibility: visible !important;
opacity: 1 !important;
}
body.mobile-header-bottom-sticky .actions .btn {
flex: 1;
text-align: center;
padding: 12px 0;
margin: 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile-header-bottom-sticky main {
padding-bottom: 90px !important;
}
/* Footer is outside main; add safe space so last icons aren't covered */
body.mobile-header-bottom-sticky .site-footer {
padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
body.mobile-header-bottom-sticky .floating-corner-stack {
bottom: 90px !important;
}
/* Hide conflicting floating bonus button when sticky header is active */
body.mobile-header-bottom-sticky .footer-bonus-btn.floating,
body.mobile-header-bottom-sticky .footer-bonus-btn {
display: none !important;
}
body.mobile-header-bottom-sticky .burger {
display: inline-flex !important;
margin-left: auto !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1101 !important;
}
/* Top CTA: Logo + CTA + Burger (mobile) */
body.mobile-header-bottom-sticky .header-inner { position: relative; }
body.mobile-header-bottom-sticky .top-cta {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 10px 16px;
min-height: 52px; /* bigger than logo(42) & burger(36) */
border-radius: 14px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
white-space: nowrap;
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
/* Red text + contrasting bg (avoid blending into header bg) */
color: #ff2a2a;
background: color-mix(in srgb, #ffffff 92%, var(--color-primary) 8%);
border: 2px solid color-mix(in srgb, #ff2a2a 72%, rgba(0,0,0,0));
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
z-index: 1102;
}
/* Subtle sheen sweep (no blinking) */
body.mobile-header-bottom-sticky .top-cta::before {
content: "";
position: absolute;
top: -30%;
left: -70%;
width: 60%;
height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
transform: rotate(20deg);
opacity: 0.65;
animation: topCtaSheen 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes topCtaSheen {
0% { left: -70%; }
55% { left: 120%; }
100% { left: 120%; }
}
/* Gentle bob (no flashing) */
body.mobile-header-bottom-sticky .top-cta {
animation: topCtaBob 3.2s ease-in-out infinite;
}
@keyframes topCtaBob {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -50%) translateY(-1px); }
}
}
/* Parallax & Grid & Animation */
body.parallax-bg {
background-attachment: fixed !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 720px) {
body.parallax-bg { background-attachment: scroll !important; }
}
@media (min-width: 721px) {
.grid.grid-60-40 { grid-template-columns: 1.5fr 1fr !important; }
.grid.grid-40-60 { grid-template-columns: 1fr 1.5fr !important; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.qa-block,
.qa-block h2,
.qa-block summary,
.qa-block summary strong,
.qa-block p {
color: var(--on-surface);
}
.qa-block summary {
cursor: pointer;
}
.qa-block p {
opacity: 0.88;
}
.cards-block .cards-title {
color: var(--on-surface);
}
.cards-block .cards-desc {
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
opacity: 0.8;
}
/* 響應式調整：手機版保持正方形不裁切 */
@media (max-width: 720px) {
.cards-grid {
grid-template-columns: 1fr !important;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.cards-item img {
max-width: 100% !important;
aspect-ratio: 1/1;
object-fit: contain;
}
}
.crosslink-cards .crosslink-grid {
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crosslink-card {
display:flex;
flex-direction:column;
gap:12px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 12%, rgba(255,255,255,0.04));
border:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 30%, rgba(0,0,0,0.1));
border-radius:14px;
text-decoration:none;
color: inherit;
overflow:hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.crosslink-card:hover {
transform: translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.14);
border-color: color-mix(in srgb, var(--surface-bg, #224e60) 10%, #ffffff 40%);
}
.crosslink-card figure {
margin:0;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.2));
background: color-mix(in srgb, #000 5%, rgba(255,255,255,0.08));
display:flex;
align-items:center;
justify-content:center;
}
.crosslink-card img {
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}
.crosslink-icon {
width:100%;
aspect-ratio: 2/1;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap: 6px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 5%, rgba(255,255,255,0.02));
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.1));
}
.crosslink-icon-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 78px;
padding: 0 14px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--on-primary, #fff);
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 56%, #ffffff 44%) 100%);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.crosslink-icon-hint {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-surface, #fff) 62%, rgba(255,255,255,0));
}
.crosslink-icon--mobile .crosslink-icon-mark,
.crosslink-icon--sports .crosslink-icon-mark,
.crosslink-icon--offer .crosslink-icon-mark {
min-width: 92px;
}
.crosslink-icon--stage .crosslink-icon-mark,
.crosslink-icon--default .crosslink-icon-mark {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 66%, #ffffff 34%) 100%);
}
.crosslink-body {
padding:0 14px 14px;
}
.crosslink-body h3 {
margin:0 0 8px;
font-size:1.05rem;
}
.crosslink-body p {
margin:0;
font-size:0.95rem;
line-height:1.5;
color: color-mix(in srgb, var(--on-surface, #fff) 80%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.crosslink-cards .crosslink-grid {
grid-template-columns:1fr;
}
}
.seo-long-block { line-height: 1.75; }
.seo-long-block h2 { line-height: 1.35; margin: 1.1rem 0 0.7rem; }
.seo-long-block p { margin: 0 0 1rem; line-height: 1.75; white-space: normal; word-break: normal; overflow-wrap: break-word; }
.seo-long-block a,
.seo-long-block strong {
display: inline !important;
line-height: inherit;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
vertical-align: baseline;
}
.seo-long-block a {
color: var(--seo-link-color, #56d4ff);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
font-weight: 700;
}
.seo-long-block a:hover {
color: color-mix(in srgb, var(--seo-link-color, #56d4ff) 80%, #ffffff 20%);
}
.seo-long-block .seo-long-rich { color: var(--on-surface); line-height: 1.75; margin-bottom: 1rem; }
.ribbon-shell {
max-width: 1180px;
margin: 0 auto;
padding: 30px 20px 60px;
}
.ribbon-stack {
display: grid;
gap: 22px;
}
.ribbon-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ribbon-tag {
position: sticky;
top: 92px;
align-self: start;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 68%, #ffffff 32%) 100%);
color: var(--on-primary, #fff);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 14px 26px rgba(16, 33, 49, 0.16);
}
.ribbon-panel {
position: relative;
overflow: hidden;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, rgba(0,0,0,0.08));
box-shadow: 0 18px 38px rgba(16, 33, 49, 0.08);
}
.ribbon-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
}
.ribbon-panel > .block,
.ribbon-panel > section.block,
.ribbon-panel > .media-tabs {
margin: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ribbon-panel--seo {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,244,238,0.94) 100%);
}
@media (max-width: 920px) {
.ribbon-row {
grid-template-columns: 1fr;
}
.ribbon-tag {
position: static;
width: fit-content;
}
}
@media (max-width: 720px) {
.ribbon-shell {
padding-inline: 16px;
}
.ribbon-panel {
border-radius: 22px;
}
}
/* Source: link-de-acesso.html */
:root { --color-primary: #2fc66b; --color-secondary: #f3fbff; --color-muted: #def7ea; --on-primary: #ffffff; --on-secondary: #102a43; --btn-bg: #2fc66b; --btn-fg: #ffffff; --footer-bg: #2fc66b; --header-bg: #2fc66b; --on-header: #ffffff; --on-footer: #ffffff; --heading-color: #0f8a4a; --surface-bg: #e3f7ff; --on-surface: #0c2f3d; --toy-header-bg: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); --toy-btn-bg: #2fc66b; --toy-btn-color: #ffffff; --toy-nav-color: #ffffff; --color-accent-sky: #44baf5; --brand-gradient: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial, sans-serif; margin:0; color: var(--on-secondary); background: var(--color-secondary); font-size:14px; }
main { max-width: 1080px; margin: auto; padding: 16px; }
/* Header layout */
body > header { background: var(--brand-gradient); color: var(--on-header); position: sticky; top: 0; z-index: 1000; padding: 16px 0; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:nowrap; }
header img { border-radius:8px; }
header img.logo-square { width:52px; height:auto; }
header img.logo-landscape { width:auto; height:48px; max-width: 180px; object-fit: contain; }
.brand { display:flex; align-items:center; gap:12px; }
.nav-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; }
.nav-center a { text-decoration:none; font-weight:600; color: var(--on-header); padding:4px 8px; border-radius:999px; transition: background-color .15s ease, color .15s ease; white-space:nowrap; font-size:0.88rem; }
.kw-highlight { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.nav-center a.nav-child { font-size:0.92em; opacity:.85; padding-left:12px; position:relative; }
.nav-center a.nav-child::before { content:"•"; font-size:0.75em; margin-right:4px; vertical-align:middle; }
.nav-center a:hover { background: color-mix(in srgb, var(--on-header) 18%, rgba(255,255,255,0.2)); color: var(--on-header); }
@media (prefers-color-scheme: dark) {
.nav-center a { color:#fff; }
.nav-center a:hover { background: color-mix(in srgb, #ffffff 22%, rgba(255,255,255,0.05)); color:#fff; }
}
.actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; flex:0 0 auto; }
.menu.responsive { display:none; }
/* Buttons */
.btn {margin-top: 1.5rem; display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration:none; border:1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-weight:700; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease, color .12s ease; }
/* Remove margin-top for buttons in header */
header .btn { margin-top: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); opacity:.98; background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login:hover { background: color-mix(in srgb, #ffffff 82%, var(--color-secondary) 18%); color: var(--color-secondary); }
.btn-signup:hover { background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); font-weight:700; }
.btn-signup { background: transparent; color: var(--color-primary); font-weight:700; }
/* Ensure login stays visible on header background */
header .btn-login { color: var(--on-header); border-color: var(--on-header); }
header .btn-login:hover { background: color-mix(in srgb, var(--on-header) 20%, transparent); color: var(--on-header); }
/* Ensure signup stays visible on primary header background */
header .btn-signup { background: var(--on-primary); color: var(--color-primary); border-color: var(--on-primary); }
header .btn-signup:hover { background: color-mix(in srgb, var(--on-primary) 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-buy { background: transparent; color:#111; border-color:#111; font-weight:700; }
/* Mobile-only top CTA (hidden on desktop) */
.top-cta { display:none; }
/* Burger */
.burger { display:none; border:none; width:44px; height:36px; padding:6px; border-radius:10px; background: color-mix(in srgb, var(--color-primary) 20%, white); color: var(--on-primary); align-items:center; justify-content:center; }
.burger i { font-size:18px; }
/* Mobile */
@media (max-width: 720px) {
header img.logo-landscape { max-width: 100px; height: 40px; }
body { font-size:13px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:12px; }
.brand { flex:0 0 auto; }
.nav-center { display:none; }
.actions { flex:0 0 auto; justify-content:center; gap:10px; }
.actions .btn { padding:8px 14px; font-size:13px; line-height:1.2; margin-top:0; }
.burger { display:inline-flex; justify-self:end; }
.menu.responsive { display:none; position:absolute; top:64px; left:0; right:0; background: var(--color-primary); color: var(--on-primary); border-top:1px solid rgba(255,255,255,0.15); padding:12px; flex-direction:column; gap:8px; }
.menu.responsive.open { display:flex; }
header img { width:42px; height:42px; }
main .block img,
main .card img {
width:100%;
display:block;
object-fit:cover;
border-radius:16px;
aspect-ratio:1 / 1;
}
main .block.hero img,
.hero-banner img,
.hero-banner {
aspect-ratio:auto;
border-radius:18px;
}
.hero-logo-wrapper { width:100%; max-width: calc(100vw - 32px); margin:24px auto 0; }
.hero-logo-wrapper img { width:100%; height:100%; max-width:100%; aspect-ratio:1/1; }
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
position:relative;
width:100%;
max-width: calc(100vw - 32px);
margin:0 auto 16px;
}
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content:"";
display:block;
padding-top:100%;
}
main .block:not(.hero) figure img,
main .card picture img,
main .card .figure-wrapper img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
}
.hero-banner { border-radius:14px; }
.hero-banners { gap:10px; margin-bottom:14px; }
.floating-corner-stack { right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:40vw; }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* Ensure media right-left blocks stack with text above image on mobile */
.swap-mobile .text { order: 1; }
.swap-mobile .figure { order: 2; }
/* Mobile fixed footer CTA: prevent overflow on narrow screens */
.footer-bonus-btn {
font-size:18px;
padding:14px 14px;
width:100%;
border-radius:16px;
box-sizing:border-box;
flex-wrap:wrap;
row-gap:8px;
}
.footer-bonus-btn span {
font-size:18px;
flex:1 1 100%;
min-width:0;
white-space:normal;
word-break:break-word;
line-height:1.2;
}
.footer-bonus-btn .fa-gift { font-size:1.15em; }
.footer-bonus-btn.floating {
padding-top:14px;
padding-bottom:max(14px, env(safe-area-inset-bottom));
padding-left:max(14px, env(safe-area-inset-left));
padding-right:max(14px, env(safe-area-inset-right));
}
body.floating-bonus-active { padding-bottom:150px; }
.footer-icon-row { gap:12px; padding:0; }
.footer-icon-row.payments i { font-size:2.4rem; }
.footer-icon-row.social i { font-size:1.5rem; }
.footer-copy h2 { font-size:1rem; }
}
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a.nav-child { padding-left: 24px; font-size: 0.95em; opacity: .9; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
.header-toy { border-bottom: 1px solid rgba(0,0,0,0.08); background: var(--toy-header-bg); padding: 18px clamp(12px,4vw,32px) 10px; }
.header-toy .toy-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-toy .toy-top.two-row {
position:relative;
justify-content:center;
gap:0;
padding:0 150px 0 60px;
min-height:64px;
}
.header-toy .toy-logo-center {
text-align:center;
flex:1;
display:flex;
justify-content:center;
}
.header-toy .toy-logo-center img { max-height:58px; width:auto; display:inline-block; }
.header-toy .toy-actions.align-right {
position:absolute;
right:60px;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
}
.header-toy .toy-logo img { max-height:48px; width:auto; display:block; }
.header-toy .toy-logo-text { font-size:1.4rem; font-weight:700; color:#111; letter-spacing:0.08em; }
.header-toy .toy-actions { display:flex; align-items:center; gap:12px; }
.header-toy .toy-btn { padding:10px 22px; border-radius:999px; border:1px solid var(--toy-btn-bg); background:var(--toy-btn-bg); color:var(--toy-btn-color); font-weight:600; text-decoration:none; transition:.15s ease; }
.header-toy .toy-btn:hover { opacity:.85; }
.header-toy .toy-btn.toy-auth { background:#fff; color:#111; border-color:#ddd; }
.header-toy .toy-btn.toy-auth.secondary { background:transparent; color:#111; border-color:#111; }
.header-toy .toy-burger { display:none; border:none; background:none; font-size:1.4rem; padding:6px; cursor:pointer; }
.toy-nav { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px clamp(8px,4vw,32px) 14px; }
.toy-nav .nav-link { text-decoration:none; color: var(--toy-nav-color); font-weight:600; position:relative; padding-bottom:6px; }
.toy-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#000; }
.toy-nav .nav-link.nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile { display:none; flex-direction:column; gap:10px; padding:12px clamp(8px,4vw,24px); border-top:1px solid rgba(0,0,0,0.08); }
.toy-nav-mobile a { text-decoration:none; color: var(--toy-nav-color); font-weight:600; }
.toy-nav-mobile .nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile.open { display:flex; }
@media (max-width: 920px) {
.toy-nav { display:none; }
.header-toy .toy-burger { display:inline-flex; }
.header-toy .toy-btn { font-size:0.9rem; padding:8px 18px; }
}
.toy-nav-divider {
width:100%;
height:1px;
background:rgba(0,0,0,0.12);
margin:12px 0 8px;
}
@media (max-width: 720px) {
.header-toy .toy-top.two-row { padding-right:0; flex-direction:column; }
.header-toy .toy-actions.align-right {
position:static;
transform:none;
width:100%;
justify-content:center;
margin-top:10px;
}
}
@media (max-width: 540px) {
.header-toy .toy-logo img { max-height:40px; }
.header-toy .toy-btn { display:inline-flex; }
.toy-nav-mobile { font-size:0.95rem; }
}
.container { padding: 12px; }
body.mazu-site .container { width:100%; max-width:100%; padding:0; }
.block {
padding: 24px;
border-radius: 14px;
margin: 16px 0;
background: var(--surface-bg);
border: 1px solid color-mix(in srgb, var(--surface-bg) 78%, rgba(0,0,0,0.2));
color: var(--on-surface);
transition: background-color .2s ease, color .2s ease;
}
.block p, .block li, .block span, .block td, .block th, .block a {
color: inherit;
}
.block .muted {
color: color-mix(in srgb, var(--on-surface) 72%, rgba(255,255,255,0) 28%);
}
.block.dark-surface {
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface td,
.block.dark-surface span,
.block.dark-surface a {
color: #fff;
}
.block.dark-surface .muted {
color: rgba(255,255,255,0.78);
}
body.style-28g { overflow-x:hidden; }
body.style-28g main {
max-width: 100%;
padding: 0;
}
body.style-28g main .block {
margin: 0;
border-radius: 0;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: clamp(32px, 6vw, 80px);
display:flex;
flex-direction:column;
align-items:center;
gap: clamp(18px,3vw,32px);
}
body.style-28g main .block + .block {
margin-top: 0;
}
body.style-28g main .block > *:not(style):not(script) {
width: min(1080px, 100%);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px) {
body.style-28g main .block > *:not(style):not(script) {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
}
body.style-28g main .block:nth-of-type(odd) {
background: color-mix(in srgb, var(--color-primary) 85%, #000000 15%);
color: var(--on-primary);
}
body.style-28g main .block:nth-of-type(odd) h1,
body.style-28g main .block:nth-of-type(odd) h2,
body.style-28g main .block:nth-of-type(odd) h3,
body.style-28g main .block:nth-of-type(odd) p,
body.style-28g main .block:nth-of-type(odd) li {
color: inherit;
}
body.style-28g main .block:nth-of-type(even) {
background: color-mix(in srgb, var(--color-secondary) 85%, #ffffff 15%);
color: var(--on-secondary);
}
body.style-28g main .block:nth-of-type(even) .muted {
color: color-mix(in srgb, var(--on-secondary) 65%, rgba(0,0,0,0) 35%);
}
.grid { display:grid; gap:16px; }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Responsive wrapping for dense card grids to avoid over-compression */
@media (max-width: 1024px) { .grid.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 880px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.muted { color: color-mix(in srgb, var(--on-surface) 55%, rgba(255,255,255,0) 45%); }
/* Hero layout helper */
.hero .hero-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; align-items:center; }
@media (max-width: 720px) { .hero .hero-grid { grid-template-columns: 1fr; } }
.hero-banners { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.hero-banner { display:block; border-radius:16px; overflow:hidden; background: var(--color-secondary); box-shadow: 0 12px 26px rgba(0,0,0,0.14); transition: transform .18s ease, box-shadow .18s ease; }
.hero-banner img { width:100%; display:block; object-fit:cover; }
.hero-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,0.2); }
.hero-logo-wrapper { margin:24px auto 0; width:100%; max-width:512px; }
.hero-logo-wrapper img { width:100% !important; max-width:512px; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); display:block; margin:0 auto; }
/* Hero toy variant */
.hero.hero-toy {
position: relative;
padding: clamp(48px, 12vw, 120px) 16px;
border-radius: 28px;
background: linear-gradient(135deg, #f7a5c5, #ffd966);
background-size: cover;
background-position: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.hero-toy-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
backdrop-filter: blur(2px);
}
.hero-toy-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-toy-logo {
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.hero-toy-logo img {
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
object-fit: contain;
border-radius: 28px;
background: rgba(255,255,255,0.1);
padding: 12px;
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
.hero-toy-logo-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
border-radius: 28px;
background: rgba(0,0,0,0.35);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.hero-toy-cta-wrap {
width: 100%;
display:flex;
justify-content:center;
}
.hero-toy-body h1 {
font-size: clamp(1.8rem, 4.4vw, 3rem);
margin: 0;
color: #fff;
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.hero-toy-body p {
display: block;
margin: 12px auto;
padding: 14px 18px;
border-radius: 18px;
background: rgba(0,0,0,0.45);
max-width: 720px;
font-size: 1.05rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
.hero-toy-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 42px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #ff6cab 0%, #ff9a44 100%);
color: #111;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
transition: transform .2s ease, box-shadow .2s ease;
}
.hero-toy-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,0.4);
}
.hero-toy-photo img {
width: clamp(220px, 28vw, 320px);
height: clamp(220px, 28vw, 320px);
border-radius: 28px;
object-fit: cover;
background: rgba(0,0,0,0.1);
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
@media (max-width: 540px) {
.hero.hero-toy {
border-radius: 20px;
padding: 48px 12px;
}
.hero-toy-logo img,
.hero-toy-logo-text {
width: min(320px, 90vw);
height: min(320px, 90vw);
border-radius: 32px;
}
.hero-toy-body p {
width: 100%;
box-sizing: border-box;
font-size: 0.98rem;
}
.hero-toy-cta {
width: 100%;
max-width: 320px;
}
}
.style-28g .hero.hero-toy {
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
border-radius: 0;
}
.floating-corner-stack { position:fixed; right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:13rem; display:flex; flex-direction:column; gap:16px; align-items:center; z-index:1100; padding:0 4px; }
.floating-corner-stack.hidden { display:none !important; }
.floating-corner-banner { display:flex; flex-direction:column; align-items:center; width:100%; border-radius:16px; overflow:visible; background:transparent; transition: transform .2s ease; text-decoration:none; gap:8px; }
.floating-corner-banner img {
width:72px;
height:auto;
display:block;
margin:0 auto;
}
/* 右側動圖文字背景不透明 */
.floating-corner-banner .floating-caption {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
margin:0 auto;
padding:8px 12px;
border-radius:14px;
background: color-mix(in srgb, var(--color-primary) 90%, #000000 10%);
color: #ffffff;
text-align:center;
box-shadow:0 4px 18px rgba(0,0,0,0.2);
max-width:100%;
width:100%;
}
.floating-caption-line { display:block; font-size:0.78rem; font-weight:600; line-height:1.3; letter-spacing:0.2px; white-space:nowrap; }
@media (max-width: 720px) {
/* Restore Floating Banners but scaled and safe */
.floating-corner-stack {
display: flex !important;
top: auto;
bottom: 90px;
right: 4px;
left: auto;
transform: none;
flex-direction: column;
align-items: flex-end;
width: auto;
max-width: 120px;
gap: 8px;
z-index: 1050;
}
.floating-corner-banner {
width: 100%;
align-items: flex-end;
}
.floating-corner-banner img {
width: 48px;
height: auto;
}
/* Hide caption on mobile to prevent clutter/overflow */
.floating-corner-banner .floating-caption {
display: none;
}
.floating-close-banners {
top: auto;
bottom: 150px;
right: 6px;
}
.floating-close-bonus {
right: 8px;
bottom: 78px;
}
/* Fix CTA button layout */
.btn {
font-size: 0.9rem !important;
padding: 8px 16px !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
display: inline-block;
}
/* Ensure text wraps correctly */
.block p, .block li, .block span, h1, h2, h3 {
word-break: break-word;
overflow-wrap: anywhere;
}
}
.floating-corner-banner:hover { transform: translateY(-3px) scale(1.03); }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* More interactive hovers */
.block figure img { transition: transform .18s ease, box-shadow .18s ease; }
.block figure img:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
table tr:hover td { background: color-mix(in srgb, var(--btn-bg) 8%, #ffffff); }
footer { color: var(--on-footer); border-top: 1px solid rgba(255,255,255,0.15); background: var(--footer-bg); padding: 24px 0; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; text-align:center; }
.footer-logo { margin-bottom: 12px; display:flex; justify-content:center; }
.footer-logo img { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.footer-bonus-btn { display:flex; align-items:center; justify-content:center; gap:12px; background: var(--color-secondary); color: var(--color-primary); text-decoration:none; font-weight:800; font-size:26px; border-radius:18px; padding:18px 28px; margin:16px auto; width:min(100%, 720px); box-shadow: 0 18px 32px rgba(0,0,0,0.24); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; position:relative; box-sizing:border-box; }
/* Footer按鈕文字加亮 */
.footer-bonus-btn span {
flex:1;
text-align:center;
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.6);
font-size:26px;
font-weight:800;
letter-spacing:0.4px;
}
.footer-bonus-btn .fa-gift { color:#ffcc33; font-size:1.35em; animation: footer-gift-pulse 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes footer-gift-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.footer-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px rgba(0,0,0,0.28); }
.footer-bonus-btn.floating { position:fixed; left:0; right:0; bottom:0; width:100%; margin:0; padding:20px clamp(20px, 4vw, 36px); border-radius:0; box-shadow: 0 -6px 28px rgba(0,0,0,0.3); transform:none; z-index:1200; box-sizing:border-box; }
body.floating-bonus-active { padding-bottom:160px; transition: padding-bottom .2s ease; }
body.bonus-float-hidden .footer-bonus-btn.floating { display:none !important; }
body.bonus-float-hidden { padding-bottom:0 !important; }
.floating-close {
position:fixed;
width:28px;
height:28px;
border:1px solid rgba(255,255,255,0.6);
border-radius:50%;
background:rgba(0,0,0,0.72);
color:#fff;
font-size:18px;
line-height:1;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:1301;
box-shadow:0 6px 14px rgba(0,0,0,0.28);
}
.floating-close:hover { background:rgba(0,0,0,0.86); }
.floating-close-bonus { right:10px; bottom:120px; display:none; }
body.floating-bonus-active:not(.bonus-float-hidden) .floating-close-bonus { display:flex; }
.floating-close-banners { right:10px; top:calc(50% - 118px); }
.footer-copy, .footer-payments, .footer-social { margin:24px auto 0; text-align:center; max-width:960px; }
.footer-copy h2 { font-size:1.12rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.3px; }
.footer-copy p { margin:0; color: color-mix(in srgb, var(--on-footer) 85%, rgba(255,255,255,0.55)); line-height:1.6; }
.footer-payments h3, .footer-social h3 { font-size:1.02rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.4px; text-transform:uppercase; }
.footer-icon-row { display:flex; justify-content:center; align-items:center; gap:18px; padding:0; background:transparent; flex-wrap:wrap; }
.footer-icon-row a { display:flex; align-items:center; justify-content:center; color: inherit; text-decoration:none; min-width:88px; padding:16px; border-radius:18px; background: rgba(0,0,0,0.2); box-shadow: 0 12px 24px rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.1); transition: transform .2s ease, box-shadow .2s ease; }
.footer-icon-row a:hover, .footer-icon-row a:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0,0,0,0.18); background: rgba(0,0,0,0.3); }
.footer-icon-row.payments a { min-width:130px; padding:20px; }
/* Footer icon使用加亮的主色/輔色 */
.footer-icon-row i {
color: #ffffff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
transition: color .2s ease, transform .2s ease, filter .2s ease;
font-size:2.4rem;
}
.footer-icon-row.payments i { font-size:2.8rem; }
.footer-icon-row.social i { font-size:1.8rem; }
.footer-icon-row a:hover i, .footer-icon-row a:focus-visible i {
color:#ffae00;
filter: brightness(1.2);
transform: translateY(-3px);
}
.footer-icon-row a:focus-visible { outline:2px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.5)); outline-offset:4px; box-shadow: 0 14px 28px rgba(0,0,0,0.15); }
body.footer-secondary-light .footer-icon-row i { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a:hover i, body.footer-secondary-light .footer-icon-row a:focus-visible i { color: var(--color-primary); filter:brightness(0.8); }
body.footer-secondary-light .footer-bonus-btn .fa-gift { color: #ff9900; }
body.footer-secondary-light .footer-bonus-btn span { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.footer-secondary-light .footer-icon-row a:hover { background: #ffffff; }
body.footer-primary-bright .footer-bonus-btn .fa-gift { color: #ff9900; }
h1, h2, h3 { color: var(--heading-color); }
/* Card/list hover */
.card { border:1px solid color-mix(in srgb, var(--surface-bg) 80%, rgba(0,0,0,0.15)); border-radius:10px; padding:16px; background:var(--surface-bg); color:var(--on-surface); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); background: color-mix(in srgb, var(--surface-bg) 90%, rgba(255,255,255,0.2)); }
.list-emoji li { transition: background-color .12s ease, transform .12s ease; border-radius:8px; padding:6px 8px; }
.list-emoji li:hover { background: color-mix(in srgb, var(--color-primary) 20%, rgba(255,255,255,0.8)); transform: translateX(2px); }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
/* Card content safety */
.card h3, .card p { word-wrap: break-word; overflow-wrap: anywhere; }
body.mazu-site .block p { line-height:1.65; }
/* Override for full image display (contain mode) - Global */
main .block img,
main .card img,
.hero-toy-photo img,
main .block figure img,
main .card picture img,
main .card .figure-wrapper img {
aspect-ratio: auto !important;
object-fit: contain !important;
height: auto !important;
max-height: 85vh;
width: auto !important;
max-width: 100%;
position: relative !important;
border-radius: 12px !important;
}
/* Reset containers */
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
height: auto !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
/* Remove padding hacks */
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content: none !important;
padding-top: 0 !important;
display: none !important;
}
/* Fixed button visibility on dark backgrounds (odd blocks) */
body.style-28g main .block:nth-of-type(odd) .btn {
border-color: currentColor;
color: inherit;
}
/* Ensure dark-surface blocks always have white text regardless of position */
.block.dark-surface,
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface span,
.block.dark-surface div {
color: #ffffff !important;
}
/* 修正 Home Numbers 在有背景圖時必須是白色 */
.home-numbers-block.with-bg .home-numbers-inner,
.home-numbers-block.with-bg .home-numbers-title,
.home-numbers-block.with-bg .home-number-value,
.home-numbers-block.with-bg .home-number-label {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
/* Neon Style - 螢光風格 */
body.style-neon main .block:not(.hero) {
border: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
box-shadow:
0 0 8px var(--color-primary),
0 0 20px color-mix(in srgb, var(--color-primary) 60%, transparent),
inset 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
margin-bottom: 24px; /* 增加間距避免重疊 */
}
body.style-neon main .block .figure img,
body.style-neon main .block figure img {
border: 4px solid transparent !important; /* 透明間距層 */
border-radius: 16px !important;
max-width: 100% !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, #ffffff), /* 更亮的實線外框 */
0 0 10px var(--color-primary), /* 緊密光暈 */
0 0 30px color-mix(in srgb, var(--color-primary) 80%, transparent) !important; /* 擴散光暈 */
}
/* 針對 full-width block (style-28g) 調整 border */
body.style-28g.style-neon main .block {
width: 100% !important; /* 確保邊框在視窗內 */
box-sizing: border-box !important; /* 確保 padding 和 border 不會撐開寬度 */
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 16px !important;
/* 確保邊框顏色一致 */
border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
border-right: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
}
/* Hero Left-Right Mobile Layout Adjustment */
@media (max-width: 720px) {
/* Interleave Image between H1 and Content */
.hero-left-right .grid .text,
.hero-left-right .grid .figure {
display: contents;
}
.hero-left-right .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-left-right .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-left-right .grid .text > *:not(h1) { order: 3; }
.hero-left-right .grid { text-align: center !important; justify-items: center; }
}
/* Fix Standard 28g Mobile Overflow (Containment) */
@media (max-width: 720px) {
body.style-28g main .block {
width: 100% !important;
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.style-28g .hero.hero-toy {
width: 100% !important;
left: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* Boxed Style */
body.style-boxed main {
max-width: 1200px;
margin: 40px auto;
background: var(--surface-bg);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
padding: 40px;
}
body.style-boxed main .block {
background: transparent;
border: none;
box-shadow: none;
padding: 24px 0;
margin: 24px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.style-boxed main .block:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Hero Split Diagonal */
.hero-split-diagonal {
position: relative;
overflow: hidden;
border: none !important;
background: transparent !important;
padding: 60px 24px;
}
.hero-split-diagonal::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(115deg, var(--surface-bg) 55%, var(--color-primary) 55.1%, var(--color-primary) 100%);
z-index: 1;
}
.hero-split-diagonal .content-wrapper {
position: relative;
z-index: 2;
}
/* Ensure split-diagonal text stays readable on varied backgrounds */
.hero-split-diagonal .text,
.hero-split-diagonal .text h1,
.hero-split-diagonal .text h2,
.hero-split-diagonal .text h3,
.hero-split-diagonal .text p,
.hero-split-diagonal .text li,
.hero-split-diagonal .text span {
color: var(--on-surface);
}
.hero-split-diagonal .text .muted {
color: color-mix(in srgb, var(--on-surface) 70%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.hero-split-diagonal {
padding: 32px 16px;
}
.hero-split-diagonal::before {
background: var(--surface-bg); /* Reset diagonal on mobile */
}
.hero-split-diagonal .grid .text,
.hero-split-diagonal .grid .figure {
display: contents;
}
.hero-split-diagonal .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-split-diagonal .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-split-diagonal .grid .text > *:not(h1) { order: 3; }
.hero-split-diagonal .grid { text-align: center !important; justify-items: center; }
}
/* Mobile Header Bottom Sticky Style */
@media (max-width: 720px) {
body.mobile-header-bottom-sticky .actions {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: var(--header-bg) !important;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 12px !important;
display: flex !important;
justify-content: center;
gap: 12px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
z-index: 9999 !important;
padding-bottom: max(12px, env(safe-area-inset-bottom));
box-sizing: border-box;
visibility: visible !important;
opacity: 1 !important;
}
body.mobile-header-bottom-sticky .actions .btn {
flex: 1;
text-align: center;
padding: 12px 0;
margin: 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile-header-bottom-sticky main {
padding-bottom: 90px !important;
}
/* Footer is outside main; add safe space so last icons aren't covered */
body.mobile-header-bottom-sticky .site-footer {
padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
body.mobile-header-bottom-sticky .floating-corner-stack {
bottom: 90px !important;
}
/* Hide conflicting floating bonus button when sticky header is active */
body.mobile-header-bottom-sticky .footer-bonus-btn.floating,
body.mobile-header-bottom-sticky .footer-bonus-btn {
display: none !important;
}
body.mobile-header-bottom-sticky .burger {
display: inline-flex !important;
margin-left: auto !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1101 !important;
}
/* Top CTA: Logo + CTA + Burger (mobile) */
body.mobile-header-bottom-sticky .header-inner { position: relative; }
body.mobile-header-bottom-sticky .top-cta {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 10px 16px;
min-height: 52px; /* bigger than logo(42) & burger(36) */
border-radius: 14px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
white-space: nowrap;
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
/* Red text + contrasting bg (avoid blending into header bg) */
color: #ff2a2a;
background: color-mix(in srgb, #ffffff 92%, var(--color-primary) 8%);
border: 2px solid color-mix(in srgb, #ff2a2a 72%, rgba(0,0,0,0));
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
z-index: 1102;
}
/* Subtle sheen sweep (no blinking) */
body.mobile-header-bottom-sticky .top-cta::before {
content: "";
position: absolute;
top: -30%;
left: -70%;
width: 60%;
height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
transform: rotate(20deg);
opacity: 0.65;
animation: topCtaSheen 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes topCtaSheen {
0% { left: -70%; }
55% { left: 120%; }
100% { left: 120%; }
}
/* Gentle bob (no flashing) */
body.mobile-header-bottom-sticky .top-cta {
animation: topCtaBob 3.2s ease-in-out infinite;
}
@keyframes topCtaBob {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -50%) translateY(-1px); }
}
}
/* Parallax & Grid & Animation */
body.parallax-bg {
background-attachment: fixed !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 720px) {
body.parallax-bg { background-attachment: scroll !important; }
}
@media (min-width: 721px) {
.grid.grid-60-40 { grid-template-columns: 1.5fr 1fr !important; }
.grid.grid-40-60 { grid-template-columns: 1fr 1.5fr !important; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.cards-block .cards-title {
color: var(--on-surface);
}
.cards-block .cards-desc {
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
opacity: 0.8;
}
/* 響應式調整：手機版保持正方形不裁切 */
@media (max-width: 720px) {
.cards-grid {
grid-template-columns: 1fr !important;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.cards-item img {
max-width: 100% !important;
aspect-ratio: 1/1;
object-fit: contain;
}
}
.qa-block,
.qa-block h2,
.qa-block summary,
.qa-block summary strong,
.qa-block p {
color: var(--on-surface);
}
.qa-block summary {
cursor: pointer;
}
.qa-block p {
opacity: 0.88;
}
.crosslink-cards .crosslink-grid {
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crosslink-card {
display:flex;
flex-direction:column;
gap:12px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 12%, rgba(255,255,255,0.04));
border:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 30%, rgba(0,0,0,0.1));
border-radius:14px;
text-decoration:none;
color: inherit;
overflow:hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.crosslink-card:hover {
transform: translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.14);
border-color: color-mix(in srgb, var(--surface-bg, #224e60) 10%, #ffffff 40%);
}
.crosslink-card figure {
margin:0;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.2));
background: color-mix(in srgb, #000 5%, rgba(255,255,255,0.08));
display:flex;
align-items:center;
justify-content:center;
}
.crosslink-card img {
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}
.crosslink-icon {
width:100%;
aspect-ratio: 2/1;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap: 6px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 5%, rgba(255,255,255,0.02));
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.1));
}
.crosslink-icon-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 78px;
padding: 0 14px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--on-primary, #fff);
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 56%, #ffffff 44%) 100%);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.crosslink-icon-hint {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-surface, #fff) 62%, rgba(255,255,255,0));
}
.crosslink-icon--mobile .crosslink-icon-mark,
.crosslink-icon--sports .crosslink-icon-mark,
.crosslink-icon--offer .crosslink-icon-mark {
min-width: 92px;
}
.crosslink-icon--stage .crosslink-icon-mark,
.crosslink-icon--default .crosslink-icon-mark {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 66%, #ffffff 34%) 100%);
}
.crosslink-body {
padding:0 14px 14px;
}
.crosslink-body h3 {
margin:0 0 8px;
font-size:1.05rem;
}
.crosslink-body p {
margin:0;
font-size:0.95rem;
line-height:1.5;
color: color-mix(in srgb, var(--on-surface, #fff) 80%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.crosslink-cards .crosslink-grid {
grid-template-columns:1fr;
}
}
.seo-long-block { line-height: 1.75; }
.seo-long-block h2 { line-height: 1.35; margin: 1.1rem 0 0.7rem; }
.seo-long-block p { margin: 0 0 1rem; line-height: 1.75; white-space: normal; word-break: normal; overflow-wrap: break-word; }
.seo-long-block a,
.seo-long-block strong {
display: inline !important;
line-height: inherit;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
vertical-align: baseline;
}
.seo-long-block a {
color: var(--seo-link-color, #56d4ff);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
font-weight: 700;
}
.seo-long-block a:hover {
color: color-mix(in srgb, var(--seo-link-color, #56d4ff) 80%, #ffffff 20%);
}
.seo-long-block .seo-long-rich { color: var(--on-surface); line-height: 1.75; margin-bottom: 1rem; }
.ribbon-shell {
max-width: 1180px;
margin: 0 auto;
padding: 30px 20px 60px;
}
.ribbon-stack {
display: grid;
gap: 22px;
}
.ribbon-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ribbon-tag {
position: sticky;
top: 92px;
align-self: start;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 68%, #ffffff 32%) 100%);
color: var(--on-primary, #fff);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 14px 26px rgba(16, 33, 49, 0.16);
}
.ribbon-panel {
position: relative;
overflow: hidden;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, rgba(0,0,0,0.08));
box-shadow: 0 18px 38px rgba(16, 33, 49, 0.08);
}
.ribbon-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
}
.ribbon-panel > .block,
.ribbon-panel > section.block,
.ribbon-panel > .media-tabs {
margin: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ribbon-panel--seo {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,244,238,0.94) 100%);
}
@media (max-width: 920px) {
.ribbon-row {
grid-template-columns: 1fr;
}
.ribbon-tag {
position: static;
width: fit-content;
}
}
@media (max-width: 720px) {
.ribbon-shell {
padding-inline: 16px;
}
.ribbon-panel {
border-radius: 22px;
}
}
/* Source: promocoes.html */
:root { --color-primary: #2fc66b; --color-secondary: #f3fbff; --color-muted: #def7ea; --on-primary: #ffffff; --on-secondary: #102a43; --btn-bg: #2fc66b; --btn-fg: #ffffff; --footer-bg: #2fc66b; --header-bg: #2fc66b; --on-header: #ffffff; --on-footer: #ffffff; --heading-color: #0f8a4a; --surface-bg: #e3f7ff; --on-surface: #0c2f3d; --toy-header-bg: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); --toy-btn-bg: #2fc66b; --toy-btn-color: #ffffff; --toy-nav-color: #ffffff; --color-accent-sky: #44baf5; --brand-gradient: linear-gradient(135deg, #2fc66b 0%, #44baf5 100%); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial, sans-serif; margin:0; color: var(--on-secondary); background: var(--color-secondary); font-size:14px; }
main { max-width: 1080px; margin: auto; padding: 16px; }
/* Header layout */
body > header { background: var(--brand-gradient); color: var(--on-header); position: sticky; top: 0; z-index: 1000; padding: 16px 0; }
.header-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display:flex; align-items:center; gap:16px; min-height:64px; flex-wrap:nowrap; }
header img { border-radius:8px; }
header img.logo-square { width:52px; height:auto; }
header img.logo-landscape { width:auto; height:48px; max-width: 180px; object-fit: contain; }
.brand { display:flex; align-items:center; gap:12px; }
.nav-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; }
.nav-center a { text-decoration:none; font-weight:600; color: var(--on-header); padding:4px 8px; border-radius:999px; transition: background-color .15s ease, color .15s ease; white-space:nowrap; font-size:0.88rem; }
.kw-highlight { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.nav-center a.nav-child { font-size:0.92em; opacity:.85; padding-left:12px; position:relative; }
.nav-center a.nav-child::before { content:"•"; font-size:0.75em; margin-right:4px; vertical-align:middle; }
.nav-center a:hover { background: color-mix(in srgb, var(--on-header) 18%, rgba(255,255,255,0.2)); color: var(--on-header); }
@media (prefers-color-scheme: dark) {
.nav-center a { color:#fff; }
.nav-center a:hover { background: color-mix(in srgb, #ffffff 22%, rgba(255,255,255,0.05)); color:#fff; }
}
.actions { display:flex; align-items:center; gap:10px; justify-content:flex-end; flex:0 0 auto; }
.menu.responsive { display:none; }
/* Buttons */
.btn {margin-top: 1.5rem; display: inline-block; padding: 10px 16px; border-radius: 999px; text-decoration:none; border:1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-weight:700; transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease, color .12s ease; }
/* Remove margin-top for buttons in header */
header .btn { margin-top: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); opacity:.98; background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login:hover { background: color-mix(in srgb, #ffffff 82%, var(--color-secondary) 18%); color: var(--color-secondary); }
.btn-signup:hover { background: color-mix(in srgb, #ffffff 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-login { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); font-weight:700; }
.btn-signup { background: transparent; color: var(--color-primary); font-weight:700; }
/* Ensure login stays visible on header background */
header .btn-login { color: var(--on-header); border-color: var(--on-header); }
header .btn-login:hover { background: color-mix(in srgb, var(--on-header) 20%, transparent); color: var(--on-header); }
/* Ensure signup stays visible on primary header background */
header .btn-signup { background: var(--on-primary); color: var(--color-primary); border-color: var(--on-primary); }
header .btn-signup:hover { background: color-mix(in srgb, var(--on-primary) 85%, var(--color-primary) 15%); color: var(--color-primary); }
.btn-buy { background: transparent; color:#111; border-color:#111; font-weight:700; }
/* Mobile-only top CTA (hidden on desktop) */
.top-cta { display:none; }
/* Burger */
.burger { display:none; border:none; width:44px; height:36px; padding:6px; border-radius:10px; background: color-mix(in srgb, var(--color-primary) 20%, white); color: var(--on-primary); align-items:center; justify-content:center; }
.burger i { font-size:18px; }
/* Mobile */
@media (max-width: 720px) {
header img.logo-landscape { max-width: 100px; height: 40px; }
body { font-size:13px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0 12px; gap:12px; }
.brand { flex:0 0 auto; }
.nav-center { display:none; }
.actions { flex:0 0 auto; justify-content:center; gap:10px; }
.actions .btn { padding:8px 14px; font-size:13px; line-height:1.2; margin-top:0; }
.burger { display:inline-flex; justify-self:end; }
.menu.responsive { display:none; position:absolute; top:64px; left:0; right:0; background: var(--color-primary); color: var(--on-primary); border-top:1px solid rgba(255,255,255,0.15); padding:12px; flex-direction:column; gap:8px; }
.menu.responsive.open { display:flex; }
header img { width:42px; height:42px; }
main .block img,
main .card img {
width:100%;
display:block;
object-fit:cover;
border-radius:16px;
aspect-ratio:1 / 1;
}
main .block.hero img,
.hero-banner img,
.hero-banner {
aspect-ratio:auto;
border-radius:18px;
}
.hero-logo-wrapper { width:100%; max-width: calc(100vw - 32px); margin:24px auto 0; }
.hero-logo-wrapper img { width:100%; height:100%; max-width:100%; aspect-ratio:1/1; }
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
position:relative;
width:100%;
max-width: calc(100vw - 32px);
margin:0 auto 16px;
}
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content:"";
display:block;
padding-top:100%;
}
main .block:not(.hero) figure img,
main .card picture img,
main .card .figure-wrapper img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;
}
.hero-banner { border-radius:14px; }
.hero-banners { gap:10px; margin-bottom:14px; }
.floating-corner-stack { right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:40vw; }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* Ensure media right-left blocks stack with text above image on mobile */
.swap-mobile .text { order: 1; }
.swap-mobile .figure { order: 2; }
/* Mobile fixed footer CTA: prevent overflow on narrow screens */
.footer-bonus-btn {
font-size:18px;
padding:14px 14px;
width:100%;
border-radius:16px;
box-sizing:border-box;
flex-wrap:wrap;
row-gap:8px;
}
.footer-bonus-btn span {
font-size:18px;
flex:1 1 100%;
min-width:0;
white-space:normal;
word-break:break-word;
line-height:1.2;
}
.footer-bonus-btn .fa-gift { font-size:1.15em; }
.footer-bonus-btn.floating {
padding-top:14px;
padding-bottom:max(14px, env(safe-area-inset-bottom));
padding-left:max(14px, env(safe-area-inset-left));
padding-right:max(14px, env(safe-area-inset-right));
}
body.floating-bonus-active { padding-bottom:150px; }
.footer-icon-row { gap:12px; padding:0; }
.footer-icon-row.payments i { font-size:2.4rem; }
.footer-icon-row.social i { font-size:1.5rem; }
.footer-copy h2 { font-size:1rem; }
}
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a.nav-child { padding-left: 24px; font-size: 0.95em; opacity: .9; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
.header-toy { border-bottom: 1px solid rgba(0,0,0,0.08); background: var(--toy-header-bg); padding: 18px clamp(12px,4vw,32px) 10px; }
.header-toy .toy-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-toy .toy-top.two-row {
position:relative;
justify-content:center;
gap:0;
padding:0 150px 0 60px;
min-height:64px;
}
.header-toy .toy-logo-center {
text-align:center;
flex:1;
display:flex;
justify-content:center;
}
.header-toy .toy-logo-center img { max-height:58px; width:auto; display:inline-block; }
.header-toy .toy-actions.align-right {
position:absolute;
right:60px;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
}
.header-toy .toy-logo img { max-height:48px; width:auto; display:block; }
.header-toy .toy-logo-text { font-size:1.4rem; font-weight:700; color:#111; letter-spacing:0.08em; }
.header-toy .toy-actions { display:flex; align-items:center; gap:12px; }
.header-toy .toy-btn { padding:10px 22px; border-radius:999px; border:1px solid var(--toy-btn-bg); background:var(--toy-btn-bg); color:var(--toy-btn-color); font-weight:600; text-decoration:none; transition:.15s ease; }
.header-toy .toy-btn:hover { opacity:.85; }
.header-toy .toy-btn.toy-auth { background:#fff; color:#111; border-color:#ddd; }
.header-toy .toy-btn.toy-auth.secondary { background:transparent; color:#111; border-color:#111; }
.header-toy .toy-burger { display:none; border:none; background:none; font-size:1.4rem; padding:6px; cursor:pointer; }
.toy-nav { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px clamp(8px,4vw,32px) 14px; }
.toy-nav .nav-link { text-decoration:none; color: var(--toy-nav-color); font-weight:600; position:relative; padding-bottom:6px; }
.toy-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#000; }
.toy-nav .nav-link.nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile { display:none; flex-direction:column; gap:10px; padding:12px clamp(8px,4vw,24px); border-top:1px solid rgba(0,0,0,0.08); }
.toy-nav-mobile a { text-decoration:none; color: var(--toy-nav-color); font-weight:600; }
.toy-nav-mobile .nav-child { font-size:0.92em; opacity:.8; padding-left:18px; }
.toy-nav-mobile.open { display:flex; }
@media (max-width: 920px) {
.toy-nav { display:none; }
.header-toy .toy-burger { display:inline-flex; }
.header-toy .toy-btn { font-size:0.9rem; padding:8px 18px; }
}
.toy-nav-divider {
width:100%;
height:1px;
background:rgba(0,0,0,0.12);
margin:12px 0 8px;
}
@media (max-width: 720px) {
.header-toy .toy-top.two-row { padding-right:0; flex-direction:column; }
.header-toy .toy-actions.align-right {
position:static;
transform:none;
width:100%;
justify-content:center;
margin-top:10px;
}
}
@media (max-width: 540px) {
.header-toy .toy-logo img { max-height:40px; }
.header-toy .toy-btn { display:inline-flex; }
.toy-nav-mobile { font-size:0.95rem; }
}
.container { padding: 12px; }
body.mazu-site .container { width:100%; max-width:100%; padding:0; }
.block {
padding: 24px;
border-radius: 14px;
margin: 16px 0;
background: var(--surface-bg);
border: 1px solid color-mix(in srgb, var(--surface-bg) 78%, rgba(0,0,0,0.2));
color: var(--on-surface);
transition: background-color .2s ease, color .2s ease;
}
.block p, .block li, .block span, .block td, .block th, .block a {
color: inherit;
}
.block .muted {
color: color-mix(in srgb, var(--on-surface) 72%, rgba(255,255,255,0) 28%);
}
.block.dark-surface {
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface td,
.block.dark-surface span,
.block.dark-surface a {
color: #fff;
}
.block.dark-surface .muted {
color: rgba(255,255,255,0.78);
}
body.style-28g { overflow-x:hidden; }
body.style-28g main {
max-width: 100%;
padding: 0;
}
body.style-28g main .block {
margin: 0;
border-radius: 0;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: clamp(32px, 6vw, 80px);
display:flex;
flex-direction:column;
align-items:center;
gap: clamp(18px,3vw,32px);
}
body.style-28g main .block + .block {
margin-top: 0;
}
body.style-28g main .block > *:not(style):not(script) {
width: min(1080px, 100%);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px) {
body.style-28g main .block > *:not(style):not(script) {
width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
}
body.style-28g main .block:nth-of-type(odd) {
background: color-mix(in srgb, var(--color-primary) 85%, #000000 15%);
color: var(--on-primary);
}
body.style-28g main .block:nth-of-type(odd) h1,
body.style-28g main .block:nth-of-type(odd) h2,
body.style-28g main .block:nth-of-type(odd) h3,
body.style-28g main .block:nth-of-type(odd) p,
body.style-28g main .block:nth-of-type(odd) li {
color: inherit;
}
body.style-28g main .block:nth-of-type(even) {
background: color-mix(in srgb, var(--color-secondary) 85%, #ffffff 15%);
color: var(--on-secondary);
}
body.style-28g main .block:nth-of-type(even) .muted {
color: color-mix(in srgb, var(--on-secondary) 65%, rgba(0,0,0,0) 35%);
}
.grid { display:grid; gap:16px; }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Responsive wrapping for dense card grids to avoid over-compression */
@media (max-width: 1024px) { .grid.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 880px) { .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.muted { color: color-mix(in srgb, var(--on-surface) 55%, rgba(255,255,255,0) 45%); }
/* Hero layout helper */
.hero .hero-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px; align-items:center; }
@media (max-width: 720px) { .hero .hero-grid { grid-template-columns: 1fr; } }
.hero-banners { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.hero-banner { display:block; border-radius:16px; overflow:hidden; background: var(--color-secondary); box-shadow: 0 12px 26px rgba(0,0,0,0.14); transition: transform .18s ease, box-shadow .18s ease; }
.hero-banner img { width:100%; display:block; object-fit:cover; }
.hero-banner:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,0.2); }
.hero-logo-wrapper { margin:24px auto 0; width:100%; max-width:512px; }
.hero-logo-wrapper img { width:100% !important; max-width:512px; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow: 0 10px 28px rgba(0,0,0,0.16); display:block; margin:0 auto; }
/* Hero toy variant */
.hero.hero-toy {
position: relative;
padding: clamp(48px, 12vw, 120px) 16px;
border-radius: 28px;
background: linear-gradient(135deg, #f7a5c5, #ffd966);
background-size: cover;
background-position: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.hero-toy-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
backdrop-filter: blur(2px);
}
.hero-toy-inner {
position: relative;
z-index: 1;
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.hero-toy-logo {
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
}
.hero-toy-logo img {
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
object-fit: contain;
border-radius: 28px;
background: rgba(255,255,255,0.1);
padding: 12px;
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
.hero-toy-logo-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(180px, 24vw, 260px);
height: clamp(180px, 24vw, 260px);
border-radius: 28px;
background: rgba(0,0,0,0.35);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.hero-toy-cta-wrap {
width: 100%;
display:flex;
justify-content:center;
}
.hero-toy-body h1 {
font-size: clamp(1.8rem, 4.4vw, 3rem);
margin: 0;
color: #fff;
text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.hero-toy-body p {
display: block;
margin: 12px auto;
padding: 14px 18px;
border-radius: 18px;
background: rgba(0,0,0,0.45);
max-width: 720px;
font-size: 1.05rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
.hero-toy-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 42px;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #ff6cab 0%, #ff9a44 100%);
color: #111;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
transition: transform .2s ease, box-shadow .2s ease;
}
.hero-toy-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,0.4);
}
.hero-toy-photo img {
width: clamp(220px, 28vw, 320px);
height: clamp(220px, 28vw, 320px);
border-radius: 28px;
object-fit: cover;
background: rgba(0,0,0,0.1);
box-shadow: 0 18px 32px rgba(0,0,0,0.25);
}
@media (max-width: 540px) {
.hero.hero-toy {
border-radius: 20px;
padding: 48px 12px;
}
.hero-toy-logo img,
.hero-toy-logo-text {
width: min(320px, 90vw);
height: min(320px, 90vw);
border-radius: 32px;
}
.hero-toy-body p {
width: 100%;
box-sizing: border-box;
font-size: 0.98rem;
}
.hero-toy-cta {
width: 100%;
max-width: 320px;
}
}
.style-28g .hero.hero-toy {
position: relative;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
border-radius: 0;
}
.floating-corner-stack { position:fixed; right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:auto; max-width:13rem; display:flex; flex-direction:column; gap:16px; align-items:center; z-index:1100; padding:0 4px; }
.floating-corner-stack.hidden { display:none !important; }
.floating-corner-banner { display:flex; flex-direction:column; align-items:center; width:100%; border-radius:16px; overflow:visible; background:transparent; transition: transform .2s ease; text-decoration:none; gap:8px; }
.floating-corner-banner img {
width:72px;
height:auto;
display:block;
margin:0 auto;
}
/* 右側動圖文字背景不透明 */
.floating-corner-banner .floating-caption {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
margin:0 auto;
padding:8px 12px;
border-radius:14px;
background: color-mix(in srgb, var(--color-primary) 90%, #000000 10%);
color: #ffffff;
text-align:center;
box-shadow:0 4px 18px rgba(0,0,0,0.2);
max-width:100%;
width:100%;
}
.floating-caption-line { display:block; font-size:0.78rem; font-weight:600; line-height:1.3; letter-spacing:0.2px; white-space:nowrap; }
@media (max-width: 720px) {
/* Restore Floating Banners but scaled and safe */
.floating-corner-stack {
display: flex !important;
top: auto;
bottom: 90px;
right: 4px;
left: auto;
transform: none;
flex-direction: column;
align-items: flex-end;
width: auto;
max-width: 120px;
gap: 8px;
z-index: 1050;
}
.floating-corner-banner {
width: 100%;
align-items: flex-end;
}
.floating-corner-banner img {
width: 48px;
height: auto;
}
/* Hide caption on mobile to prevent clutter/overflow */
.floating-corner-banner .floating-caption {
display: none;
}
.floating-close-banners {
top: auto;
bottom: 150px;
right: 6px;
}
.floating-close-bonus {
right: 8px;
bottom: 78px;
}
/* Fix CTA button layout */
.btn {
font-size: 0.9rem !important;
padding: 8px 16px !important;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
display: inline-block;
}
/* Ensure text wraps correctly */
.block p, .block li, .block span, h1, h2, h3 {
word-break: break-word;
overflow-wrap: anywhere;
}
}
.floating-corner-banner:hover { transform: translateY(-3px) scale(1.03); }
body.floating-bonus-active .floating-corner-stack { top:50%; }
/* More interactive hovers */
.block figure img { transition: transform .18s ease, box-shadow .18s ease; }
.block figure img:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
table tr:hover td { background: color-mix(in srgb, var(--btn-bg) 8%, #ffffff); }
footer { color: var(--on-footer); border-top: 1px solid rgba(255,255,255,0.15); background: var(--footer-bg); padding: 24px 0; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; text-align:center; }
.footer-logo { margin-bottom: 12px; display:flex; justify-content:center; }
.footer-logo img { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.footer-bonus-btn { display:flex; align-items:center; justify-content:center; gap:12px; background: var(--color-secondary); color: var(--color-primary); text-decoration:none; font-weight:800; font-size:26px; border-radius:18px; padding:18px 28px; margin:16px auto; width:min(100%, 720px); box-shadow: 0 18px 32px rgba(0,0,0,0.24); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; position:relative; box-sizing:border-box; }
/* Footer按鈕文字加亮 */
.footer-bonus-btn span {
flex:1;
text-align:center;
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.6);
font-size:26px;
font-weight:800;
letter-spacing:0.4px;
}
.footer-bonus-btn .fa-gift { color:#ffcc33; font-size:1.35em; animation: footer-gift-pulse 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes footer-gift-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.footer-bonus-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px rgba(0,0,0,0.28); }
.footer-bonus-btn.floating { position:fixed; left:0; right:0; bottom:0; width:100%; margin:0; padding:20px clamp(20px, 4vw, 36px); border-radius:0; box-shadow: 0 -6px 28px rgba(0,0,0,0.3); transform:none; z-index:1200; box-sizing:border-box; }
body.floating-bonus-active { padding-bottom:160px; transition: padding-bottom .2s ease; }
body.bonus-float-hidden .footer-bonus-btn.floating { display:none !important; }
body.bonus-float-hidden { padding-bottom:0 !important; }
.floating-close {
position:fixed;
width:28px;
height:28px;
border:1px solid rgba(255,255,255,0.6);
border-radius:50%;
background:rgba(0,0,0,0.72);
color:#fff;
font-size:18px;
line-height:1;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:1301;
box-shadow:0 6px 14px rgba(0,0,0,0.28);
}
.floating-close:hover { background:rgba(0,0,0,0.86); }
.floating-close-bonus { right:10px; bottom:120px; display:none; }
body.floating-bonus-active:not(.bonus-float-hidden) .floating-close-bonus { display:flex; }
.floating-close-banners { right:10px; top:calc(50% - 118px); }
.footer-copy, .footer-payments, .footer-social { margin:24px auto 0; text-align:center; max-width:960px; }
.footer-copy h2 { font-size:1.12rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.3px; }
.footer-copy p { margin:0; color: color-mix(in srgb, var(--on-footer) 85%, rgba(255,255,255,0.55)); line-height:1.6; }
.footer-payments h3, .footer-social h3 { font-size:1.02rem; margin-bottom:12px; color: var(--on-footer); letter-spacing:0.4px; text-transform:uppercase; }
.footer-icon-row { display:flex; justify-content:center; align-items:center; gap:18px; padding:0; background:transparent; flex-wrap:wrap; }
.footer-icon-row a { display:flex; align-items:center; justify-content:center; color: inherit; text-decoration:none; min-width:88px; padding:16px; border-radius:18px; background: rgba(0,0,0,0.2); box-shadow: 0 12px 24px rgba(0,0,0,0.12); border:1px solid rgba(255,255,255,0.1); transition: transform .2s ease, box-shadow .2s ease; }
.footer-icon-row a:hover, .footer-icon-row a:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0,0,0,0.18); background: rgba(0,0,0,0.3); }
.footer-icon-row.payments a { min-width:130px; padding:20px; }
/* Footer icon使用加亮的主色/輔色 */
.footer-icon-row i {
color: #ffffff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
transition: color .2s ease, transform .2s ease, filter .2s ease;
font-size:2.4rem;
}
.footer-icon-row.payments i { font-size:2.8rem; }
.footer-icon-row.social i { font-size:1.8rem; }
.footer-icon-row a:hover i, .footer-icon-row a:focus-visible i {
color:#ffae00;
filter: brightness(1.2);
transform: translateY(-3px);
}
.footer-icon-row a:focus-visible { outline:2px solid color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,0.5)); outline-offset:4px; box-shadow: 0 14px 28px rgba(0,0,0,0.15); }
body.footer-secondary-light .footer-icon-row i { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a:hover i, body.footer-secondary-light .footer-icon-row a:focus-visible i { color: var(--color-primary); filter:brightness(0.8); }
body.footer-secondary-light .footer-bonus-btn .fa-gift { color: #ff9900; }
body.footer-secondary-light .footer-bonus-btn span { color: var(--color-primary); text-shadow:none; }
body.footer-secondary-light .footer-icon-row a { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.08); }
body.footer-secondary-light .footer-icon-row a:hover { background: #ffffff; }
body.footer-primary-bright .footer-bonus-btn .fa-gift { color: #ff9900; }
h1, h2, h3 { color: var(--heading-color); }
/* Card/list hover */
.card { border:1px solid color-mix(in srgb, var(--surface-bg) 80%, rgba(0,0,0,0.15)); border-radius:10px; padding:16px; background:var(--surface-bg); color:var(--on-surface); transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); background: color-mix(in srgb, var(--surface-bg) 90%, rgba(255,255,255,0.2)); }
.list-emoji li { transition: background-color .12s ease, transform .12s ease; border-radius:8px; padding:6px 8px; }
.list-emoji li:hover { background: color-mix(in srgb, var(--color-primary) 20%, rgba(255,255,255,0.8)); transform: translateX(2px); }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }
/* Mobile menu links: no underline, adaptive color, hover feedback */
.menu.responsive a { text-decoration: none !important; color: var(--on-primary); padding: 10px 8px; border-radius: 8px; display:block; transition: background-color .12s ease, opacity .12s ease; }
.menu.responsive a:hover { background: color-mix(in srgb, var(--on-primary) 12%, var(--color-primary)); opacity:.96; }
/* Card content safety */
.card h3, .card p { word-wrap: break-word; overflow-wrap: anywhere; }
body.mazu-site .block p { line-height:1.65; }
/* Override for full image display (contain mode) - Global */
main .block img,
main .card img,
.hero-toy-photo img,
main .block figure img,
main .card picture img,
main .card .figure-wrapper img {
aspect-ratio: auto !important;
object-fit: contain !important;
height: auto !important;
max-height: 85vh;
width: auto !important;
max-width: 100%;
position: relative !important;
border-radius: 12px !important;
}
/* Reset containers */
main .block:not(.hero) figure,
main .card picture,
main .card .figure-wrapper {
height: auto !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
/* Remove padding hacks */
main .block:not(.hero) figure::before,
main .card picture::before,
main .card .figure-wrapper::before {
content: none !important;
padding-top: 0 !important;
display: none !important;
}
/* Fixed button visibility on dark backgrounds (odd blocks) */
body.style-28g main .block:nth-of-type(odd) .btn {
border-color: currentColor;
color: inherit;
}
/* Ensure dark-surface blocks always have white text regardless of position */
.block.dark-surface,
.block.dark-surface h1,
.block.dark-surface h2,
.block.dark-surface h3,
.block.dark-surface p,
.block.dark-surface li,
.block.dark-surface span,
.block.dark-surface div {
color: #ffffff !important;
}
/* 修正 Home Numbers 在有背景圖時必須是白色 */
.home-numbers-block.with-bg .home-numbers-inner,
.home-numbers-block.with-bg .home-numbers-title,
.home-numbers-block.with-bg .home-number-value,
.home-numbers-block.with-bg .home-number-label {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
/* Neon Style - 螢光風格 */
body.style-neon main .block:not(.hero) {
border: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
box-shadow:
0 0 8px var(--color-primary),
0 0 20px color-mix(in srgb, var(--color-primary) 60%, transparent),
inset 0 0 20px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
margin-bottom: 24px; /* 增加間距避免重疊 */
}
body.style-neon main .block .figure img,
body.style-neon main .block figure img {
border: 4px solid transparent !important; /* 透明間距層 */
border-radius: 16px !important;
max-width: 100% !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, #ffffff), /* 更亮的實線外框 */
0 0 10px var(--color-primary), /* 緊密光暈 */
0 0 30px color-mix(in srgb, var(--color-primary) 80%, transparent) !important; /* 擴散光暈 */
}
/* 針對 full-width block (style-28g) 調整 border */
body.style-28g.style-neon main .block {
width: 100% !important; /* 確保邊框在視窗內 */
box-sizing: border-box !important; /* 確保 padding 和 border 不會撐開寬度 */
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 16px !important;
/* 確保邊框顏色一致 */
border-left: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
border-right: 2px solid color-mix(in srgb, var(--color-primary) 60%, #ffffff) !important;
}
/* Hero Left-Right Mobile Layout Adjustment */
@media (max-width: 720px) {
/* Interleave Image between H1 and Content */
.hero-left-right .grid .text,
.hero-left-right .grid .figure {
display: contents;
}
.hero-left-right .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-left-right .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-left-right .grid .text > *:not(h1) { order: 3; }
.hero-left-right .grid { text-align: center !important; justify-items: center; }
}
/* Fix Standard 28g Mobile Overflow (Containment) */
@media (max-width: 720px) {
body.style-28g main .block {
width: 100% !important;
left: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.style-28g .hero.hero-toy {
width: 100% !important;
left: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
}
/* Boxed Style */
body.style-boxed main {
max-width: 1200px;
margin: 40px auto;
background: var(--surface-bg);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
padding: 40px;
}
body.style-boxed main .block {
background: transparent;
border: none;
box-shadow: none;
padding: 24px 0;
margin: 24px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
body.style-boxed main .block:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Hero Split Diagonal */
.hero-split-diagonal {
position: relative;
overflow: hidden;
border: none !important;
background: transparent !important;
padding: 60px 24px;
}
.hero-split-diagonal::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(115deg, var(--surface-bg) 55%, var(--color-primary) 55.1%, var(--color-primary) 100%);
z-index: 1;
}
.hero-split-diagonal .content-wrapper {
position: relative;
z-index: 2;
}
/* Ensure split-diagonal text stays readable on varied backgrounds */
.hero-split-diagonal .text,
.hero-split-diagonal .text h1,
.hero-split-diagonal .text h2,
.hero-split-diagonal .text h3,
.hero-split-diagonal .text p,
.hero-split-diagonal .text li,
.hero-split-diagonal .text span {
color: var(--on-surface);
}
.hero-split-diagonal .text .muted {
color: color-mix(in srgb, var(--on-surface) 70%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.hero-split-diagonal {
padding: 32px 16px;
}
.hero-split-diagonal::before {
background: var(--surface-bg); /* Reset diagonal on mobile */
}
.hero-split-diagonal .grid .text,
.hero-split-diagonal .grid .figure {
display: contents;
}
.hero-split-diagonal .grid .text > h1 { order: 1; margin-bottom: 16px; width: 100%; text-align: center; }
.hero-split-diagonal .grid .figure > * { order: 2; margin-bottom: 24px; justify-self: center; width: 100%; }
.hero-split-diagonal .grid .text > *:not(h1) { order: 3; }
.hero-split-diagonal .grid { text-align: center !important; justify-items: center; }
}
/* Mobile Header Bottom Sticky Style */
@media (max-width: 720px) {
body.mobile-header-bottom-sticky .actions {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: var(--header-bg) !important;
border-top: 1px solid rgba(255,255,255,0.1);
padding: 12px !important;
display: flex !important;
justify-content: center;
gap: 12px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
z-index: 9999 !important;
padding-bottom: max(12px, env(safe-area-inset-bottom));
box-sizing: border-box;
visibility: visible !important;
opacity: 1 !important;
}
body.mobile-header-bottom-sticky .actions .btn {
flex: 1;
text-align: center;
padding: 12px 0;
margin: 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
body.mobile-header-bottom-sticky main {
padding-bottom: 90px !important;
}
/* Footer is outside main; add safe space so last icons aren't covered */
body.mobile-header-bottom-sticky .site-footer {
padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
body.mobile-header-bottom-sticky .floating-corner-stack {
bottom: 90px !important;
}
/* Hide conflicting floating bonus button when sticky header is active */
body.mobile-header-bottom-sticky .footer-bonus-btn.floating,
body.mobile-header-bottom-sticky .footer-bonus-btn {
display: none !important;
}
body.mobile-header-bottom-sticky .burger {
display: inline-flex !important;
margin-left: auto !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 1101 !important;
}
/* Top CTA: Logo + CTA + Burger (mobile) */
body.mobile-header-bottom-sticky .header-inner { position: relative; }
body.mobile-header-bottom-sticky .top-cta {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 10px 16px;
min-height: 52px; /* bigger than logo(42) & burger(36) */
border-radius: 14px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
letter-spacing: 0.2px;
white-space: nowrap;
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
/* Red text + contrasting bg (avoid blending into header bg) */
color: #ff2a2a;
background: color-mix(in srgb, #ffffff 92%, var(--color-primary) 8%);
border: 2px solid color-mix(in srgb, #ff2a2a 72%, rgba(0,0,0,0));
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
z-index: 1102;
}
/* Subtle sheen sweep (no blinking) */
body.mobile-header-bottom-sticky .top-cta::before {
content: "";
position: absolute;
top: -30%;
left: -70%;
width: 60%;
height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
transform: rotate(20deg);
opacity: 0.65;
animation: topCtaSheen 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes topCtaSheen {
0% { left: -70%; }
55% { left: 120%; }
100% { left: 120%; }
}
/* Gentle bob (no flashing) */
body.mobile-header-bottom-sticky .top-cta {
animation: topCtaBob 3.2s ease-in-out infinite;
}
@keyframes topCtaBob {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, -50%) translateY(-1px); }
}
}
/* Parallax & Grid & Animation */
body.parallax-bg {
background-attachment: fixed !important;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 720px) {
body.parallax-bg { background-attachment: scroll !important; }
}
@media (min-width: 721px) {
.grid.grid-60-40 { grid-template-columns: 1.5fr 1fr !important; }
.grid.grid-40-60 { grid-template-columns: 1fr 1.5fr !important; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.cards-block .cards-title {
color: var(--on-surface);
}
.cards-block .cards-desc {
color: color-mix(in srgb, var(--on-surface) 80%, transparent);
opacity: 0.8;
}
/* 響應式調整：手機版保持正方形不裁切 */
@media (max-width: 720px) {
.cards-grid {
grid-template-columns: 1fr !important;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.cards-item img {
max-width: 100% !important;
aspect-ratio: 1/1;
object-fit: contain;
}
}
.crosslink-cards .crosslink-grid {
display:grid;
gap:16px;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.crosslink-card {
display:flex;
flex-direction:column;
gap:12px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 12%, rgba(255,255,255,0.04));
border:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 30%, rgba(0,0,0,0.1));
border-radius:14px;
text-decoration:none;
color: inherit;
overflow:hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}
.crosslink-card:hover {
transform: translateY(-3px);
box-shadow:0 12px 30px rgba(0,0,0,0.14);
border-color: color-mix(in srgb, var(--surface-bg, #224e60) 10%, #ffffff 40%);
}
.crosslink-card figure {
margin:0;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.2));
background: color-mix(in srgb, #000 5%, rgba(255,255,255,0.08));
display:flex;
align-items:center;
justify-content:center;
}
.crosslink-card img {
width:100%;
height:100%;
object-fit:contain;
display:block;
padding:8px;
}
.crosslink-icon {
width:100%;
aspect-ratio: 2/1;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap: 6px;
background: color-mix(in srgb, var(--surface-bg, #224e60) 5%, rgba(255,255,255,0.02));
border-bottom:1px solid color-mix(in srgb, var(--surface-bg, #224e60) 20%, rgba(255,255,255,0.1));
}
.crosslink-icon-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 78px;
min-height: 78px;
padding: 0 14px;
border-radius: 999px;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--on-primary, #fff);
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 56%, #ffffff 44%) 100%);
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.crosslink-icon-hint {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--on-surface, #fff) 62%, rgba(255,255,255,0));
}
.crosslink-icon--mobile .crosslink-icon-mark,
.crosslink-icon--sports .crosslink-icon-mark,
.crosslink-icon--offer .crosslink-icon-mark {
min-width: 92px;
}
.crosslink-icon--stage .crosslink-icon-mark,
.crosslink-icon--default .crosslink-icon-mark {
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 66%, #ffffff 34%) 100%);
}
.crosslink-body {
padding:0 14px 14px;
}
.crosslink-body h3 {
margin:0 0 8px;
font-size:1.05rem;
}
.crosslink-body p {
margin:0;
font-size:0.95rem;
line-height:1.5;
color: color-mix(in srgb, var(--on-surface, #fff) 80%, rgba(255,255,255,0));
}
@media (max-width: 720px) {
.crosslink-cards .crosslink-grid {
grid-template-columns:1fr;
}
}
.seo-long-block { line-height: 1.75; }
.seo-long-block h2 { line-height: 1.35; margin: 1.1rem 0 0.7rem; }
.seo-long-block p { margin: 0 0 1rem; line-height: 1.75; white-space: normal; word-break: normal; overflow-wrap: break-word; }
.seo-long-block a,
.seo-long-block strong {
display: inline !important;
line-height: inherit;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
vertical-align: baseline;
}
.seo-long-block a {
color: var(--seo-link-color, #56d4ff);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
font-weight: 700;
}
.seo-long-block a:hover {
color: color-mix(in srgb, var(--seo-link-color, #56d4ff) 80%, #ffffff 20%);
}
.seo-long-block .seo-long-rich { color: var(--on-surface); line-height: 1.75; margin-bottom: 1rem; }
.ribbon-shell {
max-width: 1180px;
margin: 0 auto;
padding: 30px 20px 60px;
}
.ribbon-stack {
display: grid;
gap: 22px;
}
.ribbon-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ribbon-tag {
position: sticky;
top: 92px;
align-self: start;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 68%, #ffffff 32%) 100%);
color: var(--on-primary, #fff);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 14px 26px rgba(16, 33, 49, 0.16);
}
.ribbon-panel {
position: relative;
overflow: hidden;
border-radius: 26px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid color-mix(in srgb, var(--color-primary) 14%, rgba(0,0,0,0.08));
box-shadow: 0 18px 38px rgba(16, 33, 49, 0.08);
}
.ribbon-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
}
.ribbon-panel > .block,
.ribbon-panel > section.block,
.ribbon-panel > .media-tabs {
margin: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.ribbon-panel--seo {
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,244,238,0.94) 100%);
}
@media (max-width: 920px) {
.ribbon-row {
grid-template-columns: 1fr;
}
.ribbon-tag {
position: static;
width: fit-content;
}
}
@media (max-width: 720px) {
.ribbon-shell {
padding-inline: 16px;
}
.ribbon-panel {
border-radius: 22px;
}
}