/* ============================================================ KEENMATE — theme layer on top of @keenmate/pure-css. Loaded AFTER pure-css reboot/base/grid/utilities. The KEENMATE "precision engineering" palette IS a pure-css theme: a set of --base-* values. We override the --base-* contract below and every component reads it back via var(--base-*), so one block re-themes reboot, links, borders, the utilities and this layer at once — exactly pure-css's model. reboot already paints the body background/text/fonts from these tokens. Division of labour (goal: as little custom CSS as possible): - LAYOUT / STRUCTURE → pure-css .pc-row/.pc-col grid + utilities, used directly in the markup. - THEME → the --base-* override block below. - LOOK & EFFECTS → this file. pure-css has no utilities for typography, positioning, transitions, transforms, gradients, clip-paths or animation, so the type scale and signature effects live here by necessity, all coloured from var(--base-*). rem is 10px (pure-css reboot sets html{font-size:10px}); custom values are pixels ÷ 10. Fonts load via . ============================================================ */ /* ---------- Themes ---------- Each theme is just a set of --base-* values on . Every component reads var(--base-*), so switching the attribute re-themes the whole site. `dim` is the default/fallback. */ /* Theme-independent tokens */ :root { --base-font-family: "Sora", sans-serif; --base-font-family-mono: "JetBrains Mono", monospace; --km-font-display: "Chakra Petch", sans-serif; } /* Dim — a lighter, more legible dark (default) */ :root, :root[data-theme="dim"] { --base-page-bg: #141519; --base-main-bg: #1a1b20; --base-elevated-bg: #212228; --base-subtle-bg: #212228; --base-border-color: #33343d; --base-border: 1px solid #33343d; --base-text-color-1: #f5f5f4; --base-text-color-2: #c6c7cf; --base-text-color-3: #9c9da6; --base-text-color-4: #70717a; --base-accent-color: #c81420; --base-accent-color-hover: #ee2635; } /* Deep dark (the original, near-black) */ :root[data-theme="dark"] { --base-page-bg: #050505; --base-main-bg: #0c0c0d; --base-elevated-bg: #121214; --base-subtle-bg: #121214; --base-border-color: #232327; --base-border: 1px solid #232327; --base-text-color-1: #f4f4f2; --base-text-color-2: #aeaeb4; --base-text-color-3: #8a8a90; --base-text-color-4: #56565c; --base-accent-color: #b40914; --base-accent-color-hover: #e01221; } /* Light */ :root[data-theme="light"] { --base-page-bg: #f5f6f8; --base-main-bg: #ffffff; --base-elevated-bg: #ffffff; --base-subtle-bg: #eceef1; --base-border-color: #dfe1e6; --base-border: 1px solid #dfe1e6; --base-text-color-1: #16171b; --base-text-color-2: #4b4d57; --base-text-color-3: #6c6e79; --base-text-color-4: #9a9ca6; --base-accent-color: #b40914; --base-accent-color-hover: #d11020; } /* ---------- Base elements (no utility/token equivalents) ---------- */ /* reboot already sets body font-family / colour / background from the contract above; we only add the site's weight, rhythm and smoothing. */ html { scroll-behavior: smooth; } body { font-weight: 300; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--base-accent-color); color: #fff; } /* reboot gives h1–h6/p default margins; the design spaces via markup. */ h1, h2, h3, h4, h5, h6, p { margin: 0; } /* Shell (pure-css ships no container class) */ .km-shell { max-width: 1360px; margin-inline: auto; padding-inline: 2rem; } @media (min-width: 640px) { .km-shell { padding-inline: 3.2rem; } } @media (min-width: 1024px) { .km-shell { padding-inline: 6.4rem; } } .km-main { position: relative; z-index: 2; } .z-2 { position: relative; z-index: 2; } /* ---------- Header + nav (positioning/effects are custom) ---------- */ #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.1rem 2rem; border-bottom: 1px solid transparent; transition: background .4s cubic-bezier(.16,1,.3,1), border-color .4s, backdrop-filter .4s; } @media (min-width: 640px) { #site-header { padding-inline: 3.2rem; } } @media (min-width: 1024px) { #site-header { padding-inline: 6.4rem; } } #site-header.scrolled { background: color-mix(in srgb, var(--base-page-bg) 82%, transparent); backdrop-filter: blur(14px) saturate(160%); border-bottom-color: var(--base-border-color); } /* Inline wordmark: bone parts inherit currentColor, so set the brand ink per theme. */ .km-brand, .hero__wordmark, .km-footer__brand { color: var(--base-text-color-1); } .km-wordmark { display: block; height: auto; width: auto; } .km-brand .km-wordmark { height: 2rem; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; padding: 0; background: transparent; border: 1px solid var(--base-border-color); color: var(--base-text-color-3); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color .2s, border-color .2s; } .theme-toggle:hover { color: var(--base-text-color-1); border-color: var(--base-accent-color); } .km-nav { font-family: var(--base-font-family-mono); font-size: 1.25rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--base-text-color-2); } .km-nav a { color: inherit; text-decoration: none; transition: color .2s; } .km-nav a:hover { color: var(--base-text-color-1); } .navlink { position: relative; } .navlink::after { content: ""; position: absolute; left: 0; bottom: -.6rem; width: 0; height: 2px; background: var(--base-accent-color); transition: width .3s cubic-bezier(.16,1,.3,1); } .navlink:hover::after { width: 100%; } @media (max-width: 767px) { .navlink--desktop { display: none; } } /* ---------- Atmosphere ---------- */ .grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--base-border-color) 1px, transparent 1px), linear-gradient(90deg, var(--base-border-color) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 5%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 5%, transparent 75%); } .glow { position: fixed; z-index: 0; pointer-events: none; top: -30vh; left: 50%; transform: translateX(-50%); width: 90vw; height: 90vh; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--base-accent-color) 55%, transparent) 0%, transparent 62%); opacity: .18; filter: blur(30px); } .noise { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 1.04rem; padding: 1.36rem 2.56rem; font-family: var(--base-font-family-mono); font-size: 1.216rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-decoration: none; cursor: pointer; transition: all .3s cubic-bezier(.16,1,.3,1); } .btn__arrow { transition: transform .3s cubic-bezier(.16,1,.3,1); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn--back:hover .btn__arrow { transform: translateX(-4px); } .btn--primary { background: var(--base-accent-color); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); } .btn--primary:hover { background: var(--base-accent-color-hover); transform: translateY(-2px); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--base-accent-color) 55%, transparent); } .btn--ghost { border: 1px solid var(--base-border-color); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); } .btn--ghost:hover { border-color: var(--base-accent-color); background: color-mix(in srgb, var(--base-accent-color) 8%, transparent); } /* ---------- Kicker (section eyebrow) ---------- */ .kicker { display: inline-flex; align-items: center; gap: .7em; font-family: var(--base-font-family-mono); font-size: 1.15rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--base-accent-color-hover); } .kicker::before { content: ""; width: 26px; height: 2px; background: var(--base-accent-color); } /* ---------- Animations ---------- */ @keyframes rise { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: none; } } @keyframes sweep { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .rise { opacity: 0; animation: rise .95s cubic-bezier(.16,1,.3,1) forwards; } .d-1 { animation-delay: .15s; } .d-2 { animation-delay: .28s; } .d-3 { animation-delay: .42s; } .d-4 { animation-delay: .54s; } .d-5 { animation-delay: .66s; } .d-6 { animation-delay: .78s; } .d-7 { animation-delay: .9s; } .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .reveal.in { opacity: 1; transform: none; } /* ---------- Hero ---------- */ .hero { min-height: 100vh; padding: 11.2rem 0 6.4rem; } /* flex via utilities */ .hero__wordmark { width: min(100%, 1050px); margin: 2rem 0; } .hero__wordmark .km-wordmark { width: 100%; } .hero__title { font-family: var(--km-font-display); font-weight: 600; font-style: italic; font-size: clamp(2.4rem, 3.6vw, 4.64rem); line-height: 1.12; letter-spacing: -0.01em; max-width: 20ch; } .hero__lead { max-width: 54ch; color: var(--base-text-color-2); font-size: 1.68rem; } .hero__rule { height: 4px; background: var(--base-accent-color); transform-origin: left; animation: sweep 1.1s cubic-bezier(.16,1,.3,1) both; box-shadow: 0 0 22px -2px color-mix(in srgb, var(--base-accent-color) 55%, transparent); } .chip { font-family: var(--base-font-family-mono); font-size: 1.15rem; letter-spacing: .06em; color: var(--base-text-color-2); padding: .56rem 1.2rem; border: 1px solid var(--base-border-color); background: var(--base-main-bg); transition: color .3s, border-color .3s; } .chip:hover { color: var(--base-text-color-1); border-color: var(--base-accent-color); } /* ---------- Sections + headings ---------- */ .section { padding: 4.8rem 0; } @media (min-width: 768px) { .section { padding: clamp(8rem, 11vh, 14.4rem) 0; } } .section__title { font-family: var(--km-font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(3.2rem, 5vw, 5.76rem); line-height: 1; letter-spacing: -0.02em; } .accent, .slash { color: var(--base-accent-color); } /* ---------- Approach ---------- */ .lead-xl { font-family: var(--km-font-display); font-weight: 400; font-size: clamp(2.16rem, 3vw, 3.44rem); line-height: 1.4; letter-spacing: -0.01em; max-width: 26ch; } .lead-xl em { font-style: italic; color: var(--base-accent-color-hover); } .pullquote { font-weight: 300; font-size: 1.68rem; color: var(--base-text-color-2); max-width: 60ch; border-left: 3px solid var(--base-accent-color); padding-left: 2.4rem; } .pullquote a { color: var(--base-accent-color-hover); text-decoration: none; } /* Stat strip: 1px hairline separators — a visual effect, not a plain grid. */ .stat-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--base-border-color); border: 1px solid var(--base-border-color); } @media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } } .stat { background: var(--base-page-bg); padding: 2.88rem 2.56rem; } .stat__num { font-family: var(--km-font-display); font-weight: 700; font-style: italic; font-size: clamp(3.52rem, 5vw, 5.44rem); line-height: 1; } .stat__label { font-family: var(--base-font-family-mono); font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; color: var(--base-text-color-3); } /* ---------- Work cards ---------- */ /* Flush content block (aligned to the page rail, like the ledger rows): no box, just a top hairline + a red top-rule that wipes in on hover. */ .work-card { position: relative; display: flex; flex-direction: column; height: 100%; padding-top: 2.8rem; border-top: 1px solid var(--base-border-color); text-decoration: none; } .work-card::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 3px; background: var(--base-accent-color); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1); } .work-card:hover::before { transform: scaleX(1); } .work-card__title { font-family: var(--km-font-display); font-weight: 700; font-style: italic; font-size: 2.72rem; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 1.44rem; line-height: 1.05; } .work-card__desc { color: var(--base-text-color-2); font-size: 1.536rem; flex: 1; } .work-card__cta { margin-top: 2.56rem; font-family: var(--base-font-family-mono); font-size: 1.184rem; letter-spacing: .16em; text-transform: uppercase; color: var(--base-text-color-1); display: inline-flex; align-items: center; gap: .96rem; transition: gap .3s, color .3s; } .work-card:hover .work-card__cta { gap: 1.6rem; color: var(--base-accent-color-hover); } /* ---------- Stack ledger (columns via .pc-row/.pc-col in markup) ---------- */ .ledger { border-top: 1px solid var(--base-border-color); } .ledger__row { padding: 2.4rem 0; border-bottom: 1px solid var(--base-border-color); transition: background .3s cubic-bezier(.16,1,.3,1); } .ledger__row:hover { background: linear-gradient(to right, color-mix(in srgb, var(--base-accent-color) 6%, transparent), transparent); } .ledger__label { font-family: var(--km-font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 1.84rem; } .ledger__desc { color: var(--base-text-color-2); font-size: 1.52rem; } .ledger__tech { font-family: var(--base-font-family-mono); font-size: 1.248rem; color: var(--base-text-color-1); letter-spacing: .04em; } @media (min-width: 768px) { .ledger__tech { text-align: right; } } .ledger__tech b { color: var(--base-accent-color-hover); font-weight: 500; } /* ---------- CTA band ---------- */ .cta { position: relative; overflow: hidden; padding: 5.6rem 0; border-top: 1px solid var(--base-border-color); border-bottom: 1px solid var(--base-border-color); background: radial-gradient(ellipse 60% 100% at 50% 100%, color-mix(in srgb, var(--base-accent-color) 14%, transparent), transparent 70%); } @media (min-width: 768px) { .cta { padding: clamp(8rem, 12vh, 12.8rem) 0; } } .cta__title { font-family: var(--km-font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(3.52rem, 7vw, 8rem); line-height: .98; letter-spacing: -0.02em; } .cta__title em { color: var(--base-accent-color-hover); } .cta__lead { color: var(--base-text-color-2); max-width: 46ch; margin-inline: auto; } /* ---------- Footer (layout via utilities; look here) ---------- */ .km-footer { position: relative; z-index: 2; padding: 11.2rem 0 4.8rem; } .km-footer__brand .km-wordmark { height: 2.8rem; } .km-footer__tag { color: var(--base-text-color-2); max-width: 34ch; font-size: 1.472rem; } .km-footer__h { font-family: var(--base-font-family-mono); font-size: 1.12rem; letter-spacing: .2em; text-transform: uppercase; color: var(--base-text-color-3); margin-bottom: 1.44rem; } .km-footer__link { display: block; color: var(--base-text-color-3); font-size: 1.44rem; padding: .28rem 0; text-decoration: none; transition: color .2s; } .km-footer__link:hover { color: var(--base-text-color-1); } .km-footer__bar { margin-top: 4.8rem; padding-top: 2.4rem; border-top: 1px solid var(--base-border-color); font-family: var(--base-font-family-mono); font-size: 1.152rem; letter-spacing: .08em; color: var(--base-text-color-3); } @media (max-width: 767px) { .km-footer__brand img, .km-footer__tag { margin-inline: auto; } } /* Mobile readability: muted copy lifts to the lighter grey below 768px. */ .text-mute { color: var(--base-text-color-2); } @media (min-width: 768px) { .text-mute { color: var(--base-text-color-3); } } /* ---------- Sub-page header ---------- */ .subpage { padding-top: 12.8rem; padding-bottom: 9.6rem; } .back-link { display: inline-flex; align-items: center; gap: .7em; font-family: var(--base-font-family-mono); font-size: 1.15rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--base-accent-color-hover); text-decoration: none; transition: color .2s; } .back-link:hover { color: var(--base-text-color-1); } .back-link .btn__arrow { color: var(--base-accent-color); } .page-head__title { font-family: var(--km-font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(3.2rem, 6vw, 6.08rem); line-height: 1; letter-spacing: -0.02em; } .page-head__rule { height: 4px; background: var(--base-accent-color); width: 100%; max-width: 520px; box-shadow: 0 0 22px -2px color-mix(in srgb, var(--base-accent-color) 55%, transparent); } /* Error page */ .error-main { min-height: 100vh; } .error-title { font-family: var(--km-font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: clamp(3.84rem, 9vw, 9.6rem); line-height: .95; letter-spacing: -0.02em; } .error-title em { color: var(--base-accent-color-hover); } /* ---------- Markdown content (styles HTML generated from markdown) ---------- */ .md-content { max-width: 74ch; color: var(--base-text-color-2); font-size: 1.632rem; line-height: 1.78; } .md-content > :first-child { margin-top: 0; } .md-content h2 { font-family: var(--km-font-display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; font-size: clamp(2.48rem, 4vw, 3.76rem); color: var(--base-text-color-1); margin: 4.48rem 0 1.76rem; } .md-content h2::before { content: "// "; color: var(--base-accent-color); } .md-content h3 { font-family: var(--km-font-display); font-style: italic; font-weight: 600; text-transform: uppercase; color: var(--base-text-color-1); font-size: 1.952rem; margin: 3.2rem 0 .96rem; } .md-content h4 { font-family: var(--base-font-family-mono); text-transform: uppercase; letter-spacing: .16em; font-size: 1.184rem; color: var(--base-text-color-3); margin: 2.56rem 0 .8rem; } .md-content p { margin: 0 0 1.84rem; } .md-content a { color: var(--base-accent-color-hover); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--base-accent-color-hover) 35%, transparent); transition: border-color .2s; } .md-content a:hover { border-bottom-color: var(--base-accent-color-hover); } .md-content strong { color: var(--base-text-color-1); font-weight: 600; } .md-content ul, .md-content ol { margin: 0 0 1.92rem; padding-left: 2rem; } .md-content li { margin: .48rem 0; } .md-content ul li::marker { color: var(--base-accent-color); } .md-content code { font-family: var(--base-font-family-mono); font-size: .86em; color: var(--base-text-color-1); background: var(--base-elevated-bg); border: 1px solid var(--base-border-color); padding: .08rem .64rem; border-radius: 3px; } .md-content blockquote { border-left: 3px solid var(--base-accent-color); padding-left: 1.92rem; margin: 2.56rem 0; color: var(--base-text-color-3); font-style: italic; } .md-content hr { border: 0; border-top: 1px solid var(--base-border-color); margin: 4.16rem 0; } .md-content .project-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin: 0 0 4.8rem; max-width: none; } .md-content .project-group { background: linear-gradient(160deg, var(--base-elevated-bg), var(--base-main-bg)); border: 1px solid var(--base-border-color); padding: 2.4rem 2.56rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); } .md-content .group-title { font-family: var(--km-font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 1.68rem; color: var(--base-text-color-1); margin: 0 0 1.44rem; display: flex; align-items: center; gap: .8rem; } .md-content .group-title::before { content: "◢"; color: var(--base-accent-color); font-size: .78em; } .md-content .group-links { list-style: none; margin: 0; padding: 0; } .md-content .group-links li { margin: .64rem 0; } .md-content .group-links a { font-family: var(--base-font-family-mono); font-size: 1.312rem; color: var(--base-text-color-3); border: 0; text-decoration: none; transition: color .2s; } .md-content .group-links a:hover { color: var(--base-accent-color-hover); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, .rise { opacity: 1; transform: none; } }