/* ------------------------------------------------- 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: var(--bg-primary); color: var(--txt-primary); } /* -------------------------------------------------------------- LIGHT MODE (default) – variables live in :root -------------------------------------------------------------- */ :root { /* Windows-like Light */ --bg-primary: #f3f4f6; /* page background */ --bg-secondary: #ffffff; /* cards, panels, navbars */ --txt-primary: #111827; /* main text */ --txt-muted: #6b7280; /* secondary text */ --accent: #2563eb; /* Windows-ish blue */ --border: #d1d5db; /* Slightly more accentuated surfaces (avoid white-on-white) */ --header-bg: #ffffff; --footer-bg: #f8fafc; --surface-tint: #eef2ff; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08); --shadow-md: 0 10px 24px rgba(16, 24, 40, 0.10); --hero-bg: linear-gradient(135deg, var(--surface-tint), #ffffff); /* Back-compat aliases used by page-specific CSS */ --c-bg-dark: var(--bg-primary); --c-bg-mid: var(--bg-secondary); --c-text-light: var(--txt-primary); --c-text-muted: var(--txt-muted); --c-primary: var(--accent); /* Nav theming */ --nav-active-bg: var(--accent); --nav-active-text: #ffffff; --nav-underline: var(--accent); } /* -------------------------------------------------------------- DARK MODE – activated when gets the .dark class -------------------------------------------------------------- */ html.dark { /* Windows-like Dark */ --bg-primary: #0f1115; --bg-secondary: #1a1f27; --txt-primary: #e5e7eb; --txt-muted: #9ca3af; --accent: #60a5fa; --border: #30363d; --header-bg: #12161d; --footer-bg: #12161d; --surface-tint: #0b1220; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 14px 30px rgba(0,0,0,.45); --hero-bg: linear-gradient(135deg, var(--surface-tint), #0f172a); --nav-active-bg: var(--accent); --nav-active-text: #0b1220; } /* -------------------------------------------------------------- Apply the variables (example – you probably already have these) -------------------------------------------------------------- */ body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-primary); color: var(--txt-primary); transition: background-color .3s ease, color .3s ease; /* smooth fade */ } main { flex: 1; } /* Example for header/footer (optional) */ .site-header { background: var(--header-bg); color: var(--txt-primary); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .site-footer { background: var(--footer-bg); color: var(--txt-primary); border-top: 1px solid var(--border); } /* Links / buttons use the accent colour */ a, button { color: var(--accent); } /* Windows-like theme toggle button */ #theme-toggle { appearance: none; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--txt-primary); border-radius: 999px; padding: .35rem .6rem; line-height: 1; font-size: 1.05rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: background-color .2s ease, border-color .2s ease, transform .05s ease; } #theme-toggle:hover { border-color: color-mix(in srgb, var(--border), var(--accent) 40%); } #theme-toggle:active { transform: translateY(1px); } #theme-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent), transparent 35%); outline-offset: 2px; } /* 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 { color: var(--txt-primary); 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: color .2s ease; position: relative; } /* Animated underline on hover */ .main-nav a::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -.2rem; height: 2px; background: var(--nav-underline); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; opacity: .9; } .main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); } /* Active/current page: filled pill, no underline */ .main-nav a.active { background: var(--nav-active-bg); color: var(--nav-active-text); } .main-nav a.active::after { transform: scaleX(0); } .main-nav a.active:hover::after, .main-nav a.active:focus-visible::after { transform: scaleX(0); } @media (prefers-reduced-motion: reduce) { .main-nav a, .main-nav a::after { transition: none; } } /* 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 { margin-top: auto; text-align: center; padding: 1rem; background: var(--bg-secondary); color: var(--txt-muted); } /* 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 -------------------------------------------------------------- */