/* Tech-D Enterprises — Automation Advisor theme + vertical landing page styles. * * MUST load AFTER /assets/agent.css. That file is a tested drop-in and is never * edited in place; every colour in it is a --tda-* custom property, and this is * where they get pointed at the site palette (light, blue) instead of the kit's * (dark, teal). * * Section 2 does the same job for the vertical landing pages. Those pages ship * with the kit's class names in their markup (.lede, .eyebrow, .place, .card b, * .tag, .note, .honest, .step, .price ...) and the body copy is kept exactly as * supplied, so the class names are mapped here rather than rewritten there. * Scoped under body.tda-page so nothing leaks onto the existing pages. */ /* ============================================================ 1. Widget theme — --tda-* overrides only ============================================================ */ .tda { --tda-bg: var(--panel); --tda-panel: var(--card); --tda-panel-2: var(--accent-soft); --tda-line: var(--line); --tda-ink: var(--ink); --tda-dim: var(--ink-soft); /* Was #1e4fd6 — accent-dark of the old blue, chosen because #2f6bff on the pale panel was under 4.5:1. Brass is darker still: --accent is 5.35:1 with white on it and 4.90:1 as text on --accent-soft. tests/contrast.test.js computes both pairs from these tokens now, so the reasoning is checked rather than remembered. */ --tda-accent: var(--accent); --tda-accent-ink: #ffffff; --tda-warm: var(--accent-dark); --tda-hot: #b3261e; --tda-radius: var(--radius); --tda-shadow: var(--shadow); font-family: var(--sans); } /* agent.css hardcodes a few teal rgba() values that no custom property covers. Restated here in the site blue rather than edited upstream. */ .tda-msg.tda-me .tda-bubble { background: var(--accent-soft); border-color: var(--line-strong); color: var(--ink); } .tda-chip:hover, .tda-chip:focus-visible { background: var(--accent-soft); } .tda-btn:hover, .tda-btn:focus-visible { background: var(--accent-dark); } .tda-btn-ghost { border-color: var(--line-strong); } .tda-btn-ghost:hover, .tda-btn-ghost:focus-visible { background: var(--accent-soft); } .tda-price { border-color: var(--line-strong); background: var(--accent-soft); } .tda-cta { background: var(--accent-soft); border-color: var(--line-strong); } /* The launcher is appended to , NOT inside .tda — and every --tda-* custom property in agent.css is scoped to `.tda`. So agent.css's `background: var(--tda-accent); color: var(--tda-accent-ink)` resolves to nothing on it: measured background rgba(0, 0, 0, 0) with inherited #1c1c22 text on every page that mounts the bubble. The site's second conversion action was rendering as unstyled dark words floating over the page copy. Site tokens are used here instead because they live on :root and always resolve. #fff on --accent is 5.02:1. See tests/site.test.js. */ .tda-launcher { background: var(--accent); color: #fff; box-shadow: var(--shadow); } .tda-launcher:hover, .tda-launcher:focus-visible { background: var(--accent-dark); } .tda-dot { animation: none; } /* the teal pulse keyframe reads wrong in blue */ /* ============================================================ 2. Vertical landing pages + Front Desk Kit class names -> site palette. Scoped to body.tda-page. ============================================================ */ /* The supplied markup carries a few inline `color:var(--dim)` / `color:var(--ink)` styles from the kit's own palette. Rather than edit the body copy, alias --dim here, and flip --ink to white inside the hero — where the kit assumed a dark surface and the site's --ink would render near-invisible. */ .tda-page { --dim: var(--ink-soft); } .tda-page .wrap { max-width: 820px; } .tda-page .lede { font-size: 1.12rem; color: var(--ink-soft); } .tda-page .eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; } .tda-page .muted { color: var(--ink-soft); font-size: .93rem; } /* styles.css zeroes every margin and only adds them back per component. The kit pages are prose, so give their paragraphs spacing back — inside the hero and the sections only, never the footer, where

is a heading. */ /* Keyed on the .hero CLASS, not the element name. These were `header.hero` until the hero on these pages stopped being a

— it was a second banner landmark alongside the site header — and the rules silently stopped matching on all ten .tda-page pages, which are the vertical landing pages outbound email points at. Class selectors do not care what tag carries them. */ .tda-page section p { margin-bottom: 15px; } .tda-page section p:last-child { margin-bottom: 0; } .tda-page section h2 { margin-bottom: 14px; } .tda-page section h3 { margin-bottom: 6px; } /* The three automation cards: kit markup is

. The site's .card is a padded white box with an uppercase accent .tag, so both need adjusting rather than replacing. */ .tda-page .card { padding: 18px 22px; margin-bottom: 12px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; } .tda-page .card b { display: block; font-family: var(--sans); font-size: 1.05rem; margin-bottom: 5px; } .tda-page .card p { margin: 0; } .tda-page .card .tag { display: inline-block; margin: 10px 0 0; text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 3px 11px; } .tda-page .card.accent { border-left-color: var(--accent); } .tda-page .note { border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px 20px; color: var(--ink-soft); font-size: .95rem; background: var(--card); } /* The kit uses a bare .btn as a solid primary button. The site's bare .btn has no fill, so give it one here rather than adding .btn-primary to supplied markup. */ .tda-page .btn { background: var(--accent); color: #fff; } .tda-page .btn:hover { background: var(--accent-dark); } .tda-page .btn.btn-ghost { background: transparent; color: var(--accent); border-color: var(--line); } .tda-page .btn.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); } .tda-page ul.plain { list-style: none; padding: 0; margin: 0 0 16px; } .tda-page ul.plain li { padding: 10px 0 10px 27px; position: relative; border-bottom: 1px solid var(--line); color: var(--ink-soft); } .tda-page ul.plain li:last-child { border-bottom: 0; } .tda-page ul.plain li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .tda-page ul.plain li strong { color: var(--ink); } .tda-page ul.no li::before { background: var(--ink-mute); } .tda-page .step { display: flex; gap: 16px; margin-bottom: 22px; } .tda-page .step .num { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--line-strong); color: var(--accent-dark); font-family: var(--mono); font-weight: 500; font-size: .95rem; display: grid; place-items: center; } .tda-page .step h3 { margin-bottom: 4px; } .tda-page .step p { margin-bottom: 0; } .tda-page .price { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 12px; box-shadow: var(--shadow); } .tda-page .price.feature { border: 2px solid var(--accent); box-shadow: var(--shadow); } .tda-page .price .amt { font-family: var(--mono); font-size: 2.1rem; font-weight: 500; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; } .tda-page .price .amt small { font-size: 1rem; font-weight: 500; color: var(--ink-soft); } .tda-page .price h3 { margin-bottom: 4px; } .tda-page .tagline { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-dark); font-weight: 700; margin-bottom: 9px; } /* Front Desk uses bare

, not the site's details.acc. */ .tda-page details { border-bottom: 1px solid var(--line); } .tda-page details summary { padding: 16px 0; cursor: pointer; font-weight: 600; font-family: var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 14px; } .tda-page details summary::-webkit-details-marker { display: none; } .tda-page details summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.35rem; line-height: 1; } .tda-page details[open] summary::after { content: "–"; } .tda-page details .body { padding: 0 0 18px; color: var(--ink-soft); } .tda-page details .body p:last-child { margin-bottom: 0; } /* "Who shouldn't buy this" and "What I can't tell you yet" are the page's credibility devices. Warm border so they read as an aside, not a footnote. */ .tda-page .honest { border: 1px dashed var(--accent); border-radius: var(--radius); padding: 22px 24px; background: var(--accent-soft); } .tda-page .honest h2 { color: var(--accent-dark); font-size: 1.45rem; } .tda-page .honest p:last-child { margin-bottom: 0; } .tda-page .grid { display: grid; gap: 12px; margin-top: 0; } @media (min-width: 620px) { .tda-page .grid.two { grid-template-columns: 1fr 1fr; } } /* The advisor mount is a plain div until agent.js fills it; give it room so the section does not collapse on slow connections. */ .tda-page [data-tda-mount] { margin: 24px 0 0; min-height: 4px; } @media (max-width: 860px) { .tda-page .step { gap: 12px; } } /* agent.css sets outline:none on these; a ring restored — REVIEW-LOOP cycle 9 */ .tda-btn:focus-visible, .tda-btn-ghost:focus-visible, .tda-chip:focus-visible, .tda-close:focus-visible, .tda-launcher:focus-visible, .tda-field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }