/* * Products & Services page (/catalog/): tabs, category chips, search and the product and repair * service cards rendered by the Worker (worker/templates.js renderCatalog). Script: catalog.js. * Loaded after the theme's stylesheets; every rule is scoped under .pcp-catalog. * * Theme values: accent #eb4a62, headings Montserrat, text Work Sans, 10px corners. * Without JavaScript (no .pcp-js on ) both lists show one after the other, with their headings. */ .pcp-catalog { --pcp-accent: #eb4a62; --pcp-accent-dark: #d0364f; --pcp-accent-soft: #fdf0f2; --pcp-ink: #222; --pcp-text: #5f5f5f; --pcp-muted: #8a8a8a; --pcp-line: #ebebeb; --pcp-surface: #f5f5f6; width: 100%; margin: 26px 0 50px; font-family: "Work Sans", sans-serif; color: var(--pcp-text); text-align: left; } .pcp-catalog [hidden] { display: none !important; } .pcp-catalog a { text-decoration: none; } .pcp-catalog a:focus-visible, .pcp-catalog button:focus-visible, .pcp-catalog input:focus-visible { outline: 2px solid var(--pcp-accent); outline-offset: 2px; } /* Header search note ------------------------------------------------------------------------ */ .pcp-catalog .pcp-searchnote { margin: 0 0 18px; text-align: center; font-size: 15px; color: var(--pcp-text); } .pcp-catalog .pcp-searchnote strong { color: var(--pcp-ink); font-weight: 600; } .pcp-catalog .pcp-searchnote-clear { color: var(--pcp-accent); font-weight: 600; } .pcp-catalog .pcp-searchnote-clear:hover { color: var(--pcp-accent-dark); text-decoration: underline; } /* Tabs --------------------------------------------------------------------------------------- */ .pcp-catalog .pcp-tabs { display: flex; gap: 6px; max-width: 680px; margin: 0 auto 30px; padding: 6px; border-radius: 16px; background: var(--pcp-surface); scroll-margin-top: 110px; } .pcp-catalog .pcp-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 10px 16px; border-radius: 11px; background: transparent; color: #555; font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .pcp-catalog .pcp-tab:hover { color: var(--pcp-ink); background: rgba(255, 255, 255, 0.6); } .pcp-catalog .pcp-tab-icon { font-size: 17px; color: #9a9a9a; transition: color 0.2s ease; } .pcp-catalog .pcp-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: #e2e2e5; color: #555; font-size: 13px; font-weight: 700; } /* The active tab. The data-pcp-start rules show the tab named in the URL before catalog.js runs. */ .pcp-catalog .pcp-tab.is-active, html[data-pcp-start="products"] .pcp-catalog #pcp-tab-products, html[data-pcp-start="services"] .pcp-catalog #pcp-tab-services { background: #fff; color: var(--pcp-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.07); } .pcp-catalog .pcp-tab.is-active .pcp-tab-icon, html[data-pcp-start="products"] .pcp-catalog #pcp-tab-products .pcp-tab-icon, html[data-pcp-start="services"] .pcp-catalog #pcp-tab-services .pcp-tab-icon { color: var(--pcp-accent); } .pcp-catalog .pcp-tab.is-active .pcp-tab-count, html[data-pcp-start="products"] .pcp-catalog #pcp-tab-products .pcp-tab-count, html[data-pcp-start="services"] .pcp-catalog #pcp-tab-services .pcp-tab-count { background: var(--pcp-accent); color: #fff; } html[data-pcp-start="products"] .pcp-catalog #pcp-tab-services, html[data-pcp-start="services"] .pcp-catalog #pcp-tab-products { background: transparent; color: #555; box-shadow: none; } html[data-pcp-start="products"] .pcp-catalog #pcp-tab-services .pcp-tab-icon, html[data-pcp-start="services"] .pcp-catalog #pcp-tab-products .pcp-tab-icon { color: #9a9a9a; } html[data-pcp-start="products"] .pcp-catalog #pcp-tab-services .pcp-tab-count, html[data-pcp-start="services"] .pcp-catalog #pcp-tab-products .pcp-tab-count { background: #e2e2e5; color: #555; } /* Panels ------------------------------------------------------------------------------------- */ .pcp-js .pcp-catalog .pcp-panel { display: none; } .pcp-js .pcp-catalog .pcp-panel.is-active, html[data-pcp-start="products"] .pcp-catalog #pcp-panel-products, html[data-pcp-start="services"] .pcp-catalog #pcp-panel-services { display: block; } html[data-pcp-start="products"] .pcp-catalog #pcp-panel-services, html[data-pcp-start="services"] .pcp-catalog #pcp-panel-products { display: none; } /* Headings: font sizes are !important because the theme sets h1-h6 sizes with !important below 800px. */ .pcp-catalog .pcp-panel-title { margin: 0 0 18px; color: var(--pcp-ink); font-size: 28px !important; line-height: 1.3; } .pcp-catalog .pcp-panel-count { color: var(--pcp-muted); font-weight: 400; } /* With JavaScript the tabs name the panels; the headings stay for screen readers. */ .pcp-js .pcp-catalog .pcp-panel-title { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Without JavaScript: no tabs or filters, both lists one after the other. */ html:not(.pcp-js) .pcp-catalog .pcp-tabs, html:not(.pcp-js) .pcp-catalog .pcp-toolbar { display: none; } html:not(.pcp-js) .pcp-catalog .pcp-panel + .pcp-panel { margin-top: 60px; } /* Toolbar: category chips, result count and search ----------------------------------------- */ .pcp-catalog .pcp-toolbar { margin: 0 0 22px; } .pcp-catalog .pcp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; } .pcp-catalog .pcp-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 8px 7px 15px; border: 1px solid #e1e1e1; border-radius: 999px; background: #fff; box-shadow: none; color: #444; font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pcp-catalog .pcp-chip:hover, .pcp-catalog .pcp-chip:focus { border-color: var(--pcp-accent); background: #fff; box-shadow: none; color: var(--pcp-accent); } .pcp-catalog .pcp-chip.is-active, .pcp-catalog .pcp-chip.is-active:hover, .pcp-catalog .pcp-chip.is-active:focus { border-color: var(--pcp-accent); background: var(--pcp-accent); color: #fff; } .pcp-catalog .pcp-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: #f1f1f2; color: #666; font-size: 12px; font-weight: 600; } .pcp-catalog .pcp-chip:hover .pcp-chip-count { background: var(--pcp-accent-soft); color: var(--pcp-accent); } .pcp-catalog .pcp-chip.is-active .pcp-chip-count { background: rgba(255, 255, 255, 0.24); color: #fff; } .pcp-catalog .pcp-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 16px; border-top: 1px solid var(--pcp-line); } .pcp-catalog .pcp-status { margin: 0; color: var(--pcp-muted); font-size: 14px; line-height: 1.4; } .pcp-catalog .pcp-search { position: relative; display: block; flex: 0 1 320px; margin: 0; font-weight: 400; } .pcp-catalog .pcp-search-icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: #a0a0a0; font-size: 14px; pointer-events: none; } .pcp-catalog .pcp-search-input { display: block; box-sizing: border-box; /* Bootstrap gives search inputs content-box */ width: 100%; height: 44px; margin: 0; padding: 0 14px 0 40px; border: 1px solid #e1e1e1; border-radius: 10px; background: #fff; color: #333; font-family: "Work Sans", sans-serif; font-size: 15px; line-height: 44px; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .pcp-catalog .pcp-search-input::placeholder { color: #9b9b9b; } .pcp-catalog .pcp-search-input:focus { border-color: var(--pcp-accent); outline: none; box-shadow: 0 0 0 3px rgba(235, 74, 98, 0.15); } /* Grids -------------------------------------------------------------------------------------- */ .pcp-catalog .pcp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin: 0; } @media (min-width: 480px) { .pcp-catalog .pcp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } } @media (min-width: 992px) { .pcp-catalog .pcp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } } /* Product cards (Tech Life product card markup) */ .pcp-catalog .pcp-grid--products .stronghold-product-item { position: relative; width: auto; margin: 0; } .pcp-catalog .pcp-grid--products .product_img_container_sc { background: var(--pcp-surface); } .pcp-catalog .pcp-grid--products .product_img_front_sc img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 500; object-fit: cover; } .pcp-catalog .pcp-grid--products .product-info-sc { padding-top: 14px; } .pcp-catalog .pcp-card-cat { margin: 0 0 2px; color: var(--pcp-muted); font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .pcp-catalog .pcp-grid--products .product-name-sc { margin: 0; font-size: 17px !important; line-height: 1.4; } .pcp-catalog .pcp-grid--products .product-name-sc a:hover { color: var(--pcp-accent); } .pcp-catalog .pcp-card-price { display: block; margin-top: 4px; color: var(--pcp-accent); font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 700; } /* Repair service cards */ .pcp-catalog .pcp-service { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--pcp-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .pcp-catalog .pcp-service:hover { border-color: #e3e3e3; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09); transform: translateY(-4px); } .pcp-catalog .pcp-service-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pcp-surface); } .pcp-catalog .pcp-service-media img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: transform 0.4s ease; } .pcp-catalog .pcp-service:hover .pcp-service-media img { transform: scale(1.04); } .pcp-catalog .pcp-service-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 18px 20px 20px; } .pcp-catalog .pcp-service-cat { margin: 0 0 6px; color: var(--pcp-accent); font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; line-height: 1.4; text-transform: uppercase; } .pcp-catalog .pcp-service-title { display: -webkit-box; margin: 0 0 8px; overflow: hidden; font-size: 18px !important; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .pcp-catalog .pcp-service-title a { color: var(--pcp-ink); transition: color 0.2s ease; } .pcp-catalog .pcp-service-title a:hover { color: var(--pcp-accent); } .pcp-catalog .pcp-service-desc { display: -webkit-box; margin: 0 0 16px; overflow: hidden; color: #6f6f6f; font-size: 14px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .pcp-catalog .pcp-service-pricing { margin-top: auto; padding-top: 14px; border-top: 1px solid #f0f0f0; } .pcp-catalog .pcp-service-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin: 0 0 6px; } .pcp-catalog .pcp-price-from { color: var(--pcp-muted); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .pcp-catalog .pcp-price-value { color: var(--pcp-ink); font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .pcp-catalog .pcp-service-price--call .pcp-price-value { color: #555; font-size: 17px; line-height: 1.9; } .pcp-catalog .pcp-rates { margin: 4px 0 0; padding: 0; list-style: none; } .pcp-catalog .pcp-rates li { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 0; color: #555; font-size: 14px; line-height: 1.9; } .pcp-catalog .pcp-rates li::before { content: none; } .pcp-catalog .pcp-rate-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcp-catalog .pcp-rate-dots { flex: 1 1 auto; min-width: 14px; border-bottom: 1px dotted #c8c8c8; transform: translateY(-4px); } .pcp-catalog .pcp-rate-price { flex: 0 0 auto; color: var(--pcp-ink); font-weight: 600; white-space: nowrap; } .pcp-catalog .pcp-rates-more { display: inline-block; margin-top: 2px; color: var(--pcp-accent); font-size: 13px; font-weight: 600; } .pcp-catalog .pcp-rates-more:hover { color: var(--pcp-accent-dark); text-decoration: underline; } .pcp-catalog .pcp-service-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* Side by side when both labels fit, otherwise one under the other (never a label on two lines). */ .pcp-catalog .pcp-btn { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; border: 1.5px solid var(--pcp-accent); border-radius: 10px; font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.2; text-align: center; text-transform: uppercase; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pcp-catalog .pcp-btn--outline { background: #fff; color: var(--pcp-accent); } .pcp-catalog .pcp-btn--outline:hover { background: var(--pcp-accent-soft); color: var(--pcp-accent-dark); } .pcp-catalog .pcp-btn--solid { background: var(--pcp-accent); color: #fff; } .pcp-catalog .pcp-btn--solid:hover { border-color: var(--pcp-accent-dark); background: var(--pcp-accent-dark); color: #fff; } .pcp-catalog .pcp-btn .fas { font-size: 13px; } /* Empty state -------------------------------------------------------------------------------- */ .pcp-catalog .pcp-empty { margin: 8px 0 0; padding: 46px 20px; border: 1px dashed #dedede; border-radius: 12px; background: #fafafa; text-align: center; } .pcp-catalog .pcp-empty-text { margin: 0; color: #555; font-size: 16px; } .pcp-catalog .pcp-empty-text a { color: var(--pcp-accent); font-weight: 600; white-space: nowrap; } .pcp-catalog .pcp-clear { display: inline-block; margin: 16px 0 0; padding: 10px 22px; border: 1.5px solid var(--pcp-accent); border-radius: 10px; background: #fff; box-shadow: none; color: var(--pcp-accent); font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.2; text-transform: uppercase; cursor: pointer; } .pcp-catalog .pcp-clear:hover, .pcp-catalog .pcp-clear:focus { background: var(--pcp-accent); box-shadow: none; color: #fff; } /* Tablets and phones ------------------------------------------------------------------------- */ @media (max-width: 991px) { .pcp-catalog .pcp-tabs { scroll-margin-top: 20px; } .pcp-catalog .pcp-chips { gap: 6px; } .pcp-catalog .pcp-chip { gap: 6px; padding: 6px 6px 6px 12px; font-size: 13px; } .pcp-catalog .pcp-chip-count { min-width: 22px; height: 20px; padding: 0 6px; font-size: 11px; } } @media (max-width: 767px) { .pcp-catalog { margin-top: 16px; margin-bottom: 30px; } .pcp-catalog .pcp-tabs { gap: 4px; margin-bottom: 22px; padding: 4px; border-radius: 14px; } .pcp-catalog .pcp-tab { gap: 8px; min-height: 52px; padding: 8px 10px; font-size: 15px; } .pcp-catalog .pcp-tab-icon { display: none; } /* One row of chips that scrolls sideways. */ .pcp-catalog .pcp-chips { flex-wrap: nowrap; margin: 0 -15px 14px; padding: 2px 15px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding: 0 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pcp-catalog .pcp-chips::-webkit-scrollbar { display: none; } .pcp-catalog .pcp-chip { flex: 0 0 auto; padding-top: 8px; padding-bottom: 8px; } .pcp-catalog .pcp-toolbar-row { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding-top: 0; border-top: 0; } .pcp-catalog .pcp-search { flex: 0 0 auto; } .pcp-catalog .pcp-search-input { font-size: 16px; /* no zoom on focus in iOS Safari */ } .pcp-catalog .pcp-panel-title { font-size: 24px !important; } .pcp-catalog .pcp-empty { padding: 34px 16px; } } @media (max-width: 479px) { .pcp-catalog .pcp-grid--products { gap: 30px; } .pcp-catalog .pcp-service-body { padding: 16px 18px 18px; } } @media (prefers-reduced-motion: reduce) { .pcp-catalog .pcp-service, .pcp-catalog .pcp-service-media img { transition: none; } .pcp-catalog .pcp-service:hover, .pcp-catalog .pcp-service:hover .pcp-service-media img { transform: none; } }