/* ========================================================================== StilUp — legal & support documents (/privacy, /terms, /support) Loaded only by resources/views/legal/layout.blade.php, AFTER /site/styles.css, which supplies: the 21 :root tokens, the `* { margin:0; padding:0 }` reset, body, html { scroll-behavior: smooth }, :focus-visible, .eyebrow, .btn*, the whole .nav block, the whole .footer block, and the prefers-reduced-motion block. styles.css is NEVER modified — every adjustment here is scoped to .legal-page (the class), which both makes this file incapable of altering the landing page and wins on specificity over styles.css's single-class rules without a single !important. Mobile-first: one @media (min-width: 1024px) query for the two-column rail, plus two max-width refinements that reuse styles.css's own 860/560 stops. There is deliberately no `max-width: 1023px` query, so no fractional-zoom dead zone can exist between the breakpoints. CRITICAL: styles.css:28 zeroes every default margin and every list padding-left. A prose page must therefore author all of it. That is most of what this file is. If this file fails to load, these pages are not "unstyled" — they are an unreadable margin-less slab. See the test. ========================================================================== */ /* The brand palette is light-only by construction (styles.css has no prefers-color-scheme and no [data-theme] block anywhere). Declaring it stops the UA painting dark form controls and scrollbars against a permanently pale page — which is what the old legal layout's `color-scheme: light dark` did. Must sit on the root element to take effect. */ :root { color-scheme: light; } .legal-page { --nav-h: 74px; /* static fallback; overwritten at runtime from the real box */ --rail-w: 260px; --sheet-w: 772px; /* 260 + 40 gap + 772 = 1072 = the chrome's content box */ --measure: 66ch; /* ~68 characters of Plus Jakarta Sans at 17px */ --anchor-off: calc(var(--nav-h) + 18px); } /* ---------- skip link ---------- */ .legal-page .skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--white); color: var(--iris-deep); font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-card); transition: top .15s ease; } .legal-page .skip-link:focus { top: 12px; } /* ---------- chrome adjustments (nav + footer come from styles.css) ---------- Footer colours are deliberately NOT overridden: the footer must render identically to the landing page's, which is the one component a visitor sees twice within ten seconds. --muted's marginal contrast is inherited and applies equally to `/`; the fix belongs upstream, not here. */ .legal-page .nav-links a[aria-current="page"], .legal-page .footer-links a[aria-current="page"] { color: var(--iris-deep); font-weight: 600; } /* ---------- shell ---------- Single column by default. The sheet is 772px wide in BOTH modes (820 - 48 of gutter), so the measure never changes when the rail appears. */ .legal-page .doc-shell { max-width: 820px; margin: 0 auto; padding: 36px 24px 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .legal-page .doc-rail, .legal-page .doc { min-width: 0; } /* ---------- table of contents (built by the layout's script) ---------- */ .legal-page .doc-toc summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--iris-deep); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; } .legal-page .doc-toc summary::-webkit-details-marker { display: none; } .legal-page .doc-toc summary::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--iris-deep); transition: rotate .2s ease; } .legal-page .doc-toc[open] summary::after { rotate: 45deg; } .legal-page .doc-toc-list { list-style: none; margin: 10px 0 0; padding: 10px; display: grid; gap: 1px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); } .legal-page .doc-toc-link { display: block; text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--ink-soft); padding: 7px 12px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; transition: color .15s ease, background .15s ease, border-color .15s ease; } .legal-page .doc-toc-link:hover { color: var(--iris-deep); background: var(--lavender-soft); } /* The active pair (--iris-deep on --lavender-soft, 5.5:1) is the same combination styles.css already ships for .lang-btn.is-active and .bt-btn.is-active. */ .legal-page .doc-toc-link.is-active { color: var(--iris-deep); font-weight: 700; background: var(--lavender-soft); border-left-color: var(--iris); } .legal-page .doc-toc-list .is-sub .doc-toc-link { padding-left: 26px; font-size: 13px; } /* ---------- language note ---------- */ .legal-page .doc-note { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .legal-page .doc-note a { color: var(--iris-deep); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: break-word; } /* ---------- wide: rail + sheet ---------- Gated on .has-toc, which the script adds only after the rail is populated — so with JS off (or no heading ids) the page stays a single centred column instead of leaving a 260px empty gutter beside the sheet. */ @media (min-width: 1024px) { .legal-page.has-toc .doc-shell { max-width: 1120px; padding-top: 52px; grid-template-columns: var(--rail-w) minmax(0, var(--sheet-w)); grid-template-areas: "rail doc" "note doc"; grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 24px; } .legal-page.has-toc .doc-rail { grid-area: rail; position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; } .legal-page.has-toc .doc { grid-area: doc; } .legal-page.has-toc .doc-note { grid-area: note; } /* The disclosure drops its pill and becomes a quiet rail heading. */ .legal-page.has-toc .doc-toc summary { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 2px 12px; color: var(--ink-soft); } /* In rail mode the disclosure is permanently open and the summary is acting as a plain heading, so the marker is removed: a rotated "+" reads as a dismiss affordance, and collapsing the rail would hide the list with no visible control left to reopen it. The toggle is also pinned open in the layout's script, which covers keyboard activation too. */ .legal-page.has-toc .doc-toc summary::after { content: none; } .legal-page.has-toc .doc-toc summary { cursor: default; } .legal-page.has-toc .doc-toc-list { margin-top: 12px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; } .legal-page.has-toc .doc-toc-link { border-left-color: var(--line); } .legal-page.has-toc .doc-toc-link.is-active { border-left-color: var(--iris); } } /* ---------- the document sheet ---------- --white on --cloud at var(--radius) with var(--shadow-card) is exactly how styles.css draws .step and .faq-item. At 772px the .07-alpha shadow alone reads flat, so a --line hairline carries the edge (the border + shadow pairing .plan-popular already uses). */ .legal-page .doc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: clamp(28px, 3.4vw, 48px) clamp(22px, 4vw, 52px) clamp(36px, 4.4vw, 56px); scroll-margin-top: var(--anchor-off); } .legal-page .doc:focus { outline: none; } /* Same specificity as the rule above, declared after it, so the skip link's target still shows a ring for keyboard users. */ .legal-page .doc:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; } .legal-page .doc-body { max-width: var(--measure); font-size: 17px; line-height: 1.7; color: var(--ink); } /* ---------- masthead ---------- The element keeps styles.css's .eyebrow class for identity, but every property the prose rules below would otherwise clobber is restated here at (0,3,0). Values are copied verbatim from styles.css:47-54. */ .legal-page .doc-body > .eyebrow { font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--iris-deep); /* --iris is 4.47:1 on white; --iris-deep is 6.3:1 */ margin: 0 0 12px; } .legal-page .doc-body h1 { /* .section-title's own clamp, not an invented one. */ font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: 0 0 12px; text-wrap: balance; } /* Purely typographic ON PURPOSE. privacy and terms put a date in .updated; support puts the tagline "We're here to help". Any date-shaped treatment — badge, pill, calendar glyph, monospace — would render that tagline as a fake timestamp. The hairline below does the masthead work instead. */ .legal-page .doc-body > .updated { font-size: 15.5px; font-weight: 500; line-height: 1.6; color: var(--ink-soft); margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } /* The lead paragraph. All three pages open with one directly after .updated. */ .legal-page .doc-body > .updated + p { font-size: 18px; color: var(--ink-soft); margin-bottom: 26px; } /* ---------- headings ---------- The h2 hairline is the load-bearing typographic decision: it turns terms' 17 flat clauses and privacy's 11 into visibly discrete, countable units. */ .legal-page .doc-body h2 { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: 44px 0 16px; padding-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: var(--anchor-off); text-wrap: balance; } .legal-page .doc-body h3 { font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--ink); margin: 30px 0 8px; scroll-margin-top: var(--anchor-off); text-wrap: balance; } .legal-page .doc-body h4 { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 24px 0 6px; scroll-margin-top: var(--anchor-off); } .legal-page .doc-body h5, .legal-page .doc-body h6 { font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 20px 0 6px; } /* Stops 44+30px of stacked margin opening a hole at privacy 1 -> 1.1 and at support's "Getting started" -> "Building your closet". */ .legal-page .doc-body h2 + h3 { margin-top: 22px; } .legal-page .doc-body h3 + h4 { margin-top: 16px; } /* Headings receive focus only programmatically, from the hashchange handler. The scroll plus the active rail entry are the indicator; a 3px ring around a 24px heading reads as a rendering fault. */ .legal-page .doc-body h1:focus, .legal-page .doc-body h2:focus, .legal-page .doc-body h3:focus, .legal-page .doc-body h4:focus { outline: none; } /* ---------- prose ---------- */ .legal-page .doc-body p { margin: 0 0 22px; text-wrap: pretty; } .legal-page .doc-body ul, .legal-page .doc-body ol { margin: 0 0 22px; padding-left: 26px; } .legal-page .doc-body ul { list-style: disc outside; } .legal-page .doc-body ol { list-style: decimal outside; padding-left: 28px; } .legal-page .doc-body li { margin: 0 0 12px; text-wrap: pretty; } .legal-page .doc-body li:last-child { margin-bottom: 0; } /* A neutral brand-tinted disc — never a check mark. support.blade.php's three-step iOS cancellation procedure is marked up as a