76d78e1925
css is now string | CSSStyleSheet. A sheet is adopted as-is: into its own
shadow root, an enclosing shadow root, or document.adoptedStyleSheets for
light DOM at the document level. Strings behave as before.
The examples import their styles with `with { type: 'css' }` and their
static templates with `with { type: 'text' }`. Safari doesn't support those
yet, so vite.config.ts rewrites them into modules Vite builds: a constructed
CSSStyleSheet, or the file's text. npm run examples now just runs vite,
with root set in the config.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
51 lines
1.2 KiB
CSS
51 lines
1.2 KiB
CSS
:host {
|
|
--a: #ff5f6d;
|
|
--b: #ffc371;
|
|
--c: #ff5f6d;
|
|
--glow: rgb(255 95 109 / 45%);
|
|
}
|
|
:host([theme='ocean']) {
|
|
--a: #2193b0;
|
|
--b: #6dd5ed;
|
|
--c: #b2fefa;
|
|
--glow: rgb(33 147 176 / 45%);
|
|
}
|
|
:host([theme='neon']) {
|
|
--a: #f72585;
|
|
--b: #7209b7;
|
|
--c: #4cc9f0;
|
|
--glow: rgb(114 9 183 / 55%);
|
|
}
|
|
|
|
.stage {
|
|
background:
|
|
radial-gradient(60% 80% at 15% 10%, color-mix(in srgb, var(--a) 35%, transparent), transparent),
|
|
radial-gradient(50% 70% at 85% 90%, color-mix(in srgb, var(--c) 30%, transparent), transparent),
|
|
#0d0d14;
|
|
box-shadow: 0 30px 80px -30px var(--glow);
|
|
transition: box-shadow 400ms ease;
|
|
}
|
|
|
|
h1 {
|
|
background: linear-gradient(100deg, var(--a), var(--b), var(--c), var(--a)) 0 0 / 300% 100%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
animation: flow 6s linear infinite;
|
|
filter: drop-shadow(0 4px 24px var(--glow));
|
|
}
|
|
|
|
.tagline {
|
|
animation: rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
}
|
|
|
|
@keyframes flow {
|
|
to { background-position: 300% 0; }
|
|
}
|
|
@keyframes rise {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
h1, .tagline { animation: none; }
|
|
}
|