/* ============================================================= AuraNord — hero One constant backdrop: the brand mark, large, turning slowly. Only the wording cycles. Light and airy to match the rest of the site. Shared by index.html and, later, the town pages. ============================================================= */ .anh{position:relative;overflow:hidden;min-height:clamp(580px,80vh,780px);display:flex;align-items:center; padding:6rem 2rem 5rem; /* Near-white, and deliberately FLAT. The earlier version was a diagonal gradient with a teal wash behind the mark, which is what made the right-hand side look coloured and the left look washed out - the scrim was painting a paler tone back over the copy. One flat value, with the scrim set to the same value, keeps the band even edge to edge. */ background:#F7FAF9;} .anh-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#12A093;z-index:1;} /* Two blooms behind the mark, cross-fading on a slow cycle so the whole thing drifts from cool to warm and back. Always on; the cold-weather wording just pushes it further. */ .anh-glow{position:absolute;right:2%;top:50%;width:min(1240px,100vw);height:940px; transform:translate(12%,-50%);pointer-events:none;} .anh-cool{background:radial-gradient(ellipse at center,rgba(96,196,214,.34) 0%,rgba(63,168,196,.13) 38%,rgba(63,168,196,0) 66%); animation:anh-cool 24s ease-in-out infinite;} .anh-warm{background:radial-gradient(ellipse at center,rgba(90,222,196,.36) 0%,rgba(18,160,147,.15) 38%,rgba(18,160,147,0) 66%); animation:anh-warm 24s ease-in-out infinite;} @keyframes anh-cool{0%,100%{opacity:.85}50%{opacity:.12}} @keyframes anh-warm{0%,100%{opacity:.15}50%{opacity:.9}} .anh.glow-on .anh-cool{animation-duration:16s} .anh.glow-on .anh-warm{animation-duration:16s} /* keeps the left third clean for the words without darkening the page */ .anh-scrim{position:absolute;inset:0;z-index:2; background:linear-gradient(90deg,#F7FAF9 0%,rgba(247,250,249,.97) 36%,rgba(247,250,249,.86) 52%,rgba(247,250,249,.40) 70%,rgba(247,250,249,0) 92%);} .anh-in{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;} .anh-logo{height:78px;width:auto;display:block;margin-bottom:1.3rem; opacity:0;animation:anh-in .9s cubic-bezier(.2,.7,.3,1) .12s forwards;} /* the mark — full logo teal, and deliberately larger than the hero so it runs off the top and bottom edges rather than sitting politely inside */ .anh-mark{position:absolute;right:-4%;top:50%;transform:translateY(-50%); width:min(1460px,104vw);height:auto;overflow:visible;opacity:1; filter:drop-shadow(0 0 44px rgba(127,224,210,.18)); animation:anh-temp 24s ease-in-out infinite;} /* Cool teal through to warm green-teal and back, both inside the brand. The halo is deliberately faint and LIGHTER than the mark - light gets paler as it leaves the source, so a halo at the object's own strength reads as a blurred copy rather than a glow. The two blooms behind carry the colour; this only softens the edge. */ @keyframes anh-temp{ 0%,100%{color:#12A3B0;filter:drop-shadow(0 0 40px rgba(150,225,238,.16))} 50% {color:#14A184;filter:drop-shadow(0 0 58px rgba(150,238,214,.22))}} .anh-mark g{transform-origin:818px 866px;} .anh-a1{animation:anh-turn 26s linear infinite;} .anh-a2{animation:anh-turn 40s linear infinite reverse;} .anh-a3{animation:anh-turn 62s linear infinite;} .anh-core{transform-origin:818px 866px;animation:anh-pulse 6.5s ease-in-out infinite;} @keyframes anh-turn{to{transform:rotate(360deg)}} @keyframes anh-pulse{0%,100%{transform:scale(.965);opacity:.92}50%{transform:scale(1.045);opacity:1}} /* Only the headline and the paragraph change. Each sits in its own grid stack, so the container is sized by its tallest variant and nothing below it moves — the eyebrow, the buttons and the footnote stay exactly where they are. */ .anh-swap{display:grid;} /* a slow, soft cross-fade with barely any travel - the words should settle, not arrive */ .anh-t,.anh-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(4px); transition:opacity 1.25s ease,transform 1.25s cubic-bezier(.22,.61,.36,1),visibility 1.25s;} .anh-t.on,.anh-p.on{opacity:1;visibility:visible;transform:none;} .anh-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.74rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:#095E56;margin-bottom:.95rem; opacity:0;animation:anh-in .9s cubic-bezier(.2,.7,.3,1) .28s forwards;} .anh h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.6rem,6.6vw,5.1rem);font-weight:900; line-height:.98;letter-spacing:-1.5px;text-transform:uppercase;color:#141719;margin:0;max-width:15ch;} /* the teal words carry the same halo as the mark, and breathe on the same 24s cool-to-warm cycle, so the two feel lit by one thing */ /* Two shadow layers: a tight bright one that reads as the source, and a wide soft one that reads as light in the air. One layer alone just looks blurred. This is on every h1 em, so all three wordings glow - it only looked like one before because the halo was too faint to notice without the bloom behind it. */ .anh h1 em{font-style:normal;color:#0A6459; text-shadow:0 0 14px rgba(94,226,200,.62), 0 0 42px rgba(18,160,147,.48); animation:anh-emglow 24s ease-in-out infinite;} @keyframes anh-emglow{ 0%,100%{color:#0A6169; text-shadow:0 0 12px rgba(120,220,236,.58), 0 0 38px rgba(63,168,196,.46)} 50% {color:#0A6459; text-shadow:0 0 18px rgba(94,226,200,.70), 0 0 52px rgba(30,190,160,.58)}} .anh-heads{margin-bottom:1.25rem;} .anh-p{font-size:1.12rem;line-height:1.7;color:#3E4A4D;max-width:52ch;margin:0;} .anh-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem;} .anh-btn{display:inline-flex;align-items:center;gap:.5rem;background:#0C7A70;color:#fff;font-weight:700; font-size:.94rem;padding:.9rem 1.8rem;border-radius:100px;text-decoration:none;border:2px solid #0C7A70; transition:background .2s,border-color .2s,transform .2s;box-shadow:0 8px 22px rgba(12,122,112,.18);} .anh-btn:hover{background:#0A6259;border-color:#0A6259;transform:translateY(-2px);} .anh-btn.ghost{background:transparent;color:#0C7A70;border-color:rgba(12,122,112,.4);box-shadow:none;} .anh-btn.ghost:hover{background:rgba(18,160,147,.09);color:#0A6259;} .anh-note{font-size:.83rem;color:#4A585A;margin:1.05rem 0 0;} @keyframes anh-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* ---- controls ---- */ .anh-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:1.5rem;z-index:5; display:flex;gap:.55rem;align-items:center;max-width:1200px;width:100%;padding:0 2rem;justify-content:flex-start;} .anh-dot{width:36px;height:4px;border-radius:2px;border:0;padding:0;cursor:pointer; background:rgba(20,23,25,.16);position:relative;overflow:hidden;} .anh-dot i{position:absolute;inset:0;width:0;background:#0C7A70;display:block;} .anh-dot.on i{width:100%;transition:width 9.5s linear;} .anh-dot:focus-visible{outline:2px solid #0C7A70;outline-offset:3px;} .anh-pause{margin-left:.5rem;background:none;border:0;color:#7A8A8C;font:inherit; font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;} .anh-pause:hover{color:#0C7A70;} /* ---- stat rail ---- */ .anh-stats{display:flex;flex-wrap:wrap;gap:2.9rem;margin-top:2.7rem;position:relative;z-index:3; opacity:0;animation:anh-in 1s cubic-bezier(.2,.7,.3,1) .95s forwards;} .anh-stats .s{position:relative;padding-left:1rem;} .anh-stats .s::before{content:"";position:absolute;left:0;top:.18em;bottom:.9em;width:3px;border-radius:2px; background:linear-gradient(180deg,#12A093,rgba(18,160,147,0));} .anh-stats .s b{display:block;font-family:'Barlow Condensed',sans-serif; font-size:clamp(2.3rem,3.4vw,3.05rem);font-weight:900;color:#141719;line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;} .anh-stats .s b span{color:#0C7A70;} .anh-stats .s em{display:block;font-style:normal;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase; color:#4C5B5D;margin-top:.5rem;font-weight:600;} @media (prefers-reduced-motion: reduce){ .anh *{animation:none!important;transition:none!important} } @media(max-width:900px){ .anh{padding:4.8rem 1.4rem 3.8rem;min-height:auto;} .anh-logo{height:56px} .anh-sub{min-height:0} .anh-mark{right:-40%;width:165%;opacity:.16;} .anh-glow{opacity:.35!important;animation:none!important;} .anh-scrim{background:linear-gradient(180deg,rgba(247,250,249,.90) 0%,rgba(247,250,249,.93) 100%);} .anh-stats{gap:1.4rem 1.9rem;margin-top:2rem} .anh-stats .s{padding-left:.75rem} .anh-stats .s b{font-size:1.85rem} .anh-dots{position:static;transform:none;padding:0;margin-top:1.8rem;justify-content:flex-start} } /* ============================================================= MOBILE + TABLET HERO FIX — 1 Sep 2026 Three faults James reported, one root cause behind two of them. THE ROOT CAUSE. `.anh` is display:flex, and `.anh-in` is its only item with flex-grow:0 / flex-basis:auto. On a narrow screen the item therefore sized to its CONTENT, and the widest intrinsic child was the hero logo — so the whole column collapsed to the logo's 161px inside a 375px screen. That is why the headline, the paragraph, the buttons and the stat rail were all crammed into a narrow strip on the left with the right half of the screen empty, and why "Size my heat pump" looked oddly proportioned: it was wrapping inside a 161px column, not sizing itself badly. Switching the hero to display:block below 900px removes the flex content-sizing entirely, so the container becomes an ordinary block and fills the width. Selectors are `.anh .anh-in` rather than `.anh-in` so they beat the page's own `.container` rule, which is declared in a later