/* Theme Name: MHI Theme Theme URI: https://mhinst.org Description: Custom block theme for the Minority Health Institute — deep navy & gold, dark mode default, radically hand-editable. Built with Full Site Editing (FSE). Author: Sustainable Hosting Author URI: https://sustainablehosting.com Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: mhi-theme */ /* =================================================== MHI THEME — MAIN STYLESHEET TABLE OF CONTENTS (Search for these section names to jump to them) 1. FONT FACE DECLARATIONS — where fonts are loaded 2. DARK/LIGHT MODE COLORS — the color switching rules 3. GLOBAL STYLES — base text, links, spacing 4. HEADER & NAVIGATION — logo, menu, donate button, toggle 5. HERO SECTION — the big banner at the top of the homepage 6. SPOTLIGHT CARDS — the "In Focus" cards on the homepage 7. CONTENT SECTIONS — general page content areas 8. MISSION & VALUES — the centered mission statement section 9. FOUNDER SECTION — Dr. Williams bio area 10. NEWS & UPDATES — article listings 11. DONATE CTA — the gold donation call-to-action banner 12. FOOTER — bottom of every page, badges, copyright 13. FORMS — Contact Form 7 styling 14. PAGE-SPECIFIC — styles that only apply to certain pages 15. RESPONSIVE — mobile and tablet adjustments HOW TO EDIT: - Find the section you want to change using the numbers above - Read the comments — they explain what each rule does - Change values and save — refresh to see your changes - If you break something, undo your change and try again TIP: The easiest changes (colors, fonts, spacing) should be made in theme.json, not here. This file is for more detailed styling. =================================================== */ /* =================================================== 1. FONT FACE DECLARATIONS Font files are stored in: assets/fonts/ Source Serif 4 = main reading font (body text, headings) Inter = navigation and UI elements (menus, buttons, labels) To change fonts: 1. Add new font files to assets/fonts/your-font-name/ 2. Update the @font-face rules below 3. Update the font family names in theme.json =================================================== */ /* Source Serif 4 — Variable font, supports weights 200-900 */ @font-face { font-family: 'Source Serif 4'; src: url('./assets/fonts/source-serif-4/SourceSerif4Variable-Roman.ttf.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('./assets/fonts/source-serif-4/SourceSerif4Variable-Italic.ttf.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; } /* Inter — Variable font for UI elements */ @font-face { font-family: 'Inter'; src: url('./assets/fonts/inter/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* =================================================== 2. DARK/LIGHT MODE COLORS Dark mode is the DEFAULT. When the user clicks the sun/moon toggle, it switches to light mode by adding data-theme="light" to the tag. To change colors: edit theme.json first (that's the main control panel). These rules just handle the light-mode overrides. =================================================== */ html[data-theme="light"] { --wp--preset--color--bg-primary: #f8f6f1; --wp--preset--color--bg-secondary: #ffffff; --wp--preset--color--bg-tertiary: #eae6dd; --wp--preset--color--text-primary: #1a1a2e; --wp--preset--color--text-secondary: #4a4a5a; --wp--preset--color--gold-primary: #8b6914; --wp--preset--color--gold-light: #a67c1a; --wp--preset--color--gold-dark: #6b4f0e; --wp--preset--color--accent: #2a6db5; --wp--preset--color--accent-hover: #3580d0; --wp--preset--color--border: #d4cfc4; --wp--preset--color--success: #3a8f65; --wp--preset--color--danger: #c43a3a; } /* =================================================== 3. GLOBAL STYLES Base styles that apply to the entire site. Most of these are also set in theme.json — this section handles things theme.json can't. =================================================== */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } *, *::before, *::after { box-sizing: border-box; } /* Skip to content link (accessibility) */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--wp--preset--color--gold-primary); color: var(--wp--preset--color--bg-primary); padding: 0.5rem 1rem; z-index: 10000; font-family: var(--wp--preset--font-family--ui); font-weight: 600; } .skip-link:focus { left: 0; } /* =================================================== 4. HEADER & NAVIGATION The sticky header at the top of every page. Contains: logo, navigation menu, dark/light toggle, donate button. To change the header background color: Edit --wp--preset--color--bg-primary in theme.json To change the gold accent on the donate button: Edit --wp--preset--color--gold-primary in theme.json =================================================== */ .mhi-header { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--wp--preset--color--bg-primary) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 2px solid var(--wp--preset--color--gold-primary); padding: 0.5rem 2rem; } .mhi-header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .mhi-logo { height: 56px; width: auto; } .mhi-logo-link { display: flex; text-decoration: none; } /* Show/hide logos based on dark/light mode */ .mhi-logo--dark { display: block; } .mhi-logo--light { display: none; } html[data-theme="light"] .mhi-logo--dark { display: none; } html[data-theme="light"] .mhi-logo--light { display: block; } .mhi-nav { display: flex; align-items: center; } .mhi-nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.15rem; align-items: center; } .mhi-nav-link { color: var(--wp--preset--color--text-secondary); text-decoration: none; padding: 0.5rem 0.65rem; border-radius: 6px; font-family: var(--wp--preset--font-family--ui); font-size: 0.85rem; font-weight: 500; transition: color 0.2s, background 0.2s; white-space: nowrap; } .mhi-nav-link:hover, .mhi-nav-link:focus { color: var(--wp--preset--color--gold-light); background: var(--wp--preset--color--bg-secondary); } /* Dropdown parent */ .mhi-nav-dropdown { position: relative; } .mhi-nav-dropdown > .mhi-nav-link::after { content: " \25BE"; font-size: 0.7em; opacity: 0.6; } .mhi-nav-submenu { display: none; position: absolute; top: 100%; left: 0; background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 8px; padding: 0.4rem; min-width: 220px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); list-style: none; margin: 0; z-index: 100; } .mhi-nav-dropdown:hover > .mhi-nav-submenu, .mhi-nav-dropdown:focus-within > .mhi-nav-submenu { display: block; } .mhi-nav-submenu li { margin: 0; } .mhi-nav-submenu .mhi-nav-link { display: block; padding: 0.5rem 0.75rem; font-size: 0.85rem; } /* Donate button — gold accent, always visible in header */ .mhi-donate-btn { background: var(--wp--preset--color--gold-primary) !important; color: var(--wp--preset--color--bg-primary) !important; font-family: var(--wp--preset--font-family--ui); font-weight: 700; font-size: 0.85rem; padding: 0.5rem 1.25rem; border-radius: 6px; text-decoration: none; transition: background 0.2s, transform 0.2s; white-space: nowrap; } .mhi-donate-btn:hover { background: var(--wp--preset--color--gold-light) !important; transform: translateY(-1px); } /* Theme toggle button (sun/moon) */ .mhi-theme-toggle { background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--wp--preset--color--gold-primary); transition: background 0.2s, color 0.2s; flex-shrink: 0; } .mhi-theme-toggle:hover { background: var(--wp--preset--color--bg-tertiary); } html:not([data-theme="light"]) .mhi-icon-sun { display: none; } html:not([data-theme="light"]) .mhi-icon-moon { display: block; } html[data-theme="light"] .mhi-icon-sun { display: block; } html[data-theme="light"] .mhi-icon-moon { display: none; } .mhi-header-actions { display: flex; align-items: center; gap: 0.75rem; } /* Mobile hamburger */ .mhi-nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; } .mhi-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--wp--preset--color--text-primary); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } /* =================================================== 5. HERO SECTION The large banner at the top of the homepage. Background image with a dark overlay so text is readable. To change the hero background image: Edit the image URL in templates/front-page.html (search for "HERO BACKGROUND IMAGE") =================================================== */ .mhi-hero { position: relative; padding: 8rem 2rem 6rem; text-align: center; overflow: hidden; min-height: 500px; display: flex; align-items: center; justify-content: center; } .mhi-hero-bg { position: absolute; inset: 0; z-index: 0; } .mhi-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .mhi-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 22, 40, 0.8) 0%, rgba(10, 22, 40, 0.6) 50%, rgba(10, 22, 40, 0.85) 100% ); z-index: 1; } .mhi-hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .mhi-hero-title { font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--wp--preset--color--gold-primary); margin-bottom: 0.75rem; line-height: 1.15; white-space: nowrap; } .mhi-hero-subtitle { font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--wp--preset--color--text-primary); font-weight: 400; margin-bottom: 0.5rem; } .mhi-hero-tagline { font-family: var(--wp--preset--font-family--ui); font-size: 0.9rem; color: var(--wp--preset--color--text-secondary); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2rem; } .mhi-hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .mhi-btn { font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 0.95rem; padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s; display: inline-block; } .mhi-btn-gold { background: var(--wp--preset--color--gold-primary); color: var(--wp--preset--color--bg-primary); } .mhi-btn-gold:hover { background: var(--wp--preset--color--gold-light); transform: translateY(-1px); } .mhi-btn-outline { background: transparent; color: var(--wp--preset--color--text-primary); border: 2px solid var(--wp--preset--color--gold-primary); } .mhi-btn-outline:hover { background: var(--wp--preset--color--gold-primary); color: var(--wp--preset--color--bg-primary); transform: translateY(-1px); } /* =================================================== 6. SPOTLIGHT CARDS The "In Focus" section on the homepage. Shows the 3 most recent Spotlight posts as cards. =================================================== */ .mhi-spotlights { padding: 2.5rem 2rem; background: var(--wp--preset--color--bg-primary); } .mhi-spotlights-inner { max-width: 1200px; margin: 0 auto; } .mhi-spotlights h2 { color: var(--wp--preset--color--gold-primary); text-align: center; margin-top: 0; margin-bottom: 0.5rem; } .mhi-spotlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 1.5rem; } .mhi-spotlight-card { background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; overflow: hidden; transition: border-color 0.3s, transform 0.3s; } .mhi-spotlight-card:hover { border-color: var(--wp--preset--color--gold-primary); transform: translateY(-5px); } .mhi-spotlight-card img { width: 100%; height: 200px; object-fit: cover; } .mhi-spotlight-card-body { padding: 1.5rem; } .mhi-spotlight-label { font-family: var(--wp--preset--font-family--ui); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--wp--preset--color--gold-primary); background: rgba(201, 168, 76, 0.1); padding: 0.25rem 0.6rem; border-radius: 4px; display: inline-block; margin-bottom: 0.75rem; } .mhi-spotlight-card h3 { font-size: 1.2rem; color: var(--wp--preset--color--text-primary); margin: 0 0 0.5rem; line-height: 1.3; } .mhi-spotlight-card p { color: var(--wp--preset--color--text-secondary); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1rem; } .mhi-read-more { font-family: var(--wp--preset--font-family--ui); font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; } .mhi-read-more:hover { color: var(--wp--preset--color--accent-hover); } /* =================================================== 7. CONTENT SECTIONS — general page content areas =================================================== */ .mhi-section { padding: 2.5rem 2rem; } .mhi-section:nth-child(even) { background: var(--wp--preset--color--bg-secondary); } .mhi-section:nth-child(odd) { background: var(--wp--preset--color--bg-primary); } .mhi-section-inner { max-width: 1200px; margin: 0 auto; } .mhi-section h2 { color: var(--wp--preset--color--gold-primary); margin-bottom: 0.75rem; margin-top: 0; } /* Gold decorative divider */ .mhi-gold-divider { width: 60px; height: 3px; background: var(--wp--preset--color--gold-primary); border: none; margin: 0.75rem auto 1rem; } /* =================================================== 8. MISSION & VALUES =================================================== */ .mhi-mission { padding: 2.5rem 2rem; background: var(--wp--preset--color--bg-secondary); text-align: center; } .mhi-mission-inner { max-width: 800px; margin: 0 auto; } .mhi-mission h2 { color: var(--wp--preset--color--gold-primary); margin-top: 0; margin-bottom: 0.5rem; } .mhi-mission p { color: var(--wp--preset--color--text-secondary); font-size: 1.05rem; line-height: 1.7; margin-bottom: 0.75rem; } .mhi-values-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; } .mhi-value-box { border: 2px solid var(--wp--preset--color--gold-primary); border-radius: 8px; padding: 0.75rem 1.5rem; color: var(--wp--preset--color--gold-primary); font-family: var(--wp--preset--font-family--ui); font-weight: 600; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; transition: background 0.2s; } .mhi-value-box:hover { background: rgba(201, 168, 76, 0.1); } /* =================================================== 9. FOUNDER SECTION =================================================== */ .mhi-founder { padding: 2.5rem 2rem; background: var(--wp--preset--color--bg-primary); } .mhi-founder-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; } .mhi-founder-photo { width: 100%; border-radius: 12px; border: 3px solid var(--wp--preset--color--gold-primary); } .mhi-founder h2 { color: var(--wp--preset--color--gold-primary); margin-top: 0; margin-bottom: 0.5rem; } .mhi-founder p { color: var(--wp--preset--color--text-secondary); line-height: 1.7; margin-bottom: 0.5rem; } /* =================================================== 10. NEWS & UPDATES — article listings =================================================== */ .mhi-news { padding: 2.5rem 2rem; background: var(--wp--preset--color--bg-secondary); } .mhi-news-inner { max-width: 900px; margin: 0 auto; } /* News grid — 2 columns on desktop, 1 on mobile */ .mhi-news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 900px; margin: 1rem auto 0; } .mhi-news-card { display: block; background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; padding: 1.25rem 1.5rem; text-decoration: none; transition: border-color 0.2s, transform 0.2s; } .mhi-news-card:hover { border-color: var(--wp--preset--color--gold-primary); transform: translateY(-2px); } .mhi-news-card-cat { font-family: var(--wp--preset--font-family--ui); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--wp--preset--color--gold-primary); display: block; margin-bottom: 0.4rem; } .mhi-news-card-title { color: var(--wp--preset--color--text-primary); font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0 0 0.5rem; } .mhi-news-card:hover .mhi-news-card-title { color: var(--wp--preset--color--gold-light); } .mhi-news-card-date { font-family: var(--wp--preset--font-family--ui); font-size: 0.78rem; color: var(--wp--preset--color--text-secondary); } /* Legacy list style (kept for archive pages) */ .mhi-news-list { list-style: none; padding: 0; margin: 2rem 0 0; } .mhi-news-item { padding: 1.25rem 0; border-bottom: 1px solid var(--wp--preset--color--border); } .mhi-news-item:last-child { border-bottom: none; } .mhi-news-item a { color: var(--wp--preset--color--text-primary); text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: color 0.2s; } .mhi-news-item a:hover { color: var(--wp--preset--color--gold-primary); } .mhi-news-date { font-family: var(--wp--preset--font-family--ui); font-size: 0.8rem; color: var(--wp--preset--color--text-secondary); margin-top: 0.25rem; } /* =================================================== 11. DONATE CTA — gold call-to-action banner =================================================== */ .mhi-donate-cta { padding: 2.5rem 2rem; background: linear-gradient(135deg, var(--wp--preset--color--gold-dark), var(--wp--preset--color--gold-primary)); text-align: center; } .mhi-donate-cta-inner { max-width: 700px; margin: 0 auto; } .mhi-donate-cta h2 { color: var(--wp--preset--color--bg-primary); margin-bottom: 1rem; } .mhi-donate-cta p { color: var(--wp--preset--color--bg-primary); opacity: 0.9; font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; } .mhi-btn-dark { background: var(--wp--preset--color--bg-primary); color: var(--wp--preset--color--gold-primary); font-family: var(--wp--preset--font-family--ui); font-weight: 700; font-size: 1.05rem; padding: 0.85rem 2.5rem; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s; display: inline-block; } .mhi-btn-dark:hover { background: var(--wp--preset--color--bg-secondary); transform: translateY(-1px); } /* =================================================== 12. FOOTER =================================================== */ .mhi-footer { background: var(--wp--preset--color--bg-secondary); border-top: 2px solid var(--wp--preset--color--gold-primary); padding: 2rem 2rem 1.5rem; margin-top: 0; } .mhi-footer-inner { max-width: 1200px; margin: 0 auto; } .mhi-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 1.25rem; } .mhi-footer h4 { color: var(--wp--preset--color--gold-primary); font-family: var(--wp--preset--font-family--ui); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; } .mhi-footer-links { list-style: none; padding: 0; margin: 0; } .mhi-footer-links li { margin-bottom: 0.4rem; } .mhi-footer-links a { color: var(--wp--preset--color--text-secondary); text-decoration: none; font-size: 0.875rem; transition: color 0.2s; } .mhi-footer-links a:hover { color: var(--wp--preset--color--gold-primary); } .mhi-footer-contact p { color: var(--wp--preset--color--text-secondary); font-size: 0.875rem; line-height: 1.6; margin: 0; } .mhi-footer-contact a { color: var(--wp--preset--color--accent); text-decoration: none; } .mhi-footer-contact a:hover { color: var(--wp--preset--color--accent-hover); } .mhi-footer-badges { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; } .mhi-footer-badges img { height: auto; width: auto; max-width: 100%; } .mhi-footer-divider { border: none; border-top: 1px solid var(--wp--preset--color--border); margin: 1rem 0 0.75rem; } .mhi-copyright { color: var(--wp--preset--color--text-secondary); font-size: 0.8rem; text-align: center; opacity: 0.7; line-height: 1.6; } .mhi-copyright a { color: var(--wp--preset--color--accent); text-decoration: none; } /* =================================================== 13. FORMS — Contact Form 7 styling =================================================== */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 select { background: var(--wp--preset--color--bg-primary); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 0.75rem 1rem; color: var(--wp--preset--color--text-primary); font-family: var(--wp--preset--font-family--body); font-size: 1rem; width: 100%; transition: border-color 0.2s; } .wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--wp--preset--color--gold-primary); } .wpcf7 input[type="submit"] { background: var(--wp--preset--color--gold-primary); color: var(--wp--preset--color--bg-primary); border: none; border-radius: 6px; padding: 0.75rem 2rem; font-family: var(--wp--preset--font-family--ui); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.2s; } .wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--gold-light); } .wpcf7-response-output { border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.9rem; margin-top: 1rem; } /* =================================================== 14. PAGE-SPECIFIC =================================================== */ /* Health Resources — resource link cards */ .mhi-resource-card { background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 8px; padding: 1.25rem; transition: border-color 0.2s, transform 0.2s; } .mhi-resource-card:hover { border-color: var(--wp--preset--color--gold-primary); transform: translateY(-2px); } /* Books page */ .mhi-book-card { background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 12px; overflow: hidden; transition: border-color 0.3s, transform 0.3s; } .mhi-book-card:hover { border-color: var(--wp--preset--color--gold-primary); transform: translateY(-3px); } .mhi-book-card img { width: 100%; height: 250px; object-fit: contain; padding: 1rem; background: var(--wp--preset--color--bg-tertiary); } .mhi-book-card-body { padding: 1.25rem; } /* Health news snapshot cards */ .mhi-health-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .mhi-health-news-card { background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 8px; padding: 1.25rem; transition: border-color 0.2s; } .mhi-health-news-card:hover { border-color: var(--wp--preset--color--gold-primary); transform: translateY(-3px); } .mhi-health-news-card h4 { color: var(--wp--preset--color--text-primary); margin: 0 0 0.5rem; font-size: 1rem; } .mhi-health-news-card a { color: var(--wp--preset--color--accent); text-decoration: none; font-size: 0.85rem; font-weight: 600; } /* Card variant used as a clickable link (wrapping tag) */ a.mhi-health-news-card { color: inherit; overflow: hidden; padding: 0; } a.mhi-health-news-card:hover h4 { color: var(--wp--preset--color--gold-primary); } /* =================================================== 15. RESPONSIVE — mobile and tablet adjustments =================================================== */ @media (max-width: 1024px) { .mhi-founder-inner { grid-template-columns: 200px 1fr; gap: 2rem; } } @media (max-width: 768px) { .mhi-nav-toggle { display: flex; } .mhi-nav-list { display: none; position: absolute; top: 100%; right: 0; background: var(--wp--preset--color--bg-secondary); border: 1px solid var(--wp--preset--color--border); border-radius: 8px; padding: 0.5rem; flex-direction: column; min-width: 220px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .mhi-nav-list.open { display: flex; } .mhi-nav-submenu { position: static; display: block; box-shadow: none; border: none; padding: 0 0 0 1rem; background: transparent; } .mhi-header { padding: 0.5rem 1rem; } .mhi-logo { height: 40px; } .mhi-hero { padding: 5rem 1rem 4rem; min-height: 400px; } .mhi-hero-buttons { flex-direction: column; align-items: center; } .mhi-section { padding: 2rem 1rem; } .mhi-founder-inner { grid-template-columns: 1fr; text-align: center; } .mhi-founder-photo { max-width: 250px; margin: 0 auto; } .mhi-footer-grid { grid-template-columns: 1fr; } .mhi-footer { padding: 2rem 1rem 1.5rem; } .mhi-spotlights-grid { grid-template-columns: 1fr; } .mhi-news-grid { grid-template-columns: 1fr; } .mhi-values-grid { gap: 0.5rem; } .mhi-value-box { padding: 0.5rem 1rem; font-size: 0.8rem; } } @media (max-width: 375px) { .mhi-hero-title { font-size: 1.8rem; } .mhi-btn { padding: 0.6rem 1.5rem; font-size: 0.9rem; } }