/* =========================================================================== The inner pages. Everything that is not the home page -- the shop listing, search, a product, the cart, checkout, the account area, contact -- shares one set of templates built on the original Shofy markup. That markup is fine; what it never had was a designer's pass over spacing, type scale, form controls and states. This file is that pass, and it applies to every layout. Each theme's own stylesheet then changes proportion on top -- see the per-theme sections at the end of themes//style.css. Everything here is scoped under .sf, which only appears on once a merchant has chosen a layout. A shop still on the legacy templates is untouched by every rule in this file. ======================================================================== */ /* --- page rhythm ---------------------------------------------------------- */ .sf .tp-shop-area, .sf .tp-contact-area, .sf .profile__area, .sf .tp-login-area, .sf .tp-cart-area, .sf .tp-checkout-area { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); } /* A breadcrumb bar that is a whisper rather than a headline. */ .sf .breadcrumb__area { background: var(--sf-surface); padding: 22px 0; } .sf .breadcrumb__title { font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 4px; color: var(--sf-heading); } .sf .breadcrumb__list span, .sf .breadcrumb__list a { font-size: 13px; color: var(--sf-text-2); } /* --- headings ------------------------------------------------------------- */ .sf .tp-section-title, .sf .tp-shop-widget-title, .sf .tp-contact-title, .sf .profile__ticket-title { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--sf-heading); margin: 0 0 14px; } /* --- the shop / search sidebar -------------------------------------------- */ .sf .tp-shop-sidebar { position: sticky; top: 18px; } .sf .tp-shop-widget { border: 1px solid var(--sf-line); border-radius: var(--sf-radius, 10px); padding: 16px 18px; margin-bottom: 14px; background: var(--sf-bg); } .sf .tp-shop-widget-title { padding-bottom: 10px; border-bottom: 1px solid var(--sf-line); } .sf .filter-items { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; } .sf .filter-item { padding: 5px 0; } .sf .filter-item label { font-size: 13.5px; color: var(--sf-text-2); cursor: pointer; margin: 0 0 0 7px; } .sf .filter-item input[type=checkbox] { accent-color: var(--sf-primary); width: 15px; height: 15px; } .sf .filter-item label:hover { color: var(--sf-primary); } /* --- the toolbar above the results ---------------------------------------- */ .sf .tp-shop-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 0 0 16px; margin-bottom: 20px; border-bottom: 1px solid var(--sf-line); } .sf .tp-shop-top-result p { margin: 0; font-size: 13.5px; color: var(--sf-text-2); } .sf .tp-shop-top-select select { padding: 8px 12px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm, 7px); font: inherit; font-size: 13.5px; background: var(--sf-bg); color: inherit; cursor: pointer; } .sf .tp-shop-top-select select:focus { outline: 2px solid var(--sf-primary); outline-offset: 1px; } /* --- pagination ----------------------------------------------------------- */ .sf .tp-shop-pagination { margin-top: 34px; } .sf .tp-shop-pagination a, .sf .tp-shop-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; margin: 0 3px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm, 7px); font-size: 13.5px; text-decoration: none; color: inherit; } .sf .tp-shop-pagination a:hover { border-color: var(--sf-primary); color: var(--sf-primary); } .sf .tp-shop-pagination .current, .sf .tp-shop-pagination .active { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; } /* --- the product page ----------------------------------------------------- */ .sf .tp-product-details-wrapper { padding-left: clamp(0px, 2vw, 28px); } .sf .tp-product-details-title, .sf h1.tp-product-details-title { font-size: clamp(22px, 2.6vw, 31px); line-height: 1.25; margin: 6px 0 12px; } .sf .tp-product-details-price-wrapper { margin: 14px 0 18px; } .sf .tp-product-price-2.new-price, .sf .tp-product-price-3.new-price { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; color: var(--sf-heading); } .sf .tp-product-price-2.old-price, .sf .tp-product-price-3.old-price { font-size: 15px; color: var(--sf-text-2); text-decoration: line-through; margin-right: 8px; } .sf .tp-product-details-stock span { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .sf .tp-product-details-variation-title { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; display: block; } .sf .tp-product-details-variation select, .sf .tp-product-details-variation-item select { padding: 9px 12px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm, 7px); font: inherit; font-size: 14px; background: var(--sf-bg); } .sf .tp-product-details-buy-now-btn, .sf .tp-product-details-add-to-cart-btn { background: var(--sf-primary); color: #fff; border: 0; border-radius: var(--sf-radius, 8px); padding: 14px 26px; font-size: 15px; font-weight: 600; cursor: pointer; transition: filter .15s ease; } .sf .tp-product-details-buy-now-btn:hover { filter: brightness(.92); } .sf .tp-product-quantity { border: 1px solid var(--sf-line); border-radius: var(--sf-radius, 8px); } .sf .tp-cart-input, .sf input.tp-cart-input { border: 0; text-align: center; font-size: 15px; } /* --- cart and checkout ---------------------------------------------------- */ .sf .tp-cart-list table { border-collapse: collapse; width: 100%; } .sf .tp-cart-header-product, .sf .tp-cart-list th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sf-text-2); font-weight: 600; padding-bottom: 12px; text-align: left; } .sf .tp-cart-list td { padding: 16px 8px; border-top: 1px solid var(--sf-line); vertical-align: middle; } .sf .tp-cart-title a { font-weight: 500; color: inherit; text-decoration: none; } .sf .tp-cart-title a:hover { color: var(--sf-primary); } .sf .tp-cart-checkout-wrapper { border: 1px solid var(--sf-line); border-radius: var(--sf-radius, 10px); padding: 22px; background: var(--sf-bg); position: sticky; top: 18px; } .sf .tp-cart-checkout-top { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; } .sf .tp-cart-checkout-top-title { color: var(--sf-text-2); } .sf .tp-cart-checkout-top-price { font-weight: 600; } .sf .tp-cart-checkout-total { border-top: 1px solid var(--sf-line); margin-top: 12px; padding-top: 14px; font-size: 18px; font-weight: 700; } .sf .tp-cart-checkout-proceed .tp-cart-checkout-btn, .sf .tp-checkout-btn { display: block; width: 100%; text-align: center; background: var(--sf-primary); color: #fff; border: 0; border-radius: var(--sf-radius, 8px); padding: 14px 20px; font-size: 15px; font-weight: 600; margin-top: 16px; cursor: pointer; } /* --- forms: contact, login, register, address, profile -------------------- */ .sf .tp-contact-input input, .sf .tp-contact-input textarea, .sf .tp-login-input input, .sf .tp-login-input textarea, .sf .profile__input input, .sf .profile__input textarea, .sf .profile__input select, .sf .tp-checkout-input input, .sf .tp-checkout-input textarea, .sf .tp-checkout-input select { width: 100%; padding: 12px 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm, 8px); font: inherit; font-size: 14.5px; background: var(--sf-bg); color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .sf .tp-contact-input input:focus, .sf .tp-contact-input textarea:focus, .sf .tp-login-input input:focus, .sf .profile__input input:focus, .sf .profile__input select:focus, .sf .tp-checkout-input input:focus, .sf .tp-checkout-input select:focus { border-color: var(--sf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 18%, transparent); outline: none; } .sf .tp-contact-input-title label, .sf .tp-login-input-title label, .sf .profile__input label { font-size: 12.5px; font-weight: 600; color: var(--sf-text-2); margin-bottom: 6px; display: block; } .sf .tp-contact-input-box, .sf .profile__input-box { margin-bottom: 16px; } /* --- buttons everywhere --------------------------------------------------- */ .sf .tp-btn, .sf a.tp-btn, .sf button.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sf-primary); color: #fff; border: 0; border-radius: var(--sf-radius, 8px); padding: 12px 24px; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .05s ease; } .sf .tp-btn:hover { filter: brightness(.92); color: #fff; } .sf .tp-btn:active { transform: translateY(1px); } /* --- the customer's account area ------------------------------------------ */ .sf .profile__inner { background: var(--sf-bg); } .sf .profile__tab .nav-link { border: 0; border-radius: var(--sf-radius-sm, 8px); padding: 11px 14px; margin-bottom: 4px; font-size: 14px; color: var(--sf-text-2); text-align: left; width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; } .sf .profile__tab .nav-link:hover { background: var(--sf-surface); color: var(--sf-heading); } .sf .profile__tab .nav-link.active { background: var(--sf-primary); color: #fff; } .sf .profile__main-title { font-size: 20px; margin-bottom: 4px; } .sf .profile__ticket table { width: 100%; border-collapse: collapse; font-size: 14px; } .sf .profile__ticket th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sf-text-2); font-weight: 600; padding: 0 10px 10px 0; text-align: left; } .sf .profile__ticket td { padding: 13px 10px 13px 0; border-top: 1px solid var(--sf-line); } /* --- contact page --------------------------------------------------------- */ .sf .tp-contact-info-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius, 10px); background: var(--sf-bg); margin-bottom: 12px; } .sf .tp-contact-info-icon span { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-surface); color: var(--sf-primary); } .sf .tp-contact-info-content p { margin: 0; font-size: 14px; line-height: 1.6; } .sf .tp-contact-info-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; } /* --- empty states, which every shop hits on day one ----------------------- */ .sf .tp-shop-items-wrapper:empty::after, .sf .cart-empty { display: block; text-align: center; padding: 60px 20px; color: var(--sf-text-2); } /* --- the one thing nobody styles: keyboard focus -------------------------- */ .sf a:focus-visible, .sf button:focus-visible, .sf input:focus-visible, .sf select:focus-visible, .sf textarea:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; } /* --- the customer's account area ------------------------------------------- pages.css already covered the inputs, tabs, tables and headings here. What it did not cover were the three card shapes the account pages are actually built from -- the info tiles on the dashboard, the saved-address cards, and the avatar block -- so those were falling back to whatever the base theme gave them, which is why this area looked unfinished next to the rest of the shop. All scoped under .sf, so a tenant still on the original templates is untouched. Colours come from the theme engine, so these follow whatever the merchant picked. */ .sf .profile__main-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--sf-line); } .sf .profile__main-thumb { width: 74px; height: 74px; flex: none; border-radius: 50%; overflow: hidden; background: var(--sf-surface); position: relative; } .sf .profile__main-thumb img { width: 100%; height: 100%; object-fit: cover; } .sf .profile__main-thumb-edit { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--sf-primary); color: #fff; font-size: 11px; border: 2px solid var(--sf-bg); cursor: pointer; } /* The info tiles and the address cards are the same shape with different contents, so they share everything except their grid. */ .sf .profile__main-info, .sf .profile__address { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .sf .profile__main-info-item, .sf .profile__address-item { display: flex; align-items: flex-start; gap: 13px; padding: 16px 17px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius, 10px); transition: border-color .15s ease, box-shadow .15s ease; } .sf .profile__main-info-item:hover, .sf .profile__address-item:hover { border-color: var(--sf-primary); box-shadow: 0 6px 18px -8px rgba(16, 24, 40, .16); } .sf .profile__main-info-icon, .sf .profile__address-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--sf-primary) 11%, transparent); color: var(--sf-primary); font-size: 15px; } .sf .profile__main-info-title, .sf .profile__address-title { display: block; font-size: 12px; font-weight: 600; color: var(--sf-muted); margin-bottom: 3px; } .sf .profile__main-info-item p, .sf .profile__address-content p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sf-heading); word-break: break-word; } .sf .profile__btn .tp-btn, .sf .profile__btn button { margin-right: 8px; margin-bottom: 8px; } .sf .profile__password { max-width: 460px; } /* Decorative only, and it overlaps content on a narrow screen. */ @media (max-width: 768px) { .sf .profile__shape { display: none; } .sf .profile__main-info, .sf .profile__address { grid-template-columns: 1fr; } .sf .profile__main-top { gap: 13px; } .sf .profile__main-thumb { width: 58px; height: 58px; } } /* --- clearance above the newsletter band ----------------------------------- The trust strip (Fast delivery / Easy returns / Secure payments / Chat support) is the last thing inside

, and the newsletter section opens immediately after it in footer.php with no gap between them. Worse, the newsletter's decorative artwork is absolutely positioned and overflows upward, so the illustration sat on top of the "Chat support" text. Two fixes, because there are two causes: give the strip room below it, and stop the decoration escaping its own section. */ .sf .sf-trust { padding-bottom: 8px; } .sf .sf-section:last-of-type { padding-bottom: 46px; } /* The artwork is decoration; it must never cover a line of text. */ .sf .tp-subscribe-area { overflow: hidden; position: relative; } .sf .tp-subscribe-shape img, .sf .tp-subscribe-thumb img { pointer-events: none; } @media (max-width: 991px) { /* On a narrow screen the illustration has nowhere to go and only ever collides with the form beside it. */ .sf .tp-subscribe-shape, .sf .tp-subscribe-thumb { display: none; } }