diff --git a/src/http/landing/assets.zig b/src/http/landing/assets.zig index 80ce754..ed1f6d9 100644 --- a/src/http/landing/assets.zig +++ b/src/http/landing/assets.zig @@ -34,17 +34,47 @@ pub const css = \\ color-scheme: light; \\} \\* { box-sizing: border-box; } - \\html { min-height: 100%; background: var(--bg); } + \\html { min-height: 100%; background: var(--bg); overflow-x: hidden; } \\body { - \\ margin: 0; min-height: 100vh; background: - \\ radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--signal-a, var(--green)) 15%, transparent), transparent 35%), - \\ radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--signal-b, var(--accent)) 13%, transparent), transparent 32%), + \\ position: relative; margin: 0; min-height: 100vh; overflow-x: hidden; background: + \\ radial-gradient(ellipse at 8% 16%, color-mix(in srgb, var(--signal-c, var(--pink)) 18%, transparent), transparent 34%), + \\ radial-gradient(ellipse at 88% 6%, color-mix(in srgb, var(--signal-b, var(--accent)) 16%, transparent), transparent 31%), + \\ linear-gradient(105deg, color-mix(in srgb, var(--signal-a, var(--green)) 10%, transparent), transparent 28%, color-mix(in srgb, var(--signal-c, var(--pink)) 8%, transparent) 72%, transparent), \\ var(--bg); color: var(--text); \\ font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; \\} + \\body::before, body::after { + \\ content: ""; position: fixed; inset: auto; pointer-events: none; z-index: 0; + \\} + \\body::before { + \\ width: min(88vw, 760px); height: min(58vh, 520px); left: max(-180px, -12vw); top: -82px; + \\ border-radius: 46% 54% 54% 46% / 31% 35% 65% 69%; + \\ background: + \\ linear-gradient(108deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 19%, transparent 31%), + \\ radial-gradient(ellipse at 34% 42%, color-mix(in srgb, var(--signal-b, var(--accent)) 22%, transparent), transparent 58%), + \\ color-mix(in srgb, var(--panel) 40%, transparent); + \\ filter: blur(.2px) saturate(1.18); opacity: .72; + \\ transform: rotate(-8deg) skewX(-13deg); + \\ box-shadow: inset -48px 0 80px rgba(255,255,255,.035), inset 42px 8px 110px color-mix(in srgb, var(--signal-c, var(--pink)) 11%, transparent); + \\} + \\body::after { + \\ width: 48vw; height: 150vh; right: -29vw; top: -24vh; transform: rotate(15deg); + \\ background: + \\ linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent 18%), + \\ linear-gradient(90deg, transparent 44%, color-mix(in srgb, var(--signal-a, var(--green)) 14%, transparent), transparent 62%); + \\ filter: blur(18px); opacity: .82; + \\} \\a { color: inherit; } \\a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } - \\.shell { width: min(100%, 780px); margin: 0 auto; padding: 18px 16px 34px; } + \\.shell { position: relative; z-index: 1; width: min(100%, 780px); margin: 0 auto; padding: 18px 16px 34px; } + \\.shell::before { + \\ content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: 78px; height: 340px; pointer-events: none; + \\ border-radius: 36px 58px 42px 68px; + \\ background: + \\ linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.055) 19%, transparent 25% 42%, rgba(255,255,255,.035) 43%, transparent 48%), + \\ radial-gradient(ellipse at 8% 60%, color-mix(in srgb, var(--signal-c, var(--pink)) 13%, transparent), transparent 54%); + \\ filter: blur(.35px); opacity: .75; transform: perspective(780px) rotateX(3deg) skewY(-1.5deg); + \\} \\header { \\ position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; \\ min-height: 50px; margin: 0 0 26px; padding: 8px 0; @@ -54,9 +84,11 @@ pub const css = \\.brand { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0; } \\.brand:hover { opacity: 0.82; } \\nav { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 4px; border: 1px solid color-mix(in srgb, var(--line) 66%, transparent); border-radius: 18px; background: + \\ linear-gradient(102deg, rgba(255,255,255,.11), transparent 18% 62%, rgba(255,255,255,.055)), \\ radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--signal-a, var(--green)) 12%, transparent), transparent 46%), \\ color-mix(in srgb, var(--glass) 38%, transparent); - \\ box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 28px rgba(0,0,0,.12); } + \\ box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 16px 0 34px rgba(255,255,255,.035), 0 8px 28px rgba(0,0,0,.12); + \\ backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); } \\nav a, .settings { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } \\nav a:hover, .settings:hover { color: var(--text); } \\.icon-link, .settings { @@ -78,7 +110,7 @@ pub const css = \\.icon-link:hover, .settings:hover { border-color: color-mix(in srgb, var(--signal-a, var(--green)) 55%, var(--line)); background: color-mix(in srgb, var(--panel-2) 86%, transparent); transform: translateY(-1px); } \\.settings { flex: 0 0 auto; margin-left: 2px; } \\.hero { margin: 52px 0 24px; } - \\h1 { margin: 0; color: var(--text); font-size: clamp(36px, 11vw, 74px); line-height: 0.95; letter-spacing: 0; } + \\h1 { margin: 0; color: var(--text); font-size: clamp(36px, 11vw, 74px); line-height: 0.95; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255,255,255,.05), 0 28px 72px color-mix(in srgb, var(--signal-b, var(--accent)) 17%, transparent); } \\.lede { margin: 14px 0 0; max-width: 47ch; color: var(--muted); font-size: 15px; } \\.lede a, .lede code { color: var(--green); } \\.entropy { width: min(100%, 330px); min-height: 76px; margin-top: 19px; display: grid; gap: 6px; } @@ -113,11 +145,18 @@ pub const css = \\@media (prefers-reduced-motion: reduce) { .entropy-label, .entropy-bars i { transition: none; } } \\.pulse { \\ margin: 0 0 30px; padding: 14px; - \\ border: 1px solid var(--line); border-radius: 8px; background: - \\ linear-gradient(135deg, color-mix(in srgb, var(--signal-a, var(--green)) 12%, transparent), transparent 46%), - \\ linear-gradient(315deg, color-mix(in srgb, var(--signal-c, var(--pink)) 10%, transparent), transparent 44%), - \\ var(--panel); - \\ overflow: hidden; max-width: 100%; + \\ position: relative; border: 1px solid color-mix(in srgb, var(--line) 78%, white 7%); border-radius: 12px; background: + \\ linear-gradient(103deg, rgba(255,255,255,.095), transparent 12% 58%, rgba(255,255,255,.045)), + \\ linear-gradient(135deg, color-mix(in srgb, var(--signal-a, var(--green)) 16%, transparent), transparent 48%), + \\ linear-gradient(315deg, color-mix(in srgb, var(--signal-c, var(--pink)) 13%, transparent), transparent 44%), + \\ color-mix(in srgb, var(--panel) 82%, transparent); + \\ overflow: hidden; max-width: 100%; backdrop-filter: blur(18px) saturate(1.16); -webkit-backdrop-filter: blur(18px) saturate(1.16); + \\ box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset -22px 0 60px rgba(255,255,255,.035), 0 20px 48px rgba(0,0,0,.13); + \\} + \\.pulse::after { + \\ content: ""; position: absolute; inset: -36px -28px auto auto; width: 48%; height: 84px; pointer-events: none; + \\ background: linear-gradient(101deg, transparent, rgba(255,255,255,.13), transparent 34%); + \\ transform: rotate(-9deg); filter: blur(8px); opacity: .5; \\} \\.pulse > div { min-width: 0; } \\.pulse-kicker { color: var(--dim); font-size: 11px; text-transform: lowercase; } @@ -220,6 +259,9 @@ pub const css = \\ .entropy { width: min(100%, 250px); min-height: 68px; } \\ .entropy-bars { gap: 3px; min-height: 36px; } \\ .entropy-bars i:hover::after { display: none; } + \\ body::before { width: 105vw; height: 430px; left: -42vw; top: -92px; opacity: .56; } + \\ body::after { right: -52vw; opacity: .55; } + \\ .shell::before { left: -22px; right: -22px; top: 96px; height: 270px; opacity: .52; } \\} ;