|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/drsuper/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Math Circles • DrSuper.com</title>
<style>
:root{
--bg0:#0f1115;
--bg1:#151922;
--text:#f3f5f7;
--muted: rgba(243,245,247,0.80);
--gold:#f3d36c;
--goldBorder: rgba(243,211,108,0.85);
--shadow: 0 18px 60px rgba(0,0,0,0.55);
--max: 1600px;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
color:var(--text);
background:
radial-gradient(900px 520px at 20% -10%, rgba(255,255,255,0.08), transparent 60%),
radial-gradient(800px 520px at 85% 0%, rgba(255,255,255,0.06), transparent 62%),
linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 32%,var(--bg0) 100%);
}
a{color:inherit;text-decoration:none}
.wrap{
max-width:var(--max);
margin:0 auto;
padding:38px 28px 90px;
}
/* Big title ribbon (like your screenshot) */
.hero-title-box{
display:inline-block;
padding: 26px 44px;
margin: 0 0 18px;
background: linear-gradient(180deg, #f6db8b 0%, #e6c35f 100%);
color: #111;
font-weight: 900;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.12;
border-radius: 30px;
border: 2px solid rgba(243,211,108,0.65);
box-shadow:
0 10px 30px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.45);
}
.hero-lead{
margin: 10px 0 26px;
font-size: 22px;
font-weight: 800;
color: var(--gold);
max-width: 1200px;
}
/* One long box */
.mc-top{
border-radius: 32px;
border: 3px solid var(--goldBorder);
background: rgba(20,19,19,0.92);
box-shadow:
0 0 0 2px rgba(243,211,108,0.25),
0 28px 90px rgba(0,0,0,0.55);
padding: 26px 26px;
}
.mc-top h2{
margin:0 0 10px;
color: var(--gold);
font-size: 24px;
}
.mc-top p{
margin:0;
color: rgba(243,245,247,0.88);
font-size: 17px; /* was 18 */
line-height: 1.55;
max-width: 95ch;
}
/* 6 boxes grid */
.mc-grid{
margin-top: 22px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
@media(max-width: 1100px){
.mc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 720px){
.mc-grid{ grid-template-columns: 1fr; }
}
.mc-box{
border-radius: 30px;
border: 3px solid var(--goldBorder);
background: rgba(20,19,19,0.92);
box-shadow: 0 20px 60px rgba(0,0,0,0.55);
padding: 22px 22px 18px;
min-height: 220px;
}
.mc-box h3{
margin: 0 0 10px;
color: var(--gold);
font-size: 20px;
}
.mc-box ul{
margin: 0;
padding-left: 18px;
color: rgba(243,245,247,0.90);
line-height: 1.5;
}
.mc-box li{ margin: 4px 0; }
footer{
margin-top: 28px;
font-size: 14px;
opacity: .75;
color: rgba(243,245,247,0.75);
}
</style>
</head>
<body>
<main class="wrap">
<div class="hero-title-box">Math Circles</div>
<div class="hero-lead">
Weekly, story-driven sessions starting in 2022–2023 — built around discovery, explanation, and play.
</div>
<section class="mc-top">
<h2>What are Dr. Super Math Circles?</h2>
<p>
Our Math Circles are weekly sessions where students learn by exploring first, explaining ideas out loud,
and building intuition before formulas. We use puzzles, games, diagrams, and mini-experiments to connect
big ideas in mathematics and science. Below are the yearly folders — each box is a place for you to add
the year’s topics (and later we can link each one to a PDF).
</p>
</section>
<section class="mc-grid">
<div class="mc-box">
<a href="math_circle_2022-23.html" class="mc-link">
<h3>Math Circle 2022–2023</h3>
<ul>
<li>Topic bullet 1 (edit)</li>
<li>Topic bullet 2 (edit)</li>
<li>Topic bullet 3 (edit)</li>
<li>Topic bullet 4 (edit)</li>
</ul>
</a>
</div>
<div class="mc-box">
<h3>MC CM 2023–2024</h3>
<ul>
<li>Topic bullet 1 (edit)</li>
<li>Topic bullet 2 (edit)</li>
<li>Topic bullet 3 (edit)</li>
<li>Topic bullet 4 (edit)</li>
</ul>
</div>
<div class="mc-box">
<h3>MC CM 2024–2025</h3>
<ul>
<li>Topic bullet 1 (edit)</li>
<li>Topic bullet 2 (edit)</li>
<li>Topic bullet 3 (edit)</li>
<li>Topic bullet 4 (edit)</li>
</ul>
</div>
<div class="mc-box">
<h3>MC MCR 2025–2026</h3>
<ul>
<li>Topic bullet 1 (edit)</li>
<li>Topic bullet 2 (edit)</li>
<li>Topic bullet 3 (edit)</li>
<li>Topic bullet 4 (edit)</li>
</ul>
</div>
<div class="mc-box">
<h3>MC RA 2023–2024</h3>
<ul>
<li>Topic bullet 1 (edit)</li>
<li>Topic bullet 2 (edit)</li>
<li>Topic bullet 3 (edit)</li>
<li>Topic bullet 4 (edit)</li>
</ul>
</div>
<div class="mc-box">
<h3>MC RA 2024–2025</h3>
<ul>
<li>Topic bullet 1 (edit)</li>
<li>Topic bullet 2 (edit)</li>
<li>Topic bullet 3 (edit)</li>
<li>Topic bullet 4 (edit)</li>
</ul>
</div>
</section>
<footer>© 2026 DrSuper.com • Dr. Super & Spark</footer>
</main>
</body>
</html>