/* =========================================================================== The shared chrome, themed. This file exists because of a fair complaint: the twenty layouts changed the home page composition and the product cards, and left the header, the menu bar, the trust strip, the newsletter band and the footer byte-identical. On any page that is not the home page, that chrome is most of what a visitor sees -- so the site did not actually look themed, whatever the home page did. The hooks already existed: .sf- is on , so every one of these elements is reachable. Nobody had written rules against them. --------------------------------------------------------------------------- Five personalities, not twenty --------------------------------------------------------------------------- Twenty bespoke sets would be twenty times the surface to get wrong for very little extra variety -- a shopper cannot tell two subtly different header treatments apart, and nobody maintaining this could either. So the layouts are grouped by the character they already have, and each group gets a chrome that matches it: SHARP square, dense, utilitarian bazaar forge cargo motor nova SOFT rounded, warm, generous feast bloom pantry verdant swift QUIET editorial, airy, restrained luxe atelier curio studio scholar LOUD high contrast, energetic pulse sprint kiosk PLAIN legible, unhurried, calm vitals aurora A layout appears in exactly one group. Adding a layout means adding its slug to one selector list, not writing a new block. Everything is scoped under .sf-, so a tenant still on the original templates is untouched, and every colour comes from the theme engine so a merchant's own palette still drives it. ======================================================================== */ /* =========================================================================== SHARP -- square corners, hairline rules, tight spacing. For the layouts built to show a lot of stock. ======================================================================== */ .sf-bazaar .tp-header-main, .sf-forge .tp-header-main, .sf-cargo .tp-header-main, .sf-motor .tp-header-main, .sf-nova .tp-header-main { border-bottom: 1px solid rgba(0, 0, 0, .12); padding-top: 10px; padding-bottom: 10px; } .sf-bazaar .main-menu > nav > ul > li > a, .sf-forge .main-menu > nav > ul > li > a, .sf-cargo .main-menu > nav > ul > li > a, .sf-motor .main-menu > nav > ul > li > a, .sf-nova .main-menu > nav > ul > li > a { text-transform: uppercase; letter-spacing: .045em; font-size: 12.5px; font-weight: 700; } .sf-bazaar .tp-header-action-btn, .sf-forge .tp-header-action-btn, .sf-cargo .tp-header-action-btn, .sf-motor .tp-header-action-btn, .sf-nova .tp-header-action-btn { border-radius: 3px; } .sf-bazaar .sf-trust, .sf-forge .sf-trust, .sf-cargo .sf-trust, .sf-motor .sf-trust, .sf-nova .sf-trust { border: 1px solid rgba(0, 0, 0, .1); padding: 16px; } .sf-bazaar .sf-trust-ico, .sf-forge .sf-trust-ico, .sf-cargo .sf-trust-ico, .sf-motor .sf-trust-ico, .sf-nova .sf-trust-ico { border-radius: 3px; } .sf-bazaar .tp-subscribe-area, .sf-forge .tp-subscribe-area, .sf-cargo .tp-subscribe-area, .sf-motor .tp-subscribe-area, .sf-nova .tp-subscribe-area { padding-top: 42px; padding-bottom: 42px; } .sf-bazaar .tp-subscribe-input input, .sf-forge .tp-subscribe-input input, .sf-cargo .tp-subscribe-input input, .sf-motor .tp-subscribe-input input, .sf-nova .tp-subscribe-input input, .sf-bazaar .tp-subscribe-input button, .sf-forge .tp-subscribe-input button, .sf-cargo .tp-subscribe-input button, .sf-motor .tp-subscribe-input button, .sf-nova .tp-subscribe-input button { border-radius: 3px !important; } .sf-bazaar .tp-subscribe-title, .sf-forge .tp-subscribe-title, .sf-cargo .tp-subscribe-title, .sf-motor .tp-subscribe-title, .sf-nova .tp-subscribe-title { font-size: 28px; letter-spacing: -.01em; } /* =========================================================================== SOFT -- pill shapes, warm surfaces, room to breathe. ======================================================================== */ .sf-feast .tp-header-main, .sf-bloom .tp-header-main, .sf-pantry .tp-header-main, .sf-verdant .tp-header-main, .sf-swift .tp-header-main { padding-top: 16px; padding-bottom: 16px; } .sf-feast .main-menu > nav > ul > li > a, .sf-bloom .main-menu > nav > ul > li > a, .sf-pantry .main-menu > nav > ul > li > a, .sf-verdant .main-menu > nav > ul > li > a, .sf-swift .main-menu > nav > ul > li > a { font-weight: 600; letter-spacing: -.005em; border-radius: 99px; padding-left: 14px; padding-right: 14px; transition: background .15s ease; } .sf-feast .main-menu > nav > ul > li > a:hover, .sf-bloom .main-menu > nav > ul > li > a:hover, .sf-pantry .main-menu > nav > ul > li > a:hover, .sf-verdant .main-menu > nav > ul > li > a:hover, .sf-swift .main-menu > nav > ul > li > a:hover { background: color-mix(in srgb, var(--tp-theme-primary) 10%, transparent); } .sf-feast .tp-header-action-btn, .sf-bloom .tp-header-action-btn, .sf-pantry .tp-header-action-btn, .sf-verdant .tp-header-action-btn, .sf-swift .tp-header-action-btn { border-radius: 50%; } .sf-feast .sf-trust, .sf-bloom .sf-trust, .sf-pantry .sf-trust, .sf-verdant .sf-trust, .sf-swift .sf-trust { background: color-mix(in srgb, var(--tp-theme-primary) 5%, transparent); border-radius: 18px; padding: 22px 20px; } .sf-feast .tp-subscribe-area, .sf-bloom .tp-subscribe-area, .sf-pantry .tp-subscribe-area, .sf-verdant .tp-subscribe-area, .sf-swift .tp-subscribe-area { border-radius: 24px 24px 0 0; } .sf-feast .tp-subscribe-input input, .sf-bloom .tp-subscribe-input input, .sf-pantry .tp-subscribe-input input, .sf-verdant .tp-subscribe-input input, .sf-swift .tp-subscribe-input input { border-radius: 99px 0 0 99px !important; } .sf-feast .tp-subscribe-input button, .sf-bloom .tp-subscribe-input button, .sf-pantry .tp-subscribe-input button, .sf-verdant .tp-subscribe-input button, .sf-swift .tp-subscribe-input button { border-radius: 0 99px 99px 0 !important; } /* =========================================================================== QUIET -- thin rules, wide letter-spacing, nothing filled in. ======================================================================== */ .sf-luxe .tp-header-main, .sf-atelier .tp-header-main, .sf-curio .tp-header-main, .sf-studio .tp-header-main, .sf-scholar .tp-header-main { padding-top: 22px; padding-bottom: 22px; } .sf-luxe .main-menu > nav > ul > li > a, .sf-atelier .main-menu > nav > ul > li > a, .sf-curio .main-menu > nav > ul > li > a, .sf-studio .main-menu > nav > ul > li > a, .sf-scholar .main-menu > nav > ul > li > a { font-weight: 400; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; } .sf-luxe .tp-header-action-btn, .sf-atelier .tp-header-action-btn, .sf-curio .tp-header-action-btn, .sf-studio .tp-header-action-btn, .sf-scholar .tp-header-action-btn { border-radius: 0; } /* No filled circles behind the icons -- an outline is quieter, and quiet is the entire point of this group. */ .sf-luxe .sf-trust, .sf-atelier .sf-trust, .sf-curio .sf-trust, .sf-studio .sf-trust, .sf-scholar .sf-trust { border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 26px 0; } .sf-luxe .sf-trust-ico, .sf-atelier .sf-trust-ico, .sf-curio .sf-trust-ico, .sf-studio .sf-trust-ico, .sf-scholar .sf-trust-ico { background: transparent; border: 1px solid rgba(0, 0, 0, .16); border-radius: 0; } .sf-luxe .sf-trust-item h4, .sf-atelier .sf-trust-item h4, .sf-curio .sf-trust-item h4, .sf-studio .sf-trust-item h4, .sf-scholar .sf-trust-item h4 { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; } .sf-luxe .tp-subscribe-area, .sf-atelier .tp-subscribe-area, .sf-curio .tp-subscribe-area, .sf-studio .tp-subscribe-area, .sf-scholar .tp-subscribe-area { padding-top: 62px; padding-bottom: 62px; } .sf-luxe .tp-subscribe-title, .sf-atelier .tp-subscribe-title, .sf-curio .tp-subscribe-title, .sf-studio .tp-subscribe-title, .sf-scholar .tp-subscribe-title { font-weight: 400; letter-spacing: -.01em; } .sf-luxe .tp-subscribe-input input, .sf-atelier .tp-subscribe-input input, .sf-curio .tp-subscribe-input input, .sf-studio .tp-subscribe-input input, .sf-scholar .tp-subscribe-input input { border-radius: 0 !important; background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, .6) !important; } .sf-luxe .tp-subscribe-input button, .sf-atelier .tp-subscribe-input button, .sf-curio .tp-subscribe-input button, .sf-studio .tp-subscribe-input button, .sf-scholar .tp-subscribe-input button { border-radius: 0 !important; } /* The illustration is merchandising, and merchandising is what this group is deliberately not doing. */ .sf-luxe .tp-subscribe-plane, .sf-atelier .tp-subscribe-plane, .sf-curio .tp-subscribe-plane, .sf-studio .tp-subscribe-plane, .sf-scholar .tp-subscribe-plane, .sf-luxe .tp-subscribe-shape, .sf-atelier .tp-subscribe-shape, .sf-curio .tp-subscribe-shape, .sf-studio .tp-subscribe-shape, .sf-scholar .tp-subscribe-shape { display: none; } /* =========================================================================== LOUD -- heavy weights, hard edges, high contrast. ======================================================================== */ .sf-pulse .tp-header-main, .sf-sprint .tp-header-main, .sf-kiosk .tp-header-main { padding-top: 12px; padding-bottom: 12px; } .sf-pulse .main-menu > nav > ul > li > a, .sf-sprint .main-menu > nav > ul > li > a, .sf-kiosk .main-menu > nav > ul > li > a { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 13px; } .sf-pulse .main-menu > nav > ul > li > a:hover, .sf-sprint .main-menu > nav > ul > li > a:hover, .sf-kiosk .main-menu > nav > ul > li > a:hover { color: var(--tp-theme-primary); } .sf-pulse .tp-header-action-btn, .sf-sprint .tp-header-action-btn, .sf-kiosk .tp-header-action-btn { border-radius: 6px; } .sf-pulse .sf-trust, .sf-sprint .sf-trust, .sf-kiosk .sf-trust { background: var(--tp-theme-primary); border-radius: 10px; padding: 22px 20px; } .sf-pulse .sf-trust-ico, .sf-sprint .sf-trust-ico, .sf-kiosk .sf-trust-ico { background: rgba(255, 255, 255, .22); color: #fff; } .sf-pulse .sf-trust-item h4, .sf-sprint .sf-trust-item h4, .sf-kiosk .sf-trust-item h4 { color: #fff; font-weight: 800; } .sf-pulse .sf-trust-item p, .sf-sprint .sf-trust-item p, .sf-kiosk .sf-trust-item p { color: rgba(255, 255, 255, .85); } .sf-pulse .tp-subscribe-title, .sf-sprint .tp-subscribe-title, .sf-kiosk .tp-subscribe-title { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; } .sf-pulse .tp-subscribe-input button, .sf-sprint .tp-subscribe-input button, .sf-kiosk .tp-subscribe-input button { border-radius: 6px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } /* =========================================================================== PLAIN -- larger type, generous hit areas, nothing shouting. For the shops whose readers are not in a hurry. ======================================================================== */ .sf-vitals .tp-header-main, .sf-aurora .tp-header-main { padding-top: 15px; padding-bottom: 15px; } .sf-vitals .main-menu > nav > ul > li > a, .sf-aurora .main-menu > nav > ul > li > a { font-size: 14.5px; font-weight: 500; } .sf-vitals .tp-header-action-btn, .sf-aurora .tp-header-action-btn { border-radius: 10px; } .sf-vitals .sf-trust, .sf-aurora .sf-trust { background: rgba(0, 0, 0, .022); border-radius: 12px; padding: 20px; } .sf-vitals .sf-trust-item h4, .sf-aurora .sf-trust-item h4 { font-size: 15px; } .sf-vitals .sf-trust-item p, .sf-aurora .sf-trust-item p { font-size: 13px; } .sf-vitals .tp-subscribe-input input, .sf-aurora .tp-subscribe-input input { border-radius: 10px 0 0 10px !important; font-size: 15px; } .sf-vitals .tp-subscribe-input button, .sf-aurora .tp-subscribe-input button { border-radius: 0 10px 10px 0 !important; } /* =========================================================================== The contact page. Same problem, same fix: it was identical everywhere. The map, the form and the three info cards take their shape from the group so the page belongs to the shop it is on. ======================================================================== */ .sf-bazaar .tp-contact-info-item, .sf-forge .tp-contact-info-item, .sf-cargo .tp-contact-info-item, .sf-motor .tp-contact-info-item, .sf-nova .tp-contact-info-item { border-radius: 3px; } .sf-feast .tp-contact-info-item, .sf-bloom .tp-contact-info-item, .sf-pantry .tp-contact-info-item, .sf-verdant .tp-contact-info-item, .sf-swift .tp-contact-info-item { border-radius: 18px; } .sf-luxe .tp-contact-info-item, .sf-atelier .tp-contact-info-item, .sf-curio .tp-contact-info-item, .sf-studio .tp-contact-info-item, .sf-scholar .tp-contact-info-item { border-radius: 0; border-left: 2px solid var(--tp-theme-primary); background: transparent; } .sf-pulse .tp-contact-info-item, .sf-sprint .tp-contact-info-item, .sf-kiosk .tp-contact-info-item { border-radius: 8px; border-top: 3px solid var(--tp-theme-primary); } .sf-vitals .tp-contact-info-item, .sf-aurora .tp-contact-info-item { border-radius: 12px; } /* --- narrower screens ------------------------------------------------------- The uppercase, letter-spaced menus in SHARP, QUIET and LOUD wrap badly on a phone, where the menu is a drawer rather than a bar. */ @media (max-width: 991px) { .sf .main-menu > nav > ul > li > a { text-transform: none; letter-spacing: normal; font-size: 14px; } .sf .sf-trust { padding-left: 14px; padding-right: 14px; } }