/* SECURITY: All inputs sanitized via DOMPurify | Rate limiting enforced | No inline event handlers | CSP headers required */
/* ============================================================
SKILVEX — DESIGN SYSTEM
"Where Code Meets Mastery"
PART 1: Root Variables, Color System, Spacing, Borders,
Transitions & Blurs
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@300;400;500;600;700&display=swap');
:root {
/* ----------------------------------------------------------
TYPOGRAPHY
---------------------------------------------------------- */
--font-display : 'Orbitron', sans-serif;
--font-body : 'Inter', sans-serif;
--font-code : 'Fira Code', monospace;
/* ----------------------------------------------------------
COLOR SYSTEM — Exact Usage Rules:
#00d4ff (Blue) → btn-primary, card borders, h3/h4, progress bars, active nav, glows
#7b2fff (Purple) → back-end track, admin cards, advanced badges, sidebar bg, secondary gradient
#ffd700 (Gold) → #1 leaderboard, CTA buttons, certificates, XP points, expert badges
#00ff88 (Green) → completed status, online dot, free badge, success, 100% progress
#ff3366 (Red) → errors, late/banned/locked status, security alerts, urgent badge
---------------------------------------------------------- */
/* — Backgrounds — */
--clr-bg-primary : #05050f;
--clr-bg-secondary : #0d0d1f;
--clr-bg-card : rgba(255, 255, 255, 0.04);
--clr-bg-card-hover: rgba(255, 255, 255, 0.07);
/* — Accent Colors — */
--clr-accent-blue : #00d4ff; /* Primary */
--clr-accent-purple : #7b2fff; /* Secondary */
--clr-accent-gold : #ffd700; /* Premium CTA */
--clr-accent-green : #00ff88; /* Success / Complete */
--clr-accent-red : #ff3366; /* Error / Alert */
/* — Text — */
--clr-text-primary : #ffffff;
--clr-text-secondary : #a0aec0;
--clr-text-muted : #4a5568;
/* — Borders & Glows — */
--clr-border : rgba(0, 212, 255, 0.15);
--clr-glow-blue : rgba(0, 212, 255, 0.3);
--clr-glow-purple : rgba(123, 47, 255, 0.3);
/* — Gradients — */
--gradient-hero : linear-gradient(135deg, #05050f 0%, #0d0d2b 50%, #1a0533 100%);
--gradient-accent : linear-gradient(135deg, #00d4ff, #7b2fff);
--gradient-gold : linear-gradient(135deg, #ffd700, #ff8c00);
--gradient-card : linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(123, 47, 255, 0.05));
/* ----------------------------------------------------------
SPACING & LAYOUT
---------------------------------------------------------- */
--radius-sm : 8px;
--radius-md : 16px;
--radius-lg : 24px; /* Glass card border-radius */
--radius-xl : 32px;
--radius-full : 9999px; /* Buttons */
/* Section padding (Landing) */
--section-pt : 120px;
--section-pb : 120px;
/* Heading ↔ Content gap */
--heading-gap : 48px;
/* Glass card padding */
--card-pad-desktop : 32px;
--card-pad-mobile : 20px;
/* Button heights */
--btn-h-lg : 52px;
--btn-h-md : 44px;
--btn-h-sm : 36px;
/* Navbar */
--nav-h : 80px;
/* ----------------------------------------------------------
NEON SHADOWS — Exact Spec
---------------------------------------------------------- */
/* Neon Blue (active buttons, cards) */
--shadow-neon-blue : 0 0 15px rgba(0, 212, 255, 0.3),
0 0 30px rgba(0, 212, 255, 0.15),
0 4px 20px rgba(0, 0, 0, 0.5);
/* Neon Purple (back-end cards) */
--shadow-neon-purple : 0 0 15px rgba(123, 47, 255, 0.3),
0 0 30px rgba(123, 47, 255, 0.15),
0 4px 20px rgba(0, 0, 0, 0.5);
/* Neon Gold (premium CTAs) */
--shadow-neon-gold : 0 0 15px rgba(255, 215, 0, 0.4),
0 0 30px rgba(255, 215, 0, 0.2),
0 4px 20px rgba(0, 0, 0, 0.5);
/* ----------------------------------------------------------
TRANSITIONS
---------------------------------------------------------- */
--transition-fast : all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal : all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow : all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* ----------------------------------------------------------
GLASSMORPHISM
---------------------------------------------------------- */
--blur-glass : blur(20px) saturate(180%);
}
/* ============================================================
PART 2: Core Component Classes
============================================================ */
/* ----------------------------------------------------------
1. GLASS CARD
---------------------------------------------------------- */
/* Glass Card — Exact Spec:
padding: 32px desktop / 20px mobile
border-radius: 24px
border: 1px solid rgba(0,212,255,0.15)
backdrop-filter: blur(20px) saturate(180%)
background: rgba(255,255,255,0.04) → hover: rgba(255,255,255,0.07)
*/
/* Glass card base - removed rotating border pseudo-element */
.glass-card {
background : var(--clr-bg-card);
backdrop-filter : var(--blur-glass);
-webkit-backdrop-filter: var(--blur-glass);
border : 1px solid var(--clr-border);
border-radius : var(--radius-lg); /* 24px */
padding : var(--card-pad-desktop);
transition : var(--transition-normal);
position : relative;
overflow : hidden;
}
.glass-card > * {
position: relative;
z-index: 1;
}
.glass-card:hover {
background : var(--clr-bg-card-hover);
/* The elegant hover effect is handled natively by assets/css/hover-effects.css */
}
@media (max-width: 767px) {
.glass-card { padding: var(--card-pad-mobile); }
}
/* ----------------------------------------------------------
2. BTN — PRIMARY (Gradient Accent)
---------------------------------------------------------- */
/* BTN PRIMARY — Exact Spec:
height: 52px (lg) | 44px (md) | 36px (sm)
padding-x: 32px (lg) | 24px (md) | 16px (sm)
border-radius: 9999px | font-size: 14px | font-weight: 600
letter-spacing: 1.5px | text-transform: uppercase
color: #00d4ff — primary buttons, progress bars, active nav
*/
.btn-primary {
display : inline-flex;
align-items : center;
justify-content : center;
gap : 8px;
height : var(--btn-h-lg); /* 52px */
background : var(--gradient-accent);
border : none;
border-radius : var(--radius-full);
padding : 0 32px;
font-family : var(--font-display);
font-size : 0.875rem; /* 14px */
font-weight : 600;
text-transform : uppercase;
letter-spacing : 1.5px;
color : var(--clr-text-primary);
cursor : pointer;
box-shadow : var(--shadow-neon-blue);
transition : var(--transition-fast);
text-decoration : none;
white-space : nowrap;
}
.btn-primary:hover {
transform : translateY(-2px) scale(1.03);
color : #ffffff;
text-shadow : 0 2px 4px rgba(0, 0, 0, 0.8);
box-shadow : 0 0 30px rgba(0, 212, 255, 0.7),
0 0 60px rgba(0, 212, 255, 0.4),
0 4px 20px rgba(0, 0, 0, 0.5);
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled{ opacity: 0.45; cursor: not-allowed; transform: none; }
/* Size modifiers */
.btn-primary.btn-md { height: var(--btn-h-md); padding: 0 24px; }
.btn-primary.btn-sm { height: var(--btn-h-sm); padding: 0 16px; font-size: 0.75rem; letter-spacing: 1px; }
/* ----------------------------------------------------------
3. BTN — SECONDARY (Outline / Ghost)
---------------------------------------------------------- */
.btn-secondary {
display : inline-flex;
align-items : center;
justify-content : center;
gap : 8px;
height : var(--btn-h-lg);
background : transparent;
border : 1px solid var(--clr-accent-blue);
border-radius : var(--radius-full);
padding : 0 32px;
font-family : var(--font-display);
font-size : 0.875rem;
font-weight : 600;
text-transform : uppercase;
letter-spacing : 1.5px;
color : var(--clr-accent-blue);
cursor : pointer;
transition : var(--transition-fast);
text-decoration : none;
white-space : nowrap;
position : relative;
overflow : hidden;
}
.btn-secondary::before {
content : '';
position : absolute;
inset : 0;
background : var(--gradient-accent);
opacity : 0;
transition : var(--transition-fast);
z-index : 0;
}
.btn-secondary:hover {
color : #ffffff;
text-shadow : 0 2px 4px rgba(0, 0, 0, 0.8);
border-color : transparent;
box-shadow : var(--shadow-neon-blue);
transform : translateY(-2px);
}
.btn-secondary:hover::before { opacity: 1; }
.btn-secondary > * { position: relative; z-index: 1; }
.btn-secondary:active { transform: scale(0.97); }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-secondary.btn-md { height: var(--btn-h-md); padding: 0 24px; }
.btn-secondary.btn-sm { height: var(--btn-h-sm); padding: 0 16px; font-size: 0.75rem; }
/* ----------------------------------------------------------
4. BTN — GOLD (Gradient Gold)
---------------------------------------------------------- */
/* BTN GOLD — Used for: CTA 'Register Now', certificates, XP prizes, Full-Stack/Expert badges */
.btn-gold {
display : inline-flex;
align-items : center;
justify-content : center;
gap : 8px;
height : var(--btn-h-lg);
background : var(--gradient-gold);
border : none;
border-radius : var(--radius-full);
padding : 0 32px;
font-family : var(--font-display);
font-size : 0.875rem;
font-weight : 600;
text-transform : uppercase;
letter-spacing : 1.5px;
color : #05050f;
cursor : pointer;
box-shadow : var(--shadow-neon-gold);
transition : var(--transition-fast);
text-decoration : none;
white-space : nowrap;
}
.btn-gold:hover {
transform : translateY(-2px) scale(1.03);
box-shadow : 0 0 15px rgba(255, 215, 0, 0.4),
0 0 30px rgba(255, 215, 0, 0.2),
0 4px 20px rgba(0, 0, 0, 0.5);
}
.btn-gold:active { transform: scale(0.97); }
.btn-gold:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-gold.btn-md { height: var(--btn-h-md); padding: 0 24px; }
.btn-gold.btn-sm { height: var(--btn-h-sm); padding: 0 16px; font-size: 0.75rem; }
/* ----------------------------------------------------------
5. NEON TEXT — Blue
---------------------------------------------------------- */
.neon-text {
color : var(--clr-accent-blue);
text-shadow : 0 0 10px rgba(0, 212, 255, 0.8),
0 0 30px rgba(0, 212, 255, 0.4);
}
/* ----------------------------------------------------------
6. NEON TEXT — Purple
---------------------------------------------------------- */
.neon-text-purple {
color : var(--clr-accent-purple);
text-shadow : 0 0 10px rgba(123, 47, 255, 0.8),
0 0 30px rgba(123, 47, 255, 0.4);
}
/* ----------------------------------------------------------
7. BADGE — Skill Tag
---------------------------------------------------------- */
.badge-skill {
display : inline-flex;
align-items : center;
gap : 6px;
background : rgba(0, 212, 255, 0.1);
border : 1px solid rgba(0, 212, 255, 0.3);
border-radius : var(--radius-full);
color : var(--clr-accent-blue);
font-family : var(--font-code);
font-size : 0.75rem;
font-weight : 500;
padding : 4px 12px;
transition : var(--transition-fast);
white-space : nowrap;
}
.badge-skill:hover {
background : rgba(0, 212, 255, 0.2);
border-color: rgba(0, 212, 255, 0.6);
box-shadow : 0 0 12px rgba(0, 212, 255, 0.3);
}
/* ----------------------------------------------------------
8. PROGRESS RING — SVG Container
---------------------------------------------------------- */
.progress-ring-container {
position : relative;
display : inline-flex;
align-items : center;
justify-content : center;
}
.progress-ring-container svg {
transform : rotate(-90deg);
filter : drop-shadow(0 0 6px rgba(0, 212, 255, 0.6))
drop-shadow(0 0 18px rgba(0, 212, 255, 0.3));
}
.progress-ring-container .progress-ring-track {
fill : none;
stroke : rgba(0, 212, 255, 0.1);
stroke-linecap : round;
}
.progress-ring-container .progress-ring-fill {
fill : none;
stroke : url(#ringGradient);
stroke-linecap : round;
transition : stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-ring-container .progress-ring-label {
position : absolute;
inset : 0;
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
font-family : var(--font-display);
font-weight : 700;
color : var(--clr-text-primary);
line-height : 1;
pointer-events : none;
}
.progress-ring-container .progress-ring-label .ring-value {
font-size : 1.4rem;
color : var(--clr-accent-blue);
text-shadow : 0 0 10px rgba(0, 212, 255, 0.6);
}
.progress-ring-container .progress-ring-label .ring-unit {
font-size : 0.65rem;
color : var(--clr-text-secondary);
margin-top: 2px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ----------------------------------------------------------
9. SECTION TITLE
---------------------------------------------------------- */
.section-title {
font-family : var(--font-display);
font-size : clamp(2rem, 5vw, 3.5rem);
font-weight : 900;
line-height : 1.1;
letter-spacing : -0.02em;
background : var(--gradient-accent);
-webkit-background-clip : text;
background-clip : text;
-webkit-text-fill-color : transparent;
color : transparent;
}
/* ----------------------------------------------------------
10. DIVIDER — Neon Gradient Line
---------------------------------------------------------- */
.divider-neon {
display : block;
width : 100%;
height : 1px;
border : none;
background: var(--gradient-accent);
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5),
0 0 20px rgba(123, 47, 255, 0.3);
margin : 0;
}
/* ============================================================
PART 3: Global Reset, Base Styles, Typography Scale,
Layout Utilities, Animations, Scrollbar,
Code Blocks & Form Elements
============================================================ */
/* ----------------------------------------------------------
1. GLOBAL RESET
---------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing : border-box;
margin : 0;
padding : 0;
}
html {
font-size : 16px;
scroll-behavior : smooth;
-webkit-text-size-adjust: 100%;
}
img,
video,
svg {
display : block;
max-width : 100%;
}
a {
color : inherit;
text-decoration : none;
}
button,
input,
select,
textarea {
font-family : inherit;
font-size : inherit;
border : none;
outline : none;
background : none;
}
ul,
ol {
list-style : none;
}
/* ----------------------------------------------------------
2. BASE BODY
---------------------------------------------------------- */
body {
font-family : var(--font-body);
font-size : 1rem;
font-weight : 400;
line-height : 1.7;
color : var(--clr-text-primary);
background-color : var(--clr-bg-primary);
background-image : var(--gradient-hero);
background-attachment: fixed;
min-height : 100vh;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
overflow-x : hidden;
}
/* ----------------------------------------------------------
3. TYPOGRAPHY SCALE
---------------------------------------------------------- */
/* Display / Hero */
.text-display {
font-family : var(--font-display);
font-size : clamp(3rem, 8vw, 6rem);
font-weight : 900;
line-height : 1.0;
letter-spacing : -0.03em;
}
/* Heading 1 */
.text-h1 {
font-family : var(--font-display);
font-size : clamp(2.25rem, 5vw, 4rem);
font-weight : 800;
line-height : 1.1;
letter-spacing : -0.02em;
}
/* Heading 2 */
.text-h2 {
font-family : var(--font-display);
font-size : clamp(1.75rem, 4vw, 3rem);
font-weight : 700;
line-height : 1.15;
letter-spacing : -0.01em;
}
/* Heading 3 */
.text-h3 {
font-family : var(--font-display);
font-size : clamp(1.25rem, 3vw, 2rem);
font-weight : 700;
line-height : 1.25;
}
/* Heading 4 */
.text-h4 {
font-family : var(--font-display);
font-size : clamp(1rem, 2vw, 1.375rem);
font-weight : 600;
line-height : 1.35;
}
/* Body Large */
.text-body-lg {
font-family : var(--font-body);
font-size : 1.125rem;
font-weight : 400;
line-height : 1.75;
color : var(--clr-text-secondary);
}
/* Body Default */
.text-body {
font-family : var(--font-body);
font-size : 1rem;
font-weight : 400;
line-height : 1.7;
color : var(--clr-text-secondary);
}
/* Body Small */
.text-body-sm {
font-family : var(--font-body);
font-size : 0.875rem;
font-weight : 400;
line-height : 1.6;
color : var(--clr-text-muted);
}
/* Label / Overline */
.text-label {
font-family : var(--font-display);
font-size : 0.7rem;
font-weight : 700;
text-transform : uppercase;
letter-spacing : 3px;
color : var(--clr-text-muted);
}
/* Code Inline */
.text-code {
font-family : var(--font-code);
font-size : 0.875em;
color : var(--clr-accent-blue);
background : rgba(0, 212, 255, 0.08);
border : 1px solid rgba(0, 212, 255, 0.2);
border-radius : var(--radius-sm);
padding : 2px 8px;
white-space : nowrap;
}
/* Gradient accent text helper */
.text-gradient {
background : var(--gradient-accent);
-webkit-background-clip : text;
background-clip : text;
-webkit-text-fill-color : transparent;
color : transparent;
}
.text-gradient-gold {
background : var(--gradient-gold);
-webkit-background-clip : text;
background-clip : text;
-webkit-text-fill-color : transparent;
color : transparent;
}
/* ----------------------------------------------------------
4. LAYOUT — Container & Grid System
---------------------------------------------------------- */
.container {
width : 100%;
max-width : 1280px;
margin : 0 auto;
padding : 0 24px;
}
.container-sm {
width : 100%;
max-width : 768px;
margin : 0 auto;
padding : 0 24px;
}
.container-lg {
width : 100%;
max-width : 1440px;
margin : 0 auto;
padding : 0 40px;
}
/* Flex helpers */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: 8px; }
.gap-sm { gap: 16px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 40px; }
.gap-xl { gap: 64px; }
/* Grid helpers */
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
/* Section spacing */
.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }
.section-lg { padding: 160px 0; }
/* ----------------------------------------------------------
5. KEYFRAME ANIMATIONS
---------------------------------------------------------- */
/* Neon pulse — for glowing elements */
@keyframes neon-pulse {
0%, 100% {
box-shadow : 0 0 20px rgba(0, 212, 255, 0.4),
0 0 60px rgba(0, 212, 255, 0.2);
}
50% {
box-shadow : 0 0 40px rgba(0, 212, 255, 0.8),
0 0 100px rgba(0, 212, 255, 0.4),
0 0 160px rgba(123, 47, 255, 0.2);
}
}
/* Gentle float — for hero elements / cards */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-12px); }
}
/* Shimmer — for skeleton loaders & highlights */
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Scan line — futuristic CRT-style sweep */
@keyframes scan-line {
0% { top: -5%; }
100% { top: 105%; }
}
/* Gradient shift — for animated gradient backgrounds */
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Fade in */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Fade in up */
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
/* Fade in down */
@keyframes fade-in-down {
from { opacity: 0; transform: translateY(-32px); }
to { opacity: 1; transform: translateY(0); }
}
/* Fade in left */
@keyframes fade-in-left {
from { opacity: 0; transform: translateX(-32px); }
to { opacity: 1; transform: translateX(0); }
}
/* Fade in right */
@keyframes fade-in-right {
from { opacity: 0; transform: translateX(32px); }
to { opacity: 1; transform: translateX(0); }
}
/* Zoom in */
@keyframes zoom-in {
from { opacity: 0; transform: scale(0.88); }
to { opacity: 1; transform: scale(1); }
}
/* Spin — for loader icons */
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Blink caret — for terminal cursor */
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ----------------------------------------------------------
ANIMATION UTILITY CLASSES
---------------------------------------------------------- */
.anim-float { animation: float 6s ease-in-out infinite; }
.anim-pulse-neon { animation: neon-pulse 2s ease-in-out infinite; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-blink { animation: blink 1s step-end infinite; }
.anim-fade-in { animation: fade-in 0.6s ease forwards; }
.anim-fade-in-up { animation: fade-in-up 0.6s ease forwards; }
.anim-fade-in-down { animation: fade-in-down 0.6s ease forwards; }
.anim-zoom-in { animation: zoom-in 0.5s ease forwards; }
/* Stagger delay helpers */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }
.anim-delay-6 { animation-delay: 0.6s; }
/* Shimmer loader */
.shimmer {
background : linear-gradient(
90deg,
rgba(255,255,255,0.04) 25%,
rgba(0,212,255,0.08) 50%,
rgba(255,255,255,0.04) 75%
);
background-size : 200% 100%;
animation : shimmer 1.8s infinite;
border-radius : var(--radius-sm);
}
/* ----------------------------------------------------------
6. CUSTOM SCROLLBAR
---------------------------------------------------------- */
::-webkit-scrollbar {
width : 6px;
height : 6px;
}
::-webkit-scrollbar-track {
background : var(--clr-bg-secondary);
border-radius : var(--radius-full);
}
::-webkit-scrollbar-thumb {
background : linear-gradient(180deg, var(--clr-accent-blue), var(--clr-accent-purple));
border-radius : var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background : var(--clr-accent-blue);
box-shadow : 0 0 8px rgba(0, 212, 255, 0.5);
}
/* Firefox */
* {
scrollbar-width : thin;
scrollbar-color : var(--clr-accent-blue) var(--clr-bg-secondary);
}
/* ----------------------------------------------------------
7. CODE BLOCK
---------------------------------------------------------- */
.code-block {
position : relative;
background : rgba(0, 0, 0, 0.6);
border : 1px solid var(--clr-border);
border-radius : var(--radius-md);
padding : 24px;
overflow : auto;
font-family : var(--font-code);
font-size : 0.875rem;
line-height : 1.75;
color : var(--clr-text-secondary);
tab-size : 2;
}
.code-block::before {
content : '';
position : absolute;
top : 0;
left : 0;
right : 0;
height : 40px;
background : rgba(0, 212, 255, 0.04);
border-bottom : 1px solid var(--clr-border);
border-radius : var(--radius-md) var(--radius-md) 0 0;
}
/* Traffic-light dots */
.code-block-header {
position : relative;
display : flex;
align-items : center;
gap : 6px;
margin-bottom : 20px;
padding-bottom: 16px;
border-bottom : 1px solid var(--clr-border);
}
.code-block-dot {
width : 12px;
height : 12px;
border-radius : var(--radius-full);
}
.code-block-dot--red { background: #ff5f57; }
.code-block-dot--yellow { background: #ffbd2e; }
.code-block-dot--green { background: #28c841; }
.code-block-lang {
margin-left : auto;
font-family : var(--font-code);
font-size : 0.7rem;
color : var(--clr-text-muted);
text-transform : uppercase;
letter-spacing : 2px;
}
/* Syntax colour helpers */
.token-keyword { color: var(--clr-accent-purple); font-weight: 600; }
.token-string { color: var(--clr-accent-green); }
.token-comment { color: var(--clr-text-muted); font-style: italic; }
.token-function { color: var(--clr-accent-blue); }
.token-number { color: var(--clr-accent-gold); }
.token-operator { color: var(--clr-accent-red); }
/* Copy button inside code block */
.code-copy-btn {
position : absolute;
top : 10px;
right : 12px;
background : rgba(0, 212, 255, 0.1);
border : 1px solid rgba(0, 212, 255, 0.25);
border-radius : var(--radius-sm);
color : var(--clr-accent-blue);
font-family : var(--font-code);
font-size : 0.7rem;
padding : 4px 10px;
cursor : pointer;
transition : var(--transition-fast);
z-index : 1;
}
.code-copy-btn:hover {
background : rgba(0, 212, 255, 0.25);
box-shadow : 0 0 10px rgba(0, 212, 255, 0.3);
}
/* ----------------------------------------------------------
8. FORM ELEMENTS
---------------------------------------------------------- */
/* Input / Textarea */
.form-input,
.form-textarea,
.form-select {
width : 100%;
background : rgba(255, 255, 255, 0.04);
border : 1px solid var(--clr-border);
border-radius : var(--radius-md);
padding : 14px 20px;
font-family : var(--font-body);
font-size : 0.9375rem;
color : var(--clr-text-primary);
transition : var(--transition-fast);
backdrop-filter : var(--blur-glass);
-webkit-backdrop-filter: var(--blur-glass);
}
.form-input::placeholder,
.form-textarea::placeholder {
color : var(--clr-text-muted);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
border-color : var(--clr-accent-blue);
box-shadow : 0 0 0 3px rgba(0, 212, 255, 0.12),
var(--shadow-neon-blue);
outline : none;
}
.form-textarea {
resize : vertical;
min-height : 140px;
line-height: 1.7;
}
.form-select {
cursor : pointer;
-webkit-appearance : none;
appearance : none;
background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat : no-repeat;
background-position : right 16px center;
padding-right : 44px;
}
/* Form label */
.form-label {
display : block;
font-family : var(--font-display);
font-size : 0.75rem;
font-weight : 600;
text-transform : uppercase;
letter-spacing : 1.5px;
color : var(--clr-text-secondary);
margin-bottom : 8px;
}
/* Form group */
.form-group {
display : flex;
flex-direction : column;
gap : 8px;
}
/* Form error state */
.form-input--error,
.form-textarea--error {
border-color : var(--clr-accent-red);
box-shadow : 0 0 0 3px rgba(255, 51, 102, 0.12);
}
.form-error-msg {
font-family : var(--font-code);
font-size : 0.75rem;
color : var(--clr-accent-red);
margin-top : 4px;
}
/* Form success state */
.form-input--success {
border-color : var(--clr-accent-green);
box-shadow : 0 0 0 3px rgba(0, 255, 136, 0.12);
}
/* Toggle / Switch */
.form-toggle {
position : relative;
display : inline-block;
width : 52px;
height : 28px;
flex-shrink: 0;
}
.form-toggle input {
opacity : 0;
width : 0;
height : 0;
position : absolute;
}
.form-toggle-track {
position : absolute;
inset : 0;
background : var(--clr-bg-secondary);
border : 1px solid var(--clr-border);
border-radius : var(--radius-full);
cursor : pointer;
transition : var(--transition-fast);
}
.form-toggle-track::after {
content : '';
position : absolute;
top : 3px;
left : 3px;
width : 20px;
height : 20px;
background : var(--clr-text-muted);
border-radius : var(--radius-full);
transition : var(--transition-fast);
}
.form-toggle input:checked + .form-toggle-track {
background : rgba(0, 212, 255, 0.15);
border-color : var(--clr-accent-blue);
box-shadow : 0 0 12px rgba(0, 212, 255, 0.3);
}
.form-toggle input:checked + .form-toggle-track::after {
left : calc(100% - 23px);
background : var(--clr-accent-blue);
box-shadow : 0 0 8px rgba(0, 212, 255, 0.6);
}
/* ============================================================
PART 4 (FINAL): Responsive Breakpoints
Follows Bootstrap 5 breakpoint system exactly.
============================================================ */
/* ----------------------------------------------------------
XS — Extra Small: <576px
Default / mobile-first base styles live above.
All rules here apply ONLY when viewport < 576px.
---------------------------------------------------------- */
@media (max-width: 575.98px) {
/* Container */
.container,
.container-sm,
.container-lg {
padding : 0 16px;
}
/* Typography scale down */
.text-display { font-size: clamp(2rem, 10vw, 3rem); }
.text-h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
.text-h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
.text-h3 { font-size: clamp(1.25rem, 6vw, 1.75rem);}
.section-title{ font-size: clamp(1.75rem, 8vw, 2.5rem); }
/* Grid collapse to 1 col */
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
/* Section spacing */
.section { padding: 60px 0; }
.section-sm { padding: 40px 0; }
.section-lg { padding: 80px 0; }
/* Buttons full-width on mobile */
.btn-primary,
.btn-secondary,
.btn-gold {
width : 100%;
padding : 14px 24px;
}
/* Gaps shrink */
.gap-lg { gap: 24px; }
.gap-xl { gap: 40px; }
}
/* ----------------------------------------------------------
SM — Small: >=576px
---------------------------------------------------------- */
@media (min-width: 576px) {
.container,
.container-sm {
max-width : 540px;
padding : 0 20px;
}
/* Grid: sm gets 2-col max */
.grid-3,
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
/* Section spacing */
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 120px 0; }
}
/* ----------------------------------------------------------
MD — Medium: >=768px (tablets)
---------------------------------------------------------- */
@media (min-width: 768px) {
.container,
.container-sm {
max-width : 720px;
}
.container-lg {
padding : 0 32px;
}
/* Grid: md gets correct columns */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
/* Typography resumes fluid scale */
.text-display { font-size: clamp(2.5rem, 7vw, 5rem); }
.text-h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
/* Section spacing */
.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }
.section-lg { padding: 140px 0; }
/* Buttons revert to auto width */
.btn-primary,
.btn-secondary,
.btn-gold {
width : auto;
}
}
/* ----------------------------------------------------------
LG — Large: >=992px (laptops)
---------------------------------------------------------- */
@media (min-width: 992px) {
.container {
max-width : 960px;
}
.container-lg {
max-width : 1140px;
padding : 0 40px;
}
/* Grid: lg gets full column counts */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
/* Section spacing */
.section { padding: 120px 0; }
.section-sm { padding: 72px 0; }
.section-lg { padding: 160px 0; }
}
/* ----------------------------------------------------------
XL — Extra Large: >=1200px (desktops)
---------------------------------------------------------- */
@media (min-width: 1200px) {
.container {
max-width : 1140px;
}
.container-lg {
max-width : 1320px;
}
/* Grid: xl resolves 4-col layouts */
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Section spacing */
.section { padding: 140px 0; }
.section-sm { padding: 80px 0; }
.section-lg { padding: 180px 0; }
}
/* ----------------------------------------------------------
XXL — Extra Extra Large: >=1400px (wide screens)
---------------------------------------------------------- */
@media (min-width: 1400px) {
.container {
max-width : 1280px;
}
.container-lg {
max-width : 1440px;
padding : 0 48px;
}
/* Section spacing — maximum breathing room */
.section { padding: 160px 0; }
.section-sm { padding: 100px 0; }
.section-lg { padding: 220px 0; }
/* Typography full scale at widest viewport */
.text-display { font-size: 6rem; }
.text-h1 { font-size: 4rem; }
.text-h2 { font-size: 3rem; }
.text-h3 { font-size: 2rem; }
.section-title{ font-size: 3.5rem; }
}
/* ============================================================
REQUIRED EXTERNAL LIBRARIES — CDN LINKS
Copy the block below into the (CSS) and end of
(JS) of every Skilvex HTML page.
============================================================
── CSS (paste inside , before your own stylesheets) ──
── JS (paste just before closing tag) ──
── Library Purposes ──
Bootstrap 5.3 → Grid system, utility classes, UI components
Bootstrap Icons → Icon font library (bi-*)
AOS 2.3.1 → Scroll-triggered entrance animations
Swiper 11 → Touch-enabled carousels & sliders
GSAP 3.12.2 → Advanced timeline & motion animations
ScrollTrigger → GSAP plugin for scroll-linked animations
Three.js r128 → 3D WebGL scenes & particle meshes
Particles.js 2.0 → Configurable particle background canvas
Chart.js 4.4 → Animated data visualisation charts
CountUp.js 2.8 → Animated number counter on scroll
DOMPurify 3.0.6 → XSS sanitisation (OWASP compliance)
Typed.js 2.1 → Typewriter text animation effect
Vanilla Tilt 1.8.1 → Smooth 3D tilt effect on hover
============================================================ */
/* ============================================================
PART 7: TYPOGRAPHY SCALE — Exact Spec
============================================================ */
/* H1 Hero: clamp(2.5rem, 6vw, 5rem) | Orbitron 900 | line-height 1.1 */
h1, .h1, .heading-hero {
font-family : var(--font-display);
font-size : clamp(2.5rem, 6vw, 5rem);
font-weight : 900;
line-height : 1.1;
letter-spacing: -0.5px;
}
/* H2 Section Titles: clamp(2rem, 4vw, 3rem) | Orbitron 700 | line-height 1.2 */
h2, .h2, .section-heading {
font-family : var(--font-display);
font-size : clamp(2rem, 4vw, 3rem);
font-weight : 700;
line-height : 1.2;
}
/* H3 Card Titles: 1.5rem (24px) | Orbitron 600 | line-height 1.3 */
h3, .h3, .card-title {
font-family : var(--font-display);
font-size : 1.5rem; /* 24px */
font-weight : 600;
line-height : 1.3;
color : var(--clr-accent-blue); /* H3 uses Electric Blue per spec */
}
/* H4 Sub-headings: 1.125rem (18px) | Inter 600 | line-height 1.4 */
h4, .h4, .sub-heading {
font-family : var(--font-body);
font-size : 1.125rem; /* 18px */
font-weight : 600;
line-height : 1.4;
color : var(--clr-accent-blue); /* H4 also uses Electric Blue per spec */
}
/* Body Large: 1.125rem (18px) | Inter 400 | line-height 1.7 */
.body-lg {
font-family : var(--font-body);
font-size : 1.125rem;
font-weight : 400;
line-height : 1.7;
}
/* Body Normal: 1rem (16px) | Inter 400 | line-height 1.6 */
body, .body-md {
font-family : var(--font-body);
font-size : 1rem;
font-weight : 400;
line-height : 1.6;
}
/* Body Small: 0.875rem (14px) | Inter 400 | line-height 1.5 */
.body-sm, small {
font-family : var(--font-body);
font-size : 0.875rem;
font-weight : 400;
line-height : 1.5;
}
/* Caption / Badge: 0.75rem (12px) | Inter 500 | letter-spacing 0.5px */
.caption, .badge-text {
font-family : var(--font-body);
font-size : 0.75rem;
font-weight : 500;
letter-spacing : 0.5px;
}
/* Code / Numbers: Fira Code for all numeric rendering */
.code-text, .num-text,
[data-stat], [data-counter],
.fira { font-family: var(--font-code); }
/* ============================================================
PART 8: NAVBAR — Exact Spec
height: 80px | fixed top | z-index 9999
padding: 0 48px desktop | 0 16px mobile
scroll >80px: background rgba(5,5,15,0.95) + backdrop blur(20px)
============================================================ */
.skilvex-nav {
position : fixed;
top : 0;
left : 0;
right : 0;
height : var(--nav-h); /* 80px */
z-index : 9999;
display : flex;
align-items : center;
padding : 0 48px;
background : rgba(5, 5, 15, 0.6);
backdrop-filter : blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom : 1px solid rgba(0, 212, 255, 0.08);
transition : background 0.4s ease, box-shadow 0.4s ease;
}
/* Applied via JS when scrollY > 80 */
.skilvex-nav.scrolled {
background : rgba(5, 5, 15, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow : 0 4px 24px rgba(0, 0, 0, 0.5),
0 1px 0 rgba(0, 212, 255, 0.1);
}
@media (max-width: 767px) {
.skilvex-nav { padding: 0 16px; }
}
/* Pushes content below fixed nav */
.nav-spacer { height: var(--nav-h); }
/* ============================================================
PART 9: SECTION UTILITIES — Exact Spec
Landing sections: padding-top 120px | padding-bottom 120px
Heading ↔ content gap: 48px
============================================================ */
.section-pad {
padding-top : var(--section-pt); /* 120px */
padding-bottom : var(--section-pb); /* 120px */
}
.section-pad-sm {
padding-top : 80px;
padding-bottom : 80px;
}
/* Heading-to-content gap */
.section-body {
margin-top : var(--heading-gap); /* 48px */
}
/* ============================================================
PART 10: FOOTER — Exact Spec
padding-top: 80px | padding-bottom: 40px
border-top: 1px solid rgba(0,212,255,0.1)
============================================================ */
.skilvex-footer {
padding-top : 80px;
padding-bottom: 40px;
border-top : 1px solid rgba(0, 212, 255, 0.1);
background : var(--clr-bg-primary);
}
/* ============================================================
PART 11: GLOW UTILITIES — Exact Spec
============================================================ */
/* Text Neon Blue */
.text-neon-blue {
color : var(--clr-accent-blue);
text-shadow : 0 0 8px rgba(0, 212, 255, 0.8),
0 0 20px rgba(0, 212, 255, 0.4);
}
/* Text Neon Purple */
.text-neon-purple {
color : var(--clr-accent-purple);
text-shadow : 0 0 8px rgba(123, 47, 255, 0.8),
0 0 20px rgba(123, 47, 255, 0.4);
}
/* Text Neon Gold */
.text-neon-gold {
color : var(--clr-accent-gold);
text-shadow : 0 0 8px rgba(255, 215, 0, 0.8),
0 0 20px rgba(255, 215, 0, 0.4);
}
/* Text Neon Green */
.text-neon-green {
color : var(--clr-accent-green);
text-shadow : 0 0 8px rgba(0, 255, 136, 0.8),
0 0 20px rgba(0, 255, 136, 0.4);
}
/* ============================================================
PART 12: STATUS BADGE CLASSES — Per Color Usage Spec
============================================================ */
/* Active / Online — Electric Blue (#00d4ff) */
.badge-active, .badge-online {
background : rgba(0, 212, 255, 0.12);
border : 1px solid rgba(0, 212, 255, 0.35);
color : var(--clr-accent-blue);
padding : 3px 10px;
border-radius: var(--radius-full);
font-size : 0.75rem;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Online pulse dot */
.badge-online::before {
content : '';
display : inline-block;
width : 7px;
height : 7px;
border-radius: 50%;
background : var(--clr-accent-green); /* Online = Green */
margin-left : 6px;
animation : pulse-dot 1.5s ease-in-out infinite;
box-shadow : 0 0 6px var(--clr-accent-green);
}
@keyframes pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
/* Completed — Green (#00ff88) */
.badge-completed, .badge-free, .badge-committed {
background : rgba(0, 255, 136, 0.12);
border : 1px solid rgba(0, 255, 136, 0.35);
color : var(--clr-accent-green);
padding : 3px 10px;
border-radius: var(--radius-full);
font-size : 0.75rem;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Error / Late / Banned / Urgent — Red (#ff3366) */
.badge-error, .badge-late, .badge-banned,
.badge-urgent, .badge-locked {
background : rgba(255, 51, 102, 0.12);
border : 1px solid rgba(255, 51, 102, 0.35);
color : var(--clr-accent-red);
padding : 3px 10px;
border-radius: var(--radius-full);
font-size : 0.75rem;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Advanced / Expert / Full-Stack — Gold (#ffd700) */
.badge-expert, .badge-fullstack, .badge-premium,
.badge-popular, .badge-gold {
background : rgba(255, 215, 0, 0.1);
border : 1px solid rgba(255, 215, 0, 0.35);
color : var(--clr-accent-gold);
padding : 3px 10px;
border-radius: var(--radius-full);
font-size : 0.75rem;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Advanced / Backend / Security — Purple (#7b2fff) */
.badge-advanced, .badge-backend, .badge-security {
background : rgba(123, 47, 255, 0.12);
border : 1px solid rgba(123, 47, 255, 0.35);
color : var(--clr-accent-purple);
padding : 3px 10px;
border-radius: var(--radius-full);
font-size : 0.75rem;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Loading Spinner — Electric Blue */
.spinner-neon {
width : 36px;
height : 36px;
border : 3px solid rgba(0, 212, 255, 0.15);
border-top : 3px solid var(--clr-accent-blue);
border-radius: 50%;
animation : spin 0.8s linear infinite;
box-shadow : 0 0 12px rgba(0, 212, 255, 0.4);
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ============================================================
PART 13: PARTICLES.JS CONFIGURATION — Exact Spec
Initialize with: particlesJS('particles-id', SKILVEX_PARTICLES_CONFIG)
On mobile (<768px): override "number.value" to 60
JSON Config:
{
"particles": {
"number": { "value": 180, "density": { "enable": true, "value_area": 1000 } },
"color": { "value": ["#00d4ff", "#7b2fff", "#ffffff"] },
"shape": { "type": "circle" },
"opacity": { "value": 0.4, "random": true,
"anim": { "enable": true, "speed": 0.5, "opacity_min": 0.1 }
},
"size": { "value": 2, "random": true,
"anim": { "enable": true, "speed": 1, "size_min": 0.5 }
},
"line_linked": {
"enable": true, "distance": 150,
"color": "#00d4ff", "opacity": 0.1, "width": 1
},
"move": {
"enable": true, "speed": 0.8, "direction": "none",
"random": true, "straight": false, "out_mode": "bounce"
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": { "enable": true, "mode": "grab" },
"onclick": { "enable": true, "mode": "push" }
},
"modes": {
"grab": { "distance": 200, "line_linked": { "opacity": 0.4 } },
"push": { "particles_nb": 3 }
}
},
"retina_detect": true
}
============================================================ */
/* Particles canvas container */
#particles-js,
.particles-container {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 0;
pointer-events: none;
}
/* Ensure page content sits above particles canvas */
.particles-container + * { position: relative; z-index: 1; }