/* ========================================================================== Countryside Pet Care — Mobile navigation -------------------------------------------------------------------------- Loads AFTER cpc-styles.css and only adds to it. cpc-styles.css is compiled from scss/cpc-styles.scss, so anything hand-written in there is lost on the next build — these rules live in their own plain CSS file instead. Below lg the page links leave the hamburger in the top corner and become a fixed bar along the bottom, where a thumb actually reaches. That leaves the top bar three balanced slots: logo, name, Book button. --cpc-mobile-nav-h is the one number the rest measures from — the page's bottom padding, and how far the back-to-top button sits above the bar. Colours come from the --cpc-* tokens cpc-styles.css defines on :root. ========================================================================== */ :root { --cpc-mobile-nav-h: 4rem; } /* The stacked wordmark that centres between the logo and the Book button. clamp() rather than a stack of breakpoints: it grows smoothly with the viewport between a 1rem floor on the narrowest phone and a 1.6rem ceiling just below the desktop menu, so the name reads as the brand rather than as a caption. The floor and ceiling are what stop it colliding with the logo on one side or the Book button on the other. */ .navbar-cpc .navbar-brand-mobile { font-size: clamp(1.15rem, 4.2vw, 1.6rem); line-height: 1.15; min-width: 0; } /* Fixed width, so the button cannot squeeze the name off centre. */ .navbar-cpc .navbar-book-btn { flex: 0 0 auto; white-space: nowrap; } .mobile-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 1035; /* above the back-to-top button, below modals */ display: flex; align-items: stretch; background-color: var(--cpc-white); border-top: 1px solid var(--cpc-light-blue); box-shadow: 0 -0.25rem 1rem rgba(48, 97, 145, 0.15); /* body is set in ff-tisa-web-pro, a serif — fine at body size, muddy at the 11px these labels sit at. Sans for the bar only. */ font-family: var(--bs-font-sans-serif); /* Clears the home indicator on phones that have one; zero everywhere else. */ padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-nav .mobile-nav-link { flex: 1 1 0; min-width: 0; /* long labels shrink rather than widen the bar */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; height: var(--cpc-mobile-nav-h); padding: 0.35rem 0.25rem; text-decoration: none; color: var(--cpc-very-dark-blue); transition: color 0.2s ease, background-color 0.2s ease; } .mobile-nav .mobile-nav-link i { font-size: 1.25rem; line-height: 1; --fa-primary-color: var(--cpc-very-dark-blue); --fa-secondary-color: var(--cpc-light-blue); } .mobile-nav .mobile-nav-link span { font-size: 0.7rem; font-weight: 600; line-height: 1.1; text-align: center; /* A long label takes one line and an ellipsis rather than pushing the other three out of shape. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-nav .mobile-nav-link:active { background-color: var(--cpc-very-light-blue); } .mobile-nav .mobile-nav-link.active { position: relative; color: var(--cpc-very-dark-blue); background-color: var(--cpc-very-light-blue); --fa-primary-color: var(--cpc-very-dark-blue); --fa-secondary-color: var(--cpc-dark-blue); } /* A bar along the top edge of the slot — the bottom-bar equivalent of the filled pill the desktop menu uses for the current page. */ .mobile-nav .mobile-nav-link.active::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 0.1875rem; border-radius: 0 0 99rem 99rem; background-color: var(--cpc-dark-blue); } @media (max-width: 991.98px) { /* Nothing should end up hidden underneath the bar. Bootstrap's .p-3 on is `padding: 1rem !important`, so !important alone loses to it on specificity — hence the body.p-3 selector alongside the bare one. */ body, body.p-3 { padding-bottom: calc(var(--cpc-mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem) !important; } /* This button used to sit exactly where the bar now is. !important because its position is set inline in footer.php. */ #back-to-top { bottom: calc(var(--cpc-mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 0.75rem) !important; right: 1rem !important; } /* Trimmed so the three top-bar slots still balance on a narrow phone. */ .navbar-cpc .navbar-brand img { width: 38px; height: 38px; } /* Three slots on one row, always. The navbar's own flex-wrap otherwise drops the Book button onto a second line once the name stops fitting, which is the opposite of balanced. */ .navbar-cpc > .container-fluid { flex-wrap: nowrap; } } /* Narrow phones — 320px leaves about 95px between the logo and the button, so buy the name back some room rather than letting it squeeze out. The Gingr mark alone still reads as "book"; the link's aria-label says it in full for anyone who cannot see the mark. */ @media (max-width: 400px) { .navbar-cpc .navbar-book-btn { padding-left: 0.6rem; padding-right: 0.6rem; } .navbar-cpc .navbar-book-btn .fa-calendar-check { display: none; } }