/* ============================================================================ HERC. — SEASONAL THEME LAYER ---------------------------------------------------------------------------- Every rule in this file is scoped to [data-theme="..."] on . With no data-theme set, this file matches NOTHING and the site renders exactly as it does without it. styles.css is never modified. Switch it on/off in js/theme.js (single THEME constant). HALLOWEEN — direction: hi-vis safety orange, not costume. HERC prints trade workwear, so hi-vis orange is authentic to the brand AND reads as Halloween against the existing near-black canvas. No cobwebs, no purple, no cartoon. The site's structure, type and layout never change — only the accent hue and the ambient glow shift. ========================================================================== */ /* ---------- tokens: the accent swap that carries most of the theme ---------- */ [data-theme="halloween"]{ --olive:#e07a2f; /* fill accent — black label on it ≈ 7:1 contrast */ --olive-bright:#ff9a54; /* accent at text level on dark ≈ 9:1 contrast */ --olive-deep:#8f3a0e; --accent-rgb:224,122,47;/* for the re-declared rgba() rules below */ } /* ---------- rules in styles.css that hardcode the olive rgb ---------- These bypass the tokens, so the theme re-declares them here rather than editing styles.css. Same rules, same values, accent swapped. ------------------------------------------------------------------ */ /* ambient environment glow */ [data-theme="halloween"] .env::before{ background: radial-gradient(ellipse 60% 45% at 18% 12%,rgba(var(--accent-rgb),.11),transparent 60%), radial-gradient(ellipse 50% 40% at 85% 88%,rgba(var(--accent-rgb),.07),transparent 60%); } /* buttons */ [data-theme="halloween"] .btn-primary:hover{ box-shadow:0 10px 30px rgba(var(--accent-rgb),.25); } /* the header button sits on the dark bar: deeper tone, true-black label. #c86a24 vs #050604 ≈ 5.4:1, matching the olive original's contrast. */ [data-theme="halloween"] .site-header .btn-primary{background:#c86a24;color:#050604} [data-theme="halloween"] .site-header .btn-primary:hover{background:#e07a2f} /* hero */ [data-theme="halloween"] .hero-kicker{border-color:rgba(var(--accent-rgb),.32)} [data-theme="halloween"] .hero-reach a{border-bottom-color:rgba(var(--accent-rgb),.38)} /* card + tile hover borders */ [data-theme="halloween"] .svc-card:hover, [data-theme="halloween"] .supply-card:hover{border-color:rgba(var(--accent-rgb),.5)} [data-theme="halloween"] .supply-logo:hover{border-color:rgba(var(--accent-rgb),.5)} [data-theme="halloween"] .contact-card:hover{border-color:rgba(var(--accent-rgb),.45)} /* about frame + process step glow */ [data-theme="halloween"] .about-media::after{border-color:rgba(var(--accent-rgb),.35)} [data-theme="halloween"] .step.lit .step-icon{ border-color:rgba(var(--accent-rgb),.55); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08),0 14px 30px rgba(0,0,0,.35); } /* ---------- seasonal deadline bar ---------- Only rendered when theme.js has a DEADLINE string configured. For a printing business the useful seasonal element is an order cutoff, not decoration. Sits under the fixed header, scrolls away with the page. ------------------------------------------------------------------ */ .season-bar{ position:relative;z-index:90; background:var(--olive-deep); border-bottom:1px solid rgba(var(--accent-rgb),.45); color:#fff0e4; font-family:var(--font-m);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase; padding:11px 20px;text-align:center;line-height:1.5; } .season-bar b{color:#ffd7b8;font-weight:500} .season-bar a{ color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px; transition:border-color .25s var(--ease); } .season-bar a:hover{border-bottom-color:#fff} /* the header is fixed, so the bar needs to clear it */ .has-season-bar .site-header{top:var(--season-bar-h,42px)} .has-season-bar .season-bar{position:fixed;top:0;left:0;right:0} .has-season-bar body{padding-top:var(--season-bar-h,42px)} @media(max-width:560px){ .season-bar{font-size:.68rem;letter-spacing:.1em;padding:10px 14px} /* the flanking pumpkins wrap onto their own lines at this width and triple the bar's height; the greeting already carries the season */ .season-bar .pump{display:none} } @media(prefers-reduced-motion:reduce){ .season-bar a{transition:none} } /* ---------- decoration (DECOR flag in theme.js) ---------- HERC prints graphics onto garments, so the Halloween decoration is dressed as a screen print: heavy condensed type, a deliberately mis-registered ink layer behind it, and pumpkins drawn as flat spot-colour shapes. That keeps it unmistakably Halloween while still looking like this print shop made it. ------------------------------------------------------------------ */ /* pumpkins sitting either side of the bar text */ .season-bar .pump{width:18px;height:18px;flex:none;color:#ff9a54;vertical-align:-4px} .season-bar .bar-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} .season-bar .greet{color:#ffd7b8;font-weight:500} /* the printed stamp above the footer */ .hw-stamp{ position:relative; display:flex;flex-direction:column;align-items:center;gap:18px; padding:clamp(44px,7vh,80px) 20px clamp(30px,5vh,52px); text-align:center;overflow:hidden; } .hw-stamp .hw-word{ position:relative; font-family:var(--font-d); font-size:clamp(1.9rem,7vw,4.4rem); line-height:.94;letter-spacing:.01em;text-transform:uppercase; color:#e07a2f; transform:rotate(-2.2deg); /* mis-registered second ink pass, the way a rushed screen print looks */ text-shadow:3px 3px 0 rgba(143,58,14,.85), -2px -1px 0 rgba(255,215,184,.14); } .hw-stamp .hw-sub{ font-family:var(--font-m);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase; color:var(--grey-dim); } .hw-stamp .hw-pumpkins{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,30px)} .hw-stamp .pump{color:#e07a2f} .hw-stamp .pump:nth-child(1){width:34px;height:34px;opacity:.55;transform:rotate(-9deg)} .hw-stamp .pump:nth-child(2){width:54px;height:54px} .hw-stamp .pump:nth-child(3){width:30px;height:30px;opacity:.45;transform:rotate(11deg)} /* faint pumpkins drifting in the fixed background layer */ .hw-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .hw-field .pump{position:absolute;color:#e07a2f;opacity:.055} .hw-field .pump:nth-child(1){width:150px;height:150px;top:12%;left:-3%;transform:rotate(-12deg)} .hw-field .pump:nth-child(2){width:96px;height:96px;top:58%;right:-2%;transform:rotate(14deg)} .hw-field .pump:nth-child(3){width:120px;height:120px;bottom:-4%;left:38%;transform:rotate(6deg)} @media(max-width:720px){ .hw-field .pump:nth-child(3){display:none} .hw-field .pump{opacity:.045} } @media(prefers-reduced-motion:no-preference){ .hw-field .pump{animation:hwdrift 34s ease-in-out infinite alternate} .hw-field .pump:nth-child(2){animation-duration:44s;animation-delay:-8s} .hw-field .pump:nth-child(3){animation-duration:52s;animation-delay:-20s} } @keyframes hwdrift{from{translate:0 -10px}to{translate:0 14px}} /* the site already pauses its motion on hidden tabs; match that */ body.paused .hw-field .pump{animation-play-state:paused} /* ============================================================================ DEMO ONLY — full seasonal dress-up Spider webs, a hanging spider, and the HAPPY HALLOWEEN print on the hero. The hero content sits right-aligned on desktop and bottom-left on mobile, so the greeting takes the empty side in each case and never fights the h1. ========================================================================== */ /* ---------- corner spider webs ---------- */ .hw-webs{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden} .hw-web{position:absolute;color:#ffb27a;opacity:.42;width:clamp(150px,20vw,280px);height:auto} /* clear the fixed header: the header bar is transparent at the top of the page, so a web anchored at 0 tangles with the wordmark and the nav. --hw-hdr is published by theme.js from the header's real height. */ .hw-web.tl{top:var(--hw-hdr,72px);left:0} .hw-web.tr{top:var(--hw-hdr,72px);right:0;transform:scaleX(-1)} @media(max-width:720px){ .hw-web{opacity:.38;width:clamp(120px,34vw,180px)} /* only one web fits on a phone, and it's the right-hand one, so it sits with the spider rather than stranding it on the opposite corner */ .hw-web.tl{display:none} .hw-web.tr{display:block} } /* ---------- spider on a thread ---------- */ /* hangs within the right-hand web's span, so it reads as being on the web rather than dangling in empty space on the far side of the hero */ .hw-spider{ position:absolute;top:var(--hw-hdr,72px);right:clamp(120px,16vw,250px);z-index:2; width:clamp(28px,2.8vw,42px);height:auto;color:#ffb27a;opacity:.75; transform-origin:50% 0;pointer-events:none; } @media(max-width:720px){.hw-spider{right:clamp(92px,26vw,140px);width:27px;opacity:.7}} @media(prefers-reduced-motion:no-preference){ .hw-spider{animation:hwsway 6.5s ease-in-out -1s infinite alternate} } @keyframes hwsway{from{rotate:-5deg}to{rotate:5deg}} body.paused .hw-spider{animation-play-state:paused} /* ---------- HAPPY HALLOWEEN, printed onto the hero ---------- Lives inside .hero-content so it can never collide with the headline. Desktop: hero copy is right-aligned, so the greeting is lifted out of flow onto the empty left half. Mobile: hero copy switches to left-aligned and fills the box, so the greeting stays in the flow as one line above the kicker rather than being absolutely placed on top of it. ------------------------------------------------------------------ */ .hw-hero-greet{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);pointer-events:none} .hw-hero-greet .hw-greet-word{ font-family:var(--font-d);text-transform:uppercase; line-height:.88;letter-spacing:.005em;color:#e07a2f; /* second ink pass, deliberately off-register like a rushed screen print */ text-shadow:3px 3px 0 rgba(143,58,14,.9),-2px -1px 0 rgba(255,215,184,.16); } .hw-hero-greet .pump{color:#e07a2f;flex:none;filter:drop-shadow(3px 3px 0 rgba(143,58,14,.75))} @media(min-width:721px){ .hw-hero-greet{position:absolute;left:0;top:50%;z-index:2;transform:translateY(-50%) rotate(-4deg)} /* HAPPY sits centred over the wider HALLOWEEN rather than flush left */ .hw-hero-greet .hw-greet-word{font-size:clamp(2rem,4.4vw,3.5rem);text-align:center} .hw-hero-greet .hw-greet-word span{display:block} .hw-hero-greet .pump{width:clamp(38px,4vw,58px);height:auto} } @media(max-width:720px){ /* order:1 drops it to the end of the hero stack. The wordmark is top-left and the hero copy already reaches the header on small phones, so putting the greeting last is the only placement that never touches the logo. */ /* straight on phones — the tilt reads as misalignment at this size */ .hw-hero-greet{order:1;align-self:flex-start;margin-top:18px;transform:none} .hw-hero-greet .hw-greet-word{font-size:clamp(1.1rem,5.2vw,1.55rem)} .hw-hero-greet .hw-greet-word span{display:inline} .hw-hero-greet .hw-greet-word span:last-child{padding-left:.22em} .hw-hero-greet .pump{width:clamp(20px,5.4vw,27px);height:auto} } @media(max-width:400px){.hw-hero-greet{gap:8px;margin-top:14px}} @media(prefers-reduced-motion:reduce) and (max-width:720px){.hw-hero-greet{transform:none}} @media(prefers-reduced-motion:reduce) and (min-width:721px){.hw-hero-greet{transform:translateY(-50%)}} /* ---------- premium treatment for the hero contact line (DEMO PREVIEW) ------ Not seasonal. Scoped to the theme only so the demo can show it; if you like it, it moves into styles.css un-scoped so it applies with the theme off. The line currently sits in plain body copy, which is why it reads like an afterthought. The site already speaks in IBM Plex Mono for every piece of small utility type — the hero kicker, the JOB tickets, the contact-card labels — so this joins that voice: a wide-tracked caps label, then the number and address as the values, with the phone carrying the most weight because it is the strongest action on a phone. -------------------------------------------------------------------------- */ [data-theme="halloween"] .hero-reach{ margin-top:26px; font-family:var(--font-m); font-size:.78rem; line-height:2; color:var(--grey); } [data-theme="halloween"] .hero-reach .reach-label{ text-transform:uppercase;letter-spacing:.24em;font-size:.66rem; color:var(--grey);margin-right:.45em; } [data-theme="halloween"] .hero-reach a{ color:var(--paper);letter-spacing:.04em; /* a hairline rather than a full underline: still a visible affordance, but it stops the line reading like two default HTML links in a row */ border-bottom:1px solid rgba(242,242,237,.18);padding-bottom:2px; transition:color .3s var(--ease),border-color .3s var(--ease); } [data-theme="halloween"] .hero-reach a[href^="tel:"]{font-size:.92rem;letter-spacing:.02em} [data-theme="halloween"] .hero-reach a:hover, [data-theme="halloween"] .hero-reach a:focus-visible{ color:var(--olive-bright);border-bottom-color:var(--olive-bright); } [data-theme="halloween"] .hero-reach span[aria-hidden]{opacity:.45;margin:0 .45em} /* keep the touch tap target the base site gives these links */ @media(pointer:coarse){ [data-theme="halloween"] .hero-reach a{display:inline-block;padding:6px 0 4px} } /* ---------- mobile hero: uncramping (DEMO PREVIEW) -------------------------- At 375px the hero stacks six blocks into 611px of usable space below the fixed header and overflows by 84px, which pushes the headline up underneath the header. The base site has the same problem (36px); the seasonal greeting and the restyled contact line widened it. Nothing in this block applies above 720px — desktop is untouched. If you approve it, it moves into styles.css un-scoped. -------------------------------------------------------------------------- */ @media(max-width:720px){ /* 1. The three promises are repeated word-for-word in the CTA panel further down the same page, so hiding them here costs nothing — not for sighted users, not for screen readers. This is the single biggest saving. */ [data-theme="halloween"] .hero-ticks{display:none} /* 2. min-height, not height. A fixed svh height clips: on a short phone (360x640) the copy is taller than the box and disappears under the header no matter how much spacing is trimmed. min-height keeps the tall-phone composition and lets short phones grow instead. */ [data-theme="halloween"] .hero{height:auto;min-height:88svh} /* with the hero free to grow, the copy clears the fixed header explicitly rather than relying on there happening to be room */ [data-theme="halloween"] .hero-content{padding-top:calc(var(--hw-hdr,72px) + 26px)} /* 3. Tighten the rhythm between the blocks that remain. The headline carries the most margin in the base styles and can give some back safely. */ [data-theme="halloween"] .hero h1{margin:18px 0 14px} [data-theme="halloween"] .hero-ctas{margin-top:24px} [data-theme="halloween"] .hero-reach{margin-top:20px;line-height:1.85} /* the phone and email wrap onto separate lines at this width, which leaves the separator dot orphaned at the end of the first line */ [data-theme="halloween"] .hero-reach span[aria-hidden]{display:none} [data-theme="halloween"] .hw-hero-greet{margin-top:14px} } /* ---------- spider hanging off the HERC wordmark (desktop) ---------- Anchored to the logo itself so the thread starts at its lower edge. Hidden on phones: the header is tighter there and it would crowd the hamburger. pointer-events:none so it can never intercept a logo click. ------------------------------------------------------------------ */ @media(min-width:721px){ .site-header .wordmark{position:relative} .hw-logo-spider{ position:absolute;top:100%;left:38%; width:26px;height:auto;color:#ffb27a;opacity:.8; transform-origin:50% 0;pointer-events:none; } } @media(max-width:720px){ .hw-logo-spider{display:none} } @media(min-width:721px) and (prefers-reduced-motion:no-preference){ .hw-logo-spider{animation:hwsway 7.5s ease-in-out -2s infinite alternate} } body.paused .hw-logo-spider{animation-play-state:paused}