/* ============================================================ FIELDMOUSE — Solution Pages Stylesheet Extends: css/styles.css (always load styles.css first) ============================================================ TEMPLATE SECTIONS (in order): 1. Solution Nav Override 2. Solution Hero 3. Breadcrumb 4. Stat Bar 5. Challenge Section 6. How It Helps (Feature Cards) 7. Capability Table 8. Outcomes 9. Devices Used 10. CTA Strip (inherits from styles.css) 11. Related Solutions 12. Responsive overrides HOW TO USE: - Copy solutions/field-lighting.html → rename for new page - Update data-accent colour on if you want a per-page tint - Replace all placeholder copy and stat figures - Swap icons in .feature-card and .outcome-card as needed ============================================================ */ /* ── 1. NAV OVERRIDE Solution pages sit one level deep (/solutions/), so the logo src path changes — no CSS needed, handled in HTML. We just add a subtle "back" indicator style. ──────────────────────────────────────────────────────────── */ .nav-back { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--grey); text-decoration: none; transition: color 0.2s; } .nav-back svg { transition: transform 0.2s; } .nav-back:hover { color: var(--blue-dk); } .nav-back:hover svg { transform: translateX(-3px); } /* ── 2. SOLUTION HERO Darker, more focused than the homepage hero. Left-aligned for a more editorial / document feel. ──────────────────────────────────────────────────────────── */ .sol-hero { min-height: 72vh; background: var(--charcoal); display: flex; align-items: flex-end; position: relative; overflow: hidden; padding: 120px 40px 64px; } /* Diagonal accent band */ .sol-hero::before { content: ''; position: absolute; top: 0; right: -10%; width: 55%; height: 100%; background: linear-gradient( 135deg, rgba(123, 189, 212, 0.06) 0%, rgba(123, 189, 212, 0.0) 60% ); clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%); pointer-events: none; } /* Subtle grid (same motif as homepage) */ .sol-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(123,189,212,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(123,189,212,0.05) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .sol-hero-inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; width: 100%; } /* Vertical label */ .sol-hero-vertical { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .sol-hero-vertical-line { width: 32px; height: 2px; background: var(--blue); } .sol-hero-vertical-text { font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--blue); } .sol-hero-title { font-size: clamp(36px, 5vw, 64px); font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; color: white; max-width: 760px; margin-bottom: 24px; } .sol-hero-title span { color: var(--blue); } .sol-hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.55); max-width: 560px; line-height: 1.8; margin-bottom: 48px; } /* ── 3. BREADCRUMB ──────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 400; letter-spacing: 1px; color: rgba(255,255,255,0.3); margin-bottom: 40px; } .breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: var(--blue); } .breadcrumb-sep { opacity: 0.3; } .breadcrumb-current { color: rgba(255,255,255,0.6); } /* ── 4. STAT BAR Three key metrics anchored to bottom of hero section. ──────────────────────────────────────────────────────────── */ .stat-bar { display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 40px; flex-wrap: wrap; } .stat-item { flex: 1; min-width: 160px; padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.08); margin-right: 40px; } .stat-item:last-child { border-right: none; padding-right: 0; margin-right: 0; } .stat-value { font-size: 42px; font-weight: 700; letter-spacing: -1px; color: white; line-height: 1; margin-bottom: 8px; } .stat-value span { color: var(--blue); } .stat-label { font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.35); line-height: 1.5; } /* ── 5. CHALLENGE SECTION ───────────────────────────────────── */ .challenge { background: var(--white); padding: 100px 40px; } .challenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 48px; } .challenge-body p { font-size: 16px; font-weight: 300; color: var(--grey); line-height: 1.85; margin-bottom: 20px; } .challenge-body p:last-child { margin-bottom: 0; } .challenge-body strong { color: var(--charcoal); font-weight: 600; } /* Pain point list */ .pain-list { list-style: none; display: flex; flex-direction: column; gap: 16px; } .pain-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; font-weight: 300; color: var(--grey); line-height: 1.65; } .pain-list li::before { content: ''; flex-shrink: 0; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: 0.6; } .pain-list li strong { color: var(--charcoal); font-weight: 600; } /* Pull quote */ .challenge-quote { border-left: 3px solid var(--blue); padding: 20px 24px; background: var(--light); border-radius: 0 8px 8px 0; margin-top: 32px; } .challenge-quote p { font-size: 15px; font-weight: 500; color: var(--charcoal); line-height: 1.65; font-style: italic; margin-bottom: 0 !important; } /* ── 6. HOW IT HELPS — FEATURE CARDS ───────────────────────── */ .features { background: var(--light); padding: 100px 40px; } .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; } .feature-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 36px 32px; transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s; } .feature-card:hover { box-shadow: 0 8px 32px rgba(44,100,120,0.10); border-color: var(--blue); transform: translateY(-3px); } .feature-card-icon { width: 48px; height: 48px; background: rgba(123,189,212,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .feature-card h3 { font-size: 16px; font-weight: 600; color: var(--charcoal); margin-bottom: 10px; letter-spacing: 0.2px; } .feature-card p { font-size: 14px; font-weight: 300; color: var(--grey); line-height: 1.75; } /* ── 7. CAPABILITY TABLE ────────────────────────────────────── */ .capability { background: var(--white); padding: 100px 40px; } .cap-table-wrap { margin-top: 48px; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); } .cap-table { width: 100%; border-collapse: collapse; min-width: 540px; } .cap-table thead tr { background: var(--charcoal); } .cap-table thead th { padding: 16px 24px; font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: left; } .cap-table thead th:not(:first-child) { text-align: center; width: 100px; } .cap-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; } .cap-table tbody tr:last-child { border-bottom: none; } .cap-table tbody tr:hover { background: var(--light); } /* Category header rows */ .cap-table tbody tr.cap-group-header td { background: var(--light); padding: 10px 24px; font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-mid); border-bottom: 1px solid var(--border); } .cap-table tbody td { padding: 14px 24px; font-size: 13px; color: var(--charcoal); font-weight: 400; } .cap-table tbody td:not(:first-child) { text-align: center; } /* Check and dash marks */ .cap-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(123,189,212,0.12); border-radius: 50%; color: var(--blue-dk); } .cap-dash { display: inline-block; width: 12px; height: 2px; background: var(--border); border-radius: 2px; } /* ── 8. OUTCOMES ────────────────────────────────────────────── */ .outcomes { background: var(--charcoal); padding: 100px 40px; } .outcomes .label { color: var(--blue); } .outcomes .section-title { color: white; } .outcomes .section-lead { color: rgba(255,255,255,0.5); } .outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .outcome-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 36px 28px; transition: background 0.2s, border-color 0.2s; } .outcome-card:hover { background: rgba(123,189,212,0.07); border-color: rgba(123,189,212,0.25); } .outcome-icon { width: 48px; height: 48px; background: rgba(123,189,212,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .outcome-stat { font-size: 36px; font-weight: 700; color: white; letter-spacing: -0.5px; line-height: 1; margin-bottom: 8px; } .outcome-stat span { color: var(--blue); } .outcome-card h3 { font-size: 15px; font-weight: 600; color: white; margin-bottom: 10px; } .outcome-card p { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.7; } /* ── 9. DEVICES USED ────────────────────────────────────────── */ .devices-used { background: var(--light); padding: 100px 40px; } .devices-grid { display: flex; gap: 24px; margin-top: 48px; flex-wrap: wrap; } .device-pill { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 28px 32px; display: flex; align-items: center; gap: 20px; text-decoration: none; transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s; flex: 1; min-width: 220px; } .device-pill:hover { box-shadow: 0 6px 24px rgba(44,100,120,0.10); border-color: var(--blue); transform: translateY(-2px); } .device-pill-icon { flex-shrink: 0; width: 48px; height: 48px; } .device-pill-body {} .device-pill-name { font-size: 16px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--charcoal); margin-bottom: 3px; } .device-pill-by { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; } .device-pill-role { font-size: 12px; font-weight: 300; color: var(--grey); line-height: 1.5; } /* "Not primary" style */ .device-pill.secondary { opacity: 0.65; } .device-pill.secondary:hover { opacity: 1; } /* ── 11. RELATED SOLUTIONS ──────────────────────────────────── */ .related { background: var(--white); padding: 80px 40px; } .related .section-title { font-size: 28px; margin-bottom: 40px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .related-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; transition: box-shadow 0.25s, transform 0.2s, border-color 0.25s; display: block; } .related-card:hover { box-shadow: 0 8px 32px rgba(44,100,120,0.10); transform: translateY(-3px); border-color: var(--blue); } .related-card-header { background: var(--charcoal); padding: 28px 28px 24px; position: relative; overflow: hidden; } .related-card-header::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(123,189,212,0.08); } .related-card-vertical { font-size: 9px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; } .related-card-title { font-size: 17px; font-weight: 600; color: white; line-height: 1.3; } .related-card-body { padding: 20px 28px 24px; background: var(--white); } .related-card-desc { font-size: 13px; font-weight: 300; color: var(--grey); line-height: 1.65; margin-bottom: 16px; } .related-card-link { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-mid); display: flex; align-items: center; gap: 6px; } .related-card-link svg { transition: transform 0.2s; } .related-card:hover .related-card-link svg { transform: translateX(4px); } /* ── 12. PLATFORM SHOWCASE ──────────────────────────────────── */ .platform-showcases { display: flex; flex-direction: column; gap: 64px; margin-top: 48px; } .platform-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .platform-showcase.reverse { direction: rtl; } .platform-showcase.reverse > * { direction: ltr; } .platform-showcase-img { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.10); border: 1px solid rgba(0,0,0,0.07); background: #f5f7f9; } .platform-showcase-img img { display: block; width: 100%; height: auto; } .platform-showcase-text { display: flex; flex-direction: column; gap: 32px; } .platform-showcase-feature h3 { font-size: 15px; font-weight: 600; color: var(--charcoal); margin: 0 0 8px; } .platform-showcase-feature p { font-size: 14px; color: var(--grey); line-height: 1.75; margin: 0; } .platform-showcase-feature-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(123,189,212,0.12); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } /* ── 13. RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 860px) { .sol-hero { padding: 100px 24px 48px; min-height: auto; } .sol-hero-title { font-size: 36px; } .stat-bar { gap: 24px; } .stat-item { border-right: none; padding-right: 0; margin-right: 0; min-width: 140px; } .challenge { padding: 70px 24px; } .features { padding: 70px 24px; } .capability{ padding: 70px 24px; } .outcomes { padding: 70px 24px; } .devices-used { padding: 70px 24px; } .related { padding: 60px 24px; } .challenge-grid { grid-template-columns: 1fr; gap: 40px; } .features-grid { grid-template-columns: 1fr; } .outcomes-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr 1fr; } .platform-showcase { grid-template-columns: 1fr; } .platform-showcase.reverse { direction: ltr; } } @media (max-width: 560px) { .stat-value { font-size: 32px; } .related-grid { grid-template-columns: 1fr; } .devices-grid { flex-direction: column; } }