/*! MCCO x Aviator Nation 2026 - compiled stylesheet (handcrafted, no build step required).
If you change templates or add new utility classes, you can either edit this file directly
or run `npm install && npm run build` to regenerate it from Tailwind. */
/* ============================================================
RESET / PREFLIGHT (subset of Tailwind preflight)
============================================================ */
*,
*::before,
*::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; tab-size: 4; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; scroll-behavior: smooth; }
body { margin: 0; line-height: inherit; font-weight: 500; }
hr { height: 0; color: inherit; border-top-width: 1px; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type="button"], [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, blockquote, dl, dd, figure { margin: 0; }
[hidden] { display: none; }
/* ============================================================
ROOT TOKENS (Aviator Nation palette)
============================================================ */
:root {
/* Official Aviator Nation brand palette (PMS-matched HEX). */
--an-red-deep: #C8102E; /* PMS 186 C - deep red */
--an-red: #E4002B; /* PMS 185 C - primary/logo red */
--an-orange: #FF5C00; /* PMS 1655 C - logo orange */
--an-gold: #F2A900; /* PMS 130 C - logo gold */
--an-yellow: #FFC125; /* accent yellow (hover states) */
--an-navy: #00529B; /* PMS 301 C - logo blue */
--an-navy-deep:#003057; /* PMS 540 C - darker blue */
/* Secondary / accent palette (for option variants & accents). */
--an-blue-bright: #0077C8; /* PMS 3005 C */
--an-blue-light: #009CDE; /* PMS 2925 C */
--an-green: #007A33; /* PMS 356 C */
--an-green-neon: #44D62C; /* PMS 802 C */
--an-yellow-neon: #FFE900; /* PMS 803 C */
--black: #000000; /* reserved for hard accents only */
--cream: #FBF6EC; /* page surface */
--ink: #00529B; /* body & headline ink (= an-navy) */
}
::selection { background: var(--an-gold); color: var(--an-navy); }
[x-cloak] { display: none !important; }
/* ============================================================
BASE FONT FAMILIES & WEIGHTS
============================================================ */
.font-display { font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; letter-spacing: -0.02em; -webkit-text-stroke: 0; }
.font-body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.font-semibold { font-weight: 600; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* ============================================================
COLORS - TEXT
============================================================ */
.text-cream { color: var(--cream); }
.text-cream\/60 { color: rgba(251, 246, 236, 0.6); }
.text-cream\/70 { color: rgba(251, 246, 236, 0.7); }
.text-cream\/80 { color: rgba(251, 246, 236, 0.8); }
.text-cream\/85 { color: rgba(251, 246, 236, 0.85); }
.text-cream\/90 { color: rgba(251, 246, 236, 0.9); }
.text-ink { color: var(--ink); }
.text-ink\/55 { color: rgba(0, 0, 0, 0.7); }
.text-ink\/60 { color: rgba(0, 0, 0, 0.72); }
.text-ink\/70 { color: rgba(0, 0, 0, 0.78); }
.text-ink\/75 { color: rgba(0, 0, 0, 0.82); }
.text-ink\/80 { color: rgba(0, 0, 0, 0.85); }
.text-ink\/85 { color: rgba(0, 0, 0, 0.9); }
.text-an-red { color: var(--an-red); }
.text-an-gold { color: var(--an-gold); }
.text-an-yellow{ color: var(--an-yellow); }
.text-an-orange{ color: var(--an-orange); }
.text-white { color: #fff; }
.text-black { color: var(--black); }
/* Logo-style sunset gradient fill for display headings (red -> orange -> gold).
Children inherit the transparent fill so multi-line headings read as one
continuous gradient, echoing the wordmark. */
.text-sunset {
background-image: linear-gradient(180deg, var(--an-red) 0%, var(--an-orange) 54%, var(--an-gold) 100%);
-webkit-background-clip: text;
background-clip: text;
color: var(--an-red);
-webkit-text-fill-color: transparent;
}
.text-sunset > * { -webkit-text-fill-color: transparent; }
/* Blue ombre fills for headings (brand blues). Two directions offered as
options - swap the class on a heading to switch:
.text-ombre-blue = Option A, light sky blue -> navy -> deep navy
.text-ombre-blue-deep = Option B, bright royal blue -> navy -> deep navy */
.text-ombre-blue {
background-image: linear-gradient(180deg, var(--an-blue-light) 0%, var(--an-navy) 60%, var(--an-navy-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: var(--an-navy);
-webkit-text-fill-color: transparent;
}
.text-ombre-blue > * { -webkit-text-fill-color: transparent; }
.text-ombre-blue-deep {
background-image: linear-gradient(180deg, var(--an-blue-bright) 0%, var(--an-navy) 55%, var(--an-navy-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
color: var(--an-navy);
-webkit-text-fill-color: transparent;
}
.text-ombre-blue-deep > * { -webkit-text-fill-color: transparent; }
/* Black outline around letters. paint-order draws the stroke first so the
gradient/solid fill stays crisp on top instead of being eaten into. */
.text-stroke-black {
-webkit-text-stroke: 2px var(--black);
text-stroke: 2px var(--black);
paint-order: stroke fill;
}
@media (min-width: 1024px) {
.text-stroke-black { -webkit-text-stroke-width: 3px; text-stroke-width: 3px; }
}
.text-stroke-none { -webkit-text-stroke: 0; text-stroke: 0; }
/* True heavy-weight face for the hero headline so it reads strong without any
stroke/outline (Helvetica Neue tops out at Bold on most systems). */
.font-heavy {
font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 900;
-webkit-text-stroke: 0;
text-stroke: 0;
}
/* ============================================================
COLORS - BACKGROUND
============================================================ */
.bg-cream { background-color: var(--cream); }
.bg-cream\/5 { background-color: rgba(251, 246, 236, 0.05); }
.bg-cream\/15 { background-color: rgba(251, 246, 236, 0.15); }
.bg-cream\/80 { background-color: rgba(251, 246, 236, 0.8); }
.bg-cream\/95 { background-color: rgba(251, 246, 236, 0.95); }
.bg-ink { background-color: var(--ink); }
.bg-black { background-color: var(--black); }
.bg-ink\/30 { background-color: rgba(0, 82, 155, 0.32); }
.bg-ink\/40 { background-color: rgba(0, 82, 155, 0.42); }
.bg-ink\/70 { background-color: rgba(0, 82, 155, 0.72); }
.bg-an-navy { background-color: var(--an-navy); }
.bg-an-gold { background-color: var(--an-gold); }
.bg-an-gold\/20 { background-color: rgba(242, 169, 0, 0.22); }
.bg-an-navy\/8 { background-color: rgba(0, 82, 155, 0.08); }
.bg-an-red { background-color: var(--an-red); }
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; }
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }
/* ============================================================
GRADIENTS
============================================================ */
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
/* Hero overlay gradients use the deeper an-navy-deep (#0F3C87) to keep
photo contents legible while staying on-brand. */
.from-ink\/40 { --tw-gradient-from: rgba(15, 60, 135, 0.45); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to, rgba(15, 60, 135, 0)); }
.from-ink\/75 { --tw-gradient-from: rgba(15, 60, 135, 0.78); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to, rgba(15, 60, 135, 0)); }
.via-ink\/30 { --tw-gradient-via: rgba(15, 60, 135, 0.32); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.via-ink\/45 { --tw-gradient-via: rgba(15, 60, 135, 0.48); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.via-ink\/15 { --tw-gradient-via: rgba(15, 60, 135, 0.18); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-ink\/80 { --tw-gradient-to: rgba(15, 60, 135, 0.82); }
.to-ink\/90 { --tw-gradient-to: rgba(15, 60, 135, 0.9); }
.from-an-orange\/10 { --tw-gradient-from: rgba(242, 101, 34, 0.1); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(242, 101, 34, 0)); }
.to-cream { --tw-gradient-to: var(--cream); }
.from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, transparent), var(--tw-gradient-to, transparent); }
.to-transparent { --tw-gradient-to: transparent; }
/* ============================================================
LAYOUT - DISPLAY
============================================================ */
.block { display: block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
/* ============================================================
LAYOUT - POSITION
============================================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.isolate { isolation: isolate; }
.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.right-0 { right: 0; }
.-top-32 { top: -8rem; }
.-right-32 { right: -8rem; }
.-left-24 { left: -6rem; }
.-z-10 { z-index: -10; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
/* ============================================================
LAYOUT - FLEX & GRID
============================================================ */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.shrink-0 { flex-shrink: 0; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }
.gap-14 { gap: 3.5rem; }
.gap-10 { gap: 2.5rem; }
/* ============================================================
SIZING
============================================================ */
.h-px { height: 1px; }
.h-1\.5 { height: 0.375rem; }
.h-2 { height: 0.5rem; }
.h-7 { height: 1.75rem; }
.h-9 { height: 2.25rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-24 { height: 6rem; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-\[88vh\] { height: 88vh; }
.min-h-\[80vh\] { min-height: 80vh; }
.min-h-\[88vh\] { min-height: 88vh; }
.w-1\.5 { width: 0.375rem; }
.w-7 { width: 1.75rem; }
.w-14 { width: 3.5rem; }
.w-48 { width: 12rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-\[28rem\] { width: 28rem; }
.w-\[36rem\] { width: 36rem; }
.w-\[88\%\] { width: 88%; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-xl { max-width: 36rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-none { max-width: none; }
/* ============================================================
SPACING - PADDING / MARGIN
============================================================ */
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }
.pb-24 { padding-bottom: 6rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.-mt-16 { margin-top: -4rem; }
.-mt-20 { margin-top: -5rem; }
@media (min-width: 1024px) {
.lg\:-mt-20 { margin-top: -5rem; }
}
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.ml-2 { margin-left: 0.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
/* ============================================================
BORDERS / RADIUS / SHADOWS / RING
============================================================ */
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-ink\/10 { border-color: rgba(30, 75, 135, 0.14); }
.border-ink\/15 { border-color: rgba(30, 75, 135, 0.2); }
.border-cream\/20 { border-color: rgba(251, 246, 236, 0.2); }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-sm { border-radius: 0.125rem; }
.ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(0, 0, 0, 0.1)); }
.ring-cream\/10 { --tw-ring-color: rgba(251, 246, 236, 0.1); }
.ring-cream\/20 { --tw-ring-color: rgba(251, 246, 236, 0.2); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.18)); }
.drop-shadow-xl { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); }
.drop-shadow-\[0_4px_24px_rgba\(0\,0\,0\,0\.4\)\] { filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4)); }
.drop-shadow-\[0_4px_24px_rgba\(0\,0\,0\,0\.6\)\] { filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.6)); }
/* Inverts a solid-black icon PNG to white so it reads on dark surfaces. */
.icon-on-dark { filter: brightness(0) invert(1); }
/* ============================================================
TYPOGRAPHY UTILITIES
============================================================ */
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.18em; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.underline { text-decoration-line: underline; }
.underline-offset-4 { text-underline-offset: 4px; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.leading-none { line-height: 1; }
.leading-\[0\.95\] { line-height: 0.95; }
.leading-\[0\.98\] { line-height: 0.98; }
.leading-\[1\.02\] { line-height: 1.02; }
.text-\[10px\] { font-size: 10px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-sm\/relaxed { font-size: 0.875rem; line-height: 1.625; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-8xl { font-size: 6rem; line-height: 1; }
/* ============================================================
OBJECT / OVERFLOW / OTHER
============================================================ */
.object-cover { object-fit: cover; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[3\/2\] { aspect-ratio: 3 / 2; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.w-\[80\%\] { width: 80%; }
.object-center { object-position: center; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
/* ============================================================
EFFECTS
============================================================ */
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors { transition-property: color, background-color, border-color, fill, stroke; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.duration-200 { transition-duration: 200ms; }
.transition-all { transition-property: all; }
.animate-pulse { animation: mcco-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes mcco-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* Subtle hero scroll indicator */
.hero-scroll-cue {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
color: var(--an-navy, #1E4B87);
transition: color 0.2s ease, opacity 0.2s ease;
}
.hero-scroll-cue:hover { color: var(--an-navy-deep, #163a6b); }
.hero-scroll-cue svg { width: 2rem; height: 2rem; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3)); }
.mcco-scroll-cue { animation: mcco-scroll-cue 2.4s ease-in-out infinite; }
@keyframes mcco-scroll-cue {
0%, 100% { transform: translateY(0); opacity: 0.55; }
50% { transform: translateY(6px); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
.mcco-scroll-cue { animation: none; opacity: 0.7; }
}
.-translate-y-0\.5 { transform: translateY(-0.125rem); }
.translate-y-0\.5 { transform: translateY( 0.125rem); }
/* ============================================================
ACCESSIBILITY
============================================================ */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
/* ============================================================
PROSE (very light - we don't lean on @tailwindcss/typography here)
============================================================ */
.prose { color: var(--ink); line-height: 1.65; }
.prose-lg { font-size: 1.125rem; }
.prose p { margin-top: 1em; margin-bottom: 1em; }
.prose a { color: var(--an-red); text-decoration: underline; }
.prose h1, .prose h2, .prose h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 800; text-transform: uppercase; margin-top: 1.4em; margin-bottom: 0.5em; }
/* ============================================================
COMPONENT: AN BUTTON
============================================================ */
.an-button {
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9999px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
padding: 0.625rem 1.25rem;
font-size: 0.875rem; line-height: 1;
border: 2px solid var(--black);
transition: transform 150ms cubic-bezier(.4,0,.2,1), background-color 150ms, color 150ms, box-shadow 150ms;
user-select: none;
cursor: pointer;
text-decoration: none;
}
.an-button--lg { padding: 0.875rem 1.75rem; font-size: 1rem; }
.an-button--primary {
background-color: var(--an-gold); color: var(--an-navy-deep);
box-shadow: 0 3px 0 0 var(--black);
}
.an-button--primary:hover {
background-color: var(--an-yellow);
transform: translateY(-0.125rem);
box-shadow: 0 5px 0 0 var(--black);
}
.an-button--primary:active {
transform: translateY(0.125rem);
box-shadow: 0 1px 0 0 var(--black);
}
.an-button--gold {
background-color: var(--an-gold); color: var(--an-navy-deep);
box-shadow: 0 3px 0 0 var(--black);
}
.an-button--gold:hover {
background-color: var(--an-yellow);
transform: translateY(-0.125rem);
box-shadow: 0 5px 0 0 var(--black);
}
.an-button--ghost {
background-color: transparent; color: var(--cream);
border-color: var(--cream);
}
.an-button--ghost:hover {
background-color: var(--cream); color: var(--ink);
}
/* Outline variant for use on cream / light surfaces (navy text & border). */
.an-button--outline {
background-color: transparent; color: var(--black);
border-color: var(--black);
box-shadow: 0 3px 0 0 var(--black);
}
.an-button--outline:hover {
background-color: var(--an-navy); color: var(--cream);
transform: translateY(-0.125rem);
box-shadow: 0 5px 0 0 var(--black);
}
.an-button--outline:active {
transform: translateY(0.125rem);
box-shadow: 0 1px 0 0 var(--black);
}
/* ============================================================
COMPONENT: SUNSET STRIPES
============================================================ */
.sunset-stripes { display: flex; width: 100%; height: 0.5rem; }
.sunset-stripes__band { flex: 1; display: block; }
@media (min-width: 1024px) { .sunset-stripes { height: 0.625rem; } }
/* ============================================================
COMPONENT: NAV (rendered by MCCO_Nav_Walker)
============================================================ */
.mcco-nav { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; }
.mcco-nav .mcco-nav-link {
display: inline-flex; align-items: center; gap: 0.375rem;
padding: 0.5rem 0.75rem; border-radius: 0.375rem;
color: var(--ink); transition: background-color 150ms;
}
.mcco-nav .mcco-nav-link:hover { background-color: rgba(30, 75, 135, 0.07); }
.mcco-nav .mcco-nav-link.is-coming-soon { color: rgba(30, 75, 135, 0.7); }
.mcco-nav .mcco-nav-badge {
font-size: 10px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
border-radius: 0.125rem;
background-color: rgba(251, 176, 64, 0.2); color: var(--an-orange);
padding: 0.125rem 0.375rem; line-height: 1;
}
.mcco-nav--mobile { flex-direction: column; align-items: stretch; gap: 0.25rem; font-size: 1.125rem; }
.mcco-nav--mobile .mcco-nav-link { padding: 0.75rem; font-size: 1.125rem; }
.mcco-nav--mobile .mcco-nav-badge { font-size: 0.75rem; }
/* Hover helpers */
.hover\:bg-ink\/5:hover { background-color: rgba(0, 82, 155, 0.07); }
.hover\:bg-cream\/10:hover { background-color: rgba(251, 246, 236, 0.1); }
.hover\:ring-an-gold\/40:hover { box-shadow: 0 0 0 1px rgba(242, 169, 0, 0.4); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.hover\:text-an-gold:hover { color: var(--an-gold); }
.hover\:text-an-red:hover { color: var(--an-red); }
.hover\:underline:hover { text-decoration-line: underline; }
/* Focus helpers (used for skip link) */
.focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.focus\:fixed:focus { position: fixed; }
.focus\:top-2:focus { top: 0.5rem; }
.focus\:left-2:focus { left: 0.5rem; }
.focus\:z-50:focus { z-index: 50; }
.focus\:bg-an-red:focus { background-color: var(--an-red); }
.focus\:text-white:focus { color: #fff; }
.focus\:px-3:focus { padding-left: 0.75rem; padding-right: 0.75rem; }
.focus\:py-2:focus { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:rounded:focus { border-radius: 0.25rem; }
.focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, var(--an-red)); }
.focus\:ring-an-red:focus { --tw-ring-color: var(--an-red); }
/* ============================================================
ALPINE TRANSITIONS (basic helpers used inline)
============================================================ */
.translate-x-full { transform: translateX(100%); }
.translate-x-0 { transform: translateX(0); }
/* ============================================================
RESPONSIVE - sm: (640px)
============================================================ */
@media (min-width: 640px) {
.sm\:inline-flex { display: inline-flex; }
.sm\:block { display: block; }
.sm\:hidden { display: none; }
.sm\:flex-row { flex-direction: row; }
.sm\:items-center { align-items: center; }
.sm\:items-start { align-items: flex-start; }
.sm\:justify-between { justify-content: space-between; }
.sm\:text-left { text-align: left; }
.sm\:col-span-2 { grid-column: span 2 / span 2; }
.sm\:grid-cols-\[1fr_1fr\] { grid-template-columns: 1fr 1fr; }
.sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.sm\:h-10 { height: 2.5rem; }
.sm\:gap-4 { gap: 1rem; }
.sm\:gap-6 { gap: 1.5rem; }
.sm\:mb-6 { margin-bottom: 1.5rem; }
.sm\:max-w-lg { max-width: 32rem; }
.sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.sm\:text-5xl { font-size: 3rem; line-height: 1; }
.sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
.sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
}
/* ============================================================
RESPONSIVE - md: (768px)
============================================================ */
@media (min-width: 768px) {
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:text-left { text-align: left; }
.md\:mx-0 { margin-left: 0; margin-right: 0; }
}
/* ============================================================
RESPONSIVE - lg: (1024px)
============================================================ */
@media (min-width: 1024px) {
.lg\:flex { display: flex; }
.lg\:block { display: block; }
.lg\:hidden { display: none; }
.lg\:text-left { text-align: left; }
.lg\:mx-0 { margin-left: 0; margin-right: 0; }
.lg\:gap-8 { gap: 2rem; }
.lg\:gap-14 { gap: 3.5rem; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
.lg\:max-w-2xl { max-width: 42rem; }
.lg\:max-w-none { max-width: none; }
.lg\:col-span-2 { grid-column: span 2 / span 2; }
.lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
.lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.lg\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.lg\:pt-28 { padding-top: 7rem; }
.lg\:pb-36 { padding-bottom: 9rem; }
.lg\:p-7 { padding: 1.75rem; }
.lg\:p-12 { padding: 3rem; }
.lg\:h-11 { height: 2.75rem; }
.lg\:h-20 { height: 5rem; }
.lg\:h-40 { height: 10rem; }
.lg\:text-5xl { font-size: 3rem; line-height: 1; }
.lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
.lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
.lg\:text-8xl { font-size: 6rem; line-height: 1; }
}
/* ============================================================
RESPONSIVE - xl: (1280px)
============================================================ */
@media (min-width: 1280px) {
.xl\:w-56 { width: 14rem; }
.xl\:flex { display: flex; }
.xl\:hidden { display: none; }
}
/* ============================================================
PAGE: INFO & FAQs (additive - used by templates/info-faqs.php)
All selectors namespaced .faq-* so they never collide with the
existing utility layer above.
============================================================ */
/* --- Top info cards -------------------------------------------------- */
.faq-cards {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.faq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.faq-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.faq-card {
display: flex;
flex-direction: column;
height: 100%;
background-color: #FDF5BF;
border: 1px solid rgba(10, 63, 122, 0.20);
border-radius: 1rem;
box-shadow: 0 10px 24px -12px rgba(10, 63, 122, 0.35);
padding: 1.75rem;
transition: box-shadow 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1);
}
.faq-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.faq-card__body { flex: 1 1 auto; }
.faq-card__cta { align-self: flex-start; }
/* --- Plain info panels (hours / location / parking) ------------------ */
.faq-panel-card {
background-color: #FDF5BF;
border: 1px solid rgba(10, 63, 122, 0.20);
border-radius: 1rem;
box-shadow: 0 10px 24px -12px rgba(10, 63, 122, 0.35);
padding: 2rem;
height: 100%;
}
@media (min-width: 1024px) {
.faq-panel-card { padding: 2.5rem; }
}
/* --- Event hours definition list ------------------------------------- */
.faq-hours__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 0;
border-bottom: 1px solid rgba(10, 63, 122, 0.16);
}
.faq-hours__row:last-child { border-bottom: 0; }
.faq-hours__day {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(10, 63, 122, 0.74);
}
.faq-hours__time { font-size: 1.25rem; line-height: 1.2; }
/* --- Generic bulleted list (parking) --------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 0.875rem; }
.faq-list > li {
position: relative;
padding-left: 1.6rem;
font-size: 1.0625rem;
line-height: 1.6;
color: rgba(10, 63, 122, 0.86);
}
.faq-list > li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 0.55rem;
height: 0.55rem;
border-radius: 9999px;
background-color: var(--an-red);
}
/* --- "Please keep in mind" callout ----------------------------------- */
.faq-callout {
background-color: rgba(242, 169, 0, 0.12);
border: 2px solid rgba(242, 169, 0, 0.45);
border-radius: 1rem;
padding: 2rem;
}
@media (min-width: 1024px) {
.faq-callout { padding: 2.5rem; }
}
.faq-callout__list { display: grid; gap: 0.875rem; }
@media (min-width: 768px) {
.faq-callout__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
}
.faq-callout__item {
position: relative;
padding-left: 1.9rem;
font-size: 1.0625rem;
line-height: 1.55;
color: rgba(10, 63, 122, 0.9);
}
.faq-callout__item::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
width: 1.15rem;
height: 1.15rem;
background-color: var(--an-red);
-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* --- Accordion (faq-accordion.php) ----------------------------------- */
.faq-accordion { display: flex; flex-direction: column; }
.faq-item {
background-color: #FDF5BF;
border: 1px solid rgba(10, 63, 122, 0.20);
border-radius: 0.75rem;
box-shadow: 0 8px 20px -14px rgba(10, 63, 122, 0.4);
margin-bottom: 0.75rem;
overflow: hidden;
}
.faq-question { margin: 0; }
.faq-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
text-align: left;
padding: 1.125rem 1.375rem;
background-color: transparent;
border: 0;
cursor: pointer;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.4;
color: #0A3F7A;
transition: background-color 150ms ease, color 150ms ease;
}
.faq-trigger:hover { background-color: rgba(10, 63, 122, 0.06); }
.faq-trigger:focus-visible {
outline: 2px solid var(--an-red);
outline-offset: -2px;
}
.faq-trigger[aria-expanded="true"] { color: var(--an-red); }
.faq-trigger__text { flex: 1 1 auto; }
.faq-trigger__icon {
flex: 0 0 auto;
width: 1.4rem;
height: 1.4rem;
color: var(--an-red);
transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}
.faq-trigger__icon--open { transform: rotate(180deg); }
.faq-panel { color: rgba(10, 63, 122, 0.86); }
.faq-panel__inner {
padding: 0 1.375rem 1.375rem;
font-size: 1rem;
line-height: 1.65;
}
.faq-panel__inner p { margin: 0; }
.faq-panel__inner p + p { margin-top: 0.75rem; }
.faq-panel__inner a,
.faq-panel__inner .faq-inline-link {
color: #FF461D;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
transition: color 150ms ease;
}
.faq-panel__inner a:hover,
.faq-panel__inner .faq-inline-link:hover {
color: #0A3F7A;
}
/* ============================================================
APPROVED 2026 DIRECTION - "Navy · Blocked Warm A"
------------------------------------------------------------
Baked from team-options/render_palettes.py -> WARM_BLOCKED_OPTIONS
"Navy / BlockedWarm_A" (the team-approved preview
Navy_BlockedWarm_A_desktop.png). Color-blocked sections, each a
solid background, with per-section adaptive contrast.
Rules translated from the render's blocked_css():
- NO stark white: light role = lightest-yellow #FDF5BF, dark role
= navy #0A3F7A (cards / inputs / .bg-white -> #FDF5BF).
- Subheads / eyebrows / card-titles are NAVY (no red); on the navy
block they switch to amber so they stay legible (navy-on-navy
fails). Headings are solid (no gradients).
- All primary CTAs are FILLED & consistent (incl. the hero
--outline "Get In Touch").
- Photo sections (#story, #partner) keep the photo clean (no veil);
only the opaque text card carries the block color.
Palette : CREAM #FDF5BF · NAVY #0A3F7A · ORANGE #FF461D
AMBER/gold #F1A224 · YELLOW/golden #FEE665
Blocks : hero=cream · story=orange · benefits=gold ·
partner=navy · newsletter=golden-yellow · footer=cream
To revert this direction, delete this block to end of file.
============================================================ */
:root {
/* Lightest-yellow page surface replaces the old cream (no stark white). */
--cream: #FDF5BF;
/* Navy is the single ink / "dark" role across the whole site. */
--ink: #0A3F7A;
/* Retire red: every stray red accent -> navy (subheads/eyebrows are navy). */
--an-red: #0A3F7A;
--an-red-deep: #0A3F7A;
/* Default filled-button tone (each section overrides per block below). */
--an-gold: #0A3F7A;
}
/* ---- NO WHITE ANYWHERE: white cards / inputs / text / borders collapse
onto the palette (light role = lightest-yellow, dark role = navy). ---- */
body { background-color: #FDF5BF !important; }
.bg-white { background-color: #FDF5BF !important; }
.text-white { color: #FDF5BF !important; }
.border-white { border-color: #FDF5BF !important; }
/* Nav links + mobile-drawer links use navy ink. */
.mcco-nav .mcco-nav-link { color: #0A3F7A !important; }
.mcco-nav .mcco-nav-link.is-coming-soon { color: rgba(10, 63, 122, 0.55) !important; }
/* ---- GLOBAL DEFAULTS for pages WITHOUT per-section scope (Info & FAQs and
any future page): solid navy headings + navy ink body, navy subheads /
eyebrows (no red), and filled navy CTAs. The home page's per-section #id
rules below override these via higher specificity, so this is safe site-wide.
(Without this, .text-sunset keeps -webkit-text-fill-color:transparent from
the base layer and headings would render invisible off the home page.) ---- */
.text-ink { color: #0A3F7A !important; }
.text-ink\/55 { color: rgba(10, 63, 122, 0.72) !important; }
.text-ink\/60 { color: rgba(10, 63, 122, 0.74) !important; }
.text-ink\/70 { color: rgba(10, 63, 122, 0.82) !important; }
.text-ink\/75 { color: rgba(10, 63, 122, 0.86) !important; }
.text-ink\/80 { color: rgba(10, 63, 122, 0.92) !important; }
.text-ink\/85 { color: rgba(10, 63, 122, 0.96) !important; }
.text-sunset, .text-sunset > *,
.text-ombre-blue, .text-ombre-blue > *,
.text-ombre-blue-deep, .text-ombre-blue-deep > * { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
.text-an-red { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
.an-button--primary, .an-button--gold, .an-button--outline { background-color: #0A3F7A !important; color: #FDF5BF !important; border-color: #0A3F7A !important; }
.an-button--primary:hover, .an-button--gold:hover, .an-button--outline:hover { background-color: #08315F !important; color: #FDF5BF !important; border-color: #08315F !important; }
/* Subtle dark center scrim behind the hero logo lockup so the navy logo +
"presented by Aviator Nation" subline stay legible over the bright sky. */
.hero-scrim {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 62% 56% at 50% 50%, rgba(0,0,0,0.42), rgba(0,0,0,0.18) 55%, rgba(0,0,0,0) 76%);
pointer-events: none;
z-index: 0;
}
/* Flatten every gradient display fill to a solid (kills the sunset + blue
ombre); per-section rules below set the exact head/sub color per block. */
.text-sunset,
.text-ombre-blue,
.text-ombre-blue-deep { background-image: none !important; }
/* ===================== PER-SECTION COLOR BLOCKS =====================
Each section paints one solid background; text adapts: light blocks ->
navy headings/body + navy eyebrows; dark blocks (orange/navy) ->
lightest-yellow headings/body. Buttons are filled with the block accent. */
/* ---- HERO : lightest-yellow #FDF5BF (light block) ---- */
body #hero,
body #hero .bg-cream { background-image: none !important; background-color: #FDF5BF !important; }
body #hero { color: rgba(10, 63, 122, 0.9) !important; }
body #hero .text-ink { color: rgba(10, 63, 122, 0.9) !important; }
body #hero .text-ink\/55, body #hero .text-ink\/60, body #hero .text-ink\/70,
body #hero .text-ink\/75, body #hero .text-ink\/80, body #hero .text-ink\/85 { color: rgba(10, 63, 122, 0.9) !important; }
body #hero .text-sunset, body #hero .text-sunset > *,
body #hero .text-ombre-blue, body #hero .text-ombre-blue > *,
body #hero .text-ombre-blue-deep, body #hero .text-ombre-blue-deep > * { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
body #hero .text-an-red, body #hero p .text-sunset { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
body #hero .an-button--primary, body #hero .an-button--gold, body #hero .an-button--outline { background-color: #0A3F7A !important; color: #FDF5BF !important; border-color: #0A3F7A !important; }
/* ---- STORY (#story) : orange #FF461D (dark block, photo section) ---- */
body #story { position: relative !important; }
body #story::before { content: none !important; }
body #story > div { position: relative !important; z-index: 1 !important; }
body #story .bg-cream { background-color: #FF461D !important; box-shadow: 0 24px 60px rgba(0,0,0,0.28) !important; }
body #story { color: #FDF5BF !important; }
body #story .text-ink { color: #FDF5BF !important; }
body #story .text-ink\/55, body #story .text-ink\/60, body #story .text-ink\/70,
body #story .text-ink\/75, body #story .text-ink\/80, body #story .text-ink\/85 { color: #FDF5BF !important; }
body #story .text-sunset, body #story .text-sunset > *,
body #story .text-ombre-blue, body #story .text-ombre-blue > *,
body #story .text-ombre-blue-deep, body #story .text-ombre-blue-deep > * { color: #FDF5BF !important; -webkit-text-fill-color: #FDF5BF !important; }
body #story .text-an-red { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
body #story .an-button--primary, body #story .an-button--gold, body #story .an-button--outline { background-color: #0A3F7A !important; color: #FDF5BF !important; border-color: #0A3F7A !important; }
/* ---- BENEFITS (#benefits) : gold #F1A224 (light block) ---- */
body #benefits { background-image: none !important; background-color: #F1A224 !important; }
body #benefits { color: rgba(10, 63, 122, 0.9) !important; }
body #benefits .text-ink { color: rgba(10, 63, 122, 0.9) !important; }
body #benefits .text-ink\/55, body #benefits .text-ink\/60, body #benefits .text-ink\/70,
body #benefits .text-ink\/75, body #benefits .text-ink\/80, body #benefits .text-ink\/85 { color: rgba(10, 63, 122, 0.9) !important; }
body #benefits .text-sunset, body #benefits .text-sunset > *,
body #benefits .text-ombre-blue, body #benefits .text-ombre-blue > *,
body #benefits .text-ombre-blue-deep, body #benefits .text-ombre-blue-deep > * { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
body #benefits .text-an-red { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
body #benefits .an-button--primary, body #benefits .an-button--gold, body #benefits .an-button--outline { background-color: #0A3F7A !important; color: #FDF5BF !important; border-color: #0A3F7A !important; }
/* ---- PARTNER (#partner) : navy #0A3F7A (dark block, photo section) ---- */
body #partner { position: relative !important; }
body #partner::before { content: none !important; }
body #partner > div { position: relative !important; z-index: 1 !important; }
body #partner .bg-cream { background-color: #0A3F7A !important; box-shadow: 0 24px 60px rgba(0,0,0,0.28) !important; }
body #partner { color: rgba(253, 245, 191, 0.88) !important; }
body #partner .text-ink { color: rgba(253, 245, 191, 0.88) !important; }
body #partner .text-ink\/55, body #partner .text-ink\/60, body #partner .text-ink\/70,
body #partner .text-ink\/75, body #partner .text-ink\/80, body #partner .text-ink\/85 { color: rgba(253, 245, 191, 0.88) !important; }
body #partner .text-sunset, body #partner .text-sunset > *,
body #partner .text-ombre-blue, body #partner .text-ombre-blue > *,
body #partner .text-ombre-blue-deep, body #partner .text-ombre-blue-deep > * { color: #FDF5BF !important; -webkit-text-fill-color: #FDF5BF !important; }
body #partner .text-an-red { color: #F1A224 !important; -webkit-text-fill-color: #F1A224 !important; }
body #partner .an-button--primary, body #partner .an-button--gold, body #partner .an-button--outline { background-color: #F1A224 !important; color: #0A3F7A !important; border-color: #F1A224 !important; }
/* ---- NEWSLETTER (#newsletter) : golden-yellow #FEE665 (light block) ---- */
body #newsletter,
body #newsletter .bg-cream { background-image: none !important; background-color: #FEE665 !important; }
body #newsletter { color: rgba(10, 63, 122, 0.9) !important; }
body #newsletter .text-ink { color: rgba(10, 63, 122, 0.9) !important; }
body #newsletter .text-ink\/55, body #newsletter .text-ink\/60, body #newsletter .text-ink\/70,
body #newsletter .text-ink\/75, body #newsletter .text-ink\/80, body #newsletter .text-ink\/85 { color: rgba(10, 63, 122, 0.9) !important; }
body #newsletter .text-sunset, body #newsletter .text-sunset > *,
body #newsletter .text-ombre-blue, body #newsletter .text-ombre-blue > *,
body #newsletter .text-ombre-blue-deep, body #newsletter .text-ombre-blue-deep > * { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
body #newsletter .text-an-red { color: #0A3F7A !important; -webkit-text-fill-color: #0A3F7A !important; }
body #newsletter .an-button--primary, body #newsletter .an-button--gold, body #newsletter .an-button--outline { background-color: #0A3F7A !important; color: #FDF5BF !important; border-color: #0A3F7A !important; }
/* Newsletter inputs: lightest-yellow field, navy text/border (no white). */
body #newsletter input { background-color: #FDF5BF !important; border-color: rgba(10, 63, 122, 0.25) !important; color: #0A3F7A !important; }
/* Desktop: image fills the column height so it balances the taller form. */
@media (min-width: 1024px) { body #newsletter picture { display: block; height: 100%; } }
/* ---- Constant Contact embedded form (plugin markup inside #newsletter) ----
Real CC Forms markup: