/* Branded Parcels — Advert row (homepage) + Shop The Look page. Reuses the color/font tokens already defined in storefront.css :root. */ /* ---------- Homepage advert row ---------- */ .bp-adverts{background:#fff} .bp-adverts-row{display:flex;align-items:stretch;gap:16px;overflow-x:auto;padding:4px 0 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .bp-adverts-row::-webkit-scrollbar{height:6px} .bp-adverts-row::-webkit-scrollbar-thumb{background:#d7dbe3;border-radius:99px} .bp-advert-card{flex:0 0 auto;border-radius:20px;overflow:hidden;scroll-snap-align:start;box-shadow:0 8px 26px rgba(15,23,42,.14);position:relative;text-decoration:none;color:inherit;display:block;transition:transform .2s ease,box-shadow .2s ease} .bp-advert-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,23,42,.2)} .bp-advert-eyebrow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bp-gold)} /* "Sell on Branded Parcels" card — illustration is a pre-rendered image (assets/advert-sell.jpg); the features row + button below it are real, live elements, not part of the picture. */ .bp-advert-sell{width:min(88%,460px);background:#0a1730} .bp-advert-sell-img{display:block;width:100%;height:auto} .bp-advert-sell-band{background:#0a1730;padding:18px 18px 20px} .bp-advert-sell-features{display:flex;justify-content:space-between;gap:6px;margin-bottom:16px} .bp-advert-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;font-size:10.5px;color:#fff;font-weight:600;line-height:1.3;flex:1;min-width:0} .bp-advert-feature-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff} .bp-advert-feature-icon svg{width:17px;height:17px;display:block} .bp-advert-feature-dark{background:#26344a} .bp-advert-feature-red{background:var(--bp-red)} .bp-advert-sell-cta{width:100%;margin:0} /* Type overrides for the advert cards. storefront.css pins `span`/`div` (among others) to the body font at weight 400 with !important, because Kadence and WooCommerce set font-family on individual elements rather than just . That rule is right for the rest of the site, but the advert cards are display artwork: their serif headline, script tagline and BP monogram are all marked up as spans, so without matching !important here they'd silently render as regular-weight Open Sans. Importance beats specificity when only one side has it, so these have to be !important too — same reason prices and buttons are elsewhere in this plugin. */ .bp-look-headline span, .bp-look-title-accent, .bp-look-tagline-2, .bp-look-mono{ font-family:var(--bp-font-heading)!important; font-weight:700!important; } .bp-look-tagline-1{ font-family:var(--bp-font-script)!important; font-weight:700!important; } .bp-look-heading-text, .bp-look-shop-btn, .bp-advert-look-caption p b, .bp-advert-look-badge-circle span, .bp-advert-feature{ font-weight:700!important; } .bp-advert-feature{font-weight:600!important} /* "Shop The Look" auto card — the model photo, title and description come live from whichever Look was published most recently, and the item circles from that Look's real products. Everything else (ribbon, "Effortless Style Everyday", "THE COMPLETE LOOK", the "One Tap. / All Set." headline, the button label) is fixed copy. Sizes below are scaled straight off the approved reference artwork at a 640px card width. */ /* Widths are a percentage of the row (i.e. of whatever width the theme's content container actually hands us), never of the viewport. With `vw` the cards were sized against the full screen and ignored the edge padding Kadence puts around page content, so each card came out wider than the slot it sits in — and once the cards became square on mobile, every excess pixel of width became an excess pixel of height too. That made the theme look like it was stretching things vertically when the real cause was this measurement. `container-type:inline-size` then lets the type and circles below scale off the card itself (cqw) instead of the viewport, so the proportions hold no matter what padding the theme applies. Each cqw rule is preceded by its old vw equivalent as a fallback for browsers without container query support. */ .bp-advert-look{width:min(94%,640px);display:flex;background:var(--bp-navy-deep,#021530);container-type:inline-size} /* --- left half: model photo + overlays --- */ .bp-advert-look-photo{width:50%;flex:none;position:relative;overflow:hidden; background-size:cover;background-position:center top;background-color:#1b2230} /* Legibility scrim, so the fixed overlays read on any uploaded photo. */ .bp-advert-look-photo::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(2,10,24,.30) 0%,rgba(2,10,24,0) 22%,rgba(2,10,24,0) 42%,rgba(2,10,24,.62) 78%,rgba(2,10,24,.88) 100%)} .bp-advert-look-photo > *{position:relative;z-index:2} /* BP corner ribbon */ .bp-look-ribbon{position:absolute;top:0;left:19px;width:31px;z-index:3;display:block} .bp-look-ribbon-flag{height:80px;background:var(--bp-red); clip-path:polygon(0 0,100% 0,100% 100%,0 84%); display:flex;align-items:flex-start;justify-content:center;padding-top:15px} .bp-look-mono{font-family:var(--bp-font-heading);font-weight:700;font-size:21px;color:#fff;line-height:1;letter-spacing:-.30em;padding-right:.30em;display:block} .bp-look-ribbon-tail{display:block;height:15px;margin-top:-13px; transform:skewY(22deg);transform-origin:left top; background:linear-gradient(#123163 0 34%,#fff 34% 60%,#123163 60% 100%)} /* Effortless / STYLE / EVERYDAY */ .bp-look-tagline{position:absolute;top:44px;right:28px;text-align:right;z-index:3;display:block; text-shadow:0 2px 10px rgba(0,0,0,.55)} .bp-look-tagline span{display:block} .bp-look-tagline-1{font-family:var(--bp-font-script);font-weight:700;font-size:22px;color:var(--bp-red);line-height:1;margin-bottom:1px} .bp-look-tagline-2{font-family:var(--bp-font-heading);font-weight:700;font-size:20px;color:#fff;letter-spacing:.05em;line-height:1.1} .bp-look-tagline-3{font-family:var(--bp-font-body);font-weight:400;font-size:8.5px;color:#fff;letter-spacing:.30em;line-height:1.4;padding-left:.30em} /* Title + description + button (title & description are admin-editable) */ .bp-advert-look-caption{position:absolute;left:0;right:0;bottom:0;padding:0 18px 22px;text-align:center;z-index:3;color:#fff} .bp-advert-look-caption h3{margin:0;font-family:var(--bp-font-heading);font-weight:700;font-size:26px;line-height:1.05;color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6)} .bp-look-title-accent{display:block;color:var(--bp-red)} .bp-look-rule{display:block;width:48px;height:2.5px;background:var(--bp-red);margin:7px auto 9px;border-radius:2px} .bp-advert-look-caption p{margin:0 auto 17px;max-width:min(168px,100%);font-size:11.5px;line-height:1.45;color:#fff;font-weight:400; text-shadow:0 1px 8px rgba(0,0,0,.6)} .bp-advert-look-caption p b{color:var(--bp-red);font-weight:700} .bp-look-shop-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; border:1.5px solid rgba(255,255,255,.9);border-radius:5px;padding:0 14px;width:min(152px,100%);min-height:33px; font-size:10px;font-weight:700;letter-spacing:.13em;color:#fff;background:rgba(0,0,0,.12);transition:background .18s ease} .bp-advert-look:hover .bp-look-shop-btn{background:rgba(255,255,255,.16)} .bp-look-shop-btn svg{width:22px;height:9px;display:block;flex:none} /* --- right half: navy panel, entirely fixed copy --- */ .bp-advert-look-panel{flex:1;min-width:0;background:var(--bp-navy-deep,#021530); display:flex;flex-direction:column;padding:62px 0 26px} .bp-advert-look-heading{display:flex;align-items:center;gap:9px;padding:0 26px} .bp-look-heading-text{font-size:8.5px;font-weight:700;letter-spacing:.38em;color:#fff;white-space:nowrap;padding-left:.38em} .bp-look-plain-rule{flex:1;height:1px;background:rgba(255,255,255,.5)} .bp-look-heading-rule{display:block;width:44px;height:2px;background:var(--bp-red);margin:7px auto 0;border-radius:2px} .bp-look-headline{text-align:center;margin:15px 0 0;font-family:var(--bp-font-heading);font-weight:700;line-height:.86} /* Scales with the card so the two lines never wrap or clip: the panel is half the card, and "One Tap." measures ~4.2em, so the largest safe size is about 11% of the card width. */ .bp-look-headline span{display:block;font-size:min(10vw,55px)} .bp-look-headline span{font-size:min(10.5cqw,55px)} .bp-look-headline-1{color:#fff} .bp-look-headline-2{color:var(--bp-red)} .bp-advert-look-grid{display:flex;flex-wrap:wrap;gap:18px 8px;padding:0 20px;margin-top:36px} .bp-advert-look-item{display:flex;flex-direction:column;align-items:center;gap:7px;width:62px} .bp-advert-look-item-photo{width:53px;height:53px;border-radius:50%;background:#fff center/cover no-repeat;border:1.5px solid rgba(255,255,255,.75)} .bp-advert-look-item-name{font-size:10px;color:#fff;text-align:center;font-weight:400;line-height:1.25;width:100%} .bp-advert-look-badge-circle{width:53px;height:53px;border-radius:50%;background:var(--bp-red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px} .bp-advert-look-badge-circle svg{width:16px;height:16px} .bp-advert-look-badge-circle span{font-size:6.5px;color:#fff;font-weight:700;line-height:1.2;text-align:center;letter-spacing:.02em} /* Phones: on a narrow screen, letting each card's height be driven purely by its content made both cards tall enough to fill most of the visible viewport before a visitor ever saw "Editors Pick" below — one card was effectively the whole first screen. Below the breakpoint both cards are forced square (1:1), same width as before but capped to that height, so the row reads as a compact promo strip instead of a full-screen interstitial. `align-items:flex-start` replaces the desktop `stretch` here because stretch would fight the square aspect ratio (it resolves height from the row's tallest sibling before aspect-ratio gets a say); both cards land on the same height anyway since both are square at very-close widths, so the "same height, different width" rule from the desktop design still holds in practice. Everything below tightens spacing/type so the fixed copy (ribbon, tagline, heading, headline, button) still fits without clipping or overlap at that shorter height — nothing here is optional or admin-editable content, so nothing is cut. */ @media(max-width:600px){ .bp-adverts-row{align-items:flex-start} .bp-advert-sell,.bp-advert-look{aspect-ratio:1/1;height:auto} /* Sell card: the pre-rendered illustration keeps its own image ratio (1254x952) by default, which alone is taller than a square card once the features row + button are added below it. Cropping it to a fixed share of the square's height, then shrinking the band beneath it, keeps the button on-screen without cutting any of the four features. */ .bp-advert-sell{display:flex;flex-direction:column} .bp-advert-sell-img{flex:none;width:100%;height:56%;object-fit:cover;object-position:center top} .bp-advert-sell-band{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:10px 14px 12px} .bp-advert-sell-features{margin-bottom:8px;gap:2px} .bp-advert-feature{font-size:8.5px;gap:4px;line-height:1.2} .bp-advert-feature-icon{width:24px;height:24px} .bp-advert-feature-icon svg{width:12px;height:12px} .bp-btn-red,.bp-advert-sell-cta{min-height:34px;font-size:10.5px} /* Look card: the navy panel (right half) is now only ~half the card's width but the card's full height, so it's a narrow column rather than the wide poster layout desktop gets — padding, type and the item grid all shrink accordingly, and the grid drops item labels (the names are already on the Shop The Look page one tap away) so 6 circles fit in two compact rows instead of overflowing the column. */ /* Heading + its red rule stay glued together at the top, the grid sits at the bottom, and the headline takes the space left between them via auto margins. (space-between would instead spread all four children evenly, which floats the rule away from the heading it belongs to.) */ .bp-advert-look-panel{padding:12px 0 12px;justify-content:flex-start} .bp-advert-look-heading{padding:0 10px;gap:5px} .bp-look-heading-text{font-size:6px;letter-spacing:.2em;padding-left:.2em} .bp-look-heading-rule{width:24px;margin-top:5px} .bp-look-headline{margin:auto 0} .bp-look-headline span{font-size:min(9.5vw,44px)} .bp-look-headline span{font-size:min(10.5cqw,44px)} /* Circles scale with the card so they don't look lost in the taller panel at the top of this range; names are dropped because the column is only ~half the card wide — the full list is one tap away on the Shop The Look page. */ .bp-advert-look-grid{margin-top:0;gap:7px 6px;padding:0 10px;justify-content:center} .bp-advert-look-item{width:auto;gap:0} /* box-sizing is set explicitly so the photo's 1px ring doesn't push each circle 2px wider than the clamp says — at this size that rounding is the difference between six circles fitting on one row and one of them wrapping alone onto a second. */ .bp-advert-look-item-photo, .bp-advert-look-badge-circle{box-sizing:border-box;width:clamp(26px,8.5vw,34px);height:clamp(26px,8.5vw,34px)} .bp-advert-look-item-photo, .bp-advert-look-badge-circle{width:clamp(26px,9cqw,34px);height:clamp(26px,9cqw,34px)} .bp-advert-look-item-photo{border-width:1px} .bp-advert-look-item-name{display:none} .bp-advert-look-badge-circle{gap:1px} .bp-advert-look-badge-circle svg{width:clamp(9px,2.6vw,13px);height:clamp(9px,2.6vw,13px)} .bp-advert-look-badge-circle span{font-size:clamp(4px,1.1vw,5.5px)} /* Photo half: ribbon, tagline, title/description/button all scaled down to match, so nothing overlaps or runs past the shorter card edge. */ .bp-look-ribbon{left:10px;width:22px} .bp-look-ribbon-flag{height:48px;padding-top:9px} .bp-look-mono{font-size:14px} .bp-look-ribbon-tail{height:9px;margin-top:-8px} .bp-look-tagline{top:12px;right:12px} .bp-look-tagline-1{font-size:13px;margin-bottom:0} .bp-look-tagline-2{font-size:12px} .bp-look-tagline-3{font-size:5.5px;letter-spacing:.22em;padding-left:.22em} .bp-advert-look-caption{padding:0 10px 10px} .bp-advert-look-caption h3{font-size:15px} .bp-look-rule{width:28px;height:2px;margin:4px auto 5px} .bp-advert-look-caption p{font-size:9px;line-height:1.35;margin:0 auto 8px;max-width:120px} /* Never let the label break across two lines: on a small phone inside a theme with generous edge padding the photo half can get down to ~110px, so the label, arrow and padding all scale with the card instead of sitting at fixed sizes that would force a wrap. */ .bp-look-shop-btn{min-height:24px;min-width:0;width:auto;padding:0 8px;font-size:7.5px;letter-spacing:.1em;gap:5px;white-space:nowrap} .bp-look-shop-btn{font-size:clamp(6px,2.5cqw,8px)} .bp-look-shop-btn svg{width:15px;height:6px} .bp-look-shop-btn svg{width:clamp(10px,4.5cqw,16px)} } /* Generic admin-added card */ .bp-advert-cta{margin-top:auto;width:100%;min-height:40px;font-size:12.5px} .bp-advert-generic{width:min(86%,340px);background:#fff;display:flex;flex-direction:column} .bp-advert-generic-img{height:150px;background-size:cover;background-position:center;background-color:var(--bp-light)} .bp-advert-generic-body{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1} .bp-advert-generic-body h3{font-family:var(--bp-font-heading);font-size:19px;margin:4px 0 8px;color:var(--bp-ink)} .bp-advert-generic-body p{margin:0 0 10px;font-size:12.5px;color:var(--bp-muted);line-height:1.5;font-weight:400} /* ---------- Shop The Look page ---------- */ .bp-stl-page{padding:clamp(28px,6vw,48px) 0 clamp(44px,8vw,72px)} .bp-stl-head{text-align:center;max-width:560px;margin:0 auto clamp(24px,5vw,38px)} .bp-stl-head h1{font-family:var(--bp-font-heading);font-size:clamp(28px,5.5vw,38px);margin:0 0 10px;color:var(--bp-blue-dark)} .bp-stl-head p{margin:0;color:var(--bp-muted);font-size:14.5px;line-height:1.6} .bp-stl-notice{max-width:720px;margin:0 auto 20px;padding:12px 18px;border-radius:8px;font-size:13.5px} .bp-stl-notice-success{background:#eafaf0;color:#1a7f4e} .bp-stl-notice-warning{background:#fff7e6;color:#8a5d00} .bp-stl-notice a{color:inherit;font-weight:700} .looks-grid,.bp-stl-page{display:block} .bp-look-card{display:flex;border:1px solid var(--bp-line);border-radius:14px;overflow:hidden;margin-bottom:22px;background:#fff} .bp-look-photo{width:230px;flex:none;background-size:cover;background-position:center top;background-color:var(--bp-light)} .bp-look-photo img{width:100%;height:100%;object-fit:cover;display:block} .bp-look-body{flex:1;padding:22px 24px;min-width:0} .bp-look-body h2{font-family:var(--bp-font-heading);font-size:21px;margin:0 0 3px;color:var(--bp-ink)} .bp-look-meta{font-size:12.5px;color:var(--bp-muted);margin:0 0 16px;font-weight:400} .bp-look-items{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px} .bp-look-items li{display:flex;align-items:center;gap:10px;font-size:13.5px;padding-bottom:9px;border-bottom:1px dashed var(--bp-line)} .bp-look-items li:last-child{border-bottom:0;padding-bottom:0} .bp-look-item-swatch{width:30px;height:30px;border-radius:7px;background:var(--bp-light) center/cover no-repeat;border:1px solid var(--bp-line);flex:none} .bp-look-item-name{flex:1;color:var(--bp-ink);text-decoration:none;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bp-look-item-name:hover{text-decoration:underline} .bp-look-item-price{white-space:nowrap;font-weight:600} .bp-look-item-price s{color:var(--bp-muted);font-weight:400;margin-right:6px;font-size:12px} .bp-look-breakdown{background:var(--bp-light);border-radius:10px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .bp-look-sums{font-size:13px} .bp-look-was{color:var(--bp-muted);font-weight:400;margin-right:8px} .bp-look-now{font-size:19px;font-weight:700;color:var(--bp-red)} .bp-look-save{font-size:11px;font-weight:700;color:#fff;background:var(--bp-gold);padding:3px 9px;border-radius:999px;display:inline-block;margin-left:8px} .bp-look-add{min-height:44px;white-space:nowrap} @media(max-width:680px){ .bp-look-card{flex-direction:column} .bp-look-photo{width:100%;height:260px} .bp-look-breakdown{flex-direction:column;align-items:stretch;text-align:center} .bp-look-add{width:100%} }