/* @jellyfish/brand-jervis — Sub-Variant Cascade (ADR-0005) * Activate per consumer by setting class on root: * Inherit-and-override: Foundation provides the Teal default; this file only * overrides --color-brand-* when a sub-variant class is active. */ /* Sub-Variant: AEGIS */ .aegis-app { --color-brand-action: var(--color-palette-subbrand-aegis); --color-brand-action-hover: var(--color-palette-subbrand-aegis); --color-brand-action-glow: color-mix(in srgb, var(--color-palette-subbrand-aegis) 18%, transparent); --color-brand-action-dim: color-mix(in srgb, var(--color-palette-subbrand-aegis) 8%, transparent); } /* Sub-Variant: MOAT */ .moat-app { --color-brand-action: var(--color-palette-subbrand-moat); --color-brand-action-hover: var(--color-palette-subbrand-moat); --color-brand-action-glow: color-mix(in srgb, var(--color-palette-subbrand-moat) 18%, transparent); --color-brand-action-dim: color-mix(in srgb, var(--color-palette-subbrand-moat) 8%, transparent); } /* Sub-Variant: KAIROS */ .kairos-app { --color-brand-action: var(--color-palette-subbrand-kairos); --color-brand-action-hover: var(--color-palette-subbrand-kairos); --color-brand-action-glow: color-mix(in srgb, var(--color-palette-subbrand-kairos) 18%, transparent); --color-brand-action-dim: color-mix(in srgb, var(--color-palette-subbrand-kairos) 8%, transparent); } /* Sub-Variant: ARGUS */ .argus-app { --color-brand-action: var(--color-palette-subbrand-argus); --color-brand-action-hover: var(--color-palette-subbrand-argus); --color-brand-action-glow: color-mix(in srgb, var(--color-palette-subbrand-argus) 18%, transparent); --color-brand-action-dim: color-mix(in srgb, var(--color-palette-subbrand-argus) 8%, transparent); } /* Sub-Variant: HAPPY */ .happy-app { --color-brand-action: var(--color-palette-brand-jervis); --color-brand-action-hover: var(--color-palette-brand-jervis); --color-brand-action-glow: var(--color-palette-alpha-teal-18); --color-brand-action-dim: var(--color-palette-alpha-teal-08); } /* HAPPY Premium-Tier — JERVIS+Apple-2030 aesthetic (ADR-0005) */ .happy-app { --backdrop-blur: 32px; --backdrop-saturate: 180%; --hairline-border: 0.5px; --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } .happy-app .card { backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)); -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(var(--backdrop-saturate)); border-width: var(--hairline-border); transition: transform var(--motion-duration-base) var(--motion-spring), box-shadow var(--motion-duration-base) var(--motion-spring); }