/* =========================================================
MR BENIMARU — shared design system
Retro / nostalgic NFT landing site (plain HTML/CSS/JS)
========================================================= */
/* Fonts are loaded via in each page's (faster than @import here).
Zen Maru Gothic is the Japanese partner face — rounded like Fredoka/Quicksand —
so the 日本語 toggle doesn't fall back to a bare system font. */
:root {
/* palette sampled from the wordmark */
--bg: #FBF7EF; /* warm off-white paper */
--bg-2: #F4ECDD; /* slightly deeper panel */
--ink: #2B2B2B; /* text + cartoon outlines */
--orange: #F0895D;
--blue: #8FC5E8;
--purple: #B79FD4;
--yellow: #F5D06A;
--green: #9FCB8E;
--teal: #7FCDC0;
--pink: #F2A0A8;
--red: #E5352B; /* rising-sun red */
/* darker text-weight accents — the pastels above fail WCAG AA as small text
on the paper bg, so these carry accent-coloured *text* (headings/labels/tags)
while the pastels stay for fills. --green-ink doubles as the door linework. */
--orange-ink: #B0461E; /* 5.25:1 on --bg */
--green-ink: #4E7A39; /* 4.72:1 on --bg */
--line: #2B2B2B; /* bold cartoon outline */
--shadow: 6px 6px 0 var(--line);
--shadow-sm: 4px 4px 0 var(--line);
--radius: 18px;
--maxw: 1120px;
--font-head: 'Fraunces', 'Zen Maru Gothic', serif;
--font-body: 'EB Garamond', 'Zen Maru Gothic', serif;
}
* { box-sizing: border-box; }
::selection { background: var(--yellow); color: var(--ink); }
/* cross-fade between pages instead of a hard white flash (progressive enhancement) */
@view-transition { navigation: auto; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* short pages: footer still sits at the bottom of the viewport */
min-height: 100svh;
display: flex;
flex-direction: column;
font-family: var(--font-body);
/* EB Garamond runs small for its em size — compensate a touch */
font-size: 1.0625rem;
font-weight: 500;
color: var(--ink);
background-color: var(--bg);
/* faint dotty paper texture */
background-image: radial-gradient(var(--bg-2) 1px, transparent 1px);
background-size: 22px 22px;
line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-head); line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: inherit; }
/* height:auto keeps images with width/height attributes (set for layout
stability) from stretching when CSS narrows them */
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(3rem, 8vw, 6rem) 0; }
.center { text-align: center; }
.lead { font-size: 1.3rem; max-width: 60ch; }
.eyebrow {
font-family: var(--font-head);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
font-size: .85rem;
color: var(--orange-ink);
margin-bottom: .6rem;
}
/* keyboard users jump straight past the nav; invisible until focused */
.skip-link {
position: absolute;
left: -9999px;
z-index: 100;
padding: .7rem 1.2rem;
font-family: var(--font-head);
font-weight: 600;
text-decoration: none;
color: var(--ink);
background: var(--yellow);
border: 3px solid var(--line);
border-radius: 999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.05rem;
text-decoration: none;
cursor: pointer;
padding: .85rem 1.6rem;
border: 3px solid var(--line);
border-radius: 999px;
background: var(--blue);
color: var(--ink);
box-shadow: var(--shadow-sm);
transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
/* .btn--goo blanks its own border, so this outer ring is the only focus cue */
.btn:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
.btn--primary { background: var(--orange); }
.btn--ghost { background: var(--bg); }
.btn--purple { background: var(--purple); }
/* ---------- Nav ---------- */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(251, 247, 239, .9);
backdrop-filter: blur(8px);
border-bottom: 3px solid var(--line);
}
.nav__inner {
width: min(100% - 2.4rem, var(--maxw));
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .7rem 0;
}
.nav__brand {
display: flex;
align-items: center;
gap: .55rem;
text-decoration: none;
font-family: var(--font-head);
font-weight: 700;
font-size: 1.25rem;
}
.nav__brand .dot {
width: 26px; height: 26px;
background: var(--red);
border-radius: 50%;
border: 2px solid var(--line);
flex: 0 0 auto;
}
.nav__links {
display: flex;
align-items: center;
gap: .35rem;
list-style: none;
margin: 0; padding: 0;
}
.nav__links a {
text-decoration: none;
font-family: var(--font-head);
font-weight: 500;
padding: .45rem .8rem;
border-radius: 999px;
border: 3px solid transparent;
transition: background .15s ease, border-color .15s ease;
}
.nav__links a:hover { background: var(--bg-2); }
.nav__links a:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
.nav__links a.is-active {
background: var(--yellow);
border-color: var(--line);
}
.nav__toggle {
display: none;
border: 3px solid var(--line);
background: var(--bg);
border-radius: 12px;
width: 46px; height: 42px;
cursor: pointer;
font-size: 1.2rem;
}
/* push everything after the brand to the right edge of the bar */
.nav__brand { margin-right: auto; }
/* language flag toggle */
.lang-toggle {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: var(--font-head);
font-weight: 500;
font-size: .9rem;
line-height: 1;
cursor: pointer;
padding: .4rem .7rem;
background: var(--bg);
border: 3px solid var(--line);
border-radius: 999px;
transition: background .15s ease, transform .1s ease;
}
.lang-toggle:hover { background: var(--bg-2); }
.lang-toggle:active { transform: translateY(1px); }
.lang-toggle:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
.lang-toggle__flag { font-size: 1.2rem; }
@media (max-width: 760px) {
.nav__toggle { display: block; }
.nav__links {
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: .25rem;
background: var(--bg);
border-bottom: 3px solid var(--line);
padding: .8rem 1.2rem 1.2rem;
display: none;
}
.nav__links.is-open { display: flex; }
.nav__links a { padding: .7rem .8rem; }
.lang-toggle__label { display: none; } /* flag-only to save space */
}
/* ---------- Hero ---------- */
.hero {
position: relative;
overflow: hidden;
text-align: center;
padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 5.5rem);
/* soft pastel wash so the hero reads as its own scene, not flat paper */
background:
radial-gradient(110% 80% at 50% -10%, rgba(143, 197, 232, .26), transparent 58%),
radial-gradient(60% 55% at 88% 14%, rgba(245, 208, 106, .20), transparent 52%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__logo {
display: block;
width: min(92%, 760px);
margin: 0 auto 1.6rem;
/* the banner JPG has a baked-in white background — a paper-toned plate
plus multiply blend melts the white into the page, so the hero wash
and goo blobs read through faintly instead of a stark #fff rectangle
(border/shadow are solid ink, so multiply leaves them unchanged) */
background: var(--bg);
mix-blend-mode: multiply;
border: 4px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem 1.4rem;
}
/* the h1 tagline under the banner — headline-sized, not poster-sized */
.hero__tagline {
font-size: clamp(1.35rem, 3.2vw, 1.9rem);
font-weight: 600;
max-width: 30ch;
margin: 0 auto .4rem;
}
.hero__cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
/* launch teaser badge (stands in for the stat strip until mint details land) */
.launch-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 2.4rem 0 0;
font-family: var(--font-head);
font-weight: 600;
font-size: 1.05rem;
padding: .6rem 1.4rem;
background: var(--yellow);
border: 3px solid var(--line);
border-radius: 999px;
box-shadow: var(--shadow-sm);
}
/* teaser stat strip (currently unused — kept for when mint details land) */
.stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .8rem;
margin-top: 2.4rem;
}
.stat {
background: var(--bg);
border: 3px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: .9rem 1.4rem;
min-width: 140px;
}
.stat b { font-family: var(--font-head); font-size: 1.5rem; display: block; }
.stat span { font-size: .85rem; opacity: .8; }
/* ---------- Generic card ---------- */
.card {
background: var(--bg);
border: 3px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
/* ---------- Vintage 1970s colour TV (home page hero montage) ---------- */
.tv-row {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: min(540px, 100%);
margin: 2.4rem auto 0;
}
.tv {
position: relative;
display: flex;
align-items: stretch;
gap: 14px;
width: 100%;
max-width: min(500px, 100%);
padding: 16px 16px 20px;
/* walnut cabinet: warm base wash with fine grain streaks layered over it */
background:
repeating-linear-gradient(92deg,
rgba(60, 40, 24, .22) 0 2px,
rgba(124, 86, 51, 0) 2px 4px,
rgba(90, 62, 36, .28) 4px 6px,
rgba(124, 86, 51, 0) 6px 9px),
linear-gradient(160deg, #7d5636 0%, #6b4a2a 55%, #5a3d22 100%);
border: 4px solid var(--line);
border-radius: 16px 16px 18px 18px;
/* raised top highlight + hard cartoon offset + soft drop, matching the site's depth style */
box-shadow:
inset 0 3px 0 rgba(255, 255, 255, .16),
inset 0 -7px 0 rgba(0, 0, 0, .22),
8px 10px 0 var(--line),
10px 16px 26px rgba(43, 43, 43, .28);
transition: transform .16s ease, box-shadow .16s ease;
}
.tv:hover {
transform: translateY(-3px);
box-shadow:
inset 0 3px 0 rgba(255, 255, 255, .16),
inset 0 -7px 0 rgba(0, 0, 0, .22),
8px 13px 0 var(--line),
10px 20px 30px rgba(43, 43, 43, .32);
}
/* the CRT: dark bezel around a bulged-corner glass screen */
.tv__screen {
position: relative;
flex: 1 1 auto;
padding: 10px;
background: #1b1b1b;
border: 3px solid var(--line);
border-radius: 22px / 16px;
box-shadow: inset 0 2px 4px rgba(255, 255, 255, .12);
}
.tv__screen img,
.tv__screen video {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
/* bias the cover-crop right so the test card's clown isn't cut off
(channel 2's karuta stills are near-square, so only their height crops) */
object-position: 73% 50%;
background: #000;
border-radius: 18px / 13px; /* the classic curved-corner CRT glass */
}
/* while broadcasting: a gentle CRT brightness flicker + the odd 1px jump */
.tv-row.is-on .tv__pic {
animation: tv-flicker 4.3s linear infinite, tv-jitter 5.7s linear infinite;
}
@keyframes tv-flicker {
0%, 100% { opacity: 1; }
7% { opacity: .97; }
9% { opacity: 1; }
34% { opacity: .98; }
36% { opacity: 1; }
53% { opacity: .95; }
55% { opacity: 1; }
78% { opacity: .98; }
80% { opacity: 1; }
}
@keyframes tv-jitter {
0%, 96.4%, 98.6%, 100% { transform: none; }
96.8% { transform: translateX(1px); }
97.6% { transform: translateX(-1px); }
}
/* a faint "hum bar" that slowly rolls down the picture */
.tv__screen::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 18px / 13px;
background: linear-gradient(to bottom,
rgba(255, 255, 255, 0) 0 88%,
rgba(205, 228, 255, .05) 91%,
rgba(255, 255, 255, .11) 94%,
rgba(205, 228, 255, .05) 97%,
rgba(255, 255, 255, 0) 100%) 0 0 / 100% 300% no-repeat;
opacity: 0;
pointer-events: none;
z-index: 2;
}
.tv-row.is-on .tv__screen::before {
opacity: 1;
animation: tv-roll 8s linear infinite;
}
@keyframes tv-roll {
from { background-position-y: 150%; }
to { background-position-y: 0%; }
}
/* broadcast ident strip, shown on the test-card channel only */
.tv__caption {
position: absolute;
left: 50%;
bottom: 17%;
transform: translateX(-50%);
z-index: 1;
width: max-content;
max-width: 82%;
padding: .35em .9em;
background: rgba(10, 10, 10, .78);
color: #f4e7cf;
font-size: .62rem;
letter-spacing: .14em;
line-height: 1.7;
text-align: center;
border-radius: 2px;
text-shadow: 0 0 5px rgba(244, 231, 207, .4);
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
.tv-row.is-on:not(.is-ch2):not(.is-tuning) .tv__caption {
opacity: 1;
transition-delay: .4s; /* let the power-on flash clear first */
}
/* burst of static while the channel knob "tunes" */
.tv__static {
position: absolute;
inset: 10px;
border-radius: 18px / 13px;
background: #0e0e0e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0;
pointer-events: none;
z-index: 2;
}
.tv-row.is-tuning .tv__static {
opacity: 1;
animation: tv-snow .4s steps(1, end) infinite;
}
@keyframes tv-snow {
0% { background-position: 0 0; }
12% { background-position: -28px 16px; }
25% { background-position: 22px -34px; }
38% { background-position: -46px -8px; }
50% { background-position: 14px 30px; }
62% { background-position: -10px -44px; }
75% { background-position: 38px 6px; }
88% { background-position: -20px 40px; }
100% { background-position: 0 0; }
}
/* "screen off" overlay: dark glass with faint scanlines, sits over the (empty) picture */
.tv__off {
position: absolute;
inset: 10px;
border-radius: 18px / 13px;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .55) 1px 3px),
radial-gradient(circle at 50% 42%, #3a3a3a 0%, #141414 72%);
pointer-events: none;
z-index: 2;
}
/* powered on: flash white, then fade the dark overlay away to reveal the GIF */
.tv-row.is-on .tv__off {
animation: tv-power-on .5s ease forwards;
}
/* remembered state restored on load: skip the flash, just show it already on */
.tv-row.no-flash.is-on .tv__off {
animation: none;
opacity: 0;
}
@keyframes tv-power-on {
0% { opacity: 1; background: #fdf6e6; }
16% { opacity: 1; background: #fdf6e6; } /* the CRT "flash" */
100% { opacity: 0; background: #fdf6e6; }
}
/* screen glass: soft inner vignette + a diagonal glare sheen (sits above everything) */
.tv__screen::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 18px / 13px;
background: linear-gradient(125deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 42%);
box-shadow: inset 0 0 24px rgba(0, 0, 0, .55);
pointer-events: none;
z-index: 3;
}
/* control panel to the right of the screen */
.tv__panel {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding-top: 4px;
}
.tv__brand {
font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
font-weight: 700;
font-size: .95rem;
line-height: 1;
color: #f4e7cf;
text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
/* channel knob — a real button: with the TV on it hops to channel 2 */
.tv__knob {
appearance: none;
-webkit-appearance: none;
font: inherit;
padding: 0;
position: relative;
width: 22px;
aspect-ratio: 1;
border-radius: 50%;
border: 3px solid var(--line);
background: radial-gradient(circle at 35% 30%, #4a4a4a 0%, #2b2b2b 70%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
cursor: pointer;
transition: transform .3s ease, filter .2s ease;
}
.tv__knob:hover { filter: brightness(1.2); }
.tv__knob:active { transform: scale(.92); }
.tv__knob:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
.tv-row.is-ch2 .tv__knob { transform: rotate(120deg); }
.tv__knob::before { /* pointer notch */
content: "";
position: absolute;
top: 2px;
left: 50%;
width: 2px;
height: 6px;
transform: translateX(-50%);
background: #f4e7cf;
border-radius: 1px;
}
.tv__grille {
width: 26px;
flex: 1 1 auto;
min-height: 34px;
border: 3px solid var(--line);
border-radius: 4px;
background:
repeating-linear-gradient(var(--line) 0 2px, #8a5f39 2px 5px);
}
/* ---------- Red power knob (click to turn the TV on/off) ---------- */
.tv__power {
appearance: none;
-webkit-appearance: none;
font: inherit;
padding: 0;
position: relative;
width: 26px;
aspect-ratio: 1;
border-radius: 50%;
border: 3px solid var(--line);
background: radial-gradient(circle at 35% 30%, #ff6f63 0%, var(--red) 58%, #b81e16 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
cursor: pointer;
transition: transform .15s ease-out, box-shadow .2s ease;
}
.tv__power::before { /* pointer notch, points up when off */
content: "";
position: absolute;
top: 2px;
left: 50%;
width: 2px;
height: 7px;
transform: translateX(-50%);
background: #f4e7cf;
border-radius: 1px;
}
.tv__power:hover { filter: brightness(1.06); }
.tv__power:active { transform: scale(.94); }
.tv__power:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
/* on: knob turns and lights up with a red glow */
.tv-row.is-on .tv__power {
transform: rotate(45deg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 3px rgba(229, 53, 43, .38);
}
/* decorative set (whitelist ident): knobs are s, not