/* * Dana Choga (pId 58941) — brand override styles. * Auto-loaded by base.php for this brand. Ports the CI3 * assets/themes/ue_override/danachoga/css/about20251127_12.css (about page) * + assets/wla_new/css/franchise_20251006_4.css (catering-enquiry page), * keeping only the classes those two pages actually use, deduped. * * CI3 used --main-bg-color / --secondary-bg-color; CI4 injects --brand-primary * (+ --brand-secondary) at runtime in , so we alias them here instead of * hardcoding a hex. Structural / neutral colors stay literal. */ :root { --main-bg-color: var(--brand-primary, #8c1d1d); --secondary-bg-color: var(--brand-secondary, #c0392b); } /* ── Layout / shared ────────────────────────────────────────────── */ .space-top { margin-top: 24px; } .common-spacing { padding: 25px 0px; } .common-para { font-size: 15px; color: #201C1D; } .font-weight-semibold { font-weight: 600; } .semibold { font-weight: 600; } .color-primary { color: var(--main-bg-color); } /* ── About: banner + imagery ────────────────────────────────────── */ .about-img img { width: 100%; } .placeholder-img { border-radius: 12px; overflow: hidden; width: 100%; max-width: 100%; height: auto; position: relative; -webkit-box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%); } .placeholder-img img { width: 100%; max-width: 100%; height: auto; object-fit: cover; } /* ── Headings / titles ──────────────────────────────────────────── */ .title { font-size: 26px; margin: 0 0 .5407911001em; text-align: left; } .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; } .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); } .text-center.text-md-left.title::after { left: 0px; transform: translate(0%, 0px); } /* ── Awards slider (about page) ─────────────────────────────────── */ .award-slider { margin-top: 30px; width: 100%; max-width: 100%; } .award-slider .slick-list { padding: 0 15% 0 0 !important; } .award-slider .slick-slide { margin: 0 6px !important; } .award-slider .slick-dots { bottom: -24px; } .award-item { display: flex; justify-content: center; align-items: center; margin: 0 6px; } .award-item img { width: 100%; margin: 10px 0; display: block; box-shadow: 0px 5px 5px rgb(0 0 0 / 15%); border-radius: 6px; border: 1px solid #9F9F9F; height: 270px; max-width: 100%; object-fit: contain; padding: 10px; } /* ── Slick track / dots (about page) ────────────────────────────── */ .slick-track { display: flex !important; align-items: center !important; } .slick-slide { display: flex !important; justify-content: center; } .slick-dots { text-align: center; } .slick-dots li { cursor: pointer; display: inline-block; margin: 0 4px; position: relative; height: auto; width: auto; } .slick-dots li:first-child { margin-left: 0; } .slick-dots li:last-child { margin-right: 0; } .slick-dots button:not(:disabled) { cursor: pointer; } .slick-dots li button { border: 0; outline: none; line-height: 0px; color: transparent; display: block; font-size: 0; width: 12px; height: 12px; padding: 0; background-color: #eee; border: 1px solid var(--main-bg-color); cursor: pointer; -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53); border-radius: 50% !important; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; background: #fff; border-color: var(--main-bg-color); } .slick-dots li.slick-active button { width: 29px; background: var(--main-bg-color); border-color: var(--main-bg-color); } /* ── Catering enquiry: form section (franchise css) ─────────────── */ .f-wrapper { position: relative; background: #eeeeee; padding: 40px 0; } .f-wrapper .btnAction { margin-top: 20px; } .sections-content h2 { font-size: 36px; color: var(--main-bg-color); text-transform: uppercase; } .sections-content h5 { font-size: 14px; text-transform: uppercase; color: #7c7c7c; position: relative; margin-bottom: 1rem; } .sections-content p { font-size: 14px; line-height: 24px; margin-top: 10px; } .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; } .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; } /* ── Mobile (<=767px) ───────────────────────────────────────────── */ @media (max-width: 767px) { .common-spacing { padding: 20px 0px; } .placeholder-img { height: 100%; } .title { font-size: 20px; } .title .span-one { font-size: 18px; } .title:after { max-width: 100px; } .title .span-two { font-size: 20px; } .text-center.text-md-left.title::after { left: 50%; transform: translate(-50%, 0px); } } @media only screen and (max-width: 767px) { .award-slider img { margin: 0px 0 10px 0; width: 100%; } .award-slider .slick-list { padding: 0 25% 0 0 !important; } }