/* Tailgate Office — minimal overrides on top of Porto theme + skin-tailgateoffice. Owner preference: NO black/dark backgrounds anywhere — light surfaces, dark text, orange accent. */ /* Logo sizing in header */ #header .header-logo img { max-width: 240px; height: auto; } /* Sticky header. Porto fixes .header-body on scroll; make sure it stays a solid white bar above page content with a visible edge, and never inherits a transparent background from the section it happens to be floating over. */ .sticky-header-active #header .header-body { background: #FFFFFF !important; border-bottom: 1px solid #E4E8ED; box-shadow: 0 2px 10px rgba(27, 34, 43, 0.08); z-index: 1100; } .sticky-header-active #header .header-logo img { max-width: 208px; } /* Light footer (Porto default is dark) — warm cream, brand-tinted */ #footer { background: #FBF3EA; border-top: 1px solid #F0E2D2; } #footer, #footer p, #footer li, #footer span { color: #3A4552; } /* Matched only h5 until the column headings became h2 for heading order. Listed by tag rather than pinned to one level so a future outline change cannot leave the footer headings white-on-cream again — and, for the same reason, the column headings keep the metrics Porto gives h5 no matter which tag carries them. The text-3 class on those headings only pins font-size, so the tag change took the weight from 600 down to h2's 300 (the heading read lighter than the link list under it) and stretched the line box from 18px to h2's 42px. */ #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { color: #1B222B; font-weight: 600; line-height: 18px; } /* Footer link colours live in the FOOTER INTERACTIVE STATES block near the end of this file — kept together so every footer state is in one place. */ #footer .footer-copyright { background: #F6E9D9 !important; border-top: 1px solid #F0E2D2; } #footer .footer-copyright p { color: #495664; } #footer .footer-ribbon { background: #D9741F; } #footer .footer-ribbon:before { border-right-color: #9C5316; border-left-color: #9C5316; } #footer list li i, #footer .list i { color: #D9741F; } /* Form pages */ .form-card { background: #FFFFFF; border: 1px solid #D8DEE5; border-top: 4px solid #D9741F; border-radius: 6px; box-shadow: 0 10px 34px rgba(27, 34, 43, 0.07); } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Interior page header. Porto ships `.page-header { background-color: var(--dark); }` and this build has no `.bg-color-light-scale-1` utility at all, so the band rendered near-black and the `text-color-dark` H1 was invisible against it. Owner requirement: no dark surfaces anywhere. */ .bg-color-light-scale-1 { background-color: #F4F6F8 !important; } .page-header { background-color: #F4F6F8 !important; border-bottom: 1px solid #E4E8ED; } .page-header h1 { color: #1B222B; } .page-header p, .page-header .sub-title { color: #3A4552; } .page-header .breadcrumb li, .page-header .breadcrumb li.active { color: #5B6774; } .page-header .breadcrumb li a { color: #3A4552; } .page-header .breadcrumb li a:hover { color: #D9741F; } /* ========================================================================== CARD / CTA BASELINE ALIGNMENT Spec: when several cards sit in the same row their primary buttons must land on one horizontal baseline, however much text each card carries. Done structurally, not per page: 1. the card fills its grid column, so every card in the row is equal height 2. the card body becomes a vertical flex column 3. the content above the CTA takes the slack 4. the CTA block is pushed to the floor with margin-top: auto No fixed heights anywhere, so long copy still expands the whole row. Everything is gated at >= 768px; below that the cards stack one per line and natural content height is what you want. ========================================================================== */ @media (min-width: 768px) { /* --- 1. Equal height --------------------------------------------------- Bootstrap rows are already align-items: stretch, so the column is full height; the card just has to fill it. Restricted to a card that is the sole occupant of a column that has siblings, i.e. a real multi-card row. Cards that already carry .h-100 are unaffected. */ .row > [class*="col-"]:not(:only-child) > .card:only-child, .row > [class*="col-"]:not(:only-child) > .featured-box:only-child { height: 100%; } /* --- 2. Card body as a vertical flex column --------------------------- Only for bodies that actually end in a call to action, so cards made of plain prose keep ordinary block layout and nothing shifts. Three shapes exist in this site: a) the CTA sits in a wrapper (
/

) that is the last child b) the CTA is a bare trailing .btn c) Porto's .pricing-block wraps the whole card (pricing plans) */ .card > .card-body:has(> :last-child > .btn), .card > .card-body:has(> .btn:last-child):not(:has(> .btn ~ .btn)), .card > .card-body:has(> .pricing-block), .featured-box > .box-content:has(> :last-child > .btn), .featured-box > .box-content:has(> .btn:last-child):not(:has(> .btn ~ .btn)) { display: flex; flex-direction: column; } /* --- 3. Let the content take the slack -------------------------------- */ .card > .card-body > .pricing-block { display: flex; flex-direction: column; flex: 1 1 auto; } /* --- 4. Floor the CTA -------------------------------------------------- */ .card > .card-body > :last-child:has(> .btn), .card > .card-body > .pricing-block > :last-child:has(> .btn), .card > .card-body > .btn:last-child, .featured-box > .box-content > :last-child:has(> .btn), .featured-box > .box-content > .btn:last-child { /* !important because these CTA wrappers carry Bootstrap .mt-4 utilities, which are themselves !important and would otherwise win. */ margin-top: auto !important; } /* A bare .btn turned into a flex item would stretch edge to edge, which is not what an inline-block button did before. Keep its natural width and honour the card's own alignment. */ .card > .card-body > .btn:last-child, .featured-box > .box-content > .btn:last-child { align-self: flex-start; } .card > .card-body.text-center > .btn:last-child, .featured-box > .box-content.text-center > .btn:last-child { align-self: center; } .card > .card-body.text-end > .btn:last-child, .featured-box > .box-content.text-end > .btn:last-child { align-self: flex-end; } } /* Equivalent buttons inside a repeated card group keep one height so the baseline is a baseline and not an approximation. */ .card .btn, .featured-box .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Counter captions. Porto's counter markup uses a bare

NapkinPrice

printed NAPKINPRICE, against the camel case the copy uses everywhere else. Where this design genuinely wants capitals it types them (the footer's PRODUCTS and COMPANY are literal caps in includes/footer.php), so nothing depends on the transform to produce them and turning it off cannot take a deliberate one away. -------------------------------------------------------------------------- */ h3 { text-transform: none; } /* -------------------------------------------------------------------------- C. Phones — <= 575.98px. Covers 320, 375 and 390 and everything between. -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { /* C1. Display type. The text-N scale never steps down, so the home hero sat at 45.5px on a 320px screen and broke "Your crew does the work." over four lines. The whole top of the ladder is re-stepped together so it stays monotonic — text-5 (1.5em) and below are already phone-sized and are left alone. */ .text-14 { font-size: 2.7em !important; } .text-13 { font-size: 2.6em !important; } .text-12-13, .text-12-5 { font-size: 2.55em !important; } .text-12 { font-size: 2.5em !important; } .text-11 { font-size: 2.35em !important; } .text-10 { font-size: 2.2em !important; } .text-9 { font-size: 2.05em !important; } .text-8 { font-size: 1.95em !important; } .text-7 { font-size: 1.85em !important; } .text-6-7, .text-6-5 { font-size: 1.78em !important; } /* Dropping text-6 a step also lets hello@tailgateoffice.com — the only unbreakable string in the copy — sit on one line at 375 and 390 instead of splitting mid-domain ("...OFFICE.C / OM"). */ .text-6 { font-size: 1.62em !important; } /* Big type must break rather than push the page sideways: product names, dollar figures and hyphenated compounds are the usual culprits. */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-wrap: break-word; } /* C2. Section rhythm. section-height-3/4 are 73px and 110px of padding top AND bottom — up to 220px of empty space per section on a phone. */ section.section { padding: 36px 0; margin: 18px 0; } section.section.section-height-1 { padding: 12px 0; } section.section.section-height-2 { padding: 26px 0; } section.section.section-height-3 { padding: 40px 0; } section.section.section-height-4 { padding: 48px 0; } section.section.section-height-5 { padding: 56px 0; } /* Three classes to out-specify Porto's `.page-header.page-header-modern.page-header-md { padding: 50px 0 }`. */ .page-header.page-header-modern.page-header-sm, .page-header.page-header-modern.page-header-md, .page-header.page-header-modern.page-header-lg, .page-header.page-header-modern { padding-top: 24px; padding-bottom: 24px; } /* C3. Touch targets. Porto's button padding left most buttons 32-43px tall against a 44px floor. No marketing button pairs an icon with a text label, so centring the label with inline-flex is safe. */ .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .btn.btn-block, .btn.w-100, .btn.d-block { display: flex; } /* The nav toggle measured 43 x 38. */ #header .header-btn-collapse-nav { min-width: 44px; min-height: 44px; padding-left: 12px; padding-right: 12px; } #header .header-nav-main nav > ul > li > a { min-height: 44px; display: flex; align-items: center; } /* C4. Forms. Inputs were 38-39px tall at 13.6px type: under the touch floor, and any font-size below 16px makes iOS Safari zoom the page on focus, which leaves the visitor scrolled sideways in a form. */ .form-control, .form-select { min-height: 46px; font-size: 16px; } textarea.form-control { min-height: 110px; } .input-group > .form-control, .input-group > .form-select { min-width: 0; } /* C5. Wide comparison tables. They already scroll inside .table-responsive; the problem was the inline `min-width` on the label column — 260px of a 296px scroller on /pricing/ and /compare/, so no data column was visible until you scrolled. */ .table-responsive > table > thead > tr > th:first-child { min-width: 160px !important; } .table-responsive { -webkit-overflow-scrolling: touch; } .table-responsive > table > thead > tr > th, .table-responsive > table > tbody > tr > td { padding-left: 8px; padding-right: 8px; } /* C6. Inline `max-width` on standfirst paragraphs (62ch) must not stop them shrinking. */ .page-header p[style*="max-width"] { max-width: 100% !important; } /* C7. Counters. Two-up at 320px is ~148px per cell, and the desktop counter type overran its own label. */ .counters .counter strong { font-size: 2.4em; line-height: 1.1; } .counters .counter label, .counters .counter .tg-counter-label { font-size: 1em; line-height: 1.25; } /* C8. Footer collapses to one column; centre the copyright rows and let the e-mail address wrap instead of widening the page. */ #footer .footer-copyright .row > [class*="col-"] { text-align: center; justify-content: center !important; } #footer a { overflow-wrap: break-word; word-wrap: break-word; } /* C9. Long unbreakable strings in body copy and code samples. */ p, li, td, th, dd, dt, blockquote { overflow-wrap: break-word; } pre { overflow-x: auto; max-width: 100%; } } /* -------------------------------------------------------------------------- D. Very small phones — <= 374.98px (320 and 360 class devices). -------------------------------------------------------------------------- */ @media (max-width: 374.98px) { .text-14, .text-13, .text-12-13, .text-12-5 { font-size: 2.3em !important; } .text-12 { font-size: 2.22em !important; } .text-11 { font-size: 2.12em !important; } .text-10 { font-size: 2.02em !important; } .text-9 { font-size: 1.92em !important; } .text-8 { font-size: 1.82em !important; } .text-7 { font-size: 1.72em !important; } .text-6-7, .text-6-5 { font-size: 1.62em !important; } .text-6 { font-size: 1.55em !important; } section.section.section-height-3 { padding: 34px 0; } section.section.section-height-4 { padding: 40px 0; } /* A 240px logo plus a 44px nav toggle plus gutters does not fit 320px. */ #header .header-logo img, .sticky-header-active #header .header-logo img { max-width: 188px; } .counters .counter strong { font-size: 2.1em; } .table-responsive > table > thead > tr > th:first-child { min-width: 140px !important; } } /* ========================================================================== NAVIGATION + INTERACTION STATES Three defects measured in the browser, not guessed: 1. theme.css line 31 ships `body a { outline: none !important }`, so no link, button or menu item on the site has ANY keyboard focus indicator (computed outline-style: none everywhere). WCAG 2.4.7. 2. Forcing :hover on the five top-level nav links changed nothing — colour #444, background transparent, border 0 before and after. The desktop menu had no hover affordance at all. 3. On phones a submenu can only be opened by a 30 x 34px chevron, which is under the 44px touch-target floor and reads as decoration. ========================================================================== */ /* -------------------------------------------------------------------------- N1. Focus ring. :focus-visible so pointer users never see it and keyboard users always do. Dark ink rather than orange because the same ring has to read on white cards, the grey page-header band and the orange bundle card. !important is required purely to beat Porto's blanket `outline: none`. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid #1B222B !important; outline-offset: 2px !important; } /* Bootstrap paints a 4px rgba(13,110,253,.25) halo on .nav-link and .btn at focus — a blue that is nowhere in this palette. The outline above is the indicator; drop the halo. */ .nav-link:focus, .nav-link:focus-visible, .btn:focus, .btn:focus-visible { box-shadow: none !important; } /* Browsers without :focus-visible fall back to :focus rather than nothing. */ @supports not selector(:focus-visible) { a:focus, button:focus, .btn:focus { outline: 3px solid #1B222B !important; outline-offset: 2px !important; } } /* Body links: keep the underline-on-hover the theme gives them and add a colour shift so the state is not carried by underline alone. */ .main a:not(.btn):hover, .main a:not(.btn):focus-visible { color: #9C5316; } /* Buttons: a pressed state, so click and tap get feedback as well as hover. :active only — .btn.active means "current", not "being pressed". */ .btn:active { transform: translateY(1px); } /* -------------------------------------------------------------------------- N2. Desktop menu (>= 992px), where the dropdowns open on hover. The transparent 2px border is on the resting state too, so nothing moves when the indicator appears. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #header .header-nav-main nav > ul > li > a { border-bottom: 2px solid transparent; transition: color .18s ease, border-bottom-color .18s ease; } #header .header-nav-main nav > ul > li:hover > a, #header .header-nav-main nav > ul > li.open > a, #header .header-nav-main nav > ul > li.accessibility-open > a, #header .header-nav-main nav > ul > li > a:hover, #header .header-nav-main nav > ul > li > a:focus, #header .header-nav-main nav > ul > li > a:focus-visible { color: #D9741F !important; background: transparent !important; border-bottom-color: #D9741F; } /* The page you are on stays marked while another item is hovered. */ #header .header-nav-main nav > ul > li > a.active { border-bottom-color: #D9741F; } /* Keyboard parity with hover: tabbing to the parent opens the panel even if the theme's JS never runs. Porto's own .accessibility-open class is listed above and does the same thing when it does. */ #header .header-nav-main nav > ul > li.dropdown:focus-within > .dropdown-menu { top: auto; display: block; opacity: 1; } /* Escape sets .tg-nav-closed; it must beat :hover and :focus-within, which is why it is last and matches on the same specificity. */ #header .header-nav-main nav > ul > li.dropdown.tg-nav-closed > .dropdown-menu { top: -10000px; opacity: 0; visibility: hidden; } /* Panel items need their own hover/focus, and #f8f9fa on white was not carrying it. */ #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li > a:hover, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li > a:focus, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li > a:focus-visible, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a { background-color: #FBF3EA !important; color: #9C5316 !important; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li > a:focus-visible { outline-offset: -3px !important; } } /* -------------------------------------------------------------------------- N3. Phone / tablet menu (<= 991px). Touch must not depend on hover, so the chevron becomes a real 52px control with its own divider and a rotation to show state. -------------------------------------------------------------------------- */ @media (max-width: 991px) { #header .header-btn-collapse-nav { min-width: 44px; min-height: 44px; } #header .header-nav-main nav > ul > li > a { min-height: 44px; display: flex; align-items: center; } /* Room for the chevron column so the label never sits under it. */ #header .header-nav-main nav > ul > li > a.dropdown-toggle { padding-right: 64px; } #header .header-nav-main nav > ul li a.dropdown-toggle .fa-chevron-down { width: 52px; min-height: 44px; font-size: 0.85rem; color: #D9741F; border-left: 1px solid #E4E8ED; transition: transform .18s ease; } #header .header-nav-main nav > ul > li.open > a.dropdown-toggle .fa-chevron-down { transform: rotate(180deg); } /* The active item is orange, so its chevron has to switch to white. */ #header .header-nav-main nav > ul > li > a.active .fa-chevron-down { color: #FFFFFF; border-left-color: rgba(255, 255, 255, 0.35); } /* Submenu rows are tap targets too. */ #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li > a { min-height: 44px; display: flex; align-items: center; } #header .header-nav-main nav > ul li > a:hover, #header .header-nav-main nav > ul li > a:focus-visible { color: #D9741F; } #header .header-nav-main nav > ul > li > a.active:hover, #header .header-nav-main nav > ul > li > a.active:focus-visible { color: #FFFFFF; } /* Porto caps the open menu at 50vh and scrolls it internally (theme.css:3473). Do not change that to overflow: visible — a long submenu then spills out of the panel and paints over the page. The scroller only needs momentum scrolling and a floor tall enough that a nine-item submenu is not reduced to a two-item slot on a short screen. */ #header .header-nav-main nav { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* The panel overlays the page, so its bottom edge has to read as an edge rather than as text that has been cut in half. The full-bleed white band is Porto's .header-nav-main:before. */ #header .header-nav-main:before { border-bottom: 1px solid #E4E8ED; box-shadow: 0 12px 22px rgba(27, 34, 43, 0.10); } } /* ========================================================================== TABLET + LARGE-DESKTOP STANDARDISATION — 768 / 1024 / 1440 / 1920 Every rule below answers a defect measured in the browser at one of those four widths. None of it redesigns a block; the point is that the same kind of block behaves the same way on every page. ========================================================================== */ /* -------------------------------------------------------------------------- T1. Whole-page horizontal scroll between 992px and 1199px, on all 30 pages. Porto parks a closed dropdown at `top: -10000px; left: auto` but leaves it `display: block` with `min-width: 200px`, so it still counts towards the document scroll width. The last top-level item ("Company") sits against the right edge of the 960px container, so its panel ended at x=1092 in a 1024px viewport: documentElement.scrollWidth 1092 against innerWidth 1024, measured on every page. Anchoring the last panel to its own right edge removes the 68px of scroll and stops that menu opening off-screen when it is hovered. -------------------------------------------------------------------------- */ @media (min-width: 992px) { #header .header-nav-main nav > ul > li.dropdown:last-child > .dropdown-menu { left: auto; right: 0; } } /* -------------------------------------------------------------------------- T2. The shared closing CTA band was inset from the rest of the page. `.call-to-action` ships `padding: 32px 55px`, and that 110px squeezes the `.container` sitting inside it: 658px against the page's 720px at 768, and 914px against 960px at 1024. The CTA headline and button therefore started 23-31px further in than every other section above them. The vertical padding is what the band needs; the horizontal padding is the container's job and it already does it. Above 1400px the container hits its 1140px cap first, which is why the misalignment only showed on tablet and small desktop. -------------------------------------------------------------------------- */ section.call-to-action { padding-left: 0; padding-right: 0; } /* -------------------------------------------------------------------------- T3. Dead band at the foot of every featured-box card, at all four widths. Porto gives `.featured-box` `margin: 20px auto`, and every one of them in this build also carries `h-100`. `height: 100%` resolves against a column whose own height already contains those 40px, so each box came out exactly 40px taller than its own content and hung 20px past the bottom of its column. On the home page that read as 90px of white under the last line of each product card where only the 48px of real padding belonged. -------------------------------------------------------------------------- */ .featured-box.h-100 { margin-top: 0; margin-bottom: 0; } /* -------------------------------------------------------------------------- T4. Section rhythm between 576px and 1199px. `section-height-3` is 73.8px and `section-height-4` is 110.8px of padding top AND bottom at every width, so a 768px page carried the same 148-222px band between sections as a 1920px one. Phones are already stepped down in block C; this fills the gap so the scale runs 40 -> 52 -> 62 -> 73 instead of jumping straight from 40 to 73. Top and bottom stay equal, which is what keeps the rhythm even. -------------------------------------------------------------------------- */ @media (min-width: 576px) and (max-width: 991.98px) { section.section.section-height-2 { padding-top: 30px; padding-bottom: 30px; } section.section.section-height-3 { padding-top: 52px; padding-bottom: 52px; } section.section.section-height-4 { padding-top: 64px; padding-bottom: 64px; } section.section.section-height-5 { padding-top: 80px; padding-bottom: 80px; } .page-header.page-header-modern.page-header-md { padding-top: 34px; padding-bottom: 34px; } } @media (min-width: 992px) and (max-width: 1199.98px) { section.section.section-height-3 { padding-top: 62px; padding-bottom: 62px; } section.section.section-height-4 { padding-top: 84px; padding-bottom: 84px; } section.section.section-height-5 { padding-top: 112px; padding-bottom: 112px; } .page-header.page-header-modern.page-header-md { padding-top: 42px; padding-bottom: 42px; } } /* -------------------------------------------------------------------------- T5. One size for the page-level primary call to action. The same button role was written `btn-px-4` on some pages and `btn-px-5` on others — 28px against 38.4px of horizontal padding — and on /, /trades/ and /for-agencies/ both variants appeared on the same page. `text-3 py-3` is what marks the large CTA role in this build, so it is the hook: every one of them now measures the same and a `btn-px-*` written alongside it is a no-op. -------------------------------------------------------------------------- */ .btn.btn-modern.text-3.py-3 { padding-left: 1.75rem; padding-right: 1.75rem; } /* -------------------------------------------------------------------------- T6. Four-across card grids that end in a call to action. /trades/ and /contact/ put a full-width outline button at the foot of each card in a `col-md-6 col-lg-3` grid. At 992-1199px that column gives the card 166px of body width, so the labels broke over two lines and "Open the Landscaping & Lawn page" over three: buttons in the same row measured 63px and 80px and their top edges no longer lined up, on top of two-line card headings and three-word text lines. Those two grids now hold at two-across until 1200px, where there is room for four. Item counts are 8 and 4, so the last row is full at every width: 4x2 then 2x4, and 2x2 then 1x4. Only these two grids move; the other `col-md-6 col-lg-3` rows on the site carry short stat tiles that read fine four-across at 1024. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- T7. Card CTAs that carry a note line under them. The baseline block above floors a card's call to action when the CTA is the last thing in the body. Eight pages use a second shape — a bare `.btn` with one small note paragraph beneath it ("Or pick a single tool on the pricing page", "Urgent? (240) 555-0161") — and that pair was left floating wherever the body copy happened to end. On /contact/ at 1024 the three "reasons people get in touch" cards were equal height but their buttons sat at three different heights, 50px apart, because one card's paragraph ran a line longer and its heading wrapped. Sending the button and its note to the floor as a unit puts them back on one baseline. Gated at >= 768px, where cards share a row; below that they stack and natural height is correct. -------------------------------------------------------------------------- */ @media (min-width: 768px) { .card > .card-body:has(> .btn + p:last-child), .featured-box > .box-content:has(> .btn + p:last-child) { display: flex; flex-direction: column; } .card > .card-body > .btn:has(+ p:last-child), .featured-box > .box-content > .btn:has(+ p:last-child) { margin-top: auto; align-self: flex-start; } .card > .card-body.text-center > .btn:has(+ p:last-child), .featured-box > .box-content.text-center > .btn:has(+ p:last-child) { align-self: center; } .card > .card-body.text-end > .btn:has(+ p:last-child), .featured-box > .box-content.text-end > .btn:has(+ p:last-child) { align-self: flex-end; } } /* ========================================================================== FOOTER INTERACTIVE STATES One shared treatment for every interactive element in the footer, applied here rather than per page. Two real defects this replaces: 1. Porto ships `#footer a.link-hover-style-1:hover { left: 3px }` — the product and company links physically slid 3px right on hover. That is the "visually unstable" behaviour the brief rules out, so the offset is cancelled and the affordance moved to colour + underline, neither of which affects layout. 2. The previous hover colour #D9741F measures 2.95:1 on the #FBF3EA footer and 2.72:1 on the #F6E9D9 copyright bar — below AA for body text. #9C5316 measures 5.22:1 and 4.80:1 respectively. Rules that apply throughout: - colour and underline only; no font-weight, size, position or transform change, so nothing reflows and no link changes width - 170ms ease transitions - :focus-visible reuses the site-wide navy ring so keyboard focus looks the same everywhere - :active gives a darker press state, which is what touch devices show - hover never carries information that is not already in the text ========================================================================== */ /* --- Text links: nav, product, company, compliance, phone, email ---------- Selectors mirror Porto's own `:not(.btn):not(.no-footer-css)` exactly. Its stock rule set hover to var(--light) — WHITE text on the cream footer, about 1.05:1, so the link effectively vanished under the cursor. A shorter selector loses to it on specificity, which is why the previous override never took. */ #footer a:not(.btn):not(.no-footer-css) { color: #3A4552; text-decoration: none; transition: color 170ms ease; } #footer a:not(.btn):not(.no-footer-css):hover, #footer a:not(.btn):not(.no-footer-css):focus, #footer a:not(.btn):not(.no-footer-css):focus-visible, #footer a:not(.btn):not(.no-footer-css):active { text-decoration: none; } #footer a:not(.btn):not(.no-footer-css):hover, #footer a:not(.btn):not(.no-footer-css):focus, #footer a:not(.btn):not(.no-footer-css):focus-visible { color: #9C5316; } #footer a:not(.btn):not(.no-footer-css):active { color: #7E430F; } /* A link INSIDE running text (the parent-company link in the copyright line) is underlined at rest. The footer's link colour and the copyright text sit well under 3:1 apart, so without the underline nothing marks it as a link (WCAG 1.4.1). Written with the same :not() pair as the rules above so it outranks their `text-decoration: none`, on hover included. */ #footer a.footer-inline-link:not(.btn):not(.no-footer-css), #footer a.footer-inline-link:not(.btn):not(.no-footer-css):hover, #footer a.footer-inline-link:not(.btn):not(.no-footer-css):focus-visible { text-decoration: underline; text-underline-offset: 0.15em; } /* Cancel Porto's positional nudge. `left` is the only property it animates, so zeroing it leaves the element exactly where it renders at rest. */ #footer a:not(.btn):not(.no-footer-css).link-hover-style-1, #footer a:not(.btn):not(.no-footer-css).link-hover-style-1:hover { left: 0; /* Restated here because Porto's .link-hover-style-1 rule carries an extra class and would otherwise keep its own `all 0.1s ease-in-out`, which also animates properties we do not want transitioned. */ transition: color 170ms ease; } /* Bullet and contact icons follow their own link, so the whole row reads as one target. Colour only — the icon box never moves. */ #footer .list-icons li i { transition: color 170ms ease; } #footer .list-icons li:hover i, #footer .list-icons li:focus-within i { color: #9C5316; } /* The phone number is the largest link in the footer and sits on its own. */ #footer .footer-phone, #footer a[href^="tel:"], #footer a[href^="mailto:"] { font-weight: 600; } /* --- "Get in Touch" ribbon ------------------------------------------------ Now a real link to the contact page. It is a solid orange tab, so the state change is a fill darken rather than a text colour change. */ #footer .footer-ribbon a { color: #FFFFFF; display: block; text-decoration: none; transition: background-color 170ms ease; } #footer .footer-ribbon { transition: background-color 170ms ease; } #footer .footer-ribbon:hover, #footer .footer-ribbon:focus-within { background: #9C5316; } #footer .footer-ribbon a:hover, #footer .footer-ribbon a:focus-visible, #footer .footer-ribbon a:active { color: #FFFFFF; text-decoration: none; } #footer .footer-ribbon:active { background: #7E430F; } #footer .footer-ribbon a:focus-visible { outline: 3px solid #1B222B; outline-offset: 2px; } /* --- Footer buttons ------------------------------------------------------- */ #footer .btn { transition: background-color 170ms ease, border-color 170ms ease, color 170ms ease; } #footer .btn:active { transform: none; } /* ========================================================================== BACK-TO-TOP BUTTON Porto's theme.init.js injects `a.scroll-to-top` on scroll, but its stock styling is a 9px-tall #404040 sliver welded to the bottom edge — effectively invisible, and a dark surface this site does not use. Rebuilt as a real 44x44 target in brand orange. ========================================================================== */ html .scroll-to-top { background: #C76A1C; color: #FFFFFF; box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius: 6px; bottom: 24px; right: 24px; left: auto; margin: 0; padding: 0; box-shadow: 0 4px 14px rgba(27, 34, 43, 0.22); transition: background-color 170ms ease, opacity 170ms ease, box-shadow 170ms ease; } html .scroll-to-top.visible { opacity: 1; } html .scroll-to-top:hover, html .scroll-to-top:focus-visible { background: #9C5316; color: #FFFFFF; opacity: 1; box-shadow: 0 6px 18px rgba(27, 34, 43, 0.28); } html .scroll-to-top:active { background: #7E430F; box-shadow: 0 2px 8px rgba(27, 34, 43, 0.24); } html .scroll-to-top:focus-visible { outline: 3px solid #1B222B; outline-offset: 2px; } html .scroll-to-top i { line-height: 44px; font-size: 15px; } html .scroll-to-top span { display: none; } /* Porto hides it on phones by default; a long marketing page is exactly where it earns its keep, so it stays — nudged in so it clears thumb reach. */ html .scroll-to-top.hidden-mobile { /* !important only to beat Porto's own `display: none !important`. */ display: block !important; } @media (max-width: 575.98px) { html .scroll-to-top { bottom: 16px; right: 16px; } } @media (prefers-reduced-motion: reduce) { /* Specificity mirrors the rules above, including the .link-hover-style-1 variant, or those links keep transitioning. */ #footer a:not(.btn):not(.no-footer-css), #footer a:not(.btn):not(.no-footer-css).link-hover-style-1, #footer a:not(.btn):not(.no-footer-css).link-hover-style-1:hover, #footer .list-icons li i, #footer .footer-ribbon, #footer .footer-ribbon a, #footer .btn, html .scroll-to-top { transition: none; } } /* ========================================================================== MOBILE MENU — remove the row dividers Porto draws a 1px #E8E8E8 rule under every top-level row and a var(--grey-100) rule under every submenu row, so the open menu reads as a stack of bordered boxes. Rows are already 44px tall with their own padding, so they stay distinct without the lines. The panel keeps its own outer edge (below) so it does not bleed into the page behind it. ========================================================================== */ @media (max-width: 991.98px) { #header .header-nav-main nav > ul > li, #header .header-nav-main nav > ul > li > a, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a { border: 0; } /* The chevron that opens a submenu keeps a single hairline on its left — it is the only thing distinguishing a tap-to-open control from the link beside it, so removing that one would cost real usability. */ #header .header-nav-main nav > ul > li.dropdown > a:after { border-left: 1px solid #EDEFF2; } } /* Pricing cards (/pricing/): every "Start Free Trial" button sits at the same height across the row. pricing.php makes each card body a flex column and pushes the button block to the bottom with mt-auto; the caption under each button then reserves two lines, so a caption that wraps in a narrow column ("14 days free · no card required") cannot lift its button above the others. */ .tg-plan-cta-note { line-height: 1.5; min-height: 3em; } /* Pricing cards: the Bundle's "Most contractors pick this" sits on the card's top edge instead of inside it, so it takes no height. The Bundle sits alone beneath the four product cards, so its head is not equalised with theirs. */ .tg-plan-row .card { overflow: visible; } .tg-plan-ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap; background: #212529; color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; padding: 0.55em 1.1em; border-radius: 999px; } /* The name and tagline block the pricing script equalises. flow-root keeps the tagline's bottom margin inside the block for every card; without it the margin escaped only from the tallest card and its price sat 8px lower. */ .tg-plan-head { display: flow-root; } /* The Your Trade dropdown, in columns. ----------------------------------------------------------------------- It used to carry a curated eight and fitted in one column. It now carries every built trade — twenty-two and rising toward thirty-three — which in a single column runs off the bottom of a laptop screen and cannot be reached. column-count rather than a grid or a flex row: the markup stays exactly the one