/*
Theme Name: London Homestays UKSE Skin Child
Theme URI: https://londonhomestays.com
Description: Child theme for London Homestays redesign. Inherits from londonhomestays parent theme.
Author: London Homestays
Author URI: https://londonhomestays.com
Template: londonhomestays
Version: 3.17.1
License: Private
Text Domain: londonhomestays-ukse-skin-child
*/
/* ==========================================================================
Design Tokens (CSS Custom Properties)
========================================================================== */
:root {
/* Brand Colours - LH Official */
--lh-primary: #2294D2; /* Primary blue */
--lh-primary-dark: #000032; /* Dark blue (nav, footer, hover) */
--lh-primary-light: #4fb3e8; /* Lighter blue for accents */
--lh-magenta: #E6007E; /* Magenta accent */
--lh-secondary: #E61E29; /* Secondary red */
--lh-secondary-dark: #c41a24; /* Darker red for hover */
--lh-orange: #EE7218; /* Orange accent (footer, location guides) */
--lh-cyan: #6ACAF3; /* Cyan/light blue accent */
--lh-green: #B1CB0C; /* Lime/chartreuse accent */
/* Blue Scale (extended) */
--lh-blue-50: #f5fafd; /* Lightest blue (page backgrounds) */
--lh-blue-700: #1a7ab8; /* Darker blue (gradients) */
/* Magenta Scale (extended) */
--lh-magenta-50: #fff5fb; /* Lightest magenta (testimonials bg) */
--lh-magenta-550: #c8007a; /* Dark magenta variant */
--lh-magenta-600: #c7006c; /* Dark magenta variant */
--lh-magenta-650: #c40069; /* Dark magenta variant */
--lh-magenta-700: #B80066; /* Darkest magenta (gradients) */
/* Neutral Palette */
--lh-white: #ffffff;
--lh-off-white: #f8f9fa;
--lh-grey-100: #f1f3f5;
--lh-grey-200: #e9ecef;
--lh-grey-300: #dee2e6;
--lh-grey-400: #ced4da;
--lh-grey-500: #adb5bd;
--lh-grey-600: #6c757d;
--lh-grey-700: #495057;
--lh-grey-800: #343a40;
--lh-grey-900: #212529;
--lh-black: #000000;
/* Typography - Proxima Nova loaded via Adobe Typekit in parent theme */
--lh-font-sans: "proxima-nova", "Proxima Nova", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--lh-font-primary: var(--lh-font-sans);
--lh-font-heading: var(--lh-font-sans);
--lh-font-size-base: 16px;
--lh-line-height-base: 1.6;
--lh-line-height-heading: 1.3;
/* Spacing Scale */
--lh-space-xs: 0.25rem; /* 4px */
--lh-space-sm: 0.5rem; /* 8px */
--lh-space-md: 1rem; /* 16px */
--lh-space-lg: 1.5rem; /* 24px */
--lh-space-xl: 2rem; /* 32px */
--lh-space-2xl: 3rem; /* 48px */
/* Border Radius */
--lh-radius-sm: 4px;
--lh-radius-md: 8px;
--lh-radius-lg: 12px;
--lh-radius-full: 9999px;
/* Shadows */
--lh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--lh-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--lh-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
/* Transitions */
--lh-transition-fast: 150ms ease;
--lh-transition-base: 250ms ease;
}
/* ==========================================================================
Global Base Styles (Scoped to body.lh-ukse-skin)
These styles only apply when the body has the lh-ukse-skin class,
preventing regressions in parent theme styling.
========================================================================== */
/* Body defaults - scoped to prevent parent override */
body.lh-ukse-skin {
font-family: var(--lh-font-primary);
font-size: var(--lh-font-size-base);
line-height: var(--lh-line-height-base);
color: var(--lh-grey-800);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Global Proxima Nova override - fix parent theme 'proxima_nova' (underscore) typos */
/* Parent theme incorrectly uses 'proxima_nova' but Typekit defines "proxima-nova" (hyphen) */
/* Excludes FontAwesome icons via separate rule below */
body.lh-ukse-skin,
body.lh-ukse-skin p,
body.lh-ukse-skin span:not([class*="fa-"]),
body.lh-ukse-skin a,
body.lh-ukse-skin li,
body.lh-ukse-skin button,
body.lh-ukse-skin input,
body.lh-ukse-skin select,
body.lh-ukse-skin textarea,
body.lh-ukse-skin div,
body.lh-ukse-skin article,
body.lh-ukse-skin section,
body.lh-ukse-skin table,
body.lh-ukse-skin th,
body.lh-ukse-skin td,
body.lh-ukse-skin blockquote,
body.lh-ukse-skin label,
body.lh-ukse-skin legend,
body.lh-ukse-skin figcaption {
font-family: "proxima-nova", "Proxima Nova", system-ui, -apple-system, sans-serif !important;
}
/* Preserve FontAwesome icons */
body.lh-ukse-skin i,
body.lh-ukse-skin i.fa,
body.lh-ukse-skin i.fab,
body.lh-ukse-skin i.fas,
body.lh-ukse-skin i.far,
body.lh-ukse-skin i.fal,
body.lh-ukse-skin [class^="fa-"],
body.lh-ukse-skin [class*=" fa-"] {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
}
/* Headings - scoped to prevent parent override */
/* Parent theme sets h1-h6 to 'ligurino_condensedregular' - must use !important */
/* NOTE: Do NOT set color here - let specific heading styles set their own colors */
body.lh-ukse-skin h1,
body.lh-ukse-skin h2,
body.lh-ukse-skin h3,
body.lh-ukse-skin h4,
body.lh-ukse-skin h5,
body.lh-ukse-skin h6 {
font-family: "proxima-nova", "Proxima Nova", system-ui, -apple-system, sans-serif !important;
line-height: var(--lh-line-height-heading);
margin-top: 0;
}
/* Links - scoped to prevent parent override */
body.lh-ukse-skin a {
color: var(--lh-primary);
text-decoration: none;
transition: color var(--lh-transition-fast);
}
body.lh-ukse-skin a:hover,
body.lh-ukse-skin a:focus {
color: var(--lh-primary-dark);
text-decoration: none;
}
/* Buttons - scoped to prevent parent override */
body.lh-ukse-skin button,
body.lh-ukse-skin .button,
body.lh-ukse-skin input[type="submit"],
body.lh-ukse-skin input[type="button"] {
font-family: var(--lh-font-primary);
font-size: inherit;
cursor: pointer;
border-radius: var(--lh-radius-sm);
transition: background-color var(--lh-transition-fast),
border-color var(--lh-transition-fast),
box-shadow var(--lh-transition-fast);
}
/* Primary button style (opt-in class) */
.lh-btn-primary {
display: inline-block;
padding: var(--lh-space-sm) var(--lh-space-lg);
background-color: var(--lh-primary);
color: var(--lh-white);
border: none;
border-radius: var(--lh-radius-sm);
font-weight: 600;
text-align: center;
text-decoration: none;
}
.lh-btn-primary:hover,
.lh-btn-primary:focus {
background-color: var(--lh-primary-dark);
color: var(--lh-white);
text-decoration: none;
}
/* Secondary button style (opt-in class) */
.lh-btn-secondary {
display: inline-block;
padding: var(--lh-space-sm) var(--lh-space-lg);
background-color: transparent;
color: var(--lh-primary);
border: 2px solid var(--lh-primary);
border-radius: var(--lh-radius-sm);
font-weight: 600;
text-align: center;
text-decoration: none;
}
.lh-btn-secondary:hover,
.lh-btn-secondary:focus {
background-color: var(--lh-primary);
color: var(--lh-white);
text-decoration: none;
}
/* ==========================================================================
M2: Container Utilities
========================================================================== */
.lh-container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--lh-space-lg);
padding-right: var(--lh-space-lg);
}
.lh-container-narrow {
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding-left: var(--lh-space-lg);
padding-right: var(--lh-space-lg);
}
.lh-container-wide {
width: 100%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: var(--lh-space-lg);
padding-right: var(--lh-space-lg);
}
/* Responsive padding - smaller on mobile */
@media (max-width: 768px) {
.lh-container,
.lh-container-narrow,
.lh-container-wide {
padding-left: var(--lh-space-md);
padding-right: var(--lh-space-md);
}
}
/* ==========================================================================
M2: Button Refinements
========================================================================== */
/* Magenta button variant */
.lh-btn-magenta {
display: inline-block;
padding: var(--lh-space-sm) var(--lh-space-lg);
background-color: var(--lh-magenta);
color: var(--lh-white);
border: none;
border-radius: var(--lh-radius-sm);
font-weight: 600;
text-align: center;
text-decoration: none;
transition: background-color var(--lh-transition-fast),
box-shadow var(--lh-transition-fast);
}
.lh-btn-magenta:hover,
.lh-btn-magenta:focus {
background-color: var(--lh-magenta-650); /* Darker magenta */
color: var(--lh-white);
text-decoration: none;
}
/* Button size variants */
.lh-btn-sm {
padding: var(--lh-space-xs) var(--lh-space-md);
font-size: 0.875rem;
}
.lh-btn-lg {
padding: var(--lh-space-md) var(--lh-space-xl);
font-size: 1.125rem;
}
/* Focus-visible for accessibility (keyboard navigation) */
.lh-btn-primary:focus-visible,
.lh-btn-secondary:focus-visible,
.lh-btn-magenta:focus-visible {
outline: 3px solid var(--lh-primary-light);
outline-offset: 2px;
}
/* ==========================================================================
M2: Link Improvements (Scoped)
========================================================================== */
/* GLOBAL NO-UNDERLINE POLICY:
Links never show underlines in any state (normal, hover, focus, active, visited).
Focus-visible outlines are preserved for accessibility (keyboard navigation). */
body.lh-ukse-skin a:hover,
body.lh-ukse-skin a:focus {
text-decoration: none !important;
}
body.lh-ukse-skin a:focus-visible {
outline: 2px solid var(--lh-primary);
outline-offset: 2px;
border-radius: var(--lh-radius-sm);
}
/* ==========================================================================
M2: Section Spacing Utilities
========================================================================== */
.lh-section {
padding-top: var(--lh-space-2xl);
padding-bottom: var(--lh-space-2xl);
}
.lh-section-sm {
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-xl);
}
.lh-section-lg {
padding-top: 4rem;
padding-bottom: 4rem;
}
/* Responsive section spacing */
@media (max-width: 768px) {
.lh-section {
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-xl);
}
.lh-section-sm {
padding-top: var(--lh-space-lg);
padding-bottom: var(--lh-space-lg);
}
.lh-section-lg {
padding-top: var(--lh-space-2xl);
padding-bottom: var(--lh-space-2xl);
}
}
/* ==========================================================================
M3: Card Component
========================================================================== */
.lh-card {
background-color: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-md);
padding: var(--lh-space-lg);
box-shadow: var(--lh-shadow-sm);
transition: box-shadow var(--lh-transition-base),
transform var(--lh-transition-base);
}
/* Flat variant - no shadow */
.lh-card--flat {
box-shadow: none;
border-color: var(--lh-grey-300);
}
/* Hover variant - lift effect on hover */
.lh-card--hover:hover {
box-shadow: var(--lh-shadow-lg);
transform: translateY(-2px);
}
/* Card with image header */
.lh-card__image {
margin: calc(-1 * var(--lh-space-lg));
margin-bottom: var(--lh-space-lg);
border-radius: var(--lh-radius-md) var(--lh-radius-md) 0 0;
overflow: hidden;
}
.lh-card__image img {
width: 100%;
height: auto;
display: block;
}
.lh-card__title {
margin-bottom: var(--lh-space-sm);
font-size: 1.25rem;
font-weight: 600;
color: var(--lh-grey-900);
}
.lh-card__text {
color: var(--lh-grey-600);
margin-bottom: var(--lh-space-md);
}
/* ==========================================================================
M3: Grid Utilities
========================================================================== */
.lh-grid {
display: grid;
gap: var(--lh-space-lg);
}
/* 2-column grid */
.lh-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
/* 3-column grid */
.lh-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
/* 4-column grid */
.lh-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
/* Auto-fit responsive grid */
.lh-grid--auto {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.lh-grid--2,
.lh-grid--3,
.lh-grid--4 {
grid-template-columns: 1fr;
}
}
/* Tablet: 2 columns for 3+ grids */
@media (min-width: 769px) and (max-width: 1024px) {
.lh-grid--3,
.lh-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
M3: Typography Refinements
========================================================================== */
/* Heading scale using tokens (opt-in refinements) */
.lh-h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: var(--lh-line-height-heading);
margin-bottom: var(--lh-space-lg);
}
.lh-h2 {
font-size: 2rem;
font-weight: 600;
line-height: var(--lh-line-height-heading);
margin-bottom: var(--lh-space-md);
}
.lh-h3 {
font-size: 1.5rem;
font-weight: 600;
line-height: var(--lh-line-height-heading);
margin-bottom: var(--lh-space-md);
}
.lh-h4 {
font-size: 1.25rem;
font-weight: 600;
line-height: var(--lh-line-height-heading);
margin-bottom: var(--lh-space-sm);
}
.lh-h5 {
font-size: 1.125rem;
font-weight: 600;
line-height: var(--lh-line-height-heading);
margin-bottom: var(--lh-space-sm);
}
.lh-h6 {
font-size: 1rem;
font-weight: 600;
line-height: var(--lh-line-height-heading);
margin-bottom: var(--lh-space-sm);
}
/* Lead paragraph */
.lh-lead {
font-size: 1.25rem;
line-height: 1.7;
color: var(--lh-grey-700);
}
/* Small/muted text */
.lh-small {
font-size: 0.875rem;
color: var(--lh-grey-600);
}
/* Text alignment utilities */
.lh-text-center { text-align: center; }
.lh-text-left { text-align: left; }
.lh-text-right { text-align: right; }
/* Responsive typography */
@media (max-width: 768px) {
.lh-h1 { font-size: 2rem; }
.lh-h2 { font-size: 1.625rem; }
.lh-h3 { font-size: 1.25rem; }
}
/* ==========================================================================
Child Theme Customisations
========================================================================== */
/* ==========================================================================
Button Polish — Unified Pill Style
Maps legacy single-dash classes to canonical BEM appearance
Preserves colour semantics: primary=blue, secondary=outline, magenta=magenta
========================================================================== */
/* Base button reset — pill shape, modern transitions */
.lh-btn-primary,
.lh-btn-secondary,
.lh-btn-magenta,
a.lh-btn-primary,
a.lh-btn-secondary,
a.lh-btn-magenta,
body.lh-ukse-skin a.lh-btn-primary,
body.lh-ukse-skin a.lh-btn-secondary,
body.lh-ukse-skin a.lh-btn-magenta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 12px 28px;
font-family: var(--lh-font-sans);
font-size: 1rem;
font-weight: 600;
line-height: 1;
border-radius: 999px;
border: none;
text-decoration: none !important;
cursor: pointer;
user-select: none;
transition: transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease;
}
/* Primary button — Blue gradient, white text, shadow lift on hover */
.lh-btn-primary,
a.lh-btn-primary,
body.lh-ukse-skin a.lh-btn-primary {
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-blue-700) 100%);
color: var(--lh-white) !important;
box-shadow: 0 8px 20px rgba(34, 148, 210, 0.25);
}
.lh-btn-primary:hover,
.lh-btn-primary:focus,
a.lh-btn-primary:hover,
a.lh-btn-primary:focus,
body.lh-ukse-skin a.lh-btn-primary:hover,
body.lh-ukse-skin a.lh-btn-primary:focus {
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-blue-700) 100%);
color: var(--lh-white) !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(34, 148, 210, 0.3);
text-decoration: none !important;
}
/* Magenta button — Magenta gradient (matches .lh-btn--primary CTA style) */
.lh-btn-magenta,
a.lh-btn-magenta,
body.lh-ukse-skin a.lh-btn-magenta {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta-700) 100%);
color: var(--lh-white) !important;
box-shadow: 0 10px 24px rgba(230, 0, 126, 0.25);
}
.lh-btn-magenta:hover,
.lh-btn-magenta:focus,
a.lh-btn-magenta:hover,
a.lh-btn-magenta:focus,
body.lh-ukse-skin a.lh-btn-magenta:hover,
body.lh-ukse-skin a.lh-btn-magenta:focus {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta-700) 100%);
color: var(--lh-white) !important;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(184, 0, 102, 0.25);
text-decoration: none !important;
}
/* Secondary button — True outline, colour shift on hover */
.lh-btn-secondary,
a.lh-btn-secondary,
body.lh-ukse-skin a.lh-btn-secondary {
background: transparent;
border: 2px solid var(--lh-primary);
color: var(--lh-primary-dark) !important;
box-shadow: none;
}
.lh-btn-secondary:hover,
.lh-btn-secondary:focus,
a.lh-btn-secondary:hover,
a.lh-btn-secondary:focus,
body.lh-ukse-skin a.lh-btn-secondary:hover,
body.lh-ukse-skin a.lh-btn-secondary:focus {
background: transparent;
border-color: var(--lh-primary);
color: var(--lh-primary) !important;
transform: none;
box-shadow: none;
text-decoration: none !important;
}
/* Focus-visible states for accessibility */
.lh-btn-primary:focus-visible,
.lh-btn-secondary:focus-visible,
.lh-btn-magenta:focus-visible,
a.lh-btn-primary:focus-visible,
a.lh-btn-secondary:focus-visible,
a.lh-btn-magenta:focus-visible {
outline: 3px solid var(--lh-primary);
outline-offset: 2px;
}
/* Small button adjustments */
.lh-btn-sm,
a.lh-btn-sm {
min-height: 36px;
padding: 8px 16px;
font-size: 0.875rem;
}
/* Large button adjustments */
.lh-btn-lg,
a.lh-btn-lg {
min-height: 52px;
padding: 16px 36px;
font-size: 1.125rem;
}
/* ==========================================================================
Card Polish
========================================================================== */
.lh-card__title {
font-size: 1.375rem;
font-weight: 700;
margin-bottom: var(--lh-space-md);
color: var(--lh-grey-900);
}
.lh-card__text {
line-height: 1.7;
color: var(--lh-grey-700);
margin-bottom: var(--lh-space-lg);
}
/* Ensure card buttons don't inherit odd link styles */
.lh-card a.lh-btn-primary,
.lh-card a.lh-btn-secondary,
.lh-card a.lh-btn-magenta {
text-decoration: none;
}
.lh-card a.lh-btn-primary:hover,
.lh-card a.lh-btn-secondary:hover,
.lh-card a.lh-btn-magenta:hover {
text-decoration: none;
}
/* ==========================================================================
Style Guide Page Only: Neutralise parent theme title banner
========================================================================== */
body.page-id-14838 .home_title {
display: none;
}
/* ==========================================================================
Home Page: 3-Column Quick Links Section (.section_option)
========================================================================== */
/* Section container spacing */
.section_option {
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-2xl);
}
/* Blue icon button menu - use brand primary (high specificity) */
.section_option .option_menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.section_option .option_menu li {
margin-bottom: var(--lh-space-sm);
}
.section_option .option_menu li a {
display: flex;
align-items: center;
background-color: var(--lh-primary);
color: var(--lh-white);
text-decoration: none;
border-radius: var(--lh-radius-sm);
padding: var(--lh-space-sm) var(--lh-space-md);
transition: background-color var(--lh-transition-fast),
transform var(--lh-transition-fast);
}
.section_option .option_menu li a:hover,
.section_option .option_menu li a:focus {
background-color: var(--lh-primary-dark);
color: var(--lh-white);
text-decoration: none;
transform: translateX(4px);
}
.section_option .option_menu a i {
font-size: 1.75rem;
width: 2.5rem;
text-align: center;
flex-shrink: 0;
}
.section_option .option_menu a span {
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: var(--lh-space-sm) 0;
}
/* Image card CTAs - fix white text on colored backgrounds (high specificity) */
.section_option .option_module h3,
.section_option .residence_module h3 {
color: var(--lh-white) !important;
font-weight: 700;
font-size: 1.125rem;
letter-spacing: 0.03em;
margin: 0;
padding: var(--lh-space-md) var(--lh-space-lg);
transition: filter var(--lh-transition-fast);
}
.option_module a:hover h3,
.option_module a:focus h3,
.residence_module a:hover h3,
.residence_module a:focus h3 {
filter: brightness(0.9);
}
/* Ensure card images have consistent aspect ratio */
.option_module img,
.residence_module img {
width: 100%;
height: auto;
display: block;
}
/* Card container polish */
.option_module,
.residence_module {
border-radius: var(--lh-radius-md);
overflow: hidden;
box-shadow: var(--lh-shadow-sm);
transition: box-shadow var(--lh-transition-base),
transform var(--lh-transition-base);
}
.option_module:hover,
.residence_module:hover {
box-shadow: var(--lh-shadow-md);
transform: translateY(-2px);
}
/* ==========================================================================
LH Header (UKSE port) — Top Bar + Sticky Nav + Mobile Drawer
========================================================================== */
/* ---------------------------------------------------------------------
CSS Custom Properties for Navigation
--------------------------------------------------------------------- */
:root {
/* Container widths (UKSE-style) */
--lh-wrap-base-width: 80%;
--lh-wrap-desktop-width: 85%;
--lh-wrap-wide-width: 96%;
--lh-grid-max-width: 1200px;
/* Navigation z-index */
--lh-nav-toggle-size: 48px;
--lh-header-z: 9999;
--lh-overlay-z: 1350;
--lh-drawer-z: 1400;
--lh-topbar-z: 1000;
/* Navigation colors */
--lh-nav-text: rgba(0, 0, 50, 0.6);
--lh-nav-hover: var(--lh-primary);
}
/* ---------------------------------------------------------------------
Container (.wrap) - UKSE responsive widths
--------------------------------------------------------------------- */
.header .wrap,
.header_bottom .wrap {
width: var(--lh-wrap-wide-width); /* 96% at ≥1030px */
max-width: var(--lh-grid-max-width); /* 1200px */
margin: 0 auto;
}
@media (max-width: 1029px) {
.header .wrap,
.header_bottom .wrap {
width: var(--lh-wrap-desktop-width); /* 85% */
}
}
@media (max-width: 767px) {
.header .wrap,
.header_bottom .wrap {
width: var(--lh-wrap-base-width); /* 80% */
}
}
/* ---------------------------------------------------------------------
Header Bottom (Logo + Nav row) - UKSE layout
--------------------------------------------------------------------- */
.header_bottom {
display: block;
min-height: 132px; /* UKSE: 132px - creates ~25px bottom gap implicitly */
padding: 30px 0 0 0; /* UKSE: 30px top only */
background-color: var(--lh-white);
}
.header_bottom .grid {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end; /* KEY: logo & nav baseline-align */
flex-wrap: wrap;
gap: 24px; /* UKSE: 24px */
}
/* Logo column */
.header_bottom .grid__item:first-child {
display: block;
flex: 0 0 auto; /* doesn't grow/shrink */
width: auto;
}
/* Nav column */
.header_bottom .grid__item:last-child {
display: block;
flex: 1 1 auto; /* fills remaining space */
width: auto;
}
/* ---------------------------------------------------------------------
Top Bar
--------------------------------------------------------------------- */
.top-bar {
background-color: var(--lh-primary-dark);
color: var(--lh-white);
padding: 0.35rem 0;
font-size: 0.9rem; /* UKSE: 14.4px */
position: relative;
z-index: var(--lh-topbar-z);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.top-bar__inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.top-bar__left,
.top-bar__right {
display: flex;
align-items: center;
gap: 1rem;
}
.top-bar__contact {
display: flex;
align-items: center;
gap: 1.5rem;
}
.top-bar__contact-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--lh-white);
text-decoration: none;
transition: opacity var(--lh-transition-fast);
}
body.lh-ukse-skin .top-bar__contact-link:hover,
body.lh-ukse-skin .top-bar__contact-link:focus {
color: var(--lh-magenta); /* Magenta on hover */
text-decoration: none;
}
.top-bar__contact-link i {
font-size: 0.875rem;
}
.top-bar__social {
display: flex;
align-items: center;
gap: 0.75rem;
}
.top-bar__social a {
color: var(--lh-white);
font-size: 1rem;
transition: opacity var(--lh-transition-fast);
}
body.lh-ukse-skin .top-bar__social a:hover,
body.lh-ukse-skin .top-bar__social a:focus {
color: var(--lh-magenta); /* Magenta on hover */
text-decoration: none;
}
/* Top bar hidden when sticky */
.top-bar.is-hidden {
transform: translateY(-100%);
opacity: 0;
position: absolute;
pointer-events: none;
}
/* ---------------------------------------------------------------------
Language Dropdown (Desktop - in Top Bar)
--------------------------------------------------------------------- */
.top-bar .language_option {
position: relative;
}
.top-bar .language_option button[data-header-language-toggle] {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: transparent;
border: none;
color: var(--lh-white);
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: var(--lh-radius-sm);
transition: background-color var(--lh-transition-fast);
}
.top-bar .language_option button[data-header-language-toggle]:hover,
.top-bar .language_option button[data-header-language-toggle]:focus {
background-color: rgba(255, 255, 255, 0.1);
}
.top-bar .language_option .header-language-flag {
width: 20px;
height: auto;
border-radius: 2px;
}
.top-bar .language_option .header-language-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.2s ease;
}
.top-bar .language_option button[aria-expanded="true"] .header-language-icon {
transform: rotate(180deg);
}
.top-bar .language_option ul[data-header-language-menu] {
position: absolute;
top: 100%;
right: 0;
margin-top: 0.25rem;
background: var(--lh-white);
border-radius: var(--lh-radius-sm);
box-shadow: var(--lh-shadow-lg);
list-style: none;
padding: 0.5rem 0;
min-width: 140px;
z-index: 1001;
}
.top-bar .language_option .header-language-option {
margin: 0;
}
.top-bar .language_option .header-language-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
color: var(--lh-grey-800);
text-decoration: none;
transition: background-color var(--lh-transition-fast);
}
.top-bar .language_option .header-language-link:hover,
.top-bar .language_option .header-language-link:focus {
background-color: var(--lh-grey-100);
color: var(--lh-primary);
text-decoration: none;
}
.top-bar .language_option .header-language-option.is-active .header-language-link {
background-color: var(--lh-grey-100);
font-weight: 600;
}
/* ---------------------------------------------------------------------
Header Base & Sticky
--------------------------------------------------------------------- */
.header {
position: relative;
z-index: 100;
background-color: var(--lh-white);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Ready state - JS initialized */
.header.sticky-nav-ready {
will-change: transform;
}
/* Sticky state */
.header.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--lh-header-z);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
animation: slideDown 0.3s ease;
}
/* Header hidden on scroll down */
body.header-hidden .header {
transform: translateY(-100%);
}
/* Body padding when sticky */
body.header-sticky {
/* JS sets this dynamically, but provide fallback */
}
/* Sticky logo shrink */
.header.sticky .logo img {
max-height: 58px;
transition: max-height 0.3s ease;
}
/* Header bottom sizing adjustments when sticky */
.header.sticky .header_bottom {
min-height: 82px;
padding: 16px 0 12px;
}
/* Slide-down animation */
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ---------------------------------------------------------------------
Desktop Navigation (UKSE-style)
--------------------------------------------------------------------- */
.header_nav {
display: flex !important;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap !important;
white-space: nowrap !important;
gap: 0;
padding: 8px 0 !important; /* UKSE: 8px 0 */
background: var(--lh-white) !important;
float: right; /* legacy; flex overrides */
}
/* Logo sizing - UKSE: max-height 77px */
.header .logo img {
max-height: 77px;
}
.header_nav ul.nav,
.header_nav .nav.top-nav {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 0;
height: 44px;
border-top: 1px solid rgb(224, 224, 224); /* UKSE: top border */
border-bottom: 1px solid rgb(224, 224, 224); /* UKSE: bottom border */
background-color: var(--lh-white); /* UKSE: white background */
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px; /* UKSE: subtle shadow */
}
.header_nav .nav.top-nav > li,
.header_nav ul.nav > li {
display: inline-flex !important; /* UKSE: inline-flex */
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
position: relative;
}
.header_nav .nav.top-nav > li > a,
.header_nav ul.nav > li > a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 16px; /* Symmetric horizontal; flex handles vertical centering */
margin: 0;
color: var(--lh-nav-text); /* UKSE: rgba(0, 0, 50, 0.6) */
background: transparent !important; /* Override parent theme #eee */
font-family: 'proxima-nova', sans-serif;
font-size: 13px !important; /* UKSE: 13px */
font-weight: 600; /* UKSE: 600 semibold */
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0; /* UKSE: 0 */
line-height: 1.2;
height: 42px;
box-sizing: border-box;
transition: color 0.3s ease !important;
}
/* Animated gradient underline */
.header_nav .nav.top-nav > li > a::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--lh-orange) 0%, var(--lh-magenta) 50%, var(--lh-cyan) 100%);
border-radius: 3px 3px 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.header_nav .nav.top-nav > li > a:hover,
.header_nav .nav.top-nav > li > a:focus,
.header_nav ul.nav > li > a:hover,
.header_nav ul.nav > li > a:focus {
color: var(--lh-primary-dark) !important; /* Full navy on hover (not blue) */
text-decoration: none !important;
}
/* CTA hover - magenta text */
.header_nav .nav.top-nav > li:last-child > a:hover,
.header_nav .nav.top-nav > li:last-child > a:focus {
color: var(--lh-magenta) !important; /* Magenta for CTA hover */
}
.header_nav .nav.top-nav > li > a:hover::after {
transform: scaleX(0.5); /* 50% width preview on hover */
}
/* Focus state for accessibility */
.header_nav .nav.top-nav > li > a:focus-visible {
outline: 2px solid var(--lh-cyan);
outline-offset: 2px;
border-radius: var(--lh-radius-sm);
}
/* Current/active page - full underline */
.header_nav .nav.top-nav > li.current-menu-item > a,
.header_nav .nav.top-nav > li.current_page_item > a {
color: var(--lh-primary-dark);
}
.header_nav .nav.top-nav > li.current-menu-item > a::after,
.header_nav .nav.top-nav > li.current_page_item > a::after {
transform: scaleX(1); /* Full width for current page */
}
/* CTA link (last nav item) - UKSE style: transparent bg, dark text, glow */
.header_nav .nav.top-nav > li:last-child > a {
border-radius: 9999px; /* Pill shape */
box-shadow: rgba(230, 0, 126, 0.45) 0px 0px 12px 0px; /* Magenta glow */
background: transparent; /* UKSE: transparent in normal state */
color: rgb(0, 0, 50); /* UKSE: dark navy text */
font-weight: 700;
padding: 0.65rem 1.4rem;
}
/* CTA hover - UKSE style: orange text, enhanced glow, transparent bg */
.header_nav .nav.top-nav > li:last-child > a:hover,
.header_nav .nav.top-nav > li:last-child > a:focus {
background: transparent;
color: rgb(238, 114, 24); /* UKSE: orange text on hover */
box-shadow: rgba(230, 0, 126, 0.6) 0px 0px 18px 0px;
opacity: 0.9;
}
/* No underline on CTA */
.header_nav .nav.top-nav > li:last-child > a::after {
display: none;
}
/* ---------------------------------------------------------------------
Header Controls (Hamburger + CTA)
--------------------------------------------------------------------- */
.header_controls {
display: flex;
align-items: center;
gap: 1rem;
}
/* Hamburger button */
.menu_icon.nav-toggle {
display: none; /* Hidden on desktop */
width: var(--lh-nav-toggle-size);
height: var(--lh-nav-toggle-size);
min-height: 48px;
padding: 0;
background: var(--lh-magenta); /* UKSE: rgb(230, 0, 126) */
border: none;
cursor: pointer;
position: relative;
z-index: var(--lh-topbar-z);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: var(--lh-radius-sm);
}
.menu_icon.nav-toggle .nav-toggle__bar {
display: block;
width: 24px;
height: 2px;
background-color: var(--lh-white); /* White on magenta background */
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Hamburger to X animation when open */
body.mobile-nav-open .menu_icon.nav-toggle .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body.mobile-nav-open .menu_icon.nav-toggle .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
body.mobile-nav-open .menu_icon.nav-toggle .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ---------------------------------------------------------------------
Mobile Navigation Overlay
--------------------------------------------------------------------- */
.mobile-nav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 50, 0);
z-index: var(--lh-overlay-z);
pointer-events: none;
transition: background-color 0.4s ease;
}
.mobile-nav-overlay.active {
background: rgba(0, 0, 50, 0.8);
pointer-events: auto;
}
/* ---------------------------------------------------------------------
Mobile Navigation Drawer
--------------------------------------------------------------------- */
.site_navigation.mob {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 420px; /* UKSE: 420px */
height: 100%;
background: var(--lh-primary-dark);
color: var(--lh-white);
z-index: var(--lh-drawer-z);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: -12px 0 24px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.site_navigation.mob.is-open {
transform: translateX(0);
}
/* Mobile nav header */
.mobile-nav-header {
display: flex;
justify-content: flex-end;
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-nav-close {
width: var(--lh-nav-toggle-size);
height: var(--lh-nav-toggle-size);
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--lh-white);
font-size: 1.5rem;
cursor: pointer;
border-radius: var(--lh-radius-sm);
transition: background-color var(--lh-transition-fast);
}
.mobile-nav-close:hover,
.mobile-nav-close:focus {
background-color: rgba(255, 255, 255, 0.1);
}
/* Mobile nav scrollable area */
.mobile-nav-scroll {
flex: 1;
overflow-y: auto;
padding: 1rem;
-webkit-overflow-scrolling: touch;
}
/* Mobile language switcher */
.mobile-lang-switcher {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* WPML container - remove white backgrounds */
.mobile-lang-switcher .wpml-ls-legacy-dropdown,
.mobile-lang-switcher .wpml-ls-statics-shortcode_actions,
.mobile-lang-switcher .wpml-ls {
font-size: 0.875rem;
background: transparent !important;
max-width: none;
width: auto;
}
/* WPML current language button */
.mobile-lang-switcher .wpml-ls-legacy-dropdown .wpml-ls-current-language,
.mobile-lang-switcher .wpml-ls-statics-shortcode_actions .wpml-ls-current-language {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: var(--lh-radius-sm);
}
/* WPML links - force white text, reset tracking */
.mobile-lang-switcher .wpml-ls-legacy-dropdown a,
.mobile-lang-switcher .wpml-ls-statics-shortcode_actions a,
.mobile-lang-switcher .wpml-ls a,
.mobile-lang-switcher .wpml-ls-link,
.mobile-lang-switcher .wpml-ls-item-toggle,
.mobile-lang-switcher .js-wpml-ls-item-toggle {
padding: 0.5rem 0.75rem;
color: var(--lh-white) !important;
background: transparent !important;
letter-spacing: normal !important; /* Override parent theme 2px tracking */
}
/* WPML toggle button - subtle background */
.mobile-lang-switcher .wpml-ls-item-toggle,
.mobile-lang-switcher .js-wpml-ls-item-toggle,
.mobile-lang-switcher .wpml-ls-current-language > a {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: var(--lh-radius-sm);
color: var(--lh-white) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* WPML hover/focus/active states */
.mobile-lang-switcher .wpml-ls a:hover,
.mobile-lang-switcher .wpml-ls a:focus,
.mobile-lang-switcher .wpml-ls a:active,
.mobile-lang-switcher .wpml-ls-link:hover,
.mobile-lang-switcher .wpml-ls-link:focus,
.mobile-lang-switcher .wpml-ls-item-toggle:hover,
.mobile-lang-switcher .wpml-ls-item-toggle:focus {
color: var(--lh-white) !important;
background: rgba(255, 255, 255, 0.15) !important;
}
/* WPML submenu dropdown styling */
.mobile-lang-switcher .wpml-ls-sub-menu {
background: var(--lh-primary-dark) !important;
border: 1px solid rgba(255, 255, 255, 1) !important; /* Solid white border */
min-width: 220px; /* Wide enough for longest language name */
width: max-content;
max-width: 100%;
box-sizing: border-box;
}
/* Progressive enhancement: hide submenu only when JS is enabled */
.mobile-lang-switcher .wpml-ls.wpml-is-js .wpml-ls-sub-menu {
display: none !important;
visibility: visible !important;
}
/* Show when is-open class present on current-language wrapper (JS-controlled) */
.mobile-lang-switcher .wpml-ls.wpml-is-js .wpml-ls-current-language.is-open .wpml-ls-sub-menu {
display: block !important;
}
/* WPML submenu list items - fill container width */
.mobile-lang-switcher .wpml-ls-sub-menu > li,
.mobile-lang-switcher .wpml-ls-sub-menu .wpml-ls-item {
width: 100% !important;
}
/* WPML submenu links */
.mobile-lang-switcher .wpml-ls-sub-menu a,
.mobile-lang-switcher .wpml-ls-sub-menu .wpml-ls-link {
display: flex;
align-items: center;
width: 100% !important;
box-sizing: border-box;
white-space: nowrap;
color: var(--lh-white) !important;
background: transparent !important;
letter-spacing: normal !important;
}
.mobile-lang-switcher .wpml-ls-sub-menu a:hover,
.mobile-lang-switcher .wpml-ls-sub-menu .wpml-ls-link:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: var(--lh-white) !important;
}
/* Mobile nav sections */
.mobile-nav-section {
margin-bottom: 1.5rem;
}
/* Mobile primary menu */
.mobile-primary-menu {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-primary-menu li {
margin: 0;
}
.mobile-primary-menu a {
display: flex;
align-items: center;
min-height: 48px; /* Accessible tap target */
padding: 0.875rem 0.75rem;
margin: 2px 0;
color: var(--lh-white) !important; /* Override parent theme blue */
text-decoration: none !important;
font-size: 1rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: normal !important; /* Override parent theme 2px tracking */
background-color: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--lh-radius-sm);
transition: background-color var(--lh-transition-fast), padding-left var(--lh-transition-fast);
}
.mobile-primary-menu a:hover,
.mobile-primary-menu a:focus {
background-color: rgba(255, 255, 255, 0.12);
color: var(--lh-white) !important;
text-decoration: none !important;
padding-left: 0.875rem;
}
/* Keyboard focus ring */
.mobile-primary-menu a:focus-visible {
outline: 2px solid var(--lh-magenta);
outline-offset: 2px;
}
/* Active/current page - magenta accent */
.mobile-primary-menu li.current-menu-item > a,
.mobile-primary-menu li.current_page_item > a,
.mobile-primary-menu li.current-menu-ancestor > a {
background-color: rgba(230, 0, 126, 0.15);
border-left: 3px solid var(--lh-magenta);
padding-left: calc(0.75rem - 3px);
font-weight: 600;
color: var(--lh-white) !important;
}
/* Mobile submenu */
.mobile-primary-menu .sub-menu {
list-style: none;
margin: 0;
padding: 0 0 0 1rem;
}
.mobile-primary-menu .sub-menu a {
font-size: 0.9375rem;
opacity: 0.9;
}
/* Mobile sites menu */
.mobile-sites-menu {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-sites-menu li {
margin-bottom: 0.5rem;
}
.mobile-sites-menu a {
display: block;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.1);
color: var(--lh-white);
text-decoration: none;
border-radius: var(--lh-radius-sm);
font-weight: 600;
transition: background-color var(--lh-transition-fast);
}
.mobile-sites-menu a:hover,
.mobile-sites-menu a:focus {
background: rgba(255, 255, 255, 0.2);
color: var(--lh-white);
text-decoration: none;
}
/* Mobile contact */
.mobile-contact {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-contact__link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
color: var(--lh-white);
text-decoration: none;
font-size: 0.9375rem;
}
.mobile-contact__link:hover,
.mobile-contact__link:focus {
color: var(--lh-white);
opacity: 0.9;
text-decoration: none;
}
.mobile-contact__link i {
font-size: 1rem;
width: 1.5rem;
text-align: center;
}
/* Body scroll lock when mobile nav open */
body.mobile-nav-open {
overflow: hidden;
}
/* Header z-index adjustment when mobile nav open */
body.mobile-nav-open .header {
z-index: 997;
}
/* ---------------------------------------------------------------------
Responsive Breakpoints
--------------------------------------------------------------------- */
/* Mobile + Tablet: <=959px (use drawer/hamburger) */
@media (max-width: 959px) {
/* Show hamburger - !important overrides parent theme min-width:768px rule */
.menu_icon.nav-toggle {
display: flex !important;
}
/* Hide desktop nav */
.header_nav {
display: none !important;
}
/* Hide desktop mega menu */
.site_navigation.desk {
display: none;
}
/* Top bar adjustments */
.top-bar__contact-link span {
display: none; /* Show icon only */
}
.top-bar__inner {
justify-content: flex-end;
}
.top-bar__left {
display: none; /* Hide contact on mobile - shown in drawer */
}
/* Header always fixed on mobile */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--lh-header-z);
}
/* Body padding for fixed header - UKSE: 64px */
body.lh-ukse-skin {
padding-top: 64px;
}
/* Header bottom sizing - UKSE: 64px mobile header */
.header_bottom {
min-height: auto;
padding: 8px 16px;
}
/* Mobile grid: horizontal flex layout for logo + hamburger */
.header_bottom .grid {
display: flex;
align-items: center;
justify-content: space-between;
}
.header_bottom .grid__item {
display: block;
width: auto;
float: none;
}
.header_bottom .grid__item:first-child {
flex: 0 0 auto;
}
.header_bottom .grid__item:last-child {
flex: 0 0 auto;
margin-left: auto;
}
/* Top bar hidden on mobile for smaller header */
.top-bar {
display: none;
}
/* Logo sizing */
.header .logo img {
max-height: 44px;
}
/* Fix hamburger positioning */
.header_controls {
margin: 0;
}
.menu_icon.nav-toggle {
margin: 0;
}
}
/* Very small screens: <=560px - prevent logo stretch */
@media (max-width: 560px) {
.header .logo {
flex: 0 0 auto;
max-width: 140px;
}
.header .logo img {
width: auto;
height: auto;
max-height: 36px;
object-fit: contain;
}
}
/* Large desktop nav: 1025px - 1200px */
@media (min-width: 1025px) and (max-width: 1200px) {
.header_nav .nav.top-nav > li > a,
.header_nav ul.nav > li > a {
font-size: 12px !important; /* UKSE: 12px at ≤1200px */
padding: 6px 10px; /* UKSE: tighter padding */
}
}
/* Small desktop: 960px - 1024px */
@media (min-width: 960px) and (max-width: 1024px) {
/* Tighter nav padding - UKSE responsive */
.header_nav .nav.top-nav > li > a,
.header_nav ul.nav > li > a {
font-size: 11px !important; /* UKSE: 11px at ≤1024px */
padding: 5px 8px; /* UKSE: tighter padding */
}
/* Body padding when sticky */
body.header-sticky {
padding-top: 76px;
}
}
/* Desktop: >=960px */
@media (min-width: 960px) {
/* Hide hamburger */
.menu_icon.nav-toggle {
display: none;
}
/* Show desktop nav */
.header_nav {
display: block;
}
/* Hide mobile nav completely */
.site_navigation.mob {
display: none;
}
.mobile-nav-overlay {
display: none;
}
}
/* Large desktop: >=1025px */
@media (min-width: 1025px) {
/* Ensure mobile elements are hidden */
.site_navigation.mob,
.mobile-nav-overlay {
display: none !important;
}
}
/* Hide legacy header_top (parent theme) */
.lh-ukse-skin .header_top {
display: none;
}
/* Hide legacy mobile site_navigation (parent theme style) */
.lh-ukse-skin .site_navigation.mob .megamenu {
display: none;
}
/* ---------------------------------------------------------------------
Partner Bar (UKSE-style)
--------------------------------------------------------------------- */
.partner-bar {
background-color: rgb(245, 245, 247);
border-bottom: 1px solid rgb(226, 227, 234);
height: 43px;
padding: 0;
}
.partner-bar__inner {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
height: 100%;
}
.partner-bar__label {
color: rgb(91, 94, 111);
font-size: 12.8px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.024px;
}
.partner-bar__logos {
display: flex;
gap: 12px;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.partner-bar__logos li {
display: flex;
align-items: center;
}
.partner-bar__logos img {
height: 30px;
width: auto;
}
.partner-bar__link {
display: flex;
align-items: center;
transition: opacity 0.2s ease;
}
.partner-bar__link:hover,
.partner-bar__link:focus {
opacity: 0.8;
text-decoration: none;
}
/* Hide partner bar on mobile */
@media (max-width: 767px) {
.partner-bar {
display: none;
}
}
/* Hide partner bar when sticky */
.header.sticky + .partner-bar,
body.header-sticky .partner-bar {
display: none;
}
/* ---------------------------------------------------------------------
WPML Language Dropdown - Dark Navy Background (UKSE-style)
--------------------------------------------------------------------- */
/* Desktop dropdown in top-bar */
.top-bar .language_option ul[data-header-language-menu] {
background-color: rgb(0, 0, 50) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: var(--lh-radius-sm);
box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 18px 0px !important;
padding: 4px 0 !important;
}
.top-bar .language_option .header-language-option {
background-color: rgb(0, 0, 50);
}
.top-bar .language_option .header-language-link {
color: var(--lh-white) !important;
background-color: rgb(0, 0, 50) !important;
padding: 6px 12px !important;
font-size: 14px;
}
.top-bar .language_option .header-language-link:hover,
.top-bar .language_option .header-language-link:focus {
background-color: rgba(255, 255, 255, 0.1) !important;
color: var(--lh-primary) !important; /* Blue on hover */
}
.top-bar .language_option .header-language-option.is-active .header-language-link {
background-color: rgba(255, 255, 255, 0.1) !important;
color: var(--lh-primary) !important; /* Blue for active */
}
/* ==========================================================================
LH Footer (UKSE-style port)
========================================================================== */
/* ---------------------------------------------------------------------
0. Global Overflow Fix
--------------------------------------------------------------------- */
/* Prevent horizontal scrollbar from carousel overflow */
body.lh-ukse-skin,
body.lh-ukse-skin #container {
overflow-x: hidden;
}
/* ---------------------------------------------------------------------
0.5 Testimonials Section (UKSE Splide Parity)
--------------------------------------------------------------------- */
/* Section Container - Subtle Pink Background (default for all pages) */
.section_testimonial {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 40px 20px !important;
height: auto !important;
overflow-x: hidden !important;
overflow-y: visible !important;
background: var(--lh-magenta-50); /* Subtle magenta tint - unified site-wide */
border-top: 1px solid rgba(230, 0, 126, 0.08);
position: relative;
}
/* Homepage exception: keep original navy gradient for hero-section feel */
body.home .section_testimonial {
background: linear-gradient(180deg, rgba(0, 0, 50, 0.02) 0%, rgba(0, 0, 50, 0.04) 100%);
border-top: none;
}
.section_testimonial > * {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
/* Decorative Quote Mark */
.section_testimonial::before {
content: '\201C';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 180px;
font-family: Georgia, 'Times New Roman', serif;
color: var(--lh-magenta, #E6007E);
opacity: 0.12;
line-height: 1;
pointer-events: none;
z-index: 0;
}
/* Heading - matches .lh-title style */
html body .section_testimonial h2 {
font-family: var(--lh-font-heading) !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important;
font-weight: 800 !important;
color: var(--lh-primary-dark, #000032) !important;
text-align: center !important;
margin: 0 auto 16px !important;
width: 100% !important;
line-height: 1.1 !important;
letter-spacing: -0.2px !important;
background: none !important;
text-transform: none !important;
}
html body .section_testimonial h2::after {
content: '' !important;
display: block !important;
width: 80px !important;
height: 3px !important;
background: var(--lh-magenta, #E6007E) !important;
margin: 12px auto 0 !important;
}
.section_testimonial h2 span {
display: none;
}
/* Carousel Track */
.home-testimonials__carousel .splide__track {
padding: 8px 0 16px;
overflow: clip visible;
}
.home-testimonials__carousel .splide__slide {
display: flex;
justify-content: center;
}
/* Testimonial Card (Item) - Grid Layout */
.home-testimonials__item {
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center;
max-width: 720px;
width: 100%;
margin: 0 auto;
}
/* Author Image - Circular with Shadow */
.home-testimonials__item .author_image {
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 50, 0.12);
}
.home-testimonials__item .author_image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Testimonial Content & Author Name */
.home-testimonials__item .testimonial_cont {
font-size: 0.95rem;
line-height: 1.6;
}
.home-testimonials__item .testimonial_cont span {
display: block;
font-weight: 700;
letter-spacing: 0.02em;
margin-top: 10px;
}
/* Arrows - Hidden on desktop, visible on tablet/mobile */
.home-testimonials__carousel .splide__arrows {
display: none;
}
@media (max-width: 820px) {
.home-testimonials__carousel .splide__arrows {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 24px;
}
.home-testimonials__carousel .splide__arrow {
position: static;
transform: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: white;
border: 1px solid rgba(0, 0, 50, 0.12);
box-shadow: 0 2px 8px rgba(0, 0, 50, 0.08);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.home-testimonials__carousel .splide__arrow:hover {
background: var(--lh-magenta, #E6007E);
border-color: var(--lh-magenta, #E6007E);
}
.home-testimonials__carousel .splide__arrow:hover svg {
fill: white;
}
.home-testimonials__carousel .splide__arrow svg {
width: 16px;
height: 16px;
fill: var(--lh-primary-dark, #000032);
transition: fill 0.2s ease;
}
/* Fraction Counter */
.home-testimonials__fraction {
font-family: var(--lh-font-body, sans-serif);
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-primary-dark, #000032);
min-width: 50px;
text-align: center;
letter-spacing: 0.5px;
}
}
/* Pagination Dots (Magenta active) */
.home-testimonials__carousel .splide__pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
position: static;
}
.home-testimonials__carousel .splide__pagination__page {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(0, 0, 50, 0.15);
border: none;
padding: 0;
cursor: pointer;
/* 44px min tap target via transparent hit area */
position: relative;
transition: background 0.3s ease, transform 0.3s ease;
}
.home-testimonials__carousel .splide__pagination__page::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
}
.home-testimonials__carousel .splide__pagination__page.is-active,
.home-testimonials__carousel .splide__pagination__page:hover,
.home-testimonials__carousel .splide__pagination__page:focus-visible {
background: var(--lh-magenta, #E6007E);
transform: scale(1.15);
}
/* Responsive (Tablet ≤820px) */
@media (max-width: 820px) {
.home-testimonials__item {
max-width: 600px;
gap: 20px;
}
.home-testimonials__item .author_image {
width: 80px;
height: 80px;
}
.home-testimonials__item .testimonial_cont {
font-size: 0.9rem;
}
}
/* Responsive (Mobile ≤640px) */
@media (max-width: 640px) {
.section_testimonial {
padding: 32px 16px !important;
}
.section_testimonial::before {
font-size: 100px;
top: 12px;
opacity: 0.10;
}
.home-testimonials__item {
grid-template-columns: 1fr;
text-align: center;
max-width: 100%;
gap: 16px;
padding: 0 8px;
}
.home-testimonials__item .author_image {
justify-self: center;
width: 72px;
height: 72px;
}
.home-testimonials__item .testimonial_cont {
font-size: 0.875rem;
line-height: 1.65;
}
.home-testimonials__item .testimonial_cont span {
margin-top: 12px;
}
.home-testimonials__carousel .splide__arrows {
margin-top: 20px;
}
}
/* Google Reviews widget - spacing from testimonials above */
#home-review-bg {
padding-top: var(--lh-space-xl);
}
/* ---------------------------------------------------------------------
1. Blog Slider Section
--------------------------------------------------------------------- */
.section_latest_blog.lh-blog-slider {
background-color: var(--lh-white);
padding: var(--lh-space-2xl) 0;
position: relative;
z-index: 1;
}
/* Blog title - matches testimonials h2 style */
/* Higher specificity + !important to override parent's .section_latest_blog h2 { letter-spacing: 0px } */
body.lh-ukse-skin .blog-slider__title,
.blog-slider__title {
font-family: var(--lh-font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.2px !important;
text-transform: none;
color: var(--lh-primary-dark, #000032);
text-align: center;
margin: 40px auto 18px;
padding: 0 20px;
max-width: 1200px;
position: relative;
display: block;
background: none;
border: none;
}
/* Underline - magenta accent (matches testimonials h2 style) */
.blog-slider__title::after {
content: "";
display: block;
width: 80px;
height: 3px;
background: var(--lh-magenta, #E6007E);
margin: 12px auto 0;
border-radius: 2px;
}
/* Blog slide card - UKSE exact specs */
.blog_slide {
background: var(--lh-white);
width: 370px; /* UKSE: 370px */
max-width: 370px; /* UKSE: 370px */
height: 520px; /* Fixed height — accommodates 16/10 thumbnail */
margin: 0 15px; /* UKSE: 0 15px */
padding: 0; /* Zero padding — inner elements get horizontal padding */
border-radius: var(--lh-radius-lg); /* 12px via token */
border: 1px solid rgba(0, 0, 50, 0.05); /* UKSE: subtle border */
box-shadow: 0 4px 12px rgba(0, 0, 50, 0.1); /* UKSE: simpler shadow */
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between; /* UKSE: space-between */
text-align: start; /* UKSE: start (left) */
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden; /* Contain content + clip thumbnail corners */
}
.blog_slide:hover {
transform: translateY(-5px); /* UKSE: -5px */
box-shadow: 0 8px 25px rgba(0, 0, 50, 0.15); /* UKSE: enhanced shadow */
background: var(--lh-white) !important; /* Override parent brand.css blue bg */
background-color: var(--lh-white) !important;
border-color: rgba(0, 0, 50, 0.05) !important; /* Keep subtle border */
}
/* Override parent theme button hover on card hover */
.blog_slide:hover a.blog-button,
.blog_slide:hover .blog-button {
background: linear-gradient(135deg, var(--lh-primary) 0%, #1a7ab8 100%) !important; /* Keep LH blue */
color: var(--lh-white) !important; /* Keep white text */
border-color: var(--lh-primary) !important;
}
/* Featured image thumbnail */
.section_latest_blog .blog_slide__thumb {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
flex-shrink: 0;
}
.section_latest_blog .blog_slide__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.section_latest_blog .blog_slide:hover .blog_slide__thumb img {
transform: scale(1.05);
}
/* Inner content padding (since card padding is now 0) */
.section_latest_blog .blog_slide span,
.section_latest_blog .blog_slide h3,
.section_latest_blog .blog_slide p {
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
/* Date — tighter to image */
.section_latest_blog .blog_slide .blog_slide__date {
margin-top: 14px;
margin-bottom: 6px;
}
/* Title — UKSE size, no separator, no collapse */
.section_latest_blog .blog_slide h3 {
font-size: 1.25rem;
line-height: 1.4;
box-shadow: none;
margin-bottom: 8px;
padding-bottom: 0;
flex-shrink: 0;
text-align: left;
}
/* Excerpt — tighter spacing, left-aligned */
.section_latest_blog .blog_slide .blog_slide__excerpt {
margin-bottom: 12px;
font-size: 13.5px;
text-align: left;
}
/* Read More button — left-aligned pill */
.section_latest_blog .blog-button {
margin: auto 20px 20px;
align-self: flex-start;
border-radius: 50px;
}
/* Remove any h3::after underline decoration inside carousel */
.section_latest_blog .blog_slide h3::after {
display: none !important;
content: none !important;
}
.blog_slide__date {
display: block;
font-size: 12px; /* UKSE: 12px */
font-weight: 600; /* UKSE: 600 */
color: var(--lh-grey-600);
margin-bottom: var(--lh-space-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog_slide__title {
font-size: 24.8px; /* UKSE: 24.8px */
font-weight: 700; /* UKSE: 700 */
color: var(--lh-primary-dark); /* UKSE: navy */
text-align: center; /* UKSE: center */
letter-spacing: 0.5px; /* UKSE: 0.5px */
margin: 0 0 18px 0; /* UKSE: 0 0 18px 0 */
line-height: 1.35; /* UKSE: ~33.48px/24.8px */
position: relative;
padding-bottom: 8px;
/* Clamp long titles (esp. ES/DE) in blog slider cards.
Separator uses box-shadow (renders outside overflow:hidden). */
display: -webkit-box;
-webkit-box-orient: vertical; /*! keep */
-webkit-line-clamp: 3;
overflow: hidden;
box-shadow: 0 25px 0 -22px var(--lh-magenta);
margin-bottom: 32px;
}
/* Separator now handled by box-shadow (compatible with line-clamp overflow) */
.blog_slide__title::after {
content: none;
}
.blog_slide__excerpt {
font-size: 14px; /* UKSE: 14px */
color: var(--lh-grey-700); /* UKSE: #495057 */
line-height: 1.6;
margin-bottom: 20px; /* UKSE: 20px */
flex: 1; /* UKSE: fills available space */
}
.blog_slide .blog-button {
display: block; /* UKSE: block */
align-self: flex-start; /* UKSE: left-aligned */
margin-top: auto; /* UKSE: push to bottom */
padding: 12px 20px;
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-blue-700) 100%); /* LH blue gradient */
color: var(--lh-white);
font-size: 14px; /* UKSE: 14px */
font-weight: 600;
text-decoration: none;
text-transform: uppercase; /* UKSE: uppercase */
letter-spacing: 0.5px; /* UKSE: 0.5px */
text-align: center; /* UKSE: text-align center */
border-radius: var(--lh-radius-md);
border: 2px solid var(--lh-primary); /* LH blue border */
transition: all 0.3s ease;
}
.blog_slide .blog-button:hover,
.blog_slide .blog-button:focus,
.blog_slide:hover .blog-button:hover,
.blog_slide:hover .blog-button:focus {
background: transparent !important; /* Button hover: transparent */
color: var(--lh-primary) !important; /* Button hover: LH blue text */
transform: translateY(-2px);
text-decoration: none !important;
border-color: var(--lh-primary) !important;
}
/* Splide carousel container - ensure pagination sits below */
.section_latest_blog .splide {
padding-bottom: 60px; /* Space for pagination below cards */
position: relative;
}
.section_latest_blog .splide__track {
overflow: hidden; /* Contain the carousel */
padding: 10px 0; /* Padding for hover transform */
}
/* Ensure splide list stays in single row - override any inherited wrap */
.section_latest_blog .splide__list {
flex-wrap: nowrap !important;
}
/* Contain the section to prevent horizontal page scroll */
.section_latest_blog.lh-blog-slider {
overflow-x: hidden;
}
/* Splide pagination - positioned below cards */
.section_latest_blog .splide__pagination {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-top: 0;
gap: 10px; /* UKSE: 10px */
}
.section_latest_blog .splide__pagination__page {
width: 12px; /* UKSE: 12px */
height: 12px; /* UKSE: 12px */
background: rgba(0, 0, 50, 0.15);
border-radius: 50%;
margin: 0; /* Reset margin, using gap on parent */
transition: background-color var(--lh-transition-fast), transform var(--lh-transition-fast);
}
.section_latest_blog .splide__pagination__page.is-active {
background: var(--lh-magenta);
transform: scale(1.15); /* UKSE: 1.15 */
}
/* Splide arrows - if enabled, position below cards */
.section_latest_blog .splide__arrows {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 20px;
}
.section_latest_blog .splide__arrow {
position: static;
transform: none;
}
/* ---------------------------------------------------------------------
2. Partners Logo Strip
--------------------------------------------------------------------- */
.partners-section.lh-partners-strip {
background-color: var(--lh-white);
padding: 60px 0;
border-top: none;
border-bottom: none;
}
.partners-section.lh-partners-strip .wrap,
.partners-section .wrap,
.lh-partners-strip .wrap {
max-width: 1200px;
margin: 0 auto;
padding: 12px 24px !important; /* UKSE: 12px vertical */
display: flex !important; /* UKSE: flex */
justify-content: space-evenly !important; /* UKSE: space-evenly */
align-items: center !important; /* UKSE: center */
gap: 32px !important; /* UKSE: 32px */
flex-wrap: wrap;
}
/* Partner logos - evenly distributed across full width */
.partner-logos-fallback {
display: flex;
justify-content: space-evenly; /* UKSE: space-evenly */
align-items: center;
flex-wrap: wrap;
gap: 32px; /* UKSE: 32px */
padding: 12px 0; /* UKSE: 12px 0 */
}
.partner-logos-fallback .partner-logo {
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--lh-transition-fast);
}
.partner-logos-fallback .partner-logo:hover {
opacity: 0.7;
}
.partner-logos-fallback .partner-logo img {
height: 45px;
width: auto;
max-width: 140px;
max-height: 50px; /* UKSE: 50px */
object-fit: contain;
}
/* Widget-based partner logos (if using widget instead of fallback) */
.partners-section.lh-partners-strip .widget,
.widget_partners_logo_widget {
display: flex !important; /* UKSE: flex */
justify-content: space-evenly !important;
align-items: center !important;
gap: 32px !important;
flex-wrap: wrap;
}
.partners-section.lh-partners-strip .widget img,
.partners-section img,
.lh-partners-strip img {
height: 45px;
width: auto;
max-width: 140px;
max-height: 50px !important; /* UKSE: 50px */
object-fit: contain;
vertical-align: middle;
}
/* ---------------------------------------------------------------------
3. Skyline Divider
--------------------------------------------------------------------- */
.footer_skyline.lh-skyline {
height: 120px;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
}
/* ---------------------------------------------------------------------
4. Footer Base
--------------------------------------------------------------------- */
.footer.lh-enhanced-footer {
background-color: var(--lh-primary-dark);
color: var(--lh-white);
}
/* ---------------------------------------------------------------------
5. Footer Mega Menu (Service Panels)
--------------------------------------------------------------------- */
/* Footer Mega Menu - UKSE Style */
.footer-mega-menu {
display: block;
padding: 60px 0 40px;
border-bottom: 2px solid rgba(238, 114, 24, 0.2); /* UKSE: orange tint */
background: linear-gradient(#000000 0%, #000032 100%) !important;
}
.footer-mega-menu .wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch; /* KEY: equal height panels */
justify-content: normal;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
/* Service panel base - UKSE Style */
.footer-service-panel {
display: flex;
flex-direction: column;
flex: 1 1 calc(33.333% - 23px); /* 3 columns */
min-width: 220px;
box-sizing: border-box;
padding: 0 0 0 20px;
background: transparent;
border-left: 4px solid var(--lh-primary);
border-radius: 0;
transition: background-color 0.3s ease;
}
.footer-service-panel:hover {
background: transparent;
}
/* Panel title - UKSE Style */
/* min-height ensures alignment even with text wrapping */
.footer-service-panel .service-panel-title {
display: flex;
align-items: flex-start; /* UKSE: flex-start */
justify-content: space-between;
min-height: 58.24px; /* KEY: fixed min-height for alignment */
width: 100%;
padding: 0;
margin: 0 0 15px 0; /* UKSE: 15px bottom */
background: transparent;
border: none;
color: var(--lh-white);
font-size: 20.8px; /* UKSE: 20.8px */
font-weight: 700;
line-height: 27.04px; /* UKSE: 27.04px */
text-align: left;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: default;
}
/* Panel title brand colors */
.footer-service-panel.london-homestays .service-panel-title {
color: var(--lh-primary);
}
.footer-service-panel.study-english .service-panel-title {
color: var(--lh-orange);
}
.footer-service-panel.uk-residences .service-panel-title {
color: var(--lh-green);
}
/* Accordion icon - hidden on desktop */
.footer-service-panel .accordion-icon {
display: none;
width: 24px;
height: 24px;
position: relative;
}
.footer-service-panel .accordion-icon::before,
.footer-service-panel .accordion-icon::after {
content: '';
position: absolute;
background-color: var(--lh-white);
transition: transform 0.3s ease;
}
.footer-service-panel .accordion-icon::before {
width: 14px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-service-panel .accordion-icon::after {
width: 2px;
height: 14px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Panel content - UKSE Style */
.footer-service-panel .service-panel-content {
display: flex;
flex-direction: column;
gap: 16px; /* UKSE: 16px */
height: 100%; /* KEY: fills remaining panel height */
}
/* Service logo - UKSE Style */
/* Fixed height container ensures alignment */
.footer-service-panel .service-logo {
max-width: 180px;
height: 55px; /* KEY: fixed height for alignment */
display: flex;
align-items: center;
margin-bottom: 8px; /* UKSE: 8px */
}
.footer-service-panel .service-logo-image {
max-height: 50px;
width: auto;
object-fit: contain;
}
/* Service links - UKSE style */
/* Container reset */
.footer-service-panel .service-links,
.footer-service-panel .service-links li {
list-style: none !important;
}
/* Container */
.footer-service-panel .service-links {
margin: 0 0 25px !important;
padding: 0 !important;
flex: 1 1 0% !important;
}
/* List items */
.footer-service-panel .service-links li {
margin: 0 0 8px !important;
padding: 0 !important;
}
.footer-service-panel .service-links li::before {
content: none !important;
display: none !important;
}
/* Links - Normal */
.footer-service-panel .service-links a {
display: block !important;
color: var(--lh-white) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 22.4px !important;
text-decoration: none !important;
padding: 6px 0 !important;
border-bottom: 1px solid transparent !important;
transition: all 0.3s ease !important;
}
/* Links - Hover (slide-right effect + light blue) */
.footer-service-panel .service-links a:hover,
.footer-service-panel .service-links a:focus {
color: var(--lh-cyan) !important;
border-bottom-color: rgba(106, 202, 243, 0.3) !important;
padding-left: 8px !important;
text-decoration: none !important;
}
/* Service CTA button - LH Style */
/* Normal: transparent bg, brand border, LH blue text */
/* Hover: transparent bg, brand text, translateY(-2px) */
.footer-service-panel .service-panel-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
background: transparent;
color: var(--lh-primary); /* LH blue text for all in normal state */
border: 2px solid var(--lh-primary); /* Default border (London Homestays) */
border-radius: var(--lh-radius-md);
font-size: 14px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
transition: all 0.3s ease;
margin-top: auto;
align-self: flex-start;
}
.footer-service-panel .service-panel-cta:hover,
.footer-service-panel .service-panel-cta:focus {
background: transparent;
text-decoration: none;
transform: translateY(-2px);
}
/* CTA button brand-colored borders per panel */
/* Normal: brand border, LH blue text */
/* Hover: brand text */
/* London Homestays - Blue */
.footer-service-panel.london-homestays .service-panel-cta {
border-color: var(--lh-primary);
}
.footer-service-panel.london-homestays .service-panel-cta:hover,
.footer-service-panel.london-homestays .service-panel-cta:focus {
color: var(--lh-primary);
}
/* Study English - Orange */
.footer-service-panel.study-english .service-panel-cta {
border-color: var(--lh-orange);
}
.footer-service-panel.study-english .service-panel-cta:hover,
.footer-service-panel.study-english .service-panel-cta:focus {
color: var(--lh-orange);
}
/* UK Residences - Lime */
.footer-service-panel.uk-residences .service-panel-cta {
border-color: var(--lh-green);
}
.footer-service-panel.uk-residences .service-panel-cta:hover,
.footer-service-panel.uk-residences .service-panel-cta:focus {
color: var(--lh-green);
}
/* Panel brand colour variants */
.footer-service-panel.london-homestays {
border-left-color: var(--lh-primary); /* Blue */
}
.footer-service-panel.study-english {
border-left-color: var(--lh-orange); /* Orange */
}
.footer-service-panel.uk-residences {
border-left-color: var(--lh-green); /* Green */
}
/* ---------------------------------------------------------------------
6. Footer Top (Useful Information Widget)
--------------------------------------------------------------------- */
.footer-top {
background: rgba(0, 0, 50, 0.8); /* UKSE: semi-transparent overlay */
padding: 40px 0; /* UKSE: 40px 0 */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-top .wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.footer-top__widget {
text-align: left; /* UKSE: left aligned to wrap */
}
/* Footer widget titles - UKSE: white */
.footer-top .widget-title,
.footer-top h2,
.footer-top h3,
.footer-top h4,
.footer-top .textwidget h2,
.footer-top .textwidget h3 {
font-size: 1.3rem;
font-weight: 700;
color: var(--lh-white) !important;
text-transform: uppercase;
letter-spacing: 0.5px; /* UKSE: 0.5px */
margin-bottom: 20px; /* UKSE: 20px */
text-align: left; /* UKSE: left aligned */
}
/* Footer widget list styling - remove bullets, left aligned */
.footer-top .widget ul,
.footer-top ul {
list-style: none !important;
list-style-type: none !important;
margin: 0;
padding: 0 !important;
padding-left: 0 !important;
text-align: left !important; /* UKSE: left aligned */
}
.footer-top .widget ul li,
.footer-top ul li {
list-style: none !important;
list-style-type: none !important; /* UKSE: no bullets */
margin-bottom: 0; /* UKSE: 0 */
padding-left: 0 !important;
}
/* Footer widget links - white */
.footer-top .widget ul li a,
.footer-top ul li a {
color: rgba(255, 255, 255, 0.85);
font-weight: 500 !important; /* UKSE: 500 */
text-decoration: none;
transition: color var(--lh-transition-fast);
}
.footer-top .widget ul li a:hover,
.footer-top .widget ul li a:focus {
color: var(--lh-white);
text-decoration: none;
}
/* Menu sitemap - blue links with magenta hover */
.footer-top .menu-sitemap a,
.footer-top .widget_nav_menu a,
.footer-top__widget .menu a {
color: var(--lh-primary) !important; /* LH blue */
text-decoration: none;
}
.footer-top .menu-sitemap a:hover,
.footer-top .menu-sitemap a:focus,
.footer-top .widget_nav_menu a:hover,
.footer-top .widget_nav_menu a:focus,
.footer-top__widget .menu a:hover,
.footer-top__widget .menu a:focus {
color: var(--lh-magenta) !important; /* Magenta on hover */
text-decoration: none;
}
/* Footer column paragraphs - left aligned */
.footer-top .footer-column p,
.footer-top__widget .footer-column p,
.footer-top .textwidget p,
.footer-top__widget p {
text-align: left !important;
}
/* Footer column links - magenta hover */
.footer-top .footer-column a,
.footer-top__widget .footer-column a,
.footer-top .textwidget a,
.footer.lh-enhanced-footer .footer-top a {
transition: color var(--lh-transition-fast);
}
.footer-top .footer-column a:hover,
.footer-top .footer-column a:focus,
.footer-top__widget .footer-column a:hover,
.footer-top__widget .footer-column a:focus,
.footer-top .textwidget a:hover,
.footer-top .textwidget a:focus,
.footer.lh-enhanced-footer .footer-top a:hover,
.footer.lh-enhanced-footer .footer-top a:focus {
color: var(--lh-magenta) !important; /* Magenta on hover */
text-decoration: none;
}
/* Contact info labels (Address, Email, Telephone) - proper case only
Override general .footer-top h4 rule which sets uppercase.
Keep same size/weight as body text for visual consistency. */
.footer-top__widget h4,
.footer.lh-enhanced-footer .footer-top h4 {
text-transform: none !important; /* Allow proper case from content */
}
/* Footer Top: Two-column layout (Sitemap + Contact Info)
Replaces widget-based approach for i18n compatibility. */
.footer-top__columns {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-2xl);
justify-content: flex-start;
}
.footer-top__sitemap,
.footer-top__contact {
flex: 1 1 280px;
max-width: 400px;
}
.footer-top__heading {
font-size: 1.3rem;
font-weight: 700;
color: var(--lh-white) !important;
margin-bottom: var(--lh-space-md);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-top__info-item {
margin-bottom: var(--lh-space-md);
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
}
.footer-top__info-item strong {
color: var(--lh-white);
display: block;
margin-bottom: 4px;
}
.footer-top__info-item a {
color: var(--lh-primary);
text-decoration: none;
transition: color var(--lh-transition-fast);
}
.footer-top__info-item a:hover,
.footer-top__info-item a:focus {
color: var(--lh-magenta);
}
/* ---------------------------------------------------------------------
7. Footer Language Switcher
--------------------------------------------------------------------- */
.footer-middle {
padding: var(--lh-space-lg) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-language-container {
text-align: center;
}
#footer_language_list {
display: inline-block;
background-color: rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 16px 64px;
}
#footer_language_list ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--lh-space-sm);
list-style: none;
margin: 0;
padding: 0;
}
#footer_language_list li {
display: inline-flex;
align-items: center;
}
#footer_language_list a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 4px 6px;
color: var(--lh-orange); /* UKSE: inactive languages are orange */
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--lh-radius-sm);
transition: color var(--lh-transition-fast);
}
#footer_language_list a:hover,
#footer_language_list a:focus {
color: var(--lh-white);
text-decoration: none;
}
#footer_language_list .current-language {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 4px 6px;
background: transparent;
color: var(--lh-white); /* UKSE: active language is white */
font-size: 0.875rem;
font-weight: 700; /* UKSE: 700 */
text-decoration: none;
border-radius: var(--lh-radius-sm);
}
#footer_language_list img {
width: 20px;
height: auto;
border-radius: 2px;
}
/* ---------------------------------------------------------------------
8. Footer Social Icons
--------------------------------------------------------------------- */
.footer-social {
text-align: center; /* UKSE: text-align center */
padding: 0; /* UKSE: 0 */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-social a {
display: inline-block; /* UKSE: inline-block */
background: transparent;
color: var(--lh-orange);
border-radius: 0;
font-size: 1.1rem;
text-decoration: none;
margin: 0 8px; /* UKSE: 0 8px */
padding: 0; /* UKSE: 0 */
transition: color var(--lh-transition-fast), opacity var(--lh-transition-fast);
}
.footer-social a:hover,
.footer-social a:focus,
.footer.lh-enhanced-footer .footer-social a:hover,
.footer.lh-enhanced-footer .footer-social a:focus {
background: transparent !important;
color: var(--lh-magenta) !important; /* Magenta on hover */
opacity: 1 !important;
text-decoration: none !important;
}
/* WhatsApp specific hover - green */
.footer-social a[aria-label="WhatsApp"]:hover,
.footer-social a[aria-label="WhatsApp"]:focus {
color: rgb(37, 211, 102); /* UKSE: WhatsApp green */
}
/* ---------------------------------------------------------------------
9. Footer Copyright Bar
--------------------------------------------------------------------- */
.footer-bottom {
background-color: #000020;
padding: 20px 0;
}
.footer-copyright {
margin: 0;
font-size: 14px;
color: #cccccc;
text-align: center;
}
/* ---------------------------------------------------------------------
Footer Responsive: Tablet (768px - 1024px)
--------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
.footer-mega-menu .wrap {
justify-content: center;
}
.footer-service-panel {
flex: 1 1 calc(50% - var(--lh-space-lg));
max-width: calc(50% - var(--lh-space-lg));
}
}
/* ---------------------------------------------------------------------
Footer Responsive: Mobile (<=768px)
--------------------------------------------------------------------- */
@media (max-width: 768px) {
/* Blog slider */
.section_latest_blog.lh-blog-slider {
padding: var(--lh-space-xl) 0;
}
.blog-slider__title {
/* font-size handled by clamp() in main rule */
margin: 30px auto 12px;
}
.blog-slider__title::after {
/* width/height now consistent at all sizes (matches testimonials) */
margin: 10px auto 0;
}
.blog_slide {
min-width: 280px;
max-width: 100%;
}
/* Partners strip */
.partner-logos-fallback {
gap: var(--lh-space-lg);
}
.partner-logos-fallback .partner-logo img {
height: 36px;
}
/* Skyline */
.footer_skyline.lh-skyline {
height: 80px;
}
/* Mega menu: Accordion mode */
.footer-mega-menu {
padding: var(--lh-space-lg) 0;
}
.footer-mega-menu .wrap {
flex-direction: column;
gap: 0;
}
.footer-service-panel {
flex: 1 1 100%;
min-width: 100%;
padding: 0;
margin: 0;
background: transparent;
border-radius: 0;
border-left: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-service-panel:hover {
background: transparent;
}
/* Title as button */
.footer-service-panel .service-panel-title {
padding: var(--lh-space-md) 0;
cursor: pointer;
margin-bottom: 0;
}
/* Show accordion icon on mobile */
.footer-service-panel .accordion-icon {
display: block;
}
/* Rotate icon when expanded */
.footer-service-panel.is-expanded .accordion-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
/* Content hidden by default on mobile */
.footer-service-panel .service-panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0;
}
/* Content visible when expanded */
.footer-service-panel.is-expanded .service-panel-content {
max-height: 500px;
padding: 0 0 var(--lh-space-md) 0;
}
/* Footer top */
.footer-top {
padding: var(--lh-space-xl) 0;
}
.footer-top__columns {
flex-direction: column;
gap: var(--lh-space-xl);
}
.footer-top__sitemap,
.footer-top__contact {
flex: 1 1 100%;
max-width: 100%;
}
/* Language switcher */
#footer_language_list ul {
gap: var(--lh-space-sm);
}
/* Social icons */
.footer-social {
gap: 4px;
}
.footer-social a {
font-size: 1rem;
padding: 0 6px;
}
/* Language switcher mobile */
#footer_language_list {
padding: 12px 24px;
}
}
/* ---------------------------------------------------------------------
Screen Reader Only (Accessibility)
--------------------------------------------------------------------- */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =====================================================================
Canonical CTA Button Component (.lh-btn)
UKSE Pill Contract (behaviour parity) + LH palette.
DESIGN RULES:
- NO underline on hover/focus/active/visited (enforced via !important)
- Pill shape (border-radius: 999px)
- Primary: gradient + translateY(-2px) + shadow lift on hover/focus
- Secondary: true outline, no transform, no shadow; colour shift on hover
- focus-visible uses outline + offset (not box-shadow)
- Use double-class specificity (.lh-btn.lh-btn--primary) to beat theme defaults
===================================================================== */
/* Base button — resets and shared properties */
.lh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
font-family: var(--lh-font-sans);
font-size: 1rem;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
border-radius: 999px;
border: none;
cursor: pointer;
user-select: none;
transition: transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease;
}
/* Ensure no underline on ANY interactive state */
.lh-btn:link,
.lh-btn:visited,
.lh-btn:hover,
.lh-btn:focus,
.lh-btn:focus-visible,
.lh-btn:active {
text-decoration: none !important;
}
/* Accessible focus state — LH blue ring */
.lh-btn:focus-visible {
outline: 3px solid var(--lh-primary);
outline-offset: 2px;
}
/* Primary: Magenta gradient, white text, shadow lift on hover */
.lh-btn.lh-btn--primary,
.lh-btn.lh-btn--primary:link,
.lh-btn.lh-btn--primary:visited {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta-700) 100%);
color: var(--lh-white) !important;
box-shadow: 0 10px 24px rgba(230, 0, 126, 0.25);
}
.lh-btn.lh-btn--primary:hover,
.lh-btn.lh-btn--primary:focus {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta-700) 100%);
color: var(--lh-white) !important;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(184, 0, 102, 0.25);
}
/* Secondary (canonical): True outline — transparent bg, navy text, colour shift on hover */
.lh-btn.lh-btn--secondary,
.lh-btn.lh-btn--secondary:link,
.lh-btn.lh-btn--secondary:visited {
background: transparent;
border: 2px solid var(--lh-primary);
color: var(--lh-primary-dark) !important;
box-shadow: none;
}
.lh-btn.lh-btn--secondary:hover,
.lh-btn.lh-btn--secondary:focus {
background: transparent;
border-color: var(--lh-primary);
color: var(--lh-primary) !important;
transform: none;
box-shadow: none;
}
/* Hero-scoped override: filled secondary for contrast over video */
.lh-hero .lh-btn.lh-btn--secondary,
.lh-hero .lh-btn.lh-btn--secondary:link,
.lh-hero .lh-btn.lh-btn--secondary:visited {
background: rgba(255, 255, 255, 0.92);
border: 2px solid var(--lh-primary);
color: var(--lh-primary-dark) !important;
}
.lh-hero .lh-btn.lh-btn--secondary:hover,
.lh-hero .lh-btn.lh-btn--secondary:focus {
background: rgba(255, 255, 255, 1);
color: var(--lh-primary) !important;
}
/* Page-hero-scoped override: filled secondary for contrast on dark bg */
.lh-page-hero .lh-btn.lh-btn--secondary,
.lh-page-hero .lh-btn.lh-btn--secondary:link,
.lh-page-hero .lh-btn.lh-btn--secondary:visited {
background: rgba(255, 255, 255, 0.92);
border: 2px solid var(--lh-primary);
color: var(--lh-primary-dark) !important;
}
.lh-page-hero .lh-btn.lh-btn--secondary:hover,
.lh-page-hero .lh-btn.lh-btn--secondary:focus {
background: rgba(255, 255, 255, 1);
color: var(--lh-primary) !important;
}
/* Compact variant — smaller padding, uppercase */
.lh-btn.lh-btn--compact {
padding: 8px 16px;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Mobile: full-width buttons when stacked */
@media (max-width: 768px) {
.lh-btn--full-mobile {
width: 100%;
max-width: 280px;
}
}
/* =====================================================================
LH Section Titles (H2) — canonical class
Use: ...
With underline: ...
Legacy aliases: .home-testimonials-heading, .blog-slider-title
===================================================================== */
.lh-title,
.home-testimonials-heading,
.blog-slider-title {
font-weight: 800;
letter-spacing: -0.2px;
line-height: 1.1;
margin: 0 0 18px;
color: var(--lh-primary-dark);
}
/* Modifier: magenta underline accent (opt-in) */
.lh-title--underline::after {
content: "";
display: block;
width: 300px;
max-width: 100%;
height: 4px;
background: var(--lh-magenta);
margin: 15px auto 0;
border-radius: 2px;
}
@media (max-width: 768px) {
.lh-title--underline::after {
width: 200px;
height: 3px;
margin: 12px auto 0;
}
}
/* ---------------------------------------------------------------------
Hero Section (Home Page)
--------------------------------------------------------------------- */
.lh-hero {
position: relative;
width: 100%;
max-width: 100vw;
overflow: hidden;
}
.lh-hero__video-wrapper {
position: relative;
width: 100%;
height: 60vh;
min-height: 400px;
max-height: 700px;
overflow: hidden;
background-color: var(--lh-primary-dark);
}
.lh-hero__video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hero content overlay — full height, left-aligned with smooth horizontal gradient */
.lh-hero__content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Desktop: content positioned higher with generous top padding, extra left padding */
padding: clamp(48px, 8vh, 100px) var(--lh-space-lg) var(--lh-space-xl) calc(var(--lh-space-lg) + 40px);
/* Smoother horizontal fade: solid left, gradual transition, clear right side */
background: linear-gradient(90deg,
rgba(0, 0, 50, 0.78) 0%,
rgba(0, 0, 50, 0.62) 40%,
rgba(0, 0, 50, 0.25) 65%,
rgba(0, 0, 50, 0) 85%
);
color: var(--lh-white);
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
max-width: 620px;
}
.lh-hero__heading {
font-family: var(--lh-font-heading);
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
line-height: var(--lh-line-height-heading);
margin: 0 0 var(--lh-space-sm);
color: var(--lh-white);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Hero heading spans for multi-line support */
.lh-hero__heading-line1,
.lh-hero__heading-line2 {
display: block;
}
.lh-hero__heading-line2 {
/* Optional: slightly smaller or different weight for line 2 */
}
.lh-hero__subheading {
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.5;
margin: 0 0 var(--lh-space-lg);
opacity: 0.95;
max-width: 590px; /* 30px less than parent container */
}
/* Hero CTAs — left-aligned on desktop */
.lh-hero__ctas {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--lh-space-md);
margin-top: var(--lh-space-md);
}
/* Hero CTA layout helper — button styling now comes from .lh-btn component */
.lh-hero__cta {
/* Layout-specific overrides only; button styles from .lh-btn */
}
/* Tablet & Mobile: Stack video below hero content instead of behind it */
@media (max-width: 900px) {
.lh-hero {
display: flex;
flex-direction: column;
}
/* Content becomes a standalone block (not overlaying video) */
.lh-hero__content {
position: static;
order: 1;
background: var(--lh-primary-dark); /* Solid navy, no overlay needed */
padding: var(--lh-space-xl) var(--lh-space-lg);
max-width: none;
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
}
/* Video moves below content as a separate full-width row */
.lh-hero__video-wrapper {
order: 2;
position: relative;
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: 21 / 9; /* Wider banner ratio for mobile/tablet */
width: 100%;
}
.lh-hero__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 50%; /* Crop left dead space, preserve right content */
}
.lh-hero__ctas {
justify-content: center;
align-items: center;
}
}
/* Mobile: tighter padding, stacked CTAs */
@media (max-width: 768px) {
.lh-hero__content {
padding: var(--lh-space-lg) var(--lh-space-md);
}
.lh-hero__ctas {
flex-direction: column;
}
.lh-hero__cta {
width: 100%;
max-width: 280px;
}
}
/* ---------------------------------------------------------------------
Info Bar (Announcement Bar below Hero)
--------------------------------------------------------------------- */
.lh-info-bar {
background-color: var(--lh-primary-dark);
color: var(--lh-white);
padding: var(--lh-space-md) var(--lh-space-lg);
text-align: center;
}
.lh-info-bar__inner {
max-width: 1200px;
margin: 0 auto;
}
.lh-info-bar__text {
margin: 0;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
.lh-info-bar__link {
color: var(--lh-white);
text-decoration: none;
font-weight: 600;
margin-left: var(--lh-space-sm);
transition: opacity var(--lh-transition-fast);
}
.lh-info-bar__link:hover,
.lh-info-bar__link:focus {
opacity: 0.85;
text-decoration: none;
}
/* Mobile adjustments */
@media (max-width: 767px) {
.lh-info-bar {
padding: var(--lh-space-sm) var(--lh-space-md);
}
.lh-info-bar__text {
font-size: 0.9375rem;
}
.lh-info-bar__link {
display: inline-block;
margin-left: 0;
margin-top: var(--lh-space-xs);
}
}
/* ---------------------------------------------------------------------
3-Card Trust Band (#home-info-bar) — UKSE Parity
Matches UKSE computed styles exactly (see docs/UKSE_Home_Info_Bar_Computed_Styles.md)
--------------------------------------------------------------------- */
#home-info-bar.home-info-bar {
display: block;
padding: 20px 0 12px;
margin: 0;
background: linear-gradient(rgb(245, 247, 251) 0%, rgb(255, 255, 255) 70%);
border: none;
border-radius: 0;
font-family: var(--lh-font-sans);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--lh-primary-dark);
}
#home-info-bar .wrap {
display: block;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.home-info-bar__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.home-info-bar__item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background-color: var(--lh-white);
border: 1px solid rgba(9, 26, 63, 0.08);
border-radius: 16px;
box-shadow: 0px 10px 24px 0px rgba(9, 26, 63, 0.06);
}
.home-info-bar__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-start;
width: 40px;
height: 40px;
color: var(--lh-magenta);
}
.home-info-bar__icon i {
display: block;
font-size: 32px;
font-weight: 900;
line-height: 32px;
color: inherit;
}
.home-info-bar__text {
flex: 1;
min-width: 0;
}
.home-info-bar__title {
display: block;
font-family: var(--lh-font-sans);
font-size: 16.8px;
font-weight: 600;
line-height: 1.3;
color: var(--lh-primary-dark);
margin: 0 0 4px;
}
.home-info-bar__description {
display: block;
font-family: var(--lh-font-sans);
font-size: 14.4px;
font-weight: 400;
line-height: 1.35;
color: #49536a;
margin: 0;
}
/* Optional link below description (LH extension, not in UKSE) */
.home-info-bar__link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: var(--lh-primary);
text-decoration: none;
transition: color var(--lh-transition-fast);
}
.home-info-bar__link:hover,
.home-info-bar__link:focus {
color: var(--lh-primary-dark);
text-decoration: none;
}
.home-info-bar__link i {
font-size: 11px;
transition: transform var(--lh-transition-fast);
}
.home-info-bar__link:hover i {
transform: translateX(2px);
}
/* Tablet/Mobile: single column stacked (UKSE behaviour) */
@media (max-width: 1199px) {
.home-info-bar__grid {
grid-template-columns: 1fr;
gap: 16px;
}
#home-info-bar .wrap {
padding: 0 20px;
}
}
/* Mobile refinements */
@media (max-width: 640px) {
#home-info-bar .wrap {
padding: 0 16px;
}
.home-info-bar__item {
padding: 12px 14px;
}
}
/* ---------------------------------------------------------------------
Journey Sections (Home Page)
--------------------------------------------------------------------- */
.lh-home-journeys {
/* No padding/background - each section is full-bleed */
}
.lh-journey {
max-width: 1200px;
margin: 0 auto 2rem;
padding: var(--lh-space-xl) var(--lh-space-lg);
background-color: var(--lh-white);
border-radius: var(--lh-radius-lg);
box-shadow: var(--lh-shadow-md);
}
.lh-journey:last-child {
margin-bottom: 0;
}
.lh-journey__header {
text-align: center;
margin-bottom: var(--lh-space-md);
}
.lh-journey__heading {
font-family: var(--lh-font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
line-height: var(--lh-line-height-heading);
}
/* When canonical .lh-title is applied, use its weight/tracking */
.lh-title.lh-journey__heading {
font-weight: 800;
letter-spacing: -0.2px;
}
.lh-journey__intro {
font-size: 1.0625rem;
color: var(--lh-grey-700);
line-height: 1.7;
margin: 0 0 var(--lh-space-md);
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* Journey CTA layout helper — button styling now comes from .lh-btn component */
.lh-journey__cta {
/* Layout-specific overrides only; button styles from .lh-btn */
}
/* Journey Cards Grid */
.lh-journey__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--lh-space-lg);
}
@media (max-width: 992px) {
.lh-journey__cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.lh-journey__cards {
grid-template-columns: 1fr;
}
}
/* Individual Journey Card */
.lh-journey-card {
padding: var(--lh-space-lg);
background-color: var(--lh-grey-100);
border-radius: var(--lh-radius-md);
text-align: center;
box-shadow: var(--lh-shadow-sm);
transition: box-shadow var(--lh-transition-base), transform var(--lh-transition-base);
}
.lh-journey-card:hover {
box-shadow: var(--lh-shadow-lg);
transform: translateY(-3px);
}
.lh-journey-card__icon {
width: 48px;
height: 48px;
margin: 0 auto var(--lh-space-sm);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--lh-primary);
color: var(--lh-white);
border-radius: var(--lh-radius-full);
font-size: 1.25rem;
}
.lh-journey-card__label {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
line-height: var(--lh-line-height-heading);
}
.lh-journey-card__label a {
color: inherit;
text-decoration: none;
transition: color var(--lh-transition-fast);
}
.lh-journey-card__label a:hover {
color: var(--lh-primary);
}
.lh-journey-card__text {
font-size: 0.9375rem;
color: var(--lh-grey-700);
line-height: 1.5;
margin: 0;
}
/* Journey section colour variants (optional brand differentiation) */
.lh-journey--students .lh-journey-card__icon {
background-color: var(--lh-primary);
}
.lh-journey--hosts .lh-journey-card__icon {
background-color: var(--lh-magenta);
}
.lh-journey--partners .lh-journey-card__icon {
background-color: var(--lh-secondary);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.lh-journey {
margin-bottom: var(--lh-space-xl);
padding: var(--lh-space-xl) var(--lh-space-lg);
}
.lh-journey-card {
padding: var(--lh-space-lg);
}
}
/* Journey inner wrapper (used when images present) */
.lh-journey__inner {
display: flex;
flex-direction: column;
gap: var(--lh-space-md);
}
/* Journey with image: 2-column layout on desktop */
.lh-journey--has-image .lh-journey__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-md);
}
@media (min-width: 992px) {
.lh-journey--has-image .lh-journey__inner {
grid-template-columns: 1fr 1fr;
gap: var(--lh-space-lg);
align-items: start;
}
/* Students image: wide banner below header, above cards */
.lh-journey--students.lh-journey--has-image .lh-journey__inner {
grid-template-columns: 1fr;
}
.lh-journey--students.lh-journey--has-image .lh-journey__image {
grid-column: 1;
grid-row: 2;
}
.lh-journey--students.lh-journey--has-image .lh-journey__cards {
grid-column: 1;
grid-row: 3;
}
/* Hosts image: portrait image on right */
.lh-journey--hosts.lh-journey--has-image .lh-journey__header {
grid-column: 1;
grid-row: 1;
}
.lh-journey--hosts.lh-journey--has-image .lh-journey__cards {
grid-column: 1;
grid-row: 2;
}
.lh-journey--hosts.lh-journey--has-image .lh-journey__image {
grid-column: 2;
grid-row: 1 / 3;
}
}
/* Journey image styling */
.lh-journey__image {
width: 100%;
overflow: hidden;
border-radius: var(--lh-radius-lg);
box-shadow: var(--lh-shadow-md);
}
.lh-journey__image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: var(--lh-radius-lg);
}
/* Students image: wide banner aspect ratio */
.lh-journey--students .lh-journey__image img {
aspect-ratio: 1400 / 594;
max-height: 280px;
}
/* Hosts image: portrait aspect ratio */
.lh-journey--hosts .lh-journey__image img {
aspect-ratio: 1500 / 1120;
max-height: 380px;
}
@media (max-width: 991px) {
.lh-journey__image img {
max-height: 300px;
}
}
/* ==========================================================================
Promo Section
========================================================================== */
.lh-promo {
background: linear-gradient(135deg, var(--lh-primary-dark) 0%, var(--lh-primary) 100%);
padding: var(--lh-space-2xl) var(--lh-space-lg);
text-align: center;
}
.lh-promo__inner {
max-width: 800px;
margin: 0 auto;
}
.lh-promo__heading {
font-family: var(--lh-font-heading);
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 700;
color: var(--lh-white);
margin: 0 0 var(--lh-space-md);
line-height: var(--lh-line-height-heading);
}
.lh-promo__text {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0 0 var(--lh-space-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.lh-promo__cta {
/* Inherits from .lh-btn; override for light-on-dark context */
background-color: var(--lh-white);
color: var(--lh-primary-dark);
}
.lh-promo__cta:hover {
background-color: var(--lh-grey-100);
color: var(--lh-primary-dark);
}
.lh-promo__eyebrow {
display: block;
font-family: var(--lh-font-body);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--lh-space-sm);
}
/* Journey CTA variants - all use same design as homepage */
.lh-promo--student,
.lh-promo--host,
.lh-promo--partner {
/* Inherits default promo styling */
}
@media (max-width: 768px) {
.lh-promo {
padding: var(--lh-space-xl) var(--lh-space-md);
}
}
/* ==========================================================================
Split Promo Layout Component (.lh-split)
UKSE-inspired 2-column promo panels for journey sections.
Full-bleed sections: background spans edge-to-edge, content constrained.
========================================================================== */
.lh-split {
/* Full-bleed: no max-width, no border-radius, background spans viewport */
padding: var(--lh-space-2xl) var(--lh-space-lg);
background-color: transparent; /* Allow section bg to show through */
}
.lh-split__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-lg);
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 768px) {
.lh-split__inner {
grid-template-columns: 1fr 1fr;
gap: var(--lh-space-xl);
}
}
/* Reversed layout: image first on desktop */
@media (min-width: 768px) {
.lh-split--reversed .lh-split__content {
order: 2;
}
.lh-split--reversed .lh-split__media {
order: 1;
}
}
/* Content column */
.lh-split__content {
display: flex;
flex-direction: column;
gap: var(--lh-space-sm);
}
/* Eyebrow: Small uppercase label */
.lh-split__eyebrow {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lh-primary);
margin: 0;
}
.lh-split--hosts .lh-split__eyebrow {
color: var(--lh-magenta);
}
.lh-split__heading {
font-size: clamp(1.625rem, 3.5vw, 2.25rem);
font-weight: 800;
color: var(--lh-primary-dark);
margin: 0;
line-height: 1.15;
letter-spacing: -0.3px;
}
.lh-split__intro {
font-size: 1rem;
color: var(--lh-grey-600);
line-height: 1.65;
margin: var(--lh-space-sm) 0 0;
max-width: 480px;
}
.lh-split__cta {
align-self: flex-start;
margin-top: var(--lh-space-md);
}
/* Action Row: Multi-button journey actions */
.lh-action-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--lh-space-sm);
margin-top: var(--lh-space-md);
}
/* Tertiary action link (quiet text + arrow) */
.lh-action-link,
.lh-action-link:link,
.lh-action-link:visited {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-primary);
text-decoration: none !important;
transition: color 0.2s ease;
}
.lh-action-link:hover,
.lh-action-link:focus,
.lh-action-link:active {
color: var(--lh-primary-dark);
text-decoration: none !important;
}
.lh-action-link i {
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.lh-action-link:hover i {
transform: translateX(3px);
}
/* Tertiary action block: sits below button row */
.lh-action-tertiary {
margin-top: 12px;
}
.lh-action-tertiary .lh-action-link {
font-size: 0.9375rem;
padding: 4px 0;
}
/* Mobile: stack action row */
@media (max-width: 767px) {
.lh-action-row {
flex-direction: column;
align-items: stretch;
gap: var(--lh-space-xs);
}
.lh-action-row .lh-btn {
width: 100%;
text-align: center;
justify-content: center;
}
.lh-action-tertiary {
margin-top: 10px;
}
}
/* Media column */
.lh-split__media {
position: relative;
border-radius: var(--lh-radius-md);
overflow: hidden;
}
.lh-split__media img {
width: 100%;
display: block;
object-fit: cover;
border-radius: var(--lh-radius-md);
max-height: 320px;
}
/* ==========================================================================
Info Card Components (Premium Editorial Style)
Non-clickable informational cards with icon + title + optional text
========================================================================== */
/* Info Row: Vertical stack of info cards within content column */
.lh-info-row {
display: flex;
flex-direction: column;
gap: var(--lh-space-sm);
margin-top: var(--lh-space-md);
}
/* Info Card: Compact card with icon, title, text */
.lh-info-card {
display: flex;
gap: var(--lh-space-sm);
align-items: flex-start;
padding: var(--lh-space-sm) var(--lh-space-md);
background: var(--lh-grey-100);
border-radius: var(--lh-radius-sm);
border-left: 2px solid var(--lh-primary);
}
.lh-info-card__icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--lh-white);
border-radius: var(--lh-radius-sm);
color: var(--lh-primary);
font-size: 0.8125rem;
}
.lh-info-card__body {
flex: 1;
min-width: 0;
}
.lh-info-card__title {
font-size: 0.8125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0;
line-height: 1.3;
}
.lh-info-card__text {
font-size: 0.75rem;
color: var(--lh-grey-600);
line-height: 1.45;
margin: var(--lh-space-2xs) 0 0;
}
/* Info Grid: Compact grid for chips */
.lh-info-grid {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-sm);
margin: var(--lh-space-sm) 0;
}
.lh-info-grid--compact {
gap: var(--lh-space-xs);
}
/* Info Chip: Compact pill with icon + label (base style) */
.lh-info-chip {
display: inline-flex;
align-items: center;
gap: var(--lh-space-xs);
padding: var(--lh-space-xs) var(--lh-space-sm);
background: rgba(230, 0, 126, 0.08);
border-radius: var(--lh-radius-full);
font-size: 0.8125rem;
font-weight: 600;
color: var(--lh-grey-800);
cursor: default; /* Non-clickable */
}
.lh-info-chip i {
font-size: 0.75rem;
color: var(--lh-magenta);
}
/* Student chip variant: blue tint */
.lh-info-chip--student {
background: rgba(0, 51, 102, 0.08);
}
.lh-info-chip--student i {
color: var(--lh-primary);
}
/* Info Badge: Mini badge for Partners */
.lh-info-badge {
display: inline-flex;
align-items: center;
gap: var(--lh-space-xs);
padding: var(--lh-space-sm) var(--lh-space-md);
background: var(--lh-white);
border-radius: var(--lh-radius-md);
font-size: 0.8125rem;
font-weight: 600;
color: var(--lh-grey-800);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.lh-info-badge i {
font-size: 0.875rem;
color: var(--lh-secondary);
}
/* Section variants (support custom background via inline style: gradient > colour > default) */
.lh-split--students {
background: var(--lh-section-bg-gradient, var(--lh-section-bg, var(--lh-white)));
}
.lh-split--hosts {
background: var(--lh-section-bg-gradient, var(--lh-section-bg, var(--lh-grey-100)));
/* Slightly more vertical breathing room than default .lh-split */
padding-top: calc(var(--lh-space-2xl) + var(--lh-space-sm)); /* 56px vs 48px */
padding-bottom: calc(var(--lh-space-2xl) + var(--lh-space-sm)); /* 56px vs 48px */
}
/* Desktop: wider gap between text and image */
@media (min-width: 768px) {
.lh-split--hosts .lh-split__inner {
gap: calc(var(--lh-space-xl) + var(--lh-space-sm)); /* 40px vs 32px */
}
}
.lh-split--hosts .lh-split__media img {
max-height: 340px;
object-position: center center; /* Center crop to keep people in frame */
}
/* Mobile adjustments */
@media (max-width: 767px) {
.lh-split {
padding: var(--lh-space-xl) var(--lh-space-md);
}
.lh-split__inner {
gap: var(--lh-space-md);
}
.lh-split__media img {
max-height: 200px;
}
.lh-split--hosts .lh-split__media img {
max-height: 200px;
}
.lh-info-row {
margin-top: var(--lh-space-sm);
}
}
/* ==========================================================================
Compact Strip Layout Component (.lh-strip)
Full-bleed horizontal layout for Partners section.
========================================================================== */
.lh-strip {
/* Full-bleed: background spans viewport */
padding: var(--lh-space-xl) var(--lh-space-lg);
background: var(--lh-grey-200);
}
.lh-strip__inner {
display: flex;
flex-direction: column;
gap: var(--lh-space-md);
align-items: flex-start;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 992px) {
.lh-strip__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--lh-space-lg);
}
}
.lh-strip__content {
flex: 1;
min-width: 0;
}
.lh-strip__eyebrow {
display: block;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #C41A24; /* a11y: darkened from var(--lh-secondary) #E61E29 for contrast on grey-200 bg (5.03:1) */
margin: 0 0 var(--lh-space-2xs);
}
.lh-strip__heading {
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-2xs);
line-height: 1.25;
}
.lh-strip__intro {
font-size: 0.8125rem;
color: #555d66; /* a11y: darkened from var(--lh-grey-600) #6c757d for contrast on grey-200 bg (5.63:1) */
line-height: 1.5;
margin: 0;
}
/* Badges container */
.lh-strip__badges {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-xs);
}
.lh-strip__cta {
flex-shrink: 0;
}
/* Partners variant (support custom background via inline style: gradient > colour > default) */
.lh-strip--partners {
background: var(--lh-section-bg-gradient, var(--lh-section-bg, var(--lh-grey-200)));
}
/* Mobile adjustments */
@media (max-width: 991px) {
.lh-strip {
padding: var(--lh-space-lg) var(--lh-space-md);
}
.lh-strip__badges {
flex-direction: row;
gap: var(--lh-space-xs);
}
}
/* ==========================================================================
Fallback Content Indicator (Staging Visual Aid)
Subtle styling for content using fallback values when ACF is empty.
========================================================================== */
/* Fallback content: no visual reduction in production.
was opacity: 0.88 during dev — removed for a11y contrast compliance. */
/* Entire section using fallbacks gets a subtle indicator border */
.is-fallback-section {
position: relative;
}
/* Staging-only visual indicator: dashed border on fallback sections */
.is-fallback-section::before {
content: '';
position: absolute;
inset: 0;
border: 2px dashed rgba(34, 148, 210, 0.3);
pointer-events: none;
border-radius: var(--lh-radius-md);
}
/* ==========================================================================
Journey Landing Pages
Templates: template-journey-students.php, template-journey-hosts.php,
template-journey-partners.php
========================================================================== */
/* Journey Page Main Container - Full-width override
* Resets constraining card-style rules from line ~3544
* so sections can bleed full-width with their own backgrounds */
.lh-journey {
max-width: none;
margin: 0;
padding: 0;
background: var(--lh-white);
border-radius: 0;
box-shadow: none;
}
/* Journey Hero Section - Dark navy to match internal-v2 pages */
.lh-journey-hero {
padding: var(--lh-space-2xl) 0;
background: var(--lh-primary-dark);
color: var(--lh-white);
}
.lh-journey-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-xl);
align-items: center;
}
@media (min-width: 992px) {
.lh-journey-hero__inner {
grid-template-columns: 1fr 1fr;
}
.lh-journey-hero--has-image .lh-journey-hero__inner {
grid-template-columns: 1.2fr 0.8fr;
}
}
.lh-journey-hero__inner--centered {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
@media (min-width: 992px) {
.lh-journey-hero__inner--centered {
grid-template-columns: 1fr;
}
}
.lh-journey-hero__content {
display: flex;
flex-direction: column;
gap: var(--lh-space-md);
align-items: flex-start;
}
.lh-journey-hero__inner--centered .lh-journey-hero__content {
align-items: center;
}
/* Prevent hero CTA buttons from stretching full width */
.lh-journey-hero__content .lh-btn {
width: auto;
}
.lh-journey-hero__eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--lh-primary);
}
.lh-journey-hero__heading {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
color: var(--lh-white);
line-height: 1.15;
margin: 0;
}
.lh-journey-hero__intro {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--lh-primary);
line-height: 1.6;
margin: 0;
max-width: 540px;
opacity: 0.95;
}
.lh-journey-hero__inner--centered .lh-journey-hero__intro {
max-width: 100%;
}
.lh-journey-hero__media {
display: flex;
justify-content: center;
align-items: center;
}
.lh-journey-hero__media img {
width: 100%;
height: auto;
max-width: 500px;
border-radius: var(--lh-radius-lg);
box-shadow: var(--lh-shadow-lg);
}
/* Compact hero variant (Partners) */
.lh-journey-hero--compact {
padding: var(--lh-space-xl) 0;
}
/* Journey Sections */
.lh-section {
padding: var(--lh-space-2xl) 0;
}
.lh-section--alt-bg {
background: var(--lh-off-white);
}
.lh-section--paper {
background-color: var(--lh-blue-50, #f5fafd);
}
/* Title utilities */
.lh-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--lh-primary-dark);
line-height: 1.25;
margin: 0 0 var(--lh-space-lg);
}
.lh-title--center {
text-align: center;
}
.lh-lead {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--lh-grey-700);
line-height: 1.6;
margin: 0 0 var(--lh-space-lg);
}
.lh-lead--center {
text-align: center;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
Vertical Stepper (How It Works)
==========================================================================
Default: continuous gradient rail with positioned markers.
Rail gradient: Blue (#2294D2) → Magenta (#E6007E)
Marker colors: match their Y position on the rail.
========================================================================== */
.lh-stepper {
list-style: none;
margin: var(--lh-space-xl) auto 0;
padding: 0 0 0 60px;
max-width: none;
position: relative;
}
/* Single continuous rail from first to last disc center */
.lh-stepper::before {
content: '';
position: absolute;
left: 19px;
top: calc(var(--lh-space-md) + 20px);
bottom: 20px;
width: 3px;
background: linear-gradient(180deg, var(--lh-primary) 0%, var(--lh-magenta) 100%);
border-radius: 2px;
}
.lh-stepper__item {
display: block;
position: relative;
padding-bottom: var(--lh-space-xl);
}
.lh-stepper__item:last-child {
padding-bottom: 0;
}
/* Numbered marker - positioned on the rail */
.lh-stepper__marker {
position: absolute;
left: -60px;
top: var(--lh-space-md);
width: 40px;
height: 40px;
color: var(--lh-white);
font-size: 1rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 2px 8px rgba(0, 0, 50, 0.15);
}
/* Marker gradient colors matching rail position (9 steps) */
.lh-stepper__item:nth-child(1) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary) 100%);
}
.lh-stepper__item:nth-child(2) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(200, 73%, 45%) 0%, hsl(200, 73%, 35%) 100%);
}
.lh-stepper__item:nth-child(3) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(210, 70%, 42%) 0%, hsl(210, 70%, 32%) 100%);
}
.lh-stepper__item:nth-child(4) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(230, 65%, 40%) 0%, hsl(230, 65%, 30%) 100%);
}
.lh-stepper__item:nth-child(5) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(260, 60%, 40%) 0%, hsl(260, 60%, 30%) 100%);
}
.lh-stepper__item:nth-child(6) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(290, 55%, 42%) 0%, hsl(290, 55%, 32%) 100%);
}
.lh-stepper__item:nth-child(7) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(310, 55%, 44%) 0%, hsl(310, 55%, 34%) 100%);
}
.lh-stepper__item:nth-child(8) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(325, 60%, 46%) 0%, hsl(325, 60%, 36%) 100%);
}
.lh-stepper__item:nth-child(9) .lh-stepper__marker,
.lh-stepper__item:nth-child(n+9) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-magenta) 0%, hsl(330, 100%, 35%) 100%);
}
/* Last disc always uses gradient endpoint (magenta) regardless of step count */
.lh-stepper__item:last-child .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta) 100%);
}
/* -----------------------------------------------------------------------------
Step-count modifiers for proper gradient distribution
-----------------------------------------------------------------------------
Default nth-child colors assume 9 steps. Use these modifiers for shorter
steppers to get properly distributed gradient colors.
Gradient: Blue (hsl 199) → Magenta (hsl 330)
----------------------------------------------------------------------------- */
/* 3-step stepper: 0%, 50%, 100% */
.lh-stepper--3-steps .lh-stepper__item:nth-child(1) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary) 100%);
}
.lh-stepper--3-steps .lh-stepper__item:nth-child(2) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(265, 65%, 45%) 0%, hsl(265, 65%, 35%) 100%);
}
.lh-stepper--3-steps .lh-stepper__item:nth-child(3) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta) 100%);
}
/* 4-step stepper: 0%, 33%, 67%, 100% */
.lh-stepper--4-steps .lh-stepper__item:nth-child(1) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary) 100%);
}
.lh-stepper--4-steps .lh-stepper__item:nth-child(2) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(243, 60%, 45%) 0%, hsl(243, 60%, 35%) 100%);
}
.lh-stepper--4-steps .lh-stepper__item:nth-child(3) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(286, 55%, 45%) 0%, hsl(286, 55%, 35%) 100%);
}
.lh-stepper--4-steps .lh-stepper__item:nth-child(4) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta) 100%);
}
/* 5-step stepper: 0%, 25%, 50%, 75%, 100% */
.lh-stepper--5-steps .lh-stepper__item:nth-child(1) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary) 100%);
}
.lh-stepper--5-steps .lh-stepper__item:nth-child(2) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(232, 65%, 45%) 0%, hsl(232, 65%, 35%) 100%);
}
.lh-stepper--5-steps .lh-stepper__item:nth-child(3) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(265, 60%, 45%) 0%, hsl(265, 60%, 35%) 100%);
}
.lh-stepper--5-steps .lh-stepper__item:nth-child(4) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(298, 55%, 45%) 0%, hsl(298, 55%, 35%) 100%);
}
.lh-stepper--5-steps .lh-stepper__item:nth-child(5) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta) 100%);
}
/* 6-step stepper: 0%, 20%, 40%, 60%, 80%, 100% */
.lh-stepper--6-steps .lh-stepper__item:nth-child(1) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary) 100%);
}
.lh-stepper--6-steps .lh-stepper__item:nth-child(2) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(225, 68%, 45%) 0%, hsl(225, 68%, 35%) 100%);
}
.lh-stepper--6-steps .lh-stepper__item:nth-child(3) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(251, 62%, 45%) 0%, hsl(251, 62%, 35%) 100%);
}
.lh-stepper--6-steps .lh-stepper__item:nth-child(4) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(277, 58%, 45%) 0%, hsl(277, 58%, 35%) 100%);
}
.lh-stepper--6-steps .lh-stepper__item:nth-child(5) .lh-stepper__marker {
background: linear-gradient(135deg, hsl(303, 55%, 45%) 0%, hsl(303, 55%, 35%) 100%);
}
.lh-stepper--6-steps .lh-stepper__item:nth-child(6) .lh-stepper__marker {
background: linear-gradient(135deg, var(--lh-magenta) 0%, var(--lh-magenta) 100%);
}
/* -----------------------------------------------------------------------------
Centering for shorter steppers
-----------------------------------------------------------------------------
Steppers with 3-4 steps look sparse at full width.
Apply max-width constraint to center them visually within the section.
----------------------------------------------------------------------------- */
.lh-stepper--3-steps,
.lh-stepper--4-steps {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.lh-stepper__content {
flex: 1;
padding-top: 0;
}
.lh-stepper__title {
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-xs);
line-height: 1.3;
}
.lh-stepper__text {
font-size: 0.9375rem;
color: var(--lh-grey-600);
line-height: 1.6;
margin: 0;
}
/* Mask rail below the last disc */
.lh-stepper__item:last-child::after {
content: '';
position: absolute;
left: -60px;
top: calc(var(--lh-space-md) + 40px);
width: 40px;
bottom: 0;
background: var(--lh-white);
z-index: 1;
}
/* Responsive: mobile adjustments */
@media (max-width: 767px) {
.lh-stepper {
padding-left: 48px;
}
.lh-stepper::before {
left: 15px;
width: 2px;
top: calc(var(--lh-space-md) + 16px);
bottom: 16px;
}
.lh-stepper__marker {
left: -48px;
width: 32px;
height: 32px;
font-size: 0.875rem;
}
.lh-stepper__item {
padding-bottom: var(--lh-space-lg);
}
.lh-stepper__item:last-child::after {
left: -48px;
top: calc(var(--lh-space-md) + 32px);
width: 32px;
}
.lh-stepper__title {
font-size: 1rem;
}
.lh-stepper__text {
font-size: 0.875rem;
}
}
/* Benefits Grid */
.lh-benefits-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-lg);
margin-top: var(--lh-space-xl);
}
@media (min-width: 768px) {
.lh-benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.lh-benefits-grid {
grid-template-columns: repeat(4, 1fr);
}
.lh-benefits-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* Single column variant for split layouts */
.lh-benefits-grid--1 {
grid-template-columns: 1fr;
gap: var(--lh-space-md);
margin-top: var(--lh-space-lg);
}
.lh-benefit-card {
padding: var(--lh-space-lg);
background: var(--lh-white);
border-radius: var(--lh-radius-md);
box-shadow: var(--lh-shadow-sm);
text-align: center;
transition: box-shadow var(--lh-transition-base), transform var(--lh-transition-base);
}
.lh-benefit-card:hover {
box-shadow: var(--lh-shadow-md);
transform: translateY(-2px);
}
.lh-benefit-card__icon {
width: 56px;
height: 56px;
margin: 0 auto var(--lh-space-md);
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary-dark) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--lh-white);
font-size: 1.5rem;
}
.lh-benefit-card__title {
font-size: 1rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
}
.lh-benefit-card__text {
font-size: 0.875rem;
color: var(--lh-grey-600);
line-height: 1.5;
margin: 0;
}
/* Compact benefit card variant (for split layouts) */
.lh-benefit-card--compact {
padding: var(--lh-space-md);
text-align: left;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 0 var(--lh-space-md);
}
.lh-benefit-card--compact .lh-benefit-card__icon {
width: 40px;
height: 40px;
margin: 0;
font-size: 1rem;
grid-row: span 2;
align-self: start;
}
.lh-benefit-card--compact .lh-benefit-card__title {
margin-bottom: var(--lh-space-xs);
}
/* Checklist */
.lh-checklist {
list-style: none;
padding: 0;
margin: var(--lh-space-lg) 0 0;
display: flex;
flex-direction: column;
gap: var(--lh-space-sm);
}
.lh-checklist--inline {
flex-direction: row;
flex-wrap: wrap;
gap: var(--lh-space-md);
}
.lh-checklist__item {
display: flex;
align-items: flex-start;
gap: var(--lh-space-sm);
font-size: 0.9375rem;
color: var(--lh-grey-800);
}
.lh-checklist__item i {
flex-shrink: 0;
color: var(--lh-primary);
margin-top: 3px;
}
/* Factors (pricing factors) */
.lh-factors {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--lh-space-md);
margin-top: var(--lh-space-xl);
}
.lh-factor {
display: flex;
align-items: center;
gap: var(--lh-space-sm);
padding: var(--lh-space-sm) var(--lh-space-md);
background: var(--lh-white);
border-radius: var(--lh-radius-full);
font-size: 0.875rem;
color: var(--lh-grey-700);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.lh-factor i {
color: var(--lh-primary);
}
/* Stacked factors variant (for split layouts) */
.lh-factors--stacked {
flex-direction: column;
align-items: flex-start;
gap: var(--lh-space-sm);
margin-top: var(--lh-space-lg);
}
/* Split Layout (content + image) - Journey pages only */
/* Scoped to .lh-journey to avoid conflicting with homepage .lh-split */
.lh-journey .lh-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-xl);
align-items: center;
}
@media (min-width: 768px) {
.lh-journey .lh-split {
grid-template-columns: 1fr 1fr;
}
}
.lh-journey .lh-split__content {
display: flex;
flex-direction: column;
}
.lh-journey .lh-split__content .lh-title {
margin-bottom: var(--lh-space-md);
}
.lh-journey .lh-split__content .lh-lead {
margin-bottom: 0;
}
.lh-journey .lh-split__media {
display: flex;
justify-content: center;
}
.lh-journey .lh-split__media img {
width: 100%;
max-width: 450px;
height: auto;
border-radius: var(--lh-radius-lg);
box-shadow: var(--lh-shadow-md);
}
@media (max-width: 767px) {
.lh-journey .lh-split__media {
order: -1;
}
.lh-journey .lh-split__media img {
max-width: 320px;
}
}
/* Cross-sell Card */
.lh-crosssell-card {
background: linear-gradient(135deg, var(--lh-grey-100) 0%, var(--lh-white) 100%);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-xl);
text-align: center;
}
.lh-crosssell-card__heading {
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
}
.lh-crosssell-card__text {
font-size: 0.9375rem;
color: var(--lh-grey-600);
margin: 0 0 var(--lh-space-lg);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.lh-crosssell-card .lh-btn i {
margin-left: var(--lh-space-xs);
font-size: 0.75em;
}
/* Partner Types */
.lh-partner-types {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-lg);
margin-top: var(--lh-space-xl);
}
@media (min-width: 768px) {
.lh-partner-types {
grid-template-columns: repeat(3, 1fr);
}
}
.lh-partner-type {
background: var(--lh-white);
border-radius: var(--lh-radius-md);
padding: var(--lh-space-lg);
text-align: center;
box-shadow: var(--lh-shadow-sm);
}
.lh-partner-type__icon {
width: 64px;
height: 64px;
margin: 0 auto var(--lh-space-md);
background: linear-gradient(135deg, var(--lh-primary) 0%, var(--lh-primary-dark) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--lh-white);
font-size: 1.75rem;
}
.lh-partner-type__content {
display: flex;
flex-direction: column;
gap: var(--lh-space-sm);
}
.lh-partner-type__label {
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0;
}
.lh-partner-type__text {
font-size: 0.875rem;
color: var(--lh-grey-600);
line-height: 1.5;
margin: 0;
}
.lh-partner-type__link {
display: inline-flex;
align-items: center;
gap: var(--lh-space-xs);
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-primary);
margin-top: var(--lh-space-sm);
}
.lh-partner-type__link:hover {
color: var(--lh-primary-dark);
}
/* CTA Strip (journey pages) */
.lh-strip--cta {
background: linear-gradient(135deg, var(--lh-primary-dark) 0%, var(--lh-primary) 100%);
padding: var(--lh-space-xl) var(--lh-space-lg);
}
.lh-strip--cta .lh-strip__heading {
color: var(--lh-white);
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}
.lh-strip--cta .lh-strip__text {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9375rem;
}
/* Button size variant */
.lh-btn--lg {
padding: var(--lh-space-md) var(--lh-space-xl);
font-size: 1rem;
}
/* Responsive adjustments */
@media (max-width: 767px) {
.lh-journey-hero {
padding: var(--lh-space-xl) 0;
}
.lh-section {
padding: var(--lh-space-xl) 0;
}
.lh-benefits-grid {
gap: var(--lh-space-md);
}
}
/* Hero Jump Link */
.lh-journey-hero__jump-link {
display: inline-flex;
align-items: center;
gap: var(--lh-space-xs);
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-primary);
text-decoration: none;
margin-top: var(--lh-space-md);
transition: color var(--lh-transition-base), opacity var(--lh-transition-base);
opacity: 0.85;
}
.lh-journey-hero__jump-link:hover,
.lh-journey-hero__jump-link:focus {
color: var(--lh-white) !important;
opacity: 1;
}
.lh-journey-hero__jump-link i {
font-size: 0.75em;
animation: lh-bounce 2s infinite;
}
@keyframes lh-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(4px);
}
60% {
transform: translateY(2px);
}
}
/* Hero Trust Microcopy (batch 2) */
/* Hero frosted-glass pills */
.lh-hero-pills {
display: flex;
align-items: center;
gap: 10px;
margin-top: var(--lh-space-lg);
flex-wrap: wrap;
}
.lh-hero-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 100px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
line-height: 1.3;
transition: background var(--lh-transition-fast), border-color var(--lh-transition-fast);
}
.lh-hero-pill i {
font-size: 0.6875rem;
opacity: 0.7;
}
.lh-hero-pill--link {
text-decoration: none;
cursor: pointer;
}
.lh-hero-pill--link:hover,
.lh-hero-pill--link:focus {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.35);
color: var(--lh-white);
}
.lh-hero-pill--link i {
animation: lh-bounce 2s infinite;
}
@media (max-width: 480px) {
.lh-hero-pills {
gap: 8px;
}
.lh-hero-pill {
font-size: 0.75rem;
padding: 6px 12px;
}
}
/* British Council Statement — edge-to-edge section (matches /safety/ pattern) */
.lh-british-council-statement {
padding: var(--lh-space-2xl) 0;
background: var(--lh-primary-dark);
position: relative;
}
.lh-british-council-statement::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--lh-magenta);
}
.lh-british-council-statement__inner {
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 0 var(--lh-space-lg);
}
.lh-british-council-statement__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--lh-magenta);
margin-bottom: var(--lh-space-md);
}
.lh-british-council-statement__icon i {
font-size: 1.5rem;
color: var(--lh-white);
}
.lh-british-council-statement__badge {
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-white);
margin: 0 0 var(--lh-space-md);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lh-british-council-statement__text {
color: rgba(255, 255, 255, 0.9);
margin: 0 auto;
line-height: 1.6;
font-size: 1.125rem;
max-width: 640px;
}
@media (max-width: 480px) {
.lh-british-council-statement {
padding: var(--lh-space-xl) 0;
}
.lh-british-council-statement__badge {
font-size: 1rem;
letter-spacing: 0.05em;
}
.lh-british-council-statement__icon {
width: 48px;
height: 48px;
}
.lh-british-council-statement__icon i {
font-size: 1.25rem;
}
}
/* Resource Group Intro Text (batch 2) */
.lh-resource-group__intro {
color: var(--lh-body-text);
font-size: 0.9375rem;
margin-bottom: var(--lh-space-md);
opacity: 0.85;
}
/* Related Links — pill-style (batch 2) */
/* Extra specificity to override .lh-prose ul defaults */
.lh-prose ul.lh-related-links,
.lh-internal-page__prose ul.lh-related-links,
ul.lh-related-links {
list-style: none;
padding: 0;
margin: var(--lh-space-lg) 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lh-prose ul.lh-related-links li,
.lh-internal-page__prose ul.lh-related-links li,
ul.lh-related-links li {
padding: 0;
margin: 0;
}
ul.lh-related-links a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--lh-off-white);
border: 1px solid var(--lh-border);
border-radius: 100px;
color: var(--lh-primary-dark);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all var(--lh-transition-base);
}
ul.lh-related-links a:hover,
ul.lh-related-links a:focus {
background: var(--lh-primary);
border-color: var(--lh-primary);
color: var(--lh-white);
}
/* Student Resources Hub Section */
.lh-section--resources {
background: var(--lh-off-white);
}
.lh-resource-group {
margin-top: var(--lh-space-xl);
}
.lh-resource-group:first-of-type {
margin-top: var(--lh-space-lg);
}
.lh-resource-group__heading {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--lh-grey-500);
margin: 0 0 var(--lh-space-md);
padding-bottom: var(--lh-space-sm);
border-bottom: 1px solid var(--lh-grey-300);
}
/* Resource Cards Grid */
.lh-resource-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-md);
}
@media (min-width: 576px) {
.lh-resource-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.lh-resource-cards {
grid-template-columns: repeat(3, 1fr);
}
}
/* Resource Card */
.lh-resource-card {
display: flex;
align-items: flex-start;
gap: var(--lh-space-md);
padding: var(--lh-space-md);
background: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-md);
text-decoration: none;
transition: border-color var(--lh-transition-base), box-shadow var(--lh-transition-base);
}
.lh-resource-card--link {
cursor: pointer;
}
.lh-resource-card--link:hover {
border-color: var(--lh-primary-light);
box-shadow: var(--lh-shadow-sm);
}
.lh-resource-card--link:hover .lh-resource-card__title {
color: var(--lh-primary);
}
.lh-resource-card--link:hover .lh-resource-card__arrow {
transform: translateX(2px);
}
/* Explicit no-underline enforcement for resource cards */
.lh-resource-card--link,
.lh-resource-card--link:hover,
.lh-resource-card--link:focus,
.lh-resource-card--link:active {
text-decoration: none !important;
}
.lh-resource-card__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--lh-grey-100);
border-radius: var(--lh-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--lh-primary);
font-size: 1rem;
}
.lh-resource-card__content {
flex: 1;
min-width: 0;
}
.lh-resource-card__title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-xs);
line-height: 1.3;
transition: color var(--lh-transition-base);
}
.lh-resource-card__desc {
font-size: 0.8125rem;
color: var(--lh-grey-600);
margin: 0;
line-height: 1.45;
}
.lh-resource-card__arrow {
flex-shrink: 0;
color: var(--lh-grey-400);
font-size: 0.75rem;
margin-top: 2px;
transition: transform var(--lh-transition-base), color var(--lh-transition-base);
}
.lh-resource-card--link:hover .lh-resource-card__arrow {
color: var(--lh-primary);
}
/* Responsive adjustments for resource cards */
@media (max-width: 575px) {
.lh-resource-card {
padding: var(--lh-space-sm) var(--lh-space-md);
}
.lh-resource-card__icon {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.lh-resource-card__title {
font-size: 0.875rem;
}
.lh-resource-card__desc {
font-size: 0.75rem;
}
}
/* ==========================================================================
Resource Cards: Hosts & Partners Variants
========================================================================== */
/* Hosts resources: 3-column single row on desktop */
.lh-resource-cards--hosts {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 576px) {
.lh-resource-cards--hosts {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.lh-resource-cards--hosts {
grid-template-columns: repeat(3, 1fr);
}
}
/* Partners resources: centered 1-3 cards */
.lh-resource-cards--partners {
max-width: 600px;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
@media (min-width: 576px) {
.lh-resource-cards--partners {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
/* ==========================================================================
Students Hub: Card Grid (3x2)
Standard card styling for /students/ hub page top resources.
@since 2.61.0
========================================================================== */
/* Hub cards: 3x2 grid on desktop */
.lh-resource-cards--hub {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 576px) {
.lh-resource-cards--hub {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.lh-resource-cards--hub {
grid-template-columns: repeat(3, 1fr);
}
}
/* Hub CTA button */
.lh-journey__cta-wrap--resources {
margin-top: var(--lh-space-xl);
text-align: center;
}
.lh-journey__cta-wrap--resources .lh-btn {
display: inline-flex;
align-items: center;
gap: var(--lh-space-sm);
}
/* ==========================================================================
Students Resources Directory: Card Grid
Full directory of resources displayed as link cards.
@since 2.61.0
========================================================================== */
/* Directory card grid: responsive 2-4 columns */
.lh-resource-cards--directory {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-md);
}
@media (min-width: 576px) {
.lh-resource-cards--directory {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.lh-resource-cards--directory {
grid-template-columns: repeat(3, 1fr);
}
}
/* Directory cards: same style as hub/hosts with fixed height */
.lh-resource-cards--directory .lh-resource-card {
min-height: 90px;
}
/* Directory group spacing */
.lh-resource-group--directory {
margin-bottom: var(--lh-space-xxl);
}
.lh-resource-group--directory:last-child {
margin-bottom: 0;
}
/* Section heading within directory group */
.lh-resource-group--directory .lh-section-heading {
margin-bottom: var(--lh-space-lg);
}
/* White frame wrapper (matches internal_v2 prose card) */
.lh-internal-page__frame {
background: var(--lh-white);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
.lh-internal-page__frame {
padding: var(--lh-space-2xl);
}
}
/* ==========================================================================
Students Resources Directory Page
Full directory with breadcrumb, page header, grouped resources.
@since 2.61.0
========================================================================== */
/* Page header section */
.lh-section--page-header {
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-lg);
background: var(--lh-off-white);
border-bottom: 1px solid var(--lh-grey-200);
}
/* Breadcrumb navigation */
.lh-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--lh-space-xs);
font-size: 0.875rem;
margin-bottom: var(--lh-space-md);
justify-content: center;
}
.lh-breadcrumb a {
color: var(--lh-primary);
text-decoration: none;
}
.lh-breadcrumb a:hover {
text-decoration: underline;
}
.lh-breadcrumb__sep {
color: var(--lh-grey-400);
margin: 0 var(--lh-space-xs);
}
.lh-breadcrumb span[aria-current="page"] {
color: var(--lh-grey-600);
}
/* Breadcrumbs in hero (dark background) */
.lh-page-hero .lh-breadcrumb a {
color: var(--lh-primary-light);
}
.lh-page-hero .lh-breadcrumb a:hover {
color: var(--lh-primary-light);
text-decoration: underline;
}
.lh-page-hero .lh-breadcrumb__sep {
color: rgba(255, 255, 255, 0.5);
}
.lh-page-hero .lh-breadcrumb span[aria-current="page"] {
color: rgba(255, 255, 255, 0.7);
}
/* Back CTA section */
.lh-section--back-cta {
padding-top: var(--lh-space-lg);
padding-bottom: var(--lh-space-xl);
background: var(--lh-off-white);
border-top: 1px solid var(--lh-grey-200);
}
.lh-section--back-cta .lh-journey__cta-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--lh-space-md);
}
/* Resources directory uses same compact styling via .lh-journey--students */
/* ==========================================================================
Journey Landing Pages: Full-Width Section Enhancements
Makes sections feel expansive with alternating backgrounds and visual
separation. Content remains contained within .lh-container.
@since 2.58.3
========================================================================== */
/* -----------------------------------------------------------------------------
Full-width backgrounds for journey sections
The section spans full viewport; container constrains content.
----------------------------------------------------------------------------- */
/* How It Works section: distinct background */
.lh-journey .lh-section--how-it-works {
background: var(--lh-white);
border-top: 1px solid var(--lh-grey-200);
border-bottom: 1px solid var(--lh-grey-200);
}
/* Trust & Safety section: subtle navy-tinted background */
.lh-journey .lh-section--trust {
background: #f8fafc; /* very light blue-grey */
}
/* Pricing section: white with subtle top border */
.lh-journey .lh-section--pricing {
background: var(--lh-white);
border-top: 1px solid var(--lh-grey-200);
}
/* Support section: light background */
.lh-journey .lh-section--support {
background: var(--lh-off-white);
}
/* Benefits section (hosts page) */
.lh-journey .lh-section--benefits {
background: var(--lh-white);
}
/* Why Partner section (partners page) */
.lh-journey .lh-section--why-partner {
background: var(--lh-white);
border-top: 1px solid var(--lh-grey-200);
}
/* Partner Types section: already has alt-bg, reinforce it */
.lh-journey .lh-section--partner-types {
background: var(--lh-off-white);
}
/* -----------------------------------------------------------------------------
Centered CTA wrapper for journey sections
----------------------------------------------------------------------------- */
.lh-journey__cta-wrap {
display: flex;
justify-content: center;
margin-top: var(--lh-space-xl);
}
/* Narrow the How It Works stepper on journey hub pages (Phase 2A-3) */
.lh-section--how-it-works > .lh-container {
max-width: 900px;
}
/* ==========================================================================
Groups Location Template (.lh-groups-location)
Slim, compliant landing page for group homestay locations.
@since 2.28.0
========================================================================== */
.lh-groups-location {
--lh-groups-accent: var(--lh-primary);
}
/* Hero Section */
.lh-groups-location__hero {
background: linear-gradient(135deg, var(--lh-off-white) 0%, var(--lh-grey-100) 100%);
padding: var(--lh-space-2xl) 0;
}
.lh-groups-location__hero-inner {
display: grid;
gap: var(--lh-space-xl);
align-items: center;
}
@media (min-width: 768px) {
.lh-groups-location__hero-inner {
grid-template-columns: 1fr 1fr;
}
}
.lh-groups-location__hero-content {
max-width: 540px;
}
.lh-groups-location__eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lh-groups-accent);
margin-bottom: var(--lh-space-sm);
}
.lh-groups-location__heading {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
line-height: 1.2;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-md);
}
.lh-groups-location__intro {
font-size: 1.125rem;
line-height: 1.6;
color: var(--lh-grey-700);
margin: 0 0 var(--lh-space-lg);
}
.lh-groups-location__hero-media img {
width: 100%;
height: auto;
border-radius: var(--lh-radius-lg);
box-shadow: var(--lh-shadow-lg);
}
/* Hero: No image variant — centre content */
.lh-groups-location__hero--no-image .lh-groups-location__hero-inner {
grid-template-columns: 1fr;
justify-items: center;
}
.lh-groups-location__hero--no-image .lh-groups-location__hero-content {
text-align: center;
max-width: 720px;
}
/* City Introduction */
.lh-groups-location__city-intro {
background: var(--lh-white);
}
.lh-groups-location__city-content {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--lh-grey-700);
}
.lh-groups-location__city-content p {
margin: 0 0 var(--lh-space-md);
}
.lh-groups-location__city-content p:last-child {
margin-bottom: 0;
}
/* Attractions */
.lh-groups-location__attractions {
background: var(--lh-off-white);
}
.lh-groups-location__attractions-list {
list-style: none;
padding: 0;
margin: var(--lh-space-xl) auto 0;
max-width: 700px;
display: flex;
flex-direction: column;
gap: var(--lh-space-md);
}
.lh-groups-location__attraction {
display: flex;
gap: var(--lh-space-md);
align-items: flex-start;
padding: var(--lh-space-md);
background: var(--lh-white);
border-radius: var(--lh-radius-md);
box-shadow: var(--lh-shadow-sm);
}
.lh-groups-location__attraction i {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--lh-groups-accent);
color: var(--lh-white);
border-radius: 50%;
font-size: 0.875rem;
}
.lh-groups-location__attraction strong {
display: block;
font-weight: 600;
color: var(--lh-primary-dark);
margin-bottom: 2px;
}
.lh-groups-location__attraction span {
font-size: 0.9375rem;
color: var(--lh-grey-600);
}
/* Transport */
.lh-groups-location__transport {
background: var(--lh-white);
}
/* Steps (reuses .lh-stepper) */
.lh-groups-location__steps {
background: var(--lh-off-white);
}
/* Trust Note */
.lh-groups-location__trust {
background: var(--lh-white);
}
.lh-groups-location__trust-content {
text-align: center;
}
.lh-groups-location__trust-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--lh-groups-accent) 0%, var(--lh-primary-dark) 100%);
color: var(--lh-white);
border-radius: 50%;
font-size: 1.5rem;
line-height: 1;
margin-bottom: var(--lh-space-lg);
}
.lh-groups-location__trust-icon::before {
line-height: 1;
}
/* Final CTA (reuses .lh-strip--cta) */
.lh-groups-location__final-cta {
background: linear-gradient(135deg, var(--lh-primary-dark) 0%, #001428 100%);
}
/* Responsive adjustments */
@media (max-width: 767px) {
.lh-groups-location__hero {
padding: var(--lh-space-xl) 0;
}
.lh-groups-location__hero-content {
text-align: center;
max-width: 100%;
}
.lh-groups-location__hero-media {
order: -1;
}
}
/* ==========================================================================
Groups Hub Template Styles
========================================================================== */
.lh-groups-hub {
--lh-hub-accent: var(--lh-primary);
}
/* Header */
.lh-groups-hub__header {
text-align: center;
padding: var(--lh-space-2xl) var(--lh-space-lg);
background: var(--lh-off-white);
border-bottom: 1px solid var(--lh-grey-200);
}
.lh-groups-hub__title {
font-family: var(--lh-font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-md) 0;
}
.lh-groups-hub__intro {
max-width: 800px;
margin: 0 auto;
font-size: 1.0625rem;
color: var(--lh-grey-700);
line-height: var(--lh-line-height-base);
}
.lh-groups-hub__intro p {
margin: 0 0 var(--lh-space-md) 0;
}
.lh-groups-hub__intro p:last-child {
margin-bottom: 0;
}
/* Content Grid */
.lh-groups-hub__content {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-xl);
padding: var(--lh-space-xl) var(--lh-space-lg);
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 992px) {
.lh-groups-hub__content {
grid-template-columns: 1fr 1fr;
}
}
/* Directory Section */
.lh-groups-hub__directory {
display: flex;
flex-direction: column;
gap: var(--lh-space-lg);
}
/* Region Blocks */
.lh-groups-hub__region {
background: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-md);
padding: var(--lh-space-lg);
}
.lh-groups-hub__region-title {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-md) 0;
padding-bottom: var(--lh-space-sm);
border-bottom: 2px solid var(--lh-hub-accent);
}
/* Location List - 3-column grid for consistent alignment */
.lh-groups-hub__location-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--lh-space-xs) var(--lh-space-md);
}
@media (max-width: 600px) {
.lh-groups-hub__location-list {
grid-template-columns: repeat(2, 1fr);
}
}
.lh-groups-hub__location-item {
min-width: 0; /* Allow text truncation in grid */
}
.lh-groups-hub__location-link {
display: block;
padding: var(--lh-space-xs) 0;
color: var(--lh-primary);
text-decoration: none;
font-size: 0.9375rem;
transition: color 0.2s ease;
/* Truncate long names with ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.lh-groups-hub__location-link:hover,
.lh-groups-hub__location-link:focus {
color: var(--lh-primary-dark);
text-decoration: underline;
}
/* CTA Links */
.lh-groups-hub__cta-links {
padding: var(--lh-space-lg);
background: var(--lh-off-white);
border-radius: var(--lh-radius-md);
margin-top: var(--lh-space-md);
}
.lh-groups-hub__cta-links p {
margin: 0;
font-size: 0.9375rem;
color: var(--lh-grey-700);
}
.lh-groups-hub__cta-links a {
color: var(--lh-primary);
text-decoration: none;
font-weight: 500;
}
.lh-groups-hub__cta-links a:hover {
text-decoration: underline;
}
/* Map Container */
.lh-groups-hub__map-container {
position: sticky;
top: 100px;
height: fit-content;
}
.lh-groups-hub__map {
width: 100%;
height: 500px;
min-height: 400px;
background: var(--lh-grey-100);
border-radius: var(--lh-radius-md);
overflow: hidden;
border: 1px solid var(--lh-grey-200);
}
@media (max-width: 991px) {
.lh-groups-hub__map-container {
position: relative;
top: 0;
order: -1;
}
.lh-groups-hub__map {
height: 350px;
}
}
/* Info Window Styling (Google Maps) */
.lh-groups-hub__info-window {
padding: var(--lh-space-sm);
font-family: var(--lh-font-sans);
font-size: 0.875rem;
}
.lh-groups-hub__info-window strong {
display: block;
margin-bottom: var(--lh-space-xs);
color: var(--lh-primary-dark);
}
.lh-groups-hub__info-window a {
color: var(--lh-primary);
text-decoration: none;
}
.lh-groups-hub__info-window a:hover {
text-decoration: underline;
}
/* No Locations State */
.lh-groups-hub__no-locations {
padding: var(--lh-space-xl);
text-align: center;
color: var(--lh-grey-600);
background: var(--lh-grey-100);
border-radius: var(--lh-radius-md);
}
/* --------------------------------------------------------------------------
Groups Hub v2 Adjustments (using LH v2 hero)
Added 2.56.0 - Adjustments for new section/container structure
Updated 2.56.1 - Full-width map at top, directory grid below
-------------------------------------------------------------------------- */
/* Full-width map section (overrides sticky positioning from original) */
.lh-groups-hub__map-section {
background: var(--lh-grey-100);
}
.lh-groups-hub__map-section .lh-groups-hub__map-container {
position: relative;
top: 0;
}
/* Full-width directory layout (2-column max) */
.lh-groups-hub__directory--full {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-lg);
}
@media (min-width: 768px) {
.lh-groups-hub__directory--full {
grid-template-columns: repeat(2, 1fr);
}
}
/* CTA links span full width */
.lh-groups-hub__directory--full .lh-groups-hub__cta-links {
grid-column: 1 / -1;
}
/* Cross-links section */
.lh-groups-hub__crosslinks {
background: var(--lh-grey-100);
text-align: center;
}
.lh-groups-hub__crosslinks-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--lh-space-md);
}
.lh-groups-hub__crosslinks-label {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--lh-primary-dark);
}
.lh-groups-hub__crosslinks-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--lh-space-sm);
}
/* ==========================================================================
Groups Landing Page (template-groups-landing.php)
========================================================================== */
.lh-groups-landing {
background: var(--lh-white);
}
/* Hero */
.lh-groups-landing__hero {
padding: var(--lh-space-2xl) 0;
background: var(--lh-primary-dark);
color: var(--lh-white);
}
.lh-groups-landing__hero-inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-xl);
align-items: center;
}
@media (min-width: 768px) {
.lh-groups-landing__hero--has-image .lh-groups-landing__hero-inner {
grid-template-columns: 1fr 1fr;
}
}
.lh-groups-landing__hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--lh-space-sm);
}
.lh-groups-landing__hero-media {
display: flex;
justify-content: center;
}
.lh-groups-landing__hero-media img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: var(--lh-radius-lg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
.lh-groups-landing__hero-media {
order: -1;
}
.lh-groups-landing__hero-media img {
max-width: 320px;
}
}
.lh-groups-landing__eyebrow {
display: inline-block;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--lh-white);
background: rgba(255, 255, 255, 0.15);
border-radius: var(--lh-radius-full);
}
.lh-groups-landing__heading {
margin: 0;
font-family: var(--lh-font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: var(--lh-line-height-heading);
color: var(--lh-white);
}
.lh-groups-landing__subheading {
margin: 0;
font-size: clamp(1rem, 2vw, 1.125rem);
font-weight: 400;
line-height: 1.6;
color: var(--lh-primary);
max-width: 480px;
}
/* Content Section */
.lh-groups-landing__content {
padding: var(--lh-space-2xl) 0;
}
/* ==========================================================================
Prose Component (Content Typography)
Use .lh-prose to wrap the_content() for consistent typography.
========================================================================== */
.lh-prose {
font-family: var(--lh-font-primary);
font-size: var(--lh-font-size-base);
line-height: var(--lh-line-height-base);
color: var(--lh-grey-800);
}
/* Headings */
.lh-prose h2 {
margin: var(--lh-space-xl) 0 var(--lh-space-md) 0;
font-family: var(--lh-font-heading);
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 700;
line-height: var(--lh-line-height-heading);
color: var(--lh-primary-dark);
}
.lh-prose h2:first-child {
margin-top: 0;
}
.lh-prose h3 {
margin: var(--lh-space-lg) 0 var(--lh-space-sm) 0;
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 600;
line-height: var(--lh-line-height-heading);
color: var(--lh-primary-dark);
}
/* Paragraphs */
.lh-prose p {
margin: 0 0 var(--lh-space-md) 0;
}
.lh-prose p:last-child {
margin-bottom: 0;
}
/* Lists */
.lh-prose ul,
.lh-prose ol {
margin: 0 0 var(--lh-space-lg) 0;
padding-left: var(--lh-space-lg);
}
.lh-prose li {
margin-bottom: var(--lh-space-sm);
line-height: 1.5;
}
.lh-prose li:last-child {
margin-bottom: 0;
}
/* Checklist — suppress bullet when items carry their own marker (☐) */
.lh-checklist {
list-style: none;
padding-left: 0;
}
/* Links - bold for scannability (QA feedback 2026-01-13) */
.lh-prose a {
color: var(--lh-primary);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
/* Reset font-weight for button-styled links (avoid double-bold) */
.lh-prose a.lh-btn,
.lh-prose a.lh-btn-primary,
.lh-prose a.lh-btn-secondary,
.lh-prose a.lh-btn-magenta,
.lh-prose a.icon_btn {
font-weight: 500;
}
.lh-prose a:hover,
.lh-prose a:focus {
color: var(--lh-primary-dark);
}
/* Button Links (CTA style in content) - Primary only */
.lh-prose a.lh-btn:not(.lh-btn--secondary),
.lh-prose a.lh-btn-primary,
.lh-prose a.lh-btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
margin: var(--lh-space-md) 0;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
color: var(--lh-white);
background-color: var(--lh-primary);
border-radius: var(--lh-radius-md);
transition: background-color var(--lh-transition-base);
}
.lh-prose a.lh-btn:not(.lh-btn--secondary):hover,
.lh-prose a.lh-btn-primary:hover,
.lh-prose a.lh-btn--primary:hover {
color: var(--lh-white);
background-color: var(--lh-primary-dark);
text-decoration: none;
}
/* Secondary button in prose - preserve outline style */
.lh-prose a.lh-btn.lh-btn--secondary {
display: inline-flex;
align-items: center;
justify-content: center;
margin: var(--lh-space-md) 0;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none !important;
background: transparent;
color: var(--lh-primary-dark) !important;
border: 2px solid var(--lh-primary);
border-radius: 999px;
transition: color var(--lh-transition-base), background var(--lh-transition-base);
}
.lh-prose a.lh-btn.lh-btn--secondary:hover,
.lh-prose a.lh-btn.lh-btn--secondary:focus {
background: var(--lh-primary);
color: var(--lh-white) !important;
text-decoration: none !important;
}
/* Adjacent buttons in content - gap spacing */
.lh-prose a.lh-btn + a.lh-btn {
margin-left: 12px;
}
/* Mobile: stack adjacent buttons vertically */
@media (max-width: 520px) {
.lh-prose a.lh-btn {
display: flex;
width: 100%;
max-width: 280px;
}
.lh-prose a.lh-btn + a.lh-btn {
margin-left: 0;
margin-top: 10px;
}
}
/* Strong text */
.lh-prose strong {
font-weight: 600;
color: var(--lh-grey-900);
}
/* Blockquotes */
.lh-prose blockquote {
margin: var(--lh-space-lg) 0;
padding: var(--lh-space-md) var(--lh-space-lg);
border-left: 4px solid var(--lh-primary);
background: var(--lh-grey-100);
font-style: italic;
}
.lh-prose blockquote cite {
display: block;
margin-top: var(--lh-space-sm);
font-style: normal;
font-weight: 600;
color: var(--lh-primary-dark);
}
/* Content Images - rounded corners matching hero style (QA feedback 2026-01-13) */
.lh-prose img,
.lh-internal-page__prose img {
border-radius: var(--lh-radius-lg);
}
/* Horizontal Rule */
.lh-prose hr {
margin: var(--lh-space-xl) 0;
border: none;
border-top: 1px solid var(--lh-grey-200);
}
/* ==========================================================================
LH Page Hero (Shared Hero Component)
==========================================================================
Reusable dark hero for standard pages. Supports text-only or with image.
Used by: template-standard-page.php
========================================================================== */
.lh-page-hero {
padding: var(--lh-space-2xl) 0;
background: var(--lh-primary-dark);
color: var(--lh-white);
}
.lh-page-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-xl);
align-items: center;
}
/* Text-only hero: centered */
.lh-page-hero:not(.lh-page-hero--has-image) {
text-align: center;
}
.lh-page-hero:not(.lh-page-hero--has-image) .lh-page-hero__inner {
max-width: 800px;
margin: 0 auto;
}
/* Hero with image: side-by-side on desktop */
@media (min-width: 768px) {
.lh-page-hero--has-image .lh-page-hero__inner {
grid-template-columns: 1fr 1fr;
}
}
.lh-page-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--lh-space-md);
}
.lh-page-hero:not(.lh-page-hero--has-image) .lh-page-hero__content {
align-items: center;
}
.lh-page-hero__heading {
margin: 0;
font-family: var(--lh-font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: var(--lh-line-height-heading);
}
.lh-page-hero__subheading {
margin: 0;
font-size: clamp(1rem, 2vw, 1.125rem);
font-weight: 400;
line-height: 1.6;
color: var(--lh-primary);
opacity: 0.95;
}
.lh-page-hero__cta {
margin-top: var(--lh-space-md);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--lh-space-sm) var(--lh-space-md);
}
.lh-page-hero__secondary-cta {
color: var(--lh-white, #fff);
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.lh-page-hero__secondary-cta:hover {
opacity: 1;
text-decoration: underline;
}
.lh-page-hero__secondary-cta i {
margin-left: 0.25em;
font-size: 0.85em;
}
.lh-page-hero__ctas {
margin-top: var(--lh-space-md);
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-sm);
}
.lh-page-hero__microcopy {
margin-top: var(--lh-space-xs);
font-size: 0.8125rem;
color: var(--lh-text-muted, #6b7280);
line-height: 1.5;
}
.lh-page-hero__media {
display: flex;
justify-content: center;
}
.lh-page-hero__media img {
width: 100%;
max-width: 500px;
max-height: 200px;
height: auto;
border-radius: var(--lh-radius-lg);
object-fit: cover;
}
/* Mobile: image above text */
@media (max-width: 767px) {
.lh-page-hero {
padding: var(--lh-space-xl) 0;
}
.lh-page-hero__media {
order: -1;
}
.lh-page-hero__media img {
max-width: 320px;
max-height: 150px;
}
.lh-page-hero--has-image .lh-page-hero__content {
align-items: center;
text-align: center;
}
}
/* ==========================================================================
Standard Page Template
==========================================================================
Template-specific styles for template-standard-page.php
========================================================================== */
/* Main container - light blue background for content framing (matches blog/internal pages) */
.lh-standard-page {
background-color: var(--lh-blue-50);
}
.lh-standard-page__content {
padding: var(--lh-space-2xl) 0;
}
/* Prose content - white card against light blue background */
.lh-standard-page__prose {
background: var(--lh-white);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
.lh-standard-page__prose {
padding: var(--lh-space-2xl);
}
}
.lh-standard-page__modules {
padding: var(--lh-space-xl) 0 var(--lh-space-2xl);
background: var(--lh-grey-100);
}
/* Responsive adjustments */
@media (max-width: 767px) {
.lh-standard-page__content {
padding: var(--lh-space-xl) 0;
}
.lh-standard-page__modules {
padding: var(--lh-space-lg) 0 var(--lh-space-xl);
}
}
/* ==========================================================================
Brand Modules Grid (LH-styled)
==========================================================================
Restyled version of the legacy brand_feature grid from parent theme.
Renders ACF _brand_module repeater with modern LH styling.
========================================================================== */
.lh-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--lh-space-lg);
}
/* Base card styles */
.lh-brand-card {
position: relative;
background: var(--lh-white);
border-radius: var(--lh-radius-lg);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform var(--lh-transition-base), box-shadow var(--lh-transition-base);
}
.lh-brand-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.lh-brand-card__link {
display: block;
color: inherit;
text-decoration: none;
}
.lh-brand-card__title {
margin: 0;
padding: var(--lh-space-md) var(--lh-space-lg);
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-white);
background: var(--lh-primary);
}
.lh-brand-card__body {
padding: var(--lh-space-lg);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--lh-grey-700);
}
/* Content card variant */
.lh-brand-card--content {
display: flex;
flex-direction: column;
}
.lh-brand-card--content .lh-brand-card__body {
flex: 1;
}
/* Image card variant */
.lh-brand-card--image {
min-height: 280px;
}
.lh-brand-card__image {
position: relative;
overflow: hidden;
}
.lh-brand-card__image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform var(--lh-transition-base);
}
.lh-brand-card--image:hover .lh-brand-card__image img {
transform: scale(1.05);
}
.lh-brand-card__title--top {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
.lh-brand-card__title--bottom {
/* Default position, no special styling needed */
}
/* Overlay for image cards */
.lh-brand-card__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 51, 0.9);
color: var(--lh-white);
opacity: 0;
transition: opacity var(--lh-transition-base);
display: flex;
align-items: center;
justify-content: center;
}
.lh-brand-card--image:hover .lh-brand-card__overlay {
opacity: 1;
}
.lh-brand-card__overlay-content {
padding: var(--lh-space-lg);
font-size: 0.9375rem;
line-height: 1.6;
text-align: center;
}
/* Menu card variant */
.lh-brand-card--menu {
padding: var(--lh-space-lg);
}
.lh-brand-card__menu {
list-style: none;
margin: 0;
padding: 0;
}
.lh-brand-card__menu li {
margin-bottom: var(--lh-space-sm);
}
.lh-brand-card__menu li:last-child {
margin-bottom: 0;
}
.lh-brand-card__menu a {
display: flex;
align-items: center;
gap: var(--lh-space-sm);
padding: var(--lh-space-sm) var(--lh-space-md);
color: var(--lh-primary-dark);
text-decoration: none;
border-radius: var(--lh-radius-sm);
transition: background-color var(--lh-transition-base), color var(--lh-transition-base);
}
.lh-brand-card__menu a:hover {
background: var(--lh-primary);
color: var(--lh-white);
}
.lh-brand-card__menu-icon {
flex-shrink: 0;
width: 24px;
text-align: center;
}
/* Video card variant */
.lh-brand-card--video {
aspect-ratio: 16 / 9;
}
.lh-brand-card__video-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.lh-brand-card__video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Form card variant */
.lh-brand-card--form {
padding: var(--lh-space-lg);
}
.lh-brand-card--form .lh-brand-card__title {
margin: calc(-1 * var(--lh-space-lg));
margin-bottom: var(--lh-space-lg);
}
.lh-brand-card__form {
/* Form styling handled by form plugin */
}
/* Responsive adjustments */
@media (max-width: 767px) {
.lh-brand-grid {
grid-template-columns: 1fr;
}
.lh-brand-card--image {
min-height: 240px;
}
}
/* ==========================================================================
Internal Page (LH v2) - template-internal-v2.php
==========================================================================
Modernised internal page template with LH hero and prose styling.
Includes legacy sidebar support for backwards compatibility.
========================================================================== */
/* Light background on all internal-v2 pages for content framing */
.lh-internal-page {
background-color: var(--lh-blue-50); /* Subtle blue-tinted background */
}
.lh-internal-page__content {
padding: var(--lh-space-2xl) 0;
}
/* White card wrapper for prose content (framed by light blue page background) */
.lh-internal-page__prose.lh-prose {
background: var(--lh-white);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
.lh-internal-page__prose.lh-prose {
padding: var(--lh-space-2xl);
}
}
/* Prose hero image — bleeds edge-to-edge at top of white paper frame */
.lh-internal-page__prose img.lh-prose-hero-img,
.lh-prose img.lh-prose-hero-img {
margin: calc(-1 * var(--lh-space-xl)) calc(-1 * var(--lh-space-xl)) var(--lh-space-lg);
width: calc(100% + 2 * var(--lh-space-xl));
max-width: none;
height: auto;
max-height: 320px;
object-fit: cover;
border-radius: var(--lh-radius-lg) var(--lh-radius-lg) 0 0;
display: block;
}
@media (min-width: 768px) {
.lh-internal-page__prose img.lh-prose-hero-img,
.lh-prose img.lh-prose-hero-img {
margin: calc(-1 * var(--lh-space-2xl)) calc(-1 * var(--lh-space-2xl)) var(--lh-space-xl);
width: calc(100% + 2 * var(--lh-space-2xl));
}
}
/* Prose inline image — full-width with rounded corners, used as section divider */
.lh-internal-page__prose img.lh-prose-inline-img,
.lh-prose img.lh-prose-inline-img {
width: 100%;
height: auto;
max-height: 280px;
object-fit: cover;
border-radius: var(--lh-radius-md);
margin: var(--lh-space-lg) 0;
display: block;
}
/* Two-column grid for pages with sidebar content */
.lh-internal-page__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-xl);
background: var(--lh-white);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
.lh-internal-page__grid {
padding: var(--lh-space-2xl);
}
}
/* Remove card styling from prose when inside grid (grid is the card) */
.lh-internal-page__grid .lh-internal-page__prose.lh-prose {
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
}
/* Form pages: collapse empty prose wrapper to remove white block at top.
Uses :has() to detect when prose has no substantial content before form. */
.lh-internal-page__prose.lh-prose:has(+ .lh-internal-page__form):not(:has(img, a, ul, ol, table, iframe, h2, h3, h4, h5, h6, blockquote, figure)) {
display: none;
}
/* Fallback for browsers without :has() support - target known form pages by ID.
Page IDs: 12313 (School), 12300 (Agent), 12273 (Homestay Host) */
body.page-id-12313 .lh-internal-page__prose.lh-prose,
body.page-id-12300 .lh-internal-page__prose.lh-prose,
body.page-id-12273 .lh-internal-page__prose.lh-prose {
display: none;
}
@media (min-width: 992px) {
.lh-internal-page__grid {
grid-template-columns: 2fr 1fr;
gap: var(--lh-space-2xl);
}
}
.lh-internal-page__main {
/* Main content column */
}
/* Sidebar styles */
.lh-internal-page__sidebar {
display: flex;
flex-direction: column;
gap: var(--lh-space-lg);
}
.lh-internal-page__rates {
background: var(--lh-grey-100);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-lg);
}
.lh-internal-page__rates-title {
margin: 0 0 var(--lh-space-md);
font-family: var(--lh-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-primary-dark);
}
.lh-internal-page__rates-content {
font-size: 0.9375rem;
}
/* Button stack */
.lh-internal-page__buttons {
display: flex;
flex-direction: column;
gap: var(--lh-space-sm);
}
.lh-internal-page__btn {
display: flex;
align-items: center;
gap: var(--lh-space-sm);
justify-content: flex-start;
text-align: left;
}
.lh-internal-page__btn-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1rem;
}
.lh-internal-page__btn-icon i,
.lh-internal-page__btn-icon .fa,
.lh-internal-page__btn-icon [class^="fa-"],
.lh-internal-page__btn-icon [class*=" fa-"] {
line-height: 1;
}
/* Sidebar menu */
.lh-internal-page__menu {
background: var(--lh-grey-100);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-lg);
}
.lh-internal-page__menu-label {
margin: 0 0 var(--lh-space-sm);
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-grey-600);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.lh-internal-page__menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.lh-internal-page__menu-list li {
padding: var(--lh-space-xs) 0;
font-size: 0.9375rem;
color: var(--lh-grey-700);
}
.lh-internal-page__menu-list a {
color: var(--lh-primary);
text-decoration: none;
transition: color var(--lh-transition-fast);
}
.lh-internal-page__menu-list a:hover {
color: var(--lh-primary-dark);
text-decoration: underline;
}
/* Responsive adjustments */
@media (max-width: 767px) {
.lh-internal-page__content {
padding: var(--lh-space-xl) 0;
}
.lh-internal-page__rates,
.lh-internal-page__menu {
padding: var(--lh-space-md);
}
}
/* ==========================================================================
Coverage Section (full-width station list for long menus)
========================================================================== */
.lh-internal-coverage {
background: var(--lh-grey-100);
}
.lh-internal-coverage__title {
margin: 0 0 var(--lh-space-lg);
font-family: var(--lh-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--lh-grey-900);
}
.lh-internal-coverage__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--lh-space-xs) var(--lh-space-lg);
}
.lh-internal-coverage__list li {
padding: var(--lh-space-xs) 0;
font-size: 0.9375rem;
color: var(--lh-grey-700);
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.lh-internal-coverage__list a {
color: var(--lh-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.lh-internal-coverage__list a:hover {
color: var(--lh-primary-dark);
text-decoration: underline;
}
@media (min-width: 576px) {
.lh-internal-coverage__list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.lh-internal-coverage__list {
grid-template-columns: repeat(4, 1fr);
}
}
/* ==========================================================================
Button Normalisation (legacy inline styles override)
========================================================================== */
.lh-internal-page__buttons a,
.lh-internal-page__buttons .lh-internal-page__btn {
display: flex;
align-items: center;
gap: var(--lh-space-sm);
padding: var(--lh-space-sm) var(--lh-space-md);
background: var(--lh-white);
border: 2px solid var(--lh-primary);
border-radius: var(--lh-radius-md);
color: var(--lh-primary);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.lh-internal-page__buttons a:hover,
.lh-internal-page__buttons a:focus-visible,
.lh-internal-page__buttons .lh-internal-page__btn:hover,
.lh-internal-page__buttons .lh-internal-page__btn:focus-visible {
background: var(--lh-primary);
color: var(--lh-white);
border-color: var(--lh-primary);
text-decoration: none;
outline: none;
}
.lh-internal-page__buttons a:focus-visible,
.lh-internal-page__buttons .lh-internal-page__btn:focus-visible {
box-shadow: 0 0 0 3px rgba(34, 148, 210, 0.3);
}
/* Override any legacy inline styles */
.lh-internal-page__buttons a[style],
.lh-internal-page__buttons .lh-internal-page__btn[style] {
background: var(--lh-white) !important;
border: 2px solid var(--lh-primary) !important;
color: var(--lh-primary) !important;
}
.lh-internal-page__buttons a[style]:hover,
.lh-internal-page__buttons .lh-internal-page__btn[style]:hover {
background: var(--lh-primary) !important;
color: var(--lh-white) !important;
}
/* ==========================================================================
CTA Section (full-width for pages without sidebar)
========================================================================== */
.lh-internal-ctas {
background: var(--lh-off-white);
}
.lh-internal-ctas__buttons {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-md);
max-width: 600px;
margin: 0 auto;
}
.lh-internal-ctas__btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--lh-space-sm);
padding: var(--lh-space-md) var(--lh-space-lg);
background: var(--lh-white);
border: 2px solid var(--lh-primary);
border-radius: var(--lh-radius-md);
color: var(--lh-primary);
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
text-align: center;
min-height: 56px;
}
.lh-internal-ctas__btn:hover,
.lh-internal-ctas__btn:focus-visible {
background: var(--lh-primary);
color: var(--lh-white);
border-color: var(--lh-primary);
text-decoration: none;
outline: none;
}
.lh-internal-ctas__btn:focus-visible {
box-shadow: 0 0 0 3px rgba(34, 148, 210, 0.3);
}
.lh-internal-ctas__btn-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 1rem;
}
.lh-internal-ctas__btn-icon img,
.lh-internal-ctas__btn-icon svg {
width: 100%;
height: 100%;
object-fit: contain;
}
.lh-internal-ctas__btn-icon i,
.lh-internal-ctas__btn-icon .fa,
.lh-internal-ctas__btn-icon [class^="fa-"],
.lh-internal-ctas__btn-icon [class*=" fa-"] {
line-height: 1;
}
/* 2x2 grid at 560px and above */
@media (min-width: 560px) {
.lh-internal-ctas__buttons {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
Comparison Panels Component (.lh-compare)
Used for "What to expect" / "What NOT to expect" and similar content.
Requires manual wrapper markup in page content.
========================================================================== */
/*
* Expected markup structure:
*
*
*
*
What to expect
*
✓ Item text here
*
✓ Another item
*
*
*
What NOT to expect
*
✗ Item text here
*
*
/ accordion support */
.lh-faq-accordion details.lh-faq-accordion__item {
/* Remove default marker */
list-style: none;
}
.lh-faq-accordion details.lh-faq-accordion__item > summary {
cursor: pointer;
list-style: none; /* Safari */
}
.lh-faq-accordion details.lh-faq-accordion__item > summary::-webkit-details-marker {
display: none;
}
.lh-faq-accordion details.lh-faq-accordion__item > summary::marker {
display: none;
content: '';
}
/* Open state styling */
.lh-faq-accordion details[open].lh-faq-accordion__item {
border-color: var(--lh-primary);
box-shadow: 0 2px 12px rgba(34, 148, 210, 0.1);
}
.lh-faq-accordion details[open] .lh-faq-accordion__question::after {
content: '−';
background: var(--lh-primary);
color: var(--lh-white);
}
/* Answer is visible when details is open (native behaviour) */
.lh-faq-accordion details.lh-faq-accordion__item .lh-faq-accordion__answer {
display: block;
}
/* ==========================================================================
Quick Links Navigation (in-page anchor nav)
========================================================================== */
.lh-quick-links {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-sm) var(--lh-space-md);
font-size: 0.9rem;
margin-top: var(--lh-space-md);
padding: var(--lh-space-sm) 0;
}
.lh-quick-links a {
color: var(--lh-primary);
text-decoration: none;
white-space: nowrap;
}
.lh-quick-links a:hover,
.lh-quick-links a:focus {
text-decoration: underline;
color: var(--lh-primary-dark);
}
/* Separator between links (optional: add via content) */
.lh-quick-links--separated a:not(:last-child)::after {
content: '|';
margin-left: var(--lh-space-md);
color: var(--lh-grey-400);
}
/* Pill-style quick links (horizontal button navigation) */
.lh-quick-links--pills {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-sm);
margin: var(--lh-space-lg) 0;
padding: 0;
list-style: none;
}
.lh-quick-links--pills a {
display: inline-block;
padding: var(--lh-space-sm) var(--lh-space-md);
background: var(--lh-grey-100);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-full);
color: var(--lh-primary-dark);
font-size: 0.875rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s ease;
}
.lh-quick-links--pills a:hover,
.lh-quick-links--pills a:focus,
.lh-prose .lh-quick-links--pills a:hover,
.lh-prose .lh-quick-links--pills a:focus {
background: var(--lh-magenta);
border-color: var(--lh-magenta);
color: var(--lh-white);
text-decoration: none;
transform: translateY(-1px);
}
.lh-quick-links--pills a:active {
transform: translateY(0);
}
/* Active state for current section (add via JS or manually) */
.lh-quick-links--pills a.is-active,
.lh-quick-links--pills a[aria-current="true"],
.lh-prose .lh-quick-links--pills a.is-active,
.lh-prose .lh-quick-links--pills a[aria-current="true"] {
background: var(--lh-primary-dark);
border-color: var(--lh-primary-dark);
color: var(--lh-white);
}
/* Sticky variant - sticks below hero on scroll */
.lh-quick-links--sticky {
position: sticky;
top: 80px; /* Below sticky header */
z-index: 10;
background: var(--lh-white);
padding: var(--lh-space-md) 0;
margin: 0 calc(-1 * var(--lh-space-md));
padding-left: var(--lh-space-md);
padding-right: var(--lh-space-md);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* Mobile: slightly smaller pills */
@media (max-width: 767px) {
.lh-quick-links--pills a {
padding: var(--lh-space-xs) var(--lh-space-sm);
font-size: 0.8125rem;
}
.lh-quick-links--sticky {
top: 60px;
}
}
/* Hero tertiary link styling */
.lh-page-hero__tertiary-link {
display: inline-flex;
align-items: center;
gap: var(--lh-space-xs);
color: var(--lh-white);
text-decoration: underline;
font-size: 0.9rem;
margin-top: var(--lh-space-sm);
opacity: 0.9;
}
.lh-page-hero__tertiary-link:hover,
.lh-page-hero__tertiary-link:focus {
color: var(--lh-white);
opacity: 1;
}
.lh-page-hero__tertiary-link i {
font-size: 0.8em;
}
/* ==========================================================================
Content Section Cards (global .lh-location-section)
Cards with gradient top bar for content sections (used in meal plans, etc.)
========================================================================== */
/* Global location section cards (outside of .lh-location-guide context) */
.lh-prose .lh-location-section,
.lh-internal-page__prose .lh-location-section,
article.lh-location-section {
position: relative;
background: var(--lh-white);
border: 1px solid rgba(44, 62, 110, 0.1);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-xl);
margin: var(--lh-space-xl) 0;
box-shadow: var(--lh-shadow-sm);
transition: box-shadow 0.2s ease;
overflow: hidden;
}
/* Gradient accent rail (approved LH gradient) */
.lh-prose .lh-location-section::before,
.lh-internal-page__prose .lh-location-section::before,
article.lh-location-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #EE7218 0%, #E6007E 50%, #6ACAF3 100%);
border-radius: var(--lh-radius-lg) var(--lh-radius-lg) 0 0;
}
.lh-prose .lh-location-section:hover,
.lh-internal-page__prose .lh-location-section:hover,
article.lh-location-section:hover {
box-shadow: var(--lh-shadow-md);
}
/* Float clearing at end of card */
.lh-prose .lh-location-section::after,
.lh-internal-page__prose .lh-location-section::after,
article.lh-location-section::after {
content: "";
display: table;
clear: both;
}
/* First heading in section card - no top margin */
.lh-prose .lh-location-section > .lh-section-heading:first-child,
.lh-prose .lh-location-section > h2:first-child,
.lh-prose .lh-location-section > h3:first-child,
.lh-internal-page__prose .lh-location-section > .lh-section-heading:first-child,
article.lh-location-section > .lh-section-heading:first-child,
article.lh-location-section > h2:first-child {
margin-top: 0;
}
/* Image + text flex layout within cards */
.lh-location-section > div[style*="flex"] {
margin-bottom: var(--lh-space-lg);
}
.lh-location-section img {
border-radius: var(--lh-radius-md);
max-width: 100%;
height: auto;
}
/* Edge-to-edge hero image at top of location-section card.
Location-guide context overrides live in location-guides.css (loaded later). */
.lh-location-section img.lh-location-section__hero-img {
margin: calc(-1 * var(--lh-space-xl)) calc(-1 * var(--lh-space-xl)) var(--lh-space-lg);
width: calc(100% + 2 * var(--lh-space-xl));
max-width: none;
height: auto;
object-fit: cover;
border-radius: 0;
box-shadow: none;
display: block;
}
/* Compact location-section cards inside card grids (e.g. meal plan comparison) */
.lh-card-grid .lh-location-section .lh-location-section__title {
font-size: 1rem;
font-weight: 700;
}
.lh-card-grid .lh-location-section .lh-card__icon {
margin: 0 auto var(--lh-space-md);
text-align: center;
}
/* Gradient disc icon (white icon on LH gradient circle) */
.lh-card__icon.lh-card__icon--gradient,
.lh-location-section .lh-card__icon.lh-card__icon--gradient {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #EE7218 0%, #E6007E 50%, #6ACAF3 100%);
display: flex;
align-items: center;
justify-content: center;
}
.lh-card__icon.lh-card__icon--gradient i,
.lh-location-section .lh-card__icon.lh-card__icon--gradient i {
color: #fff;
font-size: 1.25rem;
}
/* Allergen card grid — centered icon + label */
.lh-allergen-card {
text-align: center;
padding: var(--lh-space-md) var(--lh-space-sm);
}
.lh-allergen-card .lh-card__icon {
margin: 0 auto var(--lh-space-sm);
}
.lh-allergen-card .lh-card__title {
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
}
/* White prose panel for non-card content on card-wrap pages */
.lh-prose-panel {
background: var(--lh-white);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
margin: var(--lh-space-xl) 0;
}
@media (min-width: 768px) {
.lh-prose-panel {
padding: var(--lh-space-2xl);
}
}
/* Mobile: stack image and text */
@media (max-width: 767px) {
.lh-prose .lh-location-section,
.lh-internal-page__prose .lh-location-section,
article.lh-location-section {
padding: var(--lh-space-lg);
}
.lh-location-section > div[style*="flex"] {
flex-direction: column !important;
}
.lh-location-section > div[style*="flex"] > div:first-child {
margin-bottom: var(--lh-space-md);
text-align: center;
}
.lh-location-section img {
max-width: 200px;
}
.lh-location-section img.lh-location-section__hero-img {
margin: calc(-1 * var(--lh-space-lg)) calc(-1 * var(--lh-space-lg)) var(--lh-space-md);
width: calc(100% + 2 * var(--lh-space-lg));
max-width: none;
}
.lh-prose-panel {
padding: var(--lh-space-lg);
}
}
/* ==========================================================================
Callout Boxes (tips, notes, important info)
========================================================================== */
.lh-callout {
position: relative;
margin: var(--lh-space-lg) 0;
padding: var(--lh-space-md) var(--lh-space-lg);
padding-left: calc(var(--lh-space-lg) + 2rem); /* Room for icon */
background: var(--lh-grey-100);
border-left: 4px solid var(--lh-grey-400);
border-radius: 0 var(--lh-radius-md) var(--lh-radius-md) 0;
font-size: 0.9375rem;
line-height: 1.6;
}
.lh-callout::before {
position: absolute;
left: var(--lh-space-md);
top: var(--lh-space-md);
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", sans-serif;
font-weight: 900;
font-size: 1rem;
color: var(--lh-grey-500);
content: "\f05a"; /* info-circle icon */
}
.lh-callout p {
margin: 0 0 var(--lh-space-sm) 0;
}
.lh-callout p:last-child {
margin-bottom: 0;
}
.lh-callout strong,
.lh-callout .lh-callout__title {
display: block;
margin-bottom: var(--lh-space-xs);
font-weight: 600;
color: var(--lh-primary-dark);
}
/* Tip variant - blue accent */
.lh-callout--tip {
background: var(--lh-blue-50);
border-left-color: var(--lh-primary);
}
.lh-callout--tip::before {
color: var(--lh-primary);
content: "\f0eb"; /* lightbulb icon */
}
/* Important variant - magenta accent */
.lh-callout--important {
background: var(--lh-magenta-50);
border-left-color: var(--lh-magenta);
}
.lh-callout--important::before {
color: var(--lh-magenta);
content: "\f06a"; /* exclamation-circle icon */
}
/* Warning variant - orange accent */
.lh-callout--warning {
background: #fff8f0;
border-left-color: var(--lh-orange);
}
.lh-callout--warning::before {
color: var(--lh-orange);
content: "\f071"; /* exclamation-triangle icon */
}
/* Note variant - neutral grey (default style, explicit class) */
.lh-callout--note {
background: var(--lh-grey-100);
border-left-color: var(--lh-grey-400);
}
.lh-callout--note::before {
color: var(--lh-grey-600);
content: "\f249"; /* sticky-note icon */
}
/* Success variant - green accent */
.lh-callout--success {
background: #f0fdf4;
border-left-color: #22c55e;
}
.lh-callout--success::before {
color: #22c55e;
content: "\f058"; /* check-circle icon */
}
/* Compact variant - less padding */
.lh-callout--compact {
padding: var(--lh-space-sm) var(--lh-space-md);
padding-left: calc(var(--lh-space-md) + 1.75rem);
font-size: 0.875rem;
}
.lh-callout--compact::before {
left: var(--lh-space-sm);
top: var(--lh-space-sm);
font-size: 0.875rem;
}
/* No icon variant */
.lh-callout--no-icon {
padding-left: var(--lh-space-lg);
}
.lh-callout--no-icon::before {
display: none;
}
/* Callout with lists */
.lh-callout ul,
.lh-callout ol {
margin: var(--lh-space-sm) 0 0 0;
padding-left: var(--lh-space-lg);
}
.lh-callout li {
margin-bottom: var(--lh-space-xs);
}
/* Mobile adjustments */
@media (max-width: 767px) {
.lh-callout {
padding: var(--lh-space-sm) var(--lh-space-md);
padding-left: calc(var(--lh-space-md) + 1.75rem);
font-size: 0.875rem;
}
.lh-callout::before {
left: var(--lh-space-sm);
font-size: 0.875rem;
}
}
/* ==========================================================================
icon_btn Parity - Match Internal-v2 CTA Button Style
Applies to legacy icon_btn buttons in page content
========================================================================== */
/* Base icon_btn reset and styling */
.lh-prose a.icon_btn,
.lh-internal-page a.icon_btn,
.lh-how-it-works a.icon_btn,
body.lh-ukse-skin .lh-prose a.icon_btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: var(--lh-space-sm);
padding: var(--lh-space-sm) var(--lh-space-lg) !important;
background: var(--lh-white) !important;
border: 2px solid var(--lh-primary) !important;
border-radius: var(--lh-radius-md) !important;
color: var(--lh-primary) !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
cursor: pointer;
margin: var(--lh-space-xs) var(--lh-space-xs) var(--lh-space-xs) 0;
min-height: 44px;
}
.lh-prose a.icon_btn:hover,
.lh-prose a.icon_btn:focus,
.lh-internal-page a.icon_btn:hover,
.lh-internal-page a.icon_btn:focus,
.lh-how-it-works a.icon_btn:hover,
.lh-how-it-works a.icon_btn:focus,
body.lh-ukse-skin .lh-prose a.icon_btn:hover,
body.lh-ukse-skin .lh-prose a.icon_btn:focus {
background: var(--lh-primary) !important;
color: var(--lh-white) !important;
border-color: var(--lh-primary) !important;
text-decoration: none !important;
}
.lh-prose a.icon_btn:focus-visible,
.lh-internal-page a.icon_btn:focus-visible,
.lh-how-it-works a.icon_btn:focus-visible {
outline: 3px solid rgba(34, 148, 210, 0.3);
outline-offset: 2px;
}
/* icon_btn span styling */
.lh-prose a.icon_btn span,
.lh-internal-page a.icon_btn span,
.lh-how-it-works a.icon_btn span {
color: inherit !important;
}
/* Group icon_btn links together */
.lh-prose a.icon_btn + a.icon_btn {
margin-left: var(--lh-space-xs);
}
/* Responsive: stack on mobile */
@media (max-width: 575px) {
.lh-prose a.icon_btn,
.lh-internal-page a.icon_btn,
.lh-how-it-works a.icon_btn {
display: flex !important;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.lh-prose a.icon_btn + a.icon_btn {
margin-left: 0;
margin-top: var(--lh-space-xs);
}
}
/* ==========================================================================
Payment Confirmation Card
Styled card for thank you / confirmation pages
@since 2.53.0
========================================================================== */
.lh-confirmation-card {
background: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-2xl);
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
max-width: 600px;
margin: 0 auto;
}
.lh-confirmation-card__icon {
color: #22c55e; /* Success green */
margin-bottom: var(--lh-space-md);
}
.lh-confirmation-card__icon svg {
width: 64px;
height: 64px;
}
.lh-confirmation-card__title {
font-family: var(--lh-font-heading);
font-size: 1.5rem;
font-weight: 600;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-lg) 0;
}
.lh-confirmation-card__details {
background: var(--lh-grey-100);
border-radius: var(--lh-radius-md);
padding: var(--lh-space-lg);
margin: 0 0 var(--lh-space-lg) 0;
text-align: left;
}
.lh-confirmation-card__row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--lh-space-sm) 0;
border-bottom: 1px solid var(--lh-grey-200);
}
.lh-confirmation-card__row:last-child {
border-bottom: none;
}
.lh-confirmation-card__details dt {
font-weight: 600;
color: var(--lh-grey-700);
font-size: 0.9375rem;
}
.lh-confirmation-card__details dd {
font-weight: 500;
color: var(--lh-primary-dark);
margin: 0;
}
.lh-confirmation-card__message {
text-align: left;
}
.lh-confirmation-card__message p {
margin: 0 0 var(--lh-space-md) 0;
color: var(--lh-grey-700);
line-height: 1.6;
}
.lh-confirmation-card__message p:last-child {
margin-bottom: 0;
}
.lh-confirmation-card__message a {
color: var(--lh-magenta);
text-decoration: underline;
text-underline-offset: 2px;
}
.lh-confirmation-card__message a:hover {
color: var(--lh-primary);
}
@media (max-width: 575px) {
.lh-confirmation-card {
padding: var(--lh-space-lg);
}
.lh-confirmation-card__row {
flex-direction: column;
gap: var(--lh-space-xs);
}
}
/* ==========================================================================
Gravity Forms Payment Page Styling
Scoped styles for payment forms
@since 2.53.0
========================================================================== */
/* Form wrapper within internal pages */
.lh-internal-page .gform_wrapper {
max-width: 100%;
}
/* Form title styling */
.lh-internal-page .gform_wrapper .gform_title {
font-family: var(--lh-font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-md);
}
/* Section headings within form (gsection) */
.lh-internal-page .gform_wrapper .gsection {
border-bottom: 2px solid rgba(230, 0, 126, 0.2);
padding-bottom: var(--lh-space-sm);
margin: var(--lh-space-lg) 0 var(--lh-space-md) 0;
}
.lh-internal-page .gform_wrapper .gsection_title {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--lh-primary-dark);
margin: 0;
}
/* Form fields */
.lh-internal-page .gform_wrapper .gfield {
margin-bottom: var(--lh-space-md);
}
.lh-internal-page .gform_wrapper .gfield_label {
font-weight: 500;
color: var(--lh-grey-800);
margin-bottom: var(--lh-space-xs);
}
.lh-internal-page .gform_wrapper input[type="text"],
.lh-internal-page .gform_wrapper input[type="email"],
.lh-internal-page .gform_wrapper input[type="tel"],
.lh-internal-page .gform_wrapper input[type="number"],
.lh-internal-page .gform_wrapper select,
.lh-internal-page .gform_wrapper textarea {
width: 100%;
padding: var(--lh-space-sm) var(--lh-space-md);
border: 2px solid var(--lh-grey-400);
border-radius: var(--lh-radius-md);
font-size: 1rem;
background: var(--lh-white);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lh-internal-page .gform_wrapper input:focus,
.lh-internal-page .gform_wrapper select:focus,
.lh-internal-page .gform_wrapper textarea:focus {
outline: none;
border-color: var(--lh-primary);
box-shadow: 0 0 0 3px rgba(34, 148, 210, 0.15);
}
/* Submit button - LH primary style */
.lh-internal-page .gform_wrapper .gform_button,
.lh-internal-page .gform_wrapper input[type="submit"],
.lh-internal-page .gform_wrapper button[type="submit"] {
display: inline-block;
padding: var(--lh-space-md) var(--lh-space-xl);
background: var(--lh-magenta);
color: var(--lh-white);
border: none;
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-sans);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
min-height: 48px;
}
.lh-internal-page .gform_wrapper .gform_button:hover,
.lh-internal-page .gform_wrapper input[type="submit"]:hover,
.lh-internal-page .gform_wrapper button[type="submit"]:hover {
background: var(--lh-magenta-550);
transform: translateY(-1px);
}
.lh-internal-page .gform_wrapper .gform_button:active,
.lh-internal-page .gform_wrapper input[type="submit"]:active,
.lh-internal-page .gform_wrapper button[type="submit"]:active {
transform: translateY(0);
}
.lh-internal-page .gform_wrapper .gform_button:focus-visible,
.lh-internal-page .gform_wrapper input[type="submit"]:focus-visible,
.lh-internal-page .gform_wrapper button[type="submit"]:focus-visible {
outline: 3px solid rgba(230, 0, 126, 0.3);
outline-offset: 2px;
}
/* Validation errors */
.lh-internal-page .gform_wrapper .gfield_error input,
.lh-internal-page .gform_wrapper .gfield_error select,
.lh-internal-page .gform_wrapper .gfield_error textarea {
border-color: var(--lh-secondary);
}
.lh-internal-page .gform_wrapper .validation_message {
color: var(--lh-secondary);
font-size: 0.875rem;
margin-top: var(--lh-space-xs);
}
/* ==========================================================================
Rates Table Styling
Scoped styles for .rates tables (airport transfers, etc.)
@since 2.53.0
========================================================================== */
/* Base table styling */
.lh-prose table.rates,
.lh-internal-page table.rates {
width: 100%;
border-collapse: collapse;
border-radius: var(--lh-radius-md);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin: var(--lh-space-lg) 0;
font-size: 1rem;
}
/* Header row */
.lh-prose table.rates th,
.lh-internal-page table.rates th {
background: var(--lh-primary-dark);
color: var(--lh-white);
font-family: var(--lh-font-heading);
font-size: 1rem !important;
font-weight: 600;
letter-spacing: 0 !important;
padding: var(--lh-space-md) var(--lh-space-lg);
text-align: left;
border: none;
}
/* Body cells */
.lh-prose table.rates td,
.lh-internal-page table.rates td {
padding: var(--lh-space-md) var(--lh-space-lg);
border-bottom: 1px solid var(--lh-grey-200);
color: var(--lh-grey-800);
text-align: left;
}
/* Last row - no border */
.lh-prose table.rates tr:last-child td,
.lh-internal-page table.rates tr:last-child td {
border-bottom: none;
}
/* Alternating row colors - override legacy .white and .sky-blue classes */
.lh-prose table.rates tr:nth-child(odd) td,
.lh-internal-page table.rates tr:nth-child(odd) td,
.lh-prose table.rates td.white,
.lh-internal-page table.rates td.white {
background: var(--lh-white);
}
.lh-prose table.rates tr:nth-child(even) td,
.lh-internal-page table.rates tr:nth-child(even) td,
.lh-prose table.rates td.sky-blue,
.lh-internal-page table.rates td.sky-blue {
background: var(--lh-grey-100);
}
/* Override legacy inline font-size on th */
.lh-prose table.rates th[style],
.lh-internal-page table.rates th[style] {
font-size: 1rem !important;
letter-spacing: 0 !important;
}
/* Hover effect */
.lh-prose table.rates tbody tr:hover td,
.lh-internal-page table.rates tbody tr:hover td {
background: rgba(34, 148, 210, 0.05);
}
/* Price column emphasis */
.lh-prose table.rates td:last-child,
.lh-internal-page table.rates td:last-child {
font-weight: 600;
color: var(--lh-primary-dark);
}
/* Mobile responsive - horizontal scroll wrapper */
@media (max-width: 575px) {
.lh-prose table.rates,
.lh-internal-page table.rates {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.lh-prose table.rates th,
.lh-prose table.rates td,
.lh-internal-page table.rates th,
.lh-internal-page table.rates td {
padding: var(--lh-space-sm) var(--lh-space-md);
white-space: nowrap;
}
}
/* ==========================================================================
Blog Templates — LH v2 Minimal Alignment
Phase 2.A: Blog hero + layout normalisation
========================================================================== */
/* ------------------------------------------------------------------------- */
/* Blog Hero (archive + index) */
/* ------------------------------------------------------------------------- */
.lh-blog-hero {
background: var(--lh-primary-dark);
color: var(--lh-white);
text-align: center;
padding: 72px 24px 56px;
overflow: hidden;
}
.lh-blog-hero__wrap {
max-width: 640px;
margin: 0 auto;
}
.lh-blog-hero__title {
font-family: var(--lh-font-heading);
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 700;
line-height: 1.15;
margin: 0 0 12px;
color: var(--lh-white);
}
.lh-blog-hero__intro {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.78);
margin: 0;
line-height: 1.5;
}
/* ------------------------------------------------------------------------- */
/* Blog Page Layout */
/* ------------------------------------------------------------------------- */
.lh-blog-page {
background-color: var(--lh-blue-50);
}
/* Blog content section */
.lh-blog-content {
padding-top: var(--lh-space-2xl);
padding-bottom: var(--lh-space-2xl);
}
/* Two-column grid layout */
.lh-blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--lh-space-xl);
}
@media (min-width: 992px) {
.lh-blog-grid {
grid-template-columns: 1fr 300px;
gap: var(--lh-space-2xl);
}
}
/* Main content area — no wrapper card; each blog-card is self-contained */
.lh-blog-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
/* ------------------------------------------------------------------------- */
/* Blog Sidebar */
/* ------------------------------------------------------------------------- */
.lh-blog-sidebar {
/* Sidebar wrapper - widgets styled as individual cards */
}
.lh-blog-sidebar__inner {
/* Inner sidebar styling */
}
/* Widget styling - white cards for framing coherence */
.lh-blog-sidebar .widget,
.lh-sidebar .widget {
margin-bottom: var(--lh-space-lg);
padding: var(--lh-space-lg);
background: var(--lh-white);
border-radius: var(--lh-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.lh-blog-sidebar .widget:last-child,
.lh-sidebar .widget:last-child {
margin-bottom: 0;
}
/* Widget titles - normalised to LH scale */
.lh-blog-sidebar .widget-title,
.lh-blog-sidebar .widgettitle,
.lh-blog-sidebar h3,
.lh-sidebar .widget-title,
.lh-sidebar .widgettitle {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-md);
padding-bottom: var(--lh-space-sm);
border-bottom: 2px solid var(--lh-magenta);
}
/* Widget lists */
.lh-blog-sidebar .widget ul,
.lh-sidebar .widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.lh-blog-sidebar .widget li,
.lh-sidebar .widget li {
margin-bottom: var(--lh-space-sm);
padding-left: 0;
}
.lh-blog-sidebar .widget li::before,
.lh-sidebar .widget li::before {
display: none; /* Remove any bullet styling */
}
.lh-blog-sidebar .widget a,
.lh-sidebar .widget a {
color: var(--lh-primary);
font-weight: 600;
text-decoration: none;
transition: color var(--lh-transition-fast);
}
.lh-blog-sidebar .widget a:hover,
.lh-sidebar .widget a:hover {
color: var(--lh-primary-dark);
}
/* FeedBurner widget softening */
.lh-blog-sidebar .widget_rss,
.lh-blog-sidebar .widget_feedburner,
.lh-sidebar .widget_rss {
opacity: 0.85;
}
.lh-blog-sidebar .widget_rss img,
.lh-sidebar .widget_rss img {
max-width: 100%;
height: auto;
}
/* Search widget */
.lh-blog-sidebar .widget_search input[type="search"],
.lh-blog-sidebar .widget_search input[type="text"],
.lh-sidebar .widget_search input[type="search"],
.lh-sidebar .widget_search input[type="text"] {
width: 100%;
padding: var(--lh-space-sm) var(--lh-space-md);
border: 1px solid var(--lh-grey-300);
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-primary);
font-size: 0.9375rem;
}
.lh-blog-sidebar .widget_search input[type="search"]:focus,
.lh-sidebar .widget_search input[type="search"]:focus {
outline: none;
border-color: var(--lh-primary);
box-shadow: 0 0 0 2px rgba(34, 148, 210, 0.2);
}
/* ------------------------------------------------------------------------- */
/* Blog Card (UKSE-style horizontal card) */
/* ------------------------------------------------------------------------- */
.lh-blog-card {
display: grid;
grid-template-columns: 260px 1fr;
background: var(--lh-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 50, 0.06),
0 8px 24px rgba(0, 0, 50, 0.04);
transition: box-shadow var(--lh-transition-base),
transform var(--lh-transition-base);
}
.lh-blog-card:hover {
box-shadow: 0 2px 6px rgba(0, 0, 50, 0.08),
0 12px 32px rgba(0, 0, 50, 0.07);
transform: translateY(-2px);
}
/* Image column */
.lh-blog-card__media {
display: block;
overflow: hidden;
line-height: 0;
}
.lh-blog-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.lh-blog-card:hover .lh-blog-card__media img {
transform: scale(1.04);
}
/* Body column */
.lh-blog-card__body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 28px 32px;
}
/* Meta row (date + category) */
.lh-blog-card__meta {
display: flex;
gap: 16px;
font-size: 0.82rem;
font-weight: 500;
color: var(--lh-grey-600);
text-transform: capitalize;
}
/* Title */
.lh-blog-card__title {
font-family: var(--lh-font-heading);
font-size: 1.3rem;
font-weight: 700;
line-height: 1.35;
margin: 0;
color: var(--lh-primary-dark);
}
.lh-blog-card__title a {
color: inherit;
text-decoration: none;
transition: color var(--lh-transition-fast);
display: -webkit-box;
-webkit-box-orient: vertical; /*! keep */
-webkit-line-clamp: 3;
overflow: hidden;
}
.lh-blog-card__title a:hover {
color: var(--lh-primary);
}
/* Excerpt */
.lh-blog-card__excerpt {
font-size: 0.95rem;
line-height: 1.6;
color: var(--lh-grey-700);
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical; /*! keep */
-webkit-line-clamp: 3;
overflow: hidden;
}
/* Read more link */
.lh-blog-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
font-weight: 600;
color: var(--lh-magenta);
text-decoration: none;
margin-top: auto;
transition: gap var(--lh-transition-fast), color var(--lh-transition-fast);
}
.lh-blog-card__link:hover {
color: var(--lh-magenta-700);
gap: 10px;
}
.lh-blog-card__link svg {
flex-shrink: 0;
transition: transform var(--lh-transition-fast);
}
.lh-blog-card:hover .lh-blog-card__link svg {
transform: translateX(2px);
}
/* Not-found state */
.lh-blog-card--not-found {
grid-template-columns: 1fr;
text-align: center;
padding: var(--lh-space-2xl);
}
/* ---- Tablet: stack cards vertically ---- */
@media (max-width: 768px) {
.lh-blog-card {
grid-template-columns: 1fr;
}
.lh-blog-card__media {
max-height: 220px;
}
.lh-blog-card__body {
padding: 20px 24px 24px;
}
}
/* ---- Legacy .lh-blog-article compat (single post still uses these) ---- */
.lh-blog-article__content {
margin-bottom: var(--lh-space-xl);
}
.lh-blog-article__header--single {
margin-bottom: var(--lh-space-lg);
}
.lh-blog-article__footer {
margin-top: var(--lh-space-lg);
padding-top: var(--lh-space-md);
border-top: 1px solid var(--lh-grey-200);
}
.lh-blog-article__tags {
font-size: 0.875rem;
color: var(--lh-grey-600);
margin: 0;
}
.lh-blog-article__tags-label {
font-weight: 600;
margin-right: var(--lh-space-xs);
}
.lh-blog-article__tags a {
color: var(--lh-grey-600);
text-decoration: none;
}
.lh-blog-article__tags a:hover {
color: var(--lh-primary);
}
/* ------------------------------------------------------------------------- */
/* Blog Pagination */
/* ------------------------------------------------------------------------- */
.lh-blog-pagination {
margin-top: var(--lh-space-lg);
text-align: center;
}
/* Bones page navi - reset and restyle */
.lh-blog-pagination .bones_page_navi {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--lh-space-xs);
list-style: none;
margin: 0;
padding: 0;
}
.lh-blog-pagination .bones_page_navi li {
margin: 0;
padding: 0;
}
.lh-blog-pagination .bones_page_navi li::before {
display: none;
}
/* Page number links */
.lh-blog-pagination .bones_page_navi li a {
display: inline-block;
padding: 0.4em 0.75em;
background: var(--lh-primary);
border: 1px solid var(--lh-primary);
border-radius: var(--lh-radius-md);
color: var(--lh-white) !important;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all var(--lh-transition-fast);
}
.lh-blog-pagination .bones_page_navi li a:hover,
.lh-blog-pagination .bones_page_navi li a:focus {
background: var(--lh-primary-dark) !important;
border-color: var(--lh-primary-dark) !important;
color: var(--lh-white) !important;
text-decoration: none !important;
}
/* Current page indicator */
.lh-blog-pagination .bones_page_navi li.bpn-current {
display: inline-block;
padding: 0.4em 0.75em;
background: var(--lh-magenta);
border: 1px solid var(--lh-magenta);
border-radius: var(--lh-radius-md);
color: var(--lh-white);
font-size: 0.875rem;
font-weight: 600;
}
/* Empty prev link on first page - hide */
.lh-blog-pagination .bones_page_navi li.bpn-prev-link:empty {
display: none;
}
/* Fallback pagination (non-bones) */
.lh-blog-pagination__list {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.lh-blog-pagination__list li {
margin: 0;
padding: 0;
}
.lh-blog-pagination__list li::before {
display: none;
}
.lh-blog-pagination__list a {
display: inline-block;
padding: 0.4em 0.75em;
background: var(--lh-primary);
border: 1px solid var(--lh-primary);
border-radius: var(--lh-radius-md);
color: var(--lh-white) !important;
text-decoration: none;
font-size: 0.875rem;
transition: all var(--lh-transition-fast);
}
.lh-blog-pagination__list a:hover,
.lh-blog-pagination__list a:focus {
background: var(--lh-primary-dark) !important;
border-color: var(--lh-primary-dark) !important;
color: var(--lh-white) !important;
text-decoration: none !important;
}
/* ------------------------------------------------------------------------- */
/* Blog Hero Subheading Muted Variant */
/* ------------------------------------------------------------------------- */
.lh-page-hero__subheading--muted {
opacity: 0.8;
font-size: 1rem;
}
/* ------------------------------------------------------------------------- */
/* Blog Comments Styling */
/* ------------------------------------------------------------------------- */
.lh-blog-article #comments {
margin-top: var(--lh-space-2xl);
padding-top: var(--lh-space-xl);
border-top: 1px solid var(--lh-grey-200);
}
.lh-blog-article #comments h3 {
font-family: var(--lh-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-lg);
}
.lh-blog-article .comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.lh-blog-article .comment {
margin-bottom: var(--lh-space-lg);
padding-bottom: var(--lh-space-lg);
border-bottom: 1px solid var(--lh-grey-200);
}
.lh-blog-article .comment:last-child {
border-bottom: none;
}
/* Comment form */
.lh-blog-article #respond {
margin-top: var(--lh-space-xl);
}
.lh-blog-article #respond h3 {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-lg);
}
.lh-blog-article #respond input[type="text"],
.lh-blog-article #respond input[type="email"],
.lh-blog-article #respond textarea {
width: 100%;
padding: var(--lh-space-sm) var(--lh-space-md);
border: 1px solid var(--lh-grey-300);
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-primary);
font-size: 0.9375rem;
margin-bottom: var(--lh-space-md);
}
.lh-blog-article #respond input:focus,
.lh-blog-article #respond textarea:focus {
outline: none;
border-color: var(--lh-primary);
box-shadow: 0 0 0 2px rgba(34, 148, 210, 0.2);
}
.lh-blog-article #respond input[type="submit"] {
background: var(--lh-primary);
color: var(--lh-white);
border: none;
padding: var(--lh-space-sm) var(--lh-space-lg);
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-primary);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: background var(--lh-transition-fast);
}
.lh-blog-article #respond input[type="submit"]:hover {
background: var(--lh-primary-dark);
}
/* ------------------------------------------------------------------------- */
/* Mobile Responsive Blog Styles */
/* ------------------------------------------------------------------------- */
@media (max-width: 767px) {
.lh-blog-hero {
padding: 48px 20px 40px;
}
.lh-blog-content {
padding-top: var(--lh-space-lg);
padding-bottom: var(--lh-space-xl);
}
.lh-blog-main {
gap: 20px;
}
.lh-blog-card__title {
font-size: 1.1rem;
}
.lh-blog-card__title a {
-webkit-line-clamp: 2;
}
.lh-blog-pagination__list {
flex-direction: column;
gap: var(--lh-space-sm);
text-align: center;
}
}
/* ==========================================================================
Contact Page Styles (template-contact.php)
Modernises legacy contact page to match LH v2 aesthetic
========================================================================== */
/* Contact page main container */
body.lh-ukse-skin .page-template-template-contact #content {
background: var(--lh-white);
}
body.lh-ukse-skin .page-template-template-contact #inner-content {
max-width: 1200px;
margin: 0 auto;
padding: var(--lh-space-2xl) var(--lh-space-lg);
}
/* Contact page title */
body.lh-ukse-skin .page-template-template-contact #inner-content > h1 {
font-family: var(--lh-font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-xl);
text-align: center;
}
/* Contact wrap container */
body.lh-ukse-skin .contact_wrap {
background: var(--lh-grey-100);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-lg);
}
/* Two-column grid */
body.lh-ukse-skin .contact_wrap .grid {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-xl);
}
body.lh-ukse-skin .contact_wrap .grid__item.lap--one-half.desk--one-half {
flex: 1 1 400px;
min-width: 300px;
}
/* Contact form card */
body.lh-ukse-skin .contact_form {
background: var(--lh-white);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-md);
box-shadow: var(--lh-shadow-sm);
}
/* CF7 form styling */
body.lh-ukse-skin .contact_form .wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--lh-space-md);
}
body.lh-ukse-skin .contact_form .wpcf7-form label {
font-weight: 600;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-xs);
display: block;
}
body.lh-ukse-skin .contact_form .wpcf7-form input[type="text"],
body.lh-ukse-skin .contact_form .wpcf7-form input[type="email"],
body.lh-ukse-skin .contact_form .wpcf7-form input[type="tel"],
body.lh-ukse-skin .contact_form .wpcf7-form textarea {
width: 100%;
padding: var(--lh-space-sm) var(--lh-space-md);
border: 1px solid var(--lh-grey-300);
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-primary);
font-size: 1rem;
transition: border-color var(--lh-transition-fast), box-shadow var(--lh-transition-fast);
}
body.lh-ukse-skin .contact_form .wpcf7-form input:focus,
body.lh-ukse-skin .contact_form .wpcf7-form textarea:focus {
outline: none;
border-color: var(--lh-primary);
box-shadow: 0 0 0 3px rgba(34, 148, 210, 0.15);
}
body.lh-ukse-skin .contact_form .wpcf7-form textarea {
min-height: 150px;
resize: vertical;
}
body.lh-ukse-skin .contact_form .wpcf7-form input[type="submit"] {
background: var(--lh-primary);
color: var(--lh-white);
border: none;
padding: var(--lh-space-sm) var(--lh-space-xl);
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-primary);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background var(--lh-transition-fast);
align-self: flex-start;
}
body.lh-ukse-skin .contact_form .wpcf7-form input[type="submit"]:hover {
background: var(--lh-primary-dark);
}
/* Contact info card */
body.lh-ukse-skin .contact_info {
background: var(--lh-white);
padding: var(--lh-space-xl);
border-radius: var(--lh-radius-md);
box-shadow: var(--lh-shadow-sm);
margin-bottom: var(--lh-space-lg);
}
body.lh-ukse-skin .contact_info p {
display: flex;
align-items: center;
gap: var(--lh-space-md);
margin-bottom: var(--lh-space-md);
font-size: 1rem;
color: var(--lh-grey-800);
}
body.lh-ukse-skin .contact_info p:last-child {
margin-bottom: 0;
}
body.lh-ukse-skin .contact_info i.fa {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--lh-primary);
color: var(--lh-white);
border-radius: var(--lh-radius-full);
font-size: 1rem;
}
body.lh-ukse-skin .contact_info a {
color: var(--lh-primary);
font-weight: 500;
}
body.lh-ukse-skin .contact_info a:hover {
color: var(--lh-primary-dark);
}
/* Map area */
body.lh-ukse-skin .map_area {
border-radius: var(--lh-radius-md);
overflow: hidden;
box-shadow: var(--lh-shadow-sm);
}
body.lh-ukse-skin #map_canvas {
width: 100%;
height: 300px;
}
/* Contact page mobile responsive */
@media (max-width: 767px) {
body.lh-ukse-skin .page-template-template-contact #inner-content {
padding: var(--lh-space-lg) var(--lh-space-md);
}
body.lh-ukse-skin .page-template-template-contact #inner-content > h1 {
font-size: 1.5rem;
}
body.lh-ukse-skin .contact_wrap {
padding: var(--lh-space-md);
}
body.lh-ukse-skin .contact_wrap .grid {
flex-direction: column;
}
body.lh-ukse-skin .contact_wrap .grid__item.lap--one-half.desk--one-half {
flex: 1 1 100%;
width: 100%;
}
body.lh-ukse-skin .contact_form,
body.lh-ukse-skin .contact_info {
padding: var(--lh-space-lg);
}
}
/* ==========================================================================
Contact Page v2 Styles (template-contact.php child theme override)
Modern LH v2 layout with hero section, card-based design
========================================================================== */
/* Main container - light blue background for content framing (matches blog/internal pages) */
.lh-contact-page {
background-color: var(--lh-blue-50);
}
/* Content section */
.lh-contact-page__content {
padding-top: var(--lh-space-2xl);
padding-bottom: var(--lh-space-2xl);
}
/* Intro prose content */
.lh-contact-page__intro {
margin-bottom: var(--lh-space-lg);
text-align: center;
}
.lh-contact-page__intro.lh-container-narrow {
margin-left: auto;
margin-right: auto;
}
/* Contact intro card grids — left-align text, tighter spacing */
.lh-contact-page__intro .lh-contact-intro-grid {
text-align: left;
gap: var(--lh-space-sm);
margin-top: var(--lh-space-sm);
margin-bottom: var(--lh-space-xs);
}
.lh-contact-page__intro .lh-contact-intro-grid .lh-card--compact {
padding: var(--lh-space-sm) var(--lh-space-md);
}
.lh-contact-page__intro .lh-contact-intro-grid .lh-card__title {
margin-bottom: var(--lh-space-xs);
font-size: 0.95rem;
}
.lh-contact-page__intro .lh-contact-intro-grid .lh-card__body {
font-size: 0.9rem;
line-height: 1.6;
}
.lh-contact-page__intro .lh-callout {
text-align: left;
margin-top: var(--lh-space-xs);
margin-bottom: var(--lh-space-xs);
}
@media (max-width: 600px) {
.lh-contact-page__intro .lh-contact-intro-grid {
grid-template-columns: 1fr;
}
}
/* Two-column grid layout */
.lh-contact-page__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--lh-space-xl);
max-width: 1100px;
margin: 0 auto;
}
/* Section titles within cards */
.lh-contact-page__section-title {
font-family: var(--lh-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-lg);
padding-bottom: var(--lh-space-sm);
border-bottom: 2px solid var(--lh-magenta);
}
/* Form column */
.lh-contact-page__form-column {
display: flex;
flex-direction: column;
}
/* Form card */
.lh-contact-page__form-card {
flex: 1;
padding: var(--lh-space-xl);
}
/* Contact page cards - white with subtle shadow against light blue background */
.lh-contact-page__form-card,
.lh-contact-page__info-card,
.lh-contact-page__map-card {
position: relative;
background: var(--lh-white);
border-radius: var(--lh-radius-lg);
box-shadow: var(--lh-shadow-sm);
overflow: hidden;
}
/* Gradient accent bar (pseudo-element to preserve border-radius) */
.lh-contact-page__form-card::before,
.lh-contact-page__info-card::before,
.lh-contact-page__map-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--lh-primary) 0%, var(--lh-magenta) 100%);
border-radius: var(--lh-radius-lg) var(--lh-radius-lg) 0 0;
}
/* CF7 form styling within new template */
.lh-contact-page__form .wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--lh-space-md);
}
.lh-contact-page__form .wpcf7-form p {
margin: 0;
}
.lh-contact-page__form .wpcf7-form label {
display: block;
font-weight: 600;
color: var(--lh-primary-dark);
margin-bottom: var(--lh-space-xs);
font-size: 0.9375rem;
}
.lh-contact-page__form .wpcf7-form input[type="text"],
.lh-contact-page__form .wpcf7-form input[type="email"],
.lh-contact-page__form .wpcf7-form input[type="tel"],
.lh-contact-page__form .wpcf7-form textarea,
.lh-contact-page__form .wpcf7-form select {
width: 100%;
padding: var(--lh-space-sm) var(--lh-space-md);
border: 1px solid var(--lh-grey-500);
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-primary);
font-size: 1rem;
background: var(--lh-white);
transition: border-color var(--lh-transition-fast), box-shadow var(--lh-transition-fast);
}
.lh-contact-page__form .wpcf7-form input:focus,
.lh-contact-page__form .wpcf7-form textarea:focus,
.lh-contact-page__form .wpcf7-form select:focus {
outline: none;
border-color: var(--lh-primary);
box-shadow: 0 0 0 3px rgba(34, 148, 210, 0.15);
}
.lh-contact-page__form .wpcf7-form textarea {
min-height: 150px;
resize: vertical;
}
.lh-contact-page__form .wpcf7-form input[type="submit"] {
background: var(--lh-primary);
color: var(--lh-white);
border: none;
padding: var(--lh-space-sm) var(--lh-space-xl);
border-radius: var(--lh-radius-md);
font-family: var(--lh-font-primary);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background var(--lh-transition-fast);
align-self: flex-start;
margin-top: var(--lh-space-sm);
}
.lh-contact-page__form .wpcf7-form input[type="submit"]:hover {
background: var(--lh-primary-dark);
}
/* Focus-visible for keyboard navigation (M4-A) */
.lh-contact-page__form .wpcf7-form input:focus-visible,
.lh-contact-page__form .wpcf7-form textarea:focus-visible,
.lh-contact-page__form .wpcf7-form select:focus-visible {
outline: 3px solid var(--lh-primary);
outline-offset: 2px;
}
.lh-contact-page__form .wpcf7-form input[type="submit"]:focus-visible {
outline: 3px solid var(--lh-primary);
outline-offset: 2px;
}
.lh-contact-page__form .wpcf7-form input[type="submit"]:active {
transform: translateY(1px);
}
/* Info column */
.lh-contact-page__info-column {
display: flex;
flex-direction: column;
gap: var(--lh-space-lg);
}
/* Info card */
.lh-contact-page__info-card {
padding: var(--lh-space-xl);
}
/* Contact details list */
.lh-contact-page__details {
display: flex;
flex-direction: column;
gap: var(--lh-space-md);
}
.lh-contact-page__detail {
display: flex;
align-items: center;
gap: var(--lh-space-md);
font-size: 1rem;
color: var(--lh-grey-800);
}
.lh-contact-page__icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--lh-primary);
color: var(--lh-white);
border-radius: var(--lh-radius-full);
flex-shrink: 0;
}
.lh-contact-page__icon i.fa {
font-size: 1.125rem;
}
.lh-contact-page__detail a {
color: var(--lh-primary);
font-weight: 700;
word-break: break-word;
}
.lh-contact-page__detail a:hover {
color: var(--lh-primary-dark);
text-decoration: underline;
}
/* Map card */
.lh-contact-page__map-card {
padding: var(--lh-space-xl);
flex: 1;
}
.lh-contact-page__map {
width: 100%;
height: 280px;
border-radius: var(--lh-radius-md);
overflow: hidden;
}
/* Mobile responsive */
@media (max-width: 900px) {
.lh-contact-page__grid {
grid-template-columns: 1fr;
gap: var(--lh-space-lg);
}
.lh-contact-page__form-column,
.lh-contact-page__info-column {
order: unset;
}
}
@media (max-width: 600px) {
.lh-contact-page__content {
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-xl);
}
.lh-contact-page__form-card,
.lh-contact-page__info-card,
.lh-contact-page__map-card {
padding: var(--lh-space-lg);
}
.lh-contact-page__section-title {
font-size: 1.125rem;
}
.lh-contact-page__map {
height: 220px;
}
}
/* ==========================================================================
Card Grid within Prose - Override prose styling for card components
========================================================================== */
.lh-prose .lh-card-grid {
/* Reset prose max-width for card grids */
max-width: none;
}
.lh-prose .lh-card-grid .lh-card {
/* Ensure cards display correctly within prose */
display: flex;
flex-direction: column;
background: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-md);
padding: var(--lh-space-lg);
box-shadow: var(--lh-shadow-sm);
}
.lh-prose .lh-card-grid a.lh-card {
/* Override prose link styling */
color: inherit;
text-decoration: none;
}
.lh-prose .lh-card-grid .lh-card__icon {
color: var(--lh-magenta);
font-size: 1.5rem;
margin-bottom: var(--lh-space-md);
}
.lh-prose .lh-card-grid .lh-card__title {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
}
.lh-prose .lh-card-grid .lh-card__body {
font-size: 0.9375rem;
color: var(--lh-grey-700);
margin: 0;
line-height: 1.5;
}
/* ==========================================================================
Card with Image variant
========================================================================== */
.lh-card--has-image {
padding: 0 !important;
overflow: hidden;
}
.lh-card__image {
width: 100%;
height: 160px;
overflow: hidden;
margin: 0;
padding: 0;
display: block;
}
.lh-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform var(--lh-transition-base);
display: block;
margin: 0;
padding: 0;
}
.lh-card--has-image:hover .lh-card__image img,
.lh-card--has-image:focus .lh-card__image img {
transform: scale(1.05);
}
.lh-card--has-image .lh-card__content {
padding: var(--lh-space-lg);
}
.lh-card--has-image .lh-card__title {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
}
.lh-card--has-image .lh-card__body {
font-size: 0.9375rem;
color: var(--lh-grey-700);
margin: 0;
line-height: 1.5;
}
/* ==========================================================================
Safety Hub Template (template-safety.php)
Calm, trust-led layout for safeguarding information.
@since 2.62.0
========================================================================== */
/* Hero trust bullets - 2x2 grid */
.lh-safety-hub__trust-bullets {
list-style: none;
padding: 0;
margin: var(--lh-space-lg) 0;
display: grid;
grid-template-columns: auto auto;
gap: var(--lh-space-sm) var(--lh-space-xl);
justify-content: start;
}
.lh-safety-hub__trust-bullets li {
display: flex;
align-items: flex-start;
gap: var(--lh-space-sm);
font-size: 0.9375rem;
color: var(--lh-white);
line-height: 1.4;
}
.lh-safety-hub__trust-bullets li i {
color: var(--lh-magenta);
font-size: 1rem;
flex-shrink: 0;
margin-top: 0.2em;
}
/* Hero secondary link */
.lh-safety-hub__hero-link {
margin-top: var(--lh-space-md);
font-size: 0.9375rem;
}
.lh-safety-hub__hero-link a {
color: var(--lh-white);
text-decoration: underline;
text-underline-offset: 3px;
}
.lh-safety-hub__hero-link a:hover {
color: var(--lh-primary-light);
}
/* Section spacing — tightened to avoid double-stacking with frame padding.
Section (24px) + frame (32px) = 56px effective, down from 96px.
Must appear BEFORE the BC frame override so cascade order is correct. */
.lh-safety-hub__section {
padding-top: var(--lh-space-lg);
padding-bottom: var(--lh-space-lg);
}
.lh-safety-hub .lh-safety-hub__section:not(.lh-safety-hub__bc-registration) .lh-internal-page__frame {
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-xl);
}
/* Section intro text */
.lh-safety-hub__intro {
font-size: 1.0625rem;
color: var(--lh-grey-700);
margin-bottom: var(--lh-space-lg);
line-height: 1.6;
}
/* Bullet list with icons */
.lh-safety-hub__bullet-list {
list-style: none;
padding: 0;
margin: 0 0 var(--lh-space-xl);
}
.lh-safety-hub__bullet-list li {
display: flex;
align-items: flex-start;
gap: var(--lh-space-sm);
padding: var(--lh-space-sm) 0;
font-size: 1rem;
color: var(--lh-grey-800);
line-height: 1.5;
}
.lh-safety-hub__bullet-list li i {
color: var(--lh-magenta);
flex-shrink: 0;
margin-top: 0.25rem;
}
/* Button row (3 buttons) */
.lh-safety-hub__button-row {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-md);
margin-bottom: var(--lh-space-lg);
}
.lh-safety-hub__button-row .lh-btn {
flex: 0 1 auto;
min-width: 200px;
text-align: center;
}
/* Footnote */
.lh-safety-hub__footnote {
color: var(--lh-grey-600);
font-size: 0.875rem;
}
/* Cards section */
.lh-safety-hub__cards-section {
background: var(--lh-magenta-50); /* Subtle magenta tint - matches testimonials */
}
.lh-safety-hub__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--lh-space-lg);
margin-top: var(--lh-space-xl);
}
/* 2-card variant for non-EN languages (host-facing card removed) */
.lh-safety-hub__cards--two {
grid-template-columns: repeat(2, 1fr);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.lh-safety-hub__cards .lh-card {
display: flex;
flex-direction: column;
height: 100%;
}
.lh-safety-hub__cards .lh-card__body {
flex-grow: 1;
}
.lh-safety-hub__cards .lh-card__footer {
margin-top: auto;
padding-top: var(--lh-space-md);
border-top: none;
}
.lh-safety-hub__cards .lh-card__footer .lh-btn {
width: 100%;
}
/* Card links list (multiple links per card) */
.lh-safety-hub__card-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--lh-space-xs);
}
.lh-safety-hub__card-links li {
margin: 0;
padding: 0;
}
.lh-safety-hub__card-links a {
display: inline-flex;
align-items: center;
gap: var(--lh-space-xs);
color: var(--lh-magenta);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.lh-safety-hub__card-links a::before {
content: "\f054";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0.625rem;
}
.lh-safety-hub__card-links a:hover {
color: var(--lh-primary-dark);
text-decoration: underline;
}
/* Icon grid (6 items) */
.lh-safety-hub__icon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--lh-space-lg);
margin: var(--lh-space-xl) 0;
}
.lh-safety-hub__icon-item {
display: flex;
align-items: center;
gap: var(--lh-space-md);
padding: var(--lh-space-md);
background: var(--lh-grey-100);
border-radius: var(--lh-radius-md);
}
.lh-safety-hub__icon-item i {
font-size: 1.5rem;
color: var(--lh-magenta);
flex-shrink: 0;
width: 2rem;
text-align: center;
}
.lh-safety-hub__icon-item span {
font-size: 0.9375rem;
color: var(--lh-grey-800);
font-weight: 500;
}
/* Note line */
.lh-safety-hub__note {
text-align: center;
color: var(--lh-grey-600);
font-size: 0.9375rem;
margin-top: var(--lh-space-lg);
}
/* Concern callout */
.lh-safety-hub__callout {
display: flex;
gap: var(--lh-space-xl);
padding: var(--lh-space-xl);
background: var(--lh-grey-100);
border-left: 4px solid var(--lh-magenta);
border-radius: var(--lh-radius-md);
}
.lh-safety-hub__callout-icon {
flex-shrink: 0;
}
.lh-safety-hub__callout-icon i {
font-size: 2.5rem;
color: var(--lh-magenta);
}
.lh-safety-hub__callout-content {
flex-grow: 1;
}
.lh-safety-hub__callout-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
}
.lh-safety-hub__callout-content p {
color: var(--lh-grey-700);
margin-bottom: var(--lh-space-md);
line-height: 1.6;
}
/* British Council registration block — Navy Banner with Magenta Accent */
.lh-safety-hub__bc-registration {
padding: var(--lh-space-2xl) 0;
background: var(--lh-primary-dark);
position: relative;
}
/* Magenta accent rail at top */
.lh-safety-hub__bc-registration::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--lh-magenta);
}
/* Override white frame for BC section (comes AFTER general frame override → cascade wins) */
.lh-safety-hub .lh-safety-hub__bc-registration .lh-internal-page__frame {
background: transparent;
padding: 0;
box-shadow: none;
}
.lh-safety-hub__bc-block {
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 0 var(--lh-space-lg);
}
.lh-safety-hub__bc-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--lh-magenta);
margin-bottom: var(--lh-space-md);
}
.lh-safety-hub__bc-badge i {
font-size: 1.5rem;
color: var(--lh-white);
}
.lh-safety-hub__bc-heading {
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-white);
margin: 0 0 var(--lh-space-md);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lh-safety-hub__bc-body {
color: rgba(255, 255, 255, 0.9);
margin: 0 auto;
line-height: 1.6;
font-size: 1.125rem;
max-width: 640px;
}
/* BC block mobile adjustments */
@media (max-width: 480px) {
.lh-safety-hub__bc-registration {
padding: var(--lh-space-xl) 0;
}
.lh-safety-hub__bc-heading {
font-size: 1rem;
letter-spacing: 0.05em;
}
.lh-safety-hub__bc-badge {
width: 48px;
height: 48px;
}
.lh-safety-hub__bc-badge i {
font-size: 1.25rem;
}
}
/* Concern routes list */
.lh-safety-hub__concern-routes {
list-style: none;
margin: 0 0 var(--lh-space-md);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--lh-space-sm);
}
.lh-safety-hub__concern-routes li {
margin: 0;
padding: 0;
color: var(--lh-grey-700);
line-height: 1.5;
}
.lh-safety-hub__concern-routes strong {
color: var(--lh-primary-dark);
}
.lh-safety-hub__concern-routes a {
color: var(--lh-magenta);
text-decoration: none;
}
.lh-safety-hub__concern-routes a:hover {
text-decoration: underline;
}
.lh-safety-hub__concern-footnote {
margin: var(--lh-space-md) 0 0;
color: var(--lh-grey-600);
}
.lh-safety-hub__concern-footnote a {
color: var(--lh-magenta);
text-decoration: none;
}
.lh-safety-hub__concern-footnote a:hover {
text-decoration: underline;
}
/* FAQs section - uses global .lh-faq-accordion styles */
/* Related policies footer */
.lh-safety-hub__related {
text-align: center;
padding: var(--lh-space-xl) 0;
}
.lh-safety-hub__related h3 {
font-size: 1rem;
font-weight: 600;
color: var(--lh-grey-600);
margin-bottom: var(--lh-space-md);
}
.lh-safety-hub__related ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--lh-space-md) var(--lh-space-xl);
}
.lh-safety-hub__related a {
color: var(--lh-primary);
text-decoration: none;
font-size: 0.9375rem;
}
.lh-safety-hub__related a:hover {
text-decoration: underline;
}
/* ==========================================================================
Safety Hub - Responsive (Mobile First)
========================================================================== */
@media (max-width: 991px) {
/* Cards: 2 columns on tablet */
.lh-safety-hub__cards {
grid-template-columns: repeat(2, 1fr);
}
/* Icon grid: 2 columns on tablet */
.lh-safety-hub__icon-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
/* Trust bullets stack on mobile */
.lh-safety-hub__trust-bullets {
grid-template-columns: 1fr;
gap: var(--lh-space-sm);
}
/* Cards: single column on mobile */
.lh-safety-hub__cards {
grid-template-columns: 1fr;
}
/* 2-card variant: reset max-width on mobile */
.lh-safety-hub__cards--two {
max-width: none;
}
/* Buttons: full width stacked on mobile */
.lh-safety-hub__button-row {
flex-direction: column;
}
.lh-safety-hub__button-row .lh-btn {
width: 100%;
min-width: unset;
}
/* Icon grid: single column on mobile */
.lh-safety-hub__icon-grid {
grid-template-columns: 1fr;
}
/* Callout: stack on mobile */
.lh-safety-hub__callout {
flex-direction: column;
gap: var(--lh-space-md);
padding: var(--lh-space-lg);
}
.lh-safety-hub__callout-icon i {
font-size: 2rem;
}
/* FAQs use global .lh-faq-accordion responsive styles */
/* Related policies: stack on mobile */
.lh-safety-hub__related ul {
flex-direction: column;
gap: var(--lh-space-sm);
}
}
/* =============================================================================
Sibling Navigation (Homestay Categories cluster)
========================================================================== */
.lh-sibling-nav {
background: var(--lh-off-white);
}
.lh-sibling-nav__back {
margin-bottom: var(--lh-space-lg);
}
.lh-sibling-nav__heading {
font-family: var(--lh-font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-lg);
text-align: center;
}
/* Cards use existing .lh-card-grid and .lh-card styles */
.lh-sibling-nav .lh-card {
background: var(--lh-white);
}
.lh-sibling-nav .lh-card__body {
padding: var(--lh-space-md);
}
.lh-sibling-nav .lh-card__title {
font-size: 1.125rem;
margin: 0 0 var(--lh-space-xs);
}
.lh-sibling-nav .lh-card__text {
font-size: 0.9375rem;
color: var(--lh-grey-600);
margin: 0;
line-height: 1.5;
}
/* =============================================================================
Cross-links (Category ↔ Location Guide)
Bidirectional links between homestay categories and location guides.
========================================================================== */
.lh-crosslinks {
background: var(--lh-white);
}
.lh-crosslinks__heading {
font-family: var(--lh-font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
text-align: center;
}
.lh-crosslinks__intro {
font-size: 1rem;
color: var(--lh-grey-600);
margin: 0 0 var(--lh-space-lg);
text-align: center;
}
.lh-crosslinks .lh-card {
background: var(--lh-off-white);
}
.lh-crosslinks .lh-card__body {
padding: var(--lh-space-md);
}
.lh-crosslinks .lh-card__title {
font-size: 1.125rem;
margin: 0 0 var(--lh-space-xs);
}
.lh-crosslinks .lh-card__text {
font-size: 0.9375rem;
color: var(--lh-grey-600);
margin: 0;
line-height: 1.5;
}
/* Cross-links: Use flexbox to centre orphan items on last row */
.lh-crosslinks .lh-card-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--lh-space-lg);
}
.lh-crosslinks .lh-card-grid .lh-card {
flex: 0 1 calc(33.333% - var(--lh-space-lg));
min-width: 280px;
max-width: 360px;
}
/* Cross-links: 1-card layout — centred with max-width */
.lh-crosslinks--count-1 .lh-card-grid {
display: block;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.lh-crosslinks--count-1 .lh-card-grid .lh-card {
max-width: none;
}
/* Cross-links: 2-card layout — centred pair with constrained width */
.lh-crosslinks--count-2 .lh-card-grid {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.lh-crosslinks--count-2 .lh-card-grid .lh-card {
flex: 0 1 calc(50% - var(--lh-space-lg));
max-width: none;
}
/* =============================================================================
Style Guide (Programmatic)
Scoped styles for template-style-guide.php
========================================================================== */
.lh-styleguide__toc {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--lh-space-sm) var(--lh-space-lg);
font-size: 0.9375rem;
}
.lh-styleguide__toc strong {
color: var(--lh-primary-dark);
}
.lh-styleguide__toc a {
color: var(--lh-primary);
text-decoration: none;
}
.lh-styleguide__toc a:hover {
text-decoration: underline;
}
/* Subheadings within sections */
.lh-styleguide__subheading {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--lh-primary-dark);
margin: var(--lh-space-xl) 0 var(--lh-space-md);
}
.lh-styleguide__subheading:first-of-type {
margin-top: 0;
}
/* Color Swatches */
.lh-styleguide__swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--lh-space-lg);
}
.lh-styleguide__swatches--compact {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--lh-space-md);
}
.lh-styleguide__swatch {
text-align: center;
}
.lh-styleguide__swatch--compact {
text-align: left;
}
.lh-styleguide__swatch-box {
width: 100%;
height: 80px;
border-radius: var(--lh-radius-md);
margin-bottom: var(--lh-space-sm);
box-shadow: var(--lh-shadow-sm);
}
.lh-styleguide__swatch-box--sm {
height: 48px;
}
.lh-styleguide__swatch-info {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 0.8125rem;
}
.lh-styleguide__swatch-info strong {
color: var(--lh-primary-dark);
font-size: 0.875rem;
}
.lh-styleguide__swatch-info code {
font-size: 0.75rem;
color: var(--lh-grey-600);
background: var(--lh-grey-100);
padding: 2px 6px;
border-radius: 3px;
display: inline-block;
}
.lh-styleguide__swatch-info span {
color: var(--lh-grey-500);
font-family: monospace;
font-size: 0.75rem;
}
/* Example blocks */
.lh-styleguide__example {
background: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-md);
padding: var(--lh-space-lg);
margin-bottom: var(--lh-space-lg);
}
.lh-styleguide__example:last-child {
margin-bottom: 0;
}
.lh-styleguide__example-label {
font-family: var(--lh-font-heading);
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-grey-600);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 var(--lh-space-md);
padding-bottom: var(--lh-space-sm);
border-bottom: 1px solid var(--lh-grey-200);
}
/* Note text */
.lh-styleguide__note {
font-size: 0.9375rem;
color: var(--lh-grey-600);
margin-bottom: var(--lh-space-md);
}
/* Button row */
.lh-styleguide__button-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--lh-space-md);
}
/* Do/Don't Guidelines */
.lh-styleguide__guidelines {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--lh-space-xl);
}
.lh-styleguide__do,
.lh-styleguide__dont {
background: var(--lh-white);
border-radius: var(--lh-radius-md);
padding: var(--lh-space-lg);
}
.lh-styleguide__do {
border-left: 4px solid #28a745;
}
.lh-styleguide__dont {
border-left: 4px solid var(--lh-secondary);
}
.lh-styleguide__do h3,
.lh-styleguide__dont h3 {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 var(--lh-space-md);
display: flex;
align-items: center;
gap: var(--lh-space-sm);
}
.lh-styleguide__do h3 {
color: #28a745;
}
.lh-styleguide__dont h3 {
color: var(--lh-secondary);
}
.lh-styleguide__do ul,
.lh-styleguide__dont ul {
list-style: none;
padding: 0;
margin: 0;
}
.lh-styleguide__do li,
.lh-styleguide__dont li {
font-size: 0.9375rem;
color: var(--lh-grey-700);
padding: var(--lh-space-xs) 0;
padding-left: 1.5rem;
position: relative;
}
.lh-styleguide__do li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
color: #28a745;
font-size: 0.75rem;
}
.lh-styleguide__dont li::before {
content: "\f00d";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
color: var(--lh-secondary);
font-size: 0.75rem;
}
/* Deprecated/Legacy section */
.lh-styleguide__example--deprecated {
border-left: 4px solid var(--lh-secondary);
background: #fff5f5;
}
.lh-styleguide__deprecated-badge {
display: inline-block;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 8px;
border-radius: 3px;
background: var(--lh-secondary);
color: white;
margin-right: var(--lh-space-sm);
vertical-align: middle;
}
.lh-styleguide__migration {
background: var(--lh-grey-100);
border-radius: var(--lh-radius-sm);
padding: var(--lh-space-md);
margin-top: var(--lh-space-md);
font-size: 0.875rem;
}
.lh-styleguide__migration strong {
color: var(--lh-primary-dark);
}
.lh-styleguide__migration pre {
margin: var(--lh-space-sm) 0 0;
padding: var(--lh-space-sm);
background: var(--lh-white);
border-radius: var(--lh-radius-sm);
font-size: 0.8125rem;
overflow-x: auto;
}
.lh-styleguide__migration code {
background: none;
padding: 0;
}
/* Responsive */
@media (max-width: 767px) {
.lh-styleguide__guidelines {
grid-template-columns: 1fr;
}
.lh-styleguide__swatches {
grid-template-columns: repeat(2, 1fr);
}
.lh-styleguide__button-row {
flex-direction: column;
align-items: flex-start;
}
}
/* ==========================================================================
Pricing Page Components (.lh-pricing-*)
Scoped to /accommodation-prices/ page content.
========================================================================== */
/* Parent/Under-18 Callout Box
Visually distinct info box for safeguarding messaging.
-------------------------------------------------------------------------- */
.lh-pricing-callout {
display: flex;
gap: var(--lh-space-lg);
background: linear-gradient(135deg, var(--lh-magenta-50) 0%, #fef7ff 100%);
border: 1px solid rgba(230, 0, 126, 0.15);
border-left: 4px solid var(--lh-magenta);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-xl);
margin: var(--lh-space-xl) 0;
}
.lh-pricing-callout--parent {
background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
border-left-color: var(--lh-primary);
border-color: rgba(34, 148, 210, 0.2);
}
.lh-pricing-callout__icon {
flex-shrink: 0;
}
.lh-pricing-callout__icon i {
font-size: 2.5rem;
color: var(--lh-primary);
}
.lh-pricing-callout--parent .lh-pricing-callout__icon i {
color: var(--lh-primary);
}
.lh-pricing-callout__content {
flex: 1;
}
.lh-pricing-callout__title {
font-family: var(--lh-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-md);
}
.lh-pricing-callout__content p {
color: var(--lh-grey-700);
margin-bottom: var(--lh-space-sm);
line-height: 1.6;
}
.lh-pricing-callout__content p:last-of-type {
margin-bottom: 0;
}
.lh-pricing-callout__content .lh-btn {
margin-top: var(--lh-space-md);
}
/* Mobile: stack vertically */
@media (max-width: 575px) {
.lh-pricing-callout {
flex-direction: column;
gap: var(--lh-space-md);
padding: var(--lh-space-lg);
}
.lh-pricing-callout__icon i {
font-size: 2rem;
}
.lh-pricing-callout__title {
font-size: 1.125rem;
}
}
/* Soft Estimate Messaging List
Text-only list showing what conditions apply, no calculations.
-------------------------------------------------------------------------- */
.lh-pricing-estimate {
background: var(--lh-grey-50);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-lg);
margin: var(--lh-space-lg) 0;
}
.lh-pricing-estimate__item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--lh-space-sm);
padding: var(--lh-space-md) 0;
border-bottom: 1px solid var(--lh-grey-200);
}
.lh-pricing-estimate__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.lh-pricing-estimate__item:first-child {
padding-top: 0;
}
.lh-pricing-estimate__label {
font-weight: 600;
color: var(--lh-primary-dark);
display: flex;
align-items: center;
gap: var(--lh-space-sm);
}
.lh-pricing-estimate__label i {
color: var(--lh-primary);
width: 20px;
text-align: center;
}
.lh-pricing-estimate__value {
font-size: 0.875rem;
font-weight: 500;
color: var(--lh-primary-dark);
background: rgba(230, 0, 126, 0.08);
padding: var(--lh-space-xs) var(--lh-space-md);
border-radius: 100px;
border: 1px solid var(--lh-magenta);
}
/* Mobile: stack label and value */
@media (max-width: 575px) {
.lh-pricing-estimate__item {
flex-direction: column;
align-items: flex-start;
gap: var(--lh-space-xs);
}
.lh-pricing-estimate__label {
font-size: 0.9375rem;
}
.lh-pricing-estimate__value {
width: 100%;
text-align: center;
}
}
/* Final CTA Section
Prominent call-to-action for Zoho form.
-------------------------------------------------------------------------- */
.lh-pricing-cta {
background: linear-gradient(135deg, var(--lh-primary-dark) 0%, #001a4d 100%);
color: var(--lh-white);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-2xl) var(--lh-space-xl);
margin: var(--lh-space-xl) 0;
text-align: center;
}
.lh-pricing-cta h3 {
font-family: var(--lh-font-heading);
font-size: 1.5rem;
font-weight: 800;
color: var(--lh-white);
margin: 0 0 var(--lh-space-md);
}
.lh-pricing-cta p {
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin: 0 auto var(--lh-space-lg);
line-height: 1.6;
}
.lh-pricing-cta__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--lh-space-md);
}
/* Override secondary button for dark background - filled white for contrast
Must beat base selector .lh-btn.lh-btn--secondary which uses !important */
.lh-pricing-cta .lh-btn.lh-btn--secondary,
.lh-pricing-cta .lh-btn.lh-btn--secondary:link,
.lh-pricing-cta .lh-btn.lh-btn--secondary:visited,
.lh-pricing-cta a.lh-btn.lh-btn--secondary,
.lh-pricing-cta a.lh-btn.lh-btn--secondary:link,
.lh-pricing-cta a.lh-btn.lh-btn--secondary:visited {
background: rgba(255, 255, 255, 0.15);
border: 2px solid var(--lh-white);
color: var(--lh-white) !important;
}
.lh-pricing-cta .lh-btn.lh-btn--secondary:hover,
.lh-pricing-cta .lh-btn.lh-btn--secondary:focus,
.lh-pricing-cta a.lh-btn.lh-btn--secondary:hover,
.lh-pricing-cta a.lh-btn.lh-btn--secondary:focus {
background: var(--lh-white);
border-color: var(--lh-white);
color: var(--lh-primary-dark) !important;
}
/* Mobile: stack buttons */
@media (max-width: 575px) {
.lh-pricing-cta {
padding: var(--lh-space-xl) var(--lh-space-lg);
}
.lh-pricing-cta h3 {
font-size: 1.25rem;
}
.lh-pricing-cta__buttons {
flex-direction: column;
}
.lh-pricing-cta__buttons .lh-btn {
width: 100%;
justify-content: center;
}
}
/* Lead Text + Note Utilities (Phase 2A-3)
Used on How It Works intro section.
-------------------------------------------------------------------------- */
.lh-lead-text {
font-size: 1.125rem;
line-height: 1.7;
color: var(--lh-grey-700);
margin-bottom: var(--lh-space-md);
}
.lh-note {
font-size: 0.9375rem;
padding: var(--lh-space-md);
border-radius: var(--lh-radius-sm);
margin: 0;
}
.lh-note--info {
background: var(--lh-blue-50, #e8f4fc);
border-left: 3px solid var(--lh-blue-500, #0077b6);
color: var(--lh-grey-700);
}
.lh-note--info a {
color: var(--lh-primary);
font-weight: 500;
}
.lh-link-arrow {
color: var(--lh-primary);
font-weight: 500;
text-decoration: none;
}
.lh-link-arrow:hover {
text-decoration: underline;
}
.lh-link-arrow i {
margin-left: 0.25em;
transition: transform 0.2s ease;
}
.lh-link-arrow:hover i {
transform: translateX(3px);
}
/* Worked Example Block
Illustrative budget calculation for pricing page.
Rendered via lh_render_homestay_info_nav() for page 862.
-------------------------------------------------------------------------- */
.lh-worked-example {
background: var(--lh-grey-50);
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-xl);
}
.lh-worked-example__intro {
text-align: center;
color: var(--lh-grey-600);
max-width: 600px;
margin: 0 auto var(--lh-space-lg);
}
.lh-worked-example__card {
background: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-lg);
margin-bottom: var(--lh-space-lg);
box-shadow: var(--lh-shadow-sm);
}
.lh-worked-example__scenario h3 {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-md);
display: flex;
align-items: center;
gap: var(--lh-space-sm);
}
.lh-worked-example__scenario h3 i {
color: var(--lh-primary);
}
.lh-worked-example__breakdown {
border-top: 1px solid var(--lh-grey-200);
padding-top: var(--lh-space-md);
}
.lh-worked-example__line {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--lh-space-sm) 0;
}
.lh-worked-example__label {
color: var(--lh-grey-700);
}
.lh-worked-example__value {
font-weight: 600;
color: var(--lh-primary-dark);
font-family: var(--lh-font-heading);
}
.lh-worked-example__line--total {
border-top: 2px solid var(--lh-primary);
margin-top: var(--lh-space-sm);
padding-top: var(--lh-space-md);
}
.lh-worked-example__line--total .lh-worked-example__label {
font-weight: 700;
color: var(--lh-primary-dark);
}
.lh-worked-example__line--total .lh-worked-example__value {
font-size: 1.25rem;
color: var(--lh-primary);
}
.lh-worked-example__note {
font-size: 0.875rem;
color: var(--lh-grey-600);
background: var(--lh-grey-50);
padding: var(--lh-space-md);
border-radius: var(--lh-radius-sm);
margin: var(--lh-space-md) 0 0;
border-left: 3px solid var(--lh-grey-300);
}
.lh-worked-example__zones {
background: var(--lh-white);
border: 1px solid var(--lh-grey-200);
border-radius: var(--lh-radius-lg);
padding: var(--lh-space-lg);
box-shadow: var(--lh-shadow-sm);
}
.lh-worked-example__zones h3 {
font-family: var(--lh-font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
display: flex;
align-items: center;
gap: var(--lh-space-sm);
}
.lh-worked-example__zones h3 i {
color: var(--lh-primary);
}
.lh-worked-example__zones p {
color: var(--lh-grey-700);
margin: 0;
line-height: 1.6;
}
.lh-worked-example__zones a {
color: var(--lh-primary);
font-weight: 500;
}
/* Mobile: adjust spacing */
@media (max-width: 575px) {
.lh-worked-example__card,
.lh-worked-example__zones {
padding: var(--lh-space-md);
}
.lh-worked-example__scenario h3 {
font-size: 1rem;
flex-wrap: wrap;
}
.lh-worked-example__line {
flex-direction: column;
align-items: flex-start;
gap: var(--lh-space-xs);
}
.lh-worked-example__line--total {
flex-direction: row;
align-items: center;
}
}
/* ==========================================================================
Dark Context Utility (.lh-on-dark)
Apply to any dark-background container to auto-invert button/text colors.
Prevents recurring contrast issues with secondary buttons on dark sections.
Usage:
========================================================================== */
.lh-on-dark {
color: var(--lh-white);
}
/* Secondary button: light-on-dark variant
Must beat base selector .lh-btn.lh-btn--secondary which uses !important */
.lh-on-dark .lh-btn.lh-btn--secondary,
.lh-on-dark .lh-btn.lh-btn--secondary:link,
.lh-on-dark .lh-btn.lh-btn--secondary:visited,
.lh-on-dark a.lh-btn.lh-btn--secondary,
.lh-on-dark a.lh-btn.lh-btn--secondary:link,
.lh-on-dark a.lh-btn.lh-btn--secondary:visited {
background: rgba(255, 255, 255, 0.15);
border: 2px solid var(--lh-white);
color: var(--lh-white) !important;
}
.lh-on-dark .lh-btn.lh-btn--secondary:hover,
.lh-on-dark .lh-btn.lh-btn--secondary:focus,
.lh-on-dark a.lh-btn.lh-btn--secondary:hover,
.lh-on-dark a.lh-btn.lh-btn--secondary:focus {
background: var(--lh-white);
border-color: var(--lh-white);
color: var(--lh-primary-dark) !important;
}
/* Primary button on dark: ensure it stays prominent */
.lh-on-dark .lh-btn--primary,
.lh-on-dark .lh-btn.lh-btn--primary {
/* Primary already uses solid magenta/blue - just ensure text contrast */
color: var(--lh-white) !important;
}
/* Links within dark context */
.lh-on-dark a:not(.lh-btn) {
color: var(--lh-white);
text-decoration: underline;
}
.lh-on-dark a:not(.lh-btn):hover {
color: rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
Stacked Card Layouts (.lh-card-stack)
Vertical full-width cards with horizontal image/icon + content layout.
Used on pricing page for category and factor cards.
========================================================================== */
/* Container: vertical stack, full width */
.lh-card-stack {
display: flex;
flex-direction: column;
gap: var(--lh-space-lg);
}
/* Vertical card with full-width image on top - modifier for .lh-card */
.lh-card.lh-card--image-top {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.lh-card--image-top .lh-card__image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
background-color: var(--lh-grey-100);
}
.lh-card--image-top .lh-card__content {
display: flex;
flex-direction: column;
padding: var(--lh-space-lg);
}
.lh-card--image-top .lh-card__title {
font-family: var(--lh-font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-xs);
}
.lh-card--image-top .lh-card__price {
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-magenta);
margin: 0 0 var(--lh-space-sm);
}
.lh-card--image-top .lh-card__body {
color: var(--lh-grey-700);
line-height: 1.6;
margin: 0 0 var(--lh-space-md);
}
.lh-card--image-top .lh-card__footer {
margin-top: auto;
}
.lh-card--image-top .lh-card__footer a {
color: var(--lh-primary);
font-weight: 600;
text-decoration: none;
}
.lh-card--image-top .lh-card__footer a:hover {
text-decoration: underline;
}
/* Horizontal card with icon on left - modifier for .lh-card */
.lh-card.lh-card--horizontal-icon {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--lh-space-lg);
padding: var(--lh-space-lg) var(--lh-space-xl);
}
.lh-card--horizontal-icon .lh-card__icon {
flex-shrink: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(230, 0, 126, 0.08);
border-radius: var(--lh-radius-md);
}
.lh-card--horizontal-icon .lh-card__icon i {
font-size: 1.5rem;
color: var(--lh-magenta);
}
.lh-card--horizontal-icon .lh-card__content {
flex: 1;
}
.lh-card--horizontal-icon .lh-card__title {
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-xs);
}
.lh-card--horizontal-icon .lh-card__body {
color: var(--lh-grey-700);
line-height: 1.6;
margin: 0;
}
/* Mobile adjustments */
@media (max-width: 767px) {
.lh-card--image-top .lh-card__image {
height: 160px;
}
.lh-card--horizontal-icon {
gap: var(--lh-space-md);
padding: var(--lh-space-lg);
}
.lh-card--horizontal-icon .lh-card__icon {
width: 48px;
height: 48px;
}
.lh-card--horizontal-icon .lh-card__icon i {
font-size: 1.25rem;
}
.lh-card--horizontal-icon .lh-card__title {
font-size: 1rem;
}
}
/* ==========================================================================
Journey-Specific Hero Background Accents
==========================================================================
Each journey has a subtle gradient overlay on the dark navy hero background.
This provides visual differentiation while maintaining brand consistency.
Targeting strategy:
- Hub pages: Template-based selectors (always work)
- Descendant pages: ACF-based body class (lh-journey-*) from lh_breadcrumb_hub field
The lh-journey-* classes are output by londonhomestays_child_body_class() in functions.php.
Pages with lh_breadcrumb_hub = 'none' or 'safety' do NOT get journey classes.
Technique: Layered backgrounds — colored overlay on dark navy base.
All gradients use !important to override inline styles from templates.
========================================================================== */
/* ---------------------------------------------------------------------------
Students Journey — Cyan-tinted (#2294D2)
Matches the Students journey color cue from homepage.
--------------------------------------------------------------------------- */
/* Students hub page (template-based) */
body.page-template-template-journey-students .lh-journey-hero {
background:
linear-gradient(135deg, rgba(34, 148, 210, 0.38) 0%, rgba(34, 148, 210, 0.18) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001530 100%) !important;
}
/* Students journey pages (ACF-based: lh_breadcrumb_hub = students/location-guides/homestay-categories) */
body.lh-journey-students .lh-page-hero,
body.lh-journey-students .lh-journey-hero,
body.page-template-template-students-resources .lh-page-hero,
body.page-template-template-homestay-categories .lh-page-hero,
body.page-template-template-location-guides-hub .lh-page-hero,
body.page-template-template-location-guide .lh-page-hero {
background:
linear-gradient(135deg, rgba(34, 148, 210, 0.38) 0%, rgba(34, 148, 210, 0.18) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001530 100%) !important;
}
/* ---------------------------------------------------------------------------
Hosts Journey — Magenta-tinted (#E6007E)
Matches the Hosts journey color cue from homepage.
--------------------------------------------------------------------------- */
/* Hosts hub page (template-based) */
body.page-template-template-journey-hosts .lh-journey-hero {
background:
linear-gradient(135deg, rgba(230, 0, 126, 0.22) 0%, rgba(230, 0, 126, 0.06) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #08001c 100%) !important;
}
/* Hosts journey pages (ACF-based: lh_breadcrumb_hub = hosts) */
body.lh-journey-hosts .lh-page-hero,
body.lh-journey-hosts .lh-journey-hero {
background:
linear-gradient(135deg, rgba(230, 0, 126, 0.22) 0%, rgba(230, 0, 126, 0.06) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #08001c 100%) !important;
}
/* ---------------------------------------------------------------------------
Partners Journey — Grey-blue tinted
Professional, desaturated tone suitable for B2B audience.
--------------------------------------------------------------------------- */
/* Partners hub page (template-based) */
body.page-template-template-journey-partners .lh-journey-hero {
background:
linear-gradient(135deg, rgba(100, 130, 160, 0.30) 0%, rgba(80, 100, 130, 0.12) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001020 100%) !important;
}
/* Partners journey pages (ACF-based: lh_breadcrumb_hub = partners) */
body.lh-journey-partners .lh-page-hero,
body.lh-journey-partners .lh-journey-hero {
background:
linear-gradient(135deg, rgba(100, 130, 160, 0.30) 0%, rgba(80, 100, 130, 0.12) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001020 100%) !important;
}
/* ---------------------------------------------------------------------------
Groups Journey — Blue-grey/teal tinted
Slightly cooler than Students, professional group booking tone.
Uses template-based selectors (Groups has dedicated templates).
--------------------------------------------------------------------------- */
/* Groups landing page */
body.page-template-template-groups-landing .lh-groups-landing__hero {
background:
linear-gradient(135deg, rgba(50, 120, 150, 0.30) 0%, rgba(40, 90, 120, 0.12) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001525 100%) !important;
}
/* Groups hub pages (London, England, UK) */
body.page-template-template-groups-hub .lh-page-hero {
background:
linear-gradient(135deg, rgba(50, 120, 150, 0.30) 0%, rgba(40, 90, 120, 0.12) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001525 100%) !important;
}
/* Groups location pages */
body.page-template-template-groups-location .lh-groups-location__hero {
background:
linear-gradient(135deg, rgba(50, 120, 150, 0.30) 0%, rgba(40, 90, 120, 0.12) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001525 100%) !important;
}
/* Groups journey pages (ACF-based fallback: lh_breadcrumb_hub = groups) */
body.lh-journey-groups .lh-page-hero,
body.lh-journey-groups .lh-journey-hero {
background:
linear-gradient(135deg, rgba(50, 120, 150, 0.30) 0%, rgba(40, 90, 120, 0.12) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #001525 100%) !important;
}
/* ---------------------------------------------------------------------------
Guardianship Journey — Warm purple-navy tinted
Serious, reassuring tone appropriate for safeguarding content.
--------------------------------------------------------------------------- */
/* Guardianship hub page (page ID 864) */
body.page-id-864 .lh-page-hero {
background:
linear-gradient(135deg, rgba(120, 60, 100, 0.25) 0%, rgba(80, 40, 70, 0.10) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #080018 100%) !important;
}
/* Guardianship journey pages (ACF-based: lh_breadcrumb_hub = guardianship) */
body.lh-journey-guardianship .lh-page-hero,
body.lh-journey-guardianship .lh-journey-hero {
background:
linear-gradient(135deg, rgba(120, 60, 100, 0.25) 0%, rgba(80, 40, 70, 0.10) 100%),
linear-gradient(135deg, var(--lh-primary-dark) 0%, #080018 100%) !important;
}
/* ==========================================================================
Hosts Landing Page Phase A Enhancements
@since 2.99.2
========================================================================== */
/* Hero CTAs wrapper */
.lh-journey-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--lh-space-sm);
align-items: center;
}
/* Hero secondary button on dark bg */
.lh-journey-hero .lh-btn--secondary,
.lh-journey-hero .lh-btn--secondary:link,
.lh-journey-hero .lh-btn--secondary:visited {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.6);
color: var(--lh-white) !important;
}
.lh-journey-hero .lh-btn--secondary:hover,
.lh-journey-hero .lh-btn--secondary:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--lh-white);
color: var(--lh-white) !important;
}
/* Hero reassurance line */
.lh-journey-hero__reassurance {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
margin: 0;
max-width: 420px;
}
/* ---------------------------------------------------------------------------
Intro Text Centering (global utility)
--------------------------------------------------------------------------- */
.lh-intro {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--lh-grey-700);
line-height: 1.6;
margin: 0 0 var(--lh-space-lg);
}
.lh-intro--center {
text-align: center;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------------------------------
Trust Cards (home-info-bar style) — under hero
--------------------------------------------------------------------------- */
.lh-section--trust-strip {
background: linear-gradient(rgb(245, 247, 251) 0%, rgb(255, 255, 255) 70%);
padding: 24px 0 20px;
border-bottom: 1px solid var(--lh-grey-200);
}
.lh-trust-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.lh-trust-cards__item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: var(--lh-white);
border: 1px solid rgba(9, 26, 63, 0.08);
border-radius: 16px;
box-shadow: 0px 10px 24px 0px rgba(9, 26, 63, 0.06);
transition: box-shadow var(--lh-transition-fast), transform var(--lh-transition-fast);
}
.lh-trust-cards__item:hover {
box-shadow: 0px 12px 28px 0px rgba(9, 26, 63, 0.1);
transform: translateY(-2px);
}
.lh-trust-cards__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--lh-magenta);
}
.lh-trust-cards__icon i {
font-size: 28px;
line-height: 1;
}
.lh-trust-cards__text {
flex: 1;
min-width: 0;
}
.lh-trust-cards__title {
display: block;
font-family: var(--lh-font-sans);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--lh-primary-dark);
margin-bottom: 4px;
}
.lh-trust-cards__desc {
display: block;
font-family: var(--lh-font-sans);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: #49536a;
}
.lh-trust-cards__desc a,
body.lh-ukse-skin .lh-trust-cards__desc a {
display: inline-flex;
align-items: center;
gap: 4px;
color: #177AB0 !important; /* a11y: darkened from var(--lh-primary) #2294D2 for WCAG AA contrast (4.72:1), !important overrides body.lh-ukse-skin a */
text-decoration: none;
font-weight: 500;
transition: color var(--lh-transition-fast);
}
.lh-trust-cards__desc a:hover {
color: var(--lh-primary-dark);
}
.lh-trust-cards__desc a i {
font-size: 10px;
transition: transform var(--lh-transition-fast);
}
.lh-trust-cards__desc a:hover i {
transform: translateX(3px);
}
/* Tablet: 2x2 grid */
@media (max-width: 1199px) {
.lh-trust-cards {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* Mobile: single column */
@media (max-width: 640px) {
.lh-section--trust-strip {
padding: 20px 0 16px;
}
.lh-trust-cards {
grid-template-columns: 1fr;
gap: 12px;
}
.lh-trust-cards__item {
padding: 12px 14px;
}
.lh-trust-cards__icon {
width: 36px;
height: 36px;
}
.lh-trust-cards__icon i {
font-size: 24px;
}
}
/* ---------------------------------------------------------------------------
Eligibility & What Hosting Sections (Enhanced)
--------------------------------------------------------------------------- */
.lh-section--eligibility {
background: linear-gradient(135deg, rgba(230, 0, 126, 0.08), rgba(255, 248, 242, 0.5));
}
.lh-section--what-hosting {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
/* Enhanced checklist card styling */
.lh-checklist--eligibility,
.lh-checklist--what-hosting {
max-width: 640px;
margin: var(--lh-space-lg) auto 0;
padding: var(--lh-space-lg);
background: var(--lh-white);
border: 1px solid rgba(9, 26, 63, 0.08);
border-radius: 16px;
box-shadow: 0px 8px 20px 0px rgba(9, 26, 63, 0.05);
}
.lh-checklist--eligibility .lh-checklist__item,
.lh-checklist--what-hosting .lh-checklist__item {
padding: var(--lh-space-sm) 0;
border-bottom: 1px solid var(--lh-grey-100);
}
.lh-checklist--eligibility .lh-checklist__item:last-child,
.lh-checklist--what-hosting .lh-checklist__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.lh-checklist--eligibility .lh-checklist__item:first-child,
.lh-checklist--what-hosting .lh-checklist__item:first-child {
padding-top: 0;
}
.lh-checklist--eligibility .lh-checklist__item i,
.lh-checklist--what-hosting .lh-checklist__item i {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(230, 0, 126, 0.1);
border-radius: 50%;
color: var(--lh-magenta);
font-size: 12px;
}
.lh-checklist--eligibility .lh-checklist__item span,
.lh-checklist--what-hosting .lh-checklist__item span {
font-size: 0.9375rem;
color: var(--lh-grey-800);
line-height: 1.5;
}
/* Signpost section checklist */
.lh-checklist--signpost {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* Mobile adjustments for checklists */
@media (max-width: 640px) {
.lh-checklist--eligibility,
.lh-checklist--what-hosting {
padding: var(--lh-space-md);
margin-top: var(--lh-space-md);
}
.lh-checklist--eligibility .lh-checklist__item span,
.lh-checklist--what-hosting .lh-checklist__item span {
font-size: 0.875rem;
}
}
/* Microcopy helper text */
.lh-microcopy {
font-size: 0.8125rem;
color: var(--lh-grey-600);
line-height: 1.5;
margin-top: var(--lh-space-lg);
}
.lh-microcopy--center {
text-align: center;
}
.lh-microcopy a {
color: var(--lh-primary);
text-decoration: none;
}
.lh-microcopy a:hover {
text-decoration: underline;
}
/* ---------------------------------------------------------------------------
Video Band CTAs
--------------------------------------------------------------------------- */
.lh-video-band__ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--lh-space-sm);
margin-top: var(--lh-space-lg);
}
/* ---------------------------------------------------------------------------
16-17 Signpost Section (Enhanced Card Design)
--------------------------------------------------------------------------- */
.lh-section--signpost-u18 {
background: linear-gradient(180deg, #fdf8f4 0%, #fff9f5 100%);
padding: var(--lh-space-xl) 0;
}
.lh-signpost-card {
display: flex;
gap: var(--lh-space-lg);
max-width: 800px;
margin: 0 auto;
padding: var(--lh-space-xl);
background: var(--lh-white);
border: 1px solid rgba(230, 0, 126, 0.15);
border-radius: 20px;
box-shadow: 0px 12px 32px 0px rgba(230, 0, 126, 0.08);
}
.lh-signpost-card__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: linear-gradient(135deg, rgba(230, 0, 126, 0.12) 0%, rgba(230, 0, 126, 0.06) 100%);
border-radius: 16px;
color: var(--lh-magenta);
}
.lh-signpost-card__icon i {
font-size: 28px;
}
.lh-signpost-card__content {
flex: 1;
min-width: 0;
}
.lh-signpost-card__title {
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-sm);
line-height: 1.3;
}
.lh-signpost-card__intro {
font-size: 0.9375rem;
color: var(--lh-grey-700);
line-height: 1.6;
margin: 0 0 var(--lh-space-md);
}
.lh-signpost-card__list {
list-style: none;
padding: 0;
margin: 0 0 var(--lh-space-lg);
display: flex;
flex-direction: column;
gap: var(--lh-space-sm);
}
.lh-signpost-card__list li {
display: flex;
align-items: flex-start;
gap: var(--lh-space-sm);
font-size: 0.9375rem;
color: var(--lh-grey-800);
line-height: 1.5;
}
.lh-signpost-card__list li i {
flex-shrink: 0;
color: var(--lh-magenta);
font-size: 1rem;
margin-top: 2px;
}
.lh-signpost-card__link,
body.lh-ukse-skin a.lh-signpost-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9375rem;
font-weight: 600;
color: #D4006F !important; /* a11y: darkened from var(--lh-magenta) for WCAG AA contrast (5.21:1), !important overrides body.lh-ukse-skin a */
text-decoration: none;
transition: color var(--lh-transition-fast);
}
.lh-signpost-card__link:hover {
color: var(--lh-primary-dark);
}
.lh-signpost-card__link i {
font-size: 12px;
transition: transform var(--lh-transition-fast);
}
.lh-signpost-card__link:hover i {
transform: translateX(4px);
}
/* Mobile: stack layout */
@media (max-width: 640px) {
.lh-signpost-card {
flex-direction: column;
padding: var(--lh-space-lg);
gap: var(--lh-space-md);
}
.lh-signpost-card__icon {
width: 56px;
height: 56px;
}
.lh-signpost-card__icon i {
font-size: 24px;
}
.lh-signpost-card__title {
font-size: 1.25rem;
}
}
/* ---------------------------------------------------------------------------
Post-Testimonials CTA Section
--------------------------------------------------------------------------- */
.lh-section--post-testimonials-cta {
background: var(--lh-off-white);
padding: var(--lh-space-xl) 0;
}
.lh-section--post-testimonials-cta .lh-journey__cta-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--lh-space-sm);
margin-top: var(--lh-space-lg);
}
/* ---------------------------------------------------------------------------
Final CTA Strip Enhancements
--------------------------------------------------------------------------- */
.lh-strip--final .lh-strip__action--multi {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--lh-space-sm);
}
.lh-strip--final .lh-strip__contact-link {
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
text-decoration: underline;
}
.lh-strip--final .lh-strip__contact-link:hover {
color: var(--lh-white);
}
/* Secondary button on dark CTA strip */
.lh-strip--cta .lh-btn--secondary.lh-btn--on-dark,
.lh-strip--cta .lh-btn--secondary.lh-btn--on-dark:link,
.lh-strip--cta .lh-btn--secondary.lh-btn--on-dark:visited {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.6);
color: var(--lh-white) !important;
}
.lh-strip--cta .lh-btn--secondary.lh-btn--on-dark:hover,
.lh-strip--cta .lh-btn--secondary.lh-btn--on-dark:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--lh-white);
color: var(--lh-white) !important;
}
/* Privacy microcopy in final strip */
.lh-strip__privacy {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
margin-top: var(--lh-space-lg);
text-align: center;
}
.lh-strip__privacy a {
color: rgba(255, 255, 255, 0.8);
text-decoration: underline;
}
.lh-strip__privacy a:hover {
color: var(--lh-white);
}
@media (max-width: 767px) {
.lh-strip--final .lh-strip__action--multi {
flex-direction: column;
width: 100%;
}
.lh-strip--final .lh-strip__action--multi .lh-btn {
width: 100%;
text-align: center;
}
}
/* ==========================================================================
Site Search — Nav Trigger
========================================================================== */
/* Desktop: hide text, show magnifying glass icon */
.header_nav .nav.top-nav > li.menu-item-search-trigger > a {
font-size: 0 !important; /* Override parent 13px !important */
line-height: 0;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.header_nav .nav.top-nav > li.menu-item-search-trigger > a::before {
content: '\f002'; /* fa-magnifying-glass */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 1rem;
line-height: 1;
color: var(--lh-primary-dark);
transition: color 0.3s ease;
}
.header_nav .nav.top-nav > li.menu-item-search-trigger > a:hover::before,
.header_nav .nav.top-nav > li.menu-item-search-trigger > a:focus::before {
color: var(--lh-magenta);
}
/* Suppress gradient underline on search trigger */
.header_nav .nav.top-nav > li.menu-item-search-trigger > a::after {
display: none;
}
/* Focus-visible ring for accessibility */
.header_nav .nav.top-nav > li.menu-item-search-trigger > a:focus-visible {
outline: 2px solid var(--lh-magenta);
outline-offset: 2px;
border-radius: var(--lh-radius-sm);
}
/* ==========================================================================
Site Search — Mobile Nav Trigger
========================================================================== */
/* Mobile drawer: show icon + text inline */
.mobile-primary-menu li.menu-item-search-trigger a {
font-size: 1rem;
}
.mobile-primary-menu li.menu-item-search-trigger a::before {
content: '\f002';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 0.5em;
font-size: 1rem;
}
/* ==========================================================================
Site Search — Search Form (.lh-search-form)
========================================================================== */
.lh-search-form {
max-width: 480px;
width: 100%;
}
.lh-search-form__field {
display: flex;
border-radius: var(--lh-radius-full);
border: 2px solid var(--lh-grey-300);
background: #fff;
overflow: hidden;
transition: border-color 0.2s ease;
}
.lh-search-form__field:focus-within {
border-color: var(--lh-magenta);
}
.lh-search-form__input {
flex: 1;
border: none;
padding: 0.75rem 1.25rem;
font-size: 1rem;
color: var(--lh-primary-dark);
background: transparent;
outline: none;
min-width: 0;
}
.lh-search-form__input::placeholder {
color: var(--lh-grey-400);
}
.lh-search-form__submit {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
border: none;
background: var(--lh-magenta);
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease;
flex-shrink: 0;
}
.lh-search-form__submit i {
color: #fff;
}
.lh-search-form__submit:hover,
.lh-search-form__submit:focus {
background: #c40069; /* Darker magenta */
}
.lh-search-form__submit:focus-visible {
outline: 2px solid #fff;
outline-offset: -4px;
}
/* Hero-scoped form overrides (dark background) */
.lh-search-page__hero-form .lh-search-form__field {
border-color: rgba(255, 255, 255, 0.35);
}
.lh-search-page__hero-form .lh-search-form__field:focus-within {
border-color: var(--lh-magenta);
}
.lh-search-page__hero-form .lh-search-form__input {
color: var(--lh-primary-dark);
}
.lh-search-page__hero-form .lh-search-form__input::placeholder {
color: var(--lh-grey-400);
}
/* ==========================================================================
Site Search — Results Page (.lh-search-page)
========================================================================== */
/* Search form inside hero */
.lh-search-page__hero-form {
margin-top: var(--lh-space-lg);
}
/* Result cards — link styling */
.lh-search-page__card {
display: block;
text-decoration: none;
color: inherit;
transition: border-color 0.2s ease;
}
.lh-search-page__card:hover,
.lh-search-page__card:focus {
border-color: var(--lh-magenta);
}
.lh-search-page__card .lh-card__title {
color: var(--lh-primary-dark);
transition: color 0.2s ease;
}
.lh-search-page__card:hover .lh-card__title,
.lh-search-page__card:focus .lh-card__title {
color: var(--lh-magenta);
}
/* Meta line (date + category) */
.lh-search-page__meta {
font-size: 0.8125rem;
color: var(--lh-grey-500);
margin: 0.25rem 0 0.5rem;
}
.lh-search-page__sep {
margin: 0 0.35em;
}
/* No-results state */
.lh-search-page__no-results {
text-align: center;
padding: var(--lh-space-xl) 0;
}
.lh-search-page__no-results p {
color: var(--lh-grey-500);
font-size: 1.0625rem;
margin-top: var(--lh-space-sm);
}
/* Single column on mobile for search cards */
@media (max-width: 599px) {
.lh-search-page .lh-card-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Partner Portal Access Request Form (v3.8.0)
Collapsible / card — collapsed by default.
========================================================================== */
.lh-section--portal-access {
background-color: var(--lh-blue-50);
border-bottom: 1px solid var(--lh-grey-200);
padding: var(--lh-space-2xl) 0;
}
/* is the card container */
.lh-portal-access {
max-width: 640px;
margin: 0 auto;
background: var(--lh-white);
border-radius: var(--lh-radius-lg);
box-shadow: var(--lh-shadow-md);
}
/* Summary row — clickable header */
.lh-portal-access__summary {
display: flex;
align-items: center;
gap: var(--lh-space-md);
padding: var(--lh-space-lg) var(--lh-space-xl);
cursor: pointer;
list-style: none; /* Remove default marker */
user-select: none;
}
.lh-portal-access__summary::-webkit-details-marker {
display: none;
}
.lh-portal-access__summary:hover {
background-color: var(--lh-blue-50);
border-radius: var(--lh-radius-lg);
}
.lh-portal-access__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--lh-radius-full);
background-color: var(--lh-blue-50);
color: var(--lh-primary);
font-size: 1.125rem;
}
.lh-portal-access__summary-text {
flex: 1;
min-width: 0;
}
.lh-portal-access__heading {
display: block;
font-family: var(--lh-font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark);
line-height: var(--lh-line-height-heading);
}
.lh-portal-access__intro {
display: block;
font-size: 0.875rem;
color: var(--lh-grey-600);
line-height: var(--lh-line-height-base);
margin-top: 2px;
}
/* Chevron rotates on open */
.lh-portal-access__chevron {
flex-shrink: 0;
color: var(--lh-grey-400);
font-size: 0.875rem;
transition: transform var(--lh-transition-base);
}
.lh-portal-access[open] .lh-portal-access__chevron {
transform: rotate(180deg);
}
/* Form area — revealed on expand */
.lh-portal-access__form {
padding: 0 var(--lh-space-xl) var(--lh-space-xl);
border-top: 1px solid var(--lh-grey-200);
margin-top: 0;
padding-top: var(--lh-space-lg);
}
.lh-portal-access__field {
margin-bottom: var(--lh-space-md);
}
.lh-portal-access__label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-grey-800);
margin-bottom: var(--lh-space-xs);
}
.lh-portal-access__input {
display: block;
width: 100%;
padding: 0.625rem 0.75rem;
font-family: var(--lh-font-sans);
font-size: 0.9375rem;
color: var(--lh-grey-900);
background-color: var(--lh-white);
border: 1.5px solid var(--lh-grey-300);
border-radius: var(--lh-radius-sm);
transition: border-color var(--lh-transition-fast), box-shadow var(--lh-transition-fast);
box-sizing: border-box;
}
.lh-portal-access__input:focus {
outline: none;
border-color: var(--lh-primary);
box-shadow: 0 0 0 3px rgba(34, 148, 210, 0.15);
}
.lh-portal-access__input::placeholder {
color: var(--lh-grey-400);
}
/* Honeypot — visually hidden, off-screen */
.lh-portal-access__hp {
position: absolute;
left: -9999px;
height: 0;
overflow: hidden;
}
.lh-portal-access__submit {
margin-top: var(--lh-space-sm);
}
.lh-portal-access__submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* Feedback messages */
.lh-portal-access__feedback:empty {
display: none;
}
.lh-portal-access__feedback {
margin-top: var(--lh-space-md);
padding: 0.75rem 1rem;
border-radius: var(--lh-radius-sm);
font-size: 0.875rem;
line-height: 1.5;
}
.lh-portal-access__feedback--success {
color: #155724;
background-color: #d4edda;
border: 1px solid #c3e6cb;
}
.lh-portal-access__feedback--error {
color: #721c24;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
}
/* Mobile adjustments */
@media (max-width: 599px) {
.lh-portal-access {
margin: 0 var(--lh-space-md);
}
.lh-portal-access__summary {
padding: var(--lh-space-md);
gap: var(--lh-space-sm);
}
.lh-portal-access__form {
padding: 0 var(--lh-space-md) var(--lh-space-lg);
padding-top: var(--lh-space-md);
}
.lh-portal-access__submit {
width: 100%;
}
}
/* ==========================================================================
Blog Single Post (UKSE-style redesign)
Full-width hero banner, article card, share buttons, prev/next nav,
redesigned sidebar with search, latest stories, topic pills, CTA.
========================================================================== */
/* Specificity override: neutralise body.lh-ukse-skin a for blog-single links */
body.lh-ukse-skin .blog-single__hero-banner a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
body.lh-ukse-skin .blog-single__hero-banner a:hover {
color: var(--lh-white);
}
body.lh-ukse-skin .blog-single__share a,
body.lh-ukse-skin .blog-single__footer a,
body.lh-ukse-skin .blog-single__post-nav a,
body.lh-ukse-skin .blog-sidebar a {
color: inherit;
text-decoration: none;
}
/* ------------------------------------------------------------------------- */
/* Hero Banner */
/* ------------------------------------------------------------------------- */
.blog-single__hero-banner {
position: relative;
min-height: 380px;
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.blog-single__hero-banner--no-image {
background-color: var(--lh-primary-dark);
min-height: 280px;
}
.blog-single__hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 50, 0.92) 0%,
rgba(0, 0, 50, 0.35) 100%
);
z-index: 1;
}
.blog-single__hero-banner--no-image .blog-single__hero-overlay {
background: none;
}
.blog-single__hero-inner {
position: relative;
z-index: 2;
padding: var(--lh-space-2xl) 0;
width: 100%;
}
/* Breadcrumb */
.blog-single__breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
margin-bottom: var(--lh-space-md);
}
.blog-single__breadcrumb a {
transition: color var(--lh-transition-fast);
}
.blog-single__breadcrumb-sep {
color: rgba(255, 255, 255, 0.7);
font-size: 0.75rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* Hero title */
.blog-single__title {
color: var(--lh-white);
font-family: var(--lh-font-heading);
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 700;
line-height: var(--lh-line-height-heading);
margin: 0 0 var(--lh-space-lg);
max-width: 800px;
}
/* Meta chips (frosted glass pills) */
.blog-single__meta {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.meta-chip--hero {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.875rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--lh-radius-full);
color: var(--lh-white);
font-size: 0.8125rem;
font-weight: 500;
text-decoration: none;
transition: background var(--lh-transition-fast);
line-height: 1.4;
}
.meta-chip--hero svg {
flex-shrink: 0;
opacity: 0.85;
}
a.meta-chip--hero:hover {
background: rgba(255, 255, 255, 0.25);
color: var(--lh-white);
}
/* ------------------------------------------------------------------------- */
/* Article Grid */
/* ------------------------------------------------------------------------- */
.blog-single__wrap {
padding-top: var(--lh-space-2xl);
padding-bottom: var(--lh-space-2xl);
}
.blog-single__grid {
display: flex;
gap: 48px;
align-items: flex-start;
}
.blog-single__main {
flex: 1;
min-width: 0;
}
/* Article card */
.blog-single__article {
background: var(--lh-white);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 50, 0.06);
padding: var(--lh-space-2xl);
margin-bottom: var(--lh-space-xl);
}
/* Content area — inherits from .lh-prose */
.blog-single__content {
margin-bottom: var(--lh-space-xl);
}
/* Remove duplicate featured image inside content if already in hero */
.blog-single__content > .wp-block-image:first-child,
.blog-single__content > figure:first-child {
/* Keep visible — some posts use inline images rather than featured */
}
/* ------------------------------------------------------------------------- */
/* Share Buttons */
/* ------------------------------------------------------------------------- */
.blog-single__share {
display: flex;
align-items: center;
gap: var(--lh-space-md);
padding-top: var(--lh-space-lg);
border-top: 1px solid var(--lh-grey-200);
}
.blog-single__share-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-primary-dark);
white-space: nowrap;
}
.blog-single__share-buttons {
display: flex;
gap: 0.5rem;
}
.blog-single__share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--lh-grey-100);
color: var(--lh-grey-700);
transition: all var(--lh-transition-fast);
text-decoration: none;
}
.blog-single__share-btn:hover {
color: var(--lh-white);
}
.blog-single__share-btn--x:hover {
background: #000;
}
.blog-single__share-btn--linkedin:hover {
background: #0A66C2;
}
.blog-single__share-btn--facebook:hover {
background: #1877F2;
}
.blog-single__share-btn--whatsapp:hover {
background: #25D366;
}
/* ------------------------------------------------------------------------- */
/* Tags */
/* ------------------------------------------------------------------------- */
.blog-single__footer {
padding-top: var(--lh-space-lg);
margin-top: var(--lh-space-lg);
border-top: 1px solid var(--lh-grey-200);
}
.blog-single__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.blog-single__tag {
display: inline-block;
padding: 0.25rem 0.75rem;
font-size: 0.8125rem;
background: var(--lh-grey-100);
color: var(--lh-grey-700);
border-radius: var(--lh-radius-full);
text-decoration: none;
transition: all var(--lh-transition-fast);
}
.blog-single__tag:hover {
background: var(--lh-magenta);
color: var(--lh-white);
}
/* ------------------------------------------------------------------------- */
/* Prev / Next Navigation */
/* ------------------------------------------------------------------------- */
.blog-single__post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--lh-space-lg);
}
.blog-single__post-nav-card {
display: flex;
align-items: center;
gap: var(--lh-space-md);
padding: var(--lh-space-md);
background: var(--lh-white);
border-radius: var(--lh-radius-lg);
box-shadow: 0 2px 8px rgba(0, 0, 50, 0.06);
text-decoration: none;
transition: box-shadow var(--lh-transition-fast), transform var(--lh-transition-fast);
}
.blog-single__post-nav-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 50, 0.1);
transform: translateY(-2px);
}
.blog-single__post-nav-card--prev {
grid-column: 1;
}
.blog-single__post-nav-card--next {
grid-column: 2;
text-align: right;
}
.blog-single__post-nav-thumb {
width: 72px;
height: 54px;
border-radius: var(--lh-radius-md);
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.blog-single__post-nav-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.blog-single__post-nav-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--lh-magenta);
}
.blog-single__post-nav-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--lh-primary-dark);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ------------------------------------------------------------------------- */
/* Sidebar */
/* ------------------------------------------------------------------------- */
.blog-single__sidebar {
flex-basis: 320px;
flex-shrink: 0;
position: sticky;
top: 100px;
align-self: flex-start;
}
.blog-sidebar {
display: flex;
flex-direction: column;
gap: var(--lh-space-lg);
}
/* Sidebar card */
.blog-sidebar-card {
background: var(--lh-white);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 50, 0.06);
padding: var(--lh-space-lg);
}
.blog-sidebar-card__title {
font-family: var(--lh-font-heading);
font-size: 1.0625rem;
font-weight: 700;
color: var(--lh-primary-dark);
margin: 0 0 var(--lh-space-md);
padding-bottom: var(--lh-space-sm);
border-bottom: 2px solid var(--lh-magenta);
}
/* Search form */
.blog-sidebar-search__wrap {
display: flex;
border: 1px solid var(--lh-grey-300);
border-radius: var(--lh-radius-md);
overflow: hidden;
transition: border-color var(--lh-transition-fast);
}
.blog-sidebar-search__wrap:focus-within {
border-color: var(--lh-primary);
}
.blog-sidebar-search__input {
flex: 1;
border: none;
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
outline: none;
background: transparent;
font-family: var(--lh-font-sans);
}
.blog-sidebar-search__btn {
border: none;
background: var(--lh-primary-dark);
color: var(--lh-white);
padding: 0.625rem 0.875rem;
cursor: pointer;
display: flex;
align-items: center;
transition: background var(--lh-transition-fast);
}
.blog-sidebar-search__btn:hover {
background: var(--lh-magenta);
}
/* Latest stories list (with thumbnails) */
.blog-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.blog-sidebar-list--thumbs .blog-sidebar-list__item {
padding: 0;
margin-bottom: 0;
}
.blog-sidebar-list--thumbs .blog-sidebar-list__item + .blog-sidebar-list__item {
border-top: 1px solid var(--lh-grey-100);
}
.blog-sidebar-list__link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
text-decoration: none;
transition: background var(--lh-transition-fast);
}
.blog-sidebar-list__link:hover .blog-sidebar-list__title {
color: var(--lh-magenta);
}
.blog-sidebar-list__thumb {
width: 72px;
height: 54px;
border-radius: var(--lh-radius-md);
overflow: hidden;
flex-shrink: 0;
background: var(--lh-grey-100);
}
.blog-sidebar-list__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-sidebar-list__thumb--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--lh-grey-400);
}
.blog-sidebar-list__text {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.blog-sidebar-list__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--lh-primary-dark);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--lh-transition-fast);
}
.blog-sidebar-list__date {
font-size: 0.75rem;
color: var(--lh-grey-500);
}
/* Browse by topic (pill tags) */
.blog-sidebar-list--topics {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.blog-sidebar-topic {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
background: var(--lh-grey-100);
color: var(--lh-grey-800);
border-radius: var(--lh-radius-full);
text-decoration: none;
transition: all var(--lh-transition-fast);
}
.blog-sidebar-topic:hover {
background: var(--lh-magenta);
color: var(--lh-white);
}
.blog-sidebar-topic:hover .blog-sidebar-topic__count {
background: rgba(255, 255, 255, 0.25);
color: var(--lh-white);
}
.blog-sidebar-topic__count {
font-size: 0.6875rem;
font-weight: 600;
background: var(--lh-grey-200);
color: var(--lh-grey-600);
border-radius: var(--lh-radius-full);
padding: 0.125rem 0.375rem;
line-height: 1;
transition: all var(--lh-transition-fast);
}
/* CTA card */
.blog-sidebar-card--cta {
background: var(--lh-primary-dark);
color: var(--lh-white);
text-align: center;
padding: var(--lh-space-xl);
}
.blog-sidebar-card--cta .blog-sidebar-card__title {
color: var(--lh-white);
border-bottom-color: rgba(255, 255, 255, 0.25);
}
.blog-sidebar-card__text {
font-size: 0.9375rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 var(--lh-space-lg);
}
.blog-sidebar-card__btn {
display: inline-block;
padding: 0.75rem 1.75rem;
background: var(--lh-magenta);
color: var(--lh-white);
border-radius: var(--lh-radius-full);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: background var(--lh-transition-fast);
}
.blog-sidebar-card__btn:hover {
background: var(--lh-magenta-700);
color: var(--lh-white);
}
/* ------------------------------------------------------------------------- */
/* Responsive: Blog Single */
/* ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
.blog-single__sidebar {
flex-basis: 280px;
}
.blog-single__grid {
gap: 32px;
}
}
@media (max-width: 991px) {
.blog-single__grid {
flex-direction: column;
}
.blog-single__sidebar {
position: static;
flex-basis: auto;
width: 100%;
}
.blog-single__hero-banner {
min-height: 300px;
}
.blog-single__article {
padding: var(--lh-space-xl);
}
.blog-single__post-nav {
grid-template-columns: 1fr;
}
.blog-single__post-nav-card--next {
grid-column: 1;
text-align: left;
flex-direction: row-reverse;
}
}
@media (max-width: 599px) {
.blog-single__hero-banner {
min-height: 240px;
}
.blog-single__hero-inner {
padding: var(--lh-space-xl) 0;
}
.blog-single__article {
padding: var(--lh-space-lg);
border-radius: var(--lh-radius-lg);
}
.blog-single__wrap {
padding-top: var(--lh-space-xl);
padding-bottom: var(--lh-space-xl);
}
.blog-single__share {
flex-direction: column;
align-items: flex-start;
}
.blog-single__post-nav-thumb {
display: none;
}
.meta-chip--hero {
font-size: 0.75rem;
padding: 0.25rem 0.625rem;
}
}
/* =========================================================================
Back-to-Top Button
========================================================================= */
/* Hide parent theme back-to-top if present */
.back_to_top { display: none !important; }
.lh-back-to-top {
position: fixed;
bottom: calc(24px + var(--lh-btt-offset, 0px));
left: 24px;
z-index: 900;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 10px;
background: var(--lh-primary-dark, #000032);
color: #fff;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.15s ease, bottom 0.35s ease;
-webkit-tap-highlight-color: transparent;
}
.lh-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lh-back-to-top:hover {
background: var(--lh-magenta, #E6007E);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.lh-back-to-top:active {
transform: scale(0.93);
}
.lh-back-to-top svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.lh-back-to-top {
width: 36px;
height: 36px;
bottom: calc(16px + var(--lh-btt-offset, 0px));
left: 16px;
border-radius: 8px;
}
}
/* =============================================================================
ABOUT PAGE — Branded Stat Cards
template-about.php
============================================================================= */
.lh-about-stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--lh-space-lg, 2rem) var(--lh-space-md, 1.5rem);
border-radius: var(--lh-radius, 8px);
color: #fff;
min-height: 140px;
}
.lh-about-stat-card--navy {
background-color: var(--lh-primary-dark, #000032);
}
.lh-about-stat-card--magenta {
background-color: var(--lh-magenta, #E6007E);
}
.lh-about-stat-card--blue {
background-color: #1A7CB3; /* a11y: darkened from #2294D2 for WCAG AA white text contrast (4.59:1) */
}
.lh-about-stat-card__number {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.1;
color: #fff;
}
.lh-about-stat-card__label {
font-size: 0.95rem;
margin-top: 0.375rem;
font-weight: 500;
color: #fff; /* a11y: bumped from 0.85 opacity for WCAG AA contrast */
text-transform: uppercase;
letter-spacing: 0.04em;
}
@media (max-width: 600px) {
.lh-about-stat-card {
min-height: 110px;
padding: var(--lh-space-md, 1.5rem) var(--lh-space-sm, 1rem);
}
.lh-about-stat-card__number {
font-size: 2rem;
}
}
/* =============================================================================
ABOUT PAGE — Brand Cards (matches UKSE about-brand-card pattern)
template-about.php §6
============================================================================= */
.lh-about-brand-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
transition: box-shadow 0.2s ease;
}
.lh-about-brand-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* Accent gradient bar at top (::before) */
.lh-about-brand-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
/* Brand-specific backgrounds and accent bars */
.lh-about-brand-card--lh {
background: linear-gradient(180deg, #e8f4ff 0%, #ffffff 100%);
}
.lh-about-brand-card--lh::before {
background-color: var(--lh-primary, #2294D2);
}
.lh-about-brand-card--uksr {
background: linear-gradient(180deg, #e8ffe8 0%, #ffffff 100%);
}
.lh-about-brand-card--uksr::before {
background-color: var(--lh-green, #B1CB0C);
}
.lh-about-brand-card--ukse {
background: linear-gradient(180deg, #fff4e8 0%, #ffffff 100%);
}
.lh-about-brand-card--ukse::before {
background-color: var(--lh-orange, #EE7218);
}
/* Logo */
.lh-about-brand-card__logo {
display: block;
height: 60px;
width: auto;
max-width: 200px;
margin: 0 auto 16px;
object-fit: contain;
}
/* Title */
.lh-about-brand-card__title {
font-size: 1.125rem;
font-weight: 700;
color: var(--lh-primary-dark, #000032);
margin: 0 0 8px;
}
/* Description */
.lh-about-brand-card__desc {
font-size: 0.925rem;
color: var(--lh-text-secondary, #5a6a7a);
line-height: 1.5;
margin: 0;
}