/* ============================================ variables.css — Global CSS Variables & Reset Edit colors, fonts, spacing here globally ============================================ */ :root { /* Light Theme */ --bg: #f5f5f0; --bg2: #eceee8; --fg: #0d0d0d; --fg2: #555; --accent: #6c63ff; --accent2: #a0f060; --card: #ffffff; --border: rgba(0, 0, 0, 0.08); --nav-bg: rgba(245, 245, 240, 0.88); --tag-bg: #e8e8e2; --tag-fg: #0d0d0d; --toggle-bg: #d0d0c8; --shadow: 0 8px 40px rgba(0, 0, 0, 0.08); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.12); } [data-theme="dark"] { --bg: #111110; --bg2: #1a1a18; --fg: #f0f0ea; --fg2: #888; --accent: #a0f060; --accent2: #6c63ff; --card: #1e1e1c; --border: rgba(255, 255, 255, 0.07); --nav-bg: rgba(17, 17, 16, 0.9); --tag-bg: #252522; --tag-fg: #f0f0ea; --toggle-bg: #333; --shadow: 0 8px 40px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5); } /* ---- FONTS ---- */ /* Loaded in index.html */ /* ---- RESET ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--fg); transition: background 0.4s ease, color 0.4s ease; overflow-x: hidden; line-height: 1.6; } /* ---- TYPOGRAPHY ---- */ .display-font { font-family: 'Bebas Neue', sans-serif; letter-spacing: -0.01em; } .mono-font { font-family: 'Space Mono', monospace; } /* ---- UTILITY CLASSES ---- */ .container { max-width: 1200px; margin: 0 auto; width: 100%; } .section-label { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; display: block; } .section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 5.5vw, 76px); color: var(--fg); line-height: 0.95; margin-bottom: 48px; } /* ---- BUTTONS ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform 0.15s, background 0.3s, color 0.3s; cursor: pointer; border: none; font-family: 'DM Sans', sans-serif; letter-spacing: 0.01em; } .btn-primary { background: var(--fg); color: var(--bg); } .btn-primary:hover { transform: scale(1.04); } .btn-outline { background: transparent; color: var(--fg); border: 1.5px solid var(--border); } .btn-outline:hover { background: var(--tag-bg); transform: scale(1.04); } /* ---- TAGS ---- */ .tag { background: var(--tag-bg); color: var(--tag-fg); padding: 3px 11px; border-radius: 100px; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; display: inline-block; } .tag.accent { background: var(--accent); color: #fff; } [data-theme="dark"] .tag.accent { color: #111; } /* ---- SCROLL REVEAL ---- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: none; } /* ---- SECTIONS ---- */ section { padding: 100px 40px; } /* ---- RESPONSIVE ---- */ @media (max-width: 900px) { section { padding: 70px 20px; } }