/* ╔══════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ MISSION AUTO GLASS — MASTER STYLESHEET ║ ║ Version 3.0 ║ ║ ║ ║ CONTENTS: ║ ║ SECTION 1: ROOT ............. Variables, Reset, Base Styles ║ ║ SECTION 2: HEADER ........... Top Bar, Main Header, Nav, Drawer ║ ║ SECTION 3: FOOTER ........... Prefooter CTA, Footer Grid, Legal ║ ║ SECTION 4: COMPONENTS ....... Buttons, Cards, Forms (shared) ║ ║ SECTION 5: UTILITIES ........ Helper classes ║ ║ SECTION 6: PRINT ............ Print styles ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ */ /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 1: ROOT ██ ██ Variables, Reset, Base Typography, Layout Primitives ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 1.1 CSS CUSTOM PROPERTIES (Design Tokens) ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────────────────── BRAND COLORS ───────────────────────────────────────────────────────────────────────── */ --color-brand-blue: #183075; --color-brand-blue-dark: #0f1e4a; --color-brand-red: #EC1C24; --color-brand-red-dark: #b9151b; --color-brand-gold: #FFC107; --color-brand-white: #ffffff; /* ───────────────────────────────────────────────────────────────────────── NEUTRAL SCALE (Gray Palette) ───────────────────────────────────────────────────────────────────────── */ --color-neutral-50: #f9fafb; --color-neutral-100: #f3f4f6; --color-neutral-200: #e5e7eb; --color-neutral-300: #d1d5db; --color-neutral-400: #9ca3af; --color-neutral-500: #6b7280; --color-neutral-600: #4b5563; --color-neutral-700: #374151; --color-neutral-800: #1f2937; --color-neutral-900: #111827; --color-neutral-950: #030712; /* ───────────────────────────────────────────────────────────────────────── SEMANTIC COLORS (Feedback States) ───────────────────────────────────────────────────────────────────────── */ --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #3b82f6; /* ───────────────────────────────────────────────────────────────────────── CONTEXTUAL VARIABLES (Mutable - change per section) ───────────────────────────────────────────────────────────────────────── */ --bg: var(--color-brand-white); --bg-surface: var(--color-neutral-50); --text: var(--color-neutral-600); --text-strong: var(--color-neutral-900); --text-muted: var(--color-neutral-400); --border: var(--color-neutral-200); --action: var(--color-brand-red); --action-hover: var(--color-brand-red-dark); --primary: var(--color-brand-blue); --primary-dark: var(--color-brand-blue-dark); /* ───────────────────────────────────────────────────────────────────────── TYPOGRAPHY SCALE (Readable sizes) ───────────────────────────────────────────────────────────────────────── */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 2.75rem; /* 44px */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ───────────────────────────────────────────────────────────────────────── SPACING SCALE ───────────────────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ───────────────────────────────────────────────────────────────────────── LAYOUT ───────────────────────────────────────────────────────────────────────── */ --container-width: 1280px; --container-narrow: 800px; --container-wide: 1400px; --gutter: 1rem; --measure: 65ch; /* ───────────────────────────────────────────────────────────────────────── UI TOKENS ───────────────────────────────────────────────────────────────────────── */ --radius-sm: 0.25rem; --radius: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.12); --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.2); --transition-fast: 150ms ease; --transition: 250ms ease; --transition-slow: 350ms ease; /* ───────────────────────────────────────────────────────────────────────── Z-INDEX SCALE ───────────────────────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-header: 1000; --z-overlay: 1500; --z-drawer: 2000; --z-modal: 3000; --z-toast: 4000; } /* ═══════════════════════════════════════════════════════════════════════════════ 1.2 CSS RESET ═══════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } ul, ol, menu { list-style: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; tab-size: 4; height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-relaxed); color: var(--text); background-color: var(--bg); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } address { font-style: normal; } @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; } } /* ═══════════════════════════════════════════════════════════════════════════════ 1.3 BASE TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { color: var(--text-strong); font-weight: var(--weight-bold); line-height: var(--leading-tight); margin-bottom: var(--space-3); } h1 { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); letter-spacing: -0.02em; } h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); letter-spacing: -0.01em; } h3 { font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl)); } h4 { font-size: var(--text-md); } h5 { font-size: var(--text-base); } h6 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; } p { margin-bottom: var(--space-4); max-width: 80%; } p:last-child { margin-bottom: 0; } strong, b { font-weight: var(--weight-semibold); } small { font-size: var(--text-sm); } a:not([class]) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); } a:not([class]):hover { color: var(--action); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.4 LAYOUT PRIMITIVES ═══════════════════════════════════════════════════════════════════════════════ */ main { flex: 1; width: 100%; } .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--gutter); } .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; } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 2: HEADER ██ ██ Top Bar, Main Header, Desktop Nav, Mega Menu, Mobile Drawer ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 2.1 TOP BAR ═══════════════════════════════════════════════════════════════════════════════ */ .top-bar { background-color: var(--color-brand-blue-dark); color: rgba(255, 255, 255, 0.9); font-size: var(--text-sm); line-height: 1.4; padding: var(--space-2) 0; } .top-bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .top-bar-left { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .trust-badge { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-brand-gold); font-weight: var(--weight-medium); } .trust-badge .icon-check { width: 14px; height: 14px; flex-shrink: 0; } .service-area { color: rgba(255, 255, 255, 0.7); } .service-area strong { color: var(--color-brand-white); font-weight: var(--weight-semibold); } .top-bar-right { display: flex; align-items: center; gap: var(--space-6); } .quick-links { display: none; gap: var(--space-5); } .quick-links a { color: rgba(255, 255, 255, 0.8); transition: color var(--transition-fast); } .quick-links a:hover { color: var(--color-brand-gold); } .google-rating { display: flex; align-items: center; gap: 0.4rem; font-weight: var(--weight-semibold); color: var(--color-brand-gold); white-space: nowrap; } .google-rating .icon-star { width: 16px; height: 16px; } .rating-text strong { font-weight: var(--weight-bold); } @media (min-width: 768px) { .quick-links { display: flex; } } @media (max-width: 640px) { .top-bar-left { display: none; } .top-bar-inner { justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════════════ 2.2 MAIN HEADER SHELL ═══════════════════════════════════════════════════════════════════════════════ */ .site-header { background-color: var(--color-brand-blue); position: sticky; top: 0; z-index: var(--z-header); box-shadow: var(--shadow); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--gutter); gap: var(--space-6); } /* ═══════════════════════════════════════════════════════════════════════════════ 2.3 LOGO ═══════════════════════════════════════════════════════════════════════════════ */ .logo-link { display: block; flex-shrink: 0; transition: opacity var(--transition-fast); } .logo-link:hover { opacity: 0.9; } .logo-link:focus { outline: 2px solid var(--color-brand-gold); outline-offset: 3px; border-radius: var(--radius-sm); } .logo-img { display: block; height: 45px; width: auto; max-width: 180px; } @media (min-width: 768px) { .logo-img { height: 55px; max-width: 200px; } } /* ═══════════════════════════════════════════════════════════════════════════════ 2.4 DESKTOP NAVIGATION ═══════════════════════════════════════════════════════════════════════════════ */ .main-nav { display: none; } @media (min-width: 1024px) { .main-nav { display: block; } } .nav-list { display: flex; align-items: center; gap: var(--space-1); } .nav-item { position: relative; display: flex; align-items: center; } /* Nav item with both link and toggle - keep them together visually */ .nav-item.has-dropdown { display: flex; align-items: center; } .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: var(--space-3) var(--space-4); color: rgba(255, 255, 255, 0.9); font-size: var(--text-sm); font-weight: var(--weight-medium); background: transparent; border: none; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast); } /* When nav-link is inside has-dropdown, reduce right padding since toggle is separate */ .nav-item.has-dropdown .nav-link { padding-right: var(--space-2); } .nav-link:hover, .nav-link:focus { color: var(--color-brand-gold); } .nav-link:focus { outline: 2px solid var(--color-brand-gold); outline-offset: -2px; border-radius: var(--radius-sm); } .icon-chevron { width: 10px; height: 6px; transition: transform var(--transition-fast); } .nav-item:hover .icon-chevron, .nav-item:focus-within .icon-chevron { transform: rotate(180deg); } /* Separate Dropdown Toggle (for nav items that are links + have dropdowns) */ .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-2); margin-left: calc(var(--space-2) * -1); color: rgba(255, 255, 255, 0.7); background: transparent; border: none; cursor: pointer; transition: color var(--transition-fast); } .dropdown-toggle:hover, .dropdown-toggle:focus { color: var(--color-brand-gold); } .dropdown-toggle:focus { outline: 2px solid var(--color-brand-gold); outline-offset: -2px; border-radius: var(--radius-sm); } /* ═══════════════════════════════════════════════════════════════════════════════ 2.5 DROPDOWN / MEGA MENU ═══════════════════════════════════════════════════════════════════════════════ */ /* Hover bridge - invisible element that maintains hover state between nav and dropdown */ .nav-item.has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; background: transparent; } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(10px); min-width: 220px; background-color: var(--color-brand-white); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); border-top: 3px solid var(--color-brand-red); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast); z-index: var(--z-dropdown); } .nav-item:hover > .dropdown-menu, .nav-item:focus-within > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega-menu { min-width: 700px; left: 0; transform: translateY(10px); padding: var(--space-2); } .nav-item:hover > .mega-menu, .nav-item:focus-within > .mega-menu { transform: translateY(0); } .mega-menu-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding: var(--space-6); } .nav-item:first-child .mega-menu-inner { grid-template-columns: repeat(3, 1fr) 1.2fr; } .nav-item:nth-child(2) .mega-menu-inner { grid-template-columns: repeat(3, 1fr); } .mega-col { display: flex; flex-direction: column; gap: 0.35rem; } .mega-heading { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-neutral-500); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-neutral-200); } .mega-link { display: block; padding: var(--space-2) var(--space-3); margin: 0 calc(var(--space-3) * -1); border-radius: var(--radius); color: var(--color-neutral-800); font-size: var(--text-sm); line-height: 1.4; transition: background-color var(--transition-fast), color var(--transition-fast); } .mega-link:hover { background-color: var(--color-neutral-100); color: var(--color-brand-gold); } .mega-link strong { display: block; color: var(--color-neutral-900); font-weight: var(--weight-semibold); } .mega-link span { display: block; font-size: var(--text-xs); color: var(--color-neutral-500); margin-top: 2px; } .mega-link:hover strong { color: var(--color-brand-gold); } .mega-link-all { color: var(--color-brand-blue); font-weight: var(--weight-semibold); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-neutral-100); } .mega-link-all:hover { color: var(--color-brand-gold); background-color: transparent; } .mega-col-cta { background-color: var(--color-neutral-50); padding: var(--space-5); border-radius: var(--radius); margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; align-self: stretch; } .mega-cta-box { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; } .mega-cta-heading { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-neutral-900); margin: 0; } .mega-cta-text { font-size: var(--text-sm); color: var(--color-neutral-600); margin: 0; line-height: var(--leading-normal); flex-grow: 1; } .mega-cta-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-brand-red); margin-top: auto; transition: color var(--transition-fast); } .mega-cta-link:hover { color: var(--color-brand-red-dark); text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════════════ 2.6 HEADER CTA BUTTONS ═══════════════════════════════════════════════════════════════════════════════ */ .header-cta { display: none; align-items: center; gap: var(--space-3); } @media (min-width: 1024px) { .header-cta { display: flex; } } .phone-text { font-weight: var(--weight-semibold); } /* ═══════════════════════════════════════════════════════════════════════════════ 2.7 MOBILE MENU TOGGLE (Hamburger) ═══════════════════════════════════════════════════════════════════════════════ */ .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; padding: var(--space-2); color: var(--color-brand-white); } .mobile-menu-toggle:focus { outline: 2px solid var(--color-brand-gold); outline-offset: 2px; border-radius: var(--radius-sm); } @media (min-width: 1024px) { .mobile-menu-toggle { display: none; } } .hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; } .hamburger-line { display: block; width: 100%; height: 2px; background-color: currentColor; border-radius: 2px; transition: transform var(--transition-fast), opacity var(--transition-fast); } .mobile-menu-toggle.is-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mobile-menu-toggle.is-active .hamburger-line:nth-child(2) { opacity: 0; } .mobile-menu-toggle.is-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ═══════════════════════════════════════════════════════════════════════════════ 2.8 MOBILE DRAWER (Off-Canvas) ═══════════════════════════════════════════════════════════════════════════════ */ .mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 320px; background-color: var(--color-brand-white); z-index: var(--z-drawer); display: flex; flex-direction: column; box-shadow: var(--shadow-xl); transform: translateX(100%); visibility: hidden; transition: transform var(--transition), visibility var(--transition); } .mobile-drawer[aria-hidden="false"] { transform: translateX(0); visibility: visible; } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-neutral-200); flex-shrink: 0; } .drawer-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-brand-blue); } .drawer-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-neutral-500); border-radius: var(--radius); transition: background-color var(--transition-fast), color var(--transition-fast); } .drawer-close:hover { background-color: var(--color-neutral-100); color: var(--color-neutral-700); } .drawer-close svg { width: 24px; height: 24px; } .drawer-nav { flex: 1; overflow-y: auto; padding: var(--space-5); -webkit-overflow-scrolling: touch; } .drawer-section { margin-bottom: var(--space-6); } .drawer-section:last-child { margin-bottom: 0; } .drawer-section-title { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-neutral-500); margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-neutral-100); } .drawer-section a { display: block; padding: var(--space-3) 0; color: var(--color-neutral-800); font-weight: var(--weight-medium); border-bottom: 1px solid var(--color-neutral-100); transition: color var(--transition-fast), padding-left var(--transition-fast); } .drawer-section a:hover { color: var(--color-brand-red); padding-left: var(--space-2); } .drawer-section a:last-of-type { border-bottom: none; } .drawer-link-all { color: var(--color-brand-blue) !important; font-weight: var(--weight-semibold) !important; } .drawer-link-all:hover { color: var(--color-brand-red) !important; } .drawer-footer { padding: var(--space-5); background-color: var(--color-neutral-50); border-top: 1px solid var(--color-neutral-200); display: flex; flex-direction: column; gap: var(--space-3); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ 2.9 DRAWER OVERLAY ═══════════════════════════════════════════════════════════════════════════════ */ .drawer-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } body.menu-open .drawer-overlay { opacity: 1; visibility: visible; } /* ═══════════════════════════════════════════════════════════════════════════════ 2.10 HEADER RESPONSIVE ═══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 399px) { .logo-img { height: 40px; max-width: 150px; } .header-inner { padding: var(--space-2) var(--gutter); } } @media (min-width: 1024px) { .header-inner { gap: var(--space-8); } } @media (min-width: 1280px) { .mega-menu { min-width: 800px; } .mega-menu-inner { gap: var(--space-8); padding: var(--space-8); } } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 3: FOOTER ██ ██ Prefooter CTA, Main Footer Grid, Legal Bar ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 3.1 PREFOOTER CTA SECTION ═══════════════════════════════════════════════════════════════════════════════ */ .prefooter-cta { background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); color: var(--color-brand-white); padding: var(--space-12) 0; } .prefooter-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); max-width: 700px; margin: 0 auto; } .prefooter-content { display: flex; flex-direction: column; gap: var(--space-3); } .prefooter-title { font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); color: var(--color-brand-white); margin: 0; } .prefooter-text { font-size: var(--text-md); color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 55ch; } .prefooter-text strong { color: var(--color-brand-white); font-weight: var(--weight-semibold); } .prefooter-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } @media (min-width: 768px) { .prefooter-inner { flex-direction: row; text-align: left; justify-content: space-between; max-width: none; } .prefooter-content { flex: 1; } .prefooter-actions { flex-shrink: 0; } } /* ═══════════════════════════════════════════════════════════════════════════════ 3.2 MAIN FOOTER ═══════════════════════════════════════════════════════════════════════════════ */ .site-footer { background-color: var(--color-brand-blue); color: rgba(255, 255, 255, 0.85); position: relative; } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient( 90deg, var(--color-brand-red) 0%, var(--color-brand-red) 35%, var(--color-brand-white) 35%, var(--color-brand-white) 45%, var(--color-brand-blue-dark) 45%, var(--color-brand-blue-dark) 100% ); } .schema-data { display: none; } .footer-inner { padding: var(--space-12) var(--gutter) var(--space-8); } /* ═══════════════════════════════════════════════════════════════════════════════ 3.3 FOOTER GRID ═══════════════════════════════════════════════════════════════════════════════ */ .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1.2fr 1.4fr 1.4fr; gap: var(--space-10); } } /* ═══════════════════════════════════════════════════════════════════════════════ 3.4 FOOTER BRAND COLUMN ═══════════════════════════════════════════════════════════════════════════════ */ .footer-col-brand { display: flex; flex-direction: column; gap: var(--space-4); } .footer-logo { display: inline-block; width: fit-content; transition: opacity var(--transition-fast); } .footer-logo:hover { opacity: 0.85; } .footer-logo img { display: block; height: 45px; width: auto; } .footer-tagline { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); max-width: 35ch; margin: 0; line-height: var(--leading-relaxed); } /* ═══════════════════════════════════════════════════════════════════════════════ 3.5 FOOTER CONTACT ═══════════════════════════════════════════════════════════════════════════════ */ .footer-contact { display: flex; flex-direction: column; gap: var(--space-3); } .contact-item { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-brand-white); font-size: var(--text-sm); transition: color var(--transition-fast); } .contact-item:hover { color: var(--color-brand-gold); } .contact-item span { line-height: var(--leading-snug); } .icon-contact { width: 36px; height: 36px; padding: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-brand-red); flex-shrink: 0; transition: background-color var(--transition-fast), color var(--transition-fast); } .contact-item:hover .icon-contact { background: rgba(255, 255, 255, 0.15); color: var(--color-brand-gold); } /* ═══════════════════════════════════════════════════════════════════════════════ 3.6 FOOTER BADGES ═══════════════════════════════════════════════════════════════════════════════ */ .footer-badges { margin-top: var(--space-4); padding: var(--space-4); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); } .badge-row { display: flex; flex-wrap: wrap; gap: var(--space-4); } .badge-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-brand-white); } .badge-item svg { color: var(--color-brand-gold); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ 3.7 FOOTER COLUMNS & MENUS ═══════════════════════════════════════════════════════════════════════════════ */ .footer-col { display: flex; flex-direction: column; } .footer-heading { color: var(--color-brand-gold); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-heading-spaced { margin-top: var(--space-6); } .footer-menu { display: flex; flex-direction: column; gap: var(--space-1); } .footer-menu a { display: block; color: rgba(255, 255, 255, 0.8); font-size: var(--text-sm); padding: var(--space-1) 0; transition: color var(--transition-fast), padding-left var(--transition-fast); } .footer-menu a:hover { color: var(--color-brand-gold); padding-left: var(--space-2); } .footer-link-all { color: var(--color-brand-white) !important; font-weight: var(--weight-semibold); margin-top: var(--space-2); padding-top: var(--space-2) !important; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-menu-locations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-4); } /* ═══════════════════════════════════════════════════════════════════════════════ 3.8 FOOTER BOTTOM (Legal) ═══════════════════════════════════════════════════════════════════════════════ */ .footer-bottom { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: var(--space-4); } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } .footer-legal { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.6); } @media (min-width: 640px) { .footer-legal { flex-direction: row; align-items: center; gap: var(--space-6); } } .copyright { margin: 0; } .copyright span { color: var(--color-brand-white); } .legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .legal-nav a { color: rgba(255, 255, 255, 0.6); transition: color var(--transition-fast); } .legal-nav a:hover { color: var(--color-brand-white); text-decoration: underline; } .sep { opacity: 0.4; font-size: var(--text-xs); } .footer-credit { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--weight-bold); color: rgba(255, 255, 255, 0.2); user-select: none; transition: color var(--transition-slow); } .footer-credit:hover { color: var(--color-brand-red); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 4: SHARED COMPONENTS ██ ██ Buttons, Cards, Forms ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 4.1 BUTTONS ═══════════════════════════════════════════════════════════════════════════════ */ .btn, .btn-primary, .btn-secondary, .btn-phone { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.2; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-phone:focus { outline: 2px solid var(--color-brand-gold); outline-offset: 2px; } /* Primary Button (Red) */ .btn-primary { background-color: var(--color-brand-red); color: var(--color-brand-white); border-color: var(--color-brand-red); } .btn-primary:hover { background-color: var(--color-brand-red-dark); border-color: var(--color-brand-red-dark); transform: translateY(-2px); box-shadow: var(--shadow); } .btn-primary:active { transform: translateY(0); } /* Secondary Button */ .btn-secondary { background-color: var(--color-brand-white); color: var(--color-brand-blue); border-color: var(--color-brand-blue); } .btn-secondary:hover { background-color: var(--color-brand-blue); color: var(--color-brand-white); } /* Phone Button (in header - transparent) */ .btn-phone { background-color: transparent; color: var(--color-brand-white); border-color: rgba(255, 255, 255, 0.3); } .btn-phone:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } .btn-phone svg { width: 18px; height: 18px; flex-shrink: 0; } /* Button in Drawer (light bg) */ .drawer-footer .btn-phone { background-color: var(--color-brand-blue); color: var(--color-brand-white); border-color: var(--color-brand-blue); } .drawer-footer .btn-phone:hover { background-color: var(--color-brand-blue-dark); border-color: var(--color-brand-blue-dark); } /* Button in Prefooter/Footer (dark bg) */ .prefooter-cta .btn-phone, .site-footer .btn-phone { background-color: var(--color-brand-white); color: var(--color-brand-blue); border-color: var(--color-brand-white); } .prefooter-cta .btn-phone:hover, .site-footer .btn-phone:hover { background-color: var(--color-brand-gold); border-color: var(--color-brand-gold); color: var(--color-brand-blue-dark); } /* Size Variants */ .btn-large { padding: var(--space-4) var(--space-6); font-size: var(--text-base); } .btn-small { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } .btn-block { width: 100%; } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 5: UTILITIES ██ ██ Helper classes ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 5.1 TEXT ═══════════════════════════════════════════════════════════════════════════════ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); } .text-strong { color: var(--text-strong); } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-lg { font-size: var(--text-lg); } /* ═══════════════════════════════════════════════════════════════════════════════ 5.2 SPACING ═══════════════════════════════════════════════════════════════════════════════ */ .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* ═══════════════════════════════════════════════════════════════════════════════ 5.3 DISPLAY ═══════════════════════════════════════════════════════════════════════════════ */ .hidden { display: none; } .block { display: block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } /* ═══════════════════════════════════════════════════════════════════════════════ 5.4 FLEXBOX ═══════════════════════════════════════════════════════════════════════════════ */ .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 6: PRINT ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ @media print { .top-bar, .site-header, .prefooter-cta, .mobile-drawer, .drawer-overlay, .btn, .btn-primary, .btn-phone { display: none !important; } .site-footer { background: none !important; color: #000 !important; border-top: 2px solid #000; } .site-footer::before { display: none; } .footer-heading { color: #000; } .footer-menu a { color: #000; } body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ END OF STYLESHEET ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ╔══════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ MISSION AUTO GLASS — PAGE STYLES ║ ║ Version 3.0 ║ ║ ║ ║ CONTENTS: ║ ║ SECTION 1: SHARED PAGE PATTERNS ....... Heroes, CTAs, Content Blocks ║ ║ SECTION 2: HOMEPAGE ................... Hero, Features, Trust, Reviews ║ ║ SECTION 3: SERVICE PAGES .............. Index + Individual Services ║ ║ SECTION 4: LOCATION PAGES ............. Index + Individual Locations ║ ║ SECTION 5: VEHICLE PAGES .............. Index + Individual Makes ║ ║ SECTION 6: INSURANCE PAGES ............ Claims, Law, Comparison ║ ║ SECTION 7: RESOURCES PAGES ............ Guides, Articles ║ ║ SECTION 8: CONTACT PAGE ............... Form, Map, Info ║ ║ SECTION 9: FAQ PAGE ................... Accordions ║ ║ SECTION 10: ABOUT PAGE ................ Story, Team, Values ║ ║ SECTION 11: ERROR PAGES ............... 404, Maintenance ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝ */ /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 1: SHARED PAGE PATTERNS ██ ██ Reusable components used across multiple page types ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 1.1 PAGE SECTIONS (Vertical Rhythm) ═══════════════════════════════════════════════════════════════════════════════ */ .section { padding: var(--space-16) 0; } .section-sm { padding: var(--space-10) 0; } .section-lg { padding: var(--space-20) 0; } .section-hero { padding: var(--space-12) 0 var(--space-16); } /* Alternating Backgrounds */ .section-alt { background-color: var(--bg-surface); } .section-dark { background-color: var(--color-brand-blue); color: var(--color-brand-white); } .section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-brand-white); } .section-gradient { background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); color: var(--color-brand-white); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.2 SECTION HEADERS ═══════════════════════════════════════════════════════════════════════════════ */ .section-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-10); } .section-header-left { text-align: left; max-width: none; margin-bottom: var(--space-8); } .section-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-brand-red); margin-bottom: var(--space-3); } .section-dark .section-label, .section-gradient .section-label { color: var(--color-brand-gold); } .section-title { font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); color: var(--text-strong); margin-bottom: var(--space-4); } .section-dark .section-title, .section-gradient .section-title { color: var(--color-brand-white); } .section-subtitle { font-size: var(--text-md); color: var(--text); max-width: 55ch; margin: 0 auto; } .section-dark .section-subtitle, .section-gradient .section-subtitle { color: rgba(255, 255, 255, 0.85); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.3 PAGE HEROES (Interior Pages) ═══════════════════════════════════════════════════════════════════════════════ */ .page-hero { background-color: var(--color-brand-blue); color: var(--color-brand-white); padding: var(--space-12) 0; position: relative; overflow: hidden; } /* Optional gradient overlay for image backgrounds */ .page-hero-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .page-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(24, 48, 117, 0.95) 0%, rgba(15, 30, 74, 0.9) 100% ); z-index: 1; } .page-hero-bg .container { position: relative; z-index: 2; } .page-hero-inner { max-width: 800px; } .page-hero-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-brand-gold); margin-bottom: var(--space-3); } .page-hero-title { font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); color: var(--color-brand-white); margin-bottom: var(--space-4); line-height: var(--leading-tight); } .page-hero-text { font-size: var(--text-md); color: rgba(255, 255, 255, 0.9); max-width: 60ch; margin-bottom: var(--space-6); } .page-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.4 BREADCRUMBS ═══════════════════════════════════════════════════════════════════════════════ */ .breadcrumbs { padding: var(--space-4) 0; background-color: var(--bg-surface); border-bottom: 1px solid var(--border); } .breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); } .breadcrumb-item { display: flex; align-items: center; gap: var(--space-2); } .breadcrumb-item a { color: var(--text); transition: color var(--transition-fast); } .breadcrumb-item a:hover { color: var(--primary); } .breadcrumb-item[aria-current="page"] { color: var(--text-strong); font-weight: var(--weight-medium); } .breadcrumb-sep { color: var(--text-muted); opacity: 0.5; } /* ═══════════════════════════════════════════════════════════════════════════════ 1.5 CONTENT BLOCKS (Prose) ═══════════════════════════════════════════════════════════════════════════════ */ .content-block { max-width: var(--container-narrow); margin: 0 auto; } .content-block h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); } .content-block h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); } .content-block p { margin-bottom: var(--space-4); line-height: var(--leading-relaxed); } .content-block ul, .content-block ol { margin-bottom: var(--space-4); padding-left: var(--space-6); } .content-block ul { list-style-type: disc; } .content-block ol { list-style-type: decimal; } .content-block li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); } .content-block li::marker { color: var(--color-brand-red); } .content-block blockquote { margin: var(--space-8) 0; padding: var(--space-5) var(--space-6); border-left: 4px solid var(--color-brand-red); background-color: var(--bg-surface); font-style: italic; color: var(--text-strong); } .content-block img { border-radius: var(--radius-md); margin: var(--space-6) 0; } /* ═══════════════════════════════════════════════════════════════════════════════ 1.6 TWO-COLUMN LAYOUTS ═══════════════════════════════════════════════════════════════════════════════ */ .two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; } @media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } .two-col-reverse { direction: rtl; } .two-col-reverse > * { direction: ltr; } } .two-col-content { display: flex; flex-direction: column; gap: var(--space-4); } .two-col-media { position: relative; } .two-col-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; height: auto; } /* Decorative accent for images */ .two-col-media-accent { position: relative; } .two-col-media-accent::before { content: ""; position: absolute; top: var(--space-4); left: var(--space-4); right: calc(var(--space-4) * -1); bottom: calc(var(--space-4) * -1); background-color: var(--color-brand-red); border-radius: var(--radius-lg); z-index: -1; opacity: 0.15; } /* ═══════════════════════════════════════════════════════════════════════════════ 1.7 CARD GRIDS ═══════════════════════════════════════════════════════════════════════════════ */ .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-4 { grid-template-columns: repeat(4, 1fr); } } /* Base Card */ .card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-link { display: block; height: 100%; } .card-media { aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--bg-surface); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .card:hover .card-media img { transform: scale(1.05); } .card-body { padding: var(--space-5); } .card-label { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brand-red); margin-bottom: var(--space-2); } .card-title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: var(--space-2); transition: color var(--transition-fast); } .card:hover .card-title { color: var(--color-brand-blue); } .card-text { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); } .card-footer { padding: var(--space-4) var(--space-5); background-color: var(--bg-surface); border-top: 1px solid var(--border); } /* Card Variants */ .card-horizontal { display: grid; grid-template-columns: 1fr; } @media (min-width: 640px) { .card-horizontal { grid-template-columns: 200px 1fr; } .card-horizontal .card-media { aspect-ratio: auto; height: 100%; } } .card-featured { border: 2px solid var(--color-brand-blue); } .card-featured .card-label { color: var(--color-brand-blue); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.8 ICON CARDS (Feature Boxes) ═══════════════════════════════════════════════════════════════════════════════ */ .icon-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); border: 1px solid var(--border); text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-brand-blue); } .icon-card-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto var(--space-4); background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); border-radius: var(--radius-lg); color: var(--color-brand-white); } .icon-card-icon svg { width: 28px; height: 28px; } .icon-card-title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: var(--space-2); } .icon-card-text { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-relaxed); } /* Left-aligned variant */ .icon-card-left { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; } .icon-card-left .icon-card-icon { margin: 0; width: 48px; height: 48px; } .icon-card-left .icon-card-icon svg { width: 22px; height: 22px; } /* ═══════════════════════════════════════════════════════════════════════════════ 1.9 STAT CARDS / NUMBERS ═══════════════════════════════════════════════════════════════════════════════ */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat-card { text-align: center; padding: var(--space-6); } .stat-value { font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl)); font-weight: var(--weight-black); color: var(--color-brand-red); line-height: 1; margin-bottom: var(--space-2); } .section-dark .stat-value, .section-gradient .stat-value { color: var(--color-brand-gold); } .stat-label { font-size: var(--text-sm); color: var(--text); font-weight: var(--weight-medium); } .section-dark .stat-label, .section-gradient .stat-label { color: rgba(255, 255, 255, 0.85); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.10 CTA BLOCKS (Inline Call-to-Action) ═══════════════════════════════════════════════════════════════════════════════ */ .cta-block { background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); text-align: center; color: var(--color-brand-white); } .cta-block-title { font-size: var(--text-xl); color: var(--color-brand-white); margin-bottom: var(--space-3); } .cta-block-text { font-size: var(--text-md); color: rgba(255, 255, 255, 0.9); max-width: 50ch; margin: 0 auto var(--space-6); } .cta-block-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } /* Light variant */ .cta-block-light { background: var(--bg-surface); border: 2px solid var(--border); } .cta-block-light .cta-block-title { color: var(--text-strong); } .cta-block-light .cta-block-text { color: var(--text); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.11 TESTIMONIAL / REVIEW CARDS ═══════════════════════════════════════════════════════════════════════════════ */ .testimonial-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .testimonial-stars { display: flex; gap: 2px; margin-bottom: var(--space-4); color: var(--color-brand-gold); } .testimonial-stars svg { width: 18px; height: 18px; fill: currentColor; } .testimonial-text { font-size: var(--text-base); color: var(--text-strong); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); font-style: italic; } .testimonial-text::before { content: ""; font-size: var(--text-2xl); color: var(--color-brand-red); line-height: 0; vertical-align: -0.3em; margin-right: 2px; } .testimonial-author { display: flex; align-items: center; gap: var(--space-3); } .testimonial-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; background-color: var(--bg-surface); } .testimonial-name { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); } .testimonial-meta { font-size: var(--text-xs); color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.12 LISTS (Check Lists, Feature Lists) ═══════════════════════════════════════════════════════════════════════════════ */ .check-list { display: flex; flex-direction: column; gap: var(--space-3); } .check-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--text); } .check-list li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; background-color: var(--color-success); border-radius: var(--radius-full); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; margin-top: 2px; } /* Cross list (things we DON'T do) */ .cross-list li::before { background-color: var(--color-danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); } /* Numbered steps */ .steps-list { counter-reset: step-counter; display: flex; flex-direction: column; gap: var(--space-6); } .steps-list li { display: flex; align-items: flex-start; gap: var(--space-4); counter-increment: step-counter; } .steps-list li::before { content: counter(step-counter); flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); color: var(--color-brand-white); font-weight: var(--weight-bold); font-size: var(--text-sm); border-radius: var(--radius-full); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.13 TABLES ═══════════════════════════════════════════════════════════════════════════════ */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-6) 0; } .data-table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: var(--text-sm); } .data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); } .data-table th { background-color: var(--color-brand-blue); color: var(--color-brand-white); font-weight: var(--weight-semibold); white-space: nowrap; } .data-table th:first-child { border-radius: var(--radius) 0 0 0; } .data-table th:last-child { border-radius: 0 var(--radius) 0 0; } .data-table tbody tr:hover { background-color: var(--bg-surface); } .data-table tbody tr:nth-child(even) { background-color: var(--color-neutral-50); } .data-table tbody tr:nth-child(even):hover { background-color: var(--color-neutral-100); } /* ═══════════════════════════════════════════════════════════════════════════════ 1.14 BADGES / PILLS ═══════════════════════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); border-radius: var(--radius-full); background-color: var(--bg-surface); color: var(--text); } .badge-primary { background-color: var(--color-brand-blue); color: var(--color-brand-white); } .badge-success { background-color: var(--color-success); color: var(--color-brand-white); } .badge-warning { background-color: var(--color-warning); color: var(--color-neutral-900); } .badge-danger { background-color: var(--color-danger); color: var(--color-brand-white); } .badge-outline { background-color: transparent; border: 1px solid currentColor; } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 2: HOMEPAGE ██ ██ Hero, Service Cards, Trust Section, Reviews, Process ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 2.1 HOMEPAGE HERO ═══════════════════════════════════════════════════════════════════════════════ */ .home-hero { background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); color: var(--color-brand-white); padding: var(--space-16) 0 var(--space-20); position: relative; overflow: hidden; } /* Optional: Background image with overlay */ .home-hero-bg { background-size: cover; background-position: center; } .home-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(24, 48, 117, 0.92) 0%, rgba(15, 30, 74, 0.88) 100% ); } .home-hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; position: relative; z-index: 1; } @media (min-width: 1024px) { .home-hero-inner { grid-template-columns: 1fr 1fr; } } .home-hero-content { max-width: 580px; } .home-hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255, 255, 255, 0.1); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-5); backdrop-filter: blur(4px); } .home-hero-badge svg { color: var(--color-brand-gold); } .home-hero-title { font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl)); color: var(--color-brand-white); line-height: var(--leading-tight); margin-bottom: var(--space-5); } .home-hero-title .highlight { color: var(--color-brand-gold); } .home-hero-text { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-6); max-width: 50ch; } .home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); } .home-hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.15); } .home-hero-trust-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); } .home-hero-trust-item svg { color: var(--color-brand-gold); flex-shrink: 0; } /* Hero Media (right side) */ .home-hero-media { display: none; } @media (min-width: 1024px) { .home-hero-media { display: block; position: relative; } } .home-hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } /* Floating badge on hero image */ .home-hero-float { position: absolute; bottom: -20px; left: -20px; background-color: var(--color-brand-white); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--space-3); } .home-hero-float-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--color-brand-red) 0%, var(--color-brand-red-dark) 100%); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-brand-white); } .home-hero-float-text { font-size: var(--text-sm); color: var(--text); } .home-hero-float-text strong { display: block; font-size: var(--text-lg); color: var(--text-strong); } /* ═══════════════════════════════════════════════════════════════════════════════ 2.2 HOMEPAGE SERVICE CARDS (Quick Links) ═══════════════════════════════════════════════════════════════════════════════ */ .home-services { margin-top: calc(var(--space-16) * -1); position: relative; z-index: 10; padding-bottom: var(--space-16); } .home-services-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .home-services-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .home-services-grid { grid-template-columns: repeat(4, 1fr); } } .home-service-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-md); border: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-4); transition: transform var(--transition), box-shadow var(--transition); } .home-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .home-service-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-brand-white); flex-shrink: 0; } .home-service-icon svg { width: 26px; height: 26px; } .home-service-content { flex: 1; min-width: 0; } .home-service-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: 2px; } .home-service-meta { font-size: var(--text-sm); color: var(--text-muted); } .home-service-arrow { color: var(--color-brand-red); transition: transform var(--transition-fast); } .home-service-card:hover .home-service-arrow { transform: translateX(4px); } /* ═══════════════════════════════════════════════════════════════════════════════ 2.3 HOMEPAGE PROCESS SECTION ═══════════════════════════════════════════════════════════════════════════════ */ .process-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); counter-reset: process-step; } @media (min-width: 768px) { .process-steps { grid-template-columns: repeat(3, 1fr); } } .process-step { text-align: center; padding: var(--space-6); position: relative; counter-increment: process-step; } .process-step-number { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto var(--space-4); background: linear-gradient(135deg, var(--color-brand-red) 0%, var(--color-brand-red-dark) 100%); color: var(--color-brand-white); font-size: var(--text-xl); font-weight: var(--weight-black); border-radius: var(--radius-full); position: relative; } /* Connecting line between steps - DISABLED for card grid layout */ /* Previously used for horizontal timeline, not needed with grid cards */ .process-step-title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: var(--space-2); } .process-step-text { font-size: var(--text-sm); color: var(--text); max-width: 30ch; margin: 0 auto; } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 3: SERVICE PAGES ██ ██ Services Index + Individual Service Pages ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 3.1 SERVICES INDEX PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .services-index-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .services-index-grid { grid-template-columns: repeat(2, 1fr); } } .service-card-large { background-color: var(--color-brand-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .service-card-large:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .service-card-large-media { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--bg-surface); } .service-card-large-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .service-card-large:hover .service-card-large-media img { transform: scale(1.05); } .service-card-large-body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; } .service-card-large-title { font-size: var(--text-xl); color: var(--text-strong); margin-bottom: var(--space-3); } .service-card-large-text { font-size: var(--text-base); color: var(--text); margin-bottom: var(--space-4); flex: 1; } .service-card-large-features { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .service-card-large-features .badge { background-color: var(--bg-surface); } /* ═══════════════════════════════════════════════════════════════════════════════ 3.2 INDIVIDUAL SERVICE PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .service-page-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); } @media (min-width: 1024px) { .service-page-grid { grid-template-columns: 2fr 1fr; } } /* Service Main Content */ .service-main { /* Main content column */ } /* Service Sidebar */ .service-sidebar { display: flex; flex-direction: column; gap: var(--space-6); } @media (min-width: 1024px) { .service-sidebar { position: sticky; top: calc(var(--space-6) + 80px); /* Account for sticky header */ align-self: start; } } /* Quick Quote Box */ .service-quote-box { background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); border-radius: var(--radius-lg); padding: var(--space-6); color: var(--color-brand-white); } .service-quote-box-title { font-size: var(--text-lg); color: var(--color-brand-white); margin-bottom: var(--space-4); } .service-quote-box .btn-primary { width: 100%; margin-bottom: var(--space-3); } .service-quote-box-phone { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: rgba(255, 255, 255, 0.9); font-size: var(--text-sm); } /* Service Info Card */ .service-info-card { background-color: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-5); border: 1px solid var(--border); } .service-info-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .service-info-list { display: flex; flex-direction: column; gap: var(--space-3); } .service-info-item { display: flex; justify-content: space-between; font-size: var(--text-sm); } .service-info-label { color: var(--text); } .service-info-value { font-weight: var(--weight-semibold); color: var(--text-strong); } /* Related Services */ .related-services-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-5); border: 1px solid var(--border); } .related-services-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: var(--space-4); } .related-service-link { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--text-sm); transition: color var(--transition-fast); } .related-service-link:last-child { border-bottom: none; } .related-service-link:hover { color: var(--color-brand-blue); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 4: LOCATION PAGES ██ ██ Locations Index + Individual Location Pages ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 4.1 LOCATIONS INDEX PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .locations-map-section { background-color: var(--bg-surface); padding: var(--space-10) 0; } .locations-map { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-neutral-200); box-shadow: var(--shadow); } .locations-map iframe { width: 100%; height: 100%; border: none; } .locations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 640px) { .locations-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .locations-grid { grid-template-columns: repeat(4, 1fr); } } .location-card { background-color: var(--color-brand-white); border-radius: var(--radius); padding: var(--space-4); border: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-3); transition: border-color var(--transition-fast), box-shadow var(--transition); } .location-card:hover { border-color: var(--color-brand-blue); box-shadow: var(--shadow); } .location-card-icon { width: 40px; height: 40px; background-color: var(--bg-surface); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-brand-red); flex-shrink: 0; } .location-card-name { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); } /* ═══════════════════════════════════════════════════════════════════════════════ 4.2 INDIVIDUAL LOCATION PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .location-hero-split { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 1024px) { .location-hero-split { grid-template-columns: 1fr 1fr; } } .location-hero-map { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-neutral-200); } .location-hero-map iframe { width: 100%; height: 100%; border: none; } /* Nearby Locations */ .nearby-locations { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 768px) { .nearby-locations { grid-template-columns: repeat(4, 1fr); } } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 5: VEHICLE PAGES ██ ██ Vehicles Index + Individual Make Pages ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 5.1 VEHICLES INDEX PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .vehicles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 640px) { .vehicles-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .vehicles-grid { grid-template-columns: repeat(4, 1fr); } } .vehicle-make-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition-fast); } .vehicle-make-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-brand-blue); } .vehicle-make-logo { width: 80px; height: 80px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; } .vehicle-make-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .vehicle-make-name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: var(--space-1); } .vehicle-make-meta { font-size: var(--text-xs); color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════════════════════ 5.2 INDIVIDUAL VEHICLE PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .vehicle-page-header { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-6); } .vehicle-logo-large { width: 100px; height: 100px; background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; } .vehicle-logo-large img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Popular Models Grid */ .models-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } @media (min-width: 768px) { .models-grid { grid-template-columns: repeat(4, 1fr); } } .model-chip { background-color: var(--bg-surface); padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text); text-align: center; border: 1px solid var(--border); transition: background-color var(--transition-fast), border-color var(--transition-fast); } .model-chip:hover { background-color: var(--color-brand-white); border-color: var(--color-brand-blue); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 6: INSURANCE PAGES ██ ██ Insurance Index, SC Law, Comparison, Why Choose Us ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 6.1 INSURANCE INDEX / OVERVIEW ═══════════════════════════════════════════════════════════════════════════════ */ .insurance-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .insurance-cards { grid-template-columns: repeat(2, 1fr); } } .insurance-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-6); border: 2px solid var(--border); transition: border-color var(--transition-fast); } .insurance-card:hover { border-color: var(--color-brand-blue); } .insurance-card-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-brand-white); margin-bottom: var(--space-4); } .insurance-card-title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: var(--space-3); } .insurance-card-text { font-size: var(--text-base); color: var(--text); margin-bottom: var(--space-4); } /* ═══════════════════════════════════════════════════════════════════════════════ 6.2 SC ZERO-DEDUCTIBLE LAW PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .law-highlight-box { background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%); border-radius: var(--radius-lg); padding: var(--space-8); color: var(--color-brand-white); text-align: center; margin-bottom: var(--space-10); } .law-highlight-title { font-size: var(--text-xl); color: var(--color-brand-white); margin-bottom: var(--space-3); } .law-highlight-amount { font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl)); font-weight: var(--weight-black); margin-bottom: var(--space-3); } .law-highlight-text { font-size: var(--text-md); opacity: 0.9; } /* ═══════════════════════════════════════════════════════════════════════════════ 6.3 COMPARISON PAGE (vs Safelite) ═══════════════════════════════════════════════════════════════════════════════ */ .comparison-table-wrapper { background-color: var(--color-brand-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .comparison-table { width: 100%; border-collapse: collapse; } .comparison-table th, .comparison-table td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--border); } .comparison-table th { background-color: var(--color-brand-blue); color: var(--color-brand-white); font-weight: var(--weight-semibold); } .comparison-table th:first-child { text-align: left; } .comparison-table th:not(:first-child) { text-align: center; } .comparison-table td:not(:first-child) { text-align: center; } .comparison-table .feature-name { font-weight: var(--weight-medium); color: var(--text-strong); } .comparison-check { color: var(--color-success); } .comparison-x { color: var(--color-danger); } .comparison-us { background-color: rgba(16, 185, 129, 0.08); } .comparison-us td { font-weight: var(--weight-semibold); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 7: RESOURCES PAGES ██ ██ Resource Hub, Guides, Articles ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 7.1 RESOURCES INDEX ═══════════════════════════════════════════════════════════════════════════════ */ .resources-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .resources-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .resources-grid { grid-template-columns: repeat(3, 1fr); } } .resource-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition); } .resource-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .resource-card-media { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--bg-surface); } .resource-card-media img { width: 100%; height: 100%; object-fit: cover; } .resource-card-body { padding: var(--space-5); } .resource-card-category { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brand-red); margin-bottom: var(--space-2); } .resource-card-title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: var(--space-2); line-height: var(--leading-snug); } .resource-card-excerpt { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-relaxed); } /* ═══════════════════════════════════════════════════════════════════════════════ 7.2 ARTICLE / GUIDE PAGE ═══════════════════════════════════════════════════════════════════════════════ */ .article-header { margin-bottom: var(--space-8); } .article-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); } .article-featured-image { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-8); } .article-featured-image img { width: 100%; height: auto; } /* Table of Contents */ .article-toc { background-color: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-8); border-left: 4px solid var(--color-brand-blue); } .article-toc-title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: var(--space-3); } .article-toc-list { display: flex; flex-direction: column; gap: var(--space-2); } .article-toc-list a { font-size: var(--text-sm); color: var(--text); transition: color var(--transition-fast); } .article-toc-list a:hover { color: var(--color-brand-blue); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 8: CONTACT PAGE ██ ██ Contact Form, Map, Info Cards ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 8.1 CONTACT LAYOUT ═══════════════════════════════════════════════════════════════════════════════ */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); } @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════════ 8.2 CONTACT FORM ═══════════════════════════════════════════════════════════════════════════════ */ .contact-form-wrapper { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow); border: 1px solid var(--border); } .form-group { margin-bottom: var(--space-5); } .form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: var(--space-2); } .form-label .required { color: var(--color-danger); margin-left: 2px; } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--space-4); font-size: var(--text-base); color: var(--text-strong); background-color: var(--color-brand-white); border: 2px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--color-neutral-400); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-brand-blue); box-shadow: 0 0 0 4px rgba(24, 48, 117, 0.12); background-color: var(--color-brand-white); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-textarea { min-height: 160px; resize: vertical; line-height: var(--leading-relaxed); } /* Select dropdown styling */ .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10); cursor: pointer; } .form-select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23183075' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } /* Checkbox and Radio */ .form-check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; } .form-check-input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-brand-blue); cursor: pointer; } .form-check-label { font-size: var(--text-base); color: var(--text); line-height: var(--leading-snug); cursor: pointer; } /* Form row for side-by-side fields */ .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, 1fr); } } .form-row-3 { grid-template-columns: 1fr; } @media (min-width: 768px) { .form-row-3 { grid-template-columns: repeat(3, 1fr); } } /* Error and hint messages */ .form-error { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-danger); margin-top: var(--space-2); } .form-error::before { content: ""; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); background-size: contain; flex-shrink: 0; } .form-hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); } /* Input with error state */ .form-input.is-error, .form-select.is-error, .form-textarea.is-error { border-color: var(--color-danger); background-color: rgba(239, 68, 68, 0.02); } .form-input.is-error:focus, .form-select.is-error:focus, .form-textarea.is-error:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); } /* Input with success state */ .form-input.is-success, .form-select.is-success, .form-textarea.is-success { border-color: var(--color-success); } /* Input group (for icons or addons) */ .input-group { position: relative; display: flex; } .input-group .form-input { flex: 1; } .input-group-icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .input-group-icon + .form-input { padding-left: calc(var(--space-4) + 24px); } /* Form actions (submit button area) */ .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border); } .form-actions .btn-primary { min-width: 180px; } /* Form success message */ .form-success { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); background-color: rgba(16, 185, 129, 0.08); border: 1px solid var(--color-success); border-radius: var(--radius-md); color: var(--text-strong); } .form-success-icon { width: 24px; height: 24px; color: var(--color-success); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ 8.3 CONTACT INFO SECTION ═══════════════════════════════════════════════════════════════════════════════ */ .contact-info-cards { display: flex; flex-direction: column; gap: var(--space-5); } .contact-info-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--border); transition: border-color var(--transition-fast); } .contact-info-card:hover { border-color: var(--color-brand-blue); } .contact-info-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-brand-white); flex-shrink: 0; } .contact-info-content { flex: 1; } .contact-info-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: var(--space-1); } .contact-info-text { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-relaxed); } .contact-info-text a { color: var(--color-brand-blue); font-weight: var(--weight-medium); } .contact-info-text a:hover { text-decoration: underline; } /* Contact Map */ .contact-map { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--bg-surface); margin-top: var(--space-5); } .contact-map iframe { width: 100%; height: 100%; border: none; } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 9: FAQ PAGE ██ ██ Accordion, Categories, Search ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 9.1 FAQ CATEGORIES ═══════════════════════════════════════════════════════════════════════════════ */ .faq-categories { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); } .faq-category-btn { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-full); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .faq-category-btn:hover { border-color: var(--color-brand-blue); color: var(--color-brand-blue); } .faq-category-btn.is-active { background-color: var(--color-brand-blue); border-color: var(--color-brand-blue); color: var(--color-brand-white); } /* ═══════════════════════════════════════════════════════════════════════════════ 9.2 FAQ ACCORDION ═══════════════════════════════════════════════════════════════════════════════ */ .faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--container-narrow); } .faq-item { background-color: var(--color-brand-white); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; transition: border-color var(--transition-fast); } .faq-item:hover { border-color: var(--color-brand-blue); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); text-align: left; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); background: none; border: none; cursor: pointer; gap: var(--space-4); } .faq-question:focus { outline: none; background-color: var(--bg-surface); } .faq-icon { width: 24px; height: 24px; color: var(--color-brand-red); flex-shrink: 0; transition: transform var(--transition); } .faq-item.is-open .faq-icon { transform: rotate(45deg); } .faq-answer { display: none; padding: 0 var(--space-5) var(--space-5); font-size: var(--text-base); color: var(--text); line-height: var(--leading-relaxed); } .faq-item.is-open .faq-answer { display: block; } .faq-answer p { margin-bottom: var(--space-3); } .faq-answer p:last-child { margin-bottom: 0; } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 10: ABOUT PAGE ██ ██ Story, Team, Values, Timeline ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 10.1 ABOUT STORY SECTION ═══════════════════════════════════════════════════════════════════════════════ */ .about-story { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; } @media (min-width: 1024px) { .about-story { grid-template-columns: 1fr 1fr; } } .about-story-image { position: relative; } .about-story-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ═══════════════════════════════════════════════════════════════════════════════ 10.2 VALUES SECTION ═══════════════════════════════════════════════════════════════════════════════ */ .values-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } } .value-card { text-align: center; padding: var(--space-6); } .value-icon { width: 72px; height: 72px; margin: 0 auto var(--space-4); background: linear-gradient(135deg, var(--color-brand-red) 0%, var(--color-brand-red-dark) 100%); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-brand-white); } .value-icon svg { width: 32px; height: 32px; } .value-title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: var(--space-2); } .value-text { font-size: var(--text-sm); color: var(--text); max-width: 30ch; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════════════ 10.3 TEAM SECTION ═══════════════════════════════════════════════════════════════════════════════ */ .team-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } .team-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); text-align: center; } .team-card-image { aspect-ratio: 1; overflow: hidden; background-color: var(--bg-surface); } .team-card-image img { width: 100%; height: 100%; object-fit: cover; } .team-card-body { padding: var(--space-5); } .team-card-name { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); margin-bottom: var(--space-1); } .team-card-role { font-size: var(--text-sm); color: var(--color-brand-red); font-weight: var(--weight-medium); margin-bottom: var(--space-3); } .team-card-bio { font-size: var(--text-sm); color: var(--text); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 11: ERROR PAGES ██ ██ 404, 500, Maintenance ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 11.1 ERROR PAGE LAYOUT ═══════════════════════════════════════════════════════════════════════════════ */ .error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-16) var(--gutter); } .error-content { max-width: 500px; } .error-code { font-size: clamp(var(--text-4xl), 15vw, 8rem); font-weight: var(--weight-black); color: var(--color-brand-blue); line-height: 1; margin-bottom: var(--space-4); opacity: 0.15; } .error-title { font-size: var(--text-2xl); color: var(--text-strong); margin-bottom: var(--space-4); } .error-text { font-size: var(--text-md); color: var(--text); margin-bottom: var(--space-8); } .error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 12: URGENCY & CONVERSION COMPONENTS ██ ██ Dynamic availability badges, widgets, and banners ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 12.1 URGENCY BADGE (Hero / Inline) ═══════════════════════════════════════════════════════════════════════════════ */ .urgency-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--text-strong); animation: urgency-pulse 2s ease-in-out infinite; } .urgency-badge-icon { color: var(--color-success); display: flex; align-items: center; } .urgency-badge-text strong { color: var(--color-success); } @keyframes urgency-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } /* Dark background variant (hero sections) */ .section-dark .urgency-badge, .home-hero .urgency-badge, .page-hero .urgency-badge { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); color: var(--color-brand-white); } .section-dark .urgency-badge-text strong, .home-hero .urgency-badge-text strong, .page-hero .urgency-badge-text strong { color: var(--color-brand-gold); } /* ═══════════════════════════════════════════════════════════════════════════════ 12.2 URGENCY WIDGET (Sidebar) ═══════════════════════════════════════════════════════════════════════════════ */ .urgency-widget { background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%); border-radius: var(--radius-lg); padding: var(--space-5); color: var(--color-brand-white); } .urgency-widget-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .urgency-widget-icon { opacity: 0.9; flex-shrink: 0; } .urgency-widget-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-brand-white); margin: 0; } .urgency-widget-body { margin-bottom: var(--space-4); } .urgency-next-slot { margin-bottom: var(--space-2); } .urgency-day { display: block; font-size: var(--text-xl); font-weight: var(--weight-bold); } .urgency-time { font-size: var(--text-md); opacity: 0.9; } .urgency-location { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); opacity: 0.85; } .urgency-widget-footer .btn-primary { background: var(--color-brand-white); color: #059669; width: 100%; margin-bottom: var(--space-3); } .urgency-widget-footer .btn-primary:hover { background: rgba(255, 255, 255, 0.9); } .urgency-note { text-align: center; font-size: var(--text-xs); opacity: 0.7; margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ 12.3 URGENCY BANNER (Floating) ═══════════════════════════════════════════════════════════════════════════════ */ .urgency-banner { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(90deg, var(--color-brand-blue) 0%, var(--color-brand-blue-dark) 100%); color: var(--color-brand-white); padding: var(--space-3) 0; z-index: 9998; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); transform: translateY(100%); transition: transform var(--transition); } .urgency-banner.is-visible { transform: translateY(0); } .urgency-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .urgency-banner-content { display: flex; align-items: center; gap: var(--space-3); flex: 1; } .urgency-banner-icon { font-size: var(--text-lg); } .urgency-banner-text { font-size: var(--text-sm); margin: 0; } .urgency-banner-slot { display: block; color: var(--color-brand-gold); } @media (min-width: 768px) { .urgency-banner-slot { display: inline; margin-left: var(--space-2); } } .urgency-banner-cta { flex-shrink: 0; padding: var(--space-2) var(--space-4); background: var(--color-brand-gold); color: var(--color-brand-blue-dark); font-weight: var(--weight-semibold); font-size: var(--text-sm); border-radius: var(--radius); white-space: nowrap; transition: background var(--transition-fast); } .urgency-banner-cta:hover { background: var(--color-brand-white); } .urgency-banner-close { padding: var(--space-2); background: transparent; border: none; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: color var(--transition-fast); } .urgency-banner-close:hover { color: var(--color-brand-white); } @media (max-width: 480px) { .urgency-banner-text .urgency-banner-slot { display: none; } } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ SECTION 13: VIDEO COMPONENTS ██ ██ Embedded videos with responsive containers ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */ /* ═══════════════════════════════════════════════════════════════════════════════ 13.1 VIDEO SECTION ═══════════════════════════════════════════════════════════════════════════════ */ .section-video { background-color: var(--bg-surface); } .video-intro { max-width: 700px; margin-bottom: var(--space-6); color: var(--text); line-height: var(--leading-relaxed); } .video-wrapper { margin-bottom: var(--space-6); } /* Responsive Video Container (16:9) */ .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background-color: var(--color-neutral-900); } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Video CTA */ .video-cta { text-align: center; padding-top: var(--space-6); border-top: 1px solid var(--border); } .video-cta p { margin-bottom: var(--space-4); font-size: var(--text-md); color: var(--text-strong); } /* Video Thumbnail (for lazy-loaded videos) */ .video-thumbnail { position: relative; cursor: pointer; border-radius: var(--radius-lg); overflow: hidden; } .video-thumbnail img { width: 100%; height: auto; display: block; transition: transform var(--transition); } .video-thumbnail:hover img { transform: scale(1.02); } .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(24, 48, 117, 0.9); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-brand-white); transition: background var(--transition-fast), transform var(--transition-fast); } .video-thumbnail:hover .video-play-button { background: var(--color-brand-red); transform: translate(-50%, -50%) scale(1.1); } .video-play-button svg { width: 32px; height: 32px; margin-left: 4px; /* Visual centering for play icon */ } /* ═══════════════════════════════════════════════════════════════════════════════ 13.2 VIDEO GRID (Multiple Videos) ═══════════════════════════════════════════════════════════════════════════════ */ .video-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .video-grid { grid-template-columns: repeat(2, 1fr); } } .video-card { background-color: var(--color-brand-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .video-card-media { aspect-ratio: 16 / 9; background-color: var(--color-neutral-900); } .video-card-body { padding: var(--space-4); } .video-card-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: var(--space-2); } .video-card-duration { font-size: var(--text-sm); color: var(--text-muted); } /* ████████████████████████████████████████████████████████████████████████████████ ██ ██ ██ END OF PAGE STYLES ██ ██ ██ ████████████████████████████████████████████████████████████████████████████████ */