/* ==========================================================================
Pharmacy On King - Modern Design Layer
--------------------------------------------------------------------------
Visual-only overlay. Loaded LAST, after style.css + responsive.css.
No content, copy, or document structure is changed by this file.
Design system
Product : Local community pharmacy (healthcare / service)
Direction : Calm clinical modern - airy whitespace, soft elevation,
rounded geometry, restrained motion, high legibility
Brand : #af1d1e (existing crimson) kept; extended into a tonal scale
Type : Plus Jakarta Sans (headings) + Inter (body/UI)
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
/* Brand ramp - derived from the existing #af1d1e */
--pk-brand-50: #fdf3f3;
--pk-brand-100: #f9e2e2;
--pk-brand-200: #f1c4c4;
--pk-brand-400: #c93b3c;
--pk-brand: #af1d1e;
--pk-brand-600: #971819; /* hover - darkens (AA-safe with white) */
--pk-brand-700: #7d1516; /* pressed */
/* Ink - replaces washed-out #6E6E6E body grey */
--pk-ink-900: #10182b; /* headings */
--pk-ink-800: #16213e; /* legacy heading navy, kept for continuity */
--pk-ink-700: #2e3648;
--pk-ink-600: #454d5f; /* body copy - 9.1:1 on white */
--pk-ink-400: #6b7484; /* muted / meta */
/* Surfaces */
--pk-surface: #ffffff;
--pk-surface-alt: #f7f8fa;
--pk-surface-sunken: #eef1f5;
/* Lines */
--pk-border: #e4e8ee;
--pk-border-strong: #cdd4de;
/* Supporting accent - health/positive, used sparingly */
--pk-accent: #0e7c6b;
/* Radius scale */
--pk-r-sm: 8px;
--pk-r-md: 12px;
--pk-r-lg: 16px;
--pk-r-xl: 24px;
--pk-r-pill: 999px;
/* Elevation - soft, layered, never harsh */
--pk-sh-xs: 0 1px 2px rgba(16, 24, 43, .06);
--pk-sh-sm: 0 1px 2px rgba(16, 24, 43, .06), 0 2px 6px rgba(16, 24, 43, .05);
--pk-sh-md: 0 2px 4px rgba(16, 24, 43, .05), 0 8px 20px rgba(16, 24, 43, .08);
--pk-sh-lg: 0 4px 8px rgba(16, 24, 43, .05), 0 18px 40px rgba(16, 24, 43, .12);
--pk-sh-brand: 0 6px 18px rgba(175, 29, 30, .28);
/* Motion - 150-300ms band */
--pk-dur-fast: 140ms;
--pk-dur: 220ms;
--pk-dur-slow: 320ms;
--pk-ease: cubic-bezier(.22, .61, .36, 1);
--pk-ease-out: cubic-bezier(.16, 1, .3, 1);
/* Fluid section rhythm */
--pk-section: clamp(3.5rem, 7vw, 6.25rem);
--pk-section-sm: clamp(2.5rem, 5vw, 4.375rem);
/* Fonts */
--pk-font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--pk-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Layering */
--pk-z-nav: 1000;
--pk-z-float: 1100;
}
/* ==========================================================================
2. BASE TYPOGRAPHY
========================================================================== */
body {
font-family: var(--pk-font-body);
color: var(--pk-ink-600);
font-size: 1rem;
line-height: 1.7;
font-weight: 400;
letter-spacing: -0.003em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background-color: var(--pk-surface);
}
/* Keep every raster and inline site image consistent with Testimonials. */
img {
border-radius: var(--pk-r-lg);
}
p {
color: var(--pk-ink-600);
font-weight: 400;
line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--pk-font-head);
color: var(--pk-ink-900);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.125rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.2; }
h3 { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.3; }
h4 { font-size: 1.1875rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: 0.9375rem; }
/* Numeric alignment for hours, phone numbers, prices */
.open-hours-list, .about-open-hours ul, .appointment-hours ul,
.footer-contact-list, table {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
a {
transition: color var(--pk-dur) var(--pk-ease),
background-color var(--pk-dur) var(--pk-ease),
border-color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease);
}
::selection { background: var(--pk-brand-100); color: var(--pk-brand-700); }
/* ==========================================================================
3. ACCESSIBILITY - focus visibility
The base template zeroes out button outlines (WCAG 2.4.7 failure).
========================================================================== */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
outline: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--pk-brand-400);
outline-offset: 3px;
border-radius: var(--pk-r-sm);
}
/* ==========================================================================
4. FLUID SECTION RHYTHM
========================================================================== */
.pt-100 { padding-top: var(--pk-section) !important; }
.pb-100 { padding-bottom: var(--pk-section) !important; }
.pb-70 { padding-bottom: var(--pk-section-sm) !important; }
.pt-70 { padding-top: var(--pk-section-sm) !important; }
.pt-45 { padding-top: clamp(1.75rem, 3vw, 2.8125rem) !important; }
/* ==========================================================================
5. BUTTONS
Solid fill, darken-on-hover (the old #D35A61 hover was 3.9:1 with white,
below AA), soft brand shadow, quick lift. Replaces the 700ms wipe.
========================================================================== */
.default-btn,
.default-btn-two,
.appointment-from .default-btn,
.appointment-from .default-btn-two {
padding: .8125rem 1.75rem;
background-color: var(--pk-brand);
color: #ffffff;
font-family: var(--pk-font-body);
font-weight: 600;
font-size: .9375rem;
letter-spacing: .01em;
border: 0;
border-radius: var(--pk-r-pill);
box-shadow: var(--pk-sh-brand);
transition: background-color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease);
cursor: pointer;
}
/* Neutralise the legacy expanding ::before wipe */
.default-btn::before,
.default-btn-two::before,
.default-btn:hover::before,
.default-btn-two:hover::before,
.appointment-from .prescription-btn::before {
display: none !important;
}
.default-btn:hover,
.default-btn-two:hover,
.default-btn:focus-visible,
.default-btn-two:focus-visible {
background-color: var(--pk-brand-600);
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(175, 29, 30, .34);
}
.default-btn:active,
.default-btn-two:active {
background-color: var(--pk-brand-700);
transform: translateY(0);
box-shadow: var(--pk-sh-xs);
}
.appointment-from .prescription-btn,
.appointment-from .prescription-btn:hover {
border-radius: var(--pk-r-pill);
}
/* ==========================================================================
6. NAVIGATION - floating rounded bar + segmented link track
The bar uses the same large-radius geometry as the site's content blocks
and keeps that shape when custom.js adds .sticky-nav while scrolling.
Links live in an inset track; the current page reads as a raised thumb.
========================================================================== */
/* --- Logo -------------------------------------------------------------
logo.png is 189x76 (ratio 2.487). It was rendering 108x60 (ratio 1.80):
`img { max-width: 100% }` clamped the width while height stayed fixed,
because .navbar-brand was a shrinkable flex item. flex:0 0 auto plus
max-width:none keeps the true aspect ratio. */
.navbar-light .navbar-brand {
flex: 0 0 auto;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.navbar-light .navbar-brand img,
.sticky-nav .navbar-light .navbar-brand img {
float: none;
display: block;
height: 44px; /* same at every scroll position - never resizes */
width: auto;
max-width: none;
aspect-ratio: 189 / 76;
object-fit: contain;
padding: 0;
margin: 0;
transition: none;
}
.navbar-light .navbar-brand:hover img { transform: none; }
.mobile-nav .logo img {
height: 46px;
width: auto;
max-width: none;
aspect-ratio: 189 / 76;
object-fit: contain;
}
/* Sticky lives on .navbar-area, not .main-nav: a sticky box can only travel
inside its own parent, and .navbar-area is exactly nav-height tall - so
sticking .main-nav gave it zero travel and it scrolled straight off.
The z-index also keeps it above .inner-banner (both position:relative). */
.navbar-area {
position: -webkit-sticky;
position: sticky; /* mobile: stays in flow, pins on scroll */
top: 0;
z-index: var(--pk-z-nav);
}
@media (min-width: 992px) {
/* Desktop: fixed, so the bar occupies no layout space at all. Previously it
sat in flow (111px tall) and each hero was pulled back under it with a
negative margin - those pulls were 90/100px, leaving 21/11px of white
above the nav. Out of flow, the hero simply starts at y=0 and no pull
is needed. */
.navbar-area {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.banner-area-two,
.inner-banner { margin-top: 0; }
}
@media (min-width: 992px) {
/* The floating gap lives here as padding, not as a margin on .main-nav -
a child margin would collapse out of the sticky box. */
.navbar-area,
.sticky-nav.navbar-area { padding-top: .875rem; transition: none; }
/* --- The navbar shell --------------------------------------------------
Every property is declared once for BOTH the resting and the scrolled
(.sticky-nav) state, so the bar is pixel-identical at any scroll offset.
custom.js still toggles .sticky-nav; nothing here responds to it, and
this also overrides style.css's `.sticky-nav .nav-bar { max-width:100% }`
which was what stretched the bar out on scroll. */
.main-nav.nav-bar,
.sticky-nav .main-nav.nav-bar {
position: relative;
max-width: 75rem;
margin: 0 auto;
border-radius: var(--pk-r-lg);
background-color: rgba(255, 255, 255, .94);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border: 1px solid rgba(255, 255, 255, .7);
box-shadow: 0 2px 6px rgba(16, 24, 43, .07),
0 12px 34px rgba(16, 24, 43, .17);
transition: none;
}
.main-nav.nav-bar .container,
.sticky-nav .main-nav.nav-bar .container {
max-width: 100%;
padding-left: 1.375rem;
padding-right: .625rem;
transition: none;
}
.main-nav.nav-bar .navbar {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 1rem;
padding: .5rem 0;
}
}
/* --- Segmented link track --- */
.main-nav nav .navbar-nav {
align-items: center;
gap: .125rem;
background-color: rgba(238, 241, 245, .9);
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-pill);
padding: .25rem;
}
.main-nav nav .navbar-nav > .nav-item > .nav-link {
font-family: var(--pk-font-body);
font-weight: 500;
font-size: .9063rem;
color: var(--pk-ink-700);
letter-spacing: -0.005em;
margin: 0;
padding: .4375rem .875rem;
min-height: 36px;
display: inline-flex;
align-items: center;
gap: .1875rem;
border-radius: var(--pk-r-pill);
text-transform: capitalize;
white-space: nowrap;
transition: color var(--pk-dur) var(--pk-ease),
background-color var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease);
}
.main-nav nav .navbar-nav > .nav-item > .nav-link::after { display: none; }
.main-nav nav .navbar-nav > .nav-item:hover > .nav-link,
.main-nav nav .navbar-nav > .nav-item:focus-within > .nav-link,
.main-nav nav .navbar-nav > .nav-item > .nav-link:hover {
background-color: rgba(255, 255, 255, .75);
color: var(--pk-ink-900) !important;
}
/* Current page = raised thumb inside the track */
.main-nav nav .navbar-nav > .nav-item > .nav-link.active,
.main-nav nav .navbar-nav > .nav-item > .nav-link.active:hover,
.main-nav nav .navbar-nav > .nav-item:hover > .nav-link.active {
background-color: #ffffff;
color: var(--pk-brand) !important;
font-weight: 600;
box-shadow: 0 1px 2px rgba(16, 24, 43, .10),
0 3px 10px rgba(16, 24, 43, .07);
}
.main-nav nav .navbar-nav > .nav-item > .nav-link i {
font-size: 1.0625rem;
line-height: 0;
top: 0;
opacity: .6;
transition: transform var(--pk-dur) var(--pk-ease), opacity var(--pk-dur) var(--pk-ease);
}
.main-nav nav .navbar-nav > .nav-item:hover > .nav-link i,
.main-nav nav .navbar-nav > .nav-item:focus-within > .nav-link i {
transform: rotate(180deg);
opacity: 1;
}
/* --- Dropdown panel --- */
.main-nav nav .navbar-nav .nav-item .dropdown-menu {
top: 100%;
left: 0;
width: -moz-max-content;
width: max-content;
min-width: 250px;
max-width: 330px;
padding: .4375rem;
margin-top: 1rem !important;
background-color: #ffffff !important;
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-md);
box-shadow: 0 4px 10px rgba(16, 24, 43, .06), 0 20px 44px rgba(16, 24, 43, .16);
opacity: 0;
visibility: hidden;
overflow: visible;
transform: translateY(-8px) scale(.985);
transform-origin: top left;
transition: opacity 170ms var(--pk-ease),
transform 230ms var(--pk-ease-out),
visibility 0s linear 200ms;
}
/* Invisible bridge across the gap so the menu does not close mid-travel */
.main-nav nav .navbar-nav .nav-item .dropdown-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1rem;
height: 1rem;
}
.main-nav nav .navbar-nav .nav-item:hover > .dropdown-menu,
.main-nav nav .navbar-nav .nav-item:focus-within > .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
transition-delay: 0s;
}
.main-nav nav .navbar-nav .nav-item:last-child .dropdown-menu {
left: auto;
right: 0;
transform-origin: top right;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li { border-bottom: 0; }
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
color: var(--pk-ink-700) !important;
font-family: var(--pk-font-body);
font-size: .9rem;
font-weight: 500;
line-height: 1.45;
white-space: normal;
padding: .5625rem .8125rem;
border-radius: var(--pk-r-sm);
border-bottom: 0;
transition: background-color var(--pk-dur) var(--pk-ease),
color var(--pk-dur) var(--pk-ease);
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus-visible,
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active {
background-color: var(--pk-brand-50) !important;
color: var(--pk-brand) !important;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a::after { display: none; }
/* --- Call CTA --- */
.nav-cta { margin-left: auto; display: flex; align-items: center; flex: 0 0 auto; }
.nav-call-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px;
padding: .5rem 1.125rem;
border-radius: var(--pk-r-pill);
background-color: var(--pk-brand);
color: #ffffff;
font-family: var(--pk-font-body);
font-weight: 600;
font-size: .9375rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(175, 29, 30, .30);
transition: background-color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease);
}
.nav-call-btn:hover,
.nav-call-btn:focus-visible {
background-color: var(--pk-brand-600);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(175, 29, 30, .34);
}
.nav-call-btn i { font-size: 1.125rem; line-height: 0; }
/* Tight desktop widths: shed the track padding, then the CTA label */
@media (min-width: 992px) and (max-width: 1299px) {
.main-nav nav .navbar-nav > .nav-item > .nav-link { padding: .4375rem .6875rem; font-size: .875rem; }
.navbar-light .navbar-brand img { height: 40px; }
}
@media (max-width: 1199px) {
.nav-call-btn span { display: none; }
.nav-call-btn { padding: .5rem; width: 44px; justify-content: center; }
}
@media (max-width: 991px) {
.nav-cta { display: none; }
.main-nav nav .navbar-nav {
background-color: transparent;
border: 0;
padding: 0;
border-radius: 0;
}
}
/* ==========================================================================
7. HERO (home)
Adds a real scrim - the original 10% black wash left white display type
sitting on raw photography.
========================================================================== */
.banner-area-two::before {
background-color: transparent;
background-image: linear-gradient(100deg,
rgba(8, 12, 22, .88) 0%,
rgba(8, 12, 22, .72) 40%,
rgba(8, 12, 22, .28) 74%,
rgba(8, 12, 22, .08) 100%);
opacity: 1;
}
.banner-content-two {
padding-top: clamp(7rem, 22vw, 19rem);
padding-bottom: clamp(5rem, 17vw, 15rem);
max-width: 46rem;
}
.banner-content-two span {
font-family: var(--pk-font-body);
display: inline-block;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #ffffff;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .28);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: .5rem 1rem;
border-radius: var(--pk-r-pill);
line-height: 1;
}
.banner-content-two h1 {
font-size: clamp(2rem, 4.6vw, 3.375rem);
font-weight: 800;
line-height: 1.14;
letter-spacing: -0.028em;
color: #ffffff;
text-wrap: balance;
text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.banner-content-two p {
color: rgba(255, 255, 255, .92);
font-size: 1.0625rem;
font-weight: 400;
max-width: 34rem;
}
.banner-content-two .banner-btn-two .appointment-btn {
border-radius: var(--pk-r-pill);
padding: .8125rem 1.75rem;
font-weight: 600;
box-shadow: var(--pk-sh-brand);
transition: background-color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease);
}
.banner-content-two .banner-btn-two .appointment-btn:hover {
background-color: #ffffff;
color: var(--pk-brand);
transform: translateY(-2px);
}
/* ==========================================================================
8. HERO FEATURE STRIP
========================================================================== */
.banner-bottom-two { margin-top: clamp(-4rem, -4vw, -2rem); position: relative; z-index: 2; }
.banner-bottom-item {
padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.4vw, 2rem);
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-md);
transition: transform var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease);
}
.banner-bottom-item::before {
background-image: linear-gradient(150deg, var(--pk-brand) 0%, var(--pk-brand-700) 100%);
transition: none;
}
.banner-bottom-item:hover {
transform: translateY(-4px);
box-shadow: var(--pk-sh-lg);
}
.banner-bottom-item i { font-size: 2.75rem; margin-bottom: .75rem; }
.banner-bottom-item svg { height: 46px; width: auto; }
.banner-bottom-item h3 {
color: #ffffff;
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
margin-top: .625rem;
margin-bottom: 0;
letter-spacing: -0.01em;
}
.banner-bottom-item .circle { border-width: 1.25rem; border-color: rgba(255, 255, 255, .10); }
.banner-bottom-item .line { background-color: rgba(255, 255, 255, .08); }
/* ==========================================================================
9. SECTION TITLES
========================================================================== */
.section-title span,
.eyebrow-tag {
font-family: var(--pk-font-body);
display: inline-block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pk-brand);
background: var(--pk-brand-50);
border: 1px solid var(--pk-brand-100);
border-radius: var(--pk-r-pill);
padding: .375rem .875rem;
line-height: 1.4;
margin-bottom: 1rem;
padding-bottom: .375rem;
}
.section-title h2 {
font-size: clamp(1.75rem, 3.1vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.16;
color: var(--pk-ink-900);
text-wrap: balance;
}
/* Standalone eyebrow used where there is no .section-title wrapper
(the contact card headings) */
.eyebrow-tag {
display: inline-block;
margin-bottom: .875rem;
}
.appointment-from .eyebrow-tag,
.contact-form .eyebrow-tag { display: block; width: -moz-fit-content; width: fit-content; }
.appointment-from .eyebrow-tag { margin-left: auto; margin-right: auto; }
/* On the brand-coloured bands the chip inverts to translucent white */
.case-study-area .section-title span,
.case-study-area .eyebrow-tag,
.appointment-area .section-title span,
.appointment-bg .eyebrow-tag {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .32);
color: #ffffff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* ...but the contact form sits on a white card inside that band */
.appointment-area .appointment-from .eyebrow-tag {
background: var(--pk-brand-50);
border-color: var(--pk-brand-100);
color: var(--pk-brand);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.section-title.text-center h2 { margin-left: auto; margin-right: auto; max-width: 24ch; }
.section-title p { max-width: 62ch; margin-top: .875rem; font-size: 1.0625rem; }
.section-title.text-center p { margin-left: auto; margin-right: auto; }
/* ==========================================================================
10. SERVICE CARDS (redesigned)
Editorial card: photo -> offset icon chip breaking the image edge ->
left-aligned title with a travelling chevron -> description.
The template hid the description behind :hover (display:none), so it was
unreachable on touch. It is now always visible, and the title link is
stretched over the whole card to make the card a single target.
========================================================================== */
section:has(.service-card) {
background-color: var(--pk-surface-alt);
background-image: radial-gradient(90% 55% at 50% 0%, rgba(175, 29, 30, .055), rgba(175, 29, 30, 0) 62%);
}
.service-card {
position: relative;
background-color: var(--pk-surface);
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-sm);
overflow: hidden;
text-align: left;
height: calc(100% - 1.875rem);
display: flex;
flex-direction: column;
transition: transform var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease),
border-color var(--pk-dur) var(--pk-ease);
}
/* Photo, with a brand veil and a reveal arrow that arrive together on hover */
.service-card::before,
.service-card:hover::before { display: none !important; }
.service-card:hover {
transform: translateY(-6px);
border-color: var(--pk-brand-200);
box-shadow: 0 4px 10px rgba(175, 29, 30, .06), 0 18px 40px rgba(175, 29, 30, .20);
}
.service-card > a {
display: block;
overflow: hidden;
line-height: 0;
position: relative;
}
.service-card > a img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
transition: transform 520ms var(--pk-ease-out);
}
.service-card:hover > a img { transform: scale(1.07); }
/* Brand veil */
.service-card > a::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(to top,
rgba(125, 21, 22, .78) 0%,
rgba(175, 29, 30, .34) 52%,
rgba(175, 29, 30, 0) 100%);
opacity: 0;
z-index: 1;
pointer-events: none;
transition: opacity var(--pk-dur-slow) var(--pk-ease);
}
.service-card:hover > a::after { opacity: 1; }
/* Reveal arrow, bottom-right of the photo — balances the icon chip on the left */
.service-card > a::before {
content: "";
position: absolute;
right: 1rem;
bottom: 1rem;
width: 42px;
height: 42px;
border-radius: var(--pk-r-pill);
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23af1d1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 19px 19px;
box-shadow: 0 6px 16px rgba(40, 4, 4, .28);
opacity: 0;
transform: translate(6px, 10px) scale(.85);
z-index: 2;
pointer-events: none;
transition: opacity var(--pk-dur) var(--pk-ease),
transform 320ms var(--pk-ease-out);
}
.service-card:hover > a::before {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.service-card .service-content,
.service-card:hover .service-content {
position: static;
/* style.css shifts this block with top:36% + translateY(-31%) on hover */
top: auto;
transform: none;
background-color: transparent;
padding: 0 1.375rem 1.5rem;
overflow: visible;
transition: none;
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
}
.service-card .service-content::before,
.service-card:hover .service-content::before { display: none; }
/* Icon chip, offset left and breaking the photo edge */
.service-card .service-content .service-icon,
.service-card:hover .service-content .service-icon {
width: 58px;
height: 58px;
line-height: 58px;
font-size: 1.5rem;
margin: -29px 0 .875rem;
background-color: var(--pk-brand);
color: #ffffff;
border-radius: 18px;
border: 3px solid var(--pk-surface);
box-shadow: var(--pk-sh-md);
display: grid;
place-items: center;
position: relative;
z-index: 2;
transition: transform var(--pk-dur) var(--pk-ease-out),
border-radius var(--pk-dur) var(--pk-ease);
}
.service-card:hover .service-content .service-icon {
background-color: #ffffff;
color: var(--pk-brand);
border-color: var(--pk-brand);
transform: translateY(-4px) scale(1.06);
border-radius: var(--pk-r-pill);
box-shadow: 0 10px 22px rgba(175, 29, 30, .26);
}
/* Flatten the legacy nested badge into the chip */
.service-card .service-content .service-icon .eye-gx,
.service-card:hover .service-content .service-icon .eye-gx,
.service-card:hover .eye-gx {
background-color: transparent;
color: inherit;
width: auto;
height: auto;
line-height: 1;
font-size: 1.375rem;
border-radius: 0;
display: grid;
place-items: center;
}
.service-card .service-content .service-icon i,
.service-card .service-content .service-icon .fa-solid.fa-pills {
font-size: 1.375rem;
line-height: 1;
}
/* Title row carries a chevron that travels on hover */
.service-card .service-content h3,
.service-card:hover .service-content h3 {
font-size: 1.1875rem;
margin-bottom: .5rem;
letter-spacing: -0.018em;
width: 100%;
}
.service-card .service-content h3 a,
.service-card:hover .service-content h3 a {
color: var(--pk-ink-900);
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-bottom: 2px;
background-image: linear-gradient(var(--pk-brand), var(--pk-brand));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 2px;
transition: color var(--pk-dur) var(--pk-ease),
background-size 340ms var(--pk-ease-out);
}
.service-card:hover .service-content h3 a {
color: var(--pk-brand);
background-size: 100% 2px;
}
/* Whole card is one target, driven by the title link */
.service-card .service-content h3 a::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
}
.service-card .service-content .content,
.service-card:hover .service-content .content {
display: block;
margin: 0;
}
.service-card .service-content .content p,
.service-card:hover .service-content .content p {
color: var(--pk-ink-600);
font-size: .9375rem;
line-height: 1.65;
margin-bottom: 0;
}
.service-card .service-shape-1, .service-card .service-shape-2 { display: none; }
/* ==========================================================================
11. PRESCRIPTIONS BAND + CARDS (redesigned)
Photos replaced by an inline-SVG icon family (one document silhouette,
three glyphs). Cards are symmetric, icon-led and fully readable without
hover - the template scaled their content to 0 until hover, so titles,
copy and Read More were invisible on touch.
========================================================================== */
.bg-main,
.case-study-area.bg-main {
background-color: var(--pk-brand-700);
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .085) 1px, transparent 0),
radial-gradient(110% 75% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%),
linear-gradient(165deg, var(--pk-brand) 0%, var(--pk-brand-700) 100%);
background-size: 26px 26px, 100% 100%, 100% 100%;
}
/* Flat 50%-height slab left over from a removed background image */
.case-study-area::before,
.case-study-area::after { display: none !important; }
.case-study-area .section-title h2 { text-shadow: 0 2px 18px rgba(60, 8, 8, .35); }
.case-study-card {
background-color: var(--pk-surface);
border-radius: var(--pk-r-xl);
box-shadow: 0 12px 34px rgba(56, 8, 8, .24);
padding: clamp(1.75rem, 3vw, 2.375rem) clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.5rem, 2.6vw, 2rem);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
height: calc(100% - 1.875rem);
transition: transform var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease);
}
.case-study-card::before,
.case-study-card::after,
.case-study-card:hover::before,
.case-study-card:hover::after { display: none !important; }
.case-study-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 48px rgba(40, 4, 4, .3);
}
/* Icon tile — the visual anchor of each card */
.case-study-card .rx-icon {
order: 1;
width: clamp(76px, 8vw, 88px);
height: clamp(76px, 8vw, 88px);
display: grid;
place-items: center;
border-radius: 26px;
background-color: var(--pk-brand-50);
border: 1px solid var(--pk-brand-100);
color: var(--pk-brand);
margin-bottom: 1.25rem;
transition: background-color var(--pk-dur) var(--pk-ease),
border-color var(--pk-dur) var(--pk-ease),
color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease-out);
}
.case-study-card .rx-icon .rx-glyph {
width: 55%;
height: 55%;
display: block;
}
.case-study-card:hover .rx-icon {
background-color: var(--pk-brand);
border-color: var(--pk-brand);
color: #ffffff;
transform: translateY(-3px) rotate(-3deg);
}
/* Category label (the "New" / "Refill" / "Transfer" heading) */
.case-study-card > .case-study-label {
order: 2;
background-color: transparent;
color: var(--pk-brand) !important;
font-family: var(--pk-font-body);
font-size: .6875rem;
font-weight: 700 !important;
letter-spacing: .16em;
text-transform: uppercase;
margin: 0 0 .5rem;
padding: 0;
line-height: 1.4;
}
.case-study-card .content,
.case-study-card:hover .content {
order: 3;
position: static;
transform: none;
text-align: center;
padding: 0;
transition: none;
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 auto;
width: 100%;
}
.case-study-card .content h3 {
font-size: 1.25rem;
margin-bottom: .625rem;
letter-spacing: -0.018em;
}
.case-study-card .content h3 a { color: var(--pk-ink-900); }
.case-study-card:hover .content h3 a { color: var(--pk-brand); }
.case-study-card .content p {
color: var(--pk-ink-600);
font-size: .9375rem;
line-height: 1.65;
max-width: 34ch;
margin: 0 auto 1.5rem;
flex: 1 1 auto;
}
/* Read More becomes a real pill target (44px), filling on card hover */
.case-study-card .content .read-mor-btn {
align-self: center;
padding: .625rem 1.375rem;
border-radius: var(--pk-r-pill);
border: 1.5px solid var(--pk-brand-200);
background-color: transparent;
color: var(--pk-brand);
font-weight: 600;
font-size: .875rem;
transition: background-color var(--pk-dur) var(--pk-ease),
border-color var(--pk-dur) var(--pk-ease),
color var(--pk-dur) var(--pk-ease);
}
.case-study-card:hover .content .read-mor-btn,
.case-study-card .content .read-mor-btn:hover {
background-color: var(--pk-brand);
border-color: var(--pk-brand);
color: #ffffff;
}
.read-mor-btn {
color: var(--pk-brand);
font-weight: 600;
font-size: .9375rem;
min-height: 44px;
}
.read-mor-btn i { font-size: .75rem; transition: transform var(--pk-dur) var(--pk-ease-out); }
.read-mor-btn:hover i { transform: translateX(4px); }
/* ==========================================================================
12. ABOUT + OPEN HOURS PANEL
========================================================================== */
.about-right-img img,
.about-img img { border-radius: var(--pk-r-lg); }
.about-right-img .about-open-hours {
background-color: var(--pk-brand);
background-image: linear-gradient(155deg, var(--pk-brand) 0%, var(--pk-brand-700) 100%);
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-lg);
padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.2vw, 1.875rem);
max-width: min(23.75rem, 92%);
}
.about-right-img .about-open-hours h3 {
font-size: 1.3125rem;
letter-spacing: -0.01em;
margin-bottom: 1.125rem;
padding-bottom: .875rem;
border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.about-right-img .about-open-hours ul li {
font-weight: 500;
font-size: .9375rem;
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .3125rem 0;
}
.about-right-img .about-open-hours ul li::before { display: none; }
.about-right-img .about-open-hours ul li span { float: none; font-weight: 600; }
.about-content .about-card {
border-radius: var(--pk-r-md);
transition: transform var(--pk-dur) var(--pk-ease);
}
.about-content .about-card:hover { transform: translateX(3px); }
.about-content .about-card .content span { color: var(--pk-ink-900); font-weight: 600; }
/* ==========================================================================
13. TESTIMONIALS
========================================================================== */
.testimonials-area { border-top-color: var(--pk-border); border-bottom-color: var(--pk-border); }
.testimonials-img img { border-radius: var(--pk-r-lg); box-shadow: var(--pk-sh-md); }
/* The template put the quote on a flat red slab with white text. Replaced by
an elevated white card so the quote reads as a document, not a banner. */
.testimonials-slider {
background-color: transparent;
padding: 0;
margin: 2.5rem 0 2.1875rem;
}
@media (min-width: 1200px) {
.testimonials-slider { margin-left: -3.75rem; }
}
.testimonials-slider .testimonials-item,
.testimonials-item {
text-align: left;
background-color: var(--pk-surface);
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-md);
padding: clamp(1.5rem, 2.6vw, 2.25rem);
}
.testimonials-slider .testimonials-item i,
.testimonials-item i.flaticon-left-quote {
color: var(--pk-brand-200);
font-size: 2.25rem;
line-height: 1;
display: block;
text-align: left;
margin-bottom: .75rem;
}
.testimonials-slider .testimonials-item p,
.testimonials-item p {
color: var(--pk-ink-700);
font-size: 1rem;
line-height: 1.75;
margin-bottom: 1.25rem;
}
.testimonials-slider .testimonials-item .content h3,
.testimonials-item .content h3 {
font-size: 1rem;
color: var(--pk-ink-900);
margin-bottom: 0;
margin-top: 0;
}
.testimonials-slider .testimonials-item .content h3::before,
.testimonials-item .content h3::before {
content: "";
display: block;
width: 32px;
height: 2px;
background: var(--pk-brand);
border-radius: 2px;
margin-bottom: .75rem;
}
.testimonials-slider .testimonials-item .content span { color: var(--pk-ink-400); }
/* Carousel arrows: circular, aligned to the top-right of the slider */
.testimonials-slider-area .owl-nav .owl-prev,
.testimonials-slider-area .owl-nav .owl-next {
top: -3.75rem;
left: auto;
width: 44px;
height: 44px;
line-height: 41px;
border-radius: var(--pk-r-pill);
background-color: var(--pk-surface) !important;
color: var(--pk-brand) !important;
border: 1.5px solid var(--pk-border);
box-shadow: var(--pk-sh-xs);
}
.testimonials-slider-area .owl-nav .owl-prev { right: 3.5rem; }
.testimonials-slider-area .owl-nav .owl-next { right: 0; }
.testimonials-slider-area .owl-nav .owl-prev:hover,
.testimonials-slider-area .owl-nav .owl-next:hover {
background-color: var(--pk-brand) !important;
color: #ffffff !important;
border-color: var(--pk-brand);
}
.owl-theme .owl-dots .owl-dot span {
width: 8px; height: 8px; margin: 5px;
background: var(--pk-border-strong);
transition: all var(--pk-dur) var(--pk-ease);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: var(--pk-brand);
width: 22px;
border-radius: var(--pk-r-pill);
}
/* ==========================================================================
14. CONTACT / APPOINTMENT
========================================================================== */
.appointment-bg::before {
background-color: var(--pk-brand);
background-image: linear-gradient(150deg, var(--pk-brand) 0%, var(--pk-brand-700) 100%);
opacity: 1;
}
.appointment-from-area {
padding-top: var(--pk-section);
padding-bottom: var(--pk-section-sm);
}
.appointment-img-2 img { max-height: 360px; width: auto; }
.appointment-from {
border-radius: var(--pk-r-xl);
box-shadow: var(--pk-sh-lg);
padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.25rem, 2.8vw, 2.25rem);
border: 1px solid var(--pk-border);
}
.appointment-from h2 { font-size: clamp(1.625rem, 2.8vw, 2.125rem); letter-spacing: -0.025em; }
.appointment-from p { font-size: 1rem; color: var(--pk-ink-400); margin-bottom: 1.75rem; }
.appointment-from .form-group { margin-bottom: 1rem; }
/* Compact horizontal Contact Us layout used on the home and About pages. */
@media (min-width: 992px) {
.appointment-area .appointment-from-area {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
}
.appointment-area .appointment-from {
margin-bottom: 0;
padding: 1.75rem 2rem;
}
.appointment-area .appointment-from p { margin-bottom: 1.25rem; }
.appointment-area .appointment-from .form-group { margin-bottom: .75rem; }
.appointment-area .appointment-from .form-group textarea.form-control {
height: 96px;
min-height: 96px;
}
.appointment-area .contact-submit-col {
display: flex;
align-items: flex-end;
padding-bottom: .75rem;
}
.appointment-area .contact-submit-col .default-btn {
width: 100%;
min-height: 48px;
margin-top: 0;
}
}
.appointment-from .form-group .form-control,
.contact-form .form-group .form-control,
.reviews-form .contact-form .form-group .form-control,
.blog-article .comments-form .contact-form .form-group .form-control,
.consultancy-content .consultancy-form .form-group .form-control,
.billing-details .form-group .form-control,
.form-control {
height: 48px;
min-height: 48px;
color: var(--pk-ink-900);
background-color: var(--pk-surface-alt);
border: 1.5px solid var(--pk-border);
border-radius: var(--pk-r-md);
font-family: var(--pk-font-body);
font-size: .9375rem;
font-weight: 400;
padding: .75rem 1rem;
transition: border-color var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease),
background-color var(--pk-dur) var(--pk-ease);
}
.form-control::placeholder { color: var(--pk-ink-400); opacity: 1; }
.appointment-from .form-group .form-control:hover,
.contact-form .form-group .form-control:hover,
.form-control:hover { border-color: var(--pk-border-strong); }
.appointment-from .form-group .form-control:focus,
.contact-form .form-group .form-control:focus,
.reviews-form .contact-form .form-group .form-control:focus,
.blog-article .comments-form .contact-form .form-group .form-control:focus,
.consultancy-content .consultancy-form .form-group .form-control:focus,
.billing-details .form-group .form-control:focus,
.form-control:focus {
outline: 0;
background-color: var(--pk-surface);
border-color: var(--pk-brand);
box-shadow: 0 0 0 4px rgba(175, 29, 30, .14);
}
.appointment-from .form-group textarea.form-control,
.contact-form .form-group textarea.form-control,
textarea.form-control {
height: auto;
min-height: 132px;
padding-top: .875rem;
line-height: 1.65;
}
.contact-form h2 { font-size: clamp(1.625rem, 2.8vw, 2.125rem); letter-spacing: -0.025em; margin-bottom: 1.5rem; }
.contact-form .with-errors { font-size: .8125rem; color: var(--pk-brand); }
.contact-widget-right {
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-sm);
}
.contact-widget-right h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.contact-widget-right .contact-list li i { color: var(--pk-brand); }
/* Validation feedback */
.help-block.with-errors { font-size: .8125rem; color: var(--pk-brand); margin-top: .375rem; }
.form-control.error { border-color: var(--pk-brand-400); }
/* Native select skin */
.nice-select {
border-radius: var(--pk-r-md) !important;
border: 1.5px solid var(--pk-border) !important;
height: 48px !important;
line-height: 45px !important;
}
.nice-select .list { border-radius: var(--pk-r-md) !important; box-shadow: var(--pk-sh-lg) !important; }
/* ==========================================================================
15. INNER PAGE BANNER
========================================================================== */
.inner-banner::before {
background-image: linear-gradient(100deg,
rgba(8, 12, 22, .84) 0%,
rgba(8, 12, 22, .66) 45%,
rgba(8, 12, 22, .32) 100%);
}
.inner-banner .inner-title {
padding-top: clamp(5rem, 12vw, 9.25rem);
padding-bottom: clamp(5rem, 12vw, 9.25rem);
}
.inner-banner .inner-title h1,
.inner-banner .inner-title h3 {
color: #ffffff;
font-size: clamp(1.875rem, 4vw, 2.875rem);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.14;
text-wrap: balance;
text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}
.inner-banner .inner-title ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem 1.25rem;
margin-top: 1rem;
}
.inner-banner .inner-title ul li { font-size: .9375rem; font-weight: 500; }
.inner-banner .inner-title ul li a:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ==========================================================================
16. SERVICE PAGES - article + sticky sidebar
The article used to be a full-width col-lg-12 wall of text. It now runs at
a readable measure beside a sticky sidebar carrying service navigation and
a contact card.
========================================================================== */
/* --- Article body --- */
.case-article .case-article-content h2,
.case-article .case-article-other h2 {
color: var(--pk-ink-900);
font-size: clamp(1.375rem, 2.1vw, 1.75rem);
letter-spacing: -0.022em;
margin: 2.25rem 0 .875rem;
padding-left: .875rem;
position: relative;
}
.case-article .case-article-content > h2:first-child,
.case-article .case-article-other > h2:first-child { margin-top: 0; }
/* Brand rule beside every section heading */
.case-article .case-article-content h2::before,
.case-article .case-article-other h2::before {
content: "";
position: absolute;
left: 0;
top: .15em;
bottom: .15em;
width: 4px;
border-radius: 2px;
background-color: var(--pk-brand);
}
/* First paragraph reads as a lead */
.case-article .case-article-content > h2:first-child + p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--pk-ink-700);
}
.single-content p,
.case-article .case-article-content p,
.case-article .case-article-other p {
color: var(--pk-ink-600);
font-size: 1.0625rem;
line-height: 1.75;
margin-bottom: 1rem;
}
.case-article .case-article-content p,
.case-article .case-article-other p { max-width: 68ch; }
/* Bulleted lists become brand check rows */
.case-article .case-article-content ul,
.case-article .case-article-other ul,
.single-content ul {
list-style: none;
padding-left: 0;
margin: 0 0 1.5rem;
max-width: 70ch;
}
.case-article .case-article-content ul li,
.case-article .case-article-other ul li,
.single-content ul li {
position: relative;
padding-left: 1.875rem;
margin-bottom: .75rem;
line-height: 1.7;
color: var(--pk-ink-600);
font-size: 1rem;
}
.case-article .case-article-content ul li::before,
.case-article .case-article-other ul li::before,
.single-content ul li::before {
content: "";
position: absolute;
left: 0;
top: .45em;
width: 20px;
height: 20px;
border-radius: var(--pk-r-pill);
background-color: var(--pk-brand-100);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23af1d1e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.single-content ul li::marker { content: none; }
/* "Label: description" list items */
.case-article ul li strong { color: var(--pk-ink-900); font-weight: 600; }
/* The compression page keeps its numbered list (needs to out-specify the
check-row rules above) */
.case-article .case-article-content ul.compression-content,
.case-article .case-article-other ul.compression-content {
list-style: decimal;
padding-left: 1.5rem;
}
.case-article .case-article-content ul.compression-content li,
.case-article .case-article-other ul.compression-content li { padding-left: .25rem; }
.case-article .case-article-content ul.compression-content li::before,
.case-article .case-article-other ul.compression-content li::before { display: none; }
.case-article ul.compression-content li::marker { color: var(--pk-brand); font-weight: 700; }
.case-article .case-details-img img,
.case-article .case-article-other .article-img img {
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-sm);
width: 100%;
}
.case-article .case-article-other .article-img { margin-bottom: 1.75rem; }
.case-article .case-article-other .article-img [class*="col-"] { margin-bottom: 1.5rem; }
.case-article .case-details-img { margin-top: 1.75rem; }
.boss-link { color: var(--pk-brand); text-decoration: underline; text-underline-offset: 3px; }
.boss-link:hover { color: var(--pk-brand-700); }
/* --- .single-content blocks become cards (vaccines, minor ailments) --- */
.single-content {
max-width: none;
background-color: var(--pk-surface);
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-xs);
padding: clamp(1.375rem, 2.4vw, 1.875rem);
margin-bottom: 1.25rem;
transition: box-shadow var(--pk-dur) var(--pk-ease),
border-color var(--pk-dur) var(--pk-ease);
}
.single-content:last-of-type { border-bottom: 1px solid var(--pk-border); }
.single-content:hover { border-color: var(--pk-brand-200); box-shadow: var(--pk-sh-sm); }
.single-content h3 {
color: var(--pk-ink-900);
font-size: 1.1875rem;
letter-spacing: -0.018em;
margin-bottom: .875rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--pk-border);
}
.single-content p { font-size: 1rem; margin-bottom: .75rem; }
.single-content ul { margin-bottom: 1rem; }
.single-content ul li { font-size: .9688rem; }
/* --- Sticky sidebar --- */
.service-sidebar {
position: -webkit-sticky;
position: sticky;
top: 6.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-bottom: 1.875rem;
}
.sidebar-card {
background-color: var(--pk-surface);
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-sm);
padding: 1.5rem 1.375rem;
}
.sidebar-title {
font-family: var(--pk-font-body);
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pk-ink-400);
margin: 0 0 1rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--pk-border);
}
.service-nav { list-style: none; margin: 0; padding: 0; }
.service-nav li { margin: 0 0 .125rem; }
.service-nav li a {
display: flex;
align-items: center;
gap: .625rem;
min-height: 44px;
padding: .5rem .75rem;
border-radius: var(--pk-r-sm);
color: var(--pk-ink-600);
font-size: .9375rem;
font-weight: 500;
line-height: 1.4;
transition: background-color var(--pk-dur) var(--pk-ease),
color var(--pk-dur) var(--pk-ease);
}
.service-nav li a::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: var(--pk-r-pill);
background-color: var(--pk-border-strong);
transition: background-color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease);
}
.service-nav li a:hover { background-color: var(--pk-surface-alt); color: var(--pk-ink-900); }
.service-nav li a:hover::before { background-color: var(--pk-brand); }
.service-nav li.active a {
background-color: var(--pk-brand-50);
color: var(--pk-brand);
font-weight: 600;
}
.service-nav li.active a::before { background-color: var(--pk-brand); transform: scale(1.35); }
.sidebar-cta { background-color: var(--pk-surface-alt); }
.sidebar-cta p {
font-size: .9375rem;
line-height: 1.6;
color: var(--pk-ink-600);
margin-bottom: 1rem;
}
.sidebar-phone {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 46px;
border-radius: var(--pk-r-pill);
background-color: var(--pk-surface);
border: 1.5px solid var(--pk-brand-200);
color: var(--pk-brand);
font-weight: 700;
font-size: 1rem;
font-variant-numeric: tabular-nums;
margin-bottom: .625rem;
}
.sidebar-phone i { font-size: 1.1875rem; line-height: 0; }
.sidebar-phone:hover {
background-color: var(--pk-brand);
border-color: var(--pk-brand);
color: #ffffff;
}
.sidebar-btn { width: 100%; }
/* The legacy global a:visited rule inherits the card's dark text color. */
a.default-btn.sidebar-btn,
a.default-btn.sidebar-btn:link,
a.default-btn.sidebar-btn:visited,
a.default-btn.sidebar-btn:hover,
a.default-btn.sidebar-btn:focus-visible,
a.default-btn.sidebar-btn:active {
color: #ffffff !important;
}
.sidebar-hours {
list-style: none;
margin: 1.25rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid var(--pk-border);
font-variant-numeric: tabular-nums;
}
.sidebar-hours li {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: .875rem;
color: var(--pk-ink-600);
padding: .1875rem 0;
}
.sidebar-hours li span { font-weight: 600; color: var(--pk-ink-900); }
@media (max-width: 991px) {
.service-sidebar { position: static; margin-top: 2.5rem; }
}
/* ==========================================================================
17. FOOTER
========================================================================== */
.footer-area {
background-color: var(--pk-surface-alt);
border-top: 1px solid var(--pk-border);
}
.footer-widget h3 {
font-size: 1rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--pk-ink-900);
margin-bottom: 1.25rem;
}
.footer-widget p { color: var(--pk-ink-600); }
.footer-widget .footer-logo img { max-height: 76px; width: auto; }
.footer-widget .open-hours-list li,
.footer-widget .footer-list li,
.footer-widget .footer-contact-list li { color: var(--pk-ink-600); font-weight: 400; }
.footer-widget .open-hours-list li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .4375rem 0;
border-bottom: 1px dashed var(--pk-border);
}
.footer-widget .open-hours-list li::before { display: none; }
.footer-widget .open-hours-list li:last-child { border-bottom: 0; }
.footer-widget .open-hours-list li span {
font-weight: 600;
color: var(--pk-ink-900);
float: none;
}
.footer-widget .footer-list li a,
.footer-widget .footer-contact-list li .content a {
color: var(--pk-ink-600);
font-weight: 400;
}
.footer-widget .footer-list li a:hover,
.footer-widget .footer-contact-list li:hover a,
.footer-widget .footer-contact-list li:hover {
color: var(--pk-brand);
letter-spacing: normal;
}
.footer-widget .footer-contact-list li i,
.footer-widget .footer-contact-list li:hover i { color: var(--pk-brand); }
.footer-copyright-area {
border-top: 1px solid var(--pk-border);
padding-top: 1.25rem;
margin-top: 1rem;
}
.footer-copyright-text p, .footer-conditions li a {
color: var(--pk-ink-400);
font-size: .875rem;
}
.footer-conditions li a:hover { color: var(--pk-brand); }
.social-link li a {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: var(--pk-r-pill);
background: var(--pk-surface);
border: 1px solid var(--pk-border);
color: var(--pk-ink-600);
}
.social-link li a:hover {
background: var(--pk-brand);
border-color: var(--pk-brand);
color: #ffffff;
transform: translateY(-2px);
}
/* ==========================================================================
18. UTILITIES / MISC
========================================================================== */
/* Top bar removed from the markup; .section-title span / .eyebrow-tag
carry the section labelling instead (see section 9). */
.top-btn, .back-to-top {
border-radius: var(--pk-r-pill);
box-shadow: var(--pk-sh-md);
background-color: var(--pk-brand);
width: 46px; height: 46px;
display: grid; place-items: center;
}
.top-btn:hover { background-color: var(--pk-brand-600); }
img { max-width: 100%; height: auto; }
/* Thin, brand-tinted scrollbar (desktop) */
@media (pointer: fine) {
* { scrollbar-width: thin; scrollbar-color: var(--pk-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
background: var(--pk-border-strong);
border-radius: var(--pk-r-pill);
border: 3px solid var(--pk-surface);
}
::-webkit-scrollbar-thumb:hover { background: var(--pk-ink-400); }
}
/* ==========================================================================
19. RESPONSIVE REFINEMENTS
========================================================================== */
@media (max-width: 991px) {
.about-right-img { margin-bottom: 2.5rem; }
.about-right-img .about-open-hours {
position: static;
max-width: 100%;
margin-top: 1.25rem;
}
.banner-bottom-two { margin-top: 0; }
}
@media (max-width: 767px) {
.banner-content-two {
padding-top: clamp(6rem, 30vw, 9rem);
padding-bottom: clamp(3.5rem, 16vw, 6rem);
}
.banner-content-two h1 { font-size: clamp(1.75rem, 7.2vw, 2.25rem); }
.service-card, .case-study-card { height: auto; }
.single-content p, .case-article .case-article-content p { font-size: 1rem; }
.inner-banner .inner-title ul { gap: .375rem 1rem; }
}
/* No overflow clamp here on purpose: measured scrollWidth == clientWidth at
380px, so nothing overflows, and `overflow-x` on the root propagates to the
viewport - `hidden` makes body a scroll container and `clip` makes the
viewport unscrollable. Either one breaks the sticky navbar. Decorative
absolutes are contained by their own `overflow: hidden` instead. */
.banner-area-two,
.banner-bottom-item,
.appointment-area,
.testimonials-area { overflow-x: clip; }
/* ==========================================================================
21. PRESCRIPTION PAGES - forms + upload
Fields gained visible labels (they were placeholder-only), and the bare
file input became a dropzone whose files can be removed or restored.
========================================================================== */
/* --- Section shell --- */
.appointment-widget {
background-color: var(--pk-surface-alt);
background-image: radial-gradient(85% 55% at 50% 0%, rgba(175, 29, 30, .06), rgba(175, 29, 30, 0) 65%);
}
.appointment-widget-right h2,
.appointment-widget-form .appointment-from h2 {
font-size: clamp(1.5rem, 2.6vw, 2rem);
letter-spacing: -0.024em;
color: var(--pk-ink-900);
}
.appointment-widget-right img {
border-radius: var(--pk-r-lg);
box-shadow: var(--pk-sh-md);
margin-top: 1.75rem;
width: 100%;
}
.appointment-widget-right.text-center p { max-width: 62ch; margin-left: auto; margin-right: auto; }
/* Left column reads as numbered steps (new-prescriptions) */
.appointment-widget-right:not(.text-center) {
counter-reset: rxstep;
}
.appointment-widget-right:not(.text-center) p.left-align-gx- {
counter-increment: rxstep;
position: relative;
padding: .125rem 0 0 3.25rem;
margin-bottom: 1.25rem;
min-height: 2.25rem;
color: var(--pk-ink-700);
font-size: 1.0625rem;
line-height: 1.6;
max-width: 46ch;
}
.appointment-widget-right:not(.text-center) p.left-align-gx-::before {
content: counter(rxstep);
position: absolute;
left: 0;
top: 0;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: var(--pk-r-pill);
background-color: var(--pk-brand);
color: #ffffff;
font-family: var(--pk-font-body);
font-weight: 700;
font-size: .9375rem;
box-shadow: 0 4px 10px rgba(175, 29, 30, .26);
}
/* Connector line between steps */
.appointment-widget-right:not(.text-center) p.left-align-gx-::after {
content: "";
position: absolute;
left: 17px;
top: 40px;
bottom: -1.25rem;
width: 2px;
background: linear-gradient(var(--pk-brand-200), rgba(241, 196, 196, 0));
}
.appointment-widget-right:not(.text-center) p.left-align-gx-:last-of-type::after { display: none; }
/* --- The form card --- */
.appointment-widget-form .appointment-from {
background-color: var(--pk-surface);
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-xl);
box-shadow: var(--pk-sh-lg);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.appointment-widget-form .appointment-from h2 {
text-align: left;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--pk-border);
}
/* --- Field labels --- */
.field-label {
display: block;
font-family: var(--pk-font-body);
font-size: .8125rem;
font-weight: 600;
letter-spacing: .01em;
color: var(--pk-ink-700);
margin-bottom: .375rem;
line-height: 1.35;
}
.field-label .req { color: var(--pk-brand); margin-left: .1875rem; font-weight: 700; }
.appointment-from .form-group { margin-bottom: 1.125rem; }
/* Placeholders become quieter hints now that labels carry the meaning */
.appointment-from .form-control::placeholder { color: var(--pk-ink-400); opacity: .85; }
/* Native select needs its own chevron */
.appointment-from select.form-control,
select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 18px 18px;
cursor: pointer;
}
/* --- Upload dropzone --- */
.rx-upload { margin-bottom: 1.25rem; }
.rx-dropzone {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .375rem;
text-align: center;
padding: 1.75rem 1.25rem;
border: 2px dashed var(--pk-border-strong);
border-radius: var(--pk-r-lg);
background-color: var(--pk-surface-alt);
cursor: pointer;
transition: border-color var(--pk-dur) var(--pk-ease),
background-color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease);
}
.rx-dropzone:hover,
.rx-dropzone.is-dragover {
border-color: var(--pk-brand);
background-color: var(--pk-brand-50);
}
.rx-dropzone.is-dragover { transform: scale(1.01); }
.rx-dropzone:focus-within {
outline: 3px solid var(--pk-brand-400);
outline-offset: 3px;
}
/* The real input covers the zone so a click anywhere opens the picker */
.rx-file-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.rx-dz-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: var(--pk-r-pill);
background-color: var(--pk-brand-100);
color: var(--pk-brand);
margin-bottom: .25rem;
}
.rx-dz-icon svg { width: 22px; height: 22px; }
.rx-dz-title {
font-family: var(--pk-font-head);
font-weight: 700;
font-size: 1rem;
color: var(--pk-ink-900);
}
.rx-dz-hint { font-size: .8125rem; color: var(--pk-ink-400); line-height: 1.45; }
/* --- Selected files --- */
.rx-file-list { list-style: none; margin: 0; padding: 0; }
.rx-upload.has-files .rx-file-list { margin-top: .875rem; display: grid; gap: .5rem; }
.rx-file {
display: flex;
align-items: center;
gap: .75rem;
padding: .5rem .5rem .5rem .5rem;
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-md);
background-color: var(--pk-surface);
box-shadow: var(--pk-sh-xs);
}
.rx-file.is-too-big { border-color: var(--pk-brand-200); background-color: var(--pk-brand-50); }
.rx-file-thumb {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: var(--pk-r-sm);
overflow: hidden;
background-color: var(--pk-surface-sunken);
display: grid;
place-items: center;
}
.rx-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-file-thumb.is-doc {
font-family: var(--pk-font-body);
font-size: .625rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--pk-brand);
background-color: var(--pk-brand-50);
}
.rx-file-meta { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.rx-file-name {
font-size: .875rem;
font-weight: 500;
color: var(--pk-ink-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rx-file-size { font-size: .75rem; color: var(--pk-ink-400); font-variant-numeric: tabular-nums; }
.rx-file.is-too-big .rx-file-size { color: var(--pk-brand); font-weight: 600; }
.rx-file-remove {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 0;
border-radius: var(--pk-r-pill);
background-color: transparent;
color: var(--pk-ink-400);
cursor: pointer;
transition: background-color var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease);
}
.rx-file-remove svg { width: 15px; height: 15px; }
.rx-file-remove:hover,
.rx-file-remove:focus-visible { background-color: var(--pk-brand); color: #ffffff; }
/* --- Undo strip --- */
.rx-undo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: .625rem;
padding: .625rem .75rem .625rem 1rem;
border-radius: var(--pk-r-md);
background-color: var(--pk-ink-900);
color: #ffffff;
font-size: .875rem;
}
.rx-undo-btn {
border: 0;
background: transparent;
color: #ffffff;
font-family: var(--pk-font-body);
font-weight: 700;
font-size: .875rem;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
padding: .375rem .5rem;
border-radius: var(--pk-r-sm);
min-height: 32px;
}
.rx-undo-btn:hover, .rx-undo-btn:focus-visible { background: rgba(255, 255, 255, .16); }
/* --- Remove all --- */
.rx-clear-all {
margin-top: .625rem;
border: 0;
background: transparent;
color: var(--pk-brand);
font-family: var(--pk-font-body);
font-size: .8125rem;
font-weight: 600;
cursor: pointer;
padding: .375rem .5rem .375rem 0;
text-decoration: underline;
text-underline-offset: 3px;
min-height: 32px;
}
.rx-clear-all:hover { color: var(--pk-brand-700); }
.rx-status {
font-size: .75rem;
color: var(--pk-ink-400);
margin-top: .375rem;
min-height: 1em;
}
/* refill + transfer drop the form into a full-width col-lg-12; cap the
measure so field rows stay scannable (no effect inside col-lg-6). */
.appointment-widget-form { max-width: 52rem; margin-left: auto; margin-right: auto; }
/* Submit sits apart from the fields */
.appointment-widget-form .appointment-from .default-btn { width: 100%; margin-top: .5rem; }
@media (max-width: 991px) {
.appointment-widget-right { margin-bottom: 2.5rem; }
}
/* ==========================================================================
22. PRESCRIPTION PAGES - closing CTA
These pages already carry a full submission form, so the second contact form
became a compact call-to-action instead.
========================================================================== */
.rx-cta {
position: relative;
background-color: var(--pk-brand);
/* same brand gradient as .bg-main and .appointment-bg, with the matching
dot texture and top highlight so all the red bands read as one family */
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .085) 1px, transparent 0),
radial-gradient(110% 80% at 50% 0%, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 62%),
linear-gradient(150deg, var(--pk-brand) 0%, var(--pk-brand-700) 100%);
background-size: 26px 26px, 100% 100%, 100% 100%;
padding: clamp(2.5rem, 5vw, 3.75rem) 0;
overflow: hidden;
}
.rx-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.rx-cta-text { flex: 1 1 26rem; min-width: 0; }
.rx-cta-text .eyebrow-tag {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .26);
color: #ffffff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
margin-bottom: .75rem;
}
.rx-cta-text h2 {
color: #ffffff;
font-size: clamp(1.375rem, 2.4vw, 1.875rem);
letter-spacing: -0.024em;
margin-bottom: .5rem;
text-wrap: balance;
}
.rx-cta-text p {
color: rgba(255, 255, 255, .76);
font-size: 1rem;
line-height: 1.65;
margin: 0;
max-width: 52ch;
}
.rx-cta-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem 1.25rem;
}
.rx-cta-call {
display: inline-flex;
align-items: center;
gap: .625rem;
min-height: 52px;
padding: .75rem 1.625rem;
border-radius: var(--pk-r-pill);
/* white on the red band - a brand-red button would disappear into it */
background-color: #ffffff;
color: var(--pk-brand);
font-family: var(--pk-font-body);
font-weight: 700;
font-size: 1.0625rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
box-shadow: 0 8px 22px rgba(60, 8, 8, .28);
transition: background-color var(--pk-dur) var(--pk-ease),
color var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease),
box-shadow var(--pk-dur) var(--pk-ease);
}
.rx-cta-call i { font-size: 1.25rem; line-height: 0; }
.rx-cta-call:hover,
.rx-cta-call:focus-visible {
background-color: var(--pk-brand-50);
color: var(--pk-brand-700);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(40, 4, 4, .34);
}
.rx-cta-call:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.rx-cta-link,
.rx-cta-link:link,
.rx-cta-link:visited {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px;
color: #ffffff !important;
font-weight: 600;
font-size: .9375rem;
border-bottom: 1px solid rgba(255, 255, 255, .35);
padding-bottom: 2px;
}
.rx-cta-link i { font-size: .75rem; transition: transform var(--pk-dur) var(--pk-ease-out); }
.rx-cta-link:hover,
.rx-cta-link:focus-visible,
.rx-cta-link:active {
color: #ffffff !important;
border-bottom-color: #ffffff;
}
.rx-cta-link:hover i { transform: translateX(4px); }
@media (max-width: 767px) {
.rx-cta-inner { flex-direction: column; align-items: flex-start; }
/* flex-basis becomes a HEIGHT once the container is a column - reset it */
.rx-cta-text { flex: 0 0 auto; width: 100%; }
.rx-cta-actions { width: 100%; flex: 0 0 auto; }
.rx-cta-call { width: 100%; justify-content: center; }
}
/* ==========================================================================
23. FINAL PASS - responsive + a11y corrections found in the QA sweep
========================================================================== */
/* contact.html overflowed by 14px at 320px: the contact-info card's fixed
padding plus the grid gutter exceeded the viewport. */
@media (max-width: 359px) {
.container, .container-fluid { padding-left: 12px; padding-right: 12px; }
.contact-widget-right { padding-left: 1rem; padding-right: 1rem; }
.contact-form .form-group .form-control,
.appointment-from .form-group .form-control { font-size: 1rem; }
}
/* Comfortable tap targets for list navigation on touch screens.
Inline links inside prose are deliberately excluded. */
@media (max-width: 991px) {
.footer-widget .footer-list li a,
.footer-widget .footer-contact-list li .content a,
.footer-conditions li a,
.inner-banner .inner-title ul li a,
.service-nav li a,
.mean-container .mean-nav ul li a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-widget .open-hours-list li { min-height: 40px; }
}
/* Long unbroken strings (emails, prescription numbers) must not force a scrollbar */
.rx-ci-body a,
.footer-widget .footer-contact-list li .content a,
.contact-widget-right .contact-list li .content a { overflow-wrap: anywhere; }
/* Headings should never overflow their box on small screens */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* Respect users who ask for less motion in the carousel too */
@media (prefers-reduced-motion: reduce) {
.owl-carousel .owl-item { transition: none !important; }
}
/* --- Form submission + validation states (assets/js/forms.js) --- */
.form-control.is-touched:invalid,
.was-validated .form-control:invalid {
border-color: var(--pk-brand-400);
background-color: var(--pk-brand-50);
}
.form-control.is-touched:invalid:focus,
.was-validated .form-control:invalid:focus {
border-color: var(--pk-brand);
box-shadow: 0 0 0 4px rgba(175, 29, 30, .16);
}
.form-control.is-touched:valid:not(:placeholder-shown) { border-color: var(--pk-border-strong); }
form.is-submitting { cursor: progress; }
form.is-submitting .form-control { opacity: .7; pointer-events: none; }
.default-btn[disabled],
.default-btn-two[disabled] {
opacity: .6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Back-to-top is toggled by a class now, not jQuery fadeIn/fadeOut */
.top-btn {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: var(--pk-z-float);
border: 0;
color: #ffffff;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--pk-dur) var(--pk-ease),
visibility var(--pk-dur) var(--pk-ease),
transform var(--pk-dur) var(--pk-ease),
background-color var(--pk-dur) var(--pk-ease);
}
.top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* Nothing may exceed its column on very narrow screens */
.form-control, .nice-select, input, select, textarea { max-width: 100%; }
input.form-control { width: 100%; }
/* ==========================================================================
24. 404
========================================================================== */
.error-404-inner { max-width: 46rem; }
.error-404-inner h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-bottom: .75rem; }
.error-404-inner > p { font-size: 1.0625rem; max-width: 56ch; margin-bottom: 1.75rem; }
.error-404-links {
list-style: none;
margin: 0 0 2rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: .5rem;
}
.error-404-links li a {
display: flex;
align-items: center;
gap: .625rem;
min-height: 48px;
padding: .625rem .875rem;
border: 1px solid var(--pk-border);
border-radius: var(--pk-r-md);
background: var(--pk-surface);
color: var(--pk-ink-700);
font-weight: 500;
font-size: .9375rem;
}
.error-404-links li a i { font-size: 1.125rem; color: var(--pk-brand); line-height: 0; }
.error-404-links li a:hover {
border-color: var(--pk-brand-200);
background: var(--pk-brand-50);
color: var(--pk-brand);
transform: translateY(-2px);
}
.error-404-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.error-404-cta a.default-btn,
.error-404-cta a.default-btn:link,
.error-404-cta a.default-btn:visited,
.error-404-cta a.default-btn:hover,
.error-404-cta a.default-btn:focus-visible,
.error-404-cta a.default-btn:active {
color: #ffffff !important;
}
.error-404-call {
display: inline-flex; align-items: center; gap: .5rem;
min-height: 44px; font-weight: 700; color: var(--pk-brand);
font-variant-numeric: tabular-nums;
}
.error-404-call:hover { color: var(--pk-brand-700); }
/* ==========================================================================
25. FORM SUBMISSION FEEDBACK
========================================================================== */
.hp-field {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.form-status {
display: flex;
align-items: flex-start;
gap: .75rem;
padding: 1rem 1.125rem;
margin-bottom: 1.5rem;
border-radius: var(--pk-r-md);
border: 1px solid;
font-size: .9375rem;
line-height: 1.55;
}
.form-status:focus { outline: 3px solid var(--pk-brand-400); outline-offset: 3px; }
.form-status p { margin: 0; color: inherit; font-size: inherit; }
.form-status__icon {
flex: 0 0 auto;
width: 22px; height: 22px;
margin-top: .0625rem;
border-radius: var(--pk-r-pill);
background-repeat: no-repeat;
background-position: center;
background-size: 13px 13px;
}
.form-status--ok {
background-color: #eaf7f1;
border-color: #bfe6d4;
color: #14543c;
}
.form-status--ok .form-status__icon {
background-color: #0e7c6b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}
.form-status--err {
background-color: var(--pk-brand-50);
border-color: var(--pk-brand-200);
color: var(--pk-brand-700);
}
.form-status--err .form-status__icon {
background-color: var(--pk-brand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v7M12 17.5v.01'/%3E%3C/svg%3E");
}
/* On the dark contact band the banner needs its own footing */
/* .margin-top-gx is an invisible 120px spacer; the CTA band already closes the
page and the footer brings its own padding. */
.rx-cta + hr.margin-top-gx { margin-top: 0; padding-top: 0; }
/* ==========================================================================
26. MOBILE NAVIGATION (< 992px)
meanmenu's own model, which has to be respected rather than overridden:
.mean-bar is position:absolute, a fixed-height strip laid over .mobile-nav
.mean-nav is float:left; width:100% and hangs *below* it via margin-top
So .mobile-nav must stay a block (making it a flex container turned the bar
into a non-stretching flex item and the drawer spilled out of a 73px box),
and the bar height must match .mean-nav's margin-top. Both are 64px here.
========================================================================== */
@media (max-width: 991px) {
/* --- The bar --- */
.mobile-nav {
position: relative;
display: block;
min-height: 64px;
background-color: rgba(255, 255, 255, .97);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--pk-border);
border-radius: 0 0 var(--pk-r-lg) var(--pk-r-lg);
box-shadow: 0 2px 10px rgba(16, 24, 43, .06);
}
.mobile-nav .logo {
display: inline-flex;
align-items: center;
height: 64px;
padding-left: .875rem;
}
.mobile-nav .logo img {
height: 42px !important;
width: auto !important;
max-width: none !important;
margin-top: 0 !important;
}
/* --- Call button: the primary action for someone holding a phone --- */
.mobile-call {
position: absolute;
top: 32px;
right: 4.125rem;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: var(--pk-r-pill);
background-color: var(--pk-brand);
color: #ffffff;
box-shadow: 0 4px 12px rgba(175, 29, 30, .3);
z-index: 1000; /* above .mean-bar (999) */
transition: background-color var(--pk-dur) var(--pk-ease);
}
.mobile-call i { font-size: 1.3125rem; line-height: 0; }
.mobile-call:hover, .mobile-call:focus-visible { background-color: var(--pk-brand-600); color: #ffffff; }
.mobile-call:active { transform: translateY(-50%) scale(.94); }
/* --- Keep meanmenu's absolute strip, just resize and clear it --- */
.mean-container .mean-bar {
height: 64px;
padding: 0;
background: transparent;
border-bottom: 0;
}
/* --- Hamburger --- */
.mean-container a.meanmenu-reveal {
top: 32px;
right: .75rem;
transform: translateY(-50%);
width: 44px;
height: 44px;
padding: 0;
display: grid !important;
place-items: center;
border-radius: var(--pk-r-md);
background-color: var(--pk-surface-sunken);
border: 1px solid var(--pk-border);
color: var(--pk-ink-900) !important;
line-height: 1;
transition: background-color var(--pk-dur) var(--pk-ease);
}
/* the markup is - nested, not siblings,
so the bars are drawn on the anchor and the spans are hidden */
.mean-container a.meanmenu-reveal { font-size: 0 !important; text-indent: 0 !important; }
.mean-container a.meanmenu-reveal span { display: none !important; }
.mean-container a.meanmenu-reveal::before {
content: "";
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--pk-ink-900);
box-shadow: 0 -6px 0 var(--pk-ink-900), 0 6px 0 var(--pk-ink-900);
}
.mean-container a.meanmenu-reveal.meanclose::before { content: none; }
/* meanmenu replaces the bars with a literal "x" while open */
.mean-container a.meanmenu-reveal.meanclose {
font-size: 1.375rem !important;
font-weight: 700;
text-indent: 0 !important;
line-height: 42px !important;
text-align: center;
color: var(--pk-brand) !important;
background-color: var(--pk-brand-50);
border-color: var(--pk-brand-100);
}
/* --- The drawer sheet --- */
.mean-container .mean-nav {
margin-top: 64px; /* must equal .mean-bar height */
background: var(--pk-surface);
border-top: 1px solid var(--pk-border);
box-shadow: 0 20px 34px rgba(16, 24, 43, .16);
}
.mean-container .mean-nav > ul {
background: var(--pk-surface);
padding: .5rem .625rem 1rem;
box-sizing: border-box; /* ul is width:100%; padding must stay inside */
max-width: 100%;
}
/* meanmenu.css forces `box-sizing: content-box` on .mean-bar and everything
inside it, so any padding on a width:100% row is added on top and the page
scrolls sideways while the drawer is open. */
.mean-container .mean-bar,
.mean-container .mean-bar * { box-sizing: border-box; }
.mean-container .mean-nav ul,
.mean-container .mean-nav ul li { max-width: 100%; }
/* meanmenu floats every li (legacy layout). The floats were not contributing
height, so the white sheet stopped short and the last rows sat on bare
page content. Normal block flow instead. */
.mean-container .mean-nav,
.mean-container .mean-nav > ul,
.mean-container .mean-nav ul li,
.mean-container .mean-nav ul li > a { float: none !important; }
.mean-container .mean-nav > ul { display: flow-root; }
/* meanmenu opens the sheet with jQuery slideDown, which leaves an inline
overflow:hidden and an animated height behind. If that state is ever left
mid-flight the last rows (Contact, and every expanded sub-item) are simply
not painted. The open sheet must always show its full contents. */
.mean-container .mean-nav > ul,
.mean-container .mean-nav ul ul { height: auto !important; overflow: visible !important; }
.mean-container .mean-nav ul ul { background: var(--pk-surface); }
.mean-container .mean-nav ul li { border-top: 0; position: relative; }
.mean-container .mean-nav ul li a {
font-family: var(--pk-font-body);
font-size: 1rem;
font-weight: 600;
color: var(--pk-ink-800);
width: 100%;
padding: .8125rem 3.25rem .8125rem .875rem;
min-height: 50px;
display: flex;
align-items: center;
border-top: 0;
border-radius: var(--pk-r-md);
text-transform: none;
transition: background-color var(--pk-dur) var(--pk-ease), color var(--pk-dur) var(--pk-ease);
}
.mean-container .mean-nav ul li a:hover,
.mean-container .mean-nav ul li a:focus-visible {
background-color: var(--pk-surface-alt);
color: var(--pk-ink-900);
}
.mean-container .mean-nav ul li a.active,
.mobile-nav.mean-container .mean-nav ul li a.active {
background-color: var(--pk-brand-50);
color: var(--pk-brand) !important;
}
.mean-container .mean-nav > ul > li + li::before {
content: "";
position: absolute;
left: .875rem;
right: .875rem;
top: 0;
height: 1px;
background: var(--pk-border);
}
/* --- Sub-menus --- */
.mean-container .mean-nav ul li li a {
width: 100%;
padding: .6875rem .875rem .6875rem 1.75rem;
min-height: 44px;
font-size: .9375rem;
font-weight: 500;
color: var(--pk-ink-600);
opacity: 1;
border-top: 0;
}
.mean-container .mean-nav ul li li a::before {
content: "";
position: absolute;
left: .625rem;
top: 50%;
width: 5px;
height: 5px;
margin-top: -2px;
border-radius: var(--pk-r-pill);
background: var(--pk-border-strong);
}
.mean-container .mean-nav ul li li a:hover::before { background: var(--pk-brand); }
.mean-container .mean-nav ul li li { border-top: 0; }
/* --- +/- toggle: the stock one is nearly invisible --- */
.mean-container .mean-nav ul li a.mean-expand {
width: 40px !important;
height: 40px !important;
min-height: 40px;
padding: 0 !important;
top: 5px;
right: 6px;
display: grid !important;
place-items: center;
border: 1px solid var(--pk-border) !important;
border-radius: var(--pk-r-sm);
background-color: var(--pk-surface-alt) !important;
color: var(--pk-brand) !important;
font-size: 1.125rem !important;
font-weight: 700;
line-height: 1 !important;
}
.mean-container .mean-nav ul li a.mean-expand:hover,
.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
background-color: var(--pk-brand) !important;
border-color: var(--pk-brand) !important;
color: #ffffff !important;
}
.mean-container .mean-nav ul li li a.mean-expand { top: 2px; }
}
/* ==========================================================================
27. MOBILE HERO
.banner-img-2 is absolutely positioned on desktop but goes static on small
screens, where it added 348px of empty space under the headline (hero was
761px tall for 413px of content). It is decorative - the hero already has
its background photograph - so it is dropped below 992px.
========================================================================== */
@media (max-width: 991px) {
.banner-img-2 { display: none; }
/* the markup separates the eyebrow and headline with
; margins do
that job without the dead line boxes */
.banner-content-two br { display: none; }
.banner-content-two span { margin-bottom: 1rem; }
.banner-content-two h1 { margin-top: 0; margin-bottom: 0; }
.banner-content-two {
padding-top: clamp(3.5rem, 14vw, 5.5rem);
padding-bottom: clamp(3rem, 12vw, 4.5rem);
}
}