/* 2026-09-23 legal audit: the brand green was used as TEXT (and as a fill under white text) below WCAG AA. --green-aa (#15803D) and --green-aa-deep (#11692F) exist for exactly this and are used here; the green FILLS that carry no text are untouched. */ /* ============================================================================ home-system.css — the home page's spine. Added 2026-08-06. WHY THIS FILE EXISTS index.html loads ten page-specific stylesheets (hero, outcomes, testimonial, home, depth, v2-fork, v2-page, v2-cards, markets-mq, security-bento). Every other page loads 0-2. Those ten are ten separate build sessions, each internally consistent and none agreeing with the others - which is why the page had 6 content measures, 5 button variants and 5 eyebrow greens. Rather than edit ten files (and risk the .v2p scoping landmine in v2-cards.css / v2-page.css), this loads LAST and normalises on top. Cascade order is the mechanism: it must stay the final stylesheet in . Contains, in order: 1 measures two, not six 2 eyebrows one green on light, one on dark 3 headings one size, one colour per ground, one alignment rule 4 buttons btn-navy folded into the secondary look 5 section grounds the D L D L rhythm 6 new components hero demo, task journey, story marks, map column ============================================================================ */ :root{ --measure-wide:1280px; /* grids, cards, columns, set-pieces */ --measure-read:960px; /* pure centred copy blocks */ --eb-light:#15803D; /* --green-aa, 5.0:1 on white */ /* References the token rather than copying its hex: --green-bright was raised to #3ECB6E on 2026-08-07 for AA on the brighter ground, and a hardcoded copy here would have silently kept every home-page eyebrow on the old, failing value. */ --eb-dark:var(--green-bright); /* accent green for dark grounds */ --h2-light:#08365D; --ground-lite:#F7F9FC; } /* ---------- 1. MEASURES --------------------------------------------------- Was: 920 / 960 / 1120 / 1180 / 1280 across ten sections, so the left edge of the page physically moved four times on the way down. Now two positions. */ .v2-problem-inner, .v2-fork-inner, .tlx-outcomes .wrap, .tlx-testimonial .wrap, .markets-mq .tlx-section-inner, .security-bento .tlx-section-inner, .tlx-journey .tj-inner{max-width:var(--measure-wide)} .tlx-hero .hero-content, .video-section .tlx-section-copy, .cta-band .tlx-section-copy, .faq-inner{max-width:var(--measure-read)} /* ---------- 2. EYEBROWS --------------------------------------------------- Was five: #15803D, #1A8A3D, #1E9A44, #35C168 and white. --green (#1E9A44) is a graphics colour and fails AA as text on white, which is half of why they drifted. Light grounds get --green-aa; dark grounds get --green-bright. */ .v2-problem .eyebrow, .tlx-outcomes .eyebrow, .faq-tab{color:var(--eb-light)} .v2-fork .eyebrow, .tlx-journey .eyebrow, .markets-mq .eyebrow, .cta-band .badge-pill{color:var(--eb-dark)} /* security is re-grounded LIGHT below, so its eyebrow takes the light green. --green-bright on #F7F9FC is ~2.3:1 and fails; --green-aa is 5.0:1. */ .security-bento.ground-light .eyebrow{color:var(--eb-light)} /* the customer story is re-grounded light below, so its eyebrow flips too */ .tlx-testimonial .eyebrow{color:var(--eb-light)} .tlx-testimonial .eyebrow .d{background:var(--eb-light)} /* ---------- 3. HEADINGS --------------------------------------------------- Was: security 42px against 48px everywhere else, the FAQ heading near-black (#101828) against navy everywhere else, and alignment alternating L C L C L L L C L with no rule. The rule: centred on full-bleed dark set-pieces, left on content sections. */ .security-bento .hs-h2{font-size:clamp(32px,4.4vw,48px)} .faq-title{color:var(--h2-light)} .v2-problem h2, .tlx-outcomes .title, .tlx-testimonial .h2, .markets-mq .h2, .security-bento .hs-h2, .faq-title{text-align:left} .v2-fork h2, .tlx-journey h2, .video-section .h2, .cta-band .h2{text-align:center} /* light-ground headings all navy; dark-ground headings all white */ .tlx-testimonial .h2, .security-bento .hs-h2{color:var(--h2-light)} /* ---------- 4. BUTTONS ---------------------------------------------------- Was five variants. btn-navy was the odd one out: a navy solid appearing twice on light grounds where every other light-ground action is either the green primary or an outline. Folded into the secondary look. */ .btn-navy{ background:transparent;color:var(--navy); border:1.5px solid rgba(11,70,120,.28);box-shadow:none} .btn-navy:hover{background:rgba(11,70,120,.06);border-color:rgba(11,70,120,.45)} /* ============================================================================ 5. SECTION GROUNDS — the D L D L D L D L D L rhythm Measured before this file: the page was the only one on the site that opened light, ran two near-identical light sections for its first 2,414px (11.6 apart), and put security (1.8) next to the CTA band (4.9) so 1,631px read as one slab. Every step below now clears 40. ============================================================================ */ /* --- §1 HERO -> dark. The dot canvas is retinted through hero.js's data-dots hook, so this is a ground change only and hero.js is not forked. ------ */ .tlx-hero{ background: radial-gradient(120% 78% at 50% 118%, rgba(30,154,68,var(--gd-glow-green)) 0%, rgba(30,154,68,0) 60%), radial-gradient(85% 55% at 14% -8%, rgba(19,88,146,var(--gd-glow-blue)) 0%, rgba(19,88,146,0) 62%), linear-gradient(var(--gd-angle),var(--gd-1) 0%,var(--gd-2) 46%,var(--gd-3) 100%); color:#fff} /* hero.css paints this copy for a LIGHT ground - .l1 is --navy-deep, .l2 is --green, .subhead is --slate. On the new dark ground that is navy on navy. Selectors here match hero.css exactly (.l1/.l2/.subhead/.badge/.trust), not the guessed names a first pass used. */ .tlx-hero .headline .l1{color:#fff} .tlx-hero .headline .l2{color:var(--eb-dark)} .tlx-hero .headline .rot{color:var(--eb-dark)} .tlx-hero .subhead{color:rgba(255,255,255,.80)} .tlx-hero .subhead strong{color:#fff} .tlx-hero .trust{color:rgba(255,255,255,.82)} .tlx-hero .trust span{color:rgba(255,255,255,.82)} .tlx-hero .trust svg{color:var(--eb-dark)} .tlx-hero .badge{color:#fff;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(6px)} .tlx-hero .badge-dot{background:var(--eb-dark)} /* .hero-top::after is an 82%-white radial halo built to lift copy off the old light ground. On navy it reads as fog across the headline. Inverted to a subtle dark vignette that does the same job in the other direction. */ .tlx-hero .hero-top::after{ background:radial-gradient(58% 62% at 50% 42%, rgba(3,19,37,.55) 0%, rgba(3,19,37,0) 72%)} /* --- §6 CUSTOMER STORY -> light. Forced: §5 and §7 are both dark, so a dark story would rebuild the slab this whole pass exists to remove. ------- */ .tlx-testimonial{ background:linear-gradient(180deg,#FFFFFF 0%,var(--ground-lite) 100%); color:var(--ink,#0B2138)} .tlx-testimonial .dots{opacity:.30} .tlx-testimonial .lead{color:#3C4E63} .tlx-testimonial .lead b{color:var(--h2-light)} .tlx-testimonial .card{ background:#fff;border:1px solid #E3E9F0; box-shadow:0 30px 70px -40px rgba(5,25,50,.35)} .tlx-testimonial .viz-title{color:#5A6B80} .tlx-testimonial .viz-cap{color:#5A6B80} .tlx-testimonial .viz-badge{color:var(--green-aa)} .tlx-testimonial .layer.before{background:#F1F4F8} .tlx-testimonial .layer.after{background:linear-gradient(135deg,#EAF6EE 0%,#DFF1E6 100%)} .tlx-testimonial .tag{color:#5A6B80} .tlx-testimonial .tag.a{color:var(--green-aa)} .tlx-testimonial .cluster.b .stat-num{color:#76899F} .tlx-testimonial .cluster.a .stat-num{color:var(--green-aa)} .tlx-testimonial .handle{background:#fff;border:1px solid #D6DEE8} .tlx-testimonial .drag-hint{color:#5A6B80;background:rgba(255,255,255,.9)} /* the before/after marks. Sam 2026-08-06: a struck-through TaskLogix mark on the $73K side, a clean one on the $161K side - the labels used to be the text "manual spreadsheets" / "with TaskLogix360". */ .ts-mark{display:block;margin-top:var(--sp-3);height:20px;width:auto} .ts-mark-wrap{position:relative;display:inline-block} .ts-mark-wrap.out .ts-mark{opacity:.42;filter:grayscale(1)} .ts-mark-wrap.out::after{ content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px; background:#C0392B;transform:rotate(-11deg);border-radius:2px} /* --- §7 WHO WE SERVE -> dark, two columns, map on the right. Sam's call: same renderer, same locked config, just smaller. Sitting it in the right column is also what fills this section's dead top-right quadrant. ---- */ .markets-mq{ background: radial-gradient(120% 78% at 50% 118%, rgba(30,154,68,var(--gd-glow-green)) 0%, rgba(30,154,68,0) 60%), radial-gradient(85% 55% at 14% -8%, rgba(19,88,146,var(--gd-glow-blue)) 0%, rgba(19,88,146,0) 62%), linear-gradient(var(--gd-angle),var(--gd-1) 0%,var(--gd-2) 46%,var(--gd-3) 100%); color:#fff} .markets-mq .h2{color:#fff} .markets-mq .ms-lede,.markets-mq .lede,.markets-mq p{color:rgba(255,255,255,.82)} .mq-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center} /* FLIPPED 2026-08-07 per Sam: map left, copy right. Done by grid placement rather than by reordering the markup, so the heading still comes first in the DOM for screen readers and for the mobile stack below. */ .mq-two .mq-copy{min-width:0;grid-column:2;grid-row:1} .mq-two .mq-mapcol{min-width:0;grid-column:1;grid-row:1} .mq-two #home-map{display:block;width:100%;height:auto} /* Breathing room under the lede. The CTA had no top margin at all, so it sat on the paragraph. */ .mq-two .mq-cta{margin-top:clamp(24px,3vw,36px)} @media (max-width:900px){ .mq-two{grid-template-columns:1fr} /* Back to source order when it stacks: headline, lede, CTA, then the map. */ .mq-two .mq-copy,.mq-two .mq-mapcol{grid-column:1;grid-row:auto} } /* --- §8 SECURITY -> light. Inverts the bento from dark translucent panels to white cards. Three tiles now: the role-breakdown list came out per Sam ("people know how roles work"). ------------------------------------- */ .security-bento.ground-light{ background:linear-gradient(180deg,var(--ground-lite) 0%,#FFFFFF 100%);color:var(--ink,#0B2138)} .security-bento.ground-light .horizon{display:none} .security-bento.ground-light .hs-lede{color:#3C4E63} .security-bento.ground-light .hs-h2 .hl{color:var(--green-aa)} .security-bento.ground-light .hb-grid{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.security-bento.ground-light .hb-grid{grid-template-columns:1fr}} .security-bento.ground-light .hb-tile{ background:#fff;border:1px solid #E3E9F0;box-shadow:0 18px 40px -32px rgba(5,25,50,.4)} .security-bento.ground-light .hb-tile h3{color:var(--h2-light)} .security-bento.ground-light .hb-tile p{color:#3C4E63} .security-bento.ground-light .hb-ic{ background:rgba(30,154,68,.10);border:1px solid rgba(30,154,68,.24);color:var(--green-aa)} .security-bento.ground-light .hs-link{color:var(--green-aa)} .security-bento.ground-light .hs-link:focus-visible{outline-color:var(--green-aa)} /* Header centred 2026-08-07 per Sam. This deliberately overrides the left-align that section 3 normalises every section head to — security is the one head on the page that now centres, so the rule is scoped, not removed. 🔴 The auto margins are load-bearing: security-bento.css:21 gives .hb-head a 780px max-width with NO auto margins, so it sits pinned to the left edge while the tile grid below runs the full 1280. text-align:center alone centred the words inside that left-pinned box — measurably off-centre (head centre 470 vs section centre 720) and it read as a mistake. */ .security-bento .hb-head{text-align:center;margin-left:auto;margin-right:auto} .security-bento .hs-h2{text-align:center} .security-bento .hs-lede{margin-left:auto;margin-right:auto;text-align:center} /* 🔴 Equal-height tiles. .hb-lg carries `grid-row:span 2` while .hb-sm spanned a single row, so "Audit trail" only ever got row 1's height and sat visibly short next to "Role-based access" — grid stretches items to their ROW, and the two were not in the same row box. Spanning .hb-sm across the same two rows puts them on one row box, and the default align-items:stretch does the rest. (Setting a min-height instead would drift the moment the copy on either tile changes.) */ .security-bento.ground-light .hb-sm{grid-row:span 2} @media (max-width:900px){ .security-bento.ground-light .hb-sm{grid-row:auto} } /* --- §9 CTA -> the markets-page ground, the one Sam picked. Same three-layer gradient now on markets.html. ---------------------------------------- */ /* The CTA ground moved to base.css:271 on 2026-08-07 so enterprise, markets and qc-inspections share it. Redefining it here would just be a second copy to keep in sync. index.html still owns the --bleed SHAPE rules and the dots canvas in its inline