/* ============================================================ TradeForge design system — "Forged Industrial" (2026-08-03) Carbon dark, one ember accent, big confident type, mono spec-sheet details, Apple-grade restraint. Shared by every page on the site; page files add only page-specific styles. Type: Archivo (display) · Inter (body) · Fraunces italic (editorial accent) · IBM Plex Mono (data / labels) ============================================================ */ :root{ /* Declare the site as dark so browsers don't force-dark (auto-invert) it. Without this, Chrome's "Auto Dark Mode for Web Contents" treats these pages as light, inverts the light text, and renders black-on-black on already-dark pages. This also makes native UI (scrollbars, form controls, date pickers) render dark to match. */ color-scheme: dark; /* --- core palette --- */ --carbon-950:#0a0b0d; --carbon-900:#0e1013; --carbon-850:#121418; --carbon-800:#171a1f; --steel-700:#232830; --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14); --ink:#f2f1ef; --ink-dim:rgba(242,241,239,0.62); /* 0.38 composited to 3.25:1 on every surface we paint — under the 4.5 body text needs — and this token carries .field label, input placeholders, .field .hint, .data-table th and .kpi .kpi-label. On the signup form that meant the label above each field, the placeholder inside it AND the hint below it were all sub-AA at roughly 10-12px: the exact text a stranger reads while deciding to hand over their business details. 0.50 is the value, chosen against the LIGHTEST surface we paint (--carbon-800 #171a1f), which is the hardest case: it measures 4.75:1 there and better everywhere else. 0.48 was tempting and fails — 4.48 — which is the kind of near miss that looks fine and is not. Going further, 0.56 reaches 5.6 but lands within 0.06 of --ink-dim and flattens the two tiers into one, which is the thing these tokens exist to keep apart. */ --ink-faint:rgba(242,241,239,0.50); --ember:#ff6a2b; --ember-hot:#ffa24b; --ember-deep:#c93f0f; --ember-grad:linear-gradient(115deg,#ff6a2b 0%,#ffb25e 100%); --ember-glow:rgba(255,106,43,0.35); --green:#5bd792; --amber:#f5b04c; --red:#f47f6f; /* --- type --- */ --font-display:'Archivo','Inter',-apple-system,'Helvetica Neue',sans-serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'IBM Plex Mono','SF Mono',ui-monospace,Menlo,monospace; --font-accent:'Fraunces',Georgia,serif; /* --- legacy aliases (older inline styles still reference these) --- */ --navy-950:var(--carbon-950); --navy-900:var(--carbon-900); --navy-800:var(--carbon-850); --navy-700:var(--carbon-800); --navy-600:var(--steel-700); --gold:#ffa24b; --gold-soft:#ff9a55; --ivory:var(--ink); --ivory-dim:var(--ink-dim); --glass-fill:rgba(255,255,255,0.03); --glass-fill-strong:rgba(255,255,255,0.05); --glass-border:var(--line); } *{box-sizing:border-box; margin:0; padding:0;} a{color:inherit; text-decoration:none;} /* ── keyboard focus ─────────────────────────────────────────────────────── There was NO focus style on any link or button anywhere on the site: zero :focus-visible rules, and the only :focus rules targeted form inputs. A keyboard user could see where they were inside a text field and nowhere else — including "Create Free Account", the primary action on every page. :focus-visible rather than :focus, so a mouse click never leaves a ring behind. The browser decides, and it gets it right. outline-offset keeps the ring clear of the button's own gradient edge, and outline (not box-shadow) survives Windows High Contrast Mode, where box-shadow is dropped entirely. */ a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; } /* The gold buttons sit ON the ember colour, so an ember ring would vanish into them. Ivory reads against both the button and the page behind it. */ .btn-gold:focus-visible, .cta-small:focus-visible, .cta-big:focus-visible{ outline-color:var(--ink); } /* ── skip link ──────────────────────────────────────────────────────────── Without one, every keyboard user tabs the entire header on every page before reaching content. Hidden until focused, then it lands top-left. */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--carbon-800); color:var(--ink); padding:12px 18px; border:1px solid var(--ember); border-radius:0 0 10px 0; font-size:0.9rem; font-weight:600; } .skip-link:focus{ left:0; } ::selection{background:rgba(255,106,43,0.35); color:#fff;} html{scroll-behavior:smooth;} html,body{ min-height:100%; background:var(--carbon-950); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } /* Single restrained ambient glow at the top of every page. */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 480px at 50% -12%, rgba(255,106,43,0.10), transparent 65%), radial-gradient(1400px 900px at 85% 115%, rgba(35,40,48,0.5), transparent 60%); } /* Legacy blob/noise elements still present in page markup — neutralized. */ .blob{display:none;} .noise-veil{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5; background-image:radial-gradient(rgba(255,255,255,0.022) 1px, transparent 1px); background-size:3px 3px; } .wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 28px;} /* ============================ type ============================ */ h1,h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:1.04; text-wrap:balance; } h1{font-size:clamp(2.6rem,6vw,4.4rem); margin-bottom:22px;} h2{font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:16px;} h3{font-family:var(--font-display); font-size:1.06rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px;} .accent-i{font-family:var(--font-accent); font-style:italic; font-weight:550; letter-spacing:-0.01em;} .gold-text,.ember-text{ background:var(--ember-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--ember-hot); margin-bottom:20px; } .eyebrow::before{content:""; width:26px; height:1px; background:var(--ember); opacity:0.8;} .eyebrow .dot{display:none;} .page-head .eyebrow{justify-content:center;} .page-head .eyebrow::after{content:""; width:26px; height:1px; background:var(--ember); opacity:0.8;} .page-head{text-align:center; max-width:720px; margin:0 auto 56px;} .page-head p{color:var(--ink-dim); font-size:1.06rem; line-height:1.7;} .lede{color:var(--ink-dim); font-size:1.06rem; line-height:1.75; max-width:760px; margin:0 auto 10px;} main.page{position:relative; z-index:1; padding:clamp(44px,6vw,76px) 0 100px;} .mono{font-family:var(--font-mono);} .mono-label{ font-family:var(--font-mono); font-size:0.68rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); } /* ========================= header / nav ======================= */ header.site-header{position:sticky; top:0; z-index:40; padding:0;} header.site-header .wrap{max-width:100%; padding:0;} .navbar{ display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,3vw,40px); padding:0 clamp(20px,4vw,44px); height:64px; background:rgba(10,11,13,0.72); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; } .brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:1.02rem; font-weight:800; letter-spacing:0.08em; color:var(--ink); text-transform:uppercase; white-space:nowrap; } .brand em{font-style:normal; color:var(--ember);} .brand .mark{ width:30px; height:30px; border-radius:7px; background:var(--ember-grad); display:flex; align-items:center; justify-content:center; color:#160b04; font-weight:800; font-size:0.78rem; letter-spacing:0; font-family:var(--font-display); box-shadow:0 0 18px rgba(255,106,43,0.35); } nav.links{display:flex; gap:clamp(16px,2.4vw,30px); font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim);} nav.links a{position:relative; padding:6px 0; white-space:nowrap; transition:color 0.2s ease;} nav.links a:hover{color:var(--ink);} nav.links a.active{color:var(--ember-hot);} nav.links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--ember); } @media (max-width:900px){ .navbar{flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:12px; row-gap:6px;} nav.links{order:3; width:100%; gap:14px 22px; flex-wrap:wrap;} } .account-link{font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); padding:8px 4px; white-space:nowrap; transition:color 0.2s ease;} .account-link:hover{color:var(--ink);} /* ========================== buttons =========================== */ .cta-small,.btn-gold{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:10px; border:none; cursor:pointer; background:var(--ember-grad); color:#160b04; font-family:var(--font-display); font-weight:700; font-size:0.9rem; letter-spacing:0.01em; box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 28px rgba(255,106,43,0.28); transition:transform 0.18s cubic-bezier(0.2,0.7,0.3,1.2), box-shadow 0.18s ease, filter 0.18s ease; } .cta-small:hover,.btn-gold:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 34px rgba(255,106,43,0.42); filter:brightness(1.05);} .cta-small:active,.btn-gold:active{transform:translateY(0); filter:brightness(0.97);} .btn-gold:disabled{opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none;} .cta-small{padding:9px 18px; font-size:0.82rem; white-space:nowrap;} .btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:10px; cursor:pointer; background:transparent; border:1px solid var(--line-strong); color:var(--ink-dim); font-family:var(--font-body); font-size:0.88rem; font-weight:500; transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .btn-ghost:hover{border-color:var(--ember); color:var(--ember-hot); background:rgba(255,106,43,0.05);} .btn-danger{ padding:9px 16px; border-radius:9px; cursor:pointer; background:transparent; border:1px solid rgba(244,127,111,0.35); color:var(--red); font-size:0.82rem; font-weight:600; font-family:var(--font-body); transition:background 0.2s ease; } .btn-danger:hover{background:rgba(244,127,111,0.08);} /* ========================= panels ============================= */ /* .glass kept as the shared panel class; now a machined dark panel. */ .glass{ background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 50px rgba(0,0,0,0.45); position:relative; } .card{padding:28px 30px;} .panel-hover{transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;} .panel-hover:hover{transform:translateY(-3px); border-color:rgba(255,106,43,0.35); box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.55);} .section{padding:clamp(56px,9vw,110px) 0;} .section-tight{padding:36px 0;} .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} @media (max-width:820px){ .grid-2,.grid-3{grid-template-columns:1fr;} } .hair{border:none; border-top:1px solid var(--line); margin:0;} /* ========================== forms ============================= */ .field{margin-bottom:18px; text-align:left;} .field label{ display:block; font-family:var(--font-mono); font-size:0.66rem; font-weight:500; color:var(--ink-faint); margin-bottom:8px; letter-spacing:0.18em; text-transform:uppercase; } .field input,.field select,.field textarea{ width:100%; padding:13px 15px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid var(--line-strong); color:var(--ink); font-family:var(--font-body); font-size:0.95rem; outline:none; transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,106,43,0.18); background:rgba(255,255,255,0.055); } .field .hint{font-size:0.78rem; color:var(--ink-faint); margin-top:7px;} .checkbox-row{display:flex; align-items:flex-start; gap:10px; margin-bottom:16px;} .checkbox-row input[type="checkbox"]{margin-top:3px; width:16px; height:16px; accent-color:var(--ember); flex-shrink:0;} .checkbox-row label{font-size:0.86rem; color:var(--ink-dim); line-height:1.55;} .checkbox-row label a{color:var(--ember-hot); font-weight:600;} /* ====================== badges / tags ========================= */ .tag{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; color:var(--ink-dim); padding:6px 13px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid var(--line); display:inline-block; } .badge{ font-family:var(--font-mono); font-size:0.62rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:4px 10px; border-radius:5px; display:inline-block; } .badge.live{background:rgba(91,215,146,0.12); color:var(--green); border:1px solid rgba(91,215,146,0.35);} .badge.pending{background:rgba(245,176,76,0.12); color:var(--amber); border:1px solid rgba(245,176,76,0.35);} .badge.demo{background:rgba(242,241,239,0.06); color:var(--ink-dim); border:1px solid var(--line-strong);} .status-dot{width:8px; height:8px; border-radius:50%; display:inline-block;} .status-dot.ok{background:var(--green); box-shadow:0 0 10px rgba(91,215,146,0.7);} .status-dot.warn{background:var(--amber); box-shadow:0 0 10px rgba(245,176,76,0.7); animation:tf-pulse 1.5s ease-in-out infinite;} @keyframes tf-pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}} /* ========================== tables ============================ */ .data-table{width:100%; border-collapse:collapse;} .data-table th{ font-family:var(--font-mono); font-size:0.66rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-strong); } .data-table td{padding:13px 14px; font-size:0.9rem; color:var(--ink-dim); border-bottom:1px solid var(--line);} .data-table tr:last-child td{border-bottom:none;} .data-table tr:hover td{background:rgba(255,255,255,0.02);} /* ========================== toast ============================= */ .toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); padding:13px 24px; border-radius:12px; font-size:0.88rem; font-weight:600; z-index:60; background:var(--carbon-800); border:1px solid var(--line-strong); box-shadow:0 18px 50px rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity 0.25s ease, transform 0.25s ease; } .toast.show{opacity:1; transform:translateX(-50%) translateY(0);} /* ========================== footer ============================ */ footer.site-footer{ position:relative; z-index:1; border-top:1px solid var(--line); padding:56px 0 44px; margin-top:40px; color:var(--ink-faint); font-size:0.85rem; text-align:left; } footer.site-footer .brand-line{ font-family:var(--font-display); font-weight:800; letter-spacing:0.08em; text-transform:uppercase; font-size:1rem; color:var(--ink); margin-bottom:8px; } footer.site-footer .brand-line em{font-style:normal; color:var(--ember);} footer.site-footer a{color:var(--ink-dim); transition:color 0.2s ease;} footer.site-footer a:hover{color:var(--ember-hot);} footer.site-footer .foot-links{ display:flex; gap:26px; margin-top:22px; flex-wrap:wrap; justify-content:flex-start; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; } footer.site-footer .foot-bottom{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } /* ================== build-note (dev banner) =================== */ .build-note{ position:relative; z-index:1; max-width:100%; margin:0; padding:8px 28px; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em; color:var(--ink-faint); text-align:center; border-bottom:1px solid var(--line); background:rgba(255,255,255,0.02); } .build-note b{color:var(--amber); font-weight:600;} .build-note[hidden]{display:none;} /* ====================== scroll reveals ======================== */ .reveal{opacity:0; transform:translateY(26px); transition:opacity 0.7s cubic-bezier(0.2,0.65,0.3,1), transform 0.7s cubic-bezier(0.2,0.65,0.3,1);} .reveal.in{opacity:1; transform:none;} .reveal.d1{transition-delay:0.08s;} .reveal.d2{transition-delay:0.16s;} .reveal.d3{transition-delay:0.24s;} .reveal.d4{transition-delay:0.32s;} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important;} } /* ======================== marquee ============================= */ .marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; position:relative; z-index:1; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{display:flex; gap:0; width:max-content; animation:tf-marquee 36s linear infinite;} .marquee-track span{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; padding:0 18px; display:inline-flex; align-items:center; gap:36px; } .marquee-track span::after{content:"·"; color:var(--ember); font-size:1rem;} @keyframes tf-marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} } /* ====================== KPI / stat bits ======================= */ .kpi{padding:18px 20px;} .kpi .kpi-num{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; letter-spacing:-0.02em; color:var(--ink); line-height:1.1; } .kpi .kpi-num em{font-style:normal; color:var(--ember-hot);} .kpi .kpi-label{font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px;} .spark{display:block; width:100%; height:34px; margin-top:10px;} .spark polyline{fill:none; stroke:var(--ember); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;} .spark .spark-fill{fill:url(#sparkGrad); stroke:none; opacity:0.25;} /* certified-recipe stamp */ .stamp{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:0.6rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--ember-hot); border:1px solid rgba(255,106,43,0.45); border-radius:4px; padding:4px 9px; } .stamp::before{content:"✓";} /* ============ Forge setup step (per-package configuration) ============ */ .setup-group{ margin:14px 0 4px; padding:16px 18px; border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid var(--line); } .setup-group-title{ font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px; } .setup-field{ margin-bottom:15px; } .setup-field:last-child{ margin-bottom:0; } .setup-field label{ display:block; font-size:0.86rem; font-weight:600; color:var(--ivory); margin-bottom:6px; } .setup-field label .opt{ font-weight:400; color:var(--ivory-dim); font-size:0.8rem; } .setup-field input[type=text], .setup-field input[type=tel], .setup-field input[type=number], .setup-field input[type=time], .setup-field select, .setup-field textarea{ width:100%; padding:10px 12px; border-radius:10px; font:inherit; font-size:0.9rem; color:var(--ivory); background:rgba(255,255,255,0.04); border:1px solid var(--line-strong); outline:none; } .setup-field input:focus, .setup-field select:focus, .setup-field textarea:focus{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,106,43,0.15); } .setup-field textarea{ resize:vertical; } .setup-help{ font-size:0.78rem; color:var(--ivory-dim); margin-top:5px; line-height:1.5; } .setup-hours{ display:flex; align-items:center; gap:9px; } .setup-hours input{ flex:1; } .setup-hours span{ font-size:0.84rem; color:var(--ivory-dim); } .setup-check{ display:flex; align-items:center; gap:9px; cursor:pointer; } .setup-check input{ width:17px; height:17px; accent-color:var(--ember); } /* ── Hub: business records the owner maintains ───────────────────────────── */ .records{ margin-top:34px; } .records-head h2{ font-size:1.15rem; margin:0 0 4px; } .records-head p{ font-size:.86rem; color:var(--ivory-dim); margin:0 0 18px; } .rec-block{ margin-bottom:26px; } .rec-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .rec-title h3{ font-size:.95rem; margin:0; } .rec-add{ padding:6px 14px; font-size:.8rem; } .rec-list{ border:1px solid rgba(255,255,255,.07); border-radius:12px; overflow:hidden; } .rec-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.9rem; } .rec-row:last-child{ border-bottom:0; } .rec-main{ flex:1; min-width:0; } .rec-name{ color:var(--ivory); } .rec-sub{ font-size:.78rem; color:var(--ivory-dim); margin-top:2px; } .rec-when{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; white-space:nowrap; } .rec-soon{ color:#f0c33c; } .rec-late{ color:#e8734a; } .rec-ok{ color:var(--ivory-dim); } .rec-btn{ background:none; border:0; color:var(--ivory-dim); cursor:pointer; font-size:.78rem; padding:4px 6px; } .rec-btn:hover{ color:var(--ivory); } .rec-empty{ padding:20px 16px; font-size:.86rem; color:var(--ivory-dim); text-align:center; } .rec-modal{ position:fixed; inset:0; background:rgba(0,0,0,.62); display:flex; align-items:center; justify-content:center; padding:20px; z-index:80; } .rec-modal[hidden]{ display:none; } .rec-dialog{ width:100%; max-width:420px; padding:26px 28px; } .rec-dialog h3{ margin:0 0 16px; font-size:1.05rem; } .rec-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; } .rec-err{ color:#e8734a; font-size:.82rem; margin:12px 0 0; min-height:1.1em; } .rec-link{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--gold-soft); word-break:break-all; display:block; margin-top:6px; } /* ── the deal, stated where it is decided ────────────────────────────────── Two components, one job: put the shape of the commitment next to the price instead of in an FAQ two screens down. Every claim here is checked against terms.html — 14 days, not the 30 a competitor prints, and cancel says "effective at the end of the billing period" because self-serve cancel routes through Forge until the Stripe leg is wired. A trust badge that overstates is worse than no badge, because it is the one line a wary buyer actually tests. */ .deal-terms{ margin:16px 0 0; padding:14px 0 0; border-top:1px solid rgba(255,255,255,0.1); display:flex; flex-direction:column; gap:8px; text-align:left; } .deal-terms > div{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; } .deal-terms dt{ font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ivory-dim); flex:0 0 auto; min-width:112px; } .deal-terms dd{ margin:0; font-size:0.84rem; color:var(--ivory); flex:1 1 160px; } .trust-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .trust-row span{ display:inline-flex; align-items:center; gap:7px; font-size:0.76rem; color:var(--ivory-dim); border:1px solid var(--line-strong); border-radius:999px; padding:6px 12px; background:rgba(255,255,255,0.03); } .trust-row b{ color:var(--ivory); font-weight:600; } @media (max-width:480px){ /* Stacked beats squeezed: four pills across a phone is unreadable. */ .trust-row{ gap:6px; } .trust-row span{ font-size:0.72rem; padding:5px 10px; } .deal-terms dt{ min-width:0; flex:1 1 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE HEADER, TOUCH TARGETS AND FORM LABELS (w32 · w33 · w34) Added 2026-08-17 after measuring, not after looking. ALL OF IT IS CSS ON PURPOSE. The header markup is duplicated across 54 HTML files and is NOT uniform — index carries gap:14px inline, pricing carries gap:12px, signup and 404 have no CTA at all, and the customer-facing booking and photo-intake pages have no nav whatsoever. A markup fix would be 54 edits against four shapes; a stylesheet fix is one file and reaches all of them. w32 — THE PRIMARY CTA WAS CLIPPED BETWEEN 901px AND ~1080px. The old rule stacked the navbar at max-width:900px, but the single-row layout does not actually fit until about 1080px, and nothing between those two numbers had ever been laid out. Measured: "Create Free Account" overflowed the header by 76px at 960 and 45px at 1000, and the header scrolled sideways at both. That band is iPad landscape, small laptops and a 1920 monitor split in half — and the thing being cut off is the button the entire funnel points at. The breakpoint moves to 1080. w33 — AND THE STACKED HEADER WAS A DESKTOP NAV REFLOWING. 181px tall, 22% of a 812px phone screen, on 13 of 14 pages, with eight links wrapped across four rows. Now two rows: brand and actions on the first, the links on the second as ONE horizontally scrollable strip. Nothing is hidden behind a tap — a site whose job is explaining a product should not bury its own navigation — but nothing costs four rows either. The right-hand fade is the affordance that says the strip continues. w34 — 44px, WHICH IS THE POINT OF THE WHOLE PRODUCT. Header links were 30px, footer links 18px, and the booking and photo-intake buttons — the ones a CUSTOMER of a customer taps — were 38px. This is software for somebody holding a phone on a job site with dirty hands. Apple and Google both put the floor at 44 and they are right. WHAT IS DELIBERATELY NOT CHANGED: the small mono uppercase labels. 0.66rem eyebrows and KPI captions read fine because they are short, wide-tracked and set in a mono face — raising them all would flatten the type hierarchy to fix a number rather than a problem. The ONE exception is form labels, which were also 0.66rem: a field label is something you read to answer, not a caption you glance at, and 10.56px is too small for that job. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1240px){ .navbar{ flex-wrap:wrap; height:auto; align-items:center; padding-top:9px; padding-bottom:0; row-gap:0; gap:12px; } /* The actions wrapper carries an inline `gap` on some pages, and inline wins over a class — so this is the one place !important earns its place. */ .navbar > div:last-child{ gap:10px !important; } nav.links{ order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; gap:22px; margin-top:2px; padding-bottom:2px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); } nav.links::-webkit-scrollbar{ display:none; } nav.links a{ display:flex; align-items:center; min-height:44px; padding:0; } .account-link{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; } footer.site-footer .foot-links a, footer.site-footer .foot-bottom a{ display:inline-flex; align-items:center; min-height:44px; } } /* The smallest phones: brand and CTA both shrink so the top row stays ONE row. Without this the actions wrap to a third row and the saving is given back. */ @media (max-width:560px){ .brand{ font-size:0.86rem; gap:8px; } .brand .mark{ width:26px; height:26px; } .cta-small{ padding:9px 14px; font-size:0.78rem; } } /* Every primary button, at every width. */ .cta-small,.btn-gold{ min-height:44px; } /* A form label is read in order to answer it. 0.66rem was 10.56px; the letter-spacing comes down as the size goes up so the label does not grow wider than the field it belongs to. */ .field label{ font-size:0.82rem; letter-spacing:0.12em; } /* The first row still wrapped on a 375px phone, which put the saving straight back: brand 154px + actions 219px needs 385px inside a 347px space, so the header stayed three rows at 152px instead of the two it was designed for. Shaving type until it fit would have cost 25px of legibility on the one device this product is built for. So below 420px the wordmark steps aside and the TF mark carries the brand alone — the ordinary answer, and a deliberate-looking one. The words are still in the DOM and still read aloud; they simply take no width. Above 420px "TRADE FORGE" is back and the row fits on its own. */ @media (max-width:420px){ .brand{ font-size:0; gap:0; } .brand .mark{ font-size:0.78rem; } .navbar{ padding-left:16px; padding-right:16px; } } /* The logo is a link home and was a 26px target once the wordmark stepped aside — the smallest thing left on the page, and the one people reach for to get back. It gets the same 44px as everything else. */ .brand{ min-height:44px; } /* ═══════════════════════════════════════════════════════════════════════════ GOLD NAVIGATION (Garett's direction, 2026-08-18: grey font → gold) The nav and footer links were grey mono caps (--ink-dim, 6.58:1 — legal, and grey). They now speak the same brass the Hub's department tabs speak, so the two surfaces read as one product. --brass is the Hub's --gold-ink verbatim, measured 9.60:1 on this site's near-black; --brass-dim is the quieter tier at 8.74:1. EMBER STAYS THE ACTION COLOR: hover and the active tab still answer in ember, so gold is structure here exactly as it is in the Hub, and never a call to act. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --brass:#e3c169; --brass-dim:#cfa64f; } /* Garett, 2026-08-18: the TOP tabs read white, not gold — gold stays in the footer and the Hub, where it labels structure. White resting, ember hover and active, so the top strip is quiet ink until you reach for it. */ nav.links{ color:var(--ink); } nav.links a:hover{ color:var(--ember-hot); } nav.links a.active{ color:var(--ember-hot); } .account-link{ color:var(--ink); } .account-link:hover{ color:var(--ember-hot); } footer.site-footer .foot-links{ color:var(--ink-dim); } footer.site-footer .foot-links a{ color:var(--ink-dim); } footer.site-footer .foot-links a:hover{ color:var(--ember-hot); } /* ── the calculator gallery, as cards ─────────────────── (2026-08-18) ── */ .calc-hero{ margin:34px 0 10px; } .calc-hero .eyebrow{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ember-hot); margin-bottom:10px; } .calc-group{ margin-top:40px; } .calc-group h2{ display:flex; align-items:center; gap:10px; font-size:1.15rem; } .calc-group-icon{ font-size:1.05rem; } .calc-group-count{ font-family:var(--font-mono); font-size:0.68rem; color:var(--ink-dim); border:1px solid var(--line-strong); border-radius:20px; padding:1px 9px; margin-left:2px; } .calc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px; } .calc-card{ display:flex; flex-direction:column; gap:7px; padding:18px 18px 14px; border:1px solid var(--line); border-radius:14px; min-height:44px; } .calc-card b{ font-family:var(--font-display); font-size:1rem; color:var(--ink); } .calc-card span{ font-size:0.85rem; color:var(--ink-dim); line-height:1.5; flex:1; } .calc-card .calc-open{ font-style:normal; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:6px; transition:color 0.2s ease; } .calc-card:hover .calc-open{ color:var(--ember-hot); } /* ═══════════════════════════════════════════════════════════════════════════ ONE CALCULATOR PAGE — inputs, then the answer beneath. (2026-08-21, UI audit) The generated pages (calculator-*.html) reference .calc-box / .calc-field / .calc-answer and nothing styled them, so the fields fell back to inline flow: on a phone the label, its input and the NEXT field all ran onto one line and zig-zagged. Each field is a block now — label over a full-width input, hint beneath — two to a row on a wide screen, one to a row on a phone (the device a contractor actually holds in the yard). ═══════════════════════════════════════════════════════════════════════════ */ .calc-page{ max-width:780px; } .calc-page .lede{ color:var(--ink-dim); font-size:1.02rem; line-height:1.6; margin:6px 0 4px; } .calc-box{ margin-top:24px; padding:22px clamp(16px,3vw,26px); background:var(--carbon-850); border:1px solid var(--line); border-radius:16px; } .calc-box form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; } .calc-field{ display:flex; flex-direction:column; gap:7px; } .calc-field > span{ font-family:var(--font-mono); font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); } .calc-field > span em{ font-style:normal; color:var(--brass); margin-left:2px; } .calc-field input{ width:100%; box-sizing:border-box; padding:13px 15px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid var(--line-strong); color:var(--ink); font-family:var(--font-mono); font-size:1rem; min-height:48px; outline:none; transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .calc-field input:focus{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,106,43,0.18); background:rgba(255,255,255,0.055); } .calc-field small{ font-size:0.78rem; color:var(--ink-faint); line-height:1.45; } .calc-answer{ margin-top:20px; } .calc-headline, .calc-line{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; padding:11px 0; border-bottom:1px solid var(--line); } .calc-headline{ padding-top:6px; border-bottom:1px solid var(--line); } .calc-line:last-child, .calc-headline:last-child{ border-bottom:none; } .calc-headline span, .calc-line span{ color:var(--ink-dim); } .calc-headline b, .calc-line b{ font-family:var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .calc-headline b{ font-size:1.5rem; color:var(--ember-hot); } .calc-headline small, .calc-line small{ width:100%; color:var(--ink-faint); font-size:0.8rem; } .calc-meta{ margin-top:40px; } .calc-meta h2{ font-size:1.1rem; margin:22px 0 8px; } .calc-meta p.mono{ font-family:var(--font-mono); color:var(--ink-dim); font-size:0.9rem; background:var(--carbon-850); border:1px solid var(--line); border-radius:10px; padding:12px 14px; overflow-x:auto; } .calc-meta ul{ margin:8px 0 0; padding-left:20px; color:var(--ink-dim); line-height:1.6; } .calc-meta li{ margin-bottom:8px; } .calc-cta{ margin-top:40px; padding:24px clamp(18px,3vw,28px); background:var(--carbon-850); border:1px solid var(--line); border-radius:16px; } .calc-cta h2{ font-size:1.15rem; margin:0 0 10px; } .calc-cta p{ color:var(--ink-dim); line-height:1.6; margin:0 0 14px; } .calc-cta p:last-child{ margin:0; } @media (max-width:560px){ .calc-box form{ grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE NAV — a hamburger for the header. (2026-08-21, UI audit) The links are inline in every page's