1. Change the main section headers from plain black to AYSO blue:
Example:
What is AYSO Alliance?
Use this for:
- What is AYSO Alliance?
- Alliance Compared to EXTRA
- Player Eligibility
- Program Structure
- Program Expectations
- Starting an Alliance Program
- Coach Selection and Requirements
- Primary Program Giveback
---
2. Upgrade the “Important” callout box:
Replace current:
With:
This makes it feel less like a boring note box.
---
3. Upgrade the yellow “Local Procedures May Vary” box:
Use:
Much cleaner.
---
4. Upgrade the Resource Clipboard header:
Replace:
background:#0054a6;
With:
background:linear-gradient(to right,#0054a6,#2b7de9);
This adds way more life.
---
5. Add color to comparison section borders:
AYSO EXTRA box:
border-top:5px solid #0054a6;
AYSO Alliance box:
border-top:5px solid #c8102e;
This makes the comparison section MUCH stronger visually.
---
6. Add slight shadows to comparison boxes:
box-shadow:0 4px 10px rgba(0,0,0,0.05);
This gives depth without looking flashy.
---
7. Make the page title stronger:
For Alliance at a Glance:
font-size:40px;
font-weight:700;
instead of smaller text.
---
8. Add spacing between major sections:
Use:
margin:30px 0;
instead of tighter spacing.
This makes the page breathe.
---
9. Make the divider line stronger:
Replace:
width:52px; height:4px;
With:
width:60px; height:5px;
Looks much more intentional.
---
10. Keep the right side ONLY resources
Do not add:
- Need Help
- Quick Notes
- extra yellow boxes
Just the clipboard.
