/* ============================================================================= Privacy page — KIP ----------------------------------------------------------------------------- Lifted from the Claude Design handoff. Only loaded on /privacy/. Foundations come from colors_and_type.css and styles.css (nav, footer, wrap). This stylesheet adds the .pp-* atoms: header band, TOC, article, callout. Accent: inherits from theme.accent (set inline on by build.js). Decorative tints (header radial glow, TOC hover background) derive from the accent via color-mix() so they auto-follow theme changes. ============================================================================= */ /* ---------- Page header ---------- */ .pp-header { background: var(--k-navy); color: var(--k-white); padding-top: clamp(5rem, 10vw, 8rem); padding-bottom: clamp(4rem, 8vw, 6rem); position: relative; overflow: hidden; } .pp-header__motif { position: absolute; top: -120px; right: -120px; width: 520px; height: 520px; border-radius: 9999px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--kip-accent) 35%, transparent), color-mix(in srgb, var(--kip-accent) 0%, transparent) 60%); pointer-events: none; } .pp-header__motif--2 { position: absolute; bottom: -200px; left: -160px; width: 460px; height: 460px; border-radius: 9999px; top: auto; right: auto; background: radial-gradient(circle at 60% 40%, rgba(0,160,165,0.18), rgba(0,160,165,0) 65%); pointer-events: none; } .pp-header__inner { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--sp-12); } @media (min-width: 880px) { .pp-header__inner { grid-template-columns: 1.6fr 1fr; align-items: end; gap: var(--sp-16); } } .pp-header .kip-eyebrow { color: rgba(255,255,255,0.7); } .pp-header .kip-eyebrow::before { background: var(--k-white); opacity: 0.6; } .pp-header h1 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.02em; margin: var(--sp-6) 0 var(--sp-6); text-wrap: balance; color: var(--k-white); } .pp-header h1 em { font-style: italic; font-weight: var(--fw-light); color: var(--kip-accent); } .pp-header__lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 56ch; margin: 0; } .pp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.18); } .pp-meta__item .pp-meta__label { display: block; font-size: 0.6875rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin-bottom: var(--sp-2); } .pp-meta__item .pp-meta__value { font-size: 0.9375rem; line-height: 1.5; color: var(--k-white); } .pp-meta__item a { color: var(--k-white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); transition: border-color var(--dur-fast) var(--ease-out); } .pp-meta__item a:hover { border-color: var(--k-white); } /* ---------- Body layout: TOC + article ---------- */ .pp-body { padding-block: clamp(4rem, 8vw, 7rem); background: var(--k-white); } .pp-body__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); } @media (min-width: 980px) { .pp-body__grid { grid-template-columns: 260px 1fr; gap: var(--sp-16); align-items: start; } } /* TOC */ .pp-toc { position: sticky; top: 92px; } .pp-toc__label { font-size: 0.6875rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--k-gray-600); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid rgba(35,31,32,0.12); } .pp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: pptoc; display: flex; flex-direction: column; gap: var(--sp-1); } .pp-toc li { counter-increment: pptoc; } .pp-toc a { display: flex; gap: 10px; padding: 8px 4px; text-decoration: none; color: var(--k-near-black); font-size: 0.875rem; line-height: 1.45; border-radius: 4px; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .pp-toc a::before { content: counter(pptoc, decimal-leading-zero); flex: none; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--k-gray-600); font-size: 0.75rem; letter-spacing: 0.04em; padding-top: 2px; } .pp-toc a:hover { color: var(--kip-accent); background: color-mix(in srgb, var(--kip-accent) 5%, transparent); } .pp-toc a:hover::before { color: var(--kip-accent); } /* Article */ .pp-article { max-width: 720px; font-size: 1.0625rem; line-height: 1.7; color: var(--k-near-black); } .pp-article p { margin: 0 0 var(--sp-5); } .pp-article p:last-child { margin-bottom: 0; } .pp-article a { color: var(--kip-accent); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } .pp-article a:hover { color: var(--kip-accent-deep); } .pp-article strong { font-weight: var(--fw-bold); } .pp-section { padding-top: var(--sp-12); padding-bottom: var(--sp-2); scroll-margin-top: 100px; } .pp-section:first-of-type { padding-top: 0; } .pp-section + .pp-section { border-top: 1px solid rgba(35,31,32,0.08); } .pp-section__num { display: inline-block; font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kip-accent); margin-bottom: var(--sp-3); } .pp-section h2 { font-family: var(--font-sans); font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 var(--sp-6); text-wrap: balance; } .pp-section h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: var(--fw-bold); letter-spacing: -0.005em; margin: var(--sp-8) 0 var(--sp-3); } .pp-list { margin: 0 0 var(--sp-5); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); } .pp-list li { position: relative; padding-left: 26px; line-height: 1.6; } .pp-list li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 10px; height: 2px; background: var(--kip-accent); } .pp-list li strong { display: block; margin-bottom: 2px; } /* Pull quote / contact callout */ .pp-callout { margin: var(--sp-8) 0; padding: var(--sp-6) var(--sp-8); background: var(--k-off-white); border-left: 3px solid var(--kip-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .pp-callout p { margin: 0; } .pp-callout__label { display: block; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-gray-600); margin-bottom: var(--sp-2); } .pp-callout__contact { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-4); } @media (min-width: 600px) { .pp-callout__contact { grid-template-columns: repeat(3, 1fr); } } .pp-callout__contact strong { display: block; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-gray-600); margin-bottom: 4px; } /* Back-to-top */ .pp-back { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid rgba(35,31,32,0.08); } .pp-back a { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--k-near-black); text-decoration: none; font-weight: var(--fw-bold); border-bottom: 0; transition: color var(--dur-fast) var(--ease-out); } .pp-back a:hover { color: var(--kip-accent); border-bottom: 0; } .pp-back svg { transition: transform var(--dur-fast) var(--ease-out); } .pp-back a:hover svg { transform: translateY(-2px); } @media (max-width: 979px) { .pp-toc { position: static; } .pp-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } } @media (max-width: 560px) { .pp-meta { grid-template-columns: 1fr; } .pp-toc ol { grid-template-columns: 1fr; } }