/* ========================================================== FitChoiceHub — Design System & Custom Styles ========================================================== */ /* ── Google Fonts are loaded in HTML Display: Fraunces (editorial serif) Body/UI: DM Sans (clean, modern) ── */ /* ── Design Tokens ──────────────────────────────────────── */ :root { /* Brand Greens */ --green-950: #0d2b1a; --green-900: #1a4731; --green-800: #1e5631; --green-700: #2d6a4f; --green-600: #40916c; --green-400: #74c69d; --green-200: #b7e4c7; --green-100: #d8f3dc; --green-50: #f0faf3; /* Amber (ratings / accents) */ --amber-600: #d97706; --amber-400: #fbbf24; --amber-100: #fef3c7; /* Neutrals */ --cream: #fafaf7; --warm-50: #f5f3ef; --warm-100: #ede9e1; --warm-200: #d9d4c9; /* Text */ --text-950: #1c1c1e; --text-700: #3a3a3c; --text-500: #6b6b6b; --text-300: #aeaeb2; /* Teal accent */ --teal-700: #00695c; --teal-500: #009688; --teal-100: #e0f2f1; /* Spacing & Shape */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06); --shadow-green: 0 8px 32px rgba(46, 106, 79, 0.25); --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Base ────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text-950); background-color: var(--cream); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, .fch-display { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 72; line-height: 1.15; letter-spacing: -0.02em; } /* ── Disclaimer Bar ──────────────────────────────────────── */ .fch-disclaimer-bar { background-color: var(--amber-100); border-bottom: 1px solid #fde68a; font-size: 0.8rem; color: #78350f; letter-spacing: 0.01em; } .fch-disclaimer-bar a { color: var(--green-800); text-decoration: underline; text-underline-offset: 2px; } /* ── Navbar ──────────────────────────────────────────────── */ .fch-navbar { background: rgba(250, 250, 247, 0.97) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--warm-100); padding: 0.85rem 0; } .fch-brand { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 72; font-size: 1.45rem; font-weight: 700; color: var(--text-950) !important; letter-spacing: -0.04em; text-decoration: none; } .fch-brand .brand-dot { color: var(--green-600); } .fch-navbar .nav-link { font-weight: 500; font-size: 0.9rem; color: var(--text-700) !important; padding: 0.4rem 0.75rem !important; border-radius: var(--radius-sm); transition: var(--transition); letter-spacing: 0.01em; } .fch-navbar .nav-link:hover { color: var(--green-800) !important; background: var(--green-50); } .fch-navbar .nav-link.active { color: var(--green-800) !important; font-weight: 600; } .btn-nav-cta { background: var(--green-800); color: white !important; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-sm); padding: 0.45rem 1.1rem !important; border: none; transition: var(--transition); letter-spacing: 0.01em; } .btn-nav-cta:hover { background: var(--green-700) !important; color: white !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 86, 49, 0.3); } /* ── Buttons ─────────────────────────────────────────────── */ .btn-fch-primary { background: var(--green-800); border: 2px solid var(--green-800); color: white; font-family: 'DM Sans', sans-serif; font-weight: 600; border-radius: var(--radius-sm); padding: 0.65rem 1.6rem; font-size: 0.95rem; transition: var(--transition); letter-spacing: 0.01em; cursor: pointer; } .btn-fch-primary:hover { background: var(--green-700); border-color: var(--green-700); color: white; transform: translateY(-2px); box-shadow: var(--shadow-green); } .btn-fch-outline { background: transparent; border: 2px solid var(--green-800); color: var(--green-800); font-family: 'DM Sans', sans-serif; font-weight: 600; border-radius: var(--radius-sm); padding: 0.65rem 1.6rem; font-size: 0.95rem; transition: var(--transition); cursor: pointer; } .btn-fch-outline:hover { background: var(--green-800); color: white; transform: translateY(-1px); } .btn-fch-ghost { background: transparent; border: none; color: var(--green-700); font-weight: 600; font-size: 0.9rem; padding: 0.4rem 0; transition: var(--transition); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; } .btn-fch-ghost:hover { color: var(--green-900); gap: 0.55rem; } /* ── Section Labels & Titles ─────────────────────────────── */ .fch-label { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-200); padding: 0.3rem 0.85rem; border-radius: 100px; margin-bottom: 1rem; } .fch-section-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: var(--text-950); letter-spacing: -0.03em; line-height: 1.15; } .fch-section-sub { font-size: 1.05rem; color: var(--text-500); line-height: 1.65; max-width: 580px; } /* ── Hero ────────────────────────────────────────────────── */ .fch-hero { background: var(--green-900); background-image: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(64, 145, 108, 0.4) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 10% 80%, rgba(0, 105, 92, 0.35) 0%, transparent 55%), linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 50%, #1e4a3f 100%); padding: 96px 0 112px; position: relative; overflow: hidden; } /* Dot pattern overlay */ .fch-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } /* Wave bottom cutout */ .fch-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 70px; background: var(--cream); clip-path: ellipse(56% 100% at 50% 100%); } .fch-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 100px; padding: 0.4rem 1rem; color: rgba(255,255,255,0.9); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 1.5rem; } .fch-hero-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 700; color: #ffffff; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 1.25rem; } .fch-hero-title .highlight { color: var(--green-400); } .fch-hero-sub { font-size: 1.1rem; color: rgba(255,255,255,0.75); line-height: 1.65; max-width: 500px; margin-bottom: 2rem; } .fch-hero-stats { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; } .fch-hero-stat { text-align: center; } .fch-hero-stat .stat-num { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: white; letter-spacing: -0.03em; line-height: 1; } .fch-hero-stat .stat-label { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.2rem; } .fch-hero-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.2); } /* Hero visual float card */ .fch-hero-card { background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.1); animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* ── Category Cards ──────────────────────────────────────── */ .fch-category-card { background: white; border-radius: var(--radius-md); border: 1px solid var(--warm-100); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: var(--transition); cursor: pointer; height: 100%; text-decoration: none; display: block; color: inherit; } .fch-category-card:hover { border-color: var(--green-400); box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; color: inherit; } .fch-cat-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; flex-shrink: 0; } .fch-category-card h5 { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--text-950); margin-bottom: 0.4rem; letter-spacing: -0.02em; } .fch-category-card p { font-size: 0.875rem; color: var(--text-500); margin-bottom: 0; line-height: 1.55; } .fch-category-card .cat-link { font-size: 0.82rem; font-weight: 600; color: var(--green-700); display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.85rem; transition: gap 0.2s; } .fch-category-card:hover .cat-link { gap: 0.55rem; } /* ── Product Cards ───────────────────────────────────────── */ .fch-product-card { background: white; border-radius: var(--radius-md); border: 1.5px solid var(--warm-100); box-shadow: var(--shadow-sm); transition: var(--transition); overflow: hidden; position: relative; height: 100%; display: flex; flex-direction: column; } .fch-product-card:hover { border-color: var(--green-300, #86efac); box-shadow: var(--shadow-lg); transform: translateY(-5px); } .fch-product-card.featured { border-color: var(--green-700); box-shadow: 0 0 0 3px var(--green-100), var(--shadow-md); } .fch-product-img-wrap { background: linear-gradient(135deg, var(--green-50) 0%, var(--teal-100) 100%); height: 175px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; position: relative; overflow: hidden; } .fch-product-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .fch-product-ribbon { position: absolute; top: 12px; left: -1px; background: var(--green-800); color: white; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0.85rem 0.3rem 0.65rem; border-radius: 0 4px 4px 0; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } .fch-product-ribbon.value { background: var(--teal-700); } .fch-product-card-body { padding: 1.35rem 1.35rem 0; flex: 1; } .fch-product-card-footer { padding: 1rem 1.35rem 1.35rem; } .fch-product-name { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; font-weight: 700; color: var(--text-950); margin-bottom: 0.35rem; letter-spacing: -0.02em; line-height: 1.25; } .fch-product-desc { font-size: 0.875rem; color: var(--text-500); line-height: 1.55; margin-bottom: 0.85rem; } .fch-stars { color: var(--amber-400); font-size: 0.875rem; letter-spacing: 1px; } .fch-rating-score { font-size: 0.82rem; font-weight: 600; color: var(--text-700); } .fch-rating-count { font-size: 0.78rem; color: var(--text-300); } .fch-price { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--text-950); letter-spacing: -0.03em; } .fch-price-period { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: var(--text-300); font-weight: 400; } /* ── Compare Page — Product Cards ────────────────────────── */ .fch-compare-card { background: white; border-radius: var(--radius-lg); border: 2px solid var(--warm-100); box-shadow: var(--shadow-sm); transition: var(--transition); overflow: hidden; position: relative; height: 100%; display: flex; flex-direction: column; } .fch-compare-card:hover { border-color: var(--green-400); box-shadow: var(--shadow-lg); transform: translateY(-4px); } .fch-compare-card.best-pick { border-color: var(--green-700); box-shadow: 0 0 0 4px var(--green-100), var(--shadow-green); } .fch-compare-card.best-pick:hover { transform: translateY(-6px); } .fch-badge-ribbon { position: absolute; top: 0; right: 0; padding: 0.5rem 1rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 0 var(--radius-lg) 0 var(--radius-md); } .fch-badge-ribbon.pick { background: var(--green-800); color: white; } .fch-badge-ribbon.value { background: var(--teal-700); color: white; } .fch-badge-ribbon.popular { background: var(--amber-600); color: white; } .fch-compare-img { height: 160px; background: linear-gradient(135deg, var(--green-50) 0%, #e0f7f4 100%); display: flex; align-items: center; justify-content: center; font-size: 3.25rem; } .fch-compare-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .fch-compare-name { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem; } .fch-compare-price { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; color: var(--green-800); } .fch-pros-list, .fch-cons-list { list-style: none; padding: 0; margin: 0; } .fch-pros-list li, .fch-cons-list li { font-size: 0.85rem; line-height: 1.5; padding: 0.2rem 0; display: flex; align-items: flex-start; gap: 0.5rem; } .fch-pros-list li::before { content: '\2713'; color: var(--green-600); font-weight: 700; flex-shrink: 0; margin-top: 0.05em; } .fch-cons-list li::before { content: '\2212'; color: var(--text-300); font-weight: 700; flex-shrink: 0; margin-top: 0.05em; } .fch-benefit-tag { display: inline-block; background: var(--green-50); border: 1px solid var(--green-200); color: var(--green-800); font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.65rem; border-radius: 100px; margin: 0.15rem; } /* ── How It Works ────────────────────────────────────────── */ .fch-step-wrap { position: relative; } .fch-step-num { width: 60px; height: 60px; background: var(--green-800); color: white; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 700; margin: 0 auto 1.25rem; position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(30, 86, 49, 0.35); } /* connector line between steps (desktop) */ @media (min-width: 992px) { .fch-step-connector::after { content: ''; position: absolute; top: 30px; left: calc(50% + 30px); right: calc(-50% + 30px); height: 2px; background: linear-gradient(90deg, var(--green-700), var(--green-200)); z-index: 0; } } /* ── Trust Section ───────────────────────────────────────── */ .fch-trust-section { background: linear-gradient(135deg, var(--green-50) 0%, #e8f4f8 100%); border-top: 1px solid var(--green-100); border-bottom: 1px solid var(--green-100); } .fch-trust-item { text-align: center; } .fch-trust-icon { width: 64px; height: 64px; background: white; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--green-700); margin: 0 auto 1rem; box-shadow: var(--shadow-sm); } /* ── Blog Cards ──────────────────────────────────────────── */ .fch-blog-card { background: white; border-radius: var(--radius-md); border: 1px solid var(--warm-100); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition); height: 100%; display: flex; flex-direction: column; } .fch-blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--green-200); } .fch-blog-img { height: 220px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--green-50), var(--teal-100)); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; } .fch-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .fch-blog-card:hover .fch-blog-img img { transform: scale(1.04); } .fch-blog-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .fch-blog-cat { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green-700); margin-bottom: 0.6rem; } .fch-blog-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; font-weight: 700; color: var(--text-950); letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 0.65rem; text-decoration: none; } .fch-blog-title:hover { color: var(--green-800); text-decoration: none; } .fch-blog-excerpt { font-size: 0.875rem; color: var(--text-500); line-height: 1.6; margin-bottom: 0; flex: 1; } .fch-blog-meta { font-size: 0.78rem; color: var(--text-300); display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--warm-100); } /* ── Page Header ─────────────────────────────────────────── */ .fch-page-header { background: var(--green-900); background-image: radial-gradient(ellipse 80% 60% at 90% 50%, rgba(64,145,108,0.3) 0%, transparent 60%), linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 100%); padding: 64px 0 56px; position: relative; overflow: hidden; } .fch-page-header::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } .fch-page-header::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 50px; background: var(--cream); clip-path: ellipse(56% 100% at 50% 100%); } /* ── Article ─────────────────────────────────────────────── */ .fch-article-header { background: var(--green-900); background-image: radial-gradient(ellipse 80% 60% at 90% 40%, rgba(64,145,108,0.3) 0%, transparent 60%), linear-gradient(135deg, var(--green-950) 0%, #1e4a3f 100%); padding: 72px 0 80px; position: relative; overflow: hidden; } .fch-article-header::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } .fch-article-header::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 60px; background: var(--cream); clip-path: ellipse(56% 100% at 50% 100%); } .fch-article-cat-tag { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(116, 198, 157, 0.2); border: 1px solid rgba(116, 198, 157, 0.4); color: var(--green-400); border-radius: 100px; padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; } .fch-article-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 700; color: white; letter-spacing: -0.04em; line-height: 1.15; margin-bottom: 1.25rem; } .fch-article-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .fch-author-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); border-radius: 100px; padding: 0.4rem 0.9rem 0.4rem 0.5rem; font-size: 0.82rem; font-weight: 500; } .fch-author-avatar-sm { width: 28px; height: 28px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } .fch-meta-pill { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.65); font-size: 0.82rem; } /* Article body styles */ .fch-article-content { font-size: 1.05rem; line-height: 1.85; color: var(--text-700); } .fch-article-content h2 { font-family: 'Fraunces', Georgia, serif; font-size: 1.7rem; font-weight: 700; color: var(--text-950); margin-top: 2.75rem; margin-bottom: 1rem; letter-spacing: -0.03em; line-height: 1.2; } .fch-article-content h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--text-700); margin-top: 2rem; margin-bottom: 0.75rem; letter-spacing: -0.02em; } .fch-article-content ul, .fch-article-content ol { padding-left: 1.4rem; margin-bottom: 1.25rem; } .fch-article-content li { margin-bottom: 0.5rem; line-height: 1.65; } .fch-article-content blockquote { border-left: 3px solid var(--green-400); margin-left: 0; padding: 0.75rem 1.5rem; background: var(--green-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--text-700); } .fch-article-content strong { color: var(--text-950); } .fch-article-content a { color: var(--green-700); text-underline-offset: 3px; } .fch-article-content a:hover { color: var(--green-900); } /* Article callout box */ .fch-callout { background: var(--green-50); border: 1px solid var(--green-200); border-left: 4px solid var(--green-600); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin: 1.75rem 0; } .fch-callout-title { font-weight: 700; color: var(--green-800); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } /* Article CTA Box */ .fch-article-cta { background: linear-gradient(135deg, var(--green-50) 0%, var(--teal-100) 100%); border: 1px solid var(--green-200); border-radius: var(--radius-lg); padding: 2.25rem; } .fch-article-cta-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--text-950); letter-spacing: -0.03em; margin-bottom: 0.6rem; } /* Article sidebar */ .fch-article-sidebar { position: sticky; top: 80px; } .fch-toc { background: white; border: 1px solid var(--warm-100); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; } .fch-toc-title { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-300); margin-bottom: 1rem; } .fch-toc ul { list-style: none; padding: 0; margin: 0; } .fch-toc li { border-bottom: 1px solid var(--warm-50); padding: 0.45rem 0; } .fch-toc li:last-child { border-bottom: none; } .fch-toc a { font-size: 0.875rem; color: var(--text-500); text-decoration: none; transition: color 0.15s; } .fch-toc a:hover { color: var(--green-800); } /* ── Footer ──────────────────────────────────────────────── */ .fch-footer { background: #111a26; color: #8a9aaa; } .fch-footer-brand { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: white; letter-spacing: -0.04em; text-decoration: none; display: inline-block; margin-bottom: 0.85rem; } .fch-footer-brand:hover { color: var(--green-400); text-decoration: none; } .fch-footer p { font-size: 0.875rem; line-height: 1.65; color: #5f7382; } .fch-footer-heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #c5d0da; margin-bottom: 1rem; } .fch-footer-links { list-style: none; padding: 0; margin: 0; } .fch-footer-links li { margin-bottom: 0.5rem; } .fch-footer-links a { font-size: 0.875rem; color: #5f7382; text-decoration: none; transition: color 0.15s; } .fch-footer-links a:hover { color: white; } .fch-footer-divider { border-color: rgba(255,255,255,0.06) !important; margin: 2.5rem 0 1.5rem; } .fch-footer-disclaimer { font-size: 0.78rem; color: #3d505e; line-height: 1.6; } /* ── Utilities & Misc ────────────────────────────────────── */ .bg-cream { background-color: var(--cream) !important; } .bg-warm { background-color: var(--warm-50) !important; } .text-green { color: var(--green-700) !important; } .fch-divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--warm-200), transparent); margin: 0; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 991px) { .fch-hero { text-align: center; padding: 72px 0 96px; } .fch-hero-sub { margin: 0 auto 1.75rem; } .fch-hero-stats { justify-content: center; } } @media (max-width: 575px) { .fch-hero { padding: 56px 0 80px; } .fch-hero-title { font-size: 2rem; } .fch-hero-divider { display: none; } .fch-hero-stats { gap: 0.75rem; } .fch-hero-stat .stat-num { font-size: 1.25rem; } }