/* Kieran Jones — shared styles for the static build. Tokens + keyframes + component classes only. Per-element layout stays as inline styles in the generated HTML (matches the design source). */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;padding:0} /* ===== Theme tokens (attribute lives on , vars cascade everywhere) ===== */ [data-kjtheme="dark"]{ --bg:#0B1220;--hero-bg:#0B1220;--card:#0F1A2E;--band:rgba(255,255,255,.025); --card-bdr:rgba(255,255,255,.1);--fg:#F4F7FC;--muted:#9FB2D6;--faint:#5C7099; --accent:#6E92F2;--teal:#0FB5BD;--btn-bg:#FFFFFF;--btn-fg:#0B1220; --nav-bg:rgba(11,18,32,.72);--pill-bg:rgba(255,255,255,.04);--pill-bdr:rgba(255,255,255,.16); --hero-veil:radial-gradient(80% 95% at 16% 28%, rgba(11,18,32,0), rgba(11,18,32,.86) 72%); } [data-kjtheme="light"]{ --bg:#F4F7FC;--hero-bg:#F4F7FC;--card:#FFFFFF;--band:#FFFFFF; --card-bdr:#E5EBF3;--fg:#0B1220;--muted:#46566E;--faint:#8493AC; --accent:#1B43C7;--teal:#0E8C94;--btn-bg:#1B43C7;--btn-fg:#FFFFFF; --nav-bg:rgba(247,250,252,.8);--pill-bg:#FFFFFF;--pill-bdr:#DCE4F0; --hero-veil:radial-gradient(80% 95% at 16% 28%, rgba(244,247,252,0), rgba(244,247,252,.92) 74%); } /* ===== Keyframes (transform-only entrances — never opacity from 0) ===== */ @keyframes kj-blink{0%,100%{opacity:1}50%{opacity:.2}} @keyframes kj-fade{from{transform:translateY(16px)}to{transform:translateY(0)}} @keyframes kj-rise{from{transform:translateY(16px)}to{transform:translateY(0)}} @keyframes kj-pop{from{transform:translateY(14px) scale(.96)}to{transform:translateY(0) scale(1)}} /* ===== Cards ===== */ .kj-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;} .kj-card:hover{transform:translateY(-4px);border-color:var(--teal,#0FB5BD);box-shadow:0 14px 34px rgba(8,14,30,.16);} .kj-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--teal,#0FB5BD);} .kj-read-arrow{display:inline-block;transition:transform .22s ease;} .kj-card:hover .kj-read-arrow{transform:translateX(4px);} /* ===== Theme toggle icon swap ===== */ .kj-sun{display:none} [data-kjtheme="light"] .kj-moon{display:none} [data-kjtheme="light"] .kj-sun{display:block} /* ===== FAQ (native details) ===== */ summary{list-style:none;cursor:pointer;outline:none} summary::-webkit-details-marker{display:none} .kj-faq-ic{display:inline-block;transition:transform .25s ease} details[open] .kj-faq-ic{transform:rotate(45deg)} /* ===== Filter pills ===== */ .kj-pill{font-family:'Geist',sans-serif;font-size:14px;font-weight:500;cursor:pointer; padding:8px 16px;border-radius:999px;transition:.16s; border:1px solid var(--card-bdr,rgba(255,255,255,.14));background:transparent;color:var(--muted,#9FB2D6);} .kj-pill:hover{transform:translateY(-2px);} .kj-pill-active{border-color:transparent;background:var(--btn-bg,#fff);color:var(--btn-fg,#0B1220);} /* ===== Share chips ===== */ .kj-chip{display:inline-flex;align-items:center;gap:7px;font-family:'Geist',sans-serif; font-size:13px;font-weight:500;cursor:pointer;padding:7px 14px;border-radius:999px;transition:.16s; border:1px solid var(--card-bdr,rgba(255,255,255,.14));background:transparent;color:var(--muted,#9FB2D6);} .kj-chip:hover{border-color:var(--teal,#0FB5BD);color:var(--fg,#fff);transform:translateY(-2px);} /* ===== Prose (article body) ===== */ .kj-prose{color:var(--muted,#9FB2D6);font-size:18px;line-height:1.72;} .kj-prose h2{color:var(--fg,#F4F7FC);font-size:25px;font-weight:600;letter-spacing:-.02em;margin:38px 0 0;line-height:1.2;} .kj-prose p{margin:18px 0 0;} .kj-prose ul{margin:18px 0 0;padding-left:22px;} .kj-prose li{margin:9px 0 0;} .kj-prose strong{color:var(--fg,#F4F7FC);font-weight:600;} .kj-prose a{color:var(--teal,#0FB5BD);text-decoration:none;border-bottom:1px solid currentColor;} /* ===== Hover utilities (replace the design tool's style-hover) ===== */ .kj-lift{transition:transform .18s ease} .kj-lift:hover{transform:translateY(-2px)} .kj-navlink{transition:color .15s ease} .kj-navlink:hover{color:var(--fg) !important} .kj-ghost{transition:border-color .18s ease} .kj-ghost:hover{border-color:var(--fg) !important} .kj-iconbtn{transition:color .18s ease,border-color .18s ease} .kj-iconbtn:hover{color:var(--fg) !important;border-color:var(--teal,#0FB5BD) !important} .kj-portrait{filter:grayscale(1) contrast(1.03);transition:filter .45s ease} .kj-portrait:hover{filter:grayscale(0) contrast(1)} /* ===== Responsive nav ===== */ .kj-burger{display:none;} @media (max-width:760px){ [data-nav-links]{display:none !important;} .kj-deskonly{display:none !important;} .kj-burger{display:inline-flex !important;} .kj-about{grid-template-columns:1fr !important;} }