/* ========================================================================== substyles.css — All sub pages. Pulls in the same shared header/footer look used by mstyles.css so every page has an identical header and footer. Add sub-page-specific section styles below the import as we build each sub page. Nothing needed here yet — this file is ready to grow. ========================================================================== */ /* hf-shared.css is now linked directly in the of every page, right before this file — see index.php / includes-front templates. */ /* ---------- Generic sub-page scaffolding (used by every inner page) ---------- */ .page-header { background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%); color: var(--color-white); } .page-header-inner { padding-block: clamp(2.5rem, 5vw, 3.5rem); } .page-header h1 { color: var(--color-white); font-size: clamp(2rem, 4.5vw, 2.75rem); margin: 0; } .breadcrumb { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0.75rem 0 0; font-size: 0.9rem; color: #cdd8ec; } .breadcrumb a { color: #cdd8ec; } .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: #7d90b3; } .section { padding-block: clamp(3rem, 6vw, 5rem); } .section--alt { background: var(--color-cream); } /* ---------- Two-column layout: main content + reusable right column ---------- */ .content-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .content-layout { grid-template-columns: minmax(0, 1fr) 320px; } } .content-main { min-width: 0; } .content-main h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-top: 2rem; } .content-main h2:first-child { margin-top: 0; } .content-main p { color: var(--color-ink); font-size: 1.05rem; margin: 0 0 1.25rem; } .content-main ul, .content-main ol { margin: 0 0 1.25rem; padding-left: 1.25rem; color: var(--color-ink); } .content-main li { margin-bottom: 0.5rem; } .content-main a:not(.btn) { color: var(--color-red-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* ---------- Reusable right column (includes-front/rc-main.php) ---------- */ .content-aside { display: grid; gap: 1.5rem; } .aside-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 8px 20px rgba(18, 41, 74, 0.05); } .aside-card--contact { background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%); color: var(--color-white); border: none; } .aside-card--contact h2 { color: var(--color-white); } .aside-card--contact p { color: #dfe7f4; font-size: 0.95rem; } .aside-card h2 { font-size: 1.1rem; margin: 0 0 0.85rem; } .aside-contact-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.6rem; } .aside-contact-list a { color: inherit; text-decoration: none; } .aside-contact-list a:hover { text-decoration: underline; } .aside-contact-list i { width: 1.25em; color: rgba(255, 255, 255, 0.85); } .aside-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .aside-links a { color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .aside-links a:hover { color: var(--color-red-dark); } .aside-cta { display: block; text-align: center; width: 100%; } /* ---------- Department Officers page (ala-officer-) ---------- */ .ala-officer-list { display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; } .ala-officer-card { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 8px 20px rgba(18, 41, 74, 0.05); } @media (min-width: 560px) { .ala-officer-card--has-photo { grid-template-columns: 170px minmax(0, 1fr); } } .ala-officer-photo { margin: 0; } .ala-officer-photo img { display: block; width: 100%; max-width: 220px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); } .ala-officer-card h2 { font-size: 1.25rem; margin: 0 0 0.65rem; } .ala-officer-card h2 .ala-officer-role, .ala-officer-card h3 .ala-officer-role { display: block; font-size: 0.95rem; font-weight: 600; color: var(--color-red-dark); margin-top: 0.15rem; } .ala-officer-card p { margin: 0 0 0.85rem; font-size: 1rem; } .ala-officer-card p:last-child { margin-bottom: 0; } .ala-officer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 1rem; } .ala-officer-contact i { width: 1.4em; color: var(--color-navy); } /* ---------- Department Chairs page (ala-chairs-) ---------- */ .ala-chairs-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .ala-chairs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ala-chairs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ala-chairs-card { background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid var(--color-red-dark); border-radius: var(--radius-lg); padding: 1rem 1.25rem; box-shadow: 0 8px 20px rgba(18, 41, 74, 0.05); } .ala-chairs-card h2 { font-size: 1.05rem; margin: 0 0 0.35rem; } .ala-chairs-card h2 a { color: var(--color-navy); text-decoration: none; } .ala-chairs-card h2 a:hover, .ala-chairs-card h2 a:focus { color: var(--color-red-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .ala-chairs-name { margin: 0; font-size: 0.95rem; color: var(--color-ink); } .ala-chairs-name strong { display: block; } /* ---------- Governing Documents page (ala-govdocs-) ---------- */ .ala-govdocs-list { display: grid; gap: 0.85rem; justify-items: start; margin-top: 1.5rem; } /* ---------- Past Department Presidents page (ala-pastpres-) ---------- */ .ala-pastpres-tables { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 800px) { .ala-pastpres-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ala-pastpres-tables table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: 0.95rem; } .ala-pastpres-tables caption { text-align: left; font-weight: 600; font-size: 1rem; padding-bottom: 0.5rem; color: var(--color-ink); } .ala-pastpres-tables th, .ala-pastpres-tables td { padding: 0.45rem 0.85rem; text-align: left; } .ala-pastpres-tables thead th { background: var(--color-navy); color: var(--color-white); font-weight: 600; } .ala-pastpres-tables tbody tr:nth-child(even) td { background: var(--color-cream); } .ala-pastpres-tables thead th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); } .ala-pastpres-tables thead th:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); } .ala-pastpres-tables tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius-lg) - 1px); } .ala-pastpres-tables tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius-lg) - 1px); } .ala-pastpres-legend { margin-top: 1.5rem; } .ala-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; } /* ---------- VA facility page additions (ala-va-) ---------- */ .ala-va-notice { background: var(--color-cream); border: 1px solid var(--color-border); border-left: 4px solid var(--color-red-dark); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .ala-va-notice p { margin: 0 0 0.75rem; } .ala-va-notice p:last-child { margin-bottom: 0; } .ala-va-address { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 0 0 2rem; box-shadow: 0 8px 20px rgba(18, 41, 74, 0.05); } .ala-va-address p { margin: 0; } /* ---------- Event link cards (ala-events-) ---------- */ .ala-events-list { display: grid; gap: 1rem; margin: 1rem 0 2.25rem; max-width: 34rem; } .ala-events-card { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; border: 1px solid #d8d8d8; border-left: 5px solid #1e3a6e; /* accent — swap for palette var if preferred */ border-radius: 8px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease; } .ala-events-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } /* Focus indicator independent of color/elevation */ .ala-events-card:focus-visible { outline: 3px solid #1e3a6e; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .ala-events-card { transition: none; } .ala-events-card:hover { transform: none; } } .ala-events-card i { font-size: 1.65rem; color: #1e3a6e; flex-shrink: 0; } .ala-events-card-title { display: block; font-weight: 600; font-size: 1.1rem; line-height: 1.3; } .ala-events-card-hint { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: #555555; } /* ---------- Thinking of You (ala-thoughts-) ---------- */ .ala-thoughts { max-width: 46rem; } .ala-thoughts-intro { text-align: center; } .ala-thoughts hr { border: none; height: 1px; background-color: #c9c9c9; margin: 2.25rem auto; } .ala-thoughts p { line-height: 1.7; } /* - Extra spacing below h3 section headings - */ .content-main h3 { margin-top: 2rem; }