/* ============================================================
RedSecLabs — site-wide "slick" design layer
------------------------------------------------------------
HOW TO USE
Add this ONE line to the of every page, AFTER your
existing stylesheets (style.css, custom.css, improvements.css):
It upgrades the shared template components used across the
whole site (the "why us" block, audience tiles, process
steps, and FAQ) so the design is consistent and no longer
reads as generic. No markup changes required.
============================================================ */
:root{
--rsl-red:#C51230;
--rsl-red-dark:#a50f28;
--rsl-ink:#171428;
--rsl-line:#ececf1;
--rsl-muted:#3a3d45;
}
/* ---------------------------------------------------------
1) "WHY US" SECTION (.swift-reasons-*) — used site-wide
The boxed, centred paragraph is the biggest "templated"
tell. Remove the box, flatten the section, refine the tiles.
--------------------------------------------------------- */
.swift-reasons-section{ background:#f7f8fa !important; padding:72px 0; }
.swift-reason-featured{
background:none !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
max-width:760px;
margin:0 auto 40px;
text-align:center;
font-size:17px;
color:var(--rsl-muted);
line-height:1.7;
}
.swift-reason-featured p{ margin:0; }
.swift-reason-featured strong,
.swift-reason-featured b{ color:var(--rsl-ink); font-weight:700; }
.swift-reasons-grid{ gap:14px; }
.swift-reason-card{
border:1px solid var(--rsl-line) !important;
border-radius:14px !important;
box-shadow:0 1px 2px rgba(20,16,40,.04);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.swift-reason-card:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(20,16,40,.09);
border-color:rgba(197,18,48,.28) !important;
}
.swift-reason-icon{ background:var(--rsl-red) !important; border-radius:11px !important; }
.swift-reason-text{ color:#22242b; font-weight:600; }
/* ---------------------------------------------------------
2) AUDIENCE TILES (.swift-who-*) — used on 75+ pages
--------------------------------------------------------- */
.swift-who-tile{
border:1px solid var(--rsl-line) !important;
border-radius:14px !important;
box-shadow:0 1px 2px rgba(20,16,40,.04);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.swift-who-tile:hover{
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(20,16,40,.09);
border-color:rgba(197,18,48,.28) !important;
}
.swift-who-icon{ transition:transform .2s ease; }
.swift-who-tile:hover .swift-who-icon{ transform:scale(1.08); }
/* ---------------------------------------------------------
3) PROCESS / METHODOLOGY STEPS (.gray-card) — 57+ pages
--------------------------------------------------------- */
.gray-card{
border:1px solid var(--rsl-line) !important;
border-radius:14px !important;
box-shadow:0 1px 2px rgba(20,16,40,.04);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gray-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 34px rgba(20,16,40,.09);
border-color:rgba(197,18,48,.22) !important;
}
/* ---------------------------------------------------------
4) FAQ ACCORDION (.faqs-wrapper) — 82+ pages
--------------------------------------------------------- */
.faqs-wrapper .accordion-item{
background:#fff !important;
border:1px solid var(--rsl-line) !important;
border-radius:12px !important;
margin-bottom:12px;
overflow:hidden;
transition:border-color .18s ease, box-shadow .18s ease;
}
.faqs-wrapper .accordion-item:hover{
border-color:rgba(197,18,48,.22) !important;
box-shadow:0 8px 22px rgba(20,16,40,.06);
}
.faqs-wrapper .accordion-button{
padding:18px 20px !important;
font-weight:600 !important;
color:var(--rsl-ink) !important;
box-shadow:none !important;
}
.faqs-wrapper .accordion-button:not(.collapsed){
color:var(--rsl-red) !important;
background:#fff !important;
}
/* ---------------------------------------------------------
5) BUTTONS — subtle polish
--------------------------------------------------------- */
.btn-primary{ transition:background .18s ease, transform .12s ease; }
.btn-primary:hover{ background:var(--rsl-red-dark); }
/* ---------------------------------------------------------
6) OPTIONAL — premium DARK process section
Add the class "rsl-dark" to any process to get the
dark treatment used on the SOC 2 page. (Opt-in, no default.)
e.g.
--------------------------------------------------------- */
.rsl-dark{ background:#131120 !important; position:relative; overflow:hidden; }
.rsl-dark::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(720px circle at 85% 0%, rgba(197,18,48,.16), transparent 60%);
}
.rsl-dark > .container{ position:relative; z-index:1; }
.rsl-dark .main-heading,
.rsl-dark .box-hea,
.rsl-dark h2,
.rsl-dark h3{ color:#fff !important; }
.rsl-dark .text-primary{ color:#ff6b81 !important; }
.rsl-dark .mid-para,
.rsl-dark p{ color:rgba(255,255,255,.66) !important; }
.rsl-dark .gray-card{
background:rgba(255,255,255,.045) !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:none !important;
}
.rsl-dark .gray-card:hover{
background:rgba(255,255,255,.075) !important;
border-color:rgba(255,107,129,.45) !important;
}
/* ---------------------------------------------------------
7) STICKY CTA — upgrade the site's existing #rslStickyCta
to a slick dark bar, visible on desktop + mobile.
--------------------------------------------------------- */
.rsl-sticky-cta{
display:block !important;
background:#12101f !important;
border-top:1px solid rgba(255,255,255,.09) !important;
box-shadow:0 -8px 30px rgba(8,6,16,.30) !important;
padding:12px 18px !important;
transform:translateY(115%);
transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.rsl-sticky-cta.is-visible{ transform:translateY(0) !important; }
.rsl-sticky-cta-inner{
max-width:1080px; margin:0 auto;
display:flex !important; align-items:center; justify-content:flex-end; gap:12px;
}
.rsl-sticky-cta a{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:12px 20px; border-radius:9px; font-size:13.5px; font-weight:600;
text-decoration:none !important; white-space:nowrap; line-height:1.2; border:0;
}
.rsl-sticky-cta-primary{ background:var(--rsl-red) !important; color:#fff !important; }
.rsl-sticky-cta-primary:hover{ background:var(--rsl-red-dark) !important; }
.rsl-sticky-cta-secondary{ background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; }
.rsl-sticky-cta-secondary:hover{ border-color:#fff !important; }
.rsl-sticky-cta-close{ background:transparent !important; border:0 !important; color:rgba(255,255,255,.5) !important; font-size:22px; line-height:1; padding:0 4px; cursor:pointer; }
.rsl-sticky-cta-close:hover{ color:#fff !important; }
body.has-sticky-cta{ padding-bottom:74px; }
@media(max-width:768px){
.rsl-sticky-cta{ padding:10px 12px !important; }
.rsl-sticky-cta-inner{ justify-content:stretch; gap:8px; }
.rsl-sticky-cta a{ flex:1; padding:12px 8px; font-size:12.5px; }
body.has-sticky-cta{ padding-bottom:66px; }
}
/* ---------------------------------------------------------
8) SERVICE-PAGE polish (applies across all service pages)
--------------------------------------------------------- */
/* de-justify dated body copy */
.about-justi, .text-justify, .mid-para, .founder-text, .pci-card-desc, .progress-section p { text-align:left !important; }
/* refine the generic Bootstrap feature cards used in the
"what this delivers" / "what you face" grids (border+shadow+rounded) */
.border.shadow.rounded{
border:1px solid var(--rsl-line) !important;
box-shadow:0 1px 2px rgba(20,16,40,.04) !important;
border-radius:14px !important;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.border.shadow.rounded:hover{
transform:translateY(-3px);
box-shadow:0 14px 30px rgba(20,16,40,.09) !important;
border-color:rgba(197,18,48,.25) !important;
}
/* brand-red icons inside those cards */
.border.shadow.rounded .me-3 i,
.border.shadow.rounded .me-3 svg{ color:var(--rsl-red) !important; }
/* ---------------------------------------------------------
9) BESPOKE HERO DECISION BAR (per-service, injected)
--------------------------------------------------------- */
.rsl-hero-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:22px 0 6px;max-width:600px;}
.rsl-hero-bar .hb{display:flex;flex-direction:column;gap:3px;padding:11px 15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:9px;}
.rsl-hero-bar .k{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#ff7184;}
.rsl-hero-bar .v{font-size:13.5px;color:rgba(255,255,255,.94);line-height:1.35;font-family:'Switzer-Medium',Arial,sans-serif;}
@media(max-width:768px){.rsl-hero-bar{grid-template-columns:1fr;max-width:none;}}