/** * Celebratory — royal purple #6A0DAD surfaces, white type, complementary gold-yellow bars. */ :root { --bg: #6a0dad; --bg-alt: #560b8c; --bg-shine: #8b2fc9; --text: #ffffff; --text-muted: #f3e8ff; --primary: #ffd400; --primary-dark: #e6b800; --secondary: #ffe566; --accent: #4b087a; --card: rgba(75, 8, 122, 0.46); --card-border: rgba(255, 255, 255, 0.32); --glass-highlight: rgba(255, 212, 0, 0.22); --shadow: 0 16px 40px rgba(75, 8, 122, 0.42), 0 1px 0 rgba(255, 255, 255, 0.22) inset; --radius: 14px; --header-bg: rgba(86, 11, 140, 0.9); --focus: #ffd400; --success: #bbf7d0; --danger: #fecdd3; --employee-accent: #ffe566; --border-subtle: rgba(255, 212, 0, 0.38); --md-landing-hero-bg: radial-gradient(115% 90% at 10% -8%, rgba(255, 212, 0, 0.38) 0%, transparent 52%), radial-gradient(95% 75% at 100% 16%, rgba(255, 255, 255, 0.22) 0%, transparent 50%), radial-gradient(80% 55% at 48% 100%, rgba(139, 47, 201, 0.55) 0%, transparent 48%), linear-gradient(165deg, #8b2fc9 0%, #6a0dad 42%, #560b8c 100%); --md-landing-hero-overlay: radial-gradient(circle at 58% 34%, rgba(255, 255, 255, 0.12) 0%, transparent 48%); --md-landing-eyebrow-color: #4b087a; --md-landing-eyebrow-bg: rgba(255, 229, 102, 0.96); --md-landing-eyebrow-border: rgba(230, 184, 0, 0.7); --md-landing-eyebrow-shadow: 0 2px 18px rgba(230, 184, 0, 0.28); --md-landing-hero-heading-color: #ffffff; --md-landing-headline-gradient: linear-gradient(105deg, #ffffff 0%, #ffe566 42%, #ffd400 100%); --md-landing-site-name-color: #f3e8ff; --md-front-banner-bg: radial-gradient(100% 70% at 8% 0%, rgba(255, 212, 0, 0.22) 0%, transparent 50%), linear-gradient(165deg, #8b2fc9 0%, #4b087a 100%); --md-front-banner-overlay: radial-gradient(circle at 78% 28%, rgba(255, 255, 255, 0.14) 0%, transparent 44%); --md-front-banner-title-color: #ffd400; --md-front-banner-text-color: #f5f3ff; --md-front-banner-ok-bg: linear-gradient(180deg, #ffe566 0%, #ffd400 52%, #e6b800 100%); --md-front-banner-ok-shadow: 0 4px 22px rgba(230, 184, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset; --md-front-banner-ok-hover-bg: linear-gradient(180deg, #fff4b0 0%, #ffe566 52%, #ffd400 100%); --md-landing-loc-card-strip: linear-gradient(90deg, #ffd400, #ffffff, #ffe566); --md-landing-stack-light-band-bg: linear-gradient( 145deg, color-mix(in srgb, var(--bg) 70%, rgba(255, 212, 0, 0.22)) 0%, color-mix(in srgb, var(--bg-shine) 62%, rgba(255, 255, 255, 0.16)) 48%, color-mix(in srgb, var(--bg-alt) 78%, rgba(255, 212, 0, 0.12)) 100% ); --md-landing-stack-light-band-backdrop: blur(24px) saturate(1.2); --md-landing-stack-light-band-border-top: color-mix(in srgb, var(--card-border) 50%, var(--primary) 50%); --md-landing-stack-light-band-border-bottom: color-mix(in srgb, var(--card-border) 50%, #ffffff 40%); --md-landing-stack-light-inner-bg: linear-gradient( 165deg, color-mix(in srgb, rgba(255, 255, 255, 0.24) 100%, var(--primary)) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.08) 100%, var(--bg-alt)) 52%, color-mix(in srgb, rgba(75, 8, 122, 0.4) 100%, transparent) 100% ); --md-landing-stack-light-inner-border: color-mix(in srgb, var(--card-border) 60%, var(--primary) 40%); --md-landing-stack-light-inner-shadow: 0 0 0 1px rgba(255, 212, 0, 0.28), 0 22px 52px rgba(75, 8, 122, 0.36), 0 1px 0 rgba(255, 255, 255, 0.28) inset; --md-landing-stack-light-inner-backdrop: blur(20px) saturate(1.22); --md-landing-stack-light-icon-bg: linear-gradient( 145deg, color-mix(in srgb, var(--primary) 42%, #fff) 0%, color-mix(in srgb, var(--primary) 18%, var(--card)) 100% ); --md-landing-stack-light-icon-border: color-mix(in srgb, var(--primary) 50%, var(--card-border)); --md-landing-feature-card-bg: linear-gradient( 145deg, color-mix(in srgb, var(--card) 82%, var(--bg-shine)) 0%, color-mix(in srgb, var(--card) 64%, color-mix(in srgb, var(--primary) 22%, var(--bg))) 100% ); --md-landing-feature-card-backdrop: blur(18px) saturate(1.2); } html body .btn-primary, html body .btn-secondary { color: #4b087a; border-color: #e6b800; background: linear-gradient(180deg, #ffe566 0%, #ffd400 52%, #e6b800 100%); box-shadow: 0 12px 26px rgba(230, 184, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45); } html body .btn-primary:hover, html body .btn-secondary:hover, html body .btn-primary:visited, html body .btn-secondary:visited { color: #4b087a; background: linear-gradient(180deg, #fff4b0 0%, #ffe566 52%, #ffd400 100%); } .btn-outline { border-color: color-mix(in srgb, var(--primary) 70%, rgba(255, 255, 255, 0.4)); background: color-mix(in srgb, var(--bg-alt) 55%, transparent); color: var(--text); } .btn-outline:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 28%, var(--bg-alt)); color: var(--text); } .md-general-settings__panel input[readonly], .md-general-settings__panel textarea[readonly] { background: color-mix(in srgb, var(--card) 82%, var(--primary) 12%) !important; color: var(--text) !important; border: 1px solid var(--card-border) !important; } /* Alternating full-width stack bands: complementary gold-yellow. */ html body .md-landing-feature-stack--dark { background: linear-gradient(135deg, #ffe566 0%, #ffd400 48%, #e6b800 100%); color: #4b087a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } html body .md-landing-feature-stack--dark .md-landing-feature-stack__title { color: #4b087a; } html body .md-landing-feature-stack--dark .md-landing-feature-stack__body { color: #560b8c; } html body .md-landing-feature-stack--dark .md-landing-feature-stack__icon { background: rgba(106, 13, 173, 0.14); border-color: rgba(75, 8, 122, 0.35); color: #4b087a; } html body .md-landing-feature-stack--dark .md-landing-feature-stack__inner { background: linear-gradient( 165deg, rgba(255, 251, 230, 0.82) 0%, rgba(255, 229, 102, 0.7) 52%, rgba(255, 212, 0, 0.55) 100% ); border: 1px solid rgba(230, 184, 0, 0.4); box-shadow: 0 12px 36px rgba(75, 8, 122, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7); }