/* ========================================================= 22tango – styles.css (Neocities) PURPOSE: Simple, readable styles with clear edit points. HOW TO USE THIS FILE: 1) Look for lines marked with: >>> EDIT HERE <<< 2) Read the note above each edit. Change the value to what you want. 3) Save and refresh your site. QUICK EDIT INDEX: - Change footer bar height .................. search: --contact-h (>>> EDIT HERE <<<) - Swap the background GIF ................... search: starz.gif (>>> EDIT HERE <<<) - Make background brighter/darker .......... search: overlay strength (>>> EDIT HERE <<<) - Change site text color .................... search: --text (>>> EDIT HERE <<<) - Change panel/table contrast ............... search: --panel / --border - Change logo width ......................... search: imagecontainer img (>>> EDIT HERE <<<) - Make the table compact .................... search: Schedule table spacing TROUBLESHOOTING (common): - If the GIF doesn't show: ensure starz.gif sits next to index.html and style.css. - If the footer covers content: increase --contact-h OR reduce footer content size. - If text is hard to read: increase the overlay strength (make the two numbers bigger). - Hard refresh the browser to see changes: Windows (Ctrl+Shift+R), Mac (Cmd+Shift+R). ========================================================= */ :root { /* Global theme variables. Change these to affect the whole site. */ --bg: #C460BD; /* Accent color (not used as page background) */ --text: #f5f5f7; /* >>> EDIT HERE <<< Main text color. Try #ffffff for pure white. */ --muted: #d8cfe4; /* Secondary text color (subtle) */ --panel: rgba(255, 255, 255, 0.06); /* Panels (player box, table) background */ --border: rgba(255, 255, 255, 0.12); /* Panel/table border color */ --contact-h: 56px; /* >>> EDIT HERE <<< Fixed footer height. Increase if your footer wraps lines. */ } /* ========================================================= BACKGROUND (Animated stars under a dark overlay) - The GIF sits on the element so can stay transparent. - Swap the file name below to use a different image. ========================================================= */ html { /* Fallback color behind the GIF */ background-color: #000; /* >>> EDIT HERE <<< Swap 'starz.gif' to your own file name if needed. */ /* OVERLAY LAYER (first): darken for readability | IMAGE LAYER (second): your GIF */ /* overlay strength: increase 0.55 to 0.65/0.7 to darken; lower to lighten */ background-image: linear-gradient(rgba(17, 0, 16, 0.55), rgba(17, 0, 16, 0.55)), /* overlay strength */ url('starz.gif'); /* your animated stars GIF */ /* Cover the whole screen; center the image; no tiling */ background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; min-height: 100%; /* keep both layers fixed to the viewport */ background-attachment: fixed, fixed; min-height: 100%; } /* OPTIONAL (advanced): If your GIF is a small seamless tile, you can switch to tiling: background-size: auto, auto; background-repeat: no-repeat, repeat; */ /* ========================================================= BASE / RESET - Minimal reset and base typography. ========================================================= */ html, body { margin: 0; padding: 0; height: 100%; } *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } body { /* Keep body transparent so the GIF shows through */ background: transparent; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Prevent the fixed footer from covering content above it */ padding-bottom: var(--contact-h); } /* ========================================================= ACCESSIBILITY - Helpers for screen readers and keyboard users. ========================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; padding: 8px 12px; z-index: 1001; background: #ffffff; color: #111; border-radius: 6px; text-decoration: none; } /* ========================================================= LAYOUT (page container & logo) ========================================================= */ .maindiv { max-width: 960px; /* page width */ margin: 0 auto; /* center the page */ padding: 24px 16px 48px; /* space around content (bottom extra for comfort) */ display: flex; flex-direction: column; gap: 24px; /* space between blocks */ } .imagecontainer { display: flex; justify-content: center; } .imagecontainer img { width: 260px; /* >>> EDIT HERE <<< Change logo width (e.g., 200px or 320px) */ } /* ========================================================= PLAYER PANEL (holds the embedded player) - The panel look keeps text readable on top of the busy background. ========================================================= */ .player { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; align-items: center; justify-content: center; min-height: 100px; /* room for the embed */ } /* ========================================================= INFO TEXT (about paragraph) ========================================================= */ .info { display: flex; justify-content: center; } .info p { max-width: 65ch; margin: 0; } /* ========================================================= SCHEDULE TABLE - Readable, slightly transparent panel with zebra rows. - To make rows tighter/looser, change padding below. ========================================================= */ #scheduleTable { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; /* rounds the top row corners */ } #scheduleTable thead th { font-weight: 600; text-align: left; padding: 12px; /* Schedule table spacing: header */ border-bottom: 1px solid var(--border); } #scheduleTable tbody td { padding: 10px 12px; /* Schedule table spacing: cells */ border-bottom: 1px solid var(--border); } #scheduleTable tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.04); } /* ========================================================= CHAT AREA ========================================================= */ .chat-wrapper { display: flex; justify-content: center; } .embedded-chat-container { width: 100%; max-width: 720px; } /* ========================================================= FIXED CONTACT FOOTER (always visible at bottom) - If it covers content, increase --contact-h at the top of this file. - If it looks too opaque/transparent, tweak background rgba() below. ========================================================= */ .contact { position: fixed; left: 0; right: 0; bottom: 0; height: var(--contact-h); display: flex; align-items: center; justify-content: center; gap: 16px; background: rgba(0, 0, 0, 0.55); /* footer background transparency */ backdrop-filter: saturate(120%) blur(6px); /* glass effect (safe to remove) */ border-top: 1px solid var(--border); z-index: 1000; } .contact-link { color: var(--text); text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.4); padding: 2px 4px; letter-spacing: 0.5px; } /* ========================================================= SMALL SCREENS (phones) ========================================================= */ @media (max-width: 640px) { .imagecontainer img { width: 200px; } /* smaller logo on phones */ .maindiv { padding: 16px 12px 48px; gap: 16px; } #scheduleTable tbody td, #scheduleTable thead th { padding: 8px 10px; } }