/* * Love & Cheesecake (pId 48887) — brand override styles. * Auto-loaded by base.php for this brand. Ports the CI3 * assets/themes/ue_override/lovencheesecake/about-stylesheet.css * + style.css + responsive.css (only the classes the about / * contact pages use; deduped across the three files). * * CI3 used --main-bg-color; CI4 injects --brand-primary at runtime in , * so we alias it here instead of hardcoding a hex. Fallback #D01A53 is the * brand pink (from the original bgshap.svg fill). */ :root { --main-bg-color: var(--brand-primary, #D01A53); } /* ── Base resets (contact page is text-driven) ──────────────────── */ .f-wrapper h1, .f-wrapper h5, .f-wrapper p { margin: 0; } .f-wrapper p { line-height: 22px; } /* ── About: layout / headings ───────────────────────────────────── */ .common-spacing { padding: 30px 0; } .common-heading { font-size: 30px; font-weight: 600; } .common-heading::after { position: absolute; content: ""; bottom: -16px; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 3px; background-color: var(--main-bg-color); } .common-p { font-size: 17px; line-height: 27px; } .common-p b { font-weight: 600; } /* ── About: team cards ──────────────────────────────────────────── */ .menu-img { width: 100%; height: 220px; max-width: 220px; border-radius: 50% !important; overflow: hidden; margin: 0 auto 20px; } .menu-div h4 { font-size: 20px; } .ourteam .common-p { width: 100%; max-width: 500px; margin: 0 auto 1em; } /* ── Contact: section headings ──────────────────────────────────── */ .sections-content h5 { font-size: 14px; text-transform: uppercase; color: #7c7c7c; position: relative; margin-bottom: 1rem; } .sections-content h2 { font-size: 36px; color: var(--main-bg-color); text-transform: uppercase; } .sections-content p { font-size: 14px; line-height: 24px; margin-top: 10px; } /* ── Contact: wrapper + company info cards ──────────────────────── */ .f-wrapper { padding-bottom: 3rem; position: relative; padding-top: 8rem; background: #f7f7f7; } .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: 7px; /* CI3 inlined this background in the view; the bgshap.svg fill is the brand pink, inlined here as a data URI so the override is self-contained. */ background: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.875 51.3C129.05 58.05 120.55 77.2 110.1 94.55C99.675 111.925 87.35 127.45 75.475 127.2C63.6 126.925 52.2 110.825 42.35 93.825C32.5 76.8 24.2 58.825 29.9 52.375C35.6 45.925 55.3 50.95 75.575 50.625C95.85 50.3 116.725 44.575 122.875 51.3Z' fill='%23D01A53'/%3E%3C/svg%3E") no-repeat bottom; } .company-info p { margin-top: 20px; color: #666; } /* ── Contact: forms ─────────────────────────────────────────────── */ .btn-success { background: var(--main-bg-color) !important; border: 2px solid var(--main-bg-color) !important; border-radius: 80px !important; padding: 10px 35px !important; font-weight: normal !important; color: #fff !important; } .btn-success:hover, .btn-success:focus { background: #fff !important; color: var(--main-bg-color) !important; } .site-forms .form-group { margin-bottom: 20px; } .site-forms .form-control { height: auto; border-color: #ddd; padding: 15px; } .site-forms textarea.form-control { height: 180px; padding: 15px; } .form-control { transition: border-color .2s ease, box-shadow .2s ease; } .form-control:focus { outline: none; box-shadow: none; } .form-control.is-invalid { border-color: #e53935 !important; box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15) !important; background-color: #fff; } .form-control.is-valid { border-color: var(--main-bg-color) !important; box-shadow: 0 0 0 3px rgba(36, 87, 44, 0.12) !important; background-image: none; } .field-error { display: block; color: #e53935; font-size: .78em; margin-top: 4px; min-height: 1em; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; text-align: left; } .field-error.visible { opacity: 1; transform: translateY(0); } /* ── Contact: form status message ───────────────────────────────── */ .form-submit-success { background: linear-gradient(to bottom right, var(--main-bg-color) 0%, #ececec 100%); color: #fff !important; display: none; border-radius: 6px; padding: .8em 1.2em !important; font-size: .95em !important; } .f-wrapper .btnAction { margin-top: 20px; } .btnAction:disabled { opacity: .7; cursor: not-allowed; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (min-width: 576px) and (max-width: 767.98px) { .sections-content h2 { font-size: 28px; } } @media only screen and (max-width: 767px) { .common-spacing { padding: 25px 0; } .common-heading { font-size: 22px; } .common-p { font-size: 16px; line-height: 26px; margin-top: 10px; } .swiperow > div:first-child { order: 1; } .menu-img { width: 160px; height: 160px; } .menu-div h4 { font-size: 18px; } .menu-section .row > div { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid #fff; } .menu-section .row > div:last-child { margin-bottom: 0; border-bottom: none; } .ourteam .row > div { border-bottom: 2px solid #f1f1f1; } } @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; } .sections-content h2 { font-size: 24px; } }