wa2k.com/www/style.css

* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #0a0e1a url('background.png') center/cover no-repeat;
    overflow-x: hidden;
}

.banner {
    width: 99%;
    max-height: 280px;
    overflow: hidden;
    margin: 5px 5px 10px 5px; /* 5px on top/left/right, 10px on bottom */
    border-radius: 35px; /* Rounded corners */
}

.banner img {
    width: 100%; /* Stretch image to fill the banner width */
    height: 100%; /* Fill the banner height */
    object-fit: cover; /* Crop and center the image rather than squishing it */
    object-position: center top; /* Anchor to the top so the most important part of the image stays visible */
    display: block; /* Remove the default inline gap below images */
}

.card {
    width: min(880px, 88%); /* Cap width at 880px, but shrink to 88% of viewport on small screens */
    height: 540px; /* Fixed height */
    padding: 40px; /* Inner spacing on all sides */
    border-radius: 50px; /* Rounded corners */
    text-align: center; /* Center all text content */
    background: rgba(255, 255, 255, 0.08); /* Very subtle white tint — more transparent than before so the background breathes through */
    border: 2px solid rgba(255, 255, 255, 1); /* Slightly brighter border for a crisper glass edge */
    backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Firefox fallback — blur, colour boost, and slight brightness lift; Chrome overrides this via JS with the SVG refraction filter */
    -webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Webkit prefix for Safari compatibility */
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35), /* Large soft drop shadow for depth/lift */
        0 0 0 1px rgba(255, 255, 255, 0.08); /* Hairline outer glow ring */
    position: relative; /* Required so ::before/::after pseudo-elements position relative to the card */
    overflow: hidden; /* Clip pseudo-elements to the card's rounded corners */
}

/* ── Main specular: top-left corner catch ── */
.card::before {
    content: ''; /* Required to render a pseudo-element with no text */
    position: absolute; /* Layer it on top of the card without affecting layout */
    inset: 0; /* Stretch to fill all four edges of the card */
    border-radius: inherit; /* Match the card's rounded corners */
    background:
        radial-gradient(
            ellipse 60% 30% at 10% -5%, /* Tighter ellipse originating just above the top-left corner */
            rgba(255, 255, 255, 0.28) 0%, /* Bright white at the light source center */
            transparent 55% /* Fade out before reaching the middle of the card */
        ),
        linear-gradient(
            128deg, /* Diagonal direction: top-left → bottom-right */
            rgba(255, 255, 255, 0.13) 0%, /* Broad glancing sheen starting at the top-left corner */
            rgba(255, 255, 255, 0.04) 30%, /* Dim mid-point to keep the fade gradual */
            transparent 55% /* Fades out before the center */
        );
    pointer-events: none; /* Prevent this overlay from blocking mouse interaction */
}

/* ── Glass rim: inset edge highlights ── */
.card::after {
    content: ''; /* Required to render the pseudo-element */
    position: absolute; /* Layer over the card without shifting layout */
    inset: 0; /* Fill the card edge to edge */
    border-radius: inherit; /* Match card rounding */
    background: transparent; /* No fill — only the inset shadow matters here */
    border: 1px solid transparent; /* Placeholder border so box-shadow inset renders correctly on all sides */
    border-image: none; /* Ensure no gradient border overrides the transparent border */
    box-shadow:
        inset 1px 1px 0 rgba(218, 218, 218, 0.55), /* Bright top and left inner edge — simulates light hitting the glass rim */
        inset -1px -1px 0 rgba(0, 0, 0, 0.12); /* Darker bottom and right inner edge — simulates shadow on the far side */
    pointer-events: none; /* Let clicks pass through to card content */
}

h1 {
    font-size: clamp(36px, 6vw, 52px); /* Fluid size: min 36px, scales with viewport, max 52px */
    font-weight: 300; /* Light weight for an elegant look */
    line-height: 1.1; /* Tight leading for large display text */
    color: rgba(255, 255, 255, 0.92); /* Near-white, slightly transparent */
}

h1 em {
    font-style: italic; /* Standard italic for emphasis */
    color: rgba(180, 210, 255, 0.85); /* Cool blue tint for italicised words */
}

.divider {
    width: 40px; /* Short horizontal rule */
    height: 0.5px; /* Hairline thickness */
    background: rgba(255, 255, 255, 0.2); /* Faint white line */
    margin: 22px auto; /* Vertical spacing + horizontal centering */
}

p {
    font-size: 15px;
    font-weight: 300; /* Light weight to match the heading style */
    line-height: 1.75; /* Generous leading for readability */
    color: rgba(255, 255, 255, 0.52); /* Dimmed white — secondary text hierarchy */
}

/* ── Nav pill wrapper — sits below banner, pins to top on scroll ── */
.nav-wrap {
    align-self: stretch; /* Override body align-items:center — makes this child full width */
    display: flex;
    justify-content: center; /* Centre the pill inside the full-width container */
    padding: 8px 0;
}

.nav-wrap.pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 8px 0;
    display: flex;
    justify-content: center;
}

.nav-placeholder {
    display: none;
    align-self: stretch;
    height: 60px;
}

.nav-placeholder.visible {
    display: block;
}

/* ── The pill itself ── */
.nav-pill {
    width: 160px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 1px 1px 0 rgba(255, 255, 255, 0.45),
        inset -1px -1px 0 rgba(0, 0, 0, 0.10);
    overflow: hidden;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Pill expands and corners soften when open ── */
.nav-pill.open {
    border-radius: 22px;
    width: 200px;
}
 
/* ── The always-visible top bar: logo + chevron ── */
.nav-pill-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 18px;
    cursor: pointer;
    user-select: none;
}
 
.nav-logo {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.06em;
}
 
/* ── Chevron rotates 180° when open ── */
.nav-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
 
.nav-pill.open .nav-chevron {
    transform: rotate(180deg);
}
 
/* ── Dropdown — hidden by default, slides down when open ── */
.nav-dropdown {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* Opening: wait for width to finish first, then drop down */
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s,
                opacity 0.25s ease 0.22s;
}
 
.nav-pill.open .nav-dropdown {
    max-height: 300px;
    opacity: 1;
}
 
/* Closing: dropdown collapses immediately (no delay), width waits after */
.nav-pill:not(.open) .nav-dropdown {
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease;
}
 
/* Width/radius collapse waits for dropdown to finish */
.nav-pill:not(.open) {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
 
.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 14px;
}
 
.nav-link {
    display: block;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    transition: color 0.15s ease,
                background 0.15s ease;
}
 
.nav-link:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.06);
}