Refine light-theme cards and mobile presentation

AGENTS.md

@@ -57,7 +57,7 @@ All of these must pass before a change is done. CI (`.github/actions/check/`) ru
 - **Client code.** Keep content in Server Components. Add `"use client"` only where interaction needs it.
 - **Section links.** In-page section links go through `scrollToSection`, which moves focus to the section's heading. Off the home page they point to `/#id`.
 - **Per-page metadata.** Every page sets it with `pageMetadata()` from `src/lib/metadata.ts`. New public pages also belong in `src/app/sitemap.ts` (the Playwright suite checks the sitemap matches `PAGES`).
-- **Dark bands.** Inside `.band` (header row, hero, approach, Now building card) the generic tokens already hold band values. Use `--text`, `--surface`, `--accent` and so on; don't hard-code band colours, or the Terminal skin can't reset them.
+- **Dark bands.** Inside `.band` (header row, hero, approach, Car Brain card) the generic tokens already hold band values. Use `--text`, `--surface`, `--accent` and so on; don't hard-code band colours, or the Terminal skin can't reset them. The light theme pairs a light TheEventa card with dark Car Brain; root card-surface tokens preserve the dark and Terminal palettes.
 - **Car Brain gate.** `CAR_BRAIN_PUBLISHED` in `src/content/carBrainLinks.ts` stays `false` until Tomasz says the App Store listing is live. The independent-product card is visible during development; keep the store links behind the gate, and never import `src/content/carBrain.ts` into client code, or the links reach the build while unpublished.
 - **Accessibility.** Keyboard access, visible focus, reduced motion, and no sideways scroll at 320px are all required. The axe scans must stay at zero violations.
 

README.md

@@ -69,7 +69,7 @@ GitHub Actions runs all of these on Node 24.21.0, through the shared steps in `.
 
 All CSS is imported in `src/components/Document.tsx` and nowhere else, with `skin-terminal.css` last. The Terminal rules use `:where()`, so they win on order, not specificity. Next.js loads page-level CSS after layout CSS, so a component importing its own stylesheet would load after the skin and override it.
 
-The standard skin keeps the CV's palette and fonts. The header, the hero, the approach section and the Now building card are dark bands in both themes, and contact is a teal band. Inside a `.band` (and the header's inner row) `src/index.css` re-points the generic tokens (`--text`, `--surface`, `--accent`, …) to band values, so components inside need no colours of their own; the Terminal skin resets them to its own tokens.
+The standard skin keeps the CV's palette and fonts. The header, hero and approach section are dark bands in both themes, and contact is a teal band. Light mode pairs a light TheEventa card with a dark Car Brain card; root card-surface tokens preserve the dark-mode palette. Inside a `.band` (and the header's inner row) `src/index.css` re-points the generic tokens (`--text`, `--surface`, `--accent`, …) to band values, so components inside need no colours of their own; the Terminal skin resets them to its own tokens. Below 640px, the standard architecture panel uses tighter spacing while retaining all nodes and explanations.
 
 ## Versions
 

src/components/Hero/Hero.css

@@ -286,6 +286,38 @@
   }
 }
 
+/* Keep every node and its explanation visible without a tall mobile panel. */
+@media (max-width: 639px) {
+  :where(html:not(.skin-terminal)) .hero-grid {
+    gap: 20px;
+  }
+
+  :where(html:not(.skin-terminal)) .arch-body {
+    padding: 12px;
+  }
+
+  :where(html:not(.skin-terminal)) .arch-node {
+    min-height: 54px;
+    padding: 8px 10px;
+  }
+
+  :where(html:not(.skin-terminal)) .arch-grid {
+    gap: 6px;
+  }
+
+  :where(html:not(.skin-terminal)) .arch-wire {
+    height: 14px;
+    overflow: hidden;
+  }
+
+  :where(html:not(.skin-terminal)) .arch-caption,
+  :where(html:not(.skin-terminal)) .arch-footer {
+    min-height: 0;
+    margin-top: 8px;
+    padding: 8px 10px;
+  }
+}
+
 @media (min-width: 801px) {
   .hero {
     padding: 44px 0 52px;

src/content/carBrain.ts

@@ -39,8 +39,7 @@ export const carBrain: CarBrain = {
   title: "Car Brain",
   role: "Creator & Developer",
   text: "A vehicle-management app I’m building for iOS, Android and the web around a shared Appwrite backend.",
-  architecture:
-    "React Native powers the mobile app and Next.js the web client under development. Both use TypeScript. Cloud functions handle AI insights and VIN decoding.",
+  architecture: "Cloud functions handle AI insights and VIN decoding.",
   features:
     "Vehicle management · Maintenance, fuel & costs · Reports & analytics",
   automation:
@@ -99,8 +98,7 @@ export const carBrainFor = (locale: "en" | "pl"): CarBrain => {
     eyebrow: "Własny produkt",
     role: "Twórca i programista",
     text: "Rozwijam aplikację do zarządzania pojazdami na iOS, Androida i przeglądarkę, ze wspólnym backendem Appwrite.",
-    architecture:
-      "Aplikacja mobilna korzysta z React Native, a powstająca wersja webowa z Next.js. Obie używają TypeScriptu. Funkcje chmurowe obsługują analizę AI i dekodowanie VIN.",
+    architecture: "Funkcje chmurowe obsługują analizę AI i dekodowanie VIN.",
     features:
       "Zarządzanie pojazdami · Serwis, paliwo i koszty · Raporty i analityka",
     automation:

src/content/publicProfile.ts

@@ -187,7 +187,7 @@ export const profile: Profile = {
       number: "02",
       topic: "Quality and mentoring",
       period: "Since 2022",
-      title: "From days of manual regression to under an hour",
+      title: "From days of manual regression to about an hour",
       summary:
         "Instead of writing a proposal, I built a working Cypress suite. My manager hired an automation tester; I trained two testers and reviewed every change in the first year.",
       outcome: "1–3 days → about an hour on Orange TV GO.",

src/content/work/studies.ts

@@ -43,9 +43,9 @@ export const caseStudies: CaseStudy[] = [
   {
     slug: "orange-e2e-testing",
     contributionId: "orange-e2e",
-    title: "From days of manual regression to under an hour",
+    title: "From days of manual regression to about an hour",
     description:
-      "How I introduced automated end-to-end testing at Orange Polska, trained two testers, and cut regression checks from days to under an hour.",
+      "How I introduced automated end-to-end testing at Orange Polska, trained two testers, and cut regression checks from days to about an hour.",
     company: "Orange Polska",
     role: "I introduced automated end-to-end testing, built the test architecture and trained two testers",
     period: "Since 2022",
@@ -120,9 +120,9 @@ const polish: Record<
     },
   },
   "orange-e2e-testing": {
-    title: "Od dni ręcznej regresji do mniej niż godziny",
+    title: "Od dni ręcznej regresji do około godziny",
     description:
-      "Jak wprowadziłem automatyczne testy end-to-end w Orange Polska, przeszkoliłem dwie osoby i skróciłem regresję z dni do mniej niż godziny.",
+      "Jak wprowadziłem automatyczne testy end-to-end w Orange Polska, przeszkoliłem dwie osoby i skróciłem regresję z dni do około godziny.",
     role: "Wprowadziłem automatyzację E2E, zbudowałem architekturę testów i przeszkoliłem dwie osoby",
     period: "Od 2022",
     team: "Ja, nowo zatrudniony tester automatyzujący i tester manualny przechodzący do automatyzacji",

src/design/skin-terminal.css

@@ -46,6 +46,8 @@ html.skin-terminal {
   --band-node-active: color-mix(in srgb, var(--accent) 12%, transparent);
   --band-panel: var(--surface);
   --teal-band: var(--canvas);
+  --building-card: var(--surface);
+  --product-card: var(--surface);
 }
 
 @media (prefers-color-scheme: dark) {

src/i18n/profile.ts

@@ -89,7 +89,7 @@ const polish: Profile = {
       ...profile.contributions[1],
       topic: "Jakość i mentoring",
       period: "Od 2022",
-      title: "Od dni ręcznej regresji do mniej niż godziny",
+      title: "Od dni ręcznej regresji do około godziny",
       summary:
         "Zamiast pisać propozycję, zbudowałem działający zestaw testów Cypress. Mój przełożony zatrudnił testera automatyzującego; przeszkoliłem dwie osoby i przez pierwszy rok przeglądałem każdą zmianę.",
       outcome: "1–3 dni → około godziny w Orange TV GO.",

src/index.css

@@ -1,7 +1,7 @@
 /* The standard skin keeps the CV's palette and type (cv.devthomas.pl): warm
    paper, one teal accent, pill controls, 20px cards, and Fraunces / Geist /
    Geist Mono. Its own layout adds dark brand bands (header, hero, approach,
-   the "Now building" card) that stay dark in both themes, and a teal contact
+   the Car Brain card in light mode), and a teal contact
    band. The Terminal skin redefines every token it uses. */
 :root {
   --canvas: #f7f5f0;
@@ -25,6 +25,8 @@
   --band-node-active: #17292b;
   --band-panel: #121918;
   --teal-band: #0f6b75;
+  --building-card: var(--surface);
+  --product-card: var(--band);
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
@@ -62,10 +64,14 @@
     --band: #0a0e0d;
     --band-line: #2a3531;
     color-scheme: dark;
+    --building-card: var(--band);
+    --product-card: var(--surface);
   }
 }
 
 html.dark-theme {
+  --building-card: var(--band);
+  --product-card: var(--surface);
   --canvas: #0f1413;
   --surface: #161d1b;
   --text: #e8eeeb;

src/sections/Background/Background.css

@@ -37,7 +37,7 @@
 .timeline-period {
   color: var(--text-secondary);
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: 13px;
   letter-spacing: 0.04em;
 }
 

src/sections/Now/NowSection.tsx

@@ -16,7 +16,7 @@ const Building = ({ locale = "en" }: { locale?: Locale }) => {
     <article
       id={building.id}
       aria-labelledby={headingId}
-      className="now-card now-card--building band"
+      className="card now-card now-card--building"
     >
       <p className="now-meta" data-pid={building.number}>
         <span className="eyebrow now-eyebrow">{building.eyebrow}</span>
@@ -73,7 +73,7 @@ const IndependentProduct = ({
   <article
     id="car-brain"
     aria-labelledby="car-brain-heading"
-    className="card now-card now-card--shipped"
+    className="card band now-card now-card--shipped"
   >
     <div className="now-shipped-copy">
       <p className="now-meta">

src/sections/Now/now.css

@@ -15,7 +15,8 @@
 }
 
 .now-card--building {
-  border: 1px solid var(--band-line);
+  background: var(--building-card);
+  border: 1px solid var(--separator);
 }
 
 .now-meta {
@@ -40,7 +41,7 @@
   border-radius: var(--radius-control);
   color: var(--text-soft);
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 12px;
   letter-spacing: 0.04em;
 }
 
@@ -54,7 +55,7 @@
 .now-years {
   color: var(--text-secondary);
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 13px;
   letter-spacing: 0.04em;
 }
 
@@ -68,7 +69,7 @@
 }
 
 .now-card--building .now-title {
-  color: var(--band-strong);
+  color: var(--text);
 }
 
 .now-text {
@@ -104,7 +105,7 @@
 
 .pipeline-step.is-key {
   border-color: var(--accent);
-  color: var(--band-strong);
+  color: var(--text);
 }
 
 .now-link {
@@ -116,6 +117,7 @@
 .now-card--shipped {
   display: grid;
   gap: 24px;
+  background: var(--product-card);
 }
 
 .now-shipped-copy {
@@ -264,7 +266,7 @@
 .now-shot-caption {
   max-width: 30ch;
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.5;
   text-align: center;
 }