radiance: new home page — WebGL orb hero, DG cube loader, white dropdown menu
Replaces the Crush landing page with a single-screen hero (no scroll): gradient sky, particle orb with corona, 'Welcome to dangrubb.net' title, top-left DG logo and a numbered menu. Raw WebGL (no three.js), self-hosted Instrument Sans + Geist Mono. ~10 KB of JS.
This commit is contained in:
dangrubbb
195
src/styles/radiance.css
Normal file
195
src/styles/radiance.css
Normal file
@ -0,0 +1,195 @@
|
||||
/* Radiance home page. Sizes are written in --u units (1u = 1px on a 1600px-wide design). */
|
||||
|
||||
:root {
|
||||
--ink: 9 11 17;
|
||||
--u: clamp(0.5px, 0.0625vw, 1.25px);
|
||||
--ease: cubic-bezier(0.33, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: #fff6f4;
|
||||
color: rgb(var(--ink) / 0.8);
|
||||
font-family: 'Instrument Sans', system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
ul { list-style: none; margin: 0; padding: 0; }
|
||||
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
|
||||
img { display: block; }
|
||||
.sr-only {
|
||||
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
|
||||
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
|
||||
}
|
||||
:focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero {
|
||||
position: fixed; inset: 0;
|
||||
background:
|
||||
radial-gradient(115% 80% at 50% 40%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
|
||||
linear-gradient(180deg,
|
||||
#fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 52%,
|
||||
#f7cfac 62%, #f3c19e 70%, #eeae8a 79%, #ee9972 87%, #eb8b63 94%, #ef815c 100%);
|
||||
}
|
||||
.hero__orb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
|
||||
|
||||
.hero__title {
|
||||
position: absolute; left: 0; right: 0; top: 24%;
|
||||
margin: 0; padding: 0 24px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: clamp(30px, 3.34vw, 64px);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
color: rgb(var(--ink) / 0.8);
|
||||
pointer-events: none;
|
||||
}
|
||||
.word { display: inline-block; white-space: nowrap; }
|
||||
.ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
|
||||
.ch > span {
|
||||
display: inline-block;
|
||||
transform: translateY(110%);
|
||||
transition: transform 0.9s var(--ease);
|
||||
}
|
||||
.is-ready .ch > span { transform: none; }
|
||||
|
||||
/* fallback when WebGL is unavailable: a flat glowing sphere */
|
||||
.no-webgl .hero::after {
|
||||
content: ''; position: absolute; left: 50%; top: 52%;
|
||||
width: 52.5vw; max-width: 1100px; aspect-ratio: 1; transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #fdd29a, #fb9a63 60%, #f06a4a);
|
||||
box-shadow: 0 0 0 2px rgb(255 235 230 / 0.8), 0 0 80px rgb(255 245 220 / 0.7);
|
||||
}
|
||||
|
||||
/* ---------- top bar ---------- */
|
||||
.bar { position: fixed; z-index: 10; inset: 0 0 auto 0; pointer-events: none; }
|
||||
.bar > * { pointer-events: auto; }
|
||||
.bar__logo {
|
||||
position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u));
|
||||
opacity: 0; transition: opacity 0.8s var(--ease) 0.2s;
|
||||
}
|
||||
.bar__logo img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); min-width: 48px; min-height: 48px; }
|
||||
.is-ready .bar__logo { opacity: 1; }
|
||||
|
||||
/* ---------- menu ---------- */
|
||||
.menu {
|
||||
position: absolute; right: calc(20 * var(--u)); top: calc(30 * var(--u));
|
||||
opacity: 0; transition: opacity 0.8s var(--ease) 0.3s;
|
||||
}
|
||||
.is-ready .menu { opacity: 1; }
|
||||
.menu__btn {
|
||||
position: relative; z-index: 2;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 40px; height: 40px;
|
||||
background: #fff;
|
||||
}
|
||||
@media (min-width: 768px) { .menu__btn { width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 40px; min-height: 40px; } }
|
||||
.menu__icon { position: absolute; transition: opacity 0.25s, transform 0.4s var(--ease); }
|
||||
.menu__icon--close { opacity: 0; transform: rotate(-45deg); }
|
||||
.is-open .menu__icon--open { opacity: 0; transform: rotate(45deg); }
|
||||
.is-open .menu__icon--close { opacity: 1; transform: none; }
|
||||
|
||||
.menu__panel {
|
||||
position: absolute; top: 0; right: 0; z-index: 1;
|
||||
background: #fff;
|
||||
width: max-content; max-width: calc(100vw - 24px);
|
||||
padding: calc(50 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
|
||||
clip-path: inset(0 0 100% 0);
|
||||
visibility: hidden;
|
||||
transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
|
||||
}
|
||||
.is-open .menu__panel { clip-path: inset(0); visibility: visible; transition: clip-path 0.5s var(--ease); }
|
||||
@media (max-width: 767px) { .menu__panel { width: calc(100vw - 24px); padding: 64px 16px 16px; } }
|
||||
|
||||
.menu__list li { border-bottom: 1px solid rgb(var(--ink) / 0.15); }
|
||||
.menu__list a {
|
||||
display: flex; align-items: baseline;
|
||||
padding: calc(6.5 * var(--u)) calc(60 * var(--u)) calc(6.5 * var(--u)) 0;
|
||||
font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.2; white-space: nowrap;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.menu__num {
|
||||
margin-right: calc(16 * var(--u));
|
||||
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
|
||||
font-size: calc(14 * var(--u)); text-transform: uppercase; letter-spacing: 0.02em;
|
||||
}
|
||||
.menu__list:hover a:not(:hover), .menu__list:focus-within a:not(:focus-visible):not(:hover) { opacity: 0.45; }
|
||||
.menu__list li, .menu__links { transform: translateY(8px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s; }
|
||||
.is-open .menu__list li, .is-open .menu__links { transform: none; opacity: 1; }
|
||||
.is-open .menu__list li:nth-child(1) { transition-delay: 0.10s; }
|
||||
.is-open .menu__list li:nth-child(2) { transition-delay: 0.14s; }
|
||||
.is-open .menu__list li:nth-child(3) { transition-delay: 0.18s; }
|
||||
.is-open .menu__list li:nth-child(4) { transition-delay: 0.22s; }
|
||||
.is-open .menu__list li:nth-child(5) { transition-delay: 0.26s; }
|
||||
.is-open .menu__links { transition-delay: 0.32s; }
|
||||
|
||||
.menu__links { display: flex; gap: calc(24 * var(--u)); padding-top: calc(39 * var(--u)); }
|
||||
.menu__link {
|
||||
position: relative; display: inline-block; overflow: hidden;
|
||||
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
|
||||
font-size: calc(14 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
|
||||
}
|
||||
.menu__link::after {
|
||||
content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
|
||||
background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
|
||||
}
|
||||
.menu__link:hover::after, .menu__link:focus-visible::after { transform: none; }
|
||||
@media (max-width: 767px) {
|
||||
.menu__list a { padding: 10px 40px 10px 0; font-size: 18px; }
|
||||
.menu__num { font-size: 12px; margin-right: 14px; }
|
||||
.menu__links { gap: 20px; padding-top: 28px; }
|
||||
.menu__link { font-size: 12px; }
|
||||
.bar__logo { left: 12px; top: 12px; }
|
||||
.bar__logo img { width: 44px; height: 44px; }
|
||||
.menu { right: 12px; top: 12px; }
|
||||
}
|
||||
|
||||
/* ---------- loader ---------- */
|
||||
.loader {
|
||||
position: fixed; inset: 0; z-index: 1000;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 32px;
|
||||
background: #fff6f4;
|
||||
transition: opacity 0.7s var(--ease) 0.1s, visibility 0s 0.8s;
|
||||
}
|
||||
.is-ready .loader { opacity: 0; visibility: hidden; }
|
||||
.loader__stage { flex-grow: 1; display: flex; align-items: center; }
|
||||
.scene { margin: 80px; width: 140px; height: 140px; perspective: 400px; transform: translateZ(0); }
|
||||
.cube {
|
||||
position: relative; width: 140px; height: 140px;
|
||||
transform-style: preserve-3d; transform: translateZ(-100px);
|
||||
animation: spin 3s var(--ease) infinite;
|
||||
}
|
||||
.cube__face {
|
||||
position: absolute; width: 140px; height: 140px;
|
||||
background: rgb(var(--ink)); border: 2px solid rgb(var(--ink));
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.cube__face img { width: 100%; height: 100%; padding: 14px; }
|
||||
.cube__face--front { transform: rotateY(0) translateZ(70px); }
|
||||
.cube__face--right { transform: rotateY(90deg) translateZ(70px); }
|
||||
.cube__face--back { transform: rotateY(180deg) translateZ(70px); }
|
||||
.cube__face--left { transform: rotateY(-90deg) translateZ(70px); }
|
||||
.cube__face--top { transform: rotateX(90deg) translateZ(70px); }
|
||||
.cube__face--bottom { transform: rotateX(-90deg) translateZ(70px); }
|
||||
.is-ready .cube { animation: none; }
|
||||
@keyframes spin {
|
||||
0% { transform: translateZ(-100px) rotateY(0); }
|
||||
40%, 50% { transform: translateZ(-100px) rotateY(-180deg); }
|
||||
90%, 100% { transform: translateZ(-100px) rotateY(-360deg); }
|
||||
}
|
||||
.loader__count {
|
||||
margin: 0; flex-shrink: 0;
|
||||
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
|
||||
font-size: 16px; line-height: 1; text-transform: uppercase; color: rgb(var(--ink) / 0.8);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cube { animation: none; }
|
||||
.ch > span { transform: none; transition: none; }
|
||||
* { transition-duration: 0.01s !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user