/* =========================================================================
   Tair Haim — PASTEL look (preview, 22/10/2026)
   Loaded only with ?look=pastel (inc/look.php). Same structure and layout as
   the original Nocturne design; only colours, backgrounds, image treatment
   and contrast change. Blush-pink ground, raspberry accent (from the MAKTÜB
   merch pink), deep plum text.
   Contrast (WCAG): text #33202b on #fbe9ef 13:1 · accent #a02a63 on #fbe9ef
   6:1, on the darkest pink #f4cdd9 4.85:1 · secondary #6b4a5a 6.5:1.
   ========================================================================= */

html body.look-pastel {
  --black: #fbe9ef;      /* page ground (was near-black) */
  --ink: #f6dbe5;
  --ink-2: #fdf3f6;      /* cards / panels, a touch lighter than the ground */
  --gold: #a02a63;       /* accent: raspberry */
  --gold-soft: #b0306e;
  --jewel: #2f6b5e;
  --ivory: #33202b;      /* main text: deep plum */
  --ivory-dim: #6b4a5a;
  --bar: #f4cdd9;        /* cinematic bars in a deeper pink */
  --wc-line: rgba(160, 42, 99, .22);
  --wc-line-soft: rgba(51, 32, 43, .1);
  background: var(--black);
  color: var(--ivory);
}
body.look-pastel ::selection { background: #f2b8cc; color: #33202b; }

/* ---------- frame: bars, grain, timeline, nav ---------- */
body.look-pastel .letterbox.top { box-shadow: 0 6px 24px rgba(160, 42, 99, .12); }
body.look-pastel .letterbox.bottom { box-shadow: 0 -6px 24px rgba(160, 42, 99, .12); }
body.look-pastel .letterbox .tick { opacity: .9; }
body.look-pastel .grain { opacity: .035; mix-blend-mode: multiply; }
body.look-pastel .timeline { background: rgba(160, 42, 99, .18); }
body.look-pastel .timeline .fill { box-shadow: 0 0 10px rgba(160, 42, 99, .35); }
body.look-pastel nav.solid { background: linear-gradient(rgba(253, 243, 246, .96), rgba(253, 243, 246, 0)); }
body.look-pastel nav .logo img,
body.look-pastel #tair-preloader .tp-logo,
body.look-pastel .foot-logo img { filter: brightness(0); opacity: .82; }
body.look-pastel nav .navlinks a { font-weight: 400; }
body.look-pastel .nav-burger span { background: var(--ivory); }
@media (max-width: 900px) {
  body.look-pastel nav .navlinks.open { background: var(--ink-2); border-color: rgba(160, 42, 99, .25); box-shadow: 0 20px 50px rgba(160, 42, 99, .15); }
}

/* ---------- full-bleed section images: light, with a blush wash ---------- */
body.look-pastel .chapter .frame-bg img,
body.look-pastel #music .frame-bg img,
body.look-pastel #shows .frame-bg img,
body.look-pastel #outro .frame-bg img { filter: saturate(.75) brightness(1.08) contrast(.92); }
body.look-pastel #hero .frame-bg img,
body.look-pastel #hero .frame-bg video { filter: saturate(.8) brightness(1.1) contrast(.9) !important; }
body.look-pastel .vignette {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(251, 233, 239, .58) 30%, rgba(251, 233, 239, .82) 72%, rgba(251, 233, 239, .96) 100%),
    linear-gradient(180deg, rgba(251, 233, 239, .7), rgba(251, 233, 239, .5) 40%, rgba(251, 233, 239, .82));
}
body.look-pastel #hero .vignette {
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(251, 233, 239, .42) 0%, rgba(251, 233, 239, .55) 60%, rgba(251, 233, 239, .88) 100%),
    linear-gradient(180deg, rgba(251, 233, 239, .5), rgba(251, 233, 239, .22) 45%, rgba(251, 233, 239, .7));
}

/* ---------- hero ---------- */
body.look-pastel .hero-name { color: var(--ivory); text-shadow: 0 6px 40px rgba(253, 243, 246, .9); }
body.look-pastel .scroll-hint { color: var(--ivory-dim); }

/* ---------- buttons ---------- */
body.look-pastel .btn:hover { color: #fff; }
body.look-pastel .btn.ghost { border-color: rgba(51, 32, 43, .35); }
body.look-pastel .btn.ghost::before { background: var(--ivory); }
body.look-pastel .btn.ghost:hover { color: var(--black); }
body.look-pastel #hero .btn { background: rgba(253, 243, 246, .55); }

/* ---------- music ---------- */
body.look-pastel .album-cover img { box-shadow: 0 30px 70px rgba(160, 42, 99, .22); border-color: rgba(160, 42, 99, .25); }
body.look-pastel .platforms a { border-color: rgba(160, 42, 99, .35); background: rgba(253, 243, 246, .5); }
body.look-pastel .platforms a:hover { background: var(--gold); color: #fff; }
body.look-pastel .tracklist li { color: var(--ivory); border-bottom-color: rgba(51, 32, 43, .1); }
body.look-pastel .spotify-embed { box-shadow: 0 20px 50px rgba(160, 42, 99, .18); }
body.look-pastel .single-card { border-color: rgba(160, 42, 99, .25); }
body.look-pastel .single-card img { filter: none; }
body.look-pastel .single-card:hover img { filter: brightness(1.04); }
body.look-pastel .single-card .single-title { color: var(--gold); background: linear-gradient(rgba(253, 243, 246, 0), rgba(253, 243, 246, .94)); }

/* ---------- shows / generic section bits ---------- */
body.look-pastel .show-row,
body.look-pastel .show-row:last-child { border-color: rgba(160, 42, 99, .2); }
body.look-pastel .tickets-disabled { border-color: rgba(51, 32, 43, .2); }
body.look-pastel .about-portrait img,
body.look-pastel .epk-visual img,
body.look-pastel .video-stage img,
body.look-pastel .clip img,
body.look-pastel .g-item img { filter: none; }
body.look-pastel .about-portrait .tag { background: linear-gradient(rgba(253, 243, 246, 0), rgba(253, 243, 246, .92)); }
body.look-pastel .play-btn .ring { background: rgba(253, 243, 246, .55); }

/* ---------- newsletter + footer ---------- */
body.look-pastel .news input { border-color: rgba(160, 42, 99, .35); background: rgba(253, 243, 246, .6); }
body.look-pastel footer { border-top-color: rgba(160, 42, 99, .2); }
body.look-pastel .foot-credit { color: var(--ivory-dim); }
body.look-pastel .foot-kamea { opacity: .75; }
body.look-pastel .foot-kamea img { filter: brightness(0); }
body.look-pastel .ocw-credit { background: var(--bar) !important; color: var(--ivory-dim) !important; border-top-color: rgba(160, 42, 99, .15) !important; }
body.look-pastel .ocw-credit a { color: var(--gold) !important; }

/* ---------- preloader ---------- */
body.look-pastel #tair-preloader .tp-bar { background: rgba(51, 32, 43, .12); }

/* ---------- shop ---------- */
body.look-pastel .woo-main { background: var(--black); }
body.look-pastel.woocommerce ul.products li.product,
body.look-pastel.woocommerce-page ul.products li.product { background: var(--ink-2); border-color: rgba(160, 42, 99, .14); }
body.look-pastel.woocommerce ul.products li.product:hover { border-color: var(--gold); box-shadow: 0 26px 50px rgba(160, 42, 99, .16); }
body.look-pastel .th-soon-badge { background: var(--ink-2); }
body.look-pastel .woo-main a.btn.th-buy-primary { color: #fff; }
body.look-pastel .woo-main a.btn.th-buy:hover { color: #fff; }
body.look-pastel.woocommerce div.product .woocommerce-product-gallery .flex-viewport { box-shadow: 0 30px 70px rgba(160, 42, 99, .18); }
body.look-pastel .th-showcase-item { border-color: rgba(160, 42, 99, .14); }

/* ---------- accessibility button, cookie banner (same structure, light) ---------- */
body.look-pastel .th-a11y-fab { background: rgba(253, 243, 246, .9); box-shadow: 0 10px 30px rgba(160, 42, 99, .18); }
body.look-pastel .th-a11y-fab:hover,
body.look-pastel .th-a11y-fab:focus-visible { color: #fff; }
body.look-pastel .th-a11y-panel,
body.look-pastel .th-cookie {
  background: linear-gradient(180deg, #fff7fa, var(--ink-2));
  border-color: rgba(160, 42, 99, .3);
  box-shadow: 0 24px 60px rgba(160, 42, 99, .2);
}
body.look-pastel .th-cookie-btn.th-primary { color: #fff; }

/* ---------- top bar v2 + bright hero (client mockup, 26/10/2026) ----------
   Over the clip the bar looks the same as the original look (white links,
   pink logo, soft dark top shade); once scrolled it turns blush with plum
   links and a deeper pink logo. */
body.look-pastel nav.nav-v2 .logo img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .3)); opacity: 1; }
body.look-pastel nav.nav-v2 .navlinks a { color: #fff; }
body.look-pastel nav.nav-v2 .nav-burger span { background: #fff; }
body.look-pastel nav.nav-v2.solid { background: linear-gradient(rgba(253, 243, 246, .97), rgba(253, 243, 246, 0)); }
body.look-pastel nav.nav-v2.solid .navlinks a { color: var(--ivory); text-shadow: none; }
body.look-pastel nav.nav-v2.solid .navlinks a::after { background: var(--gold); }
body.look-pastel nav.nav-v2.solid .nav-social a { color: var(--gold); filter: none; }
body.look-pastel nav.nav-v2.solid .logo img { filter: saturate(1.6) brightness(.78); }
body.look-pastel nav.nav-v2.solid .nav-burger span { background: var(--ivory); }
body.look-pastel #hero .frame-bg img,
body.look-pastel #hero .frame-bg video { filter: brightness(1.04) saturate(1.06) contrast(1) !important; }
body.look-pastel #hero .vignette {
  background: linear-gradient(180deg, rgba(51, 32, 43, .45) 0%, rgba(51, 32, 43, .12) 18%, rgba(51, 32, 43, 0) 32%, rgba(251, 233, 239, 0) 72%, rgba(251, 233, 239, .3) 100%);
}
body.look-pastel #hero .btn { background: rgba(253, 243, 246, .78); color: var(--ivory); border-color: var(--gold); }
body.look-pastel #hero .btn::before { background: var(--gold); }
body.look-pastel #hero .btn:hover { color: #fff; }
body.look-pastel #hero .scroll-hint { color: #fff; }
@media (max-width: 1180px) {
  body.look-pastel nav.nav-v2 .navlinks.open { background: var(--ink-2); border-color: rgba(160, 42, 99, .25); box-shadow: 0 20px 50px rgba(160, 42, 99, .15); }
  body.look-pastel nav.nav-v2 .navlinks.open a { color: var(--ivory); text-shadow: none; }
  body.look-pastel nav.nav-v2 .navlinks.open a::after { background: var(--gold); }
  body.look-pastel nav.nav-v2 .navlinks.open .nav-social a { color: var(--gold); filter: none; }
  body.look-pastel nav.nav-v2 .navlinks.open .nav-social.in-menu { border-top-color: rgba(160, 42, 99, .2); }
}