/* ============================================================ SITE-BASE.CSS — George Loves Maths ------------------------------------------------------------ Shared chrome used on every page. Link this BEFORE any page-specific stylesheet so page styles can override. Loads in tandem with this Google Fonts request (put it in each page's ): Contents 1. Design tokens (CSS variables) 2. Global reset-ish + selection 3. Typography (body, headings, p) 4. Reusable .section / .ruler-top card 5. Reusable .btn-gradient CTA 6. Floating shapes + float keyframes 7. Footer 8. Sticky "Book now" CTA + jitter keyframes 9. Mobile media query (for shared classes only) ============================================================ */ /* 1. DESIGN TOKENS ------------------------------------------ */ :root { --primary: #4f46e5; /* Electric Indigo */ --accent: #facc15; /* Yellow */ --red-pen: #dc2626; --green-pen: #16a34a; --surface: #ffffff; --text: #0f172a; --grid-color: #cbd5e1; --border-width: 2px; --shadow-distance: 6px; } /* 2. SELECTION --------------------------------------------- */ ::selection { background: var(--accent); color: #000; } /* 3. TYPOGRAPHY -------------------------------------------- */ body { margin: 0; font-family: 'Inter', sans-serif; color: var(--text); background-color: #f8fafc; background-image: radial-gradient(var(--grid-color) 1px, transparent 1px); background-size: 24px 24px; line-height: 1.5; overflow-x: hidden; } h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; margin-top: 0; margin-bottom: 0.75rem; color: #000; letter-spacing: -0.03em; text-align: center; } p { margin-top: 0; margin-bottom: 0.75rem; color: #334155; } /* 4. REUSABLE EXERCISE-BOOK CARD --------------------------- */ .section { max-width: 900px; margin: 3rem auto; padding: 0; background: #fff; border-radius: 16px; border: var(--border-width) solid #000; box-shadow: var(--shadow-distance) var(--shadow-distance) 0px #000; position: relative; overflow: hidden; } .ruler-top { height: 35px; width: 100%; background-color: var(--accent); border-bottom: 2px solid #000; background-image: linear-gradient(90deg, #000 2px, transparent 2px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 40px 15px, 10px 8px; background-repeat: repeat-x; background-position: 10px bottom, 10px bottom; } .section-content { padding: 2rem; background: #fff; } /* Big page-title style, used inside .section heroes. Blue text, yellow thick underline; hover swaps the two. */ .banner-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 2rem; line-height: 1.1; color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 6px; text-underline-offset: 4px; transition: all 0.2s ease; } .banner-title:hover, .banner-title:active { color: #000; text-decoration-color: var(--primary); } /* Top-of-page "← Home" navigation button. Sits in a .page-top-nav wrapper so it aligns with the .section card below. */ .page-top-nav { max-width: 900px; margin: 1.5rem auto 0; padding: 0 1rem; } .home-back-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: #fff; color: #000; border: 2px solid #000; border-radius: 8px; box-shadow: 3px 3px 0 #000; padding: 0.45rem 0.95rem 0.45rem 0.75rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .home-back-btn:hover, .home-back-btn:active { background: var(--accent); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; } .home-back-arrow { font-size: 1.05rem; line-height: 1; } /* 5. REUSABLE CTA BUTTON ----------------------------------- */ .btn-gradient { display: block; width: 100%; padding: 1rem; box-sizing: border-box; background: var(--accent); color: #000; font-weight: 700; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 8px; font-family: 'Space Grotesk', sans-serif; transition: all 0.2s ease; border: 2px solid #000; box-shadow: 4px 4px 0px rgba(0,0,0,1); } .btn-gradient:hover, .btn-gradient:active { background: var(--green-pen); color: #fff; transform: translateY(-2px); box-shadow: 6px 6px 0px rgba(0,0,0,1); } /* 6. FLOATING SHAPES --------------------------------------- */ .shape { position: fixed; z-index: -1; opacity: 0.32; animation: float 10s infinite ease-in-out; pointer-events: none; } .shape-triangle { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 28px solid var(--accent); background: transparent; } .shape-circle { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--red-pen); background: transparent; } .shape-square { width: 26px; height: 26px; border: 3px solid var(--primary); background: rgba(255,255,255,0.3); transform: rotate(12deg); } .shape-diamond { width: 24px; height: 24px; border: 3px solid var(--green-pen); background: transparent; transform: rotate(45deg); } .shape-plus { width: 28px; height: 28px; position: fixed; } .shape-plus::before, .shape-plus::after { content: ''; position: absolute; background: var(--primary); border-radius: 2px; } .shape-plus::before { width: 28px; height: 4px; top: 12px; left: 0; } .shape-plus::after { width: 4px; height: 28px; top: 0; left: 12px; } @keyframes float { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-24px) rotate(180deg); } 100% { transform: translateY(0px) rotate(360deg); } } /* 7. FOOTER ------------------------------------------------ */ footer { text-align: center; margin-top: 2rem; padding-bottom: 3rem; } footer .footer-link { text-decoration: none; display: inline-block; } .footer-social-icon { height: 35px; padding: 8px 12px; background: #fff; border: 2px solid #000; border-radius: 8px; transition: all 0.2s ease; display: block; opacity: 0.8; } .footer-social-icon:hover, .footer-social-icon:active { transform: translateY(-3px) rotate(5deg); opacity: 1; box-shadow: 4px 4px 0px #000; } /* 8. STICKY BOOK CTA --------------------------------------- */ .sticky-book { position: fixed; bottom: 20px; right: 20px; background: var(--accent); color: #000; font-weight: 700; padding: 1rem 1.5rem; border-radius: 9999px; border: 2px solid #000; box-shadow: 4px 4px 0px rgba(0,0,0,1); text-decoration: none; transition: transform 0.2s; z-index: 999; font-family: 'Space Grotesk', sans-serif; animation: jitter 3s infinite; } .sticky-book:hover, .sticky-book:active { transform: scale(1.05) translate(-2px, -2px); background: var(--primary); color: #fff; box-shadow: 6px 6px 0px rgba(0,0,0,1); } @keyframes jitter { 0% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(-2px, 2px) rotate(-1deg); } 50% { transform: translate(2px, -1px) rotate(1deg); } 75% { transform: translate(-1px, -2px) rotate(0deg); } 100% { transform: translate(0,0) rotate(0deg); } } /* 9. MOBILE (shared classes only) -------------------------- */ @media (max-width: 768px) { .section { margin-left: 1rem; margin-right: 1rem; } .section-content { padding: 1.25rem; } }