/* Additions on top of tailwind.css (the live site's compiled stylesheet, copied as-is). Keep this file small: accessibility, the no-framework mobile menu, and the FAQ. */ [hidden] { display: none !important; } picture { display: contents; } html { scroll-padding-top: 5.5rem; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Skip link */ .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: #123024; color: #F3EFE7; padding: .75rem 1rem; border-radius: 3px; font-weight: 600; } .skip-link:focus { top: 1rem; } main:focus { outline: none; } /* Visible keyboard focus everywhere, light ring on dark sections. */ :focus-visible { outline: 3px solid #A35E00; outline-offset: 3px; } .bg-\[\#123024\] :focus-visible, footer :focus-visible, .bg-\[\#3D865E\] :focus-visible, [style*="rgb(18, 48, 36)"] :focus-visible { outline-color: #E6D3AC; } /* Tap targets: at least 44px tall. */ header .h-10 { height: 2.75rem; } .menu-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } @media (max-width: 1023px) { .menu-toggle { display: inline-flex; } } .menu-toggle[aria-expanded="true"] .lucide-menu, .menu-toggle[aria-expanded="false"] .lucide-x { display: none; } header nav a { min-height: 44px; display: inline-flex; align-items: center; } #mobile-nav .flex-col { gap: 0; padding-top: .5rem; padding-bottom: .5rem; } footer ul.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; } footer ul a, footer .border-t a { min-height: 44px; display: inline-flex; align-items: center; } footer .w-10.h-10 { width: 44px; height: 44px; } main .h-11, main .h-10 { min-height: 44px; } main [aria-hidden="true"] .h-10 { min-height: 0; } /* decorative quiz mockup */ /* Standalone text links ("Learn About Tax Strategy"): a 44px-tall hit area centred on the link, without changing the layout. */ main a.flex:not(.h-11):not(.h-10), main a.inline-flex:not(.h-11):not(.h-10) { position: relative; } main a.flex:not(.h-11):not(.h-10)::after, main a.inline-flex:not(.h-11):not(.h-10)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* FAQ (native details/summary in place of the React accordion). */ .faq-item summary { list-style: none; cursor: pointer; display: flex; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .faq-q { font: inherit; margin: 0; } .faq-item summary svg { transition: transform .2s; } .faq-item[open] summary svg { transform: rotate(180deg); } .faq-item:last-child { border-bottom-width: 0; } /* Scroll reveal, same as the live site: 24px rise + fade over 400ms, staggered by data-reveal="". The text is always in the HTML; it is only hidden once the inline script in has added .reveal-js, and site.js reveals it. If site.js never runs, the inline script removes .reveal-js after 2.5s. */ @media (prefers-reduced-motion: no-preference) { .reveal-js [data-reveal] { transition: opacity 400ms ease-out, transform 400ms ease-out; } .reveal-js [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(24px); } } @media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }