/* ============================================================
css/theme.css — デザイントークン(A案「招待状と完全統一」)
色・フォント・柄・角丸・罫線はすべてこのファイルに集約しています。
他のCSSにはHEX値もフォント名も書かれていないので、
このファイル1枚を差し替えるだけで、レイアウトを壊さずに
見た目のテーマを丸ごと変更できます。
(例: --bg-pattern を none にすれば方眼紙が消えて無地になります)
============================================================ */
:root {
/* --- 基本色 ------------------------------------------------ */
--ink: #1e3c70; /* 紺: 本文・見出し・罫線 */
--accent: #bd0f0f; /* 赤: 欧文見出し・カテゴリ・アクティブ */
--paper: #fdfcfa; /* ページ地色 */
--card: #ffffff; /* カード地 */
/* 派生色(半透明が必要なところ用。テーマ差し替え時はここも調整) */
/* 不透明度0.72。白カード(#ffffff)で4.82:1、方眼紙の地(#fdfcfa)で4.76:1 と、
WCAG 2.1 の本文基準 4.5:1 を両方で満たします(0.62 では 3.68:1 で不足) */
--ink-muted: rgba(30, 60, 112, 0.72);
--ink-faint: rgba(30, 60, 112, 0.28);
--accent-soft: rgba(189, 15, 15, 0.08);
--accent-ring: rgba(189, 15, 15, 0.35);
/* --- 方眼紙の柄 -------------------------------------------- */
--grid-color: rgba(189, 15, 15, 0.14);
--grid-size: 22px;
/* background 値そのもの。none にすれば無地になります */
--bg-pattern:
repeating-linear-gradient(0deg, var(--grid-color) 0, var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)),
repeating-linear-gradient(90deg, var(--grid-color) 0, var(--grid-color) 1px, transparent 1px, transparent var(--grid-size));
/* --- フォント ---------------------------------------------- */
--font-ja: "Noto Serif JP", serif;
--font-en: "Cormorant Garamond", "Noto Serif JP", serif;
--fs-base: 16px;
--lh-base: 1.9;
--tracking-ja: 0.04em;
--tracking-en: 0.14em;
--weight-normal: 400;
--weight-mid: 500;
/* --- モーション(SPEC §4.4)---------------------------------
すべての時間・距離はここに集約。0ms / 0px にすれば動きを止められる */
--motion-duration: 600ms; /* リブールの基準時間 */
--motion-duration-fast: 300ms; /* 短い動き */
--motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
--motion-rise: 14px; /* 立ち上がる距離 */
--motion-stagger: 70ms; /* 兄弟要素をずらす間隔 */
--motion-tab-out: 150ms; /* タブ切替: 出る側のフェード */
--motion-tab-in: 350ms; /* タブ切替: 入る側のフェード+ライズ */
--motion-gate-out: 400ms; /* パスコードゲートのフェードアウト */
--motion-sheet-in: 380ms; /* ボトムシートがせり上がる時間 */
--motion-sheet-out: 240ms; /* ボトムシートが降りる時間 */
--motion-lightbox-in: 200ms; /* 写真の拡大表示が出る時間 */
--motion-lightbox-out: 160ms; /* 写真の拡大表示が消える時間 */
--motion-photo-scale: 1.04; /* 写真の寄り(1 にすれば無効) */
--motion-gate-welcome: 400ms; /* 「ようこそ!」を見せている時間 */
--motion-poke: 150ms; /* タップされたときの小さな反応 */
--peek-pop-scale: 0.9; /* ぽよんと縮む量(1 で無効) */
--motion-pop: 550ms; /* にょきっと出る時間 */
--motion-pop-ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弾む出方 */
/* 扉のカバー演出(SPEC §4.4): 留まっている扉が、カードに被さられながら退く量。
動かすのは transform と opacity だけ(1 / 1 にすれば留まるだけになる) */
--cover-scale: 0.96;
--cover-opacity: 0.7;
/* --- 卓詳細のボトムシート ----------------------------------- */
--sheet-height: 82vh; /* 画面の何割を占めるか(75〜85%) */
--sheet-radius: 18px;
--sheet-bg: var(--card);
--sheet-border: var(--line);
--sheet-grip: var(--ink-faint);
--sheet-overlay-bg: rgba(20, 28, 48, 0.5);
--sheet-shadow: 0 -8px 30px rgba(30, 60, 112, 0.16);
--sheet-close-h: 54px; /* 「閉じる」ボタンの高さ(52px以上) */
/* 丸卓のシート図(SPEC §3.1)。名前を「山田 太郎 様」と1行で組むための寸法。
円を小さくして左右の名前の列を広げる。375px幅で列 112px(最長の名札 約107px)、
320px幅で 92px(入りきらない名前だけ姓と名の間で折れる)*/
--seat-chart-disc: 26%; /* 卓の円の直径(図の幅に対して)*/
--seat-chart-col-gap: 8px; /* 名前の列と円の間 */
--seat-chart-row-gap: 6px; /* 名札どうしの縦の間(名札の中心の間隔 = 名札の高さ + これ)*/
--seat-pad-y: 4px; /* 名札の内側の余白(ハイライトの枠と文字の間)*/
--seat-pad-x: 5px;
/* --- 写真の拡大表示(ライトボックス)------------------------- */
--lightbox-bg: rgba(20, 28, 48, 0.94); /* 暗幕。写真の色を邪魔しない紺寄りの黒 */
--lightbox-close-bg: var(--card); /* 暗幕の上なので、白地に紺文字で抜く */
--lightbox-close-fg: var(--ink);
--lightbox-close-h: 54px; /* 「閉じる」ボタンの高さ(52px以上) */
--lightbox-image-from: 0.98; /* 出るときの寄り(1 にすれば動かない) */
/* --- 「卓の一覧」の開閉ボタン ------------------------------- */
--list-toggle-bg: var(--card);
--list-toggle-fg: var(--ink);
--list-toggle-border: var(--line);
--list-toggle-accent: var(--accent);
--list-toggle-h: 54px;
--motion-list-in: 420ms; /* 一覧が開くときの時間 */
/* --- 掲示板・訪問カウンター --------------------------------- */
--field-radius: var(--radius-input);
--post-divider: var(--divider);
--post-name-fg: var(--ink);
--post-time-fg: var(--ink-muted);
/* 編集中の枠(どの書きこみを直しているか分かるよう、前後の書きこみと分ける) */
--post-edit-bg: var(--dish-voice-card-bg); /* 地: ふたりの一言の札と同じ淡い紺 */
--post-edit-border: var(--line); /* 線: 紺 */
--post-edit-gap: 28px; /* 枠と前後の書きこみの間 */
--post-edit-pad-y: 16px;
--post-edit-pad-x: 12px;
--post-edit-bleed: 12px; /* 枠をカードの余白へはみ出させる幅(入力欄を狭めない)*/
--visitor-fg: var(--ink-muted); /* 「あなたは n 人目」の1行(箱にはしない) */
--visitor-count-fg: var(--accent); /* 数字だけ赤の欧文 */
/* 節目の書きこみのお祝い(紙吹雪と帯)。招待状と同じ紺・赤・生成り */
--confetti-1: var(--ink);
--confetti-2: var(--accent);
--confetti-3: #efe4cd; /* 生成り(淡) */
--confetti-4: #d9c9a3; /* 生成り(濃)。白は紙の地色に埋もれるので使わない */
--confetti-count: 90; /* 紙片の枚数(20〜120に丸められます) */
--confetti-z: 40; /* タブバー(30)の上、ボトムシート(55)の下 */
--motion-confetti: 2800ms; /* 降りきるまでの時間(止めるときは data/site.js の milestone.enabled) */
/* お祝いの帯。エラーの赤(--error-fg = --accent)と見間違えないよう、
赤ではなく淡い金で組む(招待状の生成りと同系。華やかさは残す) */
--cheer-bg: #fbf3e2; /* 淡い金(地) */
--cheer-fg: var(--ink);
--cheer-border: #b8912f; /* 金(枠)。白地で 3.2:1 と、枠線として十分見える */
--peek-clearance: 146px; /* にょきっと出るふたりのぶんの余白(文字の直下まで)
吹き出しが3行になったぶん 118px から広げた。
実測(375×812・最下部): フッター文字下端〜吹き出し上端 約8px */
/* --- にょきっと登場するふたり(吹き出し・じゃんけんのバースト)--- */
--peek-bubble-radius: 16px; /* セリフの吹き出しの角丸(やわらかく) */
--peek-bubble-tracking: 0.02em; /* 和文の字間 */
--peek-tail-w: 18px; /* しっぽの幅 */
--peek-tail-h: 11px; /* しっぽの高さ(とがり具合) */
--peek-char-w: 96px; /* ふたりの絵1枚の幅(バーストはこの外縁を基準に置く) */
--peek-hand-bg: var(--card); /* 手の名前のバースト: 地色 */
--peek-hand-fg: var(--ink); /* 手の名前のバースト: 文字色 */
--peek-hand-edge: var(--ink); /* バーストの輪郭線(方眼紙の上でも形が読めるように) */
--peek-hand-edge-w: 1.5px; /* 輪郭線の太さ(0 で輪郭なし) */
--peek-hand-tilt: -6deg; /* バーストの傾き(0deg で水平。反対側では鏡像になる) */
--peek-hand-side: 1; /* バーストを出す側の既定: 1=新婦側(向かって右)/ -1=新郎側(向かって左)。ここ1行で反転できる */
--peek-hand-out: 16px; /* ふたりの絵の外縁より外に、バーストの中心をどれだけ出すか */
--peek-hand-bottom: 50%; /* バーストの高さ(ふたりの絵の高さに対する下端の位置)。頭〜肩のあたり */
--peek-hand-pop: 380ms; /* バーストが弾んで出る時間 */
/* 5タブでも折り返さない大きさ。いちばん長い「プロフィール」(6文字)が
タブ1枚(画面幅の1/5)に収まる上限で頭打ちにしています。
375px以上では 0.7rem = 11.2px、狭い画面では収まる大きさまで自動で下がります */
--tab-label-size: clamp(0.6rem, 3vw, 0.7rem);
--tab-label-tracking: 0.02em;
/* --- 罫線・角丸・影 ---------------------------------------- */
--line: var(--ink);
--line-soft: var(--ink-faint);
--border-width: 1px;
--radius-card: 0px;
--radius-input: 0px;
--radius-pill: 999px;
--card-shadow: none;
/* --- レイアウト -------------------------------------------- */
--content-max: 480px;
--page-gutter: 22px;
--card-pad-y: 40px;
--card-pad-x: 24px;
--card-gap: 28px;
--card-pad-compact: 20px;
--card-gap-compact: 14px;
--map-pad: 16px;
/* 会場図の縦横比。卓が2列なので少し横長にして初期表示に収める */
--map-aspect: 1 / 0.8;
--header-h: 52px;
--tabbar-h: 60px;
/* --- editorial レイアウト(雑誌の組み方)-----------------------
のときだけ使われるトークン。
classic は一切参照しないので、ここをいじっても既存の見た目は動きません。
見た目の本体は css/components.css 末尾の「editorial レイアウト」の節 */
/* 書体。ここに書いてあるのは「webフォントが来なかったときの受け皿」だけで、
"Noto Sans JP" / "Jost" を先頭に足すのは components.css の
:root.layout-editorial(= editorial のときだけ)。
webフォントの も js/layout.js が editorial のときだけ足す */
--font-head-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
--font-meta-en: "Helvetica Neue", "Hiragino Sans", Arial, sans-serif;
--section-gap: 56px; /* セクションどうしの間。容れ物の切れ目は罫線ではなく余白でつくる */
--band-pad-y: 32px; /* 白い帯(文章)の上下の余白(28〜36px) */
--block-gap: 14px; /* セクションの中の間(12〜16px) */
--ed-gutter: 20px; /* 左の軸1本。帯も額縁も、この位置から文字が始まる */
/* 額縁の罫線。紺の58%。白地で 3.3:1 と、枠線として見える下限(3:1)は超える。
会場図と卓詳細シートだけは「もの」として紺100%(--line)のまま残す */
--frame-line: rgba(30, 60, 112, 0.58);
/* 小さな四角いタグ(和文の見出し)。11.84px なので色は --ink(白地で 10.85:1) */
--label-size: 0.74rem;
--label-tracking: 0.08em;
/* お品書きの「ふたりが選んだ理由」だけに使う、一回り小さいタグ。
分類名のタグ(11.84px・700)と同じ語彙のまま 10.24px・500 に落として
主従を保つ。文字は --ink(白地で 10.85:1)、罫は額縁と同じ --frame-line */
--dish-voice-label-tag-size: 0.64rem; /* 10.24px */
--dish-voice-label-tag-fg: var(--ink);
--dish-voice-label-tag-line: var(--frame-line);
/* 見出しの横に添える欧文メタ。Jost 11.04px・大文字・字間広め。
色は --ink-muted(白地で 4.82:1)で、本文より一段引く */
--meta-size: 0.69rem;
--meta-tracking: 0.14em;
/* 1画面に1つだけの巨大な欧文ディスプレイ(メニュー表紙の「MENU」)*/
--display-size: 3.25rem; /* 52px */
/* 紺の帯(進行タブのタイムテーブル)。白抜きで組む。
紺の上の赤は 1.7:1 で読めないので、この帯の中では赤を使わない */
--ink-band-bg: var(--ink);
--ink-band-fg: var(--card); /* #1e3c70 の上で 10.85:1 */
--ink-band-sub: rgba(255, 255, 255, 0.82); /* 補足の一言。同 7.4:1 */
--ink-band-line: rgba(255, 255, 255, 0.28); /* 段を分ける細い罫 */
/* 扉の写真に敷く帯(scrim)。白抜きの文字を、明るい写真の上でも読ませる。
紺を濃いめに落とした色。文字が乗る下端は 0.88 まで濃くする */
--scrim: linear-gradient(
to top,
rgba(14, 28, 52, 0.88) 0%,
rgba(14, 28, 52, 0.82) 42%,
rgba(14, 28, 52, 0.34) 74%,
rgba(14, 28, 52, 0) 100%
);
--scrim-fg: #ffffff;
/* --- ヘッダー ---------------------------------------------- */
--header-bg: var(--card);
--header-fg: var(--ink);
--header-sub-fg: var(--ink-muted);
--header-border: var(--line);
/* --- タブバー ---------------------------------------------- */
--tab-bg: var(--card);
--tab-border: var(--line);
--tab-fg: var(--ink-muted);
--tab-fg-active: var(--accent);
--tab-indicator: var(--accent);
--tab-indicator-h: 2px;
/* すりガラス(SPEC §4.4)。タブバーとヘッダーを半透明の白+背景ぼかしにして、
下を通るコンテンツを「層」として感じさせる(iOS の標準UIと同じ)。
backdrop-filter が使えない環境では --tab-bg / --header-bg の不透明な白のまま。
白の不透明度は 0.95。ラベルの紺が 72% の半透明(--ink-muted)で裏の暗さが二重に透けるため、
真っ黒な写真が裏を通っても 4.5:1 を保つにはここまで必要
(試算: 0.82 → 3.82:1、0.90 → 4.27:1、0.95 → 4.55:1。効果は薄いが可読性を優先) */
--glass-bg: rgba(255, 255, 255, 0.95);
--glass-blur: saturate(180%) blur(20px);
/* --- 見出し ------------------------------------------------ */
--title-en-color: var(--accent);
--title-ja-color: var(--ink);
--title-en-size: 1.5rem;
--title-ja-size: 0.72rem;
/* --- フォーム(検索・パスコード) ---------------------------- */
--field-bg: var(--card);
--field-fg: var(--ink);
--field-border: var(--line);
--field-placeholder: var(--ink-faint);
--field-edge: var(--line-soft); /* 入力欄の上と左右の線(淡く。下は --field-border)*/
--focus-ring: var(--accent-ring);
--button-bg: var(--ink);
--button-fg: var(--card);
--error-fg: var(--accent);
/* --- Q&Aのチャット吹き出し --------------------------------- */
--avatar-size: 38px;
--bubble-radius: 14px;
--bubble-tail-radius: 4px;
--bubble-fg: var(--ink);
--bubble-name-fg: var(--ink-muted);
--bubble-groom-bg: rgba(30, 60, 112, 0.06);
--bubble-groom-border: rgba(30, 60, 112, 0.3);
--bubble-bride-bg: rgba(189, 15, 15, 0.05);
--bubble-bride-border: rgba(189, 15, 15, 0.3);
/* ふたりで声をそろえて答える吹き出し(data の both)。紺(新郎)にも赤(新婦)にも
寄せない中立の白地+紺の細い線。文字は --bubble-fg(白地で 10.85:1) */
--bubble-both-bg: var(--card);
--bubble-both-border: var(--line);
--bubble-both-overlap: 10px; /* 2つの似顔絵の重なり(似顔絵 38px の約1/4)*/
--bubble-both-ring: var(--card); /* 重なった境目を見せる、似顔絵のまわりの細いふち */
/* --- 会場図 ------------------------------------------------ */
--map-bg: var(--card);
--map-border: var(--line-soft); /* 会場図の額縁は淡い細い罫(中の卓の線より弱く)*/
/* 椅子ドット。明るい会場でも消えないよう紺の55%(白地で 3.1:1)にし、
卓のラベル(紺100%)より目立たせない */
--map-seat-size: 7px;
--map-seat-color: rgba(30, 60, 112, 0.55);
--map-seat-hit-color: var(--accent);
--map-seat-fill: var(--card); /* 椅子は紙の白で抜き、--map-seat-color の細い線で描く */
--map-seat-stroke-w: 1px;
--table-fill: var(--card);
--table-border: var(--line);
--table-fg: var(--ink);
--table-hit-fill: var(--accent-soft);
--table-hit-border: var(--accent);
--table-hit-fg: var(--accent);
/* --- 席次の検索(貼り付く検索欄と結果の行)----------------- */
--search-stuck-pad: 8px; /* 貼り付いた検索欄の上下に敷く紙の地(js の BAR_STUCK_PAD と同じ)*/
--hit-row-h: 64px; /* 検索結果の1行の高さ(押しやすさの下限)*/
--hit-no-size: 1.75rem; /* 検索結果の卓番号(赤の欧文の数字)28px */
--press-tint: rgba(30, 60, 112, 0.06); /* 行を押している間の淡い地 */
/* --- 本日のBGM(公開前のレコードの絵)------------------------ */
--record-w: 168px; /* レコードと袋の絵の幅 */
--record-slide: 26px; /* 袋から出てくる距離 */
--motion-record: 900ms;
/* --- 掲示板の送信中(ボタンの下を走る細い線)---------------- */
--motion-busy: 1100ms; /* 細い線が1回走る時間 */
--busy-line: rgba(255, 255, 255, 0.55); /* 紺のボタンの上を走る線 */
--busy-line-w: 2px;
/* --- お品書き(メニュータブ)-------------------------------- */
/* 料理名が主役。説明とひとことは、あくまで下に添える補足なので
本文(16px)より二段小さく、料理名(16px / editorial 17px)を超えない。
12.8px・13.76px と 14px を下回るが、どちらも補足の文章なので可。
色は説明が --ink-muted(白地で 4.82:1)、ひとことは --ink(同 10.85:1) */
--dish-desc-size: 0.8rem; /* 12.8px */
--dish-desc-line: 1.9;
--dish-desc-fg: var(--ink-muted);
--dish-desc-gap: 8px; /* 料理名との間(詰めすぎない 6〜10px)*/
/* 皿の組み。料理名の行間は本文(1.9)より詰めて、
で折れた1皿の名前を
1かたまりに見せる(2 だと3行の名前が3品に見えた)。皿と皿の間は
皿の中の間(8〜14px)の3倍強あけ、どこで次の皿になるかを余白で示す */
--dish-name-line: 1.6; /* 16px → 行の高さ 25.6px */
--dish-gap: 44px;
--dish-voice-size: 0.86rem; /* 13.76px。札に入れて面で分けたぶん、読める大きさに戻す */
--dish-voice-line: 1.75;
--dish-voice-tracking: 0.03em; /* 親の 0.64px を引き継ぐと小さな字では広すぎる */
--dish-voice-fg: var(--ink);
--dish-voice-gap: 14px; /* 料理名(または説明)と札の間 */
/* ふたりの一言の札(淡い地色の小さな箱)。紺の5%。白カードの上で #f4f5f8(実測)
札の中の文字は地色に対して、ラベル(--ink-muted)4.64:1・本文(--ink)9.95:1
(375px幅の画面の画素を読んで算出。ラベルは 4.5:1 の下限に近いので、
地色をこれ以上濃くするならラベルの色も一段濃くすること)*/
--dish-voice-card-bg: rgba(30, 60, 112, 0.05);
--dish-voice-card-pad-y: 11px;
--dish-voice-card-pad-x: 14px;
--dish-voice-card-radius: 0px; /* 招待状の直線にそろえて角は付けない */
--dish-voice-card-inset: 4px; /* 札の最大幅はカードの内側からこのぶん控える(320px幅で本文の幅を稼ぐため小さめ)*/
/* ひとことの見出し(「ふたりが選んだ理由」)。拾い読みする短いラベルなので
11.04px(§4.1.2 のラベル下限 11px)。色は --ink-muted(白カードで 4.82:1)で、
カテゴリ名の赤とも本文の紺とも別の声にする */
--dish-voice-label-size: 0.69rem; /* 11.04px */
--dish-voice-label-tracking: 0.04em; /* 0.1em では小さな字の間がばらけて読みにくい */
--dish-voice-label-fg: var(--ink-muted);
--dish-voice-label-gap: 4px; /* ラベルと本文の間。ひと組に見えるよう詰める */
/* --- 披露宴のあとに(進行タブの一番下)----------------------
お品書きの語彙で組む(分類・名前・ふたりのひとことの札は --dish-* を使う)。
ここにあるのは地図とボタンなど、この節にしかない部品の寸法だけ */
--spot-lead-gap: 32px; /* 前置きの文と1つめの場所の間 */
--spot-name-en-size: 0.86rem; /* 欧文名(Cormorant 13.76px)*/
--spot-name-en-fg: var(--ink); /* 細い欧文なので --ink-muted にはしない(白地で 10.85:1)*/
--spot-lines-line: 1.75; /* 場所・行き方・営業時間の行間(本文 1.9 より詰める)*/
--spot-map-h: 190px; /* 地図の高さ */
--spot-map-border: var(--line-soft); /* 地図の額縁(会場図と同じ淡い細い罫)*/
--spot-map-bg: var(--card); /* 地図を読みこむまでの地色(紙の白。色は敷かない)*/
--spot-link-h: 48px; /* 行の高さ(指で押せる 44px 以上)*/
--spot-link-gap: 14px; /* 地図と1行目の罫の間 */
--spot-link-fg: var(--ink); /* 白地で 10.85:1 */
--spot-link-border: var(--line-soft); /* 行と行の間の細い罫 */
--spot-link-size: 1rem; /* 16px(1行に1つなので詰めない)*/
--spot-link-tracking: 0.08em;
/* --- 本日の流れ(タイムライン)------------------------------ */
--timeline-time-w: 3.4rem;
--timeline-rail-w: 10px;
--timeline-gap: 22px;
--timeline-dot-size: 7px;
--timeline-time-fg: var(--accent);
--timeline-title-fg: var(--ink);
--timeline-note-fg: var(--ink-muted);
--timeline-rail-color: var(--line-soft);
--timeline-dot-color: var(--accent);
/* --- 本日のBGM --------------------------------------------- */
--track-scene-fg: var(--accent);
--track-artist-fg: var(--ink-muted);
--link-button-bg: var(--button-bg);
--link-button-fg: var(--button-fg);
/* --- 名簿・その他 ------------------------------------------ */
--tag-fg: var(--ink-muted);
--divider: var(--line-soft);
--photo-bg: var(--accent-soft);
}
/* iOS Safari のアドレスバーで高さが揺れないよう、使える環境では svh を優先 */
@supports (height: 100svh) {
:root {
--sheet-height: 82svh;
}
}