/* ════════════════════════════════════════════════════════════════ NumoX University — Design System (theme.css) Brand: Navy #1F2E7A · Blue #1B3DA8 · Red #C8273A ---------------------------------------------------------------- This file contains GLOBAL/SHARED tokens & components only. Per-section styles live in: public/numox/components/css/{hero,about,programs, features,cta-strip,faq}.css They are pushed into via @once @push('styles') from the matching Blade component (see resources/views/ components/numox/). ---------------------------------------------------------------- File map: 1. Tokens & Reset 2. Animations base 3. Buttons & Links 4. Typography helpers 5. Header (desktop) 6. Program Card (Livewire-shared component) 7. Page Banner (sub-pages) 8. Footer 9. Program Detail Modal 10. Floating Support Button 11. Sub-page legacy overrides 12. Mobile bottom-nav + Utilities + Responsive ════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Big+Shoulders+Display:wght@700;900&display=swap'); /* ────────────────────────────────────────────────────────────── 1 · TOKENS & RESET ────────────────────────────────────────────────────────────── */ :root { --nx-navy: #1F2E7A; --nx-blue: #1B3DA8; --nx-red: #C8273A; --nx-red-soft: #ff8fa3; --nx-dark: #0A0E2E; --nx-cream: #F5F1EA; --nx-bone: #FAF7F2; --nx-grad: linear-gradient(135deg, #1F2E7A 0%, #C8273A 100%); --nx-grad-r: linear-gradient(135deg, #C8273A 0%, #1F2E7A 100%); --nx-body: #2a2a36; --nx-muted: #6c6c82; --nx-border: #e8e4dc; --nx-white: #ffffff; --font: 'Cairo', sans-serif; --font-num: 'Big Shoulders Display', 'Cairo', sans-serif; --r-pill: 100px; --r-card: 18px; --r-lg: 26px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--nx-body); background: var(--nx-bone); overflow-x: hidden; } /* ────────────────────────────────────────────────────────────── 2 · ANIMATIONS ────────────────────────────────────────────────────────────── */ @keyframes nx-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes nx-mark { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes nx-spin { to { transform: rotate(360deg); } } @keyframes nx-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .55; } } .nx-anim { animation: nx-up .7s var(--ease) both; animation-play-state: paused; } .nx-anim.is-visible { animation-play-state: running; } .nx-a1 { animation-delay: .08s; } .nx-a2 { animation-delay: .18s; } .nx-a3 { animation-delay: .28s; } .nx-a4 { animation-delay: .38s; } .nx-a5 { animation-delay: .48s; } .nx-a6 { animation-delay: .58s; } /* Auto-staggered children using --nx-i index */ [style*="--nx-i"] { animation-delay: calc(var(--nx-i, 0) * 0.05s); } /* ────────────────────────────────────────────────────────────── 3 · BUTTONS & LINKS ────────────────────────────────────────────────────────────── */ .nx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1; border: none; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s; } .nx-btn:hover { transform: translateY(-2px); } .nx-btn:active { transform: translateY(0); } .nx-btn-grad { background: var(--nx-grad); color: #fff; box-shadow: 0 6px 24px rgba(200, 39, 58, .28); } .nx-btn-grad:hover { color: #fff; box-shadow: 0 10px 32px rgba(200, 39, 58, .38); } .nx-btn-dark { background: var(--nx-dark); color: #fff; } .nx-btn-dark:hover { color: #fff; background: var(--nx-navy); } .nx-btn-ghost { background: rgba(255, 255, 255, .10); color: #fff; border: 1.5px solid rgba(255, 255, 255, .30); backdrop-filter: blur(6px); } .nx-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .20); } .nx-btn-bone { background: var(--nx-cream); color: var(--nx-dark); } .nx-btn-bone:hover { color: var(--nx-dark); background: #fff; } .nx-btn-outline { background: transparent; color: var(--nx-navy); border: 1.5px solid var(--nx-border); } .nx-btn-outline:hover { border-color: var(--nx-navy); color: var(--nx-navy); background: rgba(31, 46, 122, .04); } .nx-arrow-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--nx-dark); text-decoration: none; padding-bottom: 6px; border-bottom: 1.5px solid var(--nx-dark); transition: gap .25s, color .25s, border-color .25s; } .nx-arrow-link:hover { gap: 14px; color: var(--nx-red); border-color: var(--nx-red); } .nx-arrow-link.light { color: #fff; border-color: #fff; } .nx-arrow-link.light:hover { color: var(--nx-red-soft); border-color: var(--nx-red-soft); } /* ────────────────────────────────────────────────────────────── 4 · TYPOGRAPHY HELPERS ────────────────────────────────────────────────────────────── */ .nx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--nx-red); } .nx-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--nx-red); flex-shrink: 0; } .nx-eyebrow.light { color: var(--nx-red-soft); } .nx-eyebrow.light::before { background: var(--nx-red-soft); } .nx-h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: -1.5px; color: var(--nx-dark); } .nx-h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 900; line-height: 1.05; letter-spacing: -1px; color: var(--nx-dark); } .nx-h3 { font-size: 22px; font-weight: 800; color: var(--nx-dark); letter-spacing: -.3px; } .nx-text { font-size: 16px; font-weight: 300; color: var(--nx-muted); line-height: 1.7; } .nx-text-light { color: rgba(255, 255, 255, .70); } .nx-on-dark { color: #fff; } .nx-grad-text { background: var(--nx-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Container override matching the editorial frame */ .nx-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 28px; } /* ────────────────────────────────────────────────────────────── 5 · HEADER ────────────────────────────────────────────────────────────── */ .nx-header { position: sticky; top: 0; z-index: 1000; background: rgba(250, 247, 242, .95); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; } .nx-header.scrolled { background: rgba(255, 255, 255, .96); border-bottom-color: var(--nx-border); box-shadow: 0 4px 24px rgba(31, 46, 122, .06); } .nx-header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; } .nx-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .nx-logo img { height: 54px; object-fit: contain; display: block; } .nx-nav { display: flex; align-items: center; gap: 4px; } .nx-nav a { font-size: 14px; font-weight: 500; color: var(--nx-body); text-decoration: none; padding: 10px 16px; border-radius: var(--r-pill); white-space: nowrap; position: relative; transition: color .2s, background .2s; } .nx-nav a:hover { color: var(--nx-dark); background: rgba(31, 46, 122, .06); } .nx-nav a.active { color: #fff; background: var(--nx-dark); font-weight: 600; } .nx-dropdown { position: relative; } .nx-dropdown-toggle { display: flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--nx-body); padding: 10px 16px; border: none; border-radius: var(--r-pill); background: none; cursor: pointer; text-decoration: none; transition: color .2s, background .2s; } .nx-dropdown-toggle:hover { color: var(--nx-dark); background: rgba(31, 46, 122, .06); } .nx-dropdown-toggle svg { transition: transform .25s; } .nx-dropdown.open .nx-dropdown-toggle svg { transform: rotate(180deg); } .nx-dropdown-menu { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; min-width: 200px; padding: 8px; background: #fff; border: 1px solid var(--nx-border); border-radius: var(--r-card); box-shadow: 0 12px 40px rgba(31, 46, 122, .12); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .25s var(--ease); z-index: 100; } .nx-dropdown.open .nx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nx-dropdown-menu.end { inset-inline-start: auto; inset-inline-end: 0; } .nx-dropdown-menu a { display: block; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--nx-body); text-decoration: none; border-radius: 10px; white-space: nowrap; transition: background .2s, color .2s; } .nx-dropdown-menu a:hover { background: var(--nx-cream); color: var(--nx-dark); } .nx-header-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nx-user-btn { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--nx-cream); border: 1px solid var(--nx-border); cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--nx-dark); transition: background .2s; } .nx-user-btn:hover { background: #fff; } /* User-menu inner blocks */ .nx-user-menu-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--nx-border); margin-bottom: 6px; } .nx-user-menu-head .nm { font-size: 14px; font-weight: 700; color: var(--nx-navy); } .nx-user-menu-head .em { font-size: 12px; color: var(--nx-muted); margin-top: 2px; } .nx-user-logout-form { border-top: 1px solid var(--nx-border); margin-top: 6px; padding-top: 6px; } .nx-user-logout-btn { width: 100%; background: none; border: none; text-align: inherit; padding: 10px 14px; font-family: var(--font); font-size: 14px; font-weight: 500; color: #d32f2f; cursor: pointer; border-radius: 10px; display: flex; align-items: center; gap: 8px; transition: background .2s; } .nx-user-logout-btn:hover { background: #fff5f5; } /* Mobile bottom nav */ .Header-mobile { display: none; } /* ────────────────────────────────────────────────────────────── 6 · PROGRAM CARD Used by the Livewire program-card component, which renders both inside and on standalone listing pages. ────────────────────────────────────────────────────────────── */ .nx-pcard { width: 100%; max-width: 400px; margin: 0 auto; background: var(--nx-bone); border: 1px solid var(--nx-border); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; } .nx-pcard::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 3px; background: var(--nx-grad); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .nx-pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(10, 14, 46, .10); border-color: var(--nx-dark); } .nx-pcard:hover::before { transform: scaleX(1); } .nx-pcard-media { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: var(--nx-dark); } .nx-pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .nx-pcard:hover .nx-pcard-media img { transform: scale(1.06); } .nx-pcard-tag { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 7px; background: rgba(250, 247, 242, .95); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--nx-dark); } .nx-pcard-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: nx-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } .nx-pcard-body { flex: 1; padding: 0 6px; display: flex; flex-direction: column; gap: 14px; } .nx-pcard-title { font-size: 19px; font-weight: 800; color: var(--nx-dark); line-height: 1.4; letter-spacing: -.3px; margin: 0; min-height: calc(1.4em * 2); max-height: calc(1.4em * 2); overflow: hidden; } .nx-pcard-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .nx-pcard-meta li { display: inline-flex; align-items: center; gap: 6px; background: var(--nx-dark); color: #fff; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; } .nx-pcard-meta li svg { width: 14px; height: 14px; } .nx-pcard-meta li svg path, .nx-pcard-meta li svg circle { stroke: #fff !important; } .nx-pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 6px 4px; border-top: 1px dashed #d6d2c8; } .nx-pcard-price b { display: block; font-size: 22px; font-weight: 900; color: var(--nx-dark); line-height: 1; letter-spacing: -.5px; } .nx-pcard-price b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--nx-red); margin-inline-start: 4px; } .nx-pcard-price small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--nx-muted); } .nx-pcard-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: none; border-radius: var(--r-pill); background: var(--nx-dark); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: gap .25s, background .25s; } .nx-pcard-cta:hover { background: var(--nx-grad); gap: 12px; color: #fff; } /* ────────────────────────────────────────────────────────────── 8 · FOOTER ────────────────────────────────────────────────────────────── */ .nx-footer { background: var(--nx-dark); color: #fff; padding-top: 80px; position: relative; overflow: hidden; } .nx-footer-mega { font-family: var(--font-num); font-weight: 900; font-size: clamp(80px, 16vw, 220px); line-height: .85; letter-spacing: -6px; text-align: center; padding: 0 28px 60px; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; user-select: none; } .nx-footer-top { padding: 64px 0 48px; border-top: 1px solid rgba(255, 255, 255, .1); } .nx-footer-brand { display: flex; flex-direction: column; gap: 18px; } .nx-footer-logo { height: 54px; object-fit: contain; display: block; filter: brightness(0) invert(1); } .nx-footer-tagline { font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .55); line-height: 1.7; max-width: 280px; } .nx-footer-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .nx-social-btn { width: 42px; height: 42px; border-radius: 50%; padding: 0; line-height: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); flex-shrink: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: all .25s var(--ease); } .nx-social-btn svg { width: 16px; height: 16px; display: block; fill: currentColor; } .nx-social-btn:hover { background: var(--nx-red); border-color: var(--nx-red); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200, 39, 58, .35); } .nx-footer-col h5 { font-size: 12px; font-weight: 700; color: var(--nx-red-soft); margin-bottom: 20px; letter-spacing: .12em; text-transform: uppercase; } .nx-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .nx-footer-col ul li a { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .2s, padding .2s; } .nx-footer-col ul li a:hover { color: #fff; padding-inline-start: 6px; } .nx-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .08); } .nx-footer-copyright { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .4); } .nx-back-top { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .5); text-decoration: none; transition: color .2s; } .nx-back-top:hover { color: #fff; } .nx-back-top-icon { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center; transition: all .25s; } .nx-back-top:hover .nx-back-top-icon { background: var(--nx-red); border-color: var(--nx-red); } /* ────────────────────────────────────────────────────────────── 14 · PROGRAM DETAIL MODAL ────────────────────────────────────────────────────────────── */ .nx-pmodal { z-index: 10600 !important; } .modal-backdrop.show { z-index: 10500 !important; opacity: .55 !important; } .nx-pmodal .modal-dialog { max-width: 540px; margin: 1.75rem auto; } .nx-pmodal .modal-dialog.modal-dialog-scrollable { height: calc(100% - 3.5rem); } .nx-pmodal .modal-dialog.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .nx-pmodal-content { border: none !important; border-radius: 24px !important; overflow: hidden !important; background: var(--nx-bone) !important; box-shadow: 0 30px 80px rgba(10, 14, 46, .35) !important; display: flex !important; flex-direction: column !important; } .nx-pmodal-banner { position: relative; width: 100%; height: 220px; min-height: 220px; flex: 0 0 220px; background: var(--nx-dark); overflow: hidden; } .nx-pmodal-img { width: 100%; height: 100%; object-fit: cover; display: block; } .nx-pmodal-banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 46, .05) 0%, rgba(10, 14, 46, .20) 60%, rgba(10, 14, 46, .55) 100%); } .nx-pmodal-close { position: absolute; top: 16px; left: 16px; width: 40px; height: 40px; border-radius: 50%; padding: 0; background: rgba(250, 247, 242, .95); backdrop-filter: blur(8px); border: none; color: var(--nx-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: all .25s; } .nx-pmodal-close:hover { background: var(--nx-red); color: #fff; transform: rotate(90deg); } .nx-pmodal-tag { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 7px; background: rgba(250, 247, 242, .95); backdrop-filter: blur(8px); padding: 7px 13px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--nx-dark); z-index: 4; } .nx-pmodal-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex-shrink: 0; animation: nx-pulse 1.6s ease-in-out infinite; } .nx-pmodal-body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; } .nx-pmodal-title { font-size: 24px; font-weight: 900; color: var(--nx-dark); line-height: 1.3; letter-spacing: -.5px; margin: 0; } .nx-pmodal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: #fff; border: 1px solid var(--nx-border); border-radius: 16px; padding: 14px; } .nx-pmodal-stat { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-pmodal-stat-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--nx-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nx-pmodal-stat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; } .nx-pmodal-stat-text .lbl { font-size: 11px; font-weight: 600; color: var(--nx-muted); letter-spacing: .02em; } .nx-pmodal-stat-text b { font-size: 14px; font-weight: 800; color: var(--nx-dark); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-pmodal-desc h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--nx-red); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; } .nx-pmodal-desc h3::before { content: ''; width: 22px; height: 1.5px; background: var(--nx-red); } .nx-pmodal-desc p { font-size: 14px; font-weight: 300; color: var(--nx-body); line-height: 1.8; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .nx-pmodal-pricing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; } .nx-pmodal-price-block { background: #fff; border: 1px solid var(--nx-border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .nx-pmodal-price-block.primary { background: var(--nx-dark); border-color: var(--nx-dark); position: relative; overflow: hidden; } .nx-pmodal-price-block.primary::before { content: ''; position: absolute; pointer-events: none; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 39, 58, .35) 0%, transparent 70%); top: -60px; right: -40px; } .nx-pmodal-price-block .lbl { position: relative; z-index: 1; font-size: 11px; font-weight: 600; color: var(--nx-muted); letter-spacing: .03em; text-transform: uppercase; } .nx-pmodal-price-block.primary .lbl { color: rgba(255, 255, 255, .65); } .nx-pmodal-price-block b { position: relative; z-index: 1; font-size: 22px; font-weight: 900; color: var(--nx-dark); line-height: 1; letter-spacing: -.5px; } .nx-pmodal-price-block.primary b { color: #fff; font-size: 26px; } .nx-pmodal-price-block b em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--nx-red); margin-inline-start: 4px; } .nx-pmodal-price-block.primary b em { color: var(--nx-red-soft); } /* ────────────────────────────────────────────────────────────── 15 · FLOATING SUPPORT BUTTON ────────────────────────────────────────────────────────────── */ .floating-support-btn { position: fixed !important; bottom: 28px !important; inset-inline-start: 24px !important; inset-inline-end: auto !important; right: auto !important; left: auto !important; height: 56px !important; min-width: 56px; width: auto !important; padding: 0 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; background: var(--nx-grad) !important; color: #fff !important; text-decoration: none !important; border-radius: var(--r-pill) !important; font-family: var(--font); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; box-shadow: 0 10px 32px rgba(200, 39, 58, .40) !important; z-index: 998 !important; transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important; } .floating-support-btn:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 16px 40px rgba(200, 39, 58, .55) !important; color: #fff !important; } .floating-support-btn:active { transform: translateY(-1px) scale(.98) !important; } .floating-support-btn svg { width: 22px; height: 22px; flex-shrink: 0; display: block; position: relative; z-index: 2; } .floating-support-label { position: relative; z-index: 2; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease), opacity .25s var(--ease); } .floating-support-btn:hover .floating-support-label { max-width: 140px; opacity: 1; } .floating-support-pulse { position: absolute; inset: 0; border-radius: var(--r-pill); background: rgba(200, 39, 58, .55); z-index: 1; pointer-events: none; animation: nxsupport-pulse 2.4s ease-out infinite; } @keyframes nxsupport-pulse { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } /* ────────────────────────────────────────────────────────────── 16 · SUB-PAGE LEGACY OVERRIDES Restyle existing class names used across about/contact/page/ policies/login/register so old templates inherit the new look. ────────────────────────────────────────────────────────────── */ .section.breadcrumb-bg { position: relative; background: var(--nx-dark) !important; background-image: none !important; padding: 100px 0 80px !important; margin: 0 !important; overflow: hidden; } .section.breadcrumb-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 36px 36px; } .section.breadcrumb-bg::after { content: ''; position: absolute; pointer-events: none; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 39, 58, .18) 0%, transparent 65%); top: -180px; inset-inline-end: -120px; } .cr-breadcrumb-area { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .cr-breadcrumb-area::before { content: 'NumoX'; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--nx-red-soft); } .title-breadcrumb { font-family: var(--font) !important; font-size: clamp(40px, 5vw, 64px) !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: -1.5px !important; color: #fff !important; margin: 0 !important; } .about-us-page { padding: 56px 0 72px; } .about-us-page h1, .about-us-page h2 { font-size: 32px; font-weight: 800; color: var(--nx-dark); letter-spacing: -.5px; } .about-us-page h3 { font-size: 22px; font-weight: 800; color: var(--nx-dark); } .about-us-page h4 { font-size: 18px; font-weight: 700; color: var(--nx-dark); margin-bottom: 8px; } .about-us-page p { font-size: 15px; font-weight: 300; color: var(--nx-body); line-height: 1.85; } .about-us-page .list-aboutus { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 20px; } .about-us-page .list-aboutus li { background: #fff; border: 1px solid var(--nx-border); border-radius: var(--r-card); padding: 22px 24px; position: relative; transition: all .25s var(--ease); } .about-us-page .list-aboutus li::before { content: ''; position: absolute; inset-inline-start: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 4px; background: var(--nx-grad); } .about-us-page .list-aboutus li:hover { border-color: var(--nx-dark); box-shadow: 0 8px 24px rgba(10, 14, 46, .06); } .page-content-wrapper { background: #fff; border: 1px solid var(--nx-border); border-radius: var(--r-card); padding: 36px 40px; font-size: 15px; font-weight: 300; color: var(--nx-body); line-height: 1.9; } .page-content-wrapper h1 { font-size: 28px; font-weight: 800; color: var(--nx-dark); margin: 24px 0 12px; } .page-content-wrapper h2 { font-size: 22px; font-weight: 800; color: var(--nx-dark); margin: 24px 0 12px; } .page-content-wrapper h3 { font-size: 18px; font-weight: 800; color: var(--nx-dark); margin: 24px 0 12px; } .page-content-wrapper p { margin-bottom: 14px; } .page-content-wrapper ul, .page-content-wrapper ol { padding-inline-start: 22px; margin-bottom: 14px; } .page-content-wrapper li { margin-bottom: 8px; } .page-content-wrapper a { color: var(--nx-red); text-decoration: none; border-bottom: 1px solid var(--nx-red); } .page-content-wrapper a:hover { color: var(--nx-navy); border-color: var(--nx-navy); } /* Legacy FAQ classes (faqs.blade.php / older templates) */ .questions-section { background: var(--nx-bone) !important; padding: 72px 32px !important; border-radius: var(--r-card) !important; display: flex; flex-direction: column; gap: 40px; align-items: center; margin: 56px auto !important; min-width: auto !important; } .questions-section-content { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .questions-section-content h1 { font-size: 36px !important; font-weight: 900 !important; color: var(--nx-dark) !important; letter-spacing: -.5px !important; } .questions-section-content p { font-size: 15px !important; color: var(--nx-muted) !important; font-weight: 300 !important; } .faq-accordion { width: 100%; max-width: 760px; } .faq-button { background: #fff !important; border: 1.5px solid transparent !important; border-radius: var(--r-card) !important; padding: 18px 22px !important; font-family: var(--font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--nx-dark) !important; box-shadow: 0 2px 12px rgba(31, 46, 122, .06) !important; outline: none !important; transition: all .25s !important; } .faq-button:hover, .faq-button:focus { border-color: rgba(31, 46, 122, .18) !important; box-shadow: 0 4px 20px rgba(31, 46, 122, .10) !important; background: #fff !important; } .accordion-body { background: #fff !important; border: 1.5px solid var(--nx-border) !important; border-radius: var(--r-card) !important; padding: 18px 22px !important; margin-top: 10px !important; color: var(--nx-body) !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.85 !important; } .faq-icon { width: 30px !important; height: 30px !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; font-size: 18px !important; font-weight: 300 !important; color: #fff !important; flex-shrink: 0; } .faq-icon.plus { background: var(--nx-navy) !important; } .faq-icon.minus { background: var(--nx-red) !important; } /* Forms (login / register) */ .registeration-form-container { background: var(--nx-bone) !important; padding: 56px 0 80px !important; } .registeration-form-header h1, .registeration-form-header h2 { font-family: var(--font) !important; font-size: 32px !important; font-weight: 900 !important; color: var(--nx-dark) !important; letter-spacing: -.5px !important; } .registeration-form-header p { font-family: var(--font) !important; font-size: 15px !important; color: var(--nx-muted) !important; font-weight: 300 !important; } .login-form-card, .registeration-form .card, form.registeration-form>div { background: #fff !important; border: 1px solid var(--nx-border) !important; border-radius: var(--r-card) !important; box-shadow: 0 12px 40px rgba(10, 14, 46, .08) !important; } .registeration-form-container .form-control, .registeration-form-container .form-select, .registeration-form-container input[type="text"], .registeration-form-container input[type="email"], .registeration-form-container input[type="tel"], .registeration-form-container input[type="password"], .registeration-form-container input[type="number"] { font-family: var(--font); border-radius: 12px !important; border: 1.5px solid var(--nx-border) !important; padding: 12px 16px !important; font-size: 14px !important; transition: border-color .2s, box-shadow .2s; } .registeration-form-container .form-control:focus { border-color: var(--nx-navy) !important; box-shadow: 0 0 0 3px rgba(31, 46, 122, .08) !important; } .btn-theme, .btn-theme2, .theme-button-color, button.btn-primary { background: var(--nx-dark) !important; border: none !important; color: #fff !important; border-radius: var(--r-pill) !important; font-family: var(--font) !important; font-weight: 700 !important; padding: 12px 28px !important; transition: transform .25s, background .25s !important; } .btn-theme:hover, .btn-theme2:hover, .theme-button-color:hover, button.btn-primary:hover { background: var(--nx-grad) !important; transform: translateY(-2px); } /* Legacy footer fallback */ footer.footer { background: var(--nx-dark) !important; color: #fff; } footer.footer h5 { color: var(--nx-red-soft) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; margin-bottom: 18px !important; } footer.footer ul li a { color: rgba(255, 255, 255, .6) !important; font-size: 14px !important; font-weight: 400 !important; } footer.footer ul li a:hover { color: #fff !important; } footer.footer .footer-bg { display: none !important; } /* Generic about/news utility */ .bg-white { background: #fff !important; } section.mt-3.bg-white { padding: 24px 0; } section.about-us { padding: 56px 0; background: var(--nx-bone); } section.about-us .row { align-items: center; } section.about-us img { border-radius: var(--r-card); display: block; max-width: 100%; } /* ────────────────────────────────────────────────────────────── 17 · UTILITIES ────────────────────────────────────────────────────────────── */ .nx-flex-center { display: flex; justify-content: center; } .nx-section-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 52px; } .nx-mt-md { margin-top: 24px; } .nx-mt-lg { margin-top: 44px; } .nx-max-w-xs { max-width: 300px; } .nx-max-w-sm { max-width: 380px; } .nx-max-w-md { max-width: 480px; } .nx-max-w-lg { max-width: 560px; } /* ────────────────────────────────────────────────────────────── 18 · RESPONSIVE ────────────────────────────────────────────────────────────── */ /* ── Mobile bottom nav (< 1200px) ─────────────────────────── */ @media (max-width: 1199.98px) { .Header-mobile { position: fixed; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; z-index: 999; background: rgba(10, 14, 46, .96); backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, .08); display: flex !important; align-items: stretch; justify-content: space-evenly; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 0; box-shadow: 0 -8px 32px rgba(10, 14, 46, .20); font-size: 0; /* collapse whitespace text-nodes */ } .Header-mobile>* { font-size: initial; } .Header-mobile a { flex: 1 1 0; min-width: 0; max-width: 96px; margin: 0 2px; padding: 8px 4px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; border-radius: 14px; text-decoration: none; font-family: var(--font); font-size: 10px; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, .55); position: relative; transition: color .25s var(--ease), background .25s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Header-mobile a>ion-icon { display: block; font-size: 22px; line-height: 1; flex-shrink: 0; transition: transform .25s var(--ease); } .Header-mobile a>span { display: block; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Header-mobile a:hover { color: #fff; background: rgba(255, 255, 255, .05); } .Header-mobile a:hover>ion-icon { transform: translateY(-2px); } .Header-mobile a.active { color: #fff; background: var(--nx-grad); box-shadow: 0 4px 14px rgba(200, 39, 58, .35); } body { padding-bottom: 76px; } .floating-support-btn { bottom: 90px !important; inset-inline-start: 16px !important; height: 52px !important; min-width: 52px; padding: 0 16px !important; font-size: 13px; } .floating-support-btn svg { width: 20px; height: 20px; } } /* ── Tablet ≤ 1100px ──────────────────────────────────────── */ @media (max-width: 1100px) { .nx-features-grid { grid-template-columns: repeat(2, 1fr); } .nx-feature-cell:nth-child(2) { border-inline-end: none; } .nx-feature-cell:nth-child(1), .nx-feature-cell:nth-child(2) { border-bottom: 1.5px solid var(--nx-dark); } .nx-about-side, .nx-faq-side { position: static; } } /* ── Mobile ≤ 768px ───────────────────────────────────────── */ @media (max-width: 768px) { .nx-header-inner { height: 64px; } .nx-logo img { height: 42px; } .nx-hero-text { padding: 48px 0 64px; min-height: auto; } .nx-hero-mega { font-size: 44px; letter-spacing: -1.5px; } .nx-hero-lead { font-size: 15px; } .nx-hero-mini { gap: 18px; } .nx-hero-mini-item b { font-size: 32px; } .nx-hero-mini-divider { height: 28px; } .nx-about, .nx-programs, .nx-features, .nx-faq { padding: 72px 0; } .nx-about-quote { padding: 28px 24px; } .nx-programs-bar { flex-direction: column; align-items: flex-start; } .nx-features-grid { grid-template-columns: 1fr; } .nx-feature-cell { border-inline-end: none !important; border-bottom: 1.5px solid var(--nx-dark); } .nx-feature-cell:last-child { border-bottom: none; } .nx-cta-strip { padding: 60px 0; } .nx-cta-strip-actions { flex-direction: column; align-items: stretch; } .nx-cta-strip-inner { flex-direction: column; align-items: flex-start; } .nx-faq-btn { gap: 14px; padding: 20px 4px !important; } .nx-faq-q-text { font-size: 15px; } .nx-faq-icon { width: 32px; height: 32px; font-size: 18px; } .nx-faq-answer { padding-inline-start: 4px; font-size: 14px; } padding: 80px 0 64px; } letter-spacing: -1px; } } .nx-pmodal .modal-dialog { margin: 12px; max-width: calc(100% - 24px); } .nx-pmodal-content { border-radius: 18px !important; } .nx-pmodal-banner { height: 180px; min-height: 180px; flex-basis: 180px; } .nx-pmodal-body { padding: 20px 18px 22px; gap: 16px; } .nx-pmodal-title { font-size: 20px; } .nx-pmodal-stats { grid-template-columns: 1fr; gap: 10px; padding: 12px; } .nx-pmodal-pricing { grid-template-columns: 1fr; } .nx-pmodal-price-block.primary b { font-size: 22px; } .nx-footer-mega { font-size: 64px; letter-spacing: -2px; padding-bottom: 36px; } .nx-footer-bottom { flex-direction: column; gap: 16px; text-align: center; } .pcard-foot { flex-direction: column; align-items: stretch; } .nx-pcard-foot { flex-direction: column; align-items: stretch; } .nx-pcard-cta { justify-content: center; } .questions-section { padding: 48px 18px !important; } .questions-section-content h1 { font-size: 26px !important; } .registeration-form-container { padding: 36px 0 64px !important; } .registeration-form-header h1, .registeration-form-header h2 { font-size: 24px !important; } .section.breadcrumb-bg { padding: 64px 0 52px !important; } .title-breadcrumb { font-size: 32px !important; } .page-content-wrapper { padding: 24px 22px; } } @media (max-width: 480px) { .Header-mobile a { font-size: 9px; padding: 6px 2px; gap: 3px; margin: 0 1px; } .Header-mobile a>ion-icon { font-size: 20px; } body { padding-bottom: 68px; } .floating-support-btn { bottom: 80px !important; height: 48px !important; min-width: 48px; padding: 0 14px !important; } .floating-support-btn .floating-support-label { display: none; } }