/* =========================================================
SISTERS OF THE CROSS OF CHAVANOD — STANDALONE STYLESHEET v2
---------------------------------------------------------
Design language: "Soft UI / Modern Abstract Line Design"
· Keeps the original 5 supplied tones (Ice / Mist / Steel
/ Slate / Charcoal) and adds ONE warm accent — champagne
gold — reserved for eyebrows, underlines and key CTAs.
· Line art: flowing wave-line tiles + faint film grain,
all as data-URIs (zero extra requests).
· Motion: animated gold link underlines, sheen buttons,
dropdown fade-slide, animated wavy texture on dark
sections, buttery shared easing curve.
· 100% class-name compatible with v1 — every existing page
(about, provinces, contact, prayer wall…) keeps working.
FONT NOTE — this sheet no longer assumes specific webfonts;
add this once to (after your existing font links):
(Cormorant Garamond / Plus Jakarta Sans remain as fallbacks.)
========================================================= */
:root {
/* ---- Core palette (5 supplied tones + white, unchanged) ---- */
--ice: #E0FBFC; /* palest wash, light text on dark */
--mist: #C2DFE3; /* soft panels, hairlines, hover fills */
--steel: #9DB4C0; /* mid accent — links, icons, borders */
--slate: #5C6B73; /* body copy, muted text */
--charcoal: #253237; /* headings, dark surfaces, primary CTA */
--white: #ffffff;
/* ---- The single warm accent (champagne gold) ---- */
--gold: #C9A25E;
--gold-2: #E9D7AE;
--gold-deep: #9A7B3F;
/* ---- Semantic aliases (unchanged names, v1 compatible) ---- */
--text-dark: var(--charcoal);
--text-muted: var(--slate);
--bg-page: #F5FAFB; /* softened: pure ice → whisper of ice */
--bg-surface: var(--white);
--bg-surface-alt: var(--mist);
--border: var(--mist);
--border-strong: var(--steel);
--accent: var(--steel);
--accent-deep: var(--slate);
--brand: var(--charcoal);
--brand-deep: #161e22;
/* ---- Typography (graceful fallback chains) ---- */
--font-serif: 'Playfair Display', 'Fraunces', 'Cormorant Garamond', 'Cinzel', Georgia, serif;
--font-sans: 'Inter', 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
/* ---- Elevation / shape ---- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--shadow-sm: 0 2px 10px rgba(37, 50, 55, 0.06);
--shadow-md: 0 10px 28px rgba(37, 50, 55, 0.10);
--shadow-lg: 0 20px 48px rgba(37, 50, 55, 0.16);
/* ---- Motion ---- */
--ease: cubic-bezier(.22, 1, .36, 1);
/* ---- Line-art textures (data-URIs, no requests) ---- */
--lines-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23253237' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M-40 15 Q25 -11 65 15 T170 15 T275 15'/%3E%3Cpath d='M-40 52 Q25 78 65 52 T170 52 T275 52'/%3E%3Cpath d='M-40 89 Q25 63 65 89 T170 89 T275 89'/%3E%3Cpath d='M-40 126 Q25 152 65 126 T170 126 T275 126'/%3E%3Cpath d='M-40 163 Q25 137 65 163 T170 163 T275 163'/%3E%3Cpath d='M-40 200 Q25 226 65 200 T170 200 T275 200'/%3E%3Cpath d='M-40 237 Q25 211 65 237 T170 237 T275 237'/%3E%3C/g%3E%3C/svg%3E");
--lines-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23E0FBFC' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M-40 15 Q25 -11 65 15 T170 15 T275 15'/%3E%3Cpath d='M-40 52 Q25 78 65 52 T170 52 T275 52'/%3E%3Cpath d='M-40 89 Q25 63 65 89 T170 89 T275 89'/%3E%3Cpath d='M-40 126 Q25 152 65 126 T170 126 T275 126'/%3E%3Cpath d='M-40 163 Q25 137 65 163 T170 163 T275 163'/%3E%3Cpath d='M-40 200 Q25 226 65 200 T170 200 T275 200'/%3E%3Cpath d='M-40 237 Q25 211 65 237 T170 237 T275 237'/%3E%3C/g%3E%3C/svg%3E");
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 92px;
}
body {
font-family: var(--font-sans);
color: var(--text-dark);
background-color: var(--bg-page);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
::selection {
background: var(--steel);
color: var(--white);
}
/* Focus visibility (accessibility floor) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
outline: 2px solid var(--charcoal);
outline-offset: 3px;
border-radius: 4px;
}
/* =========================================================
Shared keyframes
========================================================= */
@keyframes sscFadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sscLineFlow {
from { background-position: 0 0; }
to { background-position: 260px 130px; }
}
@keyframes sscTrackScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes sscMenuDrop {
from { opacity: 0; transform: translateY(-12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* =========================================================
Typography
========================================================= */
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--brand);
font-weight: 650;
line-height: 1.14;
letter-spacing: -0.01em;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
p { color: var(--text-muted); }
a {
color: var(--brand);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--gold-deep);
}
hr {
border: 0;
border-top: 1px solid var(--border);
}
/* =========================================================
Top Bar
========================================================= */
.top-bar {
background: linear-gradient(90deg, var(--brand-deep), var(--charcoal) 55%, var(--brand-deep));
color: var(--ice);
font-size: 0.82rem;
padding: 9px 0;
border-bottom: 1px solid rgba(224, 251, 252, 0.12);
}
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.top-contact span {
margin-right: 18px;
color: rgba(224, 251, 252, 0.85);
}
.top-motto {
position: relative;
padding-left: 14px;
color: var(--gold-2);
font-style: italic;
letter-spacing: 0.01em;
}
.top-motto::before {
position: absolute;
top: 50%;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
content: "";
transform: translateY(-50%);
}
/* =========================================================
Header & Navigation — frosted sticky bar, gold underlines
========================================================= */
.main-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.88);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
flex-wrap: wrap;
position: relative;
}
.logo-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.header-main-logo {
width: 60px;
height: 60px;
object-fit: contain;
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.logo-title {
font-family: 'Playfair Display', serif;
font-size: 1.35rem;
font-weight: 700;
color: #253237;
text-transform: uppercase;
}
.logo-subtitle {
margin-top: 5px;
font-family: 'Inter', sans-serif;
font-size: 0.68rem;
color: #5C6B73;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (max-width: 768px) {
.header-main-logo {
width: 48px;
height: 48px;
}
.logo-title {
font-size: 1rem;
}
.logo-subtitle {
font-size: 0.55rem;
}
}
.logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.35rem;
color: var(--gold-2);
background: linear-gradient(135deg, var(--charcoal), var(--slate));
box-shadow: inset 0 0 0 1px rgba(233, 215, 174, .35), var(--shadow-sm);
flex-shrink: 0;
transition: transform 0.35s var(--ease);
}
.logo-link:hover .logo-icon {
transform: rotate(-10deg) scale(1.06);
}
/* Real logo image fills the circular badge cleanly
(use class="logo-icon has-img" when the badge contains an ![]()
) */
.logo-icon img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.logo-icon.has-img,
.logo-icon:has(img) {
padding: 0;
overflow: hidden;
background: var(--white);
box-shadow: inset 0 0 0 2px var(--gold-2), var(--shadow-sm);
}
/* Logo inside the footer */
.footer-logo img {
display: inline-block;
width: 46px;
height: 46px;
margin-right: 10px;
border-radius: 50%;
object-fit: cover;
vertical-align: middle;
box-shadow: inset 0 0 0 2px var(--gold-2);
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.logo-title {
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 700;
color: var(--brand);
}
.logo-subtitle {
font-size: 0.7rem;
color: var(--text-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* =========================================================
NAVIGATION STYLE ONLY — Match Reference Image
========================================================= */
.nav-menu > a,
.nav-drop-toggle {
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: 400;
color: #263238;
letter-spacing: 0;
border-radius: 0;
}
/* Active menu — bold like screenshot */
.nav-menu > a.active,
.nav-drop-toggle.active {
font-weight: 700;
color: #17262b;
background: transparent;
}
/* Hover — no background box */
.nav-menu > a:hover,
.nav-drop-toggle:hover {
color: #17262b;
background: transparent;
}
/* Underline style */
@media (min-width: 769px) {
.nav-menu > a::after,
.nav-drop-toggle::after {
right: 14px;
bottom: 4px;
left: 14px;
height: 2px;
border-radius: 0;
background: #172f35;
}
}
/* Small dropdown arrow */
.chevron {
font-size: 9px;
color: #8da0a6;
}
/* Dropdown panel — animated fade-slide on desktop */
.nav-dropdown-panel {
display: none;
flex-direction: column;
}
@media (min-width: 769px) {
.nav-item-dropdown {
position: relative;
}
.nav-dropdown-panel {
display: flex;
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 260px;
padding: 10px;
border: 1px solid var(--border);
border-top: 3px solid;
border-image: linear-gradient(90deg, var(--gold), var(--gold-2)) 1;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.97);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(12px);
z-index: 1100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown.open .nav-dropdown-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.nav-item-dropdown:hover .chevron,
.nav-item-dropdown.open .chevron {
transform: rotate(180deg);
}
.nav-dropdown-panel a {
position: relative;
padding: 10px 14px 10px 18px;
border-radius: var(--radius-sm);
font-size: 0.9rem;
color: var(--text-dark);
transition: background 0.2s ease, color 0.2s ease, padding-left 0.25s var(--ease);
}
.nav-dropdown-panel a::before {
position: absolute;
top: 50%;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
content: "";
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.25s ease;
}
.nav-dropdown-panel a:hover {
padding-left: 22px;
background: rgba(224, 251, 252, 0.6);
color: var(--brand);
}
.nav-dropdown-panel a:hover::before {
opacity: 1;
}
}
/* Mobile hamburger */
.mobile-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
cursor: pointer;
width: 44px;
height: 40px;
border: 1.5px solid var(--steel);
border-radius: 10px;
background: var(--bg-surface);
padding: 0;
transition: border-color 0.2s ease;
}
.mobile-toggle:hover {
border-color: var(--gold);
}
.mobile-toggle span {
width: 20px;
height: 2px;
background: var(--charcoal);
border-radius: 2px;
transition: transform 0.3s var(--ease), opacity 0.25s ease;
}
.mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Floating back-to-top — pure transition show/hide */
.back-to-top {
position: fixed;
right: 22px;
bottom: 26px;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: none;
border-radius: 50%;
color: var(--ice);
background: linear-gradient(135deg, var(--charcoal), var(--slate));
font-size: 1.15rem;
cursor: pointer;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, box-shadow 0.25s ease;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
box-shadow: 0 16px 40px rgba(201, 162, 94, .4);
transform: translateY(-3px);
}
/* =========================================================
Buttons — pill, sheen sweep, new gold variant
========================================================= */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 26px;
overflow: hidden;
border: 1.5px solid transparent;
border-radius: 999px;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.01em;
cursor: pointer;
text-align: center;
transition: transform 0.3s var(--ease), box-shadow 0.3s ease,
background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn::after {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
content: "";
transform: translateX(-130%);
transition: transform 0.8s var(--ease);
pointer-events: none;
}
.btn:hover::after {
transform: translateX(130%);
}
.btn-primary {
background: linear-gradient(135deg, var(--charcoal), #1b262b);
color: var(--ice);
}
.btn-primary:hover {
color: var(--ice);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-gold {
color: var(--charcoal);
background: linear-gradient(135deg, var(--gold-2), var(--gold) 60%, var(--gold-deep));
box-shadow: 0 10px 26px rgba(201, 162, 94, .35);
}
.btn-gold:hover {
color: var(--charcoal);
box-shadow: 0 16px 36px rgba(201, 162, 94, .5);
transform: translateY(-2px);
}
.btn-secondary {
background-color: var(--steel);
color: var(--brand-deep);
}
.btn-secondary:hover {
background-color: var(--slate);
color: var(--ice);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
border-color: var(--charcoal);
color: var(--charcoal);
background: transparent;
}
.btn-outline:hover {
background-color: var(--charcoal);
color: var(--ice);
}
.btn-outline.text-white {
border-color: rgba(224, 251, 252, 0.55);
color: var(--ice);
}
.btn-outline.text-white:hover {
background-color: var(--ice);
color: var(--charcoal);
}
/* =========================================================
Hero Section (generic, kept for inner pages)
========================================================= */
.hero-section {
position: relative;
padding: 110px 0;
color: var(--ice);
text-align: center;
overflow: hidden;
background: var(--brand-deep);
}
.hero-slides {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
transition: opacity 1.6s ease-in-out, transform 8s ease;
}
.hero-slide.active {
opacity: 1;
transform: scale(1);
}
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(22, 30, 34, 0.88), rgba(37, 50, 55, 0.82));
z-index: 1;
}
/* Subtle grain over heroes */
.hero-section::after {
position: absolute;
z-index: 1;
inset: 0;
opacity: .05;
background-image: var(--grain);
content: "";
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
margin-bottom: 22px;
padding: 8px 18px;
border: 1px solid rgba(233, 215, 174, 0.45);
border-radius: 999px;
color: var(--gold-2);
background: rgba(224, 251, 252, 0.08);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
backdrop-filter: blur(6px);
animation: sscFadeUp .8s var(--ease) both;
}
.hero-title {
margin-bottom: 16px;
color: var(--white);
font-size: 3.2rem;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.35);
animation: sscFadeUp .9s .1s var(--ease) both;
}
.hero-subtitle {
max-width: 780px;
margin: 0 auto 32px;
color: var(--mist);
font-size: 1.15rem;
animation: sscFadeUp 1s .2s var(--ease) both;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
animation: sscFadeUp 1.1s .3s var(--ease) both;
}
/* =========================================================
Quote Section
========================================================= */
.quote-section {
padding: 32px 0;
background: var(--mist)
var(--lines-light);
background-size: auto, 260px 260px;
border-bottom: 1px solid var(--steel);
}
.quote-card {
display: flex;
align-items: center;
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
.quote-icon {
color: var(--gold);
font-size: 3.2rem;
line-height: 1;
}
.quote-text {
margin-bottom: 5px;
color: var(--charcoal);
font-size: 1.1rem;
font-style: italic;
}
.quote-author {
color: var(--slate);
font-weight: 700;
}
/* =========================================================
Stats Section
========================================================= */
.stats-section {
padding: 44px 0;
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
text-align: center;
}
.stat-number {
position: relative;
display: inline-block;
padding-bottom: 8px;
color: var(--charcoal);
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: 700;
}
.stat-number::after {
position: absolute;
bottom: 0;
left: 50%;
width: 34px;
height: 2px;
border-radius: 4px;
background: linear-gradient(90deg, var(--gold), var(--gold-2));
content: "";
transform: translateX(-50%);
}
.stat-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-muted);
}
/* =========================================================
Sections General
========================================================= */
.section {
padding: 76px 0;
}
.section-light {
background: var(--bg-page);
}
/* Wave-line texture variant for light sections */
.section-waves {
background: var(--bg-page) var(--lines-light);
background-size: auto, 260px 260px;
}
/* Dark section — animated flowing line field + grain */
.section-dark,
.section-maroon { /* (v1 alias kept for compatibility) */
position: relative;
overflow: hidden;
isolation: isolate;
color: var(--ice);
background: linear-gradient(160deg, var(--brand-deep), var(--charcoal) 60%, #1b262b);
}
.section-dark::before,
.section-maroon::before {
position: absolute;
z-index: -1;
inset: 0;
background: var(--lines-dark);
background-size: 260px 260px;
content: "";
animation: sscLineFlow 36s linear infinite;
-webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 25%, transparent 92%);
mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 25%, transparent 92%);
pointer-events: none;
}
.section-dark::after,
.section-maroon::after {
position: absolute;
z-index: -1;
inset: 0;
opacity: .05;
background-image: var(--grain);
content: "";
pointer-events: none;
}
.section-maroon h2,
.section-maroon h3,
.section-dark h2,
.section-dark h3 {
color: var(--ice);
}
.section-header {
margin-bottom: 42px;
}
/* Eyebrow with gold side-lines */
.section-subtitle {
display: inline-flex;
align-items: center;
gap: .6rem;
color: var(--gold-deep);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.section-subtitle::before,
.section-subtitle::after {
display: inline-block;
width: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
content: "";
}
.section-subtitle::after {
background: linear-gradient(90deg, var(--gold), transparent);
}
/* Ornament underline — gradient line + center diamond */
.heading-underline {
position: relative;
width: 66px;
height: 3px;
margin: 14px auto 0;
border-radius: 20px;
background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}
.heading-underline::after {
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-radius: 1px;
background: var(--charcoal);
content: "";
transform: translate(-50%, -50%) rotate(45deg);
}
.section-dark .heading-underline::after,
.section-maroon .heading-underline::after {
background: var(--gold-2);
}
/* =========================================================
Founders Grid
========================================================= */
.founders-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-top: 30px;
}
.founder-card {
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: transform .4s var(--ease), box-shadow .4s ease;
}
.founder-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.founder-img {
position: relative;
height: 380px;
background-color: var(--mist);
background-size: cover;
background-position: center top;
}
/* Inner hairline frame — editorial touch */
.founder-img::after {
position: absolute;
inset: 13px;
border: 1px solid rgba(224, 251, 252, .55);
border-radius: 6px;
content: "";
pointer-events: none;
}
.founder-info {
padding: 24px;
}
.founder-tag {
display: inline-block;
margin-bottom: 10px;
color: var(--gold-deep);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* =========================================================
Ministries Grid
========================================================= */
.ministry-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.min-card {
position: relative;
padding: 28px 24px;
border: 1px solid rgba(224, 251, 252, 0.16);
border-radius: var(--radius-md);
background: rgba(224, 251, 252, 0.06);
text-align: center;
backdrop-filter: blur(6px);
transition: transform .35s var(--ease), background .3s ease, border-color .3s ease;
}
.min-card:hover {
border-color: rgba(233, 215, 174, 0.45);
background: rgba(224, 251, 252, 0.12);
transform: translateY(-6px);
}
.min-icon {
margin-bottom: 15px;
font-size: 2.4rem;
transition: transform .4s var(--ease);
}
.min-card:hover .min-icon {
transform: rotate(-8deg) scale(1.08);
}
.min-card h3 {
margin-bottom: 10px;
color: var(--ice);
font-size: 1.15rem;
}
/* =========================================================
News Grid
========================================================= */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
.news-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s ease;
}
.news-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-6px);
}
.news-image {
display: block;
width: 100%;
height: 260px;
object-fit: cover;
transition: transform .6s var(--ease), filter .4s ease;
}
.news-card:hover .news-image {
filter: saturate(1.05);
transform: scale(1.07);
}
.news-content {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
padding: 24px;
}
.news-content::before {
position: absolute;
top: 0;
right: 24px;
left: 24px;
height: 3px;
border-radius: 0 0 6px 6px;
background: linear-gradient(90deg, var(--gold-2), var(--gold));
content: "";
opacity: 0;
transition: opacity .3s ease;
}
.news-card:hover .news-content::before {
opacity: 1;
}
.news-date {
margin-bottom: 10px;
color: var(--gold-deep);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.news-card h3 {
margin-bottom: 12px;
color: var(--brand);
font-size: 1.2rem;
line-height: 1.3;
}
.news-card p {
margin-bottom: 15px;
color: var(--text-muted);
}
.news-card .read-more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
color: var(--charcoal);
font-size: 0.92rem;
font-weight: 700;
transition: color .2s ease, gap .3s var(--ease);
}
.news-card .read-more:hover {
gap: 11px;
color: var(--gold-deep);
}
/* =========================================================
Page Banners — dark gradient + wave lines + gold base
========================================================= */
.page-banner {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 72px 0;
color: var(--ice);
text-align: center;
background: linear-gradient(135deg, var(--brand-deep), var(--charcoal));
border-bottom: 3px solid;
border-image: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold)) 1;
}
.page-banner::before {
position: absolute;
z-index: -1;
inset: 0;
background: var(--lines-dark);
background-size: 260px 260px;
content: "";
-webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 100%, #000 20%, transparent 85%);
mask-image: radial-gradient(ellipse 85% 90% at 50% 100%, #000 20%, transparent 85%);
pointer-events: none;
}
.page-banner::after {
position: absolute;
z-index: -1;
right: -120px;
bottom: -160px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201, 162, 94, .22), transparent 70%);
filter: blur(50px);
content: "";
pointer-events: none;
}
.page-banner h1 {
margin-bottom: 10px;
color: var(--white);
font-size: 2.5rem;
letter-spacing: -0.02em;
animation: sscFadeUp .8s var(--ease) both;
}
.page-banner p {
color: var(--mist);
animation: sscFadeUp .9s .12s var(--ease) both;
}
/* =========================================================
Content Box
========================================================= */
.content-box {
padding: 40px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
}
.content-box h2 {
text-align: center;
}
.content-box p,
.content-box ul {
text-align: justify;
}
.logo-container,
.emblem-container {
max-width: 320px;
margin: 0 auto;
padding: 25px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background:
radial-gradient(circle at 50% 0%, rgba(233, 215, 174, .35), transparent 60%),
var(--ice);
text-align: center;
box-shadow: var(--shadow-sm);
}
.logo-container img,
.emblem-container img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* =========================================================
Provinces Grid
========================================================= */
.provinces-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
.province-card {
overflow: hidden;
border: 1px solid var(--border);
border-top: 4px solid var(--charcoal);
border-radius: var(--radius-md);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s ease, border-top-color .3s ease;
}
.province-card:hover {
border-top-color: var(--gold);
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.prov-header {
padding: 20px;
background: linear-gradient(180deg, #EDFAFB, var(--ice));
border-bottom: 1px solid var(--border);
}
.prov-region {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
color: var(--charcoal);
background: linear-gradient(135deg, var(--gold-2), #f0dfba);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.prov-header h3 {
margin: 10px 0 5px;
font-size: 1.3rem;
}
.prov-country {
font-size: 0.85rem;
color: var(--text-muted);
}
.prov-body {
padding: 20px;
font-size: 0.9rem;
color: var(--text-muted);
}
.prov-body hr {
margin: 15px 0;
}
/* =========================================================
Forms
========================================================= */
.form-container {
max-width: 800px;
margin: 0 auto;
padding: 38px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: var(--text-dark);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-dark);
background: var(--bg-page);
font-family: var(--font-sans);
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-control:focus {
outline: none;
border-color: var(--gold);
background: var(--white);
box-shadow: 0 0 0 4px rgba(201, 162, 94, 0.18);
}
.form-control::placeholder {
color: var(--steel);
}
textarea.form-control {
min-height: 130px;
resize: vertical;
}
.alert {
margin-bottom: 20px;
padding: 15px 18px;
border-radius: var(--radius-sm);
font-size: 0.92rem;
}
.alert-success {
background: #dff5f0;
color: #1f4d43;
border: 1px solid #a6ddd0;
}
.alert-error {
background: #fbe6e6;
color: #7a2323;
border: 1px solid #eeb3b3;
}
/* =========================================================
Timeline
========================================================= */
.timeline-container {
display: flex;
flex-direction: column;
max-width: 800px;
margin: 0 auto;
gap: 20px;
}
.timeline-step {
position: relative;
display: flex;
align-items: flex-start;
gap: 20px;
padding: 26px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s ease;
}
.timeline-step:hover {
box-shadow: var(--shadow-md);
transform: translateX(6px);
}
.step-num {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
color: var(--charcoal);
background: linear-gradient(135deg, var(--gold-2), var(--gold));
font-weight: 800;
box-shadow: 0 6px 14px rgba(201, 162, 94, .35);
}
/* =========================================================
Prayer Cards
========================================================= */
.prayers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 30px;
}
.prayer-card {
padding: 26px;
border: 1px solid var(--border);
border-top: 3px solid var(--steel);
border-radius: var(--radius-md);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s ease, border-top-color .3s ease;
}
.prayer-card:hover {
border-top-color: var(--gold);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.prayer-top {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
font-size: 0.82rem;
font-weight: 700;
}
.prayer-author {
color: var(--gold-deep);
}
.prayer-text {
margin-bottom: 15px;
color: var(--text-dark);
font-family: var(--font-serif);
font-size: 1.02rem;
font-style: italic;
line-height: 1.6;
}
.prayer-footer {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--text-muted);
}
/* =========================================================
Contact
========================================================= */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
}
.info-item {
margin-top: 20px;
}
.contact-region {
margin-bottom: 45px;
}
.contact-region-title {
display: inline-block;
margin-bottom: 22px;
padding-bottom: 10px;
border-bottom: 2px solid;
border-image: linear-gradient(90deg, var(--gold), var(--gold-2)) 1;
color: var(--charcoal);
font-size: 1.35rem;
}
.contact-office-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.contact-office-card {
padding: 24px 26px;
border: 1px solid var(--border);
border-top: 3px solid var(--charcoal);
border-radius: var(--radius-md);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s ease, border-top-color .3s ease;
}
.contact-office-card:hover {
border-top-color: var(--gold);
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.contact-office-name {
margin-bottom: 4px;
color: var(--brand);
font-family: var(--font-serif);
font-size: 1.05rem;
}
.contact-office-sub {
margin-bottom: 12px;
color: var(--slate);
font-size: 0.85rem;
font-style: italic;
}
.contact-office-address {
margin-bottom: 14px;
color: var(--text-dark);
font-size: 0.92rem;
line-height: 1.55;
white-space: pre-line;
}
.contact-office-meta {
padding-top: 10px;
border-top: 1px solid var(--border);
}
.contact-office-meta p {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0;
color: var(--text-muted);
font-size: 0.88rem;
}
.contact-office-meta a {
color: var(--charcoal);
font-weight: 600;
}
.contact-office-meta a:hover {
color: var(--gold-deep);
}
/* =========================================================
Footer
========================================================= */
.site-footer {
position: relative;
padding: 68px 0 0;
color: var(--ice);
background: linear-gradient(180deg, #1a252b, var(--brand-deep) 30%);
}
/* Gold hairline crowning the footer */
.site-footer::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-2) 50%, var(--gold) 70%, transparent);
content: "";
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 40px;
padding-bottom: 44px;
}
.footer-logo {
margin-bottom: 15px;
color: var(--gold-2);
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 700;
}
.footer-desc {
margin-bottom: 15px;
color: var(--mist);
font-size: 0.9rem;
}
.footer-motto {
color: var(--ice);
font-size: 0.85rem;
font-style: italic;
opacity: 0.75;
}
.footer-col h3 {
display: inline-block;
margin-bottom: 20px;
padding-bottom: 8px;
border-bottom: 2px solid;
border-image: linear-gradient(90deg, var(--gold), transparent) 1;
color: var(--ice);
font-size: 1.05rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
position: relative;
color: var(--mist);
transition: color .2s ease, padding-left .3s var(--ease);
}
.footer-links a::before {
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
content: "";
opacity: 0;
transform: translateY(-50%);
transition: opacity .25s ease;
}
.footer-links a:hover {
padding-left: 12px;
color: var(--gold-2);
}
.footer-links a:hover::before {
left: 2px;
opacity: 1;
}
.footer-bottom {
padding: 20px 0;
background: #101619;
border-top: 1px solid rgba(224, 251, 252, 0.06);
text-align: center;
font-size: 0.82rem;
color: var(--steel);
}
/* =========================================================
Utility — opt-in entrance animation for any element
(pair with a tiny JS IntersectionObserver on inner pages,
or add .in permanently for a load-time entrance)
========================================================= */
.fade-up {
opacity: 0;
transform: translateY(18px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.fade-up.in {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
===== BETTER UI POLISH (added) — all pages =====
========================================================= */
/* Gradient eyebrow text on section headers */
.section-subtitle {
background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Cards: deeper lift + gold glow on hover (every card type) */
.founder-card:hover,
.news-card:hover,
.province-card:hover,
.prayer-card:hover,
.contact-office-card:hover,
.min-card:hover {
box-shadow: 0 22px 50px rgba(37, 50, 55, .18), 0 0 0 1px rgba(201, 162, 94, .35);
transform: translateY(-8px);
}
/* Buttons: richer depth */
.btn:hover { transform: translateY(-3px); }
.btn-gold { box-shadow: 0 12px 30px rgba(201, 162, 94, .40); }
.btn-gold:hover { box-shadow: 0 18px 42px rgba(201, 162, 94, .55); }
/* Form focus glow */
.form-control:focus {
box-shadow: 0 0 0 4px rgba(201, 162, 94, .22), 0 6px 18px rgba(37, 50, 55, .10);
}
/* Rounded tops on card images for a cleaner edge */
.news-image, .founder-img { border-radius: var(--radius-md) var(--radius-md) 0 0; }
/* Nav links: gold underline always present, fills on hover/active */
@media (min-width: 769px) {
.nav-menu > a::after,
.nav-drop-toggle::after {
background: linear-gradient(90deg, var(--gold), var(--gold-2));
}
}
/* =========================================================
FINAL DESKTOP + MOBILE HEADER PATTERN
Uses existing site palette at 30% opacity.
This block is intentionally OUTSIDE all media queries.
========================================================= */
.main-header {
position: sticky;
top: 0;
z-index: 1000;
/* Existing palette, each stripe at 30% opacity */
background-color: #ffffff;
background-image: repeating-linear-gradient(
90deg,
rgba(224, 251, 252, 0.18) 0px,
rgba(224, 251, 252, 0.18) 20px,
rgba(194, 223, 227, 0.18) 20px,
rgba(194, 223, 227, 0.18) 40px,
rgba(157, 180, 192, 0.18) 40px,
rgba(157, 180, 192, 0.18) 60px,
rgba(92, 107, 115, 0.18) 60px,
rgba(92, 107, 115, 0.18) 80px,
rgba(37, 50, 55, 0.18) 80px,
rgba(37, 50, 55, 0.18) 100px
);
border-bottom: 1px solid rgba(157, 180, 192, 0.35);
/* Soft palette-based glow */
box-shadow:
inset 0 0 30px rgba(224, 251, 252, 0.18),
inset 0 0 52px rgba(194, 223, 227, 0.18),
0 0 14px rgba(157, 180, 192, 0.18),
0 6px 18px rgba(37, 50, 55, 0.18);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Keep header content clearly above the patterned surface */
.main-header .header-container {
position: relative;
z-index: 1;
}
/* Soft glow across the centre without hiding the pattern */
.main-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
ellipse at center,
rgba(224, 251, 252, 0.18) 0%,
rgba(194, 223, 227, 0.18) 38%,
transparent 72%
);
}
/* Thin glowing line at the bottom */
.main-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(37, 50, 55, 0.18),
rgba(92, 107, 115, 0.18),
rgba(157, 180, 192, 0.18),
rgba(194, 223, 227, 0.18),
rgba(224, 251, 252, 0.18)
);
box-shadow:
0 0 8px rgba(224, 251, 252, 0.18),
0 0 14px rgba(157, 180, 192, 0.18),
0 2px 10px rgba(37, 50, 55, 0.20);
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 768px) {
.top-bar .top-motto {
display: none;
}
.header-container {
padding: 12px 20px;
row-gap: 0;
}
/* Logo + hamburger share ONE row — long titles shrink instead
of pushing the toggle onto its own line */
.logo-link {
flex: 1 1 auto;
min-width: 0;
max-width: calc(100% - 56px);
}
.logo-icon {
width: 38px;
height: 38px;
font-size: 1.1rem;
}
.logo-text {
min-width: 0;
}
.logo-title {
font-size: clamp(.88rem, 3.7vw, 1.08rem);
line-height: 1.22;
}
.logo-subtitle {
font-size: .6rem;
letter-spacing: .08em;
}
.mobile-toggle {
display: flex;
order: 2;
flex-shrink: 0;
}
.logo-link {
order: 1;
}
/* Floating glassmorphism menu panel */
.nav-menu {
display: none;
flex-direction: column;
align-items: stretch;
gap: 2px;
position: absolute;
top: calc(100% + 8px);
right: 12px;
left: 12px;
order: 3;
width: auto;
padding: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .65);
border-radius: 18px;
background: rgba(255, 255, 255, .72);
box-shadow: 0 26px 60px rgba(14, 29, 38, .22);
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
}
.nav-menu.show {
display: flex;
animation: sscMenuDrop .45s var(--ease) both;
}
.nav-menu > a {
padding: 14px 24px;
border-bottom: 1px solid var(--border);
border-radius: 0;
}
.nav-menu > a:first-child {
color: var(--charcoal);
font-weight: 800;
}
.nav-menu > a:hover,
.nav-menu > a.active {
border-radius: 12px;
background-color: rgba(224, 251, 252, .6);
}
.nav-item-dropdown {
border-bottom: 1px solid var(--border);
}
.nav-drop-toggle {
justify-content: space-between;
width: 100%;
padding: 14px 24px;
border-radius: 0;
}
.nav-item-dropdown.open .chevron {
transform: rotate(180deg);
}
.nav-dropdown-panel {
margin: 2px 8px 8px;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 12px;
background: rgba(255, 255, 255, .5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.nav-item-dropdown.open .nav-dropdown-panel {
display: flex;
}
.nav-dropdown-panel a {
padding: 12px 24px 12px 40px;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.9rem;
}
.nav-dropdown-panel a:hover {
color: var(--gold-deep);
}
.hero-title {
font-size: 2.2rem;
}
.back-to-top {
right: 16px;
bottom: 18px;
width: 42px;
height: 42px;
}
.contact-office-grid {
grid-template-columns: 1fr;
}
.content-box,
.form-container {
padding: 26px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.fade-up {
opacity: 1;
transform: none;
}
}
/* =========================================================
FINAL TOP BAR — LEFT / CENTER / RIGHT ALIGNMENT
Location = LEFT
Motto = CENTER
Phone = RIGHT
Only the top bar is changed.
========================================================= */
.top-bar {
position: relative;
overflow: hidden;
min-height: 46px;
padding: 0;
background:
linear-gradient(
120deg,
#161e22 0%,
#253237 46%,
#1b292f 54%,
#161e22 100%
);
border-top: 1px solid rgba(224, 251, 252, 0.05);
border-bottom: 1px solid rgba(224, 251, 252, 0.10);
box-shadow:
inset 0 -1px 0 rgba(224, 251, 252, 0.04),
0 3px 14px rgba(22, 30, 34, 0.20);
}
/* Continuous soft glass light moving across the whole bar */
.top-bar::before {
content: "";
position: absolute;
top: -50%;
bottom: -50%;
left: -35%;
width: 30%;
z-index: 0;
background: linear-gradient(
100deg,
transparent 0%,
rgba(224, 251, 252, 0.02) 22%,
rgba(194, 223, 227, 0.10) 45%,
rgba(255, 255, 255, 0.14) 52%,
rgba(157, 180, 192, 0.08) 62%,
transparent 100%
);
filter: blur(8px);
transform: skewX(-20deg);
animation: sscTopBarGlassMove 5.5s linear infinite;
pointer-events: none;
}
/* Continuous animated glow line */
.top-bar::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
z-index: 2;
background: linear-gradient(
90deg,
transparent,
rgba(157, 180, 192, 0.20),
rgba(224, 251, 252, 0.72),
rgba(201, 162, 94, 0.38),
transparent
);
background-size: 220% 100%;
animation: sscTopBarBottomGlow 4s linear infinite;
box-shadow:
0 0 7px rgba(194, 223, 227, 0.25),
0 0 12px rgba(201, 162, 94, 0.08);
}
/* =========================================================
PERFECT 3-COLUMN ALIGNMENT
========================================================= */
.top-bar-content {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "location motto phone";
align-items: center;
min-height: 46px;
width: 100%;
gap: 24px;
padding-top: 0;
padding-bottom: 0;
}
/*
top-contact contains both location and phone in the HTML.
display: contents lets each span become its own grid item.
*/
.top-contact {
display: contents;
}
/* LEFT — Generalate */
.top-contact span:nth-child(1) {
grid-area: location;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
color: rgba(224, 251, 252, 0.92);
font-size: 0.79rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
animation: sscTopLeftEnter .8s var(--ease) both;
}
/* RIGHT — Phone number */
.top-contact span:nth-child(2) {
grid-area: phone;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
color: rgba(224, 251, 252, 0.92);
font-size: 0.79rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
animation: sscTopRightEnter .8s .1s var(--ease) both;
}
/* Hover polish only */
.top-contact span {
transition:
color .25s ease,
transform .3s var(--ease),
text-shadow .3s ease;
}
.top-contact span:hover {
color: var(--ice);
transform: translateY(-1px);
text-shadow: 0 0 10px rgba(224, 251, 252, 0.22);
}
/* =========================================================
CENTER — MOTTO
Continuous animated glass/shimmer text
========================================================= */
.top-motto {
grid-area: motto;
justify-self: center;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0;
padding: 8px 18px 8px 30px;
border: 1px solid rgba(194, 223, 227, 0.12);
border-radius: 999px;
background:
linear-gradient(
110deg,
rgba(255, 255, 255, 0.025),
rgba(194, 223, 227, 0.055),
rgba(255, 255, 255, 0.02)
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 0.79rem;
font-style: italic;
font-weight: 600;
line-height: 1;
white-space: nowrap;
color: transparent;
/*
Moving glass/gold shine INSIDE the text.
This animation runs continuously.
*/
background-image:
linear-gradient(
100deg,
var(--gold-2) 0%,
var(--gold-2) 28%,
#ffffff 42%,
var(--ice) 50%,
#ffffff 58%,
var(--gold-2) 72%,
var(--gold-2) 100%
);
background-size: 260% 100%;
background-position: 200% 0;
-webkit-background-clip: text;
background-clip: text;
animation:
sscMottoEnter .9s .18s var(--ease) both,
sscMottoGlassText 3.8s 1.1s linear infinite;
filter: drop-shadow(0 0 5px rgba(233, 215, 174, 0.16));
}
/* Glass pill layer behind the animated text */
.top-motto::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background:
linear-gradient(
110deg,
rgba(255, 255, 255, 0.025),
rgba(194, 223, 227, 0.055),
rgba(255, 255, 255, 0.02)
);
border: 1px solid rgba(201, 162, 94, 0.08);
box-shadow:
inset 0 0 14px rgba(224, 251, 252, 0.025),
0 0 14px rgba(194, 223, 227, 0.035);
animation: sscMottoGlassBreath 3.2s ease-in-out infinite;
}
/* Cross / gold pulse at the left of motto */
.top-motto::before {
content: "✝";
position: absolute;
top: 50%;
left: 11px;
width: auto;
height: auto;
color: var(--gold);
background: none;
font-size: 0.78rem;
font-style: normal;
line-height: 1;
transform: translateY(-50%);
text-shadow:
0 0 5px rgba(201, 162, 94, 0.55),
0 0 10px rgba(201, 162, 94, 0.25);
animation: sscCrossGlow 2s ease-in-out infinite;
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes sscTopBarGlassMove {
0% {
left: -35%;
opacity: 0;
}
10% {
opacity: 1;
}
55% {
left: 110%;
opacity: 1;
}
70%,
100% {
left: 110%;
opacity: 0;
}
}
@keyframes sscTopBarBottomGlow {
from {
background-position: 210% 0;
}
to {
background-position: -10% 0;
}
}
@keyframes sscTopLeftEnter {
from {
opacity: 0;
transform: translateX(-18px);
filter: blur(3px);
}
to {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
}
@keyframes sscTopRightEnter {
from {
opacity: 0;
transform: translateX(18px);
filter: blur(3px);
}
to {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
}
@keyframes sscMottoEnter {
from {
opacity: 0;
transform: translateY(-6px) scale(.97);
filter: blur(3px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes sscMottoGlassText {
0% {
background-position: 200% 0;
}
100% {
background-position: -60% 0;
}
}
@keyframes sscMottoGlassBreath {
0%,
100% {
border-color: rgba(201, 162, 94, 0.08);
box-shadow:
inset 0 0 10px rgba(224, 251, 252, 0.02),
0 0 10px rgba(194, 223, 227, 0.025);
}
50% {
border-color: rgba(201, 162, 94, 0.18);
box-shadow:
inset 0 0 18px rgba(224, 251, 252, 0.04),
0 0 18px rgba(194, 223, 227, 0.07);
}
}
@keyframes sscCrossGlow {
0%,
100% {
opacity: .70;
transform: translateY(-50%) scale(1);
}
50% {
opacity: 1;
transform: translateY(-50%) scale(1.14);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1000px) {
.top-bar-content {
gap: 14px;
}
.top-contact span:nth-child(1),
.top-contact span:nth-child(2),
.top-motto {
font-size: 0.72rem;
}
.top-motto {
padding-right: 12px;
padding-left: 27px;
}
}
@media (max-width: 768px) {
.top-bar {
min-height: 42px;
}
.top-bar-content {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
gap: 12px;
}
.top-contact {
display: contents;
}
.top-contact span:nth-child(1) {
font-size: 0.69rem;
}
.top-contact span:nth-child(2) {
font-size: 0.69rem;
}
/* Hide center motto on small screens to prevent overlap */
.top-motto {
display: none;
}
}
@media (max-width: 480px) {
.top-contact span:nth-child(1),
.top-contact span:nth-child(2) {
font-size: 0.64rem;
}
}
/* =========================================================
FINAL PROFESSIONAL NAV TYPOGRAPHY
Only navigation font styling is changed.
========================================================= */
.nav-menu > a,
.nav-drop-toggle {
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.015em;
color: #253237;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition:
color 0.25s ease,
background-color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* Slightly stronger active state */
.nav-menu > a.active,
.nav-drop-toggle.active {
font-weight: 800;
}
/* Professional hover movement */
.nav-menu > a:hover,
.nav-drop-toggle:hover {
transform: translateY(-1px);
}
/* Dropdown links */
.nav-dropdown-panel a {
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
font-size: 0.94rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Chevron visually balanced with bolder menu text */
.chevron {
font-size: 0.62rem;
font-weight: 700;
}
/* Tablet */
@media (max-width: 1100px) and (min-width: 769px) {
.nav-menu > a,
.nav-drop-toggle {
font-size: 0.94rem;
padding-left: 11px;
padding-right: 11px;
}
}
/* Mobile */
@media (max-width: 768px) {
.nav-menu > a,
.nav-drop-toggle {
font-size: 0.96rem;
font-weight: 700;
letter-spacing: 0.01em;
}
}
/* =========================================================
FINAL CLICK-ONLY NAVIGATION + GLASSMORPHISM DROPDOWNS
- Only the clicked dropdown remains open
- Clicking another dropdown closes the previous one
- Clicking outside closes all dropdowns
- Desktop hover no longer opens dropdowns
- Responsive mobile accordion behavior
- Uses local "Marvel Regular" font when available
========================================================= */
/*
Put your licensed font file here:
css/fonts/Marvel-Regular.woff2
If your CSS file is in /css/style.css, this URL is correct:
fonts/Marvel-Regular.woff2
*/
@font-face {
font-family: "Marvel Regular";
src:
url("fonts/Marvel-Regular.woff2") format("woff2"),
url("fonts/Marvel-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
font-display: swap;
}
/* ---------- Main navigation typography ---------- */
.nav-menu > a,
.nav-drop-toggle {
position: relative;
font-family: "Marvel Regular", "Bebas Neue", "Inter", sans-serif;
font-size: 1.08rem;
font-weight: 400;
line-height: 1;
letter-spacing: 0.035em;
color: #253237;
padding: 13px 15px;
border: 0;
border-radius: 10px;
background: transparent;
white-space: nowrap;
cursor: pointer;
transition:
color .25s ease,
background-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
.nav-menu > a:hover,
.nav-drop-toggle:hover {
color: #161e22;
background: rgba(255, 255, 255, 0.22);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
transform: translateY(-1px);
}
.nav-menu > a.active,
.nav-drop-toggle.active,
.nav-item-dropdown.open > .nav-drop-toggle {
color: #161e22;
background: rgba(194, 223, 227, 0.26);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .24),
0 5px 14px rgba(37, 50, 55, .07);
}
/* ---------- Active / hover underline ---------- */
@media (min-width: 769px) {
.nav-menu > a::after,
.nav-drop-toggle::after {
right: 15px;
bottom: 5px;
left: 15px;
height: 2px;
background: linear-gradient(
90deg,
transparent,
#253237 18%,
#5C6B73 50%,
#253237 82%,
transparent
);
transform: scaleX(0);
transform-origin: center;
transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nav-menu > a:hover::after,
.nav-menu > a.active::after,
.nav-drop-toggle.active::after,
.nav-item-dropdown.open > .nav-drop-toggle::after {
transform: scaleX(1);
}
}
/* =========================================================
DESKTOP — CLICK ONLY
========================================================= */
@media (min-width: 769px) {
.nav-item-dropdown {
position: relative;
}
/*
IMPORTANT:
Disable the old hover-open behavior completely.
Dropdown opens ONLY when JavaScript adds .open.
*/
.nav-item-dropdown:hover .nav-dropdown-panel {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(12px) scale(.98) !important;
}
.nav-item-dropdown.open .nav-dropdown-panel,
.nav-item-dropdown.open:hover .nav-dropdown-panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
}
.nav-dropdown-panel {
display: grid !important;
grid-template-columns: repeat(var(--dropdown-columns, 1), minmax(180px, 1fr));
position: absolute;
top: calc(100% + 12px);
left: 50%;
min-width: 250px;
width: max-content;
max-width: min(760px, calc(100vw - 32px));
padding: 12px;
border: 1px solid rgba(255, 255, 255, .42);
border-radius: 18px;
/*
Premium glassmorphism
*/
background:
linear-gradient(
135deg,
rgba(255, 255, 255, .70),
rgba(224, 251, 252, .38)
);
box-shadow:
0 24px 60px rgba(22, 30, 34, .22),
inset 0 1px 0 rgba(255, 255, 255, .72);
backdrop-filter: blur(22px) saturate(145%);
-webkit-backdrop-filter: blur(22px) saturate(145%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) translateY(12px) scale(.98);
transform-origin: top center;
transition:
opacity .24s ease,
visibility .24s ease,
transform .34s cubic-bezier(.22,1,.36,1);
overflow: hidden;
z-index: 1200;
}
/*
Ensure the open transform keeps the panel centered.
*/
.nav-item-dropdown.open .nav-dropdown-panel,
.nav-item-dropdown.open:hover .nav-dropdown-panel {
transform: translateX(-50%) translateY(0) scale(1) !important;
}
/* Soft glass highlight */
.nav-dropdown-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 12% 0%,
rgba(255,255,255,.52),
transparent 32%
),
linear-gradient(
110deg,
transparent 20%,
rgba(255,255,255,.18) 45%,
transparent 70%
);
}
/* Dropdown links */
.nav-dropdown-panel a {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: 44px;
padding: 11px 15px;
border: 1px solid transparent;
border-radius: 11px;
font-family: "Marvel Regular", "Bebas Neue", "Inter", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.15;
letter-spacing: .03em;
color: #253237;
background: transparent;
transition:
color .22s ease,
background .22s ease,
border-color .22s ease,
transform .25s cubic-bezier(.22,1,.36,1),
box-shadow .22s ease;
}
.nav-dropdown-panel a:hover {
color: #161e22;
background:
linear-gradient(
135deg,
rgba(255,255,255,.52),
rgba(194,223,227,.26)
);
border-color: rgba(255,255,255,.58);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.50),
0 7px 18px rgba(37,50,55,.08);
transform: translateX(3px);
}
/* Remove the old little bullet behavior */
.nav-dropdown-panel a::before {
display: none !important;
}
/* Dropdown chevron */
.nav-item-dropdown .chevron {
margin-left: 3px;
transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.nav-item-dropdown.open .chevron {
transform: rotate(180deg);
}
}
/* =========================================================
OPTIONAL MULTI-COLUMN DROPDOWNS
Add these classes to .nav-dropdown-panel in HTML:
.cols-2 or .cols-3
========================================================= */
@media (min-width: 769px) {
.nav-dropdown-panel.cols-2 {
--dropdown-columns: 2;
min-width: 430px;
}
.nav-dropdown-panel.cols-3 {
--dropdown-columns: 3;
min-width: 640px;
}
}
/* =========================================================
MOBILE — CLEAN CLICK ACCORDION
========================================================= */
@media (max-width: 768px) {
.nav-menu {
border: 1px solid rgba(255,255,255,.52);
background:
linear-gradient(
145deg,
rgba(255,255,255,.78),
rgba(224,251,252,.46)
);
box-shadow:
0 24px 55px rgba(22,30,34,.22),
inset 0 1px 0 rgba(255,255,255,.72);
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
}
.nav-menu > a,
.nav-drop-toggle {
width: 100%;
min-height: 48px;
padding: 14px 16px;
font-family: "Marvel Regular", "Bebas Neue", "Inter", sans-serif;
font-size: 1.04rem;
font-weight: 400;
letter-spacing: .035em;
border-radius: 11px;
}
.nav-item-dropdown {
border-bottom: 0;
}
.nav-dropdown-panel {
display: none;
grid-template-columns: 1fr;
margin: 4px 8px 10px;
padding: 8px;
border: 1px solid rgba(255,255,255,.48);
border-radius: 14px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.58),
rgba(194,223,227,.28)
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.56);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.nav-item-dropdown.open .nav-dropdown-panel {
display: grid;
animation: sscMobileDropdownOpen .32s cubic-bezier(.22,1,.36,1) both;
}
.nav-dropdown-panel a {
padding: 12px 14px;
border: 0;
border-radius: 9px;
font-family: "Marvel Regular", "Bebas Neue", "Inter", sans-serif;
font-size: .98rem;
font-weight: 400;
letter-spacing: .025em;
color: #253237;
}
.nav-dropdown-panel a:hover {
color: #161e22;
background: rgba(255,255,255,.44);
}
.nav-item-dropdown.open .chevron {
transform: rotate(180deg);
}
}
@keyframes sscMobileDropdownOpen {
from {
opacity: 0;
transform: translateY(-7px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.nav-menu {
right: 8px;
left: 8px;
padding: 9px;
border-radius: 15px;
}
.nav-menu > a,
.nav-drop-toggle {
min-height: 46px;
padding: 13px 14px;
font-size: 1rem;
}
.nav-dropdown-panel {
margin-right: 4px;
margin-left: 4px;
}
}
/* =========================================================
FINAL FIX — STRICT SINGLE OPEN DROPDOWN
This override guarantees that every dropdown that does NOT
have .open is completely hidden, even if old hover CSS exists.
========================================================= */
@media (min-width: 769px) {
/* Default: ALL dropdown panels are force-hidden */
.nav-item-dropdown > .nav-dropdown-panel,
.nav-item-dropdown:hover > .nav-dropdown-panel,
.nav-item-dropdown:focus-within > .nav-dropdown-panel {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform:
translateX(-50%)
translateY(12px)
scale(.98) !important;
}
/* ONLY the one parent with .open can display its panel */
.nav-item-dropdown.open > .nav-dropdown-panel,
.nav-item-dropdown.open:hover > .nav-dropdown-panel,
.nav-item-dropdown.open:focus-within > .nav-dropdown-panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform:
translateX(-50%)
translateY(0)
scale(1) !important;
}
/* Never allow a non-open dropdown to remain visually active */
.nav-item-dropdown:not(.open) > .nav-drop-toggle.active {
background: transparent !important;
box-shadow: none !important;
}
/* Only open dropdown rotates its arrow */
.nav-item-dropdown:not(.open) > .nav-drop-toggle .chevron {
transform: rotate(0deg) !important;
}
.nav-item-dropdown.open > .nav-drop-toggle .chevron {
transform: rotate(180deg) !important;
}
}
/* Mobile: again, ONLY .open displays its own child panel */
@media (max-width: 768px) {
.nav-item-dropdown > .nav-dropdown-panel {
display: none !important;
}
.nav-item-dropdown.open > .nav-dropdown-panel {
display: grid !important;
animation: sscMobileDropdownOpen .32s cubic-bezier(.22,1,.36,1) both;
}
}
/* =========================================================
ABSOLUTE FINAL DROPDOWN FIX
STRICTLY ONE DROPDOWN VISIBLE AT A TIME
---------------------------------------------------------
This block must remain at the VERY END of style.css.
JavaScript adds .js-single-dropdown to #navMenu.
========================================================= */
/* ---------- DESKTOP ---------- */
@media (min-width: 769px) {
/* Every panel is hidden by default */
#navMenu.js-single-dropdown .nav-item-dropdown > .nav-dropdown-panel,
#navMenu.js-single-dropdown .nav-item-dropdown:hover > .nav-dropdown-panel,
#navMenu.js-single-dropdown .nav-item-dropdown:focus-within > .nav-dropdown-panel {
display: flex !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform:
translateX(-50%)
translateY(14px)
scale(.97) !important;
transition:
opacity .22s ease,
visibility .22s ease,
transform .30s cubic-bezier(.22, 1, .36, 1) !important;
}
/*
ONLY the dropdown with .open can be shown.
Hover and focus-within cannot override this.
*/
#navMenu.js-single-dropdown
.nav-item-dropdown.open
> .nav-dropdown-panel,
#navMenu.js-single-dropdown
.nav-item-dropdown.open:hover
> .nav-dropdown-panel,
#navMenu.js-single-dropdown
.nav-item-dropdown.open:focus-within
> .nav-dropdown-panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform:
translateX(-50%)
translateY(0)
scale(1) !important;
}
/* Non-open dropdown buttons must never look active */
#navMenu.js-single-dropdown
.nav-item-dropdown:not(.open)
> .nav-drop-toggle {
background-color: transparent !important;
}
#navMenu.js-single-dropdown
.nav-item-dropdown:not(.open)
> .nav-drop-toggle.active {
background-color: transparent !important;
box-shadow: none !important;
}
/* Arrow state */
#navMenu.js-single-dropdown
.nav-item-dropdown:not(.open)
> .nav-drop-toggle
.chevron {
transform: rotate(0deg) !important;
}
#navMenu.js-single-dropdown
.nav-item-dropdown.open
> .nav-drop-toggle
.chevron {
transform: rotate(180deg) !important;
}
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
/* Hide every dropdown by default */
#navMenu.js-single-dropdown
.nav-item-dropdown
> .nav-dropdown-panel {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Show ONLY the one with .open */
#navMenu.js-single-dropdown
.nav-item-dropdown.open
> .nav-dropdown-panel {
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
animation:
sscStrictMobileDropdownOpen
.30s
cubic-bezier(.22, 1, .36, 1)
both;
}
#navMenu.js-single-dropdown
.nav-item-dropdown:not(.open)
> .nav-drop-toggle
.chevron {
transform: rotate(0deg) !important;
}
#navMenu.js-single-dropdown
.nav-item-dropdown.open
> .nav-drop-toggle
.chevron {
transform: rotate(180deg) !important;
}
}
@keyframes sscStrictMobileDropdownOpen {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
FINAL HEADER LOGO ALIGNMENT
Move the complete logo / brand block to the LEFT.
Navigation remains on the RIGHT.
Keep this block at the very end of style.css.
========================================================= */
.main-header .header-container {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
flex-wrap: nowrap !important;
}
/* Complete logo area stays at the left */
.main-header .logo-link {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
flex: 0 0 auto !important;
}
/* Logo image */
.main-header .header-main-logo {
display: block !important;
/* Larger logo for desktop */
width: 110px !important;
height: 80px !important;
margin: 0 !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
/* Brand text next to logo, if present */
.main-header .logo-text {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
margin-left: 12px !important;
margin-right: 0 !important;
text-align: left !important;
}
/* Keep navigation pushed to the right */
.main-header .nav-menu {
margin-left: auto !important;
margin-right: 0 !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) and (min-width: 769px) {
.main-header .header-container {
padding-left: 18px !important;
padding-right: 18px !important;
}
.main-header .header-main-logo {
width: 54px !important;
height: 54px !important;
}
.main-header .logo-text {
margin-left: 10px !important;
}
}
/* =========================================================
MOBILE
Logo stays on the LEFT, hamburger stays on the RIGHT.
========================================================= */
@media (max-width: 768px) {
.main-header .header-container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding-left: 14px !important;
padding-right: 14px !important;
flex-wrap: nowrap !important;
}
.main-header .logo-link {
margin-left: 0 !important;
margin-right: auto !important;
justify-content: flex-start !important;
min-width: 0 !important;
max-width: calc(100% - 58px) !important;
}
.main-header .header-main-logo {
width: 48px !important;
height: 48px !important;
}
.main-header .logo-text {
margin-left: 9px !important;
min-width: 0 !important;
text-align: left !important;
}
.main-header .logo-title {
text-align: left !important;
}
.main-header .logo-subtitle {
text-align: left !important;
}
.main-header .mobile-toggle {
margin-left: auto !important;
margin-right: 0 !important;
flex-shrink: 0 !important;
}
.main-header .nav-menu {
margin-left: 0 !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.main-header .header-container {
padding-left: 10px !important;
padding-right: 10px !important;
}
.main-header .header-main-logo {
width: 44px !important;
height: 44px !important;
}
.main-header .logo-text {
margin-left: 7px !important;
}
}
/* =========================================================
FINAL LOGO POSITION OVERRIDE — MOVE MUCH FURTHER LEFT
Keeps navigation behavior unchanged.
Put this at the VERY END of style.css.
========================================================= */
.main-header .header-container {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 18px !important;
padding-right: 24px !important;
justify-content: flex-start !important;
}
/* Move the entire logo + text block to the far left */
.main-header .logo-link {
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
transform: translateX(0) !important;
}
/* Keep navigation on the right */
.main-header .nav-menu {
margin-left: auto !important;
margin-right: 0 !important;
}
/* Tablet */
@media (max-width: 1100px) and (min-width: 769px) {
.main-header .header-container {
max-width: none !important;
padding-left: 14px !important;
padding-right: 18px !important;
}
}
/* Mobile */
@media (max-width: 768px) {
.main-header .header-container {
max-width: none !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.main-header .logo-link {
margin-left: 0 !important;
transform: none !important;
}
}
/* Extra small mobile */
@media (max-width: 480px) {
.main-header .header-container {
padding-left: 6px !important;
padding-right: 8px !important;
}
}
/* =========================================================
FOOTER SOCIAL ROW — proper icon buttons (fixes broken bars)
========================================================= */
/* =========================================================
FOOTER SOCIAL ROW — real icons + Histats on the right
========================================================= */
.footer-social-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-top: 8px;
padding: 22px 1.5rem;
border-top: 1px solid rgba(224, 251, 252, 0.08);
}
.social-heading {
margin: 0;
color: var(--ice);
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.social-icons {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid rgba(224, 251, 252, 0.16);
background: rgba(224, 251, 252, 0.06);
color: var(--mist);
text-decoration: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform .3s var(--ease), background .3s ease,
border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.social-btn svg {
display: block;
}
.social-btn:hover {
color: var(--charcoal);
background: linear-gradient(135deg, var(--gold-2), var(--gold));
border-color: var(--gold);
box-shadow: 0 10px 24px rgba(201, 162, 94, .35);
transform: translateY(-3px) scale(1.06);
}
.footer-histats {
display: inline-block;
padding: 10px 12px;
border-radius: 10px;
background: rgba(224, 251, 252, 0.04);
border: 1px solid rgba(224, 251, 252, 0.10);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
/* Push the widget's own colors toward your gold/charcoal palette */
filter: grayscale(0.6) sepia(0.35) hue-rotate(-10deg) saturate(1.4) brightness(0.9);
opacity: 0.85;
transition: opacity .3s ease, filter .3s ease;
}
.footer-histats:hover {
opacity: 1;
filter: grayscale(0.3) sepia(0.45) hue-rotate(-10deg) saturate(1.6) brightness(1);
}
@media (max-width: 640px) {
.footer-social-row {
flex-direction: column;
align-items: flex-start;
}
.footer-histats {
margin-left: 0;
}
}
.footer-bottom p {
font-size: 15px;
font-weight: 500;
color: transparent;
background: linear-gradient(
90deg,
#9DB4C0 20%,
#ffe082 50%,
#9DB4C0 80%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
animation: shine 3s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
}