/* ============================================= DATSTRA ANALYTICS — Design System & Styles ============================================= */ /* ----- 1. Custom Properties ----- PALETTE A "ink" is canonical. The legacy navy/coral/cream names below are kept as aliases so the ~170 existing references keep resolving — they now point at ink values. Retire them page by page in Phase 6. To evaluate PALETTE B "navy" (current brand colours, new layout and type), set data-palette="navy" on . Only the canonical block changes. ------------------------------------------------------------------ */ :root { /* canonical */ --paper: #f6f4ef; --card: #fbfaf7; --ink: #141b24; --ink-72: rgba(20,27,36,.72); --ink-48: rgba(20,27,36,.48); --ink-26: rgba(20,27,36,.26); --rule: rgba(20,27,36,.14); --rule-2: rgba(20,27,36,.075); --accent: #e04a60; --accent-lt: #ff8496; --panel: #131b26; --panel-2: #0e151f; --on: #f4f1eb; --on-64: rgba(244,241,235,.64); --on-36: rgba(244,241,235,.36); --rule-on: rgba(244,241,235,.14); /* legacy aliases — do not use in new code */ --navy: var(--panel); --navy-deep: #1b2531; --navy-dark: var(--panel-2); --navy-light: #2b3a4d; --coral: var(--accent); --coral-dark: #c33d51; --coral-glow: rgba(224,74,96,0.15); --cream: var(--paper); --warm-white: var(--card); --warm-gray-1: #efece5; --warm-gray-2: rgba(20,27,36,.14); --warm-gray-3: rgba(20,27,36,.26); --text-dark: var(--ink); --text-body: var(--ink-72); --text-muted: var(--ink-48); --text-light: var(--ink-26); --font-display: 'Piazzolla', Georgia, serif; --font-body: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; --size-display: clamp(2.85rem, 6.6vw, 5.6rem); --size-h1: clamp(2.65rem, 6.2vw, 5.25rem); --size-h2: clamp(1.82rem, 4vw, 3.375rem); --size-h3: clamp(1.14rem, 1.85vw, 1.44rem); --size-h4: clamp(1rem, 1.4vw, 1.18rem); --size-body-lg: 1.05rem; --size-body: 1.0625rem; --size-body-sm: 0.9375rem; --size-caption: 0.8125rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; --space-section: clamp(3rem, 5.6vw, 5.4rem); /* the new language is square and unshadowed: hairline rules do the work */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-glow: none; --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1); --container: 1300px; --container-narrow: 900px; --gutter: clamp(1.25rem, 4vw, 2.5rem); } /* PALETTE B "navy" — current brand colours on the new layout and type. Review variant; delete whichever half loses. */ :root[data-palette="navy"] { --paper: #faf8f5; --card: #ffffff; --ink: #1a2433; --ink-72: rgba(26,36,51,.75); --ink-48: rgba(26,36,51,.55); --ink-26: rgba(26,36,51,.30); --rule: rgba(26,36,51,.14); --rule-2: rgba(26,36,51,.075); --accent: #f67280; --accent-lt: #ff9aa5; --panel: #1e3a5f; --panel-2: #0f1f33; --on: #f3efe9; --on-64: rgba(243,239,233,.68); --on-36: rgba(243,239,233,.42); --rule-on: rgba(243,239,233,.16); --navy-light: #4a7a9b; --coral-dark: #e45a68; --warm-gray-1: #f3efe9; } /* ----- 2. Reset & Base ----- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.7; color: var(--text-body); background: var(--cream); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } /* ----- 3. Typography ----- Piazzolla is a variable face with a 300–800 weight axis and an 8–30 optical size axis. These weights were tuned for Newsreader, which is light at 400 — carried onto Piazzolla they render as a heavy slab. The editorial voice comes from regular weight, negative tracking and optical sizing, per /nonprofits. */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-dark); font-weight: 400; font-optical-sizing: auto; line-height: 1.06; letter-spacing: -0.032em; text-wrap: balance; } /* the measure is what makes a heading an object rather than a banner: it forces the two-line break the voice is built around. Override per-component, not here. */ h1 { font-size: var(--size-h1); line-height: 1.0; max-width: 14ch; } /* the second clause of a heading carries the emphasis, in coral italic */ h1 em, h2 em { color: var(--accent); font-style: italic; } .section-dark h1 em, .section-dark h2 em, .panel-hero h1 em, .panel-hero h2 em, .final-cta h1 em, .final-cta h2 em { color: var(--accent-lt); } h2 { font-size: var(--size-h2); line-height: 1.04; max-width: 19ch; } h3 { font-size: var(--size-h3); line-height: 1.2; letter-spacing: -0.022em; } h4 { font-size: var(--size-h4); line-height: 1.25; letter-spacing: -0.022em; } p + p { margin-top: 1em; } .text-coral { color: var(--coral); } .text-navy { color: var(--navy); } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .eyebrow { font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } /* ----- 4. Layout ----- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-section); /* a hairline at every seam, so paper-on-paper transitions still register as structure instead of reading as one continuous void */ border-bottom: 1px solid var(--rule); } .section-dark + .section-dark, .section:last-of-type { border-bottom: 0; } .section-dark { background: var(--navy-dark); color: var(--warm-white); } .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--warm-white); } .section-dark .text-muted { color: var(--text-light); } .section-navy { background: var(--navy); color: var(--warm-white); } .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--warm-white); } .section-warm { background: var(--warm-gray-1); } /* ----- 5. Navigation ----- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0.85rem 0; transition: var(--transition-base); /* solid from the start: the homepage hero is a dark panel, and a transparent nav there put dark links and a dark logo on a near-black background */ background: var(--paper); border-bottom: 1px solid var(--rule); } .nav.scrolled { background: rgba(250, 248, 245, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0.75rem 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .nav-logo { font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.4rem; } .nav-logo-mark { height: 27px; width: auto; } .nav-links { display: flex; align-items: center; gap: 2.25rem; } .nav-link { font-size: var(--size-body-sm); font-weight: 500; color: var(--text-body); position: relative; transition: color var(--transition-fast); } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--coral); border-radius: 0; transition: width var(--transition-base); } .nav-link:hover { color: var(--navy); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-cta { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm-white); background: var(--coral); padding: 0.75rem 1.3rem; border-radius: var(--radius-sm); transition: var(--transition-fast); } .nav-cta:hover { background: var(--coral-dark); box-shadow: var(--shadow-md); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; width: 28px; cursor: pointer; } .nav-hamburger span { display: block; height: 2px; background: var(--navy); border-radius: 0; transition: var(--transition-base); } .nav-mobile { display: none; } /* ----- 6. Buttons ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 700; font-size: 0.66rem; padding: 1.05rem 1.75rem;letter-spacing: 0.18em; text-transform: uppercase; border-radius: var(--radius-sm); transition: var(--transition-fast); cursor: pointer; } .btn-coral { background: var(--coral); color: var(--warm-white); } .btn-coral:hover { background: var(--coral-dark); } .btn-navy { background: var(--navy); color: var(--warm-white); } .btn-navy:hover { background: var(--navy-deep); box-shadow: var(--shadow-lg); } .btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); } .btn-outline:hover { background: var(--navy); color: var(--warm-white); } .btn-outline-white { background: transparent; color: var(--warm-white); border: 2px solid rgba(255,255,255,0.4); } .btn-outline-white:hover { background: var(--warm-white); color: var(--navy); border-color: var(--warm-white); } .btn-white { background: var(--warm-white); color: var(--navy); } .btn-white:hover { box-shadow: var(--shadow-lg); } .btn-sm { padding: 0.6rem 1.4rem; font-size: var(--size-body-sm); } /* scales the micro-label, it does not reintroduce body-size button text — overriding font-size here is what made these wrap out of the hero row */ .btn-lg { padding: 1.2rem 2.25rem; font-size: 0.72rem; } /* ----- 7. Hero ----- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 5rem; padding-bottom: var(--space-3xl); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(53,92,125,0.04), transparent), radial-gradient(ellipse 60% 80% at 85% 30%, rgba(246,114,128,0.03), transparent); pointer-events: none; } .hero::after { content: ''; position: absolute; top: 0; right: -10%; width: 50%; height: 100%; background: radial-gradient(circle at center, rgba(53,92,125,0.03) 0%, transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; position: relative; z-index: 1; } .hero-content { max-width: 600px; } .hero-headline { font-size: var(--size-display); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--space-md); } .hero-sub { font-size: var(--size-body-lg); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--space-lg); max-width: 520px; } .hero-ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .hero-visual { position: relative; display: flex; justify-content: center; } /* ----- 8. Section Headers ----- */ .section-header { margin-bottom: var(--space-xl); } .section-header .eyebrow { margin-bottom: var(--space-sm); } .section-header h2 { margin-bottom: var(--space-md); } /* :not(.eyebrow) is load-bearing — the eyebrow is a

, and this selector outranks .eyebrow, so without it every kicker rendered 20px grey not 10px coral */ .section-header > p:not(.eyebrow) { font-size: var(--size-body); color: var(--text-muted); max-width: 52ch; } /* deliberately inert: the class is still on the markup but the new language is left-aligned. Kept as a no-op so page HTML did not need rewriting twice. */ .section-header.center { text-align: left; } .section-header.center p { margin-inline: 0; } .section-header.center h2 { margin-inline: 0; } /* ----- 9. Crisis Stats (now inside attrition section — see donor-attrition block) ----- */ /* ----- 10. Proof / Stats Section ----- */ .proof { position: relative; overflow: hidden; } .proof::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(246,114,128,0.08), transparent 50%), radial-gradient(circle at 80% 20%, rgba(74,122,155,0.1), transparent 50%); pointer-events: none; } .proof-content { position: relative; z-index: 1; text-align: left; } .proof-stat { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-md); margin-top: var(--space-lg); margin-bottom: var(--space-lg); flex-wrap: wrap; } .proof-number { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 400; color: var(--accent-lt); line-height: 1; } .proof-arrow { font-size: 2rem; color: rgba(255,255,255,0.3); } .proof-text { max-width: 680px; margin-inline: auto; font-size: var(--size-body-lg); line-height: 1.7; opacity: 0.85; } .proof-text em { font-family: var(--font-display); font-style: italic; color: var(--warm-white); } .proof-attribution { margin-top: var(--space-lg); font-size: var(--size-body-sm); opacity: 0.5; } .proof-callout { display: inline-block; margin-top: var(--space-lg); margin-bottom: var(--space-lg); padding: 0.6rem 1.5rem; border: 1px solid rgba(246,114,128,0.3); border-radius: 0; font-size: var(--size-body); color: rgba(255,255,255,0.85); letter-spacing: 0.01em; } .proof-callout strong { color: var(--coral); font-size: var(--size-h4); font-family: var(--font-display); font-weight: 400; } .proof-transform { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-xl); max-width: 800px; margin: var(--space-lg) auto 0; } .proof-col-label { font-size: var(--size-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-md); opacity: 0.5; } .proof-list { list-style: none; } .proof-list li { font-size: var(--size-body); line-height: 1.7; padding: 0.4rem 0; padding-left: 1.75rem; position: relative; color: rgba(255,255,255,0.45); } .proof-list li::before { content: '\00d7'; position: absolute; left: 0; color: var(--coral); font-weight: 700; font-size: 1.1em; } .proof-list-after li { color: rgba(255,255,255,0.85); } .proof-list-after li::before { content: '\2713'; color: #34d399; } .proof-divider-vert { background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12), transparent); } /* ----- 11. Dashboard Mockups ----- */ .dashboard-mockup { background: #0f172a; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); transition: var(--transition-base); } .dashboard-mockup:hover { border-color: var(--ink-26); } .dash-toolbar { background: #1e293b; padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); } .dash-dots { display: flex; gap: 6px; } .dash-dot { width: 10px; height: 10px; border-radius: 50%; } .dash-dot.red { background: #ef4444; } .dash-dot.yellow { background: #eab308; } .dash-dot.green { background: #22c55e; } .dash-title { font-size: 0.75rem; font-weight: 500; color: #94a3b8; letter-spacing: 0.02em; } .dash-body { padding: 1rem; } /* KPI Row */ .dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 0.75rem; } .dash-kpi { background: #1e293b; border-radius: 0; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.04); } .dash-kpi-label { font-size: 0.6rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; } .dash-kpi-value { font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; color: #f1f5f9; letter-spacing: -0.02em; } .dash-kpi-change { font-size: 0.6rem; font-weight: 600; margin-top: 0.15rem; } .dash-kpi-change.positive { color: #34d399; } .dash-kpi-change.negative { color: #f67280; } /* Chart Area */ .dash-chart-area { background: #1e293b; border-radius: 0; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.04); } .dash-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; } .dash-chart-title { font-size: 0.7rem; font-weight: 500; color: #94a3b8; } .dash-chart-legend { display: flex; gap: 0.8rem; } .dash-legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.55rem; color: #64748b; } .dash-legend-dot { width: 6px; height: 6px; border-radius: 0; } .dash-legend-dot.navy { background: #4a8ec7; } .dash-legend-dot.coral { background: #f67280; } /* Bar Chart */ .dash-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .dash-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; position: relative; } .dash-bar-group-bars { display: flex; gap: 2px; align-items: flex-end; flex: 1; width: 100%; } .dash-bar { flex: 1; border-radius: 0; min-height: 4px; transition: var(--transition-base); } .dash-bar.navy { background: linear-gradient(to top, #355c7d, #4a8ec7); } .dash-bar.coral { background: linear-gradient(to top, #e45a68, #f67280); opacity: 0.6; } .dash-bar-label { font-size: 0.5rem; color: #475569; margin-top: 0.25rem; white-space: nowrap; } /* Hero Dashboard — larger */ .dashboard-hero { width: 100%; max-width: 560px; transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); } .dashboard-hero .dash-body { padding: 1.25rem; } .dashboard-hero .dash-kpi-row { gap: 0.75rem; margin-bottom: 1rem; } .dashboard-hero .dash-bars { height: 110px; } /* Small Dashboard Cards (product grid) */ .dashboard-sm { width: 100%; } .dashboard-sm .dash-kpi-row { grid-template-columns: repeat(3, 1fr); } .dashboard-sm .dash-bars { height: 70px; } /* Donor 360 Mockup */ .dash-profile { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; } .dash-avatar { width: 36px; height: 36px; border-radius: 0; background: linear-gradient(135deg, #4a8ec7, #355c7d); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; } .dash-profile-info { min-width: 0; } .dash-profile-name { font-size: 0.8rem; font-weight: 600; color: #f1f5f9; } .dash-profile-meta { font-size: 0.55rem; color: #64748b; } .dash-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; } .dash-metric { text-align: center; padding: 0.5rem; background: rgba(255,255,255,0.03); border-radius: 0; } .dash-metric-value { font-size: 0.9rem; font-weight: 700; color: #f1f5f9; } .dash-metric-label { font-size: 0.5rem; color: #64748b; margin-top: 0.1rem; } /* Activity List */ .dash-activity { display: flex; flex-direction: column; gap: 0.35rem; } .dash-activity-item { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.5rem; background: rgba(255,255,255,0.02); border-radius: 0; font-size: 0.55rem; color: #94a3b8; } .dash-activity-amount { font-weight: 600; color: #34d399; } /* Horizontal Bar Chart */ .dash-hbars { display: flex; flex-direction: column; gap: 0.45rem; } .dash-hbar-item { display: grid; grid-template-columns: 70px 1fr 40px; gap: 0.5rem; align-items: center; font-size: 0.6rem; } .dash-hbar-name { color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-hbar-track { height: 8px; background: rgba(255,255,255,0.04); border-radius: 0; overflow: hidden; } .dash-hbar-fill { height: 100%; border-radius: 0; background: linear-gradient(90deg, #355c7d, #4a8ec7); } .dash-hbar-value { color: #64748b; text-align: right; font-weight: 500; } /* Retention Line Chart */ .dash-line-chart { position: relative; height: 80px; margin-top: 0.5rem; } .dash-line-svg { width: 100%; height: 100%; } .dash-line-path { fill: none; stroke: #4a8ec7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dash-line-area { fill: url(#lineGradient); opacity: 0.3; } .dash-cohort-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 0.75rem; } .dash-cohort-cell { aspect-ratio: 1; border-radius: 0; min-height: 16px; } /* ----- 12. Product Section (Dashboard Gallery) ----- */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .product-item { display: flex; flex-direction: column; gap: var(--space-sm); } .product-item-label { display: flex; align-items: center; gap: var(--space-xs); } .product-item-label h4 { font-size: var(--size-body); font-family: var(--font-body); font-weight: 600; } .product-item-desc { font-size: var(--size-body-sm); color: var(--text-muted); margin-top: -0.25rem; } /* ----- 12b. Pillars Section ----- */ .pillars-section { background: var(--navy-dark); position: relative; overflow: hidden; } .pillars-section::before { content: ''; position: absolute; top: -30%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(246,114,128,0.05) 0%, transparent 70%); pointer-events: none; } .pillars-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg); } .pillar { display: flex; flex-direction: column; padding-top: var(--space-md); border-top: 2px solid rgba(255,255,255,0.1); } .pillar-num { font-family: var(--font-body); font-size: var(--size-body-sm); font-weight: 700; color: var(--coral); line-height: 1; margin-bottom: var(--space-md); letter-spacing: 0.05em; } .pillar-content { margin-bottom: var(--space-sm); } .pillar-title { font-family: var(--font-display); font-size: var(--size-h4); font-weight: 400; color: var(--warm-white); margin-bottom: 0.3rem; } .pillar-tagline { font-family: var(--font-display); font-style: italic; color: rgba(246,114,128,0.7); font-size: var(--size-body-sm); line-height: 1.45; } .pillar-body { font-size: var(--size-body-sm); color: rgba(255,255,255,0.45); line-height: 1.65; } /* Dark section sub-paragraph override for readability */ .section-dark .section-header p { color: rgba(255,255,255,0.6); } /* ----- 13. ICP Section ----- */ .icp-content { max-width: 780px; margin-inline: auto; } .icp-quote { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 400; font-style: italic; color: var(--navy); line-height: 1.35; margin-bottom: var(--space-lg); position: relative; padding-left: var(--space-lg); } .icp-quote::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--coral); border-radius: 0; } .icp-body { font-size: var(--size-body-lg); line-height: 1.75; color: var(--text-body); } .icp-body strong { color: var(--navy); } .icp-highlight { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 400; color: var(--navy); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 2px solid var(--warm-gray-2); } /* ----- 14. Process Steps ----- */ /* Navy-deep sits between the two near-black sections — distinct but dark enough for contrast */ #process { background: var(--navy-deep); padding-block: clamp(6rem, 12vw, 9rem); } #process h2 { color: var(--warm-white); } #process .step h3 { color: var(--warm-white); } #process .step p:not(.step-time) { color: rgba(255, 255, 255, 0.8); } .steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .step { position: relative; border-top: 1px solid var(--rule); padding-top: var(--space-md); } .step-num { font-family: var(--font-display); font-style: italic; font-size: clamp(1.75rem, 3.4vw, 2.85rem); font-weight: 400; color: var(--ink-26); line-height: 1; margin-bottom: var(--space-sm); letter-spacing: -0.03em; transition: color var(--transition-base); } .step:hover .step-num { color: var(--accent); } .step h3 { font-size: var(--size-h4); margin-bottom: 0.35rem; } .step .step-time { font-size: var(--size-body-sm); color: var(--coral); font-weight: 600; margin-bottom: var(--space-sm); letter-spacing: 0.02em; } .step p:not(.step-time) { color: var(--text-muted); font-size: var(--size-body-sm); line-height: 1.7; } /* ----- 14b. Trusted By ----- */ .trusted-by { padding: var(--space-xl) 0 var(--space-lg); background: var(--cream); } .trusted-by-heading { text-align: center; font-family: var(--font-display); font-size: var(--size-h3); font-weight: 400; color: var(--text-muted); margin-bottom: var(--space-lg); } .trusted-by-track { animation: trustedByScroll 30s linear infinite; } @keyframes trustedByScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } } .trusted-by-strip { gap: clamp(3rem, 6vw, 5rem); padding-right: clamp(3rem, 6vw, 5rem); } .trusted-by-logo { height: 40px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.5; transition: opacity 0.3s, filter 0.3s; flex-shrink: 0; } .trusted-by-logo:hover { filter: grayscale(0%); opacity: 1; } /* ----- 15. Testimonials ----- */ .quotes-stack { max-width: 900px; margin-inline: auto; } .quote-row { padding: var(--space-xl) 0; border-bottom: 1px solid var(--warm-gray-2); display: grid; grid-template-columns: 1fr auto; gap: var(--space-xl); align-items: start; } .quote-row:first-child { border-top: 1px solid var(--warm-gray-2); } .quote-text::before, .quote-text::after { content: '' !important; } .quote-text { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-style: italic; color: var(--navy); line-height: 1.45; margin: 0; } .quote-full { display: none; opacity: 0; } .quote-row.expanded .quote-full { display: inline; animation: quoteFadeIn 0.4s ease forwards; } @keyframes quoteFadeIn { from { opacity: 0; } to { opacity: 1; } } .quote-ellipsis { color: var(--text-muted); margin-right: 0.3em; } .quote-toggle { display: inline-block; background: none; border: none; font-family: var(--font-body); font-size: var(--size-body-sm); color: var(--coral); cursor: pointer; padding: 0; margin-top: 0.5rem; font-weight: 500; transition: color 0.2s; } .quote-toggle:hover { color: var(--coral-dark); } .quote-toggle::before { content: '\25B8'; margin-right: 0.35em; display: inline-block; transition: transform 0.3s; } .quote-row.expanded .quote-toggle::before { transform: rotate(90deg); } .quote-attr { text-align: right; min-width: 180px; padding-top: 0.25rem; } .quote-attr strong { display: block; font-family: var(--font-body); font-size: var(--size-body); font-weight: 600; color: var(--text-dark); } .quote-attr span { font-size: var(--size-body-sm); color: var(--text-muted); } /* ----- 16. Final CTA ----- */ .final-cta { text-align: left; position: relative; overflow: hidden; } .final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(246,114,128,0.1), transparent 60%); pointer-events: none; } .final-cta h2 { color: var(--warm-white); margin-bottom: var(--space-md); } .final-cta p { color: rgba(255,255,255,0.7); font-size: var(--size-body-lg); max-width: 540px; margin-inline: 0; margin-bottom: var(--space-lg); } .final-cta-buttons { display: flex; gap: var(--space-sm); justify-content: flex-start; flex-wrap: wrap; } /* ----- 17. Footer ----- */ .footer { background: var(--navy-dark); color: rgba(255,255,255,0.6); padding: var(--space-2xl) 0 var(--space-lg); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); } .footer-brand { max-width: 300px; } .footer-logo { font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; color: var(--warm-white); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 0.4rem; } .footer-logo-mark { height: 28px; width: auto; } .footer-desc { font-size: var(--size-body-sm); line-height: 1.6; margin-bottom: var(--space-md); } .footer-col h4 { color: var(--warm-white); font-family: var(--font-body); font-size: var(--size-body-sm); font-weight: 600; margin-bottom: var(--space-md); letter-spacing: 0.03em; } .footer-col a { display: block; font-size: var(--size-body-sm); padding: 0.3rem 0; transition: color var(--transition-fast); } .footer-col a:hover { color: var(--warm-white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-md); display: flex; justify-content: space-between; align-items: center; font-size: var(--size-caption); } .footer-bottom-links { display: flex; gap: var(--space-md); } .footer-bottom-links a:hover { color: var(--warm-white); } /* ============================================= INNER PAGE STYLES ============================================= */ /* ----- Page Hero (shared) ----- */ .page-hero { padding-top: 7rem; padding-bottom: var(--space-xl); text-align: left; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 80%, rgba(53,92,125,0.06), transparent); pointer-events: none; } .page-hero h1 { margin-bottom: var(--space-md); } /* same :not(.eyebrow) guard as .section-header — the kicker is a

*/ .page-hero > .container-narrow > p:not(.eyebrow), .page-hero p:not(.eyebrow) { font-size: var(--size-body); color: var(--text-muted); max-width: 52ch; } /* ----- How We Work Page: Phases ----- */ .phases { max-width: 960px; margin-inline: auto; } .phase { display: grid; grid-template-columns: 240px 1fr; gap: 0 var(--space-xl); padding: var(--space-xl) 0; border-top: 1px solid var(--warm-gray-2); align-items: start; } .phase:last-child { border-bottom: 1px solid var(--warm-gray-2); } .phase-meta { position: sticky; top: 6rem; } .phase-label { font-family: var(--font-body); font-size: var(--size-caption); font-weight: 600; color: var(--text-light); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: var(--space-xs); } .phase-title { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 400; color: var(--text-dark); line-height: 1.2; margin-bottom: var(--space-xs); } .phase-time { font-size: var(--size-body-sm); color: var(--coral); font-weight: 600; } .phase-list { list-style: none; } .phase-list li { position: relative; padding-left: 1.5rem; padding-bottom: 0.4rem; font-size: var(--size-body); color: var(--text-body); line-height: 1.7; } .phase-list li::before { content: '\2014'; position: absolute; left: 0; color: var(--warm-gray-3); font-size: 0.75em; } .phase-outcome { margin-top: var(--space-md); padding-left: var(--space-md); border-left: 2px solid var(--coral); font-family: var(--font-display); font-style: italic; color: var(--navy); font-size: var(--size-body); line-height: 1.6; } /* Integration Marquee */ .marquee-container { overflow: hidden; position: relative; padding: var(--space-sm) 0; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .marquee-track { display: flex; width: fit-content; animation: marqueeScroll 40s linear infinite; } .marquee-track-reverse { animation-direction: reverse; animation-duration: 35s; margin-top: var(--space-sm); } .marquee-content { display: flex; align-items: center; gap: var(--space-lg); flex-shrink: 0; padding-right: var(--space-lg); } .marquee-item { font-size: var(--size-body-lg); font-weight: 500; color: var(--text-body); white-space: nowrap; } .marquee-dot { color: var(--warm-gray-3); font-size: 0.5rem; line-height: 1; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ----- Results Page ----- */ .gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } .gallery-item { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(53,92,125,0.06); } .gallery-item:nth-child(even) { direction: rtl; } .gallery-item:nth-child(even) > * { direction: ltr; } .gallery-item .dashboard-mockup { margin-bottom: 0; } .gallery-item-content { display: flex; flex-direction: column; gap: var(--space-sm); } .gallery-item-content h4 { font-family: var(--font-display); font-size: var(--size-h4); color: var(--text-dark); margin-bottom: 0; } .gallery-item-question { font-family: var(--font-display); font-size: var(--size-body); color: var(--coral); margin-bottom: 0; } .gallery-item-content > p { font-size: var(--size-body-sm); color: var(--text-body); line-height: 1.7; } .gallery-item-insight { background: var(--cream); border-left: 3px solid var(--coral); padding: var(--space-sm) var(--space-md); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--size-body-sm) !important; color: var(--text-dark) !important; line-height: 1.7; } .case-study { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); border: 1px solid rgba(53,92,125,0.06); margin-bottom: var(--space-lg); } .case-study:last-child { margin-bottom: 0; } .case-study-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-md); gap: var(--space-md); } .case-study h3 { margin-bottom: 0.25rem; } .case-study-tag { font-size: var(--size-caption); font-weight: 600; color: var(--coral); background: var(--coral-glow); padding: 0.3rem 0.8rem; border-radius: 0; white-space: nowrap; } .case-study-section { margin-bottom: var(--space-md); } .case-study-section:last-child { margin-bottom: 0; } .case-study-section h4 { font-family: var(--font-body); font-size: var(--size-body-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; } .case-study-stat { font-family: var(--font-display); font-size: var(--size-h2); font-weight: 400; color: var(--navy); } /* ----- Pricing Page ----- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); align-items: start; } .pricing-card { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); border: 1px solid rgba(53,92,125,0.06); transition: var(--transition-base); position: relative; } .pricing-card.featured { border-color: var(--coral); box-shadow: var(--shadow-lg), 0 0 0 1px var(--coral); transform: scale(1.02); } .pricing-card.featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--coral); color: white; font-size: var(--size-caption); font-weight: 600; padding: 0.25rem 1rem; border-radius: 0; } .pricing-card:hover { box-shadow: var(--shadow-lg); } .pricing-card.featured:hover { border-color: var(--accent); } .pricing-card h3 { font-family: var(--font-body); font-size: var(--size-h4); margin-bottom: 0.25rem; } .pricing-tag { font-size: var(--size-body-sm); color: var(--text-muted); margin-bottom: var(--space-md); } .pricing-amount { font-family: var(--font-display); font-size: var(--size-h1); font-weight: 400; color: var(--navy); margin-bottom: 0.25rem; } .pricing-amount span { font-size: var(--size-body); font-weight: 400; color: var(--text-muted); } .pricing-period { font-size: var(--size-body-sm); color: var(--text-muted); margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--warm-gray-2); } .pricing-features { margin-bottom: var(--space-lg); } .pricing-features li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; font-size: var(--size-body-sm); color: var(--text-body); } .pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--coral); font-weight: 700; } .pricing-note { font-family: var(--font-display); font-style: italic; font-size: var(--size-body-sm); color: var(--text-muted); margin-top: var(--space-md); } /* FAQ */ .faq-list { max-width: 800px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--warm-gray-2); } .faq-question { width: 100%; text-align: left; padding: var(--space-md) 0; font-family: var(--font-body); font-size: var(--size-body); font-weight: 600; color: var(--text-dark); display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); cursor: pointer; } .faq-icon { font-size: 1.25rem; color: var(--coral); transition: transform var(--transition-base); flex-shrink: 0; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-base), padding var(--transition-base); } .faq-item.open .faq-answer { max-height: 300px; padding-bottom: var(--space-md); } .faq-answer p { font-size: var(--size-body-sm); color: var(--text-muted); line-height: 1.65; } /* ----- About Page ----- */ .about-story { max-width: 780px; margin-inline: auto; } .about-story-lead { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 400; font-style: italic; line-height: 1.35; color: var(--navy); margin-bottom: var(--space-lg); } .about-story p { font-size: var(--size-body-lg); line-height: 1.8; margin-bottom: var(--space-md); } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .team-card { text-align: center; } .team-avatar { width: 120px; height: 120px; border-radius: 0; margin: 0 auto var(--space-md); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: white; } /* flat fills, not gradients — the new language has no depth effects */ .team-avatar.navy { background: var(--panel); } .team-avatar.coral { background: var(--accent); } .team-avatar.deep { background: var(--panel-2); } .team-card h3 { font-family: var(--font-body); font-size: var(--size-body-lg); margin-bottom: 0.1rem; } .team-role { font-size: var(--size-body-sm); color: var(--coral); font-weight: 500; margin-bottom: var(--space-sm); } .team-bio { font-size: var(--size-body-sm); color: var(--text-muted); line-height: 1.6; } .values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .value-card { padding: var(--space-lg); background: var(--warm-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid rgba(53,92,125,0.06); border-left: 4px solid var(--coral); } .value-card h3 { font-size: var(--size-h4); margin-bottom: 0.25rem; } .value-arabic { font-size: var(--size-body-sm); font-weight: 500; margin-bottom: var(--space-sm); } .value-arabic-script { font-size: 1.1em; direction: rtl; margin-left: 0.35em; color: var(--coral); } .value-card p { font-size: var(--size-body-sm); color: var(--text-muted); line-height: 1.65; } /* ----- Contact Page ----- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; } .contact-form { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); } .form-group { margin-bottom: var(--space-md); } .form-group label { display: block; font-size: var(--size-body-sm); font-weight: 500; color: var(--text-dark); margin-bottom: 0.35rem; } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid var(--warm-gray-2); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--size-body); color: var(--text-dark); background: var(--cream); transition: border-color var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--navy); } .form-textarea { min-height: 120px; resize: vertical; } .contact-trust { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-lg); } .trust-item { display: flex; gap: var(--space-sm); align-items: flex-start; } .trust-icon { width: 40px; height: 40px; border-radius: 0; background: var(--coral-glow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; } .trust-item h4 { font-family: var(--font-body); font-size: var(--size-body); margin-bottom: 0.15rem; } .trust-item p { font-size: var(--size-body-sm); color: var(--text-muted); } /* ----- Resources Page ----- */ .articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-lg); } .article-card { background: var(--warm-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(53,92,125,0.06); transition: var(--transition-base); } .article-card:hover { box-shadow: var(--shadow-md); } .article-card-image { height: 180px; background: linear-gradient(135deg, var(--navy), var(--navy-light)); display: flex; align-items: center; justify-content: center; padding: var(--space-md); } .article-card-image span { font-family: var(--font-display); font-size: 2.5rem; opacity: 0.15; color: white; } /* ----- Resource Card Visualizations ----- */ .card-viz { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; padding: 24px; box-sizing: border-box; } /* 1. Rising Bar Chart ($254M → $664M) */ .viz-bars { gap: 12px; align-items: flex-end; } .viz-bars .bar { width: 28px; border-radius: 0; background: rgba(255,255,255,0.6); transition: height 0.4s ease, background 0.4s ease; position: relative; } .viz-bars .bar:nth-child(1) { height: 30%; } .viz-bars .bar:nth-child(2) { height: 48%; } .viz-bars .bar:nth-child(3) { height: 68%; } .viz-bars .bar:nth-child(4) { height: 92%; background: rgba(255,255,255,0.8); } .viz-bars .bar-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; font-family: var(--font-body); color: rgba(255,255,255,0.7); white-space: nowrap; } .viz-bars .bar:last-child .bar-label { color: rgba(255,255,255,0.9); } .article-card:hover .viz-bars .bar { background: rgba(255,255,255,0.75); } .article-card:hover .viz-bars .bar:nth-child(4) { background: rgba(255,255,255,0.9); } /* 2. Leaky Bucket / Draining Bar */ .viz-drain { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 32px 28px; } .viz-drain .drain-track { height: 14px; border-radius: 0; background: rgba(255,255,255,0.2); overflow: hidden; position: relative; } .viz-drain .drain-fill { height: 100%; border-radius: 0; background: linear-gradient(90deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.25) 80%, transparent 100%); width: 85%; } .viz-drain .drain-label-row { display: flex; justify-content: space-between; font-size: 10px; font-family: var(--font-body); color: rgba(255,255,255,0.7); font-weight: 500; } .viz-drain .drain-drops { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; } .viz-drain .drop { width: 4px; height: 8px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: rgba(255,255,255,0.5); } .viz-drain .drop:nth-child(2) { opacity: 0.6; transform: translateY(4px); } .viz-drain .drop:nth-child(3) { opacity: 0.4; transform: translateY(8px); } .article-card:hover .viz-drain .drain-fill { background: linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 80%, transparent 100%); } /* 3. Three Gauge Rings */ .viz-rings { gap: 20px; align-items: center; justify-content: center; } .viz-rings .ring { width: 52px; height: 52px; border-radius: 50%; position: relative; } .viz-rings .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .viz-rings .ring circle { fill: none; stroke-width: 3; } .viz-rings .ring .ring-bg { stroke: rgba(255,255,255,0.25); } .viz-rings .ring .ring-fill { stroke: rgba(255,255,255,0.7); stroke-linecap: round; transition: stroke 0.3s ease; } .viz-rings .ring-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; color: rgba(255,255,255,0.75); font-family: var(--font-body); font-weight: 600; } .article-card:hover .viz-rings .ring-fill { stroke: rgba(255,255,255,0.85); } /* 4. Donor 360 Radar Ring */ .viz-radar { align-items: center; justify-content: center; } .viz-radar .radar-circle { width: 100px; height: 100px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.5); position: relative; transition: border-color 0.3s ease; } .viz-radar .radar-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.75); transition: background 0.3s ease; } .viz-radar .radar-dot:nth-child(1) { top: -4px; left: 50%; transform: translateX(-50%); } .viz-radar .radar-dot:nth-child(2) { top: 18%; right: -2px; } .viz-radar .radar-dot:nth-child(3) { bottom: 18%; right: -2px; } .viz-radar .radar-dot:nth-child(4) { bottom: -4px; left: 50%; transform: translateX(-50%); } .viz-radar .radar-dot:nth-child(5) { bottom: 18%; left: -2px; } .viz-radar .radar-dot:nth-child(6) { top: 18%; left: -2px; } .viz-radar .radar-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-family: var(--font-body); font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: -0.5px; } .article-card:hover .viz-radar .radar-circle { border-color: rgba(255,255,255,0.65); } .article-card:hover .viz-radar .radar-dot { background: rgba(255,255,255,0.9); } /* 5. Declining Line Chart (Ad ROI) */ .viz-decline { gap: 8px; align-items: flex-end; padding-bottom: 40px; } .viz-decline .decline-bar { width: 24px; border-radius: 0; background: rgba(255,255,255,0.6); transition: background 0.3s ease; position: relative; } .viz-decline .decline-bar:nth-child(1) { height: 90%; background: rgba(255,255,255,0.75); } .viz-decline .decline-bar:nth-child(2) { height: 72%; } .viz-decline .decline-bar:nth-child(3) { height: 52%; } .viz-decline .decline-bar:nth-child(4) { height: 35%; } .viz-decline .decline-bar:nth-child(5) { height: 22%; background: rgba(255,255,255,0.4); } .viz-decline .decline-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: var(--font-body); font-weight: 600; color: rgba(255,255,255,0.65); white-space: nowrap; } .article-card:hover .viz-decline .decline-bar { background: rgba(255,255,255,0.75); } .article-card:hover .viz-decline .decline-bar:nth-child(5) { background: rgba(255,255,255,0.55); } /* 6. Gap Visualization ($5M → $25M) */ .viz-gap { align-items: center; justify-content: center; gap: 0; padding: 24px 20px; } .viz-gap .gap-bar { height: 28px; border-radius: 0; background: rgba(255,255,255,0.65); position: relative; display: flex; align-items: center; justify-content: center; } .viz-gap .gap-bar-small { width: 55px; } .viz-gap .gap-bar-large { width: 110px; } .viz-gap .gap-bridge { width: 36px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 4px, transparent 4px 8px); position: relative; } .viz-gap .gap-bridge::before { content: '?'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 12px; font-family: var(--font-body); font-weight: 700; color: rgba(255,255,255,0.65); } .viz-gap .gap-label { font-size: 10px; font-family: var(--font-body); font-weight: 600; color: rgba(255,255,255,0.9); } .article-card:hover .viz-gap .gap-bar { background: rgba(255,255,255,0.8); } .article-card:hover .viz-gap .gap-bridge { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 4px, transparent 4px 8px); } /* 7. Pipeline Flow (Mop & Bucket / Infrastructure) */ .viz-pipeline { align-items: center; justify-content: center; gap: 0; } .viz-pipeline .pipe-node { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.65); flex-shrink: 0; transition: background 0.3s ease; } .viz-pipeline .pipe-line { width: 28px; height: 2px; background: rgba(255,255,255,0.45); position: relative; } .viz-pipeline .pipe-line::after { content: ''; position: absolute; right: -3px; top: -3px; width: 0; height: 0; border-left: 5px solid rgba(255,255,255,0.45); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .viz-pipeline .pipe-node.active { background: rgba(255,255,255,0.85); } .article-card:hover .viz-pipeline .pipe-node { background: rgba(255,255,255,0.8); } .article-card:hover .viz-pipeline .pipe-node.active { background: rgba(255,255,255,0.95); } .article-card:hover .viz-pipeline .pipe-line { background: rgba(255,255,255,0.55); } /* 8. Sankey-style Flow (Supply Chain / Donation Tracking) */ .viz-flow { align-items: center; justify-content: center; position: relative; padding: 20px; } .viz-flow .flow-source { width: 24px; height: 48px; border-radius: 0; background: rgba(255,255,255,0.7); flex-shrink: 0; position: relative; } .viz-flow .flow-source::after { content: '$'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-family: var(--font-body); font-weight: 700; color: rgba(255,255,255,0.9); } .viz-flow .flow-paths { display: flex; flex-direction: column; gap: 4px; margin: 0 6px; } .viz-flow .flow-path { height: 2px; border-radius: 0; background: rgba(255,255,255,0.45); } .viz-flow .flow-path:nth-child(1) { width: 50px; } .viz-flow .flow-path:nth-child(2) { width: 60px; } .viz-flow .flow-path:nth-child(3) { width: 45px; } .viz-flow .flow-path:nth-child(4) { width: 55px; } .viz-flow .flow-targets { display: flex; flex-direction: column; gap: 6px; } .viz-flow .flow-target { width: 12px; height: 12px; border-radius: 0; background: rgba(255,255,255,0.6); transition: background 0.3s ease; } .article-card:hover .viz-flow .flow-source { background: rgba(255,255,255,0.85); } .article-card:hover .viz-flow .flow-target { background: rgba(255,255,255,0.75); } .article-card:hover .viz-flow .flow-path { background: rgba(255,255,255,0.55); } /* 9. Timeline Dots (7 Years Donating) */ .viz-timeline { align-items: center; justify-content: center; gap: 0; } .viz-timeline .tl-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.65); flex-shrink: 0; position: relative; transition: background 0.3s ease; } .viz-timeline .tl-line { width: 12px; height: 2px; background: rgba(255,255,255,0.45); flex-shrink: 0; } .viz-timeline .tl-dot:last-of-type { background: rgba(255,255,255,0.85); } .viz-timeline .tl-dot:first-of-type .tl-label, .viz-timeline .tl-dot:last-of-type .tl-label { display: block; } .viz-timeline .tl-label { display: none; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9px; font-family: var(--font-body); font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; } .article-card:hover .viz-timeline .tl-dot { background: rgba(255,255,255,0.8); } .article-card:hover .viz-timeline .tl-dot:last-of-type { background: rgba(255,255,255,0.95); } /* 10. Split View — Pipes vs Charts (Engineer vs Analyst) */ .viz-split { align-items: center; justify-content: center; gap: 16px; } .viz-split .split-side { display: flex; flex-direction: column; align-items: center; gap: 6px; } .viz-split .split-divider { width: 1px; height: 60px; background: rgba(255,255,255,0.4); } /* Pipe side */ .viz-split .split-pipes { display: flex; align-items: center; gap: 3px; } .viz-split .sp-node { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.65); } .viz-split .sp-pipe { width: 16px; height: 2px; background: rgba(255,255,255,0.45); } /* Chart side */ .viz-split .split-chart { display: flex; align-items: flex-end; gap: 4px; height: 40px; } .viz-split .sc-bar { width: 8px; border-radius: 0; background: rgba(255,255,255,0.6); } .viz-split .sc-bar:nth-child(1) { height: 45%; } .viz-split .sc-bar:nth-child(2) { height: 70%; } .viz-split .sc-bar:nth-child(3) { height: 55%; } .viz-split .sc-bar:nth-child(4) { height: 85%; } .viz-split .split-label { font-size: 9px; font-family: var(--font-body); color: rgba(255,255,255,0.65); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .article-card:hover .viz-split .sp-node { background: rgba(255,255,255,0.8); } .article-card:hover .viz-split .sc-bar { background: rgba(255,255,255,0.75); } .article-card-body { padding: var(--space-lg); } .article-card-tag { font-size: var(--size-caption); font-weight: 600; color: var(--coral); margin-bottom: var(--space-xs); } .article-card h3 { font-size: var(--size-h4); margin-bottom: var(--space-xs); line-height: 1.3; } .article-card p { font-size: var(--size-body-sm); color: var(--text-muted); line-height: 1.6; } .article-card-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--size-body-sm); font-weight: 600; color: var(--coral); margin-top: var(--space-sm); transition: gap var(--transition-fast); } .article-card:hover .article-card-link { gap: 0.6rem; } /* ----- Donor Attrition ----- */ .donor-attrition { background: #0f1923; color: #fff; padding: clamp(1.5rem, 4vh, 3rem) 0; position: relative; } .crisis-stats-section { padding-top: clamp(1.5rem, 4vh, 3rem); padding-bottom: clamp(1.5rem, 4vh, 3rem); } .attrition-inner { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; padding: 0 24px; } /* Year + count header */ .attrition-header { text-align: center; margin-bottom: clamp(12px, 2vh, 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; } .attrition-count { font-family: var(--font-body); font-size: clamp(56px, 10vw, 88px); font-weight: 800; line-height: 1; color: rgba(255,255,255,0.95); transition: color 0.5s ease; order: 1; } .attrition-count.critical { color: var(--coral); } /* Year label sits right below the big number */ .attrition-year { font-family: var(--font-display); font-size: clamp(16px, 2.5vw, 22px); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.45); margin-top: 4px; order: 2; transition: color 0.4s ease; } .attrition-count-label { font-size: 11px; color: rgba(255,255,255,0.25); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; order: 3; } /* Status / replay swap container */ .attrition-controls { position: relative; height: 36px; margin-bottom: clamp(8px, 1.5vh, 16px); } /* Playing status indicator */ .attrition-status { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); visibility: hidden; /* GSAP controls via autoAlpha */ opacity: 0; } .attrition-skip { background: none; border: none; color: rgba(255,255,255,0.25); font-size: 10px; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 2px 6px; margin-left: 8px; transition: color 0.2s; } .attrition-skip:hover { color: rgba(255,255,255,0.6); } .attrition-status-dot { width: 6px; height: 6px; border-radius: 0; background: var(--coral); flex-shrink: 0; animation: attritionBlink 1.2s ease-in-out infinite; } @keyframes attritionBlink { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.2); } } /* Grid wrapper — needed for the overlay replay button */ .attrition-grid-wrap { position: relative; max-width: 240px; width: 100%; margin-bottom: clamp(12px, 2vh, 24px); } /* Video-player-style replay overlay on the dot grid */ .attrition-grid-replay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 0; background: rgba(10, 20, 30, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.9); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; visibility: hidden; /* GSAP controls via autoAlpha */ opacity: 0; } .attrition-grid-replay:hover { background: rgba(10, 20, 30, 0.78); border-color: rgba(255, 255, 255, 0.35); transform: translate(-50%, -50%) scale(1.1); } .attrition-grid-replay svg { width: 26px; height: 26px; } /* Dot grid */ .attrition-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, 1.2vw, 9px); max-width: 240px; width: 100%; padding: 12px; /* margin-bottom moved to .attrition-grid-wrap */ } .attrition-dot { width: 8px; height: 8px; border-radius: 0; background: var(--coral); transform: scale(1); opacity: 1; transition-property: background, box-shadow, transform, opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* .attrition-dot.inactive is no longer used — GSAP drives dot opacity/scale directly */ /* Timeline */ .attrition-timeline { width: 100%; max-width: 300px; margin-bottom: clamp(10px, 1.5vh, 20px); } .attrition-timeline-labels { display: flex; justify-content: space-between; margin-bottom: 8px; } .attrition-timeline-labels span { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.12); letter-spacing: 0.02em; transition: all 0.4s ease; } .attrition-timeline-labels span.active { font-weight: 700; color: rgba(255,255,255,0.8); } .attrition-timeline-labels span.active.final { color: var(--coral); } .attrition-timeline-labels span.past { color: rgba(255,255,255,0.25); } .attrition-timeline-track { height: 3px; background: rgba(255,255,255,0.06); border-radius: 0; position: relative; overflow: hidden; } .attrition-timeline-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(246,114,128,0.4), var(--coral)); border-radius: 0; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Rate label */ .attrition-rate { font-size: 11px; color: rgba(255,255,255,0.2); margin-bottom: clamp(8px, 1.5vh, 16px); letter-spacing: 0.04em; } /* Final message */ .attrition-message { text-align: center; max-width: 400px; margin-bottom: 24px; /* visibility/opacity controlled by GSAP autoAlpha */ } .attrition-message-title { font-family: var(--font-display); font-size: clamp(20px, 4vw, 28px); font-weight: 400; line-height: 1.35; color: rgba(255,255,255,0.8); margin: 0 0 12px; } .attrition-message-title em { color: var(--coral); font-style: italic; } .attrition-message-sub { font-size: 14px; color: rgba(255,255,255,0.3); line-height: 1.6; margin: 0; } /* Animations */ @keyframes attritionFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes attritionFadeInSlow { from { opacity: 0; } to { opacity: 1; } } /* ----- Crisis Stats (dark variant, inside attrition section) ----- */ .attrition-eyebrow { font-family: var(--font-body); font-size: var(--size-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-bottom: var(--space-xs); } .attrition-heading { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400; color: rgba(255,255,255,0.85); text-align: center; max-width: 380px; line-height: 1.35; margin-bottom: clamp(8px, 1.5vh, 20px); } .attrition-crisis-reveal { /* Stats are now in their own section — always visible, naturally below the pin */ } .crisis-reveal-heading { text-align: center; font-family: var(--font-display); font-size: var(--size-h4); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.5); margin-bottom: var(--space-lg); } .crisis-stats-dark { display: flex; margin-bottom: var(--space-xl); } .crisis-stat-dark { flex: 1; padding: 0 var(--space-xl); } .crisis-stat-dark:first-child { padding-left: 0; } .crisis-stat-dark:last-child { padding-right: 0; } .crisis-divider-dark { width: 1px; background: rgba(255,255,255,0.08); flex-shrink: 0; align-self: stretch; } .crisis-num-dark { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 400; color: var(--coral); line-height: 1; margin-bottom: var(--space-sm); letter-spacing: -0.03em; } .crisis-stat-dark h4 { font-family: var(--font-body); font-size: var(--size-body-lg); font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: var(--space-xs); } .crisis-stat-dark p { font-size: var(--size-body-sm); color: rgba(255,255,255,0.4); line-height: 1.65; } .crisis-bottom-dark { text-align: center; font-family: var(--font-display); font-size: var(--size-h4); font-style: italic; color: rgba(255,255,255,0.5); max-width: 700px; margin-inline: auto; } /* ============================================= ANIMATIONS ============================================= */ /* Scroll Reveal */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } /* Stagger children */ .stagger-children > .reveal:nth-child(1) { transition-delay: 0s; } .stagger-children > .reveal:nth-child(2) { transition-delay: 0.12s; } .stagger-children > .reveal:nth-child(3) { transition-delay: 0.24s; } .stagger-children > .reveal:nth-child(4) { transition-delay: 0.36s; } /* Hero-specific animations */ .hero-content { opacity: 0; transform: translateY(40px); animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; } .hero-visual { opacity: 0; transform: translateY(40px) perspective(1000px) rotateY(-3deg); animation: heroDashIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards; } @keyframes heroFadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes heroDashIn { to { opacity: 1; transform: translateY(0) perspective(1000px) rotateY(-3deg) rotateX(2deg); } } /* Count-up shimmer */ .count-up { display: inline-block; } /* Dashboard bar animation */ .dashboard-mockup .dash-bar { transform-origin: bottom; transform: scaleY(0); } .dashboard-mockup.visible .dash-bar { animation: barGrow 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .dashboard-mockup.visible .dash-bar-group:nth-child(1) .dash-bar { animation-delay: 0.05s; } .dashboard-mockup.visible .dash-bar-group:nth-child(2) .dash-bar { animation-delay: 0.1s; } .dashboard-mockup.visible .dash-bar-group:nth-child(3) .dash-bar { animation-delay: 0.15s; } .dashboard-mockup.visible .dash-bar-group:nth-child(4) .dash-bar { animation-delay: 0.2s; } .dashboard-mockup.visible .dash-bar-group:nth-child(5) .dash-bar { animation-delay: 0.25s; } .dashboard-mockup.visible .dash-bar-group:nth-child(6) .dash-bar { animation-delay: 0.3s; } .dashboard-mockup.visible .dash-bar-group:nth-child(7) .dash-bar { animation-delay: 0.35s; } .dashboard-mockup.visible .dash-bar-group:nth-child(8) .dash-bar { animation-delay: 0.4s; } .dashboard-mockup.visible .dash-bar-group:nth-child(9) .dash-bar { animation-delay: 0.45s; } .dashboard-mockup.visible .dash-bar-group:nth-child(10) .dash-bar { animation-delay: 0.5s; } .dashboard-mockup.visible .dash-bar-group:nth-child(11) .dash-bar { animation-delay: 0.55s; } .dashboard-mockup.visible .dash-bar-group:nth-child(12) .dash-bar { animation-delay: 0.6s; } @keyframes barGrow { to { transform: scaleY(1); } } /* H-bar animation */ .dashboard-mockup.visible .dash-hbar-fill { animation: hbarGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; transform-origin: left; transform: scaleX(0); } @keyframes hbarGrow { to { transform: scaleX(1); } } /* ----- ROI Calculator ----- */ .roi-calc-divider { width: 40px; height: 2px; background: var(--coral); margin: var(--space-xl) auto; opacity: 0.6; } .roi-calc-header { text-align: center; margin-bottom: var(--space-xl); } .roi-calc-eyebrow { font-family: var(--font-body); font-size: var(--size-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-bottom: var(--space-sm); } .roi-calc-heading { font-family: var(--font-display); font-size: var(--size-h2); font-weight: 400; color: var(--warm-white); line-height: 1.2; margin-bottom: var(--space-sm); } .roi-calc-heading em { font-style: italic; color: var(--coral); } .roi-calc-sub { font-size: var(--size-body); color: rgba(255,255,255,0.4); max-width: 400px; margin: 0 auto; line-height: 1.6; } .roi-calculator-card { max-width: 520px; margin: 0 auto; padding-bottom: var(--space-2xl); color: #fff; } .roi-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 1.75rem; } .roi-dot { width: 8px; height: 8px; border-radius: 0; background: rgba(255,255,255,0.1); transition: all 0.3s ease; cursor: default; } .roi-dot--active { width: 24px; background: var(--coral); } .roi-dot--done { background: rgba(246,114,128,0.45); cursor: pointer; } .roi-step { display: none; flex-direction: column; align-items: center; } .roi-step--visible { display: flex; animation: roiFadeIn 0.45s ease both; } @keyframes roiFadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .roi-question { font-size: var(--size-body); color: rgba(255,255,255,0.45); font-weight: 500; margin-bottom: 1.5rem; text-align: center; } .roi-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; } .roi-option { padding: 16px 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); color: rgba(255,255,255,0.5); font-size: 1.0625rem; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: all 0.2s ease; } .roi-option:hover { background: rgba(246,114,128,0.07); border-color: rgba(246,114,128,0.2); color: rgba(255,255,255,0.8); } .roi-option--selected { background: rgba(246,114,128,0.13) !important; border-color: rgba(246,114,128,0.42) !important; color: var(--coral) !important; } .roi-info-wrap { position: relative; display: inline-flex; align-items: center; vertical-align: middle; } .roi-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 0; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.35); font-size: 9px; font-family: var(--font-body); font-weight: 700; font-style: normal; cursor: default; margin-left: 5px; transition: border-color 0.2s, color 0.2s; line-height: 1; } .roi-info-wrap:hover .roi-info-icon { border-color: rgba(255,255,255,0.55); color: rgba(255,255,255,0.7); } .roi-info-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; color: var(--text-dark); font-size: 12px; font-family: var(--font-body); font-weight: 400; line-height: 1.55; padding: 10px 14px; border-radius: var(--radius-md); width: 210px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; white-space: normal; text-align: left; z-index: 20; } .roi-info-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; } .roi-info-wrap:hover .roi-info-tip, .roi-info-wrap:focus-within .roi-info-tip { opacity: 1; } @media (max-width: 600px) { .roi-info-tip { left: auto; right: -8px; transform: none; } .roi-info-tip::after { left: auto; right: 12px; transform: none; } } .roi-retention-display { font-size: 3rem; font-weight: 800; color: #fff; font-family: var(--font-body); text-align: center; margin-bottom: 1.5rem; line-height: 1; } .roi-slider-container { width: 100%; margin-bottom: 3rem; } .roi-slider-track { position: relative; height: 26px; /* expanded hit area matches thumb diameter */ background: transparent; border-radius: 0; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; } .roi-slider-track::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 6px; transform: translateY(-50%); background: rgba(255,255,255,0.08); border-radius: 0; pointer-events: none; } .roi-slider-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 0; pointer-events: none; transition: background 0.3s; } .roi-slider-benchmark { position: absolute; bottom: calc(50% + 3px); transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; } .roi-slider-benchmark span { font-size: 10px; color: rgba(255,255,255,0.28); font-family: var(--font-body); font-weight: 600; white-space: nowrap; letter-spacing: 0.05em; } .roi-slider-benchmark-line { width: 1px; height: 14px; background: rgba(255,255,255,0.18); } .roi-slider-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 3px solid #0f1923; pointer-events: none; transition: background 0.3s, box-shadow 0.3s; } .roi-slider-range { display: flex; justify-content: space-between; margin-top: 10px; } .roi-slider-range span { font-size: 11px; color: rgba(255,255,255,0.2); font-family: var(--font-body); } .roi-results { text-align: center; width: 100%; } .roi-punchline-label { font-size: var(--size-body-sm); color: rgba(255,255,255,0.38); font-weight: 500; margin-bottom: 0.75rem; } .roi-punchline-value { font-family: var(--font-body); font-size: clamp(3.25rem, 10vw, 5rem); font-weight: 800; line-height: 1; color: var(--coral); margin-bottom: 0.75rem; letter-spacing: -0.02em; } .roi-punchline-sub { font-size: var(--size-body-sm); color: rgba(255,255,255,0.28); font-weight: 400; line-height: 1.6; max-width: 360px; margin: 0 auto; } .roi-investment { margin-top: 1.75rem; padding: 14px 20px; background: rgba(255,255,255,0.025); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,0.05); display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; } .roi-investment span { font-size: 13px; color: rgba(255,255,255,0.3); font-family: var(--font-body); } .roi-investment strong { color: rgba(255,255,255,0.55); } .roi-divider-vert { width: 1px; height: 16px; background: rgba(255,255,255,0.08); } .roi-multiplier { color: var(--accent); font-family: var(--font-body); font-weight: 700; } .roi-see-math-btn { background: none; border: none; color: rgba(255,255,255,0.22); font-size: 12px; font-family: var(--font-body); font-weight: 500; cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 6px; margin: 1.25rem auto 0; letter-spacing: 0.04em; transition: color 0.2s; } .roi-see-math-btn:hover { color: rgba(255,255,255,0.5); } .roi-see-math-chevron { display: inline-block; font-size: 10px; transition: transform 0.2s; } .roi-math-table { margin-top: 1rem; padding: 1.25rem 1.5rem; background: rgba(255,255,255,0.02); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.05); text-align: left; animation: roiFadeIn 0.3s ease both; } .roi-math-row { display: flex; justify-content: space-between; align-items: center; padding: 0 0 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.04); } .roi-math-row:last-of-type { border-bottom: none; padding-bottom: 0; } .roi-math-label { font-size: 13px; color: rgba(255,255,255,0.32); font-family: var(--font-body); } .roi-math-val { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.65); font-family: var(--font-body); } .roi-math-val--highlight { font-weight: 700; color: var(--coral); } .roi-math-footnote { font-size: 11px; color: rgba(255,255,255,0.18); margin-top: 1rem; line-height: 1.65; } .roi-above-benchmark { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 400; line-height: 1.3; color: var(--accent); margin-bottom: 0.75rem; } .roi-above-sub { font-size: var(--size-body-sm); color: rgba(255,255,255,0.38); line-height: 1.65; max-width: 380px; margin: 0 auto; } .roi-cta-btn { display: inline-block; padding: 15px 36px; border: none; border-radius: var(--radius-md); color: #fff; font-size: var(--size-body-sm); font-weight: 600; font-family: var(--font-body); cursor: pointer; letter-spacing: 0.01em; text-decoration: none; margin-top: 2.25rem; margin-bottom: 0.5rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .roi-cta-btn--coral { background: linear-gradient(135deg, var(--coral), #e8556d); } .roi-cta-btn--teal { background: linear-gradient(135deg, var(--accent), #3ab8b0); } .roi-cta-btn:hover { } .roi-cta-btn--coral:hover { } .roi-cta-btn--teal:hover { } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); text-align: center; } .hero-content { max-width: 640px; margin-inline: auto; } .hero-sub { margin-inline: auto; } .hero-ctas { justify-content: center; } .hero-visual { max-width: 500px; margin-inline: auto; } .dashboard-hero { transform: perspective(1000px) rotateY(0deg) rotateX(3deg); } @keyframes heroDashIn { to { opacity: 1; transform: translateY(0) perspective(1000px) rotateY(0deg) rotateX(3deg); } } .product-grid { grid-template-columns: 1fr; max-width: 500px; margin-inline: auto; } .pillars-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .pillar:nth-child(5) { grid-column: 1 / -1; max-width: 50%; } .phase { grid-template-columns: 1fr; gap: var(--space-md); } .phase-meta { position: static; } .steps-row { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: var(--space-xl); } .quotes-stack { max-width: 100%; } .quote-row { grid-template-columns: 1fr; gap: var(--space-md); } .quote-attr { text-align: left; min-width: unset; } .trusted-by-logo { height: 30px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .pricing-card.featured { transform: none; } .pricing-card.featured:hover { } .team-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } .values-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: 1fr; } .gallery-item { grid-template-columns: 1fr; } .gallery-item:nth-child(even) { direction: ltr; } .proof-transform { grid-template-columns: 1fr; gap: var(--space-lg); } .proof-divider-vert { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); } .crisis-stats-dark { flex-direction: column; gap: var(--space-lg); max-width: 540px; margin-inline: auto; } .crisis-stat-dark { padding: 0; text-align: center; } .crisis-divider-dark { width: 100%; height: 1px; } /* .attrition-crisis-reveal margin-top removed — now in its own section */ } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-mobile { display: none; position: fixed; inset: 0; background: rgba(250, 248, 245, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); } .nav-mobile.open { display: flex; } .nav-mobile a { font-size: var(--size-h3); font-family: var(--font-display); font-weight: 400; color: var(--navy); } .nav-mobile .nav-cta { font-family: var(--font-body); font-size: var(--size-body); padding: 0.8rem 2rem; } .nav-mobile-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.75rem; color: var(--navy); cursor: pointer; background: none; border: none; line-height: 1; } .hero { min-height: auto; padding-top: 7rem; padding-bottom: var(--space-2xl); } .hero-headline { font-size: clamp(2rem, 7vw, 3rem); } .pillars-list { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .pillar:nth-child(5) { max-width: 100%; } .footer-grid { grid-template-columns: 1fr; } .articles-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-ctas { flex-direction: column; align-items: stretch; } .btn { text-align: center; justify-content: center; } .final-cta-buttons { flex-direction: column; align-items: center; } .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } .dashboard-hero .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } .roi-option { padding: 13px 0; font-size: 0.9375rem; } .roi-punchline-value { font-size: clamp(2.75rem, 12vw, 3.5rem); } .roi-investment { gap: 10px; padding: 12px 16px; } } /* ========================================================================== LEGAL PAGES (privacy, terms) ========================================================================== */ .legal-body { max-width: 760px; margin-inline: auto; } .legal-updated { font-size: var(--size-caption); color: var(--text-muted); padding-bottom: var(--space-md); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--warm-gray-2); } .legal-body h2 { font-size: var(--size-h4); margin-top: var(--space-xl); margin-bottom: var(--space-sm); color: var(--text-dark); } .legal-body h2:first-of-type { margin-top: 0; } .legal-body h3 { font-size: var(--size-body-lg); font-family: var(--font-body); font-weight: 600; margin-top: var(--space-lg); margin-bottom: var(--space-xs); color: var(--text-dark); } .legal-body p, .legal-body li { font-size: var(--size-body); line-height: 1.75; margin-bottom: var(--space-sm); } .legal-body ul { padding-left: 1.25rem; margin-bottom: var(--space-md); } .legal-body li { margin-bottom: var(--space-xs); } .legal-body a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; } .legal-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); font-size: var(--size-body-sm); } .legal-table th, .legal-table td { text-align: left; padding: var(--space-sm); border-bottom: 1px solid var(--warm-gray-2); vertical-align: top; } .legal-table th { font-weight: 600; color: var(--text-dark); background: var(--warm-gray-1); } .legal-contact { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--warm-gray-1); border-radius: var(--radius-lg); } .legal-contact h3 { margin-top: 0; } .legal-contact p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .legal-table, .legal-table tbody, .legal-table tr, .legal-table td, .legal-table th { display: block; width: 100%; } .legal-table thead { display: none; } .legal-table tr { margin-bottom: var(--space-md); border-bottom: 2px solid var(--warm-gray-2); } .legal-table td { border-bottom: none; padding: 0.25rem var(--space-sm); } .legal-table td::before { content: attr(data-label); display: block; font-size: var(--size-caption); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } } /* ========================================================================== AUDIENCE SWITCHER (plan §5a) Deliberately styled unlike .nav-link: this is "you may be in the wrong place", not another page to browse. ========================================================================== */ .nav-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; transition: opacity var(--transition-fast); } .nav-switch::before { content: ''; width: 5px; height: 5px; background: var(--accent); flex: 0 0 auto; } .nav-switch:hover { opacity: 0.68; } /* in the mobile drawer it sits above the section links, not beside them */ .nav-mobile .nav-switch { font-size: 0.8125rem; padding: var(--space-sm) 0; margin-bottom: var(--space-xs); border-bottom: 1px solid var(--rule-on); } /* ========================================================================== ENTERPRISE HOMEPAGE COMPONENTS The dark hero panel, layer stack, service grid and commitment block. Ported from the /nonprofits language into the shared system. ========================================================================== */ /* ----- dark hero panel ----- */ .panel-hero { position: relative; background: var(--panel); color: var(--on); overflow: hidden; /* 5rem clears the fixed nav; the clamp is the hero's own breathing room */ padding: calc(5rem + clamp(1.5rem, 3vw, 3rem)) 0 0; } .panel-hero .container { max-width: 1500px; position: relative; z-index: 2; } .panel-wash { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 62% 72% at 22% 28%, rgba(224,74,96,.13) 0%, transparent 62%), radial-gradient(ellipse 50% 64% at 84% 74%, rgba(53,92,125,.24) 0%, transparent 66%); } .panel-grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .05; mix-blend-mode: overlay; background-size: 170px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .panel-hero-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(1.5rem, 3.4vw, 3.5rem); align-items: center; padding-bottom: clamp(2rem, 4vw, 3.5rem); } .panel-hero h1 { color: var(--on); max-width: 13ch; margin-bottom: clamp(1rem, 2vw, 1.6rem); } .panel-hero h1 em { color: var(--accent-lt); font-style: italic; } .panel-hero .eyebrow { color: var(--on-36); } .panel-hero-sub { font-size: clamp(0.95rem, 1.2vw, 1.05rem); color: var(--on-64); max-width: 46ch; line-height: 1.6; margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); } .panel-hero-fig img { width: 100%; } .panel-proof { position: relative; z-index: 2; border-top: 1px solid var(--rule-on); display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.25rem, 2.4vw, 2rem) 0 clamp(1.4rem, 2.6vw, 2.1rem); } .panel-proof-num { font-family: var(--font-display); font-size: clamp(2.5rem, 4.8vw, 4.5rem); letter-spacing: -.045em; line-height: .95; white-space: nowrap; } .panel-proof-num i { font-style: normal; color: var(--accent-lt); } /* must be class-scoped: .count-up is also a direct child span, and a bare > span selector turned the animating figure into a block-level caption */ .panel-proof-cap { display: block; font-family: var(--font-body); font-size: 0.65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--on-36); margin-top: 0.75rem; max-width: 38ch; line-height: 1.6; white-space: normal; } .panel-proof-num .count-up { font: inherit; color: inherit; letter-spacing: inherit; } .panel-trust { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; } .panel-trust-k { font-size: 0.6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-36); } .panel-trust-row { display: flex; align-items: center; gap: clamp(1.25rem,3.2vw,3.25rem); flex-wrap: wrap; } .panel-trust-row img { height: clamp(17px,1.55vw,23px); width: auto; opacity: .72; transition: opacity .3s; } .panel-trust-row img:hover { opacity: 1; } .panel-trust-row img.lg { height: clamp(21px,1.9vw,29px); } @media (max-width: 940px) { .panel-hero-grid { grid-template-columns: 1fr; } } @media (max-width: 1040px) { .panel-proof { grid-template-columns: 1fr; gap: 1.4rem; } } /* ----- layer stack ----- */ .layers-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr); gap: clamp(1.75rem, 4.2vw, 4rem); align-items: center; } @media (max-width: 940px) { .layers-grid { grid-template-columns: 1fr; } } .layer { padding: clamp(1rem,2vw,1.45rem) 0; border-top: 1px solid var(--rule-on); } .layer:last-of-type { border-bottom: 1px solid var(--rule-on); } .layer .eyebrow { color: var(--accent-lt); display: block; margin-bottom: 0.5rem; } .layer h3 { color: var(--on); margin-bottom: 0.45rem; } .layer p { font-size: 0.875rem; line-height: 1.62; color: var(--on-64); max-width: 50ch; } .layer p b { color: var(--on); font-weight: 500; } .layers-note { margin-top: clamp(1.25rem,2.4vw,1.9rem); font-family: var(--font-display); font-size: clamp(1.05rem,1.85vw,1.3rem); line-height: 1.36; letter-spacing: -.024em; color: var(--on); } .layers-note b { color: var(--accent-lt); font-weight: 400; font-style: italic; } .layers-fig img { width: 100%; } .layers-cap { margin-top: 0.6rem; font-size: 0.56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-36); text-align: center; font-weight: 700; } /* ----- service grid ----- */ .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--rule); } @media (max-width: 820px) { .service-grid { grid-template-columns: 1fr; } } .service { padding: clamp(1.4rem,2.6vw,2.2rem); border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); background: var(--paper); transition: background var(--transition-base); } .service:nth-child(2n) { border-right: 0; } .service:nth-last-child(-n+2) { border-bottom: 0; } @media (max-width: 820px) { .service { border-right: 0; } .service:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-2); } .service:last-child { border-bottom: 0; } } .service:hover { background: var(--card); } .service-num { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ink-26); line-height: 1; margin-bottom: 0.6rem; } .service h3 { margin-bottom: 0.5rem; } .service p { font-size: 0.9rem; line-height: 1.6; color: var(--text-body); } .service-layer { display: inline-block; margin-top: 0.9rem; font-size: 0.6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } /* ----- brownfield + commitment ----- */ .rescue { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem,3.4vw,3.25rem); align-items: center; border: 1px solid var(--rule); padding: clamp(1.5rem,3vw,2.75rem); background: var(--card); } @media (max-width: 820px) { .rescue { grid-template-columns: 1fr; } } .rescue h2 { max-width: 16ch; } .rescue-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .rescue-list li { font-size: 0.95rem; line-height: 1.55; color: var(--text-body); padding-left: 1.4rem; position: relative; } .rescue-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--accent); } .commit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--rule); } @media (max-width: 820px) { .commit-grid { grid-template-columns: 1fr; } } .commit { padding: clamp(1.25rem,2.4vw,1.9rem) clamp(1rem,2vw,1.6rem); border-left: 1px solid var(--rule-2); } .commit:first-child { border-left: 0; } @media (max-width: 820px) { .commit { border-left: 0; border-top: 1px solid var(--rule-2); } .commit:first-child { border-top: 0; } } .commit h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--text-dark); } .commit p { font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); } /* ----- final-CTA offer ladder ----- The paid audit was missing from the highest-intent block on the page. */ .cta-ladder { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule-on); border-bottom: 1px solid var(--rule-on); margin: var(--space-lg) 0; max-width: 62rem; } .cta-ladder div { flex: 1 1 220px; padding: var(--space-md) var(--space-md) var(--space-md) 0; border-left: 1px solid var(--rule-on); padding-left: var(--space-md); } .cta-ladder div:first-child { border-left: 0; padding-left: 0; } .cta-ladder .eyebrow { display: block; margin-bottom: 0.4rem; color: var(--accent-lt); } .cta-ladder p { font-size: 0.85rem; line-height: 1.5; color: var(--on-64); } .cta-note { max-width: none; /* .final-cta p caps at 540px and broke this onto three lines */ margin-top: var(--space-md); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-36); } @media (max-width: 640px) { .cta-ladder div { border-left: 0; border-top: 1px solid var(--rule-on); padding-left: 0; } .cta-ladder div:first-child { border-top: 0; } } /* ============================================= ENTERPRISE V3 — "INSTRUMENT" SYSTEM Page-scoped to index.html. Tokens from style.css. The register: an engineering document, not an editorial. Schibsted Grotesk carries every headline; Piazzolla italic survives only as the coral emphasis-tail and in the "voice" asides (finding-note, approach-side, kicker-note, footer-tag). IBM Plex Mono is the readout voice: labels, indices, metadata, spec rows. Dark bands get a blueprint grid; light bands stay clean paper with hairline structure. ============================================= */ :root { --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ---- 1. Typography: the inversion ---- */ h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.026em; } h1 { letter-spacing: -0.033em; } /* the emphasis tail keeps the literary voice — one clause per headline */ h1 em, h2 em { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.05em; letter-spacing: -0.012em; } /* ---- 2. The indexed eyebrow: every section a numbered artifact ---- */ .eyebrow { display: flex; align-items: center; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-48); } .eyebrow::after { content: ''; flex: 1; border-top: 1px solid var(--rule); margin-left: 1.1rem; } .eb-idx { color: var(--accent); font-weight: 600; margin-right: 0.8rem; } .section-dark .eyebrow, .section-navy .eyebrow { color: var(--on-36); } .section-dark .eyebrow::after, .section-navy .eyebrow::after { border-color: var(--rule-on); } /* style.css brightens every .section-header p on dark ground; the eyebrow inside one must keep the same on-36 as its siblings */ .section-dark .section-header .eyebrow { color: var(--on-36); } .section-dark .eb-idx, .section-navy .eb-idx { color: var(--accent-lt); } /* hero eyebrow: status light, no trailing rule */ .panel-hero .eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--accent); margin-right: 0.75rem; flex: 0 0 auto; } .panel-hero .eyebrow::after { display: none; } /* ---- 3. Dark bands: blueprint grid under the machine room ---- */ .panel-wash { background: radial-gradient(ellipse 58% 68% at 20% 26%, rgba(224,74,96,.12) 0%, transparent 62%), linear-gradient(rgba(244,241,235,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,235,.05) 1px, transparent 1px); background-size: auto, 74px 74px, 74px 74px; } .section-dark, .section-navy { background-image: linear-gradient(rgba(244,241,235,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,235,.032) 1px, transparent 1px); background-size: 74px 74px; } .final-cta::before { background: radial-gradient(ellipse 60% 55% at 50% 108%, rgba(224,74,96,.14), transparent 62%), linear-gradient(rgba(244,241,235,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,235,.04) 1px, transparent 1px); background-size: auto, 74px 74px, 74px 74px; } /* ---- 4. Buttons: mono labels, hairline outlines ---- */ .btn { font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.13em; } .btn-lg { font-size: 0.72rem; } .btn-outline { border-width: 1px; } .btn-outline-white { border-width: 1px; border-color: var(--rule-on); } .nav-cta { font-family: var(--font-mono); font-weight: 500; } /* ---- 5. Hero ---- */ .panel-hero h1 { font-weight: 600; } .panel-hero-sub { font-size: clamp(0.98rem, 1.25vw, 1.12rem); } .panel-proof { grid-template-columns: 1fr; } .panel-trust-k { font-family: var(--font-mono); font-weight: 500; } /* ---- 6. Hero artifact: the audit-finding card ---- */ .finding-card { background: var(--paper); color: var(--ink); border-top: 3px solid var(--accent); padding: 1.6rem 1.7rem 1.5rem; max-width: 440px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.42); } .finding-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.55rem; margin-bottom: 1.05rem; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-48); } .finding-card h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.48rem; line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 1.05rem; } .finding-card h3 b { color: var(--accent); font-weight: 700; } .finding-rows { border-top: 1px solid var(--rule); margin-bottom: 1.05rem; } .finding-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.52rem 0; border-bottom: 1px solid var(--rule); font-size: 0.86rem; color: var(--ink-72); } .finding-row .fr-src { letter-spacing: 0.01em; } .finding-row .fr-val { font-weight: 600; color: var(--ink); } .finding-row.fr-delta-row { border-bottom: none; } .finding-row .fr-delta { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } /* the gap, drawn: two nearly-equal bars, coral on the difference */ .fr-bar-row { display: block; } .fr-top { display: flex; justify-content: space-between; gap: 1rem; } .fr-track { position: relative; height: 8px; margin-top: 0.5rem; background: var(--rule); } .fr-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--ink-26); } .fr-gap { position: absolute; top: 0; height: 100%; background: var(--accent); } .fr-tick { position: absolute; top: -3px; width: 1px; height: 14px; background: var(--ink-48); } .finding-note { font-family: var(--font-display); font-style: italic; font-size: 0.98rem; line-height: 1.5; color: var(--ink-72); margin: 0; } .fc-of { font-style: normal; color: var(--ink-26); } /* ---- 7. Statement bands ---- */ /* the blindness statement points AT the wall below it, so the two are one unit: the headline gets room to breathe on fewer lines, and the wall follows immediately rather than after a section-sized gap. */ /* headline and the assembled picture share one grid, the way the agents lede does. The copy column is narrow so the field gets the room it needs to stay legible; the tool wall follows below, naming the systems the field is counting. */ .statement-lede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); align-items: start; } .statement-lede > .eyebrow { grid-column: 1 / -1; margin-bottom: var(--space-sm); } .statement-tools h2 { max-width: 19ch; } .statement-lede .tally { margin-top: -0.5rem; } .statement-tools .toolwall { margin-top: var(--space-lg); } .statement-body { max-width: 52ch; margin: var(--space-sm) 0 0; font-size: var(--size-body-lg); line-height: 1.65; color: var(--text-body); } /* ---- 7b. The tool wall: the systems the data already lives in ---- Full-bleed marquee under the statement. Two rows drifting in opposite directions, edges faded into the paper — the point is the accumulation, not any one logo. Colour stays brand-true (darkened only where a mark would vanish on cream). */ .toolwall { margin-top: var(--space-lg); padding-block: 0.35rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .tw-row { overflow: hidden; } .tw-row + .tw-row { border-top: 1px solid var(--rule-2); } .tw-track { display: flex; width: max-content; animation: tw-drift 78s linear infinite; } .tw-track-rev { animation-name: tw-drift-rev; animation-duration: 92s; } .toolwall:hover .tw-track { animation-play-state: paused; } .tw-set { display: flex; flex: 0 0 auto; } .tw-item { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.6rem; border-right: 1px solid var(--rule-2); white-space: nowrap; } .tw-item img { width: 21px; height: 21px; display: block; flex: 0 0 auto; } .tw-item span { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-48); } @keyframes tw-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes tw-drift-rev { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .tw-track { animation: none; } .tw-row { overflow-x: auto; } .wh-lines .wl-flow, .wh-lines .wl-halo { animation: none; } } @media (max-width: 640px) { .tw-item { padding: 0.8rem 1.15rem; gap: 0.5rem; } .tw-item img { width: 18px; height: 18px; } .tw-item span { font-size: 0.62rem; } } /* ---- 7c. The tally: thirty-six systems, one view ---- A counter climbs to 36 and the dashboard behind it assembles in step — the JS count drives the panel reveals directly (each panel appears as the number crosses its quarter), so the two can never drift apart. The count is the fragmentation; the dashboard is what only exists once those systems are joined. Panels are visible by default and only hidden once JS confirms it will animate them, so a still frame, a scroll-past, or a JS failure all show the finished view. */ .tally { margin-top: var(--space-lg); } .td-count { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: var(--space-sm); } .td-num { margin: 0; font-family: var(--font-body); font-size: clamp(3.4rem, 6.4vw, 5rem); font-weight: 600; line-height: 0.86; letter-spacing: -0.045em; color: var(--accent); font-variant-numeric: tabular-nums; } .td-cap { margin: 0; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-48); line-height: 1.6; } .td-svg { display: block; width: 100%; height: auto; overflow: visible; } .td-plate { fill: var(--card); stroke: var(--rule); stroke-width: 1; } .td-div { stroke: var(--rule); stroke-width: 1; } .td-rule { stroke: var(--rule-2); stroke-width: 1; } .td-grid { stroke: var(--rule); stroke-width: 1; } .td-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; fill: var(--ink-48); } .td-src { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; fill: var(--ink-26); text-anchor: end; } .td-fig { font-family: var(--font-body); font-size: 23px; font-weight: 600; letter-spacing: -0.02em; fill: var(--ink); } .td-delta { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.6px; fill: var(--ink-48); } .td-delta.hot { fill: var(--accent); } .td-row { font-family: var(--font-body); font-size: 13px; fill: var(--ink-72); } .td-val { font-family: var(--font-mono); font-size: 12px; fill: var(--ink); text-anchor: end; font-variant-numeric: tabular-nums; } .td-tick-ok { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; } .td-tick { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px; fill: var(--ink-26); text-anchor: middle; } .td-line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; } .td-area { fill: var(--accent); opacity: 0.09; } .td-dot { fill: var(--accent); } .td-bar { fill: var(--ink-26); } .td-bar.hot { fill: var(--accent); } .td-tick-fwd { fill: none; stroke: var(--ink-26); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .td-now { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.2px; fill: var(--accent); text-anchor: middle; } /* the build: JS adds .is-in to each panel as the count reaches it */ .tally.js-build .td-panel { opacity: 0; transform: translateY(12px); } .tally.js-build .td-panel.is-in { opacity: 1; transform: none; transition: opacity .42s ease-out, transform .42s cubic-bezier(.22,.9,.3,1); } .td-panel { transform-box: view-box; } /* the chart line draws itself the moment its panel lands */ .tally.js-build .td-panel .td-line { stroke-dasharray: 640; stroke-dashoffset: 640; } .tally.js-build .td-panel.is-in .td-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .1s; } .tally.js-build .td-panel .td-area, .tally.js-build .td-panel .td-dot { opacity: 0; } .tally.js-build .td-panel.is-in .td-area { opacity: 0.09; transition: opacity .5s ease-out .75s; } .tally.js-build .td-panel.is-in .td-dot { opacity: 1; transition: opacity .35s ease-out .95s; } /* the reconciled marks draw one at a time once their panel lands — the panel's paths exist only in the reconciled list, so nth-of-type is safe here */ .tally.js-build .td-panel .td-tick-ok, .tally.js-build .td-panel .td-tick-fwd { stroke-dasharray: 16; stroke-dashoffset: 16; } .tally.js-build .td-panel.is-in .td-tick-ok, .tally.js-build .td-panel.is-in .td-tick-fwd { stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease-out; } .tally.js-build .td-panel.is-in path:nth-of-type(1) { transition-delay: .22s; } .tally.js-build .td-panel.is-in path:nth-of-type(2) { transition-delay: .31s; } .tally.js-build .td-panel.is-in path:nth-of-type(3) { transition-delay: .40s; } .tally.js-build .td-panel.is-in path:nth-of-type(4) { transition-delay: .49s; } .tally.js-build .td-panel.is-in path:nth-of-type(5) { transition-delay: .58s; } .td-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.95rem; padding-top: 0.7rem; border-top: 1px solid var(--rule); } .td-k { margin: 0; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-48); } .td-k-r { color: var(--ink-26); } @media (prefers-reduced-motion: reduce) { .tally.js-build .td-panel { opacity: 1; transform: none; } .tally.js-build .td-panel .td-line { stroke-dashoffset: 0; } .tally.js-build .td-panel .td-area { opacity: 0.09; } .tally.js-build .td-panel .td-dot { opacity: 1; } .tally.js-build .td-panel .td-tick-ok, .tally.js-build .td-panel .td-tick-fwd { stroke-dashoffset: 0; } } @media (max-width: 640px) { .td-num { font-size: 3.1rem; } .td-foot { flex-direction: column; gap: 0.3rem; } .td-k { font-size: 0.58rem; } } /* ---- 8. Steps: spec rows, mono indices ---- */ .step { border-top: 2px solid var(--ink); } .step-num { font-family: var(--font-mono); font-style: normal; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 0.85rem; } .step .step-time { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .steps-row.steps-4 { grid-template-columns: repeat(4, 1fr); } /* the time row is the ladder read across; hold every title to two lines so the row aligns whether or not a title wraps */ @media (min-width: 641px) { .steps-row.steps-4 .step h3 { min-height: 2.4em; } } @media (max-width: 1024px) { .steps-row.steps-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .steps-row.steps-4 { grid-template-columns: 1fr; } } .honesty-note { max-width: 56ch; margin: var(--space-lg) auto 0; text-align: center; font-size: var(--size-body-sm); line-height: 1.65; color: var(--text-muted); } /* ---- 9. Approach: organizing idea + honest-why sidebar ---- */ .approach-side { border-left: 2px solid var(--accent); padding: 0.35rem 0 0.35rem 1.25rem; margin-top: var(--space-md); } .approach-side p { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--on-64); margin: 0; } .layers-cap { font-family: var(--font-mono); font-weight: 500; } /* ---- 9b. The horizon: today is fixed, the deadline isn't ---- The one section that asserts stakes and showed nothing. Behind today the line is dense and measured; ahead of it the ticks thin out and the line fades, because the date is not yours to pick. Four events sit out there, each labelled with a question mark. */ .horizon { margin-top: var(--space-xl); max-width: 980px; background: radial-gradient(ellipse 46% 60% at 84% 40%, rgba(224,74,96,.08), transparent 70%); } .hz-track { position: relative; padding-top: 6.4rem; padding-bottom: 2.2rem; } .hz-axis { display: block; width: 100%; height: 30px; overflow: visible; } .hz-axis path { fill: none; vector-effect: non-scaling-stroke; } .hz-axis .hz-past { stroke: var(--on-64); stroke-width: 1.25; } .hz-axis .hz-next { stroke: url(#hzFade); stroke-width: 1.25; } .hz-axis .hz-tick { stroke-width: 1; } .hz-axis .hz-nowline { stroke: var(--accent); stroke-width: 1.5; } .hz-axis .hz-pt { stroke: var(--on-64); stroke-width: 5; } .hz-axis .hz-pulse, .hz-axis .hz-halo { stroke: var(--accent-lt); animation: hz-run 6.5s linear infinite; } .hz-axis .hz-pulse { stroke-width: 1.5; stroke-dasharray: 22 1850; stroke-dashoffset: 22; } .hz-axis .hz-halo { stroke-width: 6; opacity: .2; stroke-dasharray: 34 1838; stroke-dashoffset: 34; } @keyframes hz-run { from { stroke-dashoffset: 22px; } to { stroke-dashoffset: -1850px; } } /* today: the only fixed point on the line */ .hz-now { position: absolute; left: 22.1%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on); white-space: nowrap; } .hz-now i { width: 7px; height: 7px; background: var(--accent); flex: 0 0 auto; } .hz-past-k, .hz-cap { position: absolute; bottom: 0; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-36); white-space: nowrap; } .hz-past-k { left: 0; } .hz-cap { right: 0; } /* the events: out on the line, no date under any of them */ .hz-flag { position: absolute; bottom: 2.2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .hz-flag .hz-stem { width: 1px; background: var(--rule-on); } .hz-flag.lv1 .hz-stem { height: 2.6rem; } .hz-flag.lv2 .hz-stem { height: 4.2rem; } .hz-chip { display: inline-flex; align-items: baseline; gap: 0.4rem; border: 1px solid var(--rule-on); padding: 0.34rem 0.7rem; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-64); white-space: nowrap; background: var(--panel-2); } .hz-chip i { font-style: normal; color: var(--accent-lt); font-weight: 600; } @media (max-width: 1180px) { .hz-past-k { display: none; } } @media (prefers-reduced-motion: reduce) { .hz-axis .hz-pulse, .hz-axis .hz-halo { animation: none; opacity: 0; } } @media (max-width: 860px) { /* the field needs full width to stay readable, so the lede stacks */ .statement-lede { grid-template-columns: 1fr; gap: var(--space-md); } .statement-tools h2 { max-width: 22ch; } .statement-lede .tally { margin-top: var(--space-sm); } .horizon { max-width: 100%; } .hz-track { padding: 0; border-top: 1px solid var(--rule-on); } .hz-axis, .hz-now, .hz-cap, .hz-past-k { display: none; } /* the line can't carry four flags at this width: it becomes a list */ .hz-flag { position: static; transform: none; flex-direction: row; align-items: center; border-bottom: 1px solid var(--rule-on); padding: 0.8rem 0; } .hz-flag .hz-stem { display: none; } .hz-chip { border: none; background: none; padding: 0; width: 100%; justify-content: space-between; font-size: 0.68rem; } } /* ---- 10. Stack band, two registers ---- */ .stack-band { max-width: 780px; margin: 0 auto; } .stack-row { display: flex; align-items: center; gap: 1.5rem; padding: 1.35rem 1.5rem; } .stack-row-label { flex: 0 0 9.5rem; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .stack-row-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.8rem; } .stack-top { border-top: 1px solid var(--rule); } .stack-top .stack-name { font-family: var(--font-body); font-weight: 500; font-size: 1.42rem; letter-spacing: -0.02em; color: var(--ink); } .stack-top .stack-name span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--text-muted); margin-left: 0.6rem; } .stack-bottom { background: var(--panel); color: var(--on); } .stack-bottom .stack-row-label { color: var(--on-36); } .stack-bottom .stack-name { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on); } .stack-caption { max-width: 58ch; margin: var(--space-md) auto 0; text-align: center; font-size: var(--size-body-sm); line-height: 1.65; color: var(--text-body); } .stack-mark { display: inline-flex; align-items: center; gap: 0.55rem; } .stack-mark img { height: 1.15em; width: auto; display: block; } .stack-top .stack-mark img { height: 1.35rem; } /* ---- 11. Agent receipt (Slack-message artifact) ---- */ /* the agents lede: headline, copy and the receipt share one grid, so the artifact starts at the headline instead of below a column of empty paper. The eyebrow spans both columns and keeps its full-width rule. */ .agents-lede { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-sm) var(--space-xl); align-items: start; } .agents-lede > .eyebrow { grid-column: 1 / -1; margin-bottom: var(--space-sm); } .agents-intro h2 { margin-bottom: var(--space-md); } /* optical: the card's top rule sits on the headline's cap line, not its text box. Schibsted at line-height 1.04 puts the cap 0.18em below the box top, so the card drops by that much. */ .agents-lede .receipt { margin-top: calc(var(--size-h2) * 0.18); } /* kept: the receipt-grid class is still used by the old two-column form */ .receipt-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-xl); align-items: start; } .receipt { background: var(--card); border: 1px solid var(--rule); border-top: 2px solid var(--ink); padding: 1.3rem 1.4rem 1.2rem; box-shadow: 0 18px 44px rgba(20,27,36,.10); } /* the channel bar: where this is happening, and the app that's in it */ .receipt-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); } .receipt-chan { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); } .receipt-app { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-48); } .receipt-app i, .msg-meta i { font-style: normal; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-48); border: 1px solid var(--rule); padding: 0.08rem 0.28rem; line-height: 1.3; } /* messages: every one carries its author and its time, the way a channel does. The reader's avatar is a hairline initial box; the agent's is the solid ink mark — same size, opposite weight, so who is speaking reads at a glance without a bubble. */ .msg { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0 0 0.85rem; } .msg:last-child { margin-bottom: 0; } .msg-avatar { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; } .msg-user .msg-avatar { border: 1px solid var(--ink-26); font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-48); } .msg-agent .msg-avatar { background: var(--panel); color: var(--on); } .ra-chart { width: 14px; height: 13px; } .ra-chart rect { fill: var(--on); } .ra-chart .c { fill: var(--accent); } .msg-body { flex: 1 1 auto; min-width: 0; } .msg-meta { display: flex; align-items: baseline; gap: 0.45rem; margin: 0 0 0.2rem; font-size: 0.78rem; } .msg-meta b { font-weight: 600; color: var(--ink); letter-spacing: 0.01em; } .msg-agent .msg-meta b { letter-spacing: 0.04em; } .msg-meta time { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-48); } .msg-text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-72); } .msg-text b { color: var(--ink); } /* the second turn: a fresh group under a rule */ .receipt-turn { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: 0.9rem; } /* the second turn arrives live. The card is a chat viewport: JS sizes it to the first exchange and clips the follow-up below the fold, so the card never changes height and nothing under it moves. When the reader has the first exchange in view the question posts, AIDA works, the answer lands — and each arrival scrolls the log up, the way a channel does, with the header pinned. Without JS (or with reduced motion) the card ships at full height with the turn already there. */ .receipt.js-live { position: relative; overflow: hidden; padding-top: 0; } /* the card's top padding moves into the header, so the header's normal position is the top of the scrollport and sticky needs no negative margin to pin it there */ .receipt.js-live .receipt-head { position: sticky; top: 0; z-index: 2; padding: 1.3rem 0 0.6rem; margin-bottom: 0.2rem; background: var(--card); border-bottom: 1px solid transparent; transition: border-color .4s ease-out; } .receipt.is-asked .receipt-head { border-bottom-color: var(--rule); } .receipt-turn .msg-body { position: relative; } .receipt.js-live .receipt-turn .receipt-q, .receipt.js-live .receipt-turn .receipt-a { opacity: 0; transform: translateY(6px); } .receipt.is-asked .receipt-turn .receipt-q, .receipt.is-answered .receipt-turn .receipt-a { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s cubic-bezier(.22,.9,.3,1); } /* after the play the card keeps its fixed height, but the log is the reader's again — scrollback, the way a channel allows */ .receipt.js-live.is-answered { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-26) transparent; } .receipt.js-live.is-answered::-webkit-scrollbar { width: 4px; } .receipt.js-live.is-answered::-webkit-scrollbar-thumb { background: var(--ink-26); } .receipt.js-live.is-answered::-webkit-scrollbar-track { background: transparent; } /* while AIDA works, its message exists but says nothing yet: the author line is up, the text is held back, the marks pulse in its place */ .receipt.is-working .receipt-turn .receipt-a { opacity: 1; transform: none; transition: opacity .3s ease-out; } .receipt.is-working .receipt-turn .receipt-a .msg-text { opacity: 0; } .receipt.is-answered .receipt-turn .receipt-a .msg-text { opacity: 1; transition: opacity .4s ease-out; } .receipt-wait { position: absolute; left: 0; display: flex; align-items: center; gap: 5px; height: calc(0.92rem * 1.6); opacity: 0; pointer-events: none; } .receipt.is-working .receipt-wait { opacity: 1; transition: opacity .2s ease-out; } .receipt-wait i { display: block; width: 5px; height: 5px; background: var(--accent); animation: rw-pulse 1.05s ease-in-out infinite; } .receipt-wait i:nth-child(2) { animation-delay: .17s; } .receipt-wait i:nth-child(3) { animation-delay: .34s; } @keyframes rw-pulse { 0%, 100% { opacity: .22; } 40% { opacity: 1; } } /* while AIDA works, its avatar's bars breathe — the mark at work, not just a spinner beside it */ .receipt.is-working .ra-chart rect { transform-box: fill-box; transform-origin: 50% 100%; animation: ra-eq .68s ease-in-out infinite; } .receipt.is-working .ra-chart rect:nth-child(2) { animation-delay: .15s; } .receipt.is-working .ra-chart rect:nth-child(3) { animation-delay: .3s; } @keyframes ra-eq { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(0.42); } } .receipt pre { background: var(--panel-2); color: rgba(244,241,235,.82); font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55; padding: 0.75rem 0.9rem; overflow-x: auto; margin: 0 0 0.9rem; } /* clause keywords carry the block's structure — brighter ink, no new hue */ .receipt pre .kw { color: var(--on); font-weight: 500; } /* the runner's receipt: what the query came back with, and how long it took */ .receipt-exec { margin: -0.55rem 0 0.9rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-26); text-align: right; } .receipt-chart { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.35rem; } .rc-title { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-48); margin: 0 0 0.15rem; } .rc-row { display: flex; align-items: center; gap: 0.65rem; } .rc-label { flex: 0 0 3.6rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-48); } .rc-track { flex: 1; display: flex; align-items: center; gap: 0.55rem; border-left: 1px solid var(--rule); padding-left: 1px; } .rc-bar { height: 11px; background: var(--ink-26); } .rc-bar.hot { background: var(--accent); } .rc-val { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; color: var(--ink-72); white-space: nowrap; } /* ---- 12. Agent portfolio: spec sheets with output covers ---- */ .agent-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); } .agent-card { background: var(--card); border: 1px solid var(--rule); border-top: 2px solid var(--ink); display: flex; flex-direction: column; height: 100%; transition: border-color .25s, box-shadow .25s, transform .25s; } .agent-card:hover { border-top-color: var(--accent); box-shadow: 0 16px 38px rgba(20,27,36,.10); transform: translateY(-2px); } .agent-card:hover .ac-cap { color: var(--ink-48); } /* the cover: each agent drawn as the artifact it hands back, at one scale. Skeleton for context; the agent's own output is the legible part — a ticket key and the value it wrote, a flag that says when. */ .ac-cover { background: var(--paper); border-bottom: 1px solid var(--rule-2); } /* the plate gets a caption strip, so the readout is labelled like an exhibit */ .ac-cap { display: block; padding: 0.45rem 0.85rem 0.4rem; border-bottom: 1px solid var(--rule-2); font-family: var(--font-mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-26); transition: color .25s; } .ac-cover svg { display: block; width: 100%; height: auto; } .ac-cover .g-grid { stroke: var(--rule); stroke-width: 1; } .ac-cover .g-coral { fill: var(--accent); } .ac-cover text { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; } .ac-cover .mid { text-anchor: middle; } /* AIDA: the chart the question was about */ .ac-cover .g-ink { fill: var(--ink-48); opacity: 0.72; } /* KAT: spoken lines on the left, the board they wrote to on the right. Skeleton rows are context; the rows KAT wrote carry real values. */ .ac-cover .g-spk { fill: var(--ink-48); opacity: 0.5; } .ac-cover .g-spkc { fill: var(--accent); opacity: 0.85; } .ac-cover .g-said { fill: var(--ink-48); opacity: 0.6; } .ac-cover .g-skel { fill: var(--ink-26); opacity: 0.8; } .ac-cover .g-chip { fill: var(--ink-26); opacity: 0.55; } .ac-cover .g-gut { stroke: var(--rule); stroke-width: 1; } .ac-cover .g-arrow { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: square; } .ac-cover .g-key { fill: var(--ink-48); } .ac-cover .g-key.hot { fill: var(--accent); } .ac-cover .g-write { fill: var(--accent); text-anchor: end; font-weight: 500; text-transform: none; } /* NOVA: history, the projection, the line it crosses, and when */ .ac-cover .g-line { fill: none; stroke: var(--ink-72); stroke-width: 2; stroke-linejoin: round; } .ac-cover .g-dash { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-dasharray: 6 5; } .ac-cover .g-band { fill: var(--accent); opacity: 0.08; } .ac-cover .g-now { stroke: var(--ink-48); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; } .ac-cover .g-thresh { stroke: var(--ink-48); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.7; } .ac-cover .g-lbl { fill: var(--ink-26); font-size: 12px; } .ac-cover .g-alert-l { stroke: var(--accent); stroke-width: 1.2; } .ac-cover .g-alert-b { fill: var(--paper); stroke: var(--accent); stroke-width: 1.2; } .ac-cover .g-alert-t { fill: var(--accent); font-weight: 500; } .ac-head { display: flex; align-items: flex-start; gap: 0.95rem; padding: 1.1rem 1.3rem 0.95rem; } .ac-idx { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-26); padding-top: 0.2rem; } .agent-card .ac-fn { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.35rem; } .agent-card h3 { font-weight: 700; font-size: 1.42rem; letter-spacing: 0.05em; color: var(--text-dark); margin: 0; } .agent-card .ac-full { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-muted); margin: 0.15rem 0 0; } .agent-card > p { font-size: var(--size-body-sm); line-height: 1.6; color: var(--text-body); margin: 0; padding: 0.95rem 1.3rem 1.1rem; } .ac-meta { margin-top: auto; border-top: 1px solid var(--rule); padding: 0.5rem 1.3rem 0.85rem; } .ac-meta-row { display: flex; gap: 0.8rem; padding: 0.3rem 0; font-size: 0.74rem; line-height: 1.5; } .ac-meta-row b { flex: 0 0 3.9rem; font-family: var(--font-mono); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-top: 0.12rem; } .ac-meta-row span { color: var(--text-body); } /* a write is a stronger claim than a read: label it in the accent */ .ac-meta-row.is-write b { color: var(--accent); } .agents-close { max-width: 58ch; margin: var(--space-lg) auto 0; text-align: center; font-size: var(--size-body); line-height: 1.65; color: var(--text-body); } .agents-close b { color: var(--text-dark); } /* ---- 13. The graph: every agent, one governed warehouse ---- The wires leave the card rack, pass through the governance band (the caption sits ON the trunk, not floating above it), and land on a single warehouse. Coral pulses run the path so direction reads without an arrowhead. */ .whgraph { margin-top: 0; } .wh-wires { position: relative; margin-top: -1px; } .wh-lines { display: block; width: 100%; height: 124px; } .wh-lines .wl-wire { fill: none; stroke: var(--ink-26); stroke-width: 1; vector-effect: non-scaling-stroke; } .wh-lines .wl-trunk { fill: none; stroke: var(--ink-48); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .wh-lines .wl-node { fill: var(--accent); } .wh-lines .wl-jct { fill: var(--ink); } .wh-lines .wl-flow, .wh-lines .wl-halo { fill: none; vector-effect: non-scaling-stroke; animation: wl-flow 7s linear infinite; animation-fill-mode: backwards; } .wh-lines .wl-flow { stroke: var(--accent); stroke-width: 1.75; stroke-dasharray: 14 2202; stroke-dashoffset: 14; } .wh-lines .wl-halo { stroke: var(--accent); stroke-width: 6; opacity: 0.22; stroke-dasharray: 26 2190; stroke-dashoffset: 26; animation-name: wl-halo; } .wh-lines .wl-d2 { animation-delay: 2.3s; } .wh-lines .wl-d3 { animation-delay: 4.7s; } @keyframes wl-flow { from { stroke-dashoffset: 14px; } to { stroke-dashoffset: -2202px; } } @keyframes wl-halo { from { stroke-dashoffset: 26px; } to { stroke-dashoffset: -2190px; } } /* the governance clause rides the trunk: a gate the wires pass through */ .wh-props { position: absolute; left: 50%; bottom: 1.9rem; transform: translateX(-50%); margin: 0; width: max-content; max-width: 100%; text-align: center; } .wh-props span { display: inline-block; background: var(--warm-gray-1); padding: 0.28rem 0.8rem; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } .section-warm .wh-props span { background: var(--warm-gray-1); } .wh-node { position: relative; max-width: 760px; margin: 0 auto; background: var(--panel); padding: 1.4rem 2rem 1.1rem; } .wh-main { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; text-align: left; } .wh-port { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: var(--accent); } .wh-txt { flex: 1 1 auto; } .wh-int { flex: 0 0 auto; display: block; width: 232px; height: auto; } .wh-int .wi-raw { fill: rgba(244,241,235,.26); } .wh-int .wi-grid { fill: rgba(244,241,235,.48); } .wh-int .wi-div { stroke: rgba(244,241,235,.14); stroke-width: 1; } .wh-int .wi-one { fill: rgba(244,241,235,.92); } .wh-int .wi-tick { fill: var(--accent); } .wh-node b { display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on); margin-bottom: 0.35rem; } .wh-node span { font-size: 0.88rem; line-height: 1.55; color: var(--on-64); } /* the feed: no rack below the slab — the sources are printed on the instrument itself, a port strip along its bottom edge. Marks keep their brand colour (each one clears 3.2:1 on the panel); the strip is held back by scale and a keyed label, not by desaturation. */ .wh-plate { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(244,241,235,.14); } .wh-node .wp-k { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-36); } .wp-set { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; padding-left: 1.4rem; border-left: 1px solid rgba(244,241,235,.10); } .wh-node .wp-label { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wp-marks { display: flex; align-items: center; gap: 0.6rem; height: 18px; } .wp-marks img { width: 18px; height: 18px; display: block; opacity: 0.92; } .wh-src { text-align: center; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-26); margin: 1.1rem 0 0; } @media (prefers-reduced-motion: reduce) { .wh-lines .wl-flow, .wh-lines .wl-halo { animation: none; opacity: 0; } } /* ---- 14. Ownership kicker (voice aside — serif italic stays) ---- */ .kicker-note { max-width: 52ch; margin: var(--space-md) 0 0; border-left: 2px solid var(--accent); padding: 0.4rem 0 0.4rem 1.2rem; text-align: left; font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--text-body); } /* ---- 15. Proof section ---- */ .proof-content > .eyebrow { margin-bottom: var(--space-sm); } .proof-callout { max-width: 70ch; text-wrap: balance; } .proof-text { margin-inline: 0; max-width: 62ch; } .proof-callout strong { font-family: var(--font-body); font-weight: 700; font-size: 1.06em; } /* ---- 16. Client logo band ---- */ .client-band { background: var(--paper); border-bottom: 1px solid var(--rule-2); padding: var(--space-xl) 0; } .client-band-k { text-align: center; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-md); } .client-band-row { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; } .client-band-row img { width: auto; filter: grayscale(1); opacity: 0.8; transition: filter .3s, opacity .3s; } .client-band-row img:hover { filter: grayscale(0); opacity: 1; } .cb-hdf { height: clamp(58px, 7.2vw, 92px); } .cb-bm { height: clamp(44px, 5.3vw, 68px); } .cb-lg { height: clamp(14px, 1.5vw, 19px); } /* ---- 17. Operators band ---- */ .team-avatar, .team-avatar.navy, .team-avatar.coral, .team-avatar.deep { background: transparent; border: 1px solid var(--ink-26); color: var(--ink); font-family: var(--font-mono); font-size: 1rem; font-weight: 500; letter-spacing: 0.12em; transition: var(--transition-fast); } .team-card:hover .team-avatar { background: var(--ink); border-color: var(--ink); color: var(--on); } .team-card h3 { font-weight: 600; } .team-role { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .operators-cert { text-align: center; margin-top: var(--space-md); font-size: var(--size-body-sm); color: var(--text-body); } .operators-cert b { color: var(--text-dark); } /* ---- 18. Final CTA + footer ---- */ .final-cta .cta-note { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.13em; max-width: none; } .final-cta .cta-ladder p { margin-bottom: 0; } .footer-col h4 { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-36); } .footer-tag { margin-top: 0.8rem; font-family: var(--font-display); font-style: italic; font-size: 0.98rem; color: var(--on-64); } /* ---- 19. Responsive ---- */ @media (max-width: 900px) { .receipt-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .agents-lede { grid-template-columns: 1fr; gap: var(--space-md); } .agents-lede .receipt { margin-top: 0; } .stack-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1.1rem 1.2rem; } .stack-row-label { flex: none; } .finding-card { max-width: 100%; } .agent-cards { grid-template-columns: 1fr; } .wh-lines { display: none; } /* no wires to hang the gate on, so it returns to normal flow */ .wh-props { position: static; transform: none; width: auto; margin: var(--space-md) 0 0.9rem; } .wh-props span { display: block; } .wh-node { padding: 1.5rem 1.4rem 1.2rem; } .wh-main { flex-direction: column; text-align: center; gap: 1.1rem; } /* the strip can't hold five columns and a key at this width: it wraps to a grid and the key drops */ .wh-plate { flex-wrap: wrap; gap: 1rem 0; } .wh-node .wp-k { display: none; } .wp-set { flex: 0 0 33.333%; padding-left: 0; border-left: none; align-items: center; } .wp-marks { justify-content: center; } .wh-node .wp-label { font-size: 0.52rem; letter-spacing: 0.1em; text-align: center; } .wh-port { display: none; } .wh-int { width: 215px; margin: 0 auto; } }