Update README to document embedded styles

Clarify that styles are now embedded in index.html: update instructions to edit index.html for both content and styling, remove references to a separate styles.css file from the file structure and usage steps, point color customization to CSS variables in the <style> block, and remove a redundant GH Pages note.

Author: thinkdj

README.md

@@ -1,4 +1,4 @@
-# OopsKit
+# OopsKit
 
 ### Maintenance pages for your website
 
@@ -27,14 +27,13 @@ _This is a great way to keep your entire site: pages, assets, API et al. offline
 
 If you're not using Cloudflare, you can still use this page as a temporary landing page when your site is under maintenance by self hosting it on your own server.
 
-1. Temporarily replace your main index file with these files during maintenance periods (`index.html` and `styles.css`)
-2. Customize the message in `index.html` and/or modify colors and styles in `styles.css` to match your brand if needed
+1. Temporarily replace your main index file with `index.html` during maintenance periods
+2. Customize the message and styles directly in `index.html` to match your brand if needed
 
 ## File Structure
 
 ```
-├── index.html          # Main HTML file
-├── styles.css          # CSS styles with dark mode support
+├── index.html          # Main HTML file (includes embedded styles)
 └── README.md           # Documentation
 ```
 
@@ -51,7 +50,7 @@ Edit the text in `index.html`:
 
 ### Modifying Colors
 
-The color scheme can be customized in `styles.css`. The file includes both light and dark mode color variables.
+The color scheme can be customized via CSS variables near the top of the `<style>` block in `index.html`. The file includes both light and dark mode color variables.
 
 ## Browser Support
 
@@ -63,7 +62,6 @@ The color scheme can be customized in `styles.css`. The file includes both light
 
 Feel free to use this maintenance page for your projects. Attribution is appreciated but not required.
 
-You can even temporarily use the GH Pages url as your redirected landing page when your site is under maintenance.
 
 
 > 🕊️

index.html

@@ -10,7 +10,7 @@
     <meta name="author" content="thinkdj">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
     <style>
-        /* ── CSS Variables ── */
+        /* -- CSS Variables -- */
         :root {
             --primary:        #6366f1;
             --primary-glow:   rgba(99, 102, 241, 0.25);
@@ -41,7 +41,7 @@
             --toggle-shadow:  0 2px 6px rgba(0,0,0,0.4);
         }
 
-        /* ── Reset & Base ── */
+        /* -- Reset & Base -- */
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
         html { height: 100%; }
@@ -58,7 +58,7 @@
             position: relative;
         }
 
-        /* ── Background decoration ── */
+        /* -- Background decoration -- */
         body::before {
             content: '';
             position: fixed;
@@ -71,7 +71,7 @@
             transition: opacity var(--transition);
         }
 
-        /* ── Dark Mode Toggle ── */
+        /* -- Dark Mode Toggle -- */
         .theme-toggle {
             position: fixed;
             top: clamp(0.75rem, 2vw, 1.25rem);
@@ -116,7 +116,7 @@
             transform: rotate(20deg);
         }
 
-        /* ── Card ── */
+        /* -- Card -- */
         .container {
             position: relative;
             z-index: 1;
@@ -132,7 +132,7 @@
             transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
         }
 
-        /* ── Logo / Emoji ── */
+        /* -- Logo / Emoji -- */
         .logo {
             font-size: clamp(2.5rem, 8vw, 3.5rem);
             margin-bottom: clamp(1rem, 3vw, 1.75rem);
@@ -141,7 +141,7 @@
             filter: drop-shadow(0 4px 12px var(--primary-glow));
         }
 
-        /* ── Badge ── */
+        /* -- Badge -- */
         .badge {
             display: inline-flex;
             align-items: center;
@@ -165,7 +165,7 @@
             animation: pulse 1.8s ease-in-out infinite;
         }
 
-        /* ── Heading ── */
+        /* -- Heading -- */
         h1 {
             font-size: clamp(1.4rem, 4vw, 2rem);
             font-weight: 600;
@@ -176,7 +176,7 @@
             transition: color var(--transition);
         }
 
-        /* ── Body text ── */
+        /* -- Body text -- */
         p {
             font-size: clamp(0.875rem, 2.5vw, 1rem);
             color: var(--text-body);
@@ -185,7 +185,7 @@
             transition: color var(--transition);
         }
 
-        /* ── Progress ── */
+        /* -- Progress -- */
         .progress-container {
             width: 100%;
             height: 5px;
@@ -203,7 +203,7 @@
             animation: sweep 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
 
-        /* ── Divider ── */
+        /* -- Divider -- */
         .divider {
             width: 40px;
             height: 3px;
@@ -212,7 +212,7 @@
             margin: clamp(1.25rem, 3vw, 1.75rem) auto;
         }
 
-        /* ── Footer note ── */
+        /* -- Footer note -- */
         .footer-note {
             font-size: 0.78rem;
             color: var(--text-body);
@@ -221,7 +221,7 @@
             transition: color var(--transition);
         }
 
-        /* ── Keyframes ── */
+        /* -- Keyframes -- */
         @keyframes fadeUp {
             from { opacity: 0; transform: translateY(28px) scale(0.97); }
             to   { opacity: 1; transform: translateY(0)   scale(1); }
@@ -242,7 +242,7 @@
             50%       { opacity: 0.5; transform: scale(0.75); }
         }
 
-        /* ── Responsive tweaks ── */
+        /* -- Responsive tweaks -- */
         @media (max-width: 400px) {
             .container { border-radius: 14px; }
         }
@@ -251,7 +251,7 @@
             .container { max-width: 500px; }
         }
 
-        /* ── Reduced motion ── */
+        /* -- Reduced motion -- */
         @media (prefers-reduced-motion: reduce) {
             .logo, .progress-bar, .badge-dot { animation: none; }
             .container { animation: none; }