/* ============================================================ INDUSTRY PAGES, shared layout (hub + verticals) Loaded AFTER /css/site.css. Reuses site.css tokens and components (.section, .card, .step, .stat-strip, .faq-*, .pill, .friction). Adds the bespoke industry hero, stat cards, "what we automate" before→after rows, and the hub's vertical grid. Each page sets its own --ind-accent. ============================================================ */ .ind-page { --ind-accent: var(--accent); --ind-accent-soft: var(--accent-muted); } /* The vivid per-industry accent reads well on the dark (default) theme. On the light theme several of them (ivory, amber, sky) fall below text-contrast on white, so fall back to the brand's contrast-safe light accent. !important is required to override the per-page inline `--ind-accent` set on . */ [data-theme="light"] .ind-page { --ind-accent: var(--accent) !important; --ind-accent-soft: var(--accent-muted) !important; } /* ---- Breadcrumb ---- */ .breadcrumb { margin-bottom: var(--space-5); } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-label); } .breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-tertiary); } .breadcrumb li:not(:last-child)::after { content: "/"; color: var(--border-strong); } .breadcrumb a { color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease-out); } .breadcrumb a:hover { color: var(--ind-accent); } .breadcrumb [aria-current] { color: var(--text-secondary); } /* ---- Hero ---- */ .ind-hero { position: relative; overflow: hidden; padding: clamp(116px, 17vh, 172px) 0 clamp(48px, 8vh, 80px); background: radial-gradient(120% 92% at 50% -12%, var(--ind-accent-soft), transparent 60%), var(--bg-base); } .ind-hero .container { max-width: 940px; } .ind-hero .eyebrow { color: var(--ind-accent); } .ind-hero .eyebrow::before { background: var(--ind-accent); opacity: 0.6; } .ind-hero h1 { margin: var(--space-4) 0 var(--space-5); max-width: 22ch; } .ind-hero .lead { max-width: 720px; } .ind-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } /* Hero proof figures */ .ind-proof { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-6); max-width: 700px; } .ind-proof li { border-left: 2px solid var(--ind-accent); padding-left: var(--space-4); } .ind-proof b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1; color: var(--text-primary); } .ind-proof span { display: block; margin-top: 7px; font-size: var(--fs-sm); color: var(--text-secondary); } /* ---- Stat cards (the "leak" / problem section) ---- */ .ind-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); } .ind-stat { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--bg-base); } [data-theme="light"] .ind-stat { background: var(--bg-elevated); } .ind-stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1; color: var(--ind-accent); } .ind-stat p { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); } .ind-stat cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: var(--fs-label); color: var(--text-tertiary); } /* ---- "What we automate", before → after rows ---- */ .automation-list { display: grid; gap: var(--space-3); margin-top: var(--space-6); } .auto-row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-elevated); } .auto-before { color: var(--text-secondary); font-size: var(--fs-sm); } .auto-arrow { display: inline-flex; align-items: center; justify-content: center; color: var(--ind-accent); } .auto-after { display: inline-flex; align-items: center; gap: 9px; color: var(--text-primary); font-weight: 600; font-size: var(--fs-sm); } .auto-after .icon { color: var(--ind-accent); width: 18px; height: 18px; flex: none; } /* Subtle industry tint on a few reused components */ .ind-page .card .link-arrow { color: var(--ind-accent); } .ind-page .card .card-ico { background: color-mix(in srgb, var(--ind-accent) 14%, transparent); color: var(--ind-accent); } .ind-page .stat-strip b { color: var(--ind-accent); } /* ---- Value band (engineer + operator / why us) ---- */ .value-band { display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-7); } .value-item { display: flex; gap: var(--space-4); align-items: flex-start; } .value-item .icon { width: 24px; height: 24px; color: var(--ind-accent); flex: none; margin-top: 2px; } .value-item h3 { font-size: 1.1rem; margin: 0 0 5px; color: var(--text-primary); } .value-item p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); } /* ---- Hub: vertical grid ---- */ .vert-card { gap: var(--space-4); } .vert-top { display: flex; align-items: center; gap: 11px; } .vert-top .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--di, var(--accent)); box-shadow: 0 0 12px -1px var(--di, var(--accent)); } .vert-card h3 { margin: 0; } .vert-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .vert-ex li { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; gap: 9px; align-items: flex-start; } .vert-ex .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--di, var(--accent)); flex: none; } .vert-card .link-arrow { color: var(--di, var(--accent)); margin-top: auto; } .vert-card.is-soon .link-arrow { color: var(--text-tertiary); } .vert-card:hover { border-color: color-mix(in srgb, var(--di, var(--accent)) 45%, var(--border-default)); } /* ---- CTA band ---- */ .ind-cta { position: relative; overflow: hidden; text-align: center; background: radial-gradient(120% 120% at 50% 0%, var(--ind-accent-soft), transparent 62%), var(--bg-surface); } .ind-cta .container { max-width: 720px; } .ind-cta h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: var(--space-4); } .ind-cta .lead { margin: 0 auto var(--space-6); } /* ---- Responsive ---- */ @media (min-width: 600px) { .ind-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) { .ind-stats { grid-template-columns: repeat(3, 1fr); } .value-band { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .auto-row { grid-template-columns: 1fr; gap: 7px; padding: var(--space-4); } .auto-arrow { display: none; } }