/* =========================================================== 苺咲べりぃ 官網重建 — 設計 token 色票來自原站實機量測（layout-geometry.md + shots/*.png 取樣） =========================================================== */ :root { /* 粉色系 */ --pink: #EC85C4; /* 頁面背景 */ --pink-deep: #E9269C; /* news 標題等深粉字 */ --pink-shadow: #C55CA3; /* 按鈕下緣陰影 */ --pink-line: #E085B1; /* 邊框、虛線 */ --pink-pale: #FBCEDD; /* 淡粉字（首頁 tagline）／小節豎線 */ --pink-bg: #FEF5F8; /* 淡粉底（contact / profile 框）*/ --pink-bg2: #FCE4EE; /* 稍深的淡粉底 */ --pink-mid: #F5A9CE; /* 小節豎線（濃いめ） */ --pink-tag: #FFB0CC; /* work 的公司名標籤底／日期字 */ --pink-row: #FFF4FB; /* work 列表內容欄底 */ --title-ink: #A85258; /* 全站頁標題「― xxx ―」與小節標題（深褐紅） */ --ink: #423438; /* 內文深灰（首頁 news 卡日期など） */ --ink-dark: #6B1E23; /* work / history 列表內容・專輯名・news 標題 */ --white: #fff; /* 原站の実測色（font-usage.json より）。淡くしないこと。 */ --ink-body: #2A2A2A; /* profile 基本データ・自己紹介・contact 本文 */ --ink-black: #000; /* profile 小節標題・ハッシュタグ・contact 収録環境の項目 */ --ink-model: #350A0C; /* モデル紹介ページの「お披露目日／デザイン／モデリング」 */ --ink-brown: #5D393D; /* gallery の作者名・work の問い合わせ・BGM のタイトル */ --rose: #E68E94; /* profile ロゴ説明・BGM 作曲者・news 詳細の日付 */ --mail-ink: #6B1518; /* contact のメールアドレス */ /* 版面 */ --page-w: 980px; /* 桌機固定寬（同原站 Wix classic 980） */ --card-w: 935px; /* 內容白框寬 */ --radius-card: 30px; /* 白框圓角 */ --radius-pill: 999px; --radius-btn: 12px; /* linklist 的圓角矩形按鈕 */ /* 字體：原站字體為 Wix 授權商用字體，此處以 Google Fonts 免費字體替代。 替換時只要改這三個變數即可（全站都吃這裡）。 coquette-w00-light -> Chewy（9/9 まで Delius Swash Caps） 頁標題「― Profile ―」、選單 tsukushimarugothic -> Zen Maru Gothic 內文・小節標題・linklist 按鈕 lulo-clean-w01-one-bold -> Montserrat 600 首頁 5 顆按鈕・SNS 行列表 cookhand -> Zen Kurenaido 模型頁小節標題「― デザイン ―」 futura-lt-w01-book -> Jost 專輯「1st ALBUM」等版位標 skip -> （不可視のため未使用） ※ 内文は Zen Maru Gothic 500（筑紫A丸 R の見た目に合わせる）。 ※ 有料で原字体に戻す場合は FONTPLUS（年額 ¥13,200）を導入し --font-body を筑紫A丸ゴシックに差し替えるだけ。 */ --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", "メイリオ", sans-serif; /* 9/9 katy：Delius Swash Caps は I が J に見える（LINK が LJNK）。同じ丸くて遊びのある Chewy に */ --font-title: "Chewy", "Zen Maru Gothic", cursive, sans-serif; --font-btn: "Montserrat", "Zen Maru Gothic", sans-serif; --font-hand: "Zen Kurenaido", "Zen Maru Gothic", sans-serif; --font-geo: "Jost", "Montserrat", sans-serif; /* 陰影 */ --shadow-card: 0 2px 6px rgba(160, 60, 120, .12); --shadow-btn: 0 3px 0 var(--pink-shadow); } /* =========================================================== 2026-09 改版：語意層トークン（新版型 site.css 専用） ・上の変数はすべて旧ページ（legacy.css）がまだ使うので消さないこと。 ・下の語意層は「役割 → 色」の 1 段クッション。A/B の切替はここだけで済む。 ・:root ＝ A 案（洋紅底）、html[data-theme="b"] ＝ B 案（淡粉底＋白カード。旧・原站の配色）。 色は redesign-proposal §7 の A/B 表と redesign/*.dc.html の実値。 ・文脈で色が変わるもの（背景の上の見出し色・草莓飾り線）は --title-on-bg / --ink-on-bg / --deco-ink を .panel や .sec--band 側で 上書きして使う。個々の規則で色を直接書かないこと。 =========================================================== */ :root { /* --- 版面（テーマ非依存） --- */ --wrap: 1100px; /* 標準コンテナ */ --wrap-wide: 1200px; /* 広いコンテナ（グリッド用） */ --wrap-pad: 24px; /* コンテナ左右の余白（<=600px で 16px） */ --header-h: 72px; --header-h-sm: 56px; --band-h: 200px; /* 頁首帯（子ページ共通） */ --band-h-sm: 140px; --r-panel: 30px; /* 白カード */ --r-box: 20px; /* 小さめのカード */ --r-sm: 12px; /* 画像・タイル */ --r-pill: 999px; --z-header: 100; --z-nav: 110; --ease: cubic-bezier(.2, .7, .2, 1); /* --- 草莓飾り（2026-09 四巡目：mask をやめて「色付き PNG」にした） --- 三巡目までは img/favicon-192.png を `mask:` の多層ショートハンドで抜き、 background-color で染めていた。ところが katy の環境では飾り線がベタ塗りの 色ブロックになって出る（＝多層 mask ショートハンドが解釈されていない）。 版本字串を足しても直らなかったので、mask も filter も使わない いちばん保守的な形＝「最初から色の付いた PNG を background-image で置く」 に切り替えた。PNG は tools/make_deco_icons.py が作る（24px と 48px）。 --berry-ink #A85258 白カード（.panel）／B 案の白地／アルバム頁 --berry-white #FFFFFF 洋紅帯（.band / .sec--band） --berry-pale #FBCEDD A 案の洋紅地（下の --deco-ink と同値） --vine-ink / --vine-white 角飾りの蔓（線と葉だけの小さな SVG。色は焼き込み） 使い方（site.css / index.html / album.css）: background-image: var(--deco-berry), <線と点のグラデ層>; 苺の色は文脈で --deco-berry / --deco-vine を、線と点の色は --deco-ink を .panel / .sec--band / .band / album 側で差し替える。 */ --berry-ink: url("../img/deco/berry-ink@1x.png"); --berry-white: url("../img/deco/berry-white@1x.png"); --berry-pale: url("../img/deco/berry-pale@1x.png"); --vine-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M4 6C26 15 39 35 45 57 51 79 68 99 102 113' fill='none' stroke='%23A85258' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='%23A85258'%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(18 15) rotate(-35)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(45 55) rotate(152)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(80 102) rotate(-28)'/%3E%3C/g%3E%3C/svg%3E"); --vine-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M4 6C26 15 39 35 45 57 51 79 68 99 102 113' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(18 15) rotate(-35)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(45 55) rotate(152)'/%3E%3Cpath d='M0 0C1-7 7-12 15-12 15-4 9 1 0 0Z' transform='translate(80 102) rotate(-28)'/%3E%3C/g%3E%3C/svg%3E"); /* 角飾り（蔓）の苺は .band で 20〜22px 前後で置くので、いつも 48px 版を 縮小して使う。こちらは image-set を挟まない（縮小なので DPR1 でも DPR2 でも綺麗）。2026-09：hero の角飾りは撤去したので、いま使うのは .band（site.css）／album.css の角飾りだけ。 */ --vine-berry-ink: url("../img/deco/berry-ink@2x.png"); --vine-berry-white: url("../img/deco/berry-white@2x.png"); /* 既定＝A 案の洋紅地。文脈側（.panel / .band / .sec--band / album）で上書きする */ --deco-berry: var(--berry-pale); --deco-vine: var(--vine-white); --deco-vine-berry: var(--vine-berry-white); /* ========== A 案（洋紅底）＝ 既定 ========== */ /* 面 */ --bg-page: #EC85C4; --bg-sec: #EC85C4; /* section 既定の背景 */ --bg-sec-pale: #EC85C4; /* .sec--pale。A は交互にしないので同色 */ --bg-header: #EC85C4; --bg-footer: #C55CA3; --band-bg: #EC85C4; /* 頁首帯・About 帯（A/B とも洋紅） */ --hero-bg: #EC85C4; /* 面の上の文字 */ --header-ink: #fff; --header-line: rgba(255, 255, 255, .35); --footer-ink: #fff; --band-ink: #fff; --band-sub: #FFF0F7; --hero-ink: #fff; --hero-sub: #FBCEDD; --ink-on-bg: #fff; /* section 背景の上の小さい文字 */ --title-on-bg: #fff; /* 「― xxx ―」の色 */ --deco-ink: #FBCEDD; /* 飾り線の線と点の色（洋紅の上なので淡粉。苺 PNG と同値） */ /* hero（cover）四巡目：KV は hero 全幅に敷くので「継ぎ目を消す帯」ではなく 「右の文字区だけを軽く曇らせる帯」。60% あたりから右端に向かって濃くする。 絵を塗り潰さないのが条件なので右端でも不透明にはしない。 */ --hero-scrim: linear-gradient(90deg, rgba(236, 133, 196, 0) 56%, rgba(236, 133, 196, .24) 78%, rgba(236, 133, 196, .50) 100%); --hero-scrim-sm: linear-gradient(180deg, rgba(236, 133, 196, 0) 55%, rgba(236, 133, 196, .55) 82%, var(--hero-bg) 100%); /* 白カード */ --card-bg: #fff; --card-line: transparent; /* 枠線の色 */ --card-bw: 0px; /* 枠線の太さ */ --card-shadow: 0 4px 12px rgba(120, 30, 80, .18); --card-shadow-up: 0 10px 20px rgba(120, 30, 80, .22); --card-ink: var(--ink-body); --card-ink-strong: var(--ink-dark); /* ボタン（薬丸） */ --btn-bg: #E9269C; --btn-ink: #fff; --btn-shadow: #A31A6C; /* 下縁 3px */ --btn2-bg: #fff; --btn2-ink: #A85258; --btn2-border: #E085B1; /* 線・タグ・リンク */ --divider: #FBCEDD; /* 淡粉の破線 */ --divider-strong: #F5A9CE; --tag-bg: #FFB0CC; --tag-ink: #fff; --link-ink: #E9269C; --link-ink-hover: #A85258; --tile-bg: #FFF4FB; /* カード内のさらに淡い面（X カードなど） */ } /* ========== B 案（淡粉底＋白カード） ========== */ html[data-theme="b"] { /* 9/8 katy：B の地は白ではなく「前の配色」＝旧・原站の淡粉（#FBCEDD、原站の白框の縁と同じ色） に白いカードを載せる。交互の淡い方は少しだけ明るく。 */ --bg-page: #FBCEDD; --bg-sec: #FBCEDD; --bg-sec-pale: #FDE3EC; /* B は淡粉と更に淡い粉を交互に */ --bg-header: #E085B1; --bg-footer: #E085B1; /* 9/9 katy：B の地を淡粉にしたら「header 濃粉／帯 洋紅／地 淡粉」の三層になった。 帯は header と同じ色にして二層（濃粉＋淡粉）に減らす。 */ --band-bg: #E085B1; --hero-bg: #FBCEDD; --header-ink: #fff; --header-line: transparent; --footer-ink: #fff; --band-ink: #fff; --band-sub: #FFF0F7; --hero-ink: #A85258; --hero-sub: #A85258; --ink-on-bg: #423438; --title-on-bg: #A85258; --deco-ink: var(--title-ink); /* 白地なので飾りは褐紅。角飾りの蔓も同じ色に揃える */ --deco-berry: var(--berry-ink); --deco-vine: var(--vine-ink); --deco-vine-berry: var(--vine-berry-ink); /* B 案は文字が褐紅（暗い）なので、A よりしっかり白く曇らせないと読めない。 それでも右端は 0.88 止まりで、時計と薔薇の形は残す。 */ --hero-scrim: linear-gradient(90deg, rgba(251, 206, 221, 0) 52%, rgba(251, 206, 221, .58) 76%, rgba(251, 206, 221, .90) 100%); --hero-scrim-sm: linear-gradient(180deg, rgba(251, 206, 221, 0) 55%, rgba(251, 206, 221, .55) 82%, var(--hero-bg) 100%); --card-bg: #fff; --card-line: #FBCEDD; --card-bw: 2px; --card-shadow: none; --card-shadow-up: 0 6px 14px rgba(160, 60, 120, .16); --btn-bg: #EC85C4; --btn-shadow: #C55CA3; } /* =========================================================== 草莓 PNG の DPR2 差し替え（2026-09 四巡目） ・24px 版を既定にし、対応ブラウザだけ image-set() で 48px に上げる。 ・**必ず @supports で囲うこと。** var() の中身に image-set() を入れたまま 非対応ブラウザへ渡すと、置換後に構文エラーになって background-image が まるごと無効（invalid at computed-value time＝none）になり、 いま直そうとしている「飾りが出ない」状態を作り直してしまう。 ・@supports 自体が無いほど古い環境では、この塊ごと無視されて 24px のまま。 =========================================================== */ @supports (background-image: -webkit-image-set(url("../img/deco/berry-ink@1x.png") 1x)) { :root { --berry-ink: -webkit-image-set(url("../img/deco/berry-ink@1x.png") 1x, url("../img/deco/berry-ink@2x.png") 2x); --berry-white: -webkit-image-set(url("../img/deco/berry-white@1x.png") 1x, url("../img/deco/berry-white@2x.png") 2x); --berry-pale: -webkit-image-set(url("../img/deco/berry-pale@1x.png") 1x, url("../img/deco/berry-pale@2x.png") 2x); } } @supports (background-image: image-set(url("../img/deco/berry-ink@1x.png") 1x)) { :root { --berry-ink: image-set(url("../img/deco/berry-ink@1x.png") 1x, url("../img/deco/berry-ink@2x.png") 2x); --berry-white: image-set(url("../img/deco/berry-white@1x.png") 1x, url("../img/deco/berry-white@2x.png") 2x); --berry-pale: image-set(url("../img/deco/berry-pale@1x.png") 1x, url("../img/deco/berry-pale@2x.png") 2x); } }