/* === base.css === */ /* ===== Global mobile-safe guards (put at top of base.css) ===== */ /* viewport + sizing baseline */ html { box-sizing: border-box; font-size: 16px; /* baseline for rems */ } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; width: 100%; overflow-x: hidden; /* stop horizontal scroll */ font-family: var(--font-body, system-ui, sans-serif); color: var(--color-text-main, #e0e7ff); background: var(--color-primary-bg, #080a1f); line-height: 1.7; position: relative; } /* media never overflows */ img, svg, video, canvas { max-width: 100%; height: auto; display: block; } /* site wrappers – never exceed viewport width */ .site-wrap, .container, .page, .content { max-width: 1200px; /* adjust as you like */ width: 100%; /* avoid 100vw to prevent scrollbar spill */ margin-inline: auto; padding-inline: clamp(12px, 4vw, 24px); } /* common culprits: off-canvas/mobile menus wider than screen */ .mobile-menu, .nav-drawer, .offcanvas, .header .nav { width: 100%; max-width: 100%; } /* optional: lock body when menu is open */ .body-locked { overflow: hidden; position: fixed; inset: 0; width: 100%; } /* ---- your reset can be minimal now ---- */ a { color: var(--color-highlight-cyber, #00e5ff); text-decoration: none; transition: color .2s, text-shadow .2s; } a:hover { color: var(--color-accent-glow, #a076f9); text-shadow: 0 0 8px var(--color-accent-glow, #a076f9); } /* Define Core Theme Variables */ :root { /* Sci-Fi Fantasy Color Palette (Adjust these to your vision!) */ --color-primary-bg: #080a1f; /* Very dark blue/purple - main background */ --color-secondary-bg: #121538; /* Slightly lighter for containers, cards */ --color-accent-glow: #A076F9; /* Glowing purple (your CTA color) */ --color-highlight-cyber: #00E5FF; /* Cyber blue/teal highlight */ --color-text-main: #E0E7FF; /* Main light text (slightly blueish white) */ --color-text-muted: #979FCD; /* Muted text for less emphasis */ --color-text-headings: #FFFFFF; /* Bright white for main headings */ --color-border: rgba(160, 118, 249, 0.3); /* Subtle border color */ /* Fonts (Ensure these are linked from Google Fonts in your HTML ) */ --font-body: "Exo 2", sans-serif; --font-headings: "Spectral SC", serif; /* Spacing Units */ --spacing-xs: 4px; --spacing-s: 8px; --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-xxl: 48px; /* Borders & Shadows */ --border-radius-main: 4px; --box-shadow-glow-soft: 0 0 15px rgba(160, 118, 249, 0.3); /* Softer glow */ --box-shadow-glow-strong: 0 0 20px rgba(160, 118, 249, 0.6); /* NEW: Add a max-width for content on large screens */ --container-width: 1100px; } /* === Base & Mobile-First Styles === */ /* Set base font size for responsive rem units */ html { font-size: 16px; /* This is our baseline */ } body { font-family: var(--font-body); color: var(--color-text-main); background-color: var(--color-primary-bg); line-height: 1.7; position: relative; overflow-x: hidden; /* Prevents accidental horizontal scrolling */ } /* Default Link Styling */ a { color: var(--color-highlight-cyber); text-decoration: none; transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out; } a:hover { color: var(--color-accent-glow); text-shadow: 0 0 8px var(--color-accent-glow); } /* Headings Styling (Mobile First) */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); color: var(--color-text-headings); margin-top: var(--spacing-l); margin-bottom: var(--spacing-m); line-height: 1.3; font-weight: 700; } /* Scaled down font-sizes for mobile readability */ h1 { font-size: 2.2rem; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); } h2 { font-size: 1.8rem; } h3 { font-size: 1.5rem; color: var(--color-accent-glow); } h4 { font-size: 1.2rem; } p { margin-bottom: var(--spacing-m); } ul, ol { margin-bottom: var(--spacing-m); padding-left: var(--spacing-l); } li { margin-bottom: var(--spacing-s); } img { max-width: 100%; height: auto; display: block; } hr { border: 0; height: 1px; background: var(--color-border); margin: var(--spacing-xl) 0; } /* NEW: Utility Container Class */ /* This class will center your content and give it breathing room on larger screens */ .container { width: 100%; padding-left: var(--spacing-m); /* Add padding for mobile */ padding-right: var(--spacing-m); margin-left: auto; margin-right: auto; } /* === Responsive Media Queries (Tablet and up) === */ /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { html { font-size: 17px; /* Slightly increase base font size */ } /* Increase heading sizes for better visual hierarchy on tablets */ h1 { font-size: 2.5rem; } h2 { font-size: 2.0rem; } h3 { font-size: 1.6rem; } h4 { font-size: 1.3rem; } .container { max-width: 720px; /* Constrain container width on tablets */ } } /* Large devices (desktops, 1024px and up) */ @media (min-width: 1024px) { html { font-size: 18px; /* Final base font size for desktops */ } /* Restore or increase heading sizes for desktop */ h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.8rem; } h4 { font-size: 1.5rem; } .container { max-width: 960px; /* Wider container for standard desktops */ } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .container { max-width: var(--container-width); /* Use the variable we set in :root */ } }