/* * ZoneSync / eFastServers Theme * Custom CSS Override for Lagom Modern Style * File: theme-custom.css * Location: /templates/lagom2/core/styles/modern/assets/css/theme-custom.css * * Safe to update - will NOT be overwritten by Lagom updates */ /* ── LIGHT MODE OVERRIDES ─────────────────────────────────────────────────── */ :root { /* Primary -> Cyan (#00E5FF) */ --brand-primary: #0099CC; --brand-primary-lighter: #00E5FF; --brand-primary-lighter-2: #B3F0FF; --brand-primary-lighter-3: #D9F8FF; --brand-primary-lighter-4: #EDF9FF; --brand-primary-darker: #006E99; --brand-primary-gradient-start: #006E99; --brand-primary-gradient-end: #00BBDD; --brand-primary-gradient-h: linear-gradient(90deg, #006E99 0%, #00BBDD 100%); --brand-primary-gradient-v: linear-gradient(0deg, #00BBDD 0%, #006E99 100%); /* Secondary -> Purple (#7B61FF) */ --brand-secondary: #7B61FF; --brand-secondary-lighter: #A08CFF; --brand-secondary-lighter-2: #C4B8FF; --brand-secondary-lighter-3: #E8E4FF; --brand-secondary-darker: #5A44CC; --brand-secondary-gradient-start: #5A44CC; --brand-secondary-gradient-end: #7B61FF; --brand-secondary-gradient-h: linear-gradient(90deg, #5A44CC 0%, #7B61FF 100%); --brand-secondary-gradient-v: linear-gradient(0deg, #7B61FF 0%, #5A44CC 100%); /* Info -> Cyan (same as primary) */ --brand-info: #0099CC; --brand-info-lighter: #00E5FF; --brand-info-lighter-2: #B3F0FF; --brand-info-lighter-3: #D9F8FF; --brand-info-lighter-4: #EDF9FF; --brand-info-darker: #006E99; --brand-info-gradient-start: #006E99; --brand-info-gradient-end: #00BBDD; --brand-info-gradient-h: linear-gradient(90deg, #006E99 0%, #00BBDD 100%); --brand-info-gradient-v: linear-gradient(0deg, #00BBDD 0%, #006E99 100%); /* Success -> Green (#00FF94 toned down) */ --brand-success: #00995A; --brand-success-lighter: #00CC78; --brand-success-lighter-2: #B3FFE0; --brand-success-lighter-3: #D9FFF0; --brand-success-lighter-4: #EDFFF8; --brand-success-darker: #007A48; --brand-success-gradient-start: #007A48; --brand-success-gradient-end: #00995A; --brand-success-gradient-h: linear-gradient(90deg, #007A48 0%, #00995A 100%); --brand-success-gradient-v: linear-gradient(0deg, #00995A 0%, #007A48 100%); } /* ── DARK MODE OVERRIDES ──────────────────────────────────────────────────── */ .lagom-dark-mode { /* Dark background -> ZoneSync black */ --dark-mode-body-bg: #060810; --body-bg: var(--dark-mode-body-bg); /* Dark cards */ --ui-block-bg: #0D1117; --ui-block-divider-color: #1E2530; /* Dark grays */ --dark-mode-gray-base: #C8D0DC; --dark-mode-gray-lighter: #A0ACBA; --dark-mode-gray-lighter-2: #788494; --dark-mode-gray-lighter-3: #1E2530; --dark-mode-gray-lighter-4: #161D28; --dark-mode-gray-faded: #111820; --dark-mode-gray-darker: #E8EDF5; --dark-mode-gray-gradient-start: #0D1117; --dark-mode-gray-gradient-end: #111820; --dark-mode-gray-gradient-h: linear-gradient(90deg, #0D1117 0%, #111820 100%); --dark-mode-gray-gradient-v: linear-gradient(0deg, #111820 0%, #0D1117 100%); --gray-base: var(--dark-mode-gray-base); --gray-lighter: var(--dark-mode-gray-lighter); --gray-lighter-2: var(--dark-mode-gray-lighter-2); --gray-lighter-3: var(--dark-mode-gray-lighter-3); --gray-lighter-4: var(--dark-mode-gray-lighter-4); --gray-faded: var(--dark-mode-gray-faded); --gray-darker: var(--dark-mode-gray-darker); --gray-gradient-start: var(--dark-mode-gray-gradient-start); --gray-gradient-end: var(--dark-mode-gray-gradient-end); --gray-gradient-h: var(--dark-mode-gray-gradient-h); --gray-gradient-v: var(--dark-mode-gray-gradient-v); /* Primary -> Cyan */ --dark-mode-brand-primary: #00BBDD; --dark-mode-brand-primary-lighter: #00E5FF; --dark-mode-brand-primary-lighter-2: #0A2A35; --dark-mode-brand-primary-lighter-3: #071E28; --dark-mode-brand-primary-lighter-4: #051620; --dark-mode-brand-primary-darker: #006E99; --dark-mode-brand-primary-gradient-start: #006E99; --dark-mode-brand-primary-gradient-end: #00BBDD; --dark-mode-brand-primary-gradient-h: linear-gradient(90deg, #006E99 0%, #00BBDD 100%); --dark-mode-brand-primary-gradient-v: linear-gradient(0deg, #00BBDD 0%, #006E99 100%); --brand-primary: var(--dark-mode-brand-primary); --brand-primary-lighter: var(--dark-mode-brand-primary-lighter); --brand-primary-lighter-2: var(--dark-mode-brand-primary-lighter-2); --brand-primary-lighter-3: var(--dark-mode-brand-primary-lighter-3); --brand-primary-lighter-4: var(--dark-mode-brand-primary-lighter-4); --brand-primary-darker: var(--dark-mode-brand-primary-darker); --brand-primary-gradient-start: var(--dark-mode-brand-primary-gradient-start); --brand-primary-gradient-end: var(--dark-mode-brand-primary-gradient-end); --brand-primary-gradient-h: var(--dark-mode-brand-primary-gradient-h); --brand-primary-gradient-v: var(--dark-mode-brand-primary-gradient-v); /* Secondary -> Purple */ --dark-mode-brand-secondary: #7B61FF; --dark-mode-brand-secondary-lighter: #A08CFF; --dark-mode-brand-secondary-lighter-2: #1A1535; --dark-mode-brand-secondary-lighter-3: #141028; --dark-mode-brand-secondary-darker: #5A44CC; --dark-mode-brand-secondary-gradient-start: #5A44CC; --dark-mode-brand-secondary-gradient-end: #7B61FF; --dark-mode-brand-secondary-gradient-h: linear-gradient(90deg, #5A44CC 0%, #7B61FF 100%); --dark-mode-brand-secondary-gradient-v: linear-gradient(0deg, #7B61FF 0%, #5A44CC 100%); --brand-secondary: var(--dark-mode-brand-secondary); --brand-secondary-lighter: var(--dark-mode-brand-secondary-lighter); --brand-secondary-darker: var(--dark-mode-brand-secondary-darker); --brand-secondary-gradient-start: var(--dark-mode-brand-secondary-gradient-start); --brand-secondary-gradient-end: var(--dark-mode-brand-secondary-gradient-end); --brand-secondary-gradient-h: var(--dark-mode-brand-secondary-gradient-h); --brand-secondary-gradient-v: var(--dark-mode-brand-secondary-gradient-v); /* Info -> Cyan */ --dark-mode-brand-info: #00BBDD; --dark-mode-brand-info-lighter: #00E5FF; --dark-mode-brand-info-lighter-2: #0A2A35; --dark-mode-brand-info-lighter-3: #071E28; --dark-mode-brand-info-lighter-4: #051620; --dark-mode-brand-info-darker: #006E99; --dark-mode-brand-info-gradient-start: #006E99; --dark-mode-brand-info-gradient-end: #00BBDD; --dark-mode-brand-info-gradient-h: linear-gradient(90deg, #006E99 0%, #00BBDD 100%); --dark-mode-brand-info-gradient-v: linear-gradient(0deg, #00BBDD 0%, #006E99 100%); --brand-info: var(--dark-mode-brand-info); --brand-info-lighter: var(--dark-mode-brand-info-lighter); --brand-info-lighter-2: var(--dark-mode-brand-info-lighter-2); --brand-info-lighter-3: var(--dark-mode-brand-info-lighter-3); --brand-info-lighter-4: var(--dark-mode-brand-info-lighter-4); --brand-info-darker: var(--dark-mode-brand-info-darker); --brand-info-gradient-start: var(--dark-mode-brand-info-gradient-start); --brand-info-gradient-end: var(--dark-mode-brand-info-gradient-end); --brand-info-gradient-h: var(--dark-mode-brand-info-gradient-h); --brand-info-gradient-v: var(--dark-mode-brand-info-gradient-v); /* Success -> Green */ --dark-mode-brand-success: #00995A; --dark-mode-brand-success-lighter: #00CC78; --dark-mode-brand-success-lighter-2: #0A2820; --dark-mode-brand-success-lighter-3: #071E18; --dark-mode-brand-success-lighter-4: #051510; --dark-mode-brand-success-darker: #007A48; --dark-mode-brand-success-gradient-start: #007A48; --dark-mode-brand-success-gradient-end: #00995A; --dark-mode-brand-success-gradient-h: linear-gradient(90deg, #007A48 0%, #00995A 100%); --dark-mode-brand-success-gradient-v: linear-gradient(0deg, #00995A 0%, #007A48 100%); --brand-success: var(--dark-mode-brand-success); --brand-success-lighter: var(--dark-mode-brand-success-lighter); --brand-success-lighter-2: var(--dark-mode-brand-success-lighter-2); --brand-success-lighter-3: var(--dark-mode-brand-success-lighter-3); --brand-success-lighter-4: var(--dark-mode-brand-success-lighter-4); --brand-success-darker: var(--dark-mode-brand-success-darker); --brand-success-gradient-start: var(--dark-mode-brand-success-gradient-start); --brand-success-gradient-end: var(--dark-mode-brand-success-gradient-end); --brand-success-gradient-h: var(--dark-mode-brand-success-gradient-h); --brand-success-gradient-v: var(--dark-mode-brand-success-gradient-v); /* Nav link hover bg */ --ui-block-link-hover-bg: var(--gray-faded); --ui-block-link-active-bg: var(--gray-faded); } /* ── ADDITIONAL STYLING ───────────────────────────────────────────────────── */ /* Gradient buttons using cyan->purple */ .lagom-dark-mode .btn-primary, .lagom-dark-mode .btn-primary:focus { background: linear-gradient(135deg, #00BBDD, #7B61FF) !important; border-color: transparent !important; color: #fff !important; } .lagom-dark-mode .btn-primary:hover { background: linear-gradient(135deg, #00E5FF, #9B81FF) !important; box-shadow: 0 0 20px rgba(0, 229, 255, 0.25) !important; } /* Navigation glow on active */ .lagom-dark-mode .nav-active, .lagom-dark-mode .active > a { color: #00E5FF !important; } /* Card backgrounds */ .lagom-dark-mode .panel, .lagom-dark-mode .card { background: #0D1117 !important; border-color: #1E2530 !important; } /* Subtle cyan glow on focus inputs */ .lagom-dark-mode .form-control:focus { border-color: #00BBDD !important; box-shadow: 0 0 0 3px rgba(0, 187, 221, 0.15) !important; } /* Logo area */ .lagom-dark-mode .navbar-brand img { filter: brightness(1.1); } /* Scrollbar */ .lagom-dark-mode ::-webkit-scrollbar-track { background: #0D1117; } .lagom-dark-mode ::-webkit-scrollbar-thumb { background: #1E2530; border-radius: 3px; } .lagom-dark-mode ::-webkit-scrollbar-thumb:hover { background: #00BBDD; }