/*======================================== GOOGLE FONTS Fraunces, Inter, and IBM Plex Mono are loaded via tags in the HTML — see index.html Fraunces — display serif, carries the "official exam report" gravitas Inter — body workhorse, stays legible at every size IBM Plex Mono — for every number/stat/score, reinforces the report motif ========================================*/ /*======================================== ROOT VARIABLES ========================================*/ :root{ --primary:#0A4FAF; --primary-dark:#063970; --secondary:#2E86FF; /* New accent — used sparingly: highlight marks, "recommended" ribbons, score badges */ --accent:#E8A93A; --accent-dark:#C98A1F; --accent-light:#FDF3DF; --white:#ffffff; --light:#F7FAFF; --paper:#FCFDFF; --gray:#6B7280; --dark:#0F1B2D; --border:#E5E7EB; --rule:#DCE4F0; --success:#18B26A; --radius:18px; --radius-sm:12px; --shadow-sm:0 8px 25px rgba(10,29,73,.06); --shadow:0 15px 40px rgba(10,29,73,.10); --shadow-lg:0 25px 60px rgba(10,29,73,.14); --transition:.35s ease; --container:1250px; --font-display:'Fraunces','Georgia',serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace; } /*======================================== RESET ========================================*/ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; max-width:100%; } body{ font-family:var(--font-body); background:var(--light); color:var(--dark); overflow-x:hidden; width:100%; max-width:100%; line-height:1.7; padding-top:90px; position:relative; } img{ display:block; max-width:100%; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } .container{ width:100%; max-width:1250px; margin:auto; padding-left:20px; padding-right:20px; } /*======================================== TYPOGRAPHY ========================================*/ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; letter-spacing:-.01em; } .section-title{ font-size:42px; margin-bottom:18px; text-align:center; } .section-text{ max-width:700px; margin:auto; text-align:center; color:var(--gray); } /* Any stat, score, price, or count on the page uses the mono face */ .mono-stat{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.01em; } /*======================================== BUTTONS ========================================*/ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 34px; border-radius:50px; font-weight:600; font-family:var(--font-body); transition:.35s; cursor:pointer; } .btn-primary{ background:linear-gradient(135deg,#0A4FAF,#2E86FF); color:white; box-shadow:0 10px 30px rgba(46,134,255,.35); } .btn-primary:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(46,134,255,.4); } .btn-outline{ border:2px solid var(--primary); color:var(--primary); background:white; } .btn-outline:hover{ background:var(--primary); color:white; } /*======================================== GLASS EFFECT ========================================*/ .glass{ background:rgba(255,255,255,.65); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.35); } /*======================================== HIGHLIGHT MARK The "highlighter" accent applied directly to text — grounded in the study-guide subject itself ========================================*/ .highlight-mark{ position:relative; white-space:nowrap; } .highlight-mark::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:2px; height:.4em; background:var(--accent); opacity:.45; z-index:-1; border-radius:3px; } /*======================================== HEADER ========================================*/ .header{ position:fixed; top:0; left:0; width:100%; z-index:1000; background:#fff; box-shadow:0 8px 30px rgba(10,29,73,.06); } .navbar{ display:flex; align-items:center; justify-content:space-between; min-height:85px; width:100%; position:relative; } .logo{ text-decoration:none; } .logo h2{ color:var(--primary); font-size:30px; font-weight:700; font-family:var(--font-display); } .nav-links{ display:flex; align-items:center; gap:32px; flex-wrap:nowrap; } .nav-links a{ font-weight:600; font-family:var(--font-body); color:var(--dark); transition:.3s; } .nav-links a:hover{ color:var(--primary); } .nav-right{ display:flex; align-items:center; gap:18px; } .buy-btn{ padding:14px 30px; border-radius:50px; background:linear-gradient(135deg,#0A4FAF,#2E86FF); color:#fff; font-weight:600; transition:.3s; } .buy-btn:hover{ transform:translateY(-3px); } .menu-toggle{ display:none; width:46px; height:46px; border:none; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:6px; } .menu-toggle span{ width:28px; height:3px; background:var(--primary); border-radius:20px; transition:.35s; } /*======================================== SECTION ========================================*/ section{ padding:120px 0; position:relative; } /*======================================== BACKGROUND BLOBS ========================================*/ .blob{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.16; z-index:-1; } .blob-1{ width:420px; height:420px; background:#2E86FF; top:-120px; right:-150px; } .blob-2{ width:350px; height:350px; background:#0A4FAF; left:-150px; bottom:-100px; } /*======================================== UTILITY CLASSES ========================================*/ .text-center{ text-align:center; } .mt-1{margin-top:10px;} .mt-2{margin-top:20px;} .mt-3{margin-top:30px;} .mt-4{margin-top:40px;} .mt-5{margin-top:60px;} .mb-1{margin-bottom:10px;} .mb-2{margin-bottom:20px;} .mb-3{margin-bottom:30px;} .mb-4{margin-bottom:40px;} .mb-5{margin-bottom:60px;} .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:35px; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } @media(max-width:992px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } } .demo-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:18px 28px; border:2px solid var(--primary); border-radius:16px; background:white; color:var(--primary); font-size:17px; font-weight:700; font-family:var(--font-body); text-decoration:none; transition:.3s; margin-left:18px; } .demo-btn:hover{ background:var(--primary); color:white; transform:translateY(-3px); box-shadow:0 12px 25px rgba(10,79,175,.25); } /*======================================== HAMBURGER ANIMATION ========================================*/ .menu-toggle.active span:nth-child(1){ transform:rotate(45deg) translateY(13px); } .menu-toggle.active span:nth-child(2){ opacity:0; } .menu-toggle.active span:nth-child(3){ transform:rotate(-45deg) translateY(-13px); } /*======================================== MOBILE MENU (hidden by default, shown only via media query + .active) ========================================*/ .mobile-menu{ display:none; } /*======================================== ABOUT TEAS — single column now that the image has been removed ========================================*/ .about-content-solo{ max-width:820px; margin:0 auto; } .hero{ overflow:hidden; } .hero-container{ width:100%; }