Website Enhancements Report

1. 3D Hover Flip Card

Applied Pages: Explore.html, Family.html, Genus.html, Species.html

This code flips the card over when you hover your mouse over it. The outer perspective property adds realistic depth, while transform-style: preserve-3d lets the front and back faces rotate inside a true three-dimensional space. Hovering triggers a 180-degree Y-axis rotation on the inner container. Combined with backface-visibility: hidden, the back side reveals itself naturally as the front rotates out of view.

.contributor-flip-card,
.species-flip-card,
.family-flip-card,
.genus-flip-card {
    width: 100%;
    height: 560px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.flip-card-front {
    background: #FFFFFF;
}

.flip-card-back {
    background: #FFFFFF;
    padding: 30px;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

2. Fixed Glassmorphism Navbar

Applied Pages: Site-wide (represented by index.html)

Jump to index.html

This keeps the top navigation bar stuck to the top of the viewport during scrolling. Setting position: fixed locks its location, while a semi-transparent white background paired with backdrop-filter: blur(10px) creates a subtle frosted-glass effect that lets underlying page elements bleed through smoothly as you scroll.

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

3. Mobile Responsive & Hamburger Menu

Applied Pages: Site-wide (represented by index.html)

Jump to index.html

When the screen width drops below 700 pixels, this media query activates automatically. It shrinks the container height, displays the hidden hamburger button, and hides the wide horizontal menu bar. Tapping the hamburger icon toggles the hidden checkbox, dropping down the navigation menu right beneath the header with full width and a soft drop shadow.

@media (max-width: 700px) {
    .nav-container {
        min-height: 65px;
        padding: 12px 0;
        flex-direction: row;
    }
    .hamburger {
        display: block;
    }
    .navbar nav {
        display: none;
    }
    #menu-toggle:checked ~ nav {
        display: block;
    }
    .navbar nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
}

4. Enhanced Form Input and Focus

Applied Pages: Contribution.html, Enquiry.html

Jump to Contribution.html

Clicking into any input box, dropdown, or text area changes its border to the theme's foliage green and casts a light green glow around it. This instantly highlights whichever field is active so users always know where they are typing.

.contribution-form input:focus,
.contribution-form select:focus,
.contribution-form textarea:focus,
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
    outline: none;
    border-color: #2E7D32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.10);
}