/* * Pizzicato (pId 68184) — brand override styles. * Auto-loaded by base.php for this brand on every page. * CI4 injects --brand-primary at runtime in ; alias CI3's colour var to it. */ :root { --main-bg-color: var(--brand-primary, #f44336); --pz-brand: var(--brand-primary, #f44336); --pz-ink: #1a1a1a; --pz-body: #444; --pz-line: #ececec; --pz-surface: #fff; } /* ── About Us ───────────────────────────────────────────────────── */ .pz-about { padding: 48px 0 64px; color: var(--pz-body); } /* Page heading */ .pz-head { text-align: center; margin-bottom: 44px; } .pz-head__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pz-brand); margin-bottom: 10px; } .pz-head__title { font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--pz-ink); margin: 0; } .pz-head__rule { display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 4px; background: var(--pz-brand); } /* Feature strip */ .pz-features { justify-content: center; margin-bottom: 20px; } .pz-feature { height: 100%; text-align: center; padding: 32px 22px; background: var(--pz-surface); border: 1px solid var(--pz-line); border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .pz-feature:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .1); border-color: transparent; } .pz-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 18px; border-radius: 50%; color: #fff; background: var(--pz-brand); box-shadow: 0 8px 18px rgba(244, 67, 54, .28); } .pz-feature__icon svg { width: 34px; height: 34px; } .pz-feature__title { font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; color: var(--pz-ink); } .pz-feature__text { font-size: 14px; line-height: 22px; margin: 0; color: var(--pz-body); } /* Bootstrap columns don't stretch cards to equal height by default here; flatten the wrapping columns so .pz-feature can fill the row height. */ .pz-features > [class*="col-"] { margin-bottom: 20px; display: flex; } /* ── Mission / Vision + image ───────────────────────────────────── */ .pz-content { margin-top: 28px; align-items: stretch; /* left card + image share the row height */ } /* Tabs card */ .pz-tabs { position: relative; height: 100%; display: flex; flex-direction: column; padding: 28px 30px 30px; background: var(--pz-surface); border: 1px solid var(--pz-line); border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .05); } .pz-tab__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .pz-tabs__nav { display: flex; gap: 6px; border-bottom: 2px solid var(--pz-line); margin-bottom: 22px; } .pz-tab__label { position: relative; display: inline-block; padding: 10px 24px; margin-bottom: -2px; font-size: 18px; font-weight: 700; letter-spacing: .02em; color: #888; cursor: pointer; border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease; } .pz-tab__label:hover { color: var(--pz-ink); } .pz-tabs__panels { flex: 1 1 auto; } .pz-tab__panel { display: none; animation: pz-fade .2s ease; } @keyframes pz-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Active tab → highlight its label + reveal its panel */ #pz-tab-mission:checked ~ .pz-tabs__nav label[for="pz-tab-mission"], #pz-tab-vision:checked ~ .pz-tabs__nav label[for="pz-tab-vision"] { color: var(--pz-brand); border-bottom-color: var(--pz-brand); } #pz-tab-mission:checked ~ .pz-tabs__panels .pz-tab__panel--mission, #pz-tab-vision:checked ~ .pz-tabs__panels .pz-tab__panel--vision { display: block; } /* Keyboard focus ring on the active-toggling label */ .pz-tab__radio:focus-visible ~ .pz-tabs__nav label[for="pz-tab-mission"], .pz-tab__radio:focus-visible ~ .pz-tabs__nav label[for="pz-tab-vision"] { outline: 2px solid var(--pz-brand); outline-offset: 3px; border-radius: 4px; } .pz-list { margin: 0; padding: 0; list-style: none; } .pz-list li { position: relative; font-size: 15.5px; line-height: 26px; margin-bottom: 14px; padding-left: 26px; text-align: justify; } .pz-list li:last-child { margin-bottom: 0; } .pz-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--pz-brand); } .pz-para { font-size: 16px; line-height: 28px; text-align: justify; margin: 0; } /* Right-hand image */ .pz-about__media { height: 100%; margin: 0; } .pz-about__media img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); } /* Queries banner */ .pz-queries { margin-top: 40px; padding: 26px 24px; text-align: center; background: rgba(244, 67, 54, .05); border: 1px solid var(--pz-line); border-radius: 14px; } .pz-queries__label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pz-brand); margin-bottom: 14px; } .pz-queries__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; } .pz-queries__item { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--pz-ink); text-decoration: none; } .pz-queries__item svg { width: 20px; height: 20px; color: var(--pz-brand); } .pz-queries__item:hover { color: var(--pz-brand); } @media (max-width: 767px) { .pz-about { padding: 28px 0 44px; } .pz-head { margin-bottom: 32px; } .pz-head__title { font-size: 30px; } .pz-tabs { padding: 22px 18px 24px; } .pz-tab__label { padding: 10px 16px; font-size: 16px; } .pz-about__media { margin-top: 22px; } .pz-about__media img { min-height: 0; } .pz-queries__row { flex-direction: column; gap: 12px; } }