/* Hallmark · tokens — Stailor Harness for Shopify LP * theme: studied-DNA (source: https://leeep.jp/) on emerald base * axes: paper-band=light · display-style=grotesk-sans · accent-hue=chromatic-green */ :root { /* ---- colour · anchor hue 160–170 (emerald), all neutrals tinted toward it ---- */ --color-paper: oklch(98% 0.005 165); --color-paper-2: oklch(95.5% 0.008 165); --color-paper-3: oklch(93% 0.01 165); --color-white: oklch(100% 0 0); --color-rule: oklch(90% 0.01 165); --color-rule-2: oklch(84% 0.012 165); --color-muted: oklch(45% 0.018 170); --color-ink: oklch(22% 0.015 170); --color-ink-2: oklch(15% 0.015 170); --color-accent: oklch(52% 0.13 158); /* marks, numerals, links */ --color-accent-deep: oklch(41% 0.1 160); /* accent text at AA body sizes */ --color-accent-wash: oklch(95% 0.025 160); /* tiny semantic fills only */ --color-marker: oklch(91% 0.08 160); /* 蛍光マーカー強調 (answers記事のstrong) */ --color-wash-rule: oklch(85% 0.04 160); /* accent-washカードの罫線 */ --color-focus: oklch(52% 0.15 158); --color-neg: oklch(46% 0.13 30); /* negative marks (×, 課題) only */ --color-neg-wash: oklch(95% 0.02 30); /* trust badges (hero cred numerals) · gold, this role only */ --color-gold: oklch(74% 0.12 86); --color-gold-deep: oklch(55% 0.11 80); /* gradient CTA band (leeep DNA) */ --grad-cta: linear-gradient(135deg, oklch(38% 0.09 165), oklch(56% 0.11 172)); /* inverse block (closing section + footer) */ --color-paper-inv: oklch(21% 0.022 168); --color-paper-inv-2: oklch(16% 0.018 168); --color-ink-inv: oklch(96% 0.006 165); --color-muted-inv: oklch(76% 0.02 165); --color-rule-inv: oklch(34% 0.02 168); --color-accent-inv: oklch(78% 0.12 160); /* ---- typography · system stacks avoid render-blocking webfont downloads ---- */ --font-display: "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; --font-outlier: "Avenir Next", "Helvetica Neue", Arial, "Hiragino Sans", sans-serif; /* scale · major third 1.25 from 16px */ --text-xs: 0.8rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-display: clamp(2.1rem, 3.4vw + 0.9rem, 3.4rem); --text-display-s: clamp(1.6rem, 2.2vw + 0.7rem, 2.3rem); --text-hero: clamp(2rem, 3.8vw + 0.6rem, 4.2rem); /* hero h1 only · centered marquee headline */ /* ---- spacing · 4pt scale ---- */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; /* ---- motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* ---- shape ---- */ --radius-card: 14px; --radius-inner: 10px; --radius-band: 28px; /* gradient CTA band (leeep DNA) */ --radius-pill: 999px; /* ---- depth · one shadow at a time ---- */ --shadow-whisper: 0 1px 2px oklch(20% 0.01 165 / 0.05); --shadow-hairline: 0 0 0 1px oklch(30% 0.01 165 / 0.06); --shadow-lift: 0 16px 40px oklch(20% 0.02 165 / 0.09); /* ---- z scale ---- */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ---- page ---- */ --page-max: 70rem; --page-gutter: clamp(1rem, 4vw, 1.5rem); } /* ============================================================ * portal-v2 — 新テーマ用セマンティックトークン * 有効化: (BaseLayout visualTheme) * 確定値の根拠: /design.md(コントラスト検証済み) * legacy テーマには影響しない。既存トークンは削除しない。 * ============================================================ */ .theme-portal-v2 { /* ---- surfaces & text ---- */ --portal-paper: oklch(97.5% 0.005 160); --portal-surface: oklch(100% 0 0); --portal-ink: oklch(20% 0.02 165); --portal-muted: oklch(45% 0.02 160); --portal-rule: oklch(90% 0.01 160); --portal-rule-strong: oklch(84% 0.012 160); /* ---- vivid green: 主CTA・現在地・選択状態(白文字AA確保のためL52%) ---- */ --portal-primary: oklch(52% 0.19 150); --portal-primary-deep: oklch(41% 0.15 152); --portal-primary-wash: oklch(94% 0.06 150); --portal-focus: oklch(52% 0.19 150); /* ---- orange: 無料診断・相談・ブランドマーク限定 ---- */ --portal-utility: oklch(60% 0.16 50); --portal-utility-wash: oklch(95% 0.03 55); /* ---- 蛍光マーカー: 記事本文のリード句強調(li内strong)専用 ---- */ --portal-marker: oklch(94% 0.11 105); /* ---- category colors: 小型アイコン・小ラベル専用 ---- */ --portal-cat-coral: oklch(60% 0.16 25); --portal-cat-coral-wash: oklch(95% 0.03 25); --portal-cat-mint: oklch(52% 0.12 165); --portal-cat-mint-wash: oklch(95% 0.03 165); --portal-cat-violet: oklch(52% 0.17 295); --portal-cat-violet-wash: oklch(95% 0.03 295); --portal-cat-cyan: oklch(52% 0.11 220); --portal-cat-cyan-wash: oklch(95% 0.03 220); --portal-cat-magenta: oklch(52% 0.18 340); --portal-cat-magenta-wash: oklch(95% 0.03 340); --portal-cat-amber: oklch(58% 0.13 75); --portal-cat-amber-wash: oklch(95% 0.04 80); --portal-cat-purple: oklch(48% 0.17 280); --portal-cat-purple-wash: oklch(95% 0.03 280); /* ---- art palette: 記事バナー・図解・サムネイルのイラスト内部限定 ---- * 2026-07-24 ユーザー指示で紫系→緑系へ変更。変数名は参照互換のため維持 * (indigo=深緑の地, violet=中間緑, pink=ライム強調, glow=淡ミント光) */ --portal-art-indigo: oklch(30% 0.07 165); --portal-art-violet: oklch(55% 0.17 155); --portal-art-pink: oklch(76% 0.18 135); --portal-art-glow: oklch(87% 0.09 155); /* ---- typography ---- */ --portal-font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; --portal-font-heading: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif; --portal-font-numeric: "Space Grotesk", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --portal-text-page-title: clamp(1.5rem, 1.2vw + 1.1rem, 2rem); /* ---- page width: PC時の最大幅 1360px (2026-07-24 ユーザー指示) ---- */ --page-max: 85rem; /* ---- shape & depth ---- */ --portal-radius-card: 8px; --portal-radius-control: 10px; --portal-radius-pill: 999px; --portal-shadow-float: 0 8px 24px oklch(20% 0.02 260 / 0.1); /* ---- legacy semantic remap ---- * portal-v2 ページ内で legacy CSS が描画する要素(フォーム等)を * コバルト系に馴染ませる。legacy ページには影響しない。 */ --color-paper: var(--portal-paper); --color-paper-2: oklch(95% 0.008 160); --color-paper-3: oklch(92.5% 0.01 160); --color-rule: var(--portal-rule); --color-rule-2: var(--portal-rule-strong); --color-muted: var(--portal-muted); --color-ink: var(--portal-ink); --color-ink-2: oklch(15% 0.02 165); --color-accent: var(--portal-primary); --color-accent-deep: var(--portal-primary-deep); --color-accent-wash: var(--portal-primary-wash); --color-focus: var(--portal-focus); --font-display: var(--portal-font-heading); --font-body: var(--portal-font-body); --font-outlier: var(--portal-font-numeric); --radius-card: var(--portal-radius-card); --radius-inner: var(--portal-radius-control); }