/* ========================================================================== Tiny Valley Tots — MODALS (single source of truth) Purpose: • Accessible, centered modal with header/body/footer sections • Neutral styling — colours for buttons come from /css/buttons.css • Works for terms/privacy, generic notices, and confirmations ========================================================================== */ :root{ --modal-bg: #ffffff; --modal-ink: #111827; --modal-line: rgba(0,0,0,.08); --modal-shadow: 0 22px 60px rgba(0,0,0,.22); --modal-radius: 18px; --modal-pad: 16px; --modal-max-w: 720px; /* default modal width */ } /* ===== Overlay container ===== */ .tvt-modal{ position: fixed; inset: 0; z-index: 9000; display: none; /* hidden by default; toggle with .is-open */ align-items: center; justify-content: center; padding: 16px; /* gutter around dialog on small screens */ background: rgba(0,0,0,.40); /* scrim */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .tvt-modal.is-open{ display:flex; } /* Prevent background scroll while open (optional; add .modal-open to ) */ body.modal-open{ overflow: hidden; } /* ===== Dialog card ===== */ .tvt-modal__dialog{ width: min(var(--modal-max-w), 92vw); max-height: 86vh; display: grid; grid-template-rows: auto 1fr auto; /* header, body (scroll), footer */ background: var(--modal-bg); color: var(--modal-ink); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); border: 2px solid var(--modal-line); overflow: hidden; /* keep rounded corners on scroll */ transform: translateY(6px); opacity: .98; animation: tvtModalIn .18s ease-out both; } /* Motion safety */ @media (prefers-reduced-motion: reduce){ .tvt-modal__dialog{ animation: none; transform:none; } } /* Sections */ .tvt-modal__hd{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--modal-line); font-family: "Patrick Hand SC","Patrick Hand",cursive,sans-serif; font-size: 1.25rem; } .tvt-modal__title{ margin: 0; line-height: 1.1; } .tvt-modal__bd{ padding: var(--modal-pad); overflow: auto; line-height: 1.55; } .tvt-modal__ft{ display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px 16px; border-top: 1px solid var(--modal-line); } /* Close button positioning (button colours come from buttons.css) */ .tvt-modal .modal-close{ appearance: none; border: 0; padding: 8px 12px; border-radius: 12px; font-weight: 700; cursor: pointer; } /* Narrow + wide variants */ .tvt-modal--narrow .tvt-modal__dialog{ --modal-max-w: 520px; } .tvt-modal--wide .tvt-modal__dialog{ --modal-max-w: 920px; } /* Full-height sheet for very small devices */ @media (max-width: 480px){ .tvt-modal{ padding: 10px; align-items: flex-end; /* slide-up sheet feel */ } .tvt-modal__dialog{ width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; } .tvt-modal__ft{ justify-content: stretch; } .tvt-modal__ft .btn, .tvt-modal__ft .tvt-btn{ flex: 1 1 auto; justify-content: center; } } /* Simple appear animation */ @keyframes tvtModalIn{ from{ transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===== Content helpers ===== */ .tvt-modal__bd h2, .tvt-modal__bd h3{ font-family: "Patrick Hand SC","Patrick Hand",cursive,sans-serif; margin: .2rem 0 .4rem; } .tvt-modal__bd p{ margin: .5rem 0; } .tvt-modal__bd ul, .tvt-modal__bd ol{ margin: .5rem 0 .5rem 1.25rem; } .tvt-modal__bd a{ text-decoration: underline; } /* If you embed forms inside modals, inputs get a soft ring on focus */ .tvt-modal__bd input:focus, .tvt-modal__bd textarea:focus, .tvt-modal__bd select:focus{ outline: none; box-shadow: 0 0 0 3px rgba(246,215,76,.35); border-color: #e8d35a; } /* ===== Integration with buttons.css ===== - buttons.css already maps modal close buttons to yellow: .tvt-modal .modal-close/.tvt-btn-close { background: var(--tvt-yellow) } - No colours here to avoid conflicts. */