/* ============================================================ report.css — Ally Kiel Consulting Research Site Shared design system for all audit report pages research.allykielconsulting.com ============================================================ */ /* ── Google Fonts are imported in each HTML file's ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #1a1208; --ink-mid: #3d2b1a; --ink-soft: #7a6555; --terra: #B5451B; --terra-dark: #8c3314; --olive: #2d3a22; --olive-mid: #3a4a2c; --olive-light: #4a5e38; --cream: #f7f3ee; --cream-dark: #ede7df; --warm-white: #fdfaf7; --rule: rgba(90,60,30,0.13); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', sans-serif; } html { scroll-behavior: smooth; } body { background: var(--warm-white); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* ── Minimal nav ── */ .report-nav { padding: 22px 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); background: var(--warm-white); } .report-nav-brand { font-family: var(--font-display); font-size: 14px; font-weight: 400; color: var(--ink-soft); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; } .report-nav-brand:hover { color: var(--ink); } .report-nav-back { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.2s; } .report-nav-back:hover { color: var(--terra); } /* ── Report header ── */ .report-header { background: var(--olive); padding: 80px 48px 72px; position: relative; overflow: hidden; } .report-header::after { content: ''; position: absolute; bottom: 0; right: 0; width: 480px; height: 480px; background: radial-gradient(circle at bottom right, rgba(181,69,27,0.14) 0%, transparent 65%); pointer-events: none; } .report-header-inner { max-width: 900px; position: relative; z-index: 1; } .report-series { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(181,69,27,0.85); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .report-series::before { content: ''; display: inline-block; width: 24px; height: 1px; background: rgba(181,69,27,0.6); } .report-title { font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 68px); font-weight: 300; line-height: 1.08; color: var(--cream); margin-bottom: 12px; } .report-subtitle { font-family: var(--font-display); font-size: clamp(18px, 2.5vw, 26px); font-weight: 300; font-style: italic; color: rgba(247,243,238,0.55); margin-bottom: 48px; } .report-meta-row { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 32px; border-top: 1px solid rgba(247,243,238,0.12); } .report-meta-item { display: flex; flex-direction: column; gap: 4px; } .report-meta-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247,243,238,0.35); } .report-meta-value { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: rgba(247,243,238,0.85); } /* ── Key findings band ── */ .findings-band { background: var(--cream); border-bottom: 1px solid var(--cream-dark); padding: 56px 48px; } .findings-band-inner { max-width: 900px; } .findings-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 24px; } .findings-list { list-style: none; display: flex; flex-direction: column; gap: 14px; } .findings-list li { display: grid; grid-template-columns: 16px 1fr; gap: 16px; align-items: baseline; font-size: 15px; color: var(--ink-mid); line-height: 1.65; } .findings-list li::before { content: '—'; color: var(--terra); font-size: 13px; } /* ── Body layout ── */ .report-body { max-width: 900px; margin: 0 auto; padding: 72px 48px; } /* ── Section headings ── */ .section-label { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra); margin-bottom: 10px; } .section-heading { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 38px); font-weight: 300; line-height: 1.15; color: var(--ink); margin-bottom: 16px; } .section-heading em { font-style: italic; } .section-intro { font-size: 15px; font-weight: 300; color: var(--ink-soft); line-height: 1.8; max-width: 680px; margin-bottom: 40px; } .section-divider { height: 1px; background: var(--rule); margin: 64px 0; } /* ── Tables ── */ .table-wrap { margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-note { font-size: 12px; font-style: italic; color: var(--ink-soft); line-height: 1.6; padding: 12px 16px; background: var(--cream); border-left: 2px solid var(--cream-dark); margin-bottom: 48px; } table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 13px; } thead tr { background: var(--olive); } thead th { padding: 13px 16px; text-align: left; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,243,238,0.75); white-space: nowrap; } thead th:not(:first-child) { text-align: right; } tbody tr:nth-child(odd) { background: var(--warm-white); } tbody tr:nth-child(even) { background: var(--cream); } tbody tr:hover { background: #f0ece5; } tbody td { padding: 12px 16px; color: var(--ink-mid); border-bottom: 1px solid var(--rule); } tbody td:first-child { font-weight: 500; color: var(--ink); } tbody td:not(:first-child) { text-align: right; } .td-total { font-weight: 700; color: var(--terra) !important; } .td-high { background: #f0ece5 !important; font-weight: 700; color: var(--ink) !important; } .td-gap { color: #bbb !important; font-style: italic; } /* ── Platform concentration / gap table ── */ .gap-badge { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; padding: 2px 8px; background: rgba(181,69,27,0.1); color: var(--terra); border-radius: 2px; } /* ── Cluster grid ── */ .cluster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--cream-dark); margin-bottom: 48px; } .cluster-card { background: var(--warm-white); padding: 32px 36px; } .cluster-card-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); margin-bottom: 8px; } .cluster-card-heading { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.25; } .cluster-card-descriptor { font-size: 12px; font-style: italic; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.5; } .cluster-leaders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .cluster-leader-tag { font-size: 11px; font-weight: 500; padding: 4px 10px; background: var(--cream); border: 1px solid var(--cream-dark); color: var(--ink-mid); letter-spacing: 0.02em; } .cluster-leader-tag.first { background: var(--olive); color: var(--cream); border-color: var(--olive); } .cluster-card-body { font-size: 13px; color: var(--ink-soft); line-height: 1.75; } /* ── Signal blocks ── */ .signal-stack { display: flex; flex-direction: column; gap: 1px; background: var(--rule); margin-bottom: 48px; } .signal-block { background: var(--warm-white); display: grid; grid-template-columns: 200px 1fr; gap: 0; } .signal-left { background: var(--cream); padding: 36px 28px; border-right: 1px solid var(--cream-dark); display: flex; flex-direction: column; justify-content: flex-start; } .signal-num { font-family: var(--font-display); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); margin-bottom: 8px; } .signal-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; } .signal-right { padding: 36px 40px; } .signal-right p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 14px; } .signal-right p:last-child { margin-bottom: 0; } .signal-right em { color: var(--ink); font-style: normal; font-weight: 500; } .signal-callout { margin-top: 16px; padding: 16px 20px; background: var(--cream); border-left: 2px solid var(--terra); font-size: 13px; font-style: italic; color: var(--ink-mid); line-height: 1.65; } /* ── Pull quote ── */ .pull-quote { background: var(--olive); padding: 64px 56px; margin: 64px 0; position: relative; overflow: hidden; } .pull-quote::before { content: '\201C'; position: absolute; top: -40px; left: 32px; font-family: var(--font-display); font-size: 220px; color: rgba(181,69,27,0.1); line-height: 1; pointer-events: none; } .pull-quote p { font-family: var(--font-display); font-size: clamp(18px, 2.5vw, 26px); font-weight: 300; font-style: italic; color: var(--cream); line-height: 1.5; max-width: 720px; position: relative; z-index: 1; } /* ── Closing section ── */ .closing-section { background: var(--cream); border-top: 1px solid var(--cream-dark); padding: 64px 48px; } .closing-inner { max-width: 900px; margin: 0 auto; } .closing-section .section-intro { margin-bottom: 24px; } .closing-research-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); text-decoration: none; border-bottom: 1px solid rgba(181,69,27,0.3); padding-bottom: 3px; transition: border-color 0.2s; } .closing-research-link:hover { border-color: var(--terra); } /* ── Footer ── */ footer { background: var(--olive); padding: 40px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-brand { font-family: var(--font-display); font-size: 13px; color: rgba(247,243,238,0.45); } .footer-links { display: flex; gap: 24px; flex-wrap: wrap; } .footer-links a { font-size: 11px; letter-spacing: 0.06em; color: rgba(247,243,238,0.4); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--cream); } /* ── Fade-up on scroll ── */ .fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } .fade-up.visible { opacity: 1; transform: none; } /* ── Responsive ── */ @media (max-width: 780px) { .report-nav { padding: 18px 20px; } .report-header { padding: 56px 20px 52px; } .findings-band { padding: 40px 20px; } .report-body { padding: 48px 20px; } .cluster-grid { grid-template-columns: 1fr; } .signal-block { grid-template-columns: 1fr; } .signal-left { border-right: none; border-bottom: 1px solid var(--cream-dark); padding: 24px 20px; flex-direction: row; align-items: baseline; gap: 16px; } .signal-right { padding: 24px 20px; } .pull-quote { padding: 48px 20px; } .closing-section { padding: 48px 20px; } footer { padding: 32px 20px; flex-direction: column; align-items: flex-start; } thead th, tbody td { padding: 10px 10px; } }