/* ============================================================ Joyatou · 常夜燈 — design system ============================================================ */ :root{ /* type */ --serif-jp: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', serif; --sans-jp: 'Noto Sans JP', system-ui, sans-serif; --serif-en: 'Fraunces', 'Times New Roman', serif; --sans-en: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* color — paper (default) */ --ink: oklch(0.18 0.012 250); --ink-soft: oklch(0.40 0.015 250); --ink-muted: oklch(0.62 0.012 250); --paper: oklch(0.985 0.004 85); --paper-2: oklch(0.965 0.006 85); --rule: oklch(0.88 0.008 250); --rule-soft: oklch(0.93 0.006 250); --accent: oklch(0.30 0.06 252); /* deep navy */ --glow: oklch(0.78 0.10 78); /* warm lamp */ --selection: oklch(0.92 0.04 78); /* layout */ --gutter: clamp(20px, 4vw, 64px); --max: 1320px; --nav-h: 64px; } /* dark theme override (set via [data-theme="dark"] on ) */ [data-theme="dark"]{ --ink: oklch(0.97 0.006 85); --ink-soft: oklch(0.78 0.012 85); --ink-muted: oklch(0.55 0.010 250); --paper: oklch(0.16 0.012 250); --paper-2: oklch(0.20 0.014 250); --rule: oklch(0.30 0.014 250); --rule-soft: oklch(0.24 0.012 250); --accent: oklch(0.78 0.08 240); --glow: oklch(0.85 0.10 78); } *,*::before,*::after{ box-sizing: border-box; } html, body{ margin:0; padding:0; background: var(--paper); color: var(--ink); font-family: var(--sans-en), var(--sans-jp); font-weight: 400; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection{ background: var(--selection); color: var(--ink); } a{ color: inherit; text-decoration: none; } img, svg{ display:block; max-width:100%; } /* ---------------------------------------------------------------- typography utilities ---------------------------------------------------------------- */ .t-mono{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .t-eyebrow{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); display:flex; align-items:center; gap: 12px; } .t-eyebrow::before{ content:""; width: 28px; height:1px; background: currentColor; display:inline-block; } .t-mincho{ font-family: var(--serif-jp); font-weight: 500; } .t-serif{ font-family: var(--serif-en); font-weight: 400; } .t-jp{ font-family: var(--sans-jp); } h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing: -0.005em; } /* ---------------------------------------------------------------- layout ---------------------------------------------------------------- */ .container{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .row{ display:flex; gap: 32px; } .stack{ display:flex; flex-direction: column; } .rule{ height:1px; background: var(--rule); border:0; margin:0; } .rule-soft{ height:1px; background: var(--rule-soft); border:0; margin:0; } /* ---------------------------------------------------------------- navigation ---------------------------------------------------------------- */ .nav{ position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--rule-soft); } .nav-inner{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h); display:flex; align-items:center; justify-content: space-between; gap: 32px; } .brand{ display:flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .brand svg.mark{ width: 28px; height: 28px; flex: 0 0 auto; display:block; color: var(--ink); } .brand .brand-text{ display:flex; flex-direction: column; gap: 4px; line-height: 1; } .brand .brand-text .jp{ font-family: var(--serif-jp); font-size: 15px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink); } .brand .brand-text .en{ font-family: var(--serif-en); font-size: 9px; font-weight: 400; letter-spacing: 0.34em; color: var(--ink-soft); } .nav-links{ display:flex; align-items: center; gap: 22px; font-family: var(--sans-en); font-size: 13px; font-weight: 500; } .nav-links a{ color: var(--ink-soft); transition: color .2s; } .nav-links a:hover{ color: var(--ink); } .nav-links .num{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-muted); margin-right: 6px; display: inline-block; } .nav-cta{ font-family: var(--sans-en); font-size: 12px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); transition: background .2s, color .2s; } .nav-cta:hover{ background: var(--ink); color: var(--paper); } /* ---------------------------------------------------------------- buttons ---------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap: 10px; font-family: var(--sans-en); font-size: 13px; font-weight: 500; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: transparent; cursor: pointer; transition: background .25s, color .25s, transform .25s; } .btn:hover{ background: var(--ink); color: var(--paper); } .btn .arrow{ display:inline-block; transition: transform .25s; } .btn:hover .arrow{ transform: translateX(3px); } .btn-solid{ background: var(--ink); color: var(--paper); } .btn-solid:hover{ background: var(--ink-soft); color: var(--paper); } /* ---------------------------------------------------------------- sections ---------------------------------------------------------------- */ .section{ padding: clamp(80px, 12vw, 160px) 0; border-top: 1px solid var(--rule-soft); } .section-head{ display:grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-bottom: clamp(48px, 7vw, 88px); align-items: baseline; } .section-head .meta{ display: flex; flex-direction: column; gap: 16px; } .section-head h2{ font-family: var(--serif-jp); font-size: clamp(28px, 3.5vw, 44px); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; } .section-head h2 .en{ display: block; font-family: var(--serif-en); font-style: italic; font-weight: 300; font-size: 0.55em; color: var(--ink-soft); margin-top: 8px; letter-spacing: 0.02em; } .section-num{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-muted); } /* ---------------------------------------------------------------- reveal animation (scroll-triggered) ---------------------------------------------------------------- */ .reveal{ opacity: 0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); } .reveal.in{ opacity: 1; transform: translateY(0); } .reveal-fast{ transition-duration: .6s; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition: none; } } /* ---------------------------------------------------------------- marker dot used through layout ---------------------------------------------------------------- */ .dot{ display:inline-block; width:6px; height:6px; background: var(--accent); border-radius: 1px; vertical-align: middle; } /* ---------------------------------------------------------------- footer ---------------------------------------------------------------- */ footer{ padding: 80px 0 32px; border-top: 1px solid var(--rule-soft); } .footer-inner{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; } .footer-brand{ font-family: var(--serif-en); font-size: 24px; line-height: 1.2; } .footer-brand .jp{ font-family: var(--serif-jp); font-size: 14px; letter-spacing: 0.34em; color: var(--ink-soft); display:block; margin-top: 12px; } .footer-col h4{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; font-weight: 500; } .footer-col a{ display: block; font-size: 13px; color: var(--ink-soft); padding: 4px 0; transition: color .2s; } .footer-col a:hover{ color: var(--ink); } .footer-bottom{ margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule-soft); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } /* ---------------------------------------------------------------- responsive ---------------------------------------------------------------- */ @media (max-width: 860px){ .section-head{ grid-template-columns: 1fr; gap: 24px; } .footer-inner{ grid-template-columns: 1fr 1fr; } .nav-links{ gap: 18px; } .nav-links a:not(.nav-cta){ display: none; } }