/* Site looks (App\Services\Look): zone themes picked in the footer or on the Account page. This file
   loads only while a look is on. Each look replaces the faction colours (header too), picks a frame,
   and puts its picture behind the windows: fixed, under a dark fade (--look-at: the clear spot;
   --look-shade: the fade's colour as r,g,b). Panels are slightly see-through so the picture shows.
   Concepts, palettes and source shots: design/themes/ (repo root). */

body { background: var(--page); }
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 75% 55% at var(--look-at), rgba(var(--look-shade), var(--look-clear)), rgba(var(--look-shade), var(--look-dark)) 75%),
    var(--look-img) var(--look-pos) / cover no-repeat var(--page);
}
.site-header, .site-footer { background: rgba(var(--look-shade), .86); }
.home-banner > img[src*="/looks/"] { object-position: var(--look-banner); }

html.look-ashenvale, html.look-ashenvale .site-header {
--page: #070B09; --panel-top: rgba(20,30,26,.92); --panel-bottom: rgba(11,16,14,.94); --well: #070C0A;
--ring: #4E6B3A; --ring-strong: #6C8F48; --ring-faint: #2E4026; --ring-dim: #24331E; --line: #1F2B22;
--banner: linear-gradient(#6B1F3A 0%, #4A1328 55%, #2E0B19 100%);
--btn: linear-gradient(#7E2646 0%, #561830 60%, #3A0F21 100%); --btn-ring: #8E2D50;
--glow: #14261A; --pill: linear-gradient(#5E8A34, #2E4A1A);
--frame: url(/assets/img/frame-gold.png);
--look-img: url(/assets/img/looks/ashenvale-1600.webp); --look-pos: center top; --look-at: 50% 30%;
--look-shade: 7,11,9; --look-clear: .15; --look-dark: .78; --look-banner: center 55%;
}

html.look-booty-bay, html.look-booty-bay .site-header {
--page: #070B14; --panel-top: rgba(14,22,36,.92); --panel-bottom: rgba(9,14,24,.95); --well: #060A12;
--ring: #5A4630; --ring-strong: #8A6A42; --ring-faint: #33291C; --ring-dim: #2A2218; --line: #1A2233;
--banner: linear-gradient(#2F5A34 0%, #1F3F24 55%, #132816 100%);
--btn: linear-gradient(#C9692A 0%, #9A4A18 60%, #6E330F 100%); --btn-ring: #E08A3E;
--glow: #13203A; --pill: linear-gradient(#2F5A34, #132816); --gold-dim: #F2A04A;
--frame: url(/assets/img/frame-gold.png);
--look-img: url(/assets/img/looks/booty-bay-1600.webp); --look-pos: center 60%; --look-at: 50% 55%;
--look-shade: 7,11,20; --look-clear: .1; --look-dark: .78; --look-banner: center 70%;
}

html.look-moonwell, html.look-moonwell .site-header {
--page: #060A0B; --panel-top: rgba(14,22,26,.92); --panel-bottom: rgba(8,13,16,.95); --well: #050A0C;
--ring: #4A5A66; --ring-strong: #7C93A3; --ring-faint: #2C3640; --ring-dim: #222B33; --line: #1A242B;
--banner: linear-gradient(#2A4A5E 0%, #1A3142 55%, #0E1E2A 100%);
--btn: linear-gradient(#2E6E80 0%, #1C4C5C 60%, #123642 100%); --btn-ring: #4FB3C8;
--glow: #0F2630; --pill: linear-gradient(#2E6E80, #123642); --gold-dim: #7FCFDC;
--frame: url(/assets/img/frame-silver.png);
--look-img: url(/assets/img/looks/moonwell-1600.webp); --look-pos: 70% top; --look-at: 62% 40%;
--look-shade: 6,10,11; --look-clear: .1; --look-dark: .8; --look-banner: 65% 60%;
}

html.look-mulgore, html.look-mulgore .site-header {
--page: #0F0B08; --panel-top: rgba(34,26,18,.92); --panel-bottom: rgba(20,15,10,.95); --well: #0C0906;
--ring: #7A5A34; --ring-strong: #A07844; --ring-faint: #4A3820; --ring-dim: #3A2C1A; --line: #2E2418;
--banner: linear-gradient(#B8642A 0%, #8A4418 55%, #5A2A0E 100%);
--btn: linear-gradient(#C97A32 0%, #96561E 60%, #683A12 100%); --btn-ring: #E0A050;
--glow: #3A2414; --pill: linear-gradient(#6B7A34, #3A4418); --gold-dim: #F0B060;
--frame: url(/assets/img/frame-gold.png);
--look-img: url(/assets/img/looks/mulgore-1600.webp); --look-pos: center 40%; --look-at: 60% 35%;
--look-shade: 15,11,8; --look-clear: .1; --look-dark: .76; --look-banner: 70% 45%;
}

html.look-stormwind-harbor, html.look-stormwind-harbor .site-header {
--page: #0B0A14; --panel-top: rgba(24,22,40,.92); --panel-bottom: rgba(14,13,26,.95); --well: #09081A;
--ring: #6A5A7A; --ring-strong: #9A82A8; --ring-faint: #3A3048; --ring-dim: #2C2638; --line: #22203A;
--banner: linear-gradient(#2E4A8A 0%, #1E3266 55%, #121F44 100%);
--btn: linear-gradient(#E0843A 0%, #B0601E 60%, #7E4212 100%); --btn-ring: #F2A85A;
--glow: #2A2040; --pill: linear-gradient(#2E4A8A, #121F44); --gold-dim: #F5B470;
--frame: url(/assets/img/frame-gold.png);
--look-img: url(/assets/img/looks/stormwind-harbor-1600.webp); --look-pos: center 35%; --look-at: 55% 35%;
--look-shade: 11,10,20; --look-clear: .08; --look-dark: .74; --look-banner: 55% 50%;
}