/* styles.css — Google Fonts loaded via HTML for non-blocking render */
/* ─── THEME VARIABLES ─── */
:root {
/* Brand */
--navy: hsl(220, 38%, 10%);
--navy-light: hsl(220, 30%, 18%);
--gold: hsl(43, 74%, 49%);
--gold-light: hsl(45, 90%, 60%);
--gold-dark: hsl(40, 65%, 38%);
/* Light mode surfaces (default) */
--bg-page: #ffffff;
--bg-surface: #ffffff;
--bg-gray: hsl(220, 10%, 95%);
--border: hsl(220, 14%, 90%);
/* Light mode text */
--text-primary: hsl(220, 20%, 12%);
--text-secondary: hsl(220, 10%, 40%);
--text-muted: hsl(220, 10%, 55%);
/* Misc */
--white: #ffffff;
--gray: hsl(220, 10%, 95%);
--gray-dark: hsl(220, 10%, 40%);
/* Header */
--header-bg: #ffffff;
--header-shadow: 0 1px 3px rgba(0, 0, 0, .08);
/* Card */
--card-bg: #ffffff;
--card-border: hsl(220, 14%, 90%);
}
/* ─── DARK MODE OVERRIDES ─── */
[data-theme="dark"] {
--bg-page: hsl(220, 38%, 7%);
--bg-surface: hsl(220, 35%, 11%);
--bg-gray: hsl(220, 32%, 14%);
--border: rgba(255, 255, 255, .08);
--text-primary: hsl(220, 15%, 90%);
--text-secondary: hsl(220, 10%, 60%);
--text-muted: hsl(220, 10%, 45%);
--gray: hsl(220, 32%, 14%);
--gray-dark: hsl(220, 10%, 60%);
--header-bg: hsl(220, 38%, 9%);
--header-shadow: 0 1px 0 rgba(255, 255, 255, .06);
--card-bg: hsl(220, 35%, 13%);
--card-border: rgba(255, 255, 255, .07);
--navy: hsl(220, 38%, 10%);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--text-primary);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
padding-bottom: 62px;
transition: background .3s, color .3s;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Playfair Display', Georgia, serif;
line-height: 1.2;
color: var(--text-primary);
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
ul {
list-style: none;
}
/* ─── LAYOUT ─── */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
@media(min-width:640px) {
.container {
padding: 0 1.5rem;
}
}
@media(min-width:1024px) {
.container {
padding: 0 2rem;
}
}
/* ─── BUTTONS ─── */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .75rem 2rem;
background: var(--navy);
color: #fff;
font-weight: 600;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
font-family: 'Inter', sans-serif;
transition: all .3s;
}
.btn-primary:hover {
background: var(--gold);
color: var(--navy);
}
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .75rem 2rem;
background: var(--gold);
color: var(--navy);
font-weight: 600;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
font-family: 'Inter', sans-serif;
transition: all .3s;
}
.btn-gold:hover {
background: var(--navy);
color: #fff;
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .75rem 2rem;
border: 2px solid #fff;
color: #fff;
font-weight: 600;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
font-family: 'Inter', sans-serif;
transition: all .3s;
}
.btn-outline:hover {
background: #fff;
color: var(--navy);
}
/* ─── SECTION TITLES ─── */
.section-subtitle {
font-size: .75rem;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .2em;
color: var(--gold-dark);
font-family: 'Inter', sans-serif;
}
.section-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
color: var(--navy);
margin-top: .5rem;
}
.gold-line {
width: 4rem;
height: .25rem;
background: var(--gold);
margin: .75rem 0;
}
.gold-line.center {
margin: .75rem auto;
}
/* ─── TOP BAR ─── */
.topbar {
background: var(--navy);
color: #fff;
font-size: .75rem;
display: none;
}
@media(min-width:1024px) {
.topbar {
display: block;
}
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem 0;
}
.topbar-left,
.topbar-right {
display: flex;
align-items: center;
gap: 1.5rem;
}
.topbar a {
color: rgba(255, 255, 255, .8);
display: flex;
align-items: center;
gap: .375rem;
transition: color .2s;
}
.topbar a:hover {
color: var(--gold);
}
.topbar-sep {
color: rgba(255, 255, 255, .3);
}
/* ─── HEADER ─── */
header {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
transition: box-shadow .3s;
}
header.scrolled {
box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: .75rem 0;
}
.logo img {
height: 3rem;
width: auto;
}
/* ─── NAV ─── */
nav.desktop-nav {
display: none;
align-items: center;
}
@media(min-width:1024px) {
nav.desktop-nav {
display: flex;
}
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: .25rem;
padding: 1.25rem 1rem;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--navy);
transition: color .2s;
white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
color: var(--gold-dark);
}
.nav-link .indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2rem;
height: .125rem;
background: var(--gold);
display: none;
}
.nav-link.active .indicator {
display: block;
}
.nav-link svg {
width: .75rem;
height: .75rem;
transition: transform .2s;
}
.nav-item:hover .nav-link svg {
transform: rotate(180deg);
}
.dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
border-top: 2px solid var(--gold);
min-width: 15rem;
z-index: 100;
padding: .5rem 0;
}
.nav-item:hover .dropdown {
display: block;
animation: dropIn .25s ease-out;
}
.dropdown a {
display: block;
padding: .625rem 1.5rem;
font-size: .875rem;
font-weight: 500;
color: var(--navy);
transition: all .15s;
}
.dropdown a:hover {
color: var(--gold-dark);
background: var(--gray);
}
/* ─── MOBILE TOGGLE ─── */
.mobile-toggle {
display: flex;
align-items: center;
padding: .5rem;
color: var(--navy);
}
@media(min-width:1024px) {
.mobile-toggle {
display: none;
}
}
.mobile-toggle svg {
width: 1.5rem;
height: 1.5rem;
}
/* ─── MOBILE MENU ─── */
.mobile-menu {
display: none;
background: #fff;
border-top: 1px solid var(--border);
max-height: calc(100vh - 5rem);
overflow-y: auto;
}
.mobile-menu.open {
display: block;
}
.mobile-menu-inner {
padding: 1rem 0;
}
.mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: .75rem .5rem;
font-size: .875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--navy);
width: 100%;
}
.mobile-submenu {
display: none;
padding-left: 1.5rem;
}
.mobile-submenu.open {
display: block;
}
.mobile-submenu a {
display: block;
padding: .625rem .5rem;
font-size: .875rem;
color: hsl(220, 10%, 40%);
}
.mobile-menu-footer {
padding: 1rem .5rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: .5rem;
font-size: .75rem;
color: hsl(220, 10%, 40%);
margin-top: .5rem;
}
/* ─── GOLD ACCENT LINE ─── */
.header-accent {
height: .125rem;
background: linear-gradient(to right, var(--gold), var(--gold-light), var(--gold));
}
/* ─── HERO SLIDER ─── */
.hero {
position: relative;
height: 600px;
overflow: hidden;
background: var(--navy);
}
@media(min-width:768px) {
.hero {
height: 680px;
}
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s;
}
.slide.active {
opacity: 1;
}
.slide video,
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(10, 17, 36, .88), rgba(10, 17, 36, .55), transparent);
}
.hero-content {
position: relative;
z-index: 10;
height: 100%;
display: flex;
align-items: center;
}
.hero-flex {
display: flex;
align-items: center;
gap: 4rem;
width: 100%;
}
.hero-text {
flex: 1;
min-width: 0;
}
.hero-title {
font-size: clamp(1.75rem, 5vw, 3.5rem);
font-weight: 700;
color: #fff;
line-height: 1.15;
animation: heroFade 1.2s ease-out;
}
.hero-actions {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
animation: heroFade 1.2s ease-out;
}
.hero-prev,
.hero-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .1);
color: #fff;
transition: background .3s;
backdrop-filter: blur(4px);
}
.hero-prev:hover,
.hero-next:hover {
background: var(--gold);
}
.hero-prev {
left: 1rem;
}
.hero-next {
right: 1rem;
}
.hero-dots {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
align-items: center;
gap: .5rem;
}
.hero-dot {
height: .25rem;
background: rgba(255, 255, 255, .4);
border: none;
cursor: pointer;
transition: all .3s;
width: 1.25rem;
}
.hero-dot.active {
width: 2.5rem;
background: var(--gold);
}
.ken-burns {
animation: none;
}
.slide.active .ken-burns {
animation: kenBurns 20s ease-out infinite alternate;
}
/* ─── PSX LIVE CARD ─── */
.psx-card {
flex-shrink: 0;
width: 440px;
animation: heroFade 1.2s ease-out;
}
@media(max-width:1023px) {
.psx-card {
display: none;
}
}
.psx-card-inner {
background: rgba(10, 17, 36, .85);
backdrop-filter: blur(20px);
border: 1px solid rgba(201, 168, 76, .15);
border-radius: 16px;
padding: 28px;
box-shadow: 0 32px 80px rgba(0, 0, 0, .7);
animation: floatCard 5s ease-in-out infinite;
}
.psx-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 22px;
}
.psx-label {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, .5);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 6px;
}
.psx-price {
font-family: 'Playfair Display', Georgia, serif;
font-size: 38px;
font-weight: 700;
color: #fff;
letter-spacing: -1.5px;
line-height: 1;
}
.psx-change {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.psx-change-num {
font-size: 14px;
font-weight: 600;
color: #2ECC9A;
}
.psx-change-pct {
font-size: 11px;
color: #2ECC9A;
background: rgba(46, 204, 154, .1);
padding: 2px 9px;
border-radius: 100px;
}
.psx-live {
display: flex;
align-items: center;
gap: 5px;
background: rgba(46, 204, 154, .08);
border: 1px solid rgba(46, 204, 154, .2);
border-radius: 100px;
padding: 5px 12px;
}
.psx-live-dot {
width: 6px;
height: 6px;
background: #2ECC9A;
border-radius: 50%;
animation: pulseDot 1.5s ease-in-out infinite;
}
.psx-live-text {
font-size: 10px;
font-weight: 600;
color: #2ECC9A;
letter-spacing: 1.5px;
}
.psx-chart {
display: flex;
align-items: flex-end;
gap: 3px;
height: 92px;
margin-bottom: 10px;
}
.psx-chart-bar {
flex: 1;
border-radius: 2px 2px 0 0;
min-width: 0;
}
.psx-time {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.psx-time span {
font-size: 10px;
color: rgba(255, 255, 255, .4);
}
.psx-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, .06);
border-bottom: 1px solid rgba(255, 255, 255, .06);
margin-bottom: 16px;
}
.psx-stat-label {
font-size: 9px;
color: rgba(255, 255, 255, .4);
letter-spacing: 1px;
margin-bottom: 4px;
}
.psx-stat-val {
font-size: 12px;
font-weight: 500;
color: #fff;
}
.psx-stat-val.green {
color: #2ECC9A;
}
.psx-stat-val.red {
color: #E85B5B;
}
.psx-movers-title {
font-size: 9px;
font-weight: 600;
color: rgba(255, 255, 255, .4);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 10px;
}
.psx-mover {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 7px;
}
.psx-mover-sym {
font-size: 12px;
font-weight: 500;
color: #fff;
}
.psx-mover-chg {
font-size: 11px;
font-weight: 600;
padding: 2px 9px;
border-radius: 100px;
}
.psx-mover-chg.green {
color: #2ECC9A;
background: rgba(46, 204, 154, .1);
}
.psx-mover-chg.red {
color: #E85B5B;
background: rgba(227, 52, 47, .1);
}
.psx-mini-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.psx-mini-card {
background: rgba(10, 17, 36, .65);
backdrop-filter: blur(10px);
border: 1px solid rgba(201, 168, 76, .1);
border-radius: 10px;
padding: 16px;
}
.psx-mini-label {
font-size: 9px;
font-weight: 600;
color: rgba(255, 255, 255, .4);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 8px;
}
.psx-mini-val {
font-family: 'Playfair Display', Georgia, serif;
font-size: 20px;
font-weight: 700;
color: #fff;
}
.psx-mini-sub {
font-size: 11px;
color: #2ECC9A;
margin-top: 4px;
font-weight: 500;
}
.psx-mini-sub.muted {
color: rgba(255, 255, 255, .4);
}
/* ─── NEWS TICKER ─── */
.ticker {
background: var(--navy);
padding: 1.5rem 0;
overflow: hidden;
}
.ticker-inner {
display: flex;
align-items: center;
gap: 1rem;
}
.ticker-label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .2em;
font-weight: 700;
color: var(--gold);
white-space: nowrap;
flex-shrink: 0;
font-family: 'Inter', sans-serif;
}
.ticker-track-wrap {
flex: 1;
overflow: hidden;
position: relative;
}
.ticker-track {
display: flex;
gap: 1rem;
animation: marquee 40s linear infinite;
width: max-content;
}
.ticker-item {
flex-shrink: 0;
width: 18rem;
display: block;
}
.ticker-img-wrap {
position: relative;
height: 8rem;
overflow: hidden;
}
.ticker-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.ticker-item:hover .ticker-img-wrap img {
transform: scale(1.05);
}
.ticker-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(10, 17, 36, .95), rgba(10, 17, 36, .25), transparent);
}
.ticker-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: .75rem;
font-size: .75rem;
color: #fff;
font-weight: 600;
line-height: 1.3;
}
/* ─── STATS BAR ─── */
.stats-bar {
background: #fff;
border-bottom: 1px solid var(--border);
padding: 2.5rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media(min-width:768px) {
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.stat-item {
text-align: center;
border-left: 1px solid var(--border);
}
.stat-item:first-child {
border-left: none;
}
@media(max-width:767px) {
.stat-item {
border-left: none;
}
}
.stat-icon {
width: 2rem;
height: 2rem;
color: var(--gold-dark);
margin: 0 auto .5rem;
}
.stat-value {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
color: var(--navy);
font-family: 'Playfair Display', serif;
}
.stat-label {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--gray-dark);
margin-top: .25rem;
}
/* ─── SECTIONS ─── */
.section {
padding: 5rem 0;
}
.section-gray {
background: var(--gray);
}
.section-navy {
background: var(--navy);
color: #fff;
}
.section-gold {
background: var(--gold);
}
/* ─── ABOUT SECTION ─── */
.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media(min-width:1024px) {
.about-grid {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
}
.about-img-wrap {
position: relative;
}
.about-img-wrap img {
aspect-ratio: 4/3;
width: 100%;
object-fit: cover;
box-shadow: 0 25px 50px rgba(0, 0, 0, .15);
}
.about-img-deco1 {
position: absolute;
bottom: -1.5rem;
left: -1.5rem;
width: 8rem;
height: 8rem;
border: 4px solid var(--gold);
z-index: -1;
display: none;
}
.about-img-deco2 {
position: absolute;
top: -1.5rem;
right: -1.5rem;
width: 10rem;
height: 10rem;
background: rgba(10, 17, 36, .05);
z-index: -1;
display: none;
}
@media(min-width:768px) {
.about-img-deco1,
.about-img-deco2 {
display: block;
}
}
.about-text .btn-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.text-body {
color: hsl(220, 10%, 40%);
font-size: .9375rem;
line-height: 1.8;
}
.text-body p+p {
margin-top: 1rem;
}
/* ─── SERVICES GRID ─── */
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media(min-width:768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:1024px) {
.services-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.service-card {
background: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
border: 1px solid rgba(0, 0, 0, .04);
padding: 2rem;
display: flex;
flex-direction: column;
transition: box-shadow .3s;
}
.service-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}
.service-icon {
width: 3.5rem;
height: 3.5rem;
background: var(--navy);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
transition: background .3s;
}
.service-card:hover .service-icon {
background: var(--gold);
}
.service-icon svg {
width: 1.75rem;
height: 1.75rem;
color: var(--gold);
transition: color .3s;
}
.service-card:hover .service-icon svg {
color: var(--navy);
}
.service-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--navy);
margin-bottom: .75rem;
}
.service-desc {
font-size: .875rem;
color: hsl(220, 10%, 40%);
line-height: 1.7;
flex: 1;
}
.service-more {
margin-top: 1.25rem;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--gold-dark);
display: flex;
align-items: center;
gap: .5rem;
transition: gap .3s;
font-family: 'Inter', sans-serif;
}
.service-card:hover .service-more {
gap: .75rem;
}
/* ─── VISION MISSION ─── */
.vm-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media(min-width:768px) {
.vm-grid {
grid-template-columns: 1fr 1fr;
}
}
.vm-box {
padding: 2.5rem 3rem;
}
.vm-box-navy {
background: var(--navy);
color: #fff;
}
.vm-box-gold {
background: var(--gold);
color: var(--navy);
}
.vm-line {
width: 3rem;
height: .25rem;
margin-bottom: 1.5rem;
}
.vm-box-navy .vm-line {
background: var(--gold);
}
.vm-box-gold .vm-line {
background: var(--navy);
}
.vm-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.vm-box-navy .vm-text {
color: rgba(255, 255, 255, .75);
line-height: 1.8;
font-size: .9375rem;
}
.vm-box-gold .vm-text {
color: rgba(10, 17, 36, .8);
line-height: 1.8;
font-size: .9375rem;
}
/* ─── AWARDS ─── */
.awards-section {
position: relative;
overflow: hidden;
}
.awards-glow1,
.awards-glow2 {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
}
.awards-glow1 {
top: 0;
right: 0;
width: 24rem;
height: 24rem;
background: rgba(186, 146, 62, .05);
}
.awards-glow2 {
bottom: 0;
left: 0;
width: 18rem;
height: 18rem;
background: rgba(186, 146, 62, .05);
}
.awards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
@media(min-width:768px) {
.awards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media(min-width:1024px) {
.awards-grid {
grid-template-columns: repeat(6, 1fr);
}
}
.award-card {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .1);
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all .3s;
}
.award-card:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(186, 146, 62, .5);
}
.award-logo-wrap {
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.award-logo-wrap img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .8;
transition: opacity .3s;
}
.award-card:hover .award-logo-wrap img {
opacity: 1;
}
.award-org {
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--gold);
font-weight: 700;
margin-bottom: .5rem;
font-family: 'Inter', sans-serif;
}
.award-desc {
font-size: .7rem;
color: rgba(255, 255, 255, .5);
line-height: 1.4;
}
/* ─── GROUP COMPANIES ─── */
.group-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media(min-width:768px) {
.group-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media(min-width:1024px) {
.group-grid {
grid-template-columns: repeat(5, 1fr);
}
}
.group-card {
background: var(--gray);
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-bottom: 2px solid transparent;
transition: all .3s;
}
.group-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
border-color: var(--gold);
}
.group-logo {
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.group-logo img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.group-name {
font-size: .875rem;
font-weight: 700;
color: var(--navy);
line-height: 1.3;
}
.group-sector {
font-size: .75rem;
color: var(--gray-dark);
margin-top: .25rem;
}
/* ─── QUOTE ─── */
.quote-section {
background: var(--gray);
padding: 5rem 0;
}
.quote-wrap {
max-width: 56rem;
margin: 0 auto;
text-align: center;
}
.quote-icon {
width: 3rem;
height: 3rem;
color: var(--gold);
margin: 0 auto 1.5rem;
}
blockquote {
font-size: clamp(1.25rem, 3vw, 1.75rem);
color: var(--navy);
line-height: 1.6;
font-style: italic;
margin-bottom: 1.5rem;
}
.quote-line {
width: 4rem;
height: .25rem;
background: var(--gold);
margin: .75rem auto;
}
.quote-author {
font-size: .875rem;
font-weight: 700;
color: var(--gold-dark);
text-transform: uppercase;
letter-spacing: .1em;
font-family: 'Inter', sans-serif;
}
.quote-sub {
font-size: .75rem;
color: var(--gray-dark);
margin-top: .25rem;
}
/* ─── FOUNDATION ─── */
.foundation-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media(min-width:1024px) {
.foundation-grid {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
}
.foundation-img {
position: relative;
}
.foundation-img img {
aspect-ratio: 4/3;
width: 100%;
object-fit: cover;
box-shadow: 0 25px 50px rgba(0, 0, 0, .15);
}
.foundation-deco {
position: absolute;
bottom: -1.5rem;
right: -1.5rem;
width: 8rem;
height: 8rem;
background: var(--gold);
z-index: -1;
display: none;
}
@media(min-width:768px) {
.foundation-deco {
display: block;
}
}
.focus-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 2rem 0;
}
.focus-item {
display: flex;
align-items: center;
gap: .75rem;
padding: .75rem;
border-left: 2px solid var(--gold);
background: var(--gray);
}
.focus-item svg {
width: 1.25rem;
height: 1.25rem;
color: var(--gold-dark);
flex-shrink: 0;
}
.focus-item span {
font-size: .875rem;
font-weight: 600;
color: var(--navy);
}
/* ─── LOCATIONS ─── */
.locations-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media(min-width:768px) {
.locations-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:1024px) {
.locations-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.location-card {
background: #fff;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
border-top: 2px solid transparent;
transition: all .3s;
display: flex;
gap: 1rem;
}
.location-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
border-color: var(--gold);
}
.location-icon-wrap {
width: 3rem;
height: 3rem;
background: var(--navy);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .3s;
}
.location-card:hover .location-icon-wrap {
background: var(--gold);
}
.location-icon-wrap svg {
width: 1.5rem;
height: 1.5rem;
color: var(--gold);
transition: color .3s;
}
.location-card:hover .location-icon-wrap svg {
color: var(--navy);
}
.location-city {
font-size: 1.1rem;
font-weight: 700;
color: var(--navy);
margin-bottom: .5rem;
}
.location-addr {
font-size: .875rem;
color: hsl(220, 10%, 40%);
line-height: 1.6;
margin-bottom: .5rem;
}
.location-phone {
font-size: .875rem;
font-weight: 600;
color: var(--gold-dark);
display: flex;
align-items: center;
gap: .5rem;
}
.location-phone svg {
width: .875rem;
height: .875rem;
}
/* ─── PERFORMANCE ─── */
.slide,
.ken-burns,
.psx-ticker-track,
.ticker-track {
will-change: transform;
}
.slide {
contain: layout style;
}
/* ─── PSX LIVE TICKER ─── */
.psx-ticker-wrap {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
background: var(--navy);
border-top: 1px solid rgba(201, 168, 76, .16);
padding: 18px 0;
overflow: hidden;
}
.psx-ticker-left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
padding: 0 20px 0 28px;
background: linear-gradient(90deg, var(--navy) 65%, transparent);
}
.psx-ticker-badge {
display: flex;
align-items: center;
gap: 9px;
background: rgba(201, 168, 76, .1);
border: 1px solid rgba(201, 168, 76, .22);
border-radius: 100px;
padding: 8px 20px;
}
.psx-ticker-dot {
width: 8px;
height: 8px;
background: var(--gold);
border-radius: 50%;
animation: pulseDot 1.8s ease-in-out infinite;
}
.psx-ticker-badge span {
font-size: 13px;
font-weight: 700;
color: var(--gold);
letter-spacing: 2px;
}
.psx-ticker-track-wrap {
overflow: hidden;
}
.psx-ticker-track {
display: flex;
padding-left: 230px;
animation: tickerScroll 42s linear infinite;
width: max-content;
}
.psx-ticker-wrap:hover .psx-ticker-track {
animation-play-state: paused;
}
.psx-ticker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 0 32px;
white-space: nowrap;
border-right: 1px solid rgba(255, 255, 255, .06);
}
.psx-tk-sym {
font-size: 16px;
font-weight: 600;
color: #fff;
letter-spacing: .5px;
}
.psx-tk-val {
font-size: 16px;
color: rgba(255, 255, 255, .5);
}
.psx-tk-chg {
font-size: 15px;
font-weight: 600;
}
.psx-tk-chg.up {
color: #2ECC9A;
}
.psx-tk-chg.dn {
color: #E85B5B;
}
.psx-ticker-fade-r {
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
width: 80px;
background: linear-gradient(270deg, var(--navy), transparent);
pointer-events: none;
}
/* ─── CTA SECTION ─── */
.cta-section {
position: relative;
padding: 6rem 0;
overflow: hidden;
}
.cta-bg {
position: absolute;
inset: 0;
}
.cta-bg video {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-overlay {
position: absolute;
inset: 0;
background: rgba(10, 17, 36, .9);
}
.cta-content {
position: relative;
z-index: 10;
text-align: center;
max-width: 56rem;
margin: 0 auto;
}
.cta-title {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
color: #fff;
margin-bottom: 1.5rem;
}
.cta-text {
color: rgba(255, 255, 255, .75);
font-size: 1.1rem;
max-width: 40rem;
margin: 0 auto 2.5rem;
line-height: 1.8;
}
.cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
/* ─── FOOTER ─── */
footer {
background: var(--navy);
color: #fff;
}
.footer-main {
padding: 4rem 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
@media(min-width:768px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media(min-width:1024px) {
.footer-grid {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
}
.footer-logo {
height: 3.5rem;
width: auto;
margin-bottom: 1.25rem;
filter: none;
}
.footer-tagline {
font-size: .875rem;
color: rgba(255, 255, 255, .5);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.footer-socials {
display: flex;
gap: .75rem;
}
.social-btn {
width: 2.25rem;
height: 2.25rem;
background: rgba(255, 255, 255, .1);
display: flex;
align-items: center;
justify-content: center;
transition: all .3s;
}
.social-btn:hover {
background: var(--gold);
color: var(--navy);
}
.social-btn svg {
width: 1rem;
height: 1rem;
}
.footer-heading {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .15em;
color: var(--gold);
margin-bottom: 1.25rem;
font-family: 'Inter', sans-serif;
}
.footer-links {
display: flex;
flex-direction: column;
gap: .625rem;
}
.footer-links a {
font-size: .875rem;
color: rgba(255, 255, 255, .5);
transition: color .2s;
display: flex;
align-items: center;
gap: .5rem;
}
.footer-links a:hover {
color: var(--gold);
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: .75rem;
font-size: .875rem;
color: rgba(255, 255, 255, .5);
margin-bottom: .75rem;
}
.footer-contact-item svg {
width: 1rem;
height: 1rem;
color: var(--gold);
flex-shrink: 0;
margin-top: .25rem;
}
.footer-contact-item a:hover {
color: var(--gold);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .1);
padding: 1.25rem 0;
}
.footer-bottom-inner {
display: flex;
flex-direction: column;
gap: .75rem;
align-items: center;
text-align: center;
font-size: .75rem;
color: rgba(255, 255, 255, .35);
}
@media(min-width:768px) {
.footer-bottom-inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.footer-bottom-links {
display: flex;
gap: 1.25rem;
}
.footer-bottom-links a:hover {
color: var(--gold);
}
/* ─── PAGE HERO ─── */
.page-hero {
position: relative;
height: 295px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
@media(min-width:768px) {
.page-hero {
height: 295px;
}
}
.page-hero-bg {
position: absolute;
inset: 0;
}
.page-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-hero-overlay {
position: absolute;
inset: 0;
/* background: linear-gradient(to right, rgba(10, 17, 36, 1), rgba(10, 17, 36, .85), rgba(10, 17, 36, .5)); */
}
.page-hero-content {
position: relative;
z-index: 10;
padding-bottom: 3rem;
width: 100%;
}
.breadcrumbs {
display: flex;
align-items: center;
gap: .375rem;
font-size: .75rem;
color: black;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.breadcrumbs a:hover {
color: var(--gold);
}
.breadcrumbs span {
color: var(--gold);
}
.breadcrumbs svg {
width: .75rem;
height: .75rem;
}
.page-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: black;
line-height: 1.15;
}
.page-subtitle {
margin-top: .75rem;
font-size: 1rem;
color: black;
max-width: 40rem;
line-height: 1.7;
}
.page-gold-line {
width: 4rem;
height: .25rem;
background: var(--gold);
margin-top: 1.25rem;
}
/* ─── INNER PAGE SECTIONS ─── */
.inner-section {
padding: 5rem 0;
}
.inner-section-gray {
padding: 5rem 0;
background: var(--gray);
}
.inner-section-navy {
padding: 5rem 0;
background: var(--navy);
}
.max-4xl {
max-width: 56rem;
margin: 0 auto;
}
/* ─── CHECK LIST ─── */
.check-list {
display: flex;
flex-direction: column;
gap: .625rem;
}
.check-item {
display: flex;
align-items: flex-start;
gap: .75rem;
padding: 1rem;
background: var(--gray);
}
.check-item svg {
width: 1.25rem;
height: 1.25rem;
color: var(--gold-dark);
flex-shrink: 0;
margin-top: .125rem;
}
.check-item span {
font-size: .875rem;
color: var(--navy);
font-weight: 500;
}
/* ─── GRID CHECK ─── */
.check-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
}
/* ─── CARD HOVER NAVY ─── */
.hover-navy {
transition: all .3s;
}
.hover-navy:hover {
background: var(--navy) !important;
color: #fff !important;
}
.hover-navy:hover * {
color: #fff !important;
}
/* ─── TIMELINE ─── */
.timeline {
position: relative;
}
.timeline-line {
position: absolute;
left: 1rem;
top: 0;
bottom: 0;
width: .125rem;
background: var(--gold);
}
@media(min-width:768px) {
.timeline-line {
left: 50%;
transform: translateX(-50%);
}
}
.timeline-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 2rem;
}
@media(min-width:768px) {
.timeline-item {
width: 50%;
}
.timeline-item:nth-child(odd) {
margin-left: 0;
padding-right: 3rem;
}
.timeline-item:nth-child(even) {
margin-left: 50%;
padding-left: 3rem;
}
}
.timeline-dot {
position: absolute;
left: 1rem;
width: 1rem;
height: 1rem;
background: var(--gold);
border: 4px solid #fff;
border-radius: 50%;
z-index: 10;
margin-top: .375rem;
}
@media(min-width:768px) {
.timeline-dot {
left: auto;
right: -2.5rem;
}
.timeline-item:nth-child(even) .timeline-dot {
left: -2.5rem;
right: auto;
}
}
.timeline-content {
margin-left: 2.5rem;
background: var(--gray);
padding: 1.25rem;
flex: 1;
}
@media(min-width:768px) {
.timeline-content {
margin-left: 0;
}
}
.timeline-year {
font-size: 1.5rem;
font-weight: 700;
color: var(--gold-dark);
font-family: 'Playfair Display', serif;
}
.timeline-event {
font-size: .875rem;
color: hsl(220, 10%, 40%);
line-height: 1.6;
margin-top: .5rem;
}
/* ─── GALLERY GRID ─── */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .75rem;
}
@media(min-width:768px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media(min-width:1024px) {
.gallery-grid {
grid-template-columns: repeat(6, 1fr);
}
}
.gallery-thumb {
aspect-ratio: 1;
overflow: hidden;
position: relative;
cursor: pointer;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.gallery-thumb:hover img {
transform: scale(1.1);
}
.gallery-thumb-overlay {
position: absolute;
inset: 0;
background: rgba(10, 17, 36, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background .3s;
}
.gallery-thumb:hover .gallery-thumb-overlay {
background: rgba(10, 17, 36, .6);
}
.gallery-thumb-overlay svg {
width: 2rem;
height: 2rem;
color: #fff;
opacity: 0;
transition: opacity .3s;
}
.gallery-thumb:hover .gallery-thumb-overlay svg {
opacity: 1;
}
/* ─── CARD GRID 3 ─── */
.card-grid-3 {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media(min-width:768px) {
.card-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:1024px) {
.card-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* ─── CARD GRID 4 ─── */
.card-grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media(min-width:768px) {
.card-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:1024px) {
.card-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* ─── MEDIA CARD ─── */
.media-card {
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
overflow: hidden;
transition: all .3s;
cursor: pointer;
}
.media-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}
.media-card-img {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--navy);
}
.media-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s;
}
.media-card:hover .media-card-img img {
transform: scale(1.05);
}
.media-card-body {
padding: 1.25rem;
}
.media-card-title {
font-size: .9rem;
font-weight: 700;
color: var(--navy);
line-height: 1.4;
}
.media-card-meta {
font-size: .7rem;
color: var(--gold-dark);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
margin-top: .375rem;
font-family: 'Inter', sans-serif;
}
/* ─── FORM ─── */
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media(min-width:768px) {
.form-grid {
grid-template-columns: 1fr 1fr;
}
}
.form-label {
display: block;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--navy);
margin-bottom: .5rem;
font-family: 'Inter', sans-serif;
}
.form-input {
width: 100%;
padding: .75rem 1rem;
border: 1px solid var(--border);
background: var(--gray);
font-size: .875rem;
color: var(--navy);
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color .2s;
}
.form-input:focus {
border-color: var(--gold);
}
.form-group {
display: flex;
flex-direction: column;
}
/* ─── ANIMATIONS ─── */
@keyframes heroFade {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes kenBurns {
from {
transform: scale(1)
}
to {
transform: scale(1.1)
}
}
@keyframes marquee {
from {
transform: translateX(0)
}
to {
transform: translateX(-50%)
}
}
@keyframes dropIn {
from {
opacity: 0;
transform: translateY(-8px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes pulseDot {
0%,
100% {
opacity: 1;
transform: scale(1)
}
50% {
opacity: 0.3;
transform: scale(0.7)
}
}
@keyframes floatCard {
0%,
100% {
transform: translateY(0px)
}
50% {
transform: translateY(-10px)
}
}
@keyframes tickerScroll {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
/* ─── REVEAL ─── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ─── SCROLLBAR ─── */
::-webkit-scrollbar {
width: 8px
}
::-webkit-scrollbar-track {
background: var(--gray)
}
::-webkit-scrollbar-thumb {
background: var(--navy)
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold-dark)
}
/* ─── UTILITIES ─── */
.text-center {
text-align: center
}
.text-white {
color: #fff
}
.mt-2 {
margin-top: .5rem
}
.mt-3 {
margin-top: .75rem
}
.mt-4 {
margin-top: 1rem
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.mb-14 {
margin-bottom: 3.5rem
}
.flex {
display: flex
}
.flex-wrap {
flex-wrap: wrap
}
.items-center {
align-items: center
}
.gap-4 {
gap: 1rem
}
.justify-center {
justify-content: center
}
.relative {
position: relative
}
.w-full {
width: 100%
}
.border-card {
border-left: 4px solid var(--gold);
padding: 2rem;
background: var(--gray);
}
.navy-card {
background: var(--navy);
padding: 2.5rem;
color: #fff;
}
.gold-card {
background: var(--gold);
padding: 2.5rem;
color: var(--navy);
}
.shadow-card {
background: #fff;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}
.two-col-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media(min-width:1024px) {
.two-col-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ══════════════════════════════════════════════
DARK MODE OVERRIDES
Applied when
══════════════════════════════════════════════ */
/* Base surfaces */
[data-theme="dark"] body {
background: var(--bg-page);
color: var(--text-primary);
}
[data-theme="dark"] header {
background: var(--header-bg);
box-shadow: var(--header-shadow);
}
[data-theme="dark"] .mobile-menu {
background: hsl(220, 35%, 11%);
border-color: var(--border);
}
[data-theme="dark"] .mobile-nav-link {
color: var(--text-primary);
}
[data-theme="dark"] .mobile-submenu a {
color: var(--text-secondary);
}
/* Nav */
[data-theme="dark"] .nav-link {
color: var(--text-primary);
}
[data-theme="dark"] .dropdown {
background: hsl(220, 35%, 11%);
box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .dropdown a {
color: var(--text-primary);
}
[data-theme="dark"] .dropdown a:hover {
background: hsl(220, 32%, 14%);
color: var(--gold);
}
/* Stats bar */
[data-theme="dark"] .stats-bar {
background: var(--bg-surface);
border-color: var(--border);
}
[data-theme="dark"] .stat-item {
border-color: var(--border);
}
[data-theme="dark"] .stat-value {
color: var(--text-primary);
}
[data-theme="dark"] .stat-label {
color: var(--text-secondary);
}
/* Sections */
[data-theme="dark"] .section {
background: var(--bg-page);
}
[data-theme="dark"] .section-gray {
background: var(--bg-gray);
}
[data-theme="dark"] .section-title {
color: var(--text-primary);
}
[data-theme="dark"] .text-body {
color: var(--text-secondary);
}
/* About */
[data-theme="dark"] .about-img-deco2 {
background: rgba(255, 255, 255, .03);
}
/* Service cards */
[data-theme="dark"] .service-card {
background: var(--card-bg);
border-color: var(--card-border);
box-shadow: none;
}
[data-theme="dark"] .service-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .service-title {
color: var(--text-primary);
}
[data-theme="dark"] .service-desc {
color: var(--text-secondary);
}
/* Group cards */
[data-theme="dark"] .group-card {
background: var(--bg-gray);
}
[data-theme="dark"] .group-name {
color: var(--text-primary);
}
[data-theme="dark"] .group-sector {
color: var(--text-secondary);
}
/* Quote */
[data-theme="dark"] .quote-section {
background: var(--bg-gray);
}
[data-theme="dark"] blockquote {
color: var(--text-primary);
}
/* Focus items */
[data-theme="dark"] .focus-item {
background: var(--bg-gray);
}
[data-theme="dark"] .focus-item span {
color: var(--text-primary);
}
/* Location cards */
[data-theme="dark"] .location-card {
background: var(--card-bg);
box-shadow: none;
}
[data-theme="dark"] .location-city {
color: var(--text-primary);
}
[data-theme="dark"] .location-addr {
color: var(--text-secondary);
}
/* Governance board cards */
[data-theme="dark"] .bd-list {
border-color: var(--border);
}
[data-theme="dark"] .bd-card {
background: var(--card-bg);
border-color: var(--border);
}
[data-theme="dark"] .bd-card:hover {
background: hsl(220, 32%, 16%);
}
[data-theme="dark"] .bd-img-col {
background: var(--bg-gray);
}
[data-theme="dark"] .bd-text-col {
border-color: var(--border);
}
[data-theme="dark"] .bd-name {
color: var(--text-primary);
}
[data-theme="dark"] .bd-bio {
color: var(--text-secondary);
}
[data-theme="dark"] .bd-details {
color: var(--text-muted);
}
/* Media cards */
[data-theme="dark"] .media-card {
background: var(--card-bg);
box-shadow: none;
}
[data-theme="dark"] .media-card-title {
color: var(--text-primary);
}
/* Form */
[data-theme="dark"] .form-label {
color: var(--text-primary);
}
[data-theme="dark"] .form-input {
background: var(--bg-gray);
border-color: var(--border);
color: var(--text-primary);
}
/* Check items */
[data-theme="dark"] .check-item {
background: var(--bg-gray);
}
[data-theme="dark"] .check-item span {
color: var(--text-primary);
}
/* Timeline */
[data-theme="dark"] .timeline-content {
background: var(--bg-gray);
}
[data-theme="dark"] .timeline-dot {
border-color: var(--bg-page);
}
[data-theme="dark"] .timeline-event {
color: var(--text-secondary);
}
/* Utility cards */
[data-theme="dark"] .border-card {
background: var(--bg-gray);
}
[data-theme="dark"] .shadow-card {
background: var(--card-bg);
box-shadow: none;
}
/* Page hero pages (disclaimer, contact, 404) */
[data-theme="dark"] .inner-section {
background: var(--bg-page);
}
[data-theme="dark"] .inner-section-gray {
background: var(--bg-gray);
}
/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--bg-gray);
}
/* ─── THEME TOGGLE BUTTON ─── */
.theme-toggle {
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--border);
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
color: var(--text-primary);
transition: border-color .2s, background .2s;
margin-left: .5rem;
}
.theme-toggle:hover {
border-color: var(--gold);
background: rgba(201, 168, 76, .1);
}