/* Holding page shown on skincareplusjm.com while the site is in development or being updated (see site_mode.py).
   Colours and fonts match public/styles.css. */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("fonts/jost-latin.woff2") format("woff2");
}

:root {
  --night: #16100c;
  --cedar-800: #2a1f18;
  --ember: #d9a066;
  --linen: #f3ebe0;
  --sand: #e6d9c6;
  --stone: #a8998a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--sand); font: 300 1.05rem/1.7 var(--sans);
  background: radial-gradient(ellipse at 50% 30%, var(--cedar-800), var(--night) 70%) fixed var(--night);
}

/* Only the message for the current mode shows */
body:not([data-mode="coming-soon"]) .for-coming-soon,
body:not([data-mode="updating"]) .for-updating { display: none; }

.hold {
  min-height: 100%; max-width: 640px; margin: 0 auto; padding: 48px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.hold__logo { width: min(280px, 72vw); height: auto; margin-bottom: 2.6rem; }
.hold__eyebrow { margin: 0 0 .8rem; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ember); }
h1 { margin: 0 0 1rem; font: 300 clamp(2.4rem, 7vw, 3.6rem)/1.05 var(--serif); color: var(--linen); }
.hold__text { margin: 0 auto 2.2rem; max-width: 30em; }

.hold__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 2.6rem; }
.hold__btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6rem; border-radius: 100px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--night); background: var(--ember); border: 1px solid var(--ember); transition: background .3s, color .3s;
}
.hold__btn:hover, .hold__btn:focus-visible { background: transparent; color: var(--ember); }
.hold__btn--ghost { color: var(--ember); background: transparent; border-color: rgba(217,160,102,.5); }
.hold__btn--ghost:hover, .hold__btn--ghost:focus-visible { border-color: var(--ember); }
.hold__btn:focus-visible { outline: 2px solid var(--linen); outline-offset: 3px; }

.hold__details { margin: 0; font-size: .92rem; color: var(--stone); }
.hold__details a { color: var(--ember); }