/* ===========================================================================
Maxwell — shared styles
Three looks, all built on real grade-school primary paper.
Pick a look by setting .
=========================================================================== */
:root {
--paper: #fffdf8; /* warm newsprint white */
--line-blue: #9db8d6; /* head/base ruling */
--line-base: #7fa3c9; /* slightly stronger baseline */
--line-red: #d98c8c; /* dashed midline */
--margin-red: #e7b3b3; /* left margin rule */
--band: clamp(64px, 11vh, 116px); /* height of one writing row */
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
min-height: 100dvh;
}
body {
display: grid;
place-items: center;
padding: 6vmin;
background-color: var(--paper);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
overflow: hidden; /* one calm screen, no scroll */
-webkit-font-smoothing: antialiased;
}
/* ---- Paper: blue head + base lines with a red dashed midline ------------- */
.paper-lines {
background-image:
url("data:image/svg+xml;utf8,");
background-size: 40px var(--band);
background-repeat: repeat;
}
/* faint left margin rule (hidden on small screens) */
.paper-lines::before {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: clamp(28px, 7vw, 96px);
width: 2px;
background: var(--margin-red);
opacity: .7;
}
@media (max-width: 620px) {
.paper-lines::before { display: none; }
}
/* subtle paper grain for realism */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: .04;
background-image:
url("data:image/svg+xml;utf8,");
}
/* ---- The name ----------------------------------------------------------- */
.stage {
position: relative;
width: 100%;
display: grid;
place-items: center;
z-index: 1;
}
.name {
display: block;
width: min(86vw, 1080px);
height: auto;
/* lift the graphite a hair off the page */
filter: drop-shadow(0 1px 0 rgba(40, 38, 45, .18));
transform-origin: 50% 60%;
/* slight crooked placement + a very gentle "bumpy bus" sway */
animation: bus-sway 11s ease-in-out infinite;
cursor: pointer;
user-select: none;
-webkit-user-drag: none;
}
/* very subtle continuous wobble, like writing on a moving bus */
@keyframes bus-sway {
0% { transform: rotate(-1.7deg) translateY(0); }
33% { transform: rotate(-1.4deg) translateY(-0.5px); }
66% { transform: rotate(-1.7deg) translateY(0.5px); }
100% { transform: rotate(-1.7deg) translateY(0); }
}
/* big tap/click shake — fun for a kid */
.name.shake { animation: bus-shake .6s ease-in-out; }
@keyframes bus-shake {
0%,100% { transform: rotate(-2deg); }
15% { transform: rotate(3deg) translateX(-6px); }
30% { transform: rotate(-4deg) translateX(6px); }
45% { transform: rotate(3deg) translateX(-5px) translateY(2px); }
60% { transform: rotate(-3deg) translateX(4px); }
80% { transform: rotate(1deg) translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
.name { animation: none; transform: rotate(-1.6deg); }
}
/* =========================================================================
OPTION VARIANTS
========================================================================= */
/* Option A — Classic primary tablet (white ruled paper) */
.opt-classic { /* uses defaults */ }
/* Option B — Real notebook photo background */
.opt-photo {
background-color: #efeae1;
background-image: url("assets/paper-photo.png");
background-size: cover;
background-position: center;
}
.opt-photo .name {
width: min(82vw, 1000px);
/* a touch more shadow so graphite reads on the photographed paper */
filter: drop-shadow(0 1px 1px rgba(40, 38, 45, .22));
}
/* Option C — Playful big, wide-ruled cream paper */
.opt-bold {
--paper: #fffef2;
--band: clamp(90px, 15vh, 150px); /* wide rule */
}
.opt-bold .name {
width: min(96vw, 1500px); /* HUGE — close to the edges */
}