/* ============================================================ happygreenkids.ch — Design Tokens ============================================================ */ :root { /* Palette 3 (default) — Earthy clay + forest + tomato */ --bg: #EFEAE0; --bg-2: #E6DFD0; --bg-card: #FBF8F1; --ink: #1C1C1C; --ink-2: #3A3A38; --muted: #6B685F; --primary: #3A4A2A; /* forest */ --primary-ink: #FBF8F1; --accent: #D95A3C; /* tomato */ --accent-2: #E8C547; /* sun */ --accent-3: #6FAE5E; /* leaf */ --accent-4: #E38BA8; /* berry */ --line: #1C1C1C; /* Type */ --f-display: "Fraunces", "Times New Roman", serif; --f-ui: "DM Sans", system-ui, sans-serif; --f-hand: "Caveat", cursive; --f-mono: "JetBrains Mono", ui-monospace, monospace; /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* Playfulness knob (0 = serious, 1 = maximum play) */ --play: 1; /* Spacing */ --gutter: 32px; --section: clamp(80px, 9vw, 140px); } /* Palette variants applied via [data-palette="N"] on */ html[data-palette="1"] { --bg: #F4F1EA; --bg-2: #EAE5D8; --bg-card: #FFFDF7; --primary: #2F5D3A; --accent: #E8C547; --accent-2: #F2A65A; --accent-3: #6FAE5E; --accent-4: #8EB4C6; --ink: #1A1A1A; } html[data-palette="2"] { --bg: #FFF8EF; --bg-2: #FBEFDC; --bg-card: #FFFFFF; --primary: #2E7D3E; --accent: #FF8A3D; --accent-2: #FFD166; --accent-3: #6FAE5E; --accent-4: #E38BA8; --ink: #2B2A28; } html[data-palette="4"] { --bg: #F7F3EC; --bg-2: #EBE3D4; --bg-card: #FFFEFA; --primary: #567D46; --accent: #D95F73; --accent-2: #F2B1A0; --accent-3: #8EB76A; --accent-4: #C8A2D8; --ink: #2A2A2A; } /* Font pairing variants */ html[data-pairing="editorial"] { --f-display: "Fraunces", serif; --f-ui: "DM Sans", sans-serif; } html[data-pairing="grotesk"] { --f-display: "Space Grotesk", sans-serif; --f-ui: "DM Sans", sans-serif; } html[data-pairing="mixed"] { --f-display: "Bricolage Grotesque", sans-serif; --f-ui: "DM Sans", sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Typography ---------- */ .display { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; line-height: 0.95; font-variation-settings: "SOFT" 50, "opsz" 120; } .hand { font-family: var(--f-hand); font-weight: 500; line-height: 1; } .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .eyebrow { font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); } h1, h2, h3 { margin: 0; } /* ---------- Layout ---------- */ .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section) 0; } .section-tight { padding: calc(var(--section) * 0.55) 0; } /* ---------- Sticker / badge ---------- */ .sticker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--accent-2); color: var(--ink); font-weight: 600; font-size: 13px; border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(calc(-2deg * var(--play))); } .sticker.green { background: var(--accent-3); } .sticker.tomato { background: var(--accent); color: #fff; } .sticker.berry { background: var(--accent-4); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; border: 1.5px solid var(--ink); cursor: pointer; font-family: var(--f-ui); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .2s; box-shadow: 3px 3px 0 var(--ink); } .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .btn-primary { background: var(--primary); color: var(--primary-ink); } .btn-accent { background: var(--accent); color: #fff; } .btn-ghost { background: var(--bg-card); color: var(--ink); } /* ---------- Card ---------- */ .card { background: var(--bg-card); border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: calc(4px * var(--play)) calc(4px * var(--play)) 0 var(--ink); } /* ---------- Placeholder imagery (striped with monospace label) ---------- */ .placeholder { position: relative; background: repeating-linear-gradient( 45deg, var(--bg-2) 0 10px, var(--bg-card) 10px 20px ); border: 1.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink); } .placeholder[data-tone="green"] { background: repeating-linear-gradient(45deg, var(--accent-3) 0 10px, color-mix(in srgb, var(--accent-3), white 35%) 10px 20px); } .placeholder[data-tone="tomato"] { background: repeating-linear-gradient(45deg, var(--accent) 0 10px, color-mix(in srgb, var(--accent), white 35%) 10px 20px); } .placeholder[data-tone="sun"] { background: repeating-linear-gradient(45deg, var(--accent-2) 0 10px, color-mix(in srgb, var(--accent-2), white 40%) 10px 20px); } .placeholder[data-tone="berry"] { background: repeating-linear-gradient(45deg, var(--accent-4) 0 10px, color-mix(in srgb, var(--accent-4), white 40%) 10px 20px); } .placeholder[data-tone="forest"] { background: repeating-linear-gradient(45deg, var(--primary) 0 10px, color-mix(in srgb, var(--primary), white 20%) 10px 20px); color: var(--primary-ink); } .placeholder .label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bg-card); color: var(--ink); padding: 4px 10px; border: 1px solid var(--ink); border-radius: var(--r-pill); } /* ---------- Scribble underline ---------- */ .scribble { position: relative; white-space: nowrap; } .scribble::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -0.1em; height: 0.35em; background: var(--accent); border-radius: 999px; z-index: -1; transform: skewY(calc(-2deg * var(--play))) scaleX(calc(0.9 + 0.1 * var(--play))); opacity: calc(0.65 + 0.35 * var(--play)); } /* Reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } /* Utilities */ .row { display: flex; } .col { display: flex; flex-direction: column; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; } /* Selection */ ::selection { background: var(--accent); color: #fff; }