/* Madera Fellowship — Accessible Contrast Styles - WCAG AA contrast for text & interactive UI - Clear separation between page bg and content cards - Works with data-theme="light" | "dark" on (and respects system if not set) */ /* ---------- LIGHT THEME (defaults) ---------- */ :root{ /* Core */ --ink:#111827; /* text (very dark gray) */ --mut:#475569; /* muted text (Slate-600) */ --bg:#eef2f6; /* page background */ --card:#ffffff; /* content surface */ --line:#d1d5db; /* borders / dividers */ --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; --font-serif:'Fraunces',Georgia,Times,'Times New Roman',serif; /* Brand & links */ --brand:#2563eb; /* Indigo-600 */ --brand-strong:#1d4ed8; /* Indigo-700 */ /* Accents / chips */ --soft:#e3ecff; /* light blue chip bg */ --chip-border:#c7d2fe; /* chip border */ /* Secondary surfaces (e.g., schedule panel bg) */ --surface-2:#f7f9ff; /* Alerts */ --warn-bg:#fef3c7; /* amber-100 */ --warn-border:#f59e0b; /* amber-500 */ --warn-ink:#7c4a03; /* readable on warn bg */ /* Buttons / shadows */ --shadow:0 .35rem 1.25rem rgba(16,24,40,.06); } /* ---------- DARK THEME (system fallback) ---------- */ @media (prefers-color-scheme: dark){ :root{ --ink:#f9fafb; /* near-white text */ --mut:#cbd5e1; /* muted text (Slate-300) */ --bg:#0b1220; /* very dark blue-gray */ --card:#1b263b; /* brighter than bg */ --line:#3b4b63; /* borders */ --brand:#8fb6ff; /* brighter blue */ --brand-strong:#b9cffd; --soft:#2e3f5f; /* chip bg (still bright) */ --chip-border:#4b6287; --surface-2:#22314a; /* schedule panel bg */ --warn-bg:#2f2410; /* deep amber glaze */ --warn-border:#fbbf24; /* amber-400 border */ --warn-ink:#fde68a; /* readable text on warn */ --shadow:0 .6rem 1.6rem rgba(4,10,20,.55); } } /* ---------- MANUAL OVERRIDES VIA data-theme ---------- */ :root[data-theme="light"]{ --ink:#111827; --mut:#475569; --bg:#eef2f6; --card:#ffffff; --line:#d1d5db; --brand:#2563eb; --brand-strong:#1d4ed8; --soft:#e3ecff; --chip-border:#c7d2fe; --surface-2:#f7f9ff; --warn-bg:#fef3c7; --warn-border:#f59e0b; --warn-ink:#7c4a03; --shadow:0 .35rem 1.25rem rgba(16,24,40,.06); } :root[data-theme="dark"]{ --ink:#f9fafb; --mut:#cbd5e1; --bg:#0b1220; --card:#1b263b; --line:#3b4b63; --brand:#8fb6ff; --brand-strong:#b9cffd; --soft:#2e3f5f; --chip-border:#4b6287; --surface-2:#22314a; --warn-bg:#2f2410; --warn-border:#fbbf24; --warn-ink:#fde68a; --shadow:0 .6rem 1.6rem rgba(4,10,20,.55); } /* ---------- BASE ---------- */ html,body{ background:var(--bg); color:var(--ink); } body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family:var(--font-sans); line-height:1.6; letter-spacing:.1px; } /* Use more width on desktop, but keep margins on small screens */ .container{ max-width:1200px; padding-inline:1.25rem; } img,svg{max-width:100%;height:auto} /* Headings & text */ h1,h2,h3,h4{ color:var(--ink); letter-spacing:.1px; font-family:var(--font-serif); } h1{ font-weight:700; line-height:1.15; } h2,h3{font-weight:600} p{ margin-bottom:.85rem; /* slightly tighter */ color:var(--ink); } .lead{ color:var(--ink); opacity:.9; } .text-muted,.muted,.text-secondary{ color:var(--mut)!important; opacity:1!important; } /* Links */ a{ color:var(--brand); text-decoration:none; } a:hover{ color:var(--brand-strong); text-decoration:underline; text-underline-offset:2px; } /* Focus */ :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:.5rem; } /* Motion sensitivity */ @media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } } /* ---------- LAYOUT & SURFACES ---------- */ main{ padding-top:clamp(1.25rem,2vw,1.75rem); padding-bottom:2.5rem; } /* Cards: slightly denser padding, full-width feel */ .card{ background:var(--card); border:1px solid var(--line); border-radius:.9rem; box-shadow:var(--shadow); margin-bottom:1.4rem; } .card-body{ padding:1.2rem 1.3rem; } @media (min-width:992px){ .card-body.p-4, .card-body.p-4.p-lg-5{ padding:1.7rem 2rem!important; } } /* Only subtle hover lift on large screens */ @media (min-width:768px){ .card:hover{ transform:translateY(-1px); transition:transform .15s ease; } } /* Simple divider utility */ .hr,.divider{ height:1px; background:var(--line); width:100%; margin:1.25rem 0; } /* Navbar / Footer */ .navbar{ backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--line)!important; } .navbar .navbar-brand{ letter-spacing:.2px; } .navbar .navbar-brand .brand-mark{ width:auto !important; height:40px !important; max-height:40px; display:block; object-fit:contain; filter: brightness(0) saturate(100%) invert(32%) sepia(94%) saturate(1700%) hue-rotate(205deg) brightness(98%) contrast(105%); } footer{ background:var(--card); } /* Hero */ .hero{ position:relative; overflow:hidden; } .hero .card-body{ background: radial-gradient(1100px 520px at -12% -15%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 62%), radial-gradient(900px 450px at 110% -25%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 65%), linear-gradient(135deg, color-mix(in oklab, var(--brand) 8%, transparent), transparent 45%), var(--card); } /* Schedule panel gets its own bright surface for contrast */ .schedule-panel{ background:var(--surface-2); border:1px solid var(--line); border-radius:.9rem; min-height:100%; } .schedule-panel .card-body{ padding:1.1rem 1.25rem; } /* Resource chips (high contrast) */ .resource-link{ display:inline-flex; align-items:center; gap:.55rem; padding:.65rem .9rem; border-radius:.8rem; background:var(--card); color:var(--ink); border:1px solid var(--line); text-decoration:none; transition:transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .resource-link:hover{ transform:translateY(-1px); background:color-mix(in oklab, var(--card), #fff 10%); border-color:color-mix(in oklab, var(--line), #fff 30%); box-shadow:0 .25rem .75rem rgba(0,0,0,.05); } .resource-link:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; } .link-label{ line-height:1.25; } /* Weekly schedule list */ .day-label{ min-width:8.5rem; font-weight:600; font-variant-caps:all-small-caps; letter-spacing:.08em; } .list-group-item{ border-color:var(--line)!important; background:transparent; padding:.55rem .9rem; } /* Alerts (warning) */ .alert-warning{ color:var(--warn-ink); background-color:var(--warn-bg); border-color:var(--warn-border); } /* Buttons (AA contrast) */ .btn{ border-radius:.7rem; font-weight:600; letter-spacing:.2px; } .btn-primary{ --bs-btn-color:#ffffff; --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand-strong); --bs-btn-hover-border-color:var(--brand-strong); --bs-btn-active-bg:var(--brand-strong); } .btn-outline-secondary{ --bs-btn-color:color-mix(in srgb, var(--ink) 90%, #000 10%); --bs-btn-border-color:var(--line); --bs-btn-hover-color:var(--ink); --bs-btn-hover-bg:color-mix(in oklab, var(--card), #fff 8%); --bs-btn-hover-border-color:color-mix(in oklab, var(--line), #fff 20%); } /* Utility pills / sections */ .eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:var(--mut); font-size:.78rem; } .prose{ font-size:1.05rem; line-height:1.8; } .prose p + p{margin-top:.75rem} .soft{ background:var(--soft); border:1px solid var(--chip-border); border-radius:.9rem; padding:.75rem .85rem; } /* Admin / table density */ .table-sm>tbody>tr>td, .table-sm>tbody>tr>th, .table-sm>thead>tr>th{ padding:.35rem .5rem; vertical-align:middle; } .form-label{ font-size:.9rem; font-weight:500; color:var(--mut); } /* Announcements + downloads spacing */ .card .list-unstyled.small li{ line-height:1.5; } /* Responsive tweaks */ @media (max-width:991.98px){ .day-label{min-width:7rem} .container{padding-inline:1rem} } @media (max-width:575.98px){ .display-6{font-size:1.6rem} .lead{font-size:1rem} } /* ==== NAVBAR CONTRAST FIX (works in light & dark) ==== */ /* Make the bar use the content surface color, not a dim overlay */ .navbar{ background: var(--card) !important; border-bottom: 1px solid var(--line) !important; } /* Brand + links = readable against --card */ .navbar .navbar-brand, .navbar .nav-link{ color: var(--ink) !important; } .navbar .nav-link{ opacity: .92; } .navbar .nav-link:hover, .navbar .nav-link:focus{ color: var(--brand) !important; opacity: 1; } /* Toggler button + icon (use currentColor so it adapts to theme) */ .navbar .navbar-toggler{ border-color: var(--line); } .navbar .navbar-toggler:focus{ box-shadow: 0 0 0 .15rem color-mix(in oklab, var(--brand), transparent 75%); } .navbar .navbar-toggler-icon{ color: var(--ink); /* sets currentColor for the SVG below */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* Generic asset cards (used on home/newcomers/resources) */ .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; } .asset-card { background: var(--card); border: 1px solid var(--line); border-radius: .8rem; box-shadow: var(--shadow); padding: .5rem .5rem .75rem; display: flex; flex-direction: column; gap: .4rem; } .asset-card-thumb { border-radius: .6rem; overflow: hidden; } .asset-card-thumb img { width: 100%; height: auto; display: block; object-fit: cover; } .asset-card-title { font-size: .9rem; font-weight: 600; } .asset-card-desc { font-size: .8rem; color: var(--mut); } .asset-card-actions a { font-size: .8rem; } /* --- Non-sticky top banner under navbar --- */ .site-banner{ background: var(--bg); border-bottom: 1px solid var(--line); padding: .25rem 0 .5rem; /* tighter vertical rhythm */ } .site-banner .container{ line-height: 0; } /* kill stray line-height gaps */ .site-banner .banner-img{ display:block; width:100%; height:100%; max-height:none; /* override previous max-height */ object-fit:cover; border-radius:0 0 .9rem .9rem; margin:0; /* remove extra top margin */ } /* ====================== */ /* Base polish additions */ /* ====================== */ /* Skip link (visible on focus) */ .skip-link.visually-hidden-focusable { position: absolute; left: 0; top: -40px; z-index: 10000; background: var(--brand); color: #fff; padding: .5rem .75rem; border-radius: .5rem; text-decoration: none; } .skip-link.visually-hidden-focusable:focus { top: .5rem; left: .5rem; } /* Navbar active state */ .navbar .nav-link.active { color: var(--brand) !important; font-weight: 600; } .navbar .nav-link.active::after { content: ""; display: block; height: 2px; margin-top: .25rem; background: currentColor; border-radius: 2px; width: 1.25rem; } /* Banner polish */ .banner-ratio { position: relative; overflow: hidden; height: clamp(120px, 16vw, 200px); } .banner-img { width: 100%; height: 100%; object-fit: cover; display: block; } .banner-mask { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.00) 60%, rgba(0,0,0,0.06) 100%); pointer-events: none; } /* Footer spacing on phones */ @media (max-width: 576px){ footer .row > [class*="col-"] { text-align: left; } } /* Back-to-top button */ .back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; opacity: 0; transform: translateY(10px); pointer-events: none; border-radius: .75rem; box-shadow: var(--shadow); } .back-to-top.on { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Navbar subtle underline on hover/focus */ .navbar .nav-link:hover, .navbar .nav-link:focus { text-decoration: none; } .navbar .nav-link:hover::after, .navbar .nav-link:focus::after { content: ""; display: block; height: 2px; margin-top: .25rem; background: var(--brand); border-radius: 2px; width: 1.25rem; } /* Ratio helper for 21:9 (banner) if not present */ .ratio-21x9 { --bs-aspect-ratio: calc(9 / 21 * 100%); } /* Make alerts breathe a bit more */ .alert { border-radius: .8rem; } /* Ensure cards have consistent inner radius on embedded media */ .card .ratio, .card .pdf-frame { border-radius: .5rem; overflow: hidden; } /* ====== Home tabs ====== */ .nav-tabs .nav-link{ color: var(--mut); font-weight: 600; } .nav-tabs .nav-link.active{ color: var(--ink); background: var(--card); border-color: var(--line) var(--line) var(--card); } .nav-tabs{ border-bottom: 1px solid var(--line); } /* ====== Home schedule chips + next badge ====== */ .times-list { display:flex; flex-direction:column; gap:.25rem; width:100%; } .time-line { display:block; white-space:nowrap; } .time-chip { display:inline-block; padding:.25rem .6rem; border:1px solid var(--line); border-radius:.6rem; background:color-mix(in oklab, var(--soft), #fff 12%); font-size:.92rem; } .times-list .time-line:nth-child(even) .time-chip{ background:color-mix(in oklab, var(--soft), #fff 22%); } .schedule-item.today { background: linear-gradient(90deg, var(--soft), transparent); } #next-chip{ background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 18%, #fff), color-mix(in oklab, var(--brand) 4%, #fff)); color: var(--ink); border: 1px solid color-mix(in oklab, var(--brand) 35%, var(--line)); box-shadow: 0 .4rem 1rem rgba(0,0,0,.08); } /* ====== Flyers + PDFs ====== */ .pdf-frame { aspect-ratio: 8.5 / 11; width: 100%; background: var(--bs-dark-bg-subtle, #1f2937); display: grid; place-items: center; overflow: hidden; border-radius: .5rem; position: relative; } .pdf-frame iframe { width:100%; height:100%; border:0; background:transparent; position: relative; z-index: 1; } .pdf-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; text-align:center; color:var(--mut); padding:1rem; } .pdf-frame.is-loaded .pdf-placeholder{ display:none; } .flyer-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:.75rem; } .flyer-thumb { display:block; border-radius:.5rem; overflow:hidden; border:1px solid var(--line); background:var(--card); } .flyer-thumb img { display:block; width:100%; height:auto; } /* micro spacing on hero badges */ .hero .badge{ border-radius:999px; padding:.4rem .6rem; } /* PDF header actions */ .pdf-actions{ flex-wrap: wrap; justify-content: flex-end; max-width: 100%; } .pdf-actions .btn{ white-space: nowrap; } /* ---------- Mobile fixes: Meeting schedule ---------- */ /* Turn each row into a 2-col grid: Day | Times */ @media (max-width: 576.98px){ .schedule-item{ display: grid; grid-template-columns: 6.75rem 1fr; /* day label + flexible times */ align-items: start; column-gap: .75rem; } .day-label{ min-width: 0; /* allow grid to control width */ white-space: nowrap; /* keep "Wednesday" on one line */ } .times-list{ min-width: 0; /* prevents overflow clipping */ display: flex; flex-wrap: wrap; /* wrap chips to new lines */ gap: .35rem .4rem; } .time-line{ white-space: normal; } .time-chip{ display:inline-block; max-width:100%; white-space:normal; /* was nowrap */ overflow-wrap:anywhere; /* break where needed */ word-break:break-word; line-height:1.25; padding:.25rem .55rem; /* a touch tighter on mobile */ } /* keep the panel from clipping subtle borders on tiny screens */ #schedule-list{ overflow-x: hidden; } }