/* ============================================================================ * fb-theming.css — THEME-0 / M1 世界観テーマプリセット (2層方式) トークン層 * ---------------------------------------------------------------------------- * ISOLATED `--fb-*` namespace. Sits ALONGSIDE the existing --digi-/--ds-/--dc- * layers (does NOT replace or read them). Head-linked from index.html so the * tokens are parsed before first paint (FOUC-free). * * 2 LAYERS: * SKELETON (data-fb-skeleton: serene|aurora) owns neutrals (bg/surface/text/ * border), radius/shadow/motion, and the TREATMENT of accent colors. * PALETTE (data-fb-palette: 6 ids) owns chroma only (primary/accent/axis/ring). * The same palette renders differently per skeleton (serene=thin soft edge, * aurora=glowing edge) — that is the whole point of the split. * * Values authored by Opus 4.8 (spec Part A briefs §3.2/§3.3), adversarially * reviewed (contract + coherence), WCAG-AA + ΔE-distinctness verified * deterministically. PLATFORM DEFAULT = serene + business_blue. * Selection (which skeleton/palette per reseller) lives in code+DB, NOT here. * ==========================================================================*/ /* ===== :root — global tokens + PLATFORM DEFAULT (serene skeleton + business_blue) ===== * Acts as the safe fallback when no data-fb-* attribute is resolved. */ :root { /* typography (shared by all palettes in v1) */ --fb-font-sans: 'Inter', system-ui, -apple-system, 'Noto Sans JP', sans-serif; --fb-font-display: 'Inter', system-ui, 'Noto Sans JP', sans-serif; --fb-font-size-base: 16px; /* skeleton: serene (light) — default */ --fb-bg: #FAFAF8; --fb-bg-elevated: #FFFFFF; --fb-bg-gradient: linear-gradient(180deg, #FBFBF9 0%, #F4F4F1 100%); --fb-bg-glow: none; --fb-surface: #FFFFFF; --fb-surface-2: #F5F5F1; --fb-text: #1F1F1B; --fb-text-muted: #5C5C56; --fb-border: #E7E5DF; --fb-radius-xs: 4px; --fb-radius-sm: 8px; --fb-radius-md: 12px; --fb-radius-lg: 16px; --fb-radius-xl: 24px; --fb-shadow-sm: 0 1px 2px rgba(31, 31, 27, 0.04), 0 1px 3px rgba(31, 31, 27, 0.04); --fb-shadow-md: 0 2px 6px rgba(31, 31, 27, 0.05), 0 8px 20px rgba(31, 31, 27, 0.06); --fb-shadow-lg: 0 4px 10px rgba(31, 31, 27, 0.05), 0 18px 36px rgba(31, 31, 27, 0.08); --fb-border-width: 1px; --fb-motion-fast: 100ms; --fb-motion-base: 160ms; --fb-motion-slow: 300ms; --fb-ease: cubic-bezier(0.33, 0, 0.2, 1); --fb-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* palette: business_blue (light) — default */ --fb-primary: #2563eb; --fb-primary-fg: #ffffff; --fb-accent: #0ea5e9; --fb-axis-courage: #1d4ed8; --fb-axis-connection: #0ea5e9; --fb-axis-contribution: #818cf8; --fb-ring-fresh: #dbeafe; --fb-ring-regular: #93c5fd; --fb-ring-deep: #1d4ed8; --fb-ring-self: #94a3b8; } /* ===== SKELETON: aurora (dark / neon command-center) ======================= */ :root[data-fb-skeleton='aurora'] { --fb-bg: #0A0B16; --fb-bg-elevated: #10122A; --fb-bg-gradient: radial-gradient(120% 95% at 8% -10%, color-mix(in srgb, var(--fb-primary) 26%, transparent) 0%, transparent 46%), radial-gradient(115% 90% at 105% 8%, color-mix(in srgb, var(--fb-accent) 22%, transparent) 0%, transparent 50%), conic-gradient(from 215deg at 50% 130%, color-mix(in srgb, var(--fb-primary) 16%, transparent) 0deg, transparent 90deg, color-mix(in srgb, var(--fb-accent) 14%, transparent) 200deg, transparent 320deg), linear-gradient(180deg, #0A0B16 0%, #07070F 100%); --fb-bg-glow: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--fb-primary) 30%, transparent) 0%, transparent 70%), radial-gradient(50% 45% at 100% 100%, color-mix(in srgb, var(--fb-accent) 24%, transparent) 0%, transparent 72%); --fb-surface: color-mix(in srgb, #1B1E3A 64%, transparent); --fb-surface-2: color-mix(in srgb, #262A4D 72%, transparent); --fb-text: #EAECFF; --fb-text-muted: #A2A7CE; --fb-border: color-mix(in srgb, #B9BEFF 26%, transparent); --fb-radius-xs: 4px; --fb-radius-sm: 7px; --fb-radius-md: 11px; --fb-radius-lg: 16px; --fb-radius-xl: 22px; --fb-shadow-sm: 0 0 0 1px color-mix(in srgb, #B9BEFF 14%, transparent), 0 8px 22px -10px rgba(4, 6, 20, 0.7); --fb-shadow-md: 0 0 0 1px color-mix(in srgb, #B9BEFF 18%, transparent), 0 14px 40px -14px rgba(4, 6, 20, 0.78), 0 0 34px -6px color-mix(in srgb, var(--fb-primary) 32%, transparent); --fb-shadow-lg: 0 0 0 1px color-mix(in srgb, #B9BEFF 22%, transparent), 0 28px 70px -22px rgba(2, 3, 12, 0.85), 0 0 58px -4px color-mix(in srgb, var(--fb-accent) 34%, transparent); --fb-border-width: 1px; --fb-motion-fast: 140ms; --fb-motion-base: 220ms; --fb-motion-slow: 480ms; --fb-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --fb-ease-emphasized: cubic-bezier(0.34, 1.32, 0.42, 1); /* extra (neutral, justified): glass specular highlight + global glow scalar */ --fb-surface-highlight: color-mix(in srgb, #FFFFFF 12%, transparent); --fb-glow-alpha: 0.5; } /* ===== PALETTE layer (chroma only) — light values; 6 presets =============== * IDs reuse themePresets.ts for cross-product coherence (future unification). */ :root[data-fb-palette='business_blue'] { --fb-primary:#2563eb; --fb-primary-fg:#ffffff; --fb-accent:#0ea5e9; --fb-axis-courage:#1d4ed8; --fb-axis-connection:#0ea5e9; --fb-axis-contribution:#818cf8; --fb-ring-fresh:#dbeafe; --fb-ring-regular:#93c5fd; --fb-ring-deep:#1d4ed8; --fb-ring-self:#94a3b8; } :root[data-fb-palette='feminine_rose'] { --fb-primary:#e11d48; --fb-primary-fg:#ffffff; --fb-accent:#f97316; --fb-axis-courage:#be123c; --fb-axis-connection:#fb7185; --fb-axis-contribution:#ec4899; --fb-ring-fresh:#ffe4ec; --fb-ring-regular:#fda4c0; --fb-ring-deep:#be123c; --fb-ring-self:#a8a29e; } :root[data-fb-palette='natural_green'] { --fb-primary:#16a34a; --fb-primary-fg:#0b1220; --fb-accent:#84cc16; --fb-axis-courage:#15803d; --fb-axis-connection:#10b981; --fb-axis-contribution:#65a30d; --fb-ring-fresh:#dcfce7; --fb-ring-regular:#86efac; --fb-ring-deep:#15803d; --fb-ring-self:#9ca3af; } :root[data-fb-palette='premium_gold'] { --fb-primary:#d97706; --fb-primary-fg:#0b1220; --fb-accent:#ea580c; --fb-axis-courage:#b45309; --fb-axis-connection:#f59e0b; --fb-axis-contribution:#a16207; --fb-ring-fresh:#fef3c7; --fb-ring-regular:#fcd34d; --fb-ring-deep:#b45309; --fb-ring-self:#a8a29e; } :root[data-fb-palette='modern_purple'] { --fb-primary:#7c3aed; --fb-primary-fg:#ffffff; --fb-accent:#d946ef; --fb-axis-courage:#6d28d9; --fb-axis-connection:#a855f7; --fb-axis-contribution:#c026d3; --fb-ring-fresh:#ede9fe; --fb-ring-regular:#c4b5fd; --fb-ring-deep:#6d28d9; --fb-ring-self:#a1a1aa; } :root[data-fb-palette='calm_teal'] { --fb-primary:#0d9488; --fb-primary-fg:#0b1220; --fb-accent:#0891b2; --fb-axis-courage:#0f766e; --fb-axis-connection:#06b6d4; --fb-axis-contribution:#059669; --fb-ring-fresh:#ccfbf1; --fb-ring-regular:#5eead4; --fb-ring-deep:#0f766e; --fb-ring-self:#94a3b8; } /* ===== aurora onDark lifts (brighter chroma that pops on navy) ============== */ /* onDark = aurora-lifted chroma (brighter, pops on the navy canvas). --fb-primary-fg: lifted to dark for business_blue/feminine_rose/modern_purple (their light fg was white, but the lifted primary is light → dark text needed, WCAG-AA verified). natural_green/premium_gold/calm_teal already use dark fg in their light palette and correctly inherit it (white would fail AA on them). --fb-ring-*: lifted onDark in M5 (rows below). Rings are a light→deep PROGRESSION (not an accent): on the navy canvas the light --fb-ring-deep (a dark base hex) sinks, so deep is raised to a navy-legible mid tone (family-matched to the lifted axis), regular sits between, and fresh (already pale) is kept. --fb-ring-self (neutral slate) reads on navy and is kept (the SelfPill is a solid full-opacity mark). The aurora .fb-ring-dot treatment (white core + glow) still aids the legend dots. Values authored by Opus 4.8, finalized in the M5 6×2 visual QA (spec §6 / D4). */ :root[data-fb-skeleton='aurora'][data-fb-palette='business_blue'] { --fb-primary:#4f8ff7; --fb-primary-fg:#0b1220; --fb-accent:#22d3ee; --fb-axis-courage:#60a5fa; --fb-axis-connection:#38bdf8; --fb-axis-contribution:#818cf8; --fb-ring-deep:#60a5fa; --fb-ring-regular:#93c5fd; --fb-ring-fresh:#dbeafe; } :root[data-fb-skeleton='aurora'][data-fb-palette='feminine_rose'] { --fb-primary:#fb7185; --fb-primary-fg:#0b1220; --fb-accent:#fb923c; --fb-axis-courage:#f43f5e; --fb-axis-connection:#fda4af; --fb-axis-contribution:#f472b6; --fb-ring-deep:#fb7185; --fb-ring-regular:#fda4af; --fb-ring-fresh:#ffe4ec; } :root[data-fb-skeleton='aurora'][data-fb-palette='natural_green'] { --fb-primary:#4ade80; --fb-accent:#a3e635; --fb-axis-courage:#34d399; --fb-axis-connection:#2dd4bf; --fb-axis-contribution:#a3e635; --fb-ring-deep:#4ade80; --fb-ring-regular:#86efac; --fb-ring-fresh:#dcfce7; } :root[data-fb-skeleton='aurora'][data-fb-palette='premium_gold'] { --fb-primary:#fbbf24; --fb-accent:#f97316; --fb-axis-courage:#f59e0b; --fb-axis-connection:#fde047; --fb-axis-contribution:#fdba74; --fb-ring-deep:#fbbf24; --fb-ring-regular:#fcd34d; --fb-ring-fresh:#fef3c7; } :root[data-fb-skeleton='aurora'][data-fb-palette='modern_purple'] { --fb-primary:#a78bfa; --fb-primary-fg:#0b1220; --fb-accent:#e879f9; --fb-axis-courage:#8b5cf6; --fb-axis-connection:#c084fc; --fb-axis-contribution:#e879f9; --fb-ring-deep:#a78bfa; --fb-ring-regular:#c4b5fd; --fb-ring-fresh:#ede9fe; } :root[data-fb-skeleton='aurora'][data-fb-palette='calm_teal'] { --fb-primary:#2dd4bf; --fb-accent:#5eead4; --fb-axis-courage:#14b8a6; --fb-axis-connection:#22d3ee; --fb-axis-contribution:#34d399; --fb-ring-deep:#2dd4bf; --fb-ring-regular:#5eead4; --fb-ring-fresh:#ccfbf1; } /* =========================================================================== * THEME-1 / T1 — SHELL BRIDGE: derive the existing `--dc-*` shell tokens from * the `--fb-*` theme so the chrome (TopBar / LeftSidebar / BusinessKitSidebar) * follows the active skeleton/palette WITHOUT touching the shell components. * Those components already consume `--dc-*`; we only REDEFINE the tokens here * (minimal blast — no markup change). * * The shell's `--dc-*` defaults ship from the external CDN * (cdn.jsdelivr.net/gh/diginaka/digicollab-design-tokens@latest/tokens.css, :root). * These bridge rules use the skeleton attribute selector (specificity (0,2,0)) * which beats the CDN `:root` (0,1,0), so the bridge wins whenever a skeleton is * set — and the index.html pre-paint script ALWAYS sets data-fb-skeleton. * * ⚠️ brandService.applyBrandToDocument() injects `--dc-primary-on-*` as INLINE * styles on (default brand #1B6B3A) on every load — an inline style always * beats a stylesheet, so the `--dc-primary-on-dark`/`-muted` lines below are INERT * at runtime today (the legacy brand layer owns the shell ACCENT). They are kept * for the drift guard + forward-compat with the M6 brand/theme unification, at * which point the accent will follow `--fb-primary`. The EFFECTIVE THEME-1 win is * the 6 NEUTRAL tokens (bg-shell / bg-shell-elevated / border-shell / text-on-shell * / text-on-shell-muted / warning), which brandService never touches: they make the * aurora shell a legible navy glass and keep serene pixel-identical. (spec §3 / D4) * ==========================================================================*/ /* serene: 1:1 with the current CDN shell values (dark-ship = no regression). */ :root[data-fb-skeleton='serene'] { --dc-bg-shell: #0F1115; --dc-bg-shell-elevated: #181B22; --dc-border-shell: #2A2E37; --dc-text-on-shell: #E4E6EB; --dc-text-on-shell-muted: #8B92A1; --dc-primary-on-dark: #10D478; /* inert at runtime — brand inline wins */ --dc-primary-on-dark-muted: #0BA85E; /* inert at runtime — brand inline wins */ --dc-warning: #F59E0B; } /* aurora: navy glass shell + (forward-compat) palette-following accent. Neutrals derive from the aurora `--fb-*` skeleton; accent derives from `--fb-primary` (effective once the brand inline injection is reconciled at M6). */ :root[data-fb-skeleton='aurora'] { --dc-bg-shell: color-mix(in srgb, var(--fb-bg) 78%, #000 22%); --dc-bg-shell-elevated: rgba(255, 255, 255, 0.06); --dc-border-shell: var(--fb-border); --dc-text-on-shell: var(--fb-text); --dc-text-on-shell-muted: var(--fb-text-muted); --dc-primary-on-dark: var(--fb-primary); --dc-primary-on-dark-muted: color-mix(in srgb, var(--fb-primary) 80%, #fff 20%); --dc-warning: #F59E0B; /* status hue is skeleton-agnostic; pinned in both blocks for symmetry */ } /* =========================================================================== * THEME-2 / 面展開 — CONTENT BRIDGE: derive the existing `--ds-*` CONTENT tokens * (Design System for the Self/Profile/6-Layer view + the Iteration-3.5 全画面統一 * vocabulary: cards / pills / tabs / CTAs / area badges) from the `--fb-*` theme, * so EVERY feature surface (deliver / my-funnels / create / courses / hub / * profile-copilot …) follows the active skeleton+palette WITHOUT touching any * .tsx. Same technique as the THEME-1 SHELL BRIDGE above, one layer in. * * The `--ds-*` defaults ship from src/styles/design-tokens.css (:root, (0,1,0)). * This block uses the skeleton attribute selector (specificity (0,2,0)) which * beats that :root, so the bridge wins ONLY when data-fb-skeleton='aurora' is set. * design-tokens.css :root stays the DEFAULT → serene is byte-identical (no `--ds-*` * is redefined for serene anywhere). (spec THEME-2) * * NOT bridged (semantic colors — deferred to a later accent-tuning pass): * --ds-color-courage/connection/contribution, --ds-layer-*, --ds-area-*. * ==========================================================================*/ :root[data-fb-skeleton='aurora'] { /* neutrals → aurora glass (the canvas gradient/grid bleeds through behind cards). --ds-color-bg: transparent is load-bearing — it stops the cream/white page fill from painting over the aurora canvas, which is what makes the surface "dive". */ --ds-color-bg: transparent; --ds-color-surface: var(--fb-surface); --ds-color-surface-alt: var(--fb-surface-2); --ds-color-border: var(--fb-border); --ds-color-border-strong: color-mix(in srgb, var(--fb-border) 70%, #fff 30%); --ds-text-primary: var(--fb-text); --ds-text-secondary: var(--fb-text-muted); --ds-text-muted: color-mix(in srgb, var(--fb-text-muted) 78%, transparent); /* --ds-text-on-dark stays #FFFFFF (inherited from :root) */ /* aurora glow edges on .ds-card / .ds-pill / .ds-layer-card */ --ds-shadow-sm: var(--fb-shadow-sm); --ds-shadow-md: var(--fb-shadow-md); --ds-shadow-lg: var(--fb-shadow-lg); /* coupling re-pin (REQUIRED): design-tokens.css defaults --ds-tab-active-bg to var(--ds-text-primary). Lifting text-primary to a light tone (above) would otherwise paint the selected tab light-on-light. Re-pin to the palette primary + its AA-verified fg so the active tab stays legible. */ --ds-tab-active-bg: var(--fb-primary); --ds-tab-active-text: var(--fb-primary-fg); /* primary CTA follows the palette (達也さん選択). Text = --fb-primary-fg (NOT a hard white): the light palettes (natural_green / premium_gold / calm_teal) ship a dark fg, so inheriting it keeps WCAG-AA on every palette. */ --ds-action-primary-bg: var(--fb-primary); --ds-action-primary-bg-hover: color-mix(in srgb, var(--fb-primary) 82%, #fff 18%); --ds-action-primary-text: var(--fb-primary-fg); } /* THEME-2 — the ONE non-token rule in this bridge, and why it must exist: * .ds-tab-count (the count badge inside a tab) HARDCODES `color: var(--ds-text-on-dark)` (#FFFFFF) * in design-tokens.css, so the token redefinition above cannot reach it. In aurora the active tab's * bg flips to the LIGHT --fb-primary (per palette), leaving white-on-light = 1.5–2.5:1 → fails WCAG-AA * on ALL 6 palettes. This is the same "light-palette text drop" the re-pins above guard for the tab * LABEL — the badge is just a sub-element the pure token bridge can't address. Re-point the ACTIVE * badge text to the palette fg (#0b1220, the SAME AA-verified --fb-primary-fg used by * --ds-tab-active-text / --ds-action-primary-text) → 7.4–12.2:1 PASS. aurora-only, in-file, NO new * color. .ds-tab-count is rendered live (src/components/workspace/ModeSwitcher.tsx). (spec THEME-2 §QA) */ :root[data-fb-skeleton='aurora'] .ds-tab--active .ds-tab-count { color: var(--fb-primary-fg); } /* =========================================================================== * THEME-4 / EDITOR-CHROME ACTIVATION — aurora coupling, marker-scoped. * ---------------------------------------------------------------------------- * THEME-3 shipped the groundwork (digi NEUTRAL channel-triplets + digi-bg-elevated, * serene-identical, aurora UNCHANGED). THEME-4 turns aurora ON for the editor CHROME * by overriding the digi NEUTRAL triplets to navy — but ONLY inside a `.fb-chrome-surface` * marker AND only under aurora. So: * - serene: the override never applies (gated on data-fb-skeleton='aurora') = byte-identical. * - aurora OUTSIDE the marker: digi-* stays serene (the 9 var(--digi-*) direct-consume * pages use a different token form and are immune; editor MODALS + the form-heavy * editing BODIES — UnifiedEditorPanel / StepResultPanel / BrandSettings / PromptEditor — * stay serene-light, readable, no UA-white-input footgun; full body theming → THEME-5). * - aurora INSIDE the marker: the chrome (canvas + cards + bars + headers) dives navy. * The marker is placed surgically on the chrome surfaces (FlowPage content-area + publish * row, ActionBar, FlowFooter, SlidePanel bars, AdminPage header, MyFunnels ThreePaneShell), * NOT on the page/aside/admin-content roots, precisely so the cascade does NOT reach the * inline-rendered modals (createPortal=0 across src) or the form-heavy bodies. Each marked * surface is bg+fg co-converted (hardcoded light bg → bg-digi-bg-elevated, byte-identical * white→white; non-token text → digi tokens) so no themed-fg×hardcoded-light-bg invisible * pair survives. (spec THEME-4) * ==========================================================================*/ :root[data-fb-skeleton='aurora'] .fb-chrome-surface { --digi-bg-rgb: 10 11 22; /* ≈ --fb-bg #0A0B16 */ --digi-bg-elevated-rgb: 16 18 42; /* ≈ --fb-bg-elevated #10122A */ --digi-border-rgb: 56 58 83; /* navy-legible hairline */ --digi-text-rgb: 234 236 255; /* ≈ --fb-text #EAECFF */ --digi-text-muted-rgb: 162 167 206; /* ≈ --fb-text-muted #A2A7CE */ } /* The brand-green / -green-dark HEX literals are hardcoded below (NOT a new :root custom property): `--digi-green` was historically UNDEFINED and is consumed elsewhere with a fallback (`var(--digi-green, #16a34a)` in MemberActionNotificationRow), so DEFINING it in :root would silently recolor that surface. The literals here equal the tailwind `digi-green` (#1B6B3A) / `digi-green-dark` (#144D2A) HEX → byte-identical serene. */ /* Primary FILL CTA. serene = brand green (byte-identical to `bg-digi-green text-white`); aurora inside the chrome = palette primary + its AA-verified fg (so the reseller's color shows; `--fb-primary-fg` is dark on the light-palettes → no white-on-light split). */ .fb-cta-primary { background: #1B6B3A; color: #fff; } .fb-cta-primary:hover { background: #144D2A; } :root[data-fb-skeleton='aurora'] .fb-chrome-surface .fb-cta-primary { background: var(--fb-primary); color: var(--fb-primary-fg); } :root[data-fb-skeleton='aurora'] .fb-chrome-surface .fb-cta-primary:hover { background: color-mix(in srgb, var(--fb-primary) 85%, #fff 15%); } /* Accent GREEN text. serene = brand green (byte-identical to `text-digi-green` = #1B6B3A); aurora inside the chrome = lifted navy-legible green (digi green #1B6B3A on navy is ~2.9:1 = fails WCAG-AA; #4ade80 on navy ≈ 10:1 = passes). Stays GREEN (the digi accent), distinct from the palette-following .fb-cta-primary. (spec THEME-4 §3) */ .fb-text-accent { color: #1B6B3A; } :root[data-fb-skeleton='aurora'] .fb-chrome-surface .fb-text-accent { color: #4ade80; } /* Danger (delete) text. serene = red-600 (byte-identical to `text-red-600` = #DC2626, 4.8:1 on white); aurora inside the chrome = lifted red-400 (#f87171 ≈ 6.7:1 on the navy kebab menus; red-600 on navy is 3.8:1 = fails AA). Same skeleton-aware pattern as .fb-text-accent — needed because THEME-4 darkens the StepCard/BranchCard kebab menus to navy, on which the original red-600 delete label drops below AA. (THEME-4 verification) */ .fb-text-danger { color: #DC2626; } :root[data-fb-skeleton='aurora'] .fb-chrome-surface .fb-text-danger { color: #f87171; } /* =========================================================================== * TREATMENT — how each skeleton APPLIES the accent chroma. * Classes (.fb-canvas/.fb-surface/.fb-axis-card/.fb-ring-dot) are adopted by * components: .fb-axis-card in M4 (HomePage AxisCard), .fb-surface + .fb-ring-dot * in M5 (RelationshipRingsView). Chroma ONLY via accent vars. * ==========================================================================*/ /* ring-dot stage color — consumes the 4 palette ring tokens (skeleton-agnostic) */ .fb-ring-dot { --fb-ring-c: var(--fb-ring-regular); } .fb-ring-dot[data-ring='fresh'] { --fb-ring-c: var(--fb-ring-fresh); } .fb-ring-dot[data-ring='regular'] { --fb-ring-c: var(--fb-ring-regular); } .fb-ring-dot[data-ring='deep'] { --fb-ring-c: var(--fb-ring-deep); } .fb-ring-dot[data-ring='self'] { --fb-ring-c: var(--fb-ring-self); } /* ---- serene treatment: thin soft accent edge, soft diffuse shadow, no glow -- */ :root[data-fb-skeleton='serene'] .fb-axis-card { position: relative; background: var(--fb-surface); color: var(--fb-text); border: var(--fb-border-width) solid var(--fb-border); border-radius: var(--fb-radius-lg); box-shadow: var(--fb-shadow-sm); padding: 20px 22px; border-left: 3px solid var(--fb-axis-courage); opacity: 0; transform: translateY(8px); animation: fb-serene-enter var(--fb-motion-slow) var(--fb-ease) forwards; transition: box-shadow var(--fb-motion-base) var(--fb-ease), transform var(--fb-motion-base) var(--fb-ease), border-color var(--fb-motion-base) var(--fb-ease); } :root[data-fb-skeleton='serene'] .fb-axis-card[data-axis='connection'] { border-left-color: var(--fb-axis-connection); } :root[data-fb-skeleton='serene'] .fb-axis-card[data-axis='contribution'] { border-left-color: var(--fb-axis-contribution); } :root[data-fb-skeleton='serene'] .fb-axis-card:hover { box-shadow: var(--fb-shadow-md); transform: translateY(-1px); } /* serene .fb-surface (M5/T3a): neutral panel — 現行 bg-white / shadow-card / border 相当。 .fb-axis-card と対称構造だが、汎用パネルなので軸ロジック(border-left)と enter アニメは 持たない(静的)。aurora 治療は下の `.fb-surface, .fb-axis-card` 共通ブロックが所有。 */ :root[data-fb-skeleton='serene'] .fb-surface { background: var(--fb-surface); color: var(--fb-text); border: var(--fb-border-width) solid var(--fb-border); border-radius: var(--fb-radius-lg); box-shadow: var(--fb-shadow-sm); } /* serene .fb-canvas (THEME-1/T2): the app content canvas (AppLayout root) follows the skeleton. Neutral page surface = --fb-bg (serene #FAFAF8 — the same page bg the M3 login screens already ship). Background ONLY — no `color` cascade — so serene inherited text stays exactly as today (dark-ship). The aurora `.fb-canvas` treatment (navy gradient/grid + color) is owned by the aurora block below and is left untouched (spec §3: "aurora は M1 既存を温存"). */ :root[data-fb-skeleton='serene'] .fb-canvas { background-color: var(--fb-bg); } :root[data-fb-skeleton='serene'] .fb-ring-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fb-ring-c); box-shadow: none; transition: transform var(--fb-motion-fast) var(--fb-ease), background-color var(--fb-motion-fast) var(--fb-ease); } :root[data-fb-skeleton='serene'] .fb-ring-dot:hover { transform: scale(1.12); } @keyframes fb-serene-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---- aurora treatment: navy canvas + edge glow, glass panels, glowing edges -- * NOTE: the aurora skeleton INTENTIONALLY restyles bare `body` (a dark full-page * skeleton must own the page background). This overrides src/index.css's body bg, * but ONLY when [data-fb-skeleton='aurora'] is set — the dormancy boundary is the * skeleton attribute, which is never set by default (default = serene via :root). * Adopting screens may also opt in via the .fb-canvas class. */ :root[data-fb-skeleton='aurora'] body, :root[data-fb-skeleton='aurora'] .fb-canvas { background-color: var(--fb-bg); background-image: linear-gradient(color-mix(in srgb, #FFFFFF 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #FFFFFF 3%, transparent) 1px, transparent 1px), var(--fb-bg-gradient); background-size: 44px 44px, 44px 44px, auto, auto, auto, auto; background-attachment: fixed; color: var(--fb-text); } :root[data-fb-skeleton='aurora'] .fb-surface, :root[data-fb-skeleton='aurora'] .fb-axis-card { background: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 5%, transparent) 0%, transparent 34%), var(--fb-surface); -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%); border: var(--fb-border-width) solid var(--fb-border); border-radius: var(--fb-radius-lg); box-shadow: var(--fb-shadow-md), inset 0 1px 0 0 var(--fb-surface-highlight); color: var(--fb-text); } :root[data-fb-skeleton='aurora'] .fb-axis-card { position: relative; border-color: color-mix(in srgb, var(--fb-axis-courage) 60%, var(--fb-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fb-axis-courage) 70%, transparent), 0 0 26px -2px color-mix(in srgb, var(--fb-axis-courage) calc(var(--fb-glow-alpha) * 90%), transparent), 0 18px 46px -18px rgba(2, 3, 12, 0.8), inset 0 1px 0 0 var(--fb-surface-highlight); animation: fb-aurora-enter var(--fb-motion-slow) var(--fb-ease-emphasized) both; transition: transform var(--fb-motion-base) var(--fb-ease-emphasized), box-shadow var(--fb-motion-base) var(--fb-ease), border-color var(--fb-motion-fast) var(--fb-ease); } :root[data-fb-skeleton='aurora'] .fb-axis-card[data-axis='connection'] { border-color: color-mix(in srgb, var(--fb-axis-connection) 60%, var(--fb-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fb-axis-connection) 70%, transparent), 0 0 26px -2px color-mix(in srgb, var(--fb-axis-connection) calc(var(--fb-glow-alpha) * 90%), transparent), 0 18px 46px -18px rgba(2, 3, 12, 0.8), inset 0 1px 0 0 var(--fb-surface-highlight); } :root[data-fb-skeleton='aurora'] .fb-axis-card[data-axis='contribution'] { border-color: color-mix(in srgb, var(--fb-axis-contribution) 60%, var(--fb-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fb-axis-contribution) 70%, transparent), 0 0 26px -2px color-mix(in srgb, var(--fb-axis-contribution) calc(var(--fb-glow-alpha) * 90%), transparent), 0 18px 46px -18px rgba(2, 3, 12, 0.8), inset 0 1px 0 0 var(--fb-surface-highlight); } :root[data-fb-skeleton='aurora'] .fb-axis-card:hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fb-axis-courage) 90%, transparent), 0 0 40px 0 color-mix(in srgb, var(--fb-axis-courage) calc(var(--fb-glow-alpha) * 120%), transparent), 0 26px 64px -20px rgba(2, 3, 12, 0.85), inset 0 1px 0 0 var(--fb-surface-highlight); } :root[data-fb-skeleton='aurora'] .fb-ring-dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, var(--fb-ring-c) 42%, color-mix(in srgb, var(--fb-ring-c) 65%, #05060F) 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fb-ring-c) 55%, transparent), 0 0 14px 0 color-mix(in srgb, var(--fb-ring-c) calc(var(--fb-glow-alpha) * 110%), transparent), 0 0 4px 0 #FFFFFF; animation: fb-aurora-pulse 2400ms var(--fb-ease) infinite; } @keyframes fb-aurora-enter { from { opacity: 0; transform: translateY(10px) scale(0.965); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fb-aurora-pulse { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fb-ring-c) 55%, transparent), 0 0 12px 0 color-mix(in srgb, var(--fb-ring-c) calc(var(--fb-glow-alpha) * 90%), transparent), 0 0 4px 0 #FFFFFF; } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fb-ring-c) 75%, transparent), 0 0 22px 0 color-mix(in srgb, var(--fb-ring-c) calc(var(--fb-glow-alpha) * 130%), transparent), 0 0 6px 0 #FFFFFF; } } /* ===== reduced-motion: kill pulse / ambient / overshoot / travel ============ */ @media (prefers-reduced-motion: reduce) { :root[data-fb-skeleton='aurora'] .fb-axis-card, :root[data-fb-skeleton='aurora'] .fb-surface, :root[data-fb-skeleton='aurora'] .fb-ring-dot { animation: none !important; } :root[data-fb-skeleton='aurora'] .fb-axis-card { transition: box-shadow var(--fb-motion-fast) linear, border-color var(--fb-motion-fast) linear; } :root[data-fb-skeleton='aurora'] .fb-axis-card:hover { transform: none; } :root[data-fb-skeleton='aurora'] body, :root[data-fb-skeleton='aurora'] .fb-canvas { background-attachment: scroll; } :root[data-fb-skeleton='serene'] .fb-axis-card { transform: none; opacity: 1; animation: none; transition: box-shadow var(--fb-motion-fast) linear; } :root[data-fb-skeleton='serene'] .fb-axis-card:hover { transform: none; box-shadow: var(--fb-shadow-md); } :root[data-fb-skeleton='serene'] .fb-ring-dot, :root[data-fb-skeleton='serene'] .fb-ring-dot:hover { transition: none; transform: none; } } /* =========================================================================== * SKELETON: editorial (light / paper · ink) — THEME-EDITORIAL (2026-06-16) * ---------------------------------------------------------------------------- * 検証専用骨格 (presets.ts preview=true)。serene/aurora と同一の --fb-* 構造で、 * オフホワイト紙基調・低彩度・モノクロ＋アクセント1色・明朝の見出し・極薄罫線・ * 無地背景 (グラデ/グロー/粒子なし)・最小モーション。中立色のみ所有し、彩度 (accent) * はパレット層 (--fb-primary 等) に委譲する=骨格×パレット直交を維持。light ゆえ aurora * のような per-palette onDark lift ブロックは不要 (serene と同じくパレット light 値を直結)。 * 露出は querystring (?fb_skeleton=editorial) と /dev/theme-banner プレビューのみ。 * append-only・既存セレクタ不変 (serene byte-identical / aurora 不変)。 * ==========================================================================*/ :root[data-fb-skeleton='editorial'] { /* typography: 見出しは明朝 (index.html で読込済の Shippori Mincho)・本文 sans は据置 */ --fb-font-display: 'Shippori Mincho', 'Noto Serif JP', Georgia, 'Times New Roman', serif; /* neutrals — 温かいオフホワイト紙 + 墨インク (本文≈14:1 / muted≈5:1 AA) */ --fb-bg: #F2F0EA; --fb-bg-elevated: #FBFAF6; --fb-bg-gradient: none; /* 無地 */ --fb-bg-glow: none; /* グローなし */ --fb-surface: #FFFFFF; --fb-surface-2: #ECEAE3; --fb-text: #1A1916; --fb-text-muted: #6B6862; --fb-border: #D9D6CD; --fb-border-width: 1px; /* radius — 抑制 (印刷的・直線寄り) */ --fb-radius-xs: 2px; --fb-radius-sm: 3px; --fb-radius-md: 4px; --fb-radius-lg: 6px; --fb-radius-xl: 8px; /* shadow — ほぼフラット (分離は罫線と余白が担う) */ --fb-shadow-sm: 0 1px 1px rgba(26, 25, 22, 0.03); --fb-shadow-md: 0 1px 2px rgba(26, 25, 22, 0.04); --fb-shadow-lg: 0 2px 6px rgba(26, 25, 22, 0.05); /* motion — 最小・跳ねない */ --fb-motion-fast: 80ms; --fb-motion-base: 120ms; --fb-motion-slow: 200ms; --fb-ease: cubic-bezier(0.4, 0, 0.2, 1); --fb-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1); } /* editorial treatment: 無地の紙面 + 極薄罫線で仕切る白シート (グロー/ガラスなし)。 serene と同型だが軸ロジック (border-left) も enter アニメも持たない=静的・最小モーション。 */ :root[data-fb-skeleton='editorial'] .fb-canvas { background-color: var(--fb-bg); } :root[data-fb-skeleton='editorial'] .fb-surface { background: var(--fb-surface); color: var(--fb-text); border: var(--fb-border-width) solid var(--fb-border); border-radius: var(--fb-radius-lg); box-shadow: var(--fb-shadow-sm); } /* =========================================================================== * SKELETON: bloom (light / warm · soft) — THEME-BLOOM (2026-06-16) * ---------------------------------------------------------------------------- * 検証専用骨格 (presets.ts preview=true)。「質感 (柔らかさ・温かさ)」で女性・柔らか層を * 狙う骨格。serene/aurora/editorial と同一の --fb-* 構造で、温かいオフホワイト (紙の冷たさを * 避ける) ・大きめの角丸 (rounded) ・細く柔らかい罫線・丸み寄りの親しみサンセリフ (字間/行間 * ゆったり) ・ふんわりした最小モーション (跳ねない) ・無地背景 (グラデ/グロー/粒子なし=editorial * と同じく決定論)。中立色 (neutrals) と質感 (radius/shadow/motion/font) だけを所有し、彩度 * (accent=--fb-primary 等) はパレット層に委譲する=骨格×パレット直交を厳守 (= 配色で女性らしさを * 出さない・Bloom を特定パレット固定にしない)。light ゆえ aurora のような per-palette onDark * lift ブロックは不要 (serene/editorial と同じくパレット light 値を直結)。露出は querystring * (?fb_skeleton=bloom) と /dev/theme-banner プレビューのみ。append-only・既存セレクタ不変 * (serene byte-identical / aurora・editorial 不変)。 * * 書体 (確定は承認後 / 案1): 見出し = Zen Maru Gothic (丸ゴシックの温かみ)、本文 = * M PLUS Rounded 1c (均質・高可読の丸ゴ・子どもっぽくならない)。どちらも index.html / * banner-frame.html で読込済。フォールバックは Hiragino Maru Gothic ProN → Noto Sans JP。 * * neutrals AA (deterministic 検証済): 本文 ink #2E2924 on surface 14.1:1 / muted #6B6258 * on surface 5.8:1・on bg 5.4:1 (いずれも AA 通常テキスト >=4.5 を満たす)。 * ==========================================================================*/ :root[data-fb-skeleton='bloom'] { /* typography: 丸み・温かみ寄りの親しみサンセリフ (見出し=Zen Maru Gothic・本文=M PLUS Rounded 1c) */ --fb-font-sans: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Noto Sans JP', system-ui, sans-serif; --fb-font-display: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Noto Sans JP', sans-serif; /* neutrals — 温かいオフホワイト〜淡いウォーム (紙の冷たさを避ける) + 温かい墨インク */ --fb-bg: #FAF3EB; /* 温かいクリーム地 (warm cream) */ --fb-bg-elevated: #FFFCF8; /* 温かい白 (warm white) */ --fb-bg-gradient: none; /* 無地 (グラデなし=決定論) */ --fb-bg-glow: none; /* グローなし */ --fb-surface: #FFFCF8; /* 温かい白シート */ --fb-surface-2: #F3EADF; /* 柔らかいウォーム */ --fb-text: #2E2924; /* 温かい墨 (純黒でない brown-black) */ --fb-text-muted: #6B6258; /* 温かいミュート (AA >=4.5) */ --fb-border: #ECE2D5; /* 細く柔らかい罫線 (soft warm hairline) */ --fb-border-width: 1px; /* radius — 大きめの角丸 (柔らかく・硬いシャープなエッジを避ける) */ --fb-radius-xs: 6px; --fb-radius-sm: 10px; --fb-radius-md: 16px; --fb-radius-lg: 22px; --fb-radius-xl: 32px; /* shadow — 柔らかく拡散する温かい影 (グロー/ガラスではない・editorial の極薄より優しく浮く) */ --fb-shadow-sm: 0 1px 2px rgba(60, 46, 33, 0.04), 0 2px 8px rgba(60, 46, 33, 0.04); --fb-shadow-md: 0 2px 6px rgba(60, 46, 33, 0.05), 0 12px 28px rgba(60, 46, 33, 0.06); --fb-shadow-lg: 0 6px 16px rgba(60, 46, 33, 0.05), 0 24px 48px rgba(60, 46, 33, 0.07); /* motion — ふんわり (ごく緩いフェード/イーズ・跳ねない・aurora の駆動感とも editorial の無とも違う) */ --fb-motion-fast: 140ms; --fb-motion-base: 280ms; --fb-motion-slow: 460ms; --fb-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* gentle ease */ --fb-ease-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1); /* soft decelerate・オーバーシュートなし */ } /* bloom treatment: 無地の温かい紙面 + 細い柔らかい罫線で仕切る、大きく角丸い白シート。 serene/editorial と同型だが、軸ロジック (border-left) も enter アニメも持たない=静的・最小 モーション (ふんわりは ease/timing トークンと CTA トランジションで表現し、バナーは決定論描画)。 影は editorial の極薄 sm でなく柔らかい md=「優しく浮く」質感で editorial の印刷フラットと差別化。 */ :root[data-fb-skeleton='bloom'] .fb-canvas { background-color: var(--fb-bg); } :root[data-fb-skeleton='bloom'] .fb-surface { background: var(--fb-surface); color: var(--fb-text); border: var(--fb-border-width) solid var(--fb-border); border-radius: var(--fb-radius-xl); /* 32px — 柔らかい大きな角丸 (Bloom の質感の核) */ box-shadow: var(--fb-shadow-md); }