scriptoriumadmin/openpetswithchatandmcp
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

chore(website): align marketing header and silver visual language
Some checks are pending
Deploy FamiliarOS Website / deploy (push) Waiting to run
Details

Browse source
This commit is contained in:
OpenPets Dev 2026-06-20 05:38:42 +00:00
parent e0e3439b9e
commit a49b0111fc
4 changed files with 65 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
website/src/components/marketing/MarketingShell.tsx
View file

@ -68,13 +68,13 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
? `bg-white/5 ${borderClassName} backdrop-blur-2xl`
: `bg-white/70 ${borderClassName} backdrop-blur-2xl`
const logoClassName = isDark ? 'drop-shadow-[0_0_24px_rgba(29,55,87,0.25)]' : 'drop-shadow-[0_0_14px_rgba(209,200,191,0.18)]'
const logoClassName = 'drop-shadow-[0_0_14px_rgba(232,232,232,0.36)]'
const headerFrameClassName = 'h-[10rem] md:h-[10.5rem] lg:h-[11rem]'
const headerInnerClassName = `mx-auto flex w-full max-w-7xl items-center justify-between gap-2.5 px-4 md:gap-3 md:px-5 lg:gap-4 lg:px-6 xl:gap-5 ${headerFrameClassName}`
const logoClusterClassName = 'flex min-w-0 items-center gap-3 md:gap-4 xl:gap-5'
const emblemImageClassName = `block h-[3.6rem] w-[3.6rem] shrink-0 bg-transparent object-contain object-center sm:h-[4rem] sm:w-[4rem] md:h-[4.45rem] md:w-[4.45rem] lg:h-[4.8rem] lg:w-[4.8rem] ${logoClassName}`
const wordmarkImageClassName = `block h-[3.2rem] w-auto max-w-[13.4rem] shrink-0 bg-transparent object-contain sm:h-[3.65rem] md:h-[4.05rem] md:max-w-[14rem] lg:h-[4.45rem] lg:max-w-[15.6rem] ${logoClassName}`
const homeLogoLinkClassName = 'flex min-w-0 items-center gap-0'
const headerInnerClassName = `relative mx-auto grid w-full max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-2.5 px-4 md:gap-3 md:px-5 lg:gap-4 lg:px-6 xl:gap-5 ${headerFrameClassName}`
const emblemImageClassName = `block h-[3.8rem] w-[3.8rem] shrink-0 bg-transparent object-contain object-center sm:h-[4.2rem] sm:w-[4.2rem] md:h-[4.5rem] md:w-[4.5rem] lg:h-[4.9rem] lg:w-[4.9rem] ${logoClassName}`
const wordmarkImageClassName = `block h-[3.35rem] w-auto max-w-[14rem] shrink-0 bg-transparent object-contain sm:h-[3.8rem] md:h-[4.2rem] md:max-w-[14.5rem] lg:h-[4.65rem] lg:max-w-[15.8rem] ${logoClassName}`
const emblemLinkClassName = 'relative z-10 flex min-w-0 items-center gap-0'
const wordmarkLinkClassName = 'absolute left-1/2 top-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 items-center justify-center md:flex'
const activePath = useMemo(() => {
if (location.pathname === '/about') return '/about'
@ -122,7 +122,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
<header className={`sticky top-0 z-50 border-b backdrop-blur-2xl ${isDark ? 'border-white/10 bg-black/20' : 'border-[hsl(var(--border))] bg-[hsl(var(--background))]'}`}>
<div className={headerInnerClassName}>
<Link to="/" className={homeLogoLinkClassName} aria-label={`${brandConfig.brandName} home`}>
<Link to="/" className={emblemLinkClassName} aria-label={`${brandConfig.brandName} home`}>
<img
src="/branding/familiaros_icon.png"
alt={`${brandConfig.brandName} emblem`}
@ -130,18 +130,22 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
loading="eager"
draggable={false}
/>
<span className={logoClusterClassName}>
<img
src="/branding/familiaros_logo.png"
alt={`${brandConfig.brandName} wordmark`}
className={wordmarkImageClassName}
loading="eager"
draggable={false}
/>
</span>
</Link>
<Link
to="/"
className={wordmarkLinkClassName}
aria-label={`${brandConfig.brandName} brand wordmark`}
>
<img
src="/branding/familiaros_logo.png"
alt={`${brandConfig.brandName} wordmark`}
className={wordmarkImageClassName}
loading="eager"
draggable={false}
/>
</Link>
<nav className="hidden items-center flex-1 justify-center lg:flex">
<nav className="hidden items-center justify-center lg:flex">
<div className={`flex items-center gap-2 rounded-full border px-3 py-2 ${glassClassName}`}>
{navigationItems.map((entry) => {
if (entry.kind === 'dropdown') {
@ -202,7 +206,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
</div>
</nav>
<div className="relative z-10 flex items-center gap-2">
<div className="relative z-10 flex items-center gap-2 justify-self-end">
{isAuthenticated ? (
<>
<Link

32
website/src/pages/HomeLanding.tsx
View file

@ -144,20 +144,20 @@ export function HomeLanding() {
<MarketingShell>
{/* Hero */}
<section className="relative mx-auto max-w-7xl px-6 pb-16 pt-16 lg:px-8 lg:pt-24">
<div className="pointer-events-none absolute inset-x-8 -top-12 bottom-0 -z-10 rounded-[2.75rem] bg-[radial-gradient(circle_at_top,rgba(216,203,175,0.22),transparent_38%),radial-gradient(circle_at_85%_18%,rgba(121,144,255,0.18),transparent_30%)] blur-3xl" />
<div className="pointer-events-none absolute inset-x-8 -top-12 bottom-0 -z-10 rounded-[2.75rem] bg-[radial-gradient(circle_at_top,hsla(var(--brand-silver)/0.22),transparent_38%),radial-gradient(circle_at_85%_18%,hsla(var(--brand-silver)/0.20),transparent_30%)] blur-3xl" />
<div className="public-hero-shell p-8 md:p-12">
<div className="inline-flex items-center gap-2 rounded-full border border-[hsl(var(--brand-ivory))]/40 bg-[hsl(var(--brand-gold))]/10 px-4 py-1 public-shell-kicker">
<div className="inline-flex items-center gap-2 rounded-full border border-[hsl(var(--brand-silver))]/40 bg-[hsl(var(--brand-silver))]/10 px-4 py-1 public-shell-kicker">
<ItshoverShieldCheckIcon size={14} />
Local-first AI companion platform
</div>
<div className="relative mt-6 overflow-hidden rounded-3xl border border-white/15 bg-black/25 px-6 py-8 public-hero-inner md:px-10 md:py-12">
<div className="pointer-events-none absolute inset-x-24 top-0 h-px bg-gradient-to-r from-transparent via-[hsl(var(--brand-ivory))]/70 to-transparent" />
<div className="pointer-events-none absolute inset-x-32 top-0 h-[4px] bg-gradient-to-r from-transparent via-[hsl(var(--brand-gold))]/40 to-transparent blur-sm" />
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(216,203,175,0.22),transparent_54%),linear-gradient(180deg,rgba(11,12,15,0.08)_0%,rgba(11,12,15,0.28)_100%)]" />
<div className="pointer-events-none absolute inset-x-24 top-0 h-px bg-gradient-to-r from-transparent via-[hsl(var(--brand-silver))]/70 to-transparent" />
<div className="pointer-events-none absolute inset-x-32 top-0 h-[4px] bg-gradient-to-r from-transparent via-[hsl(var(--brand-silver))]/40 to-transparent blur-sm" />
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,hsla(var(--brand-silver)/0.22),transparent_54%),linear-gradient(180deg,rgba(11,12,15,0.08)_0%,rgba(11,12,15,0.28)_100%)]" />
<div className="relative z-10 mx-auto flex w-fit max-w-full flex-col items-center">
<h1 className="public-page-title text-center">Create your Familiar.</h1>
<div className="mt-3 h-[3px] w-full rounded-full bg-gradient-to-r from-transparent via-[hsl(var(--brand-ivory))] to-transparent shadow-[0_0_16px_rgba(216,203,175,0.45)]" />
<div className="mt-3 h-[3px] w-full rounded-full bg-gradient-to-r from-transparent via-[hsl(var(--brand-silver))] to-transparent shadow-[0_0_16px_hsla(var(--brand-silver)/0.32)]" />
</div>
<p className="public-lead relative z-10 mx-auto mt-5 max-w-3xl text-center">
Your Familiar remembers, speaks, and acts across your system. A local-first AI companion with memory, voice, knowledge, and tools — entirely under your control.
@ -209,8 +209,8 @@ export function HomeLanding() {
const Icon = pillar.icon
return (
<div key={pillar.title} className="public-card rounded-2xl p-6 text-center">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-[hsl(var(--brand-ivory))]/30 bg-[hsl(var(--brand-ivory))]/10">
<Icon className="text-[hsl(var(--brand-ivory))]" size={24} />
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-[hsl(var(--brand-silver))]/30 bg-[hsl(var(--brand-silver))]/10">
<Icon className="text-[hsl(var(--brand-silver))]" size={24} />
</div>
<h3 className="public-section-title mt-4">{pillar.title}</h3>
<p className="public-body mt-2">{pillar.body}</p>
@ -234,7 +234,7 @@ export function HomeLanding() {
const Icon = feature.icon
return (
<div key={feature.title} className="public-card rounded-2xl p-6">
<Icon className="text-[hsl(var(--brand-ivory))]" size={20} />
<Icon className="text-[hsl(var(--brand-silver))]" size={20} />
<h3 className="public-section-title mt-4">{feature.title}</h3>
<p className="public-body mt-2">{feature.body}</p>
</div>
@ -271,7 +271,7 @@ export function HomeLanding() {
key={i}
className="flex shrink-0 items-center justify-center rounded-xl border border-white/10 bg-[hsl(var(--brand-deep))]/70 px-5 py-3 backdrop-blur-sm"
>
<span className="whitespace-nowrap text-sm font-semibold tracking-wide text-[hsl(var(--brand-ivory))]/80">{label}</span>
<span className="whitespace-nowrap text-sm font-semibold tracking-wide text-[hsl(var(--brand-silver))]/80">{label}</span>
</div>
))}
</div>
@ -298,7 +298,7 @@ export function HomeLanding() {
<div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{steps.map((step) => (
<div key={step.n} className="rounded-2xl border border-white/10 bg-black/20 p-5">
<span className="text-xs font-semibold uppercase tracking-widest text-[hsl(var(--brand-gold-soft))]">{step.n}</span>
<span className="text-xs font-semibold uppercase tracking-widest text-[hsl(var(--brand-silver))]">{step.n}</span>
<h3 className="public-section-title mt-2">{step.title}</h3>
<p className="public-body mt-2 text-sm">{step.body}</p>
</div>
@ -312,23 +312,23 @@ export function HomeLanding() {
<div className="public-card-raised rounded-2xl p-5">
<div className="flex flex-wrap items-center justify-between gap-3">
<p className="public-shell-kicker">
Pricing — <Link to="/pricing" className="text-[hsl(var(--brand-ivory))]">See full plans</Link>
Pricing — <Link to="/pricing" className="text-[hsl(var(--brand-silver))]">See full plans</Link>
</p>
<div className="inline-flex items-center rounded-full border border-white/15 bg-white/5 p-1">
<button
type="button"
onClick={() => setBillingMode('monthly')}
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'monthly' ? 'bg-[hsl(var(--brand-ivory))]/20 text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'monthly' ? 'bg-[hsl(var(--brand-silver))]/20 text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
>
Monthly
</button>
<button
type="button"
onClick={() => setBillingMode('annual')}
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'annual' ? 'bg-[hsl(var(--brand-ivory))]/20 text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'annual' ? 'bg-[hsl(var(--brand-silver))]/20 text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
>
Annual
{billingMode === 'annual' && <span className="ml-1 text-[hsl(var(--brand-ivory))]">— save ~18%</span>}
{billingMode === 'annual' && <span className="ml-1 text-[hsl(var(--brand-silver))]">— save ~18%</span>}
</button>
</div>
</div>
@ -360,7 +360,7 @@ export function HomeLanding() {
{/* Final CTA */}
<section className="mx-auto max-w-7xl px-6 pb-10 lg:px-8">
<div className="public-card rounded-2xl p-6 md:p-8 text-center">
<Sparkles className="mx-auto text-[hsl(var(--brand-ivory))]" size={28} />
<Sparkles className="mx-auto text-[hsl(var(--brand-silver))]" size={28} />
<h2 className="public-section-title mt-4">Ready to meet your Familiar?</h2>
<p className="public-body mx-auto mt-3 max-w-2xl">
Start free on macOS, Windows, or Linux. Upgrade when you are ready for knowledge, voice, and tools.

22
website/src/pages/PricingPage.tsx
View file

@ -162,26 +162,26 @@ export function PricingPage() {
</div>
<div className="mt-8 flex flex-wrap items-center justify-center gap-4">
<div className="inline-flex items-center rounded-full border border-white/15 bg-white/5 p-1 backdrop-blur-xl public-card">
<div className="inline-flex items-center rounded-full border border-[hsl(var(--brand-silver))]/35 bg-[hsl(var(--brand-silver))]/12 p-1 backdrop-blur-xl">
<button
type="button"
onClick={() => setBillingMode('monthly')}
className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'monthly' ? 'text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'monthly' ? 'text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
>
{billingMode === 'monthly' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-ivory))]/15" />}
{billingMode === 'monthly' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-silver))]/20" />}
<span className="relative z-10">Monthly</span>
</button>
<button
type="button"
onClick={() => setBillingMode('annual')}
className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'annual' ? 'text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'annual' ? 'text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
>
{billingMode === 'annual' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-ivory))]/15" />}
{billingMode === 'annual' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-silver))]/20" />}
<span className="relative z-10">Annual</span>
</button>
</div>
{billingMode === 'annual' && (
<span className="rounded-full border border-[hsl(var(--brand-ivory))]/40 bg-[hsl(var(--brand-ivory))]/10 px-3 py-1 text-xs font-medium text-[hsl(var(--brand-ivory))]">
<span className="rounded-full border border-[hsl(var(--brand-silver))]/50 bg-[hsl(var(--brand-silver))]/15 px-3 py-1 text-xs font-medium text-[hsl(var(--brand-silver))]">
Save ~18%
</span>
)}
@ -196,12 +196,12 @@ export function PricingPage() {
<div key={plan.name} className="relative flex flex-col">
{plan.badge && (
<div className="absolute -top-3 left-1/2 z-10 -translate-x-1/2">
<span className="rounded-full border border-[hsl(var(--brand-ivory))]/60 bg-[hsl(var(--brand-ivory))]/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-[hsl(var(--brand-ivory))]">
<span className="rounded-full border border-[hsl(var(--brand-silver))]/60 bg-[hsl(var(--brand-silver))]/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-[hsl(var(--brand-silver))]">
{plan.badge}
</span>
</div>
)}
<div className={`public-card flex h-full flex-col rounded-2xl p-7 ${plan.popular ? 'pricing-glow-border border-[hsl(var(--brand-ivory))]/30' : ''}`}>
<div className={`public-card flex h-full flex-col rounded-2xl p-7 border border-[hsl(var(--brand-silver))]/35 ${plan.popular ? 'pricing-glow-border border-[hsl(var(--brand-silver))]/50' : ''}`}>
<h2 className="public-card-title">{plan.name}</h2>
<p className="public-body mt-2">{plan.description}</p>
<p className="mt-5 text-4xl font-semibold leading-none">
@ -216,7 +216,7 @@ export function PricingPage() {
<ul className="mt-6 grow space-y-2.5 text-sm text-[hsl(var(--brand-muted))]">
{plan.features.map((feature) => (
<li key={feature} className="flex items-start gap-2.5">
<Check size={14} className="mt-0.5 shrink-0 text-[hsl(var(--brand-ivory))]" />
<Check size={14} className="mt-0.5 shrink-0 text-[hsl(var(--brand-silver))]" />
<span className="public-body">{feature}</span>
</li>
))}
@ -266,7 +266,7 @@ export function PricingPage() {
{pricingFaq.map((item) => (
<div key={item.question} className="public-card-raised rounded-xl p-4">
<h3 className="public-card-title flex items-start gap-2">
<HelpCircle size={16} className="mt-0.5 shrink-0 text-[hsl(var(--brand-ivory))]" />
<HelpCircle size={16} className="mt-0.5 shrink-0 text-[hsl(var(--brand-silver))]" />
{item.question}
</h3>
<p className="public-body mt-2">{item.answer}</p>
@ -277,7 +277,7 @@ export function PricingPage() {
{/* Final CTA */}
<div className="mt-8 public-card rounded-2xl p-6 md:p-8 text-center">
<Sparkles className="mx-auto text-[hsl(var(--brand-ivory))]" size={28} />
<Sparkles className="mx-auto text-[hsl(var(--brand-silver))]" size={28} />
<h2 className="public-section-title mt-4">Not sure which plan fits?</h2>
<p className="public-body mx-auto mt-3 max-w-2xl">
Start free and upgrade when your Familiar needs more knowledge, voice, or tools. You can change plans or cancel at any time.

32
website/src/styles/global.css
View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');
@tailwind base;
@tailwind components;
@ -49,8 +49,8 @@
--ring: 206 100% 13%;
--radius: 0.5rem;
--font-ui: 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
--font-display: 'Orbitron', 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
--font-ui: 'Sora', 'Inter', 'Fira Sans', 'Source Sans 3', 'Segoe UI', sans-serif;
--font-display: 'Orbitron', 'Sora', 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
--brand-silver: 0 0% 76%;
--brand-silver-soft: 0 0% 93%;
--brand-silver-ink: 220 7% 16%;
@ -520,10 +520,10 @@
padding: 1px;
background: linear-gradient(
var(--glow-angle, 0deg),
rgba(196, 169, 107, 0.0),
rgba(216, 203, 175, 0.9),
rgba(196, 169, 107, 0.0),
rgba(216, 203, 175, 0.0)
hsla(var(--brand-silver) / 0.0),
hsla(var(--brand-silver) / 0.85),
hsla(var(--brand-silver) / 0.0),
hsla(var(--brand-silver) / 0.0)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
@ -543,7 +543,7 @@
border-radius: inherit;
background: radial-gradient(
ellipse at var(--glow-x, 50%) var(--glow-y, 0%),
rgba(196, 169, 107, 0.25) 0%,
hsla(var(--brand-silver) / 0.28) 0%,
transparent 70%
);
pointer-events: none;
@ -891,14 +891,14 @@
/* ── Public marketing card / surface — responds to color mode ── */
.public-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.15);
border: 1px solid hsl(var(--brand-silver) / 0.25);
border-radius: 1rem;
backdrop-filter: blur(20px);
}
.public-card-raised {
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.10);
border: 1px solid hsl(var(--brand-silver) / 0.22);
border-radius: 1rem;
backdrop-filter: blur(20px);
}
@ -912,13 +912,13 @@
[data-color-mode='light'] .public-card {
background: rgba(255,255,255,0.80);
border-color: rgba(38,43,51,0.13);
border-color: hsl(var(--brand-silver) / 0.22);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-color-mode='light'] .public-card-raised {
background: rgba(255,255,255,0.90);
border-color: rgba(38,43,51,0.16);
border-color: hsl(var(--brand-silver) / 0.26);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
@ -987,14 +987,14 @@
display: inline-flex;
vertical-align: middle;
border-radius: 9999px;
filter: drop-shadow(0 14px 28px rgba(0,0,0,0.24)) drop-shadow(0 0 18px rgba(214,214,214,0.20));
filter: drop-shadow(0 12px 24px hsla(var(--brand-silver) / 0.15)) drop-shadow(0 0 16px hsla(var(--brand-silver) / 0.35));
transition: transform 0.18s ease, filter 0.18s ease;
}
.public-silver-metal-frame:hover,
.public-gold-metal-frame:hover {
transform: translateY(-1px);
filter: drop-shadow(0 18px 34px rgba(0,0,0,0.3)) drop-shadow(0 0 22px rgba(224,224,224,0.22));
filter: drop-shadow(0 18px 30px hsla(var(--brand-silver) / 0.20)) drop-shadow(0 0 22px hsla(var(--brand-silver) / 0.42));
}
.public-silver-metal-frame:active,
@ -1017,7 +1017,7 @@
background: linear-gradient(135deg, hsl(var(--brand-silver-soft)) 0%, hsl(var(--brand-silver)) 100%);
color: hsl(var(--brand-silver-ink));
border: 1px solid hsl(var(--brand-silver) / 0.7);
box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 0 rgba(184,150,79,0);
box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 1px hsla(var(--brand-silver) / 0.25), 0 0 32px hsla(var(--brand-silver) / 0.2);
cursor: pointer;
white-space: nowrap;
}
@ -1031,7 +1031,7 @@
[data-color-mode='light'] .public-silver-metal-frame,
[data-color-mode='light'] .public-gold-metal-frame {
filter: drop-shadow(0 14px 28px rgba(90,90,90,0.18)) drop-shadow(0 0 16px rgba(220,220,220,0.16));
filter: drop-shadow(0 14px 24px hsla(var(--brand-silver) / 0.10)) drop-shadow(0 0 14px hsla(var(--brand-silver) / 0.32));
}
[data-color-mode='light'] .public-silver-metal-frame:hover,