/* ========================================================================== Burns Landscaping — Accessibility & shared-chrome overrides Loaded LAST on every page (after shared.css / inline page styles). Covers: WCAG 2.1 AA colour contrast, visible focus, skip link, motion pause control, reduced-motion, mobile nav (also for index.html which does not load shared.css), form status messages, legal page prose. ========================================================================== */ :root { --stone-text: #5E4F38; /* stone, darkened for text on cream/parch (>6:1) */ --gold-text: #7E5F3B; /* gold, darkened for text on cream (5.2:1) */ --dim-text: rgba(250,250,248,0.62); /* muted text on dark (≈7:1) */ --dim-text-2: rgba(250,250,248,0.56); --focus: #D9B27E; } /* -------------------------------------------------------------------------- Skip link -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 10000; background: var(--gold, #B8966E); color: #090F09; font-family: 'Outfit', system-ui, sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 0.8rem 1.2rem; border-radius: 2px; transition: top 0.2s ease; } .skip-link:focus, .skip-link:focus-visible { top: 1rem; outline: 3px solid #090F09; outline-offset: 2px; } /* -------------------------------------------------------------------------- Visible keyboard focus (mouse clicks keep the original quiet look) -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(9,15,9,0.85); border-radius: 2px; } .fi:focus-visible, .fta:focus-visible, .fsel:focus-visible { outline-offset: 0; box-shadow: 0 0 0 4px rgba(217,178,126,0.25) !important; } .btn-gold:focus-visible, .fsub:focus-visible, .mobile-cta-btn:focus-visible { outline-color: #FAFAF8 !important; } main:focus { outline: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Colour contrast fixes (AA, 4.5:1 for body text) -------------------------------------------------------------------------- */ /* Footer */ .f-tagline { color: var(--dim-text-2) !important; } .f-links a { color: var(--dim-text) !important; } .f-links a:hover, .f-links a:focus-visible { color: #FAFAF8 !important; } .f-soc { color: var(--dim-text) !important; } .f-copy { color: var(--dim-text-2) !important; } .f-card { color: var(--dim-text) !important; } .taskgrid-credit { color: var(--dim-text-2) !important; } .taskgrid-credit a { color: var(--dim-text) !important; text-decoration: underline; text-underline-offset: 3px; } .f-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 1.1rem; } .f-legal a { font-size: 0.78rem; font-weight: 300; color: var(--dim-text); text-decoration: none; letter-spacing: 0.02em; } .f-legal a:hover, .f-legal a:focus-visible { color: #FAFAF8; text-decoration: underline; text-underline-offset: 3px; } .f-col h3 { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold, #B8966E); margin-bottom: 1.4rem; font-family: 'Outfit', system-ui, sans-serif; } .f-links span { font-size: 0.875rem; font-weight: 300; color: var(--dim-text-2); } /* Eyebrows / small stone text on cream */ .eyebrow { color: var(--stone-text) !important; } .eyebrow--gold { color: var(--gold, #B8966E) !important; } /* only used on dark sections */ .eyebrow--gold::before { background: var(--gold, #B8966E) !important; } .bb-intro-zero small, .scol h3, .comp-type, .value-title { color: var(--stone-text) !important; } .comp-type--bb { color: var(--gold, #B8966E) !important; } .spot--ba .spot-eyebrow { color: var(--gold-text) !important; } .spot--ba .spot-eyebrow::before { background: var(--gold-text) !important; } .pillar-num { color: rgba(250,250,248,0.5) !important; } /* 64px display numbers, ≥3:1 */ .how-step-n { color: var(--stone, #8C7B5E) !important; } .comp-bar-label { color: #5A5A54 !important; } .comp-bar-label--bb { color: rgba(250,250,248,0.72) !important; } .svc-sel-label { color: rgba(250,250,248,0.62) !important; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; } /* Marquee (index) — darker band so light text passes */ .marquee { background: #6F6049 !important; } .mq-item { color: rgba(250,250,248,0.94) !important; } /* Form labels & placeholders */ .fl { color: rgba(250,250,248,0.72) !important; } .fi::placeholder, .fta::placeholder { color: rgba(250,250,248,0.5) !important; } .fsel option { color: #1A1A18; background: #FAFAF8; } /* Portfolio filter + captions */ .f-btn { color: rgba(250,250,248,0.66) !important; border-color: rgba(250,250,248,0.18) !important; } .f-btn:hover, .f-btn.active, .f-btn[aria-pressed="true"] { color: var(--gold, #B8966E) !important; border-color: var(--gold, #B8966E) !important; } .chapter-cta-text { color: var(--dim-text) !important; } /* Placeholder content boxes (About / Contact until real copy is supplied) */ .ph-label { color: rgba(217,178,126,0.9) !important; } .ph-label--dark { color: rgba(26,26,24,0.85) !important; } /* About page (July 2026 content with inline colours) */ .pillar p { color: rgba(250,250,248,0.66) !important; } .about-area-map span { color: var(--stone-text) !important; } /* Home stat caption (mobile contrast) */ .billing-n small { color: rgba(217,178,126,0.95) !important; } /* Balanced-billing service toggles */ .svc-toggle-name { color: rgba(250,250,248,0.72) !important; } /* Images never stay invisible if a JS 'loaded' hook is missing */ img[loading] { opacity: 1 !important; } /* Text in links/buttons must not rely on colour alone inside prose */ .legal a, .cd-value a, main a:not([class]) { text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- Motion pause control (WCAG 2.2.2 Pause, Stop, Hide) -------------------------------------------------------------------------- */ #motion-toggle { position: fixed; left: 1rem; bottom: 1rem; z-index: 9990; display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(9,15,9,0.82); color: rgba(250,250,248,0.9); border: 1px solid rgba(250,250,248,0.25); border-radius: 999px; padding: 0.55rem 0.95rem; cursor: pointer; font-family: 'Outfit', system-ui, sans-serif; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.3s, border-color 0.3s; } #motion-toggle:hover { border-color: var(--gold, #B8966E); background: rgba(9,15,9,0.95); } #motion-toggle svg { flex-shrink: 0; } @media (max-width: 600px) { #motion-toggle { padding: 0.55rem 0.7rem; font-size: 0.66rem; } } @media print { #motion-toggle, .skip-link, #scroll-progress, #page-overlay, .nav-toggle { display: none !important; } } /* When motion is paused (via the toggle or the OS reduced-motion setting), every CSS animation halts and reveal transitions become instant. */ .motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .motion-paused .li, .motion-paused .rf, .motion-paused .rs, .motion-paused .rsc, .motion-paused .img-reveal, .motion-paused .rotate-in, .motion-paused .stagger-child { opacity: 1 !important; transform: none !important; } .motion-paused #mouse-glow, .motion-paused .hero-canvas, .motion-paused canvas.particles { display: none !important; } .motion-paused .marquee-track { animation: none !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } .li, .rf, .rs, .rsc, .img-reveal, .rotate-in, .stagger-child { opacity: 1 !important; transform: none !important; } .marquee-track { animation: none !important; } #mouse-glow, .hero-canvas { display: none !important; } } /* -------------------------------------------------------------------------- Form status messages (shared handler in site.js) -------------------------------------------------------------------------- */ .form-error { background: rgba(220,80,80,0.12); border: 1px solid rgba(220,80,80,0.35); color: #F0A0A0; padding: 0.8rem 1rem; border-radius: 4px; font-size: 0.85rem; line-height: 1.5; font-family: 'Outfit', system-ui, sans-serif; margin-bottom: 0.25rem; } .form-error:focus { outline: 2px solid #F0A0A0; outline-offset: 2px; } .form-success { background: rgba(91,168,122,0.12); border: 1px solid rgba(91,168,122,0.35); color: #9ADBB4; padding: 1.25rem 1.5rem; border-radius: 4px; font-size: 0.92rem; line-height: 1.6; font-family: 'Outfit', system-ui, sans-serif; } .form-success strong { display: block; margin-bottom: 0.25rem; color: #FAFAF8; } .form-success:focus { outline: 2px solid #9ADBB4; outline-offset: 2px; } .req { color: #D9B27E; margin-left: 0.2rem; } .fconsent { margin: 0.35rem 0 0.9rem; line-height: 1.6; color: rgba(250,250,248,0.7); } .fconsent a { color: #D9B27E; text-decoration: underline; text-underline-offset: 3px; } .fhint { font-size: 0.72rem; color: var(--dim-text-2); margin-top: -0.4rem; margin-bottom: 0.5rem; font-family: 'Outfit', system-ui, sans-serif; } /* -------------------------------------------------------------------------- Mobile navigation — a11y additions over the CSS checkbox menu in shared.css (#nav-cb:checked drives the slide-in; site.js upgrades the labels to buttons) -------------------------------------------------------------------------- */ .nav-toggle, .mobile-nav-close { min-width: 44px; min-height: 44px; } .nav-toggle { border-color: rgba(255,255,255,0.22) !important; } .mobile-nav-close { border-color: rgba(255,255,255,0.18) !important; color: #FAFAF8; } .mobile-nav { visibility: hidden; transition: transform 0.48s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.48s !important; } #nav-cb:checked ~ .mobile-nav, .mobile-nav.open { visibility: visible; transition-delay: 0s !important; } .mobile-nav-links li a { color: rgba(250,250,248,0.78) !important; } .mobile-nav-links li a[aria-current="page"] { color: var(--gold, #B8966E) !important; } .mobile-nav nav { flex: 1; } /* Inner