/* Design tokens are centralized in assets/css/style.css */
/* ════════════════════════════════════════
RESET
════════════════════════════════════════ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background: var(--color-bg);
font-family: var(--font-main);
color: var(--color-white);
overflow-x: hidden;
padding-top: 0;
}
/* ── Global: never underline any link ── */
a,
a:hover,
a:focus,
a:visited,
a:active {
text-decoration: none !important;
}
/* ═══════════════════════════════════════════════════════════════
ALIGNMENT FIX — Unified horizontal rhythm for ORA Technology
Add this AFTER all other stylesheets (last in )
or paste at the bottom of style.css
Strategy:
• One CSS custom property --site-max = max content width
• One CSS custom property --site-px = horizontal page padding
• Every section's inner wrapper gets a shared .section-inner
utility OR we override each section directly.
═══════════════════════════════════════════════════════════════ */
/* ── TOKENS ── */
:root {
--site-max: 1200px; /* max content width across ALL sections */
--site-px: clamp(1.25rem, 5vw, 3.5rem); /* responsive side padding */
}
/* ══════════════════════════════════════════════════════════════
SHARED INNER-WRAPPER UTILITY
Add class="section-inner" to any new section's container
to automatically get correct alignment.
══════════════════════════════════════════════════════════════ */
.section-inner {
width: 100%;
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-px);
padding-right: var(--site-px);
}
/* ══════════════════════════════════════════════════════════════
1. STATS SECTION (#page → .stats-grid)
══════════════════════════════════════════════════════════════ */
.stats-grid {
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-px);
padding-right: var(--site-px);
/* keep vertical padding as-is */
padding-top: 7rem;
}
/* ══════════════════════════════════════════════════════════════
2. TEXT REVEAL SECTION (.text)
══════════════════════════════════════════════════════════════ */
.text {
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
/* replace the hard 12rem side padding with the token */
padding-left: var(--site-px);
padding-right: var(--site-px);
/* keep vertical padding */
padding-top: 5rem;
padding-bottom: 5rem;
/* section itself is full-width — apply bg on a wrapper if needed */
width: 100%;
box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════
3. WHAT WE DO SECTION (.what-we-do-container)
══════════════════════════════════════════════════════════════ */
.what-we-do-container {
max-width: var(--site-max);
padding-left: var(--site-px);
padding-right: var(--site-px);
/* keep vertical padding */
padding-top: 6rem;
padding-bottom: 6rem;
}
/* ══════════════════════════════════════════════════════════════
4. BLOG SECTION (.blog-container / .blog-section .container)
══════════════════════════════════════════════════════════════ */
.blog-container,
.blog-section .container {
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-px);
padding-right: var(--site-px);
}
/* ══════════════════════════════════════════════════════════════
5. FAQ SECTION (.faq-container)
══════════════════════════════════════════════════════════════ */
.faq-container {
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-px);
padding-right: var(--site-px);
}
.faq-read-more {
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-px);
padding-right: var(--site-px);
padding-top: 3rem;
}
/* ══════════════════════════════════════════════════════════════
6. WORK WITH US SECTION (.work-section .container)
══════════════════════════════════════════════════════════════ */
.work-section .container {
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-px);
padding-right: var(--site-px);
}
/* ══════════════════════════════════════════════════════════════
8. NAVBAR (nav)
Keep the nav items aligned with the page content
══════════════════════════════════════════════════════════════ */
nav {
/* nav is already fixed/full-width; just align its inner content */
padding-left: var(--site-px);
padding-right: var(--site-px);
/* keep whatever max-width the nav uses, or constrain its content: */
box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════
9. CAROUSEL PANEL (.carousel-inner)
══════════════════════════════════════════════════════════════ */
/* Carousel marquee spans full-width intentionally — no change needed.
Only the label needs to respect the max-width column. */
.carousel-label {
max-width: var(--site-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--site-px);
padding-right: var(--site-px);
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE OVERRIDES
The token --site-px already clamps itself, but we also
tighten a couple of section-specific overrides that were
set with hard values in the original media queries.
══════════════════════════════════════════════════════════════ */
/* Tablet */
@media (max-width: 900px) {
.text {
/* was hardcoded to 3rem 2rem — now uses the token */
padding-top: 3rem;
padding-bottom: 3rem;
}
.faq-read-more {
padding-top: 2.5rem;
}
.stats-grid {
padding-top: 6rem;
padding-bottom: 8rem;
}
}
/* Mobile */
@media (max-width: 600px) {
.text {
padding-top: 2rem;
padding-bottom: 2rem;
}
.stats-grid {
padding-top: 5rem;
padding-bottom: 6rem;
}
.faq-read-more {
padding-top: 2rem;
}
}
/* ═══════════════════════════════════════════════════════════════
ALIGNMENT FIX v2 — Unified horizontal rhythm for ORA Technology
Add this LAST in , after all other stylesheets.
═══════════════════════════════════════════════════════════════ */
/* ── TOKENS — single source of truth ── */
:root {
--site-max: 1200px;
--site-px: clamp(1.25rem, 5vw, 3.5rem);
}
/* ══════════════════════════════════════════════════════════════
NAVBAR
══════════════════════════════════════════════════════════════ */
nav {
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════
STATS SECTION
══════════════════════════════════════════════════════════════ */
.stats-grid {
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
padding-top: 7rem;
padding-bottom: 10rem;
}
/* ══════════════════════════════════════════════════════════════
"WHAT SETS US APART" TEXT REVEAL (.text)
ROOT CAUSE: Original CSS had padding: 5rem 12rem — that 12rem
(~192px) side padding is 2-3× wider than every other section,
making text appear deeply indented. Fix: remove section-level
side padding, constrain each direct child instead so the
full-width section background is preserved.
══════════════════════════════════════════════════════════════ */
section.text {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 5rem;
}
section.text > * {
max-width: var(--site-max);
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
box-sizing: border-box;
}
/* ══════════════════════════════════════════════════════════════
WHAT WE DO (.what-we-do-container)
ROOT CAUSE: max-width was 1280px (80px wider than 1200px),
so its left edge started ~40px further left than every other
section. Matching it to --site-max snaps it into alignment.
══════════════════════════════════════════════════════════════ */
.what-we-do-container {
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
padding-top: 6rem;
padding-bottom: 6rem;
}
/* ══════════════════════════════════════════════════════════════
BLOG SECTION
══════════════════════════════════════════════════════════════ */
.blog-container,
.blog-section .container {
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
}
/* ══════════════════════════════════════════════════════════════
FAQ SECTION
══════════════════════════════════════════════════════════════ */
.faq-container {
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
}
.faq-read-more {
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
padding-top: 3rem;
}
/* ══════════════════════════════════════════════════════════════
WORK WITH US
══════════════════════════════════════════════════════════════ */
.work-section .container {
max-width: var(--site-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--site-px) !important;
padding-right: var(--site-px) !important;
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
section.text {
align-items: center;
text-align: center;
}
.stats-grid {
padding-top: 6rem !important;
padding-bottom: 8rem !important;
}
.faq-read-more {
padding-top: 2.5rem !important;
}
}
@media (max-width: 600px) {
section.text {
padding-top: 2rem;
padding-bottom: 2rem;
}
.stats-grid {
padding-top: 5rem !important;
padding-bottom: 6rem !important;
}
.faq-read-more {
padding-top: 2rem !important;
}
}
/* ════════════════════════════════════════
HERO FIXED BACKGROUND
════════════════════════════════════════ */
#hero-wrap {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
background: var(--color-bg);
will-change: opacity;
}
#hero-img {
position: absolute;
inset: -12%;
background: url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920&auto=format&fit=crop")
center / cover no-repeat;
transform: scale(1.25);
transform-origin: center center;
will-change: transform;
filter: grayscale(30%);
}
#hero-dark {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
background:
radial-gradient(
ellipse at 50% 50%,
transparent 5%,
rgba(0, 0, 0, 0.94) 100%
),
linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.85) 100%);
will-change: opacity;
}
#hero-grain {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0.12;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
/* ════════════════════════════════════════
HERO TEXT CONTENT
════════════════════════════════════════ */
#hero-content {
position: fixed;
inset: 0;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: calc(var(--nav-h) + 1rem) clamp(1rem, 5vw, 3rem) 5rem;
pointer-events: none;
}
.clip {
overflow: hidden;
display: block;
}
.eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-main);
font-size: 0.72rem;
letter-spacing: 0.55em;
text-transform: uppercase;
color: var(--color-primary);
font-weight: 400;
margin-bottom: 1.6rem;
transform: translateY(110%) translateZ(0);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
}
.eyebrow-part {
display: inline-block;
}
.eyebrow-separator {
display: inline-block;
}
h1 {
font-family: var(--font-main);
font-weight: 900;
font-size: clamp(2.6rem, 10vw, 12rem);
line-height: 0.88;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--color-white);
}
h1 .primary {
color: var(--color-primary);
-webkit-text-fill-color: var(--color-primary);
}
.word {
display: inline-block;
transform: translateY(115%) translateZ(0);
opacity: 0;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
}
#hero-content .word {
display: inline-block;
transform: translateY(115%) translateZ(0);
opacity: 0;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
}
h1 em {
font-style: italic;
font-weight: 900;
color: var(--color-primary);
-webkit-text-fill-color: var(--color-primary);
}
.sub {
display: inline-block;
font-family: var(--font-main);
font-size: clamp(0.6rem, 1.2vw, 0.88rem);
letter-spacing: 0.38em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
font-weight: 300;
margin-top: 1.6rem;
transform: translateY(110%) translateZ(0);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
max-width: 90vw;
text-align: center;
}
.btns {
margin-top: 2.2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: center;
pointer-events: all;
opacity: 0;
transform: translateY(24px) translateZ(0);
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.btn-primary {
align-items: center;
padding: 0.95rem 2.4rem;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--color-primary);
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background 0.3s,
color 0.3s;
}
.btn-primary:hover {
background: transparent;
color: var(--color-primary) !important;
}
.btn-primary svg {
transition: transform 0.2s;
}
.btn-primary:hover svg {
transform: translateX(4px);
}
.btn-ghost {
padding: 0.95rem 2.4rem;
background: transparent;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius-sm);
cursor: pointer;
transition:
border-color 0.3s,
color 0.3s;
}
/* Force hero buttons to stay light even in light mode because the hero background is fixed dark */
#hero-content .btn-ghost {
color: var(--color-white) !important;
border-color: var(--color-white-25) !important;
}
#hero-content .btn-ghost:hover {
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
.btn-ghost:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* ════════════════════════════════════════
SCROLL CUE
════════════════════════════════════════ */
#scroll-cue {
position: fixed;
bottom: 2.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 11;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
pointer-events: none;
}
#scroll-cue span {
font-family: var(--font-main);
font-size: 0.57rem;
letter-spacing: 0.44em;
text-transform: uppercase;
color: var(--color-primary);
font-weight: 600;
opacity: 0.85;
}
.cue-bar {
width: 1px;
height: 44px;
overflow: hidden;
position: relative;
}
.cue-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, var(--color-primary), transparent);
animation: drip 2s ease-in-out infinite;
}
@keyframes drip {
0% {
transform: translateY(-100%);
opacity: 1;
}
65% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(110%);
opacity: 0;
}
}
/* ════════════════════════════════════════
CAROUSEL PANEL
════════════════════════════════════════ */
#carousel-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
transform: translateY(100%);
opacity: 0;
will-change: transform, opacity;
pointer-events: none;
}
#carousel-panel.active {
pointer-events: all;
}
.logo-mark img {
width: 20px;
height: 20px;
object-fit: contain;
filter: brightness(0) invert(1) opacity(0.85); /* makes any logo white */
}
.carousel-inner {
padding: 2.6rem 0 2.8rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
}
.carousel-label {
text-align: center;
font-family: var(--font-main);
font-size: 0.6rem;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--color-primary);
font-weight: 400;
margin-bottom: 2rem;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.marquee-wrap {
overflow: hidden;
width: 100%;
position: relative;
}
.marquee-wrap::before,
.marquee-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 100px;
z-index: 2;
pointer-events: none;
}
.marquee-wrap::before {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}
.marquee-wrap::after {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}
.marquee-track {
display: flex;
gap: 3.5rem;
width: max-content;
animation: marquee 28s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.marquee-item {
display: flex;
align-items: center;
gap: 1rem;
white-space: nowrap;
flex-shrink: 0;
}
.logo-mark {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-primary-10);
border: 1px solid rgba(255, 107, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.logo-mark svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--color-primary);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.85;
}
.logo-mark img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
filter: brightness(0) invert(1) opacity(0.85);
transition: filter 0.3s ease;
}
.marquee-item:hover .logo-mark img {
filter: brightness(0) invert(1) opacity(1);
}
.marquee-name {
font-family: var(--font-main);
font-weight: 600;
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.82);
letter-spacing: 0.06em;
text-transform: uppercase;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}
.marquee-sep {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-primary);
opacity: 0.45;
margin: 0 0.6rem;
}
/* ════════════════════════════════════════
SCROLL ROOT & PHASE SPACERS
════════════════════════════════════════ */
#scroll-root {
position: relative;
z-index: 1;
}
#phase1 {
height: 100vh;
}
#phase2 {
height: 100vh;
}
#phase3 {
height: 100vh;
}
/* ════════════════════════════════════════
STATS SECTION
════════════════════════════════════════ */
#page {
position: relative;
z-index: 30;
background: var(--color-bg);
box-shadow: 0 -60px 80px 40px var(--color-bg);
transform: translateY(100vh);
will-change: transform;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
padding: 5rem 3.5rem 5rem;
max-width: 1120px;
margin: 0 auto;
min-height: 100vh;
align-content: center;
}
.stats-headline {
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 3rem;
}
.stats-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-main);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1.6rem;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.1s ease forwards;
}
.dot-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
flex-shrink: 0;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.5);
}
50% {
box-shadow: 0 0 0 8px rgba(255, 107, 0, 0);
}
}
.stats-headline h2 {
font-family: var(--font-main);
font-weight: 800;
font-size: clamp(1.85rem, 3.4vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--color-white);
margin: 0 0 1.4rem;
opacity: 0;
transform: translateY(18px);
animation: faq-rise 0.65s 0.2s ease forwards;
}
.stats-headline h2 .highlight {
background: linear-gradient(
115deg,
var(--color-primary) 0%,
rgba(255, 155, 60, 0.9) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stats-desc {
font-family: var(--font-main);
font-size: var(--font-size-base);
line-height: 1.9;
color: var(--color-white-80);
font-weight: 300;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.32s ease forwards;
}
.stats-desc {
font-family: var(--font-main);
font-size: var(--font-size-base);
line-height: 1.9;
color: var(--color-white-80);
font-weight: 300;
}
/* ── Stat Cards ── */
.stat-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--color-white-8);
padding: 2.6rem 2.6rem 2.2rem;
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
transition:
border-color 0.3s,
background 0.3s;
}
.stat-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-white));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.stat-card:hover {
background: var(--color-primary-10);
border-color: var(--color-primary-20);
}
.stat-card:hover::after {
transform: scaleX(1);
}
/* Gradient stat numbers: primary → white */
.stat-number {
font-family: var(--font-main);
font-weight: 900;
font-size: clamp(3.8rem, 7vw, 6.2rem);
line-height: 1;
margin-bottom: 1rem;
display: inline-block;
letter-spacing: -0.02em;
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-white) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pct {
font-size: 0.75em;
font-weight: 700;
}
.stat-text {
font-family: var(--font-main);
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-white-80);
font-weight: 300;
margin-bottom: 1.3rem;
}
.stat-source {
font-family: var(--font-main);
font-size: 0.67rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-white-50);
font-weight: 400;
}
.stat-source strong {
color: var(--color-white-50);
font-weight: 600;
}
@media (max-width: 600px) {
#hero-content {
padding: calc(var(--nav-h) + 0.5rem) 1rem 4rem;
text-align: center;
}
.clip {
overflow: visible !important;
text-align: center;
}
#hero-content .eyebrow {
font-size: 0.52rem !important;
letter-spacing: 0.12em !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center;
width: 100%;
gap: 0.2rem;
}
.eyebrow-separator {
display: none !important;
}
.eyebrow-part {
display: block !important;
white-space: nowrap;
}
}
@media (max-width: 900px) {
.stats-grid {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-card {
width: 100%;
text-align: center;
}
.stat-number {
display: block;
text-align: center;
}
.stat-text {
text-align: center;
}
}
/* ════════════════════════════════════════
RESPONSIVE — Tablet (≤ 900px)
════════════════════════════════════════ */
@media (max-width: 900px) {
nav {
padding: 0 2rem;
grid-template-columns: 1fr auto;
}
.nav-links,
.btn-nav {
display: none;
}
/* Show nav menu when active - full width */
.nav-links.active {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
flex-direction: column;
background: rgba(0, 0, 0, 0.98);
backdrop-filter: blur(20px);
padding: 2rem;
gap: 0;
z-index: 1000;
overflow-y: auto;
}
.nav-links.active > li {
width: 100%;
height: auto;
padding: 0;n
border-bottom: 1px solid var(--color-white-8);
}
.nav-links.active > li:first-child {
margin-top: 4rem;
}
.nav-links.active > li > a {
display: block;
padding: 1.2rem 0;
font-size: 0.9rem;
letter-spacing: 0.15em;
}
/* Make dropdown parent a block container */
.nav-links.active .has-dropdown {
display: block;
width: 100%;
}
.nav-links.active .has-dropdown > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.nav-links.active .has-dropdown > a .chevron {
margin-left: auto;
}
/* Mobile dropdown styling - simple list */
.nav-links.active .has-dropdown .dropdown {
position: static !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
max-height: 0;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
padding: 0;
margin: 0;
border: none;
transform: none !important;
width: 100%;
left: auto !important;
right: auto !important;
top: auto !important;
transition:
max-height 0.3s ease,
opacity 0.3s ease,
padding 0.3s ease;
}
.nav-links.active .has-dropdown.active .dropdown {
opacity: 1;
visibility: visible;
pointer-events: all;
max-height: 1000px;
padding: 0.75rem 0 0.75rem 1rem;
}
.nav-links.active .dropdown .dropdown-inner {
padding: 0 !important;
background: transparent !important;
border: none !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
grid-template-columns: 1fr !important;
}
.nav-links.active .dropdown .dropdown-item {
padding: 0.75rem 0.5rem !important;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
gap: 0.5rem !important;
display: flex !important;
align-items: center !important;
}
.nav-links.active .dropdown .dropdown-item:hover {
background: rgba(255, 107, 0, 0.05) !important;
transform: none !important;
border-color: transparent !important;
}
.nav-links.active .dropdown .dropdown-item .d-icon {
width: 24px;
height: 24px;
background: transparent;
border: none;
}
.nav-links.active .dropdown .dropdown-item .d-icon svg {
width: 14px;
height: 14px;
stroke: var(--color-primary);
}
.nav-links.active .dropdown .dropdown-item .d-text {
gap: 0;
}
.nav-links.active .dropdown .dropdown-item .d-text strong {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
}
.nav-links.active .dropdown .dropdown-item .d-text > span {
display: none;
}
.nav-links.active .dropdown .dropdown-item .d-points {
display: none;
}
.nav-links.active .dropdown-footer {
display: none;
}
/* Show CTA button in mobile menu */
.nav-links.active .mobile-cta {
display: block;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-white-8);
border-bottom: none;
}
.nav-links.active .mobile-cta .cta-button {
width: 100%;
text-align: center;
padding: 1rem;
}
.hamburger {
display: flex;
justify-self: end;
z-index: 1001;
}
.stats-grid {
grid-template-columns: 1fr;
padding: 6rem 2rem 8rem;
}
.stats-headline {
padding-right: 0;
margin-bottom: 1rem;
}
}
/* ════════════════════════════════════════
RESPONSIVE — Mobile (≤ 600px)
════════════════════════════════════════ */
@media (max-width: 600px) {
html {
--nav-h: 4.2rem;
}
nav {
padding: 0 1.2rem;
}
h1 {
font-size: clamp(2.4rem, 14vw, 4.5rem);
}
.sub {
font-size: 0.58rem;
letter-spacing: 0.22em;
margin-top: 1.2rem;
}
.btns {
flex-direction: column;
gap: 0.75rem;
width: 100%;
max-width: 280px;
margin-top: 1.6rem;
}
.btn-primary,
.btn-ghost {
width: 100%;
text-align: center;
justify-content: center;
padding: 0.9rem 1.5rem;
}
.stats-grid {
padding: 5rem 1.2rem 6rem;
gap: 1rem;
}
.stat-card {
padding: 1.8rem 1.5rem 1.6rem;
}
.stat-number {
font-size: clamp(3rem, 14vw, 4.5rem);
}
.carousel-label {
font-size: 0.55rem;
margin-bottom: 1.4rem;
}
#scroll-cue {
bottom: 1.4rem;
}
}
/* ════════════════════════════════════════
RESPONSIVE — Tablet (≤ 900px)
════════════════════════════════════════ */
@media (max-width: 900px) and (min-width: 601px) {
h1 {
font-size: clamp(3rem, 9vw, 7rem);
}
.sub {
font-size: clamp(0.6rem, 1vw, 0.8rem);
letter-spacing: 0.28em;
}
.btns {
gap: 0.85rem;
}
}
/* ════════════════════════════════════════
RESPONSIVE — Very small (≤ 380px)
════════════════════════════════════════ */
@media (max-width: 380px) {
h1 {
font-size: clamp(2rem, 13vw, 3.5rem);
}
#hero-content .eyebrow {
font-size: 0.46rem !important;
letter-spacing: 0.09em !important;
}
.btns {
max-width: 240px;
}
}
/* WHAT SETS US APART */
/* Progressive Text Reveal Section Desktop View */
/* ── TEXT REVEAL SECTION ── */
.text {
min-height: 90vh;
padding: 5rem 12rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2rem;
}
.text-content {
width: 100%;
text-align: left;
color: var(--primary);
font-size: 0.86rem;
letter-spacing: 0.08em;
font-weight: 600;
text-transform: uppercase;
}
.fade-text {
font-family: "Syne", sans-serif;
font-size: clamp(1.5rem, 3vw, 2.5rem);
letter-spacing: -0.02em;
color: var(--color-white);
line-height: 1.6;
word-break: normal;
overflow-wrap: break-word;
}
/* SplitType wraps each word in a */
/* In your text reveal CSS */
.fade-text .word {
display: inline-block;
will-change: opacity;
transform: none !important; /* override any inherited transform */
opacity: 1; /* let GSAP control opacity via gsap.set */
}
.text a {
padding: 0.95rem 2.4rem;
background: transparent;
color: var(--color-white-80);
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--color-white-25);
border-radius: var(--radius-sm);
cursor: pointer;
transition:
border-color 0.3s,
color 0.3s;
}
.text a:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
nav {
padding: 1rem 1.5rem;
}
.nav-links {
display: none;
}
.text {
padding: 3rem 2rem;
min-height: 100vh;
justify-content: center;
gap: 1.4rem;
}
.fade-text {
font-size: clamp(1.7rem, 5vw, 2.7rem);
line-height: 1.52;
}
}
@media (max-width: 480px) {
.text {
min-height: 60vh;
padding: 2rem 1.2rem;
}
.text-content {
font-size: var(--font-size-h6);
letter-spacing: 1px;
}
.fade-text {
font-size: 22px;
line-height: var(--line-height-relaxed);
}
}
@media (max-width: 900px) {
.text-content {
text-align: center !important;
width: 100% !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
}
}
@media (max-width: 600px) {
.text-content {
text-align: center !important;
width: 100% !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
}
}
/* What We Do Section - Updated */
/* ══════════════════════════════════════════
WHAT-WE-DO.CSS — Ora Technologies
Cinematic · Responsive · Smaller image
══════════════════════════════════════════ */
/* ── Section ── */
.what-we-do {
position: relative;
width: 100%;
background: linear-gradient(
to right,
#ffffff 0%,
#ffffff 50%,
#000000 50%,
#000000 100%
);
font-family: "Jost", sans-serif;
color: #000;
overflow: hidden;
background: var(--s);
min-height: 100vh;
}
/* Dark mode: reverse the gradient */
html[data-theme="dark"] .what-we-do {
background: linear-gradient(
to right,
#000000 0%,
#000000 50%,
#000000 50%,
#000000 100%
);
color: #fff;
}
/* ── Progress bar ── */
.wwd-progress-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(255, 255, 255, 0.05);
z-index: 20;
}
.wwd-progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff6b00, #ffaa60);
width: 0%;
transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 14px rgba(255, 107, 0, 0.6);
}
/* ── Step counter ── */
.wwd-step-counter {
top: 2.2rem;
right: 3.5rem;
display: flex;
align-items: baseline;
gap: 0.4rem;
font-size: 0.58rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.18);
font-weight: 400;
z-index: 20;
}
.wwd-step-current {
color: #ff6b00;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1;
}
/* ══════════════════════════════════════════
IMAGE — right side, full height, smaller
══════════════════════════════════════════ */
.service-image {
position: absolute;
top: 0;
right: 0;
width: 48%; /* ← reduced from 58% */
height: 100%;
z-index: 0;
overflow: hidden;
}
#serviceImage {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition:
opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
filter: brightness(0.75) saturate(1.1);
}
#serviceImage.transitioning {
opacity: 0;
transform: scale(1.03);
}
/* Multi-layer fade — left edge melts into black */
.service-image .img-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
#000 0%,
rgba(0, 0, 0, 0.9) 10%,
rgba(0, 0, 0, 0.55) 26%,
rgba(0, 0, 0, 0.15) 50%,
transparent 68%
),
linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 28%),
linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, transparent 32%),
radial-gradient(
ellipse at 85% 90%,
rgba(255, 107, 0, 0.1) 0%,
transparent 55%
);
z-index: 1;
}
/* ══════════════════════════════════════════
CONTAINER
══════════════════════════════════════════ */
.what-we-do-container {
position: relative;
z-index: 5;
max-width: 1280px;
margin: 0 auto;
padding: 6rem 3.5rem;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ══════════════════════════════════════════════════════
WHAT WE DO HEADER
══════════════════════════════════════════════════════ */
.what-we-do-header .t-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-main);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1.6rem;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.1s ease forwards;
}
.what-we-do-header h2 {
font-family: var(--font-main);
font-weight: 800;
font-size: clamp(1.85rem, 3.4vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--color-white);
margin: 0 0 1.4rem;
opacity: 0;
transform: translateY(18px);
animation: faq-rise 0.65s 0.2s ease forwards;
}
.what-we-do-header h2 .highlight {
background: linear-gradient(
115deg,
var(--color-primary) 0%,
rgba(255, 155, 60, 0.9) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.what-we-do-header p {
font-family: var(--font-main);
font-size: var(--font-size-base);
line-height: 1.9;
color: var(--color-white-80);
font-weight: 300;
max-width: 420px;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.32s ease forwards;
}
/* ── Content grid: sidebar + details ── */
.what-we-do-content {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0 5rem;
align-items: center;
max-width: 600px; /* keeps content clear of the image */
}
/* ══════════════════════════════════════════
SIDEBAR
══════════════════════════════════════════ */
.service-sidebar {
display: flex;
flex-direction: column;
gap: 0.1rem;
position: relative;
}
.service-sidebar::before,
.service-sidebar::after {
display: none;
}
.service-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 1.5rem 0.65rem 1.2rem;
cursor: pointer;
border-radius: 0 5px 5px 0;
transition: background 0.2s;
}
.service-item:hover {
background: rgba(255, 107, 0, 0.05);
}
.service-item.active {
background: rgba(255, 107, 0, 0.08); /* Highlight active item background */
}
.service-item .material-symbols-outlined {
font-size: 1rem;
color: rgba(255, 255, 255, 0.2);
transition:
color 0.28s,
transform 0.28s;
flex-shrink: 0;
}
.service-name {
font-size: var(--font-size-base);
font-weight: 400;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.24);
transition: color 0.28s;
white-space: nowrap;
}
.service-item.active .material-symbols-outlined {
color: #ff6b00;
transform: scale(1.15);
}
.service-item.active .service-name {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
/* ══════════════════════════════════════════
SERVICE DETAILS
══════════════════════════════════════════ */
.service-details {
position: relative;
min-height: 280px;
display: flex;
align-items: center;
}
.service-detail {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.2rem;
opacity: 0;
transform: translateY(14px);
pointer-events: none;
transition:
opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-detail.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
position: relative;
}
.service-detail h3 {
font-size: clamp(1.5rem, 2.8vw, 2.4rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.03em;
color: #fff;
}
.detail-highlight {
color: #fff;
}
.detail-subtitle {
font-size: 0.72rem;
color: var(--w38);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
}
.service-detail p {
font-size: var(--font-size-base);
font-weight: 300;
line-height: 1.8;
color: var(--color-white-80);
max-width: 380px;
letter-spacing: 0.01em;
}
.detail-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.63rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ff6b00;
text-decoration: none;
border-bottom: 1px solid rgba(255, 107, 0, 0.28);
padding-bottom: 0.2rem;
width: fit-content;
transition:
color 0.22s,
border-color 0.22s,
gap 0.22s;
}
.detail-link:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.28);
gap: 0.8rem;
}
/* ── Dot pagination ── */
.wwd-dots {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 20;
}
.wwd-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
cursor: pointer;
transition:
background 0.28s,
height 0.28s,
border-radius 0.28s;
}
.wwd-dot.active {
background: #ff6b00;
height: 20px;
border-radius: 2px;
box-shadow: 0 0 10px rgba(255, 107, 0, 0.55);
}
/* ── Scroll hint ── */
.wwd-scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 20;
}
.wwd-scroll-hint.visible {
opacity: 1;
}
.wwd-scroll-hint span {
font-size: 0.5rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.18);
}
.wwd-scroll-hint .scroll-mouse {
width: 18px;
height: 28px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9px;
display: flex;
justify-content: center;
padding-top: 4px;
}
.wwd-scroll-hint .scroll-wheel {
width: 2px;
height: 5px;
background: #ff6b00;
border-radius: 2px;
animation: scrollWheel 1.5s ease-in-out infinite;
}
@keyframes scrollWheel {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(7px);
opacity: 0;
}
}
@media (max-width: 560px) {
.service-sidebar {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.4rem;
width: 100%;
}
.service-item {
padding: 0.75rem 0;
border-radius: 10px;
justify-content: center;
width: 100%;
}
.service-item .material-symbols-outlined {
font-size: 1.4rem;
}
}
/* ══════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════ */
/* ── Tablet landscape: 900–1200px ── */
@media (max-width: 1200px) {
.service-image {
width: 46%;
}
.what-we-do-content {
grid-template-columns: 180px 1fr;
gap: 0 2.5rem;
max-width: 560px;
}
.what-we-do-container {
padding: 5rem 2.5rem;
}
}
/* ── Tablet portrait: 680–900px ── */
@media (max-width: 900px) {
/* Image becomes a dimmed full-bleed background */
.service-image {
width: 100%;
opacity: 0.28;
}
.service-image .img-overlay {
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.6) 100%
),
linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, transparent 65%);
}
.what-we-do-container {
padding: 5rem 2rem;
}
/* Stack sidebar on top of details */
.what-we-do-content {
grid-template-columns: 1fr;
max-width: 100%;
gap: 2rem 0;
}
/* Sidebar becomes horizontal pill row */
.service-sidebar {
flex-direction: row;
flex-wrap: wrap;
gap: 0.45rem;
margin-top:40px;
}
.service-item {
padding: 0.42rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 99px;
gap: 0.5rem;
}
.service-item:hover {
background: rgba(255, 107, 0, 0.06);
}
.service-item.active {
border-color: rgba(255, 107, 0, 0.45);
background: rgba(255, 107, 0, 0.07);
}
.service-item .material-symbols-outlined {
font-size: 0.9rem;
}
.service-name {
font-size: 0.7rem;
}
.service-details {
min-height: 200px;
}
.wwd-dots {
display: none;
}
.wwd-step-counter {
right: 2rem;
}
}
/* ── Mobile: ≤ 560px ── */
@media (max-width: 560px) {
.what-we-do-container {
padding: 4.5rem 1.2rem 3rem;
}
.wwd-step-counter {
top: 1.4rem;
right: 1.2rem;
}
.what-we-do-header {
margin-bottom: 2rem;
}
.what-we-do-header h2 {
font-size: clamp(1.75rem, 7vw, 2.4rem);
}
.what-we-do-header p {
font-size: 0.82rem;
max-width: 100%;
}
/* Show only icon on pills to save space */
.service-name {
display: none;
}
.service-item {
padding: 0.5rem 0.65rem;
border-radius: 8px;
}
.service-item .material-symbols-outlined {
font-size: 1.1rem;
}
.service-detail h3 {
font-size: clamp(1.5rem, 6.5vw, 2rem);
}
.service-detail p {
font-size: 0.82rem;
}
.service-details {
min-height: 240px;
}
/* Hint at bottom — center it better */
.wwd-scroll-hint {
bottom: 1.2rem;
}
}
/* ── Very small: ≤ 380px ── */
@media (max-width: 380px) {
.what-we-do-container {
padding: 4rem 1rem 2.5rem;
}
.service-detail h3 {
font-size: 1.45rem;
}
}
/* (Removed redundant mobile media query for What We Do) */
/* Navigation Dropdown */
.nav-dropdown {
position: relative;
}
.dropdown-toggle::after {
display: none !important;
}
.nav-dropdown:hover .dropdown-toggle::after {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 8px;
min-width: 200px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
margin-top: 0.5rem;
}
.nav-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
display: block;
padding: 0.75rem 1.5rem;
color: #000000;
text-decoration: none;
font-size: 1rem;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.dropdown-item:first-child {
border-radius: 8px 8px 0 0;
}
.dropdown-item:last-child {
border-radius: 0 0 8px 8px;
}
.dropdown-item:hover {
background-color: #f9f9f9;
color: red !important;
/* border-left-color: #fa6e3a; */
padding-left: 2rem;
}
/* ════════════════════════════════════════════════════════════════
faq.css — FAQ Section
Font: Jost · Background: #000 · Accent: #ff6b00
Link after your main stylesheet.
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════
SCOPED RESET
════════════════════════════════════════ */
.faq-section *,
.faq-section *::before,
.faq-section *::after {
box-sizing: border-box;
}
.faq-section a,
.faq-section a:hover,
.faq-section a:visited {
text-decoration: none;
}
/* ════════════════════════════════════════
SECTION
════════════════════════════════════════ */
.faq-section {
position: relative;
background: var(--color-bg);
padding: 9rem 0 11rem;
overflow: hidden;
isolation: isolate;
font-family: var(--font-main);
}
/* Grid-line texture */
.faq-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--color-white-8) 1px, transparent 1px),
linear-gradient(90deg, var(--color-white-8) 1px, transparent 1px);
background-size: 72px 72px;
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
/* Orange spotlight */
.faq-section::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 600px;
background: radial-gradient(
ellipse at 50% 10%,
rgba(255, 107, 0, 0.07) 0%,
transparent 68%
);
pointer-events: none;
z-index: 0;
}
/* ════════════════════════════════════════
CONTAINER + LAYOUT
════════════════════════════════════════ */
.faq-container {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
padding: 0 3.5rem;
}
.faq-content {
display: grid;
grid-template-columns: 38% 1fr;
gap: 6rem;
align-items: start;
align-content: start;
}
/* ════════════════════════════════════════
LEFT — STICKY HEADER
════════════════════════════════════════ */
.faq-header-wrap {
position: relative;
align-self: start;
height: fit-content;
z-index: 2;
}
.faq-header {
position: relative;
/* top: 7rem; */
}
/* Eyebrow pill */
.faq-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-main);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1.6rem;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.1s ease forwards;
}
.faq-eyebrow-line {
display: inline-block;
width: 22px;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
flex-shrink: 0;
}
.faq-header h2 {
font-family: var(--font-main);
font-weight: 800;
font-size: clamp(1.85rem, 3.4vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--color-white);
margin: 0 0 1.4rem;
opacity: 0;
transform: translateY(18px);
animation: faq-rise 0.65s 0.2s ease forwards;
}
.faq-header h2 .highlight {
display: block;
background: linear-gradient(
115deg,
var(--color-primary) 0%,
rgba(255, 155, 60, 0.9) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.faq-header p {
font-family: var(--font-main);
font-size: var(--font-size-base);
line-height: 1.9;
color: var(--color-white-80);
font-weight: 300;
margin: 0 0 2.4rem;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.32s ease forwards;
}
/* CTA */
.faq-cta {
padding: 0.95rem 2.4rem;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--color-primary);
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background 0.3s,
color 0.3s;
}
.faq-cta-arrow {
font-size: 0.9rem;
display: inline-block;
transition: transform 0.3s ease;
}
.faq-cta:hover {
background: transparent;
color: var(--color-primary);
}
.faq-cta:hover .faq-cta-arrow {
transform: translateX(4px);
}
/* ════════════════════════════════════════
RIGHT — ACCORDION LIST
════════════════════════════════════════ */
.faq-list {
display: flex;
flex-direction: column;
overflow-anchor: none;
}
/* ── Item ── */
.faq-item {
position: relative;
border-bottom: 1px solid var(--color-white-8);
opacity: 0;
transform: translateY(18px);
display: flex;
flex-direction: column;
}
.faq-item:first-child {
border-top: 1px solid var(--color-white-8);
}
/* Staggered entrance */
.faq-item:nth-child(1) {
animation: faq-rise 0.5s 0.18s ease forwards;
}
.faq-item:nth-child(2) {
animation: faq-rise 0.5s 0.26s ease forwards;
}
.faq-item:nth-child(3) {
animation: faq-rise 0.5s 0.34s ease forwards;
}
.faq-item:nth-child(4) {
animation: faq-rise 0.5s 0.42s ease forwards;
}
.faq-item:nth-child(5) {
animation: faq-rise 0.5s 0.5s ease forwards;
}
.faq-item:nth-child(6) {
animation: faq-rise 0.5s 0.58s ease forwards;
}
.faq-item:nth-child(7) {
animation: faq-rise 0.5s 0.66s ease forwards;
}
.faq-item:nth-child(8) {
animation: faq-rise 0.5s 0.74s ease forwards;
}
/* Left orange accent bar */
.faq-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--color-primary), transparent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.36s ease;
border-radius: 2px;
z-index: 1;
}
.faq-item:hover::before,
.faq-item.is-open::before {
transform: scaleY(1);
}
/* ────────────────────────────────────────
QUESTION BUTTON
all:unset kills browser default styling
(including the blue focus outline)
──────────────────────────────────────── */
.faq-question {
all: unset;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.4rem;
padding: 1.5rem 1.2rem 1.5rem 1.5rem;
cursor: pointer;
background: transparent;
transition: background 0.22s ease;
}
.faq-question:focus-visible {
/* accessible ring in brand colour — no blue box */
box-shadow: inset 0 0 0 2px rgba(255, 107, 0, 0.45);
}
.faq-question:hover {
background: rgba(255, 107, 0, 0.04);
}
.faq-item.is-open > .faq-question {
background: rgba(255, 107, 0, 0.05);
}
/* Question text */
.faq-q-text {
font-family: var(--font-main);
font-size: 0.93rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.55;
color: var(--color-white);
flex: 1;
}
/* ── Icon box ── */
.faq-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
background: var(--color-white-8);
border: 1px solid var(--color-white-12);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-main);
font-size: 1.15rem;
font-weight: 300;
line-height: 1;
color: var(--color-white-50);
user-select: none;
transition:
background 0.28s ease,
border-color 0.28s ease,
color 0.28s ease,
transform 0.38s ease;
}
.faq-question:hover .faq-icon,
.faq-item.is-open .faq-icon {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
.faq-item.is-open .faq-icon {
transform: rotate(45deg); /* + → × */
}
/* ════════════════════════════════════════
ANSWER — max-height accordion
Completely hidden when closed,
smoothly expands on .is-open
════════════════════════════════════════ */
.faq-answer {
max-height: 0;
overflow: hidden;
background: transparent;
transition:
max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.42s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
will-change: max-height;
}
.faq-item.is-open > .faq-answer {
max-height: 600px; /* large enough for any answer */
}
.faq-answer p {
font-family: var(--font-main);
font-size: var(--font-size-base);
line-height: 1.95;
color: var(--color-white-80);
font-weight: 300;
padding: 0.2rem 1.5rem 1.9rem 1.5rem;
margin: 0;
opacity: 0;
transform: translateY(-6px);
transition:
opacity 0.3s 0.08s ease,
transform 0.3s 0.08s ease;
}
.faq-item.is-open .faq-answer p {
opacity: 1;
transform: translateY(0);
}
/* ════════════════════════════════════════
KEYFRAME
════════════════════════════════════════ */
@keyframes faq-rise {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ════════════════════════════════════════
FAQ READ MORE CTA
════════════════════════════════════════ */
.faq-read-more {
position: relative;
display: flex;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
padding: 3rem 3.5rem 0;
}
.faq-read-more {
display: flex;
justify-content: flex-end;
padding: 1.2rem 1.5rem 0;
width: 100%;
}
.faq-read-more-btn {
display: inline-flex;
gap: 0.4rem;
padding: 0;
background: transparent;
border: none;
color: var(--color-primary);
font-family: var(--font-main);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
opacity: 0.8;
transition:
opacity 0.2s,
gap 0.2s;
}
.faq-read-more-btn:hover {
opacity: 1;
gap: 0.7rem;
border: none;
color: var(--color-primary);
}
.faq-read-more-btn svg {
transition: transform 0.2s ease;
}
.faq-read-more-btn:hover svg {
transform: translateX(4px);
}
/* ════════════════════════════════════════
RESPONSIVE — Tablet ≤ 900px
════════════════════════════════════════ */
@media (max-width: 900px) {
.faq-section {
padding: 6rem 0 8rem;
}
.faq-container {
padding: 0 2rem;
}
.faq-content {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.faq-header {
position: static;
text-align: center;
}
.faq-read-more {
padding: 2.5rem 2rem 0;
}
}
/* ════════════════════════════════════════
RESPONSIVE — Mobile ≤ 600px
════════════════════════════════════════ */
@media (max-width: 600px) {
.faq-section {
padding: 5rem 0 6rem;
}
.faq-container {
padding: 0 1.2rem;
}
.faq-content {
gap: 2.8rem;
}
.faq-header h2 {
font-size: clamp(1.6rem, 8.5vw, 2.2rem);
}
.faq-header {
text-align: center;
}
.faq-question {
padding: 1.2rem 0.9rem 1.2rem 1rem;
}
.faq-q-text {
font-size: 0.85rem;
}
.faq-answer p {
padding: 0.1rem 1rem 1.5rem;
font-size: 0.835rem;
}
.faq-cta {
width: 100%;
justify-content: center;
}
}
.read-more-btn:hover .arrow {
transform: translateX(4px);
}
/* ══════════════════════════════════════════════════════
FOOTER RESPONSIVE
══════════════════════════════════════════════════════ */
/* Tablet - 2 columns */
@media (max-width: 900px) {
.footer-content {
grid-template-columns: repeat(2, 1fr) !important;
gap: 2.5rem !important;
}
.footer-top {
flex-direction: column !important;
align-items: flex-start !important;
gap: 2rem !important;
}
.footer-contact-block {
text-align: left !important;
}
}
/* Mobile - Single column */
@media (max-width: 600px) {
.footer {
padding: 3rem 0 0 !important;
}
.footer-container {
padding: 0 1.5rem !important;
}
.footer-top {
flex-direction: column !important;
gap: 2rem !important;
align-items: center !important;
text-align: center !important;
}
.footer-brand {
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.footer-logo-wrap {
display: flex !important;
justify-content: center !important;
}
.footer-tagline {
text-align: center !important;
}
.footer-cta-block {
align-items: center !important;
width: 100%;
text-align: center !important;
}
.footer-cta-label {
text-align: center !important;
}
.footer-cta-btn {
width: 100%;
justify-content: center;
}
.footer-contact-block {
width: 100%;
text-align: center !important;
align-items: center !important;
}
.footer-contact-phone {
justify-content: center !important;
}
/* Single column layout for footer links */
.footer-content {
grid-template-columns: 1fr !important;
gap: 2rem !important;
margin-bottom: 2.5rem !important;
}
.footer-column {
width: 100%;
align-items: center !important;
text-align: center !important;
}
.footer-col-title {
font-size: 0.75rem !important;
margin-bottom: 1rem !important;
text-align: center !important;
}
.footer-links {
gap: 0.6rem !important;
align-items: center !important;
}
.footer-links li {
text-align: center !important;
}
.footer-links a {
font-size: 0.88rem !important;
}
.footer-socials {
align-items: center !important;
}
/* Divider section */
.footer-divider {
justify-content: center !important;
}
/* Bottom section */
.footer-bottom {
flex-direction: column !important;
align-items: center !important;
gap: 1.5rem !important;
padding-bottom: 2rem !important;
text-align: center !important;
}
.footer-trust {
width: 100%;
align-items: center !important;
display: flex !important;
flex-direction: column !important;
}
.trust-label {
text-align: center !important;
}
.trust-badges {
flex-wrap: wrap;
justify-content: center !important;
}
.footer-copyright {
align-items: center !important;
text-align: center !important;
width: 100%;
}
.footer-copyright p {
font-size: 0.78rem !important;
text-align: center !important;
}
.footer-legal {
flex-wrap: wrap;
width: 100%;
justify-content: center !important;
text-align: center !important;
}
.footer-legal a {
font-size: 0.75rem !important;
}
.legal-sep {
margin: 0 0.3rem;
}
}
/* testimonials - Updated */
/* ══════════════════════════════════════
TESTIMONIALS.CSS
Drop the
anywhere in your page. It sits in
normal document flow. Page scrolls past
it. No html/body overrides at all.
══════════════════════════════════════ */
/* ══════════════════════════════════════
SECTION
position: relative → stays in flow
height: 100vh → fills the screen
at its scroll position
══════════════════════════════════════ */
.t-section {
position: relative;
width: 100%;
height: 100vh;
min-height: 640px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bg);
font-family: var(--font);
color: var(--white);
/* top padding = space for the header */
padding-top: 8rem;
padding-bottom: 5rem;
box-sizing: border-box;
}
/* Ambient glow */
.t-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: radial-gradient(
ellipse 80% 70% at 50% 50%,
rgba(255, 107, 0, 0.08) 0%,
transparent 68%
);
}
/* ══════════════════════════════════════
HEADER — absolute inside section
══════════════════════════════════════ */
.t-header {
position: absolute;
top: clamp(2rem, 4.5vh, 3.5rem);
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 10;
white-space: nowrap;
pointer-events: none;
}
.t-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-main);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1.6rem;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.1s ease forwards;
}
@keyframes dpulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.6);
}
50% {
box-shadow: 0 0 0 9px rgba(255, 107, 0, 0);
}
}
.t-title {
font-family: var(--font-main);
font-weight: 800;
font-size: clamp(1.85rem, 3.4vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--color-white);
margin: 0 0 1.4rem;
opacity: 0;
transform: translateY(18px);
animation: faq-rise 0.65s 0.2s ease forwards;
}
.t-title span {
background: linear-gradient(
115deg,
var(--color-primary) 0%,
rgba(255, 155, 60, 0.9) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.t-header p {
font-size: var(--font-size-small);
color: var(--w80);
font-weight: 300;
letter-spacing: 0.1em;
}
/* ══════════════════════════════════════
COUNTER — absolute right edge of section
══════════════════════════════════════ */
.t-counter {
position: absolute;
top: 50%;
right: clamp(1.2rem, 2.8vw, 2.8rem);
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
z-index: 10;
pointer-events: none;
}
#curIdx {
font-size: 2.4rem;
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(145deg, var(--primary) 0%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
min-width: 2.5rem;
text-align: center;
}
.t-counter-line {
width: 1px;
height: 40px;
background: linear-gradient(
to bottom,
var(--primary),
rgba(255, 255, 255, 0.06)
);
}
.t-counter-total {
font-size: 0.74rem;
color: var(--w22);
font-weight: 300;
letter-spacing: 0.04em;
}
/* ══════════════════════════════════════
NAV ARROWS — absolute left edge of section
══════════════════════════════════════ */
.nav-arrows {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 10;
padding: 0 clamp(0.5rem, 1.5vw, 1.2rem);
}
.nav-btn {
pointer-events: all;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--w08);
background: rgba(255, 255, 255, 0.03);
color: var(--w50);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s;
}
.nav-btn:hover:not(:disabled) {
border-color: rgba(255, 107, 0, 0.5);
color: var(--primary);
background: var(--o10);
box-shadow: 0 0 16px rgba(255, 107, 0, 0.15);
}
.nav-btn:disabled {
opacity: 0.2;
cursor: default;
}
/* ══════════════════════════════════════
STAGE — draggable card area
In flex flow (centered vertically
between header and bottom bar)
══════════════════════════════════════ */
.t-stage {
position: relative;
z-index: 5;
width: min(1080px, 80vw);
height: min(460px, 52vh);
min-height: 320px;
flex-shrink: 0;
cursor: grab;
user-select: none;
margin-top: 20px;
}
.t-stage.dragging {
cursor: grabbing;
}
/* ══════════════════════════════════════
CARDS — stacked inside stage
══════════════════════════════════════ */
.t-card {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--w08);
border-radius: 18px;
overflow: hidden;
visibility: hidden;
pointer-events: none;
will-change: clip-path;
}
.t-card.active {
visibility: visible;
border-color: rgba(255, 107, 0, 0.22);
/* box-shadow:
0 0 80px rgba(255, 107, 0, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.06); */
}
.t-card.animating {
visibility: visible;
}
.t-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 2;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0.6;
}
.card-inner {
display: flex;
width: 100%;
height: 100%;
padding: clamp(1.6rem, 3vh, 2.6rem) clamp(1.8rem, 3vw, 3rem);
gap: clamp(1.4rem, 3vw, 3rem);
pointer-events: none;
}
.card-left {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.industry-tag {
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--primary);
border: 1px solid rgba(255, 107, 0, 0.3);
border-radius: 99px;
padding: 0.3rem 0.9rem;
background: var(--o10);
width: fit-content;
margin-bottom: 1rem;
}
.big-quote {
font-size: clamp(3.5rem, 6vh, 6.5rem);
line-height: 0.5;
font-weight: 900;
font-style: italic;
color: var(--primary);
opacity: 0.2;
margin-bottom: 0.55rem;
user-select: none;
}
blockquote {
font-size: var(--font-size-base);
line-height: 1.9;
color: var(--w80);
font-weight: 300;
font-style: normal;
flex: 1;
margin-bottom: 1.4rem;
}
blockquote strong {
color: var(--white);
font-weight: 700;
}
.card-footer {
display: flex;
align-items: center;
gap: 1rem;
padding-top: 1.2rem;
border-top: 1px solid var(--w08);
}
.avatar {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, var(--primary), #ff9f50);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
color: var(--white);
letter-spacing: 0.05em;
position: relative;
}
.avatar::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent);
}
.card-author {
display: flex;
flex-direction: column;
gap: 0.22rem;
}
.author-name {
font-size: var(--font-size-small);
font-weight: 700;
color: var(--w80);
letter-spacing: 0.02em;
}
.author-role {
font-size: 0.67rem;
color: var(--w80);
font-weight: 300;
}
.card-right {
width: clamp(185px, 22vw, 255px);
flex-shrink: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.4rem;
border-left: 1px solid var(--w08);
padding-left: clamp(1.3rem, 2.5vw, 2.4rem);
}
.stat-block {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.snum {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(135deg, var(--primary) 0%, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sdesc {
font-size: 0.62rem;
color: var(--w80);
letter-spacing: 0.2em;
font-weight: 400;
text-transform: uppercase;
}
.sbar {
height: 3px;
background: var(--w08);
border-radius: 99px;
overflow: hidden;
margin-top: 0.1rem;
}
.sbar-fill {
height: 100%;
width: 0;
border-radius: 99px;
background: linear-gradient(90deg, var(--primary), #ff9f50);
transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.t-card.active .sbar-fill {
width: var(--p);
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.3rem;
}
.tag {
font-size: 0.56rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
color: var(--w80);
border: 1px solid var(--w08);
border-radius: 4px;
padding: 0.22rem 0.58rem;
background: rgba(255, 255, 255, 0.02);
}
.card-num {
position: absolute;
right: 2.2rem;
bottom: 1.6rem;
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
color: rgba(255, 255, 255, 0.03);
user-select: none;
pointer-events: none;
}
/* ══════════════════════════════════════
BOTTOM BAR — dots + hint, below stage
in flex column flow
══════════════════════════════════════ */
.t-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
margin-top: 1.8rem;
position: relative;
z-index: 10;
flex-shrink: 0;
}
.t-dots {
display: flex;
gap: 0.7rem;
}
.t-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--w22);
cursor: pointer;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.t-dot.active {
background: var(--primary);
width: 26px;
border-radius: 99px;
box-shadow: 0 0 10px rgba(255, 107, 0, 0.55);
}
.t-dot:hover:not(.active) {
background: var(--w50);
}
.swipe-hint {
display: flex;
align-items: center;
gap: 0.9rem;
white-space: nowrap;
transition: opacity 0.7s ease;
pointer-events: none;
}
.swipe-hint.hidden {
opacity: 0;
}
.hint-text {
font-size: 0.58rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--w22);
}
.hint-arrow {
font-size: 1rem;
color: var(--primary);
opacity: 0.5;
display: inline-block;
}
.hint-arrow.left {
animation: nudgeL 2s ease-in-out infinite;
}
.hint-arrow.right {
animation: nudgeR 2s ease-in-out infinite;
}
@keyframes nudgeL {
0%,
100% {
transform: translateX(0);
opacity: 0.5;
}
50% {
transform: translateX(-6px);
opacity: 1;
}
}
@keyframes nudgeR {
0%,
100% {
transform: translateX(0);
opacity: 0.5;
}
50% {
transform: translateX(6px);
opacity: 1;
}
}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 800px) {
.card-right {
display: none;
}
.t-counter {
display: none;
}
.nav-arrows {
left: 0.5rem;
}
.t-stage {
width: min(700px, 90vw);
}
.card-inner {
padding: 1.8rem 1.8rem;
}
}
@media (max-width: 520px) {
.t-stage {
height: min(400px, 58vh);
min-height: 280px;
}
.card-inner {
padding: 1.4rem 1.4rem;
}
.big-quote {
font-size: 3.5rem;
}
blockquote {
font-size: 0.8rem;
line-height: 1.75;
}
}
/* Work With Us Section */
.work-section {
position: relative;
padding: clamp(5rem, 8vw, 6.25rem) 1.25rem;
background:
radial-gradient(
circle at top left,
rgba(255, 107, 0, 0.1) 0%,
rgba(255, 107, 0, 0) 45%
),
radial-gradient(
circle at bottom right,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0) 50%
),
#070707;
}
.work-section .container {
width: min(1200px, 100%);
margin: 0 auto;
}
.work-content {
position: relative;
text-align: center;
padding: clamp(2.2rem, 4.5vw, 4rem) clamp(1.1rem, 6vw, 4.5rem);
border-radius: 18px;
border: 1px solid rgba(255, 107, 0, 0.26);
background:
linear-gradient(
160deg,
rgba(255, 107, 0, 0.12) 0%,
rgba(255, 107, 0, 0.03) 44%,
rgba(255, 255, 255, 0.02) 100%
),
rgba(9, 9, 9, 0.9);
box-shadow:
0 18px 46px rgba(0, 0, 0, 0.4),
0 2px 14px rgba(255, 107, 0, 0.08);
overflow: hidden;
}
.work-content::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(
120deg,
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0)
);
opacity: 0.6;
}
.work-content h2 {
font-family: var(--font-main);
font-weight: 800;
font-size: clamp(1.85rem, 3.4vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--color-white);
margin: 0 0 1.4rem;
opacity: 0;
transform: translateY(18px);
animation: faq-rise 0.65s 0.1s ease forwards;
}
.work-content h2 .highlight {
background: linear-gradient(
115deg,
var(--color-primary) 0%,
rgba(255, 155, 60, 0.9) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.work-content p {
position: relative;
max-width: 720px;
margin: 0 auto;
font-size: 1rem;
line-height: 1.75;
color: var(--w80);
}
.work-buttons {
position: relative;
margin-top: 2rem;
display: flex;
justify-content: center;
align-items: center;
gap: clamp(1.25rem, 2vw, 1.75rem);
}
.work-buttons .btn-primary,
.work-buttons .btn-secondary {
min-width: 194px;
justify-content: center;
text-align: center;
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
.work-buttons .btn-secondary {
padding: 0.95rem 2.4rem;
background: transparent;
color: var(--w80);
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--color-white-25);
border-radius: var(--radius-sm);
}
.work-buttons .btn-secondary:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
@media (max-width: 992px) {
.work-content h2 {
font-size: clamp(1.85rem, 5vw, 2.5rem);
}
.work-buttons {
gap: 1rem;
}
}
@media (max-width: 640px) {
.work-section {
padding: clamp(2.75rem, 10vw, 3.4rem) 0rem;
}
.work-content {
border-radius: 16px;
padding: 2rem 1rem;
}
.work-buttons {
flex-direction: column;
align-items: stretch;
gap: 0.9rem;
}
.work-buttons .btn-primary,
.work-buttons .btn-secondary {
width: 100%;
min-width: 0;
}
}
/* Newsletter Section */
.newsletter-section {
position: relative;
min-height: 100vh;
min-height: 100svh;
padding: clamp(4rem, 8vw, 6.5rem) 2rem;
background: #000000;
overflow: hidden;
display: flex;
align-items: center;
}
.newsletter-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(
0deg,
transparent 0,
transparent calc(100% - 1px),
rgba(255, 255, 255, 0.05) calc(100% - 1px),
rgba(255, 255, 255, 0.05) 100%
),
linear-gradient(
90deg,
transparent 0,
transparent calc(100% - 1px),
rgba(255, 255, 255, 0.05) calc(100% - 1px),
rgba(255, 255, 255, 0.05) 100%
);
background-size: 120px 120px;
opacity: 0.22;
}
.newsletter-section::after {
content: "";
position: absolute;
width: 520px;
height: 520px;
right: -220px;
bottom: -280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 107, 0, 0.24), transparent 72%);
pointer-events: none;
}
.newsletter-container {
position: relative;
width: min(980px, 100%);
max-width: 980px;
margin: 0 auto;
padding: clamp(2rem, 4vw, 3.25rem);
text-align: center;
border: 1px solid rgba(255, 107, 0, 0.22);
border-radius: 22px;
background:
linear-gradient(
170deg,
rgba(255, 107, 0, 0.08) 0%,
rgba(255, 107, 0, 0.02) 38%,
rgba(255, 255, 255, 0.01) 100%
),
rgba(10, 10, 10, 0.82);
backdrop-filter: blur(6px);
z-index: 1;
box-shadow:
0 0 80px rgba(255, 107, 0, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.newsletter-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 1.1rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.newsletter-eyebrow-dot {
width: 0.45rem;
height: 0.45rem;
border-radius: 999px;
background: #ff6b00;
}
.newsletter-container h2 {
font-size: clamp(2.1rem, 5vw, 3.5rem);
line-height: 0.96;
font-weight: 800;
letter-spacing: -0.03em;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 1rem;
}
.newsletter-container p {
max-width: 600px;
margin: 0 auto 2.15rem;
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--w80);
}
.newsletter-form {
display: flex;
align-items: center;
gap: 0.8rem;
max-width: 700px;
margin: 0 auto;
}
.newsletter-input {
flex: 1;
min-height: 3.45rem;
padding: 0 1.2rem;
font-size: 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: #ffffff;
transition: all 0.3s ease;
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.newsletter-input:focus {
outline: none;
border-color: #ff6b00;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.14);
}
.newsletter-button {
min-height: 3.45rem;
padding: 0 2rem;
font-size: 0.86rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
background: #ff6b00;
color: #ffffff;
border: 1px solid #ff6b00;
border-radius: 8px;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
white-space: nowrap;
}
.newsletter-button:hover {
background: #ff7d21;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(255, 107, 0, 0.35);
}
@media (max-width: 768px) {
.newsletter-section {
min-height: auto;
padding: 3.25rem 1.25rem;
}
.newsletter-container {
border-radius: 16px;
padding: 2rem 1.2rem;
}
.newsletter-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.22em;
}
.newsletter-container h2 {
font-size: clamp(1.75rem, 9vw, 2.5rem);
}
.newsletter-container p {
font-size: 0.95rem;
margin-bottom: 1.4rem;
}
.newsletter-form {
flex-direction: column;
gap: 1rem;
max-width: 100%;
}
.newsletter-input,
.newsletter-button {
width: 100%;
}
}
/* ===============================
BLOG SECTION
================================= */
.blog-section {
padding: 88px 20px;
background:
radial-gradient(
circle at top right,
rgba(255, 107, 0, 0.1),
transparent 45%
),
radial-gradient(
circle at bottom left,
rgba(255, 107, 0, 0.08),
transparent 40%
),
#090909;
}
.blog-container,
.blog-section .container {
max-width: 1200px;
margin: 0 auto;
}
/* ===============================
HEADER
================================= */
.blog-header {
text-align: center;
margin-bottom: 54px;
}
.blog-header .t-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-main);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 1.6rem;
opacity: 0;
transform: translateY(14px);
animation: faq-rise 0.65s 0.1s ease forwards;
}
.blog-header h2 {
font-family: var(--font-main);
font-weight: 800;
font-size: clamp(1.85rem, 3.4vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--color-white);
margin: 0 0 1.4rem;
opacity: 0;
transform: translateY(18px);
animation: faq-rise 0.65s 0.2s ease forwards;
}
.blog-header h2 .highlight {
background: linear-gradient(
115deg,
var(--color-primary) 0%,
rgba(255, 155, 60, 0.9) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.blog-header p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.75);
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* ===============================
GRID
================================= */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
margin-bottom: 52px;
align-items: stretch;
}
/* ===============================
CARD
================================= */
.blog-card {
border-radius: 18px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 10px 30px rgba(16, 18, 22, 0.12);
height: 100%;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 107, 0, 0.5);
}
.blog-card:hover {
transform: translateY(-6px) scale(1.06);
box-shadow: 0 18px 46px rgba(16, 18, 22, 0.2);
}
.blog-card-link {
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
/* ===============================
IMAGE
================================= */
.blog-image-wrapper {
position: relative;
height: 440px;
overflow: hidden;
background: linear-gradient(180deg, #d6dce2 0%, #b5bec8 100%);
}
.blog-image-wrapper img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition:
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-card:hover .blog-image-wrapper img {
transform: scale(1.1);
filter: blur(1.5px) brightness(0.7);
}
/* ===============================
DEFAULT OVERLAY CONTENT
================================= */
.blog-overlay-content {
position: absolute;
inset: auto 0 0 0;
padding: 28px 26px 24px;
z-index: 2;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.66) 50%,
transparent 100%
);
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-card:hover .blog-overlay-content {
opacity: 0;
}
/* ===============================
TEXT
================================= */
.blog-title {
font-size: 1.32rem;
font-weight: 700;
color: #fff !important;
margin-bottom: 13px;
line-height: 1.3;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.blog-header h3 {
font-size: 2rem;
color: var(--s) !important;
}
.blog-meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.blog-date,
.blog-author {
font-size: 0.82rem;
font-weight: 500;
color: #fff;
opacity: 0.95;
display: flex;
align-items: center;
gap: 6px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.blog-date::before {
content: "\1F4C5";
}
.blog-author::before {
content: "\270D\FE0F";
}
/* ===============================
HOVER OVERLAY
================================= */
.blog-hover-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
background: rgba(0, 0, 0, 0.26);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-card:hover .blog-hover-overlay {
opacity: 1;
pointer-events: auto;
}
/* ===============================
BUTTON
================================= */
.blog-read-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.9rem 2.3rem;
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-primary);
transform: translateY(10px);
opacity: 0;
transition:
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
background 0.3s ease,
color 0.3s ease;
}
.blog-card:hover .blog-read-btn {
transform: translateY(0);
opacity: 1;
}
.blog-read-btn:hover {
background: transparent;
color: #ffff;
}
/* ===============================
CTA BUTTON
================================= */
.blog-cta {
text-align: center;
margin-top: 6px;
}
.view-all-blogs {
display: inline-flex;
align-items: center;
padding: 0.95rem 2.4rem;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid var(--color-primary);
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background 0.3s,
color 0.3s;
}
.view-all-blogs:hover {
background: transparent;
color: var(--color-primary);
}
.view-all-blogs .arrow {
font-size: 1rem;
transition: transform 0.3s ease;
}
.view-all-blogs:hover .arrow {
transform: translateX(5px);
}
/* ===============================
RESPONSIVE
================================= */
@media (max-width: 1200px) {
.blog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 25px;
}
}
@media (max-width: 992px) {
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-image-wrapper {
height: 420px;
}
}
@media (max-width: 768px) {
.blog-section {
padding: 60px 20px;
}
.blog-header h2 {
font-size: 2rem;
}
.blog-header p {
font-size: 1rem;
}
.blog-image-wrapper {
height: 400px;
}
.blog-title {
font-size: 1.2rem;
}
.blog-read-btn {
padding: 12px 30px;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.blog-header h2 {
font-size: 1.75rem;
}
.blog-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.blog-image-wrapper {
height: 360px;
}
.blog-overlay-content {
padding: 22px 20px 18px;
}
.blog-title {
font-size: 1.1rem;
}
.blog-date,
.blog-author {
font-size: 0.8rem;
}
.blog-read-btn,
.view-all-blogs {
font-size: 0.68rem;
letter-spacing: 0.2em;
}
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — All section headers match FAQ style
Covers: Blog, What We Do, Testimonials, Stats, Work Together
══════════════════════════════════════════════════════════════ */
/* ── Tablet ≤ 900px ── */
@media (max-width: 900px) {
/* Shared eyebrow */
.blog-header .t-eyebrow,
.what-we-do-header .t-eyebrow,
.t-header .t-eyebrow,
.stats-eyebrow {
font-size: 0.62rem;
letter-spacing: 0.4em;
margin-bottom: 1.2rem;
}
/* Shared H2 */
.blog-header h2,
.what-we-do-header h2,
.t-title,
.stats-headline h2,
.work-content h2 {
font-size: clamp(1.65rem, 4.5vw, 2.4rem);
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
/* Shared paragraph */
.blog-header p,
.what-we-do-header p,
.t-subtitle,
.stats-desc,
.work-content p {
font-size: 0.9rem;
line-height: 1.75;
}
/* Center-align on tablet */
.blog-header,
.t-header,
.stats-headline {
text-align: center;
}
.stats-eyebrow {
justify-content: center;
margin-left: auto;
margin-right: auto;
}
/* What We Do stays left-aligned (sidebar layout) */
.what-we-do-header {
text-align: left;
}
/* Work section centered */
.work-content {
text-align: center;
}
.work-content p {
max-width: 100%;
}
/* Stats headline full width */
.stats-headline {
padding-right: 0;
margin-bottom: 2rem;
}
.stats-desc {
max-width: 100%;
}
}
/* ── Mobile ≤ 600px ── */
@media (max-width: 600px) {
/* Shared eyebrow */
.blog-header .t-eyebrow,
.what-we-do-header .t-eyebrow,
.t-header .t-eyebrow,
.stats-eyebrow {
font-size: 0.58rem;
letter-spacing: 0.32em;
margin-bottom: 1rem;
gap: 0.5rem;
}
/* Shared H2 */
.blog-header h2,
.what-we-do-header h2,
.t-title,
.stats-headline h2,
.work-content h2 {
font-size: clamp(1.45rem, 7.5vw, 2rem);
line-height: 1.1;
margin-bottom: 0.9rem;
letter-spacing: -0.02em;
}
/* Shared paragraph */
.blog-header p,
.what-we-do-header p,
.t-subtitle,
.stats-desc,
.work-content p {
font-size: 0.85rem;
line-height: 1.7;
}
/* All centered on mobile */
.blog-header,
.what-we-do-header,
.t-header,
.stats-headline,
.work-content {
text-align: center;
}
/* What We Do paragraph — full width */
.what-we-do-header p {
max-width: 100%;
}
/* Testimonials header spacing */
.t-header {
top: clamp(1.2rem, 3vh, 2rem);
}
.t-title {
margin-bottom: 0.6rem;
}
/* Blog header spacing */
.blog-header {
margin-bottom: 36px;
}
/* Stats headline */
.stats-eyebrow {
justify-content: center;
}
}
/* ── Very small ≤ 400px ── */
@media (max-width: 400px) {
.blog-header h2,
.what-we-do-header h2,
.t-title,
.stats-headline h2,
.work-content h2 {
font-size: clamp(1.3rem, 9vw, 1.75rem);
}
.blog-header .t-eyebrow,
.what-we-do-header .t-eyebrow,
.t-header .t-eyebrow,
.stats-eyebrow {
font-size: 0.55rem;
letter-spacing: 0.28em;
}
}
@media (max-width: 600px) {
.t-header {
position: relative;
top: unset;
left: unset;
transform: none;
white-space: normal;
width: 100%;
padding: 0 var(--site-px);
text-align: center;
margin-bottom: 1.5rem;
}
.t-title {
font-size: clamp(1.45rem, 7.5vw, 2rem);
white-space: normal;
}
.t-section {
padding-top: 3rem;
justify-content: flex-start;
}
}
@media (max-width: 900px) {
.t-header {
position: relative;
top: unset;
left: unset;
transform: none;
white-space: normal;
width: 100%;
padding: 0 var(--site-px);
text-align: center;
margin-bottom: 1.5rem;
}
}
/* ════════════════════════════════════════
LIGHT THEME — Homepage sections
(stats, text, what we do, blog, work, FAQ, testimonials)
════════════════════════════════════════ */
html[data-theme="light"] .stats-headline h2,
html[data-theme="light"] .stats-desc,
html[data-theme="light"] .stat-text,
html[data-theme="light"] .stat-source {
color: var(--color-white);
}
html[data-theme="light"] .stat-source strong {
color: var(--color-white-38);
}
html[data-theme="light"] .stat-card {
background: rgba(0, 0, 0, 0.03);
border: 1px solid var(--color-white-8);
}
html[data-theme="light"] .stat-card::after {
background: linear-gradient(90deg, var(--color-primary), var(--color-white));
}
html[data-theme="light"] .stat-number {
background: linear-gradient(110deg, var(--color-primary) 40%, var(--s) 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* What We Do — elegant light mode */
html[data-theme="light"] .what-we-do {
background: #f7f7f7;
color: #111;
}
/* Progress bar */
html[data-theme="light"] .wwd-progress-bar {
background: rgba(0, 0, 0, 0.06);
}
/* Step counter */
html[data-theme="light"] .wwd-step-counter {
color: rgba(17, 17, 17, 0.3);
}
/* Sidebar items */
html[data-theme="light"] .service-item .material-symbols-outlined {
color: rgba(17, 17, 17, 0.2);
}
html[data-theme="light"] .service-name {
color: rgba(17, 17, 17, 0.35);
font-weight: 400;
}
html[data-theme="light"] .service-item.active .material-symbols-outlined {
color: #ff6b00;
}
html[data-theme="light"] .service-item.active .service-name {
color: #111;
font-weight: 600;
}
html[data-theme="light"] .service-item:hover {
background: rgba(255, 107, 0, 0.05);
}
/* Active item left accent line */
html[data-theme="light"] .service-item.active {
border-left: 2px solid #ff6b00;
padding-left: calc(1.2rem - 2px);
}
/* Detail text */
html[data-theme="light"] .service-detail h3 {
color: #111 !important;
}
html[data-theme="light"] .service-detail h3 .detail-highlight {
color: #111 !important;
}
html[data-theme="light"] .detail-subtitle {
color: rgba(17, 17, 17, 0.45) !important;
}
html[data-theme="light"] .service-detail p {
color: rgba(17, 17, 17, 0.65) !important;
}
html[data-theme="light"] .detail-link {
color: #ff6b00;
border-bottom-color: rgba(255, 107, 0, 0.3);
}
html[data-theme="light"] .detail-link:hover {
color: #111;
border-bottom-color: rgba(17, 17, 17, 0.25);
}
/* Header text */
html[data-theme="light"] .what-we-do-header h2 {
color: #111 !important;
}
html[data-theme="light"] .what-we-do-header p {
color: rgba(17, 17, 17, 0.6) !important;
}
/* Dot pagination */
html[data-theme="light"] .wwd-dot {
background: rgba(17, 17, 17, 0.12);
}
html[data-theme="light"] .wwd-dot.active {
background: #ff6b00;
box-shadow: 0 0 8px rgba(255, 107, 0, 0.4);
}
/* Scroll hint */
html[data-theme="light"] .wwd-scroll-hint span {
color: rgba(17, 17, 17, 0.25);
}
html[data-theme="light"] .wwd-scroll-hint .scroll-mouse {
border-color: rgba(17, 17, 17, 0.15);
}
/* Image overlay — light fade from left, image stays visible on right */
html[data-theme="light"] .service-image .img-overlay {
background:
linear-gradient(
90deg,
#f7f7f7 0%,
rgba(247, 247, 247, 0.88) 12%,
rgba(247, 247, 247, 0.5) 28%,
rgba(247, 247, 247, 0.1) 52%,
transparent 70%
),
linear-gradient(180deg, rgba(247, 247, 247, 0.25) 0%, transparent 22%),
linear-gradient(0deg, rgba(247, 247, 247, 0.3) 0%, transparent 25%);
}
/* Image — slightly brighter in light mode */
html[data-theme="light"] #serviceImage {
filter: brightness(0.88) saturate(1.05);
}
/* Latest Blogs — light background + black text */
html[data-theme="light"] .blog-section {
background:
radial-gradient(
circle at top right,
rgba(255, 107, 0, 0.08),
transparent 45%
),
radial-gradient(
circle at bottom left,
rgba(255, 107, 0, 0.06),
transparent 40%
),
var(--color-bg);
}
html[data-theme="light"] .blog-header p {
color: var(--color-white-80);
}
html[data-theme="light"] .blog-cta .view-all-blogs {
color: var(--color-white);
}
html[data-theme="light"] .blog-cta .view-all-blogs:hover {
color: var(--color-primary);
}
/* Let's Work Together — light background + black text */
html[data-theme="light"] .work-section {
background:
radial-gradient(
circle at top left,
rgba(255, 107, 0, 0.08) 0%,
rgba(255, 107, 0, 0) 45%
),
radial-gradient(
circle at bottom right,
rgba(0, 0, 0, 0.04) 0%,
rgba(0, 0, 0, 0) 50%
),
var(--color-bg);
}
html[data-theme="light"] .work-content {
border: 1px solid rgba(255, 107, 0, 0.26);
background:
linear-gradient(
160deg,
rgba(255, 107, 0, 0.08) 0%,
rgba(255, 107, 0, 0.02) 44%,
rgba(0, 0, 0, 0.02) 100%
),
rgba(255, 255, 255, 0.95);
box-shadow:
0 18px 46px rgba(0, 0, 0, 0.08),
0 2px 14px rgba(255, 107, 0, 0.06);
}
html[data-theme="light"] .work-content::before {
background-image: linear-gradient(
120deg,
rgba(0, 0, 0, 0.02),
rgba(0, 0, 0, 0)
);
}
html[data-theme="light"] .work-content h2 {
color: var(--color-white);
}
html[data-theme="light"] .work-content p {
color: var(--w80);
}
html[data-theme="light"] .work-buttons .btn-secondary {
color: var(--w80);
border-color: var(--color-white-25);
}
html[data-theme="light"] .work-buttons .btn-secondary:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
/* FAQ section — uses vars; ensure text is black in light */
html[data-theme="light"] .faq-header h2,
html[data-theme="light"] .faq-header p,
html[data-theme="light"] .faq-question,
html[data-theme="light"] .faq-answer p,
html[data-theme="light"] .faq-cta,
html[data-theme="light"] .faq-read-more-btn {
color: var(--color-white);
}
html[data-theme="light"] .faq-header p {
color: var(--color-white-80);
}
html[data-theme="light"] .faq-answer p {
color: var(--color-white-80);
}
html[data-theme="light"] .faq-read-more-btn {
color: var(--color-primary);
}
/* Testimonials (t-section) — uses var(--bg) and var(--white); text already theme-aware */
html[data-theme="light"] .t-section {
background: var(--bg);
color: var(--white);
}
html[data-theme="light"] .t-title,
html[data-theme="light"] .t-header p,
html[data-theme="light"] .t-counter,
html[data-theme="light"] .card-inner blockquote,
html[data-theme="light"] .card-footer .author-name,
html[data-theme="light"] .card-footer .author-role,
html[data-theme="light"] .industry-tag,
html[data-theme="light"] .stat-block .snum,
html[data-theme="light"] .stat-block .sdesc,
html[data-theme="light"] .tag {
color: var(--color-white);
}
html[data-theme="light"] .t-card {
background: var(--color-surface);
border-color: var(--color-white-8);
}
html[data-theme="light"] .big-quote {
color: var(--color-white-22);
}
html[data-theme="light"] .swipe-hint .hint-text {
color: var(--color-white-38);
}
html[data-theme="light"] .nav-btn {
color: var(--color-white);
border-color: var(--color-white-8);
}
html[data-theme="light"] .nav-btn:hover:not(:disabled) {
background: var(--color-primary-10);
border-color: var(--color-primary);
color: var(--color-primary);
}
html[data-theme="light"] .t-dot {
background: var(--color-white-22);
}
html[data-theme="light"] .t-dot.active {
background: var(--color-primary);
}
html[data-theme="light"] #curIdx {
background: linear-gradient(
145deg,
var(--primary) 0%,
var(--color-white) 100%
);
-webkit-background-clip: text;
background-clip: text;
}
html[data-theme="light"] .t-counter-line {
background: linear-gradient(to bottom, var(--primary), var(--color-white-8));
}
html[data-theme="light"] .t-counter-total {
color: var(--color-white-22);
}
html[data-theme="light"] .card-num {
color: var(--color-white-22);
}
html[data-theme="light"] .e-code::after {
background: linear-gradient(135deg, #d45a00, #e68a00) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}