/* ============================================================ VOXILYTICS LTD — GLOBAL STYLESHEET css/global.css Built: G2 All brand styles, utilities, components, and animations live in this single file. Section order: 01. CSS Custom Properties (:root) 02. CSS Reset 03. Base Typography 04. Accessibility & Focus 05. Skip Link 06. Scrollbar & Selection 07. Utility Classes 08. Button Styles 09. Tag Pills 10. Card Components 11. Section Heading (teal underline) 12. Grid Utilities 13. Visual Motif Utilities 14. Navbar Component (G3) 15. Footer Component (G4) 16. Cookie Banner (G5) 17. Newsletter Section (G6) 18. Chat Widget (G7) 19. Animations & Keyframes 20. Print Media Query ============================================================ */ /* ============================================================ 01. CSS CUSTOM PROPERTIES ============================================================ */ :root { /* ── Colour Palette ─────────────────────────────────────── */ --color-navy: #0A1628; --color-slate: #1E2D45; --color-teal: #00C9A7; --color-blue: #1565C8; --color-cloud: #F5F8FF; --color-mint: #E8F4F0; --color-white: #FFFFFF; --color-dark-text: #1A2A3A; --color-muted: #7A9CC0; --color-muted-light: #5A7A9A; --color-border: rgba(0, 201, 167, 0.2); --color-border-dark: rgba(255, 255, 255, 0.08); --color-deeper-navy: #060E1A; --color-error: #FF6B6B; --color-success: #00C9A7; /* ── Typography ─────────────────────────────────────────── */ --font-heading: 'Inter', sans-serif; --font-body: 'DM Sans', sans-serif; --font-label: 'Space Grotesk', sans-serif; --fs-h1: clamp(36px, 5vw, 72px); --fs-h2: clamp(28px, 3.5vw, 48px); --fs-h3: clamp(20px, 2.5vw, 28px); --fs-h4: 20px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; --lh-heading: 1.15; --lh-body: 1.7; /* ── Spacing ────────────────────────────────────────────── */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 80px; --space-2xl: 100px; /* ── Layout ─────────────────────────────────────────────── */ --container-max: 1200px; --container-pad: 24px; --section-pad-v: 80px; --navbar-h: 70px; /* ── Borders & Radius ───────────────────────────────────── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px; /* ── Shadows ────────────────────────────────────────────── */ --shadow-card: 0 4px 24px rgba(10, 22, 40, 0.12); --shadow-teal: 0 4px 20px rgba(0, 201, 167, 0.25); --shadow-float: 0 8px 32px rgba(10, 22, 40, 0.18); /* ── Transitions ────────────────────────────────────────── */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* ── Breakpoints (reference only — use in media queries) ── */ /* --bp-sm: 480px --bp-md: 768px --bp-lg: 1024px */ /* --bp-xl: 1280px --bp-2xl: 1440px */ } /* ============================================================ 02. CSS RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; /* NEW — stops any oversized child from widening the layout viewport */ width: 100%; /* NEW — locks to the real device width */ } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-dark-text); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; width: 100%; /* NEW */ position: relative; /* NEW — gives body a stable containing block */ } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } img, video, svg { display: block; max-width: 100%; height: auto; } input, textarea, select, button { font-family: inherit; font-size: inherit; } button { cursor: pointer; border: none; background: none; } fieldset { border: none; } table { border-collapse: collapse; width: 100%; } /* ============================================================ 03. BASE TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--lh-heading); font-weight: 700; color: inherit; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 500; } h4 { font-size: var(--fs-h4); font-weight: 500; } h5 { font-size: 18px; font-weight: 500; } h6 { font-size: var(--fs-body); font-weight: 500; } p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: inherit; max-width: 72ch; } /* Paragraphs inside centred containers stretch full width */ .text-center p { margin-left: auto; margin-right: auto; } strong { font-weight: 700; } em { font-style: italic; } small { font-size: var(--fs-small); line-height: 1.5; } blockquote { border-left: 4px solid var(--color-teal); padding-left: var(--space-md); font-style: italic; color: var(--color-muted); } label { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.06em; font-weight: 500; } /* ============================================================ 04. ACCESSIBILITY & FOCUS ============================================================ */ /* Universal focus ring — teal, 2px offset */ :focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; border-radius: 2px; } /* Remove default outline for mouse users — only show for keyboard */ :focus:not(:focus-visible) { outline: none; } /* Minimum touch target size for all interactive elements */ button, a, input, select, textarea, [role="button"] { min-height: 44px; } /* ============================================================ DECORATIVE ELEMENTS — NEVER BLOCK CLICKS aria-hidden elements are purely visual and should never intercept pointer events on any page. ============================================================ */ [aria-hidden="true"] { pointer-events: none; } /* Reduce motion for users who prefer it */ @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; } } /* ============================================================ 05. SKIP LINK ============================================================ */ .skip-link { position: absolute; top: -100%; left: var(--space-md); z-index: 9999; background: var(--color-teal); color: var(--color-navy); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-small); padding: 10px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top var(--transition-fast); white-space: nowrap; } .skip-link:focus { top: 0; outline: 2px solid var(--color-navy); outline-offset: 2px; } /* ============================================================ 06. SCROLLBAR & SELECTION ============================================================ */ /* Scrollbar — webkit browsers */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-navy); } ::-webkit-scrollbar-thumb { background: var(--color-teal); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: #00b393; } /* Text selection */ ::selection { background-color: var(--color-teal); color: var(--color-navy); } ::-moz-selection { background-color: var(--color-teal); color: var(--color-navy); } /* ============================================================ 07. UTILITY CLASSES ============================================================ */ /* ── Layout ─────────────────────────────────────────────── */ .container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .section-padding { padding-top: var(--section-pad-v); padding-bottom: var(--section-pad-v); } @media (max-width: 768px) { .section-padding { padding-top: 56px; padding-bottom: 56px; } } @media (max-width: 480px) { .section-padding { padding-top: 40px; padding-bottom: 40px; } } /* ── Section Backgrounds ─────────────────────────────────── */ .section-dark { background-color: var(--color-navy); color: var(--color-white); } .section-dark p, .section-dark li, .section-dark small { color: var(--color-muted); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 { color: var(--color-white); } .section-light { background-color: var(--color-cloud); color: var(--color-dark-text); } .section-teal { background-color: var(--color-teal); color: var(--color-navy); } .section-teal p, .section-teal h1, .section-teal h2, .section-teal h3, .section-teal h4 { color: var(--color-navy); } .section-deeper { background-color: var(--color-deeper-navy); color: var(--color-white); } /* ── Text Utilities ──────────────────────────────────────── */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-teal { color: var(--color-teal); } .text-blue { color: var(--color-blue); } .text-muted { color: var(--color-muted); } .text-muted-light { color: var(--color-muted-light); } .text-white { color: var(--color-white); } .text-navy { color: var(--color-navy); } .text-label { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .font-heading { font-family: var(--font-heading); } .font-body { font-family: var(--font-body); } .font-label { font-family: var(--font-label); } /* ── Spacing Utilities ───────────────────────────────────── */ .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-xs { margin-bottom: var(--space-xs); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* ── Display Utilities ───────────────────────────────────── */ .d-flex { display: flex; } .align-center { align-items: center; } .justify-center{ justify-content: center; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; } .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Fade-in-up Animation Class ──────────────────────────── */ .fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in-up.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ 08. BUTTON STYLES ============================================================ */ /* ── Shared Button Base ──────────────────────────────────── */ .btn-primary, .btn-secondary, .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-body); padding: 14px 28px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); min-height: 48px; line-height: 1; } .btn-primary:hover, .btn-secondary:hover, .btn-dark:hover { transform: translateY(-1px); } .btn-primary:active, .btn-secondary:active, .btn-dark:active { transform: translateY(0); } /* ── Primary — Filled Teal ───────────────────────────────── */ .btn-primary { background-color: var(--color-teal); color: var(--color-navy); border-color: var(--color-teal); } .btn-primary:hover { background-color: #00b393; border-color: #00b393; box-shadow: var(--shadow-teal); } /* ── Secondary — Outline Teal ────────────────────────────── */ .btn-secondary { background-color: transparent; color: var(--color-teal); border-color: var(--color-teal); } .btn-secondary:hover { background-color: var(--color-teal); color: var(--color-navy); box-shadow: var(--shadow-teal); } /* ── Dark — Filled Navy ──────────────────────────────────── */ .btn-dark { background-color: var(--color-navy); color: var(--color-white); border-color: var(--color-teal); } .btn-dark:hover { background-color: var(--color-slate); box-shadow: var(--shadow-teal); } /* ── Small Button Modifier ───────────────────────────────── */ .btn--sm { padding: 9px 18px; font-size: var(--fs-small); min-height: 38px; } /* ── Full-width Button Modifier ──────────────────────────── */ .btn--full { width: 100%; } /* ── Disabled State ──────────────────────────────────────── */ .btn-primary:disabled, .btn-secondary:disabled, .btn-dark:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } /* ============================================================ 09. TAG PILLS ============================================================ */ .tag-pill { display: inline-block; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background-color: var(--color-mint); color: var(--color-teal); padding: 5px 14px; border-radius: var(--radius-full); line-height: 1.4; white-space: nowrap; } /* Inverted pill — navy bg, teal text (used on teal sections) */ .tag-pill--inverted { background-color: var(--color-navy); color: var(--color-teal); } /* Dark variant — slate bg for use on dark sections */ .tag-pill--dark { background-color: rgba(0, 201, 167, 0.12); color: var(--color-teal); border: 1px solid var(--color-border); } /* ============================================================ 10. CARD COMPONENTS ============================================================ */ /* ── Dark Card (for dark section backgrounds) ────────────── */ .card { background-color: var(--color-slate); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .card:hover { transform: translateY(-4px); border-color: var(--color-teal); box-shadow: var(--shadow-teal); } /* ── Light Card (for light section backgrounds) ──────────── */ .card-light { background-color: var(--color-white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-md); padding: 28px; transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .card-light:hover { transform: translateY(-4px); border-color: var(--color-teal); box-shadow: var(--shadow-card); } /* ── Teal Left-Border Accent Card ────────────────────────── */ .card-accent { border-left: 4px solid var(--color-teal); } /* ============================================================ 11. SECTION HEADING WITH TEAL UNDERLINE ============================================================ */ .section-heading { position: relative; display: inline-block; margin-bottom: var(--space-md); } /* Teal underline bar — 60px wide, 3px tall */ .section-heading::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--color-teal); margin-top: 12px; border-radius: 2px; } /* Centre the underline when heading is centred */ .text-center .section-heading::after { margin-left: auto; margin-right: auto; } /* ============================================================ 12. GRID UTILITIES ============================================================ */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } /* Tablet breakpoints */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ============================================================ 13. VISUAL MOTIF UTILITIES ============================================================ */ /* ── Dot Grid Background Texture ─────────────────────────── */ .dot-grid-bg { background-image: radial-gradient( circle, rgba(0, 201, 167, 0.12) 1px, transparent 1px ); background-size: 28px 28px; } /* ── Waveform SVG Container ──────────────────────────────── */ .waveform-container { position: absolute; bottom: 0; left: 0; width: 200%; height: 80px; overflow: hidden; pointer-events: none; } .waveform-container svg { width: 100%; height: 100%; animation: waveMove 12s linear infinite; } /* ── Data Node Scatter (decorative circles) ──────────────── */ .data-node { position: absolute; border-radius: 50%; background-color: var(--color-teal); opacity: 0.25; pointer-events: none; animation: floatUp 6s ease-in-out infinite; } .data-node--blue { background-color: var(--color-blue); } /* ── Teal Left Border on info boxes ──────────────────────── */ .border-teal-left { border-left: 4px solid var(--color-teal); padding-left: var(--space-md); } /* ============================================================ 14. NAVBAR COMPONENT — G3 ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; /* NEW — belt-and-braces alongside left/right:0 */ max-width: 100vw; /* NEW — caps it even if a parent's containing block got stretched */ z-index: 1000; background-color: var(--color-navy); border-bottom: 1px solid var(--color-border); height: var(--navbar-h); transition: height var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .navbar--scrolled { height: 56px; border-bottom-color: var(--color-teal); box-shadow: 0 0 20px rgba(0, 201, 167, 0.12); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } /* ── Logo ────────────────────────────────────────────────── */ .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .logo__icon { width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-navy); border: 2px solid var(--color-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo__text { display: flex; align-items: baseline; } .logo__vox { color: var(--color-white); font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1; } .logo__ilytics { color: var(--color-teal); font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1; } /* ── Nav Menu ────────────────────────────────────────────── */ .navbar__menu { display: flex; align-items: center; gap: var(--space-lg); } .navbar__links { display: flex; align-items: center; gap: 4px; } .navbar__links li a { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--color-muted); padding: 8px 12px; border-radius: var(--radius-sm); position: relative; transition: color var(--transition-fast); white-space: nowrap; } .navbar__links li a:hover, .navbar__links li a.active { color: var(--color-teal); } /* Active indicator dot */ .navbar__links li a.active::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: var(--color-teal); border-radius: 50%; } /* CTA button in navbar */ .navbar__cta { padding: 10px 20px; min-height: 40px; font-size: 14px; } /* ── Hamburger Button ────────────────────────────────────── */ .navbar__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 8px; border-radius: var(--radius-sm); flex-shrink: 0; } .navbar__hamburger span { display: block; width: 24px; height: 2px; background-color: var(--color-white); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); transform-origin: center; } /* Hamburger → X animation */ .navbar__hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar__hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Breadcrumb ──────────────────────────────────────────── */ .breadcrumb__list { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 8px; padding: 0; margin: 0; } .breadcrumb__link { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); transition: color var(--transition-fast); } .breadcrumb__link:hover { color: var(--color-teal); } .breadcrumb__sep { color: var(--color-muted); font-size: 12px; opacity: 0.5; } .breadcrumb__current { font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-teal); } /* ── Mobile Nav ──────────────────────────────────────────── */ /* ── Mobile Nav ──────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --navbar-h: 60px; } .navbar__hamburger { display: flex; } /* Hide logo text on tablet/mobile */ .logo__text { display: none; } .navbar__menu { position: absolute; top: var(--navbar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background-color: var(--color-navy); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0; } .navbar__menu.is-open { max-height: 520px; /* bumped — more links may need space */ padding: var(--space-sm) 0; } .navbar__links { flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--space-md); } .navbar__links li a { display: block; padding: 13px 8px; border-bottom: 1px solid var(--color-border-dark); font-size: 15px; } .navbar__links li:last-child a { border-bottom: none; } .navbar__cta { margin: var(--space-sm) var(--space-md); text-align: center; justify-content: center; } } /* ── Show logo text between 420px and 1024px ─────────────── */ /* ── Show logo text between 360px and 1024px ─────────────── */ @media (min-width: 360px) and (max-width: 1024px) { .logo__text { display: flex; } .logo__vox, .logo__ilytics { font-size: 18px; /* slightly smaller to avoid squeeze on tablet */ } } /* ── Tighten wordmark further on the narrowest phones ────── */ @media (min-width: 360px) and (max-width: 479px) { .logo__vox, .logo__ilytics { font-size: 15px; /* logo icon + hamburger eat ~100px at 360px, keep text compact */ } } /* ── Restore full logo size on desktop ───────────────────── */ @media (min-width: 1025px) { .logo__vox, .logo__ilytics { font-size: 22px; } } /* Navbar spacer — pushes page content below fixed navbar */ .navbar-spacer { height: var(--navbar-h); flex-shrink: 0; } /* ============================================================ 15. FOOTER COMPONENT — G4 ============================================================ */ /* ============================================================ FOOTER COMPONENT — G4 ============================================================ */ /* ── Core footer — sticky bottom + override stacking ─────── */ .footer { background-color: var(--color-navy); position: relative; z-index: 100; /* sits above stray page elements */ /* overflow: hidden REMOVED — wave clipping is handled by .footer__wave { overflow: hidden } below; keeping it here would clip the ::after pseudo-element that extends downward */ flex-shrink: 0; /* works with flex body for sticky footer */ margin-top: auto; /* pushes footer down on short pages */ } /* ── Covers anything that bleeds BELOW the footer ────────── */ /* KEY LOGIC: - position: absolute → anchored to .footer (its nearest positioned ancestor) - top: 100% → starts at the exact bottom edge of the footer - height: 100vh → extends one full viewport-height downward - z-index: 1 → within footer's stacking context (footer is z-index:100 in parent), so effectively overrides any sibling elements that appear after