/* ============================================================ kevakit — the kevalabs design system v1.0 · aug 2026 ideate. build. evolve() ------------------------------------------------------------ Usage: import this file, then build with tokens + components. Fonts (load in ): https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&family=Red+Hat+Text:wght@400;500&family=Red+Hat+Mono:wght@400;500&display=swap ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* color · core */ --kv-white:#FFFFFF; --kv-off:#F5F5F4; /* section bands, hover fills */ --kv-black:#151515; /* ink + dark bands */ --kv-gray:#575757; /* body-secondary */ --kv-gray-light:#8A8A8A; /* meta, captions */ --kv-line:#E0E0DE; /* borders, dividers */ /* color · brand */ --kv-red:#D6001C; /* THE accent. use sparingly */ --kv-red-dark:#A80016; /* hover state of red */ /* color · on-dark */ --kv-dark-body:#ABABAB; --kv-dark-code:#EDEDEC; --kv-dark-green:#7FC8A9; /* success in terminals */ --kv-dark-red:#FF6A7E; /* red readable on black */ /* type */ --kv-display:"Red Hat Display",sans-serif; /* headlines: 700, 900 */ --kv-text:"Red Hat Text",sans-serif; /* body: 400, 500 */ --kv-mono:"Red Hat Mono",monospace; /* labels, code, meta */ /* type scale */ --kv-fs-hero:clamp(38px,6vw,68px); --kv-fs-h2:clamp(26px,3.4vw,38px); --kv-fs-h3:21px; --kv-fs-body:16px; --kv-fs-small:14.5px; --kv-fs-meta:13px; --kv-fs-micro:12px; /* space (4-base) */ --kv-s1:4px; --kv-s2:8px; --kv-s3:12px; --kv-s4:16px; --kv-s5:24px; --kv-s6:32px; --kv-s7:48px; --kv-s8:72px; /* geometry — brand rule: corners are SQUARE */ --kv-radius:0; /* signature shadow (dark blocks only) */ --kv-punch:8px 8px 0 var(--kv-red); --kv-float:0 14px 34px -14px rgba(21,21,21,.22); /* layout */ --kv-max:1120px; } /* ---------- 2. BASE ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--kv-text);color:var(--kv-black);background:var(--kv-white); line-height:1.6;font-size:var(--kv-fs-body);-webkit-font-smoothing:antialiased; } .kv-wrap{max-width:var(--kv-max);margin:0 auto;padding:0 24px} a{color:inherit} ::selection{background:var(--kv-red);color:var(--kv-white)} a:focus-visible,button:focus-visible{outline:2px solid var(--kv-red);outline-offset:3px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} html{scroll-behavior:auto} } /* ---------- 3. TYPOGRAPHY ---------- */ .kv-hero-title{ font-family:var(--kv-display);font-weight:900; font-size:var(--kv-fs-hero);letter-spacing:-.03em;line-height:1.02; } .kv-h2{font-family:var(--kv-display);font-weight:700;font-size:var(--kv-fs-h2);letter-spacing:-.02em} .kv-h3{font-family:var(--kv-display);font-weight:700;font-size:var(--kv-fs-h3);letter-spacing:-.01em} .kv-body-lg{font-size:18px;color:var(--kv-gray)} .kv-body-2{color:var(--kv-gray)} .kv-meta{font-family:var(--kv-mono);font-size:var(--kv-fs-meta);color:var(--kv-gray-light)} .kv-accent{color:var(--kv-red)} /* comment-style kicker: prefix copy with "//" in the HTML */ .kv-kicker{font-family:var(--kv-mono);font-size:var(--kv-fs-meta);color:var(--kv-red);letter-spacing:.02em} /* section label: red rule + mono text */ .kv-label{ font-family:var(--kv-mono);font-size:var(--kv-fs-meta);color:var(--kv-gray); display:flex;align-items:center;gap:12px;margin-bottom:10px; } .kv-label::before{content:"";width:34px;height:3px;background:var(--kv-red)} /* ---------- 4. WORDMARK ---------- */ /* lowercase, Display 900, red terminal dot. Never uppercase. */ .kv-wordmark{font-family:var(--kv-display);font-weight:900;font-size:21px;letter-spacing:-.02em;text-decoration:none} .kv-wordmark .dot{color:var(--kv-red)} .kv-wordmark--lg{font-size:34px} /* product lockup: "keva" + product, e.g. KevaMQ */ .kv-product{font-family:var(--kv-display);font-weight:700} /* ---------- 5. BUTTONS ---------- */ .kv-btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--kv-text);font-size:15px;font-weight:500;text-decoration:none; padding:13px 26px;border:none;cursor:pointer;border-radius:var(--kv-radius); transition:background .15s,color .15s,border-color .15s; } .kv-btn--red{background:var(--kv-red);color:var(--kv-white)} .kv-btn--red:hover{background:var(--kv-red-dark)} .kv-btn--outline{border:1.5px solid var(--kv-black);color:var(--kv-black);background:transparent} .kv-btn--outline:hover{border-color:var(--kv-red);color:var(--kv-red)} /* on dark bands */ .kv-dark .kv-btn--outline{border-color:var(--kv-white);color:var(--kv-white)} .kv-dark .kv-btn--outline:hover{border-color:var(--kv-red);color:var(--kv-red)} /* ---------- 6. NAV ---------- */ .kv-header{border-bottom:1px solid var(--kv-line);background:var(--kv-white);position:sticky;top:0;z-index:50} .kv-nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:28px} .kv-nav-links{display:flex;gap:6px;list-style:none;align-items:center} .kv-nav-links a,.kv-nav-links button{ display:inline-flex;align-items:center;gap:6px; font-family:var(--kv-text);font-size:var(--kv-fs-small);font-weight:500;color:var(--kv-black); text-decoration:none;padding:10px 14px;background:none;border:none;cursor:pointer; border-bottom:3px solid transparent; } .kv-nav-links a:hover,.kv-nav-links button:hover{color:var(--kv-red);border-bottom-color:var(--kv-red)} .kv-nav .kv-btn{padding:10px 18px;font-size:14px} /* dropdown */ .kv-dropdown{ position:absolute;top:calc(100% + 1px);left:0;min-width:290px; background:var(--kv-white);border:1px solid var(--kv-line);border-top:3px solid var(--kv-red); box-shadow:var(--kv-float);padding:8px;display:none;z-index:60; } .kv-dropdown.open{display:block} .kv-dropdown a{display:block;padding:12px 14px;border-bottom:none} .kv-dropdown a:hover{background:var(--kv-off);color:var(--kv-black)} .kv-dropdown .dd-name{display:block;font-family:var(--kv-display);font-weight:700;font-size:15px} .kv-dropdown .dd-name .flag{font-family:var(--kv-mono);font-weight:400;font-size:11px;color:var(--kv-red);margin-left:8px} .kv-dropdown .dd-desc{display:block;font-size:13px;color:var(--kv-gray);margin-top:2px} /* ---------- 7. SECTIONS & BANDS ---------- */ .kv-section{padding:var(--kv-s8) 0} .kv-band{background:var(--kv-off)} .kv-dark{background:var(--kv-black);color:var(--kv-white)} .kv-dark p{color:var(--kv-dark-body)} /* ---------- 8. CARDS ---------- */ /* joined card row: shared borders, red top-line sweep on hover */ .kv-cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--kv-line)} .kv-card{ padding:32px 28px;border-right:1px solid var(--kv-line);text-decoration:none; display:flex;flex-direction:column;gap:10px;position:relative;transition:background .15s; } .kv-card:last-child{border-right:none} .kv-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--kv-red);transition:width .25s} .kv-card:hover::after{width:100%} .kv-card:hover{background:var(--kv-off)} .kv-card .k{font-family:var(--kv-mono);font-size:12.5px;color:var(--kv-gray-light)} .kv-card p{font-size:var(--kv-fs-small);color:var(--kv-gray);flex:1} .kv-card .go{font-size:14px;font-weight:500;color:var(--kv-red)} /* ---------- 9. TERMINAL ---------- */ .kv-term{ background:var(--kv-black);color:var(--kv-dark-code); font-family:var(--kv-mono);font-size:13px;line-height:1.75; padding:22px 24px;box-shadow:var(--kv-punch);overflow-x:auto; } .kv-term .c{color:#7A7A7A} .kv-term .r{color:var(--kv-dark-red)} .kv-term .g{color:var(--kv-dark-green)} /* ---------- 10. FOOTER ---------- */ .kv-footer{border-top:1px solid var(--kv-line);padding:40px 0 48px} .kv-foot-cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px} .kv-foot-cols h4{font-family:var(--kv-mono);font-size:var(--kv-fs-micro);color:var(--kv-gray-light);margin-bottom:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase} .kv-foot-cols ul{list-style:none;display:grid;gap:7px} .kv-foot-cols a{font-size:14px;color:var(--kv-gray);text-decoration:none} .kv-foot-cols a:hover{color:var(--kv-red)} .kv-foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--kv-line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} .kv-foot-bottom small{font-family:var(--kv-mono);font-size:var(--kv-fs-micro);color:var(--kv-gray-light)} /* ---------- 11. RESPONSIVE ---------- */ @media (max-width:860px){ .kv-cards{grid-template-columns:1fr} .kv-card{border-right:none;border-bottom:1px solid var(--kv-line)} .kv-card:last-child{border-bottom:none} .kv-section{padding:var(--kv-s7) 0} }