/* ====================================================================== SCOTTISH RITE FOUNDATION OF COLORADO CONSOLIDATED SITE STYLESHEET ====================================================================== Purpose: - One shared stylesheet for the entire site - Reusable components instead of page-specific styling - Five lightweight page-type modifiers: .page-standard .page-program .page-scholarship .page-locations .page-form - Existing class names are retained where practical so pages can migrate without rewriting all content. Recommended page structure: or: ====================================================================== */ /* ===================================================================== 01. THEME / DESIGN TOKENS ===================================================================== */ :root { --blue-dark: #123B63; --blue: #1E5A8A; --navy: #0C2F4F; --red: #B4202A; --red-dark: #8F1821; --gold: #F2C230; --gold-light: #F7D96A; --orange: #E77B24; --green: #5A8F3D; --cream: #FFF8E7; --blue-light: #EEF5FA; --white: #FFFFFF; --text: #243746; --muted: #647585; --border: #D8E0E5; --container: 1180px; --content: 1050px; --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 20px; --space-5: 28px; --space-6: 36px; --space-7: 48px; --space-8: 64px; --space-9: 88px; --radius-sm: 7px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --shadow-sm: 0 6px 20px rgba(22,60,80,.045); --shadow: 0 10px 30px rgba(12,47,79,.10); --shadow-lg: 0 14px 35px rgba(22,60,80,.12); --transition: .2s ease; } /* ===================================================================== 02. RESET / BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); background: var(--white); font-family: "DM Sans", Arial, sans-serif; font-size: 16px; line-height: 1.65; } img { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; } a { color: var(--blue); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--red); } p { margin: 0 0 18px; } ul, ol { margin-top: 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 18px; color: var(--blue-dark); line-height: 1.15; } h1, h2 { font-family: "Playfair Display", Georgia, serif; } h1 { font-size: clamp(2.45rem, 4.5vw, 4.4rem); } h2 { font-size: clamp(1.9rem, 3vw, 3rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } ::selection { background: var(--gold); color: var(--blue-dark); } /* ===================================================================== 03. GLOBAL LAYOUT ===================================================================== */ .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } .content { width: min(100%, var(--content)); margin-inline: auto; } .section { padding: var(--space-9) 0; } .section-alt { background: var(--cream); } .site-page main, .page-content, .site-content { margin-inline: 0; } /* Legacy wrapper compatibility. Remove these wrappers when HTML is migrated to .container / .content. */ .site-page { --page-left-margin: 0; } .site-page > main, .site-page > .page-content { margin-inline: 0; } /* ===================================================================== 04. BRAND STRIPE / HEADER / NAVIGATION ===================================================================== */ .brand-stripe { height: 5px; background: linear-gradient( 90deg, var(--blue-dark) 0 38%, var(--red) 38% 58%, var(--gold) 58% 78%, var(--orange) 78% 90%, var(--green) 90% ); } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--border); } .nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .brand { display: flex; align-items: center; gap: 11px; color: var(--blue-dark); font-size: .95rem; } .site-logo { display: block; width: 230px; max-height: 150px; height: auto; object-fit: contain; object-position: left center; } .brand small { display: block; color: var(--muted); font-size: .67rem; letter-spacing: .15em; text-transform: uppercase; } .mark { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--white); font-size: .72rem; font-weight: 700; } .main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; font-size: .9rem; font-weight: 600; } .main-nav > a { white-space: nowrap; color: var(--blue-dark); } .main-nav > a:hover, .main-nav .dropdown-toggle:hover { color: var(--red); } .main-nav > .btn { margin-left: 2px; } /* Mobile menu trigger */ .menu { display: none; border: 0; background: transparent; cursor: pointer; } .menu span { display: block; width: 24px; height: 2px; margin: 5px; background: var(--blue-dark); } /* Dropdown */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown > .dropdown-toggle { display: flex; align-items: center; color: var(--blue-dark); font-weight: 600; } .nav-dropdown > .dropdown-toggle::after, .main-nav > .nav-dropdown > a::after { position: relative; top: -1px; margin-left: 6px; content: "⌄"; font-size: .72em; } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 100; display: none; min-width: 280px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-lg); } .dropdown-menu::before { position: absolute; top: -10px; right: 0; left: 0; height: 10px; content: ""; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display: block; } .dropdown-menu a { display: block; padding: 11px 14px; border-radius: 8px; color: var(--blue-dark); white-space: normal; } .dropdown-menu a:hover { background: var(--cream); color: var(--red); } /* ===================================================================== 05. TYPOGRAPHY / COMMON CONTENT ===================================================================== */ .eyebrow { margin-bottom: 10px; color: var(--red); font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .lead { color: var(--muted); font-size: 1.16rem; } .small-note { margin-top: 22px; color: var(--muted); font-size: .9rem; } .feature-list { margin: 20px 0 0; padding-left: 20px; } .feature-list li { margin-bottom: 9px; color: var(--text); } .feature-list li::marker { color: var(--red); } .check-list { margin: 24px 0 0; padding: 0; list-style: none; } .check-list li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--border); } .check-list li::before { position: absolute; left: 0; color: var(--red); content: "✓"; font-weight: 700; } .text-link { display: inline-block; margin-top: 10px; color: var(--red); font-weight: 700; } .text-link:hover { color: var(--red-dark); text-decoration: underline; } /* ===================================================================== 06. BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border: 2px solid transparent; border-radius: var(--radius-pill); font-weight: 700; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition); } .btn:hover { transform: translateY(-2px); } .btn.gold { background: var(--red); border-color: var(--red); color: var(--white); } .btn.gold:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); } .btn.white { background: var(--white); color: var(--blue-dark); } .btn.outline { border-color: var(--blue); color: var(--blue); } .btn.outline:hover { background: var(--blue); color: var(--white); } .btn.outline-white { border-color: var(--white); color: var(--white); } .btn.outline-white:hover { background: var(--white); color: var(--blue-dark); } .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* ===================================================================== 07. HEROES ===================================================================== */ .hero { min-height: 620px; display: flex; align-items: center; color: var(--white); border-bottom: 6px solid var(--gold); background: linear-gradient( 90deg, rgba(12,47,79,.94) 0%, rgba(12,47,79,.78) 38%, rgba(12,47,79,.28) 72%, rgba(12,47,79,.08) 100% ), url("https://www.skillpointtherapy.com/wp-content/uploads/2025/05/playtime_enhances_speech_skills.jpg") center / cover; } .hero .inner { max-width: 820px; padding: 82px 0; } .hero h1 { color: var(--white); } .hero h1 em { color: var(--gold) !important; font-style: normal; } .hero p:not(.eyebrow) { max-width: 720px; color: rgba(255,255,255,.9); font-size: 1.08rem; } .page-hero { position: relative; width: 100%; padding: 72px 0; overflow: hidden; background: var(--blue-dark) !important; color: var(--white) !important; } .page-hero::before { position: absolute; top: 0; left: 0; width: 100%; height: 8px; content: ""; background: linear-gradient( 90deg, var(--red) 0 28%, var(--gold) 28% 55%, var(--orange) 55% 78%, var(--green) 78% ); } .page-hero::after { position: absolute; right: -90px; bottom: -120px; width: 300px; height: 300px; border: 32px solid rgba(242,194,48,.12); border-radius: 50%; content: ""; } .page-hero h1, .page-hero p, .page-hero .eyebrow { position: relative; z-index: 2; } .page-hero h1 { margin-bottom: 16px; color: var(--white) !important; } .page-hero p { max-width: 720px; color: rgba(255,255,255,.92) !important; font-size: 1.08rem; } .page-hero .eyebrow { color: var(--gold) !important; } /* ===================================================================== 08. REUSABLE GRIDS / CARDS / CALLOUTS ===================================================================== */ .two { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; } .cards, .cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; text-align: center; } .card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); } .card h3 { color: var(--blue-dark); } .card.featured { background: var(--blue); border-color: var(--blue); color: var(--white); } .card.featured h3, .card.featured .text-link { color: var(--white); } .card.featured .icon { background: var(--gold); color: var(--blue-dark); } .icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 50%; background: var(--red); color: var(--white); font-weight: 700; } .benefit-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: var(--gold-light); color: var(--blue-dark); font-size: 2rem; font-weight: 700; } .callout { background: var(--cream); } .callout-box { padding: 55px; border-radius: var(--radius-xl); background: var(--blue-dark); color: var(--white); box-shadow: var(--shadow); } .callout-box h2, .callout-box h3, .callout-box .eyebrow { color: var(--white); } .info-box { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); } .stat-highlight { margin-top: 28px; padding: 24px 28px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--cream); } .stat-highlight strong { display: block; color: var(--blue-dark); font: 700 2.2rem "Playfair Display", Georgia, serif; } .stat-highlight span { display: block; margin-top: 4px; color: var(--muted); } /* ===================================================================== 09. FEATURE / PHOTO COMPONENTS ===================================================================== */ .feature { display: grid; grid-template-columns: 1fr 1fr; } .photo { min-height: 500px; background: center / cover no-repeat; } .photo.speech { background-image: url("https://images.unsplash.com/photo-1607453998774-d533f65dac99?auto=format&fit=crop&w=1400&q=85"); } .dark { padding: 72px clamp(35px, 6vw, 90px); background: var(--blue-dark); color: rgba(255,255,255,.84); } .dark h2 { color: var(--white); } .speech-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .speech-feature.reverse .speech-copy { order: 1; } .speech-feature.reverse .speech-photo { order: 2; } .speech-photo { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #eef2f4; box-shadow: var(--shadow); } .speech-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .speech-photo-band { background: var(--cream); } .chair-photo, .treasure-photo { max-width: 760px; margin: 30px 0 0; overflow: hidden; border: 1px solid var(--border); background: var(--white); box-shadow: var(--shadow); } .chair-photo-small, .treasure-photo-small { max-width: 520px; margin-left: auto; } .chair-photo-small img, .treasure-photo-small img { max-height: 360px; object-fit: cover; } .photo-caption { margin: 0; padding: 14px 18px; background: #eef5fa; color: var(--blue-dark); font-style: italic; text-align: center; } .chair-photo-small .photo-caption, .treasure-photo-small .photo-caption { font-size: .95rem; } /* ===================================================================== 10. IMPACT / STATISTICS ===================================================================== */ .impact { padding: var(--space-9) 0; background: var(--blue); color: var(--white); } .impact h2 { color: var(--white); } .impact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-lg); background: rgba(255,255,255,.2); } .stat { min-height: 145px; padding: 30px; background: rgba(255,255,255,.08); } .stat strong { display: block; color: var(--gold-light); font: 700 2.5rem/1 "Playfair Display", Georgia, serif; } .stat span { color: rgba(255,255,255,.8); } .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .fact { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); } .fact strong { display: block; color: var(--blue); font: 700 2rem/1 "Playfair Display", Georgia, serif; } .impact-stats { margin-top: 42px; } .impact-stats .card h3 { margin-top: 4px; margin-bottom: 8px; color: var(--red); font-size: 2rem; } /* ===================================================================== 11. LOCATIONS ===================================================================== */ .location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .location { padding: 19px; border: 1px solid var(--border); border-radius: 11px; } .location strong { display: block; color: var(--blue-dark); } .location span { color: var(--muted); font-size: .9rem; } .locations-map-section { margin: 20px 0 50px; padding: 0; } .locations-map-inner { max-width: var(--content); margin-inline: auto; } .locations-map-heading { margin-bottom: 20px; } .locations-map-heading h2 { margin-bottom: 8px; } .locations-map-heading p { line-height: 1.65; } .ritecare-map { width: 100%; height: 520px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); } .ritecare-static-map { display: block; width: 100%; max-width: var(--content); height: auto; margin-inline: auto; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); } /* ===================================================================== 12. PROGRAM PAGES ===================================================================== */ .page-program .content-block, .page-program .program-section { max-width: var(--content); margin-inline: auto; } .treasure-intro { max-width: 820px; } .treasure-intro-grid, .treasure-details { align-items: start; } .treasure-benefits { text-align: center; } .treasure-benefits h2 { margin-bottom: 34px; } .treasure-details { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .treasure-support-box { padding: 34px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--cream); } .treasure-support-box h3 { margin-bottom: 14px; font-size: 1.7rem; } /* ===================================================================== 13. SCHOLARSHIP PAGES ===================================================================== */ .scholarship-intro, .scholarship-why, .scholarship-program, .scholarship-eligibility, .scholarship-donation, .scholarship-content { max-width: var(--content); margin-inline: auto; } .scholarship-intro, .scholarship-why, .scholarship-program, .scholarship-eligibility { padding: 42px 0; } .scholarship-intro p, .scholarship-program p, .scholarship-eligibility p { line-height: 1.7; } .scholarship-benefits, .eligibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .scholarship-benefits article, .eligibility-grid article { padding: 25px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); } .scholarship-benefits h3, .eligibility-grid h3 { margin-top: 0; } .scholarship-impact { max-width: var(--content); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0 auto; padding: 20px 0 42px; } .impact-stat { padding: 24px; border-radius: 10px; background: var(--blue-light); text-align: center; } .impact-stat strong { display: block; color: var(--blue-dark); font-size: 2rem; } .impact-stat span { display: block; margin-top: 6px; } .scholarship-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .scholarship-donation { padding: 10px 0 60px; } .scholarship-donation-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 36px; border-radius: 12px; background: var(--blue-light); } .scholarship-donation h2 { margin-top: 0; margin-bottom: 10px; } .scholarship-donation p { max-width: 720px; margin-bottom: 0; line-height: 1.65; } .milestones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 38px; } .milestone { padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--white); } .milestone strong { display: block; margin-bottom: 7px; color: var(--blue-dark); font: 700 1.08rem "Playfair Display", Georgia, serif; } .milestone p { margin: 0; color: var(--muted); } /* ===================================================================== 14. DONATION / FORM PAGES ===================================================================== */ .form-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; } .form { padding: 34px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); } .form label { display: block; margin-bottom: 6px; color: var(--blue-dark); font-weight: 700; } .form input, .form textarea, .form select { width: 100%; margin-bottom: 17px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--text); } .form textarea { min-height: 140px; resize: vertical; } .donate-intro, .donate-impact, .donate-closing, .qcd-section { max-width: var(--content); margin-inline: auto; } .donate-intro { display: grid; grid-template-columns: 1.35fr .85fr; gap: 42px; align-items: center; padding: 48px 0 30px; } .donate-copy h2, .donate-impact h2, .donate-closing h2 { margin-top: 0; } .donate-copy p { line-height: 1.7; } .donate-payment-card { padding: 28px; border-radius: var(--radius-md); background: var(--blue-light); text-align: center; box-shadow: var(--shadow); } .donate-payment-card h2 { margin-top: 0; } .donate-payment-card form { margin-top: 20px; } .donate-impact { padding: 30px 0 45px; } .donate-impact .impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .donate-impact .impact-grid article { padding: 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); } .donate-impact .impact-grid h3 { margin-top: 0; } .donate-closing { padding: 35px 0 60px; text-align: center; } .donate-closing p { max-width: 700px; margin: 0 auto 24px; } .donate-mail-option { margin-top: 22px; padding: 24px 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); } .donate-mail-option h2 { margin-top: 0; margin-bottom: 10px; } .donate-mail-option p { line-height: 1.6; } .donate-mail-option .mailing-address { margin-bottom: 0; } .qcd-section { padding: 25px 0 45px; } .qcd-inner { padding: 32px 36px; border: 1px solid var(--border); border-radius: 12px; background: var(--cream); } .qcd-copy h2, .qcd-copy h3 { margin-top: 0; } .qcd-copy p { line-height: 1.7; } .qcd-copy ul { margin: 14px 0 20px; padding-left: 24px; } .qcd-copy li { margin-bottom: 9px; line-height: 1.6; } .qcd-resource { margin: 24px 0 0; } /* ===================================================================== 15. NEWSLETTERS ===================================================================== */ .newsletter-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; } .newsletter-count { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); color: var(--red); font-weight: 700; } .newsletter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .newsletter-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); } .newsletter-cover { display: block; aspect-ratio: 8.5 / 11; overflow: hidden; background: var(--cream); } .newsletter-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .25s ease; } .newsletter-cover:hover img { transform: scale(1.025); } .newsletter-placeholder { height: 100%; display: grid; place-items: center; color: var(--blue-dark); font: 700 1.5rem "Playfair Display", Georgia, serif; } .newsletter-body { display: flex; flex: 1; flex-direction: column; padding: 22px; } .newsletter-body h3 { margin: 2px 0 10px; font-size: 1.45rem; } .newsletter-body p { margin-bottom: 10px; } .newsletter-highlights { margin-top: auto !important; padding-top: 8px; color: var(--muted); font-size: .93rem; } .newsletter-year { padding: 13px 22px; background: var(--blue-dark); color: var(--gold); font: 700 1.25rem "Playfair Display", Georgia, serif; } /* ===================================================================== 16. HISTORY / STANDARD CONTENT ===================================================================== */ .history-content, .history-inner { max-width: var(--content); margin-inline: auto; } .history-content { padding: 48px 0 70px; } .history-inner h2 { margin: 32px 0 14px; color: var(--blue-dark); } .history-inner h2:first-child { margin-top: 0; } .history-inner p { margin: 0 0 20px; line-height: 1.75; } /* ===================================================================== 17. FOOTER ===================================================================== */ .footer { padding: 60px 0 24px; border-top: 6px solid var(--gold); background: var(--blue-dark); color: rgba(255,255,255,.72); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 55px; padding-bottom: 45px; } .footer h3 { color: var(--gold); font-size: 1rem; } .footer a { display: block; margin-bottom: 7px; color: rgba(255,255,255,.72); } .footer a:hover { color: var(--gold); } .footer .site-logo { width: 190px; padding: 8px; border-radius: 4px; background: var(--white); } .bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; } /* ===================================================================== 18. PAGE-TYPE MODIFIERS ===================================================================== */ /* Use these only when a page genuinely needs a different arrangement. Do not create a new stylesheet for an individual page. */ .page-standard .content, .page-standard .history-content { max-width: var(--content); } .page-program .content, .page-program .program-section { max-width: var(--content); } .page-scholarship .content, .page-scholarship .scholarship-content { max-width: var(--content); } .page-locations .content { max-width: var(--content); } .page-form .content { max-width: var(--content); } /* ===================================================================== 19. RESPONSIVE ===================================================================== */ @media (max-width: 1100px) { .main-nav { gap: 12px; } .main-nav > a { font-size: .9rem; } } @media (max-width: 900px) { .menu { display: block; } .site-logo { width: 190px; max-height: 125px; } .footer .site-logo { width: 170px; } .main-nav { position: absolute; top: 80px; left: 20px; right: 20px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--white); box-shadow: var(--shadow); } .main-nav.open { display: flex; } .main-nav > a { padding: 9px; } .nav-dropdown { display: block; width: 100%; margin-bottom: 4px; } .dropdown-menu { position: static; display: block; min-width: 0; margin: 4px 0 8px 8px; padding: 0 0 0 8px; border: 0; border-left: 2px solid var(--gold); border-radius: 0; box-shadow: none; } .dropdown-menu a { padding: 7px 10px; } .two, .impact-grid, .form-layout, .speech-feature, .treasure-details { grid-template-columns: 1fr; gap: 42px; } .speech-feature.reverse .speech-copy, .speech-feature.reverse .speech-photo { order: initial; } .feature { grid-template-columns: 1fr; } .photo { min-height: 390px; } .speech-photo img { aspect-ratio: 16 / 10; } .cards, .cards-3 { grid-template-columns: 1fr; } .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } .newsletter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scholarship-benefits, .eligibility-grid, .scholarship-impact { grid-template-columns: 1fr; } .donate-impact .impact-grid { grid-template-columns: 1fr; } .ritecare-map { height: 400px; } } @media (max-width: 700px) { .milestones { grid-template-columns: 1fr; } } @media (max-width: 650px) { .container { width: min(calc(100% - 28px), var(--container)); } .section { padding: 68px 0; } .hero { min-height: 570px; } .hero .inner { padding: 65px 0; } .actions { flex-direction: column; } .actions .btn { width: 100%; } .dark { padding: 58px 27px; } .location-grid, .facts, .stats, .cards-4, .newsletter-grid { grid-template-columns: 1fr; } .callout-box { padding: 34px 25px; } .scholarship-donation-inner { flex-direction: column; align-items: flex-start; } .donate-intro { grid-template-columns: 1fr; padding-top: 32px; } .newsletter-toolbar { align-items: flex-start; flex-direction: column; } .footer-grid { grid-template-columns: 1fr; } .bottom { flex-direction: column; } .treasure-support-box { padding: 26px; } } /* ===================================================================== 20. ACCESSIBILITY / PRINT ===================================================================== */ :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } @media print { .site-header, .main-nav, .menu, .footer, .btn { display: none !important; } .page-hero { color: #000 !important; background: none !important; } .page-hero h1, .page-hero p { color: #000 !important; } } /* ===================================================================== 21. MIGRATION HELPERS / SHARED SPECIAL COMPONENTS ===================================================================== */ .mt-20 { margin-top:20px; } .mt-42 { margin-top:42px; } .center-narrow { max-width:760px; margin:0 auto 50px; text-align:center; } .muted-note { max-width:800px; color:var(--muted); } .hero-emphasis { color:var(--gold-light); font-style:normal; } .page-hero-inner { width:min(calc(100% - 40px),var(--container)); margin-inline:auto; } .page-hero-inner > * { max-width:720px; } .recipients-intro { max-width:850px; margin:0 auto; text-align:center; } .recipient-section { padding-top:18px; } .recipient-year { margin:0 0 28px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--white); box-shadow:var(--shadow); } .recipient-year>h3 { margin:0; padding:13px 20px; background:var(--blue-dark); color:var(--white); font-family:"Playfair Display",Georgia,serif; font-size:1.35rem; } .recipient-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .recipient { min-height:67px; padding:15px 18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .recipient:nth-child(3n) { border-right:0; } .recipient strong { display:block; margin-bottom:5px; color:var(--navy); font-size:.98rem; } .recipient span { display:block; color:var(--muted); font-size:.88rem; line-height:1.35; } .scholarship-note { margin:10px 0 32px; padding:18px 20px; border-left:4px solid var(--gold); border-radius:8px; background:var(--blue-light); } .ended { margin-top:55px; } .ended .recipient-year>h3 { background:var(--muted); } @media(max-width:850px) { .recipient-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .recipient:nth-child(3n) { border-right:1px solid var(--border); } .recipient:nth-child(2n) { border-right:0; } } @media(max-width:560px) { .recipient-grid { grid-template-columns:1fr; } .recipient,.recipient:nth-child(2n),.recipient:nth-child(3n) { border-right:0; } }