/* * RAINBOW VOGG GLOBAL LTD * Corporate Theme — Design Token System * Version 2.0 | Built in Africa. Designed for the World. * ───────────────────────────────────────────────────── */ /* ── GOOGLE FONTS IMPORT ── */ /* Google Fonts loaded via in HTML for better performance */ /* ── DESIGN TOKENS ── */ :root { /* Core Palette */ --obsidian: #080C18; --ink: #0E1120; --surface: #161B2E; --border: #1E2640; --border-hi: #2A3355; --muted: #3D4E6A; --ghost: #6E80A4; --dim: #8CA0C0; --body-text: #C4D4EC; --high: #E8F0FF; --white: #F4F8FF; /* Brand Accents */ --cyan: #00D4FF; --cyan-mid: #0099CC; --cyan-dim: #004E6E; --gold: #FFB800; --gold-dim: #7A5400; --emerald: #00E87A; --crimson: #FF3D5A; --violet: #8B5CF6; --amber: #F59E0B; /* Gradients */ --grad-cyan: linear-gradient(135deg, #00D4FF 0%, #0077CC 100%); --grad-gold: linear-gradient(135deg, #FFB800 0%, #CC8800 100%); --grad-violet: linear-gradient(135deg, #8B5CF6 0%, #5B21B6 100%); --grad-surface: linear-gradient(180deg, #161B2E 0%, #0E1120 100%); --grad-hero: linear-gradient(135deg, #080C18 0%, #0D1525 50%, #080C18 100%); /* Typography */ --font-display: 'Sora', 'Inter', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; /* Type Scale */ --text-xs: 0.68rem; --text-sm: 0.82rem; --text-base: 0.95rem; --text-md: 1.05rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.8rem; --text-4xl: 3.8rem; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Border Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 32px rgba(0,0,0,0.4); --shadow-lg: 0 16px 64px rgba(0,0,0,0.5); --shadow-glow-cyan: 0 0 40px rgba(0,212,255,0.2); --shadow-glow-gold: 0 0 40px rgba(255,184,0,0.2); /* Layout */ --container: 1400px; --nav-height: 64px; --section-pad: clamp(60px, 8vw, 120px); --sidebar-width: 240px; --transition: 0.2s ease; } /* ── RESET & BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; } body { background: var(--obsidian); color: var(--body-text); font-family: var(--font-body); line-height: 1.65; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font-family: inherit; } button { cursor: pointer; } /* ── TYPOGRAPHY ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--high); line-height: 1.2; font-weight: 700; } h1 { font-size: clamp(2rem, 5vw, var(--text-4xl)); font-weight: 800; } h2 { font-size: clamp(1.6rem, 3.5vw, var(--text-3xl)); } h3 { font-size: clamp(1.2rem, 2.5vw, var(--text-xl)); } h4 { font-size: var(--text-lg); } h5 { font-size: var(--text-base); font-weight: 600; } h6 { font-size: var(--text-sm); font-weight: 600; } p { color: var(--body-text); line-height: 1.75; } .text-gradient { background: var(--grad-cyan); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-gold { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── LAYOUT ── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); } .section { padding: var(--section-pad) 0; } .section-sm { padding: clamp(40px, 5vw, 64px) 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-gap { display: flex; align-items: center; gap: var(--space-4); } .wrap { flex-wrap: wrap; } .col { flex-direction: column; } /* ── EYEBROW ── */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--space-3); } .eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--cyan); } .eyebrow-gold { color: var(--gold); } .eyebrow-gold::before { background: var(--gold); } .eyebrow-violet { color: var(--violet); } .eyebrow-violet::before { background: var(--violet); } /* ── PILL / BADGE ── */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-full); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; background: rgba(0,212,255,0.1); color: var(--cyan); border: 1px solid rgba(0,212,255,0.25); } .pill-gold { background: rgba(255,184,0,0.1); color: var(--gold); border-color: rgba(255,184,0,0.25); } .pill-emerald { background: rgba(0,232,122,0.1); color: var(--emerald); border-color: rgba(0,232,122,0.25); } .pill-violet { background: rgba(139,92,246,0.1); color: var(--violet); border-color: rgba(139,92,246,0.25); } .pill-ghost { background: rgba(94,112,150,0.1); color: var(--ghost); border-color: rgba(94,112,150,0.25); } .pill-amber { background: rgba(245,158,11,0.1); color: var(--amber); border-color: rgba(245,158,11,0.25); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 11px 22px; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.01em; border: none; cursor: pointer; transition: all var(--transition); white-space: nowrap; text-decoration: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--grad-cyan); color: var(--obsidian); box-shadow: 0 0 24px rgba(0,212,255,0.25); } .btn-primary:hover { box-shadow: 0 0 40px rgba(0,212,255,0.4); } .btn-gold { background: var(--grad-gold); color: var(--obsidian); } .btn-violet { background: var(--grad-violet); color: var(--white); } .btn-outline { background: transparent; color: var(--cyan); border: 1px solid var(--cyan-dim); } .btn-outline:hover { background: rgba(0,212,255,0.08); } .btn-secondary{ background: var(--surface); color: var(--high); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--border-hi); } .btn-ghost { background: transparent; color: var(--dim); border: 1px solid var(--border); } .btn-danger { background: rgba(255,61,90,0.12); color: var(--crimson); border: 1px solid rgba(255,61,90,0.3); } .btn-success { background: rgba(0,232,122,0.12); color: var(--emerald); border: 1px solid rgba(0,232,122,0.3); } .btn-sm { padding: 7px 15px; font-size: 0.78rem; } .btn-lg { padding: 14px 30px; font-size: 1rem; } .btn-full { width: 100%; } .btn-icon { padding: 10px; border-radius: var(--r-md); } /* ── CARDS ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-6); transition: border-color var(--transition), transform var(--transition); } .card:hover { border-color: var(--border-hi); } .card-featured { background: linear-gradient(135deg, #0D1E35, #0A1220); border-color: var(--cyan-dim); } .card-hover:hover { transform: translateY(-3px); cursor: pointer; } /* ── DIVIDERS ── */ .divider { height: 1px; background: var(--border); margin: var(--space-8) 0; } .divider-v { width: 1px; background: var(--border); align-self: stretch; } /* ── SECTION HEADERS ── */ .section-header { margin-bottom: var(--space-12); } .section-header.centered { text-align: center; } .section-header p { color: var(--dim); max-width: 580px; margin-top: var(--space-4); font-size: var(--text-md); } .section-header.centered p { margin-left: auto; margin-right: auto; } /* ── MEDIA ART (color placeholder) ── */ .media-art { width: 100%; background: linear-gradient(135deg, #0D1828, #1A2540); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .media-art::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 8px); } .media-art-icon { font-size: 1.8rem; position: relative; z-index: 1; } .media-art-label { font-family: var(--font-mono); font-size: 0.65rem; color: rgba(255,255,255,0.3); position: relative; z-index: 1; text-align: center; padding: 0 12px; } /* ── LIVE INDICATOR ── */ .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); display: inline-block; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* ── STAT BLOCK ── */ .stat-block { display: flex; flex-direction: column; gap: 4px; } .stat-val { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: var(--cyan); line-height: 1; } .stat-label { font-size: var(--text-xs); color: var(--ghost); } /* ── FORM ELEMENTS ── */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 0.78rem; color: var(--dim); font-weight: 600; letter-spacing: 0.02em; } .form-label .required { color: var(--crimson); margin-left: 2px; } .form-control { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 14px; color: var(--high); font-size: var(--text-sm); font-family: var(--font-body); transition: border-color var(--transition), box-shadow var(--transition); width: 100%; appearance: none; } .form-control::placeholder { color: var(--muted); } .form-control:focus { outline: none; border-color: var(--cyan-dim); box-shadow: 0 0 0 3px rgba(0,212,255,0.08); } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 100px; } /* ── TOAST NOTIFICATIONS ── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--surface); border-radius: var(--r-lg); padding: 13px 18px; display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); box-shadow: var(--shadow-lg); transform: translateX(120%); transition: transform 0.3s ease; max-width: 360px; } .toast.show { transform: translateX(0); } .toast-success { border: 1px solid rgba(0,232,122,0.4); color: var(--emerald); } .toast-error { border: 1px solid rgba(255,61,90,0.4); color: var(--crimson); } .toast-info { border: 1px solid rgba(0,212,255,0.4); color: var(--cyan); } /* ── MODAL ── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(8,12,24,0.92); backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-backdrop.open { opacity: 1; pointer-events: auto; } .modal { background: var(--ink); border: 1px solid var(--border); border-radius: var(--r-xl); width: 100%; max-width: 580px; transform: translateY(20px); transition: transform 0.2s; } .modal-backdrop.open .modal { transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); } .modal-title { font-family: var(--font-display); font-weight: 700; color: var(--high); font-size: 1rem; } .modal-close { background: none; border: none; color: var(--ghost); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); } .modal-close:hover { background: var(--surface); } .modal-body { padding: 24px; } /* ── PROGRESS BAR ── */ .progress { height: 5px; background: var(--border); border-radius: var(--r-full); overflow: hidden; } .progress-fill { height: 100%; border-radius: var(--r-full); background: var(--grad-cyan); transition: width 0.6s ease; } .progress-fill.amber { background: linear-gradient(90deg, var(--amber), #D97706); } .progress-fill.emerald { background: var(--emerald); } /* ── LIGHTBOX ── */ .lightbox { position: fixed; inset: 0; background: rgba(8,12,24,0.97); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-5); opacity: 0; pointer-events: none; transition: opacity 0.25s; } .lightbox.open { opacity: 1; pointer-events: auto; } /* ── VIDEO WRAPPER ── */ .video-wrapper { position: relative; padding-bottom: 56.25%; background: #000; border-radius: var(--r-lg); overflow: hidden; } .video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* ── AUDIO PLAYER BAR ── */ .audio-player { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ink); border-top: 1px solid var(--border); padding: 14px 24px; z-index: 500; display: flex; align-items: center; gap: 16px; transform: translateY(100%); transition: transform 0.3s ease; } .audio-player.active { transform: translateY(0); } .audio-track { flex: 1; height: 4px; background: var(--surface); border-radius: var(--r-full); cursor: pointer; } .audio-track-fill { height: 100%; border-radius: var(--r-full); background: var(--grad-violet); } /* ── SCROLL REVEAL ── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ── SEARCH BOX ── */ .search-box { position: relative; } .search-box input { padding-left: 38px; } .search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ghost); pointer-events: none; font-size: 0.9rem; } /* ── FILTER PILLS ROW ── */ .filter-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .filter-btn { padding: 6px 14px; border-radius: var(--r-full); font-size: 0.76rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--ghost); font-family: var(--font-body); transition: all var(--transition); } .filter-btn.active, .filter-btn:hover { border-color: var(--cyan); background: rgba(0,212,255,0.1); color: var(--cyan); } /* ── EMPTY STATE ── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--ghost); } .empty-state-icon { font-size: 2.5rem; margin-bottom: var(--space-4); } .empty-state h4 { color: var(--dim); margin-bottom: var(--space-2); } .empty-state p { font-size: var(--text-sm); } /* ── UTILITY ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .text-center { text-align: center; } .text-right { text-align: right; } .text-cyan { color: var(--cyan); } .text-gold { color: var(--gold); } .text-emerald { color: var(--emerald); } .text-dim { color: var(--dim); } .text-ghost { color: var(--ghost); } .text-high { color: var(--high); } .text-mono { font-family: var(--font-mono); } .bold { font-weight: 700; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mt-4 { margin-top: var(--space-4); } .mt-8 { margin-top: var(--space-8); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .w-full { width: 100%; }