/* ============================================================================ Conrad Legal Office — Privacy Policy Page File: assets/css/privacy-policy.css Depends on: tokens.css (linked before this file in the HTML ) Sections: Page Hero · Policy Content (sidebar + article) · CTA Strip ============================================================================ */ @import url('./tokens.css'); /* ============================================================================ SECTION 1 — PAGE HERO Dark bg (--color-blue-darkest). Pure CSS entrance animation — no JS needed. ============================================================================ */ .pp-hero { position: relative; background-color: var(--color-blue-darkest); color: var(--color-white); overflow: hidden; text-align: center; /* Top padding: nav-spacer handles the navbar offset below */ padding-block-end: clamp(5rem, 4rem + 6vw, 10rem); padding-inline: clamp(1.5rem, 6vw, 8rem); } /* ── Decorative background depth ──────────────────────────────────────────── */ .pp-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 80% 60% at 50% 110%, rgba(60, 60, 117, 0.20) 0%, transparent 70% ), radial-gradient( ellipse 55% 35% at 15% -5%, rgba(12, 13, 86, 0.28) 0%, transparent 55% ); } /* ── Nav spacer — pushes hero content below fixed navbar ─────────────────── */ .pp-hero__nav-spacer { /* Matches the expected navbar height (~80px). Adjust to match navbar.css. */ height: clamp(80px, 6vw, 100px); } /* ── Content container ────────────────────────────────────────────────────── */ .pp-hero__content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 1.5vw, 1.5rem); padding-block-start: clamp(2rem, 3vw, 3.5rem); } /* ── Eyebrow label ────────────────────────────────────────────────────────── */ .pp-hero__eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-red); opacity: 0; transform: translateY(16px); animation: pp-fadeup 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.10s forwards; } /* ── H1 ───────────────────────────────────────────────────────────────────── */ .pp-hero__title { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--fw-light); line-height: 1.05; color: var(--color-white); opacity: 0; transform: translateY(22px); animation: pp-fadeup 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards; } /* ── Subtitle ─────────────────────────────────────────────────────────────── */ .pp-hero__subtitle { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; color: var(--color-white); max-width: 520px; opacity: 0; transform: translateY(20px); animation: pp-fadeup-dim 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards; } /* ── Hero keyframes ───────────────────────────────────────────────────────── */ @keyframes pp-fadeup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes pp-fadeup-dim { from { opacity: 0; transform: translateY(20px); } to { opacity: 0.7; transform: none; } } /* Reduced motion: skip hero animation, show final state immediately */ @media (prefers-reduced-motion: reduce) { .pp-hero__eyebrow, .pp-hero__title { animation: none; opacity: 1; transform: none; } .pp-hero__subtitle { animation: none; opacity: 0.7; transform: none; } } /* ============================================================================ SCROLL-ENTRANCE ANIMATION (.pp-animate) IntersectionObserver in privacy-policy.js adds .pp-animate--in when elements enter the viewport. Reduced-motion is handled in JS. ============================================================================ */ .pp-animate { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .pp-animate.pp-animate--in { opacity: 1; transform: none; } /* Each .pp-section gets a slight sequential delay via nth-of-type */ .pp-article .pp-section:nth-of-type(1) { transition-delay: 0.05s; } .pp-article .pp-section:nth-of-type(2) { transition-delay: 0.10s; } .pp-article .pp-section:nth-of-type(3) { transition-delay: 0.10s; } .pp-article .pp-section:nth-of-type(4) { transition-delay: 0.10s; } .pp-article .pp-section:nth-of-type(5) { transition-delay: 0.10s; } .pp-article .pp-section:nth-of-type(6) { transition-delay: 0.10s; } .pp-article .pp-section:nth-of-type(7) { transition-delay: 0.10s; } .pp-article .pp-section:nth-of-type(8) { transition-delay: 0.10s; } /* ============================================================================ SECTION 2 — POLICY CONTENT Beige background. Desktop: sidebar (left, sticky) + article (right). ============================================================================ */ .pp-content { background-color: var(--color-beige); padding-block: clamp(4rem, 3rem + 5vw, 8rem); padding-inline: clamp(1.5rem, 6vw, 8rem); } /* ── Two-column wrapper ───────────────────────────────────────────────────── */ .pp-content__inner { display: flex; align-items: flex-start; gap: clamp(2.5rem, 4vw, 5rem); max-width: 1280px; margin: 0 auto; } /* ============================================================================ SIDEBAR — TABLE OF CONTENTS ============================================================================ */ .pp-sidebar { flex: 0 0 240px; width: 240px; position: sticky; top: 100px; /* Clears the fixed navbar */ align-self: flex-start; } /* ── Sidebar heading ──────────────────────────────────────────────────────── */ .pp-sidebar__heading { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.10em; color: var(--color-blue-light); margin-bottom: 1rem; /* Override the global h2 serif/light defaults */ font-size: var(--text-xs); } /* ── TOC list ─────────────────────────────────────────────────────────────── */ .pp-sidebar__list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--color-gray-subtle); display: flex; flex-direction: column; gap: 0; } /* ── TOC links ────────────────────────────────────────────────────────────── */ .pp-sidebar__link { display: block; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-regular); line-height: 1.4; color: var(--color-blue); text-decoration: none; padding: 0.45rem 0 0.45rem 1rem; border-left: 2px solid transparent; margin-left: -2px; transition: color 0.2s ease, border-color 0.2s ease, font-weight 0.2s ease; } .pp-sidebar__link:hover { color: var(--color-red); border-color: var(--color-red-dark); } /* Active state — applied by JS when section is in view */ .pp-sidebar__link.is-active { color: var(--color-red); font-weight: var(--fw-bold); border-color: var(--color-red); } /* ============================================================================ ARTICLE — MAIN POLICY CONTENT ============================================================================ */ .pp-article { flex: 1 1 0; min-width: 0; /* prevents flex blowout */ max-width: 900px; } /* ── Individual policy section wrapper ───────────────────────────────────── */ .pp-section { padding-top: clamp(2rem, 3vw, 3rem); padding-bottom: clamp(0.5rem, 1vw, 1rem); /* Thin red rule above each section heading block */ border-top: 2px solid var(--color-red); } /* No top border on the very first section — the page itself gives top space */ .pp-section:first-of-type { border-top: none; padding-top: 0; } /* ── Section header row (icon + h2) ──────────────────────────────────────── */ .pp-section__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(1rem, 1.5vw, 1.5rem); padding-top: clamp(1.5rem, 2vw, 2rem); } /* First section has no red border, so its header shouldn't have extra top padding */ .pp-section:first-of-type .pp-section__header { padding-top: 0; } /* ── Section icon (Lucide) ────────────────────────────────────────────────── */ .pp-section__icon { flex-shrink: 0; width: var(--icon-size-lg); height: var(--icon-size-lg); stroke-width: var(--icon-stroke-thin); stroke: var(--color-red); color: var(--color-red); } /* ── Section h2 ───────────────────────────────────────────────────────────── */ .pp-section__heading { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: var(--fw-regular); line-height: 1.15; color: var(--color-blue-darkest); } /* ── Body paragraphs ──────────────────────────────────────────────────────── */ .pp-section__body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.75; color: var(--color-blue-darkest); max-width: 900px; margin-bottom: 1.1rem; } .pp-section__body:last-of-type { margin-bottom: 0; } /* ── Unordered list inside sections ──────────────────────────────────────── */ .pp-section__list { list-style: none; padding: 0; margin: 0.75rem 0 1.1rem 0; display: flex; flex-direction: column; gap: 0.65rem; } .pp-section__list li { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.7; color: var(--color-blue-darkest); padding-left: 1.25rem; position: relative; } /* Red dash bullet */ .pp-section__list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 2px; background: var(--color-red); flex-shrink: 0; } /* ── Inline link ──────────────────────────────────────────────────────────── */ .pp-section__link { color: var(--color-red-dark); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .pp-section__link:hover { color: var(--color-red); } /* ============================================================================ SECTION 3 — CTA STRIP Dark navy background. Centered heading + red CTA button. ============================================================================ */ .pp-cta { background-color: var(--color-blue-dark); color: var(--color-white); padding-block: clamp(4rem, 3rem + 5vw, 7rem); padding-inline: clamp(1.5rem, 6vw, 8rem); text-align: center; } /* ── Inner container ──────────────────────────────────────────────────────── */ .pp-cta__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 2vw, 2.5rem); } /* ── CTA heading ──────────────────────────────────────────────────────────── */ .pp-cta__heading { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: var(--fw-regular); line-height: 1.1; color: var(--color-white); } /* ── CTA button spacing (inherits .btn .btn-primary-red) ─────────────────── */ .pp-cta__btn { /* No extra overrides needed — btn-primary-red handles all styling */ } /* ============================================================================ RESPONSIVE BREAKPOINTS ============================================================================ */ /* ── Tablet: ≤ 1024px — sidebar goes above article, loses sticky ─────────── */ @media (max-width: 1024px) { .pp-content__inner { flex-direction: column; gap: 2.5rem; } .pp-sidebar { flex: 0 0 auto; width: 100%; position: static; top: auto; /* Horizontal scrolling list on tablet */ display: flex; flex-direction: column; gap: 0.5rem; } .pp-sidebar__list { /* On tablet, switch to a compact horizontal wrap */ flex-direction: row; flex-wrap: wrap; gap: 0.25rem 0.5rem; border-left: none; padding-left: 0; border-top: 2px solid var(--color-gray-subtle); padding-top: 0.75rem; } .pp-sidebar__link { border-left: none; border-bottom: 2px solid transparent; margin-left: 0; padding: 0.3rem 0.5rem 0.3rem 0; } .pp-sidebar__link.is-active { border-bottom-color: var(--color-red); border-left: none; } .pp-article { max-width: 100%; } } /* ── Mobile: ≤ 768px ────────────────────────────────────────────────────── */ @media (max-width: 768px) { .pp-content { padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .pp-section__heading { font-size: var(--text-h5); } .pp-section__header { gap: 0.5rem; } .pp-section__icon { width: var(--icon-size-md); height: var(--icon-size-md); } } /* ── Small mobile: ≤ 480px ──────────────────────────────────────────────── */ @media (max-width: 480px) { .pp-sidebar__list { flex-direction: column; border-top: none; border-left: 2px solid var(--color-gray-subtle); padding-top: 0; } .pp-sidebar__link { padding: 0.4rem 0 0.4rem 1rem; border-bottom: none; border-left: 2px solid transparent; margin-left: -2px; } .pp-sidebar__link.is-active { border-left-color: var(--color-red); border-bottom-color: transparent; } .pp-cta__heading { font-size: var(--text-h4); } }