/* ========================================================= theme.css — XorMon complete design system override Load AFTER style.css and bootstrap.min.css Scope: .theme-v2 on ========================================================= */ /* ========================= 1) DESIGN TOKENS (:root) ========================= */ :root { /* Typography */ --t-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIX #1 — Font-weight tokens Centralize all weight values to avoid implicit/missing font-weight across Chrome vs Firefox rendering. Chrome (ClearType) synthesizes missing weights heavier; Firefox does not — explicit tokens prevent divergence. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --t-fw-regular: 400; --t-fw-medium: 500; --t-fw-semibold: 600; --t-fw-bold: 700; /* Brand color palette */ --c-primary: #1068CE; --c-primary-hover: #0b55ad; --c-primary-light: rgba(16, 104, 206, 0.10); --c-primary-glow: rgba(16, 104, 206, 0.22); --c-accent: #00C6A7; --c-accent-hover: #00a88c; /* Backgrounds */ --c-bg: #ffffff; --c-bg-subtle: #F4FAFF; --c-surface: #F4FAFF; --c-surface-2: rgba(255, 255, 255, 0.10); --c-surface-glass: rgba(255, 255, 255, 0.06); /* Borders */ --c-border: rgba(16, 104, 206, 0.13); --c-border-light: rgba(0, 0, 0, 0.07); --c-border-dark: rgba(255, 255, 255, 0.14); /* Text */ --c-text: #17191C; --c-text-muted: #5E6E82; --c-text-light: rgba(255, 255, 255, 0.92); --c-text-light-muted: rgba(255, 255, 255, 0.68); --c-heading: #0E1827; /* Links */ --c-link: #1068CE; --c-link-hover: #0b55ad; /* Gradients */ --grad-hero: linear-gradient(165deg, #001E45 0%, #003A6B 55%, #004E8C 100%); --grad-xormon: linear-gradient(180deg, #002447 0%, #003A6B 100%); --grad-card-hover: linear-gradient(135deg, rgba(16,104,206,0.08) 0%, rgba(0,198,167,0.06) 100%); --grad-surface: linear-gradient(135deg, #F4FAFF 0%, #EEF6FF 100%); /* Radius scale */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Shadow scale */ --sh-xs: 0 1px 3px rgba(0, 0, 0, 0.08); --sh-sm: 0 3px 8px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.08); --sh-md: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06); --sh-card: 0 10px 32px rgba(14, 24, 39, 0.10), 0 2px 8px rgba(14, 24, 39, 0.06); --sh-float: 0 20px 60px rgba(14, 24, 39, 0.18), 0 4px 16px rgba(14, 24, 39, 0.08); --sh-primary: 0 8px 28px rgba(16, 104, 206, 0.28), 0 2px 8px rgba(16, 104, 206, 0.14); /* Motion */ --tr: 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --tr-slow: 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --tr-spring: 240ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ========================= 2) GLOBAL BASE / TYPOGRAPHY ========================= */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIX #2 — Font smoothing + explicit body font-weight ROOT CAUSE : Chrome (Windows/ClearType) rend le texte plus épais que Firefox en l'absence de directive de lissage. Sans font-weight explicite, Bootstrap peut imposer une valeur différente selon le navigateur. FIX : • -webkit-font-smoothing: antialiased → allège le rendu Chrome • font-weight: var(--t-fw-regular) → ancre le poids à 400 explicitement, sans dépendre de Bootstrap NOTE : -moz-osx-font-smoothing n'affecte Firefox que sur macOS ; sur Windows, Firefox utilise ClearType nativement — c'est correct. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .theme-v2 { font-family: var(--t-font-sans); font-weight: var(--t-fw-regular); /* FIX #2a — poids explicite */ color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; /* FIX #2b — allège Chrome/Edge */ -moz-osx-font-smoothing: grayscale; /* FIX #2b — Firefox macOS */ } .theme-v2 body { font-family: var(--t-font-sans); font-weight: var(--t-fw-regular); /* FIX #2a — redéclaré sur body pour éviter tout héritage parasite de Bootstrap */ color: var(--c-text); } /* Headings */ .theme-v2 h1, .theme-v2 h2, .theme-v2 h3, .theme-v2 h4, .theme-v2 h5, .theme-v2 h6, .theme-v2 .h1, .theme-v2 .h2, .theme-v2 .h3, .theme-v2 .h4, .theme-v2 .h5, .theme-v2 .h6 { color: var(--c-heading); letter-spacing: -0.015em; } /* On dark backgrounds, headings should be white */ .theme-v2 .bg-server h1, .theme-v2 .bg-server h2, .theme-v2 .bg-server h3, .theme-v2 .bg-server h4, .theme-v2 .bg-server .h1, .theme-v2 .bg-server .h2, .theme-v2 .bg-server .h3, .theme-v2 .bg-dark h1, .theme-v2 .bg-dark h2, .theme-v2 .bg-dark h3, .theme-v2 .bg-dark h4 { color: #fff; } /* Paragraphs */ .theme-v2 p { color: var(--c-text); line-height: 1.8; } /* Lead text */ .theme-v2 .lead { color: var(--c-text-muted); font-size: 1.125rem; line-height: 1.65; } /* Muted text */ .theme-v2 .text-muted { color: var(--c-text-muted) !important; } /* Small text */ .theme-v2 .small, .theme-v2 small { color: var(--c-text-light); } /* Links — global */ .theme-v2 a { color: var(--c-link); text-decoration: none; background-color: transparent; transition: color var(--tr); } .theme-v2 a:hover { color: var(--c-link-hover); text-decoration: none; } /* Content links that should have underlines (in body text) */ .theme-v2 .unformatted a, .theme-v2 .docs-content a { text-decoration: none; } .theme-v2 .unformatted a:hover, .theme-v2 .docs-content a:hover { color: var(--c-primary-hover); } /* Images */ .theme-v2 img { max-width: 100%; } .theme-v2 img[src*="xorux_white.svg"] { display: block; margin-left: auto; margin-right: auto; opacity: 0.05; } /* Pre / code blocks */ .theme-v2 pre { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.5rem; color: var(--c-text); font-size: 0.875rem; line-height: 1.7; } /* ========================= 3) LAYOUT / SECTIONS ========================= */ /* Body pattern */ .theme-v2.bg-x { background-color: var(--c-bg); background-blend-mode: soft-light; background-image: url("images/css/loga/x-pattern-3.svg"); background-repeat: repeat-y; background-position: center 650px; background-size: 110%; opacity: 1; /* pattern kept, just softened by bg-color */ } /* Hero section — dark gradient overlay on bg-server */ .theme-v2 .bg-server { position: relative; background-image: url("/images/theme/bg.webp"); background-repeat: no-repeat; background-position: center top; background-size: cover; } .theme-v2 .bg-server::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--grad-hero); opacity: 0.92; } /* CSS grid overlay — blue tinted, fades at edges */ .theme-v2 .bg-server::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(rgba(99, 179, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 179, 255, 0.12) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 75%); } .theme-v2 .bg-server > * { position: relative; z-index: 2; } /* Cards that overlap a hero (negative margin-top) must stay above .bg-server > * (z-index 2) */ .theme-v2 .form-content, .theme-v2 .card-plarge { position: relative; z-index: 3; } /* Hero X watermark — softer */ .theme-v2 .hero-x::before { opacity: 0.04; } /* Section divider line */ .theme-v2 .sec-border { background-image: none; background: transparent; border-bottom: 1px solid var(--c-border-light); } /* Section spacing kept from legacy; enhance visual breathing */ .theme-v2 .sec-p { padding-top: 6.25rem; padding-bottom: 8rem; } /* Spacer */ .theme-v2 .spacer { display: block; height: 6.25rem; width: 100%; } /* Alert primary */ .theme-v2 .alert-primary { background-color: var(--c-primary); border-color: var(--c-primary); border-radius: var(--r-md); color: #fff; } .theme-v2 .alert-primary a { color: #fff; text-decoration: underline; } .theme-v2 .alert-primary a:hover { color: rgba(255, 255, 255, 0.80); } .theme-v2 .alert-danger { border-radius: var(--r-md); } /* ========================= 4) NAVBAR / MENU ========================= */ .theme-v2 header.menu { z-index: 100; } /* Topbar */ .theme-v2 .topbar { /*background: rgba(0, 0, 0, 0.18);*/ background: rgba(0, 0, 0,0); border-bottom: 1px solid rgba(255, 255, 255, 0.09); padding: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .theme-v2 .topbar .nav-link { color: rgba(255, 255, 255, 0.78); font-size: 0.8125rem; font-weight: var(--t-fw-semibold); /* = 600 — aligné sur navbar-light */ transition: color var(--tr); } .theme-v2 .topbar .nav-link:hover { color: #fff; } /* Main dark navbar */ .theme-v2 .navbar-dark { border-bottom: 1px solid rgba(255, 255, 255, 0.10); } /* Light navbar */ .theme-v2 .navbar-light { border-bottom: 1px solid var(--c-border-light); background-color: #fff; } /* Nav links */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIX #3 — font-weight explicite sur les liens de navigation ROOT CAUSE : Bootstrap 5 définit .nav-link { font-weight: 400 } avec une spécificité (0,1,0). Ce CSS ne redéfinissait pas ce poids → les liens nav héritaient de 400. Chrome compensait visuellement via ClearType (rendu légèrement plus gras), Firefox non → les liens paraissaient trop fins dans Firefox uniquement. FIX : imposer font-weight: 500 (medium) — lisible dans les deux navigateurs sans dépendre du rendu ClearType. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .theme-v2 .navbar-nav .nav-link { font-weight: var(--t-fw-medium); /* FIX #3 — était absent, Bootstrap écrasait à 400 */ text-decoration: none; transition: color var(--tr), opacity var(--tr); } .theme-v2 .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.84); } .theme-v2 .navbar-dark .navbar-nav .nav-link:hover { color: #fff; } .theme-v2 .navbar-light .navbar-nav .nav-link { color: var(--c-text); font-weight: var(--t-fw-semibold); /* = 600, plus lisible que 500 sur fond blanc */ } .theme-v2 .navbar-light .navbar-nav .nav-link:hover { color: var(--c-primary); } /* Active state — underline replaced with a clean dot/bar */ .theme-v2 .navbar-dark .navbar-nav .active > .nav-link, .theme-v2 .navbar-dark .navbar-nav .nav-link.active, .theme-v2 .navbar-dark .navbar-nav .nav-link.show, .theme-v2 .navbar-dark .navbar-nav .show > .nav-link { color: #fff; text-decoration: none; position: relative; } .theme-v2 .navbar-dark .navbar-nav .nav-link.active::after, .theme-v2 .navbar-dark .navbar-nav .show > .nav-link::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.3rem; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.65); } .theme-v2 .navbar-light .navbar-nav .active > .nav-link, .theme-v2 .navbar-light .navbar-nav .nav-link.active { color: var(--c-primary); text-decoration: none; } /* Brand logo */ .theme-v2 .navbar-brand { text-decoration: none; } /* Toggler */ .theme-v2 .navbar-toggler { border: none; transition: opacity var(--tr); } .theme-v2 .navbar-toggler:focus { outline: none; box-shadow: none; } /* Mobile off-canvas panel */ @media (max-width: 991px) { .theme-v2 .navbar-collapse { background: #fff; box-shadow: var(--sh-float); border-left: 1px solid var(--c-border-light); } .theme-v2 .navbar-collapse .navbar-nav .nav-link { color: var(--c-text); } .theme-v2 .navbar-dark .navbar-nav .nav-link:focus, .theme-v2 .navbar-dark .navbar-nav .nav-link:hover { color: var(--c-primary); } .theme-v2 .navbar-collapse .navbar-toggler { color: var(--c-text); border-color: transparent; } } /* Overlay dim */ .theme-v2 .navbar-overlay { background: #000; opacity: 0.55; } /* Search bar */ .theme-v2 .menu .btn, .theme-v2 .input-group .btn { box-shadow: none; } @media (min-width: 992px) { .theme-v2 #search-bar .form-control { border-color: rgba(255, 255, 255, 0.20); background: #f0f4f8; color: #1a2636; border-radius: var(--r-pill) 0 0 var(--r-pill); } .theme-v2 #search-bar .form-control:focus { background: #fff; border-color: rgba(185, 214, 255, 0.70); box-shadow: none; } .theme-v2 #search-bar .form-control::placeholder { color: rgba(26, 38, 54, 0.45); } } /* ========================= 5) BUTTONS ========================= */ .theme-v2 .btn { border-radius: var(--r-sm); border-width: 1.5px; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em; text-decoration: none !important; transition: transform var(--tr-spring), box-shadow var(--tr), background-color var(--tr), border-color var(--tr), color var(--tr); } .theme-v2 .btn:focus, .theme-v2 .btn.focus { box-shadow: none; outline: none; } /* Primary */ .theme-v2 .btn-primary { background-color: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: var(--sh-primary); } .theme-v2 .btn-primary:hover, .theme-v2 .btn-primary:focus { background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 36px rgba(16, 104, 206, 0.28), 0 3px 10px rgba(16, 104, 206, 0.16); } .theme-v2 .btn-primary:not(:disabled):not(.disabled):active, .theme-v2 .btn-primary:not(:disabled):not(.disabled).active, .theme-v2 .show > .btn-primary.dropdown-toggle { background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; transform: translateY(0); } .theme-v2 .btn-primary:not(:disabled):not(.disabled).active:focus, .theme-v2 .btn-primary:not(:disabled):not(.disabled):active:focus, .theme-v2 .show > .btn-primary.dropdown-toggle:focus { box-shadow: none; } .theme-v2 a.btn-primary { color: #fff !important; } /* Outline primary */ .theme-v2 .btn-outline-primary { color: var(--c-primary); border-color: rgba(16, 104, 206, 0.45); background: transparent; } .theme-v2 .btn-outline-primary:hover, .theme-v2 .btn-outline-primary:active, .theme-v2 .btn-outline-primary:focus { color: #fff; background: var(--c-primary); border-color: var(--c-primary); transform: translateY(-1px); } .theme-v2 .btn-outline-primary:not(:disabled):not(.disabled).active, .theme-v2 .btn-outline-primary:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); } .theme-v2 .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .theme-v2 .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .theme-v2 .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: none; } /* Small */ .theme-v2 .btn-sm, .theme-v2 .btn-group-sm > .btn { border-radius: var(--r-xs); font-size: 0.75rem; padding: 0.3rem 0.75rem; } /* Disabled */ .theme-v2 .btn.disabled, .theme-v2 .btn:disabled { background-color: rgba(16, 104, 206, 0.20); border-color: rgba(16, 104, 206, 0.20); color: rgba(255, 255, 255, 0.55); opacity: 1; cursor: not-allowed; transform: none; box-shadow: none; } /* btn-block */ .theme-v2 .btn-block { width: 100%; } /* ========================= 6) CARDS ========================= */ .theme-v2 .card { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; padding: 1.625rem 1.875rem; transition: transform var(--tr-spring), box-shadow var(--tr), border-color var(--tr); } .theme-v2 .card:hover { /*transform: translateY(-2px);*/ box-shadow: var(--sh-float); border-color: var(--c-border); } .theme-v2 .card-body { padding: 2.25rem; } .theme-v2 .card-plarge { padding: 2.125rem 2.5rem; } @media (max-width: 575px) { .theme-v2 .card-plarge { padding: 2.125rem 1.5rem; } } .theme-v2 .card-psmall { padding: 2.6rem 1.375rem; } .theme-v2 .card-title { color: var(--c-heading); font-weight: 700; margin-bottom: 0.75rem; } .theme-v2 .card-text { color: var(--c-text-muted); line-height: 1.7; } .theme-v2 .card-active { border: 2px solid var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-light), var(--sh-card); } .theme-v2 .card-shadow { box-shadow: var(--sh-card); } .theme-v2 .sec-p.sec-border .card.bg-light .card-text li a { color: var(--c-text-muted); text-decoration: none; } .theme-v2 .sec-p.sec-border .card.bg-light .card-text li a:hover { color: var(--c-link); } /* bg-light override */ .theme-v2 .bg-light { background: var(--grad-surface) !important; border: 1px solid var(--c-border) !important; border-radius: var(--r-md); } .theme-v2 .bg-light li { color: var(--c-text); } .theme-v2 .bg-light-solid { background-color: #EEF4F8 !important; border-radius: var(--r-md); } /* bg-dark override */ .theme-v2 .bg-dark { background-image: var(--grad-xormon) !important; background-color: transparent !important; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-lg); position: relative; overflow: hidden; } /* CSS grid overlay sur bg-dark (section Proof) */ .theme-v2 .bg-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(99, 179, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 179, 255, 0.10) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, black 0%, transparent 65%); mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, black 0%, transparent 65%); } .theme-v2 .bg-dark > * { position: relative; z-index: 1; } /* bg-white cards in dark sections */ .theme-v2 .bg-server .bg-white, .theme-v2 .bg-dark .bg-white { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.12); } /* Shadow utilities */ .theme-v2 .shadow { box-shadow: var(--sh-card) !important; } .theme-v2 .shadow-sm { box-shadow: var(--sh-sm) !important; } /* Rounded */ .theme-v2 .rounded { border-radius: var(--r-md) !important; } /* Card apps (floating card variant) */ .theme-v2 .card-apps-thumb { border: 4px solid var(--c-primary); border-radius: var(--r-md); } /* ========================= 7) LISTS ========================= */ /* Base list */ .theme-v2 .list li { color: var(--c-text); } /* Large list */ .theme-v2 .list-lg, .theme-v2 .list-lg ul { color: var(--c-text); } /* Small list */ .theme-v2 .list-sm, .theme-v2 .list-sm ul { color: var(--c-text-muted); } /* Extra-small list */ .theme-v2 .list-xs, .theme-v2 .list-xs ul { color: var(--c-text-muted); line-height: 1.9; } /* X-icon list (light bg variant) */ .theme-v2 .list-x, .theme-v2 .list-x ul { color: var(--c-text); } .theme-v2 .list-x li::before { background: url("images/css/loga/x-color.svg") no-repeat; } /* X-icon list on dark backgrounds */ .theme-v2 .text-white .list-x li::before, .theme-v2 .bg-server .list-x li::before, .theme-v2 .bg-dark .list-x li::before, .theme-v2 .list-x.text-white li::before { background: url("images/css/loga/x-white.svg") no-repeat; } /* Check list */ .theme-v2 .list-check li::before { color: var(--c-accent); } .theme-v2 .list-check li a { color: var(--c-text-muted); text-decoration: none; } .theme-v2 .bg-dark .list-check li a { color: rgba(255, 255, 255, 0.70); text-decoration: none; } .theme-v2 .bg-dark .list-check li a:hover, .theme-v2 .bg-dark .list-check li a.active { color: rgba(255, 255, 255, 0.95); } /* list-unstyled spacing */ .theme-v2 .list-unstyled li { margin-bottom: 0.375rem; } /* Nav pills */ .theme-v2 .nav-pills .nav-link { background-color: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-sm); box-shadow: var(--sh-sm); color: var(--c-text); font-weight: 600; padding: 0.6rem 1rem; transition: color var(--tr), border-color var(--tr), background-color var(--tr), box-shadow var(--tr), transform var(--tr-spring); } .theme-v2 .nav-pills .nav-link:hover { color: var(--c-primary); border-color: var(--c-border); transform: translateY(-1px); box-shadow: var(--sh-md); } .theme-v2 .nav-pills .nav-link.active, .theme-v2 .nav-pills .show > .nav-link { color: #fff; background-color: var(--c-primary); border-color: var(--c-primary); box-shadow: var(--sh-primary); } /* Nav tabs */ .theme-v2 .nav-tabs { border-bottom: 2px solid var(--c-border-light); box-shadow: none; margin-bottom: 2rem; } .theme-v2 .nav-tabs .nav-link { border: 1px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--c-text-muted); font-weight: 600; padding: 0.7rem 1.25rem; transition: color var(--tr), background-color var(--tr); } .theme-v2 .nav-tabs .nav-link:hover { color: var(--c-primary); border-color: var(--c-border-light) var(--c-border-light) transparent; background-color: var(--c-surface); } .theme-v2 .nav-tabs .nav-item.show .nav-link, .theme-v2 .nav-tabs .nav-link.active { color: var(--c-primary); background-color: #fff; border-color: var(--c-border-light) var(--c-border-light) #fff; border-bottom-color: #fff; } /* ========================= 8) TABLES ========================= */ .theme-v2 .table, .theme-v2 .table1 { color: var(--c-text); font-size: 0.8125rem; border-radius: var(--r-md); overflow: hidden; } .theme-v2 .table th, .theme-v2 .table td, .theme-v2 .table1 th, .theme-v2 .table1 td { border-top: 1px solid var(--c-border-light); padding: 0.6rem 0.75rem; vertical-align: middle; } .theme-v2 .table thead th, .theme-v2 .table1 thead th { border-top: 0; border-bottom: 2px solid var(--c-border); color: var(--c-heading); font-size: 0.875rem; font-weight: 700; background: var(--c-surface); letter-spacing: 0.01em; padding-top: 0.875rem; padding-bottom: 0.875rem; } .theme-v2 .table tbody tr:hover td { background-color: rgba(16, 104, 206, 0.03); } /* table-xor (striped comparison table) */ .theme-v2 .table-xor { background: var(--c-surface); border-left: 1.8rem solid var(--c-surface); border-right: 1.8rem solid var(--c-surface); border-radius: var(--r-md); } .theme-v2 .table-xor td, .theme-v2 .table-xor th { border-bottom: 1px solid var(--c-border-light); border-top: 0; } .theme-v2 .table-xor thead th { background: var(--c-surface); color: var(--c-heading); font-weight: 700; } .theme-v2 .table-xor tr:not(.col-offset) th:nth-child(even), .theme-v2 .table-xor tr:not(.col-offset) td:nth-child(even), .theme-v2 .table-xor tr.col-offset th:nth-child(odd), .theme-v2 .table-xor tr.col-offset td:nth-child(odd) { background: rgba(16, 104, 206, 0.06); border-right-color: rgba(16, 104, 206, 0.06); } /* Right OUTER edge of the table: when `.table-xor` has `border-right: 1.8rem` and `border-collapse: collapse`, the last cell of each row absorbs that border. Without this override, the nth-child(even/odd) rule above forces the absorbed border to take the cell's blue tint (visible as a stripe). Force it back to the table surface color so the right edge stays clean. */ .theme-v2 .table-xor tr:not(.col-offset) td:last-child, .theme-v2 .table-xor tr:not(.col-offset) th:last-child, .theme-v2 .table-xor tr.col-offset td:last-child, .theme-v2 .table-xor tr.col-offset th:last-child { border-right-color: var(--c-surface); } .theme-v2 .table-gray td, .theme-v2 .table-gray th { background: var(--c-surface) !important; border-right-color: var(--c-surface) !important; } /* Responsive table wrapper */ .theme-v2 .table-responsive { border-radius: var(--r-md); border: 1px solid var(--c-border-light); } /* ========================= 9) SIDEBAR ========================= */ /* Sidebar — fond clair (pages docs, wiki, etc.) */ .theme-v2 .sidebar { background-color: var(--grad-surface); background: linear-gradient(135deg, #F4FAFF 0%, #EEF6FF 100%); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1rem; } .theme-v2 .sidebar::before { opacity: 0.03; } .theme-v2 .sidebar .nav-link { color: var(--c-text); font-size: 0.8125rem; font-weight: var(--t-fw-medium); border-radius: var(--r-sm); padding: 0.6rem 1rem; transition: background-color var(--tr), color var(--tr); } .theme-v2 .sidebar .nav-link:hover, .theme-v2 .sidebar .nav-link:focus { background-color: var(--c-primary-light); color: var(--c-primary); } .theme-v2 .sidebar .nav-link.active { background-color: var(--c-primary-light); color: var(--c-primary); font-weight: 700; } .theme-v2 .sidebar .nav .nav .nav-link.active { background-color: transparent; color: var(--c-primary); border-left: none; padding-left: 1rem; } /* Sidebar sombre — pages sans class docs (ex: index.php bg-dark card) */ body:not(.docs) .theme-v2 .bg-dark.sidebar, .theme-v2 .bg-dark .sidebar { background: var(--grad-xormon) !important; border-color: rgba(255, 255, 255, 0.08); } body:not(.docs) .theme-v2 .bg-dark.sidebar .nav-link, .theme-v2 .bg-dark .sidebar .nav-link { color: rgba(255, 255, 255, 0.70) !important; } body:not(.docs) .theme-v2 .bg-dark.sidebar .nav-link:hover, .theme-v2 .bg-dark .sidebar .nav-link:hover { background-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.95) !important; } body:not(.docs) .theme-v2 .bg-dark.sidebar .nav-link.active, .theme-v2 .bg-dark .sidebar .nav-link.active { background-color: rgba(255, 255, 255, 0.12) !important; color: #fff !important; } .theme-v2 .sidebar .navbar-toggler { color: var(--c-primary); } @media (max-width: 991px) { .theme-v2 .sidebar { background-color: #fff; border-bottom: 1px solid var(--c-border-light); border-radius: 0; margin-bottom: 2rem; } } /* ========================= 10) FORMS ========================= */ .theme-v2 label { color: var(--c-text); font-weight: 600; font-size: 0.875rem; } .theme-v2 label small { color: var(--c-text-muted); font-weight: 400; } .theme-v2 .form-control { background-color: #fff; border: 1.5px solid #D0DAE8; border-radius: var(--r-sm); color: var(--c-text); font-size: 0.9375rem; height: calc(1.5em + 1.5rem + 4px); padding: 0.75rem 1.125rem; transition: border-color var(--tr), box-shadow var(--tr); } .theme-v2 .form-control::placeholder { color: #9aaab8; } .theme-v2 .form-control:focus { background-color: #fff; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-glow); color: var(--c-text); outline: none; } .theme-v2 .form-control:disabled, .theme-v2 .form-control[readonly] { background-color: var(--c-surface); color: var(--c-text-muted); cursor: not-allowed; } .theme-v2 .form-control-sm { border-radius: var(--r-xs); font-size: 0.875rem; height: calc(1.5em + 1.0rem + 4px); padding: 0.5rem 0.875rem; } /* Textarea */ .theme-v2 textarea.form-control { height: auto; border-radius: var(--r-md); padding: 0.875rem 1.125rem; resize: vertical; } /* Custom radio / checkbox */ .theme-v2 .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--c-primary); background-color: var(--c-primary); } .theme-v2 .custom-control-label::before { border: 2px solid #D0DAE8; border-radius: 4px; } /* Custom select */ .theme-v2 .custom-select { border: 1.5px solid #D0DAE8; border-radius: var(--r-sm); color: var(--c-text); background-color: #fff; font-size: 0.9375rem; } .theme-v2 .custom-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-glow); outline: none; } /* Input groups */ .theme-v2 .input-group-text { background-color: var(--c-surface); border: 1.5px solid #D0DAE8; border-radius: var(--r-sm); color: var(--c-text-muted); } /* Form group */ .theme-v2 .form-group { margin-bottom: 1.5rem; } /* Legend */ .theme-v2 legend { font-weight: 600; color: var(--c-heading); } /* Fieldset */ .theme-v2 fieldset { border-bottom: 1px solid var(--c-border-light); padding: 0.5rem 0; } /* Validation */ .theme-v2 .was-validated .form-control:valid, .theme-v2 .form-control.is-valid { border-color: #198754; } .theme-v2 .was-validated .form-control:valid:focus, .theme-v2 .form-control.is-valid:focus { border-color: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.20); } .theme-v2 .was-validated .form-control:invalid, .theme-v2 .form-control.is-invalid { border-color: #dc3545; } .theme-v2 .was-validated .form-control:invalid:focus, .theme-v2 .form-control.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); } .theme-v2 .invalid-feedback { font-size: 0.8125rem; margin-top: 0.35rem; } /* ========================= 11) UTILITIES OVERRIDES ========================= */ /* Opacity helpers */ .theme-v2 .o-60 { opacity: 0.6; } .theme-v2 .o-20 { opacity: 0.2; } /* Font bigger */ .theme-v2 .font-bigger { font-size: 130%; } /* Technology logo boxes */ .theme-v2 .tech-box { border-radius: var(--r-md); overflow: hidden; transition: transform var(--tr-spring), box-shadow var(--tr); } .theme-v2 .tech-box.bg-white { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--sh-sm); transition: transform var(--tr-spring), box-shadow var(--tr), background-color var(--tr); } .theme-v2 .tech-box.bg-white:hover { transform: translateY(-3px); box-shadow: var(--sh-card); background: rgba(255, 255, 255, 0.11) !important; } /* Technologies logo */ .theme-v2 .technologies-logo { background-color: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-sm); box-shadow: var(--sh-xs); transition: transform var(--tr-spring), box-shadow var(--tr); } .theme-v2 .technologies-logo:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); } /* Reseller cards */ .theme-v2 .reseller { border-radius: var(--r-md); border: 1px solid var(--c-border-light); background: #fff; box-shadow: var(--sh-sm); transition: transform var(--tr-spring), box-shadow var(--tr); } .theme-v2 .reseller:hover { transform: translateY(-2px); box-shadow: var(--sh-card); } .theme-v2 .reseller-text .country { color: var(--c-text-muted); } /* Partner logos */ .theme-v2 .partner { border-radius: var(--r-sm); transition: opacity var(--tr), transform var(--tr-spring); } .theme-v2 .partner:hover { opacity: 0.85; transform: scale(1.02); } /* Photo gallery */ .theme-v2 .photo-gallery a { border-radius: var(--r-sm); overflow: hidden; display: inline-block; } /* Stretched links */ .theme-v2 .stretched-link { text-decoration: none; } /* Tab content */ .theme-v2 .tab-content { padding-top: 1.5rem; } /* Spinner */ .theme-v2 .spinner-border { color: var(--c-primary); } /* ========================= 12) PAGE-SPECIFIC OVERRIDES ========================= */ /* --- ANNOUNCEMENT PAGE --- */ .theme-v2 .announcement { padding: 1rem 2.5rem; border-top: 1px solid var(--c-border-light); color: var(--c-text-muted); transition: background-color var(--tr); } .theme-v2 .announcement:last-child { border-bottom: 1px solid var(--c-border-light); } .theme-v2 .announcement:hover { background-color: var(--c-surface); } .theme-v2 .announcement a { color: var(--c-primary); font-weight: 600; text-decoration: none; transition: color var(--tr); } .theme-v2 .announcement a:hover { color: var(--c-primary-hover); text-decoration: underline; } .theme-v2 .announcement .sub { font-size: 0.8125rem; color: var(--c-text-muted); padding: 0.5rem 0 0 1.25rem; } @media (max-width: 768px) { .theme-v2 .announcement { padding: 0.875rem 0; } } /* --- DOCS / DOCUMENTATION PAGE --- */ .theme-v2 .docs h1 { color: var(--c-heading); font-size: 1.875rem; font-weight: 700; } /* Hero h1 keeps the standard hero look on docs pages too */ .theme-v2.docs .hero h1, .theme-v2.docs .bg-server h1, .theme-v2.docs .bg-dark h1 { color: #fff !important; font-size: 3.5rem !important; font-weight: 900 !important; line-height: 1.2 !important; } .theme-v2 .docs .unformatted { line-height: 1.85; color: var(--c-text); } .theme-v2 .docs .unformatted h2, .theme-v2 .docs .unformatted h3 { color: var(--c-heading); margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border-light); } .theme-v2 .docs .unformatted h4 { color: var(--c-heading); margin-top: 1.5rem; } .theme-v2 .docs-content { color: var(--c-text); font-weight: var(--t-fw-regular); /* = 400, explicite pour éviter tout héritage parasite */ } .theme-v2 .docs-content h2, .theme-v2 .docs-content h3, .theme-v2 .docs-content h4 { color: var(--c-heading); } .theme-v2 .docs-content pre, .theme-v2 .docs .unformatted pre { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text); font-size: 0.875rem; padding: 1.25rem 1.5rem; } /* --- EVENTS PAGE --- */ .theme-v2 .events h2 { font-size: 1.4rem; color: var(--c-heading); } /* --- SUPPORT PAGE --- */ .theme-v2 .search-results { padding: 0; list-style: none; } .theme-v2 .search-results .search-item { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--c-border-light); } .theme-v2 .search-results .search-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .theme-v2 .search-title { display: block; font-weight: 700; color: var(--c-primary); font-size: 1.0625rem; margin-bottom: 0.25rem; transition: color var(--tr); } .theme-v2 .search-title:hover { color: var(--c-primary-hover); } .theme-v2 .search-url { display: block; font-size: 0.8125rem; color: var(--c-text-muted); margin-bottom: 0.375rem; } /* --- CONTACT / KIVE FORM --- */ .theme-v2 .form-xor { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 2.5rem; } /* Form status messages */ .theme-v2 .form-status { font-size: 0.9rem; font-weight: 600; } /* --- DOWNLOAD PAGE --- */ .theme-v2 .card-thumb-top img { border-radius: var(--r-md) var(--r-md) 0 0; } /* --- VIDEO PAGE --- */ .theme-v2 .photo-gallery img { border-radius: var(--r-md); transition: transform var(--tr-spring), box-shadow var(--tr); } .theme-v2 .photo-gallery a:hover img { transform: scale(1.02); box-shadow: var(--sh-float); } /* --- CUSTOMERS PAGE --- */ .theme-v2 .card-columns .card { break-inside: avoid; } /* --- PRODUCTS PAGE --- */ .theme-v2 .nav-fill .nav-item { flex: 1; } /* --- INSTALLATION PAGE --- */ .theme-v2 .tab-pane pre { border-radius: var(--r-md); border: 1px solid var(--c-border); } /* ========================= 13) FOOTER ========================= */ .theme-v2 .page-footer { background: var(--c-surface); border-top: 1px solid var(--c-border-light); margin-top: 9rem; padding-bottom: 2.5rem; } .theme-v2 .page-footer a.btn { transition: transform var(--tr-spring), box-shadow var(--tr), background-color var(--tr), border-color var(--tr), color var(--tr); } @media (max-width: 767px) { .theme-v2 .page-footer { margin-top: 5rem; } } .theme-v2 .page-footer-nav { color: var(--c-text-muted); font-size: 13px; font-weight: 600; } .theme-v2 .page-footer a { color: var(--c-text); text-decoration: none; transition: color var(--tr); } .theme-v2 .page-footer a:hover { color: var(--c-link); } .theme-v2 .page-footer a.btn-outline-primary:hover { color: #fff; transform: translateY(-1px); } /* Download button */ .theme-v2 .page-footer .btn-outline-primary { color: var(--c-primary); border-color: var(--c-primary); } /* Social icons */ .theme-v2 .page-footer-contact i { color: var(--c-primary); } .theme-v2 .page-footer-contact a:hover i { color: var(--c-link-hover); } /* Footer contact card */ .theme-v2 .page-footer-contact { background: #fff !important; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; position: relative; } .theme-v2 .page-footer-contact::before { opacity: 0.04; background: none !important; } /* ========================= 14) IMAGE / BACKGROUND OVERRIDES ========================= */ /* Hero bg: override legacy bg.jpg with themeable variable */ .theme-v2 .bg-server { background-image: url("/images/theme/bg.webp"); } /* XorMon logo in dark navbar */ .theme-v2 .navbar-dark .nav-xormon-logo { background: url("/images/css/loga/xormon_white.svg") no-repeat; background-size: contain; } /* XorMon logo in light navbar */ .theme-v2 .navbar-light .nav-xormon-logo { background: url("/images/css/loga/xormon_safezone.svg") no-repeat; background-size: contain; } /* XorUX logo dark */ .theme-v2 .navbar-dark .nav-xorux-logo { background: url("/images/css/loga/xorux_white.svg") no-repeat; background-size: contain; } /* XorUX logo light */ .theme-v2 .navbar-light .nav-xorux-logo { background: url("/images/css/loga/xorux.svg") no-repeat; background-size: contain; } /* ========================= 15) RESPONSIVE ADJUSTMENTS ========================= */ @media (max-width: 991px) { .theme-v2 .bg-x { background-size: 150%; } } @media (max-width: 767px) { .theme-v2 .bg-x { background-size: 200%; } .theme-v2 .form-xor { padding: 1.5rem; } } @media (max-width: 575px) { .theme-v2 .bg-x { background-size: 250%; } .theme-v2 .card { border-radius: var(--r-md); } } /* ========================= 16) OPTIONAL: LIGHT THEME SWITCH ========================= */ .theme-v2.theme-light { --c-bg: #ffffff; --c-surface: #f6f8fb; --c-surface-2: rgba(15, 23, 42, 0.04); --c-border: rgba(15, 23, 42, 0.12); --c-border-light: rgba(0, 0, 0, 0.07); --c-text: #0f172a; --c-text-muted: #5E6E82; --c-heading: #0b1220; --c-link: #0b55ad; --c-link-hover: #1068ce; } .theme-v2.theme-light .bg-server::before { background: linear-gradient(165deg, rgba(0, 30, 70, 0.88) 0%, rgba(0, 60, 110, 0.82) 100%); opacity: 0.90; } .theme-v2.theme-light .navbar-overlay { opacity: 0.35; } @media (max-width: 991px) { .theme-v2.theme-light .navbar-collapse { background: #ffffff; } .theme-v2.theme-light .navbar-collapse .navbar-nav .nav-link { color: #0f172a; } } /* ========================= COMPONENT COVERAGE SUMMARY ========================= */ /* COMPONENTS OVERRIDDEN: - Design tokens (:root CSS vars — full palette, radius, shadows, motion) - Global base (body, headings, paragraphs, links, images, pre/code) - Backgrounds (.bg-x, .bg-server, .bg-light, .bg-dark, .bg-white, .bg-light-solid) - Sections (.sec-border, .sec-p, .sec-pt, .sec-pb, .spacer, .hero, .hero-x) - Navbar (.topbar, .navbar-dark, .navbar-light, .navbar-nav, .navbar-collapse, .navbar-overlay, .navbar-brand, .navbar-toggler, #search-bar, .nav-xormon-logo, .nav-xorux-logo, .nav-lpar-logo) - Buttons (.btn, .btn-primary, .btn-outline-primary, .btn-sm, .btn-block, .btn:disabled) - Cards (.card, .card-body, .card-title, .card-text, .card-plarge, .card-psmall, .card-active, .card-shadow, .card-apps, .card-apps-thumb, .card-thumb) - Shadow utilities (.shadow, .shadow-sm, .rounded) - Lists (.list, .list-lg, .list-sm, .list-xs, .list-x, .list-check, .list-unstyled) - Nav components (.nav-pills, .nav-tabs, .nav-link, .nav-fill) - Tables (.table, .table1, .table-xor, .table-gray, .table-responsive) - Sidebar (.sidebar, .sidebar .nav-link, .sidebar .nav-link.active) - Forms (.form-control, .form-control-sm, .form-group, .form-row, .form-xor, .custom-control, .custom-select, .custom-radio, .input-group-text, label, legend, fieldset, validation states, .invalid-feedback) - Alerts (.alert-primary, .alert-danger) - Tech boxes (.tech-box, .tech-box-in, .technologies-logo) - Resellers (.reseller, .reseller-logo, .reseller-text) - Partners (.partner) - Search (.search-results, .search-item, .search-title, .search-url) - Announcements (.announcement, .announcement .sub) - Docs (.docs, .docs .unformatted, .docs-content) - Events (.events h2) - Photos (.photo-gallery) - Footer (.page-footer, .page-footer-nav, .page-footer-contact, .page-footer a) - Utilities (.o-60, .o-20, .font-bigger, .text-muted, .lead, .small, .rounded, .shadow, .shadow-sm, .spinner-border, .stretched-link) - Light theme switch (.theme-light) COMPONENTS UNTOUCHED (Bootstrap only, no visual conflict): - Grid system (.row, .col-*, .container, .container-fluid) - Display utilities (.d-none, .d-flex, .d-block, .d-lg-*) - Flex utilities (.flex-row, .flex-column, .align-items-*, .justify-content-*) - Spacing utilities (.mb-*, .mt-*, .mr-*, .pt-*, .px-*, .py-*) - Text utilities (.text-center, .text-white, .text-left, .font-weight-bold) - Width utilities (.w-100, .h-100) - Bootstrap collapse/fade (.collapse, .collapsing, .fade, .show) COMPONENTS REQUIRING HTML REFACTOR (optional — visually handled but structurally limited): - .card-columns: CSS-only masonry is deprecated in Bootstrap 5; recommend CSS Grid - .tab-pane with complex JS-driven states: full design requires BS5 migration - Custom dropdown menus (not present in pages but would need scoped override) */ .theme-v2 .bg-server h3.card-title { color: #000; } /* ========================= PRODUCTS PAGE — redesign ========================= */ /* --- Fade-up scroll animation --- */ .fade-up { opacity: 0; transform: translateY(26px); transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-up--in { opacity: 1; transform: translateY(0); } /* --- Hero extras --- */ .prod-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-primary); background: rgba(16, 104, 206, 0.10); border: 1px solid rgba(16, 104, 206, 0.24); border-radius: var(--r-pill); padding: 0.25rem 1rem; margin-bottom: 1rem; } /* Plain eyebrow: inside dark hero sections or as standalone section label */ .bg-server .prod-eyebrow, .section-eyebrow { display: block; background: none; border: none; border-radius: 0; padding: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.875rem; } .theme-v2 .prod-hero-lead { color: rgba(255, 255, 255, 0.52); } /* --- COMPARISON LABELS (dev only) --- */ .prod-version-bar { background: #f0f4ff; border-top: 2px dashed #c7d8f5; border-bottom: 2px dashed #c7d8f5; padding: 0.625rem 0; text-align: center; } .prod-version-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary); } /* --- VERSION A — Dark card --- */ .prod-v1-section { padding: 5rem 0 4rem; } .prod-v1-card { background: var(--grad-xormon); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--r-xl); padding: 3.5rem 4rem; display: flex; gap: 4rem; align-items: center; position: relative; overflow: hidden; box-shadow: 0 32px 80px rgba(0, 36, 71, 0.28), 0 8px 24px rgba(0, 0, 0, 0.12); } .prod-v1-card::before { content: ''; position: absolute; top: -80px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 198, 167, 0.10) 0%, transparent 68%); pointer-events: none; } .prod-v1-content { flex: 1; min-width: 0; } /* Force white text inside dark card (override theme specificity) */ .theme-v2 .prod-v1-card h2, .theme-v2 .prod-v1-card p { color: inherit; } .prod-v1-badge { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); background: rgba(0, 198, 167, 0.14); border: 1px solid rgba(0, 198, 167, 0.32); border-radius: var(--r-pill); padding: 0.2rem 0.875rem; } .prod-v1-title { font-size: 2.875rem; font-weight: 800; color: #fff !important; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 0.5rem; } .prod-v1-subtitle { font-size: 1.0625rem; color: rgba(255, 255, 255, 0.72) !important; font-weight: 500; margin-bottom: 1.25rem; } .prod-v1-desc { color: rgba(255, 255, 255, 0.62) !important; font-size: 0.9375rem; line-height: 1.78; } .prod-v1-features { list-style: none; padding: 0; margin: 0; } .prod-v1-features li { display: flex; align-items: flex-start; gap: 0.625rem; color: rgba(255, 255, 255, 0.80); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 0.625rem; } .prod-v1-check { flex-shrink: 0; color: var(--c-accent); font-weight: 700; font-size: 0.9375rem; margin-top: 0.08em; } .prod-v1-ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; } .prod-v1-btn-ghost { background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.88) !important; font-weight: 700; } .prod-v1-btn-ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); color: #fff !important; transform: translateY(-1px); } /* V1 right panel */ .prod-v1-visual { flex: 0 0 300px; width: 300px; } .prod-v1-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 2rem; } .prod-v1-chip { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-sm); padding: 0.28rem 0.7rem; transition: background var(--tr), border-color var(--tr); } .prod-v1-chip:hover { background: rgba(0, 198, 167, 0.14); border-color: rgba(0, 198, 167, 0.28); } .prod-v1-chip--accent { color: var(--c-accent); background: rgba(0, 198, 167, 0.10); border-color: rgba(0, 198, 167, 0.28); } .prod-v1-stats { display: flex; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 1.5rem; } .prod-v1-stat { flex: 1; text-align: center; } .prod-v1-stat-sep { width: 1px; height: 2.5rem; background: rgba(255, 255, 255, 0.10); } .prod-v1-stat-value { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; } .prod-v1-stat-label { font-size: 0.5625rem; color: rgba(255, 255, 255, 0.45); line-height: 1.4; margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.06em; } /* V1 responsive */ @media (max-width: 991px) { .prod-v1-card { flex-direction: column; gap: 2.5rem; padding: 2.5rem 2rem; } .prod-v1-visual { width: 100%; flex: none; } .prod-v1-title { font-size: 2.25rem; } } @media (max-width: 767px) { .prod-v1-section { padding: 3rem 0 2rem; } .prod-v1-card { padding: 2rem 1.5rem; border-radius: var(--r-lg); } .prod-v1-title { font-size: 1.875rem; } .prod-v1-ctas { flex-direction: column; } } /* --- FLAGSHIP SECTION (asymmetric layout) --- */ .prod-flagship-section { padding: 5rem 0 5rem; background: var(--c-bg); } /* Two-column layout: left text / right mockup */ .prod-flagship-layout { display: flex; align-items: center; gap: 5rem; } /* ---- Left column ---- */ .prod-flagship-left { flex: 0 0 48%; max-width: 48%; } .prod-flagship-badge { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); background: rgba(0, 198, 167, 0.10); border: 1px solid rgba(0, 198, 167, 0.28); border-radius: var(--r-pill); padding: 0.25rem 0.875rem; margin-bottom: 1.25rem; } .prod-flagship-title { font-size: 3rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 0.5rem; } .prod-flagship-subtitle { font-size: 1.0625rem; color: var(--c-primary); font-weight: 600; margin-bottom: 1rem; } .prod-flagship-desc { color: var(--c-text-muted); font-size: 0.9375rem; line-height: 1.78; margin-bottom: 0; } .prod-feature-list { list-style: none; padding: 0; margin: 0; } .prod-feature-list li { display: flex; align-items: flex-start; gap: 0.625rem; color: var(--c-text); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 0.625rem; } .prod-feat-check { flex-shrink: 0; color: var(--c-accent); font-weight: 700; font-size: 0.9375rem; margin-top: 0.08em; } .prod-flagship-ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; } /* Inline stats row below CTAs */ .prod-flagship-stats { display: flex; align-items: center; gap: 0; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--c-border-light); } .prod-fstat { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; } .prod-fstat-value { font-size: 1.625rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.025em; line-height: 1.1; } .prod-fstat-label { font-size: 0.75rem; color: var(--c-text-muted); font-weight: 500; } .prod-fstat-sep { width: 1px; height: 2.25rem; background: var(--c-border-light); margin: 0 1.5rem; flex-shrink: 0; } /* ---- Right column: dashboard mockup ---- */ .prod-flagship-right { flex: 1; min-width: 0; } .prod-mock-wrap { background: #0f1923; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 70px rgba(14, 24, 39, 0.22), 0 6px 18px rgba(14, 24, 39, 0.12); position: relative; } /* Chrome / title bar */ .prod-mock-chrome { background: #1a2535; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .prod-mock-dots { display: flex; gap: 0.35rem; flex-shrink: 0; } .prod-mock-dot { width: 10px; height: 10px; border-radius: 50%; } .prod-mock-dot--red { background: #ff5f57; } .prod-mock-dot--yellow { background: #ffbd2e; } .prod-mock-dot--green { background: #28c840; } .prod-mock-url { flex: 1; background: rgba(255,255,255,0.06); border-radius: 4px; padding: 0.2rem 0.625rem; font-size: 0.6875rem; color: rgba(255,255,255,0.40); text-align: center; font-family: monospace; } /* App body */ .prod-mock-body { display: flex; min-height: 320px; } /* Sidebar */ .prod-mock-nav { background: #141e2b; width: 110px; flex-shrink: 0; padding: 1rem 0.5rem; border-right: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 0.15rem; } .prod-mock-nav-logo { font-size: 0.75rem; font-weight: 800; color: var(--c-primary); letter-spacing: 0.05em; padding: 0.25rem 0.5rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 0.5rem; } .prod-mock-nav-item { font-size: 0.6875rem; color: rgba(255,255,255,0.45); padding: 0.35rem 0.5rem; border-radius: 5px; cursor: default; } .prod-mock-nav-item--active { background: rgba(16,104,206,0.18); color: #7eb8ff; font-weight: 600; } /* Main area */ .prod-mock-main { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; } /* KPI cards */ .prod-mock-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .prod-mock-kpi { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; padding: 0.5rem 0.625rem; } .prod-mock-kpi-label { font-size: 0.5625rem; color: rgba(255,255,255,0.40); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2rem; } .prod-mock-kpi-value { font-size: 1.0625rem; font-weight: 700; color: rgba(255,255,255,0.88); line-height: 1; } .prod-mock-kpi-value--ok { color: #28c840; } .prod-mock-kpi-value--warn { color: #ffbd2e; } /* Chart */ .prod-mock-chart-wrap { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 0.625rem 0.75rem 0.5rem; } .prod-mock-chart-title { font-size: 0.5625rem; color: rgba(255,255,255,0.40); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.375rem; } .prod-mock-chart-svg { display: block; width: 100%; height: 60px; } .prod-mock-chart-legend { display: flex; align-items: center; gap: 0.875rem; margin-top: 0.375rem; font-size: 0.5625rem; color: rgba(255,255,255,0.35); } .prod-mock-legend-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; vertical-align: middle; } .prod-mock-legend-dot--blue { background: #1068CE; } .prod-mock-legend-dot--teal { background: #00C6A7; } /* Mini table */ .prod-mock-table { display: flex; flex-direction: column; gap: 0; } .prod-mock-row { display: grid; grid-template-columns: 1fr 50px 55px; padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.625rem; color: rgba(255,255,255,0.55); align-items: center; } .prod-mock-row--head { color: rgba(255,255,255,0.28); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.5625rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .prod-mock-ok { color: #28c840; font-weight: 600; } .prod-mock-warn { color: #ffbd2e; font-weight: 600; } /* AI badge overlay */ .prod-mock-ai { position: absolute; bottom: 14px; right: 14px; background: rgba(16, 104, 206, 0.90); backdrop-filter: blur(6px); color: #fff; font-size: 0.6875rem; font-weight: 700; border-radius: var(--r-pill); padding: 0.3rem 0.75rem; display: flex; align-items: center; gap: 0.375rem; box-shadow: 0 4px 14px rgba(16,104,206,0.40); } /* --- LEGACY SECTION --- */ .prod-legacy-section { padding: 4rem 0 2rem; } .prod-legacy-intro { margin-bottom: 3rem; } .prod-section-label { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: var(--r-pill); padding: 0.2rem 1rem; margin-bottom: 1rem; } .prod-section-title { font-size: 2rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.02em; margin-bottom: 0.75rem; } .prod-section-desc { max-width: 640px; margin: 0 auto; color: var(--c-text-muted); } /* Product card */ .prod-card { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 2rem 1.875rem; height: 100%; display: flex; flex-direction: column; transition: transform var(--tr-spring), box-shadow var(--tr), border-color var(--tr); } .prod-card:hover { transform: translateY(-4px); box-shadow: var(--sh-float); border-color: var(--c-border); } .prod-card-top { margin-bottom: 1.125rem; } .prod-legacy-chip { display: inline-block; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: var(--r-pill); padding: 0.15rem 0.625rem; margin-bottom: 0.875rem; } .prod-card-icon { width: 44px; height: 44px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .prod-card-icon--xormon-orig { background: rgba(16, 104, 206, 0.08); color: var(--c-primary); } .prod-card-icon--lpar { background: rgba(0, 198, 167, 0.10); color: var(--c-accent); } .prod-card-icon--stor { background: rgba(16, 104, 206, 0.08); color: var(--c-primary); } .prod-card-name { font-size: 1.375rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.02em; margin-bottom: 0.25rem; } .prod-card-tagline { font-size: 0.875rem; color: var(--c-primary); font-weight: 600; margin-bottom: 0; } .prod-card-desc { color: var(--c-text-muted); font-size: 0.9rem; line-height: 1.72; margin-bottom: 1.25rem; } .prod-card-feats { list-style: none; padding: 0; margin: 0 0 auto; } .prod-card-feats li { position: relative; padding-left: 1.25rem; font-size: 0.875rem; color: var(--c-text); line-height: 1.6; margin-bottom: 0.45rem; } .prod-card-feats li::before { content: '✓'; position: absolute; left: 0; top: 0.05em; color: var(--c-accent); font-weight: 700; font-size: 0.8125rem; } .prod-card-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--c-border-light); } .prod-upgrade-hint { font-size: 0.8125rem; font-weight: 600; color: var(--c-text-muted); text-decoration: none; transition: color var(--tr); } .prod-upgrade-hint:hover { color: var(--c-primary); } /* --- CTA BANNER --- */ .prod-cta-section { padding: 3rem 0 6rem; } .prod-cta-card { background: var(--grad-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 3.5rem 4rem; display: flex; align-items: center; justify-content: space-between; gap: 3rem; position: relative; overflow: hidden; } .prod-cta-card::before { content: ''; position: absolute; bottom: -60px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--c-primary-light) 0%, transparent 68%); pointer-events: none; } .prod-cta-body { position: relative; z-index: 1; } .prod-cta-title { font-size: 1.875rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.025em; margin-bottom: 0.625rem; } .prod-cta-desc { color: var(--c-text-muted); font-size: 1rem; line-height: 1.72; margin-bottom: 0; max-width: 480px; } .prod-cta-actions { display: flex; gap: 0.875rem; flex-shrink: 0; flex-wrap: wrap; position: relative; z-index: 1; } .prod-btn-outline-neutral { background: transparent; border: 1.5px solid var(--c-border); color: var(--c-text); font-weight: 700; } .prod-btn-outline-neutral:hover { background: #fff; border-color: var(--c-border); color: var(--c-primary); transform: translateY(-1px); box-shadow: var(--sh-sm); } /* --- Responsive --- */ @media (max-width: 1100px) { .prod-flagship-layout { gap: 3.5rem; } } @media (max-width: 991px) { .prod-flagship-layout { flex-direction: column; gap: 3rem; } .prod-flagship-left { flex: none; max-width: 100%; } .prod-flagship-right { width: 100%; } .prod-flagship-title { font-size: 2.25rem; } .prod-mock-cards { grid-template-columns: repeat(4, 1fr); } .prod-cta-card { flex-direction: column; align-items: flex-start; padding: 2.5rem 2.5rem; gap: 2rem; } } @media (max-width: 767px) { .prod-flagship-section { padding: 3rem 0 2rem; } .prod-flagship-title { font-size: 1.875rem; } .prod-flagship-ctas { flex-direction: column; } .prod-flagship-stats { gap: 0; } .prod-fstat-sep { margin: 0 1rem; } .prod-mock-cards { grid-template-columns: repeat(2, 1fr); } .prod-section-title { font-size: 1.625rem; } .prod-cta-card { border-radius: var(--r-lg); padding: 2rem 1.5rem; } .prod-cta-title { font-size: 1.5rem; } } @media (max-width: 575px) { .prod-flagship-stats { flex-wrap: wrap; gap: 1.25rem; } .prod-fstat-sep { display: none; } .prod-cta-actions { flex-direction: column; width: 100%; } .prod-cta-actions .btn { width: 100%; text-align: center; } } /* ========================= 17) LANDING PAGE ========================= */ /* --- Hero layout --- */ .hero-layout { display: flex; align-items: center; gap: 4rem; padding: 5.5rem 0 6rem; } .hero-left { flex: 0 0 52%; max-width: 52%; } .hero-right { flex: 1; min-width: 0; } .hero-trust { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 2rem; } .hero-trust li { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.78); display: flex; align-items: center; gap: 0.4rem; } .hero-trust li span.tick { color: var(--c-primary); font-weight: 700; } .hero-ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 2rem; } .hero-social { font-size: 0.8125rem; color: rgba(255,255,255,0.50); font-weight: 500; } /* --- Challenge section --- */ .challenge-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* Solution section — blueprint grid background */ .sec-solution-bg { position: relative; } .sec-solution-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(16, 104, 206, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 104, 206, 0.07) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 75%); } .sec-solution-bg > * { position: relative; z-index: 1; } .challenge-card { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; transition: transform var(--tr-spring), box-shadow var(--tr); } .challenge-card:hover { transform: translateY(-3px); box-shadow: var(--sh-float); } .challenge-card-img { width: 100%; } .challenge-card-img-inner { background: #0f1923; padding: 2rem 2rem 1.5rem; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .challenge-card-body { padding: 1.5rem 1.875rem 1.875rem; } .challenge-card-title { font-size: 1.0625rem; font-weight: 700; color: var(--c-heading); margin-bottom: 0.5rem; } .challenge-card-text { color: var(--c-text-muted); font-size: 0.9rem; line-height: 1.72; margin: 0; } /* Card illustration labels */ .ci-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.38); margin-top: 1rem; } .ci-label--warn { color: #f59e0b; } .ci-label--noise { color: #ef4444; } /* Illustration 1: fragmented grid */ .ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; } .ci-panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 0.75rem; } .ci-panel-bar { height: 7px; border-radius: 3px; } .ci-donut { width: 36px; height: 36px; border-radius: 50%; border: 6px solid rgba(16,104,206,0.6); border-top-color: var(--c-primary); margin: 0 auto; } .ci-panel-row { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); margin-bottom: 6px; width: 100%; } /* Illustration 2: capacity bars */ .ci-capacity { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; } .ci-cap-row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 0.625rem; } .ci-cap-label { font-size: 0.625rem; color: rgba(255,255,255,0.50); font-weight: 600; white-space: nowrap; } .ci-cap-bar-wrap { background: rgba(255,255,255,0.07); border-radius: 3px; height: 8px; overflow: hidden; } .ci-cap-bar { height: 100%; border-radius: 3px; } .ci-cap-pct { font-size: 0.625rem; font-weight: 700; text-align: right; } /* Illustration 3: alert list */ .ci-alerts { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .ci-alert { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; padding: 0.35rem 0.625rem; } .ci-alert-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .ci-alert-text { font-size: 0.625rem; font-weight: 600; color: rgba(255,255,255,0.65); font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Solution bento --- */ .solution-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--c-primary-light); margin-bottom: 1rem; flex-shrink: 0; } .bento-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; } .bento-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .bento-card--main { grid-column: 1; grid-row: 1 / 3; } .bento-card--secondary { grid-column: 2; } .bento-body { padding: 1.75rem 1.875rem 1.875rem; flex: 1; } .bento-visual { background: #0f1923; padding: 1.75rem 1.75rem 1.5rem; position: relative; overflow: hidden; } .bento-chart-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 1rem; } .bento-lanes { display: flex; flex-direction: column; gap: 0.5rem; position: relative; } .bento-lane { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 0.625rem; } .bento-lane-name { font-size: 0.5625rem; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.05em; } .bento-lane-track { height: 14px; background: rgba(255,255,255,0.04); border-radius: 3px; position: relative; overflow: visible; } .bento-lane-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; } .bento-lane-spike { position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 3px; height: 28px; border-radius: 2px; opacity: 0.9; } .bento-correlation-line { position: absolute; top: 0; left: calc(52px + 0.625rem + 54%); width: 1px; height: 100%; background: rgba(239,68,68,0.55); pointer-events: none; } .bento-chart-badge { display: inline-block; margin-top: 1.125rem; font-size: 0.6875rem; font-weight: 700; color: var(--c-primary); background: rgba(0,198,167,0.12); border: 1px solid rgba(0,198,167,0.25); border-radius: var(--r-pill); padding: 0.25rem 0.875rem; } .bento-mini-chart { margin-top: 1.25rem; background: #0f1923; border-radius: var(--r-sm); padding: 0.75rem 0.75rem 0.5rem; overflow: hidden; } .bento-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; } .bento-chip { font-size: 0.75rem; font-weight: 600; color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: var(--r-pill); padding: 0.2rem 0.75rem; } .bento-chip--accent { color: #fff; background: var(--c-primary); border-color: var(--c-primary); } /* --- Integrations grid --- */ .tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.625rem; margin-top: 1.5rem; } .tech-item { display: flex; align-items: center; justify-content: center; padding: 0.75rem 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--c-text); text-align: center; min-height: 52px; } /* --- Proof section (dark) --- */ .proof-stats { display: flex; gap: 0; justify-content: center; margin-bottom: 3.5rem; } .proof-stat { flex: 1; text-align: center; max-width: 240px; } .proof-stat-sep { width: 1px; background: rgba(255,255,255,0.12); margin: 0 2rem; flex-shrink: 0; } .proof-stat-value { font-size: 2.5rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; } .proof-stat-label { font-size: 0.8125rem; color: rgba(255,255,255,0.52); margin-top: 0.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .proof-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .proof-quote { font-size: 1rem; line-height: 1.72; color: #fff; font-style: italic; margin-bottom: 1.25rem; } .proof-source { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.50); } /* --- Deployment section --- */ .deploy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .deploy-card-num { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.75rem; } /* --- Landing responsive --- */ @media (max-width: 991px) { .hero-layout { flex-direction: column; gap: 2.5rem; padding: 3.5rem 0 4rem; } .hero-left { flex: none; max-width: 100%; } .bento-grid { grid-template-columns: 1fr; } .bento-card--main { grid-row: auto; } .bento-card--secondary { grid-column: 1; } .deploy-grid { grid-template-columns: 1fr; gap: 1rem; } .proof-cards { grid-template-columns: 1fr; } .proof-stats { flex-wrap: wrap; gap: 2rem; justify-content: center; } .proof-stat-sep { display: none; } .proof-stat { min-width: 140px; flex: 0 0 auto; } .challenge-cards-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .hero-ctas { flex-direction: column; } .tech-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } } /* ========================= 18) PARTNERS PAGE ========================= */ /* --- Hero layout --- */ .partners-hero-layout { display: flex; align-items: center; gap: 4rem; padding: 5.5rem 0 6rem; } .partners-hero-left { flex: 0 0 54%; max-width: 54%; } .partners-hero-right { flex: 1; min-width: 0; } .hero-stat-row { display: flex; gap: 2.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.12); } .hero-stat-value { font-size: 1.875rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; } .hero-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.48); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.3rem; } /* Tech partners logo strip */ .tech-partners-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .tech-partner-badge { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-sm); padding: 0.625rem 1rem; transition: background var(--tr), border-color var(--tr); } .tech-partner-badge img { max-width: 64px; max-height: 24px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.72; display: block; } .tech-partner-badge:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); } .tech-partner-badge:hover img { opacity: 1; } /* --- Partner types --- */ .partner-types-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .partner-type-card { display: flex; flex-direction: column; } .partner-type-badge { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.875rem; } .partner-feature-list { list-style: none; padding: 0; margin: 1.25rem 0 0; } .partner-feature-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--c-text); line-height: 1.6; margin-bottom: 0.5rem; } .partner-feature-list li::before { content: '✓'; color: var(--c-primary); font-weight: 700; font-size: 0.8125rem; flex-shrink: 0; margin-top: 0.1em; } /* --- Technology Partners logos --- */ .tech-logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } .tech-logo-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem 1rem; background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-md); font-size: 0.8125rem; font-weight: 600; color: var(--c-heading); text-align: center; box-shadow: var(--sh-xs); transition: transform var(--tr-spring), box-shadow var(--tr); } .tech-logo-item img { max-width: 72px; max-height: 32px; width: auto; height: auto; object-fit: contain; } .tech-logo-item:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); } /* --- Benefits --- */ .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .benefit-num { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.75rem; } /* --- Requirements --- */ .requirements-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .req-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .req-list li { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-border-light); } .req-list li:last-child { border-bottom: none; padding-bottom: 0; } .req-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary-light); color: var(--c-primary); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .req-text { font-size: 0.9375rem; color: var(--c-text); line-height: 1.6; } .req-text strong { display: block; color: var(--c-heading); font-weight: 600; margin-bottom: 0.2rem; } /* --- Resellers map --- */ .resellers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .reseller-card { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-md); padding: 1.25rem 1.25rem 1rem; box-shadow: var(--sh-xs); transition: transform var(--tr-spring), box-shadow var(--tr), border-color var(--tr); } .reseller-card:hover { transform: translateY(-2px); box-shadow: var(--sh-card); border-color: var(--c-border); } .reseller-name { font-size: 0.9375rem; font-weight: 700; color: var(--c-heading); margin-bottom: 0.25rem; } .reseller-country { font-size: 0.75rem; color: var(--c-text-muted); font-weight: 500; } .reseller-tag { display: inline-block; margin-top: 0.625rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary); background: var(--c-primary-light); border-radius: var(--r-pill); padding: 0.15rem 0.625rem; } /* --- Become a partner --- */ .become-partner-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .become-partner-title { font-size: 2rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 1.25rem; } .become-partner-desc { color: var(--c-text-muted); font-size: 0.9375rem; line-height: 1.78; margin-bottom: 1.5rem; } .contact-detail { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--c-text); margin-bottom: 0.75rem; } .contact-detail a { color: var(--c-primary); font-weight: 600; } .contact-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); flex-shrink: 0; } /* --- Partners responsive --- */ @media (max-width: 991px) { .partners-hero-layout { flex-direction: column; padding: 3.5rem 0 4rem; gap: 2.5rem; } .partners-hero-left { flex: none; max-width: 100%; } .partner-types-grid { grid-template-columns: 1fr; } .tech-logo-grid { grid-template-columns: repeat(3, 1fr); } .benefits-grid { grid-template-columns: 1fr; } .requirements-layout { grid-template-columns: 1fr; gap: 2rem; } .resellers-grid { grid-template-columns: repeat(2, 1fr); } .become-partner-layout { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 575px) { .tech-logo-grid { grid-template-columns: repeat(2, 1fr); } .resellers-grid { grid-template-columns: 1fr; } .hero-stat-row { flex-wrap: wrap; gap: 1.5rem; } } /* ========================= 19) PARTNERS BAND (infinite slider) ========================= */ .partners-band { background: #fff; border-top: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light); padding: 2.25rem 0; overflow: hidden; } .partners-band-inner { position: relative; overflow: hidden; } /* Fade edges */ .partners-band-inner::before, .partners-band-inner::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .partners-band-inner::before { left: 0; background: linear-gradient(to right, #fff 0%, transparent 100%); } .partners-band-inner::after { right: 0; background: linear-gradient(to left, #fff 0%, transparent 100%); } .partners-band-track { display: flex; align-items: center; gap: 5rem; width: max-content; animation: partners-scroll 22s linear infinite; } .partners-band-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 140px; height: 48px; } .partners-band-item img { display: block; width: 100%; height: 100%; max-width: 140px; max-height: 48px; object-fit: contain; filter: grayscale(1) opacity(0.40); transition: filter var(--tr); } .partners-band-item img:hover { filter: grayscale(1) opacity(0.70); } @keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .partners-band-track { animation: none; } } /* ========================= 20b) FEATURES — TOPOLOGY & AI ========================= */ .sec-features-ai { background: var(--grad-xormon); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-lg); position: relative; overflow: hidden; padding: 3rem; } /* Blueprint grid overlay — same as proof section, radial bottom-right */ .sec-features-ai::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(99, 179, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 179, 255, 0.10) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, black 0%, transparent 65%); mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, black 0%, transparent 65%); } /* Lift children above grid overlay */ .sec-features-ai > * { position: relative; z-index: 1; } /* Header */ .feat-ai-header { text-align: center; margin-bottom: 2.5rem; position: relative; } .feat-ai-header h2 { font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 700; color: #fff; margin-bottom: 1rem; line-height: 1.2; } .feat-ai-header p { color: rgba(255,255,255,0.58); font-size: 1.0625rem; max-width: 580px; margin: 0 auto; line-height: 1.7; } /* Tab nav */ .feat-ai-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 3rem; position: relative; } .feat-ai-tab { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.5rem; border-radius: 40px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.22s; outline: none; } .feat-ai-tab:hover { border-color: rgba(255,255,255,0.3); color: #fff; } .feat-ai-tab.active { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: #fff; } /* Panels */ .feat-ai-panel { display: none; } .feat-ai-panel.active { display: block; } /* Content layout */ .feat-ai-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: center; padding-bottom: 0; } .feat-ai-content { color: rgba(255,255,255,0.9); } .feat-ai-content h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: 1.25rem; } .feat-ai-content > p { color: rgba(255,255,255,0.58); font-size: 1rem; line-height: 1.75; margin-bottom: 1.75rem; } .feat-ai-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.65rem; } .feat-ai-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: rgba(255,255,255,0.72); line-height: 1.5; } .feat-ai-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); flex-shrink: 0; margin-top: 0.45em; } .btn-feat-ai { display: inline-flex; align-items: center; gap: 0.35rem; color: #fff !important; font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: gap 0.2s, opacity 0.2s; } .btn-feat-ai:hover { gap: 0.6rem; color: #fff !important; text-decoration: none; opacity: 0.85; } /* Media / video */ .feat-ai-media { position: relative; } .feat-ai-video-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,0.1); aspect-ratio: 16/9; box-shadow: 0 8px 60px rgba(0,0,0,0.45); } .feat-ai-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; } .feat-ai-video-badge { position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: 0.45rem; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; } .feat-ai-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } } /* Responsive */ @media (max-width: 900px) { .sec-features-ai { padding: 2rem; } .feat-ai-layout { grid-template-columns: 1fr; gap: 2.5rem; } } /* ========================= 20) TECH PANEL (integrations tabs) ========================= */ .tech-panel { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; } .tech-panel-tabs { display: flex; justify-content: center; /* fallback for older browsers */ justify-content: safe center; /* avoid clipping leading items when content overflows */ border-bottom: 1px solid var(--c-border-light); padding: 0 1.5rem; background: #fafbfc; overflow-x: auto; scrollbar-width: none; } .tech-panel-tabs::-webkit-scrollbar { display: none; } .tech-panel-tab { font-size: 0.8125rem; font-weight: 600; color: var(--c-text-muted); padding: 0.875rem 1.125rem; cursor: pointer; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; background: transparent; outline: none; transition: color var(--tr), border-color var(--tr); } .tech-panel-tab:focus, .tech-panel-tab:focus-visible { outline: none; box-shadow: none; } .tech-panel-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); } .tech-panel-tab:hover:not(.active) { color: var(--c-heading); } .tech-panel-body { padding: 1.75rem 1.5rem; } .tech-panel-pane { display: none; } .tech-panel-pane.active { display: block; } .tech-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; } .tech-panel-card { background: #fff; padding: 1.25rem 1.5rem; display: flex; gap: 1rem; align-items: flex-start; border-radius: var(--r-sm); transition: background var(--tr); cursor: default; } .tech-panel-card:hover { background: var(--c-surface); } a.tech-panel-card, .tech-panel-card--link { text-decoration: none !important; color: inherit !important; cursor: pointer; } a.tech-panel-card:hover .tech-panel-name, .tech-panel-card--link:hover .tech-panel-name { color: var(--c-primary); } .tech-panel-card--dashed { background: transparent; border: 1px dashed var(--c-border-light); box-shadow: none; } .tech-panel-card--dashed:hover { background: var(--c-surface); } .partner-var-badge { display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-primary); background: rgba(16, 104, 206, 0.10); border: 1px solid rgba(16, 104, 206, 0.20); border-radius: 4px; padding: 0.1rem 0.4rem; margin-left: 0.4rem; vertical-align: middle; } .tech-panel-logo { width: 100px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tech-panel-logo img { width: auto; height: auto; max-width: 76px; max-height: 36px; object-fit: contain; display: block; } .tech-panel-name { font-size: 0.875rem; font-weight: 700; color: var(--c-heading); margin-bottom: 0.25rem; line-height: 1.3; } .tech-panel-desc { font-size: 0.75rem; color: var(--c-text-muted); line-height: 1.55; } @media (max-width: 767px) { .tech-panel-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .tech-panel-grid { grid-template-columns: 1fr; } } /* ========================================================= FOOTER (.ft-x) ========================================================= */ .ft-x { --ft-text: rgba(255, 255, 255, 0.78); --ft-text-soft: rgba(255, 255, 255, 0.54); --ft-heading: rgba(255, 255, 255, 0.55); --ft-link: #ffffff; --ft-border: rgba(255, 255, 255, 0.12); --ft-trans: 180ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; background-image: var(--grad-xormon); color: var(--ft-text); font-family: var(--t-font-sans, "Inter", system-ui, sans-serif); padding: 4rem 0 0; overflow: hidden; } /* Same blueprint grid overlay as .bg-dark */ .ft-x::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(99, 179, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 179, 255, 0.10) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, black 0%, transparent 65%); mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, black 0%, transparent 65%); } .ft-x > * { position: relative; z-index: 1; } .ft-x a { color: var(--ft-link); text-decoration: none; transition: opacity var(--ft-trans); } .ft-x a:hover { color: #fff; opacity: 0.78; text-decoration: none; } .ft-x-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; padding-bottom: 3.5rem; } /* ── Brand column ── */ .ft-x-brand { max-width: 320px; } .ft-x-logo { display: inline-block; margin-bottom: 1.25rem; } .ft-x-wordmark { font-size: 1.75rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; } .ft-x-logo-img { display: block; height: 24px; width: auto; max-width: 140px; filter: brightness(0) invert(1); transition: opacity var(--ft-trans); } .ft-x-logo:hover .ft-x-logo-img { opacity: 0.85; } .ft-x-desc { font-size: 0.875rem; line-height: 1.6; color: #CBD5E0 !important; margin-bottom: 1.5rem; } .ft-x .btn.ft-x-cta, .ft-x .ft-x-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 1.5rem; background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; font-size: 0.9375rem; font-weight: 600; border: 0 !important; border-radius: 8px !important; transition: background var(--ft-trans), transform var(--ft-trans); } .ft-x .btn.ft-x-cta:hover, .ft-x .ft-x-cta:hover { background: rgba(255, 255, 255, 0.20) !important; color: #fff !important; opacity: 1; transform: translateY(-1px); } /* ── Heading ── */ .ft-x-heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-primary) !important; margin-bottom: 1.25rem; } /* ── Link list ── */ .ft-x-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .ft-x-links a { font-size: 0.9375rem; font-weight: 500; } /* ── Contact column ── */ .ft-x-contact-block { margin-bottom: 1.25rem; } .ft-x-label { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-primary) !important; margin-bottom: 0.25rem; } .ft-x-email { font-size: 0.9375rem; font-weight: 600; color: #fff !important; } /* ── Social icons (no separators) ── */ .ft-x-social { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.5rem; } .ft-x-social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.10); border-radius: 8px; color: #fff !important; font-size: 1rem; transition: background var(--ft-trans), transform var(--ft-trans); } .ft-x-social a:hover { background: rgba(255, 255, 255, 0.20); opacity: 1; transform: translateY(-1px); } /* ── Bottom bar ── */ .ft-x-bottom { margin-top: 1rem; padding: 1.25rem 0; background: rgba(0, 0, 0, 0.25); border-top: 1px solid var(--ft-border); font-size: 0.8125rem; color: var(--ft-text-soft); } .ft-x-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .ft-x-copy { line-height: 1.5; } .ft-x-legal { list-style: none; padding: 0; margin: 0; display: flex; gap: 2rem; } .ft-x-legal a { color: var(--ft-text-soft); font-size: 0.8125rem; } .ft-x-legal a:hover { color: #fff; opacity: 1; } /* ── Responsive ── */ @media (max-width: 991.98px) { .ft-x-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .ft-x-brand { grid-column: 1 / -1; max-width: none; } } @media (max-width: 575.98px) { .ft-x { padding-top: 3rem; } .ft-x-grid { grid-template-columns: 1fr; gap: 2rem; } .ft-x-bottom-inner { flex-direction: column; align-items: flex-start; } .ft-x-legal { gap: 1.25rem; flex-wrap: wrap; } } /* ========================================================= NAVBAR (.nav-x) — Bootstrap 4 navbar styled to theme ========================================================= */ .nav-x { --nx-h: 64px; --nx-bg: #ffffff; --nx-border: rgba(0, 0, 0, 0.07); --nx-text: #17191C; --nx-text-muted: #5E6E82; --nx-primary: var(--c-primary, #1068CE); --nx-primary-h: var(--c-primary-hover, #0b55ad); --nx-radius: 10px; --nx-shadow-d: 0 12px 40px rgba(16, 25, 40, 0.10); --nx-trans: 180ms cubic-bezier(0.4, 0, 0.2, 1); background: var(--nx-bg); border-bottom: 1px solid var(--nx-border); font-family: var(--t-font-sans, "Inter", system-ui, sans-serif); } /* Bootstrap navbar overrides */ .navbar-x { padding: 0; min-height: var(--nx-h); } .nav-x-inner { min-height: var(--nx-h); } @media (max-width: 991.98px) { .nav-x .nav-x-inner { padding-left: 15px !important; padding-right: 15px !important; } } /* ── Logo ── */ .nav-x-logo.navbar-brand { margin-right: 1.5rem; padding: 0; } .nav-x-wordmark { font-weight: 800; font-size: 1.125rem; letter-spacing: 0.02em; color: var(--nx-text); } .nav-x-logo:hover .nav-x-wordmark { color: var(--nx-primary); } .nav-x-logo-img { display: block; height: 24px; width: auto; max-width: 140px; transition: opacity var(--nx-trans); } .nav-x-logo:hover .nav-x-logo-img { opacity: 0.85; } /* ── Hamburger / close toggle (Bootstrap toggler) ── */ .nav-x-hamburger { border: 0; padding: 0.375rem; width: 40px; height: 40px; border-radius: 8px; color: var(--nx-text); display: inline-flex; align-items: center; justify-content: center; position: relative; } .nav-x-hamburger:hover { background: rgba(16, 104, 206, 0.06); } .nav-x-hamburger:focus { outline: none; } .nav-x-hamburger svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: opacity 150ms; pointer-events: none; } /* Default state: show menu icon, hide close icon */ .nav-x-hamburger .nav-x-icon-close { display: none; } .nav-x-hamburger .nav-x-icon-menu { display: block; } /* Expanded state: hide menu icon, show close icon */ .nav-x-hamburger[aria-expanded="true"] .nav-x-icon-menu { display: none; } .nav-x-hamburger[aria-expanded="true"] .nav-x-icon-close { display: block; } /* ── Nav items (Bootstrap .nav-link) ── */ .nav-x .nav-x-list .nav-link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 600; color: var(--nx-text); border-radius: 6px; transition: background var(--nx-trans), color var(--nx-trans); outline: none; box-shadow: none; } .nav-x .nav-x-list .nav-link:hover, .nav-x .nav-x-list .nav-link:focus-visible { background: rgba(16, 104, 206, 0.06); color: var(--nx-primary); outline: none; box-shadow: none; } .nav-x .nav-x-list .nav-link:focus { outline: none; box-shadow: none; } /* Active page indicator */ .nav-x .nav-x-list .nav-link.active, .nav-x .nav-x-list .nav-item.active > .nav-link { color: var(--nx-primary); background: rgba(16, 104, 206, 0.08); border-radius: 7px; } .nav-x .dropdown-item.nav-x-d-link.active { background: rgba(16, 104, 206, 0.06); } .nav-x .dropdown-item.nav-x-d-link.active .nav-x-d-label { color: var(--nx-primary); } /* Strip Bootstrap's built-in dropdown caret (we use our own SVG) */ .nav-x .nav-x-trigger.dropdown-toggle::after, .nav-x .nav-x-trigger::after { display: none; } /* Custom caret */ .nav-x-caret { width: 12px; height: 12px; transition: transform var(--nx-trans); } .nav-x .nav-item.dropdown.show > .nav-x-trigger .nav-x-caret { transform: rotate(180deg); } /* ── Dropdown panel (Bootstrap .dropdown-menu) ── */ .nav-x .dropdown-menu.nav-x-dropdown { margin-top: 0; min-width: 280px; padding: 0.5rem; background: #fff; border: 1px solid var(--nx-border); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow-d); /* Bootstrap toggles `display:none` -> `display:block`; layer animation: */ animation: navxFade var(--nx-trans); } /* Invisible bridge so the cursor can travel from trigger to dropdown without crossing a "dead zone" that would close the menu. */ .nav-x .dropdown-menu.nav-x-dropdown::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } @keyframes navxFade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Dropdown link with label + description */ .nav-x .dropdown-item.nav-x-d-link { display: block; padding: 0.625rem 0.75rem; border-radius: 7px; white-space: normal; transition: background var(--nx-trans); } .nav-x .dropdown-item.nav-x-d-link:hover, .nav-x .dropdown-item.nav-x-d-link:focus { background: rgba(16, 104, 206, 0.06); } .nav-x-d-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--nx-text); margin-bottom: 0.125rem; } .nav-x .dropdown-item.nav-x-d-link:hover .nav-x-d-label { color: var(--nx-primary); } .nav-x-d-desc { display: block; font-size: 0.75rem; color: var(--nx-text-muted); line-height: 1.4; } /* ── Actions (CTA + search) ── */ .nav-x-actions { gap: 0.5rem; } .nav-x-cta { display: inline-flex; align-items: center; height: 38px; padding: 0 1.125rem; background: var(--nx-primary); color: #fff; font-size: 0.875rem; font-weight: 600; border: 0; border-radius: 8px; text-decoration: none; transition: background var(--nx-trans), transform var(--nx-trans), box-shadow var(--nx-trans); } .nav-x-cta:hover { background: var(--nx-primary-h); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 104, 206, 0.25); } .nav-x-cta:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; } /* ── Search toggle (loupe button inside the form) ── */ .nav-x-search { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 8px; color: var(--nx-text-muted); cursor: pointer; padding: 0; flex-shrink: 0; transition: background var(--nx-trans), color var(--nx-trans); } .nav-x-search svg { width: 18px; height: 18px; } .nav-x-search:hover { background: rgba(16, 104, 206, 0.06); color: var(--nx-primary); text-decoration: none; } .nav-x-search:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; } /* ── Inline expanding search form (replaces the legacy collapse bar) ── */ .nav-x-search-form { display: inline-flex; align-items: center; margin: 0; position: relative; } .nav-x-search-input { width: 0; height: 38px; padding: 0; margin: 0; background: #fff; border: 0; border-radius: 8px; font: inherit; font-size: 0.875rem; color: var(--nx-text); outline: none; opacity: 0; pointer-events: none; transition: width 240ms ease, opacity 180ms ease, padding 240ms ease, margin 240ms ease, border-color 180ms ease, box-shadow 180ms ease; } .nav-x-search-input::placeholder { color: var(--nx-text-muted); } .nav-x-search-input:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(16, 104, 206, 0.15); } .nav-x-search-form .nav-x-search-submit { height: 38px; width: 0; padding: 0; margin: 0; background: var(--nx-primary); color: #fff; border: 0; border-radius: 8px; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; opacity: 0; pointer-events: none; overflow: hidden; white-space: nowrap; transition: width 240ms ease, padding 240ms ease, margin 240ms ease, opacity 180ms ease, background var(--nx-trans); } .nav-x-search-form .nav-x-search-submit:hover { background: var(--nx-primary-h); } /* Open state: input + submit slide in next to the loupe */ .nav-x-search-form.open .nav-x-search-input { width: 220px; padding: 0 0.875rem; margin-left: 0.375rem; border: 1px solid var(--nx-border); opacity: 1; pointer-events: auto; } .nav-x-search-form.open .nav-x-search-submit { width: auto; padding: 0 1rem; margin-left: 0.375rem; opacity: 1; pointer-events: auto; } /* Desktop: when the inline search is open, collapse the CTA to free space (prevents overlap with the menu at medium viewport widths). */ @media (min-width: 992px) { .nav-x-cta { transition: opacity 180ms ease, max-width 240ms ease, padding 240ms ease, margin 240ms ease; max-width: 200px; overflow: hidden; white-space: nowrap; } .nav-x-actions.is-searching .nav-x-cta { opacity: 0; max-width: 0; padding: 0; margin: 0; pointer-events: none; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MOBILE (< 992px) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 991.98px) { /* Header stays above the drawer */ .nav-x .navbar-x { position: relative; z-index: 1021; background: var(--nx-bg); } .nav-x-hamburger { position: relative; z-index: 1022; } /* Custom mobile drawer — fixed below the header. Visibility controlled by a `.show` class (toggled by our JS), not by Bootstrap collapse, which conflicts with non-static positioning. */ .nav-x-collapse { display: block !important; position: fixed; top: var(--nx-h); left: 0; right: 0; bottom: 0; width: 100%; background: var(--nx-bg); border-top: 1px solid var(--nx-border); box-shadow: 0 12px 40px rgba(16, 25, 40, 0.08); padding: 0.75rem 1rem 1.5rem; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 200ms, transform 200ms, visibility 200ms; z-index: 1020; } .nav-x-collapse.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Mobile dropdown: explicit show/hide based on .show on the menu OR parent */ .nav-x .nav-item.dropdown.show > .dropdown-menu.nav-x-dropdown, .nav-x .dropdown-menu.nav-x-dropdown.show { display: block !important; } .nav-x .nav-x-list { width: 100%; } .nav-x .nav-x-list .nav-item { width: 100%; border-bottom: 1px solid var(--nx-border); } .nav-x .nav-x-list .nav-item:last-child { border-bottom: 0; } .nav-x .nav-x-list .nav-link { width: 100%; padding: 0.875rem 0.5rem; justify-content: space-between; border-radius: 0; font-size: 1rem; } .nav-x .nav-x-list .nav-link:hover, .nav-x .nav-x-list .nav-link:focus { background: none; color: var(--nx-primary); } /* Mobile dropdown becomes inline (no absolute positioning) */ .nav-x .dropdown-menu.nav-x-dropdown { position: static !important; transform: none !important; margin-top: 0; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0.5rem 0.5rem; background: transparent; animation: none; } .nav-x .dropdown-item.nav-x-d-link { padding: 0.5rem 0.75rem; } /* Mobile actions block at the bottom of the collapsed menu */ .nav-x-actions { width: 100%; padding-top: 1rem; flex-direction: column; align-items: stretch !important; gap: 0.5rem !important; } .nav-x-cta { width: 100%; height: 44px; justify-content: center; font-size: 0.9375rem; } /* Inside the drawer: input always visible with a leading loupe icon (decorative — tapping it just focuses the input) */ .nav-x-search-form { width: 100%; flex-direction: row; align-items: stretch; gap: 0.5rem; } .nav-x-search-form .nav-x-search { width: 44px; height: 44px; background: none; border: 0; border-radius: 8px; color: var(--nx-text-muted); cursor: text; flex-shrink: 0; } .nav-x-search-form .nav-x-search:hover { background: none; color: var(--nx-text-muted); } .nav-x-search-form .nav-x-search-input { flex: 1; width: auto; height: 44px; padding: 0 0.875rem; margin: 0; border: 1px solid var(--nx-border); opacity: 1; pointer-events: auto; font-size: 0.9375rem; } /* Submit hidden when input is empty (showing placeholder), visible when typing */ .nav-x-search-form .nav-x-search-submit { width: 0; height: 44px; padding: 0; margin: 0; opacity: 0; pointer-events: none; overflow: hidden; font-size: 0.9375rem; } .nav-x-search-form .nav-x-search-input:not(:placeholder-shown) ~ .nav-x-search-submit { width: auto; padding: 0 1.25rem; opacity: 1; pointer-events: auto; } } /* ========================================================= CONTACT PAGE ========================================================= */ .contact-channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .contact-channel-card { display: flex; flex-direction: column; } @media (max-width: 991px) { .contact-channels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .contact-channels-grid { grid-template-columns: 1fr; } } /* ========================================================= EVENTS PAGE ========================================================= */ /* ── Upcoming grid ── */ .events-upcoming-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 0 auto; } .event-card-featured { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 2px 16px rgba(16,104,206,0.06); transition: box-shadow 0.18s, transform 0.18s; } .event-card-featured:hover { box-shadow: 0 6px 32px rgba(16,104,206,0.12); transform: translateY(-2px); } .event-card-img { width: 100%; height: 200px; overflow: hidden; flex-shrink: 0; } .event-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .event-card-content { display: flex; gap: 1.25rem; padding: 1.5rem; align-items: flex-start; } .event-date-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; background: var(--c-primary-light); border-radius: var(--r-md); padding: 0.75rem 0.5rem; flex-shrink: 0; } .event-month { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary); } .event-day { font-size: 1.375rem; font-weight: 800; color: var(--c-primary); line-height: 1.1; } .event-year { font-size: 0.6875rem; font-weight: 600; color: var(--c-text-muted); margin-top: 0.125rem; } .event-card-body { display: flex; flex-direction: column; gap: 0.375rem; } .event-tag { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--c-primary); background: var(--c-primary-light); border-radius: 99px; padding: 0.125rem 0.625rem; display: inline-block; margin-bottom: 0.25rem; } .event-title { font-size: 1.0625rem; font-weight: 700; color: var(--c-heading); margin: 0; } .event-title a { color: inherit; text-decoration: none; } .event-title a:hover { color: var(--c-primary); } .event-location { font-size: 0.8125rem; color: var(--c-text-muted); font-weight: 500; } .event-desc { font-size: 0.875rem; color: var(--c-text-muted); line-height: 1.6; margin: 0.25rem 0 0.75rem; } /* ── CTA strip ── */ .events-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .events-cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; flex-shrink: 0; } /* ── Past events ── */ .events-past-list { max-width: 820px; margin: 0 auto; } .events-year-group { display: grid; grid-template-columns: 72px 1fr; gap: 0 2rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--c-border-light); } .events-year-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .events-year-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--c-primary); padding-top: 0.25rem; text-align: right; } .events-year-items { display: flex; flex-direction: column; gap: 0; } .event-past-card { display: grid; grid-template-columns: minmax(140px, 200px) 1fr minmax(80px, 160px); gap: 0 1.25rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--c-border-light); } .events-year-items .event-past-card:last-child { border-bottom: none; } .event-past-meta { font-size: 0.75rem; color: var(--c-text-muted); white-space: normal; word-break: break-word; } .event-past-name { font-size: 0.9375rem; font-weight: 600; color: var(--c-heading); min-width: 0; } .event-past-name a { color: inherit; text-decoration: none; } .event-past-name a:hover { color: var(--c-primary); } .event-past-role { font-size: 0.75rem; color: var(--c-text-muted); text-align: right; white-space: normal; word-break: break-word; } @media (max-width: 767px) { .events-upcoming-grid { grid-template-columns: 1fr; } .event-card-content { flex-direction: column; gap: 0.75rem; padding: 1.25rem; } .event-date-badge { flex-direction: row; gap: 0.5rem; padding: 0.5rem 0.875rem; min-width: auto; align-self: flex-start; } .events-year-group { grid-template-columns: 48px 1fr; gap: 0 1rem; } .events-year-label { font-size: 0.6875rem; } .event-past-card { grid-template-columns: 1fr; gap: 0.125rem; } .event-past-meta { white-space: normal; } .event-past-role { text-align: left; white-space: normal; } .events-cta-row { flex-direction: column; align-items: flex-start; } } /* ────────────────────────────────────────────────────────────── ABOUT — facts card (vertical stack: label / value / note) Used in the "Who we are" section as a right-column summary. ─────────────────────────────────────────────────────────────── */ .about-facts-card { background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; } .about-fact { padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--c-border-light); text-align: left; } .about-fact:last-child { border-bottom: 0; } .about-fact-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.375rem; } .about-fact-value { font-size: 1.5rem; font-weight: 800; color: var(--c-heading); line-height: 1.2; letter-spacing: -0.015em; } .about-fact-desc { font-size: 0.875rem; color: var(--c-text-muted); margin-top: 0.25rem; line-height: 1.5; } /* ────────────────────────────────────────────────────────────── VIDEO PAGE — grid of video cards (built from h4 + iframe pairs) Cards are assembled at runtime by a small JS that wraps each

with the following sibling(s) into
. ─────────────────────────────────────────────────────────────── */ .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.75rem; margin-top: 2rem; counter-reset: video-counter; } .video-card { display: flex; flex-direction: column-reverse; gap: 1rem; counter-increment: video-counter; } .video-card h4 { font-size: 1.0625rem; font-weight: 700; color: var(--c-heading); letter-spacing: -0.01em; line-height: 1.35; margin: 0; display: flex; align-items: baseline; gap: 0.625rem; } .video-card h4::before { content: counter(video-counter, decimal-leading-zero); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; color: var(--c-primary); padding: 0.25rem 0.5rem; background: rgba(16, 104, 206, 0.10); border-radius: 999px; line-height: 1; flex-shrink: 0; } .video-card iframe, .video-card embed { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-md); box-shadow: var(--sh-card); display: block; transition: transform 220ms, box-shadow 220ms; } .video-card:hover iframe, .video-card:hover embed { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16, 25, 40, 0.10); } /* If the iframe is wrapped (in a

,

, etc.), let the wrapper inherit the same visual treatment so the embed stays in its rounded card. */ .video-card > *:not(h4):not(iframe):not(embed) { width: 100%; border-radius: var(--r-md); overflow: hidden; margin: 0; } @media (max-width: 575px) { .video-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ────────────────────────────────────────────────────────────── ALL CUSTOMERS — exhaustive directory page Sticky search toolbar + stacked industry sections with column-flow lists. ─────────────────────────────────────────────────────────────── */ .all-cust-toolbar { position: sticky; top: 0; z-index: 20; padding: 1rem 0; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border-light); } .all-cust-search-wrap { position: relative; display: flex; align-items: center; } .all-cust-search-icon { position: absolute; left: 1rem; width: 18px; height: 18px; color: var(--c-text-muted); pointer-events: none; } .all-cust-search-input { flex: 1; height: 48px; padding: 0 1rem 0 2.875rem; background: #fff; border: 1px solid var(--c-border-light); border-radius: 10px; font: inherit; font-size: 1rem; color: var(--c-text); outline: none; transition: border-color 180ms, box-shadow 180ms; } .all-cust-search-input::placeholder { color: var(--c-text-muted); } .all-cust-search-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(16, 104, 206, 0.15); } .all-cust-toolbar-meta { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--c-text-muted); } .all-cust-toolbar-meta strong { color: var(--c-heading); font-weight: 700; } .all-cust-section { margin-top: 3.5rem; } .all-cust-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--c-border-light); } .all-cust-section-title { font-size: 1.5rem; font-weight: 800; color: var(--c-heading); letter-spacing: -0.015em; margin: 0; } .all-cust-list { list-style: none; padding: 0; margin: 0; column-count: 3; column-gap: 2.5rem; } .all-cust-list > li { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; padding: 0.375rem 0; font-size: 0.875rem; line-height: 1.5; color: var(--c-text); border-bottom: 1px solid rgba(0, 0, 0, 0.04); } /* JS-controlled hidden state for filtered items / empty sections */ .all-cust-list > li.is-hidden { display: none; } .all-cust-section.is-empty { display: none; } .all-cust-empty-state { text-align: center; padding: 4rem 1rem; color: var(--c-text-muted); font-size: 0.9375rem; display: none; } .all-cust-empty-state.is-visible { display: block; } @media (max-width: 991px) { .all-cust-list { column-count: 2; column-gap: 2rem; } .all-cust-section-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; } } @media (max-width: 575px) { .all-cust-list { column-count: 1; } } /* ────────────────────────────────────────────────────────────── TECH LOGO GRID — compact variant Use inside half-width columns (col-lg-6) where the default 5-column grid (~584px min) would overflow. ─────────────────────────────────────────────────────────────── */ .tech-logo-grid--compact { grid-template-columns: repeat(5, 1fr); gap: 0.625rem; } .tech-logo-grid--compact .tech-logo-item { aspect-ratio: 1 / 1; padding: 0.5rem; gap: 0.5rem; font-size: 0.75rem; min-width: 0; overflow: hidden; word-break: break-word; hyphens: auto; } .tech-logo-grid--compact .tech-logo-item img { max-width: 52px; max-height: 22px; } @media (max-width: 991px) { .tech-logo-grid--compact { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 575px) { .tech-logo-grid--compact { grid-template-columns: repeat(3, 1fr); } }