/*
Theme Name: Friends of Tennessee NWR
Theme URI: https://friendstnwr.org/
Description: A custom GeneratePress child theme for Friends of Tennessee National Wildlife Refuge. Includes a fully styled homepage, custom header and footer, and a Heritage-style design system based on navy, gold, and cream.
Author: Friends of Tennessee NWR
Author URI: https://friendstnwr.org/
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: friends-tnwr
*/
/* ============================================
DESIGN TOKENS
============================================ */
:root {
/* Brand colors */
--navy: #1a2d4f;
--navy-deep: #0f1d36;
--navy-light: #2a4068;
--gold: #d4a73a;
--gold-warm: #c79428;
--gold-deep: #a87a1d;
/* Neutrals */
--cream: #f8f4ea;
--paper: #fdfbf5;
--paper-warm: #f5efe0;
--text: #2a2a2a;
--text-muted: #5a5a5a;
--text-light: #888578;
--border: #e2dccb;
--border-soft: #ede7d4;
/* Layout */
--max-width: 1280px;
--content-width: 1100px;
/* Type families */
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Source Sans 3', system-ui, sans-serif;
}
/* ============================================
BASE
============================================ */
body.friends-tnwr {
font-family: var(--sans);
color: var(--text);
background: var(--paper);
line-height: 1.65;
font-size: 17px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.friends-tnwr img { max-width: 100%; display: block; }
.ft-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 32px;
}
.ft-container-narrow {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 32px;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 120px;
}
/* Hide default GP site header on pages using our custom layout */
body.ft-custom-header .site-header { display: none; }
/* ============================================
UTILITY BAR
============================================ */
.ft-utility-bar {
background: var(--navy-deep);
color: rgba(255,255,255,0.85);
font-size: 13px;
padding: 9px 0;
letter-spacing: 0.3px;
border-bottom: 1px solid rgba(212,167,58,0.15);
}
.ft-utility-bar .ft-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.fact-strip {
background: var(--cream);
border-bottom: 1px solid var(--border);
position: relative;
z-index: 3;
}
.fact-strip .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.fact-item {
padding: 28px 24px;
text-align: center;
position: relative;
}
.fact-item:not(:last-child)::after {
content: '';
position: absolute;
top: 20%;
right: 0;
height: 60%;
width: 1px;
background: var(--border);
}
.newsletter-archive h2 {
margin-bottom: 10px;
}
.newsletter-archive p {
margin-bottom: 25px;
}
.newsletter-list {
display: grid;
gap: 16px;
}
.newsletter-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 18px 22px;
background: #fff;
border: 1px solid rgba(12, 35, 66, 0.15);
border-radius: 8px;
font-weight: 700;
text-decoration: none !important;
transition: all 0.3s ease;
}
.newsletter-archive br {
display: none;
}
.newsletter-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.08);
border-color: #d6a932;
}
.newsletter-card strong {
color: #b77a00;
font-size: 14px;
white-space: nowrap;
}
.fact-item .num {
font-family: var(--serif);
font-size: 38px;
color: var(--navy);
line-height: 1;
font-weight: 600;
}
.fact-item .num .gold-mark {
color: var(--gold-warm);
}
.fact-item .lbl {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 8px;
font-weight: 600;
}
.ft-utility-bar a {
color: rgba(255,255,255,0.85);
text-decoration: none;
transition: color 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ft-utility-bar a:hover { color: var(--gold); }
.ft-utility-info { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.ft-utility-links { display: flex; gap: 22px; align-items: center; }
.ft-utility-links .divider { color: rgba(255,255,255,0.25); user-select: none; }
/* ============================================
MAIN HEADER
============================================ */
.ft-main-header {
background: var(--navy);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 0 var(--gold), 0 4px 20px rgba(0,0,0,0.15);
transition: box-shadow 0.2s;
}
.ft-main-header.is-scrolled {
box-shadow: 0 2px 0 var(--gold), 0 8px 30px rgba(0,0,0,0.2);
}
.ft-header-inner {
display: flex;
align-items: center;
padding: 18px 32px;
max-width: var(--max-width);
margin: 0 auto;
gap: 40px;
}
header.main-header {
background: var(--navy);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 0 var(--gold), 0 4px 20px rgba(0,0,0,0.15);
transition: padding 0.2s;
}
.header-inner {
display: flex;
align-items: center;
padding: 18px 32px;
max-width: var(--max-width);
margin: 0 auto;
gap: 40px;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
flex-shrink: 0;
}
.logo-wrap img {
height: 76px;
width: 76px;
background: white;
border-radius: 50%;
padding: 3px;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
transition: transform 0.3s;
}
.logo-wrap:hover img { transform: scale(1.04); }
.logo-text {
color: white;
line-height: 1.15;
}
.logo-text .org-name {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
letter-spacing: 0.5px;
}
.logo-text .org-sub {
font-size: 10px;
letter-spacing: 2.8px;
text-transform: uppercase;
color: var(--gold);
margin-top: 5px;
font-weight: 600;
}
/* ===== MAIN NAVIGATION ===== */
nav.main-nav {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 4px;
}
nav.main-nav > .nav-item {
position: relative;
}
nav.main-nav > .nav-item > a {
display: block;
color: white;
text-decoration: none;
padding: 12px 16px;
text-align: center;
transition: all 0.2s;
position: relative;
border-radius: 2px;
}
nav.main-nav > .nav-item > a .label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
}
nav.main-nav > .nav-item > a .sub {
display: block;
font-family: var(--serif);
font-style: italic;
font-size: 12px;
color: var(--gold);
margin-top: 2px;
font-weight: 400;
opacity: 0.85;
}
nav.main-nav > .nav-item > a::after {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: 6px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.25s ease;
transform-origin: center;
}
nav.main-nav > .nav-item:hover > a::after,
nav.main-nav > .nav-item.active > a::after {
transform: scaleX(1);
}
nav.main-nav > .nav-item:hover > a .sub,
nav.main-nav > .nav-item.active > a .sub {
opacity: 1;
}
/* Dropdown */
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: white;
min-width: 260px;
border-top: 3px solid var(--gold);
box-shadow: 0 20px 50px rgba(15,29,54,0.25);
opacity: 0;
visibility: hidden;
transition: all 0.22s ease;
padding: 12px 0;
z-index: 110;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.dropdown a {
display: block;
padding: 11px 22px;
text-decoration: none;
color: var(--text);
font-size: 14px;
transition: all 0.15s;
border-left: 3px solid transparent;
}
.dropdown a:hover {
background: var(--cream);
border-left-color: var(--gold);
color: var(--navy);
}
.dropdown a .ddsub {
display: block;
font-size: 16px;
color: var(--navy-deep);
margin-top: 1px;
font-style: italic;
font-weight: bold;
font-family: var(--serif);
}
/* Header CTAs */
.header-cta {
display: flex;
align-items: center;
gap: 8px;
margin-left: 12px;
}
.icon-btn {
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
border-radius: 50%;
transition: all 0.2s;
background: rgba(255,255,255,0.06);
}
.icon-btn:hover { background: var(--gold); color: var(--navy-deep); }
.donate-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gold);
color: var(--navy-deep);
padding: 11px 22px;
text-decoration: none;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.2s;
box-shadow: 0 2px 0 var(--gold-deep);
}
.donate-btn:hover {
background: var(--gold-warm);
transform: translateY(-1px);
box-shadow: 0 3px 0 var(--gold-deep);
}
/* Mobile toggle */
.mobile-toggle {
display: none;
background: transparent;
border: 1px solid rgba(255,255,255,0.2);
color: white;
padding: 10px;
border-radius: 2px;
cursor: pointer;
margin-left: auto;
}
.ft-logo-wrap {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
flex-shrink: 0;
}
.ft-logo-wrap img {
height: 76px;
width: 76px;
background: white;
border-radius: 50%;
padding: 3px;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
transition: transform 0.3s;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 32px;
}
.ft-logo-wrap:hover img { transform: scale(1.04); }
.ft-logo-text { color: white; line-height: 1.15; }
.ft-logo-text .org-name {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
letter-spacing: 0.5px;
}
.ft-logo-text .org-sub {
font-size: 10px;
letter-spacing: 2.8px;
text-transform: uppercase;
color: var(--gold);
margin-top: 5px;
font-weight: 600;
}
/* ============================================
PRIMARY NAVIGATION
============================================ */
.ft-main-nav {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
}
.ft-main-nav .menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 4px;
align-items: center;
}
.ft-main-nav .menu-item {
position: relative;
}
.ft-main-nav .menu-item > a {
display: block;
color: white;
text-decoration: none;
padding: 12px 16px;
text-align: center;
transition: all 0.2s;
position: relative;
border-radius: 2px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
}
.ft-main-nav .menu-item > a::after {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: 6px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.25s ease;
transform-origin: center;
}
.ft-main-nav .menu-item:hover > a::after,
.ft-main-nav .menu-item.current-menu-item > a::after { transform: scaleX(1); }
/* Dropdown submenu */
.ft-main-nav .sub-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: white;
min-width: 260px;
border-top: 3px solid var(--gold);
box-shadow: 0 20px 50px rgba(15,29,54,0.25);
opacity: 0;
visibility: hidden;
transition: all 0.22s ease;
padding: 12px 0;
z-index: 110;
list-style: none;
margin: 0;
}
.ft-main-nav .menu-item:hover > .sub-menu,
.ft-main-nav .menu-item:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.ft-main-nav .sub-menu .menu-item { display: block; }
.ft-main-nav .sub-menu a {
display: block;
padding: 11px 22px;
text-decoration: none;
color: var(--text);
font-size: 14px;
transition: all 0.15s;
border-left: 3px solid transparent;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.ft-main-nav .sub-menu a::after { display: none; }
.ft-main-nav .sub-menu a:hover {
background: var(--cream);
border-left-color: var(--gold);
color: var(--navy);
}
/* Header CTA cluster */
.ft-header-cta {
display: flex;
align-items: center;
gap: 8px;
margin-left: 12px;
}
.ft-icon-btn {
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
border-radius: 50%;
transition: all 0.2s;
background: rgba(255,255,255,0.06);
}
.ft-icon-btn:hover { background: var(--gold); color: var(--navy-deep); }
.ft-donate-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gold);
color: var(--navy-deep);
padding: 11px 22px;
text-decoration: none;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.2s;
box-shadow: 0 2px 0 var(--gold-deep);
}
.ft-donate-btn:hover {
background: var(--gold-warm);
transform: translateY(-1px);
box-shadow: 0 3px 0 var(--gold-deep);
color: var(--navy-deep);
}
/* Mobile toggle */
.ft-mobile-toggle {
display: none;
background: transparent;
border: 1px solid rgba(255,255,255,0.2);
color: white;
padding: 10px;
border-radius: 2px;
cursor: pointer;
margin-left: auto;
}
/* Mobile menu drawer */
.ft-mobile-drawer {
position: fixed;
top: 0;
right: -100%;
width: min(360px, 100vw);
height: 100vh;
background: var(--navy);
z-index: 200;
transition: right 0.3s ease;
overflow-y: auto;
padding: 80px 32px 40px;
}
.ft-mobile-drawer.is-open { right: 0; }
.ft-mobile-drawer .close-drawer {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: 0;
color: white;
padding: 10px;
cursor: pointer;
}
.ft-mobile-drawer .menu {
list-style: none;
margin: 0;
padding: 0;
}
.ft-mobile-drawer .menu > .menu-item > a {
display: block;
color: white;
text-decoration: none;
padding: 16px 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ft-mobile-drawer .sub-menu {
list-style: none;
padding: 8px 0 12px 16px;
margin: 0;
background: rgba(0,0,0,0.2);
}
.ft-mobile-drawer .sub-menu a {
display: block;
color: rgba(255,255,255,0.8);
text-decoration: none;
padding: 8px 0;
font-size: 14px;
}
.ft-mobile-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 150;
}
.ft-mobile-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
/* ============================================
HERO
============================================ */
.ft-hero {
position: relative;
min-height: 680px;
display: flex;
align-items: center;
overflow: hidden;
background:
linear-gradient(180deg, rgba(15,29,54,0.55) 0%, rgba(15,29,54,0.35) 40%, rgba(15,29,54,0.65) 100%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
.ft-hero.has-custom-image {
background-image: linear-gradient(180deg, rgba(15,29,54,0.55) 0%, rgba(15,29,54,0.35) 40%, rgba(15,29,54,0.65) 100%), var(--hero-image);
}
.ft-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 100px;
background: linear-gradient(to bottom, transparent, var(--paper));
z-index: 1;
}
.ft-hero-content {
position: relative;
z-index: 2;
max-width: var(--max-width);
margin: 0 auto;
padding: 100px 32px;
width: 100%;
}
.ft-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 28px;
}
.ft-hero-eyebrow::before, .ft-hero-eyebrow::after {
content: '';
display: inline-block;
width: 40px;
height: 1px;
background: var(--gold);
}
.ft-hero h1 {
font-family: var(--serif);
font-size: clamp(48px, 7vw, 96px);
font-weight: 500;
line-height: 1.02;
color: white;
max-width: 1000px;
margin-bottom: 28px;
letter-spacing: -1px;
}
.ft-hero h1 em {
font-style: italic;
color: var(--gold);
font-weight: 400;
}
.ft-hero .ft-tagline {
font-family: var(--serif);
font-style: italic;
font-size: clamp(20px, 2.4vw, 28px);
color: rgba(255,255,255,0.95);
max-width: 720px;
margin-bottom: 44px;
line-height: 1.4;
font-weight: 400;
}
.ft-hero-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* ============================================
BUTTONS
============================================ */
.ft-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 30px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.25s;
cursor: pointer;
border: 2px solid transparent;
line-height: 1;
}
.ft-btn-primary {
background: var(--gold);
color: var(--navy-deep);
border-color: var(--gold);
box-shadow: 0 3px 0 var(--gold-deep);
}
.ft-btn-primary:hover {
background: var(--gold-warm);
border-color: var(--gold-warm);
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--gold-deep);
color: var(--navy-deep);
}
.ft-btn-outline {
background: transparent;
color: white;
border-color: rgba(255,255,255,0.6);
}
.ft-btn-outline:hover {
background: white;
color: var(--navy-deep);
border-color: white;
}
.ft-btn-dark {
background: var(--navy);
color: white;
border-color: var(--navy);
}
.ft-btn-dark:hover { background: var(--navy-deep); border-color: var(--navy-deep); transform: translateY(-2px); color: white; }
.ft-btn-light-outline {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.ft-btn-light-outline:hover { background: var(--navy); color: white; }
.ft-btn .arrow { transition: transform 0.2s; }
.ft-btn:hover .arrow { transform: translateX(4px); }
/* ============================================
FACT STRIP
============================================ */
.ft-fact-strip {
background: var(--cream);
border-bottom: 1px solid var(--border);
position: relative;
z-index: 3;
}
.ft-fact-strip .ft-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.ft-fact-item {
padding: 28px 24px;
text-align: center;
position: relative;
}
.ft-fact-item:not(:last-child)::after {
content: '';
position: absolute;
top: 20%;
right: 0;
height: 60%;
width: 1px;
background: var(--border);
}
.ft-fact-item .num {
font-family: var(--serif);
font-size: 38px;
color: var(--navy);
line-height: 1;
font-weight: 600;
}
.ft-fact-item .num .gold-mark { color: var(--gold-warm); }
.ft-fact-item .lbl {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 8px;
font-weight: 600;
}
/* ============================================
SECTION SHARED
============================================ */
.ft-section { padding: 110px 0; }
.ft-section-tight { padding: 90px 0; }
.ft-eyebrow {
display: inline-block;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
margin-bottom: 18px;
}
.ft-eyebrow::before {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--gold-warm);
vertical-align: middle;
margin-right: 12px;
}
.ft-section-title {
font-family: var(--serif);
font-size: clamp(38px, 5vw, 60px);
color: var(--navy);
line-height: 1.05;
margin-bottom: 28px;
letter-spacing: -1px;
font-weight: 500;
}
.ft-section-title em { font-style: italic; color: var(--gold-warm); font-weight: 400; }
.ft-section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 70px;
}
.ft-section-header .description {
color: var(--text-muted);
font-size: 18px;
line-height: 1.6;
margin-top: 12px;
}
.ft-section-row-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 60px;
}
.ft-section-row-head h2 {
font-family: var(--serif);
font-size: clamp(34px, 4.5vw, 52px);
color: var(--navy);
line-height: 1.05;
font-weight: 500;
letter-spacing: -0.5px;
margin-bottom: 0;
}
.ft-section-row-head h2 em { font-style: italic; color: var(--gold-warm); font-weight: 400; }
.ft-view-all {
color: var(--navy);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--gold);
transition: all 0.2s;
}
.ft-view-all:hover { color: var(--gold-warm); }
.ft-view-all::after { content: '→'; transition: transform 0.2s; }
.ft-view-all:hover::after { transform: translateX(4px); }
/* ============================================
MISSION / ABOUT
============================================ */
.ft-mission { background: var(--paper); }
.ft-mission-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 80px;
align-items: center;
}
.ft-mission-image-wrap {
position: relative;
aspect-ratio: 4/5;
}
.ft-mission-image-wrap::before {
content: '';
position: absolute;
top: 24px; left: 24px;
width: 100%; height: 100%;
border: 2px solid var(--gold);
z-index: 0;
}
.ft-mission-image {
position: relative;
z-index: 1;
width: 100%; height: 100%;
background: linear-gradient(135deg, #4a6b6e 0%, #2a4068 50%, #1a2d4f 100%);
overflow: hidden;
box-shadow: 0 20px 50px rgba(15,29,54,0.2);
}
.ft-mission-image.has-image {
background-image: var(--mission-image);
background-size: cover;
background-position: center;
}
.ft-mission-image::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(245,228,176,0.35) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(212,167,58,0.15) 0%, transparent 50%);
}
.ft-mission-image .caption {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
color: white;
font-family: var(--serif);
font-style: italic;
font-size: 15px;
padding: 14px 18px;
background: rgba(15,29,54,0.55);
backdrop-filter: blur(6px);
border-left: 3px solid var(--gold);
z-index: 2;
}
.ft-badge-floating {
position: absolute;
top: -30px;
right: -30px;
background: var(--gold);
color: var(--navy-deep);
padding: 22px 28px;
z-index: 2;
box-shadow: 0 12px 30px rgba(212,167,58,0.35);
text-align: center;
}
.ft-badge-floating .num {
font-family: var(--serif);
font-size: 38px;
font-weight: 600;
line-height: 1;
}
.ft-badge-floating .lbl {
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
margin-top: 6px;
font-weight: 700;
}
.ft-mission-text p {
font-size: 17px;
line-height: 1.8;
color: var(--text);
margin-bottom: 18px;
}
.ft-mission-text .lead {
font-family: var(--serif);
font-size: 22px;
font-style: italic;
color: var(--navy);
line-height: 1.5;
margin-bottom: 24px;
padding-left: 20px;
border-left: 2px solid var(--gold);
}
.ft-mission-text .signature-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 32px;
}
/* ============================================
QUOTE BAND
============================================ */
.ft-quote-band {
background: var(--navy);
color: white;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.ft-quote-band::before, .ft-quote-band::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: var(--gold);
}
.ft-quote-band::before { top: 50px; }
.ft-quote-band::after { bottom: 50px; }
.ft-quote-mark {
font-family: var(--serif);
font-size: 120px;
color: var(--gold);
line-height: 0.5;
opacity: 0.3;
text-align: center;
margin-bottom: 20px;
height: 50px;
}
.ft-quote-band blockquote {
font-family: var(--serif);
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.3;
text-align: center;
max-width: 1000px;
margin: 0 auto;
font-weight: 400;
color: rgba(255,255,255,0.95);
font-style: italic;
}
.ft-quote-band cite {
display: block;
text-align: center;
margin-top: 32px;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
font-style: normal;
font-weight: 700;
}
/* ============================================
EXPLORE GRID
============================================ */
.ft-explore {
background: var(--paper-warm);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.ft-explore-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.ft-explore-card {
background: white;
padding: 36px 30px;
border: 1px solid var(--border);
text-decoration: none;
color: inherit;
transition: all 0.3s;
position: relative;
display: flex;
flex-direction: column;
}
.ft-explore-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 3px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.ft-explore-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(15,29,54,0.12);
border-color: var(--gold);
}
.ft-explore-card:hover::before { transform: scaleX(1); }
.ft-explore-card .icon {
width: 56px; height: 56px;
border: 1.5px solid var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
color: var(--navy);
background: var(--cream);
transition: all 0.3s;
}
.ft-explore-card:hover .icon { background: var(--gold); color: var(--navy-deep); }
.ft-explore-card h3 {
font-family: var(--serif);
font-size: 26px;
color: var(--navy);
margin-bottom: 6px;
font-weight: 600;
}
.ft-explore-card .sub {
font-family: var(--serif);
font-style: italic;
color: var(--gold-warm);
font-size: 14px;
margin-bottom: 16px;
}
.ft-explore-card p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
flex-grow: 1;
margin-bottom: 22px;
}
.ft-explore-card .card-link {
color: var(--navy);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
}
.ft-explore-card .card-link::after { content: '→'; transition: transform 0.2s; }
.ft-explore-card:hover .card-link::after { transform: translateX(4px); }
/* ============================================
FEATURED EVENT
============================================ */
.ft-event-section { padding: 110px 0; background: var(--paper); }
.ft-event-card {
background: var(--cream);
border: 1px solid var(--border);
padding: 56px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 50px;
align-items: center;
position: relative;
}
.ft-event-card::before {
content: 'Featured Event';
position: absolute;
top: 0; left: 56px;
background: var(--navy);
color: var(--gold);
padding: 6px 18px;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
transform: translateY(-50%);
}
.ft-event-date-block {
text-align: center;
padding-right: 40px;
border-right: 1px solid var(--border);
}
.ft-event-date-block .month {
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
}
.ft-event-date-block .day {
font-family: var(--serif);
font-size: 110px;
line-height: 0.9;
color: var(--navy);
margin: 8px 0;
font-weight: 500;
}
.ft-event-date-block .year {
font-size: 11px;
letter-spacing: 3px;
color: var(--text-muted);
}
.ft-event-info h3 {
font-family: var(--serif);
font-size: 36px;
color: var(--navy);
margin-bottom: 8px;
font-weight: 500;
}
.ft-event-info .event-meta {
display: flex;
gap: 18px;
flex-wrap: wrap;
color: var(--text-muted);
font-size: 13px;
margin-bottom: 16px;
}
.ft-event-info .event-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ft-event-info p { color: var(--text); line-height: 1.7; }
/* ============================================
PROGRAMS PREVIEW
============================================ */
.ft-programs-preview {
background: var(--paper-warm);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.ft-programs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.ft-program-card {
background: white;
border: 1px solid var(--border);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.ft-program-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(15,29,54,0.1);
}
.ft-program-card .program-img {
aspect-ratio: 5/3;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #4a6b6e, #1a2d4f);
}
.ft-program-card.tone-green .program-img { background: linear-gradient(135deg, #6b8e6b 0%, #3d5b3d 100%); }
.ft-program-card.tone-gold .program-img { background: linear-gradient(135deg, #c79428 0%, #a87a1d 100%); }
.ft-program-card.tone-navy .program-img { background: linear-gradient(135deg, #4a6b6e 0%, #1a2d4f 100%); }
.ft-program-card .program-img.has-image {
background-image: var(--program-image);
background-size: cover;
background-position: center;
}
.ft-program-card .program-img::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.25) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.2) 0%, transparent 50%);
}
.ft-program-card .program-date-tag {
position: absolute;
top: 16px;
left: 16px;
background: white;
color: var(--navy);
padding: 8px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 2;
}
.ft-program-card .program-body {
padding: 28px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ft-program-card .program-body .meta {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
margin-bottom: 10px;
}
.ft-program-card .program-body h3 {
font-family: var(--serif);
font-size: 24px;
color: var(--navy);
line-height: 1.2;
margin-bottom: 12px;
font-weight: 600;
}
.ft-program-card .program-body p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 18px;
flex-grow: 1;
}
.ft-program-card .program-body .read {
color: var(--navy);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ft-program-card .program-body .read::after { content: '→'; transition: transform 0.2s; }
.ft-program-card:hover .program-body .read::after { transform: translateX(4px); }
/* ============================================
SUPPORT BLOCK
============================================ */
.ft-support-block { background: var(--paper); padding: 110px 0; }
.ft-support-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.ft-support-tile {
padding: 50px;
border: 1px solid var(--border);
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.ft-support-tile.member { background: var(--cream); }
.ft-support-tile.donate { background: var(--navy); color: white; }
.ft-support-tile h3 {
font-family: var(--serif);
font-size: 36px;
margin-bottom: 16px;
line-height: 1.1;
font-weight: 500;
}
.ft-support-tile.member h3 { color: var(--navy); }
.ft-support-tile.member h3 em { font-style: italic; color: var(--gold-warm); }
.ft-support-tile.donate h3 { color: white; }
.ft-support-tile.donate h3 em { font-style: italic; color: var(--gold); }
.ft-support-tile p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 24px;
}
.ft-support-tile.member p { color: var(--text); }
.ft-support-tile.donate p { color: rgba(255,255,255,0.85); }
.ft-support-tile ul {
list-style: none;
margin: 0 0 32px;
padding: 0;
}
.ft-support-tile ul li {
padding: 10px 0;
border-bottom: 1px solid;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}
.ft-support-tile.member ul li { border-bottom-color: var(--border); color: var(--text); }
.ft-support-tile.donate ul li { border-bottom-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.ft-support-tile ul li::before {
content: '✓';
color: var(--gold-warm);
font-weight: 700;
flex-shrink: 0;
}
.ft-support-tile.donate ul li::before { color: var(--gold); }
/* ============================================
NEWS PREVIEW
============================================ */
.ft-news-section {
background: var(--paper-warm);
border-top: 1px solid var(--border);
padding: 110px 0;
}
.ft-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.ft-news-item {
text-decoration: none;
color: inherit;
display: block;
transition: all 0.2s;
}
.ft-news-item .date {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: var(--gold-warm);
margin-bottom: 8px;
}
.ft-news-item h3 {
font-family: var(--serif);
font-size: 22px;
color: var(--navy);
line-height: 1.3;
margin-bottom: 12px;
font-weight: 600;
transition: color 0.2s;
}
.ft-news-item:hover h3 { color: var(--gold-warm); }
.ft-news-item p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 14px;
}
.ft-news-item .read-more {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--navy);
font-weight: 700;
}
/* ============================================
NEWSLETTER
============================================ */
.ft-newsletter {
padding: 90px 0;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
color: white;
position: relative;
overflow: hidden;
}
.ft-newsletter::before, .ft-newsletter::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,167,58,0.15) 0%, transparent 70%);
}
.ft-newsletter::before { top: -150px; left: -100px; }
.ft-newsletter::after { bottom: -150px; right: -100px; }
.ft-newsletter-content {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.ft-newsletter h2 {
font-family: var(--serif);
font-size: clamp(34px, 4.5vw, 48px);
margin-bottom: 16px;
line-height: 1.1;
font-weight: 500;
color: white;
}
.ft-newsletter h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
.ft-newsletter p {
color: rgba(255,255,255,0.85);
font-size: 17px;
margin-bottom: 32px;
line-height: 1.6;
}
.ft-newsletter-form {
display: flex;
gap: 12px;
max-width: 480px;
margin: 0 auto;
justify-content: center;
}
.ft-newsletter-form .ft-btn.ft-btn-gold {
background: var(--gold-warm);
transform: translateY(-1px);
box-shadow: 0 3px 0 var(--gold-deep);
color: var(--navy-deep);
}
.ft-newsletter-form input {
flex: 1;
padding: 16px 20px;
background: rgba(255,255,255,0.1);
border: 1.5px solid rgba(255,255,255,0.2);
color: white;
font-family: var(--sans);
font-size: 14px;
border-radius: 2px;
transition: all 0.2s;
}
.ft-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.ft-newsletter-form input:focus {
outline: none;
background: rgba(255,255,255,0.15);
border-color: var(--gold);
}
.ft-newsletter-form button {
background: var(--gold);
color: var(--navy-deep);
border: 0;
padding: 16px 28px;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
transition: all 0.2s;
}
.ft-newsletter-form button:hover { background: var(--gold-warm); }
/* ============================================
FOOTER
============================================ */
.ft-footer {
background: var(--navy-deep);
color: rgba(255,255,255,0.75);
padding-top: 80px;
}
.ft-footer-top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ft-footer-brand img {
height: 70px;
width: 70px;
background: white;
border-radius: 50%;
padding: 3px;
margin-bottom: 20px;
}
.ft-footer-brand h3 {
font-family: var(--serif);
font-size: 22px;
color: white;
margin-bottom: 12px;
font-weight: 600;
letter-spacing: 0.5px;
}
.ft-footer-brand p {
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,0.6);
margin-bottom: 22px;
}
.ft-footer-brand .legal-badge {
display: inline-block;
padding: 4px 10px;
background: rgba(212,167,58,0.15);
color: var(--gold);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
border-radius: 2px;
}
.ft-footer h4 {
color: var(--gold);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 22px;
}
.ft-footer ul { list-style: none; margin: 0; padding: 0; }
.ft-footer ul li { margin-bottom: 11px; font-size: 14px; }
.ft-footer ul li a {
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: color 0.2s;
}
.ft-footer ul li a:hover { color: var(--gold); }
.ft-footer-contact-block {
color: rgba(255,255,255,0.75);
font-size: 14px;
line-height: 1.7;
}
.ft-footer-contact-block .line {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 12px;
}
.ft-footer-contact-block .line svg {
flex-shrink: 0;
margin-top: 3px;
color: var(--gold);
}
.ft-footer-contact-block a { color: rgba(255,255,255,0.75); text-decoration: none; }
.ft-footer-contact-block a:hover { color: var(--gold); }
.ft-social {
display: flex;
gap: 10px;
margin-top: 20px;
}
.ft-social a {
width: 38px; height: 38px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
text-decoration: none;
transition: all 0.2s;
}
.ft-social a:hover { background: var(--gold); color: var(--navy-deep); }
.ft-footer-bottom {
padding: 24px 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
font-size: 12px;
color: rgba(255,255,255,0.55);
}
.ft-footer-bottom a {
color: rgba(255,255,255,0.65);
text-decoration: none;
margin-left: 18px;
}
.ft-footer-bottom a:hover { color: var(--gold); }
/* ============================================
About Us css
============================================ */
/*
.ft-hero {
position: relative;
min-height: 680px;
display: flex;
align-items: center;
overflow: hidden;
background:
linear-gradient(180deg, rgba(15,29,54,0.55) 0%, rgba(15,29,54,0.35) 40%, rgba(15,29,54,0.65) 100%),
url("data:image/svg+xml;utf8,");
background-size: cover;
background-position: center;
}
.ft-hero.has-custom-image {
background-image: linear-gradient(180deg, rgba(15,29,54,0.55) 0%, rgba(15,29,54,0.35) 40%, rgba(15,29,54,0.65) 100%), var(--hero-image);
}
.ft-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 100px;
background: linear-gradient(to bottom, transparent, var(--paper));
z-index: 1;
}
.ft-hero-content {
position: relative;
z-index: 2;
max-width: var(--max-width);
margin: 0 auto;
padding: 100px 32px;
width: 100%;
}
.ft-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 28px;
}
.ft-hero-eyebrow::before, .ft-hero-eyebrow::after {
content: '';
display: inline-block;
width: 40px;
height: 1px;
background: var(--gold);
}
.ft-hero h1 {
font-family: var(--serif);
font-size: clamp(48px, 7vw, 96px);
font-weight: 500;
line-height: 1.02;
color: white;
max-width: 1000px;
margin-bottom: 28px;
letter-spacing: -1px;
}
.ft-hero h1 em {
font-style: italic;
color: var(--gold);
font-weight: 400;
}
.ft-hero .ft-tagline {
font-family: var(--serif);
font-style: italic;
font-size: clamp(20px, 2.4vw, 28px);
color: rgba(255,255,255,0.95);
max-width: 720px;
margin-bottom: 44px;
line-height: 1.4;
font-weight: 400;
}
.ft-hero-buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
} */
/* ============================================
BUTTONS
============================================ */
/* .ft-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 30px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 2px;
transition: all 0.25s;
cursor: pointer;
border: 2px solid transparent;
line-height: 1;
}
.ft-btn-primary {
background: var(--gold);
color: var(--navy-deep);
border-color: var(--gold);
box-shadow: 0 3px 0 var(--gold-deep);
}
.ft-btn-primary:hover {
background: var(--gold-warm);
border-color: var(--gold-warm);
transform: translateY(-2px);
box-shadow: 0 5px 0 var(--gold-deep);
color: var(--navy-deep);
}
.ft-btn-outline {
background: transparent;
color: white;
border-color: rgba(255,255,255,0.6);
}
.ft-btn-outline:hover {
background: white;
color: var(--navy-deep);
border-color: white;
}
.ft-btn-dark {
background: var(--navy);
color: white;
border-color: var(--navy);
}
.ft-btn-dark:hover { background: var(--navy-deep); border-color: var(--navy-deep); transform: translateY(-2px); color: white; }
.ft-btn-light-outline {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.ft-btn-light-outline:hover { background: var(--navy); color: white; }
.ft-btn .arrow { transition: transform 0.2s; }
.ft-btn:hover .arrow { transform: translateX(4px); } */
/* ============================================
FACT STRIP
============================================ */
/* .ft-fact-strip {
background: var(--cream);
border-bottom: 1px solid var(--border);
position: relative;
z-index: 3;
}
.ft-fact-item {
padding: 28px 24px;
text-align: center;
position: relative;
}
.ft-fact-item:not(:last-child)::after {
content: '';
position: absolute;
top: 20%;
right: 0;
height: 60%;
width: 1px;
background: var(--border);
}
.ft-fact-item .num {
font-family: var(--serif);
font-size: 38px;
color: var(--navy);
line-height: 1;
font-weight: 600;
}
.ft-fact-item .num .gold-mark { color: var(--gold-warm); }
.ft-fact-item .lbl {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 8px;
font-weight: 600;
} */
/* ============================================
SECTION SHARED
============================================ */
/* .ft-section { padding: 110px 0; }
.ft-section-tight { padding: 90px 0; }
.ft-eyebrow {
display: inline-block;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
margin-bottom: 18px;
}
.ft-eyebrow::before {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--gold-warm);
vertical-align: middle;
margin-right: 12px;
}
.ft-section-title {
font-family: var(--serif);
font-size: clamp(38px, 5vw, 60px);
color: var(--navy);
line-height: 1.05;
margin-bottom: 28px;
letter-spacing: -1px;
font-weight: 500;
}
.ft-section-title em { font-style: italic; color: var(--gold-warm); font-weight: 400; }
.ft-section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 70px;
}
.ft-section-header .description {
color: var(--text-muted);
font-size: 18px;
line-height: 1.6;
margin-top: 12px;
}
.ft-section-row-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 60px;
}
.ft-section-row-head h2 {
font-family: var(--serif);
font-size: clamp(34px, 4.5vw, 52px);
color: var(--navy);
line-height: 1.05;
font-weight: 500;
letter-spacing: -0.5px;
margin-bottom: 0;
}
.ft-section-row-head h2 em { font-style: italic; color: var(--gold-warm); font-weight: 400; }
.ft-view-all {
color: var(--navy);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--gold);
transition: all 0.2s;
}
.ft-view-all:hover { color: var(--gold-warm); }
.ft-view-all::after { content: '→'; transition: transform 0.2s; }
.ft-view-all:hover::after { transform: translateX(4px); } */
/* ============================================
MISSION / ABOUT
============================================ */
/* .ft-mission { background: var(--paper); }
.ft-mission-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 80px;
align-items: center;
}
.ft-mission-image-wrap {
position: relative;
aspect-ratio: 4/5;
}
.ft-mission-image-wrap::before {
content: '';
position: absolute;
top: 24px; left: 24px;
width: 100%; height: 100%;
border: 2px solid var(--gold);
z-index: 0;
}
.ft-mission-image {
position: relative;
z-index: 1;
width: 100%; height: 100%;
background: linear-gradient(135deg, #4a6b6e 0%, #2a4068 50%, #1a2d4f 100%);
overflow: hidden;
box-shadow: 0 20px 50px rgba(15,29,54,0.2);
}
.ft-mission-image.has-image {
background-image: var(--mission-image);
background-size: cover;
background-position: center;
}
.ft-mission-image::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(245,228,176,0.35) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(212,167,58,0.15) 0%, transparent 50%);
}
.ft-mission-image .caption {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
color: white;
font-family: var(--serif);
font-style: italic;
font-size: 15px;
padding: 14px 18px;
background: rgba(15,29,54,0.55);
backdrop-filter: blur(6px);
border-left: 3px solid var(--gold);
z-index: 2;
}
.ft-badge-floating {
position: absolute;
top: -30px;
right: -30px;
background: var(--gold);
color: var(--navy-deep);
padding: 22px 28px;
z-index: 2;
box-shadow: 0 12px 30px rgba(212,167,58,0.35);
text-align: center;
}
.ft-badge-floating .num {
font-family: var(--serif);
font-size: 38px;
font-weight: 600;
line-height: 1;
}
.ft-badge-floating .lbl {
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
margin-top: 6px;
font-weight: 700;
}
.ft-mission-text p {
font-size: 17px;
line-height: 1.8;
color: var(--text);
margin-bottom: 18px;
}
.ft-mission-text .lead {
font-family: var(--serif);
font-size: 22px;
font-style: italic;
color: var(--navy);
line-height: 1.5;
margin-bottom: 24px;
padding-left: 20px;
border-left: 2px solid var(--gold);
}
.ft-mission-text .signature-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 32px;
} */
/* ============================================
QUOTE BAND
============================================ */
/* .ft-quote-band {
background: var(--navy);
color: white;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.ft-quote-band::before, .ft-quote-band::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: var(--gold);
}
.ft-quote-band::before { top: 50px; }
.ft-quote-band::after { bottom: 50px; }
.ft-quote-mark {
font-family: var(--serif);
font-size: 120px;
color: var(--gold);
line-height: 0.5;
opacity: 0.3;
text-align: center;
margin-bottom: 20px;
height: 50px;
}
.ft-quote-band blockquote {
font-family: var(--serif);
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.3;
text-align: center;
max-width: 1000px;
margin: 0 auto;
font-weight: 400;
color: rgba(255,255,255,0.95);
font-style: italic;
}
.ft-quote-band cite {
display: block;
text-align: center;
margin-top: 32px;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
font-style: normal;
font-weight: 700;
} */
/* ============================================
FEATURED EVENT
============================================ */
/* .ft-event-section { padding: 110px 0; background: var(--paper); }
.ft-event-card {
background: var(--cream);
border: 1px solid var(--border);
padding: 56px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 50px;
align-items: center;
position: relative;
}
.ft-event-card::before {
content: 'Featured Event';
position: absolute;
top: 0; left: 56px;
background: var(--navy);
color: var(--gold);
padding: 6px 18px;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
transform: translateY(-50%);
}
.ft-event-date-block {
text-align: center;
padding-right: 40px;
border-right: 1px solid var(--border);
}
.ft-event-date-block .month {
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
}
.ft-event-date-block .day {
font-family: var(--serif);
font-size: 110px;
line-height: 0.9;
color: var(--navy);
margin: 8px 0;
font-weight: 500;
}
.ft-event-date-block .year {
font-size: 11px;
letter-spacing: 3px;
color: var(--text-muted);
}
.ft-event-info h3 {
font-family: var(--serif);
font-size: 36px;
color: var(--navy);
margin-bottom: 8px;
font-weight: 500;
}
.ft-event-info .event-meta {
display: flex;
gap: 18px;
flex-wrap: wrap;
color: var(--text-muted);
font-size: 13px;
margin-bottom: 16px;
}
.ft-event-info .event-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ft-event-info p { color: var(--text); line-height: 1.7; } */
/* ============================================
PROGRAMS PREVIEW
============================================ */
/* .ft-programs-preview {
background: var(--paper-warm);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.ft-programs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.ft-program-card {
background: white;
border: 1px solid var(--border);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.ft-program-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(15,29,54,0.1);
}
.ft-program-card .program-img {
aspect-ratio: 5/3;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #4a6b6e, #1a2d4f);
}
.ft-program-card.tone-green .program-img { background: linear-gradient(135deg, #6b8e6b 0%, #3d5b3d 100%); }
.ft-program-card.tone-gold .program-img { background: linear-gradient(135deg, #c79428 0%, #a87a1d 100%); }
.ft-program-card.tone-navy .program-img { background: linear-gradient(135deg, #4a6b6e 0%, #1a2d4f 100%); }
.ft-program-card .program-img.has-image {
background-image: var(--program-image);
background-size: cover;
background-position: center;
}
.ft-program-card .program-img::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.25) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.2) 0%, transparent 50%);
}
.ft-program-card .program-date-tag {
position: absolute;
top: 16px;
left: 16px;
background: white;
color: var(--navy);
padding: 8px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 2;
}
.ft-program-card .program-body {
padding: 28px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ft-program-card .program-body .meta {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
margin-bottom: 10px;
}
.ft-program-card .program-body h3 {
font-family: var(--serif);
font-size: 24px;
color: var(--navy);
line-height: 1.2;
margin-bottom: 12px;
font-weight: 600;
}
.ft-program-card .program-body p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 18px;
flex-grow: 1;
}
.ft-program-card .program-body .read {
color: var(--navy);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ft-program-card .program-body .read::after { content: '→'; transition: transform 0.2s; }
.ft-program-card:hover .program-body .read::after { transform: translateX(4px); } */
/* ============================================
SUPPORT BLOCK
============================================ */
/* .ft-support-block { background: var(--paper); padding: 110px 0; }
.ft-support-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.ft-support-tile {
padding: 50px;
border: 1px solid var(--border);
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.ft-support-tile.member { background: var(--cream); }
.ft-support-tile.donate { background: var(--navy); color: white; }
.ft-support-tile h3 {
font-family: var(--serif);
font-size: 36px;
margin-bottom: 16px;
line-height: 1.1;
font-weight: 500;
}
.ft-support-tile.member h3 { color: var(--navy); }
.ft-support-tile.member h3 em { font-style: italic; color: var(--gold-warm); }
.ft-support-tile.donate h3 em { font-style: italic; color: var(--gold); }
.ft-support-tile p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 24px;
}
.ft-support-tile.member p { color: var(--text); }
.ft-support-tile.donate p { color: rgba(255,255,255,0.85); }
.ft-support-tile ul {
list-style: none;
margin: 0 0 32px;
padding: 0;
}
.ft-support-tile ul li {
padding: 10px 0;
border-bottom: 1px solid;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}
.ft-support-tile.member ul li { border-bottom-color: var(--border); color: var(--text); }
.ft-support-tile.donate ul li { border-bottom-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.ft-support-tile ul li::before {
content: '✓';
color: var(--gold-warm);
font-weight: 700;
flex-shrink: 0;
}
.ft-support-tile.donate ul li::before { color: var(--gold); } */
/* ============================================
NEWS PREVIEW
============================================ */
/* .ft-news-section {
background: var(--paper-warm);
border-top: 1px solid var(--border);
padding: 110px 0;
}
.ft-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.ft-news-item {
text-decoration: none;
color: inherit;
display: block;
transition: all 0.2s;
}
.ft-news-item .date {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: var(--gold-warm);
margin-bottom: 8px;
}
.ft-news-item h3 {
font-family: var(--serif);
font-size: 22px;
color: var(--navy);
line-height: 1.3;
margin-bottom: 12px;
font-weight: 600;
transition: color 0.2s;
}
.ft-news-item:hover h3 { color: var(--gold-warm); }
.ft-news-item p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 14px;
}
.ft-news-item .read-more {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--navy);
font-weight: 700;
} */
/* ============================================
NEWSLETTER
============================================ */
/* .ft-newsletter {
padding: 90px 0;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
color: white;
position: relative;
overflow: hidden;
}
.ft-newsletter::before, .ft-newsletter::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,167,58,0.15) 0%, transparent 70%);
}
.ft-newsletter::before { top: -150px; left: -100px; }
.ft-newsletter::after { bottom: -150px; right: -100px; }
.ft-newsletter-content {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.ft-newsletter h2 {
font-family: var(--serif);
font-size: clamp(34px, 4.5vw, 48px);
margin-bottom: 16px;
line-height: 1.1;
font-weight: 500;
color: white;
}
.ft-newsletter h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
.ft-newsletter p {
color: rgba(255,255,255,0.85);
font-size: 17px;
margin-bottom: 32px;
line-height: 1.6;
}
.ft-newsletter-form {
display: flex;
gap: 12px;
max-width: 480px;
margin: 0 auto;
}
.ft-newsletter-form input {
flex: 1;
padding: 16px 20px;
background: rgba(255,255,255,0.1);
border: 1.5px solid rgba(255,255,255,0.2);
color: white;
font-family: var(--sans);
font-size: 14px;
border-radius: 2px;
transition: all 0.2s;
}
.ft-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.ft-newsletter-form input:focus {
outline: none;
background: rgba(255,255,255,0.15);
border-color: var(--gold);
}
.ft-newsletter-form button {
background: var(--gold);
color: var(--navy-deep);
border: 0;
padding: 16px 28px;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
transition: all 0.2s;
}
.ft-newsletter-form button:hover { background: var(--gold-warm); } */
/* ============================================
FOOTER
============================================ */
/* .ft-footer {
background: var(--navy-deep);
color: rgba(255,255,255,0.75);
padding-top: 80px;
}
.ft-footer-top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 60px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ft-footer-brand img {
height: 70px;
width: 70px;
background: white;
border-radius: 50%;
padding: 3px;
margin-bottom: 20px;
}
.ft-footer-brand h3 {
font-family: var(--serif);
font-size: 22px;
color: white;
margin-bottom: 12px;
font-weight: 600;
letter-spacing: 0.5px;
}
.ft-footer-brand p {
font-size: 14px;
line-height: 1.65;
color: rgba(255,255,255,0.6);
margin-bottom: 22px;
}
.ft-footer-brand .legal-badge {
display: inline-block;
padding: 4px 10px;
background: rgba(212,167,58,0.15);
color: var(--gold);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
border-radius: 2px;
}
.ft-footer h4 {
color: var(--gold);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 22px;
}
.ft-footer ul { list-style: none; margin: 0; padding: 0; }
.ft-footer ul li { margin-bottom: 11px; font-size: 14px; }
.ft-footer ul li a {
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: color 0.2s;
}
.ft-footer ul li a:hover { color: var(--gold); }
.ft-footer-contact-block {
color: rgba(255,255,255,0.75);
font-size: 14px;
line-height: 1.7;
}
.ft-footer-contact-block .line {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 12px;
}
.ft-footer-contact-block .line svg {
flex-shrink: 0;
margin-top: 3px;
color: var(--gold);
}
.ft-footer-contact-block a { color: rgba(255,255,255,0.75); text-decoration: none; }
.ft-footer-contact-block a:hover { color: var(--gold); }
.ft-social {
display: flex;
gap: 10px;
margin-top: 20px;
}
.ft-social a {
width: 38px; height: 38px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
text-decoration: none;
transition: all 0.2s;
}
.ft-social a:hover { background: var(--gold); color: var(--navy-deep); }
.ft-footer-bottom {
padding: 24px 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
font-size: 12px;
color: rgba(255,255,255,0.55);
}
.ft-footer-bottom a {
color: rgba(255,255,255,0.65);
text-decoration: none;
margin-left: 18px;
}
.ft-footer-bottom a:hover { color: var(--gold); } */
/* ============================================
PAGE HERO (subpage banner)
============================================ */
.ft-page-hero {
position: relative;
min-height: 420px;
display: flex;
align-items: center;
color: white;
overflow: hidden;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.ft-page-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(212,167,58,0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(212,167,58,0.08) 0%, transparent 50%);
}
.ft-page-hero.has-image::before {
background:
linear-gradient(135deg, rgba(15,29,54,0.65) 0%, rgba(15,29,54,0.4) 100%),
var(--page-hero-image) center/cover;
}
.ft-page-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: var(--gold);
}
.ft-page-hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 80px 32px 70px;
}
.ft-breadcrumb {
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
font-weight: 700;
}
.ft-breadcrumb a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.2s;
}
.ft-breadcrumb a:hover { color: var(--gold); }
.ft-breadcrumb .separator {
margin: 0 10px;
color: rgba(255,255,255,0.4);
}
.ft-page-hero h1 {
font-family: var(--serif);
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.05;
font-weight: 500;
margin-bottom: 16px;
letter-spacing: -1px;
color: #fff;
}
.ft-page-hero h1 em { font-style: italic; color: var(--gold); font-weight: 400; }
.ft-page-hero .ft-page-subtitle {
font-family: var(--serif);
font-style: italic;
font-size: clamp(18px, 2vw, 24px);
color: rgba(255,255,255,0.9);
max-width: 720px;
line-height: 1.4;
}
/* ============================================
IMAGE PLACEHOLDERS (for nature photography)
============================================ */
.ft-img-placeholder {
position: relative;
background:
repeating-linear-gradient(45deg,
rgba(31,74,82,0.06),
rgba(31,74,82,0.06) 12px,
rgba(31,74,82,0.10) 12px,
rgba(31,74,82,0.10) 24px),
linear-gradient(135deg, #c8d2c8 0%, #a8b8a8 50%, #88a098 100%);
border: 2px dashed rgba(15,29,54,0.25);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 24px;
color: var(--navy-deep);
overflow: hidden;
}
.ft-img-placeholder::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(15,29,54,0.15) 0%, transparent 50%);
pointer-events: none;
}
.ft-img-placeholder .icon {
width: 56px; height: 56px;
border: 2px solid rgba(15,29,54,0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
background: rgba(255,255,255,0.4);
position: relative;
z-index: 1;
}
.ft-img-placeholder .label {
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
color: var(--navy-deep);
background: rgba(255,255,255,0.7);
padding: 6px 12px;
border-radius: 2px;
margin-bottom: 6px;
position: relative;
z-index: 1;
}
.ft-img-placeholder .desc {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: rgba(15,29,54,0.75);
max-width: 360px;
line-height: 1.4;
position: relative;
z-index: 1;
}
/* Variants with different aspect ratios */
.ft-img-16-9 { aspect-ratio: 16/9; }
.ft-img-4-3 { aspect-ratio: 4/3; }
.ft-img-1-1 { aspect-ratio: 1/1; }
.ft-img-3-4 { aspect-ratio: 3/4; }
.ft-img-4-5 { aspect-ratio: 4/5; }
.ft-img-21-9 { aspect-ratio: 21/9; }
/* ============================================
PAGE BODY — 2-column layout (content + sidebar)
============================================ */
.ft-page-body {
background: var(--paper);
padding: 90px 0;
}
.ft-page-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 80px;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 32px;
}
.ft-page-grid.no-sidebar {
grid-template-columns: 1fr;
max-width: var(--content-width);
}
.ft-page-content {
min-width: 0; /* prevent grid blowout */
}
.ft-page-content h2 {
font-family: var(--serif);
font-size: clamp(30px, 3.8vw, 44px);
color: var(--navy);
line-height: 1.1;
font-weight: 500;
margin: 56px 0 20px;
letter-spacing: -0.5px;
}
.ft-page-content h2:first-child { margin-top: 0; }
.ft-page-content h2 em { font-style: italic; color: var(--gold-warm); font-weight: 400; }
.ft-page-content h3 {
font-family: var(--serif);
font-size: 26px;
color: var(--navy);
font-weight: 600;
margin: 36px 0 14px;
line-height: 1.2;
}
.ft-page-content h3:first-child { margin-top: 0; }
.ft-page-content p {
font-size: 17px;
line-height: 1.8;
color: var(--text);
margin-bottom: 18px;
}
.ft-page-content p.lead {
font-family: var(--serif);
font-style: italic;
font-size: 22px;
color: var(--navy);
line-height: 1.5;
margin-bottom: 32px;
padding-left: 24px;
border-left: 3px solid var(--gold);
}
.ft-page-content ul {
margin: 0 0 24px;
padding-left: 0;
list-style: none;
}
.ft-page-content ul li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 17px;
line-height: 1.7;
color: var(--text);
}
.ft-page-content ul li::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 14px;
height: 1px;
background: var(--gold-warm);
}
.ft-page-content a:not(.ft-btn) {
color: var(--navy);
text-decoration: underline;
text-decoration-color: var(--gold);
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
transition: all 0.2s;
}
.ft-page-content a:not(.ft-btn):hover {
color: var(--gold-warm);
text-decoration-color: var(--gold-warm);
}
.ft-page-content .section-image {
margin: 40px 0;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(15,29,54,0.12);
}
.ft-page-content .image-caption {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: var(--text-muted);
margin-top: 12px;
text-align: center;
}
/* Inline info card (highlighted box) */
.ft-info-card {
background: var(--cream);
border-left: 4px solid var(--gold);
padding: 28px 32px;
margin: 32px 0;
border-radius: 2px;
}
.ft-info-card h4 {
font-family: var(--serif);
font-size: 22px;
color: var(--navy);
margin-bottom: 10px;
font-weight: 600;
}
.ft-info-card p { margin-bottom: 10px; }
.ft-info-card p:last-child { margin-bottom: 0; }
/* Detail rows (for address blocks, hours, etc.) */
.ft-detail-row {
display: flex;
gap: 14px;
margin-bottom: 12px;
align-items: flex-start;
}
.ft-detail-row .lbl {
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
flex-shrink: 0;
min-width: 90px;
padding-top: 4px;
}
.ft-detail-row .val {
flex: 1;
font-size: 16px;
color: var(--text);
line-height: 1.6;
}
/* ============================================
SIDEBAR
============================================ */
.ft-sidebar {
position: sticky;
top: 120px;
align-self: start;
}
.ft-sidebar-quote {
background: var(--navy);
color: white;
padding: 36px 32px;
border-radius: 2px;
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
.ft-sidebar-quote::before {
content: '"';
font-family: var(--serif);
position: absolute;
top: -10px;
left: 16px;
font-size: 100px;
color: var(--gold);
opacity: 0.4;
line-height: 1;
}
.ft-sidebar-quote blockquote {
font-family: var(--serif);
font-style: italic;
font-size: 22px;
line-height: 1.4;
color: rgba(255,255,255,0.95);
position: relative;
margin-bottom: 16px;
}
.ft-sidebar-quote cite {
display: block;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
font-style: normal;
font-weight: 700;
}
.ft-sidebar-card {
background: var(--cream);
border: 1px solid var(--border);
padding: 28px 24px;
border-radius: 2px;
margin-bottom: 24px;
}
.ft-sidebar-card h4 {
font-family: var(--serif);
font-size: 22px;
color: var(--navy);
margin-bottom: 16px;
font-weight: 600;
}
.ft-sidebar-card p {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 16px;
line-height: 1.6;
}
.ft-sidebar-card .ft-btn {
width: 100%;
justify-content: center;
}
.ft-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
}
.ft-sidebar-list li {
border-bottom: 1px solid var(--border);
}
.ft-sidebar-list li:last-child { border-bottom: 0; }
.ft-sidebar-list li a {
display: block;
padding: 12px 0;
text-decoration: none;
color: var(--navy);
font-size: 14px;
font-weight: 600;
transition: color 0.2s;
}
.ft-sidebar-list li a:hover { color: var(--gold-warm); }
.ft-sidebar-list li a .arrow { float: right; transition: transform 0.2s; }
.ft-sidebar-list li a:hover .arrow { transform: translateX(3px); }
/* ============================================
EVENT LIST (programs page)
============================================ */
.ft-event-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 36px;
padding: 36px 0;
border-bottom: 1px solid var(--border);
}
.ft-event-row:last-child { border-bottom: 0; }
.ft-event-row .event-date {
text-align: center;
background: var(--cream);
padding: 24px;
border-radius: 2px;
border-top: 3px solid var(--gold);
}
.ft-event-row .event-date .month {
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
}
.ft-event-row .event-date .when {
font-family: var(--serif);
font-size: 32px;
color: var(--navy);
line-height: 1.1;
margin: 6px 0;
font-weight: 600;
}
.ft-event-row .event-date .annual {
font-size: 11px;
letter-spacing: 2px;
color: var(--text-muted);
text-transform: uppercase;
}
.ft-event-row .event-info h3 {
margin-top: 0;
margin-bottom: 10px;
}
.ft-event-row .event-info p { margin-bottom: 12px; }
/* ============================================
TRAIL / FEATURE CARDS (visit page)
============================================ */
.ft-feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 24px 0 32px;
}
.ft-feature-card {
background: white;
border: 1px solid var(--border);
border-top: 3px solid var(--gold);
padding: 28px;
border-radius: 2px;
}
.ft-feature-card h4 {
font-family: var(--serif);
font-size: 22px;
color: var(--navy);
margin-bottom: 6px;
font-weight: 600;
}
.ft-feature-card .meta {
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold-warm);
font-weight: 700;
margin-bottom: 12px;
}
.ft-feature-card p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.ft-feature-card .seasonal {
display: inline-block;
margin-top: 12px;
padding: 4px 10px;
background: rgba(212,167,58,0.15);
color: var(--gold-deep);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
border-radius: 2px;
}
/* ============================================
SUPPORT WAYS GRID (support page)
============================================ */
.ft-ways-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin: 32px 0;
}
.ft-way-card {
background: white;
border: 1px solid var(--border);
padding: 32px;
border-radius: 2px;
border-top: 3px solid var(--gold);
}
.ft-way-card .icon {
width: 48px; height: 48px;
background: var(--cream);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
color: var(--navy);
}
.ft-way-card h4 {
font-family: var(--serif);
font-size: 24px;
color: var(--navy);
margin-bottom: 10px;
font-weight: 600;
}
.ft-way-card p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 18px;
}
/* ============================================
PAGE-LEVEL CTA SECTION
============================================ */
.ft-page-cta {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
color: white;
padding: 90px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.ft-page-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(212,167,58,0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(212,167,58,0.08) 0%, transparent 50%);
}
.ft-page-cta .ft-container { position: relative; z-index: 1; }
.ft-page-cta .ft-eyebrow {
color: var(--gold);
}
.ft-page-cta .ft-eyebrow::before { background: var(--gold); }
.ft-page-cta h2 {
font-family: var(--serif);
font-size: clamp(34px, 4.5vw, 50px);
font-weight: 500;
line-height: 1.1;
margin-bottom: 20px;
color: white;
}
.ft-page-cta h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
.ft-page-cta p {
max-width: 640px;
margin: 0 auto 32px;
color: rgba(255,255,255,0.85);
font-size: 18px;
line-height: 1.6;
}
.ft-page-cta .buttons {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1100px) {
.ft-header-inner { gap: 20px; padding: 14px 24px; }
.ft-logo-text .org-name { font-size: 18px; }
.ft-logo-text .org-sub { font-size: 9px; letter-spacing: 2px; }
.ft-main-nav .menu-item > a { padding: 10px 10px; font-size: 11px; letter-spacing: 1.5px; }
.ft-donate-btn { padding: 10px 18px; font-size: 11px; }
.ft-mission-grid { grid-template-columns: 1fr; gap: 80px; }
.ft-badge-floating { top: -20px; right: 20px; padding: 18px 22px; }
.ft-badge-floating .num { font-size: 30px; }
.ft-explore-grid { grid-template-columns: repeat(2, 1fr); }
.ft-programs-grid { grid-template-columns: 1fr; }
.ft-news-grid { grid-template-columns: 1fr; }
.ft-support-grid { grid-template-columns: 1fr; }
.ft-footer-top { grid-template-columns: 1fr 1fr; }
.ft-event-card { grid-template-columns: 1fr; gap: 30px; padding: 40px; text-align: center; }
.ft-event-date-block { padding-right: 0; padding-bottom: 30px; border-right: 0; border-bottom: 1px solid var(--border); }
.ft-fact-strip .ft-container { grid-template-columns: repeat(2, 1fr); }
.ft-fact-item:nth-child(odd)::after { display: none; }
.ft-fact-item:nth-child(2)::after { display: none; }
.ft-section-row-head { grid-template-columns: 1fr; gap: 16px; }
/* Subpages */
body .ft-page-grid { grid-template-columns: 1fr; gap: 60px; }
body .ft-sidebar { position: static; }
body .ft-feature-grid, body .ft-ways-grid { grid-template-columns: 1fr; }
body .ft-event-row { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 768px) {
.fact-item:nth-child(2)::after { width: 0px; }
.fact-strip .container { grid-template-columns: repeat(2, 1fr); }
.ft-container, .ft-container-narrow { padding: 0 20px; }
.ft-utility-bar { font-size: 12px; }
.ft-utility-info { display: none; }
.ft-utility-links { gap: 14px; }
.ft-header-inner { padding: 12px 20px; gap: 12px; }
.ft-logo-wrap img { height: 56px; width: 56px; }
.ft-logo-text .org-name { font-size: 16px; }
.ft-logo-text .org-sub { display: none; }
.ft-main-nav { display: none; }
.ft-header-cta .ft-icon-btn { display: none; }
.ft-mobile-toggle { display: block; }
.ft-hero { min-height: 580px; }
.ft-hero-content { padding: 70px 20px; }
.ft-section, .ft-section-tight, .ft-event-section, .ft-support-block, .ft-newsletter, .ft-news-section { padding: 70px 0; }
.ft-explore-grid { grid-template-columns: 1fr; }
.ft-fact-strip .ft-container { grid-template-columns: 1fr; }
.ft-fact-item::after { display: none !important; }
.ft-fact-item { padding: 20px; border-bottom: 1px solid var(--border); }
.ft-fact-item:last-child { border-bottom: 0; }
.ft-footer-top { grid-template-columns: 1fr; }
.ft-newsletter-form { flex-direction: column; }
.ft-event-date-block .day { font-size: 80px; }
.ft-support-tile { padding: 36px 28px; }
.ft-quote-band { padding: 70px 0; }
/* Subpages mobile */
body .ft-page-hero-inner { padding: 60px 20px 50px; }
body .ft-page-body { padding: 60px 0; }
body .ft-page-grid { padding: 0 20px; gap: 50px; }
body .ft-event-row { padding: 28px 0; }
body .ft-page-cta { padding: 60px 0; }
}
/* ============================================
MOBILE DRAWER — ENHANCED RESPONSIVE
============================================ */
/* Fallback nav reset inside drawer */
.ft-mobile-drawer nav.main-nav {
display: block;
flex-direction: unset;
align-items: unset;
gap: 0;
}
/* Nav item row — flex so link + button sit side by side */
.ft-mobile-drawer nav.main-nav > .nav-item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Page link — fills available row space, no chevron via pseudo */
.ft-mobile-drawer nav.main-nav > .nav-item > a {
flex: 1;
display: block;
color: white;
text-decoration: none;
padding: 16px 0;
text-align: left;
}
.ft-mobile-drawer nav.main-nav > .nav-item > a::after {
display: none !important;
}
.ft-mobile-drawer nav.main-nav > .nav-item > a .label {
display: block;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.ft-mobile-drawer nav.main-nav > .nav-item > a .sub {
display: block;
font-size: 12px;
color: var(--gold);
font-family: var(--serif);
font-style: italic;
margin-top: 2px;
opacity: 0.85;
}
/* Chevron toggle button — dedicated, sits right of the link */
.ft-mobile-drawer .ft-drawer-toggle {
flex-shrink: 0;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: white;
width: 36px;
height: 36px;
padding: 0px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ft-mobile-drawer .ft-drawer-toggle:hover {
background: rgba(212,167,58,0.2);
border-color: var(--gold);
color: var(--gold);
}
.ft-mobile-drawer .ft-drawer-toggle svg {
display: block;
transition: transform 0.25s ease;
}
.ft-mobile-drawer nav.main-nav > .nav-item.is-open > .ft-drawer-toggle svg,
.ft-mobile-drawer .menu > .menu-item.is-open > .ft-drawer-toggle svg {
transform: rotate(180deg);
}
/* Dropdown panel — hidden until .is-open, spans full row width */
.ft-mobile-drawer nav.main-nav > .nav-item > .dropdown {
display: none;
width: 100%;
flex-basis: 100%;
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border-top: none;
background: rgba(0,0,0,0.2);
padding: 6px 0 14px 16px;
min-width: 0;
transition: none;
}
.ft-mobile-drawer nav.main-nav > .nav-item.is-open > .dropdown {
display: block;
}
/* Dropdown links */
.ft-mobile-drawer nav.main-nav .dropdown a {
display: block;
color: rgba(255,255,255,0.8);
font-size: 14px;
padding: 9px 0;
text-decoration: none;
border-left: none;
background: none;
text-transform: none;
letter-spacing: 0;
transition: color 0.15s;
}
.ft-mobile-drawer nav.main-nav .dropdown a:hover {
color: var(--gold);
background: none;
border-left: none;
}
.ft-mobile-drawer nav.main-nav .dropdown a .ddsub {
display: block;
font-size: 11px;
color: rgba(255,255,255,0.4);
font-style: italic;
font-family: var(--serif);
margin-top: 1px;
}
/* ============================================
MOBILE DRAWER — wp_nav_menu() items
============================================ */
.ft-mobile-drawer .menu > .menu-item {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ft-mobile-drawer .menu > .menu-item > a {
flex: 1;
display: block;
color: white;
text-decoration: none;
padding: 16px 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Kill old pseudo-element chevron on wp menu items */
.ft-mobile-drawer .menu-item-has-children > a::after {
display: none !important;
}
/* Sub-menu panel */
.ft-mobile-drawer .sub-menu {
display: none;
width: 100%;
flex-basis: 100%;
list-style: none;
padding: 6px 0 14px 16px;
margin: 0;
background: rgba(0,0,0,0.2);
}
.ft-mobile-drawer .menu-item.is-open > .sub-menu {
display: block;
}
.ft-mobile-drawer .sub-menu a {
display: block;
color: rgba(255,255,255,0.8);
font-size: 14px;
padding: 9px 0;
text-decoration: none;
transition: color 0.15s;
}
.ft-mobile-drawer .sub-menu a:hover {
color: var(--gold);
}
/* Hide toggle button on desktop nav — drawer only */
.ft-main-nav .ft-drawer-toggle { display: none; }
/* ============================================
DONATE BUTTON inside mobile drawer
============================================ */
.ft-mobile-drawer-donate {
display: block;
margin-top: 28px;
padding: 14px 22px;
background: var(--gold);
color: var(--navy-deep) !important;
text-decoration: none;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 2px;
text-align: center;
transition: background 0.2s;
box-shadow: 0 2px 0 var(--gold-deep);
}
.ft-mobile-drawer-donate:hover {
background: var(--gold-warm);
color: var(--navy-deep) !important;
}
.ft-mobile-drawer-donate svg {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
}
/* ============================================
TABLET (769px – 960px) — collapse nav into drawer
============================================ */
@media (max-width: 1260px) {
.ft-main-nav { display: none; }
body .ft-header-cta { display: none; }
.ft-mobile-toggle { display: flex !important; }
}
@media (max-width: 960px) {
.ft-utility-info {
display: none;
}
.ft-utility-links {
width: 100%;
justify-content: center;
}
}
/* ============================================
MOBILE (≤ 768px) — utility bar adjustments
============================================ */
@media (max-width: 768px) {
.ft-utility-bar .ft-utility-info { display: none; }
.ft-utility-links { justify-content: center; width: 100%; }
.ft-utility-bar .ft-container { justify-content: center; }
}
.home .ft-program-card .section-image img {
height: 250px;
object-fit: cover;
}
.ft-section.ft-hero::before {
content: "";
position: absolute;
display: block;
background-color: #00000050;
width: 100%;
height: 100%;
}
body.search .site-main,body.search .content-area,body.search .page-content{max-width:1180px;margin:0 auto;padding:70px 20px;}
body.search h1.page-title,body.search .page-title{font-size:42px;font-weight:700;color:var(--navy-deep);margin-bottom:35px;position:relative;}
body.search h1.page-title:after,body.search .page-title:after{content:"";width:80px;height:4px;background:var(--gold);display:block;margin-top:14px;border-radius:50px;}
body.search article,body.search .search-result,body.search .post,body.search .page{background:#fff;padding:26px 30px;margin-bottom:22px;border-radius:16px;border:1px solid rgba(26,45,79,.15);box-shadow:0 8px 24px rgba(15,29,54,.08);transition:all .3s ease;}
body.search article:hover,body.search .post:hover,body.search .page:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(15,29,54,.14);border-color:var(--gold);}
body.search article h2,body.search .entry-title{font-size:24px;line-height:1.35;margin-bottom:12px;}
body.search article h2 a,body.search .entry-title a{color:var(--navy);text-decoration:none;font-weight:700;}
body.search article h2 a:hover,body.search .entry-title a:hover{color:var(--gold-deep);}
body.search article p,body.search .entry-summary,body.search .entry-content{font-size:16px;line-height:1.7;color:var(--navy-light);margin-bottom:0;}
body.search .more-link,body.search article a.read-more{display:inline-block;margin-top:16px;padding:10px 20px;background:var(--navy);color:#fff!important;border-radius:50px;font-size:14px;font-weight:600;text-decoration:none;}
body.search .more-link:hover,body.search article a.read-more:hover{background:var(--gold-deep);color:#fff!important;}
body.search .search-form{display:flex;gap:10px;background:rgba(212,167,58,.1);padding:16px;border-radius:14px;margin-bottom:35px;border:1px solid rgba(212,167,58,.35);}
body.search .search-form input[type="search"]{flex:1;height:48px;border:1px solid rgba(26,45,79,.2);border-radius:50px;padding:0 18px;font-size:15px;outline:none;color:var(--navy-deep);}
body.search .search-form input[type="search"]:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,167,58,.18);}
body.search .search-form input[type="submit"],body.search .search-form button{height:48px;padding:0 26px;border:none;border-radius:50px;background:var(--gold);color:var(--navy-deep);font-weight:700;cursor:pointer;}
body.search .search-form input[type="submit"]:hover,body.search .search-form button:hover{background:var(--navy);color:#fff;}
body.search .widget-area,body.search aside{background:rgba(26,45,79,.04);padding:24px;border-radius:16px;border:1px solid rgba(26,45,79,.12);}
body.search .widget-title,body.search aside h2,body.search aside h3{font-size:20px;color:var(--navy-deep);font-weight:700;margin-bottom:16px;}
body.search .widget ul,body.search aside ul{padding-left:0;margin-left:0;list-style:none;}
body.search .widget li,body.search aside li{padding:9px 0;border-bottom:1px solid rgba(26,45,79,.12);}
body.search .widget li:last-child,body.search aside li:last-child{border-bottom:none;}
body.search .widget a,body.search aside a{color:var(--navy-light);text-decoration:none;}
body.search .widget a:hover,body.search aside a:hover{color:var(--gold-deep);}
@media(max-width:768px){body.search .site-main,body.search .content-area,body.search .page-content{padding:45px 16px;}body.search h1.page-title,body.search .page-title{font-size:30px;}body.search article,body.search .post,body.search .page{padding:22px;}body.search article h2,body.search .entry-title{font-size:21px;}body.search .search-form{flex-direction:column;}body.search .search-form input[type="submit"],body.search .search-form button{width:100%;}}
body.search .more-link,body.search article a.read-more{display:block;width:max-content;align-items:center;gap:12px;padding:16px 30px;margin-top:18px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s;cursor:pointer;border:2px solid var(--navy);line-height:1;background:var(--navy);color:#fff!important;}
body.search .entry-summary .more-link,body.search .entry-content .more-link{display:flex;width:max-content;}
body.search .more-link:hover,body.search article a.read-more:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)!important;}
.ft-icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(26,45,79,.16);background:#fff;color:var(--navy);border-radius:50%;cursor:pointer;transition:all .25s ease;}
.ft-icon-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.ft-search-svg{display:block;width:18px;height:18px;stroke:currentColor;}
.ft-full-search-bar{width:100%;background:#fff;border-top:1px solid rgba(26,45,79,.12);border-bottom:1px solid rgba(26,45,79,.12);box-shadow:0 12px 30px rgba(15,29,54,.08);padding:0;max-height:0;opacity:0;visibility:hidden;overflow:hidden;transform:translateY(-10px);transition:max-height .35s ease,opacity .25s ease,visibility .25s ease,transform .35s ease,padding .35s ease;position:relative;z-index:99;pointer-events:none;}
.ft-full-search-bar.active{padding:18px 0;max-height:120px;opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.ft-full-search-form{display:flex;align-items:center;gap:12px;width:100%;}
.ft-full-search-field{width:100%;height:54px;border:1px solid rgba(26,45,79,.18);border-radius:2px;padding:0 18px;font-size:15px;color:var(--navy-deep);outline:none;background:#fff;}
.ft-full-search-field:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,167,58,.16);}
.ft-full-search-submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:16px 30px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s;cursor:pointer;border:2px solid var(--navy);line-height:1;background:var(--navy);color:#fff;}
.ft-full-search-submit:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
@media(max-width:768px){.ft-full-search-bar.active{padding:14px 0;max-height:180px;}.ft-full-search-form{flex-direction:column;align-items:stretch;}.ft-full-search-field{height:50px;}.ft-full-search-submit{width:100%;height:50px;}}
.ft-search-results-page{padding:70px 0;background:#f8f9fb;}
.ft-search-header{margin-bottom:35px;}
.ft-search-title{font-size:42px;font-weight:800;color:var(--navy-deep);margin:0 0 24px;}
.ft-search-title span{color:var(--gold-deep);}
.ft-search-page-form{display:flex;gap:12px;background:#fff;padding:14px;border:1px solid rgba(26,45,79,.12);box-shadow:0 12px 30px rgba(15,29,54,.08);}
.ft-search-page-form input{width:100%;height:54px;border:1px solid rgba(26,45,79,.18);border-radius:2px;padding:0 18px;font-size:15px;color:var(--navy-deep);outline:none;}
.ft-search-page-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,167,58,.16);}
.ft-search-page-form button{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:16px 30px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s;cursor:pointer;border:2px solid var(--navy);background:var(--navy);color:#fff;}
.ft-search-page-form button:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.ft-search-results-list{display:grid;gap:22px;}
.ft-search-card{background:#fff;padding:30px;border:1px solid rgba(26,45,79,.12);box-shadow:0 12px 30px rgba(15,29,54,.08);transition:all .25s;}
.ft-search-card:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(15,29,54,.14);border-color:var(--gold);}
.ft-search-card-title{font-size:26px;line-height:1.3;margin:0 0 12px;}
.ft-search-card-title a{color:var(--navy-deep);text-decoration:none;}
.ft-search-card-title a:hover{color:var(--gold-deep);}
.ft-search-card-content{font-size:16px;line-height:1.7;color:var(--navy-light);margin-bottom:20px;}
.ft-search-read-more{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s;cursor:pointer;border:2px solid var(--navy);line-height:1;background:var(--navy);color:#fff!important;}
.ft-search-read-more:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)!important;}
.ft-search-read-more:after{content:"→";font-size:16px;line-height:1;}
.ft-search-pagination{margin-top:35px;}
.ft-no-search-results{background:#fff;padding:35px;border:1px solid rgba(26,45,79,.12);box-shadow:0 12px 30px rgba(15,29,54,.08);}
@media(max-width:768px){.ft-search-results-page{padding:45px 0;}.ft-search-title{font-size:30px;}.ft-search-page-form{flex-direction:column;}.ft-search-page-form button{width:100%;}.ft-search-card{padding:24px;}.ft-search-card-title{font-size:22px;}}
.ft-404-page{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:90px 20px;background:linear-gradient(135deg,rgba(26,45,79,.06),rgba(212,167,58,.12));position:relative;overflow:hidden;}
/* .ft-404-page:before{content:"";position:absolute;top:-120px;right:-120px;width:320px;height:320px;background:rgba(212,167,58,.18);border-radius:50%;}
.ft-404-page:after{content:"";position:absolute;bottom:-140px;left:-140px;width:360px;height:360px;background:rgba(26,45,79,.12);border-radius:50%;}
*/
.ft-404-wrap{max-width:820px;width:100%;background:#fff;text-align:center;padding:55px 45px;border:1px solid rgba(26,45,79,.12);box-shadow:0 20px 60px rgba(15,29,54,.14);position:relative;z-index:2;}
.ft-404-badge{width:110px;height:110px;margin:0 auto 25px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--gold);font-size:34px;font-weight:900;letter-spacing:2px;border-radius:50%;border:6px solid rgba(212,167,58,.35);}
.ft-404-wrap h1{font-size:46px;line-height:1.15;margin:0 0 18px;color:var(--navy-deep);font-weight:800;}
.ft-404-wrap p{max-width:650px;margin:0 auto 30px;color:var(--navy-light);font-size:17px;line-height:1.7;}
.ft-404-search-form{display:flex;gap:12px;background:#f7f8fa;padding:14px;border:1px solid rgba(26,45,79,.12);margin:0 auto 28px;max-width:650px;}
.ft-404-search-form input{width:100%;height:54px;border:1px solid rgba(26,45,79,.18);border-radius:2px;padding:0 18px;font-size:15px;color:var(--navy-deep);outline:none;background:#fff;}
.ft-404-search-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,167,58,.18);}
.ft-404-search-form button{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:16px 30px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s;cursor:pointer;border:2px solid var(--navy);line-height:1;background:var(--navy);color:#fff;}
.ft-404-search-form button:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.ft-404-buttons{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.ft-404-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 30px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s;cursor:pointer;border:2px solid var(--navy);line-height:1;color:var(--navy)!important;background:#fff;}
.ft-404-btn:hover{background:var(--navy);color:#fff!important;border-color:var(--navy);}
.ft-404-btn.primary{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)!important;}
.ft-404-btn.primary:hover{background:var(--navy);border-color:var(--navy);color:#fff!important;}
@media(max-width:768px){.ft-404-page{padding:60px 16px;}.ft-404-wrap{padding:38px 22px;}.ft-404-badge{width:90px;height:90px;font-size:28px;}.ft-404-wrap h1{font-size:32px;}.ft-404-wrap p{font-size:15px;}.ft-404-search-form{flex-direction:column;}.ft-404-search-form button{width:100%;}.ft-404-buttons{flex-direction:column;align-items:stretch;}.ft-404-btn{width:100%;}}
.error404 #main , .single-post #main, .page-template-template-event-single #main , .page-template-template-blog-listing #main {
margin: 0px;
}
.ft-single-post-page{background:#f8f9fb;}
.ft-single-container{max-width:1080px;margin:0 auto;padding:0 20px;}
.ft-single-hero{padding:80px 0 70px;background:linear-gradient(135deg,var(--navy-deep),var(--navy));position:relative;overflow:hidden;}
/* .ft-single-hero:before{content:"";position:absolute;top:-120px;right:-120px;width:320px;height:320px;background:rgba(212,167,58,.16);border-radius:50%;}
.ft-single-hero:after{content:"";position:absolute;bottom:-150px;left:-150px;width:380px;height:380px;background:rgba(255,255,255,.06);border-radius:50%;}
*/
.ft-single-hero .ft-single-container{position:relative;z-index:2;}
.ft-single-breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.72);}
.ft-single-breadcrumb a{color:var(--gold);text-decoration:none;}
.ft-single-breadcrumb a:hover{color:#fff;}
.ft-single-category{display:inline-flex;align-items:center;padding:9px 16px;margin-bottom:22px;background:var(--gold);color:var(--navy-deep);font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;border-radius:2px;}
.ft-single-title{max-width:900px;margin:0;color:#fff;font-size:56px;line-height:1.08;font-weight:500;letter-spacing:-1.5px;}
.ft-single-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;color:rgba(255,255,255,.78);font-size:15px;font-weight:600;}
.ft-single-content-section{padding:70px 0;}
.ft-single-featured-image{margin:-120px 0 35px;position:relative;z-index:3;border:10px solid #fff;box-shadow:0 22px 60px rgba(15,29,54,.18);background:#fff;}
.ft-single-featured-image img{width:100%;height:520px;object-fit:cover;display:block;}
.ft-single-content-card{background:#fff;padding:55px;border:1px solid rgba(26,45,79,.12);box-shadow:0 16px 45px rgba(15,29,54,.08);}
.ft-single-content{font-size:18px;line-height:1.85;color:var(--navy-light);}
.ft-single-content h2{font-size:36px;line-height:1.25;color:var(--navy-deep);margin:42px 0 18px;font-weight:850;}
.ft-single-content h3{font-size:28px;line-height:1.3;color:var(--navy);margin:34px 0 16px;font-weight:800;}
.ft-single-content h4{font-size:22px;line-height:1.35;color:var(--navy);margin:28px 0 14px;font-weight:800;}
.ft-single-content p{margin:0 0 22px;}
.ft-single-content a{color:var(--gold-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.ft-single-content a:hover{color:var(--navy);}
.ft-single-content ul,.ft-single-content ol{margin:0 0 24px 24px;padding:0;}
.ft-single-content li{margin-bottom:10px;}
.ft-single-content blockquote{margin:35px 0;padding:28px 32px;border-left:5px solid var(--gold);background:rgba(212,167,58,.09);color:var(--navy-deep);font-size:21px;line-height:1.6;font-weight:700;}
.ft-single-content img{max-width:100%;height:auto;border-radius:2px;}
.ft-single-content table{width:100%;border-collapse:collapse;margin:30px 0;background:#fff;}
.ft-single-content th,.ft-single-content td{padding:14px 16px;border:1px solid rgba(26,45,79,.14);text-align:left;}
.ft-single-content th{background:var(--navy);color:#fff;}
.ft-single-page-links{margin-top:30px;}
.ft-single-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
.ft-single-nav-item a{display:block;background:#fff;border:1px solid rgba(26,45,79,.12);padding:24px;text-decoration:none;box-shadow:0 12px 30px rgba(15,29,54,.06);transition:all .25s;}
.ft-single-nav-item a:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 40px rgba(15,29,54,.12);}
.ft-single-nav-item span{display:block;margin-bottom:8px;color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;}
.ft-single-nav-item strong{display:block;color:var(--navy-deep);font-size:18px;line-height:1.4;font-weight:800;}
.ft-single-next{text-align:right;}
.ft-single-bottom-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:35px;}
.ft-single-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 30px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s;cursor:pointer;border:2px solid var(--navy);line-height:1;background:var(--navy);color:#fff!important;}
.ft-single-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)!important;}
.ft-single-btn.secondary{background:#fff;color:var(--navy)!important;}
.ft-single-btn.secondary:hover{background:var(--navy);color:#fff!important;}
@media(max-width:900px){.ft-single-title{font-size:44px;}.ft-single-featured-image img{height:420px;}.ft-single-content-card{padding:40px;}}
@media(max-width:768px){.ft-single-container{padding:0 16px;}.ft-single-hero{padding:60px 0 55px;}.ft-single-title{font-size:34px;letter-spacing:-.5px;}.ft-single-meta{font-size:14px;}.ft-single-content-section{padding:45px 0;}.ft-single-featured-image{margin:-85px 0 26px;border-width:6px;}.ft-single-featured-image img{height:280px;}.ft-single-content-card{padding:28px 22px;}.ft-single-content{font-size:16px;line-height:1.75;}.ft-single-content h2{font-size:28px;}.ft-single-content h3{font-size:23px;}.ft-single-post-nav{grid-template-columns:1fr;}.ft-single-next{text-align:left;}.ft-single-bottom-actions{align-items:stretch;flex-direction:column;}.ft-single-btn{width:100%;}}
This will create a clean modern single post page with hero title, category, date, author, featured image,
.ft-single-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;}
.ft-single-nav-card{position:relative;display:flex;align-items:center;gap:18px;background:#fff;border:1px solid rgba(26,45,79,.12);padding:22px;text-decoration:none;box-shadow:0 14px 35px rgba(15,29,54,.08);overflow:hidden;transition:all .25s ease;}
.ft-single-nav-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,167,58,.12),rgba(26,45,79,.04));opacity:0;transition:all .25s ease;}
.ft-single-nav-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 20px 48px rgba(15,29,54,.14);}
.ft-single-nav-card:hover:before{opacity:1;}
.ft-single-nav-icon{width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-size:20px;font-weight:800;border-radius:50%;position:relative;z-index:2;transition:all .25s ease;}
.ft-single-nav-card:hover .ft-single-nav-icon{background:var(--gold);color:var(--navy-deep);}
.ft-single-nav-thumb{width:78px;height:78px;min-width:78px;border-radius:4px;overflow:hidden;position:relative;z-index:2;background:rgba(26,45,79,.08);}
.ft-single-nav-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:all .35s ease;}
.ft-single-nav-card:hover .ft-single-nav-thumb img{transform:scale(1.08);}
.ft-single-nav-content{position:relative;z-index:2;min-width:0;}
.ft-single-nav-content span{display:block;margin-bottom:8px;color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;}
.ft-single-nav-content strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--navy-deep);font-size:18px;line-height:1.4;font-weight:850;transition:all .25s ease;}
.ft-single-nav-card:hover .ft-single-nav-content strong{color:var(--navy);}
.ft-single-next{text-align:right;justify-content:flex-end;}
@media(max-width:600px){
.ft-newsletter-form-inner p {
flex-wrap: wrap;
justify-content: center;
gap: 10px 0px;
}
.ft-newsletter-form-inner p * {
width: 100%;
}
}
@media(max-width:768px){.ft-single-post-nav{grid-template-columns:1fr;gap:16px;}.ft-single-nav-card{padding:18px;}.ft-single-next{text-align:left;justify-content:flex-start;}.ft-single-next .ft-single-nav-content{order:3;text-align:left;}.ft-single-next .ft-single-nav-thumb{order:2;}.ft-single-next .ft-single-nav-icon{order:1;}.ft-single-nav-thumb{width:66px;height:66px;min-width:66px;}.ft-single-nav-content strong{font-size:16px;}}
.wpcf7-form-control.wpcf7-submit.has-spinner {
background: var(--gold);
color: var(--navy-deep);
border: 0;
padding: 16px 28px;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
transition: all 0.2s;
}
.ft-newsletter-form-inner p {
width: 100%;
display: flex;
gap: 5px;
margin-bottom: 0px;
}
.ft-newsletter-form-inner input.wpcf7-text {
color: #fff !important;
}
.our-mission img{
height: 100%;
object-fit: cover;
object-position: right;
}
.page-template-template-event-single .ft-single-hero {
padding-bottom: 100px;
}
.ft-blog-template-container {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}
.ft-blog-template-hero {
padding: 80px 0 70px;
background:
radial-gradient(circle at top right, rgba(212, 167, 58, 0.35), transparent 35%),
linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
color: #fff;
}
.ft-blog-template-label {
display: inline-flex;
margin-bottom: 15px;
padding: 8px 15px;
border-radius: 50px;
background: rgba(212, 167, 58, 0.18);
color: var(--gold);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ft-blog-template-hero h1 {
margin: 0;
color: #fff;
font-size: clamp(42px, 6vw, 72px);
line-height: 1.05;
font-weight: 900;
letter-spacing: -1.5px;
}
.ft-blog-template-hero p {
max-width: 720px;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: 18px;
line-height: 1.7;
}
.ft-blog-template-section {
padding: 80px 0;
background: #f7f5ef;
}
.ft-blog-template-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}
.ft-blog-template-card {
background: #fff;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(26, 45, 79, 0.1);
box-shadow: 0 18px 45px rgba(15, 29, 54, 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.ft-blog-template-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(15, 29, 54, 0.18);
}
.ft-blog-template-image {
display: block;
aspect-ratio: 16 / 10;
background: #dfe5ef;
overflow: hidden;
text-decoration: none;
}
.ft-blog-template-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.ft-blog-template-card:hover .ft-blog-template-image img {
transform: scale(1.06);
}
.ft-blog-template-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: linear-gradient(135deg, var(--navy), var(--gold));
color: #fff;
text-align: center;
font-size: 18px;
font-weight: 800;
}
.ft-blog-template-content {
padding: 26px;
display: flex;
flex-direction: column;
flex: 1;
}
.ft-blog-template-category {
display: inline-flex;
width: fit-content;
margin-bottom: 14px;
padding: 8px 13px;
border-radius: 50px;
background: rgba(212, 167, 58, 0.16);
color: var(--gold-deep);
text-decoration: none;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ft-blog-template-category:hover {
background: var(--gold);
color: var(--navy-deep);
}
.ft-blog-template-content h2 {
margin: 0 0 12px;
font-size: 24px;
line-height: 1.25;
font-weight: 850;
color: var(--navy-deep);
}
.ft-blog-template-content h2 a {
color: inherit;
text-decoration: none;
}
.ft-blog-template-content h2 a:hover {
color: var(--navy-light);
}
.ft-blog-template-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
color: #667085;
font-size: 14px;
}
.ft-blog-template-content p {
margin: 0 0 24px;
color: #4b5563;
font-size: 16px;
line-height: 1.7;
}
.ft-blog-template-readmore {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
color: var(--navy);
text-decoration: none;
font-size: 15px;
font-weight: 850;
}
.ft-blog-template-readmore span {
transition: transform 0.2s ease;
}
.ft-blog-template-readmore:hover {
color: var(--gold-deep);
}
.ft-blog-template-readmore:hover span {
transform: translateX(5px);
}
.ft-blog-template-pagination {
margin-top: 55px;
display: flex;
justify-content: center;
gap: 9px;
flex-wrap: wrap;
}
.ft-blog-template-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 15px;
border-radius: 999px;
background: #fff;
color: var(--navy);
text-decoration: none;
font-weight: 850;
box-shadow: 0 8px 22px rgba(15, 29, 54, 0.1);
}
.ft-blog-template-pagination .page-numbers.current,
.ft-blog-template-pagination .page-numbers:hover {
background: var(--navy);
color: #fff;
}
.ft-blog-template-empty {
padding: 55px 35px;
border-radius: 24px;
background: #fff;
text-align: center;
box-shadow: 0 18px 45px rgba(15, 29, 54, 0.12);
}
.ft-blog-template-empty h2 {
margin: 0 0 10px;
color: var(--navy-deep);
font-size: 34px;
font-weight: 850;
}
.ft-blog-template-empty p {
margin: 0;
color: #4b5563;
font-size: 17px;
}
@media (max-width: 1024px) {
.ft-blog-template-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.ft-blog-template-container {
width: min(100% - 28px, 1180px);
}
.ft-blog-template-hero {
padding: 60px 0 52px;
}
.ft-blog-template-hero h1 {
font-size: 40px;
}
.ft-blog-template-hero p {
font-size: 16px;
}
.ft-blog-template-section {
padding: 50px 0;
}
.ft-blog-template-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.ft-blog-template-content {
padding: 22px;
}
.ft-blog-template-content h2 {
font-size: 22px;
}
}
.ft-footer-bottom-copyright a {
margin-left:0px;
}