/* ***************************************************** ** Custom Stylesheet ** Any custom styling you want to apply should be defined here. ***************************************************** */ :root { /* ---- Sunlight Mirage brand palette ---- */ --mirage-canvas-1: #060a14; /* darkest bg */ --mirage-canvas-2: #0a1020; /* dark bg */ --mirage-canvas-3: #4a1246; /* violet blend */ --mirage-text: #eaeaea; /* primary text on dark */ --mirage-muted: #4952cc; /* secondary text */ --mirage-cyan: #00e7ff; /* primary accent */ --mirage-magenta: #ff00c8; /* secondary accent */ --mirage-violet: #9b5fff; /* tertiary accent */ --mirage-hl-1: #43ffd8; /* highlight */ --mirage-hl-2: #ff6ef0; /* highlight */ --mirage-warm: #ffd166; /* warm accent */ /* ---- Shadows & glow ---- */ --shadow-1: 0 6px 22px rgba(0,0,0,.35); --glow-cyan-1: 0 0 24px rgba(0,231,255,.35); --glow-magenta-1: 0 0 36px rgba(255,0,200,.30), 0 0 72px rgba(255,0,200,.15); /* ---- New tokens added ---- */ --radius-sm: .5rem; --radius: 1rem; --radius-lg: 1.5rem; --glow-1: 0 0 24px rgba(0,231,255,.35); --glow-2: 0 0 36px rgba(255,0,200,.30), 0 0 72px rgba(255,0,200,.15); --nav-h: 64px; /* ---- Convenience / Behavior ---- */ --brand-primary: var(--mirage-cyan); --brand-secondary: var(--mirage-magenta); --mirage-nav-hover: neon; /* ---- Heading system (for theme updater) ---- */ --mirage-heading-color: #ffffff; --mirage-heading-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 18px rgba(0,231,255,.18); /* ---- Section / component text tokens ---- */ --mirage-card-body-text: #cfd3ff; --mirage-portfolio-text: #dfe3ff; --mirage-portfolio-meta: #a8b0da; --mirage-pricing-text: #7684ff; --mirage-pricing-subtitle: #b2d7bb; --mirage-note-text: #b6bbd8; /* Button accents */ --mirage-btn-mirage: #21aebe; /* FOOTER TOKENS --------------------------------------------------- */ --mirage-footer-border: rgba(255, 255, 255, 0.10); --mirage-footer-heading: #eaf0ff; --mirage-footer-heading-shadow-1: rgba(0, 0, 0, 0.55); --mirage-footer-heading-shadow-2: rgba(0, 231, 255, 0.12); --mirage-footer-text: #cfd3ff; --mirage-footer-link: #dfe7ff; --mirage-footer-link-hover: #ffffff; --mirage-footer-link-glow: rgba(0, 231, 255, 0.35); --mirage-footer-divider: rgba(255, 255, 255, 0.12); --mirage-footer-seal-opacity: 0.9; --mirage-footer-seal-glow: rgba(0, 231, 255, 0.35); } html,body{height:100%} html, body{ background: linear-gradient(180deg, var(--mirage-canvas-1) 0%, var(--mirage-canvas-2) 55%, var(--mirage-canvas-3) 100%) fixed; color:var(--mirage-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* Allow the Mirage background to show through across all WHMCS pages */ #wrapper, #main-body, .main-content, .content-block, .main-container { background: transparent !important; } /* Transparent wrappers so canvas shows through */ #page-wrapper, .hero-neon, .band-dark, .section, .footer-neon, .bleed-x, .hero-divider, .section-light, .section-dark, .band, .panel, .panel-dark { background:transparent !important; box-shadow:none !important; border:0 !important; } /* Nav hover override */ [data-nav-hover='solid'] { --mirage-nav-hover: solid; } /* ============================================================ Unified Headings (single visual style everywhere) ============================================================ */ /* Global headings – base style for all sections */ h1, h2, h3, h4 { color: var(--mirage-heading-color); font-weight: 700; letter-spacing: 0.02em; text-shadow: var(--mirage-heading-shadow); } /* Section headings – keep for legacy markup, same look via inherit */ .section h2, .section .h2, .section h3, .section .h3 { color: inherit; text-shadow: inherit; } /* Logos wall heading – only layout tweaks, no color change */ .logos-wall h1, .logos-wall h2 { color: inherit; /* inherits the unified heading color */ text-shadow: inherit; /* inherits the unified glow */ letter-spacing: 0.5px; /* layout/style tweak only */ margin-bottom: 2.4rem; } /* Pricing heading – only spacing, same color/glow as everything else */ .pricing-heading h2 { color: inherit; /* inherits unified heading color */ text-shadow: inherit; /* inherits unified glow */ margin-bottom: 2.4rem; } /* ========================================================= MIRAGE PILL CARDS — SHARED BEHAVIOR Applies to: USP cards, Pricing cards, Portfolio cards, Logos wall pill, Testimonials, and any future Mirage pill components. ========================================================= */ .mirage-pill, .mirage-usp .card-neon, .logos-wall__card, .pricing-card, .portfolio-card, .testimonial-card, .feature-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } /* Universal Mirage Hover — glow only, NO upward movement */ .mirage-pill:hover, .mirage-usp .card-neon:hover, .logos-wall__card:hover, .pricing-card:hover, .portfolio-card:hover, .testimonial-card:hover, .feature-card:hover { transform: none !important; /* locked — no lifting */ border-color: rgba(0, 231, 255, 0.55); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 28px rgba(0, 231, 255, 0.25); } /* ============================================ MIRAGE PILL — BASED STRICTLY ON LOGOS PILL ============================================ */ .mirage-pill { position: relative; border-radius: 32px; background: linear-gradient( 150deg, rgba(6, 8, 30, 0.95), rgba(12, 5, 26, 0.9) ); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 35px 80px rgba(0, 0, 0, 0.6); overflow: hidden; backdrop-filter: blur(22px); } /* Glow accents — EXACTLY as your logos pill */ .mirage-pill::before { content: ""; position: absolute; inset: -20% auto auto -25%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(0, 102, 255, 0.22), transparent 70%); filter: blur(35px); opacity: 0.8; pointer-events: none; } .mirage-pill::after { content: ""; position: absolute; inset: auto -25% -35% auto; width: 70%; height: 70%; background: radial-gradient(circle, rgba(255, 0, 200, 0.25), transparent 70%); filter: blur(35px); opacity: 0.6; pointer-events: none; } /* Home shortcuts strip — remove heading & center tiles */ /* Hide the "How can we help today?" column */ .home-shortcuts .row > div:first-child { display: none; } /* Center the remaining shortcut tiles */ .home-shortcuts .row { text-align: center; } .home-shortcuts .row > div { float: none; /* override Bootstrap's float in THIS row only */ display: inline-block; /* let them line up centered */ } /* Tighten bottom space under the homepage announcements band */ #mirage-home-info { padding-bottom: 1.5rem; /* was probably 3–5rem via .section */ margin-bottom: 0; } #mirage-home-info .announcement-single:last-child { margin-bottom: 0; } .section--compact { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* Home: tighten the dead space above the footer */ .template-homepage .main-content { padding-bottom: 0.5rem; /* was much larger in the base theme */ } /* Also keep the announcements band compact */ .template-homepage #mirage-home-info { padding-bottom: 0.5rem; margin-bottom: 0; } /* Home: remove giant dead space above footer */ .template-homepage .main-content { min-height: 0 !important; /* override WHMCS 300px */ margin-bottom: 0.5rem; /* was 60px, tighten it */ padding-bottom: 0.5rem; /* keep a tiny bit of breathing room */ } /* Remove WHMCS forced tall layout on homepage */ .template-homepage section#main-body { min-height: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; padding: 0.75rem 0 !important; }