/*
Theme Name: FIFE - Friedensau Institute for Evaluation
Theme URI: https://fife-institute.org
Author: FIFE Institute
Author URI: https://fife-institute.org
Description: A modern one-page theme for the Friedensau Institute for Evaluation. Features a clean, professional design with sections for services, team, projects, and contact information.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fife-theme
Tags: one-column, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, theme-options, translation-ready
*/
/* ==========================================================================
CSS Variables / Design Tokens (FIFE Branding - Enhanced)
========================================================================== */
:root {
/* Primary - Magenta */
--color-primary: 311 50% 37%;
--color-primary-foreground: 0 0% 100%;
/* Secondary */
--color-secondary: 311 50% 37%;
--color-secondary-foreground: 0 0% 100%;
/* Background */
--color-background: 240 10% 98%;
--color-foreground: 240 10% 10%;
/* Card */
--color-card: 0 0% 100%;
--color-card-foreground: 240 10% 10%;
/* Muted */
--color-muted: 240 5% 96%;
--color-muted-foreground: 240 4% 46%;
/* Accent */
--color-accent: 311 50% 37%;
--color-accent-foreground: 0 0% 100%;
/* Border */
--color-border: 240 6% 90%;
--color-ring: 311 50% 37%;
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-heading: 'Poppins', var(--font-sans);
/* Enhanced Shadows */
--shadow-sm: 0 2px 8px rgba(147, 49, 131, 0.08);
--shadow-md: 0 4px 20px rgba(147, 49, 131, 0.12);
--shadow-lg: 0 10px 40px rgba(147, 49, 131, 0.15);
--shadow-xl: 0 20px 60px rgba(147, 49, 131, 0.2);
--shadow-glow: 0 0 30px rgba(147, 49, 131, 0.5);
--shadow-glass: 0 8px 32px 0 rgba(147, 49, 131, 0.15);
/* Gradients */
--gradient-primary: #933183;
--gradient-secondary: #933183;
--gradient-subtle: #f8f9fa;
--gradient-overlay: rgba(147,49,131,0.9);
--gradient-mesh: transparent;
/* Glassmorphism */
--glass-bg: hsla(240, 10%, 98%, 0.7);
--glass-border: hsla(240, 6%, 90%, 0.3);
/* Border Radius */
--radius: 1rem;
--radius-sm: 0.5rem;
--radius-lg: 1.5rem;
--radius-xl: 2rem;
/* Transitions */
--transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ==========================================================================
Reset & Base Styles
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
/* ============================================================================
CRITICAL: Mobile Overflow Prevention
These rules MUST remain to prevent horizontal scrolling on mobile devices.
============================================================================ */
html {
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
/* Match page background so iOS rubber-band drag reveals white, not magenta */
background-color: hsl(var(--color-background));
}
body {
max-width: 100%;
overflow-x: hidden;
/* IMPORTANT (iOS Safari): Avoid transforms on because it can break
position: fixed overlays (mobile menu) and z-index stacking. */
-webkit-transform: none;
transform: none;
/* Ensure body doesn't exceed viewport */
width: 100%;
position: relative;
}
body {
font-family: var(--font-sans);
background-color: hsl(var(--color-background));
color: hsl(var(--color-foreground));
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: hsl(var(--color-primary));
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: hsl(310 58% 25%);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
color: hsl(var(--color-foreground));
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
@media (min-width: 768px) {
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
}
/* ==========================================================================
Layout
========================================================================== */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
/* Header container - clip overflow on mobile to prevent white-space bleed */
.site-header .container {
max-width: 100%;
padding: 0 1rem;
overflow: visible;
}
@media (max-width: 767px) {
.site-header .container {
overflow: clip;
}
}
@media (min-width: 1024px) {
.site-header .container {
max-width: 1280px;
padding: 0 2rem;
}
}
@media (min-width: 640px) {
.container { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
.container { padding: 0 2rem; }
}
.section {
padding: 4rem 0;
}
@media (min-width: 768px) {
.section { padding: 6rem 0; }
}
/* ==========================================================================
Header & Navigation - Exact clone of Lovable React Navigation Component
React uses: fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-primary/95 border-b border-white/20 shadow-lg
========================================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 50;
background: hsla(310, 58%, 35%, 0.95);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-lg);
transition: all var(--transition);
/* NO overflow rules - content must fit naturally; dropdowns use position:fixed */
}
.site-header.scrolled {
box-shadow: var(--shadow-xl);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px; /* React: h-20 = 80px */
overflow: visible; /* Allow dropdowns */
}
/* Logo */
.site-logo {
display: flex;
align-items: center;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.site-logo:hover {
transform: scale(1.05);
}
.site-logo img {
height: 48px;
width: auto;
}
/* Mobile header adjustments */
@media (max-width: 767px) {
.header-inner {
height: 56px;
padding: 0 0.5rem;
}
.site-logo img {
height: 28px;
max-height: 28px;
}
}
/* Extra small screens */
@media (max-width: 374px) {
.header-inner {
height: 52px;
padding: 0 0.375rem;
}
.site-logo img {
height: 24px;
max-height: 24px;
}
}
/* Ensure header logo never gets overridden by later generic logo rules */
.site-header .site-logo img {
height: 48px;
}
@media (max-width: 767px) {
.site-header .site-logo img {
height: 28px;
max-height: 28px;
}
}
@media (max-width: 374px) {
.site-header .site-logo img {
height: 24px;
max-height: 24px;
}
}
/* Desktop Navigation */
.main-navigation {
display: none;
align-items: center;
gap: 0.25rem;
/* Prevent nav items from causing horizontal overflow */
flex-shrink: 1;
min-width: 0;
flex-wrap: nowrap;
}
@media (min-width: 768px) {
.main-navigation {
display: flex;
}
}
@media (min-width: 1024px) {
.main-navigation {
gap: 0.5rem;
}
}
/* Navigation Links */
.nav-link {
display: block;
padding: 0.5rem 0.5rem;
font-weight: 500;
color: white;
border-radius: 0.5rem 0 0 0.5rem;
transition: all 0.3s ease;
white-space: nowrap;
font-size: 0.8125rem;
}
@media (min-width: 900px) {
.nav-link {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
}
@media (min-width: 1024px) {
.nav-link {
padding: 0.5rem 1rem;
}
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
/* Dropdown Trigger */
.nav-dropdown {
position: relative;
}
.nav-dropdown-trigger {
display: flex;
align-items: center;
}
.nav-dropdown-arrow {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.25rem;
background: none;
border: none;
color: white;
cursor: pointer;
border-radius: 0 0.5rem 0.5rem 0;
transition: all 0.3s ease;
}
.nav-dropdown-arrow:hover {
background: rgba(255, 255, 255, 0.1);
}
.nav-dropdown-arrow svg {
transition: transform 0.3s ease;
}
.nav-dropdown:hover .nav-dropdown-arrow svg {
transform: rotate(180deg);
}
/* Dropdown Content - absolute position, escapes naturally since no overflow:hidden on header */
.nav-dropdown-content {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: hsl(var(--color-card));
border: 1px solid hsl(var(--color-border));
border-radius: 0.5rem;
box-shadow: var(--shadow-xl);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 100000;
pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown.dropdown-open .nav-dropdown-content {
pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
color: hsl(var(--color-foreground));
font-size: 0.9375rem;
transition: all 0.2s ease;
border-bottom: 1px solid hsl(var(--color-border));
}
.nav-dropdown-item:last-child {
border-bottom: none;
}
.nav-dropdown-item:hover {
background: hsl(var(--color-primary));
color: white;
}
.nav-dropdown-subitem {
padding-left: 1.5rem;
color: hsl(var(--color-muted-foreground));
}
.nav-dropdown-subitem:hover {
background: hsl(var(--color-primary));
color: white;
}
/* Language Selector */
.language-select {
margin-left: 0.25rem;
padding: 0.375rem 0.5rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
color: white;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
@media (min-width: 900px) {
.language-select {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
}
}
@media (min-width: 1024px) {
.language-select {
margin-left: 1rem;
font-size: 0.875rem;
}
}
.language-select:hover {
background: rgba(255, 255, 255, 0.2);
}
.language-select option {
background: hsl(var(--color-card));
color: hsl(var(--color-foreground));
}
/* Get Started Button */
.nav-btn {
margin-left: 0.25rem;
padding: 0.375rem 0.75rem;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
color: white;
font-weight: 500;
font-size: 0.75rem;
transition: all 0.3s ease;
white-space: nowrap;
flex-shrink: 0;
}
@media (min-width: 900px) {
.nav-btn {
padding: 0.5rem 0.875rem;
font-size: 0.8125rem;
}
}
@media (min-width: 1024px) {
.nav-btn {
margin-left: 1rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
}
.nav-btn:hover {
background: rgba(255, 255, 255, 0.3);
color: white;
}
/* Mobile Menu Toggle - Ultra-reliable for all mobile devices */
.mobile-menu-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
padding: 8px;
background: rgba(255, 255, 255, 0.2) !important;
border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
border-radius: 0.5rem;
cursor: pointer !important;
transition: all 0.2s ease;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
-webkit-touch-callout: none;
touch-action: manipulation !important; /* CRITICAL: Allow touch events */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
z-index: 100001 !important; /* CRITICAL: Above everything */
position: relative;
pointer-events: auto !important;
/* Force hardware acceleration for smooth touch response */
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform, background;
}
/* Slightly larger on medium mobile screens */
@media (min-width: 375px) and (max-width: 767px) {
.mobile-menu-toggle {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 10px;
gap: 5px;
}
}
/* Hide on desktop - 768px and above (matches React md: breakpoint) */
@media (min-width: 768px) {
.mobile-menu-toggle {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
}
/* Enhanced touch feedback for mobile */
.mobile-menu-toggle:hover,
.mobile-menu-toggle:active,
.mobile-menu-toggle:focus,
.mobile-menu-toggle:focus-visible {
background: rgba(255, 255, 255, 0.35) !important;
outline: none !important;
border-color: rgba(255, 255, 255, 0.6) !important;
transform: translateZ(0) scale(1.03);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.mobile-menu-toggle:active {
transform: translateZ(0) scale(0.97);
background: rgba(255, 255, 255, 0.45) !important;
}
/* Hamburger lines */
.hamburger-line {
display: block;
width: 24px;
height: 3px;
background: white;
border-radius: 3px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Active state - X animation */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Mobile Navigation Panel - Compact dropdown style (not full screen) */
.mobile-navigation {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: fixed !important;
top: 64px !important; /* Match mobile header height */
left: 0.5rem !important;
right: 0.5rem !important;
bottom: auto !important; /* NOT full height */
max-height: calc(100vh - 80px) !important;
background: hsl(310, 58%, 35%) !important;
z-index: 100000 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
width: auto !important;
max-width: calc(100vw - 1rem) !important;
border-radius: 0.75rem !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
-webkit-appearance: none;
appearance: none;
pointer-events: none !important;
}
/* Active state - show navigation with full visibility */
.mobile-navigation.active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
animation: mobileMenuSlideIn 0.3s ease forwards;
}
@keyframes mobileMenuSlideIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Prevent body scroll when menu is open */
body.mobile-menu-open {
overflow: hidden !important;
}
/* Header z-index for mobile panel layering */
.site-header {
z-index: 10000 !important;
}
.header-inner {
position: relative;
z-index: 10001;
}
.mobile-nav-content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100%;
max-width: 100%;
}
/* iOS Safari overflow fix: allow flex children to shrink instead of widening the viewport */
.mobile-nav-header,
.homepage-project-card,
.homepage-project-info,
.homepage-project-meta {
min-width: 0;
}
/* Mobile nav group accordion (tap-to-expand) */
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.mobile-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
color: white;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.25);
transition: transform 0.2s ease, background 0.2s ease;
}
.mobile-nav-toggle:active {
transform: scale(0.97);
background: rgba(255, 255, 255, 0.18);
}
.mobile-nav-toggle svg {
transition: transform 0.2s ease;
}
.mobile-nav-sublist {
padding-top: 0.25rem;
}
.mobile-nav-group.is-open .mobile-nav-toggle svg {
transform: rotate(180deg);
}
.mobile-nav-group {
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-nav-group:last-of-type {
border-bottom: none;
}
.mobile-nav-title {
display: block;
padding: 0.5rem 0.75rem;
font-weight: 600;
color: white;
font-size: 1rem;
flex: 1;
}
.mobile-nav-title:hover {
color: white;
text-decoration: underline;
}
.mobile-nav-link {
display: block;
padding: 0.5rem 0.75rem;
margin-left: 0.75rem;
color: rgba(255, 255, 255, 0.95);
font-size: 0.9375rem;
border-radius: 0.375rem;
transition: background 0.2s ease;
}
.mobile-nav-link:hover {
background: rgba(255, 255, 255, 0.15);
color: white;
}
.mobile-nav-sublink {
margin-left: 1.5rem;
color: rgba(255, 255, 255, 0.85);
}
.mobile-language-select {
width: 100%;
margin-top: 0.75rem;
padding: 0.625rem 0.75rem;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0.375rem;
color: white;
font-size: 0.9375rem;
}
.mobile-language-select option {
background: hsl(var(--color-primary));
color: white;
}
.mobile-nav-btn {
display: block;
width: 100%;
margin-top: 0.75rem;
padding: 0.625rem;
background: white;
color: hsl(var(--color-primary));
text-align: center;
font-weight: 600;
font-size: 0.9375rem;
border-radius: 0.375rem;
transition: all 0.3s ease;
}
.mobile-nav-btn:hover {
background: rgba(255, 255, 255, 0.9);
color: hsl(var(--color-primary));
}
/* ==========================================================================
Left Side Menu - Matches Lovable LeftSideMenu.tsx
========================================================================== */
.left-side-menu {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: none;
flex-direction: column;
gap: 0.375rem;
padding: 0.375rem;
}
@media (min-width: 768px) {
.left-side-menu {
display: flex;
}
}
.side-menu-item {
position: relative;
}
.side-menu-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: hsl(var(--color-primary));
border-radius: 50%;
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
}
.side-menu-icon:hover {
background: hsla(var(--color-primary), 0.9);
transform: scale(1.1);
}
.side-menu-icon svg {
color: white;
}
.side-menu-tooltip {
position: absolute;
left: 48px;
top: 50%;
transform: translateY(-50%) translateX(-8px);
background: hsl(var(--color-primary));
color: white;
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.side-menu-tooltip::before {
content: '';
position: absolute;
left: -4px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: hsl(var(--color-primary));
}
.side-menu-item:hover .side-menu-tooltip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* ==========================================================================
Events Sidebar - Matches Lovable EventsSidebar.tsx
========================================================================== */
/* Mobile Events Button */
.events-mobile-toggle {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 50;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: hsl(var(--color-primary));
color: white;
border: none;
border-radius: 9999px;
box-shadow: var(--shadow-lg);
cursor: pointer;
transition: all 0.3s ease;
}
@media (min-width: 768px) {
.events-mobile-toggle {
display: none;
}
}
.events-mobile-toggle:hover {
background: hsla(var(--color-primary), 0.9);
}
.events-mobile-toggle span {
font-size: 0.875rem;
font-weight: 600;
}
/* Mobile Events Panel */
.events-mobile-panel {
position: fixed;
inset: 0;
z-index: 50;
visibility: hidden;
transition: visibility 0.3s ease;
}
.events-mobile-panel.active {
visibility: visible;
}
@media (min-width: 768px) {
.events-mobile-panel {
display: none;
}
}
.events-mobile-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.events-mobile-panel.active .events-mobile-backdrop {
opacity: 1;
}
.events-mobile-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: hsl(var(--color-background));
border-radius: 1.5rem 1.5rem 0 0;
box-shadow: var(--shadow-xl);
padding: 1.5rem;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.events-mobile-panel.active .events-mobile-content {
transform: translateY(0);
}
.events-mobile-handle {
width: 3rem;
height: 0.25rem;
background: hsl(var(--color-border));
border-radius: 9999px;
margin: 0 auto 1rem;
}
.events-mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.events-mobile-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--color-foreground));
}
.events-mobile-header h3 svg {
color: hsl(var(--color-primary));
}
.events-mobile-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: hsl(var(--color-muted));
border: none;
border-radius: 50%;
cursor: pointer;
transition: background 0.2s ease;
}
.events-mobile-close:hover {
background: hsla(var(--color-muted), 0.8);
}
.events-mobile-close svg {
color: hsl(var(--color-muted-foreground));
}
/* Events Cards */
.events-cards {
display: flex;
flex-direction: column;
gap: 1rem;
max-height: 60vh;
overflow-y: auto;
}
.events-card {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
background: rgba(147,49,131,0.08);
border: 1px solid hsla(var(--color-primary), 0.2);
border-radius: 0.75rem;
transition: all 0.3s ease;
}
.events-card:hover {
border-color: hsla(var(--color-primary), 0.4);
box-shadow: var(--shadow-lg);
}
.events-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
background: hsla(var(--color-primary), 0.2);
border-radius: 0.5rem;
}
.events-card-icon svg {
color: hsl(var(--color-primary));
}
.events-card-content h4 {
font-size: 1rem;
font-weight: 600;
color: hsl(var(--color-foreground));
margin-bottom: 0.25rem;
transition: color 0.2s ease;
}
.events-card:hover .events-card-content h4 {
color: hsl(var(--color-primary));
}
.events-card-content p {
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
margin: 0;
}
/* Desktop Events Sidebar */
.events-sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: none;
}
@media (min-width: 768px) {
.events-sidebar {
display: block;
}
}
.events-sidebar-tab {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 2rem 0.75rem;
background: hsl(var(--color-primary));
color: white;
border-radius: 0.5rem 0 0 0.5rem;
cursor: pointer;
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
}
.events-sidebar:hover .events-sidebar-tab {
opacity: 0;
pointer-events: none;
}
.events-chevron {
transform: rotate(180deg);
}
.events-sidebar-label {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.05em;
white-space: nowrap;
}
.events-sidebar-panel {
width: 0;
overflow: hidden;
background: hsl(var(--color-background));
border-left: 1px solid hsl(var(--color-border));
border-top: 1px solid hsl(var(--color-border));
border-bottom: 1px solid hsl(var(--color-border));
border-radius: 1rem 0 0 1rem;
box-shadow: var(--shadow-xl);
transition: width 0.3s ease;
}
.events-sidebar:hover .events-sidebar-panel {
width: 320px;
}
.events-sidebar-content {
width: 320px;
padding: 1.5rem;
}
.events-sidebar-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--color-foreground));
margin-bottom: 1.5rem;
}
.events-sidebar-title svg {
color: hsl(var(--color-primary));
}
.events-sidebar-content .events-card {
margin-bottom: 1rem;
}
.events-sidebar-content .events-card:last-child {
margin-bottom: 0;
}
/* NOTE: Legacy mobile menu styles removed (they conflicted with the magenta mobile menu above).
Keep all mobile menu styles in the primary "Mobile Menu Toggle" and "Mobile Navigation Panel" blocks. */
/* ==========================================================================
Hero Carousel Section (Enhanced)
========================================================================== */
.hero-section {
position: relative;
min-height: 500px; /* Match Lovable React (min-h-[500px]) */
height: auto;
display: flex;
align-items: center;
overflow: hidden;
background: #000; /* fallback while images load */
padding: 4rem 0;
}
@media (min-width: 768px) {
.hero-section {
padding: 5rem 0;
}
}
@media (min-width: 1024px) {
.hero-section {
padding: 6rem 0;
}
}
@media (max-width: 767px) {
.hero-section {
min-height: 500px;
padding: 4rem 0;
}
}
/* Carousel Backgrounds */
.hero-carousel {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-slide-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.hero-slide-bg.active {
opacity: 1;
}
.hero-slide-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-slide-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5); /* Match Lovable React bg-black/50 */
}
/* Slide Content */
.hero-slides-container {
position: relative;
z-index: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
}
.hero-slide {
position: absolute;
width: 100%;
opacity: 0;
transform: translateY(20px);
transition: all 0.7s ease-in-out;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slide.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hero-content {
text-align: center;
max-width: 900px;
margin: 0 auto;
padding: 0 1rem;
}
/* Glass Icon Container */
.hero-icon-container {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
margin-bottom: 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glass);
}
@media (min-width: 768px) {
.hero-icon-container { padding: 2rem; margin-bottom: 2rem; }
}
.hero-icon-container svg {
width: 40px;
height: 40px;
color: hsl(var(--color-primary)); /* Match Lovable React (Icon text-primary) */
}
@media (min-width: 768px) {
.hero-icon-container svg { width: 64px; height: 64px; }
}
@media (min-width: 1024px) {
.hero-icon-container svg { width: 80px; height: 80px; }
}
.hero-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
line-height: 1.1;
}
@media (min-width: 640px) {
.hero-title { font-size: 2.5rem; }
}
@media (min-width: 768px) {
.hero-title { font-size: 3.5rem; margin-bottom: 1.5rem; }
}
@media (min-width: 1024px) {
.hero-title { font-size: 4rem; }
}
@media (min-width: 1280px) {
.hero-title { font-size: 4.5rem; }
}
/* Subtitle Badge */
.hero-subtitle-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
margin-bottom: 1rem;
background: hsla(310, 58%, 35%, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius);
color: white;
font-size: 1rem;
font-weight: 600;
}
@media (min-width: 768px) {
.hero-subtitle-badge {
padding: 0.75rem 2rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
border-radius: var(--radius-lg);
}
}
.hero-description {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
.hero-description { font-size: 1.125rem; margin-bottom: 2.5rem; }
}
/* Hero Buttons */
.hero-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
justify-content: center;
align-items: center;
}
@media (min-width: 640px) {
.hero-buttons { flex-direction: row; gap: 1rem; }
}
.hero-btn {
padding: 0.75rem 2rem;
font-size: 0.875rem;
font-weight: 600;
border-radius: 9999px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.hero-btn { padding: 1rem 2.5rem; font-size: 1rem; }
}
.hero-btn-primary {
background: hsl(var(--color-primary));
color: white;
}
.hero-btn-primary:hover {
background: hsl(310 58% 25%);
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
.hero-btn-outline {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.5);
color: white;
}
.hero-btn-outline:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
/* Carousel Navigation Arrows */
.hero-nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.25);
-webkit-appearance: none;
appearance: none;
border-radius: 9999px;
color: white;
cursor: pointer;
line-height: 0;
transition: all 0.2s ease;
z-index: 20;
}
@media (min-width: 640px) {
.hero-nav-arrow {
width: 30px;
height: 30px;
}
}
.hero-nav-arrow:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-50%) scale(1.08);
}
.hero-nav-arrow.prev { left: 0.5rem; }
.hero-nav-arrow.next { right: 0.5rem; }
@media (min-width: 640px) {
.hero-nav-arrow.prev { left: 0.75rem; }
.hero-nav-arrow.next { right: 0.75rem; }
}
@media (min-width: 768px) {
.hero-nav-arrow.prev { left: 1rem; }
.hero-nav-arrow.next { right: 1rem; }
}
@media (min-width: 1024px) {
.hero-nav-arrow.prev { left: 1.25rem; }
.hero-nav-arrow.next { right: 1.25rem; }
}
.hero-nav-arrow svg {
width: 12px;
height: 12px;
}
@media (min-width: 640px) {
.hero-nav-arrow svg { width: 13px; height: 13px; }
}
/* Navigation Arrows - Small subtle buttons */
.hero-carousel-centered .hero-nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.25);
-webkit-appearance: none;
appearance: none;
border-radius: 9999px;
color: white;
cursor: pointer;
line-height: 0;
transition: all 0.2s ease;
z-index: 20;
}
@media (min-width: 640px) {
.hero-carousel-centered .hero-nav-arrow {
width: 30px;
height: 30px;
}
}
.hero-carousel-centered .hero-nav-arrow:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-50%) scale(1.08);
}
/* Arrow positions */
.hero-carousel-centered .hero-nav-arrow.prev {
left: 0.5rem;
}
.hero-carousel-centered .hero-nav-arrow.next {
right: 0.5rem;
}
@media (min-width: 640px) {
.hero-carousel-centered .hero-nav-arrow.prev { left: 0.75rem; }
.hero-carousel-centered .hero-nav-arrow.next { right: 0.75rem; }
}
@media (min-width: 768px) {
.hero-carousel-centered .hero-nav-arrow.prev { left: 1.5rem; }
.hero-carousel-centered .hero-nav-arrow.next { right: 1.5rem; }
}
@media (min-width: 1024px) {
.hero-carousel-centered .hero-nav-arrow.prev { left: 2rem; }
.hero-carousel-centered .hero-nav-arrow.next { right: 2rem; }
}
/* Arrow SVG sizes - smaller */
.hero-carousel-centered .hero-nav-arrow svg {
width: 14px;
height: 14px;
}
@media (min-width: 640px) {
.hero-carousel-centered .hero-nav-arrow svg {
width: 16px;
height: 16px;
}
}
...
/* Carousel Arrows */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 30;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: none;
-webkit-appearance: none;
appearance: none;
border-radius: 9999px;
color: white;
cursor: pointer;
line-height: 0;
transition: all 0.3s ease;
}
.carousel-arrow:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-50%) scale(1.05);
}
.carousel-arrow.prev {
left: 1rem;
}
.carousel-arrow.next {
right: 1rem;
}
.carousel-arrow svg {
width: 14px;
height: 14px;
}
@media (min-width: 640px) {
.carousel-arrow {
width: 40px;
height: 40px;
}
.carousel-arrow svg {
width: 16px;
height: 16px;
}
}
/* Carousel Indicators */
.carousel-indicators {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 30;
display: flex;
gap: 0.75rem;
}
.carousel-indicators .indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicators .indicator.active {
width: 32px;
border-radius: 4px;
background: white;
}
.carousel-indicators .indicator:hover {
background: rgba(255, 255, 255, 0.7);
}
/* Course Horizontal Cards (All Courses Page) */
.courses-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.course-horizontal-card {
display: flex;
flex-direction: column;
background: hsl(var(--color-card));
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid hsl(var(--color-border));
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
}
@media (min-width: 768px) {
.course-horizontal-card {
flex-direction: row;
}
}
.course-horizontal-card:hover {
box-shadow: var(--shadow-xl);
}
.course-horizontal-card .course-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
@media (min-width: 768px) {
.course-horizontal-card .course-image {
width: 33.333%;
height: auto;
}
}
.course-horizontal-card .course-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.course-horizontal-card:hover .course-image img {
transform: scale(1.05);
}
.course-horizontal-card .star-rating {
position: absolute;
bottom: 1rem;
left: 1rem;
display: flex;
gap: 0.125rem;
}
.course-horizontal-card .star-rating svg {
color: #facc15;
}
.course-horizontal-card .course-details {
flex: 1;
padding: 1.5rem;
}
.course-horizontal-card .course-details h3 {
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--color-foreground));
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.course-horizontal-card:hover .course-details h3 {
color: hsl(var(--color-primary));
}
.course-horizontal-card .course-meta-inline {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-bottom: 0.75rem;
}
.course-horizontal-card .course-meta-inline .price {
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--color-primary));
}
.course-horizontal-card .course-meta-inline .meta-text {
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
}
.course-horizontal-card .course-description {
color: hsl(var(--color-muted-foreground));
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-horizontal-card .course-info-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.course-horizontal-card .info-item {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
}
.course-horizontal-card .info-item svg {
color: hsl(var(--color-primary));
}
/* Vision Grid */
.vision-grid {
display: grid;
gap: 1.5rem;
}
.vision-grid.four-cols {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
.vision-grid.four-cols {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.vision-grid.four-cols {
grid-template-columns: repeat(4, 1fr);
}
}
.vision-card {
padding: 1.5rem;
background: hsl(var(--color-card));
border-radius: var(--radius-lg);
text-align: center;
border: 1px solid transparent;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.vision-card:hover {
box-shadow: var(--shadow-xl);
border-color: hsl(var(--color-primary) / 0.2);
}
.vision-card .vision-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
background: hsl(var(--color-primary) / 0.1);
border-radius: var(--radius-xl);
transition: all 0.3s ease;
}
.vision-card:hover .vision-icon {
background: hsl(var(--color-primary));
transform: scale(1.1);
}
.vision-card .vision-icon svg {
width: 32px;
height: 32px;
color: hsl(var(--color-primary));
transition: color 0.3s ease;
}
.vision-card:hover .vision-icon svg {
color: white;
}
.vision-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: hsl(var(--color-foreground));
margin-bottom: 0.5rem;
}
.vision-card p {
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
line-height: 1.6;
}
/* Features Grid */
.features-grid {
display: grid;
gap: 1.5rem;
}
.features-grid.three-cols {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
.features-grid.three-cols {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-grid.three-cols {
grid-template-columns: repeat(3, 1fr);
}
}
.feature-card {
padding: 1.5rem;
background: hsl(var(--color-card));
border-radius: var(--radius-lg);
border: 1px solid hsl(var(--color-border));
transition: all 0.3s ease;
}
.feature-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.feature-card .feature-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
background: hsl(var(--color-primary) / 0.1);
border-radius: var(--radius);
}
.feature-card .feature-icon svg {
width: 24px;
height: 24px;
color: hsl(var(--color-primary));
}
.feature-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: hsl(var(--color-foreground));
margin-bottom: 0.5rem;
}
.feature-card p {
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
line-height: 1.6;
}
/* Stats Banner */
.stats-banner {
padding: 3rem 0;
}
.stats-banner.bg-primary {
background: hsl(var(--color-primary));
}
.stats-row {
display: grid;
gap: 2rem;
text-align: center;
}
.stats-row.four-cols {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.stats-row.four-cols {
grid-template-columns: repeat(4, 1fr);
}
}
.stats-banner .stat .stat-value {
font-size: 2rem;
font-weight: 700;
color: white;
display: block;
}
@media (min-width: 768px) {
.stats-banner .stat .stat-value {
font-size: 2.5rem;
}
}
.stats-banner .stat .stat-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
}
/* Courses Grid (Training Page) */
.courses-grid.three-cols {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
.courses-grid.three-cols {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.courses-grid.three-cols {
grid-template-columns: repeat(3, 1fr);
}
}
.course-card.hover-shadow {
transition: all 0.3s ease;
}
.course-card.hover-shadow:hover {
box-shadow: var(--shadow-xl);
}
.course-card .course-cohort {
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
margin-bottom: 0.5rem;
}
.course-card .course-description {
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
line-height: 1.6;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-card .course-meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid hsl(var(--color-border));
text-align: center;
}
.course-card .meta-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.course-card .meta-item svg {
color: hsl(var(--color-primary));
}
.course-card .meta-item .meta-value {
font-size: 0.75rem;
font-weight: 600;
color: hsl(var(--color-foreground));
}
.course-card .meta-item .meta-label {
font-size: 0.625rem;
color: hsl(var(--color-muted-foreground));
}
/* Two Column Layout with Image Overlay */
.two-column-layout.items-center {
align-items: center;
}
.column-image.with-overlay {
position: relative;
}
.column-image .image-tilt-bg {
position: absolute;
inset: 0;
background: hsl(var(--color-primary) / 0.2);
border-radius: var(--radius-xl);
transform: rotate(3deg);
transition: transform 0.3s ease;
}
.column-image:hover .image-tilt-bg {
transform: rotate(6deg);
}
.column-image.with-overlay img {
position: relative;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.play-button-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
}
.play-button-overlay .play-circle {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: hsl(var(--color-primary) / 0.9);
border-radius: 50%;
box-shadow: var(--shadow-lg);
transition: transform 0.3s ease;
}
.play-button-overlay:hover .play-circle {
transform: scale(1.1);
}
.play-button-overlay .play-circle svg {
width: 32px;
height: 32px;
color: white;
margin-left: 4px;
}
/* Section Header Inline */
.section-header-inline {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
}
.section-header-inline h2 {
font-size: 1.875rem;
font-weight: 700;
color: hsl(var(--color-foreground));
margin-bottom: 0.5rem;
}
.section-header-inline p {
color: hsl(var(--color-muted-foreground));
}
/* Publications Grid */
.publications-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
.publications-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.publications-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.publication-card {
padding: 1.5rem;
background: hsl(var(--color-card));
border: 1px solid hsl(var(--color-border));
border-radius: var(--radius-lg);
transition: all 0.3s ease;
}
.publication-card:hover {
box-shadow: var(--shadow-lg);
border-color: hsl(var(--color-primary) / 0.3);
}
.publication-card .publication-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
background: hsl(var(--color-primary) / 0.1);
border-radius: var(--radius);
}
.publication-card .publication-icon svg {
width: 24px;
height: 24px;
color: hsl(var(--color-primary));
}
.publication-card h4 {
font-size: 1.125rem;
font-weight: 600;
color: hsl(var(--color-foreground));
margin-bottom: 0.5rem;
}
.publication-card p {
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
line-height: 1.6;
margin-bottom: 0.75rem;
}
.publication-card .publication-date {
font-size: 0.75rem;
color: hsl(var(--color-primary));
font-weight: 600;
}
/* Background Gradient Primary */
.bg-gradient-primary {
background: #933183;
}
.text-white {
color: white;
}
.text-white-80 {
color: rgba(255, 255, 255, 0.8);
}
.text-white-80 p {
color: rgba(255, 255, 255, 0.8);
}
/* Quote Box Glass */
.quote-box.glass {
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
margin: 2rem auto;
max-width: 600px;
}
.quote-box.glass blockquote {
font-size: 1.25rem;
font-style: italic;
color: white;
margin-bottom: 0.5rem;
}
.quote-box.glass cite {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
}
/* Section Icon White */
.section-icon.white {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
.section-icon.white svg {
width: 32px;
height: 32px;
color: white;
}
/* Numbered Grid White */
.numbered-grid.white {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(1, 1fr);
margin-top: 2rem;
}
@media (min-width: 640px) {
.numbered-grid.white {
grid-template-columns: repeat(2, 1fr);
}
}
.numbered-grid.white .numbered-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
}
.numbered-grid.white .numbered-item .number {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: white;
color: hsl(var(--color-primary));
border-radius: 50%;
font-weight: 700;
flex-shrink: 0;
}
.numbered-grid.white .numbered-item p {
color: white;
margin: 0;
}
/* Card Icon Primary Background */
.card-icon.primary-bg {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
background: hsl(var(--color-primary));
border-radius: var(--radius-lg);
}
.card-icon.primary-bg svg {
width: 32px;
height: 32px;
color: white;
}
/* Hover Lift Animation */
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
}
/* ==========================================================================
MOBILE RESPONSIVENESS ENHANCEMENTS
Critical fixes for mobile view parity with React app
========================================================================== */
/* Mobile Hero Section Improvements */
@media (max-width: 639px) {
.hero-carousel-centered {
min-height: 400px;
padding: 2rem 0;
}
.hero-main-title {
font-size: 1.5rem !important;
line-height: 1.2;
}
.hero-subtitle-badge {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
}
.hero-description {
font-size: 0.8125rem;
max-width: 280px;
margin: 0 auto;
}
.hero-cta-buttons {
flex-direction: row !important;
gap: 0.5rem !important;
justify-content: center;
}
.hero-btn-primary,
.hero-btn-outline {
padding: 0.5rem 0.875rem !important;
font-size: 0.75rem !important;
}
.hero-glass-icon {
padding: 0.5rem;
}
.hero-glass-icon svg {
width: 20px;
height: 20px;
}
}
/* Mobile Navigation Enhancement */
@media (max-width: 1023px) {
/* Keep consistent compact header sizing on mobile */
.header-inner { height: 56px; }
.site-header .site-logo img { height: 28px; max-height: 28px; }
/* Ensure hamburger is always visible and clickable */
.mobile-menu-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.main-navigation {
display: none !important;
}
}
/* Mobile Services Grid */
@media (max-width: 639px) {
.services-grid-5col {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.service-card-lovable {
padding: 1.25rem;
}
.service-card-lovable h3 {
font-size: 1rem;
}
.service-card-lovable p {
font-size: 0.8125rem;
}
}
/* Mobile Approaches Grid */
@media (max-width: 639px) {
.approaches-grid {
grid-template-columns: 1fr !important;
gap: 1.5rem;
}
}
/* Mobile Partners Section */
@media (max-width: 639px) {
.partners-logos-grid {
gap: 1rem;
}
.partner-logo-card {
padding: 1rem;
}
.partner-logo-card img {
height: 3rem;
}
}
/* Mobile Testimonials */
@media (max-width: 639px) {
.testimonials-section-magenta {
padding: 3rem 0;
}
.testimonials-title {
font-size: 1.5rem;
}
.testimonial-card-main {
padding: 1.5rem;
}
.testimonial-quote {
font-size: 0.9375rem;
}
.testimonial-controls {
flex-wrap: wrap;
gap: 1rem;
}
}
/* Mobile Projects Section */
@media (max-width: 479px) {
.projects-section-home {
padding: 3rem 0;
}
.section-header-centered h2 {
font-size: 1.5rem;
}
.homepage-project-card {
border-radius: var(--radius);
}
.homepage-project-image {
height: 10rem;
}
.homepage-project-info {
padding: 1rem;
}
.homepage-project-title {
font-size: 1rem;
}
.homepage-project-status {
font-size: 0.75rem;
padding: 0.1875rem 0.5rem;
}
}
/* Clients Carousel - Smooth Scroll */
.clients-carousel-section { padding: 4rem 0; overflow: hidden; }
.clients-carousel-wrapper { overflow: hidden; width: 100%; position: relative; }
.clients-carousel-track {
display: flex;
gap: 2rem;
width: max-content;
animation: scrollClients 40s linear infinite;
}
.clients-carousel-track:hover { animation-play-state: paused; }
.client-logo-card {
flex-shrink: 0;
width: 160px;
height: 80px;
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
transition: box-shadow 0.3s;
}
.client-logo-card:hover { box-shadow: 0 4px 20px rgba(147,49,131,0.15); }
.client-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(30%); transition: filter 0.3s; }
.client-logo-card:hover img { filter: grayscale(0%); }
@keyframes scrollClients {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Clients Carousel - Smooth Scroll Animation */
.clients-carousel-section { padding: 4rem 0; overflow: hidden; }
.clients-carousel-wrapper { overflow: hidden; width: 100%; position: relative; }
.clients-carousel-track {
display: flex; gap: 2rem; width: max-content;
animation: scrollClients 40s linear infinite;
}
.clients-carousel-track:hover { animation-play-state: paused; }
.client-logo-card {
flex-shrink: 0; width: 160px; height: 80px; background: #fff;
border-radius: 0.75rem; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
display: flex; align-items: center; justify-content: center;
padding: 1rem; transition: box-shadow 0.3s;
}
.client-logo-card:hover { box-shadow: 0 4px 20px rgba(147,49,131,0.15); }
.client-logo-card img { max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(30%); transition:filter 0.3s; }
.client-logo-card:hover img { filter:grayscale(0%); }
@keyframes scrollClients {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Mobile Clients Carousel */
@media (max-width: 639px) {
.clients-carousel-section {
padding: 3rem 0;
}
.clients-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem;
}
.client-card {
min-height: 100px;
padding: 1rem;
}
}
/* Global button base styles */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.25s;
cursor: pointer;
border: none;
}
.btn-primary {
background: hsl(var(--color-primary));
color: #fff !important;
}
.btn-primary:hover {
background: hsl(310 58% 28%);
transform: translateY(-2px);
color: #fff !important;
}
.btn-outline {
background: transparent;
color: hsl(var(--color-primary));
border: 2px solid hsl(var(--color-primary));
}
.btn-outline:hover {
background: hsl(var(--color-primary));
color: #fff;
}
/* Who We Are / primary bg section text fix */
.section[style*="background: hsl(var(--color-primary))"] *,
.section[style*="background: hsl(var(--color-primary))"] p,
.section[style*="background: hsl(var(--color-primary))"] h2,
.section[style*="background: hsl(var(--color-primary))"] div,
.section[style*="background: hsl(var(--color-primary))"] span {
color: #fff;
}
/* Mobile Footer */
@media (max-width: 767px) {
.footer-grid {
grid-template-columns: 1fr !important;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
/* Mobile View All Button */
@media (max-width: 479px) {
.view-all-btn-container {
margin-top: 2rem;
}
.btn-primary-large {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
}
}
/* Fix body scroll when mobile menu is open */
body.mobile-menu-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
}
/* Ensure touch targets are at least 44x44px */
button,
a,
.mobile-menu-toggle,
.mobile-nav-link,
.mobile-nav-title {
min-height: 44px;
}
/* Improve tap highlighting for mobile */
* {
-webkit-tap-highlight-color: rgba(147, 49, 131, 0.1);
}
/* ==========================================================================
CRITICAL: Mobile Overflow Guards
These rules MUST be at the end to have highest specificity
========================================================================== */
@media (max-width: 1023px) {
/* Force all sections to respect viewport width */
section,
.section,
main,
.site-main,
header,
footer,
nav,
.container {
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
/* Prevent any element from being wider than viewport */
img, video, iframe, embed, object {
max-width: 100% !important;
height: auto !important;
}
/* Ensure fixed/absolute elements don't cause overflow */
.hero-carousel-centered,
.hero-bg-container,
.hero-bg-slide,
.clients-carousel-section,
.clients-carousel-wrapper {
max-width: 100vw !important;
overflow: hidden !important;
}
/* Force transforms to use GPU layer (isolates from document flow) */
.hero-bg-slide,
.hero-content-slide,
.clients-carousel-track {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
}
/* Extra small devices - additional safeguards */
@media (max-width: 479px) {
html, body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
}
/* Prevent flex items from forcing horizontal scroll */
.homepage-project-card,
.homepage-project-info,
.homepage-project-meta,
.mobile-nav-header,
.service-card-lovable,
.approach-card,
.partner-card {
min-width: 0 !important;
max-width: 100% !important;
flex-shrink: 1 !important;
}
/* Ensure text doesn't cause overflow */
h1, h2, h3, h4, h5, h6, p, span, a {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
}
/* ================================
MOBILE MENU CLICK FIX
Prevent hero overlay from blocking header
================================ */
.site-header,
header,
.main-header {
position: relative;
z-index: 9999;
}
.menu-toggle,
.mobile-menu-toggle,
.nav-toggle {
position: relative;
z-index: 10000;
pointer-events: auto;
}
@media (max-width: 768px) {
#hero,
.hero-carousel-centered,
.hero-bg-container,
.hero-overlay {
pointer-events: none;
}
#hero * {
pointer-events: none;
}
.site-header *,
.menu-toggle {
pointer-events: auto;
}
}
/* ==========================================================================
SINGLE PROJECT PAGE - Cloned from React ProjectDetail.tsx
========================================================================== */
/* Hero Section */
.single-project-page .project-hero {
position: relative;
height: 500px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.project-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.5), rgba(0,0,0,0.7));
}
.project-hero-content {
position: relative;
z-index: 10;
width: 100%;
padding-bottom: 3rem;
}
.project-hero .breadcrumb-light a,
.project-hero .breadcrumb-light span {
color: rgba(255,255,255,0.9);
}
.project-hero .breadcrumb-light a:hover {
color: #fff;
}
.project-hero-title {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
color: #fff;
max-width: 900px;
line-height: 1.2;
margin: 1.5rem 0;
text-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
.project-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.project-category-badge {
background: hsl(var(--color-primary));
color: #fff;
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
}
.project-date-info {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.9);
font-size: 0.9rem;
}
/* Project Details Card */
.project-details-card-section {
background: #fff;
padding: 0;
}
.project-details-card {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 2rem;
margin-top: -4rem;
position: relative;
z-index: 20;
border: 1px solid hsl(var(--color-border));
}
.project-details-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
@media (max-width: 1024px) {
.project-details-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.project-details-grid {
grid-template-columns: 1fr;
}
}
.project-detail-item .detail-label {
font-size: 0.75rem;
font-weight: 600;
color: hsl(var(--color-muted-foreground));
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.project-detail-item .detail-value {
font-size: 1rem;
font-weight: 500;
color: hsl(var(--color-foreground));
}
.detail-with-icon {
display: flex;
align-items: center;
gap: 0.5rem;
}
.icon-primary {
color: hsl(var(--color-primary));
}
/* Main Content Section */
.project-main-content-section {
padding: 4rem 0;
background: #fff;
}
.project-content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
}
@media (max-width: 1024px) {
.project-content-grid {
grid-template-columns: 1fr;
}
}
/* Main Column */
.project-main-column {
display: flex;
flex-direction: column;
gap: 3rem;
}
.content-block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.content-heading {
font-size: 1.5rem;
font-weight: 700;
color: hsl(var(--color-foreground));
display: flex;
align-items: center;
gap: 0.75rem;
}
.content-heading svg {
color: hsl(var(--color-primary));
}
.content-text {
font-size: 1.125rem;
line-height: 1.75;
color: hsl(var(--color-muted-foreground));
}
/* Region Tags */
.region-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.region-tag {
background: hsl(var(--color-primary) / 0.1);
color: hsl(var(--color-primary));
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
}
/* Partners List */
.partners-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.partners-list li {
display: flex;
align-items: center;
gap: 0.75rem;
color: hsl(var(--color-muted-foreground));
}
.partners-list .bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: hsl(var(--color-primary));
flex-shrink: 0;
}
/* Objectives List */
.objectives-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.objectives-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.objective-number {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: hsl(var(--color-primary) / 0.1);
color: hsl(var(--color-primary));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.875rem;
font-weight: 700;
margin-top: 0.125rem;
}
.objectives-list li span:last-child {
color: hsl(var(--color-muted-foreground));
}
/* Outcomes List */
.outcomes-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.outcomes-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.outcome-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
margin-top: 0.5rem;
}
.outcomes-list li span:last-child {
color: hsl(var(--color-muted-foreground));
}
/* Sidebar */
.project-sidebar-column {
display: flex;
flex-direction: column;
gap: 2rem;
position: sticky;
top: 100px;
align-self: flex-start;
}
.sidebar-card {
border-radius: var(--radius-lg);
padding: 1.5rem;
position: relative;
z-index: 1;
}
.sidebar-experts {
background: hsl(var(--color-muted));
border: 1px solid hsl(var(--color-border));
}
.sidebar-contact {
background: hsl(var(--color-primary) / 0.05);
border: 1px solid hsl(var(--color-primary) / 0.1);
}
.sidebar-fields {
background: #fff;
border: 1px solid hsl(var(--color-border));
}
.sidebar-title {
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--color-foreground));
margin-bottom: 1.5rem;
}
/* Experts List */
.experts-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.expert-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: #fff;
border-radius: 0.75rem;
border: 1px solid rgba(147,49,131,0.1);
transition: all 0.2s;
}
.expert-item:hover {
border-color: rgba(147,49,131,0.3);
box-shadow: 0 4px 12px rgba(147,49,131,0.1);
transform: translateX(2px);
}
.expert-image {
width: 64px;
height: 64px;
min-width: 64px;
border-radius: 50%;
object-fit: cover;
object-position: top center;
border: 2px solid hsl(var(--color-primary) / 0.25);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
background: rgba(147,49,131,0.08);
}
.expert-name {
font-weight: 700;
font-size: 0.9rem;
color: hsl(var(--color-foreground));
margin: 0 0 0.2rem;
line-height: 1.3;
}
.expert-role {
font-size: 0.78rem;
color: hsl(var(--color-muted-foreground));
line-height: 1.4;
margin: 0;
}
.sidebar-btn {
margin-top: 1.5rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: hsl(var(--color-primary));
color: hsl(var(--color-primary-foreground));
border: 2px solid hsl(var(--color-primary));
padding: 0.625rem 1.25rem;
border-radius: var(--radius);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: all 0.3s ease;
}
.sidebar-btn:hover {
background: white;
color: hsl(var(--color-primary));
border-color: hsl(var(--color-primary));
}
.sidebar-btn svg {
transition: transform 0.3s ease;
}
.sidebar-btn:hover svg {
transform: translateX(4px);
}
/* Contact Links */
.contact-intro {
color: hsl(var(--color-muted-foreground));
margin-bottom: 1rem;
font-size: 0.9rem;
}
.contact-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-link {
display: flex;
align-items: center;
gap: 0.75rem;
color: hsl(var(--color-muted-foreground));
text-decoration: none;
transition: color 0.2s;
}
.contact-link:hover {
color: hsl(var(--color-primary));
}
/* Fields Tags */
.fields-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.field-tag {
background: hsl(var(--color-muted));
color: hsl(var(--color-foreground));
padding: 0.375rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
}
/* CTA Section */
.project-cta-section {
padding: 4rem 0;
background: #f3f4f6;
}
.cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 1.875rem;
font-weight: 700;
color: hsl(var(--color-foreground));
margin-bottom: 1rem;
}
.cta-content p {
color: hsl(var(--color-muted-foreground));
margin-bottom: 2rem;
}
.cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.cta-buttons .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: var(--radius-sm);
text-decoration: none;
transition: all 0.2s;
}
.cta-buttons .btn-primary {
background: hsl(var(--color-primary));
color: #fff;
}
.cta-buttons .btn-primary:hover {
background: hsl(var(--color-secondary));
}
.cta-buttons .btn-outline {
background: transparent;
color: hsl(var(--color-foreground));
border: 1px solid hsl(var(--color-border));
}
.cta-buttons .btn-outline:hover {
background: hsl(var(--color-muted));
}
/* Related Projects Section */
.related-projects-section {
padding: 5rem 0;
background: #fff;
}
.related-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
flex-wrap: wrap;
gap: 1rem;
}
.related-header-text h2 {
font-size: 1.875rem;
font-weight: 700;
color: hsl(var(--color-foreground));
}
.related-header-text p {
color: hsl(var(--color-muted-foreground));
margin-top: 0.5rem;
}
.related-header .btn-outline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
border: 1px solid hsl(var(--color-border));
border-radius: var(--radius-sm);
color: hsl(var(--color-foreground));
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
}
.related-header .btn-outline:hover {
background: hsl(var(--color-muted));
}
.related-projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 1024px) {
.related-projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.related-projects-grid {
grid-template-columns: 1fr;
}
}
.related-project-card {
position: relative;
height: 300px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
text-decoration: none;
display: block;
transition: all 0.5s ease;
}
.related-project-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.related-project-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.related-project-card:hover .related-project-image {
transform: scale(1.1);
}
.related-project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4), transparent);
}
.related-project-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
color: #fff;
}
.related-project-category {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.8;
}
.related-project-title {
font-size: 1.25rem;
font-weight: 700;
margin-top: 0.5rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-project-location {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
opacity: 0.9;
margin-top: 0.5rem;
}
/* Mobile Responsive for Single Project */
@media (max-width: 768px) {
.single-project-page .project-hero {
height: 400px;
}
.project-details-card {
margin-top: -2rem;
padding: 1.5rem;
}
.project-main-content-section {
padding: 2rem 0;
}
.content-heading {
font-size: 1.25rem;
}
.content-text {
font-size: 1rem;
}
.related-projects-section {
padding: 3rem 0;
}
.related-header h2 {
font-size: 1.5rem;
}
}
/* ==========================================================================
FIX #1: Testimonial Carousel - Smaller buttons on mobile
========================================================================== */
.testimonials-section-magenta .testimonial-nav {
width: 40px;
height: 40px;
}
@media (max-width: 768px) {
.testimonials-section-magenta .testimonial-nav {
width: 32px;
height: 32px;
padding: 0.25rem;
}
.testimonials-section-magenta .testimonial-nav svg {
width: 14px;
height: 14px;
}
.testimonials-section-magenta .testimonial-dots {
padding: 0.375rem 0.75rem;
gap: 0.375rem;
}
.testimonials-section-magenta .testimonial-dot {
width: 6px;
height: 6px;
}
.testimonials-section-magenta .testimonial-dot.active {
width: 1.5rem;
}
}
/* ==========================================================================
FIX #2: Project Detail Page - Spacing between hero and details card
========================================================================== */
.single-project-page .project-details-card-section {
padding-top: 2rem;
}
@media (max-width: 768px) {
.single-project-page .project-details-card {
margin-top: 1rem;
}
.single-project-page .project-hero {
margin-bottom: 0;
}
}
/* ==========================================================================
FIX #3: Expert Images - Ensure images load properly with fallback styling
========================================================================== */
.sidebar-experts .expert-item .expert-image {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
border-radius: 50%;
object-fit: cover;
object-position: top center;
background: rgba(147,49,131,0.1);
border: 2px solid rgba(147,49,131,0.2);
}
/* Fallback placeholder style for broken images */
.sidebar-experts .expert-item .expert-image:not([src]),
.sidebar-experts .expert-item .expert-image[src=""],
.sidebar-experts .expert-item .expert-image.placeholder {
background: rgba(147,49,131,0.12);
}
/* ==========================================================================
FIX #4: Related Projects - Make text overlay visible on images
========================================================================== */
.related-project-card {
position: relative;
height: 300px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
text-decoration: none;
display: block;
transition: all 0.5s ease;
}
.related-project-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.2) 100%);
pointer-events: none;
}
.related-project-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
color: #fff;
z-index: 10;
}
.related-project-category {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.95);
background: hsl(var(--color-primary));
padding: 0.25rem 0.625rem;
border-radius: 4px;
display: inline-block;
margin-bottom: 0.5rem;
}
.related-project-title {
font-size: 1.25rem;
font-weight: 700;
margin-top: 0.5rem;
line-height: 1.3;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-project-location {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: rgba(255,255,255,0.9);
margin-top: 0.75rem;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.related-project-location svg {
color: rgba(255,255,255,0.85);
}
/* ==========================================================================
FIX #5: Homepage Projects Section - Match Lovable format EXACTLY
========================================================================== */
/* Reset any conflicting styles */
.projects-section-home .projects-list-vertical {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
/* Project Card - Horizontal layout matching React ProjectsSection.tsx */
.projects-section-home .homepage-project-card {
display: flex;
flex-direction: column;
background: hsl(var(--color-card));
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid hsl(var(--color-border) / 0.5);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transition: all 0.5s ease;
text-decoration: none;
color: inherit;
}
@media (min-width: 768px) {
.projects-section-home .homepage-project-card {
flex-direction: row;
}
}
.projects-section-home .homepage-project-card:hover {
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
transform: translateY(-4px);
}
/* Image Container - Fixed width on desktop, matches React md:w-80 (320px) */
.projects-section-home .homepage-project-image {
width: 100%;
height: 16rem; /* h-64 = 256px */
overflow: hidden;
background: hsl(var(--color-muted));
position: relative;
flex-shrink: 0;
}
@media (min-width: 768px) {
.projects-section-home .homepage-project-image {
width: 20rem; /* md:w-80 = 320px */
height: auto;
min-height: 200px;
}
}
.projects-section-home .homepage-project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.projects-section-home .homepage-project-card:hover .homepage-project-image img {
transform: scale(1.05);
}
/* Info Container - Flex grow to fill remaining space */
.projects-section-home .homepage-project-info {
flex: 1;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Metadata Row - Date, Location, Category with icons and separators */
.projects-section-home .homepage-project-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: hsl(var(--color-muted-foreground));
margin-bottom: 0.75rem;
}
.projects-section-home .homepage-meta-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.projects-section-home .homepage-meta-item svg {
width: 1rem;
height: 1rem;
color: hsl(var(--color-muted-foreground));
flex-shrink: 0;
}
.projects-section-home .homepage-meta-separator {
color: hsl(var(--color-border));
}
/* Title - Magenta/Primary color, changes on hover */
.projects-section-home .homepage-project-title {
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--color-primary));
margin-bottom: 1rem;
margin-top: 0;
transition: color 0.3s ease;
line-height: 1.3;
}
@media (min-width: 768px) {
.projects-section-home .homepage-project-title {
font-size: 1.5rem;
}
}
.projects-section-home .homepage-project-card:hover .homepage-project-title {
color: hsl(var(--color-primary) / 0.8);
}
/* Status Badge */
.projects-section-home .homepage-project-status {
display: inline-block;
width: fit-content;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.projects-section-home .homepage-project-status.status-completed {
background: hsl(var(--color-muted));
color: hsl(var(--color-muted-foreground));
}
.projects-section-home .homepage-project-status.status-current {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
border: 1px solid rgba(34, 197, 94, 0.3);
}
/* View All Button Section */
.projects-section-home .view-all-projects {
text-align: center;
margin-top: 2.5rem;
margin-bottom: 0;
padding-bottom: 0;
}
.projects-section-home .view-all-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: hsl(var(--color-primary));
color: hsl(var(--color-primary-foreground));
padding: 0.75rem 2rem;
font-size: 1.125rem;
font-weight: 500;
border-radius: var(--radius);
text-decoration: none;
transition: background 0.3s ease;
}
.projects-section-home .view-all-btn:hover {
background: hsl(var(--color-primary) / 0.9);
}
.projects-section-home .view-all-btn svg {
width: 1.25rem;
height: 1.25rem;
}
/* Mobile adjustments */
@media (max-width: 639px) {
.projects-section-home .homepage-project-info {
padding: 1rem;
}
.projects-section-home .homepage-project-meta {
font-size: 0.75rem;
}
.projects-section-home .homepage-project-title {
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
.projects-section-home .homepage-project-image {
height: 12rem;
}
}
/* ===== GLOBAL HERO TEXT FIXES - WHITE TEXT ON ALL HEROES ===== */
/* Hero sections should have white text - CRITICAL FIX */
section[class*="hero"] h1,
section[class*="hero"] h2,
section[class*="hero"] .breadcrumb,
section[class*="hero"] .breadcrumb a,
section[class*="hero"] .breadcrumb span,
section[class*="hero"] .breadcrumb li,
section[class*="hero"] .breadcrumb-light,
section[class*="hero"] .breadcrumb-light a,
section[class*="hero"] .breadcrumb-light span,
section[class*="hero"] .breadcrumb-light li,
section[class*="hero"] nav,
section[class*="hero"] nav a,
section[class*="hero"] nav span,
section[class*="hero"] nav li,
.course-hero *,
.course-hero,
.course-hero h1,
.course-hero .breadcrumb,
.course-hero .breadcrumb a,
.course-hero .breadcrumb li,
.course-hero .breadcrumb span,
.course-hero .course-hero-title,
.course-hero nav,
.course-hero nav *,
.project-hero *,
.impact-hero *,
.ow-hero *,
.ac-hero * {
color: #ffffff !important;
}
/* Breadcrumb specific styling */
section[class*="hero"] .breadcrumb a,
section[class*="hero"] nav a,
.breadcrumb-light a,
.course-hero .breadcrumb a,
.course-hero nav a {
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: none;
transition: color 0.3s;
}
section[class*="hero"] .breadcrumb a:hover,
section[class*="hero"] nav a:hover,
.breadcrumb-light a:hover,
.course-hero .breadcrumb a:hover,
.course-hero nav a:hover {
color: #ffffff !important;
}
/* Ensure text shadows for readability */
section[class*="hero"] h1,
section[class*="hero"] h2,
.course-hero h1,
.course-hero .course-hero-title {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Project hero specific */
.project-hero .breadcrumb-light a,
.project-hero .breadcrumb-light span {
color: rgba(255, 255, 255, 0.9) !important;
}
.project-hero .breadcrumb-light a:hover {
color: #ffffff !important;
}
/* ==========================================================================
HOMEPAGE + FOOTER LAYOUT RECOVERY FIXES
Root cause: new template classes were deployed without the matching base CSS.
These rules restore the intended homepage and footer layout and keep it responsive.
========================================================================== */
/* Accessibility / small utilities */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
clip: auto;
width: auto;
height: auto;
margin: 1rem;
padding: 0.75rem 1rem;
background: hsl(var(--color-primary));
color: #fff;
border-radius: var(--radius-sm);
z-index: 100000;
}
.ml-2 { margin-left: 0.5rem; }
.text-primary { color: hsl(var(--color-primary)); }
.font-bold { font-weight: 700; }
@keyframes fifeFadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fifeFadeInUp 0.7s ease both;
}
/* Front-page hero */
.hero-carousel-centered {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
background: #120411;
padding: 6rem 0 5rem;
isolation: isolate;
}
.hero-bg-container {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
}
.hero-bg-slide.active {
opacity: 1;
}
.hero-bg-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(17, 4, 17, 0.55) 0%, rgba(17, 4, 17, 0.35) 28%, rgba(17, 4, 17, 0.72) 100%);
}
.hero-centered-content {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
display: flex;
align-items: center;
}
.hero-content-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(24px);
pointer-events: none;
transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-content-slide.active {
position: absolute;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hero-content-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
padding: 0 1rem;
}
.hero-glass-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(4rem, 10vw, 6.5rem);
height: clamp(4rem, 10vw, 6.5rem);
margin-bottom: 1.5rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-xl);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--shadow-glass);
}
.hero-glass-icon svg {
width: clamp(1.4rem, 3vw, 2.75rem);
height: clamp(1.4rem, 3vw, 2.75rem);
color: #fff;
}
.hero-main-title {
margin-bottom: 1rem;
font-size: clamp(2rem, 5vw, 4.75rem);
line-height: 1.05;
color: #fff;
text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.hero-cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.hero-btn-primary,
.hero-btn-outline {
min-width: 160px;
}
.hero-dot-indicators {
position: absolute;
left: 50%;
bottom: 1.75rem;
transform: translateX(-50%);
z-index: 3;
display: flex;
align-items: center;
gap: 0.75rem;
}
.hero-dot {
width: 10px;
height: 10px;
border: 0;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
transition: all 0.3s ease;
}
.hero-dot.active {
width: 34px;
background: #fff;
}
/* Shared section headers / utilities */
.section-title-primary,
.section-title-centered {
margin-bottom: 0.75rem;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;
}
.section-title-primary {
text-align: center;
color: hsl(var(--color-primary));
}
.section-title-centered {
text-align: center;
}
.section-subtitle-centered {
max-width: 760px;
margin: 0 auto 3rem;
text-align: center;
font-size: 1.05rem;
color: hsl(var(--color-muted-foreground));
}
.section-header-centered {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto 3rem;
text-align: center;
}
.section-header-centered h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 0.75rem;
}
.section-header-centered p {
color: hsl(var(--color-muted-foreground));
font-size: 1.05rem;
}
.title-underline {
width: 88px;
height: 4px;
margin: 1rem auto 0;
border-radius: 9999px;
background: var(--gradient-primary);
}
/* Mission */
.mission-section {
padding: 3rem 0;
background: #fff;
}
.mission-content {
max-width: 980px;
margin: 0 auto;
}
.mission-text {
font-size: clamp(1.25rem, 3vw, 2rem);
line-height: 1.45;
text-align: center;
color: hsl(var(--color-foreground));
}
/* Services */
.services-section-enhanced {
padding: 5rem 0;
background: #f3f4f6;
}
.services-hero-image {
margin: 0 auto 2rem;
max-width: 1100px;
overflow: hidden;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}
.services-hero-image img {
width: 100%;
height: clamp(220px, 40vw, 420px);
object-fit: cover;
}
.services-grid-5col {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.5rem;
}
.service-card-lovable {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 1.5rem;
background: #fff;
color: inherit;
text-decoration: none;
border: 1px solid hsl(var(--color-border));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card-lovable:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: hsl(var(--color-primary) / 0.25);
}
.service-icon-box {
width: 4rem;
height: 4rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
background: hsl(var(--color-primary) / 0.08);
border-radius: var(--radius-lg);
color: hsl(var(--color-primary));
}
.service-icon-box svg {
width: 2rem;
height: 2rem;
}
.service-card-lovable h3 {
margin-bottom: 0.75rem;
font-size: 1.2rem;
color: hsl(var(--color-foreground));
}
.service-card-lovable p {
margin-bottom: 1rem;
color: hsl(var(--color-muted-foreground));
}
.more-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
color: hsl(var(--color-primary));
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.more-link svg {
width: 1rem;
height: 1rem;
}
/* Approaches */
.approaches-section {
padding: 5rem 0;
background: #fff;
}
.approaches-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
.approach-card-glass {
overflow: hidden;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.approach-card-glass:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.approach-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.approach-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.approach-card-glass:hover .approach-image img {
transform: scale(1.06);
}
.approach-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 5, 20, 0.06) 0%, rgba(20, 5, 20, 0.25) 100%);
}
.approach-content {
padding: 1.5rem;
}
.approach-icon {
width: 3.5rem;
height: 3.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
background: hsl(var(--color-primary));
color: #fff;
border-radius: var(--radius-lg);
}
.approach-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.approach-content h3 {
margin-bottom: 0.75rem;
}
.approach-content p {
color: hsl(var(--color-muted-foreground));
}
/* Partners */
.partners-section-main {
position: relative;
overflow: hidden;
padding: 5rem 0;
background: hsl(var(--color-muted));
isolation: isolate;
}
.partners-bg-mesh,
.partners-bg-blob {
position: absolute;
pointer-events: none;
}
.partners-bg-mesh {
inset: 0;
background: var(--gradient-mesh);
opacity: 0.85;
}
.partners-bg-blob {
width: 360px;
height: 360px;
right: -120px;
top: -80px;
border-radius: 50%;
background: transparent;
filter: blur(6px);
}
.partners-logos-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.partner-logo-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--radius-xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-lg);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-logo-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.partner-logo-card img {
max-height: 70px;
width: auto;
object-fit: contain;
}
/* Testimonials */
.testimonials-section-magenta {
padding: 5rem 0;
background: var(--gradient-primary);
color: #fff;
}
.testimonials-title {
margin-bottom: 0.75rem;
text-align: center;
color: #fff;
font-size: clamp(2rem, 4vw, 3rem);
}
.testimonials-subtitle {
max-width: 720px;
margin: 0 auto 2.5rem;
text-align: center;
color: rgba(255, 255, 255, 0.82);
}
.testimonial-carousel-container {
max-width: 920px;
margin: 0 auto;
}
.testimonial-card-main {
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-xl);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--shadow-glass);
}
.quote-icon {
display: flex;
justify-content: center;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
}
.quote-icon svg {
width: 56px;
height: 56px;
}
.testimonial-quote {
margin-bottom: 1.75rem;
text-align: center;
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: 1.75;
color: #fff;
}
.testimonial-author-info {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.author-avatar {
width: 3.25rem;
height: 3.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
font-weight: 700;
font-size: 1.125rem;
}
.author-name {
margin-bottom: 0.15rem;
color: #fff;
font-weight: 700;
}
.author-position {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9375rem;
}
.testimonial-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
}
.testimonial-nav-btn {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease;
}
.testimonial-nav-btn:hover {
background: rgba(255, 255, 255, 0.22);
transform: translateY(-1px);
}
.testimonial-dots {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
}
.testimonial-dot {
width: 8px;
height: 8px;
border: 0;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.25s ease;
}
.testimonial-dot.active {
width: 28px;
background: #fff;
}
/* Projects / clients */
.projects-section-home {
padding: 5rem 0;
background: #fff;
}
.clients-carousel-section {
padding: 5rem 0;
background: hsl(var(--color-muted));
overflow: hidden;
}
.clients-carousel-wrapper {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients-carousel-track {
display: flex;
align-items: center;
gap: 1.25rem;
width: max-content;
animation: fifeClientScroll 42s linear infinite;
}
.clients-carousel-wrapper:hover .clients-carousel-track {
animation-play-state: paused;
}
@keyframes fifeClientScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.client-logo-card {
min-width: 220px;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem 1.5rem;
background: #fff;
border: 1px solid hsl(var(--color-border));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.client-logo-card img {
max-width: 100%;
max-height: 56px;
width: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.82;
transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.client-logo-card:hover img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.02);
}
/* Footer */
.site-footer {
position: relative;
overflow: hidden;
padding: 5rem 0 2rem;
background: #933183;
color: #fff;
isolation: isolate;
}
.site-footer .container {
position: relative;
z-index: 1;
}
.footer-bg-mesh {
position: absolute;
inset: 0;
background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.08) 0%, transparent 35%),
radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.06) 0%, transparent 35%),
radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
opacity: 0.8;
}
.footer-bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(12px);
opacity: 0.35;
}
.footer-bg-orb-1 {
top: -80px;
left: -60px;
width: 220px;
height: 220px;
background: rgba(255, 255, 255, 0.12);
}
.footer-bg-orb-2 {
right: -90px;
bottom: -90px;
width: 260px;
height: 260px;
background: rgba(255, 255, 255, 0.08);
}
.footer-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
gap: 2rem 3rem;
}
.footer-brand p,
.footer-column p,
.footer-column li,
.contact-item-footer {
color: rgba(255, 255, 255, 0.82);
}
.footer-brand .custom-logo-link,
.footer-brand > img,
.footer-logo {
display: inline-flex;
margin-bottom: 1rem;
}
.footer-brand .custom-logo,
.footer-logo,
.footer-brand .custom-logo-link img {
width: auto;
max-height: 64px;
}
.footer-column h4,
.footer-subtitle {
margin-bottom: 1rem;
color: #fff;
font-size: 1.125rem;
}
.footer-subtitle {
margin-top: 1.5rem;
}
.footer-column ul {
list-style: none;
display: grid;
gap: 0.75rem;
}
.footer-column a,
.footer-legal-links a,
.site-footer .footer-brand a {
color: rgba(255, 255, 255, 0.82);
}
.footer-column a:hover,
.footer-legal-links a:hover,
.site-footer .footer-brand a:hover {
color: #fff;
}
.footer-column li a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.footer-arrow {
color: rgba(255, 255, 255, 0.64);
transition: transform 0.25s ease;
}
.footer-column a:hover .footer-arrow {
transform: translateX(2px);
}
.contact-items {
display: grid;
gap: 1rem;
}
.contact-item-footer {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.contact-icon-box,
.social-icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-icon-box {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.social-icon-box {
width: 2.75rem;
height: 2.75rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
transition: transform 0.25s ease, background 0.25s ease;
}
.social-icon-box:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.2);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 2rem;
margin-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.72);
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
/* Responsive recovery */
@media (max-width: 1199px) {
.services-grid-5col {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.approaches-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.hero-carousel-centered {
min-height: 78svh;
padding-top: 5rem;
}
.hero-content-slide {
padding-top: 1rem;
}
.partners-logos-grid,
.approaches-grid,
.footer-grid {
grid-template-columns: 1fr;
}
.services-grid-5col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.client-logo-card {
min-width: 180px;
}
.testimonial-author-info {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 639px) {
.services-grid-5col {
grid-template-columns: 1fr;
}
.clients-carousel-wrapper {
-webkit-mask-image: none;
mask-image: none;
}
.clients-carousel-track {
animation-duration: 34s;
}
.footer-brand .custom-logo,
.footer-logo,
.footer-brand .custom-logo-link img {
max-height: 54px;
}
}
.footer-contact {
position: relative;
}
.nav-dropdown-item-with-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
/* ========================================
Multilingual switcher improvements
======================================== */
.language-select,
.mobile-language-select {
cursor: pointer;
}
/* ========================================
Training page
======================================== */
.training-page { background:#fff; }
.training-container { width:min(1200px, calc(100% - 2rem)); margin:0 auto; }
.training-section { padding:5rem 0; }
.training-card { background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:24px; box-shadow:0 16px 40px rgba(15,23,42,.08); }
.training-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.85rem 1.4rem; border-radius:999px; text-decoration:none; font-weight:600; transition:.25s ease; }
.training-btn-primary { background:#933183; color:#fff; }
.training-btn-primary:hover { background:#741d66; }
.training-btn-secondary { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); }
.training-btn-secondary:hover { background:rgba(255,255,255,.18); }
.training-section-header { text-align:center; max-width:760px; margin:0 auto 2.5rem; }
.training-section-header h2 { margin:0 0 .75rem; font-size:clamp(2rem,4vw,3rem); color:#111827; }
.training-section-header p { margin:0; color:#5b6472; font-size:1.05rem; }
.training-section-kicker { display:inline-block; margin-bottom:1rem; color:#933183; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }
.training-icon-box { width:3.5rem; height:3.5rem; border-radius:1rem; background:rgba(147,49,131,.12); color:#933183; display:flex; align-items:center; justify-content:center; }
.training-icon-box svg { width:1.6rem; height:1.6rem; }
.training-hero { position:relative; min-height:720px; overflow:hidden; }
.training-hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s ease; }
.training-hero-slide.is-active { opacity:1; visibility:visible; }
.training-hero-media, .training-hero-media img { width:100%; height:100%; }
.training-hero-media img { object-fit:cover; }
.training-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(17,24,39,.82) 0%, rgba(17,24,39,.55) 50%, rgba(17,24,39,.2) 100%); }
.training-hero-content { position:relative; z-index:2; min-height:720px; display:flex; flex-direction:column; justify-content:center; color:#fff; padding:7rem 0 6rem; }
.training-breadcrumb { margin-bottom:1rem; }
.training-breadcrumb a { color:rgba(255,255,255,.82); text-decoration:none; font-weight:600; }
.training-hero h1 { margin:0 0 1rem; color:#fff; font-size:clamp(2.5rem, 6vw, 4.6rem); line-height:1.05; max-width:760px; }
.training-hero p { max-width:640px; font-size:1.1rem; line-height:1.7; color:rgba(255,255,255,.92); }
.training-hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.75rem; }
.training-hero-nav { position:absolute; inset:50% 1rem auto; transform:translateY(-50%); display:flex; justify-content:space-between; z-index:3; pointer-events:none; }
.training-hero-arrow { pointer-events:auto; width:52px; height:52px; border:none; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; font-size:2rem; line-height:1; cursor:pointer; backdrop-filter:blur(8px); }
.training-hero-dots { position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:3; display:flex; gap:.75rem; }
.training-hero-dot { width:12px; height:12px; border:none; border-radius:999px; background:rgba(255,255,255,.45); cursor:pointer; transition:.25s ease; }
.training-hero-dot.is-active { width:36px; background:#fff; }
.training-tour-section { padding:5rem 0; background:#faf5fb; }
.training-tour-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; }
.training-tour-copy h2 { margin:0 0 1rem; font-size:clamp(2rem,4vw,3.2rem); }
.training-tour-copy h2 span { color:#933183; }
.training-tour-copy p { color:#5b6472; line-height:1.8; }
.training-tour-media { min-height:420px; overflow:hidden; border-radius:28px; box-shadow:0 22px 50px rgba(15,23,42,.14); }
.training-tour-media img { width:100%; height:100%; object-fit:cover; }
.training-vision-grid, .training-courses-grid, .training-team-grid, .training-stats-grid { display:grid; gap:1.5rem; }
.training-vision-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
.training-vision-card, .training-why-card, .training-team-card, .training-testimonial-card, .training-stat-card { padding:1.6rem; }
.training-vision-card h3, .training-why-card h3, .training-team-card h3 { margin:1rem 0 .55rem; }
.training-vision-card p, .training-why-card p, .training-team-card p { color:#5b6472; }
.training-courses-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.training-course-card { overflow:hidden; }
.training-course-image { position:relative; aspect-ratio:16/10; }
.training-course-image img { width:100%; height:100%; object-fit:cover; }
.training-course-badge, .training-course-price { position:absolute; top:1rem; padding:.45rem .75rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.training-course-badge { left:1rem; background:rgba(17,24,39,.82); color:#fff; }
.training-course-price { right:1rem; background:#fff; color:#933183; }
.training-course-body { padding:1.5rem; }
.training-course-body h3 { margin:0 0 .75rem; font-size:1.25rem; }
.training-course-body h3 a { text-decoration:none; color:#111827; }
.training-course-meta, .training-course-body p { color:#5b6472; }
.training-course-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; padding-top:1rem; margin-top:1rem; border-top:1px solid rgba(15,23,42,.08); color:#374151; font-size:.92rem; }
.training-section-cta { display:flex; justify-content:center; margin-top:2rem; }
.training-why-section { background:#faf7fc; }
.training-why-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; }
.training-team-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
.training-team-image { width:110px; height:110px; margin:0 auto 1rem; border-radius:999px; overflow:hidden; }
.training-team-image img { width:100%; height:100%; object-fit:cover; }
.training-team-card { text-align:center; }
.training-team-role { color:#933183 !important; font-weight:700; }
.training-testimonials-section { background:#ffffff; }
.training-testimonials-shell { overflow:hidden; }
.training-testimonials-track { display:flex; transition:transform .45s ease; }
.training-testimonial-card { min-width:100%; text-align:center; }
.training-stars { color:#d97706; font-size:1.1rem; letter-spacing:.15rem; }
.training-testimonial-card blockquote { margin:1rem auto; max-width:760px; font-size:1.2rem; line-height:1.8; color:#1f2937; }
.training-testimonial-name { font-weight:700; color:#111827; margin-bottom:.25rem; }
.training-testimonial-role { color:#5b6472; }
.training-testimonial-dots { display:flex; justify-content:center; gap:.75rem; margin-top:1rem; }
.training-testimonial-dot { width:12px; height:12px; border:none; border-radius:999px; background:#d6b0cf; cursor:pointer; }
.training-testimonial-dot.is-active { background:#933183; }
.training-stats-section { padding:0 0 5rem; }
.training-stats-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
.training-stat-card { text-align:center; }
.training-stat-card h3 { margin:0; color:#933183; font-size:clamp(2rem,4vw,3rem); }
.training-stat-card p { margin:.5rem 0 0; color:#5b6472; }
@media (max-width: 1024px) {
.training-tour-grid, .training-vision-grid, .training-courses-grid, .training-why-grid, .training-team-grid, .training-stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
.training-section { padding:4rem 0; }
.training-hero, .training-hero-content { min-height:640px; }
.training-tour-grid, .training-vision-grid, .training-courses-grid, .training-why-grid, .training-team-grid, .training-stats-grid, .training-course-stats { grid-template-columns:1fr; }
.training-hero-nav { inset:auto 1rem 5.25rem; transform:none; }
.training-hero p { font-size:1rem; }
}
/* ========================================
Our Impact map and footer consistency
======================================== */
.impact-map-section { padding:4rem 0 5rem; }
.impact-map-panel { background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 18px 42px rgba(15,23,42,.09); border:1px solid rgba(15,23,42,.08); }
.impact-map-header { background:#933183; color:#fff; padding:2rem; margin-bottom:0; }
.impact-map-header h2 { color:#fff; margin:0 0 .35rem; }
.impact-map-header-copy { margin:0; max-width:640px; color:rgba(255,255,255,.9); }
.impact-map-filters-wrap { display:flex; flex-direction:column; gap:.65rem; }
.impact-map-filter-label { font-weight:700; color:#fff; }
.impact-map-filters { align-items:center; }
.impact-map-filter-btn { min-height:44px; }
.impact-map-controls { background:#f8fafc; padding:.9rem 1rem; display:flex; justify-content:space-between; flex-wrap:wrap; }
.impact-map-container { min-height:460px; }
.impact-map-image { display:block; width:100%; height:clamp(380px, 52vw, 620px); object-fit:cover; }
.impact-map-markers, .impact-map-continent-names { position:absolute; inset:0; pointer-events:none; }
.impact-map-marker, .map-cluster { pointer-events:auto; }
.impact-map-marker { position:absolute; transform:translate(-50%, -100%); display:flex; flex-direction:column; align-items:center; gap:.35rem; border:none; background:none; cursor:pointer; z-index:12; }
.impact-map-marker-dot { width:14px; height:14px; border-radius:999px; background:#f59e0b; border:3px solid #fff; box-shadow:0 0 0 4px rgba(245,158,11,.2); }
.impact-map-marker-text { max-width:170px; padding:.35rem .55rem; border-radius:999px; background:rgba(17,24,39,.82); color:#fff; font-size:.72rem; font-weight:600; line-height:1.2; text-align:center; opacity:0; transform:translateY(4px); transition:.2s ease; }
.impact-map-marker:hover .impact-map-marker-text,
.impact-map-marker:focus-visible .impact-map-marker-text,
.impact-map-marker.is-visible .impact-map-marker-text { opacity:1; transform:translateY(0); }
.map-continent-name { position:absolute; transform:translate(-50%, -50%); font-weight:800; font-size:.95rem; letter-spacing:.03em; color:#1f2937; text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.9); }
.map-cluster-count { background:#933183; }
.map-cluster-label { opacity:1; font-size:.78rem; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.impact-project-card.is-highlighted { border-color:#933183; box-shadow:0 16px 36px rgba(147,49,131,.16); }
.our-impact-page + .site-footer,
body.page-template-page-our-impact .site-footer { margin-top:0; }
@media (max-width: 767px) {
.impact-map-header, .impact-map-controls { padding:1rem; }
.impact-map-controls { gap:.75rem; }
.impact-map-control-btn { flex:1 1 auto; justify-content:center; }
.impact-map-marker-text { display:none; }
.map-continent-name { font-size:.7rem; }
.map-cluster-count { width:2.7rem; height:2.7rem; font-size:.85rem; }
}
/* === 2026-03 task fixes === */
.hero-btn-primary,
.hero-btn-outline {
border-radius: 999px;
}
.hero-btn-primary {
background: #933183;
}
.hero-btn-primary:hover,
.hero-btn-primary:focus-visible {
background: #6f1d63;
}
.hero-btn-outline:hover,
.hero-btn-outline:focus-visible {
background: rgba(255,255,255,0.22);
}
.clients-carousel-track {
animation-duration: 72s;
}
.impact-map-marker {
text-decoration: none;
}
.map-continent-name {
font-weight: 900;
color: #111827;
}
.hero-working-with-us {
background: linear-gradient(rgba(17,24,39,.55), rgba(17,24,39,.45)), url('assets/images/hero-the-team.jpg') center/cover no-repeat;
min-height: 520px;
display: flex;
align-items: center;
}
.domain-icon,
.requirement-item .icon {
width: 3rem;
height: 3rem;
}
.requirement-item .icon {
flex: 0 0 3rem;
}
.page-template-page-who-we-are .text-highlight,
.page-template-page-who-we-are mark,
.page-template-page-doing-business-in-africa .text-highlight,
.page-template-page-doing-business-in-africa mark,
.page-template-page-doing-business-in-africa .event-detail-card strong,
.page-template-page-doing-business-in-africa .event-detail-card span {
color: #ffffff;
}
.page-template-page-doing-business-in-africa .event-hero {
background-image: linear-gradient(rgba(17,24,39,.58), rgba(17,24,39,.48)), url('assets/images/hero-how-we-think.jpg');
}
.page-template-page-ethical-humanitarianisms .eth-hero {
background-image: url('assets/images/heroes/research.jpg');
}
.training-hero-slide .training-hero-media img,
.training-team-image img,
.training-course-image img {
display: block;
}
.training-team-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* ================================================================
FIFE THEME — DEFINITIVE MOBILE RESPONSIVENESS
Author: Auto-generated comprehensive audit
Scope: max-width 1023px ONLY — desktop (≥1024px) UNTOUCHED
Coverage: Every template, every grid, every component
================================================================ */
/* ── 1. GLOBAL OVERFLOW PREVENTION ── */
@media (max-width: 1023px) {
html, body { overflow-x: hidden !important; width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe, embed, object { max-width: 100%; }
}
/* ── 2. CONTAINER ── */
@media (max-width: 767px) {
.container {
padding-left: 1rem !important;
padding-right: 1rem !important;
max-width: 100% !important;
}
.strategic-container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
/* ================================================================
3. HEADER & NAVIGATION
================================================================ */
@media (max-width: 1023px) {
.main-navigation { display: none !important; }
.mobile-menu-toggle { display: flex !important; }
}
@media (max-width: 767px) {
.site-header .container { padding: 0.75rem 1rem; }
.header-inner { gap: 0.5rem; }
.site-logo img { max-height: 36px; width: auto; }
.mobile-navigation { top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; }
.mobile-nav-content { padding: 1rem; }
.mobile-nav-group { margin-bottom: 0.75rem; }
.mobile-nav-title, .mobile-nav-link { min-height: 44px; display: flex; align-items: center; }
.mobile-language-select { width: 100%; margin: 0.75rem 0; }
.mobile-nav-btn { display: block; text-align: center; margin-top: 0.5rem; min-height: 44px; line-height: 44px; }
}
/* ================================================================
4. HOMEPAGE (front-page.php) — All sections
================================================================ */
/* Hero Carousel */
/* Homepage hero mobile rules moved to dedicated block below */
@media (min-width: 768px) and (max-width: 1023px) {
.hero-main-title { font-size: clamp(2rem, 4vw, 3rem) !important; }
.hero-content-inner { padding: 8rem 2rem 5rem; }
}
/* Mission */
@media (max-width: 767px) {
.mission-section { padding: 2.5rem 0; }
.mission-text { font-size: 1rem !important; line-height: 1.7; }
}
/* Services */
@media (max-width: 767px) {
.services-section-enhanced { padding: 3rem 0; }
.services-grid-5col { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem !important; }
.service-card-lovable { padding: 1.25rem 1rem; }
.service-card-lovable h3 { font-size: 0.875rem; }
.service-card-lovable p { font-size: 0.8rem; }
}
@media (max-width: 400px) {
.services-grid-5col { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.services-grid-5col { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Approaches */
@media (max-width: 767px) {
.approaches-section { padding: 3rem 0; }
.approaches-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.approach-card-glass { min-height: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.approaches-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Partners */
@media (max-width: 767px) {
.partners-logos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
.partner-logo-card { padding: 0.75rem; }
.partner-logo-card img { max-height: 48px; }
}
/* Homepage projects */
@media (max-width: 767px) {
.projects-section-home { padding: 3rem 0; }
.homepage-project-card {
flex-direction: column !important;
height: auto !important;
}
.homepage-project-image { width: 100% !important; height: 180px !important; }
.homepage-project-info { padding: 1rem !important; }
.homepage-project-title { font-size: 0.95rem !important; }
}
/* Clients carousel */
@media (max-width: 767px) {
.clients-carousel-section { padding: 2rem 0; }
.clients-carousel-wrapper { overflow: hidden !important; }
.client-logo-card { width: 120px; height: 60px; }
}
/* ================================================================
5. FOOTER
================================================================ */
@media (max-width: 767px) {
.site-footer { padding: 2.5rem 0 0; }
.footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.footer-brand { align-items: flex-start; }
.footer-social { margin-top: 1rem; }
.footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; padding: 1.25rem 0; }
.footer-legal-links { justify-content: center; flex-wrap: wrap; gap: 1rem; }
.footer-column li a { padding: 0.375rem 0; min-height: 36px; display: flex; align-items: center; gap: 0.375rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
}
/* ================================================================
6. SHARED HERO — All standard hero-section pages
================================================================ */
@media (max-width: 767px) {
.hero-section {
min-height: 300px !important;
padding: 4rem 0 2.5rem !important;
background-attachment: scroll !important;
}
.page-title, .hero-section h1,
section[class*="hero"] h1 {
font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
line-height: 1.2;
}
.hero-description,
section[class*="hero"] p { font-size: 0.9rem !important; }
.hero-tag, .hero-badge-pill, .event-badge { font-size: 0.72rem; padding: 0.3rem 0.75rem; }
.breadcrumb ol { flex-wrap: wrap; gap: 0.25rem; }
.breadcrumb li { font-size: 0.78rem; }
}
/* ================================================================
7. WHO WE ARE (page-who-we-are.php)
================================================================ */
@media (max-width: 767px) {
.who-hero { min-height: 320px !important; }
/* Vision/Mission 2-col → 1-col */
.vision-mission-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
.vm-card { border-radius: 1rem; padding: 1.5rem; }
/* Stats grid */
.who-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
/* Management team */
.who-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
.who-team-photo { height: 200px; }
}
@media (max-width: 400px) {
.who-team-grid { grid-template-columns: 1fr !important; }
}
/* ================================================================
8. THE TEAM PAGE (page-the-team.php)
================================================================ */
@media (max-width: 767px) {
.team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
.team-card { padding: 1rem; }
.team-image { height: 200px; }
.team-image img { height: 200px; }
.team-info h3 { font-size: 0.9rem; }
.team-info p { font-size: 0.78rem; }
/* Profile modal */
.profile-modal-content,
.team-modal-content {
width: 95vw !important;
max-width: 95vw !important;
max-height: 90vh;
overflow-y: auto;
margin: 0 auto;
border-radius: 1rem;
}
}
@media (max-width: 400px) {
.team-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.team-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* ================================================================
9. SINGLE TEAM MEMBER (single-fife_team.php)
================================================================ */
@media (max-width: 767px) {
.single-team-content { flex-direction: column !important; gap: 1.5rem; }
.team-member-image { width: 100% !important; max-width: 280px; margin: 0 auto; }
.team-member-image img { width: 100%; border-radius: 1rem; }
.team-member-info { width: 100% !important; }
.team-member-contact { flex-direction: column; gap: 0.75rem; }
.team-member-contact .btn { width: 100%; justify-content: center; }
.page-header { padding: 4.5rem 0 2rem; }
.page-content { padding: 2rem 0; }
}
/* ================================================================
10. WHAT WE DO (page-what-we-do.php)
================================================================ */
@media (max-width: 767px) {
/* Hero */
.wwd-hero { height: auto !important; min-height: 360px !important; padding: 5rem 0 3rem; }
/* Service cards */
.wwd-services-grid { grid-template-columns: 1fr !important; }
.wwd-service-image { height: 220px !important; }
/* Impact stats */
.wwd-impact-stats, .wwd-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
.wwd-stat-card .number, .wwd-stat-value { font-size: 2rem !important; }
/* Delivery */
.wwd-delivery-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
/* CTA */
.wwd-cta-buttons { flex-direction: column; align-items: center; gap: 0.75rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.wwd-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
.wwd-impact-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ================================================================
11. EVALUATION (page-evaluation.php)
================================================================ */
@media (max-width: 767px) {
.ev-hero { min-height: 320px !important; }
.ev-hero h1 { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; }
/* Overview 3-col → 1-col */
.ev-overview-grid { grid-template-columns: 1fr !important; gap: 1rem; }
/* What we offer 2-col → 1-col */
.ev-what-grid { grid-template-columns: 1fr !important; gap: 1rem; }
/* How we work 3-col → 1-col */
.ev-how-grid { grid-template-columns: 1fr !important; gap: 1rem; }
/* Project cards */
.ev-proj-card { flex-direction: column !important; }
.ev-proj-img { width: 100% !important; height: 160px !important; }
/* Testimonials 2-col → 1-col */
.ev-test-grid { grid-template-columns: 1fr !important; gap: 1rem; }
/* Advanced cards */
.ev-advanced-card { padding: 1.25rem; }
.ev-card-icon { width: 3rem !important; height: 3rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.ev-overview-grid { grid-template-columns: repeat(2, 1fr) !important; }
.ev-how-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ================================================================
12. RESEARCH (page-research.php)
================================================================ */
@media (max-width: 767px) {
.research-hero { min-height: 320px !important; }
.research-hero h1 { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; }
/* Flip cards grid → 1-col */
.flip-cards-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.flip-card { height: 220px; }
/* Methods grid 4-col → 2-col */
.rs-methods-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
/* Research projects 3-col → 1-col */
.research-project-card { flex-direction: column !important; }
.research-project-image { width: 100% !important; height: 180px !important; }
/* Featured projects 2-col → 1-col */
.featured-projects-grid { grid-template-columns: 1fr !important; }
/* Process steps */
.rs-process-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.flip-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
.rs-methods-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* ================================================================
13. TRAINING (page-training.php)
================================================================ */
@media (max-width: 767px) {
/* Hero */
/* tr-hero rules moved to dedicated mobile block below */
/* Tour 2-col → 1-col */
.tr-tour__g { grid-template-columns: 1fr !important; gap: 2rem; }
.tr-tour__img { max-height: 240px; border-radius: 1rem; }
/* Stats 4-col → 2-col */
.tr-stats__g { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem; }
.tr-stats__val { font-size: clamp(1.6rem, 6vw, 2.5rem); }
/* Courses grid 3-col → 1-col */
.tr-cc-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
/* 4-col grids → 2-col */
.tr-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
/* 3-col grids → 1-col */
.tr-grid-3 { grid-template-columns: 1fr !important; gap: 1rem; }
/* Team grid 3-col → 2-col */
.tr-tm-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
.tr-tm__av { width: 72px; height: 72px; }
/* Testimonials */
.tr-ts-shell { overflow: hidden !important; }
.tr-ts-card { padding: 2rem 1.25rem; }
.tr-ts-q { font-size: 0.95rem; }
}
@media (max-width: 400px) {
.tr-grid-4 { grid-template-columns: 1fr !important; }
.tr-tm-grid { grid-template-columns: 1fr !important; }
.tr-stats__g { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.tr-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
.tr-cc-grid { grid-template-columns: repeat(2, 1fr) !important; }
.tr-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
.tr-tm-grid { grid-template-columns: repeat(3, 1fr) !important; }
.tr-stats__g { grid-template-columns: repeat(4, 1fr) !important; }
}
/* ================================================================
14. MEAL SUPPORT (page-meal-support.php)
================================================================ */
@media (max-width: 767px) {
.meal-hero, .meal-section-hero { min-height: 320px !important; }
.meal-hero h1 { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; }
/* Feature grid → 1-col */
.meal-features-grid { grid-template-columns: 1fr !important; gap: 1rem; }
/* Process → 1-col */
.meal-process-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
/* Tools / methods */
.meal-tools-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem; }
/* Framework image */
.meal-framework-img { max-height: 260px; }
/* CTA */
.meal-cta-card { padding: 2rem 1rem; }
.meal-cta-btn { width: 100%; justify-content: center; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.meal-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ================================================================
15. STRATEGIC PLANNING (page-strategic-planning.php)
================================================================ */
@media (max-width: 767px) {
.strategic-hero { min-height: 320px !important; }
.strategic-hero h1 { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; }
/* Content + image 2-col → 1-col */
.sp-content-image-grid { grid-template-columns: 1fr !important; gap: 2rem; }
/* Numbered/phases grid 3-col → 1-col */
.strategic-numbered-grid,
.sp-phases-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
/* Project cards */
.strategic-project-card { flex-direction: column !important; }
.strategic-project-image { width: 100% !important; height: 180px !important; }
/* Content cards */
.strategic-content-card { padding: 1.5rem 1rem; }
.strategic-content-card h2 { font-size: 1.25rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.strategic-numbered-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ================================================================
16. WORKING WITH US (page-working-with-us.php)
================================================================ */
@media (max-width: 767px) {
.hero-working-with-us { min-height: 320px !important; }
.requirements-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.domains-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem; }
.offerings-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.check-list { padding-left: 0; }
.cta-section { padding: 3rem 1rem; text-align: center; }
.cta-section .btn { width: 100%; max-width: 300px; justify-content: center; }
.content-section { padding: 3rem 0 !important; }
.content-section .container { gap: 1.5rem !important; }
.column-content, .column-image { width: 100% !important; }
.column-image img { border-radius: 0.75rem; max-height: 280px; object-fit: cover; }
}
@media (max-width: 400px) {
.domains-grid { grid-template-columns: 1fr !important; }
}
/* ================================================================
17. OUR IMPACT (page-our-impact.php)
================================================================ */
@media (max-width: 767px) {
.impact-hero { min-height: 360px; }
.impact-hero h1 { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; }
/* Stats */
.impact-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
.impact-stat-value { font-size: 1.75rem !important; }
/* Tabs */
.impact-tabs-nav { flex-wrap: wrap; gap: 0.25rem; }
.impact-tab-btn {
flex: 1 1 calc(50% - 0.25rem);
min-width: 0;
font-size: 0.75rem;
padding: 0.5rem 0.375rem;
}
.impact-tab-label { display: none; }
.impact-tab-icon { margin: 0 auto; }
/* Search & filters */
.impact-search-filter { flex-direction: column; gap: 0.5rem; }
.impact-filter-select, .impact-search-input { width: 100%; font-size: 0.88rem; }
/* Project cards — force same height stack */
.impact-project-card {
flex-direction: column !important;
height: auto !important;
min-height: unset !important;
}
.impact-project-image {
width: 100% !important;
min-width: unset !important;
height: 180px !important;
}
.impact-project-image img {
width: 100% !important;
height: 180px !important;
object-fit: cover !important;
}
.impact-project-details { padding: 1rem !important; flex: 1; }
.impact-project-title { font-size: 0.95rem !important; }
/* Map section */
.impact-map-section { padding: 2rem 0; }
.impact-map-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.impact-map-header h2 { font-size: 1.25rem !important; color: #fff; }
.impact-map-header-copy { font-size: 0.82rem; }
.impact-map-filters { flex-direction: column; width: 100%; gap: 0.5rem; }
.impact-map-filter-btn,
select.impact-map-filter-btn { width: 100% !important; }
.impact-map-controls { flex-wrap: wrap; gap: 0.5rem; }
.impact-map-control-btn { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
.impact-map-container { border-radius: 0.75rem; min-height: auto; }
.globe-earth-img { height: 280px; object-position: center 20%; }
.globe-legend { bottom: 0.75rem; left: 0.75rem; gap: 0.3rem; }
.globe-legend-item { font-size: 0.65rem; }
.globe-hover-tip { display: none; }
.map-cluster-count { width: 2rem; height: 2rem; font-size: 0.75rem; }
.map-cluster-label { font-size: 0.6rem; }
/* Clients */
.impact-clients-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem; }
.impact-client-card { padding: 0.5rem; }
.impact-client-card img { max-height: 48px; }
/* Publications */
.impact-publications-grid { grid-template-columns: 1fr !important; }
.impact-publication-inner { flex-direction: column !important; }
.impact-publication-image { width: 100% !important; height: 180px !important; min-width: unset !important; }
.impact-publication-image img { height: 180px !important; }
.impact-publication-content { padding: 1rem !important; }
}
@media (max-width: 480px) {
.impact-stats-grid { grid-template-columns: 1fr 1fr !important; }
.impact-clients-grid { grid-template-columns: repeat(2, 1fr) !important; }
.globe-earth-img { height: 220px; }
.map-cluster-count { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.impact-stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
.impact-clients-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
/* ================================================================
18. HOW WE THINK (page-how-we-think.php)
================================================================ */
@media (max-width: 767px) {
.how-hero, section[class*="how-we-think"] { min-height: 300px !important; }
.approaches-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.actions-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.context-section .container { flex-direction: column !important; gap: 1.5rem; }
.context-card { padding: 1.5rem 1rem; }
.events-sidebar-desktop { display: none !important; }
.events-panel { position: static !important; width: 100% !important; box-shadow: none; border-radius: 0.75rem; margin-top: 1.5rem; }
.events-tab { display: none !important; }
.approach-card { padding: 1.25rem; }
.action-card { padding: 1rem; }
.acting-purpose-section { padding: 3rem 0; }
}
/* ================================================================
19. SERVICES PAGE (page-services.php)
================================================================ */
@media (max-width: 767px) {
.hero-services { min-height: 320px !important; }
.hero-image-centered img { max-height: 280px; object-fit: cover; border-radius: 0.75rem; }
/* Service link cards grid */
.services-cards-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.service-link-card { padding: 1.25rem 1rem; }
/* Expertise flip cards */
.expertise-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem; }
.expertise-card { height: 200px; }
/* Content sections with image+text */
.content-section { padding: 3rem 0 !important; }
.content-section .container > div { flex-direction: column !important; gap: 1.5rem; }
.column-content { width: 100% !important; }
.column-image { width: 100% !important; }
.column-image img { max-height: 260px; object-fit: cover; border-radius: 0.75rem; width: 100%; }
.column-map { width: 100% !important; height: 300px !important; }
/* Impact stats */
.impact-stats { flex-wrap: wrap; gap: 1rem; justify-content: center; }
.impact-stat { min-width: calc(50% - 0.5rem); text-align: center; }
/* Network box */
.network-box { padding: 1.5rem 1rem; }
/* CTA */
.content-section .btn { width: 100%; max-width: 300px; justify-content: center; }
}
@media (max-width: 400px) {
.expertise-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.services-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
.expertise-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* ================================================================
20. OUR WORKS (page-our-works.php)
================================================================ */
@media (max-width: 767px) {
.ow-hero { min-height: 300px !important; padding-top: 5rem; padding-bottom: 2.5rem; }
/* Stats row */
.ow-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem; }
.ow-stat-item { padding: 1rem; }
/* Tabs */
.ow-tabs-header { flex-wrap: wrap; gap: 0.5rem; }
.ow-tab-btn { flex: 1 1 calc(33% - 0.5rem); font-size: 0.8rem; padding: 0.5rem; justify-content: center; min-height: 44px; }
/* Filter bar */
.ow-filter-bar { flex-direction: column; gap: 0.5rem; }
.ow-filter-bar .search-wrapper { width: 100%; }
.ow-filter-bar .filter-selects { flex-direction: column; gap: 0.5rem; width: 100%; }
.filter-select { width: 100%; }
.search-input { width: 100%; }
/* Projects grid → 1-col */
.ow-projects-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
.ow-project-card { flex-direction: column !important; height: auto !important; }
.project-card-image { width: 100% !important; height: 180px !important; }
.project-card-content { padding: 1rem !important; }
/* Clients grid */
.ow-clients-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem; }
.ow-client-card { padding: 0.75rem; }
.ow-client-card img { max-height: 48px; }
/* Publications grid → 1-col */
.ow-publications-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
.ow-publication-card { flex-direction: column !important; }
/* CTA */
.ow-cta-section { padding: 3rem 1rem; }
.ow-cta-content { text-align: center; }
.ow-cta-content .btn { width: 100%; max-width: 300px; justify-content: center; }
}
@media (max-width: 400px) {
.ow-clients-grid { grid-template-columns: repeat(2, 1fr) !important; }
.ow-tab-btn { flex: 1 1 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.ow-projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ================================================================
21. ARCHIVE PROJECTS (archive-fife_project.php)
================================================================ */
@media (max-width: 767px) {
.projects-hero { min-height: 320px !important; padding: 5rem 0 2.5rem; }
.projects-hero-title { font-size: clamp(1.5rem, 6vw, 2.25rem) !important; }
.projects-hero-description { font-size: 0.9rem; }
/* Stats */
.projects-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.875rem; }
.projects-stat-item { padding: 1rem 0.75rem; }
.projects-stat-value { font-size: 1.75rem !important; }
/* Tabs nav */
.projects-tab-nav { flex-wrap: wrap; gap: 0.5rem; }
.projects-tab-btn { flex: 1 1 calc(50% - 0.25rem); font-size: 0.82rem; min-height: 44px; }
/* Filter */
.projects-filter-bar { flex-direction: column; gap: 0.5rem; }
.projects-search-wrapper { width: 100%; }
.projects-search-input { width: 100%; }
.projects-filter-wrapper { width: 100%; }
.projects-category-select { width: 100%; }
/* Projects grid → 1-col */
.projects-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.project-card { flex-direction: column !important; height: auto !important; }
.project-card-image-wrapper { width: 100% !important; height: 180px !important; }
.project-card-body { padding: 1rem !important; }
}
@media (max-width: 480px) {
.projects-stats-grid { grid-template-columns: 1fr 1fr !important; }
}
/* ================================================================
22. DOING BUSINESS IN AFRICA (page-doing-business-in-africa.php)
================================================================ */
@media (max-width: 767px) {
.event-hero { height: auto !important; min-height: 380px; padding: 5rem 0 2.5rem; }
.event-hero h1 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; line-height: 1.25; }
.event-hero h2 { font-size: 1rem !important; line-height: 1.5; }
.event-badge { font-size: 0.72rem; }
.event-details-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.event-detail-card { padding: 1.25rem; }
.event-description-section { padding: 3rem 0; }
.event-description h3 { font-size: 1.5rem !important; }
.event-description p { font-size: 0.95rem; }
.panelists-grid { grid-template-columns: 1fr !important; max-width: 400px; margin: 0 auto; }
.panelist-image { height: 240px; }
.event-cta-section { padding: 3.5rem 0; }
.cta-content h3 { font-size: 1.875rem !important; }
.cta-content p { font-size: 0.95rem; }
.btn-white { width: 100%; max-width: 280px; justify-content: center; }
}
/* ================================================================
23. ETHICAL HUMANITARIANISMS
================================================================ */
@media (max-width: 767px) {
/* Hero */
section[class*="eth-hero"],
.ethical-hero { min-height: 300px !important; }
/* Team links / speaker grid */
.speakers-grid,
.eth-speakers-grid { grid-template-columns: 1fr !important; gap: 1rem; }
/* Text sections */
.eth-content-section { padding: 3rem 0; }
.eth-two-col { flex-direction: column !important; gap: 1.5rem; }
.eth-two-col > * { width: 100% !important; }
}
/* ================================================================
24. DATA PROTECTION & IMPRINT
================================================================ */
@media (max-width: 767px) {
.hero-legal, .page-header { padding: 4.5rem 0 2rem !important; min-height: 200px !important; }
.legal-content { padding: 2rem 0; }
.legal-content h2 { font-size: 1.25rem !important; }
.legal-content h3 { font-size: 1.05rem !important; }
.legal-content p, .legal-content li { font-size: 0.9rem; line-height: 1.75; }
}
/* ================================================================
25. ALL COURSES (page-all-courses.php)
================================================================ */
@media (max-width: 767px) {
.ac-hero { min-height: 280px; padding-top: 4.5rem; }
.ac-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
.ac-filters-bar { flex-direction: column; gap: 0.75rem; }
.ac-divider { display: none !important; }
.ac-search-input, .ac-filter-select { width: 100%; }
.ac-card-inner { flex-direction: column !important; }
.ac-card-img { width: 100% !important; height: 180px !important; }
.ac-card-content { width: 100% !important; padding: 1.25rem; }
.ac-card-content h2 { font-size: 1rem; }
.ac-card-meta { flex-wrap: wrap; gap: 0.5rem; }
}
/* ================================================================
26. SINGLE COURSE (single-fife_course.php)
================================================================ */
@media (max-width: 767px) {
.cd-hero { min-height: 320px; }
.cd-hero__inner { padding: 5rem 0 3rem; }
.cd-hero__h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
.cd-hero__meta { flex-wrap: wrap; gap: 0.5rem; }
.cd-hero__mi { font-size: 0.78rem; padding: 0.35rem 0.75rem; }
.cd-bar__inner { flex-direction: column; }
.cd-bar__item { border-right: none !important; border-bottom: 1px solid var(--bd); padding: 1rem; }
.cd-grid { grid-template-columns: 1fr !important; }
.cd-sidebar { position: static !important; top: auto !important; }
.cd-tabs__nav { flex-wrap: wrap; gap: 0.25rem; }
.cd-tab-btn { flex: 1 1 calc(50% - 0.25rem); font-size: 0.78rem; padding: 0.6rem 0.375rem; }
.cd-info-grid { grid-template-columns: 1fr !important; }
.cd-rating-summary { flex-direction: column; gap: 1rem; }
.cd-comment-form .cd-row { grid-template-columns: 1fr; }
.cd-enroll__price { font-size: 1.875rem; }
.cd-cta h2 { font-size: 1.5rem !important; }
.cd-hero__crumb { flex-wrap: wrap; gap: 0.25rem; font-size: 0.75rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.cd-grid { grid-template-columns: 1fr 300px !important; }
}
/* ================================================================
27. SINGLE PROJECT (single-fife_project.php)
================================================================ */
@media (max-width: 767px) {
.project-hero {
min-height: 320px !important;
padding: 5rem 0 2.5rem !important;
background-attachment: scroll !important;
}
.project-hero-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
.project-hero-meta { flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.project-category-badge { font-size: 0.72rem; padding: 0.25rem 0.625rem; }
.project-details-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
.project-content-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
.project-sidebar-column {
order: -1;
position: static !important;
top: auto !important;
}
.sidebar-card { padding: 1.25rem; }
.expert-item { padding: 0.625rem; }
.expert-image { width: 52px !important; height: 52px !important; min-width: 52px !important; }
.related-projects-grid { grid-template-columns: 1fr !important; gap: 1rem; }
.related-project-card { height: 220px; }
.objectives-list li,
.outcomes-list li { font-size: 0.9rem; }
.project-main-column { gap: 2rem; }
.content-heading { font-size: 1.25rem !important; }
}
@media (max-width: 400px) {
.project-details-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.project-content-grid { grid-template-columns: 3fr 2fr !important; gap: 2rem; }
.related-projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ================================================================
28. SINGLE PUBLICATION (single-fife_publication.php)
================================================================ */
@media (max-width: 767px) {
.publication-hero { padding-top: 5rem !important; padding-bottom: 2.5rem !important; }
.publication-hero h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
.publication-hero-meta { flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; }
.publication-layout { grid-template-columns: 1fr !important; }
.publication-sidebar { position: static !important; }
.publication-main { padding-right: 0 !important; }
.abstract-text { font-size: 0.95rem; line-height: 1.75; }
.keywords-list { flex-wrap: wrap; gap: 0.375rem; }
.keyword-tag { font-size: 0.78rem; padding: 0.25rem 0.625rem; }
/* Related publications */
.related-publications-grid { grid-template-columns: 1fr !important; gap: 1rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.publication-layout { grid-template-columns: 3fr 2fr !important; }
}
/* ================================================================
29. LIGHTBOXES / MODALS
================================================================ */
@media (max-width: 767px) {
.impact-lightbox { padding: 0.75rem; }
.impact-lightbox-content { max-width: 100%; border-radius: 0.75rem; }
.impact-lightbox-image { max-height: 80vh; object-fit: contain; }
/* Team profile modal */
.lightbox-overlay .lightbox-inner,
.team-modal .modal-content {
width: 95vw !important;
max-width: 95vw !important;
max-height: 90vh;
overflow-y: auto;
border-radius: 1rem;
}
.team-modal .modal-profile { flex-direction: column !important; gap: 1.25rem; }
.team-modal .modal-photo { width: 120px !important; height: 120px !important; margin: 0 auto; }
}
/* ================================================================
30. GLOBAL TYPOGRAPHY SCALE (mobile only)
================================================================ */
@media (max-width: 767px) {
.section-title-primary,
.section-title-centered,
.section-header-centered h2,
.section-title { font-size: clamp(1.4rem, 5.5vw, 1.875rem) !important; }
.section-subtitle-centered,
.section-subtitle { font-size: 0.9rem !important; }
/* Buttons - minimum touch target */
.btn, .tr__btn, .cd-cta__btn, .dbia-cta__btn, .hero-btn,
.meal-cta-btn, .btn-primary, .btn-outline, .btn-white,
.projects-tab-btn, .ow-tab-btn, .impact-tab-btn {
min-height: 44px;
}
/* No sticky sidebars on mobile */
[style*="position: sticky"],
[style*="position:sticky"] { position: static !important; top: auto !important; }
}
/* ================================================================
31. FINAL OVERFLOW KILL-SWITCH
================================================================ */
@media (max-width: 767px) {
/* Carousels must not cause scroll */
.clients-carousel-track,
.tr-ts-shell,
.tr-testi__shell,
.training-testimonials-shell { overflow: hidden !important; max-width: 100%; }
/* Kill any leftover fixed widths that bleed */
.hero-main-content,
.project-hero-content,
.hero-content-inner { max-width: 100% !important; }
/* Ensure all grids don't bleed */
[class*="-grid"],
[class*="grid-"] { min-width: 0; }
/* Remove background-attachment:fixed on mobile (causes bugs on iOS) */
[style*="background-attachment: fixed"],
[style*="background-attachment:fixed"] { background-attachment: scroll !important; }
}
/* ================================================================
/* ================================================================
HERO MOBILE FIX v19 — based on live screenshot analysis
Fixes:
1. Homepage: all slide text stacking outside hero (pos:absolute fix)
2. What We Do / Team / Research etc: grey void below hero (semicolon fix)
3. Training: arrows overlapping text
4. All pages: text/content overflowing out of hero image area
SCOPE: hero selectors only. max-width:767px only.
================================================================ */
/* ── HOMEPAGE CAROUSEL HERO — MOBILE ───────────────────────────
Goal: Full-screen hero with image filling entire viewport,
all content (icon, title, badge, description, buttons)
cleanly stacked and VERTICALLY CENTRED inside the image area.
Arrows sit at mid-height on left/right edges.
Dots sit at the very bottom.
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
/* ── Section: full viewport, image fills everything ── */
.hero-carousel-centered {
position: relative !important;
min-height: 100svh !important;
min-height: 100vh !important;
height: 100svh !important;
height: 100vh !important;
overflow: hidden !important;
padding: 0 !important;
display: block !important;
background-attachment: scroll !important;
}
/* ── Background: fill entire section ── */
.hero-bg-container {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
}
.hero-bg-slide {
position: absolute !important;
inset: 0 !important;
}
.hero-bg-slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
}
.hero-bg-overlay {
position: absolute !important;
inset: 0 !important;
/* Stronger overlay so text reads well on any image */
background: linear-gradient(
to bottom,
rgba(10, 2, 10, 0.4) 0%,
rgba(10, 2, 10, 0.25) 30%,
rgba(10, 2, 10, 0.65) 70%,
rgba(10, 2, 10, 0.85) 100%
) !important;
}
/* ── Content container: fill section, centre content ── */
.hero-centered-content {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* Top padding clears fixed nav; bottom clears dots */
padding: 5rem 0 5rem !important;
overflow: hidden !important;
}
/* ── Each slide: fill container, centre all content ── */
.hero-content-slide {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.6s ease !important;
}
.hero-content-slide.active {
position: absolute !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* ── Content inner wrapper ── */
.hero-content-inner {
width: 100% !important;
max-width: 100% !important;
padding: 0 1.5rem !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
}
/* ── Glass icon ── */
.hero-glass-icon {
width: 3.25rem !important;
height: 3.25rem !important;
min-width: 3.25rem !important;
margin-bottom: 0.875rem !important;
border-radius: 0.875rem !important;
}
.hero-glass-icon svg {
width: 1.5rem !important;
height: 1.5rem !important;
}
/* ── Heading ── */
.hero-main-title {
font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
line-height: 1.15 !important;
margin-bottom: 0.625rem !important;
color: #fff !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
width: 100% !important;
}
/* ── Subtitle badge ── */
.hero-subtitle-badge {
font-size: 0.82rem !important;
padding: 0.35rem 1rem !important;
margin-bottom: 0.75rem !important;
display: inline-block !important;
border-radius: 9999px !important;
white-space: normal !important;
text-align: center !important;
max-width: 90% !important;
}
/* ── Description ── */
.hero-description {
font-size: 0.875rem !important;
line-height: 1.65 !important;
margin-bottom: 1.25rem !important;
max-width: 100% !important;
color: rgba(255, 255, 255, 0.92) !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}
/* ── CTA buttons: stacked, full-width, well spaced ── */
.hero-cta-buttons {
flex-direction: column !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
}
.hero-btn {
width: auto !important;
min-width: 160px !important;
max-width: 220px !important;
min-height: 44px !important;
justify-content: center !important;
display: inline-flex !important;
align-items: center !important;
font-size: 0.875rem !important;
padding: 0.625rem 1.5rem !important;
}
.hero-btn-primary {
background: hsl(311, 50%, 37%) !important;
color: #fff !important;
}
.hero-btn-outline {
background: rgba(255, 255, 255, 0.1) !important;
border: 2px solid rgba(255, 255, 255, 0.5) !important;
color: #fff !important;
}
/* ── Arrows: vertically centred on left & right edges ── */
.hero-nav-arrow,
.hero-carousel-centered .hero-nav-arrow {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
width: 32px !important;
height: 32px !important;
z-index: 5 !important;
}
.hero-nav-arrow.prev,
.hero-carousel-centered .hero-nav-arrow.prev {
left: 0.75rem !important;
}
.hero-nav-arrow.next,
.hero-carousel-centered .hero-nav-arrow.next {
right: 0.75rem !important;
}
/* ── Dot indicators: bottom centre ── */
.hero-dot-indicators {
position: absolute !important;
bottom: 1.25rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 5 !important;
display: flex !important;
gap: 0.625rem !important;
}
.hero-dot {
width: 8px !important;
height: 8px !important;
}
.hero-dot.active {
width: 24px !important;
background: #fff !important;
}
}
/* tr-hero block 2 removed — see definitive block below */
/* ── 3. STANDARD INTERNAL PAGE HEROES ─────────────────────────
Covers: What We Do, Evaluation, Research, Strategic Planning,
MEAL Support, Team, Our Impact, archive-projects, Our Works
Problem (Image 1 & 2): grey void below hero image — hero section
height didn't grow to contain text because of missing semicolons
(now fixed in the PHP files). These rules add mobile safety.
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
/* Make every internal hero auto-height */
.wwd-hero, .ev-hero, .research-hero, .strategic-hero,
.meal-hero, .team-hero, .impact-hero, .projects-hero,
.ow-hero, .eth-hero, .event-hero {
height: auto !important;
background-attachment: scroll !important;
overflow: hidden !important;
}
/* Background images always fill the section */
.wwd-hero-bg,
.ev-hero-bg img, .research-hero-bg img, .strategic-hero-bg img,
.meal-hero-bg img, .team-hero-bg img, .impact-hero-bg img,
.projects-hero-bg img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* wwd-hero uses ![]()
directly */
.wwd-hero-bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Minimum heights + padding to clear nav */
.wwd-hero, .ev-hero, .research-hero, .strategic-hero,
.impact-hero { min-height: 380px !important; }
.meal-hero, .team-hero, .projects-hero,
.ow-hero { min-height: 320px !important; }
.eth-hero, .event-hero { min-height: 340px !important; }
/* Add top padding to clear fixed nav bar */
.wwd-hero, .ev-hero, .research-hero, .strategic-hero,
.meal-hero, .team-hero, .impact-hero, .projects-hero,
.ow-hero, .eth-hero, .event-hero {
padding-top: 5.5rem !important;
padding-bottom: 3rem !important;
}
/* What We Do: breadcrumb was position:absolute top:6rem
On mobile with auto height this stays inside — keep it */
.wwd-hero .breadcrumb {
position: relative !important;
top: auto !important;
padding: 0 !important;
margin-bottom: 1rem !important;
}
/* All internal hero headings */
.wwd-hero h1, .ev-hero h1, .research-hero h1,
.strategic-hero h1, .meal-hero h1, .team-hero h1,
.impact-hero h1, .projects-hero h1, .ow-hero h1,
.eth-hero h1, .event-hero h1 {
font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
line-height: 1.2 !important;
word-break: break-word !important;
margin-bottom: 0.75rem !important;
}
/* Event hero has h2 subtitle */
.event-hero h2 {
font-size: clamp(0.95rem, 3.5vw, 1.2rem) !important;
line-height: 1.5 !important;
}
/* Subtitles */
.wwd-hero p, .ev-hero-subtitle, .research-hero-subtitle,
.strategic-hero-subtitle, .meal-hero-subtitle, .team-hero-subtitle {
font-size: 0.9rem !important;
line-height: 1.6 !important;
max-width: 100% !important;
}
/* Badges */
.ev-badge, .research-badge, .strategic-badge,
.meal-badge, .team-hero-badge, .projects-hero-badge,
.event-badge, .eth-badge, .hero-tag {
font-size: 0.72rem !important;
padding: 0.3rem 0.75rem !important;
margin-bottom: 0.75rem !important;
display: inline-flex !important;
}
/* Breadcrumbs */
.ev-breadcrumb, .research-breadcrumb, .strategic-breadcrumb,
.meal-breadcrumb, .team-breadcrumb {
flex-wrap: wrap !important;
font-size: 0.78rem !important;
gap: 0.15rem 0.35rem !important;
margin-bottom: 0.75rem !important;
}
}
/* ── 4. WHO WE ARE hero (inline style) ─────────────────────────
Uses — override via attribute
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
[style*="height:500px"],
[style*="height: 500px"] {
height: auto !important;
min-height: 320px !important;
padding-top: 5.5rem !important;
padding-bottom: 3rem !important;
}
}
/* ── 5. SHARED hero-section (services, working-with-us etc) ────
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.hero-section {
height: auto !important;
min-height: 300px !important;
padding: 5.5rem 0 3rem !important;
background-attachment: scroll !important;
overflow: hidden !important;
}
.hero-section h1, .page-title {
font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
line-height: 1.2 !important;
word-break: break-word !important;
}
.hero-section p, .hero-description {
font-size: 0.9rem !important;
line-height: 1.65 !important;
max-width: 100% !important;
}
}
/* ── 6. SINGLE PROJECT hero ────────────────────────────────────
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.project-hero {
height: auto !important;
min-height: 320px !important;
padding-top: 5.5rem !important;
padding-bottom: 3rem !important;
background-attachment: scroll !important;
}
.project-hero-title {
font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
line-height: 1.2 !important;
word-break: break-word !important;
}
.project-hero-meta { flex-wrap: wrap !important; gap: 0.5rem !important; }
}
/* ── 7. SINGLE COURSE hero ─────────────────────────────────────
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.cd-hero {
height: auto !important;
min-height: 320px !important;
background-attachment: scroll !important;
}
.cd-hero__inner {
padding-top: 5.5rem !important;
padding-bottom: 3rem !important;
}
.cd-hero__h1 {
font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
line-height: 1.2 !important;
max-width: 100% !important;
}
.cd-hero__meta { flex-wrap: wrap !important; gap: 0.5rem !important; }
.cd-hero__mi { font-size: 0.78rem !important; }
.cd-hero__crumb { flex-wrap: wrap !important; font-size: 0.75rem !important; }
}
/* ── 8. ALL COURSES hero ───────────────────────────────────────
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.ac-hero {
height: auto !important;
min-height: 240px !important;
padding-top: 5rem !important;
padding-bottom: 2.5rem !important;
background-attachment: scroll !important;
}
.ac-hero h1 {
font-size: clamp(1.5rem, 6vw, 2rem) !important;
line-height: 1.2 !important;
}
}
/* ── 9. DATA PROTECTION & IMPRINT heroes ──────────────────────
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.dp-hero, .imp-hero {
height: auto !important;
min-height: 280px !important;
background-attachment: scroll !important;
}
.dp-hero__inner, .imp-hero__inner {
padding-top: 5.5rem !important;
padding-bottom: 3rem !important;
}
.dp-hero h1, .imp-hero h1 {
font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
line-height: 1.2 !important;
}
.dp-hero__sub, .imp-hero__sub {
font-size: 0.88rem !important;
line-height: 1.65 !important;
max-width: 100% !important;
}
}
/* ── 10. SINGLE PUBLICATION hero ──────────────────────────────
─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.publication-hero {
height: auto !important;
min-height: 300px !important;
padding-top: 5.5rem !important;
padding-bottom: 3rem !important;
background-attachment: scroll !important;
}
.publication-hero h1 {
font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
line-height: 1.2 !important;
word-break: break-word !important;
}
.publication-hero-meta {
flex-wrap: wrap !important;
gap: 0.5rem !important;
font-size: 0.8rem !important;
}
}
/* ── TINY PHONES (≤374px) ──────────────────────────────────────
─────────────────────────────────────────────────────────────── */
@media (max-width: 374px) {
.hero-main-title,
.tr-hero__h1 { font-size: 1.4rem !important; }
.tr-hero__nav { display: none !important; }
.hero-nav-arrow { display: none !important; }
}
/* ── TABLET (768–1023px) ───────────────────────────────────────
─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
.hero-main-title,
.tr-hero__h1,
.wwd-hero h1, .ev-hero h1, .research-hero h1,
.strategic-hero h1, .meal-hero h1, .team-hero h1 {
font-size: clamp(2rem, 4vw, 3rem) !important;
}
/* Restore row layout for buttons on tablet */
.hero-cta-buttons {
flex-direction: row !important;
flex-wrap: wrap !important;
}
}
/* ================================================================
BREADCRUMB + HERO TEXT VISIBILITY — MOBILE ONLY
Scope: max-width 767px. Only breadcrumb & hero text selectors.
================================================================ */
@media (max-width: 767px) {
/* ── UNIVERSAL: every breadcrumb in every hero ── */
/* Base layout: wrap cleanly, readable size */
.breadcrumb,
.breadcrumb ol,
.breadcrumb ul,
.breadcrumb-light,
.breadcrumb-light ol,
nav[aria-label="Breadcrumb"],
nav[aria-label="Breadcrumb"] ol {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.2rem 0.4rem !important;
font-size: 0.78rem !important;
line-height: 1.5 !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 0.875rem !important;
max-width: 100% !important;
overflow: visible !important;
}
/* Every breadcrumb item */
.breadcrumb li,
.breadcrumb-light li {
display: inline-flex !important;
align-items: center !important;
font-size: 0.78rem !important;
white-space: normal !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
/* Links: white, visible */
.breadcrumb a,
.breadcrumb-light a,
nav[aria-label="Breadcrumb"] a,
section[class*="hero"] .breadcrumb a,
section[class*="hero"] .breadcrumb-light a {
color: rgba(255, 255, 255, 0.85) !important;
text-decoration: none !important;
font-size: 0.78rem !important;
white-space: nowrap !important;
}
.breadcrumb a:hover,
.breadcrumb-light a:hover {
color: #ffffff !important;
text-decoration: underline !important;
}
/* Current page / span text: white */
.breadcrumb span,
.breadcrumb-light span,
.breadcrumb li[aria-current="page"],
nav[aria-label="Breadcrumb"] span,
section[class*="hero"] .breadcrumb span {
color: rgba(255, 255, 255, 0.65) !important;
font-size: 0.78rem !important;
white-space: normal !important;
word-break: break-word !important;
}
/* Separator "/" characters */
.breadcrumb .separator,
.breadcrumb li:not(:last-child)::after {
color: rgba(255, 255, 255, 0.45) !important;
margin: 0 0.2rem !important;
flex-shrink: 0 !important;
}
/* ── PAGE-SPECIFIC breadcrumbs ── */
/* Training: .tr-hero__cr (plain text, not a list) */
.tr-hero__cr {
font-size: 0.75rem !important;
color: rgba(255, 255, 255, 0.75) !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.15rem 0.3rem !important;
margin-bottom: 0.625rem !important;
max-width: 100% !important;
}
.tr-hero__cr a {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
}
/* Evaluation */
.ev-breadcrumb {
font-size: 0.78rem !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.35rem !important;
margin-bottom: 0.625rem !important;
}
.ev-breadcrumb a {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.78rem !important;
}
.ev-breadcrumb span {
color: rgba(255, 255, 255, 0.55) !important;
font-size: 0.78rem !important;
}
/* Research (.breadcrumbs class) */
.breadcrumbs {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.35rem !important;
font-size: 0.78rem !important;
margin-bottom: 0.625rem !important;
}
.breadcrumbs a,
.breadcrumbs span {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 0.78rem !important;
}
/* Strategic Planning */
.strategic-breadcrumb {
font-size: 0.78rem !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.35rem !important;
margin-bottom: 0.625rem !important;
}
.strategic-breadcrumb a { color: rgba(255, 255, 255, 0.8) !important; }
.strategic-breadcrumb span { color: rgba(255, 255, 255, 0.55) !important; }
/* MEAL Support */
.meal-breadcrumb {
font-size: 0.78rem !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.35rem !important;
margin-bottom: 0.625rem !important;
}
.meal-breadcrumb a { color: rgba(255, 255, 255, 0.8) !important; }
/* Team page */
.team-breadcrumb {
font-size: 0.78rem !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.35rem !important;
margin-bottom: 0.625rem !important;
}
.team-breadcrumb a { color: rgba(255, 255, 255, 0.8) !important; }
/* Our Impact */
.impact-breadcrumb {
font-size: 0.78rem !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.35rem !important;
margin-bottom: 0.625rem !important;
}
.impact-breadcrumb a { color: rgba(255, 255, 255, 0.8) !important; }
/* All Courses */
.ac-breadcrumb {
font-size: 0.75rem !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.15rem 0.35rem !important;
margin-bottom: 0.625rem !important;
}
.ac-breadcrumb a { color: rgba(255, 255, 255, 0.8) !important; }
/* Who We Are: position:absolute breadcrumb — clear the nav bar */
.relative.pt-24 nav.breadcrumb,
[style*="top:2rem"][class*="breadcrumb"],
[style*="top: 2rem"][class*="breadcrumb"] {
top: 5.5rem !important;
left: 1rem !important;
right: 1rem !important;
max-width: calc(100% - 2rem) !important;
z-index: 10 !important;
}
/* Single project / publication breadcrumb-light */
.breadcrumb-light a {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 0.78rem !important;
}
.breadcrumb-light span {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 0.78rem !important;
}
/* Course detail hero */
.cd-hero__crumb {
font-size: 0.75rem !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.3rem !important;
margin-bottom: 0.625rem !important;
}
.cd-hero__crumb a { color: rgba(255, 255, 255, 0.8) !important; }
.cd-hero__crumb span { color: rgba(255, 255, 255, 0.55) !important; }
/* Data protection / Imprint */
.dp-hero__crumb,
.imp-hero__crumb {
font-size: 0.75rem !important;
flex-wrap: wrap !important;
gap: 0.15rem 0.3rem !important;
margin-bottom: 0.625rem !important;
}
/* ── HERO TEXT VISIBILITY: ensure text is always white & readable ── */
/* All headings inside hero sections */
.tr-hero__h1,
.ev-hero h1, .research-hero h1, .strategic-hero h1,
.meal-hero h1, .team-hero h1, .wwd-hero h1, .impact-hero h1,
.projects-hero h1, .ow-hero h1, .eth-hero h1, .event-hero h1,
.project-hero-title, .cd-hero__h1, .ac-hero h1,
.dp-hero h1, .imp-hero h1, .publication-hero h1,
.hero-section h1, .page-title,
.hero-main-title {
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
/* All subtitle / description text inside heroes */
.ev-hero-subtitle, .research-hero-subtitle,
.strategic-hero-subtitle, .meal-hero-subtitle,
.wwd-hero p, .team-hero-subtitle,
.tr-hero__p, .dp-hero__sub, .imp-hero__sub,
.hero-description, .projects-hero-description,
.cd-hero__meta, .cd-hero__mi {
color: rgba(255, 255, 255, 0.92) !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}
/* Badges — always white text */
.ev-badge, .research-badge, .strategic-badge,
.projects-hero-badge, .event-badge, .hero-tag,
.dp-hero__badge, .imp-hero__badge, .ac-badge {
color: #ffffff !important;
}
}
/* ================================================================
BREADCRUMB STRUCTURE + HERO TEXT LAYOUT — MOBILE ONLY
Reference: Image 1 (fife-institute-mirror.vercel.app Team page)
- Breadcrumb: horizontal, home icon, chevron > separators, left-aligned
- Badge: icon + text, left-aligned, pill shape
- H1: large bold white, left-aligned
- Description: white, left-aligned
SCOPE: max-width 767px only. Hero selectors only.
================================================================ */
@media (max-width: 767px) {
/* ── UNIVERSAL hero text: LEFT-ALIGNED (matches reference Image 1) ── */
.ev-hero-content, .research-hero-content, .strategic-hero-content,
.meal-hero-content, .team-hero-content, .wwd-hero-content,
.impact-hero-content, .projects-hero-content, .eth-hero-content,
.event-hero-content, .ac-hero-content, .cd-hero__inner,
.dp-hero__inner, .imp-hero__inner {
text-align: left !important;
}
/* ── ALL BREADCRUMBS: clean horizontal strip, left-aligned ── */
.team-breadcrumb,
.ev-breadcrumb,
.breadcrumbs,
.strategic-breadcrumb,
.meal-breadcrumb,
.impact-breadcrumb,
.ac-breadcrumb,
.cd-hero__crumb,
.dp-hero__crumb,
.imp-hero__crumb,
nav.breadcrumb,
.breadcrumb-light,
.tr-hero__cr,
nav[aria-label="Breadcrumb"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.2rem 0.3rem !important;
font-size: 0.8rem !important;
line-height: 1.4 !important;
margin-bottom: 0.875rem !important;
padding: 0 !important;
list-style: none !important;
text-align: left !important;
}
/* Breadcrumb links */
.team-breadcrumb a,
.ev-breadcrumb a,
.breadcrumbs a,
.strategic-breadcrumb a,
.meal-breadcrumb a,
.impact-breadcrumb a,
.ac-breadcrumb a,
.cd-hero__crumb a,
.dp-hero__crumb a,
.imp-hero__crumb a,
nav.breadcrumb a,
.breadcrumb-light a,
.tr-hero__cr a,
nav[aria-label="Breadcrumb"] a {
color: rgba(255, 255, 255, 0.82) !important;
font-size: 0.8rem !important;
text-decoration: none !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.2rem !important;
}
.team-breadcrumb a:hover,
.ev-breadcrumb a:hover,
nav.breadcrumb a:hover { color: #fff !important; }
/* Breadcrumb current page span */
.team-breadcrumb span:last-child,
.ev-breadcrumb span:last-child,
.strategic-breadcrumb span:last-child,
.meal-breadcrumb span:last-child,
nav.breadcrumb span:last-child,
.cd-hero__crumb span:last-child,
.dp-hero__crumb span:last-child {
color: rgba(255, 255, 255, 0.95) !important;
font-weight: 600 !important;
font-size: 0.8rem !important;
}
/* Separators — use chevron > style to match Image 1 */
.team-breadcrumb .separator,
.ev-breadcrumb span:not(:last-child):not(a),
.strategic-breadcrumb .separator,
.meal-breadcrumb .separator,
nav.breadcrumb .separator,
.breadcrumbs .separator {
color: rgba(255, 255, 255, 0.5) !important;
font-size: 0.75rem !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
/* ── HOME ICON in breadcrumbs ── */
/* Add a home SVG before the first breadcrumb link via the nav element */
.team-breadcrumb,
.ev-breadcrumb,
nav.breadcrumb {
position: relative !important;
}
/* Style the first in breadcrumb to show home icon */
.team-breadcrumb a:first-child,
.ev-breadcrumb a:first-child,
nav.breadcrumb a:first-child,
.strategic-breadcrumb a:first-child,
.meal-breadcrumb a:first-child,
.cd-hero__crumb a:first-child,
.dp-hero__crumb a:first-child,
.imp-hero__crumb a:first-child {
/* Show home icon before first breadcrumb link */
display: inline-flex !important;
align-items: center !important;
gap: 0.2rem !important;
}
/* ── BADGES: icon + text, left-aligned (matches Image 1 "OUR EXPERTS") ── */
.team-hero-badge,
.ev-badge,
.research-badge,
.strategic-badge,
.meal-badge,
.projects-hero-badge,
.impact-hero-badge,
.event-badge,
.eth-badge,
.hero-tag,
.ac-badge {
display: inline-flex !important;
align-items: center !important;
gap: 0.625rem !important;
text-align: left !important;
margin-bottom: 0.875rem !important;
font-size: 0.78rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
/* ── HERO HEADINGS: left-aligned, properly sized ── */
.ev-hero h1, .research-hero h1, .strategic-hero h1,
.meal-hero h1, .team-hero h1, .wwd-hero h1,
.impact-hero h1, .projects-hero h1, .ow-hero h1,
.eth-hero h1, .event-hero h1, .tr-hero__h1,
.cd-hero__h1, .ac-hero h1, .dp-hero h1, .imp-hero h1,
.project-hero-title, .publication-hero h1,
.hero-section h1 {
text-align: left !important;
color: #ffffff !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
line-height: 1.15 !important;
margin-bottom: 0.75rem !important;
word-break: break-word !important;
}
/* ── HERO DESCRIPTIONS: left-aligned, white ── */
.ev-hero-subtitle, .research-hero-subtitle,
.strategic-hero-subtitle, .meal-hero-subtitle,
.team-hero-desc, .wwd-hero p,
.impact-hero-desc, .projects-hero-description,
.tr-hero__p, .dp-hero__sub, .imp-hero__sub,
.hero-section p, .hero-description,
.eth-hero p, .event-hero p {
text-align: left !important;
color: rgba(255, 255, 255, 0.92) !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
font-size: 0.925rem !important;
line-height: 1.65 !important;
max-width: 100% !important;
}
/* ── TRAINING: left-align content too ── */
.tr-hero__bd {
text-align: left !important;
}
.tr-hero__cr {
text-align: left !important;
}
}
/* ================================================================
HOMEPAGE "OUR SERVICES" SECTION — MOBILE ONLY
Reference: Image 2 — 1 card per row, icon centered on top,
title centered, description centered, MORE link centered
================================================================ */
@media (max-width: 767px) {
/* 1 column grid */
.services-grid-5col {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
/* Card: white, rounded, centered content */
.service-card-lovable {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 1.75rem 1.25rem !important;
border-radius: 1rem !important;
background: #ffffff !important;
border: 1px solid rgba(147, 49, 131, 0.12) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
/* Icon box: large dark square (matches Image 2 dark icon boxes) */
.service-icon-box {
width: 4.5rem !important;
height: 4.5rem !important;
border-radius: 1rem !important;
background: #1a1a2e !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 1rem !important;
color: #ffffff !important;
flex-shrink: 0 !important;
}
.service-icon-box svg {
width: 2rem !important;
height: 2rem !important;
stroke: #ffffff !important;
color: #ffffff !important;
}
/* Title */
.service-card-lovable h3 {
font-size: 1.1rem !important;
font-weight: 700 !important;
color: hsl(311, 50%, 37%) !important;
margin-bottom: 0.625rem !important;
text-align: center !important;
}
/* Description */
.service-card-lovable p {
font-size: 0.875rem !important;
line-height: 1.6 !important;
color: #555 !important;
text-align: center !important;
margin-bottom: 1rem !important;
}
/* MORE link */
.more-link {
color: hsl(311, 50%, 37%) !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
margin-top: auto !important;
}
}
/* ================================================================
FIX 1: OUR IMPACT — PROJECTS/CLIENTS/PUBLICATIONS TABS
Reference: Image 1 (mirror) — 3 tabs horizontal in a row,
icon + label visible, active tab has purple icon background
================================================================ */
@media (max-width: 767px) {
/* Force 3 tabs in one horizontal row — no wrapping */
.impact-tabs-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 1rem !important;
}
/* Each tab button: flex column, icon + label */
.impact-tab-btn {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex: 1 1 0 !important;
min-width: 0 !important;
gap: 0.5rem !important;
padding: 0 !important;
background: none !important;
border: none !important;
cursor: pointer !important;
}
/* Icon box — match Image 1: rounded square */
.impact-tab-icon {
width: 4.5rem !important;
height: 4.5rem !important;
border-radius: 0.875rem !important;
background: rgba(255, 255, 255, 0.85) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
opacity: 1 !important;
}
/* Active tab icon — dark purple fill */
.impact-tab-btn.active .impact-tab-icon {
background: hsl(310, 58%, 35%) !important;
box-shadow: 0 0 0 3px hsl(310, 58%, 35%), 0 0 0 5px white !important;
}
/* Icon SVG */
.impact-tab-icon svg {
width: 2rem !important;
height: 2rem !important;
color: hsl(310, 58%, 35%) !important;
}
.impact-tab-btn.active .impact-tab-icon svg {
color: #ffffff !important;
}
/* Label — ALWAYS visible (was hidden before) */
.impact-tab-label {
display: block !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-align: center !important;
color: hsl(0, 0%, 32%) !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.impact-tab-btn.active .impact-tab-label {
color: hsl(310, 58%, 35%) !important;
}
}
/* ================================================================
FIX 2: TRAINING HERO — BUTTONS SMALLER + TEXT FITS CONTAINER
Reference: Image 2 (fife.obglobalventures) — buttons are
full-width but not oversized, text wraps inside hero
================================================================ */
@media (max-width: 767px) {
/* tr-hero block 3 removed — see definitive block below */
}
/* ================================================================
FIX 3: OUR IMPACT MAP — BIGGER on mobile so clusters are visible
Reference: Image 3 — earth globe fills the map card,
cluster dots (7, 4, 1, 1) are visible over the image
================================================================ */
@media (max-width: 767px) {
/* Map container: bigger, rounded corners */
.impact-map-container {
border-radius: 1rem !important;
overflow: hidden !important;
min-height: unset !important;
}
/* Earth image: tall enough to show all clusters */
.globe-earth-img {
height: 320px !important;
min-height: 320px !important;
width: 100% !important;
object-fit: cover !important;
object-position: center 35% !important;
display: block !important;
filter: brightness(0.9) saturate(1.2) !important;
}
/* Project marker dots: slightly smaller so they fit */
.impact-map-marker {
transform: translate(-50%, -50%) !important;
}
/* Cluster bubbles: readable size */
.map-cluster {
min-width: 2.25rem !important;
min-height: 2.25rem !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
}
/* Legend: keep visible below map */
.impact-map-legend {
font-size: 0.78rem !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
padding: 0.625rem 0.75rem !important;
}
/* Tip text */
.impact-map-tip {
font-size: 0.72rem !important;
}
}
/* ================================================================
TRAINING HERO — DEFINITIVE MOBILE FIX (single source of truth)
All previous tr-hero mobile blocks removed above.
================================================================ */
@media (max-width: 767px) {
/* Section */
.tr-hero {
height: auto !important;
min-height: 500px !important;
overflow: hidden !important;
background-attachment: scroll !important;
}
/* Content wrapper: pushed to bottom so arrows sit above dots */
.tr-hero__bd {
padding-top: 4rem !important;
padding-bottom: 6rem !important;
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
justify-content: flex-end !important;
}
/* Breadcrumb */
.tr-hero__cr {
font-size: 0.72rem !important;
flex-wrap: wrap !important;
margin-bottom: 0.5rem !important;
color: rgba(255,255,255,0.8) !important;
}
.tr-hero__cr a {
color: rgba(255,255,255,0.8) !important;
font-size: 0.72rem !important;
}
/* Heading */
.tr-hero__h1 {
font-size: clamp(1.4rem, 6vw, 2.1rem) !important;
line-height: 1.15 !important;
margin-bottom: 0.5rem !important;
max-width: 100% !important;
word-break: break-word !important;
color: #fff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.55) !important;
}
/* Description */
.tr-hero__p {
font-size: 0.85rem !important;
line-height: 1.6 !important;
margin-bottom: 0.875rem !important;
max-width: 100% !important;
color: rgba(255,255,255,0.9) !important;
}
/* CTA buttons row: stack vertically, SMALL compact size */
.tr-hero__ac {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
width: 100% !important;
flex-wrap: nowrap !important;
}
/* Buttons: compact pill, NOT full-width, auto width */
.tr__btn {
display: inline-flex !important;
width: auto !important;
min-width: 130px !important;
max-width: 200px !important;
min-height: 40px !important;
padding: 0.5rem 1.25rem !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
border-radius: 9999px !important;
justify-content: center !important;
align-items: center !important;
line-height: 1 !important;
}
/* Arrows: fixed at bottom, z-index 1 (behind text layer) */
.tr-hero__nav {
position: absolute !important;
top: 50% !important;
bottom: auto !important;
left: 0.5rem !important;
right: 0.5rem !important;
transform: translateY(-50%) !important;
z-index: 1 !important;
pointer-events: none !important;
display: flex !important;
justify-content: space-between !important;
}
.tr-hero__ar {
pointer-events: auto !important;
width: 28px !important;
height: 28px !important;
}
/* Dots: bottom centre */
.tr-hero__dots {
bottom: 1rem !important;
z-index: 3 !important;
}
}
@media (max-width: 374px) {
.tr-hero__h1 { font-size: 1.3rem !important; }
.tr-hero__nav { display: none !important; }
.tr__btn { max-width: 170px !important; font-size: 0.78rem !important; }
}
/* ================================================================
HORIZONTAL OVERFLOW FIX — Prevents white space on right edge
when scrolling on mobile (affects Homepage, Who We Are,
What We Do, Our Impact pages)
ROOT CAUSE: Elements wider than viewport (carousel tracks,
decorative blobs, wide grids) combined with overflow-x:clip
(which some iOS/Android browsers don't honour correctly) allow
the user to physically drag the page right revealing white space.
FIX: overflow-x:hidden on all wrappers that contain wide children,
plus max-width:100% / width:100% guards on every section.
================================================================ */
/* Global safety net — applies on ALL pages, ALL screen sizes */
html, body {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* Every direct child of body and .site-main must not exceed viewport */
body > *,
.site-main,
.site-main > *,
.site-main > section,
.site-main > div {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* ── HOMEPAGE specific overflow sources ── */
/* Clients logo marquee carousel */
.clients-carousel-section {
overflow: hidden !important;
max-width: 100% !important;
}
.clients-carousel-wrapper {
overflow: hidden !important;
max-width: 100% !important;
width: 100% !important;
}
/* The track itself is intentionally wide (width:max-content for marquee)
but must be clipped by its wrapper */
.clients-carousel-track {
max-width: none; /* track stays wide for animation */
}
/* Partners section decorative blobs — can extend beyond bounds */
.partners-section-main {
overflow: hidden !important;
position: relative !important;
}
.partners-bg-mesh,
.partners-bg-blob {
overflow: hidden !important;
max-width: 100% !important;
}
/* Approaches grid */
.approaches-section,
.approaches-grid {
overflow: hidden !important;
max-width: 100% !important;
}
/* Testimonials section */
.testimonials-section-magenta,
.testimonial-carousel-container {
overflow: hidden !important;
max-width: 100% !important;
}
/* Services section */
.services-section-enhanced {
overflow: hidden !important;
max-width: 100% !important;
}
/* Mission section */
.mission-section {
overflow: hidden !important;
max-width: 100% !important;
}
/* ── WHO WE ARE specific ── */
.relative.pt-24,
.site-main .section {
overflow: hidden !important;
max-width: 100% !important;
}
/* ── WHAT WE DO specific ── */
.wwd-hero,
.wwd-intro-section,
.wwd-services-section,
.wwd-delivery-section,
.wwd-expertise-section,
.wwd-testimonials-section,
.wwd-impact-section {
overflow: hidden !important;
max-width: 100% !important;
}
.wwd-expertise-grid,
.wwd-services-grid,
.wwd-delivery-grid {
max-width: 100% !important;
overflow: hidden !important;
}
/* ── OUR IMPACT specific ── */
.impact-hero,
.impact-stats-section,
.impact-tabs-section,
.impact-map-section,
.impact-tab-content-wrapper {
overflow: hidden !important;
max-width: 100% !important;
}
/* ── MOBILE-SPECIFIC: extra tight on small screens ── */
@media (max-width: 767px) {
html, body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
position: relative !important;
}
/* Catch-all: every section on mobile */
section, article, header, footer, div, nav, main, aside {
max-width: 100% !important;
/* Do NOT add overflow:hidden here — it breaks sticky/fixed elements */
}
/* Specific known wide elements */
.clients-carousel-section,
.clients-carousel-wrapper,
.partners-section-main,
.approaches-section,
.testimonials-section-magenta,
.services-section-enhanced,
.mission-section,
.wwd-expertise-section,
.impact-map-section,
.impact-tabs-section,
.relative.pt-24,
.site-main .section {
overflow-x: hidden !important;
overflow-y: visible !important;
width: 100% !important;
max-width: 100% !important;
}
/* Images and media: never wider than their container */
img, video, canvas, svg, iframe, embed, object {
max-width: 100% !important;
}
/* Grids: ensure they don't create implicit wide columns */
[class*="-grid"],
[class*="grid-"] {
max-width: 100% !important;
min-width: 0 !important;
}
/* Tables: scroll internally, don't push the page */
table {
display: block !important;
overflow-x: auto !important;
max-width: 100% !important;
}
}
/* ================================================================
DEFINITIVE HORIZONTAL SCROLL FIX
ROOT CAUSE (confirmed): iOS Safari does not reliably honour
overflow-x:hidden on html/body when a child creates scroll-width
> viewport width. The body background was also transparent/primary
so rubber-band dragging revealed magenta or white behind content.
THREE-PART FIX:
1. touch-action: pan-y — CSS-level block of horizontal swipe
2. html background matches page so drag reveals correct colour
3. overflow:hidden on every section that has a coloured background
or contains a wide carousel/grid child
================================================================ */
/* ── PART 1: Block horizontal swipe at the CSS gesture level ── */
html, body {
touch-action: pan-y !important;
overscroll-behavior-x: none !important;
overflow-x: hidden !important;
}
/* ── PART 2: Sections with coloured backgrounds that bleed ── */
/* Homepage */
.testimonials-section-magenta {
overflow: hidden !important;
max-width: 100% !important;
}
.partners-section-main {
overflow: hidden !important;
max-width: 100% !important;
}
.approaches-section {
overflow: hidden !important;
max-width: 100% !important;
}
.services-section-enhanced {
overflow: hidden !important;
max-width: 100% !important;
}
.mission-section {
overflow: hidden !important;
max-width: 100% !important;
}
/* Homepage latest projects, approaches, clients */
.latest-projects-section,
.approaches-section,
.clients-section,
.contact-section-main {
overflow: hidden !important;
max-width: 100% !important;
}
/* What We Do */
.wwd-testimonials-section {
overflow: hidden !important;
max-width: 100% !important;
}
.wwd-testimonials-carousel {
overflow: hidden !important;
max-width: 100% !important;
}
.wwd-expertise-section,
.wwd-delivery-section,
.wwd-services-section,
.wwd-intro-section,
.wwd-impact-section {
overflow: hidden !important;
max-width: 100% !important;
}
/* Who We Are: inline sections handled in PHP — CSS backup */
.site-main .section {
overflow: hidden !important;
max-width: 100% !important;
}
/* ── PART 3: Carousel tracks contained in their wrappers ── */
.clients-carousel-wrapper,
.clients-carousel-section,
.wwd-testimonials-carousel,
.testimonial-carousel-container {
overflow: hidden !important;
max-width: 100% !important;
position: relative !important;
}
/* ── MOBILE-SPECIFIC: extra guards ── */
@media (max-width: 767px) {
html, body {
touch-action: pan-y !important;
overscroll-behavior-x: none !important;
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
/* Every direct child of body */
body > * {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Every section */
section, .section {
overflow-x: hidden !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Grids: never exceed viewport */
[class*="grid"],
[style*="display:grid"],
[style*="display: grid"] {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
/* ================================================================
GTRANSLATE WRAPPER — Nav bar integration
Matches existing .language-select styling so it fits seamlessly
================================================================ */
.gtranslate_wrapper {
display: inline-flex !important;
align-items: center !important;
margin-left: 0.25rem !important;
flex-shrink: 0 !important;
}
/* Style GTranslate's injected dropdown to match nav */
.gtranslate_wrapper select,
.gtranslate_wrapper .goog-te-gadget-simple {
padding: 0.375rem 0.5rem !important;
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 0.5rem !important;
color: white !important;
font-size: 0.75rem !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
outline: none !important;
}
.gtranslate_wrapper select:hover,
.gtranslate_wrapper .goog-te-gadget-simple:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
/* GTranslate link style (for flags+name widget look) */
.gtranslate_wrapper a {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 0.8rem !important;
text-decoration: none !important;
padding: 0.25rem 0.375rem !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.25rem !important;
white-space: nowrap !important;
transition: all 0.2s !important;
}
.gtranslate_wrapper a:hover {
color: #fff !important;
background: rgba(255,255,255,0.15) !important;
}
.gtranslate_wrapper img {
width: 16px !important;
height: 12px !important;
border-radius: 2px !important;
object-fit: cover !important;
}
/* Hide the old PHP-generated selects */
select#language-select,
select.language-select,
select#mobile-language-select,
select.mobile-language-select {
display: none !important;
}
@media (max-width: 767px) {
.gtranslate_wrapper {
margin-left: 0 !important;
width: 100% !important;
margin: 0.75rem 0 !important;
}
.gtranslate_wrapper select {
width: 100% !important;
}
}