/* =================================================================
CONCEPT ASIA PHARMA MACHINES AND TECHNOLOGY
Cream-white luxury theme — warm paper, ink type, ember accent
================================================================= */
:root{
/* ── WHITE · SOFT CORAL · SOFT LAVENDER · OXBLOOD ──
Clean white surfaces, tinted with very light orange and very light purple
blooms. Oxblood red stays the brand anchor; gold becomes a tertiary
highlight. */
--cream: #FFFFFF; /* pure white — body background */
--cream-2: #FFFFFF; /* pure white — cards & elevated surfaces */
--cream-3: #FAF6F2; /* faintly warm white — section bands */
--cream-4: #F3EDFA; /* very light lavender — soft dividers */
--cream-glow: #FFFAF5; /* near-white highlight */
/* Tint blooms used in body / hero / page-hero gradients */
--tint-orange: #FFF1E6; /* very light peach */
--tint-orange-2: #FFE2CC; /* slightly stronger peach */
--tint-purple: #F2ECFF; /* very light lavender */
--tint-purple-2: #E5DAFF; /* slightly stronger lavender */
--ink: #1B1726; /* near-black, slight cool tone — primary text */
--ink-2: #2A2335; /* deep aubergine — headings */
--ink-3: #4B4458; /* muted purple-grey — tertiary text */
--ink-soft: #6B6478; /* soft purple-grey — subdued */
--muted: #8B8499; /* meta */
--muted-2: #B8B1C4; /* lighter */
/* lines / borders — dark alpha for light theme */
--line: rgba(27,23,38,0.08);
--line-2: rgba(27,23,38,0.15);
--line-soft: rgba(27,23,38,0.04);
/* accents — oxblood red stays primary brand */
--accent: #8B1F2B; /* oxblood — primary accent */
--accent-2: #6E1521; /* deeper red — hover */
--accent-3: #B33046; /* brighter ruby — highlight */
--accent-soft: rgba(139,31,43,0.10);
/* gold — kept for legacy use, but quieter */
--gold: #C9942C;
--gold-2: #9B7320;
--gold-3: #E8C485;
--gold-soft: rgba(201,148,44,0.14);
/* coral & lavender — new secondary accents that match the tint blooms */
--coral: #E8754A;
--coral-2: #C95A30;
--coral-3: #F9C9B0;
--coral-soft: rgba(232,117,74,0.12);
--lavender: #7C5FE0;
--lavender-2: #5D40C7;
--lavender-3: #C8B8FF;
--lavender-soft: rgba(124,95,224,0.12);
--ember: #B33046;
--clay: #8B1F2B;
/* shadow color — neutral with a hint of purple */
--shadow-hue: 27, 23, 38;
--warm-glow: rgba(232,117,74,.20);
--cool-glow: rgba(124,95,224,.18);
/* semantic surface tokens — flip cleanly in dark mode */
--surface: #FFFFFF; /* cards, modals, form inputs */
--surface-2: #FAF6F2; /* faint band underneath */
--surface-elev: #FFFFFF; /* dropdowns, tooltips, popovers */
--on-surface: #1B1726; /* text on --surface */
--on-surface-2: #4B4458; /* secondary text on --surface */
/* aliases */
--paper: var(--ink);
--paper-2: var(--ink-2);
/* fonts */
--f-display: 'Fraunces', 'Noto Serif JP', 'Noto Serif SC', 'Times New Roman', serif;
--f-sans: 'Inter', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans JP', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--f-mono: 'JetBrains Mono', 'Courier New', monospace;
--r-sm: 6px;
--r-md: 14px;
--r-lg: 24px;
--r-xl: 40px;
--ease: cubic-bezier(.7,.05,.15,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-back: cubic-bezier(.34,1.56,.64,1);
--dur: .7s;
--container: 1400px;
--container-px: clamp(20px, 4vw, 64px);
/* warm-tinted shadows for cream theme */
--shadow-sm: 0 1px 3px rgba(31,24,19,.06), 0 1px 2px rgba(139,31,43,.03);
--shadow-md: 0 8px 22px rgba(31,24,19,.08), 0 3px 6px rgba(201,148,44,.05);
--shadow-lg: 0 20px 44px rgba(31,24,19,.12), 0 8px 16px rgba(201,148,44,.08);
--shadow-xl: 0 30px 70px rgba(31,24,19,.16), 0 12px 24px rgba(139,31,43,.10);
--shadow-glow: 0 0 24px rgba(139,31,43,.24);
--shadow-gold-glow: 0 0 24px rgba(201,148,44,.30);
}
/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
scroll-behavior:auto;
/* Prevent iOS Safari font-size auto-inflation on rotate */
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
/* Remove blue tap-highlight flash on iOS */
*{ -webkit-tap-highlight-color:transparent; }
/* Snappy taps — kills the legacy 300ms click delay on every interactive */
a, button, [role="button"], input[type="submit"], input[type="button"],
.card, .why-item, .value, .resource, .testimonial, .india-loc, .industry-cell,
.filter-btn, .nav-link, .nav-cta, .nav-toggle, .theme-toggle, .lang-switcher-btn,
.nav-search-btn, summary, .quote-pill, .whatsapp-fab, .to-top{
touch-action:manipulation;
}
body{
font-family:var(--f-sans);
color:var(--ink);
/* Layered soft-tint blooms — peach top-left, lavender top-right,
coral wash bottom-right — over pure white. Stays subtle so text
never fights for contrast. */
background:
radial-gradient(ellipse 65% 45% at 8% 5%, var(--tint-orange) 0%, transparent 60%),
radial-gradient(ellipse 65% 50% at 95% 18%, var(--tint-purple) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 100%, var(--tint-orange) 0%, transparent 60%),
radial-gradient(ellipse 55% 40% at 8% 80%, var(--tint-purple) 0%, transparent 60%),
#FFFFFF;
background-attachment: fixed;
line-height:1.6;
font-size:16px;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings: "ss01", "kern", "liga", "calt";
font-kerning: normal;
overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; transition:color .25s ease; }
a.text-link{ color:var(--accent); border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
a.text-link:hover{ color:var(--accent-2); border-bottom-color:currentColor; }
button{ font:inherit; background:none; border:0; color:inherit; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }
/* fluid type scale */
.display-1{ font-family:var(--f-display); font-weight:300; font-size:clamp(3rem, 9vw, 9.5rem); line-height:.92; letter-spacing:-.04em; color:var(--ink-2); }
.display-2{ font-family:var(--f-display); font-weight:300; font-size:clamp(2.4rem, 6.4vw, 6rem); line-height:.95; letter-spacing:-.035em; color:var(--ink-2); }
.h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(2rem, 4.4vw, 4rem); line-height:1; letter-spacing:-.025em; color:var(--ink-2); }
.h3{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem, 2.6vw, 2.4rem);line-height:1.1; letter-spacing:-.02em; color:var(--ink-2); }
.eyebrow{
font-family:var(--f-mono);
font-size:.75rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--ink-soft);
display:inline-flex;
align-items:center;
gap:.75rem;
}
.eyebrow::before{
content:""; width:32px; height:1px;
background:linear-gradient(90deg, var(--accent), var(--coral), var(--lavender));
}
.italic{ font-style:italic; }
.serif{ font-family:var(--f-display); }
/* ---------- Container ---------- */
.container{
max-width:var(--container);
margin-inline:auto;
padding-inline:var(--container-px);
position:relative;
}
/* ---------- Custom Cursor disabled (using system cursor) ---------- */
.cursor, .cursor-ring{ display:none !important; }
/* ---------- Page loader (white with soft orange + lavender tints) ---------- */
.loader{
position:fixed; inset:0;
background:
radial-gradient(ellipse 50% 40% at 20% 30%, var(--tint-orange) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 70%, var(--tint-purple) 0%, transparent 60%),
radial-gradient(ellipse at center, #FFFFFF, #FFFFFF 65%);
z-index:10000;
display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2rem;
opacity:1; visibility:visible;
transition:opacity .55s ease, visibility 0s linear .55s;
padding:0 1rem;
}
html.is-loaded .loader{
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .55s ease, visibility 0s linear .55s;
}
.loader-logo{
font-family:var(--f-display); font-weight:400;
font-size:clamp(1rem, 2.6vw, 1.6rem);
letter-spacing:.04em; color:var(--ink-2);
text-align:center; max-width:760px; line-height:1.3;
text-transform:uppercase;
position:relative;
}
.loader-logo::before{
content:""; display:block; width:48px; height:48px;
border-radius:12px; margin:0 auto 1.5rem;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
box-shadow:0 6px 18px rgba(139,31,43,.32);
animation:loaderMarkPulse 1.6s ease-in-out infinite;
}
@keyframes loaderMarkPulse{
0%, 100%{ transform:scale(1); box-shadow:0 6px 18px rgba(139,31,43,.32); }
50% { transform:scale(1.08); box-shadow:0 8px 24px rgba(139,31,43,.45); }
}
.loader-spinner{
width:240px; max-width:60vw; height:2px;
background:rgba(31,24,19,.08); border-radius:1px;
position:relative; overflow:hidden;
}
.loader-spinner::after{
content:""; position:absolute; left:-30%; top:0; bottom:0;
width:30%;
background:linear-gradient(90deg, transparent, var(--accent) 30%, var(--gold) 70%, transparent);
animation:loaderSweep 1.4s cubic-bezier(.4,0,.6,1) infinite;
border-radius:1px;
}
@keyframes loaderSweep{
0% { left:-30%; }
100% { left:100%; }
}
.loader-bar{ display:none; }
@media (max-width:480px){
.loader-logo{ font-size:.85rem; letter-spacing:.02em; }
.loader-spinner{ width:180px; }
}
/* ---------- Header / Nav ---------- */
.header{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:22px 0;
transition:background .4s var(--ease-out), padding .4s var(--ease-out), border-color .4s, box-shadow .4s, color .4s;
border-bottom:1px solid transparent;
-webkit-backdrop-filter:blur(0);
backdrop-filter:blur(0);
color:#FFFAF0;
}
/* While over the dark hero — light text */
.header .logo-name{ color:#FFFAF0; transition:color .4s; }
.header .logo-text small{ color:rgba(232,196,133,.95); transition:color .4s; }
.header .nav-link{ color:rgba(255,250,240,.80); }
.header .nav-link:hover, .header .nav-link.is-active{ color:#FFFAF0; }
.header .nav-cta{ color:#FFFAF0; border-color:rgba(255,250,240,.30); }
.header .nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:#FFFAF0; }
.header .lang-switcher-btn{ color:rgba(255,250,240,.88); border-color:rgba(255,250,240,.25); }
.header .nav-toggle{ border-color:rgba(255,250,240,.25); }
.header .nav-toggle span,
.header .nav-toggle span::before,
.header .nav-toggle span::after{ background:#FFFAF0; }
/* When scrolled — flip to dark text on cream */
.header.is-scrolled{ color:var(--ink); }
.header.is-scrolled .logo-name{ color:var(--ink); }
.header.is-scrolled .logo-text small{ color:var(--gold-2); }
.header.is-scrolled .nav-link{ color:var(--ink-soft); }
.header.is-scrolled .nav-link:hover, .header.is-scrolled .nav-link.is-active{ color:var(--ink); }
.header.is-scrolled .nav-cta{ color:var(--ink); border-color:var(--line-2); }
.header.is-scrolled .lang-switcher-btn{ color:var(--ink); border-color:var(--line-2); }
.header.is-scrolled .nav-toggle{ border-color:var(--line-2); }
.header.is-scrolled .nav-toggle span,
.header.is-scrolled .nav-toggle span::before,
.header.is-scrolled .nav-toggle span::after{ background:var(--ink); }
.header.is-scrolled{
background:rgba(245,241,232,.92);
-webkit-backdrop-filter:blur(22px) saturate(160%);
backdrop-filter:blur(22px) saturate(160%);
-webkit-backdrop-filter:blur(22px) saturate(160%);
border-bottom-color:var(--line);
padding:14px 0;
box-shadow:0 4px 24px rgba(31,24,19,.08);
}
/* Header row layout — the right cluster (search · theme · lang · CTA) needs
tight, even spacing so every control stays visible on small laptops. */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:.65rem; }
.nav-links + .nav-search-btn,
.nav-search-btn + .theme-toggle,
.theme-toggle + .lang-switcher,
.lang-switcher + .nav-cta{ margin-left:.3rem; }
.nav-links{ display:flex; gap:1.5rem; align-items:center; }
.logo{
display:flex; align-items:center; gap:.85rem;
font-family:var(--f-display); letter-spacing:-.01em;
color:var(--ink);
text-decoration:none;
}
.logo-mark{
width:40px; height:40px; border-radius:10px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
display:grid; place-items:center; color:var(--gold-3);
font-family:var(--f-display); font-weight:500;
font-size:.95rem; letter-spacing:.02em;
box-shadow: 0 4px 14px rgba(139,31,43,.42), inset 0 1px 0 rgba(255,255,255,.08);
position:relative; overflow:hidden; flex-shrink:0;
transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.logo-mark::after{
content:""; position:absolute; inset:0; border-radius:10px;
background:linear-gradient(135deg, transparent 0%, rgba(212,165,89,.12) 100%);
}
.logo-mark::before{
content:""; position:absolute; inset:1px; border-radius:9px;
border:1px solid rgba(212,165,89,.20);
}
.logo:hover .logo-mark{
transform:rotate(-4deg) scale(1.04);
box-shadow: 0 6px 20px rgba(139,31,43,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
.logo-mark span{ position:relative; z-index:2; }
.logo-text{ line-height:1.1; display:flex; flex-direction:column; gap:3px; }
.logo-name{
font-family:var(--f-display); font-weight:500; font-size:.92rem;
letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
white-space:nowrap;
}
.logo-text small{
display:block; font-family:var(--f-mono); font-size:.55rem;
letter-spacing:.26em; color:var(--gold-2); text-transform:uppercase;
white-space:nowrap;
}
@media (max-width:1180px){
.logo-name{ font-size:.78rem; letter-spacing:.16em; }
.logo-text small{ font-size:.5rem; letter-spacing:.22em; }
}
@media (max-width:560px){
.logo-mark{ width:34px; height:34px; font-size:.85rem; }
.logo-name{ font-size:.7rem; letter-spacing:.12em; }
.logo-text small{ display:none; }
}
/* nav-links gap is set near .nav above (1.5rem) — this line kept as
a no-op placeholder to preserve cascade. */
.nav-links{ align-items:center; }
.nav-link{
position:relative; font-size:.92rem; padding:.6rem 0;
color:var(--ink-soft);
transition:color .25s ease;
}
.nav-link::after{
content:""; position:absolute; left:0; bottom:.25rem; width:100%; height:2px;
background:linear-gradient(90deg, var(--accent) 0%, var(--coral) 60%, var(--lavender) 100%);
transform:scaleX(0); transform-origin:right;
transition:transform .45s cubic-bezier(.65,0,.35,1);
border-radius:1px;
}
.nav-link:hover, .nav-link.is-active{ color:var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav-cta{
display:inline-flex; align-items:center; gap:.4rem;
padding:.55rem .95rem; border-radius:999px;
border:1px solid var(--line-2);
background:transparent;
color:var(--ink);
font-size:.75rem; font-weight:500; letter-spacing:.05em;
text-transform:uppercase;
transition:background .3s, border-color .3s, color .3s;
white-space:nowrap;
}
.nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:#FFFAF0; }
.nav-cta .arrow,
.nav-cta svg{ width:.85rem; height:.85rem; transition:transform .25s ease; }
.nav-cta:hover .arrow,
.nav-cta:hover svg{ transform:translateX(3px); }
.nav-toggle{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); align-items:center; justify-content:center; background:transparent; transition:border-color .25s, background .25s; }
.nav-toggle:hover{ border-color:var(--gold); }
.nav-toggle span{ width:18px; height:1px; background:var(--ink); position:relative; }
.nav-toggle span::before, .nav-toggle span::after{
content:""; position:absolute; left:0; width:100%; height:1px; background:var(--ink);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top: 6px; }
/* Mobile nav overlay */
.mobile-nav{
position:fixed; inset:0; z-index:99;
background:
radial-gradient(ellipse at center, rgba(201,148,44,.18), transparent 70%),
var(--cream-3);
transform:translateY(-100%);
transition:transform .7s var(--ease);
display:flex; align-items:center; justify-content:center;
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:1.25rem; text-align:center; }
.mobile-nav a{ font-family:var(--f-display); font-size:clamp(1.8rem,6.5vw,3.5rem); letter-spacing:-.02em; color:var(--ink); transition:color .25s ease; }
.mobile-nav a:hover{ color:var(--accent); }
/* ---------- Buttons (refined cream + red + gold) ---------- */
.btn{
display:inline-flex; align-items:center; gap:.65rem;
padding:.95rem 1.6rem; border-radius:3px;
font-size:.85rem; font-weight:500; letter-spacing:.06em;
text-transform:uppercase;
background:var(--ink); color:var(--cream);
transition:background .35s ease, color .35s ease, box-shadow .35s ease,
transform .35s ease, border-color .35s ease, letter-spacing .35s ease;
box-shadow:var(--shadow-md);
border:1px solid var(--ink);
position:relative; overflow:hidden;
cursor:pointer;
}
.btn::before{
content:""; position:absolute; left:-100%; top:0; bottom:0; width:100%;
background:linear-gradient(90deg, transparent, rgba(255,236,180,.35), transparent);
transition:left .8s ease;
}
.btn:hover{
background:linear-gradient(135deg, var(--accent) 0%, var(--lavender) 100%);
border-color:var(--accent);
color:#FFFAF0;
box-shadow:var(--shadow-lg), 0 0 26px rgba(139,31,43,.28), 0 0 24px var(--cool-glow);
letter-spacing:.08em;
}
.btn:hover::before{ left:100%; }
.btn:active{ transform:translateY(1px); }
.btn .arrow{ width:.95rem; height:.95rem; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--ghost{
background:transparent; color:var(--ink); border:1px solid var(--line-2); box-shadow:none;
}
.btn--ghost:hover{
background:transparent; color:var(--accent); border-color:var(--accent);
box-shadow:0 0 18px rgba(139,31,43,.18);
}
.btn--accent{
background:linear-gradient(135deg, var(--accent) 0%, var(--coral) 100%);
color:#FFFAF0;
border-color:var(--accent);
box-shadow:var(--shadow-md);
}
.btn--accent:hover{
background:linear-gradient(135deg, var(--lavender) 0%, var(--accent) 100%);
border-color:var(--lavender);
color:#FFFAF0;
box-shadow:var(--shadow-lg), 0 0 28px var(--cool-glow);
}
.btn--lg{ padding:1.1rem 1.95rem; font-size:.9rem; }
/* magnetic wrapper neutralised */
.magnetic{ display:inline-block; }
/* ---------- Section base ----------
Tightened global rhythm: was clamp(80,12vw,180) top+bottom — felt cavernous
on desktop. New clamp(56,7vw,110) keeps generous breathing room without
the empty-canyon feeling. Section-head margin tightened in proportion. */
section{ position:relative; padding:clamp(56px, 7vw, 110px) 0; }
.section-head{ display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(28px,4.5vw,56px); max-width:880px; }
.section-head.center{ margin-inline:auto; text-align:center; align-items:center; }
/* Animated underline on section headings — draws in when revealed */
.section-head .eyebrow.reveal::before{
width:0;
transition:width .9s cubic-bezier(.16,1,.3,1) .2s;
}
.section-head .eyebrow.reveal.in::before{
width:32px;
}
/* Optional tinted section variant — very subtle lavender/peach wash */
.section--band{
background:
linear-gradient(180deg, transparent 0%, var(--tint-purple) 50%, transparent 100%),
linear-gradient(90deg, var(--tint-orange) 0%, transparent 60%),
#FFFFFF;
}
/* Reveal animations — elegant, intentional */
.reveal{
opacity:0; transform:translateY(20px);
transition:opacity .85s cubic-bezier(.16,1,.3,1),
transform .85s cubic-bezier(.16,1,.3,1);
will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }
/* Headline reveal — gentle vertical with opacity */
.split-line{ display:block; overflow:hidden; }
.split-line > span{
display:inline-block; opacity:0; transform:translateY(20px);
transition:opacity .9s cubic-bezier(.16,1,.3,1) .1s,
transform .9s cubic-bezier(.16,1,.3,1) .1s;
}
.split-line.in > span{ opacity:1; transform:none; }
.split-line:nth-of-type(2) > span{ transition-delay:.22s; }
.split-line:nth-of-type(3) > span{ transition-delay:.34s; }
/* ---------- Hero (warm cinematic, melts into golden cream) ---------- */
.hero{
/* 100dvh = "the visible viewport right now" — accounts for iOS Safari's
dynamic address bar so the hero never hides content behind the bottom
toolbar. Fallback to 100vh for browsers without dvh support. */
min-height:100vh;
min-height:100dvh;
display:flex; align-items:flex-end;
padding-top:140px; padding-bottom:80px;
overflow:hidden; position:relative;
background:#0F0A05; /* deeper espresso for stronger contrast */
color:#FAF7F0;
}
.hero-bg{
position:absolute; inset:0; z-index:0;
}
.hero-bg video{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:.52;
filter:contrast(1.1) saturate(1.05) sepia(.18) brightness(1.02);
transform:scale(1.05);
}
.hero-bg::after{
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse at 78% 18%, rgba(139,31,43,.38), transparent 55%),
radial-gradient(ellipse at 22% 78%, rgba(124,95,224,.18), transparent 60%),
radial-gradient(ellipse at 50% 110%, rgba(232,117,74,.20), transparent 60%),
linear-gradient(180deg,
rgba(10,8,5,.45) 0%,
rgba(10,8,5,.60) 40%,
rgba(10,8,5,.75) 70%,
rgba(10,8,5,.88) 92%,
#FFFFFF 100%);
}
.hero-bg::before{
content:""; position:absolute; inset:0; z-index:1;
background-image:
linear-gradient(rgba(212,165,89,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(212,165,89,.05) 1px, transparent 1px);
background-size:80px 80px;
mix-blend-mode:overlay;
}
.hero-content{ position:relative; z-index:2; width:100%; }
.hero-content .eyebrow{ color:rgba(255,250,240,.82); font-weight:500; }
.hero-content .eyebrow::before{ background:var(--gold-3); }
.hero-title{
font-family:var(--f-display); font-weight:300;
font-size:clamp(2.4rem, 7.5vw, 7.5rem);
line-height:.95; letter-spacing:-.035em;
margin-bottom:2rem;
color:#FFFAF0;
text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-title .italic{
font-weight:300; font-style:italic;
background:linear-gradient(135deg, var(--gold-3) 0%, var(--gold) 50%, var(--gold-2) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero-title .stroke{ -webkit-text-stroke:1.2px #FFFAF0; color:transparent; }
.hero-meta{
display:flex; justify-content:space-between; align-items:end;
gap:2rem; flex-wrap:wrap; margin-top:3rem;
}
.hero-tag{ max-width:420px; font-size:1.05rem; color:rgba(255,250,240,.88); text-shadow:0 1px 8px rgba(0,0,0,.30); }
.hero-stats{ display:flex; gap:2.5rem; }
.hero-stat .num{ font-family:var(--f-display); font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; color:#FFFAF0; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.hero-stat .lbl{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,250,240,.72); margin-top:.5rem; }
/* Scroll hint — anchored to the far right so it never collides with the
centered stat columns. Hidden on narrow viewports where the stats wrap
and the hint would overlap them. */
.scroll-hint{
position:absolute; bottom:34px; right:max(32px, 4vw);
display:flex; flex-direction:column; align-items:center; gap:.75rem; z-index:2;
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,250,240,.78);
pointer-events:none;
}
.scroll-hint-line{
width:1px; height:44px;
background:linear-gradient(180deg, transparent, var(--accent-3), transparent);
background-size:100% 200%;
animation:scrollLine 2s linear infinite;
}
@keyframes scrollLine{ from{ background-position:0 -100%;} to{ background-position:0 100%;} }
@media (max-width:1180px){
/* Stats wrap to two rows around here — hide hint to avoid clashes.
!important to defeat any later cascade override. */
.scroll-hint{ display:none !important; }
}
/* ---------- Marquee — elegant warm band ---------- */
.marquee{
display:flex; gap:3rem; overflow:hidden;
padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
white-space:nowrap;
background:
linear-gradient(90deg, var(--tint-orange) 0%, #FFFFFF 50%, var(--tint-purple) 100%);
}
.marquee-track{
display:flex; gap:3rem; flex-shrink:0;
animation:marquee 60s linear infinite;
font-family:var(--f-display); font-size:clamp(1.2rem,2.6vw,2rem);
letter-spacing:-.01em;
}
.marquee-track span{ display:inline-flex; align-items:center; gap:3rem; color:var(--ink-2); }
.marquee-track span::after{
content:""; width:6px; height:6px; border-radius:50%;
background:linear-gradient(135deg, var(--accent), var(--coral), var(--lavender));
flex-shrink:0;
}
.marquee-track .ghost{ color:var(--muted); font-style:italic; }
@keyframes marquee{ to{ transform:translateX(-100%);} }
/* ---------- Card / Product item ---------- */
.product-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem;
}
.card{
position:relative; overflow:hidden; border-radius:var(--r-md);
background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 70%, var(--tint-purple) 100%);
border:1px solid var(--line);
transition:transform .55s cubic-bezier(.16,1,.3,1),
border-color .45s ease,
box-shadow .5s cubic-bezier(.16,1,.3,1);
box-shadow:var(--shadow-sm);
}
.card::before{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(255,255,255,.85) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none; z-index:2;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.card:hover::before{ left:150%; }
.card::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
border-radius:inherit;
background:
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,.5), transparent 70%),
linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 30%, transparent 100%);
opacity:.6;
mix-blend-mode:overlay;
}
.card:hover{
transform:translateY(-8px);
border-color:rgba(124,95,224,.30);
box-shadow:
var(--shadow-lg),
0 0 36px var(--cool-glow),
0 0 18px var(--warm-glow);
}
.card-media{
position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--cream-3);
z-index:0;
}
.card-body{ position:relative; z-index:1; }
.card-media img,
.card-media video{
width:100%; height:100%; object-fit:cover;
transition:transform .5s ease;
}
.card:hover .card-media img,
.card:hover .card-media video{ transform:scale(1.03); }
.card-media::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, transparent 55%, rgba(26,24,20,.55) 100%);
}
.card-tag{
position:absolute; top:14px; left:14px; z-index:3;
font-family:var(--f-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
padding:6px 12px; border-radius:999px;
background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); color:var(--ink);
background:rgba(255,255,255,.94); backdrop-filter:blur(8px); color:var(--ink);
border:1px solid rgba(27,23,38,.10);
box-shadow:0 2px 10px rgba(27,23,38,.10);
transition:background .4s ease, color .4s ease, border-color .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.card:hover .card-tag{
background:linear-gradient(135deg, var(--accent) 0%, var(--lavender) 100%);
color:#FFFAF0;
border-color:transparent;
transform:translateY(-3px) scale(1.03);
box-shadow:0 6px 16px rgba(139,31,43,.25);
}
.card-body{ padding:1.25rem 1.4rem 1.5rem; background:var(--cream-2); }
.card-title{ font-family:var(--f-display); font-size:1.4rem; line-height:1.15; letter-spacing:-.015em; color:var(--ink-2); }
.card-meta{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; }
/* Featured / Big card variant */
.card--feature{ grid-column:span 2; }
.card--feature .card-media{ aspect-ratio:16/10; }
.card--feature .card-title{ font-size:2rem; }
/* ---------- Stat block ---------- */
.stats{
display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
border:1px solid var(--line);
border-radius:var(--r-md);
overflow:hidden;
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--surface) 50%, var(--tint-purple) 100%);
box-shadow:var(--shadow-sm);
}
.stat{
padding:2.25rem 1.75rem;
border-right:1px solid var(--line);
display:flex; flex-direction:column; gap:.55rem;
position:relative; overflow:hidden;
isolation:isolate;
transition:transform .55s cubic-bezier(.16,1,.3,1),
box-shadow .5s cubic-bezier(.16,1,.3,1),
background .45s ease;
}
.stat:last-child{ border-right:0; }
/* Glossy gradient overlay — always visible, gives the "glass under
raking light" look. Top half catches highlight, bottom half holds a
subtle warm/cool tint. */
.stat::after{
content:""; position:absolute; inset:0; z-index:0;
background:
linear-gradient(165deg,
rgba(255,255,255,.55) 0%,
rgba(255,255,255,.18) 22%,
transparent 40%,
transparent 70%,
rgba(232,117,74,.07) 100%);
pointer-events:none;
mix-blend-mode:overlay;
}
/* Shine sweep — only triggers on hover */
.stat::before{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%; z-index:0;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(255,255,255,.85) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.stat:hover::before{ left:150%; }
.stat:hover{
background:linear-gradient(180deg, rgba(255,255,255,.45) 0%, transparent 100%);
transform:translateY(-3px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 28px var(--warm-glow);
z-index:2;
}
.stat-num{
position:relative; z-index:1;
font-family:var(--f-display); font-weight:300;
font-size:clamp(2.6rem,5vw,4.6rem); line-height:1; letter-spacing:-.04em;
background:linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
/* faint reflective sheen on the digits themselves */
filter:drop-shadow(0 1px 0 rgba(255,255,255,.6));
transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.stat:hover .stat-num{ transform:translateY(-2px) scale(1.02); }
.stat-num .plus{
background:linear-gradient(135deg, var(--accent) 0%, var(--coral) 55%, var(--lavender) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.stat-lbl{
position:relative; z-index:1;
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--ink-soft);
transition:color .35s ease;
}
.stat:hover .stat-lbl{ color:var(--accent); }
@media (max-width:900px){
.stats{ grid-template-columns:repeat(2,1fr); }
.stat:nth-child(2n){ border-right:0; }
.stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
/* ---------- Industries strip ---------- */
.industries-strip{
display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
background:var(--line);
border-radius:var(--r-md);
overflow:hidden;
}
.industry-cell{
background:#FFFFFF; padding:3rem 2rem;
display:flex; flex-direction:column; gap:1rem;
transition:background .55s ease,
transform .65s cubic-bezier(.16,1,.3,1),
box-shadow .55s cubic-bezier(.16,1,.3,1);
color:var(--ink);
position:relative; overflow:hidden;
isolation:isolate;
}
/* Shine sweep on hover */
.industry-cell::after{
content:""; position:absolute; top:-50%; left:-150%;
width:80%; height:200%;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(232,117,74,.22) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none; z-index:0;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.industry-cell:hover::after{ left:160%; }
/* Soft glow halo behind content on hover */
.industry-cell .industry-num,
.industry-cell .industry-name,
.industry-cell .industry-desc{ position:relative; z-index:1; transition:transform .55s cubic-bezier(.16,1,.3,1), color .35s ease; }
.industry-cell:hover{
background:linear-gradient(180deg, var(--tint-orange) 0%, #FFFFFF 50%, var(--tint-purple) 100%);
transform:translateY(-6px);
box-shadow:0 14px 32px rgba(139,31,43,.10), 0 0 28px var(--warm-glow), 0 0 22px var(--cool-glow);
z-index:2;
}
.industry-cell:hover .industry-num{
color:var(--accent);
transform:translateY(-3px);
}
.industry-cell:hover .industry-name{
transform:translateY(-3px) scale(1.04);
transform-origin:left bottom;
}
.industry-cell:hover .industry-desc{
transform:translateY(-2px);
color:var(--ink-2);
}
.industry-num{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--muted);
}
.industry-name{
font-family:var(--f-display); font-size:clamp(1.5rem,2.4vw,2.4rem); line-height:1; letter-spacing:-.02em;
}
.industry-desc{ font-size:.92rem; color:var(--ink-3); }
@media (max-width:1000px){ .industries-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .industries-strip{ grid-template-columns:1fr; } }
/* ---------- Feature split (image + text) ---------- */
.split{
display:grid; grid-template-columns: 1.05fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center;
}
.split.reverse{ grid-template-columns: 1fr 1.05fr; }
.split.reverse .split-media{ order:2; }
.split-media{
position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md);
box-shadow:var(--shadow-lg);
}
.split-media img, .split-media video{ width:100%; height:100%; object-fit:cover; }
.split-media .badge{
position:absolute; top:24px; left:24px;
background:rgba(247,242,232,.92); -webkit-backdrop-filter:blur(10px); color:var(--ink);
background:rgba(247,242,232,.92); backdrop-filter:blur(10px); color:var(--ink);
padding:.6rem 1rem; border-radius:999px; border:1px solid var(--line-2);
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.split-text p{ color:var(--ink-3); font-size:1.05rem; }
.split-text p + p{ margin-top:1.25rem; }
@media (max-width:900px){ .split, .split.reverse{ grid-template-columns:1fr; } .split.reverse .split-media{ order:0; } }
/* ---------- CTA banner (deep aubergine — oxblood + lavender halo) ---------- */
.cta-banner{
background:
linear-gradient(135deg, #1A1226 0%, #261532 45%, #1A0F18 100%);
color:#FFFAF0; border-radius:var(--r-lg);
padding:clamp(48px,8vw,96px); position:relative; overflow:hidden;
isolation:isolate;
box-shadow:var(--shadow-xl);
border:1px solid rgba(255,250,240,.08);
}
.cta-banner::before{
content:""; position:absolute; right:-15%; top:-30%; width:600px; height:600px;
background:radial-gradient(circle, var(--accent) 0%, var(--lavender) 40%, transparent 65%);
opacity:.35; z-index:-1; filter:blur(60px);
}
.cta-banner::after{
content:""; position:absolute; left:-10%; bottom:-30%; width:500px; height:500px;
background:radial-gradient(circle, var(--coral), transparent 60%);
opacity:.20; z-index:-1; filter:blur(60px);
}
/* All text on dark banner — force light */
.cta-banner .eyebrow{ color:rgba(255,250,240,.65) !important; }
.cta-banner .eyebrow::before{
background:linear-gradient(90deg, var(--coral-3), var(--lavender-3));
}
.cta-banner h2{
font-family:var(--f-display); font-weight:300;
font-size:clamp(2rem,5vw,4.2rem); line-height:1.02; letter-spacing:-.03em;
max-width:880px; color:#FFFAF0;
text-shadow:0 2px 18px rgba(0,0,0,.30);
}
.cta-banner h2 .italic{
background:linear-gradient(135deg, var(--coral-3) 0%, var(--lavender-3) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.cta-banner .row{ display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-top:3rem; flex-wrap:wrap; }
.cta-banner p{ color:rgba(255,250,240,.78) !important; }
.cta-banner p strong{ color:#FFFAF0 !important; }
.cta-banner .btn{ background:#FFFAF0; border-color:#FFFAF0; color:var(--ink); box-shadow:0 6px 20px rgba(0,0,0,.25); }
.cta-banner .btn:hover{ background:var(--coral-3); border-color:var(--coral-3); color:var(--ink); }
.cta-banner .btn--accent{ background:linear-gradient(135deg, var(--coral) 0%, var(--accent) 100%); border-color:var(--coral); color:#FFFAF0; }
.cta-banner .btn--accent:hover{ background:linear-gradient(135deg, var(--lavender) 0%, var(--accent) 100%); border-color:var(--lavender); color:#FFFAF0; }
/* ---------- Footer (deep aubergine with lavender hairline) ---------- */
.footer{
padding:clamp(80px,10vw,140px) 0 40px;
border-top:1px solid rgba(200,184,255,.18);
background:
radial-gradient(ellipse 60% 40% at 20% 0%, rgba(124,95,224,.18), transparent 60%),
radial-gradient(ellipse 50% 40% at 85% 0%, rgba(232,117,74,.10), transparent 60%),
linear-gradient(180deg, #110A1A 0%, #0E0712 60%, #0A0610 100%);
color:#EDE6F8;
position:relative;
}
.footer::before{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:140px; height:2px;
background:linear-gradient(90deg, transparent, var(--coral-3), var(--lavender-3), transparent);
}
.footer .logo{ color:#EDE6F8; margin-bottom:1.5rem; }
.footer .logo .logo-name{ color:#EDE6F8; }
.footer .logo-text small{ color:rgba(200,184,255,.75); }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:3rem; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h4{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--coral-3); margin-bottom:1.25rem; }
.footer-brand p{ color:rgba(237,230,248,.68); max-width:360px; }
.footer ul li{ margin-bottom:.7rem; color:rgba(237,230,248,.72); }
.footer ul li strong{ color:#F8F4FF !important; }
.footer ul a{ color:rgba(237,230,248,.80); transition:color .3s; }
.footer ul a:hover{ color:var(--lavender-3); }
.footer-bottom{
margin-top:5rem; padding-top:2rem; border-top:1px solid rgba(200,184,255,.10);
display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,230,248,.48);
}
/* ---------- Floating WhatsApp ---------- */
.whatsapp-fab{
position:fixed;
/* `max(...)` with env(safe-area-inset-*) keeps the FABs above the iPhone
home indicator and below the dynamic toolbar on iOS Safari. */
bottom:max(28px, env(safe-area-inset-bottom));
right:max(28px, env(safe-area-inset-right));
z-index:50;
width:56px; height:56px; border-radius:50%;
background:#25D366; color:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 18px rgba(37,211,102,.35);
transition:background .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover{ background:#1ebe5d; box-shadow:0 8px 24px rgba(37,211,102,.45); }
.whatsapp-fab svg{ width:28px; height:28px; }
/* ---------- Page hero (white with peach + lavender blooms) ---------- */
.page-hero{
min-height:60vh; padding:clamp(140px,16vw,220px) 0 clamp(60px,8vw,100px);
display:flex; align-items:flex-end; position:relative; overflow:hidden;
background:
radial-gradient(ellipse 65% 80% at 85% 20%, var(--tint-purple-2) 0%, transparent 55%),
radial-gradient(ellipse 60% 75% at 15% 90%, var(--tint-orange-2) 0%, transparent 55%),
radial-gradient(ellipse 40% 50% at 50% 50%, rgba(139,31,43,.05), transparent 65%),
linear-gradient(180deg, #FFFFFF 0%, var(--cream-3) 100%);
}
.page-hero-grid{
position:absolute; inset:0; z-index:1;
background-image:
linear-gradient(rgba(31,24,19,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(31,24,19,.04) 1px, transparent 1px);
background-size:80px 80px;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 80%);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{
font-family:var(--f-display); font-weight:300;
font-size:clamp(3rem,9vw,9rem); line-height:.9; letter-spacing:-.04em; color:var(--ink-2);
}
.page-hero p{ color:var(--ink-3); max-width:560px; margin-top:1.5rem; font-size:1.1rem; }
.breadcrumb{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:1.5rem; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb-sep{ margin:0 .75rem; color:var(--accent); }
/* ---------- Gallery / masonry ---------- */
.gallery{
columns: 3 280px;
column-gap: 1.25rem;
}
.gallery-item{
break-inside:avoid; margin-bottom:1.25rem;
position:relative; overflow:hidden; border-radius:var(--r-md);
cursor:pointer;
box-shadow:var(--shadow-sm);
transition:box-shadow .4s, transform .4s var(--ease-out);
}
.gallery-item:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.gallery-item img{ width:100%; height:auto; transition:transform 1s var(--ease-out); }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item::after{
content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(26,24,20,.55));
opacity:0; transition:opacity .5s var(--ease-out);
}
.gallery-item:hover::after{ opacity:1; }
/* Lightbox */
.lightbox{
position:fixed; inset:0; z-index:200; background:rgba(14,11,7,.92);
display:none; align-items:center; justify-content:center; padding:40px;
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
}
.lightbox.is-open{ display:flex; }
.lightbox img, .lightbox video{
max-width:90vw; max-height:85vh; border-radius:var(--r-md); object-fit:contain;
}
.lightbox-close{
position:absolute; top:30px; right:30px; width:50px; height:50px;
border-radius:50%; border:1px solid rgba(255,250,240,.30); display:flex; align-items:center; justify-content:center;
background:rgba(255,250,240,.10); color:#FFFAF0;
transition:background .3s, transform .3s, border-color .3s;
}
.lightbox-close:hover{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); color:#FFFAF0; }
.lightbox-nav{
position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px;
border-radius:50%; background:rgba(255,250,240,.10); border:1px solid rgba(255,250,240,.30);
display:flex; align-items:center; justify-content:center; color:#FFFAF0;
transition:background .3s, transform .3s, border-color .3s;
}
.lightbox-nav.prev{ left:30px; }
.lightbox-nav.next{ right:30px; }
.lightbox-nav:hover{ background:var(--accent); border-color:var(--accent); }
.lightbox-caption{
position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
font-family:var(--f-mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,242,232,.65);
}
/* ---------- Filters ---------- */
.filters{
display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:3rem;
}
.filter-btn{
padding:.7rem 1.2rem; border-radius:999px;
border:1px solid var(--line-2); font-family:var(--f-mono); font-size:.72rem;
letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
transition:all .4s var(--ease-out);
background:var(--cream-2);
}
.filter-btn:hover{ color:var(--ink); border-color:var(--ink); }
.filter-btn.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* ---------- Contact form ---------- */
.contact-grid{
display:grid; grid-template-columns: 1fr 1fr; gap:clamp(2rem,5vw,5rem);
align-items:start;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; gap:1.25rem; }
.form-field{ position:relative; }
.form-field label{
display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em;
text-transform:uppercase; color:var(--muted); margin-bottom:.6rem;
}
.form-field input,
.form-field textarea,
.form-field select{
width:100%; padding:1rem 1.1rem;
background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
color:var(--ink); font-family:var(--f-sans); font-size:1rem;
transition:border-color .3s, background .3s, box-shadow .3s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
outline:0; border-color:var(--accent); background:#fff;
box-shadow:0 0 0 4px var(--coral-soft), 0 0 0 1px var(--accent);
}
.form-field textarea{ min-height:140px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.contact-info{ display:grid; gap:1.5rem; }
.contact-block{
padding:2rem; border:1px solid var(--line); border-radius:var(--r-md);
background:#FFFFFF;
position:relative; overflow:hidden;
box-shadow:var(--shadow-sm);
transition:border-color .45s, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.contact-block::before{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(124,95,224,.14) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.contact-block:hover::before{ left:150%; }
.contact-block:hover{
border-color:rgba(124,95,224,.28);
transform:translateY(-4px);
box-shadow:var(--shadow-md), 0 0 22px var(--cool-glow);
}
.contact-block > *{ position:relative; }
.contact-block h4{ font-family:var(--f-display); font-size:1.4rem; margin-bottom:.5rem; letter-spacing:-.02em; color:var(--ink-2); }
.contact-block p{ color:var(--ink-3); margin-bottom:.4rem; }
.contact-block a{ color:var(--accent); }
.contact-block strong, .contact-block p strong{ color:var(--ink) !important; }
/* ---------- About specific ---------- */
.values{
display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
@media (max-width:900px){ .values{ grid-template-columns:1fr; } }
.value{
padding:2rem; border:1px solid var(--line); border-radius:var(--r-md);
position:relative; overflow:hidden; background:#FFFFFF;
transition:border-color .45s, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
box-shadow:var(--shadow-sm);
}
.value::before{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(124,95,224,.16) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.value:hover::before{ left:150%; }
.value::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
background:linear-gradient(90deg, var(--accent), var(--lavender), var(--coral));
transform:scaleX(0); transform-origin:left;
transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.value:hover::after{ transform:scaleX(1); }
.value:hover{
border-color:rgba(124,95,224,.30);
transform:translateY(-6px);
box-shadow:var(--shadow-lg), 0 0 28px var(--cool-glow);
}
.value-num{
font-family:var(--f-display); font-size:3rem; line-height:1; font-weight:300;
background:linear-gradient(135deg, var(--accent) 0%, var(--lavender) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
transition:transform .5s cubic-bezier(.34,1.56,.64,1);
display:inline-block;
}
.value:hover .value-num{ transform:scale(1.05); }
.value h3{ font-family:var(--f-display); font-size:1.5rem; margin:1rem 0 .75rem; letter-spacing:-.02em; color:var(--ink-2); position:relative; }
.value p{ color:var(--ink-3); position:relative; }
/* ---------- Process timeline ---------- */
.timeline{
display:grid; gap:0;
border-top:1px solid var(--line);
}
.timeline-row{
display:grid; grid-template-columns:120px 1fr 1fr;
gap:2rem; padding:2.5rem 0; border-bottom:1px solid var(--line);
align-items:start;
}
.timeline-num{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--accent); }
.timeline-title{ font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.02em; color:var(--ink-2); }
.timeline-desc{ color:var(--ink-3); font-size:1rem; }
@media (max-width:760px){ .timeline-row{ grid-template-columns:1fr; gap:.5rem; } }
/* ---------- Scroll progress bar ---------- */
.scroll-progress{
position:fixed; top:0; left:0; right:0; height:2px; z-index:101;
background:transparent; pointer-events:none;
}
.scroll-progress-bar{
height:100%; width:0;
background:linear-gradient(90deg, var(--accent) 0%, var(--coral) 50%, var(--lavender) 100%);
box-shadow:0 0 12px rgba(232,117,74,.45);
transition:width .08s linear;
}
/* ---------- Back to top ---------- */
.to-top{
position:fixed;
left:max(28px, env(safe-area-inset-left));
bottom:max(28px, env(safe-area-inset-bottom));
z-index:49;
width:48px; height:48px; border-radius:50%;
background:var(--cream-2); border:1px solid var(--line-2);
color:var(--ink);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transform:translateY(20px);
transition:opacity .4s var(--ease-out), transform .4s var(--ease-out), background .3s, border-color .3s, color .3s;
box-shadow:var(--shadow-md);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--accent); border-color:var(--accent); color:#FFFAF0; box-shadow:var(--shadow-lg), 0 0 18px rgba(139,31,43,.30); }
/* ---------- Skip link / focus styles ---------- */
.skip-link{
position:absolute; top:-100px; left:20px; z-index:10001;
background:var(--accent); color:#fff;
padding:.8rem 1.2rem; border-radius:6px; font-weight:500;
transition:top .3s var(--ease-out);
}
.skip-link:focus{ top:20px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
border-radius:4px;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.marquee-track{ animation:none; }
.cursor, .cursor-ring{ display:none; }
body{ cursor:auto; }
.reveal{ opacity:1 !important; transform:none !important; }
.split-line > span{ transform:none !important; }
}
/* ---------- Testimonials / Trust block ---------- */
.testimonials{
display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
@media (max-width:900px){ .testimonials{ grid-template-columns:1fr; } }
.testimonial{
padding:2.5rem; border:1px solid var(--line); border-radius:var(--r-md);
background:#FFFFFF;
position:relative; overflow:hidden;
transition:border-color .45s, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
box-shadow:var(--shadow-sm);
}
.testimonial::after{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(232,117,74,.14) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.testimonial:hover::after{ left:150%; }
.testimonial:hover{
border-color:rgba(232,117,74,.30);
transform:translateY(-6px);
box-shadow:var(--shadow-lg), 0 0 26px var(--warm-glow);
}
.testimonial::before{
content:"\201C"; position:absolute; top:8px; left:24px;
font-family:var(--f-display); font-size:5rem; line-height:1;
background:linear-gradient(135deg, var(--accent) 0%, var(--coral) 50%, var(--lavender) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
opacity:.75;
transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.testimonial:hover::before{ transform:scale(1.12) rotate(-3deg); }
.testimonial-quote{
font-family:var(--f-display); font-size:1.2rem; line-height:1.45;
letter-spacing:-.01em; margin-top:2rem; font-weight:300;
color:var(--ink-2);
}
.testimonial-author{
margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
display:flex; flex-direction:column; gap:.2rem;
}
.testimonial-name{ font-weight:500; color:var(--ink); }
.testimonial-role{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
/* ---------- Why us / feature checklist ---------- */
.why-list{
display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem;
}
@media (max-width:760px){ .why-list{ grid-template-columns:1fr; } }
.why-item{
display:flex; gap:1.25rem; padding:1.5rem;
border:1px solid var(--line); border-radius:var(--r-md);
background:#FFFFFF;
position:relative; overflow:hidden;
transition:border-color .45s, background .45s, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
box-shadow:var(--shadow-sm);
}
.why-item::before{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(232,117,74,.18) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none;
transition:left 1s cubic-bezier(.16,1,.3,1);
}
.why-item:hover::before{ left:150%; }
.why-item:hover{
border-color:rgba(232,117,74,.40);
background:linear-gradient(135deg, #FFFFFF 0%, var(--tint-orange) 100%);
transform:translateY(-5px);
box-shadow:var(--shadow-md), 0 0 22px var(--warm-glow);
}
.why-check{
flex-shrink:0; width:42px; height:42px; border-radius:50%;
background:linear-gradient(135deg, var(--coral-soft) 0%, var(--accent-soft) 100%);
color:var(--accent);
display:flex; align-items:center; justify-content:center;
transition:transform .5s cubic-bezier(.34,1.56,.64,1), background .4s;
}
.why-item:hover .why-check{
transform:scale(1.10) rotate(-6deg);
background:linear-gradient(135deg, var(--coral) 0%, var(--accent) 100%);
color:#FFFAF0;
}
.why-item h4{ font-family:var(--f-display); font-size:1.2rem; letter-spacing:-.02em; margin-bottom:.35rem; color:var(--ink-2); }
.why-item p{ color:var(--ink-3); font-size:.95rem; position:relative; }
/* ---------- Map block ---------- */
.maps{
display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
}
@media (max-width:760px){ .maps{ grid-template-columns:1fr; } }
.map{
border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
background:var(--cream-2);
aspect-ratio:4/3;
filter:grayscale(.35) contrast(1.0);
transition:filter .5s var(--ease-out), box-shadow .4s;
box-shadow:var(--shadow-sm);
}
.map:hover{ filter:none; box-shadow:var(--shadow-md); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.map-label{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
margin-bottom:.75rem;
}
/* ---------- Product detail specifics ---------- */
.spec-table{
width:100%; border-collapse:collapse;
font-family:var(--f-sans); font-size:.95rem;
}
.spec-table tr{ border-bottom:1px solid var(--line); }
.spec-table td{ padding:1rem 0; vertical-align:top; }
.spec-table td:first-child{
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--muted); width:40%; padding-right:2rem;
}
.spec-table td:last-child{ color:var(--ink); }
.feature-list{ display:grid; gap:.85rem; margin-top:1.5rem; }
.feature-list li{
display:flex; gap:.85rem; align-items:flex-start;
color:var(--ink-3); font-size:1rem;
}
.feature-list li::before{
content:""; flex-shrink:0; width:18px; height:18px; margin-top:4px;
background:var(--accent); mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ---------- 3D tilt cards disabled ---------- */
.card.tilting{ transform:none !important; }
.card.tilting .card-media,
.card.tilting .card-body{ transform:none !important; }
/* ---------- Sticky Quote pill ---------- */
.quote-pill{
position:fixed;
bottom:max(28px, env(safe-area-inset-bottom));
right:max(96px, calc(env(safe-area-inset-right) + 68px));
z-index:51;
display:inline-flex; align-items:center; gap:.5rem;
padding:.7rem 1.2rem .7rem .95rem; border-radius:999px;
background:var(--ink); border:1px solid var(--ink);
color:var(--cream); font-size:.85rem; font-weight:500;
box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease, background .2s ease, border-color .2s ease;
}
.quote-pill.is-visible{ opacity:1; visibility:visible; transform:none; }
.quote-pill:hover{ background:var(--accent); border-color:var(--accent); }
.quote-pill .dot{
width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.quote-pill:hover .dot{ background:#fff; }
@media (max-width:560px){ .quote-pill{ right:88px; bottom:24px; padding:.6rem 1rem; font-size:.78rem; } }
/* ---------- Page transition disabled (use plain navigation) ---------- */
.page-transition{ display:none !important; }
/* ---------- Enhanced mobile nav ---------- */
.mobile-nav ul li{
opacity:0; transform:translateY(30px);
transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.mobile-nav.is-open ul li{ opacity:1; transform:none; }
.mobile-nav.is-open ul li:nth-child(1){ transition-delay:.15s; }
.mobile-nav.is-open ul li:nth-child(2){ transition-delay:.22s; }
.mobile-nav.is-open ul li:nth-child(3){ transition-delay:.29s; }
.mobile-nav.is-open ul li:nth-child(4){ transition-delay:.36s; }
.mobile-nav.is-open ul li:nth-child(5){ transition-delay:.43s; }
.mobile-nav.is-open ul li:nth-child(6){ transition-delay:.50s; }
.mobile-nav.is-open ul li:nth-child(7){ transition-delay:.57s; }
.mobile-nav.is-open ul li:nth-child(8){ transition-delay:.64s; }
.mobile-nav.is-open ul li:nth-child(9){ transition-delay:.71s; }
.mobile-nav ul li a{
position:relative; overflow:hidden; display:inline-block;
}
.mobile-nav ul li a::after{
content:""; position:absolute; left:0; right:0; bottom:.2em; height:2px;
background:var(--accent); transform:scaleX(0); transform-origin:right;
transition:transform .5s var(--ease-out);
}
.mobile-nav ul li a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* ---------- Comparison table ---------- */
.compare{
width:100%; border-collapse:collapse;
border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
background:var(--cream-2);
}
.compare th, .compare td{
padding:1.25rem 1.5rem; text-align:left; vertical-align:middle;
border-bottom:1px solid var(--line);
}
.compare th{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--muted); background:var(--cream-3);
font-weight:400;
}
.compare td:first-child{
font-family:var(--f-display); font-size:1.05rem; color:var(--ink-2);
letter-spacing:-.01em; width:34%;
}
.compare td.col-us{ background:rgba(232,117,74,.08); color:var(--ink); font-weight:500; }
.compare td.col-them{ color:var(--ink-3); }
.compare tr:last-child td{ border-bottom:0; }
.compare .check{ color:var(--accent); }
.compare .cross{ color:var(--muted-2); }
@media (max-width:760px){
.compare th, .compare td{ padding:.9rem .9rem; font-size:.9rem; }
.compare td:first-child{ font-size:.95rem; }
}
/* ---------- Process diagram (compact + animated) ---------- */
.process-section{ padding-bottom:clamp(60px,8vw,110px) !important; }
.process-head{ margin-bottom:clamp(28px,4vw,52px) !important; }
.process-diagram{
width:100%; max-width:1240px; margin:0 auto;
padding:.4rem 0 .25rem;
}
.process-diagram svg{ width:100%; height:auto; display:block; overflow:visible; }
/* Bars */
.process-bar{
fill:#FFFFFF; stroke:var(--line-2); stroke-width:1;
filter:drop-shadow(0 2px 6px rgba(27,23,38,.06));
transition:stroke .4s ease, filter .4s ease;
}
.process-bar-top{ fill:url(#processBarTop); }
.process-bar-bottom{
fill:rgba(232,117,74,.10); stroke:var(--accent);
}
.process-bar-label{
fill:var(--accent); font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; font-weight:500;
}
.process-bar-label-accent{ fill:var(--accent); }
.process-bar-text{
fill:var(--ink-2); font-family:var(--f-sans); font-size:12px;
}
/* Nodes — outer is positioned via SVG transform="translate(x,y)" and
MUST NOT receive CSS transform (that would override its position). All
entrance + hover transforms live on .process-node-inner. */
.process-node{ cursor:pointer; }
.process-node-inner{
transform-box:fill-box; transform-origin:center;
transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.process-node:hover .process-node-inner{ transform:translateY(-4px); }
.process-node-bg{
fill:#FFFFFF; stroke:var(--line-2); stroke-width:1;
filter:drop-shadow(0 4px 12px rgba(27,23,38,.06));
transition:fill .45s ease, stroke .45s ease, filter .45s ease;
}
.process-node:hover .process-node-bg{
fill:url(#processNodeHover);
stroke:var(--accent);
filter:drop-shadow(0 10px 22px rgba(139,31,43,.18)) drop-shadow(0 0 14px rgba(232,117,74,.30));
}
.process-node text{ pointer-events:none; transition:fill .35s ease; }
.process-node .process-num{
fill:var(--accent); font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; font-weight:500;
}
.process-node-title{
fill:var(--ink-2); font-family:var(--f-display); font-size:16px; font-weight:400; letter-spacing:-.01em;
}
.process-node-sub{
fill:var(--ink-soft); font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
}
.process-node:hover .process-node-title{ fill:var(--accent); }
.process-node:hover .process-node-sub{ fill:var(--ink-2); }
/* Connector lines */
.process-line{ stroke:var(--line-2); stroke-width:1.5; fill:none; stroke-dasharray:4 4; }
.process-flow{
stroke:url(#processFlow); stroke-width:2.5; fill:none; stroke-linecap:round;
stroke-dasharray:8 10;
animation:flowDash 1.6s linear infinite;
filter:drop-shadow(0 0 4px rgba(232,117,74,.35));
}
@keyframes flowDash{ to{ stroke-dashoffset:-36; } }
/* Stagger entrance — animate the INNER group so the outer position stays. */
.process-diagram.reveal.in .process-node-inner{
animation:processIn .7s cubic-bezier(.16,1,.3,1) both;
}
.process-diagram.reveal.in .process-node:nth-of-type(1) .process-node-inner{ animation-delay:.10s; }
.process-diagram.reveal.in .process-node:nth-of-type(2) .process-node-inner{ animation-delay:.18s; }
.process-diagram.reveal.in .process-node:nth-of-type(3) .process-node-inner{ animation-delay:.26s; }
.process-diagram.reveal.in .process-node:nth-of-type(4) .process-node-inner{ animation-delay:.34s; }
.process-diagram.reveal.in .process-node:nth-of-type(5) .process-node-inner{ animation-delay:.42s; }
.process-diagram.reveal.in .process-node:nth-of-type(6) .process-node-inner{ animation-delay:.50s; }
@keyframes processIn{
0% { opacity:0; transform:translateY(14px); }
100% { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.process-diagram.reveal.in .process-node-inner{ animation:none; }
.process-node-inner{ transition:none; }
.process-flow{ animation:none; }
}
/* ---------- India map ---------- */
.india-map-wrap{
display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center;
}
@media (max-width:900px){ .india-map-wrap{ grid-template-columns:1fr; } }
.india-map{ width:100%; height:auto; max-width:520px; margin:0 auto; display:block; }
.india-map .map-shape{ fill:rgba(26,24,20,.04); stroke:var(--line-2); stroke-width:1.2; }
.india-map .map-pin{ fill:var(--accent); }
.india-map .map-pin-ring{
fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.5;
animation:pinRing 2s ease-out infinite;
transform-origin:center;
}
@keyframes pinRing{
0%{ r:6; opacity:.7; }
100%{ r:18; opacity:0; }
}
.india-map .map-label{ fill:var(--ink); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; }
.india-locations{ display:grid; gap:1rem; }
.india-loc{
display:flex; gap:1rem; padding:1rem 1.25rem;
border:1px solid var(--line); border-radius:var(--r-md);
background:#FFFFFF;
position:relative; overflow:hidden;
transition:border-color .4s, background .4s, box-shadow .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
box-shadow:var(--shadow-sm);
}
.india-loc::before{
content:""; position:absolute; top:-50%; left:-150%;
width:60%; height:200%;
background:linear-gradient(105deg, transparent 35%, rgba(232,117,74,.16) 50%, transparent 65%);
transform:rotate(20deg); pointer-events:none;
transition:left 1s cubic-bezier(.16,1,.3,1);
}
.india-loc:hover::before{ left:160%; }
.india-loc:hover{
border-color:rgba(232,117,74,.30);
background:linear-gradient(135deg, #FFFFFF 0%, var(--tint-orange) 100%);
box-shadow:var(--shadow-md), 0 0 18px var(--warm-glow);
transform:translateY(-2px);
}
.india-loc > *{ position:relative; }
.india-loc-num{ font-family:var(--f-mono); color:var(--accent); font-size:.72rem; letter-spacing:.18em; min-width:30px; }
.india-loc h4{ font-family:var(--f-display); font-size:1.1rem; letter-spacing:-.01em; margin-bottom:.2rem; color:var(--ink-2); }
.india-loc p{ color:var(--ink-3); font-size:.9rem; }
/* ---------- FAQ accordion ---------- */
.faqs{ display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.faq{ background:#FFFFFF; padding:1.75rem 1.5rem; transition:background .4s ease; }
.faq[open]{ background:linear-gradient(135deg, #FFFFFF 0%, var(--tint-purple) 100%); }
.faq summary{
list-style:none; cursor:pointer;
display:flex; justify-content:space-between; align-items:center; gap:2rem;
font-family:var(--f-display); font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.015em;
transition:color .3s; color:var(--ink-2);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:""; flex-shrink:0; width:32px; height:32px; border-radius:50%;
border:1px solid var(--line-2); background:#FFFFFF;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center;
transition:transform .4s var(--ease-out), background-color .3s, border-color .3s;
}
.faq[open] summary::after{
transform:rotate(135deg);
background-color:var(--accent); border-color:var(--accent);
background-image:url("data:image/svg+xml;utf8,");
}
.faq summary:hover{ color:var(--accent); }
.faq-body{ padding-top:1.25rem; color:var(--ink-3); max-width:780px; font-size:1rem; line-height:1.65; }
.faq-body p + p{ margin-top:.75rem; }
.faq-body strong{ color:var(--ink); }
/* ---------- Resources grid ---------- */
.resources-grid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.5rem;
}
.resource{
border:1px solid var(--line); border-radius:var(--r-md);
padding:2rem; background:#FFFFFF;
position:relative; overflow:hidden;
transition:border-color .45s, transform .55s cubic-bezier(.16,1,.3,1), background .45s, box-shadow .5s cubic-bezier(.16,1,.3,1);
display:flex; flex-direction:column; gap:1rem;
box-shadow:var(--shadow-sm);
color:var(--ink);
}
.resource::before{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%;
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(124,95,224,.16) 50%,
transparent 65%, transparent 100%);
transform:rotate(20deg);
pointer-events:none;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.resource:hover::before{ left:150%; }
.resource:hover{
border-color:rgba(124,95,224,.32);
transform:translateY(-6px);
background:linear-gradient(135deg, #FFFFFF 0%, var(--tint-purple) 100%);
box-shadow:var(--shadow-lg), 0 0 26px var(--cool-glow);
}
.resource-icon{
width:48px; height:48px; border-radius:12px;
background:linear-gradient(135deg, var(--coral-soft) 0%, var(--lavender-soft) 100%);
color:var(--accent);
display:flex; align-items:center; justify-content:center;
transition:transform .5s cubic-bezier(.34,1.56,.64,1), color .4s;
position:relative;
}
.resource:hover .resource-icon{
transform:scale(1.10) rotate(-6deg);
color:var(--lavender);
}
.resource h3{ font-family:var(--f-display); font-size:1.3rem; letter-spacing:-.015em; color:var(--ink-2); }
.resource p{ color:var(--ink-3); font-size:.95rem; flex:1; }
.resource-meta{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.resource-cta{
display:inline-flex; align-items:center; gap:.4rem; color:var(--accent);
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
/* ---------- Recent projects ---------- */
.projects{
display:grid; gap:0;
border-top:1px solid var(--line);
}
.project{
display:grid; grid-template-columns: 120px 1fr 1fr 1fr; gap:2rem;
padding:2rem 0; border-bottom:1px solid var(--line);
align-items:center;
}
.project-year{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--accent); }
.project-name{ font-family:var(--f-display); font-size:clamp(1.1rem,1.8vw,1.5rem); letter-spacing:-.02em; color:var(--ink-2); }
.project-loc{ color:var(--ink-3); font-size:.92rem; }
.project-meta{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .project{ grid-template-columns:1fr; gap:.4rem; padding-left:0 !important; padding-right:0 !important; } }
/* ---------- Language switcher ---------- */
.lang-switcher{
position:relative;
}
.lang-switcher-btn{
display:inline-flex; align-items:center; gap:.4rem;
padding:.5rem .75rem; border-radius:999px;
border:1px solid var(--line-2); background:transparent;
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink); cursor:pointer; white-space:nowrap;
transition:background .3s, border-color .3s, color .3s;
}
/* Match the header's dark-hero state for visibility */
.header:not(.is-scrolled) .lang-switcher-btn{
border-color:rgba(255,250,240,.30);
color:#FFFAF0;
}
.lang-switcher-btn:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }
.lang-switcher-btn svg{ width:14px; height:14px; transition:transform .3s; }
.lang-switcher.is-open .lang-switcher-btn svg{ transform:rotate(180deg); }
.lang-switcher-menu{
position:absolute; top:calc(100% + 8px); right:0; min-width:180px;
background:#FFFFFF; border:1px solid var(--line-2); border-radius:var(--r-md);
box-shadow:var(--shadow-lg), 0 0 24px var(--cool-glow);
padding:.5rem; display:none; z-index:200;
}
.lang-switcher.is-open .lang-switcher-menu{ display:block; animation:fadeInUp .3s var(--ease-out); }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(8px); } }
.lang-switcher-menu button{
width:100%; padding:.7rem 1rem; text-align:left;
display:flex; align-items:center; gap:.65rem;
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
color:var(--ink); border-radius:6px;
transition:background .2s, color .2s;
cursor:pointer; background:transparent; border:0;
}
.lang-switcher-menu button:hover{ background:var(--tint-purple); color:var(--accent); }
.lang-switcher-menu button.is-active{
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--tint-purple) 100%);
color:var(--accent);
}
.lang-switcher-menu .flag{
font-family:var(--f-mono); font-weight:500; font-size:.65rem;
letter-spacing:.12em;
background:var(--accent); color:#FFFAF0;
padding:2px 6px; border-radius:3px;
}
/* ---------- No-JS fallback ---------- */
html:not(.js) .reveal{ opacity:1 !important; transform:none !important; }
html:not(.js) .split-line > span{ transform:none !important; }
html:not(.js) .loader{ display:none !important; }
html:not(.js) .cursor, html:not(.js) .cursor-ring{ display:none !important; }
html:not(.js) body{ cursor:auto !important; }
html:not(.js) .page-transition{ display:none !important; }
html:not(.js) .scroll-progress{ display:none !important; }
/* ====================================================================
DIRECTORS PAGE
==================================================================== */
.director-profile{
display:grid;
grid-template-columns: 0.85fr 1.15fr;
gap:5rem;
align-items:start;
}
@media (max-width:980px){
.director-profile{ grid-template-columns:1fr; gap:3rem; }
}
.director-photo{ position:sticky; top:120px; }
@media (max-width:980px){ .director-photo{ position:static; } }
.director-photo-frame{
position:relative;
border-radius:6px;
overflow:hidden;
aspect-ratio: 4/5;
background:var(--cream-3);
box-shadow:var(--shadow-xl);
}
.director-photo-frame::before{
content:""; position:absolute; inset:0; z-index:2;
border:1px solid rgba(201,148,44,.35);
border-radius:6px;
pointer-events:none;
}
.director-photo-frame::after{
content:""; position:absolute; inset:8px; z-index:2;
border:1px solid rgba(201,148,44,.18);
border-radius:4px;
pointer-events:none;
}
.director-photo-frame img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.director-photo-frame:hover img{ transform:scale(1.02); }
.director-photo-badge{
position:absolute; bottom:24px; left:24px; right:24px; z-index:3;
background:linear-gradient(135deg, rgba(15,11,7,.92) 0%, rgba(31,24,19,.88) 100%);
border:1px solid rgba(201,148,44,.30);
padding:.9rem 1.2rem;
border-radius:3px;
display:flex; justify-content:space-between; align-items:center;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
}
.director-photo-badge-label{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--gold-3); font-weight:500;
}
.director-photo-badge-since{
font-family:var(--f-mono); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
color:rgba(237,230,214,.65);
}
.director-content{ padding-top:.5rem; }
.director-name{
font-family:var(--f-display); font-weight:400;
font-size:clamp(2.4rem, 5vw, 4.2rem);
letter-spacing:-.025em; line-height:1.05;
margin:1rem 0 .5rem; color:var(--ink-2);
}
.director-title{
font-family:var(--f-display); font-style:italic; font-weight:300;
font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--accent);
margin-bottom:2rem;
}
.director-creds{
display:grid; grid-template-columns:repeat(3,1fr);
gap:.75rem; margin:2rem 0 2.5rem;
padding:1.5rem 1.5rem;
border:1px solid var(--line-2);
border-radius:var(--r-md);
background:linear-gradient(135deg, #FFFFFF 0%, var(--tint-purple) 100%);
box-shadow:var(--shadow-sm);
transition:box-shadow .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.director-creds:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-md), 0 0 24px var(--cool-glow);
}
@media (max-width:600px){ .director-creds{ grid-template-columns:1fr; gap:1rem; padding:1.2rem; } }
.director-cred{ display:flex; flex-direction:column; gap:.25rem; padding:.25rem 0; border-right:1px solid var(--line); }
.director-cred:last-child{ border-right:0; }
@media (max-width:600px){ .director-cred{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:.75rem; } .director-cred:last-child{ border-bottom:0; padding-bottom:0; } }
.director-cred-degree{
font-family:var(--f-display); font-size:1.4rem;
background:linear-gradient(135deg, var(--accent) 0%, var(--lavender) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
font-weight:500;
}
.director-cred-field{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink-soft);
}
.director-bio p{
font-size:1.05rem; line-height:1.75; color:var(--ink-3); margin-bottom:1.25rem;
}
.director-bio p:first-child{
font-size:1.18rem; color:var(--ink); font-weight:400;
}
.director-email{
margin-top:2.5rem; padding:2rem;
border:1px solid var(--coral);
border-radius:var(--r-md);
background:
linear-gradient(135deg, var(--tint-orange) 0%, var(--tint-purple) 100%),
#FFFFFF;
display:flex; flex-direction:column; gap:.5rem;
position:relative; overflow:hidden;
box-shadow:var(--shadow-md), 0 0 0 5px var(--coral-soft);
transition:box-shadow .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.director-email:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-lg), 0 0 0 6px var(--coral-soft), 0 0 30px var(--warm-glow);
}
.director-email::before{
content:""; position:absolute; top:0; right:0; width:160px; height:160px;
background:radial-gradient(circle, var(--coral-soft), transparent 70%);
border-radius:50%;
transform:translate(40px,-40px);
animation:emailHalo 6s ease-in-out infinite alternate;
}
@keyframes emailHalo{
from{ transform:translate(40px,-40px) scale(1); opacity:.7; }
to{ transform:translate(40px,-40px) scale(1.15); opacity:1; }
}
.director-email-label{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--accent); font-weight:500;
}
.director-email-link{
font-family:var(--f-display); font-size:clamp(1.4rem,2.6vw,2rem);
letter-spacing:-.01em; color:var(--ink); text-decoration:none;
display:inline-block;
position:relative;
transition:color .25s ease;
}
.director-email-link::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
background:linear-gradient(90deg, var(--accent), var(--gold));
transform:scaleX(0); transform-origin:left;
transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.director-email-link:hover::after{ transform:scaleX(1); }
.director-email-link:hover{ color:var(--accent); }
.director-email-note{
font-size:.92rem; color:var(--ink-soft); font-style:italic;
}
.director-actions{
display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap;
}
/* Achievements ribbon */
.director-achievements{
display:grid; grid-template-columns:repeat(4,1fr); gap:0;
border:1px solid var(--line);
background:linear-gradient(135deg, var(--tint-orange) 0%, #FFFFFF 50%, var(--tint-purple) 100%);
border-radius:var(--r-md);
overflow:hidden;
box-shadow:var(--shadow-md), 0 0 28px var(--cool-glow);
}
@media (max-width:780px){ .director-achievements{ grid-template-columns:1fr 1fr; } }
@media (max-width:430px){ .director-achievements{ grid-template-columns:1fr; } }
.director-achievement{
text-align:center; padding:3rem 1.5rem; border-right:1px solid var(--line);
position:relative;
transition:background .35s ease;
}
.director-achievement:last-child{ border-right:0; }
@media (max-width:780px){
.director-achievement{ border-right:0; border-bottom:1px solid var(--line); }
.director-achievement:nth-child(2n){ border-right:0; }
.director-achievement:last-child, .director-achievement:nth-last-child(2){ border-bottom:0; }
}
.director-achievement:hover{ background:rgba(255,255,255,.55); }
.director-achievement-num{
font-family:var(--f-display); font-weight:400;
font-size:clamp(2.8rem,5vw,4.5rem); line-height:1; letter-spacing:-.04em;
background:linear-gradient(135deg, var(--accent) 0%, var(--coral) 50%, var(--lavender) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
margin-bottom:.75rem;
transition:transform .5s cubic-bezier(.34,1.56,.64,1);
display:inline-block;
}
.director-achievement:hover .director-achievement-num{ transform:scale(1.06); }
.director-achievement-num span{
font-size:.55em; vertical-align:top; line-height:1.5;
background:linear-gradient(135deg, var(--coral) 0%, var(--lavender) 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.director-achievement-label{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-soft); line-height:1.5;
}
/* Quote block */
.director-quote{
max-width:880px; margin:0 auto; text-align:center;
padding:3rem 1.5rem; position:relative;
}
.director-quote-mark{
width:60px; height:60px; color:var(--accent); opacity:.45;
margin:0 auto 1rem;
}
.director-quote-text{
font-family:var(--f-display); font-style:italic; font-weight:300;
font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.4; letter-spacing:-.01em;
color:var(--ink); margin-bottom:2rem;
}
.director-quote-author{ display:flex; flex-direction:column; gap:.25rem; }
.director-quote-name{
font-family:var(--f-display); font-size:1.1rem; color:var(--ink);
}
.director-quote-role{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--accent);
}
/* ---------- Spec-sheet modal ---------- */
#ca-spec-modal{
position:fixed; inset:0; z-index:9000;
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;
padding:1rem;
}
#ca-spec-modal.is-open{
opacity:1; visibility:visible; transition:opacity .25s ease;
}
.ca-spec-backdrop{
position:absolute; inset:0;
background:rgba(17,10,26,.55);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.ca-spec-card{
position:relative; z-index:1;
width:min(480px, 100%);
background:#FFFFFF; border:1px solid var(--line-2);
border-radius:var(--r-md);
padding:2.2rem 2rem 1.8rem;
box-shadow:var(--shadow-xl), 0 0 40px var(--cool-glow);
transform:translateY(20px) scale(.98);
transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#ca-spec-modal.is-open .ca-spec-card{ transform:none; }
.ca-spec-close{
position:absolute; top:.6rem; right:.7rem;
width:34px; height:34px; border-radius:50%;
border:1px solid var(--line-2); background:#FFFFFF;
font-size:1.4rem; line-height:1; color:var(--ink-2);
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.ca-spec-close:hover{ background:var(--accent); border-color:var(--accent); color:#FFFAF0; transform:rotate(90deg); }
.ca-spec-form input{
width:100%; padding:.85rem 1rem;
background:#FFFFFF; border:1px solid var(--line-2); border-radius:var(--r-sm);
color:var(--ink); font-family:var(--f-sans); font-size:.95rem;
transition:border-color .3s, box-shadow .3s;
}
.ca-spec-form input:focus{
outline:0; border-color:var(--accent);
box-shadow:0 0 0 4px var(--coral-soft), 0 0 0 1px var(--accent);
}
.ca-spec-status{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--ink-soft);
}
/* ---------- Print: default site-wide ---------- */
@media print {
.cursor, .cursor-ring, .loader, .scroll-progress, .to-top, .whatsapp-fab, .quote-pill,
.header, .mobile-nav, .nav-toggle, video, .marquee, .hero-bg, .lang-switcher,
#ca-spec-modal{ display:none !important; }
body{ background:#fff; color:#000; cursor:auto; }
section{ padding:20px 0; page-break-inside:avoid; }
.container{ max-width:none; padding:0 20px; }
.hero{ min-height:auto; padding:40px 0; background:#fff; color:#000; }
.hero-title, .display-1, .display-2, .h2, .h3, .page-hero h1{
color:#000 !important; -webkit-text-stroke:0 !important;
}
a{ color:#000; text-decoration:underline; }
.card{ background:#fff; border-color:#ccc; break-inside:avoid; }
.footer{ display:none; }
}
/* ---------- Spec-sheet print mode (only the spec block) ---------- */
html.is-printing body > *{ display:none !important; }
html.is-printing main{ display:block !important; }
html.is-printing main > section{ display:none !important; }
html.is-printing main > section.page-hero,
html.is-printing main > section:has(.spec-table),
html.is-printing main > section:has(.feature-list),
html.is-printing main > section:has(.split-text){ display:block !important; padding:14px 0 !important; }
@media print {
html.is-printing{ background:#fff; }
html.is-printing .container{ max-width:none; padding:0 18mm; }
html.is-printing::before{
content:"Concept Asia · Spec Sheet · " attr(data-spec-product);
display:block; padding:8px 18mm; font-family:'JetBrains Mono', monospace;
font-size:9pt; letter-spacing:.18em; text-transform:uppercase;
border-bottom:1px solid #ccc; color:#666;
}
html.is-printing::after{
content:"Concept Asia Pharma Machines & Technology · conceptasiaphrmatec.com · +91 97656 87881";
display:block; padding:8px 18mm; font-family:'JetBrains Mono', monospace;
font-size:8pt; letter-spacing:.12em; color:#666;
border-top:1px solid #ccc; margin-top:18px;
}
}
/* ====================================================================
SOBER ELEGANT MICRO-ANIMATIONS
Subtle: gold pulse, image filters, content lines that draw in
==================================================================== */
/* Card image — gentle warm filter on hover */
.card-media img,
.card-media video,
.split-media img,
.split-media video{
transition:transform .8s cubic-bezier(.16,1,.3,1), filter .6s ease;
filter:brightness(.92) saturate(.95);
}
.card:hover .card-media img,
.card:hover .card-media video,
.split-media:hover img,
.split-media:hover video{
filter:brightness(1) saturate(1.05);
}
/* Section heading underline accent — draws in */
.section-head .h2{
position:relative; padding-bottom:.25em;
}
/* Eyebrow line under section eyebrows gets a small gold dot */
.eyebrow::after{
content:""; width:4px; height:4px; border-radius:50%;
background:var(--gold); opacity:.7;
margin-left:.25rem;
display:none; /* enable selectively if wanted */
}
/* Industry cell — refined hover with subtle gold left accent */
.industry-cell{ position:relative; }
.industry-cell::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:3px; height:0; background:linear-gradient(180deg, var(--accent), var(--gold));
transition:height .5s cubic-bezier(.16,1,.3,1);
}
.industry-cell:hover::before{ height:60%; }
.industry-cell:hover .industry-name{ color:var(--accent); transition:color .35s ease; }
/* Stat hover styling lives in the main .stat block above — keep this
selector only to add cursor:default (purely informational cards). */
.stat{ cursor:default; }
/* Timeline row — subtle gold left mark on hover */
.timeline-row{ position:relative; }
.timeline-row::before{
content:""; position:absolute; left:-1rem; top:50%; transform:translateY(-50%);
width:2px; height:0; background:var(--gold);
transition:height .4s cubic-bezier(.16,1,.3,1), left .4s ease;
opacity:0;
}
.timeline-row:hover::before{ height:60%; opacity:1; left:0; }
/* Projects row — same gold tick */
.project{ position:relative; }
.project::before{
content:""; position:absolute; left:-1rem; top:50%; transform:translateY(-50%);
width:2px; height:0; background:var(--gold);
transition:height .4s cubic-bezier(.16,1,.3,1), left .4s ease;
opacity:0;
}
.project:hover::before{ height:55%; opacity:1; left:0; }
.project:hover .project-name{ color:var(--gold); transition:color .35s ease; }
/* Hero subtle ambient gold glow that breathes slowly */
.hero-bg::before{ animation:heroAmbient 8s ease-in-out infinite alternate; }
@keyframes heroAmbient{
from{ opacity:.55; }
to { opacity:.85; }
}
/* Page hero — subtle ambient pulse on the red glow */
.page-hero{
animation:none;
}
.page-hero::after{
content:""; position:absolute; top:30%; right:8%;
width:1px; height:120px;
background:linear-gradient(180deg, transparent, var(--gold), transparent);
opacity:.4;
animation:heroLine 4s ease-in-out infinite alternate;
}
@keyframes heroLine{
from{ transform:translateY(0); opacity:.3; }
to { transform:translateY(20px); opacity:.7; }
}
@media (max-width:760px){ .page-hero::after{ display:none; } }
/* Subtle gold dot indicator next to active nav link */
.nav-link.is-active{
color:var(--ink);
}
/* Buttons — gentle shimmer pass on hover (already added) */
/* (Card tag hover now styled inline above with .card:hover .card-tag) */
/* Filter button — gold focus state */
.filter-btn:focus-visible{ box-shadow:0 0 0 3px var(--gold-soft); }
/* Form field — gold focus */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
border-color:var(--gold);
box-shadow:0 0 0 3px var(--gold-soft);
}
/* Breadcrumb separator gets coral tone */
.breadcrumb-sep{ color:var(--coral) !important; }
/* ---------- Booking widget (Cal.com) ---------- */
.booking-card, .booking-fallback{
padding:2rem; border:1px solid var(--line);
border-radius:var(--r-md); background:#FFFFFF;
box-shadow:var(--shadow-sm);
position:relative; overflow:hidden;
transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .4s;
}
.booking-card::before{
content:""; position:absolute; top:0; right:0; width:160px; height:160px;
background:radial-gradient(circle, var(--cool-glow), transparent 70%);
transform:translate(40px,-40px);
pointer-events:none;
}
.booking-card:hover, .booking-fallback:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md), 0 0 26px var(--cool-glow);
border-color:rgba(124,95,224,.28);
}
.booking-card h3, .booking-fallback h3{
font-family:var(--f-display); font-size:1.5rem; font-weight:400;
letter-spacing:-.02em; color:var(--ink-2); margin:.6rem 0;
}
.booking-card p, .booking-fallback p{ color:var(--ink-3); margin-bottom:1rem; }
.booking-card .btn{ margin-top:.5rem; }
#ca-booking-modal{
position:fixed; inset:0; z-index:9700;
display:flex; align-items:center; justify-content:center;
padding:2vh 1rem; opacity:0; visibility:hidden;
transition:opacity .25s ease, visibility 0s linear .25s;
}
#ca-booking-modal.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.ca-booking-backdrop{
position:absolute; inset:0; background:rgba(17,10,26,.65);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ca-booking-shell{
position:relative; z-index:1;
width:min(960px, 100%); height:min(86vh, 760px);
background:#FFFFFF; border-radius:var(--r-md);
box-shadow:var(--shadow-xl);
overflow:hidden;
}
.ca-booking-shell iframe{ width:100%; height:100%; border:0; display:block; }
.ca-booking-close{
position:absolute; top:14px; right:14px;
width:36px; height:36px; border-radius:50%;
background:rgba(0,0,0,.65); color:#FFFAF0; border:0;
font-size:1.5rem; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .25s, transform .25s;
z-index:2;
}
.ca-booking-close:hover{ background:var(--accent); transform:rotate(90deg); }
/* ---------- Product search (Ctrl/Cmd+K) ---------- */
#ca-search{
position:fixed; inset:0; z-index:9500;
display:flex; align-items:flex-start; justify-content:center;
padding:10vh 1rem 1rem;
opacity:0; visibility:hidden;
transition:opacity .25s ease, visibility 0s linear .25s;
}
#ca-search.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.ca-search-backdrop{
position:absolute; inset:0;
background:rgba(17,10,26,.55);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ca-search-card{
position:relative; z-index:1;
width:min(640px, 100%);
background:#FFFFFF; border:1px solid var(--line-2);
border-radius:var(--r-md);
box-shadow:var(--shadow-xl), 0 0 40px var(--cool-glow);
display:flex; flex-direction:column;
max-height:80vh;
transform:translateY(-10px) scale(.98);
transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#ca-search.is-open .ca-search-card{ transform:none; }
.ca-search-input-wrap{
display:flex; align-items:center; gap:.75rem;
padding:.95rem 1rem;
border-bottom:1px solid var(--line);
color:var(--ink-soft);
}
.ca-search-input-wrap input{
flex:1;
background:transparent; border:0; outline:none;
color:var(--ink); font-family:var(--f-sans); font-size:1.05rem;
}
.ca-search-input-wrap kbd{
font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em;
padding:.25rem .5rem; border:1px solid var(--line-2); border-radius:4px;
color:var(--muted); background:var(--cream-3);
}
.ca-search-results{
list-style:none; padding:.5rem; margin:0;
overflow-y:auto; flex:1;
}
.ca-search-results li{
border-radius:var(--r-sm);
transition:background .2s ease;
}
.ca-search-results li.is-active,
.ca-search-results li:hover{
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--tint-purple) 100%);
}
.ca-search-results li a{
display:flex; flex-direction:column; gap:.25rem;
padding:.85rem 1rem; color:var(--ink); text-decoration:none;
}
.ca-search-title{
font-family:var(--f-display); font-size:1.05rem; letter-spacing:-.01em; color:var(--ink-2);
}
.ca-search-desc{
font-size:.85rem; color:var(--ink-soft); line-height:1.4;
}
.ca-search-results mark{
background:rgba(232,117,74,.30); color:inherit; padding:0 .1em; border-radius:2px;
}
.ca-search-empty{
padding:1.5rem 1rem; color:var(--ink-soft); text-align:center; font-size:.95rem;
}
.ca-search-empty a{ color:var(--accent); }
.ca-search-foot{
display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
padding:.7rem 1rem; border-top:1px solid var(--line);
font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em; color:var(--muted);
}
.ca-search-foot kbd{
font-family:var(--f-mono); font-size:.6rem;
padding:.1rem .35rem; border:1px solid var(--line-2); border-radius:3px;
color:var(--ink-soft); background:var(--cream-3); margin:0 .15em;
}
/* Nav search trigger — slim pill, no kbd hint. */
.nav-search-btn{
display:inline-flex; align-items:center; gap:.4rem;
padding:.5rem .75rem; border-radius:999px;
border:1px solid var(--line-2); background:transparent;
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink); cursor:pointer; white-space:nowrap; flex-shrink:0;
transition:background .3s, border-color .3s, color .3s;
}
.nav-search-btn:hover{ color:var(--accent); border-color:var(--accent); }
.header:not(.is-scrolled) .nav-search-btn{
border-color:rgba(255,250,240,.30); color:#FFFAF0;
}
/* Collapse to icon-only earlier so the right cluster never wraps when a
language uses long CTA text (e.g. Spanish "SOLICITAR COTIZACIÓN"). */
@media (max-width:1340px){ .nav-search-btn span{ display:none !important; } .nav-search-btn{ padding:.5rem; width:38px; justify-content:center; } }
@media (max-width:980px) {
.nav-search-btn{ display:none !important; }
/* Tighter container padding on phones so the lang switcher never
gets clipped at the right viewport edge. */
.header .container.nav{ padding-inline:14px; gap:.4rem; }
.nav-links + .nav-search-btn,
.nav-search-btn + .theme-toggle,
.theme-toggle + .lang-switcher,
.lang-switcher + .nav-cta{ margin-left:.2rem; }
/* Make the lang button itself a hair smaller on phones */
.lang-switcher-btn{ padding:.45rem .65rem; font-size:.65rem; letter-spacing:.10em; }
.theme-toggle{ width:38px; height:38px; }
}
@media (max-width:380px){
/* On the tiniest screens (iPhone SE, Galaxy S8) — go even tighter */
.header .container.nav{ padding-inline:10px; gap:.3rem; }
.lang-switcher-btn{ padding:.4rem .55rem; }
.lang-switcher-btn .lang-switcher-code{ font-size:.6rem; }
.theme-toggle{ width:34px; height:34px; }
.theme-toggle svg{ width:14px; height:14px; }
}
/* ---------- QR + vCard cards (contact page) ---------- */
.qr-grid{
display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem;
}
@media (max-width:780px){ .qr-grid{ grid-template-columns:1fr; } }
.qr-card{
display:grid; grid-template-columns:200px 1fr; gap:1.5rem;
align-items:center;
background:#FFFFFF; border:1px solid var(--line);
border-radius:var(--r-md);
padding:1.5rem; position:relative; overflow:hidden;
box-shadow:var(--shadow-sm);
transition:border-color .45s, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
@media (max-width:540px){
.qr-card{ grid-template-columns:1fr; text-align:center; }
}
.qr-card::before{
content:""; position:absolute; top:-50%; left:-150%;
width:75%; height:200%;
background:linear-gradient(105deg, transparent 35%, rgba(124,95,224,.16) 50%, transparent 65%);
transform:rotate(20deg); pointer-events:none;
transition:left 1.1s cubic-bezier(.16,1,.3,1);
}
.qr-card:hover::before{ left:150%; }
.qr-card:hover{
border-color:rgba(139,31,43,.30);
transform:translateY(-5px);
box-shadow:var(--shadow-lg), 0 0 28px var(--warm-glow), 0 0 18px var(--cool-glow);
}
.qr-card img{
width:100%; max-width:200px; aspect-ratio:1; height:auto;
background:#FFFFFF;
border:1px solid var(--line-2);
border-radius:var(--r-sm);
padding:.4rem;
margin:0 auto;
}
.qr-card-body{ position:relative; }
.qr-card-body h3{
font-family:var(--f-display); font-size:1.5rem; font-weight:400;
letter-spacing:-.02em; color:var(--ink-2); margin:.4rem 0;
}
.qr-card-num{
font-family:var(--f-mono); font-size:1rem; letter-spacing:.06em;
color:var(--accent); margin-bottom:.5rem;
}
.qr-card-meta{
color:var(--ink-3); font-size:.9rem; margin-bottom:1rem;
}
.qr-card-actions{
display:flex; gap:.5rem; flex-wrap:wrap;
}
@media (max-width:540px){
.qr-card-actions{ justify-content:center; }
}
/* ---------- Inline Quick-Quote (used on every product page) ---------- */
.quick-quote{
margin-top:3rem; padding:2.25rem 2rem;
border:1px solid var(--line);
border-radius:var(--r-md);
background:linear-gradient(135deg, var(--tint-orange) 0%, #FFFFFF 50%, var(--tint-purple) 100%);
box-shadow:var(--shadow-md), 0 0 28px var(--cool-glow);
position:relative; overflow:hidden;
}
.quick-quote::before{
content:""; position:absolute; top:0; right:0; width:180px; height:180px;
background:radial-gradient(circle, var(--warm-glow), transparent 70%);
transform:translate(40px,-40px);
}
.quick-quote-head{
display:flex; gap:1rem; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
margin-bottom:1.25rem; position:relative;
}
.quick-quote-head h3{
font-family:var(--f-display); font-weight:400;
font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.02em; color:var(--ink-2);
}
.quick-quote-meta{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--accent);
}
.quick-quote-grid{
display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem 1rem;
position:relative;
}
@media (max-width:600px){ .quick-quote-grid{ grid-template-columns:1fr; } }
.quick-quote input,
.quick-quote textarea{
width:100%; padding:.85rem 1rem;
background:#FFFFFF; border:1px solid var(--line-2); border-radius:var(--r-sm);
color:var(--ink); font-family:var(--f-sans); font-size:.95rem;
transition:border-color .3s, box-shadow .3s;
}
.quick-quote input:focus,
.quick-quote textarea:focus{
outline:0; border-color:var(--accent);
box-shadow:0 0 0 4px var(--coral-soft), 0 0 0 1px var(--accent);
}
.quick-quote textarea{ min-height:90px; resize:vertical; grid-column:span 2; }
@media (max-width:600px){ .quick-quote textarea{ grid-column:auto; } }
.quick-quote-actions{
margin-top:1rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap;
position:relative;
}
.quick-quote-status{
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--ink-soft);
}
/* Hairline divider that can be sprinkled in HTML — coral → lavender */
.gold-divider{
height:1px; max-width:80px; margin:2rem auto;
background:linear-gradient(90deg, transparent, var(--coral), var(--lavender), transparent);
}
/* Spec table — soft tint row hover */
.spec-table tr{ transition:background .25s ease; }
.spec-table tr:hover{ background:var(--tint-purple); }
/* Gentle WhatsApp-button color is fine on dark */
/* ====================================================================
RESPONSIVE — tablet & mobile
==================================================================== */
/* Tablet landscape & smaller laptops */
@media (max-width:1180px){
.nav-links{ gap:1.1rem; }
.nav-link{ font-size:.82rem; }
.nav-cta{ padding:.5rem .85rem; font-size:.7rem; }
.logo-name{ font-size:.82rem; letter-spacing:.16em; }
.logo-text small{ font-size:.5rem; letter-spacing:.22em; }
}
/* Tablet portrait */
@media (max-width:980px){
.nav-links{ display:none; }
.nav-cta{ display:none; }
.nav-toggle{ display:flex; }
.hero-stats{ width:100%; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.hero-meta{ flex-direction:column; align-items:flex-start; }
.section-head{ margin-bottom:2.25rem; }
section{ padding:56px 0; }
}
/* Mobile */
@media (max-width:760px){
body{ font-size:15px; }
.hero{ padding-top:120px; padding-bottom:60px; min-height:90vh; }
.hero-title{ font-size:clamp(2rem,9vw,3rem); }
.hero-tag{ font-size:.95rem; }
.hero-stats{ gap:.6rem; }
.hero-stat .num{ font-size:1.3rem; }
.hero-stat .lbl{ font-size:.6rem; letter-spacing:.16em; }
.page-hero h1{ font-size:clamp(2.4rem,9vw,4rem); }
.page-hero{ min-height:50vh; }
.display-1, .display-2, .h2{ font-size:clamp(1.8rem,7vw,3rem); }
.container{ padding-inline:18px; }
.split{ gap:2rem; }
.split-media{ aspect-ratio:1/1; }
.stats{ grid-template-columns:1fr 1fr; }
.product-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
.card-title{ font-size:1.1rem; }
.card-body{ padding:1rem 1.1rem 1.2rem; }
.card--feature{ grid-column:span 2; }
.cta-banner{ padding:36px 24px; }
.cta-banner h2{ font-size:clamp(1.6rem,6vw,2.4rem); }
.cta-banner .row{ flex-direction:column; align-items:flex-start; }
.form-row{ grid-template-columns:1fr; }
.gallery{ columns:2 160px; column-gap:.65rem; }
.gallery-item{ margin-bottom:.65rem; }
.filters{ gap:.4rem; margin-bottom:2rem; }
.filter-btn{ padding:.5rem .9rem; font-size:.65rem; }
.footer{ padding:60px 0 30px; }
.footer-grid{ gap:2rem; }
section{ padding:44px 0; }
.compare th, .compare td{ padding:.7rem .6rem; font-size:.82rem; }
.marquee-track{ font-size:1.1rem; gap:2rem; animation-duration:50s; }
.timeline-row{ grid-template-columns:1fr; gap:.5rem; padding:1.5rem 0; }
.timeline-num{ font-size:.62rem; }
.project{ grid-template-columns:1fr; gap:.3rem; padding:1.25rem 0; }
.project-name{ font-size:1.05rem; }
.india-map-wrap{ gap:2rem; }
}
/* Small mobile */
@media (max-width:480px){
.container{ padding-inline:16px; }
.hero-title{ font-size:clamp(1.8rem,8vw,2.5rem); }
.hero-stats{ grid-template-columns:1fr 1fr; display:grid; }
.hero-stat{ text-align:left; }
.product-grid{ grid-template-columns:1fr; }
.card--feature{ grid-column:span 1; }
.stats{ grid-template-columns:1fr; }
.stat{ border-right:0; border-bottom:1px solid var(--line); }
.stat:last-child{ border-bottom:0; }
.btn{ padding:.85rem 1.3rem; font-size:.78rem; }
.btn--lg{ padding:1rem 1.5rem; }
.gallery{ columns:1; }
.mobile-nav a{ font-size:1.6rem; }
.footer-grid{ grid-template-columns:1fr; gap:1.5rem; }
.lang-switcher-btn{ padding:.45rem .7rem; font-size:.6rem; }
.whatsapp-fab{ width:50px; height:50px; bottom:20px; right:20px; }
.whatsapp-fab svg{ width:24px; height:24px; }
.quote-pill{ display:none; }
.to-top{ width:42px; height:42px; left:20px; bottom:20px; }
.testimonials{ grid-template-columns:1fr; gap:1rem; }
.values{ grid-template-columns:1fr; }
.resources-grid{ grid-template-columns:1fr; }
.why-list{ grid-template-columns:1fr; }
.maps{ grid-template-columns:1fr; }
}
/* Pointer / touch — ensure no hover-only navigation paths AND no "stuck"
lift animations after tap on iOS (where :hover persists until next tap). */
@media (hover:none){
/* Disable lift transforms — they get stuck on iOS after tap */
.card:hover,
.why-item:hover,
.value:hover,
.resource:hover,
.testimonial:hover,
.contact-block:hover,
.india-loc:hover,
.qr-card:hover,
.booking-card:hover,
.industry-cell:hover,
.stat:hover,
.gallery-item:hover,
.director-creds:hover,
.director-email:hover{
transform:none;
}
/* Disable hover-only shine sweeps too (they're decorative) */
.card:hover::before,
.why-item:hover::before,
.value:hover::before,
.resource:hover::before,
.testimonial:hover::after,
.contact-block:hover::before,
.india-loc:hover::before,
.qr-card:hover::before,
.industry-cell:hover::after,
.stat:hover::before{ left:-150%; }
/* Keep the gold halo on industry cells but no scale */
.industry-cell:hover::before{ height:60%; }
/* Buttons: skip the diagonal shine on touch (it can leave a flash) */
.btn::before{ display:none; }
/* Hover-only scale on inner SVG nodes - kill */
.process-node:hover .process-node-inner{ transform:none; }
}
/* Larger screens — keep things refined, max widths */
@media (min-width:1600px){
body{ font-size:17px; }
}
/* ====================================================================
MOBILE POLISH — refined fixes after the main responsive cascade
==================================================================== */
@media (max-width:760px){
.nav{ gap:.4rem; }
.nav-links + .nav-search-btn,
.nav-search-btn + .theme-toggle,
.theme-toggle + .lang-switcher,
.lang-switcher + .nav-cta{ margin-left:.25rem; }
.header{ padding:14px 0; }
.theme-toggle{ width:36px; height:36px; }
.theme-toggle svg{ width:15px; height:15px; }
.lang-switcher-btn{ padding:.4rem .55rem; font-size:.62rem; letter-spacing:.08em; gap:.25rem; }
.lang-switcher-btn svg{ width:11px; height:11px; }
.nav-toggle{ width:38px; height:38px; }
}
@media (max-width:380px){
.logo-name{ font-size:.65rem; letter-spacing:.10em; }
.logo-mark{ width:30px; height:30px; font-size:.78rem; }
.nav{ gap:.25rem; }
.container{ padding-inline:14px; }
}
@media (max-width:560px){
.lang-switcher-menu{
right:auto !important; left:auto !important;
transform:translateX(-72%);
min-width:170px; max-width:calc(100vw - 24px);
}
}
@media (max-width:760px){
.whatsapp-fab{ bottom:18px; right:18px; }
.to-top{ left:18px; bottom:18px; }
.quote-pill{ bottom:18px; right:82px; }
}
@media (max-width:480px){
.whatsapp-fab{ width:48px; height:48px; }
.whatsapp-fab svg{ width:22px; height:22px; }
}
@media (hover:none){
.filter-btn{ min-height:38px; }
.lang-switcher-btn{ min-height:38px; }
.nav-link{ padding:.65rem 0; }
}
@media (max-width:600px){
.quick-quote{ padding:1.5rem 1.25rem; }
.quick-quote-head h3{ font-size:1.15rem; }
.quick-quote-actions{ flex-direction:column; align-items:stretch; }
.quick-quote-actions .btn{ width:100%; justify-content:center; }
}
@media (max-width:380px){
.hero-stats{ grid-template-columns:1fr 1fr; gap:.5rem .75rem; }
.hero-stat .num{ font-size:1.1rem; }
.hero-stat .lbl{ font-size:.55rem; letter-spacing:.14em; }
.page-hero{ padding-top:90px; padding-bottom:36px; }
.page-hero h1{ font-size:clamp(2rem,9vw,3rem); }
}
@media (max-width:600px){
.process-section{ padding-bottom:24px !important; }
.process-diagram{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
mask-image:linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
}
.process-diagram svg{ min-width:680px; }
/* Comparison table — scroll horizontally on phones */
.compare-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:480px){
.cta-banner{ padding:30px 20px; border-radius:var(--r-md); }
.cta-banner h2{ font-size:clamp(1.5rem,7vw,2rem); }
}
@media (max-width:600px){
#ca-search{ padding:5vh .75rem 1rem; }
.ca-search-card{ width:100%; max-height:88vh; }
.ca-search-foot{ display:none; }
}
@media (max-width:480px){
.ca-spec-card{ padding:1.5rem 1.25rem 1.25rem; }
#ca-spec-modal{ padding:.5rem; }
}
@media (max-width:480px){
.qr-card img{ max-width:160px; }
.qr-card-actions{ flex-direction:column; align-items:stretch; }
.qr-card-actions .btn{ width:100%; justify-content:center; }
}
@media (max-width:600px){
.ca-booking-shell{ height:90vh; width:100%; border-radius:0; }
#ca-booking-modal{ padding:0; }
}
@media (max-width:600px){
.contact-block{ padding:1.5rem 1.25rem; }
.contact-block h4{ font-size:1.2rem; }
.director-actions{ flex-direction:column; align-items:stretch; }
.director-actions .btn{ width:100%; justify-content:center; }
.director-creds{ padding:1.1rem; }
.director-cred-degree{ font-size:1.15rem; }
}
@media (max-width:480px){
.footer{ padding:48px 0 28px; }
.footer-bottom{ flex-direction:column; gap:.5rem; }
}
@media (max-width:980px){
.mobile-nav ul{ gap:.85rem; }
.mobile-nav a{ padding:.2em .5em; }
}
/* ====================================================================
DARK MODE
Activated via . Driven by js/theme.js + a
tiny inline FOUC-prevention snippet in each page's .
Strategy:
1. Redefine the design tokens (surfaces, ink, lines, tints,
accents) so every rule that already uses var(...) auto-flips.
2. Override the small set of selectors that ship hardcoded
#FFFFFF surfaces (cards, modals, form fields, SVG node fills).
3. Brighten accent / glow alphas so depth still reads on dark.
==================================================================== */
html[data-theme="dark"]{
color-scheme: dark;
/* Surfaces */
--surface: #1A1426;
--surface-2: #15101E;
--surface-elev: #221A33;
--on-surface: #F5F0FF;
--on-surface-2: #C7BFD3;
/* Body / band backgrounds */
--cream: #0F0B16;
--cream-2: #1A1426;
--cream-3: #15101E;
--cream-4: #251D38;
--cream-glow: #1F1830;
/* Tint blooms — very subtle washes over deep aubergine */
--tint-orange: rgba(232,117,74,0.10);
--tint-orange-2: rgba(232,117,74,0.18);
--tint-purple: rgba(124,95,224,0.14);
--tint-purple-2: rgba(124,95,224,0.22);
/* Ink scale — bright on dark */
--ink: #F5F0FF;
--ink-2: #FFFAF0;
--ink-3: #C7BFD3;
--ink-soft: #A89FB5;
--muted: #8E8699;
--muted-2: #66607A;
/* Borders — light alpha over dark */
--line: rgba(245,240,255,0.10);
--line-2: rgba(245,240,255,0.18);
--line-soft: rgba(245,240,255,0.05);
/* Accent — keep oxblood as the brand anchor but brighten the highlight
so it doesn't disappear into the aubergine background. */
--accent: #C24A5A;
--accent-2: #A33345;
--accent-3: #E07585;
--accent-soft: rgba(194,74,90,0.22);
/* Gold — slightly brighter */
--gold: #DBA742;
--gold-2: #B58A30;
--gold-3: #F0CE8E;
--gold-soft: rgba(219,167,66,0.18);
/* Coral + lavender — secondary accents */
--coral: #F08A60;
--coral-2: #D86B40;
--coral-3: #FBC6AA;
--coral-soft: rgba(240,138,96,0.18);
--lavender: #9C82FF;
--lavender-2: #7D60E8;
--lavender-3: #D6CBFF;
--lavender-soft: rgba(156,130,255,0.20);
/* Glow halos — boost so they register on dark */
--warm-glow: rgba(240,138,96,0.32);
--cool-glow: rgba(156,130,255,0.30);
/* Shadows — darker base, more spread, less opacity drop */
--shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
--shadow-md: 0 8px 22px rgba(0,0,0,.50), 0 3px 6px rgba(0,0,0,.35);
--shadow-lg: 0 20px 44px rgba(0,0,0,.60), 0 8px 16px rgba(0,0,0,.40);
--shadow-xl: 0 30px 70px rgba(0,0,0,.65), 0 12px 24px rgba(0,0,0,.45);
--shadow-glow: 0 0 24px rgba(194,74,90,.40);
--shadow-gold-glow: 0 0 24px rgba(219,167,66,.40);
}
/* ----- Body bg — swap the layered tint blooms over deep aubergine ----- */
html[data-theme="dark"] body{
background:
radial-gradient(ellipse 65% 45% at 8% 5%, var(--tint-orange) 0%, transparent 60%),
radial-gradient(ellipse 65% 50% at 95% 18%, var(--tint-purple) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 100%, var(--tint-orange) 0%, transparent 60%),
radial-gradient(ellipse 55% 40% at 8% 80%, var(--tint-purple) 0%, transparent 60%),
var(--cream);
background-attachment: fixed;
}
::selection{ background:var(--accent); color:#FFFAF0; }
/* ----- Hero fade — the bottom of the hero gradient should fade INTO the
dark body, not pure white. */
html[data-theme="dark"] .hero-bg::after{
background:
radial-gradient(ellipse at 78% 18%, rgba(194,74,90,.40), transparent 55%),
radial-gradient(ellipse at 22% 78%, rgba(156,130,255,.22), transparent 60%),
radial-gradient(ellipse at 50% 110%, rgba(240,138,96,.22), transparent 60%),
linear-gradient(180deg,
rgba(10,8,5,.45) 0%,
rgba(10,8,5,.60) 40%,
rgba(10,8,5,.75) 70%,
rgba(10,8,5,.88) 92%,
var(--cream) 100%);
}
/* ----- Page hero ----- */
html[data-theme="dark"] .page-hero{
background:
radial-gradient(ellipse 65% 80% at 85% 20%, var(--tint-purple-2) 0%, transparent 55%),
radial-gradient(ellipse 60% 75% at 15% 90%, var(--tint-orange-2) 0%, transparent 55%),
radial-gradient(ellipse 40% 50% at 50% 50%, rgba(194,74,90,.10), transparent 65%),
linear-gradient(180deg, var(--cream) 0%, var(--cream-3) 100%);
}
html[data-theme="dark"] .page-hero-grid{
background-image:
linear-gradient(rgba(245,240,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,240,255,.04) 1px, transparent 1px);
}
/* ----- Loader ----- */
html[data-theme="dark"] .loader{
background:
radial-gradient(ellipse 50% 40% at 20% 30%, var(--tint-orange) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 70%, var(--tint-purple) 0%, transparent 60%),
radial-gradient(ellipse at center, var(--cream), var(--cream) 65%);
}
html[data-theme="dark"] .loader-spinner{ background:rgba(245,240,255,.10); }
/* ----- Header (scrolled state) ----- */
html[data-theme="dark"] .header.is-scrolled{
background:rgba(15,11,22,.88);
border-bottom-color:var(--line);
box-shadow:0 4px 24px rgba(0,0,0,.45);
}
/* ----- Mobile nav overlay ----- */
html[data-theme="dark"] .mobile-nav{
background:
radial-gradient(ellipse at center, var(--tint-purple), transparent 70%),
var(--cream-3);
}
/* ----- Marquee ----- */
html[data-theme="dark"] .marquee{
background:
linear-gradient(90deg, var(--tint-orange) 0%, var(--cream-2) 50%, var(--tint-purple) 100%);
border-top-color:var(--line);
border-bottom-color:var(--line);
}
/* ----- Section band ----- */
html[data-theme="dark"] .section--band{
background:
linear-gradient(180deg, transparent 0%, var(--tint-purple) 50%, transparent 100%),
linear-gradient(90deg, var(--tint-orange) 0%, transparent 60%),
var(--cream-2);
}
/* ----- Cards, modals, panels — flip every #FFFFFF surface ---------- */
html[data-theme="dark"] .card{
background:linear-gradient(180deg, var(--surface) 0%, var(--surface) 70%, var(--tint-purple) 100%);
}
html[data-theme="dark"] .card-tag{
background:rgba(245,240,255,.10); color:var(--ink);
border-color:rgba(245,240,255,.18);
}
html[data-theme="dark"] .card:hover .card-tag{
background:linear-gradient(135deg, var(--accent) 0%, var(--lavender) 100%);
color:#FFFAF0;
}
html[data-theme="dark"] .card-body{ background:var(--surface); }
html[data-theme="dark"] .card::after{
background:
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(245,240,255,.10), transparent 70%),
linear-gradient(135deg, rgba(245,240,255,.06) 0%, transparent 30%, transparent 100%);
}
html[data-theme="dark"] .card::before{
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(245,240,255,.18) 50%,
transparent 65%, transparent 100%);
}
html[data-theme="dark"] .industry-cell{ background:var(--surface); color:var(--ink); }
html[data-theme="dark"] .industry-cell:hover{
background:linear-gradient(180deg, var(--tint-orange) 0%, var(--surface) 50%, var(--tint-purple) 100%);
}
html[data-theme="dark"] .why-item,
html[data-theme="dark"] .value,
html[data-theme="dark"] .resource,
html[data-theme="dark"] .testimonial,
html[data-theme="dark"] .contact-block,
html[data-theme="dark"] .india-loc,
html[data-theme="dark"] .qr-card,
html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .booking-fallback,
html[data-theme="dark"] .faq{
background:var(--surface);
}
html[data-theme="dark"] .faq[open]{
background:linear-gradient(135deg, var(--surface) 0%, var(--tint-purple) 100%);
}
html[data-theme="dark"] .why-item:hover{
background:linear-gradient(135deg, var(--surface) 0%, var(--tint-orange) 100%);
}
html[data-theme="dark"] .india-loc:hover{
background:linear-gradient(135deg, var(--surface) 0%, var(--tint-orange) 100%);
}
html[data-theme="dark"] .resource:hover{
background:linear-gradient(135deg, var(--surface) 0%, var(--tint-purple) 100%);
}
/* QR card image (white border around the printed QR) stays white because
QR codes scan more reliably against white. */
html[data-theme="dark"] .qr-card img{
background:#FFFFFF; border-color:var(--line-2);
}
/* ----- Director profile ----- */
html[data-theme="dark"] .director-creds{
background:linear-gradient(135deg, var(--surface) 0%, var(--tint-purple) 100%);
}
html[data-theme="dark"] .director-email{
background:
linear-gradient(135deg, var(--tint-orange) 0%, var(--tint-purple) 100%),
var(--surface);
border-color:var(--coral);
}
html[data-theme="dark"] .director-achievements{
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--surface) 50%, var(--tint-purple) 100%);
}
html[data-theme="dark"] .director-achievement:hover{ background:rgba(245,240,255,.04); }
html[data-theme="dark"] .director-photo-frame{ background:var(--surface-2); }
/* ----- Forms ----- */
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .quick-quote input,
html[data-theme="dark"] .quick-quote textarea,
html[data-theme="dark"] .ca-spec-form input,
html[data-theme="dark"] .ca-search-input-wrap input{
background:var(--surface-2); color:var(--ink);
border-color:var(--line-2);
}
html[data-theme="dark"] .form-field input:focus,
html[data-theme="dark"] .form-field textarea:focus,
html[data-theme="dark"] .form-field select:focus,
html[data-theme="dark"] .quick-quote input:focus,
html[data-theme="dark"] .quick-quote textarea:focus,
html[data-theme="dark"] .ca-spec-form input:focus{
background:var(--surface); border-color:var(--accent);
box-shadow:0 0 0 4px var(--coral-soft), 0 0 0 1px var(--accent);
}
html[data-theme="dark"] .quick-quote{
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--surface) 50%, var(--tint-purple) 100%);
}
/* ----- Filter chips ----- */
html[data-theme="dark"] .filter-btn{ background:var(--surface); color:var(--ink-3); }
html[data-theme="dark"] .filter-btn:hover{ color:var(--ink); border-color:var(--ink-3); }
html[data-theme="dark"] .filter-btn.is-active{
background:var(--accent); border-color:var(--accent); color:#FFFAF0;
}
/* ----- FAQ accordion icon ----- */
html[data-theme="dark"] .faq summary::after{
background-color:var(--surface);
background-image:url("data:image/svg+xml;utf8,");
}
html[data-theme="dark"] .faq[open] summary::after{
background-color:var(--accent);
background-image:url("data:image/svg+xml;utf8,");
}
/* ----- Comparison table ----- */
/* ----- Stats grid — glossy/reflective in dark mode too ----- */
html[data-theme="dark"] .stats{
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--surface) 50%, var(--tint-purple) 100%);
border-color:var(--line);
}
html[data-theme="dark"] .stat::after{
background:
linear-gradient(165deg,
rgba(245,240,255,.18) 0%,
rgba(245,240,255,.08) 22%,
transparent 40%,
transparent 70%,
rgba(240,138,96,.10) 100%);
}
html[data-theme="dark"] .stat::before{
background:linear-gradient(105deg,
transparent 0%, transparent 35%,
rgba(245,240,255,.32) 50%,
transparent 65%, transparent 100%);
}
html[data-theme="dark"] .stat:hover{
background:linear-gradient(180deg, rgba(245,240,255,.08) 0%, transparent 100%);
box-shadow:inset 0 0 0 1px rgba(245,240,255,.14), 0 0 28px var(--cool-glow);
}
html[data-theme="dark"] .stat-num{
filter:drop-shadow(0 1px 0 rgba(245,240,255,.10));
}
html[data-theme="dark"] .compare{ background:var(--surface); }
html[data-theme="dark"] .compare th{ background:var(--surface-2); color:var(--muted); }
html[data-theme="dark"] .compare td.col-us{ background:rgba(240,138,96,.10); color:var(--ink); }
html[data-theme="dark"] .compare td.col-them{ color:var(--ink-3); }
/* ----- Process diagram (SVG) ----- */
html[data-theme="dark"] .process-bar{
fill:var(--surface); stroke:var(--line-2);
filter:drop-shadow(0 2px 6px rgba(0,0,0,.30));
}
html[data-theme="dark"] .process-bar-top{ fill:var(--surface); }
html[data-theme="dark"] .process-bar-bottom{
fill:rgba(240,138,96,.10); stroke:var(--accent);
}
html[data-theme="dark"] .process-bar-text{ fill:var(--ink-2); }
html[data-theme="dark"] .process-bar-label,
html[data-theme="dark"] .process-bar-label-accent{ fill:var(--accent-3); }
html[data-theme="dark"] .process-node-bg{
fill:var(--surface); stroke:var(--line-2);
filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
html[data-theme="dark"] .process-node:hover .process-node-bg{
fill:rgba(240,138,96,.16); stroke:var(--accent);
filter:drop-shadow(0 10px 22px rgba(194,74,90,.30)) drop-shadow(0 0 14px rgba(240,138,96,.35));
}
html[data-theme="dark"] .process-node-title{ fill:var(--ink-2); }
html[data-theme="dark"] .process-node-sub{ fill:var(--ink-soft); }
html[data-theme="dark"] .process-node .process-num{ fill:var(--accent-3); }
html[data-theme="dark"] .process-line{ stroke:var(--line-2); }
/* Diagram SVG inline override — light fills used in the in-HTML
would be invisible on dark surface, so we re-target via CSS attribute selectors. */
html[data-theme="dark"] .process-diagram svg text[fill="#F6F2EA"]{ fill:var(--ink-2) !important; }
html[data-theme="dark"] .process-diagram svg text[fill="#8a92a6"]{ fill:var(--ink-soft) !important; }
html[data-theme="dark"] .process-diagram svg text[fill="#D4A559"]{ fill:var(--accent-3) !important; }
/* ----- Buttons ----- */
html[data-theme="dark"] .btn{
background:var(--ink); color:var(--cream);
border-color:var(--ink);
}
html[data-theme="dark"] .btn--ghost{ background:transparent; color:var(--ink); }
html[data-theme="dark"] .btn--ghost:hover{ color:var(--accent-3); border-color:var(--accent-3); }
html[data-theme="dark"] .nav-cta{ color:var(--ink); border-color:var(--line-2); }
html[data-theme="dark"] .nav-cta:hover{ background:var(--accent); color:#FFFAF0; border-color:var(--accent); }
/* ----- India map ----- */
html[data-theme="dark"] .india-map .map-shape{ fill:rgba(245,240,255,.04); stroke:var(--line-2); }
html[data-theme="dark"] .india-map .map-label{ fill:var(--ink); }
/* ----- Map iframes — invert grayscale for dark look-and-feel ----- */
html[data-theme="dark"] .map iframe{ filter:invert(.9) hue-rotate(180deg) saturate(.8) brightness(.95); }
/* ----- Spec sheet modal, search modal, booking modal ----- */
html[data-theme="dark"] .ca-spec-card,
html[data-theme="dark"] .ca-search-card,
html[data-theme="dark"] .ca-booking-shell{
background:var(--surface); border-color:var(--line-2);
}
html[data-theme="dark"] .ca-spec-close{ background:var(--surface-2); color:var(--ink-2); border-color:var(--line-2); }
html[data-theme="dark"] .ca-search-input-wrap{ border-bottom-color:var(--line); }
html[data-theme="dark"] .ca-search-input-wrap input{ background:transparent; }
html[data-theme="dark"] .ca-search-input-wrap kbd,
html[data-theme="dark"] .ca-search-foot kbd{ background:var(--surface-2); border-color:var(--line-2); color:var(--ink-soft); }
html[data-theme="dark"] .ca-search-foot{ border-top-color:var(--line); }
html[data-theme="dark"] .ca-search-results li.is-active,
html[data-theme="dark"] .ca-search-results li:hover{
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--tint-purple) 100%);
}
/* ----- Language switcher menu ----- */
html[data-theme="dark"] .lang-switcher-menu{
background:var(--surface-elev); border-color:var(--line-2);
}
html[data-theme="dark"] .lang-switcher-menu button{ color:var(--ink); }
html[data-theme="dark"] .lang-switcher-menu button:hover{ background:var(--tint-purple); color:var(--accent-3); }
html[data-theme="dark"] .lang-switcher-menu button.is-active{
background:linear-gradient(135deg, var(--tint-orange) 0%, var(--tint-purple) 100%);
color:var(--accent-3);
}
/* ----- Nav search button ----- */
html[data-theme="dark"] .nav-search-btn{ color:var(--ink); border-color:var(--line-2); }
/* ----- Split media badge ----- */
html[data-theme="dark"] .split-media .badge{
background:rgba(15,11,22,.78); color:var(--ink); border-color:var(--line-2);
}
/* ----- Back-to-top button ----- */
html[data-theme="dark"] .to-top{ background:var(--surface); border-color:var(--line-2); color:var(--ink); }
/* ----- Resources page: "primary" catalog card ships with inline hex
styles that look right in light mode but blend in dark mode. Restore
the brand emphasis with a deeper accent border + tint. */
html[data-theme="dark"] .resource[style*="--gold"]{
background:linear-gradient(135deg, rgba(219,167,66,.10) 0%, var(--surface) 100%) !important;
border-color:var(--gold-2) !important;
}
/* ====================================================================
THEME TOGGLE BUTTON — sun / moon icon swap with a soft spring tween
==================================================================== */
.theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:50%;
border:1px solid var(--line-2);
background:transparent;
color:var(--ink);
cursor:pointer;
position:relative; overflow:hidden; flex-shrink:0;
transition:background .3s, border-color .3s, color .3s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* When the header sits over the dark hero, brighten the toggle's border
so it's always visible (was nearly invisible on dark video). */
.header:not(.is-scrolled) .theme-toggle{
border-color:rgba(255,250,240,.30);
color:#FFFAF0;
}
.theme-toggle:hover{
color:var(--accent);
border-color:var(--accent);
transform:rotate(-15deg);
}
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.theme-toggle svg{
width:18px; height:18px; stroke-width:1.8;
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%) scale(.6) rotate(-90deg);
opacity:0; transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
/* Light mode shows the moon (click to go dark); dark mode shows the sun. */
.theme-toggle .icon-moon{
opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);
}
.theme-toggle .icon-sun{
opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(90deg);
}
html[data-theme="dark"] .theme-toggle{ color:var(--ink); border-color:var(--line-2); }
html[data-theme="dark"] .theme-toggle:hover{ color:var(--accent-3); border-color:var(--accent-3); transform:rotate(15deg); }
html[data-theme="dark"] .theme-toggle .icon-moon{
opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(-90deg);
}
html[data-theme="dark"] .theme-toggle .icon-sun{
opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);
}
@media (max-width:560px){
.theme-toggle{ width:36px; height:36px; }
.theme-toggle svg{ width:16px; height:16px; }
}
@media (prefers-reduced-motion: reduce){
.theme-toggle,
.theme-toggle svg,
.theme-toggle:hover{ transition:none; transform:none; }
}