/* --- Global & Reset Styles --- */ /* Reset default browser styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #ffffff; /* Default text color is white */ } body { /* This is where you set the full-screen background. - Change 'images/your-background.jpg' to your file. */ background-image: url('images/background.png'); background-color: #000000; /* Fallback for a black background */ background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; /* Keeps the background static on scroll */ /* Flexbox layout to structure the page: - Header at the top - Footer at the bottom - Main content fills the space in between */ display: flex; flex-direction: column; min-height: 100vh; } a { color: #ffffff; text-decoration: none; transition: color 0.2s; } a:hover { color: #bbbbbb; /* Slightly fade on hover */ text-decoration: underline; } /* --- Header / Top Navigation --- */ .top-nav { width: 100%; padding: 24px 40px; /* More padding */ text-align: right; /* We use 'position: absolute' to ensure it's always at the top */ position: absolute; top: 0; right: 0; z-index: 10; } .top-nav a { font-size: 1.5rem; font-weight: 600; margin-left: 30px; text-transform: none; letter-spacing: 1px; } /* --- Main Content Container (Used on both pages) --- */ .container { /* This makes the main content take up the available space */ flex-grow: 1; /* Use flexbox to center the content inside it */ display: flex; flex-direction: column; justify-content: center; /* Vertical centering */ align-items: center; /* Horizontal centering */ text-align: center; padding: 20px; } /* --- 1. Landing Page Specifics (index.html) --- */ .landing-content .logo { max-width: 400px; /* Adjust as needed */ width: 100%; margin-bottom: 50px; } .landing-content h1 { font-size: 5rem; /* Large "Coming Soon!" */ font-weight: 700; /* A thinner, modern font-weight */ letter-spacing: 3px; text-transform: uppercase; margin-bottom: 35px; color: #eee; } .landing-content .loading-bar { max-width: 500px; /* Adjust as needed */ width: 90%; margin-top: 30px; } .loading { font-size: 40px; } /* --- 2. Access Denied Page Specifics (access-denied.html) --- */ .access-denied-content { /* Add a semi-transparent box to make it look 'techy' */ //background-color: rgba(10, 10, 10, 0.4); //border: 1px solid #333; padding: 40px 60px; max-width: 800px; border-radius: 5px; margin: auto; /* Use a monospaced font for the 'system' feel */ font-family: 'Courier New', Courier, monospace; } .access-denied-content h2 { font-size: 2rem; color: #00FF80; /* A "warning" yellow */ margin-bottom: 25px; font-weight: 700; } .access-denied-content p { font-size: 1.25rem; color: #fff; /* Slightly dimmer white */ line-height: 1.7; } .access-denied-content p:last-of-type { margin-top: 15px; } /* --- Footer --- */ .bottom-footer { width: 100%; padding: 30px 30px 80px; text-align: center; font-size: 2rem; color: #00FF80; text-shadow: 0 0 2px #FFFFFF; /* This will be at the bottom because of the flex layout on */ } .bottom-footer a { color: #00FF80; /* Dimmer color for the footer link */ font-weight: 300; } .bottom-footer a:hover { color: #ffffff; } /* ===================================================== --- Responsive Styles for Mobile & Tablet --- ===================================================== */ /* Apply these styles on screens 768px wide or smaller */ @media (max-width: 768px) { body { min-height: unset; } /* --- Header / Top Navigation --- */ .top-nav { padding: 20px; /* Reduce padding on sides */ text-align: center; /* Center links */ } .top-nav a { font-size: 1.1rem; /* Make menu text smaller */ margin-left: 15px; margin-right: 15px; /* Add margin on both sides for centering */ } /* --- 1. Landing Page Specifics (index.html) --- */ .landing-content .logo { max-width: 280px; /* Make logo smaller */ margin-bottom: 30px; /* Reduce space below logo */ } .landing-content h1 { font-size: 2.5rem; /* Significantly reduce "Coming Soon!" text */ margin-bottom: 25px; } .landing-content .loading-bar { max-width: 300px; /* Make loading bar smaller */ margin-top: 10px; } .loading { font-size: 1.25rem; /* Make "Loading..." text smaller */ } /* --- 2. Access Denied Page Specifics (access-denied.html) --- */ .access-denied-content { padding: 30px 20px; /* Reduce horizontal padding */ max-width: 90vw; /* Allow it to fill most of the screen width */ } .access-denied-content h2 { font-size: 1.5rem; /* Reduce header size */ } .access-denied-content p { font-size: 1rem; /* Reduce paragraph text size */ } /* --- Footer --- */ .bottom-footer { padding: 20px; /* Reduce footer padding */ font-size: 1.25rem; /* Reduce footer text size */ } }