/* ============================================================ mandatio ai — Website site.css — shared responsive rules, reveal animation, hovers Loaded after colors_and_type.css on every page. ============================================================ */ html { scroll-behavior: smooth; } body { background: var(--pergament); overflow-x: hidden; } #root { overflow-x: hidden; } a { color: inherit; } /* ---- Scroll-reveal (frozen-clock safe) ---- Progressive enhancement: visible by default; hidden start-state only applies once JS adds .js-reveal to . The revealed (.is-in) state carries NO transition/animation, so it swaps in instantly and can never get stuck mid-transition if the animation clock is throttled. */ .js-reveal .mn-reveal:not(.is-in) { opacity: 0; transform: translateY(14px); transition: opacity 560ms ease, transform 560ms ease; } .js-reveal .mn-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .mn-reveal:not(.is-in) { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---- Link nav hover ---- */ .mn-link:hover { color: #6B1F2E !important; } /* ---- Feature card hover ---- */ .mn-feat-card { transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease; } .mn-feat-card:hover { box-shadow: 0 4px 20px rgba(26,24,22,0.06); border-color: #CFC8BE; transform: translateY(-2px); } /* ---- Ledger row hover ---- */ .mn-ledger-row { transition: background 180ms ease; } .mn-ledger-row:hover { background: rgba(26,24,22,0.02); } /* ---- Desktop default: hide burger ---- */ .mn-burger { display: none !important; } /* ============ Responsive ============ */ @media (max-width: 1000px) { .mn-foot-cols { grid-template-columns: 1.4fr 1fr 1fr !important; gap: 40px !important; } } @media (max-width: 920px) { .mn-nav-links { display: none !important; } .mn-nav-cta { display: none !important; } .mn-burger { display: inline-flex !important; } .mn-grid3 { grid-template-columns: 1fr !important; } .mn-grid2 { grid-template-columns: 1fr !important; gap: 20px !important; } .mn-asym { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; } .mn-feat-grid { grid-template-columns: 1fr 1fr !important; } .mn-grid4 { grid-template-columns: 1fr 1fr !important; } .mn-ledger { grid-template-columns: 1fr !important; gap: 0 !important; } .mn-stats { grid-template-columns: 1fr 1fr !important; } .mn-stats > div:nth-child(2) { border-right: none !important; } .mn-stats > div:nth-child(1), .mn-stats > div:nth-child(2) { border-bottom: 1px solid var(--hairline) !important; } .mn-fd-row { flex-direction: column !important; gap: 36px !important; padding: 48px 0 !important; } .mn-fd-row > div { order: 2; } .mn-fd-row > div:first-child { order: 1; } .mn-contact-grid { grid-template-columns: 1fr !important; } } @media (max-width: 720px) { .mn-foot-cols { grid-template-columns: 1fr 1fr !important; } .mn-appside { display: none !important; } } @media (max-width: 560px) { .mn-feat-grid { grid-template-columns: 1fr !important; } .mn-form-row { flex-direction: column !important; gap: 20px !important; } .mn-foot-cols { grid-template-columns: 1fr !important; } .mn-stats { grid-template-columns: 1fr !important; } .mn-stats > div { border-right: none !important; border-bottom: 1px solid var(--hairline) !important; } .mn-stats > div:last-child { border-bottom: none !important; } .h1, h1 { font-size: 44px !important; } .h2, h2 { font-size: 30px !important; } } /* Mobile section padding (the page resists haste, but not on phones) */ @media (max-width: 720px) { section, header { } }