.hdr-badge{display:none} @media only screen and (max-width:991px){ .hdrbtm-wrap{position:relative} /* Absolutely centred on the HEADER, not on the gap the logo and hamburger leave - and so it cannot push either of them. */ .hdr-badge{ display:flex;align-items:center;gap:3px; position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); pointer-events:none;white-space:nowrap; /* Clear of the 25px logo and the 25px hamburger, with room. */ max-width:calc(100% - 104px); font-family:'AntonV3','Anton',sans-serif;font-weight:400; line-height:1; } /* The crown sits ON the plaque's top edge and overhangs it, so the badge is NOT clipped - the plaque carries overflow:hidden alone. */ .hb-crown{ position:absolute;left:50%;top:-9px; transform:translateX(-50%); width:19px;height:14px;z-index:3; fill:var(--primary,#FFF200); filter:drop-shadow(0 0 5px rgba(255,242,0,.8)); animation:hbCrown 3.6s ease-in-out infinite; } /* Large enough to read as brackets rather than as punctuation - in the reference they are nearly the height of the plaque. */ .hb-chev{ width:12px;height:19px;flex:none; fill:none;stroke:var(--primary,#FFF200); stroke-width:3;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(255,242,0,.45)); } .hb-chev-in{opacity:.5} /* Rounded ends, not cut points. The reference plaque is a soft capsule with a bright rim; a hexagonal clip-path read as a game HUD rather than a badge, and clipping also meant the rim glow was sliced off at the ends. */ .hb-plaque{ position:relative;display:inline-flex;align-items:center;gap:7px; padding:5px 12px;overflow:hidden;border-radius:7px; background: radial-gradient(120% 140% at 50% 0%,rgba(255,242,0,.10),transparent 60%), linear-gradient(180deg,#1C2029 0%,#090B0F 100%); box-shadow: 0 0 22px rgba(255,242,0,.30), 0 0 46px rgba(255,242,0,.14), inset 0 0 0 1px rgba(255,242,0,.42), inset 0 10px 16px -10px rgba(255,242,0,.22); } /* The hairline along the top edge, under the crown. */ .hb-rail{ position:absolute;left:12%;right:12%;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,242,0,.85),transparent); } /* Speed lines. Two bars of different length read as motion; three at this size turn into a smudge. */ .hb-lines{position:relative;width:12px;height:8px;flex:none} .hb-lines::before,.hb-lines::after{ content:"";position:absolute;right:0;height:1.6px;border-radius:1px; background:var(--primary,#FFF200); box-shadow:0 0 5px rgba(255,242,0,.7); } .hb-lines::before{top:1px;width:12px} .hb-lines::after{top:5px;width:7px} .hb-lines--r{transform:scaleX(-1)} /* The number leads and the label is STACKED beside it on two lines. "Years of Service" is three times the length of "Since": on one line the badge grew to roughly 250px and stopped fitting between the logo and the hamburger on a 360px phone. Stacking keeps the lockup compact and is the usual shape for a badge like this - the figure is what people read, the words only qualify it. */ .hb-txt{display:inline-flex;align-items:center;gap:7px} /* TWO FACES, NOT ONE, and that is the point of this block. Anton is a CONDENSED display face: right for the numeral, which wants to be tall and heavy, and wrong for the words, which came out narrow and cramped beside it so the pair read as a mismatch rather than as one lockup. The label uses a wide even sans instead. */ .hb-txt em{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-style:normal;font-weight:600; font-size:8.5px;line-height:1.24;letter-spacing:.14em; text-transform:uppercase;color:#FFFFFF; /* The break is forced rather than left to wrapping, so the two lines are always "YEARS OF" / "SERVICE" and never reflow into something lopsided at an awkward width. */ display:inline-block;max-width:6.4em;white-space:normal; text-align:left; } .hb-txt b{ font-size:24px;font-weight:400;letter-spacing:.01em; color:#FFF62E;line-height:1; text-shadow:0 0 6px rgba(255,242,0,.95),0 0 16px rgba(255,242,0,.55); animation:hbGlow 3.2s ease-in-out infinite; } /* One pass of light across the plaque. Three iterations, not infinite: it should catch the eye on arrival and then leave the visitor alone. transform only, so it never triggers layout. */ .hb-shine{ position:absolute;top:0;left:0;width:36%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transform:translateX(-160%); animation:hbShine 2.8s ease-in-out 3; } @keyframes hbShine{ 0%{transform:translateX(-160%)} 55%,100%{transform:translateX(420%)} } @keyframes hbGlow{ 0%,100%{text-shadow:0 0 6px rgba(255,242,0,.85),0 0 14px rgba(255,242,0,.45)} 50%{text-shadow:0 0 9px rgba(255,242,0,1),0 0 22px rgba(255,242,0,.7)} } @keyframes hbCrown{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-1.5px)} } } @media only screen and (max-width:360px){ .hdr-badge{max-width:calc(100% - 88px);gap:2px} .hb-plaque{padding:4px 9px;gap:6px} .hb-txt em{font-size:8px;letter-spacing:.1em} .hb-txt b{font-size:21px} .hb-chev{width:10px;height:16px;stroke-width:3.2} .hb-crown{width:16px;height:12px;top:-8px} .hb-lines{width:9px} .hb-lines::before{width:9px} .hb-lines::after{width:5px} } /* Someone who has asked their phone to stop animating gets the badge with no movement at all - the glow settles at its midpoint so it still looks lit rather than flat. */ @media (prefers-reduced-motion:reduce){ .hb-shine{display:none} .hb-crown,.hb-txt b{animation:none} .hb-txt b{text-shadow:0 0 9px rgba(255,242,0,.6)} }