/* ========================================================= 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; /* 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 ========================= */ .theme-v2 { font-family: var(--t-font-sans); color: var(--c-text); background: var(--c-bg); } .theme-v2 body { font-family: var(--t-font-sans); 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-muted); } /* 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: underline; text-underline-offset: 2px; } .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; } .theme-v2 .bg-server > * { position: relative; z-index: 1; } /* 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-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; 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 */ .theme-v2 .navbar-nav .nav-link { 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); } .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: rgba(0, 0, 0, 1); color: #fff; border-radius: var(--r-pill) 0 0 var(--r-pill); } .theme-v2 #search-bar .form-control:focus { border-color: rgba(185, 214, 255, 0.50); box-shadow: none; } .theme-v2 #search-bar .form-control::placeholder { color: rgba(255, 255, 255, 0.50); } } /* ========================= 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); } /* 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:hover { color: #fff; } /* 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-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); } .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 ========================= */ .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: 500; border-radius: var(--r-sm); padding: 0.6rem 1rem; transition: background-color var(--tr), color var(--tr); } .theme-v2 .sidebar .nav-link:hover { 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; /*border-left: 3px solid var(--c-primary); padding-left: calc(1rem - 3px);*/ } .theme-v2 .sidebar .nav .nav .nav-link.active { background-color: transparent; color: var(--c-primary); border-left: none; padding-left: 1rem; } .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; } .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); } .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-accent); background: rgba(0, 198, 167, 0.14); border: 1px solid rgba(0, 198, 167, 0.30); border-radius: var(--r-pill); padding: 0.25rem 1rem; margin-bottom: 1rem; } .prod-hero-lead { color: rgba(255, 255, 255, 0.72); } /* --- 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; } }