/* Smastar — Coming Soon LP Tokens inherited from the Smastar Design System (SmastarTokens.swift): 4 time-of-day palettes, spacing, radii, motion. Web-only marketing layer. Fonts: Cormorant Garamond (EN display) + Noto Serif JP (和文) + system sans (EN body). */ /* ---------- Reset ---------- */ *, *::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%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ---------- Fonts ---------- */ :root { --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-jp: 'Noto Serif JP', 'Hiragino Mincho ProN', serif; --font-sans: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Spacing (SmastarTokens.Spacing, px) */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px; --sp-3xl: 48px; /* Radii (SmastarTokens.CornerRadius) */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; /* Motion */ --motion-slow: .42s; --motion-med: .24s; --container: 1100px; } /* ---------- Palettes (SmastarTokens) ---------- */ [data-palette="morning"] { --bg:#FFF4E2; --card:#FFFDF7; --border:#EAD9C0; --text:#3D2C1E; --text-subtle:#8A6A4A; --text-faint:#B89C7E; --accent:#F0762E; --accent-text:#FFFDF7; --overlay:#F5E8D2; --accent-tint:rgba(240,118,46,.12); } [data-palette="day"] { --bg:#FFFBEF; --card:#FFFEFA; --border:#EDE4C8; --text:#33301F; --text-subtle:#7E7044; --text-faint:#B0A57E; --accent:#E8A325; --accent-text:#33301F; --overlay:#F7F0DA; --accent-tint:rgba(232,163,37,.12); } [data-palette="evening"] { --bg:#FFE9D6; --card:#FFF6EC; --border:#F0D2B8; --text:#46251A; --text-subtle:#9A5A36; --text-faint:#C08F6E; --accent:#E25822; --accent-text:#FFF6EC; --overlay:#F9E2CD; --accent-tint:rgba(226,88,34,.12); } [data-palette="night"] { --bg:#3B3550; --card:#4A4363; --border:#5C5478; --text:#F5EFE6; --text-subtle:#BDB2D6; --text-faint:#8A7FA8; --accent:#F2B05E; --accent-text:#3B3550; --overlay:#534B6E; --accent-tint:rgba(242,176,94,.14); } /* Fallback before JS sets a palette */ :root:not([data-palette]) { --bg:#FFFBEF; --card:#FFFEFA; --border:#EDE4C8; --text:#33301F; --text-subtle:#7E7044; --text-faint:#B0A57E; --accent:#E8A325; --accent-text:#33301F; --overlay:#F7F0DA; --accent-tint:rgba(232,163,37,.12); } /* ---------- Base ---------- */ body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background var(--motion-slow) ease, color var(--motion-slow) ease; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-xl); } /* Bilingual visibility (data-lang on ) */ [data-lang="en"] .ja { display: none !important; } [data-lang="ja"] .en { display: none !important; } .ja { font-family: var(--font-jp); } /* JP headings (incl. wrapper-block .ja on legal pages) use the JP serif, not the EN display serif. */ .ja :is(h1, h2, h3, h4) { font-family: var(--font-jp); } /* Typography helpers */ .eyebrow { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-lg); } .eyebrow .ja { letter-spacing: .12em; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; } h1 .ja, h2 .ja, h3 .ja { font-weight: 600; line-height: 1.35; letter-spacing: .01em; } .section-title { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem); color: var(--text); margin-bottom: var(--sp-xl); max-width: 22ch; } .body { font-size: clamp(1rem, .96rem + .2vw, 1.12rem); color: var(--text-subtle); max-width: 60ch; } .body .ja { color: var(--text-subtle); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; } .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: .01em; color: var(--text); } /* Lang toggle */ .lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-full); overflow: hidden; background: var(--card); } .lang-toggle button { font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .04em; padding: 6px 14px; color: var(--text-faint); transition: color var(--motion-med), background var(--motion-med); } .lang-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); } /* ---------- Sections ---------- */ section { padding: clamp(56px, 8vw, 110px) 0; } .band { border-top: 1px solid var(--border); } .band--soft { background: var(--overlay); } /* Hero */ .hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(56px, 9vw, 120px); text-align: left; } .hero-clock { display: flex; align-items: baseline; gap: var(--sp-md); margin-bottom: var(--sp-2xl); color: var(--text); } .hero-clock time { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 1.5rem + 9vw, 6.5rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .hero-clock .palette-name { font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); padding-bottom: .6em; } .hero-title { font-size: clamp(2.4rem, 1.2rem + 5.4vw, 4.6rem); color: var(--text); max-width: 16ch; margin-bottom: var(--sp-xl); font-weight: 500; } .hero-title .ja { font-weight: 600; } .hero-sub { font-size: clamp(1.12rem, 1rem + .7vw, 1.5rem); color: var(--text-subtle); max-width: 40ch; font-family: var(--font-display); font-weight: 500; } .hero-sub .ja { font-family: var(--font-jp); font-weight: 400; } .hero-coming { margin-top: var(--sp-2xl); display: inline-flex; align-items: center; gap: var(--sp-sm); font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } .hero-coming::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hero-coming .ja { text-transform: none; letter-spacing: .06em; } /* Two-column contrast ([2] The shift) */ .contrast-grid { display: grid; gap: var(--sp-xl); margin-top: var(--sp-2xl); } .contrast-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-2xl); } .contrast-card .tag { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-md); display: block; } .contrast-card.is-forward { border-color: var(--accent); box-shadow: 0 1px 0 var(--accent-tint), 0 0 0 1px var(--accent-tint); } .contrast-card.is-forward .tag { color: var(--accent); } .contrast-card h3 { font-size: 1.4rem; margin-bottom: var(--sp-sm); } /* Three chips ([3],[4]) */ .chip-row { display: grid; gap: var(--sp-lg); margin-top: var(--sp-2xl); } .chip { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-xl); } .chip .chip-key { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--accent); margin-bottom: var(--sp-xs); } .chip .chip-key .ja { font-family: var(--font-jp); } .chip .chip-label { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .chip .chip-label .ja { letter-spacing: .06em; } /* Editorial Dawn — 4 swatches ([5]) */ .swatch-row { display: grid; gap: var(--sp-lg); margin-top: var(--sp-2xl); } .swatch { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); } .swatch .sw-band { height: 120px; display: flex; align-items: flex-end; padding: var(--sp-md); position: relative; } .swatch .sw-dot { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.18); } .swatch .sw-meta { padding: var(--sp-md) var(--sp-lg) var(--sp-lg); background: var(--card); } .swatch .sw-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--text); } .swatch .sw-name .ja { font-family: var(--font-jp); } .swatch .sw-hours { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .1em; color: var(--text-faint); } .sw-morning { background:#FFF4E2; } .sw-morning .sw-dot { background:#F0762E; } .sw-day { background:#FFFBEF; } .sw-day .sw-dot { background:#E8A325; } .sw-evening { background:#FFE9D6; } .sw-evening .sw-dot { background:#E25822; } .sw-night { background:#3B3550; } .sw-night .sw-dot { background:#F2B05E; } /* Private by design ([6]) */ .privacy-band { text-align: left; } .privacy-band .section-title { max-width: 18ch; } .privacy-band .body { max-width: 52ch; } /* Footer */ .site-footer { border-top: 1px solid var(--border); padding: var(--sp-3xl) 0; background: var(--overlay); } .site-footer .container { display: flex; flex-wrap: wrap; gap: var(--sp-xl); align-items: center; justify-content: space-between; } .footer-tagline { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-subtle); } .footer-tagline .ja { font-family: var(--font-jp); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-lg); font-family: var(--font-sans); font-size: .85rem; color: var(--text-subtle); } .footer-links a { border-bottom: 1px solid transparent; transition: border-color var(--motion-med); } .footer-links a:hover { border-color: var(--accent); } /* ---------- Legal pages ---------- */ .legal { padding: clamp(48px, 7vw, 96px) 0 var(--sp-3xl); } .legal .container { max-width: 760px; } .legal h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin-bottom: var(--sp-sm); } .legal .legal-meta { font-family: var(--font-sans); font-size: .82rem; color: var(--text-faint); margin-bottom: var(--sp-2xl); } .legal h2 { font-size: 1.5rem; margin-top: var(--sp-2xl); margin-bottom: var(--sp-sm); color: var(--text); } .legal h3 { font-size: 1.15rem; font-weight: 600; margin-top: var(--sp-xl); margin-bottom: var(--sp-xs); color: var(--text); font-family: var(--font-sans); } .legal h3.ja { font-family: var(--font-jp); } .legal p, .legal li { font-size: 1rem; color: var(--text-subtle); margin-bottom: var(--sp-md); } .legal p.ja, .legal li.ja { font-family: var(--font-jp); } .legal ul { padding-left: 1.3em; margin-bottom: var(--sp-md); } .legal a { color: var(--accent); border-bottom: 1px solid var(--accent-tint); } .legal .back { display: inline-block; margin-top: var(--sp-2xl); font-family: var(--font-sans); font-size: .85rem; color: var(--text-subtle); } .legal .back:hover { color: var(--accent); } /* ---------- Responsive ---------- */ @media (min-width: 720px) { .contrast-grid { grid-template-columns: 1fr 1fr; } .chip-row { grid-template-columns: repeat(3, 1fr); } .swatch-row { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 980px) { .hero { padding-top: clamp(72px, 7vw, 120px); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }