Thoughtful details.
A better way to explore.

What it does and who it helps

Photo grids regroup from asymmetric layouts to single columns. The floating glass menu becomes a sideways-scrolling capsule on phones, with the Profiles links joining the row. Floated sidebars stack, and wide tables scroll within their own frame. A reader can move from a desktop reference session to a phone without losing content.

How it works

Fluid clamp() type and spacing, intrinsic CSS Grid columns (auto-fill with minmax()) and Flexbox adapt the page without a breakpoint for every component. Four coordinated media queries (tablet, phone menu, phone and small phone) then restructure the menu, heroes, forms, asides and tile grids. display: contents lets the drop-down's list items join the phone menu row.

Why it extends the basics

This combines coordinated navigation, form, image, table and sidebar behaviour with reduced-motion handling; it goes beyond a single fluid width.

Key code

/* Species grid: 4 to 1 columns with no media query */
.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}

/* Phones: the Profiles links join the scrolling menu row */
@media (max-width: 52em) {
    .dropdown-menu { display: contents; }
}

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Responsive species collection

What it does and who it helps

The Profiles menu reveals each team member's page on hover or when keyboard focus enters the group. The list opens as a pane of frosted glass that springs from its top edge. Keyboard users can Tab through every link, and a visible ring marks the focused target. On small screens the links sit directly in the menu row.

How it works

The parent item uses position: relative. Its list combines visibility, opacity, translate and scale with a spring-like cubic-bezier(), and :hover and :focus-within keep it open while the pointer or focus is inside. The menu's own glass is drawn on a pseudo-element so the drop-down can still blur the page behind it.

Why it extends the basics

A complete keyboard path, a deliberate responsive fallback and restrained transitions extend the basic linked menu. No script is needed.

Key code

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    visibility: visible;
    opacity: 1;
    translate: -50% 0;
    scale: 1;
}

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Profiles drop-down menu

What it does and who it helps

Choose one family to show its four species, or All species to restore sixteen. The selected pill, its colour and the result count change together. Hidden cards leave the layout and keyboard order.

How it works

A native radio group supplies checked state and arrow-key behaviour. Explicit #family-name:checked general-sibling rules hide cards from other families and reveal the matching status message. Adjacent label selectors show selection and keyboard focus; CSS Grid arranges the remaining cards.

Why it extends the basics

This creates meaningful state and content filtering rather than a cosmetic hover effect. A short entrance animation is disabled for reduced-motion users.

Key code

/* Hide every card that is not in the chosen family */
#family-lauraceae:checked ~ .species-grid .plant-card:not(.lauraceae) {
    display: none;
}

/* The chosen family label becomes the filled pill */
.filter-input:checked + label {
    background-color: var(--btn-bg);
    color: var(--btn-ink);
}

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Try the species filter

What it does and who it helps

Required fields, email formatting, name patterns and exact postcode length are checked by the browser. Labels and helpers explain the expected format. Error colours and messages appear after interaction rather than on first arrival, and valid fields receive a quiet confirmation tick.

How it works

required, maxlength, minlength, pattern and appropriate input types implement the constraints. :focus styles active editing; :user-invalid and :user-valid add post-interaction feedback. Native method="dialog" submission closes a non-modal dialog only after validation and reveals an honest local completion panel via a sibling selector.

Why it extends the basics

Several constraints, accessible guidance, non-colour error text and a privacy-preserving completion state work together. Neither persistence nor authentication is simulated.

Key code

<input id="postcode" type="text" pattern="[0-9]{5}"
       minlength="5" maxlength="5" required>

.form-group input:user-invalid ~ .field-error { display: block; }
.form-dialog[open] ~ .form-receipt { display: none; }

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Test registration validation

What it does and who it helps

The menu, buttons, photo labels and form sheets are translucent panes that let the rainforest show through, in the manner of Apple's Liquid Glass. Buttons turn to glass under the pointer, with a light sweep across their surface. The home page title is filled with a frosted copy of the photograph behind it. The site follows the visitor's light or dark system setting, and visitors who ask for less transparency, more contrast or less motion get solid, still surfaces.

How it works

backdrop-filter: blur() saturate() frosts what lies behind each pane; inset box-shadow layers draw the bright rim of the glass. Large sheets sit on pre-blurred photographs, so they look frosted without costly live blur. background-clip: text fills the title with a fixed, frosted image. Custom properties hold every colour, and prefers-color-scheme, prefers-reduced-transparency, prefers-contrast and prefers-reduced-motion redefine them.

Why it extends the basics

This is a web approximation (Apple publishes no CSS for Liquid Glass) that combines compositing, typography and four user-preference media features, with an accessible fallback for each effect.

Key code

/* The menu's glass: blur, rim highlight, tinted shadow */
.header-bar::before {
    background-color: var(--glass);
    box-shadow: var(--glass-rim), var(--glass-lift);
    backdrop-filter: var(--glass-blur);
}

/* Less transparency requested: solid instead of glass */
@media (prefers-reduced-transparency: reduce) {
    .header-bar::before {
        background-color: var(--surface);
        backdrop-filter: none;
    }
}

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

See the glass title and menu