1449 lines
38 KiB
SCSS
1449 lines
38 KiB
SCSS
// Fusion Website Theme - Westin Healthcare
|
|
// Modern, Minimal Design
|
|
// Copyright 2024-2026 Nexa Systems Inc.
|
|
|
|
// =============================================================================
|
|
// BRAND COLORS
|
|
// =============================================================================
|
|
|
|
$westin-primary: #0089BF; // Primary Blue
|
|
$westin-primary-dark: #006d99; // Darker blue for hover states
|
|
$westin-accent: #F5A623; // Golden/Orange accent (like Motion)
|
|
$westin-secondary: #8BC53F; // Secondary Green
|
|
$westin-secondary-dark: #6fa32d; // Darker green for hover
|
|
$westin-dark: #1a1a1a; // Near black
|
|
$westin-text: #333333; // Dark text
|
|
$westin-gray: #666666; // Secondary text
|
|
$westin-light-gray: #F5F5F5; // Background gray
|
|
$westin-border: #E5E5E5;
|
|
$westin-white: #FFFFFF;
|
|
|
|
// =============================================================================
|
|
// CSS CUSTOM PROPERTIES
|
|
// =============================================================================
|
|
|
|
:root {
|
|
--westin-primary: #{$westin-primary};
|
|
--westin-accent: #{$westin-accent};
|
|
--westin-dark: #{$westin-dark};
|
|
--header-height: 70px;
|
|
--top-bar-height: 36px;
|
|
}
|
|
|
|
// =============================================================================
|
|
// WIDER CONTAINER - 1800px Modern Layout
|
|
// =============================================================================
|
|
|
|
// Override Odoo's default container to be wider
|
|
.container,
|
|
.container-lg,
|
|
.container-xl,
|
|
.container-xxl {
|
|
max-width: 1800px !important;
|
|
margin: 0 auto;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
// Full-width sections (hero, banner, CTA) - stretch but content stays centered
|
|
.westin-hero,
|
|
.westin-banner,
|
|
.westin-cta {
|
|
width: 100%;
|
|
|
|
.container {
|
|
max-width: 1800px !important;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// HIDE DEFAULT ODOO ELEMENTS (We use custom header/footer)
|
|
// =============================================================================
|
|
|
|
// Hide default Odoo header navigation
|
|
#wrapwrap > header > nav.navbar,
|
|
#wrapwrap > header > .navbar,
|
|
header > nav.navbar {
|
|
display: none !important;
|
|
}
|
|
|
|
// Hide default Odoo footer content (keep our custom footer)
|
|
#wrapwrap > footer > .o_footer,
|
|
#wrapwrap > footer > div:not(.westin-footer),
|
|
footer > .container:not(.westin-footer .container) {
|
|
display: none !important;
|
|
}
|
|
|
|
// Ensure our custom elements are at the top
|
|
#wrapwrap {
|
|
> .westin-top-bar,
|
|
> .westin-header-modern {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
// Fix wrapwrap to be a flex container for proper ordering
|
|
#wrapwrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// =============================================================================
|
|
// TYPOGRAPHY
|
|
// =============================================================================
|
|
|
|
body {
|
|
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
color: $westin-text;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 600;
|
|
color: $westin-dark;
|
|
margin-bottom: 0.5em;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
// =============================================================================
|
|
// TOP BAR - Slim & Minimal
|
|
// =============================================================================
|
|
|
|
.westin-top-bar {
|
|
background-color: $westin-dark;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
padding: 8px 0;
|
|
font-size: 0.8rem;
|
|
|
|
.top-bar-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.funding-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
.badge-text {
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
a {
|
|
color: $westin-accent;
|
|
font-weight: 600;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-bar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.top-phone {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
|
i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
&:hover {
|
|
color: $westin-white;
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.canadian-badge {
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// MODERN HEADER
|
|
// =============================================================================
|
|
|
|
.westin-header-modern {
|
|
background-color: $westin-white;
|
|
border-bottom: 1px solid $westin-border;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: var(--header-height);
|
|
gap: 30px;
|
|
}
|
|
|
|
// Logo - 30% larger
|
|
.header-logo {
|
|
flex-shrink: 0;
|
|
|
|
img {
|
|
height: 59px;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// Navigation
|
|
.header-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1;
|
|
justify-content: center;
|
|
|
|
.nav-item {
|
|
position: relative;
|
|
|
|
> a, &.search-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 16px;
|
|
color: $westin-dark;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
i.fa-chevron-down {
|
|
font-size: 0.7rem;
|
|
opacity: 0.5;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $westin-light-gray;
|
|
|
|
i.fa-chevron-down {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dropdown
|
|
&.has-dropdown {
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 220px;
|
|
background: $westin-white;
|
|
border: 1px solid $westin-border;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
|
|
padding: 8px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(10px);
|
|
transition: all 0.2s ease;
|
|
|
|
a {
|
|
display: block;
|
|
padding: 10px 14px;
|
|
color: $westin-text;
|
|
font-size: 0.9rem;
|
|
border-radius: 6px;
|
|
transition: background 0.15s ease;
|
|
|
|
&:hover {
|
|
background-color: $westin-light-gray;
|
|
color: $westin-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover .dropdown-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Search Trigger
|
|
.search-trigger {
|
|
border: 1px solid $westin-border;
|
|
border-radius: 20px;
|
|
padding: 8px 16px !important;
|
|
|
|
i {
|
|
color: $westin-gray;
|
|
}
|
|
|
|
span {
|
|
color: $westin-gray;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: $westin-dark;
|
|
background: transparent !important;
|
|
|
|
i, span {
|
|
color: $westin-dark;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Header Actions
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
|
|
.action-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
color: $westin-text;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
border: 1px solid $westin-border;
|
|
border-radius: 20px;
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
border-color: $westin-dark;
|
|
background: $westin-light-gray;
|
|
}
|
|
}
|
|
|
|
.btn-contact {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
background: $westin-accent;
|
|
color: $westin-dark;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border-radius: 25px;
|
|
transition: all 0.2s ease;
|
|
|
|
i {
|
|
font-size: 0.8rem;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
&:hover {
|
|
background: darken($westin-accent, 8%);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba($westin-accent, 0.4);
|
|
|
|
i {
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mobile Menu Toggle
|
|
.mobile-menu-toggle {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
|
|
span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: $westin-dark;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// EXPANDABLE SEARCH BAR - Left edge fixed at search button, expands right only
|
|
// =============================================================================
|
|
|
|
.westin-header-modern {
|
|
.header-content {
|
|
position: relative;
|
|
}
|
|
|
|
// Navigation container - this is the positioning context for search-expanded
|
|
.header-nav {
|
|
position: relative;
|
|
|
|
.nav-item {
|
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
}
|
|
|
|
// Search trigger styling
|
|
.search-trigger {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
// Expanded search - INSIDE header-nav, positioned relative to nav
|
|
.search-expanded {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0; // Start at left edge of nav (where search button is)
|
|
transform: translateY(-50%);
|
|
width: 100px; // Collapsed width
|
|
height: 40px;
|
|
background: $westin-white;
|
|
border: 2px solid $westin-primary;
|
|
border-radius: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
// Animation: only width changes, left stays fixed
|
|
transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
|
opacity 0.15s ease,
|
|
visibility 0.15s ease;
|
|
z-index: 100;
|
|
|
|
&.active {
|
|
// Expand to cover menu items (40% wider)
|
|
width: 800px;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.search-form {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 6px 0 14px;
|
|
gap: 10px;
|
|
|
|
> i {
|
|
font-size: 1rem;
|
|
color: $westin-primary;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 0.95rem;
|
|
color: $westin-dark;
|
|
background: transparent;
|
|
min-width: 0;
|
|
height: 100%;
|
|
|
|
&::placeholder {
|
|
color: #888;
|
|
}
|
|
}
|
|
|
|
.search-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: $westin-light-gray;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
|
|
i {
|
|
font-size: 0.75rem;
|
|
color: $westin-gray;
|
|
}
|
|
|
|
&:hover {
|
|
background: $westin-dark;
|
|
|
|
i {
|
|
color: $westin-white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide menu items when search is open
|
|
body.search-open {
|
|
.westin-header-modern .header-nav {
|
|
// Hide all nav items (menu links)
|
|
.nav-item {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive - adjust expanded width
|
|
@media (max-width: 1200px) {
|
|
.westin-header-modern .header-nav .search-expanded.active {
|
|
width: 600px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.westin-header-modern .header-nav .search-expanded.active {
|
|
width: 470px;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// BUTTONS
|
|
// =============================================================================
|
|
|
|
.btn-westin-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: $westin-primary;
|
|
color: $westin-white;
|
|
padding: 12px 28px;
|
|
border-radius: 25px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
|
|
&:hover {
|
|
background-color: $westin-primary-dark;
|
|
color: $westin-white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba($westin-primary, 0.35);
|
|
}
|
|
}
|
|
|
|
.btn-westin-accent {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: $westin-accent;
|
|
color: $westin-dark;
|
|
padding: 12px 28px;
|
|
border-radius: 25px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
|
|
&:hover {
|
|
background-color: darken($westin-accent, 8%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba($westin-accent, 0.4);
|
|
}
|
|
}
|
|
|
|
.btn-westin-outline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: transparent;
|
|
color: $westin-dark;
|
|
padding: 12px 28px;
|
|
border-radius: 25px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
border: 2px solid $westin-dark;
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
|
|
&:hover {
|
|
background-color: $westin-dark;
|
|
color: $westin-white;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// HERO SECTION - Modern Clean Design
|
|
// =============================================================================
|
|
|
|
.westin-hero {
|
|
position: relative;
|
|
min-height: 560px;
|
|
background-color: #f8fafc;
|
|
|
|
.hero-slide {
|
|
position: relative;
|
|
min-height: 560px;
|
|
background-size: cover;
|
|
background-position: right center;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 60%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0) 100%);
|
|
}
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 580px;
|
|
padding: 50px 0;
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
line-height: 1.15;
|
|
margin-bottom: 18px;
|
|
color: $westin-dark;
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
color: $westin-gray;
|
|
margin-bottom: 32px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.btn-hero {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: linear-gradient(135deg, $westin-primary 0%, $westin-primary-dark 100%);
|
|
color: $westin-white;
|
|
padding: 16px 32px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 4px 14px rgba(0, 137, 191, 0.3);
|
|
|
|
i {
|
|
font-size: 0.85rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
&:hover {
|
|
color: $westin-white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 22px rgba(0, 137, 191, 0.4);
|
|
|
|
i {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Blue Banner
|
|
.westin-banner {
|
|
background: linear-gradient(135deg, $westin-primary 0%, $westin-primary-dark 100%);
|
|
padding: 22px 0;
|
|
text-align: center;
|
|
|
|
h2 {
|
|
color: $westin-white;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// INTRO SECTION
|
|
// =============================================================================
|
|
|
|
.westin-intro {
|
|
padding: 45px 0;
|
|
background-color: $westin-white;
|
|
|
|
p {
|
|
font-size: 1.05rem;
|
|
line-height: 1.85;
|
|
color: $westin-text;
|
|
margin: 0;
|
|
max-width: 1400px;
|
|
|
|
a {
|
|
color: $westin-primary;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 0.2s ease;
|
|
|
|
&:hover {
|
|
border-bottom-color: $westin-primary;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
color: $westin-dark;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// PRODUCT CATEGORIES GRID - Matching WordPress
|
|
// =============================================================================
|
|
|
|
.westin-categories {
|
|
padding: 50px 0 70px;
|
|
background-color: #f8fafc;
|
|
|
|
.categories-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 20px;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.category-card {
|
|
background-color: $westin-white;
|
|
text-align: center;
|
|
padding: 20px 15px 22px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 28px rgba(0, 137, 191, 0.12);
|
|
border-color: rgba(0, 137, 191, 0.15);
|
|
|
|
.category-image img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
h3 a {
|
|
color: $westin-primary-dark;
|
|
}
|
|
}
|
|
|
|
&.featured {
|
|
background: linear-gradient(135deg, #f0f8ff 0%, #e6f4ff 100%);
|
|
border-color: rgba(0, 137, 191, 0.2);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 16px;
|
|
color: $westin-dark;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
|
|
a {
|
|
color: inherit;
|
|
transition: color 0.2s ease;
|
|
|
|
&:hover {
|
|
color: $westin-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 200px;
|
|
margin-bottom: 18px;
|
|
padding: 0 10px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
.btn-view-all {
|
|
display: inline-block;
|
|
background-color: $westin-primary;
|
|
color: $westin-white;
|
|
padding: 10px 24px;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
transition: all 0.25s ease;
|
|
|
|
&:hover {
|
|
background-color: $westin-primary-dark;
|
|
color: $westin-white;
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive adjustments for categories
|
|
@media (max-width: 1400px) {
|
|
.westin-categories .categories-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.westin-categories .categories-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// ABOUT SECTION
|
|
// =============================================================================
|
|
|
|
.westin-about {
|
|
padding: 80px 0;
|
|
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
|
|
|
|
.about-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-image {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
right: -20px;
|
|
bottom: -20px;
|
|
background: linear-gradient(135deg, $westin-primary 0%, $westin-primary-dark 100%);
|
|
border-radius: 16px;
|
|
z-index: 0;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
img {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
|
|
}
|
|
}
|
|
|
|
.about-content {
|
|
h2 {
|
|
font-size: 2.5rem;
|
|
color: $westin-dark;
|
|
margin-bottom: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.title-underline {
|
|
width: 50px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, $westin-primary 0%, $westin-accent 100%);
|
|
border-radius: 2px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1rem;
|
|
line-height: 1.85;
|
|
color: $westin-gray;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.btn-primary-solid {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: $westin-primary;
|
|
color: $westin-white;
|
|
padding: 14px 32px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 4px 14px rgba(0, 137, 191, 0.25);
|
|
|
|
&:hover {
|
|
background-color: $westin-primary-dark;
|
|
color: $westin-white;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 22px rgba(0, 137, 191, 0.35);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// STATS SECTION
|
|
// =============================================================================
|
|
|
|
.westin-stats {
|
|
padding: 70px 0;
|
|
background: linear-gradient(135deg, $westin-dark 0%, #2a2a2a 100%);
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 40px;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 30px 20px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 3.2rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, $westin-white 0%, rgba(255, 255, 255, 0.85) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1;
|
|
margin-bottom: 12px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.95rem;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// FUNDING SECTION
|
|
// =============================================================================
|
|
|
|
.westin-funding {
|
|
padding: 80px 0;
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
text-align: center;
|
|
|
|
h2 {
|
|
font-size: 2.4rem;
|
|
margin-bottom: 12px;
|
|
color: $westin-dark;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.title-underline {
|
|
width: 50px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, $westin-primary 0%, $westin-accent 100%);
|
|
border-radius: 2px;
|
|
margin-bottom: 20px;
|
|
|
|
&.center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.funding-desc {
|
|
font-size: 1.1rem;
|
|
color: $westin-gray;
|
|
margin-bottom: 50px;
|
|
line-height: 1.75;
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.funding-logos {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.funding-card {
|
|
background-color: $westin-white;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
border-radius: 16px;
|
|
padding: 24px 20px;
|
|
text-align: center;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 28px rgba(0, 137, 191, 0.12);
|
|
border-color: rgba(0, 137, 191, 0.15);
|
|
}
|
|
|
|
.funding-label {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, $westin-primary 0%, $westin-primary-dark 100%);
|
|
color: $westin-white;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
padding: 8px 14px;
|
|
border-radius: 6px;
|
|
margin-bottom: 18px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
img {
|
|
max-width: 130px;
|
|
max-height: 85px;
|
|
object-fit: contain;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
&:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// CTA SECTION
|
|
// =============================================================================
|
|
|
|
.westin-cta {
|
|
padding: 90px 0;
|
|
background: linear-gradient(135deg, $westin-primary 0%, $westin-primary-dark 100%);
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -10%;
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -30%;
|
|
left: -5%;
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.6rem;
|
|
margin-bottom: 12px;
|
|
color: $westin-white;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.title-underline {
|
|
width: 50px;
|
|
height: 4px;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
border-radius: 2px;
|
|
margin-bottom: 20px;
|
|
|
|
&.center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 1.15rem;
|
|
margin-bottom: 35px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
line-height: 1.75;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.btn-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: $westin-white;
|
|
color: $westin-primary-dark;
|
|
padding: 16px 40px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
border: none;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
|
|
|
|
&:hover {
|
|
background-color: $westin-white;
|
|
color: $westin-primary-dark;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Additional button styles are defined earlier in the file
|
|
|
|
// =============================================================================
|
|
// FOOTER
|
|
// =============================================================================
|
|
|
|
.westin-footer {
|
|
background-color: $westin-dark;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
padding: 70px 0 25px;
|
|
|
|
// All footer links - white/light color for dark background
|
|
a {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
text-decoration: none !important;
|
|
|
|
&:hover {
|
|
color: $westin-white !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
&:visited {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
}
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 50px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.footer-col {
|
|
h4 {
|
|
color: $westin-white;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 2px solid $westin-primary;
|
|
display: inline-block;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
margin-bottom: 12px;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.9rem;
|
|
transition: all 0.2s ease;
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
|
|
i {
|
|
color: $westin-secondary !important; // Green accent for icons
|
|
width: 14px;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: $westin-white !important;
|
|
transform: translateX(3px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-contact {
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
margin-bottom: 15px;
|
|
font-size: 0.9rem;
|
|
|
|
i {
|
|
color: $westin-primary;
|
|
margin-top: 4px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-hours {
|
|
.hours-list {
|
|
font-size: 0.85rem;
|
|
|
|
.hour-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-bottom {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding-top: 25px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.copyright {
|
|
font-size: 0.85rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
gap: 12px;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
transition: all 0.25s ease;
|
|
|
|
&:hover {
|
|
background-color: $westin-primary;
|
|
color: $westin-white !important;
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Override default Odoo footer link colors for dark background
|
|
footer,
|
|
#wrapwrap > footer,
|
|
.o_footer {
|
|
a {
|
|
color: rgba(255, 255, 255, 0.85) !important;
|
|
|
|
&:hover {
|
|
color: $westin-white !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// RESPONSIVE DESIGN
|
|
// =============================================================================
|
|
|
|
@media (max-width: 1200px) {
|
|
.westin-header-modern {
|
|
.header-nav {
|
|
gap: 4px;
|
|
|
|
.nav-item > a, .nav-item.search-trigger {
|
|
padding: 8px 12px;
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
.header-actions {
|
|
.location-link {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.westin-header-modern {
|
|
.header-nav {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.westin-about .about-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.westin-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.westin-footer .footer-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.westin-top-bar {
|
|
.top-bar-content {
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.top-bar-right {
|
|
.canadian-badge {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.westin-header-modern {
|
|
.header-actions {
|
|
.btn-contact span {
|
|
display: none;
|
|
}
|
|
|
|
.btn-contact {
|
|
padding: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.westin-hero {
|
|
min-height: 350px;
|
|
|
|
.hero-content {
|
|
padding: 30px 20px;
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.westin-categories .categories-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.westin-footer {
|
|
.footer-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 40px;
|
|
}
|
|
|
|
.footer-bottom {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.westin-categories .categories-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.westin-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
|
|
.stat-item .stat-number {
|
|
font-size: 2.2rem;
|
|
}
|
|
}
|
|
|
|
.westin-funding .funding-logos {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
// =============================================================================
|
|
// UTILITY CLASSES
|
|
// =============================================================================
|
|
|
|
.text-westin-primary {
|
|
color: $westin-primary !important;
|
|
}
|
|
|
|
.text-westin-accent {
|
|
color: $westin-accent !important;
|
|
}
|
|
|
|
.bg-westin-primary {
|
|
background-color: $westin-primary !important;
|
|
}
|
|
|
|
.bg-westin-accent {
|
|
background-color: $westin-accent !important;
|
|
}
|
|
|
|
.bg-westin-light {
|
|
background-color: $westin-light-gray !important;
|
|
}
|