/* ========================================================= SOPRA ACADEMY — Design tokens & 3 tonal themes Theme switching via [data-theme] on . ginza = 上質・銀座らしい洗練 (Mincho headings, gold) friendly= 親しみやすく温かい (rounded gothic, warm cream) trust = 信頼感・クリア (structured sans, cool navy-teal) ========================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, svg { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } :root { /* spacing scale */ --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; --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); /* sticky bar height for layout offsets */ --cta-bar-h: 76px; --ease: cubic-bezier(.22,.61,.36,1); --shadow-sm: 0 1px 2px rgba(20,30,28,.06), 0 2px 8px rgba(20,30,28,.05); --shadow-md: 0 6px 18px rgba(20,30,28,.08), 0 2px 6px rgba(20,30,28,.05); --shadow-lg: 0 24px 60px rgba(20,30,28,.14), 0 8px 20px rgba(20,30,28,.08); } /* ---------- THEME: ginza (default) ---------- */ :root, [data-theme="ginza"] { --bg: #F6EFE9; /* warm cream */ --surface: #FFFFFF; --surface-2: #F5EBE4; --ink: #33251F; /* warm espresso */ --ink-soft: #62524A; --ink-mute: #9B8B82; --line: #ECDFD5; --primary: #D9776A; /* SOPRA coral */ --primary-d: #B6564A; --primary-l: #FBE7E1; --accent: #C8995A; /* warm soft gold */ --accent-d: #9C7333; --accent-l: #F6ECD7; --radius-s: 6px; --radius-m: 10px; --radius-l: 16px; --radius-pill: 999px; --font-head: "Shippori Mincho", serif; --font-body: "Noto Sans JP", sans-serif; --font-accent: "Shippori Mincho", serif; --head-weight: 600; --head-spacing: .02em; --head-leading: 1.5; } /* ---------- THEME: friendly ---------- */ [data-theme="friendly"] { --bg: #FAF5EC; --surface: #FFFFFF; --surface-2: #FBF3E6; --ink: #322E27; --ink-soft: #5C554A; --ink-mute: #8C8377; --line: #ECE1CF; --primary: #3C8C80; --primary-d: #2C6B61; --primary-l: #E2F0ED; --accent: #E2974A; --accent-d: #C2772E; --accent-l: #FBEAD2; --radius-s: 12px; --radius-m: 18px; --radius-l: 28px; --radius-pill: 999px; --font-head: "Zen Maru Gothic", sans-serif; --font-body: "Zen Kaku Gothic New", sans-serif; --font-accent: "Zen Maru Gothic", sans-serif; --head-weight: 700; --head-spacing: .01em; --head-leading: 1.55; } /* ---------- THEME: trust ---------- */ [data-theme="trust"] { --bg: #EFF3F4; --surface: #FFFFFF; --surface-2: #F1F5F6; --ink: #142229; --ink-soft: #43545C; --ink-mute: #76858C; --line: #D6E0E2; --primary: #1A5E74; --primary-d: #114457; --primary-l: #E1EEF2; --accent: #D89A33; --accent-d: #AC7822; --accent-l: #F6EBD3; --radius-s: 4px; --radius-m: 8px; --radius-l: 12px; --radius-pill: 6px; --font-head: "Zen Kaku Gothic New", sans-serif; --font-body: "Noto Sans JP", sans-serif; --font-accent: "Zen Kaku Gothic New", sans-serif; --head-weight: 700; --head-spacing: .01em; --head-leading: 1.45; } /* ---------- base typography ---------- */ body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 400; line-height: 1.85; letter-spacing: .01em; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: var(--head-leading); letter-spacing: var(--head-spacing); color: var(--ink); text-wrap: balance; } .serif { font-family: var(--font-accent); } .en { font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: .04em; } [data-theme="friendly"] .en { font-family: "Fredoka", sans-serif; font-weight: 500; } [data-theme="trust"] .en { font-family: "Outfit", sans-serif; font-weight: 600; letter-spacing: .02em; } /* layout helpers */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 120px); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--primary); text-transform: uppercase; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } .eyebrow--center::after { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } .section-title { font-size: clamp(26px, 3.8vw, 40px); line-height: 1.4; margin-top: 16px; } .section-lead { margin-top: 18px; max-width: 56ch; color: var(--ink-soft); font-size: 16px; line-height: 2; } .text-center { text-align: center; } .text-center .section-lead { margin-inline: auto; } .text-center .eyebrow { justify-content: center; }