/* Andiamo Toolbox — design system v3 (2026-09-05; v1 and v2 shipped the same day). Every colour in the Toolbox is a custom property declared here and applied on . theme.js writes both attributes before first paint. Two axes: MODE light / dark. Moves every surface, ink and rule token. SCHEME "tinted" reach (v2): the scheme owns --accent AND every button fill (--btn), the illustration strokes, eyebrows and section labels, the small-card icons, a faint page tint (--bg), the card rings and hairlines (--ring, --rule), the dark-mode card ground, and the second word of the wordmark (--accent-dark, readable on the black header). Text colours, --ring-strong and the #0C0E12 header never move. No green anywhere. Locked by the design: square corners, no shadows, no gradients, 1.5px rings, Archivo for titles and body, IBM Plex Mono for eyebrows, labels, badges and buttons, no coloured top borders on any card. */ /* ------------------------------------------------------------------ tokens */ :root { --radius: 0; --tb-col: min(1040px, max(100%, 78vw)); --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* LIGHT, default scheme andiamo. Per-scheme values below override --accent, --accent-dark, --bg, --ring (and so --rule) and, in dark mode, --card. */ --bg: #EEF1F6; --card: #FFFFFF; --ring: #B8C3D6; --ring-strong: #8F9BAA; --header: #0C0E12; --ink: #111417; --muted: #5B6470; --rule: var(--ring); --danger: #8B2A2A; /* SCHEME accent (light value) and the scheme's DARK accent, kept in both modes for the wordmark's second word on the black header. */ --accent: #24314A; --accent-dark: #8FA5C9; --accent-tint: color-mix(in srgb, var(--accent) 10%, var(--card)); /* Every button fill is the scheme accent. Text on it is white in light mode and ink in dark mode, because the dark accents are pale. */ --btn: var(--accent); --btn-text: #FFFFFF; --on-fill: var(--btn-text); /* header chrome (the header is #0C0E12 in both modes and every scheme) */ --header-fg: #FFFFFF; --header-muted: #6E7683; --header-btn-fg: #C9CDD4; --header-btn-border: #46505D; } :root[data-mode="dark"] { --bg: #0F1319; --card: #161B23; --ring: #2C3644; --ring-strong: #46505D; --ink: #E8ECF1; --muted: #9AA5B3; --btn-text: #111417; --accent: #8FA5C9; } /* Exactly five schemes. light accent / dark accent / light bg / dark bg / dark card / light ring / dark ring */ :root[data-scheme="ocean"] { --accent: #1E6BB8; --accent-dark: #5AA3E8; --bg: #EDF3FA; --ring: #B3CCE8; } :root[data-scheme="ocean"][data-mode="dark"] { --accent: #5AA3E8; --bg: #0D141C; --card: #141C26; --ring: #26364A; } :root[data-scheme="slate"] { --accent: #526B82; --accent-dark: #9FB3C6; --bg: #EFF2F5; --ring: #BCC8D4; } :root[data-scheme="slate"][data-mode="dark"] { --accent: #9FB3C6; --bg: #0F1317; --card: #171C21; --ring: #2C363F; } :root[data-scheme="plum"] { --accent: #5C3D6E; --accent-dark: #B08AC4; --bg: #F3EFF5; --ring: #CDBFD6; } :root[data-scheme="plum"][data-mode="dark"] { --accent: #B08AC4; --bg: #14101A; --card: #1C1622; --ring: #352A3F; } :root[data-scheme="ember"] { --accent: #A3472B; --accent-dark: #E0825A; --bg: #F7F1EC; --ring: #E0C4B8; } :root[data-scheme="ember"][data-mode="dark"] { --accent: #E0825A; --bg: #17110F; --card: #1F1714; --ring: #3D2B24; } /* ------------------------------------------------------------------ shell */ * { box-sizing: border-box; } body.tb { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; } body.tb :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.tb ::selection { background: var(--accent); color: var(--on-fill); } .tb-header { height: 56px; background: var(--header); display: flex; align-items: center; gap: 12px; padding: 0 22px; position: sticky; top: 0; z-index: 40; } .tb-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .tb-brand img { height: 22px; width: auto; display: block; } .tb-wordmark { font: 500 15px var(--font); letter-spacing: -.01em; color: var(--header-fg); white-space: nowrap; } /* The second word takes the scheme's DARK accent: readable on the black header in both modes. */ .tb-wordmark span { font-weight: 400; color: var(--accent-dark); } .tb-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Header buttons are the outlined small variant of the system button, drawn for the black ground: pale type, a --ring-strong edge, accent on hover. */ .tb-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--header-btn-fg); background: transparent; border: 1.5px solid var(--header-btn-border); border-radius: 0; padding: 7px 12px; cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap; transition: border-color .15s linear, color .15s linear; } .tb-btn:hover { border-color: var(--accent); color: var(--header-fg); } .tb-btn svg { width: 11px; height: 11px; } /* The avatar takes the scheme accent. */ .tb-avatar { width: 30px; height: 30px; border-radius: 0; background: var(--accent); color: var(--on-fill); display: inline-flex; align-items: center; justify-content: center; font: 600 11px var(--mono); letter-spacing: .06em; flex: none; } .tb-avatar svg { width: 15px; height: 15px; } .tb-body { padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 40px) 96px; } .tb-col, .tb-grid, .tb-head { max-width: var(--tb-col, 1040px); margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------- type */ /* Eyebrows and section labels are the scheme's: --accent, not muted. */ .tb-eyebrow, .tb-micro { font: 400 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; } .tb-section-label { font: 400 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: clamp(34px, 3.4vw, 52px) 0 clamp(12px, 1.1vw, 16px); } /* Page head: eyebrow, Archivo h1, lede, one hairline. Every page. */ .tb-head { margin-bottom: clamp(20px, 2vw, 28px); } .tb-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; } .tb-h1 { font: 500 clamp(26px, 2.4vw, 34px)/1.1 var(--font); letter-spacing: -.025em; color: var(--ink); margin: 8px 0 0; } .tb-lede { font: 400 15px/1.55 var(--font); color: var(--muted); margin: 10px 0 0; max-width: 62ch; } /* The recruiting landing carries its tagline on the right of the title row. */ .tb-head-row .tb-lede { margin: 0; text-align: right; max-width: 40ch; } .tb-rule { height: 1px; background: var(--rule); border: 0; margin: 20px 0 0; } /* ------------------------------------------------------------- buttons */ .tb-button, .tb-cta, .tb-chip-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--btn); color: var(--btn-text); border: 1.5px solid var(--btn); border-radius: 0; font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: border-color .15s linear, color .15s linear, background-color .15s linear; } .tb-button.is-outline, .tb-cta.is-outline, .tb-chip-btn.is-outline { background: transparent; color: var(--ink); border-color: var(--ring-strong); } .tb-button.is-outline:hover, .tb-cta.is-outline:hover, .tb-chip-btn.is-outline:hover { border-color: var(--accent); color: var(--accent); } .tb-button.is-small { font-size: 11px; padding: 7px 12px; gap: 8px; } .tb-arrow { display: inline-block; transition: transform .18s cubic-bezier(.2,.8,.2,1); } .tb-button:hover .tb-arrow, .tb-card:hover .tb-arrow, .tb-chip:hover .tb-arrow { transform: translateX(4px); } /* -------------------------------------------------------------- badges */ .tb-tag, .tb-tag-soon, .tb-chip-soon { display: inline-block; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--ring-strong); border-radius: 0; padding: 3px 8px; line-height: 1.3; flex: none; white-space: nowrap; } .tb-tag-restricted { color: var(--danger); border-color: var(--danger); } .tb-tag-req { background: var(--accent); border-color: var(--accent); color: var(--on-fill); } .tb-tag-group { display: flex; align-items: center; gap: 6px; flex: none; } /* --------------------------------------------------------- big cards */ .tb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); } @media (max-width: 640px) { .tb-grid { grid-template-columns: 1fr; } } .tb-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--card); border: 1.5px solid var(--ring); border-radius: 0; cursor: pointer; transition: border-color .15s linear; } /* WHOLE-CARD CLICK: the card IS the link. Hover moves the ring to the accent and nudges the arrow; nothing else. Keyboard focus draws the accent ring outside the card. The restricted tile still routes to its page, so it keeps the pointer and the hover ring. */ .tb-card:hover { border-color: var(--accent); } .tb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .tb-card-art { padding: clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px) 0; } .tb-ink { width: 130px; height: 90px; display: block; overflow: visible; } .tb-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: clamp(14px, 1.4vw, 18px) clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px); } .tb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; align-self: stretch; } /* A card with a badge and a card without one start their titles on the same line. */ .tb-card-head, .tb-card-body > .tb-micro { min-height: 22px; display: flex; align-items: center; } .tb-card-title { font: 500 clamp(19px, 1.55vw, 24px)/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 10px 0 0; } .tb-card-sub { font: 400 14px/1.55 var(--font); color: var(--muted); margin: 8px 0 0; } /* Title and description live in .tb-card-text; the button follows with margin-top:auto, so every button in a row sits on the same baseline. */ .tb-card-text { margin-bottom: 22px; } .tb-cta { margin-top: auto; } /* ------------------------------------------------- the ambient system (v3) */ /* THE RULE: every stroke icon inside a card animates continuously, forever, by SELECTOR. A card container (.tb-card / .rc-card / .tb-chip / .rc-chip) plus an svg.illo (the 130x90 illustration) or an svg.icon (the 24px small-card icon) is all a new card needs; it inherits the three loops below with no per-card CSS. tests/ambient_guard_checks.mjs fails the build if a card ships a static svg. Every stroked element carries pathLength="1", so one dash unit is one whole path whatever its real length; an offset of 1.1 hides it (the round cap sits just past the start) and 0 shows it. A. RE-TRACE 7s cycle: redraw (.9s big / .6s small) -> hold fully drawn -> fade to 35% over .4s -> linger dim -> the loop boundary resets the offset and the drawing redraws itself. The load-time draw-on is simply the first pass. B. FLOAT translateY 0 -> -7px (big) / -3px (small), 4s ease-in-out, infinite alternate. C. DOT PULSE (big only, the --ink dot) scale 1 -> 1.5 with opacity 1 -> .55, 2.2s ease-in-out infinite, about its own centre. Phase: --enter is set per grid slot by nth-child (big 0/210/420/630ms, small 0/300/600ms), so a new card takes an offset automatically and nothing moves in lockstep. Hover is the ring and the arrow only; the loops never pause. */ .tb-grid > :nth-child(1) { --enter: 0ms; } .tb-grid > :nth-child(2) { --enter: 210ms; } .tb-grid > :nth-child(3) { --enter: 420ms; } .tb-grid > :nth-child(4) { --enter: 630ms; } .tb-chips > :nth-child(1) { --enter: 0ms; } .tb-chips > :nth-child(2) { --enter: 300ms; } .tb-chips > :nth-child(3) { --enter: 600ms; } /* A. re-trace. 7s = 100%. Big: redraw .9s (12.857%), hold to 5.5s (78.571%), fade to 5.9s (84.286%), dim linger to 7s. Small: redraw .6s (8.571%). */ @keyframes tb-retrace-lg { 0% { stroke-dashoffset: 1.1; opacity: .35; } 12.857% { stroke-dashoffset: 0; opacity: 1; } 78.571% { stroke-dashoffset: 0; opacity: 1; } 84.286% { stroke-dashoffset: 0; opacity: .35; } 100% { stroke-dashoffset: 0; opacity: .35; } } @keyframes tb-retrace-sm { 0% { stroke-dashoffset: 1.1; opacity: .35; } 8.571% { stroke-dashoffset: 0; opacity: 1; } 78.571% { stroke-dashoffset: 0; opacity: 1; } 84.286% { stroke-dashoffset: 0; opacity: .35; } 100% { stroke-dashoffset: 0; opacity: .35; } } /* B. float */ @keyframes tb-float-lg { from { transform: translateY(0); } to { transform: translateY(-7px); } } @keyframes tb-float-sm { from { transform: translateY(0); } to { transform: translateY(-3px); } } /* C. dot pulse */ @keyframes tb-fade { to { opacity: 1; } } @keyframes tb-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } } /* the big illustration */ .tb-card svg.illo, .rc-card svg.illo { animation: tb-float-lg 4s ease-in-out var(--enter, 0ms) infinite alternate; } .tb-card svg.illo .tb-draw, .rc-card svg.illo .tb-draw { stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; animation: tb-retrace-lg 7s cubic-bezier(.4, 0, .35, 1) var(--enter, 0ms) infinite; } /* the strokes of one drawing trace in sequence, 150ms apart */ .tb-card svg.illo .tb-draw:nth-of-type(2), .rc-card svg.illo .tb-draw:nth-of-type(2) { animation-delay: calc(var(--enter, 0ms) + 150ms); } .tb-card svg.illo .tb-draw:nth-of-type(3), .rc-card svg.illo .tb-draw:nth-of-type(3) { animation-delay: calc(var(--enter, 0ms) + 300ms); } .tb-card svg.illo .tb-draw:nth-of-type(4), .rc-card svg.illo .tb-draw:nth-of-type(4) { animation-delay: calc(var(--enter, 0ms) + 450ms); } .tb-card svg.illo .tb-dot, .rc-card svg.illo .tb-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: tb-fade .3s linear calc(var(--enter, 0ms) + 900ms) forwards, tb-pulse 2.2s ease-in-out calc(var(--enter, 0ms) + 1300ms) infinite; } /* the 24px small-card icon: every child shape is a stroke */ .tb-chip svg.icon, .rc-chip svg.icon { overflow: visible; animation: tb-float-sm 4s ease-in-out var(--enter, 0ms) infinite alternate; } .tb-chip svg.icon > *, .rc-chip svg.icon > * { stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; animation: tb-retrace-sm 7s cubic-bezier(.4, 0, .35, 1) var(--enter, 0ms) infinite; } @media (prefers-reduced-motion: reduce) { .tb-card svg.illo, .rc-card svg.illo, .tb-chip svg.icon, .rc-chip svg.icon, .tb-card svg.illo .tb-draw, .rc-card svg.illo .tb-draw, .tb-chip svg.icon > *, .rc-chip svg.icon > *, .tb-card svg.illo .tb-dot, .rc-card svg.illo .tb-dot { animation: none !important; } .tb-card svg.illo .tb-draw, .rc-card svg.illo .tb-draw, .tb-chip svg.icon > *, .rc-chip svg.icon > * { stroke-dashoffset: 0; opacity: 1; } .tb-card svg.illo .tb-dot, .rc-card svg.illo .tb-dot { opacity: 1; } .tb-arrow, .tb-card, .tb-chip, .tb-button, .tb-btn { transition: none !important; } } /* ------------------------------------------------------- small cards */ .tb-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); } @media (max-width: 900px) { .tb-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .tb-chips { grid-template-columns: 1fr; } } /* Title, description, then the button pinned to the foot with margin-top:auto, so three cards of unequal copy line their actions up on one row. */ .tb-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--card); border: 1.5px solid var(--ring); border-radius: 0; padding: clamp(18px, 1.7vw, 24px); font-family: var(--font); color: var(--ink); text-align: left; text-decoration: none; transition: border-color .15s linear; } /* A small card with a destination is ONE link (the card itself); its button is a visual. */ a.tb-chip { cursor: pointer; } a.tb-chip:hover { border-color: var(--accent); } a.tb-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .tb-chip svg { width: 24px; height: 24px; color: var(--accent); flex: none; } .tb-chip-title { display: block; font: 500 16px/1.3 var(--font); letter-spacing: -.01em; color: var(--ink); } .tb-chip-copy { font: 400 13.5px/1.55 var(--font); color: var(--muted); margin: 0; } .tb-chip-btn { margin-top: auto; align-self: flex-start; } .tb-chip-soon { margin-top: auto; } /* An intentionally empty grid slot, so a two-card row still reads as the 3-across grid. */ .tb-chip-empty { border: 1.5px dashed var(--ring); background: transparent; min-height: 120px; } /* ------------------------------------------------------- appearance gear */ .tb-gear { position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: var(--on-fill); display: flex; align-items: center; justify-content: center; transition: outline-color .15s linear; outline: 2px solid transparent; outline-offset: 2px; } .tb-gear:hover { outline-color: var(--ring-strong); } .tb-gear svg { width: 24px; height: 24px; } /* The panel is a card: follows the mode, sits above the gear. */ .tb-panel { position: fixed; right: 22px; bottom: 90px; z-index: 51; width: 272px; max-height: calc(100vh - 120px); overflow-y: auto; background: var(--card); color: var(--ink); border: 1.5px solid var(--ring); border-radius: 0; padding: 16px; } .tb-panel[hidden] { display: none; } .tb-panel-label { font: 400 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .tb-seg + .tb-panel-label { margin-top: 18px; } .tb-seg { display: flex; gap: 6px; } .tb-seg-btn { flex: 1; padding: 8px 0; cursor: pointer; background: transparent; color: var(--ink); border: 1.5px solid var(--ring-strong); border-radius: 0; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: border-color .15s linear, color .15s linear; } .tb-seg-btn:hover { border-color: var(--accent); color: var(--accent); } .tb-seg-btn[aria-checked="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-text); } .tb-theme { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 1.5px solid transparent; border-radius: 0; padding: 8px 8px; cursor: pointer; text-align: left; font: 400 13.5px var(--font); color: var(--ink); transition: border-color .15s linear; } .tb-theme:hover { border-color: var(--ring); } .tb-theme[aria-checked="true"] { border-color: var(--ring-strong); } .tb-swatch { display: flex; gap: 3px; flex: none; } .tb-swatch i { width: 10px; height: 10px; border-radius: 50%; display: block; border: 1px solid var(--ring); } .tb-theme-check { margin-left: auto; color: var(--accent); font: 600 12px var(--mono); visibility: hidden; } .tb-theme[aria-checked="true"] .tb-theme-check { visibility: visible; } .tb-panel-foot { font: 400 11px var(--mono); letter-spacing: .04em; color: var(--muted); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); } /* --------------------------------------------------------- section pages */ .tb-placeholder { max-width: var(--tb-col, 1040px); margin: 0 auto; } .tb-placeholder p { font: 400 15px/1.6 var(--font); color: var(--muted); margin: 18px 0 0; max-width: 62ch; } .tb-placeholder a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }