/* HookPilot Legal Center — shared styles for every policy page. Accent color comes from data-accent on ; defaults to purple. */ :root { --lc-accent: 124, 92, 255; --lc-accent-text: #c4b5fd; } [data-accent="green"] { --lc-accent: 34, 197, 94; --lc-accent-text: #86efac; } [data-accent="amber"] { --lc-accent: 245, 158, 11; --lc-accent-text: #fcd34d; } [data-accent="red"] { --lc-accent: 239, 68, 68; --lc-accent-text: #fca5a5; } [data-accent="blue"] { --lc-accent: 59, 130, 246; --lc-accent-text: #93c5fd; } [data-accent="pink"] { --lc-accent: 236, 72, 153; --lc-accent-text: #f9a8d4; } [data-accent="violet"] { --lc-accent: 167, 139, 250;--lc-accent-text: #c4b5fd; } [data-accent="yellow"] { --lc-accent: 234, 179, 8; --lc-accent-text: #fde047; } [data-accent="cyan"] { --lc-accent: 6, 182, 212; --lc-accent-text: #67e8f9; } [data-accent="teal"] { --lc-accent: 13, 148, 136; --lc-accent-text: #5eead4; } [data-accent="slate"] { --lc-accent: 100, 116, 139;--lc-accent-text: #cbd5e1; } [data-accent="emerald"] { --lc-accent: 16, 185, 129; --lc-accent-text: #6ee7b7; } [data-accent="indigo"] { --lc-accent: 99, 102, 241; --lc-accent-text: #a5b4fc; } [data-accent="orange"] { --lc-accent: 249, 115, 22; --lc-accent-text: #fdba74; } [data-accent="rose"] { --lc-accent: 244, 63, 94; --lc-accent-text: #fda4af; } [data-accent="lime"] { --lc-accent: 132, 204, 22; --lc-accent-text: #bef264; } [data-accent="sky"] { --lc-accent: 14, 165, 233; --lc-accent-text: #7dd3fc; } [data-accent="fuchsia"] { --lc-accent: 217, 70, 239; --lc-accent-text: #f0abfc; } [data-accent="brown"] { --lc-accent: 180, 83, 9; --lc-accent-text: #fdba74; } .legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; } @media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } } .legal-side { position: sticky; top: 88px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; font-size: 14px; max-height: calc(100vh - 110px); overflow-y: auto; } [data-theme="light"] .legal-side { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); } .legal-side h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; } .legal-side h4:not(:first-child) { margin-top: 18px; } .legal-side ul { list-style: none; padding: 0; margin: 0; } .legal-side li { margin: 0 0 4px; } .legal-side a { display: block; padding: 6px 10px; border-radius: 8px; color: inherit; text-decoration: none; opacity: .8; transition: background .15s ease, opacity .15s ease; } .legal-side a:hover { background: rgba(var(--lc-accent), 0.10); opacity: 1; } .legal-side a.is-current { background: rgba(var(--lc-accent), 0.18); color: var(--lc-accent-text); opacity: 1; font-weight: 600; } .legal-main h2 { margin-top: 36px; } .legal-main h2:first-child { margin-top: 0; } .legal-main h3 { margin-top: 24px; } .legal-callout { margin: 22px 0; padding: 18px 20px; border-left: 3px solid rgb(var(--lc-accent)); background: rgba(var(--lc-accent), 0.07); border-radius: 0 10px 10px 0; } .legal-callout strong { color: var(--lc-accent-text); } .legal-meta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 18px; font-size: 13px; opacity: .75; } .legal-meta-row span { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); } [data-theme="light"] .legal-meta-row span { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); } .data-table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 14px; } .data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; } [data-theme="light"] .data-table th, [data-theme="light"] .data-table td { border-bottom-color: rgba(0,0,0,0.1); } .data-table th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; font-weight: 600; } .step-list { counter-reset: step; padding-left: 0; list-style: none; } .step-list li { position: relative; padding: 14px 16px 14px 56px; margin-bottom: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; } [data-theme="light"] .step-list li { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); } .step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgb(var(--lc-accent)); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; } .control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 28px; } .control-card { padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; font-size: 14px; } [data-theme="light"] .control-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); } .control-card h4 { margin: 0 0 6px; font-size: 14px; } .control-card p { margin: 0; opacity: .8; line-height: 1.5; font-size: 13px; } .dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 18px 0 28px; } .dept-chip { padding: 8px 12px; font-size: 13px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; } [data-theme="light"] .dept-chip { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }