/* ==========================================================
STAR KNOWLEDGE — Elementor Custom CSS (v4.0, SELF-CONTAINED)
----------------------------------------------------------
This file no longer depends on sk-powerapps.css.
The brand token block and the minimal base styles that used
to live there are now included below, so this is the ONLY
stylesheet the child theme needs when every section is built
with native Elementor widgets.
Build assumption for v4.0:
- all sections -> native Elementor widgets
- estimator -> HTML widget (.sk-estimator / .sk-pill below)
- blog cards -> Post Grid widget (styled in PART 2)
- tables -> Essential Addons Data Table (styled in PART 2)
- quiz -> quiz plugin (styled in PART 2)
You can now DELETE sk-powerapps.css and remove its
wp_enqueue_style('sk-page-css', ...) call from functions.php.
Only do that if you are using NO files from section-html/.
========================================================== */
/* ============ BRAND TOKENS (moved from sk-powerapps.css) ============ */
:root{
/* Brand primaries — exact SK codes */
--sk-blue:#0352A6;
--sk-blue-deep:#02407F;
--sk-blue-wash:#EAF0FA;
--sk-blue-light:#D0DFEF;
--sk-green:#62BE4D;
--sk-green-deep:#4FA83D;
--sk-green-wash:#EFF8EC;
--sk-red:#E31E24;
--sk-red-deep:#B8161B;
/* Text & neutrals — exact SK codes */
--ink:#000000;
--ink-body:#333333;
--ink-soft:#666666;
--paper:#F5F7FA;
--paper-raised:#FFFFFF;
--grid-line:#E0E4EB;
--grid-line-light:#EEF0F4;
/* System */
--border-radius-s:8px;
--border-radius-m:14px;
--max:1180px;
/* Type */
--display:"DM Serif Display", Georgia, serif;
--body:"DM Sans", system-ui, sans-serif;
--mono:"JetBrains Mono", monospace;
}
/* ============ MINIMAL BASE (scoped — cannot affect the wider site) ============
Elementor Site Settings + Theme Style already handle most typography.
These only cover what Elementor does not set. */
.sk-page *{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.sk-page{
background:var(--paper);
color:var(--ink-body);
font-family:var(--body);
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
.sk-page img{max-width:100%;}
.sk-page :focus-visible{outline:2.5px solid var(--sk-blue);outline-offset:2px;}
/* ===== PART 1 — SK COMPONENT CLASSES ===== */
/* ===== BRAND TOKENS ===== */
:root {
--sk-blue: #0352A6;
--sk-blue-deep: #02407F;
--sk-blue-wash: #EAF0FA;
--sk-green: #62BE4D;
--sk-green-deep: #4FA83D;
--sk-green-wash: #EFF8EC;
--sk-red: #E31E24;
--ink: #333333;
--ink-soft: #666666;
--grid-line: #E0E4EB;
--mono: "JetBrains Mono", monospace;
--display: "DM Serif Display", Georgia, serif;
--body: "DM Sans", system-ui, sans-serif;
}
/* ---- Sticky header ---- */
.sk-site-header {
position: fixed !important;
top: 0;
z-index: 999;
background: #fff;
transition: box-shadow .2s ease;
}
.sk-site-header.is-scrolled{
background: rgba(255,255,255,.75) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
box-shadow: 0 4px 20px rgba(3,82,166,.15) !important;
}
/* ===== SCROLL REVEAL ===== */
.sk-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s ease, transform .6s ease;
}
.sk-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== CARD HOVER EFFECTS ===== */
/* Pain cards */
.sk-pain-card {
border-left: 3px solid var(--sk-blue) !important;
transition: transform .2s ease, box-shadow .2s ease !important;
}
.sk-pain-card:hover {
border-left: 3px solid var(--sk-green) !important;
transform: translateY(-3px);
box-shadow: 0 10px 28px -14px rgba(3,82,166,.12);
}
/* Service cards */
.sk-service-card {
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.sk-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px -16px rgba(3,82,166,.12);
border:1px solid var(--sk-blue) !important;
}
/*familiar single card*/
.manual-card{
border-left: 3px solid var(--sk-green) !important;
}
.under-the-hood{
border-left: 3px solid var(--sk-blue) !important;}
/* Service number circle */
.sk-service-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--sk-blue-wash);
color: var(--sk-blue-deep);
display: inline-flex;
align-items: center; justify-content: center;
font-family: var(--mono);
font-size: .72rem; font-weight: 700;
transition: background .2s ease, color .2s ease;
}
.sk-service-card:hover .sk-service-num {
background: var(--sk-blue);
color: #fff;
}
/* Story cards */
.sk-story-card {
transition: transform .22s ease, box-shadow .22s ease !important;
}
.sk-story-card:nth-child(1) { border-top: 3px solid var(--sk-blue) !important; }
.sk-story-card:nth-child(2) { border-top: 3px solid var(--sk-green) !important; }
.sk-story-card:nth-child(3) { border-top: 3px solid var(--sk-red) !important; }
.sk-story-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px -16px rgba(0,0,0,.1);
}
/* Industry cards */
.sk-industry-card {
transition: all .2s ease !important;
}
.sk-industry-card:hover {
transform: translateY(-3px);
border-color: var(--sk-blue) !important;
box-shadow: 0 8px 24px -12px rgba(3,82,166,.1);
}
/* Explainer cards */
.sk-explainer-card {
transition: all .2s ease !important;
border-left: 3px solid transparent !important;
}
.sk-explainer-card:hover {
border-left-color: var(--sk-blue) !important;
background: var(--sk-blue-wash) !important;
}
/* Value cards */
.sk-value-card {
transition: background .2s ease !important;
}
.sk-value-card:hover {
background: var(--sk-blue-wash) !important;
}
/* Resource article cards */
.sk-res-article {
transition: all .18s ease !important;
overflow: hidden;
}
.sk-res-article:hover {
transform: translateY(-4px);
border-color: var(--sk-blue) !important;
box-shadow: 0 16px 36px -18px rgba(3,82,166,.14);
}
.sk-res-article img {
transition: transform .3s ease;
}
/* .sk-res-article:hover img {
transform: scale(1.04);
} */
/* ===== BUTTON ENHANCEMENTS ===== */
.elementor-button {
position: relative;
overflow: hidden;
}
.elementor-button::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
transform: translateX(-100%);
transition: transform .4s ease;
}
.elementor-button:hover::after {
transform: translateX(100%);
}
/* ===== CTA STRIP ===== */
.sk-cta-strip {
background: var(--sk-green-wash) !important;
border: 1px solid rgba(98,190,77,.2) !important;
border-radius: 8px !important;
transition: box-shadow .25s ease;
}
.sk-cta-strip:hover {
box-shadow: 0 0 0 3px rgba(98,190,77,.1);
}
/* ===== CONTACT WRAP ===== */
.sk-contact-wrap {
background: linear-gradient(150deg, var(--sk-blue) 0%, var(--sk-blue-deep) 100%) !important;
border-radius: 14px !important;
overflow: hidden;
}
.sk-contact-wrap input:focus,
.sk-contact-wrap textarea:focus {
border-color: var(--sk-green) !important;
box-shadow: 0 0 0 3px rgba(98,190,77,.15);
}
/* ===== AI SECTION ===== */
.sk-ai-section {
background: linear-gradient(160deg, var(--sk-blue) 0%, var(--sk-blue-deep) 100%) !important;
}
/* ===== TABLES (HTML Widgets) ===== */
.sk-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--grid-line);
border-radius: 8px;
overflow: hidden;
font-family: var(--body);
font-size: .89rem;
color: var(--ink);
}
.sk-table th, .sk-table td {
text-align: left;
padding: 14px 18px;
border-bottom: 1px solid var(--grid-line);
vertical-align: top;
}
.sk-table thead th {
font-family: var(--mono);
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--ink-soft);
background: #F5F7FA;
border-bottom: 2px solid #000;
}
.sk-table tbody tr:hover { background: var(--sk-blue-wash); }
.sk-table tbody tr:last-child td { border-bottom: none; }
/* Comparison table SK column */
.sk-col-head { background: var(--sk-blue-deep) !important; color: #fff !important; }
.sk-col { background: var(--sk-blue-wash); font-weight: 600; color: var(--sk-blue-deep); }
/* Responsive table wrapper */
.sk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ===== ESTIMATOR (HTML Widget) ===== */
.sk-estimator {
background: #fff;
border: 1px solid var(--grid-line);
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 12px 40px -20px rgba(3,82,166,.08);
position: relative;
color: var(--ink);
font-family: var(--body);
}
.sk-estimator::before {
content: "";
position: absolute; top: -1px; left: 24px; right: 24px; height: 3px;
background: linear-gradient(90deg, var(--sk-blue), var(--sk-green));
border-radius: 0 0 3px 3px;
}
.sk-estimator label {
display: block; font-size: .76rem; font-weight: 600;
color: var(--ink-soft); margin-bottom: 7px;
font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em;
}
.sk-estimator select {
width: 100%; padding: 11px 12px; border-radius: 6px;
border: 1.3px solid var(--grid-line);
font-family: var(--body); font-size: .9rem; background: #fff;
appearance: none;
}
.sk-estimator input[type="range"] {
width: 100%; accent-color: var(--sk-blue);
}
.sk-pill {
border: 1.3px solid var(--grid-line); background: #fff;
padding: 7px 13px; border-radius: 20px; font-size: .82rem;
cursor: pointer; transition: all .12s ease; font-family: var(--body);
display: inline-block; margin: 3px;
}
.sk-pill.active { background: var(--sk-blue); color: #fff; border-color: var(--sk-blue); }
.sk-pill:hover:not(.active) { border-color: var(--sk-blue); }
/* ===== QUIZ (HTML Widget) ===== */
.sk-quiz-card {
background: #fff;
border: 1px solid var(--grid-line);
border-radius: 14px;
padding: 36px;
max-width: 720px;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0,0,0,.04), 0 20px 48px -24px rgba(3,82,166,.12);
font-family: var(--body);
}
.sk-quiz-opt {
text-align: left;
border: 1.5px solid var(--grid-line);
background: #fff;
padding: 13px 16px;
border-radius: 6px;
cursor: pointer;
font-size: .91rem;
font-family: var(--body);
transition: all .15s ease;
display: block;
width: 100%;
margin-bottom: 10px;
}
.sk-quiz-opt:hover {
transform: translateX(4px);
border-color: var(--sk-blue);
box-shadow: 0 4px 16px -8px rgba(3,82,166,.1);
}
.sk-quiz-opt.selected {
border-color: var(--sk-blue);
background: var(--sk-blue-wash);
font-weight: 600;
}
/* ===== TIMELINE (HTML Widget) ===== */
.sk-timeline {
position: relative;
margin-left: 8px;
list-style: none;
padding: 0;
}
.sk-timeline::before {
content: "";
position: absolute;
left: 19px; top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg, var(--sk-blue), var(--sk-blue-deep));
border-radius: 1px;
}
.sk-tl-step {
display: grid;
grid-template-columns: 40px 1fr;
gap: 20px;
padding-bottom: 32px;
}
.sk-tl-step:last-child { padding-bottom: 0; }
.sk-tl-num {
width: 40px; height: 40px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--grid-line);
display: flex;
align-items: center; justify-content: center;
font-family: var(--mono);
font-weight: 700; font-size: .83rem;
z-index: 1;
color: var(--sk-blue);
transition: all .2s ease;
}
.sk-tl-step.is-first .sk-tl-num {
background: var(--sk-blue); color: #fff; border-color: var(--sk-blue);
}
.sk-tl-step:hover .sk-tl-num {
transform: scale(1.1);
box-shadow: 0 0 0 4px var(--sk-blue-wash);
}
.sk-tl-content h4 {
font-family: var(--display);
font-size: 1rem;
color: var(--sk-blue);
margin: 0 0 .3em;
}
.sk-tl-content p {
color: var(--ink-soft);
font-size: .89rem;
margin: 0;
line-height: 1.65;
}
/* ===== EYEBROW LABEL (reusable) ===== */
.sk-eyebrow {
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--sk-blue-deep);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: .55em;
}
.sk-eyebrow::before {
content: "";
width: 20px; height: 2px;
background: var(--sk-red);
display: inline-block;
border-radius: 1px;
}
/* ===== FAQ — ACCORDION *and* TOGGLE WIDGET =====
Covers both Elementor widgets. Accordion uses
.elementor-accordion-title, Toggle uses .elementor-toggle-title —
the earlier version only had Toggle, so Accordion went unstyled.
Usage: put "sk-faq" on the widget (Advanced -> CSS Classes). */
/* item shell */
.sk-page .sk-faq .elementor-accordion-item,
.sk-page .sk-faq .elementor-toggle-item{
border:none !important;
border-bottom:1px solid var(--grid-line) !important;
background:transparent !important;
}
.sk-page .sk-faq .elementor-accordion-item:first-child,
.sk-page .sk-faq .elementor-toggle-item:first-child{
border-top:1px solid var(--grid-line) !important;
}
/* question row — serif blue */
.sk-page .sk-faq .elementor-accordion-title,
.sk-page .sk-faq .elementor-toggle-title,
.sk-page .sk-faq .elementor-tab-title{
font-family:var(--display) !important;
font-weight:400 !important;
font-size:1.06rem !important;
line-height:1.35 !important;
color:var(--sk-blue) !important;
transition:color .18s ease !important;
}
.sk-page .sk-faq .elementor-tab-title{
background:transparent !important;
border:none !important;
padding:20px 0 !important;
}
.sk-page .sk-faq .elementor-accordion-title:hover,
.sk-page .sk-faq .elementor-toggle-title:hover,
.sk-page .sk-faq .elementor-tab-title:hover{
color:var(--sk-blue-deep) !important;
}
.sk-page .sk-faq .elementor-tab-title.elementor-active{
background:transparent !important;
}
/* the +/x icon — green, rotates 45deg when open */
.sk-page .sk-faq .elementor-accordion-icon,
.sk-page .sk-faq .elementor-toggle-icon{
color:var(--sk-green) !important;
transition:transform .22s ease !important;
}
.sk-page .sk-faq .elementor-tab-title.elementor-active .elementor-accordion-icon,
.sk-page .sk-faq .elementor-tab-title.elementor-active .elementor-toggle-icon{
transform:rotate(45deg);
color:var(--sk-green-deep) !important;
}
/* if the widget shows separate opened/closed icons, keep both green */
.sk-page .sk-faq .elementor-accordion-icon-opened,
.sk-page .sk-faq .elementor-accordion-icon-closed,
.sk-page .sk-faq .elementor-toggle-icon-opened,
.sk-page .sk-faq .elementor-toggle-icon-closed{
color:var(--sk-green) !important;
}
/* answer body */
.sk-page .sk-faq .elementor-tab-content{
color:var(--ink-soft) !important;
font-family:var(--body) !important;
font-size:.95rem !important;
line-height:1.7 !important;
background:transparent !important;
border:none !important;
padding:0 0 22px !important;
}
.sk-page .sk-faq .elementor-tab-content p:last-child{margin-bottom:0 !important;}
.sk-page .sk-faq .elementor-tab-content a{
color:var(--sk-blue) !important;
text-decoration:underline !important;
}
@media(max-width:767px){
.sk-page .sk-faq .elementor-accordion-title,
.sk-page .sk-faq .elementor-toggle-title,
.sk-page .sk-faq .elementor-tab-title{font-size:.98rem !important;}
.sk-page .sk-faq .elementor-tab-title{padding:16px 0 !important;}
}
/* ===== SMOOTH PAGE LOAD =====
FIXED in v4.3. This was `body { animation: sk-fade-in }` — unscoped, and
animating opacity on creates a stacking context, which can break
position:sticky/fixed children (i.e. the sticky header) while it runs.
It also delays first paint on every page for no real benefit.
Now scoped to .sk-page, applied to the content wrapper instead of ,
and skipped under reduced-motion. */
.sk-page .elementor{ animation: sk-fade-in .35s ease; }
@keyframes sk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce){
.sk-page .elementor{ animation: none !important; }
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
.sk-reveal { opacity: 1; transform: none; }
}
/* ============================================================
MULTI-PAGE UTILITIES — Reusable across all service pages
============================================================ */
/* Page-specific overrides using body class added by functions.php */
/* Example: different hero accent per service page */
.sk-page-sharepoint-consulting-services .sk-hero::before { background: var(--sk-blue); }
.sk-page-dynamics-365-consulting-services .sk-hero::before { background: var(--sk-blue-deep); }
/* ===== REUSABLE SECTION PATTERNS ===== */
/* Two-column hero layout */
.sk-hero-section {
padding: 60px 0 72px;
background: #fff;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--grid-line);
}
/* Dark section — use on any blue-bg section */
.sk-dark-section {
background: linear-gradient(160deg, var(--sk-blue) 0%, var(--sk-blue-deep) 100%) !important;
}
.sk-dark-section h1,.sk-dark-section h2,.sk-dark-section h3,.sk-dark-section h4 { color: #fff !important; }
.sk-dark-section p,.sk-dark-section li,.sk-dark-section span { color: rgba(255,255,255,.75) !important; }
/* Light wash section */
.sk-wash-section {
background: var(--sk-blue-wash) !important;
}
/* Green wash section */
.sk-green-wash-section {
background: var(--sk-green-wash) !important;
}
/* ===== REUSABLE CARD PATTERNS ===== */
/* Generic lift card — works on any Inner Section */
.sk-lift-card {
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
border: 1px solid var(--grid-line) !important;
border-radius: 8px !important;
background: #fff !important;
}
.sk-lift-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px -16px rgba(3,82,166,.12);
border-color: var(--sk-blue) !important;
}
/* Accent border variants */
.sk-card-accent-blue { border-left: 3px solid var(--sk-blue) !important; }
.sk-card-accent-green { border-left: 3px solid var(--sk-green) !important; }
.sk-card-accent-red { border-left: 3px solid var(--sk-red) !important; }
.sk-card-top-blue { border-top: 3px solid var(--sk-blue) !important; }
.sk-card-top-green { border-top: 3px solid var(--sk-green) !important; }
.sk-card-top-red { border-top: 3px solid var(--sk-red) !important; }
/* Numbered badge circle */
.sk-num-badge {
width: 28px; height: 28px;
border-radius: 50% !important;
background: var(--sk-blue-wash) !important;
color: var(--sk-blue-deep) !important;
display: inline-flex !important;
align-items: center; justify-content: center;
font-family: var(--mono) !important;
font-size: .72rem !important; font-weight: 700 !important;
transition: background .2s ease, color .2s ease;
}
.sk-lift-card:hover .sk-num-badge {
background: var(--sk-blue) !important;
color: #fff !important;
}
/* ===== EYEBROW LABEL (reusable on any page) ===== */
.sk-eyebrow-label {
font-family: var(--mono) !important;
font-size: .7rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: var(--sk-blue-deep) !important;
font-weight: 600 !important;
}
/* ===== BADGE / TAG ===== */
.sk-tag {
font-family: var(--mono) !important;
font-size: .68rem !important;
font-weight: 600 !important;
padding: 3px 10px !important;
border-radius: 12px !important;
display: inline-block !important;
}
.sk-tag-blue { background: var(--sk-blue-wash) !important; color: var(--sk-blue-deep) !important; }
.sk-tag-green { background: var(--sk-green-wash) !important; color: var(--sk-green-deep) !important; }
/* ===== RESPONSIVE UTILITY ===== */
@media (max-width: 767px) {
.sk-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
.sk-hide-desktop { display: none !important; }
}
/* ==========================================================
BACKGROUNDS, PATTERNS & DECORATION
Merged in from design-assets/backgrounds.css so it actually
loads (that file was never enqueued). Every rule below is
!important because Elementor writes section backgrounds as
inline style on the same element, which beats a plain class.
Apply via Elementor: Advanced -> CSS Classes.
========================================================== */
/* ---- Dark section gradients ----
Set the Elementor section Background to "Classic" with NO colour,
then add the class. Leaving a background colour set will cover this. */
.sk-page .sk-hero-gradient,
.sk-page .sk-hero-gradient > .elementor-background-overlay{
background:radial-gradient(120% 130% at 82% -10%,#0a4fb0 0%,#02245c 42%,#010f2e 100%) !important;
}
.sk-page .sk-compare-gradient{
background:linear-gradient(165deg,#010f2e,#02347a) !important;
}
.sk-page .sk-ai-gradient{
background:radial-gradient(120% 120% at 15% 0%,#0a4fb0,#02245c 45%,#010c26) !important;
}
.sk-page .sk-contact-gradient{
background:radial-gradient(120% 120% at 80% 0%,#0a4fb0,#02245c 46%,#010c26) !important;
}
/* Any of the four dark gradients also needs light text.
Add sk-dark-section alongside, or rely on this: */
/* ---- Hero grid mesh ----
This is an OVERLAY, not a background. It must sit on top of a
gradient, so it needs its own element. Two ways:
(a) put the class on an inner container that spans the section, or
(b) add sk-grid-bg to the gradient section itself and this
::before does the work (preferred - no extra markup). */
.sk-page .sk-grid-bg{position:relative;}
.sk-page .sk-grid-bg::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(120% 90% at 60% 0%,#000 30%,transparent 78%);
mask-image:radial-gradient(120% 90% at 60% 0%,#000 30%,transparent 78%);
}
/* keep real content above the mesh */
.sk-page .sk-grid-bg > .elementor-container,
.sk-page .sk-grid-bg > .e-con-inner,
.sk-page .sk-grid-bg > .elementor-widget-wrap{position:relative;z-index:1;}
/* ---- Glow orbs ----
These were invisible before because they had no width/height.
Sizes are now baked in. Add to an empty HTML/Spacer widget
inside a section that has the gradient class. */
.sk-page .sk-glow{
position:absolute;
border-radius:50%;
filter:blur(30px);
pointer-events:none;
opacity:.55;
width:420px;height:420px; /* was missing - this is why nothing showed */
z-index:0;
}
.sk-page .sk-glow--green{
background:radial-gradient(circle,rgba(98,190,77,.9),transparent 62%);
top:-120px;right:-80px;
}
.sk-page .sk-glow--blue{
background:radial-gradient(circle,rgba(35,120,214,.9),transparent 62%);
bottom:-160px;left:-100px;
}
.sk-page .sk-glow--sm{width:260px;height:260px;}
.sk-page .sk-glow--lg{width:620px;height:620px;}
/* ---- Dashed orbit ring (AI section) ----
Also needs a size. Sits behind content. */
/* .sk-page .sk-orbit{
position:absolute;
border:1px dashed rgba(255,255,255,.18);
border-radius:50%;
pointer-events:none;
width:520px;height:520px;
top:50%;right:-140px;
transform:translateY(-50%);
z-index:0;
}
.sk-page .sk-orbit--sm{width:320px;height:320px;} */
@media(max-width:767px){
.sk-page .sk-glow{width:260px;height:260px;}
/* .sk-page .sk-orbit{width:300px;height:300px;right:-100px;} */
}
@media(prefers-reduced-motion:reduce){
.sk-page .sk-glow{opacity:.2;}
}
/* ==========================================================
PART 2 — THIRD-PARTY WIDGET BRANDING
Post Grid, Essential Addons Data Table, and quiz plugins
output their own markup and their own CSS, which loads after
the theme. Everything here is scoped + !important so the
brand wins. Add the wrapper class in
Advanced -> CSS Classes on the widget.
========================================================== */
/* ----------------------------------------------------------
2A. BLOG / RESOURCE CARDS — Post Grid widget
Wrapper class: sk-post-grid
Works with Elementor Pro Posts/Loop Grid, Essential Addons
Post Grid, and the standalone "Post Grid" plugin.
---------------------------------------------------------- */
.sk-page .sk-post-grid .elementor-post,
.sk-page .sk-post-grid .eael-grid-post-holder,
.sk-page .sk-post-grid article,
.sk-page .sk-post-grid .pg-post{
background:#fff !important;
border:1px solid var(--grid-line) !important;
border-radius:8px !important;
overflow:hidden !important;
box-shadow:none !important;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease !important;
}
.sk-page .sk-post-grid .elementor-post:hover,
.sk-page .sk-post-grid .eael-grid-post-holder:hover,
.sk-page .sk-post-grid article:hover,
.sk-page .sk-post-grid .pg-post:hover{
transform:translateY(-4px);
border-color:var(--sk-blue) !important;
box-shadow:0 16px 36px -18px rgba(3,82,166,.14) !important;
}
/* thumbnail — fixed ratio so rows line up and CLS stays at 0 */
.sk-page .sk-post-grid .elementor-post__thumbnail,
.sk-page .sk-post-grid .eael-entry-media,
.sk-page .sk-post-grid .pg-post-thumb{
aspect-ratio:3 / 2 !important;
overflow:hidden !important;
background:var(--sk-blue-wash) !important;
border-radius:0 !important;
}
.sk-page .sk-post-grid .elementor-post__thumbnail img,
.sk-page .sk-post-grid .eael-entry-media img,
.sk-page .sk-post-grid .pg-post-thumb img{
width:100% !important;height:100% !important;
object-fit:cover !important;display:block !important;
transition:transform .4s ease !important;
}
.sk-page .sk-post-grid .elementor-post:hover img,
.sk-page .sk-post-grid .eael-grid-post-holder:hover img,
.sk-page .sk-post-grid .pg-post:hover img{transform:scale(1.04) !important;}
/* body padding */
.sk-page .sk-post-grid .elementor-post__text,
.sk-page .sk-post-grid .eael-entry-wrapper,
.sk-page .sk-post-grid .pg-post-content{padding:20px 22px 22px !important;}
/* category / term = mono tag pill */
.sk-page .sk-post-grid .elementor-post__badge,
.sk-page .sk-post-grid .eael-entry-meta .eael-grid-post-cat,
.sk-page .sk-post-grid .pg-post-cat{
display:inline-block !important;
font-family:var(--mono) !important;
font-size:.62rem !important;
font-weight:600 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:var(--sk-blue) !important;
background:var(--sk-blue-wash) !important;
border-radius:20px !important;
padding:4px 11px !important;
margin:0 0 10px !important;
position:static !important;
}
/* title — serif blue */
.sk-page .sk-post-grid .elementor-post__title,
.sk-page .sk-post-grid .elementor-post__title a,
.sk-page .sk-post-grid .eael-entry-title,
.sk-page .sk-post-grid .eael-entry-title a,
.sk-page .sk-post-grid .pg-post-title,
.sk-page .sk-post-grid .pg-post-title a{
font-family:var(--display) !important;
font-weight:400 !important;
font-size:1.12rem !important;
line-height:1.25 !important;
color:var(--sk-blue) !important;
margin:0 0 8px !important;
text-decoration:none !important;
}
/* excerpt */
.sk-page .sk-post-grid .elementor-post__excerpt p,
.sk-page .sk-post-grid .eael-grid-post-excerpt p,
.sk-page .sk-post-grid .pg-post-excerpt{
font-family:var(--body) !important;
font-size:.9rem !important;
color:var(--ink-soft) !important;
line-height:1.6 !important;
margin:0 0 14px !important;
}
/* read-more — text link with arrow, NOT a green button */
.sk-page .sk-post-grid .elementor-post__read-more,
.sk-page .sk-post-grid .eael-post-elements-readmore-btn,
.sk-page .sk-post-grid .pg-read-more{
font-family:var(--body) !important;
font-size:.85rem !important;
font-weight:600 !important;
color:var(--sk-blue) !important;
background:none !important;
border:none !important;
padding:0 !important;
text-decoration:none !important;
text-transform:none !important;
}
.sk-page .sk-post-grid .elementor-post__read-more::after,
.sk-page .sk-post-grid .eael-post-elements-readmore-btn::after,
.sk-page .sk-post-grid .pg-read-more::after{
content:" \2192";
transition:transform .15s ease;
display:inline-block;
}
.sk-page .sk-post-grid .elementor-post__read-more:hover,
.sk-page .sk-post-grid .eael-post-elements-readmore-btn:hover,
.sk-page .sk-post-grid .pg-read-more:hover{color:var(--sk-blue-deep) !important;}
/* meta (date / author) — mono, muted */
.sk-page .sk-post-grid .elementor-post__meta-data,
.sk-page .sk-post-grid .eael-entry-meta{
font-family:var(--mono) !important;
font-size:.62rem !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
color:#8a97a8 !important;
}
/* pagination */
.sk-page .sk-post-grid .elementor-pagination a,
.sk-page .sk-post-grid .elementor-pagination span,
.sk-page .sk-post-grid .eael-load-more-button{
font-family:var(--mono) !important;
font-size:.72rem !important;
border:1px solid var(--grid-line) !important;
border-radius:6px !important;
padding:8px 13px !important;
color:var(--sk-blue) !important;
text-decoration:none !important;
}
.sk-page .sk-post-grid .elementor-pagination .current{
background:var(--sk-blue) !important;color:#fff !important;border-color:var(--sk-blue) !important;
}
/* ----------------------------------------------------------
2B. TABLES — Essential Addons Data Table
Wrapper class: sk-ea-table
Matches the .sk-table look: mono uppercase header, blue-wash
row hover, one border colour, horizontal scroll on mobile.
---------------------------------------------------------- */
/*In Power apps page you need to build table desgin start*/
.sk-ea-table table tbody tr:last-child td:first-child {
border-radius: 0 0 0 16px;
overflow: hidden;}
/* Bottom-right corner (last row, last column) */
.sk-ea-table table tbody tr:last-child td:last-child {
border-radius: 0 0 16px 0;
overflow: hidden;}
/* 1st column text color */
.sk-ea-table tbody tr td:first-child .td-content p {
color: #0d2340 !important;}
/* 2nd column text color */
.sk-ea-table tbody tr td:nth-child(2) .td-content p {
color: #333333 !important;
font-weight:400 !important;}
/* 3rd column text color */
.sk-ea-table tbody tr td:nth-child(3) .td-content p {
color: #4a7d3a !important;
font-weight:400 !important;}
.sk-ea-table p{
margin-bottom:0px !important;}
.sk-legacy-case-table p{
margin-bottom:0px !important;}
/*you need to build table desgin end*/
/* power apps page why starknowledge table design start */
/* Header 2nd column (Star Knowledge) */
.sk-ea-table--compare thead tr.table-header th:nth-child(2){
border-left: 2px solid #62be4d !important;
background-color: #62be4d1f !important;
color:#8fe37a !important;}
/* Body - 2nd column */
.sk-ea-table--compare tbody tr td:nth-child(2){
background-color: #62be4d14 !important;
border-left: 2px solid #62be4d66 !important;}
/* 3rd and 4th column text style */
.sk-ea-table--compare tbody tr td:nth-child(3),
.sk-ea-table--compare tbody tr td:nth-child(4) {
color: #93a6c4 !important;
font-weight: 400 !important;}
.sk-ea-table--compare table tbody tr:last-child td:first-child {
border-radius: 0 0 0 16px;
overflow: hidden;}
/* Bottom-right corner (last row, last column) */
.sk-ea-table--compare table tbody tr:last-child td:last-child {
border-radius: 0 0 16px 0;
overflow: hidden;}
/* in powers apps page why starknowledge table design end */
/* Agentic Ai Page Table Design start */
/* Table1: Platforms section tabel start */
/* Table Header */
.sk-ai-platforms-table table thead th {
background-color: #EAF0FA !important;
color: #02407F !important;}
/* First Column */
.sk-ai-platforms-table table tbody tr td:first-child .td-content p {
color: #0352A6 !important;
font-weight: 600 !important;}
/* Second Column */
.sk-ai-platforms-table table tbody tr td:nth-child(2) .td-content p {
color: #4A5B74 !important;
font-weight: 400 !important;}
/* Bottom-left corner */
.sk-ai-platforms-table table tbody tr:last-child td:first-child {
border-radius: 0 0 0 12px;
overflow: hidden;}
/* Bottom-right corner */
.sk-ai-platforms-table table tbody tr:last-child td:last-child {
border-radius: 0 0 12px 0;
overflow: hidden;}
/* Table1: Platforms section tabel end*/
/*table2: match your Goal section table start*/
.sk-ai-goal-table table thead th {
background-color: #EAF0FA !important;
color: #02407F !important;}
/*first column*/
.sk-ai-goal-table table tbody tr td:first-child .td-content p {
color: #0D2340 !important;
font-weight: 400 !important;}
/* Second Column */
.sk-ai-goal-table table tbody tr td:nth-child(2) .td-content p {
color: #0352A6 !important;
font-weight: 600 !important;}
/* Third Column */
.sk-ai-goal-table table tbody tr td:nth-child(3) .td-content p {
font-family: var(--font-mono) !important;
font-size: 0.74rem !important;
color: var(--ink-muted) !important;
letter-spacing: 0.03em !important;}
/* Bottom-left corner */
.sk-ai-goal-table table tbody tr:last-child td:first-child {
border-radius: 0 0 0 12px !important;
overflow: hidden;}
/* Bottom-right corner */
.sk-ai-goal-table table tbody tr:last-child td:last-child {
border-radius: 0 0 12px 0 !important;
overflow: hidden;}
/*table2: match your Goal section table end*/
/*table3: Why Star Knowledge section table start*/
/*table header*/
.sk-ai-why-stark-table table thead th {
background-color: #EAF0FA !important;
color: #02407F !important;}
/*table header second column*/
.sk-ai-why-stark-table table thead th:nth-child(2) {
background-color: #0352A6 !important;
color: #FFFFFF !important;}
/*table body first coulmn*/
.sk-ai-why-stark-table table tbody tr td:first-child .td-content p {
color: #0D2340 !important;
font-weight: 400 !important;}
/*table body second coulmn*/
.sk-ai-why-stark-table table tbody tr td:nth-child(2) {
background-color: #F4F8FF !important;}
.sk-ai-why-stark-table table tbody tr td:nth-child(2) .td-content p {
color: #0D2340 !important;
font-weight: 600 !important;}
/*table body 3rd&4th column */
.sk-ai-why-stark-table table tbody tr td:nth-child(3) .td-content p,
.sk-ai-why-stark-table table tbody tr td:nth-child(4) .td-content p {
color: #8494A8 !important;
font-weight: 400 !important;}
/*table first&last child border radius*/
.sk-ai-why-stark-table table tbody tr:last-child td:first-child {
border-radius: 0 0 0 12px !important;
overflow: hidden;}
.sk-ai-why-stark-table table tbody tr:last-child td:last-child {
border-radius: 0 0 12px 0 !important;
overflow: hidden;}
/*table3: Why Star Knowledge section table end*/
/* Agentic Ai Page Table Design End */
/* mobile: scroll instead of squashing */
@media(max-width:767px){
.sk-page .sk-ea-table .eael-data-table-wrap{overflow-x:auto !important;}
.sk-page .sk-ea-table table.eael-data-table{min-width:640px !important;}
.sk-page .sk-ea-table table.eael-data-table thead th,
.sk-page .sk-ea-table table.eael-data-table tbody td{padding:11px 13px !important;}
}
/* ----------------------------------------------------------
2C. QUIZ PLUGIN
Wrapper class: sk-quiz-plugin
Selectors cover Quiz Maker, HD Quiz, Watu and Forminator
quizzes. Whichever you install, the brand look holds:
white panel, blue-wash selected option, green submit.
---------------------------------------------------------- */
.sk-page .sk-quiz-plugin,
.sk-page .sk-quiz-plugin .quiz_maker,
.sk-page .sk-quiz-plugin .ays-quiz-container,
.sk-page .sk-quiz-plugin .hdq_wrapper,
.sk-page .sk-quiz-plugin .forminator-quiz{
background:#fff !important;
border:1px solid var(--grid-line) !important;
border-radius:14px !important;
padding:32px !important;
font-family:var(--body) !important;
color:var(--ink-body) !important;
box-shadow:0 20px 48px -24px rgba(3,82,166,.12) !important;
max-width:820px;
margin:0 auto;
}
/* question text — serif blue */
.sk-page .sk-quiz-plugin .ays_quiz_question,
.sk-page .sk-quiz-plugin .ays-quiz-question-title,
.sk-page .sk-quiz-plugin .hdq_question,
.sk-page .sk-quiz-plugin .forminator-question,
.sk-page .sk-quiz-plugin h3{
font-family:var(--display) !important;
font-weight:400 !important;
font-size:1.24rem !important;
line-height:1.3 !important;
color:var(--sk-blue) !important;
margin:0 0 16px !important;
}
/* answer options */
.sk-page .sk-quiz-plugin .ays-field label,
.sk-page .sk-quiz-plugin .ays_quiz_answers label,
.sk-page .sk-quiz-plugin .hdq_answers label,
.sk-page .sk-quiz-plugin .forminator-answer label{
display:block !important;
font-family:var(--body) !important;
font-size:.92rem !important;
font-weight:500 !important;
color:#4a5b74 !important;
background:#fff !important;
border:1.5px solid var(--grid-line) !important;
border-radius:10px !important;
padding:12px 16px !important;
margin:0 0 9px !important;
cursor:pointer !important;
transition:border-color .15s ease,background .15s ease,transform .15s ease !important;
text-transform:none !important;
}
.sk-page .sk-quiz-plugin .ays-field label:hover,
.sk-page .sk-quiz-plugin .hdq_answers label:hover,
.sk-page .sk-quiz-plugin .forminator-answer label:hover{
border-color:var(--sk-blue) !important;
transform:translateX(3px);
}
.sk-page .sk-quiz-plugin input:checked + label,
.sk-page .sk-quiz-plugin .ays-field input:checked ~ label,
.sk-page .sk-quiz-plugin label.selected,
.sk-page .sk-quiz-plugin .forminator-answer input:checked + label{
border-color:var(--sk-blue) !important;
background:var(--sk-blue-wash) !important;
color:var(--sk-blue) !important;
font-weight:600 !important;
}
/* progress bar */
.sk-page .sk-quiz-plugin .ays_quiz_progress_bar,
.sk-page .sk-quiz-plugin .hdq_progress,
.sk-page .sk-quiz-plugin progress{
height:8px !important;
border-radius:5px !important;
background:#e2e9f4 !important;
overflow:hidden !important;
border:none !important;
}
.sk-page .sk-quiz-plugin .ays_quiz_progress_bar > div,
.sk-page .sk-quiz-plugin .hdq_progress_bar,
.sk-page .sk-quiz-plugin progress::-webkit-progress-value{
background:linear-gradient(90deg,var(--sk-green),var(--sk-blue)) !important;
border-radius:5px !important;
}
/* buttons — green, brand radius */
.sk-page .sk-quiz-plugin button,
.sk-page .sk-quiz-plugin input[type="submit"],
.sk-page .sk-quiz-plugin .ays_next,
.sk-page .sk-quiz-plugin .ays_finish_quiz,
.sk-page .sk-quiz-plugin .hdq_button,
.sk-page .sk-quiz-plugin .forminator-button{
background:var(--sk-green) !important;
color:#fff !important;
font-family:var(--body) !important;
font-weight:600 !important;
font-size:.92rem !important;
border:none !important;
border-radius:6px !important;
padding:13px 26px !important;
cursor:pointer !important;
text-transform:none !important;
box-shadow:none !important;
transition:background .15s ease,transform .1s ease !important;
width:auto !important;
}
.sk-page .sk-quiz-plugin button:hover,
.sk-page .sk-quiz-plugin input[type="submit"]:hover,
.sk-page .sk-quiz-plugin .ays_next:hover,
.sk-page .sk-quiz-plugin .hdq_button:hover{background:var(--sk-green-deep) !important;}
.sk-page .sk-quiz-plugin button:active{transform:translateY(1px);}
/* secondary / back button — ghost */
.sk-page .sk-quiz-plugin .ays_prev,
.sk-page .sk-quiz-plugin .hdq_back{
background:transparent !important;
color:var(--sk-blue) !important;
border:1px solid var(--sk-blue) !important;
}
.sk-page .sk-quiz-plugin .ays_prev:hover,
.sk-page .sk-quiz-plugin .hdq_back:hover{
background:var(--sk-blue) !important;color:#fff !important;
}
/* result panel — the dark gradient card */
.sk-page .sk-quiz-plugin .ays_quiz_results,
.sk-page .sk-quiz-plugin .hdq_results,
.sk-page .sk-quiz-plugin .forminator-quiz-result{
background:linear-gradient(150deg,#02347a,#0a4fb0) !important;
border-radius:14px !important;
padding:28px !important;
color:#fff !important;
border:none !important;
}
.sk-page .sk-quiz-plugin .ays_quiz_results h1,
.sk-page .sk-quiz-plugin .ays_quiz_results h2,
.sk-page .sk-quiz-plugin .ays_quiz_results h3,
.sk-page .sk-quiz-plugin .hdq_results h3,
.sk-page .sk-quiz-plugin .forminator-quiz-result h3{color:#fff !important;}
.sk-page .sk-quiz-plugin .ays_quiz_results p,
.sk-page .sk-quiz-plugin .hdq_results p{color:#cdddf5 !important;}
@media(max-width:767px){
.sk-page .sk-quiz-plugin{padding:22px !important;border-radius:12px !important;}
}
/* ==========================================================
PART 3 — SCROLL REVEAL
Moved in from the deleted sk-powerapps.css. Driven by
sk-scripts.js, which adds .is-visible when the element
scrolls into view.
Usage: Elementor -> Advanced -> CSS Classes -> "reveal"
(the class is "reveal", NOT "sk-reveal").
========================================================== */
.sk-page .reveal{
opacity:0;
transform:translateY(28px);
transition:opacity .6s ease,transform .6s ease;
will-change:opacity,transform;
}
.sk-page .reveal.is-visible{
opacity:1;
transform:none;
}
/* Never hide content if motion is reduced or JS fails to run. */
@media(prefers-reduced-motion:reduce){
.sk-page .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}
/* Failsafe: if sk-scripts.js does not load, reveal elements would stay
invisible forever. The script adds .sk-js to is not used here,
so instead we only hide when the observer is available. */
.no-js .sk-page .reveal{opacity:1 !important;transform:none !important;}
/* Never hide inside the Elementor editor — you must be able to see and
edit the content while building. */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal{
opacity:1 !important;
transform:none !important;
}
/* ================== Custom css ===================*/
/*post grid extra padding in power apps page*/
.rt-container, .rt-container-fluid
{
padding-right:0px !important;
padding-left:0px !important;
margin-right:0px !important;
margin-left:0px !important;
}
.tpg-el-main-wrapper .post-meta-tags span
{
font-weight:600 !important;}
/* wp-form extra margin in power apps page*/
div#wpforms-2963.wpforms-container-full {
margin: 0 !important;
}
/* all wpforms extra margin remove globally*/
div.wpforms-container-full:not(:empty) {
margin: 0 !important;
padding: 0 !important;
}
/*elememtor title top in power apps page */
.elementor-icon-box-title {
margin-top: 0px !important;
}
/* Breadcrumbs chnage font size*/
.hfe-breadcrumbs a {
font-size: 11px !important;
text-decoration: none !important;
text-transform: uppercase !important;}
/*--- Breadcrumbs alignment*/
/* span.hfe-breadcrumbs-home-icon{
margin:0px !important;} */
/* ===== WPForms Confirmation Message in power apps page ===== */
div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
background: rgba(255, 255, 255, 0.98) !important;
border: none !important;
border-radius: 18px !important;
padding: 34px !important;
color: #333333 !important;
box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6) !important;
margin: 0 auto 24px !important;
box-sizing: border-box;
}
/* header section btn design in mobile view*/
/* Menu CTA */
#menu-item-4020 > a{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 13px 24px !important;
background: #62BE4D !important;
color: #fff !important;
border: 1.5px solid transparent !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
margin-left: 20px !important;
margin-bottom: 20px !important;
margin-top: 10px !important;
}
/* ================== Custom css End===================*/
/* ==========================================================
PART 5 — PHASE 2 TEMPLATE COMPONENTS (v5.0)
----------------------------------------------------------
Added for the case study, blog post, insights index,
contact and 404 templates. Every class here is scoped with
sk- and cannot leak into the wider site.
Build assumption: post templates are built with
THE POST GRID PRO -> Template Builder (Single / Archive),
edited in Elementor Free. No Elementor Pro required.
========================================================== */
/* ---------- 5.1 Article shell: sticky contents rail ---------- */
.sk-article-grid{
display:grid; grid-template-columns:220px 1fr; gap:56px;
align-items:start; max-width:var(--max); margin:0 auto;
}
.sk-toc{ position:sticky; top:106px; }
.sk-toc__label{
font-family:var(--mono); font-size:.66rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
margin-bottom:14px;
}
.sk-toc nav{ display:grid; gap:2px; border-left:1px solid var(--grid-line); }
.sk-toc nav a{
font-size:.87rem; color:var(--ink-soft); text-decoration:none;
padding:7px 0 7px 14px; margin-left:-1px;
border-left:2px solid transparent; transition:color .18s ease;
}
.sk-toc a:hover{ color:var(--sk-blue); }
.sk-toc a.is-active{ color:var(--sk-blue); font-weight:600; border-left-color:var(--sk-blue); }
@media(max-width:1080px){
.sk-article-grid{ grid-template-columns:1fr; gap:0; }
.sk-toc{ display:none; }
}
/* Anchor offset so headings clear the sticky header */
.sk-article h2[id], .sk-article h3[id]{ scroll-margin-top:110px; }
/* ---------- 5.2 Reading progress bar ---------- */
/* Empty HTML widget directly under the header:
*/
/* ===== Sticky Reading Progress ===== */
.sk-progress{
position:fixed;
top:73px !important;
left:0;
width:100%;
height:3px;
background:var(--sk-blue-wash);
z-index:998;
}
.sk-progress > span{
display:block;
width:0;
height:100%;
background:var(--sk-green);
transition:width .08s linear;
}
/* ---------- 5.3 Pull quote (NEW — case study) ---------- */
.sk-pullquote{
margin:44px 0px 20px ; padding:34px 36px; background:var(--paper-raised);
border:1px solid var(--grid-line); border-left:3px solid var(--sk-red);
border-radius:var(--border-radius-s);
}
.sk-pullquote blockquote{
margin:0; font-family:var(--display); font-size:1.55rem; line-height:1.35;
color:var(--sk-blue); letter-spacing:-.005em;
}
.sk-pullquote figcaption{ margin-top:20px; display:flex; align-items:center; gap:14px; }
.sk-pullquote__avatar{
width:44px; height:44px; border-radius:50%; flex-shrink:0;
background:var(--sk-blue-wash); display:grid; place-items:center;
font-family:var(--mono); font-weight:600; font-size:.82rem; color:var(--sk-blue);
object-fit:cover;
}
.sk-pullquote__who{ font-weight:600; color:#0d2340; font-size:.94rem; }
.sk-pullquote__role{
font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-soft); margin-top:3px;
}
@media(max-width:640px){ .sk-pullquote blockquote{ font-size:1.25rem; } }
/* blog page inshort conatiner top-border design*/
.in-short
{
border-top: 3px solid #0352A6 !important; }
/* ---------- 5.4 Engagement facts card (case study hero) ---------- */
.sk-facts{
border:1px solid rgba(255,255,255,.16); border-radius:var(--border-radius-m);
background:rgba(255,255,255,.05); backdrop-filter:blur(6px); padding:26px 28px;
}
.sk-facts dl{ margin:0; display:grid; gap:14px; }
.sk-facts .sk-facts__row{ display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:baseline; }
.sk-facts dt{
font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
text-transform:uppercase; color:#8fb2e0;
}
.sk-facts dd{ margin:0; color:#fff; font-size:.94rem; }
.sk-facts .sk-chip{
font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
text-transform:uppercase; color:#cdeec2; white-space:nowrap;
border:1px solid rgba(98,190,77,.42); border-radius:4px; padding:4px 8px;
}
/* ---------- 5.5 Results band (case study) ---------- */
.sk-results{ display:grid; grid-template-columns:repeat(4,1fr); }
.sk-results > div{ padding:34px 26px; border-left:1px solid var(--grid-line); }
.sk-results > div:first-child{ padding-left:0; border-left:0; }
.sk-results > div:last-child{ padding-right:0; }
.sk-results__num{
font-family:var(--body); font-weight:700; font-size:2.4rem; line-height:1;
color:var(--sk-blue); letter-spacing:-.02em;
}
.sk-results__num--green{ color:var(--sk-green); }
.sk-results__label{ font-size:.9rem; color:var(--ink-soft); margin-top:8px; }
@media(max-width:860px){
.sk-results{ grid-template-columns:1fr 1fr; }
.sk-results > div{ padding:26px 20px; }
.sk-results > div:nth-child(3){ padding-left:0; border-left:0; }
}
@media(max-width:560px){
.sk-results{ grid-template-columns:1fr; }
.sk-results > div{ padding:22px 0; border-left:0; border-top:1px solid var(--grid-line); }
.sk-results > div:first-child{ border-top:0; }
}
/* ---------- 5.6 Author byline + post meta (NEW — blog post) ---------- */
.sk-byline{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.sk-byline__who{ display:flex; align-items:center; gap:12px; }
.sk-byline img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sk-byline__name{ font-weight:600; color:#0d2340; font-size:.94rem; }
.sk-byline__role,
.sk-postmeta{
font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
text-transform:uppercase; color:var(--ink-soft);
}
.sk-byline__rule{ width:1px; height:34px; background:var(--grid-line); }
.sk-postmeta{ display:flex; gap:18px; flex-wrap:wrap; }
@media(max-width:860px){ .sk-byline{ flex-direction:column; align-items:flex-start; } .sk-byline__rule{ display:none; } }
/* ---------- 5.7 Author bio card ---------- */
.sk-authorbio{
display:flex; gap:20px; align-items:flex-start; background:var(--paper-raised);
border:1px solid var(--grid-line); border-radius:var(--border-radius-s); padding:24px;
}
.sk-authorbio img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sk-authorbio__name{ font-family:var(--display); font-size:1.2rem; color:var(--sk-blue); margin-bottom:6px; }
/* ---------- 5.8 "In short" summary + solution callout ---------- */
.sk-summary{
background:var(--paper-raised); border:1px solid var(--grid-line);
border-top:3px solid var(--sk-blue); border-radius:var(--border-radius-s);
padding:24px 28px; margin-bottom:38px;
}
.sk-callout{
background:var(--sk-green-wash); border-radius:var(--border-radius-s);
padding:20px 24px; margin:0 0 18px;
}
.sk-callout__label,
.sk-summary__label{
font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.12em;
text-transform:uppercase; margin-bottom:10px;
}
.sk-callout__label{ color:#3f8f31; }
.sk-summary__label{ color:var(--sk-blue); }
.sk-callout p:last-child, .sk-summary p:last-child{ margin-bottom:0; }
/* ---------- 5.9 Inline promo card (mid-article CTA) ---------- */
/* NOTE: no overflow:hidden on the wrapper — it clips the button.
Round the image cell instead. */
.sk-promo{
display:grid; grid-template-columns:1.25fr .75fr; gap:0;
border:1px solid var(--grid-line); border-radius:12px;
background:var(--paper-raised); margin:40px 0;
}
.sk-promo__body{ padding:30px 32px; }
.sk-promo__media{
background:var(--sk-blue-wash); min-height:200px;
overflow:hidden; border-radius:0 11px 11px 0;
}
.sk-promo__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:860px){
.sk-promo{ grid-template-columns:1fr; }
.sk-promo__media{ border-radius:0 0 11px 11px; }
}
/* ---------- 5.10 Index filter bar (Post Grid front-end filter) ---------- */
/* .sk-filterbar{
background:var(--paper-raised); border-bottom:1px solid var(--grid-line);
position:sticky; top:57px; z-index:50;}
.sk-filterbar__inner{
max-width:var(--max); margin:0 auto; padding:16px 32px;
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
} */
/*---------------- Insigts Page Post Grid Cutsom Design start -------------------*/
/* Insights - Search Bar */
.insights-post-grid .rt-search-filter-wrap .rt-search-input{
background: #fff !important;
border: 1px solid #cfd8e6 !important;
border-radius: 6px !important;
padding: 11px 14px !important;
}
/* Desktop Search Wrapper*/
@media (min-width: 1025px) {
.insights-post-grid .filter-right-wrapper{
width: 25% !important; }
.insights-post-grid .filter-right-wrapper .rt-search-filter-wrap{
width: 100% !important; }
}
/*---------- post card border design when hover-----*/
.insights-post-grid .rt-holder.tpg-post-holder {
border: 1px solid #E0E4EB !important;
transition: all 0.3s ease !important;}
.insights-post-grid .rt-holder.tpg-post-holder:hover {
border:1px solid #0352a6 !important;
transform: translateY(-2px) !important;}
/* drop down selected item background and color*/
.insights-post-grid .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-filter-dropdown-wrap .rt-filter-dropdown .rt-filter-dropdown-item.selected{
background: #0352A6 !important;
color: #FFFFFF !important;}
/* Mobile - Stack Filters & Search */
@media (max-width: 1024px) {
.insights-post-grid .rt-filter-wrap{
display: block !important; }
.insights-post-grid .filter-left-wrapper{
display: block !important;
width: 100% !important; }
.insights-post-grid .rt-filter-dropdown-wrap{
width: 100% !important; }
.insights-post-grid .filter-right-wrapper{
display: block !important;
width: 100% !important;
margin-top:4px; }
.insights-post-grid .rt-search-filter-wrap{
width: 100% !important; }
}
/* No Posts Found Text style */
.insights-post-grid .no_posts_found_text{
background: #FFFFFF !important;
border: 1px solid #CFD8E6 !important;
border-radius: 12px !important;
padding: 56px 32px !important;
color: #0352A6 !important;
font-size: 24px !important;
font-family: var(--display);
text-align: center !important;
margin-top: 10px !important;
margin-bottom: 20px !important;
margin-left: 20px !important;
}
/* ================================== Insights Filter Summary (FIlter Selected Options Dispaly)=========== */
.insights-filter-summary{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin:24px 0;}
.insights-filter-results{
font-family:var(--mono);
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:#666666;}
.insights-filter-chips{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;}
.insights-chip{
display:inline-flex;
align-items:center;
gap:10px;
padding:7px 12px;
border:1px solid #d5e1f4;
border-radius:20px;
background:#eaf0fa;
color:#0352A6;
font-size:12px;
font-family:var(--mono);
letter-spacing:.08em;
text-transform:uppercase;
line-height:1;}
.insights-chip-close{
font-size:16px;
cursor:pointer;}
.insights-clear-all{
color:#555;
text-decoration:underline;
cursor:pointer;
margin-left:8px;}
/*---------------- Insigts Page Post Grid Cutsom Design end -------------------*/
/* ---------- 5.14 Featured index card ---------- */
.sk-featured{
display:grid; grid-template-columns:1.1fr .9fr; gap:0; text-decoration:none;
color:inherit; background:var(--paper-raised); border:1px solid var(--grid-line);
border-radius:12px; margin-bottom:24px; transition:border-color .18s ease, box-shadow .18s ease;
}
.sk-featured:hover{ border-color:var(--sk-blue); box-shadow:0 14px 36px -16px rgba(3,82,166,.14); }
.sk-featured__body{ padding:34px 36px; display:flex; flex-direction:column; justify-content:center; }
.sk-featured__media{ background:var(--sk-blue-wash); min-height:280px; overflow:hidden; border-radius:0 11px 11px 0; }
.sk-featured__media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:980px){
.sk-featured{ grid-template-columns:1fr; }
.sk-featured__media{ border-radius:0 0 11px 11px; min-height:200px; }
}
/* ---------- 5.15 Contact: region tabs + office cards ---------- */
.sk-regiontabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
/* All Tabs Region Tab */
.sk-regiontab .elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title{
font-family: var(--mono) !important;
font-size: .68rem !important;
font-weight: 600 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--sk-blue) !important;
background: var(--paper-raised) !important;
border: 1px solid var(--grid-line) !important;
border-radius: 20px !important;
padding: 9px 18px !important;
}
/* Region tab Active Tab */
.sk-regiontab .elementor-widget-n-tabs .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"]{
background: var(--sk-blue) !important;
color: #fff !important;
border-color: var(--sk-blue) !important;
}
/* tab num color update*/
.tab-num {
opacity: 0.55 !important;
padding-left: 3px !important;
}
.sk-office{
border:1px solid var(--grid-line); border-radius:var(--border-radius-s);
display:flex; flex-direction:column; gap:10px;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sk-office:hover{ transform:translateY(-4px); border-color:var(--sk-blue); box-shadow:0 14px 36px -16px rgba(3,82,166,.12); }
.sk-office__tag{
font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
text-transform:uppercase; color:var(--sk-red);
}
.sk-office address{ font-style:normal; color:var(--ink-soft); font-size:.93rem; line-height:1.6; margin:0; white-space:pre-line; }
.sk-office__map{ margin-top:auto; padding-top:10px; font-size:.86rem; font-weight:600; text-decoration:none; }
/*hero section side card */
.direct-lines {
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important; /* Safari */
}
/*--------conatct hero sides glow------------ */
.contact-hero-glow{
position: absolute !important;
inset: 0 !important;
background: radial-gradient(90% 120% at 88% -20%, rgb(10,79,176) 0%, transparent 58%),
radial-gradient(70% 100% at 8% 110%, rgb(2,64,127) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* timze zones */
/* time zone city name hide*/
.mx-elem-time_zone {
display: none !important;
}
/*time zone time style */
.mx-elem-time {
font-weight: 600 !important;
font-family: var(--mono);
font-size: 1.5rem !important;
color: rgb(123, 160, 212) !important;
letter-spacing: -0.01em !important;
line-height: 1 !important;
text-align: left !important;
}
/* mysuru and lagos time */
.mx-clock-asia-kolkata344 .mx-elem-time,
.mx-clock-africa-lagos733 .mx-elem-time {
color: #FFFFFF !important;
}
/*back to home form section */
.not-sure {
position: absolute !important;
inset: 0 !important;
background: radial-gradient(
80% 120% at 85% 0%,
rgb(10, 79, 176) 0%,
transparent 60%
) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* ---------- 5.16 Contact form field pattern ---------- */
/*---------- the code for forms and targe the wp form fileds correctly start--------*/
div#wpforms-4586.wpforms-container-full {
margin: 0 !important;
}
/* Labels */
.sk-form .wpforms-field-label{
display: block !important;
font-family: var(--mono) !important;
font-size: .64rem !important;
font-weight: 600 !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
color: var(--ink-soft) !important;
margin-bottom: 7px !important;
}
/* Form Fields */
.sk-form input[type="text"],
.sk-form input[type="email"],
.sk-form input[type="tel"],
.sk-form input[type="number"],
.sk-form input[type="url"],
.sk-form input[type="password"],
.sk-form select,
.sk-form textarea{
width: 100% !important;
font-family: var(--body) !important;
font-size: .95rem !important;
color: #0d2340 !important;
background: var(--paper-raised) !important;
border: 1px solid #cfd8e6 !important;
border-radius: 6px !important;
padding: 12px 14px !important;
outline: none !important;
box-sizing: border-box !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
/* Focus State */
.sk-form input:focus,
.sk-form select:focus,
.sk-form textarea:focus{
border-color: var(--sk-blue) !important;
box-shadow: 0 0 0 3px rgba(3,82,166,.14) !important;
}
/* Placeholder */
.sk-form input::placeholder,
.sk-form textarea::placeholder{
color: #8a94a6 !important;
opacity: 1 !important;
}
/*check box label font*/
.sk-form .wpforms-field-label-inline{
font-family: var(--body) !important;
font-size: 14px !important;
color: #666666 !important;}
/* Remove border, outline, and shadow from the checkbox */
.sk-form input[type="checkbox"]{
border-style: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Keep it borderless on hover, focus, checked, and active */
.sk-form input[type="checkbox"]:hover,
.sk-form input[type="checkbox"]:focus,
.sk-form input[type="checkbox"]:checked,
.sk-form input[type="checkbox"]:active{
border-style: none !important;
outline: none !important;
box-shadow: none !important;
}
/*---------- the code for forms and targe the wp form fileds correctly end--------*/
/* ---------- 5.17 404 ---------- */
.sk-404-num{
font-family:var(--mono); font-size:7rem; font-weight:600; line-height:.9;
color:var(--sk-blue-wash); letter-spacing:-.02em; margin-bottom:6px;
}
.sk-linklist a{
display:flex; align-items:center; justify-content:space-between; gap:16px;
text-decoration:none; color:#0d2340; padding:14px 4px;
border-bottom:1px solid var(--grid-line); font-weight:600; font-size:.98rem;
}
.sk-linklist a:last-child{ border-bottom:0; }
.sk-linklist a:hover{ color:var(--sk-blue); }
.sk-linklist a::after{ content:"→"; color:var(--sk-green); }
@media(max-width:640px){ .sk-404-num{ font-size:5rem; } }
/* 404 page side box Most visied links heading hover style */
/*search widget style */
.search-form .search-field {
padding: 14px 46px 14px 16px !important;
border: 1px solid #cfd8e6 !important;
border-radius: 6px;
outline: none;}
.search-form .search-field:focus {
border-color: #0352A6 !important;
box-shadow: 0 0 0 3px rgba(3, 82, 166, .14) !important;
}
/* Desktop */
.search-form .search-field {
width: 190%;}
/* Mobile */
@media (max-width: 767px) {
.search-form .search-field {
width: 120%; }
}
/* search icon add */
.search-form {
position: relative;}
.search-form::after {
content: "";
position: absolute;
top: 50%;
left: 390px;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230352A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat center;
background-size: 18px 18px;
pointer-events: none;
}
/* Mobile */
@media (max-width: 767px) {
.search-form::after {
left: 250px; }
}
.search-form .search-submit {
display: none !important;}
/* ==========================================================
PART 6 — LEGACY POST TYPOGRAPHY (v5.3)
The 500+ posts imported from the live site were each built in
Elementor and carry their own layout. They need no template —
only a typographic lift, applied through a wrapper class so it
cannot leak into the templates' own furniture.
Apply by adding the class to the post wrapper, or site-wide via
a body_class filter keyed on publish date (ask before adding —
if the imported posts already read well, skip it entirely).
REPLACES the v5.1 PART 6 and v5.2 PART 7 blocks, which assumed a
shared Single template. That approach was abandoned once we
confirmed the live site uses saved Elementor page templates.
If you pasted either block, delete it — see HOW-TO-UPDATE.md.
========================================================== */
.sk-legacy-content h1{
font-size:clamp(1.9rem,3.6vw,2.75rem);
line-height:1.14;
letter-spacing:-.015em;
margin:0 0 20px;
max-width:32ch;
}
.sk-legacy-content h2{font-size:1.7rem;margin:44px 0 16px;scroll-margin-top:150px}
.sk-legacy-content h3{font-size:1.28rem;margin:30px 0 12px}
.sk-legacy-content p{margin:0 0 20px;font-size:1.04rem;line-height:1.78;max-width:74ch}
.sk-legacy-content .lead{font-size:1.14rem;line-height:1.7;color:#444;max-width:70ch}
.sk-legacy-content ul,
.sk-legacy-content ol{margin:0 0 20px;padding-left:0;list-style:none;max-width:74ch}
.sk-legacy-content ul li{position:relative;padding-left:26px;margin-bottom:10px}
.sk-legacy-content ul li::before{
content:"";position:absolute;left:2px;top:.62em;
width:7px;height:7px;border-radius:2px;background:var(--brand-green,#62BE4D);
}
.sk-legacy-content ol{counter-reset:sk}
.sk-legacy-content ol li{position:relative;padding-left:32px;margin-bottom:10px;counter-increment:sk}
.sk-legacy-content ol li::before{
content:counter(sk);position:absolute;left:0;top:.05em;
font-family:"JetBrains Mono",ui-monospace,monospace;
font-size:.78rem;font-weight:600;color:var(--brand-blue,#0352A6);
}
.sk-legacy-content img{max-width:100%;height:auto;border-radius:10px}
.sk-legacy-content blockquote{
margin:28px 0;padding:4px 0 4px 22px;
border-left:3px solid var(--brand-green,#62BE4D);
font-family:"DM Serif Display",Georgia,serif;
font-size:1.24rem;line-height:1.42;color:var(--brand-blue,#0352A6);
max-width:70ch;
}
.sk-legacy-content table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.94rem}
.sk-legacy-content th{
font-family:"JetBrains Mono",ui-monospace,monospace;
font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--brand-blue,#0352A6);background:var(--wash-blue,#EAF0FA);
text-align:left;padding:12px 14px;
}
.sk-legacy-content td{padding:12px 14px;border-bottom:1px solid var(--line,#E0E4EB)}
/*-- legacy page related insights category padding -----------*/
.legacy-related-insights .tpg-separate-category.style1.above_title.cat-above-title {
padding-left: 19px !important;
}
/* legacy page related insights cards hover style */
.legacy-related-insights .rt-holder.tpg-post-holder {
border: 1px solid #E0E4EB !important;
transition: all 0.3s ease !important;}
.legacy-related-insights .rt-holder.tpg-post-holder:hover {
border:1px solid #0352a6 !important;
transform: translateY(-2px) !important;}
/* legacy page order list num style */
.list-num {
font-family:"JetBrains Mono",ui-monospace,monospace !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #0352A6 !important;
padding-right: 32px !important;
}
/* ==========================================================
PART 7 — STICKY OFFSET (v5.3)
Every sticky bar reads one value, so a header height change is
a one-line edit. Measure the real header and set it here.
========================================================== */
:root{ --sk-header-h:67px; }
.sk-filterbar,
.sk-tocbar{ position:sticky; top:var(--sk-header-h); z-index:50; }
.sk-toc{ position:sticky; top:calc(var(--sk-header-h) + 70px); }
/* ==========================================================
PART 8 — FOLLOW-THE-SUN CLOCK BAND (v5.4)
Sits inside the dark contact hero. Markup + ticking come
from PART 8 of sk-scripts.js.
========================================================== */
.sk-sunband{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(150px,1fr);
border-top:1px solid rgba(255,255,255,.13);
border-bottom:1px solid rgba(255,255,255,.13);
}
.sk-sunband__c{
padding:20px 22px 22px;
border-left:1px solid rgba(255,255,255,.09);
min-height:96px;
}
.sk-sunband__city{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.58rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;margin-bottom:9px;white-space:nowrap;
}
.sk-sunband__time{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:1.5rem;font-weight:600;letter-spacing:-.01em;
line-height:1;margin-bottom:8px;
font-variant-numeric:tabular-nums;
}
.sk-sunband__st{
display:flex;align-items:center;gap:7px;
font-size:.72rem;color:#8fa6c6;
}
.sk-sunband__dot{
width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
/* Scrolls sideways on narrow screens rather than crushing to 5 slivers. */
@media (max-width:980px){
.sk-sunband{
grid-auto-columns:minmax(132px,1fr);
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.sk-sunband::-webkit-scrollbar{display:none}
}
/* ==========================================================
PART 9 — NEWS: EVENT RECAP TEMPLATE (v5.5)
Everything the `SK News — Event` saved template needs.
Self-contained: does not depend on PART 6, 7 or 8.
Paste at the end of sk-elementor-custom.css, then run
Elementor → Tools → Regenerate CSS & Data.
Design reference: SK-News-Event-Template.html
Build guide: PHASE2-TEMPLATES.md §3c.1
========================================================== */
/* ---- 9.1 Head block: breadcrumb, chips, title, byline ---- */
.sk-news-head{
background:#fff;
border-bottom:1px solid #E0E4EB;
}
.sk-news-crumb{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
color:#666;
display:flex;flex-wrap:wrap;gap:8px;
margin-bottom:24px;
}
.sk-news-crumb a{color:#666;text-decoration:none}
.sk-news-crumb a:hover{color:#0352A6}
.sk-news-crumb .sk-current{color:#0352A6}
/* Chip row above the headline. Three flavours: category, topic, soft. */
.sk-news-chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.sk-news-chips .sk-chip{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
border-radius:20px;padding:7px 14px;white-space:nowrap;
color:#0352A6;background:#EAF0FA;border:1px solid transparent;
}
.sk-news-chips .sk-chip--topic{color:#3f8f31;background:#EFF8EC}
.sk-news-chips .sk-chip--soft{color:#666;background:#F5F7FA;border-color:#E0E4EB;padding:6px 14px}
.sk-news-head h1{
font-size:clamp(1.95rem,3.8vw,2.95rem);
line-height:1.13;margin:0 0 18px;max-width:22ch;
}
.sk-news-standfirst{
font-size:1.12rem;line-height:1.7;color:#555;
max-width:62ch;margin:0 0 26px;
}
/* Byline strip. Keep it — Star Knowledge news posts credit an author. */
.sk-byline{
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
border-top:1px solid #E0E4EB;padding-top:20px;
}
.sk-byline__who{display:flex;align-items:center;gap:12px}
.sk-byline__avatar{
width:42px;height:42px;border-radius:50%;background:#EAF0FA;flex-shrink:0;
display:grid;place-items:center;
font-family:'JetBrains Mono',ui-monospace,monospace;
color:#0352A6;font-weight:600;font-size:.78rem;
overflow:hidden;
}
.sk-byline__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sk-byline__name{font-weight:600;color:#0d2340;font-size:.92rem}
.sk-byline__role{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-top:2px;
}
.sk-byline__rule{width:1px;height:32px;background:#E0E4EB}
.sk-byline__meta{
font-family:'JetBrains Mono',ui-monospace,monospace;
display:flex;gap:18px;flex-wrap:wrap;
font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#666;
}
.sk-byline__share{margin-left:auto;display:flex;gap:8px}
.sk-byline__share a{
width:32px;height:32px;display:grid;place-items:center;
border:1px solid #E0E4EB;border-radius:6px;
color:#0352A6;text-decoration:none;font-size:.76rem;font-weight:700;
transition:border-color .18s ease,background .18s ease;
}
.sk-byline__share a:hover{border-color:#0352A6;background:#EAF0FA}
/* ---- 9.2 Hero image ---- */
/* The half-white / half-paper split behind the rounded hero image. */
.sk-news-hero-band{background:linear-gradient(#fff 50%,#F5F7FA 50%)}
.sk-news-hero-img img{
display:block;width:100%;height:420px;object-fit:cover;
border-radius:14px;border:1px solid #E0E4EB;background:#EAF0FA;
}
/* ---- 9.3 Body grid: article + sticky rail ---- */
.sk-news-article-grid{
display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start;
}
.sk-news-body{font-size:1.04rem;line-height:1.78;color:#333;max-width:68ch}
.sk-news-body > p:first-child{font-size:1.1rem;color:#0d2340}
.sk-news-body p{margin:0 0 18px}
.sk-news-body ul{margin:0 0 18px;padding:0;list-style:none}
.sk-news-body ul li{position:relative;padding-left:26px;margin-bottom:10px}
.sk-news-body ul li::before{
content:"";position:absolute;left:2px;top:.62em;
width:7px;height:7px;border-radius:2px;background:#62BE4D;
}
/* Numbered section headings — the service-page motif, used here in place of
the emoji headings on the current live posts. Author writes:
Our team at the starting line
*/
.sk-news-body h2.sk-num-head{
display:flex;align-items:center;gap:14px;
font-size:1.5rem;margin:38px 0 16px;
}
.sk-news-body h2.sk-num-head::before{
content:attr(data-n);
flex-shrink:0;
width:30px;height:30px;border-radius:50%;
background:#EAF0FA;color:#0352A6;
display:grid;place-items:center;
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.76rem;font-weight:600;
}
/* ---- 9.4 "Moment of the day" card ---- */
.sk-moment{
display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:center;
background:#fff;border:1px solid #E0E4EB;border-left:3px solid #62BE4D;
border-radius:8px;padding:22px 26px;margin:0 0 20px;
}
.sk-moment__img{border-radius:8px;overflow:hidden;background:#EAF0FA;height:130px}
.sk-moment__img img{width:100%;height:100%;object-fit:cover;display:block}
.sk-moment__label{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
color:#3f8f31;margin-bottom:8px;
}
.sk-moment__title{
font-family:'DM Serif Display',Georgia,serif;
font-size:1.3rem;color:#0352A6;line-height:1.25;margin-bottom:8px;
}
.sk-moment p{margin:0;color:#666;font-size:.94rem}
/* ---- 9.5 Photo gallery ---- */
.sk-news-gallery-label{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
color:#666;margin:44px 0 14px;
}
/* Works on a plain div of images AND on Elementor's Gallery widget. */
.sk-news-gallery,
.sk-news-gallery .elementor-image-gallery .gallery{
display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px;
}
.sk-news-gallery .gallery-item{margin:0!important;width:auto!important;float:none!important}
.sk-news-gallery img{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:8px;border:1px solid #E0E4EB;background:#EAF0FA;
transition:transform .2s ease,box-shadow .2s ease;
}
.sk-news-gallery a:hover img{
transform:translateY(-3px);
box-shadow:0 14px 36px -16px rgba(3,82,166,.18);
}
.sk-news-gallery .gallery-caption{display:none}
/* ---- 9.6 Tag row ---- */
.sk-tagrow{margin-top:40px;padding-top:24px;border-top:1px solid #E0E4EB}
.sk-tagrow__label{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
color:#666;margin-bottom:12px;
}
.sk-tagrow__list{display:flex;gap:8px;flex-wrap:wrap}
.sk-tagrow__list a{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.68rem;text-decoration:none;color:#666;
background:#fff;border:1px solid #E0E4EB;border-radius:20px;padding:6px 13px;
transition:border-color .18s ease,color .18s ease;
}
.sk-tagrow__list a:hover{border-color:#0352A6;color:#0352A6}
/* ---- 9.7 Sticky rail ---- */
.sk-news-rail{position:sticky;top:106px;display:grid;gap:18px}
.sk-news-rail .sk-rail-card{
background:#fff;border:1px solid #E0E4EB;border-radius:8px;padding:22px;
}
.sk-news-rail .sk-rail-card--green{background:#EFF8EC;border-color:#d3ead0}
.sk-rail-card__label{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
color:#666;margin-bottom:16px;
}
.sk-rail-card--green .sk-rail-card__label{color:#3f8f31;margin-bottom:10px}
.sk-rail-card--green p{margin:0 0 14px;font-size:.92rem;color:#3d5c36}
/* Fact list inside the rail: label above value. */
.sk-factlist{display:grid;gap:14px;font-size:.9rem}
.sk-factlist dt{
font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
color:#96a3b5;margin-bottom:3px;
}
.sk-factlist dd{margin:0;color:#0d2340;font-weight:600}
.sk-factlist dd a{font-weight:600}
/* ---- 9.8 Responsive ---- */
@media (max-width:1080px){
.sk-news-article-grid{grid-template-columns:1fr}
.sk-news-rail{position:static}
}
@media (max-width:860px){
.sk-news-gallery,
.sk-news-gallery .elementor-image-gallery .gallery{grid-template-columns:repeat(2,1fr)}
.sk-moment{grid-template-columns:1fr}
.sk-moment__img{height:200px}
.sk-byline{flex-direction:column;align-items:flex-start}
.sk-byline__share{margin-left:0}
.sk-byline__rule{display:none}
.sk-news-hero-img img{height:260px}
}
@media (max-width:560px){
.sk-news-head h1{font-size:1.8rem}
.sk-news-body h2.sk-num-head{font-size:1.3rem}
}
/* ---- 9.9 Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
.sk-news-gallery img,
.sk-byline__share a,
.sk-tagrow__list a{transition:none}
.sk-news-gallery a:hover img{transform:none}
}
/* ============================================================
PHASE 4 ADDENDUM — industry page layouts
Append to sk-elementor-custom.css AFTER the existing content.
These are the industry pages' own section layouts. They deliberately
do NOT reuse the service-page card-grid vocabulary: challenges are
hairline rows, services are full-width bands, outcomes are a ledger,
capabilities are tag groups, delivery is a horizontal band, client
work is one lead case plus two supporting.
Approved set: hero 0A, challenges 1B, services 2A, outcomes 4B,
capabilities 5A, delivery 6A, client work 8A.
No interactive tools here. Quizzes and estimators belong to the
service pages, not these.
============================================================ */
/* ---------- A. HERO DECORATION ----------
Values copied from the approved Power Apps hero
(SK-WordPress-Handoff/reference/sk-powerapps-original.css, .hero-shapes
and .hero h1 .highlight). Two deliberate adaptations, both because the
industry hero is dark where the approved one is light:
- orbit and dot colours are white/green on dark rather than blue on white
- the underline is solid green, not green at .2, which would go grey-teal
composited over the hero gradient
Geometry, sizes, opacities and timings are otherwise the reference values.
The reference explicitly removes the sparkle star, so there is no star here. */
.sk-hero__deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sk-orbit{position:absolute;border-radius:50%;border:1.2px dashed rgba(255,255,255,.09)}
.sk-orbit--1{width:420px;height:420px;top:-100px;right:-60px;animation:sk-orbit-spin 40s linear infinite}
.sk-orbit--2{width:260px;height:260px;top:-20px;right:40px;border-color:rgba(98,190,77,.16);
animation:sk-orbit-spin 28s linear infinite reverse}
.sk-dot{position:absolute;border-radius:50%}
.sk-dot--1{width:6px;height:6px;background:var(--sk-green);top:22%;right:14%;opacity:.5;animation:sk-float-y 5s ease-in-out infinite}
.sk-dot--2{width:4px;height:4px;background:#fff;top:68%;right:42%;opacity:.3;animation:sk-float-y 7s ease-in-out infinite 1s}
.sk-dot--3{width:8px;height:8px;background:var(--sk-green);bottom:18%;left:3%;opacity:.2;animation:sk-float-y 6s ease-in-out infinite 2s}
.sk-dot--4{width:5px;height:5px;background:var(--sk-red);top:12%;left:18%;opacity:.25;animation:sk-float-y 8s ease-in-out infinite .5s}
/* Animated green underline under the hero keyword — draws in on load */
.sk-hero h1 .sk-hl{position:relative;display:inline;white-space:nowrap}
.sk-hero h1 .sk-hl::after{
content:"";position:absolute;
left:0;right:0;bottom:-2px;height:6px;
background:var(--sk-green);
border-radius:3px;
animation:sk-underline-draw .8s ease-out forwards;
transform-origin:left;
}
@keyframes sk-orbit-spin{to{transform:rotate(360deg)}}
@keyframes sk-float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sk-underline-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---------- B. HERO 0A — centred statement ----------
The proof figures live in the trust bar directly below the hero (it is the
brief's own Section 2), so the hero does not repeat them. */
.sk-hero__inner--statement{grid-template-columns:1fr;max-width:900px;align-items:start}
/* ---------- C. NEED MATRIX ---------- */
.sk-matrix{width:100%;border-collapse:collapse;background:#fff;
border:1px solid var(--grid-line);border-radius:var(--r-panel);overflow:hidden}
.sk-matrix thead th{text-align:left;padding:15px 22px;font-family:var(--font-mono);font-size:.66rem;
letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--sk-blue-deep);
background:var(--sk-blue-wash);border-bottom:1px solid var(--grid-line)}
.sk-matrix td{padding:16px 22px;border-bottom:1px solid var(--grid-line-soft);
font-size:.92rem;color:var(--ink-soft);line-height:1.6;vertical-align:top}
.sk-matrix tr:last-child td{border-bottom:0}
.sk-matrix tr:hover td{background:var(--sk-blue-wash-2)}
.sk-matrix .sk-need{color:var(--sk-blue-ink);font-weight:500;font-style:italic}
.sk-matrix .sk-build{color:var(--sk-blue);font-weight:600}
/* ---------- D. CHALLENGES 1B — hairline index rows ---------- */
.sk-idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--grid-line)}
.sk-idx__row{display:grid;grid-template-columns:64px minmax(0,.9fr) minmax(0,1.5fr);gap:24px;
align-items:baseline;padding:20px 12px;border-bottom:1px solid var(--grid-line);
transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.sk-idx__row:hover{background:var(--sk-blue-wash);padding-left:22px}
.sk-idx__n{font-family:var(--font-mono);font-size:.76rem;font-weight:700;color:var(--sk-red)}
.sk-idx__t{font-family:var(--font-display);font-weight:400;font-size:1.22rem;color:var(--sk-blue);margin:0;line-height:1.25}
.sk-idx__b{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.7}
/* ---------- E. SERVICES 2A — full-width bands ---------- */
.sk-bands{border-top:1px solid var(--grid-line)}
.sk-band{display:grid;grid-template-columns:56px minmax(0,1.25fr) minmax(0,.9fr);gap:26px;
align-items:start;padding:24px 14px;border-bottom:1px solid var(--grid-line);
transition:background var(--dur) var(--ease)}
.sk-band:hover{background:var(--sk-blue-wash-2)}
.sk-band__n{font-family:var(--font-mono);font-size:.84rem;font-weight:700;color:var(--sk-green);padding-top:4px}
.sk-band__main h3{font-family:var(--font-display);font-weight:400;font-size:1.34rem;color:var(--sk-blue);margin:0 0 9px;line-height:1.25}
.sk-band__main p{margin:0;font-size:.94rem;color:var(--ink-soft);line-height:1.7}
.sk-band__side{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.sk-chip{font-family:var(--font-mono);font-size:.58rem;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;background:var(--sk-blue-wash);color:var(--sk-blue);
border-radius:var(--r-pill);padding:4px 9px}
.sk-chip a{color:inherit;text-decoration:none}
.sk-chip:hover{background:var(--sk-blue);color:#fff}
/* ---------- F. OUTCOMES 4B — two-column ledger ---------- */
.sk-ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.sk-ledger__row{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:16px 0;
border-bottom:1px solid var(--grid-line)}
.sk-ledger__n{font-family:var(--font-mono);font-size:.66rem;font-weight:700;color:var(--sk-green);padding-top:3px}
.sk-ledger__t{grid-column:2;font-family:var(--font-display);font-weight:400;font-size:1.08rem;
color:var(--sk-blue);margin:0 0 5px;line-height:1.3}
.sk-ledger__b{grid-column:2;margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.65}
/* ---------- G. CAPABILITIES 5A — tag groups ---------- */
.sk-capcols{columns:2;column-gap:40px}
.sk-cap{break-inside:avoid;margin-bottom:24px}
.sk-cap h3{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--sk-blue-deep);margin:0 0 10px;padding-bottom:7px;
border-bottom:1px solid var(--grid-line)}
.sk-cap__tags{display:flex;flex-wrap:wrap;gap:6px}
.sk-tagpill{font-size:.78rem;color:var(--ink-soft);background:var(--paper);
border:1px solid var(--grid-line);border-radius:4px;padding:4px 9px}
/* ---------- H. DELIVERY 6A — horizontal stepped band ---------- */
.sk-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.sk-steps::before{content:"";position:absolute;top:17px;left:8%;right:8%;height:2px;
background:linear-gradient(90deg,var(--sk-blue),var(--sk-green))}
.sk-steps__col{position:relative;padding:0 14px}
.sk-steps__marker{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:#fff;
border:2px solid var(--sk-blue);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sk-steps__marker span{font-family:var(--font-mono);font-size:.76rem;font-weight:700;color:var(--sk-blue)}
.sk-steps__col h3{font-family:var(--font-display);font-weight:400;font-size:1.02rem;color:var(--sk-blue);
margin:0 0 8px;line-height:1.25}
.sk-steps__col p{margin:0;font-size:.82rem;color:var(--ink-soft);line-height:1.6}
/* ---------- I. CLIENT WORK 8A — lead case + supporting ---------- */
.sk-leadcase{display:grid;grid-template-columns:1.3fr .7fr;gap:20px}
.sk-leadcase__main{background:var(--sk-blue);color:#fff;border-radius:var(--r-panel);padding:34px}
.sk-lc__lab{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--sk-green)}
.sk-leadcase__main h3{font-family:var(--font-display);font-weight:400;font-size:1.72rem;color:#fff;
margin:14px 0 18px;line-height:1.2}
.sk-leadcase__main .sk-lc__res{font-family:var(--font-display);font-size:1.22rem;color:#bfe3b2;
margin:0 0 16px;line-height:1.4}
.sk-leadcase__main .sk-lc__rel{font-size:.92rem;color:#d6e4f7;line-height:1.7;margin:0}
.sk-leadcase__side{display:flex;flex-direction:column;gap:20px}
.sk-lc__small{background:#fff;border:1px solid var(--grid-line);border-radius:var(--r-card);padding:22px;flex:1;
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.sk-lc__small:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--sk-blue)}
.sk-lc__small h4{font-family:var(--font-display);font-weight:400;font-size:1.06rem;color:var(--sk-blue);
margin:0 0 10px;line-height:1.3}
.sk-lc__small .sk-lc__res{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.65}
/* ---------- J. STAGGERED REVEAL ---------- */
.sk-stagger > .sk-reveal:nth-child(1){transition-delay:0s}
.sk-stagger > .sk-reveal:nth-child(2){transition-delay:.06s}
.sk-stagger > .sk-reveal:nth-child(3){transition-delay:.12s}
.sk-stagger > .sk-reveal:nth-child(4){transition-delay:.18s}
.sk-stagger > .sk-reveal:nth-child(5){transition-delay:.24s}
.sk-stagger > .sk-reveal:nth-child(6){transition-delay:.3s}
.sk-stagger > .sk-reveal:nth-child(7){transition-delay:.36s}
.sk-stagger > .sk-reveal:nth-child(8){transition-delay:.42s}
.sk-stagger > .sk-reveal:nth-child(9){transition-delay:.48s}
.sk-stagger > .sk-reveal:nth-child(n+10){transition-delay:.54s}
/* ---------- K. RESPONSIVE ----------
Collapse in two steps. Multi-column grids drop to two columns first and only
reach a single column below 700px, so the layout structure survives at
typical laptop and tablet widths instead of flattening at the first break. */
@media(max-width:1080px){
.sk-steps{grid-template-columns:repeat(3,1fr);gap:26px 0}
.sk-steps::before{display:none}
.sk-idx__row,.sk-band{grid-template-columns:44px 1fr}
.sk-idx__t,.sk-idx__b,.sk-band__side{grid-column:2}
.sk-leadcase{grid-template-columns:1fr}
}
@media(max-width:700px){
.sk-steps{grid-template-columns:1fr}
.sk-ledger{grid-template-columns:1fr}
.sk-capcols{columns:1}
}
@media(max-width:980px){
/* orbits and dots would collide with the stacked hero copy */
.sk-hero__deco{display:none}
}
@media(max-width:640px){
.sk-matrix thead{display:none}
.sk-matrix tr{display:block;border-bottom:1px solid var(--grid-line);padding:6px 0}
.sk-matrix td{display:block;border:0;padding:6px 18px}
.sk-matrix td::before{content:attr(data-label);display:block;font-family:var(--font-mono);
font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-ghost);margin-bottom:3px}
}
@media(prefers-reduced-motion:reduce){
.sk-orbit,.sk-dot{animation:none!important}
.sk-hero h1 .sk-hl::after{animation:none;transform:scaleX(1)}
.sk-stagger > .sk-reveal{transition-delay:0s!important}
}
/* ============================================================
COMPANY PAGE LAYOUTS
Approved set: hero A1 (centred statement, shared with the industry
pages), differentiators B2 (large-type list), core values C2
(full-width rows), customer rights D1 (manifesto), engagement models
E1 (comparison table), value proposition F1 (three columns),
PM practices G2 (checklist), image sections H1 (split).
============================================================ */
/* ---------- M. B2 — large-type list ---------- */
/* =========================BIG LIST - ELEMENTOR========================= */
.sk-bigli .elementor-icon-list-items {
list-style: none; margin: 0;padding: 0;width: 100%;border-top: 1px solid var(--grid-line);}
.sk-bigli .elementor-icon-list-item {
display: block !important; width: 100%; box-sizing: border-box; margin: 0 !important; padding: 16px 6px;
border-bottom: 1px solid var(--grid-line); font-family: var(--font-display); font-size: 1.5rem; color: var(--sk-blue); line-height: 1.3;
transition:
padding-left 0.22s cubic-bezier(.2,.7,.2,1),
color 0.22s cubic-bezier(.2,.7,.2,1);
}
.sk-bigli .elementor-icon-list-text {
display: block; width: 100%; min-width: 0; font-family: var(--font-display); font-size: inherit;
color: inherit; line-height: inherit; white-space: normal !important; overflow-wrap: break-word;
}
/* Number */
.sk-bigli .elementor-icon-list-text > span {
display: inline-block; margin-right: 22px; padding-right: 0 !important;
font-family: var(--font-mono); font-size: .72rem; font-weight: 700; line-height: 1;
color: var(--sk-red) !important; white-space: nowrap; vertical-align: baseline;
}
/* Hover */
.sk-bigli .elementor-icon-list-item:hover {
padding-left: 18px; color: var(--sk-blue-deep);
}
/* ===TABLET======== */
@media (max-width: 1080px) {
.sk-bigli .elementor-icon-list-item {
font-size: 1.28rem; }
}
/* === MOBILE ========================= */
@media (max-width: 700px) {
.sk-bigli .elementor-icon-list-item {
font-size: 1.14rem;
padding: 14px 6px;}
.sk-bigli .elementor-icon-list-text {
padding-left: 42px;
box-sizing: border-box;}
.sk-bigli .elementor-icon-list-text > span {
margin-left: -32px;
margin-right: 14px;
font-size: .68rem; }
.sk-bigli .elementor-icon-list-item:hover {
padding-left: 12px;}
}
/* ====PRINT======== */
@media print {
.sk-bigli .elementor-icon-list-item:hover {
padding-left: 6px; }
.sk-slot { display: none;}
}
/* ---------- N. C2 — full-width value rows ---------- */
.sk-rows{border-top:1px solid var(--grid-line)}
.sk-rows__row{display:grid;grid-template-columns:.42fr .58fr;gap:36px;padding:24px 8px;
border-bottom:1px solid var(--grid-line);align-items:start}
.sk-rows__l{display:flex;gap:16px;align-items:baseline}
.sk-rows__n{font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:var(--sk-green)}
.sk-rows__l h3{font-family:var(--font-display);font-weight:400;font-size:1.62rem;color:var(--sk-blue);margin:0;line-height:1.15}
.sk-rows__row p{margin:0;font-size:.96rem;color:var(--ink-soft);line-height:1.75}
/* ---------- O. D1 — manifesto ---------- */
.sk-manifesto{list-style:none;margin:0;padding:0}
.sk-manifesto li{display:grid;grid-template-columns:74px 1fr;gap:20px;align-items:baseline;
padding:20px 0;border-bottom:1px solid var(--grid-line)}
.sk-manifesto li span{font-family:var(--font-display);font-size:2rem;color:var(--sk-blue-wash);line-height:1}
.sk-manifesto li p{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.32rem;
color:var(--sk-blue);line-height:1.4}
/* ---------- P. F1 — three-column value proposition ---------- */
.sk-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--grid-line);border:1px solid var(--grid-line)}
.sk-three__col{background:#fff;padding:28px 24px}
.sk-three__col--own{background:var(--sk-blue-wash-2)}
.sk-three__h{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--sk-blue-deep);margin:0 0 16px;padding-bottom:9px;
border-bottom:1px solid var(--grid-line)}
.sk-three__col ul{list-style:none;margin:0;padding:0}
.sk-three__col li{position:relative;padding:8px 0 8px 18px;font-size:.9rem;color:var(--ink-soft);
line-height:1.6;border-bottom:1px solid var(--grid-line-soft)}
.sk-three__col li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;
border-radius:50%;background:var(--sk-green)}
.sk-three__col li:last-child{border-bottom:0}
/* ---------- Q. G2 — checklist ---------- */
.sk-checkl{columns:2;column-gap:40px}
.sk-checkl__row{break-inside:avoid;display:grid;grid-template-columns:26px 1fr;gap:14px;
align-items:start;padding:12px 0;border-bottom:1px solid var(--grid-line-soft)}
.sk-checkl__row svg{width:20px;height:20px;color:var(--sk-green);margin-top:2px}
.sk-checkl__row p{margin:0;font-size:.94rem;color:var(--ink-body);line-height:1.65}
/* ---------- R. H1 — image + content split ---------- */
.sk-imgsplit{display:grid;grid-template-columns:1fr 1fr;gap:0;
border:1px solid var(--grid-line);border-radius:var(--r-card);overflow:hidden}
.sk-imgsplit--flip .sk-imgsplit__media{order:2}
.sk-imgsplit__media{min-height:340px;background:var(--sk-blue-wash);padding:14px}
.sk-imgsplit__media img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.sk-imgsplit__body{padding:38px 36px;display:flex;flex-direction:column;gap:14px;
align-items:flex-start;justify-content:center;background:#fff}
.sk-imgsplit__body h3{font-family:var(--font-display);font-weight:400;font-size:1.9rem;
color:var(--sk-blue);margin:0;line-height:1.15}
.sk-imgsplit__body p{margin:0;font-size:.96rem;color:var(--ink-soft);line-height:1.75}
/* placeholder until real photography is supplied — delete with the div */
.sk-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
width:100%;height:100%;min-height:220px;padding:26px;text-align:center;
background:var(--sk-blue-wash);border:1px dashed #b9cdea;border-radius:6px;color:#7e9bc4}
.sk-slot svg{width:30px;height:30px;opacity:.75}
.sk-slot__lab{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--sk-blue)}
.sk-slot__note{font-size:.78rem;line-height:1.6;color:#7e9bc4;max-width:38ch}
/* ---------- S. COMPANY RESPONSIVE ---------- */
@media(max-width:1080px){
.sk-three{grid-template-columns:1fr 1fr}
.sk-rows__row{grid-template-columns:.46fr .54fr;gap:24px}
}
@media(max-width:700px){
.sk-three,.sk-rows__row,.sk-imgsplit{grid-template-columns:1fr}
.sk-imgsplit--flip .sk-imgsplit__media{order:0}
.sk-checkl{columns:1}
.sk-manifesto li{grid-template-columns:52px 1fr}
.sk-manifesto li p{font-size:1.08rem}
}
/* ---------- L. PRINT ---------- */
@media print{
.sk-hero__deco{display:none}
.sk-idx__row:hover,.sk-band:hover{background:none}
.sk-leadcase__main{background:#fff!important;color:var(--ink-body)!important;border:1px solid var(--grid-line)}
.sk-leadcase__main h3,.sk-leadcase__main .sk-lc__res{color:var(--sk-blue)!important}
.sk-leadcase__main .sk-lc__rel,.sk-lc__lab{color:var(--ink-soft)!important}
}