/* ============================================================================= chyk-emerge.css -- words that come out of metal. The user, 2026-10-01: "two metallic parallelograms -- one silver-white and the other bright-golden hovering in mid-air, possibly with a glow behind them. Then, as the user scrolls, the text comes out from the metallic parallelograms -- white text from the white one, gold text from the gold parallelogram", frame by frame in "You know you are a (Presentation) (3)". And after the first round (stacked, one bar to a line): "The parallelograms are ADJACENT TO EACH OTHER, NOT IN ALTERNATE LINES. THEY OPEN OUT INTO OPPOSITE SIDES ... MATCH THE EXACT LAYOUT OF THE REFERENCE IMAGES ... don't fade it in/fiddle with the transparency of the letters". So: ONE line. In the middle of it, two bars side by side, leaning like "//", silver-white on the left, gold on the right, a light behind each, hovering. The white words slide out of the white bar's left side, to the left; the gold words out of the gold bar's right side, to the right; both at once. The frames' proportions: a bar about 3.4 times the font size long and .78 wide, leaning 32deg (made .34 wide since: see the slim pair, below); the word, fully out, about .9em clear of the metal at its own height, and settling down a little as it finishes.

A three-column grid: the bars in the middle, the two words either side, and the line as a whole centred on the page (the user, after the second round: "center each one nicely" -- a short word against a long one had hung the line off to one side), in capitals ("make the text there all capitals"), and well clear of what follows ("space out ... from the subtitle"). Each side is a window whose inner edge is cut on the bars' slant, a little inside the metal: a word slid in past that cut is inside the bar, and slid out it comes out of it. js/chyk-emerge.js sets --u, 0 to 1 (how far out the words are) and --v (their settle) on the heading from where it is on the screen, a pure function of the scroll, and fits the heading's size to the width. With no script both are 1: the words are out and still. The letters are never faded or blurred; they are simply inside the metal or out of it. The heading is as wide as the page (less the gutters), whatever column it sits in, so the line centres on the page's middle. ========================================================================== */ /* :root, to be sure of the page's own h2 rules (.ld-end h2, .section-title) */ :root .ce { --u: 1; --v: 1; --ce-th: 32deg; /* the bars' lean, from upright */ --ce-t: .6249; /* tan(32deg), for the cuts */ --ce-bl: 3.4em; /* a bar's length */ --ce-bw: .34em; /* a bar's width */ --ce-d: .3em; /* each bar's middle from the heading's middle */ --ce-c: .8em; /* the middle column: cut to cut, at the words' height */ --ce-h: 3.1em; /* how tall the leaning bars stand: 3.4 cos 32deg + .34 sin 32deg = 3.06em */ --ce-gap: .9em; /* from a cut to its word, once it is out */ --ce-m: 1em; /* the windows' reach past their box, for the glow */ --ce-w: min(calc(100vw - 48px), 1320px); display: grid; grid-template-columns: auto var(--ce-c) auto; justify-content: center; align-items: center; width: var(--ce-w); max-width: none; margin: 0 0 clamp(2.75rem, 5vw, 4.75rem) calc(50% - var(--ce-w) / 2); padding: 0; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; font-size: clamp(1.6rem, 5vw, 5.2rem); line-height: 1; letter-spacing: 0; text-transform: uppercase; font-style: normal; text-align: left; color: #fff; } /* ── the bars ─────────────────────────────────────────────────────────── */ .ce-bars { position: relative; display: block; height: var(--ce-h); z-index: 1; } .ce-bar { position: absolute; left: 50%; top: 50%; display: block; width: var(--ce-bw); height: var(--ce-bl); margin: calc(var(--ce-bl) / -2) 0 0 calc(var(--ce-bw) / -2); border-radius: .035em; transform: translateX(var(--ce-x)) rotate(var(--ce-th)); /* hovering: a slow rise and fall of its own, the two out of step */ animation: ceHover 6.5s ease-in-out infinite; } .ce-bar.ce-white { --ce-x: calc(var(--ce-d) * -1); } .ce-bar.ce-gold { --ce-x: var(--ce-d); animation-delay: -3.1s; } @keyframes ceHover { 0%, 100% { translate: 0 -.04em; } 50% { translate: 0 .04em; } } /* the light behind it */ .ce-bar::before { content: ""; position: absolute; z-index: -1; left: -.75em; right: -.75em; top: -.55em; bottom: -.55em; border-radius: 50%; background: radial-gradient(closest-side, var(--ce-glow) 0%, var(--ce-glow2) 50%, transparent 100%); filter: blur(.1em); pointer-events: none; } /* the metal: a brushed face, lit from the top left, with a bright band that runs down it as the words come out */ .ce-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent calc(var(--ce-shine) - 14%), rgba(255, 255, 255, .7) var(--ce-shine), transparent calc(var(--ce-shine) + 14%)) 0 0 / 100% 100% no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, rgba(0, 0, 0, .06) 1px 2px), var(--ce-metal); background-blend-mode: soft-light, normal, normal; box-shadow: inset .014em .014em 0 rgba(255, 255, 255, .9), inset -.018em -.018em .03em rgba(0, 0, 0, .45), 0 .04em .14em rgba(0, 0, 0, .5), 0 0 .3em var(--ce-glow); } .ce { --ce-shine: calc(-15% + 130% * var(--u)); } .ce-white { --ce-metal: linear-gradient(115deg, #ffffff 0%, #dde1e6 18%, #9aa0a8 36%, #f5f7fa 52%, #aeb3ba 68%, #e8ebef 84%, #858a92 100%); --ce-glow: rgba(226, 234, 255, .4); --ce-glow2: rgba(200, 214, 255, .13); } .ce-gold { --ce-metal: linear-gradient(115deg, #fff4c4 0%, #f5cf62 18%, #b27a1e 36%, #ffe58f 52%, #c38b2a 68%, #f8d772 84%, #8a5a12 100%); --ce-glow: rgba(255, 214, 102, .48); --ce-glow2: rgba(240, 180, 60, .15); } /* ── the windows and the words ────────────────────────────────────────── */ .ce-side { position: relative; display: flex; align-items: center; height: var(--ce-h); min-width: 0; z-index: 2; /* the cut's run, from the middle of the window to its top or bottom edge and the reach past it */ --ce-k: calc((var(--ce-h) / 2 + var(--ce-m)) * var(--ce-t)); } /* the white window: its right edge cut on the slant (further right at the top), the other three far out */ .ce-l { justify-content: flex-end; clip-path: polygon(calc(var(--ce-m) * -4) calc(var(--ce-m) * -1), calc(100% + var(--ce-k)) calc(var(--ce-m) * -1), calc(100% - var(--ce-k)) calc(100% + var(--ce-m)), calc(var(--ce-m) * -4) calc(100% + var(--ce-m))); } /* the gold window: its left edge cut the same way */ .ce-r { justify-content: flex-start; clip-path: polygon(var(--ce-k) calc(var(--ce-m) * -1), calc(100% + var(--ce-m) * 4) calc(var(--ce-m) * -1), calc(100% + var(--ce-m) * 4) calc(100% + var(--ce-m)), calc(var(--ce-k) * -1) calc(100% + var(--ce-m))); } .ce-txt { display: block; flex: none; white-space: nowrap; padding-top: .06em; padding-bottom: .1em; will-change: transform; } /* the gap to the metal is the word's own padding, so the fit can measure it */ .ce-l .ce-txt { padding-right: var(--ce-gap); padding-left: .06em; /* at 0: the whole word right of the cut, inside the bar */ transform: translate3d(calc((1 - var(--u)) * (100% + .6em)), calc((1 - var(--v)) * -.15em), 0); } .ce-r .ce-txt { padding-left: var(--ce-gap); padding-right: .08em; transform: translate3d(calc((var(--u) - 1) * (100% + .6em)), calc((1 - var(--v)) * -.15em), 0); } .ce-white .ce-txt { color: #fbfcff; filter: drop-shadow(0 0 .1em rgba(226, 234, 255, .45)) drop-shadow(0 0 .35em rgba(190, 206, 255, .22)); } .ce-gold .ce-txt { background: linear-gradient(100deg, #c99a44 0%, #f6d98a 25%, #fff6d8 38%, #e6bd60 52%, #fff1c2 72%, #d4a64e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 .1em rgba(255, 214, 110, .5)) drop-shadow(0 0 .38em rgba(232, 176, 60, .28)); } /* ── the slim pair ────────────────────────────────────────────────────── The user, 2026-10-06: "make them thinner and sleeker", tried on Centers first, then "Sleek bars look good - apply them everywhere". Each bar .34em wide where it was .78 (as long, as steep), its corners and its shadows finer, the light behind it closer in -- the values above. The middle column is worked from the width: a bar leaning 32deg is .34 / cos 32deg = .40em across at any height, so with their middles .30em either side of the heading's they stand .20em apart and reach .50em out, and each cut is .10em inside the metal (.80em cut to cut). */ @media (max-width: 600px) { :root .ce { --ce-gap: .5em; --ce-w: calc(100vw - 32px); letter-spacing: -.02em; margin-bottom: 2.25rem; } } @media (prefers-reduced-motion: reduce) { .ce-bar { animation: none; } }