/* ===================================================================== 好色教主 / 異世界布教録エロス — Design Tokens Rose-gold baroque · stained-glass cathedral · ornate gacha brand Base + semantic CSS custom properties. Fonts via Google Fonts. ===================================================================== */ /* ----- Webfonts ------------------------------------------------------ Display logo art lives as image assets (assets/logo_*). These families approximate the brand's elegant Ming + engraved-Roman feel. Noto Serif/Sans TC -> Traditional Chinese Ming + Gothic Cinzel -> engraved Roman caps (PROJECT EROS wordmark feel) Cormorant Garamond -> elegant Latin accent / numerals NOTE: fonts are loaded NON-render-blocking from index.html ( with a media swap) so the page paints immediately with the system-font fallbacks below even if Google Fonts is slow or unreachable. Do not re-add an @import here — a CSS @import is render-blocking and white-screens the page when the font CDN hangs. --------------------------------------------------------------------- */ :root { /* ---------- Neutrals / surfaces (warm ivory → blush) ---------- */ --ivory: #FCF6EF; /* page base, light */ --rose-mist: #F8E8EC; /* soft section wash */ --blush: #F2D6DE; /* tinted panels */ --paper: #FFFBF7; /* card surface */ --paper-warm: #FBF1E9; /* alt card surface */ /* ---------- Rose / magenta (primary brand gradient) ---------- */ --rose-100: #F8CBD8; --rose-300: #EE89A8; --rose-400: #E86C92; --rose-500: #E0517E; /* PRIMARY rose */ --rose-600: #D03A69; --rose-700: #C12C5C; --wine-800: #8E1F47; --wine-900: #5E1331; /* deepest wine */ --wine-950: #3D0C20; /* ---------- Gold (filigree / ornament / borders) ---------- */ --gold-100: #F6E7C2; --gold-200: #EFD9A4; --gold-400: #D9B86A; --gold-500: #C9A24B; /* PRIMARY gold */ --gold-600: #B68A36; --gold-700: #99702A; /* ---------- Ink / text (warm dark plum) ---------- */ --ink-900: #3A1F2B; /* primary text on light */ --ink-700: #5C3B47; /* secondary text */ --ink-500: #8A6A74; /* muted / captions */ --ink-300: #B79CA5; /* disabled / hairline-on-light */ --on-dark: #FBEEF1; /* text on wine sections */ --on-dark-mut: #D9B7C2; /* muted text on wine */ /* ---------- Accent ---------- */ --crimson: #C8324F; /* highlight words (反逆 / R18 / urgent) */ --halo-gold: #F4D98B; /* glow / spark accents */ /* ---------- Signature gradients ---------- */ --grad-rose: linear-gradient(180deg, #F184A4 0%, #D83C6B 52%, #9C2350 100%); --grad-rose-h: linear-gradient(110deg, #EE6E94 0%, #C12C5C 55%, #8E1F47 100%); --grad-gold: linear-gradient(180deg, #F6E7C2 0%, #D9B86A 46%, #A67C2E 100%); --grad-gold-line: linear-gradient(90deg, transparent, var(--gold-500) 18%, var(--gold-200) 50%, var(--gold-500) 82%, transparent); --grad-wine: linear-gradient(160deg, #6B1A3C 0%, #46112A 55%, #2C0A1B 100%); --grad-ivory: linear-gradient(180deg, #FFFBF7 0%, #F8E8EC 100%); /* ---------- Elevation / shadow ---------- */ --sh-card: 0 18px 44px -22px rgba(94, 19, 49, .42); --sh-soft: 0 8px 24px -12px rgba(94, 19, 49, .30); --sh-pop: 0 26px 70px -28px rgba(94, 19, 49, .58); --sh-gold-glow: 0 0 0 1px rgba(201,162,75,.55), 0 10px 30px -10px rgba(201,162,75,.45); --sh-rose-glow: 0 12px 38px -10px rgba(216, 60, 107, .55); --inset-gold: inset 0 0 0 1px rgba(201,162,75,.6); /* ---------- Radii ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; /* ---------- Type families ---------- */ --font-display: "Noto Serif TC", "Songti TC", serif; /* Ming display */ --font-body: "Noto Sans TC", "PingFang TC", sans-serif; --font-latin-display: "Cinzel", serif; /* engraved caps */ --font-latin-accent: "Cormorant Garamond", serif; /* elegant accent */ /* ---------- Fluid type scale ---------- */ --fs-display: clamp(2.6rem, 6vw, 5rem); --fs-h1: clamp(2.0rem, 4.2vw, 3.4rem); --fs-h2: clamp(1.5rem, 3vw, 2.3rem); --fs-h3: clamp(1.15rem, 1.8vw, 1.45rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.78; --ls-caps: 0.22em; /* engraved-caps tracking */ --ls-wide: 0.08em; } /* ===================================================================== Semantic type roles — apply as classes or compose into elements ===================================================================== */ .t-display { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: .01em; color: var(--wine-800); } .t-h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--ink-900); } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--ink-900); } .t-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink-900); } .t-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-700); } .t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); } .t-cap { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--ink-500); } /* Engraved Roman caps — section eyebrows, Latin labels (EROS, PROJECT) */ .t-eyebrow { font-family: var(--font-latin-display); font-weight: 700; font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gold-600); } .t-accent { font-family: var(--font-latin-accent); font-style: italic; color: var(--rose-700); } /* Gradient ink treatment used by the logotype / display headings */ .ink-rose-grad { background: var(--grad-rose); -webkit-background-clip: text; background-clip: text; color: transparent; } .ink-gold-grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }