… everything inside adapts

… back to light `data-as-ground` on sets the page default; nested sections override. THE GREEN LAW #B9C896 is the only green. It measures 1.78:1 on white — it fails WCAG at every size, including large display type, because even the large-text bar is 3:1. So it is allowed as a FILL (with ink on it, 6.97:1), as a RULE / marker / border, and as an ICON — but as TEXT only on a dark ground (10.35:1). That rule is enforced here, not by hand: --as-accent-text resolves to ink on a light ground and to the green on a dark one. A component that wants "accent-coloured text" uses --as-accent-text and is correct in both places. Use --as-green directly ONLY for a fill, rule or icon. ========================================================================== */ :root { /* ---------------------------------------------------------------- 1. RAW */ /* Brand. --as-green is the registered accent and is never substituted. */ --as-green: #B9C896; --as-green-tint: #DDE5C1; /* already in use on light bands */ --as-ink: #343434; /* 12.45:1 on white — primary text + fill */ --as-ink-deep: #111418; /* dark section / page ground */ --as-white: #FFFFFF; --as-bone: #F2F1EC; /* off-white band */ /* Greys, chosen to clear AA. The old #7A7A7A was 4.29:1 on white and 4.30:1 on #111418 — under the 4.5:1 bar on BOTH grounds. */ --as-grey: #6A6E66; /* 5.20:1 on white, 4.60:1 on bone */ --as-grey-on-dark: #949890; /* 6.29:1 on #111418 */ /* ------------------------------------------------- 2. CONTEXTUAL (light) */ --as-bg: var(--as-white); --as-bg-alt: var(--as-bone); --as-fg: var(--as-ink); --as-fg-soft: #4A4E48; --as-fg-mute: var(--as-grey); --as-rule: rgba(52, 52, 52, .16); --as-rule-soft: rgba(52, 52, 52, .08); /* Green law: no green text on a light ground. */ --as-accent-text: var(--as-ink); /* Card surfaces sit ON the section ground, so they need their own value — on light they match the paper and are read by their rule; on dark they lift, or they dissolve into the band. */ --as-card-bg: var(--as-white); --as-card-bg-hover:#FAFAF8; /* The primary CTA is the highest-contrast fill available on this ground. A TOKEN, not a `[data-as-ground="dark"] .as-btn` descendant rule — a descendant rule keeps matching inside a light card nested in a dark section and paints white on white. */ --as-btn-primary-bg: var(--as-ink); --as-btn-primary-fg: var(--as-white); --as-shadow: 0 2px 16px rgba(0, 0, 0, .06); --as-shadow-pop: 0 10px 34px -14px rgba(0, 0, 0, .45); /* ------------------------------------------------------------- TYPEFACE */ /* DM Sans only. The theme's Bricolage Grotesque / Kumbh Sans / Roboto defaults are repointed at this in Phase 03. */ --as-font: "DM Sans", system-ui, -apple-system, sans-serif; --as-w-light: 300; --as-w-reg: 400; --as-w-med: 500; --as-w-semi: 600; /* TYPE SCALE — fluid, for everything this system authors. Sizes below are the roles, not a list of every value on the site. NOT applied retroactively to Elementor's per-element sizes. Those are a few hundred hand-tuned values tied to a signed-off visual design; rewriting them would be a redesign, and a risky one. Normalising the FAMILY was the correctness fix — the families were wrong by default, the sizes were merely various. The hand-built pages turned out to share a consistent whole-pixel ramp already (10 11 12 13 14 15 16 17 18 22 30 38); only two fractional outliers existed and were snapped. New work uses the tokens below. */ --as-t-display: clamp(2.75rem, 6.2vw, 5.25rem); --as-t-h1: clamp(2rem, 4.2vw, 3.25rem); --as-t-h2: clamp(1.5rem, 2.9vw, 2.25rem); --as-t-h3: clamp(1.15rem, 1.7vw, 1.375rem); --as-t-lede: clamp(1.0625rem, 1.5vw, 1.1875rem); --as-t-body: 1rem; --as-t-sm: 0.875rem; --as-t-eyebrow: 0.6875rem; --as-lh-tight: 1.08; --as-lh-head: 1.22; --as-lh-body: 1.6; --as-ls-display: -0.02em; --as-ls-head: -0.01em; --as-ls-eyebrow: 0.2em; /* --------------------------------------------------------------- SPACE */ --as-s-1: 4px; --as-s-2: 8px; --as-s-3: 12px; --as-s-4: 16px; --as-s-5: 24px; --as-s-6: 32px; --as-s-7: 48px; --as-s-8: 64px; --as-s-9: 96px; --as-s-10: 128px; --as-gutter: clamp(20px, 5vw, 56px); --as-max: 1280px; --as-measure: 68ch; /* -------------------------------------------------------------- SHAPE */ /* Pills are ACTIONS, rectangles are SURFACES. The logo is a hard-edged boxed wordmark, so cards and panels stay square and share its geometry; anything clickable-as-a-button is a pill. */ --as-r-pill: 30px; --as-r-surface: 0px; --as-r-chip: 2px; --as-r-round: 50%; /* ------------------------------------------------------------- MOTION */ --as-dur-fast: 180ms; --as-dur: 600ms; --as-dur-morph: 420ms; --as-ease: cubic-bezier(.25, .46, .45, .94); --as-ease-out: cubic-bezier(.22, 1, .36, 1); --as-reveal-shift: 20px; --as-stagger: 0ms; /* per-element, set inline by as-reveal */ /* -------------------------------------------------------------- LAYERS */ --as-z-dropdown: 500; --as-z-header: 900; --as-z-scrim: 990; --as-z-drawer: 1000; --as-z-toast: 1100; /* ------------------------------------------------------------- HEADER */ --as-header-h: 105px; --as-header-h-sm: 72px; } /* -------------------------------------------------------------------------- Dark ground. Applies to and to any nested section, so a dark band inside a light page gets it too. -------------------------------------------------------------------------- */ [data-as-ground="dark"] { --as-bg: var(--as-ink-deep); --as-bg-alt: #171B20; --as-fg: #F2F1EA; --as-fg-soft: #C6CABE; --as-fg-mute: var(--as-grey-on-dark); --as-rule: rgba(242, 241, 234, .16); --as-rule-soft: rgba(242, 241, 234, .08); /* Green law: green text IS allowed here — 10.35:1. */ --as-accent-text: var(--as-green); --as-card-bg: #171B20; --as-card-bg-hover:#1C2127; --as-btn-primary-bg: var(--as-white); --as-btn-primary-fg: var(--as-ink); --as-shadow: 0 2px 16px rgba(0, 0, 0, .4); --as-shadow-pop: 0 10px 34px -14px rgba(0, 0, 0, .7); } /* A light band nested inside a dark page. */ [data-as-ground="light"] { --as-bg: var(--as-white); --as-bg-alt: var(--as-bone); --as-fg: var(--as-ink); --as-fg-soft: #4A4E48; --as-fg-mute: var(--as-grey); --as-rule: rgba(52, 52, 52, .16); --as-rule-soft: rgba(52, 52, 52, .08); --as-accent-text: var(--as-ink); --as-card-bg: var(--as-white); --as-card-bg-hover:#FAFAF8; --as-btn-primary-bg: var(--as-ink); --as-btn-primary-fg: var(--as-white); --as-shadow: 0 2px 16px rgba(0, 0, 0, .06); --as-shadow-pop: 0 10px 34px -14px rgba(0, 0, 0, .45); } /* -------------------------------------------------------------------------- Every ground boundary must RE-ASSERT colour. Re-pointing --as-fg is not enough on its own: a heading that never mentions --as-fg inherits the already-computed colour from the ancestor ground, so a light card nested in a dark section rendered near-white text on white. Setting colour here re-establishes the foreground at the boundary; children inherit the corrected value. Background is deliberately NOT set — sections carry photo and video grounds. -------------------------------------------------------------------------- */ /* Deliberately NOT . On body this repainted every page's own text — the services pages, Perspectives and the Elementor pages all set their own body colour, and an attribute selector outranks a bare `body` rule. still carries the ground so that shared COMPONENTS resolve their tokens; it just does not get to restyle content the page already owns. */ [data-as-ground]:not(body) { color: var(--as-fg); } /* ========================================================================== LEGACY VARIABLE BRIDGE The services pages and the Elementor theme read their own variable names (--grey, --e-global-color-text …). Pointing those at a contextual token on :root does NOT work: `--grey: var(--as-fg-mute)` is substituted where it is DECLARED, so it resolves once against :root's light palette and every descendant inherits that same light value — including the ones sitting on #111418, which came out at 3.55:1. Redeclaring per ground is what actually works: the value is computed on the ground element itself, and its descendants inherit the right one. ========================================================================== */ :root, [data-as-ground="light"] { --grey: #6A6E66; --e-global-color-text: #6A6E66; --e-global-color-theme_color_text: #666B6E; --e-global-color-theme_color_meta: #6B7075; } [data-as-ground="dark"] { --grey: #949890; --e-global-color-text: #949890; /* 6.29:1 on #111418 */ --e-global-color-theme_color_text: #A9AEA2; /* 8.2:1 */ --e-global-color-theme_color_meta: #A9AEA2; --e-global-color-theme_color_title: #F2F1EA; /* was #131519 — 1.01:1 here */ } /* ========================================================================== Global focus ring. `outline: none` currently appears in all five services pages, in perspectives/styles.css and in as-contact.css with nothing replacing it — including inside the contact form, which is the conversion point. This is the single replacement; those declarations are deleted. The ring uses --as-green rather than --as-accent-text because an outline is a rule, not text, so the green law permits it on any ground — and it needs to be unmistakably the brand colour wherever it lands. ========================================================================== */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--as-green); outline-offset: 3px; border-radius: var(--as-r-chip); } /* ========================================================================== Reduced motion — one global block for the whole site. Previously honoured in 2 of 14 stylesheets. Scroll reveals must END VISIBLE, not stay hidden, so the reveal classes are reset explicitly rather than relying on transitions being cancelled. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .as-reveal, .elementor-invisible { opacity: 1 !important; transform: none !important; } }