/* modou dsp — design tokens Source: user-provided brand spec, cross-checked against the live manual pages at modoudsp.com/{cyano,eqomp,visualgate,contour}-manual/ */ :root { /* Surfaces */ --bg-obsidian: #0b0e14; --bg-charcoal: #161b22; --bg-charcoal-hover: #1c222b; --border-overlay: #30363d; /* Text */ --text-primary: #f0f6fc; --text-muted: #8b949e; --text-faint: #5c6672; /* Global accents */ --accent-mint: #00ff9d; --accent-cyan: #00f2fe; --accent-peak: #ff5500; /* Status. The licence plugin's account screens reference these for errors and destructive actions; defined here so those screens follow the theme instead of shipping their own palette. */ --danger: #ff6b6b; /* Per-product accent — overridden per page via inline style on or a page-level class. Defaults to the platform mint. */ --product-accent: var(--accent-mint); --product-accent-dim: color-mix(in srgb, var(--product-accent) 35%, transparent); /* Typography */ /* Smooch Sans for prose, Gemunu Libre for headings and bold. Neither face carries Hangul, and the interface switches to Korean when the visitor selects KRW (inc/multicurrency.php). So the Korean fallback is named explicitly rather than left to whatever the browser picks — otherwise the same page renders in a different typeface per operating system the moment the currency changes. */ --font-ui: "Smooch Sans", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif; --font-display: "Gemunu Libre", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Type scale multipliers, set from the Customizer (Typography). Each step is multiplied by the group it belongs to, so body copy, subheadings and headings can be tuned independently while every step keeps its own clamp() — the scale stays responsive either way. They live here rather than being recomputed in PHP so the clamp values are written once; the Customizer only ever changes these three numbers. */ --scale-body: 1; --scale-sub: 1; --scale-head: 1; /* Body copy, captions, labels */ --text-xs: calc(clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem) * var(--scale-body)); --text-sm: calc(clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem) * var(--scale-body)); --text-base: calc(clamp(1rem, 0.95rem + 0.2vw, 1.0625rem) * var(--scale-body)); /* Subheadings — section leads, card titles */ --text-lg: calc(clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) * var(--scale-sub)); --text-xl: calc(clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem) * var(--scale-sub)); /* Headings — section heads and the hero */ --text-2xl: calc(clamp(2rem, 1.6rem + 1.6vw, 2.75rem) * var(--scale-head)); --text-hero: calc(clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) * var(--scale-head)); /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-section: clamp(4rem, 3rem + 5vw, 8rem); /* Horizontal page gutter. Every full-width container uses this rather than a spacing step, so the site's side margins narrow together on small screens. At 2.5rem a phone was giving up 80px of a 375px viewport — a fifth of the screen — to empty space on either side. */ --gutter: var(--space-lg); /* Motion */ --duration-fast: 150ms; --duration-normal: 300ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Radii */ --radius-card: 16px; --radius-pill: 999px; } * { box-sizing: border-box; } html { background: var(--bg-obsidian); color-scheme: dark; } body { margin: 0; font-family: var(--font-ui); background: var(--bg-obsidian); color: var(--text-primary); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* height:auto is load-bearing, not decoration: WordPress prints literal width/height attributes on every for CLS prevention, and a browser only rescales height to match a CSS-constrained width when height is *also* declared (even as auto) — otherwise it keeps the raw attribute value, stretching the image to whatever box it lands in. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* ── Headings and bold: Gemunu Libre ────────────────────────────────── The section stylesheets tighten headings to -0.015em, a value tuned for Inter. Gemunu Libre is already narrow and open, and that tracking closes it up, so display text resets to neutral here rather than being edited in six separate places. */ h1, h2, h3, h4, h5, h6, strong, b, .section-head, .product-hook, .closing-line, .closing-claim, .hero h1, .standard-line { font-family: var(--font-display); letter-spacing: 0; } /* Smooch Sans is condensed and light. At body size that reads thin against a near-black background, so prose sits a step above the 400 that suited Inter — deliberate rather than faint. */ body { font-weight: 450; } /* Gemunu Libre at SemiBold, as specified. Both faces are narrow, so the separation between prose and heading comes from the change of family and the weight step, not from a width contrast — which is why bold inside a paragraph still needs 600 and not merely the family swap. */ h1, h2, h3, .section-head, .product-hook, .closing-line { font-weight: 700; } h4, h5, h6, strong, b { font-weight: 600; } .mono { font-family: var(--font-mono); letter-spacing: 0.02em; } /* Gutter steps down as the viewport does. Kept here with the token it overrides rather than scattered through main.css, so the value and its responsive behaviour are read together. */ @media (max-width: 860px) { :root { --gutter: var(--space-md); } /* 24px */ } @media (max-width: 480px) { :root { --gutter: var(--space-sm); } /* 16px */ }