/* ============================================================= KIMIKON Design System — Foundation Layer Source of truth for global tokens + reusable primitives. CSS layer order: 1. design-system.css foundation tokens + primitive components 2. cards-system.css reusable card surfaces and card motion 3. motion-system.css shared reveal and motion contracts 4. page theme CSS main.css, kimitalk/site.css, category pages 5. nav-system.css shared navigation override layer Future layers should follow the same rule: - form-system.css: shared inputs, toggles, segmented controls Include this BEFORE any site-specific stylesheet. Per-brand color variants are supplied by page/theme tokens, usually through `` and page-level :root variables. ============================================================= */ /* ---- Global tokens (shared across all brands) ---- */ :root { /* Typography */ --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --ds-fs-xs: 0.72rem; --ds-fs-sm: 0.9rem; --ds-fs-base: 1rem; --ds-fs-lead: clamp(1.12rem, 2vw, 1.46rem); --ds-fs-h3: clamp(1.25rem, 2.5vw, 1.6rem); --ds-fs-h2: clamp(2.05rem, 5vw, 4.25rem); --ds-fs-h1: clamp(3.35rem, 7vw, 6.65rem); --ds-fw-regular: 500; --ds-fw-medium: 640; --ds-fw-bold: 740; --ds-fw-black: 820; /* Radius */ --ds-radius-sm: 8px; --ds-radius-md: 14px; --ds-radius-lg: 20px; --ds-radius-pill: 999px; /* Motion */ --ds-ease: cubic-bezier(0.22, 1, 0.36, 1); --ds-dur-fast: 160ms; --ds-dur: 200ms; --ds-dur-slow: 420ms; /* Spacing baseline */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; /* Elevation — use color-mix with brand tokens so shadows tint correctly */ --ds-shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.08); --ds-shadow-md: 0 12px 34px rgba(0, 0, 0, 0.10); --ds-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.12); --ds-shadow-glow: 0 24px 70px color-mix(in srgb, var(--accent, #000) 18%, transparent); /* Button sizing */ --btn-min-height: 46px; --btn-pad-x: 18px; --btn-radius: var(--ds-radius-pill); --btn-weight: 740; --btn-lift: -2px; --btn-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.16); } /* ---- Brand tokens ---- Each subsite defines its own theme in its site CSS (main.css, kimitalk/site.css, …). The design system does NOT ship default color tokens, so it never competes with a subsite's :root. A new subsite just needs to define these five tokens to be fully compatible with the Button component: --accent primary color (fill for .button.primary) --accent-strong deeper accent for emphasis --hover-accent hover background for buttons --hover-text foreground color on hover backgrounds --border default border color for surfaces --surface secondary-button background --text default foreground Using :where() below keeps specificity 0, so any subsite :root always wins. Uncomment and adapt when a sub-brand needs an attribute-driven variant (e.g. a landing page on the main site that previews a future brand). :where([data-brand="m8"]) { --accent: #5b86ff; --accent-strong: #2c54c0; --hover-accent: #8fc7ff; --hover-text: #0b1530; } :where([data-brand="kimivault"]) { --accent: #75d6b2; --accent-strong: #2f8a68; --hover-accent: #a9ecd0; --hover-text: #0f1f18; } */ /* ============================================================= Component: Button Usage: … … Modifiers: .primary .secondary .ghost .disabled .block ============================================================= */ .button { display: inline-flex; min-height: var(--btn-min-height); align-items: center; justify-content: center; gap: 10px; padding: 0 var(--btn-pad-x); border: 1px solid var(--border); border-radius: var(--btn-radius); position: relative; color: var(--text); background: transparent; font: inherit; font-weight: var(--btn-weight); text-decoration: none; cursor: pointer; transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) ease, border-color var(--ds-dur) ease, color var(--ds-dur) ease; } .button:hover, .button:focus-visible { transform: translateY(var(--btn-lift)); box-shadow: var(--btn-shadow-hover); outline: none; } /* Primary — filled accent */ .button.primary { border-color: var(--accent); background: var(--accent); color: #ffffff; } .button.primary:hover, .button.primary:focus-visible, a:hover .button.primary, a:focus-visible .button.primary { border-color: var(--hover-accent); background: var(--hover-accent); color: var(--hover-text); box-shadow: 0 8px 20px color-mix(in srgb, var(--hover-accent) 24%, transparent); transform: translateY(var(--btn-lift)); } /* Secondary — surface on neutral */ .button.secondary { background: var(--surface); color: var(--text); } .button.secondary:hover, .button.secondary:focus-visible { border-color: color-mix(in srgb, var(--hover-accent) 42%, var(--border)); background: color-mix(in srgb, var(--hover-accent) 16%, var(--surface)); color: var(--hover-accent); } /* Ghost — transparent, low-emphasis */ .button.ghost { background: transparent; border-color: color-mix(in srgb, var(--border) 55%, transparent); } .button.ghost:hover, .button.ghost:focus-visible { border-color: var(--hover-accent); color: var(--hover-accent); } /* Disabled */ .button.disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; pointer-events: none; transform: none; box-shadow: none; } /* Status pill inside disabled buttons, e.g. "Coming soon" */ .button-status { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--ds-radius-pill); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-strong); font-family: var(--ds-font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .button.primary .button-status { border-color: color-mix(in srgb, var(--bg) 65%, transparent); background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--accent-strong); } /* Full-width variant */ .button.block { width: 100%; } @media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover, .button:focus-visible { transform: none; } } /* ============================================================= Utility: Global focus ring Applies a consistent, accessible outline to every interactive element when focused via keyboard. Buttons opt out with their own focus styling above. ============================================================= */ :where(a, button, [role="button"], [role="menuitemradio"], input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ============================================================= Component: Eyebrow Small uppercase label above a headline. Usage:

Featured

Modifier: .eyebrow.plain — sans font, no letter-spacing (kimitalk style) ============================================================= */ .eyebrow { margin: 0 0 15px; color: var(--accent-strong); font-family: var(--ds-font-mono); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-regular); letter-spacing: 0.08em; text-transform: uppercase; } .eyebrow.plain { font-family: var(--ds-font-sans); font-size: 0.78rem; font-weight: 760; letter-spacing: 0; } /* ============================================================= Component: Lead paragraph Supporting copy directly under an h1/h2. Usage:

…

============================================================= */ .lead { max-width: 680px; margin-top: 26px; color: var(--muted); font-size: var(--ds-fs-lead); line-height: 1.45; } /* ============================================================= Component: Text link with arrow Inline arrow link, often inside cards. Parent card can hover- animate the arrow by targeting `.text-link span:last-child`. Usage: View product ============================================================= */ .text-link { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 28px; color: var(--accent-strong); font-weight: var(--ds-fw-bold); text-decoration: none; } .text-link span:last-child { transition: transform var(--ds-dur-fast) ease; } a:hover > .text-link span:last-child, a:focus-visible > .text-link span:last-child, .text-link:hover span:last-child, .text-link:focus-visible span:last-child { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .text-link span:last-child { transition: none; } } /* ============================================================= Component: Rotating word Inline word that cycles through a list. Text color picks up the brand accent so it reads as a highlight inside a headline. Usage: Schnell. The JS rotator (see assets/js/rotator-system.js) swaps textContent and toggles `.is-swapping` or `.is-fading-out` depending on mode. ============================================================= */ .rotating-word { display: inline-block; min-width: 8ch; color: var(--accent); will-change: opacity, transform; } .word-rotator { transition: opacity 520ms ease; } .word-rotator.is-fading-out { opacity: 0; } .svg-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .rotating-word.is-swapping { animation: dsWordSwap 0.44s ease; } @keyframes dsWordSwap { 0% { opacity: 0; transform: translateY(12px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .word-rotator-dots { --word-rotator-dot-size: 9px; --word-rotator-dot-gap: 10px; --word-rotator-active-width: 26px; --word-rotator-step: calc(var(--word-rotator-dot-size) + var(--word-rotator-dot-gap)); position: relative; display: flex; align-items: center; gap: var(--word-rotator-dot-gap); min-height: 10px; margin-top: 20px; padding: 0 calc(var(--word-rotator-active-width) - var(--word-rotator-dot-size)) 0 0; } .word-rotator-dots::before { position: absolute; top: 50%; left: 0; z-index: 0; width: var(--word-rotator-active-width); height: var(--word-rotator-dot-size); border-radius: var(--ds-radius-pill); background: radial-gradient(circle at 74% 42%, color-mix(in srgb, #ffffff 32%, transparent), transparent 32%), var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 24%, transparent); content: ""; transform-origin: 18% 50%; transform: translateX(calc(var(--word-rotator-index, 0) * var(--word-rotator-step))) translateY(-50%); transition: transform 620ms var(--ds-ease), background 250ms ease, box-shadow 250ms ease; } .word-rotator-dot { position: relative; z-index: 1; width: var(--word-rotator-dot-size); height: var(--word-rotator-dot-size); padding: 0; border: 0; border-radius: var(--ds-radius-pill); background: color-mix(in srgb, var(--text) 22%, transparent); cursor: pointer; transition: background 250ms ease, transform 250ms ease; -webkit-appearance: none; appearance: none; } .word-rotator-dot:hover { background: color-mix(in srgb, var(--text) 44%, transparent); } .word-rotator-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .word-rotator-dot.is-active { background: transparent; transform: scale(0.72); } .word-rotator-gooey-dots { --rotator-gooey-accent: #f4fff9; --rotator-gooey-dot-size: 24px; --rotator-gooey-dot-gap: 4.8px; --rotator-gooey-scale: 0.42; --rotator-gooey-select-size: 27.2px; --rotator-gooey-select-top: 14.4px; --rotator-gooey-select-soft-inset: 0.8px; --rotator-gooey-select-core-inset: 2.4px; --rotator-gooey-select-blur: 1.6px; --rotator-gooey-stage-width: 200px; --rotator-gooey-stage-pad: 16px; --rotator-gooey-stage-total-width: 234px; --rotator-gooey-stage-total-height: 56px; display: flex; width: calc(var(--rotator-gooey-stage-total-width) * var(--rotator-gooey-scale)); height: calc(var(--rotator-gooey-stage-total-height) * var(--rotator-gooey-scale)); align-items: center; margin-top: 18px; position: relative; overflow: visible; } .word-rotator-gooey-stage { width: var(--rotator-gooey-stage-width); padding: var(--rotator-gooey-stage-pad); position: absolute; top: 50%; left: 0; background: transparent; font-size: 0; line-height: 0; white-space: nowrap; filter: url("#kimikon-rotator-gooey-filter"); -webkit-filter: url("#kimikon-rotator-gooey-filter"); transform: translateY(-50%) scale(var(--rotator-gooey-scale)); transform-origin: left center; } .word-rotator-gooey-dot { --rotator-gooey-dot-accent: 0%; display: inline-block; width: var(--rotator-gooey-dot-size); height: var(--rotator-gooey-dot-size); margin-left: var(--rotator-gooey-dot-gap); margin-right: var(--rotator-gooey-dot-gap); padding: 0; border: 0; border-radius: 50%; position: relative; z-index: 2; background: color-mix(in srgb, var(--rotator-gooey-accent) var(--rotator-gooey-dot-accent), #fff); cursor: pointer; vertical-align: middle; color: #000; appearance: none; -webkit-appearance: none; } .word-rotator-gooey-select { display: block; width: var(--rotator-gooey-select-size); height: var(--rotator-gooey-select-size); border-radius: 100%; position: absolute; z-index: 3; top: var(--rotator-gooey-select-top); left: 0; background: transparent; pointer-events: none; transform: translateX(var(--rotator-gooey-x, 0px)) scale(var(--rotator-gooey-scale-x, 1), var(--rotator-gooey-scale-y, 1)); transform-origin: center; } .word-rotator-gooey-select::before, .word-rotator-gooey-select::after { position: absolute; border-radius: inherit; background: var(--rotator-gooey-accent); content: ""; } .word-rotator-gooey-select::before { inset: var(--rotator-gooey-select-soft-inset); filter: blur(var(--rotator-gooey-select-blur)); opacity: 0.9; } .word-rotator-gooey-select::after { inset: var(--rotator-gooey-select-core-inset); opacity: 0.82; } @media (prefers-reduced-motion: reduce) { .rotating-word.is-swapping { animation: none; } .word-rotator, .word-rotator-dot, .word-rotator-dots::before { transition: none; } }