/* * base.css — 新デザイン（Claude Design v1）の共通スタイル。 * * 出所: dc.html の helmet 442行（renewal/data/helmet-raw.css）。 * 抽出方針と根拠は renewal/TK-BASE-PLAN.md を参照。 * * ## 読み込み範囲 — 全ページではない * * functions.php の tektome_template_assets() で、**新デザインのテンプレートにだけ** * 割り当てる。グローバル enqueue（functions.php:352-357）には足さないこと。 * 既存118ページは新デザインの部品を1つも使っておらず、載せても利得が無い一方で、 * 要素セレクタが既存の見た目を壊す危険だけが乗るため。 * * ## 元から落としたもの（戻さないこと） * * helmet:46 nav > div { padding:0 20px !important } * 既存 header.php の .tk-nav__item ×3 と footer.php の * .tk-footer__sitemap に !important で当たり、打ち消せない。 * helmet:313-317 .tk-lang 系5行 * .tk-lang a (0,1,1) が既存 nav.css:261 .tk-lang__link (0,1,0) に * 常に勝つ。読み込み順を変えても救えない。 * helmet:4 a { text-decoration:none; color:inherit } * 同ファイル :128 に後勝ちされる no-op。 * helmet:128-129 a / a:hover * design-system.css:279-286 と同値。重複させない。 * helmet:281,284 @keyframes tk-bar と .tk-bar * --tk-bar がどこにも宣言されておらず、利用箇所も0件の死にコード。 * * ## 書き換えたもの * * a:focus-visible を12セレクタの並びから外した（既存の素の a に当たるため）。 * footer 起点のセレクタを .tkb-footer 起点にした（新フッターのクラスに合わせる）。 * * ## 既知の課題 * * @keyframes tk-scan が2回定義されている（横スキャンと縦スキャン）。 * 後勝ちで縦が適用される。デザイナー確認待ち（TK-BASE-PLAN.md U6）。 */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; } button { font-family: inherit; border: none; cursor: pointer; } img { display: block; } /* Nav dropdown */ /* Side colors — semantic: one accent per site area (tweakable) */ .tk-tile-cta { color: #5156BE; } .tk-kcat { color: #5156BE; } .tk-klink-row { color: #5156BE; } .tk-chip-a { background: #ECECFC; color: #5156BE; } .tk-newshead { border-bottom-color: #101010; } .sc-sem .tk-sec-sol { --acc:#0FAAC7; --acc-ink:#0F7C93; --acc-tint:#E6F6FB; } .sc-sem .tk-sec-case { --acc:#1DBF73; --acc-ink:#137A4E; --acc-tint:#E9F8F1; } .sc-sem .tk-sec-know { --acc:#E5A058; --acc-ink:#9A5C00; --acc-tint:#FFF5E6; } .sc-sem .tk-sec-co { --acc:#E46292; --acc-ink:#B03A66; --acc-tint:#FCEBF1; } .sc-sem [class*="tk-sec-"] .tk-tile { background: var(--acc-tint); } .sc-sem [class*="tk-sec-"] .tk-tile:hover { background: #fff; border-color: var(--acc); } .sc-sem [class*="tk-sec-"] .tk-tile-cta { color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .tk-chip-a { background: var(--acc-tint); color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .tk-kcat { color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .tk-klink-row { color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .ew { color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .tk-btn-g { border-color: var(--acc); color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .tk-btn-g:hover { background: var(--acc-tint); border-color: var(--acc); } .sc-sem [class*="tk-sec-"] .tk-link { color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .tk-carobtn:hover { border-color: var(--acc); color: var(--acc-ink); } .sc-sem [class*="tk-sec-"] .tk-card-c:hover { border-color: var(--acc); } .sc-sem [class*="tk-sec-"] .tk-newshead { border-bottom-color: var(--acc); } /* Nav responsive: keep the row inside the content box */ nav .tk-navbtn.tk-navmob { display: none; } @media (max-width: 999px) { nav .tk-navbtn.tk-navmob { display: inline-flex; } } .tk-mobpanel { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #EAEAEA; box-shadow: 0 24px 48px -24px rgba(16,16,16,0.28); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 200ms cubic-bezier(.2,.8,.2,1), transform 200ms cubic-bezier(.2,.8,.2,1); z-index: 200; } .tk-mobpanel-open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Nav buttons */ /* Buttons — one interaction vocabulary fill: darkens + lifts | outline: border & text turn purple | surface: purple border + shadow */ /* * 🚨 ボタン系クラスは にも当たる。 * * プロトタイプは画面遷移がJSなので全部