/* ============================================================ KINETON TECHNOLOGIES — styles.css Aesthetic: "the engineering datasheet" — light, structural, dense-but-clean. IBM Plex type, single vermilion accent. Light + dark themes via [data-theme] on . ============================================================ */ /* ---------- Design tokens : LIGHT (default) ---------- */ :root { --paper: #F6F4EF; /* bone / paper background */ --paper-2: #EFEDE6; /* slightly deeper panel */ --surface: #FFFFFF; /* card surface */ --ink: #0E0E0E; /* near-black text */ --graphite: #5A5A56; /* secondary text */ --rule: #C9C6BE; /* fine rules / borders */ --rule-soft: #DBD8D0; --accent: #E5341F; /* industrial signal vermilion */ --accent-ink: #B3260F; /* accent text on light, AA contrast */ /* "contrast band" — flips opposite the body in each theme */ --contrast-bg: #131311; --contrast-panel: #1B1A17; --contrast-border: #34332E; --contrast-ink: #F6F4EF; --contrast-muted: #B9B6AD; --contrast-faint: #8A887F; --maxw: 1180px; --gutter: clamp(20px, 5vw, 64px); --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); color-scheme: light; } /* ---------- Design tokens : DARK ---------- */ [data-theme="dark"] { --paper: #141310; --paper-2: #1D1C17; --surface: #1C1B16; --ink: #F1EEE7; --graphite: #A7A39A; --rule: #34332C; --rule-soft: #2A2922; --accent: #E5341F; --accent-ink: #FF6B53; /* brighter accent text for dark bg */ --contrast-bg: #ECE9E1; --contrast-panel: #F6F4EF; --contrast-border: #C9C6BE; --contrast-ink: #0E0E0E; --contrast-muted: #5A5A56; --contrast-faint: #8A887F; color-scheme: dark; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s var(--ease), color .3s var(--ease); overflow-x: hidden; /* belt-and-braces: no sideways scroll on mobile */ -webkit-tap-highlight-color: transparent; /* kill the grey flash on tap (iOS/Android) */ } h1, h2, h3 { margin: 0; line-height: 1.05; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--font-mono); font-size: 13px; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } /* ---------- Focus ---------- */ a:focus-visible, button:focus-visible, .layer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; padding: 12px 20px; border: 1px solid var(--ink); transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--accent:hover { background: #c92a16; border-color: #c92a16; } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn--ghost-invert { background: transparent; color: var(--contrast-ink); border-color: var(--contrast-border); } .btn--ghost-invert:hover { background: var(--contrast-ink); color: var(--contrast-bg); border-color: var(--contrast-ink); } .btn--lg { font-size: 17px; padding: 16px 28px; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--paper); /* fallback for browsers without color-mix (iOS <= 15.3) */ background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(10px); /* iOS Safari needs the prefix */ backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } .nav.is-scrolled { border-bottom-color: var(--rule); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav__right { display: flex; align-items: center; gap: 20px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; } .wordmark__img { height: 26px; width: auto; display: block; } .wordmark__text { font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.14em; font-size: 19px; } .nav__links { display: flex; align-items: center; gap: 28px; } .nav__links a:not(.btn) { font-family: var(--font-mono); font-size: 14px; color: var(--graphite); position: relative; transition: color .15s var(--ease); } .nav__links a:not(.btn):hover { color: var(--ink); } .nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--accent); transition: width .2s var(--ease); } .nav__links a:not(.btn):hover::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: 10px; } /* theme toggle — always visible (desktop + mobile) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rule); background: transparent; color: var(--ink); transition: border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); } .theme-toggle__sun { display: none; } [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; } .nav__toggle { display: none; background: none; border: 0; padding: 8px; flex-direction: column; gap: 5px; } .nav__toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .25s var(--ease); } .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle.is-open span:nth-child(2) { opacity: 0; } .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { padding-top: 128px; padding-bottom: 80px; border-bottom: 1px solid var(--rule); background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; position: relative; } .hero::after { /* fade the grid into the paper */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 30% 0%, transparent 40%, var(--paper) 100%); } .hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 80px); align-items: center; position: relative; z-index: 1; } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.18em; color: var(--graphite); margin-bottom: 22px; padding-left: 16px; border-left: 3px solid var(--accent); } .hero__title { font-family: var(--font-cond); font-weight: 700; font-size: clamp(36px, 5.4vw, 66px); letter-spacing: -0.02em; margin-bottom: 10px; max-width: 16ch; } .hero__kicker { font-family: var(--font-mono); font-size: clamp(15px, 1.8vw, 18px); letter-spacing: 0.06em; color: var(--accent-ink); margin-bottom: 24px; } .hero__thesis { font-size: clamp(17px, 2vw, 20px); color: var(--graphite); max-width: 46ch; margin-bottom: 32px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; } .hero__stats { display: flex; gap: 40px; flex-wrap: wrap; margin: 0; } .hero__stats div { display: flex; flex-direction: column; gap: 4px; } .hero__stats dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--graphite); text-transform: uppercase; } .hero__stats dd { margin: 0; font-family: var(--font-cond); font-weight: 700; font-size: 30px; letter-spacing: -0.01em; } .hero__stats .unit { font-family: var(--font-mono); font-size: 14px; font-weight: 400; color: var(--graphite); margin-left: 2px; } /* ---------- Signature diagram ---------- */ .diagram { margin: 0; position: relative; } .diagram__cap { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; color: var(--graphite); text-align: right; margin-bottom: 14px; } .diagram__layers { display: flex; flex-direction: column; gap: 10px; position: relative; } .layer { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--rule); padding: 18px 18px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); position: relative; } button.layer:hover, button.layer.is-active { border-color: var(--accent); transform: translateX(6px); box-shadow: -6px 0 0 0 var(--accent); } .layer__idx { font-family: var(--font-mono); font-size: 13px; color: var(--graphite); } button.layer.is-active .layer__idx, button.layer:hover .layer__idx { color: var(--accent-ink); } .layer__name { font-family: var(--font-cond); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .layer__tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--graphite); text-transform: uppercase; } .layer--metal { background: var(--paper-2); border-style: dashed; opacity: 0.85; } .diagram__spec { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 14px; min-height: 44px; } .diagram__spec-line { font-family: var(--font-mono); font-size: 13px; color: var(--ink); display: none; } .diagram__spec-line::before { content: "▸ "; color: var(--accent); } .diagram__spec-line.is-active { display: block; } /* ============================================================ ICP STRIP — "built for" categories under the hero ============================================================ */ .icp-strip { border-bottom: 1px solid var(--rule); background: var(--paper-2); } .icp-strip__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; } .icp-strip__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--graphite); padding-right: clamp(16px, 3vw, 40px); border-right: 1px solid var(--rule); flex-shrink: 0; } .icp-strip__list { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.6vw, 34px); } .icp-strip__list li { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); position: relative; padding-left: 16px; } .icp-strip__list li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); } /* ============================================================ SECTION GRAMMAR ============================================================ */ .section { padding: clamp(64px, 9vw, 120px) 0; border-bottom: 1px solid var(--rule); } .section-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; color: var(--graphite); margin-bottom: 28px; } .section-label__num { color: var(--accent-ink); font-weight: 600; } .section-label--invert { color: var(--contrast-muted); } .section-label--invert .section-label__num { color: var(--accent); } .section-title { font-family: var(--font-cond); font-weight: 700; font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.02em; max-width: 18ch; } .section-title--invert { color: var(--contrast-ink); } .section-lede { font-size: clamp(17px, 2vw, 20px); color: var(--graphite); max-width: 56ch; margin-top: 18px; } .section-lede--invert { color: var(--contrast-muted); } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* ============================================================ PROBLEM ============================================================ */ .problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; } .problem__body { display: flex; flex-direction: column; gap: 18px; font-size: 18px; color: var(--graphite); } .problem__body strong { color: var(--ink); } .figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 56px; background: var(--rule); border: 1px solid var(--rule); } .figure-card { background: var(--paper); padding: 32px clamp(20px, 3vw, 36px); } .figure-card__num { font-family: var(--font-cond); font-weight: 700; font-size: clamp(44px, 6vw, 64px); letter-spacing: -0.02em; color: var(--ink); display: block; line-height: 1; } .figure-card:first-child .figure-card__num, .figure-card:nth-child(3) .figure-card__num { color: var(--accent-ink); } .figure-card__label { font-size: 15px; color: var(--graphite); margin-top: 14px; max-width: 30ch; } /* ============================================================ STACK ============================================================ */ .section--stack .section-lede { margin-bottom: 56px; } .layer-block { border-top: 1px solid var(--rule); padding: 44px 0; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 5vw, 64px); scroll-margin-top: 90px; transition: background .3s var(--ease); } .layer-block:last-child { border-bottom: 1px solid var(--rule); } .layer-block.is-highlight { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%); } .layer-block__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent-ink); } .layer-block__title { font-family: var(--font-cond); font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; margin: 12px 0 14px; } .layer-block__def { font-size: 18px; color: var(--graphite); max-width: 34ch; } .layer-block__cols { display: flex; flex-direction: column; gap: 28px; } .ticks { display: flex; flex-direction: column; gap: 12px; } .ticks li { position: relative; padding-left: 26px; font-size: 16px; } .ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 1px; background: var(--accent); } .ticks li::after { content: ""; position: absolute; left: 5px; top: 4px; width: 1px; height: 11px; background: var(--accent); } /* spec tables */ .spec { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); } .spec th, .spec td { font-family: var(--font-mono); font-size: 13.5px; text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--rule-soft); } .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; } .spec th { color: var(--graphite); font-weight: 400; width: 46%; background: var(--paper-2); } .spec td { color: var(--ink); font-weight: 500; } /* ============================================================ WHY / COMPARE TABLE ============================================================ */ .compare { margin-top: 52px; overflow-x: auto; border: 1px solid var(--rule); } .compare__table { width: 100%; min-width: 720px; border-collapse: collapse; } .compare__table th, .compare__table td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); } .compare__table thead th { background: var(--paper-2); font-family: var(--font-cond); font-weight: 700; font-size: 15px; vertical-align: top; } .compare__table thead th span { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--graphite); margin-top: 4px; letter-spacing: 0.04em; } .compare__rowhead, .compare__table tbody th { text-align: left; } .compare__table tbody th { font-family: var(--font-sans); font-weight: 500; font-size: 15px; background: var(--paper); } .compare__table th:last-child, .compare__table td:last-child { border-right: 0; } .compare__table tr:last-child td, .compare__table tr:last-child th { border-bottom: 0; } .compare__us { background: var(--paper-2) !important; background: color-mix(in srgb, var(--accent) 8%, var(--paper)) !important; } thead .compare__us { background: var(--accent) !important; color: #fff; } thead .compare__us span { color: rgba(255,255,255,.85); } .mark { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; display: inline-block; padding: 3px 9px; border-radius: 2px; } .mark--yes { color: #fff; background: var(--accent); } .mark--no { color: var(--graphite); border: 1px solid var(--rule); } .mark--partial { color: var(--accent-ink); border: 1px solid var(--accent); } /* ============================================================ GET ACCESS — closer + form modal ============================================================ */ .section--access { border-bottom: 0; } .access__cta { margin-top: 32px; } .access__contacts { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 44px; } .access__contacts li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; } .access__contacts-k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--graphite); } .access__contacts a { border-bottom: 1px solid var(--rule); transition: color .15s var(--ease), border-color .15s var(--ease); } .access__contacts a:hover { color: var(--accent-ink); border-color: var(--accent); } /* modal */ body.modal-open { overflow: hidden; } .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 9, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); animation: modalIn .25s var(--ease); } .modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--rule); background: var(--paper-2); } .modal__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--graphite); } .modal__close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--graphite); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; transition: color .15s var(--ease); } .modal__close:hover { color: var(--accent-ink); } .modal__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; } .modal__body iframe { width: 100%; height: 75vh; border: 0; display: block; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--paper); padding: 64px 0 32px; } .footer__inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--rule); } .wordmark--footer .wordmark__text { font-size: 22px; } .wordmark--footer .wordmark__img { height: 32px; } .footer__mission { font-family: var(--font-cond); font-weight: 600; font-size: 22px; margin-top: 16px; letter-spacing: -0.01em; } .footer__links { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .footer__links a { font-family: var(--font-mono); font-size: 14px; color: var(--graphite); transition: color .15s var(--ease); } .footer__links a:hover { color: var(--accent-ink); } .footer__stamp { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--graphite); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 960px) { .hero__inner { grid-template-columns: 1fr; } .diagram { max-width: 520px; } .problem__grid { grid-template-columns: 1fr; gap: 28px; } .layer-block { grid-template-columns: 1fr; gap: 24px; } .figures { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav__links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 24px; transform: translateY(-120%); transition: transform .3s var(--ease); box-shadow: 0 20px 40px rgba(0,0,0,.12); } .nav__links.is-open { transform: translateY(0); } .nav__links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); } .nav__links .btn { margin-top: 16px; justify-content: center; } .nav__toggle { display: flex; } .hero__stats { gap: 28px; } .figures { grid-template-columns: 1fr; } .icp-strip__label { border-right: 0; padding-right: 0; } /* full-screen form modal on phones */ .modal { padding: 0; } .modal__dialog { max-width: none; max-height: 100vh; height: 100%; border: 0; } .modal__body iframe { height: 100%; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .btn:hover, button.layer:hover, button.layer.is-active, .theme-toggle:hover { transform: none; } }