/* ============================================================ BuilderNow - Seasonal Theme: Halloween ------------------------------------------------------------ Active Oct 18 - Nov 1 (includes/bn-season.php), on the public site, the admin panel and the client dashboard at once. Loaded after css/tokens.css, so redefining a variable here moves every surface that reads it. TWO LAYERS, AND THE SECOND IS SCOPED ------------------------------------ 1. The palette, on :root. Applies everywhere. This is most of the effect: the product is already dark, so Halloween is a shift from navy toward aubergine with pumpkin where the amber was, rather than a costume bolted on. 2. Ornament, scoped to body.bn-public. The marketing site gets atmosphere; the panels do not, because an admin stares at those for eight hours and a dashboard is a customer's billing page, not a greeting card. NO LAYOUT CHANGES, ANYWHERE --------------------------- Nothing here sets width, height, display, position or margin on a content element. These themes switch themselves on by the calendar while nobody is watching, so a theme must not be able to break a page that nobody has looked at since last year. The ornament is drawn entirely with fixed-position pseudo-elements that take no space and ignore the pointer. WHY IT IS RESTRAINED -------------------- This site sells websites to roofers and concrete contractors. A seasonal palette reads as a business that is paying attention; a cartoon bat reads as a business that is not. ============================================================ */ :root { /* ---- Surfaces: navy -> aubergine ---- */ --bn-surface: #150f1f; --bn-surface-raised: #231a33; --bn-surface-deep: #0c0813; --bn-border: #3b2d52; /* ---- Pumpkin takes the accent, violet takes the action ---- */ --bn-accent: #ff7a18; --bn-accent-hover: #e86a0c; --bn-accent-light: #42240c; --bn-accent-lighter: #2b1708; --bn-primary: #7c3aed; --bn-primary-hover: #6d28d9; --bn-primary-active: #5b21b6; --bn-primary-light: #3b1d74; --bn-primary-lighter: #241046; --bn-link: #c9a6ff; /* ---- The gray ramp shifts with the surfaces so borders and muted text keep the same contrast they had ---- */ --bn-gray-50: #150f1f; --bn-gray-100: #231a33; --bn-gray-200: #3b2d52; --bn-gray-300: #51406e; --bn-gray-400: #9b8bb5; --bn-gray-500: #a596bd; --bn-gray-600: #d6cde6; --bn-gray-700: #e9e3f3; --bn-gray-800: #f4f1fa; --bn-gray-900: #fbfaff; /* Semantic colors keep their hue -- a failed card must read as a failed card in October as well as in December. Only the tinted BACKGROUND behind each band moves into the season's palette, so an alert stops looking like it was pasted in from another site. */ --bn-success-light: #0d3b2c; --bn-warning-light: #43280a; --bn-danger-light: #4a1a22; --bn-info-light: #22275e; --bn-shadow-accent: 0 10px 25px -5px rgb(255 122 24 / 0.35); /* Without this the primary button keeps the stock BLUE glow from tokens.css under a violet face, which looks like a bug. */ --bn-shadow-primary: 0 10px 25px -5px rgb(124 58 237 / 0.35); } /* ------------------------------------------------------------ ORNAMENT -- PUBLIC SITE ONLY ------------------------------------------------------------ */ /* A low moon behind the top of the page and a warm rise from the footer. Both are fixed, behind everything, and inert: they add depth without touching a single box on the page. z-index 0 with the page content left alone works because the content already establishes its own stacking above a static background; nothing here is given a negative z-index, which would put it behind body's own background and vanish. */ body.bn-public::before, body.bn-public::after { content: ""; position: fixed; left: 0; right: 0; pointer-events: none; z-index: 0; } /* Moonrise: a cold disc high right, warmed by pumpkin low left. */ body.bn-public::before { top: 0; height: 70vh; background: radial-gradient(42rem 28rem at 82% -12%, rgb(201 166 255 / 0.16), transparent 70%), radial-gradient(34rem 22rem at 8% -6%, rgb(255 122 24 / 0.10), transparent 70%); } /* Embers from the foot of the page. */ body.bn-public::after { bottom: 0; height: 46vh; background: radial-gradient(48rem 24rem at 50% 118%, rgb(255 122 24 / 0.12), transparent 72%); } /* The page's own sections paint over the wash, so the atmosphere reads at the edges and behind the hero rather than muddying the text. Anything that sets its own background stays above it. */ body.bn-public > * { position: relative; z-index: 1; } /* The wordmark's second half is already the accent, which is now pumpkin -- so "Now" lights up for the season on its own, with no rule needed here. The nav just gets a warmer hairline. */ body.bn-public .bn-navbar { border-bottom-color: rgb(255 122 24 / 0.22); } /* Primary CTAs pick up a pumpkin glow instead of the blue one. */ body.bn-public .btn-primary, body.bn-public .bn-btn-primary { box-shadow: var(--bn-shadow-accent); } /* ------------------------------------------------------------ REDUCED MOTION / PRINT ------------------------------------------------------------ There is no animation to disable, but the washes are pure decoration and cost ink, so they come off for print. */ /* ------------------------------------------------------------ THE CONTRACTORS BAND ------------------------------------------------------------ Warm toward pumpkin, shadows sunk into aubergine. The band's own background and its four edge fades already read var(--bn-surface), so they followed the season from day one. Only the photograph itself needed handling, and it is GRADED rather than replaced: one photo lit ten ways never looks like stock, and it adds no bytes to a page that already carries the image. NO hue-rotate. The first version of this used one, and on a sepia base it swung the hard hats green for Christmas and purple for Easter -- which does not read as a season, it reads as a broken image. The hats are the subject of the photograph. So the cast comes from the wash and from pulling saturation down, and every hue in the photo keeps its relationship to every other. The base filter in includes/bn-header.php is brightness(.48) contrast(1.10) saturate(.88); this replaces it outright rather than stacking, so the exposure stays predictable. ::before sits over the photo and under .bn-hero-photo::after, which carries the edge fades -- pseudo-elements paint in source order, so the fades stay on top and the band keeps its soft edges. No blend mode, so nothing here can reach the page behind the band. */ body.bn-public .bn-hero-photo img { filter: brightness(0.44) contrast(1.12) saturate(0.8) sepia(0.18); } body.bn-public .bn-hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(255 122 24 / .16) 0%, rgb(21 15 31 / .44) 100%); } /* ------------------------------------------------------------ SEASONAL PHOTOGRAPHY ------------------------------------------------------------ PAGE BANNERS features, pricing, about, contact and help each mount their own photo for this season -- see bn_season_banner() in includes/bn-season.php and images/seasons/halloween/. The photo is supplied by the page, not by this file; what this file does is recolor the readability scrim over it. buildernow.css hardcodes that scrim to the default blue/amber wash, so without this the banner would be a Halloween photo under a blue gradient. The DARK stops are what keep the heading legible, so they stay heavy; only the hue moves. SIGN-IN PAGES admin/login.php, dashboard/login.php, forgotpass.php and resetpassword.php -- everything carrying AdminLTE's .login-page. The original SVG scene is still in images/seasons/ if the photo ever needs to come back out: it was 38 KB against this photo's weight, which matters on a page people hit every day. The scrim is the FIRST background layer, over the photo, in the same property -- no extra element, so nothing can end up stacked over the sign-in card. Heaviest at the top, where the wordmark sits, lifting through the middle where the card's own opaque background takes over. WHY !important ON THE IMAGE -------------------------- bn-panel.css used to set `background: ... !important` on body, and the shorthand also sets background-image: none -- so the seasonal artwork lost to a rule that was only ever trying to set a colour. That is fixed in bn-panel.css, but the two files are uploaded separately and the sign-in page is the one place where an older bn-panel.css silently removes the background rather than merely recolouring it. Nothing else on these pages sets a body background-image, so this costs nothing and removes the ordering dependency. bn-panel.css sets background-color, -position, -size and -repeat for those pages, so this only supplies the image. Bump ?v= if a photo is ever replaced in place. */ body.bn-public .bn-page-hero-bg::after { background: linear-gradient(180deg, rgb(12 8 19 / .62) 0%, rgb(12 8 19 / .88) 100%), linear-gradient(135deg, rgb(124 58 237 / .30) 0%, transparent 52%, rgb(255 122 24 / .18) 100%); } body.login-page { background-image: linear-gradient(180deg, rgb(12 8 19 / .74) 0%, rgb(12 8 19 / .30) 42%, rgb(12 8 19 / .60) 100%), url('/images/seasons/halloween/login.webp?v=1') !important; } /* ------------------------------------------------------------ THE WORDMARK ------------------------------------------------------------ The Halloween header logo, swapped in over images/logo.png. content: url() rather than a background image. The is sized `height: Npx; width: auto`, so replacing its content lets the browser recompute the width from the new picture's own aspect ratio -- a background image would have to letterbox into a box still shaped for the old logo. Where content: url() is not supported the plain logo renders, which is the right fallback. WHY 96px AND NOT 70px --------------------- The base logo is 349x90, essentially all wordmark. These are 2072x759 -- about 2.8:1 against its 4.24:1 -- because roughly half the canvas is decoration. Dropped straight into the 70px slot the artwork renders 191px wide and "by SavePro Designs" stops being readable. At 96px the wordmark inside matches the plain logo's size and the whole thing is 262px wide against the original's 271 -- so the bar's horizontal layout barely moves. It does make the header about 26px taller for the season; that is the trade, and it is the one that keeps the name legible. The other three sizes are the same 1.37 ratio applied to the breakpoints in buildernow.css (70/48/40 desktop/960/480, and 56 in the footer), so the logo scales exactly as it does today. */ body.bn-public .bn-logo img { content: url('/images/seasons/logos/halloween.webp?v=1'); height: 96px; } body.bn-public .bn-footer-brand .bn-logo img { height: 77px; } @media (max-width: 960px) { body.bn-public .bn-logo img { height: 66px; } } @media (max-width: 480px) { body.bn-public .bn-logo img { height: 55px; } } @media print { body.bn-public::before, body.bn-public::after { display: none; } }