/* * marketing-doc.css — shared BEM block for the "document" marketing pages: * /contact and the five legal pages (Phase 5 rewrite of Elementor post-245.css). * One centered hero (title + optional intro) over one centered content column * (prose, the contact form, or the cookie table). * * Coexistence: keeps class="elementor-kit-10", which styles bare h1..h4/p/a * at ~(0,1,1) AND text-transform:capitalize on headings. So every heading rule here * is ancestor-prefixed to >=(0,2,x) and sets text-transform:none explicitly. */ /* ── hero ───────────────────────────────────────────────────────── */ .mkt-doc__hero { background: linear-gradient(180deg, #ffe8e8 62%, transparent 100%); padding: var(--space-16) var(--space-6) var(--space-8); overflow: hidden; } .mkt-doc__hero-inner { max-width: 60rem; margin: 0 auto; text-align: center; } .mkt-doc .mkt-doc__title { text-transform: none; font-family: var(--font-brand); font-weight: 700; font-size: 3.125rem; /* 50px */ line-height: 3.875rem; /* 62px */ color: #1b1b1b; margin: 0; } .mkt-doc .mkt-doc__intro { font-family: var(--font-body); font-size: 1rem; line-height: 1.625rem; color: #1b1b1b; margin: var(--space-4) auto 0; max-width: 44rem; } /* ── content column ─────────────────────────────────────────────── */ .mkt-doc__content { display: flex; justify-content: center; padding: var(--space-10) var(--space-6) var(--space-16); } .mkt-doc__prose { width: 100%; max-width: 60rem; } /* NOTE: .contact-form__wrap keeps its own 760px cap from contact.css — a form reads better narrower than the 60rem prose column. Do NOT add it here (a .mkt-doc .contact-form__wrap rule would out-specify and widen it). */ /* ── prose typography ───────────────────────────────────────────── */ .mkt-doc .mkt-doc__prose :is(h2, h3) { text-transform: none; font-family: var(--font-brand); font-weight: 700; font-size: 2.25rem; /* 36px */ line-height: 2.9375rem;/* 47px */ color: #1b1b1b; text-align: left; margin: var(--space-8) 0 var(--space-5); } .mkt-doc .mkt-doc__prose h4 { text-transform: none; font-family: var(--font-brand); font-weight: 700; font-size: 1.25rem; /* 20px */ line-height: 1.75rem; color: #1b1b1b; text-align: left; margin: var(--space-6) 0 var(--space-3); } .mkt-doc .mkt-doc__prose p, .mkt-doc .mkt-doc__prose li { font-family: var(--font-body); font-size: 1rem; line-height: 1.625rem; color: #2a2a2a; margin: 0 0 var(--space-4); } .mkt-doc .mkt-doc__prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); list-style: none; } .mkt-doc .mkt-doc__prose li { margin-bottom: var(--space-2); } .mkt-doc .mkt-doc__prose a { color: var(--color-primary); text-decoration: underline; } .mkt-doc .mkt-doc__prose a:hover { color: var(--color-primary-hover); } /* ── contact heading (form variant) ─────────────────────────────── */ .mkt-doc .mkt-doc__heading { text-transform: none; font-family: var(--font-brand); font-weight: 700; font-size: 2.25rem; line-height: 2.9375rem; color: #1b1b1b; text-align: center; margin: 0 0 var(--space-6); } /* ── cookie table (moved verbatim from elementor/marketing-overrides.css) ── */ .legal-table { width: 100%; border-collapse: collapse; } .cookie-policy-table-wrap { overflow-x: auto; max-width: 100%; margin: 16px 0 24px; } .cookie-policy-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e7eb; font-size: 0.9375rem; } .cookie-policy-table th, .cookie-policy-table td { text-align: left; padding: 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; overflow-wrap: anywhere; } .cookie-policy-table th { border-bottom: 1px solid #e5e7eb; font-weight: 600; white-space: nowrap; } @media (max-width: 640px) { .cookie-policy-table { border: 0; } .cookie-policy-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); } .cookie-policy-table tr { display: block; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 12px; } .cookie-policy-table td { display: flex; justify-content: flex-start; gap: 16px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; } .cookie-policy-table td:last-child { border-bottom: 0; } .cookie-policy-table td::before { content: attr(data-label); font-weight: 600; color: #6b7280; flex: 0 0 42%; } } /* ── responsive ─────────────────────────────────────────────────── */ @media (max-width: 1024px) { .mkt-doc .mkt-doc__title { font-size: 2.5rem; line-height: 3.25rem; } /* 40/52 */ } @media (max-width: 767px) { .mkt-doc__hero { padding: var(--space-16) var(--space-4) var(--space-6); } .mkt-doc .mkt-doc__title { font-size: 2.1875rem; line-height: 2.5rem; } /* 35/40 */ .mkt-doc__content { padding: var(--space-8) var(--space-4) var(--space-10); } .mkt-doc .mkt-doc__prose :is(h2, h3) { font-size: 1.75rem; line-height: 2.25rem; } }