$1,000+

Shared Plaque

Show your support for our mission and join the ranks of our esteemed iLUMINARIES.

$2,500+

Plaque on Wall

Take your place in history with a dedicated plaque at the entrance of the exhibit, recognizing your generous support and lasting impact.

$5,000+

Quote on Plaque

Shine brighter with an illuminated plaque that includes a quote of your selection, symbolizing your exceptional commitment to our mission.

$10,000+

Quote + QR Code

Leave a lasting legacy by adding a personalized QR code to your illuminated plaque, linking to a video or destination of your choice.

$25,000+

Quote + QR Code + 4 Tickets to BYTE26

Elevate your impact with an illuminated plaque including a quote, personalized QR code, plus four tickets to BYTE26.

/* ===== Base Layout (Desktop) ===== */ .donation-section { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 20px; width: 100%; max-width: 1200px; margin: 40px auto; font-family: 'Roboto Flex', sans-serif; padding: 0 20px; } /* Each donation box */ .tier-box { padding: 25px 20px; text-align: center; background: rgba(0, 0, 0, 0.75); transition: all 0.4s ease; border: 3px solid; color: #fff; box-shadow: 0 0 10px transparent; overflow: hidden; position: relative; } /* Typography */ .tier-box h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 10px; } .tier-box h3 { font-size: 0.9rem; font-weight: 500; margin-bottom: 10px; text-transform: uppercase; } /* Paragraph hidden by default */ .tier-box p { opacity: 0; max-height: 0; overflow: hidden; transition: all 0.5s ease; font-size: 0.85rem; font-weight: 300; color: #ddd !important; line-height: 1.6; margin-top: 10px; } /* Show paragraph on hover */ .tier-box:hover p { opacity: 1; max-height: 200px; margin-top: 20px; } /* Hover effects */ .tier-box:hover { transform: translateY(-6px); } /* ===== Color Variations (Borders + Headings) ===== */ /* Green Tier */ .tier-green { border-color: #5FFF28; } .tier-green h2, .tier-green h3 { color: #5FFF28 !important; } .tier-green:hover { box-shadow: 0 0 10px #5FFF28, 0 0 20px #5FFF28, 0 0 20px inset #5FFF28; } /* Gold Tier */ .tier-gold { border-color: #F69C31; } .tier-gold h2, .tier-gold h3 { color: #F69C31 !important; } .tier-gold:hover { box-shadow: 0 0 10px #F69C31, 0 0 20px #F69C31, 0 0 20px inset #F69C31; } /* Cyan Tier */ .tier-cyan { border-color: #FEFEFE; } .tier-cyan h2, .tier-cyan h3 { color: #FEFEFE !important; } .tier-cyan:hover { box-shadow: 0 0 10px #FEFEFE, 0 0 20px #FEFEFE, 0 0 20px inset #FEFEFE; } /* Red Tier */ .tier-red { border-color: #F11B36; } .tier-red h2, .tier-red h3 { color: #F11B36 !important; } .tier-red:hover { box-shadow: 0 0 10px #F11B36, 0 0 20px #F11B36, 0 0 20px inset #F11B36; } /* Blue Tier */ .tier-blue { border-color: #2391FE; } .tier-blue h2, .tier-blue h3 { color: #2391FE !important; } .tier-blue:hover { box-shadow: 0 0 10px #2391FE, 0 0 20px #2391FE, 0 0 20px inset #2391FE; } /* ===== Mobile Layout (2-2-1) ===== */ @media (max-width: 768px) { .donation-section { grid-template-columns: repeat(2, 1fr); } .tier-box:nth-child(5) { grid-column: 1 / 3; justify-self: center; width: 80%; } } /* ===== Small Mobile (Single Column) ===== */ @media (max-width: 480px) { .donation-section { grid-template-columns: 1fr; } .tier-box:nth-child(5) { width: 100%; grid-column: auto; } }