|
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>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YNL3KPNR37"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YNL3KPNR37');
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>DrSuper.com</title>
<style>
:root{
--bg0:#0f1115;
--bg1:#151922;
--big0: rgba(255,255,255,0.09);
--big1: rgba(255,255,255,0.05);
--text:#f3f5f7;
--muted: rgba(243,245,247,0.78);
--line: rgba(255,255,255,0.12);
--gold:#f3d36c;
--goldBorder:#e3c352;
--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}
.topbar{
position:sticky;top:0;z-index:10;
background:rgba(21,25,34,.72);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.topbar-inner{
max-width:var(--max);
margin:0 auto;
padding:14px 22px;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.nav{
display:flex;
gap:14px;
}
.chip{
padding:12px 18px;
border-radius:999px;
font-weight:800;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,0.06); /* OPTIONAL tweak */
box-shadow: 0 0 0 1px rgba(243,211,108,0.25); /* ADD */
border: 2px solid rgba(243,211,108,0.75);
color: var(--gold);
background: rgba(0,0,0,0.25);
}
.wrap{
max-width:var(--max);
margin:0 auto;
padding:28px 24px 80px;
}
.hero-row{
display: grid;
grid-template-columns: 3.6fr 1.4fr;
gap: 26px;
align-items: stretch;
}
@media(max-width:900px){
.hero-row{grid-template-columns:1fr}
}
.big{
position: relative;
border-radius: 32px;
/* GOLD FRAME */
border: 4px solid rgba(243,211,108,0.85);
background: linear-gradient(180deg,var(--big0),var(--big1));
box-shadow:
0 0 0 2px rgba(243,211,108,0.35),
0 28px 90px rgba(0,0,0,0.65);
}
.big-link{
display:block;
padding:42px 36px 64px;
text-align:center;
}
.title{
font-size:clamp(36px,3vw,56px);
margin:0 0 14px;
}
.subtitle{
font-size:20px;
max-width:70ch;
margin:0 auto 22px;
color:var(--muted);
}
.btn.gold{
padding:14px 22px;
font-size:17px;
font-weight:900;
border-radius:18px;
background:linear-gradient(135deg,var(--gold),#fff6c7);
border:1px solid var(--goldBorder);
color:#1b1b1b;
}
.powered{
position:absolute;
left:20px;
bottom:18px;
font-size:14px;
opacity:.7;
}
.comments{
border-radius:28px;
padding:24px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
display:flex;
flex-direction:column;
justify-content:center;
border-radius: 28px;
border: 3px solid rgba(243,211,108,0.85); /* GOLD FRAME */
background: rgba(255,255,255,0.06);
box-shadow:
0 0 0 2px rgba(243,211,108,0.35),
0 22px 70px rgba(0,0,0,0.6);
}
.email{
margin-top:12px;
padding:14px 18px;
border-radius:18px;
font-weight:900;
background:rgba(0,0,0,.25);
border:1px solid rgba(255,255,255,.18);
border: 2px solid rgba(243,211,108,0.75);
color: var(--gold);
background: rgba(0,0,0,0.25);
}
.thumbs{
margin-top:28px;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:22px;
}
@media(max-width:1100px){
.thumbs{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
.thumbs{grid-template-columns:repeat(2,1fr)}
}
.tile{
position: relative;
overflow: hidden;
width: 100%;
border-radius:26px;
background:red;
border: 3px solid rgba(243,211,108,0.75); /* GOLD OUTER FRAME */
box-shadow:
0 0 0 1px rgba(243,211,108,0.35),
0 20px 60px rgba(0,0,0,0.55);
aspect-ratio: 4 / 3; /* ← THIS replaces “height” */
}
.tile .mat img{
width: 100%;
height: 100%;
object-fit: contain; /* shows the black around the image */
display: block;
}
.tile:hover .overlay .title{
color: var(--gold); /* ← GOLD on hover */
}
/* inner image frame */
.mat{
position:absolute;
inset:10px;
border-radius:18px;
overflow:hidden;
border:3px solid rgba(243,211,108,0.9);
background: rgba(255,255,255,0.92); /* ← eliminates black behind image */
}
.mat img{
width:100%;
height:100%;
object-fit: cover; /* ← IMPORTANT: removes black bars */
display:block;
}
.tile img{
width:100%;
height:100%;
object-fit:cover; /* use 'contain' if you want no cropping */
display:block;
}
.thumb{
width:110px;
height:110px;
border-radius:22px;
border:3px solid var(--gold);
display:grid;
place-items:center;
font-size:28px;
}
footer{
margin-top:40px;
font-size:14px;
opacity:.7;
}
/* ===== HOME GRID TILE OVERRIDES (paste at very end) ===== */
.grid{
display:grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 26px;
}
/* Make sure this tile is NOT flex/padded (kills the “two tiles” look) */
.grid > .tile{
position: relative !important;
display: block !important; /* overrides display:flex */
padding: 0 !important; /* overrides padding:22px */
gap: 0 !important; /* overrides gap:18px */
align-items: initial !important;
overflow: hidden !important;
width: 100%;
aspect-ratio: 4 / 3; /* sets a real height */
border-radius: 26px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
}
/* Inner gold frame */
.grid > .tile .mat{
position: absolute;
inset: 10px;
border-radius: 18px;
overflow: hidden;
border: 3px solid rgba(243,211,108,0.9);
background: rgba(243,211,108,0.6); /* removes black behind image */
z-index: 1;
}
/* Image fills frame */
.grid > .tile .mat img{
width: 100%;
height: 100%;
object-fit: contain; /* use cover if you prefer cropping */
display: block;
}
/* Hover overlay */
.grid > .tile .overlay{
position: absolute;
inset: 0;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding: 18px;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.85));
opacity: 0;
transition: opacity .25s ease;
z-index: 2;
}
.grid > .tile:hover .overlay{ opacity: 1; }
.grid > .tile .overlay .title{
margin:0 0 6px;
font-size: 20px;
font-weight: 900;
color: #fff;
transition: color .25s ease;
}
.grid > .tile:hover .overlay .title{
color: var(--gold);
}
.grid > .tile .overlay .desc{
margin:0;
font-size: 14px;
color: rgba(243,245,247,.85);
}
/* FORCE gold outer tile frame */
.grid > .tile{
border: 4px solid rgba(243,211,108,0.85) !important;
background: rgba(255,255,255,0.04) !important;
}
.chip:hover{
box-shadow:
0 0 0 2px rgba(243,211,108,0.9),
0 8px 26px rgba(0,0,0,0.45);
}
.big-footer{
position:absolute;
left:20px;
right:20px;
bottom:18px;
display:flex;
align-items:center;
justify-content:space-between;
font-size:14px;
color:rgba(243,245,247,0.75);
}
.big-footer .left{ text-align:left; }
.big-footer .right{ text-align:right; }
/* TRUE visual centering */
.big-footer .center{
position:absolute;
left:50%;
transform:translateX(-50%);
text-align:center;
}
.home-grid{
display:grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap:26px;
align-items:stretch;
}
.home-grid{
display:grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap:26px;
}
.home-grid > .big{
grid-column: 1 / span 4;
}
.home-grid > .comments{
grid-column: 5 / span 1;
}
.hero-single{
position: relative;
padding: 56px 48px 72px;
border-radius: 34px;
background: radial-gradient(
circle at top,
#2b2f36 0%,
#16191f 70%
);
border: 3px solid rgba(243,211,108,0.85);
box-shadow:
0 0 0 2px rgba(243,211,108,0.35),
0 40px 90px rgba(0,0,0,0.65);
text-align: center;
}
/* Text */
.hero-single .title{
font-size: clamp(34px, 4vw, 56px);
font-weight: 800;
margin-bottom: 18px;
}
.hero-single .subtitle{
font-size: 20px;
max-width: 900px;
margin: 0 auto 28px;
color: #d6d9df;
}
/* CTA */
.hero-single .cta{
margin-top: 16px;
}
/* Footer */
.big-footer{
position:absolute;
left:32px;
right:32px;
bottom:20px;
display:flex;
justify-content:space-between;
font-size:14px;
color: var(--gold);
}
.hero-mid{
font-size: 24px;
font-weight:800;
color: var(--gold); /* same gold as buttons */
margin-bottom: 40px; /* increase as needed */
}
.hero-title-box{
display:inline-block;
padding: 26px 40px;
margin-bottom: 6px;
background: linear-gradient(
180deg,
#f6db8b 0%,
#e6c35f 100%
);
color: #111;
font-weight: 800;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.15;
border-radius: 28px;
box-shadow:
0 10px 30px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.45);
}
.email:hover{
background: rgba(243,211,108,0.15);
color: #fff;
}
.chip[href^="mailto"]:hover{
background: rgba(243,211,108,0.15);
}
.chip:hover{
background: rgba(243,211,108,0.18); /* gold tint */
color: #fff;
border-color: rgba(243,211,108,1);
box-shadow:
0 0 0 2px rgba(243,211,108,0.9),
0 8px 26px rgba(0,0,0,0.45);
cursor: pointer;
}
/* ===== iPhone HERO FIX (auto-added) ===== */
@media (max-width: 480px){
/* Make the title ribbon full width so words don't stack */
.hero-title-box{
display: block;
width: 100%;
max-width: 100%;
margin: 12px auto 14px;
padding: 16px 14px;
background: linear-gradient(
90deg,
rgba(243,211,108,0.22),
rgba(243,211,108,0.04)
);
border: 2px solid rgba(243,211,108,0.75);
border-radius: 20px;
box-sizing: border-box;
text-align: center;
}
/* Shrink title so it fits nicely */
.title{
font-size: 22px !important;
line-height: 1.12 !important;
text-align:center !important;
margin:0 !important;
}
/* Stop footer overlap on mobile */
.big-footer{
position: static !important;
margin-top: 10px !important;
display: block !important;
text-align: center !important;
font-size: 12px !important;
}
.big-footer .left,
.big-footer .center,
.big-footer .right{
position: static !important;
transform: none !important;
margin: 4px 0 !important;
text-align: center !important;
}
/* Chips: smaller + wrap nicely */
.chips{ justify-content:center !important; }
.chip{ padding: 8px 12px !important; font-size: 12.5px !important; }
/* Reduce hero padding a bit */
.hero{ padding: 18px 16px 18px !important; }
}
/* ===== iPhone portrait fixes (final) ===== */
@media (max-width: 480px){
.topbar-inner{ padding: 10px 12px; }
.nav{ flex-wrap: wrap; justify-content:center; gap:10px; }
.chip{ padding: 8px 12px; font-size: 12.5px; }
.wrap{ padding: 16px 12px 40px; }
.hero-single{
padding: 18px 14px 18px;
border-radius: 22px;
overflow: hidden;
}
.hero-title-box{
display:block;
width: 100%;
margin: 10px auto 10px;
padding: 14px 12px;
border-radius: 18px;
background: linear-gradient(90deg,
rgba(243,211,108,0.55) 0%,
rgba(243,211,108,0.12) 100%
);
}
.hero-single .title{
font-size: 22px;
line-height: 1.12;
margin: 0;
text-align:center;
}
.hero-mid{
font-size: 16px;
margin: 12px 0 14px;
}
.big-footer{
position: static;
margin-top: 10px;
display: block;
text-align: center;
font-size: 12px;
}
.big-footer .left,
.big-footer .center,
.big-footer .right{
position: static;
transform: none;
margin: 4px 0;
text-align: center;
}
.grid{
grid-template-columns: 1fr !important;
gap: 14px !important;
margin-top: 14px;
}
.grid > .tile{
aspect-ratio: 16 / 9 !important;
}
}
</style>
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="nav">
<a class="chip" href="about_drsuper.html">About Dr. Super</a>
<!-- <a class="chip" href="about_math_circles.html">About Math Circles</a> -->
<a class="chip" href="under_construction.html">About Math Circles</a>
<a class="chip" href="about_calculus_mechanics_series.html">About Adventures in Calculus & Mechanics </a>
<a class="chip" href="mailto:[email protected]?subject=Comment%20about%20DrSuper.com%20site"
title="Send ccomments & suggestions to Dr. Super" to Dr. Super>
[email protected]
</a>
</div>
</div>
</div>
<div class="wrap">
<!-- HERO ROW -->
<div class="hero-single">
<a class="big-link" href="CalculusMechanics/index.html">
<div class="hero-title-box">
<h1 class="title">Adventures in Calculus & Mechanics for Young and Curious Minds</h1>
</div>
<p class="hero-mid">
A visual, story-driven journey through motion, derivatives, and integrals.
</p>
<p> </p>
<div class="cta">
<span class="btn gold">Enter the Adventure Hub</span>
</div>
</a>
<div class="big-footer">
<div class="left">
Created by: Dr. Super & Spark (Powered by ChatGPT)
</div>
<div class="center">
Inspired by: <b>Calculus</b> 3Blue1Brown in YouTube
</div>
<div class="right">
Piloted by: Math Circle Team — Cyrus, Marc & Rooz
</div>
</div>
<div class="grid">
<a class="tile" href="https://www.youtube.com/watch?v=WUvTyaaNkzM&list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr" title="Calculus 3B1B">
<div class="mat">
<img src="CalculusMechanics/images/Calculus_3B1B_image.png" alt="Calculus 3B1B thumbnail">
</div>
<div class="overlay">
<div>
<p class="title">Calculus 3B1B</p>
<p class="desc">Essence of Calculus - 3Blue1Brown</p>
</div>
</div>
</a>
<a class="tile" href="CalculusMechanics/adventure_1_activity_1_student.html" title="Calculus & Mechanics Main Hub">
<div class="mat">
<img src="CalculusMechanics/images/adventure_1_image_1_solution.png"
alt="Adventure 1 thumbnail">
</div>
<div class="overlay">
<div>
<p class="title">Measuring the World with a Stick</p>
<p class="desc">Adventure 1</p>
</div>
</div>
</a>
<a class="tile" href="CalculusMechanics/adventure_9_home.html" title="Adventure 9">
<div class="mat">
<img src="CalculusMechanics/images/adventure_9_chart.png"
alt="Adventure 9 thumbnail">
</div>
<div class="overlay">
<div>
<p class="title">Euler’s number and the Age of the Earth</p>
<p class="desc">Adventure 9</p>
</div>
</div>
</a>
<a class="tile" href="CalculusMechanics/adventure_13_home.html" title="Adventure 13">
<div class="mat">
<img src="CalculusMechanics/images/adventure_13_chart_1.png"
alt="Adventure 13 thumbnail">
</div>
<div class="overlay">
<div>
<p class="title">Drawing Curves: Critical Points - Max, Min, and Inflection Point</p>
<p class="desc">Adventure 13</p>
</div>
</div>
</a>
<a class="tile" href="Scratch/index.html" title="Scratch">
<div class="mat">
<img src="Scratch/images/suplogo_2x.gif"alt="Scratch">
</div>
<div class="overlay">
<div>
<p class="title">DrSuper Scratch Projects</p>
<p class="desc">Projects</p>
</div>
</div>
</a>
</div>
</div>
<footer>© 2026 DrSuper.com v11</footer>
</body>
</html>