:root { /* WHOLE-PAGE DARK PALETTE — Xavier asked for the entire portfolio to feel like a software/tech surface, not a magazine. All sections share the same dark base now. */ --paper: #14141e; --paper-dim: #1c1c28; --paper-card: #1f1f2c; --ink: #e8e8f0; --ink-soft: #c0c0d0; --muted: #8a8a98; --dim: #82828f; --red: #ff66c4; /* neon pink, brighter for dark bg */ --teal: #66e0e0; /* neon teal */ --amber: #ffb84d; --violet: #b06bff; --olive: #adb874; --green: #00ff88; /* live/online status */ --rule: rgba(255, 255, 255, 0.07); --rule-soft: rgba(255, 255, 255, 0.04); --hi-soft: rgba(255, 102, 196, 0.06); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Selection lock: touch-drag over decorative UI (headings, nav, buttons) was getting read as a text-selection gesture on iOS Safari, freezing scroll. Prose stays selectable/copyable. */ body { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } p, li, blockquote, td, address, input, textarea, code, pre, [contenteditable] { -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; user-select: text; } html, body { background: var(--paper); color: var(--ink); font-family: 'Instrument Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6; } /* BACK PIECE: the root layer carries the base color + the same white dot texture as the page. iOS rubber-band overscroll reveals the html background, so this makes the stretch zone (top AND bottom) show dark + dots that match the page, instead of a flat gray seam/outline. Purely a backing behind everything; header / middle / footer layers sit on top and are untouched. The dot-grid tiles infinitely so it covers any stretch. */ html { background-color: var(--paper); /* This is the ONLY layer visible in the rubber-band overscroll strip (the canvas can't paint there). The old dots were rgba(...,0.02) — 2% white, effectively invisible, so pulling down read as a black void. Bumped to a visibly-textured dot field with a faint matrix-teal cast so the pull-reveal looks like an intentional continuation of the hero, not emptiness. Body (the layer over content during normal viewing) keeps its subtle dots, so the page itself doesn't get louder — only the overscroll strip does. Bounce stays ON. */ /* overscroll layer kept SOLID --paper (no dots, no teal) so the rubber-band bounce is a clean dark continuation matching the footer. Page dots live on . (Xavier 2026-07-07: bottom/top overscroll must be clean, not dotted.) */ } /* Same dot-grid on the body — the html/body shorthand above clears the image, so re-apply it here; this is the layer iOS reveals during top overscroll. */ body { background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1.4px); background-size: 24px 24px; background-repeat: repeat; } /* iOS edge-to-edge: with viewport-fit=cover the dark page fills the whole screen incl. behind the Dynamic Island + home indicator. Inset the content so nothing hides under them. Portrait: top=island, bottom=home bar; the left/right insets only matter in landscape (0 in portrait). */ body { /* Full-bleed top: NO top inset on the body, so the dark hero + matrix run edge-to-edge UNDER the Dynamic Island (like an Instagram video, island as a cutout). The hero's own top padding (below) carries the inset so the nav still clears the island. Bottom/sides keep their insets (home indicator + landscape). env() is 0 in a normal Safari tab, so this is a no-op there and only changes the installed (standalone) app. */ padding-top: 0; padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Smooth scroll for anchor jumps only. No proximity snap (Xavier said it felt like the page was forcing him onto sections). */ html { scroll-behavior: smooth; } /* Matrix rain canvas — scoped to hero ONLY. Once you scroll past the hero, no more matrix noise behind body text. Cleaner reading. */ .hero { position: relative; overflow: hidden; } .hero > * { position: relative; z-index: 1; } #matrixCanvas { position: absolute; /* OVERHANG: the canvas starts HALF a viewport ABOVE the page top and is 1.5x tall, so a rubber-band pull-down reveals matrix (never a void). Sized at 0.5vh overhang (not a full 1vh) deliberately for PERFORMANCE — this canvas is semi-transparent + gradient-masked, so the GPU re-composites the whole layer every animated frame; a smaller layer is much cheaper and killed the lag the double-height version caused. 0.5vh (~half the screen) still covers any realistic pull. Still absolute, so it scrolls away and is never a full-page backdrop. JS (home.js resize) sets px top/height to match. */ top: -50dvh; left: 0; right: 0; width: 100%; height: 150dvh; z-index: 0; pointer-events: none; opacity: 0.4; /* NOTE: the bottom fade is NOT a CSS mask anymore. mask-image forced the GPU to re-composite this whole layer offscreen every frame, which dropped scroll to ~30fps on 120Hz displays. The fade is now baked into the canvas draw (home.js) as a cheap gradient fill, so this layer composites plainly. */ } main { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(0, 102, 102, 0.3); transition: color 0.15s ease; } a:hover { color: var(--red); border-bottom-color: rgba(184, 0, 74, 0.5); } /* ───────────────────────────────────────── SECTION FRAME ───────────────────────────────────────── */ .section { padding: 90px 8% 100px; border-bottom: 1px solid var(--rule); position: relative; } /* Tint variables removed — base is dark, no per-section washes. */ /* Dark base is now :root — old .section--dark / .hero--dark modifier blocks removed (redundant). All elements that used hardcoded light rgba(255,255,255,0.X) backgrounds have been switched to subtle dark card backgrounds via --paper-card or low-opacity white. */ .section { background: transparent; } .feat-main, .side-tile { background: rgba(255, 255, 255, 0.025) !important; } .feat-stats, .gh-stats { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.08); } .feat-stat { background: rgba(255, 255, 255, 0.015) !important; } .section-head { display: flex; align-items: baseline; gap: 28px; margin-bottom: 48px; font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; } .section-head .num { color: var(--red); font-weight: 600; } .section-head .title { color: var(--muted); } .section-head .meta { margin-left: auto; color: var(--dim); } /* ───────────────────────────────────────── HERO — Variant A polished ───────────────────────────────────────── */ .hero { /* +env(safe-area-inset-top) keeps the nav below the Dynamic Island in the installed app while the hero bg/matrix bleed full to the top edge. 0 in a tab. */ padding: calc(96px + env(safe-area-inset-top)) 8% 110px; min-height: 90vh; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--rule); } .hero-body { width: 100%; } .hero-topmark { font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.65rem; letter-spacing: 0.4em; color: var(--muted); margin-bottom: 0; border-bottom: 1px solid var(--rule); padding-bottom: 16px; display: flex; justify-content: space-between; text-transform: uppercase; } .hero-head { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(3.2rem, 8vw, 6.8rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 38px; max-width: 22ch; } .hero-head em { font-style: italic; color: var(--red); } .hero-dek { font-family: 'Instrument Sans', sans-serif; font-size: 1.22rem; line-height: 1.6; color: var(--ink-soft); max-width: 600px; margin-bottom: 0; font-weight: 400; } .hero-sig { display: flex; align-items: center; gap: 18px; font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; } .hero-sig strong { font-family: 'Instrument Sans', sans-serif; font-size: 1.2rem; font-weight: 800; letter-spacing: 0.15em; color: var(--ink); text-transform: none; } .hero-sig .pulse { display: inline-block; width: 9px; height: 9px; background: var(--teal); border-radius: 50%; animation: pulse 2.5s infinite; } @keyframes pulse { 50% { opacity: 0.4; } } /* ───────────────────────────────────────── FIELD NOTE / TIP — editorial pull-quote ───────────────────────────────────────── */ .tip-block { max-width: 920px; padding: 26px 34px 30px; border: 1px solid var(--rule); border-radius: 10px; background: rgba(255, 255, 255, 0.018); } .tip-cat { font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.3em; color: var(--red); margin-bottom: 14px; display: block; text-transform: uppercase; } .tip-body { font-family: 'Instrument Sans', sans-serif; font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); } /* ───────────────────────────────────────── STORY — long-form with marginalia ───────────────────────────────────────── */ .story { display: grid; grid-template-columns: 1fr 260px; gap: 80px; max-width: 1180px; } .story-prose h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.0; margin-bottom: 32px; max-width: 18ch; color: var(--ink); } .story-prose h2 em { color: var(--red); font-style: italic; } .story-prose p { font-size: 1.08rem; line-height: 1.78; color: var(--ink-soft); margin-bottom: 22px; max-width: 64ch; } .story-prose p:first-of-type { font-size: 1.25rem; line-height: 1.6; color: var(--ink); font-weight: 500; margin-bottom: 32px; } .story-prose strong { color: var(--red); font-weight: 600; } .story-margin { border-left: 1px solid var(--rule); padding-left: 28px; font-family: 'Fira Code', monospace; font-size: 0.78rem; line-height: 1.7; color: var(--muted); align-self: start; position: sticky; top: 40px; } .story-margin .mg-row { padding: 12px 0; border-bottom: 1px dashed var(--rule); } .story-margin .mg-row:last-child { border-bottom: 0; } .story-margin .mg-key { color: var(--red); font-size: 0.62rem; letter-spacing: 0.25em; margin-bottom: 5px; display: block; } .story-margin .mg-val { color: var(--ink); } .infra-head { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 400; letter-spacing: -0.025em; margin-bottom: 14px; /* Was flex + gap: the plain text node and the wrapped as two independent flex items on narrow screens, shattering the heading into stacked columns ("The lab | taught me / that | everything"). Inline flow wraps correctly. */ display: block; color: var(--ink); } .infra-head em { color: var(--red); font-style: italic; } .infra-dek { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 600px; } /* ───────────────────────────────────────── NEXUS — feature article with sidebar ───────────────────────────────────────── */ .nexus-feature { display: flex; flex-direction: column; gap: 30px; max-width: 1080px; } .nx-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } .nxs .nxs-body { padding: 16px 16px 16px; } .nxs-id { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:13px; border-bottom:1px dashed var(--rule); margin-bottom:14px; } .nxs-id-name { font-family:'Instrument Sans',sans-serif; font-size:15px; font-weight:600; letter-spacing:0.2px; color:var(--ink); } .nxs-id-name em { font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:var(--violet); font-size:17px; } .nxs-id-sub { font-family:'Fira Code',monospace; font-size:10.5px; color:var(--dim); letter-spacing:0.3px; white-space:nowrap; } /* ── Home animation pass: hero load-reveal, section-number glow, magnetic ping ── */ .hero-topmark { animation: heroRise .7s cubic-bezier(.2,.7,.2,1) .05s both; } .hero-head { animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .18s both; } .hero-dek { animation: heroRise .8s cubic-bezier(.2,.7,.2,1) .42s both; } .hero-sig { animation: heroRise .8s cubic-bezier(.2,.7,.2,1) .58s both; } @keyframes heroRise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } } .section-head .num.lit { animation: numGlow 1.1s ease-out; } @keyframes numGlow { 0%{ text-shadow:0 0 0 rgba(255,102,196,0); } 28%{ text-shadow:0 0 15px rgba(255,102,196,0.8); } 100%{ text-shadow:0 0 0 rgba(255,102,196,0); } } .ping-btn { transition: transform .28s cubic-bezier(.2,.7,.2,1), background .2s ease, color .2s ease, box-shadow .2s ease; } @media (prefers-reduced-motion: reduce){ .hero-topmark, .hero-head, .hero-dek, .hero-sig { animation: none; } .hero-sig .pulse, .lab-status-dot { animation: none !important; } .section-head .num.lit { animation: none; } } .nxs-checks { font-family:'Fira Code',monospace; font-size:12px; line-height:1.95; margin-bottom:12px; } .nxs-check { display:flex; align-items:baseline; gap:8px; opacity:0; transform:translateY(3px); transition:opacity .3s ease, transform .3s ease; } .nxs-check.show { opacity:1; transform:none; } .nxs-check .pfx { color:var(--dim); user-select:none; } .nxs-check .lbl { color:var(--ink-soft); flex:none; } .nxs-check .dots { flex:1; border-bottom:1px dotted var(--rule); position:relative; top:-3px; } .nxs-check .val { color:var(--teal); font-weight:500; flex:none; } .nxs-check .val.ok { color:var(--green); } .nxs-check .val.bad { color:#ff5a6a; } .nxs-spec { margin:0; } .nxs-spec > div { display:flex; gap:12px; padding:6px 0; border-top:1px solid var(--rule); } .nxs-spec dt { flex:none; width:46px; font-family:'Fira Code',monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--violet); padding-top:3px; } .nxs-spec dd { margin:0; font-family:'Fira Code',monospace; font-size:11.5px; line-height:1.5; color:var(--ink-soft); } .nxs-sep { height:1px; background:var(--rule); margin:14px 0; } .nxs-h { display:flex; align-items:baseline; justify-content:space-between; font-family:'Fira Code',monospace; font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; } .nxs-src { color:var(--muted); letter-spacing:0; text-transform:none; } .nxs-list { display:flex; flex-direction:column; gap:12px; font-family:'Fira Code',monospace; font-size:12px; min-height:96px; } .nxs-loading { color:var(--dim); } .nxs-item { display:flex; gap:10px; align-items:baseline; opacity:0; transform:translateY(3px); transition:opacity .3s ease, transform .3s ease; } .nxs-item.show { opacity:1; transform:none; } .nxs-item .u-sha { color:var(--violet); flex:none; } .nxs-item .u-msg { color:var(--ink-soft); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nxs-item .u-when { color:var(--dim); flex:none; white-space:nowrap; } .nxs-spark { display:flex; align-items:flex-end; gap:3px; height:26px; margin:0 0 12px; } .nxs-bar { flex:1; min-height:2px; height:2px; background:var(--rule); border-radius:1px; transition:height .45s cubic-bezier(0.2,0.7,0.2,1); } .nxs-bar.on { background:var(--violet); opacity:0.72; } .nxs-stats { display:flex; gap:16px; flex-wrap:wrap; font-family:'Fira Code',monospace; font-size:11px; color:var(--muted); } .nxs-stats .nxs-stat { color:var(--muted); white-space:nowrap; } .nxs-stats .nxs-stat b { color:var(--teal); font-weight:600; } .nx-lead .nx-cat { font-family: 'Fira Code', monospace; font-size: 0.65rem; letter-spacing: 0.28em; color: var(--red); text-transform: uppercase; margin-bottom: 18px; display: block; } .nx-lead h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.0; margin-bottom: 22px; color: var(--ink); max-width: 14ch; } .nx-lead h3 em { color: var(--red); font-style: italic; } .nx-lead .nx-dek { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.65; margin-bottom: 32px; max-width: 480px; } /* ───────────────────────────────────────── BLOG — magazine-style article previews ───────────────────────────────────────── */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 40px; max-width: 1200px; } .blog-item { border-top: 1px solid var(--ink); padding: 22px 0 0; display: flex; flex-direction: column; border-bottom: 0; transition: opacity 0.2s ease; } .blog-item:hover { opacity: 0.7; border-bottom: 0; } .blog-item .bi-meta { display: flex; gap: 14px; font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.22em; margin-bottom: 14px; text-transform: uppercase; } .blog-item .bi-date { color: var(--red); } .blog-item .bi-len { color: var(--muted); } .blog-item h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.45rem, 2.5vw, 1.85rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 12px; color: var(--ink); } .blog-item p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; flex-grow: 1; margin-bottom: 18px; } .blog-item .bi-arrow { font-family: 'Fira Code', monospace; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--red); text-transform: uppercase; font-weight: 700; } /* ───────────────────────────────────────── GITHUB FEED — editorial table ───────────────────────────────────────── */ .gh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 36px; max-width: 1100px; } .gh-stat { background: var(--paper-dim); padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; } .gh-stat-val { font-family: 'Instrument Serif', Georgia, serif; font-size: 2.6rem; font-weight: 400; line-height: 1; color: var(--red); letter-spacing: -0.02em; } .gh-stat-key { font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; } .gh-projects { max-width: 1100px; margin-bottom: 14px; } .gh-proj-cap { font-family:'Fira Code',monospace; font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; } .gh-proj-cap .gh-proj-src { color:var(--dim); opacity:0.7; letter-spacing:0.12em; } .gh-feed-cap { max-width:1100px; margin-top:34px; } .gh-proj-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px; } .gh-proj { display:flex; flex-direction:column; gap:9px; padding:22px; border:1px solid var(--rule); border-radius:12px; background:var(--paper-dim); text-decoration:none; transition:border-color .2s ease, transform .2s ease; } .gh-proj:hover { border-color:rgba(255,255,255,0.16); transform:translateY(-2px); } .gh-proj-name { font-family:'Instrument Serif',Georgia,serif; font-size:1.5rem; font-weight:400; line-height:1.05; color:var(--ink); letter-spacing:-0.01em; } .gh-proj-desc { font-family:'Fira Code',monospace; font-size:0.72rem; line-height:1.6; color:var(--ink-soft); flex:1; } .gh-proj-meta { display:flex; align-items:center; gap:14px; font-family:'Fira Code',monospace; font-size:0.62rem; color:var(--dim); margin-top:6px; } .gh-proj-lang { display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); } .gh-proj-lang .ld { width:9px; height:9px; border-radius:50%; flex:none; } .gh-proj-stars { color:var(--ink-soft); } .gh-proj-when { margin-left:auto; letter-spacing:0.08em; } .gh-feed { max-width: 1100px; } .gh-empty { font-family: 'Fira Code', monospace; font-size: 0.78rem; color: var(--dim); letter-spacing: 0.1em; padding: 8px 0; } .gh-day { margin-bottom: 32px; } .gh-day-head { font-family: 'Fira Code', monospace; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--red); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; } .gh-day-head span { color: var(--muted); font-weight: 400; } .gh-list { list-style: none; border-top: 1px solid var(--ink); } .gh-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; font-family: 'Instrument Sans', sans-serif; font-size: 1rem; } .gh-repo { font-family: 'Fira Code', monospace; font-size: 0.6rem; letter-spacing: 0.22em; font-weight: 700; padding: 4px 10px; border-radius: 2px; text-align: center; text-transform: uppercase; } .gh-repo--portfolio { background: rgba(184, 0, 74, 0.08); color: var(--red); border: 1px solid rgba(184, 0, 74, 0.3); } .gh-repo--nexus { background: rgba(0, 102, 102, 0.08); color: var(--teal); border: 1px solid rgba(0, 102, 102, 0.3); } .gh-msg { color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh-time { font-family: 'Fira Code', monospace; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; } .gh-more { display: inline-block; font-family: 'Fira Code', monospace; font-size: 0.72rem; letter-spacing: 0.22em; color: var(--red); margin-top: 20px; text-transform: uppercase; font-weight: 700; border-bottom: 0; position: relative; } /* Extends the tap target to >=24px without shifting layout (WCAG 2.5.8). */ .gh-more::after { content: ''; position: absolute; inset: -10px -6px; } /* ───────────────────────────────────────── CONTACT — light editorial form ───────────────────────────────────────── */ .contact-grid { display: grid; /* minmax(0,1fr): plain 1fr tracks refuse to shrink below their min-content (the unbreakable mono email + the fixed 300px Turnstile iframe), which pushed this grid 2px past a 390px viewport and re-enabled horizontal wiggle on iOS. minmax(0,1fr) lets the tracks actually shrink. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; max-width: 1200px; } .contact-lead h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 400; letter-spacing: -0.025em; margin-bottom: 22px; line-height: 1.0; color: var(--ink); } .contact-lead h3 em { color: var(--red); font-style: italic; } .contact-lead p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; margin-bottom: 32px; } .contact-channels { border-top: 1px solid var(--rule); margin-top: 4px; } .cc-row { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-family: 'Fira Code', monospace; font-size: 0.88rem; } .cc-row .cc-key { color: var(--red); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; padding-top: 4px; } .cc-row .cc-val { color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .cc-row .cc-val a { color: var(--teal); } .cc-dir-narrow { display: none; } /* form sits beside the lead on desktop, below it on mobile (see 768 breakpoint) */ .contact-form-full { display: flex; flex-direction: column; gap: 18px; padding: 36px; background: var(--paper-dim); border: 1px solid var(--rule); border-radius: 4px; } .cff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cff-field { display: flex; flex-direction: column; gap: 8px; } .cff-lbl { font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--red); font-weight: 600; text-transform: uppercase; } .cff-field input, .cff-field select, .cff-field textarea { font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); outline: none; width: 100%; resize: vertical; transition: border-color 0.15s ease; } .cff-field input:focus, .cff-field select:focus, .cff-field textarea:focus { border-color: var(--red); } .cff-field input::placeholder, .cff-field textarea::placeholder { color: var(--dim); } .cff-submit { font-family: 'Fira Code', monospace; font-size: 0.78rem; letter-spacing: 0.22em; font-weight: 700; padding: 14px 18px; background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; cursor: pointer; transition: background 0.2s ease; margin-top: 8px; text-transform: uppercase; } .cff-submit:hover { background: var(--red); } .cff-note { display: block; margin-top: 6px; font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; } /* ───────────────────────────────────────── FOOTER — light editorial ───────────────────────────────────────── */ .footer { margin-top: auto; /* Same base color as the page (--paper), NOT --paper-dim. On iOS the rubber-band overscroll below the footer can only ever reveal the root --paper color; matching the footer to it makes that bounce seamless (no mismatched "blue sheet"). The 2px top border keeps the footer visually defined without needing a different fill. */ background: var(--paper); border-top: 2px solid var(--ink); padding: 70px 0 calc(48px + env(safe-area-inset-bottom)); } .footer-inner { max-width: 1300px; margin: 0 auto; padding: 0 8%; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; } .footer-brand .fb-name { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 6px; color: var(--ink); } .footer-brand .fb-role { font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.25em; color: var(--red); margin-bottom: 18px; text-transform: uppercase; } .footer-brand .fb-blurb { color: var(--muted); font-size: 0.92rem; line-height: 1.6; max-width: 320px; } .footer-col h5 { font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.25em; color: var(--red); font-weight: 700; margin-bottom: 18px; text-transform: uppercase; } .footer-col ul { list-style: none; } .footer-col li { padding: 0; } .footer-col li a { display: block; padding: 10px 0; } .footer-col a { font-family: 'Instrument Sans', sans-serif; font-size: 0.95rem; color: var(--muted); border-bottom: 0; } .footer-col a:hover { color: var(--red); } .footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding-top: 28px; margin-bottom: 26px; border-top: 1px solid var(--rule); } .footer-social .fs-label { font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.25em; color: var(--red); text-transform: uppercase; margin-right: 4px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px; color: var(--muted); border-bottom: 0; transition: color .16s ease, transform .16s ease; } .footer-social a svg { width: 19px; height: 19px; display: block; } .footer-social a:hover { color: var(--red); transform: translateY(-2px); } .footer-social a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 3px; } .footer-bottom { display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--rule); font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; } /* ───────────────────────────────────────── THE WORK (FEATURED + SIDE CARDS) ───────────────────────────────────────── */ .briefs-feat { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; max-width: 1300px; } .feat-main { padding: 34px 40px 38px; border: 1px solid var(--rule); border-top: 3px solid var(--red); background: rgba(255, 255, 255, 0.5); border-radius: 4px; display: flex; flex-direction: column; } .feat-tag { font-family: 'Fira Code', monospace; font-size: 0.62rem; letter-spacing: 0.25em; color: var(--red); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; } .feat-main h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.0; margin-bottom: 14px; color: var(--ink); } .feat-since { font-family: 'Fira Code', monospace; font-size: 0.65rem; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 22px; text-transform: uppercase; } .feat-desc { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 28px; max-width: 60ch; } .feat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 28px; } .feat-stat { background: var(--paper); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .fs-val { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.7rem; line-height: 1; color: var(--red); letter-spacing: -0.015em; } .fs-key { font-family: 'Fira Code', monospace; font-size: 0.58rem; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; } .side-stack { display: flex; flex-direction: column; gap: 24px; } .side-tile { padding: 24px 26px 22px; border-top: 3px solid var(--ink); background: rgba(255, 255, 255, 0.4); flex: 1; } .side-tile[data-accent="teal"] { border-top-color: var(--teal); background: linear-gradient(162deg, rgba(102,224,224,0.075), rgba(102,224,224,0.015)) !important; } .side-tile[data-accent="amber"] { border-top-color: var(--amber); background: linear-gradient(162deg, rgba(255,184,77,0.08), rgba(255,184,77,0.015)) !important; } .side-tile[data-accent="violet"] { border-top-color: var(--violet); background: linear-gradient(162deg, rgba(176,107,255,0.075), rgba(176,107,255,0.015)) !important; } .feat-main { background: linear-gradient(160deg, rgba(255,102,196,0.07), rgba(255,102,196,0.012)) !important; } .side-cat { font-family: 'Fira Code', monospace; font-size: 0.6rem; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; } .side-tile h4 { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.55rem; font-weight: 400; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--ink); } .side-tile p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 14px; } .side-explore { font-family: 'Fira Code', monospace; font-size: 0.68rem; letter-spacing: 0.22em; color: var(--red); font-weight: 700; border-bottom: 0; text-transform: uppercase; position: relative; } /* Extends the tap target to >=24px without shifting layout (WCAG 2.5.8). */ .side-explore::after { content: ''; position: absolute; inset: -10px -6px; } /* ───────────────────────────────────────── HOME LAB EXPANDED (8 services + specs) ───────────────────────────────────────── */ .lab-block { max-width: 1300px; } .lab-intro { margin-bottom: 28px; } .lab-summary { max-width: 760px; margin-top: 44px; } .lab-summary p { font-size: 1.06rem; line-height: 1.72; color: var(--ink-soft); margin-bottom: 18px; } .lab-summary p:last-child { margin-bottom: 0; } /* Live home-lab status row (fed by api.thyfwxit.com/api/homelab-status) */ .lab-status { position: relative; margin-top: 26px; border: 1px solid var(--rule); border-radius: 12px; background: rgba(255, 255, 255, 0.018); overflow: hidden; font-family: 'Fira Code', ui-monospace, monospace; } .lab-status-top { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--rule); font-size: 0.72rem; letter-spacing: 0.05em; } .lab-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; } .lab-status[data-state="operational"] .lab-status-dot { background: var(--green); animation: labpulse 2.4s ease-out infinite; } .lab-status[data-state="degraded"] .lab-status-dot { background: var(--amber); } .lab-status[data-state="down"] .lab-status-dot, .lab-status[data-state="unavailable"] .lab-status-dot { background: #ff4040; } .lab-status[data-state="down"] .lab-status-label, .lab-status[data-state="unavailable"] .lab-status-label { color: #ff4040; } .lab-status-label { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; } .lab-status[data-state="operational"] .lab-status-label { color: var(--green); } .lab-status[data-state="degraded"] .lab-status-label { color: var(--amber); } .lab-status-time { color: var(--dim); margin-left: auto; white-space: nowrap; font-size: 0.66rem; } .lab-status-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 6px; padding: 14px; } .lab-svc { display: flex; align-items: center; gap: 11px; padding: 11px 14px; color: var(--ink-soft); font-size: 0.76rem; letter-spacing: 0.01em; background: rgba(255, 255, 255, 0.025); border-radius: 7px; } .lab-svc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); flex: none; } .lab-svc[data-up="true"] .lab-svc-dot { background: var(--green); box-shadow: 0 0 8px rgba(0, 255, 136, 0.5); } .lab-svc[data-up="false"] .lab-svc-dot { background: #ff4040; box-shadow: 0 0 8px rgba(255, 64, 64, 0.65); } @keyframes labpulse { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(0, 255, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } } @media (max-width: 768px) { .lab-status-top { flex-wrap: wrap; } .lab-status-time { margin-left: 0; width: 100%; } .lab-status-svcs { grid-template-columns: 1fr 1fr; } } /* "What it runs" as its own framed section under the live status */ .lab-stack { margin-top: 32px; padding: 28px 32px 32px; border: 1px solid var(--rule); border-radius: 10px; background: rgba(255, 255, 255, 0.018); } .lab-stack-cap { font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--red); margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--rule-soft); } .lab-stack-list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; margin: 0; } .lab-stack-row dt { font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.76rem; letter-spacing: 0.05em; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .lab-stack-row dd { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--muted); } @media (max-width: 768px) { .lab-stack { padding: 22px 20px 24px; } .lab-stack-list { grid-template-columns: 1fr; gap: 22px; } } /* ── Mobile / tablet (≤768) ── */ @media (max-width: 768px) { .section, .hero { padding: 70px 5% 80px; } .hero { min-height: auto; padding-top: calc(70px + env(safe-area-inset-top)); } .hero-topmark { flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 40px; } .hero-sig { flex-wrap: wrap; gap: 8px 14px; } /* matrix rain pulled way back so the headline wins on small screens */ /* Mobile: pin the matrix to the viewport and give it its OWN GPU layer so it composites (not repaints) during scroll — this is what kills the iOS scroll jank of an absolute semi-transparent canvas. JS sizes it (viewport + overscan) and fades it out via .is-past once you scroll past the hero. */ #matrixCanvas { position: fixed; top: 0; left: 0; opacity: 0.32; transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; } .story { grid-template-columns: 1fr; gap: 40px; } .story-margin { position: static; } /* // 04 The Work — one column kills the side-scroll and the stretched empty void */ .briefs-feat { grid-template-columns: 1fr; gap: 26px; } .feat-main { padding: 28px 24px; } .feat-desc { font-size: 1rem; } .side-stack { gap: 18px; } /* // 07 Blog — single column (the 290px min track overflows narrow phones) */ .blog-grid { grid-template-columns: 1fr; gap: 30px; } .nx-boxes { grid-template-columns: 1fr; gap: 18px; } /* Stacked: the terminal has no sibling to stretch against, so its flex feed collapses to ~nothing. Higher specificity (.nx-boxes .term .feed) beats the base .term .feed regardless of source order. Size to content, floor so it never collapses, cap so pings scroll instead of growing the box. */ .nx-boxes .term .feed { flex: none; height: auto; min-height: 130px; max-height: 300px; } .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .contact-form-full { padding: 22px 16px; } .cc-row { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; } .gh-row { grid-template-columns: 90px minmax(0, 1fr); } .gh-row .gh-time { grid-column: 1 / -1; padding-left: 110px; } .cff-row { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } .footer-bottom { flex-direction: column; gap: 10px; } .section-head { flex-wrap: wrap; gap: 12px; } .section-head .meta { margin-left: 0; } .cc-dir-wide { display: none; } .cc-dir-narrow { display: inline; } } /* ── Phone (≤480) — tighten type scale + stat bars ── */ @media (max-width: 480px) { .hero-head { font-size: 2.7rem; line-height: 1.06; margin-bottom: 30px; } .hero-dek { font-size: 1.04rem; margin-bottom: 40px; } .feat-main h3 { font-size: clamp(1.8rem, 8vw, 2.4rem); } .feat-stat { padding: 13px 12px; } .fs-val { font-size: 1.35rem; white-space: nowrap; } .gh-stat-val { font-size: 2.1rem; } } /* ── Nexus live terminal (embedded; real boot log + ping) ── */ .term{background:#0e0e17;border:1px solid var(--rule);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;min-height:0;box-shadow:0 30px 70px -32px rgba(0,0,0,0.92), 0 1px 0 rgba(255,255,255,0.04) inset;} .term .term-bar{display:flex;align-items:center;gap:9px;padding:9px 16px;background:var(--teal);color:#08222a;font-family:"Fira Code",monospace;font-size:11px;font-weight:600;letter-spacing:0.6px;} .term .term-bar .bdot{width:8px;height:8px;border-radius:50%;background:#0a3a28;flex:none;} .term .term-bar.building{background:var(--violet);color:#1a0a2e;} .term .term-bar.building .bdot{background:#3a1560;} .term .term-bar.offline{background:var(--red);color:#2a0820;} .term .term-bar.offline .bdot{background:#5a0a2a;} .term .nxc-id{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 16px 12px;border-bottom:1px dashed var(--rule);} .term .nxc-id-name{font-family:"Instrument Sans",sans-serif;font-size:15px;font-weight:600;letter-spacing:0.2px;color:var(--ink);} .term .nxc-id-name em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:var(--violet);font-size:17px;} .term .nxc-id-sub{font-family:"Fira Code",monospace;font-size:10.5px;color:var(--dim);letter-spacing:0.3px;white-space:nowrap;} .term .feed{font-family:"Fira Code",monospace;font-size:12.5px;line-height:1.5;flex:1 1 0;min-height:0;overflow-y:auto;padding:13px 16px 8px;} .term .feed::-webkit-scrollbar{width:6px;} .term .feed::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px;} .term .lg{padding:2px 0;opacity:0;transform:translateY(3px);transition:opacity .3s ease, transform .3s ease;word-break:break-word;} .term .lg.show{opacity:1;transform:none;} .term .lg .tag{font-weight:600;letter-spacing:0.4px;margin-right:8px;} .term .t-sys{color:var(--muted);} .term .t-log{color:var(--muted);} .term .t-dev .tag{color:var(--violet);} .term .t-dev{color:var(--muted);} .term .t-online .tag{color:var(--green);} .term .t-online{color:var(--green);} .term .t-ready .tag{color:var(--teal);} .term .t-ready{color:var(--teal);} .term .t-ping{color:var(--muted);} .term .t-pong .tag{color:var(--green);} .term .t-pong{color:var(--green);} .term .t-warn .tag{color:var(--red);} .term .t-warn{color:var(--red);} .term .lg .when{color:var(--dim);} .term .block{margin-top:9px;opacity:0;transform:translateY(3px);transition:opacity .3s ease, transform .3s ease;} .term .block.show{opacity:1;transform:none;} .term .block .blurb{color:var(--muted);font-size:11.5px;line-height:1.55;margin-top:4px;} .term .block .nudge{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.05);color:var(--dim);line-height:1.5;} .term .block .nudge .ea{color:var(--red);} .term .enter-name{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(255,102,196,0.45);padding-bottom:1px;transition:border-color .2s ease;} .term .enter-name:hover{border-color:var(--red);} .term .term-foot{display:flex;padding:14px 16px;border-top:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.025);} .term .ping-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;font-family:"Fira Code",monospace;font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--red);background:rgba(255,102,196,0.05);border:1px solid rgba(255,102,196,0.5);border-radius:11px;padding:13px 0;cursor:pointer;box-shadow:0 10px 26px -14px rgba(255,102,196,0.55);transition:background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease;} .term .ping-btn:hover{background:rgba(255,102,196,0.12);border-color:var(--red);box-shadow:0 12px 30px -12px rgba(255,102,196,0.75);} .term .ping-btn:active{transform:translateY(1px);} .term .ping-btn:disabled{cursor:progress;opacity:0.6;} /* body: dot-grid only. Glow removed — was at -15% which made the bright center visible during iOS top overscroll (bounced in from above). */ body { background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1.4px); background-size: 24px 24px; background-repeat: repeat; } /* In installed standalone/fullscreen mode the Dynamic Island is the page boundary — no URL bar creating a natural visual separator. The topmark border-bottom reads as a stray line right below the island. Hide it here; it still shows in normal Safari tabs where it looks intentional. Matched two ways: the CSS display-mode query (works on most platforms) AND the .pwa-standalone class set by navigator.standalone in — iOS's legacy apple-mobile-web-app-capable install doesn't always report through display-mode reliably, so the class is the belt-and-suspenders check that actually catches it on-device. */ @media (display-mode: standalone), (display-mode: fullscreen) { .hero-topmark { border-bottom: none; padding-bottom: 0; } } html.pwa-standalone .hero-topmark { border-bottom: none; padding-bottom: 0; } /* Mobile PWA: defensive island clearance. iOS with display:fullscreen in the manifest can return env(safe-area-inset-top)=0 on some builds, which puts the hero content only 70px from the top — overlapping the Dynamic Island and the clock/Wi-Fi/battery status bar icons to the right of it. The max() floor (90px) guarantees clearance even when env() misfires. Right/left padding picks up env() so landscape orientation also stays inside safe zones. */ @media (max-width: 768px) and (display-mode: standalone), (max-width: 768px) and (display-mode: fullscreen) { .hero { padding-top: max(90px, calc(env(safe-area-inset-top) + 70px)); padding-right: max(5%, env(safe-area-inset-right)); padding-left: max(5%, env(safe-area-inset-left)); } /* Give the topmark's right-aligned span (AVAILABLE FOR WORK) a small top buffer so it sits visibly below the island, not crowding the status bar. */ .hero-topmark { padding-top: 10px; } } @media (max-width: 768px) { html.pwa-standalone .hero { padding-top: max(90px, calc(env(safe-area-inset-top) + 70px)); padding-right: max(5%, env(safe-area-inset-right)); padding-left: max(5%, env(safe-area-inset-left)); } html.pwa-standalone .hero-topmark { padding-top: 10px; } }