/* Long-form document pages (privacy, terms, support, …) on eoblend.com. Loads after base.css, which owns the palette, section themes, typography, header, and footer. This sheet is only about reading a lot of text. */ /* These pages open on a .theme-dark section rather than the landing hero's beige, so the top of the canvas follows. Keep in step with the theme-color meta in each page's . */ :root { --page-top:var(--pink); } /* Title band ---------------------------------------------------------- Sits under the header in the same section, so it needs less top padding than a standalone .section-pad would give it. */ .page-head { text-align:center; padding:clamp(30px,4.5vw,52px) 24px clamp(52px,7vw,84px); } /* Charcoal, which is what the pink theme already supplies; stated explicitly so the title stays dark if the band ever changes theme. */ .page-head h1 { color:var(--charcoal); } .page-head .meta { margin-top:12px; font-size:.92rem; opacity:.7; } .page-head .accent-rule { height:4px; width:64px; border-radius:4px; background:var(--gold); margin:26px auto 0; } /* The wave above already supplies breathing room, so the document needs less top padding than .section-pad gives it. */ .doc-body { padding-top:clamp(34px,4.5vw,58px); } /* Prose --------------------------------------------------------------- A single measure for the whole document. 74ch keeps lines readable; the taller line-height suits dense legal copy better than the site default. */ .prose { max-width:74ch; margin:0 auto; line-height:1.7; } /* Clear the browser's own margins first, then own the vertical rhythm here. Both rules are single-class specificity, so the later one wins and the per-element rules further down can't silently cancel them. */ .prose > * { margin:0; } .prose > * + * { margin-top:1.1em; } .prose .lead { font-size:1.15rem; max-width:none; } /* Section headings get a short gold rule underneath them, which does the work of a horizontal divider without drawing a full line across the measure. */ /* The gap above and below the rule is the same 1.15rem. It's in rem, not em, so the two don't drift apart with the heading's and the body's differing font sizes; the +3px covers the rule's own height. */ .prose h2 { font-size:clamp(1.55rem,3vw,1.95rem); margin-top:2.4em; padding-bottom:calc(1.15rem + 3px); position:relative; } .prose h2::after { content:""; position:absolute; bottom:0; left:0; width:48px; height:3px; border-radius:3px; background:var(--gold); } .prose h2 + * { margin-top:1.15rem; } /* An h3 straight after an h2 would otherwise use its own larger top margin. */ .prose h2 + h3 { margin-top:1.15rem; } /* Sub-headings switch to the body face, so they read as labels rather than competing with the serif h2s. */ .prose h3 { font-family:var(--body-font); font-weight:700; font-size:1.05rem; letter-spacing:0; line-height:1.4; margin-top:1.9em; } .prose h3 + * { margin-top:.4em; } /* No margin here: the flow rules above own it, and setting it would override them, since this selector is more specific and comes later. */ .prose ul { padding-left:22px; } .prose li + li { margin-top:.5em; } .prose a { font-weight:600; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; text-decoration-thickness:2px; } .prose a:hover { color:var(--gold); } /* Summary callout: a gold wash, for the "short version" box. */ .tldr { background:rgba(231,169,70,.13); border-radius:var(--radius); padding:24px 26px; margin-top:1.8em; } .tldr strong { display:block; margin-bottom:6px; } /* Warning callout, for the safety notice on the terms page. */ .callout { background:rgba(211,47,47,.07); border-radius:var(--radius); padding:24px 26px; margin-top:1.8em; } .callout h2 { margin-top:0; padding-bottom:0; color:#b3261e; font-size:clamp(1.35rem,2.6vw,1.6rem); } .callout h2::after { display:none; } /* Tables -------------------------------------------------------------- Wrapped in .table-scroll so a wide table scrolls itself instead of the page. Hairlines are tinted charcoal so they sit on any light section. */ .table-scroll { overflow-x:auto; margin-top:1.2em; } .prose table { width:100%; border-collapse:collapse; font-size:.94rem; line-height:1.5; min-width:520px; } .prose th, .prose td { text-align:left; padding:12px 14px; vertical-align:top; border-bottom:1px solid rgba(68,67,64,.14); } .prose th { font-weight:700; white-space:nowrap; border-bottom-color:rgba(68,67,64,.3); } .prose tr:last-child td { border-bottom:0; } /* Inline path hint, e.g. Settings → Delete account. Deliberately allowed to wrap: a three-step path is wider than a phone screen, and since sections clip their overflow the tail would just be cut off. box-decoration-break gives each wrapped fragment its own padding and rounded ends instead of one shape sliced in half. */ .path { font-weight:600; background:rgba(68,67,64,.08); border-radius:7px; padding:1px 7px; font-size:.95em; -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* Contact block (support page) ----------------------------------------- */ .contact { text-align:center; } .contact .email { display:inline-block; margin:2px 0 8px; font-family:var(--heading-font); font-size:1.35rem; } /* FAQ (support page) --------------------------------------------------- Hairline-separated rows rather than cards, to stay quiet on the page. */ .faq { margin-top:1.4em; } .faq > div { border-top:1px solid rgba(68,67,64,.16); padding:20px 0 4px; } .faq > div:last-child { border-bottom:1px solid rgba(68,67,64,.16); } .faq h3 { margin-top:0; } .faq h3 + p { margin-top:.4em; } /* Forms ---------------------------------------------------------------- The form sits on a surface lighter than the cream section behind it. The Squarespace palette has nothing lighter than cream, so this warm white is the one colour on the site from outside it. */ :root { --paper:#fffdfa; } .form-card { background:var(--paper); border:1px solid rgba(68,67,64,.10); border-radius:var(--radius); padding:clamp(22px,3.5vw,30px); margin-top:1.6em; } .field { margin-top:20px; } .field:first-child { margin-top:0; } .field-label { display:block; font-weight:700; font-size:.95rem; margin-bottom:8px; } .req { color:#b3261e; font-weight:700; } .opt { font-weight:400; opacity:.65; } input[type=text], input[type=email], select, textarea { width:100%; font-family:inherit; font-size:1rem; color:var(--charcoal); background:var(--cream); border:1px solid rgba(68,67,64,.22); border-radius:12px; padding:11px 13px; line-height:1.5; } select { -webkit-appearance:none; appearance:none; background-image:none; } textarea { min-height:88px; resize:vertical; } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(231,169,70,.3); } .choice { display:flex; align-items:flex-start; gap:10px; margin-top:10px; font-size:1rem; } .choice input { margin-top:5px; flex:none; accent-color:var(--gold); } /* Irreversible-action acknowledgement, tinted like the warning callout. */ .ack { display:flex; align-items:flex-start; gap:10px; font-size:1rem; background:rgba(211,47,47,.07); border-radius:14px; padding:14px 16px; } .ack input { margin-top:4px; flex:none; accent-color:var(--gold); } /* Charcoal on gold, not cream on gold: cream would sit near 1.9:1 contrast, charcoal clears 4.8:1 and stays legible at button size. */ button.submit { -webkit-appearance:none; appearance:none; cursor:pointer; display:block; width:100%; margin-top:22px; font-family:var(--body-font); font-size:1rem; font-weight:700; color:var(--charcoal); background:var(--gold); border:0; border-radius:100px; padding:15px 26px; transition:filter .15s ease, transform .15s ease; } button.submit:hover { filter:brightness(1.06); transform:translateY(-2px); } .form-note { font-size:.86rem; opacity:.7; margin-top:14px; } .form-error { display:none; color:#b3261e; font-weight:600; font-size:.9rem; margin-top:14px; } .form-error.show { display:block; } .hidden { display:none; } /* Rating scale (feedback page) ----------------------------------------- */ .section-label { font-family:var(--heading-font); font-size:1.25rem; margin-top:28px; } .section-label:first-child { margin-top:0; } .rule { height:1px; background:rgba(68,67,64,.14); border:0; margin:28px 0; } .rating { margin-top:24px; } .rating-q { font-weight:700; font-size:.95rem; margin-bottom:10px; } .scale { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:340px; } .scale-opt { position:relative; } .scale-opt input { position:absolute; opacity:0; width:0; height:0; } .scale-opt span { display:flex; align-items:center; justify-content:center; height:46px; cursor:pointer; user-select:none; font-weight:700; font-size:1rem; color:var(--charcoal); background:var(--cream); border:1px solid rgba(68,67,64,.22); border-radius:12px; transition:background .12s ease, border-color .12s ease; } .scale-opt span:hover { border-color:rgba(68,67,64,.45); } .scale-opt input:checked + span { background:var(--gold); border-color:var(--gold); } .scale-opt input:focus-visible + span { box-shadow:0 0 0 3px rgba(231,169,70,.45); } .scale-ends { display:flex; justify-content:space-between; max-width:340px; font-size:.78rem; opacity:.65; margin-top:7px; } .rating-why { margin-top:12px; } .rating-why textarea { min-height:56px; } /* Highlights a question the tester skipped. */ .rating.missing .rating-q { color:#b3261e; } .rating.missing .scale-opt span { border-color:#b3261e; } @media (prefers-reduced-motion:reduce) { button.submit { transition:none; } button.submit:hover { transform:none; } }