/* =========================================================================== OKC — Step Cards Port of themes/okc/page-templates/next-steps.php lines 19-219 ("Cards Section"). Tailwind v3 defaults, Play CDN, no custom config, plus assets/css/main.css. Legacy class inventory ---------------------- section .pb-16 .md:pb-20 .bg-[#0A3B5C] div .container .mx-auto .px-6 div .space-y-8 .md:space-y-12 (repeated per card) div .bg-[#F5E6D3] .rounded-3xl .overflow-hidden .shadow-2xl .border .border-[#9B2C2C] div .grid .md:grid-cols-2 .md:min-h-[500px] div .relative .h-64 .md:h-full .min-h-[300px] <- media half img .absolute .inset-0 .w-full .h-full .object-cover div .absolute .inset-0 .bg-[#F5E6D3]/50 <- cream wash div .absolute .bottom-6 .left-6 .z-10 .p-2 h2 .text-4xl .md:text-5xl .lg:text-7xl .font-black .text-[#0A3B5C] .uppercase .leading-none style="font-family:'Pragmatica', sans-serif" div .p-8 .md:p-10 .lg:p-12 .flex .flex-col .justify-center .bg-[#F5E6D3] <- content half div .text-black .font-semibold .text-base .md:text-lg .lg:text-xl .leading-relaxed .mb-8 style="font-family:'Pragmatica', sans-serif" a .border-2 .border-[#0A3B5C] .text-[#0A3B5C] .font-black .font-bold .uppercase .py-3 .px-8 .text-sm .tracking-wider .hover:bg-[#0A3B5C] .hover:text-white .transition-all .w-fit Cascade decisions taken from the legacy page ------------------------------------------- 1. NO ALTERNATION. Every card in the source is image-left / content-right; there is no nth-child or reverse rule anywhere. The Media Position control is an addition and defaults to the legacy left. 2. `.font-black .font-bold` are both on the button. Tailwind emits the fontWeight utilities in theme-key order (... bold, extrabold, black), so `.font-black` is last and wins: the button is 900, not 700. 3. `.text-4xl .leading-none` on the title. Tailwind's fontSize plugin runs before its lineHeight plugin, so `.leading-none` wins: line-height 1 at every width, not text-4xl's 2.5rem. 4. main.css shipped a global @media (max-width:768px) { h2 { font-size: 2rem !important } } `!important` beat Tailwind regardless of load order, so the card title was 2rem — not 2.25rem and not md:text-5xl's 3rem — everywhere up to AND INCLUDING 768px. That rule is reproduced last below (without `!important`, so the Typography control can still win). 5. `.leading-relaxed` on the description is an unvariant utility, and Tailwind prints responsive variants after unvariant ones. So `.md:text-lg`'s own `line-height: 1.75rem` overrides `leading-relaxed` from 768px up. The description is therefore 1rem/1.625 on mobile but 1.125rem/1.75rem at md and 1.25rem/1.75rem at lg — not 1.625 throughout. 6. The cream wash is a full-size sibling painted ON TOP of the image, so it swallows the pointer. main.css's global `img:hover { transform: scale(1.02) }` therefore never fired on these images on the legacy site. No `pointer-events: none` is set here, to keep it that way. 7. The button carried no inline font-family in the ACF branch (only two of the three hardcoded fallback cards did), so it rendered in the body font. Nothing is set here either — it inherits the `.okc-w` stack. All custom properties below are fed by Elementor controls on {{WRAPPER}}; the second argument of every var() is the legacy value, so an unset or cleared control falls straight back to the original design. =========================================================================== */ /* -------------------------------------------------------------------------- Section — .pb-16 .md:pb-20 .bg-[#0A3B5C] -------------------------------------------------------------------------- */ .okc-step-cards { padding: 0 0 4rem; /* pb-16 */ background-color: var(--okc-sc-section-bg, #0a3b5c); } @media (min-width: 768px) { .okc-step-cards { padding-bottom: 5rem; /* md:pb-20 */ } } /* -------------------------------------------------------------------------- Container — .container .mx-auto .px-6 Tailwind v3 `.container` is width:100% with a max-width step at each breakpoint; it is NOT centred on its own, hence the explicit mx-auto. -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--okc-sc-container-px, 1.5rem); /* px-6 */ padding-right: var(--okc-sc-container-px, 1.5rem); } @media (min-width: 640px) { .okc-step-cards .okc-step-cards__container { max-width: 640px; } } @media (min-width: 768px) { .okc-step-cards .okc-step-cards__container { max-width: 768px; } } @media (min-width: 1024px) { .okc-step-cards .okc-step-cards__container { max-width: 1024px; } } @media (min-width: 1280px) { .okc-step-cards .okc-step-cards__container { max-width: 1280px; } } @media (min-width: 1536px) { .okc-step-cards .okc-step-cards__container { max-width: 1536px; } } /* -------------------------------------------------------------------------- Card stack — .space-y-8 .md:space-y-12 -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__stack > * + * { margin-top: var(--okc-sc-stack-gap, 2rem); /* space-y-8 */ } @media (min-width: 768px) { .okc-step-cards .okc-step-cards__stack > * + * { margin-top: var(--okc-sc-stack-gap, 3rem); /* md:space-y-12 */ } } /* -------------------------------------------------------------------------- Card shell — .bg-[#F5E6D3] .rounded-3xl .overflow-hidden .shadow-2xl .border .border-[#9B2C2C] -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__card { background-color: var(--okc-sc-card-bg, #f5e6d3); border-radius: var(--okc-sc-card-radius, 1.5rem); /* rounded-3xl */ overflow: hidden; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* shadow-2xl */ border-width: var(--okc-sc-card-border-width, 1px); /* border */ border-style: solid; border-color: var(--okc-sc-card-border, #9b2c2c); } /* -------------------------------------------------------------------------- Split grid — .grid .md:grid-cols-2 .md:min-h-[500px] Below 768px this is a one-column grid, so the halves stack. -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__grid { display: grid; } @media (min-width: 768px) { .okc-step-cards .okc-step-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: var(--okc-sc-card-min-h, 500px); } } /* -------------------------------------------------------------------------- Media half — .relative .h-64 .md:h-full .min-h-[300px] h-64 is 16rem (256px) but min-h-[300px] outranks it, so 300px is what the half actually measures below 768px. Both are kept, as in the source. -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__media { position: relative; height: 16rem; /* h-64 */ min-height: var(--okc-sc-media-min-h, 300px); /* min-h-[300px] */ } @media (min-width: 768px) { .okc-step-cards .okc-step-cards__media { height: 100%; /* md:h-full */ } } /* .absolute .inset-0 .w-full .h-full .object-cover The height/width here have to outrank okc-base.css's `.okc-w img { max-width:100%; height:auto }`, which is why every rule in this file is written as `.okc-step-cards .okc-step-cards__*`. */ .okc-step-cards .okc-step-cards__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover; } /* .absolute .inset-0 .bg-[#F5E6D3]/50 — a here, so display:block. Left hoverable on purpose; see cascade note 6 at the top of this file. */ .okc-step-cards .okc-step-cards__wash { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--okc-sc-media-overlay, rgba(245, 230, 211, 0.5)); } /* .absolute .bottom-6 .left-6 .z-10 .p-2 */ .okc-step-cards .okc-step-cards__titlebox { position: absolute; bottom: var(--okc-sc-title-inset, 1.5rem); /* bottom-6 */ left: var(--okc-sc-title-inset, 1.5rem); /* left-6 */ z-index: 10; /* z-10 */ padding: 0.5rem; /* p-2 */ } /* -------------------------------------------------------------------------- Card title — .text-4xl .md:text-5xl .lg:text-7xl .font-black .text-[#0A3B5C] .uppercase .leading-none -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__title { margin: 0; font-family: "Pragmatica", sans-serif; /* inline style */ font-size: 2.25rem; /* text-4xl */ line-height: 1; /* leading-none */ font-weight: 900; /* font-black */ color: var(--okc-sc-title-color, #0a3b5c); text-transform: uppercase; /* uppercase */ } @media (min-width: 768px) { .okc-step-cards .okc-step-cards__title { font-size: 3rem; /* md:text-5xl */ line-height: 1; } } @media (min-width: 1024px) { .okc-step-cards .okc-step-cards__title { font-size: 4.5rem; /* lg:text-7xl */ line-height: 1; } } /* main.css: @media (max-width:768px) { h2 { font-size: 2rem !important } } Last on purpose — at exactly 768px this and md:text-5xl both match, and on the legacy site the !important one won. */ @media (max-width: 768px) { .okc-step-cards .okc-step-cards__title { font-size: 2rem; line-height: 1; } } /* -------------------------------------------------------------------------- Content half — .p-8 .md:p-10 .lg:p-12 .flex .flex-col .justify-center .bg-[#F5E6D3] -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__body { display: flex; flex-direction: column; justify-content: center; padding: var(--okc-sc-body-padding, 2rem); /* p-8 */ background-color: var(--okc-sc-card-bg, #f5e6d3); } @media (min-width: 768px) { .okc-step-cards .okc-step-cards__body { padding: var(--okc-sc-body-padding, 2.5rem); /* md:p-10 */ } } @media (min-width: 1024px) { .okc-step-cards .okc-step-cards__body { padding: var(--okc-sc-body-padding, 3rem); /* lg:p-12 */ } } /* -------------------------------------------------------------------------- Media Position — not in the legacy template, which was always image-left. Only meaningful once the grid has two columns. -------------------------------------------------------------------------- */ @media (min-width: 768px) { .okc-step-cards .okc-step-cards__card--media-right .okc-step-cards__media { order: 2; } .okc-step-cards .okc-step-cards__card--media-right .okc-step-cards__body { order: 1; } } /* -------------------------------------------------------------------------- Description — .text-black .font-semibold .text-base .md:text-lg .lg:text-xl .leading-relaxed .mb-8 See cascade note 5: leading-relaxed only survives below 768px. -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__description { font-family: "Pragmatica", sans-serif; /* inline style */ color: var(--okc-sc-desc-color, #000000); /* text-black */ font-weight: 600; /* font-semibold */ font-size: 1rem; /* text-base */ line-height: 1.625; /* leading-relaxed */ margin-bottom: var(--okc-sc-desc-gap, 2rem); /* mb-8 */ } @media (min-width: 768px) { .okc-step-cards .okc-step-cards__description { font-size: 1.125rem; /* md:text-lg */ line-height: 1.75rem; } } @media (min-width: 1024px) { .okc-step-cards .okc-step-cards__description { font-size: 1.25rem; /* lg:text-xl */ line-height: 1.75rem; } } /* Both Tailwind Preflight and main.css's `* { margin: 0 }` zeroed paragraph margins, so a multi-paragraph ACF description ran together on the legacy site. okc-base.css keeps that. The Style > Description > "Space Description Paragraphs" switch opts out of the legacy behaviour. */ .okc-step-cards--spaced-paragraphs .okc-step-cards__description p { margin-bottom: 1rem; } .okc-step-cards--spaced-paragraphs .okc-step-cards__description p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Button — .border-2 .border-[#0A3B5C] .text-[#0A3B5C] .font-black .font-bold .uppercase .py-3 .px-8 .text-sm .tracking-wider .hover:bg-[#0A3B5C] .hover:text-white .transition-all .w-fit `.transition-all` (0,1,0) outranked main.css's `a { transition: all .3s ease }` (0,0,1) on the legacy page, so the real duration was Tailwind's 150ms. This rule likewise outranks okc-base.css's `.okc-w a`. -------------------------------------------------------------------------- */ .okc-step-cards .okc-step-cards__btn { display: block; /* flex-item blockification */ width: -moz-fit-content; width: fit-content; /* w-fit */ padding: 0.75rem 2rem; /* py-3 px-8 */ border-width: var(--okc-sc-btn-border-width, 2px); /* border-2 */ border-style: solid; border-color: var(--okc-sc-btn-border, #0a3b5c); background-color: var(--okc-sc-btn-bg, transparent); color: var(--okc-sc-btn-color, #0a3b5c); font-weight: 900; /* font-black beats font-bold */ text-transform: uppercase; /* uppercase */ font-size: 0.875rem; /* text-sm */ line-height: 1.25rem; letter-spacing: 0.05em; /* tracking-wider */ text-decoration: none; transition-property: all; /* transition-all */ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .okc-step-cards .okc-step-cards__btn:hover, .okc-step-cards .okc-step-cards__btn:focus-visible { background-color: var(--okc-sc-btn-bg-hover, #0a3b5c); color: var(--okc-sc-btn-color-hover, #ffffff); border-color: var(--okc-sc-btn-border-hover, #0a3b5c); } /* Keyboard focus ring — not in the legacy theme, which left the button with no visible focus state at all. Harmless for mouse users. */ .okc-step-cards .okc-step-cards__btn:focus-visible { outline: 2px solid var(--okc-sc-btn-border, #0a3b5c); outline-offset: 2px; }