/* True Technologies — custom UI upgrades */
/* Prevent a horizontal scrollbar: AOS "fade-left/right" elements start shifted
~100px sideways before they animate into view, and the off-canvas mobile menu
sits off to the side — both can push the page a few dozen px wide.
Use `overflow-x: clip` (NOT `hidden`): `hidden` turns the root into its own
scroll container, which silently kills `scroll-snap-type` and sticky
positioning; `clip` trims the horizontal overflow without hijacking the
scroller, so the section snapping below actually works. */
html,
body {
overflow-x: clip;
}
/* Keep the site in light mode even when the phone/browser is set to dark.
The in each page's
is the primary opt-out from Chrome/Samsung "auto dark theme"; this reinforces
it and keeps native form controls, selects and scrollbars light too. Without
it, dark mode darkens the page while the (non-transparent) logo keeps its
white background, so the logo shows up as a white box. */
:root {
color-scheme: only light;
}
/* ----- Package containers ----- */
.p-4.border.rounded.h-100.d-flex.flex-column.justify-content-center {
background-color: #f8f9fa;
}
/* Fibre & wireless package boxes — white cards with a subtle blue glow and
softer rounded corners, sitting on their light section. */
.fibre-package-section .p-4.border.rounded.h-100,
.package-cards .p-4.border.rounded.h-100 {
background-color: #ffffff !important;
border-radius: 1rem !important;
border-color: rgba(47, 128, 201, 0.14) !important;
box-shadow: 0 0 22px rgba(47, 128, 201, 0.14);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fibre-package-section .p-4.border.rounded.h-100:hover,
.package-cards .p-4.border.rounded.h-100:hover {
transform: translateY(-4px);
box-shadow: 0 0 32px rgba(47, 128, 201, 0.26);
}
/* ----- Buttons ----- */
.btn {
font-weight: 600;
letter-spacing: 0.3px;
border-radius: 0.5rem;
border-width: 2px;
padding: 0.65rem 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
transition: transform 0.18s ease, box-shadow 0.22s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
position: relative;
overflow: hidden;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}
.btn:active,
.btn:not(:disabled):not(.disabled):active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.btn:focus,
.btn.focus {
outline: none;
box-shadow: 0 0 0 0.18rem rgba(33, 102, 172, 0.30), 0 4px 10px rgba(0, 0, 0, 0.08);
}
.site-section-cover.home-hero,
.site-section-cover.about-hero {
position: relative;
overflow: hidden;
background-position: center center;
}
/* Wireless/fibre open with a text intro (no hero banner); the template's 7rem
section padding leaves a large hole under the sticky header - tighten it. */
#wireless-intro,
#fibre-intro {
padding-top: 2rem;
}
/* Compact sign-up form: field labels are visually hidden (sr-only - the
placeholders carry them, labels stay for screen readers), and the template's
chunky 55px inputs are slimmed so the form takes far less vertical space. */
.signup-form .form-control {
height: 46px;
font-size: 0.95rem;
}
.signup-form textarea.form-control {
height: auto;
}
.signup-form .form-group.row > [class*="col-"] {
margin-bottom: 0.4rem !important;
}
/* Gentle scroll snapping site-wide: sections settle to the top of the screen
when you stop scrolling near a boundary ("proximity" - never traps you the
way "mandatory" would on sections taller than the viewport), and anchor
jumps glide instead of teleporting.
scroll-padding-top MUST match the sticky header's height, or a snapped
section's top ends up hidden behind it. Measured heights of the scrolled
(shrunk, position:fixed) header: ~120px on desktop, ~68px on tablet/mobile
where the logo is hidden. We pad a touch beyond each so the heading clears
the header with a small breathing gap. main.js reads this same value for
its nav-link scroll, so the JS jump and the CSS snap land on the exact same
spot instead of fighting each other (that fight was the "jerk"). */
html {
scroll-behavior: smooth;
scroll-snap-type: y proximity;
scroll-padding-top: 128px;
}
@media (max-width: 991.98px) {
html { scroll-padding-top: 76px; }
}
.site-section,
.site-section-cover,
.site-footer {
scroll-snap-align: start;
/* Halt at each section's top even on a fast flick, so you can't overshoot
past a section boundary without it stopping there first. */
scroll-snap-stop: always;
}
/* Slim footer: the template ships 8em top+bottom padding for a 4-column
footer; now that it's just legal links + copyright, tighten it right down
and colour it to match the cookie-consent bar (navy #0f2d4d). */
.site-footer {
padding: 2.25em 0 !important;
background: #0f2d4d !important;
}
.site-footer p {
color: #9fb0c2;
}
.site-footer .footer-legal {
margin-bottom: 0.35rem;
}
.site-footer .footer-legal a {
color: #cfd6de;
}
.site-footer .footer-legal a:hover {
color: #fff;
}
/* Reduce excessive white space between sections. The template pads every
.site-section with 7rem top+bottom (~112px each) on desktop, so ~224px of
dead space stacks up between sections. Tighten to a calmer rhythm. */
.site-section {
padding: 4rem 0;
}
@media (max-width: 991.98px) {
.site-section {
padding: 2.75rem 0;
}
}
/* Floating "back to top" button (injected site-wide by main.js). Hidden until
the visitor scrolls down, then fades in bottom-right. */
#tt-back-to-top {
position: fixed;
right: 20px;
bottom: 24px;
z-index: 1090;
width: 46px;
height: 46px;
padding: 0;
border: none;
border-radius: 50%;
background: #15467e;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
}
#tt-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
#tt-back-to-top:hover,
#tt-back-to-top:focus {
background: #0f3a68;
outline: none;
}
/* Every image banner site-wide (About/FAQ heroes + the "get connected" CTA
banners) gets the same brand-blue wash as the home hero, replacing the
template's grey/black overlays. */
.site-section-cover.overlay:before,
.site-section-cover.home-hero.overlay:before,
.site-section-cover.about-hero.overlay:before {
background: linear-gradient(180deg, rgba(21, 70, 126, 0.42) 0%, rgba(21, 70, 126, 0.28) 100%);
}
/* Service icons brought up into the dark hero, rendered white. The selector is
extra-specific to beat the template's .site-section-cover.home-hero img rule. */
.site-section-cover.home-hero .home-hero-logo {
width: auto;
max-width: 460px;
}
/* Brand-blue overlay over the dark banner: ties it to the brand palette and
keeps it dark enough for the white logo, text and icons to stay crisp. */
.site-section-cover.home-hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(21, 70, 126, 0.42) 0%, rgba(21, 70, 126, 0.28) 100%);
z-index: 1;
pointer-events: none;
}
.site-section-cover.home-hero > .container {
position: relative;
z-index: 2;
}
.home-hero .home-hero-offers {
margin-top: 1.75rem !important;
}
.site-section-cover.home-hero .offer-icon {
max-height: 58px !important;
filter: brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
transition: transform 0.25s ease;
}
.site-section-cover.home-hero .offer-link:hover .offer-icon {
transform: translateY(-5px);
}
.home-hero .home-hero-offers h3 {
font-size: 0.92rem;
font-weight: 700;
}
.home-hero .home-hero-offer-text {
color: rgba(255, 255, 255, 0.85);
font-size: 0.82rem;
line-height: 1.3;
}
/* Phones: five col-6 items wrap 2-2-1; let the odd one out span the full
width so the last row reads as deliberate rather than ragged. The template
pins the hero to 100vh, which the 5-icon stack outgrows on small screens -
let it size to its content instead so nothing spills past the wave. */
@media (max-width: 767.98px) {
.home-hero .home-hero-offers > div:last-child {
flex: 0 0 100%;
max-width: 100%;
}
.site-section-cover.home-hero,
.site-section-cover.home-hero .container,
.site-section-cover.home-hero .container > .row {
height: auto !important;
min-height: 0 !important;
}
.site-section-cover.home-hero {
padding: 110px 0 160px; /* clearance for the sticky header + bottom wave */
}
/* The 460px logo cap overrides img-fluid's 100% - restore it on phones. */
.site-section-cover.home-hero .home-hero-logo {
max-width: 100%;
}
}
/* On smaller screens, background-attachment: fixed misbehaves and the
image is no longer centred. Pin it to scroll + centre so the banner
stays centralised, matching the services page hero. */
@media (max-width: 991.98px) {
.site-section-cover.home-hero,
.site-section-cover.about-hero {
background-attachment: scroll !important;
background-position: center center !important;
background-size: cover !important;
}
}
/* On smaller screens the logo is fixed at 120px tall inline, which makes
the white header eat a lot of vertical space. Shrink the logo and tighten
the navbar padding so the header stays compact. */
@media (max-width: 991.98px) {
.site-navbar {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
.site-navbar .site-logo img {
height: 64px !important;
width: auto !important;
}
}
/* On smaller screens, once the page is scrolled (the sticky header gains
the .shrink class) hide the logo header but keep the menu toggle (the
task-bar dropdown) visible and tappable. */
@media (max-width: 991.98px) {
.site-navbar.shrink .site-logo {
display: none !important;
}
.site-navbar.shrink {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
.site-navbar.shrink .container .row {
min-height: 44px;
}
/* keep the toggle vertically centred now that the logo is gone */
.site-navbar.shrink .toggle-button {
top: 50%;
transform: translateY(-50%);
}
}
.svc-hero-wave {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
width: 100%;
height: 70px;
display: block;
z-index: 1;
}
/* Subtle shimmer sweep on hover */
.btn::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transform: skewX(-22deg);
transition: left 0.55s ease;
pointer-events: none;
}
.btn:hover::after {
left: 125%;
}
/* Larger buttons get more breathing room */
.btn-lg {
padding: 0.85rem 2rem;
font-size: 1.05rem;
}
.btn-sm {
padding: 0.4rem 1rem;
}
/* Make .btn-block taller/easier to tap */
.btn-block {
padding-top: 0.95rem;
padding-bottom: 0.95rem;
}
/* Solid primary — warm glow on hover */
.btn-primary:hover {
box-shadow: 0 8px 22px rgba(33, 102, 172, 0.40);
}
/* Outline primary — fill on hover */
.btn-outline-primary {
background-color: transparent;
}
.btn-outline-primary:hover {
box-shadow: 0 8px 18px rgba(33, 102, 172, 0.25);
}
/* White outline (used on dark hero backgrounds) */
.btn-white-outline:hover {
box-shadow: 0 8px 18px rgba(255, 255, 255, 0.25);
}
/* Secondary / Close button */
.btn-secondary:hover {
box-shadow: 0 8px 18px rgba(108, 117, 125, 0.30);
}
/* Disabled buttons shouldn't lift */
.btn:disabled,
.btn.disabled {
transform: none !important;
box-shadow: none !important;
opacity: 0.55;
}
.btn:disabled::after,
.btn.disabled::after {
display: none;
}
/* Submit inputs (used in forms) */
input[type="submit"].btn {
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.95rem;
}
.fibre-toggle-row {
border: 1px solid rgba(21, 70, 126, 0.16);
border-radius: 1rem;
padding: 0.3rem;
background: #ffffff;
box-shadow: 0 10px 35px rgba(21, 70, 126, 0.05);
}
/* Inactive fibre toggle should be white, not transparent */
.fibre-toggle.btn-outline-primary {
background-color: #ffffff;
}
.fibre-toggle-row .btn {
min-height: 62px;
font-size: 1rem;
}
.fibre-toggle-row .btn + .btn {
margin-left: 0.75rem;
}
@media (max-width: 575.98px) {
.fibre-toggle-row {
flex-direction: column;
}
.fibre-toggle-row .btn + .btn {
margin-left: 0;
margin-top: 0.75rem;
}
}
.fibre-section-box {
border: 1px solid rgba(21, 70, 126, 0.12);
border-radius: 1rem;
padding: 1.6rem 1.5rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
background: #ffffff;
}
.fibre-section-box.active {
border-color: #15467e;
box-shadow: 0 0 0 1px rgba(21, 70, 126, 0.14), 0 20px 40px rgba(21, 70, 126, 0.08);
}
/* ----- Social cards (Get In Touch Online) ----- */
.social-card {
background: #fff;
border: 1px solid #eaf0f7;
border-radius: 1.5rem !important;
box-shadow: 0 8px 28px rgba(21, 70, 126, 0.15);
transition: transform 0.22s ease, box-shadow 0.22s ease;
min-height: 100%;
}
.social-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(21, 70, 126, 0.26);
}
.social-card-icon {
width: 96px;
height: 96px;
object-fit: contain;
border-radius: 50%;
background: #fff;
padding: 8px;
}
.social-card p {
font-size: 1rem;
color: #5a6268;
}
.social-card .btn {
max-width: 280px;
width: 100%;
}
/* ----- Team carousel (Meet Our Team) ----- */
.team-card {
text-align: center;
padding: 0.5rem;
}
.team-photo {
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 1rem;
display: block;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
transition: transform 0.25s ease, box-shadow 0.25s ease;
background: #f3f3f3;
}
.team-photo:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
.team-photo-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #c4c4c4;
font-size: 100px;
}
.team-marquee {
overflow: hidden;
position: relative;
padding: 1rem 0;
width: 100%;
/* contain layout/paint so this section can't trigger reflow of the rest of the page */
contain: content;
}
.team-track {
display: flex;
flex-wrap: nowrap;
width: max-content;
/* GPU-friendly hints */
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
/* Auto-scroll enabled by default — runs continuously to the right */
animation: team-marquee 60s linear infinite;
animation-direction: normal;
transition: animation-duration 0.3s ease, animation-direction 0.5s ease;
}
.team-marquee:hover .team-track {
animation-duration: 60s;
}
.team-marquee.scroll-left .team-track {
animation-direction: reverse;
}
.team-track > .team-card {
flex: 0 0 auto;
width: 220px;
/* margin-right (not gap) so the full cycle distance is exactly half the track width — seamless loop */
margin-right: 24px;
}
.team-marquee:focus-within .team-track {
animation-play-state: paused;
}
@keyframes team-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes team-marquee-reverse {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.team-track { animation: none; }
}
/* ----- Brands carousel ----- */
.brands-marquee {
overflow: hidden;
position: relative;
padding: 1rem 0;
width: 100%;
contain: content;
}
.brands-track {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: max-content;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
animation: brands-marquee 60s linear infinite;
}
.brands-track > .brand-logo {
flex: 0 0 auto;
height: 160px;
margin: 0;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: center;
}
.brand-logo img {
display: block;
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
filter: grayscale(60%);
opacity: 0.78;
/* per-logo size compensation: each logo can override --logo-scale (zoom into the visible art)
and --logo-width (cap container width on very-wide logos like Dyness / Micropoint). */
--logo-scale: 1;
transform: scale(var(--logo-scale));
transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.brands-marquee:hover .brand-logo img,
.brands-marquee:focus-within .brand-logo img {
opacity: 0.95;
}
.brand-logo:hover img {
filter: grayscale(0%);
opacity: 1;
transform: scale(calc(var(--logo-scale) * 1.08));
}
/* --- Cap container width on very wide logos so they don't dominate the row --- */
.brand-logo img[alt="Dyness"] { height: auto; width: 260px; max-height: 100%; }
.brand-logo img[alt="Micropoint SA"] { height: auto; width: 220px; max-height: 100%; }
/* --- Scale up logos whose PNGs have lots of internal whitespace (visible art appears small) --- */
.brand-logo img[alt="EcoFlow"] { --logo-scale: 1.45; }
.brand-logo img[alt="Acer"] { --logo-scale: 1.10; }
.brand-logo img[alt="Brother"] { --logo-scale: 1.15; }
.brand-logo img[alt="ESET NOD32"] { --logo-scale: 1.15; }
.brand-logo img[alt="HP"] { --logo-scale: 1.20; }
.brand-logo img[alt="RCT"] { --logo-scale: 1.15; }
.brand-logo img[alt="MikroTik"] { --logo-scale: 1.10; }
.brand-logo img[alt="Intel"] { --logo-scale: 1.05; }
.brand-logo img[alt="AMD"] { --logo-scale: 1.05; }
.brand-logo img[alt="NVIDIA"] { --logo-scale: 1.05; }
/* --- Scale down logos whose PNGs are tightly cropped (visible art fills the canvas) --- */
.brand-logo img[alt="Apple"] { --logo-scale: 0.85; }
.brand-logo img[alt="Microsoft"] { --logo-scale: 0.95; }
.brand-logo img[alt="Samsung"] { --logo-scale: 0.95; }
.brand-logo img[alt="Kaspersky"] { --logo-scale: 0.92; }
.brand-logo img[alt="Toshiba"] { --logo-scale: 0.90; }
.brand-logo img[alt="Western Digital"] { --logo-scale: 0.90; }
.brands-marquee:hover .brands-track,
.brands-marquee:focus-within .brands-track {
animation-play-state: paused;
}
@keyframes brands-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 768px) {
.brands-track > .brand-logo {
height: 110px;
}
}
@media (prefers-reduced-motion: reduce) {
.brands-track { animation: none; }
}
.team-name {
font-weight: 700;
margin: 0;
color: #333;
font-size: 1.25rem;
}
.team-role {
font-size: 0.95rem;
color: #999;
margin: 0;
}
/* ----- Navbar dropdown ----- */
/* style.css forces white-ish text on every .sticky-wrapper .site-navbar ul li a
(line 742) which leaks into the "Get Connected!" dropdown items, making them
invisible against the white dropdown background. Force them dark. */
.sticky-wrapper .site-navbar .site-navigation .site-menu .has-children .dropdown li a,
.sticky-wrapper.is-sticky .site-navbar .site-navigation .site-menu .has-children .dropdown li a {
color: #343a40 !important;
}
.sticky-wrapper .site-navbar .site-navigation .site-menu .has-children .dropdown li a:hover,
.sticky-wrapper .site-navbar .site-navigation .site-menu .has-children .dropdown li a:focus,
.sticky-wrapper.is-sticky .site-navbar .site-navigation .site-menu .has-children .dropdown li a:hover,
.sticky-wrapper.is-sticky .site-navbar .site-navigation .site-menu .has-children .dropdown li a:focus {
color: #15467e !important;
background: #f4f5f9 !important;
}
/* ----- Time Machine: expand toggle + grid gallery + lightbox carousel ----- */
/* Star button — adapted from a uiverse.io shooting-stars button, recoloured to brand blue */
.tm-star-btn {
position: relative;
display: inline-block;
padding: 18px 50px;
background: #15467e;
font-size: 28px;
font-weight: 600;
color: #ffffff;
border: 4px solid #15467e;
border-radius: 10px;
box-shadow: 0 0 0 rgba(21, 70, 126, 0.55);
transition: all 0.3s ease-in-out;
cursor: pointer;
font-family: inherit;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tm-star-btn .tm-toggle-label {
position: relative;
z-index: 1;
}
.tm-star-btn .star-1 {
position: absolute;
top: 20%;
left: 20%;
width: 38px;
height: auto;
filter: drop-shadow(0 0 0 #15467e);
z-index: -5;
transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}
.tm-star-btn .star-2 {
position: absolute;
top: 45%;
left: 45%;
width: 22px;
height: auto;
filter: drop-shadow(0 0 0 #15467e);
z-index: -5;
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.tm-star-btn .star-3 {
position: absolute;
top: 40%;
left: 40%;
width: 8px;
height: auto;
filter: drop-shadow(0 0 0 #15467e);
z-index: -5;
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.tm-star-btn .star-4 {
position: absolute;
top: 20%;
left: 40%;
width: 12px;
height: auto;
filter: drop-shadow(0 0 0 #15467e);
z-index: -5;
transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}
.tm-star-btn .star-5 {
position: absolute;
top: 25%;
left: 45%;
width: 22px;
height: auto;
filter: drop-shadow(0 0 0 #15467e);
z-index: -5;
transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
}
.tm-star-btn .star-6 {
position: absolute;
top: 5%;
left: 50%;
width: 8px;
height: auto;
filter: drop-shadow(0 0 0 #15467e);
z-index: -5;
transition: all 0.8s ease;
}
.tm-star-btn:hover {
background: transparent;
color: #15467e;
box-shadow: 0 0 35px rgba(21, 70, 126, 0.55);
}
.tm-star-btn:hover .star-1 {
top: -80%;
left: -30%;
filter: drop-shadow(0 0 10px #15467e);
z-index: 2;
}
.tm-star-btn:hover .star-2 {
top: -25%;
left: 10%;
filter: drop-shadow(0 0 10px #15467e);
z-index: 2;
}
.tm-star-btn:hover .star-3 {
top: 55%;
left: 25%;
filter: drop-shadow(0 0 10px #15467e);
z-index: 2;
}
.tm-star-btn:hover .star-4 {
top: 30%;
left: 80%;
filter: drop-shadow(0 0 10px #15467e);
z-index: 2;
}
.tm-star-btn:hover .star-5 {
top: 25%;
left: 115%;
filter: drop-shadow(0 0 10px #15467e);
z-index: 2;
}
.tm-star-btn:hover .star-6 {
top: 5%;
left: 60%;
filter: drop-shadow(0 0 10px #15467e);
z-index: 2;
}
.tm-star-btn .fil0 {
fill: #15467e;
}
.tm-star-btn:focus {
outline: 2px solid #15467e;
outline-offset: 4px;
}
@media (max-width: 768px) {
.tm-star-btn { font-size: 20px; padding: 14px 32px; }
.tm-star-btn .star-1 { width: 26px; }
.tm-star-btn .star-2,
.tm-star-btn .star-5 { width: 16px; }
.tm-star-btn .star-4 { width: 9px; }
.tm-star-btn .star-3,
.tm-star-btn .star-6 { width: 6px; }
}
.tm-collapse {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.7s ease, opacity 0.6s ease;
pointer-events: none;
}
.tm-collapse.tm-open {
max-height: 5000px;
opacity: 1;
pointer-events: auto;
}
/* ============================================================
Documents & Licenses — redesigned section
============================================================ */
/* Affiliation logo strip (no box — logos sit directly on the section) */
.doc-affiliations {
padding: 0.5rem 0;
}
/* Five cards in a single row on large screens */
@media (min-width: 992px) {
.doc-cards-row > [class*="col-"] {
flex: 0 0 20%;
max-width: 20%;
}
.doc-cards-row .doc-card {
padding: 2rem 1.1rem 1.5rem;
}
}
.doc-affiliations-label {
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9aa3ad;
font-weight: 600;
}
.doc-affiliations-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 2.5rem 3rem;
}
.doc-affiliations-logos img {
height: 62px;
width: auto;
filter: grayscale(100%);
opacity: 0.6;
transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.doc-affiliations-logos a:hover img,
.doc-affiliations-logos a:focus img {
filter: grayscale(0);
opacity: 1;
transform: translateY(-4px);
}
/* Document cards */
.doc-card {
position: relative;
background: #fff;
border: 1px solid rgba(21, 70, 126, 0.08);
border-radius: 16px;
padding: 2.25rem 1.5rem 1.75rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
box-shadow: 0 6px 22px rgba(21, 70, 126, 0.05);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.doc-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #15467e, #2f80c9);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.doc-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 44px rgba(21, 70, 126, 0.16);
border-color: transparent;
}
.doc-card:hover::before {
transform: scaleX(1);
}
.doc-card-icon {
width: 84px;
height: 84px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
background: linear-gradient(135deg, rgba(21, 70, 126, 0.10), rgba(47, 128, 201, 0.16));
color: #15467e;
font-size: 2.2rem;
transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.doc-card:hover .doc-card-icon {
background: linear-gradient(135deg, #15467e, #2f80c9);
color: #fff;
transform: scale(1.07);
}
.doc-card-title {
color: #15467e;
font-size: 1.12rem;
margin-bottom: 0.5rem;
}
.doc-card-text {
color: #7b7b7b;
font-size: 0.9rem;
line-height: 1.55;
margin-bottom: 1rem;
flex-grow: 1;
}
.doc-card-meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #9aa3ad;
margin-bottom: 1.1rem;
}
/* Expandable "Read more" detail panels */
.doc-collapse {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.6s ease, opacity 0.5s ease, margin 0.6s ease;
pointer-events: none;
}
.doc-collapse.doc-open {
max-height: 2500px;
opacity: 1;
margin-top: 1.5rem;
pointer-events: auto;
}
.doc-detail {
border-radius: 16px !important;
box-shadow: 0 14px 40px rgba(21, 70, 126, 0.08);
border-color: rgba(21, 70, 126, 0.08) !important;
}
/* Detail panel header (logo / icon + title) */
.doc-detail-head {
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(21, 70, 126, 0.10);
}
.doc-detail-head img {
height: 54px;
width: auto;
}
.doc-detail-head h3 {
margin: 0;
}
.doc-detail-icon {
width: 56px;
height: 56px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #15467e, #2f80c9);
color: #fff;
font-size: 1.6rem;
flex-shrink: 0;
}
.doc-detail h5 {
color: #333;
font-weight: 700;
display: flex;
align-items: center;
margin-top: 1.25rem;
}
/* Download pill links */
.doc-download {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.1rem;
border: 1px solid rgba(21, 70, 126, 0.18);
border-radius: 10px;
background: #f7f9fc;
color: #15467e;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.doc-download .icon-file-pdf-o {
font-size: 1.35rem;
color: #d9484b;
transition: color 0.25s ease;
}
.doc-download:hover {
background: #15467e;
color: #fff;
border-color: #15467e;
box-shadow: 0 8px 20px rgba(21, 70, 126, 0.22);
transform: translateY(-2px);
text-decoration: none;
}
.doc-download:hover .icon-file-pdf-o {
color: #fff;
}
.tm-intro {
padding: 0 1rem;
max-width: 800px;
margin: 0 auto;
}
/* --- Pure CSS responsive gallery (adapted from Pieter Biesemans, codepen.io/pieter-biesemans/pen/xQOgxx) --- */
.tm-pure-gallery {
position: relative;
width: 95vw;
max-width: 1700px;
margin: 0 auto;
aspect-ratio: 5 / 2;
background: #222;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
}
.tm-pure-gallery input[type="checkbox"] {
display: none;
}
.tm-pure-gallery label[class^="tm-tile"] {
position: absolute;
width: 20%;
height: 50%;
margin: 0;
padding: 0;
border: 2px solid transparent;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #111;
transition: top 0.5s ease-in-out, left 0.5s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, background-size 0.4s ease-in-out;
z-index: 0;
cursor: zoom-in;
box-sizing: border-box;
overflow: hidden;
}
.tm-pure-gallery label[class^="tm-tile"]:hover {
border-color: #fff;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
z-index: 1;
}
/* 5x2 grid positions (desktop) */
.tm-pure-gallery label.tm-tile1 { top: 0; left: 0%; }
.tm-pure-gallery label.tm-tile2 { top: 0; left: 20%; }
.tm-pure-gallery label.tm-tile3 { top: 0; left: 40%; }
.tm-pure-gallery label.tm-tile4 { top: 0; left: 60%; }
.tm-pure-gallery label.tm-tile5 { top: 0; left: 80%; }
.tm-pure-gallery label.tm-tile6 { top: 50%; left: 0%; }
.tm-pure-gallery label.tm-tile7 { top: 50%; left: 20%; }
.tm-pure-gallery label.tm-tile8 { top: 50%; left: 40%; }
.tm-pure-gallery label.tm-tile9 { top: 50%; left: 60%; }
.tm-pure-gallery label.tm-tile10 { top: 50%; left: 80%; }
/* Expanded tile */
.tm-pure-gallery input:checked + label[class^="tm-tile"] {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-size: contain;
background-color: #000;
cursor: zoom-out;
border-color: transparent;
}
/* While navigating prev/next, the incoming image appears instantly at full size
(no grow-from-grid animation) so it reads as the photo changing in place. */
.tm-pure-gallery.tm-swapping input:checked + label[class^="tm-tile"] {
transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
/* The outgoing image stays full-size on top and crossfades out, revealing the
newly selected photo beneath it within the same maximised frame. */
.tm-pure-gallery label[class^="tm-tile"].tm-leaving {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
background-size: contain;
background-color: #000;
border-color: transparent;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
/* Caption shown only on the expanded tile */
.tm-pure-gallery label[class^="tm-tile"]::after {
content: attr(data-caption);
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.72);
color: #fff;
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
text-align: center;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
pointer-events: none;
}
.tm-pure-gallery input:checked + label[class^="tm-tile"]::after {
opacity: 1;
transform: translateY(0);
}
.tm-pure-gallery .tm-gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: flex;
align-items: center;
gap: 4px;
padding: 10px 16px;
border: 3px solid transparent;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 100px;
font-weight: 600;
color: #1f387e;
box-shadow: 0 0 0 1px #ffffff;
cursor: pointer;
overflow: hidden;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0;
pointer-events: none;
}
.tm-pure-gallery .tm-gallery-nav svg {
position: absolute;
width: 18px;
fill: #1f387e;
z-index: 9;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tm-pure-gallery .tm-gallery-nav .arr-1 {
right: 12px;
}
.tm-pure-gallery .tm-gallery-nav .arr-2 {
left: -25%;
}
.tm-pure-gallery .tm-gallery-nav .circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background-color: #c5e5e4;
border-radius: 50%;
opacity: 0;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tm-pure-gallery .tm-gallery-nav .text {
position: relative;
z-index: 1;
transform: translateX(-12px);
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.tm-pure-gallery .tm-gallery-nav:hover {
box-shadow: 0 0 0 8px transparent;
color: #212121;
border-radius: 12px;
}
.tm-pure-gallery .tm-gallery-nav:hover .arr-1 {
right: -25%;
}
.tm-pure-gallery .tm-gallery-nav:hover .arr-2 {
left: 16px;
}
.tm-pure-gallery .tm-gallery-nav:hover .text {
transform: translateX(12px);
}
.tm-pure-gallery .tm-gallery-nav:hover svg {
fill: #1f387e;
}
.tm-pure-gallery .tm-gallery-nav:active {
transform: translateY(-50%) scale(0.95);
box-shadow: 0 0 0 4px greenyellow;
}
.tm-pure-gallery .tm-gallery-nav:hover .circle {
width: 220px;
height: 220px;
opacity: 1;
}
.tm-pure-gallery .tm-gallery-prev { left: 1rem; }
.tm-pure-gallery .tm-gallery-next { right: 1rem; }
.tm-pure-gallery .tm-gallery-prev .arr-1,
.tm-pure-gallery .tm-gallery-prev .arr-2 {
transform: scaleX(-1);
}
.tm-pure-gallery input:checked ~ .tm-gallery-nav {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 768px) {
.tm-pure-gallery .tm-gallery-nav { width: auto; height: auto; font-size: 1.2rem; padding: 12px 18px; }
.tm-pure-gallery { max-width: 480px; }
.tm-pure-gallery label[class^="tm-tile"] {
width: 50%;
height: 20%;
}
.tm-pure-gallery {
aspect-ratio: 2 / 5;
max-width: 480px;
}
.tm-pure-gallery label[class^="tm-tile"] {
width: 50%;
height: 20%;
}
.tm-pure-gallery label.tm-tile1 { top: 0%; left: 0%; }
.tm-pure-gallery label.tm-tile2 { top: 0%; left: 50%; }
.tm-pure-gallery label.tm-tile3 { top: 20%; left: 0%; }
.tm-pure-gallery label.tm-tile4 { top: 20%; left: 50%; }
.tm-pure-gallery label.tm-tile5 { top: 40%; left: 0%; }
.tm-pure-gallery label.tm-tile6 { top: 40%; left: 50%; }
.tm-pure-gallery label.tm-tile7 { top: 60%; left: 0%; }
.tm-pure-gallery label.tm-tile8 { top: 60%; left: 50%; }
.tm-pure-gallery label.tm-tile9 { top: 80%; left: 0%; }
.tm-pure-gallery label.tm-tile10 { top: 80%; left: 50%; }
.tm-pure-gallery label[class^="tm-tile"]::after {
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
}
}
/* ============================================================
FAQ accordion
============================================================ */
.faq-item {
border: 1px solid rgba(21, 70, 126, 0.10);
border-radius: 0.75rem;
margin-bottom: 0.85rem;
background: #fff;
box-shadow: 0 4px 16px rgba(21, 70, 126, 0.04);
overflow: hidden;
}
.faq-question {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 1.15rem 1.35rem;
font-weight: 700;
color: #15467e;
font-size: 1.05rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background 0.2s ease;
}
.faq-question:hover {
background: rgba(21, 70, 126, 0.04);
}
.faq-question:focus {
outline: none;
}
.faq-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
position: relative;
margin-left: 1rem;
}
.faq-icon::before,
.faq-icon::after {
content: "";
position: absolute;
background: #15467e;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-icon::before {
top: 50%;
left: 0;
right: 0;
height: 2px;
transform: translateY(-50%);
}
.faq-icon::after {
left: 50%;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-50%);
}
.faq-question[aria-expanded="true"] .faq-icon::after {
transform: translateX(-50%) scaleY(0);
opacity: 0;
}
.faq-answer {
padding: 0 1.35rem 1.25rem;
color: #5a6472;
line-height: 1.65;
}
.faq-answer p {
margin-bottom: 0;
}
.faq-category {
color: #15467e;
font-size: 1.35rem;
font-weight: 700;
margin: 2.75rem 0 1.25rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(21, 70, 126, 0.12);
}
.faq-category:first-child {
margin-top: 0;
}
/* ============================================================
Fibre page — Check Your Coverage cards
============================================================ */
.coverage-card {
background-color: #ffffff;
border-radius: 1.25rem !important;
border-color: rgba(47, 128, 201, 0.14) !important;
box-shadow: 0 0 26px rgba(47, 128, 201, 0.16);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.coverage-card:hover {
transform: translateY(-6px);
box-shadow: 0 0 38px rgba(47, 128, 201, 0.30);
}
.coverage-card .coverage-logo {
max-height: 60px;
width: auto;
}
.coverage-card .coverage-mapicon {
height: 72px;
width: auto;
}
.coverage-card .btn {
margin-top: auto;
}
/* ===== Customer Reviews (Google) ===== */
.reviews-section {
background: #f8f9fa;
}
/* Tighten the spacing around the reviews section so it sits close to the
"Get In Touch Online" section above and the "Visit or Call Us" section below. */
#team-section {
padding-bottom: 1rem;
}
#reviews-section {
padding-top: 1rem;
padding-bottom: 1.5rem;
}
#find-us-section {
padding-top: 1.5rem;
}
/* Tighten the gap between the home "About Us" and "Why Choose" sections */
#about-section {
padding-bottom: 2.5rem;
}
#why-section {
padding-top: 2.5rem;
}
/* Wireless page — tighten gaps around the packages and "Get Connected" sections */
#wireless-intro {
padding-bottom: 2.5rem;
}
#wireless-packages {
padding-top: 2.5rem;
padding-bottom: 2rem;
}
#signup-section {
padding-top: 2rem;
}
/* "Visit or Call Us" — make the phone number and email addresses stand out */
.contact-detail {
font-size: 1.5rem;
font-weight: 600;
word-break: break-word;
}
@media (max-width: 575.98px) {
.contact-detail {
font-size: 1.2rem;
}
}
/* Give the "Why choose", "Get Connected", branch, About values/branches cards
the same rounded corners + soft blue glow as the review/social cards.
!important overrides Bootstrap's .rounded / .bg-light / .shadow-sm utilities. */
#why-section .p-4.border.rounded,
#connect-section .col-lg-6 .p-4.rounded,
#find-us-section .row .p-4.border.rounded,
#about-values .p-4.border.rounded,
#about-branches .p-4.border.rounded {
background-color: #fff !important;
border: 1px solid #eaf0f7 !important;
border-radius: 1.5rem !important;
box-shadow: 0 8px 28px rgba(21, 70, 126, 0.15) !important;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#why-section .p-4.border.rounded:hover,
#connect-section .col-lg-6 .p-4.rounded:hover,
#find-us-section .row .p-4.border.rounded:hover,
#about-values .p-4.border.rounded:hover,
#about-branches .p-4.border.rounded:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(21, 70, 126, 0.26) !important;
}
/* "Leave a Google Review" buttons — same soft blue glow */
#find-us-section .btn-outline-primary,
#about-branches .btn-outline-primary {
box-shadow: 0 8px 24px rgba(21, 70, 126, 0.18);
}
#find-us-section .btn-outline-primary:hover,
#about-branches .btn-outline-primary:hover {
box-shadow: 0 12px 30px rgba(21, 70, 126, 0.28);
}
/* "Send Us a Message" form box — rounded corners + blue glow to match the cards */
#contact-section .p-4.rounded.shadow-sm {
border: 1px solid #eaf0f7;
border-radius: 1.5rem !important;
box-shadow: 0 8px 28px rgba(21, 70, 126, 0.15) !important;
}
/* "Send Us a Message" fields — rounded with a soft blue glow */
#contact-section .form-control {
border: 1px solid #d8e2ef;
border-radius: 0.75rem;
box-shadow: 0 4px 14px rgba(21, 70, 126, 0.06) !important;
}
#contact-section .form-control:focus {
border-color: #15467e;
box-shadow: 0 6px 18px rgba(21, 70, 126, 0.18) !important;
}
.reviews-summary {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.6rem 1.75rem;
margin-bottom: 2.75rem;
text-align: center;
}
.reviews-score-wrap {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.reviews-score {
font-size: 3rem;
font-weight: 700;
line-height: 1;
color: #15467e;
}
.reviews-score-out {
font-size: 1.05rem;
color: #9aa3ad;
}
.reviews-summary-meta {
text-align: left;
}
.reviews-stars {
display: inline-flex;
align-items: center;
gap: 2px;
line-height: 0;
}
.reviews-stars svg {
width: 22px;
height: 22px;
}
.reviews-google {
display: flex;
align-items: center;
gap: 7px;
margin-top: 0.35rem;
font-weight: 600;
color: #5a6268;
font-size: 0.95rem;
}
.reviews-google svg {
width: 20px;
height: 20px;
}
.reviews-summary-btn {
margin-left: 0.5rem;
}
/* Review card */
.review-card {
background: #fff;
border: 1px solid #eaf0f7;
border-radius: 1.5rem;
box-shadow: 0 8px 28px rgba(21, 70, 126, 0.15);
padding: 1.6rem 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.review-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(21, 70, 126, 0.26);
}
.review-card-head {
display: flex;
align-items: center;
margin-bottom: 0.9rem;
}
.review-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
margin-right: 0.8rem;
background: #e9eef5;
flex-shrink: 0;
}
.review-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
color: #fff;
background: #15467e;
}
.review-meta {
display: flex;
flex-direction: column;
min-width: 0;
}
.review-author {
font-weight: 700;
color: #212121;
line-height: 1.25;
text-decoration: none;
}
a.review-author:hover {
color: #15467e;
text-decoration: underline;
}
.review-time {
font-size: 0.8rem;
color: #9aa3ad;
}
.review-card .reviews-stars {
margin-bottom: 0.7rem;
}
.review-card .reviews-stars svg {
width: 18px;
height: 18px;
}
.review-text {
color: #5a6268;
font-size: 0.98rem;
line-height: 1.6;
margin: 0;
}
.review-text.is-clamped {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.review-readmore {
background: none;
border: none;
color: #15467e;
font-weight: 600;
padding: 0;
margin-top: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
align-self: flex-start;
}
.review-readmore:hover {
text-decoration: underline;
}
.review-source {
margin-top: auto;
padding-top: 1rem;
display: flex;
align-items: center;
gap: 6px;
color: #9aa3ad;
font-size: 0.8rem;
}
.review-source svg {
width: 16px;
height: 16px;
}
.reviews-cta {
text-align: center;
margin-top: 0.5rem;
}
/* Owl forces `.owl-carousel .owl-item img { width:100% }`, which stretches the
round avatars into ellipses and pushes the author name off the card.
These higher-specificity rules restore the fixed avatar size. */
.reviews-carousel .owl-item img.review-avatar,
.reviews-carousel .owl-item .review-avatar {
width: 48px;
height: 48px;
min-width: 48px;
flex: 0 0 48px;
}
/* Owl's `.owl-stage-outer` has `overflow:hidden`, which clips the cards' blue
glow at a hard line. Let the stage overflow, and move the clip to the
carousel itself with INSIDE padding so the glow has room on all sides without
widening the element (no page-level horizontal scroll). Negative vertical
margins keep the surrounding spacing unchanged. */
.reviews-carousel {
overflow: hidden;
padding: 28px 22px;
margin-top: -28px;
margin-bottom: -28px;
}
.reviews-carousel .owl-stage-outer {
overflow: visible;
}
/* Equal-height cards inside Owl */
.reviews-carousel .owl-stage {
display: flex;
}
.reviews-carousel .owl-item {
display: flex;
height: auto;
}
.reviews-carousel .owl-item > .review-card {
width: 100%;
}
.reviews-carousel .owl-dots {
text-align: center;
margin-top: 1.6rem;
}
.reviews-carousel .owl-dots .owl-dot span {
width: 10px;
height: 10px;
background: #cdd6e0;
}
.reviews-carousel .owl-dots .owl-dot.active span,
.reviews-carousel .owl-dots .owl-dot:hover span {
background: #15467e;
}
/* Fallback if Owl is unavailable */
.reviews-fallback-scroll {
display: flex;
gap: 24px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 1rem;
}
.reviews-fallback-scroll .review-card {
flex: 0 0 85%;
max-width: 360px;
}
@media (min-width: 768px) {
.reviews-fallback-scroll .review-card {
flex-basis: 45%;
}
}
@media (min-width: 992px) {
.reviews-fallback-scroll .review-card {
flex-basis: 31%;
}
}
@media (max-width: 575.98px) {
.reviews-summary {
flex-direction: column;
}
.reviews-summary-meta {
text-align: center;
}
.reviews-google {
justify-content: center;
}
.reviews-summary-btn {
margin-left: 0;
}
}
/* ============================================================
Scrollable modals
------------------------------------------------------------
This site ships Bootstrap 4.1.3, which has no
.modal-dialog-scrollable (added in 4.3). On tall pop-ups
(Terms, the billing form when "company" is chosen, RICA)
the content runs off the bottom of the screen with no way
to scroll. This back-ports the 4.3 behaviour: the header and
footer stay fixed and the body scrolls.
============================================================ */
.modal-dialog-scrollable {
display: -ms-flexbox;
display: flex;
max-height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 1rem);
overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
@media (min-width: 576px) {
.modal-dialog-scrollable {
max-height: calc(100% - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
max-height: calc(100vh - 3.5rem);
}
}
/* Make the body scrollbar clearly visible inside pop-ups */
.modal-body {
scrollbar-width: thin; /* Firefox */
scrollbar-color: #9bb3cd #eef2f7;
}
.modal-body::-webkit-scrollbar {
width: 12px;
}
.modal-body::-webkit-scrollbar-track {
background: #eef2f7;
border-radius: 8px;
}
.modal-body::-webkit-scrollbar-thumb {
background: #9bb3cd;
border-radius: 8px;
border: 3px solid #eef2f7;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: #15467e;
}
/* ============================================================
Package dropdowns (wireless + fibre sign-up forms)
Targets every package