/* ========================================================================== Modern Dev Starter — Base Stylesheet Mobile-first, system font stack, CSS custom properties for per-client theming. Light/dark mode via data-theme attribute + prefers-color-scheme fallback. Optimized for 98-100 Lighthouse scores. ========================================================================== */ /* ---------- Theme Tokens (override per client) ---------- */ :root { /* Brand colors */ --color-primary: #1a56db; --color-primary-dark: #1442a8; --color-primary-light: #fbd9a4; --color-accent: #f59e0b; --color-link: #4b84ff; --color-icon: var(--color-white); /* Neutrals */ --color-text: #1f2937; --color-text-light: #4d5461; --color-bg: #ffffff; --color-bg-alt: #f0f0f0; --color-bg-accent: var(--color-primary); --color-border: #e5e7eb; --color-white: #ffffff; /* Footer */ --color-footer-bg: #141b25; --color-footer-text: #f0f0f0; --color-footer-muted: #9ca3af; --color-footer-link: #d1d5db; --color-footer-border: #374151; /* Form status */ --color-success-bg: #d1fae5; --color-success-text: #065f46; --color-error-bg: #fee2e2; --color-error-text: #991b1b; /* Typography — system font stack, zero network requests */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: var(--font-body); /* Scale */ --text-xs: clamp(0.7rem, 0.04vw + 0.68rem, 0.75rem); --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem); --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); --text-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem); --text-xl: clamp(1.56rem, 1.03vw + 1.31rem, 2.11rem); --text-2xl: clamp(1.95rem, 1.68vw + 1.53rem, 2.81rem); --text-3xl: clamp(2.44rem, 2.66vw + 1.78rem, 3.75rem); /* Spacing */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-section: clamp(3rem, 8vw, 6rem); /* Layout */ --container-max: 72rem; /* 1152px */ --container-gutter: clamp(1rem, 4vw, 2rem); --nav-height: 4rem; /* 64px */ /* Misc */ --radius: 0.375rem; /* 6px */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --transition: 200ms ease; } /* ---------- Dark Theme Tokens ---------- Applies when the OS prefers dark and the visitor hasn't explicitly chosen light (no-JS visitors get this automatically), and again whenever data-theme="dark" is set explicitly (the toggle in js/main.js, or the anti-flash script in ). Same declarations, listed twice on purpose — one lives inside the media query for the no-JS/system-default case, the other applies unconditionally once JS has made an explicit choice; CSS has no way to share a block across both without a build step. Only color tokens change — nothing here affects layout, so this can't introduce CLS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary: #1a56db; --color-primary-dark: #1442a8; --color-accent: #fbbf24; --color-link: #2b6cfa; --color-icon: var(--color-white); --color-text: #e3e6ec; --color-text-light: #9ca3af; --color-bg: #030712; --color-bg-alt: #171f2b; --color-bg-accent: #1a56db; --color-border: #374151; --color-footer-bg: #030712; } } :root[data-theme="dark"] { --color-primary: #1a56db; --color-primary-dark: #1442a8; --color-accent: #fbbf24; --color-link: #2b6cfa; --color-icon: var(--color-white); --color-text: #e3e6ec; --color-text-light: #9ca3af; --color-bg: #030712; --color-bg-alt: #171f2b; --color-bg-accent: #1a56db; --color-border: #374151; --color-footer-bg: #030712; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @media (prefers-reduced-motion:no-preference) { html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { transition: background-color var(--transition), color var(--transition); } } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Room for the fixed mobile-cta-bar; cleared at desktop where it's hidden */ padding-bottom: 3.8rem; } @media (min-width: 48rem) { body { padding-bottom: 0; } } img, picture, video, svg { display: block; max-width: 100%; height: auto; } /* Underlined by default — links inline within body text need a non-color cue (WCAG 1.4.1); Lighthouse flags any link distinguished by color alone. Nav/footer-list/button links opt out below since they're already set apart by position, weight, or being inside a button, not surrounding prose. Keep new inline text links unstyled so they inherit this. */ a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.15em; } ul, ol { list-style: none; } button { cursor: pointer; font: inherit; border: none; background: none; } /* ---------- Utility ---------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-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 { padding-block: var(--space-section); } .section--alt { background-color: var(--color-bg-alt); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.75rem 1.5rem; font-weight: 600; font-size: var(--text-sm); line-height: 1; border-radius: var(--radius); transition: background-color var(--transition), color var(--transition), box-shadow var(--transition); text-decoration: none; } .btn--primary { background-color: var(--color-primary); color: var(--color-white); } .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--color-primary-dark); text-decoration: none; } .btn--outline { border: 2px solid var(--color-primary); color: var(--color-primary); background-color: transparent; } .btn--outline:hover, .btn--outline:focus-visible { background-color: var(--color-primary); color: var(--color-white); text-decoration: none; } /* ---------- Header / Navigation ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); height: var(--nav-height); } .nav { display: flex; align-items: center; height: 100%; /* margin-inline-start: auto (below) pushes the menu as far right as space allows, but guarantees no minimum gap on its own — at a tight width that can compute to ~0, putting the logo flush against "Home". This gap is a floor auto-margins add on top of, not replace. */ gap: var(--space-md); } .nav__logo { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); text-decoration: none; white-space: nowrap; } .nav__logo:hover { text-decoration: none; color: var(--color-primary); } /* Right-hand button cluster — always visible, regardless of breakpoint, so the theme toggle is reachable without opening the mobile menu */ .nav__controls { display: flex; align-items: center; gap: var(--space-sm); margin-inline-start: auto; } /* Theme toggle — a minimal switch with static sun/moon icons flanking a sliding track; both icons stay visible, the thumb's position and the track color communicate the current state */ .theme-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs); color: var(--color-text-light); border-radius: 999px; } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-light); } .theme-toggle__icon { flex-shrink: 0; } .theme-toggle__track { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; background-color: var(--color-border); border-radius: 999px; transition: background-color var(--transition); } .theme-toggle:hover .theme-toggle__track { background-color: var(--color-text-light); } .theme-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--color-white); box-shadow: var(--shadow-sm); transition: transform var(--transition); } :root[data-theme="dark"] .theme-toggle__track { background-color: var(--color-primary); } :root[data-theme="dark"] .theme-toggle:hover .theme-toggle__track { background-color: var(--color-primary-dark); } :root[data-theme="dark"] .theme-toggle__thumb { transform: translateX(1rem); } /* Mobile menu toggle */ .nav__toggle { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--color-text); } .nav__toggle[aria-expanded="true"] .nav__hamburger { display: none; } .nav__toggle[aria-expanded="false"] .nav__close, .nav__toggle:not([aria-expanded="true"]) .nav__close { display: none; } .nav__toggle[aria-expanded="true"] .nav__close { display: block; } /* Mobile nav panel */ .nav__menu { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-lg) var(--container-gutter); box-shadow: var(--shadow-md); } .nav__menu.is-open { display: block; } .nav__list { display: flex; flex-direction: column; gap: var(--space-sm); } .nav__link { display: block; padding: var(--space-sm) 0; font-weight: 500; color: var(--color-text); text-decoration: none; transition: color var(--transition); } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-primary); text-decoration: none; } .nav__cta { margin-top: var(--space-md); white-space: nowrap; } /* Desktop nav — 768px+ Gaps are fluid (clamp), not fixed rem values: at exactly 768px, logo + 5 nav links + CTA + theme toggle don't fit with the old fixed 1.5rem/2rem gaps, so the CTA button wrapped to two lines. Each clamp bottoms out right at this breakpoint and grows back to the original fixed value by ~960-1024px, so wide desktop looks the same as before. */ @media (min-width: 48rem) { .nav__toggle { display: none; } .nav__menu { display: flex; position: static; padding: 0; border: none; box-shadow: none; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-inline-start: auto; order: 1; } .nav__list { flex-direction: row; gap: clamp(0.75rem, 2.5vw, 1.5rem); } .nav__cta { margin-top: 0; } /* nav__menu now provides the push and comes first (order: 1); controls (just the theme toggle now — the hamburger inside it is hidden above) is ordered after it, landing to the right of the CTA button */ .nav__controls { margin-inline-start: clamp(0.5rem, 2vw, 1rem); order: 2; } } /* ---------- Hero ---------- */ .hero { padding-block: var(--space-section); text-align: center; } .hero__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-md); color: var(--color-text); } .hero__subtitle { font-size: var(--text-lg); color: var(--color-text-light); max-width: 38rem; margin-inline: auto; margin-bottom: var(--space-xl); } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); } /* ---------- Page Header (Interior Pages) ---------- */ .page-header { padding-block: var(--space-2xl) var(--space-xl); background-color: var(--color-bg-alt); text-align: center; border-bottom: 1px solid var(--color-border); } .page-header__title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); margin-bottom: var(--space-sm); } .page-header__subtitle { font-size: var(--text-base); color: var(--color-text-light); max-width: 36rem; margin-inline: auto; } /* ---------- Content Sections ---------- */ /* Two-column split (text + image) */ .split { display: grid; gap: var(--space-2xl); align-items: center; } @media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: -1; } } .split__body h2 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-md); } .split__body p { color: var(--color-text-light); margin-bottom: var(--space-lg); } .split__media img { border-radius: var(--radius); width: 100%; object-fit: cover; aspect-ratio: 4/3; } /* Card grid */ .card-grid { display: grid; gap: var(--space-xl); } @media (min-width: 36rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 64rem) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } .card { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-xl); transition: box-shadow var(--transition); } .card:hover { box-shadow: var(--shadow-md); } .card__icon { font-size: var(--text-xl); margin-bottom: var(--space-md); color: var(--color-primary); } .card__title { font-weight: 700; margin-bottom: var(--space-sm); } .card__text { color: var(--color-text-light); font-size: var(--text-sm); } /* Gallery / Portfolio grid */ .gallery-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); } .gallery-item { overflow: hidden; border-radius: var(--radius); position: relative; } .gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.03); } .gallery-item__overlay { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.7)); display: flex; align-items: flex-end; padding: var(--space-md); opacity: 0; transition: opacity var(--transition); } .gallery-item:hover .gallery-item__overlay, .gallery-item:focus-within .gallery-item__overlay { opacity: 1; } .gallery-item__caption { color: var(--color-white); font-weight: 600; font-size: var(--text-sm); } /* ---------- Testimonials ---------- */ .testimonial-grid { display: grid; gap: var(--space-xl); } @media (min-width: 48rem) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-xl); } .testimonial__rating { margin-bottom: var(--space-sm); color: var(--color-accent); letter-spacing: 0.1em; } .testimonial__quote { color: var(--color-text); margin-bottom: var(--space-md); } .testimonial__author { display: flex; flex-direction: column; font-size: var(--text-sm); } .testimonial__name { font-weight: 700; color: var(--color-text); } .testimonial__location { color: var(--color-text-light); } /* ---------- FAQ ---------- */ .faq-list { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-md); } .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-lg); } .faq-item__question { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .faq-item__question::-webkit-details-marker { display: none; } .faq-item__question::after { content: "+"; flex-shrink: 0; font-size: var(--text-lg); font-weight: 400; line-height: 1; color: var(--color-primary); transition: transform var(--transition); } .faq-item[open] .faq-item__question::after { transform: rotate(45deg); } .faq-item__answer { margin-top: var(--space-md); color: var(--color-text-light); } .faq-item__answer p + p { margin-top: var(--space-md); } /* ---------- Contact Layout ---------- */ .contact-layout { display: grid; gap: var(--space-2xl); } @media (min-width: 48rem) { .contact-layout { grid-template-columns: 3fr 2fr; align-items: start; } } .contact-info { text-align: center; } @media (min-width: 48rem) { .contact-info { text-align: left; } } .contact-info__heading { font-weight: 700; margin-bottom: var(--space-lg); } .contact-info__item + .contact-info__item { margin-top: var(--space-md); } /* ---------- Contact Form ---------- */ .form { max-width: 36rem; margin-inline: 0; } .form__group { margin-bottom: var(--space-lg); } .form__label { display: block; font-weight: 600; margin-bottom: var(--space-xs); font-size: var(--text-sm); } .form__input, .form__textarea, .form__select { width: 100%; padding: 0.625rem 0.75rem; font: inherit; font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .form__input:focus, .form__textarea:focus, .form__select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .form__textarea { resize: vertical; min-height: 8rem; } .form__honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; } .form__status { padding: var(--space-md); border-radius: var(--radius); font-weight: 600; text-align: center; display: none; } .form__status--success { display: block; background-color: var(--color-success-bg); color: var(--color-success-text); } .form__status--error { display: block; background-color: var(--color-error-bg); color: var(--color-error-text); } /* ---------- Footer ---------- */ .site-footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); padding-block: var(--space-2xl); border-top: 1px solid var(--color-border); } .footer__inner { display: grid; gap: var(--space-xl); } @media (min-width: 48rem) { .footer__inner { grid-template-columns: 2fr 1fr 1fr; } } .footer__brand { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-sm); } .footer__desc { color: var(--color-footer-muted); font-size: var(--text-sm); max-width: 28rem; } .footer__heading { font-weight: 700; margin-bottom: var(--space-md); } .footer__links li + li { margin-top: var(--space-sm); } .footer__links a { color: var(--color-footer-link); font-size: var(--text-sm); text-decoration: none; transition: color var(--transition); } .footer__links a:hover { color: var(--color-white); } .footer__bottom { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-footer-border); text-align: center; font-size: var(--text-xs); color: var(--color-footer-muted); } @media (min-width: 23rem) { .footer__bottom { font-size: var(--text-sm); } } .footer__bottom a { color: var(--color-white); } /* ---------- Section Heading (centered) ---------- */ .section-heading { text-align: center; font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-2xl); } /* ---------- CTA Banner ---------- */ .cta { text-align: center; } .cta__title { font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-md); } .cta__text { color: var(--color-text-light); max-width: 32rem; margin-inline: auto; margin-bottom: var(--space-xl); } /* ---------- Trust Strip ---------- */ .trust-strip { background-color: var(--color-bg-accent); border-block: 1px solid var(--color-border); padding-block: var(--space-md); } .trust-strip__inner { display: grid; grid-template-columns: 1fr; justify-items: center; gap: var(--space-lg) var(--space-xl); } @media (min-width: 36rem) { .trust-strip__inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .trust-strip__inner { grid-template-columns: repeat(4, 1fr); } } .trust-strip__item { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-white); } .trust-strip__icon { color: var(--color-icon); flex-shrink: 0; } /* ---------- Process / How It Works ---------- */ .process-grid { display: grid; gap: var(--space-xl); } @media (min-width: 36rem) { .process-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .process-grid { grid-template-columns: repeat(4, 1fr); } } .process-step { text-align: center; } .process-step__number { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-md); border-radius: 50%; background-color: var(--color-primary); color: var(--color-white); font-weight: 700; font-size: var(--text-lg); } .process-step__title { font-weight: 700; margin-bottom: var(--space-sm); } .process-step__text { color: var(--color-text-light); font-size: var(--text-sm); } /* ---------- Areas We Serve ---------- */ .areas-intro { text-align: center; color: var(--color-text-light); max-width: 36rem; margin-inline: auto; margin-bottom: var(--space-lg); } .areas-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); max-width: 48rem; margin-inline: auto; margin-bottom: var(--space-lg); } .areas-list li { padding: var(--space-xs) var(--space-md); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--text-sm); font-weight: 600; } .areas-note { text-align: center; color: var(--color-text-light); font-size: var(--text-sm); } /* ---------- Prose (legal pages) ---------- */ .prose { max-width: 42rem; margin-inline: auto; } .prose h2 { font-size: var(--text-xl); font-weight: 700; margin-top: var(--space-xl); margin-bottom: var(--space-sm); } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--color-text-light); margin-bottom: var(--space-md); } .prose a { color: var(--color-primary); } /* ---------- Error Page ---------- */ .error-code { font-size: var(--text-3xl); font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: var(--space-sm); } /* ---------- Sticky Mobile CTA Bar ---------- Static markup present on first paint (not JS-inserted), so it can't cause CLS. Hidden at desktop, where the header CTA already covers this. */ .mobile-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: flex; gap: var(--space-sm); padding: var(--space-sm) var(--container-gutter); background-color: var(--color-bg); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .mobile-cta-bar__btn { flex: 1; } @media (min-width: 48rem) { .mobile-cta-bar { display: none; } } /* ---------- Skip-link (a11y) ---------- */ .skip-link { position: absolute; top: -100%; left: var(--container-gutter); background: var(--color-primary); color: var(--color-white); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); z-index: 200; font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: var(--space-sm); }