/* ===== Makong Network — cartoony Angkor Wat / jungle Minecraft theme ===== */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Press+Start+2P&family=Noto+Sans:wght@400;600;700&family=Kantumruy+Pro:wght@400;600;700&family=Noto+Sans+SC:wght@400;600;700&display=swap");
/* Kantumruy Pro carries the Khmer glyphs and Noto Sans SC the Chinese ones -
both sit in every font stack after the Latin faces so the site reads
properly with the language set to ខ្មែរ or 中文. Vietnamese needs no extra
font: Baloo 2 and Noto Sans already cover its Latin Extended diacritics. */
/* The genuine in-game Minecraft font, for English/Latin text - it has no
Khmer glyphs, so it sits first in the stack and just falls through to
Baloo 2 / Kantumruy Pro for anything it can't render (Khmer included). */
@font-face {
font-family: "Minecraft";
src: url("/fonts/minecraft.ttf") format("truetype");
font-weight: 400 900;
font-display: swap;
}
/* ---------------------------------------------------------------
Theming. DARK is the default (plain :root); light is opt-in via
, set by the ☀️/🌙 toggle in the nav.
Brand accents (gold, moss, terracotta) stay the same in both.
--------------------------------------------------------------- */
:root {
/* shared brand accents - a white/lime-green "sunlight" family, standing
in for the old gold/amber accent everywhere it showed up (buttons,
borders, highlighted text). */
--gold: #d7ffa0;
--gold-light: #ffffff;
--gold-deep: #8fd94f;
--jungle: #34b358;
--jungle-dark: #1d6b34;
--moss: #7fd858;
--moss-dark: #4f9c34;
--moss-light: #b6f08a;
--flower-pink: #ff8fc2;
--flower-white: #f4fff0;
--flower-red: #ff6b5e;
--flower-purple: #c58bff;
--water-blue: #57d0e8;
--firefly-glow: #ddff7e;
--firefly-glow-2: #8ce8ff;
--click-blink: #9dff57;
/* Vivid leaf-green button surface — replaces the old wood-plank look on
the hero action buttons and other primary "pill" controls. */
--leaf-surface:
radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.3), transparent 45%),
linear-gradient(155deg, var(--moss-light) 0%, var(--jungle) 55%, var(--jungle-dark) 100%);
--leaf-bevel: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
/* nav + footer stay dark forest in both themes, so these never flip */
--link-accent: #a6ff8a;
--on-dark: #eef7ea;
--on-dark-soft: #bcd9b8;
--bar-bg: linear-gradient(180deg, #12281c, #06120c);
--radius: 18px;
--nav-h: 72px;
/* --- DARK theme (default): magical night forest --- */
--cream: #0a1712;
--cream-dark: #13291d;
--ink: #eef7ea;
--ink-soft: #a2c69c;
--brown: #7c5a34;
--brown-dark: #ffffff;
--brown-darkest: #050d08;
--terracotta: #9dff57;
--success: #7ad06a;
--sky-top: #173a2b;
--sky-bottom: #0b2118;
--sky-deep: #050f0a;
--input-bg: #17301f;
--stone-light: #3f6b46;
--stone: #2c4f34;
--stone-mid: #1f3826;
--stone-dark: #578a5c;
--stone-darkest: #0a1810;
--stone-surface:
radial-gradient(circle at 16% 20%, rgba(200, 255, 200, 0.14) 0%, transparent 5%),
radial-gradient(circle at 74% 62%, rgba(0, 0, 0, 0.22) 0%, transparent 6%),
radial-gradient(circle at 42% 82%, rgba(200, 255, 200, 0.09) 0%, transparent 4%),
radial-gradient(circle at 86% 22%, rgba(0, 0, 0, 0.2) 0%, transparent 5%),
radial-gradient(circle at 30% 48%, rgba(0, 0, 0, 0.16) 0%, transparent 4%),
linear-gradient(155deg, var(--stone-light) 0%, var(--stone) 55%, var(--stone-mid) 100%);
--stone-bevel: inset 0 2px 0 rgba(210, 255, 200, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.4);
--shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.45), 5px 8px 14px rgba(0, 0, 0, 0.35);
--press-shadow: 0 5px 0 var(--stone-darkest), 0 7px 12px rgba(0, 0, 0, 0.4);
--press-shadow-active: 0 1px 0 var(--stone-darkest);
}
/* --- LIGHT theme: vibrant sunlit forest day --- */
:root[data-theme="light"] {
--link-accent: #1f7d33;
--cream: #eef8e0;
--cream-dark: #dcf0c4;
--ink: #163a1c;
--ink-soft: #3f6b3a;
--brown: #8a6030;
--brown-dark: #1c4a22;
--brown-darkest: #0f2812;
--terracotta: #4c9a2a;
--success: #2f8a4a;
--sky-top: #bdeaff;
--sky-bottom: #cdf0a0;
--sky-deep: #9fdd7a;
--input-bg: #ffffff;
--stone-light: #f5fbe8;
--stone: #e2f2c8;
--stone-mid: #c3e39a;
--stone-dark: #7fae5a;
--stone-darkest: #345c2a;
--stone-surface:
radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 5%),
radial-gradient(circle at 74% 62%, rgba(0, 0, 0, 0.08) 0%, transparent 6%),
radial-gradient(circle at 42% 82%, rgba(255, 255, 255, 0.22) 0%, transparent 4%),
radial-gradient(circle at 86% 22%, rgba(0, 0, 0, 0.07) 0%, transparent 5%),
radial-gradient(circle at 30% 48%, rgba(0, 0, 0, 0.05) 0%, transparent 4%),
linear-gradient(155deg, var(--stone-light) 0%, var(--stone) 55%, var(--stone-mid) 100%);
--stone-bevel: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.16);
--shadow-hard: 4px 4px 0 rgba(53, 74, 38, 0.24), 5px 8px 14px rgba(53, 74, 38, 0.14);
--press-shadow: 0 5px 0 var(--stone-darkest), 0 7px 12px rgba(53, 74, 38, 0.2);
--press-shadow-active: 0 1px 0 var(--stone-darkest);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Minecraft", "Noto Sans", "Kantumruy Pro", "Noto Sans SC", system-ui, sans-serif;
/* dappled forest light: soft color pools over the base tone, not a flat fill */
background:
radial-gradient(720px 420px at 8% 0%, rgba(127, 216, 88, 0.16), transparent 60%),
radial-gradient(640px 380px at 95% 15%, rgba(255, 202, 77, 0.12), transparent 55%),
radial-gradient(760px 460px at 50% 100%, rgba(87, 208, 232, 0.08), transparent 60%),
var(--cream);
color: var(--ink);
line-height: 1.5;
}
h1, h2, h3, .brand {
font-family: "Minecraft", "Baloo 2", "Kantumruy Pro", "Noto Sans SC", "Noto Sans", sans-serif;
color: var(--brown-dark);
letter-spacing: 0.01em;
font-weight: 800;
}
.pixel-text {
font-family: "Press Start 2P", monospace;
letter-spacing: 0.02em;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.25rem;
}
/* Scoped to .hero (rather than bare .flower-accent) so this reliably beats
the later, equal-specificity ".hero > *" rule that flips absolutely
positioned hero decorations to position:relative for z-index stacking -
without this, each flower-accent ![]()
(display:block globally) would
fall back into normal flow and stack up real page height above the logo. */
.hero .flower-accent {
position: absolute;
width: 30px;
height: 30px;
pointer-events: none;
animation: flower-sway 5s ease-in-out infinite;
}
@keyframes flower-sway {
0%, 100% { transform: rotate(-6deg); }
50% { transform: rotate(6deg); }
}
/* ---------- Nav ---------- */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
height: var(--nav-h);
display: flex;
align-items: center;
background:
repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 26px),
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 58px),
var(--bar-bg);
border-bottom: 4px solid var(--gold);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; }
/* ☀️/🌙 theme switch + EN/ខ្មែរ language switch, just left of the nav links. */
.nav-tools {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
margin-left: auto;
margin-right: 0.6rem;
}
.theme-toggle {
height: 42px;
width: 42px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
cursor: pointer;
line-height: 1;
color: var(--on-dark);
background: linear-gradient(180deg, var(--jungle), var(--jungle-dark));
border: 2px solid var(--stone-darkest);
box-shadow: 0 3px 0 var(--stone-darkest);
transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s;
}
.theme-toggle:hover { transform: translateY(-2px) scale(1.06); }
.theme-icon { width: 24px; height: 24px; object-fit: contain; }
.theme-toggle:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--stone-darkest); }
/* Language switch - a custom dropdown card styled the same as the mobile
nav menu, instead of a native