/* ============================================================ global.css — Global root styles, design tokens & fonts Reusable across the whole project. Hand-written (not generated). Load this in alongside the compiled Tailwind style.css. ============================================================ */ /* ---- Google Font: Inter (used as "Inter Display" at large sizes) ---- */ @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap'); /* ============================================================ FONT FACES — local custom fonts (already in the project) ============================================================ */ /* Special / accent font */ @font-face { font-family: "Networkand"; src: url("../src/assets/font/NetworkFreeVersion.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Bold block font — Humane V.2.0 */ @font-face { font-family: "Humane"; src: url("../src/assets/font/Humane-Regular-BF6a48d3b8cf291.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Humane"; src: url("../src/assets/font/Humane-Medium-BF6a48d3b8cf2be.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } /* Navbar + footer font — Area Normal (Light / weight 300) */ @font-face { font-family: "Area Normal"; src: url("../src/assets/font/AreaNormalTrial-Light-BF65ea75c6c87b9.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } /* Display font — Groovezilla (section headings) */ @font-face { font-family: "Groovezilla"; src: url("../src/assets/font/DKS-GroovezillaPersonalUse-Reg.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================ ROOT DESIGN TOKENS (reusable variables) ============================================================ */ :root { /* ---- Colors ---- */ --color-bg: #0d0d0d; /* page background */ --color-white: #ffffff; --color-grey: #222222; --color-heading: rgb(20, 20, 20); /* heading text color */ /* ---- Font families ---- */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* text, buttons, paragraphs */ --font-heading: "Inter", system-ui, sans-serif; --font-special: "Networkand", sans-serif; /* special / accent font */ --font-nav: "Area Normal", "Inter", sans-serif; /* navbar + footer */ --font-block: "Groovezilla", "Humane", "Arial Narrow", sans-serif; /* big block text */ --font-groove: "Groovezilla", "Humane", sans-serif; /* display headings */ /* ---- Heading defaults (per spec) ---- */ --heading-weight: 600; --heading-size: 48px; --heading-line: 58px; /* ---- Layout (shared page margin — keep constant across header/footer) ---- */ --page-max-width: 72rem; /* matches header's max-w-6xl */ --page-gutter: 1.5rem; /* matches header's px-6 */ } /* ============================================================ BASE / GLOBAL STYLES ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Page-transition overlay (covers on load, wiped away by js/animations.js) */ .page-transition { position: fixed; inset: 0; z-index: 9999; background: #0d0d0d; pointer-events: none; will-change: transform; } body { margin: 0; background-color: var(--color-bg); color: var(--color-white); font-family: var(--font-body); font-optical-sizing: auto; /* gives "Inter Display" feel at large sizes */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* Text elements use the body (Inter) font */ p, button, input, textarea, select, .btn { font-family: var(--font-body); } /* Headings — Inter Display, weight 600, 48px / 58px, rgb(20,20,20) */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); color: var(--color-heading); font-optical-sizing: auto; } h1 { font-size: var(--heading-size); line-height: var(--heading-line); } a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; display: block; } /* ============================================================ REUSABLE HELPER CLASSES ============================================================ */ /* Font helpers */ .font-body { font-family: var(--font-body); } .font-special { font-family: var(--font-special); } .font-nav { font-family: var(--font-nav); } .font-block { font-family: var(--font-block); font-weight: 500; line-height: 0.9; } /* Color helpers */ .bg-dark { background-color: var(--color-bg); } .bg-grey { background-color: var(--color-grey); } .bg-white { background-color: var(--color-white); } .text-white { color: var(--color-white); } .text-grey { color: var(--color-grey); } .text-heading { color: var(--color-heading); } /* Structural helpers */ .navbar, .footer { font-family: var(--font-nav); } /* Heading style as a class (so you can apply the 48/58/600 look anywhere) */ .heading { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--heading-size); line-height: var(--heading-line); color: var(--color-heading); } /* Basic reusable button */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 8px; background-color: var(--color-white); color: var(--color-bg); font-weight: 600; cursor: pointer; transition: opacity 0.2s ease, transform 0.1s ease; } .btn:hover { opacity: 0.85; } .btn:active { transform: scale(0.97); }