/* ============================================================ AARUSH ECO TECH — GLOBAL CSS Canonical source for design tokens, reset, typography, navigation, buttons, layout system, and animations. Phase 2 refactor — generated from style-enhanced.css (PRIMARY) DO NOT duplicate :root tokens in any other file. ============================================================ */ /* Fonts loaded via tags in HTML — see each page */ /* ==================== DESIGN TOKENS ==================== */ :root { /* ================================================================ LAYER 0 — SCALES Raw value ramps. Never referenced outside :root. ================================================================ */ /* Green — Brand chromatic */ --g-700: #15803d; --g-600: #16a34a; --g-500: #22c55e; --g-400: #4ade80; --g-100: #dcfce7; /* Slate — Structural chromatic */ --s-900: #0f172a; --s-800: #1e293b; --s-700: #334155; --s-600: #475569; --s-500: #64748b; --s-400: #94a3b8; --s-300: #cbd5e1; --s-200: #e2e8f0; --s-100: #f1f5f9; --s-50: #f8fafc; /* Gold — Institutional */ --au-600: #b8860b; --au-500: #d4af37; --au-200: #fde68a; /* Purple — Accent */ --purple-600: #7c3aed; --purple-500: #8b5cf6; /* Cyan — Accent */ --cyan-600: #0891b2; /* Blue — Accent */ --blue-500: #3b82f6; /* Emerald — Deep accent */ --emerald-900: #052e16; --emerald-800: #166534; /* Signals — Functional only */ --red-500: #ef4444; --amber-500: #f59e0b; --blue-600: #2563eb; /* ================================================================ LAYER 1 — INTENT TOKENS ================================================================ */ /* ── Brand Primary ── */ --color-primary: var(--g-600); --color-primary-hover: var(--g-700); --color-primary-signal: var(--g-500); --color-primary-dim: var(--g-100); /* ── Structure ── */ --struct-deep: var(--s-900); --struct-mid: var(--s-800); --struct-soft: var(--s-700); /* ── Gold ── */ --gold: var(--au-600); --gold-light: var(--au-500); --gold-text: var(--au-200); /* ── Signals ── */ --signal-warning: var(--amber-500); --signal-error: var(--red-500); --signal-info: var(--blue-600); /* ── Surfaces ── */ --surface-white: #ffffff; --surface-neutral: #f6f9f7; --surface-dark: var(--s-900); --surface-1: #ffffff; --surface-2: #f6f9f7; --surface-3: #eef5f1; --surface-eco: rgba(22,163,74,0.04); --surface-infra-dark: linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#166534 100%); /* ── Text — Light Surfaces ── */ --text-heading: #1a2b3d; --text-body: #5a6a78; --text-caption: #7a8a98; --text-muted: #8a96a4; /* ── Text — Dark Surfaces ── */ --text-on-dark: #ffffff; --text-on-dark-body: rgba(255, 255, 255, 0.75); --text-on-dark-label: rgba(255, 255, 255, 0.50); --text-on-dark-muted: rgba(255, 255, 255, 0.30); /* ── Borders ── */ --border: var(--s-200); --border-strong: var(--s-300); --border-subtle: var(--s-100); --border-on-dark: rgba(255, 255, 255, 0.08); --border-on-dark-strong: rgba(255, 255, 255, 0.14); /* ── Shadows ── */ --shadow-interactive: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.12); --shadow-elevated: 0 20px 40px -8px rgba(0, 0, 0, 0.14); --shadow-cta: 0 4px 14px rgba(22, 163, 74, 0.25); --shadow-cta-hover: 0 8px 20px rgba(22, 163, 74, 0.35); /* ── Gradients ── */ --gradient-hero: linear-gradient(145deg, #0f1f2e 0%, #162b3d 50%, #1a3348 100%); --gradient-hero-gn: linear-gradient(135deg, var(--s-900) 0%, var(--s-800) 55%, var(--g-700) 100%); --gradient-cta: linear-gradient(135deg, var(--g-600) 0%, #059669 100%); --gradient-gold: linear-gradient(135deg, var(--au-600) 0%, var(--au-500) 100%); --gradient-overlay: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.75) 45%, rgba(15, 23, 42, 0.55) 100%); /* ── Spacing ── */ --space-section-sm: 5rem; --space-section: 7rem; --space-section-lg: 9rem; --space-grid: 2rem; --space-grid-tight: 1rem; --space-after-header: 4.5rem; /* ── Radii ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 50px; /* ── Typography ── */ --ff-head: 'DM Serif Display', Georgia, serif; --ff-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ff-mono: 'JetBrains Mono', monospace; /* ================================================================ LAYER 2 — COMPONENT TOKENS ================================================================ */ /* ── Card ── */ --card-bg: var(--surface-white); --card-border: 1px solid rgba(15,23,42,0.06); --card-radius: var(--radius-md); --card-pad: 2rem; --card-shadow: 0 4px 14px rgba(0,0,0,0.05); --card-shadow-hover: 0 12px 30px rgba(0,0,0,0.08); --card-border-hover: rgba(22,163,74,0.35); /* ── CTA Primary ── */ --cta-fill: var(--color-primary); --cta-fill-hover: var(--color-primary-hover); --cta-text: #ffffff; --cta-radius: var(--radius-md); --cta-pad: 0.875rem 1.75rem; --cta-pad-lg: 1rem 2.25rem; --cta-shadow: none; --cta-shadow-hover: var(--shadow-cta-hover); --cta-font: var(--ff-head); --cta-weight: 600; --cta-size: 0.9rem; --cta-tracking: 0.03em; /* ── CTA Ghost (dark surfaces) ── */ --ghost-border: rgba(255, 255, 255, 0.18); --ghost-border-hover: rgba(255, 255, 255, 0.40); --ghost-text: rgba(255, 255, 255, 0.85); --ghost-bg-hover: rgba(255, 255, 255, 0.06); /* ── CTA Secondary (light surfaces) ── */ --sec-border: var(--border-strong); --sec-border-hover: var(--color-primary); --sec-text: var(--text-heading); --sec-text-hover: var(--color-primary); /* ── Badge / Eyebrow ── */ --badge-bg: rgba(22,163,74,0.06); --badge-border: rgba(22,163,74,0.15); --badge-text: var(--g-700); --badge-radius: var(--radius-pill); --badge-size: 0.7rem; --badge-weight: 600; --badge-tracking: 0.08em; --badge-pad: 0.35rem 0.85rem; /* Gold badge variant */ --badge-gold-bg: rgba(184, 134, 11, 0.08); --badge-gold-border: rgba(184, 134, 11, 0.25); --badge-gold-text: var(--au-200); /* ── Proof Strip ── */ --proof-bg: rgba(255, 255, 255, 0.04); --proof-border: var(--border-on-dark); --proof-radius: var(--radius-md); --proof-pad: 0.875rem 1.25rem; /* ── Header Redesign ── */ --header-height: 60px; /* ================================================================ COMPATIBILITY ALIASES — remove in Phase R5 Old names → new tokens so existing references still resolve. ================================================================ */ --color-primary-dark: var(--color-primary-hover); --color-primary-light: var(--color-primary-signal); --color-primary-deep: var(--color-primary-hover); --color-primary-soft: var(--color-primary-dim); --color-accent: var(--amber-500); --color-accent-dark: #d97706; --color-error: var(--signal-error); --color-warning: var(--signal-warning); --color-secondary: var(--struct-mid); --color-secondary-deep: var(--struct-deep); --color-secondary-soft: var(--struct-soft); --color-accent-gold: var(--gold); --color-accent-gold-light: var(--gold-light); --color-success: var(--color-primary); --color-info: var(--signal-info); --color-bg-primary: var(--surface-white); --color-bg-secondary: #f0f5f2; --color-bg-tertiary: var(--s-100); --color-bg-elevated: #ffffff; --color-bg-card: var(--card-bg); --color-surface: var(--surface-white); --color-surface-dark: #162b3d; --color-text-primary: var(--text-heading); --color-text-secondary: var(--text-body); --color-text-tertiary: var(--text-caption); --color-text-inverse: var(--text-on-dark); --color-text-muted: var(--text-muted); --color-text-dark-body: var(--text-on-dark-body); --color-text-dark-label: var(--text-on-dark-label); --neutral-50: var(--s-50); --neutral-100: var(--s-100); --neutral-200: var(--s-200); --neutral-300: var(--s-300); --neutral-400: var(--s-400); --neutral-500: var(--s-500); --neutral-600: var(--s-600); --neutral-700: var(--s-700); --neutral-800: var(--s-800); --neutral-900: var(--s-900); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-border-light: var(--border-subtle); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: var(--shadow-interactive); --shadow-lg: var(--shadow-hover); --shadow-xl: var(--shadow-elevated); --gradient-primary: var(--gradient-cta); --gradient-accent: var(--gradient-gold); --gradient-hero-green: var(--gradient-hero-gn); --badge-success-bg: var(--badge-bg); --badge-success-color: var(--badge-text); --badge-success-border: var(--badge-border); --badge-warning-bg: rgba(245, 158, 11, 0.1); --badge-warning-color: #d97706; --badge-warning-border: rgba(245, 158, 11, 0.2); --badge-info-bg: rgba(59, 130, 246, 0.1); --badge-info-color: var(--signal-info); --badge-info-border: rgba(59, 130, 246, 0.2); --badge-error-bg: rgba(220, 38, 38, 0.1); --badge-error-color: #dc2626; --badge-error-border: rgba(220, 38, 38, 0.2); --section-pad: var(--space-section); --section-pad-sm: var(--space-section-sm); --section-pad-lg: var(--space-section-lg); --gap-xs: 0.5rem; --gap-sm: 1rem; --gap-md: 1.5rem; --gap-lg: 2rem; --gap-xl: 3rem; --gap-2xl: 4rem; --radius-xl: 20px; --radius-2xl: 24px; } /* ==================== RESET & BASE ==================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--ff-body); font-size: 16px; line-height: 1.75; /* Phase R2: increased from 1.6 to 1.7 for maturity */ color: var(--text-heading); background-color: var(--surface-white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ==================== TYPOGRAPHY ==================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff-head); } h1 { font-weight: 800; letter-spacing: -0.01em; } h2 { font-weight: 700; letter-spacing: -0.005em; } h3 { font-weight: 700; letter-spacing: 0em; } /* Phase R2: Section header gap locked */ .section-header { margin-bottom: var(--space-after-header); } /* Phase R2: Section padding classes reference tokens */ .section { padding: var(--space-section) 0; } .section-sm { padding: var(--space-section-sm) 0; } .section-lg { padding: var(--space-section-lg) 0; } font-weight: 700; line-height: 1.3; color: var(--text-heading); } h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.01em; } h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.005em; } h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: 0em; } h4 { font-size: 1.25rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; } /* ==================== LAYOUT SYSTEM ==================== */ .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .container-narrow { max-width: 900px; margin: 0 auto; padding: 0 2rem; } .section { padding: var(--space-section) 0; } .section-sm { padding: var(--space-section-sm) 0; } .section-lg { padding: var(--space-section-lg) 0; } /* Section modifiers */ .section--bg-secondary { background: var(--color-bg-secondary); } .section--bg-elevated { background: var(--color-bg-elevated); } .section--bg-surface-1 { background: var(--surface-1); } .section--bg-surface-2 { background: var(--surface-2); } .section--bg-surface-3 { background: var(--surface-3); } .section--bg-eco { background: var(--surface-eco); } .section--alt { background: var(--color-bg-secondary); } .section--bordered { border-top: 1px solid var(--color-border); } /* Grid system */ .grid { display: grid; gap: 2rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ==================== GLOBAL SCROLL PROGRESS ==================== */ #scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 2.5px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-signal) 50%, #0d9488 100%); border-radius: 0 1px 1px 0; box-shadow: 0 0 8px rgba(22, 163, 74, 0.3); z-index: 2000; transition: width 0.08s linear; } /* ==================== SKIP LINK ==================== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--color-primary); color: #fff; padding: 0.75rem 1.5rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; font-size: 0.85rem; text-decoration: none; } .skip-link:focus { left: 0; } /* ==================== NAVIGATION ==================== */ #site-header { height: var(--header-height); } .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #ffffff; height: var(--header-height); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .site-nav.scrolled { border-bottom-color: #e8e8e8; } .site-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.5rem, 3vw, 2.5rem); } /* Logo */ .site-nav__logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; justify-self: start; } .logo-img { border-radius: 8px; } .site-nav__wordmark { font-family: var(--ff-body); font-weight: 800; font-size: 19px; white-space: nowrap; letter-spacing: 0; } /* .logo-text used in footer and page content — do not remove */ .logo-text { font-family: var(--ff-head); font-weight: 800; letter-spacing: 0.04em; color: var(--color-accent); font-size: clamp(1rem, 1.4vw, 1.2rem); } .logo-text .highlight { font-weight: 600; color: var(--color-primary); background: none; -webkit-background-clip: text; -webkit-text-fill-color: var(--color-primary); } /* Center Nav Links */ .site-nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .site-nav__links > li { display: flex; align-items: center; } .site-nav__links > li > a { text-decoration: none; color: #555; font-size: 14px; font-weight: 450; padding: 4px 0; position: relative; white-space: nowrap; transition: color 0.2s ease; } .site-nav__links > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: #0F6E56; transition: width 0.25s ease; } .site-nav__links > li > a:hover { color: #1a1a1a; } .site-nav__links > li > a.active { color: #0F6E56; } .site-nav__links > li > a.active::after { width: 100%; } /* Right group: CTA + hamburger */ .site-nav__right { display: flex; align-items: center; gap: 12px; justify-self: end; } .site-nav__cta { display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px; background: #0F6E56; color: #ffffff !important; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 0.2s ease; border: none; } .site-nav__cta:hover { background: #085041; } /* Hamburger (mobile only) */ .site-nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; flex-direction: column; gap: 5px; } .site-nav__hamburger span { display: block; width: 22px; height: 2px; background: #1a1a1a; border-radius: 1px; transition: all 0.26s ease; } .site-nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .site-nav__hamburger.active span:nth-child(2) { opacity: 0; } .site-nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile overlay */ .site-nav__overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 999; } .site-nav__overlay.active { display: block; } /* ==================== SOLUTIONS DROPDOWN ==================== */ .nav-solutions { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: #555; cursor: pointer; padding: 4px 0; transition: color 0.15s; position: relative; } .nav-solutions:hover, .nav-solutions.active { color: #0F6E56; } .nav-solutions.active { border-bottom: 1.5px solid #0F6E56; } .nav-solutions svg { transition: transform 0.18s ease; } .nav-solutions[aria-expanded="true"] svg { transform: rotate(180deg); } .solutions-dropdown { position: absolute; top: 68px; left: 50%; transform: translateX(-50%) translateY(-6px); width: 520px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0.5px solid #e8e8e8; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.03); padding: 8px; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 1001; } .solutions-dropdown.open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .dd-header { padding: 10px 14px 8px; border-bottom: 0.5px solid #f0f0f0; margin-bottom: 6px; } .dd-header-label { font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: #aaa; } .dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .dd-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background 0.15s ease; } .dd-item:hover { background: #f7f7f7; } .dd-item--muted { opacity: 0.55; } .dd-item--muted:hover { background: #fafafa; } .dd-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 7px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; margin-top: 1px; color: #555; } .dd-icon svg { width: 15px; height: 15px; } .dd-text { display: flex; flex-direction: column; gap: 2px; } .dd-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .dd-title { font-size: 13px; font-weight: 500; color: #1a1a1a; line-height: 1.3; } .dd-title--deemphasised { color: #888; } .dd-sub { font-size: 11.5px; color: #888; line-height: 1.4; } .dd-badge { font-size: 9.5px; font-weight: 500; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.3px; white-space: nowrap; } .dd-badge--soon { background: #E1F5EE; color: #0F6E56; } .dd-badge--urban { background: #FAEEDA; color: #854F0B; } .dd-divider { grid-column: 1 / -1; height: 0.5px; background: #f0f0f0; margin: 2px 0; } /* ==================== BUTTONS ==================== */ .btn { display: inline-block; padding: var(--cta-pad); font-weight: var(--cta-weight); font-size: var(--cta-size); text-decoration: none; border-radius: var(--cta-radius); transition: all 0.3s ease; border: none; cursor: pointer; font-family: var(--cta-font); text-align: center; letter-spacing: var(--cta-tracking); } .btn-primary { background: var(--cta-fill); color: var(--cta-text) !important; box-shadow: none; } .btn-primary:hover { background: var(--cta-fill-hover); transform: translateY(-2px); box-shadow: var(--cta-shadow-hover); } .btn-secondary { background: transparent; color: var(--sec-text) !important; border: 1px solid var(--sec-border); } .btn-secondary:hover { border-color: var(--sec-border-hover); color: var(--sec-text-hover) !important; } .btn-ghost { background: transparent; color: var(--ghost-text) !important; border: 1px solid var(--ghost-border); } .btn-ghost:hover { border-color: var(--ghost-border-hover); background: var(--ghost-bg-hover); color: #fff !important; } .btn-text { background: transparent; color: var(--color-primary); padding: 0; font-weight: 600; } .btn-text:hover { color: var(--color-primary-hover); } .btn-whatsapp { background: #25D366; color: white !important; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-whatsapp:hover { background: #128C7E; transform: translateY(-2px); } /* ==================== ANIMATIONS ==================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .pulse { animation: pulse 2s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Header entrance */ @keyframes headerLogoIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes headerLinkIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Loading state — hide header elements until ready */ body.loading .site-nav__logo, body.loading .site-nav__links, body.loading .site-nav__right { opacity: 0; } /* Loaded state — staggered entrance */ body.loaded .site-nav__logo { animation: headerLogoIn 0.4s ease-out 0.1s both; } body.loaded .site-nav__links { animation: headerLinkIn 0.35s ease-out 0.2s both; } body.loaded .site-nav__right { animation: headerLogoIn 0.4s ease-out 0.3s both; } /* ==================== UTILITY CLASSES ==================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-text-secondary) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-tertiary { color: var(--color-text-tertiary) !important; } .small { font-size: 0.875rem; } .mb-0 { margin-bottom: 0; } .mt-0 { margin-top: 0; } .mb-1 { margin-bottom: 0.5rem; } .mt-1 { margin-top: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mt-2 { margin-top: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mt-3 { margin-top: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mt-4 { margin-top: 2rem; } .mb-5 { margin-bottom: 3rem; } .mt-5 { margin-top: 3rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } /* ==================== RESPONSIVE ==================== */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1199px) and (min-width: 769px) { .site-nav__links { gap: 20px; } .site-nav__links > li > a { font-size: 13px; } .site-nav__dropdown-trigger { font-size: 13px; } .logo-text { font-size: 1rem; } } @media (max-width: 768px) { .container { padding: 0 1.5rem; } /* Mobile nav */ .site-nav__inner { grid-template-columns: 1fr auto; } .site-nav__hamburger { display: flex; } .site-nav__links { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; background: #ffffff; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); z-index: 1000; } .site-nav__links.active { display: flex; } .site-nav__links li { width: 100%; } .site-nav__links > li > a { display: block; padding: 13px clamp(1.5rem, 3vw, 2.5rem); font-size: 15px; border-bottom: 1px solid #f4f4f4; width: 100%; } .site-nav__links > li > a::after { display: none; } .site-nav__links > li > a.active { color: #0F6E56; font-weight: 600; background: #f6fdf9; } .site-nav__cta { font-size: 12px; padding: 8px 14px; } /* Solutions accordion on mobile */ .site-nav__has-dropdown { width: 100%; } .site-nav__dropdown-trigger { display: flex; width: 100%; justify-content: space-between; padding: 13px clamp(1.5rem, 3vw, 2.5rem); font-size: 15px; border-bottom: 1px solid #f4f4f4; } .site-nav__dropdown-trigger::after { display: none; } .site-nav__has-dropdown.open .site-nav__dropdown-trigger { color: #0F6E56; background: #f6fdf9; } .site-nav__dropdown { position: static; transform: none; box-shadow: none; border: none; border-radius: 0; min-width: 0; padding: 0; background: #f9fafb; border-bottom: 1px solid #f4f4f4; } .site-nav__dropdown-link { padding: 11px clamp(1.5rem, 3vw, 2.5rem); padding-left: calc(clamp(1.5rem, 3vw, 2.5rem) + 12px); border-bottom: 1px solid #efefef; } .site-nav__dropdown-link:last-child { border-bottom: none; } .section { padding: 4rem 0; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (max-width: 480px) { h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } .btn { padding: 0.75rem 1.5rem; font-size: 0.85rem; } } /* ==================== PRINT ==================== */ @media (prefers-reduced-motion: reduce) { body.loading .site-nav__logo, body.loading .site-nav__links, body.loading .site-nav__right { opacity: 1; } body.loaded .site-nav__logo, body.loaded .site-nav__links, body.loaded .site-nav__right { animation: none; } .site-nav, .site-nav * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media print { .site-nav__links, .site-nav__right, .site-nav__hamburger, .site-nav__overlay, #scroll-progress, .floating-cta, .action-bubbles, .footer { display: none !important; } .site-nav { position: static !important; background: white !important; border-bottom: 2px solid #000 !important; } body { background: white; color: black; } .hero { background: white !important; color: black !important; padding: 2rem 0 !important; } } /* ==================== FLOATING CONTACT CTA ==================== */ .floating-cta { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 9999; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-primary, #16a34a); color: #fff; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.75rem 1.25rem; border-radius: 100px; text-decoration: none; box-shadow: 0 4px 20px rgba(22, 163, 74, 0.35), 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s ease, background 0.2s ease; will-change: transform; } .floating-cta svg { width: 18px; height: 18px; flex-shrink: 0; } .floating-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 28px rgba(22, 163, 74, 0.45), 0 4px 12px rgba(0,0,0,0.12); background: #15803d; color: #fff; } .floating-cta:active { transform: translateY(0) scale(0.98); } /* Hide on contact pages */ .page-contact .floating-cta, .page-contact-urbanreach .floating-cta { display: none !important; } /* Legacy — keep for any residual markup */ .action-bubbles { display: none !important; } /* ==================== Brand wordmark ==================== */ /* global.css */ /* Browser ke default purple color ko reset karne ke liye */ .site-nav__logo, .site-nav__logo:visited { text-decoration: none; color: inherit; } /* Specificity badhane ke liye .site-nav__logo prefix use karein */ .site-nav__logo .brand-aarush { color: #ea580c !important; /* Orange matching CTA */ } .site-nav__logo .brand-eco { color: var(--color-primary) !important; /* Green */ }