/** * The design's 23 Sep "site-wide mobile responsive rework" (design commit * 963d991: om-mobile v2, om-abs-img, om-faq-mobile2, om-calc-mobile, * om-calc-fab), ported with the design's own values. * * Only the selectors change, to reach this theme's markup: * design here * section … main[class^="ij"] section … (redesigned pages only — * never the Beaver Builder pages) * #site-header > div #site-header .hdr-bar * #site-header > div > div #site-header .hdr-row * .hdr-portal .hdr-portal-btn * footer .ftr-* #site-footer .ftr-* (roles added in templates/parts/footer.php) * #calc-dock / .calc-peek … #ij-calc / .ij-calc-peek … (templates/parts/payment-calculator.php) */ /* ---- Phone drawer (om-mobile v2) ---------------------------------------- */ .drawer, .drawer-scrim { display: none; } .drawer a:hover { color: var(--brand-green-dark); } .drawer a, .drawer a:hover, .drawer a:focus { text-decoration: none; } .drawer { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 21.6px; } /* the design's body metrics, not Bootstrap's 14px / 1.43 */ .dmenu > summary::-webkit-details-marker { display: none; } .dmenu > summary::marker { content: ''; } .dmenu[open] .dchev { transform: rotate(180deg); } .dchev { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 900px) { .navtoggle:checked ~ .drawer, .navtoggle:checked ~ .drawer-scrim { display: block !important; } /* The page behind an open drawer should not scroll. */ body:has(.navtoggle:checked) { overflow: hidden; } #site-header nav, #site-header .hdr-contact { display: none !important; } #site-header .burger { display: flex !important; } #site-header .hdr-portal-btn { display: none !important; } #site-header .hdr-row { flex-wrap: nowrap !important; column-gap: 12px !important; } #site-header .hdr-chrome { flex-wrap: nowrap !important; } #site-header .hdr-cta { white-space: nowrap; } #site-header .hdr-bar { padding: 12px 20px !important; } /* The old drop-down drawer's toggle; the burger replaces it. */ #site-header #ij-nav-toggle { display: none !important; } } @media (min-width: 901px) { .drawer, .drawer-scrim, .navtoggle:checked ~ .drawer, .navtoggle:checked ~ .drawer-scrim { display: none !important; } } /* ---- Sections (om-mobile v2) --------------------------------------------- */ @media (max-width: 820px) { main[class^="ij"] section { padding-left: 20px !important; padding-right: 20px !important; } main[class^="ij"] section [style*="grid-template-columns"]:not(.sched-row):not(.keep-cols) { grid-template-columns: minmax(0, 1fr) !important; } main[class^="ij"] section [style*="display: flex"], main[class^="ij"] section [style*="display:flex"] { flex-wrap: wrap; } main[class^="ij"] section img { max-width: 100%; height: auto; } main[class^="ij"] section [style*="position: sticky"], main[class^="ij"] section [style*="position:sticky"] { position: static !important; } /* om-abs-img: a photo filling its well keeps filling it. */ main[class^="ij"] section img[style*="position:absolute"], main[class^="ij"] section img[style*="position: absolute"] { height: 100% !important; max-width: none !important; } #site-footer { padding: 32px 20px 24px !important; } #site-footer .ftr-grid { padding-top: 56px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; } #site-footer .ftr-brand { grid-column: 1 / -1; } #site-footer .ftr-cta-inner h2 { font-size: 32px !important; letter-spacing: -1.2px !important; } } @media (max-width: 560px) { main[class^="ij"] section h1, main[class^="ij"] section [style*="font-size: 68px"], main[class^="ij"] section [style*="font-size:68px"], main[class^="ij"] section [style*="font-size: 52px"], main[class^="ij"] section [style*="font-size:52px"] { font-size: 26px !important; letter-spacing: -1.1px !important; line-height: 1.14 !important; } main[class^="ij"] section h2, main[class^="ij"] section [style*="font-size: 42px"], main[class^="ij"] section [style*="font-size:42px"], main[class^="ij"] section [style*="font-size: 32px"], main[class^="ij"] section [style*="font-size:32px"] { font-size: 23px !important; letter-spacing: -0.8px !important; line-height: 1.2 !important; } main[class^="ij"] section h3, main[class^="ij"] section [style*="font-size: 28px"], main[class^="ij"] section [style*="font-size:28px"], main[class^="ij"] section [style*="font-size: 22px"], main[class^="ij"] section [style*="font-size:22px"] { font-size: 19px !important; letter-spacing: -0.5px !important; } main[class^="ij"] section [style*="font-size: 20px"], main[class^="ij"] section [style*="font-size:20px"], main[class^="ij"] section [style*="font-size: 18px"], main[class^="ij"] section [style*="font-size:18px"] { font-size: 17px !important; } main[class^="ij"] section p, main[class^="ij"] section [style*="font-size: 17px"], main[class^="ij"] section [style*="font-size:17px"], main[class^="ij"] section [style*="font-size: 16px"], main[class^="ij"] section [style*="font-size:16px"] { font-size: 15px !important; line-height: 1.65 !important; } main[class^="ij"] section [style*="padding: 96px"], main[class^="ij"] section [style*="padding:96px"] { padding-top: 56px !important; padding-bottom: 56px !important; } main[class^="ij"] section [style*="border-radius: 32px"], main[class^="ij"] section [style*="border-radius:32px"] { border-radius: 20px !important; } #site-header .hdr-logo img { height: 34px !important; } #site-header .hdr-cta { padding: 8px 14px !important; } #site-footer .ftr-band { min-height: 240px !important; height: 240px !important; } #site-footer .ftr-cta-inner { padding: 32px 20px !important; } #site-footer .ftr-cta-inner h2 { font-size: 24px !important; letter-spacing: -0.8px !important; line-height: 1.18 !important; } #site-footer .ftr-cta-inner > div { margin-top: 24px !important; } #site-footer .ftr-cta-inner a { padding: 11px 20px !important; font-size: 14px !important; } #site-footer .ftr-grid { grid-template-columns: minmax(0, 1fr) !important; } #site-footer .ftr-brand { padding-bottom: 20px; } #site-footer .ij-footer-menu > li { padding: 20px 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.14); } #site-footer .ij-footer-menu > li > a, #site-footer .ij-footer-menu > li > .ij-footer-heading { font-size: 16px !important; margin-bottom: 14px !important; } #site-footer .ij-footer-menu > li > ul { gap: 12px !important; font-size: 15px !important; } #site-footer .ftr-social { gap: 16px !important; flex-wrap: wrap !important; margin-top: 20px !important; } #site-footer img { max-width: 100%; height: auto; } } /* ---- FAQ rows (om-faq-mobile2) -------------------------------------------- */ @media (max-width: 900px) { main[class^="ij"] details > summary { gap: 12px !important; flex-wrap: nowrap !important; font-size: 16px !important; line-height: 1.4 !important; align-items: flex-start !important; } main[class^="ij"] details > summary > span:last-child { flex: 0 0 auto !important; margin-top: 2px !important; } main[class^="ij"] details > summary > span:last-child svg { width: 18px !important; height: 18px !important; } } /* ---- Floating payment calculator (om-calc-mobile + om-calc-fab) ----------- On a phone the collapsed card becomes a 56px round button showing only the calculator mark (the whole button opens the panel), and the open panel becomes a full-width bottom sheet. Replaces this theme's earlier <=600px full-width card in calculator.css. */ @media (max-width: 560px) { #ij-calc { right: 16px !important; bottom: 16px !important; left: auto !important; align-items: flex-end !important; } #ij-calc .ij-calc-peek { width: 56px !important; height: 56px !important; border-radius: 100px !important; box-shadow: 0 10px 28px rgba(9, 13, 16, 0.24) !important; } #ij-calc .ij-calc-peek-bar { width: 56px !important; height: 56px !important; padding: 0 !important; gap: 8px !important; justify-content: center !important; border-radius: 100px !important; } #ij-calc .ij-calc-peek-title, #ij-calc .ij-calc-dismiss { display: none !important; } #ij-calc .ij-calc-peek-mark { width: 56px !important; height: 56px !important; background: transparent !important; } #ij-calc .ij-calc-peek-mark svg { width: 24px !important; height: 24px !important; } /* The figure button covers the whole disc, so the disc itself opens the panel. */ #ij-calc .ij-calc-peek-body { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; overflow: hidden !important; padding: 0 !important; } #ij-calc .ij-calc-sheen { display: none !important; } /* Open: a full-width bottom sheet. */ #ij-calc:has(.ij-calc-panel:not([hidden])) { left: 0 !important; right: 0 !important; bottom: 0 !important; align-items: stretch !important; } #ij-calc .ij-calc-panel { width: 100% !important; max-height: 85vh; overflow-y: auto !important; border-radius: 20px 20px 0 0 !important; border-bottom: 0 !important; } } /* Headings in every redesign template use the design's font (2026-10-05). * The parent bb-theme skin sets h1-h6 { font-family: Helvetica }, which reached * every template heading that doesn't set its own font (19 pages measured * against the Vercel design). Font family only; templates keep their sizes. */ main[class^="ij"] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-sans); } /* Links: no focus outline (2026-10-05, owner request). bb-theme's base.min.css and * tokens.css both set a:focus { outline: 5px auto -webkit-focus-ring-color }, which * drew a ring around a link (e.g. the Apply sidebar logo) after it was clicked. * Keyboard users still get a slim brand-green ring, shown only for Tab navigation. */ /* "html body" because bb-theme's base.min.css loads after this file with the same specificity. */ html body a:focus { outline: none; outline-offset: 0; } html body a:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; } /* ---- Hover states from the Vercel design's style-hover (2026-10-06) ---- Each button below carries its colour inline, so its hover needs !important. Before this, only .ij-cta-green had a hover, and only on the home page (home.css), so these 18 buttons on 11 pages did not react at all. */ .ij-cta-green:hover, .ben-cta:hover, .rt-cta:hover, .res-cta:hover, .proc-cta:hover, .aq-cta-primary:hover, .crole-cta:hover, .cs-cta:hover, .ntd-cta:hover { background: var(--brand-green-dark) !important; } .aq-cta-secondary:hover, .scp0:hover { background: var(--slate-50) !important; } /* Ijara calculator: the "Reset" choice turns green on hover, as the design's Reset button does. */ .ijc #label_26_17_2:hover { color: var(--brand-green) !important; cursor: pointer; } /* Ijara calculator: its heading is a 28px card title, so on phones it follows the design's 28px -> 19px step, not the page-title (h1) step (2026-10-06). */ @media (max-width: 560px) { main.ijc .ijc-title { font-size: 19px !important; letter-spacing: -0.5px !important; line-height: 1.2 !important; } } /* == om-ftr-legal (design, 2026-10-07): the footer's legal row on phones. == */ @media (max-width: 560px) { #site-footer .ftr-legal { margin-top: 24px !important; padding-top: 20px !important; gap: 14px !important; flex-direction: column; align-items: flex-start !important; } #site-footer .ftr-legal .ij-footer-legal-links { flex-wrap: nowrap !important; justify-content: space-between; width: 100%; gap: 12px !important; font-size: 13px !important; white-space: nowrap; } #site-footer .ftr-legal .ij-footer-legal-links a { font-size: 13px !important; } #site-footer .ftr-legal > div:last-child { font-size: 13px !important; line-height: 1.5; } }