The "PPG Frame" (Glass Castle)

These layouts focus on your 9px rounded corners, the Penguins Yellow (#FCB514), and keeping text readable over any image.

1. The "PPG Frame" (Glass Castle)

• The Shape: A standard square card with your 9px rounded corners.

• The Feature: Over the project image, use a semi-transparent black overlay (about 40% opacity).

• The "Pittsburgh" Touch: Instead of a simple border, the top border of the card has a jagged "Glass Spire" silhouette (like the PPG building) cut out or layered in Gold.

• Readability: Title and Date are placed in the center using a bold white font with a slight "drop shadow" to pop against the image.

2. The "Diamond Cut" Diagonal

• The Shape: Square card.

• The Feature: A sharp Gold diagonal line cuts across the bottom-left corner.

• The "Pittsburgh" Touch: This diagonal line mimics the steep angle of the Duquesne Incline.

• Readability: The "Project Title" is angled along that diagonal line in Black, while the image sits in the remaining 80% of the card. The Date sits in the bottom-right in a small Gold box.

3. The "Three Rivers" Confluence

• The Shape: Square card with a thick 3px Gold border.

• The Feature: At the very bottom, three Gold lines merge into one (like the Point).

• The "Pittsburgh" Touch: The title sits inside the merging lines area.

• Readability: Use a Gold gradient block at the bottom (transitioning from 0% to 100% black). This "fade to black" ensures that white text is always 100% readable regardless of how bright the project image is.

4. The "Kennywood Racer"

• The Shape: Square card.

• The Feature: A 9px rounded "floating" frame. The project image doesn't fill the whole card; it sits inside a slightly smaller square.

• The "Pittsburgh" Touch: A Gold silhouette of the Kennywood Coaster track loops around the image frame, acting as a decorative border.

• Readability: The Title is placed in the "negative space" between the coaster loops at the bottom.

💡 Pro-Tip for Readability

Since you can't control the image colors, the "Pittsburgh" way to fix readability is to use The Steel Curtain Effect:

Apply a Linear Gradient to the bottom of your image container: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%) This makes the bottom half of any image dark enough for white or gold text to shine, without ruining the whole picture.

Would you like me to provide the CSS code for the "Steel Curtain" gradient and the 9px rounded corners?