/* ========================================================= Vootlabs — Mobile polish (≤ 760px) Loaded LAST to guarantee overrides win. ========================================================= */ /* Mobile-menu chrome lives outside the @media query so the hamburger knows which state it's in via a class on . */ .mobile-menu-toggle { display: none !important; } .mobile-menu { display: none !important; } @media (max-width: 760px) { /* Safety net — prevent any horizontal overflow */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* Page edges tighter */ .page { padding: 0 20px !important; } .nav { padding: 16px 20px !important; } .nav-logo { font-size: 16px !important; } /* === Mobile menu === */ .mobile-menu-toggle { display: flex !important; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: inherit; cursor: pointer; padding: 0; } .mobile-menu-toggle svg { width: 16px; height: 16px; } .mobile-menu { display: flex !important; position: fixed; inset: 0; z-index: 100; background: var(--bg); flex-direction: column; padding: 80px 24px 32px; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(.2,.8,.2,1); pointer-events: none; } html.mobile-menu-open .mobile-menu { transform: translateY(0); pointer-events: auto; } html.mobile-menu-open { overflow: hidden; } .mobile-menu-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-menu-close svg { width: 14px; height: 14px; } .mobile-menu-links { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-sans); font-size: 32px; letter-spacing: -0.02em; line-height: 1; } .mobile-menu-links a { display: flex; align-items: center; gap: 16px; padding: 16px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); } .mobile-menu-links a .num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.1em; min-width: 36px; } .mobile-menu-foot { margin-top: auto; padding-top: 32px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.1em; } /* === Section rhythm === */ .section { padding-top: 72px !important; padding-bottom: 72px !important; } .section > div:first-child { margin-bottom: 48px !important; gap: 24px !important; } .section h2.display { font-size: clamp(40px, 11vw, 72px) !important; letter-spacing: -0.035em !important; line-height: 0.92 !important; word-break: break-word !important; } /* === Hero === */ .hero { padding-top: 112px !important; padding-bottom: 56px !important; } .hero-top { flex-direction: column !important; gap: 24px !important; margin-bottom: 32px !important; } .hero-meta { max-width: 100% !important; } .hero-headline { font-size: clamp(44px, 13.5vw, 88px) !important; letter-spacing: -0.04em !important; line-height: 0.92 !important; word-break: break-word !important; } .hero-headline .indent { padding-left: 12px !important; } /* Hero bottom: 2-col stat row, CTA on its own row underneath */ .hero-bottom { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; padding-top: 28px !important; } .hero-bottom > :last-child { grid-column: 1 / -1 !important; } .hero-bottom > :last-child > div { justify-content: flex-start !important; } .hero-stat-num { font-size: 48px !important; } .hero-stat-label { font-size: 10px !important; } /* === Services === */ .service-row { grid-template-columns: 36px 1fr !important; gap: 4px 16px !important; padding: 28px 0 !important; } .service-num { grid-row: 1 !important; grid-column: 1 !important; align-self: start !important; padding-top: 6px !important; } .service-title { grid-row: 1 !important; grid-column: 2 !important; font-size: 30px !important; } .service-desc { grid-column: 1 / -1 !important; font-size: 14px !important; margin-top: 8px !important; max-width: 100% !important; } .service-tags { display: none !important; } /* tags collide on mobile, drop them */ .service-arrow { display: none !important; } .service-row::before { display: none !important; } .service-row:hover { color: inherit !important; } .service-row:hover .service-num { color: var(--fg-2) !important; } .service-row:hover .service-desc { color: var(--fg-2) !important; } /* === Process === */ .process { grid-template-columns: 1fr !important; gap: 40px !important; } .process-step { grid-template-columns: 36px 1fr auto !important; padding: 24px 0 !important; gap: 4px 16px !important; } .process-step-num { grid-row: 1 !important; grid-column: 1 !important; align-self: start !important; padding-top: 4px !important; } .process-step-title { grid-row: 1 !important; grid-column: 2 !important; font-size: 24px !important; } .process-step-dur { grid-row: 1 !important; grid-column: 3 !important; align-self: start !important; padding-top: 6px !important; font-size: 10px !important; white-space: nowrap !important; } .process-step-desc { grid-column: 1 / -1 !important; margin-top: 12px !important; } /* === Work === */ .work-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .work-card.featured { grid-column: auto !important; } .work-card.featured .work-card-media { aspect-ratio: 4/3 !important; } .work-card-meta { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-top: 16px !important; } .work-card-title { font-size: 22px !important; } .work-card-desc { font-size: 13px !important; margin-top: 4px !important; } .work-card-tag { font-size: 10px !important; } /* === FAQ === */ .faq-layout { grid-template-columns: 1fr !important; gap: 32px !important; } .faq-layout > div[style*="position"] { position: relative !important; top: auto !important; } .faq-q { padding: 24px 0 !important; font-size: 18px !important; gap: 16px !important; } .faq-toggle { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; } /* === Contact === */ .contact { gap: 32px !important; grid-template-columns: 1fr !important; } .form-input, .form-textarea { font-size: 16px !important; } /* prevent iOS zoom on focus */ /* === Pricing — force single column on phones === */ .pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .pricing-card { min-height: auto !important; padding: 28px 24px !important; } .pricing-price { font-size: 56px !important; } /* === Footer === */ .footer { padding-top: 80px !important; padding-bottom: 32px !important; } .footer-display { font-size: clamp(48px, 16vw, 96px) !important; letter-spacing: -0.04em !important; line-height: 0.9 !important; word-break: break-word !important; } .footer-bottom { margin-top: 48px !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .footer-links { gap: 20px !important; flex-wrap: wrap !important; font-size: 10px !important; } /* === Marquee === */ .marquee-item { font-size: 40px !important; gap: 32px !important; } .marquee { padding: 20px 0 !important; gap: 32px !important; } /* === Tweaks panel === */ .tweaks-panel { left: 16px !important; right: 16px !important; bottom: 16px !important; min-width: auto !important; } } /* === Extra-narrow phones === */ @media (max-width: 420px) { .hero-headline { font-size: 40px !important; line-height: 0.94 !important; } .hero-stat-num { font-size: 40px !important; } .section h2.display { font-size: 36px !important; } .footer-display { font-size: 48px !important; } .service-title { font-size: 26px !important; } .process-step-title { font-size: 22px !important; } .pricing-price { font-size: 48px !important; } } /* === Tablet (760-1024px) — work + pricing improvements === */ @media (min-width: 761px) and (max-width: 1024px) { .hero-headline { font-size: clamp(72px, 11vw, 140px); } .work-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .work-card.featured { grid-column: 1 / -1; } .work-card.featured .work-card-media { aspect-ratio: 16/9; } }