/* ── Celestial / whimsical purple theme ────────────────────────────
Every color lives in the :root tokens below — change them here and both
pages (home + /collab) follow. Page uses . */
:root {
/* Core hues as RGB triplets, so any alpha can be derived:
rgb(var(--cream-rgb) / .22) */
--cream-rgb: 235 212 185; /* #EBD4B9 — text, buttons, icons */
--gold-rgb: 224 182 92; /* #E0B65C — accents, stat numbers, stars */
--indigo-rgb: 43 36 79; /* #2B244F — night sky base, text on cream */
--indigo-deep-rgb: 27 22 54; /* #1B1636 — bottom of the sky gradient */
--purple-glow-rgb: 58 47 92; /* #3A2F5C — radial highlight up top */
--purple-muted-rgb: 84 67 98; /* #544362 — avatar ring */
--violet-glow-rgb: 126 90 190; /* #7E5ABE — avatar cosmic glow */
--ink-rgb: 18 13 38; /* drop shadows */
--bezel-rgb: 13 10 24; /* #0D0A18 — phone frame */
--bezel-shadow-rgb: 10 6 26; /* phone drop shadow */
/* Solid colors */
--cream: rgb(var(--cream-rgb));
--cream-bright: #F3E2CD; /* CTA hover */
--gold: rgb(var(--gold-rgb));
--indigo: rgb(var(--indigo-rgb));
--indigo-deep: rgb(var(--indigo-deep-rgb));
--purple-glow: rgb(var(--purple-glow-rgb));
--bezel: rgb(var(--bezel-rgb));
/* Tints ![]()
SVGs (icons, brand wordmarks) to --cream.
Needed because `color` can't reach inside an ![]()
. */
--tint-cream: brightness(0) saturate(100%) invert(87%) sepia(19%) saturate(464%) hue-rotate(331deg) brightness(97%) contrast(88%);
}
/* iOS 26 Safari ignores — it tints each of its bars by
sampling a *solid* computed background-color, preferring a full-width
fixed/sticky element hugging that viewport edge and otherwise falling back to
. Gradients are never sampled, and the `background:` shorthand below
resets background-color to transparent, which is why nothing tinted before.
The meta tag stays: it still applies on iOS 15–18.6, Chrome and Android.
NB: do not put a background-color on — that stops 's gradient
propagating to the canvas, which drops the z-index:-1 starfield behind it.
Per-edge fixed strips carrying each edge's exact color were tried and backed
out: Liquid Glass lightens whatever tint it is handed, so an accurate strip
surfaced as a visible band once Safari collapsed the URL bar and ran the page
under its translucent bars. One body background-color for both bars, erring
dark, is what actually looks seamless. */
body {
color: var(--cream);
min-height: 100vh;
background:
radial-gradient(1100px 620px at 50% -12%, var(--purple-glow) 0%, rgb(var(--purple-glow-rgb) / 0) 60%),
linear-gradient(180deg, var(--indigo) 0%, var(--indigo-deep) 100%);
background-attachment: fixed;
}
/* LittleLink's `:root.theme-dark body { color:#fff; background-color:#121212 }`
out-specifies the rule above, so anything without an explicit color inherits
white and the sampled background stays near-black. Re-scope both.
The background-color is never seen on the page — the fixed gradient covers the
viewport at every scroll position — so it exists only as Safari's sampling
target. --indigo-deep matches the bottom edge exactly and sits under the top
edge, which is the safe direction given the Liquid Glass lightening. */
:root.theme-dark body { color: var(--cream); background-color: var(--indigo-deep); }
/* Starfield — two CSS layers (no images), gently twinkling.
Layer 1 (::before): dense small stars. Layer 2 (::after): larger, glowing stars. */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* small stars */
body::before {
background-image:
radial-gradient(1.5px 1.5px at 6% 9%, rgb(var(--cream-rgb) / .90), transparent),
radial-gradient(1px 1px at 14% 20%, rgb(var(--gold-rgb) / .82), transparent),
radial-gradient(1.5px 1.5px at 23% 6%, rgb(var(--cream-rgb) / .88), transparent),
radial-gradient(1px 1px at 31% 15%, rgb(var(--cream-rgb) / .75), transparent),
radial-gradient(1.5px 1.5px at 9% 33%, rgb(var(--gold-rgb) / .78), transparent),
radial-gradient(1px 1px at 19% 45%, rgb(var(--cream-rgb) / .80), transparent),
radial-gradient(1.5px 1.5px at 4% 57%, rgb(var(--cream-rgb) / .78), transparent),
radial-gradient(1px 1px at 13% 71%, rgb(var(--gold-rgb) / .72), transparent),
radial-gradient(1.5px 1.5px at 22% 86%, rgb(var(--cream-rgb) / .82), transparent),
radial-gradient(1px 1px at 35% 78%, rgb(var(--cream-rgb) / .72), transparent),
radial-gradient(1.5px 1.5px at 50% 96%, rgb(var(--gold-rgb) / .72), transparent),
radial-gradient(1.5px 1.5px at 88% 7%, rgb(var(--cream-rgb) / .90), transparent),
radial-gradient(1px 1px at 79% 17%, rgb(var(--gold-rgb) / .80), transparent),
radial-gradient(1.5px 1.5px at 94% 27%, rgb(var(--cream-rgb) / .86), transparent),
radial-gradient(1px 1px at 84% 39%, rgb(var(--cream-rgb) / .74), transparent),
radial-gradient(1.5px 1.5px at 92% 53%, rgb(var(--gold-rgb) / .76), transparent),
radial-gradient(1px 1px at 77% 63%, rgb(var(--cream-rgb) / .80), transparent),
radial-gradient(1.5px 1.5px at 90% 75%, rgb(var(--cream-rgb) / .84), transparent),
radial-gradient(1px 1px at 82% 88%, rgb(var(--gold-rgb) / .74), transparent),
radial-gradient(1px 1px at 63% 41%, rgb(var(--cream-rgb) / .62), transparent);
animation: twinkle 6s ease-in-out infinite;
}
/* larger, glowing stars */
body::after {
background-image:
radial-gradient(4px 4px at 13% 13%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 27% 31%, rgb(var(--gold-rgb)) 0%, rgb(var(--gold-rgb) / .45) 30%, rgb(var(--gold-rgb) / .12) 60%, transparent 100%),
radial-gradient(5px 5px at 46% 9%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 68% 16%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 86% 12%, rgb(var(--gold-rgb)) 0%, rgb(var(--gold-rgb) / .45) 30%, rgb(var(--gold-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 74% 37%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%),
radial-gradient(5px 5px at 92% 47%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 16% 55%, rgb(var(--gold-rgb)) 0%, rgb(var(--gold-rgb) / .45) 30%, rgb(var(--gold-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 33% 79%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 58% 89%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%),
radial-gradient(5px 5px at 80% 71%, rgb(var(--gold-rgb)) 0%, rgb(var(--gold-rgb) / .45) 30%, rgb(var(--gold-rgb) / .12) 60%, transparent 100%),
radial-gradient(4px 4px at 7% 43%, rgb(var(--cream-rgb)) 0%, rgb(var(--cream-rgb) / .45) 30%, rgb(var(--cream-rgb) / .12) 60%, transparent 100%);
animation: twinkle 4.5s ease-in-out infinite reverse;
}
@keyframes twinkle {
0%, 100% { opacity: .65; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
body::before, body::after { animation: none; opacity: .9; }
}
/* Avatar — circular, gold ring + soft cosmic glow. */
.avatar {
width: 120px;
height: 120px;
object-fit: cover;
border: 2px solid rgb(var(--gold-rgb) / .65);
box-shadow:
0 0 0 6px rgb(var(--purple-muted-rgb) / .35),
0 0 42px rgb(var(--violet-glow-rgb) / .55);
}
/* On phones LittleLink drops to 85% width, which wastes ~30px a side on a
page that is nothing but full-width buttons. Take the room back. */
@media (max-width: 34.375rem) { /* 550px */
.container { width: 100%; padding-left: 1rem; padding-right: 1rem; }
}
/* LittleLink ends the container flush with the last element (padding-bottom:0).
In-app browsers (TikTok, Instagram) float a toolbar over the bottom of the
webview, so the final button ends up under it with nothing left to scroll.
Reserve a screenful-independent gutter + the home-indicator inset. */
.container { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
/* Typography */
h1 {
color: var(--cream);
font-family: "Fredoka", "Open Sans", system-ui, sans-serif;
font-weight: 600;
letter-spacing: .3px;
white-space: nowrap; /* keep the name on a single line */
font-size: clamp(1.4rem, 7vw, 2.3rem); /* auto-shrink to fit narrow phones */
margin-bottom: 6px; /* tagline reads as part of the name, not a separate block */
}
p { color: rgb(var(--cream-rgb) / .82); }
/* Name + tagline + icons read as one header block (LittleLink gives the tagline 48px) */
.column > p { margin-bottom: 16px; }
/* Glassy pill buttons over the night sky (Beacons/Linktree themed style).
Icons are unified to cream so the stack reads as one system. */
.button-stack .button {
width: 100%; /* LittleLink pins these at 300px; match the product rows */
--button-background: rgb(var(--cream-rgb) / .07);
--button-text: var(--cream);
background-image: none; /* strip brand gradients (Instagram etc.) */
border: 1px solid rgb(var(--cream-rgb) / .22);
border-radius: 14px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: transform .15s ease, background-color .2s ease,
box-shadow .2s ease, border-color .2s ease;
}
.button-stack .button:hover {
--button-background: rgb(var(--cream-rgb) / .14);
transform: translateY(-2px);
box-shadow: 0 8px 26px rgb(var(--ink-rgb) / .55), 0 0 18px rgb(var(--gold-rgb) / .18);
border-color: rgb(var(--gold-rgb) / .55);
}
.button-stack .button .icon { filter: var(--tint-cream); opacity: .95; }
/* Primary CTA — "Work with me": solid cream, stands apart from the stack. */
.button-stack .button-cta {
--button-background: var(--cream);
--button-text: var(--indigo);
border-color: rgb(var(--gold-rgb) / .7);
font-weight: 700;
}
.button-stack .button-cta:hover {
--button-background: var(--cream-bright);
box-shadow: 0 8px 26px rgb(var(--ink-rgb) / .55), 0 0 22px rgb(var(--gold-rgb) / .35);
}
.button-stack .button-cta .icon { filter: brightness(0); opacity: .8; }
/* Footer (theme-scoped to out-specify LittleLink's dark-theme link color) */
footer { color: rgb(var(--cream-rgb) / .6); }
:root.theme-dark footer a:not(.button) { color: rgb(var(--cream-rgb) / .6); }
:root.theme-dark footer a:not(.button):hover { color: var(--gold); }
/* Profiles + email — small icon row under the tagline */
.social-icons { display: flex; justify-content: center; gap: 20px; margin: 6px 0 26px; }
.social-icons a { display: inline-flex; padding: 4px; transition: transform .15s ease; }
.social-icons a:hover { transform: translateY(-2px); }
.social-icons img {
width: 26px; height: 26px; filter: var(--tint-cream);
opacity: .82; transition: opacity .2s ease;
}
.social-icons a:hover img { opacity: 1; }
/* Shop grid — photo-first product cards below the button stack, so a viewer
recognises the product itself rather than having to re-find the video it
appeared in. Two columns: it's what every creator storefront converged on
(Amazon Idea Lists, ShopMy, Linktree Shops), and it halves the scroll — the
click curve on a link-in-bio page is steep enough that a long single column
buries anything past the first few. Sections ("Living room") keep it
navigable as the list outgrows one screen. */
.video-links-wrap { margin: 34px 0 6px; text-align: center; }
.vl-heading {
font-family: "Fredoka", "Open Sans", sans-serif; font-weight: 600;
color: var(--cream); font-size: 1.3rem; opacity: .9; margin: 0 0 16px;
}
/* Collection heading — the rule fills whatever the text leaves */
.vl-sec {
font-family: "Fredoka", "Open Sans", sans-serif; font-weight: 600; font-size: 1.02rem;
color: var(--cream); text-align: left; margin: 24px 0 10px;
display: flex; align-items: center; gap: 10px;
}
.vl-sec::after { content: ""; flex: 1; height: 1px; background: rgb(var(--cream-rgb) / .18); }
.vl-sec:first-child { margin-top: 0; }
.video-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vl-card {
display: block; text-decoration: none; text-align: left; cursor: pointer;
border-radius: 14px; overflow: hidden;
background: rgb(var(--cream-rgb) / .06);
border: 1px solid rgb(var(--cream-rgb) / .22);
color: var(--cream);
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
/* LittleLink's `:root.theme-dark a:not(.button)` is (0,3,1) and paints the card
blue; the label spans below set their own color so nothing shows it today, but
anything added bare to a card would inherit it. Match specificity, once. */
:root.theme-dark a.vl-card { color: var(--cream); }
.vl-card:hover {
transform: translateY(-2px);
background: rgb(var(--cream-rgb) / .1);
border-color: rgb(var(--gold-rgb) / .5);
box-shadow: 0 8px 22px rgb(var(--ink-rgb) / .5), 0 0 16px rgb(var(--gold-rgb) / .2);
}
.vl-card img {
width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.vl-card .vl-t {
display: block; padding: 9px 11px 11px;
color: var(--cream); font-size: .92rem; line-height: 1.3;
}
.vl-brand {
display: block; font-size: .72rem; line-height: 1.3;
color: rgb(var(--cream-rgb) / .55);
}