@import url("https://fonts.googleapis.com/css2?family=Rasa:ital,wght@0,300..700;1,300..700&family=Comfortaa:wght@300..700&display=swap");
/* Kaiyou Digital — design system stylesheet.
Generated from the bound design system (tokens + components), flattened into
one file so it can be served from /assets/css/kaiyou.css with no build step.
Replaces the purchased theme's style.css / skin-green.css entirely.
Do not hand-edit: regenerate from the design system, then re-append the
"site additions" block at the foot of this file. */
/* ===== tokens/fonts.css ===== */
/* Webfaces. Rasa (display/serif) and Comfortaa (text/UI) are both served from
Google Fonts; the live site loads them the same way. No local binaries exist in
the source bundle, so the @font-face rules below are the Google-hosted ones.
Jost, Cinzel, Playfair Display, Poppins and Teko are theme leftovers — not loaded. */
/* ===== tokens/colors.css ===== */
/* Colour.
Canonical values come from the official brand sheet (uploads/kaiyou-logo-final.pdf),
which specifies five: #F2884B #081C26 #84B8D9 #F2B94F. The live site drifted from
these by a few points on each; the brand sheet wins and the as-built values are
recorded below for reference, not for use. */
:root{
/* ---- brand sheet, canonical ---- */
--kd-navy:#081c26; /* brand navy. Page ground. */
--kd-orange:#f2884b; /* brand orange. The primary accent. */
--kd-blue:#84b8d9; /* brand light blue. The wave in the emblem. */
--kd-gold:#f2b94f; /* brand gold. Secondary accent — see note below. */
/* ---- grounds ---- */
--kd-navy-mid:#0f2633; /* alternating section ground; services, about */
--kd-navy-light:#1a3048; /* reserved: raised surface (unused on the live site) */
/* ---- structure ---- */
--kd-dot:#4a7ab5; /* structural mid-blue, only ever used at alpha */
--kd-steel:#2d5a8a; /* reserved: secondary / informational (unused) */
/* ---- text ---- */
--kd-white:#ffffff; /* headings, input text */
--kd-off-white:#d8e8f4; /* lead copy */
--kd-muted:#6a93b5; /* body, labels, placeholders, captions */
/* ---- derived alphas — inlined as literals on the live site ---- */
--kd-rule:rgba(74,122,181,.12);
--kd-rule-faint:rgba(74,122,181,.10);
--kd-border:rgba(74,122,181,.18);
--kd-border-tag:rgba(74,122,181,.20);
--kd-underline:rgba(74,122,181,.25);
--kd-border-hover:rgba(74,122,181,.40);
--kd-surface:rgba(8,28,38,.45);
--kd-surface-hi:rgba(8,28,38,.70);
--kd-nav:rgba(8,28,38,.96);
--kd-numeral:rgba(242,136,75,.18);
--kd-hero-veil:linear-gradient(120deg,rgba(8,28,38,.88),rgba(8,28,38,.55) 60%,rgba(8,28,38,.20)); /* @kind other */
/* ---- semantic aliases ---- */
--kd-page:var(--kd-navy);
--kd-page-alt:var(--kd-navy-mid);
--kd-surface-card:var(--kd-surface);
--kd-surface-card-hover:var(--kd-surface-hi);
--kd-text-heading:var(--kd-white);
--kd-text-lead:var(--kd-off-white);
--kd-text-body:var(--kd-muted);
--kd-text-accent:var(--kd-orange);
--kd-border-default:var(--kd-border);
--kd-divider:var(--kd-rule);
--kd-focus:var(--kd-orange);
--kd-focus-ring:var(--kd-off-white);
/* ---- as-built drift, for reference only. Do not use. ----
The live site ships #0b1c2c navy and #f28a38 orange. Both are a few points
off the brand sheet and should be corrected in the site, not adopted here. */
}
/* ===== tokens/typography.css ===== */
/* Type. Two faces, strictly split — assignment per the official brand sheet:
Comfortaa display — wordmark, headings, numerals, eyebrows, labels, controls.
ALWAYS LOWERCASE. The brand sheet's own specimen sets headings in
title case; per the brand owner that specimen is wrong. Comfortaa is
never uppercased and never title-cased. Use .kd-preserve-case for
proper nouns.
Rasa text — running prose, lead copy, inputs, and the pull quote.
Sentence case as written. Rasa owns italics; Comfortaa has none, so
emphasis inside a heading switches face to Rasa italic.
This is the reverse of what kaiyou.digital currently ships (Rasa headings,
Comfortaa body). The brand sheet is the higher authority and the site is wrong. */
:root{
--kd-serif:"Rasa",Georgia,"Times New Roman",serif; /* @kind font */
--kd-ui:"Comfortaa","Trebuchet MS",system-ui,sans-serif; /* @kind font */
/* role aliases — every component references these two, never the faces directly,
so the assignment is a two-line change if it is ever revisited */
--kd-font-display:var(--kd-ui); /* @kind font */
--kd-font-text:var(--kd-serif); /* @kind font */
/* Comfortaa weight ladder, named on the brand sheet. All five are in use. */
--kd-w-light:300; /* @kind other */
--kd-w-regular:400; /* @kind other */
--kd-w-medium:500; /* @kind other */
--kd-w-semi:600; /* @kind other */
--kd-w-bold:700; /* @kind other */
--kd-hero-size:clamp(3.2rem,8.5vw,7.5rem);
--kd-hero-lh:1.02; /* @kind other */
--kd-title-size:clamp(2rem,5vw,3.4rem);
--kd-title-lh:1.1; /* @kind other */
--kd-quote-size:clamp(1.6rem,3.5vw,2.8rem);
--kd-quote-lh:1.35; /* @kind other */
--kd-h3-size:1.7rem;
--kd-h3-lh:1.15; /* @kind other */
--kd-h4-size:1.5rem;
--kd-h4-lh:1.2; /* @kind other */
--kd-numeral-size:3.2rem;
/* Body is Rasa at the brand sheet's 15pt. The old .85rem/2 was tuned for
Comfortaa; a serif at that size and leading reads thin, so body steps up to
15px and the leading comes in from 2 to 1.75. */
--kd-lead-size:1.0625rem;
--kd-body-size:.9375rem;
--kd-body-lh:1.75; /* @kind other */
--kd-label-size:.68rem;
--kd-eyebrow-size:.65rem;
--kd-micro-size:.70rem;
/* Tracking applies to the Comfortaa layer only. Rasa prose is never tracked. */
--kd-track-micro:.05em; /* @kind other */
--kd-track-label:.30em; /* @kind other */
--kd-track-hint:.35em; /* @kind other */
--kd-track-button:.40em; /* @kind other */
--kd-track-eyebrow:.50em; /* @kind other */
}
@media (max-width:991px){:root{--kd-numeral-size:2.4rem;}}
/* ===== tokens/space-shape.css ===== */
/* Space, shape and depth. Corners are square. One shadow exists. */
:root{
--kd-section:8rem;
--kd-section-wide:9rem;
--kd-section-head:4.5rem;
--kd-card-pad:3rem 2.5rem;
--kd-row-pad:2.5rem;
--kd-row-gap:2rem;
--kd-numeral-col:4.5rem;
--kd-footer-gap:6rem;
--kd-hero-offset:6rem;
--kd-hero-hint-band:5.5rem; /* clearance reserved under hero content for the scroll hint */
--kd-radius:0;
--kd-rail:3px;
--kd-shadow-nav:0 2px 24px rgba(0,0,0,.35);
}
@media (max-width:991px){:root{--kd-numeral-col:3.5rem;--kd-row-gap:1.25rem;}}
@media (max-width:576px){:root{--kd-section:5rem;--kd-section-wide:5rem;--kd-card-pad:2rem 1.75rem;}}
/* ===== tokens/texture.css ===== */
/* Texture. A 30px dot field at 10% opacity, and nothing else. */
:root{
--kd-dots:radial-gradient(var(--kd-dot) 1.2px,transparent 1.2px); /* @kind other */
--kd-dots-size:30px 30px; /* @kind other */
--kd-dots-opacity:.10; /* @kind other */
--kd-dots-opacity-contact:.07; /* @kind other */
--kd-ring-size:400px;
}
/* ===== tokens/motion.css ===== */
/* Motion. Four durations, all plain ease. Hover is a reveal, never a lift. */
:root{
--kd-ease:.4s ease; /* @kind other */
--kd-ease-fast:.3s ease; /* @kind other */
--kd-ease-colour:.35s ease; /* @kind other */
--kd-enter:.9s ease; /* @kind other */
}
@keyframes kd-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes kd-fade{from{opacity:0}to{opacity:1}}
@keyframes kd-pulse{0%,100%{transform:scaleY(1);opacity:.8}50%{transform:scaleY(.4);opacity:.3}}
@media (prefers-reduced-motion:reduce){
/* Delay must be zeroed too: kd-rise uses animation-fill-mode:both, so a
surviving 0.4-1s delay holds the from{opacity:0} frame and the hero reads
blank even once the duration is squashed. */
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
/* ===== tokens/layout.css ===== */
/* Layout. Bootstrap-style 12 column container, as the live site uses. */
:root{
--kd-grid:12; /* @kind other */
--kd-measure:460px;
--kd-container:1140px;
--kd-gutter:1.5rem;
}
/* ===== components/components.css ===== */
/* ==========================================================================
Kaiyou components. Component JSX emits these class names; styling lives here so
hover, focus and :before rails work without CSS-in-JS.
TYPE ASSIGNMENT (per the official brand sheet):
--kd-font-display = Comfortaa — wordmark, headings, numerals, labels, controls.
ALWAYS LOWERCASE. Never text-transform:uppercase.
--kd-font-text = Rasa — running prose, lead copy, inputs, pull quote.
Sentence case as written; Rasa owns italics.
Add .kd-preserve-case to any display element holding a proper noun.
========================================================================== */
/* ---- page shell ------------------------------------------------------ */
/* The stylesheet owns its own box model. Without this .kd-container computes
width:100% as a CONTENT box and adds the gutter on top, running 2x--kd-gutter
wider than its parent on every section. */
.kd-page,.kd-page *,.kd-page *::before,.kd-page *::after{box-sizing:border-box;}
.kd-container{box-sizing:border-box;}
.kd-page{background:var(--kd-navy);color:var(--kd-muted);font-family:var(--kd-font-text);font-size:var(--kd-body-size);line-height:var(--kd-body-lh);-webkit-font-smoothing:antialiased;}
.kd-container{width:100%;max-width:var(--kd-container);margin:0 auto;padding-left:var(--kd-gutter);padding-right:var(--kd-gutter);}
.kd-section{position:relative;padding-top:var(--kd-section);padding-bottom:var(--kd-section);background:var(--kd-navy);overflow:hidden;}
.kd-section--alt{background:var(--kd-navy-mid);}
.kd-section--wide{padding-top:var(--kd-section-wide);padding-bottom:var(--kd-section-wide);}
.kd-section--flush{padding-bottom:0;}
.kd-section--dots::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--kd-dots);background-size:var(--kd-dots-size);opacity:var(--kd-dots-opacity);}
.kd-section--dots-faint::before{opacity:var(--kd-dots-opacity-contact);}
.kd-section > *{position:relative;z-index:1;}
.kd-section__ring{position:absolute;right:-120px;bottom:-160px;width:var(--kd-ring-size);height:var(--kd-ring-size);border:1px solid var(--kd-rule-faint);border-radius:50%;pointer-events:none;z-index:0;}
.kd-footer{border-top:1px solid var(--kd-rule);margin-top:var(--kd-footer-gap);padding:2rem 0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;}
.kd-footer__micro{font-family:var(--kd-font-display);font-size:var(--kd-micro-size);letter-spacing:var(--kd-track-micro);color:var(--kd-muted);line-height:1.9;}
/* ---- navigation ------------------------------------------------------ */
.kd-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;padding:1.75rem 2rem;background:transparent;transition:background .4s ease,padding .4s ease,box-shadow .4s ease;}
.kd-nav--scrolled{background:var(--kd-nav);backdrop-filter:blur(8px);box-shadow:var(--kd-shadow-nav);padding:1rem 2rem;}
.kd-nav--static{position:relative;}
.kd-nav__logo{font-family:var(--kd-font-display);text-transform:lowercase;font-weight:700;font-size:1.25rem;letter-spacing:.28em;color:var(--kd-white);line-height:1;text-decoration:none;transition:font-size .4s ease;}
.kd-nav--scrolled .kd-nav__logo{font-size:1.05rem;}
.kd-nav__links{margin-left:auto;display:flex;align-items:center;gap:2.5rem;}
.kd-nav__link{font-family:var(--kd-font-display);font-size:var(--kd-label-size);font-weight:700;letter-spacing:var(--kd-track-label);text-transform:lowercase;color:var(--kd-muted);text-decoration:none;line-height:2;transition:color .3s ease;}
.kd-nav__link:hover,.kd-nav__link.is-active{color:var(--kd-orange);}
.kd-nav__link:focus-visible{outline:2px solid var(--kd-off-white);outline-offset:4px;}
/* Wordmark + one Contact link below 720px, no menu — the last link in
.kd-nav__links is Contact; hide the rest rather than wrapping them. */
@media (max-width:720px){.kd-nav__link:not(:last-child){display:none;}}
/* ---- hero ------------------------------------------------------------ */
.kd-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--kd-navy);}
.kd-hero__media{position:absolute;inset:0;background-size:cover;background-position:center;}
.kd-hero__veil{position:absolute;inset:0;background:var(--kd-hero-veil);}
.kd-hero__content{position:relative;z-index:2;padding-top:var(--kd-hero-offset);padding-bottom:var(--kd-hero-hint-band);max-width:58%;}
.kd-hero__eyebrow{font-family:var(--kd-font-display);font-size:.68rem;font-weight:700;letter-spacing:var(--kd-track-eyebrow);text-transform:lowercase;color:var(--kd-orange);display:block;margin-bottom:1.5rem;line-height:1.6;animation:kd-rise var(--kd-enter) .4s both;}
.kd-hero__title{font-family:var(--kd-font-display);text-transform:lowercase;font-size:var(--kd-hero-size);line-height:var(--kd-hero-lh);color:var(--kd-white);font-weight:600;margin:0 0 1.75rem;text-wrap:balance;animation:kd-rise var(--kd-enter) .7s both;}
.kd-hero__title em,.kd-section-title em{font-family:var(--kd-font-text);font-style:italic;font-weight:500;color:var(--kd-orange);}
.kd-hero__sub{font-family:var(--kd-font-text);font-size:var(--kd-lead-size);color:var(--kd-off-white);line-height:2;max-width:var(--kd-measure);margin:0;animation:kd-rise var(--kd-enter) 1s both;}
.kd-hero__hint{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;z-index:2;animation:kd-fade 1s 1.8s both;}
.kd-hero__hint span{font-family:var(--kd-font-display);font-size:.6rem;letter-spacing:var(--kd-track-hint);text-transform:lowercase;color:var(--kd-muted);}
.kd-hero__line{width:1px;height:44px;background:linear-gradient(to bottom,var(--kd-orange),transparent);animation:kd-pulse 2.2s 2s infinite;}
@media (max-width:720px){.kd-hero__content{max-width:100%;}}
/* Below this the hint would eat the subhead whatever the clearance — drop it. */
@media (max-height:640px){.kd-hero__hint{display:none;}.kd-hero__content{padding-bottom:0;}}
/* ---- section header -------------------------------------------------- */
.kd-section-header{margin-bottom:var(--kd-section-head);}
.kd-section-header--offset{margin-left:8.3333%;}
.kd-section-eyebrow{font-family:var(--kd-font-display);font-size:var(--kd-eyebrow-size);font-weight:700;letter-spacing:var(--kd-track-eyebrow);text-transform:lowercase;color:var(--kd-orange);display:block;margin-bottom:.9rem;line-height:1.6;}
.kd-section-title{font-family:var(--kd-font-display);text-transform:lowercase;font-size:var(--kd-title-size);color:var(--kd-white);line-height:var(--kd-title-lh);font-weight:600;margin:0;text-wrap:balance;}
/* ---- service card ---------------------------------------------------- */
.kd-service-card{padding:var(--kd-card-pad);border:1px solid var(--kd-border);position:relative;background:var(--kd-surface);height:100%;transition:border-color var(--kd-ease),background var(--kd-ease);overflow:hidden;}
.kd-service-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--kd-rail);background:var(--kd-orange);transform:scaleY(0);transform-origin:top;transition:transform var(--kd-ease);}
.kd-service-card:hover,.kd-service-card.is-hover{border-color:var(--kd-border-hover);background:var(--kd-surface-hi);}
.kd-service-card:hover::before,.kd-service-card.is-hover::before{transform:scaleY(1);}
/* Masked, not : an SVG loaded via is its own document, so
stroke="currentColor" resolves against ITS black initial colour and can never
inherit from the page. Masking keeps --kd-orange the single source of truth.
The artwork is inlined as a data URI because a relative url() resolves against
the STYLESHEET, not the document, and silently 404s from a page at another depth. */
.kd-service-icon{width:3rem;height:3rem;margin-bottom:2rem;display:block;background-color:var(--kd-orange);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.kd-service-icon--globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='24' cy='24' r='17'/%3E%3Cpath d='M7 24h34M24 7c5 5 5 29 0 34M24 7c-5 5-5 29 0 34'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='24' cy='24' r='17'/%3E%3Cpath d='M7 24h34M24 7c5 5 5 29 0 34M24 7c-5 5-5 29 0 34'/%3E%3C/svg%3E");}
.kd-service-icon--panel{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M8 13h32v26H8z'/%3E%3Cpath d='M8 21h32M16 13v26'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M8 13h32v26H8z'/%3E%3Cpath d='M8 21h32M16 13v26'/%3E%3C/svg%3E");}
.kd-service-name{font-family:var(--kd-font-display);text-transform:lowercase;font-size:var(--kd-h3-size);color:var(--kd-white);font-weight:600;line-height:var(--kd-h3-lh);margin:0 0 1.25rem;}
.kd-service-desc{font-family:var(--kd-font-text);font-size:var(--kd-body-size);color:var(--kd-muted);line-height:2;margin:0;}
/* ---- numbered row ---------------------------------------------------- */
.kd-approach-list{border-top:1px solid var(--kd-rule);margin:0;padding:0;list-style:none;}
.kd-approach-item{display:flex;gap:var(--kd-row-gap);align-items:flex-start;padding:var(--kd-row-pad) 0;border-bottom:1px solid var(--kd-rule);transition:padding-left var(--kd-ease-fast);}
.kd-approach-item:hover,.kd-approach-item.is-hover{padding-left:.5rem;}
.kd-approach-num{font-family:var(--kd-font-display);font-size:var(--kd-numeral-size);color:var(--kd-numeral);font-weight:700;line-height:1;flex-shrink:0;width:var(--kd-numeral-col);transition:color var(--kd-ease-colour);}
.kd-approach-item:hover .kd-approach-num,.kd-approach-item.is-hover .kd-approach-num{color:var(--kd-orange);}
.kd-approach-body{padding-top:.35rem;}
.kd-approach-body h3{font-family:var(--kd-font-display);text-transform:lowercase;font-size:var(--kd-h4-size);color:var(--kd-white);font-weight:600;margin:0 0 .75rem;line-height:var(--kd-h4-lh);}
.kd-approach-body p{font-family:var(--kd-font-text);font-size:var(--kd-body-size);color:var(--kd-muted);line-height:2;margin:0;}
.kd-team-role{font-family:var(--kd-font-display);font-size:var(--kd-label-size);font-weight:700;letter-spacing:var(--kd-track-label);text-transform:lowercase;color:var(--kd-orange);display:block;margin-bottom:.75rem;}
/* ---- pull quote ------------------------------------------------------ */
.kd-about-quote{font-family:var(--kd-font-text);font-size:var(--kd-quote-size);color:var(--kd-white);line-height:var(--kd-quote-lh);font-weight:400;font-style:italic;margin:0;padding-left:2rem;position:relative;}
.kd-about-quote::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:var(--kd-rail);background:var(--kd-orange);}
.kd-about-text{font-family:var(--kd-font-text);font-size:.88rem;color:var(--kd-muted);line-height:2.1;margin:0;}
/* ---- tag ------------------------------------------------------------- */
.kd-game-tags{display:flex;flex-wrap:wrap;gap:.6rem;}
.kd-tag{font-family:var(--kd-font-display);font-size:var(--kd-eyebrow-size);font-weight:700;letter-spacing:var(--kd-track-label);text-transform:lowercase;color:var(--kd-muted);border:1px solid var(--kd-border-tag);padding:.4rem .9rem;display:inline-block;line-height:1.8;border-radius:var(--kd-radius);}
/* ---- form and button ------------------------------------------------- */
.kd-form-field{position:relative;margin-bottom:2.25rem;}
.kd-form-label{display:block;font-family:var(--kd-font-display);font-size:.62rem;font-weight:700;letter-spacing:var(--kd-track-label);text-transform:lowercase;color:var(--kd-muted);line-height:2;margin-bottom:.15rem;}
.kd-form-field input,.kd-form-field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--kd-underline);padding:.85rem 0;color:var(--kd-white);font-family:var(--kd-font-text);font-size:.875rem;outline:none;display:block;transition:border-color var(--kd-ease-fast);border-radius:var(--kd-radius);}
.kd-form-field input::placeholder,.kd-form-field textarea::placeholder{color:var(--kd-muted);font-family:var(--kd-font-text);}
.kd-form-field input:focus,.kd-form-field textarea:focus{border-bottom-color:var(--kd-orange);}
.kd-form-field::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--kd-orange);transition:width var(--kd-ease);}
.kd-form-field:focus-within::after{width:100%;}
.kd-form-field.is-focus input{border-bottom-color:var(--kd-orange);}
.kd-form-field.is-focus::after{width:100%;}
.kd-form-field textarea{resize:none;height:110px;}
.kd-form-field.is-invalid input,.kd-form-field.is-invalid textarea{border-bottom-color:var(--kd-steel);}
.kd-form-hint{display:block;font-family:var(--kd-font-display);font-size:var(--kd-micro-size);letter-spacing:var(--kd-track-micro);color:var(--kd-muted);line-height:1.9;margin-top:.5rem;}
.kd-submit{background:transparent;border:1px solid var(--kd-orange);color:var(--kd-orange);font-family:var(--kd-font-display);font-size:var(--kd-label-size);font-weight:700;letter-spacing:var(--kd-track-button);text-transform:lowercase;padding:1rem 2.75rem;cursor:pointer;transition:background var(--kd-ease-fast),color var(--kd-ease-fast);display:inline-block;border-radius:var(--kd-radius);text-decoration:none;}
.kd-submit:hover:not(:disabled),.kd-submit.is-hover{background:var(--kd-orange);color:var(--kd-navy);}
.kd-submit:focus-visible{outline:2px solid var(--kd-off-white);outline-offset:3px;}
.kd-submit:disabled{opacity:.5;cursor:not-allowed;}
/* ---- case utility ---------------------------------------------------- */
/* Comfortaa is set lowercase throughout. Proper nouns that must keep their
capitals (person names, "All Sett", "PC & Steam Deck") opt out with this. */
.kd-preserve-case{text-transform:none!important;}
/* ---- links ----------------------------------------------------------- */
.kd-page a{color:var(--kd-orange);text-decoration:none;transition:color var(--kd-ease-fast);}
.kd-page a:hover{color:var(--kd-off-white);}
/* ===== site additions ==================================================
Two things the design system does not ship, needed by the Next.js site. */
/* 1. The site's four bespoke card icons are inline