/* ── Self-hosted fonts (no Google Fonts CDN — Safari privacy friendly) ── */ @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/jetbrains-mono.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ── Reset & base + theme tokens on ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* * Theme tokens live on . * `color-scheme: only light|dark` is required so Chrome does NOT apply its * "Auto Dark Mode for Web Contents" on top of our palette (that was making * light look muddy and dark cards pure black — Chrome-only). */ /* Dark = default */ html{ scroll-behavior:smooth; overflow-y:scroll; color-scheme:only dark; supported-color-schemes:dark; background-color:#0b0b10; --bg:#0b0b10; --fg:#d0d0da; --fg-muted:rgba(255,255,255,.42); --fg-subtle:rgba(255,255,255,.62); --card-bg:#1a1824; --card-border:#2e2a3c; --card-hover-border:#5a4ab8; --badge-border:rgba(255,255,255,.06); --badge-fg:rgba(255,255,255,.35); --heading-fg:#f2f2f7; --footer-border:rgba(255,255,255,.05); --input-bg:#12101a; --input-border:#2e2a3c; --input-fg:#ddd; --input-placeholder:rgba(255,255,255,.2); --grid-color:rgba(100,80,255,.025); --toggle-bg:rgba(255,255,255,.08); --toggle-hover:rgba(255,255,255,.14); --accent:#7860ff; --accent-dim:#5540cc; --accent-glow:rgba(120,96,255,.18); --nav-bg:#0e0e14; --nav-border:rgba(255,255,255,.1); } html[data-theme="light"]{ color-scheme:only light; supported-color-schemes:light; background-color:#eaeaef; --bg:#eaeaef; --fg:#0d0d14; --fg-muted:rgba(0,0,0,.55); --fg-subtle:rgba(0,0,0,.68); --card-bg:#ffffff; --card-border:#c8c6d4; --card-hover-border:#5a3fd0; --badge-border:rgba(0,0,0,.14); --badge-fg:rgba(0,0,0,.55); --heading-fg:#0a0a10; --footer-border:rgba(0,0,0,.12); --input-bg:#ffffff; --input-border:rgba(0,0,0,.18); --input-fg:#0d0d14; --input-placeholder:rgba(0,0,0,.35); --grid-color:rgba(100,80,255,.055); --toggle-bg:rgba(0,0,0,.1); --toggle-hover:rgba(0,0,0,.18); --accent:#5a3fd0; --accent-dim:#452fb0; --accent-glow:rgba(90,63,208,.18); --nav-bg:#f6f5f2; --nav-border:rgba(0,0,0,.12); } /* Opt out of any remaining UA color rewriting */ html,body{ -webkit-tap-highlight-color:transparent; } body{ font-family:'JetBrains Mono','SF Mono','ui-monospace','Cascadia Code','Menlo',monospace; background-color:var(--bg) !important; background:var(--bg) !important; color:var(--fg) !important; min-height:100vh; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background-color .3s,color .3s; } body > .grid-overlay{position:fixed;z-index:0} body > .top-nav-spacer, body > section, body > footer{position:relative;z-index:1} /* ── Grid overlay ── */ .grid-overlay{ position:fixed; pointer-events:none; inset:0; z-index:0; background-image: linear-gradient(var(--grid-color) 1px,transparent 1px), linear-gradient(90deg,var(--grid-color) 1px,transparent 1px); background-size:48px 48px; } /* ── Layout ── */ .container{max-width:960px;margin:0 auto;padding:0 24px} section{padding:60px 0 0 0} .section-label{ font-size:.75rem;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin-bottom:40px;font-weight:500; } /* ── Top navigation bar ── */ .top-nav{ position:fixed;top:0;left:0;right:0;z-index:999999; display:flex;align-items:center;justify-content:center; padding:14px 16px; padding-top:max(14px,env(safe-area-inset-top,0px)); /* Warm off-white / deep ink */ background:var(--nav-bg) !important; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid var(--nav-border); font-size:.78rem;font-weight:500; width:100%;min-height:48px; overflow:visible; -webkit-transform:translateZ(0); transform:translateZ(0); opacity:1; /* Desktop: no hide animation */ transition:none; } /* Mobile / tablet: gentle fade + slight lift when hiding on scroll down */ @media (max-width:768px){ .top-nav{ transition: opacity .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1), background .3s,border-color .3s,color .3s; will-change:opacity,transform; } .top-nav.is-hidden{ opacity:0; transform:translateY(-10px) translateZ(0); pointer-events:none; } } @media (max-width:768px) and (prefers-reduced-motion:reduce){ .top-nav{transition:none} .top-nav.is-hidden{transform:none} } .top-nav a{ color:var(--fg-subtle); text-decoration:none; letter-spacing:.02em; transition:color .2s; padding:6px 4px; display:inline-block; visibility:visible; opacity:1; } .top-nav a:hover{color:var(--fg)} .top-nav a.active{color:var(--accent)} /* * Support Me: stand out without matching the active link color. * Purple heart mark; label uses normal nav colors (muted → purple on hover/active). */ .top-nav a.nav-support{ font-weight:600; } .top-nav a.nav-support::before{ content:'♥'; color:var(--accent); font-weight:500; font-size:.85em; margin-right:.35em; speak:never; } .top-nav-inner{ display:flex;align-items:center;justify-content:space-between; gap:12px;max-width:960px;width:100%;padding:0 8px; min-width:0;overflow:visible; } /* Site brand — always visible so every page says who this is */ .nav-brand{ display:inline-flex !important; align-items:center; gap:10px; flex-shrink:0; padding:2px 6px 2px 2px !important; text-decoration:none; color:var(--heading-fg) !important; font-weight:600; letter-spacing:-.01em; border-radius:999px; transition:opacity .2s,color .2s; } .nav-brand:hover{color:var(--accent) !important;opacity:1} .nav-brand-logo{ width:30px;height:30px;border-radius:50%; object-fit:cover;flex-shrink:0; border:1.5px solid var(--card-border); display:block; background:var(--card-bg); } .nav-brand-text{ font-size:.88rem; line-height:1.1; white-space:nowrap; } @media(max-width:640px){ .nav-brand{gap:7px;padding:2px 4px 2px 0 !important} .nav-brand-logo{width:26px;height:26px} .nav-brand-text{font-size:.72rem;letter-spacing:-.02em} } @media(max-width:380px){ /* very narrow: keep logo + compact name */ .nav-brand-text{font-size:.68rem} } /* Always visible — never hide behind a menu */ .top-nav-links{ display:flex !important; align-items:center; flex-wrap:wrap; gap:4px 14px; flex:1 1 auto; min-width:0; max-width:100%; visibility:visible !important; opacity:1 !important; height:auto !important; overflow:visible !important; justify-content:flex-end; } .top-nav-spacer{height:calc(64px + env(safe-area-inset-top,0px))} /* ── Theme toggle embedded in nav ── */ .nav-toggle{ background:none;border:none;cursor:pointer;font-size:1.05rem; color:var(--fg-subtle);transition:color .2s;padding:8px 4px; font-family:inherit;line-height:1;flex-shrink:0; -webkit-tap-highlight-color:transparent; } .nav-toggle:hover{color:var(--fg)} .nav-toggle .icon-light,.nav-toggle .icon-dark{transition:opacity .25s,transform .25s} /* Default / dark: show moon; light: show sun */ .nav-toggle .icon-light{display:none} .nav-toggle .icon-dark{display:inline} html[data-theme="light"] .nav-toggle .icon-dark{display:none} html[data-theme="light"] .nav-toggle .icon-light{display:inline} html[data-theme="dark"] .nav-toggle .icon-light{display:none} html[data-theme="dark"] .nav-toggle .icon-dark{display:inline} /* ── Hero ── */ .hero{display:flex;align-items:center;position:relative;overflow:hidden} .hero::after{ content:'';position:absolute;top:-30%;right:-20%; width:600px;height:600px; background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%); pointer-events:none; } /* width:100% so flex child matches other .container sections (not content-sized) */ .hero-content{position:relative;z-index:1;width:100%;max-width:960px;margin:0 auto;padding:0 24px;box-sizing:border-box} .hero-badge{ display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--badge-border);border-radius:100px; padding:6px 16px;color:var(--badge-fg);margin-bottom:28px; } .hero h1{ font-size:clamp(2rem,5vw,3.4rem);font-weight:700;line-height:1.15; letter-spacing:-.02em;margin-bottom:16px; } .hero h1 span{color:var(--accent)} .hero-tagline{ font-size:clamp(.95rem,1.8vw,1.15rem);color:var(--fg-subtle); margin-bottom:12px;font-weight:400; } .hero-desc{ font-size:.88rem;color:var(--fg-muted); margin-bottom:36px;line-height:1.7; } .hero-actions{display:flex;gap:14px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:8px; font-family:inherit;font-size:.82rem;font-weight:500; padding:12px 26px;border-radius:8px;cursor:pointer; text-decoration:none;transition:all .2s; } .btn-primary{ background:var(--accent);color:#fff;border:none; box-shadow:0 0 32px var(--accent-glow); } .btn-primary:hover{background:var(--accent-dim);transform:translateY(-1px)} .btn-x{gap:8px} .btn-x-logo{ width:1em;height:1em;display:inline-block; flex-shrink:0;vertical-align:-0.1em; } .btn-secondary{ background:var(--fg);color:var(--bg); border:1px solid var(--fg); } .btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--card-bg)} /* ── Shared solid cards (no transparency; !important beats Chrome auto-dark recolor) ── */ .cover-card, .post-card, .newsletter-box, .about-highlight, .contact-card, .donate-card, .tool-card, .testing-card{ background-color:var(--card-bg) !important; background:var(--card-bg) !important; color:var(--fg); opacity:1; -webkit-backdrop-filter:none; backdrop-filter:none; isolation:isolate; position:relative; z-index:1; } /* ── What I Cover ── */ .covers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px} .cover-card{ border:1px solid var(--card-border); border-radius:12px;padding:28px 24px;transition:border-color .25s,transform .25s; } .cover-card:hover{background-color:var(--card-bg);background:var(--card-bg);border-color:var(--card-hover-border);transform:translateY(-2px)} .cover-icon{ width:42px;height:42px;border-radius:10px; background:#2a2450;display:flex;align-items:center;justify-content:center; margin-bottom:18px; color:var(--accent); flex-shrink:0; } .cover-icon svg{width:22px;height:22px;display:block} html[data-theme="light"] .cover-icon{background:#ebe6ff} .cover-card h3{font-size:.92rem;font-weight:600;margin-bottom:6px;color:var(--heading-fg)} .cover-card p{font-size:.78rem;color:var(--fg-muted);line-height:1.6} /* ── Posts (blog page & homepage) ── */ .posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px} .post-card{ border:1px solid var(--card-border); border-radius:12px;padding:28px 24px;transition:border-color .25s,transform .25s; } .post-card:hover{background-color:var(--card-bg);background:var(--card-bg);border-color:var(--card-hover-border);transform:translateY(-2px)} .post-tag{ display:inline-block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase; background:#2a2450;color:var(--accent);padding:3px 10px;border-radius:4px; margin-bottom:14px;font-weight:500; } html[data-theme="light"] .post-tag{background:#ebe6ff} .post-card h3{font-size:.94rem;font-weight:600;margin-bottom:10px;color:var(--heading-fg);line-height:1.45} .post-card p{font-size:.77rem;color:var(--fg-muted);line-height:1.6;margin-bottom:14px} .post-meta{font-size:.68rem;color:var(--fg-muted);display:flex;gap:16px;opacity:.6} .post-meta span{display:flex;align-items:center;gap:4px} /* ── Newsletter / X follow ── */ .newsletter-box{ border:1px solid var(--card-border); border-radius:14px;padding:52px 44px;text-align:center; overflow:hidden; } .newsletter-box::before{ content:'';position:absolute;top:-60%;left:50%;transform:translateX(-50%); width:300px;height:300px; background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%); pointer-events:none; } .newsletter-icon{ width:48px;height:48px;border-radius:12px; background:#2a2450;color:var(--accent); display:flex;align-items:center;justify-content:center; margin:0 auto 16px;position:relative; } .newsletter-icon svg{width:24px;height:24px;display:block} html[data-theme="light"] .newsletter-icon{background:#ebe6ff} .newsletter-box h2{font-size:1.2rem;font-weight:600;margin-bottom:8px;color:var(--heading-fg);position:relative} .newsletter-box p{font-size:.81rem;color:var(--fg-muted);margin-bottom:28px;position:relative} .x-follow{ display:flex;align-items:center;justify-content:center;gap:20px; position:relative;flex-wrap:wrap; } .x-follow .profile-pic{ width:140px;height:140px;border-radius:50%;object-fit:cover; border:2px solid var(--card-border);flex-shrink:0; } .x-follow .x-btn{ display:inline-flex;align-items:center;gap:10px; font-family:inherit;font-size:.82rem;font-weight:500; background:var(--accent);color:#fff;border:none; border-radius:8px;padding:10px 20px;cursor:pointer;white-space:nowrap; text-decoration:none;transition:background .2s; } .x-follow .x-btn:hover{background:var(--accent-dim)} .x-follow .x-btn svg{width:18px;height:18px;flex-shrink:0} .x-follow .x-btn svg path{fill:currentColor} /* ── About page ── */ .about-content h1{ font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;line-height:1.2; letter-spacing:-.02em;margin-bottom:24px; } .about-content h1 span{color:var(--accent)} .about-content p{ font-size:.88rem;color:var(--fg-subtle);line-height:1.8; margin-bottom:20px; } .about-content p.muted{color:var(--fg-muted)} .about-intro{display:flex;align-items:flex-start;gap:28px;margin-bottom:20px} .about-intro .about-profile-pic{ width:140px;height:140px;border-radius:50%;object-fit:cover; border:2px solid var(--card-border);flex-shrink:0; } .about-intro p{margin-bottom:16px} .about-highlight{ border:1px solid var(--card-border); border-radius:12px;padding:28px 28px;margin:36px 0; } .about-highlight h3{ font-size:.92rem;font-weight:600;margin-bottom:12px;color:var(--heading-fg); } .about-highlight p{font-size:.82rem;margin-bottom:0} /* ── Hardware stack tags ── */ .hardware-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .hardware-tag{ font-size:.75rem;font-weight:500;letter-spacing:.03em; padding:5px 14px;border-radius:8px; background:var(--card-bg);border:1px solid var(--card-border);color:var(--accent); } /* ── About page list (migrated content) ── */ .about-list{list-style:none;padding:0;margin-top:12px} .about-list li{padding:6px 0 6px 20px;position:relative;font-size:.82rem;color:var(--fg-subtle);line-height:1.7} .about-list li::before{content:'▸';position:absolute;left:0;color:var(--accent)} /* ── Contact page ── */ .contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .contact-info h1{ font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.2; letter-spacing:-.02em;margin-bottom:16px; } .contact-info h1 span{color:var(--accent)} .contact-info p{ font-size:.85rem;color:var(--fg-subtle);line-height:1.7;margin-bottom:16px; } .contact-profile-pic{ width:100%;max-width:220px;aspect-ratio:1;border-radius:50%;object-fit:cover; border:2px solid var(--card-border);margin:24px auto 0;display:block; } .contact-card{ border:1px solid var(--card-border); border-radius:14px;padding:32px 28px; } .contact-card .field{margin-bottom:18px} .contact-card label{ display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:var(--fg-muted);margin-bottom:6px;font-weight:500; } .contact-card input,.contact-card textarea{ width:100%;font-family:inherit;font-size:.85rem; background:var(--input-bg);border:1px solid var(--input-border); border-radius:8px;padding:11px 14px;color:var(--input-fg);outline:none;transition:border .2s; resize:vertical; } .contact-card input:focus,.contact-card textarea:focus{border-color:var(--accent)} .contact-card input::placeholder,.contact-card textarea::placeholder{color:var(--input-placeholder)} .contact-card textarea{min-height:120px} /* ── Submit button (contact) ── */ .submit-btn{ width:100%;font-family:inherit;font-size:.85rem;font-weight:600; padding:13px 0;border:none;border-radius:8px;cursor:pointer; background:var(--accent);color:#fff;transition:all .2s; box-shadow:0 0 24px var(--accent-glow); } .submit-btn:hover{background:var(--accent-dim)} .submit-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none} /* ── Honeypot (hidden from humans, visible to dumb bots) ── */ .hp-field{ position:absolute!important; left:-10000px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; } /* Captcha host — collapses when empty; grows when widget is rendered */ .turnstile-wrap{ margin:0; min-height:0; overflow:visible; } .turnstile-wrap:not(:empty){ margin:12px 0 8px; min-height:65px; } /* ── Form status ── */ .form-status{display:none;margin-top:16px;padding:14px;border-radius:8px;font-size:.78rem;text-align:center} .form-status.success{display:block;background:rgba(60,200,100,.1);border:1px solid rgba(60,200,100,.2);color:#4ade80} .form-status.error{display:block;background:rgba(255,60,60,.1);border:1px solid rgba(255,60,60,.2);color:#ff6060} @keyframes spin{to{transform:rotate(360deg)}} .spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--fg-muted);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin-right:8px;vertical-align:middle} /* ── Donate / Support page ── */ .donate-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} .donate-info h1{ font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.2; letter-spacing:-.02em;margin-bottom:16px; color:var(--heading-fg); } .donate-info h1 span{color:var(--accent)} .donate-info p{ font-size:.85rem;color:var(--fg-subtle);line-height:1.7;margin-bottom:16px; } .donate-card{ background-color:var(--card-bg); background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px;padding:32px 28px; color:var(--fg); } .donate-card-label{ font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--fg-muted);margin-bottom:20px;font-weight:500; } .amount-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px} .amount-btn{ font-family:inherit;font-size:.82rem;font-weight:500; background:transparent;border:1px solid var(--card-border); border-radius:8px;padding:10px 0;cursor:pointer;color:var(--fg-subtle); transition:all .2s; } .amount-btn:hover{border-color:var(--accent);color:var(--fg)} .amount-btn.active{background:var(--accent);border-color:var(--accent);color:#fff} .custom-amount{margin-bottom:24px} .custom-amount input{ width:100%;font-family:inherit;font-size:.9rem; background:var(--input-bg);border:1px solid var(--input-border); border-radius:8px;padding:11px 14px;color:var(--input-fg);outline:none;transition:border .2s; } .custom-amount input:focus{border-color:var(--accent)} .custom-amount input::placeholder{color:var(--input-placeholder)} .method-toggle{display:flex;gap:6px;margin-bottom:24px;background:var(--card-bg);border-radius:8px;padding:4px;border:1px solid var(--card-border)} .method-btn{ flex:1;font-family:inherit;font-size:.78rem;font-weight:500; padding:10px 0;border:none;border-radius:6px;cursor:pointer; background:transparent;color:var(--fg-muted);transition:all .2s; } .method-btn.active{background:var(--accent);color:#fff} .method-btn:not(.active):hover{color:var(--fg)} .crypto-options{display:none;margin-bottom:20px} .crypto-options.visible{display:block} .crypto-options .sub-label{ font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--fg-muted);margin-bottom:10px;font-weight:500; } .network-grid,.asset-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .network-btn,.asset-btn{ font-family:inherit;font-size:.75rem;font-weight:500; padding:7px 14px;border-radius:6px;border:1px solid var(--card-border); background:transparent;color:var(--fg-muted);cursor:pointer;transition:all .2s; } .network-btn:hover,.asset-btn:hover{border-color:var(--accent);color:var(--fg)} .network-btn.active,.asset-btn.active{background:var(--accent);border-color:var(--accent);color:#fff} .cta-btn{ width:100%;font-family:inherit;font-size:.85rem;font-weight:600; padding:13px 0;border:none;border-radius:8px;cursor:pointer; background:var(--accent);color:#fff;transition:all .2s; box-shadow:0 0 24px var(--accent-glow); } .cta-btn:hover{background:var(--accent-dim)} .cta-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none} .cta-note{font-size:.68rem;color:var(--fg-muted);text-align:center;margin-top:10px;opacity:.6} .status-msg{display:none;margin-top:16px;padding:14px;border-radius:8px;font-size:.78rem;text-align:center} .status-msg.error{display:block;background:rgba(255,60,60,.1);border:1px solid rgba(255,60,60,.2);color:#ff6060} .status-msg.loading{display:block;background:var(--card-bg);border:1px solid var(--card-border);color:var(--fg-muted)} .status-msg.success{display:block;background:rgba(60,200,100,.1);border:1px solid rgba(60,200,100,.25);color:#2f9e5b} html[data-theme="dark"] .status-msg.success{color:#4ade80} /* ── LLM Tests page ── */ .tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} .tool-card{ border:1px solid var(--card-border); border-radius:12px;padding:28px 24px;transition:border-color .25s,transform .25s; } .tool-card:hover{background-color:var(--card-bg);background:var(--card-bg);border-color:var(--card-hover-border);transform:translateY(-2px)} .tool-card h3{font-size:.93rem;font-weight:600;margin-bottom:8px;color:var(--heading-fg)} .tool-card p{font-size:.78rem;color:var(--fg-muted);line-height:1.6;margin-bottom:16px} .tool-link{ font-size:.76rem;color:var(--accent);text-decoration:none; display:inline-flex;align-items:center;gap:6px;font-weight:500; } .tool-link:hover{text-decoration:underline} .testing-intro{font-size:.82rem;color:var(--fg-subtle);line-height:1.7;margin-bottom:32px} .testing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:20px} .testing-card{ border:1px solid var(--card-border); border-radius:12px;padding:24px;transition:border-color .25s,transform .25s; } .testing-card:hover{border-color:var(--card-hover-border);background-color:var(--card-bg);background:var(--card-bg)} .testing-card h3{font-size:.85rem;font-weight:600;margin-bottom:12px;color:var(--heading-fg);display:flex;align-items:center;gap:8px} .testing-card h3 .emoji{font-size:1.1em} .testing-card p,.testing-card li{font-size:.76rem;color:var(--fg-subtle);line-height:1.7} .testing-card ul{list-style:none;padding:0} .testing-card ul li{padding:4px 0;padding-left:16px;position:relative} .testing-card ul li::before{content:'▸';position:absolute;left:0;color:var(--accent)} .testing-tag{ display:inline-block;font-size:.68rem;font-weight:500;letter-spacing:.04em; padding:3px 10px;border-radius:6px;margin:3px 4px 3px 0; background:var(--card-bg);border:1px solid var(--badge-border);color:var(--accent); } .inline-code{ font-family:inherit;font-size:.85em; background:var(--input-bg);border:1px solid var(--card-border); border-radius:4px;padding:1px 6px;color:var(--accent); } /* ── Test suites (published results) ── */ .test-suites-header{margin:48px 0 20px} .test-suites-title{ font-size:1.05rem;font-weight:600;color:var(--heading-fg);margin:0 0 6px; } .test-suites-sub{font-size:.78rem;color:var(--fg-muted);margin:0} .test-suites{display:flex;flex-direction:column;gap:24px;margin-bottom:20px} .test-suites-loading,.test-suites-empty{ font-size:.8rem;color:var(--fg-muted);padding:20px 0; } .suite-card{ background:var(--card-bg) !important; border:1px solid var(--card-border); border-radius:14px;padding:28px 26px; } .suite-card-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:16px; margin-bottom:16px;flex-wrap:wrap; } .suite-card-title{ font-size:1rem;font-weight:600;color:var(--heading-fg);margin:0 0 8px; } .suite-card-title-link{ color:inherit;text-decoration:none; } .suite-card-title-link:hover{color:var(--accent)} .suite-permalink{ font-size:.7rem;margin:8px 0 0;word-break:break-all; } .suite-permalink a{ color:var(--fg-muted);text-decoration:none; } .suite-permalink a:hover{color:var(--accent)} .suite-card-focus{ outline:1px solid var(--card-hover-border); box-shadow:0 0 0 3px var(--accent-glow); } .suite-back{ font-size:.8rem;margin:8px 0 0; } .suite-back a{color:var(--accent);text-decoration:none} .suite-back a:hover{text-decoration:underline} .suite-card-summary{ font-size:.8rem;color:var(--fg-subtle);line-height:1.65;margin:0 0 10px;max-width:52rem; } .suite-count{ font-size:.72rem;color:var(--accent);font-weight:500;white-space:nowrap;margin:0; } .suite-prompt{ border:1px solid var(--card-border);border-radius:10px; margin:0 0 18px;background:var(--input-bg); } .suite-prompt summary{ cursor:pointer;padding:12px 16px;font-size:.78rem;font-weight:500; color:var(--accent);list-style:none;user-select:none; } .suite-prompt summary::-webkit-details-marker{display:none} .suite-prompt summary::before{content:'▸ ';color:var(--accent)} .suite-prompt[open] summary::before{content:'▾ '} .suite-prompt-body{ margin:0;padding:0 16px 16px; font-family:inherit;font-size:.74rem;line-height:1.65; color:var(--fg-subtle);white-space:pre-wrap;word-break:break-word; max-height:320px;overflow:auto; } .suite-prompt-missing{font-size:.76rem;color:var(--fg-muted);margin:0 0 16px} .result-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; } .result-link{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 14px;border-radius:10px; border:1px solid var(--card-border); background:var(--bg); color:var(--fg);text-decoration:none; font-size:.78rem;font-weight:500; transition:border-color .2s,transform .2s,color .2s; } .result-link:hover{ border-color:var(--card-hover-border);color:var(--accent); transform:translateY(-1px); } .result-link-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .result-link-go{font-size:.7rem;color:var(--accent);flex-shrink:0;opacity:.85} /* ── Footer ── */ footer{padding:56px 0 40px;border-top:1px solid var(--footer-border)} .footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px} .footer-copy{font-size:.74rem;color:var(--fg-muted);opacity:.6} .footer-links{display:flex;gap:20px} .footer-links a{ font-size:.73rem;color:var(--fg-muted);text-decoration:none;transition:color .2s;opacity:.6; } .footer-links a:hover{color:var(--accent);opacity:1} /* ── Terminal cursor blink ── */ @keyframes blink{50%{opacity:0}} .cursor{display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:text-bottom;margin-left:2px;animation:blink 1s step-end infinite} /* ── Responsive ── */ @media(max-width:768px){ .contact-layout{grid-template-columns:1fr;gap:32px} .donate-layout{grid-template-columns:1fr;gap:32px} .top-nav-links a{font-size:.88rem} } @media(max-width:640px){ section{padding:40px 0 0 0} .top-nav{ font-size:.7rem; padding:10px 12px; padding-top:max(10px,env(safe-area-inset-top,0px)); } .top-nav-inner{ gap:8px; padding:0 2px; align-items:center; flex-wrap:nowrap; } .top-nav-links{ display:flex !important; flex-wrap:nowrap; gap:0 10px; flex:1 1 auto; min-width:0; justify-content:flex-end; } .top-nav-links a{ white-space:nowrap; flex-shrink:0; padding:6px 2px; font-size:.88rem; } .top-nav-spacer{height:calc(56px + env(safe-area-inset-top,0px))} .hero h1{font-size:1.7rem} .newsletter-box{padding:36px 24px} .x-follow{flex-direction:column;text-align:center} .about-intro{flex-direction:column;align-items:center;text-align:center} .footer-inner{flex-direction:column;text-align:center} .contact-card{padding:24px 18px} .donate-card{padding:24px 18px} .amount-presets{grid-template-columns:repeat(2,1fr)} } @media(max-width:480px){ .top-nav{ font-size:.7rem; padding:8px 10px; padding-top:max(8px,env(safe-area-inset-top,0px)); } .top-nav-inner{padding:0;gap:6px;flex-wrap:nowrap} /* Keep logo full size; only tighten link spacing */ .nav-brand-logo{width:28px;height:28px} .nav-brand-text{font-size:.7rem} .top-nav-links{ flex-wrap:nowrap; gap:0 8px; } .top-nav-links a{ padding:6px 2px; font-size:.88rem; } }