:root:root[data-movie-theme="harry-potter"], [data-movie-theme="harry-potter"] { --color-gray-50: var(--hp-fg); --color-gray-100: var(--hp-fg); --color-gray-200: color-mix(in oklab, var(--hp-fg) 72%, var(--hp-muted)); --color-gray-300: color-mix(in oklab, var(--hp-fg) 72%, var(--hp-muted)); --color-gray-400: var(--hp-muted); --color-gray-500: var(--hp-muted); --color-gray-600: color-mix(in oklab, var(--hp-gold) 34%, transparent); --color-gray-700: var(--hp-card); --color-gray-800: var(--hp-surface); --color-gray-900: var(--hp-bg); --color-gray-950: var(--hp-bg); --color-blue-50: color-mix(in oklab, var(--hp-gold) 12%, transparent); --color-blue-100: color-mix(in oklab, var(--hp-gold) 12%, transparent); --color-blue-200: color-mix(in oklab, var(--hp-gold) 12%, transparent); --color-blue-300: color-mix(in oklab, var(--hp-gold) 78%, white); --color-blue-400: color-mix(in oklab, var(--hp-gold) 78%, white); --color-blue-500: var(--hp-primary); --color-blue-600: var(--hp-primary); --color-blue-700: var(--hp-primary); --color-blue-800: var(--hp-primary); --color-blue-900: var(--hp-primary); --color-blue-950: var(--hp-primary); --color-red-50: color-mix(in oklab, #c25b6b 12%, transparent); --color-red-100: color-mix(in oklab, #c25b6b 12%, transparent); --color-red-200: color-mix(in oklab, #c25b6b 22%, transparent); --color-red-300: #c25b6b; --color-red-400: #c25b6b; --color-red-500: #c25b6b; --color-red-600: #c25b6b; --color-red-700: #c25b6b; --color-red-800: #c25b6b; --color-red-900: #c25b6b; --color-red-950: #c25b6b; --color-rose-50: color-mix(in oklab, #c25b6b 12%, transparent); --color-rose-100: color-mix(in oklab, #c25b6b 12%, transparent); --color-rose-200: color-mix(in oklab, #c25b6b 22%, transparent); --color-rose-300: #c25b6b; --color-rose-400: #c25b6b; --color-rose-500: #c25b6b; --color-rose-600: #c25b6b; --color-rose-700: #c25b6b; --color-rose-800: #c25b6b; --color-rose-900: #c25b6b; --color-rose-950: #c25b6b; --color-green-50: color-mix(in oklab, color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8) 12%, transparent); --color-green-100: color-mix(in oklab, color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8) 12%, transparent); --color-green-200: color-mix(in oklab, color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8) 22%, transparent); --color-green-300: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-green-400: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-green-500: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-green-600: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-green-700: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-green-800: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-green-900: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-green-950: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-50: color-mix(in oklab, color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8) 12%, transparent); --color-emerald-100: color-mix(in oklab, color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8) 12%, transparent); --color-emerald-200: color-mix(in oklab, color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8) 22%, transparent); --color-emerald-300: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-400: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-500: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-600: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-700: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-800: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-900: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-emerald-950: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --color-yellow-50: color-mix(in oklab, var(--hp-candle) 12%, transparent); --color-yellow-100: color-mix(in oklab, var(--hp-candle) 12%, transparent); --color-yellow-200: color-mix(in oklab, var(--hp-candle) 22%, transparent); --color-yellow-300: var(--hp-candle); --color-yellow-400: var(--hp-candle); --color-yellow-500: var(--hp-candle); --color-yellow-600: var(--hp-candle); --color-yellow-700: var(--hp-candle); --color-yellow-800: var(--hp-candle); --color-yellow-900: var(--hp-candle); --color-yellow-950: var(--hp-candle); --color-amber-50: color-mix(in oklab, var(--hp-candle) 12%, transparent); --color-amber-100: color-mix(in oklab, var(--hp-candle) 12%, transparent); --color-amber-200: color-mix(in oklab, var(--hp-candle) 22%, transparent); --color-amber-300: var(--hp-candle); --color-amber-400: var(--hp-candle); --color-amber-500: var(--hp-candle); --color-amber-600: var(--hp-candle); --color-amber-700: var(--hp-candle); --color-amber-800: var(--hp-candle); --color-amber-900: var(--hp-candle); --color-amber-950: var(--hp-candle); --color-orange-50: color-mix(in oklab, var(--hp-candle) 12%, transparent); --color-orange-100: color-mix(in oklab, var(--hp-candle) 12%, transparent); --color-orange-200: color-mix(in oklab, var(--hp-candle) 22%, transparent); --color-orange-300: var(--hp-candle); --color-orange-400: var(--hp-candle); --color-orange-500: var(--hp-candle); --color-orange-600: var(--hp-candle); --color-orange-700: var(--hp-candle); --color-orange-800: var(--hp-candle); --color-orange-900: var(--hp-candle); --color-orange-950: var(--hp-candle); --lo-background: var(--hp-bg); --lo-surface: var(--hp-surface); --lo-surface-elevated: var(--hp-card); --lo-text-primary: var(--hp-fg); --lo-text-secondary: color-mix(in oklab, var(--hp-fg) 72%, var(--hp-muted)); --lo-text-muted: var(--hp-muted); --lo-border: var(--hp-border); --lo-border-strong: color-mix(in oklab, var(--hp-gold) 34%, transparent); --lo-accent: var(--hp-primary); --lo-accent-hover: color-mix(in oklab, var(--hp-gold) 78%, white); --lo-accent-subtle: color-mix(in oklab, var(--hp-gold) 12%, transparent); --lo-accent-contrast: var(--hp-ink); --lo-success: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --lo-warning: var(--hp-candle); --lo-danger: #c25b6b; --lo-shadow: rgba(0, 0, 0, 0.55); --mantine-color-body: var(--hp-bg); --mantine-color-text: var(--hp-fg); --mantine-color-dimmed: var(--hp-muted); --mantine-color-default: var(--hp-surface); --mantine-color-default-hover: var(--hp-card); --mantine-color-default-color: var(--hp-fg); --mantine-color-default-border: var(--hp-border); --mantine-color-placeholder: var(--hp-muted); --mantine-color-anchor: var(--hp-primary); --mantine-color-error: #c25b6b; --mantine-primary-color-filled: var(--hp-primary); --mantine-primary-color-filled-hover: color-mix(in oklab, var(--hp-gold) 78%, white); --mantine-primary-color-light: color-mix(in oklab, var(--hp-gold) 12%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, var(--hp-gold) 12%, transparent); --mantine-primary-color-light-color: var(--hp-primary); --mantine-primary-color-contrast: var(--hp-ink); --mantine-color-dark-0: var(--hp-fg); --mantine-color-dark-1: color-mix(in oklab, var(--hp-fg) 72%, var(--hp-muted)); --mantine-color-dark-2: color-mix(in oklab, var(--hp-fg) 72%, var(--hp-muted)); --mantine-color-dark-3: var(--hp-muted); --mantine-color-dark-4: var(--hp-border); --mantine-color-dark-5: var(--hp-card); --mantine-color-dark-6: var(--hp-surface); --mantine-color-dark-7: var(--hp-surface); --mantine-color-dark-8: var(--hp-bg); --mantine-color-dark-9: var(--hp-bg); --mantine-color-gray-0: var(--hp-card); --mantine-color-gray-1: var(--hp-surface); --mantine-color-gray-2: var(--hp-border); --mantine-color-gray-3: var(--hp-border); --mantine-color-gray-4: var(--hp-muted); --mantine-color-gray-5: var(--hp-muted); --mantine-color-gray-6: color-mix(in oklab, var(--hp-fg) 72%, var(--hp-muted)); --mantine-color-gray-7: color-mix(in oklab, var(--hp-fg) 72%, var(--hp-muted)); --mantine-color-gray-8: var(--hp-fg); --mantine-color-gray-9: var(--hp-fg); --mantine-color-brand-light: color-mix(in oklab, var(--hp-gold) 12%, transparent); --mantine-color-brand-filled: var(--hp-primary); --mantine-color-brand-filled-hover: color-mix(in oklab, var(--hp-gold) 78%, white); --mantine-color-brand-4: color-mix(in oklab, var(--hp-gold) 78%, white); --mantine-color-brand-5: var(--hp-primary); --mantine-color-brand-6: var(--hp-primary); --mantine-color-brand-7: color-mix(in oklab, var(--hp-gold) 78%, white); --mantine-color-blue-0: color-mix(in oklab, var(--hp-gold) 12%, transparent); --mantine-color-blue-4: color-mix(in oklab, var(--hp-gold) 78%, white); --mantine-color-blue-5: var(--hp-primary); --mantine-color-blue-6: var(--hp-primary); --mantine-color-blue-8: color-mix(in oklab, var(--hp-gold) 78%, white); --mantine-color-blue-light: color-mix(in oklab, var(--hp-gold) 12%, transparent); --mantine-color-blue-filled: var(--hp-primary); --mantine-color-green-5: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --mantine-color-green-6: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --mantine-color-green-filled: color-mix(in oklab, var(--hp-emerald) 70%, #7fd8b8); --mantine-color-yellow-5: var(--hp-candle); --mantine-color-yellow-6: var(--hp-candle); --mantine-color-yellow-8: var(--hp-candle); --mantine-color-yellow-filled: var(--hp-candle); --mantine-color-red-5: #c25b6b; --mantine-color-red-6: #c25b6b; --mantine-color-red-filled: #c25b6b; --surface-card: var(--hp-surface); --surface-muted: var(--hp-card); --border-subtle: var(--hp-border); --color-body: var(--hp-bg); --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.55), 0 4px 10px -6px rgba(0, 0, 0, 0.55); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.55); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.55), 0 4px 10px -6px rgba(0, 0, 0, 0.55); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.55); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.55); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.55); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.55); } :root:root[data-movie-theme="marvel"], [data-movie-theme="marvel"] { --color-gray-50: #f1f2f4; --color-gray-100: #f1f2f4; --color-gray-200: #c3c7ce; --color-gray-300: #c3c7ce; --color-gray-400: #8b919b; --color-gray-500: #8b919b; --color-gray-600: color-mix(in oklab, #e0555c 34%, transparent); --color-gray-700: #212429; --color-gray-800: #191b1f; --color-gray-900: #111214; --color-gray-950: #111214; --color-blue-50: color-mix(in oklab, #e0555c 13%, transparent); --color-blue-100: color-mix(in oklab, #e0555c 13%, transparent); --color-blue-200: color-mix(in oklab, #e0555c 13%, transparent); --color-blue-300: #ec7178; --color-blue-400: #ec7178; --color-blue-500: #e0555c; --color-blue-600: #e0555c; --color-blue-700: #e0555c; --color-blue-800: #e0555c; --color-blue-900: #e0555c; --color-blue-950: #e0555c; --color-red-50: color-mix(in oklab, #e0555c 12%, transparent); --color-red-100: color-mix(in oklab, #e0555c 12%, transparent); --color-red-200: color-mix(in oklab, #e0555c 22%, transparent); --color-red-300: #e0555c; --color-red-400: #e0555c; --color-red-500: #e0555c; --color-red-600: #e0555c; --color-red-700: #e0555c; --color-red-800: #e0555c; --color-red-900: #e0555c; --color-red-950: #e0555c; --color-rose-50: color-mix(in oklab, #e0555c 12%, transparent); --color-rose-100: color-mix(in oklab, #e0555c 12%, transparent); --color-rose-200: color-mix(in oklab, #e0555c 22%, transparent); --color-rose-300: #e0555c; --color-rose-400: #e0555c; --color-rose-500: #e0555c; --color-rose-600: #e0555c; --color-rose-700: #e0555c; --color-rose-800: #e0555c; --color-rose-900: #e0555c; --color-rose-950: #e0555c; --color-green-50: color-mix(in oklab, #5aa88c 12%, transparent); --color-green-100: color-mix(in oklab, #5aa88c 12%, transparent); --color-green-200: color-mix(in oklab, #5aa88c 22%, transparent); --color-green-300: #5aa88c; --color-green-400: #5aa88c; --color-green-500: #5aa88c; --color-green-600: #5aa88c; --color-green-700: #5aa88c; --color-green-800: #5aa88c; --color-green-900: #5aa88c; --color-green-950: #5aa88c; --color-emerald-50: color-mix(in oklab, #5aa88c 12%, transparent); --color-emerald-100: color-mix(in oklab, #5aa88c 12%, transparent); --color-emerald-200: color-mix(in oklab, #5aa88c 22%, transparent); --color-emerald-300: #5aa88c; --color-emerald-400: #5aa88c; --color-emerald-500: #5aa88c; --color-emerald-600: #5aa88c; --color-emerald-700: #5aa88c; --color-emerald-800: #5aa88c; --color-emerald-900: #5aa88c; --color-emerald-950: #5aa88c; --color-yellow-50: color-mix(in oklab, #d6a45a 12%, transparent); --color-yellow-100: color-mix(in oklab, #d6a45a 12%, transparent); --color-yellow-200: color-mix(in oklab, #d6a45a 22%, transparent); --color-yellow-300: #d6a45a; --color-yellow-400: #d6a45a; --color-yellow-500: #d6a45a; --color-yellow-600: #d6a45a; --color-yellow-700: #d6a45a; --color-yellow-800: #d6a45a; --color-yellow-900: #d6a45a; --color-yellow-950: #d6a45a; --color-amber-50: color-mix(in oklab, #d6a45a 12%, transparent); --color-amber-100: color-mix(in oklab, #d6a45a 12%, transparent); --color-amber-200: color-mix(in oklab, #d6a45a 22%, transparent); --color-amber-300: #d6a45a; --color-amber-400: #d6a45a; --color-amber-500: #d6a45a; --color-amber-600: #d6a45a; --color-amber-700: #d6a45a; --color-amber-800: #d6a45a; --color-amber-900: #d6a45a; --color-amber-950: #d6a45a; --color-orange-50: color-mix(in oklab, #d6a45a 12%, transparent); --color-orange-100: color-mix(in oklab, #d6a45a 12%, transparent); --color-orange-200: color-mix(in oklab, #d6a45a 22%, transparent); --color-orange-300: #d6a45a; --color-orange-400: #d6a45a; --color-orange-500: #d6a45a; --color-orange-600: #d6a45a; --color-orange-700: #d6a45a; --color-orange-800: #d6a45a; --color-orange-900: #d6a45a; --color-orange-950: #d6a45a; --lo-background: #111214; --lo-surface: #191b1f; --lo-surface-elevated: #212429; --lo-text-primary: #f1f2f4; --lo-text-secondary: #c3c7ce; --lo-text-muted: #8b919b; --lo-border: color-mix(in oklab, #e0555c 18%, transparent); --lo-border-strong: color-mix(in oklab, #e0555c 34%, transparent); --lo-accent: #e0555c; --lo-accent-hover: #ec7178; --lo-accent-subtle: color-mix(in oklab, #e0555c 13%, transparent); --lo-accent-contrast: #111214; --lo-success: #5aa88c; --lo-warning: #d6a45a; --lo-danger: #e0555c; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #111214; --mantine-color-text: #f1f2f4; --mantine-color-dimmed: #8b919b; --mantine-color-default: #191b1f; --mantine-color-default-hover: #212429; --mantine-color-default-color: #f1f2f4; --mantine-color-default-border: color-mix(in oklab, #e0555c 18%, transparent); --mantine-color-placeholder: #8b919b; --mantine-color-anchor: #e0555c; --mantine-color-error: #e0555c; --mantine-primary-color-filled: #e0555c; --mantine-primary-color-filled-hover: #ec7178; --mantine-primary-color-light: color-mix(in oklab, #e0555c 13%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, #e0555c 13%, transparent); --mantine-primary-color-light-color: #e0555c; --mantine-primary-color-contrast: #111214; --mantine-color-dark-0: #f1f2f4; --mantine-color-dark-1: #c3c7ce; --mantine-color-dark-2: #c3c7ce; --mantine-color-dark-3: #8b919b; --mantine-color-dark-4: color-mix(in oklab, #e0555c 18%, transparent); --mantine-color-dark-5: #212429; --mantine-color-dark-6: #191b1f; --mantine-color-dark-7: #191b1f; --mantine-color-dark-8: #111214; --mantine-color-dark-9: #111214; --mantine-color-gray-0: #212429; --mantine-color-gray-1: #191b1f; --mantine-color-gray-2: color-mix(in oklab, #e0555c 18%, transparent); --mantine-color-gray-3: color-mix(in oklab, #e0555c 18%, transparent); --mantine-color-gray-4: #8b919b; --mantine-color-gray-5: #8b919b; --mantine-color-gray-6: #c3c7ce; --mantine-color-gray-7: #c3c7ce; --mantine-color-gray-8: #f1f2f4; --mantine-color-gray-9: #f1f2f4; --mantine-color-brand-light: color-mix(in oklab, #e0555c 13%, transparent); --mantine-color-brand-filled: #e0555c; --mantine-color-brand-filled-hover: #ec7178; --mantine-color-brand-4: #ec7178; --mantine-color-brand-5: #e0555c; --mantine-color-brand-6: #e0555c; --mantine-color-brand-7: #ec7178; --mantine-color-blue-0: color-mix(in oklab, #e0555c 13%, transparent); --mantine-color-blue-4: #ec7178; --mantine-color-blue-5: #e0555c; --mantine-color-blue-6: #e0555c; --mantine-color-blue-8: #ec7178; --mantine-color-blue-light: color-mix(in oklab, #e0555c 13%, transparent); --mantine-color-blue-filled: #e0555c; --mantine-color-green-5: #5aa88c; --mantine-color-green-6: #5aa88c; --mantine-color-green-filled: #5aa88c; --mantine-color-yellow-5: #d6a45a; --mantine-color-yellow-6: #d6a45a; --mantine-color-yellow-8: #d6a45a; --mantine-color-yellow-filled: #d6a45a; --mantine-color-red-5: #e0555c; --mantine-color-red-6: #e0555c; --mantine-color-red-filled: #e0555c; --surface-card: #191b1f; --surface-muted: #212429; --border-subtle: color-mix(in oklab, #e0555c 18%, transparent); --color-body: #111214; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-movie-theme="dc"], [data-movie-theme="dc"] { --color-gray-50: #eceef1; --color-gray-100: #eceef1; --color-gray-200: #c0c5cd; --color-gray-300: #c0c5cd; --color-gray-400: #868d97; --color-gray-500: #868d97; --color-gray-600: color-mix(in oklab, #7fa3cc 34%, transparent); --color-gray-700: #1a1d22; --color-gray-800: #121417; --color-gray-900: #08090b; --color-gray-950: #08090b; --color-blue-50: color-mix(in oklab, #7fa3cc 13%, transparent); --color-blue-100: color-mix(in oklab, #7fa3cc 13%, transparent); --color-blue-200: color-mix(in oklab, #7fa3cc 13%, transparent); --color-blue-300: #9bb9dc; --color-blue-400: #9bb9dc; --color-blue-500: #7fa3cc; --color-blue-600: #7fa3cc; --color-blue-700: #7fa3cc; --color-blue-800: #7fa3cc; --color-blue-900: #7fa3cc; --color-blue-950: #7fa3cc; --color-red-50: color-mix(in oklab, #c4666a 12%, transparent); --color-red-100: color-mix(in oklab, #c4666a 12%, transparent); --color-red-200: color-mix(in oklab, #c4666a 22%, transparent); --color-red-300: #c4666a; --color-red-400: #c4666a; --color-red-500: #c4666a; --color-red-600: #c4666a; --color-red-700: #c4666a; --color-red-800: #c4666a; --color-red-900: #c4666a; --color-red-950: #c4666a; --color-rose-50: color-mix(in oklab, #c4666a 12%, transparent); --color-rose-100: color-mix(in oklab, #c4666a 12%, transparent); --color-rose-200: color-mix(in oklab, #c4666a 22%, transparent); --color-rose-300: #c4666a; --color-rose-400: #c4666a; --color-rose-500: #c4666a; --color-rose-600: #c4666a; --color-rose-700: #c4666a; --color-rose-800: #c4666a; --color-rose-900: #c4666a; --color-rose-950: #c4666a; --color-green-50: color-mix(in oklab, #66a189 12%, transparent); --color-green-100: color-mix(in oklab, #66a189 12%, transparent); --color-green-200: color-mix(in oklab, #66a189 22%, transparent); --color-green-300: #66a189; --color-green-400: #66a189; --color-green-500: #66a189; --color-green-600: #66a189; --color-green-700: #66a189; --color-green-800: #66a189; --color-green-900: #66a189; --color-green-950: #66a189; --color-emerald-50: color-mix(in oklab, #66a189 12%, transparent); --color-emerald-100: color-mix(in oklab, #66a189 12%, transparent); --color-emerald-200: color-mix(in oklab, #66a189 22%, transparent); --color-emerald-300: #66a189; --color-emerald-400: #66a189; --color-emerald-500: #66a189; --color-emerald-600: #66a189; --color-emerald-700: #66a189; --color-emerald-800: #66a189; --color-emerald-900: #66a189; --color-emerald-950: #66a189; --color-yellow-50: color-mix(in oklab, #c4a163 12%, transparent); --color-yellow-100: color-mix(in oklab, #c4a163 12%, transparent); --color-yellow-200: color-mix(in oklab, #c4a163 22%, transparent); --color-yellow-300: #c4a163; --color-yellow-400: #c4a163; --color-yellow-500: #c4a163; --color-yellow-600: #c4a163; --color-yellow-700: #c4a163; --color-yellow-800: #c4a163; --color-yellow-900: #c4a163; --color-yellow-950: #c4a163; --color-amber-50: color-mix(in oklab, #c4a163 12%, transparent); --color-amber-100: color-mix(in oklab, #c4a163 12%, transparent); --color-amber-200: color-mix(in oklab, #c4a163 22%, transparent); --color-amber-300: #c4a163; --color-amber-400: #c4a163; --color-amber-500: #c4a163; --color-amber-600: #c4a163; --color-amber-700: #c4a163; --color-amber-800: #c4a163; --color-amber-900: #c4a163; --color-amber-950: #c4a163; --color-orange-50: color-mix(in oklab, #c4a163 12%, transparent); --color-orange-100: color-mix(in oklab, #c4a163 12%, transparent); --color-orange-200: color-mix(in oklab, #c4a163 22%, transparent); --color-orange-300: #c4a163; --color-orange-400: #c4a163; --color-orange-500: #c4a163; --color-orange-600: #c4a163; --color-orange-700: #c4a163; --color-orange-800: #c4a163; --color-orange-900: #c4a163; --color-orange-950: #c4a163; --lo-background: #08090b; --lo-surface: #121417; --lo-surface-elevated: #1a1d22; --lo-text-primary: #eceef1; --lo-text-secondary: #c0c5cd; --lo-text-muted: #868d97; --lo-border: color-mix(in oklab, #7fa3cc 18%, transparent); --lo-border-strong: color-mix(in oklab, #7fa3cc 34%, transparent); --lo-accent: #7fa3cc; --lo-accent-hover: #9bb9dc; --lo-accent-subtle: color-mix(in oklab, #7fa3cc 13%, transparent); --lo-accent-contrast: #08090b; --lo-success: #66a189; --lo-warning: #c4a163; --lo-danger: #c4666a; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #08090b; --mantine-color-text: #eceef1; --mantine-color-dimmed: #868d97; --mantine-color-default: #121417; --mantine-color-default-hover: #1a1d22; --mantine-color-default-color: #eceef1; --mantine-color-default-border: color-mix(in oklab, #7fa3cc 18%, transparent); --mantine-color-placeholder: #868d97; --mantine-color-anchor: #7fa3cc; --mantine-color-error: #c4666a; --mantine-primary-color-filled: #7fa3cc; --mantine-primary-color-filled-hover: #9bb9dc; --mantine-primary-color-light: color-mix(in oklab, #7fa3cc 13%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, #7fa3cc 13%, transparent); --mantine-primary-color-light-color: #7fa3cc; --mantine-primary-color-contrast: #08090b; --mantine-color-dark-0: #eceef1; --mantine-color-dark-1: #c0c5cd; --mantine-color-dark-2: #c0c5cd; --mantine-color-dark-3: #868d97; --mantine-color-dark-4: color-mix(in oklab, #7fa3cc 18%, transparent); --mantine-color-dark-5: #1a1d22; --mantine-color-dark-6: #121417; --mantine-color-dark-7: #121417; --mantine-color-dark-8: #08090b; --mantine-color-dark-9: #08090b; --mantine-color-gray-0: #1a1d22; --mantine-color-gray-1: #121417; --mantine-color-gray-2: color-mix(in oklab, #7fa3cc 18%, transparent); --mantine-color-gray-3: color-mix(in oklab, #7fa3cc 18%, transparent); --mantine-color-gray-4: #868d97; --mantine-color-gray-5: #868d97; --mantine-color-gray-6: #c0c5cd; --mantine-color-gray-7: #c0c5cd; --mantine-color-gray-8: #eceef1; --mantine-color-gray-9: #eceef1; --mantine-color-brand-light: color-mix(in oklab, #7fa3cc 13%, transparent); --mantine-color-brand-filled: #7fa3cc; --mantine-color-brand-filled-hover: #9bb9dc; --mantine-color-brand-4: #9bb9dc; --mantine-color-brand-5: #7fa3cc; --mantine-color-brand-6: #7fa3cc; --mantine-color-brand-7: #9bb9dc; --mantine-color-blue-0: color-mix(in oklab, #7fa3cc 13%, transparent); --mantine-color-blue-4: #9bb9dc; --mantine-color-blue-5: #7fa3cc; --mantine-color-blue-6: #7fa3cc; --mantine-color-blue-8: #9bb9dc; --mantine-color-blue-light: color-mix(in oklab, #7fa3cc 13%, transparent); --mantine-color-blue-filled: #7fa3cc; --mantine-color-green-5: #66a189; --mantine-color-green-6: #66a189; --mantine-color-green-filled: #66a189; --mantine-color-yellow-5: #c4a163; --mantine-color-yellow-6: #c4a163; --mantine-color-yellow-8: #c4a163; --mantine-color-yellow-filled: #c4a163; --mantine-color-red-5: #c4666a; --mantine-color-red-6: #c4666a; --mantine-color-red-filled: #c4666a; --surface-card: #121417; --surface-muted: #1a1d22; --border-subtle: color-mix(in oklab, #7fa3cc 18%, transparent); --color-body: #08090b; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-movie-theme="interstellar"], [data-movie-theme="interstellar"] { --color-gray-50: #e7edf6; --color-gray-100: #e7edf6; --color-gray-200: #b2bfd1; --color-gray-300: #b2bfd1; --color-gray-400: #7c8a9e; --color-gray-500: #7c8a9e; --color-gray-600: rgba(140, 172, 214, 0.3); --color-gray-700: #182031; --color-gray-800: #111825; --color-gray-900: #0a0e16; --color-gray-950: #0a0e16; --color-blue-50: rgba(111, 159, 216, 0.13); --color-blue-100: rgba(111, 159, 216, 0.13); --color-blue-200: rgba(111, 159, 216, 0.13); --color-blue-300: #8bb6e8; --color-blue-400: #8bb6e8; --color-blue-500: #6f9fd8; --color-blue-600: #6f9fd8; --color-blue-700: #6f9fd8; --color-blue-800: #6f9fd8; --color-blue-900: #6f9fd8; --color-blue-950: #6f9fd8; --color-red-50: color-mix(in oklab, #cf6a5f 12%, transparent); --color-red-100: color-mix(in oklab, #cf6a5f 12%, transparent); --color-red-200: color-mix(in oklab, #cf6a5f 22%, transparent); --color-red-300: #cf6a5f; --color-red-400: #cf6a5f; --color-red-500: #cf6a5f; --color-red-600: #cf6a5f; --color-red-700: #cf6a5f; --color-red-800: #cf6a5f; --color-red-900: #cf6a5f; --color-red-950: #cf6a5f; --color-rose-50: color-mix(in oklab, #cf6a5f 12%, transparent); --color-rose-100: color-mix(in oklab, #cf6a5f 12%, transparent); --color-rose-200: color-mix(in oklab, #cf6a5f 22%, transparent); --color-rose-300: #cf6a5f; --color-rose-400: #cf6a5f; --color-rose-500: #cf6a5f; --color-rose-600: #cf6a5f; --color-rose-700: #cf6a5f; --color-rose-800: #cf6a5f; --color-rose-900: #cf6a5f; --color-rose-950: #cf6a5f; --color-green-50: color-mix(in oklab, #4f9d87 12%, transparent); --color-green-100: color-mix(in oklab, #4f9d87 12%, transparent); --color-green-200: color-mix(in oklab, #4f9d87 22%, transparent); --color-green-300: #4f9d87; --color-green-400: #4f9d87; --color-green-500: #4f9d87; --color-green-600: #4f9d87; --color-green-700: #4f9d87; --color-green-800: #4f9d87; --color-green-900: #4f9d87; --color-green-950: #4f9d87; --color-emerald-50: color-mix(in oklab, #4f9d87 12%, transparent); --color-emerald-100: color-mix(in oklab, #4f9d87 12%, transparent); --color-emerald-200: color-mix(in oklab, #4f9d87 22%, transparent); --color-emerald-300: #4f9d87; --color-emerald-400: #4f9d87; --color-emerald-500: #4f9d87; --color-emerald-600: #4f9d87; --color-emerald-700: #4f9d87; --color-emerald-800: #4f9d87; --color-emerald-900: #4f9d87; --color-emerald-950: #4f9d87; --color-yellow-50: color-mix(in oklab, #d8a45c 12%, transparent); --color-yellow-100: color-mix(in oklab, #d8a45c 12%, transparent); --color-yellow-200: color-mix(in oklab, #d8a45c 22%, transparent); --color-yellow-300: #d8a45c; --color-yellow-400: #d8a45c; --color-yellow-500: #d8a45c; --color-yellow-600: #d8a45c; --color-yellow-700: #d8a45c; --color-yellow-800: #d8a45c; --color-yellow-900: #d8a45c; --color-yellow-950: #d8a45c; --color-amber-50: color-mix(in oklab, #d8a45c 12%, transparent); --color-amber-100: color-mix(in oklab, #d8a45c 12%, transparent); --color-amber-200: color-mix(in oklab, #d8a45c 22%, transparent); --color-amber-300: #d8a45c; --color-amber-400: #d8a45c; --color-amber-500: #d8a45c; --color-amber-600: #d8a45c; --color-amber-700: #d8a45c; --color-amber-800: #d8a45c; --color-amber-900: #d8a45c; --color-amber-950: #d8a45c; --color-orange-50: color-mix(in oklab, #d8a45c 12%, transparent); --color-orange-100: color-mix(in oklab, #d8a45c 12%, transparent); --color-orange-200: color-mix(in oklab, #d8a45c 22%, transparent); --color-orange-300: #d8a45c; --color-orange-400: #d8a45c; --color-orange-500: #d8a45c; --color-orange-600: #d8a45c; --color-orange-700: #d8a45c; --color-orange-800: #d8a45c; --color-orange-900: #d8a45c; --color-orange-950: #d8a45c; --lo-background: #0a0e16; --lo-surface: #111825; --lo-surface-elevated: #182031; --lo-text-primary: #e7edf6; --lo-text-secondary: #b2bfd1; --lo-text-muted: #7c8a9e; --lo-border: rgba(140, 172, 214, 0.14); --lo-border-strong: rgba(140, 172, 214, 0.3); --lo-accent: #6f9fd8; --lo-accent-hover: #8bb6e8; --lo-accent-subtle: rgba(111, 159, 216, 0.13); --lo-accent-contrast: #06101c; --lo-success: #4f9d87; --lo-warning: #d8a45c; --lo-danger: #cf6a5f; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #0a0e16; --mantine-color-text: #e7edf6; --mantine-color-dimmed: #7c8a9e; --mantine-color-default: #111825; --mantine-color-default-hover: #182031; --mantine-color-default-color: #e7edf6; --mantine-color-default-border: rgba(140, 172, 214, 0.14); --mantine-color-placeholder: #7c8a9e; --mantine-color-anchor: #6f9fd8; --mantine-color-error: #cf6a5f; --mantine-primary-color-filled: #6f9fd8; --mantine-primary-color-filled-hover: #8bb6e8; --mantine-primary-color-light: rgba(111, 159, 216, 0.13); --mantine-primary-color-light-hover: rgba(111, 159, 216, 0.13); --mantine-primary-color-light-color: #6f9fd8; --mantine-primary-color-contrast: #06101c; --mantine-color-dark-0: #e7edf6; --mantine-color-dark-1: #b2bfd1; --mantine-color-dark-2: #b2bfd1; --mantine-color-dark-3: #7c8a9e; --mantine-color-dark-4: rgba(140, 172, 214, 0.14); --mantine-color-dark-5: #182031; --mantine-color-dark-6: #111825; --mantine-color-dark-7: #111825; --mantine-color-dark-8: #0a0e16; --mantine-color-dark-9: #0a0e16; --mantine-color-gray-0: #182031; --mantine-color-gray-1: #111825; --mantine-color-gray-2: rgba(140, 172, 214, 0.14); --mantine-color-gray-3: rgba(140, 172, 214, 0.14); --mantine-color-gray-4: #7c8a9e; --mantine-color-gray-5: #7c8a9e; --mantine-color-gray-6: #b2bfd1; --mantine-color-gray-7: #b2bfd1; --mantine-color-gray-8: #e7edf6; --mantine-color-gray-9: #e7edf6; --mantine-color-brand-light: rgba(111, 159, 216, 0.13); --mantine-color-brand-filled: #6f9fd8; --mantine-color-brand-filled-hover: #8bb6e8; --mantine-color-brand-4: #8bb6e8; --mantine-color-brand-5: #6f9fd8; --mantine-color-brand-6: #6f9fd8; --mantine-color-brand-7: #8bb6e8; --mantine-color-blue-0: rgba(111, 159, 216, 0.13); --mantine-color-blue-4: #8bb6e8; --mantine-color-blue-5: #6f9fd8; --mantine-color-blue-6: #6f9fd8; --mantine-color-blue-8: #8bb6e8; --mantine-color-blue-light: rgba(111, 159, 216, 0.13); --mantine-color-blue-filled: #6f9fd8; --mantine-color-green-5: #4f9d87; --mantine-color-green-6: #4f9d87; --mantine-color-green-filled: #4f9d87; --mantine-color-yellow-5: #d8a45c; --mantine-color-yellow-6: #d8a45c; --mantine-color-yellow-8: #d8a45c; --mantine-color-yellow-filled: #d8a45c; --mantine-color-red-5: #cf6a5f; --mantine-color-red-6: #cf6a5f; --mantine-color-red-filled: #cf6a5f; --surface-card: #111825; --surface-muted: #182031; --border-subtle: rgba(140, 172, 214, 0.14); --color-body: #0a0e16; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-movie-theme="star-wars"], [data-movie-theme="star-wars"] { --color-gray-50: #f2f3f5; --color-gray-100: #f2f3f5; --color-gray-200: #c4c8ce; --color-gray-300: #c4c8ce; --color-gray-400: #888d95; --color-gray-500: #888d95; --color-gray-600: color-mix(in oklab, #7fa9d6 34%, transparent); --color-gray-700: #1c1e22; --color-gray-800: #141518; --color-gray-900: #0a0a0c; --color-gray-950: #0a0a0c; --color-blue-50: color-mix(in oklab, #7fa9d6 13%, transparent); --color-blue-100: color-mix(in oklab, #7fa9d6 13%, transparent); --color-blue-200: color-mix(in oklab, #7fa9d6 13%, transparent); --color-blue-300: #9cbfe4; --color-blue-400: #9cbfe4; --color-blue-500: #7fa9d6; --color-blue-600: #7fa9d6; --color-blue-700: #7fa9d6; --color-blue-800: #7fa9d6; --color-blue-900: #7fa9d6; --color-blue-950: #7fa9d6; --color-red-50: color-mix(in oklab, #cc6259 12%, transparent); --color-red-100: color-mix(in oklab, #cc6259 12%, transparent); --color-red-200: color-mix(in oklab, #cc6259 22%, transparent); --color-red-300: #cc6259; --color-red-400: #cc6259; --color-red-500: #cc6259; --color-red-600: #cc6259; --color-red-700: #cc6259; --color-red-800: #cc6259; --color-red-900: #cc6259; --color-red-950: #cc6259; --color-rose-50: color-mix(in oklab, #cc6259 12%, transparent); --color-rose-100: color-mix(in oklab, #cc6259 12%, transparent); --color-rose-200: color-mix(in oklab, #cc6259 22%, transparent); --color-rose-300: #cc6259; --color-rose-400: #cc6259; --color-rose-500: #cc6259; --color-rose-600: #cc6259; --color-rose-700: #cc6259; --color-rose-800: #cc6259; --color-rose-900: #cc6259; --color-rose-950: #cc6259; --color-green-50: color-mix(in oklab, #6aa88f 12%, transparent); --color-green-100: color-mix(in oklab, #6aa88f 12%, transparent); --color-green-200: color-mix(in oklab, #6aa88f 22%, transparent); --color-green-300: #6aa88f; --color-green-400: #6aa88f; --color-green-500: #6aa88f; --color-green-600: #6aa88f; --color-green-700: #6aa88f; --color-green-800: #6aa88f; --color-green-900: #6aa88f; --color-green-950: #6aa88f; --color-emerald-50: color-mix(in oklab, #6aa88f 12%, transparent); --color-emerald-100: color-mix(in oklab, #6aa88f 12%, transparent); --color-emerald-200: color-mix(in oklab, #6aa88f 22%, transparent); --color-emerald-300: #6aa88f; --color-emerald-400: #6aa88f; --color-emerald-500: #6aa88f; --color-emerald-600: #6aa88f; --color-emerald-700: #6aa88f; --color-emerald-800: #6aa88f; --color-emerald-900: #6aa88f; --color-emerald-950: #6aa88f; --color-yellow-50: color-mix(in oklab, #cfa860 12%, transparent); --color-yellow-100: color-mix(in oklab, #cfa860 12%, transparent); --color-yellow-200: color-mix(in oklab, #cfa860 22%, transparent); --color-yellow-300: #cfa860; --color-yellow-400: #cfa860; --color-yellow-500: #cfa860; --color-yellow-600: #cfa860; --color-yellow-700: #cfa860; --color-yellow-800: #cfa860; --color-yellow-900: #cfa860; --color-yellow-950: #cfa860; --color-amber-50: color-mix(in oklab, #cfa860 12%, transparent); --color-amber-100: color-mix(in oklab, #cfa860 12%, transparent); --color-amber-200: color-mix(in oklab, #cfa860 22%, transparent); --color-amber-300: #cfa860; --color-amber-400: #cfa860; --color-amber-500: #cfa860; --color-amber-600: #cfa860; --color-amber-700: #cfa860; --color-amber-800: #cfa860; --color-amber-900: #cfa860; --color-amber-950: #cfa860; --color-orange-50: color-mix(in oklab, #cfa860 12%, transparent); --color-orange-100: color-mix(in oklab, #cfa860 12%, transparent); --color-orange-200: color-mix(in oklab, #cfa860 22%, transparent); --color-orange-300: #cfa860; --color-orange-400: #cfa860; --color-orange-500: #cfa860; --color-orange-600: #cfa860; --color-orange-700: #cfa860; --color-orange-800: #cfa860; --color-orange-900: #cfa860; --color-orange-950: #cfa860; --lo-background: #0a0a0c; --lo-surface: #141518; --lo-surface-elevated: #1c1e22; --lo-text-primary: #f2f3f5; --lo-text-secondary: #c4c8ce; --lo-text-muted: #888d95; --lo-border: color-mix(in oklab, #7fa9d6 18%, transparent); --lo-border-strong: color-mix(in oklab, #7fa9d6 34%, transparent); --lo-accent: #7fa9d6; --lo-accent-hover: #9cbfe4; --lo-accent-subtle: color-mix(in oklab, #7fa9d6 13%, transparent); --lo-accent-contrast: #0a0a0c; --lo-success: #6aa88f; --lo-warning: #cfa860; --lo-danger: #cc6259; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #0a0a0c; --mantine-color-text: #f2f3f5; --mantine-color-dimmed: #888d95; --mantine-color-default: #141518; --mantine-color-default-hover: #1c1e22; --mantine-color-default-color: #f2f3f5; --mantine-color-default-border: color-mix(in oklab, #7fa9d6 18%, transparent); --mantine-color-placeholder: #888d95; --mantine-color-anchor: #7fa9d6; --mantine-color-error: #cc6259; --mantine-primary-color-filled: #7fa9d6; --mantine-primary-color-filled-hover: #9cbfe4; --mantine-primary-color-light: color-mix(in oklab, #7fa9d6 13%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, #7fa9d6 13%, transparent); --mantine-primary-color-light-color: #7fa9d6; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f2f3f5; --mantine-color-dark-1: #c4c8ce; --mantine-color-dark-2: #c4c8ce; --mantine-color-dark-3: #888d95; --mantine-color-dark-4: color-mix(in oklab, #7fa9d6 18%, transparent); --mantine-color-dark-5: #1c1e22; --mantine-color-dark-6: #141518; --mantine-color-dark-7: #141518; --mantine-color-dark-8: #0a0a0c; --mantine-color-dark-9: #0a0a0c; --mantine-color-gray-0: #1c1e22; --mantine-color-gray-1: #141518; --mantine-color-gray-2: color-mix(in oklab, #7fa9d6 18%, transparent); --mantine-color-gray-3: color-mix(in oklab, #7fa9d6 18%, transparent); --mantine-color-gray-4: #888d95; --mantine-color-gray-5: #888d95; --mantine-color-gray-6: #c4c8ce; --mantine-color-gray-7: #c4c8ce; --mantine-color-gray-8: #f2f3f5; --mantine-color-gray-9: #f2f3f5; --mantine-color-brand-light: color-mix(in oklab, #7fa9d6 13%, transparent); --mantine-color-brand-filled: #7fa9d6; --mantine-color-brand-filled-hover: #9cbfe4; --mantine-color-brand-4: #9cbfe4; --mantine-color-brand-5: #7fa9d6; --mantine-color-brand-6: #7fa9d6; --mantine-color-brand-7: #9cbfe4; --mantine-color-blue-0: color-mix(in oklab, #7fa9d6 13%, transparent); --mantine-color-blue-4: #9cbfe4; --mantine-color-blue-5: #7fa9d6; --mantine-color-blue-6: #7fa9d6; --mantine-color-blue-8: #9cbfe4; --mantine-color-blue-light: color-mix(in oklab, #7fa9d6 13%, transparent); --mantine-color-blue-filled: #7fa9d6; --mantine-color-green-5: #6aa88f; --mantine-color-green-6: #6aa88f; --mantine-color-green-filled: #6aa88f; --mantine-color-yellow-5: #cfa860; --mantine-color-yellow-6: #cfa860; --mantine-color-yellow-8: #cfa860; --mantine-color-yellow-filled: #cfa860; --mantine-color-red-5: #cc6259; --mantine-color-red-6: #cc6259; --mantine-color-red-filled: #cc6259; --surface-card: #141518; --surface-muted: #1c1e22; --border-subtle: color-mix(in oklab, #7fa9d6 18%, transparent); --color-body: #0a0a0c; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-movie-theme="lotr"], [data-movie-theme="lotr"] { --color-gray-50: #ece7db; --color-gray-100: #ece7db; --color-gray-200: #c3bdad; --color-gray-300: #c3bdad; --color-gray-400: #948d7d; --color-gray-500: #948d7d; --color-gray-600: color-mix(in oklab, #c9a961 34%, transparent); --color-gray-700: #1e241d; --color-gray-800: #161b16; --color-gray-900: #0e120e; --color-gray-950: #0e120e; --color-blue-50: color-mix(in oklab, #c9a961 13%, transparent); --color-blue-100: color-mix(in oklab, #c9a961 13%, transparent); --color-blue-200: color-mix(in oklab, #c9a961 13%, transparent); --color-blue-300: #dcc084; --color-blue-400: #dcc084; --color-blue-500: #c9a961; --color-blue-600: #c9a961; --color-blue-700: #c9a961; --color-blue-800: #c9a961; --color-blue-900: #c9a961; --color-blue-950: #c9a961; --color-red-50: color-mix(in oklab, #c06a56 12%, transparent); --color-red-100: color-mix(in oklab, #c06a56 12%, transparent); --color-red-200: color-mix(in oklab, #c06a56 22%, transparent); --color-red-300: #c06a56; --color-red-400: #c06a56; --color-red-500: #c06a56; --color-red-600: #c06a56; --color-red-700: #c06a56; --color-red-800: #c06a56; --color-red-900: #c06a56; --color-red-950: #c06a56; --color-rose-50: color-mix(in oklab, #c06a56 12%, transparent); --color-rose-100: color-mix(in oklab, #c06a56 12%, transparent); --color-rose-200: color-mix(in oklab, #c06a56 22%, transparent); --color-rose-300: #c06a56; --color-rose-400: #c06a56; --color-rose-500: #c06a56; --color-rose-600: #c06a56; --color-rose-700: #c06a56; --color-rose-800: #c06a56; --color-rose-900: #c06a56; --color-rose-950: #c06a56; --color-green-50: color-mix(in oklab, #63a37c 12%, transparent); --color-green-100: color-mix(in oklab, #63a37c 12%, transparent); --color-green-200: color-mix(in oklab, #63a37c 22%, transparent); --color-green-300: #63a37c; --color-green-400: #63a37c; --color-green-500: #63a37c; --color-green-600: #63a37c; --color-green-700: #63a37c; --color-green-800: #63a37c; --color-green-900: #63a37c; --color-green-950: #63a37c; --color-emerald-50: color-mix(in oklab, #63a37c 12%, transparent); --color-emerald-100: color-mix(in oklab, #63a37c 12%, transparent); --color-emerald-200: color-mix(in oklab, #63a37c 22%, transparent); --color-emerald-300: #63a37c; --color-emerald-400: #63a37c; --color-emerald-500: #63a37c; --color-emerald-600: #63a37c; --color-emerald-700: #63a37c; --color-emerald-800: #63a37c; --color-emerald-900: #63a37c; --color-emerald-950: #63a37c; --color-yellow-50: color-mix(in oklab, #c9a961 12%, transparent); --color-yellow-100: color-mix(in oklab, #c9a961 12%, transparent); --color-yellow-200: color-mix(in oklab, #c9a961 22%, transparent); --color-yellow-300: #c9a961; --color-yellow-400: #c9a961; --color-yellow-500: #c9a961; --color-yellow-600: #c9a961; --color-yellow-700: #c9a961; --color-yellow-800: #c9a961; --color-yellow-900: #c9a961; --color-yellow-950: #c9a961; --color-amber-50: color-mix(in oklab, #c9a961 12%, transparent); --color-amber-100: color-mix(in oklab, #c9a961 12%, transparent); --color-amber-200: color-mix(in oklab, #c9a961 22%, transparent); --color-amber-300: #c9a961; --color-amber-400: #c9a961; --color-amber-500: #c9a961; --color-amber-600: #c9a961; --color-amber-700: #c9a961; --color-amber-800: #c9a961; --color-amber-900: #c9a961; --color-amber-950: #c9a961; --color-orange-50: color-mix(in oklab, #c9a961 12%, transparent); --color-orange-100: color-mix(in oklab, #c9a961 12%, transparent); --color-orange-200: color-mix(in oklab, #c9a961 22%, transparent); --color-orange-300: #c9a961; --color-orange-400: #c9a961; --color-orange-500: #c9a961; --color-orange-600: #c9a961; --color-orange-700: #c9a961; --color-orange-800: #c9a961; --color-orange-900: #c9a961; --color-orange-950: #c9a961; --lo-background: #0e120e; --lo-surface: #161b16; --lo-surface-elevated: #1e241d; --lo-text-primary: #ece7db; --lo-text-secondary: #c3bdad; --lo-text-muted: #948d7d; --lo-border: color-mix(in oklab, #c9a961 18%, transparent); --lo-border-strong: color-mix(in oklab, #c9a961 34%, transparent); --lo-accent: #c9a961; --lo-accent-hover: #dcc084; --lo-accent-subtle: color-mix(in oklab, #c9a961 13%, transparent); --lo-accent-contrast: #0e120e; --lo-success: #63a37c; --lo-warning: #c9a961; --lo-danger: #c06a56; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #0e120e; --mantine-color-text: #ece7db; --mantine-color-dimmed: #948d7d; --mantine-color-default: #161b16; --mantine-color-default-hover: #1e241d; --mantine-color-default-color: #ece7db; --mantine-color-default-border: color-mix(in oklab, #c9a961 18%, transparent); --mantine-color-placeholder: #948d7d; --mantine-color-anchor: #c9a961; --mantine-color-error: #c06a56; --mantine-primary-color-filled: #c9a961; --mantine-primary-color-filled-hover: #dcc084; --mantine-primary-color-light: color-mix(in oklab, #c9a961 13%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, #c9a961 13%, transparent); --mantine-primary-color-light-color: #c9a961; --mantine-primary-color-contrast: #0e120e; --mantine-color-dark-0: #ece7db; --mantine-color-dark-1: #c3bdad; --mantine-color-dark-2: #c3bdad; --mantine-color-dark-3: #948d7d; --mantine-color-dark-4: color-mix(in oklab, #c9a961 18%, transparent); --mantine-color-dark-5: #1e241d; --mantine-color-dark-6: #161b16; --mantine-color-dark-7: #161b16; --mantine-color-dark-8: #0e120e; --mantine-color-dark-9: #0e120e; --mantine-color-gray-0: #1e241d; --mantine-color-gray-1: #161b16; --mantine-color-gray-2: color-mix(in oklab, #c9a961 18%, transparent); --mantine-color-gray-3: color-mix(in oklab, #c9a961 18%, transparent); --mantine-color-gray-4: #948d7d; --mantine-color-gray-5: #948d7d; --mantine-color-gray-6: #c3bdad; --mantine-color-gray-7: #c3bdad; --mantine-color-gray-8: #ece7db; --mantine-color-gray-9: #ece7db; --mantine-color-brand-light: color-mix(in oklab, #c9a961 13%, transparent); --mantine-color-brand-filled: #c9a961; --mantine-color-brand-filled-hover: #dcc084; --mantine-color-brand-4: #dcc084; --mantine-color-brand-5: #c9a961; --mantine-color-brand-6: #c9a961; --mantine-color-brand-7: #dcc084; --mantine-color-blue-0: color-mix(in oklab, #c9a961 13%, transparent); --mantine-color-blue-4: #dcc084; --mantine-color-blue-5: #c9a961; --mantine-color-blue-6: #c9a961; --mantine-color-blue-8: #dcc084; --mantine-color-blue-light: color-mix(in oklab, #c9a961 13%, transparent); --mantine-color-blue-filled: #c9a961; --mantine-color-green-5: #63a37c; --mantine-color-green-6: #63a37c; --mantine-color-green-filled: #63a37c; --mantine-color-yellow-5: #c9a961; --mantine-color-yellow-6: #c9a961; --mantine-color-yellow-8: #c9a961; --mantine-color-yellow-filled: #c9a961; --mantine-color-red-5: #c06a56; --mantine-color-red-6: #c06a56; --mantine-color-red-filled: #c06a56; --surface-card: #161b16; --surface-muted: #1e241d; --border-subtle: color-mix(in oklab, #c9a961 18%, transparent); --color-body: #0e120e; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-movie-theme="dune"], [data-movie-theme="dune"] { --color-gray-50: #fdf9f1; --color-gray-100: #f9f3e8; --color-gray-200: rgba(94, 72, 40, 0.18); --color-gray-300: rgba(94, 72, 40, 0.34); --color-gray-400: #6b5e4b; --color-gray-500: #6b5e4b; --color-gray-600: #564936; --color-gray-700: #564936; --color-gray-800: #2b2318; --color-gray-900: #2b2318; --color-gray-950: #2b2318; --color-blue-50: rgba(138, 94, 40, 0.12); --color-blue-100: rgba(138, 94, 40, 0.12); --color-blue-200: rgba(138, 94, 40, 0.12); --color-blue-300: #9f6f34; --color-blue-400: #9f6f34; --color-blue-500: #8a5e28; --color-blue-600: #8a5e28; --color-blue-700: #8a5e28; --color-blue-800: #8a5e28; --color-blue-900: #8a5e28; --color-blue-950: #8a5e28; --color-red-50: color-mix(in oklab, #a54b3a 12%, transparent); --color-red-100: color-mix(in oklab, #a54b3a 12%, transparent); --color-red-200: color-mix(in oklab, #a54b3a 22%, transparent); --color-red-300: #a54b3a; --color-red-400: #a54b3a; --color-red-500: #a54b3a; --color-red-600: #a54b3a; --color-red-700: #a54b3a; --color-red-800: #a54b3a; --color-red-900: #a54b3a; --color-red-950: #a54b3a; --color-rose-50: color-mix(in oklab, #a54b3a 12%, transparent); --color-rose-100: color-mix(in oklab, #a54b3a 12%, transparent); --color-rose-200: color-mix(in oklab, #a54b3a 22%, transparent); --color-rose-300: #a54b3a; --color-rose-400: #a54b3a; --color-rose-500: #a54b3a; --color-rose-600: #a54b3a; --color-rose-700: #a54b3a; --color-rose-800: #a54b3a; --color-rose-900: #a54b3a; --color-rose-950: #a54b3a; --color-green-50: color-mix(in oklab, #4f7a52 12%, transparent); --color-green-100: color-mix(in oklab, #4f7a52 12%, transparent); --color-green-200: color-mix(in oklab, #4f7a52 22%, transparent); --color-green-300: #4f7a52; --color-green-400: #4f7a52; --color-green-500: #4f7a52; --color-green-600: #4f7a52; --color-green-700: #4f7a52; --color-green-800: #4f7a52; --color-green-900: #4f7a52; --color-green-950: #4f7a52; --color-emerald-50: color-mix(in oklab, #4f7a52 12%, transparent); --color-emerald-100: color-mix(in oklab, #4f7a52 12%, transparent); --color-emerald-200: color-mix(in oklab, #4f7a52 22%, transparent); --color-emerald-300: #4f7a52; --color-emerald-400: #4f7a52; --color-emerald-500: #4f7a52; --color-emerald-600: #4f7a52; --color-emerald-700: #4f7a52; --color-emerald-800: #4f7a52; --color-emerald-900: #4f7a52; --color-emerald-950: #4f7a52; --color-yellow-50: color-mix(in oklab, #9c6f26 12%, transparent); --color-yellow-100: color-mix(in oklab, #9c6f26 12%, transparent); --color-yellow-200: color-mix(in oklab, #9c6f26 22%, transparent); --color-yellow-300: #9c6f26; --color-yellow-400: #9c6f26; --color-yellow-500: #9c6f26; --color-yellow-600: #9c6f26; --color-yellow-700: #9c6f26; --color-yellow-800: #9c6f26; --color-yellow-900: #9c6f26; --color-yellow-950: #9c6f26; --color-amber-50: color-mix(in oklab, #9c6f26 12%, transparent); --color-amber-100: color-mix(in oklab, #9c6f26 12%, transparent); --color-amber-200: color-mix(in oklab, #9c6f26 22%, transparent); --color-amber-300: #9c6f26; --color-amber-400: #9c6f26; --color-amber-500: #9c6f26; --color-amber-600: #9c6f26; --color-amber-700: #9c6f26; --color-amber-800: #9c6f26; --color-amber-900: #9c6f26; --color-amber-950: #9c6f26; --color-orange-50: color-mix(in oklab, #9c6f26 12%, transparent); --color-orange-100: color-mix(in oklab, #9c6f26 12%, transparent); --color-orange-200: color-mix(in oklab, #9c6f26 22%, transparent); --color-orange-300: #9c6f26; --color-orange-400: #9c6f26; --color-orange-500: #9c6f26; --color-orange-600: #9c6f26; --color-orange-700: #9c6f26; --color-orange-800: #9c6f26; --color-orange-900: #9c6f26; --color-orange-950: #9c6f26; --lo-background: #f1e8d9; --lo-surface: #f9f3e8; --lo-surface-elevated: #fdf9f1; --lo-text-primary: #2b2318; --lo-text-secondary: #564936; --lo-text-muted: #6b5e4b; --lo-border: rgba(94, 72, 40, 0.18); --lo-border-strong: rgba(94, 72, 40, 0.34); --lo-accent: #8a5e28; --lo-accent-hover: #9f6f34; --lo-accent-subtle: rgba(138, 94, 40, 0.12); --lo-accent-contrast: #fdf9f1; --lo-success: #4f7a52; --lo-warning: #9c6f26; --lo-danger: #a54b3a; --lo-shadow: rgba(94, 72, 40, 0.16); --mantine-color-body: #f1e8d9; --mantine-color-text: #2b2318; --mantine-color-dimmed: #6b5e4b; --mantine-color-default: #f9f3e8; --mantine-color-default-hover: #fdf9f1; --mantine-color-default-color: #2b2318; --mantine-color-default-border: rgba(94, 72, 40, 0.18); --mantine-color-placeholder: #6b5e4b; --mantine-color-anchor: #8a5e28; --mantine-color-error: #a54b3a; --mantine-primary-color-filled: #8a5e28; --mantine-primary-color-filled-hover: #9f6f34; --mantine-primary-color-light: rgba(138, 94, 40, 0.12); --mantine-primary-color-light-hover: rgba(138, 94, 40, 0.12); --mantine-primary-color-light-color: #8a5e28; --mantine-primary-color-contrast: #fdf9f1; --mantine-color-dark-0: #2b2318; --mantine-color-dark-1: #564936; --mantine-color-dark-2: #564936; --mantine-color-dark-3: #6b5e4b; --mantine-color-dark-4: rgba(94, 72, 40, 0.18); --mantine-color-dark-5: #fdf9f1; --mantine-color-dark-6: #f9f3e8; --mantine-color-dark-7: #f9f3e8; --mantine-color-dark-8: #f1e8d9; --mantine-color-dark-9: #f1e8d9; --mantine-color-gray-0: #fdf9f1; --mantine-color-gray-1: #f9f3e8; --mantine-color-gray-2: rgba(94, 72, 40, 0.18); --mantine-color-gray-3: rgba(94, 72, 40, 0.18); --mantine-color-gray-4: #6b5e4b; --mantine-color-gray-5: #6b5e4b; --mantine-color-gray-6: #564936; --mantine-color-gray-7: #564936; --mantine-color-gray-8: #2b2318; --mantine-color-gray-9: #2b2318; --mantine-color-brand-light: rgba(138, 94, 40, 0.12); --mantine-color-brand-filled: #8a5e28; --mantine-color-brand-filled-hover: #9f6f34; --mantine-color-brand-4: #9f6f34; --mantine-color-brand-5: #8a5e28; --mantine-color-brand-6: #8a5e28; --mantine-color-brand-7: #9f6f34; --mantine-color-blue-0: rgba(138, 94, 40, 0.12); --mantine-color-blue-4: #9f6f34; --mantine-color-blue-5: #8a5e28; --mantine-color-blue-6: #8a5e28; --mantine-color-blue-8: #9f6f34; --mantine-color-blue-light: rgba(138, 94, 40, 0.12); --mantine-color-blue-filled: #8a5e28; --mantine-color-green-5: #4f7a52; --mantine-color-green-6: #4f7a52; --mantine-color-green-filled: #4f7a52; --mantine-color-yellow-5: #9c6f26; --mantine-color-yellow-6: #9c6f26; --mantine-color-yellow-8: #9c6f26; --mantine-color-yellow-filled: #9c6f26; --mantine-color-red-5: #a54b3a; --mantine-color-red-6: #a54b3a; --mantine-color-red-filled: #a54b3a; --surface-card: #f9f3e8; --surface-muted: #fdf9f1; --border-subtle: rgba(94, 72, 40, 0.18); --color-body: #f1e8d9; --shadow-card: 0 1px 3px 0 rgba(94, 72, 40, 0.16); --shadow-card-hover: 0 10px 25px -5px rgba(94, 72, 40, 0.16), 0 4px 10px -6px rgba(94, 72, 40, 0.16); --shadow-dark-card: 0 1px 3px 0 rgba(94, 72, 40, 0.16); --shadow-dark-card-hover: 0 10px 25px -5px rgba(94, 72, 40, 0.16), 0 4px 10px -6px rgba(94, 72, 40, 0.16); --shadow-modal: 0 25px 50px -12px rgba(94, 72, 40, 0.16); --shadow-dark-modal: 0 25px 50px -12px rgba(94, 72, 40, 0.16); --shadow-sidebar: 4px 0 24px 0 rgba(94, 72, 40, 0.16); --shadow-dark-sidebar: 4px 0 24px 0 rgba(94, 72, 40, 0.16); } :root:root[data-movie-theme="jurassic-park"], [data-movie-theme="jurassic-park"] { --color-gray-50: #e9ece7; --color-gray-100: #e9ece7; --color-gray-200: #bfc5bc; --color-gray-300: #bfc5bc; --color-gray-400: #8b9389; --color-gray-500: #8b9389; --color-gray-600: color-mix(in oklab, #d9a441 34%, transparent); --color-gray-700: #1c231d; --color-gray-800: #141a16; --color-gray-900: #0d1210; --color-gray-950: #0d1210; --color-blue-50: color-mix(in oklab, #d9a441 13%, transparent); --color-blue-100: color-mix(in oklab, #d9a441 13%, transparent); --color-blue-200: color-mix(in oklab, #d9a441 13%, transparent); --color-blue-300: #e7bb69; --color-blue-400: #e7bb69; --color-blue-500: #d9a441; --color-blue-600: #d9a441; --color-blue-700: #d9a441; --color-blue-800: #d9a441; --color-blue-900: #d9a441; --color-blue-950: #d9a441; --color-red-50: color-mix(in oklab, #c4685a 12%, transparent); --color-red-100: color-mix(in oklab, #c4685a 12%, transparent); --color-red-200: color-mix(in oklab, #c4685a 22%, transparent); --color-red-300: #c4685a; --color-red-400: #c4685a; --color-red-500: #c4685a; --color-red-600: #c4685a; --color-red-700: #c4685a; --color-red-800: #c4685a; --color-red-900: #c4685a; --color-red-950: #c4685a; --color-rose-50: color-mix(in oklab, #c4685a 12%, transparent); --color-rose-100: color-mix(in oklab, #c4685a 12%, transparent); --color-rose-200: color-mix(in oklab, #c4685a 22%, transparent); --color-rose-300: #c4685a; --color-rose-400: #c4685a; --color-rose-500: #c4685a; --color-rose-600: #c4685a; --color-rose-700: #c4685a; --color-rose-800: #c4685a; --color-rose-900: #c4685a; --color-rose-950: #c4685a; --color-green-50: color-mix(in oklab, #5fa377 12%, transparent); --color-green-100: color-mix(in oklab, #5fa377 12%, transparent); --color-green-200: color-mix(in oklab, #5fa377 22%, transparent); --color-green-300: #5fa377; --color-green-400: #5fa377; --color-green-500: #5fa377; --color-green-600: #5fa377; --color-green-700: #5fa377; --color-green-800: #5fa377; --color-green-900: #5fa377; --color-green-950: #5fa377; --color-emerald-50: color-mix(in oklab, #5fa377 12%, transparent); --color-emerald-100: color-mix(in oklab, #5fa377 12%, transparent); --color-emerald-200: color-mix(in oklab, #5fa377 22%, transparent); --color-emerald-300: #5fa377; --color-emerald-400: #5fa377; --color-emerald-500: #5fa377; --color-emerald-600: #5fa377; --color-emerald-700: #5fa377; --color-emerald-800: #5fa377; --color-emerald-900: #5fa377; --color-emerald-950: #5fa377; --color-yellow-50: color-mix(in oklab, #d9a441 12%, transparent); --color-yellow-100: color-mix(in oklab, #d9a441 12%, transparent); --color-yellow-200: color-mix(in oklab, #d9a441 22%, transparent); --color-yellow-300: #d9a441; --color-yellow-400: #d9a441; --color-yellow-500: #d9a441; --color-yellow-600: #d9a441; --color-yellow-700: #d9a441; --color-yellow-800: #d9a441; --color-yellow-900: #d9a441; --color-yellow-950: #d9a441; --color-amber-50: color-mix(in oklab, #d9a441 12%, transparent); --color-amber-100: color-mix(in oklab, #d9a441 12%, transparent); --color-amber-200: color-mix(in oklab, #d9a441 22%, transparent); --color-amber-300: #d9a441; --color-amber-400: #d9a441; --color-amber-500: #d9a441; --color-amber-600: #d9a441; --color-amber-700: #d9a441; --color-amber-800: #d9a441; --color-amber-900: #d9a441; --color-amber-950: #d9a441; --color-orange-50: color-mix(in oklab, #d9a441 12%, transparent); --color-orange-100: color-mix(in oklab, #d9a441 12%, transparent); --color-orange-200: color-mix(in oklab, #d9a441 22%, transparent); --color-orange-300: #d9a441; --color-orange-400: #d9a441; --color-orange-500: #d9a441; --color-orange-600: #d9a441; --color-orange-700: #d9a441; --color-orange-800: #d9a441; --color-orange-900: #d9a441; --color-orange-950: #d9a441; --lo-background: #0d1210; --lo-surface: #141a16; --lo-surface-elevated: #1c231d; --lo-text-primary: #e9ece7; --lo-text-secondary: #bfc5bc; --lo-text-muted: #8b9389; --lo-border: color-mix(in oklab, #d9a441 18%, transparent); --lo-border-strong: color-mix(in oklab, #d9a441 34%, transparent); --lo-accent: #d9a441; --lo-accent-hover: #e7bb69; --lo-accent-subtle: color-mix(in oklab, #d9a441 13%, transparent); --lo-accent-contrast: #0d1210; --lo-success: #5fa377; --lo-warning: #d9a441; --lo-danger: #c4685a; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #0d1210; --mantine-color-text: #e9ece7; --mantine-color-dimmed: #8b9389; --mantine-color-default: #141a16; --mantine-color-default-hover: #1c231d; --mantine-color-default-color: #e9ece7; --mantine-color-default-border: color-mix(in oklab, #d9a441 18%, transparent); --mantine-color-placeholder: #8b9389; --mantine-color-anchor: #d9a441; --mantine-color-error: #c4685a; --mantine-primary-color-filled: #d9a441; --mantine-primary-color-filled-hover: #e7bb69; --mantine-primary-color-light: color-mix(in oklab, #d9a441 13%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, #d9a441 13%, transparent); --mantine-primary-color-light-color: #d9a441; --mantine-primary-color-contrast: #0d1210; --mantine-color-dark-0: #e9ece7; --mantine-color-dark-1: #bfc5bc; --mantine-color-dark-2: #bfc5bc; --mantine-color-dark-3: #8b9389; --mantine-color-dark-4: color-mix(in oklab, #d9a441 18%, transparent); --mantine-color-dark-5: #1c231d; --mantine-color-dark-6: #141a16; --mantine-color-dark-7: #141a16; --mantine-color-dark-8: #0d1210; --mantine-color-dark-9: #0d1210; --mantine-color-gray-0: #1c231d; --mantine-color-gray-1: #141a16; --mantine-color-gray-2: color-mix(in oklab, #d9a441 18%, transparent); --mantine-color-gray-3: color-mix(in oklab, #d9a441 18%, transparent); --mantine-color-gray-4: #8b9389; --mantine-color-gray-5: #8b9389; --mantine-color-gray-6: #bfc5bc; --mantine-color-gray-7: #bfc5bc; --mantine-color-gray-8: #e9ece7; --mantine-color-gray-9: #e9ece7; --mantine-color-brand-light: color-mix(in oklab, #d9a441 13%, transparent); --mantine-color-brand-filled: #d9a441; --mantine-color-brand-filled-hover: #e7bb69; --mantine-color-brand-4: #e7bb69; --mantine-color-brand-5: #d9a441; --mantine-color-brand-6: #d9a441; --mantine-color-brand-7: #e7bb69; --mantine-color-blue-0: color-mix(in oklab, #d9a441 13%, transparent); --mantine-color-blue-4: #e7bb69; --mantine-color-blue-5: #d9a441; --mantine-color-blue-6: #d9a441; --mantine-color-blue-8: #e7bb69; --mantine-color-blue-light: color-mix(in oklab, #d9a441 13%, transparent); --mantine-color-blue-filled: #d9a441; --mantine-color-green-5: #5fa377; --mantine-color-green-6: #5fa377; --mantine-color-green-filled: #5fa377; --mantine-color-yellow-5: #d9a441; --mantine-color-yellow-6: #d9a441; --mantine-color-yellow-8: #d9a441; --mantine-color-yellow-filled: #d9a441; --mantine-color-red-5: #c4685a; --mantine-color-red-6: #c4685a; --mantine-color-red-filled: #c4685a; --surface-card: #141a16; --surface-muted: #1c231d; --border-subtle: color-mix(in oklab, #d9a441 18%, transparent); --color-body: #0d1210; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-movie-theme="matrix"], [data-movie-theme="matrix"] { --color-gray-50: #dbe6db; --color-gray-100: #dbe6db; --color-gray-200: #a8b8a8; --color-gray-300: #a8b8a8; --color-gray-400: #7d8b7d; --color-gray-500: #7d8b7d; --color-gray-600: color-mix(in oklab, #4fbf7f 34%, transparent); --color-gray-700: #141a14; --color-gray-800: #0d110d; --color-gray-900: #050705; --color-gray-950: #050705; --color-blue-50: color-mix(in oklab, #4fbf7f 13%, transparent); --color-blue-100: color-mix(in oklab, #4fbf7f 13%, transparent); --color-blue-200: color-mix(in oklab, #4fbf7f 13%, transparent); --color-blue-300: #74d29c; --color-blue-400: #74d29c; --color-blue-500: #4fbf7f; --color-blue-600: #4fbf7f; --color-blue-700: #4fbf7f; --color-blue-800: #4fbf7f; --color-blue-900: #4fbf7f; --color-blue-950: #4fbf7f; --color-red-50: color-mix(in oklab, #c46a63 12%, transparent); --color-red-100: color-mix(in oklab, #c46a63 12%, transparent); --color-red-200: color-mix(in oklab, #c46a63 22%, transparent); --color-red-300: #c46a63; --color-red-400: #c46a63; --color-red-500: #c46a63; --color-red-600: #c46a63; --color-red-700: #c46a63; --color-red-800: #c46a63; --color-red-900: #c46a63; --color-red-950: #c46a63; --color-rose-50: color-mix(in oklab, #c46a63 12%, transparent); --color-rose-100: color-mix(in oklab, #c46a63 12%, transparent); --color-rose-200: color-mix(in oklab, #c46a63 22%, transparent); --color-rose-300: #c46a63; --color-rose-400: #c46a63; --color-rose-500: #c46a63; --color-rose-600: #c46a63; --color-rose-700: #c46a63; --color-rose-800: #c46a63; --color-rose-900: #c46a63; --color-rose-950: #c46a63; --color-green-50: color-mix(in oklab, #4fbf7f 12%, transparent); --color-green-100: color-mix(in oklab, #4fbf7f 12%, transparent); --color-green-200: color-mix(in oklab, #4fbf7f 22%, transparent); --color-green-300: #4fbf7f; --color-green-400: #4fbf7f; --color-green-500: #4fbf7f; --color-green-600: #4fbf7f; --color-green-700: #4fbf7f; --color-green-800: #4fbf7f; --color-green-900: #4fbf7f; --color-green-950: #4fbf7f; --color-emerald-50: color-mix(in oklab, #4fbf7f 12%, transparent); --color-emerald-100: color-mix(in oklab, #4fbf7f 12%, transparent); --color-emerald-200: color-mix(in oklab, #4fbf7f 22%, transparent); --color-emerald-300: #4fbf7f; --color-emerald-400: #4fbf7f; --color-emerald-500: #4fbf7f; --color-emerald-600: #4fbf7f; --color-emerald-700: #4fbf7f; --color-emerald-800: #4fbf7f; --color-emerald-900: #4fbf7f; --color-emerald-950: #4fbf7f; --color-yellow-50: color-mix(in oklab, #c2a95e 12%, transparent); --color-yellow-100: color-mix(in oklab, #c2a95e 12%, transparent); --color-yellow-200: color-mix(in oklab, #c2a95e 22%, transparent); --color-yellow-300: #c2a95e; --color-yellow-400: #c2a95e; --color-yellow-500: #c2a95e; --color-yellow-600: #c2a95e; --color-yellow-700: #c2a95e; --color-yellow-800: #c2a95e; --color-yellow-900: #c2a95e; --color-yellow-950: #c2a95e; --color-amber-50: color-mix(in oklab, #c2a95e 12%, transparent); --color-amber-100: color-mix(in oklab, #c2a95e 12%, transparent); --color-amber-200: color-mix(in oklab, #c2a95e 22%, transparent); --color-amber-300: #c2a95e; --color-amber-400: #c2a95e; --color-amber-500: #c2a95e; --color-amber-600: #c2a95e; --color-amber-700: #c2a95e; --color-amber-800: #c2a95e; --color-amber-900: #c2a95e; --color-amber-950: #c2a95e; --color-orange-50: color-mix(in oklab, #c2a95e 12%, transparent); --color-orange-100: color-mix(in oklab, #c2a95e 12%, transparent); --color-orange-200: color-mix(in oklab, #c2a95e 22%, transparent); --color-orange-300: #c2a95e; --color-orange-400: #c2a95e; --color-orange-500: #c2a95e; --color-orange-600: #c2a95e; --color-orange-700: #c2a95e; --color-orange-800: #c2a95e; --color-orange-900: #c2a95e; --color-orange-950: #c2a95e; --lo-background: #050705; --lo-surface: #0d110d; --lo-surface-elevated: #141a14; --lo-text-primary: #dbe6db; --lo-text-secondary: #a8b8a8; --lo-text-muted: #7d8b7d; --lo-border: color-mix(in oklab, #4fbf7f 18%, transparent); --lo-border-strong: color-mix(in oklab, #4fbf7f 34%, transparent); --lo-accent: #4fbf7f; --lo-accent-hover: #74d29c; --lo-accent-subtle: color-mix(in oklab, #4fbf7f 13%, transparent); --lo-accent-contrast: #050705; --lo-success: #4fbf7f; --lo-warning: #c2a95e; --lo-danger: #c46a63; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #050705; --mantine-color-text: #dbe6db; --mantine-color-dimmed: #7d8b7d; --mantine-color-default: #0d110d; --mantine-color-default-hover: #141a14; --mantine-color-default-color: #dbe6db; --mantine-color-default-border: color-mix(in oklab, #4fbf7f 18%, transparent); --mantine-color-placeholder: #7d8b7d; --mantine-color-anchor: #4fbf7f; --mantine-color-error: #c46a63; --mantine-primary-color-filled: #4fbf7f; --mantine-primary-color-filled-hover: #74d29c; --mantine-primary-color-light: color-mix(in oklab, #4fbf7f 13%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, #4fbf7f 13%, transparent); --mantine-primary-color-light-color: #4fbf7f; --mantine-primary-color-contrast: #050705; --mantine-color-dark-0: #dbe6db; --mantine-color-dark-1: #a8b8a8; --mantine-color-dark-2: #a8b8a8; --mantine-color-dark-3: #7d8b7d; --mantine-color-dark-4: color-mix(in oklab, #4fbf7f 18%, transparent); --mantine-color-dark-5: #141a14; --mantine-color-dark-6: #0d110d; --mantine-color-dark-7: #0d110d; --mantine-color-dark-8: #050705; --mantine-color-dark-9: #050705; --mantine-color-gray-0: #141a14; --mantine-color-gray-1: #0d110d; --mantine-color-gray-2: color-mix(in oklab, #4fbf7f 18%, transparent); --mantine-color-gray-3: color-mix(in oklab, #4fbf7f 18%, transparent); --mantine-color-gray-4: #7d8b7d; --mantine-color-gray-5: #7d8b7d; --mantine-color-gray-6: #a8b8a8; --mantine-color-gray-7: #a8b8a8; --mantine-color-gray-8: #dbe6db; --mantine-color-gray-9: #dbe6db; --mantine-color-brand-light: color-mix(in oklab, #4fbf7f 13%, transparent); --mantine-color-brand-filled: #4fbf7f; --mantine-color-brand-filled-hover: #74d29c; --mantine-color-brand-4: #74d29c; --mantine-color-brand-5: #4fbf7f; --mantine-color-brand-6: #4fbf7f; --mantine-color-brand-7: #74d29c; --mantine-color-blue-0: color-mix(in oklab, #4fbf7f 13%, transparent); --mantine-color-blue-4: #74d29c; --mantine-color-blue-5: #4fbf7f; --mantine-color-blue-6: #4fbf7f; --mantine-color-blue-8: #74d29c; --mantine-color-blue-light: color-mix(in oklab, #4fbf7f 13%, transparent); --mantine-color-blue-filled: #4fbf7f; --mantine-color-green-5: #4fbf7f; --mantine-color-green-6: #4fbf7f; --mantine-color-green-filled: #4fbf7f; --mantine-color-yellow-5: #c2a95e; --mantine-color-yellow-6: #c2a95e; --mantine-color-yellow-8: #c2a95e; --mantine-color-yellow-filled: #c2a95e; --mantine-color-red-5: #c46a63; --mantine-color-red-6: #c46a63; --mantine-color-red-filled: #c46a63; --surface-card: #0d110d; --surface-muted: #141a14; --border-subtle: color-mix(in oklab, #4fbf7f 18%, transparent); --color-body: #050705; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-movie-theme="bond"], [data-movie-theme="bond"] { --color-gray-50: #f0efec; --color-gray-100: #f0efec; --color-gray-200: #c4c2bc; --color-gray-300: #c4c2bc; --color-gray-400: #8c8a84; --color-gray-500: #8c8a84; --color-gray-600: color-mix(in oklab, #cbb27c 34%, transparent); --color-gray-700: #1c1c1c; --color-gray-800: #141414; --color-gray-900: #0a0a0a; --color-gray-950: #0a0a0a; --color-blue-50: color-mix(in oklab, #cbb27c 13%, transparent); --color-blue-100: color-mix(in oklab, #cbb27c 13%, transparent); --color-blue-200: color-mix(in oklab, #cbb27c 13%, transparent); --color-blue-300: #dcc79a; --color-blue-400: #dcc79a; --color-blue-500: #cbb27c; --color-blue-600: #cbb27c; --color-blue-700: #cbb27c; --color-blue-800: #cbb27c; --color-blue-900: #cbb27c; --color-blue-950: #cbb27c; --color-red-50: color-mix(in oklab, #c26a62 12%, transparent); --color-red-100: color-mix(in oklab, #c26a62 12%, transparent); --color-red-200: color-mix(in oklab, #c26a62 22%, transparent); --color-red-300: #c26a62; --color-red-400: #c26a62; --color-red-500: #c26a62; --color-red-600: #c26a62; --color-red-700: #c26a62; --color-red-800: #c26a62; --color-red-900: #c26a62; --color-red-950: #c26a62; --color-rose-50: color-mix(in oklab, #c26a62 12%, transparent); --color-rose-100: color-mix(in oklab, #c26a62 12%, transparent); --color-rose-200: color-mix(in oklab, #c26a62 22%, transparent); --color-rose-300: #c26a62; --color-rose-400: #c26a62; --color-rose-500: #c26a62; --color-rose-600: #c26a62; --color-rose-700: #c26a62; --color-rose-800: #c26a62; --color-rose-900: #c26a62; --color-rose-950: #c26a62; --color-green-50: color-mix(in oklab, #69a68b 12%, transparent); --color-green-100: color-mix(in oklab, #69a68b 12%, transparent); --color-green-200: color-mix(in oklab, #69a68b 22%, transparent); --color-green-300: #69a68b; --color-green-400: #69a68b; --color-green-500: #69a68b; --color-green-600: #69a68b; --color-green-700: #69a68b; --color-green-800: #69a68b; --color-green-900: #69a68b; --color-green-950: #69a68b; --color-emerald-50: color-mix(in oklab, #69a68b 12%, transparent); --color-emerald-100: color-mix(in oklab, #69a68b 12%, transparent); --color-emerald-200: color-mix(in oklab, #69a68b 22%, transparent); --color-emerald-300: #69a68b; --color-emerald-400: #69a68b; --color-emerald-500: #69a68b; --color-emerald-600: #69a68b; --color-emerald-700: #69a68b; --color-emerald-800: #69a68b; --color-emerald-900: #69a68b; --color-emerald-950: #69a68b; --color-yellow-50: color-mix(in oklab, #cbb27c 12%, transparent); --color-yellow-100: color-mix(in oklab, #cbb27c 12%, transparent); --color-yellow-200: color-mix(in oklab, #cbb27c 22%, transparent); --color-yellow-300: #cbb27c; --color-yellow-400: #cbb27c; --color-yellow-500: #cbb27c; --color-yellow-600: #cbb27c; --color-yellow-700: #cbb27c; --color-yellow-800: #cbb27c; --color-yellow-900: #cbb27c; --color-yellow-950: #cbb27c; --color-amber-50: color-mix(in oklab, #cbb27c 12%, transparent); --color-amber-100: color-mix(in oklab, #cbb27c 12%, transparent); --color-amber-200: color-mix(in oklab, #cbb27c 22%, transparent); --color-amber-300: #cbb27c; --color-amber-400: #cbb27c; --color-amber-500: #cbb27c; --color-amber-600: #cbb27c; --color-amber-700: #cbb27c; --color-amber-800: #cbb27c; --color-amber-900: #cbb27c; --color-amber-950: #cbb27c; --color-orange-50: color-mix(in oklab, #cbb27c 12%, transparent); --color-orange-100: color-mix(in oklab, #cbb27c 12%, transparent); --color-orange-200: color-mix(in oklab, #cbb27c 22%, transparent); --color-orange-300: #cbb27c; --color-orange-400: #cbb27c; --color-orange-500: #cbb27c; --color-orange-600: #cbb27c; --color-orange-700: #cbb27c; --color-orange-800: #cbb27c; --color-orange-900: #cbb27c; --color-orange-950: #cbb27c; --lo-background: #0a0a0a; --lo-surface: #141414; --lo-surface-elevated: #1c1c1c; --lo-text-primary: #f0efec; --lo-text-secondary: #c4c2bc; --lo-text-muted: #8c8a84; --lo-border: color-mix(in oklab, #cbb27c 18%, transparent); --lo-border-strong: color-mix(in oklab, #cbb27c 34%, transparent); --lo-accent: #cbb27c; --lo-accent-hover: #dcc79a; --lo-accent-subtle: color-mix(in oklab, #cbb27c 13%, transparent); --lo-accent-contrast: #0a0a0a; --lo-success: #69a68b; --lo-warning: #cbb27c; --lo-danger: #c26a62; --lo-shadow: rgba(0, 0, 0, 0.6); --mantine-color-body: #0a0a0a; --mantine-color-text: #f0efec; --mantine-color-dimmed: #8c8a84; --mantine-color-default: #141414; --mantine-color-default-hover: #1c1c1c; --mantine-color-default-color: #f0efec; --mantine-color-default-border: color-mix(in oklab, #cbb27c 18%, transparent); --mantine-color-placeholder: #8c8a84; --mantine-color-anchor: #cbb27c; --mantine-color-error: #c26a62; --mantine-primary-color-filled: #cbb27c; --mantine-primary-color-filled-hover: #dcc79a; --mantine-primary-color-light: color-mix(in oklab, #cbb27c 13%, transparent); --mantine-primary-color-light-hover: color-mix(in oklab, #cbb27c 13%, transparent); --mantine-primary-color-light-color: #cbb27c; --mantine-primary-color-contrast: #0a0a0a; --mantine-color-dark-0: #f0efec; --mantine-color-dark-1: #c4c2bc; --mantine-color-dark-2: #c4c2bc; --mantine-color-dark-3: #8c8a84; --mantine-color-dark-4: color-mix(in oklab, #cbb27c 18%, transparent); --mantine-color-dark-5: #1c1c1c; --mantine-color-dark-6: #141414; --mantine-color-dark-7: #141414; --mantine-color-dark-8: #0a0a0a; --mantine-color-dark-9: #0a0a0a; --mantine-color-gray-0: #1c1c1c; --mantine-color-gray-1: #141414; --mantine-color-gray-2: color-mix(in oklab, #cbb27c 18%, transparent); --mantine-color-gray-3: color-mix(in oklab, #cbb27c 18%, transparent); --mantine-color-gray-4: #8c8a84; --mantine-color-gray-5: #8c8a84; --mantine-color-gray-6: #c4c2bc; --mantine-color-gray-7: #c4c2bc; --mantine-color-gray-8: #f0efec; --mantine-color-gray-9: #f0efec; --mantine-color-brand-light: color-mix(in oklab, #cbb27c 13%, transparent); --mantine-color-brand-filled: #cbb27c; --mantine-color-brand-filled-hover: #dcc79a; --mantine-color-brand-4: #dcc79a; --mantine-color-brand-5: #cbb27c; --mantine-color-brand-6: #cbb27c; --mantine-color-brand-7: #dcc79a; --mantine-color-blue-0: color-mix(in oklab, #cbb27c 13%, transparent); --mantine-color-blue-4: #dcc79a; --mantine-color-blue-5: #cbb27c; --mantine-color-blue-6: #cbb27c; --mantine-color-blue-8: #dcc79a; --mantine-color-blue-light: color-mix(in oklab, #cbb27c 13%, transparent); --mantine-color-blue-filled: #cbb27c; --mantine-color-green-5: #69a68b; --mantine-color-green-6: #69a68b; --mantine-color-green-filled: #69a68b; --mantine-color-yellow-5: #cbb27c; --mantine-color-yellow-6: #cbb27c; --mantine-color-yellow-8: #cbb27c; --mantine-color-yellow-filled: #cbb27c; --mantine-color-red-5: #c26a62; --mantine-color-red-6: #c26a62; --mantine-color-red-filled: #c26a62; --surface-card: #141414; --surface-muted: #1c1c1c; --border-subtle: color-mix(in oklab, #cbb27c 18%, transparent); --color-body: #0a0a0a; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.6); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.6); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.6); } :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--hp-candle) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--hp-gold) 7%, transparent) 0%, transparent 58%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--hp-gold) 5%, transparent) 0%, transparent 42%); } :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--hp-gold) 40%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--hp-gold) 40%, transparent), 0 0 0 1px color-mix(in oklab, var(--hp-gold) 16%, transparent), 0 10px 28px color-mix(in oklab, var(--hp-candle) 14%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="harry-potter"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--hp-gold) 40%, transparent) 30%, color-mix(in oklab, var(--hp-gold) 40%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="harry-potter"] [data-theme-preview="page"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--hp-candle) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--hp-gold) 7%, transparent) 0%, transparent 58%); } [data-theme-depth="full"][data-movie-theme="harry-potter"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--hp-gold) 5%, transparent) 0%, transparent 42%); } [data-theme-depth="full"][data-movie-theme="harry-potter"] [data-theme-preview="surface"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--hp-gold) 40%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="marvel"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #c8d0dc 4.5%, transparent) 0%, transparent 30%); } :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #c8d0dc 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #c8d0dc 10%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="marvel"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="marvel"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, #c8d0dc 10%, transparent), 0 0 0 1px color-mix(in oklab, #c8d0dc 11%, transparent), 0 14px 34px color-mix(in oklab, #000 55%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="marvel"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, #c8d0dc 18%, transparent) 30%, color-mix(in oklab, #c8d0dc 18%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="marvel"] [data-theme-preview="page"] { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); } [data-theme-depth="full"][data-movie-theme="marvel"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, #c8d0dc 4.5%, transparent) 0%, transparent 30%); } [data-theme-depth="full"][data-movie-theme="marvel"] [data-theme-preview="surface"] { background-image: linear-gradient(180deg, color-mix(in oklab, #c8d0dc 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #c8d0dc 10%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="dc"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="dc"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #b9c4d2 26%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="dc"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="dc"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="dc"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="dc"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="dc"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, #b9c4d2 26%, transparent), 0 0 0 1px color-mix(in oklab, #b9c4d2 14%, transparent), 0 12px 32px color-mix(in oklab, var(--lo-accent) 10%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="dc"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, #b9c4d2 34%, transparent) 30%, color-mix(in oklab, #b9c4d2 34%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="dc"] [data-theme-preview="page"] { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); } [data-theme-depth="full"][data-movie-theme="dc"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } [data-theme-depth="full"][data-movie-theme="dc"] [data-theme-preview="surface"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #b9c4d2 26%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent), 0 0 0 1px color-mix(in oklab, var(--lo-accent) 14%, transparent), 0 12px 32px color-mix(in oklab, var(--lo-accent) 10%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="interstellar"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--lo-accent) 34%, transparent) 30%, color-mix(in oklab, var(--lo-accent) 34%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="interstellar"] [data-theme-preview="page"] { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); } [data-theme-depth="full"][data-movie-theme="interstellar"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } [data-theme-depth="full"][data-movie-theme="interstellar"] [data-theme-preview="surface"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent), 0 0 0 1px color-mix(in oklab, var(--lo-accent) 14%, transparent), 0 12px 32px color-mix(in oklab, var(--lo-accent) 10%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="star-wars"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--lo-accent) 34%, transparent) 30%, color-mix(in oklab, var(--lo-accent) 34%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="star-wars"] [data-theme-preview="page"] { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); } [data-theme-depth="full"][data-movie-theme="star-wars"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } [data-theme-depth="full"][data-movie-theme="star-wars"] [data-theme-preview="surface"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="lotr"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.76%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, #3d6b45 7%, transparent) 0%, transparent 58%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.7%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.16%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="lotr"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="lotr"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent), 0 0 0 1px color-mix(in oklab, var(--lo-accent) 16%, transparent), 0 10px 28px color-mix(in oklab, var(--lo-accent) 14%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="lotr"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--lo-accent) 40%, transparent) 30%, color-mix(in oklab, var(--lo-accent) 40%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="lotr"] [data-theme-preview="page"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.76%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, #3d6b45 7%, transparent) 0%, transparent 58%); } [data-theme-depth="full"][data-movie-theme="lotr"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } [data-theme-depth="full"][data-movie-theme="lotr"] [data-theme-preview="surface"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.7%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.16%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="dune"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 3%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.40%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, #fff 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="dune"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 5%, transparent) 0%, transparent 42%); } :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 3.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.80%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 40%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="dune"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="dune"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="dune"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="dune"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="dune"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 40%, transparent), 0 0 0 1px color-mix(in oklab, #fff 16%, transparent), 0 10px 28px color-mix(in oklab, #fff 14%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="dune"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, #fff 40%, transparent) 30%, color-mix(in oklab, #fff 40%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="dune"] [data-theme-preview="page"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 3%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.40%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, #fff 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); } [data-theme-depth="full"][data-movie-theme="dune"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 5%, transparent) 0%, transparent 42%); } [data-theme-depth="full"][data-movie-theme="dune"] [data-theme-preview="surface"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 3.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.80%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 40%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, #2f5c3d 7%, transparent) 0%, transparent 58%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent), 0 0 0 1px color-mix(in oklab, var(--lo-accent) 16%, transparent), 0 10px 28px color-mix(in oklab, var(--lo-accent) 14%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="jurassic-park"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--lo-accent) 40%, transparent) 30%, color-mix(in oklab, var(--lo-accent) 40%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="jurassic-park"] [data-theme-preview="page"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, #2f5c3d 7%, transparent) 0%, transparent 58%); } [data-theme-depth="full"][data-movie-theme="jurassic-park"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } [data-theme-depth="full"][data-movie-theme="jurassic-park"] [data-theme-preview="surface"] { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="matrix"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #7fbf95 4.5%, transparent) 0%, transparent 30%); } :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #7fbf95 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #7fbf95 10%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="matrix"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="matrix"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, #7fbf95 10%, transparent), 0 0 0 1px color-mix(in oklab, #7fbf95 11%, transparent), 0 14px 34px color-mix(in oklab, #000 55%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="matrix"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, #7fbf95 18%, transparent) 30%, color-mix(in oklab, #7fbf95 18%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="matrix"] [data-theme-preview="page"] { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); } [data-theme-depth="full"][data-movie-theme="matrix"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, #7fbf95 4.5%, transparent) 0%, transparent 30%); } [data-theme-depth="full"][data-movie-theme="matrix"] [data-theme-preview="surface"] { background-image: linear-gradient(180deg, color-mix(in oklab, #7fbf95 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #7fbf95 10%, transparent); } :root:root[data-theme-depth="full"][data-movie-theme="bond"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); /* Not `fixed`: a fixed attachment repaints the whole layer on every scroll frame, which on a phone is the difference between a texture and a stutter. */ background-attachment: scroll; } :root:root[data-theme-depth="full"][data-movie-theme="bond"] .sd-navbar, :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #d8c9a4 4.5%, transparent) 0%, transparent 30%); } :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Modal-content, :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Drawer-content, :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Menu-dropdown, :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #d8c9a4 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #d8c9a4 10%, transparent); } /* The lift, on things that are actually interactive. A card that does nothing should not rise to meet the pointer — that is a promise the card cannot keep — so this is scoped to panels that carry a link, a button or a tabindex. */ :root:root[data-theme-depth="full"][data-movie-theme="bond"] a:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="bond"] a:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="bond"] button:hover > .mantine-Card-root, :root:root[data-theme-depth="full"][data-movie-theme="bond"] button:hover > .mantine-Paper-root, :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Card-root:has(a:hover), :root:root[data-theme-depth="full"][data-movie-theme="bond"] .mantine-Card-root[tabindex]:hover { box-shadow: inset 0 1px 0 0 color-mix(in oklab, #d8c9a4 10%, transparent), 0 0 0 1px color-mix(in oklab, #d8c9a4 11%, transparent), 0 14px 34px color-mix(in oklab, #000 55%, transparent); } /* An ornamental separator, for anything that opts in with `data-theme-rule`. */ :root:root[data-theme-depth="full"][data-movie-theme="bond"] [data-theme-rule] { height: 1px; border: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, #d8c9a4 18%, transparent) 30%, color-mix(in oklab, #d8c9a4 18%, transparent) 70%, transparent); } /* * The settings previews. Same three surfaces, addressed by role rather than by * component class, and scoped *without* `:root` so the rules reach a nested * div — which is what lets a preview card show the real texture instead of a * flat swatch pretending to be one. */ [data-theme-depth="full"][data-movie-theme="bond"] [data-theme-preview="page"] { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); } [data-theme-depth="full"][data-movie-theme="bond"] [data-theme-preview="chrome"] { background-image: linear-gradient(180deg, color-mix(in oklab, #d8c9a4 4.5%, transparent) 0%, transparent 30%); } [data-theme-depth="full"][data-movie-theme="bond"] [data-theme-preview="surface"] { background-image: linear-gradient(180deg, color-mix(in oklab, #d8c9a4 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #d8c9a4 10%, transparent); } @media (prefers-reduced-motion: no-preference) { html[data-movie-theme] body, html[data-movie-theme] .mantine-Paper-root, html[data-movie-theme] .mantine-Card-root, html[data-movie-theme] .mantine-AppShell-navbar, html[data-movie-theme] .mantine-AppShell-header, html[data-movie-theme] .mantine-AppShell-main { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } } :root[data-context="dashboard"] { --ctx-accent: #6f9fd8; --ctx-accent-hover: #8fb4e1; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.8; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="dashboard"] { --ctx-accent: #4e6f97; --ctx-accent-hover: #59708c; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="dashboard"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="dashboard"] { --color-gray-50: #e4ecf7; --color-gray-100: #e4ecf7; --color-gray-200: #abb2bb; --color-gray-300: #abb2bb; --color-gray-400: #838992; --color-gray-500: #838992; --color-gray-600: rgba(111, 159, 216, 0.34); --color-gray-700: #141a2a; --color-gray-800: #0e1320; --color-gray-900: #080b12; --color-gray-950: #080b12; --color-blue-50: rgba(111, 159, 216, 0.13); --color-blue-100: rgba(111, 159, 216, 0.13); --color-blue-200: rgba(111, 159, 216, 0.13); --color-blue-300: #8fb4e1; --color-blue-400: #8fb4e1; --color-blue-500: #6f9fd8; --color-blue-600: #6f9fd8; --color-blue-700: #6f9fd8; --color-blue-800: #6f9fd8; --color-blue-900: #6f9fd8; --color-blue-950: #6f9fd8; --color-red-50: color-mix(in oklab, #c46c6b 12%, transparent); --color-red-100: color-mix(in oklab, #c46c6b 12%, transparent); --color-red-200: color-mix(in oklab, #c46c6b 22%, transparent); --color-red-300: #c46c6b; --color-red-400: #c46c6b; --color-red-500: #c46c6b; --color-red-600: #c46c6b; --color-red-700: #c46c6b; --color-red-800: #c46c6b; --color-red-900: #c46c6b; --color-red-950: #c46c6b; --color-rose-50: color-mix(in oklab, #c46c6b 12%, transparent); --color-rose-100: color-mix(in oklab, #c46c6b 12%, transparent); --color-rose-200: color-mix(in oklab, #c46c6b 22%, transparent); --color-rose-300: #c46c6b; --color-rose-400: #c46c6b; --color-rose-500: #c46c6b; --color-rose-600: #c46c6b; --color-rose-700: #c46c6b; --color-rose-800: #c46c6b; --color-rose-900: #c46c6b; --color-rose-950: #c46c6b; --color-green-50: color-mix(in oklab, #62ba9b 12%, transparent); --color-green-100: color-mix(in oklab, #62ba9b 12%, transparent); --color-green-200: color-mix(in oklab, #62ba9b 22%, transparent); --color-green-300: #62ba9b; --color-green-400: #62ba9b; --color-green-500: #62ba9b; --color-green-600: #62ba9b; --color-green-700: #62ba9b; --color-green-800: #62ba9b; --color-green-900: #62ba9b; --color-green-950: #62ba9b; --color-emerald-50: color-mix(in oklab, #62ba9b 12%, transparent); --color-emerald-100: color-mix(in oklab, #62ba9b 12%, transparent); --color-emerald-200: color-mix(in oklab, #62ba9b 22%, transparent); --color-emerald-300: #62ba9b; --color-emerald-400: #62ba9b; --color-emerald-500: #62ba9b; --color-emerald-600: #62ba9b; --color-emerald-700: #62ba9b; --color-emerald-800: #62ba9b; --color-emerald-900: #62ba9b; --color-emerald-950: #62ba9b; --color-yellow-50: color-mix(in oklab, #c8a359 12%, transparent); --color-yellow-100: color-mix(in oklab, #c8a359 12%, transparent); --color-yellow-200: color-mix(in oklab, #c8a359 22%, transparent); --color-yellow-300: #c8a359; --color-yellow-400: #c8a359; --color-yellow-500: #c8a359; --color-yellow-600: #c8a359; --color-yellow-700: #c8a359; --color-yellow-800: #c8a359; --color-yellow-900: #c8a359; --color-yellow-950: #c8a359; --color-amber-50: color-mix(in oklab, #c8a359 12%, transparent); --color-amber-100: color-mix(in oklab, #c8a359 12%, transparent); --color-amber-200: color-mix(in oklab, #c8a359 22%, transparent); --color-amber-300: #c8a359; --color-amber-400: #c8a359; --color-amber-500: #c8a359; --color-amber-600: #c8a359; --color-amber-700: #c8a359; --color-amber-800: #c8a359; --color-amber-900: #c8a359; --color-amber-950: #c8a359; --color-orange-50: color-mix(in oklab, #c8a359 12%, transparent); --color-orange-100: color-mix(in oklab, #c8a359 12%, transparent); --color-orange-200: color-mix(in oklab, #c8a359 22%, transparent); --color-orange-300: #c8a359; --color-orange-400: #c8a359; --color-orange-500: #c8a359; --color-orange-600: #c8a359; --color-orange-700: #c8a359; --color-orange-800: #c8a359; --color-orange-900: #c8a359; --color-orange-950: #c8a359; --lo-background: #080b12; --lo-surface: #0e1320; --lo-surface-elevated: #141a2a; --lo-text-primary: #e4ecf7; --lo-text-secondary: #abb2bb; --lo-text-muted: #838992; --lo-border: rgba(111, 159, 216, 0.18); --lo-border-strong: rgba(111, 159, 216, 0.34); --lo-accent: #6f9fd8; --lo-accent-hover: #8fb4e1; --lo-accent-subtle: rgba(111, 159, 216, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #62ba9b; --lo-warning: #c8a359; --lo-danger: #c46c6b; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #080b12; --mantine-color-text: #e4ecf7; --mantine-color-dimmed: #838992; --mantine-color-default: #0e1320; --mantine-color-default-hover: #141a2a; --mantine-color-default-color: #e4ecf7; --mantine-color-default-border: rgba(111, 159, 216, 0.18); --mantine-color-placeholder: #838992; --mantine-color-anchor: #6f9fd8; --mantine-color-error: #c46c6b; --mantine-primary-color-filled: #6f9fd8; --mantine-primary-color-filled-hover: #8fb4e1; --mantine-primary-color-light: rgba(111, 159, 216, 0.13); --mantine-primary-color-light-hover: rgba(111, 159, 216, 0.13); --mantine-primary-color-light-color: #6f9fd8; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e4ecf7; --mantine-color-dark-1: #abb2bb; --mantine-color-dark-2: #abb2bb; --mantine-color-dark-3: #838992; --mantine-color-dark-4: rgba(111, 159, 216, 0.18); --mantine-color-dark-5: #141a2a; --mantine-color-dark-6: #0e1320; --mantine-color-dark-7: #0e1320; --mantine-color-dark-8: #080b12; --mantine-color-dark-9: #080b12; --mantine-color-gray-0: #141a2a; --mantine-color-gray-1: #0e1320; --mantine-color-gray-2: rgba(111, 159, 216, 0.18); --mantine-color-gray-3: rgba(111, 159, 216, 0.18); --mantine-color-gray-4: #838992; --mantine-color-gray-5: #838992; --mantine-color-gray-6: #abb2bb; --mantine-color-gray-7: #abb2bb; --mantine-color-gray-8: #e4ecf7; --mantine-color-gray-9: #e4ecf7; --mantine-color-brand-light: rgba(111, 159, 216, 0.13); --mantine-color-brand-filled: #6f9fd8; --mantine-color-brand-filled-hover: #8fb4e1; --mantine-color-brand-4: #8fb4e1; --mantine-color-brand-5: #6f9fd8; --mantine-color-brand-6: #6f9fd8; --mantine-color-brand-7: #8fb4e1; --mantine-color-blue-0: rgba(111, 159, 216, 0.13); --mantine-color-blue-4: #8fb4e1; --mantine-color-blue-5: #6f9fd8; --mantine-color-blue-6: #6f9fd8; --mantine-color-blue-8: #8fb4e1; --mantine-color-blue-light: rgba(111, 159, 216, 0.13); --mantine-color-blue-filled: #6f9fd8; --mantine-color-green-5: #62ba9b; --mantine-color-green-6: #62ba9b; --mantine-color-green-filled: #62ba9b; --mantine-color-yellow-5: #c8a359; --mantine-color-yellow-6: #c8a359; --mantine-color-yellow-8: #c8a359; --mantine-color-yellow-filled: #c8a359; --mantine-color-red-5: #c46c6b; --mantine-color-red-6: #c46c6b; --mantine-color-red-filled: #c46c6b; --surface-card: #0e1320; --surface-muted: #141a2a; --border-subtle: rgba(111, 159, 216, 0.18); --color-body: #080b12; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="dashboard"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="dashboard"] .sd-navbar, :root[data-context-mode="full"][data-context="dashboard"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="dashboard"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="dashboard"] .mantine-Card-root, :root[data-context-mode="full"][data-context="dashboard"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="dashboard"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="dashboard"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="dashboard"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="tasks"] { --ctx-accent: #d8615c; --ctx-accent-hover: #e18480; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="tasks"] { --ctx-accent: #b1504b; --ctx-accent-hover: #9e5c5a; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="tasks"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="tasks"] { --color-gray-50: #f0eef0; --color-gray-100: #f0eef0; --color-gray-200: #b5b3b5; --color-gray-300: #b5b3b5; --color-gray-400: #8c8a8c; --color-gray-500: #8c8a8c; --color-gray-600: rgba(216, 97, 92, 0.34); --color-gray-700: #1c1b1e; --color-gray-800: #141315; --color-gray-900: #0c0b0c; --color-gray-950: #0c0b0c; --color-blue-50: rgba(216, 97, 92, 0.13); --color-blue-100: rgba(216, 97, 92, 0.13); --color-blue-200: rgba(216, 97, 92, 0.13); --color-blue-300: #e18480; --color-blue-400: #e18480; --color-blue-500: #d8615c; --color-blue-600: #d8615c; --color-blue-700: #d8615c; --color-blue-800: #d8615c; --color-blue-900: #d8615c; --color-blue-950: #d8615c; --color-red-50: color-mix(in oklab, #d1655c 12%, transparent); --color-red-100: color-mix(in oklab, #d1655c 12%, transparent); --color-red-200: color-mix(in oklab, #d1655c 22%, transparent); --color-red-300: #d1655c; --color-red-400: #d1655c; --color-red-500: #d1655c; --color-red-600: #d1655c; --color-red-700: #d1655c; --color-red-800: #d1655c; --color-red-900: #d1655c; --color-red-950: #d1655c; --color-rose-50: color-mix(in oklab, #d1655c 12%, transparent); --color-rose-100: color-mix(in oklab, #d1655c 12%, transparent); --color-rose-200: color-mix(in oklab, #d1655c 22%, transparent); --color-rose-300: #d1655c; --color-rose-400: #d1655c; --color-rose-500: #d1655c; --color-rose-600: #d1655c; --color-rose-700: #d1655c; --color-rose-800: #d1655c; --color-rose-900: #d1655c; --color-rose-950: #d1655c; --color-green-50: color-mix(in oklab, #72b087 12%, transparent); --color-green-100: color-mix(in oklab, #72b087 12%, transparent); --color-green-200: color-mix(in oklab, #72b087 22%, transparent); --color-green-300: #72b087; --color-green-400: #72b087; --color-green-500: #72b087; --color-green-600: #72b087; --color-green-700: #72b087; --color-green-800: #72b087; --color-green-900: #72b087; --color-green-950: #72b087; --color-emerald-50: color-mix(in oklab, #72b087 12%, transparent); --color-emerald-100: color-mix(in oklab, #72b087 12%, transparent); --color-emerald-200: color-mix(in oklab, #72b087 22%, transparent); --color-emerald-300: #72b087; --color-emerald-400: #72b087; --color-emerald-500: #72b087; --color-emerald-600: #72b087; --color-emerald-700: #72b087; --color-emerald-800: #72b087; --color-emerald-900: #72b087; --color-emerald-950: #72b087; --color-yellow-50: color-mix(in oklab, #d99945 12%, transparent); --color-yellow-100: color-mix(in oklab, #d99945 12%, transparent); --color-yellow-200: color-mix(in oklab, #d99945 22%, transparent); --color-yellow-300: #d99945; --color-yellow-400: #d99945; --color-yellow-500: #d99945; --color-yellow-600: #d99945; --color-yellow-700: #d99945; --color-yellow-800: #d99945; --color-yellow-900: #d99945; --color-yellow-950: #d99945; --color-amber-50: color-mix(in oklab, #d99945 12%, transparent); --color-amber-100: color-mix(in oklab, #d99945 12%, transparent); --color-amber-200: color-mix(in oklab, #d99945 22%, transparent); --color-amber-300: #d99945; --color-amber-400: #d99945; --color-amber-500: #d99945; --color-amber-600: #d99945; --color-amber-700: #d99945; --color-amber-800: #d99945; --color-amber-900: #d99945; --color-amber-950: #d99945; --color-orange-50: color-mix(in oklab, #d99945 12%, transparent); --color-orange-100: color-mix(in oklab, #d99945 12%, transparent); --color-orange-200: color-mix(in oklab, #d99945 22%, transparent); --color-orange-300: #d99945; --color-orange-400: #d99945; --color-orange-500: #d99945; --color-orange-600: #d99945; --color-orange-700: #d99945; --color-orange-800: #d99945; --color-orange-900: #d99945; --color-orange-950: #d99945; --lo-background: #0c0b0c; --lo-surface: #141315; --lo-surface-elevated: #1c1b1e; --lo-text-primary: #f0eef0; --lo-text-secondary: #b5b3b5; --lo-text-muted: #8c8a8c; --lo-border: rgba(216, 97, 92, 0.18); --lo-border-strong: rgba(216, 97, 92, 0.34); --lo-accent: #d8615c; --lo-accent-hover: #e18480; --lo-accent-subtle: rgba(216, 97, 92, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #72b087; --lo-warning: #d99945; --lo-danger: #d1655c; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0c0b0c; --mantine-color-text: #f0eef0; --mantine-color-dimmed: #8c8a8c; --mantine-color-default: #141315; --mantine-color-default-hover: #1c1b1e; --mantine-color-default-color: #f0eef0; --mantine-color-default-border: rgba(216, 97, 92, 0.18); --mantine-color-placeholder: #8c8a8c; --mantine-color-anchor: #d8615c; --mantine-color-error: #d1655c; --mantine-primary-color-filled: #d8615c; --mantine-primary-color-filled-hover: #e18480; --mantine-primary-color-light: rgba(216, 97, 92, 0.13); --mantine-primary-color-light-hover: rgba(216, 97, 92, 0.13); --mantine-primary-color-light-color: #d8615c; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f0eef0; --mantine-color-dark-1: #b5b3b5; --mantine-color-dark-2: #b5b3b5; --mantine-color-dark-3: #8c8a8c; --mantine-color-dark-4: rgba(216, 97, 92, 0.18); --mantine-color-dark-5: #1c1b1e; --mantine-color-dark-6: #141315; --mantine-color-dark-7: #141315; --mantine-color-dark-8: #0c0b0c; --mantine-color-dark-9: #0c0b0c; --mantine-color-gray-0: #1c1b1e; --mantine-color-gray-1: #141315; --mantine-color-gray-2: rgba(216, 97, 92, 0.18); --mantine-color-gray-3: rgba(216, 97, 92, 0.18); --mantine-color-gray-4: #8c8a8c; --mantine-color-gray-5: #8c8a8c; --mantine-color-gray-6: #b5b3b5; --mantine-color-gray-7: #b5b3b5; --mantine-color-gray-8: #f0eef0; --mantine-color-gray-9: #f0eef0; --mantine-color-brand-light: rgba(216, 97, 92, 0.13); --mantine-color-brand-filled: #d8615c; --mantine-color-brand-filled-hover: #e18480; --mantine-color-brand-4: #e18480; --mantine-color-brand-5: #d8615c; --mantine-color-brand-6: #d8615c; --mantine-color-brand-7: #e18480; --mantine-color-blue-0: rgba(216, 97, 92, 0.13); --mantine-color-blue-4: #e18480; --mantine-color-blue-5: #d8615c; --mantine-color-blue-6: #d8615c; --mantine-color-blue-8: #e18480; --mantine-color-blue-light: rgba(216, 97, 92, 0.13); --mantine-color-blue-filled: #d8615c; --mantine-color-green-5: #72b087; --mantine-color-green-6: #72b087; --mantine-color-green-filled: #72b087; --mantine-color-yellow-5: #d99945; --mantine-color-yellow-6: #d99945; --mantine-color-yellow-8: #d99945; --mantine-color-yellow-filled: #d99945; --mantine-color-red-5: #d1655c; --mantine-color-red-6: #d1655c; --mantine-color-red-filled: #d1655c; --surface-card: #141315; --surface-muted: #1c1b1e; --border-subtle: rgba(216, 97, 92, 0.18); --color-body: #0c0b0c; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="tasks"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="tasks"] .sd-navbar, :root[data-context-mode="full"][data-context="tasks"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="tasks"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="tasks"] .mantine-Card-root, :root[data-context-mode="full"][data-context="tasks"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="tasks"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="tasks"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="tasks"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="projects"] { --ctx-accent: #e0674f; --ctx-accent-hover: #e78876; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="projects"] { --ctx-accent: #b3523f; --ctx-accent-hover: #9d5c50; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="projects"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="projects"] { --color-gray-50: #f2ede9; --color-gray-100: #f2ede9; --color-gray-200: #b6b2af; --color-gray-300: #b6b2af; --color-gray-400: #8d8986; --color-gray-500: #8d8986; --color-gray-600: rgba(224, 103, 79, 0.34); --color-gray-700: #1f1917; --color-gray-800: #161110; --color-gray-900: #0d0a09; --color-gray-950: #0d0a09; --color-blue-50: rgba(224, 103, 79, 0.13); --color-blue-100: rgba(224, 103, 79, 0.13); --color-blue-200: rgba(224, 103, 79, 0.13); --color-blue-300: #e78876; --color-blue-400: #e78876; --color-blue-500: #e0674f; --color-blue-600: #e0674f; --color-blue-700: #e0674f; --color-blue-800: #e0674f; --color-blue-900: #e0674f; --color-blue-950: #e0674f; --color-red-50: color-mix(in oklab, #d2655a 12%, transparent); --color-red-100: color-mix(in oklab, #d2655a 12%, transparent); --color-red-200: color-mix(in oklab, #d2655a 22%, transparent); --color-red-300: #d2655a; --color-red-400: #d2655a; --color-red-500: #d2655a; --color-red-600: #d2655a; --color-red-700: #d2655a; --color-red-800: #d2655a; --color-red-900: #d2655a; --color-red-950: #d2655a; --color-rose-50: color-mix(in oklab, #d2655a 12%, transparent); --color-rose-100: color-mix(in oklab, #d2655a 12%, transparent); --color-rose-200: color-mix(in oklab, #d2655a 22%, transparent); --color-rose-300: #d2655a; --color-rose-400: #d2655a; --color-rose-500: #d2655a; --color-rose-600: #d2655a; --color-rose-700: #d2655a; --color-rose-800: #d2655a; --color-rose-900: #d2655a; --color-rose-950: #d2655a; --color-green-50: color-mix(in oklab, #74b185 12%, transparent); --color-green-100: color-mix(in oklab, #74b185 12%, transparent); --color-green-200: color-mix(in oklab, #74b185 22%, transparent); --color-green-300: #74b185; --color-green-400: #74b185; --color-green-500: #74b185; --color-green-600: #74b185; --color-green-700: #74b185; --color-green-800: #74b185; --color-green-900: #74b185; --color-green-950: #74b185; --color-emerald-50: color-mix(in oklab, #74b185 12%, transparent); --color-emerald-100: color-mix(in oklab, #74b185 12%, transparent); --color-emerald-200: color-mix(in oklab, #74b185 22%, transparent); --color-emerald-300: #74b185; --color-emerald-400: #74b185; --color-emerald-500: #74b185; --color-emerald-600: #74b185; --color-emerald-700: #74b185; --color-emerald-800: #74b185; --color-emerald-900: #74b185; --color-emerald-950: #74b185; --color-yellow-50: color-mix(in oklab, #da9a43 12%, transparent); --color-yellow-100: color-mix(in oklab, #da9a43 12%, transparent); --color-yellow-200: color-mix(in oklab, #da9a43 22%, transparent); --color-yellow-300: #da9a43; --color-yellow-400: #da9a43; --color-yellow-500: #da9a43; --color-yellow-600: #da9a43; --color-yellow-700: #da9a43; --color-yellow-800: #da9a43; --color-yellow-900: #da9a43; --color-yellow-950: #da9a43; --color-amber-50: color-mix(in oklab, #da9a43 12%, transparent); --color-amber-100: color-mix(in oklab, #da9a43 12%, transparent); --color-amber-200: color-mix(in oklab, #da9a43 22%, transparent); --color-amber-300: #da9a43; --color-amber-400: #da9a43; --color-amber-500: #da9a43; --color-amber-600: #da9a43; --color-amber-700: #da9a43; --color-amber-800: #da9a43; --color-amber-900: #da9a43; --color-amber-950: #da9a43; --color-orange-50: color-mix(in oklab, #da9a43 12%, transparent); --color-orange-100: color-mix(in oklab, #da9a43 12%, transparent); --color-orange-200: color-mix(in oklab, #da9a43 22%, transparent); --color-orange-300: #da9a43; --color-orange-400: #da9a43; --color-orange-500: #da9a43; --color-orange-600: #da9a43; --color-orange-700: #da9a43; --color-orange-800: #da9a43; --color-orange-900: #da9a43; --color-orange-950: #da9a43; --lo-background: #0d0a09; --lo-surface: #161110; --lo-surface-elevated: #1f1917; --lo-text-primary: #f2ede9; --lo-text-secondary: #b6b2af; --lo-text-muted: #8d8986; --lo-border: rgba(224, 103, 79, 0.18); --lo-border-strong: rgba(224, 103, 79, 0.34); --lo-accent: #e0674f; --lo-accent-hover: #e78876; --lo-accent-subtle: rgba(224, 103, 79, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #74b185; --lo-warning: #da9a43; --lo-danger: #d2655a; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0d0a09; --mantine-color-text: #f2ede9; --mantine-color-dimmed: #8d8986; --mantine-color-default: #161110; --mantine-color-default-hover: #1f1917; --mantine-color-default-color: #f2ede9; --mantine-color-default-border: rgba(224, 103, 79, 0.18); --mantine-color-placeholder: #8d8986; --mantine-color-anchor: #e0674f; --mantine-color-error: #d2655a; --mantine-primary-color-filled: #e0674f; --mantine-primary-color-filled-hover: #e78876; --mantine-primary-color-light: rgba(224, 103, 79, 0.13); --mantine-primary-color-light-hover: rgba(224, 103, 79, 0.13); --mantine-primary-color-light-color: #e0674f; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f2ede9; --mantine-color-dark-1: #b6b2af; --mantine-color-dark-2: #b6b2af; --mantine-color-dark-3: #8d8986; --mantine-color-dark-4: rgba(224, 103, 79, 0.18); --mantine-color-dark-5: #1f1917; --mantine-color-dark-6: #161110; --mantine-color-dark-7: #161110; --mantine-color-dark-8: #0d0a09; --mantine-color-dark-9: #0d0a09; --mantine-color-gray-0: #1f1917; --mantine-color-gray-1: #161110; --mantine-color-gray-2: rgba(224, 103, 79, 0.18); --mantine-color-gray-3: rgba(224, 103, 79, 0.18); --mantine-color-gray-4: #8d8986; --mantine-color-gray-5: #8d8986; --mantine-color-gray-6: #b6b2af; --mantine-color-gray-7: #b6b2af; --mantine-color-gray-8: #f2ede9; --mantine-color-gray-9: #f2ede9; --mantine-color-brand-light: rgba(224, 103, 79, 0.13); --mantine-color-brand-filled: #e0674f; --mantine-color-brand-filled-hover: #e78876; --mantine-color-brand-4: #e78876; --mantine-color-brand-5: #e0674f; --mantine-color-brand-6: #e0674f; --mantine-color-brand-7: #e78876; --mantine-color-blue-0: rgba(224, 103, 79, 0.13); --mantine-color-blue-4: #e78876; --mantine-color-blue-5: #e0674f; --mantine-color-blue-6: #e0674f; --mantine-color-blue-8: #e78876; --mantine-color-blue-light: rgba(224, 103, 79, 0.13); --mantine-color-blue-filled: #e0674f; --mantine-color-green-5: #74b185; --mantine-color-green-6: #74b185; --mantine-color-green-filled: #74b185; --mantine-color-yellow-5: #da9a43; --mantine-color-yellow-6: #da9a43; --mantine-color-yellow-8: #da9a43; --mantine-color-yellow-filled: #da9a43; --mantine-color-red-5: #d2655a; --mantine-color-red-6: #d2655a; --mantine-color-red-filled: #d2655a; --surface-card: #161110; --surface-muted: #1f1917; --border-subtle: rgba(224, 103, 79, 0.18); --color-body: #0d0a09; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="projects"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="projects"] .sd-navbar, :root[data-context-mode="full"][data-context="projects"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="projects"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="projects"] .mantine-Card-root, :root[data-context-mode="full"][data-context="projects"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="projects"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="projects"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="projects"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="goals"] { --ctx-accent: #7fa9d6; --ctx-accent-hover: #9bbcdf; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="goals"] { --ctx-accent: #54708d; --ctx-accent-hover: #5d7186; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="goals"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="goals"] { --color-gray-50: #e6ecf6; --color-gray-100: #e6ecf6; --color-gray-200: #acb1ba; --color-gray-300: #acb1ba; --color-gray-400: #848991; --color-gray-500: #848991; --color-gray-600: rgba(127, 169, 214, 0.34); --color-gray-700: #161c2b; --color-gray-800: #0f1320; --color-gray-900: #080a11; --color-gray-950: #080a11; --color-blue-50: rgba(127, 169, 214, 0.13); --color-blue-100: rgba(127, 169, 214, 0.13); --color-blue-200: rgba(127, 169, 214, 0.13); --color-blue-300: #9bbcdf; --color-blue-400: #9bbcdf; --color-blue-500: #7fa9d6; --color-blue-600: #7fa9d6; --color-blue-700: #7fa9d6; --color-blue-800: #7fa9d6; --color-blue-900: #7fa9d6; --color-blue-950: #7fa9d6; --color-red-50: color-mix(in oklab, #c66d6b 12%, transparent); --color-red-100: color-mix(in oklab, #c66d6b 12%, transparent); --color-red-200: color-mix(in oklab, #c66d6b 22%, transparent); --color-red-300: #c66d6b; --color-red-400: #c66d6b; --color-red-500: #c66d6b; --color-red-600: #c66d6b; --color-red-700: #c66d6b; --color-red-800: #c66d6b; --color-red-900: #c66d6b; --color-red-950: #c66d6b; --color-rose-50: color-mix(in oklab, #c66d6b 12%, transparent); --color-rose-100: color-mix(in oklab, #c66d6b 12%, transparent); --color-rose-200: color-mix(in oklab, #c66d6b 22%, transparent); --color-rose-300: #c66d6b; --color-rose-400: #c66d6b; --color-rose-500: #c66d6b; --color-rose-600: #c66d6b; --color-rose-700: #c66d6b; --color-rose-800: #c66d6b; --color-rose-900: #c66d6b; --color-rose-950: #c66d6b; --color-green-50: color-mix(in oklab, #64bb9a 12%, transparent); --color-green-100: color-mix(in oklab, #64bb9a 12%, transparent); --color-green-200: color-mix(in oklab, #64bb9a 22%, transparent); --color-green-300: #64bb9a; --color-green-400: #64bb9a; --color-green-500: #64bb9a; --color-green-600: #64bb9a; --color-green-700: #64bb9a; --color-green-800: #64bb9a; --color-green-900: #64bb9a; --color-green-950: #64bb9a; --color-emerald-50: color-mix(in oklab, #64bb9a 12%, transparent); --color-emerald-100: color-mix(in oklab, #64bb9a 12%, transparent); --color-emerald-200: color-mix(in oklab, #64bb9a 22%, transparent); --color-emerald-300: #64bb9a; --color-emerald-400: #64bb9a; --color-emerald-500: #64bb9a; --color-emerald-600: #64bb9a; --color-emerald-700: #64bb9a; --color-emerald-800: #64bb9a; --color-emerald-900: #64bb9a; --color-emerald-950: #64bb9a; --color-yellow-50: color-mix(in oklab, #cba559 12%, transparent); --color-yellow-100: color-mix(in oklab, #cba559 12%, transparent); --color-yellow-200: color-mix(in oklab, #cba559 22%, transparent); --color-yellow-300: #cba559; --color-yellow-400: #cba559; --color-yellow-500: #cba559; --color-yellow-600: #cba559; --color-yellow-700: #cba559; --color-yellow-800: #cba559; --color-yellow-900: #cba559; --color-yellow-950: #cba559; --color-amber-50: color-mix(in oklab, #cba559 12%, transparent); --color-amber-100: color-mix(in oklab, #cba559 12%, transparent); --color-amber-200: color-mix(in oklab, #cba559 22%, transparent); --color-amber-300: #cba559; --color-amber-400: #cba559; --color-amber-500: #cba559; --color-amber-600: #cba559; --color-amber-700: #cba559; --color-amber-800: #cba559; --color-amber-900: #cba559; --color-amber-950: #cba559; --color-orange-50: color-mix(in oklab, #cba559 12%, transparent); --color-orange-100: color-mix(in oklab, #cba559 12%, transparent); --color-orange-200: color-mix(in oklab, #cba559 22%, transparent); --color-orange-300: #cba559; --color-orange-400: #cba559; --color-orange-500: #cba559; --color-orange-600: #cba559; --color-orange-700: #cba559; --color-orange-800: #cba559; --color-orange-900: #cba559; --color-orange-950: #cba559; --lo-background: #080a11; --lo-surface: #0f1320; --lo-surface-elevated: #161c2b; --lo-text-primary: #e6ecf6; --lo-text-secondary: #acb1ba; --lo-text-muted: #848991; --lo-border: rgba(127, 169, 214, 0.18); --lo-border-strong: rgba(127, 169, 214, 0.34); --lo-accent: #7fa9d6; --lo-accent-hover: #9bbcdf; --lo-accent-subtle: rgba(127, 169, 214, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #64bb9a; --lo-warning: #cba559; --lo-danger: #c66d6b; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #080a11; --mantine-color-text: #e6ecf6; --mantine-color-dimmed: #848991; --mantine-color-default: #0f1320; --mantine-color-default-hover: #161c2b; --mantine-color-default-color: #e6ecf6; --mantine-color-default-border: rgba(127, 169, 214, 0.18); --mantine-color-placeholder: #848991; --mantine-color-anchor: #7fa9d6; --mantine-color-error: #c66d6b; --mantine-primary-color-filled: #7fa9d6; --mantine-primary-color-filled-hover: #9bbcdf; --mantine-primary-color-light: rgba(127, 169, 214, 0.13); --mantine-primary-color-light-hover: rgba(127, 169, 214, 0.13); --mantine-primary-color-light-color: #7fa9d6; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e6ecf6; --mantine-color-dark-1: #acb1ba; --mantine-color-dark-2: #acb1ba; --mantine-color-dark-3: #848991; --mantine-color-dark-4: rgba(127, 169, 214, 0.18); --mantine-color-dark-5: #161c2b; --mantine-color-dark-6: #0f1320; --mantine-color-dark-7: #0f1320; --mantine-color-dark-8: #080a11; --mantine-color-dark-9: #080a11; --mantine-color-gray-0: #161c2b; --mantine-color-gray-1: #0f1320; --mantine-color-gray-2: rgba(127, 169, 214, 0.18); --mantine-color-gray-3: rgba(127, 169, 214, 0.18); --mantine-color-gray-4: #848991; --mantine-color-gray-5: #848991; --mantine-color-gray-6: #acb1ba; --mantine-color-gray-7: #acb1ba; --mantine-color-gray-8: #e6ecf6; --mantine-color-gray-9: #e6ecf6; --mantine-color-brand-light: rgba(127, 169, 214, 0.13); --mantine-color-brand-filled: #7fa9d6; --mantine-color-brand-filled-hover: #9bbcdf; --mantine-color-brand-4: #9bbcdf; --mantine-color-brand-5: #7fa9d6; --mantine-color-brand-6: #7fa9d6; --mantine-color-brand-7: #9bbcdf; --mantine-color-blue-0: rgba(127, 169, 214, 0.13); --mantine-color-blue-4: #9bbcdf; --mantine-color-blue-5: #7fa9d6; --mantine-color-blue-6: #7fa9d6; --mantine-color-blue-8: #9bbcdf; --mantine-color-blue-light: rgba(127, 169, 214, 0.13); --mantine-color-blue-filled: #7fa9d6; --mantine-color-green-5: #64bb9a; --mantine-color-green-6: #64bb9a; --mantine-color-green-filled: #64bb9a; --mantine-color-yellow-5: #cba559; --mantine-color-yellow-6: #cba559; --mantine-color-yellow-8: #cba559; --mantine-color-yellow-filled: #cba559; --mantine-color-red-5: #c66d6b; --mantine-color-red-6: #c66d6b; --mantine-color-red-filled: #c66d6b; --surface-card: #0f1320; --surface-muted: #161c2b; --border-subtle: rgba(127, 169, 214, 0.18); --color-body: #080a11; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="goals"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="goals"] .sd-navbar, :root[data-context-mode="full"][data-context="goals"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="goals"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="goals"] .mantine-Card-root, :root[data-context-mode="full"][data-context="goals"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="goals"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="goals"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="goals"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="strategy"] { --ctx-accent: #8fa4ba; --ctx-accent-hover: #a8b8c9; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.85; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="strategy"] { --ctx-accent: #61707e; --ctx-accent-hover: #656e79; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="strategy"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="strategy"] { --color-gray-50: #eef0f3; --color-gray-100: #eef0f3; --color-gray-200: #b3b4b7; --color-gray-300: #b3b4b7; --color-gray-400: #8a8b8e; --color-gray-500: #8a8b8e; --color-gray-600: rgba(143, 164, 186, 0.34); --color-gray-700: #1a1d21; --color-gray-800: #121417; --color-gray-900: #0a0b0d; --color-gray-950: #0a0b0d; --color-blue-50: rgba(143, 164, 186, 0.13); --color-blue-100: rgba(143, 164, 186, 0.13); --color-blue-200: rgba(143, 164, 186, 0.13); --color-blue-300: #a8b8c9; --color-blue-400: #a8b8c9; --color-blue-500: #8fa4ba; --color-blue-600: #8fa4ba; --color-blue-700: #8fa4ba; --color-blue-800: #8fa4ba; --color-blue-900: #8fa4ba; --color-blue-950: #8fa4ba; --color-red-50: color-mix(in oklab, #c86d67 12%, transparent); --color-red-100: color-mix(in oklab, #c86d67 12%, transparent); --color-red-200: color-mix(in oklab, #c86d67 22%, transparent); --color-red-300: #c86d67; --color-red-400: #c86d67; --color-red-500: #c86d67; --color-red-600: #c86d67; --color-red-700: #c86d67; --color-red-800: #c86d67; --color-red-900: #c86d67; --color-red-950: #c86d67; --color-rose-50: color-mix(in oklab, #c86d67 12%, transparent); --color-rose-100: color-mix(in oklab, #c86d67 12%, transparent); --color-rose-200: color-mix(in oklab, #c86d67 22%, transparent); --color-rose-300: #c86d67; --color-rose-400: #c86d67; --color-rose-500: #c86d67; --color-rose-600: #c86d67; --color-rose-700: #c86d67; --color-rose-800: #c86d67; --color-rose-900: #c86d67; --color-rose-950: #c86d67; --color-green-50: color-mix(in oklab, #67bb96 12%, transparent); --color-green-100: color-mix(in oklab, #67bb96 12%, transparent); --color-green-200: color-mix(in oklab, #67bb96 22%, transparent); --color-green-300: #67bb96; --color-green-400: #67bb96; --color-green-500: #67bb96; --color-green-600: #67bb96; --color-green-700: #67bb96; --color-green-800: #67bb96; --color-green-900: #67bb96; --color-green-950: #67bb96; --color-emerald-50: color-mix(in oklab, #67bb96 12%, transparent); --color-emerald-100: color-mix(in oklab, #67bb96 12%, transparent); --color-emerald-200: color-mix(in oklab, #67bb96 22%, transparent); --color-emerald-300: #67bb96; --color-emerald-400: #67bb96; --color-emerald-500: #67bb96; --color-emerald-600: #67bb96; --color-emerald-700: #67bb96; --color-emerald-800: #67bb96; --color-emerald-900: #67bb96; --color-emerald-950: #67bb96; --color-yellow-50: color-mix(in oklab, #cda454 12%, transparent); --color-yellow-100: color-mix(in oklab, #cda454 12%, transparent); --color-yellow-200: color-mix(in oklab, #cda454 22%, transparent); --color-yellow-300: #cda454; --color-yellow-400: #cda454; --color-yellow-500: #cda454; --color-yellow-600: #cda454; --color-yellow-700: #cda454; --color-yellow-800: #cda454; --color-yellow-900: #cda454; --color-yellow-950: #cda454; --color-amber-50: color-mix(in oklab, #cda454 12%, transparent); --color-amber-100: color-mix(in oklab, #cda454 12%, transparent); --color-amber-200: color-mix(in oklab, #cda454 22%, transparent); --color-amber-300: #cda454; --color-amber-400: #cda454; --color-amber-500: #cda454; --color-amber-600: #cda454; --color-amber-700: #cda454; --color-amber-800: #cda454; --color-amber-900: #cda454; --color-amber-950: #cda454; --color-orange-50: color-mix(in oklab, #cda454 12%, transparent); --color-orange-100: color-mix(in oklab, #cda454 12%, transparent); --color-orange-200: color-mix(in oklab, #cda454 22%, transparent); --color-orange-300: #cda454; --color-orange-400: #cda454; --color-orange-500: #cda454; --color-orange-600: #cda454; --color-orange-700: #cda454; --color-orange-800: #cda454; --color-orange-900: #cda454; --color-orange-950: #cda454; --lo-background: #0a0b0d; --lo-surface: #121417; --lo-surface-elevated: #1a1d21; --lo-text-primary: #eef0f3; --lo-text-secondary: #b3b4b7; --lo-text-muted: #8a8b8e; --lo-border: rgba(143, 164, 186, 0.18); --lo-border-strong: rgba(143, 164, 186, 0.34); --lo-accent: #8fa4ba; --lo-accent-hover: #a8b8c9; --lo-accent-subtle: rgba(143, 164, 186, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #67bb96; --lo-warning: #cda454; --lo-danger: #c86d67; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0a0b0d; --mantine-color-text: #eef0f3; --mantine-color-dimmed: #8a8b8e; --mantine-color-default: #121417; --mantine-color-default-hover: #1a1d21; --mantine-color-default-color: #eef0f3; --mantine-color-default-border: rgba(143, 164, 186, 0.18); --mantine-color-placeholder: #8a8b8e; --mantine-color-anchor: #8fa4ba; --mantine-color-error: #c86d67; --mantine-primary-color-filled: #8fa4ba; --mantine-primary-color-filled-hover: #a8b8c9; --mantine-primary-color-light: rgba(143, 164, 186, 0.13); --mantine-primary-color-light-hover: rgba(143, 164, 186, 0.13); --mantine-primary-color-light-color: #8fa4ba; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #eef0f3; --mantine-color-dark-1: #b3b4b7; --mantine-color-dark-2: #b3b4b7; --mantine-color-dark-3: #8a8b8e; --mantine-color-dark-4: rgba(143, 164, 186, 0.18); --mantine-color-dark-5: #1a1d21; --mantine-color-dark-6: #121417; --mantine-color-dark-7: #121417; --mantine-color-dark-8: #0a0b0d; --mantine-color-dark-9: #0a0b0d; --mantine-color-gray-0: #1a1d21; --mantine-color-gray-1: #121417; --mantine-color-gray-2: rgba(143, 164, 186, 0.18); --mantine-color-gray-3: rgba(143, 164, 186, 0.18); --mantine-color-gray-4: #8a8b8e; --mantine-color-gray-5: #8a8b8e; --mantine-color-gray-6: #b3b4b7; --mantine-color-gray-7: #b3b4b7; --mantine-color-gray-8: #eef0f3; --mantine-color-gray-9: #eef0f3; --mantine-color-brand-light: rgba(143, 164, 186, 0.13); --mantine-color-brand-filled: #8fa4ba; --mantine-color-brand-filled-hover: #a8b8c9; --mantine-color-brand-4: #a8b8c9; --mantine-color-brand-5: #8fa4ba; --mantine-color-brand-6: #8fa4ba; --mantine-color-brand-7: #a8b8c9; --mantine-color-blue-0: rgba(143, 164, 186, 0.13); --mantine-color-blue-4: #a8b8c9; --mantine-color-blue-5: #8fa4ba; --mantine-color-blue-6: #8fa4ba; --mantine-color-blue-8: #a8b8c9; --mantine-color-blue-light: rgba(143, 164, 186, 0.13); --mantine-color-blue-filled: #8fa4ba; --mantine-color-green-5: #67bb96; --mantine-color-green-6: #67bb96; --mantine-color-green-filled: #67bb96; --mantine-color-yellow-5: #cda454; --mantine-color-yellow-6: #cda454; --mantine-color-yellow-8: #cda454; --mantine-color-yellow-filled: #cda454; --mantine-color-red-5: #c86d67; --mantine-color-red-6: #c86d67; --mantine-color-red-filled: #c86d67; --surface-card: #121417; --surface-muted: #1a1d21; --border-subtle: rgba(143, 164, 186, 0.18); --color-body: #0a0b0d; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="strategy"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="strategy"] .sd-navbar, :root[data-context-mode="full"][data-context="strategy"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="strategy"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="strategy"] .mantine-Card-root, :root[data-context-mode="full"][data-context="strategy"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="strategy"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="strategy"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="strategy"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="journal"] { --ctx-accent: #b3708b; --ctx-accent-hover: #c18ba1; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="journal"] { --ctx-accent: #9b5d76; --ctx-accent-hover: #8b6474; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="journal"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="journal"] { --color-gray-50: #ece4f0; --color-gray-100: #ece4f0; --color-gray-200: #b2abb6; --color-gray-300: #b2abb6; --color-gray-400: #89848d; --color-gray-500: #89848d; --color-gray-600: rgba(176, 106, 134, 0.34); --color-gray-700: #1c1622; --color-gray-800: #140f19; --color-gray-900: #0c0910; --color-gray-950: #0c0910; --color-blue-50: rgba(176, 106, 134, 0.13); --color-blue-100: rgba(176, 106, 134, 0.13); --color-blue-200: rgba(176, 106, 134, 0.13); --color-blue-300: #c18ba1; --color-blue-400: #c18ba1; --color-blue-500: #b06a86; --color-blue-600: #b06a86; --color-blue-700: #b06a86; --color-blue-800: #b06a86; --color-blue-900: #b06a86; --color-blue-950: #b06a86; --color-red-50: color-mix(in oklab, #cc6661 12%, transparent); --color-red-100: color-mix(in oklab, #cc6661 12%, transparent); --color-red-200: color-mix(in oklab, #cc6661 22%, transparent); --color-red-300: #cc6661; --color-red-400: #cc6661; --color-red-500: #cc6661; --color-red-600: #cc6661; --color-red-700: #cc6661; --color-red-800: #cc6661; --color-red-900: #cc6661; --color-red-950: #cc6661; --color-rose-50: color-mix(in oklab, #cc6661 12%, transparent); --color-rose-100: color-mix(in oklab, #cc6661 12%, transparent); --color-rose-200: color-mix(in oklab, #cc6661 22%, transparent); --color-rose-300: #cc6661; --color-rose-400: #cc6661; --color-rose-500: #cc6661; --color-rose-600: #cc6661; --color-rose-700: #cc6661; --color-rose-800: #cc6661; --color-rose-900: #cc6661; --color-rose-950: #cc6661; --color-green-50: color-mix(in oklab, #6cb18e 12%, transparent); --color-green-100: color-mix(in oklab, #6cb18e 12%, transparent); --color-green-200: color-mix(in oklab, #6cb18e 22%, transparent); --color-green-300: #6cb18e; --color-green-400: #6cb18e; --color-green-500: #6cb18e; --color-green-600: #6cb18e; --color-green-700: #6cb18e; --color-green-800: #6cb18e; --color-green-900: #6cb18e; --color-green-950: #6cb18e; --color-emerald-50: color-mix(in oklab, #6cb18e 12%, transparent); --color-emerald-100: color-mix(in oklab, #6cb18e 12%, transparent); --color-emerald-200: color-mix(in oklab, #6cb18e 22%, transparent); --color-emerald-300: #6cb18e; --color-emerald-400: #6cb18e; --color-emerald-500: #6cb18e; --color-emerald-600: #6cb18e; --color-emerald-700: #6cb18e; --color-emerald-800: #6cb18e; --color-emerald-900: #6cb18e; --color-emerald-950: #6cb18e; --color-yellow-50: color-mix(in oklab, #d29b4c 12%, transparent); --color-yellow-100: color-mix(in oklab, #d29b4c 12%, transparent); --color-yellow-200: color-mix(in oklab, #d29b4c 22%, transparent); --color-yellow-300: #d29b4c; --color-yellow-400: #d29b4c; --color-yellow-500: #d29b4c; --color-yellow-600: #d29b4c; --color-yellow-700: #d29b4c; --color-yellow-800: #d29b4c; --color-yellow-900: #d29b4c; --color-yellow-950: #d29b4c; --color-amber-50: color-mix(in oklab, #d29b4c 12%, transparent); --color-amber-100: color-mix(in oklab, #d29b4c 12%, transparent); --color-amber-200: color-mix(in oklab, #d29b4c 22%, transparent); --color-amber-300: #d29b4c; --color-amber-400: #d29b4c; --color-amber-500: #d29b4c; --color-amber-600: #d29b4c; --color-amber-700: #d29b4c; --color-amber-800: #d29b4c; --color-amber-900: #d29b4c; --color-amber-950: #d29b4c; --color-orange-50: color-mix(in oklab, #d29b4c 12%, transparent); --color-orange-100: color-mix(in oklab, #d29b4c 12%, transparent); --color-orange-200: color-mix(in oklab, #d29b4c 22%, transparent); --color-orange-300: #d29b4c; --color-orange-400: #d29b4c; --color-orange-500: #d29b4c; --color-orange-600: #d29b4c; --color-orange-700: #d29b4c; --color-orange-800: #d29b4c; --color-orange-900: #d29b4c; --color-orange-950: #d29b4c; --lo-background: #0c0910; --lo-surface: #140f19; --lo-surface-elevated: #1c1622; --lo-text-primary: #ece4f0; --lo-text-secondary: #b2abb6; --lo-text-muted: #89848d; --lo-border: rgba(176, 106, 134, 0.18); --lo-border-strong: rgba(176, 106, 134, 0.34); --lo-accent: #b06a86; --lo-accent-hover: #c18ba1; --lo-accent-subtle: rgba(176, 106, 134, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6cb18e; --lo-warning: #d29b4c; --lo-danger: #cc6661; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0c0910; --mantine-color-text: #ece4f0; --mantine-color-dimmed: #89848d; --mantine-color-default: #140f19; --mantine-color-default-hover: #1c1622; --mantine-color-default-color: #ece4f0; --mantine-color-default-border: rgba(176, 106, 134, 0.18); --mantine-color-placeholder: #89848d; --mantine-color-anchor: #b06a86; --mantine-color-error: #cc6661; --mantine-primary-color-filled: #b06a86; --mantine-primary-color-filled-hover: #c18ba1; --mantine-primary-color-light: rgba(176, 106, 134, 0.13); --mantine-primary-color-light-hover: rgba(176, 106, 134, 0.13); --mantine-primary-color-light-color: #b06a86; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #ece4f0; --mantine-color-dark-1: #b2abb6; --mantine-color-dark-2: #b2abb6; --mantine-color-dark-3: #89848d; --mantine-color-dark-4: rgba(176, 106, 134, 0.18); --mantine-color-dark-5: #1c1622; --mantine-color-dark-6: #140f19; --mantine-color-dark-7: #140f19; --mantine-color-dark-8: #0c0910; --mantine-color-dark-9: #0c0910; --mantine-color-gray-0: #1c1622; --mantine-color-gray-1: #140f19; --mantine-color-gray-2: rgba(176, 106, 134, 0.18); --mantine-color-gray-3: rgba(176, 106, 134, 0.18); --mantine-color-gray-4: #89848d; --mantine-color-gray-5: #89848d; --mantine-color-gray-6: #b2abb6; --mantine-color-gray-7: #b2abb6; --mantine-color-gray-8: #ece4f0; --mantine-color-gray-9: #ece4f0; --mantine-color-brand-light: rgba(176, 106, 134, 0.13); --mantine-color-brand-filled: #b06a86; --mantine-color-brand-filled-hover: #c18ba1; --mantine-color-brand-4: #c18ba1; --mantine-color-brand-5: #b06a86; --mantine-color-brand-6: #b06a86; --mantine-color-brand-7: #c18ba1; --mantine-color-blue-0: rgba(176, 106, 134, 0.13); --mantine-color-blue-4: #c18ba1; --mantine-color-blue-5: #b06a86; --mantine-color-blue-6: #b06a86; --mantine-color-blue-8: #c18ba1; --mantine-color-blue-light: rgba(176, 106, 134, 0.13); --mantine-color-blue-filled: #b06a86; --mantine-color-green-5: #6cb18e; --mantine-color-green-6: #6cb18e; --mantine-color-green-filled: #6cb18e; --mantine-color-yellow-5: #d29b4c; --mantine-color-yellow-6: #d29b4c; --mantine-color-yellow-8: #d29b4c; --mantine-color-yellow-filled: #d29b4c; --mantine-color-red-5: #cc6661; --mantine-color-red-6: #cc6661; --mantine-color-red-filled: #cc6661; --surface-card: #140f19; --surface-muted: #1c1622; --border-subtle: rgba(176, 106, 134, 0.18); --color-body: #0c0910; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="journal"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="journal"] .sd-navbar, :root[data-context-mode="full"][data-context="journal"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="journal"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="journal"] .mantine-Card-root, :root[data-context-mode="full"][data-context="journal"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="journal"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="journal"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="journal"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="quick-note"] { --ctx-accent: #ca676e; --ctx-accent-hover: #d38085; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="quick-note"] { --ctx-accent: #bc4950; --ctx-accent-hover: #985c60; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="quick-note"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="quick-note"] { --color-gray-50: #f2f1f0; --color-gray-100: #f2f1f0; --color-gray-200: #b5b4b4; --color-gray-300: #b5b4b4; --color-gray-400: #8b8a8b; --color-gray-500: #8b8a8b; --color-gray-600: rgba(198, 92, 99, 0.34); --color-gray-700: #181819; --color-gray-800: #101012; --color-gray-900: #08080a; --color-gray-950: #08080a; --color-blue-50: rgba(198, 92, 99, 0.13); --color-blue-100: rgba(198, 92, 99, 0.13); --color-blue-200: rgba(198, 92, 99, 0.13); --color-blue-300: #d38085; --color-blue-400: #d38085; --color-blue-500: #c65c63; --color-blue-600: #c65c63; --color-blue-700: #c65c63; --color-blue-800: #c65c63; --color-blue-900: #c65c63; --color-blue-950: #c65c63; --color-red-50: color-mix(in oklab, #cf645d 12%, transparent); --color-red-100: color-mix(in oklab, #cf645d 12%, transparent); --color-red-200: color-mix(in oklab, #cf645d 22%, transparent); --color-red-300: #cf645d; --color-red-400: #cf645d; --color-red-500: #cf645d; --color-red-600: #cf645d; --color-red-700: #cf645d; --color-red-800: #cf645d; --color-red-900: #cf645d; --color-red-950: #cf645d; --color-rose-50: color-mix(in oklab, #cf645d 12%, transparent); --color-rose-100: color-mix(in oklab, #cf645d 12%, transparent); --color-rose-200: color-mix(in oklab, #cf645d 22%, transparent); --color-rose-300: #cf645d; --color-rose-400: #cf645d; --color-rose-500: #cf645d; --color-rose-600: #cf645d; --color-rose-700: #cf645d; --color-rose-800: #cf645d; --color-rose-900: #cf645d; --color-rose-950: #cf645d; --color-green-50: color-mix(in oklab, #6faf88 12%, transparent); --color-green-100: color-mix(in oklab, #6faf88 12%, transparent); --color-green-200: color-mix(in oklab, #6faf88 22%, transparent); --color-green-300: #6faf88; --color-green-400: #6faf88; --color-green-500: #6faf88; --color-green-600: #6faf88; --color-green-700: #6faf88; --color-green-800: #6faf88; --color-green-900: #6faf88; --color-green-950: #6faf88; --color-emerald-50: color-mix(in oklab, #6faf88 12%, transparent); --color-emerald-100: color-mix(in oklab, #6faf88 12%, transparent); --color-emerald-200: color-mix(in oklab, #6faf88 22%, transparent); --color-emerald-300: #6faf88; --color-emerald-400: #6faf88; --color-emerald-500: #6faf88; --color-emerald-600: #6faf88; --color-emerald-700: #6faf88; --color-emerald-800: #6faf88; --color-emerald-900: #6faf88; --color-emerald-950: #6faf88; --color-yellow-50: color-mix(in oklab, #d69846 12%, transparent); --color-yellow-100: color-mix(in oklab, #d69846 12%, transparent); --color-yellow-200: color-mix(in oklab, #d69846 22%, transparent); --color-yellow-300: #d69846; --color-yellow-400: #d69846; --color-yellow-500: #d69846; --color-yellow-600: #d69846; --color-yellow-700: #d69846; --color-yellow-800: #d69846; --color-yellow-900: #d69846; --color-yellow-950: #d69846; --color-amber-50: color-mix(in oklab, #d69846 12%, transparent); --color-amber-100: color-mix(in oklab, #d69846 12%, transparent); --color-amber-200: color-mix(in oklab, #d69846 22%, transparent); --color-amber-300: #d69846; --color-amber-400: #d69846; --color-amber-500: #d69846; --color-amber-600: #d69846; --color-amber-700: #d69846; --color-amber-800: #d69846; --color-amber-900: #d69846; --color-amber-950: #d69846; --color-orange-50: color-mix(in oklab, #d69846 12%, transparent); --color-orange-100: color-mix(in oklab, #d69846 12%, transparent); --color-orange-200: color-mix(in oklab, #d69846 22%, transparent); --color-orange-300: #d69846; --color-orange-400: #d69846; --color-orange-500: #d69846; --color-orange-600: #d69846; --color-orange-700: #d69846; --color-orange-800: #d69846; --color-orange-900: #d69846; --color-orange-950: #d69846; --lo-background: #08080a; --lo-surface: #101012; --lo-surface-elevated: #181819; --lo-text-primary: #f2f1f0; --lo-text-secondary: #b5b4b4; --lo-text-muted: #8b8a8b; --lo-border: rgba(198, 92, 99, 0.18); --lo-border-strong: rgba(198, 92, 99, 0.34); --lo-accent: #c65c63; --lo-accent-hover: #d38085; --lo-accent-subtle: rgba(198, 92, 99, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6faf88; --lo-warning: #d69846; --lo-danger: #cf645d; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #08080a; --mantine-color-text: #f2f1f0; --mantine-color-dimmed: #8b8a8b; --mantine-color-default: #101012; --mantine-color-default-hover: #181819; --mantine-color-default-color: #f2f1f0; --mantine-color-default-border: rgba(198, 92, 99, 0.18); --mantine-color-placeholder: #8b8a8b; --mantine-color-anchor: #c65c63; --mantine-color-error: #cf645d; --mantine-primary-color-filled: #c65c63; --mantine-primary-color-filled-hover: #d38085; --mantine-primary-color-light: rgba(198, 92, 99, 0.13); --mantine-primary-color-light-hover: rgba(198, 92, 99, 0.13); --mantine-primary-color-light-color: #c65c63; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f2f1f0; --mantine-color-dark-1: #b5b4b4; --mantine-color-dark-2: #b5b4b4; --mantine-color-dark-3: #8b8a8b; --mantine-color-dark-4: rgba(198, 92, 99, 0.18); --mantine-color-dark-5: #181819; --mantine-color-dark-6: #101012; --mantine-color-dark-7: #101012; --mantine-color-dark-8: #08080a; --mantine-color-dark-9: #08080a; --mantine-color-gray-0: #181819; --mantine-color-gray-1: #101012; --mantine-color-gray-2: rgba(198, 92, 99, 0.18); --mantine-color-gray-3: rgba(198, 92, 99, 0.18); --mantine-color-gray-4: #8b8a8b; --mantine-color-gray-5: #8b8a8b; --mantine-color-gray-6: #b5b4b4; --mantine-color-gray-7: #b5b4b4; --mantine-color-gray-8: #f2f1f0; --mantine-color-gray-9: #f2f1f0; --mantine-color-brand-light: rgba(198, 92, 99, 0.13); --mantine-color-brand-filled: #c65c63; --mantine-color-brand-filled-hover: #d38085; --mantine-color-brand-4: #d38085; --mantine-color-brand-5: #c65c63; --mantine-color-brand-6: #c65c63; --mantine-color-brand-7: #d38085; --mantine-color-blue-0: rgba(198, 92, 99, 0.13); --mantine-color-blue-4: #d38085; --mantine-color-blue-5: #c65c63; --mantine-color-blue-6: #c65c63; --mantine-color-blue-8: #d38085; --mantine-color-blue-light: rgba(198, 92, 99, 0.13); --mantine-color-blue-filled: #c65c63; --mantine-color-green-5: #6faf88; --mantine-color-green-6: #6faf88; --mantine-color-green-filled: #6faf88; --mantine-color-yellow-5: #d69846; --mantine-color-yellow-6: #d69846; --mantine-color-yellow-8: #d69846; --mantine-color-yellow-filled: #d69846; --mantine-color-red-5: #cf645d; --mantine-color-red-6: #cf645d; --mantine-color-red-filled: #cf645d; --surface-card: #101012; --surface-muted: #181819; --border-subtle: rgba(198, 92, 99, 0.18); --color-body: #08080a; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="quick-note"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="quick-note"] .sd-navbar, :root[data-context-mode="full"][data-context="quick-note"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="quick-note"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="quick-note"] .mantine-Card-root, :root[data-context-mode="full"][data-context="quick-note"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="quick-note"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="quick-note"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="quick-note"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="notes"] { --ctx-accent: #6f9c7a; --ctx-accent-hover: #8fb297; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="notes"] { --ctx-accent: #54775d; --ctx-accent-hover: #5e7564; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="notes"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="notes"] { --color-gray-50: #e9ede9; --color-gray-100: #e9ede9; --color-gray-200: #afb3af; --color-gray-300: #afb3af; --color-gray-400: #878a87; --color-gray-500: #878a87; --color-gray-600: rgba(111, 156, 122, 0.34); --color-gray-700: #181e1a; --color-gray-800: #111512; --color-gray-900: #0a0d0b; --color-gray-950: #0a0d0b; --color-blue-50: rgba(111, 156, 122, 0.13); --color-blue-100: rgba(111, 156, 122, 0.13); --color-blue-200: rgba(111, 156, 122, 0.13); --color-blue-300: #8fb297; --color-blue-400: #8fb297; --color-blue-500: #6f9c7a; --color-blue-600: #6f9c7a; --color-blue-700: #6f9c7a; --color-blue-800: #6f9c7a; --color-blue-900: #6f9c7a; --color-blue-950: #6f9c7a; --color-red-50: color-mix(in oklab, #c46c60 12%, transparent); --color-red-100: color-mix(in oklab, #c46c60 12%, transparent); --color-red-200: color-mix(in oklab, #c46c60 22%, transparent); --color-red-300: #c46c60; --color-red-400: #c46c60; --color-red-500: #c46c60; --color-red-600: #c46c60; --color-red-700: #c46c60; --color-red-800: #c46c60; --color-red-900: #c46c60; --color-red-950: #c46c60; --color-rose-50: color-mix(in oklab, #c46c60 12%, transparent); --color-rose-100: color-mix(in oklab, #c46c60 12%, transparent); --color-rose-200: color-mix(in oklab, #c46c60 22%, transparent); --color-rose-300: #c46c60; --color-rose-400: #c46c60; --color-rose-500: #c46c60; --color-rose-600: #c46c60; --color-rose-700: #c46c60; --color-rose-800: #c46c60; --color-rose-900: #c46c60; --color-rose-950: #c46c60; --color-green-50: color-mix(in oklab, #62b98c 12%, transparent); --color-green-100: color-mix(in oklab, #62b98c 12%, transparent); --color-green-200: color-mix(in oklab, #62b98c 22%, transparent); --color-green-300: #62b98c; --color-green-400: #62b98c; --color-green-500: #62b98c; --color-green-600: #62b98c; --color-green-700: #62b98c; --color-green-800: #62b98c; --color-green-900: #62b98c; --color-green-950: #62b98c; --color-emerald-50: color-mix(in oklab, #62b98c 12%, transparent); --color-emerald-100: color-mix(in oklab, #62b98c 12%, transparent); --color-emerald-200: color-mix(in oklab, #62b98c 22%, transparent); --color-emerald-300: #62b98c; --color-emerald-400: #62b98c; --color-emerald-500: #62b98c; --color-emerald-600: #62b98c; --color-emerald-700: #62b98c; --color-emerald-800: #62b98c; --color-emerald-900: #62b98c; --color-emerald-950: #62b98c; --color-yellow-50: color-mix(in oklab, #c8a34a 12%, transparent); --color-yellow-100: color-mix(in oklab, #c8a34a 12%, transparent); --color-yellow-200: color-mix(in oklab, #c8a34a 22%, transparent); --color-yellow-300: #c8a34a; --color-yellow-400: #c8a34a; --color-yellow-500: #c8a34a; --color-yellow-600: #c8a34a; --color-yellow-700: #c8a34a; --color-yellow-800: #c8a34a; --color-yellow-900: #c8a34a; --color-yellow-950: #c8a34a; --color-amber-50: color-mix(in oklab, #c8a34a 12%, transparent); --color-amber-100: color-mix(in oklab, #c8a34a 12%, transparent); --color-amber-200: color-mix(in oklab, #c8a34a 22%, transparent); --color-amber-300: #c8a34a; --color-amber-400: #c8a34a; --color-amber-500: #c8a34a; --color-amber-600: #c8a34a; --color-amber-700: #c8a34a; --color-amber-800: #c8a34a; --color-amber-900: #c8a34a; --color-amber-950: #c8a34a; --color-orange-50: color-mix(in oklab, #c8a34a 12%, transparent); --color-orange-100: color-mix(in oklab, #c8a34a 12%, transparent); --color-orange-200: color-mix(in oklab, #c8a34a 22%, transparent); --color-orange-300: #c8a34a; --color-orange-400: #c8a34a; --color-orange-500: #c8a34a; --color-orange-600: #c8a34a; --color-orange-700: #c8a34a; --color-orange-800: #c8a34a; --color-orange-900: #c8a34a; --color-orange-950: #c8a34a; --lo-background: #0a0d0b; --lo-surface: #111512; --lo-surface-elevated: #181e1a; --lo-text-primary: #e9ede9; --lo-text-secondary: #afb3af; --lo-text-muted: #878a87; --lo-border: rgba(111, 156, 122, 0.18); --lo-border-strong: rgba(111, 156, 122, 0.34); --lo-accent: #6f9c7a; --lo-accent-hover: #8fb297; --lo-accent-subtle: rgba(111, 156, 122, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #62b98c; --lo-warning: #c8a34a; --lo-danger: #c46c60; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0a0d0b; --mantine-color-text: #e9ede9; --mantine-color-dimmed: #878a87; --mantine-color-default: #111512; --mantine-color-default-hover: #181e1a; --mantine-color-default-color: #e9ede9; --mantine-color-default-border: rgba(111, 156, 122, 0.18); --mantine-color-placeholder: #878a87; --mantine-color-anchor: #6f9c7a; --mantine-color-error: #c46c60; --mantine-primary-color-filled: #6f9c7a; --mantine-primary-color-filled-hover: #8fb297; --mantine-primary-color-light: rgba(111, 156, 122, 0.13); --mantine-primary-color-light-hover: rgba(111, 156, 122, 0.13); --mantine-primary-color-light-color: #6f9c7a; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e9ede9; --mantine-color-dark-1: #afb3af; --mantine-color-dark-2: #afb3af; --mantine-color-dark-3: #878a87; --mantine-color-dark-4: rgba(111, 156, 122, 0.18); --mantine-color-dark-5: #181e1a; --mantine-color-dark-6: #111512; --mantine-color-dark-7: #111512; --mantine-color-dark-8: #0a0d0b; --mantine-color-dark-9: #0a0d0b; --mantine-color-gray-0: #181e1a; --mantine-color-gray-1: #111512; --mantine-color-gray-2: rgba(111, 156, 122, 0.18); --mantine-color-gray-3: rgba(111, 156, 122, 0.18); --mantine-color-gray-4: #878a87; --mantine-color-gray-5: #878a87; --mantine-color-gray-6: #afb3af; --mantine-color-gray-7: #afb3af; --mantine-color-gray-8: #e9ede9; --mantine-color-gray-9: #e9ede9; --mantine-color-brand-light: rgba(111, 156, 122, 0.13); --mantine-color-brand-filled: #6f9c7a; --mantine-color-brand-filled-hover: #8fb297; --mantine-color-brand-4: #8fb297; --mantine-color-brand-5: #6f9c7a; --mantine-color-brand-6: #6f9c7a; --mantine-color-brand-7: #8fb297; --mantine-color-blue-0: rgba(111, 156, 122, 0.13); --mantine-color-blue-4: #8fb297; --mantine-color-blue-5: #6f9c7a; --mantine-color-blue-6: #6f9c7a; --mantine-color-blue-8: #8fb297; --mantine-color-blue-light: rgba(111, 156, 122, 0.13); --mantine-color-blue-filled: #6f9c7a; --mantine-color-green-5: #62b98c; --mantine-color-green-6: #62b98c; --mantine-color-green-filled: #62b98c; --mantine-color-yellow-5: #c8a34a; --mantine-color-yellow-6: #c8a34a; --mantine-color-yellow-8: #c8a34a; --mantine-color-yellow-filled: #c8a34a; --mantine-color-red-5: #c46c60; --mantine-color-red-6: #c46c60; --mantine-color-red-filled: #c46c60; --surface-card: #111512; --surface-muted: #181e1a; --border-subtle: rgba(111, 156, 122, 0.18); --color-body: #0a0d0b; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="notes"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="notes"] .sd-navbar, :root[data-context-mode="full"][data-context="notes"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="notes"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="notes"] .mantine-Card-root, :root[data-context-mode="full"][data-context="notes"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="notes"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="notes"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="notes"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="writing"] { --ctx-accent: #c9a961; --ctx-accent-hover: #d5bc84; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="writing"] { --ctx-accent: #816c3e; --ctx-accent-hover: #7c6d4d; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="writing"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="writing"] { --color-gray-50: #ece7d9; --color-gray-100: #ece7d9; --color-gray-200: #b2afa4; --color-gray-300: #b2afa4; --color-gray-400: #89887f; --color-gray-500: #89887f; --color-gray-600: rgba(201, 169, 97, 0.34); --color-gray-700: #1a211b; --color-gray-800: #121813; --color-gray-900: #0b0f0c; --color-gray-950: #0b0f0c; --color-blue-50: rgba(201, 169, 97, 0.13); --color-blue-100: rgba(201, 169, 97, 0.13); --color-blue-200: rgba(201, 169, 97, 0.13); --color-blue-300: #d5bc84; --color-blue-400: #d5bc84; --color-blue-500: #c9a961; --color-blue-600: #c9a961; --color-blue-700: #c9a961; --color-blue-800: #c9a961; --color-blue-900: #c9a961; --color-blue-950: #c9a961; --color-red-50: color-mix(in oklab, #cf6d5d 12%, transparent); --color-red-100: color-mix(in oklab, #cf6d5d 12%, transparent); --color-red-200: color-mix(in oklab, #cf6d5d 22%, transparent); --color-red-300: #cf6d5d; --color-red-400: #cf6d5d; --color-red-500: #cf6d5d; --color-red-600: #cf6d5d; --color-red-700: #cf6d5d; --color-red-800: #cf6d5d; --color-red-900: #cf6d5d; --color-red-950: #cf6d5d; --color-rose-50: color-mix(in oklab, #cf6d5d 12%, transparent); --color-rose-100: color-mix(in oklab, #cf6d5d 12%, transparent); --color-rose-200: color-mix(in oklab, #cf6d5d 22%, transparent); --color-rose-300: #cf6d5d; --color-rose-400: #cf6d5d; --color-rose-500: #cf6d5d; --color-rose-600: #cf6d5d; --color-rose-700: #cf6d5d; --color-rose-800: #cf6d5d; --color-rose-900: #cf6d5d; --color-rose-950: #cf6d5d; --color-green-50: color-mix(in oklab, #70bb88 12%, transparent); --color-green-100: color-mix(in oklab, #70bb88 12%, transparent); --color-green-200: color-mix(in oklab, #70bb88 22%, transparent); --color-green-300: #70bb88; --color-green-400: #70bb88; --color-green-500: #70bb88; --color-green-600: #70bb88; --color-green-700: #70bb88; --color-green-800: #70bb88; --color-green-900: #70bb88; --color-green-950: #70bb88; --color-emerald-50: color-mix(in oklab, #70bb88 12%, transparent); --color-emerald-100: color-mix(in oklab, #70bb88 12%, transparent); --color-emerald-200: color-mix(in oklab, #70bb88 22%, transparent); --color-emerald-300: #70bb88; --color-emerald-400: #70bb88; --color-emerald-500: #70bb88; --color-emerald-600: #70bb88; --color-emerald-700: #70bb88; --color-emerald-800: #70bb88; --color-emerald-900: #70bb88; --color-emerald-950: #70bb88; --color-yellow-50: color-mix(in oklab, #d6a546 12%, transparent); --color-yellow-100: color-mix(in oklab, #d6a546 12%, transparent); --color-yellow-200: color-mix(in oklab, #d6a546 22%, transparent); --color-yellow-300: #d6a546; --color-yellow-400: #d6a546; --color-yellow-500: #d6a546; --color-yellow-600: #d6a546; --color-yellow-700: #d6a546; --color-yellow-800: #d6a546; --color-yellow-900: #d6a546; --color-yellow-950: #d6a546; --color-amber-50: color-mix(in oklab, #d6a546 12%, transparent); --color-amber-100: color-mix(in oklab, #d6a546 12%, transparent); --color-amber-200: color-mix(in oklab, #d6a546 22%, transparent); --color-amber-300: #d6a546; --color-amber-400: #d6a546; --color-amber-500: #d6a546; --color-amber-600: #d6a546; --color-amber-700: #d6a546; --color-amber-800: #d6a546; --color-amber-900: #d6a546; --color-amber-950: #d6a546; --color-orange-50: color-mix(in oklab, #d6a546 12%, transparent); --color-orange-100: color-mix(in oklab, #d6a546 12%, transparent); --color-orange-200: color-mix(in oklab, #d6a546 22%, transparent); --color-orange-300: #d6a546; --color-orange-400: #d6a546; --color-orange-500: #d6a546; --color-orange-600: #d6a546; --color-orange-700: #d6a546; --color-orange-800: #d6a546; --color-orange-900: #d6a546; --color-orange-950: #d6a546; --lo-background: #0b0f0c; --lo-surface: #121813; --lo-surface-elevated: #1a211b; --lo-text-primary: #ece7d9; --lo-text-secondary: #b2afa4; --lo-text-muted: #89887f; --lo-border: rgba(201, 169, 97, 0.18); --lo-border-strong: rgba(201, 169, 97, 0.34); --lo-accent: #c9a961; --lo-accent-hover: #d5bc84; --lo-accent-subtle: rgba(201, 169, 97, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #70bb88; --lo-warning: #d6a546; --lo-danger: #cf6d5d; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0b0f0c; --mantine-color-text: #ece7d9; --mantine-color-dimmed: #89887f; --mantine-color-default: #121813; --mantine-color-default-hover: #1a211b; --mantine-color-default-color: #ece7d9; --mantine-color-default-border: rgba(201, 169, 97, 0.18); --mantine-color-placeholder: #89887f; --mantine-color-anchor: #c9a961; --mantine-color-error: #cf6d5d; --mantine-primary-color-filled: #c9a961; --mantine-primary-color-filled-hover: #d5bc84; --mantine-primary-color-light: rgba(201, 169, 97, 0.13); --mantine-primary-color-light-hover: rgba(201, 169, 97, 0.13); --mantine-primary-color-light-color: #c9a961; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #ece7d9; --mantine-color-dark-1: #b2afa4; --mantine-color-dark-2: #b2afa4; --mantine-color-dark-3: #89887f; --mantine-color-dark-4: rgba(201, 169, 97, 0.18); --mantine-color-dark-5: #1a211b; --mantine-color-dark-6: #121813; --mantine-color-dark-7: #121813; --mantine-color-dark-8: #0b0f0c; --mantine-color-dark-9: #0b0f0c; --mantine-color-gray-0: #1a211b; --mantine-color-gray-1: #121813; --mantine-color-gray-2: rgba(201, 169, 97, 0.18); --mantine-color-gray-3: rgba(201, 169, 97, 0.18); --mantine-color-gray-4: #89887f; --mantine-color-gray-5: #89887f; --mantine-color-gray-6: #b2afa4; --mantine-color-gray-7: #b2afa4; --mantine-color-gray-8: #ece7d9; --mantine-color-gray-9: #ece7d9; --mantine-color-brand-light: rgba(201, 169, 97, 0.13); --mantine-color-brand-filled: #c9a961; --mantine-color-brand-filled-hover: #d5bc84; --mantine-color-brand-4: #d5bc84; --mantine-color-brand-5: #c9a961; --mantine-color-brand-6: #c9a961; --mantine-color-brand-7: #d5bc84; --mantine-color-blue-0: rgba(201, 169, 97, 0.13); --mantine-color-blue-4: #d5bc84; --mantine-color-blue-5: #c9a961; --mantine-color-blue-6: #c9a961; --mantine-color-blue-8: #d5bc84; --mantine-color-blue-light: rgba(201, 169, 97, 0.13); --mantine-color-blue-filled: #c9a961; --mantine-color-green-5: #70bb88; --mantine-color-green-6: #70bb88; --mantine-color-green-filled: #70bb88; --mantine-color-yellow-5: #d6a546; --mantine-color-yellow-6: #d6a546; --mantine-color-yellow-8: #d6a546; --mantine-color-yellow-filled: #d6a546; --mantine-color-red-5: #cf6d5d; --mantine-color-red-6: #cf6d5d; --mantine-color-red-filled: #cf6d5d; --surface-card: #121813; --surface-muted: #1a211b; --border-subtle: rgba(201, 169, 97, 0.18); --color-body: #0b0f0c; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="writing"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="writing"] .sd-navbar, :root[data-context-mode="full"][data-context="writing"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="writing"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="writing"] .mantine-Card-root, :root[data-context-mode="full"][data-context="writing"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="writing"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="writing"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="writing"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="knowledge"] { --ctx-accent: #4fbf7f; --ctx-accent-hover: #76cd9b; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="knowledge"] { --ctx-accent: #337a51; --ctx-accent-hover: #44775a; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="knowledge"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="knowledge"] { --color-gray-50: #dbe6db; --color-gray-100: #dbe6db; --color-gray-200: #a3aca3; --color-gray-300: #a3aca3; --color-gray-400: #7d847d; --color-gray-500: #7d847d; --color-gray-600: rgba(79, 191, 127, 0.34); --color-gray-700: #131a14; --color-gray-800: #0c110d; --color-gray-900: #050705; --color-gray-950: #050705; --color-blue-50: rgba(79, 191, 127, 0.13); --color-blue-100: rgba(79, 191, 127, 0.13); --color-blue-200: rgba(79, 191, 127, 0.13); --color-blue-300: #76cd9b; --color-blue-400: #76cd9b; --color-blue-500: #4fbf7f; --color-blue-600: #4fbf7f; --color-blue-700: #4fbf7f; --color-blue-800: #4fbf7f; --color-blue-900: #4fbf7f; --color-blue-950: #4fbf7f; --color-red-50: color-mix(in oklab, #c17060 12%, transparent); --color-red-100: color-mix(in oklab, #c17060 12%, transparent); --color-red-200: color-mix(in oklab, #c17060 22%, transparent); --color-red-300: #c17060; --color-red-400: #c17060; --color-red-500: #c17060; --color-red-600: #c17060; --color-red-700: #c17060; --color-red-800: #c17060; --color-red-900: #c17060; --color-red-950: #c17060; --color-rose-50: color-mix(in oklab, #c17060 12%, transparent); --color-rose-100: color-mix(in oklab, #c17060 12%, transparent); --color-rose-200: color-mix(in oklab, #c17060 22%, transparent); --color-rose-300: #c17060; --color-rose-400: #c17060; --color-rose-500: #c17060; --color-rose-600: #c17060; --color-rose-700: #c17060; --color-rose-800: #c17060; --color-rose-900: #c17060; --color-rose-950: #c17060; --color-green-50: color-mix(in oklab, #5cbf8c 12%, transparent); --color-green-100: color-mix(in oklab, #5cbf8c 12%, transparent); --color-green-200: color-mix(in oklab, #5cbf8c 22%, transparent); --color-green-300: #5cbf8c; --color-green-400: #5cbf8c; --color-green-500: #5cbf8c; --color-green-600: #5cbf8c; --color-green-700: #5cbf8c; --color-green-800: #5cbf8c; --color-green-900: #5cbf8c; --color-green-950: #5cbf8c; --color-emerald-50: color-mix(in oklab, #5cbf8c 12%, transparent); --color-emerald-100: color-mix(in oklab, #5cbf8c 12%, transparent); --color-emerald-200: color-mix(in oklab, #5cbf8c 22%, transparent); --color-emerald-300: #5cbf8c; --color-emerald-400: #5cbf8c; --color-emerald-500: #5cbf8c; --color-emerald-600: #5cbf8c; --color-emerald-700: #5cbf8c; --color-emerald-800: #5cbf8c; --color-emerald-900: #5cbf8c; --color-emerald-950: #5cbf8c; --color-yellow-50: color-mix(in oklab, #c3a84b 12%, transparent); --color-yellow-100: color-mix(in oklab, #c3a84b 12%, transparent); --color-yellow-200: color-mix(in oklab, #c3a84b 22%, transparent); --color-yellow-300: #c3a84b; --color-yellow-400: #c3a84b; --color-yellow-500: #c3a84b; --color-yellow-600: #c3a84b; --color-yellow-700: #c3a84b; --color-yellow-800: #c3a84b; --color-yellow-900: #c3a84b; --color-yellow-950: #c3a84b; --color-amber-50: color-mix(in oklab, #c3a84b 12%, transparent); --color-amber-100: color-mix(in oklab, #c3a84b 12%, transparent); --color-amber-200: color-mix(in oklab, #c3a84b 22%, transparent); --color-amber-300: #c3a84b; --color-amber-400: #c3a84b; --color-amber-500: #c3a84b; --color-amber-600: #c3a84b; --color-amber-700: #c3a84b; --color-amber-800: #c3a84b; --color-amber-900: #c3a84b; --color-amber-950: #c3a84b; --color-orange-50: color-mix(in oklab, #c3a84b 12%, transparent); --color-orange-100: color-mix(in oklab, #c3a84b 12%, transparent); --color-orange-200: color-mix(in oklab, #c3a84b 22%, transparent); --color-orange-300: #c3a84b; --color-orange-400: #c3a84b; --color-orange-500: #c3a84b; --color-orange-600: #c3a84b; --color-orange-700: #c3a84b; --color-orange-800: #c3a84b; --color-orange-900: #c3a84b; --color-orange-950: #c3a84b; --lo-background: #050705; --lo-surface: #0c110d; --lo-surface-elevated: #131a14; --lo-text-primary: #dbe6db; --lo-text-secondary: #a3aca3; --lo-text-muted: #7d847d; --lo-border: rgba(79, 191, 127, 0.18); --lo-border-strong: rgba(79, 191, 127, 0.34); --lo-accent: #4fbf7f; --lo-accent-hover: #76cd9b; --lo-accent-subtle: rgba(79, 191, 127, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #5cbf8c; --lo-warning: #c3a84b; --lo-danger: #c17060; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #050705; --mantine-color-text: #dbe6db; --mantine-color-dimmed: #7d847d; --mantine-color-default: #0c110d; --mantine-color-default-hover: #131a14; --mantine-color-default-color: #dbe6db; --mantine-color-default-border: rgba(79, 191, 127, 0.18); --mantine-color-placeholder: #7d847d; --mantine-color-anchor: #4fbf7f; --mantine-color-error: #c17060; --mantine-primary-color-filled: #4fbf7f; --mantine-primary-color-filled-hover: #76cd9b; --mantine-primary-color-light: rgba(79, 191, 127, 0.13); --mantine-primary-color-light-hover: rgba(79, 191, 127, 0.13); --mantine-primary-color-light-color: #4fbf7f; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #dbe6db; --mantine-color-dark-1: #a3aca3; --mantine-color-dark-2: #a3aca3; --mantine-color-dark-3: #7d847d; --mantine-color-dark-4: rgba(79, 191, 127, 0.18); --mantine-color-dark-5: #131a14; --mantine-color-dark-6: #0c110d; --mantine-color-dark-7: #0c110d; --mantine-color-dark-8: #050705; --mantine-color-dark-9: #050705; --mantine-color-gray-0: #131a14; --mantine-color-gray-1: #0c110d; --mantine-color-gray-2: rgba(79, 191, 127, 0.18); --mantine-color-gray-3: rgba(79, 191, 127, 0.18); --mantine-color-gray-4: #7d847d; --mantine-color-gray-5: #7d847d; --mantine-color-gray-6: #a3aca3; --mantine-color-gray-7: #a3aca3; --mantine-color-gray-8: #dbe6db; --mantine-color-gray-9: #dbe6db; --mantine-color-brand-light: rgba(79, 191, 127, 0.13); --mantine-color-brand-filled: #4fbf7f; --mantine-color-brand-filled-hover: #76cd9b; --mantine-color-brand-4: #76cd9b; --mantine-color-brand-5: #4fbf7f; --mantine-color-brand-6: #4fbf7f; --mantine-color-brand-7: #76cd9b; --mantine-color-blue-0: rgba(79, 191, 127, 0.13); --mantine-color-blue-4: #76cd9b; --mantine-color-blue-5: #4fbf7f; --mantine-color-blue-6: #4fbf7f; --mantine-color-blue-8: #76cd9b; --mantine-color-blue-light: rgba(79, 191, 127, 0.13); --mantine-color-blue-filled: #4fbf7f; --mantine-color-green-5: #5cbf8c; --mantine-color-green-6: #5cbf8c; --mantine-color-green-filled: #5cbf8c; --mantine-color-yellow-5: #c3a84b; --mantine-color-yellow-6: #c3a84b; --mantine-color-yellow-8: #c3a84b; --mantine-color-yellow-filled: #c3a84b; --mantine-color-red-5: #c17060; --mantine-color-red-6: #c17060; --mantine-color-red-filled: #c17060; --surface-card: #0c110d; --surface-muted: #131a14; --border-subtle: rgba(79, 191, 127, 0.18); --color-body: #050705; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="knowledge"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="knowledge"] .sd-navbar, :root[data-context-mode="full"][data-context="knowledge"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="knowledge"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="knowledge"] .mantine-Card-root, :root[data-context-mode="full"][data-context="knowledge"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="knowledge"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="knowledge"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="knowledge"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="learning"] { --ctx-accent: #c9b06a; --ctx-accent-hover: #d5c18b; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.95; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="learning"] { --ctx-accent: #7d6d42; --ctx-accent-hover: #776c4e; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="learning"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="learning"] { --color-gray-50: #eae6d8; --color-gray-100: #eae6d8; --color-gray-200: #afada5; --color-gray-300: #afada5; --color-gray-400: #878682; --color-gray-500: #878682; --color-gray-600: rgba(201, 176, 106, 0.34); --color-gray-700: #161d2d; --color-gray-800: #0f1522; --color-gray-900: #080c14; --color-gray-950: #080c14; --color-blue-50: rgba(201, 176, 106, 0.13); --color-blue-100: rgba(201, 176, 106, 0.13); --color-blue-200: rgba(201, 176, 106, 0.13); --color-blue-300: #d5c18b; --color-blue-400: #d5c18b; --color-blue-500: #c9b06a; --color-blue-600: #c9b06a; --color-blue-700: #c9b06a; --color-blue-800: #c9b06a; --color-blue-900: #c9b06a; --color-blue-950: #c9b06a; --color-red-50: color-mix(in oklab, #cf6e5e 12%, transparent); --color-red-100: color-mix(in oklab, #cf6e5e 12%, transparent); --color-red-200: color-mix(in oklab, #cf6e5e 22%, transparent); --color-red-300: #cf6e5e; --color-red-400: #cf6e5e; --color-red-500: #cf6e5e; --color-red-600: #cf6e5e; --color-red-700: #cf6e5e; --color-red-800: #cf6e5e; --color-red-900: #cf6e5e; --color-red-950: #cf6e5e; --color-rose-50: color-mix(in oklab, #cf6e5e 12%, transparent); --color-rose-100: color-mix(in oklab, #cf6e5e 12%, transparent); --color-rose-200: color-mix(in oklab, #cf6e5e 22%, transparent); --color-rose-300: #cf6e5e; --color-rose-400: #cf6e5e; --color-rose-500: #cf6e5e; --color-rose-600: #cf6e5e; --color-rose-700: #cf6e5e; --color-rose-800: #cf6e5e; --color-rose-900: #cf6e5e; --color-rose-950: #cf6e5e; --color-green-50: color-mix(in oklab, #70bd89 12%, transparent); --color-green-100: color-mix(in oklab, #70bd89 12%, transparent); --color-green-200: color-mix(in oklab, #70bd89 22%, transparent); --color-green-300: #70bd89; --color-green-400: #70bd89; --color-green-500: #70bd89; --color-green-600: #70bd89; --color-green-700: #70bd89; --color-green-800: #70bd89; --color-green-900: #70bd89; --color-green-950: #70bd89; --color-emerald-50: color-mix(in oklab, #70bd89 12%, transparent); --color-emerald-100: color-mix(in oklab, #70bd89 12%, transparent); --color-emerald-200: color-mix(in oklab, #70bd89 22%, transparent); --color-emerald-300: #70bd89; --color-emerald-400: #70bd89; --color-emerald-500: #70bd89; --color-emerald-600: #70bd89; --color-emerald-700: #70bd89; --color-emerald-800: #70bd89; --color-emerald-900: #70bd89; --color-emerald-950: #70bd89; --color-yellow-50: color-mix(in oklab, #d6a648 12%, transparent); --color-yellow-100: color-mix(in oklab, #d6a648 12%, transparent); --color-yellow-200: color-mix(in oklab, #d6a648 22%, transparent); --color-yellow-300: #d6a648; --color-yellow-400: #d6a648; --color-yellow-500: #d6a648; --color-yellow-600: #d6a648; --color-yellow-700: #d6a648; --color-yellow-800: #d6a648; --color-yellow-900: #d6a648; --color-yellow-950: #d6a648; --color-amber-50: color-mix(in oklab, #d6a648 12%, transparent); --color-amber-100: color-mix(in oklab, #d6a648 12%, transparent); --color-amber-200: color-mix(in oklab, #d6a648 22%, transparent); --color-amber-300: #d6a648; --color-amber-400: #d6a648; --color-amber-500: #d6a648; --color-amber-600: #d6a648; --color-amber-700: #d6a648; --color-amber-800: #d6a648; --color-amber-900: #d6a648; --color-amber-950: #d6a648; --color-orange-50: color-mix(in oklab, #d6a648 12%, transparent); --color-orange-100: color-mix(in oklab, #d6a648 12%, transparent); --color-orange-200: color-mix(in oklab, #d6a648 22%, transparent); --color-orange-300: #d6a648; --color-orange-400: #d6a648; --color-orange-500: #d6a648; --color-orange-600: #d6a648; --color-orange-700: #d6a648; --color-orange-800: #d6a648; --color-orange-900: #d6a648; --color-orange-950: #d6a648; --lo-background: #080c14; --lo-surface: #0f1522; --lo-surface-elevated: #161d2d; --lo-text-primary: #eae6d8; --lo-text-secondary: #afada5; --lo-text-muted: #878682; --lo-border: rgba(201, 176, 106, 0.18); --lo-border-strong: rgba(201, 176, 106, 0.34); --lo-accent: #c9b06a; --lo-accent-hover: #d5c18b; --lo-accent-subtle: rgba(201, 176, 106, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #70bd89; --lo-warning: #d6a648; --lo-danger: #cf6e5e; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #080c14; --mantine-color-text: #eae6d8; --mantine-color-dimmed: #878682; --mantine-color-default: #0f1522; --mantine-color-default-hover: #161d2d; --mantine-color-default-color: #eae6d8; --mantine-color-default-border: rgba(201, 176, 106, 0.18); --mantine-color-placeholder: #878682; --mantine-color-anchor: #c9b06a; --mantine-color-error: #cf6e5e; --mantine-primary-color-filled: #c9b06a; --mantine-primary-color-filled-hover: #d5c18b; --mantine-primary-color-light: rgba(201, 176, 106, 0.13); --mantine-primary-color-light-hover: rgba(201, 176, 106, 0.13); --mantine-primary-color-light-color: #c9b06a; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #eae6d8; --mantine-color-dark-1: #afada5; --mantine-color-dark-2: #afada5; --mantine-color-dark-3: #878682; --mantine-color-dark-4: rgba(201, 176, 106, 0.18); --mantine-color-dark-5: #161d2d; --mantine-color-dark-6: #0f1522; --mantine-color-dark-7: #0f1522; --mantine-color-dark-8: #080c14; --mantine-color-dark-9: #080c14; --mantine-color-gray-0: #161d2d; --mantine-color-gray-1: #0f1522; --mantine-color-gray-2: rgba(201, 176, 106, 0.18); --mantine-color-gray-3: rgba(201, 176, 106, 0.18); --mantine-color-gray-4: #878682; --mantine-color-gray-5: #878682; --mantine-color-gray-6: #afada5; --mantine-color-gray-7: #afada5; --mantine-color-gray-8: #eae6d8; --mantine-color-gray-9: #eae6d8; --mantine-color-brand-light: rgba(201, 176, 106, 0.13); --mantine-color-brand-filled: #c9b06a; --mantine-color-brand-filled-hover: #d5c18b; --mantine-color-brand-4: #d5c18b; --mantine-color-brand-5: #c9b06a; --mantine-color-brand-6: #c9b06a; --mantine-color-brand-7: #d5c18b; --mantine-color-blue-0: rgba(201, 176, 106, 0.13); --mantine-color-blue-4: #d5c18b; --mantine-color-blue-5: #c9b06a; --mantine-color-blue-6: #c9b06a; --mantine-color-blue-8: #d5c18b; --mantine-color-blue-light: rgba(201, 176, 106, 0.13); --mantine-color-blue-filled: #c9b06a; --mantine-color-green-5: #70bd89; --mantine-color-green-6: #70bd89; --mantine-color-green-filled: #70bd89; --mantine-color-yellow-5: #d6a648; --mantine-color-yellow-6: #d6a648; --mantine-color-yellow-8: #d6a648; --mantine-color-yellow-filled: #d6a648; --mantine-color-red-5: #cf6e5e; --mantine-color-red-6: #cf6e5e; --mantine-color-red-filled: #cf6e5e; --surface-card: #0f1522; --surface-muted: #161d2d; --border-subtle: rgba(201, 176, 106, 0.18); --color-body: #080c14; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="learning"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="learning"] .sd-navbar, :root[data-context-mode="full"][data-context="learning"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="learning"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="learning"] .mantine-Card-root, :root[data-context-mode="full"][data-context="learning"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="learning"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="learning"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="learning"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="archive"] { --ctx-accent: #a8956b; --ctx-accent-hover: #bbac8c; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.85; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="archive"] { --ctx-accent: #7c6e4f; --ctx-accent-hover: #786e5a; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="archive"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="archive"] { --color-gray-50: #e9e2d4; --color-gray-100: #e9e2d4; --color-gray-200: #b0aa9f; --color-gray-300: #b0aa9f; --color-gray-400: #88837a; --color-gray-500: #88837a; --color-gray-600: rgba(168, 149, 107, 0.34); --color-gray-700: #1b1712; --color-gray-800: #13100c; --color-gray-900: #0c0a07; --color-gray-950: #0c0a07; --color-blue-50: rgba(168, 149, 107, 0.13); --color-blue-100: rgba(168, 149, 107, 0.13); --color-blue-200: rgba(168, 149, 107, 0.13); --color-blue-300: #bbac8c; --color-blue-400: #bbac8c; --color-blue-500: #a8956b; --color-blue-600: #a8956b; --color-blue-700: #a8956b; --color-blue-800: #a8956b; --color-blue-900: #a8956b; --color-blue-950: #a8956b; --color-red-50: color-mix(in oklab, #cb6b5e 12%, transparent); --color-red-100: color-mix(in oklab, #cb6b5e 12%, transparent); --color-red-200: color-mix(in oklab, #cb6b5e 22%, transparent); --color-red-300: #cb6b5e; --color-red-400: #cb6b5e; --color-red-500: #cb6b5e; --color-red-600: #cb6b5e; --color-red-700: #cb6b5e; --color-red-800: #cb6b5e; --color-red-900: #cb6b5e; --color-red-950: #cb6b5e; --color-rose-50: color-mix(in oklab, #cb6b5e 12%, transparent); --color-rose-100: color-mix(in oklab, #cb6b5e 12%, transparent); --color-rose-200: color-mix(in oklab, #cb6b5e 22%, transparent); --color-rose-300: #cb6b5e; --color-rose-400: #cb6b5e; --color-rose-500: #cb6b5e; --color-rose-600: #cb6b5e; --color-rose-700: #cb6b5e; --color-rose-800: #cb6b5e; --color-rose-900: #cb6b5e; --color-rose-950: #cb6b5e; --color-green-50: color-mix(in oklab, #6bb889 12%, transparent); --color-green-100: color-mix(in oklab, #6bb889 12%, transparent); --color-green-200: color-mix(in oklab, #6bb889 22%, transparent); --color-green-300: #6bb889; --color-green-400: #6bb889; --color-green-500: #6bb889; --color-green-600: #6bb889; --color-green-700: #6bb889; --color-green-800: #6bb889; --color-green-900: #6bb889; --color-green-950: #6bb889; --color-emerald-50: color-mix(in oklab, #6bb889 12%, transparent); --color-emerald-100: color-mix(in oklab, #6bb889 12%, transparent); --color-emerald-200: color-mix(in oklab, #6bb889 22%, transparent); --color-emerald-300: #6bb889; --color-emerald-400: #6bb889; --color-emerald-500: #6bb889; --color-emerald-600: #6bb889; --color-emerald-700: #6bb889; --color-emerald-800: #6bb889; --color-emerald-900: #6bb889; --color-emerald-950: #6bb889; --color-yellow-50: color-mix(in oklab, #d1a248 12%, transparent); --color-yellow-100: color-mix(in oklab, #d1a248 12%, transparent); --color-yellow-200: color-mix(in oklab, #d1a248 22%, transparent); --color-yellow-300: #d1a248; --color-yellow-400: #d1a248; --color-yellow-500: #d1a248; --color-yellow-600: #d1a248; --color-yellow-700: #d1a248; --color-yellow-800: #d1a248; --color-yellow-900: #d1a248; --color-yellow-950: #d1a248; --color-amber-50: color-mix(in oklab, #d1a248 12%, transparent); --color-amber-100: color-mix(in oklab, #d1a248 12%, transparent); --color-amber-200: color-mix(in oklab, #d1a248 22%, transparent); --color-amber-300: #d1a248; --color-amber-400: #d1a248; --color-amber-500: #d1a248; --color-amber-600: #d1a248; --color-amber-700: #d1a248; --color-amber-800: #d1a248; --color-amber-900: #d1a248; --color-amber-950: #d1a248; --color-orange-50: color-mix(in oklab, #d1a248 12%, transparent); --color-orange-100: color-mix(in oklab, #d1a248 12%, transparent); --color-orange-200: color-mix(in oklab, #d1a248 22%, transparent); --color-orange-300: #d1a248; --color-orange-400: #d1a248; --color-orange-500: #d1a248; --color-orange-600: #d1a248; --color-orange-700: #d1a248; --color-orange-800: #d1a248; --color-orange-900: #d1a248; --color-orange-950: #d1a248; --lo-background: #0c0a07; --lo-surface: #13100c; --lo-surface-elevated: #1b1712; --lo-text-primary: #e9e2d4; --lo-text-secondary: #b0aa9f; --lo-text-muted: #88837a; --lo-border: rgba(168, 149, 107, 0.18); --lo-border-strong: rgba(168, 149, 107, 0.34); --lo-accent: #a8956b; --lo-accent-hover: #bbac8c; --lo-accent-subtle: rgba(168, 149, 107, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6bb889; --lo-warning: #d1a248; --lo-danger: #cb6b5e; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0c0a07; --mantine-color-text: #e9e2d4; --mantine-color-dimmed: #88837a; --mantine-color-default: #13100c; --mantine-color-default-hover: #1b1712; --mantine-color-default-color: #e9e2d4; --mantine-color-default-border: rgba(168, 149, 107, 0.18); --mantine-color-placeholder: #88837a; --mantine-color-anchor: #a8956b; --mantine-color-error: #cb6b5e; --mantine-primary-color-filled: #a8956b; --mantine-primary-color-filled-hover: #bbac8c; --mantine-primary-color-light: rgba(168, 149, 107, 0.13); --mantine-primary-color-light-hover: rgba(168, 149, 107, 0.13); --mantine-primary-color-light-color: #a8956b; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e9e2d4; --mantine-color-dark-1: #b0aa9f; --mantine-color-dark-2: #b0aa9f; --mantine-color-dark-3: #88837a; --mantine-color-dark-4: rgba(168, 149, 107, 0.18); --mantine-color-dark-5: #1b1712; --mantine-color-dark-6: #13100c; --mantine-color-dark-7: #13100c; --mantine-color-dark-8: #0c0a07; --mantine-color-dark-9: #0c0a07; --mantine-color-gray-0: #1b1712; --mantine-color-gray-1: #13100c; --mantine-color-gray-2: rgba(168, 149, 107, 0.18); --mantine-color-gray-3: rgba(168, 149, 107, 0.18); --mantine-color-gray-4: #88837a; --mantine-color-gray-5: #88837a; --mantine-color-gray-6: #b0aa9f; --mantine-color-gray-7: #b0aa9f; --mantine-color-gray-8: #e9e2d4; --mantine-color-gray-9: #e9e2d4; --mantine-color-brand-light: rgba(168, 149, 107, 0.13); --mantine-color-brand-filled: #a8956b; --mantine-color-brand-filled-hover: #bbac8c; --mantine-color-brand-4: #bbac8c; --mantine-color-brand-5: #a8956b; --mantine-color-brand-6: #a8956b; --mantine-color-brand-7: #bbac8c; --mantine-color-blue-0: rgba(168, 149, 107, 0.13); --mantine-color-blue-4: #bbac8c; --mantine-color-blue-5: #a8956b; --mantine-color-blue-6: #a8956b; --mantine-color-blue-8: #bbac8c; --mantine-color-blue-light: rgba(168, 149, 107, 0.13); --mantine-color-blue-filled: #a8956b; --mantine-color-green-5: #6bb889; --mantine-color-green-6: #6bb889; --mantine-color-green-filled: #6bb889; --mantine-color-yellow-5: #d1a248; --mantine-color-yellow-6: #d1a248; --mantine-color-yellow-8: #d1a248; --mantine-color-yellow-filled: #d1a248; --mantine-color-red-5: #cb6b5e; --mantine-color-red-6: #cb6b5e; --mantine-color-red-filled: #cb6b5e; --surface-card: #13100c; --surface-muted: #1b1712; --border-subtle: rgba(168, 149, 107, 0.18); --color-body: #0c0a07; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="archive"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="archive"] .sd-navbar, :root[data-context-mode="full"][data-context="archive"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="archive"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="archive"] .mantine-Card-root, :root[data-context-mode="full"][data-context="archive"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="archive"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="archive"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="archive"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="reading"] { --ctx-accent: #c98f5e; --ctx-accent-hover: #d5a881; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="reading"] { --ctx-accent: #8d6442; --ctx-accent-hover: #846850; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="reading"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="reading"] { --color-gray-50: #f0e4d6; --color-gray-100: #f0e4d6; --color-gray-200: #b6aba0; --color-gray-300: #b6aba0; --color-gray-400: #8d847b; --color-gray-500: #8d847b; --color-gray-600: rgba(201, 143, 94, 0.34); --color-gray-700: #211712; --color-gray-800: #18100c; --color-gray-900: #100a08; --color-gray-950: #100a08; --color-blue-50: rgba(201, 143, 94, 0.13); --color-blue-100: rgba(201, 143, 94, 0.13); --color-blue-200: rgba(201, 143, 94, 0.13); --color-blue-300: #d5a881; --color-blue-400: #d5a881; --color-blue-500: #c98f5e; --color-blue-600: #c98f5e; --color-blue-700: #c98f5e; --color-blue-800: #c98f5e; --color-blue-900: #c98f5e; --color-blue-950: #c98f5e; --color-red-50: color-mix(in oklab, #cf6a5c 12%, transparent); --color-red-100: color-mix(in oklab, #cf6a5c 12%, transparent); --color-red-200: color-mix(in oklab, #cf6a5c 22%, transparent); --color-red-300: #cf6a5c; --color-red-400: #cf6a5c; --color-red-500: #cf6a5c; --color-red-600: #cf6a5c; --color-red-700: #cf6a5c; --color-red-800: #cf6a5c; --color-red-900: #cf6a5c; --color-red-950: #cf6a5c; --color-rose-50: color-mix(in oklab, #cf6a5c 12%, transparent); --color-rose-100: color-mix(in oklab, #cf6a5c 12%, transparent); --color-rose-200: color-mix(in oklab, #cf6a5c 22%, transparent); --color-rose-300: #cf6a5c; --color-rose-400: #cf6a5c; --color-rose-500: #cf6a5c; --color-rose-600: #cf6a5c; --color-rose-700: #cf6a5c; --color-rose-800: #cf6a5c; --color-rose-900: #cf6a5c; --color-rose-950: #cf6a5c; --color-green-50: color-mix(in oklab, #70b787 12%, transparent); --color-green-100: color-mix(in oklab, #70b787 12%, transparent); --color-green-200: color-mix(in oklab, #70b787 22%, transparent); --color-green-300: #70b787; --color-green-400: #70b787; --color-green-500: #70b787; --color-green-600: #70b787; --color-green-700: #70b787; --color-green-800: #70b787; --color-green-900: #70b787; --color-green-950: #70b787; --color-emerald-50: color-mix(in oklab, #70b787 12%, transparent); --color-emerald-100: color-mix(in oklab, #70b787 12%, transparent); --color-emerald-200: color-mix(in oklab, #70b787 22%, transparent); --color-emerald-300: #70b787; --color-emerald-400: #70b787; --color-emerald-500: #70b787; --color-emerald-600: #70b787; --color-emerald-700: #70b787; --color-emerald-800: #70b787; --color-emerald-900: #70b787; --color-emerald-950: #70b787; --color-yellow-50: color-mix(in oklab, #d6a146 12%, transparent); --color-yellow-100: color-mix(in oklab, #d6a146 12%, transparent); --color-yellow-200: color-mix(in oklab, #d6a146 22%, transparent); --color-yellow-300: #d6a146; --color-yellow-400: #d6a146; --color-yellow-500: #d6a146; --color-yellow-600: #d6a146; --color-yellow-700: #d6a146; --color-yellow-800: #d6a146; --color-yellow-900: #d6a146; --color-yellow-950: #d6a146; --color-amber-50: color-mix(in oklab, #d6a146 12%, transparent); --color-amber-100: color-mix(in oklab, #d6a146 12%, transparent); --color-amber-200: color-mix(in oklab, #d6a146 22%, transparent); --color-amber-300: #d6a146; --color-amber-400: #d6a146; --color-amber-500: #d6a146; --color-amber-600: #d6a146; --color-amber-700: #d6a146; --color-amber-800: #d6a146; --color-amber-900: #d6a146; --color-amber-950: #d6a146; --color-orange-50: color-mix(in oklab, #d6a146 12%, transparent); --color-orange-100: color-mix(in oklab, #d6a146 12%, transparent); --color-orange-200: color-mix(in oklab, #d6a146 22%, transparent); --color-orange-300: #d6a146; --color-orange-400: #d6a146; --color-orange-500: #d6a146; --color-orange-600: #d6a146; --color-orange-700: #d6a146; --color-orange-800: #d6a146; --color-orange-900: #d6a146; --color-orange-950: #d6a146; --lo-background: #100a08; --lo-surface: #18100c; --lo-surface-elevated: #211712; --lo-text-primary: #f0e4d6; --lo-text-secondary: #b6aba0; --lo-text-muted: #8d847b; --lo-border: rgba(201, 143, 94, 0.18); --lo-border-strong: rgba(201, 143, 94, 0.34); --lo-accent: #c98f5e; --lo-accent-hover: #d5a881; --lo-accent-subtle: rgba(201, 143, 94, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #70b787; --lo-warning: #d6a146; --lo-danger: #cf6a5c; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #100a08; --mantine-color-text: #f0e4d6; --mantine-color-dimmed: #8d847b; --mantine-color-default: #18100c; --mantine-color-default-hover: #211712; --mantine-color-default-color: #f0e4d6; --mantine-color-default-border: rgba(201, 143, 94, 0.18); --mantine-color-placeholder: #8d847b; --mantine-color-anchor: #c98f5e; --mantine-color-error: #cf6a5c; --mantine-primary-color-filled: #c98f5e; --mantine-primary-color-filled-hover: #d5a881; --mantine-primary-color-light: rgba(201, 143, 94, 0.13); --mantine-primary-color-light-hover: rgba(201, 143, 94, 0.13); --mantine-primary-color-light-color: #c98f5e; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f0e4d6; --mantine-color-dark-1: #b6aba0; --mantine-color-dark-2: #b6aba0; --mantine-color-dark-3: #8d847b; --mantine-color-dark-4: rgba(201, 143, 94, 0.18); --mantine-color-dark-5: #211712; --mantine-color-dark-6: #18100c; --mantine-color-dark-7: #18100c; --mantine-color-dark-8: #100a08; --mantine-color-dark-9: #100a08; --mantine-color-gray-0: #211712; --mantine-color-gray-1: #18100c; --mantine-color-gray-2: rgba(201, 143, 94, 0.18); --mantine-color-gray-3: rgba(201, 143, 94, 0.18); --mantine-color-gray-4: #8d847b; --mantine-color-gray-5: #8d847b; --mantine-color-gray-6: #b6aba0; --mantine-color-gray-7: #b6aba0; --mantine-color-gray-8: #f0e4d6; --mantine-color-gray-9: #f0e4d6; --mantine-color-brand-light: rgba(201, 143, 94, 0.13); --mantine-color-brand-filled: #c98f5e; --mantine-color-brand-filled-hover: #d5a881; --mantine-color-brand-4: #d5a881; --mantine-color-brand-5: #c98f5e; --mantine-color-brand-6: #c98f5e; --mantine-color-brand-7: #d5a881; --mantine-color-blue-0: rgba(201, 143, 94, 0.13); --mantine-color-blue-4: #d5a881; --mantine-color-blue-5: #c98f5e; --mantine-color-blue-6: #c98f5e; --mantine-color-blue-8: #d5a881; --mantine-color-blue-light: rgba(201, 143, 94, 0.13); --mantine-color-blue-filled: #c98f5e; --mantine-color-green-5: #70b787; --mantine-color-green-6: #70b787; --mantine-color-green-filled: #70b787; --mantine-color-yellow-5: #d6a146; --mantine-color-yellow-6: #d6a146; --mantine-color-yellow-8: #d6a146; --mantine-color-yellow-filled: #d6a146; --mantine-color-red-5: #cf6a5c; --mantine-color-red-6: #cf6a5c; --mantine-color-red-filled: #cf6a5c; --surface-card: #18100c; --surface-muted: #211712; --border-subtle: rgba(201, 143, 94, 0.18); --color-body: #100a08; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="reading"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="reading"] .sd-navbar, :root[data-context-mode="full"][data-context="reading"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="reading"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="reading"] .mantine-Card-root, :root[data-context-mode="full"][data-context="reading"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="reading"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="reading"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="reading"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="movies"] { --ctx-accent: #c9a961; --ctx-accent-hover: #d5bc84; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="movies"] { --ctx-accent: #816c3e; --ctx-accent-hover: #7c6d4d; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="movies"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="movies"] { --color-gray-50: #f0e8dc; --color-gray-100: #f0e8dc; --color-gray-200: #b4aea5; --color-gray-300: #b4aea5; --color-gray-400: #8b857f; --color-gray-500: #8b857f; --color-gray-600: rgba(201, 169, 97, 0.34); --color-gray-700: #1a1316; --color-gray-800: #120d0f; --color-gray-900: #0a0708; --color-gray-950: #0a0708; --color-blue-50: rgba(201, 169, 97, 0.13); --color-blue-100: rgba(201, 169, 97, 0.13); --color-blue-200: rgba(201, 169, 97, 0.13); --color-blue-300: #d5bc84; --color-blue-400: #d5bc84; --color-blue-500: #c9a961; --color-blue-600: #c9a961; --color-blue-700: #c9a961; --color-blue-800: #c9a961; --color-blue-900: #c9a961; --color-blue-950: #c9a961; --color-red-50: color-mix(in oklab, #cf6d5d 12%, transparent); --color-red-100: color-mix(in oklab, #cf6d5d 12%, transparent); --color-red-200: color-mix(in oklab, #cf6d5d 22%, transparent); --color-red-300: #cf6d5d; --color-red-400: #cf6d5d; --color-red-500: #cf6d5d; --color-red-600: #cf6d5d; --color-red-700: #cf6d5d; --color-red-800: #cf6d5d; --color-red-900: #cf6d5d; --color-red-950: #cf6d5d; --color-rose-50: color-mix(in oklab, #cf6d5d 12%, transparent); --color-rose-100: color-mix(in oklab, #cf6d5d 12%, transparent); --color-rose-200: color-mix(in oklab, #cf6d5d 22%, transparent); --color-rose-300: #cf6d5d; --color-rose-400: #cf6d5d; --color-rose-500: #cf6d5d; --color-rose-600: #cf6d5d; --color-rose-700: #cf6d5d; --color-rose-800: #cf6d5d; --color-rose-900: #cf6d5d; --color-rose-950: #cf6d5d; --color-green-50: color-mix(in oklab, #70bb88 12%, transparent); --color-green-100: color-mix(in oklab, #70bb88 12%, transparent); --color-green-200: color-mix(in oklab, #70bb88 22%, transparent); --color-green-300: #70bb88; --color-green-400: #70bb88; --color-green-500: #70bb88; --color-green-600: #70bb88; --color-green-700: #70bb88; --color-green-800: #70bb88; --color-green-900: #70bb88; --color-green-950: #70bb88; --color-emerald-50: color-mix(in oklab, #70bb88 12%, transparent); --color-emerald-100: color-mix(in oklab, #70bb88 12%, transparent); --color-emerald-200: color-mix(in oklab, #70bb88 22%, transparent); --color-emerald-300: #70bb88; --color-emerald-400: #70bb88; --color-emerald-500: #70bb88; --color-emerald-600: #70bb88; --color-emerald-700: #70bb88; --color-emerald-800: #70bb88; --color-emerald-900: #70bb88; --color-emerald-950: #70bb88; --color-yellow-50: color-mix(in oklab, #d6a546 12%, transparent); --color-yellow-100: color-mix(in oklab, #d6a546 12%, transparent); --color-yellow-200: color-mix(in oklab, #d6a546 22%, transparent); --color-yellow-300: #d6a546; --color-yellow-400: #d6a546; --color-yellow-500: #d6a546; --color-yellow-600: #d6a546; --color-yellow-700: #d6a546; --color-yellow-800: #d6a546; --color-yellow-900: #d6a546; --color-yellow-950: #d6a546; --color-amber-50: color-mix(in oklab, #d6a546 12%, transparent); --color-amber-100: color-mix(in oklab, #d6a546 12%, transparent); --color-amber-200: color-mix(in oklab, #d6a546 22%, transparent); --color-amber-300: #d6a546; --color-amber-400: #d6a546; --color-amber-500: #d6a546; --color-amber-600: #d6a546; --color-amber-700: #d6a546; --color-amber-800: #d6a546; --color-amber-900: #d6a546; --color-amber-950: #d6a546; --color-orange-50: color-mix(in oklab, #d6a546 12%, transparent); --color-orange-100: color-mix(in oklab, #d6a546 12%, transparent); --color-orange-200: color-mix(in oklab, #d6a546 22%, transparent); --color-orange-300: #d6a546; --color-orange-400: #d6a546; --color-orange-500: #d6a546; --color-orange-600: #d6a546; --color-orange-700: #d6a546; --color-orange-800: #d6a546; --color-orange-900: #d6a546; --color-orange-950: #d6a546; --lo-background: #0a0708; --lo-surface: #120d0f; --lo-surface-elevated: #1a1316; --lo-text-primary: #f0e8dc; --lo-text-secondary: #b4aea5; --lo-text-muted: #8b857f; --lo-border: rgba(201, 169, 97, 0.18); --lo-border-strong: rgba(201, 169, 97, 0.34); --lo-accent: #c9a961; --lo-accent-hover: #d5bc84; --lo-accent-subtle: rgba(201, 169, 97, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #70bb88; --lo-warning: #d6a546; --lo-danger: #cf6d5d; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0a0708; --mantine-color-text: #f0e8dc; --mantine-color-dimmed: #8b857f; --mantine-color-default: #120d0f; --mantine-color-default-hover: #1a1316; --mantine-color-default-color: #f0e8dc; --mantine-color-default-border: rgba(201, 169, 97, 0.18); --mantine-color-placeholder: #8b857f; --mantine-color-anchor: #c9a961; --mantine-color-error: #cf6d5d; --mantine-primary-color-filled: #c9a961; --mantine-primary-color-filled-hover: #d5bc84; --mantine-primary-color-light: rgba(201, 169, 97, 0.13); --mantine-primary-color-light-hover: rgba(201, 169, 97, 0.13); --mantine-primary-color-light-color: #c9a961; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f0e8dc; --mantine-color-dark-1: #b4aea5; --mantine-color-dark-2: #b4aea5; --mantine-color-dark-3: #8b857f; --mantine-color-dark-4: rgba(201, 169, 97, 0.18); --mantine-color-dark-5: #1a1316; --mantine-color-dark-6: #120d0f; --mantine-color-dark-7: #120d0f; --mantine-color-dark-8: #0a0708; --mantine-color-dark-9: #0a0708; --mantine-color-gray-0: #1a1316; --mantine-color-gray-1: #120d0f; --mantine-color-gray-2: rgba(201, 169, 97, 0.18); --mantine-color-gray-3: rgba(201, 169, 97, 0.18); --mantine-color-gray-4: #8b857f; --mantine-color-gray-5: #8b857f; --mantine-color-gray-6: #b4aea5; --mantine-color-gray-7: #b4aea5; --mantine-color-gray-8: #f0e8dc; --mantine-color-gray-9: #f0e8dc; --mantine-color-brand-light: rgba(201, 169, 97, 0.13); --mantine-color-brand-filled: #c9a961; --mantine-color-brand-filled-hover: #d5bc84; --mantine-color-brand-4: #d5bc84; --mantine-color-brand-5: #c9a961; --mantine-color-brand-6: #c9a961; --mantine-color-brand-7: #d5bc84; --mantine-color-blue-0: rgba(201, 169, 97, 0.13); --mantine-color-blue-4: #d5bc84; --mantine-color-blue-5: #c9a961; --mantine-color-blue-6: #c9a961; --mantine-color-blue-8: #d5bc84; --mantine-color-blue-light: rgba(201, 169, 97, 0.13); --mantine-color-blue-filled: #c9a961; --mantine-color-green-5: #70bb88; --mantine-color-green-6: #70bb88; --mantine-color-green-filled: #70bb88; --mantine-color-yellow-5: #d6a546; --mantine-color-yellow-6: #d6a546; --mantine-color-yellow-8: #d6a546; --mantine-color-yellow-filled: #d6a546; --mantine-color-red-5: #cf6d5d; --mantine-color-red-6: #cf6d5d; --mantine-color-red-filled: #cf6d5d; --surface-card: #120d0f; --surface-muted: #1a1316; --border-subtle: rgba(201, 169, 97, 0.18); --color-body: #0a0708; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="movies"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="movies"] .sd-navbar, :root[data-context-mode="full"][data-context="movies"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="movies"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="movies"] .mantine-Card-root, :root[data-context-mode="full"][data-context="movies"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="movies"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="movies"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="movies"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="music"] { --ctx-accent: #a274d0; --ctx-accent-hover: #b693da; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="music"] { --ctx-accent: #855fab; --ctx-accent-hover: #7c6494; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="music"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="music"] { --color-gray-50: #ebe4f4; --color-gray-100: #ebe4f4; --color-gray-200: #b1abb9; --color-gray-300: #b1abb9; --color-gray-400: #888391; --color-gray-500: #888391; --color-gray-600: rgba(162, 116, 208, 0.34); --color-gray-700: #191428; --color-gray-800: #110d1c; --color-gray-900: #0a0712; --color-gray-950: #0a0712; --color-blue-50: rgba(162, 116, 208, 0.13); --color-blue-100: rgba(162, 116, 208, 0.13); --color-blue-200: rgba(162, 116, 208, 0.13); --color-blue-300: #b693da; --color-blue-400: #b693da; --color-blue-500: #a274d0; --color-blue-600: #a274d0; --color-blue-700: #a274d0; --color-blue-800: #a274d0; --color-blue-900: #a274d0; --color-blue-950: #a274d0; --color-red-50: color-mix(in oklab, #ca676a 12%, transparent); --color-red-100: color-mix(in oklab, #ca676a 12%, transparent); --color-red-200: color-mix(in oklab, #ca676a 22%, transparent); --color-red-300: #ca676a; --color-red-400: #ca676a; --color-red-500: #ca676a; --color-red-600: #ca676a; --color-red-700: #ca676a; --color-red-800: #ca676a; --color-red-900: #ca676a; --color-red-950: #ca676a; --color-rose-50: color-mix(in oklab, #ca676a 12%, transparent); --color-rose-100: color-mix(in oklab, #ca676a 12%, transparent); --color-rose-200: color-mix(in oklab, #ca676a 22%, transparent); --color-rose-300: #ca676a; --color-rose-400: #ca676a; --color-rose-500: #ca676a; --color-rose-600: #ca676a; --color-rose-700: #ca676a; --color-rose-800: #ca676a; --color-rose-900: #ca676a; --color-rose-950: #ca676a; --color-green-50: color-mix(in oklab, #6ab399 12%, transparent); --color-green-100: color-mix(in oklab, #6ab399 12%, transparent); --color-green-200: color-mix(in oklab, #6ab399 22%, transparent); --color-green-300: #6ab399; --color-green-400: #6ab399; --color-green-500: #6ab399; --color-green-600: #6ab399; --color-green-700: #6ab399; --color-green-800: #6ab399; --color-green-900: #6ab399; --color-green-950: #6ab399; --color-emerald-50: color-mix(in oklab, #6ab399 12%, transparent); --color-emerald-100: color-mix(in oklab, #6ab399 12%, transparent); --color-emerald-200: color-mix(in oklab, #6ab399 22%, transparent); --color-emerald-300: #6ab399; --color-emerald-400: #6ab399; --color-emerald-500: #6ab399; --color-emerald-600: #6ab399; --color-emerald-700: #6ab399; --color-emerald-800: #6ab399; --color-emerald-900: #6ab399; --color-emerald-950: #6ab399; --color-yellow-50: color-mix(in oklab, #d09c58 12%, transparent); --color-yellow-100: color-mix(in oklab, #d09c58 12%, transparent); --color-yellow-200: color-mix(in oklab, #d09c58 22%, transparent); --color-yellow-300: #d09c58; --color-yellow-400: #d09c58; --color-yellow-500: #d09c58; --color-yellow-600: #d09c58; --color-yellow-700: #d09c58; --color-yellow-800: #d09c58; --color-yellow-900: #d09c58; --color-yellow-950: #d09c58; --color-amber-50: color-mix(in oklab, #d09c58 12%, transparent); --color-amber-100: color-mix(in oklab, #d09c58 12%, transparent); --color-amber-200: color-mix(in oklab, #d09c58 22%, transparent); --color-amber-300: #d09c58; --color-amber-400: #d09c58; --color-amber-500: #d09c58; --color-amber-600: #d09c58; --color-amber-700: #d09c58; --color-amber-800: #d09c58; --color-amber-900: #d09c58; --color-amber-950: #d09c58; --color-orange-50: color-mix(in oklab, #d09c58 12%, transparent); --color-orange-100: color-mix(in oklab, #d09c58 12%, transparent); --color-orange-200: color-mix(in oklab, #d09c58 22%, transparent); --color-orange-300: #d09c58; --color-orange-400: #d09c58; --color-orange-500: #d09c58; --color-orange-600: #d09c58; --color-orange-700: #d09c58; --color-orange-800: #d09c58; --color-orange-900: #d09c58; --color-orange-950: #d09c58; --lo-background: #0a0712; --lo-surface: #110d1c; --lo-surface-elevated: #191428; --lo-text-primary: #ebe4f4; --lo-text-secondary: #b1abb9; --lo-text-muted: #888391; --lo-border: rgba(162, 116, 208, 0.18); --lo-border-strong: rgba(162, 116, 208, 0.34); --lo-accent: #a274d0; --lo-accent-hover: #b693da; --lo-accent-subtle: rgba(162, 116, 208, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6ab399; --lo-warning: #d09c58; --lo-danger: #ca676a; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0a0712; --mantine-color-text: #ebe4f4; --mantine-color-dimmed: #888391; --mantine-color-default: #110d1c; --mantine-color-default-hover: #191428; --mantine-color-default-color: #ebe4f4; --mantine-color-default-border: rgba(162, 116, 208, 0.18); --mantine-color-placeholder: #888391; --mantine-color-anchor: #a274d0; --mantine-color-error: #ca676a; --mantine-primary-color-filled: #a274d0; --mantine-primary-color-filled-hover: #b693da; --mantine-primary-color-light: rgba(162, 116, 208, 0.13); --mantine-primary-color-light-hover: rgba(162, 116, 208, 0.13); --mantine-primary-color-light-color: #a274d0; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #ebe4f4; --mantine-color-dark-1: #b1abb9; --mantine-color-dark-2: #b1abb9; --mantine-color-dark-3: #888391; --mantine-color-dark-4: rgba(162, 116, 208, 0.18); --mantine-color-dark-5: #191428; --mantine-color-dark-6: #110d1c; --mantine-color-dark-7: #110d1c; --mantine-color-dark-8: #0a0712; --mantine-color-dark-9: #0a0712; --mantine-color-gray-0: #191428; --mantine-color-gray-1: #110d1c; --mantine-color-gray-2: rgba(162, 116, 208, 0.18); --mantine-color-gray-3: rgba(162, 116, 208, 0.18); --mantine-color-gray-4: #888391; --mantine-color-gray-5: #888391; --mantine-color-gray-6: #b1abb9; --mantine-color-gray-7: #b1abb9; --mantine-color-gray-8: #ebe4f4; --mantine-color-gray-9: #ebe4f4; --mantine-color-brand-light: rgba(162, 116, 208, 0.13); --mantine-color-brand-filled: #a274d0; --mantine-color-brand-filled-hover: #b693da; --mantine-color-brand-4: #b693da; --mantine-color-brand-5: #a274d0; --mantine-color-brand-6: #a274d0; --mantine-color-brand-7: #b693da; --mantine-color-blue-0: rgba(162, 116, 208, 0.13); --mantine-color-blue-4: #b693da; --mantine-color-blue-5: #a274d0; --mantine-color-blue-6: #a274d0; --mantine-color-blue-8: #b693da; --mantine-color-blue-light: rgba(162, 116, 208, 0.13); --mantine-color-blue-filled: #a274d0; --mantine-color-green-5: #6ab399; --mantine-color-green-6: #6ab399; --mantine-color-green-filled: #6ab399; --mantine-color-yellow-5: #d09c58; --mantine-color-yellow-6: #d09c58; --mantine-color-yellow-8: #d09c58; --mantine-color-yellow-filled: #d09c58; --mantine-color-red-5: #ca676a; --mantine-color-red-6: #ca676a; --mantine-color-red-filled: #ca676a; --surface-card: #110d1c; --surface-muted: #191428; --border-subtle: rgba(162, 116, 208, 0.18); --color-body: #0a0712; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="music"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="music"] .sd-navbar, :root[data-context-mode="full"][data-context="music"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="music"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="music"] .mantine-Card-root, :root[data-context-mode="full"][data-context="music"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="music"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="music"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="music"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="discovery"] { --ctx-accent: #7d8fe0; --ctx-accent-hover: #9aa8e7; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="discovery"] { --ctx-accent: #5d6aa6; --ctx-accent-hover: #636c94; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="discovery"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="discovery"] { --color-gray-50: #e6e9f6; --color-gray-100: #e6e9f6; --color-gray-200: #acafbb; --color-gray-300: #acafbb; --color-gray-400: #848792; --color-gray-500: #848792; --color-gray-600: rgba(125, 143, 224, 0.34); --color-gray-700: #161b2b; --color-gray-800: #0f121e; --color-gray-900: #080a12; --color-gray-950: #080a12; --color-blue-50: rgba(125, 143, 224, 0.13); --color-blue-100: rgba(125, 143, 224, 0.13); --color-blue-200: rgba(125, 143, 224, 0.13); --color-blue-300: #9aa8e7; --color-blue-400: #9aa8e7; --color-blue-500: #7d8fe0; --color-blue-600: #7d8fe0; --color-blue-700: #7d8fe0; --color-blue-800: #7d8fe0; --color-blue-900: #7d8fe0; --color-blue-950: #7d8fe0; --color-red-50: color-mix(in oklab, #c66a6c 12%, transparent); --color-red-100: color-mix(in oklab, #c66a6c 12%, transparent); --color-red-200: color-mix(in oklab, #c66a6c 22%, transparent); --color-red-300: #c66a6c; --color-red-400: #c66a6c; --color-red-500: #c66a6c; --color-red-600: #c66a6c; --color-red-700: #c66a6c; --color-red-800: #c66a6c; --color-red-900: #c66a6c; --color-red-950: #c66a6c; --color-rose-50: color-mix(in oklab, #c66a6c 12%, transparent); --color-rose-100: color-mix(in oklab, #c66a6c 12%, transparent); --color-rose-200: color-mix(in oklab, #c66a6c 22%, transparent); --color-rose-300: #c66a6c; --color-rose-400: #c66a6c; --color-rose-500: #c66a6c; --color-rose-600: #c66a6c; --color-rose-700: #c66a6c; --color-rose-800: #c66a6c; --color-rose-900: #c66a6c; --color-rose-950: #c66a6c; --color-green-50: color-mix(in oklab, #64b79c 12%, transparent); --color-green-100: color-mix(in oklab, #64b79c 12%, transparent); --color-green-200: color-mix(in oklab, #64b79c 22%, transparent); --color-green-300: #64b79c; --color-green-400: #64b79c; --color-green-500: #64b79c; --color-green-600: #64b79c; --color-green-700: #64b79c; --color-green-800: #64b79c; --color-green-900: #64b79c; --color-green-950: #64b79c; --color-emerald-50: color-mix(in oklab, #64b79c 12%, transparent); --color-emerald-100: color-mix(in oklab, #64b79c 12%, transparent); --color-emerald-200: color-mix(in oklab, #64b79c 22%, transparent); --color-emerald-300: #64b79c; --color-emerald-400: #64b79c; --color-emerald-500: #64b79c; --color-emerald-600: #64b79c; --color-emerald-700: #64b79c; --color-emerald-800: #64b79c; --color-emerald-900: #64b79c; --color-emerald-950: #64b79c; --color-yellow-50: color-mix(in oklab, #caa15a 12%, transparent); --color-yellow-100: color-mix(in oklab, #caa15a 12%, transparent); --color-yellow-200: color-mix(in oklab, #caa15a 22%, transparent); --color-yellow-300: #caa15a; --color-yellow-400: #caa15a; --color-yellow-500: #caa15a; --color-yellow-600: #caa15a; --color-yellow-700: #caa15a; --color-yellow-800: #caa15a; --color-yellow-900: #caa15a; --color-yellow-950: #caa15a; --color-amber-50: color-mix(in oklab, #caa15a 12%, transparent); --color-amber-100: color-mix(in oklab, #caa15a 12%, transparent); --color-amber-200: color-mix(in oklab, #caa15a 22%, transparent); --color-amber-300: #caa15a; --color-amber-400: #caa15a; --color-amber-500: #caa15a; --color-amber-600: #caa15a; --color-amber-700: #caa15a; --color-amber-800: #caa15a; --color-amber-900: #caa15a; --color-amber-950: #caa15a; --color-orange-50: color-mix(in oklab, #caa15a 12%, transparent); --color-orange-100: color-mix(in oklab, #caa15a 12%, transparent); --color-orange-200: color-mix(in oklab, #caa15a 22%, transparent); --color-orange-300: #caa15a; --color-orange-400: #caa15a; --color-orange-500: #caa15a; --color-orange-600: #caa15a; --color-orange-700: #caa15a; --color-orange-800: #caa15a; --color-orange-900: #caa15a; --color-orange-950: #caa15a; --lo-background: #080a12; --lo-surface: #0f121e; --lo-surface-elevated: #161b2b; --lo-text-primary: #e6e9f6; --lo-text-secondary: #acafbb; --lo-text-muted: #848792; --lo-border: rgba(125, 143, 224, 0.18); --lo-border-strong: rgba(125, 143, 224, 0.34); --lo-accent: #7d8fe0; --lo-accent-hover: #9aa8e7; --lo-accent-subtle: rgba(125, 143, 224, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #64b79c; --lo-warning: #caa15a; --lo-danger: #c66a6c; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #080a12; --mantine-color-text: #e6e9f6; --mantine-color-dimmed: #848792; --mantine-color-default: #0f121e; --mantine-color-default-hover: #161b2b; --mantine-color-default-color: #e6e9f6; --mantine-color-default-border: rgba(125, 143, 224, 0.18); --mantine-color-placeholder: #848792; --mantine-color-anchor: #7d8fe0; --mantine-color-error: #c66a6c; --mantine-primary-color-filled: #7d8fe0; --mantine-primary-color-filled-hover: #9aa8e7; --mantine-primary-color-light: rgba(125, 143, 224, 0.13); --mantine-primary-color-light-hover: rgba(125, 143, 224, 0.13); --mantine-primary-color-light-color: #7d8fe0; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e6e9f6; --mantine-color-dark-1: #acafbb; --mantine-color-dark-2: #acafbb; --mantine-color-dark-3: #848792; --mantine-color-dark-4: rgba(125, 143, 224, 0.18); --mantine-color-dark-5: #161b2b; --mantine-color-dark-6: #0f121e; --mantine-color-dark-7: #0f121e; --mantine-color-dark-8: #080a12; --mantine-color-dark-9: #080a12; --mantine-color-gray-0: #161b2b; --mantine-color-gray-1: #0f121e; --mantine-color-gray-2: rgba(125, 143, 224, 0.18); --mantine-color-gray-3: rgba(125, 143, 224, 0.18); --mantine-color-gray-4: #848792; --mantine-color-gray-5: #848792; --mantine-color-gray-6: #acafbb; --mantine-color-gray-7: #acafbb; --mantine-color-gray-8: #e6e9f6; --mantine-color-gray-9: #e6e9f6; --mantine-color-brand-light: rgba(125, 143, 224, 0.13); --mantine-color-brand-filled: #7d8fe0; --mantine-color-brand-filled-hover: #9aa8e7; --mantine-color-brand-4: #9aa8e7; --mantine-color-brand-5: #7d8fe0; --mantine-color-brand-6: #7d8fe0; --mantine-color-brand-7: #9aa8e7; --mantine-color-blue-0: rgba(125, 143, 224, 0.13); --mantine-color-blue-4: #9aa8e7; --mantine-color-blue-5: #7d8fe0; --mantine-color-blue-6: #7d8fe0; --mantine-color-blue-8: #9aa8e7; --mantine-color-blue-light: rgba(125, 143, 224, 0.13); --mantine-color-blue-filled: #7d8fe0; --mantine-color-green-5: #64b79c; --mantine-color-green-6: #64b79c; --mantine-color-green-filled: #64b79c; --mantine-color-yellow-5: #caa15a; --mantine-color-yellow-6: #caa15a; --mantine-color-yellow-8: #caa15a; --mantine-color-yellow-filled: #caa15a; --mantine-color-red-5: #c66a6c; --mantine-color-red-6: #c66a6c; --mantine-color-red-filled: #c66a6c; --surface-card: #0f121e; --surface-muted: #161b2b; --border-subtle: rgba(125, 143, 224, 0.18); --color-body: #080a12; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="discovery"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="discovery"] .sd-navbar, :root[data-context-mode="full"][data-context="discovery"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="discovery"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="discovery"] .mantine-Card-root, :root[data-context-mode="full"][data-context="discovery"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="discovery"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="discovery"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="discovery"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="travel"] { --ctx-accent: #c08a45; --ctx-accent-hover: #cea46e; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="travel"] { --ctx-accent: #8e6633; --ctx-accent-hover: #846946; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="travel"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="travel"] { --color-gray-50: #ede7d6; --color-gray-100: #ede7d6; --color-gray-200: #b2afa1; --color-gray-300: #b2afa1; --color-gray-400: #8a887c; --color-gray-500: #8a887c; --color-gray-600: rgba(192, 138, 69, 0.34); --color-gray-700: #1a2018; --color-gray-800: #121710; --color-gray-900: #0b0e0a; --color-gray-950: #0b0e0a; --color-blue-50: rgba(192, 138, 69, 0.13); --color-blue-100: rgba(192, 138, 69, 0.13); --color-blue-200: rgba(192, 138, 69, 0.13); --color-blue-300: #cea46e; --color-blue-400: #cea46e; --color-blue-500: #c08a45; --color-blue-600: #c08a45; --color-blue-700: #c08a45; --color-blue-800: #c08a45; --color-blue-900: #c08a45; --color-blue-950: #c08a45; --color-red-50: color-mix(in oklab, #ce6959 12%, transparent); --color-red-100: color-mix(in oklab, #ce6959 12%, transparent); --color-red-200: color-mix(in oklab, #ce6959 22%, transparent); --color-red-300: #ce6959; --color-red-400: #ce6959; --color-red-500: #ce6959; --color-red-600: #ce6959; --color-red-700: #ce6959; --color-red-800: #ce6959; --color-red-900: #ce6959; --color-red-950: #ce6959; --color-rose-50: color-mix(in oklab, #ce6959 12%, transparent); --color-rose-100: color-mix(in oklab, #ce6959 12%, transparent); --color-rose-200: color-mix(in oklab, #ce6959 22%, transparent); --color-rose-300: #ce6959; --color-rose-400: #ce6959; --color-rose-500: #ce6959; --color-rose-600: #ce6959; --color-rose-700: #ce6959; --color-rose-800: #ce6959; --color-rose-900: #ce6959; --color-rose-950: #ce6959; --color-green-50: color-mix(in oklab, #6fb783 12%, transparent); --color-green-100: color-mix(in oklab, #6fb783 12%, transparent); --color-green-200: color-mix(in oklab, #6fb783 22%, transparent); --color-green-300: #6fb783; --color-green-400: #6fb783; --color-green-500: #6fb783; --color-green-600: #6fb783; --color-green-700: #6fb783; --color-green-800: #6fb783; --color-green-900: #6fb783; --color-green-950: #6fb783; --color-emerald-50: color-mix(in oklab, #6fb783 12%, transparent); --color-emerald-100: color-mix(in oklab, #6fb783 12%, transparent); --color-emerald-200: color-mix(in oklab, #6fb783 22%, transparent); --color-emerald-300: #6fb783; --color-emerald-400: #6fb783; --color-emerald-500: #6fb783; --color-emerald-600: #6fb783; --color-emerald-700: #6fb783; --color-emerald-800: #6fb783; --color-emerald-900: #6fb783; --color-emerald-950: #6fb783; --color-yellow-50: color-mix(in oklab, #d5a042 12%, transparent); --color-yellow-100: color-mix(in oklab, #d5a042 12%, transparent); --color-yellow-200: color-mix(in oklab, #d5a042 22%, transparent); --color-yellow-300: #d5a042; --color-yellow-400: #d5a042; --color-yellow-500: #d5a042; --color-yellow-600: #d5a042; --color-yellow-700: #d5a042; --color-yellow-800: #d5a042; --color-yellow-900: #d5a042; --color-yellow-950: #d5a042; --color-amber-50: color-mix(in oklab, #d5a042 12%, transparent); --color-amber-100: color-mix(in oklab, #d5a042 12%, transparent); --color-amber-200: color-mix(in oklab, #d5a042 22%, transparent); --color-amber-300: #d5a042; --color-amber-400: #d5a042; --color-amber-500: #d5a042; --color-amber-600: #d5a042; --color-amber-700: #d5a042; --color-amber-800: #d5a042; --color-amber-900: #d5a042; --color-amber-950: #d5a042; --color-orange-50: color-mix(in oklab, #d5a042 12%, transparent); --color-orange-100: color-mix(in oklab, #d5a042 12%, transparent); --color-orange-200: color-mix(in oklab, #d5a042 22%, transparent); --color-orange-300: #d5a042; --color-orange-400: #d5a042; --color-orange-500: #d5a042; --color-orange-600: #d5a042; --color-orange-700: #d5a042; --color-orange-800: #d5a042; --color-orange-900: #d5a042; --color-orange-950: #d5a042; --lo-background: #0b0e0a; --lo-surface: #121710; --lo-surface-elevated: #1a2018; --lo-text-primary: #ede7d6; --lo-text-secondary: #b2afa1; --lo-text-muted: #8a887c; --lo-border: rgba(192, 138, 69, 0.18); --lo-border-strong: rgba(192, 138, 69, 0.34); --lo-accent: #c08a45; --lo-accent-hover: #cea46e; --lo-accent-subtle: rgba(192, 138, 69, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6fb783; --lo-warning: #d5a042; --lo-danger: #ce6959; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0b0e0a; --mantine-color-text: #ede7d6; --mantine-color-dimmed: #8a887c; --mantine-color-default: #121710; --mantine-color-default-hover: #1a2018; --mantine-color-default-color: #ede7d6; --mantine-color-default-border: rgba(192, 138, 69, 0.18); --mantine-color-placeholder: #8a887c; --mantine-color-anchor: #c08a45; --mantine-color-error: #ce6959; --mantine-primary-color-filled: #c08a45; --mantine-primary-color-filled-hover: #cea46e; --mantine-primary-color-light: rgba(192, 138, 69, 0.13); --mantine-primary-color-light-hover: rgba(192, 138, 69, 0.13); --mantine-primary-color-light-color: #c08a45; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #ede7d6; --mantine-color-dark-1: #b2afa1; --mantine-color-dark-2: #b2afa1; --mantine-color-dark-3: #8a887c; --mantine-color-dark-4: rgba(192, 138, 69, 0.18); --mantine-color-dark-5: #1a2018; --mantine-color-dark-6: #121710; --mantine-color-dark-7: #121710; --mantine-color-dark-8: #0b0e0a; --mantine-color-dark-9: #0b0e0a; --mantine-color-gray-0: #1a2018; --mantine-color-gray-1: #121710; --mantine-color-gray-2: rgba(192, 138, 69, 0.18); --mantine-color-gray-3: rgba(192, 138, 69, 0.18); --mantine-color-gray-4: #8a887c; --mantine-color-gray-5: #8a887c; --mantine-color-gray-6: #b2afa1; --mantine-color-gray-7: #b2afa1; --mantine-color-gray-8: #ede7d6; --mantine-color-gray-9: #ede7d6; --mantine-color-brand-light: rgba(192, 138, 69, 0.13); --mantine-color-brand-filled: #c08a45; --mantine-color-brand-filled-hover: #cea46e; --mantine-color-brand-4: #cea46e; --mantine-color-brand-5: #c08a45; --mantine-color-brand-6: #c08a45; --mantine-color-brand-7: #cea46e; --mantine-color-blue-0: rgba(192, 138, 69, 0.13); --mantine-color-blue-4: #cea46e; --mantine-color-blue-5: #c08a45; --mantine-color-blue-6: #c08a45; --mantine-color-blue-8: #cea46e; --mantine-color-blue-light: rgba(192, 138, 69, 0.13); --mantine-color-blue-filled: #c08a45; --mantine-color-green-5: #6fb783; --mantine-color-green-6: #6fb783; --mantine-color-green-filled: #6fb783; --mantine-color-yellow-5: #d5a042; --mantine-color-yellow-6: #d5a042; --mantine-color-yellow-8: #d5a042; --mantine-color-yellow-filled: #d5a042; --mantine-color-red-5: #ce6959; --mantine-color-red-6: #ce6959; --mantine-color-red-filled: #ce6959; --surface-card: #121710; --surface-muted: #1a2018; --border-subtle: rgba(192, 138, 69, 0.18); --color-body: #0b0e0a; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="travel"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="travel"] .sd-navbar, :root[data-context-mode="full"][data-context="travel"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="travel"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="travel"] .mantine-Card-root, :root[data-context-mode="full"][data-context="travel"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="travel"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="travel"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="travel"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="places"] { --ctx-accent: #b08a52; --ctx-accent-hover: #c1a478; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="places"] { --ctx-accent: #86693e; --ctx-accent-hover: #7f6c4f; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="places"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="places"] { --color-gray-50: #ebe4d4; --color-gray-100: #ebe4d4; --color-gray-200: #b1ac9f; --color-gray-300: #b1ac9f; --color-gray-400: #88857b; --color-gray-500: #88857b; --color-gray-600: rgba(176, 138, 82, 0.34); --color-gray-700: #1a1e16; --color-gray-800: #12150f; --color-gray-900: #0b0d09; --color-gray-950: #0b0d09; --color-blue-50: rgba(176, 138, 82, 0.13); --color-blue-100: rgba(176, 138, 82, 0.13); --color-blue-200: rgba(176, 138, 82, 0.13); --color-blue-300: #c1a478; --color-blue-400: #c1a478; --color-blue-500: #b08a52; --color-blue-600: #b08a52; --color-blue-700: #b08a52; --color-blue-800: #b08a52; --color-blue-900: #b08a52; --color-blue-950: #b08a52; --color-red-50: color-mix(in oklab, #cc695b 12%, transparent); --color-red-100: color-mix(in oklab, #cc695b 12%, transparent); --color-red-200: color-mix(in oklab, #cc695b 22%, transparent); --color-red-300: #cc695b; --color-red-400: #cc695b; --color-red-500: #cc695b; --color-red-600: #cc695b; --color-red-700: #cc695b; --color-red-800: #cc695b; --color-red-900: #cc695b; --color-red-950: #cc695b; --color-rose-50: color-mix(in oklab, #cc695b 12%, transparent); --color-rose-100: color-mix(in oklab, #cc695b 12%, transparent); --color-rose-200: color-mix(in oklab, #cc695b 22%, transparent); --color-rose-300: #cc695b; --color-rose-400: #cc695b; --color-rose-500: #cc695b; --color-rose-600: #cc695b; --color-rose-700: #cc695b; --color-rose-800: #cc695b; --color-rose-900: #cc695b; --color-rose-950: #cc695b; --color-green-50: color-mix(in oklab, #6cb785 12%, transparent); --color-green-100: color-mix(in oklab, #6cb785 12%, transparent); --color-green-200: color-mix(in oklab, #6cb785 22%, transparent); --color-green-300: #6cb785; --color-green-400: #6cb785; --color-green-500: #6cb785; --color-green-600: #6cb785; --color-green-700: #6cb785; --color-green-800: #6cb785; --color-green-900: #6cb785; --color-green-950: #6cb785; --color-emerald-50: color-mix(in oklab, #6cb785 12%, transparent); --color-emerald-100: color-mix(in oklab, #6cb785 12%, transparent); --color-emerald-200: color-mix(in oklab, #6cb785 22%, transparent); --color-emerald-300: #6cb785; --color-emerald-400: #6cb785; --color-emerald-500: #6cb785; --color-emerald-600: #6cb785; --color-emerald-700: #6cb785; --color-emerald-800: #6cb785; --color-emerald-900: #6cb785; --color-emerald-950: #6cb785; --color-yellow-50: color-mix(in oklab, #d2a044 12%, transparent); --color-yellow-100: color-mix(in oklab, #d2a044 12%, transparent); --color-yellow-200: color-mix(in oklab, #d2a044 22%, transparent); --color-yellow-300: #d2a044; --color-yellow-400: #d2a044; --color-yellow-500: #d2a044; --color-yellow-600: #d2a044; --color-yellow-700: #d2a044; --color-yellow-800: #d2a044; --color-yellow-900: #d2a044; --color-yellow-950: #d2a044; --color-amber-50: color-mix(in oklab, #d2a044 12%, transparent); --color-amber-100: color-mix(in oklab, #d2a044 12%, transparent); --color-amber-200: color-mix(in oklab, #d2a044 22%, transparent); --color-amber-300: #d2a044; --color-amber-400: #d2a044; --color-amber-500: #d2a044; --color-amber-600: #d2a044; --color-amber-700: #d2a044; --color-amber-800: #d2a044; --color-amber-900: #d2a044; --color-amber-950: #d2a044; --color-orange-50: color-mix(in oklab, #d2a044 12%, transparent); --color-orange-100: color-mix(in oklab, #d2a044 12%, transparent); --color-orange-200: color-mix(in oklab, #d2a044 22%, transparent); --color-orange-300: #d2a044; --color-orange-400: #d2a044; --color-orange-500: #d2a044; --color-orange-600: #d2a044; --color-orange-700: #d2a044; --color-orange-800: #d2a044; --color-orange-900: #d2a044; --color-orange-950: #d2a044; --lo-background: #0b0d09; --lo-surface: #12150f; --lo-surface-elevated: #1a1e16; --lo-text-primary: #ebe4d4; --lo-text-secondary: #b1ac9f; --lo-text-muted: #88857b; --lo-border: rgba(176, 138, 82, 0.18); --lo-border-strong: rgba(176, 138, 82, 0.34); --lo-accent: #b08a52; --lo-accent-hover: #c1a478; --lo-accent-subtle: rgba(176, 138, 82, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6cb785; --lo-warning: #d2a044; --lo-danger: #cc695b; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0b0d09; --mantine-color-text: #ebe4d4; --mantine-color-dimmed: #88857b; --mantine-color-default: #12150f; --mantine-color-default-hover: #1a1e16; --mantine-color-default-color: #ebe4d4; --mantine-color-default-border: rgba(176, 138, 82, 0.18); --mantine-color-placeholder: #88857b; --mantine-color-anchor: #b08a52; --mantine-color-error: #cc695b; --mantine-primary-color-filled: #b08a52; --mantine-primary-color-filled-hover: #c1a478; --mantine-primary-color-light: rgba(176, 138, 82, 0.13); --mantine-primary-color-light-hover: rgba(176, 138, 82, 0.13); --mantine-primary-color-light-color: #b08a52; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #ebe4d4; --mantine-color-dark-1: #b1ac9f; --mantine-color-dark-2: #b1ac9f; --mantine-color-dark-3: #88857b; --mantine-color-dark-4: rgba(176, 138, 82, 0.18); --mantine-color-dark-5: #1a1e16; --mantine-color-dark-6: #12150f; --mantine-color-dark-7: #12150f; --mantine-color-dark-8: #0b0d09; --mantine-color-dark-9: #0b0d09; --mantine-color-gray-0: #1a1e16; --mantine-color-gray-1: #12150f; --mantine-color-gray-2: rgba(176, 138, 82, 0.18); --mantine-color-gray-3: rgba(176, 138, 82, 0.18); --mantine-color-gray-4: #88857b; --mantine-color-gray-5: #88857b; --mantine-color-gray-6: #b1ac9f; --mantine-color-gray-7: #b1ac9f; --mantine-color-gray-8: #ebe4d4; --mantine-color-gray-9: #ebe4d4; --mantine-color-brand-light: rgba(176, 138, 82, 0.13); --mantine-color-brand-filled: #b08a52; --mantine-color-brand-filled-hover: #c1a478; --mantine-color-brand-4: #c1a478; --mantine-color-brand-5: #b08a52; --mantine-color-brand-6: #b08a52; --mantine-color-brand-7: #c1a478; --mantine-color-blue-0: rgba(176, 138, 82, 0.13); --mantine-color-blue-4: #c1a478; --mantine-color-blue-5: #b08a52; --mantine-color-blue-6: #b08a52; --mantine-color-blue-8: #c1a478; --mantine-color-blue-light: rgba(176, 138, 82, 0.13); --mantine-color-blue-filled: #b08a52; --mantine-color-green-5: #6cb785; --mantine-color-green-6: #6cb785; --mantine-color-green-filled: #6cb785; --mantine-color-yellow-5: #d2a044; --mantine-color-yellow-6: #d2a044; --mantine-color-yellow-8: #d2a044; --mantine-color-yellow-filled: #d2a044; --mantine-color-red-5: #cc695b; --mantine-color-red-6: #cc695b; --mantine-color-red-filled: #cc695b; --surface-card: #12150f; --surface-muted: #1a1e16; --border-subtle: rgba(176, 138, 82, 0.18); --color-body: #0b0d09; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="places"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="places"] .sd-navbar, :root[data-context-mode="full"][data-context="places"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="places"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="places"] .mantine-Card-root, :root[data-context-mode="full"][data-context="places"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="places"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="places"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="places"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="photos"] { --ctx-accent: #6fb8c9; --ctx-accent-hover: #8fc8d5; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="photos"] { --ctx-accent: #477681; --ctx-accent-hover: #53747c; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="photos"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="photos"] { --color-gray-50: #e4ecf3; --color-gray-100: #e4ecf3; --color-gray-200: #abb1b8; --color-gray-300: #abb1b8; --color-gray-400: #83898f; --color-gray-500: #83898f; --color-gray-600: rgba(111, 184, 201, 0.34); --color-gray-700: #151b28; --color-gray-800: #0e131c; --color-gray-900: #070a10; --color-gray-950: #070a10; --color-blue-50: rgba(111, 184, 201, 0.13); --color-blue-100: rgba(111, 184, 201, 0.13); --color-blue-200: rgba(111, 184, 201, 0.13); --color-blue-300: #8fc8d5; --color-blue-400: #8fc8d5; --color-blue-500: #6fb8c9; --color-blue-600: #6fb8c9; --color-blue-700: #6fb8c9; --color-blue-800: #6fb8c9; --color-blue-900: #6fb8c9; --color-blue-950: #6fb8c9; --color-red-50: color-mix(in oklab, #c46f69 12%, transparent); --color-red-100: color-mix(in oklab, #c46f69 12%, transparent); --color-red-200: color-mix(in oklab, #c46f69 22%, transparent); --color-red-300: #c46f69; --color-red-400: #c46f69; --color-red-500: #c46f69; --color-red-600: #c46f69; --color-red-700: #c46f69; --color-red-800: #c46f69; --color-red-900: #c46f69; --color-red-950: #c46f69; --color-rose-50: color-mix(in oklab, #c46f69 12%, transparent); --color-rose-100: color-mix(in oklab, #c46f69 12%, transparent); --color-rose-200: color-mix(in oklab, #c46f69 22%, transparent); --color-rose-300: #c46f69; --color-rose-400: #c46f69; --color-rose-500: #c46f69; --color-rose-600: #c46f69; --color-rose-700: #c46f69; --color-rose-800: #c46f69; --color-rose-900: #c46f69; --color-rose-950: #c46f69; --color-green-50: color-mix(in oklab, #62be98 12%, transparent); --color-green-100: color-mix(in oklab, #62be98 12%, transparent); --color-green-200: color-mix(in oklab, #62be98 22%, transparent); --color-green-300: #62be98; --color-green-400: #62be98; --color-green-500: #62be98; --color-green-600: #62be98; --color-green-700: #62be98; --color-green-800: #62be98; --color-green-900: #62be98; --color-green-950: #62be98; --color-emerald-50: color-mix(in oklab, #62be98 12%, transparent); --color-emerald-100: color-mix(in oklab, #62be98 12%, transparent); --color-emerald-200: color-mix(in oklab, #62be98 22%, transparent); --color-emerald-300: #62be98; --color-emerald-400: #62be98; --color-emerald-500: #62be98; --color-emerald-600: #62be98; --color-emerald-700: #62be98; --color-emerald-800: #62be98; --color-emerald-900: #62be98; --color-emerald-950: #62be98; --color-yellow-50: color-mix(in oklab, #c8a757 12%, transparent); --color-yellow-100: color-mix(in oklab, #c8a757 12%, transparent); --color-yellow-200: color-mix(in oklab, #c8a757 22%, transparent); --color-yellow-300: #c8a757; --color-yellow-400: #c8a757; --color-yellow-500: #c8a757; --color-yellow-600: #c8a757; --color-yellow-700: #c8a757; --color-yellow-800: #c8a757; --color-yellow-900: #c8a757; --color-yellow-950: #c8a757; --color-amber-50: color-mix(in oklab, #c8a757 12%, transparent); --color-amber-100: color-mix(in oklab, #c8a757 12%, transparent); --color-amber-200: color-mix(in oklab, #c8a757 22%, transparent); --color-amber-300: #c8a757; --color-amber-400: #c8a757; --color-amber-500: #c8a757; --color-amber-600: #c8a757; --color-amber-700: #c8a757; --color-amber-800: #c8a757; --color-amber-900: #c8a757; --color-amber-950: #c8a757; --color-orange-50: color-mix(in oklab, #c8a757 12%, transparent); --color-orange-100: color-mix(in oklab, #c8a757 12%, transparent); --color-orange-200: color-mix(in oklab, #c8a757 22%, transparent); --color-orange-300: #c8a757; --color-orange-400: #c8a757; --color-orange-500: #c8a757; --color-orange-600: #c8a757; --color-orange-700: #c8a757; --color-orange-800: #c8a757; --color-orange-900: #c8a757; --color-orange-950: #c8a757; --lo-background: #070a10; --lo-surface: #0e131c; --lo-surface-elevated: #151b28; --lo-text-primary: #e4ecf3; --lo-text-secondary: #abb1b8; --lo-text-muted: #83898f; --lo-border: rgba(111, 184, 201, 0.18); --lo-border-strong: rgba(111, 184, 201, 0.34); --lo-accent: #6fb8c9; --lo-accent-hover: #8fc8d5; --lo-accent-subtle: rgba(111, 184, 201, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #62be98; --lo-warning: #c8a757; --lo-danger: #c46f69; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #070a10; --mantine-color-text: #e4ecf3; --mantine-color-dimmed: #83898f; --mantine-color-default: #0e131c; --mantine-color-default-hover: #151b28; --mantine-color-default-color: #e4ecf3; --mantine-color-default-border: rgba(111, 184, 201, 0.18); --mantine-color-placeholder: #83898f; --mantine-color-anchor: #6fb8c9; --mantine-color-error: #c46f69; --mantine-primary-color-filled: #6fb8c9; --mantine-primary-color-filled-hover: #8fc8d5; --mantine-primary-color-light: rgba(111, 184, 201, 0.13); --mantine-primary-color-light-hover: rgba(111, 184, 201, 0.13); --mantine-primary-color-light-color: #6fb8c9; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e4ecf3; --mantine-color-dark-1: #abb1b8; --mantine-color-dark-2: #abb1b8; --mantine-color-dark-3: #83898f; --mantine-color-dark-4: rgba(111, 184, 201, 0.18); --mantine-color-dark-5: #151b28; --mantine-color-dark-6: #0e131c; --mantine-color-dark-7: #0e131c; --mantine-color-dark-8: #070a10; --mantine-color-dark-9: #070a10; --mantine-color-gray-0: #151b28; --mantine-color-gray-1: #0e131c; --mantine-color-gray-2: rgba(111, 184, 201, 0.18); --mantine-color-gray-3: rgba(111, 184, 201, 0.18); --mantine-color-gray-4: #83898f; --mantine-color-gray-5: #83898f; --mantine-color-gray-6: #abb1b8; --mantine-color-gray-7: #abb1b8; --mantine-color-gray-8: #e4ecf3; --mantine-color-gray-9: #e4ecf3; --mantine-color-brand-light: rgba(111, 184, 201, 0.13); --mantine-color-brand-filled: #6fb8c9; --mantine-color-brand-filled-hover: #8fc8d5; --mantine-color-brand-4: #8fc8d5; --mantine-color-brand-5: #6fb8c9; --mantine-color-brand-6: #6fb8c9; --mantine-color-brand-7: #8fc8d5; --mantine-color-blue-0: rgba(111, 184, 201, 0.13); --mantine-color-blue-4: #8fc8d5; --mantine-color-blue-5: #6fb8c9; --mantine-color-blue-6: #6fb8c9; --mantine-color-blue-8: #8fc8d5; --mantine-color-blue-light: rgba(111, 184, 201, 0.13); --mantine-color-blue-filled: #6fb8c9; --mantine-color-green-5: #62be98; --mantine-color-green-6: #62be98; --mantine-color-green-filled: #62be98; --mantine-color-yellow-5: #c8a757; --mantine-color-yellow-6: #c8a757; --mantine-color-yellow-8: #c8a757; --mantine-color-yellow-filled: #c8a757; --mantine-color-red-5: #c46f69; --mantine-color-red-6: #c46f69; --mantine-color-red-filled: #c46f69; --surface-card: #0e131c; --surface-muted: #151b28; --border-subtle: rgba(111, 184, 201, 0.18); --color-body: #070a10; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="photos"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="photos"] .sd-navbar, :root[data-context-mode="full"][data-context="photos"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="photos"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="photos"] .mantine-Card-root, :root[data-context-mode="full"][data-context="photos"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="photos"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="photos"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="photos"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="network"] { --ctx-accent: #6f9fd8; --ctx-accent-hover: #8fb4e1; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.8; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="network"] { --ctx-accent: #4e6f97; --ctx-accent-hover: #59708c; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="network"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="network"] { --color-gray-50: #e9ecf2; --color-gray-100: #e9ecf2; --color-gray-200: #afb1b6; --color-gray-300: #afb1b6; --color-gray-400: #86888d; --color-gray-500: #86888d; --color-gray-600: rgba(111, 159, 216, 0.34); --color-gray-700: #171a22; --color-gray-800: #101218; --color-gray-900: #08090d; --color-gray-950: #08090d; --color-blue-50: rgba(111, 159, 216, 0.13); --color-blue-100: rgba(111, 159, 216, 0.13); --color-blue-200: rgba(111, 159, 216, 0.13); --color-blue-300: #8fb4e1; --color-blue-400: #8fb4e1; --color-blue-500: #6f9fd8; --color-blue-600: #6f9fd8; --color-blue-700: #6f9fd8; --color-blue-800: #6f9fd8; --color-blue-900: #6f9fd8; --color-blue-950: #6f9fd8; --color-red-50: color-mix(in oklab, #c46c6b 12%, transparent); --color-red-100: color-mix(in oklab, #c46c6b 12%, transparent); --color-red-200: color-mix(in oklab, #c46c6b 22%, transparent); --color-red-300: #c46c6b; --color-red-400: #c46c6b; --color-red-500: #c46c6b; --color-red-600: #c46c6b; --color-red-700: #c46c6b; --color-red-800: #c46c6b; --color-red-900: #c46c6b; --color-red-950: #c46c6b; --color-rose-50: color-mix(in oklab, #c46c6b 12%, transparent); --color-rose-100: color-mix(in oklab, #c46c6b 12%, transparent); --color-rose-200: color-mix(in oklab, #c46c6b 22%, transparent); --color-rose-300: #c46c6b; --color-rose-400: #c46c6b; --color-rose-500: #c46c6b; --color-rose-600: #c46c6b; --color-rose-700: #c46c6b; --color-rose-800: #c46c6b; --color-rose-900: #c46c6b; --color-rose-950: #c46c6b; --color-green-50: color-mix(in oklab, #62ba9b 12%, transparent); --color-green-100: color-mix(in oklab, #62ba9b 12%, transparent); --color-green-200: color-mix(in oklab, #62ba9b 22%, transparent); --color-green-300: #62ba9b; --color-green-400: #62ba9b; --color-green-500: #62ba9b; --color-green-600: #62ba9b; --color-green-700: #62ba9b; --color-green-800: #62ba9b; --color-green-900: #62ba9b; --color-green-950: #62ba9b; --color-emerald-50: color-mix(in oklab, #62ba9b 12%, transparent); --color-emerald-100: color-mix(in oklab, #62ba9b 12%, transparent); --color-emerald-200: color-mix(in oklab, #62ba9b 22%, transparent); --color-emerald-300: #62ba9b; --color-emerald-400: #62ba9b; --color-emerald-500: #62ba9b; --color-emerald-600: #62ba9b; --color-emerald-700: #62ba9b; --color-emerald-800: #62ba9b; --color-emerald-900: #62ba9b; --color-emerald-950: #62ba9b; --color-yellow-50: color-mix(in oklab, #c8a359 12%, transparent); --color-yellow-100: color-mix(in oklab, #c8a359 12%, transparent); --color-yellow-200: color-mix(in oklab, #c8a359 22%, transparent); --color-yellow-300: #c8a359; --color-yellow-400: #c8a359; --color-yellow-500: #c8a359; --color-yellow-600: #c8a359; --color-yellow-700: #c8a359; --color-yellow-800: #c8a359; --color-yellow-900: #c8a359; --color-yellow-950: #c8a359; --color-amber-50: color-mix(in oklab, #c8a359 12%, transparent); --color-amber-100: color-mix(in oklab, #c8a359 12%, transparent); --color-amber-200: color-mix(in oklab, #c8a359 22%, transparent); --color-amber-300: #c8a359; --color-amber-400: #c8a359; --color-amber-500: #c8a359; --color-amber-600: #c8a359; --color-amber-700: #c8a359; --color-amber-800: #c8a359; --color-amber-900: #c8a359; --color-amber-950: #c8a359; --color-orange-50: color-mix(in oklab, #c8a359 12%, transparent); --color-orange-100: color-mix(in oklab, #c8a359 12%, transparent); --color-orange-200: color-mix(in oklab, #c8a359 22%, transparent); --color-orange-300: #c8a359; --color-orange-400: #c8a359; --color-orange-500: #c8a359; --color-orange-600: #c8a359; --color-orange-700: #c8a359; --color-orange-800: #c8a359; --color-orange-900: #c8a359; --color-orange-950: #c8a359; --lo-background: #08090d; --lo-surface: #101218; --lo-surface-elevated: #171a22; --lo-text-primary: #e9ecf2; --lo-text-secondary: #afb1b6; --lo-text-muted: #86888d; --lo-border: rgba(111, 159, 216, 0.18); --lo-border-strong: rgba(111, 159, 216, 0.34); --lo-accent: #6f9fd8; --lo-accent-hover: #8fb4e1; --lo-accent-subtle: rgba(111, 159, 216, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #62ba9b; --lo-warning: #c8a359; --lo-danger: #c46c6b; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #08090d; --mantine-color-text: #e9ecf2; --mantine-color-dimmed: #86888d; --mantine-color-default: #101218; --mantine-color-default-hover: #171a22; --mantine-color-default-color: #e9ecf2; --mantine-color-default-border: rgba(111, 159, 216, 0.18); --mantine-color-placeholder: #86888d; --mantine-color-anchor: #6f9fd8; --mantine-color-error: #c46c6b; --mantine-primary-color-filled: #6f9fd8; --mantine-primary-color-filled-hover: #8fb4e1; --mantine-primary-color-light: rgba(111, 159, 216, 0.13); --mantine-primary-color-light-hover: rgba(111, 159, 216, 0.13); --mantine-primary-color-light-color: #6f9fd8; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e9ecf2; --mantine-color-dark-1: #afb1b6; --mantine-color-dark-2: #afb1b6; --mantine-color-dark-3: #86888d; --mantine-color-dark-4: rgba(111, 159, 216, 0.18); --mantine-color-dark-5: #171a22; --mantine-color-dark-6: #101218; --mantine-color-dark-7: #101218; --mantine-color-dark-8: #08090d; --mantine-color-dark-9: #08090d; --mantine-color-gray-0: #171a22; --mantine-color-gray-1: #101218; --mantine-color-gray-2: rgba(111, 159, 216, 0.18); --mantine-color-gray-3: rgba(111, 159, 216, 0.18); --mantine-color-gray-4: #86888d; --mantine-color-gray-5: #86888d; --mantine-color-gray-6: #afb1b6; --mantine-color-gray-7: #afb1b6; --mantine-color-gray-8: #e9ecf2; --mantine-color-gray-9: #e9ecf2; --mantine-color-brand-light: rgba(111, 159, 216, 0.13); --mantine-color-brand-filled: #6f9fd8; --mantine-color-brand-filled-hover: #8fb4e1; --mantine-color-brand-4: #8fb4e1; --mantine-color-brand-5: #6f9fd8; --mantine-color-brand-6: #6f9fd8; --mantine-color-brand-7: #8fb4e1; --mantine-color-blue-0: rgba(111, 159, 216, 0.13); --mantine-color-blue-4: #8fb4e1; --mantine-color-blue-5: #6f9fd8; --mantine-color-blue-6: #6f9fd8; --mantine-color-blue-8: #8fb4e1; --mantine-color-blue-light: rgba(111, 159, 216, 0.13); --mantine-color-blue-filled: #6f9fd8; --mantine-color-green-5: #62ba9b; --mantine-color-green-6: #62ba9b; --mantine-color-green-filled: #62ba9b; --mantine-color-yellow-5: #c8a359; --mantine-color-yellow-6: #c8a359; --mantine-color-yellow-8: #c8a359; --mantine-color-yellow-filled: #c8a359; --mantine-color-red-5: #c46c6b; --mantine-color-red-6: #c46c6b; --mantine-color-red-filled: #c46c6b; --surface-card: #101218; --surface-muted: #171a22; --border-subtle: rgba(111, 159, 216, 0.18); --color-body: #08090d; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="network"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="network"] .sd-navbar, :root[data-context-mode="full"][data-context="network"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="network"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="network"] .mantine-Card-root, :root[data-context-mode="full"][data-context="network"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="network"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="network"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="network"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="timeline"] { --ctx-accent: #6fc3d8; --ctx-accent-hover: #8fd0e1; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="timeline"] { --ctx-accent: #437582; --ctx-accent-hover: #50747e; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="timeline"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="timeline"] { --color-gray-50: #e2ecf4; --color-gray-100: #e2ecf4; --color-gray-200: #a8b0b8; --color-gray-300: #a8b0b8; --color-gray-400: #80878e; --color-gray-500: #80878e; --color-gray-600: rgba(111, 195, 216, 0.34); --color-gray-700: #101724; --color-gray-800: #0a0f18; --color-gray-900: #04070d; --color-gray-950: #04070d; --color-blue-50: rgba(111, 195, 216, 0.13); --color-blue-100: rgba(111, 195, 216, 0.13); --color-blue-200: rgba(111, 195, 216, 0.13); --color-blue-300: #8fd0e1; --color-blue-400: #8fd0e1; --color-blue-500: #6fc3d8; --color-blue-600: #6fc3d8; --color-blue-700: #6fc3d8; --color-blue-800: #6fc3d8; --color-blue-900: #6fc3d8; --color-blue-950: #6fc3d8; --color-red-50: color-mix(in oklab, #c4706b 12%, transparent); --color-red-100: color-mix(in oklab, #c4706b 12%, transparent); --color-red-200: color-mix(in oklab, #c4706b 22%, transparent); --color-red-300: #c4706b; --color-red-400: #c4706b; --color-red-500: #c4706b; --color-red-600: #c4706b; --color-red-700: #c4706b; --color-red-800: #c4706b; --color-red-900: #c4706b; --color-red-950: #c4706b; --color-rose-50: color-mix(in oklab, #c4706b 12%, transparent); --color-rose-100: color-mix(in oklab, #c4706b 12%, transparent); --color-rose-200: color-mix(in oklab, #c4706b 22%, transparent); --color-rose-300: #c4706b; --color-rose-400: #c4706b; --color-rose-500: #c4706b; --color-rose-600: #c4706b; --color-rose-700: #c4706b; --color-rose-800: #c4706b; --color-rose-900: #c4706b; --color-rose-950: #c4706b; --color-green-50: color-mix(in oklab, #62c09b 12%, transparent); --color-green-100: color-mix(in oklab, #62c09b 12%, transparent); --color-green-200: color-mix(in oklab, #62c09b 22%, transparent); --color-green-300: #62c09b; --color-green-400: #62c09b; --color-green-500: #62c09b; --color-green-600: #62c09b; --color-green-700: #62c09b; --color-green-800: #62c09b; --color-green-900: #62c09b; --color-green-950: #62c09b; --color-emerald-50: color-mix(in oklab, #62c09b 12%, transparent); --color-emerald-100: color-mix(in oklab, #62c09b 12%, transparent); --color-emerald-200: color-mix(in oklab, #62c09b 22%, transparent); --color-emerald-300: #62c09b; --color-emerald-400: #62c09b; --color-emerald-500: #62c09b; --color-emerald-600: #62c09b; --color-emerald-700: #62c09b; --color-emerald-800: #62c09b; --color-emerald-900: #62c09b; --color-emerald-950: #62c09b; --color-yellow-50: color-mix(in oklab, #c8a959 12%, transparent); --color-yellow-100: color-mix(in oklab, #c8a959 12%, transparent); --color-yellow-200: color-mix(in oklab, #c8a959 22%, transparent); --color-yellow-300: #c8a959; --color-yellow-400: #c8a959; --color-yellow-500: #c8a959; --color-yellow-600: #c8a959; --color-yellow-700: #c8a959; --color-yellow-800: #c8a959; --color-yellow-900: #c8a959; --color-yellow-950: #c8a959; --color-amber-50: color-mix(in oklab, #c8a959 12%, transparent); --color-amber-100: color-mix(in oklab, #c8a959 12%, transparent); --color-amber-200: color-mix(in oklab, #c8a959 22%, transparent); --color-amber-300: #c8a959; --color-amber-400: #c8a959; --color-amber-500: #c8a959; --color-amber-600: #c8a959; --color-amber-700: #c8a959; --color-amber-800: #c8a959; --color-amber-900: #c8a959; --color-amber-950: #c8a959; --color-orange-50: color-mix(in oklab, #c8a959 12%, transparent); --color-orange-100: color-mix(in oklab, #c8a959 12%, transparent); --color-orange-200: color-mix(in oklab, #c8a959 22%, transparent); --color-orange-300: #c8a959; --color-orange-400: #c8a959; --color-orange-500: #c8a959; --color-orange-600: #c8a959; --color-orange-700: #c8a959; --color-orange-800: #c8a959; --color-orange-900: #c8a959; --color-orange-950: #c8a959; --lo-background: #04070d; --lo-surface: #0a0f18; --lo-surface-elevated: #101724; --lo-text-primary: #e2ecf4; --lo-text-secondary: #a8b0b8; --lo-text-muted: #80878e; --lo-border: rgba(111, 195, 216, 0.18); --lo-border-strong: rgba(111, 195, 216, 0.34); --lo-accent: #6fc3d8; --lo-accent-hover: #8fd0e1; --lo-accent-subtle: rgba(111, 195, 216, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #62c09b; --lo-warning: #c8a959; --lo-danger: #c4706b; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #04070d; --mantine-color-text: #e2ecf4; --mantine-color-dimmed: #80878e; --mantine-color-default: #0a0f18; --mantine-color-default-hover: #101724; --mantine-color-default-color: #e2ecf4; --mantine-color-default-border: rgba(111, 195, 216, 0.18); --mantine-color-placeholder: #80878e; --mantine-color-anchor: #6fc3d8; --mantine-color-error: #c4706b; --mantine-primary-color-filled: #6fc3d8; --mantine-primary-color-filled-hover: #8fd0e1; --mantine-primary-color-light: rgba(111, 195, 216, 0.13); --mantine-primary-color-light-hover: rgba(111, 195, 216, 0.13); --mantine-primary-color-light-color: #6fc3d8; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e2ecf4; --mantine-color-dark-1: #a8b0b8; --mantine-color-dark-2: #a8b0b8; --mantine-color-dark-3: #80878e; --mantine-color-dark-4: rgba(111, 195, 216, 0.18); --mantine-color-dark-5: #101724; --mantine-color-dark-6: #0a0f18; --mantine-color-dark-7: #0a0f18; --mantine-color-dark-8: #04070d; --mantine-color-dark-9: #04070d; --mantine-color-gray-0: #101724; --mantine-color-gray-1: #0a0f18; --mantine-color-gray-2: rgba(111, 195, 216, 0.18); --mantine-color-gray-3: rgba(111, 195, 216, 0.18); --mantine-color-gray-4: #80878e; --mantine-color-gray-5: #80878e; --mantine-color-gray-6: #a8b0b8; --mantine-color-gray-7: #a8b0b8; --mantine-color-gray-8: #e2ecf4; --mantine-color-gray-9: #e2ecf4; --mantine-color-brand-light: rgba(111, 195, 216, 0.13); --mantine-color-brand-filled: #6fc3d8; --mantine-color-brand-filled-hover: #8fd0e1; --mantine-color-brand-4: #8fd0e1; --mantine-color-brand-5: #6fc3d8; --mantine-color-brand-6: #6fc3d8; --mantine-color-brand-7: #8fd0e1; --mantine-color-blue-0: rgba(111, 195, 216, 0.13); --mantine-color-blue-4: #8fd0e1; --mantine-color-blue-5: #6fc3d8; --mantine-color-blue-6: #6fc3d8; --mantine-color-blue-8: #8fd0e1; --mantine-color-blue-light: rgba(111, 195, 216, 0.13); --mantine-color-blue-filled: #6fc3d8; --mantine-color-green-5: #62c09b; --mantine-color-green-6: #62c09b; --mantine-color-green-filled: #62c09b; --mantine-color-yellow-5: #c8a959; --mantine-color-yellow-6: #c8a959; --mantine-color-yellow-8: #c8a959; --mantine-color-yellow-filled: #c8a959; --mantine-color-red-5: #c4706b; --mantine-color-red-6: #c4706b; --mantine-color-red-filled: #c4706b; --surface-card: #0a0f18; --surface-muted: #101724; --border-subtle: rgba(111, 195, 216, 0.18); --color-body: #04070d; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="timeline"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="timeline"] .sd-navbar, :root[data-context-mode="full"][data-context="timeline"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="timeline"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="timeline"] .mantine-Card-root, :root[data-context-mode="full"][data-context="timeline"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="timeline"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="timeline"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="timeline"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="memories"] { --ctx-accent: #c08a7a; --ctx-accent-hover: #cea497; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="memories"] { --ctx-accent: #8e665a; --ctx-accent-hover: #846961; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="memories"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="memories"] { --color-gray-50: #f0e6da; --color-gray-100: #f0e6da; --color-gray-200: #b6ada3; --color-gray-300: #b6ada3; --color-gray-400: #8d857e; --color-gray-500: #8d857e; --color-gray-600: rgba(192, 138, 122, 0.34); --color-gray-700: #201814; --color-gray-800: #17100d; --color-gray-900: #0f0a08; --color-gray-950: #0f0a08; --color-blue-50: rgba(192, 138, 122, 0.13); --color-blue-100: rgba(192, 138, 122, 0.13); --color-blue-200: rgba(192, 138, 122, 0.13); --color-blue-300: #cea497; --color-blue-400: #cea497; --color-blue-500: #c08a7a; --color-blue-600: #c08a7a; --color-blue-700: #c08a7a; --color-blue-800: #c08a7a; --color-blue-900: #c08a7a; --color-blue-950: #c08a7a; --color-red-50: color-mix(in oklab, #ce6960 12%, transparent); --color-red-100: color-mix(in oklab, #ce6960 12%, transparent); --color-red-200: color-mix(in oklab, #ce6960 22%, transparent); --color-red-300: #ce6960; --color-red-400: #ce6960; --color-red-500: #ce6960; --color-red-600: #ce6960; --color-red-700: #ce6960; --color-red-800: #ce6960; --color-red-900: #ce6960; --color-red-950: #ce6960; --color-rose-50: color-mix(in oklab, #ce6960 12%, transparent); --color-rose-100: color-mix(in oklab, #ce6960 12%, transparent); --color-rose-200: color-mix(in oklab, #ce6960 22%, transparent); --color-rose-300: #ce6960; --color-rose-400: #ce6960; --color-rose-500: #ce6960; --color-rose-600: #ce6960; --color-rose-700: #ce6960; --color-rose-800: #ce6960; --color-rose-900: #ce6960; --color-rose-950: #ce6960; --color-green-50: color-mix(in oklab, #6fb78c 12%, transparent); --color-green-100: color-mix(in oklab, #6fb78c 12%, transparent); --color-green-200: color-mix(in oklab, #6fb78c 22%, transparent); --color-green-300: #6fb78c; --color-green-400: #6fb78c; --color-green-500: #6fb78c; --color-green-600: #6fb78c; --color-green-700: #6fb78c; --color-green-800: #6fb78c; --color-green-900: #6fb78c; --color-green-950: #6fb78c; --color-emerald-50: color-mix(in oklab, #6fb78c 12%, transparent); --color-emerald-100: color-mix(in oklab, #6fb78c 12%, transparent); --color-emerald-200: color-mix(in oklab, #6fb78c 22%, transparent); --color-emerald-300: #6fb78c; --color-emerald-400: #6fb78c; --color-emerald-500: #6fb78c; --color-emerald-600: #6fb78c; --color-emerald-700: #6fb78c; --color-emerald-800: #6fb78c; --color-emerald-900: #6fb78c; --color-emerald-950: #6fb78c; --color-yellow-50: color-mix(in oklab, #d5a04a 12%, transparent); --color-yellow-100: color-mix(in oklab, #d5a04a 12%, transparent); --color-yellow-200: color-mix(in oklab, #d5a04a 22%, transparent); --color-yellow-300: #d5a04a; --color-yellow-400: #d5a04a; --color-yellow-500: #d5a04a; --color-yellow-600: #d5a04a; --color-yellow-700: #d5a04a; --color-yellow-800: #d5a04a; --color-yellow-900: #d5a04a; --color-yellow-950: #d5a04a; --color-amber-50: color-mix(in oklab, #d5a04a 12%, transparent); --color-amber-100: color-mix(in oklab, #d5a04a 12%, transparent); --color-amber-200: color-mix(in oklab, #d5a04a 22%, transparent); --color-amber-300: #d5a04a; --color-amber-400: #d5a04a; --color-amber-500: #d5a04a; --color-amber-600: #d5a04a; --color-amber-700: #d5a04a; --color-amber-800: #d5a04a; --color-amber-900: #d5a04a; --color-amber-950: #d5a04a; --color-orange-50: color-mix(in oklab, #d5a04a 12%, transparent); --color-orange-100: color-mix(in oklab, #d5a04a 12%, transparent); --color-orange-200: color-mix(in oklab, #d5a04a 22%, transparent); --color-orange-300: #d5a04a; --color-orange-400: #d5a04a; --color-orange-500: #d5a04a; --color-orange-600: #d5a04a; --color-orange-700: #d5a04a; --color-orange-800: #d5a04a; --color-orange-900: #d5a04a; --color-orange-950: #d5a04a; --lo-background: #0f0a08; --lo-surface: #17100d; --lo-surface-elevated: #201814; --lo-text-primary: #f0e6da; --lo-text-secondary: #b6ada3; --lo-text-muted: #8d857e; --lo-border: rgba(192, 138, 122, 0.18); --lo-border-strong: rgba(192, 138, 122, 0.34); --lo-accent: #c08a7a; --lo-accent-hover: #cea497; --lo-accent-subtle: rgba(192, 138, 122, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6fb78c; --lo-warning: #d5a04a; --lo-danger: #ce6960; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0f0a08; --mantine-color-text: #f0e6da; --mantine-color-dimmed: #8d857e; --mantine-color-default: #17100d; --mantine-color-default-hover: #201814; --mantine-color-default-color: #f0e6da; --mantine-color-default-border: rgba(192, 138, 122, 0.18); --mantine-color-placeholder: #8d857e; --mantine-color-anchor: #c08a7a; --mantine-color-error: #ce6960; --mantine-primary-color-filled: #c08a7a; --mantine-primary-color-filled-hover: #cea497; --mantine-primary-color-light: rgba(192, 138, 122, 0.13); --mantine-primary-color-light-hover: rgba(192, 138, 122, 0.13); --mantine-primary-color-light-color: #c08a7a; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f0e6da; --mantine-color-dark-1: #b6ada3; --mantine-color-dark-2: #b6ada3; --mantine-color-dark-3: #8d857e; --mantine-color-dark-4: rgba(192, 138, 122, 0.18); --mantine-color-dark-5: #201814; --mantine-color-dark-6: #17100d; --mantine-color-dark-7: #17100d; --mantine-color-dark-8: #0f0a08; --mantine-color-dark-9: #0f0a08; --mantine-color-gray-0: #201814; --mantine-color-gray-1: #17100d; --mantine-color-gray-2: rgba(192, 138, 122, 0.18); --mantine-color-gray-3: rgba(192, 138, 122, 0.18); --mantine-color-gray-4: #8d857e; --mantine-color-gray-5: #8d857e; --mantine-color-gray-6: #b6ada3; --mantine-color-gray-7: #b6ada3; --mantine-color-gray-8: #f0e6da; --mantine-color-gray-9: #f0e6da; --mantine-color-brand-light: rgba(192, 138, 122, 0.13); --mantine-color-brand-filled: #c08a7a; --mantine-color-brand-filled-hover: #cea497; --mantine-color-brand-4: #cea497; --mantine-color-brand-5: #c08a7a; --mantine-color-brand-6: #c08a7a; --mantine-color-brand-7: #cea497; --mantine-color-blue-0: rgba(192, 138, 122, 0.13); --mantine-color-blue-4: #cea497; --mantine-color-blue-5: #c08a7a; --mantine-color-blue-6: #c08a7a; --mantine-color-blue-8: #cea497; --mantine-color-blue-light: rgba(192, 138, 122, 0.13); --mantine-color-blue-filled: #c08a7a; --mantine-color-green-5: #6fb78c; --mantine-color-green-6: #6fb78c; --mantine-color-green-filled: #6fb78c; --mantine-color-yellow-5: #d5a04a; --mantine-color-yellow-6: #d5a04a; --mantine-color-yellow-8: #d5a04a; --mantine-color-yellow-filled: #d5a04a; --mantine-color-red-5: #ce6960; --mantine-color-red-6: #ce6960; --mantine-color-red-filled: #ce6960; --surface-card: #17100d; --surface-muted: #201814; --border-subtle: rgba(192, 138, 122, 0.18); --color-body: #0f0a08; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="memories"] body { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 1.60%, transparent) 0 1px, transparent 1px 7px), radial-gradient(115% 75% at 12% -8%, color-mix(in oklab, var(--lo-accent) 13%, transparent) 0%, transparent 62%), radial-gradient(90% 60% at 92% 4%, color-mix(in oklab, var(--lo-accent) 7%, transparent) 0%, transparent 58%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="memories"] .sd-navbar, :root[data-context-mode="full"][data-context="memories"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 5%, transparent) 0%, transparent 42%); } :root[data-context-mode="full"][data-context="memories"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="memories"] .mantine-Card-root, :root[data-context-mode="full"][data-context="memories"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="memories"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="memories"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="memories"] .mantine-Popover-dropdown { background-image: repeating-linear-gradient(37deg, color-mix(in oklab, var(--lo-text-primary) 2.5%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-53deg, color-mix(in oklab, var(--lo-text-primary) 2.00%, transparent) 0 1px, transparent 1px 7px); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 40%, transparent); } :root[data-context="calendar"] { --ctx-accent: #c08a6a; --ctx-accent-hover: #cea48b; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.85; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="calendar"] { --ctx-accent: #8e664e; --ctx-accent-hover: #846959; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="calendar"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="calendar"] { --color-gray-50: #efe6da; --color-gray-100: #efe6da; --color-gray-200: #b5ada3; --color-gray-300: #b5ada3; --color-gray-400: #8c857e; --color-gray-500: #8c857e; --color-gray-600: rgba(192, 138, 106, 0.34); --color-gray-700: #1e1813; --color-gray-800: #16110d; --color-gray-900: #0e0a08; --color-gray-950: #0e0a08; --color-blue-50: rgba(192, 138, 106, 0.13); --color-blue-100: rgba(192, 138, 106, 0.13); --color-blue-200: rgba(192, 138, 106, 0.13); --color-blue-300: #cea48b; --color-blue-400: #cea48b; --color-blue-500: #c08a6a; --color-blue-600: #c08a6a; --color-blue-700: #c08a6a; --color-blue-800: #c08a6a; --color-blue-900: #c08a6a; --color-blue-950: #c08a6a; --color-red-50: color-mix(in oklab, #ce695e 12%, transparent); --color-red-100: color-mix(in oklab, #ce695e 12%, transparent); --color-red-200: color-mix(in oklab, #ce695e 22%, transparent); --color-red-300: #ce695e; --color-red-400: #ce695e; --color-red-500: #ce695e; --color-red-600: #ce695e; --color-red-700: #ce695e; --color-red-800: #ce695e; --color-red-900: #ce695e; --color-red-950: #ce695e; --color-rose-50: color-mix(in oklab, #ce695e 12%, transparent); --color-rose-100: color-mix(in oklab, #ce695e 12%, transparent); --color-rose-200: color-mix(in oklab, #ce695e 22%, transparent); --color-rose-300: #ce695e; --color-rose-400: #ce695e; --color-rose-500: #ce695e; --color-rose-600: #ce695e; --color-rose-700: #ce695e; --color-rose-800: #ce695e; --color-rose-900: #ce695e; --color-rose-950: #ce695e; --color-green-50: color-mix(in oklab, #6fb789 12%, transparent); --color-green-100: color-mix(in oklab, #6fb789 12%, transparent); --color-green-200: color-mix(in oklab, #6fb789 22%, transparent); --color-green-300: #6fb789; --color-green-400: #6fb789; --color-green-500: #6fb789; --color-green-600: #6fb789; --color-green-700: #6fb789; --color-green-800: #6fb789; --color-green-900: #6fb789; --color-green-950: #6fb789; --color-emerald-50: color-mix(in oklab, #6fb789 12%, transparent); --color-emerald-100: color-mix(in oklab, #6fb789 12%, transparent); --color-emerald-200: color-mix(in oklab, #6fb789 22%, transparent); --color-emerald-300: #6fb789; --color-emerald-400: #6fb789; --color-emerald-500: #6fb789; --color-emerald-600: #6fb789; --color-emerald-700: #6fb789; --color-emerald-800: #6fb789; --color-emerald-900: #6fb789; --color-emerald-950: #6fb789; --color-yellow-50: color-mix(in oklab, #d5a048 12%, transparent); --color-yellow-100: color-mix(in oklab, #d5a048 12%, transparent); --color-yellow-200: color-mix(in oklab, #d5a048 22%, transparent); --color-yellow-300: #d5a048; --color-yellow-400: #d5a048; --color-yellow-500: #d5a048; --color-yellow-600: #d5a048; --color-yellow-700: #d5a048; --color-yellow-800: #d5a048; --color-yellow-900: #d5a048; --color-yellow-950: #d5a048; --color-amber-50: color-mix(in oklab, #d5a048 12%, transparent); --color-amber-100: color-mix(in oklab, #d5a048 12%, transparent); --color-amber-200: color-mix(in oklab, #d5a048 22%, transparent); --color-amber-300: #d5a048; --color-amber-400: #d5a048; --color-amber-500: #d5a048; --color-amber-600: #d5a048; --color-amber-700: #d5a048; --color-amber-800: #d5a048; --color-amber-900: #d5a048; --color-amber-950: #d5a048; --color-orange-50: color-mix(in oklab, #d5a048 12%, transparent); --color-orange-100: color-mix(in oklab, #d5a048 12%, transparent); --color-orange-200: color-mix(in oklab, #d5a048 22%, transparent); --color-orange-300: #d5a048; --color-orange-400: #d5a048; --color-orange-500: #d5a048; --color-orange-600: #d5a048; --color-orange-700: #d5a048; --color-orange-800: #d5a048; --color-orange-900: #d5a048; --color-orange-950: #d5a048; --lo-background: #0e0a08; --lo-surface: #16110d; --lo-surface-elevated: #1e1813; --lo-text-primary: #efe6da; --lo-text-secondary: #b5ada3; --lo-text-muted: #8c857e; --lo-border: rgba(192, 138, 106, 0.18); --lo-border-strong: rgba(192, 138, 106, 0.34); --lo-accent: #c08a6a; --lo-accent-hover: #cea48b; --lo-accent-subtle: rgba(192, 138, 106, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6fb789; --lo-warning: #d5a048; --lo-danger: #ce695e; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0e0a08; --mantine-color-text: #efe6da; --mantine-color-dimmed: #8c857e; --mantine-color-default: #16110d; --mantine-color-default-hover: #1e1813; --mantine-color-default-color: #efe6da; --mantine-color-default-border: rgba(192, 138, 106, 0.18); --mantine-color-placeholder: #8c857e; --mantine-color-anchor: #c08a6a; --mantine-color-error: #ce695e; --mantine-primary-color-filled: #c08a6a; --mantine-primary-color-filled-hover: #cea48b; --mantine-primary-color-light: rgba(192, 138, 106, 0.13); --mantine-primary-color-light-hover: rgba(192, 138, 106, 0.13); --mantine-primary-color-light-color: #c08a6a; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #efe6da; --mantine-color-dark-1: #b5ada3; --mantine-color-dark-2: #b5ada3; --mantine-color-dark-3: #8c857e; --mantine-color-dark-4: rgba(192, 138, 106, 0.18); --mantine-color-dark-5: #1e1813; --mantine-color-dark-6: #16110d; --mantine-color-dark-7: #16110d; --mantine-color-dark-8: #0e0a08; --mantine-color-dark-9: #0e0a08; --mantine-color-gray-0: #1e1813; --mantine-color-gray-1: #16110d; --mantine-color-gray-2: rgba(192, 138, 106, 0.18); --mantine-color-gray-3: rgba(192, 138, 106, 0.18); --mantine-color-gray-4: #8c857e; --mantine-color-gray-5: #8c857e; --mantine-color-gray-6: #b5ada3; --mantine-color-gray-7: #b5ada3; --mantine-color-gray-8: #efe6da; --mantine-color-gray-9: #efe6da; --mantine-color-brand-light: rgba(192, 138, 106, 0.13); --mantine-color-brand-filled: #c08a6a; --mantine-color-brand-filled-hover: #cea48b; --mantine-color-brand-4: #cea48b; --mantine-color-brand-5: #c08a6a; --mantine-color-brand-6: #c08a6a; --mantine-color-brand-7: #cea48b; --mantine-color-blue-0: rgba(192, 138, 106, 0.13); --mantine-color-blue-4: #cea48b; --mantine-color-blue-5: #c08a6a; --mantine-color-blue-6: #c08a6a; --mantine-color-blue-8: #cea48b; --mantine-color-blue-light: rgba(192, 138, 106, 0.13); --mantine-color-blue-filled: #c08a6a; --mantine-color-green-5: #6fb789; --mantine-color-green-6: #6fb789; --mantine-color-green-filled: #6fb789; --mantine-color-yellow-5: #d5a048; --mantine-color-yellow-6: #d5a048; --mantine-color-yellow-8: #d5a048; --mantine-color-yellow-filled: #d5a048; --mantine-color-red-5: #ce695e; --mantine-color-red-6: #ce695e; --mantine-color-red-filled: #ce695e; --surface-card: #16110d; --surface-muted: #1e1813; --border-subtle: rgba(192, 138, 106, 0.18); --color-body: #0e0a08; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="calendar"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="calendar"] .sd-navbar, :root[data-context-mode="full"][data-context="calendar"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="calendar"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="calendar"] .mantine-Card-root, :root[data-context-mode="full"][data-context="calendar"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="calendar"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="calendar"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="calendar"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="time"] { --ctx-accent: #7fa9d6; --ctx-accent-hover: #9bbcdf; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="time"] { --ctx-accent: #54708d; --ctx-accent-hover: #5d7186; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="time"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="time"] { --color-gray-50: #e5ebf4; --color-gray-100: #e5ebf4; --color-gray-200: #abb1b9; --color-gray-300: #abb1b9; --color-gray-400: #838890; --color-gray-500: #838890; --color-gray-600: rgba(127, 169, 214, 0.34); --color-gray-700: #151b27; --color-gray-800: #0e131c; --color-gray-900: #070a10; --color-gray-950: #070a10; --color-blue-50: rgba(127, 169, 214, 0.13); --color-blue-100: rgba(127, 169, 214, 0.13); --color-blue-200: rgba(127, 169, 214, 0.13); --color-blue-300: #9bbcdf; --color-blue-400: #9bbcdf; --color-blue-500: #7fa9d6; --color-blue-600: #7fa9d6; --color-blue-700: #7fa9d6; --color-blue-800: #7fa9d6; --color-blue-900: #7fa9d6; --color-blue-950: #7fa9d6; --color-red-50: color-mix(in oklab, #c66d6b 12%, transparent); --color-red-100: color-mix(in oklab, #c66d6b 12%, transparent); --color-red-200: color-mix(in oklab, #c66d6b 22%, transparent); --color-red-300: #c66d6b; --color-red-400: #c66d6b; --color-red-500: #c66d6b; --color-red-600: #c66d6b; --color-red-700: #c66d6b; --color-red-800: #c66d6b; --color-red-900: #c66d6b; --color-red-950: #c66d6b; --color-rose-50: color-mix(in oklab, #c66d6b 12%, transparent); --color-rose-100: color-mix(in oklab, #c66d6b 12%, transparent); --color-rose-200: color-mix(in oklab, #c66d6b 22%, transparent); --color-rose-300: #c66d6b; --color-rose-400: #c66d6b; --color-rose-500: #c66d6b; --color-rose-600: #c66d6b; --color-rose-700: #c66d6b; --color-rose-800: #c66d6b; --color-rose-900: #c66d6b; --color-rose-950: #c66d6b; --color-green-50: color-mix(in oklab, #64bb9a 12%, transparent); --color-green-100: color-mix(in oklab, #64bb9a 12%, transparent); --color-green-200: color-mix(in oklab, #64bb9a 22%, transparent); --color-green-300: #64bb9a; --color-green-400: #64bb9a; --color-green-500: #64bb9a; --color-green-600: #64bb9a; --color-green-700: #64bb9a; --color-green-800: #64bb9a; --color-green-900: #64bb9a; --color-green-950: #64bb9a; --color-emerald-50: color-mix(in oklab, #64bb9a 12%, transparent); --color-emerald-100: color-mix(in oklab, #64bb9a 12%, transparent); --color-emerald-200: color-mix(in oklab, #64bb9a 22%, transparent); --color-emerald-300: #64bb9a; --color-emerald-400: #64bb9a; --color-emerald-500: #64bb9a; --color-emerald-600: #64bb9a; --color-emerald-700: #64bb9a; --color-emerald-800: #64bb9a; --color-emerald-900: #64bb9a; --color-emerald-950: #64bb9a; --color-yellow-50: color-mix(in oklab, #cba559 12%, transparent); --color-yellow-100: color-mix(in oklab, #cba559 12%, transparent); --color-yellow-200: color-mix(in oklab, #cba559 22%, transparent); --color-yellow-300: #cba559; --color-yellow-400: #cba559; --color-yellow-500: #cba559; --color-yellow-600: #cba559; --color-yellow-700: #cba559; --color-yellow-800: #cba559; --color-yellow-900: #cba559; --color-yellow-950: #cba559; --color-amber-50: color-mix(in oklab, #cba559 12%, transparent); --color-amber-100: color-mix(in oklab, #cba559 12%, transparent); --color-amber-200: color-mix(in oklab, #cba559 22%, transparent); --color-amber-300: #cba559; --color-amber-400: #cba559; --color-amber-500: #cba559; --color-amber-600: #cba559; --color-amber-700: #cba559; --color-amber-800: #cba559; --color-amber-900: #cba559; --color-amber-950: #cba559; --color-orange-50: color-mix(in oklab, #cba559 12%, transparent); --color-orange-100: color-mix(in oklab, #cba559 12%, transparent); --color-orange-200: color-mix(in oklab, #cba559 22%, transparent); --color-orange-300: #cba559; --color-orange-400: #cba559; --color-orange-500: #cba559; --color-orange-600: #cba559; --color-orange-700: #cba559; --color-orange-800: #cba559; --color-orange-900: #cba559; --color-orange-950: #cba559; --lo-background: #070a10; --lo-surface: #0e131c; --lo-surface-elevated: #151b27; --lo-text-primary: #e5ebf4; --lo-text-secondary: #abb1b9; --lo-text-muted: #838890; --lo-border: rgba(127, 169, 214, 0.18); --lo-border-strong: rgba(127, 169, 214, 0.34); --lo-accent: #7fa9d6; --lo-accent-hover: #9bbcdf; --lo-accent-subtle: rgba(127, 169, 214, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #64bb9a; --lo-warning: #cba559; --lo-danger: #c66d6b; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #070a10; --mantine-color-text: #e5ebf4; --mantine-color-dimmed: #838890; --mantine-color-default: #0e131c; --mantine-color-default-hover: #151b27; --mantine-color-default-color: #e5ebf4; --mantine-color-default-border: rgba(127, 169, 214, 0.18); --mantine-color-placeholder: #838890; --mantine-color-anchor: #7fa9d6; --mantine-color-error: #c66d6b; --mantine-primary-color-filled: #7fa9d6; --mantine-primary-color-filled-hover: #9bbcdf; --mantine-primary-color-light: rgba(127, 169, 214, 0.13); --mantine-primary-color-light-hover: rgba(127, 169, 214, 0.13); --mantine-primary-color-light-color: #7fa9d6; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e5ebf4; --mantine-color-dark-1: #abb1b9; --mantine-color-dark-2: #abb1b9; --mantine-color-dark-3: #838890; --mantine-color-dark-4: rgba(127, 169, 214, 0.18); --mantine-color-dark-5: #151b27; --mantine-color-dark-6: #0e131c; --mantine-color-dark-7: #0e131c; --mantine-color-dark-8: #070a10; --mantine-color-dark-9: #070a10; --mantine-color-gray-0: #151b27; --mantine-color-gray-1: #0e131c; --mantine-color-gray-2: rgba(127, 169, 214, 0.18); --mantine-color-gray-3: rgba(127, 169, 214, 0.18); --mantine-color-gray-4: #838890; --mantine-color-gray-5: #838890; --mantine-color-gray-6: #abb1b9; --mantine-color-gray-7: #abb1b9; --mantine-color-gray-8: #e5ebf4; --mantine-color-gray-9: #e5ebf4; --mantine-color-brand-light: rgba(127, 169, 214, 0.13); --mantine-color-brand-filled: #7fa9d6; --mantine-color-brand-filled-hover: #9bbcdf; --mantine-color-brand-4: #9bbcdf; --mantine-color-brand-5: #7fa9d6; --mantine-color-brand-6: #7fa9d6; --mantine-color-brand-7: #9bbcdf; --mantine-color-blue-0: rgba(127, 169, 214, 0.13); --mantine-color-blue-4: #9bbcdf; --mantine-color-blue-5: #7fa9d6; --mantine-color-blue-6: #7fa9d6; --mantine-color-blue-8: #9bbcdf; --mantine-color-blue-light: rgba(127, 169, 214, 0.13); --mantine-color-blue-filled: #7fa9d6; --mantine-color-green-5: #64bb9a; --mantine-color-green-6: #64bb9a; --mantine-color-green-filled: #64bb9a; --mantine-color-yellow-5: #cba559; --mantine-color-yellow-6: #cba559; --mantine-color-yellow-8: #cba559; --mantine-color-yellow-filled: #cba559; --mantine-color-red-5: #c66d6b; --mantine-color-red-6: #c66d6b; --mantine-color-red-filled: #c66d6b; --surface-card: #0e131c; --surface-muted: #151b27; --border-subtle: rgba(127, 169, 214, 0.18); --color-body: #070a10; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="time"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="time"] .sd-navbar, :root[data-context-mode="full"][data-context="time"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="time"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="time"] .mantine-Card-root, :root[data-context-mode="full"][data-context="time"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="time"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="time"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="time"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="health"] { --ctx-accent: #d89a5c; --ctx-accent-hover: #e1b080; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="health"] { --ctx-accent: #8f663d; --ctx-accent-hover: #876a4d; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="health"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="health"] { --color-gray-50: #eae7de; --color-gray-100: #eae7de; --color-gray-200: #afaea9; --color-gray-300: #afaea9; --color-gray-400: #868684; --color-gray-500: #868684; --color-gray-600: rgba(216, 154, 92, 0.34); --color-gray-700: #151b2b; --color-gray-800: #0e131e; --color-gray-900: #070a12; --color-gray-950: #070a12; --color-blue-50: rgba(216, 154, 92, 0.13); --color-blue-100: rgba(216, 154, 92, 0.13); --color-blue-200: rgba(216, 154, 92, 0.13); --color-blue-300: #e1b080; --color-blue-400: #e1b080; --color-blue-500: #d89a5c; --color-blue-600: #d89a5c; --color-blue-700: #d89a5c; --color-blue-800: #d89a5c; --color-blue-900: #d89a5c; --color-blue-950: #d89a5c; --color-red-50: color-mix(in oklab, #d16b5c 12%, transparent); --color-red-100: color-mix(in oklab, #d16b5c 12%, transparent); --color-red-200: color-mix(in oklab, #d16b5c 22%, transparent); --color-red-300: #d16b5c; --color-red-400: #d16b5c; --color-red-500: #d16b5c; --color-red-600: #d16b5c; --color-red-700: #d16b5c; --color-red-800: #d16b5c; --color-red-900: #d16b5c; --color-red-950: #d16b5c; --color-rose-50: color-mix(in oklab, #d16b5c 12%, transparent); --color-rose-100: color-mix(in oklab, #d16b5c 12%, transparent); --color-rose-200: color-mix(in oklab, #d16b5c 22%, transparent); --color-rose-300: #d16b5c; --color-rose-400: #d16b5c; --color-rose-500: #d16b5c; --color-rose-600: #d16b5c; --color-rose-700: #d16b5c; --color-rose-800: #d16b5c; --color-rose-900: #d16b5c; --color-rose-950: #d16b5c; --color-green-50: color-mix(in oklab, #72b987 12%, transparent); --color-green-100: color-mix(in oklab, #72b987 12%, transparent); --color-green-200: color-mix(in oklab, #72b987 22%, transparent); --color-green-300: #72b987; --color-green-400: #72b987; --color-green-500: #72b987; --color-green-600: #72b987; --color-green-700: #72b987; --color-green-800: #72b987; --color-green-900: #72b987; --color-green-950: #72b987; --color-emerald-50: color-mix(in oklab, #72b987 12%, transparent); --color-emerald-100: color-mix(in oklab, #72b987 12%, transparent); --color-emerald-200: color-mix(in oklab, #72b987 22%, transparent); --color-emerald-300: #72b987; --color-emerald-400: #72b987; --color-emerald-500: #72b987; --color-emerald-600: #72b987; --color-emerald-700: #72b987; --color-emerald-800: #72b987; --color-emerald-900: #72b987; --color-emerald-950: #72b987; --color-yellow-50: color-mix(in oklab, #d9a245 12%, transparent); --color-yellow-100: color-mix(in oklab, #d9a245 12%, transparent); --color-yellow-200: color-mix(in oklab, #d9a245 22%, transparent); --color-yellow-300: #d9a245; --color-yellow-400: #d9a245; --color-yellow-500: #d9a245; --color-yellow-600: #d9a245; --color-yellow-700: #d9a245; --color-yellow-800: #d9a245; --color-yellow-900: #d9a245; --color-yellow-950: #d9a245; --color-amber-50: color-mix(in oklab, #d9a245 12%, transparent); --color-amber-100: color-mix(in oklab, #d9a245 12%, transparent); --color-amber-200: color-mix(in oklab, #d9a245 22%, transparent); --color-amber-300: #d9a245; --color-amber-400: #d9a245; --color-amber-500: #d9a245; --color-amber-600: #d9a245; --color-amber-700: #d9a245; --color-amber-800: #d9a245; --color-amber-900: #d9a245; --color-amber-950: #d9a245; --color-orange-50: color-mix(in oklab, #d9a245 12%, transparent); --color-orange-100: color-mix(in oklab, #d9a245 12%, transparent); --color-orange-200: color-mix(in oklab, #d9a245 22%, transparent); --color-orange-300: #d9a245; --color-orange-400: #d9a245; --color-orange-500: #d9a245; --color-orange-600: #d9a245; --color-orange-700: #d9a245; --color-orange-800: #d9a245; --color-orange-900: #d9a245; --color-orange-950: #d9a245; --lo-background: #070a12; --lo-surface: #0e131e; --lo-surface-elevated: #151b2b; --lo-text-primary: #eae7de; --lo-text-secondary: #afaea9; --lo-text-muted: #868684; --lo-border: rgba(216, 154, 92, 0.18); --lo-border-strong: rgba(216, 154, 92, 0.34); --lo-accent: #d89a5c; --lo-accent-hover: #e1b080; --lo-accent-subtle: rgba(216, 154, 92, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #72b987; --lo-warning: #d9a245; --lo-danger: #d16b5c; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #070a12; --mantine-color-text: #eae7de; --mantine-color-dimmed: #868684; --mantine-color-default: #0e131e; --mantine-color-default-hover: #151b2b; --mantine-color-default-color: #eae7de; --mantine-color-default-border: rgba(216, 154, 92, 0.18); --mantine-color-placeholder: #868684; --mantine-color-anchor: #d89a5c; --mantine-color-error: #d16b5c; --mantine-primary-color-filled: #d89a5c; --mantine-primary-color-filled-hover: #e1b080; --mantine-primary-color-light: rgba(216, 154, 92, 0.13); --mantine-primary-color-light-hover: rgba(216, 154, 92, 0.13); --mantine-primary-color-light-color: #d89a5c; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #eae7de; --mantine-color-dark-1: #afaea9; --mantine-color-dark-2: #afaea9; --mantine-color-dark-3: #868684; --mantine-color-dark-4: rgba(216, 154, 92, 0.18); --mantine-color-dark-5: #151b2b; --mantine-color-dark-6: #0e131e; --mantine-color-dark-7: #0e131e; --mantine-color-dark-8: #070a12; --mantine-color-dark-9: #070a12; --mantine-color-gray-0: #151b2b; --mantine-color-gray-1: #0e131e; --mantine-color-gray-2: rgba(216, 154, 92, 0.18); --mantine-color-gray-3: rgba(216, 154, 92, 0.18); --mantine-color-gray-4: #868684; --mantine-color-gray-5: #868684; --mantine-color-gray-6: #afaea9; --mantine-color-gray-7: #afaea9; --mantine-color-gray-8: #eae7de; --mantine-color-gray-9: #eae7de; --mantine-color-brand-light: rgba(216, 154, 92, 0.13); --mantine-color-brand-filled: #d89a5c; --mantine-color-brand-filled-hover: #e1b080; --mantine-color-brand-4: #e1b080; --mantine-color-brand-5: #d89a5c; --mantine-color-brand-6: #d89a5c; --mantine-color-brand-7: #e1b080; --mantine-color-blue-0: rgba(216, 154, 92, 0.13); --mantine-color-blue-4: #e1b080; --mantine-color-blue-5: #d89a5c; --mantine-color-blue-6: #d89a5c; --mantine-color-blue-8: #e1b080; --mantine-color-blue-light: rgba(216, 154, 92, 0.13); --mantine-color-blue-filled: #d89a5c; --mantine-color-green-5: #72b987; --mantine-color-green-6: #72b987; --mantine-color-green-filled: #72b987; --mantine-color-yellow-5: #d9a245; --mantine-color-yellow-6: #d9a245; --mantine-color-yellow-8: #d9a245; --mantine-color-yellow-filled: #d9a245; --mantine-color-red-5: #d16b5c; --mantine-color-red-6: #d16b5c; --mantine-color-red-filled: #d16b5c; --surface-card: #0e131e; --surface-muted: #151b2b; --border-subtle: rgba(216, 154, 92, 0.18); --color-body: #070a12; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="health"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="health"] .sd-navbar, :root[data-context-mode="full"][data-context="health"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="health"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="health"] .mantine-Card-root, :root[data-context-mode="full"][data-context="health"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="health"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="health"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="health"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="training"] { --ctx-accent: #cb6459; --ctx-accent-hover: #d47e75; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.95; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="training"] { --ctx-accent: #b45146; --ctx-accent-hover: #9d5d57; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="training"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="training"] { --color-gray-50: #f0edea; --color-gray-100: #f0edea; --color-gray-200: #b4b2af; --color-gray-300: #b4b2af; --color-gray-400: #8b8987; --color-gray-500: #8b8987; --color-gray-600: rgba(200, 90, 78, 0.34); --color-gray-700: #1a1717; --color-gray-800: #121010; --color-gray-900: #0a0908; --color-gray-950: #0a0908; --color-blue-50: rgba(200, 90, 78, 0.13); --color-blue-100: rgba(200, 90, 78, 0.13); --color-blue-200: rgba(200, 90, 78, 0.13); --color-blue-300: #d47e75; --color-blue-400: #d47e75; --color-blue-500: #c85a4e; --color-blue-600: #c85a4e; --color-blue-700: #c85a4e; --color-blue-800: #c85a4e; --color-blue-900: #c85a4e; --color-blue-950: #c85a4e; --color-red-50: color-mix(in oklab, #cf645a 12%, transparent); --color-red-100: color-mix(in oklab, #cf645a 12%, transparent); --color-red-200: color-mix(in oklab, #cf645a 22%, transparent); --color-red-300: #cf645a; --color-red-400: #cf645a; --color-red-500: #cf645a; --color-red-600: #cf645a; --color-red-700: #cf645a; --color-red-800: #cf645a; --color-red-900: #cf645a; --color-red-950: #cf645a; --color-rose-50: color-mix(in oklab, #cf645a 12%, transparent); --color-rose-100: color-mix(in oklab, #cf645a 12%, transparent); --color-rose-200: color-mix(in oklab, #cf645a 22%, transparent); --color-rose-300: #cf645a; --color-rose-400: #cf645a; --color-rose-500: #cf645a; --color-rose-600: #cf645a; --color-rose-700: #cf645a; --color-rose-800: #cf645a; --color-rose-900: #cf645a; --color-rose-950: #cf645a; --color-green-50: color-mix(in oklab, #70af85 12%, transparent); --color-green-100: color-mix(in oklab, #70af85 12%, transparent); --color-green-200: color-mix(in oklab, #70af85 22%, transparent); --color-green-300: #70af85; --color-green-400: #70af85; --color-green-500: #70af85; --color-green-600: #70af85; --color-green-700: #70af85; --color-green-800: #70af85; --color-green-900: #70af85; --color-green-950: #70af85; --color-emerald-50: color-mix(in oklab, #70af85 12%, transparent); --color-emerald-100: color-mix(in oklab, #70af85 12%, transparent); --color-emerald-200: color-mix(in oklab, #70af85 22%, transparent); --color-emerald-300: #70af85; --color-emerald-400: #70af85; --color-emerald-500: #70af85; --color-emerald-600: #70af85; --color-emerald-700: #70af85; --color-emerald-800: #70af85; --color-emerald-900: #70af85; --color-emerald-950: #70af85; --color-yellow-50: color-mix(in oklab, #d69843 12%, transparent); --color-yellow-100: color-mix(in oklab, #d69843 12%, transparent); --color-yellow-200: color-mix(in oklab, #d69843 22%, transparent); --color-yellow-300: #d69843; --color-yellow-400: #d69843; --color-yellow-500: #d69843; --color-yellow-600: #d69843; --color-yellow-700: #d69843; --color-yellow-800: #d69843; --color-yellow-900: #d69843; --color-yellow-950: #d69843; --color-amber-50: color-mix(in oklab, #d69843 12%, transparent); --color-amber-100: color-mix(in oklab, #d69843 12%, transparent); --color-amber-200: color-mix(in oklab, #d69843 22%, transparent); --color-amber-300: #d69843; --color-amber-400: #d69843; --color-amber-500: #d69843; --color-amber-600: #d69843; --color-amber-700: #d69843; --color-amber-800: #d69843; --color-amber-900: #d69843; --color-amber-950: #d69843; --color-orange-50: color-mix(in oklab, #d69843 12%, transparent); --color-orange-100: color-mix(in oklab, #d69843 12%, transparent); --color-orange-200: color-mix(in oklab, #d69843 22%, transparent); --color-orange-300: #d69843; --color-orange-400: #d69843; --color-orange-500: #d69843; --color-orange-600: #d69843; --color-orange-700: #d69843; --color-orange-800: #d69843; --color-orange-900: #d69843; --color-orange-950: #d69843; --lo-background: #0a0908; --lo-surface: #121010; --lo-surface-elevated: #1a1717; --lo-text-primary: #f0edea; --lo-text-secondary: #b4b2af; --lo-text-muted: #8b8987; --lo-border: rgba(200, 90, 78, 0.18); --lo-border-strong: rgba(200, 90, 78, 0.34); --lo-accent: #c85a4e; --lo-accent-hover: #d47e75; --lo-accent-subtle: rgba(200, 90, 78, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #70af85; --lo-warning: #d69843; --lo-danger: #cf645a; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0a0908; --mantine-color-text: #f0edea; --mantine-color-dimmed: #8b8987; --mantine-color-default: #121010; --mantine-color-default-hover: #1a1717; --mantine-color-default-color: #f0edea; --mantine-color-default-border: rgba(200, 90, 78, 0.18); --mantine-color-placeholder: #8b8987; --mantine-color-anchor: #c85a4e; --mantine-color-error: #cf645a; --mantine-primary-color-filled: #c85a4e; --mantine-primary-color-filled-hover: #d47e75; --mantine-primary-color-light: rgba(200, 90, 78, 0.13); --mantine-primary-color-light-hover: rgba(200, 90, 78, 0.13); --mantine-primary-color-light-color: #c85a4e; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f0edea; --mantine-color-dark-1: #b4b2af; --mantine-color-dark-2: #b4b2af; --mantine-color-dark-3: #8b8987; --mantine-color-dark-4: rgba(200, 90, 78, 0.18); --mantine-color-dark-5: #1a1717; --mantine-color-dark-6: #121010; --mantine-color-dark-7: #121010; --mantine-color-dark-8: #0a0908; --mantine-color-dark-9: #0a0908; --mantine-color-gray-0: #1a1717; --mantine-color-gray-1: #121010; --mantine-color-gray-2: rgba(200, 90, 78, 0.18); --mantine-color-gray-3: rgba(200, 90, 78, 0.18); --mantine-color-gray-4: #8b8987; --mantine-color-gray-5: #8b8987; --mantine-color-gray-6: #b4b2af; --mantine-color-gray-7: #b4b2af; --mantine-color-gray-8: #f0edea; --mantine-color-gray-9: #f0edea; --mantine-color-brand-light: rgba(200, 90, 78, 0.13); --mantine-color-brand-filled: #c85a4e; --mantine-color-brand-filled-hover: #d47e75; --mantine-color-brand-4: #d47e75; --mantine-color-brand-5: #c85a4e; --mantine-color-brand-6: #c85a4e; --mantine-color-brand-7: #d47e75; --mantine-color-blue-0: rgba(200, 90, 78, 0.13); --mantine-color-blue-4: #d47e75; --mantine-color-blue-5: #c85a4e; --mantine-color-blue-6: #c85a4e; --mantine-color-blue-8: #d47e75; --mantine-color-blue-light: rgba(200, 90, 78, 0.13); --mantine-color-blue-filled: #c85a4e; --mantine-color-green-5: #70af85; --mantine-color-green-6: #70af85; --mantine-color-green-filled: #70af85; --mantine-color-yellow-5: #d69843; --mantine-color-yellow-6: #d69843; --mantine-color-yellow-8: #d69843; --mantine-color-yellow-filled: #d69843; --mantine-color-red-5: #cf645a; --mantine-color-red-6: #cf645a; --mantine-color-red-filled: #cf645a; --surface-card: #121010; --surface-muted: #1a1717; --border-subtle: rgba(200, 90, 78, 0.18); --color-body: #0a0908; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="training"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="training"] .sd-navbar, :root[data-context-mode="full"][data-context="training"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="training"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="training"] .mantine-Card-root, :root[data-context-mode="full"][data-context="training"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="training"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="training"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="training"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="mindset"] { --ctx-accent: #9a8fd0; --ctx-accent-hover: #b0a8da; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="mindset"] { --ctx-accent: #6f6796; --ctx-accent-hover: #6d6887; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="mindset"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="mindset"] { --color-gray-50: #e8e6f2; --color-gray-100: #e8e6f2; --color-gray-200: #aeacb7; --color-gray-300: #aeacb7; --color-gray-400: #85848e; --color-gray-500: #85848e; --color-gray-600: rgba(154, 143, 208, 0.34); --color-gray-700: #161624; --color-gray-800: #0f0f19; --color-gray-900: #08080f; --color-gray-950: #08080f; --color-blue-50: rgba(154, 143, 208, 0.13); --color-blue-100: rgba(154, 143, 208, 0.13); --color-blue-200: rgba(154, 143, 208, 0.13); --color-blue-300: #b0a8da; --color-blue-400: #b0a8da; --color-blue-500: #9a8fd0; --color-blue-600: #9a8fd0; --color-blue-700: #9a8fd0; --color-blue-800: #9a8fd0; --color-blue-900: #9a8fd0; --color-blue-950: #9a8fd0; --color-red-50: color-mix(in oklab, #ca6a6a 12%, transparent); --color-red-100: color-mix(in oklab, #ca6a6a 12%, transparent); --color-red-200: color-mix(in oklab, #ca6a6a 22%, transparent); --color-red-300: #ca6a6a; --color-red-400: #ca6a6a; --color-red-500: #ca6a6a; --color-red-600: #ca6a6a; --color-red-700: #ca6a6a; --color-red-800: #ca6a6a; --color-red-900: #ca6a6a; --color-red-950: #ca6a6a; --color-rose-50: color-mix(in oklab, #ca6a6a 12%, transparent); --color-rose-100: color-mix(in oklab, #ca6a6a 12%, transparent); --color-rose-200: color-mix(in oklab, #ca6a6a 22%, transparent); --color-rose-300: #ca6a6a; --color-rose-400: #ca6a6a; --color-rose-500: #ca6a6a; --color-rose-600: #ca6a6a; --color-rose-700: #ca6a6a; --color-rose-800: #ca6a6a; --color-rose-900: #ca6a6a; --color-rose-950: #ca6a6a; --color-green-50: color-mix(in oklab, #68b799 12%, transparent); --color-green-100: color-mix(in oklab, #68b799 12%, transparent); --color-green-200: color-mix(in oklab, #68b799 22%, transparent); --color-green-300: #68b799; --color-green-400: #68b799; --color-green-500: #68b799; --color-green-600: #68b799; --color-green-700: #68b799; --color-green-800: #68b799; --color-green-900: #68b799; --color-green-950: #68b799; --color-emerald-50: color-mix(in oklab, #68b799 12%, transparent); --color-emerald-100: color-mix(in oklab, #68b799 12%, transparent); --color-emerald-200: color-mix(in oklab, #68b799 22%, transparent); --color-emerald-300: #68b799; --color-emerald-400: #68b799; --color-emerald-500: #68b799; --color-emerald-600: #68b799; --color-emerald-700: #68b799; --color-emerald-800: #68b799; --color-emerald-900: #68b799; --color-emerald-950: #68b799; --color-yellow-50: color-mix(in oklab, #cfa158 12%, transparent); --color-yellow-100: color-mix(in oklab, #cfa158 12%, transparent); --color-yellow-200: color-mix(in oklab, #cfa158 22%, transparent); --color-yellow-300: #cfa158; --color-yellow-400: #cfa158; --color-yellow-500: #cfa158; --color-yellow-600: #cfa158; --color-yellow-700: #cfa158; --color-yellow-800: #cfa158; --color-yellow-900: #cfa158; --color-yellow-950: #cfa158; --color-amber-50: color-mix(in oklab, #cfa158 12%, transparent); --color-amber-100: color-mix(in oklab, #cfa158 12%, transparent); --color-amber-200: color-mix(in oklab, #cfa158 22%, transparent); --color-amber-300: #cfa158; --color-amber-400: #cfa158; --color-amber-500: #cfa158; --color-amber-600: #cfa158; --color-amber-700: #cfa158; --color-amber-800: #cfa158; --color-amber-900: #cfa158; --color-amber-950: #cfa158; --color-orange-50: color-mix(in oklab, #cfa158 12%, transparent); --color-orange-100: color-mix(in oklab, #cfa158 12%, transparent); --color-orange-200: color-mix(in oklab, #cfa158 22%, transparent); --color-orange-300: #cfa158; --color-orange-400: #cfa158; --color-orange-500: #cfa158; --color-orange-600: #cfa158; --color-orange-700: #cfa158; --color-orange-800: #cfa158; --color-orange-900: #cfa158; --color-orange-950: #cfa158; --lo-background: #08080f; --lo-surface: #0f0f19; --lo-surface-elevated: #161624; --lo-text-primary: #e8e6f2; --lo-text-secondary: #aeacb7; --lo-text-muted: #85848e; --lo-border: rgba(154, 143, 208, 0.18); --lo-border-strong: rgba(154, 143, 208, 0.34); --lo-accent: #9a8fd0; --lo-accent-hover: #b0a8da; --lo-accent-subtle: rgba(154, 143, 208, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #68b799; --lo-warning: #cfa158; --lo-danger: #ca6a6a; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #08080f; --mantine-color-text: #e8e6f2; --mantine-color-dimmed: #85848e; --mantine-color-default: #0f0f19; --mantine-color-default-hover: #161624; --mantine-color-default-color: #e8e6f2; --mantine-color-default-border: rgba(154, 143, 208, 0.18); --mantine-color-placeholder: #85848e; --mantine-color-anchor: #9a8fd0; --mantine-color-error: #ca6a6a; --mantine-primary-color-filled: #9a8fd0; --mantine-primary-color-filled-hover: #b0a8da; --mantine-primary-color-light: rgba(154, 143, 208, 0.13); --mantine-primary-color-light-hover: rgba(154, 143, 208, 0.13); --mantine-primary-color-light-color: #9a8fd0; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e8e6f2; --mantine-color-dark-1: #aeacb7; --mantine-color-dark-2: #aeacb7; --mantine-color-dark-3: #85848e; --mantine-color-dark-4: rgba(154, 143, 208, 0.18); --mantine-color-dark-5: #161624; --mantine-color-dark-6: #0f0f19; --mantine-color-dark-7: #0f0f19; --mantine-color-dark-8: #08080f; --mantine-color-dark-9: #08080f; --mantine-color-gray-0: #161624; --mantine-color-gray-1: #0f0f19; --mantine-color-gray-2: rgba(154, 143, 208, 0.18); --mantine-color-gray-3: rgba(154, 143, 208, 0.18); --mantine-color-gray-4: #85848e; --mantine-color-gray-5: #85848e; --mantine-color-gray-6: #aeacb7; --mantine-color-gray-7: #aeacb7; --mantine-color-gray-8: #e8e6f2; --mantine-color-gray-9: #e8e6f2; --mantine-color-brand-light: rgba(154, 143, 208, 0.13); --mantine-color-brand-filled: #9a8fd0; --mantine-color-brand-filled-hover: #b0a8da; --mantine-color-brand-4: #b0a8da; --mantine-color-brand-5: #9a8fd0; --mantine-color-brand-6: #9a8fd0; --mantine-color-brand-7: #b0a8da; --mantine-color-blue-0: rgba(154, 143, 208, 0.13); --mantine-color-blue-4: #b0a8da; --mantine-color-blue-5: #9a8fd0; --mantine-color-blue-6: #9a8fd0; --mantine-color-blue-8: #b0a8da; --mantine-color-blue-light: rgba(154, 143, 208, 0.13); --mantine-color-blue-filled: #9a8fd0; --mantine-color-green-5: #68b799; --mantine-color-green-6: #68b799; --mantine-color-green-filled: #68b799; --mantine-color-yellow-5: #cfa158; --mantine-color-yellow-6: #cfa158; --mantine-color-yellow-8: #cfa158; --mantine-color-yellow-filled: #cfa158; --mantine-color-red-5: #ca6a6a; --mantine-color-red-6: #ca6a6a; --mantine-color-red-filled: #ca6a6a; --surface-card: #0f0f19; --surface-muted: #161624; --border-subtle: rgba(154, 143, 208, 0.18); --color-body: #08080f; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="mindset"] body { background-image: repeating-linear-gradient(41deg, color-mix(in oklab, var(--lo-text-primary) 1.4%, transparent) 0 1px, transparent 1px 6px), radial-gradient(130% 70% at 50% -14%, color-mix(in oklab, var(--lo-accent) 12%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 50% 118%, color-mix(in oklab, #000 26%, transparent) 0%, transparent 55%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="mindset"] .sd-navbar, :root[data-context-mode="full"][data-context="mindset"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 6%, transparent) 0%, transparent 38%); } :root[data-context-mode="full"][data-context="mindset"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="mindset"] .mantine-Card-root, :root[data-context-mode="full"][data-context="mindset"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="mindset"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="mindset"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="mindset"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, var(--lo-accent) 4%, transparent) 0%, transparent 46%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--lo-accent) 26%, transparent); } :root[data-context="finance"] { --ctx-accent: #4fa87f; --ctx-accent-hover: #76bb9b; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 1; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="finance"] { --ctx-accent: #3a7c5e; --ctx-accent-hover: #4c7863; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="finance"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="finance"] { --color-gray-50: #e6eae6; --color-gray-100: #e6eae6; --color-gray-200: #acafac; --color-gray-300: #acafac; --color-gray-400: #838783; --color-gray-500: #838783; --color-gray-600: rgba(79, 168, 127, 0.34); --color-gray-700: #141915; --color-gray-800: #0d110e; --color-gray-900: #060806; --color-gray-950: #060806; --color-blue-50: rgba(79, 168, 127, 0.13); --color-blue-100: rgba(79, 168, 127, 0.13); --color-blue-200: rgba(79, 168, 127, 0.13); --color-blue-300: #76bb9b; --color-blue-400: #76bb9b; --color-blue-500: #4fa87f; --color-blue-600: #4fa87f; --color-blue-700: #4fa87f; --color-blue-800: #4fa87f; --color-blue-900: #4fa87f; --color-blue-950: #4fa87f; --color-red-50: color-mix(in oklab, #c16d60 12%, transparent); --color-red-100: color-mix(in oklab, #c16d60 12%, transparent); --color-red-200: color-mix(in oklab, #c16d60 22%, transparent); --color-red-300: #c16d60; --color-red-400: #c16d60; --color-red-500: #c16d60; --color-red-600: #c16d60; --color-red-700: #c16d60; --color-red-800: #c16d60; --color-red-900: #c16d60; --color-red-950: #c16d60; --color-rose-50: color-mix(in oklab, #c16d60 12%, transparent); --color-rose-100: color-mix(in oklab, #c16d60 12%, transparent); --color-rose-200: color-mix(in oklab, #c16d60 22%, transparent); --color-rose-300: #c16d60; --color-rose-400: #c16d60; --color-rose-500: #c16d60; --color-rose-600: #c16d60; --color-rose-700: #c16d60; --color-rose-800: #c16d60; --color-rose-900: #c16d60; --color-rose-950: #c16d60; --color-green-50: color-mix(in oklab, #5cbb8c 12%, transparent); --color-green-100: color-mix(in oklab, #5cbb8c 12%, transparent); --color-green-200: color-mix(in oklab, #5cbb8c 22%, transparent); --color-green-300: #5cbb8c; --color-green-400: #5cbb8c; --color-green-500: #5cbb8c; --color-green-600: #5cbb8c; --color-green-700: #5cbb8c; --color-green-800: #5cbb8c; --color-green-900: #5cbb8c; --color-green-950: #5cbb8c; --color-emerald-50: color-mix(in oklab, #5cbb8c 12%, transparent); --color-emerald-100: color-mix(in oklab, #5cbb8c 12%, transparent); --color-emerald-200: color-mix(in oklab, #5cbb8c 22%, transparent); --color-emerald-300: #5cbb8c; --color-emerald-400: #5cbb8c; --color-emerald-500: #5cbb8c; --color-emerald-600: #5cbb8c; --color-emerald-700: #5cbb8c; --color-emerald-800: #5cbb8c; --color-emerald-900: #5cbb8c; --color-emerald-950: #5cbb8c; --color-yellow-50: color-mix(in oklab, #c3a54b 12%, transparent); --color-yellow-100: color-mix(in oklab, #c3a54b 12%, transparent); --color-yellow-200: color-mix(in oklab, #c3a54b 22%, transparent); --color-yellow-300: #c3a54b; --color-yellow-400: #c3a54b; --color-yellow-500: #c3a54b; --color-yellow-600: #c3a54b; --color-yellow-700: #c3a54b; --color-yellow-800: #c3a54b; --color-yellow-900: #c3a54b; --color-yellow-950: #c3a54b; --color-amber-50: color-mix(in oklab, #c3a54b 12%, transparent); --color-amber-100: color-mix(in oklab, #c3a54b 12%, transparent); --color-amber-200: color-mix(in oklab, #c3a54b 22%, transparent); --color-amber-300: #c3a54b; --color-amber-400: #c3a54b; --color-amber-500: #c3a54b; --color-amber-600: #c3a54b; --color-amber-700: #c3a54b; --color-amber-800: #c3a54b; --color-amber-900: #c3a54b; --color-amber-950: #c3a54b; --color-orange-50: color-mix(in oklab, #c3a54b 12%, transparent); --color-orange-100: color-mix(in oklab, #c3a54b 12%, transparent); --color-orange-200: color-mix(in oklab, #c3a54b 22%, transparent); --color-orange-300: #c3a54b; --color-orange-400: #c3a54b; --color-orange-500: #c3a54b; --color-orange-600: #c3a54b; --color-orange-700: #c3a54b; --color-orange-800: #c3a54b; --color-orange-900: #c3a54b; --color-orange-950: #c3a54b; --lo-background: #060806; --lo-surface: #0d110e; --lo-surface-elevated: #141915; --lo-text-primary: #e6eae6; --lo-text-secondary: #acafac; --lo-text-muted: #838783; --lo-border: rgba(79, 168, 127, 0.18); --lo-border-strong: rgba(79, 168, 127, 0.34); --lo-accent: #4fa87f; --lo-accent-hover: #76bb9b; --lo-accent-subtle: rgba(79, 168, 127, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #5cbb8c; --lo-warning: #c3a54b; --lo-danger: #c16d60; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #060806; --mantine-color-text: #e6eae6; --mantine-color-dimmed: #838783; --mantine-color-default: #0d110e; --mantine-color-default-hover: #141915; --mantine-color-default-color: #e6eae6; --mantine-color-default-border: rgba(79, 168, 127, 0.18); --mantine-color-placeholder: #838783; --mantine-color-anchor: #4fa87f; --mantine-color-error: #c16d60; --mantine-primary-color-filled: #4fa87f; --mantine-primary-color-filled-hover: #76bb9b; --mantine-primary-color-light: rgba(79, 168, 127, 0.13); --mantine-primary-color-light-hover: rgba(79, 168, 127, 0.13); --mantine-primary-color-light-color: #4fa87f; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e6eae6; --mantine-color-dark-1: #acafac; --mantine-color-dark-2: #acafac; --mantine-color-dark-3: #838783; --mantine-color-dark-4: rgba(79, 168, 127, 0.18); --mantine-color-dark-5: #141915; --mantine-color-dark-6: #0d110e; --mantine-color-dark-7: #0d110e; --mantine-color-dark-8: #060806; --mantine-color-dark-9: #060806; --mantine-color-gray-0: #141915; --mantine-color-gray-1: #0d110e; --mantine-color-gray-2: rgba(79, 168, 127, 0.18); --mantine-color-gray-3: rgba(79, 168, 127, 0.18); --mantine-color-gray-4: #838783; --mantine-color-gray-5: #838783; --mantine-color-gray-6: #acafac; --mantine-color-gray-7: #acafac; --mantine-color-gray-8: #e6eae6; --mantine-color-gray-9: #e6eae6; --mantine-color-brand-light: rgba(79, 168, 127, 0.13); --mantine-color-brand-filled: #4fa87f; --mantine-color-brand-filled-hover: #76bb9b; --mantine-color-brand-4: #76bb9b; --mantine-color-brand-5: #4fa87f; --mantine-color-brand-6: #4fa87f; --mantine-color-brand-7: #76bb9b; --mantine-color-blue-0: rgba(79, 168, 127, 0.13); --mantine-color-blue-4: #76bb9b; --mantine-color-blue-5: #4fa87f; --mantine-color-blue-6: #4fa87f; --mantine-color-blue-8: #76bb9b; --mantine-color-blue-light: rgba(79, 168, 127, 0.13); --mantine-color-blue-filled: #4fa87f; --mantine-color-green-5: #5cbb8c; --mantine-color-green-6: #5cbb8c; --mantine-color-green-filled: #5cbb8c; --mantine-color-yellow-5: #c3a54b; --mantine-color-yellow-6: #c3a54b; --mantine-color-yellow-8: #c3a54b; --mantine-color-yellow-filled: #c3a54b; --mantine-color-red-5: #c16d60; --mantine-color-red-6: #c16d60; --mantine-color-red-filled: #c16d60; --surface-card: #0d110e; --surface-muted: #141915; --border-subtle: rgba(79, 168, 127, 0.18); --color-body: #060806; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="finance"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="finance"] .sd-navbar, :root[data-context-mode="full"][data-context="finance"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="finance"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="finance"] .mantine-Card-root, :root[data-context-mode="full"][data-context="finance"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="finance"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="finance"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="finance"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="inventory"] { --ctx-accent: #c9b48c; --ctx-accent-hover: #d5c5a5; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="inventory"] { --ctx-accent: #796c54; --ctx-accent-hover: #776e5c; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="inventory"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="inventory"] { --color-gray-50: #f2f0ec; --color-gray-100: #f2f0ec; --color-gray-200: #b6b4b1; --color-gray-300: #b6b4b1; --color-gray-400: #8c8b89; --color-gray-500: #8c8b89; --color-gray-600: rgba(201, 180, 140, 0.34); --color-gray-700: #1a1a1a; --color-gray-800: #121212; --color-gray-900: #0a0a0a; --color-gray-950: #0a0a0a; --color-blue-50: rgba(201, 180, 140, 0.13); --color-blue-100: rgba(201, 180, 140, 0.13); --color-blue-200: rgba(201, 180, 140, 0.13); --color-blue-300: #d5c5a5; --color-blue-400: #d5c5a5; --color-blue-500: #c9b48c; --color-blue-600: #c9b48c; --color-blue-700: #c9b48c; --color-blue-800: #c9b48c; --color-blue-900: #c9b48c; --color-blue-950: #c9b48c; --color-red-50: color-mix(in oklab, #cf6e62 12%, transparent); --color-red-100: color-mix(in oklab, #cf6e62 12%, transparent); --color-red-200: color-mix(in oklab, #cf6e62 22%, transparent); --color-red-300: #cf6e62; --color-red-400: #cf6e62; --color-red-500: #cf6e62; --color-red-600: #cf6e62; --color-red-700: #cf6e62; --color-red-800: #cf6e62; --color-red-900: #cf6e62; --color-red-950: #cf6e62; --color-rose-50: color-mix(in oklab, #cf6e62 12%, transparent); --color-rose-100: color-mix(in oklab, #cf6e62 12%, transparent); --color-rose-200: color-mix(in oklab, #cf6e62 22%, transparent); --color-rose-300: #cf6e62; --color-rose-400: #cf6e62; --color-rose-500: #cf6e62; --color-rose-600: #cf6e62; --color-rose-700: #cf6e62; --color-rose-800: #cf6e62; --color-rose-900: #cf6e62; --color-rose-950: #cf6e62; --color-green-50: color-mix(in oklab, #70bd8f 12%, transparent); --color-green-100: color-mix(in oklab, #70bd8f 12%, transparent); --color-green-200: color-mix(in oklab, #70bd8f 22%, transparent); --color-green-300: #70bd8f; --color-green-400: #70bd8f; --color-green-500: #70bd8f; --color-green-600: #70bd8f; --color-green-700: #70bd8f; --color-green-800: #70bd8f; --color-green-900: #70bd8f; --color-green-950: #70bd8f; --color-emerald-50: color-mix(in oklab, #70bd8f 12%, transparent); --color-emerald-100: color-mix(in oklab, #70bd8f 12%, transparent); --color-emerald-200: color-mix(in oklab, #70bd8f 22%, transparent); --color-emerald-300: #70bd8f; --color-emerald-400: #70bd8f; --color-emerald-500: #70bd8f; --color-emerald-600: #70bd8f; --color-emerald-700: #70bd8f; --color-emerald-800: #70bd8f; --color-emerald-900: #70bd8f; --color-emerald-950: #70bd8f; --color-yellow-50: color-mix(in oklab, #d6a74d 12%, transparent); --color-yellow-100: color-mix(in oklab, #d6a74d 12%, transparent); --color-yellow-200: color-mix(in oklab, #d6a74d 22%, transparent); --color-yellow-300: #d6a74d; --color-yellow-400: #d6a74d; --color-yellow-500: #d6a74d; --color-yellow-600: #d6a74d; --color-yellow-700: #d6a74d; --color-yellow-800: #d6a74d; --color-yellow-900: #d6a74d; --color-yellow-950: #d6a74d; --color-amber-50: color-mix(in oklab, #d6a74d 12%, transparent); --color-amber-100: color-mix(in oklab, #d6a74d 12%, transparent); --color-amber-200: color-mix(in oklab, #d6a74d 22%, transparent); --color-amber-300: #d6a74d; --color-amber-400: #d6a74d; --color-amber-500: #d6a74d; --color-amber-600: #d6a74d; --color-amber-700: #d6a74d; --color-amber-800: #d6a74d; --color-amber-900: #d6a74d; --color-amber-950: #d6a74d; --color-orange-50: color-mix(in oklab, #d6a74d 12%, transparent); --color-orange-100: color-mix(in oklab, #d6a74d 12%, transparent); --color-orange-200: color-mix(in oklab, #d6a74d 22%, transparent); --color-orange-300: #d6a74d; --color-orange-400: #d6a74d; --color-orange-500: #d6a74d; --color-orange-600: #d6a74d; --color-orange-700: #d6a74d; --color-orange-800: #d6a74d; --color-orange-900: #d6a74d; --color-orange-950: #d6a74d; --lo-background: #0a0a0a; --lo-surface: #121212; --lo-surface-elevated: #1a1a1a; --lo-text-primary: #f2f0ec; --lo-text-secondary: #b6b4b1; --lo-text-muted: #8c8b89; --lo-border: rgba(201, 180, 140, 0.18); --lo-border-strong: rgba(201, 180, 140, 0.34); --lo-accent: #c9b48c; --lo-accent-hover: #d5c5a5; --lo-accent-subtle: rgba(201, 180, 140, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #70bd8f; --lo-warning: #d6a74d; --lo-danger: #cf6e62; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0a0a0a; --mantine-color-text: #f2f0ec; --mantine-color-dimmed: #8c8b89; --mantine-color-default: #121212; --mantine-color-default-hover: #1a1a1a; --mantine-color-default-color: #f2f0ec; --mantine-color-default-border: rgba(201, 180, 140, 0.18); --mantine-color-placeholder: #8c8b89; --mantine-color-anchor: #c9b48c; --mantine-color-error: #cf6e62; --mantine-primary-color-filled: #c9b48c; --mantine-primary-color-filled-hover: #d5c5a5; --mantine-primary-color-light: rgba(201, 180, 140, 0.13); --mantine-primary-color-light-hover: rgba(201, 180, 140, 0.13); --mantine-primary-color-light-color: #c9b48c; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f2f0ec; --mantine-color-dark-1: #b6b4b1; --mantine-color-dark-2: #b6b4b1; --mantine-color-dark-3: #8c8b89; --mantine-color-dark-4: rgba(201, 180, 140, 0.18); --mantine-color-dark-5: #1a1a1a; --mantine-color-dark-6: #121212; --mantine-color-dark-7: #121212; --mantine-color-dark-8: #0a0a0a; --mantine-color-dark-9: #0a0a0a; --mantine-color-gray-0: #1a1a1a; --mantine-color-gray-1: #121212; --mantine-color-gray-2: rgba(201, 180, 140, 0.18); --mantine-color-gray-3: rgba(201, 180, 140, 0.18); --mantine-color-gray-4: #8c8b89; --mantine-color-gray-5: #8c8b89; --mantine-color-gray-6: #b6b4b1; --mantine-color-gray-7: #b6b4b1; --mantine-color-gray-8: #f2f0ec; --mantine-color-gray-9: #f2f0ec; --mantine-color-brand-light: rgba(201, 180, 140, 0.13); --mantine-color-brand-filled: #c9b48c; --mantine-color-brand-filled-hover: #d5c5a5; --mantine-color-brand-4: #d5c5a5; --mantine-color-brand-5: #c9b48c; --mantine-color-brand-6: #c9b48c; --mantine-color-brand-7: #d5c5a5; --mantine-color-blue-0: rgba(201, 180, 140, 0.13); --mantine-color-blue-4: #d5c5a5; --mantine-color-blue-5: #c9b48c; --mantine-color-blue-6: #c9b48c; --mantine-color-blue-8: #d5c5a5; --mantine-color-blue-light: rgba(201, 180, 140, 0.13); --mantine-color-blue-filled: #c9b48c; --mantine-color-green-5: #70bd8f; --mantine-color-green-6: #70bd8f; --mantine-color-green-filled: #70bd8f; --mantine-color-yellow-5: #d6a74d; --mantine-color-yellow-6: #d6a74d; --mantine-color-yellow-8: #d6a74d; --mantine-color-yellow-filled: #d6a74d; --mantine-color-red-5: #cf6e62; --mantine-color-red-6: #cf6e62; --mantine-color-red-filled: #cf6e62; --surface-card: #121212; --surface-muted: #1a1a1a; --border-subtle: rgba(201, 180, 140, 0.18); --color-body: #0a0a0a; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="inventory"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="inventory"] .sd-navbar, :root[data-context-mode="full"][data-context="inventory"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="inventory"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="inventory"] .mantine-Card-root, :root[data-context-mode="full"][data-context="inventory"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="inventory"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="inventory"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="inventory"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="wardrobe"] { --ctx-accent: #b0808c; --ctx-accent-hover: #c19ca5; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.9; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="wardrobe"] { --ctx-accent: #89646d; --ctx-accent-hover: #7f676d; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="wardrobe"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="wardrobe"] { --color-gray-50: #f2eeee; --color-gray-100: #f2eeee; --color-gray-200: #b6b2b2; --color-gray-300: #b6b2b2; --color-gray-400: #8c8989; --color-gray-500: #8c8989; --color-gray-600: rgba(176, 128, 140, 0.34); --color-gray-700: #1b1818; --color-gray-800: #131111; --color-gray-900: #0a0909; --color-gray-950: #0a0909; --color-blue-50: rgba(176, 128, 140, 0.13); --color-blue-100: rgba(176, 128, 140, 0.13); --color-blue-200: rgba(176, 128, 140, 0.13); --color-blue-300: #c19ca5; --color-blue-400: #c19ca5; --color-blue-500: #b0808c; --color-blue-600: #b0808c; --color-blue-700: #b0808c; --color-blue-800: #b0808c; --color-blue-900: #b0808c; --color-blue-950: #b0808c; --color-red-50: color-mix(in oklab, #cc6862 12%, transparent); --color-red-100: color-mix(in oklab, #cc6862 12%, transparent); --color-red-200: color-mix(in oklab, #cc6862 22%, transparent); --color-red-300: #cc6862; --color-red-400: #cc6862; --color-red-500: #cc6862; --color-red-600: #cc6862; --color-red-700: #cc6862; --color-red-800: #cc6862; --color-red-900: #cc6862; --color-red-950: #cc6862; --color-rose-50: color-mix(in oklab, #cc6862 12%, transparent); --color-rose-100: color-mix(in oklab, #cc6862 12%, transparent); --color-rose-200: color-mix(in oklab, #cc6862 22%, transparent); --color-rose-300: #cc6862; --color-rose-400: #cc6862; --color-rose-500: #cc6862; --color-rose-600: #cc6862; --color-rose-700: #cc6862; --color-rose-800: #cc6862; --color-rose-900: #cc6862; --color-rose-950: #cc6862; --color-green-50: color-mix(in oklab, #6cb58f 12%, transparent); --color-green-100: color-mix(in oklab, #6cb58f 12%, transparent); --color-green-200: color-mix(in oklab, #6cb58f 22%, transparent); --color-green-300: #6cb58f; --color-green-400: #6cb58f; --color-green-500: #6cb58f; --color-green-600: #6cb58f; --color-green-700: #6cb58f; --color-green-800: #6cb58f; --color-green-900: #6cb58f; --color-green-950: #6cb58f; --color-emerald-50: color-mix(in oklab, #6cb58f 12%, transparent); --color-emerald-100: color-mix(in oklab, #6cb58f 12%, transparent); --color-emerald-200: color-mix(in oklab, #6cb58f 22%, transparent); --color-emerald-300: #6cb58f; --color-emerald-400: #6cb58f; --color-emerald-500: #6cb58f; --color-emerald-600: #6cb58f; --color-emerald-700: #6cb58f; --color-emerald-800: #6cb58f; --color-emerald-900: #6cb58f; --color-emerald-950: #6cb58f; --color-yellow-50: color-mix(in oklab, #d29e4d 12%, transparent); --color-yellow-100: color-mix(in oklab, #d29e4d 12%, transparent); --color-yellow-200: color-mix(in oklab, #d29e4d 22%, transparent); --color-yellow-300: #d29e4d; --color-yellow-400: #d29e4d; --color-yellow-500: #d29e4d; --color-yellow-600: #d29e4d; --color-yellow-700: #d29e4d; --color-yellow-800: #d29e4d; --color-yellow-900: #d29e4d; --color-yellow-950: #d29e4d; --color-amber-50: color-mix(in oklab, #d29e4d 12%, transparent); --color-amber-100: color-mix(in oklab, #d29e4d 12%, transparent); --color-amber-200: color-mix(in oklab, #d29e4d 22%, transparent); --color-amber-300: #d29e4d; --color-amber-400: #d29e4d; --color-amber-500: #d29e4d; --color-amber-600: #d29e4d; --color-amber-700: #d29e4d; --color-amber-800: #d29e4d; --color-amber-900: #d29e4d; --color-amber-950: #d29e4d; --color-orange-50: color-mix(in oklab, #d29e4d 12%, transparent); --color-orange-100: color-mix(in oklab, #d29e4d 12%, transparent); --color-orange-200: color-mix(in oklab, #d29e4d 22%, transparent); --color-orange-300: #d29e4d; --color-orange-400: #d29e4d; --color-orange-500: #d29e4d; --color-orange-600: #d29e4d; --color-orange-700: #d29e4d; --color-orange-800: #d29e4d; --color-orange-900: #d29e4d; --color-orange-950: #d29e4d; --lo-background: #0a0909; --lo-surface: #131111; --lo-surface-elevated: #1b1818; --lo-text-primary: #f2eeee; --lo-text-secondary: #b6b2b2; --lo-text-muted: #8c8989; --lo-border: rgba(176, 128, 140, 0.18); --lo-border-strong: rgba(176, 128, 140, 0.34); --lo-accent: #b0808c; --lo-accent-hover: #c19ca5; --lo-accent-subtle: rgba(176, 128, 140, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #6cb58f; --lo-warning: #d29e4d; --lo-danger: #cc6862; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #0a0909; --mantine-color-text: #f2eeee; --mantine-color-dimmed: #8c8989; --mantine-color-default: #131111; --mantine-color-default-hover: #1b1818; --mantine-color-default-color: #f2eeee; --mantine-color-default-border: rgba(176, 128, 140, 0.18); --mantine-color-placeholder: #8c8989; --mantine-color-anchor: #b0808c; --mantine-color-error: #cc6862; --mantine-primary-color-filled: #b0808c; --mantine-primary-color-filled-hover: #c19ca5; --mantine-primary-color-light: rgba(176, 128, 140, 0.13); --mantine-primary-color-light-hover: rgba(176, 128, 140, 0.13); --mantine-primary-color-light-color: #b0808c; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #f2eeee; --mantine-color-dark-1: #b6b2b2; --mantine-color-dark-2: #b6b2b2; --mantine-color-dark-3: #8c8989; --mantine-color-dark-4: rgba(176, 128, 140, 0.18); --mantine-color-dark-5: #1b1818; --mantine-color-dark-6: #131111; --mantine-color-dark-7: #131111; --mantine-color-dark-8: #0a0909; --mantine-color-dark-9: #0a0909; --mantine-color-gray-0: #1b1818; --mantine-color-gray-1: #131111; --mantine-color-gray-2: rgba(176, 128, 140, 0.18); --mantine-color-gray-3: rgba(176, 128, 140, 0.18); --mantine-color-gray-4: #8c8989; --mantine-color-gray-5: #8c8989; --mantine-color-gray-6: #b6b2b2; --mantine-color-gray-7: #b6b2b2; --mantine-color-gray-8: #f2eeee; --mantine-color-gray-9: #f2eeee; --mantine-color-brand-light: rgba(176, 128, 140, 0.13); --mantine-color-brand-filled: #b0808c; --mantine-color-brand-filled-hover: #c19ca5; --mantine-color-brand-4: #c19ca5; --mantine-color-brand-5: #b0808c; --mantine-color-brand-6: #b0808c; --mantine-color-brand-7: #c19ca5; --mantine-color-blue-0: rgba(176, 128, 140, 0.13); --mantine-color-blue-4: #c19ca5; --mantine-color-blue-5: #b0808c; --mantine-color-blue-6: #b0808c; --mantine-color-blue-8: #c19ca5; --mantine-color-blue-light: rgba(176, 128, 140, 0.13); --mantine-color-blue-filled: #b0808c; --mantine-color-green-5: #6cb58f; --mantine-color-green-6: #6cb58f; --mantine-color-green-filled: #6cb58f; --mantine-color-yellow-5: #d29e4d; --mantine-color-yellow-6: #d29e4d; --mantine-color-yellow-8: #d29e4d; --mantine-color-yellow-filled: #d29e4d; --mantine-color-red-5: #cc6862; --mantine-color-red-6: #cc6862; --mantine-color-red-filled: #cc6862; --surface-card: #131111; --surface-muted: #1b1818; --border-subtle: rgba(176, 128, 140, 0.18); --color-body: #0a0909; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="wardrobe"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="wardrobe"] .sd-navbar, :root[data-context-mode="full"][data-context="wardrobe"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="wardrobe"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="wardrobe"] .mantine-Card-root, :root[data-context-mode="full"][data-context="wardrobe"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="wardrobe"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="wardrobe"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="wardrobe"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } :root[data-context="settings"] { --ctx-accent: #6fb8c9; --ctx-accent-hover: #8fc8d5; --ctx-accent-contrast: #0a0a0c; --ctx-weight: 0.6; } /* A lit room needs the same colour taken down rather than up. */ :root[data-mantine-color-scheme="light"][data-context="settings"] { --ctx-accent: #477681; --ctx-accent-hover: #53747c; --ctx-accent-contrast: #fbfbfa; } :root[data-context-mode="tint"][data-context="settings"] { --lo-accent: var(--ctx-accent); --lo-accent-hover: var(--ctx-accent-hover); --lo-accent-contrast: var(--ctx-accent-contrast); --lo-accent-subtle: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-anchor: var(--ctx-accent); --mantine-primary-color-filled: var(--ctx-accent); --mantine-primary-color-filled-hover: var(--ctx-accent-hover); --mantine-primary-color-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-primary-color-light-color: var(--ctx-accent); --mantine-primary-color-contrast: var(--ctx-accent-contrast); --mantine-color-brand-filled: var(--ctx-accent); --mantine-color-brand-filled-hover: var(--ctx-accent-hover); --mantine-color-brand-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-brand-5: var(--ctx-accent); --mantine-color-brand-6: var(--ctx-accent); --mantine-color-blue-5: var(--ctx-accent); --mantine-color-blue-6: var(--ctx-accent); --mantine-color-blue-light: color-mix(in oklab, var(--ctx-accent) 13%, transparent); --mantine-color-blue-filled: var(--ctx-accent); --color-blue-500: var(--ctx-accent); --color-blue-600: var(--ctx-accent); } /* * The whole room. Same bridge the global themes use, so every one of the 187 * variables a page might read is answered by this feature's palette — and the * atmosphere with it, at full strength rather than as a wash. */ :root[data-context-mode="full"][data-context="settings"] { --color-gray-50: #e8ecee; --color-gray-100: #e8ecee; --color-gray-200: #aeb1b3; --color-gray-300: #aeb1b3; --color-gray-400: #85888a; --color-gray-500: #85888a; --color-gray-600: rgba(111, 184, 201, 0.34); --color-gray-700: #151819; --color-gray-800: #0e1112; --color-gray-900: #07090a; --color-gray-950: #07090a; --color-blue-50: rgba(111, 184, 201, 0.13); --color-blue-100: rgba(111, 184, 201, 0.13); --color-blue-200: rgba(111, 184, 201, 0.13); --color-blue-300: #8fc8d5; --color-blue-400: #8fc8d5; --color-blue-500: #6fb8c9; --color-blue-600: #6fb8c9; --color-blue-700: #6fb8c9; --color-blue-800: #6fb8c9; --color-blue-900: #6fb8c9; --color-blue-950: #6fb8c9; --color-red-50: color-mix(in oklab, #c46f69 12%, transparent); --color-red-100: color-mix(in oklab, #c46f69 12%, transparent); --color-red-200: color-mix(in oklab, #c46f69 22%, transparent); --color-red-300: #c46f69; --color-red-400: #c46f69; --color-red-500: #c46f69; --color-red-600: #c46f69; --color-red-700: #c46f69; --color-red-800: #c46f69; --color-red-900: #c46f69; --color-red-950: #c46f69; --color-rose-50: color-mix(in oklab, #c46f69 12%, transparent); --color-rose-100: color-mix(in oklab, #c46f69 12%, transparent); --color-rose-200: color-mix(in oklab, #c46f69 22%, transparent); --color-rose-300: #c46f69; --color-rose-400: #c46f69; --color-rose-500: #c46f69; --color-rose-600: #c46f69; --color-rose-700: #c46f69; --color-rose-800: #c46f69; --color-rose-900: #c46f69; --color-rose-950: #c46f69; --color-green-50: color-mix(in oklab, #62be98 12%, transparent); --color-green-100: color-mix(in oklab, #62be98 12%, transparent); --color-green-200: color-mix(in oklab, #62be98 22%, transparent); --color-green-300: #62be98; --color-green-400: #62be98; --color-green-500: #62be98; --color-green-600: #62be98; --color-green-700: #62be98; --color-green-800: #62be98; --color-green-900: #62be98; --color-green-950: #62be98; --color-emerald-50: color-mix(in oklab, #62be98 12%, transparent); --color-emerald-100: color-mix(in oklab, #62be98 12%, transparent); --color-emerald-200: color-mix(in oklab, #62be98 22%, transparent); --color-emerald-300: #62be98; --color-emerald-400: #62be98; --color-emerald-500: #62be98; --color-emerald-600: #62be98; --color-emerald-700: #62be98; --color-emerald-800: #62be98; --color-emerald-900: #62be98; --color-emerald-950: #62be98; --color-yellow-50: color-mix(in oklab, #c8a757 12%, transparent); --color-yellow-100: color-mix(in oklab, #c8a757 12%, transparent); --color-yellow-200: color-mix(in oklab, #c8a757 22%, transparent); --color-yellow-300: #c8a757; --color-yellow-400: #c8a757; --color-yellow-500: #c8a757; --color-yellow-600: #c8a757; --color-yellow-700: #c8a757; --color-yellow-800: #c8a757; --color-yellow-900: #c8a757; --color-yellow-950: #c8a757; --color-amber-50: color-mix(in oklab, #c8a757 12%, transparent); --color-amber-100: color-mix(in oklab, #c8a757 12%, transparent); --color-amber-200: color-mix(in oklab, #c8a757 22%, transparent); --color-amber-300: #c8a757; --color-amber-400: #c8a757; --color-amber-500: #c8a757; --color-amber-600: #c8a757; --color-amber-700: #c8a757; --color-amber-800: #c8a757; --color-amber-900: #c8a757; --color-amber-950: #c8a757; --color-orange-50: color-mix(in oklab, #c8a757 12%, transparent); --color-orange-100: color-mix(in oklab, #c8a757 12%, transparent); --color-orange-200: color-mix(in oklab, #c8a757 22%, transparent); --color-orange-300: #c8a757; --color-orange-400: #c8a757; --color-orange-500: #c8a757; --color-orange-600: #c8a757; --color-orange-700: #c8a757; --color-orange-800: #c8a757; --color-orange-900: #c8a757; --color-orange-950: #c8a757; --lo-background: #07090a; --lo-surface: #0e1112; --lo-surface-elevated: #151819; --lo-text-primary: #e8ecee; --lo-text-secondary: #aeb1b3; --lo-text-muted: #85888a; --lo-border: rgba(111, 184, 201, 0.18); --lo-border-strong: rgba(111, 184, 201, 0.34); --lo-accent: #6fb8c9; --lo-accent-hover: #8fc8d5; --lo-accent-subtle: rgba(111, 184, 201, 0.13); --lo-accent-contrast: #0a0a0c; --lo-success: #62be98; --lo-warning: #c8a757; --lo-danger: #c46f69; --lo-shadow: rgba(0, 0, 0, 0.62); --mantine-color-body: #07090a; --mantine-color-text: #e8ecee; --mantine-color-dimmed: #85888a; --mantine-color-default: #0e1112; --mantine-color-default-hover: #151819; --mantine-color-default-color: #e8ecee; --mantine-color-default-border: rgba(111, 184, 201, 0.18); --mantine-color-placeholder: #85888a; --mantine-color-anchor: #6fb8c9; --mantine-color-error: #c46f69; --mantine-primary-color-filled: #6fb8c9; --mantine-primary-color-filled-hover: #8fc8d5; --mantine-primary-color-light: rgba(111, 184, 201, 0.13); --mantine-primary-color-light-hover: rgba(111, 184, 201, 0.13); --mantine-primary-color-light-color: #6fb8c9; --mantine-primary-color-contrast: #0a0a0c; --mantine-color-dark-0: #e8ecee; --mantine-color-dark-1: #aeb1b3; --mantine-color-dark-2: #aeb1b3; --mantine-color-dark-3: #85888a; --mantine-color-dark-4: rgba(111, 184, 201, 0.18); --mantine-color-dark-5: #151819; --mantine-color-dark-6: #0e1112; --mantine-color-dark-7: #0e1112; --mantine-color-dark-8: #07090a; --mantine-color-dark-9: #07090a; --mantine-color-gray-0: #151819; --mantine-color-gray-1: #0e1112; --mantine-color-gray-2: rgba(111, 184, 201, 0.18); --mantine-color-gray-3: rgba(111, 184, 201, 0.18); --mantine-color-gray-4: #85888a; --mantine-color-gray-5: #85888a; --mantine-color-gray-6: #aeb1b3; --mantine-color-gray-7: #aeb1b3; --mantine-color-gray-8: #e8ecee; --mantine-color-gray-9: #e8ecee; --mantine-color-brand-light: rgba(111, 184, 201, 0.13); --mantine-color-brand-filled: #6fb8c9; --mantine-color-brand-filled-hover: #8fc8d5; --mantine-color-brand-4: #8fc8d5; --mantine-color-brand-5: #6fb8c9; --mantine-color-brand-6: #6fb8c9; --mantine-color-brand-7: #8fc8d5; --mantine-color-blue-0: rgba(111, 184, 201, 0.13); --mantine-color-blue-4: #8fc8d5; --mantine-color-blue-5: #6fb8c9; --mantine-color-blue-6: #6fb8c9; --mantine-color-blue-8: #8fc8d5; --mantine-color-blue-light: rgba(111, 184, 201, 0.13); --mantine-color-blue-filled: #6fb8c9; --mantine-color-green-5: #62be98; --mantine-color-green-6: #62be98; --mantine-color-green-filled: #62be98; --mantine-color-yellow-5: #c8a757; --mantine-color-yellow-6: #c8a757; --mantine-color-yellow-8: #c8a757; --mantine-color-yellow-filled: #c8a757; --mantine-color-red-5: #c46f69; --mantine-color-red-6: #c46f69; --mantine-color-red-filled: #c46f69; --surface-card: #0e1112; --surface-muted: #151819; --border-subtle: rgba(111, 184, 201, 0.18); --color-body: #07090a; --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-dark-card: 0 1px 3px 0 rgba(0, 0, 0, 0.62); --shadow-dark-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.62), 0 4px 10px -6px rgba(0, 0, 0, 0.62); --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-dark-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.62); --shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); --shadow-dark-sidebar: 4px 0 24px 0 rgba(0, 0, 0, 0.62); } :root[data-context-mode="full"][data-context="settings"] body { background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--lo-accent) 9%, transparent) 0%, transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 42%, color-mix(in oklab, #000 42%, transparent) 100%); background-attachment: scroll; } :root[data-context-mode="full"][data-context="settings"] .sd-navbar, :root[data-context-mode="full"][data-context="settings"] .mantine-AppShell-header { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 4.5%, transparent) 0%, transparent 30%); } :root[data-context-mode="full"][data-context="settings"] .mantine-Paper-root, :root[data-context-mode="full"][data-context="settings"] .mantine-Card-root, :root[data-context-mode="full"][data-context="settings"] .mantine-Modal-content, :root[data-context-mode="full"][data-context="settings"] .mantine-Drawer-content, :root[data-context-mode="full"][data-context="settings"] .mantine-Menu-dropdown, :root[data-context-mode="full"][data-context="settings"] .mantine-Popover-dropdown { background-image: linear-gradient(180deg, color-mix(in oklab, #fff 3.5%, transparent) 0%, transparent 34%); box-shadow: inset 0 1px 0 0 color-mix(in oklab, #fff 10%, transparent); } .ctx-band { display: none; } :root[data-context-mode="full"]:not([data-context="none"]) .ctx-band { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 1rem; padding: 0 0 0.6rem; border-bottom: 1px solid var(--lo-border, var(--border-subtle)); overflow: hidden; white-space: nowrap; } .ctx-band-mark { width: 3px; height: 0.95rem; flex: none; border-radius: 2px; background: var(--lo-accent, var(--mantine-primary-color-filled)); transform: translateY(0.1rem); } .ctx-band-title { flex: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lo-accent, var(--mantine-primary-color-filled)); } .ctx-band-tagline { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; font-style: italic; color: var(--lo-text-muted, var(--mantine-color-dimmed)); } .ctx-band-source { flex: none; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lo-text-muted, var(--mantine-color-dimmed)); opacity: 0.7; } @media (max-width: 640px) { .ctx-band-source { display: none; } }