/* ============================================================ Joymaze site design system — shared across all HTML pages. Tokens locked from the get.joymaze.com sales page (the brand anchor). Load Fredoka / Inter / Space Mono in each page's . ============================================================ */ :root { --paper: #FCF8F1; --paper-2: #F5ECDC; --card: #FFFFFF; --ink: #211D42; /* deep indigo, never pure black */ --ink-soft: #5C577B; --line: #E9DFCB; --coral: #FF5A4D; /* primary action */ --coral-ink: #C9382C; /* button shadow */ --marigold: #FFB020; --grape: #6B4BE6; --mint: #10B698; --sky: #2E9BE6; --radius: 16px; --shadow-hard: 4px 5px 0 var(--ink); --maxw: 1080px; } *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.62; color: var(--ink); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; background: var(--paper); background-image: radial-gradient(circle at 1px 1px, rgba(33,29,66,0.055) 1px, transparent 0); background-size: 30px 30px; display: flex; flex-direction: column; } a { color: var(--grape); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 4px; } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.3rem; width: 100%; } h1,h2,h3 { font-family: "Fredoka", sans-serif; font-weight: 700; line-height: 1.12; } h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); } h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); } .eyebrow { font-family: "Space Mono", monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); font-weight: 700; } /* ================= Buttons ================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.12rem; background: var(--coral); color: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 0.95rem 1.7rem; box-shadow: var(--shadow-hard); cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; max-width: 100%; text-align: center; } .btn:hover { text-decoration: none; transform: translate(-1px,-1px); box-shadow: 5px 6px 0 var(--ink); } .btn:active { transform: translate(3px,4px); box-shadow: 1px 1px 0 var(--ink); } .btn--ghost { background: var(--card); color: var(--ink); } /* ================= Header ================= */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(252,248,241,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.5rem; } .brand:hover { text-decoration: none; } .brand img { width: 34px; height: 34px; display: block; } .brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); display: inline-block; } /* ================= Card ================= */ .card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-hard); padding: 2.2rem; } /* ================= Footer ================= */ .site-footer { margin-top: auto; background: var(--paper-2); border-top: 2px solid var(--ink); padding: 2.4rem 0 2rem; } .site-footer .wrap { display: flex; flex-direction: column; gap: 1.3rem; align-items: center; text-align: center; } .foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center; font-size: 0.92rem; } .foot-links a { color: var(--ink-soft); } .socials { display: flex; gap: 0.8rem; } .socials a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); box-shadow: 2px 3px 0 var(--ink); transition: transform .08s ease, box-shadow .08s ease; } .socials a:hover { transform: translate(-1px,-1px); box-shadow: 3px 4px 0 var(--ink); text-decoration: none; } .socials svg { width: 20px; height: 20px; fill: var(--ink); } .foot-legal { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; } /* ================= Prose / policy pages ================= */ .page { padding: 2.6rem 0 3.4rem; } .page .wrap { max-width: 760px; } .page h1 { margin-bottom: 0.8rem; } .page h2 { margin: 1.9rem 0 0.6rem; font-size: 1.3rem; } .page p, .page ul { margin-bottom: 1rem; color: var(--ink-soft); } .page ul { padding-left: 1.2rem; } .page li { margin-bottom: 0.4rem; } .page strong { color: var(--ink); } .page .updated { font-family: "Space Mono", monospace; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-soft); } .page .card { margin-top: 1.4rem; } /* ================= Utilities ================= */ .section { padding: 3.4rem 0; } .center { text-align: center; } .lead { font-size: 1.1rem; color: var(--ink-soft); }