.sp-industry-page, .sp-industry-page * { box-sizing: border-box; } .sp-industry-page { --sp-navy: #0f344d; --sp-blue: #235c81; --sp-mid: #5492b6; --sp-light: #d9ecf6; --sp-pale: #eef7fb; --sp-coral: #f27064; --sp-ink: #132536; --sp-muted: #5c6a73; --sp-line: rgba(16,47,70,.14); --sp-display: "Londrina Solid", "Big Shoulders Display", Impact, "Arial Black", sans-serif; --sp-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--sp-ink); font-family: var(--sp-body); background: linear-gradient(135deg, #eef7fb, #d9ecf6); } .sp-industry-wrap { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) 0; } .sp-industry-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--sp-blue); font-weight: 900; font-size: .78rem; letter-spacing: 0; text-transform: uppercase; } .sp-industry-eyebrow::before { content: ""; width: .62rem; height: .62rem; border-radius: 999px; background: var(--sp-coral); box-shadow: 0 0 0 .28rem rgba(242,112,100,.16); } .sp-industry-title { max-width: 920px; margin: .95rem 0 1rem; color: var(--sp-navy) !important; font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(2.6rem, 7vw, 6rem); line-height: .9; letter-spacing: 0; } .sp-industry-copy { max-width: 780px; color: var(--sp-muted); font-size: 1.05rem; line-height: 1.65; } .sp-industry-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .sp-industry-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .85rem 1.05rem; border-radius: .55rem; background: var(--sp-navy); color: #fff !important; font-weight: 900; text-decoration: none !important; } .sp-industry-btn.alt { background: #fff; color: var(--sp-navy) !important; border: 1px solid var(--sp-line); } .sp-industry-grid, .sp-industry-idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; } .sp-industry-card, .sp-industry-idea { display: grid; gap: .75rem; align-content: start; min-height: 210px; padding: 1rem; border: 1px solid var(--sp-line); border-radius: .65rem; background: rgba(255,255,255,.74); color: var(--sp-ink); text-decoration: none !important; box-shadow: 0 16px 38px rgba(16,47,70,.08); } .sp-industry-card:hover, .sp-industry-idea:hover { transform: translateY(-2px); border-color: rgba(242,112,100,.55); } .sp-industry-card span, .sp-industry-idea span { color: var(--sp-blue); font-size: .74rem; font-weight: 900; text-transform: uppercase; } .sp-industry-card strong, .sp-industry-idea strong { color: var(--sp-navy); font-family: var(--sp-display) !important; font-weight: 400 !important; font-size: clamp(1.55rem, 2.4vw, 2.3rem); line-height: .98; } .sp-industry-card p, .sp-industry-idea p { margin: 0; color: var(--sp-muted); line-height: 1.5; } .sp-industry-count { display: inline-flex; width: fit-content; border-radius: 999px; background: var(--sp-light); color: var(--sp-navy) !important; padding: .34rem .62rem; font-size: .8rem !important; } .sp-industry-idea em { color: var(--sp-coral); font-style: normal; font-weight: 900; } .sp-industry-related { margin-top: 2.5rem; padding: 1rem; border-radius: .8rem; background: var(--sp-navy); color: #fff; } .sp-industry-related a { color: #fff !important; font-weight: 900; } .sp-industry-related p { color: rgba(255,255,255,.76); margin: .4rem 0 0; } .sp-idea-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr .85fr; gap: 1rem; margin-top: 2rem; } .sp-idea-proof-card, .sp-idea-section { padding: 1.1rem; border: 1px solid var(--sp-line); border-radius: .75rem; background: rgba(255,255,255,.78); box-shadow: 0 18px 44px rgba(16,47,70,.08); } .sp-idea-proof-card { display: grid; gap: .65rem; align-content: start; min-height: 220px; } .sp-idea-proof-card span, .sp-idea-keywords span, .sp-idea-cta-list span { color: var(--sp-blue); font-size: .74rem; font-weight: 900; text-transform: uppercase; } .sp-idea-proof-card strong, .sp-idea-section h2 { margin: 0; color: var(--sp-navy); font-family: var(--sp-display) !important; font-weight: 400 !important; letter-spacing: 0; line-height: .95; } .sp-idea-proof-card strong { font-size: clamp(1.75rem, 2.8vw, 2.75rem); } .sp-idea-proof-card p, .sp-idea-section p { margin: 0; color: var(--sp-muted); line-height: 1.55; } .sp-idea-section { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 1.4rem; align-items: start; margin-top: 1rem; } .sp-idea-section h2 { font-size: clamp(2rem, 4vw, 3.65rem); } .sp-idea-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; } .sp-idea-list li { position: relative; margin: 0; padding: .75rem .85rem .75rem 2.1rem; border-radius: .55rem; background: rgba(217,236,246,.58); color: var(--sp-ink); font-weight: 800; list-style: none !important; } .sp-idea-list li::before { content: ""; position: absolute; left: .85rem; top: 1.05rem; width: .6rem; height: .6rem; border-radius: 999px; background: var(--sp-coral); } .sp-idea-cta-list, .sp-idea-keywords { display: flex; flex-wrap: wrap; gap: .55rem; } .sp-idea-cta-list span, .sp-idea-keywords span { display: inline-flex; align-items: center; min-height: 2.55rem; padding: .6rem .75rem; border-radius: 999px; background: #fff; border: 1px solid var(--sp-line); color: var(--sp-navy); text-transform: none; } .sp-idea-page .sp-industry-related { display: grid; gap: .35rem; } @media (max-width: 900px) { .sp-industry-grid, .sp-industry-idea-grid, .sp-idea-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-idea-section { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sp-industry-wrap { width: min(100% - 1rem, 1180px); } .sp-industry-grid, .sp-industry-idea-grid, .sp-idea-hero-grid { grid-template-columns: 1fr; } }