/* Sway This Way shared design system CSS — sibling to the AmoryLife brand
* system (see AmoryLife/DesignSystem.md): same base (near-black surfaces,
* Fraunces + Inter type, glassmorphic cards, pill buttons, scroll-reveal
* motion), but its own accent — teal-to-violet instead of AmoryLife's
* gold-to-rose — so Sway reads as a sibling/cousin product, not a reskin.
* Link this from any new page:
* */
:root{
--bg-0:#0a070d;
--bg-1:#130c17;
--bg-2:#1c1220;
--card:rgba(255,255,255,0.045);
--card-border:rgba(255,255,255,0.09);
--ink-0:#f5f0ee;
--ink-1:#cbc0c6;
--ink-2:#8d7f8a;
/* Sway brand accent — teal to violet. Teal (--accent-1) echoes the
* "Sway" swatch already used for this product in the AmoryLife
* roadmap visuals; violet (--accent-2) echoes the "SwayAI" swatch,
* since AI-assisted matching is a core, launch-defining feature. */
--accent-1:#5ec8d8;
--accent-2:#a48af0;
--grad: linear-gradient(120deg, var(--accent-1), var(--accent-2));
--grad-soft: linear-gradient(120deg, rgba(94,200,216,0.16), rgba(164,138,240,0.16));
/* Dedicated semantic danger/error color — deliberately kept separate
* from the brand accent (unlike the amorylife skeleton this was
* adapted from, which reused its rose accent for both branding and
* error states). Reuses that same rose hue here, but only for actual
* errors/destructive states — never for branding. */
--danger:#e0517a;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--bg-0);
color:var(--ink-0);
font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height:1.6;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:'Fraunces', Georgia, serif;
font-weight:500;
line-height:1.1;
letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{position:relative;}
/* background ambient orbs */
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:0.35; pointer-events:none; z-index:0;}
.orb-1{background:var(--accent-1); opacity:0.18;}
.orb-2{background:var(--accent-2); opacity:0.16;}
/* NAV */
header{
position:fixed; top:0; left:0; right:0; z-index:100;
backdrop-filter:blur(16px) saturate(140%);
background:rgba(10,7,13,0.55);
border-bottom:1px solid rgba(255,255,255,0.06);
transition:background .3s ease;
}
nav{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1180px; margin:0 auto;}
.logo{font-family:'Fraunces', serif; font-size:22px; font-weight:600; letter-spacing:0.01em;}
.logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{font-size:14.5px; color:var(--ink-1); transition:color .2s;}
.nav-links a:hover{color:var(--ink-0);}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 26px; border-radius:999px; font-size:14.5px; font-weight:600;
cursor:pointer; border:none; transition:transform .25s ease, box-shadow .25s ease;
white-space:nowrap;
}
.btn-primary{background:var(--grad); color:#0d1417; box-shadow:0 8px 30px -8px rgba(164,138,240,0.55);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(164,138,240,0.7);}
.btn-ghost{background:rgba(255,255,255,0.06); color:var(--ink-0); border:1px solid rgba(255,255,255,0.14);}
.btn-ghost:hover{background:rgba(255,255,255,0.11); transform:translateY(-2px);}
.nav-actions{display:none; align-items:center; gap:12px;}
@media(min-width:840px){.nav-actions{display:flex;}}
.nav-links{display:none;}
@media(min-width:840px){.nav-links{display:flex;}}
/* Mobile nav (2026-08-25 fix) — below 840px, .nav-links and .nav-actions
* above both go display:none with nothing standing in for them, which is
* what left the header showing just the logo on an iPhone (Log In and
* Request an Invite included — Jamie's report was "the login... at the
* top disappears," but the whole nav was gone, not just that one link).
* This hamburger button + dropdown panel is the replacement: the button
* only renders below the same 840px breakpoint the desktop nav uses, so
* the two are mutually exclusive rather than ever both showing. */
.mobile-menu-btn{
display:flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:10px;
border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06);
color:var(--ink-0); cursor:pointer;
}
.mobile-menu-btn:hover{background:rgba(255,255,255,0.11);}
.mobile-menu-btn svg{width:20px; height:20px;}
@media(min-width:840px){.mobile-menu-btn{display:none;}}
/* Positioned relative to (already position:fixed, so it's the
* containing block for this) rather than