/* ========================================================================== FLAT-DESIGN HARD SHADOW BUTTONS & CARDS (2027 PROOF) ========================================================================== */ /* Algemene Transitie voor Knoppen */ .btn-flat { transition: all 0.15s ease-in-out !important; } /* KNOP A: Primary Accent Orange */ .btn-accent { background-color: #DC5A14 !important; color: #E5D9C2 !important; border: 3px solid #3A241A !important; box-shadow: 4px 4px 0px 0px #3A241A !important; } .btn-accent:hover { background-color: #D87545 !important; box-shadow: 5px 5px 0px 0px #3A241A !important; transform: translate(-1px, -1px); } .btn-accent:active { background-color: #A64D22 !important; box-shadow: 2px 2px 0px 0px #3A241A !important; transform: translate(2px, 2px); } /* KNOP B: Secondary Green */ .btn-secondary-green { background-color: #76782F !important; color: #E5D9C2 !important; border: 3px solid #3A241A !important; box-shadow: 4px 4px 0px 0px #3A241A !important; } Pagina 2 van 3 .btn-secondary-green:hover { background-color: #8C9250 !important; box-shadow: 5px 5px 0px 0px #3A241A !important; transform: translate(-1px, -1px); } .btn-secondary-green:active { background-color: #5D6230 !important; box-shadow: 2px 2px 0px 0px #3A241A !important; transform: translate(2px, 2px); } /* KNOP C: Informational Button (Light Mode - Voor de Body) */ .btn-info-light { background-color: #E5D9C2 !important; color: #3A241A !important; border: 3px solid #3A241A !important; box-shadow: 4px 4px 0px 0px #3A241A !important; } .btn-info-light:hover { background-color: #D8CCB4 !important; box-shadow: 5px 5px 0px 0px #3A241A !important; transform: translate(-1px, -1px); } .btn-info-light:active { background-color: #CDBFA7 !important; box-shadow: 2px 2px 0px 0px #3A241A !important; transform: translate(2px, 2px); } /* KNOP C: Informational Button (Dark Mode - Voor Header / Footer) */ .btn-info-dark { background-color: #3A241A !important; color: #E5D9C2 !important; border: 3px solid #E5D9C2 !important; box-shadow: 4px 4px 0px 0px #E5D9C2 !important; } .btn-info-dark:hover { background-color: #4A2F22 !important; box-shadow: 5px 5px 0px 0px #E5D9C2 !important; transform: translate(-1px, -1px); } .btn-info-dark:active { background-color: #24140F !important; box-shadow: 2px 2px 0px 0px #E5D9C2 !important; transform: translate(2px, 2px); }