/* cad-lisp.com Palette follows cad-steel.com's dark-grey/white shell, with a green accent pair chosen for WCAG AA on each background. All figures below MEASURED 16 Aug 2026, not estimated - AA for normal text is 4.5:1: #1B7A2F deep green on white 5.42:1 --accent #34eb37 bright green on #202121 10.06:1 --accent-lt Derived from those two, and measured the same way: #125A22 darker green, white text on it 8.36:1 --accent-dk (hover) #7ef07f lighter green, #0b2b0c text on it 10.74:1 (hover on dark) #0b2b0c near-black, on #34eb37 9.59:1 (button label) NEVER use #34eb37 on white - 1.60:1, it FAILS AA outright. It is the dark- background half of the pair only. Anything on white uses #1B7A2F. #01A0D4 — the family cyan used on sibling sites — is NOT used here. Measured 16 Aug 2026: 3.01:1 on #ffffff (FAILS AA) and 5.37:1 on #202121 (passes). It cannot serve the white-background role, and this site carries one accent family rather than two, so it has no role at all. Correction: an earlier version of this note said 3.5:1 on dark and "fails AA on both". The dark figure and that conclusion were both wrong. The decision to exclude it was not. */ :root { --ink: #202121; --ink-soft: #4a4d4d; --rule: #dbe0df; --bg: #ffffff; --bg-soft: #f4f7f6; --accent: #1B7A2F; --accent-dk: #125A22; --accent-lt: #34eb37; --wrap: 1080px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } a { color: var(--accent); } a:hover, a:focus { color: var(--accent-dk); } .skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 10px 16px; } .skip:focus { left: 8px; top: 8px; z-index: 100; } /* ---------- header ---------- */ .site-header { background: var(--ink); color: #fff; } .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; padding-bottom: 16px; } .brand { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; } .brand-mark { color: #fff; } .brand-dot { color: var(--accent-lt); } .site-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .site-nav a { color: #e8ecec; text-decoration: none; font-weight: 500; padding-bottom: 3px; border-bottom: 2px solid transparent; } .site-nav a:hover, .site-nav a:focus { color: var(--accent-lt); } .site-nav a.current { color: var(--accent-lt); border-bottom-color: var(--accent-lt); } /* Nav call to action. The header is --ink (#202121), so this uses --accent-lt (#34eb37) on it - 10.06:1, the same pairing .btn-on-dark already uses. The family cyan #01A0D4 is not an option here either - but NOT for contrast on this background: it is 5.37:1 on #202121 and would pass. It is excluded because the site carries one accent family, and because it cannot serve the white-background role at all. See the palette note at the top of this file. Overrides the .site-nav a underline/border treatment so it reads as a button, not a link. */ .site-nav a.nav-cta { background: var(--accent-lt); color: #0b2b0c; padding: 9px 18px; border-radius: 4px; font-weight: 600; border-bottom: 0; line-height: 1; } .site-nav a.nav-cta:hover, .site-nav a.nav-cta:focus { background: #7ef07f; color: #0b2b0c; } .site-nav a.nav-cta.current { color: #0b2b0c; border-bottom-color: transparent; } .site-nav a.nav-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* ---------- hero ---------- */ .hero { background: var(--ink); color: #fff; padding: 56px 0 64px; } .hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.2; margin: 0 0 18px; letter-spacing: -.02em; max-width: 20ch; } .hero h1 .hl { color: var(--accent-lt); } .hero p { font-size: 1.1rem; color: #d3d9d8; margin: 0 0 28px; max-width: 62ch; } /* ---------- generic sections ---------- */ section { padding: 52px 0; } section.alt { background: var(--bg-soft); } h1, h2, h3 { letter-spacing: -.015em; } h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 18px; } h2 { font-size: 1.5rem; margin: 0 0 18px; } h3 { font-size: 1.12rem; margin: 0 0 8px; } p { max-width: 68ch; } .lede { font-size: 1.08rem; color: var(--ink-soft); } /* ---------- buttons ---------- */ .btn { display: inline-block; background: var(--accent); color: #fff; padding: 13px 26px; border-radius: 4px; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; font-size: 1rem; } .btn:hover, .btn:focus { background: var(--accent-dk); color: #fff; } .btn-on-dark { background: var(--accent-lt); color: #0b2b0c; } .btn-on-dark:hover, .btn-on-dark:focus { background: #7ef07f; color: #0b2b0c; } /* ---------- steps ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } } .steps li { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 22px 24px; } .steps .num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: 10px; } /* step 3 is the differentiator - it gets visual weight, not a bullet */ .step-feature { grid-column: 1 / -1; background: var(--ink); color: #fff; border-color: var(--ink); } .step-feature h3 { color: var(--accent-lt); font-size: 1.3rem; } .step-feature p { color: #d3d9d8; margin-bottom: 0; } .step-feature .num { background: var(--accent-lt); color: #0b2b0c; } /* ---------- service cards ---------- */ .cards { display: grid; gap: 22px; margin-top: 8px; } @media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { border: 1px solid var(--rule); border-radius: 6px; padding: 24px; background: #fff; } .card h3 { color: var(--accent); } .card p { margin-bottom: 0; color: var(--ink-soft); } /* ---------- contact ---------- */ .contact-grid { display: grid; gap: 34px; } @media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .field { margin-bottom: 18px; } .field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; } .field input, .field select, .field textarea { width: 100%; padding: 11px 12px; font: inherit; color: var(--ink); border: 1px solid #b9c0bf; border-radius: 4px; background: #fff; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .field textarea { min-height: 160px; resize: vertical; } .req { color: #a1201a; } /* honeypot - hidden from humans, left in the DOM for bots */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .notice { padding: 14px 16px; border-radius: 4px; margin-bottom: 22px; } .notice-ok { background: #e6f5f2; border: 1px solid #9ed5cb; color: #11453f; } .notice-err { background: #fdecea; border: 1px solid #f0b3ad; color: #7a1c15; } .dl-contact { margin: 0; } .dl-contact dt { font-weight: 600; margin-top: 14px; } .dl-contact dd { margin: 2px 0 0; color: var(--ink-soft); } /* ---------- contact detail placeholders + noscript ---------- */ /* span.cx is empty in the source and replaced with a real on load. */ span.cx { display: inline; } .ns-note { color: #c9cfce; font-size: .9rem; margin: 10px 0 0; } .site-footer .ns-note a { color: var(--accent-lt); } /* ---------- cookie consent banner ---------- */ /* position:fixed keeps it out of normal flow, so revealing it causes no layout shift. [hidden] is enforced explicitly because the class sets display:flex. */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); color: #e8ecec; border-top: 3px solid var(--accent-lt); box-shadow: 0 -4px 18px rgba(0,0,0,.18); padding: 16px 0; } .cookie-banner[hidden] { display: none; } .cookie-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .cookie-text { margin: 0; max-width: 62ch; font-size: .95rem; line-height: 1.55; } .cookie-text a { color: var(--accent-lt); } .cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Accept and Reject are deliberately the SAME size and shape. Refusal must be exactly as easy and as prominent as acceptance. */ .cookie-btn { min-width: 214px; text-align: center; padding: 12px 20px; font-size: .95rem; background: var(--accent-lt); color: #0b2b0c; } .cookie-btn:hover, .cookie-btn:focus { background: #7ef07f; color: #0b2b0c; } .cookie-btn-alt { background: #e8ecec; color: var(--ink); } .cookie-btn-alt:hover, .cookie-btn-alt:focus { background: #fff; color: var(--ink); } .cookie-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 640px) { .cookie-inner { gap: 14px; } .cookie-actions { width: 100%; } .cookie-btn { flex: 1 1 auto; min-width: 0; } } /* footer "Cookie settings" - a real