/*
© 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_003.css — file 3 of 6 (loaded after styles_002.css)

WHAT this file does:
  Styles the buttons (solid yellow and outline), the keyboard focus ring that
  shows you where you are when tabbing, the big hero at the top of the home
  page, and the featured TPEE product card with its code sample and fact list.

WHY it works this way (for Ryan, 14, and Ava, 9):
  Buttons are big — at least 48px tall — so fingers on phones never miss. The
  yellow one is the "do the thing" button; the outline one is the "learn more"
  button. The focus ring is a yellow outline that appears ONLY when you use a
  keyboard, like a highlighter following your Tab key — mouse users never see
  it, keyboard users always do. The hero is the first thing you see: a big
  promise, a yellow button, and the logo badge with a thin red arc behind it —
  the arc is pure decoration, like a spark drawn on the stage.
*/

/* ============================================================================
   SECTION 12 — BUTTONS (design §3.9)
   .btn is the shared shape; .btn-primary is the yellow fill, .btn-secondary
   the outline. All interactive elements on this site are ≥44×44px.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;                 /* touch target: design asks 48, WCAG 44 */
  padding: 14px 28px;               /* exact spec values (design §3.9) */
  font-size: var(--fs-button);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

/* ---- 12.1 Primary: the yellow "do the thing" button -------------------------
   Ink text on yellow is 14.5:1 — AA by a wide margin. A subtle warm glow
   (--sh-yellow) lifts it off the dark stage without going neon. */
.btn-primary {
  background-color: var(--clr-yellow);
  color: var(--clr-ink);
  border: 1.5px solid var(--clr-yellow);
  box-shadow: var(--sh-yellow);
}

.btn-primary:hover {
  background-color: var(--clr-yellow-hover);
  border-color: var(--clr-yellow-hover);
  color: var(--clr-ink);
}

.btn-primary:active {
  transform: translateY(1px);       /* the only "press" feedback — no bounce */
}

/* ---- 12.2 Secondary: the quiet outline button --------------------------------
   Yellow border and text on transparent; hover gets a whisper of yellow fill.
   On light sections it switches to the AA-safe ink-yellow (styles_004.css). */
.btn-secondary {
  background-color: transparent;
  color: var(--clr-yellow);
  border: 1.5px solid var(--clr-yellow);
}

.btn-secondary:hover {
  background-color: rgba(240, 224, 16, .08);
  color: var(--clr-yellow);
}

.btn-secondary:active {
  transform: translateY(1px);
}

/* ============================================================================
   SECTION 13 — GLOBAL FOCUS-VISIBLE RING (design §3.9)
   The keyboard user's highlighter. 3px yellow, offset 3px so there is a dark
   gap between a yellow button and its ring — always visible, never removed.
   `:focus:not(:focus-visible)` resets only the mouse-focus ring, so clicking
   does not leave a halo but tabbing always shows one.
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--clr-yellow);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   SECTION 14 — HERO (design §3.2, home page top)
   Full viewport minus the 72px header (min 560px), dark stage, big promise.
   ========================================================================== */

.hero {
  position: relative;               /* kept for safety; the arc now anchors
                                       to .hero-visual inside the container */
  display: flex;
  align-items: center;
  min-height: max(560px, calc(100vh - var(--header-h)));
  padding-block: var(--sp-7);       /* hero keeps its own tighter rhythm —
                                       the blanket section padding rule now
                                       excludes .hero (styles_004.css, 0034) */
  background-color: var(--clr-bg);
  border-bottom: 1px solid var(--clr-hairline);
  overflow: hidden;                 /* decoration may bleed, never scroll */
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-7);
  padding-block: 0;                 /* rhythm comes from .hero itself (0034) */
}

/* The copy column: eyebrow, headline, subline, two CTAs. */
.hero-copy {
  max-width: 640px;
}

.hero-copy h1 {
  font-size: var(--fs-display);     /* 40→72px fluid, hero h1 only */
  line-height: 1.1;
  letter-spacing: -0.03em;          /* display tightening (session 0034) */
  margin-bottom: var(--sp-4);
}

.hero-sub {
  font-size: var(--fs-body-l);
  line-height: 1.65;
  color: var(--clr-text);           /* full text color: this sentence is the
                                       product's introduction, not a caption
                                       (session 0034, art-direction F7) */
  max-width: 56ch;
  margin-bottom: var(--sp-6);
}

/* The two calls to action side by side, wrapping on small screens. */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ---- 14.1 The visual column: badge + concentric red arc --------------------
   .hero-visual centers the badge; the arc is sized OFF the badge (115%) so it
   echoes the badge's own red ring at every width and every locale's copy
   length (session 0034, art-direction F11). Being centered, it needs no
   RTL mirror rule at all — direction-neutral by construction. */
.hero-visual {
  position: relative;               /* the arc anchors to this box */
  display: grid;
  place-items: center;
}

.hero-badge {
  width: min(40vw, 480px);
  height: auto;
  margin-inline: auto;
}

.hero-arc {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;             /* centered on the badge, all directions */
  width: 115%;
  aspect-ratio: 1;
  border: 3px solid var(--clr-red);
  border-radius: 50%;
  /* Show only an arc of the ring: mask the bottom-left quadrant away. */
  border-left-color: transparent;
  border-bottom-color: transparent;
  rotate: -20deg;
  opacity: 0.9;
  pointer-events: none;             /* decoration never eats clicks */
}

/* ============================================================================
   SECTION 15 — TPEE FEATURED CARD (design §3.3)
   The star of the Tools page (and home preview). The brand-nod radius (--r-4)
   and a 3px yellow top edge mark it as featured.
   ========================================================================== */

.home-tpee,
.tools-tpee {
  padding-block: var(--sp-8);
}

/* NOTE on specificity: the featured card is <article class="card tpee-card">.
   The shared .card base lives in styles_004.css, which loads AFTER this file,
   so these rules use .card.tpee-card (two classes) to guarantee the featured
   overrides (radius --r-4, 3px yellow top edge, deeper padding) always win,
   no matter the file order. */
.card.tpee-card {
  background-color: var(--clr-surface);
  border: 1px solid #2B2B2B;            /* brighter separation hairline (0034) */
  border-top: 3px solid var(--clr-yellow);   /* the featured marker */
  border-radius: var(--r-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--sh-1);
  padding: var(--sp-6);
  max-width: 860px;
  transition: box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}

/* Hover lift: pointer devices only — touch screens have no hover to lift. */
@media (hover: hover) {
  .card.tpee-card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--sh-2);
    transform: translateY(-2px);
  }
}

.card.tpee-card h2,
.card.tpee-card h3 {
  margin-bottom: var(--sp-3);
}

.tpee-card .desc {
  color: var(--clr-muted);
  max-width: 62ch;
  margin-bottom: var(--sp-5);
}

.tpee-card .btn {
  margin-top: var(--sp-5);
}

/* ---- 15.1 Code sample ---------------------------------------------------------
   A short mono snippet showing what TPEE does. Raised surface, rounded. */
.code-sample {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.5;
  background-color: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  overflow-x: auto;
  color: var(--clr-text);
}

.code-sample code {
  font-family: inherit;
}

/* ---- 15.2 Fact list (Tools page: four quick facts about TPEE) -----------------
   Yellow square markers — a graphic use of yellow, always paired with full
   --clr-text list text so contrast stays AA. */
.fact-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.fact-list li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--clr-text);
  line-height: 1.5;
}

.fact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--clr-yellow);
  border-radius: 2px;
}

/* End of styles_003.css — buttons, focus ring, hero, TPEE featured card.
   Next: styles_004.css (card grid, guide cards, chips, light sections). */