/** * Marketing family — design tokens, shared utilities and the motion contract. * * A dependency of every marketing stylesheet, so it lands in the head wherever * a marketing block or style is used. Colours were sampled from the One-Touch * design (IMPLEMENTATION-PLAN.md §4.3); weights are tokens because fonts are * inherited from the theme (§4.4). A theme or block can override any of them. * * Declared on :root rather than per block: a styled core block (a display * heading, a checklist) has no marketing wrapper to hang them on. */ :root { --wmb-navy: #00225d; --wmb-navy-ink: #012c7a; --wmb-blue: #038fef; --wmb-arrow: #024c95; --wmb-hub-backplate: #1ab4d7; --wmb-card-bg: #ecf5fc; --wmb-card-border: #a5d1fc; --wmb-text: #16293b; --wmb-list-text: #131518; --wmb-panel-blue-bg: #dff3fd; --wmb-panel-blue-title: #081c7f; --wmb-check-blue: #069cf9; --wmb-panel-green-bg: #eaf8e6; --wmb-panel-green-title: #1c5a0a; --wmb-check-green: #2b7107; --wmb-cta-from: #02265f; /* * D5: the gradient stops short of the design's #038aed, and the design's * cyan (#25b6e0) is lightened, because on the band's bright end it is only * 2.4:1. Measured against #0567c4, the worst point under the text: the * accent phrase (large bold) is 3.6:1, the supporting line 4.7:1. */ --wmb-cta-to: #0567c4; --wmb-cta-accent: #86daf3; --wmb-cta-subline: #ccf1fb; --wmb-contact: #0c1b56; /* * 900 is safe everywhere: font matching falls back to the heaviest loaded * weight, so a site without Lato 900 renders the headline at 700 (D12). */ --wmb-weight-display: 900; --wmb-weight-title: 700; --wmb-weight-body: 400; /* * The unit every marketing size is built from, instead of rem. Bootstrap 3 * (the live webtronOA theme) sets `html { font-size: 10px }`, which shrinks * anything in rem by 37.5% — body text floors of 10px, a 22rem grid track of * 220px. max() floors it at 16px and still follows a visitor's larger * default font size. */ --wmb-rem: max(1rem, 16px); } /* The accent format. Blue by default; a context (the CTA band) re-points it. */ .wmb-accent { color: var(--wmb-accent, var(--wmb-blue)); } /* * Visually hidden but read by crawlers and screen readers — the flow diagram's * one-line summary, for example. Never used to hide copy a sighted visitor * should also see. */ .wmb-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* * The motion contract (§4.8). * * Nothing is hidden unless the head gate has added `wmb-motion` to , so a * crawler, a visitor without JavaScript and a visitor asking for reduced motion * all get the final state. The fail-safe animation reveals everything after * 2.5s if the reveal script never arrives; the script cancels it by arming each * element (`is-armed`) as soon as it has an observer on it. */ @media (prefers-reduced-motion: no-preference) { .wmb-motion .wmb-reveal { transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--wmb-reveal-delay, 0s); } .wmb-motion .wmb-reveal:not(.is-revealed) { opacity: 0; transform: translateY(1.25rem); animation: wmb-reveal-failsafe 0s 2.5s forwards; } .wmb-motion .wmb-reveal.is-armed:not(.is-revealed) { animation: none; } } @keyframes wmb-reveal-failsafe { to { opacity: 1; transform: none; } }