diff --git a/www/banner.png b/www/banner.png deleted file mode 100644 index 23c330b..0000000 Binary files a/www/banner.png and /dev/null differ diff --git a/www/index.html b/www/index.html index e6562fb..aefe784 100644 --- a/www/index.html +++ b/www/index.html @@ -1,427 +1,17 @@ - - -WA2000 - - - + + + WA2000 + - - -
- - - - - - - - - - - - - - - - - - - - - - - - -
-

waff waff!

-
-

tiny text!!!

-

wuff

-
-
-
-

waff waff!

-
-

tiny text!!!

-

wuff

-
-
-

waff waff!

-
-

tiny text!!!

-

wuff

-
- - - - \ No newline at end of file + + diff --git a/www/style.css b/www/style.css index 49a852a..d465a46 100644 --- a/www/style.css +++ b/www/style.css @@ -1,237 +1,47 @@ -* { 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; -} +* { margin: 0; padding: 0; box-sizing: border-box; } -.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 */ -} + body { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: #0a0e1a url('background.png') center/cover no-repeat; + } -.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(520px, 88%); + padding: 52px; + border-radius: 24px; + text-align: center; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.14); + backdrop-filter: blur(32px) saturate(1.4); + box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45); + } -.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 */ -} + h1 { + font-size: clamp(36px, 6vw, 52px); + font-weight: 300; + line-height: 1.1; + color: rgba(255, 255, 255, 0.92); + } -/* ── 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 */ -} + h1 em { + font-style: italic; + color: rgba(180, 210, 255, 0.85); + } -/* ── 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 */ -} + .divider { + width: 40px; + height: 0.5px; + background: rgba(255, 255, 255, 0.2); + margin: 22px auto; + } -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); -} \ No newline at end of file + p { + font-size: 15px; + font-weight: 300; + line-height: 1.75; + color: rgba(255, 255, 255, 0.52); + }