/* ========================================================= INDUSTRY PAGES (Shared) File: /industry/industry.css Scope: Only pages with ========================================================= */ .industry-page .subtitle{ max-width: 820px; margin-left: auto; margin-right: auto; } /* ---- HERO (premium readable) ---- */ .industry-page .industry-hero{ padding: 80px 0 46px; } .industry-page .industry-hero .hero-grid{ align-items: center; gap: 28px; } .industry-page .industry-hero p{ line-height: 1.75; max-width: 760px; opacity: 0.95; } .industry-page .industry-hero .hero-img{ min-height: 360px; border-radius: 18px; background: #f6f9ff; border: 1px solid rgba(13, 38, 76, 0.12); overflow: hidden; display:flex; align-items:center; justify-content:center; text-align:center; padding: 18px; color:#4b5a6a; } .industry-page .industry-hero .hero-img strong{ display:block; font-size: 16px; margin-bottom: 8px; color:#0f2a44; } .industry-page .industry-hero .hero-img .hint{ font-size: 13px; opacity: 0.85; } /* ---- KPI STRIP (nice trust row) ---- */ .industry-page .industry-kpis{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 18px; } .industry-page .industry-kpi{ background:#fff; border: 1px solid rgba(13, 38, 76, 0.10); border-radius: 16px; padding: 14px 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); text-align:left; } .industry-page .industry-kpi .t{ font-weight: 800; color:#0f2a44; font-size: 13px; margin-bottom: 6px; } .industry-page .industry-kpi .d{ font-size: 13px; color:#4a5563; line-height: 1.55; } /* ---- SECTION HEAD ---- */ .industry-page .industry-head{ text-align:center; max-width: 980px; margin: 0 auto 22px; } .industry-page .industry-head h2{ margin-bottom: 10px; } /* ---- CARD GRID (services/workflows/engagement) ---- */ .industry-page .industry-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; } .industry-page .industry-card{ background:#fff; border: 1px solid rgba(13, 38, 76, 0.10); border-radius: 18px; padding: 18px; box-shadow: 0 14px 30px rgba(0,0,0,0.06); text-align:left; height:100%; } .industry-page .industry-card .tag{ display:inline-block; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color:#0b6cff; background: rgba(11, 108, 255, 0.10); border: 1px solid rgba(11, 108, 255, 0.18); padding: 6px 10px; border-radius: 999px; margin-bottom: 12px; } .industry-page .industry-card h3{ margin: 0 0 8px; font-size: 16px; color:#0f2a44; } .industry-page .industry-card p{ margin: 0; color:#4a5563; line-height: 1.65; font-size: 14px; } .industry-page .industry-card ul{ margin: 12px 0 0; padding-left: 18px; color:#4a5563; } .industry-page .industry-card li{ margin: 6px 0; font-size: 14px; } /* ---- MID CTA BAND ---- */ .industry-page .industry-cta{ background: #fff; border: 1px solid rgba(13, 38, 76, 0.10); border-radius: 20px; box-shadow: 0 18px 40px rgba(0,0,0,0.07); padding: 24px; display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; align-items:center; } .industry-page .industry-cta h3{ margin: 0 0 8px; color:#0f2a44; font-size: 20px; } .industry-page .industry-cta p{ margin: 0; color:#4a5563; line-height: 1.65; } .industry-page .industry-cta .actions{ display:flex; justify-content:flex-end; gap: 12px; flex-wrap:wrap; } .industry-page .industry-cta .actions .cta{ margin-top: 0; } /* ---- INFO BOX ---- */ .industry-page .industry-note{ background:#fff; border: 1px solid rgba(13, 38, 76, 0.10); border-radius: 18px; padding: 18px; box-shadow: 0 12px 28px rgba(0,0,0,0.05); } /* ---- FAQ ACCORDION (clean + mobile) ---- */ .industry-page .industry-faq{ max-width: 980px; margin: 18px auto 0; text-align:left; } .industry-page .industry-faq details{ background:#fff; border: 1px solid rgba(13, 38, 76, 0.10); border-radius: 16px; padding: 12px 14px; box-shadow: 0 10px 22px rgba(0,0,0,0.05); margin: 10px 0; } .industry-page .industry-faq summary{ cursor:pointer; font-weight: 800; color:#0f2a44; list-style:none; } .industry-page .industry-faq summary::-webkit-details-marker{ display:none; } .industry-page .industry-faq p{ margin: 10px 0 0; color:#4a5563; line-height: 1.65; } /* ---- MOBILE RESPONSIVE ---- */ @media(max-width: 980px){ .industry-page .industry-grid{ grid-template-columns: 1fr; } .industry-page .industry-kpis{ grid-template-columns: 1fr; } .industry-page .industry-cta{ grid-template-columns: 1fr; text-align:center; } .industry-page .industry-cta .actions{ justify-content:center; } .industry-page .industry-hero{ padding: 62px 0 36px; } } @media(max-width: 520px){ .industry-page .industry-hero .hero-img{ min-height: 280px; } } /* ================================ PERSONAL VA PAGE (SCOPED STYLES) Paste at END of industry/industry.css Scope: body.page-personal-va =================================== */ body.page-personal-va .hero-personal .personal-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } body.page-personal-va .hero-personal .personal-pill{ display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); font-size:13px; line-height:1; backdrop-filter: blur(6px); } body.page-personal-va .personal-strip{ position:relative; } body.page-personal-va .personal-strip::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.0)); pointer-events:none; } /* Slightly different FAQ styling on Personal VA page */ body.page-personal-va .industry-faq details{ border:1px solid rgba(0,0,0,0.10); border-radius:14px; padding:12px 14px; margin:10px auto; max-width:980px; background:#fff; } body.page-personal-va .industry-faq summary{ cursor:pointer; font-weight:700; } body.page-personal-va .industry-faq p{ margin:10px 0 0; opacity:.95; } /* ================================ DATA ENTRY PAGE (SCOPED STYLES) Paste at END of industry/industry.css Scope: body.page-data-entry =================================== */ body.page-data-entry .hero-data-entry .de-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } body.page-data-entry .hero-data-entry .de-pill{ display:inline-block; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); font-size:13px; line-height:1; backdrop-filter: blur(6px); } body.page-data-entry .de-strip{ position:relative; } body.page-data-entry .de-strip::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.0)); pointer-events:none; } /* Team cards */ body.page-data-entry .team-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:18px; } body.page-data-entry .team-card{ background:#fff; border:1px solid rgba(0,0,0,0.10); border-radius:18px; padding:18px; box-shadow: 0 10px 26px rgba(0,0,0,0.06); } body.page-data-entry .team-avatar{ width:96px; height:96px; border-radius:999px; object-fit:cover; display:block; margin:0 0 12px 0; border:3px solid rgba(0,0,0,0.06); } body.page-data-entry .team-card h3{ margin:0 0 8px 0; font-size:18px; } body.page-data-entry .team-meta{ margin:0 0 8px 0; opacity:0.92; font-size:13.5px; } body.page-data-entry .team-card p{ margin:0; opacity:0.92; } /* Slightly different FAQ look */ body.page-data-entry .industry-faq details{ border:1px solid rgba(0,0,0,0.10); border-radius:14px; padding:12px 14px; margin:10px auto; max-width:980px; background:#fff; } body.page-data-entry .industry-faq summary{ cursor:pointer; font-weight:700; } body.page-data-entry .industry-faq p{ margin:10px 0 0; opacity:.95; } @media(max-width:1100px){ body.page-data-entry .team-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media(max-width:640px){ body.page-data-entry .team-grid{ grid-template-columns: 1fr; } }