/** * Bake Hub marketing — bright white kitchen with orange, red, and teal. */ :root { --bg: #ffffff; --bg-alt: #fff7ed; --bg-shine: #ffffff; --text: #111111; --text-muted: #3f3f46; --primary: #ff6b1a; --primary-dark: #e11d48; --secondary: #0d9488; --paw-accent-teal: #14b8a6; --paw-accent-teal-soft: #5eead4; --paw-accent-red: #f43f5e; --paw-accent-purple: #fb923c; --accent: #fb7185; --card: #ffffff; --card-border: rgba(17, 17, 17, 0.12); --glass-highlight: rgba(255, 107, 26, 0.1); --shadow: 0 14px 36px rgba(255, 107, 26, 0.12), 0 6px 18px rgba(13, 148, 136, 0.08); --radius: 12px; --header-bg: rgba(255, 255, 255, 0.94); --focus: #0d9488; --success: #10b981; --danger: #ef4444; --employee-accent: #ff6b1a; --border-subtle: rgba(17, 17, 17, 0.12); --md-landing-hero-bg: radial-gradient(120% 90% at 8% 0%, rgba(255, 107, 26, 0.22) 0%, transparent 55%), radial-gradient(95% 75% at 92% 12%, rgba(244, 63, 94, 0.16) 0%, transparent 52%), radial-gradient(80% 60% at 48% 100%, rgba(20, 184, 166, 0.2) 0%, transparent 50%), linear-gradient(168deg, #ffffff 0%, #fff7ed 48%, #f0fdfa 100%); --md-landing-hero-overlay: radial-gradient(circle at 38% 38%, rgba(255, 107, 26, 0.1) 0%, transparent 48%); --md-landing-eyebrow-color: #0f766e; --md-landing-eyebrow-bg: #ffffff; --md-landing-eyebrow-border: rgba(20, 184, 166, 0.45); --md-landing-eyebrow-shadow: 0 2px 18px rgba(20, 184, 166, 0.16); --md-landing-hero-heading-color: #111111; --md-landing-headline-gradient: linear-gradient(105deg, #ff6b1a 0%, #e11d48 46%, #0d9488 100%); --md-landing-site-name-color: #111111; --md-front-banner-bg: radial-gradient(100% 72% at 6% 0%, rgba(255, 107, 26, 0.16) 0%, transparent 50%), radial-gradient(88% 58% at 94% 20%, rgba(244, 63, 94, 0.1) 0%, transparent 48%), linear-gradient(168deg, #ffffff 0%, #fff7ed 100%); --md-front-banner-overlay: radial-gradient(circle at 30% 36%, rgba(20, 184, 166, 0.12) 0%, transparent 44%); --md-front-banner-title-color: #111111; --md-front-banner-text-color: #3f3f46; --md-front-banner-ok-bg: linear-gradient(180deg, #5eead4 0%, #fb923c 48%, #f43f5e 100%); --md-front-banner-ok-shadow: 0 4px 22px rgba(255, 107, 26, 0.28), 0 1px 0 rgba(255, 255, 255, 0.45) inset; --md-front-banner-ok-hover-bg: linear-gradient(180deg, #99f6e4 0%, #fdba74 48%, #fb7185 100%); --md-landing-loc-card-strip: linear-gradient(90deg, #ff6b1a, #e11d48, #14b8a6); --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: #111111 !important; background: linear-gradient(105deg, #5eead4 0%, #fb923c 48%, #f43f5e 100%); border: 1px solid color-mix(in srgb, var(--paw-accent-teal, #14b8a6) 40%, rgba(17, 17, 17, 0.12)); box-shadow: 0 12px 26px rgba(255, 107, 26, 0.28), 0 4px 18px rgba(20, 184, 166, 0.18); 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(255, 107, 26, 0.32), 0 6px 20px rgba(244, 63, 94, 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%); }