/* =================================================================== Quail.LEGG — Design System tokens & motifs (legg-ds.css) ------------------------------------------------------------------- 0603 素材（クリエイティブ.md / LP ドラフト）から抽出した正典トークン。 ライト基調のみ。黄=アクセント / 緑=控えめ（ステータス・グラデ終端・波紋）。 - 全 var(...) に fallback を入れ、親に依存せず単体でも動くようにする。 - 角丸はほぼ無し（シャープ）。影は最小。階層は色面と 1px ボーダーで表現。 =================================================================== */ :root{ /* ===== Neutrals (light base / warm-neutral) ===== */ --ink:#0a0a0a; /* primary text / dark surfaces */ --ink-2:#1f1f1d; /* slightly lifted dark */ --paper:#ffffff; --surface:#f4f4f1; /* soft section / fills */ --surface-2:#ecebe6; /* deeper soft */ --muted:#5e5e58; /* secondary text */ --muted-2:#8a8a82; /* tertiary / placeholder-ish */ --hairline:#e4e3dd; /* 1px borders on light */ --hairline-2:#eeede8; --hairline-dark:rgba(255,255,255,.14); /* 1px borders on dark */ --muted-dark:rgba(255,255,255,.62); /* secondary text on dark */ /* ===== Brand — egg (yellow) ＝ accent 主役 ===== */ --egg:#FEF500; /* うずら卵 / 可能性。塗り・マーカー・ハイライト・アクティブ */ --egg-soft:#FFF34D; --egg-wash:#FEFBC9; /* very-light highlight background */ --on-egg:#0a0a0a; /* 黄の上は必ず黒文字（黄は文字色に使わない） */ /* ===== Brand — leap (green) ＝ 控えめ ===== */ --leap:#18C729; /* LINE / 育った価値。グラデ終端・波紋・大きな塗りでのみ */ --leap-ink:#0C8F1E; /* 白地で文字/リンクに使える濃いめの緑 */ --leap-wash:#E7F8EA; /* very-light green background */ --on-leap:#ffffff; /* gradient — 黄 → 緑（卵から価値が育つ） */ --grad:linear-gradient(102deg,#FEF500 0%,#18C729 100%); --grad-rev:linear-gradient(282deg,#FEF500 0%,#18C729 100%); --grad-soft:linear-gradient(102deg,#FEF500 0%,#18C729 100%); /* ===== Status / utility ===== */ --error:#C0331E; --line-green:#06C755; /* 公式 LINE 緑。LINE ログイン導線でのみ使用 */ /* ===== Typography ===== */ --font-sans:'Inter','Noto Sans JP',system-ui,sans-serif; --font-cond:'DIN Condensed','DIN Condensed Bold','Oswald','Saira Condensed','Inter',sans-serif; --font-jp:'Noto Sans JP','Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; /* Type scale — core 5 sizes (CMS / 内部UI で厳守) */ --fs-xs:12px; /* mono caps, eyebrow, pill, breadcrumb, caption */ --fs-sm:14px; /* body, form, list item, link, menu */ --fs-md:18px; /* emphasized label, price, button, sidebar value */ --fs-lg:28px; /* section H1 / page heading */ --fs-xl:48px; /* hero display / account H1 */ /* marketing display — LP / ブランド面でのみ使用 */ --fs-2xl:72px; /* LP section display */ --fs-display:clamp(56px,8.5vw,124px); /* LP / signin の巨大ブランド display */ /* spacing rhythm */ --gut:24px; } /* =================================================================== Brand motifs — egg silhouette / ripple "O" / gradient helpers =================================================================== */ /* 黄→緑グラデの塗り */ .legg-grad{background-image:var(--grad)} .legg-grad-soft{background-image:var(--grad-soft)} /* テキストにグラデを乗せる（見出しの一部などに） */ .legg-grad-text{ background-image:var(--grad); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } /* うずら卵シルエット（黄緑グラデ）— ヒーローのキービジュアル等 */ .legg-egg{ background-image:var(--grad); border-radius:50% 50% 49% 51% / 61% 61% 39% 39%; } /* 波紋（さざ波）— 価値の成長・伝搬。装飾バックドロップ。 repeating-radial-gradient で同心円リングを描く（SVG 不要）。 */ .legg-ripple{ background-image:repeating-radial-gradient( circle at var(--ripple-x,50%) var(--ripple-y,50%), currentColor 0 1px, transparent 1px var(--ripple-gap,26px) ); } /* 暗い面に薄く敷くドットグリッド（hero 背景） */ .legg-dots{ background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1px); background-size:22px 22px; } .legg-dots-ink{ background-image:radial-gradient(rgba(10,10,10,.06) 1px,transparent 1px); background-size:22px 22px; } /* 波紋の「O」— 文字の O を同心リングで再解釈した丸バッジ。 として見出しやロゴ脇に置く。 */ .legg-o{ display:inline-block;width:.82em;height:.82em;border-radius:50%; background: radial-gradient(circle, transparent 0 30%, currentColor 30% 40%, transparent 40% 58%, currentColor 58% 66%, transparent 66%), none; vertical-align:baseline; } /* ロゴの「.」ドット — 卵イエロー（旧ライム #c8ff00 を置換） */ .legg-dot{color:var(--egg);font-weight:700;text-shadow:0 0 10px rgba(254,245,0,.45)} /* =================================================================== Logo lockup — Quail.LEGG （UI 表示は LEGG 全大文字） =================================================================== */ .legg-logo{display:inline-flex;align-items:baseline;font-family:var(--font-sans);letter-spacing:-.02em;line-height:1;text-transform:none} .legg-logo .quail{font-weight:300;color:var(--muted)} .legg-logo .dot{color:var(--egg);font-weight:700;margin:0 1px;text-shadow:0 0 10px rgba(254,245,0,.45)} .legg-logo .legg{font-weight:700;color:var(--ink);letter-spacing:-.025em} /* dark ground variant */ .legg-logo.on-dark .quail{color:rgba(255,255,255,.78)} .legg-logo.on-dark .legg{color:#fff} /* blinking terminal cursor (ターミナル風 _ ) */ .legg-cursor{margin-left:3px;color:var(--egg);font-weight:300;display:inline-block;animation:legg-blink 1.05s steps(1) infinite} @keyframes legg-blink{50%{opacity:0}} /* =================================================================== Shared atoms — eyebrow / chip / accent underline =================================================================== */ /* eyebrow: mono caps + リード線（— ラベル） */ .legg-eyebrow{display:inline-flex;align-items:baseline;gap:12px;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .legg-eyebrow::before{content:"";width:22px;height:1px;background:var(--ink);transform:translateY(-3px);flex:none} .legg-eyebrow.on-dark{color:var(--muted-dark)} .legg-eyebrow.on-dark::before{background:#fff} /* 黄ハイライト下線（テキストを“塗って”強調。黄は文字色に使わないので塗りで効かせる） */ .legg-hl{background:linear-gradient(transparent 62%, var(--egg) 62%);padding:0 .04em} /* アクセント下線（リンク hover 等）*/ @media (prefers-reduced-motion: no-preference){ .legg-egg-float{animation:legg-float 7s ease-in-out infinite} } @keyframes legg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}