/* ============================================================ PE LETTERFORMS — "each letter worth a trillion dollars" Hyper-detailed dimensional champagne-metal lettering system. Pure letterform work: engraved extrusion, machined bevel bands, top-edge hairline highlight, brushed grain, luminous material. Layout and copy are untouched — this file only dresses glyphs. Loaded LAST in so it wins ties; JS adds .pe-metal classes and data-text (for the extrusion/highlight layers). Barry 2026-09-24: NEVER flatten to fix darkness — brighten metal. ============================================================ */ /* ---- core metal: machined champagne with micro bevel bands ---- */ .pe-metal{ position:relative!important; z-index:0!important; background: /* slow sheen sweep (top layer) */ linear-gradient(105deg,rgba(255,251,233,0) 42%,rgba(255,251,233,0) 46%,rgba(255,251,233,.92) 50%,rgba(255,251,233,0) 54%,rgba(255,251,233,0) 58%), /* brushed/engraved grain — fine milled lines across the glyphs */ repeating-linear-gradient(178deg,rgba(255,255,255,.07) 0 2px,rgba(20,10,0,.06) 2px 4px), /* champagne metal body: alternating luminous/deep bands */ linear-gradient(176deg, #fffef9 0%,#fbf3dd 7%,#ecdcb2 13%,#fffbef 21%,#d9b878 29%, #f8eed4 37%,#e2c78e 44%,#fffdf4 52%,#cfa55e 60%,#f6e7bd 68%, #bd9350 76%,#f9efcd 84%,#a87f3e 92%,#e8c46e 100%)!important; background-size:260% 100%,100% 100%,100% 100%!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; -webkit-text-fill-color:transparent!important; /* engraved edge: dark bronze hairline around every glyph */ -webkit-text-stroke:1px rgba(74,48,12,.62)!important; /* luminous material: top bevel light + cast depth + warm aura */ filter: drop-shadow(0 -1px 1px rgba(255,251,235,.5)) drop-shadow(0 2px 0 rgba(18,10,1,.92)) drop-shadow(0 14px 30px rgba(0,0,0,.72)) drop-shadow(0 0 38px rgba(240,214,150,.32))!important; animation:pe-sheen 9s ease-in-out infinite!important; } @keyframes pe-sheen{ 0%,58%{background-position:130% 0,0 0,0 0} 92%,100%{background-position:-130% 0,0 0,0 0} } /* ---- engraved extrusion: dark bronze cast layer behind the metal ---- Gives real dimensional depth — the letter sits IN the page, not on it. */ .pe-metal::before{ content:attr(data-text); position:absolute;inset:0;z-index:-1; color:#2b1a05;-webkit-text-fill-color:#2b1a05; -webkit-text-stroke:0; background:none!important;filter:none;animation:none; transform:translate(.018em,.048em); filter:blur(.7px); opacity:.96; pointer-events:none;white-space:pre-wrap; } /* ---- top bevel light: hairline highlight catching each glyph's crown ---- Light only kisses the top ~12% of the letterforms, like a cut metal edge. */ .pe-metal::after{ content:attr(data-text); position:absolute;inset:0;z-index:2; background:linear-gradient(180deg, rgba(255,253,240,.98) 0%,rgba(255,253,240,.55) 6%, rgba(255,253,240,.14) 10%,rgba(255,253,240,0) 15%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; -webkit-text-fill-color:transparent!important; -webkit-text-stroke:0; filter:none;animation:none; pointer-events:none;white-space:pre-wrap; } /* ---- hero grade: deeper cast + stronger aura for flagship headlines ---- */ .pe-metal--hero::before{transform:translate(.02em,.062em);filter:blur(1px)} .pe-metal--hero{ filter: drop-shadow(0 -1px 1px rgba(255,251,235,.55)) drop-shadow(0 3px 0 rgba(18,10,1,.92)) drop-shadow(0 18px 36px rgba(0,0,0,.78)) drop-shadow(0 0 52px rgba(240,214,150,.4))!important; } /* ---- soft grade: quiet pages (privacy/legal) — metal, no depth tricks ---- */ .pe-metal--soft{ background:linear-gradient(180deg,#fff8d6 0%,#f0d488 45%,#c99b3a 75%,#f6d47c 100%)!important; background-size:100% 100%!important; -webkit-text-stroke:0!important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.7))!important; animation:none!important; } .pe-metal--soft::before,.pe-metal--soft::after{content:none!important} /* ---- heritage kickers: engraved-plaque eyebrows, hairline rules both sides ---- */ .pe-kicker{ letter-spacing:.22em!important; font-weight:800!important; } .pe-kicker::before,.pe-kicker::after{ content:""!important; display:inline-block!important; width:30px!important;height:5px!important; border-top:1px solid currentColor!important; border-bottom:1px solid currentColor!important; opacity:.75!important; vertical-align:middle!important; background:none!important; } .pe-kicker::before{margin-right:.8em!important} .pe-kicker::after{margin-left:.8em!important} /* ---- reduced motion: sheen and breathing stop, letterforms stay dressed ---- */ @media (prefers-reduced-motion:reduce){ .pe-metal{animation:none!important} } /* ---- fallback: no background-clip:text — solid champagne, keep hierarchy ---- */ @supports not ((background-clip:text) or (-webkit-background-clip:text)){ .pe-metal,.pe-metal--soft{ background:none!important; color:#f3e9d2!important; -webkit-text-fill-color:#f3e9d2!important; -webkit-text-stroke:0!important; filter:none!important;animation:none!important; } .pe-metal::before,.pe-metal::after{content:none!important} }