/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this file may be
reproduced, modified or stored in a retrieval system, or transmitted in any form or by any
means, electronic, mechanical, photocopying, recording or otherwise, without the prior
written permission of Toptronic® Limited.
For copyright inquiries: jacques@toptronic.com

Generated/Updated on: 2026-08-06T19:30:00+1000

styles_005.css — file 5 of 6 (loaded after styles_004.css)

WHAT this file does:
  Styles the About page pieces (the big statement, the heritage strip, the
  company timeline), the Contact page card with its facts list, and the 404
  "page not found" page.

WHY it works this way (for Ryan, 14, and Ava, 9):
  The timeline is like a row of birthday candles: each one is a year with a
  label under it — 1990 when Toptronic® was founded, the hardware years, and
  2026 when Toptronic.ai® and TPEE arrived. The newest candle has a red dot,
  like "you are here". The 404 page is the friendly dead-end sign: it says
  "this page does not exist" in BOTH English and French, because a lost
  visitor might not have picked a language yet — so we speak both at once.
*/

/* ============================================================================
   SECTION 21 — ABOUT: STATEMENT (design §3 / D7)
   The canonical sentence, said once, big and calm:
   "Toptronic.ai® builds utilities and tools that help you learn and perform
   better with your LLMs."
   ========================================================================== */

.about-statement {
  padding-block: var(--sp-8);
}

.statement {
  font-size: var(--fs-statement);   /* 30→40px fluid — the statement step
                                       added in session 0034 (typography F6) */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  max-width: 30ch;                  /* was 24ch: a statement, not a tower (0034) */
  text-wrap: balance;
}

/* ============================================================================
   SECTION 22 — ABOUT: HERITAGE STRIP (home + about)
   A quiet band connecting Toptronic.ai® to Toptronic® Ltd (founded 1990).
   Hairline separators above and below — a strip, not a shout.
   ========================================================================== */

.home-heritage,
.about-heritage,
.about-founder {
  padding-block: var(--sp-8);
}

.heritage-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  /* No top border: the strip now sits directly under the hero, whose own
     bottom hairline already separates them — two lines would double up
     (session 0034 move, decision R4c). */
  border-bottom: 1px solid var(--clr-hairline);
}

/* The copy block: trust display line + heritage sentence. The logical
   margin pushes the About button to the far side — flips itself in RTL. */
.heritage-copy {
  max-width: 62ch;
  margin-inline-end: auto;
}

/* The trust display line (M1 canonical form, session 0034 R2): the one
   sentence the whole review wave agreed the site was missing. Whole-line
   display styling — spans inside translated strings are impossible because
   the i18n engine rewrites textContent (verified fact V3). */
.trust-line {
  font-size: clamp(1.375rem, 2.5vw + 0.5rem, 1.875rem); /* 22→30px fluid:
     display weight without shouting (decision 0034 R5) */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--clr-text);
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}

.heritage-strip p {
  color: var(--clr-muted);
  font-size: var(--fs-body);
  max-width: 62ch;
}

.heritage-strip a:not(.btn) {
  color: var(--clr-yellow);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.heritage-strip a:not(.btn):hover {
  color: var(--clr-yellow-hover);
  border-bottom-color: var(--clr-yellow-hover);
}

/* About page secondary button row (about-links, D7). */
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ============================================================================
   SECTION 23 — ABOUT: TIMELINE STRIP (design §3.6)
   Three milestones on a hairline: 1990 founding → 2000s hardware & engineering
   → 2026 Toptronic.ai® + TPEE (dates per decision D4 — the old PLWS heritage
   year appears NOWHERE on this site; Toptronic®'s founding year is 1990).
   Yellow dots on the line; a RED dot marks the current year. The red dot is
   an 8px graphic, not text, so the red contrast rule is not violated.
   Dots never pulse or animate (binding).
   ========================================================================== */

.timeline-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  margin-block: var(--sp-7);
}

/* The 1px connector line behind the dots. */
.timeline-strip::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-6) + 4px);     /* vertically centered on the 8px dots */
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--clr-hairline);
}

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
}

/* The 8px dot on the line, yellow by default. The strip pads down --sp-6
   (48px) before the grid items, and the connector line sits 4px lower, so
   the dot's top edge at 0 lines its center up exactly with the line. */
.timeline-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--clr-yellow);
}

/* The current year gets the red spark dot (decorative graphic — allowed).
   The milestones run oldest → newest (1990 → 2000s → 2026), so the LAST
   item is always the current year — no extra class needed in the HTML. */
.timeline-item:last-child::before {
  background-color: var(--clr-red);
}

.timeline-year {
  font-size: var(--fs-h2);          /* 30px/700 "display-ish" (design §3.6) */
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-yellow);
  letter-spacing: -0.02em;
}

.timeline-label {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--clr-text);
  max-width: 26ch;
}

/* ============================================================================
   SECTION 24 — CONTACT CARD (design §3.7)
   One centered card, max 560px: a hello, a facts list, and the email button.
   ========================================================================== */

.contact-card-wrap {
  display: flex;
  justify-content: center;
  padding-block: var(--sp-8);
}

.contact-card {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;              /* centers inside the .container (0034) */
  background-color: var(--clr-surface);
  border: 1px solid #2B2B2B;        /* brighter separation hairline (0034) */
  border-radius: var(--r-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--sh-1);
  padding: var(--sp-6);
}

.contact-card h1 {
  margin-bottom: var(--sp-3);
}

.contact-card > p {
  color: var(--clr-muted);
  margin-bottom: var(--sp-5);
}

/* ---- 24.1 Contact facts (dl: dt/dd pairs) --------------------------------------
   Facts like "Email: jacques@toptronic.com" — the term is the quiet label,
   the description is the answer. */
.contact-facts {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--clr-hairline);
}

.contact-facts dt {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-muted);
}

.contact-facts dd {
  font-size: var(--fs-body);
  color: var(--clr-text);
}

.contact-facts dd a {
  color: var(--clr-yellow);
}

.contact-facts dd a:hover {
  color: var(--clr-yellow-hover);
}

/* The mailto button fills the card width on small screens. */
.contact-card .btn-primary {
  width: 100%;
}

/* The quiet note under the button (e.g. about reply times or a future form). */
.form-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--clr-muted);
}

/* ---- 24.2 Form inputs (reserved for the optional simple form, design §3.7) -----
   48px tall, raised surface, visible label ALWAYS above the input — never a
   placeholder pretending to be a label. Focus: yellow border + global ring. */
.contact-card label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: var(--sp-2);
}

.contact-card input,
.contact-card textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-2);
  color: var(--clr-text);
  transition: border-color var(--t-fast) var(--ease);
}

.contact-card textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-card input:focus,
.contact-card textarea:focus {
  border-color: var(--clr-yellow);
  outline: none;                    /* the :focus-visible ring (003) still shows */
}

.contact-card input:focus-visible,
.contact-card textarea:focus-visible {
  outline: 3px solid var(--clr-yellow);
  outline-offset: 3px;
}

/* ============================================================================
   SECTION 25 — 404 PAGE (design §3.10)
   Dark, centered, bilingual by design: the EN block then the FR block are
   both hardcoded (D7) — a lost visitor may have no language cookie, so the
   page speaks both. No animation. Logo badge above the giant yellow 404.
   ========================================================================== */

.nf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: calc(100vh - var(--header-h));
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
  gap: var(--sp-4);
}

.nf img {
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-4);
}

/* The giant code: ≥64px yellow display type — large-text AA-safe. */
.nf-code {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--clr-yellow);
}

.nf h1 {
  font-size: var(--fs-h2);
}

.nf p {
  color: var(--clr-muted);
  max-width: 48ch;
}

.nf .btn {
  margin-top: var(--sp-4);
}

/* The two language blocks are separated by a quiet hairline. */
.nf-lang-block + .nf-lang-block {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--clr-hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.nf-lang-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

/* End of styles_005.css — statement, heritage, timeline, contact, 404.
   Next: styles_006.css (breakpoints, reveal, CJK guards, reduced-motion net). */