/* * themes.css — 5 visual themes for JenFreelance * Controlled via data-theme attribute on * Default (futuristic) = no attribute */ /* ── CSS CUSTOM PROPERTIES — inherited through Shadow DOM ──────── */ :root { --nav-bg: rgba(17,24,39,0.8); --nav-bg-solid: rgba(17,24,39,0.95); --nav-border: rgba(255,255,255,0.1); --accent: #8b5cf6; --accent-hover: #a78bfa; --nav-text: white; --nav-font: inherit; --nav-logo-size: 1.5rem; --nav-link-size: 1rem; --footer-bg: #111827; --footer-text: white; --footer-muted: #9ca3af; } [data-theme="pixel"] { --nav-bg: rgba(5,5,16,0.92); --nav-bg-solid: rgba(5,5,16,0.98); --nav-border: rgba(0,255,255,0.3); --accent: #ff0090; --accent-hover: #00ffff; --nav-text: #00ffff; --nav-font: 'Press Start 2P', monospace; --nav-logo-size: 0.82rem; --nav-link-size: 0.54rem; --footer-bg: #050510; --footer-text: #00ffff; --footer-muted: rgba(170,255,0,0.7); } [data-theme="comic"] { --nav-bg: rgba(255,245,192,0.94); --nav-bg-solid: rgba(255,245,192,0.98); --nav-border: rgba(26,26,26,0.75); --accent: #e60026; --accent-hover: #0044cc; --nav-text: #1a1a1a; --nav-font: 'Bangers', cursive; --nav-logo-size: 1.8rem; --nav-link-size: 1.3rem; --footer-bg: #fff5c0; --footer-text: #1a1a1a; --footer-muted: #555; } [data-theme="encyclopedia"] { --nav-bg: rgba(244,241,234,0.94); --nav-bg-solid: rgba(244,241,234,0.98); --nav-border: rgba(139,115,85,0.55); --accent: #6b4e28; --accent-hover: #4a3520; --nav-text: #2c2416; --nav-font: 'Playfair Display', serif; --nav-logo-size: 1.4rem; --nav-link-size: 0.9rem; --footer-bg: #f4f1ea; --footer-text: #2c2416; --footer-muted: #6b5c48; } [data-theme="acid"] { --nav-bg: rgba(6,6,0,0.94); --nav-bg-solid: rgba(6,6,0,0.98); --nav-border: rgba(255,255,0,0.28); --accent: #00ff41; --accent-hover: #ffff00; --nav-text: #ffff00; --nav-font: 'Anton', sans-serif; --nav-logo-size: 1.5rem; --nav-link-size: 0.85rem; --footer-bg: #060600; --footer-text: #ffff00; --footer-muted: rgba(255,255,0,0.6); } /* ── SHARED TRANSITION ─────────────────────────────────────────── */ body, section, article, div, h1, h2, h3, h4, p, a, button, input, textarea, select, span { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* ════════════════════════════════════════════════════════════════ THEME 2 — PIXEL / NÉON 80-90 ════════════════════════════════════════════════════════════════ */ [data-theme="pixel"] body { background-color: #050510 !important; color: #00ffff !important; font-family: 'Press Start 2P', monospace !important; font-size: 0.6rem !important; } [data-theme="pixel"] p, [data-theme="pixel"] li, [data-theme="pixel"] label, [data-theme="pixel"] span:not(.tsw-icon) { font-size: 0.58rem !important; line-height: 2.4 !important; } /* CRT scanlines overlay */ [data-theme="pixel"] body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.022) 2px, rgba(0, 255, 255, 0.022) 4px ); pointer-events: none; z-index: 9997; mix-blend-mode: screen; } @keyframes pixelFlicker { 0%, 93%, 100% { opacity: 1; } 94% { opacity: 0.75; } 95% { opacity: 1; } 97% { opacity: 0.5; } 98% { opacity: 1; } } @keyframes pixelGlitch { 0%, 90%, 100% { transform: translateX(0) skewX(0deg); clip-path: none; } 91% { transform: translateX(-3px) skewX(-2deg); } 92% { transform: translateX(3px) skewX(2deg); } 93% { transform: translateX(0); } } [data-theme="pixel"] h1 { font-family: 'Press Start 2P', monospace !important; font-size: clamp(0.7rem, 1.6vw, 1.1rem) !important; color: #ff0090 !important; text-shadow: none !important; line-height: 2.2 !important; animation: pixelFlicker 9s infinite, pixelGlitch 12s infinite; letter-spacing: 0.03em !important; } [data-theme="pixel"] h1 span { color: #00ffff !important; text-shadow: none !important; } [data-theme="pixel"] h2 { font-family: 'Press Start 2P', monospace !important; font-size: clamp(0.52rem, 1.1vw, 0.82rem) !important; color: #00ffff !important; text-shadow: none !important; line-height: 2.2 !important; letter-spacing: 0.02em !important; } [data-theme="pixel"] h3 { font-family: 'Press Start 2P', monospace !important; font-size: 0.5rem !important; color: #aaff00 !important; text-shadow: none !important; line-height: 2.2 !important; } [data-theme="pixel"] h4 { font-family: 'Press Start 2P', monospace !important; font-size: 0.44rem !important; color: #00ffff !important; } [data-theme="pixel"] .text-purple-400 { color: #ff0090 !important; } [data-theme="pixel"] .text-purple-300 { color: #ff0090 !important; } [data-theme="pixel"] .text-purple-200 { color: #ff80c8 !important; } [data-theme="pixel"] .text-gray-400, [data-theme="pixel"] .text-gray-300 { color: rgba(170,255,0,0.75) !important; } [data-theme="pixel"] .text-gray-100, [data-theme="pixel"] .text-white { color: #00ffff !important; } [data-theme="pixel"] .bg-gray-900 { background-color: #050510 !important; } [data-theme="pixel"] .bg-gray-800 { background-color: #0d0d22 !important; border: 1px solid rgba(0,255,255,0.35) !important; box-shadow: 0 0 18px rgba(0,255,255,0.12), inset 0 0 30px rgba(255,0,144,0.05) !important; } [data-theme="pixel"] .bg-purple-600 { background-color: transparent !important; border: 2px solid #ff0090 !important; color: #ff0090 !important; box-shadow: 0 0 14px rgba(255,0,144,0.5), inset 0 0 18px rgba(255,0,144,0.1) !important; font-family: 'Press Start 2P', monospace !important; font-size: 0.55rem !important; letter-spacing: 0.05em !important; } [data-theme="pixel"] .bg-purple-600:hover { background-color: rgba(255,0,144,0.15) !important; box-shadow: 0 0 26px #ff0090, inset 0 0 26px rgba(255,0,144,0.2) !important; } [data-theme="pixel"] .border-purple-500, [data-theme="pixel"] .border-l-4 { border-color: #00ffff !important; box-shadow: -4px 0 12px rgba(0,255,255,0.4) !important; } [data-theme="pixel"] .bg-purple-900\/30 { background-color: rgba(255,0,144,0.1) !important; border-color: #ff0090 !important; } [data-theme="pixel"] .bg-purple-600.rounded-lg { background: linear-gradient(135deg, rgba(255,0,144,0.2), rgba(0,255,255,0.1)) !important; border-color: #00ffff !important; color: #00ffff !important; } [data-theme="pixel"] .rounded-full.bg-gray-800 { background-color: #0d0d22 !important; border-color: rgba(170,255,0,0.4) !important; } [data-theme="pixel"] input, [data-theme="pixel"] textarea, [data-theme="pixel"] select { background-color: #0d0d22 !important; color: #00ffff !important; border: 1px solid rgba(0,255,255,0.4) !important; font-family: 'Press Start 2P', monospace !important; font-size: 0.55rem !important; } [data-theme="pixel"] #hero { background-color: #050510 !important; } [data-theme="pixel"] #vanta-globe { filter: hue-rotate(210deg) saturate(1.6) brightness(0.7); } [data-theme="pixel"] custom-navbar { border-bottom: 1px solid rgba(0,255,255,0.25) !important; box-shadow: 0 2px 30px rgba(0,255,255,0.15) !important; } [data-theme="pixel"] img { filter: hue-rotate(180deg) saturate(0.8) !important; } /* ════════════════════════════════════════════════════════════════ THEME 3 — BD ANIMÉ / COMIC ════════════════════════════════════════════════════════════════ */ [data-theme="comic"] body { background-color: #fff5c0 !important; color: #1a1a1a !important; font-family: 'Comic Neue', cursive !important; } /* Halftone dots */ [data-theme="comic"] body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle, rgba(26,26,26,0.1) 1px, transparent 1px); background-size: 14px 14px; pointer-events: none; z-index: 0; } @keyframes comicPop { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } [data-theme="comic"] h1 { font-family: 'Bangers', cursive !important; font-size: clamp(2.5rem, 7vw, 5rem) !important; color: #e60026 !important; -webkit-text-stroke: 2px #1a1a1a; text-shadow: 5px 5px 0 #1a1a1a !important; letter-spacing: 0.05em !important; line-height: 1.15 !important; } [data-theme="comic"] h1 span { color: #0044cc !important; -webkit-text-stroke: 2px #1a1a1a; text-shadow: 4px 4px 0 #1a1a1a !important; } [data-theme="comic"] h2 { font-family: 'Bangers', cursive !important; font-size: clamp(1.6rem, 4vw, 2.8rem) !important; color: #e60026 !important; -webkit-text-stroke: 1.5px #1a1a1a; text-shadow: 3px 3px 0 #1a1a1a !important; letter-spacing: 0.05em !important; line-height: 1.2 !important; } [data-theme="comic"] h3 { font-family: 'Bangers', cursive !important; color: #0044cc !important; font-size: 1.4rem !important; letter-spacing: 0.04em !important; -webkit-text-stroke: 0.5px #1a1a1a; } [data-theme="comic"] h4 { font-family: 'Comic Neue', cursive !important; font-weight: 700 !important; color: #1a1a1a !important; } [data-theme="comic"] .text-purple-400 { color: #0044cc !important; } [data-theme="comic"] .text-purple-300, [data-theme="comic"] .text-purple-200 { color: #0044cc !important; } [data-theme="comic"] .text-gray-400, [data-theme="comic"] .text-gray-300 { color: #555 !important; } [data-theme="comic"] .text-gray-100, [data-theme="comic"] .text-white { color: #1a1a1a !important; } [data-theme="comic"] .bg-gray-900 { background-color: #fff5c0 !important; color: #1a1a1a !important; } [data-theme="comic"] .bg-gray-800 { background-color: #ffffff !important; border: 3px solid #1a1a1a !important; box-shadow: 6px 6px 0 #1a1a1a !important; color: #1a1a1a !important; } [data-theme="comic"] .bg-gray-800 p, [data-theme="comic"] .bg-gray-800 span:not(.text-purple-400), [data-theme="comic"] .bg-gray-800 li, [data-theme="comic"] .bg-gray-800 strong { color: #1a1a1a !important; } [data-theme="comic"] .bg-purple-600 { background-color: #e60026 !important; color: #fff !important; border: 2px solid #1a1a1a !important; box-shadow: 4px 4px 0 #1a1a1a !important; font-family: 'Bangers', cursive !important; letter-spacing: 0.08em !important; border-radius: 4px !important; } [data-theme="comic"] .bg-purple-600:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #1a1a1a !important; background-color: #c40020 !important; } [data-theme="comic"] .border-purple-500, [data-theme="comic"] .border-l-4 { border-color: #e60026 !important; } [data-theme="comic"] .bg-purple-900\/30 { background-color: rgba(230,0,38,0.08) !important; border-color: #e60026 !important; } [data-theme="comic"] .rounded-full.bg-gray-800 { background-color: #fff !important; border: 2px solid #1a1a1a !important; box-shadow: 2px 2px 0 #1a1a1a !important; color: #1a1a1a !important; } [data-theme="comic"] input, [data-theme="comic"] textarea, [data-theme="comic"] select { background-color: #fff !important; color: #1a1a1a !important; border: 2px solid #1a1a1a !important; font-family: 'Comic Neue', cursive !important; } [data-theme="comic"] strong { color: #e60026 !important; } [data-theme="comic"] #vanta-globe { display: none !important; } [data-theme="comic"] #hero { background-color: #fff5c0 !important; background-image: radial-gradient(circle, rgba(26,26,26,0.12) 1px, transparent 1px) !important; background-size: 14px 14px !important; } [data-theme="comic"] custom-navbar { background-color: rgba(255,245,192,0.92) !important; border-bottom: 3px solid #1a1a1a !important; box-shadow: 0 3px 0 #1a1a1a !important; } [data-theme="comic"] .bg-gradient-to-r { background: #e60026 !important; border: 2px solid #1a1a1a !important; box-shadow: 4px 4px 0 #1a1a1a !important; } /* Speech bubble decoration on hero */ [data-theme="comic"] #hero::after { content: 'POW!'; position: absolute; top: 15%; right: 5%; font-family: 'Bangers', cursive; font-size: clamp(2rem, 5vw, 4rem); color: #ffcc00; -webkit-text-stroke: 2px #1a1a1a; text-shadow: 4px 4px 0 #1a1a1a; transform: rotate(12deg); pointer-events: none; z-index: 5; } /* ════════════════════════════════════════════════════════════════ THEME 4 — VIEUX MANUEL DE SCIENCE / ENCYCLOPÉDIE 19ème ════════════════════════════════════════════════════════════════ */ /* SVG grain overlay */ [data-theme="encyclopedia"] body::after { content: ''; position: fixed; inset: 0; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 300px 300px; pointer-events: none; z-index: 9998; mix-blend-mode: multiply; } [data-theme="encyclopedia"] body { background-color: #f4f1ea !important; color: #2c2416 !important; font-family: 'EB Garamond', serif !important; font-size: 1.06rem; } [data-theme="encyclopedia"] h1 { font-family: 'Playfair Display', serif !important; font-size: clamp(2rem, 5vw, 4rem) !important; color: #2c2416 !important; font-style: italic; letter-spacing: 0.02em !important; text-shadow: none !important; line-height: 1.2 !important; } [data-theme="encyclopedia"] h1 span { color: #6b4e28 !important; font-style: normal; text-shadow: none !important; } [data-theme="encyclopedia"] h2 { font-family: 'Playfair Display', serif !important; font-size: clamp(1.4rem, 3vw, 2.2rem) !important; color: #2c2416 !important; text-shadow: none !important; border-bottom: 1px solid #8b7355; padding-bottom: 0.4rem; line-height: 1.3 !important; } [data-theme="encyclopedia"] h3 { font-family: 'Playfair Display', serif !important; color: #4a3520 !important; font-size: 1rem !important; text-transform: uppercase; letter-spacing: 0.14em !important; text-shadow: none !important; } [data-theme="encyclopedia"] h4 { font-family: 'EB Garamond', serif !important; color: #4a3520 !important; font-size: 0.9rem !important; font-style: italic; } [data-theme="encyclopedia"] .text-purple-400 { color: #6b4e28 !important; } [data-theme="encyclopedia"] .text-purple-300, [data-theme="encyclopedia"] .text-purple-200 { color: #8b6840 !important; } [data-theme="encyclopedia"] .text-gray-400, [data-theme="encyclopedia"] .text-gray-300 { color: #6b5c48 !important; } [data-theme="encyclopedia"] .text-gray-100, [data-theme="encyclopedia"] .text-white { color: #2c2416 !important; } [data-theme="encyclopedia"] .bg-gray-900 { background-color: #f4f1ea !important; color: #2c2416 !important; } [data-theme="encyclopedia"] .bg-gray-800 { background-color: #ede8dc !important; border: double 3px #8b7355 !important; box-shadow: 2px 2px 10px rgba(44,36,22,0.18) !important; color: #2c2416 !important; } [data-theme="encyclopedia"] .bg-gray-800 p, [data-theme="encyclopedia"] .bg-gray-800 span, [data-theme="encyclopedia"] .bg-gray-800 li, [data-theme="encyclopedia"] .bg-gray-800 strong, [data-theme="encyclopedia"] .bg-gray-800 h3, [data-theme="encyclopedia"] .bg-gray-800 h4 { color: #2c2416 !important; } [data-theme="encyclopedia"] .bg-purple-600 { background-color: #6b4e28 !important; color: #f4f1ea !important; border: 1px solid #4a3520 !important; box-shadow: 2px 2px 6px rgba(44,36,22,0.3) !important; font-family: 'Playfair Display', serif !important; letter-spacing: 0.08em !important; border-radius: 3px !important; } [data-theme="encyclopedia"] .bg-purple-600:hover { background-color: #4a3520 !important; } [data-theme="encyclopedia"] .border-purple-500, [data-theme="encyclopedia"] .border-l-4 { border-color: #8b7355 !important; } [data-theme="encyclopedia"] .bg-purple-900\/30 { background-color: rgba(107,78,40,0.12) !important; border-color: #8b7355 !important; } [data-theme="encyclopedia"] .rounded-full.bg-gray-800 { background-color: #ede8dc !important; border: 1px solid #8b7355 !important; color: #2c2416 !important; } [data-theme="encyclopedia"] input, [data-theme="encyclopedia"] textarea, [data-theme="encyclopedia"] select { background-color: #faf7f0 !important; color: #2c2416 !important; border: 1px solid #8b7355 !important; font-family: 'EB Garamond', serif !important; font-size: 1rem !important; } [data-theme="encyclopedia"] strong { color: #4a3520 !important; } [data-theme="encyclopedia"] img { filter: grayscale(100%) sepia(25%) contrast(1.05) !important; } [data-theme="encyclopedia"] #vanta-globe { display: none !important; } [data-theme="encyclopedia"] #hero { background: linear-gradient(160deg, #f4f1ea 0%, #e8e0cc 60%, #ddd0b8 100%) !important; } [data-theme="encyclopedia"] custom-navbar { background-color: rgba(244,241,234,0.94) !important; border-bottom: double 2px #8b7355 !important; box-shadow: 0 2px 12px rgba(44,36,22,0.15) !important; } [data-theme="encyclopedia"] .bg-gradient-to-r, [data-theme="encyclopedia"] .bg-gradient-to-br { background: #6b4e28 !important; border: 1px solid #4a3520 !important; } [data-theme="encyclopedia"] section { color: #2c2416; } /* Decorative top-border on sections */ [data-theme="encyclopedia"] section.py-20::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent, #8b7355, transparent); margin-bottom: 0; } /* ════════════════════════════════════════════════════════════════ THEME 5 — ACID GRAPHIC / ANTI-DESIGN ════════════════════════════════════════════════════════════════ */ @keyframes acidPulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.65; transform: scale(1.04); } } @keyframes acidGlitch { 0%, 88%, 100% { transform: translateX(0); } 89% { transform: translateX(-5px) skewX(-3deg); } 90% { transform: translateX(5px) skewX(3deg); } 91% { transform: translateX(0); } } [data-theme="acid"] body { background-color: #060600 !important; color: #ffff00 !important; font-family: 'Anton', sans-serif !important; } /* Animated blob background */ [data-theme="acid"] body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 65% 45% at 12% 22%, rgba(0,255,65,0.14) 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 88% 78%, rgba(255,255,0,0.11) 0%, transparent 55%), radial-gradient(ellipse 45% 55% at 55% 48%, rgba(0,255,65,0.06) 0%, transparent 65%); pointer-events: none; z-index: 0; animation: acidPulse 7s ease-in-out infinite; } [data-theme="acid"] h1 { font-family: 'Anton', sans-serif !important; font-size: clamp(2rem, 5.5vw, 4.2rem) !important; color: #ffff00 !important; letter-spacing: 0.06em !important; display: block; line-height: 1.15 !important; text-shadow: 2px 0 #00ff41, -2px 0 rgba(255,0,144,0.6) !important; animation: acidGlitch 11s infinite; } [data-theme="acid"] h1 span { color: #00ff41 !important; text-shadow: 2px 0 #ffff00, -2px 0 rgba(255,0,144,0.5) !important; } [data-theme="acid"] h2 { font-family: 'Anton', sans-serif !important; color: #00ff41 !important; letter-spacing: 0.08em !important; font-size: clamp(1.2rem, 3vw, 2rem) !important; text-shadow: 1px 0 #ffff00 !important; } [data-theme="acid"] h3 { font-family: 'Anton', sans-serif !important; color: #ffff00 !important; letter-spacing: 0.06em !important; font-size: 0.9rem !important; text-shadow: none !important; } [data-theme="acid"] h4 { font-family: 'Anton', sans-serif !important; color: #00ff41 !important; } [data-theme="acid"] .text-purple-400 { color: #00ff41 !important; } [data-theme="acid"] .text-purple-300, [data-theme="acid"] .text-purple-200 { color: #80ff90 !important; } [data-theme="acid"] .text-gray-400, [data-theme="acid"] .text-gray-300 { color: rgba(255,255,0,0.65) !important; } [data-theme="acid"] .text-gray-100, [data-theme="acid"] .text-white { color: #ffff00 !important; } [data-theme="acid"] .bg-gray-900 { background-color: #060600 !important; } [data-theme="acid"] .bg-gray-800 { background-color: #0d0d00 !important; border: 1px solid rgba(255,255,0,0.5) !important; clip-path: polygon(0 2%, 97% 0, 100% 98%, 3% 100%); box-shadow: 0 0 22px rgba(255,255,0,0.08), 4px 4px 0 rgba(0,255,65,0.2) !important; } [data-theme="acid"] .bg-purple-600 { background-color: #00ff41 !important; color: #000 !important; font-family: 'Anton', sans-serif !important; letter-spacing: 0.12em !important; clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); box-shadow: 4px 4px 0 #ffff00 !important; border-radius: 0 !important; border: none !important; } [data-theme="acid"] .bg-purple-600:hover { background-color: #ffff00 !important; color: #000 !important; box-shadow: 4px 4px 0 #00ff41 !important; } [data-theme="acid"] .border-purple-500, [data-theme="acid"] .border-l-4 { border-color: #00ff41 !important; box-shadow: -4px 0 12px rgba(0,255,65,0.4) !important; } [data-theme="acid"] .bg-purple-900\/30 { background-color: rgba(0,255,65,0.08) !important; border-color: #00ff41 !important; } [data-theme="acid"] .rounded-full.bg-gray-800 { background-color: #0d0d00 !important; border: 1px solid rgba(255,255,0,0.4) !important; color: #ffff00 !important; } [data-theme="acid"] input, [data-theme="acid"] textarea, [data-theme="acid"] select { background-color: #0d0d00 !important; color: #ffff00 !important; border: 1px solid rgba(255,255,0,0.5) !important; font-family: 'Anton', sans-serif !important; letter-spacing: 0.06em !important; } [data-theme="acid"] strong { color: #00ff41 !important; } [data-theme="acid"] .bg-gradient-to-r, [data-theme="acid"] .bg-gradient-to-br { background: linear-gradient(135deg, #00ff41, #ffff00) !important; color: #000 !important; clip-path: polygon(1% 0, 100% 0, 99% 100%, 0 100%); } [data-theme="acid"] custom-navbar { border-bottom: 1px solid rgba(255,255,0,0.3) !important; box-shadow: 0 2px 30px rgba(0,255,65,0.12) !important; } [data-theme="acid"] #vanta-globe { filter: hue-rotate(100deg) saturate(1.4) brightness(0.75); } [data-theme="acid"] #hero { background-color: #060600 !important; overflow: visible !important; } /* ── Responsive — mobile theme switcher ───────────────────────── */ @media (max-width: 500px) { [data-theme="pixel"] h1 { font-size: clamp(0.7rem, 2.5vw, 1rem) !important; } }