/* ============================================================ 丹內·丹內 — 野奢莊園 Vanilla CSS port of the React + Tailwind + shadcn build ============================================================ */ /* ---------- Design Tokens ---------- The site ships two themes. LIGHT is the default (:root); DARK is opt-in via . Colours are composed from R,G,B "channel" tokens (--c-*) so the same rgba(var(--c-x), ) literal flips between themes while keeping its per-rule opacity. Accents are deepened for the light theme so they stay legible on near-white surfaces. */ :root { color-scheme: light; /* Channel triples (R, G, B) — flipped per theme */ --c-cyan: 14, 116, 144; /* deep cyan, ~AA on light */ --c-magenta: 162, 28, 175; /* deep fuchsia */ --c-line: 17, 24, 39; /* dark tint for borders / hovers / dividers */ --c-base: 245, 247, 251; /* page base, used by the nav glass */ --c-red: 220, 38, 38; /* Semantic tokens */ --bg-void: #e7ebf2; --bg-base: #f5f7fb; --bg-elevated: #ffffff; --surface: #ffffff; /* elevated card / box fill */ --bg-surface: rgba(var(--c-line), 0.04); --text-primary: #0f1729; --text-secondary: #525c6b; --text-inverse: #ffffff; --accent-cyan: rgb(var(--c-cyan)); --accent-cyan-glow: rgba(var(--c-cyan), 0.22); --accent-magenta: rgb(var(--c-magenta)); --accent-red: #dc2626; --border-subtle: rgba(var(--c-line), 0.12); --border-active: rgba(var(--c-cyan), 0.4); --shadow-ambient: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 34px rgba(15, 23, 42, 0.1); --shadow-glow: 0 8px 24px rgba(var(--c-cyan), 0.22); --rr-cta-end: rgb(var(--c-magenta)); /* second stop of the ranking CTA gradient */ --radius: 0.75rem; --maxw: 80rem; /* max-w-7xl = 1280px */ --maxw-4xl: 56rem; /* max-w-4xl = 896px */ } [data-theme="dark"] { color-scheme: dark; --c-cyan: 0, 229, 255; --c-magenta: 213, 0, 249; --c-line: 255, 255, 255; --c-base: 5, 5, 6; --c-red: 239, 68, 68; --bg-void: #020203; --bg-base: #050506; --bg-elevated: #0a0a0c; --surface: rgba(var(--c-line), 0.03); --bg-surface: rgba(var(--c-line), 0.05); --text-primary: #ededef; --text-secondary: #8a8f98; --text-inverse: #050506; --accent-cyan: rgb(var(--c-cyan)); --accent-cyan-glow: rgba(var(--c-cyan), 0.25); --accent-magenta: rgb(var(--c-magenta)); --accent-red: var(--accent-red); --border-subtle: rgba(var(--c-line), 0.08); --border-active: rgba(var(--c-cyan), 0.3); --shadow-ambient: 0 0 40px rgba(var(--c-cyan), 0.05); --shadow-glow: 0 0 20px rgba(var(--c-cyan), 0.3); --rr-cta-end: #73f3ff; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border-subtle); margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: "Inter", "Noto Sans TC", sans-serif; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: "Noto Sans TC", sans-serif; font-weight: 700; line-height: 1.2; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; background: none; color: inherit; } img, svg { display: block; max-width: 100%; } input { font-family: inherit; } ul { list-style: none; } ::selection { background: rgba(var(--c-cyan), 0.3); color: #ededef; } /* ---------- App shell ---------- */ .app { min-height: 100vh; background-color: var(--bg-base); color: var(--text-primary); } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1rem; } .container-4xl { width: 100%; max-width: var(--maxw-4xl); margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .container, .container-4xl { padding-inline: 1.5rem; } } @media (min-width: 1024px) { .container, .container-4xl { padding-inline: 2rem; } } .section-padding { padding-top: 60px; padding-bottom: 120px; } .bg-base { background-color: var(--bg-base); } .bg-void { background-color: var(--bg-void); } .bg-elevated { background-color: var(--bg-elevated); } .border-y-subtle { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .border-b-subtle { border-bottom: 1px solid var(--border-subtle); } .border-t-subtle { border-top: 1px solid var(--border-subtle); } /* ---------- Typography utilities ---------- */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-cyan { color: var(--accent-cyan); } .text-magenta { color: var(--accent-magenta); } .font-mono-data { font-family: "JetBrains Mono", monospace; } .text-gradient { background: linear-gradient( 135deg, var(--accent-cyan), var(--accent-magenta) ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .eyebrow { font-family: "JetBrains Mono", monospace; color: var(--accent-cyan); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; } .eyebrow.magenta { color: var(--accent-magenta); } .tracking-tight-custom { letter-spacing: -0.02em; } .text-balance { text-wrap: balance; } /* ---------- Glass card ---------- */ .glass-card { background: var(--surface); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(var(--c-line), 0.1); border-radius: 12px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .glass-card.hoverable:hover { transform: scale(1.02); box-shadow: 0 0 20px rgba(var(--c-cyan), 0.3); border-color: rgba(var(--c-cyan), 0.3); } /* ---------- Gradient button ---------- */ .gradient-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; /* Warm "ember" ramp: terracotta -> burnt orange -> gold. Every stop sits in the warm 15-45deg hue band, so the blend stays clean (the old terracotta->gold->green mix muddied into olive in the middle). Layer 1 is a top gloss highlight; layer 2 is the colour ramp. */ background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 48%), linear-gradient(115deg, #b1432b 0%, #c65a2c 50%, #d97f33 80%, #ecac41 100%); color: #ffffff; font-weight: 600; letter-spacing: 0.01em; padding: 12px 28px; border-radius: 14px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, filter 0.3s ease; position: relative; overflow: hidden; text-align: center; white-space: nowrap; /* keeps white text legible over the brighter gold edge */ text-shadow: 0 1px 2px rgba(92, 32, 12, 0.40); box-shadow: 0 6px 18px rgba(177, 67, 43, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -10px 20px rgba(120, 38, 18, 0.18); border: 1px solid rgba(255, 255, 255, 0.16); } /* sheen that sweeps across on hover */ .gradient-btn::before { content: ''; position: absolute; top: 0; left: -120%; width: 85%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 252, 245, 0.45), transparent ); transform: skewX(-18deg); transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .gradient-btn:hover::before { left: 135%; } .gradient-btn:hover { transform: translateY(-3px) scale(1.015); /* the button "lights up" instead of shifting hue */ filter: saturate(1.12) brightness(1.05); box-shadow: 0 12px 30px rgba(199, 90, 44, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .gradient-btn:active { transform: translateY(-1px) scale(0.99); filter: saturate(1.05) brightness(0.98); box-shadow: 0 4px 12px rgba(177, 67, 43, 0.32), inset 0 2px 6px rgba(110, 34, 16, 0.30); } @media (prefers-reduced-motion: reduce) { .gradient-btn { transition: box-shadow 0.3s ease; } .gradient-btn::before { display: none; } .gradient-btn:hover, .gradient-btn:active { transform: none; } } .gradient-btn.btn-sm { padding: 8px 20px; font-size: 0.875rem; } .gradient-btn.btn-md { padding: 12px 28px; font-size: 0.875rem; } .gradient-btn.btn-lg { padding: 16px 40px; font-size: 1rem; } /* outline button — the secondary CTA: a frosted "ghost" with real body, tinted in the brand accent so it reads next to the warm primary without competing with it. */ .outline-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; position: relative; overflow: hidden; padding: 12px 24px; border-radius: 14px; /* match the primary's radius */ border: 1.5px solid rgba(var(--c-line), 0.22); color: var(--text-primary); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; /* Frosted glass keyed to --bg-void (the hero "stage" colour): a light cream panel in the light hero, a dark panel in the dark hero — always the opposite polarity to the text, and neutral so it never melts into the green scene the way the old sage tint (and the always-dark --c-base) did. */ background: rgba(20, 18, 14, 0.40); /* fallback for no color-mix() */ background: color-mix(in srgb, var(--bg-void) 66%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(var(--c-line), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.50); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* soft accent wash that fades in on hover */ .outline-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(var(--c-cyan), 0.10), rgba(var(--c-cyan), 0.22) ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .outline-btn:hover { transform: translateY(-2px); border-color: rgba(var(--c-cyan), 0.85); color: var(--accent-cyan); box-shadow: 0 10px 24px rgba(var(--c-cyan), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .outline-btn:hover::before { opacity: 1; } .outline-btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(var(--c-line), 0.15); } .outline-btn.lg { padding: 16px 32px; font-size: 1rem; } @media (prefers-reduced-motion: reduce) { .outline-btn { transition: box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .outline-btn:hover, .outline-btn:active { transform: none; } } /* icons sizing */ .ic { width: 1rem; height: 1rem; flex-shrink: 0; } .ic-sm { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .ic-lg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .ic-xl { width: 1.75rem; height: 1.75rem; flex-shrink: 0; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all 0.5s ease; background: rgba(var(--c-base), 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.06); } .nav.scrolled { background: rgba(var(--c-base), 0.96); box-shadow: 0 0.65rem 1.75rem rgba(0, 0, 0, 0.08); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } @media (min-width: 1024px) { .nav-inner { height: 80px; } } .nav-logo { display: flex; align-items: center; gap: 0.5rem; } .logo-mark { width: 2rem; height: 2rem; display: block; flex-shrink: 0; filter: drop-shadow(0 0 0.55rem rgba(var(--c-cyan), 0.16)); transition: filter 0.3s ease, transform 0.3s ease; } .nav-logo:hover .logo-mark { filter: drop-shadow(0 0 0.75rem rgba(var(--c-cyan), 0.3)); transform: rotate(4deg); } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-title { color: var(--text-primary); font-weight: 700; font-size: 0.875rem; transition: color 0.3s; } .nav-logo:hover .logo-title { color: var(--accent-cyan); } .logo-sub { color: var(--text-secondary); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .nav-links { display: none; align-items: center; gap: 0.25rem; } @media (min-width: 1024px) { .nav-links { display: flex; } } .nav-link { padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); transition: all 0.3s; } .nav-link:hover { color: var(--text-primary); background: rgba(var(--c-line), 0.05); } .nav-link.active { color: var(--accent-cyan); background: rgba(var(--c-cyan), 0.08); } .nav-actions { display: flex; align-items: center; gap: 0.75rem; } .nav-icon-btn { width: 2.25rem; height: 2.25rem; display: none; align-items: center; justify-content: center; border-radius: 0.5rem; color: var(--text-secondary); transition: all 0.3s; } @media (min-width: 640px) { .nav-icon-btn { display: flex; } } .nav-icon-btn:hover { color: var(--text-primary); background: rgba(var(--c-line), 0.05); } .nav-cta { display: none; } @media (min-width: 640px) { .nav-cta { display: inline-flex; } } .nav-burger { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; color: var(--text-secondary); transition: all 0.3s; } @media (min-width: 1024px) { .nav-burger { display: none; } } .nav-burger:hover { color: var(--text-primary); background: rgba(var(--c-line), 0.05); } .nav-burger .ic-close { display: none; } .nav-burger.open .ic-menu { display: none; } .nav-burger.open .ic-close { display: block; } .mobile-menu { display: block; overflow: hidden; max-height: 0; opacity: 0; transition: all 0.5s ease; } @media (min-width: 1024px) { .mobile-menu { display: none; } } .mobile-menu.open { max-height: 30rem; opacity: 1; } .mobile-menu-inner { background: rgba(var(--c-base), 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border-subtle); padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .mobile-link { display: block; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); transition: all 0.3s; } .mobile-link:hover { color: var(--text-primary); background: rgba(var(--c-line), 0.05); } .mobile-link.active { color: var(--accent-cyan); background: rgba(var(--c-cyan), 0.08); } .mobile-cta { display: block; text-align: center; margin-top: 0.75rem; padding: 0.75rem; } /* ============================================================ HERO VORTEX (home) ============================================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--bg-void); } .hero-canvas { position: absolute; inset: 0; z-index: 0; } .hero-canvas canvas { display: block; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient( circle at center, rgba(5, 5, 6, 0.4) 0%, transparent 70% ); pointer-events: none; } .hero-content { position: relative; z-index: 10; text-align: center; padding-inline: 1rem; max-width: 42rem; margin-inline: auto; } .hero h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); margin: 1.5rem 0; } .hero-sub { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; max-width: 32rem; margin: 0 auto 2.5rem; } .hero-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } @media (min-width: 640px) { .hero h1 { font-size: 3rem; } .hero-sub { font-size: 1.125rem; } .hero-cta { flex-direction: row; } } @media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; } } .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; color: var(--text-secondary); animation: pulse-glow 2s ease-in-out infinite; } /* hero entrance animation */ .fade-up { opacity: 0; transform: translateY(20px); } .fade-up.go { animation: fadeInUp 1s ease-out forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ============================================================ PARTNER MARQUEE ============================================================ */ .marquee { overflow: hidden; } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 40s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 2rem; opacity: 0.5; transition: opacity 0.3s; cursor: default; } .marquee-item:hover { opacity: 1; } .marquee-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: rgba(var(--c-cyan), 0.5); flex-shrink: 0; } .marquee-label { color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; white-space: nowrap; letter-spacing: 0.025em; } /* ============================================================ SECTION HEADERS ============================================================ */ .section-head { margin-bottom: 4rem; } .section-head .eyebrow { display: block; margin-bottom: 1rem; } .section-head h2 { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .section-head p { color: var(--text-secondary); font-size: 1.125rem; max-width: 36rem; } @media (min-width: 640px) { .section-head h2 { font-size: 2.25rem; } } @media (min-width: 1024px) { .section-head h2 { font-size: 3rem; } } /* ============================================================ RANKINGS GRID (home) ============================================================ */ .rank-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .rank-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .rank-grid { grid-template-columns: repeat(3, 1fr); } } .rank-card { position: relative; padding: 1.5rem; display: flex; flex-direction: column; min-height: 100%; } .room-media { position: relative; aspect-ratio: 16 / 10; margin: -0.25rem -0.25rem 1.15rem; border: 1px solid var(--border-subtle); border-radius: 0.875rem; overflow: hidden; background: var(--surface); } .room-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.34) 100% ); } .room-media img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.01); transition: transform 0.35s ease; } .rank-card:hover .room-media img { transform: scale(1.045); } .room-credit { position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 1; max-width: calc(100% - 1rem); padding: 0.25rem 0.45rem; border-radius: 0.375rem; background: rgba(5, 5, 6, 0.58); color: rgba(255, 255, 255, 0.86); font-size: 0.625rem; line-height: 1.35; text-align: right; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .room-credit a { color: inherit; text-decoration: none; } .room-credit a:hover { text-decoration: underline; } .rank-badge { position: absolute; top: -0.75rem; left: -0.75rem; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: linear-gradient( 135deg, var(--accent-cyan), var(--accent-magenta) ); display: flex; align-items: center; justify-content: center; color: var(--bg-base); font-weight: 700; font-size: 0.875rem; box-shadow: var(--shadow-glow); text-decoration: none; } .rank-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; } a.rank-card { color: inherit; text-decoration: none; } .rank-card .rank-type { color: var(--text-secondary); font-size: 0.875rem; } .rating-row { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; } .stars { display: flex; align-items: center; gap: 0.25rem; } .star { width: 1rem; height: 1rem; color: rgba(138, 143, 152, 0.3); } .star.filled { color: var(--accent-cyan); fill: var(--accent-cyan); } .rating-num { font-family: "JetBrains Mono", monospace; color: var(--accent-cyan); font-weight: 700; } .rating-max { color: var(--text-secondary); font-size: 0.875rem; } .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .chip { padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: rgba(var(--c-cyan), 0.08); color: var(--accent-cyan); font-size: 0.75rem; font-weight: 500; } .bonus-box { background: var(--surface); border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 1rem; } .bonus-box .b-main { color: var(--text-primary); font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; } .bonus-box .b-extra { color: var(--text-secondary); font-size: 0.75rem; } .card-cta { width: 100%; margin-top: auto; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(var(--c-cyan), 0.45); background: rgba(var(--c-cyan), 0.08); color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; transition: all 0.3s; } .card-cta:hover { background: linear-gradient( 135deg, var(--accent-cyan), var(--accent-magenta) ); border-color: transparent; color: var(--text-inverse); box-shadow: 0 0 24px var(--accent-cyan-glow); transform: translateY(-2px); } .card-cta:hover .ic { transform: translateX(2px); } .card-cta .ic { transition: transform 0.3s; } /* scroll-reveal */ .reveal { opacity: 0; transform: translateY(100px) scale(0.9); } .reveal.in { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ STICKY MORPH FEATURES (home) ============================================================ */ .features-head { margin-bottom: 3rem; } /* Two-column scrollytelling: feature blocks flow in the left column, the visual sticks beside them and morphs as each block passes center. Heading + blocks share the same .container, so margins line up. */ .morph-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .morph-layout { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } } .morph-text { display: flex; flex-direction: column; gap: 4rem; } @media (min-width: 1024px) { .morph-text { gap: 0; } .morph-block { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; } } .morph-block { max-width: 34rem; transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease; } @media (min-width: 1024px) { .morph-block { opacity: 0.3; filter: blur(3px); transform: translateY(0.5rem); } .morph-block.active { opacity: 1; filter: blur(0); transform: translateY(0); } } .morph-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .morph-block h3 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } @media (min-width: 640px) { .morph-block h3 { font-size: 1.875rem; } } .morph-block p { color: var(--text-secondary); line-height: 1.7; } .morph-visual { display: none; } @media (min-width: 1024px) { .morph-visual { display: flex; align-items: center; justify-content: center; position: sticky; top: 96px; height: calc(100vh - 160px); } } .morph-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; border-radius: 9999px; background: radial-gradient( circle, rgba(var(--c-cyan), 0.12) 0%, transparent 70% ); transition: background 0.5s; } .morph-img-wrap { position: relative; width: 400px; height: 400px; } .morph-img { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.5s, transform 0.5s; } /* ============================================================ CORE METRICS ============================================================ */ .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } } .metric { text-align: center; } .metric-value { font-family: "JetBrains Mono", monospace; font-size: 2.25rem; font-weight: 700; } @media (min-width: 640px) { .metric-value { font-size: 3rem; } } @media (min-width: 1024px) { .metric-value { font-size: 3.75rem; } } .metric-label { color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.75rem; letter-spacing: 0.025em; } /* ============================================================ PAGE HERO (sub pages) ============================================================ */ .page-hero { position: relative; min-height: 40vh; display: flex; align-items: center; padding-top: 5rem; overflow: hidden; /* Banner band sits on the deeper void shade so it separates from the page body (which is --bg-base). Flips per theme: light #e7ebf2 / dark #020203. */ background-color: var(--bg-void); } .page-hero-bg { position: absolute; inset: 0; opacity: 0.3; } .page-hero-bg .blob { position: absolute; width: 24rem; height: 24rem; border-radius: 9999px; filter: blur(128px); } .page-hero-bg .blob-1 { top: 0; left: 25%; background: rgba(var(--c-cyan), 0.1); } .page-hero-bg .blob-2 { bottom: 0; right: 25%; background: rgba(var(--c-magenta), 0.1); } .page-hero-inner { position: relative; width: 100%; padding-block: 4rem; } .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 2rem; } .breadcrumb a, .breadcrumb .crumb { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.25rem; transition: color 0.3s; } .breadcrumb a:hover { color: var(--accent-cyan); } .breadcrumb .sep { color: rgba(138, 143, 152, 0.4); } .breadcrumb .current { color: var(--text-primary); } .page-hero .eyebrow { display: block; margin-bottom: 1rem; } .page-hero h1 { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; margin-bottom: 1rem; max-width: 48rem; } @media (min-width: 640px) { .page-hero h1 { font-size: 2.25rem; } } @media (min-width: 1024px) { .page-hero h1 { font-size: 3rem; } } .page-hero-sub { color: var(--text-secondary); font-size: 1rem; max-width: 42rem; line-height: 1.7; } @media (min-width: 640px) { .page-hero-sub { font-size: 1.125rem; } } .meta-bar { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.875rem; color: var(--text-secondary); } .meta-bar .dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--accent-cyan); display: inline-block; margin-right: 0.375rem; animation: pulse-glow 2s infinite; } .meta-bar .pipe { color: rgba(var(--c-line), 0.2); } /* ============================================================ DISCLAIMER BAR ============================================================ */ .disclaimer { background-color: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); } .disclaimer-inner { display: flex; align-items: flex-start; gap: 0.75rem; padding-block: 1.5rem; } .disclaimer-inner .ic { color: var(--accent-magenta); margin-top: 0.125rem; } .disclaimer-inner p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; } .disclaimer-inner strong { color: var(--text-primary); } /* ============================================================ GENERIC CONTENT ============================================================ */ .content-section { padding-bottom: 6rem; } .content-block { margin-bottom: 4rem; } .content-block:last-child { margin-bottom: 0; } .section-label { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .section-label .num { font-family: "JetBrains Mono", monospace; color: var(--accent-cyan); font-size: 0.75rem; } .h2 { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; } .h2-sm { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; } .prose p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem; } .prose p:last-child { margin-bottom: 0; } .lead-secondary { color: var(--text-secondary); margin-bottom: 2rem; } .callout-cyan { background: rgba(var(--c-cyan), 0.05); border: 1px solid rgba(var(--c-cyan), 0.2); border-radius: 0.5rem; padding: 1rem; } .callout-cyan p { color: var(--accent-cyan); font-size: 0.875rem; font-weight: 500; } .code-box { background: var(--surface); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; } .code-box p { color: var(--text-primary); font-family: "JetBrains Mono", monospace; font-size: 0.875rem; } .muted-box { background: var(--surface); border-radius: 0.5rem; padding: 1rem; } .muted-box p { color: var(--text-secondary); font-size: 0.875rem; } a.inline-link { color: var(--accent-cyan); display: inline-flex; align-items: center; gap: 0.25rem; } a.inline-link:hover { text-decoration: underline; } /* ---------- Criteria grid (casino ranking) ---------- */ .criteria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .criteria-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .criteria-grid { grid-template-columns: repeat(6, 1fr); } } .criteria-card { padding: 1rem; text-align: center; } .criteria-card .w { font-family: "JetBrains Mono", monospace; font-size: 1.5rem; font-weight: 700; } .criteria-card .n { color: var(--text-secondary); font-size: 0.75rem; margin-top: 0.5rem; } /* ---------- Ranking list rows (casino ranking) ---------- */ .rank-rows { display: flex; flex-direction: column; gap: 1.5rem; } .rank-row { padding: 1.5rem; } .rank-row-inner { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 1024px) { .rank-row-inner { flex-direction: row; align-items: center; } } .rr-id { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } @media (min-width: 1024px) { .rr-id { width: 16rem; } } .rr-num { width: 3rem; height: 3rem; border-radius: 9999px; background: linear-gradient( 135deg, var(--accent-cyan), var(--accent-magenta) ); display: flex; align-items: center; justify-content: center; color: var(--bg-base); font-weight: 700; font-size: 1.125rem; box-shadow: var(--shadow-glow); flex-shrink: 0; } .rr-logo { width: 3rem; height: 3rem; border-radius: 0.75rem; object-fit: cover; border: 1px solid var(--border-subtle); background: var(--bg-base); flex-shrink: 0; } .rr-id h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); } .rr-id p { color: var(--text-secondary); font-size: 0.875rem; } .rr-rating { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } @media (min-width: 1024px) { .rr-rating { width: 8rem; } } .rr-bonus { flex: 1; } .rr-bonus p { color: var(--text-primary); font-size: 0.875rem; font-weight: 500; } .rr-pros { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.25rem; } @media (min-width: 1024px) { .rr-pros { width: 16rem; } } .rr-pro { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .rr-pro .ic-sm { color: var(--accent-cyan); } .rr-pro span { color: var(--text-secondary); } .rr-cta { flex-shrink: 0; min-width: 9.5rem; min-height: 3rem; padding: 0.75rem 1rem 0.75rem 1.25rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.28); background: linear-gradient(135deg, var(--accent-cyan), var(--rr-cta-end)); color: var(--text-inverse); display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 0.75rem 1.75rem rgba(var(--c-cyan), 0.2), 0 0 1.25rem rgba(var(--c-cyan), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.58); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .rr-cta svg { width: 1.75rem; height: 1.75rem; padding: 0.4rem; border-radius: 0.5rem; background: rgba(5, 5, 6, 0.14); transition: transform 0.2s ease, background-color 0.2s ease; } .rr-cta:hover { filter: saturate(1.12) brightness(1.06); box-shadow: 0 1rem 2.25rem rgba(var(--c-cyan), 0.3), 0 0 2rem rgba(var(--c-cyan), 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.68); transform: translateY(-3px); } .rr-cta:hover svg { background: rgba(5, 5, 6, 0.2); transform: translate(2px, -2px); } .rr-cta:active { transform: translateY(-1px); } .rr-cta:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; } /* ============================================================ FREE BONUS PAGE ============================================================ */ .bonus-page-hero .page-hero-inner { display: grid; align-items: center; gap: 2.5rem; } .bonus-hero-copy { position: relative; z-index: 1; } .bonus-hero-media { position: relative; aspect-ratio: 16 / 9; min-width: 0; overflow: hidden; border: 1px solid rgba(var(--c-line), 0.12); border-radius: 1rem; background: var(--bg-elevated); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45), 0 0 2.5rem rgba(var(--c-cyan), 0.08); } .bonus-hero-media::after, .editorial-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 135deg, rgba(var(--c-cyan), 0.12), transparent 45%, rgba(var(--c-magenta), 0.12) ); mix-blend-mode: color; } .bonus-hero-media img, .editorial-figure img { width: 100%; height: 100%; object-fit: cover; } .bonus-hero-media figcaption { position: absolute; z-index: 1; right: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.5rem; border-radius: 0.375rem; background: rgba(5, 5, 6, 0.76); color: rgba(237, 237, 239, 0.68); font-size: 0.625rem; backdrop-filter: blur(8px); } .bonus-hero-media figcaption a:hover, .editorial-figure figcaption a:hover { color: var(--accent-cyan); } @media (min-width: 900px) { .bonus-page-hero .page-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr); } } .two-col { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .two-col { grid-template-columns: repeat(2, 1fr); } } .calc-card { padding: 2rem; } .calc-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; } .calc-head .badge { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: rgba(var(--c-cyan), 0.1); display: flex; align-items: center; justify-content: center; color: var(--accent-cyan); } .calc-head h2 { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); } .editorial-figure { position: relative; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 0.75rem; background: var(--bg-elevated); } .editorial-figure img { aspect-ratio: 8 / 5; filter: saturate(0.78) contrast(1.06) brightness(0.82); } .editorial-figure figcaption { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.875rem; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.6875rem; line-height: 1.5; } .editorial-figure figcaption span { color: var(--text-primary); } .editorial-figure figcaption a { flex-shrink: 0; transition: color 0.3s; } .calc-visual { margin: -0.25rem 0 1.75rem; } .guide-visual { margin-top: 1.25rem; } .field { margin-bottom: 1.5rem; } .field label { display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem; } .field input { width: 100%; background: var(--surface); border: 1px solid rgba(var(--c-line), 0.1); border-radius: 0.5rem; padding: 0.75rem 1rem; color: var(--text-primary); transition: border-color 0.3s; font-size: 1rem; } .field input:focus { outline: none; border-color: var(--accent-cyan); } .result-box { background: rgba(var(--c-cyan), 0.05); border: 1px solid rgba(var(--c-cyan), 0.2); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1.5rem; } .result-box .r-label { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem; } .result-box .r-value { font-family: "JetBrains Mono", monospace; font-size: 1.875rem; font-weight: 700; color: var(--accent-cyan); } .result-box .r-note { color: var(--text-secondary); font-size: 0.75rem; margin-top: 0.5rem; } .info-note { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; color: var(--text-secondary); } .info-note .ic { margin-top: 0.125rem; } .guide-col { display: flex; flex-direction: column; gap: 2rem; } .guide-col .h2 { font-size: 1.5rem; margin-bottom: 1rem; } .type-list { display: flex; flex-direction: column; gap: 0.75rem; } .type-card { padding: 1rem; } .type-card h4 { color: var(--text-primary); font-weight: 600; margin-bottom: 0.25rem; } .type-card p { color: var(--text-secondary); font-size: 0.875rem; } /* ============================================================ BLACKLIST PAGE ============================================================ */ .blacklist-page-hero .page-hero-inner { display: grid; align-items: center; gap: 2.5rem; } .blacklist-hero-copy { position: relative; z-index: 1; } .blacklist-hero-media { position: relative; aspect-ratio: 3 / 2; min-width: 0; overflow: hidden; border: 1px solid rgba(var(--c-red), 0.24); border-radius: 1rem; background: var(--bg-elevated); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.48), 0 0 3rem rgba(var(--c-red), 0.1); } .blacklist-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 135deg, rgba(var(--c-red), 0.12), transparent 48%, rgba(var(--c-cyan), 0.1) ); mix-blend-mode: color; } .blacklist-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.08) brightness(0.8); } .blacklist-hero-media figcaption { position: absolute; z-index: 1; right: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.5rem; border-radius: 0.375rem; background: rgba(5, 5, 6, 0.8); color: rgba(237, 237, 239, 0.68); font-size: 0.625rem; backdrop-filter: blur(8px); } .blacklist-hero-media figcaption a, .blacklist-figure figcaption a { transition: color 0.3s; } .blacklist-hero-media figcaption a:hover, .blacklist-figure figcaption a:hover { color: var(--accent-cyan); } .blacklist-figure { margin: 2rem 0; } .blacklist-figure img { aspect-ratio: 16 / 7; object-position: center; } @media (min-width: 900px) { .blacklist-page-hero .page-hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr); } } .danger-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .danger-grid { grid-template-columns: repeat(3, 1fr); } } .danger-card { padding: 1.5rem; border-left: 4px solid; } .danger-card .d-icon { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .danger-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .danger-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; } .check-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .check-grid { grid-template-columns: repeat(2, 1fr); } } .check-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 0.5rem; border: 1px solid var(--border-subtle); transition: all 0.3s; text-align: left; width: 100%; } .check-item:hover { border-color: rgba(var(--c-line), 0.15); } .check-item.pass { border-color: rgba(var(--c-cyan), 0.5); background: rgba(var(--c-cyan), 0.05); } .check-item.fail { border-color: rgba(var(--c-red), 0.5); background: rgba(var(--c-red), 0.05); } .check-mark { width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface); } .check-item.pass .check-mark { background: rgba(var(--c-cyan), 0.2); } .check-item.fail .check-mark { background: rgba(var(--c-red), 0.2); } .check-mark .ic-sm { display: none; } .check-item.pass .check-mark .ic-pass { display: block; color: var(--accent-cyan); } .check-item.fail .check-mark .ic-fail { display: block; color: var(--accent-red); } .check-label { font-size: 0.875rem; color: var(--text-secondary); } .check-item.pass .check-label { color: var(--accent-cyan); } .check-item.fail .check-label { color: var(--accent-red); } .check-summary { margin-top: 1.5rem; padding: 1rem; border-radius: 0.5rem; background: var(--surface); display: none; } .check-summary.show { display: block; } .check-summary p { color: var(--text-secondary); font-size: 0.875rem; } .check-summary .ok { color: var(--accent-cyan); font-weight: 500; } .check-summary .bad { color: var(--accent-red); font-weight: 500; } .method-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .method-grid { grid-template-columns: repeat(2, 1fr); } } .method-card { padding: 1.5rem; } .method-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .method-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; } /* ============================================================ BACCARAT / TABLES ============================================================ */ .intro-card { padding: 2rem; margin-bottom: 3rem; } .intro-card .row { display: flex; align-items: flex-start; gap: 0.75rem; } .intro-card .ic { color: var(--accent-magenta); margin-top: 0.125rem; } .intro-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; } .intro-card .stack > p { margin-bottom: 0.5rem; } .intro-card .stack > p:last-child { margin-bottom: 0; } .data-table-wrap { overflow-x: auto; margin-bottom: 2rem; } .data-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; } .data-table thead tr { border-bottom: 1px solid rgba(var(--c-line), 0.1); } .data-table th { text-align: left; padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 500; white-space: nowrap; } .data-table tbody tr { border-bottom: 1px solid rgba(var(--c-line), 0.05); } .data-table td { padding: 0.75rem 1rem; } .data-table td.primary { color: var(--text-primary); font-weight: 500; } .data-table td.mono { font-family: "JetBrains Mono", monospace; } .data-table td.cyan { color: var(--accent-cyan); } .data-table td.muted { color: var(--text-secondary); } .strategy-list { display: flex; flex-direction: column; gap: 1.5rem; } .strategy-card { padding: 1.5rem; } .strategy-card h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .strategy-card h3 .ic-cyan { color: var(--accent-cyan); } .strategy-card h3 .ic-magenta { color: var(--accent-magenta); } .strategy-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; } /* ---------- Section 04 · first-round playbook timeline ---------- */ .playbook { position: relative; display: flex; flex-direction: column; gap: 1rem; } .play-step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; } /* connecting rail + node */ .play-rail { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 6px; } .play-rail::before { content: ""; position: absolute; top: 44px; bottom: -1.5rem; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient( 180deg, var(--accent-cyan), var(--accent-magenta) ); opacity: 0.3; } .playbook .play-step:last-child .play-rail::before { display: none; } .play-node { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 700; background: var(--bg-elevated); border: 1px solid var(--border-subtle); transition: box-shadow 0.3s ease, transform 0.3s ease; } .tone-cyan .play-node { color: var(--accent-cyan); border-color: var(--border-active); box-shadow: 0 0 14px var(--accent-cyan-glow); } .tone-magenta .play-node { color: var(--accent-magenta); border-color: rgba(var(--c-magenta), 0.35); box-shadow: 0 0 14px rgba(var(--c-magenta), 0.22); } /* body card */ .play-body { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--surface); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(var(--c-line), 0.1); border-radius: 12px; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .play-step:hover .play-body { transform: translateX(4px); } .play-step:hover .play-node { transform: scale(1.08); } .tone-cyan:hover .play-body { border-color: var(--border-active); box-shadow: -4px 0 22px rgba(var(--c-cyan), 0.12); } .tone-magenta:hover .play-body { border-color: rgba(var(--c-magenta), 0.35); box-shadow: -4px 0 22px rgba(var(--c-magenta), 0.12); } /* icon chip */ .play-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .tone-cyan .play-icon { background: rgba(var(--c-cyan), 0.1); color: var(--accent-cyan); } .tone-magenta .play-icon { background: rgba(var(--c-magenta), 0.1); color: var(--accent-magenta); } .play-icon .ic { width: 22px; height: 22px; } /* text */ .play-text { position: relative; z-index: 1; } .play-text h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; } .play-text p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; } /* decorative watermark number */ .play-watermark { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 3.5rem; line-height: 1; color: rgba(var(--c-line), 0.04); pointer-events: none; z-index: 0; } /* finish cap */ .tone-finish .play-node { background: linear-gradient( 135deg, var(--accent-cyan), var(--accent-magenta) ); border: none; color: var(--text-inverse); box-shadow: 0 0 18px rgba(var(--c-cyan), 0.3); } .tone-finish .play-node .ic { width: 18px; height: 18px; } .tone-finish .play-body { background: var(--surface); border-style: dashed; border-color: rgba(var(--c-line), 0.15); } .tone-finish:hover .play-body { transform: translateX(4px); border-color: rgba(var(--c-cyan), 0.3); } /* ============================================================ SPORTS PAGE · "live broadcast" redesign Bet/odds/tip/warn cards restyled; broadcast image system below. ============================================================ */ /* Bet types as numbered broadcast "channels" */ .bet-list { display: flex; flex-direction: column; gap: 1rem; counter-reset: bet; } .bet-card { position: relative; padding: 1.2rem 1.3rem 1.2rem 3.7rem; counter-increment: bet; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .bet-card::before { content: counter(bet, decimal-leading-zero); position: absolute; left: 1.15rem; top: 1.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 700; color: var(--accent-cyan); } .bet-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient( 180deg, var(--accent-cyan), var(--accent-magenta) ); opacity: 0.45; transition: opacity 0.3s ease; } .bet-card:hover { transform: translateX(4px); border-color: var(--border-active); box-shadow: -4px 0 22px rgba(var(--c-cyan), 0.12); } .bet-card:hover::after { opacity: 1; } .bet-card .b-top { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.4rem; } @media (min-width: 640px) { .bet-card .b-top { flex-direction: row; align-items: center; justify-content: space-between; } } .bet-card h3 { color: var(--text-primary); font-weight: 600; } .bet-card .complexity { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(var(--c-cyan), 0.08); border: 1px solid rgba(var(--c-cyan), 0.22); color: var(--accent-cyan); font-family: "JetBrains Mono", monospace; width: fit-content; } .bet-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; } /* Odds cards — neon top rail + hover lift */ .odds-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .odds-grid { grid-template-columns: repeat(2, 1fr); } } .odds-card { position: relative; padding: 1.5rem 1.3rem 1.3rem; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .odds-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-cyan), transparent 80%); } .odds-card:hover { transform: translateY(-3px); border-color: var(--border-active); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(var(--c-cyan), 0.1); } .odds-card h3 { color: var(--text-primary); font-weight: 600; margin-bottom: 0.5rem; } .odds-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; } /* NBA tips — circular index nodes */ .tip-list { display: flex; flex-direction: column; gap: 0.85rem; } .tip-row { display: flex; align-items: flex-start; gap: 0.85rem; } .tip-row .num { flex-shrink: 0; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--c-cyan), 0.1); border: 1px solid rgba(var(--c-cyan), 0.28); font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 700; color: var(--accent-cyan); margin-top: 0.05rem; } .tip-row span:last-child { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.65; } /* Warning card */ .warn-card { padding: 1.6rem 1.6rem 1.6rem 1.8rem; border-left: 4px solid var(--accent-magenta); background: rgba(var(--c-magenta), 0.04); } .warn-card p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem; } .warn-card p:last-child { margin-bottom: 0; } /* ============================================================ ABOUT PAGE ============================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat { text-align: center; } .stat .v { font-family: "JetBrains Mono", monospace; font-size: 2.25rem; font-weight: 700; } @media (min-width: 1024px) { .stat .v { font-size: 3rem; } } .stat .l { color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.5rem; } .quote-card { padding: 1.5rem; border-left: 4px solid var(--accent-cyan); margin: 2rem 0; } .quote-card p.q { color: var(--text-primary); font-style: italic; } .quote-card p.q a { color: var(--accent-cyan); } .quote-card p.q a:hover { text-decoration: underline; } .quote-card .by { color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.75rem; } .principle-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .principle-grid { grid-template-columns: repeat(3, 1fr); } } .principle-card { padding: 1.5rem; } .principle-card .p-icon { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .principle-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem; } .principle-card p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; } .timeline { display: flex; flex-direction: column; gap: 2rem; } .tl-row { display: flex; gap: 1.5rem; } .tl-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .tl-dot { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: linear-gradient( 135deg, var(--accent-cyan), var(--accent-magenta) ); display: flex; align-items: center; justify-content: center; color: var(--bg-base); font-weight: 700; font-size: 0.75rem; flex-shrink: 0; } .tl-line { width: 2px; flex: 1; background: linear-gradient(to bottom, rgba(var(--c-cyan), 0.5), transparent); margin-top: 0.5rem; } .tl-body { padding-bottom: 2rem; } .tl-body .yr { font-family: "JetBrains Mono", monospace; color: var(--accent-cyan); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .tl-body h3 { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin: 0.25rem 0 0.5rem; } .tl-body p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; } .cta-card { padding: 2rem; text-align: center; } .cta-card h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .cta-card p { color: var(--text-secondary); margin-bottom: 1.5rem; } /* ============================================================ FOOTER ============================================================ */ .footer { /* --- Standardized footer spacing scale --- */ --fs-pad-top: 4rem; /* outer top padding */ --fs-pad-bottom: 2.5rem; /* outer bottom padding */ --fs-sep: 2.5rem; /* space around every bordered separator (margin == padding) */ --fs-stack-gap: 3rem; /* vertical gap between stacked blocks (mobile) */ --fs-col-gap: 2rem; /* horizontal gap between columns (desktop) */ --fs-gap: 1rem; /* unified vertical rhythm inside every column (heading / list / items / brand) */ background-color: var(--bg-void); border-top: 1px solid var(--border-subtle); } .footer-inner { padding-top: var(--fs-pad-top); padding-bottom: var(--fs-pad-bottom); } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fs-stack-gap); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--fs-col-gap); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 3fr 1fr 1fr 1fr; } } .footer-brand-logo { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--fs-gap); } .footer-brand-logo span { color: var(--text-primary); font-weight: 700; } .footer-brand p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.7; margin-bottom: var(--fs-gap); } .footer-age { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.875rem; } .footer-age .pill { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.25rem; background: var(--surface); font-size: 0.75rem; font-weight: 700; } .footer-col h4 { color: var(--text-primary); font-weight: 600; font-size: 0.875rem; margin-bottom: var(--fs-gap); text-transform: uppercase; letter-spacing: 0.05em; } .footer-col ul { display: flex; flex-direction: column; gap: var(--fs-gap); } .footer-col a { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.875rem; transition: color 0.3s; } .footer-col a:hover, .footer-col a:hover .ic { color: var(--accent-cyan); } .footer-disclaimer { margin-top: var(--fs-sep); padding-top: var(--fs-sep); border-top: 1px solid var(--border-subtle); } .fd-top { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; } @media (min-width: 768px) { .fd-top { flex-direction: row; align-items: center; } } .fd-top .label { display: flex; align-items: center; gap: 0.5rem; color: var(--accent-cyan); font-weight: 500; font-size: 0.875rem; } .fd-top p { color: var(--text-secondary); font-size: 0.75rem; line-height: 1.7; max-width: 48rem; } @media (min-width: 768px) { .fd-top p { text-align: right; } } .fd-bottom { margin-top: var(--fs-sep); padding-top: var(--fs-sep); border-top: 1px solid rgba(var(--c-line), 0.04); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.5rem; } @media (min-width: 640px) { .fd-bottom { flex-direction: row; } } .fd-bottom p { color: var(--text-secondary); font-size: 0.75rem; } .fd-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; } .footer-legal { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .footer-legal a { color: var(--text-secondary); font-size: 0.75rem; transition: color 0.3s; } .footer-legal a:hover { color: var(--accent-cyan); } .footer-legal span { color: var(--text-secondary); opacity: 0.5; font-size: 0.75rem; } /* ============================================================ Baccarat — full-bleed banner hero A wide cinematic photo fills the hero behind a dark scrim, distinct from the side-by-side hero media on other pages. ============================================================ */ .bac-page-hero { min-height: 30rem; } .bac-hero-banner, .sp-hero-banner { position: absolute; top: 65px; left: 0; right: 0; z-index: 0; width: 100%; height: calc(100% - 65px); object-fit: cover; } .bac-hero-banner { object-position: center 38%; } .bac-hero-scrim, .sp-hero-scrim { position: absolute; top: 65px; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; } .bac-hero-scrim { background: linear-gradient( 90deg, rgba(5, 5, 6, 0.94) 0%, rgba(5, 5, 6, 0.78) 38%, rgba(5, 5, 6, 0.42) 72%, rgba(5, 5, 6, 0.3) 100% ), linear-gradient( 0deg, var(--bg-base) 1%, rgba(5, 5, 6, 0.1) 42%, rgba(5, 5, 6, 0.45) 100% ); } @media (min-width: 1024px) { .bac-hero-banner, .sp-hero-banner { top: 81px; height: calc(100% - 81px); } .bac-hero-scrim, .sp-hero-scrim { top: 81px; } } /* keep the colour blobs glowing over the photo */ .bac-page-hero .page-hero-bg { z-index: 2; opacity: 0.45; mix-blend-mode: screen; } /* lift the text content above image + scrim */ .bac-page-hero .page-hero-inner { z-index: 3; } /* On narrow screens the left-to-right scrim hides the photo, so switch to a top-to-bottom one: image up top, dark behind the text. */ /* keep the hero text legible over the busy photo */ .bac-page-hero h1, .bac-page-hero .page-hero-sub, .bac-page-hero .breadcrumb, .bac-page-hero .eyebrow, .bac-page-hero .meta-bar { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } @media (max-width: 819px) { .bac-page-hero { min-height: 24rem; } .bac-hero-banner { object-position: 68% center; } .bac-hero-scrim { background: linear-gradient( 180deg, rgba(5, 5, 6, 0.4) 0%, rgba(5, 5, 6, 0.48) 30%, rgba(5, 5, 6, 0.66) 56%, rgba(5, 5, 6, 0.84) 84%, var(--bg-base) 100% ); } } /* ============================================================ Baccarat — split feature panels (image + insight) A deliberately different layout from .editorial-figure: instead of a full-width image with a caption bar, the photo sits in a framed glass card beside a short insight column, alternating left/right down the page (zig-zag editorial). ============================================================ */ .bac-split { --ring: var(--accent-cyan); --ring-soft: rgba(var(--c-cyan), 0.4); --ring-faint: rgba(var(--c-cyan), 0.14); --ring-sweep: rgba(var(--c-cyan), 0.22); display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; margin: 2.5rem 0 0.25rem; } .bac-split.tone-magenta { --ring: var(--accent-magenta); --ring-soft: rgba(var(--c-magenta), 0.42); --ring-faint: rgba(var(--c-magenta), 0.15); --ring-sweep: rgba(var(--c-magenta), 0.2); } /* Framed image card — full colour, accent ring, hover zoom */ .bac-split-media { position: relative; aspect-ratio: 4 / 3; min-width: 0; overflow: hidden; border-radius: 1rem; background: var(--bg-elevated); border: 1px solid var(--border-subtle); box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5); isolation: isolate; } .bac-split-media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ring-soft), inset 0 0 2.75rem var(--ring-faint); } .bac-split-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(135deg, var(--ring-sweep), transparent 42%); mix-blend-mode: screen; } .bac-split-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .bac-split-media:hover img { transform: scale(1.04); } /* Insight text column */ .bac-split-body { position: relative; min-width: 0; } .bac-fig-index { display: inline-flex; align-items: center; gap: 0.6rem; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--ring); margin-bottom: 0.85rem; } .bac-fig-index::after { content: ""; width: 2.5rem; height: 1px; background: linear-gradient(90deg, var(--ring), transparent); } .bac-split-body h3 { font-size: 1.15rem; line-height: 1.45; color: var(--text-primary); margin-bottom: 0.6rem; } .bac-split-body p { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; } .bac-chiprow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; } .bac-chiprow span { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; padding: 0.26rem 0.65rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-secondary); } @media (min-width: 820px) { .bac-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5rem; } .bac-split.reverse .bac-split-media { order: 2; } .bac-split.reverse .bac-split-body { order: 1; } } /* ============================================================ SPORTS — broadcast image system A third, distinct photo layout (NOT .editorial-figure's caption-below, NOT .bac-split's text-beside): cinematic photos wear a TV-broadcast skin — neon tally bar, a pulsing LIVE cue, and a lower-third caption laid OVER the image. ============================================================ */ /* ---- Hero: full-bleed arena, bottom-anchored lower-third ---- */ .sp-page-hero { min-height: 34rem; align-items: flex-end; } /* Banner starts below the fixed nav plus its 1px border, so the photo never sits behind the header; its top edge fades into the dark header band. */ .sp-hero-banner { object-position: center 40%; } .sp-hero-scrim { background: linear-gradient(180deg, var(--bg-base), transparent 14%), radial-gradient( 115% 80% at 78% 12%, rgba(var(--c-cyan), 0.16), transparent 55% ), linear-gradient( 0deg, var(--bg-base) 1%, rgba(5, 5, 6, 0.72) 28%, rgba(5, 5, 6, 0.26) 58%, rgba(5, 5, 6, 0.42) 100% ); } .sp-page-hero .page-hero-bg { z-index: 2; opacity: 0.5; mix-blend-mode: screen; } .sp-page-hero .page-hero-inner { z-index: 3; padding-block: 3rem 3.25rem; } /* ---- Broadcast frame (the distinct in-content photo layout) ---- */ .sp-frame { position: relative; isolation: isolate; overflow: hidden; border-radius: 1rem; background: var(--bg-elevated); border: 1px solid var(--border-subtle); box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5); margin: 2.5rem 0 0.5rem; } .sp-frame.wide { aspect-ratio: 16 / 7; } .sp-frame.tall { aspect-ratio: 3 / 4; } @media (max-width: 640px) { .sp-frame.wide { aspect-ratio: 4 / 3; } } .sp-frame > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .sp-frame:hover > img { transform: scale(1.045); } /* neon tally bar */ .sp-frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta)); } /* legibility scrim + cyan sweep */ .sp-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 0deg, rgba(5, 5, 6, 0.92) 1%, rgba(5, 5, 6, 0.28) 44%, transparent 70% ), linear-gradient(125deg, rgba(var(--c-cyan), 0.16), transparent 42%); } .sp-frame.tone-magenta::after { background: linear-gradient( 0deg, rgba(5, 5, 6, 0.92) 1%, rgba(5, 5, 6, 0.28) 44%, transparent 70% ), linear-gradient(125deg, rgba(var(--c-magenta), 0.18), transparent 42%); } /* lower-third: caption laid over the photo */ .sp-lower { position: absolute; z-index: 4; left: 1.1rem; right: 1.1rem; bottom: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .sp-lower h3 { font-size: 1.02rem; line-height: 1.45; color: var(--text-primary); max-width: 32rem; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); } @media (max-width: 560px) { .sp-lower { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .sp-lower h3 { font-size: 0.92rem; } } /* ---- NBA "court" split: tall action tile + tips card ---- */ .sp-court { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 0.5rem; } .sp-court .sp-frame { margin: 0; } @media (min-width: 860px) { .sp-court { grid-template-columns: 0.82fr 1.18fr; gap: 2rem; align-items: start; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .marquee-track { animation: none; } } /* ---------- 本月推薦娛樂城 (recommendation block, server-rendered) ---------- */ .rec-casino { padding: 5rem 0; border-top: 1px solid var(--border-subtle); } .rec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } .rec-head .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; } .rec-head .eyebrow svg { width: 15px; height: 15px; } .rec-head h2 { margin: 0.4rem 0 0.35rem; } .rec-head p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; max-width: 48ch; } .rec-alllink { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-cyan); font-size: 0.85rem; font-weight: 600; white-space: nowrap; transition: gap 0.25s ease; } .rec-alllink:hover { gap: 0.7rem; } .rec-alllink svg { width: 16px; height: 16px; } .rec-note { margin-top: 1.75rem; font-size: 0.72rem; color: var(--text-secondary); opacity: 0.75; line-height: 1.6; } /* ============================================================ THEMING — light/dark ============================================================ */ /* ---- Always-dark "stage" sections ---- The vortex hero and the full-bleed photo heroes are designed around a dark backdrop (neon particles, white text over scrims). They keep the dark palette in BOTH themes by re-declaring the dark channel/semantic tokens; every descendant inherits them. In dark mode these simply match :root. */ .hero, .bac-page-hero, .sp-page-hero { color-scheme: dark; --c-cyan: 0, 229, 255; --c-magenta: 213, 0, 249; --c-line: 255, 255, 255; --c-base: 5, 5, 6; --c-red: 239, 68, 68; --bg-void: #020203; --bg-base: #050506; --bg-elevated: #0a0a0c; --surface: rgba(var(--c-line), 0.03); --bg-surface: rgba(var(--c-line), 0.05); --text-primary: #ededef; --text-secondary: #8a8f98; --text-inverse: #050506; --accent-red: #f87171; --border-subtle: rgba(var(--c-line), 0.08); --border-active: rgba(var(--c-cyan), 0.3); --rr-cta-end: #73f3ff; } /* Header background is standardized in .nav, so dark/photo hero pages no longer switch to a transparent pre-scroll header. */ /* ---- Theme toggle button ---- */ .theme-toggle { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; color: var(--text-secondary); transition: all 0.3s; } .theme-toggle:hover { color: var(--text-primary); background: rgba(var(--c-line), 0.06); } .theme-toggle .ic { width: 1.15rem; height: 1.15rem; } /* Show the icon of the mode you'll switch TO: moon in light, sun in dark. */ .theme-toggle .ic-sun { display: none; } .theme-toggle .ic-moon { display: block; } [data-theme="dark"] .theme-toggle .ic-moon { display: none; } [data-theme="dark"] .theme-toggle .ic-sun { display: block; } /* ---- Light-theme image tuning ---- Editorial/blacklist photos are dimmed to sit on the dark UI; lift them on light so they don't read as muddy boxes. The heavy scrim-backed photos (.bac-split / .sp-frame) are left as-is — their darkness is intentional. */ [data-theme="dark"] .editorial-figure img { filter: saturate(0.78) contrast(1.06) brightness(0.82); } .editorial-figure img { filter: saturate(0.96) contrast(1.02); } [data-theme="dark"] .blacklist-hero-media img { filter: saturate(0.88) contrast(1.08) brightness(0.8); } .blacklist-hero-media img { filter: saturate(0.94) contrast(1.04) brightness(0.96); } /* ============================================================ Edit overrides (appended) 1) Hide ranking-CTA and card-CTA buttons (per request) 2) FAQ + resources components for the expanded T4 article content ============================================================ */ /* --- Tasks 3 & 4: hide the .rr-cta and .card-cta buttons --- */ .rr-cta, .card-cta { display: none !important; } /* --- FAQ accordion (CC glass style) --- */ .faq-list { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.5rem; } .faq-item { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s; } .faq-item[open] { border-color: var(--border-active); } .faq-item > summary { list-style: none; cursor: pointer; padding: 1.125rem 1.375rem; font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: 1.0625rem; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--accent-cyan); transition: transform 0.3s; flex: 0 0 auto; } .faq-item[open] > summary::after { transform: rotate(45deg); } .faq-item > .faq-body { padding: 0 1.375rem 1.25rem; color: var(--text-secondary); line-height: 1.75; } .faq-item > .faq-body p { margin-bottom: 0.75rem; } .faq-item > .faq-body p:last-child { margin-bottom: 0; } /* --- 延伸閱讀與權威引用 (resources / citations) --- */ .resource-block { margin-top: 1.5rem; display: grid; gap: 1.5rem; } @media (min-width: 768px) { .resource-block.cols-2 { grid-template-columns: 1fr 1fr; } } .resource-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 1.5rem 1.625rem; } .resource-card h3 { font-size: 1.0625rem; margin-bottom: 0.875rem; color: var(--text-primary); } .resource-list { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; } .resource-list li { position: relative; padding-left: 1.1rem; color: var(--text-secondary); line-height: 1.6; } .resource-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: var(--accent-cyan); } .resource-list a { color: var(--accent-cyan); border-bottom: 1px solid transparent; transition: border-color 0.25s; } .resource-list a:hover { border-bottom-color: var(--accent-cyan); } .resource-list .src { color: var(--text-secondary); font-size: 0.9rem; } /* --- ordered/unordered body lists ported from T4 --- */ .body-ol, .body-ul { margin: 1rem 0 1.25rem; padding-left: 1.4rem; color: var(--text-secondary); line-height: 1.8; display: flex; flex-direction: column; gap: 0.5rem; } .body-ol { list-style: decimal; } .body-ul { list-style: disc; } .body-ol li::marker, .body-ul li::marker { color: var(--accent-cyan); } .body-ol strong, .body-ul strong { color: var(--text-primary); } /* warn-toned callout (mirrors .callout-cyan but magenta/red accent) */ .callout-warn { margin: 1.25rem 0; padding: 1rem 1.25rem; border-radius: var(--radius); background: rgba(var(--c-magenta), 0.06); border-left: 3px solid var(--accent-magenta); } .callout-warn p { color: var(--text-secondary); line-height: 1.7; } .callout-warn b, .callout-cyan b { color: var(--text-primary); } /* Hero overlay vignette: the default is a dark radial tuned for the void backdrop. On light theme that reads as a grey smudge — swap to a soft light haze so the centred hero text still pops over the vortex. */ [data-theme="light"] .hero-overlay { background: radial-gradient( circle at center, rgba(244, 247, 251, 0.45) 0%, transparent 70% ); }