/* ============================================ BASE ARCHITECTURE CSS - Divi/Exodus Style Predictable section → container → row → column Load BEFORE component stylesheets ============================================ */ /* Global scale: 80% of browser default (20% smaller) */ html { font-size: 80%; } /* ============================================ CSS VARIABLES - RESPONSIVE DESIGN SYSTEM Typography and spacing scale with clamp() ============================================ */ :root { /* Responsive Typography Scale */ --fs-xs: clamp(0.75rem, 0.65rem + 0.2vw, 0.8rem); --fs-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem); --fs-md: clamp(1rem, 0.9rem + 0.35vw, 1.125rem); --fs-lg: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); --fs-xl: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); --fs-xxl: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); --fs-hero: clamp(2.5rem, 1.6rem + 2.5vw, 4.5rem); /* Responsive Spacing Scale */ --space-xs: clamp(0.25rem, 0.15rem + 0.3vw, 0.5rem); --space-sm: clamp(0.5rem, 0.35rem + 0.4vw, 0.75rem); --space-md: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem); --space-lg: clamp(1.25rem, 0.8rem + 1vw, 2rem); --space-xl: clamp(2rem, 1.2rem + 1.8vw, 3.5rem); --space-2xl: clamp(3rem, 1.8rem + 2.5vw, 5rem); --space-3xl: clamp(4rem, 2.5rem + 3vw, 7rem); /* Section Padding - Responsive */ --section-py: clamp(40px, 5vw, 80px); --section-py-sm: clamp(24px, 3vw, 50px); --section-py-lg: clamp(60px, 7vw, 120px); /* ============================================ UNIFIED COLOR TOKEN SYSTEM - LIGHT MODE All contrast ratios calculated for WCAG AA Normal text: ≥4.5:1 | Large text: ≥3:1 ============================================ */ /* === SURFACE COLORS (Backgrounds) === */ --surface-base: #ffffff; /* Page background */ --surface-raised: #f8f9fa; /* Cards, elevated elements */ --surface-muted: #f0f2f5; /* Alternate sections */ --surface-navy: #0E2B48; /* Headers, hero, dark sections */ --surface-navy-dark: #072035; /* Deeper navy variant */ --surface-overlay: rgba(14, 43, 72, 0.85); /* Hero overlays */ /* === TEXT COLORS - on white/light backgrounds === */ /* Contrast ratios vs #ffffff */ --text-heading: #0E2B48; /* 14.4:1 - Headings */ --text-body: #2d3748; /* 10.7:1 - Body copy */ --text-secondary: #4a5568; /* 7.0:1 - Secondary text */ --text-muted: #5a6a7a; /* 5.3:1 - Muted (warm gray, not icy) */ --text-subtle: #718096; /* 4.5:1 - Minimum contrast text */ /* === TEXT COLORS - on navy/dark backgrounds === */ /* Contrast ratios vs #0E2B48 */ --text-on-dark: #f4f7fc; /* 15.2:1 - Primary on dark */ --text-on-dark-muted: #c5d4e8; /* 9.8:1 - Muted on dark */ --text-on-dark-subtle: #9fb2c9; /* 6.4:1 - Subtle on dark */ /* === LINK COLORS === */ /* Link colors for light backgrounds */ --link-color: #0E2B48; /* Navy links on light bg */ --link-hover: #FF1654; /* Coral on hover */ --link-on-dark: #7fd1ff; /* 11.2:1 on navy - Cyan on dark */ --link-on-dark-hover: #ffe178; /* 14.8:1 on navy - Gold hover */ /* === ACCENT/BRAND COLORS === */ --accent-coral: #FF1654; /* 4.7:1 on white - CTAs */ --accent-coral-hover: #e01346; /* 5.5:1 on white - Hover state */ --accent-gold: #b8860b; /* 4.6:1 on white - Gold accent */ --accent-gold-light: #d4a54c; /* 3.2:1 on white - Large text only */ /* === STATE COLORS === */ --state-success: #047857; /* 5.9:1 on white */ --state-success-vivid: #059669; /* 4.5:1 on white - for icons/badges */ --state-warning: #b45309; /* 5.0:1 on white */ --state-warning-vivid: #d97706; /* 3.9:1 on white - large text/icons */ --state-danger: #dc2626; /* 5.0:1 on white */ --state-info: #0369a1; /* 5.4:1 on white */ /* === STATE SURFACE COLORS (Light tint backgrounds) === */ --surface-success: #ecfdf5; /* Green tint bg */ --surface-success-border: #a7f3d0; /* Green border */ --surface-warning: #fffbeb; /* Amber tint bg */ --surface-warning-border: #fcd34d; /* Amber border */ --surface-danger: #fef2f2; /* Red tint bg */ --surface-danger-border: #fecaca; /* Red border */ --surface-info: #eff6ff; /* Blue tint bg */ --surface-info-border: #bfdbfe; /* Blue border */ /* === BORDER COLORS === */ --border-light: #e2e8f0; /* Subtle borders */ --border-medium: #cbd5e1; /* Medium borders */ --border-dark: #94a3b8; /* Strong borders */ --border-on-dark: rgba(255,255,255,0.2); /* Borders on dark bg */ /* === SHADOWS === */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); /* === LEGACY ALIASES (for backward compatibility) === */ --brand-coral: var(--accent-coral); --brand-coral-dark: var(--accent-coral-hover); --brand-navy: var(--surface-navy); --brand-navy-dark: var(--surface-navy-dark); --brand-white: var(--surface-base); --brand-muted: var(--text-muted); --brand-gold: var(--accent-gold-light); --bg-white: var(--surface-base); --bg-light: var(--surface-raised); --bg-alt: var(--surface-muted); --bg-dark: var(--surface-navy-dark); --bg-card: var(--surface-base); --bg-elevated: var(--surface-raised); --text-dark: var(--text-heading); --text-light: var(--text-on-dark); --primary-color: var(--surface-navy); --primary-dark: var(--surface-navy-dark); --primary-accent: var(--link-color); --accent-color: var(--accent-coral); --border-color: var(--border-light); /* Container widths */ --container-max: 1200px; --container-narrow: 900px; --container-wide: 1400px; /* Gutters - Responsive */ --gutter: clamp(16px, 2vw, 24px); --gutter-sm: clamp(12px, 1.5vw, 16px); --gutter-lg: clamp(20px, 2.5vw, 32px); /* === OS-AGNOSTIC BASE VARIABLES === */ /* Default values - OS-specific files override these */ --os-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --os-radius: 8px; --os-radius-lg: 12px; --os-radius-sm: 6px; --os-nav-height: 64px; --os-safe-bottom: 0px; --os-elevation-1: 0 1px 3px rgba(0,0,0,0.12); --os-elevation-2: 0 4px 12px rgba(0,0,0,0.15); --os-elevation-3: 0 8px 24px rgba(0,0,0,0.18); } /* ============================================ UNIFIED COLOR TOKEN SYSTEM - DARK MODE All contrast ratios calculated for WCAG AA Normal text: ≥4.5:1 | Large text: ≥3:1 ============================================ */ [data-theme="dark"], body.theme-dark { /* === SURFACE COLORS (Backgrounds) === */ --surface-base: #0b111a; /* Deep indigo base */ --surface-raised: #121b2a; /* Nav, top bar */ --surface-muted: #1b2738; /* Cards */ --surface-navy: #243347; /* Popovers, elevated */ --surface-navy-dark: #0b111a; /* Deepest */ --surface-overlay: rgba(11, 17, 26, 0.82); /* === TEXT COLORS - on dark backgrounds === */ /* Contrast ratios vs #0b111a */ --text-heading: #f4f7fc; /* 17.4:1 - Headings (bright) */ --text-body: #dfe8f5; /* 14.0:1 - Body copy */ --text-secondary: #c5d4e8; /* 12.5:1 - Secondary */ --text-muted: #9fb2c9; /* 8.7:1 - Muted (warm, not icy) */ --text-subtle: #7a8fa6; /* 5.8:1 - Subtle */ /* === TEXT ON DARK (same as heading for dark mode) === */ --text-on-dark: #f4f7fc; /* 17.4:1 */ --text-on-dark-muted: #c5d4e8; /* 12.5:1 */ --text-on-dark-subtle: #9fb2c9; /* 8.7:1 */ /* === LINK COLORS === */ /* Global white link color */ --link-color: #ffffff; /* White links */ --link-hover: #e0e0e0; /* Light gray on hover */ --link-on-dark: #ffffff; /* White links on dark */ --link-on-dark-hover: #e0e0e0; /* Light gray on hover */ /* === ACCENT/BRAND COLORS === */ --accent-coral: #ff6b6b; /* 6.7:1 on dark - Softer coral */ --accent-coral-hover: #ff5050; /* 5.9:1 on dark */ --accent-gold: #f2cf87; /* 12.6:1 on dark */ --accent-gold-light: #ffe178; /* 14.8:1 on dark */ /* === STATE COLORS === */ --state-success: #4ade80; /* 10.8:1 on dark */ --state-success-vivid: #4ade80; /* Same as success in dark mode */ --state-warning: #facc15; /* 10.4:1 on dark */ --state-warning-vivid: #fbbf24; /* Slightly brighter amber */ --state-danger: #ff4f6d; /* 6.1:1 on dark */ --state-info: #7fd1ff; /* 11.2:1 on dark */ /* === STATE SURFACE COLORS (Dark mode - subtle tints) === */ --surface-success: rgba(74, 222, 128, 0.15); --surface-success-border: rgba(74, 222, 128, 0.4); --surface-warning: rgba(251, 191, 36, 0.15); --surface-warning-border: rgba(251, 191, 36, 0.4); --surface-danger: rgba(255, 79, 109, 0.15); --surface-danger-border: rgba(255, 79, 109, 0.4); --surface-info: rgba(127, 209, 255, 0.15); --surface-info-border: rgba(127, 209, 255, 0.4); /* === BORDER COLORS === */ --border-light: #1f2a3a; /* 4.9:1 on surface-base */ --border-medium: #304156; /* 5.6:1 on surface-raised */ --border-dark: #3d4f66; /* Stronger borders */ --border-on-dark: rgba(255,255,255,0.15); /* === SHADOWS === */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 6px 20px rgba(0,0,0,0.5); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6); /* === LEGACY ALIASES === */ --brand-coral: var(--accent-coral); --brand-coral-dark: var(--accent-coral-hover); --brand-navy: var(--surface-navy); --brand-navy-dark: var(--surface-navy-dark); --brand-white: var(--text-heading); --brand-muted: var(--text-muted); --brand-gold: var(--accent-gold); --bg-white: var(--surface-base); --bg-light: var(--surface-raised); --bg-alt: var(--surface-muted); --bg-dark: var(--surface-navy-dark); --bg-card: var(--surface-muted); --bg-elevated: var(--surface-navy); --text-dark: var(--text-heading); --text-light: var(--text-on-dark); /* In dark mode, --primary-color stays navy for backgrounds */ --primary-color: var(--surface-navy); --primary-dark: var(--surface-navy-dark); /* --primary-accent for high-contrast text/icons in dark mode */ --primary-accent: var(--link-color); --accent-color: var(--accent-coral); --border-color: var(--border-medium); } /* ============================================ GLOBAL LINK & BUTTON RESET Eliminates browser default blue (#0000ee) Ensures ALL links use token colors ============================================ */ /* Light Mode Links */ a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; } a:hover, a:focus { color: var(--link-hover); } a:visited { color: var(--link-color); } /* Dark Mode Links - Override for ALL links */ [data-theme="dark"] a, body.theme-dark a { color: var(--link-color); } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus, body.theme-dark a:hover, body.theme-dark a:focus { color: var(--link-hover); } [data-theme="dark"] a:visited, body.theme-dark a:visited { color: var(--link-color); } /* ============================================ LIGHT MODE - LINK CONTRAST ON DARK BACKGROUNDS Ensures all links on dark/navy backgrounds have proper contrast in light mode (desktop + mobile) Uses cyan (#7fd1ff) which has 11.2:1 contrast on navy ============================================ */ /* Primary dark background elements */ .bg-dark a, .bg-navy a, .hero-section a, .page-hero a, .category-hero a, .header-mobile a, .sidebar a, .sidebar-menu a, .sidebar-header a { color: var(--link-on-dark); } .bg-dark a:hover, .bg-dark a:focus, .bg-navy a:hover, .bg-navy a:focus, .hero-section a:hover, .hero-section a:focus, .page-hero a:hover, .page-hero a:focus, .category-hero a:hover, .category-hero a:focus, .header-mobile a:hover, .header-mobile a:focus, .sidebar a:hover, .sidebar a:focus, .sidebar-menu a:hover, .sidebar-menu a:focus, .sidebar-header a:hover, .sidebar-header a:focus { color: var(--link-on-dark-hover); } /* Announcement bar / Top bar (often has dark background) */ /* CTA Banner sections with gradient/dark backgrounds */ .cta-banner a:not(.btn):not([class*="btn-"]) { color: var(--link-on-dark); } .cta-banner a:not(.btn):not([class*="btn-"]):hover, .cta-banner a:not(.btn):not([class*="btn-"]):focus { color: var(--link-on-dark-hover); } /* Contact sections with dark backgrounds */ .contact-section.bg-dark a:not(.btn):not([class*="btn-"]), .contact-section.bg-navy a:not(.btn):not([class*="btn-"]) { color: var(--link-on-dark); } .contact-section.bg-dark a:not(.btn):not([class*="btn-"]):hover, .contact-section.bg-dark a:not(.btn):not([class*="btn-"]):focus, .contact-section.bg-navy a:not(.btn):not([class*="btn-"]):hover, .contact-section.bg-navy a:not(.btn):not([class*="btn-"]):focus { color: var(--link-on-dark-hover); } /* Languages section with dark background */ .languages-section.bg-dark a, .languages-section.bg-navy a { color: var(--link-on-dark); } .languages-section.bg-dark a:hover, .languages-section.bg-dark a:focus, .languages-section.bg-navy a:hover, .languages-section.bg-navy a:focus { color: var(--link-on-dark-hover); } /* Breadcrumbs on dark backgrounds (hero sections) */ .bg-dark .breadcrumb a, .bg-navy .breadcrumb a, .page-hero .breadcrumb a, .category-hero .breadcrumb a, .hero-section .breadcrumb a { color: var(--text-on-dark-muted); } .bg-dark .breadcrumb a:hover, .bg-dark .breadcrumb a:focus, .bg-navy .breadcrumb a:hover, .bg-navy .breadcrumb a:focus, .page-hero .breadcrumb a:hover, .page-hero .breadcrumb a:focus, .category-hero .breadcrumb a:hover, .category-hero .breadcrumb a:focus, .hero-section .breadcrumb a:hover, .hero-section .breadcrumb a:focus { color: var(--link-on-dark); } /* Megamenu on dark backgrounds */ /* Trust bar on dark backgrounds */ /* Process/Steps sections with dark backgrounds */ .process-section.bg-dark a, .timeline-section.bg-dark a { color: var(--link-on-dark); } .process-section.bg-dark a:hover, .process-section.bg-dark a:focus, .timeline-section.bg-dark a:hover, .timeline-section.bg-dark a:focus { color: var(--link-on-dark-hover); } /* Generic inline style dark backgrounds */ [style*="background: #0E2B48"] a, [style*="background:#0E2B48"] a, [style*="background: var(--surface-navy)"] a { color: var(--link-on-dark); } [style*="background: #0E2B48"] a:hover, [style*="background:#0E2B48"] a:hover, [style*="background: var(--surface-navy)"] a:hover { color: var(--link-on-dark-hover); } /* Footer links - use muted text color, not bright link color */ .footer a, footer a { color: var(--text-on-dark-muted, #c5d4e8); } .footer a:hover, .footer a:focus, footer a:hover, footer a:focus { color: var(--accent-coral, #FF1654); } /* Footer social links */ .footer-social a { color: var(--text-on-dark-muted); } .footer-social a:hover, .footer-social a:focus { color: var(--link-on-dark); } /* Button-style links should have WHITE text, not inherit */ a.btn-coral, a.hero-cta, a.sidebar-cta, a[class*="btn-"], a.btn, a.btn--primary, button.btn, button.btn--primary, button.btn-coral { color: #ffffff !important; } /* Exception for outline/secondary buttons */ a.btn--outline, a.btn-outline { color: inherit !important; } /* Exception for mobile footer bar items - keep muted color */ button.footer-item, a.footer-item { color: var(--text-muted) !important; } /* WhatsApp in footer bar stays green */ a.footer-item.footer-whatsapp, a.footer-item.footer-whatsapp i { color: #25D366 !important; } /* ============================================ CARD/TILE LINK TEXT - Override white link color Cards on light backgrounds need dark text NOTE: !important is required here because the global dark mode rule (body.theme-dark a) sets all links to white. Cards need dark text on their light backgrounds. ============================================ */ a.related-card, a.cross-card, a.service-card, a.document-card, a.category-card, a.tip-card, a.info-card a, .card a, .related-grid a, .cross-grid a, .services-grid a, .documents-grid a { color: var(--text-heading) !important; } a.related-card span, a.cross-card span, a.service-card span, a.document-card span, .card a span, .related-grid a span, .cross-grid a span { color: var(--text-heading) !important; } /* Dark mode card text - uses light text on dark card backgrounds */ body.theme-dark a.related-card, body.theme-dark a.cross-card, body.theme-dark a.service-card, body.theme-dark a.document-card, body.theme-dark a.category-card, body.theme-dark .card a, body.theme-dark .related-grid a, body.theme-dark .cross-grid a { color: var(--text-heading) !important; } body.theme-dark a.related-card span, body.theme-dark a.cross-card span, body.theme-dark a.service-card span, body.theme-dark .card a span, body.theme-dark .related-grid a span, body.theme-dark .cross-grid a span { color: var(--text-heading) !important; } /* Mobile header title - navy, excluded from global white link rule */ .header-mobile a.header-title { color: var(--surface-navy) !important; } .header-mobile a.header-title span { color: var(--accent-coral) !important; } /* Dark mode mobile header title stays visible */ body.theme-dark .header-mobile a.header-title { color: var(--text-heading) !important; } /* ============================================ SECTION - Full-width wrapper ============================================ */ .section { position: relative; width: 100%; padding: var(--section-py) 0; } .section--hero { min-height: 85vh; display: flex; align-items: center; padding-top: 160px; padding-bottom: 180px; } /* Section backgrounds */ .bg-white { background-color: var(--bg-white, #ffffff); } .bg-light { background-color: var(--bg-light, #f8f9fa); } .bg-alt { background-color: var(--bg-alt, #f0f2f5); } .bg-dark { background-color: var(--primary-color, #0E2B48); } /* Dark background text override - uses token system */ .bg-dark, .section--hero.bg-dark { color: var(--text-on-dark); } .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5 { color: var(--text-on-dark); } .bg-dark p, .bg-dark li { color: var(--text-on-dark-muted); } .bg-dark span, .bg-dark strong { color: var(--text-on-dark); } /* ============================================ INLINE LINKS IN CONTENT - Light Mode ============================================ */ /* Section paragraph links - visible teal with underline */ .section p a, section p a, .container p a, main p a { color: var(--link-color, #0077b6); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.2s ease; } .section p a:hover, section p a:hover, .container p a:hover, main p a:hover { color: var(--accent-coral, #FF1654); text-decoration-thickness: 2px; } /* List item links */ .section li a, section li a, .container li a, main li a { color: var(--link-color, #0077b6); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.2s ease; } .section li a:hover, section li a:hover, .container li a:hover, main li a:hover { color: var(--accent-coral, #FF1654); } /* Dark background links - ensure visibility */ .bg-dark p a, .bg-dark li a { color: var(--accent-coral, #ff6b6b); text-decoration: underline; } .bg-dark p a:hover, .bg-dark li a:hover { color: var(--text-on-dark, #ffffff); } /* ============================================ CTA SECTIONS - Navy Background Text Override Ensures proper contrast when cta-section has navy/dark background (either via bg class or inline) ============================================ */ .cta-section { color: var(--text-on-dark); } .cta-section h2 { color: var(--text-on-dark); } .cta-section p { color: var(--text-on-dark-muted); } .cta-section a:not(.btn):not([class*="btn-"]) { color: var(--link-on-dark); } .cta-section a:not(.btn):not([class*="btn-"]):hover { color: var(--link-on-dark-hover); } /* .bg-navy utility class for any navy-background container */ .bg-navy { background-color: var(--surface-navy); color: var(--text-on-dark); } .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5 { color: var(--text-on-dark); } .bg-navy p, .bg-navy li { color: var(--text-on-dark-muted); } .bg-navy a:not(.btn):not([class*="btn-"]) { color: var(--link-on-dark); } .bg-navy a:not(.btn):not([class*="btn-"]):hover { color: var(--link-on-dark-hover); } /* Dark mode theme - uses text tokens */ [data-theme="dark"], body.theme-dark { color: var(--text-body); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5 { color: var(--text-heading); } [data-theme="dark"] p, [data-theme="dark"] li, body.theme-dark p, body.theme-dark li { color: var(--text-body); } /* Service Snapshot - Hero bullet points */ .service-snapshot { display: flex; flex-direction: column; gap: 12px; margin: 25px 0; } .snapshot-item { display: flex; align-items: center; gap: 12px; font-family: var(--font-secondary); font-size: 16px; color: var(--text-on-dark); } .snapshot-item i { color: var(--accent-coral); font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; } .snapshot-item strong { color: var(--text-on-dark); } /* ============================================ CONTAINER - Centered max-width wrapper ============================================ */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--space-sm); padding-right: var(--space-sm); position: relative; } .container--narrow { max-width: var(--container-narrow); } /* ============================================ ROW - Flexbox row container ============================================ */ .row { display: flex; flex-wrap: wrap; margin-left: calc(var(--gutter) / -2); margin-right: calc(var(--gutter) / -2); } /* ============================================ COLUMNS - Percentage-based widths ============================================ */ [class*="col-"] { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); margin-bottom: var(--gutter); } /* ============================================ GRID - CSS Grid alternative for cards ============================================ */ .grid { display: grid; gap: var(--gutter); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid--auto-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ============================================ SECTION HEADER - Centered titles ============================================ */ .section-header { text-align: center; margin-bottom: var(--space-xl); } .section-subtitle { max-width: 700px; margin: var(--space-sm) auto 0; color: var(--text-muted, #666); font-size: 1rem; line-height: 1.7; } /* ============================================ SPACING UTILITIES ============================================ */ /* ============================================ TEXT ALIGNMENT ============================================ */ .text-center { text-align: center; } /* ============================================ RESPONSIVE BREAKPOINTS ============================================ */ /* Tablet (768px - 991px) */ @media (max-width: 991px) { :root { --space-xl: 50px; --space-2xl: 60px; --space-3xl: 80px; } .section { padding: var(--space-2xl) 0; } .section--hero { min-height: auto; padding-top: 120px; padding-bottom: 100px; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } /* Mobile (max-width 767px) */ @media (max-width: 767px) { :root { --space-xl: 40px; --space-2xl: 50px; --space-3xl: 60px; --gutter: 16px; } .section { padding: var(--space-xl) 0; } .section--hero { min-height: auto; padding-top: 80px; padding-bottom: 40px; } .container { padding-left: var(--space-sm); padding-right: var(--space-sm); } [class*="col-"] { flex: 0 0 100%; max-width: 100%; } .grid-3, .grid-4 { grid-template-columns: 1fr; } .row { margin-left: calc(var(--gutter) / -2); margin-right: calc(var(--gutter) / -2); } /* ============================================ MOBILE - LINK CONTRAST ON DARK BACKGROUNDS Additional mobile-specific overrides ============================================ */ /* Mobile sidebar/menu links on dark backgrounds */ .sidebar-menu a { color: var(--link-on-dark); } .sidebar-menu a:hover, .sidebar-menu a:focus, .sidebar-menu a:active { color: var(--link-on-dark-hover); } /* Mobile header on dark background */ .header-mobile.bg-dark a, .header-mobile.bg-navy a { color: var(--link-on-dark); } .header-mobile.bg-dark a:hover, .header-mobile.bg-dark a:active, .header-mobile.bg-navy a:hover, .header-mobile.bg-navy a:active { color: var(--link-on-dark-hover); } /* Mobile footer bar - ensure proper contrast */ /* Mobile CTA sections */ .cta-section a:not(.btn):not([class*="btn-"]), .cta-banner a:not(.btn):not([class*="btn-"]) { color: var(--link-on-dark); } /* Mobile hero sections */ .hero-section a, .page-hero a, .category-hero a { color: var(--link-on-dark); } /* Mobile accordion/FAQ on dark backgrounds */ .faq-section.bg-dark a, .faq-section.bg-navy a { color: var(--link-on-dark); } .faq-section.bg-dark a:active, .faq-section.bg-navy a:active { color: var(--link-on-dark-hover); } /* Touch-friendly larger tap targets maintain contrast */ .bg-dark a, .bg-navy a { padding: 2px 0; } } /* Small phones (max-width 480px) */ @media (max-width: 480px) { :root { --space-lg: 32px; --space-xl: 32px; } .container { padding-left: 12px; padding-right: 12px; } } /* ============================================ CARD PRIMITIVES ============================================ */ .card { background: var(--bg-white, #fff); border-radius: 12px; padding: var(--space-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } /* ============================================ FLEX UTILITIES ============================================ */ .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } /* ============================================ HORIZONTAL SCROLL CAROUSEL (Mobile) ============================================ */ /* ============================================ MICRO-COMPONENTS: Visual Punctuation Icon boxes, timelines, alert boxes for breaking wall-of-text content ============================================ */ /* Icon Box - For checklist/requirements grids */ /* Icon Box - Navy variant */ /* Icon Box - Gold variant */ /* Vertical Timeline - For process steps */ .timeline { position: relative; padding-left: 30px; border-left: 2px solid var(--accent-color, #FF1654); margin-left: 10px; } .timeline-item { position: relative; margin-bottom: 30px; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: -36px; top: 0; width: 14px; height: 14px; background: var(--bg-white, #fff); border: 3px solid var(--accent-color, #FF1654); border-radius: 50%; } .timeline-title { font-family: var(--font-primary, 'Montserrat', sans-serif); font-weight: 600; font-size: 16px; color: var(--text-dark, #1a1a1a); margin-bottom: 6px; display: block; } .timeline-item p { font-size: 15px; color: var(--text-muted, #666); margin: 0; line-height: 1.7; } /* Timeline - Navy line variant */ /* Alert Box - For warnings and important notes */ .alert-box { padding: 15px 20px; border-left: 4px solid var(--accent-color, #FF1654); background-color: #fff5f5; margin: 20px 0; border-radius: 0 4px 4px 0; } .alert-box strong { color: var(--accent-color, #FF1654); display: block; margin-bottom: 5px; font-weight: 600; } .alert-box p { margin: 0; color: var(--text-dark, #1a1a1a); line-height: 1.6; } /* Alert Box - Warning variant (gold) */ /* Alert Box - Info variant (navy) */ .alert-box--info { border-left-color: var(--primary-color, #0E2B48); background-color: #f5f8fb; } .alert-box--info strong { color: var(--primary-color, #0E2B48); } /* Alert Box - Success variant (green) */ /* ============================================ METRICS STRIP - Compact 4-Column Grid FIXED: White text on coral for proper contrast ============================================ */ .ot-metrics { background: linear-gradient(135deg, var(--brand-coral, #FF1654) 0%, var(--brand-coral-dark, #e01346) 100%); color: #ffffff; padding-block: var(--space-lg); } .ot-metrics-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .ot-metric { text-align: center; display: flex; flex-direction: column; gap: var(--space-xs); } /* FIXED: Metric values now white for contrast on coral */ .ot-metric-value { font-family: var(--font-primary, 'Montserrat', sans-serif); font-size: var(--fs-xl); font-weight: 700; line-height: 1; color: #ffffff !important; } .ot-metric-label { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #ffffff !important; opacity: 0.95; } .ot-metric-note { font-size: var(--fs-xs); color: #ffffff !important; opacity: 0.85; } /* Metrics - Tablet (2 columns) */ @media (max-width: 992px) { .ot-metrics-inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } } /* Metrics - Mobile (2 columns, tighter) */ @media (max-width: 600px) { .ot-metrics { padding-block: var(--space-md); } .ot-metrics-inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .ot-metric-value { font-size: var(--fs-lg); } } /* Dark mode metrics - white text maintained */ [data-theme="dark"] .ot-metrics, body.theme-dark .ot-metrics { background: linear-gradient(135deg, #8b1a1f 0%, #6b1419 100%); } [data-theme="dark"] .ot-metric-value, body.theme-dark .ot-metric-value, [data-theme="dark"] .ot-metric-label, body.theme-dark .ot-metric-label, [data-theme="dark"] .ot-metric-note, body.theme-dark .ot-metric-note { color: #ffffff; } /* ============================================ ACCESSIBILITY - Skip Link ============================================ */ .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 1rem 2rem; background: var(--primary-color, #0E2B48); color: #ffffff; text-decoration: none; font-weight: 600; border-radius: 0 0 8px 8px; transition: top 0.2s ease; } .skip-link:focus { top: 0; outline: 3px solid var(--accent-color, #FF1654); outline-offset: 2px; } /* ============================================ SCREEN READER ONLY UTILITY Visually hides content but keeps it accessible ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================ STATE COLOR UTILITIES Use these classes instead of hardcoding colors ============================================ */ /* Text colors */ .text-success { color: var(--state-success); } /* Background colors (with appropriate text) */ /* Border colors */ /* State callout boxes (background + border) */ .callout-info { background: var(--surface-info); border-left: 4px solid var(--state-info); } /* State badges */ /* ============================================ HERO FEATURE GRID - Visual Relief Components Used in service pages for feature highlights Must override Astro scoped styles, so use !important ============================================ */ .hero-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem 2rem; margin: 1.5rem 0; } /* Feature item - both .hero-feature and .hero-feature-item */ .hero-feature, .hero-feature-item { display: flex; gap: 0.75rem; padding-left: 1rem; border-left: 3px solid var(--accent-coral, #FF1654); line-height: 1.6; } .hero-feature svg, .hero-feature-item svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--accent-coral, #FF1654); margin-top: 0.1rem; } /* Inner container for text content - CRITICAL for spacing */ .hero-feature > div, .hero-feature-item > div, .hero-intro .hero-feature > div, .hero-intro .hero-feature-item > div { display: flex !important; flex-direction: column !important; } /* Bold term - MUST display as block with spacing */ .hero-feature strong, .hero-feature-item strong, .hero-intro .hero-feature strong, .hero-intro .hero-feature-item strong, .hero-feature > div > strong, .hero-feature-item > div > strong { display: block !important; color: #ffffff !important; font-weight: 600 !important; margin-bottom: 0.25rem !important; } /* Description text */ .hero-feature span, .hero-feature-item span, .hero-intro .hero-feature span, .hero-intro .hero-feature-item span, .hero-feature > div > span, .hero-feature-item > div > span { display: block !important; color: rgba(255, 255, 255, 0.85) !important; font-size: 0.95em; } /* When strong and span are siblings without wrapper div */ .hero-feature-grid li, .hero-feature-item:not(:has(> div)) { flex-direction: column; } .hero-feature-grid li strong { display: block !important; color: #ffffff !important; font-weight: 600 !important; margin-bottom: 0.25rem !important; } /* Mobile responsive */ @media (max-width: 768px) { .hero-feature-grid { grid-template-columns: 1fr; gap: 0.75rem; } } /* ============================================ PERFORMANCE: Reduced Motion Preferences Respects user accessibility settings and reduces animations on mobile for better perf ============================================ */ /* Users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Mobile: reduce non-essential animations for performance */ @media (max-width: 768px) { .hero-background { animation: none !important; transform: none !important; } /* Reduce transition complexity on mobile */ .overlap-card, .service-card-v2, .specialist-card, .why-card { transition: transform 0.15s ease, box-shadow 0.15s ease !important; } } /* ============================================ PHASE 6: Image Aspect Ratios Prevents layout shift from images loading ============================================ */ /* Service card images - 4:3 aspect ratio */ .service-card-v2 .card-image, .card-image { aspect-ratio: 4 / 3; overflow: hidden; } .service-card-v2 .card-image img, .card-image img { width: 100%; height: 100%; object-fit: cover; } /* Hero background images - 16:9 on desktop, taller on mobile */ .hero-bg-image { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: 100%; } @media (max-width: 768px) { .hero-bg-image { aspect-ratio: 4 / 3; } } /* Trust logos - maintain square aspect */ /* Team/about images */ .about-image img { aspect-ratio: 3 / 2; object-fit: cover; }