/* ============================================================ KOMORE — unified site header (shared by every page) Solid warm-paper bar, brand logo (green art), left-aligned nav, right-side utility cluster: account · search · language · cart. Linked LAST in so it wins over any page inline styles. ============================================================ */ @media(min-width:1081px){ .site-head{ padding-left:clamp(18px,3.5vw,60px); } .site-head .nav{ flex:1; margin-left:clamp(2.5rem,6vw,6rem); } .site-head .nav .nav-utils{ margin-left:auto; } } /* At the very top: frosted glass so the hero photo breathes through. After scrolling (.scrolled, set in site.js): solid warm-paper bar. */ .site-head{ color:var(--sumi); background:color-mix(in srgb, var(--washi) var(--head-alpha, 40%), transparent); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); border-bottom:1px solid transparent; } .site-head.scrolled, .site-head.is-dark, .site-head.is-light{ background:var(--washi); -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid var(--line); } /* 透過（すりガラス）時のコントラスト補助（紙色のベール＋文字のグロー/縁取り）は撤去。ヘッダー内の要素はバー背景より前面に保つ。 */ /* デスクトップ限定：すりガラスのバー背景より前面に保つための重ね順。モバイル（≤1080px）ではナビが position:fixed のドロワーになるため、ここで position:relative を当てるとドロワー化が無効になりヘッダーが縦に伸びて崩れる。よって min-width:1081px に限定する。 */ @media(min-width:1081px){ .site-head > *{ position:relative; z-index:1; } } /* ── 透過（最上部）= 暗いヒーローの上 ───────────────────────────── すりガラスを外して明色（クリーム）基調にし、メニュー文字は mix-blend-mode:difference で背景の明暗に自動追従させる（暗い所では明るく／明るい所では暗く反転＝“背景に応じた最適な文字色”）。ブレンドが効くよう、この状態では backdrop-filter（合成を隔離する）を外すのが必須。デスクトップ限定。スクロール／下層ページのソリッドバーは従来どおり。 */ @media(min-width:1081px){ /* ▼ ヘッダー直下に写真ヒーローがあるページ（）だけに適用。写真の無いページ（News / Journal / Shop / Contact / 法務など）は base のすりガラスのまま。最上部は「透過のまま」維持。ただしスクロールで変化する要素（バー背景・文字色・ロゴ）はすべて .5s でクロスフェードさせ、すりガラスのページと同じなめらかな挙動に統一する（mix-blend-mode の瞬間反転や display 切替の“パッ”という飛びを排除）。 */ body.head-over-media .site-head:not(.scrolled):not(.is-light):not(.is-dark){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; color:var(--cream); } /* メニュー文字はヘッダーの color（クリーム→墨）を継承するだけ。 .site-head の transition で色がなめらかに推移する（difference の瞬間反転はしない）。 */ /* カートピルは暗背景でも見えるよう明色に */ body.head-over-media .site-head:not(.scrolled):not(.is-light):not(.is-dark) .nav-cart{ color:var(--cream); border-color:color-mix(in srgb, var(--cream) 65%, transparent); } /* ロゴ：最上部はクリーム版を表示（緑版はフェードアウト）。スクロールでこの指定が外れ、既定（緑版表示）へ .5s でクロスフェードする。 */ body.head-over-media .site-head:not(.scrolled):not(.is-light):not(.is-dark) .brand-logo .bl-dark{ opacity:1; } body.head-over-media .site-head:not(.scrolled):not(.is-light):not(.is-dark) .brand-logo .bl-light{ opacity:0; } } /* brand logo — クリーム版（bl-dark）と緑版（bl-light）を同じグリッドセルに重ね、 opacity でクロスフェードする。これによりスクロール時のロゴ切替が瞬間的に飛ばず、背景・文字と同じ .5s でなめらかに入れ替わる。既定では緑版（明色ヘッダー用）を表示。 */ .brand-logo{ display:inline-grid; align-items:center; gap:.8rem; } .brand-logo .bl-mark.bl-dark, .brand-logo .bl-mark.bl-light{ grid-column:1; grid-row:1; } .brand-logo .bl-word.bl-dark, .brand-logo .bl-word.bl-light{ grid-column:2; grid-row:1; } .brand-logo .bl-mark, .brand-logo .bl-word{ display:block !important; transition:height .5s ease, opacity .5s ease; } .brand-logo .bl-dark{ opacity:0; } .brand-logo .bl-light{ opacity:1; } /* ── nav label language (JP / EN) — 全頁共通 ────────────────── ナビ表記は日本語を既定にする。Main.html の Tweaks（メニュー表記）で data-navlang="en" を立てたときだけ英語表記へ切り替わる。 */ .nav a .nl-en{ display:none; } .nav a .nl-ja{ display:inline; } :root[data-navlang="en"] .nav a .nl-en{ display:inline; } :root[data-navlang="en"] .nav a .nl-ja{ display:none; } /* ── nav link hover — 遷移先のあるナビ文字に下線リビールのリアクション ── デスクトップのみ（≤1080px はドロワー化するため除外）。下線は右→左に消え、ホバー時に左→右へ伸びる。現在地（aria-current）は常時細い下線。 */ @media(min-width:1081px){ .site-head .nav > a{ position:relative; transition:color .35s ease, opacity .35s ease; } .site-head .nav > a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.4px; background:currentColor; transform:scaleX(0); transform-origin:right center; transition:transform .45s cubic-bezier(.2,.7,.2,1); } .site-head .nav > a:hover{ opacity:1; } .site-head .nav > a:hover::after{ transform:scaleX(1); transform-origin:left center; } .site-head .nav > a[aria-current="page"]::after{ transform:scaleX(1); opacity:.4; } .site-head .nav > a[aria-current="page"]:hover::after{ opacity:1; } } /* utility cluster */ .nav-utils{ display:flex; align-items:center; gap:clamp(.9rem,1.4vw,1.4rem); } .nav-ic{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; margin:0; border:0; background:none; color:inherit; cursor:pointer; opacity:.85; transition:opacity .3s, color .3s; } .nav-ic:hover{ opacity:1; color:var(--tea); } /* アカウント／検索アイコン・言語切り替えは現在非表示（将来再利用する可能性があるため markup は各ページに残してあります）。再表示するには、対応する行を削除するだけで全ページに戻ります。 */ .nav-ic[aria-label="アカウント"]{ display:none !important; } .nav-ic[aria-label="検索"]{ display:none !important; } .nav-lang{ display:none !important; } .nav-ic svg{ width:20px; height:20px; display:block; } .nav-lang{ position:relative; display:inline-flex; align-items:center; } .nav-lang select{ -webkit-appearance:none; appearance:none; background:none; border:0; cursor:pointer; color:inherit; font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:.25em 1.35em .25em .2em; } .nav-lang select:focus-visible{ outline:1px solid var(--line); outline-offset:2px; } .nav-lang::after{ content:""; position:absolute; right:.45em; top:50%; width:6px; height:6px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:translateY(-65%) rotate(45deg); pointer-events:none; opacity:.7; } /* cart pill */ .nav .nav-cart{ display:flex; align-items:center; gap:.6em; margin-left:.4rem; padding:.55em 1.05em; border:1px solid currentColor; border-radius:999px; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; opacity:.92; transition:.4s; color:var(--sumi); } .nav .nav-cart .nc-count{ display:inline-flex; align-items:center; justify-content:center; min-width:1.5em; height:1.5em; padding:0 .35em; border-radius:999px; background:var(--brass); color:var(--cream); font-family:var(--display); font-size:.82rem; letter-spacing:0; line-height:1; } .nav .nav-cart:hover{ background:var(--sumi); color:var(--washi); border-color:var(--sumi); } .nav-cart.cart-pop{ animation:cartPop .5s cubic-bezier(.2,.7,.2,1); } @keyframes cartPop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.12); } 100%{ transform:scale(1); } } /* ▼▼▼ 先行予約バナー（期間限定）— 受付終了時はこのブロックを丸ごと削除 ▼▼▼ */ :root{ --accent-tea:#586b4d; } :root[data-accent="warm"]{ --accent-tea:#ab854a; } .nav a.nav-preorder, .nav-preorder{ display:inline-flex; align-items:baseline; gap:.45em; margin-right:.15rem; position:relative; padding:0 0 .28em; border:0; background:none; box-shadow:none; border-radius:0; color:inherit; font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.14em; line-height:1; white-space:nowrap; border-bottom:1.5px solid color-mix(in oklab, currentColor 38%, transparent); transition:color .35s, border-color .35s, text-shadow .35s; } .nav-preorder .np-dot{ display:none; } /* 先行予約も他ナビと同じ下線リビールのリアクション：既定の薄い下線に、ホバーで濃い下線が右→左から伸びて重なる。 */ .nav-preorder::after{ content:""; position:absolute; left:0; right:0; bottom:-1.5px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:right center; transition:transform .45s cubic-bezier(.2,.7,.2,1); } .nav-preorder:hover::after{ transform:scaleX(1); transform-origin:left center; } /* 色は他のナビ文字（SHOP / STORY / JOURNAL / CONTACT …）と完全に共通： inherit でヘッダーの状態色（通常 --sumi、写真ヒーロー上では白＋difference）に追従する。 */ .nav-preorder:hover{ color:var(--sumi); border-color:var(--sumi); transform:none; box-shadow:none; background:none; } /* ▲▲▲ 先行予約バナーここまで ▲▲▲ */ @media(max-width:1080px){ .nav .nav-utils{ display:flex; align-items:center; gap:1.4rem; margin:1.6rem 0 0; align-self:flex-start; } .nav .nav-cart{ align-self:auto; margin:0 0 0 auto; color:var(--sumi); } .nav .nav-preorder{ order:-1; margin:0 0 1.2rem; align-self:flex-start; } }