/* ========================================================================== 経営コックピット / デイリーQ&A 共通スタイル(静的CSS・ビルド工程なし) 見た目の正: docs/superpowers/specs/assets/cockpit-mockup.html トークン・アニメ曲線・時間・スタッガーの値はモックから一切変更しない。 ========================================================================== */ /* ===== デザイントークン(モックの :root と同一) ===== */ :root { --primary: #FF4438; /* 情熱レッド */ --accent: #FF8A00; /* エネルギーオレンジ */ --grad: linear-gradient(135deg, #FF4438, #FF8A00); --bg: #FFFFFF; --bg-soft: #F7F7F8; --ink: #222222; --ink-2: #666a70; /* 補助文字(わずかに暖色寄りのグレー) */ --ink-3: #9a9ea3; --line: #ececee; --good: #F28C1E; /* 成果=オレンジ系 */ --warn-bg: #FFF3E0; --warn-ink: #A85B00; --danger: #C62828; --r: 10px; --shadow: 0 1px 3px rgba(20,10,5,.08); --shadow-lift: 0 6px 20px rgba(255,68,56,.14); --ease: cubic-bezier(0.32, 0.72, 0.24, 1); /* ぬるっと曲線 */ } /* 本番アプリは白ベース単一テーマの意匠(意図的選択)。ダーク閲覧環境でも同じ見えを維持 */ * { box-sizing: border-box; margin: 0; } html { background: var(--bg-soft); } body { background: var(--bg-soft); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 14px; line-height: 1.5; /* ← ココナラ密度 */ padding-bottom: 48px; } .app-in { animation: appIn .5s var(--ease) both; } @keyframes appIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ===== スプラッシュ(ログイン直後のダッシュボード初回描画のみ表示) ===== */ #splash { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; } #splash .mark { font-size: 56px; transform: scale(.7); opacity: 0; animation: pop .55s var(--ease) .15s forwards; } #splash .word { font-size: 22px; font-weight: 800; letter-spacing: .04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(8px); animation: rise .45s var(--ease) .5s forwards; } #splash .sweep { position: absolute; inset: 0; background: var(--grad); opacity: .06; transform: translateY(100%); animation: sweep .7s var(--ease) .1s forwards; } #splash.leave { animation: splashOut .4s var(--ease) forwards; } @keyframes pop { to { transform: scale(1); opacity: 1; } } @keyframes rise { to { transform: translateY(0); opacity: 1; } } @keyframes sweep{ to { transform: translateY(0); } } @keyframes splashOut { to { opacity: 0; visibility: hidden; } } /* ===== グローバルヘッダー ===== */ header.gh { position: sticky; top: 0; z-index: 40; height: 52px; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; } .gh-logo { font-size: 16px; font-weight: 800; text-decoration: none; } .gh-logo .w { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .gh-burger { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .gh-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } /* モックの body.drawer-open 相当。Alpineでシェル最上位divに drawer-open を付与するため .app.drawer-open に書換え */ .app.drawer-open .gh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .app.drawer-open .gh-burger span:nth-child(2) { opacity: 0; } .app.drawer-open .gh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* PC幅(768px〜): ヘッダー内タブ横並び(主要7項目)+ハンバーガー併設 */ .gh-tabs { display: none; } @media (min-width: 768px) { .gh-tabs { display: flex; align-items: center; gap: 4px; } .gh-tabs a { text-decoration: none; color: var(--ink-2); font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; } .gh-tabs a.on { color: var(--primary); background: var(--warn-bg); } } /* ===== ドロワー ===== */ .backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(20,10,5,.4); opacity: 0; pointer-events: none; transition: opacity .32s var(--ease); } .app.drawer-open .backdrop { opacity: 1; pointer-events: auto; } nav.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: 280px; background: var(--bg); box-shadow: -8px 0 30px rgba(0,0,0,.12); transform: translateX(100%); transition: transform .32s var(--ease); padding: 60px 0 20px; overflow-y: auto; } .app.drawer-open nav.drawer { transform: translateX(0); } .drawer .grp { font-size: 11px; letter-spacing: .1em; color: var(--ink-3); padding: 14px 20px 4px; } .drawer a, .drawer form button { display: flex; align-items: center; gap: 10px; padding: 10px 20px; width: 100%; color: var(--ink); text-decoration: none; font-size: 14px; position: relative; opacity: 0; transform: translateX(12px); border: 0; background: none; font: inherit; text-align: left; cursor: pointer; } .app.drawer-open .drawer a { animation: itemIn .3s var(--ease) forwards; } .app.drawer-open .drawer a:nth-of-type(1) { animation-delay: .06s } .app.drawer-open .drawer a:nth-of-type(2) { animation-delay: .09s } .app.drawer-open .drawer a:nth-of-type(3) { animation-delay: .12s } .app.drawer-open .drawer a:nth-of-type(4) { animation-delay: .15s } .app.drawer-open .drawer a:nth-of-type(5) { animation-delay: .18s } .app.drawer-open .drawer a:nth-of-type(6) { animation-delay: .21s } .app.drawer-open .drawer a:nth-of-type(7) { animation-delay: .24s } .app.drawer-open .drawer a:nth-of-type(8) { animation-delay: .27s } .app.drawer-open .drawer a:nth-of-type(9) { animation-delay: .30s } .app.drawer-open .drawer a:nth-of-type(10){ animation-delay: .33s } .app.drawer-open .drawer a:nth-of-type(11){ animation-delay: .36s } /* ログアウトはPOSTフォーム(