/* ============================================================= PRAXIS TUITION — Global Stylesheet Tailwind handles most styling. This file covers: - Smooth scroll - Navbar transparency / scroll state - Active nav link underline - Hero backgrounds (brand red) - Fade-in animations - Page hero banners for inner pages - Misc utilities BRAND PALETTE (extracted from praxis.sg Instagram) --praxis-red: #C8391A — dominant red, hero backgrounds & CTAs --praxis-cream: #F5EDE0 — warm parchment, light section backgrounds --praxis-dark: #3D1010 — near-black maroon, text on cream --praxis-white: #FFFFFF — text on red backgrounds ============================================================= */ /* ---- Base ---- */ html { scroll-behavior: smooth; } /* ---- Navbar ---- */ #navbar { background: transparent; } #navbar.scrolled { background: #3D1007; /* brand-900 — dark maroon */ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } /* Active nav link — cream underline on red/dark background */ .nav-active { position: relative; } .nav-active::after { content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: #F5EDE0; /* cream */ border-radius: 2px; } /* ---- Hero backgrounds ---- */ /* Home page — deep red to brand red, subtle warmth */ .hero-home { background: linear-gradient(160deg, #3D1007 0%, #C8391A 55%, #D95030 100%); } /* Inner pages — slightly flatter for editorial feel */ .hero-inner { background: linear-gradient(160deg, #3D1007 0%, #C8391A 75%); } /* ---- Fade-in scroll animation ---- */ .fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Staggered children inside a fade-in parent */ .fade-in:nth-child(2) { transition-delay: 0.1s; } .fade-in:nth-child(3) { transition-delay: 0.2s; } .fade-in:nth-child(4) { transition-delay: 0.3s; } /* ---- Form autofill override (dark/red backgrounds) ---- */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.1) inset; -webkit-text-fill-color: white; caret-color: white; } /* ---- School logo grid placeholders ---- */ .school-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .school-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(200, 57, 26, 0.12); } /* ---- Resource cards ---- */ .resource-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .resource-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(200, 57, 26, 0.18); } /* ---- Typography: Times New Roman for all UI + structural elements ---- CSS handles everything whose font isn't set by an explicit Tailwind class. Lengthy

paragraphs inherit Inter from and are intentionally left untouched. -------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, #navbar *, footer *, button, label, select, li { font-family: "Times New Roman", Times, Georgia, serif; } /* ---- Typewriter cursor ---- */ .typewriter-cursor { display: inline-block; color: #F5EDE0; /* cream — matches text-cream-200 */ font-weight: 300; margin-left: 1px; animation: cursor-blink 0.8s step-end infinite; } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Pause the cursor while actively typing (class toggled by JS) */ .typewriter-cursor.typing { animation: none; opacity: 1; } /* Force GPU compositing layer — eliminates mobile bitmap cache artifacts that appear as white dots after characters are erased */ #typewriter-text { transform: translateZ(0); -webkit-font-smoothing: antialiased; backface-visibility: hidden; } /* ---- Service cards ---- */ .service-card { transition: box-shadow 0.2s ease; } .service-card:hover { box-shadow: 0 8px 32px rgba(200, 57, 26, 0.12); }