/* ============================================================================ VCO-AURORA — the fitness "AURORA" design language, re-themed to the Aeromedical Teal palette for Vehicle Control Operations. Air Force navy stays the base (shared identity); the gold accent becomes a medical teal. Load order: af-aurora.css -> vco.css -> THIS FILE. Activated by . ============================================================================ */ /* ---- Accent token swap: gold -> aeromedical teal (re-themes every .af-* ) ---- */ .vco-aurora { /* Accent: gold -> aeromedical teal */ --af-gold: #14B8A6; --af-gold-soft: #2DD4BF; --af-gold-grad: linear-gradient(135deg, #14B8A6, #0d9488); /* Warm the AURORA neutrals so navy reads as a confident anchor (not a cool-on-cool "all blue" wash) and evokes a military field/uniform canvas. */ --af-cloud: #F4F1EA; /* warm sand page background (was #EEF2F9) */ --af-ink: #22201C; /* warm near-black headings */ --af-muted: #5C564C; /* warm gray body text (was blue-gray) */ --af-muted-soft: #7C7468; --af-line: rgba(34, 32, 28, .10); /* warm hairline borders */ --af-blue-tint: rgba(20, 184, 166, .09); /* hovers tint teal, not blue */ --vco-teal: #14B8A6; --vco-teal-soft: #2DD4BF; --vco-teal-deep: #0f766e; --vco-teal-tint: rgba(20, 184, 166, .16); } .vco-aurora ::selection { background: rgba(20, 184, 166, .28); color: #0A1733; } /* Warm canvas across the whole VCO section */ body.vco-aurora { background: var(--af-cloud); } .vco-aurora .vco-main { background: var(--af-cloud); } /* Retint af-aurora's few hardcoded gold accents to teal */ .vco-aurora .af-btn-gold { color: #04231f; } .vco-aurora .af-btn-gold:hover { box-shadow: 0 16px 32px -10px rgba(20, 184, 166, .7); } .vco-aurora .af-card-accent { border-left-color: var(--vco-teal); } .vco-aurora .af-eyebrow { background: rgba(20, 184, 166, .10); border-color: rgba(20, 184, 166, .34); } .vco-aurora .af-hero { background: radial-gradient(120% 140% at 85% -10%, rgba(20, 184, 166, .20) 0%, rgba(20, 184, 166, 0) 46%), radial-gradient(90% 120% at 8% 110%, rgba(11, 62, 156, .55) 0%, rgba(11, 62, 156, 0) 55%), var(--af-navy-grad); } .vco-aurora .af-hero::after { background: radial-gradient(58% 48% at 78% 16%, rgba(45, 212, 191, .16) 0%, transparent 70%), radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .10) 0 1px, transparent 1.4px) 0 0 / 46px 46px; } /* ---- Re-skin the VCO sidebar to a neutral gunmetal + teal (less "blue") ---- */ :root { --vco-sidebar-bg: #0e1622; --vco-sidebar-hover: #18222f; --vco-sidebar-active: #1b2b3a; --vco-accent: #2DD4BF; --vco-accent-hover: #5eead4; --vco-topbar-bg: #0b111a; } /* ============================================================================ Landing page ============================================================================ */ .vco-home { max-width: 1200px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); } .vco-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; } .vco-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; margin-top: 1.9rem; } .vco-prog-card { display: flex; flex-direction: column; text-decoration: none; padding: 1.4rem; min-height: 196px; } .vco-prog-card:hover { text-decoration: none; } .vco-prog-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--vco-teal-tint); color: var(--vco-teal-deep); font-size: 1.4rem; margin-bottom: 1rem; } .vco-prog-card h3 { color: var(--af-navy); font-weight: 800; font-size: 1.15rem; margin: 0 0 .35rem; } .vco-prog-card p { color: var(--af-muted); font-size: .92rem; line-height: 1.5; margin: 0 0 1rem; flex: 1; } .vco-prog-go { color: var(--vco-teal-deep); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; transition: gap var(--af-t) var(--af-ease); } .vco-prog-card:hover .vco-prog-go { gap: .75rem; } /* Coming-soon placeholder card (e.g. Appointment Letters) */ .vco-prog-card.is-soon { cursor: default; } .vco-prog-card.is-soon:hover { transform: none; box-shadow: var(--af-shadow-md); } .vco-prog-card.is-soon .vco-prog-ico { background: rgba(82, 96, 122, .12); color: var(--af-muted); } .vco-soon-badge { align-self: flex-start; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--af-muted); background: rgba(82, 96, 122, .12); padding: .3rem .7rem; border-radius: 100px; } /* ============================================================================ REDESIGN v2 — legible hero + CTAs, roomier sidebar rows, cleaner topbar ============================================================================ */ /* ---- Sidebar: give icon + label room to breathe, refined active state ---- */ .vco-aurora .vco-nav-item { gap: .9rem; padding: .68rem 1.15rem; border-radius: 10px; margin: 2px .55rem; } .vco-aurora .vco-nav-item i { flex: 0 0 22px; width: 22px; text-align: center; font-size: 1rem; } .vco-aurora .vco-nav-item .nav-text { font-size: .9rem; letter-spacing: .005em; } .vco-aurora .vco-nav-item.active { background: linear-gradient(90deg, rgba(45, 212, 191, .16), rgba(45, 212, 191, .03)); color: #fff; border-left: 3px solid var(--vco-accent); } .vco-aurora .vco-nav-item.active i { color: var(--vco-accent); } .vco-aurora .vco-nav-section-title { letter-spacing: .16em; } /* ---- Topbar: slim, warm, hairline — not a bare white slab ---- */ .vco-aurora .vco-topbar { background: rgba(244, 241, 234, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--af-line); box-shadow: none; } .vco-aurora .vco-topbar-toggle { background: #fff; border: 1px solid var(--af-line); color: var(--af-ink); border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .vco-aurora .vco-topbar-toggle:hover { border-color: var(--vco-teal); color: var(--vco-teal-deep); background: #fff; } .vco-aurora .vco-topbar-breadcrumb a { color: var(--af-muted); font-weight: 600; } .vco-aurora .vco-topbar-breadcrumb a:hover { color: var(--vco-teal-deep); } .vco-aurora .vco-mobile-brand .brand-badge { background: var(--vco-teal-tint); color: var(--vco-teal-deep); font-weight: 800; letter-spacing: .08em; padding: .32rem .62rem; border-radius: 8px; } /* ---- HERO — deep navy→teal (aeromedical, not flat blue), engineered grid ---- */ .vco-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; margin-bottom: 1.9rem; padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem); color: #fff; background: radial-gradient(130% 120% at 88% -20%, rgba(45, 212, 191, .22) 0%, rgba(45, 212, 191, 0) 46%), linear-gradient(135deg, #0b1a2b 0%, #0e2c3b 52%, #0a3f47 100%); box-shadow: 0 24px 60px -34px rgba(8, 20, 30, .7); } .vco-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px, 48px 48px; -webkit-mask-image: radial-gradient(120% 120% at 82% 0%, #000 0%, transparent 66%); mask-image: radial-gradient(120% 120% at 82% 0%, #000 0%, transparent 66%); } .vco-hero-inner { position: relative; z-index: 1; max-width: 720px; } .vco-hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: #5eead4; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; padding: .42rem .95rem; border-radius: 100px; background: rgba(45, 212, 191, .12); border: 1px solid rgba(45, 212, 191, .34); } .vco-hero-title { color: #fff; font-weight: 800; line-height: 1.04; letter-spacing: -.02em; font-size: clamp(2rem, 5vw, 3rem); margin: 1.1rem 0 .7rem; } .vco-hero-sub { color: rgba(233, 242, 240, .9); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 46ch; margin: 0 0 1.6rem; } .vco-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* ---- CTAs — solid teal primary (no glow) + legible glass secondary ---- */ .vco-cta { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .98rem; text-decoration: none; padding: .8rem 1.5rem; border-radius: 12px; background: var(--vco-teal); color: #052e2a; box-shadow: 0 8px 20px -14px rgba(20, 184, 166, .65); transition: transform .18s var(--af-ease), box-shadow .18s ease, background .18s ease; } .vco-cta:hover { background: #12cdb6; color: #04231f; transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(20, 184, 166, .75); text-decoration: none; } .vco-cta-ghost { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .45); box-shadow: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .vco-cta-ghost:hover { background: rgba(255, 255, 255, .17); color: #fff; border-color: #fff; } /* ============================================================================ INTERIOR PAGES — lift the existing Bootstrap markup into the teal system (applies section-wide without per-template surgery) ============================================================================ */ /* Primary / positive actions -> teal (was AF navy blue). White on teal-deep = AA. */ .vco-aurora .btn-primary { --bs-btn-bg: #0f766e; --bs-btn-border-color: #0f766e; --bs-btn-hover-bg: #0b6b63; --bs-btn-hover-border-color: #0b6b63; --bs-btn-active-bg: #0a5f58; --bs-btn-active-border-color: #0a5f58; --bs-btn-disabled-bg: #0f766e; --bs-btn-disabled-border-color: #0f766e; } .vco-aurora .btn-outline-primary { --bs-btn-color: #0f766e; --bs-btn-border-color: #0f766e; --bs-btn-hover-bg: #0f766e; --bs-btn-hover-border-color: #0f766e; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0a5f58; --bs-btn-active-border-color: #0a5f58; } /* Content links -> teal (af-aurora defaults them to AF blue) */ .vco-aurora .vco-content a:not(.btn):not(.card):not(.card-link):not(.nav-link):not(.vco-cta):not(.dropdown-item):not(.page-link) { color: #0f766e; } .vco-aurora .vco-content a:not(.btn):not(.card):not(.card-link):hover { color: #0a5f58; } /* Page titles — do NOT force a color here: several interior pages have their own dark hero banners with white text, and a global color would make that text unreadable (regression fixed). Weight/spacing only. */ .vco-aurora .vco-content h1 { font-weight: 800; letter-spacing: -.01em; } /* Cards: consistent radius, hairline, and a soft lift on hover */ .vco-aurora .vco-content .card { border: 1px solid var(--af-line); border-radius: 16px; box-shadow: var(--af-shadow-sm); transition: transform .18s var(--af-ease), box-shadow .18s ease; } .vco-aurora .vco-content .card:hover { transform: translateY(-2px); box-shadow: var(--af-shadow-md); } .vco-aurora .vco-content .card-title { color: var(--af-ink); font-weight: 700; } /* Tables (AF171 list, rosters, vehicle requests, AMBUS completions) */ .vco-aurora .vco-content .table thead th { background: rgba(20, 184, 166, .08); color: var(--af-ink); border-bottom: 2px solid var(--vco-teal-tint); font-weight: 700; } .vco-aurora .vco-content .table tbody tr:hover > * { background: rgba(20, 184, 166, .06); } /* Teal accent for form focus + text-primary/links */ .vco-aurora .vco-content .form-control:focus, .vco-aurora .vco-content .form-select:focus { border-color: var(--vco-teal); box-shadow: 0 0 0 .2rem rgba(20, 184, 166, .18); } .vco-aurora .vco-content .text-primary { color: var(--vco-teal-deep) !important; } /* Blue utility backgrounds (card headers, chips) -> teal, section-wide */ .vco-aurora .vco-content .bg-primary, .vco-aurora .vco-content .text-bg-primary { background-color: #0f766e !important; color: #fff !important; } .vco-aurora .vco-content .badge.bg-primary { background-color: #0f766e !important; } .vco-aurora .vco-content .badge.bg-secondary { background-color: var(--af-muted) !important; } /* Custom interior page hero banners (Training Hub / Videos / Documents) were blue/slate — retheme to the VCO navy→teal so they match + read as "less blue". Their own CSS sets white text, which now shows correctly (h1 color override was removed above). */ .vco-aurora .training-hero, .vco-aurora .video-library-hero, .vco-aurora .documents-hero { background: linear-gradient(135deg, #0b1a2b 0%, #0e2c3b 55%, #0a3f47 100%) !important; color: #fff !important; } .vco-aurora .training-hero h1, .vco-aurora .video-library-hero h1, .vco-aurora .documents-hero h1 { color: #fff; }