/* ========================================================================== pinvideo.io — legal.css Styles the article body of /terms and /dmca. Header and footer are NOT styled here — those use your compiled Tailwind classes copied straight from index.html, so they match the site already. IMPORTANT: dark mode keys off the `.dark` class on , which is what your theme toggle sets (tailwind.config.js → darkMode: 'class'). The previous version used @media (prefers-color-scheme), which ignored your toggle button completely. ========================================================================== */ :root { --pv-brand: #e60023; --pv-brand-dark: #ad081b; --pv-brand-soft: rgba(230, 0, 35, .08); --pv-text: #18181b; --pv-muted: #4b5563; --pv-border: #e5e7eb; --pv-surface-alt: #f9fafb; } .dark { --pv-text: #ececef; --pv-muted: #a1a1aa; --pv-border: #262626; --pv-surface-alt: #0f0f0f; --pv-brand-soft: rgba(230, 0, 35, .16); } /* ---------- Layout ---------- */ .pv-legal { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1rem 4.5rem; color: var(--pv-text); font-size: 1.0625rem; line-height: 1.75; } .pv-legal-head { padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--pv-border); } .pv-legal h1 { font-size: clamp(1.875rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 .625rem; } .pv-updated { font-size: .9375rem; color: var(--pv-muted); margin: 0; } /* ---------- Table of contents ---------- */ .pv-toc { background: var(--pv-surface-alt); border: 1px solid var(--pv-border); border-radius: .875rem; padding: 1.25rem 1.5rem; margin: 0 0 2.5rem; } .pv-toc h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .05em; color: var(--pv-muted); margin: 0 0 .75rem; } .pv-toc ol { margin: 0; padding-left: 1.25rem; font-size: .9375rem; line-height: 1.9; } .pv-toc a { color: var(--pv-text); text-decoration: none; } .pv-toc a:hover { color: var(--pv-brand); text-decoration: underline; } /* ---------- Typography ---------- */ .pv-legal h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 2.75rem 0 .875rem; scroll-margin-top: 6rem; /* clears your fixed header on anchor jumps */ } .pv-legal h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.75rem 0 .5rem; scroll-margin-top: 6rem; } .pv-legal p { margin: 0 0 1.125rem; } .pv-legal ul, .pv-legal ol { margin: 0 0 1.25rem; padding-left: 1.375rem; } .pv-legal li { margin-bottom: .5rem; } .pv-legal strong { font-weight: 700; } .pv-legal a { color: var(--pv-brand); text-decoration: none; } .pv-legal a:hover { color: var(--pv-brand-dark); text-decoration: underline; } .dark .pv-legal a:hover { color: #ff5c5c; } .pv-legal hr { border: 0; border-top: 1px solid var(--pv-border); margin: 2.75rem 0; } /* ---------- Callouts ---------- */ .pv-callout { background: var(--pv-brand-soft); border-left: 3px solid var(--pv-brand); border-radius: 0 .625rem .625rem 0; padding: 1.125rem 1.375rem; margin: 1.75rem 0; } .pv-callout p:last-child { margin-bottom: 0; } .pv-callout-quiet { background: var(--pv-surface-alt); border-left-color: var(--pv-border); } /* ---------- Contact block ---------- */ .pv-contact-block { background: var(--pv-surface-alt); border: 1px solid var(--pv-border); border-radius: .875rem; padding: 1.375rem 1.5rem; margin: 1.5rem 0; } .pv-contact-block p { margin-bottom: .5rem; } .pv-contact-block p:last-child { margin-bottom: 0; } .pv-contact-block .pv-email { font-size: 1.125rem; font-weight: 700; } /* ---------- Numbered requirement list ---------- */ .pv-reqs { counter-reset: pvreq; list-style: none; padding-left: 0; } .pv-reqs li { counter-increment: pvreq; position: relative; padding-left: 2.5rem; margin-bottom: .875rem; } .pv-reqs li::before { content: counter(pvreq); position: absolute; left: 0; top: .125rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--pv-brand); color: #fff; font-size: .8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ---------- Closing note ---------- */ .pv-legal-foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--pv-border); font-size: .9375rem; color: var(--pv-muted); } /* ---------- Accessibility ---------- */ .pv-skip { position: absolute; left: -9999px; top: 0; background: var(--pv-brand); color: #fff; padding: .625rem 1rem; z-index: 100; } .pv-skip:focus { left: 0; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 640px) { .pv-legal { font-size: 1rem; padding-top: 1.75rem; } .pv-legal h2 { font-size: 1.25rem; margin-top: 2.25rem; } } /* Shared styling for the Terms and DMCA pages. */ .pv-skip { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.75rem 1rem; border-radius: 0.75rem; background: #e60023; color: #fff; font-weight: 700; transform: translateY(-150%); transition: transform 0.2s ease; } .pv-skip:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; } .pv-legal { width: min(100% - 2rem, 54rem); margin: 0 auto; padding: 3rem 0 5rem; color: #374151; font-size: 1rem; line-height: 1.75; } .dark .pv-legal { color: #d1d5db; } .pv-legal-head { margin-bottom: 2rem; padding: 2rem; border: 1px solid #fecdd3; border-radius: 1.5rem; background: linear-gradient(135deg, #fff1f2, #fff); } .dark .pv-legal-head { border-color: #5f1d2b; background: linear-gradient(135deg, #2c1017, #141414); } .pv-legal h1, .pv-legal h2, .pv-legal h3 { color: #111827; line-height: 1.25; scroll-margin-top: 7rem; } .dark .pv-legal h1, .dark .pv-legal h2, .dark .pv-legal h3 { color: #f9fafb; } .pv-legal h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; } .pv-legal h2 { margin: 2.75rem 0 0.9rem; font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 750; } .pv-legal h3 { margin: 1.75rem 0 0.75rem; font-size: 1.15rem; font-weight: 700; } .pv-legal p { margin: 0 0 1.15rem; } .pv-legal a { color: #d10a28; font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; } .pv-legal a:hover { color: #ad081b; } .pv-updated { margin: 0.6rem 0 0; color: #6b7280; font-size: 0.925rem; } .dark .pv-updated { color: #9ca3af; } .pv-toc { margin: 0 0 2rem; padding: 1.4rem 1.5rem; border: 1px solid #e5e7eb; border-radius: 1rem; background: #f9fafb; } .dark .pv-toc { border-color: #262626; background: #141414; } .pv-toc h2 { margin: 0 0 0.75rem; font-size: 1.05rem; } .pv-toc ol { margin: 0; padding-left: 1.35rem; columns: 2; column-gap: 2rem; } .pv-toc li { margin: 0.35rem 0; break-inside: avoid; } .pv-legal ul, .pv-legal ol { margin: 0 0 1.25rem; padding-left: 1.35rem; } .pv-legal li { margin: 0.45rem 0; padding-left: 0.2rem; } .pv-callout, .pv-contact-block, .pv-legal-foot { margin: 1.75rem 0; padding: 1.25rem 1.4rem; border-left: 4px solid #e60023; border-radius: 0 1rem 1rem 0; background: #fff1f2; } .dark .pv-callout, .dark .pv-contact-block, .dark .pv-legal-foot { background: rgba(230, 0, 35, 0.12); } .pv-callout-quiet { border-left-color: #6b7280; background: #f9fafb; } .dark .pv-callout-quiet { background: #1c1c1c; } .pv-callout p:last-child, .pv-contact-block p:last-child, .pv-legal-foot p:last-child { margin-bottom: 0; } .pv-email { font-size: 1.1rem; } @media (max-width: 640px) { .pv-legal { width: min(100% - 1.5rem, 54rem); padding-top: 1.75rem; font-size: 0.975rem; } .pv-legal-head { padding: 1.4rem; border-radius: 1rem; } .pv-toc { padding: 1.15rem; } .pv-toc ol { columns: 1; } .pv-callout, .pv-contact-block, .pv-legal-foot { padding: 1rem 1.1rem; } }