/* ═══════════════════════════════════════════════════════════ HAMBURGER — hidden on desktop, visible on mobile ═══════════════════════════════════════════════════════════ */ .hamburger { display: none; /* hidden by default (desktop) */ flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; transition: background .2s; flex-shrink: 0; } .hamburger:hover { background: rgba(0,0,0,.06); } .hamburger__bar { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; transform-origin: center; } /* Animated X state when menu is open */ .hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile drawer ── */ .mobile-menu { display: none; /* hidden on desktop */ flex-direction: column; gap: 0; background: var(--white); border-top: 1px solid rgba(0,0,0,.08); /* padding: 8px 0 16px; */ overflow: hidden; max-height: 0; transition: max-height .35s ease, padding .35s ease; } .mobile-menu.is-open { max-height: 400px; padding: 8px 0 20px; } .mobile-menu__link { font-family: 'Heebo', sans-serif; font-size: 16px; font-weight: 400; color: var(--ink); padding: 14px var(--page-pad); border-bottom: 1px solid rgba(0,0,0,.05); transition: background .15s, color .15s; } .mobile-menu__link:last-of-type { border-bottom: none; } .mobile-menu__link:hover { background: rgba(163,42,41,.05); color: var(--red); } .mobile-menu__cta { margin: 12px var(--page-pad) 0; width: calc(100% - (var(--page-pad) * 2)); justify-content: center; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE STYLES Add AFTER styles.css in your . ═══════════════════════════════════════════════════════════ */ /* ── Tablet: 768px – 1024px ────────────────────────────── */ @media (max-width: 1024px) { :root { --page-pad: 40px; --h1: 52px; --h2: 40px; --h3: 34px; --h4: 28px; --h5: 22px; --lg: 20px; } /* Navbar */ .nav-links { gap: 20px; } /* Hero — height driven by content, bottom pad makes room for the circle */ .hero { min-height: unset; align-items: flex-start; padding-bottom: 380px; } /* Hero text — comfortable top padding, no extra bottom needed */ .hero__text { max-width: 480px; padding: 64px var(--page-pad) 0; } /* Hero image — circle anchored bottom-right like mobile, partially off-screen */ .hero__image { position: absolute; right: -60px; bottom: -60px; top: auto; transform: none; width: 480px; height: 480px; } /* Ellipse — fills the circle container exactly */ .hero__ellipse { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; } /* Offers — 2 columns */ .offers__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } /* Stats numbers */ .stat__number { font-size: 48px; } .stat__label { font-size: var(--md); } /* Features — still 3 cols but tighter */ .features__grid { gap: 32px; } /* Steps */ .steps-section { padding: 48px var(--page-pad); } .step { padding: 40px; } .step__number { font-size: 64px; } .step__title { font-size: var(--h5); } /* Form */ .form__row { gap: 12px; } } /* ── Mobile: up to 767px ────────────────────────────────── */ @media (max-width: 767px) { :root { --page-pad: 20px; --h1: 40px; --h2: 32px; --h3: 28px; --h4: 24px; --h5: 20px; --lg: 18px; --md: 14px; --reg: 15px; --sm: 13px; } /* ── Navbar ── */ .navbar { padding: 0; /* remove side padding from nav root */ box-shadow: none; /* kill the mid-header shadow */ } /* Shadow lives here — always at the very bottom of the navbar */ .navbar::after { content: ''; display: block; height: 1px; background: rgba(0,0,0,.07); } .navbar__inner { padding: 10px var(--page-pad); /* side padding moves here */ max-width: 100%; } .navbar__logo img { height: 44px; } /* Hide desktop nav links and CTA, show hamburger */ .nav-links { display: none; } .desktop-cta { display: none; } .hamburger { display: flex; } /* Show the mobile drawer (visibility controlled by .is-open via JS) */ .mobile-menu { display: flex; } .navbar__right { gap: 0; } /* ── Hero ── */ .hero { flex-direction: column; align-items: flex-start; min-height: auto; padding: 48px var(--page-pad) 0; overflow: hidden; } .hero__text { position: relative; z-index: 2; max-width: 100%; padding: 0; } .hero__heading { margin-bottom: 16px; } .hero__sub { margin-bottom: 24px; font-size: var(--md); } /* Image flows below text, full width */ .hero__image { position: relative; top: auto; right: auto; bottom: auto; left: auto; transform: none; width: calc(100% + (var(--page-pad) * 2)); margin-left: calc(var(--page-pad) * -1); height: auto; z-index: 1; } .hero__image img { position: relative; z-index: 1; width: 100%; height: auto; max-height: 100vw; object-fit: cover; object-position: top center; display: block; } /* ── Section padding ── */ .section-pad { padding: 48px var(--page-pad); } /* ── What We Offer ── */ .section-title { margin-bottom: 40px; } .offers__grid { grid-template-columns: 1fr; gap: 40px; } /* ── Stats ── */ .stats__top { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; } .stats__row { grid-template-columns: 1fr 1fr; gap: 24px; } .stat__number { font-size: 42px; } .stat__label { font-size: var(--reg); } /* ── Features ── */ .features__grid { grid-template-columns: 1fr; gap: 40px; } /* ── Steps ── */ .steps-section { padding: 40px var(--page-pad); } .steps-list { grid-template-columns: 1fr; gap: 16px; } .step { padding: 32px; border-radius: 16px; } .step__number { font-size: 56px; margin-bottom: 16px; } .step__title { font-size: var(--h5); margin-bottom: 12px; } .step__bar { margin-bottom: 20px; } /* ── Form ── */ .form__row { grid-template-columns: 1fr; gap: 16px; } .form__actions { justify-content: stretch; } .form__submit { width: 100%; justify-content: center; } /* ── Footer ── */ .footer { padding: 48px var(--page-pad) 32px; } .footer__top { flex-direction: column; gap: 40px; } .footer__cols { width: 100%; gap: 16px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; } .footer__links { flex-wrap: wrap; gap: 12px; } } /* ── Small mobile: up to 400px ─────────────────────────── */ @media (max-width: 400px) { :root { --h1: 34px; } .stats__row { grid-template-columns: 1fr; } }