/* ================================================================ Y2K DARK — A Neocities Design System Inspired by MySpace & Bebo, circa 2006 Dark Neon Edition ================================================================ CONTENTS: 1. Custom Properties (Variables) 2. Google Font Import 3. Reset & Base 4. Custom Scrollbar 5. Body & Background 6. Typography 7. Links 8. Layout & Containers 9. Modules (Profile Boxes) 10. Profile Elements 11. Navigation Bar 12. Friend Grid 13. Comments Section 14. Tables 15. Forms & Buttons 16. Images & Stamps 17. Dividers & Bullets 18. Utility Classes 19. Animations & Keyframes ================================================================ */ /* ================================================================ 1. CUSTOM PROPERTIES ================================================================ */ :root { /* --- Background layers --- */ --bg: #060010; --bg-2: #0e0020; --bg-3: #160030; --bg-4: #1e0040; /* --- Accent colors --- */ --pink: #ff00aa; --pink-dim: #99005c; --pink-glow: rgba(255, 0, 170, 0.45); --pink-subtle: rgba(255, 0, 170, 0.1); --cyan: #00eeff; --cyan-dim: #006677; --cyan-glow: rgba(0, 238, 255, 0.4); --cyan-subtle: rgba(0, 238, 255, 0.08); --lime: #aaff00; --lime-dim: #446600; --lime-glow: rgba(170, 255, 0, 0.35); --purple: #cc44ff; --purple-dim: #660099; --purple-glow: rgba(204, 68, 255, 0.4); --orange: #ff6600; --orange-dim: #882200; --orange-glow: rgba(255, 102, 0, 0.35); /* --- Border defaults --- */ --border-color: #3d0066; --border: 1px solid var(--border-color); --border-2: 2px solid var(--border-color); /* --- Text --- */ --text: #f0e0ff; --text-2: #cc99ff; --text-3: #9966bb; --text-muted: #664488; /* --- Links --- */ --link: #ff88ee; --link-hover: #ff00aa; --link-visited: #cc66dd; /* --- Fonts --- */ --font-pixel: 'Press Start 2P', monospace; --font-vt: 'VT323', monospace; --font-body: 'Trebuchet MS', Verdana, Tahoma, sans-serif; --font-mono: 'Courier New', Courier, monospace; /* --- Spacing --- */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 18px; --space-xl: 24px; --space-2xl: 36px; /* --- Border radius --- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; /* --- Module header gradient pairs --- */ --grad-pink: linear-gradient(90deg, #660033, #cc0077, #660033); --grad-cyan: linear-gradient(90deg, #003344, #006688, #003344); --grad-lime: linear-gradient(90deg, #223300, #446600, #223300); --grad-purple: linear-gradient(90deg, #330055, #660099, #330055); --grad-orange: linear-gradient(90deg, #441100, #882200, #441100); --grad-multi: linear-gradient(90deg, #330055, #660033, #003344, #330055); } /* ================================================================ 2. GOOGLE FONT IMPORT — Add this LINK tag in your instead if you prefer: ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); /* ================================================================ 3. RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } img { max-width: 100%; display: block; } /* ================================================================ 4. CUSTOM SCROLLBAR ================================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-2); border-left: 1px solid var(--border-color); } ::-webkit-scrollbar-thumb { background: var(--pink-dim); border: 1px solid var(--pink); } ::-webkit-scrollbar-thumb:hover { background: var(--pink); } ::-webkit-scrollbar-corner { background: var(--bg); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--pink-dim) var(--bg-2); } /* Text selection */ ::selection { background: var(--pink); color: #fff; } /* ================================================================ 5. BODY & BACKGROUND ================================================================ */ body { background-color: var(--bg); /* Subtle dot grid — the texture of the void */ background-image: radial-gradient(circle, rgba(100, 0, 180, 0.18) 1px, transparent 1px), radial-gradient(circle, rgba(100, 0, 180, 0.08) 1px, transparent 1px); background-size: 24px 24px, 12px 12px; background-position: 0 0, 6px 6px; color: var(--text); font-family: var(--font-body); font-size: 13px; line-height: 1.6; min-height: 100vh; } /* Optional tiling background image — uncomment and swap URL */ /* body.bg-tile { background-image: url('your-tile.gif'); background-repeat: repeat; } */ /* ================================================================ 6. TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-pixel); line-height: 1.4; letter-spacing: 0.03em; } h1 { font-size: 18px; color: var(--pink); text-shadow: 0 0 10px var(--pink-glow), 0 0 25px var(--pink-glow); margin-bottom: var(--space-lg); } h2 { font-size: 13px; color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); margin-bottom: var(--space-md); } h3 { font-size: 10px; color: var(--purple); text-shadow: 0 0 6px var(--purple-glow); margin-bottom: var(--space-sm); } h4 { font-size: 9px; color: var(--lime); margin-bottom: var(--space-sm); } h5 { font-size: 8px; color: var(--orange); margin-bottom: var(--space-xs); } h6 { font-size: 8px; color: var(--text-2); margin-bottom: var(--space-xs); } p { font-family: var(--font-body); font-size: 13px; color: var(--text); margin-bottom: var(--space-md); line-height: 1.7; } strong, b { color: var(--pink); font-weight: bold; } em, i { color: var(--cyan); font-style: italic; } small { font-size: 11px; color: var(--text-3); } blockquote { border-left: 3px solid var(--pink); background: var(--bg-3); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; color: var(--text-2); font-style: italic; font-size: 13px; } blockquote::before { content: '\201C'; color: var(--pink); font-size: 24px; font-family: Georgia, serif; line-height: 0; vertical-align: -8px; margin-right: 4px; } code, pre { font-family: var(--font-mono); font-size: 12px; background: var(--bg-3); border: 1px solid var(--purple-dim); color: var(--lime); } code { padding: 1px 5px; border-radius: var(--radius-sm); } pre { padding: var(--space-md); overflow-x: auto; border-radius: var(--radius-md); margin-bottom: var(--space-md); } /* --- Special text styles --- */ /* Pixel / retro heading style */ .pixel-text { font-family: var(--font-pixel) !important; } /* VT323 terminal style */ .vt-text { font-family: var(--font-vt) !important; font-size: 20px !important; letter-spacing: 0.05em; } /* Glowing neon text */ .neon-pink { color: var(--pink); text-shadow: 0 0 5px var(--pink), 0 0 15px var(--pink-glow), 0 0 30px var(--pink-glow); } .neon-cyan { color: var(--cyan); text-shadow: 0 0 5px var(--cyan), 0 0 15px var(--cyan-glow), 0 0 30px var(--cyan-glow); } .neon-lime { color: var(--lime); text-shadow: 0 0 5px var(--lime), 0 0 15px var(--lime-glow), 0 0 30px var(--lime-glow); } .neon-purple { color: var(--purple); text-shadow: 0 0 5px var(--purple), 0 0 15px var(--purple-glow), 0 0 30px var(--purple-glow); } /* Shimmering rainbow text */ .rainbow-text { background: linear-gradient( 90deg, var(--pink), var(--purple), var(--cyan), var(--lime), var(--orange), var(--pink) ); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer-bg 4s linear infinite; } /* Blinking text (classic) */ .blink { animation: blink 1.2s step-end infinite; } /* Scrolling marquee container */ .marquee-wrap { overflow: hidden; background: var(--bg-3); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: var(--space-xs) 0; white-space: nowrap; } .marquee-track { display: inline-block; animation: marquee 20s linear infinite; } .marquee-track:hover { animation-play-state: paused; } /* ================================================================ 7. LINKS ================================================================ */ a { color: var(--link); text-decoration: none; transition: color 0.15s, text-shadow 0.15s; } a:hover { color: var(--link-hover); text-decoration: underline; text-shadow: 0 0 8px var(--pink-glow); } a:visited { color: var(--link-visited); } a:active { color: var(--cyan); } /* ================================================================ 8. LAYOUT & CONTAINERS ================================================================ */ .container { width: 90%; max-width: 960px; margin: 0 auto; padding: var(--space-xl) 0; } .container-wide { width: 95%; max-width: 1100px; margin: 0 auto; } /* Classic 3-column profile layout */ .layout-three-col { display: grid; grid-template-columns: 200px 1fr 180px; gap: var(--space-md); align-items: start; } /* 2-column: main content + right sidebar */ .layout-main-sidebar { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-md); align-items: start; } /* 2-column equal */ .layout-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; } /* Stack everything on small screens */ @media (max-width: 640px) { .layout-three-col, .layout-main-sidebar, .layout-two-col { grid-template-columns: 1fr; } } /* Generic flex row */ .flex-row { display: flex; gap: var(--space-md); align-items: flex-start; flex-wrap: wrap; } .flex-center { display: flex; align-items: center; justify-content: center; } /* ================================================================ 9. MODULES (PROFILE BOXES) The core building block — every section lives in a module. ================================================================ */ .module { background: var(--bg-2); border: 2px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: var(--space-md); overflow: hidden; } /* Module header bar */ .module-header { background: var(--grad-purple); border-bottom: 2px solid var(--border-color); padding: var(--space-xs) var(--space-sm); font-family: var(--font-pixel); font-size: 8px; color: var(--text); letter-spacing: 0.05em; text-transform: uppercase; } /* Module body */ .module-body { padding: var(--space-md); } .module-footer { background: var(--bg-3); border-top: 1px solid var(--border-color); padding: var(--space-xs) var(--space-sm); font-size: 11px; color: var(--text-3); text-align: right; } /* --- Module color variants --- */ .module-pink { border-color: var(--pink-dim); box-shadow: 0 0 8px var(--pink-glow), inset 0 0 12px rgba(255, 0, 170, 0.04); } .module-pink .module-header { background: var(--grad-pink); border-bottom-color: var(--pink-dim); color: #ffccee; } .module-cyan { border-color: var(--cyan-dim); box-shadow: 0 0 8px var(--cyan-glow), inset 0 0 12px rgba(0, 238, 255, 0.04); } .module-cyan .module-header { background: var(--grad-cyan); border-bottom-color: var(--cyan-dim); color: #ccffff; } .module-lime { border-color: var(--lime-dim); box-shadow: 0 0 8px var(--lime-glow), inset 0 0 12px rgba(170, 255, 0, 0.04); } .module-lime .module-header { background: var(--grad-lime); border-bottom-color: var(--lime-dim); color: #eeffaa; } .module-orange { border-color: var(--orange-dim); box-shadow: 0 0 8px var(--orange-glow), inset 0 0 12px rgba(255, 102, 0, 0.04); } .module-orange .module-header { background: var(--grad-orange); border-bottom-color: var(--orange-dim); color: #ffddaa; } .module-multi .module-header { background: var(--grad-multi); color: #ffffff; } /* Double border effect (very 2006) */ .module-double { border: 2px solid var(--pink-dim); outline: 2px solid var(--purple-dim); outline-offset: 3px; } /* Inner nested box (put inside .module-body) */ .inner-box { background: var(--bg-3); border: 1px solid var(--border-color); padding: var(--space-sm); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); } .inner-box:last-child { margin-bottom: 0; } /* ================================================================ 10. PROFILE ELEMENTS ================================================================ */ /* Profile picture */ .profile-pic { display: block; width: 100%; max-width: 160px; border: 3px solid var(--pink); box-shadow: 0 0 10px var(--pink-glow), 0 0 25px var(--pink-glow), 4px 4px 0 var(--purple-dim); margin: 0 auto var(--space-md); } .profile-pic:hover { box-shadow: 0 0 15px var(--pink), 0 0 40px var(--pink-glow), 4px 4px 0 var(--purple-dim); } /* Display name */ .profile-name { font-family: var(--font-pixel); font-size: 14px; color: var(--pink); text-shadow: 0 0 10px var(--pink-glow), 0 0 25px var(--pink-glow); text-align: center; margin-bottom: var(--space-sm); letter-spacing: 0.02em; } /* Tagline / bio subtitle */ .profile-tagline { font-family: var(--font-vt); font-size: 18px; color: var(--cyan); text-align: center; margin-bottom: var(--space-sm); letter-spacing: 0.04em; } /* Online status indicator */ .profile-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); margin-bottom: var(--space-sm); } .profile-status::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 6px var(--lime-glow); animation: glow-pulse-lime 2s ease-in-out infinite; flex-shrink: 0; } .profile-status.offline::before { background: var(--text-muted); box-shadow: none; animation: none; } .profile-status.away::before { background: var(--orange); box-shadow: 0 0 6px var(--orange-glow); animation: glow-pulse-orange 2s ease-in-out infinite; } /* Mood display */ .profile-mood { font-size: 12px; color: var(--text-3); text-align: center; margin-bottom: var(--space-sm); font-style: italic; } .profile-mood span { color: var(--purple); } /* Currently listening to / now playing */ .now-playing { background: var(--bg-3); border: 1px solid var(--purple-dim); border-left: 3px solid var(--purple); padding: var(--space-xs) var(--space-sm); font-size: 11px; color: var(--text-2); } .now-playing strong { display: block; font-size: 10px; font-family: var(--font-pixel); color: var(--purple); margin-bottom: 2px; } /* Profile details table (Age, Location, etc.) */ .profile-details { width: 100%; border-collapse: collapse; font-size: 12px; } .profile-details td { padding: 3px var(--space-xs); vertical-align: top; border-bottom: 1px solid rgba(100, 0, 180, 0.2); } .profile-details td:first-child { color: var(--cyan); font-weight: bold; white-space: nowrap; padding-right: var(--space-sm); width: 40%; } .profile-details td:last-child { color: var(--text); } /* View count / stats bar */ .stats-bar { display: flex; justify-content: space-around; background: var(--bg-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--space-sm); text-align: center; font-size: 11px; color: var(--text-3); } .stats-bar strong { display: block; font-family: var(--font-pixel); font-size: 9px; color: var(--pink); } /* ================================================================ 11. NAVIGATION BAR ================================================================ */ .nav-bar { background: var(--bg-2); border-bottom: 2px solid var(--pink-dim); box-shadow: 0 2px 10px var(--pink-glow); padding: 0 var(--space-xl); display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } .nav-bar a { color: var(--text-2); font-family: var(--font-pixel); font-size: 7px; padding: var(--space-md) var(--space-md); letter-spacing: 0.05em; text-transform: uppercase; border-right: 1px solid var(--border-color); transition: background 0.15s, color 0.15s; display: flex; align-items: center; text-decoration: none; } .nav-bar a:hover, .nav-bar a.active { background: var(--pink-subtle); color: var(--pink); text-shadow: 0 0 8px var(--pink-glow); text-decoration: none; } .nav-bar a:first-child { border-left: 1px solid var(--border-color); } /* Site title / logo in nav */ .nav-logo { font-family: var(--font-pixel); font-size: 10px; color: var(--pink) !important; padding-right: var(--space-xl) !important; text-shadow: 0 0 10px var(--pink-glow) !important; margin-right: var(--space-md); } /* ================================================================ 12. FRIEND GRID ================================================================ */ .friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: var(--space-sm); } .friend-card { text-align: center; font-size: 10px; } .friend-card a { text-decoration: none; color: var(--link); } .friend-card img { width: 60px; height: 60px; object-fit: cover; border: 2px solid var(--purple-dim); display: block; margin: 0 auto var(--space-xs); transition: border-color 0.2s, box-shadow 0.2s; } .friend-card:hover img { border-color: var(--pink); box-shadow: 0 0 8px var(--pink-glow); } .friend-card span { display: block; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================ 13. COMMENTS SECTION ================================================================ */ .comments-list { display: flex; flex-direction: column; gap: var(--space-sm); } .comment { background: var(--bg-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); display: grid; grid-template-columns: 50px 1fr; gap: var(--space-sm); padding: var(--space-sm); } .comment-avatar { width: 50px; flex-shrink: 0; } .comment-avatar img { width: 50px; height: 50px; object-fit: cover; border: 2px solid var(--cyan-dim); display: block; } .comment-avatar a { display: block; font-size: 9px; text-align: center; color: var(--cyan); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comment-content { min-width: 0; } .comment-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; } .comment-text { font-size: 12px; color: var(--text); line-height: 1.5; word-break: break-word; } /* Add comment form */ .comment-form { margin-top: var(--space-md); } /* ================================================================ 14. TABLES ================================================================ */ table { border-collapse: collapse; width: 100%; font-size: 12px; } /* Bordered data table */ .table-bordered { border: 2px solid var(--border-color); } .table-bordered th, .table-bordered td { border: 1px solid var(--border-color); padding: var(--space-xs) var(--space-sm); text-align: left; } .table-bordered th { background: var(--bg-3); color: var(--cyan); font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; } .table-bordered tr:nth-child(even) td { background: rgba(100, 0, 180, 0.06); } .table-bordered tr:hover td { background: var(--cyan-subtle); } /* Zebra striping only */ .table-striped tr:nth-child(even) td { background: rgba(100, 0, 180, 0.08); } /* ================================================================ 15. FORMS & BUTTONS ================================================================ */ input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], textarea, select { background: var(--bg-3); border: 2px solid var(--border-color); color: var(--text); font-family: var(--font-body); font-size: 12px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); width: 100%; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } input:focus, textarea:focus, select:focus { border-color: var(--pink); box-shadow: 0 0 8px var(--pink-glow); background: var(--bg-4); } textarea { resize: vertical; min-height: 80px; } label { display: block; font-size: 10px; font-family: var(--font-pixel); color: var(--text-2); margin-bottom: 4px; letter-spacing: 0.04em; } .form-row { margin-bottom: var(--space-md); } /* --- Buttons --- */ .btn { display: inline-block; font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; padding: var(--space-xs) var(--space-md); border: 2px solid; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background 0.15s, box-shadow 0.15s, color 0.15s; background: transparent; line-height: 1.8; } .btn:hover { text-decoration: none; } .btn-pink { color: var(--pink); border-color: var(--pink-dim); background: var(--pink-subtle); } .btn-pink:hover { background: var(--pink); color: #000; box-shadow: 0 0 12px var(--pink-glow); border-color: var(--pink); } .btn-cyan { color: var(--cyan); border-color: var(--cyan-dim); background: var(--cyan-subtle); } .btn-cyan:hover { background: var(--cyan); color: #000; box-shadow: 0 0 12px var(--cyan-glow); border-color: var(--cyan); } .btn-lime { color: var(--lime); border-color: var(--lime-dim); } .btn-lime:hover { background: var(--lime); color: #000; box-shadow: 0 0 12px var(--lime-glow); border-color: var(--lime); } .btn-purple { color: var(--purple); border-color: var(--purple-dim); } .btn-purple:hover { background: var(--purple); color: #000; box-shadow: 0 0 12px var(--purple-glow); border-color: var(--purple); } /* Solid filled button */ .btn-solid-pink { background: var(--pink); color: #000; border-color: var(--pink); font-weight: bold; } .btn-solid-pink:hover { background: #ff44cc; box-shadow: 0 0 14px var(--pink-glow); } /* Small button */ .btn-sm { font-size: 7px; padding: 2px var(--space-sm); } /* ================================================================ 16. IMAGES & STAMPS ================================================================ */ /* Decorative bordered image */ .img-border { border: 3px solid var(--purple-dim); box-shadow: 3px 3px 0 var(--pink-dim); display: inline-block; } .img-border:hover { border-color: var(--purple); box-shadow: 3px 3px 0 var(--pink), 0 0 12px var(--purple-glow); } /* Stamp-style small image */ .img-stamp { display: inline-block; border: 4px solid var(--text); box-shadow: 2px 2px 0 var(--pink-dim), inset 0 0 0 1px var(--border-color); padding: 3px; background: var(--bg-3); } /* Pixel art / GIF — make sure borders show */ .img-pixel { image-rendering: pixelated; image-rendering: crisp-edges; } /* Float left/right with margin */ .img-float-left { float: left; margin: 0 var(--space-md) var(--space-sm) 0; } .img-float-right { float: right; margin: 0 0 var(--space-sm) var(--space-md); } /* Clear floats */ .clearfix::after { content: ''; display: block; clear: both; } /* ================================================================ 17. DIVIDERS & BULLETS ================================================================ */ /* Fancy HR replacement */ .divider { border: none; border-top: 1px solid var(--border-color); margin: var(--space-lg) 0; position: relative; } .divider::after { content: '✦'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-2); color: var(--pink); padding: 0 var(--space-sm); font-size: 12px; text-shadow: 0 0 8px var(--pink-glow); } .divider-stars { border: none; text-align: center; color: var(--pink); margin: var(--space-lg) 0; font-size: 14px; letter-spacing: 0.4em; text-shadow: 0 0 8px var(--pink-glow); } .divider-stars::before { content: '✦ ✧ ✦ ✧ ✦ ✧ ✦'; } .divider-line { border: none; height: 2px; background: linear-gradient(90deg, transparent, var(--pink), var(--purple), var(--cyan), transparent); margin: var(--space-lg) 0; } /* --- Styled list bullets --- */ ul.bullets-star { list-style: none; padding-left: var(--space-md); } ul.bullets-star li::before { content: '✦ '; color: var(--pink); font-size: 10px; } ul.bullets-heart { list-style: none; padding-left: var(--space-md); } ul.bullets-heart li::before { content: '♥ '; color: var(--pink); } ul.bullets-arrow { list-style: none; padding-left: var(--space-md); } ul.bullets-arrow li::before { content: '» '; color: var(--cyan); } ul.bullets-dot { list-style: none; padding-left: var(--space-md); } ul.bullets-dot li::before { content: '· '; color: var(--purple); font-size: 18px; line-height: 0; vertical-align: -4px; } /* Generic li spacing */ li { margin-bottom: 4px; color: var(--text); font-size: 13px; } /* ================================================================ 18. UTILITY CLASSES ================================================================ */ /* --- Text colors --- */ .text-pink { color: var(--pink) !important; } .text-cyan { color: var(--cyan) !important; } .text-lime { color: var(--lime) !important; } .text-purple { color: var(--purple) !important; } .text-orange { color: var(--orange) !important; } .text-muted { color: var(--text-muted) !important; } .text-2 { color: var(--text-2) !important; } /* --- Text alignment --- */ .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } /* --- Spacing --- */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } /* --- Backgrounds --- */ .bg-dark { background: var(--bg) !important; } .bg-surface { background: var(--bg-2) !important; } .bg-deeper { background: var(--bg-3) !important; } /* --- Border glow utilities --- */ .glow-pink { box-shadow: 0 0 10px var(--pink-glow) !important; } .glow-cyan { box-shadow: 0 0 10px var(--cyan-glow) !important; } .glow-purple { box-shadow: 0 0 10px var(--purple-glow) !important; } .glow-lime { box-shadow: 0 0 10px var(--lime-glow) !important; } /* --- Float animation --- */ .float { animation: float 3s ease-in-out infinite; } /* --- Pulsing glow on any element --- */ .pulse-pink { animation: glow-pulse-pink 2s ease-in-out infinite; } .pulse-cyan { animation: glow-pulse-cyan 2s ease-in-out infinite; } /* --- Visibility --- */ .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ================================================================ 19. ANIMATIONS & KEYFRAMES ================================================================ */ @keyframes shimmer-bg { 0% { background-position: 0% center; } 100% { background-position: 300% center; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes marquee { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } @keyframes glow-pulse-pink { 0%, 100% { text-shadow: 0 0 5px var(--pink-glow), 0 0 15px var(--pink-glow); } 50% { text-shadow: 0 0 12px var(--pink), 0 0 30px var(--pink-glow), 0 0 50px var(--pink-glow); } } @keyframes glow-pulse-cyan { 0%, 100% { text-shadow: 0 0 5px var(--cyan-glow), 0 0 15px var(--cyan-glow); } 50% { text-shadow: 0 0 12px var(--cyan), 0 0 30px var(--cyan-glow), 0 0 50px var(--cyan-glow); } } @keyframes glow-pulse-lime { 0%, 100% { box-shadow: 0 0 4px var(--lime-glow); } 50% { box-shadow: 0 0 10px var(--lime), 0 0 20px var(--lime-glow); } } @keyframes glow-pulse-orange { 0%, 100% { box-shadow: 0 0 4px var(--orange-glow); } 50% { box-shadow: 0 0 10px var(--orange), 0 0 20px var(--orange-glow); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* === FOOTER SITEMAP === */ .site-footer { margin-top: 48px; border-top: 2px solid var(--pink-dim); background: var(--bg-2); box-shadow: 0 -4px 20px var(--pink-glow); padding: 28px 0 16px; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-xl); } .footer-col-header { font-family: var(--font-pixel); font-size: 8px; color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); letter-spacing: 0.06em; margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border-color); } .footer-col ul { padding-left: 0; } .footer-col li { font-size: 12px; margin-bottom: 3px; } .footer-bottom { border-top: 1px solid var(--border-color); padding-top: var(--space-md); font-size: 11px; color: var(--text-muted); text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); } .footer-site-name a { font-family: var(--font-pixel); font-size: 9px; color: var(--pink); text-shadow: 0 0 8px var(--pink-glow); } .footer-divider { color: var(--pink-dim); } /* ================================================================ END OF Y2K DARK CSS ================================================================ */