Responsive Design System

**Referenced Files in This Document** - [main.css](file://src/assets/css/main.css) - [01-variables-reset.css](file://src/assets/css/modules/01-variables-reset.css) - [02-global-utilities.css](file://src/assets/css/modules/02-global-utilities.css) - [25-responsive-tablet-max-width-1024px.css](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css) - [26-responsive-mobile-max-width-900px.css](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css) - [27-responsive-small-mobile-max-width-600px.css](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css) - [28-responsive-extra-small-max-width-480px.css](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css) - [29-reduced-motion.css](file://src/assets/css/modules/29-reduced-motion.css) - [30-service-detail-responsive.css](file://src/assets/css/modules/30-service-detail-responsive.css) - [33-capabilities-page-responsive-service-detail-rows.css](file://src/assets/css/modules/33-capabilities-page-responsive-service-detail-rows.css) - [43-mobile-menu-theme-aware-mobile-only.css](file://src/assets/css/modules/43-mobile-menu-theme-aware-mobile-only.css) - [navigation.js](file://src/assets/js/modules/navigation.js) - [carousel-system.js](file://src/assets/js/modules/carousel-system.js) - [main.js](file://src/assets/js/main.js)

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction

This document explains the responsive design system used across the project. It details the four-tier breakpoint system (tablet, mobile, small mobile, extra-small), the mobile-first approach, progressive enhancement patterns, reduced motion accessibility, responsive typography and layout adjustments, and component adaptations. It also covers media query patterns, container queries, adaptive component behaviors, and performance implications for mobile devices.

Project Structure

The responsive system is implemented primarily via modular CSS files imported into a single main stylesheet. Breakpoints are organized by device category, and shared responsive utilities and accessibility rules are centralized. JavaScript modules provide adaptive behavior for interactive components such as navigation and carousels.

graph TB
subgraph "CSS Entry"
M["main.css"]
end
subgraph "Breakpoints"
T["25-tablet ≤1024px"]
MOB["26-mobile ≤900px"]
SM["27-small-mobile ≤600px"]
XS["28-extra-small ≤480px"]
end
subgraph "Shared"
RM["29-reduced-motion"]
SD["30-service-detail-responsive"]
CT["33-capabilities-page-responsive-service-detail-rows"]
MM["43-mobile-menu-theme-aware-mobile-only"]
end
M --> T
M --> MOB
M --> SM
M --> XS
M --> RM
M --> SD
M --> CT
M --> MM

Diagram sources

  • [main.css:27-30](file://src/assets/css/main.css#L27-L30)
  • [25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [27-responsive-small-mobile-max-width-600px.css:1-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L1-L36)
  • [28-responsive-extra-small-max-width-480px.css:1-13](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L1-L13)
  • [29-reduced-motion.css:1-646](file://src/assets/css/modules/29-reduced-motion.css#L1-L646)
  • [30-service-detail-responsive.css:1-28](file://src/assets/css/modules/30-service-detail-responsive.css#L1-L28)
  • [33-capabilities-page-responsive-service-detail-rows.css:1-13](file://src/assets/css/modules/33-capabilities-page-responsive-service-detail-rows.css#L1-L13)
  • [43-mobile-menu-theme-aware-mobile-only.css:1-84](file://src/assets/css/modules/43-mobile-menu-theme-aware-mobile-only.css#L1-L84)

Section sources

  • [main.css:1-47](file://src/assets/css/main.css#L1-L47)

Core Components

  • Four-tier breakpoint system:
    • Tablet: up to 1024px
    • Mobile: up to 900px
    • Small mobile: up to 600px
    • Extra-small: up to 480px
  • Mobile-first baseline with progressively enhanced styles at larger screens.
  • Reduced motion support via prefers-reduced-motion media query.
  • Responsive typography using relative units and clamp() for fluid scaling.
  • Adaptive components: navigation, carousels, grids, and page-specific layouts.

Section sources

  • [25-responsive-tablet-max-width-1024px.css:6-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L6-L333)
  • [26-responsive-mobile-max-width-900px.css:6-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L6-L358)
  • [27-responsive-small-mobile-max-width-600px.css:5-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L5-L36)
  • [28-responsive-extra-small-max-width-480px.css:5-13](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L5-L13)
  • [29-reduced-motion.css:5-14](file://src/assets/css/modules/29-reduced-motion.css#L5-L14)
  • [01-variables-reset.css:45-64](file://src/assets/css/modules/01-variables-reset.css#L45-L64)
  • [02-global-utilities.css:5-27](file://src/assets/css/modules/02-global-utilities.css#L5-L27)

Architecture Overview

The responsive architecture combines:

  • CSS media queries per breakpoint tier
  • Progressive enhancement: base styles at smaller screens, refined at larger breakpoints
  • Accessibility-first reduced motion rules
  • JavaScript-driven adaptive components (navigation and carousels)
  • Container queries via viewport-relative widths and scroll-driven calculations
graph TB
subgraph "Base Styles"
V["Variables & Reset<br/>01-variables-reset.css"]
U["Global Utilities<br/>02-global-utilities.css"]
end
subgraph "Breakpoints"
B1024["≤1024px<br/>25-tablet"]
B900["≤900px<br/>26-mobile"]
B600["≤600px<br/>27-small-mobile"]
B480["≤480px<br/>28-extra-small"]
end
subgraph "Accessibility"
RM["Reduced Motion<br/>29-reduced-motion"]
end
subgraph "Components"
NAV["Navigation<br/>navigation.js"]
CAR["Carousels<br/>carousel-system.js"]
SD["Service Detail<br/>30-service-detail-responsive.css"]
CP["Capabilities Rows<br/>33-capabilities-page-responsive-service-detail-rows.css"]
MM["Mobile Menu Theming<br/>43-mobile-menu-theme-aware-mobile-only.css"]
end
V --> B1024
U --> B1024
B1024 --> B900
B900 --> B600
B600 --> B480
RM --> B1024
NAV --> B1024
CAR --> B900
SD --> B1024
SD --> B900
CP --> B900
MM --> B1024

Diagram sources

  • [01-variables-reset.css:11-64](file://src/assets/css/modules/01-variables-reset.css#L11-L64)
  • [02-global-utilities.css:5-27](file://src/assets/css/modules/02-global-utilities.css#L5-L27)
  • [25-responsive-tablet-max-width-1024px.css:6-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L6-L333)
  • [26-responsive-mobile-max-width-900px.css:6-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L6-L358)
  • [27-responsive-small-mobile-max-width-600px.css:5-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L5-L36)
  • [28-responsive-extra-small-max-width-480px.css:5-13](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L5-L13)
  • [29-reduced-motion.css:5-14](file://src/assets/css/modules/29-reduced-motion.css#L5-L14)
  • [navigation.js:3-78](file://src/assets/js/modules/navigation.js#L3-L78)
  • [carousel-system.js:3-169](file://src/assets/js/modules/carousel-system.js#L3-L169)
  • [30-service-detail-responsive.css:5-25](file://src/assets/css/modules/30-service-detail-responsive.css#L5-L25)
  • [33-capabilities-page-responsive-service-detail-rows.css:5-13](file://src/assets/css/modules/33-capabilities-page-responsive-service-detail-rows.css#L5-L13)
  • [43-mobile-menu-theme-aware-mobile-only.css:6-82](file://src/assets/css/modules/43-mobile-menu-theme-aware-mobile-only.css#L6-L82)

Detailed Component Analysis

Breakpoint System and Media Queries

  • The system defines four breakpoint tiers using max-width media queries.
  • Styles cascade upward: base styles apply on small screens, then refined at larger breakpoints.
  • Container queries are not explicitly defined in the codebase; instead, responsive behavior is driven by viewport-based media queries and component-specific logic (e.g., carousels compute items per page based on client width).
flowchart TD
Start(["Viewport Width"]) --> T1024["≤1024px"]
T1024 --> T900["≤900px"]
T900 --> T600["≤600px"]
T600 --> T480["≤480px"]
T1024 --> ApplyT1024["Apply tablet styles"]
T900 --> ApplyT900["Apply mobile styles"]
T600 --> ApplyT600["Apply small-mobile styles"]
T480 --> ApplyT480["Apply extra-small styles"]

Diagram sources

  • [25-responsive-tablet-max-width-1024px.css:6](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L6)
  • [26-responsive-mobile-max-width-900px.css:6](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L6)
  • [27-responsive-small-mobile-max-width-600px.css:5](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L5)
  • [28-responsive-extra-small-max-width-480px.css:5](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L5)

Section sources

  • [25-responsive-tablet-max-width-1024px.css:6-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L6-L333)
  • [26-responsive-mobile-max-width-900px.css:6-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L6-L358)
  • [27-responsive-small-mobile-max-width-600px.css:5-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L5-L36)
  • [28-responsive-extra-small-max-width-480px.css:5-13](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L5-L13)

Mobile-First and Progressive Enhancement

  • Base HTML and body font sizing and line height are set at the root level.
  • Typography scales using relative units and clamp() for readability across devices.
  • Components progressively enhance at larger breakpoints: navigation transforms from desktop to mobile menu, carousels adjust item widths, grids change column counts, and hero heights adapt.
sequenceDiagram
participant Root as "Root Styles"
participant Tablet as "Tablet Styles"
participant Mobile as "Mobile Styles"
participant Small as "Small-Mobile Styles"
participant XSmall as "Extra-Small Styles"
Root->>Tablet : "Progressive refinement"
Tablet->>Mobile : "Further refinement"
Mobile->>Small : "Stacking and spacing adjustments"
Small->>XSmall : "Final compact layout"

Diagram sources

  • [02-global-utilities.css:5-27](file://src/assets/css/modules/02-global-utilities.css#L5-L27)
  • [01-variables-reset.css:45-64](file://src/assets/css/modules/01-variables-reset.css#L45-L64)
  • [25-responsive-tablet-max-width-1024px.css:18-330](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L18-L330)
  • [26-responsive-mobile-max-width-900px.css:14-357](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L14-L357)
  • [27-responsive-small-mobile-max-width-600px.css:7-33](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L7-L33)
  • [28-responsive-extra-small-max-width-480px.css:6-10](file://src/assets/css/modules/28-responsive-extra-small-max-width-480px.css#L6-L10)

Section sources

  • [02-global-utilities.css:5-27](file://src/assets/css/modules/02-global-utilities.css#L5-L27)
  • [01-variables-reset.css:45-64](file://src/assets/css/modules/01-variables-reset.css#L45-L64)

Reduced Motion Accessibility

  • The reduced motion rule targets prefers-reduced-motion: reduce or eliminate transitions and animations for users with motion sensitivity.
  • Specific selectors disable animations and transitions globally under the reduced motion condition.
flowchart TD
UA["User Agent"] --> Prefers["prefers-reduced-motion: reduce"]
Prefers --> Disable["Disable transitions/animations"]
Disable --> Cursor["Hide custom cursor"]
Disable --> Marquee["Disable logo track"]

Diagram sources

  • [29-reduced-motion.css:5-14](file://src/assets/css/modules/29-reduced-motion.css#L5-L14)

Section sources

  • [29-reduced-motion.css:5-14](file://src/assets/css/modules/29-reduced-motion.css#L5-L14)

Responsive Typography Scaling

  • Typography tokens and clamp() are defined in variables and applied to headings and body text.
  • Fluid scaling ensures readable text across breakpoints without manual per-breakpoint font-size declarations.
classDiagram
class VariablesReset {
+font families
+typography tokens
+clamp() usage
}
class GlobalUtilities {
+base font-size
+line-height
}
VariablesReset --> GlobalUtilities : "provides tokens"

Diagram sources

  • [01-variables-reset.css:45-64](file://src/assets/css/modules/01-variables-reset.css#L45-L64)
  • [02-global-utilities.css:5-27](file://src/assets/css/modules/02-global-utilities.css#L5-L27)

Section sources

  • [01-variables-reset.css:45-64](file://src/assets/css/modules/01-variables-reset.css#L45-L64)
  • [02-global-utilities.css:5-27](file://src/assets/css/modules/02-global-utilities.css#L5-L27)

Layout Adjustments Across Screen Sizes

  • Grids adapt: process and case study grids become single-column at small/mobile breakpoints.
  • Carousels switch to full-width cards and adjust scroll amounts based on viewport width.
  • Navigation transforms into a mobile menu with theme-aware styling.
  • Page heroes and detail sections adjust padding and heights.
sequenceDiagram
participant Viewport as "Viewport"
participant Tablet as "Tablet Rules"
participant Mobile as "Mobile Rules"
participant Small as "Small-Mobile Rules"
Viewport->>Tablet : "≥1024px"
Viewport->>Mobile : "≥900px"
Viewport->>Small : "≥600px"
Tablet-->>Viewport : "Grids 2-columns, hero heights"
Mobile-->>Viewport : "Cards full-width, stacked detail rows"
Small-->>Viewport : "Single-column grids, compact spacing"

Diagram sources

  • [25-responsive-tablet-max-width-1024px.css:188-330](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L188-L330)
  • [26-responsive-mobile-max-width-900px.css:81-357](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L81-L357)
  • [27-responsive-small-mobile-max-width-600px.css:7-33](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L7-L33)

Section sources

  • [25-responsive-tablet-max-width-1024px.css:188-330](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L188-L330)
  • [26-responsive-mobile-max-width-900px.css:81-357](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L81-L357)
  • [27-responsive-small-mobile-max-width-600px.css:7-33](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L7-L33)

Component Adaptations

  • Navigation: hamburger menu becomes active with clip-path animation and staggered link reveal; theme-aware styling applies for light/dark modes and IAA branding.
  • Carousels: dynamic calculation of items per page based on client width; dots and scroll controls update on resize; keyboard and drag interactions supported.
  • Service detail and capabilities pages: grids and rows reflow at each breakpoint; hero heights and paddings adjust accordingly.
sequenceDiagram
participant User as "User"
participant NavJS as "navigation.js"
participant NavCSS as "25/43-tablet/mobile rules"
participant CarJS as "carousel-system.js"
participant CarCSS as "26-mobile rules"
User->>NavJS : "Click hamburger"
NavJS->>NavCSS : "Add active classes, manage aria"
User->>CarJS : "Click next/prev or drag"
CarJS->>CarCSS : "Adjust scroll amount, update dots"

Diagram sources

  • [navigation.js:3-78](file://src/assets/js/modules/navigation.js#L3-L78)
  • [25-responsive-tablet-max-width-1024px.css:75-187](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L75-L187)
  • [43-mobile-menu-theme-aware-mobile-only.css:6-82](file://src/assets/css/modules/43-mobile-menu-theme-aware-mobile-only.css#L6-L82)
  • [carousel-system.js:3-169](file://src/assets/js/modules/carousel-system.js#L3-L169)
  • [26-responsive-mobile-max-width-900px.css:81-120](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L81-L120)

Section sources

  • [navigation.js:3-78](file://src/assets/js/modules/navigation.js#L3-L78)
  • [carousel-system.js:3-169](file://src/assets/js/modules/carousel-system.js#L3-L169)
  • [25-responsive-tablet-max-width-1024px.css:75-187](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L75-L187)
  • [43-mobile-menu-theme-aware-mobile-only.css:6-82](file://src/assets/css/modules/43-mobile-menu-theme-aware-mobile-only.css#L6-L82)
  • [26-responsive-mobile-max-width-900px.css:81-120](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L81-L120)

Page-Specific Responsive Behaviors

  • Service detail page: card grids, three-column grids, and hero heights adapt at tablet and mobile breakpoints.
  • Capabilities page: service detail rows stack and reorder at smaller screens.
flowchart TD
SD["Service Detail<br/>30-service-detail-responsive.css"] --> T1024SD["≤1024px: adjust grids and hero"]
SD --> T900SD["≤900px: reduce padding and hero size"]
CP["Capabilities Rows<br/>33-capabilities-page-responsive-service-detail-rows.css"] --> T900CP["≤900px: stack detail rows"]

Diagram sources

  • [30-service-detail-responsive.css:5-25](file://src/assets/css/modules/30-service-detail-responsive.css#L5-L25)
  • [33-capabilities-page-responsive-service-detail-rows.css:5-13](file://src/assets/css/modules/33-capabilities-page-responsive-service-detail-rows.css#L5-L13)

Section sources

  • [30-service-detail-responsive.css:5-25](file://src/assets/css/modules/30-service-detail-responsive.css#L5-L25)
  • [33-capabilities-page-responsive-service-detail-rows.css:5-13](file://src/assets/css/modules/33-capabilities-page-responsive-service-detail-rows.css#L5-L13)

Dependency Analysis

  • CSS import order determines cascade precedence and breakpoint stacking.
  • JavaScript initialization occurs after DOMContentLoaded, enabling responsive components to measure viewport and adjust behavior.
  • Navigation and carousel modules depend on responsive CSS to function properly across breakpoints.
graph LR
MainCSS["main.css"] --> Tablet["25-tablet"]
MainCSS --> Mobile["26-mobile"]
MainCSS --> Small["27-small-mobile"]
MainCSS --> XSmall["28-extra-small"]
MainCSS --> Reduced["29-reduced-motion"]
MainCSS --> SD["30-service-detail-responsive"]
MainCSS --> CP["33-capabilities-rows"]
MainCSS --> MM["43-mobile-menu-theme-aware"]
MainJS["main.js"] --> Nav["navigation.js"]
MainJS --> Car["carousel-system.js"]
Nav --> MM
Car --> Mobile

Diagram sources

  • [main.css:27-30](file://src/assets/css/main.css#L27-L30)
  • [main.js:15-36](file://src/assets/js/main.js#L15-L36)
  • [navigation.js:3-78](file://src/assets/js/modules/navigation.js#L3-L78)
  • [carousel-system.js:3-169](file://src/assets/js/modules/carousel-system.js#L3-L169)

Section sources

  • [main.css:27-30](file://src/assets/css/main.css#L27-L30)
  • [main.js:15-36](file://src/assets/js/main.js#L15-L36)

Performance Considerations

  • Prefer container queries or viewport-relative units to minimize layout thrashing during resize.
  • Use passive event listeners for scroll and resize handlers to improve scrolling performance.
  • Defer heavy animations behind reduced motion preferences and avoid unnecessary repaints.
  • Keep media queries scoped and avoid excessive specificity to reduce CSS parsing overhead.
  • Lazy-load non-critical assets and defer animations until after initial paint.

[No sources needed since this section provides general guidance]

Troubleshooting Guide

  • Navigation menu does not open on mobile:
    • Verify the navigation module initializes and toggles active classes.
    • Confirm the mobile menu styles and theme-aware overrides are applied at the correct breakpoint.
  • Carousels show incorrect item counts:
    • Ensure the carousel module recalculates items per page on resize and updates scroll behavior.
    • Check that snap points and dots reflect the current viewport width.
  • Reduced motion not taking effect:
    • Confirm the prefers-reduced-motion media query is present and targeting the correct selectors.
    • Ensure user agent supports the media query and the page is served over a secure context.

Section sources

  • [navigation.js:3-78](file://src/assets/js/modules/navigation.js#L3-L78)
  • [carousel-system.js:110-119](file://src/assets/js/modules/carousel-system.js#L110-L119)
  • [29-reduced-motion.css:5-14](file://src/assets/css/modules/29-reduced-motion.css#L5-L14)

Conclusion

The responsive design system employs a clear four-tier breakpoint approach with mobile-first foundations and progressive enhancement. It integrates reduced motion accessibility, fluid typography, and adaptive components that respond to viewport changes. While container queries are not explicitly used, the system leverages viewport-relative media queries and JavaScript-driven calculations to maintain responsiveness and performance across devices.