/** * Noir ink — Paw Pampers marketing (connect1-style teal / purple / rose accents). */ :root { --bg: #0a0a0b; --bg-alt: #121214; --bg-shine: #18181b; --text: #fafafa; --text-muted: #d4d4d8; --primary: #c4b5fd; --primary-dark: #8b5cf6; --secondary: #2dd4bf; --paw-accent-teal: #2dd4bf; --paw-accent-teal-soft: #99f6e4; --paw-accent-red: #f472b6; --paw-accent-purple: #c4b5fd; --accent: #352f4d; --card: rgba(39, 39, 42, 0.92); --card-border: rgba(244, 244, 245, 0.16); --glass-highlight: rgba(196, 181, 253, 0.1); --shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset; --radius: 12px; --header-bg: rgba(10, 10, 11, 0.92); --focus: #2dd4bf; --success: #4ade80; --danger: #f87171; --employee-accent: #a78bfa; --border-subtle: rgba(244, 244, 245, 0.18); --md-landing-hero-bg: radial-gradient(120% 90% at 8% 0%, rgba(244, 114, 182, 0.2) 0%, transparent 55%), radial-gradient(95% 75% at 92% 12%, rgba(196, 181, 253, 0.28) 0%, transparent 52%), radial-gradient(80% 60% at 48% 100%, rgba(45, 212, 191, 0.22) 0%, transparent 50%), linear-gradient(168deg, #0a0a0b 0%, #12121a 42%, #0c0c10 100%); --md-landing-hero-overlay: radial-gradient(circle at 38% 38%, rgba(167, 139, 250, 0.12) 0%, transparent 48%); --md-landing-eyebrow-color: #99f6e4; --md-landing-eyebrow-bg: rgba(24, 24, 27, 0.92); --md-landing-eyebrow-border: rgba(45, 212, 191, 0.45); --md-landing-eyebrow-shadow: 0 2px 18px rgba(45, 212, 191, 0.14); --md-landing-hero-heading-color: #fafafa; --md-landing-headline-gradient: linear-gradient(105deg, #f472b6 0%, #c4b5fd 42%, #2dd4bf 100%); --md-landing-site-name-color: #d4d4d8; --md-front-banner-bg: radial-gradient(100% 72% at 6% 0%, rgba(196, 181, 253, 0.2) 0%, transparent 50%), radial-gradient(88% 58% at 94% 20%, rgba(244, 114, 182, 0.12) 0%, transparent 48%), linear-gradient(168deg, #121214 0%, #0a0a0b 100%); --md-front-banner-overlay: radial-gradient(circle at 30% 36%, rgba(45, 212, 191, 0.12) 0%, transparent 44%); --md-front-banner-title-color: #fbcfe8; --md-front-banner-text-color: #d4d4d8; --md-front-banner-ok-bg: linear-gradient(180deg, #99f6e4 0%, #c4b5fd 48%, #a78bfa 100%); --md-front-banner-ok-shadow: 0 4px 22px rgba(45, 212, 191, 0.28), 0 1px 0 rgba(255, 255, 255, 0.25) inset; --md-front-banner-ok-hover-bg: linear-gradient(180deg, #ccfbf1 0%, #ddd6fe 48%, #c4b5fd 100%); --md-landing-loc-card-strip: linear-gradient(90deg, #f472b6, #c4b5fd, #2dd4bf); --md-landing-stack-light-band-bg: linear-gradient( 145deg, color-mix(in srgb, var(--bg) 62%, rgba(196, 181, 253, 0.14)) 0%, color-mix(in srgb, var(--bg) 48%, rgba(244, 114, 182, 0.06)) 42%, color-mix(in srgb, var(--bg-shine) 58%, rgba(45, 212, 191, 0.1)) 100% ); --md-landing-stack-light-band-backdrop: blur(28px) saturate(1.18); --md-landing-stack-light-band-border-top: color-mix(in srgb, var(--card-border) 55%, var(--primary) 45%); --md-landing-stack-light-band-border-bottom: color-mix(in srgb, var(--card-border) 55%, var(--secondary) 35%); --md-landing-stack-light-inner-bg: linear-gradient( 165deg, color-mix(in srgb, rgba(255, 255, 255, 0.16) 100%, var(--primary)) 0%, color-mix(in srgb, rgba(255, 255, 255, 0.06) 100%, var(--primary-dark)) 52%, color-mix(in srgb, rgba(10, 10, 11, 0.45) 100%, transparent) 100% ); --md-landing-stack-light-inner-border: color-mix(in srgb, var(--card-border) 70%, var(--primary) 30%); --md-landing-stack-light-inner-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent), 0 22px 56px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.12) inset; --md-landing-stack-light-inner-backdrop: blur(22px) saturate(1.28); --md-landing-stack-light-icon-bg: linear-gradient( 145deg, color-mix(in srgb, var(--secondary) 28%, var(--bg-shine)) 0%, color-mix(in srgb, var(--primary) 14%, var(--card)) 100% ); --md-landing-stack-light-icon-border: color-mix(in srgb, var(--secondary) 42%, var(--card-border)); --md-landing-feature-card-bg: linear-gradient( 145deg, color-mix(in srgb, var(--card) 86%, var(--bg-shine)) 0%, color-mix(in srgb, var(--card) 68%, color-mix(in srgb, var(--primary) 22%, var(--bg))) 100% ); --md-landing-feature-card-backdrop: blur(18px) saturate(1.22); } .md-marketing-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.75rem; padding: 0.7rem 1.2rem; border-radius: 14px; appearance: none; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 0.95rem; letter-spacing: -0.02em; text-decoration: none; color: #0a0a0b !important; background: linear-gradient(105deg, #2dd4bf 0%, #c4b5fd 48%, #f472b6 100%); border: 1px solid color-mix(in srgb, var(--paw-accent-teal, #2dd4bf) 45%, rgba(255, 255, 255, 0.28)); box-shadow: 0 12px 26px rgba(45, 212, 191, 0.28), 0 4px 18px rgba(196, 181, 253, 0.22); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .md-marketing-cta:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(45, 212, 191, 0.32), 0 6px 20px rgba(244, 114, 182, 0.18); } .md-marketing-cta:focus-visible { outline: 3px solid var(--focus, #2dd4bf); outline-offset: 3px; } .btn-outline { border-color: color-mix(in srgb, var(--primary) 55%, rgba(255, 255, 255, 0.28)); background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)), color-mix(in srgb, var(--bg-alt) 58%, transparent); color: var(--text); } .btn-outline:hover { border-color: color-mix(in srgb, var(--secondary) 55%, rgba(255, 255, 255, 0.34)); background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)), color-mix(in srgb, var(--bg-alt) 48%, var(--secondary) 18%); color: var(--text); } .md-general-settings__panel input[readonly], .md-general-settings__panel textarea[readonly] { background: color-mix(in srgb, var(--card) 88%, var(--primary) 8%) !important; color: var(--text) !important; border: 1px solid var(--card-border) !important; } .md-general-settings-stack-options, .md-general-settings-photo-slot { background: color-mix(in srgb, var(--card) 70%, rgba(255, 255, 255, 0.08)); border-color: color-mix(in srgb, var(--card-border) 70%, var(--primary) 30%); }