/* * CK's Bakery (pId 64261) — brand override styles. * Auto-loaded by base.php for this brand. Ports the CI3 * assets/wla_new/cksbakery/css/about-new.css + assets/wla_new/css/contact-new.css * (only the classes the about / contact pages use). * * CI3 used --main-bg-color; CI4 injects --brand-primary at runtime in , * so we alias it here instead of hardcoding a hex. */ :root { --main-bg-color: var(--brand-primary, #c0392b); } /* ── Layout / shared ────────────────────────────────────────────── */ .space-top { margin-top: 24px; } .common-spacing { padding: 30px 0; } .bg-section { background-color: transparent; } .common-para { font-size: 15px; font-weight: 500; color: #201c1d; line-height: 26px; margin-bottom: 1rem; } .semibold { font-weight: 600; } .animatebtn { position: relative; overflow: hidden; cursor: pointer; } .font-weight-semibold { font-weight: 600; } /* ── 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; } /* ── Contact form ───────────────────────────────────────────────── */ .title .span-two { display: block; font-size: 26px; margin: 0 0 1em; text-transform: uppercase; color: #000; line-height: normal; } .text-center.title::after { left: 50%; transform: translate(-50%, 0); } .contact-form { background-color: #fff; width: 100%; max-width: 550px; padding: 20px; border-radius: 20px; margin: 20px auto 0; box-shadow: 0 0 10px #00000029; border: 1px solid #cccccc; } .contact-form p { font-size: 14px; max-width: 410px; margin: 0 auto; } .contact-form form label { font-weight: 600; color: #000; font-size: 16px; } .contact-form-bg .form-group { margin-bottom: 20px; } .contact-form-bg .form-control { color: #000; padding: 10px 15px; border-radius: 5px !important; height: auto; font-size: 15px !important; font-weight: 500; } .contact-form-bg .form-control:focus, .contact-form-bg .form-control:active, .contact-form-bg .form-control:focus-visible { border: 1px solid var(--main-bg-color); box-shadow: none; outline: none; } .contact-form form .primary-button { background: var(--main-bg-color); box-shadow: 0 0 20px #00000029; border-radius: 5px; color: #fff; padding: 14px 25px; display: inline-block; border: none; font-size: 15px; margin-top: 10px; } .common-p { font-size: 17px; line-height: 27px; } .common-p b { font-weight: 600; } /* form status messages (replaces the CI3 inline alert toggles) */ .form-status { display: none; width: fit-content; margin: 0 auto 1em; padding: 10px 16px; border-radius: 8px; font-size: 14px; } .form-status--ok { display: block; background: #e6f5ea; color: #1c6b34; } .form-status--err { display: block; background: #fdeaea; color: #b3261e; } @media only screen and (max-width: 767px) { .common-spacing { padding: 20px 0; } .common-heading-tp { font-size: 22px; } .common-heading-tp span { font-size: 18px; } .title .span-two { font-size: 20px; } .placeholder-img { height: 260px; } .contact-form { padding: 20px 15px; } .common-p { font-size: 16px; line-height: 26px; margin-top: 10px; } }