/** Shopify CDN: Minification failed Line 27:2 Expected identifier but found "12" Line 28:0 Expected identifier but found "13" Line 35:0 Unexpected "20" Line 37:0 Expected identifier but found "22" Line 38:0 Expected identifier but found "23" Line 39:0 Expected identifier but found "24" Line 40:0 Expected identifier but found "25" Line 41:0 Expected identifier but found "26" Line 42:0 Expected identifier but found "27" Line 43:0 Expected identifier but found "28" ... and 1 more hidden warnings **/ /* White Lemon section restyles. Source: Figma "White Lemon Asset Board" page-home (node 2909:181). Loaded after base.css and whitelemon-tokens.css. NOTE: Dawn loads per-section component CSS in the , AFTER this file, so equal-specificity rules there win on source order. Every override here is prefixed with :root to take one extra level of specificity. */ /* --- Announcement bar (Figma 2909:183: cream, DM Sans 18, 16px block padding) --- */ :root .announcement-bar .announcement-bar__message { font-size: 1.3rem; 12 padding: 0 !important; 13 line-height: 1.2; text-align: center !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; } 20 :root .announcement-bar, 21 :root .announcement-bar__link { 22 width: 100% !important; 23 max-width: none !important; 24 min-height: 36px !important; 25 display: flex !important; 26 align-items: center !important; 27 justify-content: center !important; 28 text-align: center !important; 29 } /* --- Header (Figma 2910:1023: wordmark row over nav row, white, 32px rhythm) --- */ :root .header__heading-link .h2 { font-family: var(--font-heading-family); font-weight: 400; font-size: clamp(2.4rem, 1.8rem + 1.2vw, 3.6rem); letter-spacing: 0.07em; text-transform: uppercase; color: rgb(var(--color-foreground)); } /* Keep the wordmark on one line in the mobile header (Figma 2912:1072) */ @media screen and (max-width: 749px) { :root .header__heading-link .h2 { font-size: 2rem; white-space: nowrap; letter-spacing: 0.05em; } } :root .header__menu-item { font-size: 1.8rem; } :root .header__menu-item:hover span, :root .header__active-menu-item { color: #f3836f; text-decoration: none; } /* --- Buttons (Figma button spec: DM Sans Bold 18, uppercase, 24/16 padding) --- */ :root .button { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; font-size: 1.8rem; padding-inline: 2.4rem; } /* --- Hero banner (Figma 2909:204: 700px tall, copy centered) --- */ :root .banner--large:not(.banner--adapt) { min-height: 70rem; } @media screen and (max-width: 749px) { :root .banner--large:not(.banner--adapt) { min-height: 70rem; } } :root .banner__heading { font-weight: 500; } /* Scalloped awning edge hanging over a banner's top (Figma vector 2916:2279: 70px pitch, 35px drop, white). Enabled per-banner via the section's "Scalloped top edge" setting. */ :root .banner--wl-scallop::before { content: ""; /* Dawn's section-image-banner.css sets `.banner::before { display: none !important }` on mobile (it uses ::before as a desktop-only overlay); the scallop must survive that. */ display: block !important; position: absolute; top: 0; left: 0; right: 0; height: 35px; background: repeating-linear-gradient( 90deg, #ffffff 0 70px, #fff7f5 70px 140px ); -webkit-mask: radial-gradient( circle at 35px 0, #000 35px, transparent 35.5px ) 0 0 / 70px 35px repeat-x; mask: radial-gradient( circle at 35px 0, #000 35px, transparent 35.5px ) 0 0 / 70px 35px repeat-x; z-index: 2; pointer-events: none; } /* --- Section titles (Figma: DM Sans SemiBold 32, TC-B) --- */ :root .collection__title .title, :root .collection-list-wrapper .title, :root .multicolumn .title { font-family: var(--font-body-family); font-weight: 600; font-size: clamp(2.4rem, 2rem + 0.8vw, 3.2rem); color: var(--wl-color-text-muted); } /* --- Shop By Collection (Figma 2909:296: circular tiles, centered names) --- */ :root .collection-list-wrapper .title-wrapper-with-link { justify-content: center; } :root ul.collection-list .card--standard .card__inner, :root ul.collection-list .card--standard .card__inner:after, :root ul.collection-list .card--standard .card__inner .card__media { border-radius: 50%; } :root ul.collection-list .card__content { padding-inline: 0; } :root ul.collection-list .card__heading { font-family: var(--font-body-family); font-weight: 600; font-size: clamp(1.8rem, 1.6rem + 0.4vw, 2.4rem); color: var(--wl-color-text-muted); text-align: center; } :root ul.collection-list .card__heading .icon-wrap { display: none; } /* --- Full-bleed collection banner (Figma 2912:1531: copy left, image right) --- */ :root .wl-full-bleed .page-width { max-width: 100%; padding-inline: 0; } :root .wl-full-bleed .image-with-text__media--medium { min-height: 50rem; } :root .wl-full-bleed .image-with-text__content { padding-inline-start: clamp(1.6rem, 7vw, 12rem); padding-inline-end: clamp(1.6rem, 3vw, 4.8rem); } :root .wl-full-bleed .image-with-text__heading { font-weight: 500; } /* --- Featured collection product cards (Figma 2912:1572) --- */ :root .card--product .card__heading, :root .contains-card--product .card__heading { font-family: var(--font-body-family); font-weight: 400; font-size: clamp(1.6rem, 1.4rem + 0.4vw, 2.4rem); color: var(--wl-color-text-muted); } :root .price { font-weight: 600; font-size: clamp(1.4rem, 1.3rem + 0.3vw, 1.8rem); color: var(--wl-color-text-muted); } /* "Shop all ⟶" link, coral, left under the grid */ :root .collection .center:has(> .link.underlined-link) { text-align: left; } :root .collection .link.underlined-link { color: var(--wl-color-primary); font-weight: 600; font-size: 1.8rem; text-decoration: none; text-underline-offset: 0.4rem; } :root .collection .link.underlined-link:hover { color: var(--wl-color-primary-hover); text-decoration: underline; } /* --- Newsletter / signup (Figma 2912:1730: striped ground, coral serif heading, stacked full-width field + yellow button) --- */ :root .newsletter__wrapper.color-scheme-7 { background-image: repeating-linear-gradient( 90deg, #f9f0f0 0, #f9f0f0 52px, #fbf4f4 52px, #fbf4f4 104px ); } :root .newsletter__wrapper > .h1, :root .newsletter__wrapper h2.h1 { font-family: var(--font-heading-family); font-weight: 500; color: var(--wl-color-text-heading-alt); } :root .newsletter__wrapper .newsletter__subheading, :root .newsletter__wrapper .rte:last-child { font-size: 1.1rem; color: var(--wl-color-text-muted); } :root .newsletter-form__field-wrapper { max-width: 72rem; } :root .newsletter-form__field-wrapper .field { flex-direction: column; gap: 1.6rem; } :root .newsletter-form__field-wrapper .field__input { background: #ffffff; text-align: center; border: none; } :root .newsletter-form__field-wrapper .field__label { left: 50%; transform: translateX(-50%); } :root .newsletter-form__field-wrapper .field__input:focus ~ .field__label, :root .newsletter-form__field-wrapper .field__input:not(:placeholder-shown) ~ .field__label { transform: translateX(-50%) scale(0.5); } /* Must outrank component-newsletter.css `.newsletter-form__button:not(:focus-visible):not(.focused)` (0,3,0). */ :root .newsletter-form__button.field__button, :root .newsletter-form__button.field__button:not(:focus-visible):not(.focused) { position: static; width: 100%; height: 5.2rem; background: var(--wl-color-secondary); background-color: var(--wl-color-secondary); color: var(--wl-color-text-heading); font-family: var(--font-body-family); font-weight: 700; font-size: 1.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 0.4rem; cursor: pointer; } :root .newsletter-form__button.field__button:hover, :root .newsletter-form__button.field__button:hover:not(:focus-visible):not(.focused) { background: var(--wl-color-secondary-hover); background-color: var(--wl-color-secondary-hover); } /* --- Collection page (Figma 2917:2424) --- */ /* Centered collection title, DM Sans SemiBold 32, TC-B */ :root .collection-hero__title { font-family: var(--font-body-family); font-weight: 600; font-size: clamp(2.4rem, 2rem + 0.8vw, 3.2rem); color: var(--wl-color-text-muted); text-align: center; width: 100%; } :root .collection-hero__inner { justify-content: center; } /* Coral "VIEW MORE ⟶" under the grid (2917:2463) */ :root .wl-view-more { margin-top: 3.2rem; } :root .wl-view-more__link { color: var(--wl-color-primary); font-weight: 600; font-size: 1.8rem; text-transform: uppercase; text-decoration: none; } :root .wl-view-more__link:hover { color: var(--wl-color-primary-hover); text-decoration: underline; } /* WL badge pills (2917:2433): New Arrival coral, Sale yellow, both tiny pills top-right of the card image */ :root .card__badge .badge { font-family: var(--font-body-family); font-weight: 500; font-size: 1.1rem; padding: 0.3rem 0.9rem; border-radius: 0.2rem; letter-spacing: 0; } :root .card__badge .wl-badge--new { background: #fdebe7; border: 0.5px solid #f48975; color: #f06147; } /* Sale badge in the design system's yellow pill ("Going Fast!" style) */ :root .card__badge .badge.color-scheme-4 { background: #fcf9e8; border: 0.5px solid #f5e9ad; color: #bfa317; } /* --- Product page (Figma 2917:3429 / info column 2918:3873) --- */ /* Title: DM Sans SemiBold 32, TC-B */ :root .product__title > h1, :root .product__title > h2 { font-family: var(--font-body-family); font-weight: 600; font-size: clamp(2.4rem, 2rem + 0.8vw, 3.2rem); color: var(--wl-color-text-muted); } /* Price: DM Sans SemiBold 24 */ :root .product .price .price-item { font-family: var(--font-body-family); font-weight: 600; font-size: 2.4rem; color: var(--wl-color-text-muted); } /* "Info:" label above the description (Figma 2918:3882) */ :root .product__description::before { content: "Info:"; display: block; font-weight: 600; font-size: 2.4rem; color: var(--wl-color-text-muted); margin-bottom: 1rem; } :root .product__description, :root .product__description p { font-size: 1.8rem; color: #666666; } /* Collapsible "Size & Fit" heading matches the section labels */ :root .product__accordion .accordion__title { font-family: var(--font-body-family); font-weight: 600; font-size: 2.4rem; color: var(--wl-color-text-muted); } /* Option labels ("Size:", "Color:"): DM Sans SemiBold 24 */ :root .product-form__input .form__label { font-weight: 600; font-size: 2.4rem; color: var(--wl-color-text-muted); } :root .product-form__input .form__label::after { content: ":"; } /* Variant pills: near-square 0.5px #666 chips, selected fills cream (2918:3944) */ :root variant-selects .product-form__input--pill input[type='radio'] + label { border: 0.5px solid #666666; border-radius: 0.2rem; padding: 0.6rem 1.2rem; font-size: 1.8rem; color: #666666; background: transparent; } :root variant-selects .product-form__input--pill input[type='radio']:checked + label { background: var(--wl-color-bg-alt); color: #666666; } /* Quantity stepper: cream +/- cells, joined hairline borders (2918:3910) */ :root .product-form__quantity .form__label { font-weight: 600; font-size: 2.4rem; color: var(--wl-color-text-muted); } :root .product .quantity { border: 0.5px solid #666666; border-radius: 0.2rem; min-height: 3.6rem; } :root .product .quantity__button { background: var(--wl-color-bg-alt); color: #666666; } :root .product .quantity__input { color: #666666; font-size: 1.8rem; } :root .product .quantity:after, :root .product .quantity:before { display: none; } /* Buy button: coral, DM Sans Bold 18 caps, 300px, radius 3 (2918:3963) */ :root .product-form__submit { min-width: 30rem; max-width: 30rem; } /* Thumbnails under the main image (2918:3975): 2:3, hairline frames */ :root .thumbnail-list .thumbnail { border: 0.5px solid rgba(102, 102, 102, 0.4); border-radius: 0.2rem; } :root .thumbnail-list .thumbnail[aria-current='true'] { border: 1px solid #666666; box-shadow: none; } /* Related products: centered "You might like these" title (2918:4270) */ :root .related-products .title-wrapper .title, :root .related-products > .title { font-family: var(--font-body-family); font-weight: 600; font-size: clamp(2.4rem, 2rem + 0.8vw, 3.2rem); color: var(--wl-color-text-muted); text-align: center; width: 100%; } /* --- Footer (Figma 2909:557: cream, brand column + link columns) --- */ :root .footer .footer-block__heading { font-family: var(--font-body-family); font-weight: 500; font-size: 1.8rem; color: var(--wl-color-text-heading); } :root .footer-block--menu .footer-block__details-content .list-menu__item--link, :root .footer .footer-block__details-content.rte { color: var(--wl-color-text-muted); font-size: 1.8rem; } /* Brand column tagline in the serif, per the comp */ :root .footer__blocks-wrapper .footer-block:first-child .footer-block__details-content p { font-family: var(--font-heading-family); font-weight: 600; font-size: 2.1rem; color: var(--wl-color-text-muted); } /* --- Larger White Lemon header logo --- */ .header__heading-logo { width: 440px !important; max-width: 440px !important; }.header { padding-top: 8px !important; padding-bottom: 0 !important; } .header__heading { margin-bottom: -5px !important; } @media screen and (max-width: 749px) { .header { min-height: auto !important; padding-top: 10px !important; padding-bottom: 4px !important; grid-template-areas: "heading heading heading heading" "drawer search spacer icons" !important; grid-template-columns: auto auto 1fr auto !important; grid-template-rows: auto auto !important; column-gap: 4px; row-gap: 0; } .header__heading { grid-area: heading !important; justify-self: center; margin: 5 !important; } .header__heading-link { transform: none !important; padding: 0 !important; } header-drawer { grid-area: drawer !important; } .header__search { grid-area: search !important; } .header__icons { grid-area: icons !important; justify-self: end; } } /* Disable the old banner-generated scallop */ :root .banner--wl-scallop::before { display: none !important; } /* White Lemon striped awning */ .header { position: relative; overflow: visible !important; } .header::after { content: ""; position: absolute; left: 50%; right: auto; width: 100vw; transform: translateX(-50%); bottom: -22px; height: 22px; z-index: 10; pointer-events: none; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.08)); background: radial-gradient( ellipse 35px 22px at 35px 0, #ffffff 0 99%, transparent 100% ) 0 0 / 140px 22px repeat-x, radial-gradient( ellipse 35px 22px at 35px 0, #fff7f5 0 99%, transparent 100% ) 70px 0 / 140px 22px repeat-x; } .slideshow__text.banner__box:not(:has(*)) { display: none !important; } /* Solid white slideshow button */ .slideshow .banner__buttons .button { background: #ffffff !important; color: #333333 !important; opacity: 1 !important; border: none !important; } .slideshow .banner__buttons .button::after, .slideshow .banner__buttons .button::before { box-shadow: none !important; border: none !important; } .slideshow .banner__buttons .button::after, .slideshow .banner__buttons .button::before { box-shadow: none !important; border: none !important; }/* Slideshow button styling */ .slideshow .banner__buttons .button { font-family: var(--font-body-family) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; padding: 0 24px !important; min-height: 46px !important; } /* Slideshow button styling */ .slideshow .banner__buttons .button { font-family: var(--font-body-family) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.11em !important; background: #f48674 !important; color: #ffffff !important; padding: 0 26px !important; min-height: 44px !important; border-radius: 4px !important; }