/* * Chelvies Coffee (pId 7810) — brand override styles. * Auto-loaded by base.php for this brand. Ports the CI3 * assets/wla_new/chelvies/css/chelvies_20240108.css * (only the classes the index / about-us / franchise 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, #584630); } /* ── Base typography / layout ───────────────────────────────────── */ /* Fonts (matching the CI3 reference): serif (Georgia) headings on a sans body. body.ds-page prefix so it outranks the design-system heading font regardless of stylesheet load order; the body/nav/footer keep the design-system sans. */ body.ds-page h1, body.ds-page h2, body.ds-page h3, body.ds-page h4, body.ds-page h5, body.ds-page h6 { font-family: Georgia, "Times New Roman", Times, serif; } .site-content h1, .site-content h2, .site-content h3, .site-content h4 { color: var(--main-bg-color); } .site-content p { color: var(--main-bg-color); font-size: 16px; } .chelvies-common-spacing { padding: 50px 0; } /* ── Banner section ─────────────────────────────────────────────── */ .chelvies-banner-span { font-size: 15px; color: #d9a87e; text-transform: uppercase; } .chelvies-banner-head { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.2; } /* CI3's live hero heading is smaller than the repo's 56px; scaling down keeps it to two compact lines on desktop (matching the reference) and shrinks cleanly on tablets. Mobile size is pinned in the <768px block below. */ .chelvies-banner-head-two { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.2; } .chelvies-banner-head .display-stategy { display: block; } /* About-us hero: the live site flows this heading naturally (2 lines), so the highlighted span stays inline. Forcing display:block here split it into 3 spaced-out lines — the "extra space" in the heading. */ .chelvies-banner-head-two .display-stategy { display: inline; } .chelvies-common-btn { font-size: 16px; padding: 10px 30px; display: inline-block; border-radius: 50px !important; border: 1px solid var(--main-bg-color); color: var(--main-bg-color); fill: var(--main-bg-color); font-weight: 500; } .chelvies-common-btn svg { margin-left: 10px; } .chelvies-common-btn:hover { background-color: var(--main-bg-color); color: #fff; } .chelvies-common-btn:hover svg > path { fill: #fff; } .chelvies-common-btn.chelvies-colored { border: 1px solid #a8bfaa; color: #a8bfaa; } .chelvies-common-btn.chelvies-colored svg > path { fill: #a8bfaa; } .chelvies-common-btn.chelvies-colored:hover { border: 1px solid #c9711a; background-color: #fff; color: #c9711a; } /* ── Items / choose section ─────────────────────────────────────── */ .chelvies-items { overflow: hidden; } .choose-bg-img img { width: 100%; max-width: 550px; } .choose-sec .chelvies-banner-para { opacity: 0.85; } .choose-sec:after { content: ""; position: absolute; bottom: -80px; right: 0; background-image: url(../../wla_new/chelvies/images/chelvies-coffee-icon-two.svg); width: 180px; height: 180px; background-size: cover; } .menu-tbs { margin: 0; list-style-type: none; } .menu-tbs li { display: inline-block; padding: 0 20px; position: relative; } .menu-tbs li:first-child { padding-left: 0; } .menu-tbs li:last-child { padding-right: 0; } /* ── About blocks ───────────────────────────────────────────────── */ .chelvies-about-img { overflow: hidden; padding-left: 15px; padding-right: 15px; } .chelvies-about-img img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; border-radius: 0 200px 0 200px; } .chelvies-abt-start:before { content: ""; position: absolute; left: 15px; top: -15px; background-image: url(../../wla_new/chelvies/images/about-us-frame.png); background-size: cover; width: 100px; height: 100px; } /* Scales with the responsive hero so the section heading stays SMALLER than the hero at every width (CI3 hierarchy was 56 > 43). A fixed 43px made it larger than the shrunk hero on narrower screens — the heading "mismatch". */ .chelvies-head-v2 { font-size: clamp(26px, 2.7vw, 36px); } .chelvies-about-ul { padding: 0; margin: 0; list-style: none; } .chelvies-about-ul li { display: inline-block; padding: 0 15px; } .chelvies-about-ul li:first-child { padding-left: 0; } .chelvies-about-ul li:last-child { padding-right: 0; } .chelvies-about-ul li p a { display: inline-flex; align-items: center; } .features-ul img { border-radius: 50%; margin: 0 auto; max-width: 300px; } .center-fearure:before, .center-fearure:after { content: ""; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 100px; background-color: #de9244; opacity: 0.5; } .center-fearure:before { left: 0; } .center-fearure:after { right: 0; } /* ── Feature headings ───────────────────────────────────────────── */ .chelvies-feature-hd { font-size: 44px; padding-left: 30px; } .chelvies-feature-hd:before { content: ""; position: absolute; width: 5px; height: 40px; background-color: #d9a87e; left: 0; top: 10px; } /* ── Category tiles ─────────────────────────────────────────────── */ .collection-head { font-size: 22px; } .collection-head:before, .collection-head:after { content: ""; position: absolute; top: 50%; width: 1px; height: 100%; background-color: #de9244; transform: translate(-50%, -50%); } .collection-head:before { left: -16px; } .collection-head:after { right: -15px; } .item-img { margin-bottom: 10px; } .item-img img { border-radius: 15px; } .item-dis p { font-size: 21px; color: #c9711a; } /* ── About-us page (banner + gallery) ───────────────────────────── */ /* CI3's 150px bottom padding left a large empty band under the hero heading (the heading is short and the row centers it against the taller founder image). Tighten the padding AND cap the founder image height so the row is shorter — that shrinks the centred gap above/below the heading. */ .chelvies-about { padding: 36px 0 36px; } .chelvies-about .col-md-5 img { max-height: 260px; width: auto; max-width: 100%; } /* Decorative green blob removed to match the live design: the absolutely- positioned accent painted over the statically-positioned hero heading and hid it. Live chelviescoffee.com renders the hero on a plain cream ground. */ .chelvies-about:before { content: none; } .chelvies-gallery img { max-width: 100%; object-fit: cover; width: 100%; height: 100%; } .rotate-hd { transform: rotate(356deg); position: relative; z-index: 1; top: 53px; width: 110%; left: -77px; text-align: center; } .rotate-hd h2 { font-size: 64px; color: #d9a87e; } .rotate-hd h2 span { font-size: 20%; border-radius: 50%; border: 1px solid; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; vertical-align: text-top; margin-top: -11px; margin-left: 3px; font-weight: 400; } /* ── Banner slider (slick) ──────────────────────────────────────── */ .site-content .home-v1-slider { position: relative; text-transform: uppercase; color: #fff; margin-bottom: 0; } .banner-slide img { height: auto; max-width: 100%; border: 0; display: block !important; border-radius: 10px !important; } /* ── Franchise / contact form ───────────────────────────────────── */ .connect-franchise { padding-top: 0; } .chelvies-left { background-color: #d9a87e; z-index: 1; border-radius: 0 300px 0 0; } .contact-pg input, .contact-pg textarea { color: #222933; /* Transparent fill so the field blends into the cream panel (CI3 look), with a light hairline border so each field is still discernible. */ background: transparent; border: 1px solid rgba(88, 70, 48, 0.18); box-shadow: none; border-radius: 10px; padding: 15px 20px; height: auto; font-size: 16px; } .contact-pg input:focus, .contact-pg textarea:focus { border-color: rgba(88, 70, 48, 0.4); outline: none; } .contact-pg textarea { height: 250px; } /* Founder section: the design system forces img { display:block }, so the text-center parent no longer centers it — restore centering with auto margins. */ .chelvies-common-spacing.text-center .container img { margin-left: auto; margin-right: auto; } .contact-pg:after { content: ""; position: absolute; bottom: 0; left: 50%; background-image: url(../../wla_new/chelvies/images/contact-stripe.png); background-size: cover; width: 80%; height: 1px; transform: translate(-50%, -50%); } .submit-btn button { background-color: #c9711a; color: #fff; border: none; border-radius: 50px; padding: 12px 25px; font-size: 16px; } .name-full { font-family: 'Montserrat', sans-serif; font-size: 38px; color: #d9a87e; font-weight: 700; display: inline-block; margin-bottom: 24px; } .name-full span { font-size: 28%; border-radius: 50%; border: 1px solid; display: inline-flex; width: 18px; height: 18px; line-height: 18px; align-items: center; justify-content: center; vertical-align: text-top; margin-top: -11px; margin-left: 3px; font-weight: 400; } /* ── Newsletter stripe (legacy index_old) ───────────────────────── */ .subscribe-stripe p { font-size: 32px; font-weight: 600; line-height: initial; } .newsletter-dv form { display: flex; position: relative; width: 100%; max-width: 400px; float: right; } .newsletter-dv .form-control { border: 0; border-radius: 60px !important; height: auto; padding: 18px 140px 18px 30px; background-color: rgba(255, 255, 255, 0.8); font-weight: 500; color: #000; font-size: 16px !important; } .newsletter-dv button { border: none; font-weight: 600; z-index: 111; position: absolute; right: 0; padding: 10px 30px; top: 50%; transform: translate(0, -50%); border-left: 0.5px solid #88c0c2; text-transform: uppercase; } /* ── Responsive ─────────────────────────────────────────────────── */ @media screen and (max-width: 767px) { .site-content p { font-size: 15px; } .chelvies-common-spacing { padding: 30px 0; } .chelvies-banner-head { font-size: 35px; } .chelvies-banner-span { font-size: 14px; } .chelvies-common-btn { font-size: 15px; padding: 8px 15px; } .choose-sec:after { width: 120px; height: 120px; } .chelvies-about-img img { border-radius: 0 120px 0 120px; } .chelvies-feature-hd { font-size: 22px; } .chelvies-feature-hd:before { width: 4px; height: 35px; top: 5px; } .center-fearure:before { left: 50%; top: 0; width: 100%; height: 1px; } .center-fearure:after { top: auto; bottom: -15px; width: 100%; height: 1px; right: 0; transform: initial; } .subscribe-stripe p { font-size: 21px; } .features-ul img { max-width: 200px; } .chelvies-about { padding: 45px 0; } .chelvies-about:before { width: 202px; height: 224px; } .rotate-hd { top: 20px; transform: rotate(354deg); left: -17px; } .rotate-hd h2 { font-size: 35px; } .rotate-hd h2 span { font-size: 22%; width: 15px; height: 15px; margin-top: -10px; } .item-dis p { font-size: 15px; line-height: 23px; } .name-full { font-size: 25px; margin-bottom: 15px; } .name-full span { width: 14px; height: 14px; line-height: 14px; margin-top: -10px; } .chelvies-left { border-radius: 0 200px 0 0; } .chelvies-banner-head .display-stategy { display: inline; } }