/* ============================================================
tinypoker.net · TTT THEME OVERLAY
─────────────────────────────────────────────────────────────
TTT 限定 · 主站其他頁面不會 import 這份。
設計時請確認：foundation 層在這裡只是被「上 paint」，沒有被覆蓋掉
結構。換 theme 時這份檔案整份替換即可。
============================================================ */
/* TTT-specific helpers — built on top of foundation tokens */
:root {
/* TTT-specific motif tokens · 給 component 直接吃 */
--ttt-page-bg: radial-gradient(1200px 600px at 80% -10%, rgba(201,163,95,0.06), transparent 60%),
radial-gradient(900px 500px at -10% 20%, rgba(224,122,60,0.04), transparent 60%),
linear-gradient(180deg, var(--c-stone-900) 0%, var(--c-stone-950) 100%);
/* parchment grain (data-URI svg, no asset dep) */
--ttt-grain: url("data:image/svg+xml;utf8,");
/* Series-specific category colors — used in §4 schedule type tags & §3 spotlight */
--ttt-flag-main: #E07A3C;
--ttt-flag-big: #4FB3C9;
--ttt-flag-hunt: #D9B777;
--ttt-flag-micro: #E0935C;
--ttt-flag-open: #D979A8;
--ttt-flag-special: #7DC97E;
--ttt-flag-satellite: #A88FD9;
--ttt-flag-daily: #C9C2B0;
/* Top-3 leaderboard plaque tones (§7.5 Path of Titans) */
--ttt-medal-aurum: var(--c-gold-400); /* 1st */
--ttt-medal-argentum: #B8B5A8; /* 2nd */
--ttt-medal-aes: var(--c-gold-600); /* 3rd */
/* Imagery anchor refs (per §19 brief) — informational */
--ttt-anchor-a: "ttt-ref-01-pedestal-helmet"; /* site backbone */
--ttt-anchor-b: "ttt-ref-02-series-banner"; /* series identity */
--ttt-anchor-c: "ttt-ref-03-main-event-iphone"; /* single-event poster */
}
/* TTT page chrome */
.ttt-page {
background: var(--ttt-page-bg);
color: var(--c-text);
font-family: var(--font-sans);
min-height: 100vh;
position: relative;
}
.ttt-page::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: var(--z-base);
background-image: var(--ttt-grain);
opacity: 0.45;
mix-blend-mode: overlay;
}
/* TTT-specific text treatments */
/* Engraved gold — metallic bronze gradient on letterforms.
Use for headlines, GTD numerals. NEVER on body copy. */
.ttt-engrave {
background: linear-gradient(180deg, var(--c-gold-300) 0%, var(--c-gold-500) 55%, var(--c-gold-700) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
/* Stone-cracked title — bigger headlines (TTT / MAIN EVENT etc.).
In real prototype this is paired with crack-texture overlay image. */
.ttt-stone-title {
font-family: var(--font-display);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-display);
color: var(--c-ivory-100);
text-shadow:
0 0 1px var(--c-gold-700),
0 4px 20px rgba(0, 0, 0, 0.6);
}
/* TTT card variant — overrides foundation .card with stronger frame.
Use when you want the "石板雕刻" feel rather than generic surface. */
.card.card--ttt {
background: linear-gradient(180deg, var(--c-stone-800), var(--c-stone-900));
border-color: var(--c-line);
}
.card.card--ttt::before {
inset: 4px;
border-color: var(--c-line-dim);
}
/* TTT-specific motif tag — used on type chips in schedule */
.ttt-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: var(--r-xs);
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid var(--c-line-dim);
color: var(--c-ivory-300);
}
.ttt-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ttt-flag-default, var(--c-gold-500));
}
.ttt-tag[data-flag="main"]::before { background: var(--ttt-flag-main); }
.ttt-tag[data-flag="big"]::before { background: var(--ttt-flag-big); }
.ttt-tag[data-flag="hunt"]::before { background: var(--ttt-flag-hunt); }
.ttt-tag[data-flag="micro"]::before { background: var(--ttt-flag-micro); }
.ttt-tag[data-flag="open"]::before { background: var(--ttt-flag-open); }
.ttt-tag[data-flag="special"]::before { background: var(--ttt-flag-special); }
.ttt-tag[data-flag="satellite"]::before { background: var(--ttt-flag-satellite); }
.ttt-tag[data-flag="daily"]::before { background: var(--ttt-flag-daily); }
/* TTT-only motion — laurel-rotate (used on §1 hero ornament).
Intentionally ambient (0.5deg) per brief §8 motion rules. */
@keyframes ttt-laurel-ambient {
0%, 100% { transform: rotate(-0.5deg); }
50% { transform: rotate(0.5deg); }
}
.ttt-ambient-rotate {
animation: ttt-laurel-ambient 8s ease-in-out infinite;
}
/* Torch flicker — irregular flame movement.
Use SPARINGLY (one corner brazier max, not pulsing buttons). */
@keyframes ttt-torch-flicker {
0%, 100% { opacity: 0.85; filter: brightness(1.0); }
17% { opacity: 0.92; filter: brightness(1.08); }
31% { opacity: 0.78; filter: brightness(0.94); }
53% { opacity: 0.88; filter: brightness(1.04); }
72% { opacity: 0.74; filter: brightness(0.90); }
88% { opacity: 0.96; filter: brightness(1.12); }
}
.ttt-flicker {
animation: ttt-torch-flicker 4.7s ease-in-out infinite;
}
/* Upward gold flow — §7.5 Path of Titans signature */
.ttt-rising-glow {
position: relative;
}
.ttt-rising-glow::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 50% 110%, rgba(201, 163, 95, 0.10) 0%, transparent 55%);
}
/* Placeholder slot — for AI-generated artwork that's not in yet.
Slap this on any spot. */
.ttt-ph {
position: relative;
overflow: hidden;
background: var(--c-stone-700);
border: 1px solid var(--c-line-dim);
}
.ttt-ph::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(135deg, rgba(201, 163, 95, 0.05) 0 1px, transparent 1px 14px);
}
.ttt-ph__label {
position: absolute;
left: 12px;
top: 12px;
right: 12px;
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-gold-500);
}
.ttt-ph__caption {
position: absolute;
left: 12px;
bottom: 12px;
right: 12px;
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.1em;
color: var(--c-ivory-500);
}