/* ========================================================================== VIVID FREQUENCY — MAILWIZZ REBRAND SKIN The Spiritual Agency® | Design System v6 Single file loaded into /frontend/, /customer/, /backend/ assets/css. Scoping strategy: - Shared :root + html/body/typography + AdminLTE rules apply everywhere. - .app-frontend scoped rules target ONLY the public marketing site. - .app-customer / .app-backend rules target ONLY their admin panels. This is safe because MailWizz sets `app-` on for every app. ========================================================================== */ /* 1. TYPOGRAPHY & ROOT TOKENS [Style Guide 2.1, 5] ------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&display=swap'); :root { --vf-void: #0D0D1A; --vf-deep-violet: #1A0533; --vf-parchment: #FAFAF7; --vf-shakti-pink: #FF0060; --vf-magenta: #FF008B; --vf-crimson: #AB1C3D; --vf-spirit-blue: #0896F2; --vf-electric-violet: #9000FF; --vf-anahata-green: #A7FF00; --vf-electric-yellow: #FFE600; --vf-shakti-gradient: linear-gradient(135deg, #FF0060, #FF008B); --vf-chakra-spectrum: linear-gradient(90deg, #E24B4A, #FF8C00, #FFE600, #A7FF00, #0896F2, #9000FF, #FF008B); --vf-font: 'Plus Jakarta Sans', sans-serif; --vf-weight-bold: 800; } /* 2. GLOBAL SURFACE [Style Guide 1.0] -------------------------------------- */ html, body, .wrapper, .content-wrapper, .main-sidebar, .right-side, .login-page { background-color: var(--vf-void) !important; color: var(--vf-parchment) !important; font-family: var(--vf-font) !important; } body { min-height: 100vh; } /* 3. TYPOGRAPHY REFINEMENT [Style Guide 5.2] ------------------------------- */ h1, h2, h3, h4, h5, h6, .box-title, .logo-lg, .main-header .navbar .nav > li > a, .sidebar-menu li a { font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; letter-spacing: -0.02em; } /* 4. ADMINLTE HEADER ENFORCEMENT (customer + backend) [Style Guide 2.1] --- */ #header, .main-header, .main-header .navbar, .main-header .logo, .navbar-static-top, .skin-blue .main-header .navbar, .skin-blue .main-header .logo, .skin-black .main-header .navbar, .skin-black .main-header .logo { background-color: var(--vf-void) !important; background: var(--vf-void) !important; background-image: none !important; box-shadow: none !important; border-bottom: 1px solid rgba(255, 0, 96, 0.2) !important; } .main-header { position: relative; } .main-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--vf-chakra-spectrum) !important; z-index: 1051; } /* 5. ADMINLTE SIDEBAR [Style Guide 2.1] ------------------------------------ */ .main-sidebar, .sidebar { background-color: var(--vf-void) !important; border-right: 1px solid rgba(8, 150, 242, 0.1) !important; } .sidebar-menu > li.active > a, .sidebar-menu > li:hover > a { background: var(--vf-deep-violet) !important; border-left: 4px solid var(--vf-shakti-pink) !important; color: var(--vf-shakti-pink) !important; } /* 6. COMPONENT DEPTH (Boxes / Cards) --------------------------------------- */ .box, .info-box, .nav-tabs-custom, .nav-tabs-custom > .tab-content { background-color: var(--vf-deep-violet) !important; border-top: 3px solid var(--vf-spirit-blue) !important; color: var(--vf-parchment) !important; border-radius: 4px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; } /* 7. CTAs & INTERACTIVE ELEMENTS [Style Guide 2.2] ------------------------- */ .btn-primary, .btn-success, .btn-confirm { background: var(--vf-shakti-gradient) !important; border: none !important; font-weight: var(--vf-weight-bold) !important; text-transform: uppercase; color: var(--vf-parchment) !important; letter-spacing: 0.02em; } .btn-primary:hover, .btn-success:hover, .btn-confirm:hover { box-shadow: 0 0 20px rgba(255, 0, 96, 0.4) !important; transform: translateY(-1px); color: var(--vf-parchment) !important; } /* ========================================================================= FRONTEND-ONLY STYLING — public marketing site (spiritmail.ninja) ========================================================================= */ /* 8. FRONTEND HEADER — Void + Chakra Spectrum Accent ----------------------- */ .app-frontend .navbar-default, .app-frontend header.navbar { background-color: var(--vf-void) !important; background-image: none !important; border: none !important; border-bottom: 1px solid rgba(255, 0, 96, 0.25) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important; position: relative; min-height: 72px; margin-bottom: 0; border-radius: 0; } .app-frontend .navbar-default::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--vf-chakra-spectrum); z-index: 1051; } .app-frontend .navbar-default .navbar-brand, .app-frontend .navbar-default .navbar-brand span, .app-frontend .navbar-default .navbar-brand span span { color: var(--vf-parchment) !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; letter-spacing: -0.01em; font-size: 22px; text-decoration: none; } .app-frontend .navbar-default .navbar-brand:hover, .app-frontend .navbar-default .navbar-brand:hover span, .app-frontend .navbar-default .navbar-brand:focus, .app-frontend .navbar-default .navbar-brand:focus span { color: var(--vf-shakti-pink) !important; background: transparent !important; } .app-frontend .navbar-default .navbar-nav > li > a { color: var(--vf-parchment) !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; transition: color 0.2s ease; } .app-frontend .navbar-default .navbar-nav > li > a:hover, .app-frontend .navbar-default .navbar-nav > li > a:focus, .app-frontend .navbar-default .navbar-nav > .active > a, .app-frontend .navbar-default .navbar-nav > .active > a:hover, .app-frontend .navbar-default .navbar-nav > .active > a:focus { color: var(--vf-shakti-pink) !important; background: transparent !important; } /* Header "Sign up" style (rendered as .btn.btn-default inside the nav) */ .app-frontend .navbar-default .navbar-nav > li > a.btn, .app-frontend .navbar-default .navbar-nav > li > a.btn.btn-default { background: var(--vf-shakti-gradient) !important; color: var(--vf-parchment) !important; border: none !important; border-radius: 4px !important; padding: 8px 20px !important; margin-top: 14px; box-shadow: 0 4px 16px rgba(255, 0, 96, 0.25); transition: box-shadow 0.2s ease, transform 0.2s ease; } .app-frontend .navbar-default .navbar-nav > li > a.btn:hover { box-shadow: 0 0 24px rgba(255, 0, 96, 0.45); transform: translateY(-1px); color: var(--vf-parchment) !important; } /* Mobile hamburger toggle */ .app-frontend .navbar-default .navbar-toggle { border: 1px solid rgba(255, 0, 96, 0.35) !important; background: transparent !important; margin-top: 18px; } .app-frontend .navbar-default .navbar-toggle:hover, .app-frontend .navbar-default .navbar-toggle:focus { background: var(--vf-deep-violet) !important; border-color: var(--vf-shakti-pink) !important; } .app-frontend .navbar-default .navbar-toggle .icon-bar { background-color: var(--vf-parchment) !important; } .app-frontend .navbar-default .navbar-collapse { border-color: rgba(255, 0, 96, 0.15) !important; background: var(--vf-void); } /* 9. FRONTEND SECTIONS — global container bg + bg_image dimming ------------ */ .app-frontend .hide_overflow { background: var(--vf-void); } .app-frontend .section { position: relative; } /* Dim the decorative background illustrations so they read as atmosphere, not as hero art fighting the gradient typography. */ .app-frontend .section .bg_image { opacity: 0.18 !important; filter: saturate(1.3) contrast(1.05); pointer-events: none; } /* 10. FRONTEND HERO — .section_welcome ------------------------------------- */ .app-frontend .section_welcome { background: var(--vf-void) !important; padding: 100px 0 120px !important; } @media (min-width: 992px) { .app-frontend .section_welcome { padding: 140px 0 160px !important; } } .app-frontend .section_welcome::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--vf-shakti-pink), var(--vf-magenta), transparent); opacity: 0.6; z-index: 3; } .app-frontend .section_welcome h1 { color: var(--vf-parchment) !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; letter-spacing: -0.03em; line-height: 1.15; font-size: 48px; padding-bottom: 0.15em; margin-bottom: 28px; overflow: visible; } @media (min-width: 992px) { .app-frontend .section_welcome h1 { font-size: 72px; } } /* The "Made easy, finally." chunk is wrapped in a . Paint it with the Shakti gradient to give the hero its signature moment. Extra line-height + padding-bottom so gradient-clipped descenders (y/g) render. */ .app-frontend .section_welcome h1 span { display: block; line-height: 1.2; padding-bottom: 0.18em; background: var(--vf-shakti-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: var(--vf-weight-bold); margin-top: 6px; overflow: visible; } /* Kill the underline the base theme draws under the h1 */ .app-frontend .section_welcome h1:after { display: none !important; } .app-frontend .section_welcome p { color: rgba(250, 250, 247, 0.78) !important; font-size: 18px !important; line-height: 1.65 !important; font-weight: 400 !important; max-width: 660px; } .app-frontend .section_welcome .btn, .app-frontend .section_welcome .btn-primary { background: var(--vf-shakti-gradient) !important; color: var(--vf-parchment) !important; border: none !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; text-transform: uppercase; letter-spacing: 0.06em; padding: 16px 40px !important; font-size: 14px !important; border-radius: 4px !important; box-shadow: 0 8px 24px rgba(255, 0, 96, 0.3); transition: box-shadow 0.2s ease, transform 0.2s ease; } .app-frontend .section_welcome .btn:hover { box-shadow: 0 0 32px rgba(255, 0, 96, 0.55); transform: translateY(-2px); color: var(--vf-parchment) !important; } /* Branded hero artwork — overrides MailWizz's inline background-image on the .bg_image div. PNG is alpha, so no dark overlay; opacity is lifted well above the atmospheric 0.18 used for decorative section backgrounds. */ .app-frontend .section_welcome .bg_image { background-image: url('/frontend/assets/img/spiritmail-ninja-hero.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; opacity: 0.95 !important; filter: drop-shadow(0 0 40px rgba(255, 0, 96, 0.25)); } @media (min-width: 768px) { .app-frontend .section_welcome .bg_image { top: 40px !important; height: 480px !important; width: 480px !important; left: auto !important; right: -40px !important; margin-left: 0 !important; } } @media (min-width: 992px) { .app-frontend .section_welcome .bg_image { top: 60px !important; height: 600px !important; width: 600px !important; right: -20px !important; } } @media (min-width: 1200px) { .app-frontend .section_welcome .bg_image { height: 640px !important; width: 640px !important; right: 0 !important; } } /* 11. FRONTEND FEATURE SECTIONS — .section_why + .section_support ---------- */ .app-frontend .section_why, .app-frontend .section_support { padding: 80px 0 !important; } @media (min-width: 992px) { .app-frontend .section_why, .app-frontend .section_support { padding: 110px 0 !important; } } .app-frontend .section_why { background: var(--vf-deep-violet) !important; border-top: 1px solid rgba(8, 150, 242, 0.15); border-bottom: 1px solid rgba(8, 150, 242, 0.08); } .app-frontend .section_support { background: var(--vf-void) !important; border-top: 1px solid rgba(167, 255, 0, 0.15); } /* Each feature section gets its own chakra accent — Throat blue for "Send better email" (voice/communication), Heart green for "See how you're doing" (connection/wellbeing metric). */ .app-frontend .section_why h2 { color: var(--vf-spirit-blue) !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 24px; text-shadow: 0 0 32px rgba(8, 150, 242, 0.25); } .app-frontend .section_support h2 { color: var(--vf-anahata-green) !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 24px; text-shadow: 0 0 32px rgba(167, 255, 0, 0.2); } @media (min-width: 992px) { .app-frontend .section_why h2, .app-frontend .section_support h2 { font-size: 48px; } } .app-frontend .section_why p, .app-frontend .section_support p { color: rgba(250, 250, 247, 0.78) !important; font-size: 17px !important; line-height: 1.65 !important; font-weight: 400 !important; margin-bottom: 36px; } .app-frontend .image_wrapper { border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 0, 96, 0.08); position: relative; z-index: 2; } .app-frontend .image_wrapper img { width: 100%; height: auto; display: block; border: none !important; } /* 12. FRONTEND CLOSING CTA — .section_contact ------------------------------ */ .app-frontend .section_contact { padding: 100px 0 !important; background-color: var(--vf-void) !important; background-image: var(--vf-shakti-gradient) !important; text-align: center; position: relative; overflow: hidden; } .app-frontend .section_contact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--vf-chakra-spectrum); z-index: 2; } .app-frontend .section_contact h2 { color: var(--vf-parchment) !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; font-size: 40px; letter-spacing: -0.02em; margin-bottom: 20px; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } @media (min-width: 992px) { .app-frontend .section_contact h2 { font-size: 52px; } } .app-frontend .section_contact h2:after { background: rgba(250, 250, 247, 0.6) !important; height: 2px !important; } .app-frontend .section_contact p { color: rgba(250, 250, 247, 0.95) !important; font-size: 18px !important; line-height: 1.65 !important; font-weight: 400 !important; max-width: 640px; margin: 0 auto 32px; } .app-frontend .section_contact .btn, .app-frontend .section_contact .btn-default { background: var(--vf-void) !important; border: 2px solid var(--vf-parchment) !important; color: var(--vf-parchment) !important; font-family: var(--vf-font) !important; font-weight: var(--vf-weight-bold) !important; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 40px !important; font-size: 14px !important; border-radius: 4px !important; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .app-frontend .section_contact .btn:hover, .app-frontend .section_contact .btn-default:hover { background: var(--vf-parchment) !important; color: var(--vf-shakti-pink) !important; box-shadow: 0 0 32px rgba(255, 255, 255, 0.35); transform: translateY(-2px); } /* 13. FRONTEND FOOTER ------------------------------------------------------ */ .app-frontend footer.main-footer, .app-frontend footer { background-color: var(--vf-void) !important; border-top: 1px solid rgba(255, 0, 96, 0.18); color: rgba(250, 250, 247, 0.7) !important; padding: 44px 0 36px !important; position: relative; } .app-frontend footer.main-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--vf-chakra-spectrum); opacity: 0.9; } .app-frontend footer .copyright { color: rgba(250, 250, 247, 0.55) !important; font-size: 13px; letter-spacing: 0.02em; } .app-frontend footer ul.links li a, .app-frontend footer ul li a { color: rgba(250, 250, 247, 0.7) !important; text-decoration: none; font-size: 13px; font-weight: var(--vf-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.2s ease; } .app-frontend footer ul.links li a:hover, .app-frontend footer ul li a:hover { color: var(--vf-shakti-pink) !important; } .app-frontend footer ul.links li + li { border-left-color: rgba(250, 250, 247, 0.18) !important; } .app-frontend footer ul.social li a { color: rgba(250, 250, 247, 0.6) !important; transition: color 0.2s ease, transform 0.2s ease; display: inline-block; } .app-frontend footer ul.social li a:hover { color: var(--vf-shakti-pink) !important; transform: translateY(-2px); } /* 14. FRONTEND NOTIFY ALERTS ----------------------------------------------- */ .app-frontend #notify-container .alert { background: var(--vf-deep-violet) !important; border: 1px solid rgba(8, 150, 242, 0.25) !important; border-left: 4px solid var(--vf-spirit-blue) !important; color: var(--vf-parchment) !important; border-radius: 4px; } .app-frontend #notify-container .alert-success { border-left-color: var(--vf-anahata-green) !important; } .app-frontend #notify-container .alert-warning { border-left-color: var(--vf-electric-yellow) !important; } .app-frontend #notify-container .alert-danger { border-left-color: var(--vf-crimson) !important; } .app-frontend #notify-container .alert-info { border-left-color: var(--vf-spirit-blue) !important; } /* 15. FRONTEND ARTICLES + CMS PAGES (secondary frontend routes) ------------ */ .app-frontend .page-header { border-bottom-color: rgba(255, 0, 96, 0.2) !important; } .app-frontend a { color: var(--vf-spirit-blue); } .app-frontend a:hover, .app-frontend a:focus { color: var(--vf-shakti-pink); } .app-frontend .list-articles .article, .app-frontend .related-articles .article { border-color: rgba(255, 255, 255, 0.1) !important; } .app-frontend .list-articles .article .title a, .app-frontend .related-articles .article .title a { color: var(--vf-parchment) !important; font-weight: var(--vf-weight-bold); } /* 16. FRONTEND RESPONSIVE TUNING ------------------------------------------- */ @media (max-width: 767px) { .app-frontend .section_welcome { padding: 70px 0 90px !important; } .app-frontend .section_welcome h1 { font-size: 38px; } .app-frontend .section_why, .app-frontend .section_support { padding: 60px 0 !important; } .app-frontend .section_why h2, .app-frontend .section_support h2 { font-size: 30px; } .app-frontend .section_contact { padding: 70px 0 !important; } .app-frontend .section_contact h2 { font-size: 32px; } .app-frontend footer .copyright, .app-frontend footer ul.links, .app-frontend footer ul.social { text-align: center !important; padding-top: 16px; } }