/* ------------------------------------------------- core.css – shared foundation ------------------------------------------------- */ /* 1️⃣ Reset / box‑sizing */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 2️⃣ Base typography */ html { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; background: #111; color: #eee; } /* -------------------------------------------------------------- LIGHT MODE (default) – variables live in :root -------------------------------------------------------------- */ :root { --bg-primary: #111; /* page background */ --bg-secondary:#222; /* cards, panels, navbars */ --txt-primary: #eee; /* main text */ --txt-muted: #aaa; /* secondary text, placeholders */ --accent: #0ff; /* links, buttons, highlights */ } /* -------------------------------------------------------------- DARK MODE – activated when gets the .dark class -------------------------------------------------------------- */ html.dark { --bg-primary: #000; --bg-secondary:#111; --txt-primary: #fff; --txt-muted: #bbb; } /* -------------------------------------------------------------- Apply the variables (example – you probably already have these) -------------------------------------------------------------- */ body { background: var(--bg-primary); color: var(--txt-primary); transition: background-color .3s ease, color .3s ease; /* smooth fade */ } /* Example for header/footer (optional) */ .site-header, .site-footer { background: var(--bg-secondary); color: var(--txt-primary); } /* Links / buttons use the accent colour */ a, button { color: var(--accent); } /* 4️⃣ Utility classes (grid, spacing) */ .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Simple margin helpers */ .mt-1 { margin-top: 0.5rem; } .mb-1 { margin-bottom: 0.5rem; } .p-1 { padding: 0.5rem; } /* 5️⃣ Header/footer base (shared) */ .site-header, .site-footer { background: var(--c-bg-mid); color: var(--c-text-light); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; } .site-header a, .site-footer a { color: var(--c-primary); text-decoration: none; } /* .site-header a:hover, */ /* .site-footer a:hover { text-decoration: underline; } */ /* -------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------- HOME PAGE – centered title, bold sans‑serif, simple nav tabs -------------------------------------------------------------- */ /* 1️⃣ Title */ .site-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* sans‑serif */ font-size: clamp(3rem, 10vw, 6rem); /* responsive scaling */ font-weight: 900; /* ultra‑bold */ color: var(--accent); text-align: center; margin: 0.5rem 0; } /* 2️⃣ Navigation tabs */ .main-nav ul { display: flex; justify-content: center; gap: 1.5rem; list-style: none; padding: 0; margin: 0.5rem 0; } .main-nav a { color: var(--txt-primary); text-decoration: none; font-family: inherit; font-size: 1.1rem; padding: .3rem .6rem; border-radius: .3rem; transition: background .2s, color .2s; } /* Highlight the current page */ .main-nav a:active, { /* .main-nav a:hover */ background: var(--accent); color: var(--bg-primary); } /* 3️⃣ Hero / tagline (optional) */ .hero { text-align: center; margin-top: 2rem; padding: 0 1rem; } .tagline { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(1rem, 2.5vw, 1.4rem); color: var(--txt-muted); } /* 4️⃣ Footer – keep it tiny and centered */ .site-footer { text-align: center; padding: 1rem; background: var(--bg-secondary); color: var(--txt-muted); margin-top: 3rem; } /* 5️⃣ Ensure the whole page uses the same background */ body { background: var(--bg-primary); color: var(--txt-primary); } /* 6️⃣ Smooth transition when toggling dark mode */ html { transition: background-color .3s ease, color .3s ease; } .site-title { opacity: 0; transform: translateY(-20px); animation: fadeInTitle .6s forwards ease-out; } @keyframes fadeInTitle { to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------- NAVIGATION LINKS – hover underline & active fill -------------------------------------------------------------- */