/* ============================================================ ATMOTECT — Home（モバイルファースト：奥へ降りて、覚める） signature: スクロール進度 → --awaken(0..1)。降りるほど光が満ち、 要素が立ち現れる。GPU ループ無し・opacity/transform 主体で 60fps。 375–390px で設計 → デスクトップは適応。 ============================================================ */ /* ── 覚醒の変数：JS がスクロールで更新。JS 無しは中間の光で成立させる ── */ :root { --awaken: 0; } .no-js { --awaken: 0.62; } /* ── Theme: 薄明の茶室（墨地／光は --awaken で満ちる） ───────── 地は無彩の墨。唯一の有彩色は朱の落款一点。テキストは終始かすかに明るい。 */ html { background: oklch(0.145 0 0); } body { background: transparent; --paper: oklch(0.275 0 0); --surface: oklch(0.335 0 0); --ink: oklch(0.965 0 0); --ink-soft: oklch(0.850 0 0); --muted: oklch(0.750 0 0); --faint: oklch(0.630 0 0); --line: oklch(0.400 0 0); --line-strong: oklch(0.500 0 0); } /* 暗い茶室地ではフォーカスリングの朱を持ち上げてコントラストを確保 */ :focus-visible { outline-color: var(--shu-lift); } /* ── Shell ─────────────────────────────────────────────── */ .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } /* 英語ページ（/en）：本文の欧文は Archivo（骨格）。見出しの .mincho は Shippori のまま（魂）。 :lang(en) は EN ページの でのみ効き、日本語ページには影響しない。 */ html:lang(en) body { font-family: var(--font-latin); } /* ── 舞台：奥（下）から夜明けが満ちる。3層すべて opacity 駆動＝コンポジタのみ ── */ .stage { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict; } .stage > div { position: absolute; inset: 0; } .stage-night { background: oklch(0.145 0 0); } /* 中間色を持ち上げ：茶室全体がほのかに明るむ */ .stage-lift { background: oklch(0.315 0 0); opacity: calc(var(--awaken) * 0.72); } /* 光の暈：奥（画面下）から湧き、右上に夜明けの気配 */ .stage-glow { background: radial-gradient(135% 82% at 50% 122%, oklch(0.70 0.018 68 / 0.62) 0%, oklch(0.5 0.01 60 / 0.18) 38%, transparent 62%), radial-gradient(90% 62% at 74% 6%, oklch(0.64 0 0 / 0.30) 0%, transparent 58%); opacity: var(--awaken); } /* ── フィルムグレイン（作家的な物質感・極薄） ───────────── */ .grain { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; opacity: 0.05; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* ── Logo mark（朱の落款） ─────────────────────────────── */ .mark { display: inline-block; fill: var(--shu-lift); } /* ── Header（静か・透過。罫はスクロールで現れる） ────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); padding-top: env(safe-area-inset-top); background: color-mix(in oklch, oklch(0.145 0 0) 42%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: var(--hair) solid transparent; transition: border-color var(--dur-2) var(--ease-out-quart), background-color var(--dur-2) var(--ease-out-quart); } .site-header[data-scrolled="true"] { border-bottom-color: var(--line); } .site-header .shell { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); } .brand .mark { width: 26px; height: 26px; } /* ワードマーク＝アウトライン化した SVG（Nimbus Sans＝Helvetica メトリック）。色は currentColor 継承。 viewBox 比 718.5:80.4 ≈ 8.94:1 → height に対し width を明示（inline SVG の auto 幅は不安定なため） */ .brand .wordmark { height: 13px; width: 116px; } .header-meta { display: flex; align-items: center; gap: var(--space-5); } .header-meta .label { font-size: var(--text-xs); letter-spacing: var(--track-label); color: var(--muted); white-space: nowrap; } .header-meta .lang { font-family: var(--font-latin); font-size: var(--text-xs); letter-spacing: var(--track-label); color: var(--ink-soft); min-height: 44px; display: inline-flex; align-items: center; } .header-meta .lang:hover { color: var(--ink); } /* モバイルでも文脈（京都・予約制）は残す。極小幅のみ間隔を詰める */ @media (max-width: 400px) { .header-meta { gap: var(--space-4); } .header-meta .label { letter-spacing: 0.06em; } } /* ── Scene（各 ~100svh・上から下へ降下＝覚醒が進む） ─────── */ .scene { position: relative; z-index: 1; min-height: 100svh; display: grid; align-content: center; padding-inline: var(--pad-x); padding-block: clamp(var(--space-9), 16vh, var(--space-11)); } .scene-inner { width: 100%; max-width: 40ch; margin-inline: auto; } @media (min-width: 720px) { .scene-inner { max-width: 52ch; } } /* 共通の型（明朝＝魂 / ゴシック＝骨格 は base の .mincho を利用） */ .scene-eyebrow { font-family: var(--font-latin); font-size: var(--text-xs); letter-spacing: var(--track-label); color: var(--muted); display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; } .scene-eyebrow::before { content: ""; width: 26px; height: var(--hair); background: var(--line-strong); flex: none; } .scene-title { font-weight: 600; font-size: var(--text-display); line-height: 1.16; letter-spacing: var(--track-mincho); color: var(--ink); } .scene-lead { font-weight: 600; font-size: var(--text-head); line-height: var(--lh-head); letter-spacing: var(--track-mincho); color: var(--ink); } .scene-sub { font-weight: 500; font-size: var(--text-title); line-height: var(--lh-head); color: var(--ink-soft); } .scene-body { font-size: var(--text-lead); line-height: var(--lh-body); color: var(--muted); max-width: var(--measure); } /* ── 0 · にじり口（最も暗い・光は --awaken=0 付近） ──────── */ .threshold-scene { text-align: left; } .seal-lead { width: 52px; height: 52px; margin-bottom: var(--space-6); fill: var(--shu-lift); } .threshold-scene .eyebrow { font-family: var(--font-latin); font-size: var(--text-xs); letter-spacing: var(--track-caps); color: var(--muted); display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .threshold-scene .eyebrow::before { content: ""; width: 26px; height: var(--hair); background: var(--line-strong); } .threshold-title { font-weight: 600; font-size: var(--text-display); line-height: 1.2; letter-spacing: var(--track-mincho); color: var(--ink); } .threshold-note { margin-top: var(--space-6); font-size: var(--text-body); color: var(--faint); letter-spacing: 0.02em; } /* scroll cue（下への微かな誘導・タップ標的 ≥44px） */ .cue { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + var(--space-6)); display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); min-height: 44px; color: var(--muted); opacity: calc(1 - var(--awaken) * 12); /* 降り始めると静かに消える＝常時演出にしない */ transition: opacity 220ms linear; } .no-js .cue { opacity: 1; } .cue-label { font-family: var(--font-mincho); font-size: var(--text-sm); letter-spacing: 0.3em; text-indent: 0.3em; } .cue-mark { width: 12px; height: 12px; border-right: var(--hair) solid currentColor; border-bottom: var(--hair) solid currentColor; transform: rotate(45deg); } .cue:hover { color: var(--ink-soft); } @media (prefers-reduced-motion: no-preference) { .cue-mark { animation: cue-bob 2.4s var(--ease-out-quart) infinite; } } @keyframes cue-bob { 0%,100% { transform: rotate(45deg) translate(-1px,-1px); opacity: .6; } 50% { transform: rotate(45deg) translate(2px,2px); opacity: 1; } } /* ── 1 · 火を入れる（案B：図は置かず mincho 見出しのみ。朱は落款/CTAに温存） ── */ /* ── 2 · 移ろいを観る（ブランドの核） ─────────────────────── */ .drift .scene-sub { margin-top: var(--space-4); } .drift .scene-body { margin-top: var(--space-6); } /* ── 3 · 三つの軸（カードにしない・降下しながら3拍） ───────── */ .axes .scene-eyebrow { margin-bottom: var(--space-7); } .axis { display: grid; grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-7); border-top: var(--hair) solid var(--line); } .axis:last-child { border-bottom: var(--hair) solid var(--line); } .axis .k { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; } .axis .k .name { font-weight: 600; font-size: var(--text-head); color: var(--ink); white-space: nowrap; } .axis .k .en { font-family: var(--font-latin); font-size: var(--text-xs); letter-spacing: var(--track-label); color: var(--muted); white-space: nowrap; } .axis .d { font-size: var(--text-body); line-height: var(--lh-body); color: var(--muted); max-width: var(--measure); margin-top: var(--space-2); } @media (min-width: 720px) { .axis { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); gap: var(--space-5) var(--space-8); align-items: baseline; padding-block: var(--space-8); } .axis .d { font-size: var(--text-lead); margin-top: 0; } } /* ── 4 · 覚醒（光の頂点・縦書きの詩片をモバイル流に復活） ──── */ .awakening { text-align: center; } .awaken-inner { display: grid; justify-items: center; gap: var(--space-7); } .awakening .scene-eyebrow { justify-content: center; } .awakening .scene-lead { text-align: center; } .vpoem { writing-mode: vertical-rl; text-orientation: upright; font-weight: 500; font-size: clamp(1.05rem, 0.9rem + 1.2vw, 1.4rem); letter-spacing: 0.36em; line-height: 1.05; color: var(--ink-soft); max-height: 62svh; margin-inline: auto; padding-block: var(--space-4); } /* ── 5 · 結び／招待 ────────────────────────────────────── */ .invitation { text-align: left; } .invite-line { font-weight: 500; font-size: var(--text-head); color: var(--ink); letter-spacing: var(--track-mincho); } .invite-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--muted); letter-spacing: 0.04em; } /* にじり口＝敷居をまたぐ、を「上下の罫（敷居）で挟んだ全幅バンド」で構造的に表現。 角括弧（HUD/流用感）を廃し、朱は落款一点、タッチに :active で応える。 */ .enter { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 60px; margin-top: var(--space-8); padding-block: var(--space-5); padding-inline: 2px; border-top: var(--hair) solid var(--line-strong); border-bottom: var(--hair) solid var(--line-strong); color: var(--ink); transition: background-color var(--dur-2) var(--ease-out-quart); } .enter-seal { width: 22px; height: 22px; fill: var(--shu-lift); flex: none; } /* 唯一の有彩色 */ .enter-label { font-size: var(--text-title); font-weight: 500; letter-spacing: var(--track-mincho); } .enter-arrow { margin-left: auto; color: var(--muted); transition: transform var(--dur-2) var(--ease-out-expo); } .enter:active { background: color-mix(in oklch, var(--ink) 7%, transparent); } .enter:active .enter-arrow { transform: translateX(4px); } @media (hover: hover) { .enter:hover { background: color-mix(in oklch, var(--ink) 5%, transparent); } .enter:hover .enter-arrow { transform: translateX(4px); } } @media (min-width: 720px) { .enter { display: inline-flex; width: auto; padding-inline: var(--space-6); } } /* 予約準備中：死んだ # を置かず、非対話の静かな状態で示す */ .enter--soon { cursor: default; } .enter--soon .enter-label { color: var(--ink-soft); } .enter--soon:hover, .enter--soon:active { background: transparent; } .enter-status { margin-left: auto; font-size: var(--text-xs); letter-spacing: var(--track-label); color: var(--muted); } /* ── Footer（結びの延長・舞台の上に静かに置く） ──────────── */ .site-footer { position: relative; z-index: 1; border-top: var(--hair) solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .site-footer .shell { padding-block: var(--space-9); } .footer-grid { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); } .footer-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); } .footer-brand .mark { width: 24px; height: 24px; } .footer-brand .wordmark { height: 12px; width: 107px; } /* 欧文は Archivo・和文は Zen Kaku へ字ごとフォールバック */ .footer-meta { font-family: var(--font-latin); color: var(--muted); font-size: var(--text-sm); line-height: 1.9; } .footer-meta a { display: inline-flex; align-items: center; min-height: 44px; } /* タップ標的 ≥44px */ .footer-meta a:hover { color: var(--ink); } @media (min-width: 720px) { .footer-grid { flex-direction: row; align-items: flex-end; justify-content: space-between; } .footer-meta { text-align: right; } } /* ── reveal on scroll（IntersectionObserver で .in・reduced-motion 安全） ── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-4) var(--ease-out-expo), transform var(--dur-4) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 90ms); } .reveal.in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cue-mark { animation: none; } .enter, .enter-arrow { transition: none; } }