/* Theme Name: StaySpot Description: 泊まれる場所ポータルのテーマ。スポット個別ページとファセット一覧をSSRで描画する。 Version: 0.1.0 Requires PHP: 8.1 */ :root { --ground: #f5f7f8; --surface: #ffffff; --ink: #16202a; --ink-soft: #46545f; --muted: #6e7f8b; --rule: #dde3e7; --accent: #0e6459; --accent-ink: #ffffff; --accent-bg: #e2efec; /* 天気予報カードのアクセント装飾(2026-08-25)用。--accent-bgよりも一段濃い、 --accentを薄めた縁取り色。ダークモード用の上書きは意図的に追加しない (ダークモード対応は方針として廃止済み、design-constraints-brief.md §2・§3参照)。 */ --accent-line: #93b9b4; --warn: #7a5b12; --warn-bg: #f4eeda; --danger: #9e3f2e; --danger-bg: #f2e4e0; --shadow: 0 1px 2px rgba(22, 32, 42, .06); --radius: 8px; --radius-sm: 4px; /* ---------- design refresh 2026-08: カテゴリ識別トークン（判断A） ---------- */ /* 「泊まる」は既存の --accent/--accent-bg をそのまま使う（正方形マーク）。 「遊ぶ」「食べる」用に同トーンの新トークンを追加する（置き換えではなく追加）。 */ --play: #2f5d78; --play-bg: #e4edf2; --eat: #6d5a20; --eat-bg: #f0eddf; /* ---------- design refresh 2026-08: 決済ブランド識別バッジ配色（対応決済表示） ---------- */ /* 国際ブランドのみブランド色相当の単色を割り当てる（ロゴ図形の再現はせず、 テキストラベル＋色分けのみ）。cash/other_qr/ic_cardは特定ブランドが無いため 色トークンを割り当てない（.ss-payment-badgeのデフォルト無彩色がそのまま効く）。 */ --pay-visa: #1a4fd6; --pay-visa-bg: #e7edfc; --pay-mastercard: #d9720a; --pay-mastercard-bg: #faecd9; --pay-jcb: #1450a3; --pay-jcb-bg: #e3edf8; --pay-amex: #2f6fa8; --pay-amex-bg: #e6eff5; --pay-dinersclub: #35678a; --pay-dinersclub-bg: #e6eef2; --pay-discover: #c1560c; --pay-discover-bg: #f8e9dc; --pay-unionpay: #b3242f; --pay-unionpay-bg: #f6e2e2; --pay-paypay: #d1002b; --pay-paypay-bg: #fbe1e6; /* ---------- design refresh 2026-08: スペーシングスケール ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 28px; --space-7: 44px; /* ---------- design refresh 2026-08-25: 差し色(spark) ---------- */ /* ブランドカラー(--accent、深緑)はナビ・見出し等の基幹色として維持したまま、 お気に入り・「増えた」系の前向きな知らせ等、ワクワクを添えたい瞬間だけに使う 第2のアクセント。「焚き火のオレンジ」案(依頼者選定、2026-08-25)。 疑いの瞬間(.ss-doubt-hint)・迷いの気配/決着のこだま(.ss-behavior-echo)は 誇張しない静かなトーンが設計意図のため、意図的にsparkを使わず現状維持する。 */ --spark: #b6551f; --spark-bg: #f5e6da; } /* 2026-08-25: ダークモード対応を廃止（design-constraints-brief.md 6章参照）。 以前はここに @media (prefers-color-scheme: dark) の :root 上書きがあったが削除し、 常に上記のライトモード変数のみを使う。 */ * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; line-height: 1.75; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } a:hover { text-decoration-thickness: 2px; } img { max-width: 100%; height: auto; } /* keyboard focus — use the theme accent instead of the browser default blue ring */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .ss-filters a:focus-visible, .ss-badge:focus-visible { outline-offset: 1px; } .ss-wrap { max-width: 860px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; } /* ---------- header / footer ---------- */ .ss-site-header { border-bottom: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow); } .ss-site-header .inner { max-width: 860px; margin: 0 auto; padding: .875rem 1.25rem 0; display: flex; flex-direction: column; } .ss-site-header__top { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; } /* design refresh 2026-08-26: ロゴ案5-A（Claude Design案「あそVIVA.倶楽部 ヒーロー＆ロゴ案」#Logo5A準拠）。稜線＋リングの図形バッジ＋2行ワードマーク。 */ .ss-site-header a.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); white-space: nowrap; } .brand__mark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); } .brand__word { display: flex; flex-direction: column; line-height: 1.1; } .brand__word-main { font-weight: 700; font-size: .95rem; letter-spacing: .005em; } .brand__word-sub { font-size: .58rem; color: var(--muted); letter-spacing: .16em; margin-top: 2px; } /* グローバルナビゲーション（提案#7 案2、nav-proposal-2026-08-19.md）。 カテゴリ群（.ss-nav-category）とユーティリティ群（.ss-nav-utility）を 別々の