diff --git a/src/styles/current-members.scss b/src/styles/current-members.scss index 2da0bba..761e51f 100644 --- a/src/styles/current-members.scss +++ b/src/styles/current-members.scss @@ -3,7 +3,9 @@ .current-members-section { padding-block: 8rem; padding-inline: 2.81rem; - max-width: 1400px; + /* Removed the strict max-width: 1400px to allow it to expand more */ + width: 100%; + max-width: 1800px; /* Increased the limit so it uses more of wider screens */ margin: 0 auto; min-height: 100vh; @@ -13,23 +15,26 @@ font-size: 4.4374rem; font-weight: 900; margin-bottom: 4rem; + display: none; /* Hiding the H1 since 'President' acts as the top header now */ } /* Centered President Block */ .executive-top { text-align: center; - margin-bottom: 5rem; - padding-bottom: 3rem; + margin-bottom: 4rem; /* Slightly reduced margin */ + padding-bottom: 2rem; border-bottom: 2px solid rgba(0, 0, 0, 0.1); h2 { - font-size: 2rem; - color: $secondary; - margin-bottom: 0.5rem; + font-size: 1.5rem; /* Reduced from 2rem to be less dominant */ + color: $primary; /* Changed to primary color to match the theme */ + margin-bottom: 0.25rem; + text-transform: uppercase; + letter-spacing: 0.05rem; } h3 { - font-size: 2.5rem; + font-size: 2rem; /* Reduced from 2.5rem */ font-weight: 700; color: $dark; } @@ -39,7 +44,7 @@ .committees-grid { display: grid; grid-template-columns: repeat(7, 1fr); - gap: 1.5rem; + gap: 1.5rem; /* The gap stays the same, but the columns will be naturally wider now */ align-items: start; .committee-column { @@ -47,6 +52,8 @@ padding: 1.5rem 1rem; border-radius: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); + /* Added min-height to keep the boxes looking uniform even if some have fewer members */ + min-height: 100%; .committee-head { text-align: center; @@ -55,14 +62,17 @@ border-bottom: 1px solid rgba(0, 0, 0, 0.1); h4 { - font-size: 1.25rem; + font-size: 0.9rem; /* Reduced title size */ color: $primary; - margin-bottom: 0.25rem; + margin-bottom: 0.5rem; + text-transform: uppercase; } strong { - font-size: 1.1rem; + display: block; /* Ensures the name sits cleanly on its own line */ + font-size: 1.25rem; /* Increased name size to stand out more than the title */ color: $dark; + line-height: 1.2; } } @@ -84,7 +94,12 @@ /* --- Responsive Adjustments --- */ -/* Laptops & Tablets: Shrink to 4 columns, then 3 */ +@media screen and (max-width: 1400px) { + .current-members-section { + padding-inline: 1.5rem; /* Reduce side padding slightly on medium screens */ + } +} + @media screen and (max-width: 1200px) { .current-members-section { .committees-grid { @@ -102,14 +117,14 @@ } } -/* Mobile Devices: Shrink to 2 columns, then 1 */ @media screen and (max-width: 768px) { .current-members-section { padding-block: 4rem; - padding-inline: 1.5rem; + padding-inline: 1rem; - h1 { - font-size: 3rem; + .executive-top { + h2 { font-size: 1.25rem; } + h3 { font-size: 1.75rem; } } .committees-grid { @@ -124,4 +139,4 @@ grid-template-columns: repeat(1, 1fr); } } -} +} \ No newline at end of file