/* =========================================================
UNDERHOST DESIGN SYSTEM (TOKENS + THEMES)
File: https://cdn.underhost.com/css/update/tokens.css
Purpose:
- One place for brand colors + gradients + shadows + radius
- Theme switching per-page via: html[data-theme="futuristic"] etc.
- Drop-in utilities for buttons, badges, text, backgrounds
========================================================= */
/* ---------------------------
1) DEFAULT THEME (Brand)
Usage: (no attribute) OR
---------------------------- */
:root,
html[data-theme="brand"] {
/* Core Brand */
--uh-navy: #0D1F3C;
--uh-blue: #176EA5;
--uh-blue-dark: #125A8A;
--uh-cyan: #0099CC;
--uh-electric: #00D4FF;
--uh-cta-blue: #0077FF;
/* Secondary / Accents */
--uh-green: #7AB800;
--uh-green-bright: #91DB00;
--uh-orange: #F28B38;
--uh-orange-hover: #EE5A00;
--uh-purple: #6E2585;
--uh-purple-bright: #872DA3;
/* Status */
--uh-success: #16A34A;
--uh-danger: #DC2626;
--uh-warning: #F59E0B;
--uh-info: #2563EB;
/* Neutrals */
--uh-bg: #F6F8FB;
--uh-bg-soft: #F8FAFC;
--uh-bg-softer: #F1F5F9;
--uh-card: #FFFFFF;
--uh-border: #E5E7EB;
--uh-border-soft: #EEF2F6;
/* Text */
--uh-text: #1F2937;
--uh-muted: #6B7280;
--uh-muted-2: #9CA3AF;
--uh-white: #FFFFFF;
/* Signature Gradients */
--uh-grad-animated: linear-gradient(145deg, #B0C4DE, #0091D6, #434CC5, #87A8C4);
--uh-grad-cta: linear-gradient(90deg, #00D4FF, #0077FF);
--uh-grad-blue: linear-gradient(135deg, var(--uh-blue) 0%, var(--uh-blue-dark) 100%);
--uh-grad-hybrid: linear-gradient(90deg, #7AB800, #00D4FF);
--uh-grad-free: linear-gradient(145deg, #7AB800, #91DB00);
--uh-grad-premium: linear-gradient(145deg, #176EA5, #3192D1);
--uh-grad-custom: linear-gradient(145deg, #6E2585, #872DA3);
/* Text Gradients */
--uh-text-grad-blue: linear-gradient(90deg, #4FACFE, #00F2FE);
--uh-text-grad-redis: linear-gradient(90deg, #FF5E62, #FF9966);
/* Shadows */
--uh-shadow-xs: 0 2px 10px rgba(0,0,0,0.05);
--uh-shadow-sm: 0 4px 12px rgba(13,31,60,0.08);
--uh-shadow-md: 0 8px 28px rgba(13,31,60,0.10);
--uh-shadow-lg: 0 20px 40px -15px rgba(13,31,60,0.15);
--uh-shadow-glow: 0 0 40px rgba(0,212,255,0.30);
/* Radius */
--uh-radius-sm: 8px;
--uh-radius-md: 12px;
--uh-radius-lg: 16px;
--uh-radius-xl: 20px;
--uh-radius-pill: 999px;
/* Motion */
--uh-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
--uh-dur-fast: 150ms;
--uh-dur: 250ms;
--uh-dur-slow: 450ms;
}
/* ---------------------------
2) FUTURISTIC THEME (Dark + Glow)
Usage:
Works great for Cloud VPS / "cyber" pages.
---------------------------- */
html[data-theme="futuristic"] {
--uh-bg: #0B1220;
--uh-bg-soft: #0F1A2A;
--uh-bg-softer: #121E33;
--uh-card: rgba(15, 32, 39, 0.92);
--uh-border: rgba(0,212,255,0.22);
--uh-border-soft: rgba(255,255,255,0.10);
--uh-text: #EAF2FF;
--uh-muted: rgba(234,242,255,0.74);
--uh-muted-2: rgba(234,242,255,0.55);
/* Stronger glow */
--uh-shadow-xs: 0 2px 12px rgba(0,0,0,0.45);
--uh-shadow-sm: 0 8px 20px rgba(0,0,0,0.40);
--uh-shadow-md: 0 0 40px rgba(0,212,255,0.18);
--uh-shadow-lg: 0 0 60px rgba(0,212,255,0.22);
--uh-shadow-glow: 0 0 60px rgba(0,212,255,0.35);
/* A slightly punchier animated gradient looks better on dark */
--uh-grad-animated: linear-gradient(145deg, #B0C4DE, #00A7F0, #434CC5, #87A8C4);
}
/* ---------------------------
3) CLEAN THEME (Bright + Minimal)
Usage:
Works well for tools pages / forms / docs.
---------------------------- */
html[data-theme="clean"] {
--uh-bg: #FFFFFF;
--uh-bg-soft: #F8FAFC;
--uh-bg-softer: #F1F5F9;
--uh-card: #FFFFFF;
--uh-border: #E5E7EB;
--uh-border-soft: #F3F4F6;
--uh-text: #111827;
--uh-muted: #4B5563;
--uh-muted-2: #6B7280;
/* Softer shadows */
--uh-shadow-xs: 0 2px 10px rgba(0,0,0,0.04);
--uh-shadow-sm: 0 4px 16px rgba(0,0,0,0.06);
--uh-shadow-md: 0 10px 30px rgba(0,0,0,0.08);
--uh-shadow-lg: 0 16px 40px rgba(0,0,0,0.10);
--uh-shadow-glow: 0 0 0 rgba(0,0,0,0);
/* Optional alt gradient for clean pages (still on-brand) */
--uh-grad-blue: linear-gradient(135deg, var(--uh-blue) 0%, var(--uh-blue-dark) 100%);
}
/* =========================================================
4) ACCESSIBLE MATCHING COLORS (EXTRAS)
These match your brand well and give variety per-page.
(Use for special sections / category pages / badges.)
========================================================= */
:root,
html[data-theme="brand"],
html[data-theme="futuristic"],
html[data-theme="clean"] {
/* Cool accents that harmonize with your blue/cyan */
--uh-ice: #EAF3FF; /* pale blue surface */
--uh-sky: #38BDF8; /* bright sky accent */
--uh-indigo: #4F46E5; /* modern tech accent */
--uh-teal: #14B8A6; /* pairs nicely with cyan */
--uh-mint: #34D399; /* softer than your green */
--uh-rose: #FB7185; /* warm accent for promos */
--uh-amber: #FBBF24; /* highlight / warnings */
--uh-slate: #334155; /* readable headings on light */
}
/* =========================================================
5) KEYFRAMES
========================================================= */
@keyframes uhGradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes uhPulse {
0%,100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.04); opacity: 1; }
}
@keyframes uhSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* =========================================================
6) BASE LAYOUT HELPERS (optional but useful)
========================================================= */
.uh-bg { background: var(--uh-bg); color: var(--uh-text); }
.uh-bg-soft { background: var(--uh-bg-soft); color: var(--uh-text); }
.uh-card {
background: var(--uh-card);
border: 1px solid var(--uh-border);
border-radius: var(--uh-radius-lg);
box-shadow: var(--uh-shadow-sm);
color: var(--uh-text);
}
.uh-border { border: 1px solid var(--uh-border); }
.uh-shadow-sm { box-shadow: var(--uh-shadow-sm); }
.uh-shadow-md { box-shadow: var(--uh-shadow-md); }
.uh-shadow-lg { box-shadow: var(--uh-shadow-lg); }
/* Text */
.uh-text { color: var(--uh-text) !important; }
.uh-muted { color: var(--uh-muted) !important; }
.uh-link { color: var(--uh-blue) !important; text-decoration: none; }
.uh-link:hover { color: var(--uh-blue-dark) !important; text-decoration: underline; }
/* =========================================================
7) GRADIENT UTILITIES (your most-used)
========================================================= */
.uh-animated-bg {
background: var(--uh-grad-animated);
background-size: 200% 200%;
animation: uhGradientShift 10s ease infinite;
}
.uh-cta-bg { background: var(--uh-grad-cta); }
.uh-hybrid-bg { background: var(--uh-grad-hybrid); }
.uh-premium-bg { background: var(--uh-grad-premium); }
.uh-free-bg { background: var(--uh-grad-free); }
.uh-custom-bg { background: var(--uh-grad-custom); }
/* Your existing class compatibility */
.bluebg3 {
background: var(--uh-grad-animated);
background-size: 200% 200%;
animation: uhGradientShift 10s ease infinite;
}
/* Text gradients */
.uh-text-gradient-blue {
background: var(--uh-text-grad-blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.uh-text-gradient-redis {
background: var(--uh-text-grad-redis);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* =========================================================
8) BUTTONS (drop-in)
========================================================= */
.uh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 24px;
border-radius: 10px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: transform var(--uh-dur) var(--uh-ease),
box-shadow var(--uh-dur) var(--uh-ease),
filter var(--uh-dur) var(--uh-ease);
border: 1px solid transparent;
user-select: none;
white-space: nowrap;
}
.uh-btn:hover { transform: translateY(-2px); }
.uh-btn:active { transform: translateY(0); }
.uh-btn-primary {
color: #fff;
background: var(--uh-grad-cta);
box-shadow: 0 6px 18px rgba(0,212,255,0.25);
}
.uh-btn-primary:hover { box-shadow: 0 10px 24px rgba(0,212,255,0.32); }
.uh-btn-outline {
color: var(--uh-blue);
background: transparent;
border-color: var(--uh-blue);
}
.uh-btn-outline:hover {
color: #fff;
background: var(--uh-grad-blue);
border-color: transparent;
box-shadow: 0 10px 24px rgba(23,110,165,0.18);
}
.uh-btn-success {
color: #fff;
background: linear-gradient(135deg, var(--uh-success), #059669);
box-shadow: 0 10px 24px rgba(16,185,129,0.22);
}
.uh-btn-danger {
color: #fff;
background: linear-gradient(135deg, var(--uh-danger), #B91C1C);
box-shadow: 0 10px 24px rgba(220,38,38,0.22);
}
/* Keep compatibility with your existing .btn-blue2 look */
.btn-blue2 {
background: var(--uh-cta-blue);
color: #fff;
border: none;
transition: transform var(--uh-dur) var(--uh-ease),
box-shadow var(--uh-dur) var(--uh-ease),
background var(--uh-dur) var(--uh-ease);
}
.btn-blue2:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(13,31,60,0.18);
}
/* =========================================================
9) BADGES / PILLS
========================================================= */
.uh-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: var(--uh-radius-pill);
font-size: 12px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
border: 1px solid var(--uh-border);
background: var(--uh-card);
color: var(--uh-text);
}
.uh-badge-free { background: var(--uh-grad-free); color: #fff; border: none; }
.uh-badge-premium { background: var(--uh-grad-premium); color: #fff; border: none; }
.uh-badge-custom { background: var(--uh-grad-custom); color: #fff; border: none; }
.uh-badge-warn {
background: rgba(245,158,11,0.12);
color: #B45309;
border-color: rgba(245,158,11,0.25);
}
/* =========================================================
10) SECTION HEADER (matches your style)
========================================================= */
.section-header {
position: relative;
padding: 40px 0 30px;
}
.section-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(90deg, rgba(23,110,165,0.10), rgba(23,110,165,0.15));
color: var(--uh-blue);
border-radius: 30px;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 25px;
border: 1px solid rgba(23,110,165,0.20);
box-shadow: 0 4px 12px rgba(23,110,165,0.08);
}
.highlight-text {
background: linear-gradient(90deg, var(--uh-blue), var(--uh-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: inline-block;
}
.highlight-text::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--uh-blue), var(--uh-cyan));
border-radius: 2px;
}
/* =========================================================
11) ACCORDION HEADER (uses your animated gradient)
========================================================= */
.accordion-header {
background: var(--uh-bg);
transition: all var(--uh-dur) var(--uh-ease);
}
.accordion-item.active .accordion-header {
background: var(--uh-grad-animated);
background-size: 200% 200%;
animation: uhGradientShift 10s ease infinite;
}
/* =========================================================
12) HOVER ACCENT (your orange hover)
========================================================= */
li:hover strong,
li:hover i {
color: var(--uh-orange-hover);
transition: color var(--uh-dur) var(--uh-ease);
}
/* =========================================================
13) RESPONSIVE QUICK FIXES
========================================================= */
@media (max-width: 767px) {
.section-header { padding: 30px 0 20px; }
}
/* =========================================================
14) OPTIONAL: THEME-SCOPED COLOR SWAPS
Use these utility classes for per-section theme mixing:
========================================================= */
.uh-theme-swap { background: var(--uh-bg); color: var(--uh-text); }
.uh-theme-swap--clean {
background: #FFFFFF;
color: #111827;
--uh-card: #FFFFFF;
--uh-border: #E5E7EB;
--uh-text: #111827;
--uh-muted: #4B5563;
}
.uh-theme-swap--futuristic {
background: #0F1A2A;
color: #EAF2FF;
--uh-card: rgba(15, 32, 39, 0.92);
--uh-border: rgba(0,212,255,0.22);
--uh-text: #EAF2FF;
--uh-muted: rgba(234,242,255,0.74);
--uh-shadow-sm: 0 0 40px rgba(0,212,255,0.18);
}
/* =========================================================
UNDERHOST THEME DEMOS (OPTIONAL)
File: underhost-page-themes.css
Purpose:
- Drop-in examples of “page switch” looks
- Use together with underhost-tokens.css
========================================================= */
/* Clean tool/form pages */
html[data-theme="clean"] body {
background: var(--uh-bg);
color: var(--uh-text);
}
html[data-theme="clean"] .uh-card {
box-shadow: var(--uh-shadow-md);
}
/* Futuristic / Cloud pages */
html[data-theme="futuristic"] body {
background: radial-gradient(1200px 600px at 20% 10%, rgba(0,212,255,0.10), transparent 60%),
radial-gradient(800px 500px at 80% 70%, rgba(122,184,0,0.08), transparent 55%),
var(--uh-bg);
color: var(--uh-text);
}
html[data-theme="futuristic"] .uh-card {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--uh-shadow-md);
}
/* Optional “brand” page base */
html[data-theme="brand"] body {
background: var(--uh-bg);
color: var(--uh-text);
}
/* =========================================================
UNDERHOST “MATCH WELL” COLOR SETS (PRESETS)
File: underhost-color-presets.css
Purpose:
- Quick section presets that match your brand
- Use as:
========================================================= */
.uh-preset {
border-radius: var(--uh-radius-xl);
border: 1px solid var(--uh-border);
padding: 40px 30px;
background: var(--uh-card);
box-shadow: var(--uh-shadow-sm);
color: var(--uh-text);
}
/* Tech Indigo (pairs with your blue/cyan) */
.uh-preset--indigo {
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(0,212,255,0.06));
border-color: rgba(79,70,229,0.18);
}
/* Teal (pairs with cyan, good for “security” sections) */
.uh-preset--teal {
background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(0,153,204,0.08));
border-color: rgba(20,184,166,0.20);
}
/* Mint (softer than your green; good for “included/free”) */
.uh-preset--mint {
background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(122,184,0,0.08));
border-color: rgba(52,211,153,0.22);
}
/* Rose (promo, limited offers) */
.uh-preset--rose {
background: linear-gradient(135deg, rgba(251,113,133,0.14), rgba(255,94,98,0.06));
border-color: rgba(251,113,133,0.22);
}
/* Amber (warnings, SLA highlights, notices) */
.uh-preset--amber {
background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(242,139,56,0.08));
border-color: rgba(251,191,36,0.26);
}
/* Dark glass (for one section inside a light page) */
.uh-preset--glass-dark {
background: rgba(15, 32, 39, 0.92);
border-color: rgba(0,212,255,0.22);
color: #EAF2FF;
box-shadow: 0 0 40px rgba(0,212,255,0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Buttons inside presets */
.uh-preset .uh-btn { margin-top: 10px; }