/* ======================================================================== Black Trace Labs - GUI.css Global User Interface Stylesheet Purpose: This file defines the visual identity, layout responsiveness, typography, colors, animations, and custom components. ======================================================================== */ /* --------------------------- 1. FONT IMPORTS --------------------------- */ /* Load Google Fonts (should also be in of HTML for faster rendering) */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mozilla+Headline:wght@200..700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap'); /* --------------------------- 2. COLOR PALETTE VARIABLES --------------------------- */ :root { /* Brand Colors */ --color-black: #000000; /* Pitch Black background */ --color-green: #39ff14; /* Electric Neon Green */ --color-blue: #00f0ff; /* Electric Neon Blue */ --color-purple: #8a2be2; /* Deep Space Neon Purple */ --color-white: #f5f5f5; /* Light contrast text */ /* Glow Effects */ --glow-green: 0 0 10px #39ff14, 0 0 20px #39ff14, 0 0 30px #39ff14; --glow-blue: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff; --glow-purple: 0 0 10px #8a2be2, 0 0 20px #8a2be2, 0 0 30px #8a2be2; /* Transition Timing */ --fast: 0.2s ease-in-out; --med: 0.4s ease-in-out; } /* --------------------------- 3. GLOBAL RESET & BASE --------------------------- */ /* Ensure consistent styling across browsers */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body Base Styling */ body { background-color: var(--color-black); color: var(--color-white); font-family: 'Cinzel', serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; /* Prevent horizontal scrollbars */ } /* Responsive Images */ img { max-width: 100%; height: auto; } /* Anchor Links */ a { font-family: 'Titillium Web', sans-serif; color: var(--color-blue); text-decoration: none; transition: color var(--fast), text-shadow var(--fast); } a:hover { color: var(--color-green); text-shadow: var(--glow-green); } /* --------------------------- 4. TYPOGRAPHY RULES --------------------------- */ h1, h2 { font-family: 'Mozilla Headline', sans-serif; font-weight: 700; letter-spacing: 1px; } h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 600; } p { font-family: 'Cinzel', serif; } .card p { font-family: 'Libertinus Serif', serif; } /* Card Headings */ .card h5 { font-family: 'Intel One Mono', monospace; } /* --------------------------- 5. NAVIGATION BAR --------------------------- */ .navbar { background-color: rgba(0, 0, 0, 0.9); border-bottom: 2px solid var(--color-purple); } .navbar-brand { color: var(--color-green); font-family: 'Mozilla Headline', sans-serif; text-shadow: var(--glow-green); } .navbar-brand:hover { color: var(--color-blue); text-shadow: var(--glow-blue); } .nav-link { color: var(--color-white); transition: color var(--fast), text-shadow var(--fast); } .nav-link:hover { color: var(--color-green); text-shadow: var(--glow-green); } /* --------------------------- 6. GLOW TEXT UTILITY CLASSES --------------------------- */ .glow-green { color: var(--color-green); text-shadow: var(--glow-green); } .glow-blue { color: var(--color-blue); text-shadow: var(--glow-blue); } .glow-purple { color: var(--color-purple); text-shadow: var(--glow-purple); } .glow-red { color: var(--color-#F00); text-shadow: var(--glow-red); } /* --------------------------- 7. BUTTON STYLES --------------------------- */ .btn-glow-green { background-color: transparent; border: 2px solid var(--color-green); color: var(--color-green); padding: 10px 20px; transition: background-color var(--med), color var(--med), box-shadow var(--med); } .btn-glow-green:hover { background-color: var(--color-green); color: var(--color-black); box-shadow: var(--glow-green); } .btn-glow-blue { background-color: transparent; border: 2px solid var(--color-blue); color: var(--color-blue); padding: 10px 20px; transition: background-color var(--med), color var(--med), box-shadow var(--med); } .btn-glow-blue:hover { background-color: var(--color-blue); color: var(--color-black); box-shadow: var(--glow-blue); } .btn-glow-purple { background-color: transparent; border: 2px solid var(--color-purple); color: var(--color-purple); padding: 10px 20px; transition: background-color var(--med), color var(--med), box-shadow var (--med); } .btn-glow-purple:hover { background-color: var(--color-purple); color: var(--color-black); box-shadow: var(--glow-purple); } /* --------------------------- 8. CARD STYLING --------------------------- */ .card { background-color: rgba(0, 0, 0, 0.85); border: 1px solid var(--color-purple); border-radius: 10px; transition: transform var(--med), box-shadow var(--med); } .card:hover { transform: translateY(-5px); box-shadow: var(--glow-purple); } /* --------------------------- 9. RESPONSIVE UTILITIES --------------------------- */ /* Small devices (phones) */ @media (max-width: 576px) { body { font-size: 14px; } h1 { font-size: 1.8rem; } } /* Medium devices (tablets) */ @media (min-width: 577px) and (max-width: 992px) { h1 { font-size: 2.2rem; } } /* Large devices (desktop) */ @media (min-width: 993px) { h1 { font-size: 2.5rem; } } /* --------------------------- 10. ANIMATIONS --------------------------- */ /* Simple fade-in for elements */ .fade-in { animation: fadeIn ease 1.5s; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }