/* ===================================================================== LOST site design layer Carries the hero treatment through every section of the homepage. Brand Guidelines: PAPER #F2F0EC ASH #8E8E8E RED #C71C00 SMOKE #353535 INK #000000 Page 9, verbatim: "THE SITE IS A WALL. Black ground, edge to edge. The interface disappears so the artwork does the talking. Red appears once per screen, on the thing we want pressed. Nowhere else." Display face Higher Jump (licence pending, see note in index.html) Body face IBM Plex Sans self hosted, assets/fonts Meta face IBM Plex Mono prices, specs, labels, index numbers Loaded last so it wins the Woodmart cascade. Everything is scoped to body.lost-brand or .ls-* so the theme's own screens stay untouched. ===================================================================== */ /* Higher Jump, the LOST display face, subset to Latin plus punctuation and compressed to woff2 (1.77 MB down to 272 KB). LICENCE NOTE FOR THE DEVELOPER: the copy this was built from ships with a PERSONAL USE licence (see READ ME.txt beside the font). LOST is a commercial store, and serving this file to visitors distributes the font. Buy the commercial licence from Letterara Studio (thomasaradea@gmail.com) before this goes live, or switch the stack to Impact. */ @font-face{font-family:"Higher Jump";src:url("../fonts/higher-jump-LICENCE-PENDING.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block} @font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-var.woff2") format("woff2-variations"),url("../fonts/plex-sans-var.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} body.lost-brand{ --p:#F2F0EC; --ash:#8E8E8E; --red:#C71C00; --smoke:#353535; --ink:#000000; --line:rgba(242,240,236,.13); --line-hi:rgba(242,240,236,.34); --disp:"Higher Jump","Archivo Black",Impact,"Haettenschweiler",sans-serif; --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; --gut:clamp(1.15rem,4.2vw,4.5rem); --ease:cubic-bezier(.16,1,.3,1); background:var(--ink); color:var(--p); font-family:var(--sans); -webkit-font-smoothing:antialiased; } body.lost-brand ::selection{background:var(--red);color:var(--p)} body.lost-brand p{font-family:var(--sans)} /* --------------------------------------------------------------------- 1. THE SECTION FRAME One rhythm for every band: full bleed black, a hairline where the previous section ended, generous vertical air, one shared gutter. Woodmart makes these containers flex columns; we take them back. --------------------------------------------------------------------- */ body.lost-brand .ls-sec{ display:block !important; position:relative; width:100%; max-width:none !important; padding:clamp(3.4rem,7vw,6.5rem) var(--gut) clamp(3.4rem,7vw,6rem) !important; background:var(--ink); border-top:1px solid var(--line); overflow:hidden; } body.lost-brand .ls-sec.ls-flush{padding-inline:0 !important} body.lost-brand .ls-sec.ls-noline{border-top:0} body.lost-brand .ls-sec > *{max-width:none} body.lost-brand .ls-head .title-wrapper{ margin:0 !important;text-align:inherit !important; } body.lost-brand .ls-head .title-subtitle{display:none !important} body.lost-brand .ls-head .liner-continer{display:block;margin:0} body.lost-brand .ls-head .liner-continer::before, body.lost-brand .ls-head .liner-continer::after{display:none !important} /* the shared header block: index + label on one line, name under it, the section's single action pinned to the right on wide screens */ .ls-head{ display:flex;flex-wrap:wrap;align-items:flex-end; justify-content:space-between; gap:clamp(1rem,3vw,3rem); margin:0 0 clamp(2rem,4vw,3.2rem); padding-inline:var(--ls-head-pad,0); } .ls-head-l{flex:1 1 22rem;min-width:0} .ls-eyebrow{ display:flex;align-items:center;gap:.7em; font-family:var(--mono);font-size:.66rem;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:var(--ash); margin:0 0 clamp(.8rem,1.6vw,1.3rem); } .ls-eyebrow b{color:var(--p);font-weight:500} .ls-eyebrow i{ display:block;flex:0 1 clamp(1.6rem,5vw,4.5rem);height:1px; background:var(--line-hi);font-style:normal; } /* section name: the brand display face, uppercase, one gasp of scale. Higher Jump carries 2.24em of ink per em of font size, so the line box has to be generous or the strokes hit the line above. 2.02 is measured, not guessed. Negative top margin pulls back the optical gap it opens. */ body.lost-brand .ls-head .ls-title, body.lost-brand .woodmart-title-container.title, body.lost-brand .elementor-heading-title{ margin:-.34em 0 0 !important; font-family:var(--disp) !important; font-weight:400 !important; font-size:clamp(1.45rem,3.5vw,2.9rem) !important; line-height:2.02 !important; letter-spacing:.004em; text-transform:uppercase; color:var(--p) !important; text-wrap:balance; } .ls-sub, body.lost-brand .ls-head .title-after_title{ margin:.15rem 0 0 !important; max-width:44ch; font-size:clamp(.9rem,1.05vw,1rem);line-height:1.55; color:var(--ash); } .ls-sub p{margin:0} /* the one action per section. This is where the red is allowed. */ .ls-more{ align-self:flex-end;flex:0 0 auto; display:inline-flex;align-items:center;gap:.6em; font-family:var(--mono);font-size:.68rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase; color:var(--red) !important;text-decoration:none !important; padding-bottom:.45em;border-bottom:1px solid rgba(199,28,0,.4); white-space:nowrap;transition:border-color .3s var(--ease),gap .3s var(--ease); } .ls-more:hover{border-bottom-color:var(--red);gap:1.1em} .ls-more span{transition:transform .3s var(--ease)} .ls-more:hover span{transform:translateX(3px)} /* --------------------------------------------------------------------- 2. PRODUCT CARDS The artwork does the talking, so the card is a hairline and nothing else. Every theme affordance that fights the poster comes off. --------------------------------------------------------------------- */ body.lost-brand .wd-product .wd-buttons, body.lost-brand .wd-product .wd-product-cats, body.lost-brand .wd-product .product-labels{display:none !important} body.lost-brand .wd-product{ background:transparent !important;padding:0 !important;border:0 !important;text-align:left; } body.lost-brand .wd-product .wd-product-wrapper{background:transparent !important;padding:0 !important} body.lost-brand .wd-product .wd-product-thumb{ position:relative;overflow:hidden;margin:0 0 .95rem; border:1px solid var(--line);background:#050505; transition:border-color .45s var(--ease); } body.lost-brand .wd-product:hover .wd-product-thumb{border-color:var(--line-hi)} body.lost-brand .wd-product .wd-product-thumb img{ display:block;width:100%;height:auto; transition:transform .8s var(--ease),opacity .45s var(--ease); } body.lost-brand .wd-product:hover .wd-product-img-link img{transform:scale(1.045)} /* the agreed per card CTA, revealed on the print itself */ body.lost-brand .wd-product .wd-add-btn{ position:absolute !important;inset:auto 0 0 0;z-index:3; opacity:0;transform:translateY(101%); transition:transform .42s var(--ease),opacity .3s var(--ease); } body.lost-brand .wd-product:hover .wd-add-btn, body.lost-brand .wd-product:focus-within .wd-add-btn{opacity:1;transform:translateY(0)} body.lost-brand .wd-product .wd-add-btn > a{ display:block;width:100%;padding:.95em 1em; background:var(--p) !important;color:var(--ink) !important;border:0 !important;border-radius:0 !important; font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; text-align:center;text-decoration:none; } body.lost-brand .wd-product .wd-add-btn > a:hover{background:var(--red) !important;color:var(--p) !important} body.lost-brand .wd-product .wd-add-btn .wd-action-icon{display:none} body.lost-brand .wd-product .wd-entities-title{margin:0 0 .3rem !important} body.lost-brand .wd-product .wd-entities-title a{ font-family:var(--sans) !important;font-weight:600 !important; font-size:.8rem !important;letter-spacing:.09em;text-transform:uppercase; color:var(--p) !important;text-decoration:none; } body.lost-brand .wd-product .price, body.lost-brand .wd-product .price *{ font-family:var(--mono) !important;font-size:.7rem !important;font-weight:400 !important; letter-spacing:.11em;color:var(--ash) !important; } body.lost-brand .wd-product .price{display:block;margin:0} body.lost-brand .wd-product .price del, body.lost-brand .wd-product .price ins{text-decoration:none} /* carousel arrows, made to disappear until wanted */ body.lost-brand .wd-btn-arrow{ --wd-arrow-color:var(--p); background:rgba(0,0,0,.65) !important;border:1px solid var(--line-hi) !important; color:var(--p) !important;border-radius:0 !important; width:44px !important;height:44px !important; opacity:0;transition:opacity .3s var(--ease),background .3s var(--ease); } body.lost-brand .wd-carousel-container:hover .wd-btn-arrow{opacity:1} body.lost-brand .wd-btn-arrow:hover{background:var(--p) !important;color:var(--ink) !important} body.lost-brand .wd-nav-pagin-wrap{margin-top:1.6rem} body.lost-brand .wd-nav-pagin li span{background:var(--line-hi) !important} body.lost-brand .wd-nav-pagin li.active span{background:var(--p) !important} /* the carousel needs the gutter back on its flush sections */ body.lost-brand .ls-sec.ls-flush .ls-head{--ls-head-pad:var(--gut)} body.lost-brand .ls-sec.ls-flush .wd-carousel-container{padding-inline:var(--gut)} /* --------------------------------------------------------------------- 3. PICK YOUR WALL: two worlds, edge to edge --------------------------------------------------------------------- */ .ls-worlds{ display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--line);border-block:1px solid var(--line); } .ls-world{ position:relative;display:block;overflow:hidden; aspect-ratio:4/3;background:#050505;text-decoration:none; } .ls-world .ls-world-art{ position:absolute;inset:0;display:grid; grid-template-columns:repeat(3,1fr);align-items:center;gap:4%; padding:9% 8%; transition:transform 1.1s var(--ease),filter .6s var(--ease); filter:brightness(.62) saturate(.85); } .ls-world .ls-world-art img{ width:100%;height:auto;display:block;aspect-ratio:1587/2245;object-fit:cover; box-shadow:0 18px 40px -12px rgba(0,0,0,.9); } .ls-world .ls-world-art img:nth-child(1){transform:rotate(-4deg) translateY(6%)} .ls-world .ls-world-art img:nth-child(2){transform:scale(1.14)} .ls-world .ls-world-art img:nth-child(3){transform:rotate(4deg) translateY(8%)} .ls-world:hover .ls-world-art{transform:scale(1.05);filter:brightness(.8) saturate(1)} .ls-world::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.9) 100%); } .ls-world-label{ position:absolute;inset:auto 0 0 0;z-index:2; padding:clamp(1.4rem,3vw,2.6rem) clamp(1.3rem,3vw,2.4rem); } .ls-world-label b{ display:block;font-family:var(--disp);font-weight:400; font-size:clamp(1.3rem,3.1vw,2.5rem);line-height:2.02;margin-bottom:-.3em; letter-spacing:.01em;text-transform:uppercase;color:var(--p); } .ls-world-label i{ display:block;font-style:normal;font-family:var(--mono); font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash); margin-top:.9em;transition:color .3s var(--ease) } .ls-world:hover .ls-world-label i{color:var(--p)} /* --------------------------------------------------------------------- 4. THE NEXT DROP: a black band on painted concrete --------------------------------------------------------------------- */ body.lost-brand .ls-drop{ padding-block:clamp(4rem,8vw,7.5rem) !important; background:#000 url("../img/lost-concrete.webp") center/cover no-repeat; } body.lost-brand .ls-drop::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.6) 45%,rgba(0,0,0,.9)); } body.lost-brand .ls-drop > *{position:relative;z-index:1} body.lost-brand .ls-drop .ls-head{ flex-direction:column;align-items:center;text-align:center; margin-bottom:clamp(2rem,4vw,3rem); } body.lost-brand .ls-drop .ls-head-l{flex:0 1 auto;text-align:center} body.lost-brand .ls-drop .ls-eyebrow{justify-content:center} body.lost-brand .ls-drop .ls-sub{max-width:52ch;text-align:center} /* countdown, rebuilt as a spec readout instead of a white card */ body.lost-brand .ls-drop .eael-countdown-wrapper{margin-inline:auto} body.lost-brand .ls-drop .eael-countdown-container{ background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important; } body.lost-brand .ls-drop .eael-countdown-items{ display:flex !important;justify-content:center;align-items:stretch; gap:0;margin:0 auto;padding:0;list-style:none; border:1px solid var(--line);width:max-content;max-width:100%; background:rgba(0,0,0,.5);backdrop-filter:blur(2px); } body.lost-brand .ls-drop .eael-countdown-item{ flex:0 0 auto;margin:0 !important;padding:clamp(.9rem,2vw,1.3rem) clamp(1.1rem,3vw,2.2rem); border-left:1px solid var(--line);text-align:center;background:transparent !important; } body.lost-brand .ls-drop .eael-countdown-item:first-child{border-left:0} body.lost-brand .ls-drop .eael-countdown-digits{ display:block;font-family:var(--mono) !important;font-weight:500; font-size:clamp(1.5rem,3.4vw,2.4rem) !important;line-height:1; letter-spacing:.02em;color:var(--p) !important;font-variant-numeric:tabular-nums; } body.lost-brand .ls-drop .eael-countdown-label{ display:block;margin-top:.7em;font-family:var(--mono) !important; font-size:.56rem !important;letter-spacing:.24em;text-transform:uppercase;color:var(--ash) !important; } body.lost-brand .ls-drop .eael-countdown-separator, body.lost-brand .ls-drop .eael-countdown-item::before, body.lost-brand .ls-drop .eael-countdown-item::after{display:none !important} body.lost-brand .ls-drop .wd-button-wrapper{margin-top:clamp(2rem,4vw,3rem);text-align:center} body.lost-brand .ls-drop .ls-note{ margin:1.4rem 0 0;text-align:center; font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash); } /* --------------------------------------------------------------------- 5. THE BRAND BUTTON One shape everywhere. Red is reserved for the primary; the ghost variant carries every secondary so only one red sits per screen. --------------------------------------------------------------------- */ body.lost-brand .btn, body.lost-brand .ls-btn{ display:inline-flex;align-items:center;gap:.75em; padding:1.05em 2.2em !important; background:var(--red) !important;color:var(--p) !important; border:0 !important;border-radius:0 !important;box-shadow:none !important; font-family:var(--mono) !important;font-size:.72rem !important;font-weight:500 !important; letter-spacing:.2em !important;text-transform:uppercase !important;text-decoration:none !important; transition:background .3s var(--ease),transform .3s var(--ease),color .3s var(--ease); } body.lost-brand .ls-sec .btn:hover, body.lost-brand .ls-btn:hover{background:var(--p) !important;color:var(--ink) !important;transform:translateY(-2px)} body.lost-brand .ls-btn-ghost{ background:transparent !important;color:var(--p) !important; box-shadow:inset 0 0 0 1px var(--line-hi) !important; } body.lost-brand .ls-btn-ghost:hover{background:var(--p) !important;color:var(--ink) !important} /* --------------------------------------------------------------------- 6. WE'RE LOST: the outcome shot, full bleed, type over the dark side --------------------------------------------------------------------- */ body.lost-brand .ls-culture{padding:0 !important;border-top:1px solid var(--line)} .ls-culture-grid{ display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;min-height:clamp(420px,52vw,660px); } .ls-culture-art{position:relative;overflow:hidden;background:#050505} .ls-culture-art img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.03);transition:transform 1.4s var(--ease); } .ls-culture:hover .ls-culture-art img{transform:scale(1.08)} .ls-culture-art::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 45%,rgba(0,0,0,.85)); } .ls-culture-copy{ display:flex;flex-direction:column;justify-content:center; padding:clamp(2.6rem,5vw,5rem) clamp(1.4rem,4vw,4rem); background:var(--ink); } body.lost-brand .ls-culture-copy .woodmart-title-container.title{ font-size:clamp(1.5rem,3vw,2.6rem) !important;margin:-.34em 0 0 !important; } body.lost-brand .ls-culture-copy .woodmart-title-container.title u{ text-decoration:none;color:var(--red); } body.lost-brand .ls-culture-copy .wd-text-block p{ margin:1.4rem 0 0;max-width:42ch; font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.65;color:rgba(242,240,236,.78); } body.lost-brand .ls-culture-copy .wd-text-block p + p{margin-top:1rem;color:var(--ash)} body.lost-brand .ls-culture-copy .wd-button-wrapper{margin-top:clamp(1.8rem,3vw,2.6rem);text-align:left} body.lost-brand .ls-culture-copy .ls-signature{ margin-top:clamp(2rem,4vw,3rem);padding-top:1.3rem;border-top:1px solid var(--line); font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash); } /* --------------------------------------------------------------------- 7. ON YOUR WALLS: the WordPress gallery, un-WordPressed --------------------------------------------------------------------- */ body.lost-brand .ls-ugc .elementor-image-gallery .gallery{ display:grid !important;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.4vw,1.1rem); margin:0 !important; } body.lost-brand .ls-ugc .gallery::after{display:none} body.lost-brand .ls-ugc .gallery .gallery-item{ float:none !important;width:auto !important;margin:0 !important;text-align:left !important; } body.lost-brand .ls-ugc .gallery .gallery-icon{ position:relative;overflow:hidden;margin:0;border:1px solid var(--line); transition:border-color .4s var(--ease); } body.lost-brand .ls-ugc .gallery .gallery-item:hover .gallery-icon{border-color:var(--line-hi)} body.lost-brand .ls-ugc .gallery img{ border:0 !important;display:block;width:100%;height:auto; aspect-ratio:1587/2245;object-fit:cover; filter:grayscale(.35) brightness(.86); transition:filter .5s var(--ease),transform .9s var(--ease); } body.lost-brand .ls-ugc .gallery .gallery-item:hover img{filter:none;transform:scale(1.05)} body.lost-brand .ls-ugc .gallery .gallery-caption{display:none !important} /* --------------------------------------------------------------------- 8. THE PROMISES: typographic, no stock icons --------------------------------------------------------------------- */ body.lost-brand .ls-promise{padding-block:clamp(2.8rem,5vw,4.4rem) !important} .ls-promise-grid{ display:grid;grid-template-columns:repeat(4,1fr); border:1px solid var(--line); } .ls-promise-cell{ padding:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2vw,1.8rem); border-left:1px solid var(--line); } .ls-promise-cell:first-child{border-left:0} .ls-promise-cell b{ display:block;font-family:var(--mono);font-weight:500; font-size:clamp(1.15rem,2vw,1.7rem);line-height:1;letter-spacing:.01em;color:var(--p); font-variant-numeric:tabular-nums; } .ls-promise-cell u{ display:block;text-decoration:none;margin-top:1em; font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--p); } .ls-promise-cell i{ display:block;font-style:normal;margin-top:.45em; font-size:.82rem;line-height:1.5;color:var(--ash); } /* --------------------------------------------------------------------- 9. THE FEED --------------------------------------------------------------------- */ body.lost-brand .ls-feed{padding-bottom:clamp(3rem,6vw,5rem) !important} .ls-feed-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .ls-feed-cell{position:relative;display:block;overflow:hidden;aspect-ratio:1;background:#050505} .ls-feed-cell img{width:100%;height:100%;object-fit:cover;display:block; filter:grayscale(.4) brightness(.8);transition:filter .45s var(--ease),transform .9s var(--ease)} .ls-feed-cell:hover img{filter:none;transform:scale(1.07)} .ls-feed-cell::after{ content:attr(data-tag);position:absolute;inset:auto 0 0 0; padding:.7em .9em;background:linear-gradient(transparent,rgba(0,0,0,.85)); font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--p); opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease); } .ls-feed-cell:hover::after{opacity:1;transform:translateY(0)} /* --------------------------------------------------------------------- 10. HEADER AND FOOTER --------------------------------------------------------------------- */ body.lost-brand .whb-main-header, body.lost-brand .whb-general-header{background-color:rgba(0,0,0,.86) !important;backdrop-filter:blur(10px)} body.lost-brand .whb-header-bottom{border-top:1px solid var(--line)} body.lost-brand .whb-main-header .wd-nav > li > a{ font-family:var(--mono) !important;font-size:.68rem !important;font-weight:500 !important; letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--p) !important; } body.lost-brand .whb-main-header .wd-nav > li > a:hover{color:var(--red) !important} /* the cart badge is persistent chrome, so it cannot hold the one red per screen; the content CTA owns that. Badge goes paper on ink. */ body.lost-brand .wd-tools-element .wd-cart-number{ background:var(--p) !important;color:var(--ink) !important; font-family:var(--mono);font-weight:500;border-radius:0 !important; } body.lost-brand .footer-container{ background:var(--ink) !important;border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem) clamp(1.5rem,3vw,2rem) !important; } body.lost-brand .footer-container .widgettitle, body.lost-brand .footer-container .widget-title{ font-family:var(--mono) !important;font-size:.62rem !important;font-weight:500 !important; letter-spacing:.24em !important;text-transform:uppercase !important;color:var(--ash) !important; margin-bottom:1.4rem !important; } body.lost-brand .footer-container .wd-widget a, body.lost-brand .footer-container .widget a{ font-family:var(--sans) !important;font-size:.86rem !important; color:rgba(242,240,236,.78) !important;text-decoration:none !important; } body.lost-brand .footer-container .wd-widget a:hover, body.lost-brand .footer-container .widget a:hover{color:var(--p) !important} body.lost-brand .footer-container .wd-social-icons a{color:var(--ash) !important} body.lost-brand .footer-container .wd-social-icons a:hover{color:var(--p) !important} body.lost-brand .copyrights-wrapper{ border-top:1px solid var(--line) !important;background:var(--ink) !important; } body.lost-brand .copyrights-wrapper, body.lost-brand .copyrights-wrapper *{ font-family:var(--mono) !important;font-size:.6rem !important; letter-spacing:.16em;text-transform:uppercase;color:var(--ash) !important; } body.lost-brand .ls-footer-line{ font-family:var(--sans) !important;font-size:.86rem !important;line-height:1.6; color:var(--ash) !important;text-transform:none !important;letter-spacing:0 !important; max-width:34ch; } /* the theme's scroll-to-top button is not wanted. Turn it off in Woodmart theme settings on the real build; this is the backstop if it comes back. */ body.lost-brand a.scrollToTop, body.lost-brand .scrollToTop{display:none !important} /* --------------------------------------------------------------------- 11. MOTION Sections arrive; they do not slide about. Reduced motion opts out. --------------------------------------------------------------------- */ body.lost-brand [data-ls-reveal]{ opacity:0;transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--ls-delay,0ms); } body.lost-brand [data-ls-reveal].ls-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ body.lost-brand [data-ls-reveal]{opacity:1;transform:none;transition:none} body.lost-brand .ls-world .ls-world-art, body.lost-brand .ls-culture-art img{transition:none} } /* --------------------------------------------------------------------- 12. MOBILE The client's own traffic is overwhelmingly phone, so this is the layout that matters, not a fallback. --------------------------------------------------------------------- */ @media (max-width:1024px){ .ls-worlds{grid-template-columns:1fr} .ls-world{aspect-ratio:16/10} .ls-culture-grid{grid-template-columns:1fr} .ls-culture-art{aspect-ratio:4/3;min-height:0} .ls-promise-grid{grid-template-columns:repeat(2,1fr)} .ls-promise-cell:nth-child(3){border-left:0} .ls-promise-cell:nth-child(n+3){border-top:1px solid var(--line)} body.lost-brand .ls-ugc .elementor-image-gallery .gallery{grid-template-columns:repeat(3,1fr)} .ls-feed-grid{grid-template-columns:repeat(4,1fr)} } @media (max-width:767px){ .ls-head{flex-direction:column;align-items:flex-start} .ls-more{margin-top:1.4rem;align-self:flex-start} body.lost-brand .woodmart-title-container.title, body.lost-brand .elementor-heading-title, body.lost-brand .ls-head .ls-title, body.lost-brand .ls-page-head .ls-title{ font-size:clamp(1.15rem,5.6vw,1.7rem) !important;line-height:2.08 !important; } .ls-world-label b{font-size:clamp(1.1rem,6.4vw,1.7rem);line-height:2.08} body.lost-brand .ls-ugc .elementor-image-gallery .gallery{grid-template-columns:repeat(2,1fr)} .ls-feed-grid{grid-template-columns:repeat(3,1fr)} body.lost-brand .ls-drop .eael-countdown-items{width:100%} body.lost-brand .ls-drop .eael-countdown-item{flex:1 1 0;padding-inline:.4rem} body.lost-brand .wd-product .wd-add-btn{opacity:1;transform:none} body.lost-brand .wd-btn-arrow{display:none !important} } @media (max-width:479px){ .ls-promise-grid{grid-template-columns:1fr} .ls-promise-cell{border-left:0} .ls-promise-cell + .ls-promise-cell{border-top:1px solid var(--line)} } /* ===================================================================== Round one corrections, measured in DevTools ===================================================================== */ /* the countdown plugin paints an off-white panel on the inner wrapper div, which is what turned the digits into white-on-white blocks */ body.lost-brand .ls-drop .eael-countdown-item > div{ background:transparent !important;background-image:none !important; border:0 !important;box-shadow:none !important; padding:0 !important;margin:0 !important; width:auto !important;height:auto !important;min-width:0 !important;border-radius:0 !important; } /* the culture band is a two column grid over its own child containers */ body.lost-brand .ls-culture{ display:grid !important; grid-template-columns:1.1fr 1fr;align-items:stretch; } body.lost-brand .ls-culture-art-col{ position:relative;display:block !important;padding:0 !important;min-height:clamp(360px,44vw,600px); } body.lost-brand .ls-culture-art-col .ls-culture-art{position:absolute;inset:0;margin:0} body.lost-brand .ls-culture:hover .ls-culture-art img{transform:scale(1.07)} /* the theme sets this block 26px italic; the brand voice is not italic */ body.lost-brand .ls-culture-copy .wd-text-block p, body.lost-brand .ls-culture-copy .wd-text-block{ font-family:var(--sans) !important;font-style:normal !important; } body.lost-brand .ls-culture-copy .wd-text-block p{ font-size:clamp(.95rem,1.1vw,1.05rem) !important;line-height:1.65 !important; color:rgba(242,240,236,.8) !important;max-width:44ch;margin:1.3rem 0 0 !important; } body.lost-brand .ls-culture-copy .wd-text-block p + p{color:var(--ash) !important;margin-top:1rem !important} /* the world tiles were tall enough to push the next section off screen */ .ls-world{aspect-ratio:16/11} @media (max-width:1024px){.ls-world{aspect-ratio:16/10}} /* the footer mark is the real logo, on the ground, with no container */ body.lost-brand .footer-container .wd-image img{ background:transparent !important;max-width:132px;height:auto; } /* ===================================================================== Round two corrections, measured in DevTools ===================================================================== */ /* the countdown widget carries a fixed Elementor width, so it sat hard left inside a centred band */ body.lost-brand .ls-drop .elementor-widget-eael-countdown{ margin-inline:auto !important;width:max-content !important;max-width:100% !important; } /* the header block was basing at 22rem, which forced the subline to wrap after four words on a 1440 screen */ .ls-head-l{flex:1 1 34rem} .ls-sub, body.lost-brand .ls-head .title-after_title{max-width:56ch} /* logo: the wordmark lockup in the bar, the full stacked mark in the footer, neither in a container, per the guidelines */ body.lost-brand .wd-logo img{background:transparent !important;padding-block:0 !important} body.lost-brand img.ls-footer-mark{ width:118px;height:auto;background:transparent !important; } /* deepen the floor of the drop band so the concrete plate's own red streak cannot read as a stray UI element */ body.lost-brand .ls-drop::before{ background:linear-gradient(180deg,rgba(0,0,0,.86),rgba(0,0,0,.62) 42%,rgba(0,0,0,.97)); } /* ===================================================================== Round three corrections, measured in DevTools ===================================================================== */ /* Elementor gave these two child containers percentage widths (42 and 58) from the editor, so they sat at 312 and 392 inside 744 and 676 grid tracks. */ body.lost-brand .ls-culture > .e-con{ width:100% !important;max-width:none !important;flex:none !important;margin:0 !important; } body.lost-brand .ls-culture{grid-template-columns:1.18fr 1fr} body.lost-brand .ls-culture-copy{padding:clamp(2.4rem,4.5vw,4.5rem) clamp(1.4rem,3.4vw,3.6rem)} /* text-wrap:balance was splitting the first line of a heading that already carries its own line break */ body.lost-brand .ls-culture-copy .woodmart-title-container.title{ text-wrap:normal;max-width:none !important; } body.lost-brand .ls-culture-copy .wd-text-block p{max-width:52ch} /* the world tiles: hang the prints from the top so the label never lands on the artwork, and give the label a real floor to sit on */ .ls-world .ls-world-art{ align-items:start;padding:7% 8% 0;gap:3.5%; } .ls-world .ls-world-art img:nth-child(2){transform:scale(1.1) translateY(3%)} .ls-world::after{ background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 26%, rgba(0,0,0,.9) 66%,rgba(0,0,0,.99) 100%); } .ls-world-label{padding-bottom:clamp(1.1rem,2.2vw,1.9rem)} /* ===================================================================== Round four corrections, measured in DevTools ===================================================================== */ /* the theme italicises every classless ; these are meta lines, not emphasis */ body.lost-brand .ls-promise-cell i, body.lost-brand .ls-world-label i, body.lost-brand .ls-eyebrow i{font-style:normal !important} /* the gallery shortcode's row breaks became grid items, and its inline anchors gave the images nothing to be 100% of */ body.lost-brand .ls-ugc .gallery br{display:none !important} body.lost-brand .ls-ugc .gallery .gallery-icon a{display:block !important;line-height:0} body.lost-brand .ls-ugc .gallery img{width:100% !important;height:100% !important;max-width:none !important} body.lost-brand .ls-ugc .gallery .gallery-icon{aspect-ratio:1587/2245} /* six card-scheme colours on a one-red screen */ body.lost-brand .copyrights-wrapper img{filter:grayscale(1);opacity:.45} /* the feed already ends on a hard edge, so it needs no floor of its own */ body.lost-brand .ls-feed{padding-bottom:0 !important} body.lost-brand .footer-container{padding-top:clamp(2.6rem,5vw,4.2rem) !important} /* WordPress ships `.gallery-columns-4 .gallery-item{max-width:25%}`, which in a grid cell means 25 percent of the cell: 79px instead of 316px. */ body.lost-brand .ls-ugc .gallery .gallery-item{max-width:none !important} /* ===================================================================== Round five: mobile. The client's traffic is overwhelmingly phone, so this is the layout that matters. The earlier breakpoints targeted a .ls-culture-grid wrapper that the final markup never needed. ===================================================================== */ @media (max-width:1024px){ body.lost-brand .ls-culture{grid-template-columns:1fr !important} body.lost-brand .ls-culture-art-col{min-height:0;aspect-ratio:4/3} body.lost-brand .ls-culture-copy{padding:clamp(2.2rem,7vw,3rem) var(--gut)} body.lost-brand .ls-culture-copy .wd-text-block p{max-width:60ch} } @media (max-width:767px){ /* eight tall prints two-up ran the wall section past 1700px */ body.lost-brand .ls-ugc .elementor-image-gallery .gallery{grid-template-columns:repeat(3,1fr)} .ls-world{aspect-ratio:5/4} .ls-world .ls-world-art{padding:8% 7% 0;gap:3%} body.lost-brand .ls-culture-art-col{aspect-ratio:5/4} /* the promise strip reads better as two tall cells than four squeezed ones */ body.lost-brand .ls-promise{padding-block:clamp(2.2rem,6vw,3rem) !important} } @media (max-width:430px){ .ls-feed-grid{grid-template-columns:repeat(3,1fr)} } /* The section header turns into a column on phones, where flex-basis applies to HEIGHT: the 34rem basis was opening a 480px hole between the subline and the section link. Measured at 390px wide. */ @media (max-width:767px){ .ls-head-l{flex:0 1 auto;width:100%} .ls-head{align-content:start} } /* the theme hides the add-to-cart label on phones, which left a bare cart glyph where the agreed card CTA belongs */ body.lost-brand .wd-product .wd-add-btn .wd-action-text{ display:inline !important;visibility:visible !important; position:static !important;width:auto !important;height:auto !important; clip:auto !important;clip-path:none !important; } body.lost-brand .wd-product .wd-add-btn > a{ display:flex !important;align-items:center;justify-content:center;gap:0; } /* ===================================================================== Site-wide, not just the homepage. The same wall on every page: the shop and category grids, the product pages, the page title bars. ===================================================================== */ body.lost-brand .wd-page-title{ background:var(--ink) !important;border-bottom:1px solid var(--line); padding-block:clamp(2.6rem,6vw,5rem) !important; } body.lost-brand .wd-page-title .entry-title, body.lost-brand .wd-page-title h1{ font-family:var(--disp) !important;font-weight:400 !important; font-size:clamp(1.45rem,3.5vw,2.9rem) !important;line-height:2.02 !important; text-transform:uppercase;color:var(--p) !important;margin:-.34em 0 0 !important; } body.lost-brand .wd-breadcrumbs, body.lost-brand .wd-breadcrumbs *{ font-family:var(--mono) !important;font-size:.62rem !important; letter-spacing:.18em;text-transform:uppercase;color:var(--ash) !important; } body.lost-brand .wd-breadcrumbs a:hover{color:var(--p) !important} /* product page: the print is the subject, the type is a spec sheet */ body.lost-brand .single-product-page .product_title, body.lost-brand .wd-single-title .entry-title{ font-family:var(--disp) !important;font-weight:400 !important; line-height:2.02 !important;text-transform:uppercase; margin:-.3em 0 .2em !important;color:var(--p) !important; } body.lost-brand .summary .price, body.lost-brand .summary .price *{ font-family:var(--mono) !important;letter-spacing:.08em;color:var(--p) !important; } body.lost-brand .wd-tabs .wd-nav-tabs li a, body.lost-brand .woocommerce-tabs .wd-nav-tabs li a{ font-family:var(--mono) !important;font-size:.68rem !important; letter-spacing:.18em;text-transform:uppercase; } /* the shop toolbar and filters read as chrome; quiet them down */ body.lost-brand .wd-shop-tools, body.lost-brand .wd-shop-tools *{ font-family:var(--mono) !important;font-size:.64rem !important;letter-spacing:.16em; text-transform:uppercase; } body.lost-brand .wd-products-per-page a, body.lost-brand .wd-products-shop-view a{color:var(--ash) !important} body.lost-brand .wd-products-per-page a.wd-active, body.lost-brand .wd-products-shop-view a.wd-active{color:var(--p) !important} /* the sidebar widgets were the worst offender on the whole site: the theme's serif plus three red prices in one screen */ body.lost-brand .sidebar-widget .widget-title, body.lost-brand .wd-widget .widget-title, body.lost-brand .widget > .widgettitle{ font-family:var(--mono) !important;font-size:.64rem !important;font-weight:500 !important; letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--ash) !important; } body.lost-brand .sidebar-widget, body.lost-brand .sidebar-widget *{font-family:var(--sans)} body.lost-brand .wd-widget .wd-entities-title, body.lost-brand .sidebar-widget .wd-entities-title, body.lost-brand .sidebar-widget .wd-entities-title a{ font-family:var(--sans) !important;font-weight:600 !important;font-size:.76rem !important; letter-spacing:.08em;text-transform:uppercase;color:var(--p) !important; } body.lost-brand .sidebar-widget .price, body.lost-brand .sidebar-widget .price *, body.lost-brand .wd-widget .price, body.lost-brand .wd-widget .price *, body.lost-brand .price_label, body.lost-brand .price_slider_amount{ font-family:var(--mono) !important;font-size:.7rem !important; letter-spacing:.1em;color:var(--ash) !important; } body.lost-brand .sidebar-widget ul li a{ font-family:var(--sans) !important;font-size:.86rem !important;color:rgba(242,240,236,.78) !important; } body.lost-brand .sidebar-widget ul li a:hover{color:var(--p) !important} body.lost-brand .price_slider_amount .button, body.lost-brand .price_slider_wrapper .button{ background:transparent !important;color:var(--p) !important;border-radius:0 !important; box-shadow:inset 0 0 0 1px var(--line-hi) !important; font-family:var(--mono) !important;font-size:.62rem !important; letter-spacing:.2em;text-transform:uppercase;padding:.85em 1.6em !important; } body.lost-brand .price_slider_amount .button:hover{background:var(--p) !important;color:var(--ink) !important} body.lost-brand .ui-slider .ui-slider-range{background:var(--p) !important} body.lost-brand .ui-slider{background:var(--line) !important} body.lost-brand .ui-slider .ui-slider-handle{background:var(--p) !important;border-radius:0 !important} /* the shop and category pages ship with no H1 because the theme's page-title area is switched off in WordPress; this is the stand-in */ body.lost-brand .ls-page-head{margin:0 0 clamp(1.6rem,3vw,2.4rem)} body.lost-brand .ls-page-head .ls-title{ font-family:var(--disp) !important;font-weight:400 !important; font-size:clamp(1.45rem,3.5vw,2.9rem) !important;line-height:2.02 !important; text-transform:uppercase;color:var(--p) !important;margin:-.34em 0 0 !important; } /* ===================================================================== COHESION The first build read as a stack of separate black cards: identical padding, identical header pattern, a hairline rule between every one. The page is meant to be one wall you walk along, so: one grain over the whole document, no rules between sections, a continuous spine down the gutter with the chapter number sitting on it, a chapter rail that always answers "where am I", and the hero's catalogue ticker returning once at the end. ===================================================================== */ /* --- one paper, whole document -------------------------------------- */ body.lost-brand::after{ content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.16; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } /* --- the rules come off; sections dissolve instead ------------------- */ body.lost-brand .ls-sec{border-top:0} body.lost-brand .ls-culture{border-top:0} /* a soft seam where two black bands meet, so the eye reads a fold, not an edge */ body.lost-brand .ls-sec[data-ls-ch]::before{ content:"";position:absolute;inset:0 0 auto 0;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(242,240,236,.16) 12%, rgba(242,240,236,.16) 74%,transparent); } /* the drop band already owns a ::before for its scrim, so it opts out */ body.lost-brand .ls-drop::before{ content:"";position:absolute;inset:0;height:auto; background:linear-gradient(180deg,rgba(0,0,0,.86),rgba(0,0,0,.62) 42%,rgba(0,0,0,.97)); } /* and the two texture bands fade into the black on both sides, so no hard cut */ body.lost-brand .ls-drop::after, body.lost-brand .ls-culture-art-col::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%,#000 100%); } body.lost-brand .ls-culture-art-col::after{ background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%,rgba(0,0,0,.85) 100%); } body.lost-brand .ls-drop > *{position:relative;z-index:2} /* --- the spine ------------------------------------------------------- */ /* one hairline running the length of the content, with the chapter number sitting on it, so the page never announces that it has ended */ body.lost-brand .ls-sec[data-ls-ch]{padding-left:calc(var(--gut) + 3.2rem)} body.lost-brand .ls-sec[data-ls-ch].ls-flush{padding-left:0} body.lost-brand .ls-sec[data-ls-ch] > .ls-head{position:relative} body.lost-brand .ls-sec[data-ls-ch]::after{ content:"";position:absolute;top:0;bottom:0;left:var(--gut);width:1px;z-index:1; background:linear-gradient(180deg,rgba(242,240,236,.02),rgba(242,240,236,.14) 18%, rgba(242,240,236,.14) 82%,rgba(242,240,236,.02)); } body.lost-brand .ls-sec[data-ls-ch].ls-flush::after{left:var(--gut)} body.lost-brand .ls-sec[data-ls-ch].ls-drop::after, body.lost-brand .ls-sec.ls-culture::after{display:none} /* the index number leaves the eyebrow and sits on the spine */ body.lost-brand .ls-sec[data-ls-ch] .ls-eyebrow{position:relative} body.lost-brand .ls-sec[data-ls-ch] .ls-eyebrow b{ position:absolute;left:calc(-3.2rem - 1px);top:-.15em; width:2rem;text-align:center; background:var(--ink);padding:.35em 0;color:var(--p); } body.lost-brand .ls-sec.ls-flush[data-ls-ch] .ls-eyebrow b{ left:calc(-3.2rem - 1px); } body.lost-brand .ls-drop .ls-eyebrow b, body.lost-brand .ls-culture .ls-eyebrow b{position:static;background:none;padding:0;width:auto} /* --- the progress hairline ------------------------------------------- */ .ls-progress{ position:fixed;z-index:61;inset:0 0 auto 0;height:2px;background:transparent; pointer-events:none; } .ls-progress span{ display:block;height:100%;width:100%;background:var(--red); transform:scaleX(0);transform-origin:0 50%; } /* --- the ticker, returning once ------------------------------------- */ .ls-strip{ position:relative;z-index:2;overflow:hidden;white-space:nowrap; padding:1rem 0;background:#000; border-block:1px solid var(--line); } .ls-strip__t{display:inline-flex;align-items:center;gap:2.3rem;animation:lsRun 60s linear infinite} .ls-strip:hover .ls-strip__t{animation-play-state:paused} .ls-strip i{ font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--ash);display:inline-flex;align-items:center;gap:2.3rem; } .ls-strip i::after{content:"";width:4px;height:4px;background:var(--smoke);border-radius:50%} @keyframes lsRun{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ls-strip__t{animation:none}} /* --- rhythm: the two texture bands breathe more than the grids ------- */ body.lost-brand .ls-drop{padding-block:clamp(4.5rem,9vw,8.5rem) !important} body.lost-brand .ls-sec.ls-promise{padding-block:clamp(2.6rem,5vw,4rem) !important} /* --- phones ---------------------------------------------------------- */ @media (max-width:900px){ body.lost-brand .ls-sec[data-ls-ch]{padding-left:var(--gut)} body.lost-brand .ls-sec[data-ls-ch].ls-flush{padding-left:0} body.lost-brand .ls-sec[data-ls-ch]::after{display:none} body.lost-brand .ls-sec[data-ls-ch] .ls-eyebrow b{ position:static;background:none;padding:0;width:auto; } .ls-strip{padding:.8rem 0} } /* --- cohesion, corrected after measuring at 1440 ---------------------- */ /* the flush sections kept their old gutter, so the chapter number landed 2px from the viewport edge and the carousel did not line up with the spine */ @media (min-width:901px){ body.lost-brand .ls-sec[data-ls-ch].ls-flush .ls-head{--ls-head-pad:calc(var(--gut) + 3.2rem)} body.lost-brand .ls-sec[data-ls-ch].ls-flush .wd-carousel-container{ padding-inline:calc(var(--gut) + 3.2rem) var(--gut); } body.lost-brand .ls-sec[data-ls-ch] .ls-eyebrow b{left:-3.2rem} } /* a progress hairline is not a thing you press, so it cannot hold the red */ .ls-progress span{background:rgba(242,240,236,.55)} /* --- cohesion, corrections after measuring the drop band -------------- */ /* the new seam ::before out-specified the drop band's scrim, so the concrete came through at full brightness and the copy on it went unreadable */ body.lost-brand .ls-sec.ls-drop[data-ls-ch]::before{ inset:0;height:auto; background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.66) 42%,rgba(0,0,0,.97)); } /* the button widget's own container carried a solid black fill from Elementor, which painted a bar right across the texture */ body.lost-brand .ls-drop .elementor-widget-container{background:transparent !important} /* the centred eyebrow left its number stranded from the label */ body.lost-brand .ls-drop .ls-eyebrow i, body.lost-brand .ls-culture .ls-eyebrow i{flex:0 0 2.2rem} /* the spine rule out-specified the centred bands' opt-out, so their chapter number was absolutely positioned 51px left of a centred box and read as stranded */ body.lost-brand .ls-sec.ls-drop[data-ls-ch] .ls-eyebrow b, body.lost-brand .ls-sec.ls-culture[data-ls-ch] .ls-eyebrow b{ position:static;background:none;padding:0;width:auto;left:auto; } /* the base .ls-sec padding is !important, so the spine's left offset never applied to the inset sections: their chapter number sat at x=2 */ @media (min-width:901px){ body.lost-brand .ls-sec[data-ls-ch]{padding-left:calc(var(--gut) + 3.2rem) !important} body.lost-brand .ls-sec[data-ls-ch].ls-flush{padding-left:0 !important} body.lost-brand .ls-sec.ls-drop[data-ls-ch], body.lost-brand .ls-sec.ls-culture[data-ls-ch]{padding-left:var(--gut) !important} body.lost-brand .ls-sec.ls-culture[data-ls-ch]{padding-left:0 !important} } /* the culture band's own eyebrow, sitting with its copy */ body.lost-brand .ls-culture-copy .ls-eyebrow{margin-bottom:clamp(1rem,2vw,1.6rem)} /* the Elementor widgets inside the section headers carry their own left padding and margin from the editor (30px and 40px), so three of the six section names sat 30 to 40px right of their own eyebrow */ body.lost-brand .ls-head-l > .elementor-element, body.lost-brand .ls-culture-copy > .elementor-element{ padding-inline:0 !important;margin-inline:0 !important; } /* --- one lit surface ------------------------------------------------- Every section painting its own flat #000 is what made the page read as a stack of cards. The ground now belongs to the document: a single barely-there wash, warm at the top where the hero's red lives, cool at the floor, with the sections sitting on it rather than covering it. -------------------------------------------------------------------- */ body.lost-brand{background:var(--ink)} body.lost-brand > .wd-page-wrapper{position:relative;z-index:1} body.lost-brand::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(130% 55% at 50% -8%, rgba(199,28,0,.055), transparent 62%), radial-gradient(110% 45% at 50% 108%, rgba(242,240,236,.04), transparent 62%); } body.lost-brand .ls-sec, body.lost-brand .ls-culture-copy, body.lost-brand .footer-container{background:transparent} /* the chapter number still needs to knock a hole in the spine, so it keeps a solid ground of its own */ body.lost-brand .ls-sec[data-ls-ch] .ls-eyebrow b{background:var(--ink)} /* the ghost button was a 34 percent hairline on black: technically visible, practically not. And the signature left a 90px hole above it. */ body.lost-brand .ls-btn-ghost{ box-shadow:inset 0 0 0 1px rgba(242,240,236,.5) !important; } body.lost-brand .ls-culture-copy .ls-signature{ margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:1.1rem; } body.lost-brand .ls-culture-copy .wd-button-wrapper{margin-top:clamp(1.2rem,2.2vw,1.8rem)} body.lost-brand .ls-culture-copy > .elementor-element:last-child{margin-block:0 !important} /* the ticker sits inside a theme container, so it takes the same full-bleed escape the hero uses */ .ls-strip{ width:100vw;max-width:100vw; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); } /* --- touch targets --------------------------------------------------- Measured at 390px: product titles were 16px tall and the section links 23px. Both are below the 44px minimum, and this site is opened on a phone far more often than on a desktop. -------------------------------------------------------------------- */ @media (max-width:900px){ body.lost-brand .wd-product .wd-entities-title a{ display:inline-block;padding-block:.7rem;margin-block:-.35rem; } .ls-more{padding-block:.75rem .7rem} body.lost-brand .wd-product .price{padding-block:.25rem} body.lost-brand .footer-container .wd-widget a, body.lost-brand .footer-container .widget a{ display:inline-block;padding-block:.45rem; } body.lost-brand .wd-social-icons a{padding:.5rem} } @media (max-width:900px){ body.lost-brand .wd-social-icons a{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; } body.lost-brand .footer-container .wd-widget a, body.lost-brand .footer-container .widget a{padding-block:.62rem} body.lost-brand .wd-logo{padding-block:.6rem} } /* the countdown widget was pinned to max-content so it could be centred on desktop, which also capped the row at 228px on a 358px phone */ @media (max-width:767px){ body.lost-brand .ls-drop .elementor-widget-eael-countdown{ width:100% !important;max-width:100% !important; } body.lost-brand .ls-drop .eael-countdown-items{width:100%} body.lost-brand .ls-drop .eael-countdown-digits{font-size:1.45rem !important} body.lost-brand .ls-drop .eael-countdown-label{font-size:.5rem !important;letter-spacing:.16em} } /* --- the red budget, audited per viewport --------------------------- Measuring every 900px slice found two reds on the screens either side of the culture band: a section link arrow plus the red LOST in the heading. A small text link is not "the thing we want pressed", so the section links give the red back. Red now belongs only to the hero CTA, the drop button, the card CTA on hover, and the word LOST in the culture heading. One per screen, everywhere. ------------------------------------------------------------------- */ .ls-more{ color:var(--p) !important; border-bottom-color:rgba(242,240,236,.28); } .ls-more:hover{border-bottom-color:var(--p)} .ls-more span{color:var(--ash)} .ls-more:hover span{color:var(--p)} /* ===================================================================== MOBILE CHROME The off-canvas menu and the bottom toolbar were pure Woodmart: grey panels, sentence-case sans, a red HOME link spending the red budget on navigation. On a site that is opened on a phone far more often than on a desktop these are the most-seen surfaces on the site. ===================================================================== */ body.lost-brand .mobile-nav, body.lost-brand .cart-widget-side, body.lost-brand .login-form-side{ background:var(--ink) !important; border-right:1px solid var(--line); } body.lost-brand .mobile-nav .wd-nav-mobile > li{border-bottom:1px solid var(--line)} body.lost-brand .mobile-nav .wd-nav-mobile > li > a, body.lost-brand .mobile-nav .wd-nav-mobile li a{ font-family:var(--mono) !important;font-size:.76rem !important;font-weight:500 !important; letter-spacing:.2em !important;text-transform:uppercase !important; color:var(--p) !important;background:transparent !important; padding-block:1.15rem !important; } body.lost-brand .mobile-nav .wd-nav-mobile > li.current-menu-item > a, body.lost-brand .mobile-nav .wd-nav-mobile > li > a:hover{color:var(--p) !important} body.lost-brand .mobile-nav .wd-nav-mobile > li.current-menu-item > a::before{ content:"";position:absolute;left:0;top:50%;width:3px;height:1.1em; transform:translateY(-50%);background:var(--p); } body.lost-brand .mobile-nav .wd-nav-mobile > li > a{position:relative} body.lost-brand .mobile-nav .wd-search-form, body.lost-brand .mobile-nav .searchform{border-bottom:1px solid var(--line)} body.lost-brand .mobile-nav input[type="text"], body.lost-brand .mobile-nav input[type="search"]{ background:transparent !important;border:0 !important;color:var(--p) !important; font-family:var(--mono) !important;font-size:.72rem !important;letter-spacing:.14em; text-transform:uppercase; } body.lost-brand .mobile-nav input::placeholder{color:var(--ash) !important} body.lost-brand .wd-toolbar{ background:rgba(0,0,0,.94) !important;backdrop-filter:blur(12px); border-top:1px solid var(--line) !important; } body.lost-brand .wd-toolbar .wd-toolbar-label, body.lost-brand .wd-toolbar a{ font-family:var(--mono) !important;font-size:.5rem !important; letter-spacing:.16em !important;text-transform:uppercase !important; color:var(--ash) !important; } body.lost-brand .wd-toolbar a:hover, body.lost-brand .wd-toolbar .wd-active a{color:var(--p) !important} body.lost-brand .wd-toolbar .wd-cart-number{ background:var(--p) !important;color:var(--ink) !important;border-radius:0 !important; } /* the fixed bottom toolbar hides the last line of the footer */ @media (max-width:900px){ body.lost-brand .copyrights-wrapper{padding-bottom:4.5rem !important} } /* On a phone the desktop spine and rail are gone, so the only things holding the scroll together are the grain, the wash, the seams and the pacing. Wide dead bands between sections undo all four: tighten them so one section hands off to the next instead of ending. */ @media (max-width:767px){ body.lost-brand .ls-sec{padding-block:clamp(2.6rem,7vw,3.6rem) clamp(2.4rem,6vw,3.2rem) !important} body.lost-brand .ls-sec.ls-drop{padding-block:clamp(3.2rem,9vw,4.4rem) !important} .ls-head{margin-bottom:clamp(1.5rem,4vw,2.2rem)} body.lost-brand .ls-sec[data-ls-ch]::before{ background:linear-gradient(90deg,transparent,rgba(242,240,236,.14) 8%, rgba(242,240,236,.14) 92%,transparent); } } /* ===================================================================== PRODUCT PAGE Three reds in one screen (the two quantity steppers plus add-to-cart), a serif pull-quote for the artist credit, and sentence-case theme affordances. The add-to-cart keeps the red; nothing else does. ===================================================================== */ body.lost-brand .quantity .minus, body.lost-brand .quantity .plus, body.lost-brand .wd-buttons .quantity input, body.lost-brand .quantity input[type="number"]{ background:transparent !important;color:var(--p) !important; border:1px solid var(--line-hi) !important;border-radius:0 !important; font-family:var(--mono) !important; } body.lost-brand .quantity .minus:hover, body.lost-brand .quantity .plus:hover{background:var(--p) !important;color:var(--ink) !important} body.lost-brand .single_add_to_cart_button{ background:var(--red) !important;color:var(--p) !important;border-radius:0 !important; font-family:var(--mono) !important;font-size:.72rem !important;font-weight:500 !important; letter-spacing:.2em !important;text-transform:uppercase !important;padding:1.15em 2.2em !important; } body.lost-brand .single_add_to_cart_button:hover{background:var(--p) !important;color:var(--ink) !important} /* the artist credit ships as an h1 in a blockquote, which the theme renders as a serif pull-quote. Content note: on the Drake page the credit reads TRAVIS SCOTT, and on every other product it is an empty label. Both are WordPress data errors for the client to fix, flagged rather than papered over. */ body.lost-brand .woocommerce-product-details__short-description blockquote{ border:0 !important;border-left:2px solid var(--line-hi) !important; margin:1.4rem 0 !important;padding:.2rem 0 .2rem 1.1rem !important;background:none !important; } body.lost-brand .woocommerce-product-details__short-description blockquote h1, body.lost-brand .woocommerce-product-details__short-description blockquote h2{ font-family:var(--mono) !important;font-size:.68rem !important;font-weight:500 !important; letter-spacing:.2em !important;text-transform:uppercase !important; color:var(--ash) !important;line-height:1.5 !important;margin:0 !important; } body.lost-brand .woocommerce-product-details__short-description p:empty, body.lost-brand .woocommerce-product-details__short-description p:has(> br:only-child){display:none} /* the theme's secondary affordances, quieted to spec type */ body.lost-brand .wd-action-btn > a, body.lost-brand .product_meta, body.lost-brand .product_meta *{ font-family:var(--mono) !important;font-size:.6rem !important; letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--ash) !important; } body.lost-brand .wd-action-btn > a:hover{color:var(--p) !important} body.lost-brand .variations label, body.lost-brand .variations .label{ font-family:var(--mono) !important;font-size:.6rem !important; letter-spacing:.2em !important;text-transform:uppercase !important;color:var(--ash) !important; } body.lost-brand .variations select, body.lost-brand select{ background:transparent !important;color:var(--p) !important;border-radius:0 !important; border:1px solid var(--line-hi) !important;font-family:var(--sans) !important; } body.lost-brand .variations select option{background:var(--ink);color:var(--p)} /* --- the last two stray typefaces ------------------------------------ Enumerating the computed font-family of every visible leaf on the page turned up exactly two families that are not in the brand: Roboto on the header cart's separator, and Playfair Display on the off-canvas panel titles. Both are theme defaults that survived. -------------------------------------------------------------------- */ body.lost-brand .wd-tools-element, body.lost-brand .wd-tools-element *, body.lost-brand .wd-cart-subtotal, body.lost-brand .wd-cart-subtotal *{ font-family:var(--mono) !important;letter-spacing:.08em; } body.lost-brand .wd-side-hidden .wd-heading > .title, body.lost-brand .wd-side-hidden .widget-title, body.lost-brand .cart-widget-side .title, body.lost-brand .login-form-side .title, body.lost-brand .wd-search-full-screen .title{ font-family:var(--mono) !important;font-size:.68rem !important;font-weight:500 !important; letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--ash) !important; } body.lost-brand .wd-side-hidden, body.lost-brand .wd-side-hidden *, body.lost-brand .wd-search-full-screen, body.lost-brand .wd-search-full-screen *{font-family:var(--sans)} body.lost-brand .wd-search-full-screen{background:rgba(0,0,0,.96) !important} body.lost-brand .wd-search-full-screen input{ font-family:var(--disp) !important;color:var(--p) !important; border-bottom:1px solid var(--line-hi) !important;background:transparent !important; } /* --- The Next Drop, second copy pass -------------------------------- The counter now has a label above it (it was counting down to nothing the reader could name) and the note moved below the button, where it carries the reciprocity and the risk removal on the micro-commitment. -------------------------------------------------------------------- */ body.lost-brand .ls-drop .ls-count-label{ margin:0 0 1rem;text-align:center; font-family:var(--mono);font-size:.62rem;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:var(--ash); } body.lost-brand .ls-drop .ls-note{ margin:1.5rem auto 0;max-width:46ch; font-family:var(--sans);font-size:.8rem;line-height:1.55; letter-spacing:0;text-transform:none;color:var(--ash); } /* two paragraphs of body copy in the centred band need a real gap */ body.lost-brand .ls-drop .title-after_title p + p{margin-top:.85rem} body.lost-brand .ls-drop .title-after_title p:last-child{color:rgba(242,240,236,.62)} /* the headline runs to two lines here, so it takes the hero's measured leading rather than the tighter single-line value */ body.lost-brand .ls-drop .woodmart-title-container.title{line-height:2.05 !important} /* the "one lit surface" rule set every .ls-sec background to transparent, which at equal specificity also stripped the drop band's concrete plate. Caught by looking at the section, not by reading the file. */ body.lost-brand .ls-sec.ls-drop{ background:#000 url("../img/lost-concrete.webp") center/cover no-repeat; } /* ===================================================================== SECTION 01 AND THE PRODUCT CARD, second pass The row was a grid of equal rectangles: correct, and dull. Three moves, all cheap in ink: a staggered baseline so the row reads as prints hung by a person rather than output by a query a lit top edge, because on a black ground a drop shadow is invisible and a highlight is what actually makes paper sit forward the one product fact that had disappeared from the page below the hero, on every card: two sizes, UV textured ===================================================================== */ /* the spec line: the print's own facts, in the meta face */ body.lost-brand .wd-product .ls-spec{ margin:.42rem 0 0; font-family:var(--mono);font-size:.58rem;font-weight:400; letter-spacing:.16em;text-transform:uppercase; color:rgba(242,240,236,.34); transition:color .4s var(--ease); } body.lost-brand .wd-product:hover .ls-spec{color:var(--ash)} /* paper catching light along the top edge, and the card lifting on hover */ body.lost-brand .wd-product .wd-product-thumb{ border-top-color:rgba(242,240,236,.24); box-shadow:inset 0 1px 0 rgba(242,240,236,.08); } body.lost-brand .wd-product .wd-product-wrapper{ transition:transform .5s var(--ease); } body.lost-brand .wd-product:hover .wd-product-wrapper{transform:translateY(-5px)} body.lost-brand .wd-product:hover .wd-product-thumb{ border-top-color:rgba(242,240,236,.55); } /* the staggered baseline. Only in the two product rows, and only where there is room for it: on one column it would just look like a broken margin. */ @media (min-width:768px){ body.lost-brand .ls-sec[data-ls-ch="01"] .wd-carousel-item:nth-child(even) .wd-product, body.lost-brand .ls-sec[data-ls-ch="04"] .wd-col:nth-child(even) .wd-product{ transform:translateY(clamp(10px,2.2vw,32px)); } } /* the mobile carousel gave no sign it could be swiped: the arrows are hidden and the theme's dots were switched off */ @media (max-width:767px){ body.lost-brand .ls-sec .wd-nav-pagin-wrap{ display:flex !important;justify-content:center;margin-top:1.4rem; } body.lost-brand .ls-sec .wd-nav-pagin{display:flex;gap:.5rem} body.lost-brand .ls-sec .wd-nav-pagin li span{ width:22px;height:2px;border-radius:0 !important;background:var(--line-hi) !important; } body.lost-brand .ls-sec .wd-nav-pagin li.active span{background:var(--p) !important} body.lost-brand .wd-product .ls-spec{font-size:.55rem} } /* the lit top edge was reading as a heavy border rather than light on paper */ body.lost-brand .wd-product .wd-product-thumb{border-top-color:rgba(242,240,236,.19)} body.lost-brand .wd-product:hover .wd-product-thumb{border-top-color:rgba(242,240,236,.46)} /* ===================================================================== SECTION 01 ON A PHONE Two faults found by looking at 390px: the card CTA "THAT ONE'S MINE" wrapped to three lines and spilled out of its own bar, because the label is always shown on touch and 165px of card cannot hold it at desktop tracking the carousel showed exactly two whole cards, so nothing said it could be swiped: the theme rendered no pagination element at all Fix for the second one costs no extra chrome: show one and two thirds cards. The posters get bigger AND the cut edge does the telling. ===================================================================== */ @media (max-width:767px){ body.lost-brand .ls-sec .wd-carousel{--wd-col-sm:1.7 !important;--wd-col:1.7 !important} body.lost-brand .ls-sec .wd-carousel .wd-carousel-item{ flex:0 0 calc(100% / 1.7) !important;max-width:calc(100% / 1.7) !important; } body.lost-brand .wd-product .wd-add-btn > a{ font-size:.56rem !important;letter-spacing:.1em !important; padding:.85em .5em !important;white-space:nowrap; } body.lost-brand .wd-product .wd-entities-title a{font-size:.74rem !important} } /* the theme pins the loop add-to-cart anchor to a 40px square with overflow hidden on touch, which is why the label was clipped rather than wrapped */ body.lost-brand .wd-product .wd-add-btn > a{ width:100% !important;min-width:0 !important;max-width:none !important; overflow:visible !important; } /* the theme's cart glyph was still painting under the label, turning the card CTA into a two-line button */ body.lost-brand .wd-product .wd-add-btn > a .wd-action-icon, body.lost-brand .wd-product .wd-add-btn > a .wd-check-icon{display:none !important} body.lost-brand .wd-product .wd-add-btn > a::before, body.lost-brand .wd-product .wd-add-btn > a::after{content:none !important;display:none !important} body.lost-brand .wd-product .wd-add-btn > a .screen-reader-text{display:none !important} /* ===================================================================== SECTIONS 03 AND 05, second pass ===================================================================== */ /* 03: the tiles are links, so they now say so. The affordance is quiet until the pointer arrives, and always on for touch, where there is no hover. */ .ls-world-go{ display:flex;align-items:center;gap:.55em; margin-top:.85em;font-style:normal; font-family:var(--mono);font-size:.6rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--p); opacity:0;transform:translateY(6px); transition:opacity .4s var(--ease),transform .4s var(--ease),gap .3s var(--ease); } .ls-world:hover .ls-world-go{opacity:1;transform:none} .ls-world:hover .ls-world-go{gap:1.1em} .ls-world::before{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .4s var(--ease); } .ls-world:hover::before{box-shadow:inset 0 0 0 1px rgba(242,240,236,.3)} /* the label lifts a little to make room, so nothing jumps */ .ls-world-label{transition:transform .45s var(--ease)} .ls-world:hover .ls-world-label{transform:translateY(-2px)} @media (hover:none){ .ls-world-go{opacity:1;transform:none;color:var(--ash)} } /* 05: the photo carries the argument, so give it more of the row, and the heading no longer needs the underline treatment it had for the word LOST */ body.lost-brand .ls-culture{grid-template-columns:1.3fr 1fr} body.lost-brand .ls-culture-copy .woodmart-title-container.title{ max-width:22ch; } @media (max-width:1024px){ body.lost-brand .ls-culture{grid-template-columns:1fr !important} body.lost-brand .ls-culture-copy .woodmart-title-container.title{max-width:none} } /* the tile affordance was hover-only, which left the tiles with no visible cue at rest on desktop either. Faint at rest, full on hover. */ .ls-world-go{opacity:1;transform:none;color:var(--ash)} .ls-world:hover .ls-world-go{color:var(--p)} /* ===================================================================== PAGE HEADERS AND THE BREADCRUMB The theme sets its wd_title subtitle in an italic script serif, and the text was hardcoded "Home / Shop" on every page including Drops. The text is fixed per page in the markup; here it becomes the brand's own eyebrow. On the homepage the subtitle stays hidden, because there the eyebrow is the chapter index instead. ===================================================================== */ body.lost-brand .title-subtitle{ font-family:var(--mono) !important;font-style:normal !important; font-size:.62rem !important;font-weight:500 !important; letter-spacing:.22em !important;text-transform:uppercase !important; color:var(--ash) !important; margin:0 0 clamp(.7rem,1.6vw,1.1rem) !important; } body.lost-brand .ls-head .title-subtitle{display:none !important} /* ===================================================================== DROPS PAGE ===================================================================== */ /* the opening band: black tubes, one red wax seal, which is the band's one red */ body.lost-brand .ls-drophead{ position:relative; padding:clamp(3.4rem,8vw,7rem) var(--gut) clamp(3rem,7vw,5.5rem) !important; background:#000 url("../img/lost-paste-wall.webp") center/cover no-repeat; overflow:hidden; } body.lost-brand .ls-drophead::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.8) 42%, rgba(0,0,0,.4) 100%), linear-gradient(180deg,rgba(0,0,0,.6),transparent 30%,rgba(0,0,0,.85)); } body.lost-brand .ls-drophead > *{position:relative;z-index:1} body.lost-brand .ls-drophead .woodmart-title-container.title{max-width:20ch} body.lost-brand .ls-drophead .title-after_title{max-width:46ch} /* the three steps, in the same spec type as the promise strip */ .ls-steps{ display:grid;grid-template-columns:repeat(3,1fr); border:1px solid var(--line); margin:0 var(--gut) clamp(2rem,5vw,3.5rem); } .ls-step{padding:clamp(1.5rem,3vw,2.2rem) clamp(1.1rem,2vw,1.8rem);border-left:1px solid var(--line)} .ls-step:first-child{border-left:0} .ls-step b{ display:block;font-family:var(--mono);font-weight:500;font-size:.68rem; letter-spacing:.2em;color:var(--ash); } .ls-step u{ display:block;text-decoration:none;margin-top:.9em; font-family:var(--disp);font-weight:400;text-transform:uppercase; font-size:clamp(.95rem,1.7vw,1.3rem);line-height:2.02;color:var(--p); } .ls-step i{ display:block;font-style:normal !important;margin-top:-.5em; font-size:.86rem;line-height:1.5;color:var(--ash); } @media (max-width:767px){ .ls-steps{grid-template-columns:1fr} .ls-step{border-left:0} .ls-step + .ls-step{border-top:1px solid var(--line)} body.lost-brand .ls-drophead .woodmart-title-container.title, body.lost-brand .ls-drophead .title-after_title{max-width:none} } /* both drops-page bands sat inside the theme's 1222px container while every homepage band is full bleed, so they read as a different site */ body.lost-brand .ls-drophead, .ls-steps{ width:100vw;max-width:100vw; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); } .ls-steps{ border-inline:0;border-top:0; margin-bottom:clamp(2rem,5vw,3.5rem); padding-inline:var(--gut); } .ls-step:first-child{padding-left:0} .ls-step:last-child{padding-right:0} /* Higher Jump's leading already opens a big box, so the old -.5em pull dragged the description into the step name once the name ran to two lines */ .ls-step i{margin-top:-.3em} /* ===================================================================== THE COUNTDOWN, LARGER It is the only moving thing on the page and the whole band hangs off it, so it was under-scaled against a display heading three times its size. ===================================================================== */ body.lost-brand .ls-drop .eael-countdown-digits{ font-size:clamp(2.1rem,4.6vw,3.6rem) !important;letter-spacing:.01em; } body.lost-brand .ls-drop .eael-countdown-label{ font-size:.6rem !important;letter-spacing:.26em;margin-top:.85em; } body.lost-brand .ls-drop .eael-countdown-item{ padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.4rem,3.4vw,2.8rem); } @media (max-width:767px){ body.lost-brand .ls-drop .eael-countdown-digits{font-size:1.95rem !important} body.lost-brand .ls-drop .eael-countdown-label{font-size:.52rem !important;letter-spacing:.16em} body.lost-brand .ls-drop .eael-countdown-item{padding:.95rem .3rem} } /* the drops page catalogue grid is an Essential Addons widget, not Woodmart's product loop, so it never picked up the card treatment */ body.lost-brand .eael-product-grid ul.products{background:transparent} body.lost-brand .eael-product-wrap, body.lost-brand .eael-product-grid .product-image-wrap{background:transparent !important} body.lost-brand .eael-product-grid .product-image-wrap img{ border:1px solid var(--line) !important;border-top-color:rgba(242,240,236,.19) !important; transition:border-color .45s var(--ease),transform .8s var(--ease); } body.lost-brand .eael-product-grid li:hover .product-image-wrap img{ border-top-color:rgba(242,240,236,.46) !important; } body.lost-brand .eael-product-grid .woocommerce-loop-product__title, body.lost-brand .eael-product-grid .woocommerce-loop-product__title a{ font-family:var(--sans) !important;font-weight:600 !important;font-size:.8rem !important; letter-spacing:.09em;text-transform:uppercase;color:var(--p) !important; text-decoration:none !important; } body.lost-brand .eael-product-grid .price, body.lost-brand .eael-product-grid .price *{ font-family:var(--mono) !important;font-size:.7rem !important; letter-spacing:.11em;color:var(--ash) !important; } body.lost-brand .eael-product-grid .button, body.lost-brand .eael-product-grid .added_to_cart{ background:var(--p) !important;color:var(--ink) !important;border-radius:0 !important; font-family:var(--mono) !important;font-size:.62rem !important; letter-spacing:.18em;text-transform:uppercase; } body.lost-brand .eael-product-grid .star-rating, body.lost-brand .eael-product-grid .eael-onsale{display:none !important} /* the branded tubes were paying for a scrim tuned to the old plain image; open the right-hand side so the printed mark actually reads */ body.lost-brand .ls-drophead::before{ background:linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.74) 44%, rgba(0,0,0,.22) 100%), linear-gradient(180deg,rgba(0,0,0,.55),transparent 32%,rgba(0,0,0,.8)); } /* stacked on one column, the first-child and last-child gutter trims left the three steps on three different left edges */ @media (max-width:767px){ .ls-step:first-child, .ls-step:last-child{padding-inline:0} } @media (max-width:767px){ .ls-step{padding-inline:0 !important} } /* The tube shot was too literal and, once blurred, plain bad. This is the same idea told sideways: a wall thick with layers of torn poster paper, and one clean taped rectangle where the last print was peeled off. A drop was here. It is not here now. Sharp, not blurred: the recession comes from the scrim. Mirrored from the generated frame so the red overspray lands on the empty right half instead of under the headline. Upscaled 2x, 1800 x 900. */ body.lost-brand .ls-drophead::before{ background: linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 40%, rgba(0,0,0,.35) 72%,rgba(0,0,0,.2) 100%), linear-gradient(180deg,rgba(0,0,0,.5),transparent 34%,rgba(0,0,0,.86)); } /* a 2:1 plate cropped to a phone loses its right-hand third, which is where the red overspray lives, so the band went colourless. Shift the crop right. */ @media (max-width:767px){ body.lost-brand .ls-drophead{background-position:78% center} } /* ===================================================================== THE COUNTDOWN, AND WHERE ITS RED IS ALLOWED Red on a timer is decoration unless it carries information, and six days out a red timer is crying wolf. So it carries three: a live pulse beside the label, once a second, like a record light a depletion hairline under the readout, measured against the drop's whole window and not against page load, so it reads the same on every visit escalation inside the last 24 hours, when the digits themselves turn red. That is the one screen where two reds are the message. ===================================================================== */ /* 1. the live pulse */ body.lost-brand .ls-drop .ls-count-label{ display:flex;align-items:center;justify-content:center;gap:.7em; } body.lost-brand .ls-drop .ls-count-label::before{ content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%; background:var(--red); animation:lsPulse 1s steps(1,end) infinite; } @keyframes lsPulse{0%,55%{opacity:1}56%,100%{opacity:.16}} /* 2. the depletion hairline */ .ls-meter{ width:100%;max-width:100%;height:2px;margin-top:-1px; background:rgba(242,240,236,.1);overflow:hidden; } .ls-meter span{ display:block;height:100%;background:var(--red); transform-origin:0 50%;transform:scaleX(1); transition:transform 1s linear; } /* the meter is the width of the readout, so it sits inside the same box */ body.lost-brand .ls-drop .eael-countdown-container{ display:inline-block;width:max-content;max-width:100%; } body.lost-brand .ls-drop .eael-countdown-items{border-bottom:0} /* 3. escalation, only inside the last day */ body.lost-brand .ls-drop.ls-urgent .eael-countdown-digits{color:var(--red) !important} body.lost-brand .ls-drop.ls-urgent .eael-countdown-items{ border-color:rgba(199,28,0,.55); background:rgba(199,28,0,.06); } body.lost-brand .ls-drop.ls-urgent .eael-countdown-item{border-left-color:rgba(199,28,0,.35)} body.lost-brand .ls-drop.ls-urgent .ls-meter{height:3px} body.lost-brand .ls-drop.ls-urgent .ls-count-label{color:var(--p)} /* when the clock is the loudest thing on the screen the button steps back to paper, so there is still exactly one red field being asked for */ body.lost-brand .ls-drop.ls-urgent .btn{ background:var(--p) !important;color:var(--ink) !important; } body.lost-brand .ls-drop.ls-urgent .btn:hover{ background:var(--red) !important;color:var(--p) !important; } @media (prefers-reduced-motion:reduce){ body.lost-brand .ls-drop .ls-count-label::before{animation:none} .ls-meter span{transition:none} } /* wrapping the readout in an inline-block so the meter could match its width also re-shrank it on phones, where it is meant to fill the row */ @media (max-width:767px){ body.lost-brand .ls-drop .eael-countdown-container{ display:block;width:100% !important;max-width:100% !important; } }