/* ============================================================ PERIC LEE — DESIGN SYSTEM TOKENS Black & gold at rest. Accent shifts subtly per cultural world. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Noto+Serif+TC:wght@300;400;500;600;700&family=Raleway:wght@300;400;500&display=swap'); :root { /* ---------- BASE COLOR PALETTE (default: English / Elvis world) ---------- */ /* Background — never changes */ --bg-deep: #0A0A0A; /* pure stage black */ --bg-elev: #111111; /* deep charcoal — cards, player */ --bg-velvet: #1A1410; /* warm charcoal for hover wells */ /* Foreground */ --fg-ivory: #F0EBE0; /* warm ivory — primary text */ --fg-soft: #C9C2B5; /* secondary copy */ --fg-mute: #8C8678; /* tertiary / metadata */ --fg-quiet: #5A554B; /* hairline hints */ /* Accent (default: Warm Aged Gold — Pantone 872C matte) */ --accent: #B8962E; --accent-bright: #D4B14A; /* highlight / hover */ --accent-deep: #8A6E1F; /* pressed / shadow */ --accent-tint-08: rgba(184, 150, 46, 0.08); --accent-tint-15: rgba(184, 150, 46, 0.15); --accent-tint-30: rgba(184, 150, 46, 0.30); /* Hairlines */ --rule-gold: rgba(184, 150, 46, 0.45); --rule-soft: rgba(240, 235, 224, 0.10); /* ---------- TIMING ---------- */ --t-slow: 1500ms; /* world-shifts: accent transitions */ --t-medium: 600ms; --t-quick: 240ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---------- SPACING (loose, classical) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- TYPOGRAPHY ---------- */ --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-body: 'EB Garamond', 'Garamond', Georgia, serif; --font-label: 'Raleway', 'Helvetica Neue', sans-serif; --font-tc: 'Noto Serif TC', 'Songti TC', 'PingFang TC', serif; /* Type roles — based on spec */ --t-mark-en: clamp(40px, 5.2vw, 64px); /* "PERIC LEE" */ --t-mark-en-track: 0.20em; --t-mark-tc: clamp(22px, 2.9vw, 36px); /* "李偉" — ~55% of mark */ --t-h1: clamp(30px, 3.2vw, 40px); /* hero headline — calmer */ --t-h2: clamp(22px, 2.0vw, 26px); /* section headers */ --t-h3: 20px; --t-body: 18px; --t-body-lh: 1.85; --t-small: 15px; --t-label: 11px; --t-label-track: 0.18em; } /* ============================================================ ACCENT SHIFTS — "One Voice, Many Worlds" Apply data-world="cantonese|mandarin|english" on or section. The accent triplet morphs over 1.5s. Black stays constant. ============================================================ */ [data-world="cantonese"] { --accent: #C4756A; /* deep rose-gold, HK cinema era */ --accent-bright: #E0938A; --accent-deep: #8B3A3A; --accent-tint-08: rgba(196, 117, 106, 0.08); --accent-tint-15: rgba(196, 117, 106, 0.15); --accent-tint-30: rgba(196, 117, 106, 0.30); --rule-gold: rgba(196, 117, 106, 0.45); } [data-world="mandarin"] { --accent: #8FA8C8; /* soft silver-blue, contemplative */ --accent-bright: #B6C9E2; --accent-deep: #5E7595; --accent-tint-08: rgba(143, 168, 200, 0.08); --accent-tint-15: rgba(143, 168, 200, 0.15); --accent-tint-30: rgba(143, 168, 200, 0.30); --rule-gold: rgba(143, 168, 200, 0.45); } /* The accent transition itself — every accent-using element should listen */ :root, [data-world] { transition: color var(--t-slow) var(--ease), background-color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); } /* ============================================================ BASE ELEMENTS ============================================================ */ html, body { background: var(--bg-deep); color: var(--fg-ivory); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--t-body-lh); font-feature-settings: "lnum", "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Display / Mark ---------- */ .mark-en { font-family: var(--font-display); font-weight: 700; font-size: var(--t-mark-en); letter-spacing: var(--t-mark-en-track); text-transform: uppercase; color: var(--fg-ivory); line-height: 1; } .mark-tc { font-family: var(--font-tc); font-weight: 500; font-size: var(--t-mark-tc); letter-spacing: 0.2em; color: var(--fg-ivory); line-height: 1.1; } /* ---------- Headers ---------- */ h1, .h1 { font-family: var(--font-display); font-weight: 600; /* heavier so strokes don't go reedy at size */ font-size: var(--t-h1); letter-spacing: 0.002em; line-height: 1.2; color: var(--fg-ivory); margin: 0; } h2, .h2, .section-header { font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: var(--t-h2); letter-spacing: 0.002em; line-height: 1.3; color: var(--fg-ivory); margin: 0; } h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin: 0; } /* ---------- Body ---------- */ p, .p { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--fg-soft); text-wrap: pretty; margin: 0 0 1em 0; } .lede { font-family: var(--font-body); font-size: 21px; line-height: 1.7; color: var(--fg-ivory); font-style: italic; } .tc { /* any inline TC text */ font-family: var(--font-tc); font-weight: 400; } /* ---------- Labels ---------- */ .label, .eyebrow, small.label { font-family: var(--font-label); font-weight: 300; font-size: var(--t-label); letter-spacing: var(--t-label-track); text-transform: uppercase; color: var(--accent); } .label--mute { color: var(--fg-mute); } /* ---------- Hairlines / dividers ---------- */ .rule-gold { height: 1px; background: var(--rule-gold); border: 0; width: 60px; margin: var(--s-5) 0; } .rule-full { height: 1px; background: var(--rule-soft); border: 0; width: 100%; } /* ---------- Anchors ---------- */ a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease); } a:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); } /* ---------- Selection ---------- */ ::selection { background: var(--accent); color: var(--bg-deep); } /* ============================================================ PORTRAIT ORIENTATION — remove outer h-padding on desktop layout ============================================================ */ @media (orientation: portrait) { .press-grid { grid-template-columns: 1fr 1fr !important; } .mag-row-img { max-height: 260px !important; } .stage-viewport { padding-left: 0 !important; padding-right: 0 !important; } /* About hero — shorter image, tighter text so nothing overflows */ .about-hero-card { height: clamp(220px, 34vh, 360px) !important; } .about-hero-body { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 8px !important; } .about-hero-zh { font-size: 11px !important; line-height: 1.5 !important; } } /* ============================================================ MOBILE LAYOUT <768px ============================================================ */ @media (max-width: 767px) { .m-shell { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .m-topbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--rule-soft); } .m-brand-en { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.20em; color: var(--fg-ivory); } .m-brand-tc { font-family: var(--font-tc); font-size: 15px; color: var(--accent); } .m-content { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 24px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--rule-gold) transparent; } .m-content::-webkit-scrollbar { width: 1px; } .m-content::-webkit-scrollbar-thumb { background: var(--rule-gold); } .m-player { flex-shrink: 0; padding: 14px 24px; background: var(--bg-elev); border-top: 1px solid var(--rule-soft); } .m-botnav { flex-shrink: 0; display: flex; overflow-x: auto; background: var(--bg-elev); border-top: 1px solid var(--rule-soft); scrollbar-width: none; } .m-botnav::-webkit-scrollbar { display: none; } .m-nav-item { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0; padding: 0 4px; position: relative; text-decoration: none; border-bottom: none; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-mute); } .m-nav-item:hover { color: var(--fg-mute); border-bottom-color: transparent; } .m-nav-item.is-active { color: var(--fg-ivory); } .m-nav-item.is-active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--accent); } /* Home & About — full-bleed portrait with text overlay */ .panel-portrait-card { position: relative !important; display: block !important; margin: -24px !important; width: calc(100% + 48px) !important; height: calc(100% + 48px) !important; min-height: 0 !important; overflow: hidden !important; } .panel-portrait-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to top, rgba(10,10,10,0.95), transparent); pointer-events: none; z-index: 0; } .home-portrait, .about-portrait { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; align-items: unset !important; } .home-portrait img, .about-portrait img { width: 100% !important; height: 100% !important; aspect-ratio: unset !important; min-height: unset !important; object-fit: cover !important; } .home-portrait img { height: 75% !important; object-position: 65% center !important; } .home-text, .about-text { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; box-sizing: border-box !important; padding: 24px !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; flex: none !important; } /* About: taller scroll area for enriched content */ .panel-portrait-card .about-text { max-height: 65% !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: var(--rule-gold) transparent !important; background: linear-gradient(to bottom, transparent 0%, rgba(10,10,10,0.75) 30%) !important; } .panel-portrait-card .about-text::-webkit-scrollbar { width: 1px; } .panel-portrait-card .about-text::-webkit-scrollbar-thumb { background: var(--rule-gold); } /* Unlock height-constrained flex children inside panels */ .gold-scroll { overflow-y: visible !important; flex: none !important; height: auto !important; } .watch-frame video::-webkit-media-controls { display: none !important; } .watch-frame video { -webkit-appearance: none; } .repgrid { flex: none !important; } /* About mobile sticky: let the wrapper escape .m-content padding and allow the sticky hero to work without overflow clipping */ .m-content { overflow-x: hidden; } [data-screen-label="02 About"] { /* wrapper already uses margin: -24px to go full-bleed */ } [data-screen-label="02 About"] > div:first-child { /* sticky hero — no overflow hidden on parent */ overflow: visible; } }