/** * OKC Marquee Ticker — resolved from the legacy theme. * * Sources reproduced here (all of them applied on the live legacy page): * home_t.php 99-161 ....... Tailwind utilities + inline styles * about_t.php 146-198 ..... the crimson/cream variant (exposed as controls) * assets/css/main.css 1-20 ..... .marquee-svg-text / .marquee-svg-o / .marquee-svg-rest * assets/css/main.css 101-125 .. .marquee-wrapper / .marquee-content-wrapper + keyframes * assets/css/main.css 546-549 .. span.marquee-svg-o svg { width:250px !important; margin-right:6px } * style.css 597-621 ............ .marquee-svg-o and .marquee-svg-rest media queries * * Tailwind utilities resolved (v3 defaults): * bg-[#FAEED6] -> background-color:#FAEED6 relative -> position:relative * z-20 -> z-index:20 overflow-hidden -> overflow:hidden * flex -> display:flex items-center -> align-items:center * justify-center-> justify-content:center font-bold -> font-weight:700 * text-[#0B3B5D]-> color:#0B3B5D * text-xl -> font-size:1.25rem; line-height:1.75rem * md:text-4xl -> @media(min-width:768px) font-size:2.25rem; line-height:2.5rem * mx-3 -> margin-left/right:.75rem md:mx-4 -> 1rem from 768px * w-10 h-10 -> width/height:2.5rem (md:w-10 md:h-10 is the same value) * * Cascade note: on the legacy page the Tailwind Play CDN injected its stylesheet * into AFTER main.css/style.css, so at equal specificity Tailwind won. * That is why .marquee-svg-o is display:flex (not main.css's inline-block) and * 2.5rem wide at every breakpoint (not style.css's 2rem below 768px). * * Every default below is also exposed as an Elementor control, which writes the * custom property on `{{WRAPPER}} .okc-marquee` (specificity 0,2,0) so it always * beats the single-class defaults declared here (0,1,0). */ .okc-marquee { /* ---- band ------------------------------------------------------ */ --okc-marquee-bg: #faeed6; /* bg-[#FAEED6] (about_t.php: #9B2C2C) */ --okc-marquee-duration: 30s; /* main.css: animation 30s linear infinite */ --okc-marquee-direction: normal; /* ---- text ------------------------------------------------------ */ --okc-marquee-color: #0b3b5d; /* text-[#0B3B5D] (about_t.php: #F5E2CD) */ --okc-marquee-font: "Worker", "PT Sans", sans-serif; /* inline style on .marquee-svg-text */ --okc-marquee-weight: 700; /* font-bold */ --okc-marquee-item-size: 1.25rem; /* text-xl */ --okc-marquee-line-height: 1.75rem; /* text-xl line-height */ --okc-marquee-label-size: 28px; /* style.css @media(max-width:767px) */ --okc-marquee-item-margin: 0.75rem; /* mx-3 */ /* ---- badge ----------------------------------------------------- */ --okc-marquee-badge-size: 2.5rem; /* w-10 / h-10 */ --okc-marquee-badge-gap: 4px; /* gap between badge and phrase — see note below */ --okc-marquee-badge-offset: 5px; /* main.css .marquee-svg-o margin-top */ --okc-marquee-graphic-width: 2.5rem; /* fills the badge box — see note on the svg rule */ --okc-marquee-graphic-height: 2.5rem; --okc-marquee-badge-fill: #003b5c; /* svg path fill (about_t.php: #FAEED6) */ --okc-marquee-badge-number: #faeed6; /* svg text fill (about_t.php: #9A2C2C) */ position: relative; z-index: 20; overflow: hidden; background-color: var(--okc-marquee-bg); } /* md: — the only breakpoint the legacy markup used (Tailwind md = 768px). */ @media (min-width: 768px) { .okc-marquee { --okc-marquee-item-size: 2.25rem; /* md:text-4xl */ --okc-marquee-line-height: 2.5rem; /* md:text-4xl line-height */ --okc-marquee-label-size: 32px; /* main.css .marquee-svg-rest */ --okc-marquee-item-margin: 1rem; /* md:mx-4 */ } } /* .marquee-wrapper */ .okc-marquee .okc-marquee__viewport { width: 100%; overflow: hidden; } /* .marquee-content-wrapper (+ Tailwind flex items-center) */ .okc-marquee .okc-marquee__track { display: flex; align-items: center; white-space: nowrap; /* * width:max-content is the one deliberate fix. The legacy track was a * block-level flex container, so it was 100% of the viewport wide and the * -50% keyframe travelled half a viewport instead of half the content — * the loop snapped. Sizing the track to its (duplicated) content makes * -50% exactly one copy, so the loop is seamless. */ width: -moz-max-content; width: max-content; animation: okc-marquee-scroll var(--okc-marquee-duration) linear infinite; animation-direction: var(--okc-marquee-direction); will-change: transform; } .okc-marquee--pause:hover .okc-marquee__track, .okc-marquee--pause:focus-within .okc-marquee__track { animation-play-state: paused; } /* .marquee-svg-text — display:flex/align-items:center came from both main.css and the inline style; the rest from Tailwind utilities. */ .okc-marquee .okc-marquee__item { display: flex; align-items: center; flex: 0 0 auto; margin-left: var(--okc-marquee-item-margin); margin-right: var(--okc-marquee-item-margin); color: var(--okc-marquee-color); font-family: var(--okc-marquee-font); font-weight: var(--okc-marquee-weight); font-size: var(--okc-marquee-item-size); line-height: var(--okc-marquee-line-height); } /* * main.css had `.marquee-svg-o { margin-right: -10px }`. That tuck only made * sense against the 250px-wide overflowing octagon; with the badge sized to its * 40px box it drags the phrase on top of the graphic. A positive gap is used * instead, and the Badge / Text Gap control still reaches the old negative range. */ .okc-marquee .okc-marquee__badge { display: flex; /* Tailwind `flex` beat main.css inline-block */ align-items: center; justify-content: center; flex: 0 0 auto; width: var(--okc-marquee-badge-size); height: var(--okc-marquee-badge-size); vertical-align: middle; margin-top: var(--okc-marquee-badge-offset); margin-right: var(--okc-marquee-badge-gap); } /* * DELIBERATE DEVIATION from the legacy CSS. * * main.css:546 has `span.marquee-svg-o svg { width:250px !important }` while the * SVG keeps its height="300" attribute, and Tailwind Preflight does not clamp * (its max-width/height:auto rule covers img/video only). So on the legacy * site a 250x300 graphic sits inside the 40px badge box, overflows it, and is * sliced by .marquee-wrapper's overflow:hidden into a navy stripe painted under * the phrase text — #0B3B5D text on a #003B5C stripe, effectively unreadable. * * That is a bug in the source theme, not a design. The badge is meant to read as * the letter "O" of "ONE", so it is sized to its box here. The Graphic Width / * Height controls still expose the legacy 250x300 for anyone who wants it back. */ .okc-marquee .okc-marquee__badge svg { display: block; flex: 0 0 auto; width: var(--okc-marquee-graphic-width); height: var(--okc-marquee-graphic-height); max-width: 100%; } .okc-marquee .okc-marquee__badge svg path { fill: var(--okc-marquee-badge-fill); } .okc-marquee .okc-marquee__badge svg text { fill: var(--okc-marquee-badge-number); } /* .marquee-svg-rest */ .okc-marquee .okc-marquee__label { display: inline-block; margin-left: 2px; font-size: var(--okc-marquee-label-size); } @media (prefers-reduced-motion: reduce) { .okc-marquee .okc-marquee__track { animation: none; } }