/* ===================================================================== * Yanyja — Brand Layer * * Sits on top of Yarra's tokens. Same type scale, same spacing, * same radii, same shadows, same motion. The palette and semantic * mappings are Yanyja's own. * * Word origin: "Yanyja" (Ngadjon, far north Queensland) = "Now". * * Palette is "rainforest at first light": * Canopy — deep forest green, the dominant brand colour * Sunlight — warm gold, the "Now" punctuation (CTAs, pulse, focus) * Mist — warm off-white page surface (cooler than Yarra's stone) * Moss — supporting natural green for status + tags * Earth — warm neutral for borders + text * =================================================================== */ :root { /* ----- Canopy (deep forest green, primary brand) ----------------- */ --canopy-50: #ECF1ED; --canopy-100: #D1DCD3; --canopy-200: #9DB3A1; --canopy-300: #6A8970; --canopy-400: #436548; --canopy-500: #284A2E; --canopy-600: #1D3923; --canopy-700: #142C1B; --canopy-800: #0E2114; --canopy-900: #07140C; /* ----- Sunlight (warm gold, the "Now" punctuation) --------------- */ --sunlight-50: #FDF6E4; --sunlight-100: #F8E7B4; --sunlight-200: #F2D178; --sunlight-300: #EBB942; --sunlight-400: #DDA01D; --sunlight-500: #B7820E; --sunlight-600: #8E640A; --sunlight-700: #674907; /* ----- Mist (warm off-white, page surface) ----------------------- */ --mist-0: #FFFFFF; --mist-25: #FAF7F1; /* page background */ --mist-50: #F2EEE3; --mist-100: #E7E1D0; --mist-200: #D2CBB4; --mist-300: #B4AC91; --mist-400: #8A8268; --mist-500: #65604A; --mist-600: #423E2F; --mist-700: #25231A; --mist-800: #15140E; --mist-900: #0A0905; /* ----- Moss (supporting natural green) --------------------------- */ --moss-50: #EEF2EC; --moss-100: #D5DECF; --moss-200: #ACBEA2; --moss-300: #7E9874; --moss-400: #5A7651; --moss-500: #425D3B; --moss-600: #2F462A; /* ----- Override Yarra's primitives so its components still work -- */ --river-50: var(--canopy-50); --river-100: var(--canopy-100); --river-200: var(--canopy-200); --river-300: var(--canopy-300); --river-400: var(--canopy-400); --river-500: var(--canopy-500); --river-600: var(--canopy-600); --river-700: var(--canopy-700); --river-800: var(--canopy-800); --river-900: var(--canopy-900); --ochre-50: var(--sunlight-50); --ochre-100: var(--sunlight-100); --ochre-200: var(--sunlight-200); --ochre-300: var(--sunlight-300); --ochre-400: var(--sunlight-400); --ochre-500: var(--sunlight-500); --ochre-600: var(--sunlight-600); --ochre-700: var(--sunlight-700); --euc-50: var(--moss-50); --euc-100: var(--moss-100); --euc-200: var(--moss-200); --euc-300: var(--moss-300); --euc-400: var(--moss-400); --euc-500: var(--moss-500); --euc-600: var(--moss-600); --stone-0: var(--mist-0); --stone-25: var(--mist-25); --stone-50: var(--mist-50); --stone-100: var(--mist-100); --stone-200: var(--mist-200); --stone-300: var(--mist-300); --stone-400: var(--mist-400); --stone-500: var(--mist-500); --stone-600: var(--mist-600); --stone-700: var(--mist-700); --stone-800: var(--mist-800); --stone-900: var(--mist-900); /* ----- Semantic tokens — Yanyja-specific ------------------------- */ --bg-page: var(--mist-25); --bg-surface: var(--mist-0); --bg-sunken: var(--mist-50); --bg-inverse: var(--canopy-800); --bg-accent: var(--sunlight-50); --fg-primary: var(--mist-800); --fg-secondary: var(--mist-600); --fg-tertiary: var(--mist-500); --fg-muted: var(--mist-400); --fg-inverse: var(--mist-25); --fg-brand: var(--canopy-700); --fg-accent: var(--sunlight-500); --fg-link: var(--canopy-500); --border-subtle: var(--mist-100); --border-default: var(--mist-200); --border-strong: var(--mist-300); --border-inverse: var(--canopy-600); --border-focus: var(--sunlight-400); --interactive-primary: var(--canopy-700); --interactive-primary-hover: var(--canopy-800); --interactive-primary-press: var(--canopy-900); --interactive-accent: var(--sunlight-400); --interactive-accent-hover: var(--sunlight-500); --interactive-accent-press: var(--sunlight-600); /* Status — recalibrated against the new palette */ --status-success: var(--moss-500); --status-success-bg: var(--moss-50); --status-warning: var(--sunlight-400); --status-warning-bg: var(--sunlight-50); --status-danger: #A23A2E; --status-danger-bg: #F8E8E5; --status-info: var(--canopy-500); --status-info-bg: var(--canopy-50); /* Tinted shadows for the new palette */ --shadow-xs: 0 1px 2px 0 rgba(7, 20, 12, 0.05); --shadow-sm: 0 1px 3px 0 rgba(7, 20, 12, 0.07), 0 1px 2px -1px rgba(7, 20, 12, 0.04); --shadow-md: 0 4px 10px -2px rgba(7, 20, 12, 0.09), 0 2px 4px -2px rgba(7, 20, 12, 0.05); --shadow-lg: 0 12px 28px -8px rgba(7, 20, 12, 0.12), 0 4px 8px -4px rgba(7, 20, 12, 0.06); --shadow-xl: 0 28px 56px -12px rgba(7, 20, 12, 0.18), 0 8px 16px -8px rgba(7, 20, 12, 0.10); --ring-focus: 0 0 0 3px rgba(221, 160, 29, 0.32); /* sunlight */ --ring-river: 0 0 0 3px rgba(40, 74, 46, 0.25); /* canopy */ /* App chrome */ --chrome-sidebar-w: 232px; --chrome-airail-w: 300px; --chrome-topbar-h: 56px; } /* ===================================================================== * The Pulse — Yanyja's signature motif. * A slow gold heartbeat that means "right now". Used on the live * "happening now" badge, the AI nudge indicator, and Action Register. * =================================================================== */ @keyframes yj-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(221, 160, 29, 0.55); } 60% { box-shadow: 0 0 0 8px rgba(221, 160, 29, 0); } } @keyframes yj-pulse-soft { 0%, 100% { opacity: 1; transform: scale(1); } 60% { opacity: 0.6; transform: scale(1.08); } } @keyframes yj-ripple { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes yj-sweep-out { 0% { transform: translateX(0); opacity: 1; max-height: 200px; margin-bottom: var(--space-3); } 60% { transform: translateX(120%); opacity: 0; max-height: 200px; } 100% { transform: translateX(120%); opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } } @keyframes yj-fade-in-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .yj-pulse-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--sunlight-400); animation: yj-pulse 1800ms ease-out infinite; } /* ===================================================================== * Variants — exposed via [data-variant] on . * canopy — default, deep canopy sidebar * mist — all-light, no dark sidebar * aurora — editorial-magazine, larger serif, ambient glow * =================================================================== */ body[data-variant="canopy"] { /* defaults, no overrides */ } body[data-variant="mist"] { --bg-inverse: var(--mist-50); --fg-inverse: var(--mist-800); --border-inverse: var(--mist-200); --interactive-primary: var(--canopy-700); --interactive-primary-hover: var(--canopy-800); } body[data-variant="aurora"] { --bg-page: #FBF8F0; } /* ===================================================================== * Density — exposed via [data-density] on . * comfortable (default) — generous spacing * compact — tighter rows for high-volume providers * =================================================================== */ body[data-density="compact"] { --chrome-topbar-h: 48px; } body[data-density="compact"] .yj-row { padding-top: 8px; padding-bottom: 8px; } body[data-density="comfortable"] .yj-row { padding-top: 14px; padding-bottom: 14px; }