/* ==========================================================================
PIXOUS TECHNOLOGIES — Service Pages • CSS Add-ons (shared)
File: public/assets/seo/css/service-sp-extras.css
The ONLY extra rules the standalone service pages need on top of the shared
seo-core.css design system. Works for the Android page, the Mobile App
Development page, and any future service page built with the same structure.
Everything else (hero, cards, features, steps, stack, industry tabs, FAQ,
stats, forms, buttons, ink sections) comes from seo-core.css unchanged.
This file is a superset of the earlier android-sp-extras.css — you can
replace that file with this one and load it for every service page:
Every selector is still scoped under .ios-sp so it can never touch the
main site.
========================================================================== */
/* --------------------------------------------------------------------------
1. CASE STUDY — "The Result" / "The Impact" label + card CTA spacing
(case cards themselves are styled by .ios-sp-case in seo-core.css)
-------------------------------------------------------------------------- */
.ios-sp .ios-sp-case-result-lbl{
display:inline-block;
font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--secondary-2);
margin-bottom:4px;
}
.ios-sp .ios-sp-btnrow.ios-sp-case-cta{margin-top:16px;}
/* keep the Play Store ghost button compact inside a card */
.ios-sp .ios-sp-case .ios-sp-case-cta .ios-sp-btn{min-height:40px;padding:0 18px;font-size:13px;}
/* --------------------------------------------------------------------------
2. HIGHLIGHT METRICS — 5-column stats variant + top spacing
(base .ios-sp-stats is a 4-col grid in seo-core.css)
-------------------------------------------------------------------------- */
.ios-sp .ios-sp-stats.ios-sp-stats--5{grid-template-columns:repeat(5,1fr);}
.ios-sp .ios-sp-stats.ios-sp-stats--spaced{margin-top:26px;}
/* long suffixes like "5+ Years" — let those numbers shrink gracefully */
.ios-sp .ios-sp-stats--5 .ios-sp-stat .num{font-size:2rem;}
/* --------------------------------------------------------------------------
3. HEADING / SECTION UTILITIES
-------------------------------------------------------------------------- */
.ios-sp .ios-sp-head.ios-sp-head--cta{margin-top:34px;margin-bottom:0;}
.ios-sp .ios-sp-h2.ios-sp-h2--sm{font-size:clamp(1.2rem,2.4vw,1.6rem);}
/* CTA banner heading rendered as
(matches the .ios-sp-cta h2 styling) */
.ios-sp .ios-sp-cta .ios-sp-cta-h3{
color:#fff;
font-size:clamp(1.5rem,3vw,2.2rem);
font-weight:800;
line-height:1.18;
margin-bottom:14px;
}
/* a secondary CTA heading stacked below body copy inside the same banner */
.ios-sp .ios-sp-cta .ios-sp-cta-h3--stacked{margin-top:8px;font-size:clamp(1.25rem,2.6vw,1.75rem);}
/* grid utilities used on the Flutter comparison section */
.ios-sp .ios-sp-grid.ios-sp-grid--top{align-items:start;}
.ios-sp .ios-sp-grid.ios-sp-grid--spaced{margin-top:26px;}
/* a second stat/impact label that needs breathing room above it */
.ios-sp .ios-sp-case-result-lbl.ios-sp-case-result-lbl--gap{margin-top:12px;}
/* --------------------------------------------------------------------------
AI-page helpers (dense content: single-column cards, 2-col lists,
spaced step groups, and industry tab detail blocks)
-------------------------------------------------------------------------- */
/* single-column card grid (full-width summary cards) */
.ios-sp .ios-sp-grid.ios-sp-grid--1{grid-template-columns:1fr;}
/* two-column card list for long capability/benefit lists */
.ios-sp .ios-sp-cardlist.ios-sp-cardlist--2col{grid-template-columns:1fr 1fr;gap:7px 22px;}
@media (max-width:520px){
.ios-sp .ios-sp-cardlist.ios-sp-cardlist--2col{grid-template-columns:1fr;}
}
/* extra top gap when a step group follows other content in the same section */
.ios-sp .ios-sp-steps.ios-sp-steps--spaced{margin-top:24px;}
/* industry tab panel: heading + copy + use-case list stacked in one block */
.ios-sp .ios-sp-industry-detail{max-width:880px;margin:0 auto;}
.ios-sp .ios-sp-industry-detail h3{font-size:1.2rem;margin-bottom:8px;}
.ios-sp .ios-sp-industry-detail p{font-size:.92rem;color:var(--text-soft);line-height:1.7;margin-bottom:14px;}
.ios-sp .ios-sp-industry-detail .ios-sp-case-result-lbl{margin-bottom:10px;}
/* stack card with an explanatory paragraph above its tag list (AI dev page) */
.ios-sp .ios-sp-stack-card .ios-sp-stack-desc{
font-size:.9rem;line-height:1.65;color:var(--text-soft);
margin:2px 0 14px;
}
/* --------------------------------------------------------------------------
Cloud-page helpers: named tech list inside a stack card, compact cards
-------------------------------------------------------------------------- */
/* a "name + description" list inside a stack card (Cloud technologies) */
.ios-sp .ios-sp-tech-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.ios-sp .ios-sp-tech-list li{
font-size:.9rem;line-height:1.6;color:var(--text-soft);
padding-left:16px;position:relative;
}
.ios-sp .ios-sp-tech-list li::before{
content:"";position:absolute;left:0;top:.55em;
width:6px;height:6px;border-radius:50%;
background:var(--secondary-2);
}
.ios-sp .ios-sp-tech-list li b{color:var(--text);font-weight:700;}
/* compact card variant for dense industry grids (shorter copy) */
.ios-sp .ios-sp-card.ios-sp-card--compact{padding:22px 22px 20px;}
.ios-sp .ios-sp-card.ios-sp-card--compact h3{font-size:1.05rem;margin-bottom:7px;}
.ios-sp .ios-sp-card.ios-sp-card--compact p{font-size:.9rem;}
/* --------------------------------------------------------------------------
4. HERO CHIPS — when a hero lists many chips (Mobile page has 6), keep the
row tidy: allow it to wrap and cap its width so it doesn't crowd the CTA.
-------------------------------------------------------------------------- */
.ios-sp .ios-sp-hero-chips{max-width:560px;}
/* --------------------------------------------------------------------------
5. INDUSTRY TABS — some pages have many tabs (Android: 20). Make the tab
row scroll cleanly on small screens instead of wrapping into many lines.
(the tab + panel behaviour itself is handled by seo-core.js/css)
-------------------------------------------------------------------------- */
.ios-sp [data-itabs] .ios-sp-itabs{
flex-wrap:wrap; /* desktop: wrap neatly, centred */
row-gap:8px;
}
@media (max-width:820px){
.ios-sp [data-itabs] .ios-sp-itabs{
flex-wrap:nowrap;
justify-content:flex-start;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; /* Firefox */
padding-bottom:6px;
margin-left:-8px;margin-right:-8px; /* let it bleed to edges */
padding-left:8px;padding-right:8px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}
.ios-sp [data-itabs] .ios-sp-itabs::-webkit-scrollbar{display:none;} /* Chrome/Safari */
.ios-sp [data-itabs] .ios-sp-itab{flex:none;}
}
/* --------------------------------------------------------------------------
6. FAQ — the first item is rendered with .is-open in the markup. seo-core.js
only sizes the panel on click/resize, so give the initially-open panel a
height until the visitor interacts. Once JS runs it takes over cleanly.
(The tiny service-sp-extras.js helper makes this pixel-exact on load.)
-------------------------------------------------------------------------- */
.ios-sp .ios-sp-faq-item.is-open > .ios-sp-faq-a{max-height:1200px;}
/* --------------------------------------------------------------------------
7. RESPONSIVE — keep the extra grids in step with seo-core's breakpoints
-------------------------------------------------------------------------- */
@media (max-width:960px){
.ios-sp .ios-sp-stats.ios-sp-stats--5{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
.ios-sp .ios-sp-stats.ios-sp-stats--5{grid-template-columns:repeat(2,1fr);}
}