/*
 * THE SHARED SHEET: everything every page of alice.dating has in common.
 *
 * The five colours, the reset, the wrapper, the wordmark, the buttons, the
 * fixed nav, the light bands, the footer and the scroll reveal. A page keeps
 * only what is its own in a <style> of its own -- the home page's hero and
 * game reel, a legal page's prose -- so there is one copy of the chrome and
 * five pages calling it, not five copies to drift apart.
 */
/*
 * alice.dating, rebuilt off Wix.
 *
 * The visual language is the app's welcome screen (app/WelcomeScreen.js), which
 * Guy named as the reference: a full bleed photograph dissolving into the blue
 * ramp, a hairline outlined card with no fill, Yellow as the single accent, and
 * Lily Script One reserved for the wordmark. The palette is Alice's five colors
 * and nothing else, the same rule custom-files/games/kit/kit.css holds the
 * games to.
 */
:root{
  --blue:#2734EE;
  --yellow:#FDDC4B;
  --navy:#00032A;
  --gray:#B0B0B0;
  --surface:#F3F3F3;
  --white:#FFFFFF;

  /* The welcome screen's background ramp, stop for stop. */
  --glow:rgb(42,55,240);
  --glow-mid:rgb(17,25,168);
  --deep:rgb(10,16,99);
  --deeper:rgb(4,7,63);

  /* Two quiet type colors the screen already uses on dark: the grey that
     introduces the question, and the lavender under the sign in row. */
  --ask:rgb(216,219,230);
  --lav:rgb(201,205,251);

  --page-max:1120px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--navy);
  color:var(--navy);
  font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 24px;}

/* The wordmark. Lily Script One is for this and nothing else. */
.wordmark{font-family:"Lily Script One",cursive;font-weight:400;letter-spacing:.5px;}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:54px;padding:0 34px;border-radius:999px;
  font-weight:700;font-size:15px;letter-spacing:.2px;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease,opacity .15s ease;
}
.btn:active{transform:scale(.985);}
.btn-yellow{background:var(--yellow);color:var(--navy);}
.btn-yellow:hover{opacity:.9;}
.btn-navy{background:var(--navy);color:var(--white);}
.btn-navy:hover{opacity:.9;}
.btn-sm{height:42px;padding:0 22px;font-size:13px;}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 24px;
  transition:background .25s ease,backdrop-filter .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(0,3,42,.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:rgba(255,255,255,.10);
}
.nav .mark{color:var(--white);font-size:27px;line-height:1;text-decoration:none;
  text-shadow:0 2px 22px rgba(0,0,0,.55);}

/* --------------------------------------------------------- light bands */
.band{padding:96px 0;}
.band-white{background:var(--white);}
.band-surface{background:var(--surface);}
.band-blue{background:var(--blue);}
.band-navy{background:var(--navy);}

.eyebrow{margin:0 0 14px;font-weight:700;font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--blue);}
.band-navy .eyebrow,.band-blue .eyebrow{color:var(--yellow);}

h2{margin:0;font-weight:500;font-size:clamp(28px,4.6vw,46px);line-height:1.18;
  letter-spacing:-.4px;}
.band-navy h2,.band-blue h2{color:var(--white);}
.section-sub{margin:16px 0 0;max-width:620px;font-weight:300;
  font-size:clamp(15px,2vw,18px);line-height:1.65;color:#3c4059;}
.band-navy .section-sub{color:var(--ask);}
.band-blue .section-sub{color:rgba(255,255,255,.86);}
.head-center{text-align:center;}
.head-center .section-sub{margin-left:auto;margin-right:auto;}

/* -------------------------------------------------------------- footer */
footer{background:var(--navy);color:var(--lav);padding:64px 0 48px;}
.foot-top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;}
footer .mark{color:var(--white);font-size:30px;line-height:1;}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 26px;font-weight:300;font-size:14px;}
.foot-links a{color:var(--lav);text-decoration:none;}
.foot-links a:hover{color:var(--yellow);}
.foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;
  font-weight:300;font-size:13px;color:rgba(201,205,251,.7);}
.social{display:flex;gap:18px;}
.social a{color:var(--lav);}
.social a:hover{color:var(--yellow);}
.social svg{width:20px;height:20px;display:block;}

/* --------------------------------------------------------- scroll reveal */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .card .state{transition:none;}
}