/* Legal / Dark theme variables and styles Included on pages that opt into the legal theme. Use by adding and `` to the page. */ /* Accessible, readable legal theme - NO pure white page background (use a soft neutral) - NO dark-blue containers with near-black text (avoid low contrast) - Keep typography dark on light surfaces for readability */ .page-legal, .theme-legal { --bg: #f3f4f6; /* soft neutral page background (not pure white) */ --ink: #0f172a; /* dark slate ink for high contrast */ --muted: #475569; /* muted slate for secondary text */ --card: #fbfcfd; /* very light card surface (soft, not stark white) */ --card-deeper: #eef2f6;/* slightly deeper neutral for grouped panels */ --line: rgba(15,23,42,.06); /* subtle divider in dark-on-light context */ --accent: #1e40af; /* accessible blue accent */ } .page-legal{ margin-block: 2rem 3rem; color: var(--ink); background: var(--bg); } .page-legal a{ color: var(--accent); text-decoration: underline; } .page-legal .meta{ color: var(--muted); margin:.5rem 0 0; } /* lightweight ghost card for spacing */ .card-ghost{ background: transparent; padding: 1.25rem 0 0; } /* card-deep: still light, but slightly set apart from the page background */ .card-deep{ background: var(--card-deeper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(11,17,34,.06); padding: 1rem 1rem 0.9rem; } .page-legal h1{ font-size: clamp(2rem, 3vw, 2.6rem); margin: 0 0 .4rem; } .page-legal h2{ font-size: clamp(1.35rem, 2.2vw, 1.65rem); margin: .25rem 0 1rem; } .page-legal h3{ margin: 1.1rem 0 .35rem; font-size: 1.05rem; } .summary-box{ margin-top: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: clip; } .summary-box > summary{ cursor: pointer; list-style: none; padding: .85rem 1rem; font-weight: 700; position: relative; } .summary-box > summary::-webkit-details-marker{ display:none; } .summary-box > summary:after{ content: "▾"; position: absolute; right: .9rem; top: .9rem; opacity:.85; } .summary-box[open] > summary:after{ transform: rotate(180deg); } .summary-box > *:not(summary){ padding: 0 1rem 1rem 1.25rem; color: var(--ink); } .legal-content p{ margin:.35rem 0 .6rem; color: var(--ink); } .legal-content ul{ margin:.25rem 0 .9rem 1.1rem; } .legal-content li + li{ margin-top:.25rem; } .eyebrow{ color: var(--muted); margin: -0.4rem 0 1rem; } .page-legal table{ width:100%; border-collapse: separate; border-spacing:0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .page-legal th, .page-legal td{ padding:.7rem 1rem; border-bottom: 1px solid var(--line); } .page-legal thead th{ background: rgba(255,255,255,.04); } .page-legal tbody tr:last-child td{ border-bottom: 0; } @media (max-width: 900px){ .page-legal{ margin-block: 1.25rem 2rem; } .card-deep{ padding: 0.9rem; border-radius: 12px; } } /* Helper: use `.card-group` to consolidate multiple related cards into a single visual group. Aim to keep no more than six meaningful card containers per page. Where more logical grouping exists, wrap items in `.card-group` and break into accordions or summaries. */ .card-group{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0 0 1rem 0; padding: 0.5rem; background: transparent; } .card-group > .card{ margin: 0; /* remove stacked margins to make group tidy */ background: var(--card); border: 1px solid var(--line); } /* Utility: when you have many cards, wrap extras in a details/summary for consolidation */ .card-group .more-toggle{ display:block; text-align:center; margin-top:.5rem }