/* ============================================================ TaskLogix360 — v2 home redesign: PAGE-LEVEL PASS Added 2026-07-29. VARIANT STYLESHEET — loaded only by v2-home.html. index.html and the existing section stylesheets are NOT edited; every change here is an override, so nothing is destroyed if this is dropped. This is the work the original 07-28 diagnosis actually called for. The hero is parked; these are the sections that measured broken: 1. the outcomes topology ships to every visitor and paints nothing (outcomes.css:56 -> .tlxo-net{display:none}) 2. the WebGL orb, the only saturated polychrome motion on the site, sits under a veil that is 92% opaque at the top 3. every ground is flat #fff / #F9FAFB, so five near-white sections open the page with ~1.5% luminance between neighbours 4. icons are monochrome navy strokes on near-white tiles 5. the green-spill shadow that makes the Enterprise page feel rich appears nowhere below the hero ============================================================ */ /* ============================================================ 1. GROUNDS — kill the flat fills The single measurable cause of "washed out". Each of these was a flat #fff or #F9FAFB; they become the same lit ramp used by .ground-lit, so neighbouring sections separate instead of blending. ============================================================ */ .v2p .problem, .v2p .video-section, .v2p .markets-strip, .v2p .tlx-section.faq{ position:relative; background: radial-gradient(80% 60% at 88% 8%, rgba(35,120,196,.09) 0%, rgba(35,120,196,0) 62%), radial-gradient(70% 55% at 6% 96%, rgba(30,154,68,.08) 0%, rgba(30,154,68,0) 60%), linear-gradient(174deg, #FFFFFF 0%, #F4F9FD 54%, #EAF3FA 100%); } /* alternate the ramp direction on every other lit section so two adjacent lit sections still read as two sections, not one long wash */ .v2p .video-section, .v2p .tlx-section.faq{ background: radial-gradient(78% 58% at 10% 6%, rgba(35,120,196,.08) 0%, rgba(35,120,196,0) 62%), linear-gradient(186deg, #F7FBFE 0%, #EFF6FC 58%, #FFFFFF 100%); } /* Markets follows the PRICING section, and pricing ends light, so the default white-topped ramp put the two within 2.9% luminance - measured, not guessed. Markets therefore starts at its deepest stop and lightens downward, which takes that boundary over the 8% target without making the section dark. */ .v2p .markets-strip{ background: radial-gradient(74% 56% at 88% 10%, rgba(35,120,196,.10) 0%, rgba(35,120,196,0) 60%), radial-gradient(64% 50% at 8% 96%, rgba(30,154,68,.08) 0%, rgba(30,154,68,0) 60%), linear-gradient(182deg, #E4EFF8 0%, #EEF5FB 52%, #F9FCFE 100%); } /* ============================================================ 2. OUTCOMES — ground only. NO topology. The 07-28 plan called for reviving the topology (outcomes.css:56 hides it), and it was revived. Sam killed it on sight, 2026-07-29: "reads messy to me, especially because the outcomes themselves are already very crowded." He is right, and the reason is instructive: the outcome cards each carry a concept visual, a heading, a paragraph and a footer label, so the section was ALREADY at its density budget before a moving network went behind it. The kill switch therefore stays exactly as it shipped. What outcomes gets instead is a better ground and more air. ============================================================ */ .v2p .tlx-outcomes{ background: radial-gradient(76% 58% at 84% 6%, rgba(35,120,196,.10) 0%, rgba(35,120,196,0) 62%), radial-gradient(66% 52% at 8% 98%, rgba(30,154,68,.09) 0%, rgba(30,154,68,0) 60%), linear-gradient(178deg, #FBFDFF 0%, #F1F7FC 56%, #E9F2FA 100%); } /* .tlxo-net stays display:none, per outcomes.css:56. Not overridden. */ /* ============================================================ 3. THE ORB — unveil it pricing-tiers.css:43-44 lays a veil that is .92 opaque at the top and .30 through the middle, over a shader that sweeps green->teal->cyan->blue. It is the single biggest recoverable colour asset on the site. The header still needs a readable ground, so the top stays fairly opaque and the MIDDLE opens up - which is exactly where the tier cards sit, and they carry their own backgrounds, so the orb shows in the gaps between them rather than behind text. ============================================================ */ .v2p .tlx-pricing-tiers .veil{ background:linear-gradient(180deg, rgba(247,250,253,.88) 0%, rgba(247,250,253,.30) 20%, rgba(247,250,253,.10) 42%, rgba(247,250,253,.10) 62%, rgba(247,250,253,.72) 86%, rgba(247,250,253,.98) 100%); } /* ============================================================ 4. COLOURFUL ICONS Monochrome navy strokes on near-white tiles become a per-category hue system. Kept ON-BRAND by holding every hue inside the navy -> teal -> green arc the orb itself sweeps, so it reads as one family rather than a rainbow. Tile background is the same hue at low alpha. ============================================================ */ .v2p .ms-card .ms-ico, .v2p .tlx-outcomes .card .oc-ico{ background:var(--ico-bg,rgba(11,70,120,.08)); border-color:var(--ico-bd,rgba(11,70,120,.16)); color:var(--ico-fg,var(--navy)); } .v2p .ms-grid .ms-card:nth-child(6n+1){--ico-fg:#0B4678;--ico-bg:rgba(11,70,120,.09); --ico-bd:rgba(11,70,120,.20)} .v2p .ms-grid .ms-card:nth-child(6n+2){--ico-fg:#0F6E9C;--ico-bg:rgba(15,110,156,.10); --ico-bd:rgba(15,110,156,.22)} .v2p .ms-grid .ms-card:nth-child(6n+3){--ico-fg:#0E8F87;--ico-bg:rgba(14,143,135,.10); --ico-bd:rgba(14,143,135,.22)} .v2p .ms-grid .ms-card:nth-child(6n+4){--ico-fg:#12876A;--ico-bg:rgba(18,135,106,.10); --ico-bd:rgba(18,135,106,.22)} .v2p .ms-grid .ms-card:nth-child(6n+5){--ico-fg:#15803D;--ico-bg:rgba(21,128,61,.10); --ico-bd:rgba(21,128,61,.22)} .v2p .ms-grid .ms-card:nth-child(6n+6){--ico-fg:#1E9A44;--ico-bg:rgba(30,154,68,.11); --ico-bd:rgba(30,154,68,.24)} .v2p .tlx-outcomes .grid .card:nth-child(3n+1){--ico-fg:#0B4678;--ico-bg:rgba(11,70,120,.09); --ico-bd:rgba(11,70,120,.20)} .v2p .tlx-outcomes .grid .card:nth-child(3n+2){--ico-fg:#0E8F87;--ico-bg:rgba(14,143,135,.10);--ico-bd:rgba(14,143,135,.22)} .v2p .tlx-outcomes .grid .card:nth-child(3n+3){--ico-fg:#15803D;--ico-bg:rgba(21,128,61,.10); --ico-bd:rgba(21,128,61,.22)} /* ============================================================ 5. GREEN-SPILL SHADOW PASS The highest-value single device on the Enterprise page and the one that appears NOWHERE on the home page: a second, green-tinted shadow beneath the navy one. Invisible on any single card; transformative in aggregate. Light-ground weighting (product.html:189-206 inverted). ============================================================ */ .v2p .ms-card, .v2p .tlx-outcomes .card, .v2p .fork-card, .v2p .v2-recon, .v2p .video-frame{ box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(11,70,120,.10), 0 30px 70px -34px rgba(8,54,93,.34), 0 22px 54px -32px rgba(30,154,68,.24); } @media (hover:hover){ .v2p .ms-card:hover, .v2p .tlx-outcomes .card:hover{ box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(11,70,120,.14), 0 34px 78px -32px rgba(8,54,93,.40), 0 26px 60px -28px rgba(30,154,68,.32); } } /* the dark bands keep the dark weighting */ .v2p .tlx-testimonial .card, .v2p .cta-band .card{ box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(151,196,236,.16), 0 40px 90px -30px rgba(0,10,22,.85), 0 24px 60px -28px rgba(30,154,68,.35); } /* ============================================================ 6. SECTION SEAMS A hairline between adjacent LIT sections so the boundary is legible even where the luminance step is small. ============================================================ */ .v2p .tlx-outcomes::before, .v2p .markets-strip::before, .v2p .tlx-section.faq::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(11,70,120,.14),rgba(30,154,68,.18),rgba(11,70,120,.14),transparent); } .v2p .markets-strip,.v2p .tlx-section.faq{position:relative} @media print{ .v2p .tlxo-net{display:none} }