203 lines
7.8 KiB
CSS
203 lines
7.8 KiB
CSS
/* WEVAL UX Pro Overlay v1 — Production-grade design upgrade
|
|
Injected AFTER build CSS — higher specificity overrides
|
|
Target: /weval-ia Academy page + global site improvements
|
|
*/
|
|
|
|
/* ═══════════════ TYPOGRAPHY ═══════════════ */
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
body, html {
|
|
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* Override generic Inter everywhere */
|
|
h1, h2, h3, h4, h5, h6,
|
|
.MuiTypography-root,
|
|
[class*="title"], [class*="heading"], [class*="Title"], [class*="Heading"] {
|
|
font-family: 'Plus Jakarta Sans', sans-serif !important;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
/* Code blocks get JetBrains Mono */
|
|
code, pre, .code, [class*="code"], [class*="mono"] {
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
|
|
}
|
|
|
|
/* ═══════════════ GLOBAL POLISH ═══════════════ */
|
|
/* Smoother transitions globally */
|
|
*, *::before, *::after {
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
|
|
/* Better focus states */
|
|
:focus-visible {
|
|
outline: 2px solid rgba(34, 211, 238, 0.6) !important;
|
|
outline-offset: 2px !important;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Selection color */
|
|
::selection {
|
|
background: rgba(34, 211, 238, 0.25);
|
|
color: inherit;
|
|
}
|
|
|
|
/* ═══════════════ NAVBAR UPGRADE ═══════════════ */
|
|
nav, header, [class*="Navbar"], [class*="navbar"], [class*="Header"] {
|
|
backdrop-filter: blur(20px) saturate(180%) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
|
|
}
|
|
|
|
/* Logo area refinement */
|
|
nav img, header img, [class*="logo"] img {
|
|
filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.15));
|
|
transition: filter 0.3s ease !important;
|
|
}
|
|
nav img:hover, header img:hover {
|
|
filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.3));
|
|
}
|
|
|
|
/* ═══════════════ CARDS & SURFACES ═══════════════ */
|
|
/* Elevate all card surfaces */
|
|
[class*="card"], [class*="Card"],
|
|
.MuiCard-root, .MuiPaper-root,
|
|
[class*="module"], [class*="formation"] {
|
|
border: 1px solid rgba(255,255,255,0.06) !important;
|
|
border-radius: 16px !important;
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[class*="card"]:hover, [class*="Card"]:hover,
|
|
.MuiCard-root:hover, .MuiPaper-root:hover {
|
|
border-color: rgba(34, 211, 238, 0.2) !important;
|
|
transform: translateY(-4px) !important;
|
|
box-shadow:
|
|
0 8px 25px -5px rgba(0,0,0,0.3),
|
|
0 0 0 1px rgba(34, 211, 238, 0.08),
|
|
inset 0 1px 0 rgba(255,255,255,0.05) !important;
|
|
}
|
|
|
|
/* ═══════════════ BUTTONS ═══════════════ */
|
|
button, [class*="btn"], [class*="Btn"], [class*="Button"],
|
|
.MuiButton-root, a[class*="button"] {
|
|
border-radius: 10px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.01em;
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
|
|
/* Primary buttons glow */
|
|
[class*="primary"], [class*="Primary"],
|
|
.MuiButton-containedPrimary,
|
|
button[class*="bg-cyan"], a[class*="bg-cyan"],
|
|
[style*="background-color: rgb(34, 211, 238)"],
|
|
[style*="background:#22d3ee"] {
|
|
box-shadow: 0 4px 15px -3px rgba(34, 211, 238, 0.4) !important;
|
|
position: relative;
|
|
}
|
|
[class*="primary"]:hover, [class*="Primary"]:hover,
|
|
.MuiButton-containedPrimary:hover {
|
|
box-shadow: 0 6px 25px -3px rgba(34, 211, 238, 0.5) !important;
|
|
transform: translateY(-2px) !important;
|
|
}
|
|
|
|
/* ═══════════════ STATS / COUNTERS ═══════════════ */
|
|
/* The big numbers (11 formations, 49 modules, etc) */
|
|
[class*="stat"] [class*="num"],
|
|
[class*="stat"] [class*="count"],
|
|
[class*="stat"] [class*="value"],
|
|
[class*="counter"], [class*="Counter"] {
|
|
font-weight: 800 !important;
|
|
background: linear-gradient(135deg, #22d3ee, #a78bfa) !important;
|
|
-webkit-background-clip: text !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
background-clip: text !important;
|
|
}
|
|
|
|
/* ═══════════════ BADGES & TAGS ═══════════════ */
|
|
[class*="badge"], [class*="Badge"], [class*="tag"], [class*="Tag"],
|
|
[class*="chip"], [class*="Chip"] {
|
|
border-radius: 100px !important;
|
|
font-size: 0.72rem !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.02em;
|
|
padding: 4px 12px !important;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
/* ═══════════════ SEARCH INPUT ═══════════════ */
|
|
input[type="text"], input[type="search"],
|
|
[class*="search"] input, [class*="Search"] input {
|
|
border-radius: 14px !important;
|
|
border: 1.5px solid rgba(255,255,255,0.08) !important;
|
|
backdrop-filter: blur(8px);
|
|
transition: all 0.3s ease !important;
|
|
font-size: 0.95rem !important;
|
|
}
|
|
input[type="text"]:focus, input[type="search"]:focus,
|
|
[class*="search"] input:focus {
|
|
border-color: rgba(34, 211, 238, 0.4) !important;
|
|
box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08) !important;
|
|
}
|
|
|
|
/* ═══════════════ SCROLLBAR ═══════════════ */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255,255,255,0.12);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
|
|
|
|
/* ═══════════════ FOOTER BAR UPGRADE ═══════════════ */
|
|
[class*="footer"], footer, [class*="Footer"],
|
|
[class*="bottom-bar"], [class*="cta-bar"] {
|
|
backdrop-filter: blur(20px) saturate(150%) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
|
|
border-top: 1px solid rgba(255,255,255,0.06) !important;
|
|
}
|
|
|
|
/* ═══════════════ ANIMATIONS ═══════════════ */
|
|
@keyframes weval-fade-up {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Stagger cards on load */
|
|
[class*="card"]:nth-child(1) { animation: weval-fade-up 0.5s ease 0.05s both; }
|
|
[class*="card"]:nth-child(2) { animation: weval-fade-up 0.5s ease 0.1s both; }
|
|
[class*="card"]:nth-child(3) { animation: weval-fade-up 0.5s ease 0.15s both; }
|
|
[class*="card"]:nth-child(4) { animation: weval-fade-up 0.5s ease 0.2s both; }
|
|
[class*="card"]:nth-child(5) { animation: weval-fade-up 0.5s ease 0.25s both; }
|
|
[class*="card"]:nth-child(6) { animation: weval-fade-up 0.5s ease 0.3s both; }
|
|
|
|
/* ═══════════════ DARK MODE DEPTH ═══════════════ */
|
|
/* Subtle noise texture overlay for depth */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* ═══════════════ RESPONSIVE FIXES ═══════════════ */
|
|
@media (max-width: 768px) {
|
|
[class*="stat"] [class*="num"],
|
|
[class*="stat"] [class*="count"] {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
[class*="card"]:hover {
|
|
transform: none !important;
|
|
}
|
|
}
|