/* * ═══════════════════════════════════════════════════════════════════════════ * AGENCY HUB THEME SYSTEM * Texas Growth Factory Design Language * ═══════════════════════════════════════════════════════════════════════════ * * A complete, standalone stylesheet for the Agency Hub family of applications. * No external dependencies required - works without Tailwind or any framework. * * Features a dark-themed glassmorphism aesthetic with light theme support, * floating gradient orbs, sharp edges, and TGF brand colors. * * USAGE: * 1. Import this file in your HTML: * 2. Google Fonts are imported automatically (Poppins & Inter) * 3. Add class="light" to or for light theme (default is dark) * 4. Add floating orbs to your layout (see FLOATING ORBS section at bottom) * * BRAND COLORS: * - TGF Midnight: #0E1320 (Deep navy, primary dark) * - TGF Mesquite: #e2701a (Burnt orange, primary accent) * - TGF Teal: #70A8A9 (Muted teal, secondary accent) * * DESIGN PRINCIPLES: * - Sharp edges only (border-radius: 0) * - Dark glassmorphism with backdrop blur * - 30% opacity floating gradient orbs with 150-200s orbital animations * - ADA-compliant contrast ratios for both themes * - Respects prefers-reduced-motion * * ═══════════════════════════════════════════════════════════════════════════ */ /* Import Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* ═══════════════════════════════════════════════════════════════════════════ * CSS VARIABLES - DARK THEME (DEFAULT) * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Background & Surfaces */ --bg: #090b10; --panel: #0f1218; --overlay: rgba(9, 11, 16, 0.7); --border: rgba(14, 19, 32, 0.3); /* Text Colors */ --text: #e6eaf2; --muted: #e6eaf2; --muted-foreground: #e6eaf2; /* TGF Brand Colors */ --tgf-midnight: #0E1320; --tgf-mesquite: #e2701a; --tgf-teal: #70A8A9; /* Status Colors */ --danger: #ef4444; --ok: #22c55e; /* Effects */ --radius: 0px; --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55); /* Component Aliases */ --background: var(--bg); --foreground: var(--text); --card: var(--panel); --card-foreground: var(--text); --popover: var(--panel); --popover-foreground: var(--text); --primary: var(--tgf-mesquite); --primary-foreground: hsl(0, 0%, 100%); --secondary: var(--tgf-teal); --secondary-foreground: hsl(0, 0%, 100%); --accent: var(--tgf-midnight); --accent-foreground: hsl(0, 0%, 100%); --destructive: var(--danger); --destructive-foreground: hsl(0, 0%, 100%); --input: var(--panel); --ring: var(--tgf-teal); /* Typography */ --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; } /* ═══════════════════════════════════════════════════════════════════════════ * CSS VARIABLES - LIGHT THEME * ═══════════════════════════════════════════════════════════════════════════ */ .light { /* Background & Surfaces */ --bg: #F4EDE6; --panel: #ffffff; --overlay: rgba(244, 237, 230, 0.85); --border: rgba(14, 19, 32, 0.15); /* Text Colors */ --text: #0E1320; --muted: #0E1320; --muted-foreground: #0E1320; /* TGF Brand Colors (unchanged) */ --tgf-midnight: #0E1320; --tgf-mesquite: #e2701a; --tgf-teal: #70A8A9; /* Effects */ --shadow-sm: 0 2px 8px rgba(14, 19, 32, 0.08); --shadow-lg: 0 20px 60px rgba(14, 19, 32, 0.12); /* Component Aliases */ --background: var(--bg); --foreground: var(--text); --card: var(--panel); --card-foreground: var(--text); --popover: var(--panel); --popover-foreground: var(--text); --primary: var(--tgf-mesquite); --primary-foreground: hsl(0, 0%, 100%); --secondary: var(--tgf-teal); --secondary-foreground: hsl(0, 0%, 100%); --muted: rgba(14, 19, 32, 0.08); --accent: var(--tgf-teal); --accent-foreground: hsl(0, 0%, 100%); --input: var(--panel); --ring: var(--tgf-teal); } /* ═══════════════════════════════════════════════════════════════════════════ * BASE STYLES * ═══════════════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; border-color: var(--border); } html { scroll-behavior: smooth; } html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); margin: 0; padding: 0; } body { font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); } a { color: var(--tgf-teal); text-decoration: none; } a:hover { color: var(--tgf-mesquite); } ::selection { background-color: rgba(112, 168, 169, 0.3); } /* ═══════════════════════════════════════════════════════════════════════════ * STANDALONE UTILITY CLASSES - BACKDROP BLUR & GLASSMORPHISM * ═══════════════════════════════════════════════════════════════════════════ */ /* Backdrop blur utilities - BASE definitions */ .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Override backdrop blur backgrounds for themes */ :root .backdrop-blur-md, .dark .backdrop-blur-md { background-color: rgba(14, 19, 32, 0.7); } .light .backdrop-blur-md { background-color: rgba(255, 255, 255, 0.7); } /* ═══════════════════════════════════════════════════════════════════════════ * STANDALONE UTILITY CLASSES - BACKGROUNDS * ═══════════════════════════════════════════════════════════════════════════ */ /* White/Light backgrounds - BASE definitions */ .bg-white-5 { background-color: rgba(255, 255, 255, 0.05); } .bg-white-10 { background-color: rgba(255, 255, 255, 0.1); } .bg-white-20 { background-color: rgba(255, 255, 255, 0.2); } /* Override for light theme */ .light .bg-white-5 { background-color: rgba(0, 0, 0, 0.03); } .light .bg-white-10 { background-color: rgba(255, 255, 255, 0.8); } /* Brand color backgrounds - TGF Mesquite (Orange) */ .bg-mesquite-10 { background-color: rgba(226, 112, 26, 0.1); } .bg-mesquite-20 { background-color: rgba(226, 112, 26, 0.2); } .bg-mesquite-30 { background-color: rgba(226, 112, 26, 0.3); } .bg-mesquite-solid { background-color: #e2701a; } /* Brand color backgrounds - TGF Teal */ .bg-teal-10 { background-color: rgba(112, 168, 169, 0.1); } .bg-teal-20 { background-color: rgba(112, 168, 169, 0.2); } .bg-teal-25 { background-color: rgba(112, 168, 169, 0.25); } .bg-teal-30 { background-color: rgba(112, 168, 169, 0.3); } .bg-teal-solid { background-color: #70A8A9; } /* Midnight background */ .bg-midnight { background-color: #0E1320; } /* Hover backgrounds */ .hover-bg-white-10:hover { background-color: rgba(255, 255, 255, 0.1); } .light .hover-bg-white-10:hover { background-color: rgba(14, 19, 32, 0.05); } .hover-bg-mesquite-20:hover { background-color: rgba(226, 112, 26, 0.2); } .hover-bg-teal-20:hover { background-color: rgba(112, 168, 169, 0.2); } /* ═══════════════════════════════════════════════════════════════════════════ * STANDALONE UTILITY CLASSES - BORDERS * ═══════════════════════════════════════════════════════════════════════════ */ /* Base border utilities - COMPLETE definitions with width and style */ .border { border: 1px solid var(--border); } .border-0 { border: none; } .border-1 { border: 1px solid var(--border); } .border-2 { border: 2px solid var(--border); } /* Border radius */ .rounded-none { border-radius: 0; } .rounded-full { border-radius: 9999px; } /* White/transparent borders with COMPLETE definitions */ .border-white-5 { border: 1px solid rgba(255, 255, 255, 0.05); } .border-white-10 { border: 1px solid rgba(255, 255, 255, 0.1); } .border-white-20 { border: 1px solid rgba(255, 255, 255, 0.2); } .border-white-30 { border: 1px solid rgba(255, 255, 255, 0.3); } .border-2-white-30 { border: 2px solid rgba(255, 255, 255, 0.3); } /* Override for light theme */ .light .border-white-5, .light .border-white-10, .light .border-white-20 { border: 1px solid var(--border); } .light .border-2-white-30 { border: 2px solid var(--border); } /* Brand color borders - COMPLETE definitions */ .border-mesquite-30 { border: 1px solid rgba(226, 112, 26, 0.3); } .border-mesquite-50 { border: 1px solid rgba(226, 112, 26, 0.5); } .border-2-mesquite-50 { border: 2px solid rgba(226, 112, 26, 0.5); } .border-mesquite-solid { border: 1px solid #e2701a; } .border-teal-30 { border: 1px solid rgba(112, 168, 169, 0.3); } .border-teal-50 { border: 1px solid rgba(112, 168, 169, 0.5); } .border-teal-solid { border: 1px solid #70A8A9; } /* ═══════════════════════════════════════════════════════════════════════════ * STANDALONE UTILITY CLASSES - TEXT COLORS * ═══════════════════════════════════════════════════════════════════════════ */ /* White text utilities - BASE definitions */ .text-white { color: #ffffff; } .text-white-80 { color: rgba(255, 255, 255, 0.8); } .text-white-70 { color: rgba(255, 255, 255, 0.7); } .text-white-60 { color: rgba(255, 255, 255, 0.6); } .text-white-50 { color: rgba(255, 255, 255, 0.5); } .text-white-40 { color: rgba(255, 255, 255, 0.4); } .text-white-30 { color: rgba(255, 255, 255, 0.3); } /* Override white text in light theme */ .light .text-white { color: #0E1320; } .light .text-white-80, .light .text-white-70, .light .text-white-60 { color: #2d3748; } .light .text-white-50, .light .text-white-40, .light .text-white-30 { color: #4a5568; } /* Brand color text utilities */ .text-teal { color: var(--tgf-teal); } .text-mesquite { color: var(--tgf-mesquite); } .text-midnight { color: var(--tgf-midnight); } .text-muted { color: var(--muted); } /* ═══════════════════════════════════════════════════════════════════════════ * STANDALONE UTILITY CLASSES - POSITIONING & LAYOUT * ═══════════════════════════════════════════════════════════════════════════ */ /* Position utilities */ .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } /* Inset utilities */ .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } /* Pointer events */ .pointer-events-none { pointer-events: none; } /* Overflow */ .overflow-hidden { overflow: hidden; } /* Z-index */ .z-0 { z-index: 0; } .z-10 { z-index: 10; } /* ═══════════════════════════════════════════════════════════════════════════ * STANDALONE UTILITY CLASSES - BLUR FILTERS * ═══════════════════════════════════════════════════════════════════════════ */ .blur-sm { filter: blur(4px); } .blur-md { filter: blur(12px); } .blur-lg { filter: blur(16px); } .blur-xl { filter: blur(24px); } .blur-2xl { filter: blur(40px); } .blur-3xl { filter: blur(64px); } /* ═══════════════════════════════════════════════════════════════════════════ * NAVIGATION & BUTTON STYLES * ═══════════════════════════════════════════════════════════════════════════ */ /* Dark theme navigation */ nav a[href], nav button { color: #e6eaf2; transition: color 0.2s ease; } nav a[href]:hover, nav button:hover { color: #e2701a; } button svg, a svg { color: #e6eaf2; transition: color 0.2s ease; } button:hover svg, a:hover svg { color: #e2701a; } /* Light theme navigation */ .light nav a[href], .light nav button { color: #0E1320; } .light nav a[href]:hover, .light nav button:hover { color: #e2701a; } .light button svg, .light a svg { color: #0E1320; } .light button:hover svg, .light a:hover svg { color: #e2701a; } /* Dialog/Modal backgrounds */ [role="dialog"] { background-color: var(--panel); color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════ * TYPOGRAPHY STYLES * ═══════════════════════════════════════════════════════════════════════════ */ .h1-impact { font-size: clamp(40px, 7vw, 92px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; background: radial-gradient(120% 120% at 0% 0%, var(--tgf-teal), var(--tgf-mesquite) 40%, var(--text) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } .h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; } .gradient-text-electric { background: radial-gradient(120% 120% at 0% 0%, var(--tgf-teal), var(--tgf-mesquite) 40%, var(--text) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } .gradient-text-warm { background: linear-gradient(90deg, var(--tgf-mesquite), var(--tgf-teal), var(--text)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ═══════════════════════════════════════════════════════════════════════════ * CARDS & GLASSMORPHISM * ═══════════════════════════════════════════════════════════════════════════ */ .card { background: linear-gradient(180deg, rgba(14, 19, 32, 0.15), rgba(14, 19, 32, 0.05)); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-sm); padding: 16px; backdrop-filter: saturate(120%) blur(4px); -webkit-backdrop-filter: saturate(120%) blur(4px); } .card:hover { transform: translateY(-2px); transition: 0.25s ease; } .glass { backdrop-filter: saturate(120%) blur(12px); -webkit-backdrop-filter: saturate(120%) blur(12px); } .section-card { border: 1px solid var(--border); background: linear-gradient(180deg, rgba(14, 19, 32, 0.15), rgba(14, 19, 32, 0.05)); backdrop-filter: saturate(120%) blur(8px); -webkit-backdrop-filter: saturate(120%) blur(8px); border-radius: 0; } /* ═══════════════════════════════════════════════════════════════════════════ * BUTTONS * ═══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 0; border: 1px solid var(--border); color: var(--text); background: linear-gradient(180deg, rgba(14, 19, 32, 0.15), rgba(14, 19, 32, 0.05)); transition: all 0.25s ease; position: relative; overflow: hidden; cursor: pointer; } .btn:hover { border-color: rgba(112, 168, 169, 0.3); transform: translateY(-1px); } .btn-primary { background: #e2701a; color: #fff; border: 1px solid #e2701a; padding: 8px 16px; font-weight: 500; transition: opacity 0.25s ease; display: inline-block; cursor: pointer; } .btn-primary:hover { opacity: 0.9; } .btn-secondary { background: #0E1320; color: #fff; border: 1px solid #0E1320; padding: 8px 16px; font-weight: 500; transition: opacity 0.25s ease; display: inline-block; cursor: pointer; } .btn-secondary:hover { opacity: 0.9; } .btn-ghost { background: transparent; } .btn-magnetic { transition: transform 0.15s ease-out; } /* ═══════════════════════════════════════════════════════════════════════════ * FORM INPUTS * ═══════════════════════════════════════════════════════════════════════════ */ .input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 10px 12px; border-radius: 0; background: var(--panel); border: 1px solid var(--border); color: var(--text); outline: none; transition: 0.2s ease; } .input:focus, input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px rgba(112, 168, 169, 0.35); border-color: rgba(112, 168, 169, 0.45); } select option { color: var(--text); background-color: var(--panel); } .light input::placeholder, .light textarea::placeholder { color: #4a5568; } /* ═══════════════════════════════════════════════════════════════════════════ * UTILITY CLASSES * ═══════════════════════════════════════════════════════════════════════════ */ /* Layout utilities */ .grid { display: grid; gap: 12px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .container { max-width: 1200px; margin: 0 auto; padding: 24px; } .spacer { height: 12px; } .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; } .split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: center; } /* Badge */ .badge { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } /* Lines */ .line { height: 1px; background: linear-gradient(90deg, transparent, rgba(112, 168, 169, 0.15), transparent); margin: 16px 0; } .line-animated { background: linear-gradient(90deg, transparent, var(--tgf-teal), var(--tgf-mesquite), transparent); background-size: 200% 100%; animation: gradient-shift 3s ease infinite; } /* Post chips */ .post-chip { border: 1px solid var(--border); border-radius: 0; padding: 6px 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .post-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .post-ig { background: rgba(226, 112, 26, 0.12); } .post-fb { background: rgba(112, 168, 169, 0.12); } .post-li { background: rgba(14, 19, 32, 0.12); } /* Starfield texture */ .bg-texture::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.12; mix-blend-mode: overlay; background: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.08) 2px, transparent 2px), radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.06) 1px, transparent 1px), radial-gradient(circle at 45% 95%, rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px); background-size: 8px 8px, 12px 12px, 16px 16px; z-index: 0; } /* Accent orb */ .accent-orb { position: absolute; inset: auto auto -20% -10%; width: 480px; height: 480px; filter: blur(40px); opacity: 0.28; background: radial-gradient(circle at 30% 30%, var(--tgf-mesquite), transparent 60%), radial-gradient(circle at 70% 70%, var(--tgf-teal), transparent 60%); pointer-events: none; z-index: 0; } /* Skeleton loader */ .skeleton { background: linear-gradient(90deg, rgba(14, 19, 32, 0.1) 25%, rgba(14, 19, 32, 0.2) 50%, rgba(14, 19, 32, 0.1) 75%); background-size: 1000px 100%; animation: shimmer 2s infinite; } /* ═══════════════════════════════════════════════════════════════════════════ * ANIMATIONS * ═══════════════════════════════════════════════════════════════════════════ */ /* Page transitions */ body.page-enter { opacity: 0; transform: translateY(6px); } body.page-enter-active { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; } /* Scroll reveal */ [data-reveal] { opacity: 0; transform: translateY(12px); } .reveal-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; } /* Animation keyframes */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ═══════════════════════════════════════════════════════════════════════════ * FLOATING ORB ORBITAL ANIMATIONS * These create the signature slow-moving gradient orbs * ═══════════════════════════════════════════════════════════════════════════ */ @keyframes orbit-1 { 0% { transform: translate(0, 0); } 25% { transform: translate(60vw, 20vh); } 50% { transform: translate(40vw, 60vh); } 75% { transform: translate(-30vw, 40vh); } 100% { transform: translate(0, 0); } } @keyframes orbit-2 { 0% { transform: translate(0, 0); } 20% { transform: translate(-50vw, 30vh); } 40% { transform: translate(-40vw, -20vh); } 60% { transform: translate(30vw, -30vh); } 80% { transform: translate(50vw, 20vh); } 100% { transform: translate(0, 0); } } @keyframes orbit-3 { 0% { transform: translate(0, 0); } 16% { transform: translate(35vw, -25vh); } 33% { transform: translate(-20vw, -35vh); } 50% { transform: translate(-45vw, 15vh); } 66% { transform: translate(-25vw, 45vh); } 83% { transform: translate(25vw, 35vh); } 100% { transform: translate(0, 0); } } /* Animation utility classes */ .animate-float { animation: float 6s ease-in-out infinite; } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } .animate-slide-up { animation: slideUp 0.6s ease-out forwards; } .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } /* Orbital animation utilities */ .animate-orbit-1 { animation: orbit-1 150s ease-in-out infinite; } .animate-orbit-2 { animation: orbit-2 175s ease-in-out infinite; } .animate-orbit-3 { animation: orbit-3 200s ease-in-out infinite; } /* Floating Orb Base Styles */ .floating-orb { position: absolute; border-radius: 9999px; filter: blur(64px); -webkit-filter: blur(64px); opacity: 0.3; width: 500px; height: 500px; } /* Orb Color Variants */ .orb-teal { background: radial-gradient(circle, rgba(112, 168, 169, 0.4), rgba(112, 168, 169, 0.1)); top: 10%; left: 5%; animation: orbit-1 150s ease-in-out infinite; } .orb-mesquite { background: radial-gradient(circle, rgba(226, 112, 26, 0.4), rgba(226, 112, 26, 0.1)); bottom: 10%; right: 5%; width: 450px; height: 450px; animation: orbit-2 175s ease-in-out infinite; } .orb-midnight { background: radial-gradient(circle, rgba(14, 19, 32, 0.6), rgba(14, 19, 32, 0.2)); top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; animation: orbit-3 200s ease-in-out infinite; } /* Light theme orb adjustments */ .light .orb-teal { background: radial-gradient(circle, rgba(112, 168, 169, 0.3), rgba(112, 168, 169, 0.05)); opacity: 0.4; } .light .orb-mesquite { background: radial-gradient(circle, rgba(226, 112, 26, 0.3), rgba(226, 112, 26, 0.05)); opacity: 0.4; } .light .orb-midnight { background: radial-gradient(circle, rgba(112, 168, 169, 0.2), rgba(112, 168, 169, 0.05)); opacity: 0.3; } /* ═══════════════════════════════════════════════════════════════════════════ * ACCESSIBILITY - REDUCED MOTION * ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } body.page-enter, [data-reveal], .animate-float, .animate-fade-in, .animate-slide-up, .animate-pulse-glow, .animate-orbit-1, .animate-orbit-2, .animate-orbit-3 { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .btn-magnetic:hover { transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ * FLOATING ORBS - IMPLEMENTATION GUIDE * ═══════════════════════════════════════════════════════════════════════════ * * Add this HTML structure to your page for the signature floating gradient orbs. * This is completely framework-agnostic and uses only standard CSS classes. * * SIMPLE EXAMPLE (using utility classes): * *
*
*
*
*
*
*
*
* * INLINE STYLES EXAMPLE (no classes needed): * *
* *
*
* * *
*
* * *
*
*
* * IMPORTANT NOTES: * - Make sure your main content has position: relative and z-index: 10 or higher * to appear above the floating orbs * - The orbs will animate slowly in circular patterns (150-200 seconds per cycle) * - Animations respect prefers-reduced-motion preferences * - Works in all modern browsers * * ═══════════════════════════════════════════════════════════════════════════ */