/* ============================================================ STACKVEL SOLUTIONS — RESPONSIVE Verified at 320 · 375 · 390 · 414 · 768 · 1024 · 1280 · 1440 · 1920 Rule: no horizontal overflow, no clipped text, no broken grid. ============================================================ */ /* ============================================================ 0. GLOBAL OVERFLOW GUARDS ============================================================ */ html, body { max-width: 100%; } /* Long unbroken strings (URLs, emails, IDs) must never push layout. Set once on and inherited, rather than as a list of elements that has to be remembered every time a new one is used — the list here had no address, div, strong, em, code, label, th, dd or figcaption, all of which carry text somewhere on this site. */ body { overflow-wrap: break-word; } /* Tables and code blocks scroll on narrow screens */ table, pre { max-width: 100%; overflow-x: auto; } /* ============================================================ 1. ULTRA-WIDE (min 1600px) ============================================================ */ @media (min-width: 1600px) { .services-grid { gap: var(--space-8); } .case-row { gap: var(--space-20); } } /* ============================================================ 2. LARGE DESKTOP (max 1280px) ============================================================ */ @media (max-width: 1280px) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-top { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-8); } .case-row { gap: var(--space-12); } .nav-dropdown--mega { width: 600px; } } /* ============================================================ 3. SMALL DESKTOP / LARGE TABLET (max 1024px) ============================================================ */ @media (max-width: 1024px) { /* --- Navigation collapses to the mobile drawer --- */ .primary-nav { display: none; } .header-cta .btn { display: none; } .hamburger { display: flex; } .mobile-menu { display: flex; } /* --- Hero stacks --- */ .hero { min-height: auto; } /* Stacked: the hand is a wash behind the copy rather than a column beside it, so the text takes the full measure. */ .hero__text { max-width: 100%; } .hero__subheadline { max-width: 62ch; } /* --- Grids --- */ .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .capabilities-list{ grid-template-columns: minmax(0, 1fr); } .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value-grid { grid-template-columns: minmax(0, 1fr); } /* --- Process becomes a vertical timeline --- */ .process-steps{ grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; margin-inline: auto; } .process-steps::before, .process-steps::after { display: none; } .process-step { flex-direction: row; text-align: left; align-items: flex-start; gap: var(--space-5); padding-bottom: var(--space-8); position: relative; } /* Connecting rail down the left of the vertical timeline */ .process-step::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--c-primary-soft), var(--c-border)); } .process-step:last-child { padding-bottom: 0; } .process-step:last-child::before { display: none; } .process-steps--7 .process-step__title { font-size: var(--text-base); } .process-steps--7 .process-step__desc { font-size: var(--text-sm); } /* --- Editorial case rows stack; image always first --- */ .case-row, .case-row--reverse { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-6); } .case-row--reverse .case-row__media, .case-row__media { order: -1; /* stacked, so there is nothing to ride alongside */ position: static; } .case-row--reverse .case-row__body, .case-row__body { order: 0; } /* --- Split layouts --- */ .two-col{ grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } .two-col--reverse .two-col__visual { order: 0; } .page-hero__content { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } .page-hero__desc { max-width: 62ch; } .contact-grid { grid-template-columns: minmax(0, 1fr); } .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } .cta-section{ padding: var(--space-14, 3.5rem) var(--space-8); } } /* ============================================================ 4. TABLET (max 768px) ============================================================ */ @media (max-width: 768px) { :root { --header-height: 66px; --header-height-scrolled: 60px; } .container { padding-inline: var(--space-5); } .section { padding-block: var(--space-16); } .content-section { padding-block: var(--space-16); } /* Hero */ .hero { padding-bottom: var(--space-8); } .hero__content { padding-block: var(--space-10) var(--space-4); } .hero__headline { font-size: clamp(2rem, 7.6vw, 3rem); } .hero__subheadline { font-size: var(--text-base); margin-bottom: var(--space-8); } .hero__stats { gap: var(--space-6); margin-top: 0; } .hero__stat-value { font-size: var(--text-2xl); } /* Grids collapse */ .services-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .benefits-grid { grid-template-columns: minmax(0, 1fr); } .challenge-grid { grid-template-columns: minmax(0, 1fr); } .feature-grid { grid-template-columns: minmax(0, 1fr); } .section-title { font-size: clamp(var(--text-2xl), 6.2vw, var(--text-4xl)); } .section-header { margin-bottom: var(--space-12); } .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); } /* CTA */ .cta-section{ padding: var(--space-12) var(--space-6); border-radius: var(--radius-xl); margin-block: var(--space-8); } .cta-section__title{ font-size: var(--text-3xl); } .contact-form .form-row { grid-template-columns: minmax(0, 1fr); } /* Desktop dropdowns are never shown once the drawer takes over */ .nav-dropdown, .nav-dropdown--mega { display: none; } .page-hero { padding-top: calc(var(--header-height) + var(--space-10)); padding-bottom: var(--space-12); } .page-hero__title { font-size: clamp(var(--text-2xl), 7.4vw, var(--text-4xl)); } .two-col { gap: var(--space-8); } .case-row, .case-row--reverse { padding: var(--space-5); } .case-row__title { font-size: var(--text-2xl); } .work-card__name { min-height: auto; } } /* ============================================================ 5. LARGE MOBILE (max 640px) ============================================================ */ @media (max-width: 640px) { .section { padding-block: var(--space-12); } .content-section { padding-block: var(--space-12); } .hero__actions, .cta-section__actions{ flex-direction: column; align-items: stretch; width: 100%; } .hero__actions .btn, .page-hero__actions .btn, .cta-section__actions .btn, .cta-panel__actions .btn { width: 100%; } .hero__stats { gap: var(--space-5) var(--space-8); width: 100%; } .hero__stat { flex: 1 1 30%; min-width: 90px; } .service-card__body { padding: var(--space-6); } .contact-info-card, .contact-form-card { padding: var(--space-6); } .footer-legal { gap: var(--space-4); } .mobile-menu { padding-inline: var(--space-5); } } /* ============================================================ 6. MOBILE (max 480px) ============================================================ */ @media (max-width: 480px) { .container { padding-inline: var(--space-4); } .process-grid { grid-template-columns: minmax(0, 1fr); } .hero__headline { font-size: clamp(1.75rem, 8.4vw, 2.25rem); } .hero__eyebrow { padding: var(--space-2) var(--space-3); } /* 0.6875rem rendered at 11px; 12px is the floor for readable label text */ .hero__eyebrow span { font-size: 0.75rem; letter-spacing: 0.06em; } .section-title { font-size: var(--text-2xl); } .page-hero__title { font-size: var(--text-2xl); } .cta-section__title{ font-size: var(--text-2xl); } .service-card__body { padding: var(--space-5); } .service-card__media + .service-card__body .service-card__icon { margin-top: -44px; } .value-item { padding: var(--space-5); flex-direction: column; } .faq-question { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); } .faq-answer { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-sm); } .cta-section{ padding: var(--space-10) var(--space-5); } .mobile-nav-link, .mobile-nav-group__toggle { font-size: var(--text-lg); } } /* ============================================================ 7. SMALL MOBILE (max 375px / 320px) ============================================================ */ @media (max-width: 375px) { .container { padding-inline: var(--space-4); } .hero__headline { font-size: 1.625rem; } .hero__stat-value { font-size: var(--text-xl); } .hero__stat-label { font-size: 0.75rem; } .section-title { font-size: var(--text-xl); } .service-card__body { padding: var(--space-5); } .service-card__title { font-size: var(--text-lg); } .site-logo__img { height: 32px; } .site-footer .site-logo__img { height: 36px; } .btn-lg, .btn-xl { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); } .case-row__title { font-size: var(--text-xl); } } /* ============================================================ 8. TOUCH / NO-HOVER DEVICES Hover must never gate information on touch. ============================================================ */ /* The touch and narrow-viewport hover resets used to start here. They now live in animations.css, beside the hover effects they undo, and they cover every card on the site rather than five of them. This block was also wrong by the end: it put `var(--shadow-card)` back on .service-card, .value-item and .benefit-card, none of which rest with a shadow. Because this file loads last it won the cascade, so tapping one of those three on a phone left a shadow under it that nothing else on the page had. */ /* ============================================================ 9. PRINT ============================================================ */ @media print { .site-header, .site-footer, .mobile-menu, .hamburger, .back-to-top{ display: none !important; } body { background: #fff; color: #000; } .section, .content-section { padding-block: 1.5rem; } .container { max-width: 100%; } a { text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; } .card, .service-card{ box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .cta-section{ background: #f4f4f4 !important; color: #000 !important; } .cta-section__title{ color: #000 !important; } .reveal, .stagger-children > * { opacity: 1 !important; transform: none !important; } } /* ============================================================ 10. FORCED COLORS / HIGH CONTRAST ============================================================ */ @media (forced-colors: active) { .btn-primary, .btn-secondary { border: 2px solid ButtonText; } .service-card, .card { border: 1px solid ButtonText; } .text-gradient{ -webkit-text-fill-color: CanvasText; background: none; color: CanvasText; } .nav-link::after, .service-card::after { forced-color-adjust: none; } }