/* ════════════════════════════════════════════════════════════════
Unicode2KrutiDev — central design system
Update tokens or components here → all 100+ pages inherit.
Palette: warm cream paper, deep teal primary, warm saffron accent.
Audience: 35–45 yr old government / school / court workers in India.
Mood: trustworthy, lively, mature. NOT loud, NOT corporate, NOT young-tech.
════════════════════════════════════════════════════════════════ */
@charset "UTF-8";
/* Fonts are loaded via tags in each page (not @import here)
so they don't render-block the CSS and LCP stays under ~200ms. */
/* ───── Tokens ───── */
:root {
/* Surfaces — clean lively white */
--u2k-paper: #ffffff; /* page body */
--u2k-paper-2: #f6f8fc; /* very subtle blue-tinted inset */
--u2k-paper-warm: #fbf8f3; /* kept token (unused on page bg) */
--u2k-card: #ffffff; /* card surface */
--u2k-glass: rgba(255,255,255,.72); /* frosted glass */
/* Text & ink */
--u2k-ink: #1c2540; /* deep navy-slate, replaces pure black */
--u2k-ink-soft: #2c3654;
--u2k-fg-2: #4d5673; /* secondary text */
--u2k-fg-3: #6e7693; /* tertiary */
--u2k-fg-4: #969db4; /* muted */
--u2k-fg-5: #c2c7d6; /* dotted-underline grey */
/* Lines */
--u2k-line: #ebeef5; /* cool hairline */
--u2k-line-2: #d8deeb; /* stronger line */
--u2k-line-cool: #e6e9f2;
/* Brand — lively electric blue (replaces teal & green) */
--u2k-blue: #3b56ff; /* PRIMARY — active button, tab, link, status */
--u2k-blue-deep: #2a3fd9;
--u2k-blue-soft: #eef0ff; /* tinted background */
--u2k-blue-line: #c4cdff;
--u2k-blue-glow: rgba(59,86,255,.28);
/* Back-compat aliases (old teal vars → blue) */
--u2k-teal: #3b56ff;
--u2k-teal-deep: #2a3fd9;
--u2k-teal-soft: #eef0ff;
--u2k-teal-line: #c4cdff;
--u2k-saffron: #d97742; /* warm accent only */
--u2k-saffron-deep: #c0612e;
--u2k-saffron-soft: #fbeee2;
--u2k-saffron-line: #f0c9a8;
--u2k-marigold: #f0a830;
--u2k-green: #2c66c4; /* alias: green→blue per audience pref */
--u2k-red: #c43e3e;
--u2k-logo-red: #d7262f;
--u2k-logo-red-glow: rgba(215,38,47,.28);
/* Type */
--u2k-display: 'Archivo', system-ui, sans-serif;
--u2k-body: 'Inter', system-ui, sans-serif;
--u2k-deva: 'Noto Sans Devanagari', 'Tiro Devanagari Hindi', sans-serif;
--u2k-mono: 'JetBrains Mono', ui-monospace, monospace;
--u2k-kruti: 'Kruti Dev 010', 'Kruti Dev', 'Mangal', monospace;
/* Radius */
--u2k-pill: 9999px;
--u2k-card-r: 28px;
/* Shadow */
--u2k-sh-sm: 0 1px 2px rgba(28,37,64,.05);
--u2k-sh-md: 0 10px 30px -16px rgba(28,37,64,.16);
--u2k-sh-lg: 0 28px 70px -28px rgba(28,37,64,.22);
--u2k-sh-blue: 0 18px 40px -22px rgba(44,102,196,.32);
/* Layout */
--u2k-max: 1320px;
--u2k-pad-x: 40px;
}
/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--u2k-paper);
color: var(--u2k-ink);
font-family: var(--u2k-body);
font-size: 16px; line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button, textarea, input { font-family: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
textarea { display: block; }
/* ═══════════ NAV (glass) ═══════════ */
.u2k-nav {
position: sticky; top: 0; z-index: 50;
background: var(--u2k-glass);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--u2k-line);
padding: 14px var(--u2k-pad-x);
display: flex; align-items: center; justify-content: space-between;
}
.u2k-brand { display: flex; align-items: center; gap: 12px; }
/* Clean U·K monogram — real child elements (pseudo-elements are fragile) */
.u2k-brand-mark {
position: relative;
width: 40px; height: 40px; border-radius: var(--u2k-pill);
background: var(--u2k-logo-red);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 18px 40px -22px var(--u2k-logo-red-glow);
font-family: var(--u2k-display);
font-weight: 900;
font-size: 13.5px;
color: #fff;
letter-spacing: -.3px;
flex-shrink: 0;
}
.u2k-brand-mark::after {
content: "";
position: absolute; top: 3px; right: 3px;
width: 8px; height: 8px; border-radius: var(--u2k-pill);
background: var(--u2k-saffron);
box-shadow: 0 0 0 2px #fff;
}
.u2k-brand-mark span { display: none; }
.u2k-brand-mark .mark-text {
display: inline-block;
font-family: var(--u2k-display);
font-weight: 900;
font-size: 13.5px;
letter-spacing: -.3px;
color: #fff;
line-height: 1;
}
.u2k-brand-name {
font-family: var(--u2k-display); font-weight: 800;
font-size: 20px; letter-spacing: -.4px; color: var(--u2k-ink);
}
.u2k-brand-name .accent { color: var(--u2k-saffron); }
.u2k-brand-name .tld { font-weight: 600; color: var(--u2k-fg-4); font-size: 12px; margin-left: 2px; }
.u2k-nav-links { display: flex; align-items: center; gap: 30px; }
.u2k-nav-links a {
font-size: 14px; font-weight: 600; color: var(--u2k-ink-soft);
position: relative; padding: 6px 0;
}
.u2k-nav-links a:hover { color: var(--u2k-teal); }
.u2k-nav-links a.active { color: var(--u2k-teal); }
.u2k-nav-links a.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 3px; border-radius: var(--u2k-pill); background: var(--u2k-saffron);
}
.u2k-nav-actions { display: flex; align-items: center; gap: 10px; }
.u2k-nav-actions > .u2k-btn--ghost { display: none; }
/* ═══════════ BUTTONS ═══════════ */
.u2k-btn {
border-radius: var(--u2k-pill);
padding: 10px 18px;
font-size: 13.5px; font-weight: 700;
display: inline-flex; align-items: center; gap: 8px;
transition: all .18s ease;
white-space: nowrap;
border: 1px solid transparent;
}
.u2k-btn--primary {
background: var(--u2k-teal); color: #fff;
box-shadow: var(--u2k-sh-md);
}
.u2k-btn--primary:hover { background: var(--u2k-teal-deep); }
.u2k-btn--ghost {
background: var(--u2k-card); color: var(--u2k-ink);
border-color: var(--u2k-line-2);
}
.u2k-btn--ghost:hover { border-color: var(--u2k-teal); color: var(--u2k-teal); }
.u2k-btn--accent {
background: var(--u2k-saffron); color: #fff;
box-shadow: 0 8px 18px -10px rgba(217,119,66,.55);
}
.u2k-btn--accent:hover { background: var(--u2k-saffron-deep); }
.u2k-btn--whats {
background: #fff; color: #128c4f;
border-color: #b8e2cd;
}
.u2k-btn--whats:hover { border-color: #25d366; background: #f5fbf8; }
.u2k-btn--sm { padding: 7px 14px; font-size: 13px; font-weight: 600; }
.u2k-btn .u2k-ico { width: 14px; height: 14px; }
/* ═══════════ TRUST STRIP ═══════════ */
.u2k-trust {
display: flex; justify-content: center; align-items: center;
gap: 22px; padding: 10px 24px;
background: var(--u2k-blue-soft);
border-bottom: 1px solid var(--u2k-blue-line);
color: var(--u2k-ink-soft);
font-size: 13px; font-weight: 500;
flex-wrap: wrap;
}
.u2k-trust .dot {
width: 6px; height: 6px; border-radius: var(--u2k-pill);
background: var(--u2k-blue); display: inline-block;
margin-right: 8px; vertical-align: 2px;
}
.u2k-trust .dot--green {
background: var(--u2k-blue);
box-shadow: 0 0 0 3px rgba(44,102,196,.22);
}
.u2k-trust b { font-weight: 700; color: var(--u2k-ink); }
.u2k-trust .sep { color: var(--u2k-fg-4); }
/* ═══════════ HERO ═══════════ */
.u2k-hero {
padding: 56px var(--u2k-pad-x) 24px;
max-width: var(--u2k-max); margin: 0 auto;
text-align: center;
}
.u2k-hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
border: 1px solid var(--u2k-line-2);
background: var(--u2k-card);
border-radius: var(--u2k-pill);
font-size: 12.5px; color: var(--u2k-fg-2);
margin-bottom: 22px;
}
.u2k-hero-eyebrow b { color: var(--u2k-ink); font-weight: 700; }
.u2k-hero-eyebrow .live {
width: 7px; height: 7px; border-radius: var(--u2k-pill);
background: var(--u2k-blue);
box-shadow: 0 0 0 3px rgba(44,102,196,.18);
}
.u2k-hero h1,
.u2k-hero h2 {
font-family: var(--u2k-display); font-weight: 900;
font-size: clamp(44px, 5.6vw, 76px);
line-height: 1.06; letter-spacing: -2px;
color: var(--u2k-ink);
margin-bottom: 14px;
}
.u2k-hero h1 .saffron-text,
.u2k-hero h2 .saffron-text {
color: var(--u2k-saffron);
font-family: var(--u2k-deva);
font-weight: 700;
font-size: .54em;
display: inline-block;
margin-top: 18px;
margin-bottom: 6px;
line-height: 1.4;
}
.u2k-hero h1 .underline-saff,
.u2k-hero h2 .underline-saff {
position: relative; display: inline-block; padding-bottom: 10px;
}
.u2k-hero h1 .underline-saff::after,
.u2k-hero h2 .underline-saff::after {
content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px;
height: 9px; border-radius: var(--u2k-pill);
background: linear-gradient(92deg,
#ea2804 0%,
#f24a0c 22%,
#f7a823 42%,
#e6207a 70%,
#ff5fa3 100%);
opacity: .95;
}
.u2k-hero-sub {
font-family: var(--u2k-deva); font-size: 22px;
color: var(--u2k-fg-2); margin-top: 6px; font-weight: 500;
}
.u2k-hero-sub .en {
font-family: var(--u2k-body); font-size: 17px;
color: var(--u2k-fg-3); margin-left: 8px; font-weight: 400;
}
.u2k-hero-chips {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px; margin-top: 24px;
}
.u2k-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
border: 1px solid var(--u2k-line-2);
border-radius: var(--u2k-pill);
font-size: 13px; font-weight: 500; color: var(--u2k-fg-2);
background: var(--u2k-card);
}
.u2k-chip svg { width: 14px; height: 14px; color: var(--u2k-teal); }
.u2k-chip b { color: var(--u2k-ink); font-weight: 700; }
/* ═══════════ CONVERTER (glass card) ═══════════ */
.u2k-converter-wrap { max-width: var(--u2k-max); margin: 32px auto 0; padding: 0 var(--u2k-pad-x); }
.u2k-converter {
border: 1px solid var(--u2k-line-2);
border-radius: var(--u2k-card-r);
background: #ffffff;
overflow: hidden; position: relative;
box-shadow: var(--u2k-sh-lg);
}
.u2k-converter::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg,
#ea2804 0%,
#f24a0c 22%,
#f7a823 42%,
#e6207a 70%,
#ff5fa3 100%);
}
.u2k-conv-head {
display: flex; align-items: center; justify-content: space-between;
padding: 24px 28px; border-bottom: 1px solid var(--u2k-line);
gap: 16px; flex-wrap: wrap;
background: #ffffff;
}
/* Tab "opens in new tab" indicator */
.u2k-tabs a .ext-ico {
width: 11px; height: 11px;
opacity: .5; margin-left: 2px;
transition: opacity .15s ease, transform .15s ease;
}
.u2k-tabs a:hover .ext-ico { opacity: 1; transform: translate(1px, -1px); }
.u2k-tabs a.active .ext-ico { display: none; }
/* Tab switch — each tab is an so each direction has its own URL */
.u2k-tabs {
display: inline-flex;
background: var(--u2k-card);
border: 1px solid var(--u2k-line-2);
border-radius: var(--u2k-pill);
padding: 4px; gap: 2px;
}
.u2k-tabs a {
padding: 9px 20px;
border-radius: var(--u2k-pill);
font-size: 13.5px; font-weight: 600;
color: var(--u2k-fg-2);
display: inline-flex; align-items: center; gap: 8px;
transition: color .15s ease;
}
.u2k-tabs a:hover { color: var(--u2k-teal); }
.u2k-tabs a.active {
background: var(--u2k-blue); color: #fff;
box-shadow: 0 8px 18px -10px var(--u2k-blue-glow);
}
.u2k-badge {
display: none;
font-size: 10px; padding: 2px 7px; border-radius: var(--u2k-pill);
background: var(--u2k-marigold); color: var(--u2k-ink);
font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.u2k-tabs a.active .u2k-badge { background: rgba(255,255,255,.2); color: #fff; }
.u2k-conv-meta {
display: flex; align-items: center; gap: 12px;
font-size: 12.5px; color: var(--u2k-fg-3);
}
.u2k-conv-meta .pill-meta {
padding: 4px 12px; border-radius: var(--u2k-pill);
background: var(--u2k-paper-2); color: var(--u2k-ink-soft);
font-family: var(--u2k-mono); font-size: 11.5px; font-weight: 500;
}
/* Panels */
.u2k-panels { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
.u2k-panel { padding: 22px 24px 0; }
.u2k-panel-head {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start;
margin-bottom: 14px; gap: 20px;
}
.u2k-panel-head > div:first-child {
min-width: 0;
}
.u2k-panel-head > div:first-child > .u2k-panel-title,
.u2k-panel-head > div:first-child > .u2k-panel-sub {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.u2k-panel-title {
font-family: var(--u2k-display); font-weight: 800;
font-size: 20px; color: var(--u2k-saffron); letter-spacing: -.4px;
display: flex; align-items: center; gap: 10px;
line-height: 1.15;
}
.u2k-panel-title .pill-tag {
font-family: var(--u2k-mono); font-size: 10.5px;
color: var(--u2k-fg-3); font-weight: 500;
background: var(--u2k-paper); border: 1px solid var(--u2k-line);
padding: 3px 9px; border-radius: var(--u2k-pill);
}
.u2k-panel:nth-child(3) .u2k-panel-title .pill-tag {
display: none;
}
.u2k-panel-sub {
font-size: 13px; color: var(--u2k-fg-3); margin-top: 3px;
font-family: var(--u2k-deva);
}
.u2k-panel-sub .en {
font-family: var(--u2k-body); color: var(--u2k-fg-4); margin-left: 6px;
}
.u2k-panel-tools {
display: flex; gap: 6px; flex-wrap: nowrap;
align-items: flex-start; justify-content: flex-end;
}
.u2k-panel-tools .pill-tag {
display: none;
}
.u2k-tool {
padding: 7px 12px;
border: 1px solid var(--u2k-line-2);
border-radius: var(--u2k-pill);
background: var(--u2k-card);
font-size: 12.5px; font-weight: 600; color: var(--u2k-ink-soft);
display: inline-flex; align-items: center; gap: 6px;
transition: all .15s ease;
}
.u2k-tool:hover { border-color: var(--u2k-teal); color: var(--u2k-teal); }
.u2k-tool--primary {
background: var(--u2k-teal); color: #fff; border-color: var(--u2k-teal);
}
.u2k-tool--primary:hover { background: var(--u2k-teal-deep); color: #fff; }
.u2k-tool .u2k-ico { width: 14px; height: 14px; }
.u2k-textarea-wrap { margin: 0 -24px; }
.u2k-editor {
width: 100%; min-height: 340px;
border: none; outline: none; resize: none;
padding: 18px 24px 24px;
font-size: 18px; line-height: 1.65;
color: var(--u2k-ink);
background: transparent;
}
.u2k-editor.unicode { font-family: var(--u2k-deva); font-weight: 500; }
.u2k-editor.kruti { font-family: var(--u2k-kruti); font-size: 22px; letter-spacing: .2px; }
.u2k-panel-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 24px 18px;
border-top: 1px solid var(--u2k-line);
margin: 0 -24px;
gap: 12px; flex-wrap: wrap;
background: #ffffff;
}
.u2k-counts { display: flex; gap: 18px; font-size: 13px; color: var(--u2k-fg-3); }
.u2k-counts b { font-family: var(--u2k-mono); font-weight: 700; color: var(--u2k-ink); font-size: 14px; }
/* Swap divider */
.u2k-swap-col {
position: relative;
border-left: 1px dashed var(--u2k-line-2);
border-right: 1px dashed var(--u2k-line-2);
width: 1px;
}
.u2k-swap-btn {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 54px; height: 54px;
border-radius: var(--u2k-pill);
background: var(--u2k-card);
border: 1px solid var(--u2k-line-2);
box-shadow: var(--u2k-sh-md);
display: flex; align-items: center; justify-content: center;
color: var(--u2k-ink); text-decoration: none;
}
.u2k-swap-btn:hover {
background: var(--u2k-teal); border-color: var(--u2k-teal); color: #fff;
}
/* Action bar */
.u2k-action-bar {
padding: 18px 28px;
border-top: 1px solid var(--u2k-line);
background: #ffffff;
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap;
}
.u2k-action-bar > div { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.u2k-font-warn {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 16px 7px 8px;
border: 1px dashed var(--u2k-saffron);
border-radius: var(--u2k-pill);
font-size: 13px; color: var(--u2k-saffron-deep);
background: var(--u2k-saffron-soft); font-weight: 600;
}
.u2k-font-warn .badge-circle {
width: 24px; height: 24px; border-radius: var(--u2k-pill);
background: var(--u2k-saffron); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
}
.u2k-font-warn a {
text-decoration: underline dotted var(--u2k-saffron-deep);
text-underline-offset: 3px;
}
/* ═══════════ SECTION TITLES ═══════════ */
/* SEO breadcrumbs + support clusters */
.u2k-breadcrumb {
max-width: var(--u2k-max);
margin: 18px auto 0;
padding: 0 var(--u2k-pad-x);
color: var(--u2k-fg-3);
font-size: 13px;
}
.u2k-breadcrumb ol {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
flex-wrap: wrap;
}
.u2k-breadcrumb li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.u2k-breadcrumb li + li::before {
content: "/";
color: var(--u2k-fg-5);
}
.u2k-breadcrumb a {
color: var(--u2k-fg-2);
text-decoration: underline dotted var(--u2k-line-2);
text-underline-offset: 3px;
}
.u2k-breadcrumb a:hover {
color: var(--u2k-blue);
}
.u2k-support-grid,
.u2k-seo-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.u2k-support-card,
.u2k-seo-card {
border: 1px solid var(--u2k-line-2);
border-radius: 22px;
background: var(--u2k-card);
padding: 22px 24px;
box-shadow: var(--u2k-sh-sm);
}
.u2k-support-card {
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color .15s ease, transform .15s ease;
}
.u2k-support-card:hover {
border-color: var(--u2k-blue-line);
transform: translateY(-1px);
}
.u2k-support-card-title,
.u2k-seo-card h3 {
font-family: var(--u2k-display);
font-weight: 800;
color: var(--u2k-ink);
font-size: 17px;
line-height: 1.25;
}
.u2k-support-card-text,
.u2k-seo-card p,
.u2k-seo-card li {
color: var(--u2k-fg-2);
font-size: 14px;
line-height: 1.6;
}
.u2k-seo-card ul {
padding-left: 18px;
margin-top: 10px;
}
.u2k-seo-card--links {
display: flex;
flex-direction: column;
gap: 10px;
}
.u2k-seo-card--links a {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--u2k-blue);
font-weight: 700;
text-decoration: underline dotted var(--u2k-blue-line);
text-underline-offset: 4px;
}
.u2k-seo-card--links a span {
color: var(--u2k-fg-4);
font-weight: 500;
font-size: 12px;
white-space: nowrap;
}
.u2k-section { max-width: var(--u2k-max); margin: 80px auto 0; padding: 0 var(--u2k-pad-x); }
.u2k-section-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 22px; gap: 20px;
}
.u2k-section-title {
font-family: var(--u2k-display); font-weight: 800;
font-size: 34px; letter-spacing: -1px; color: var(--u2k-ink);
line-height: 1.05;
}
.u2k-section-title .deva {
font-family: var(--u2k-deva); font-weight: 600;
color: var(--u2k-fg-2); margin-left: 10px; font-size: 24px;
}
.u2k-section-sub {
font-size: 14.5px; color: var(--u2k-fg-2);
max-width: 540px; line-height: 1.55; margin-top: 8px;
}
.u2k-section-link {
font-size: 13.5px; color: var(--u2k-teal);
text-decoration: underline dotted var(--u2k-teal-line);
text-underline-offset: 4px; font-weight: 600; white-space: nowrap;
}
.u2k-section-link:hover { color: var(--u2k-teal-deep); }
/* ═══════════ KEYBOARD ═══════════ */
.u2k-kb-card {
border-radius: var(--u2k-card-r);
background: var(--u2k-ink);
color: #fff;
padding: 40px 44px;
display: grid; grid-template-columns: 1.1fr 2.4fr;
gap: 48px; align-items: center;
position: relative; overflow: hidden;
box-shadow: var(--u2k-sh-lg);
}
.u2k-kb-card::after {
content: ""; position: absolute;
top: -40%; right: -10%;
width: 480px; height: 480px;
border-radius: var(--u2k-pill);
background: radial-gradient(circle, rgba(240,168,48,.16), transparent 60%);
pointer-events: none;
}
.u2k-kb-card h2 {
font-family: var(--u2k-display); font-weight: 900;
font-size: 44px; line-height: 1.02; letter-spacing: -1.3px;
margin-bottom: 14px;
}
.u2k-kb-card h2 .saff { color: var(--u2k-saffron); }
.u2k-kb-card p {
color: #c7cdd9; font-size: 15px; line-height: 1.6;
margin-bottom: 20px;
}
.u2k-kb-card p b { color: #fff; }
.u2k-kb-toggle {
display: inline-flex;
background: #2a3554;
border: 1px solid #3a4666;
border-radius: var(--u2k-pill);
padding: 4px; gap: 2px;
margin-bottom: 18px;
}
.u2k-kb-toggle button {
padding: 8px 16px;
border-radius: var(--u2k-pill);
font-size: 13px; font-weight: 600;
color: #aab4ce;
}
.u2k-kb-toggle button.active {
background: var(--u2k-saffron); color: #fff;
}
.u2k-kb-legend { display: flex; gap: 18px; font-size: 12px; color: #aab4ce; }
.u2k-kb-legend i {
display: inline-block; width: 10px; height: 10px;
border-radius: 3px; margin-right: 6px; vertical-align: -1px;
}
.u2k-kb-grid { display: flex; flex-direction: column; gap: 7px; }
.u2k-kb-row { display: flex; gap: 7px; justify-content: center; }
.u2k-kb-row.r2 { padding-left: 28px; }
.u2k-kb-row.r3 { padding-left: 42px; }
.u2k-key {
min-width: 54px; height: 60px;
border-radius: 14px;
background: #2a3554;
border: 1px solid #3a4666;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 6px 4px;
transition: all .15s;
}
.u2k-key:hover {
background: #3a4666; border-color: var(--u2k-saffron);
transform: translateY(-1px);
}
.u2k-key .deva-glyph {
font-family: var(--u2k-deva); font-size: 20px;
font-weight: 600; color: #fff; line-height: 1;
}
.u2k-key .ascii-glyph {
font-family: var(--u2k-mono); font-size: 11px;
color: var(--u2k-marigold); margin-top: 4px;
}
.u2k-key--wide { min-width: 88px; }
.u2k-key--special { background: #1d2542; }
.u2k-key--special .deva-glyph {
color: #8a93b1; font-size: 13px;
font-family: var(--u2k-body); font-weight: 600;
}
/* ═══════════ FONT INSTALL ═══════════ */
.u2k-font-card {
border: 1px solid var(--u2k-line-2);
border-radius: var(--u2k-card-r);
background: var(--u2k-card);
display: grid; grid-template-columns: 1.3fr 1fr;
overflow: hidden;
box-shadow: var(--u2k-sh-md);
}
.u2k-font-left { padding: 40px 44px; }
.u2k-font-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
border: 1px solid var(--u2k-line-2);
border-radius: var(--u2k-pill);
font-size: 11.5px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: var(--u2k-fg-3); margin-bottom: 18px;
}
.u2k-font-eyebrow b { color: var(--u2k-saffron); }
.u2k-font-left h2 {
font-family: var(--u2k-display); font-weight: 900;
font-size: 40px; line-height: 1.05;
letter-spacing: -1.2px; margin-bottom: 14px; color: var(--u2k-ink);
}
.u2k-font-left > p {
color: var(--u2k-fg-2); font-size: 15.5px;
line-height: 1.6; margin-bottom: 24px; max-width: 520px;
}
.u2k-font-left > p b { color: var(--u2k-ink); }
.u2k-steps {
display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px;
}
.u2k-step { flex: 1; min-width: 180px; display: flex; gap: 12px; align-items: flex-start; }
.u2k-step .num {
width: 32px; height: 32px; border-radius: var(--u2k-pill);
background: var(--u2k-blue); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--u2k-display); font-weight: 800;
font-size: 14px; flex-shrink: 0;
box-shadow: 0 6px 14px -8px var(--u2k-blue-glow);
}
.u2k-step .step-label {
font-size: 13.5px; color: var(--u2k-ink); font-weight: 600; line-height: 1.35;
}
.u2k-step .step-label .sub {
display: block; font-size: 12px; font-weight: 400;
color: var(--u2k-fg-3); margin-top: 2px;
}
.u2k-install-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.u2k-font-right {
background: linear-gradient(135deg, var(--u2k-blue) 0%, var(--u2k-blue-deep) 100%);
position: relative;
display: flex; align-items: center; justify-content: center;
padding: 40px;
overflow: hidden;
}
.u2k-font-right::before {
content: "क"; position: absolute;
font-family: var(--u2k-deva); font-size: 520px;
font-weight: 800; color: rgba(255,255,255,.12);
line-height: .8; top: -30px; left: -40px;
pointer-events: none;
}
.u2k-font-preview {
position: relative;
background: var(--u2k-card);
border-radius: 22px;
padding: 24px 28px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.3);
max-width: 320px;
}
.u2k-font-preview .ttl {
font-size: 12px; color: var(--u2k-fg-4);
font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; margin-bottom: 10px;
}
.u2k-font-preview .specimen {
font-family: var(--u2k-kruti); font-size: 36px;
line-height: 1.2; color: var(--u2k-ink); margin-bottom: 10px;
}
.u2k-font-preview .specimen-dev {
font-family: var(--u2k-deva); font-size: 26px;
line-height: 1.35; color: var(--u2k-fg-2); font-weight: 500;
}
.u2k-font-preview .meta {
display: flex; gap: 10px; margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--u2k-line);
font-size: 11.5px; color: var(--u2k-fg-4); font-family: var(--u2k-mono);
}
/* ═══════════ FAQ ═══════════ */
.u2k-faq-list {
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px; margin-top: 32px;
}
.u2k-faq-item {
border: 1px solid var(--u2k-line-2);
border-radius: 22px;
padding: 22px 24px;
background: var(--u2k-card);
transition: border-color .15s ease;
}
.u2k-faq-item:hover { border-color: var(--u2k-teal-line); }
.u2k-faq-q {
font-family: var(--u2k-display); font-weight: 700;
font-size: 17px; color: var(--u2k-ink);
margin-bottom: 8px;
display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.u2k-faq-q::after { content: "+"; color: var(--u2k-saffron); font-weight: 400; font-size: 22px; line-height: 1; }
.u2k-faq-a { font-size: 14px; line-height: 1.6; color: var(--u2k-fg-2); }
.u2k-faq-a .deva {
font-family: var(--u2k-deva); color: var(--u2k-fg-3);
display: block; margin-top: 4px; font-size: 14px;
}
.u2k-faq-a b { color: var(--u2k-ink); }
/* ═══════════ FOOTER ═══════════ */
.u2k-footer {
margin-top: 96px;
background: var(--u2k-ink); color: #fff;
padding: 56px var(--u2k-pad-x) 32px;
}
.u2k-footer-inner {
max-width: var(--u2k-max); margin: 0 auto;
display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 40px;
}
.u2k-footer h4 {
font-family: var(--u2k-display); font-weight: 800;
font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
color: #aab4ce; margin-bottom: 14px;
}
.u2k-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.u2k-footer a {
color: #fff; font-size: 14px;
text-decoration: underline dotted #4a557a; text-underline-offset: 4px;
}
.u2k-footer a:hover { color: var(--u2k-marigold); text-decoration-color: var(--u2k-marigold); }
.u2k-footer-tagline { color: #c7cdd9; font-size: 14px; line-height: 1.55; margin-top: 14px; max-width: 340px; }
.u2k-footer-tagline b { color: #fff; }
.u2k-footer-bottom {
max-width: var(--u2k-max); margin: 48px auto 0;
padding-top: 24px; border-top: 1px solid #2e3856;
display: flex; justify-content: space-between; align-items: center;
font-size: 12.5px; color: #8a93b1; flex-wrap: wrap; gap: 14px;
}
.u2k-flag {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: var(--u2k-pill);
background: #2e3856; color: #fff; font-size: 11.5px;
}
.u2k-flag .b1 { width: 8px; height: 5px; background: #ff9933; }
.u2k-flag .b2 { width: 8px; height: 5px; background: #fff; }
.u2k-flag .b3 { width: 8px; height: 5px; background: #138808; }
/* ═══════════ UTILITIES ═══════════ */
.u2k-ico { display: inline-block; vertical-align: -2px; }
@media (max-width: 900px) {
:root { --u2k-pad-x: 20px; }
.u2k-conv-head {
padding: 18px;
align-items: flex-start;
}
.u2k-tabs {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
.u2k-tabs a {
flex: 0 0 auto;
padding: 8px 14px;
}
.u2k-conv-meta {
width: 100%;
}
.u2k-panels {
grid-template-columns: minmax(0, 1fr);
}
.u2k-panel {
min-width: 0;
padding: 18px 18px 0;
}
.u2k-panel-head {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.u2k-panel-tools {
justify-content: flex-start;
flex-wrap: wrap;
}
.u2k-panel-foot {
margin: 0 -18px;
padding: 12px 18px 16px;
}
.u2k-swap-col {
display: none;
}
.u2k-action-bar {
padding: 16px 18px;
flex-direction: column;
align-items: flex-start;
}
.u2k-kb-card {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding: 28px 20px;
}
.u2k-kb-grid {
max-width: 100%;
overflow-x: auto;
padding-bottom: 8px;
contain: paint;
}
.u2k-kb-row {
justify-content: flex-start;
min-width: max-content;
}
.u2k-kb-row.r2,
.u2k-kb-row.r3 {
padding-left: 0;
}
.u2k-faq-list,
.u2k-footer-inner {
grid-template-columns: minmax(0, 1fr);
}
}
.u2k-status {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}