/* * Kake Di Hatti (pId 59827) — brand override styles. * Auto-loaded by base.php for this brand. Ports the CI3 * assets/wla_new/kakedihatti/css/about.css (about page) * assets/wla_new/css/franchise_20251006_4.css (franchise page — used classes only) * assets/wla_new/css/gallery_20251106_1.css (gallery page — used classes only) * Only the classes the about / franchise / gallery views actually use. * * CI3 used --main-bg-color (brand primary) and --secondary-bg-color. * CI4 injects --brand-primary / --brand-secondary at runtime in , * so we alias them here instead of hardcoding a hex. */ :root { --main-bg-color: var(--brand-primary, #87bd3c); --secondary-bg-color: var(--brand-secondary, #24572c); } /* ── Shared layout / typography ─────────────────────────────────── */ .space-top { margin-top: 24px; } .common-spacing { padding: 25px 0; } .common-para { font-size: 15px; font-weight: 500; color: #201c1d; } .semibold { font-weight: 600; } .font-weight-semibold { font-weight: 600; } .color-primary { color: var(--main-bg-color); } /* ── About headings + dotted rule ───────────────────────────────── */ .common-heading-tp { font-size: 26px; } .common-heading-tp span { display: block; font-weight: 500; font-size: 22px; color: var(--main-bg-color); margin-bottom: 7px; } .bottom-dots .dot { position: relative; display: block; float: left; width: 3px; height: 2px; border-right: 3px solid var(--main-bg-color); margin-right: 3px; } .bottom-dots .dot.line-dot { border-right: 40px solid var(--main-bg-color); color: var(--main-bg-color); } .placeholder-img { border-radius: 12px; overflow: hidden; width: 100%; max-width: 100%; height: 320px; position: relative; box-shadow: 0 0 15px 0 rgb(0 0 0 / 20%); } .placeholder-img img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; } /* ── Franchise page ─────────────────────────────────────────────── */ .f-wrapper { position: relative; background: #eeeeee; padding: 40px 0; } .title { font-size: 26px; margin: 0 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); } .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; } .f-wrapper .btnAction { margin-top: 20px; } /* ── Gallery page ───────────────────────────────────────────────── */ .about-img img { width: 100%; max-width: 100%; } #imageViewer .modal-content { margin-top: 220px !important; background: none; border: none; } #imageViewer .modal-dialog { min-height: auto; } #imageViewer #imageDiv { border: 0px !important; border-radius: 20px !important; overflow: hidden; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 767px) { .common-spacing { padding: 20px 0; } .placeholder-img { height: 260px; } .common-heading-tp { font-size: 22px; } .common-heading-tp span { font-size: 18px; } .title { font-size: 20px; } .title .span-one { font-size: 18px; } .title:after { max-width: 100px; } .title .span-two { font-size: 20px; } #imageViewer .modal-content { margin-top: 0 !important; } #imageViewer .modal-dialog { min-height: calc(100% - 1rem); } }