/* ===================================================================== * legal.css — shared "premium legal document" layout * Used by privacy.html, terms.html, disclaimer.html, refund.html. * Apple / Stripe / Notion feel: scannable cards, highlight boxes, * collapsible secondary detail, a contact card. Token-driven; content is * bilingual via inline .legal-ar / .legal-en spans (one structure, two * languages — toggled by the attribute set in i18n.js). * ===================================================================== */ html[lang="ar"] .legal-en { display: none; } html[lang="en"] .legal-ar { display: none; } /* --- header --- */ .pp-header { padding-block: clamp(2.3rem, 5vw, 3.4rem) clamp(1.2rem, 2.5vw, 1.8rem); } /* header text stays at a readable measure, left-anchored, while the band itself spans the full content width so it aligns with the cards below */ .pp-header .display-2, .pp-header .lede { max-width: 44rem; } .pp-updated { font-size: var(--fs-small); color: var(--ink-faint); margin-block-start: 0.7rem; } .pp-badges { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-block-start: 1.5rem; } .pp-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border: 1px solid var(--hair); border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-1); font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); } .pp-badge svg { width: 16px; height: 16px; color: var(--mint-deep); flex: none; } /* --- content column --- */ .pp-content { display: flex; flex-direction: column; gap: 0.85rem; } /* Section cards flow down one column then the next (CSS multi-column), so each card sits directly under the previous one — no mid-layout voids from a tall card forcing a gap beside a short one. */ .pp-cards { columns: 2; column-gap: 0.8rem; } .pp-cards > .pp-card { break-inside: avoid; margin: 0 0 0.8rem; } @media (max-width: 760px) { .pp-cards { columns: 1; } } /* An unusually long section can span both columns so it doesn't unbalance the masonry; its list then runs two-up to use the width. */ .pp-cards > .pp-card--wide { column-span: all; } .pp-card--wide .pp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; } @media (max-width: 600px) { .pp-card--wide .pp-list { grid-template-columns: 1fr; } } .pp-section-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--ink); margin: 0.4rem 0 0; scroll-margin-block-start: calc(var(--nav-h) + 1.2rem); } /* icon badge (mint tile), shared by section cards, details + contact */ .pp-ic { display: grid; place-items: center; border-radius: 12px; background: var(--mint-pale); color: var(--mint-deep); } /* --- section cards --- */ .pp-card { padding: clamp(1rem, 2.4vw, 1.35rem); border: 1px solid var(--hair); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--shadow-card); scroll-margin-block-start: calc(var(--nav-h) + 1.2rem); } .pp-card-head { display: flex; align-items: center; gap: 0.7rem; margin-block-end: 0.6rem; } .pp-ic { flex: none; width: 42px; height: 42px; } .pp-ic svg { width: 22px; height: 22px; } .pp-card-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.25; } .pp-card p { color: var(--ink-soft); line-height: 1.6; margin-block: 0.4rem; font-size: var(--fs-base); max-width: 66ch; } .pp-card p:first-of-type { margin-block-start: 0; } .pp-card a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .pp-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .pp-list li { position: relative; padding-inline-start: 1.4rem; color: var(--ink-soft); line-height: 1.6; font-size: var(--fs-base); max-width: 66ch; } .pp-list li::before { content: ""; position: absolute; inset-inline-start: 0.25rem; inset-block-start: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); } .pp-list li b { color: var(--ink); font-weight: 700; } /* --- highlighted info boxes --- */ .pp-note { display: flex; gap: 0.6rem; align-items: flex-start; margin-block-start: 0.75rem; padding: 0.7rem 0.85rem; border-radius: var(--radius-md); background: var(--mint-pale); border-inline-start: 3px solid var(--mint-deep); } .pp-note svg { flex: none; width: 20px; height: 20px; color: var(--mint-deep); margin-block-start: 0.1rem; } .pp-note b { color: var(--ink); font-weight: 700; display: block; font-size: var(--fs-base); } .pp-note span { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; } /* danger variant for warnings (e.g. medical disclaimer) */ .pp-note--warn { background: rgba(178, 58, 48, 0.08); border-inline-start-color: var(--danger); } .pp-note--warn svg { color: var(--danger); } /* --- collapsible secondary details --- */ .pp-more { display: flex; flex-direction: column; gap: 0.7rem; scroll-margin-block-start: calc(var(--nav-h) + 1.2rem); } .pp-details { border: 1px solid var(--hair); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--shadow-card); overflow: hidden; } .pp-details summary { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; list-style: none; padding: clamp(1rem, 2.6vw, 1.3rem) clamp(1.1rem, 3vw, 1.5rem); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink); } .pp-details summary::-webkit-details-marker { display: none; } .pp-details summary .pp-ic { width: 36px; height: 36px; } .pp-details summary .pp-ic svg { width: 19px; height: 19px; } .pp-chev { margin-inline-start: auto; color: var(--ink-mute); transition: transform var(--dur-base) var(--ease-out); flex: none; } .pp-details[open] summary .pp-chev { transform: rotate(180deg); } .pp-details summary:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: -3px; border-radius: var(--radius-xl); } .pp-details-body { padding: 0 clamp(1.1rem, 3vw, 1.5rem) clamp(1.1rem, 3vw, 1.4rem); } .pp-details-body p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 0.6rem; font-size: var(--fs-base); } .pp-details-body p:last-child { margin-block-end: 0; } .pp-details-body .pp-list { margin-block-start: 0; } /* --- contact card --- */ .pp-contact { text-align: center; padding: clamp(1.4rem, 3.5vw, 2rem); border: 1px solid var(--hair); border-radius: var(--radius-xl); background: linear-gradient(165deg, var(--mint-pale), var(--paper) 70%); box-shadow: var(--shadow-card); scroll-margin-block-start: calc(var(--nav-h) + 1.2rem); } .pp-contact .pp-ic { width: 44px; height: 44px; margin: 0 auto 0.7rem; } .pp-contact .pp-ic svg { width: 24px; height: 24px; } .pp-contact h2 { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); margin: 0 0 0.5rem; } .pp-contact p { color: var(--ink-soft); max-width: 38ch; margin: 0 auto 1.3rem; line-height: 1.6; font-size: var(--fs-base); } .pp-contact p a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; } .pp-contact-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }