/* OKC Leadership CTA * --------------------------------------------------------------------------- * Faithful reproduction of wp-content/themes/okc/page-templates/about_t.php * lines 702-756, which rendered under the Tailwind Play CDN (v3 defaults + * Preflight, no custom config) plus themes/okc/assets/css/main.css. * * Legacy markup / utilities resolved here: * section .relative .py-20 .md:py-24 .lg:py-28 .overflow-hidden * div .absolute .inset-0 (bg layer) * img .w-full .h-full .object-cover (bg image) * div .absolute .inset-0 .bg-[#0A3B5C]/70 (navy scrim) * div .absolute .left-0 .top-1/2 .-translate-y-1/8 .z-10 (pennant) * img .w-32 .md:w-40 .lg:w-48 .h-auto * div .container .mx-auto .px-6 .relative .z-10 * div .max-w-4xl .mx-auto .text-center * h2 .text-5xl .md:text-6xl .lg:text-7xl .font-black * .mb-8 .md:mb-10 .uppercase .text-white * + inline style="font-family: 'Pragmatica', sans-serif" * a .bg-[#F5E6D3] .text-[#0A3B5C] .px-8 .md:px-10 .py-3 .md:py-4 * .rounded-md .inline-block .font-bold .text-sm .md:text-base * .hover:bg-white .transition-all .duration-300 .uppercase * div .absolute .bottom-0 .left-0 .right-0 .h-16 .md:h-20 .bg-[#F5E6D3] * * NOTE ON `-translate-y-1/8`: Tailwind v3's translate scale has no 1/8 step * (it offers 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, full), so that class never existed * and no transform was ever emitted. The pennant therefore hangs DOWN from the * section's vertical centre. That is reproduced here; the widget exposes a * "Pennant Vertical Nudge" control for anyone who wants it truly centred. * * NON-TAILWIND RULE PULLED IN FROM main.css: its "Responsive Design" block * (`@media (max-width:768px){ h2 { font-size: 2rem !important } }`) applied to * this section's

and beat `text-5xl`. See the title block below. * * Breakpoints are Tailwind v3 defaults: sm 640, md 768, lg 1024, xl 1280, * 2xl 1536 (min-width, mobile-first). okc-base.css supplies the Preflight- * equivalent reset (and the global img/a transitions from main.css) under * .okc-w, so it is not repeated here. * * Every selector is scoped under .okc-leadership-cta. * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * Section — relative py-20 md:py-24 lg:py-28 overflow-hidden * ------------------------------------------------------------------------- */ .okc-w.okc-leadership-cta { position: relative; overflow: hidden; padding-top: 5rem; /* py-20 */ padding-bottom: 5rem; } @media (min-width: 768px) { .okc-w.okc-leadership-cta { padding-top: 6rem; /* md:py-24 */ padding-bottom: 6rem; } } @media (min-width: 1024px) { .okc-w.okc-leadership-cta { padding-top: 7rem; /* lg:py-28 */ padding-bottom: 7rem; } } /* --------------------------------------------------------------------------- * Background layer — absolute inset-0 * ------------------------------------------------------------------------- */ .okc-leadership-cta .okc-leadership-cta__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* w-full h-full object-cover. * Two class names deep so this beats okc-base.css's `.okc-w img { height:auto }` * exactly the way Tailwind's utilities layer beat Preflight in the legacy build. */ .okc-leadership-cta .okc-leadership-cta__bg-img { width: 100%; height: 100%; object-fit: cover; } /* absolute inset-0 bg-[#0A3B5C]/70 */ .okc-leadership-cta .okc-leadership-cta__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgb(10 59 92 / 0.7); } /* --------------------------------------------------------------------------- * Pennant — absolute left-0 top-1/2 z-10 * (`-translate-y-1/8` in the legacy markup is not a real Tailwind class; see * the note at the top of this file. No transform is emitted, deliberately.) * ------------------------------------------------------------------------- */ .okc-leadership-cta .okc-leadership-cta__pennant { position: absolute; left: 0; top: 50%; z-index: 10; } /* w-32 md:w-40 lg:w-48 h-auto */ .okc-leadership-cta .okc-leadership-cta__pennant-img { width: 8rem; /* w-32 = 128px */ height: auto; } @media (min-width: 768px) { .okc-leadership-cta .okc-leadership-cta__pennant-img { width: 10rem; /* md:w-40 = 160px */ } } @media (min-width: 1024px) { .okc-leadership-cta .okc-leadership-cta__pennant-img { width: 12rem; /* lg:w-48 = 192px */ } } /* --------------------------------------------------------------------------- * Content shell — container mx-auto px-6 relative z-10 * Tailwind's `container` is width:100% plus a hard max-width at each * breakpoint; it has no padding and no centering of its own (mx-auto does * that, px-6 supplies the gutter). box-sizing:border-box comes from the reset, * so the gutter eats into the max-width, as it did in the legacy build. * ------------------------------------------------------------------------- */ .okc-leadership-cta .okc-leadership-cta__container { position: relative; z-index: 10; width: 100%; margin-left: auto; margin-right: auto; padding-left: 1.5rem; /* px-6 */ padding-right: 1.5rem; } @media (min-width: 640px) { .okc-leadership-cta .okc-leadership-cta__container--fixed { max-width: 640px; } } @media (min-width: 768px) { .okc-leadership-cta .okc-leadership-cta__container--fixed { max-width: 768px; } } @media (min-width: 1024px) { .okc-leadership-cta .okc-leadership-cta__container--fixed { max-width: 1024px; } } @media (min-width: 1280px) { .okc-leadership-cta .okc-leadership-cta__container--fixed { max-width: 1280px; } } @media (min-width: 1536px) { .okc-leadership-cta .okc-leadership-cta__container--fixed { max-width: 1536px; } } /* max-w-4xl mx-auto text-center */ .okc-leadership-cta .okc-leadership-cta__inner { max-width: 56rem; /* max-w-4xl */ margin-left: auto; margin-right: auto; text-align: center; } /* --------------------------------------------------------------------------- * Title — text-5xl md:text-6xl lg:text-7xl font-black mb-8 md:mb-10 * uppercase text-white + inline font-family: 'Pragmatica' * The base reset makes headings inherit font-size/weight, so both are set * explicitly here. * ------------------------------------------------------------------------- */ .okc-leadership-cta .okc-leadership-cta__title { font-family: "Pragmatica", sans-serif; font-size: 3rem; /* text-5xl */ line-height: 1; font-weight: 900; /* font-black */ text-transform: uppercase; color: #ffffff; margin-bottom: 2rem; /* mb-8 */ } @media (min-width: 768px) { .okc-leadership-cta .okc-leadership-cta__title { font-size: 3.75rem; /* md:text-6xl */ line-height: 1; margin-bottom: 2.5rem; /* md:mb-10 */ } } @media (min-width: 1024px) { .okc-leadership-cta .okc-leadership-cta__title { font-size: 4.5rem; /* lg:text-7xl */ line-height: 1; } } /* main.css "Responsive Design" block (assets/css/main.css:413-424): * @media (max-width: 768px) { h1 { font-size: 3rem !important } * h2 { font-size: 2rem !important } } * That !important beat Tailwind's `text-5xl`/`md:text-6xl`, so on the legacy * page this heading is 2rem (not 3rem) at every width up to AND INCLUDING * 768px — the max-width:768px rule and the md: rule both match at exactly * 768px and !important won. Reproduced here with an element+class selector * (0,2,1) so it outranks the 3rem base and the 3.75rem md: rule at 768px, * while any Elementor Typography override (0,5,0) still wins over it. * Only h2 is affected: the legacy h1 value (3rem) equals text-5xl anyway, and * div/p/span title tags were never matched by that rule. */ @media (max-width: 768px) { .okc-leadership-cta h2.okc-leadership-cta__title { font-size: 2rem; } } /* --------------------------------------------------------------------------- * Button — bg-[#F5E6D3] text-[#0A3B5C] px-8 md:px-10 py-3 md:py-4 rounded-md * inline-block font-bold text-sm md:text-base hover:bg-white * transition-all duration-300 uppercase * The anchor carried NO inline font-family in the legacy markup, so it keeps * the inherited body face (Poppins) — deliberately not Pragmatica. * `transition-all duration-300` also sets Tailwind's default easing, which * outranks main.css's `a { transition: all .3s ease }` on specificity. * ------------------------------------------------------------------------- */ .okc-leadership-cta .okc-leadership-cta__button { display: inline-block; background-color: #f5e6d3; color: #0a3b5c; padding-top: 0.75rem; /* py-3 */ padding-bottom: 0.75rem; padding-left: 2rem; /* px-8 */ padding-right: 2rem; border-radius: 0.375rem; /* rounded-md */ font-weight: 700; /* font-bold */ font-size: 0.875rem; /* text-sm */ line-height: 1.25rem; text-transform: uppercase; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .okc-leadership-cta .okc-leadership-cta__button:hover { background-color: #ffffff; /* hover:bg-white */ } /* Keyboard-only echo of hover:bg-white. Kept in its OWN rule (not grouped with * :hover) so a browser that does not understand :focus-visible discards this * declaration alone instead of invalidating the hover rule with it. Plain * :focus is deliberately NOT used: clicking an focuses it, which * would leave the button stuck white — something the legacy page never did. */ .okc-leadership-cta .okc-leadership-cta__button:focus-visible { background-color: #ffffff; } @media (min-width: 768px) { .okc-leadership-cta .okc-leadership-cta__button { padding-top: 1rem; /* md:py-4 */ padding-bottom: 1rem; padding-left: 2.5rem; /* md:px-10 */ padding-right: 2.5rem; font-size: 1rem; /* md:text-base */ line-height: 1.5rem; } } /* --------------------------------------------------------------------------- * Bottom bar — absolute bottom-0 left-0 right-0 h-16 md:h-20 bg-[#F5E6D3] * z-index stays auto so the pennant and the content (both z-10) paint above it, * exactly as in the legacy stacking order. * ------------------------------------------------------------------------- */ .okc-leadership-cta .okc-leadership-cta__bottom-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4rem; /* h-16 */ background-color: #f5e6d3; } @media (min-width: 768px) { .okc-leadership-cta .okc-leadership-cta__bottom-bar { height: 5rem; /* md:h-20 */ } }