/* =========================================================== Nexia UI Framework File: variables.css Version: 3.4 Global Design Tokens These variables are the ONLY source of truth for colours, spacing, typography, shadows and transitions. Components should NEVER use hard-coded values. =========================================================== */ /*========================================================== LIGHT THEME ==========================================================*/ :root{ /*------------------------------------------------------ BRAND ------------------------------------------------------*/ --nx-primary:#FE6100; --nx-primary-hover:#E85A00; --nx-primary-glow:rgba(254,97,0,.35); --nx-primary-glow-strong:rgba(254,97,0,.65); --nx-glow-hover-filter:drop-shadow(0 0 7px var(--nx-primary-glow)); --nx-glow-hover-text:0 0 8px var(--nx-primary-glow), 0 0 18px var(--nx-primary-glow); --nx-glow-hover-shadow:0 0 12px var(--nx-primary-glow), 0 0 24px rgba(254,97,0,.18); --nx-success:#28a745; --nx-warning:#ffb100; --nx-danger:#dc3545; /*------------------------------------------------------ PAGE ------------------------------------------------------*/ --nx-page-bg:#f5f7fa; /*------------------------------------------------------ SURFACES ------------------------------------------------------*/ --nx-surface:#ffffff; --nx-surface-secondary:#fafafa; --nx-surface-hover:#f3f4f6; --nx-card-bg:#ffffff; --nx-header-bg:rgba(255,255,255,.42); --nx-header-scrolled-bg:rgba(255,255,255,.58); --nx-header-scrolled-border:rgba(0,0,0,.06); --nx-header-scrolled-shadow:0 8px 28px rgba(0,0,0,.10); --nx-header-transition:.46s cubic-bezier(.22,1,.36,1); --nx-smart-header-height:84px; --nx-footer-bg:#ffffff; --nx-menu-bg:transparent; --nx-nav-bg:#ffffff; /*------------------------------------------------------ FORMS ------------------------------------------------------*/ --nx-input-bg:#ffffff; --nx-input-text:#222222; --nx-input-border:#dddddd; /*------------------------------------------------------ TEXT ------------------------------------------------------*/ --nx-heading:#111111; --nx-text:#222222; --nx-text-light:#555555; --nx-text-muted:#777777; --nx-placeholder:#9a9a9a; --nx-link:#222222; --nx-link-hover:var(--nx-primary); --nx-nav-text:#222222; /*------------------------------------------------------ NAVIGATION DROPDOWN ------------------------------------------------------*/ --nx-dropdown-bg:rgba(255,255,255,.98); --nx-dropdown-hover:#f4f4f4; --nx-dropdown-text:#222222; --nx-dropdown-border:rgba(0,0,0,.08); --nx-dropdown-divider:rgba(0,0,0,.07); --nx-dropdown-shadow: 0 18px 45px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.08); /*------------------------------------------------------ BORDERS ------------------------------------------------------*/ --nx-border:#dddddd; --nx-border-light:#efefef; --nx-border-focus:var(--nx-primary); /*------------------------------------------------------ SHADOWS ------------------------------------------------------*/ --nx-shadow-sm: 0 2px 8px rgba(0,0,0,.05); --nx-shadow-md: 0 6px 18px rgba(0,0,0,.08); --nx-shadow-lg: 0 15px 40px rgba(0,0,0,.12); /*------------------------------------------------------ BUTTONS ------------------------------------------------------*/ --nx-button-shadow:none; --nx-button-shadow-hover: 0 0 12px rgba(254,97,0,.30), 0 0 24px rgba(254,97,0,.18); /*------------------------------------------------------ FOCUS ------------------------------------------------------*/ --nx-focus-ring: 0 0 0 3px rgba(254,97,0,.20); /*------------------------------------------------------ RADIUS ------------------------------------------------------*/ --nx-radius-xs:4px; --nx-radius-sm:6px; --nx-radius-md:10px; --nx-radius-lg:16px; --nx-radius-xl:24px; /*------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------*/ --nx-font:"Montserrat",sans-serif; --nx-font-size-xs:.80rem; --nx-font-size-sm:.90rem; --nx-font-size-md:1rem; --nx-font-size-lg:1.15rem; --nx-font-size-xl:1.40rem; --nx-font-size-xxl:2rem; --nx-weight-light:400; --nx-weight-normal:500; --nx-weight-medium:600; --nx-weight-semibold:700; --nx-weight-bold:800; /*------------------------------------------------------ SPACING ------------------------------------------------------*/ --nx-space-xs:4px; --nx-space-sm:8px; --nx-space-md:16px; --nx-space-lg:24px; --nx-space-xl:32px; --nx-space-xxl:48px; /*------------------------------------------------------ TRANSITIONS ------------------------------------------------------*/ --nx-transition-fast:.15s ease; --nx-transition:.25s ease; --nx-transition-slow:.40s ease; } /*========================================================== DARK THEME ==========================================================*/ html.nx-dark-mode{ /*------------------------------------------------------ PAGE ------------------------------------------------------*/ --nx-page-bg:#000000; /*------------------------------------------------------ SURFACES ------------------------------------------------------*/ --nx-surface:#0b0b0b; --nx-surface-secondary:#111111; --nx-surface-hover:#1a1a1a; --nx-card-bg:#0b0b0b; --nx-header-bg:rgba(0,0,0,.30); --nx-header-scrolled-bg:rgba(0,0,0,.55); --nx-header-scrolled-border:rgba(255,255,255,.08); --nx-header-scrolled-shadow:0 10px 32px rgba(0,0,0,.45); --nx-header-transition:.46s cubic-bezier(.22,1,.36,1); --nx-footer-bg:#000000; --nx-menu-bg:transparent; --nx-nav-bg:#111111; /*------------------------------------------------------ FORMS ------------------------------------------------------*/ --nx-input-bg:#141414; --nx-input-text:#f5f5f5; --nx-input-border:#333333; /*------------------------------------------------------ TEXT ------------------------------------------------------*/ --nx-heading:#ffffff; --nx-text:#f5f5f5; --nx-text-light:#d6d6d6; --nx-text-muted:#a8a8a8; --nx-placeholder:#8a8a8a; --nx-link:#f5f5f5; --nx-link-hover:var(--nx-primary); --nx-nav-text:#f5f5f5; /*------------------------------------------------------ NAVIGATION DROPDOWN ------------------------------------------------------*/ --nx-dropdown-bg:rgba(23,23,23,.97); --nx-dropdown-hover:#242424; --nx-dropdown-text:#eaeaea; --nx-dropdown-border:rgba(255,255,255,.08); --nx-dropdown-divider:rgba(255,255,255,.06); --nx-dropdown-shadow: 0 22px 55px rgba(0,0,0,.65), 0 8px 22px rgba(0,0,0,.35); /*------------------------------------------------------ BORDERS ------------------------------------------------------*/ --nx-border:#2d2d2d; --nx-border-light:#444444; --nx-border-focus:var(--nx-primary); /*------------------------------------------------------ SHADOWS ------------------------------------------------------*/ --nx-shadow-sm: 0 2px 10px rgba(0,0,0,.35); --nx-shadow-md: 0 8px 22px rgba(0,0,0,.45); --nx-shadow-lg: 0 18px 45px rgba(0,0,0,.60); /*------------------------------------------------------ BUTTONS ------------------------------------------------------*/ --nx-button-shadow:none; --nx-button-shadow-hover: 0 0 15px rgba(254,97,0,.45), 0 0 32px rgba(254,97,0,.22); /*------------------------------------------------------ FOCUS ------------------------------------------------------*/ --nx-focus-ring: 0 0 0 3px rgba(254,97,0,.25); }