/* ===== THE REAL GIRL MATH -SHARED STYLES ===== */ /* ===== SELF-HOSTED FONTS ===== */ /* Files live in /fonts/. Latin subset only. font-display:swap means text appears immediately in the fallback (Quicksand stack -> system sans), then swaps in once loaded. */ @font-face{font-family:'Fredoka One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fredoka-one.woff2') format('woff2');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/space-grotesk.woff2') format('woff2');} @font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/quicksand.woff2') format('woff2');} @font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/caveat.woff2') format('woff2');} /* ===== CSS VARIABLES ===== */ :root { --pink:#FF1493;--pink-hot:#FF007F;--pink-light:#FF69B4;--pink-pale:#FF85C8;--pink-bg:rgba(255,20,147,0.12); --purple:#C850C0;--purple-deep:#9B30FF;--purple-pale:#D88BFF; --yellow:#FFD700;--yellow-pale:rgba(255,215,0,0.12); --lime:#39FF14;--lime-pale:rgba(57,255,20,0.1); --mint:#00E5A0;--mint-pale:rgba(0,229,160,0.12); --dark:#0A0012;--dark-card:#160025;--dark-card2:#1E0033; --text:#F5EAFC;--text-mid:#E0C0F0;--text-soft:#BFA0D4; --glass:rgba(22,0,37,0.85);--glass-border:rgba(255,20,147,0.35); --r:28px;--r-sm:18px; } /* ===== RESET & BASE ===== */ *{margin:0;padding:0;box-sizing:border-box;} /* overflow-x:clip on prevents horizontal drift from off-screen decorative elements (stickers, ticker) without creating a scroll container — so position:sticky on the topbar keeps working. */ html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:88px;} body{ font-family:'Quicksand',-apple-system,sans-serif;color:var(--text); min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased; background:#0A0012; } /* ===== BACKGROUND GRADIENT (fixed pseudo-element to avoid iOS Safari background-attachment:fixed bug) ===== Previously lived on `body` with background-attachment:fixed, which caused jittery "sliding" during momentum scroll on iOS. Moving it to a position:fixed pseudo-element fixes the jitter at zero visual cost. Uses ::before (paints first) so the glow layer above can stack on top of it. */ body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background:linear-gradient(160deg,#0A0012 0%,#12001F 25%,#0D0018 50%,#150028 75%,#0A0012 100%); background-size:400% 400%;animation:bgShift 20s ease infinite; } /* ===== BACKGROUND GLOW (separate layer so its opacity animation doesn't interfere with the gradient shift) ===== */ body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image: radial-gradient(ellipse at 20% 20%, rgba(255,0,127,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(155,48,255,0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(57,255,20,0.03) 0%, transparent 40%), radial-gradient(ellipse at 90% 10%, rgba(255,215,0,0.04) 0%, transparent 35%); background-size:100% 100%; animation:bgGlow 8s ease-in-out infinite alternate; } /* ===== KEYFRAMES ===== */ @keyframes bgShift{0%{background-position:0% 50%;}25%{background-position:50% 100%;}50%{background-position:100% 50%;}75%{background-position:50% 0%;}100%{background-position:0% 50%;}} @keyframes bgGlow{0%{opacity:0.5;}100%{opacity:1;}} @keyframes heartBeat{0%,100%{transform:scale(1);}15%{transform:scale(1.3);}30%{transform:scale(1);}45%{transform:scale(1.2);}60%{transform:scale(1);}} @keyframes navShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}} @keyframes sparkleFloat{ 0%{transform:translateY(105vh) scale(0) rotate(0deg);opacity:0;} 15%{opacity:1;transform:translateY(80vh) scale(1) rotate(90deg);} 85%{opacity:0.8;transform:translateY(15vh) scale(0.8) rotate(270deg);} 100%{transform:translateY(-5vh) scale(0) rotate(360deg);opacity:0;} } @keyframes trailFade{0%{opacity:1;transform:scale(1) translateY(0);}100%{opacity:0;transform:scale(0) translateY(-30px) rotate(180deg);}} /* ===== CONFETTI (used on all calc result reveals) ===== */ .confetti{position:fixed;top:-10px;pointer-events:none;z-index:9997;animation:confettiFall linear forwards;} @keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1;}80%{opacity:1;}100%{transform:translateY(105vh) rotate(720deg);opacity:0;}} /* ===== SPARKLE PARTICLES ===== */ .sparkles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;} .sparkle{position:absolute;animation:sparkleFloat linear infinite;} .trail{position:fixed;pointer-events:none;z-index:9999;font-size:14px;animation:trailFade 0.8s ease-out forwards;} /* ===== NAV BAR ===== */ .topbar{position:sticky;top:0;z-index:100;background:linear-gradient(90deg,#FF007F,#9B30FF,#FF1493,#C850C0,#FF007F);background-size:300% 100%;animation:navShift 8s ease infinite;padding:0;overflow:visible;box-shadow:0 0 30px rgba(255,0,127,0.4),0 4px 0 rgba(0,0,0,0.3);border-bottom:2px solid var(--lime);} .topbar-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;} .topbar .brand{font-family:'Fredoka One','Space Grotesk',sans-serif;font-weight:400;font-size:16px;color:white;letter-spacing:0;text-shadow:0 2px 0 rgba(0,0,0,0.15),0 0 20px rgba(255,255,255,0.6);text-decoration:none;white-space:nowrap;} .topbar .brand .heart{display:inline-block;animation:heartBeat 1.5s ease infinite;font-size:18px;} .topbar-links{display:flex;gap:6px;} /* Subtle dark backing behind each link lifts contrast of lime text above the pink/purple gradient (WCAG AA) while preserving the y2k vibe. */ .topbar-links a{color:var(--lime);font-size:11px;font-weight:700;text-decoration:none;padding:6px 16px;border-radius:100px;border:2px solid rgba(57,255,20,0.4);background:rgba(10,0,18,0.45);transition:all 0.3s;letter-spacing:0.5px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,0.6),0 0 8px rgba(57,255,20,0.4);} .topbar-links a:hover{background:rgba(57,255,20,0.15);border-color:var(--lime);color:white;transform:translateY(-2px);box-shadow:0 0 12px rgba(57,255,20,0.3);text-shadow:0 0 12px rgba(255,255,255,0.5);} .topbar-links a.active{background:rgba(57,255,20,0.15);border-color:var(--lime);color:white;box-shadow:0 0 12px rgba(57,255,20,0.3);} /* ===== HAMBURGER MENU (MOBILE NAV) ===== */ .nav-toggle{display:none;background:none;border:2px solid rgba(57,255,20,0.4);border-radius:8px;padding:6px 8px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:38px;height:34px;transition:all 0.3s;} .nav-toggle span{display:block;width:18px;height:2px;background:var(--lime);border-radius:2px;transition:all 0.3s;} .nav-toggle:hover{border-color:var(--lime);background:rgba(57,255,20,0.1);} /* Mobile nav dropdown */ @media(max-width:900px){ .nav-toggle{display:flex;} .topbar-links{ display:none; position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0; background:linear-gradient(180deg,#1A002A 0%,#0D0018 100%); border-bottom:2px solid var(--lime); box-shadow:0 8px 32px rgba(0,0,0,0.4); padding:8px 0; } .topbar-links a{ border:none;border-radius:0; padding:14px 24px; font-size:13px; text-align:left; border-bottom:1px solid rgba(57,255,20,0.1); } .topbar-links a:last-child{border-bottom:none;} .topbar-links a:hover{transform:none;box-shadow:none;background:rgba(57,255,20,0.1);} /* Open state */ .topbar.nav-open .topbar-links{display:flex;} .topbar.nav-open .nav-toggle span:nth-child(1){transform:rotate(45deg) translate(4px,4px);} .topbar.nav-open .nav-toggle span:nth-child(2){opacity:0;} .topbar.nav-open .nav-toggle span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);} } /* ===== PAGE CONTAINER ===== */ .page{max-width:680px;margin:0 auto;padding:0 20px 100px;position:relative;z-index:1;} /* ===== HERO (shared between learn + about) ===== */ .hero{text-align:center;padding:60px 0 50px;position:relative;} .hero h1{font-family:'Fredoka One','Space Grotesk',sans-serif;font-weight:400;color:white;line-height:1.1;margin-bottom:16px;letter-spacing:-0.02em;text-shadow:0 0 30px rgba(255,20,147,0.3);} .hero h1 .line2{display:block;background:linear-gradient(90deg,#FF007F,#C850C0,#FF1493,#9B30FF);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:textShift 4s ease infinite;filter:drop-shadow(0 2px 4px rgba(255,0,127,0.2));} @keyframes textShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}} .hero .scribble{font-family:'Caveat',cursive;color:var(--lime);transform:rotate(-3deg);display:block;margin:12px 0 20px;text-shadow:0 0 16px rgba(57,255,20,0.4);} .hero .intro{font-size:16px;color:var(--text-mid);max-width:480px;margin:0 auto;line-height:1.8;font-weight:500;} /* ===== DIVIDER ===== */ .divider{text-align:center;padding:14px;font-size:20px;letter-spacing:10px;color:var(--pink);user-select:none;text-shadow:0 0 12px rgba(255,0,127,0.3);} /* ===== GLASS CARD ===== */ .gcard{background:#FFF0F6;border-radius:var(--r);padding:32px 26px;margin-bottom:16px;box-shadow:0 4px 24px rgba(0,0,0,0.15);transition:all 0.4s cubic-bezier(0.22,1,0.36,1);position:relative;overflow:visible;border:2px solid rgba(255,20,147,0.2);} .gcard:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.2);} /* ===== FOOTER ===== */ .foot{text-align:center;margin-top:48px;padding:28px 0;border-top:1px solid rgba(255,20,147,0.2);font-size:13px;color:var(--text-soft);line-height:1.8;} .foot b{font-weight:700;color:var(--pink);text-shadow:0 0 10px rgba(255,20,147,0.3);} .foot .hand{font-family:'Caveat',cursive;font-size:18px;color:var(--text-mid);display:block;margin-top:4px;} .foot::before{content:'\2665 \2605 \2665 \2605 \2665';display:block;letter-spacing:8px;color:var(--pink);margin-bottom:12px;font-size:14px;text-shadow:0 0 10px rgba(255,20,147,0.4);} /* ===== SKIP LINK ===== */ .skip-link{position:absolute;top:-40px;left:0;background:var(--pink);color:white;padding:8px 16px;z-index:10000;font-family:'Quicksand',sans-serif;font-size:14px;font-weight:700;border-radius:0 0 8px 0;transition:top 0.3s;} .skip-link:focus{top:0;} /* ===== HOVER LIFT (replaces inline onmouseover/onmouseout) ===== */ .hover-lift{transition:all 0.3s;} .hover-lift:hover{transform:translateY(-3px);} /* ===== RESPONSIVE ===== */ @media(max-width:500px){ .page{padding:0 14px 80px;} .gcard{padding:24px 18px;border-radius:20px;} } /* ===== REDUCED MOTION ===== */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;} .sparkles,.trail{display:none!important;} }