/*----------------------------------------*/ /* Project overrides /* Loaded last, after responsive.css. /* Every deviation from the stock vendor template lives here so the /* vendor stylesheets stay untouched. /*----------------------------------------*/ /*----------------------------------------*/ /* 01 - Inline "bottom text" callout /*----------------------------------------*/ /* The pill has margin-right:5px but the trailing link had no margin-left, so the sentence ran straight into it ("...solution.View All"). */ .cacc-bottom-text .cacc-custom-button-link { margin-left: 6px; } /* .service-four is the only Homepage-04 section with no desktop padding of its own (compare .about-us-sec-four 120px, .why-choose-us-sec-four 85px), and .cacc-bottom-text.style-2 zeroes the component's own padding. While this section sat directly under the hero that left the intro line flush against it and it needed 80px here. It now follows .about-us-sec-four, whose 150px padding-bottom already separates the two -- stacking 80px on top produced a 230px void against roughly 105px at the neighbouring seams. So only a small nudge is needed. Scoped to >1200px on purpose: responsive.css already sets 20px (<=1200) and 40px (<=1024), and because this file loads last an unscoped rule would beat both of those. */ @media (min-width: 1201px) { .service-four .cacc-bottom-text.style-2 { padding-top: 10px; } } /*----------------------------------------*/ /* 02 - Line-art service icons /*----------------------------------------*/ /* The icons in images/svg/ are stroke-based (fill="none" + stroke), unlike the template's fill-based ones. shortcode.css:2945 sets `fill` on svg/g, and a CSS declaration beats the SVG's own fill="none" presentation attribute -- which would flood the line art solid. So hold fill at none and drive the stroke instead, giving the same dark -> white hover the fill-based icons have. Shapes carrying their own fill (the #F39A38 accents, the #fff masks) are untouched, exactly as the orange accents in the stock icons stay orange on hover. */ .cacc-service-style-3 .cacc-svg-line-icon svg, .cacc-service-style-3 .cacc-svg-line-icon svg g { fill: none; stroke: var(--cacc-blackish-color); -webkit-transition: stroke .1s ease-in-out; transition: stroke .1s ease-in-out; } .cacc-service-style-3:hover .cacc-svg-line-icon svg, .cacc-service-style-3:hover .cacc-svg-line-icon svg g { fill: none; stroke: var(--cacc-white-color); } /* The stock rule clamps service titles to a single line (display:-webkit-box + line-clamp:1 + ellipsis), which truncated "Making Tax Digital for income tax" and left no room for the arrow. Normal flow instead, centred, with the arrow stacked underneath. */ .cacc-service-style-3 .cacc-service-title, .cacc-service-style-3 .cacc-service-title a { display: block; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; line-clamp: unset; } /* Whole card is the click target: a transparent link stretched over .conclusion-post-item (position:relative in shortcode.css). z-index:3 puts it above the icon (1) and the arrow (2) so a click anywhere lands on it. aria-hidden + tabindex="-1" keep it out of the accessibility tree -- the title link remains the single announced, focusable link per card. */ .cacc-service-style-3 .cacc-service-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; border-radius: 7px; display: block; } /* Click affordance: a bare arrow pinned to the card's top-right corner. It is its own to the same page rather than part of the title link, so it can be positioned against the card instead of the run of text; aria-hidden + tabindex="-1" keep it out of the accessibility tree, leaving the title as the single announced link. It anchors to .cacc-box-content-wrap (position:relative in shortcode.css), which spans the card's padded area -- so 0/0 lands inside the 30px padding rather than flush to the card edge. z-index:2, not 1: .cacc-service-icon is a full-width block at z-index:1 and comes later in the DOM, so at equal z-index it painted over the corner and swallowed the clicks. */ .cacc-service-style-3 .cacc-service-arrow { position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 15px; line-height: 1; color: #9AA3A8; -webkit-transition: all .4s ease; transition: all .4s ease; } .cacc-service-style-3:hover .cacc-service-arrow { color: var(--cacc-white-color); -webkit-transform: translate(3px, -3px); transform: translate(3px, -3px); } @media (max-width: 767px) { .cacc-service-style-3 .cacc-service-arrow { width: 20px; height: 20px; font-size: 14px; } } /*----------------------------------------*/ /* 03 - Business / Personal services tabs /*----------------------------------------*/ /* .cacc-tabs-links has no top spacing of its own, so the bar (and the full-bleed white strip its :before draws) ran straight into the "Our Services" line above it. */ .cacc-services-tabs { margin-top: 50px; } /* Below 768px responsive.css turns the tab bar into `display:block`, which stacks the tabs. That suits the stock four-tab bar, but with only two short labels they read better side by side, so keep the flex row. It also adds its own margin-top:50px there, which would double up with the wrapper margin above. */ @media (max-width: 767px) { /* responsive.css sets flex-direction:column-reverse here, because the stock demo put the