/* * O'Chicken (pId 67344) — brand override styles. * Auto-loaded by base.php for this brand. Ports the CI3 * assets/themes/ue_override/o-chicken/style.css (contact page chrome) * assets/themes/ue_override/o-chicken/responsive.css (contact mobile overrides) * assets/themes/ue_override/o-chicken/our-story.css (about / timeline / country list) * assets/wla_new/css/franchise_20251006_4.css (franchise .title / .span-* / .color-primary) * — only the classes the contact / franchise / our-story pages actually use, deduped. * * CI3 used --main-bg-color; CI4 injects --brand-primary at runtime in , * so we alias it here instead of hardcoding a hex. The timeline accent green * maps to --brand-secondary. Structural colours (greys, whites) stay literal. * url(../images/...) refs resolve from assets/css/ue_override/ — none survive * the dedupe (icon backgrounds are set inline in the views), so no rewrites needed. */ :root { --main-bg-color: var(--brand-primary, #24572C); } /* ── Contact page: wrapper + company info cards (style.css) ──────── */ .f-wrapper { padding-bottom: 3rem; position: relative; padding-top: 8rem; background: #f7f7f7; } .f-wrapper .btnAction { margin-top: 20px; } .company-info { background: #fff; border-radius: 10px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.3); text-align: center; padding: 2rem; height: 100%; } .company-info i { font-size: 45px; width: 150px; height: 104px; line-height: 4.5rem; color: #fff; padding-left: 0; } .company-info p { margin-top: 20px; color: #666; } /* ── Forms (style.css) ──────────────────────────────────────────── */ .site-forms .form-group { margin-bottom: 20px; } .site-forms .form-control { height: auto; border-color: #ddd; padding: 15px 15px; } .site-forms textarea.form-control { height: 180px; padding: 15px; } .contact-form { background-color: #fff; width: 100%; padding: 20px 20px; border-radius: 20px; margin: 0 auto; margin-top: 20px; box-shadow: 0px 0px 10px #00000029; } .form-submit-success { background: linear-gradient(to bottom right, var(--main-bg-color) 0%, #ececec 100%); color: #fff !important; padding: 1em; font-size: 1.1em; display: none; } /* ── Primary CTA (style.css) ────────────────────────────────────── */ .cta-primary { background-color: var(--main-bg-color); color: var(--color-white, #fff) !important; opacity: 1; border: 1px solid var(--main-bg-color); padding: 10px 24px !important; font-weight: 600; border-radius: 12px !important; align-items: center; justify-content: center; gap: 10px; line-height: 1.3; display: inline-block; font-size: 16px; } /* ── Select dropdown wrapper (style.css / franchise) ────────────── */ .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; position: absolute; right: 12px; top: 50%; pointer-events: none; transform: translate(0, -50%); } .select-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; background-color: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 4px; } /* ── Franchise heading block (franchise_20251006_4.css) ─────────── */ .title { font-size: 26px; margin: 0 0 .5407911001em; text-align: left; } .title:after { content: ""; position: absolute; width: 100%; max-width: 130px; background-color: var(--main-bg-color); height: 1px; bottom: -7px; left: 0px; } .text-center.title::after { left: 50%; transform: translate(-50%, 0px); } .title .span-one { font-size: 22px; } .title .span-two { font-size: 26px; margin-top: 0; line-height: normal; margin: 0 0 1em; text-transform: uppercase; } .font-weight-semibold { font-weight: 600; } .color-primary { color: var(--main-bg-color); } /* ── Our Story: layout + headings (our-story.css) ───────────────── */ .common-sec { padding: 25px 0; } .colored { background-color: #F2F2F2; } .about-heading { font-size: 28px; font-weight: 700; margin-bottom: 10px; } .about-para { color: #848484; font-size: 16px; line-height: 25px; } .about-profile-img { text-align: center; } .about-profile-img img { max-width: 100%; box-shadow: 0px 4px 7px rgb(0 0 0 / 10%); border-radius: 10px; } /* ── Our Story: timeline (our-story.css) ────────────────────────── */ #timeline { position: relative; padding: 1rem 1rem; margin-top: 20px; width: 100%; max-width: 500px; } #timeline::before { content: ''; position: absolute; top: 0; height: 100%; width: 4px; background: var(--brand-primary, #006630); } .timeline-block { position: relative; margin: 1rem 0; } .timeline-block:after { content: ''; display: table; clear: both; } .timeline-block:first-child { margin-top: 0; } .timeline-block:last-child { margin-bottom: 0; } .timeline-circle { position: absolute; top: 22px; left: -5px; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--brand-secondary, #16a850), inset 0 2px 0 rgb(0 0 0 / 8%), 0 2px 0 2px rgb(0 0 0 / 5%); } .timeline-content { position: relative; margin-left: 25px; margin-right: 0px; background: #fff; border-radius: 0.6rem; padding: 10px 10px; opacity: 1; box-shadow: 0px 4px 7px rgb(0 0 0 / 10%); } .timeline-content:after { content: ''; display: table; clear: both; } .timeline-content::before { content: ''; position: absolute; top: 1.2rem; right: 100%; height: 0; width: 0; border: 0.6rem solid transparent; border-right: 0.4rem solid #fff; } .timeline-content h4 { color: var(--brand-primary, #006630); text-transform: uppercase; font-weight: 700; text-align: left; font-size: 18px; margin-bottom: 5px; } .timeline-content p { color: #201C1D; margin: 0px; text-align: left; font-weight: 500; font-size: 15px; } .timeline-content span, .timeline-content span i { color: var(--brand-secondary, #16a850); font-size: 15px; } .timeline-content span { float: right; } /* ── Our Story: "goes international" country list (our-story.css) ─ */ .blog-section-left { background-color: #fff; padding: 35px 25px 30px 25px; border-radius: 15px; box-shadow: 0px 4px 7px rgb(0 0 0 / 10%); } .country-listing { list-style-type: none; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding: 0px; margin: 0px; } .country-listing li { display: inline-block; width: 100%; max-width: 30%; text-align: center; margin: 15px 0; font-size: 17px; font-weight: 500; color: #333; } .flag-b { width: 100%; max-width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto; margin-bottom: 20px; box-shadow: 0 5px 20px -10px rgb(0 0 0 / 30%); } .flag-b img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; } /* ── Tablet / small-desktop (max 991px) ─────────────────────────── */ @media screen and (max-width: 991px) { .common-sec { padding: 20px 0; } } /* ── Mobile (max 767px) ─────────────────────────────────────────── */ @media (max-width: 767px) { .title { font-size: 20px; } .title .span-one { font-size: 18px; } .title:after { max-width: 100px; } .title .span-two { font-size: 20px; } } @media screen and (max-width: 767px) { #timeline::before { width: 2px; } .timeline-content h4 { font-size: 16px; } .timeline-content p { text-align: left; font-size: 14px; } .timeline-content span, .timeline-content span i { font-size: 13px; } .about-heading { font-size: 26px; margin-bottom: 8px; } .about-profile-img { text-align: center; padding-top: 15px; } .about-para { font-size: 15px; line-height: 24px; margin-bottom: 10px; } .flag-b { max-width: 90px; height: 90px; margin-bottom: 15px; } .country-listing li { max-width: 33.33%; margin: 12px 0; } .blog-section-left { max-width: 470px; margin: 0 auto; margin-top: 25px; } } /* ── Small mobile (max 575px) ───────────────────────────────────── */ @media (max-width: 575.98px) { .f-wrapper { padding-top: 6rem; padding-bottom: 2rem; } .site-forms { margin-top: 2rem; } .company-info { padding: 1rem; margin-top: 1rem; height: auto; } } @media screen and (max-width: 575px) { .about-profile-img { padding-top: 10px; } .about-heading { font-size: 21px; margin-bottom: 7px; } .country-listing li { max-width: 50%; } .blog-section-left { padding: 25px 10px 15px 10px; } }