/* * ============================================================ * GRAFT LEAGUE — SHARED STYLESHEET * style.css * * Used by: index.html, morning-workout.html, leaderboard.html * * Brand palette (homepage colours — single source of truth): * --cream #f5f0e8 — page background (light) * --paper #ede8dc — secondary surface (light) * --ink #111111 — primary text / borders * --red #e63323 — primary accent (CTAs, highlights) * --yellow #f5c800 — secondary accent (badges, hover states) * --green #1a8a3c — success states * --blue #1a3a8a — informational * --muted #7a7060 — secondary text * --border #d4cfc0 — subtle borders * * Dark mode: * All colours are exposed as CSS custom properties on :root. * A [data-theme="dark"] override block is included at the * bottom of this file — ready to activate. To enable dark mode, * add data-theme="dark" to the element, or toggle it * via JS. All component styles reference the CSS vars so they * will respond automatically. * * Fonts (loaded via Google Fonts in each HTML ): * Bebas Neue — display / headings * Archivo Black — subheadings * Archivo — body text (replaces DM Sans on app pages) * * File structure: * 1. CSS custom properties (tokens) * 2. Reset & base * 3. Typography helpers * 4. Shared components (nav, buttons, grain, cursor, footer) * 5. Dark-mode overrides (ready to activate) * ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTIES (design tokens) ============================================================ */ :root { /* — Brand colours — */ --cream: #f5f0e8; /* Primary page background */ --paper: #ede8dc; /* Secondary surfaces, cards */ --ink: #111111; /* Primary text, borders, dark fills */ --red: #e63323; /* Primary accent — CTAs, highlights */ --yellow: #f5c800; /* Secondary accent — badges, hover */ --green: #1a8a3c; /* Success states */ --blue: #1a3a8a; /* Informational / link tones */ --muted: #7a7060; /* Secondary / placeholder text */ --border: #d4cfc0; /* Subtle dividers and outlines */ /* — Semantic surface aliases (use these in components) — */ --bg: var(--cream); /* Page background */ --surface: var(--paper); /* Card / panel background */ --text: var(--ink); /* Body text */ --accent: var(--red); /* Interactive accent */ --accent2: var(--yellow); /* Secondary interactive */ /* — Typography scale — */ --font-display: 'Bebas Neue', sans-serif; --font-sub: 'Archivo Black', sans-serif; --font-body: 'Archivo', sans-serif; } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Prevent font inflation on iOS */ } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; /* Custom cursor is enabled on desktop via the .cursor element. cursor:none is set here but overridden on mobile (see media query). */ cursor: none; } img, video { display: block; max-width: 100%; } button, input, textarea, select { font-family: inherit; font-size: inherit; } a { color: inherit; } /* ============================================================ 3. TYPOGRAPHY HELPERS ============================================================ */ /* Utility: all-caps tracking label used above section headings */ .eyebrow, .section-label { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); font-weight: 500; margin-bottom: 1rem; } /* Large display heading — Bebas Neue */ .section-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.92; margin-bottom: 4rem; } /* ============================================================ 4. SHARED COMPONENTS ============================================================ */ /* ---------------------------------------------------------- GRAIN OVERLAY A subtle paper-grain texture applied across all pages via a pseudo-element on . Gives the warm printed feel. pointer-events:none ensures it never blocks interaction. ---------------------------------------------------------- */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 998; } /* ---------------------------------------------------------- CUSTOM CURSOR Red dot that expands on interactive elements. Hidden on touch devices (see media query at bottom). ---------------------------------------------------------- */ .cursor { position: fixed; width: 20px; height: 20px; background: var(--red); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s, width 0.2s, height 0.2s, background 0.2s; mix-blend-mode: multiply; } /* Expanded state on hover over interactive elements */ .cursor.big { width: 56px; height: 56px; background: var(--yellow); } /* ---------------------------------------------------------- NAVIGATION (homepage only — app pages use a simpler header) Fixed top bar with logo and nav links. ---------------------------------------------------------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2.5rem; background: var(--bg); border-bottom: 2px solid var(--ink); } .nav-logo { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; } /* Red accent on the 'Graft' part of the logo */ .nav-logo span { color: var(--red); } .nav-links { display: flex; gap: 2rem; align-items: center; } .nav-links a { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.15s; } .nav-links a:hover { color: var(--ink); } /* CTA button in the nav */ .nav-cta { background: var(--ink) !important; color: var(--cream) !important; padding: 0.55rem 1.25rem; border-radius: 4px; } .nav-cta:hover { background: var(--red) !important; color: #fff !important; } /* ---------------------------------------------------------- BUTTONS .btn-primary — solid ink block with shadow effect .btn-secondary — text-only underline link ---------------------------------------------------------- */ .btn-primary { display: inline-block; background: var(--ink); color: var(--cream); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.08em; padding: 1rem 2.5rem; text-decoration: none; border: 2px solid var(--ink); transition: background 0.15s, color 0.15s, transform 0.1s; position: relative; } /* Offset shadow behind the button */ .btn-primary::after { content: ''; position: absolute; bottom: -5px; right: -5px; width: 100%; height: 100%; border: 2px solid var(--ink); z-index: -1; transition: bottom 0.1s, right 0.1s; } .btn-primary:hover { background: var(--red); border-color: var(--red); transform: translate(-2px, -2px); } .btn-primary:hover::after { bottom: -7px; right: -7px; border-color: var(--red); } /* Underline-only secondary link */ .btn-secondary { display: inline-block; background: transparent; color: var(--ink); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--muted); padding-bottom: 2px; transition: border-color 0.15s, color 0.15s; } .btn-secondary:hover { color: var(--red); border-color: var(--red); } /* ---------------------------------------------------------- SCROLL REVEAL ANIMATION Add class="reveal" to any element that should fade up on scroll. JS on each page uses IntersectionObserver to add .visible when the element enters the viewport. ---------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ---------------------------------------------------------- SECTION WRAPPER Standard padding and bottom border used across most sections. ---------------------------------------------------------- */ .section { padding: 6rem 2.5rem; border-bottom: 2px solid var(--ink); } /* ---------------------------------------------------------- FOOTER (shared across all pages) ---------------------------------------------------------- */ footer { padding: 3rem 2.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; border-top: 1px solid var(--border); } .footer-logo { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); } .footer-logo span { color: var(--red); } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-size: 0.72rem; color: var(--muted); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.15s; } .footer-links a:hover { color: var(--ink); } .footer-copy { font-size: 0.7rem; color: var(--border); } /* ---------------------------------------------------------- PILLS / TAGS Used on roadmap, exercise cards, etc. ---------------------------------------------------------- */ /* Base pill — neutral */ .pill { display: inline-block; background: var(--paper); border: 1px solid var(--border); border-radius: 100px; font-size: 0.66rem; font-weight: 500; padding: 0.25rem 0.65rem; color: var(--text); letter-spacing: 0.04em; } /* Red accent pill */ .pill.accent { background: rgba(230, 51, 35, 0.08); border-color: rgba(230, 51, 35, 0.25); color: var(--red); } /* Yellow accent pill */ .pill.yellow { background: rgba(245, 200, 0, 0.1); border-color: rgba(245, 200, 0, 0.35); color: #7a6000; } /* Roadmap status tags */ .roadmap-tag { display: inline-block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 100px; margin-bottom: 0.75rem; } .tag-live { background: rgba(26,138,60,0.1); color: var(--green); border: 1px solid rgba(26,138,60,0.3); } .tag-soon { background: rgba(245,200,0,0.12); color: #9a7800; border: 1px solid rgba(245,200,0,0.4); } .tag-later { background: rgba(26,58,138,0.08); color: var(--blue); border: 1px solid rgba(26,58,138,0.2); } /* ---------------------------------------------------------- FADE-IN KEYFRAME Used by overlay screens (nick, pin) on app pages. ---------------------------------------------------------- */ @keyframes fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .anim { animation: fade-in 0.35s ease; } /* ============================================================ 5. DARK MODE OVERRIDES ------------------------------------------------------- Not active yet — to enable, add data-theme="dark" to or use: document.documentElement.setAttribute('data-theme','dark') All CSS custom properties are redefined here so every component that references var(--bg), var(--text), etc. will adapt automatically. No component styles need changing. ============================================================ */ [data-theme="dark"] { /* Surfaces — deep black base, not grey */ --bg: #0a0a0a; --surface: #141414; --paper: #1c1c1c; --cream: #0a0a0a; /* Text — bright white, readable */ --text: #f0ece4; --ink: #f0ece4; --muted: #888880; --border: #2a2826; /* Brand accents — kept bold, they sing on dark */ --red: #e63323; --yellow: #f5c800; --green: #22bb55; --blue: #4a7aff; /* Semantic aliases */ --accent: var(--red); --accent2: var(--yellow); } /* Grain more visible on dark — atmospheric */ [data-theme="dark"] body::after { opacity: 0.35; } /* Pills look better inverted on dark */ [data-theme="dark"] .pill { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #aaa; } [data-theme="dark"] .pill.accent { background: rgba(230, 51, 35, 0.15); border-color: rgba(230, 51, 35, 0.4); color: #ff6655; } [data-theme="dark"] .pill.yellow { background: rgba(245, 200, 0, 0.12); border-color: rgba(245, 200, 0, 0.35); color: var(--yellow); } /* ============================================================ RESPONSIVE — MOBILE (shared rules) Page-specific breakpoint rules live in workout.css / leaderboard.css. These are the global shared ones. ============================================================ */ @media (max-width: 768px) { /* Hide custom cursor on touch devices */ body { cursor: auto; } .cursor { display: none; } /* Navigation collapses links on mobile */ nav { padding: 1rem 1.25rem; } .nav-links { display: none; } /* Sections get tighter padding */ .section { padding: 4rem 1.25rem; } /* Footer stacks vertically */ footer { flex-direction: column; text-align: center; padding: 2rem 1.25rem; } } /* ── Dark mode cursor fix ─────────────────────────────────── mix-blend-mode:multiply hides the cursor on dark backgrounds. Switch to normal blend mode on dark theme. */ [data-theme="dark"] .cursor { mix-blend-mode: normal; opacity: 0.85; }