/* ============================================================================ Legal / policy pages — premium, typography-focused layout. Loaded only on legal pages (Privacy, Terms, Community Guidelines, …). Brand accent: burgundy #6E0F2C. Hairlines: #E5E7EB. ========================================================================== */ .oc-legal { --lg-accent: #6E0F2C; --lg-accent-dark: #4A0A1E; --lg-ink: #241E1C; --lg-stone: #6B6361; --lg-faint: #8A8077; --lg-line: #E5E7EB; --lg-tint: #FAF7F2; --lg-radius: 16px; --lg-head-offset: 100px; /* sticky site header clearance for anchor jumps */ --lg-gap: 24px; /* single vertical rhythm — hero→content and card→card match */ color: var(--lg-ink); font-size: 16px; } /* Smooth anchor scrolling (scoped: this file only loads on legal pages). */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The base theme sets `body { overflow-x: hidden }`, which turns into a scroll container and breaks position:sticky. `overflow-x: clip` still clips horizontal overflow but does NOT create a scroll container, so the sticky ToC works. Scoped here → only affects legal pages. */ body { overflow-x: clip; } /* ── Hero ─────────────────────────────────────────────────────────────── */ .oc-legal__hero { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--lg-accent) 10%, transparent) 0%, transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--lg-accent) 6%, #fff) 0%, #fff 100%); border-bottom: 1px solid var(--lg-line); padding: 56px 0 44px; } /* 1200px container with the same 20px side padding as the site header, so the title's left edge lines up under the logo (left-aligned banner). */ .oc-legal__hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .oc-legal__eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-accent); } .oc-legal__title { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; color: var(--lg-ink); margin: 0; text-wrap: balance; } .oc-legal__overview { margin: 16px 0 0; max-width: 62ch; font-size: 1.075rem; line-height: 1.6; color: var(--lg-stone); } .oc-legal__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; } .oc-legal__meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--lg-stone); padding: 6px 13px; background: #fff; border: 1px solid var(--lg-line); border-radius: 999px; } .oc-legal__meta-item svg { color: var(--lg-accent); flex: 0 0 auto; } .oc-legal__meta-item strong { color: var(--lg-ink); font-weight: 600; } /* ── Layout: sticky ToC + readable content column ─────────────────────── */ /* Same 1200px / 20px-padding container as the header; tracks are left-aligned (justify-content:start) so the ToC lines up under the hero title + logo. */ .oc-legal__layout { max-width: 1200px; margin: 0 auto; padding: var(--lg-gap) 20px 72px; display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 1024px) { .oc-legal__layout { grid-template-columns: 280px 1fr; align-items: stretch; } .oc-legal__layout--single { grid-template-columns: minmax(0, 860px); } } /* ── Table of contents ────────────────────────────────────────────────── */ .oc-legal__aside { min-width: 0; align-self: stretch; } .oc-legal__toc { background: #FAFAFA; border: 1px solid var(--lg-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .oc-legal__toc-progress { flex: 0 0 auto; height: 3px; background: color-mix(in srgb, var(--lg-accent) 10%, #fff); } .oc-legal__toc-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lg-accent), var(--lg-accent-dark)); transition: width .08s linear; } @media (prefers-reduced-motion: reduce) { .oc-legal__toc-progress span { transition: none; } } @media (min-width: 1024px) { /* Sticky with a 20px top gap (52px = 20px below the 32px WP admin bar). The CARD ITSELF scrolls when the list is taller than its slot — the most reliable internal-scroll model; the progress bar + "On this page" cap are pinned inside it so only the links scroll. */ .oc-legal__toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--lg-accent) 24%, #fff) transparent; box-shadow: 0 10px 30px -18px rgba(31,27,26,.4); } .admin-bar .oc-legal__toc { top: 52px; max-height: calc(100vh - 72px); } .oc-legal__toc::-webkit-scrollbar { width: 8px; } .oc-legal__toc::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--lg-accent) 20%, #fff); border-radius: 8px; } .oc-legal__toc-progress { position: sticky; top: 0; z-index: 2; } } .oc-legal__toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-accent); cursor: pointer; } .oc-legal__toc-toggle svg { transition: transform .2s ease; } .oc-legal__toc.is-open .oc-legal__toc-toggle svg { transform: rotate(180deg); } .oc-legal__toc-nav { padding: 8px 10px 12px; } .oc-legal__toc-nav ol { list-style: none; margin: 0; padding: 0; } /* No raw counter numbers — the heading text already carries its own number. */ .oc-legal__toc-link { display: block; padding: 9px 14px; font-size: 13.5px; line-height: 1.4; color: var(--lg-stone); text-decoration: none; border-radius: 8px; border-left: 3px solid transparent; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .oc-legal__toc-link:hover { color: var(--lg-ink); background: #fff; } .oc-legal__toc-link.is-active { color: var(--lg-accent); font-weight: 700; background: color-mix(in srgb, var(--lg-accent) 7%, #fff); border-left-color: var(--lg-accent); } /* Desktop: the toggle becomes a static "On this page" cap; the nav scrolls internally when the section list is taller than the sticky viewport slot. */ @media (min-width: 1024px) { /* Static "On this page" cap, pinned to the top of the scrolling card. */ .oc-legal__toc-toggle { cursor: default; pointer-events: none; border-bottom: 1px solid var(--lg-line); position: sticky; top: 3px; z-index: 1; background: #FAFAFA; } .oc-legal__toc-toggle svg { display: none; } .oc-legal__toc-nav { display: block !important; } } /* Mobile: collapsible dropdown. */ @media (max-width: 1023px) { .oc-legal__toc-nav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; padding-top: 0; padding-bottom: 0; } .oc-legal__toc-nav > ol { overflow: hidden; min-height: 0; } .oc-legal__toc.is-open .oc-legal__toc-nav { grid-template-rows: 1fr; padding-bottom: 10px; } } @media (prefers-reduced-motion: reduce) { .oc-legal__toc-nav { transition: none; } } /* ── Content: section cards ───────────────────────────────────────────── */ /* Flex column with a single gap → every gap (and the hero→content gap, which uses the same --lg-gap on the layout padding) is identical. */ .oc-legal__content { min-width: 0; display: flex; flex-direction: column; gap: var(--lg-gap); } .oc-legal__section { background: #fff; border: 1px solid var(--lg-line); border-radius: var(--lg-radius); padding: 28px 30px; margin: 0; box-shadow: 0 10px 30px -22px rgba(31,27,26,.4); scroll-margin-top: var(--lg-head-offset); } @media (max-width: 600px) { .oc-legal__section { padding: 22px 20px; } } /* ── Typography ───────────────────────────────────────────────────────── */ .oc-legal__content h2 { font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--lg-ink); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--lg-line); position: relative; } .oc-legal__content h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 52px; height: 3px; border-radius: 3px; background: var(--lg-accent); } .oc-legal__content h3 { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 1.075rem; font-weight: 700; line-height: 1.35; color: var(--lg-accent); margin: 26px 0 10px; } .oc-legal__content h2 + h3 { margin-top: 6px; } .oc-legal__content p { margin: 0 0 14px; line-height: 1.72; color: #33302E; font-size: 1rem; } .oc-legal__content p:last-child { margin-bottom: 0; } .oc-legal__content strong { color: var(--lg-ink); font-weight: 700; } .oc-legal__content a { color: var(--lg-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .oc-legal__content a:hover { color: var(--lg-accent-dark); } /* ── Lists ────────────────────────────────────────────────────────────── */ .oc-legal__content ul, .oc-legal__content ol { margin: 0 0 16px; padding: 0; } .oc-legal__content li { line-height: 1.65; color: #33302E; margin: 0 0 9px; } .oc-legal__content li:last-child { margin-bottom: 0; } .oc-legal__content ul { list-style: none; } .oc-legal__content ul > li { position: relative; padding-left: 26px; } .oc-legal__content ul > li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--lg-accent) 82%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 12%, transparent); } .oc-legal__content ol { list-style: none; counter-reset: li; } .oc-legal__content ol > li { position: relative; padding-left: 34px; counter-increment: li; } .oc-legal__content ol > li::before { content: counter(li); position: absolute; left: 0; top: .05em; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--lg-accent) 10%, #fff); color: var(--lg-accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* ── Callout boxes ────────────────────────────────────────────────────── */ .oc-legal__callout { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 18px 20px; border: 1px solid var(--lg-line); border-radius: 14px; border-left: 4px solid var(--lg-accent); background: color-mix(in srgb, var(--lg-accent) 5%, #fff); font-size: 14.5px; line-height: 1.6; color: var(--lg-stone); } .oc-legal__callout-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--lg-accent) 12%, #fff); color: var(--lg-accent); } .oc-legal__callout-body strong { display: block; color: var(--lg-ink); margin-bottom: 2px; } .oc-legal__callout-body a { color: var(--lg-accent); font-weight: 600; } /* Optional variants for future use in the source HTML. */ .oc-legal__callout--tip { border-left-color: #2E7D52; background: color-mix(in srgb, #2E7D52 5%, #fff); } .oc-legal__callout--tip .oc-legal__callout-icon { background: color-mix(in srgb, #2E7D52 12%, #fff); color: #2E7D52; } .oc-legal__callout--warn { border-left-color: #B26A00; background: color-mix(in srgb, #B26A00 6%, #fff); } .oc-legal__callout--warn .oc-legal__callout-icon { background: color-mix(in srgb, #B26A00 14%, #fff); color: #B26A00; }