:root { --color-bg: #f1e7cf; --color-bg-2: #f6eedd; --color-panel: #f8f2dc; --color-panel-2: #f5ecd0; --color-text: #0A1045; --color-text-muted: #3a3f5c; --color-border: #d7c7a4; --color-pill: #fff6e9; --color-pill-text: #1f274a; --color-cream: #fff6e9; /* light cream surface */ --color-cream-text: #1f274a; /* dark text on cream */ --color-primary: #3b82f6; --color-primary-contrast: #ffffff; /* New design tokens */ --color-background-hero: #f6e1b6; --color-background-hero-accent: #f29a52; --color-hero-text-primary: #0a2854; --color-nav-text: #0a2854; --color-nav-text-hover: #071b39; --color-logo-text: #0a2854; --color-logo-mark: #0a2854; /* Deprecated */ --color-background-page: #f5e7c9; /* warm light beige from hero */ --color-hero-overlay: rgba(0, 0, 0, 0.1); --color-hero-text: #02245a; /* deep navy blue from headline/nav */ --color-nav-text: #02245a; --color-logo-mark: #02245a; --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-hero: var(--font-family-base); --font-family-nav: var(--font-family-base); /* Deprecated */ --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-hero: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-base: 16px; --font-size-nav: 0.9rem; --font-size-nav-sm: 0.8rem; --font-size-logo: 1rem; --font-size-hero: clamp(2.4rem, 4vw, 3.4rem); --font-size-hero-sm: clamp(1.8rem, 5vw, 2.4rem); --font-size-hero-xs: clamp(1.6rem, 6vw, 2rem); /* Deprecated */ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-hero: 700; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-hero: var(--font-weight-bold); --font-weight-nav: var(--font-weight-semibold); --font-weight-logo: var(--font-weight-semibold); --font-lineheight-hero: 1.25; --font-letterspacing-nav: 0.08em; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; /* Deprecated */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; --max-width-content: 72rem; --radius-logo-mark: 3px; --z-nav: 10; --hero-background-image: linear-gradient(120deg, var(--color-background-hero) 0%, var(--color-background-hero-accent) 60%, var(--color-background-hero) 100%); --radius-pill: 999px; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --shadow-soft: 0 10px 20px rgba(110, 84, 46, 0.25); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, ui-sans-serif, system-ui; } html, body { min-height: 100%; background: url("../images/haiclimb_bg.png") center / cover no-repeat, radial-gradient(1200px 800px at 80% 20%, rgba(255, 132, 77, 0.35), transparent 60%), radial-gradient(900px 650px at 20% 80%, rgba(255, 132, 77, 0.28), transparent 62%), linear-gradient(180deg, var(--color-bg), var(--color-bg-2)); color: #0f1426; font-family: var(--font-sans); } /* Optional photographic background layer. Add class "has-photo" to to enable. */ body.has-photo { background: url("../images/haiclimb_bg.png") center / cover no-repeat; background-size: cover, auto, auto, auto; background-position: center, center, center, center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-attachment: fixed, scroll, scroll, scroll; } .aeo-panel { background: linear-gradient(180deg, var(--color-panel), var(--color-panel-2)); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); padding: var(--space-5); } /* Ensure headings and default text inside panels are readable */ .aeo-panel h1, .aeo-panel h2, .aeo-panel h3, .aeo-panel h4, .aeo-panel h5, .aeo-panel h6 { color: #0A1045; } .aeo-panel .text-muted { color: #3a3f5c !important; } /* Light cards/components placed on dark panels should be readable */ .aeo-panel .card, .aeo-panel .aeo-card-light, .card, .aeo-card-light { background: var(--color-cream); color: var(--color-cream-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .aeo-panel .card .card-title, .aeo-panel .card h1, .aeo-panel .card h2, .aeo-panel .card h3, .aeo-panel .card h4, .aeo-panel .card h5, .aeo-panel .card h6, .card .card-title, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: var(--color-cream-text); } .aeo-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: rgba(248, 242, 220, 0.95); border-radius: var(--radius-md); box-shadow: var(--shadow-inset); color: #0A1045; border: 1px solid var(--color-border); margin-bottom: var(--space-4); } .aeo-panel-header h1 { color: #0A1045; } .aeo-panel-header a { color: #0A1045; text-decoration: none; } .aeo-panel-header .btn-primary { color: #fff; } .aeo-context-link-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; background: rgba(248, 242, 220, 0.95); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: #0A1045; text-decoration: none; box-shadow: var(--shadow-soft); } .aeo-context-link-pill:hover, .aeo-context-link-pill:focus-visible { color: #0A1045; background: rgba(245, 236, 208, 1); border-color: #c5b68e; } .aeo-nav { display: flex; gap: var(--space-3); } .aeo-nav .nav-link { background: var(--color-panel); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 10px 16px; } .aeo-nav .nav-link.active { background: #0A1045; border-color: #0A1045; color: #F8F2DC; } .aeo-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-pill); color: var(--color-pill-text); border: 1px solid rgba(0,0,0,0.06); } .aeo-input { width: 100%; background: #ffffff; color: #0f1426; border-radius: var(--radius-pill); border: 1px solid var(--color-border); padding: 10px 14px; } .aeo-muted { color: #3a3f5c; } .m-0 { margin: 0 !important; } .mb-1 { margin-bottom: var(--space-3) !important; } .mb-2 { margin-bottom: var(--space-4) !important; } .mb-3 { margin-bottom: var(--space-5) !important; } .mt-1 { margin-top: var(--space-3) !important; } .mt-2 { margin-top: var(--space-4) !important; } .mt-3 { margin-top: var(--space-5) !important; } .btn-outline-secondary { color: #0A1045; border-color: var(--color-border); border-radius: var(--radius-pill); background: rgba(255,255,255,0.5); } .btn-outline-secondary:hover { background: rgba(255,255,255,0.8); } .btn-outline-info { color: var(--color-pill-text); background: var(--color-pill); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-pill); } .aeo-breadcrumb { display: flex; align-items: center; gap: var(--space-3); background: rgba(248, 242, 220, 0.95); color: #0A1045; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); } .aeo-breadcrumb a { color: #0A1045; text-decoration: none; } .aeo-card { background: rgba(248, 242, 220, 0.95); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); color: #0A1045; } .aeo-card-title { font-weight: 600; } .aeo-table-panel { background: rgba(248, 242, 220, 0.95); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; color: #0A1045; } .aeo-print-break { break-inside: avoid; } .hero-main-title { color: #0A1045; font-size: 75px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; line-height: 75px; word-wrap: break-word; } /* Dark headings inside cream containers */ .aeo-card h3, .aeo-card h4, .aeo-card h5, .aeo-card h6, .aeo-panel h3, .aeo-panel h4, .aeo-panel h5, .aeo-panel h6, .aeo-panel-header h3, .aeo-panel-header h4, .aeo-panel-header h5, .aeo-panel-header h6, .nav-card h3, .nav-card h4, .nav-card h5, .nav-card h6 { color: #0A1045 !important; } .modal-title, .modal-body h6 { color: #0A1045 !important; } /* ── Tables inside cream panels/cards ── */ .aeo-card .table, .aeo-panel .table, .aeo-table-panel .table { --bs-table-bg: transparent; --bs-table-color: #0A1045; --bs-table-border-color: var(--color-border); --bs-table-striped-bg: rgba(0, 0, 0, 0.03); --bs-table-striped-color: #0A1045; --bs-table-hover-bg: rgba(0, 0, 0, 0.05); --bs-table-hover-color: #0A1045; color: #0A1045; border-color: var(--color-border); } .aeo-card .table thead th, .aeo-panel .table thead th, .aeo-table-panel .table thead th { color: #0A1045; background: rgba(0, 0, 0, 0.04); border-bottom-color: var(--color-border); font-weight: 600; } .aeo-card .table tbody td, .aeo-panel .table tbody td, .aeo-table-panel .table tbody td { border-color: var(--color-border); color: #0A1045; } .aeo-card .table .text-muted, .aeo-panel .table .text-muted, .aeo-table-panel .table .text-muted { color: #3a3f5c !important; } .aeo-card .table .badge.bg-light, .aeo-panel .table .badge.bg-light, .aeo-table-panel .table .badge.bg-light { background: rgba(0, 0, 0, 0.06) !important; color: #0A1045 !important; border-color: var(--color-border) !important; } /* Bootstrap .table-secondary rows in cream panels */ .aeo-card .table .table-secondary, .aeo-panel .table .table-secondary, .aeo-table-panel .table .table-secondary { --bs-table-bg: rgba(0, 0, 0, 0.04); --bs-table-color: #0A1045; --bs-table-border-color: var(--color-border); color: #0A1045; } /* Pagination inside cream panels */ .aeo-card .pagination .page-link, .aeo-panel .pagination .page-link, .aeo-table-panel + nav .pagination .page-link { background: rgba(255, 255, 255, 0.6); border-color: var(--color-border); color: #0A1045; } .aeo-card .pagination .page-item.active .page-link, .aeo-panel .pagination .page-item.active .page-link, .aeo-table-panel + nav .pagination .page-item.active .page-link { background: #0A1045; border-color: #0A1045; color: #F8F2DC; } .aeo-card .pagination .page-item.disabled .page-link, .aeo-panel .pagination .page-item.disabled .page-link, .aeo-table-panel + nav .pagination .page-item.disabled .page-link { background: rgba(0, 0, 0, 0.03); border-color: var(--color-border); color: rgba(10, 16, 69, 0.35); } /* Form controls inside cream panels */ .aeo-card .form-select, .aeo-panel .form-select, .aeo-card .form-control, .aeo-panel .form-control { background-color: #ffffff; border-color: var(--color-border); color: #0A1045; } .aeo-card .form-control:focus, .aeo-panel .form-control:focus { background-color: #ffffff; border-color: var(--brand-primary); color: #0A1045; box-shadow: 0 0 0 0.2rem rgba(244, 136, 71, 0.2); } .aeo-card .form-control::placeholder, .aeo-panel .form-control::placeholder { color: rgba(10, 16, 69, 0.4); } .aeo-card .form-label, .aeo-panel .form-label { color: #0A1045; } /* Pre-formatted text inside cream panels */ .aeo-card pre, .aeo-panel pre { color: #0A1045; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem; } /* Links and button-links inside cream panels */ .aeo-card a, .aeo-panel a, .aeo-table-panel a { color: var(--brand-primary); } .aeo-card a:hover, .aeo-panel a:hover, .aeo-table-panel a:hover { color: var(--brand-primary-hover); } .aeo-card .btn-link, .aeo-panel .btn-link, .aeo-table-panel .btn-link { color: #0A1045; } .aeo-card .btn-link:hover, .aeo-panel .btn-link:hover, .aeo-table-panel .btn-link:hover { color: var(--brand-primary); } /* Preserve explicit button styles inside dark panels */ .aeo-card .btn-primary, .aeo-panel .btn-primary { color: #fff; } .aeo-card .btn-outline-primary, .aeo-panel .btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); } .aeo-card .btn-outline-primary:hover, .aeo-panel .btn-outline-primary:hover { color: #fff; background-color: var(--brand-primary); border-color: var(--brand-primary); } .aeo-card .btn-outline-secondary, .aeo-panel .btn-outline-secondary, .aeo-panel-header .btn-outline-secondary { color: #0A1045; border-color: var(--color-border); } .aeo-card .btn-outline-secondary:hover, .aeo-panel .btn-outline-secondary:hover, .aeo-panel-header .btn-outline-secondary:hover { color: #0A1045; background: rgba(0, 0, 0, 0.06); }