/* ============================================================ OPEN HOUSE BAND. Directly under the homepage hero (Kelly, 2026-09-28). Markup in home-pro-raiderblue.html (copied to index.html); motion and the measuring in oh-banner.js. The page must put the class ohb-js on from a tiny inline script in , BEFORE first paint, or everything flashes up whole and then vanishes before it animates in. How it got here, so nobody re-opens settled calls: - She asked for three places for Open House registration and her banner on the homepage, "animate it ... very sleek". Round one tried her banner art three ways; she liked the ribbon "but under the hero image". - Round two, three ribbons under the hero. RUFUS (the mascot) glides in from the left: "I want Rufus to glide in from the left". His art is General Rummel/Rufus - Full Color.pdf, rendered with Ghostscript to event-photos/open-house/rufus-full.webp (720 x 681, transparent). He gallops to the RIGHT. - She picked the Columbia band with the day count, then asked for: "center it better"; OPEN HOUSE white; no stripes top or bottom; the words one justified block; the 30 as tall as that block; Rufus cropped by the band's foot and riding up over the hero's red; flat Rummel blue that matches him; no glitch when he lands; a subtle rock back as he stops; and her own phone layout. - Her banner art itself (with its Thursday typo) is NOT used anywhere here. The words are live type everywhere, so the day and date are always right. The band comes down on its own after the Open House (data-ends on the section, rummel-dates.js). ============================================================ */ :root{--ohb-ease:cubic-bezier(.16,1,.3,1);} /* ---- the band ---- */ .ohx{position:relative;z-index:7;padding:0;} /* a
: the site gives every section 6rem of padding */ .ohx-in{position:relative;max-width:1320px;margin:0 auto; padding:0 3.4rem 0 calc(3.4rem + var(--ohx-rw)); display:flex;align-items:center;gap:2rem;min-height:var(--ohx-h,180px); --ohx-rw:calc(var(--ohx-rh,170px) * 1.057 + .6rem);} .ohx-rufus{position:absolute;left:2.4rem;bottom:var(--ohx-rb,8px);z-index:2;display:block; height:var(--ohx-rh,170px);width:auto;filter:drop-shadow(0 12px 16px rgba(8,20,40,.3));} /* THE LOCKUP (Kelly: "make the space tighter here and make all of the words justified - you can increase font size"). OPEN HOUSE, the date and the tour times are ONE block with both edges shared: the two smaller lines are sized off the title (--lk) so they land close to its width at every size, then oh-banner.js grows each to the exact width and justification closes the last pixel or two. Scaled type, not stretched word gaps. */ .ohx-txt{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.34rem; --lk:clamp(2.8rem,4.2vw,3.9rem);} .ohx-title{margin:0;font-family:var(--slab),'Roboto Slab',serif;text-transform:uppercase;font-weight:400; font-size:var(--lk);line-height:.9;letter-spacing:.01em;white-space:nowrap;} .ohx-date{margin:0;font-family:var(--slab),'Roboto Slab',serif;text-transform:uppercase; font-size:calc(var(--lk) * .39);line-height:1.05;letter-spacing:.03em;white-space:nowrap;} /* nowrap: the tour line is ONE line on a laptop and a tablet, and oh-banner.js measures it as one. Allowed to wrap, it broke in two whenever the row was tight at the moment of measuring, the fit read the wrapped box, sized the type too big, and the line then ran past the E of HOUSE (launch day, Kelly: "all text should be aligned to end right where the E does"). Phones stack its two halves as blocks, which nowrap does not stop. */ .ohx-time{margin:0;font-family:var(--sans,'Oswald',sans-serif);text-transform:uppercase; font-size:calc(var(--lk) * .28);line-height:1.15;letter-spacing:.14em;white-space:nowrap;} .ohx-date.fitted,.ohx-time.fitted{text-align:justify;text-align-last:justify;white-space:nowrap;} .ohx-go{margin-left:auto;flex:none;} .ohx-time .nb{white-space:nowrap;} /* on a phone the line breaks at its comma, never before PM */ .ohx-count{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 2rem;border-left:1px solid rgba(11,34,64,.22);border-right:1px solid rgba(11,34,64,.22);} .ohx-count[hidden]{display:none!important;} .ohx-count b{font-family:var(--slab),'Roboto Slab',serif;font-weight:400;font-size:4.2rem;line-height:.9; text-transform:uppercase;font-variant-numeric:tabular-nums;text-align:center;} /* Rufus keeps his own compositing layer after he lands, so the browser never re-rasterises him at the end of the glide (that hand-off is a visible snap) */ .ohx-rufus{will-change:transform;} .ohx-count span{font-family:var(--sans,'Oswald',sans-serif);font-size:.78rem;letter-spacing:.2em; text-transform:uppercase;margin-top:.35rem;} .ohx-count span i{font-style:normal;} /* the two words of the label, on every screen */ /* ---- RUMMEL BLUE, FLAT ("make sure that blue band is Rummel blue and matches Rufus"). --rb #75B2DD; his own blue in the art is #79ABDE, a hair away. NO STRIPES ("remove this white line in between - just go from red to Rummel blue", "remove the red line under too"): the hero's red slash runs straight into the blue, and the blue straight into the page. OPEN HOUSE is WHITE ("try this white") with a soft navy shadow so it holds its edge on the light blue. */ .ohx-v3{--ohx-h:190px;--ohx-rh:166px;--ohx-rb:12px;overflow:hidden;background:#75B2DD;} .ohx-v3 .ohx-title{color:#fff;text-shadow:0 3px 14px rgba(11,34,64,.3);} .ohx-v3 .ohx-date{color:#0B2240;} .ohx-v3 .ohx-time{color:rgba(11,34,64,.75);} .ohx-v3 .ohx-count b{color:#fff;text-shadow:0 3px 14px rgba(11,34,64,.25);} .ohx-v3 .ohx-count span{color:#0B2240;} .ohx-v3 .btn-gold{box-shadow:0 12px 26px -8px rgba(11,34,64,.45);} /* ---- the words rise in after Rufus ---- */ .ohb-js .ohx .ohx-rufus{opacity:0;transform:translateX(calc(-100% - 16vw)) rotate(-3deg);} .ohb-js .ohx.in .ohx-rufus{opacity:1;transform:none; transition:transform 1.7s cubic-bezier(.12,.9,.22,1) .1s,opacity .45s ease .1s;} .ohb-js .ohx .ohx-txt > *,.ohb-js .ohx .ohx-count,.ohb-js .ohx .ohx-go{opacity:0;transform:translateY(22px);} .ohb-js .ohx.in .ohx-txt > *,.ohb-js .ohx.in .ohx-count,.ohb-js .ohx.in .ohx-go{opacity:1;transform:none; transition:opacity .7s ease,transform .9s var(--ohb-ease);} .ohb-js .ohx.in .ohx-title{transition-delay:.8s;} .ohb-js .ohx.in .ohx-date{transition-delay:.93s;} .ohb-js .ohx.in .ohx-time{transition-delay:1.05s;} .ohb-js .ohx.in .ohx-count{transition-delay:1.1s;} .ohb-js .ohx.in .ohx-go{transition-delay:1.3s;} /* ---- tablet ---- */ @media(max-width:1100px){ .ohx-in{padding-right:2rem;gap:1.4rem;} .ohx-rufus{left:1.4rem;} .ohx-in{padding-left:calc(2rem + var(--ohx-rw));} .ohx-count{padding:0 1.3rem;} .ohx-count b{font-size:3.3rem;} } /* ============================================================ ON A LAPTOP AND A TABLET. After the shared rules on purpose: these carry the same weight as the plain .ohx-v3 rule and the motion rules above, so they must come later to win. CENTRED ("just need to center it better"): one centred row, Rufus, the words, the count and the button with even space between them. RUFUS RIDES IN THE BAND ("crop the horse legs some - I want to make it look like Rufus is in that blue band. That allows us to make him slightly larger"): he is drawn taller than the band and the bottom --ohx-cut of him (the horse's lower legs) runs past its foot and is cut off there, as on her banner. AND HIS HEAD RIDES UP OVER THE RED ("his head can go over some of the red band too - that would make him really look like he is alive on the page"): the band clips with clip-path instead of overflow, cutting his legs at the foot while leaving 200px free above for his hat to rise into the hero's red slash. margin-bottom sinks his legs past the foot; margin-top lifts whatever of him is taller than the band ABOVE its top instead of letting the band grow to hold him. Sized in steps so the row always fits. Below 1180 the count becomes a tag under the date, as on a phone. ============================================================ */ @media(min-width:761px){ .ohx-v3{--ohx-rh:290px;--ohx-cut:.2;overflow:visible;clip-path:inset(-200px 0 0 0);} .ohx-v3 .ohx-in{justify-content:center;padding:0 2.4rem;gap:2.2rem;} .ohx-v3 .ohx-rufus{position:relative;left:auto;bottom:auto;flex:none;align-self:flex-end; margin-bottom:calc(var(--ohx-rh) * var(--ohx-cut) * -1); margin-top:min(0px, calc(var(--ohx-h) - var(--ohx-rh) * (1 - var(--ohx-cut)))); filter:drop-shadow(0 -2px 14px rgba(11,34,64,.22));} .ohx-v3 .ohx-count{padding:0 1.6rem;} .ohx-v3 .ohx-go{margin-left:0;} .ohx-v3{--ohx-from:calc(-100% - 30vw);} /* he starts further out on a wide screen */ } @media(min-width:761px) and (max-width:1300px){ .ohx-v3{--ohx-rh:262px;} .ohx-v3 .ohx-in{gap:2rem;} } @media(min-width:761px) and (max-width:1180px){ .ohx-v3{--ohx-rh:240px;} .ohx-v3 .ohx-in{gap:1.8rem;} .ohx-v3 .ohx-count{display:none;} .ohx-v3 .ohx-txt::after{content:attr(data-count);font-family:var(--sans,'Oswald',sans-serif); font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#fff; background:#0B2240;padding:.32rem .55rem;align-self:flex-start;margin-top:.25rem;} } /* A NARROW TABLET (761 to 1000: an iPad upright is 820). The row above needs about 936px, so here it ran off the right edge on launch day. A smaller Rufus, a smaller lockup, tighter gaps and the phone's short "Register" button bring it to about 700px. Checked at 761, 820, 900 and 1000. */ @media(min-width:761px) and (max-width:1000px){ .ohx-v3{--ohx-rh:200px;} .ohx-v3 .ohx-in{gap:1.2rem;padding:0 1.5rem;} .ohx-v3 .ohx-txt{--lk:clamp(2.2rem,4.6vw,2.8rem);} .ohx-v3 .ohx-go-more{display:none;} } /* ============================================================ RUFUS PULLS UP LIKE A HORSE ("when Rufus lands - could he rotate back to the left like 7 degrees? Almost like a horse would if he was about to stand still", then "a little bit more subtle I think": -4 degrees). Two animations on the individual translate and rotate properties, never on transform, so the glide and the rock never overwrite each other: ohxGlide carries him in from off the left on a long ease out; ohxRock leans him a degree into the gallop, levels him as he lands, rocks him back onto his hind legs (the pivot is low at the back of the horse) and stands him level. The shared transform transition is switched off here, because a running transition outranks an animation and would fight the keyframes. ============================================================ */ .ohb-js .ohx-v3 .ohx-rufus{transform:none;translate:var(--ohx-from,calc(-100% - 16vw)) 0;rotate:2deg; transform-origin:34% 96%;will-change:translate,rotate;} .ohb-js .ohx-v3.in .ohx-rufus{transform:none;translate:0 0;rotate:0deg;opacity:1; transition:opacity .45s ease .1s; animation:ohxGlide 1.6s cubic-bezier(.12,.9,.22,1) .1s both,ohxRock 2.7s .1s both;} @keyframes ohxGlide{ from{translate:var(--ohx-from,calc(-100% - 16vw)) 0;} to{translate:0 0;} } @keyframes ohxRock{ 0%{rotate:1.2deg;animation-timing-function:cubic-bezier(.3,.7,.3,1);} 54%{rotate:0deg;animation-timing-function:cubic-bezier(.25,.6,.3,1);} /* lands */ 71%{rotate:-4deg;animation-timing-function:cubic-bezier(.45,0,.2,1);} /* rocks back */ 100%{rotate:0deg;} /* stands */ } @media(prefers-reduced-motion:reduce){ .ohb-js .ohx-v3 .ohx-rufus,.ohb-js .ohx-v3.in .ohx-rufus{translate:none;rotate:none;animation:none;opacity:1;} } /* ---- phone, the shared base (the v3 phone block below takes over) ---- */ @media(max-width:760px){ .ohx-in{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"r t" "g g"; align-items:center;column-gap:.9rem;padding:1.2rem 1.25rem 1.4rem 1.1rem;min-height:0;} .ohx-rufus{position:relative;left:auto;bottom:auto;grid-area:r;height:var(--ohx-rh);} .ohx-txt{grid-area:t;gap:.35rem;} .ohx-title{font-size:2rem;} .ohx-date{font-size:.92rem;} .ohx-date .wd{display:none;} .ohx-time{font-size:.72rem;} .ohx-go{grid-area:g;margin:1.1rem 0 0;justify-content:center;} .ohx-v3{--ohx-rh:112px;} .ohx-count{display:none;} .ohx-v3 .ohx-txt::after{content:attr(data-count);font-family:var(--sans,'Oswald',sans-serif); font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#fff; background:#0B2240;padding:.32rem .55rem;align-self:flex-start;margin-top:.25rem;} } @media(prefers-reduced-motion:reduce){ .ohb-js .ohx .ohx-rufus,.ohb-js .ohx .ohx-txt > *,.ohb-js .ohx .ohx-count,.ohb-js .ohx .ohx-go{ opacity:1;transform:none;transition:none;} } /* ============================================================ ON A PHONE, Kelly's own layout. She did not like the first phone look ("I don't like the look - fix"), then drew it: "crop Rufus for this box and put the text on the right", "the 30 Days really had impact and the desktop version was aligned for text - you need to carry concepts over to mobile", "Open House should be the width of the box", "make Days Away white", "make the text tighter and move Rufus up", "remove the comma after hour on mobile". OPEN HOUSE is a headline the width of the band (oh-banner.js fits it). Under it: Rufus's box on the left, cropped the way her banner crops him (the screen edge takes his tail, --ohx-cutl of his width; the band's foot takes the horse's legs), hung from the headline by oh-banner.js so his hat sits just under it. The right column: the date and each tour line scaled to the column's width (the button's width), the count (a big 30 beside DAYS / AWAY stacked, white, the 30 as tall as the two words), and the button, which reads just Register since OPEN HOUSE is right above. .ohx-txt steps aside (display:contents) so its lines can take their own places in the band's grid. ============================================================ */ @media(max-width:760px){ .ohx-v3{--ohx-rh:clamp(200px,63.6vw,262px);--ohx-cutb:.22;--ohx-cutl:.26;overflow:hidden;clip-path:none;} /* Rufus scales with the phone so he never reaches the words */ .ohx-v3 .ohx-in{display:grid;position:relative;min-height:0; grid-template-columns:52% minmax(0,1fr); /* minmax: the column is the box, the lines fit it, never the reverse */ grid-template-areas:"h h" ". d" ". t" ". c" ". g"; column-gap:0;row-gap:.16rem;padding:.95rem 1rem 1.1rem;} /* tight: "make the text tighter" */ .ohx-v3 .ohx-rufus{position:absolute;margin:0;grid-area:auto;height:var(--ohx-rh);width:auto; left:calc(var(--ohx-rh) * 1.057 * var(--ohx-cutl) * -1); bottom:calc(var(--ohx-rh) * var(--ohx-cutb) * -1); filter:drop-shadow(0 6px 14px rgba(11,34,64,.25));} .ohx-v3 .ohx-txt{display:contents;--ohx-fit:phone;} .ohx-v3 .ohx-txt::after{display:none;} .ohx-v3 .ohx-title{grid-area:h;justify-self:start;font-size:3.6rem;margin:0 0 .3rem;} .ohx-v3 .ohx-date{grid-area:d;justify-self:start;font-size:.9rem;} .ohx-v3 .ohx-date .wd{display:none;} .ohx-v3 .ohx-time{grid-area:t;justify-self:start;font-size:.72rem;} .ohx-v3 .ohx-time .nb{display:block;width:max-content;} .ohx-v3 .ohx-time .nb.fitted{text-align:justify;text-align-last:justify;white-space:nowrap;} .ohx-v3 .ohx-time .cm{display:none;} /* "remove the comma after hour on mobile" */ .ohx-v3 .ohx-count{grid-area:c;justify-self:start;display:flex;flex-direction:row; align-items:flex-start;justify-content:space-between;border:0;padding:0;margin:.4rem 0 0;} .ohx-v3 .ohx-count b{font-size:3.4rem;line-height:.9;min-width:0;} .ohx-v3 .ohx-count span{display:flex;flex-direction:column;align-items:flex-start;margin:0; font-weight:600;letter-spacing:.08em;line-height:.95;color:#fff; text-shadow:0 3px 14px rgba(11,34,64,.25);} .ohx-v3 .ohx-count span i{display:block;font-style:normal;} .ohx-v3 .ohx-go{grid-area:g;display:flex;justify-content:center;width:100%;margin:.6rem 0 0; padding:.78rem .6rem;min-height:44px;font-size:.84rem;} .ohx-v3 .ohx-go-more{display:none;} }