/* Cozy pop skin (inc/skin.php): loaded after theme.css only when the skin is on, so the classic design is untouched. Pastels (butter, sky, blush), one cherry accent, chocolate ink, Fredoka for every headline and button, die-cut photo stickers in the hero and feature. */ /* Fredoka (OFL), self-hosted, variable 400–700. No italic: accents are coloured, not slanted. */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/fredoka-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .skin-cozy { --ink: #2b1b17; --ink-2: #4b3832; /* 4.9:1 on blush, 5.1 on sky, 5.5 on butter, 6.4 on cream (was #806c63: 3.6 on blush). */ --muted: #6b5850; --line: #f1e2c2; --line-strong: #e6d0a5; --soft: #fff3d1; --card: #ffeab0; /* Cherry for display accents, buttons, stickers and fills (large type: 3:1 is enough). */ --accent: #d7263d; /* Darker cherry for small cherry text on the pastels (5:1 on blush, 5.3 on sky, 5.6 on butter). */ --accent-ink: #b01c31; /* Sale prices, errors and savings are small text: they use the darker cherry. */ --sale: #b01c31; --white: #fff; --cream: #fffaf0; --butter: #ffe7a3; --sky: #cfe4f7; --blush: #f9d3dc; --serif: "Fredoka", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif; --radius: 20px; background: var(--cream); } /* ---------- Type: rounded, heavier, accents in cherry (never slanted) ---------- */ .skin-cozy :is(.display-1, .display-2, .display-3, .pdp__title, .maison__content h2, .hero__title, .feature .display-1, .lookbook__title, .manifesto__text, .footer-news__title, .footer-brand__statement, .tiles--editorial .tile__label, .univers-empty) { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .skin-cozy :is(.display-1, .display-2, .display-3, .lookbook__title, .manifesto__text, .hero__title, .feature, .footer-news__title) em { font-style: normal; color: var(--accent); } .skin-cozy .footer-news__title em { color: var(--butter); } .skin-cozy .eyebrow { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); } /* ---------- Buttons and pills ---------- */ .skin-cozy :is(.btn, .button, .woocommerce-mini-cart__buttons a, button.single_add_to_cart_button) { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .005em; min-height: 46px; padding: 0 22px; } .skin-cozy :is(.btn--dark, .button, .woocommerce-mini-cart__buttons a.checkout, button.single_add_to_cart_button) { background: var(--ink); color: var(--cream); } .skin-cozy :is(.btn--dark, .button, .woocommerce-mini-cart__buttons a.checkout, button.single_add_to_cart_button):hover { background: var(--accent); } .skin-cozy .btn--light { background: var(--white); color: var(--ink); } .skin-cozy .btn--light:hover { background: var(--ink); color: var(--cream); } .skin-cozy .btn--outline { background: transparent; border: 2px solid var(--ink); } .skin-cozy .btn--outline:hover { background: var(--ink); color: var(--cream); } /* ---------- Announcement + header ---------- */ .skin-cozy .announcement { background: var(--accent); font-family: var(--serif); font-size: 13px; font-weight: 500; letter-spacing: .01em; } .skin-cozy .site-header__bar { border-radius: 999px; padding: 0 12px; background: rgba(255, 250, 240, .94); box-shadow: 0 6px 24px rgba(43, 27, 23, .08); } .skin-cozy.has-overlay-header .site-header:not(.is-scrolled):not(.is-open) .site-header__bar { background: rgba(255, 250, 240, .7); } /* ---------- Hero: pastel slides, sticker duos, text on top (phones/tablets) or left (desktop) ---------- */ .skin-cozy .hero { color: var(--ink); background: var(--butter); } .skin-cozy .hero__slide::after { content: none; } .skin-cozy .hero__slide:nth-child(3n+1) { background: var(--butter); --blob: var(--blush); } .skin-cozy .hero__slide:nth-child(3n+2) { background: var(--sky); --blob: var(--butter); } .skin-cozy .hero__slide:nth-child(3n+3) { background: var(--blush); --blob: var(--sky); } .skin-cozy .hero__media { top: max(46%, 330px); } .skin-cozy .hero__media::before { content: ""; position: absolute; left: 50%; bottom: -14%; z-index: 0; width: min(118vw, 150%); aspect-ratio: 1; border-radius: 50%; background: var(--blob); opacity: .9; transform: translateX(-50%); } .skin-cozy .hero__img { position: relative; z-index: 1; object-fit: contain; object-position: 50% 100%; } .skin-cozy .hero__media--1 .hero__img { object-position: 50% 100%; } .skin-cozy .hero__content { top: calc(var(--header-h) + 18px); bottom: auto; padding-bottom: 0; display: flex; flex-direction: column; align-items: flex-start; } .skin-cozy .hero__kicker { margin-bottom: 14px; padding: 6px 14px 5px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; text-shadow: none; transform: rotate(-3deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .12); } .skin-cozy .hero__title { font-size: 46px; line-height: .98; text-shadow: none; } .skin-cozy .hero__subtitle { margin-top: 10px; max-width: 30ch; font-size: 17px; color: var(--ink-2); opacity: 1; } .skin-cozy .hero .btn { margin-top: 18px; background: var(--ink); color: var(--cream); } .skin-cozy .hero .btn:hover { background: var(--accent); } .skin-cozy .hero__dot span { background: rgba(43, 27, 23, .22); } .skin-cozy .hero__dot span::after { background: var(--ink); } .skin-cozy :is(.hero__pause, .hero__arrows button) { color: var(--ink); } .skin-cozy :is(.hero__pause, .hero__arrows) { background: rgba(255, 250, 240, .75); } @media (min-width: 768px) { .skin-cozy .hero__media { top: 40%; } .skin-cozy .hero__media::before { width: 70%; bottom: -30%; } .skin-cozy .hero__title { font-size: 68px; } .skin-cozy .hero__subtitle { font-size: 20px; } } @media (min-width: 1024px) { .skin-cozy .hero__content { top: var(--header-h); bottom: 0; justify-content: center; max-width: 46%; } .skin-cozy .hero__media { top: calc(var(--header-h) + 24px); left: 44%; } .skin-cozy .hero__media::before { width: 82%; bottom: -26%; } .skin-cozy .hero__kicker { font-size: 17px; padding: 7px 18px 6px; } .skin-cozy .hero__title { font-size: clamp(72px, 6.6vw, 108px); line-height: .95; } .skin-cozy .hero__subtitle { margin-top: 18px; font-size: 24px; } .skin-cozy .hero .btn { margin-top: 32px; min-height: 52px; padding: 0 28px; font-size: 16px; } } /* ---------- Strip under the hero ---------- */ .skin-cozy .marquee { background: var(--accent); color: var(--white); } .skin-cozy .marquee__group li { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: 18px; } .skin-cozy .marquee__group li::after { content: "♥"; font-size: 13px; color: var(--butter); } @media (min-width: 1024px) { .skin-cozy .marquee__group li { font-size: 22px; } } /* ---------- New-in carousel and cards ---------- */ .skin-cozy .univers-tabs__btn { border: 0; background: var(--soft); font-family: var(--serif); font-weight: 600; font-size: 15px; } .skin-cozy .univers-tabs__btn:hover { background: var(--card); } .skin-cozy .univers-tabs__btn[aria-pressed="true"] { background: var(--accent); color: var(--white); } .skin-cozy .product-card__media { border-radius: var(--radius); overflow: hidden; } .skin-cozy .product-card__info { font-family: var(--serif); } .skin-cozy .badge { border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-weight: 600; transform: rotate(-4deg); } .skin-cozy .badge--muted { background: var(--ink); } /* ---------- Brand line + univers on sky blue ---------- */ .skin-cozy :is(.manifesto, .section--univers) { background: var(--sky); } .skin-cozy .manifesto__mark { font-size: 0; } .skin-cozy .manifesto__mark::before { content: "🧶"; font-size: 34px; } .skin-cozy .manifesto__sign { font-family: var(--serif); letter-spacing: .12em; color: var(--ink-2); } .skin-cozy .tile__media { border-radius: 24px; } .skin-cozy .tiles--editorial .tile__label { border-bottom: 0; font-size: 32px; } .skin-cozy .tiles--colours .tile__label { font-size: 22px; } @media (min-width: 1024px) { .skin-cozy .tiles--colours .tile__label { font-size: 28px; } } .skin-cozy .tiles--editorial .tile__note { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--serif); font-weight: 600; opacity: 1; } /* ---------- Feature: blush, sticker duo under (phones) / beside (desktop) the text ---------- */ .skin-cozy .feature { background: var(--blush); color: var(--ink); } .skin-cozy .feature::after { content: none; } .skin-cozy .feature__img { inset: auto 0 0 0; height: 52%; object-fit: contain; object-position: 50% 100%; } @media (max-width: 767px) { .skin-cozy .feature .btn-row { flex-wrap: nowrap; gap: 10px; } .skin-cozy .feature .btn { padding: 0 14px; font-size: 14px; } } .skin-cozy .feature__text { color: var(--ink-2); } .skin-cozy .feature .btn { background: var(--ink); color: var(--cream); } .skin-cozy .feature .btn + .btn { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .skin-cozy .feature .btn:hover { background: var(--accent); color: var(--white); border-color: var(--accent); } @media (min-width: 1024px) { .skin-cozy .feature__img { inset: auto auto 0 46%; width: 52%; height: 90%; } } /* ---------- Lookbook, craft, colours, FAQ ---------- */ .skin-cozy :is(.look__link, .look img, .craft__media, .craft__inset) { border-radius: var(--radius); overflow: hidden; } .skin-cozy .craft { background: var(--soft); } .skin-cozy .craft__list span { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--accent); color: var(--white); font-family: var(--serif); font-weight: 600; } .skin-cozy .craft__list h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; } .skin-cozy .home-faq { background: var(--butter); } .skin-cozy .home-faq .accordion__item summary { font-family: var(--serif); font-weight: 500; } /* ---------- Footer: cherry with a butter wordmark ---------- */ .skin-cozy .site-footer { background: var(--accent); } /* The FILAGO logo stays black everywhere (owner, 2026-10-30): header image and footer wordmark. */ .skin-cozy .site-footer .footer-mark { color: #140f0f; } .skin-cozy .footer-brand__statement { font-weight: 500; } /* ---------- Product page ---------- */ .skin-cozy .pdp__title { font-weight: 600; } .skin-cozy :is(.pdp__gallery img, .pdp-gallery img) { border-radius: var(--radius); } .skin-cozy :is(#utopia-fast-checkout > h3, .ufc-ty-greeting, .ufc-ty-card-header h3) { font-weight: 600; } /* ===================================================================== Pass 2 (2026-10-30): every page, drawer and widget in Cozy pop. ===================================================================== */ /* Univers pastel: Femme blush, Homme sky, Enfant butter. Focus rings in cherry. */ .skin-cozy { --univers: var(--butter); --focus: var(--accent); } .skin-cozy.univers-femme { --univers: var(--blush); } .skin-cozy.univers-homme { --univers: var(--sky); } .skin-cozy.univers-enfant { --univers: var(--butter); } /* Pressable primary buttons (a soft "key" shadow), little lift on hover. */ .skin-cozy :is(.btn--dark, .button.alt, button.single_add_to_cart_button, .hero .btn, .feature .btn:first-child) { box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy :is(.btn--dark, .button.alt, button.single_add_to_cart_button, .hero .btn, .feature .btn:first-child):active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } /* Section titles: the accent word gets a soft wavy underline. */ .skin-cozy .display-2 em { text-decoration: underline wavy rgba(215, 38, 61, .38); text-decoration-thickness: .06em; text-underline-offset: .16em; text-decoration-skip-ink: none; } /* Fields: rounded, cream, cherry focus. The footer newsletter keeps its underline field. */ .skin-cozy :is(.field input, .field textarea, .woocommerce form .input-text, .woocommerce form select, .select2-container--default .select2-selection--single, .search-panel input, .auth input.input-text, .woocommerce .cart-coupon .coupon input.input-text) { border-radius: 14px; } .skin-cozy :is(.field input, .field textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .skin-cozy :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus { outline: none; } /* Notices: sky bubble with a check, errors in blush. */ .skin-cozy :is(.woocommerce-message, .woocommerce-info) { border-radius: 20px; background: var(--sky); border: 0; font-family: var(--serif); font-size: 15px; font-weight: 500; } .skin-cozy .woocommerce-message::before { content: "✓"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--white); color: var(--accent); font-weight: 700; } .skin-cozy .woocommerce-error { border-radius: 20px; background: var(--blush); color: #8a1020; } /* ---------- Shop / category: a pastel band per univers, count as a sticker ---------- */ .skin-cozy .plp { padding-top: 8px; } .skin-cozy .plp__header { position: relative; margin: 0 0 16px; padding: 16px 20px 24px; border-radius: 28px; background: var(--univers); } .skin-cozy .plp__toolbar { background: rgba(255, 250, 240, .96); } .skin-cozy .plp__title { font-size: 46px; line-height: .98; } .skin-cozy .plp__eyebrow { margin-bottom: 4px; } .skin-cozy .plp__count { display: inline-block; margin-left: 10px; padding: 4px 11px 3px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.2; vertical-align: .55em; transform: rotate(-6deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .14); } .skin-cozy .plp__paren { display: none; } .skin-cozy .plp__desc { color: var(--ink-2); } .skin-cozy .plp__banner { border-radius: 24px; } .skin-cozy .plp__filter-btn { border-width: 2px; } .skin-cozy .filters__group summary { font-family: var(--serif); font-weight: 600; font-size: 17px; } .skin-cozy .filter-opt:hover, .skin-cozy .filter-opt.is-active { color: var(--accent); } .skin-cozy .filter-opt.is-active .swatch-dot { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--accent); } .skin-cozy .chip { border-radius: 999px; background: var(--card); font-family: var(--serif); font-weight: 500; } .skin-cozy .plp__empty { align-items: center; text-align: center; margin-top: 8px; padding: 40px 24px 36px; border-radius: 32px; background: var(--univers); } .skin-cozy .plp__empty::before { content: "🧶"; font-size: 54px; line-height: 1; } .skin-cozy.univers-enfant .plp__empty::before { content: "🧸"; } .skin-cozy .plp__empty > p, .skin-cozy .plp__empty .lead { max-width: 28ch; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; } @media (min-width: 1024px) { .skin-cozy .plp__header { margin: 0 0 32px; padding: 28px 40px 36px; border-radius: 32px; } .skin-cozy .plp__title { font-size: 72px; } } /* Card hover: a little lift and tilt, like picking up a sticker. */ @media (hover: hover) { .skin-cozy .product-card__media { transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .skin-cozy .product-card:hover .product-card__media { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 28px rgba(43, 27, 23, .12); } } /* ---------- Product page ---------- */ .skin-cozy .pdp__price { font-family: var(--serif); font-size: 24px; font-weight: 600; } .skin-cozy .variations_form .variations th, .skin-cozy .variations_form .variations th label { font-family: var(--serif); font-weight: 600; font-size: 15px; } .skin-cozy .opt { border: 2px solid var(--line-strong); border-radius: 999px; background: var(--white); font-family: var(--serif); font-weight: 500; } .skin-cozy .opt:hover { border-color: var(--ink); } .skin-cozy .opt[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); } .skin-cozy .packs__title { font-family: var(--serif); font-size: 16px; font-weight: 600; } .skin-cozy .pack { border: 2px solid var(--line-strong); border-radius: 20px; } .skin-cozy .pack:hover { border-color: var(--ink); } .skin-cozy .pack.is-active { border-color: var(--accent); background: var(--soft); box-shadow: 0 4px 0 rgba(215, 38, 61, .16); } .skin-cozy .pack__badge { top: -11px; right: 14px; padding: 4px 11px; border-radius: 999px; background: var(--ink); font-family: var(--serif); font-size: 12px; font-weight: 600; transform: rotate(3deg); } .skin-cozy .pack--best .pack__badge { background: var(--accent); } .skin-cozy .accordion__item summary { font-family: var(--serif); font-weight: 600; } .skin-cozy .buybar { border-radius: 24px 24px 0 0; background: rgba(255, 250, 240, .97); box-shadow: 0 -8px 24px rgba(43, 27, 23, .1); } .skin-cozy .buybar__img { border-radius: 10px; } .skin-cozy .buybar__title { font-family: var(--serif); font-weight: 600; } @media (min-width: 1024px) { .skin-cozy :is(.pdp__slide, .pdp__thumb) { border-radius: 24px; overflow: hidden; } .skin-cozy .pdp__thumb { border-radius: 12px; } } /* ---------- Cart, checkout, order received ---------- */ .skin-cozy :is(form.checkout h3, #order_review_heading, .woocommerce-order h2, .cart-summary__title) { font-weight: 600; } /* ---------- Account ---------- */ .skin-cozy .auth__media { border-radius: 28px; } /* ---------- Contact: pastel cards ---------- */ .skin-cozy .way { border-radius: 22px; } /* The butter / sky / blush cycle is in block 4g (each .way is the only child of its
  • ). */ .skin-cozy :is(.contact__map, .contact__map iframe, .contact__media, .contact__media img) { border-radius: 28px; overflow: hidden; } /* ---------- La Maison: sticker title on the photo, pastel principles ---------- */ .skin-cozy .maison__hero-text .display-1 { display: inline-block; padding: 4px 20px 8px; border-radius: 22px; background: var(--cream); color: var(--ink); text-shadow: none; transform: rotate(-2deg); } .skin-cozy .maison__hero-text .eyebrow { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--accent); color: var(--white); text-shadow: none; transform: rotate(2deg); } .skin-cozy .principles > .wp-block-column { border-radius: 24px; } .skin-cozy .principles > .wp-block-column:nth-child(3n+1) { background: var(--butter); } .skin-cozy .principles > .wp-block-column:nth-child(3n+2) { background: var(--sky); } .skin-cozy .principles > .wp-block-column:nth-child(3n+3) { background: var(--blush); } .skin-cozy .principles h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; } /* ---------- 404, empty favourites ---------- */ .skin-cozy .empty-state { margin: 24px var(--gutter); padding: 48px 24px 40px; border-radius: 36px; background: var(--butter); } .skin-cozy .error404 .empty-state::before, .error404.skin-cozy .empty-state::before { content: "🧶"; font-size: 64px; line-height: 1; } .skin-cozy .favs__icon { background: var(--blush); color: var(--accent); } /* ---------- Drawers, search, mega menu, toasts, wheel ---------- */ .skin-cozy .drawer__panel { background: var(--cream); } .skin-cozy .drawer--left .drawer__panel { border-radius: 0 28px 28px 0; } .skin-cozy .drawer:not(.drawer--left) .drawer__panel { border-radius: 28px 0 0 28px; } .skin-cozy .drawer__title { font-family: var(--serif); font-weight: 600; } .skin-cozy :is(.mega__media, .mega__img) { border-radius: 18px; } .skin-cozy .proof { border-radius: 22px; background: var(--cream); } .skin-cozy .wheel__seg--ivory { fill: var(--butter); } .skin-cozy .wheel__seg--sand { fill: var(--sky); } .skin-cozy .wheel__seg--ink { fill: var(--accent); } .skin-cozy .wheel__seg--accent { fill: var(--ink); } .skin-cozy .wheel-fab:hover { background: var(--accent); } /* Pass 2 fixes */ .skin-cozy .plp__count:empty { display: none; } .skin-cozy .wheel__title { font-family: var(--serif); font-weight: 600; } .skin-cozy .wheel__title em { font-style: normal; } .skin-cozy .drawer__head { background: var(--butter); } .skin-cozy .quick__title { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } .skin-cozy .quick__price { font-family: var(--serif); font-weight: 600; font-size: 19px; } .skin-cozy .quick__media img { border-radius: 18px; } /* Univers tiles: the list item behind the rounded photo had a square sand background. */ .skin-cozy .tiles--editorial .tile { background: none; } /* ---------- Phone / tablet menu: full screen, one colour card per univers ---------- */ @media (max-width: 1023px) { .skin-cozy #drawer-nav .drawer__panel { width: 100%; border-radius: 0; background: var(--cream); } .skin-cozy #drawer-nav .drawer__head { background: transparent; border-bottom: 0; padding-top: 12px; } .skin-cozy #drawer-nav .drawer__head .hdr-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--cream); } .skin-cozy .drawer-nav { padding: 4px 16px 12px; overflow-x: hidden; } .skin-cozy .drawer-nav .nav__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .skin-cozy .drawer-nav .nav__list > li { border: 0; border-radius: 28px; } .skin-cozy .drawer-nav .nav__list > li > a { padding: 18px 22px 10px; font-family: var(--serif); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; } /* Nouveautés: a tilted cherry sticker. */ .skin-cozy .drawer-nav .nav__list > li:first-child { background: var(--accent); color: var(--white); transform: rotate(-1.5deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .14); } .skin-cozy .drawer-nav .nav__list > li:first-child > a { padding: 14px 22px; font-size: 26px; } .skin-cozy .drawer-nav .nav__list > li:first-child > a::after { content: "✨"; font-size: 22px; } .skin-cozy .drawer-nav .nav__list > li:nth-child(2) { background: var(--blush); } .skin-cozy .drawer-nav .nav__list > li:nth-child(3) { background: var(--sky); } .skin-cozy .drawer-nav .nav__list > li:nth-child(4) { background: var(--butter); } .skin-cozy .drawer-nav .nav__list > li:nth-child(n+5) > a { padding: 8px 6px; font-size: 26px; } .skin-cozy .drawer-nav .nav__list > li:nth-child(n+5) > a::after { content: "→"; font-size: 22px; } /* Each univers card: a swipeable row of category thumbnails. */ .skin-cozy .drawer-nav .sub-menu { display: flex; gap: 10px; overflow-x: auto; padding: 6px 22px 20px; scroll-snap-type: x mandatory; scroll-padding: 22px; scrollbar-width: none; } .skin-cozy .drawer-nav .sub-menu::-webkit-scrollbar { display: none; } .skin-cozy .drawer-nav .sub-menu > li { flex: 0 0 96px; scroll-snap-align: start; } .skin-cozy .drawer-nav .mega__card { display: grid; gap: 3px; padding: 0; color: var(--ink); } .skin-cozy .drawer-nav .mega__media { display: block; aspect-ratio: 4 / 5; margin-bottom: 4px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); } .skin-cozy .drawer-nav .mega__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .skin-cozy .drawer-nav .mega__label { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.1; } .skin-cozy .drawer-nav .mega__note { display: block; font-size: 12px; color: var(--ink-2); } .skin-cozy .drawer-nav .mega__card--soon .mega__img { filter: grayscale(.4); opacity: .7; } .skin-cozy .drawer-nav .mega__card--all { place-content: center; justify-items: center; gap: 6px; aspect-ratio: 4 / 5; border-radius: 18px; background: var(--white); font-family: var(--serif); font-weight: 600; } .skin-cozy .drawer-nav .mega__card--all .icon { display: block; } /* Account / cart / favourites as pills. */ .skin-cozy .drawer-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 0; } .skin-cozy .drawer-links a { gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); font-family: var(--serif); font-size: 15px; font-weight: 600; } @media (prefers-reduced-motion: no-preference) { .skin-cozy #drawer-nav.is-open .nav__list > li { animation: cozy-rise .55s var(--ease) both; } .skin-cozy #drawer-nav.is-open .nav__list > li:nth-child(2) { animation-delay: .06s; } .skin-cozy #drawer-nav.is-open .nav__list > li:nth-child(3) { animation-delay: .12s; } .skin-cozy #drawer-nav.is-open .nav__list > li:nth-child(4) { animation-delay: .18s; } .skin-cozy #drawer-nav.is-open .nav__list > li:nth-child(n+5) { animation-delay: .24s; } } } @keyframes cozy-rise { from { opacity: 0; transform: translateY(26px); } } .skin-cozy #drawer-nav .brand:focus:not(:focus-visible) { outline: none; } .skin-cozy #drawer-nav .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 12px; } /* ===================================================================== Roue de la chance in Cozy pop (wheel.css stays the classic look). ===================================================================== */ .skin-cozy { --wheel-confetti: #d7263d, #ffe7a3, #cfe4f7, #f9d3dc, #2b1b17, #ffffff, #ffd166; } /* Launcher: cherry with a cream ring; butter once a code is won. */ .skin-cozy .wheel-fab { background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 15px; font-weight: 600; box-shadow: 0 0 0 3px var(--cream), 0 4px 0 3px rgba(43, 27, 23, .18), 0 12px 26px rgba(43, 27, 23, .22); } .skin-cozy .wheel-fab:hover { background: var(--ink); } .skin-cozy .wheel-fab.is-won { background: var(--butter); color: var(--ink); } .skin-cozy .wheel-fab.is-won:hover { background: var(--card); } .skin-cozy .wheel-fab.is-won .wheel-fab__icon { color: var(--accent); } /* Dialog */ .skin-cozy .wheel__backdrop { background: rgba(43, 27, 23, .45); } .skin-cozy .wheel__panel { border-radius: 32px; background: var(--cream); box-shadow: 0 30px 80px rgba(43, 27, 23, .3); } .skin-cozy .wheel__tool { background: rgba(255, 255, 255, .7); } .skin-cozy .wheel__tool:hover { background: var(--white); } .skin-cozy .wheel__stage-wrap { border-radius: 32px 0 0 32px; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .9) 0 34%, rgba(255, 255, 255, 0) 34.4%), radial-gradient(circle, rgba(215, 38, 61, .22) 0 3.5px, transparent 4.5px) 0 0 / 54px 54px, radial-gradient(circle, rgba(255, 255, 255, .95) 0 4.5px, transparent 5.5px) 27px 27px / 54px 54px, radial-gradient(circle, #cfe4f7 0 4px, transparent 5px) 13px 40px / 54px 54px, var(--butter); } .skin-cozy .wheel__frame { filter: drop-shadow(0 18px 26px rgba(43, 27, 23, .22)); } /* Wheel drawing */ .skin-cozy .wheel__rim { fill: var(--ink); } .skin-cozy .wheel__edge { stroke: rgba(255, 250, 240, .95); stroke-width: 2; } .skin-cozy .wheel__txt { font-family: var(--serif); font-weight: 600; letter-spacing: 0; } .skin-cozy .wheel__txt--ship { font-size: 13px; } .skin-cozy .wheel__txt--ink, .skin-cozy .wheel__txt--accent { fill: var(--cream); } .skin-cozy .wheel__flash { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(215, 38, 61, .4)); } .skin-cozy .wheel__flash--dark { stroke: var(--butter); filter: drop-shadow(0 0 5px rgba(255, 231, 163, .9)); } .skin-cozy .wheel__hub-disc { fill: var(--cream); stroke: var(--ink); stroke-width: 1.5; } .skin-cozy .wheel__hub-line { stroke: var(--accent); stroke-width: 1; } .skin-cozy .wheel__hub-f { stroke: #140f0f; } .skin-cozy .wheel__bulb { fill: var(--butter); filter: drop-shadow(0 0 3px rgba(255, 231, 163, .95)); animation-name: cozy-bulb; } .skin-cozy .wheel.is-won .wheel__bulb { animation-name: cozy-bulb-win; } @keyframes cozy-bulb { 50% { fill: #6b4a3f; filter: none; } } @keyframes cozy-bulb-win { 50% { fill: var(--blush); } 75% { fill: var(--accent); } } .skin-cozy .wheel__pointer path { fill: var(--accent); stroke: var(--cream); stroke-width: 2.5; } .skin-cozy .wheel__pointer circle { fill: var(--cream); } .skin-cozy .wheel__legend { padding: 6px 14px; border-radius: 999px; background: var(--white); font-family: var(--serif); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ink); box-shadow: 0 3px 0 rgba(43, 27, 23, .08); } .skin-cozy .wheel__legend::before, .skin-cozy .wheel__legend::after { content: "♥"; width: auto; height: auto; background: none; color: var(--accent); font-size: 11px; } /* Text column */ .skin-cozy .wheel__kicker { align-self: flex-start; display: inline-block; margin-bottom: 16px; padding: 6px 14px 5px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; transform: rotate(-3deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .12); } .skin-cozy .wheel__title em { text-decoration: underline wavy rgba(215, 38, 61, .4); text-decoration-thickness: .06em; text-underline-offset: .16em; text-decoration-skip-ink: none; } .skin-cozy .wheel__label { font-family: var(--serif); font-weight: 600; color: var(--ink-2); } .skin-cozy .wheel__field { gap: 10px; padding: 4px 6px 4px 6px; border: 2px solid var(--line-strong); border-radius: 18px; background: var(--white); } .skin-cozy .wheel__field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215, 38, 61, .14); } .skin-cozy .wheel__field:has(input[aria-invalid="true"]) { border-color: var(--sale); } .skin-cozy .wheel__prefix { padding: 8px 10px; border-radius: 12px; background: var(--butter); font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); } .skin-cozy .wheel__field input { height: 44px; font-family: var(--serif); font-weight: 500; } /* The classic sand placeholder was 1.5:1 on the white field; same muted brown as the footer newsletter. */ .skin-cozy .wheel__field input::placeholder { color: var(--muted); opacity: 1; } .skin-cozy .wheel :is(.wheel__spin, .wheel__cta).btn { background: var(--accent); color: var(--white); font-size: 16px; box-shadow: 0 4px 0 #9b1527; } .skin-cozy .wheel :is(.wheel__spin, .wheel__cta).btn:hover { background: #c01f34; } .skin-cozy .wheel :is(.wheel__spin, .wheel__cta).btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #9b1527; } @media (hover: none) { .skin-cozy .wheel :is(.wheel__spin, .wheel__cta).btn:hover { background: var(--accent); } } /* After a win the other slices only soften (the dark rim made 62 % opacity look muddy on pastels). */ .skin-cozy .wheel__disc.has-win :is(.wheel__seg, .wheel__txt):not(.is-win) { opacity: .8; } .skin-cozy .wheel__code { border: 2px dashed var(--accent); border-radius: 20px; background: var(--butter); transform: rotate(-1deg); } .skin-cozy .wheel__code:hover { background: var(--card); } .skin-cozy .wheel__code-value { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: .08em; } .skin-cozy .wheel__code-copy { padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-weight: 600; letter-spacing: .04em; } .skin-cozy .wheel__code.is-copied { border-style: solid; } @media (max-width: 767px) { .skin-cozy .wheel__panel { border-radius: 28px 28px 0 0; } .skin-cozy .wheel__stage-wrap { border-radius: 28px 28px 0 0; } .skin-cozy .wheel__kicker { align-self: center; } .skin-cozy .wheel__body { align-items: center; } .skin-cozy .wheel__form { width: 100%; } .skin-cozy .wheel__field input { flex: 1 1 auto; } } /* ===================================================================== Pass 4 (2026-11-01): full audit at 8 widths + what Six Five / Asala have. One block per area; each area adds its rules inside its own block. ===================================================================== */ /* -- 4a global (tokens, header, footer, drawers, menu, launcher, focus) -- */ /* Small cherry text on pastels reads in --accent-ink; #d7263d stays for big accents and fills. */ .skin-cozy :is(.eyebrow, .cart-line__type, .stock.low-stock, .fc-wheel-note, .offer-timer em, .offer-timer.is-urgent .offer-timer__clock b, .woocommerce form .form-row .required, .wheel__error) { color: var(--accent-ink); } /* Body copy: no classic negative tracking; short blurbs end on balanced lines. The hero subtitle's final say is the 4b home block (a hair of tracking, text-wrap: pretty); this line is only its fallback. */ .skin-cozy :is(.hero__subtitle, .feature__text, .lead, .plp__desc, .pdp__short, .accordion__body, .footer-news__lead, .pack__name) { letter-spacing: 0; } .skin-cozy .feature__text { text-wrap: balance; } /* ---------- Focus: cherry ring, white on the cherry surfaces, rounded where the element has no shape ---------- */ .skin-cozy :is(.announcement, .marquee, .site-footer) { --focus: #fff; } :where(.skin-cozy a:focus-visible, .skin-cozy summary:focus-visible, .skin-cozy .footer-top:focus-visible) { border-radius: 10px; } .skin-cozy .site-header .brand { position: relative; } .skin-cozy .site-header .brand:focus-visible { outline: none; } .skin-cozy .site-header .brand:focus-visible::after { content: ""; position: absolute; inset: 6px -10px; border-radius: 999px; box-shadow: 0 0 0 2px var(--focus); pointer-events: none; } /* ---------- Fields: one soft cherry focus ring for every text field, select and selectWoo ---------- */ .skin-cozy :is(.field input, .field textarea, .field select, .woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea, .co-coupon__row input, .notify__field input, .ufc-ty-lookup input, .comment-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .comment-form textarea, .search-form input[type="search"]):focus, .skin-cozy #utopia-fast-checkout :is(.form-input-box input, .form-input-box select, .form-input-box textarea, .fc-promo__row input):focus, .skin-cozy .search-inline:focus-within, .skin-cozy :is(.select2-container--focus, .select2-container--open) .select2-selection--single { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215, 38, 61, .16); outline: none; } .skin-cozy .select2-container .select2-selection--single { border-radius: 14px; } .skin-cozy .select2-dropdown { margin-top: 6px; border: 2px solid var(--line-strong); border-radius: 18px; background: var(--white); box-shadow: 0 14px 32px rgba(43, 27, 23, .14); } .skin-cozy .select2-dropdown--above { margin-top: -6px; box-shadow: 0 -14px 32px rgba(43, 27, 23, .12); } .skin-cozy .select2-container--default .select2-search--dropdown .select2-search__field { border: 2px solid var(--line-strong); border-radius: 12px; } .skin-cozy .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(215, 38, 61, .16); } .skin-cozy .select2-results__option { font-family: var(--serif); font-weight: 500; } .skin-cozy .select2-container--default .select2-results__option--highlighted[aria-selected], .skin-cozy .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--butter); color: var(--ink); } /* ---------- Notices: the ✓ sits with its text, the button at the end (below it on phones) ---------- */ .skin-cozy :is(.woocommerce-message, .woocommerce-info) { display: block; position: relative; padding: 15px 20px; line-height: 1.4; } .skin-cozy .woocommerce-message { min-height: 56px; padding-left: 58px; } .skin-cozy .woocommerce-message::before { position: absolute; left: 18px; top: 13px; } .skin-cozy :is(.woocommerce-message, .woocommerce-info) > .button { position: absolute; margin: 0; min-height: 38px; padding: 0 18px; font-size: 14px; } .skin-cozy :is(.woocommerce-message, .woocommerce-info) a:not(.button) { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767px) { .skin-cozy :is(.woocommerce-message, .woocommerce-info):has(> .button) { padding-bottom: 64px; } .skin-cozy :is(.woocommerce-message, .woocommerce-info) > .button { left: 20px; bottom: 14px; } .skin-cozy .woocommerce-message > .button { left: 58px; } } @media (min-width: 768px) { .skin-cozy :is(.woocommerce-message, .woocommerce-info):has(> .button) { min-height: 64px; padding-right: 210px; } .skin-cozy :is(.woocommerce-message, .woocommerce-info) > .button { top: 50%; right: 13px; transform: translateY(-50%); } .skin-cozy :is(.woocommerce-message, .woocommerce-info):has(> .button) { padding-top: 21px; padding-bottom: 21px; } .skin-cozy .woocommerce-message:has(> .button)::before { top: 19px; } } /* On the cart page, "Voir le panier" would link to the page already open. */ .skin-cozy.woocommerce-cart .woocommerce-message > .wc-forward { display: none; } .skin-cozy.woocommerce-cart .woocommerce-message:has(> .wc-forward) { padding-right: 20px; padding-bottom: 15px; } /* ---------- Announcement: centred, the welcome code as a butter chip ---------- */ .skin-cozy .announcement { justify-content: center; } .skin-cozy .announcement__text { text-align: center; } .skin-cozy .announcement strong { font-weight: 600; } .skin-cozy .announcement__code { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--butter); color: var(--ink); line-height: 1.45; letter-spacing: .02em; } @media (min-width: 1024px) { .skin-cozy .announcement { padding-left: 64px; } } /* ---------- Header ---------- */ /* Narrow phones: three 40 px buttons are wider than the 1fr column, so the logo slid left of centre. */ @media (max-width: 379px) { .skin-cozy .site-header__bar { padding: 0 10px; } } /* Scrolled: a cream fade above the pill, so cards don't show sliced in the strip over it; the pill turns solid. */ .skin-cozy .site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(var(--header-pad) + 10px); background: linear-gradient(rgba(255, 250, 240, .96) 30%, rgba(255, 250, 240, 0)); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; } .skin-cozy .site-header.is-scrolled::before { opacity: 1; } .skin-cozy .site-header.is-scrolled.is-over-cherry::before { opacity: 0; } /* the footer reached the header (theme.js) */ .skin-cozy .site-header.is-scrolled .site-header__bar { background: var(--cream); } /* ---------- Footer on cherry: solid white text, hierarchy by type, never by transparency ---------- */ .skin-cozy .site-footer { --f-dim: #fff; --f-line: rgba(255, 255, 255, .34); } .skin-cozy .footer-eyebrow { display: inline-block; margin-bottom: 18px; padding: 6px 14px 5px; border-radius: 999px; background: var(--butter); color: var(--ink); font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; transform: rotate(-3deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .14); } .skin-cozy .footer-news__lead { font-size: 17px; } .skin-cozy .footer-col__title { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--white); } .skin-cozy .footer-news__note { color: var(--white); } /* Newsletter: a cream pill with the ink button inside (the underline field was white on white-ish pink). */ .skin-cozy .footer-news__field { gap: 8px; padding: 6px 6px 6px 22px; border: 0; border-radius: 999px; background: var(--cream); box-shadow: 0 4px 0 rgba(43, 27, 23, .16); } .skin-cozy .footer-news__field:focus-within { outline: 2px solid var(--white); outline-offset: 3px; } .skin-cozy .footer-news__field input { height: 48px; color: var(--ink); font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: 0; } .skin-cozy .footer-news__field input::placeholder { color: var(--muted); opacity: 1; } .skin-cozy .footer-news__submit { height: 48px; padding: 0 6px 0 20px; background: var(--ink); color: var(--cream); font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .footer-news__submit .icon { width: 36px; height: 36px; padding: 8px; background: var(--accent); color: var(--white); } .skin-cozy .footer-news__submit:focus-visible { outline-color: var(--accent); } @media (max-width: 767px) { .skin-cozy .footer-news__submit { width: 48px; padding: 0; background: var(--accent); } .skin-cozy .footer-news__submit .icon { background: none; } } .skin-cozy .site-footer .form-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--serif); font-size: 14px; font-weight: 600; line-height: 1.3; } .skin-cozy .site-footer .form-status::before { content: "✓"; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); color: var(--ink); font-size: 13px; } .skin-cozy .site-footer .form-status--error::before { content: "!"; background: var(--blush); color: var(--accent-ink); } /* Service strip: three pastel stickers. */ .skin-cozy .footer-badges { gap: 10px; border: 0; } .skin-cozy .footer-badges li, .skin-cozy .footer-badges li + li { padding: 16px 18px; border: 0; border-radius: 22px; color: var(--ink); } .skin-cozy .footer-badges li:nth-child(3n+1) { background: var(--butter); } .skin-cozy .footer-badges li:nth-child(3n+2) { background: var(--sky); } .skin-cozy .footer-badges li:nth-child(3n+3) { background: var(--blush); } .skin-cozy .footer-badges li > span { color: var(--ink-2); font-size: 14px; text-wrap: pretty; } .skin-cozy .footer-badges strong { color: var(--ink); font-family: var(--serif); font-size: 17px; font-weight: 600; } .skin-cozy .footer-badges .icon { border: 0; background: var(--white); color: var(--accent); } @media (min-width: 768px) { .skin-cozy .footer-badges { gap: 12px; border: 0; } .skin-cozy .footer-badges li, .skin-cozy .footer-badges li + li { padding: 18px 20px; border: 0; } } @media (min-width: 768px) and (max-width: 1023px) { /* Three narrow cards: icon above the text, so the lines don't break every two words. */ .skin-cozy .footer-badges li { flex-direction: column; align-items: flex-start; gap: 12px; } .skin-cozy .footer-badges strong { font-size: 16px; } } /* Link columns: on phones each folds under its title (theme.js); the toggle is a soft round chip. */ .skin-cozy .footer-col__head .icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); } /* "Haut de page": a round butter sticker. */ .skin-cozy .footer-top { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .footer-top span { width: 40px; height: 40px; border: 0; background: var(--butter); color: var(--ink); box-shadow: 0 3px 0 rgba(43, 27, 23, .18); } .skin-cozy .site-footer__legal { font-size: 14px; } /* ---------- Wheel launcher: butter while it crosses a cherry band (marquee, or the footer as it fades out there), so it never melts into it. theme.js "Floating launchers" sets .is-on-cherry / .is-away. ---------- */ .skin-cozy .wheel-fab.is-on-cherry { background: var(--butter); color: var(--ink); } .skin-cozy .wheel-fab.is-on-cherry .wheel-fab__icon { color: var(--accent); } /* ---------- Touch screens: no sticky hover colours on buttons that stay on the page ---------- */ @media (hover: none) { .skin-cozy button.single_add_to_cart_button:hover { background: var(--ink); } .skin-cozy .btn--outline:hover { background: transparent; color: var(--ink); } .skin-cozy .wheel-fab:not(.is-won):not(.is-on-cherry):hover { background: var(--accent); } .skin-cozy .wheel-fab.is-won:hover { background: var(--butter); } } /* iOS Safari: the phone menu's thumbnail row is a sideways scroller too (see theme.css, "Carousel"). */ .skin-cozy .drawer-nav .sub-menu { position: relative; z-index: 0; } /* -- end 4a -- */ /* -- 4a2 menus and drawers (phone menu, desktop mega menu, drawer shells) -- */ /* Univers colours come from the item's class (inc/extras.php), so they follow Femme / Homme / Enfant whatever the menu order: blush / sky / butter, in the phone cards and the desktop pills and panels. */ .skin-cozy .menu-univers--femme { --uni: var(--blush); } .skin-cozy .menu-univers--homme { --uni: var(--sky); } .skin-cozy .menu-univers--enfant { --uni: var(--butter); } .skin-cozy .drawer-nav .nav__list > li.menu-univers { background: var(--uni); } /* Side drawers on phones: full width, so no rounded open side (the corners showed the page behind). */ @media (max-width: 599px) { .skin-cozy .drawer[data-drawer] .drawer__panel { width: 100%; border-radius: 0; } } /* ---------- Phone / tablet menu (pass 3 look): head on the 16px gutter, soft end, one row of pills ---------- */ @media (max-width: 1023px) { .skin-cozy #drawer-nav .drawer__head { min-height: 68px; padding: 12px 16px 8px; } /* The list scrolls under a soft fade instead of a hard cut above the pills. */ .skin-cozy .drawer-nav { padding-bottom: 32px; -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); } .skin-cozy .drawer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 16px calc(16px + env(safe-area-inset-bottom)); } .skin-cozy .drawer-links li:nth-child(n+4) { grid-column: 1 / -1; } .skin-cozy .drawer-links a { justify-content: center; min-height: 48px; padding: 8px 6px; gap: 6px; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--line-strong), 0 3px 0 rgba(43, 27, 23, .07); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy .drawer-links a:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--line-strong); } .skin-cozy .drawer-links .icon { flex: none; } } /* Tablets: the seven thumbnails fit in the card, so no row is cut at "Tout voir". */ @media (min-width: 700px) and (max-width: 1023px) { .skin-cozy .drawer-nav .nav__list > li.menu-univers > a { padding-top: 16px; font-size: 32px; } .skin-cozy .drawer-nav .sub-menu { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 4px 22px 18px; } .skin-cozy .drawer-nav .sub-menu > li { min-width: 0; } .skin-cozy .drawer-nav .mega__label { font-size: 14px; } } /* ---------- Desktop header links and mega menu ---------- */ @media (min-width: 1024px) { /* Links as Fredoka pills: hover / open paints the univers colour, the current page gets a cherry dot. */ .skin-cozy .nav__list { gap: 2px; } .skin-cozy .nav__list > li > a { height: 38px; padding: 0 14px; border-radius: 999px; font-family: var(--serif); font-size: 16px; font-weight: 500; letter-spacing: 0; transition: background-color .2s var(--ease); } /* The chevron sits in the link's right padding, 8px clear of the text, so its focus ring (2px + 2px offset) never crosses the last letter of "Femme". */ .skin-cozy .nav__list > li.menu-item--mega > a { padding-right: 42px; } .skin-cozy .nav__list > li > .nav__more { width: 26px; height: 26px; margin: 0 0 0 -34px; color: var(--ink); } .skin-cozy .nav__more:hover { background: rgba(255, 255, 255, .7); } /* Hover paints the pill only with a real mouse (a tap leaves :hover stuck on touch screens, which would keep the pill coloured after the panel closed); the open state paints it everywhere. */ .skin-cozy .nav__list > li.is-open > a { background: var(--uni, var(--butter)); } @media (hover: hover) { .skin-cozy .nav__list > li:is(:hover, .is-hover) > a { background: var(--uni, var(--butter)); } } .skin-cozy .nav__list > li > a::after { left: 50%; right: auto; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); transform: scale(0); } .skin-cozy .nav__list > li.menu-item--mega > a::after { margin-left: -17px; } .skin-cozy .nav__list > li:hover > a::after, .skin-cozy .nav__list > li > a:focus-visible::after { transform: scale(0); } .skin-cozy .nav__list > li:is(.current-menu-item, .current-menu-ancestor) > a::after { transform: scale(1); } /* Panel: the univers colour with a white die-cut edge (like the hero stickers), one row of cards. */ .skin-cozy .nav .sub-menu { top: calc(100% + 14px); left: 5px; right: 5px; gap: 14px; padding: 18px; border-radius: 30px; background: var(--uni, var(--cream)); box-shadow: 0 0 0 5px var(--white), 0 26px 50px -14px rgba(43, 27, 23, .34); } .skin-cozy .nav__list > li.menu-item--mega:is(:hover, .is-hover)::after { height: 20px; } .skin-cozy .nav .sub-menu a.mega__card { position: relative; gap: 0; color: var(--ink); } .skin-cozy .nav .mega__media { aspect-ratio: 4 / 5; margin-bottom: 8px; border-radius: 20px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 3px rgba(255, 255, 255, .75); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .skin-cozy .nav .mega__card:hover .mega__img { transform: none; } .skin-cozy .nav .mega__label { font-family: var(--serif); font-size: clamp(16px, 1.05vw, 20px); font-weight: 600; line-height: 1.15; } .skin-cozy .nav .mega__card--soon .mega__label { color: var(--ink-2); } .skin-cozy .nav .mega__card--soon .mega__img { filter: grayscale(.4); opacity: .72; } /* The real piece count as a sticker on the photo; "Bientôt" as a cream one. */ .skin-cozy .nav .mega__note { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px 3px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: clamp(13px, .8vw, 15px); font-weight: 600; line-height: 1.2; transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(43, 27, 23, .16); transition: transform .35s var(--ease); } .skin-cozy .nav .mega__card--soon .mega__note { background: var(--cream); color: var(--ink); } /* "Tout voir": a cherry card the height of the photos, arrow in a cream button, real count below. */ .skin-cozy .nav .sub-menu a.mega__card--all { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; align-self: start; height: auto; min-height: 0; aspect-ratio: 4 / 5; padding: 16px; border-radius: 20px; background: var(--accent); color: var(--white); box-shadow: 0 4px 0 rgba(43, 27, 23, .2); transition: transform .35s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); } .skin-cozy .nav .mega__card--all .mega__label { font-size: clamp(18px, 1.6vw, 26px); line-height: 1; } .skin-cozy .nav .mega__card--all .mega__sum { font-family: var(--serif); font-size: clamp(13px, .9vw, 16px); font-weight: 500; line-height: 1.2; color: rgba(255, 255, 255, .92); } .skin-cozy .nav .mega__card--all .icon { order: -1; margin-bottom: auto; box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 50%; background: var(--cream); color: var(--accent); } .skin-cozy .nav .mega__card--all:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43, 27, 23, .2); } @media (hover: hover) { .skin-cozy .nav .mega__card:hover .mega__media { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 0 0 3px var(--white), 0 12px 22px rgba(43, 27, 23, .16); } .skin-cozy .nav .mega__card:hover .mega__note { transform: translateY(-4px) rotate(-6deg); } .skin-cozy .nav .mega__card--all:hover { background: #c01f34; transform: translateY(-4px) rotate(-1.5deg); } } /* The cards rise in one after another when a panel appears. @starting-style only applies when the panel comes out of display:none, so going back into a panel during its 0.2s grace (li.is-hover, theme.js) doesn't replay the rise. */ @media (prefers-reduced-motion: no-preference) { .skin-cozy .nav .sub-menu > li { transition: opacity .42s var(--ease), transform .42s var(--ease); } @starting-style { .skin-cozy .nav .sub-menu > li { opacity: 0; transform: translateY(12px) scale(.97); } } .skin-cozy .nav .sub-menu > li:nth-child(2) { transition-delay: .03s; } .skin-cozy .nav .sub-menu > li:nth-child(3) { transition-delay: .06s; } .skin-cozy .nav .sub-menu > li:nth-child(4) { transition-delay: .09s; } .skin-cozy .nav .sub-menu > li:nth-child(5) { transition-delay: .12s; } .skin-cozy .nav .sub-menu > li:nth-child(6) { transition-delay: .15s; } .skin-cozy .nav .sub-menu > li:nth-child(n+7) { transition-delay: .18s; } } } /* ---------- Univers panels: blank "Bientôt" cards and the photo "Tout voir" (inc/extras.php) ---------- An empty type without a fitting photo (no reused univers photo, no adults in the Enfant panel) is a pastel card with a 🧸 (Enfant) or a 🧶, in the desktop panels and the phone thumbnail rows. Neighbours take different pastels: cream, then the two pastels the panel isn't painted in. */ .skin-cozy .menu-univers--femme { --blank-a: var(--sky); --blank-b: var(--butter); } .skin-cozy .menu-univers--homme { --blank-a: var(--blush); --blank-b: var(--butter); } .skin-cozy .menu-univers--enfant { --blank-a: var(--sky); --blank-b: var(--blush); } .skin-cozy :is(.nav, .drawer-nav) .mega__card--blank .mega__media { display: grid; place-items: center; background: var(--cream); } .skin-cozy :is(.nav, .drawer-nav) .sub-menu > li:nth-child(3n+2) .mega__card--blank .mega__media { background: var(--blank-a, var(--sky)); } .skin-cozy :is(.nav, .drawer-nav) .sub-menu > li:nth-child(3n) .mega__card--blank .mega__media { background: var(--blank-b, var(--blush)); } .skin-cozy .mega__card--blank .mega__media::before { content: "🧶"; font-size: 36px; line-height: 1; rotate: -8deg; filter: drop-shadow(0 3px 0 rgba(43, 27, 23, .1)); } .skin-cozy .menu-univers--enfant .mega__card--blank .mega__media::before { content: "🧸"; } .skin-cozy .sub-menu > li:nth-child(even) .mega__card--blank .mega__media::before { rotate: 7deg; } /* "Tout voir" of an univers without pieces yet: its photo fills the card, the label sits on a cherry fade. */ .skin-cozy :is(.nav .sub-menu a, .drawer-nav a).mega__card--photo { position: relative; overflow: hidden; isolation: isolate; color: var(--white); } .skin-cozy :is(.nav, .drawer-nav) .mega__card--photo .mega__media { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: none; } .skin-cozy :is(.nav, .drawer-nav) .mega__card--photo .mega__img { border-radius: 0; filter: none; opacity: 1; } .skin-cozy .mega__card--photo .mega__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(215, 38, 61, 0) 28%, rgba(215, 38, 61, .9) 62%, var(--accent)); } @media (max-width: 1023px) { .skin-cozy .drawer-nav .mega__card--blank .mega__media::before { font-size: 34px; } .skin-cozy .drawer-nav .mega__card--photo { place-content: end center; padding: 0 6px 12px; background: var(--accent); } /* The label and arrow take the lower half of these small cards. */ .skin-cozy .drawer-nav .mega__card--photo .mega__media::after { background: linear-gradient(180deg, rgba(215, 38, 61, 0) 16%, rgba(215, 38, 61, .9) 50%, var(--accent)); } } @media (min-width: 1024px) { .skin-cozy .nav .mega__card--blank .mega__media::before { font-size: clamp(40px, 4vw, 76px); } /* The arrow joins the label at the bottom, so the faces at the top of the photo stay clear (1024 px). */ .skin-cozy .nav .mega__card--photo .icon { margin-bottom: 6px; } @media (hover: hover) { .skin-cozy .nav .mega__card--photo:hover .mega__media { transform: none; box-shadow: none; } .skin-cozy .nav .mega__card--photo:hover .mega__media::after { opacity: .92; } } } /* -- end 4a2 -- */ /* -- 4b home (+ product carousels everywhere) -- */ /* ---------- Hero ---------- */ /* Kicker: a tilted sticker for everyone. `rotate` composes with the entrance transform of theme.css, which used to replace the rotation as soon as the slide came in. */ .skin-cozy .hero__kicker { transform: none; rotate: -3deg; } @media (prefers-reduced-motion: no-preference) { .has-motion .skin-cozy .hero__kicker { transform: translateY(10px); } } .skin-cozy .hero__subtitle { letter-spacing: -0.005em; text-wrap: pretty; } /* Slides 2–3 load after the page (motion.js adds .is-primed on load), never before the first slide. */ .skin-cozy .hero__slide:not(.is-active):not(.is-primed) .hero__media { display: none; } /* Dots: round, on the same cream pill as the pause button; the active one stretches with the progress inside. */ .skin-cozy .hero__dots { gap: 0; height: 40px; align-items: center; padding: 0 6px; border-radius: 999px; background: rgba(255, 250, 240, .75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .skin-cozy .hero__dot { display: grid; place-items: center; width: auto; min-width: 32px; height: 40px; padding: 0 6px; } .skin-cozy .hero__dot span { width: 9px; height: 9px; border-radius: 99px; background: rgba(43, 27, 23, .55); transition: width .35s var(--ease), background-color .35s var(--ease); } .skin-cozy .hero__dot:hover span { background: var(--ink); } .skin-cozy .hero__dot[aria-selected="true"] span { width: 30px; background: rgba(215, 38, 61, .28); } .skin-cozy .hero__dot span::after { background: var(--accent); } @media (max-width: 767px) { /* The pastel disc stays below the CTA on two-line slides (430 px phones). */ .skin-cozy .hero__media::before { width: min(118vw, 150%, 460px); } } @media (min-width: 1024px) { /* The sticker duo keeps clear of the right edge (slide 3's elbow touched it). */ .skin-cozy .hero__media { right: var(--gutter); } } /* ---------- Promises strip: pause button ---------- */ .skin-cozy .marquee__toggle { background: var(--butter); color: var(--ink); box-shadow: 0 0 0 6px var(--accent); } .skin-cozy .marquee__toggle:hover { background: var(--white); } .skin-cozy .marquee__toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } /* ---------- Product carousels everywhere (home, related, favourites, 404, La Maison, empty listings) ---------- One left edge: the title, the tabs and the first card start on the gutter (16 / 24 / 40 px); on phones and tablets the row still scrolls from screen edge to screen edge. The cart rows keep their own layout. */ .skin-cozy .section--carousel:not(.cart-rec) { padding-left: var(--gutter); padding-right: var(--gutter); } .skin-cozy .section--carousel .section-head { padding-left: 0; padding-right: 0; } .skin-cozy .section--carousel:not(.cart-rec) .carousel__track { /* room for the card's hover lift and shadow inside the scroller */ padding-top: 8px; padding-bottom: 28px; margin-top: -8px; margin-bottom: -28px; } @media (max-width: 1023px) { .skin-cozy .section--carousel:not(.cart-rec) .carousel__track { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding: 0 var(--gutter); } } @media (max-width: 767px) { .skin-cozy .section--carousel:not(.cart-rec) .carousel__track { gap: 12px; grid-auto-columns: calc((100% - 12px) / 1.6); } } .skin-cozy .carousel__nav { border: 2px solid var(--ink); background: var(--white); } .skin-cozy .carousel__btn { width: 40px; } .skin-cozy .carousel__btn:not(:disabled):hover { color: var(--accent); } /* Suggestions under empty states: no classic hairline. */ .skin-cozy .section--suggest { border-top: 0; margin-top: 0; } .skin-cozy .univers-empty { margin: 0; border-radius: 28px; background: var(--soft); font-weight: 600; } .skin-cozy .univers-empty::before { content: "🧶"; display: block; margin-bottom: 12px; font-size: 44px; line-height: 1; } /* ---------- New arrivals: univers tabs in their pastels (as in the phone menu), the chosen one a cherry sticker ---------- */ .skin-cozy .univers-tabs { gap: 8px; margin: -12px calc(-1 * var(--gutter)) 18px; padding: 4px var(--gutter) 6px; scroll-padding: 0 var(--gutter); } @media (min-width: 1024px) { .skin-cozy .univers-tabs { margin-top: -24px; margin-bottom: 30px; } } .skin-cozy .univers-tabs__btn { transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), rotate .25s var(--ease); } .skin-cozy .univers-tabs__btn[data-univers="femme"] { background: var(--blush); } .skin-cozy .univers-tabs__btn[data-univers="homme"] { background: var(--sky); } .skin-cozy .univers-tabs__btn[data-univers="enfant"] { background: var(--butter); } .skin-cozy .univers-tabs__btn:hover { box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy .univers-tabs__btn[aria-pressed="true"] { background: var(--accent); color: var(--white); box-shadow: 0 3px 0 rgba(43, 27, 23, .28); rotate: -2deg; } .skin-cozy .univers-tabs__btn:active { translate: 0 2px; } @media (max-width: 379px) { /* The four pills fit a 360 px screen. */ .skin-cozy .univers-tabs { gap: 6px; } .skin-cozy .univers-tabs__btn { padding: 0 14px; } } @media (max-width: 767px) { /* No dead gap between the cards and the brand line. */ .skin-cozy.home .section--carousel { padding-bottom: 48px; } .skin-cozy .manifesto { padding-top: 64px; } } /* ---------- Scalloped joins where pastel sections meet (cream → sky, sky → blush, blush → cream, cream → butter) ---------- Drawn inside the lower section: the colour above fills the gaps between its bumps. */ .skin-cozy :is(.manifesto, .feature, .home-faq) { position: relative; } .skin-cozy :is(.manifesto, .feature, .home-faq)::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -1px; height: 13px; pointer-events: none; background: var(--scallop-above, var(--cream)); -webkit-mask: radial-gradient(circle at 50% 100%, transparent 11.5px, #000 12px) 0 0 / 24px 13px repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 11.5px, #000 12px) 0 0 / 24px 13px repeat-x; } .skin-cozy .feature { --scallop-above: var(--sky); } /* Under the feature the page cream rises in bumps over the bottom of the sticker duo (it stands behind them). */ .skin-cozy .feature::after { content: ""; inset: auto 0 0 0; z-index: 2; height: 13px; pointer-events: none; background: var(--cream); -webkit-mask: radial-gradient(circle at 50% 100%, #000 11.5px, transparent 12px) 0 0 / 24px 13px repeat-x; mask: radial-gradient(circle at 50% 100%, #000 11.5px, transparent 12px) 0 0 / 24px 13px repeat-x; } /* ---------- Univers and colour tiles ---------- */ .skin-cozy :is(.tiles--univers, .tiles--colours) { gap: 12px; } @media (min-width: 768px) { .skin-cozy :is(.tiles--univers, .tiles--colours) { gap: 16px; } } /* Colour names wrap inside the tile beside the dot, "Marine" under "Bleu" (theme.css: the label is a flex row); the dot becomes a paint blob with a cream die-cut ring, centred on the first line. */ .skin-cozy .tiles--colours .tile__label { gap: calc(.2em + 5px); } .skin-cozy .tiles--colours .tile__dot { width: 16px; height: 16px; margin: calc(.525em - 8px) 0 0 3px; box-shadow: 0 0 0 3px var(--cream); } @media (max-width: 767px) { .skin-cozy .tiles--colours .tile__caption { padding: 12px 14px 14px; } } @media (max-width: 379px) { /* 138 px tiles: the indented "Bordeaux" ran to 4 px from the edge at 22 px. */ .skin-cozy .tiles--colours .tile__caption { padding: 12px 12px 14px; } .skin-cozy .tiles--colours .tile__label { font-size: 20px; } } @media (min-width: 1024px) { .skin-cozy .tiles--colours .tile__label { font-size: clamp(20px, 1.9vw, 28px); } } /* 144 px tiles at 1024: 16 px sides keep "Bordeaux" inside the caption's padding. */ @media (min-width: 1024px) and (max-width: 1279px) { .skin-cozy .tiles--colours .tile__caption { padding: 18px 16px; } } @media (hover: hover) { /* Picking up a sticker, like the product cards (drop-shadow: the revealed photo is clipped). */ .skin-cozy .tiles--editorial .tile > a { transition: transform .35s var(--ease), filter .35s var(--ease); } .skin-cozy .tiles--editorial .tile > a:hover { transform: translateY(-4px) rotate(-1deg); filter: drop-shadow(0 14px 16px rgba(43, 27, 23, .16)); } .skin-cozy .tiles--editorial a:hover .tile__note { background: var(--accent); color: var(--white); } } /* ---------- Feature: the sticker duo stands on the bottom edge (no photo parallax), clear of the screen edge ---------- */ .skin-cozy .feature__img { animation: none; transform: none; } @media (min-width: 1024px) { .skin-cozy .feature__img { inset: auto var(--gutter) 0 auto; width: 50%; object-position: 100% 100%; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* It pops up from the bottom edge as the section scrolls in, and ends grounded. */ .skin-cozy .feature__img { animation: cozy-sticker-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } } } @keyframes cozy-sticker-rise { from { transform: translateY(16%); } to { transform: none; } } /* ---------- Lookbook: wavy accent, tags as tilted cream stickers ---------- */ .skin-cozy .lookbook__title em { text-decoration: underline wavy rgba(215, 38, 61, .38); text-decoration-thickness: .06em; text-underline-offset: .16em; text-decoration-skip-ink: none; } @media (max-width: 767px) { .skin-cozy .lookbook__grid { gap: 12px; } } .skin-cozy .look__tag { background: var(--cream); font-family: var(--serif); rotate: -2deg; box-shadow: 0 4px 0 rgba(43, 27, 23, .12); -webkit-backdrop-filter: none; backdrop-filter: none; transition: rotate .3s var(--ease), translate .3s var(--ease); } .skin-cozy .look__name { font-weight: 600; } .skin-cozy .look__price { font-weight: 600; color: var(--accent); } .skin-cozy .look__go { background: var(--accent); } @media (hover: hover) { .skin-cozy .look__link:hover .look__tag { rotate: 0deg; translate: 0 -3px; } } /* The small tags are too narrow for name + price between 1024 and 1279 px ("Gilet An…"). */ @media (min-width: 1024px) and (max-width: 1279px) { .skin-cozy .look:not(:first-child) .look__price { display: none; } } /* ---------- Craft: one rounded butter card inside the gutter (the photo used to be full-bleed with rounded corners) ---------- */ .skin-cozy .craft { margin: 0 var(--gutter); border-radius: 28px; overflow: hidden; background: var(--butter); } /* The card clips the photo's outer corners; the photo has none of its own (0,3,0 beats ".look img" in the shared rounded-media rule near the top of this file). */ .skin-cozy .craft .craft__media { border-radius: 0; } .skin-cozy .craft__body { padding: 32px 20px 36px; } .skin-cozy .craft__list { border-top-color: rgba(43, 27, 23, .14); } .skin-cozy .craft__list li { border-bottom-color: rgba(43, 27, 23, .14); } .skin-cozy .craft__inset { border-color: var(--butter); } /* 01 / 02 / 03 as small tilted stickers in cream, sky and blush. */ .skin-cozy .craft__list span { width: 36px; height: 36px; font-size: 14px; color: var(--ink); background: var(--cream); box-shadow: 0 3px 0 rgba(43, 27, 23, .14); rotate: -6deg; } .skin-cozy .craft__list li:nth-child(3n+2) span { background: var(--sky); rotate: 4deg; } .skin-cozy .craft__list li:nth-child(3n+3) span { background: var(--blush); rotate: -3deg; } @media (min-width: 768px) { .skin-cozy .craft__body { padding: 48px 40px; } .skin-cozy .craft__media { min-height: 560px; } } @media (min-width: 1024px) { .skin-cozy .craft { border-radius: 36px; } .skin-cozy .craft__body { padding: 80px 56px 80px 64px; } .skin-cozy .craft__media { min-height: 720px; } } /* ---------- FAQ: each question a soft card, the open one cream with a cherry × chip ---------- */ .skin-cozy .home-faq .accordion { display: grid; gap: 10px; border-top: 0; } .skin-cozy .home-faq .accordion__item { padding: 0 18px; border: 0; border-radius: 22px; background: rgba(255, 250, 240, .55); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); } .skin-cozy .home-faq .accordion__item[open] { background: var(--cream); box-shadow: 0 4px 0 rgba(43, 27, 23, .08); } .skin-cozy .home-faq .accordion__item summary { padding: 16px 0; } .skin-cozy .home-faq summary .icon { box-sizing: content-box; flex-shrink: 0; padding: 7px; border-radius: 50%; background: var(--white); color: var(--ink); transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); } .skin-cozy .home-faq [open] summary .icon { background: var(--accent); color: var(--white); } .skin-cozy .home-faq .accordion__body { padding-bottom: 20px; } /* The title's wavy underline hangs about .2em below its line box (14 px at 76 px), so the lead keeps that much more room than the classic 16 px, or it sits right under the wave ("Une question ?" at 1024). */ .skin-cozy .home-faq__text { margin-top: 20px; } @media (min-width: 768px) { .skin-cozy .home-faq__text { margin-top: 24px; } } @media (min-width: 1024px) { .skin-cozy .home-faq__text { margin-top: 30px; } .skin-cozy .home-faq .accordion__item { padding: 0 26px; } .skin-cozy .home-faq .accordion__item summary { padding: 22px 0; } } /* ---------- Text links: Fredoka with a cherry wavy underline that travels on hover ---------- */ .skin-cozy .link-underline { border-bottom: 0; padding-bottom: 7px; font-family: var(--serif); font-weight: 600; color: var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3Q3 0 6 3T12 3' fill='none' stroke='%23d7263d' stroke-opacity='.8' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100% / 12px 6px; transition: color .2s var(--ease); } .skin-cozy .link-underline:hover { color: var(--accent); background-size: 12px 6px; background-position: 0 100%; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .skin-cozy .link-underline:hover { animation: cozy-wave .7s linear infinite; } } @keyframes cozy-wave { to { background-position: 12px 100%; } } .skin-cozy :is(.section-head__actions, .lookbook__aside, .craft__body) .link-underline { font-size: 16px; } /* -- end 4b -- */ /* -- 4c shop (listings, cards, filters, quick view) -- */ /* ---------- Band: AA text on every pastel, the univers as a white sticker, "Bientôt" instead of a 0 ---------- */ .skin-cozy .plp__header .crumbs { color: var(--ink-2); } .skin-cozy .plp__header .crumbs a:hover { color: var(--ink); } .skin-cozy .plp__eyebrow { display: inline-block; margin: 14px 0 0; padding: 5px 13px 4px; border-radius: 999px; background: var(--white); color: var(--ink); transform: rotate(-3deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .12); } .skin-cozy .plp__count--soon { background: var(--ink); color: var(--butter); transform: rotate(4deg); } .skin-cozy .plp__more { color: var(--ink); font-family: var(--serif); font-weight: 600; } .skin-cozy .plp__tip { margin-top: 14px; color: var(--ink-2); font-size: 15px; } /* Phones: the banner becomes a die-cut photo sticker in the band's corner, so the products start in the first screen. */ @media (max-width: 767px) { .skin-cozy .plp__header--banner { display: block; min-height: 144px; } .skin-cozy .plp__header--banner .plp__banner { position: absolute; top: 14px; right: 14px; width: 84px; aspect-ratio: 4 / 5; border: 4px solid var(--white); border-radius: 20px; background: var(--white); transform: rotate(4deg); box-shadow: 0 6px 14px rgba(43, 27, 23, .16); } .skin-cozy .plp__header--banner .plp__banner img { border-radius: 16px; } .skin-cozy .plp__header--banner :is(.crumbs, .plp__title) { margin-right: 96px; } .skin-cozy .plp__header--banner .plp__desc { margin-top: 26px; } } /* Portrait tablets: text beside a 4:3 photo instead of a full-width 16:9 one on top. */ @media (min-width: 768px) and (max-width: 1023px) { .skin-cozy .plp__header--banner { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 24px; align-items: center; padding: 20px 20px 24px 24px; } .skin-cozy .plp__header--banner .plp__banner { aspect-ratio: 4 / 3; } } @media (min-width: 1024px) { .skin-cozy .plp__header--banner { align-items: center; } } /* ---------- Shortcut pills (phones and tablets): univers in their pastel, the current one a cherry sticker ---------- */ .skin-cozy .plp-pill { gap: 8px; padding: 0 8px 0 16px; border: 0; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); font-family: var(--serif); font-size: 15px; font-weight: 600; transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); } .skin-cozy .plp-pill--femme { background: var(--blush); box-shadow: none; } .skin-cozy .plp-pill--homme { background: var(--sky); box-shadow: none; } .skin-cozy .plp-pill--enfant { background: var(--butter); box-shadow: none; } .skin-cozy a.plp-pill:hover { box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy a.plp-pill:active { transform: translateY(2px); } .skin-cozy .plp-pill__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: rgba(43, 27, 23, .08); color: var(--ink-2); font-size: 13px; font-weight: 600; } .skin-cozy .plp-pill[aria-current] { background: var(--accent); color: var(--white); box-shadow: 0 3px 0 rgba(43, 27, 23, .18); transform: rotate(-2deg); } .skin-cozy .plp-pill[aria-current] .plp-pill__n { background: var(--white); color: var(--accent-ink); opacity: 1; } .skin-cozy .plp-pill--soon { padding-right: 8px; border: 2px dashed var(--line-strong); background: transparent; box-shadow: none; color: var(--ink-2); } .skin-cozy .plp-pill--soon .plp-pill__n { background: none; padding: 0; font-size: 12px; font-weight: 500; color: var(--muted); } .skin-cozy .plp-pill .plp-pill__n--soon { padding: 0 9px; font-size: 12px; font-weight: 500; } .skin-cozy .plp-pills { margin-bottom: -6px; } .skin-cozy .plp-pills__list { padding-top: 6px; padding-bottom: 8px; } /* ---------- Sticky toolbar: solid cream, tucked under the header pill (no strip of sliding photos) ---------- */ .skin-cozy .plp__toolbar { background: var(--cream); } @media (max-width: 1023px) { .skin-cozy .plp__toolbar { top: calc(var(--header-h) - 8px); padding-top: 16px; padding-bottom: 10px; } .skin-cozy.admin-bar .plp__toolbar { top: calc(var(--header-h) + 24px); } } /* One family of controls: 44 px, 2 px ink outline, Fredoka. */ .skin-cozy .plp__toolbar .plp__filter-btn { min-height: 44px; height: 44px; padding: 0 18px; } .skin-cozy .plp__toolbar .plp__grid-toggle { width: 44px; height: 44px; border: 2px solid var(--ink); background: var(--white); } .skin-cozy .plp__toolbar .plp__grid-toggle:hover { background: var(--ink); color: var(--cream); } .skin-cozy .plp .plp__toolbar .woocommerce-ordering select.orderby { height: 44px; padding-left: 18px; border: 2px solid var(--ink); border-radius: 999px; background-color: var(--white); font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); } .skin-cozy .plp__result-count { color: var(--ink-2); font-family: var(--serif); font-weight: 500; } .skin-cozy .pill-count { background: var(--accent); color: var(--white); font-family: var(--serif); font-weight: 600; } /* Active filters: ink chips (an "on" state, like the current size), on phones as a row under the toolbar. */ .skin-cozy :is(.filters__active, .plp__chips) .chip { background: var(--ink); color: var(--cream); padding-right: 10px; } .skin-cozy :is(.filters__active, .plp__chips) .chip:hover { background: var(--accent); color: var(--white); } .skin-cozy .plp__chips-clear { font-family: var(--serif); font-weight: 600; } @media (prefers-reduced-motion: no-preference) { .skin-cozy .plp__chips > * { animation: cozy-rise .45s var(--ease) both; } } /* ---------- Filters (sidebar ≥ 1024, drawer below) ---------- */ /* Univers and categories as Fredoka chips; the current one ink, empty ones dashed with "Bientôt". */ .skin-cozy .filters__cats { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; } .skin-cozy .filters__cats a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink); } .skin-cozy .filters__cats a:hover { box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy .filters__cats a .muted { color: var(--muted); font-size: 13px; } .skin-cozy .filters__cats a[aria-current] { background: var(--ink); color: var(--cream); box-shadow: none; text-decoration: none; font-weight: 600; } .skin-cozy .filters__cats a[aria-current] .muted { color: inherit; opacity: .8; } .skin-cozy .filters__cats a.is-soon { background: transparent; box-shadow: none; outline: 2px dashed var(--line-strong); outline-offset: -2px; color: var(--ink-2); } .skin-cozy .filters__cats a.is-soon:hover { outline-color: var(--ink); } .skin-cozy .filters__cats .soon { font-size: 12px; color: var(--muted); } /* Colours: the true colour, ink name when chosen (cherry text was under 4.5:1 on cream), cherry ring. */ .skin-cozy .filter-opt { font-family: var(--serif); font-weight: 500; } .skin-cozy .filter-opt.is-active { color: var(--ink); font-weight: 600; } .skin-cozy .filter-opt .swatch-dot--hex { box-shadow: inset 0 0 0 1px rgba(43, 27, 23, .16); } .skin-cozy .filter-opt:hover .swatch-dot { box-shadow: inset 0 0 0 1px rgba(43, 27, 23, .16), 0 0 0 2px var(--cream), 0 0 0 4px var(--line-strong); } .skin-cozy .filter-opt.is-active .swatch-dot { box-shadow: inset 0 0 0 1px rgba(43, 27, 23, .16), 0 0 0 2px var(--cream), 0 0 0 4px var(--accent); } /* Fifteen colours in two columns (half the scroll in the drawer and the sidebar). */ .skin-cozy .filters__options--pa_couleur { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } .skin-cozy .filters__options--pa_couleur .filter-opt { min-height: 44px; gap: 10px; line-height: 1.2; } .skin-cozy .filters__options--pa_couleur .swatch-dot { flex: none; } /* Sizes: the same pills as the product page (.opt). */ .skin-cozy .filters__options--pa_taille .filter-opt { border: 2px solid var(--line-strong); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 500; color: var(--ink); } .skin-cozy .filters__options--pa_taille .filter-opt:hover { border-color: var(--ink); color: var(--ink); } .skin-cozy .filters__options--pa_taille .filter-opt.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); font-weight: 600; } @media (min-width: 1024px) { /* The sidebar keeps its full height (no inner scroller: it cut the list mid-colour with no hint and hid the Taille group). A sidebar taller than the screen scrolls with the page: theme.js moves its sticky top. */ .skin-cozy .drawer--static .drawer__panel { padding-bottom: 16px; border-radius: 0; } .skin-cozy .drawer--static .filters__options--pa_couleur .filter-opt { min-height: 40px; font-size: 14px; } .skin-cozy .drawer--static .filters__options--pa_couleur .swatch-dot { width: 26px; height: 26px; } .skin-cozy .drawer--static .filters__cats a { min-height: 40px; padding: 0 14px; } /* "T2 (42-44)" broke at the hyphen in three 80 px columns. */ .skin-cozy .drawer--static .filters__options--pa_taille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skin-cozy .drawer--static .filters__options--pa_taille .filter-opt { white-space: nowrap; } .skin-cozy .drawer--static .filters__active + .filters__group summary { padding-top: 18px; } } /* ---------- Cards ---------- */ /* Hover: the whole photo block lifts and tilts (photo, badge, heart and quick view together). */ @media (hover: hover) { .skin-cozy .product-card__visual { transition: transform .35s var(--ease); } .skin-cozy .product-card:hover .product-card__visual { transform: translateY(-4px) rotate(-1deg); } .skin-cozy .product-card:hover .product-card__media { transform: none; } } .skin-cozy .product-card__quick { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--ink); box-shadow: 0 3px 0 rgba(43, 27, 23, .16); } .skin-cozy .product-card__quick:active { box-shadow: 0 1px 0 rgba(43, 27, 23, .16); translate: 0 2px; } @media (hover: hover) and (min-width: 1024px) { .skin-cozy .product-card__quick { background: var(--cream); } .skin-cozy .product-card__quick:hover { background: var(--accent); color: var(--white); } } .skin-cozy .badge--new { background: var(--butter); color: var(--ink); transform: rotate(4deg); box-shadow: 0 2px 0 rgba(43, 27, 23, .12); } .skin-cozy .price-from { font-weight: 500; color: var(--ink-2); } .skin-cozy .product-card__price ins { color: var(--accent-ink); } .skin-cozy .swatch-dot--hex { box-shadow: inset 0 0 0 1px rgba(43, 27, 23, .16); } .skin-cozy a.swatch-dot--hex:hover, .skin-cozy .swatch-dot--hex.is-active { box-shadow: inset 0 0 0 1px rgba(43, 27, 23, .16), 0 0 0 2px var(--cream), 0 0 0 4px var(--ink); } /* Sold out: softer than the classic grey so the pastel covers still read as Filago. */ .skin-cozy .product-card.outofstock .product-card__img { filter: grayscale(.7) contrast(.95); opacity: .72; } /* The same badge as a tilted sticker under the product-page price: cherry sale, ink Épuisé, butter Nouveau. */ .skin-cozy .pdp__badge { margin: 12px 0 4px; } .skin-cozy .pdp__badge .badge { padding: 7px 15px 6px; font-size: 15px; box-shadow: 0 3px 0 rgba(43, 27, 23, .16); } .skin-cozy .pdp__badge .badge--muted { color: var(--cream); } /* Favourite heart: a little cherry burst when a piece is saved. */ .skin-cozy .fav-btn--card.is-pop::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--accent) 0 2.5px, transparent 3.5px) 50% 0 / 10px 10px no-repeat, radial-gradient(circle, var(--accent) 0 2.5px, transparent 3.5px) 6% 72% / 10px 10px no-repeat, radial-gradient(circle, var(--accent) 0 2.5px, transparent 3.5px) 94% 72% / 10px 10px no-repeat; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .skin-cozy .fav-btn--card.is-pop::after { animation: cozy-burst .55s var(--ease) both; } } @keyframes cozy-burst { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.35); } } /* ---------- Empty listings and zero-result search ---------- */ .skin-cozy .plp__empty { background: var(--white); box-shadow: inset 0 0 0 3px var(--univers); } .skin-cozy .plp__empty .chip-row { justify-content: center; } /* Chips as on the 404 (block 4g): white with a ring, the univers in their own colour (Femme blush, Homme sky, Enfant butter). */ .skin-cozy .plp__empty .chip { background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); transition: box-shadow .15s var(--ease), transform .15s var(--ease); } .skin-cozy .plp__empty .chip--femme { background: var(--blush); box-shadow: none; } .skin-cozy .plp__empty .chip--homme { background: var(--sky); box-shadow: none; } .skin-cozy .plp__empty .chip--enfant { background: var(--butter); box-shadow: none; } .skin-cozy .plp__empty .chip:hover { box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy .plp__empty .chip:active { transform: translateY(1px); } .skin-cozy .plp__empty .chip--link { min-height: 44px; color: var(--ink); } .skin-cozy .plp__empty .chip--link .muted { color: var(--ink-2); } .skin-cozy .plp--empty { padding-bottom: 16px; } .skin-cozy .plp--empty + .section--suggest { border-top: 0; margin-top: 0; padding-top: 40px; } /* ---------- Quick view: on desktop the photo leaves room for the add-to-cart button ---------- */ /* From 1024 px the photos take only the height left over once the title, price, colour and size rows and "Ajouter au panier" are laid out, so the button stays above the fold whatever the options need (text colour pills often wrap to 2 rows: Pull Elio, Gilet Softy, T-Shirt Sofia) on a 1024×768 tablet in landscape or a 1280×800 / 1366×768 laptop. .quick__inner is a column at least as tall as the drawer body; .quick__media grows into the free space (3:4 photos sized by its height through cqh), between 120 px and 340 px tall (340 = 58 % of the 440 px row, so the second photo peeks in), 364 px (62 %) for a single centred photo. "Voir le produit" may sit just under the fold, as before: the info column's -70 px bottom margin takes the link (20 px gap + 26 px) and the 24 px bottom padding out of the budget, and the padding keeps a gap below it once the drawer is scrolled. Shorter windows scroll the drawer. Fallback without container queries: the photo width from the screen height (470 px budget for one row of options). */ @media (min-width: 1024px) { .skin-cozy .drawer--quick .quick__media { grid-auto-columns: clamp(30%, calc((100vh - 470px) * .75), 58%); } .skin-cozy .drawer--quick .quick__media:has(img:only-child) { grid-auto-columns: clamp(30%, calc((100vh - 470px) * .75), 62%); justify-content: center; } @supports (container-type: size) { .skin-cozy .drawer--quick .quick__inner { display: flex; flex-direction: column; gap: 20px; min-height: 100%; } .skin-cozy .drawer--quick .quick__info { flex: none; padding-bottom: 24px; margin-bottom: -70px; } .skin-cozy .drawer--quick .quick__media { display: flex; flex: 1 1 0; min-height: 120px; max-height: 340px; container-type: size; } .skin-cozy .drawer--quick .quick__media:has(img:only-child) { max-height: 364px; } .skin-cozy .drawer--quick .quick__media img { flex: none; width: auto; height: 100cqh; } } } /* ---------- Pagination (from the 25th product): Fredoka pills, the current page a tilted cherry sticker ---------- */ .skin-cozy .woocommerce-pagination .page-numbers { min-width: 44px; height: 44px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); } .skin-cozy .woocommerce-pagination a.page-numbers:hover { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy .woocommerce-pagination a.page-numbers:active { transform: translateY(2px); } .skin-cozy .woocommerce-pagination .current { background: var(--accent); color: var(--white); box-shadow: 0 3px 0 rgba(43, 27, 23, .18); transform: rotate(-4deg); } .skin-cozy .woocommerce-pagination .dots { background: none; box-shadow: none; } /* -- end 4c -- */ /* -- 4d product page: gallery, title, reviews -- */ /* Gallery: rounded photo cards straight on the cream page (no butter track behind them, so no yellow corners). Phones: one photo + a peek of the next, "2 / 7" pill. Tablets: two + a peek. Desktop: one rounded window, thumbs with an ink ring. Buttons are cream and pressable. */ .skin-cozy .pdp__slides { background: transparent; } .skin-cozy .pdp__slide { border-radius: 24px; overflow: hidden; background: var(--card); } .skin-cozy .pdp__slide img, .skin-cozy .pdp__thumb img { border-radius: 0; } .skin-cozy :is(.pdp__zoom, .pdp__arrow) { background: var(--cream); color: var(--ink); box-shadow: 0 3px 0 rgba(43, 27, 23, .18); transition: background-color .2s var(--ease), color .2s var(--ease), translate .12s var(--ease), box-shadow .12s var(--ease), opacity .2s var(--ease), visibility .2s; } .skin-cozy :is(.pdp__zoom, .pdp__arrow):hover { background: var(--ink); color: var(--cream); } .skin-cozy :is(.pdp__zoom, .pdp__arrow):active { transform: none; translate: 0 2px; box-shadow: 0 1px 0 rgba(43, 27, 23, .18); } .skin-cozy .pdp__arrow:active { transform: translateY(-50%); } .skin-cozy .pdp__count { position: absolute; left: calc(var(--gutter) + 12px); bottom: 12px; z-index: 1; margin: 0; padding: 4px 11px 3px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--serif); font-size: 13px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 rgba(43, 27, 23, .14); pointer-events: none; } @media (max-width: 767px) { .skin-cozy .pdp__slides { grid-auto-columns: calc(100% - 24px); gap: 8px; padding: 8px var(--gutter) 0; scroll-padding-inline: var(--gutter); } .skin-cozy .pdp__count { display: block; } .skin-cozy .pdp__progress { display: none; } .skin-cozy .pdp__zoom { top: 20px; right: calc(var(--gutter) + 36px); } } @media (min-width: 768px) and (max-width: 1023px) { .skin-cozy .pdp__slides { grid-auto-columns: calc((100% - 48px) / 2); gap: 8px; padding: 8px var(--gutter) 0; scroll-padding-inline: var(--gutter); } .skin-cozy .pdp__zoom { top: 20px; right: calc(var(--gutter) + 52px); } .skin-cozy .pdp__arrow--prev { left: calc(var(--gutter) + 12px); } .skin-cozy .pdp__arrow--next { right: calc(var(--gutter) + 52px); } .skin-cozy .pdp__arrow { margin-top: 4px; } .skin-cozy .pdp__progress { left: calc(var(--gutter) + 12px); right: calc(var(--gutter) + 52px); bottom: 14px; height: 5px; border-radius: 5px; background: rgba(255, 250, 240, .8); box-shadow: 0 2px 0 rgba(43, 27, 23, .12); } /* Exactly two photos: no peek to leave room for, the pair fills the gutters (arrows/progress hidden in theme.css). */ .skin-cozy .pdp__slides:has(> .pdp__slide:nth-child(2):last-child) { grid-auto-columns: calc((100% - 8px) / 2); } .skin-cozy .pdp__stage:has(> .pdp__slides > .pdp__slide:nth-child(2):last-child) .pdp__zoom { right: calc(var(--gutter) + 12px); } } @media (min-width: 1024px) { .skin-cozy .pdp__slides { border-radius: 24px; } .skin-cozy .pdp__slide { border-radius: 0; } .skin-cozy .pdp__thumb { border-radius: 12px; background: var(--card); opacity: .55; } .skin-cozy .pdp__thumb[aria-current="true"] { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; } } /* Title block: crumbs in Fredoka, the rating as a butter sticker (only with real reviews). */ .skin-cozy .pdp__info .crumbs { font-family: var(--serif); font-size: 14px; font-weight: 500; } .skin-cozy .pdp__info .crumbs a:hover { color: var(--accent); text-decoration: none; } .skin-cozy .pdp__rating { margin-top: 8px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--butter); color: var(--ink); font-family: var(--serif); font-size: 14px; font-weight: 500; transition: translate .12s var(--ease); } .skin-cozy .pdp__rating-count { text-decoration: none; } .skin-cozy .pdp__rating:hover { translate: 0 -1px; } .skin-cozy :is(.pdp__rating, .reviews) .stars { --star: var(--accent); } .skin-cozy .rate__stars { --star: var(--accent); } /* Accordions: rounded cards, butter-cream when open, the plus in a cherry circle turning into a cross. */ .skin-cozy .pdp .accordion { display: grid; gap: 10px; border-top: 0; } .skin-cozy .pdp .accordion__item { padding: 0 16px 0 20px; border: 2px solid var(--line); border-radius: 20px; background: var(--white); transition: background-color .2s var(--ease), border-color .2s var(--ease); } .skin-cozy .pdp .accordion__item[open] { background: var(--soft); border-color: var(--line-strong); } .skin-cozy .pdp .accordion__item summary { gap: 12px; padding: 14px 0; font-size: 16px; } .skin-cozy .pdp .accordion__item summary .icon { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--accent); color: var(--white); stroke-width: 2.2; } .skin-cozy .pdp .accordion__body { padding-bottom: 18px; } /* The description's lead heading (imported text): Fredoka like the other Cozy headings, a step lighter than the summary. */ .skin-cozy .pdp .accordion__body h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: 0; } /* Reviews: an invitation card when there are none yet, review bubbles when there are. */ .skin-cozy .reviews__summary { font-family: var(--serif); font-weight: 500; } .skin-cozy .reviews__empty { position: relative; max-width: 720px; margin-bottom: 16px; padding: 24px 24px 24px 92px; border-radius: 28px; background: var(--blush); color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.35; } .skin-cozy .reviews__empty::before { content: "✍️"; position: absolute; left: 20px; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; background: var(--white); font-size: 28px; line-height: 1; transform: rotate(-8deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .12); } .skin-cozy .reviews__write > summary.btn { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: background-color .2s var(--ease), border-color .2s var(--ease), translate .12s var(--ease), box-shadow .12s var(--ease); } .skin-cozy .reviews__write > summary.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); } .skin-cozy .reviews__write > summary.btn:active { translate: 0 2px; box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } .skin-cozy .reviews__list { gap: 12px; } .skin-cozy .review, .skin-cozy .review:first-child { padding: 20px 22px; border: 0; border-radius: 24px; background: var(--white); } .skin-cozy .review__author { font-family: var(--serif); font-weight: 600; } .skin-cozy .review__verified { padding: 2px 9px; border-radius: 999px; background: var(--sky); color: var(--ink); font-weight: 500; } @media (max-width: 767px) { .skin-cozy .reviews__empty { padding: 84px 20px 22px; } .skin-cozy .reviews__empty::before { top: 20px; margin-top: 0; } } /* Wide screens: "Vous aimerez aussi" starts on the centred product block's edge (theme.css --pdp-w), like the reviews; before that on the gutter (the Cozy carousel's padding, not the classic 20 px). */ @media (min-width: 1024px) { .skin-cozy.single-product .section--related { padding-inline: max(var(--gutter), (100% - var(--pdp-w)) / 2); } } /* Full-screen viewer: a calm cream room for the photo, ink close button, pressable white arrows. */ .skin-cozy .viewer { background: var(--cream); } .skin-cozy .viewer__slide img { border-radius: 20px; } .skin-cozy .viewer__slide img.is-zoomed { border-radius: 0; } .skin-cozy .viewer__btn { background: var(--white); box-shadow: 0 3px 0 rgba(43, 27, 23, .16); } .skin-cozy .viewer__close { background: var(--ink); color: var(--cream); } .skin-cozy .viewer__btn:hover { background: var(--accent); color: var(--white); } .skin-cozy .viewer__count { background: var(--butter); color: var(--ink); font-family: var(--serif); font-weight: 600; box-shadow: 0 3px 0 rgba(43, 27, 23, .12); } .skin-cozy .viewer__hint { background: var(--ink); color: var(--cream); font-family: var(--serif); font-weight: 500; } @media (prefers-reduced-motion: reduce) { .skin-cozy :is(.pdp__zoom, .pdp__arrow, .pdp__rating, .reviews__write > summary.btn, .pdp .accordion__item) { transition: none; } } /* -- end 4d -- */ /* -- 4e product page: buying (options, packs, express form, size guide, buy bar) -- */ /* ---------- Options: pressable pills; colour swatches with a true-colour dot, cherry ring + check when chosen ---------- */ .skin-cozy .variations_form .variations .opt-current { color: var(--ink-2); font-weight: 500; } .skin-cozy .opt { transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .skin-cozy .opt:not(.opt--colour)[aria-checked="true"], .skin-cozy .opt--colour.no-img[aria-checked="true"] { box-shadow: 0 3px 0 rgba(43, 27, 23, .28); } .skin-cozy .opt:not(.opt--colour):active, .skin-cozy .opt--colour.no-img:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } .skin-cozy .opt.is-unavailable:not(.opt--colour) { color: var(--muted); background: var(--white) linear-gradient(to top left, transparent calc(50% - 1px), var(--line-strong) 50%, transparent calc(50% + 1px)); } /* Photo swatch: the 2x zoom is clipped by the image itself, so the dot and the check can sit on the edge. */ .skin-cozy .opt--colour:not(.no-img) { overflow: visible; } .skin-cozy .opt--colour:not(.no-img) img { clip-path: circle(25%); } .skin-cozy .opt--colour.has-hex:not(.no-img)::before { right: -3px; bottom: -3px; width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--cream), inset 0 0 0 1px rgba(43, 27, 23, .2); } .skin-cozy .opt--colour:not(.no-img)[aria-checked="true"] { background: var(--white); border-color: var(--white); box-shadow: 0 0 0 2px var(--accent); } .skin-cozy .opt--colour:not(.no-img)[aria-checked="true"]::after { content: ""; position: absolute; top: -5px; right: -5px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 2px var(--cream); } .skin-cozy .opt[aria-checked="true"] .opt__dot { box-shadow: 0 0 0 2px var(--cream); } .skin-cozy .opt.is-reco::after { background-color: var(--accent); box-shadow: 0 0 0 2px var(--cream); } .skin-cozy .opt[aria-checked="true"].is-reco::after { background-color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .skin-cozy .opt--colour:not(.no-img)[aria-checked="true"]::after { animation: fg-check-pop .3s var(--ease); } } @keyframes fg-check-pop { from { transform: scale(.4); } 70% { transform: scale(1.15); } } /* Small phones: six colours stay on one row (6 × 44 + 5 × 8 = 304px). */ @media (max-width: 374px) { .skin-cozy .opts--colour { gap: 8px; } .skin-cozy .opt--colour:not(.no-img) { width: 44px; height: 44px; } } .skin-cozy .size-guide-link, .skin-cozy .size-meta__reco { font-family: var(--serif); font-weight: 500; color: var(--ink); } .skin-cozy .size-meta__measures { border-radius: 16px; color: var(--ink-2); } .skin-cozy .variations_form .form-hint { font-family: var(--serif); font-weight: 500; font-size: 14px; } /* ---------- Packs: cherry stickers, warm stack, Cozy pills for each piece ---------- */ .skin-cozy .packs__sub { color: var(--ink-2); } .skin-cozy .pack__name { font-family: var(--serif); font-size: 16px; font-weight: 600; } .skin-cozy .pack__meta { color: var(--ink-2); } .skin-cozy .pack__price b { font-family: var(--serif); font-size: 17px; font-weight: 600; } .skin-cozy .pack__radio { border-width: 2px; } .skin-cozy .pack.is-active .pack__radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 10px var(--accent); } /* The saving: white on cherry (4.96:1), a little sticker. */ .skin-cozy .pack__save { margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 12px; font-weight: 600; transform: rotate(-2deg); } .skin-cozy .pack__stack i { border-radius: 6px; background: var(--c, var(--card)); box-shadow: 0 0 0 1.5px var(--white), inset 0 0 0 1.5px var(--line-strong); } .skin-cozy .pack.is-active .pack__stack i { box-shadow: 0 0 0 1.5px var(--white), inset 0 0 0 1px rgba(43, 27, 23, .14); } .skin-cozy .pack__pieces { border-top: 2px dashed var(--line-strong); } .skin-cozy .pack__hint { font-family: var(--serif); font-weight: 500; color: var(--ink-2); } .skin-cozy .piece { border: 2px solid var(--line); border-radius: 18px; } .skin-cozy .piece.is-missing { border-color: rgba(215, 38, 61, .5); border-style: dashed; } .skin-cozy .piece__img { border-radius: 12px; } .skin-cozy .piece__n { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--ink); } .skin-cozy .pc { height: 36px; min-width: 40px; padding: 0 11px; border: 2px solid var(--line-strong); border-radius: 999px; font-family: var(--serif); font-size: 14px; font-weight: 500; } .skin-cozy .pc:hover:not(:disabled) { border-color: var(--ink); } .skin-cozy .pc[aria-pressed="true"]:not(.pc--color) { background: var(--ink); border-color: var(--ink); color: var(--cream); box-shadow: 0 2px 0 rgba(43, 27, 23, .28); } .skin-cozy .pc--color { width: 36px; min-width: 36px; padding: 3px; } .skin-cozy .pc--color::before { box-shadow: inset 0 0 0 1px rgba(43, 27, 23, .18); } .skin-cozy .pc--color[aria-pressed="true"] { border-color: var(--white); background: var(--white); box-shadow: 0 0 0 2px var(--accent); } .skin-cozy .packs__nudge button { font-family: var(--serif); font-size: 14px; font-weight: 500; } .skin-cozy .packs__nudge button::before { background: var(--accent); } .skin-cozy .packs__error { border-radius: 16px; background: var(--blush); font-family: var(--serif); font-size: 14px; } @media (prefers-reduced-motion: no-preference) { .skin-cozy .pack.is-active { animation: fg-pack-pop .35s var(--ease); } .skin-cozy .pack.is-active .pack__badge { animation: fg-badge-wiggle .5s var(--ease); } } @keyframes fg-pack-pop { 0% { transform: scale(.98); } 60% { transform: scale(1.012); } 100% { transform: none; } } @keyframes fg-badge-wiggle { 0%, 100% { transform: rotate(3deg); } 30% { transform: rotate(-4deg) scale(1.06); } 65% { transform: rotate(5deg); } } /* ---------- Perks: three pastel chips instead of grey lines (the same real promises) ---------- */ .skin-cozy .pdp__perks { gap: 8px; margin-top: 24px; padding: 0; border-top: 0; color: var(--ink); } .skin-cozy .pdp__perks li { align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--butter); } .skin-cozy .pdp__perks li:nth-child(3n+2) { background: var(--sky); } .skin-cozy .pdp__perks li:nth-child(3n+3) { background: var(--blush); } .skin-cozy .pdp__perks li > .icon { box-sizing: content-box; width: 20px; height: 20px; padding: 7px; border-radius: 50%; background: var(--white); } .skin-cozy .pdp__perks span { text-wrap: pretty; } .skin-cozy .pdp__perks + .accordion { margin-top: 24px; } /* ---------- Express form: an order ticket (butter header, perforation), Cozy fields and a pressable button ---------- */ .skin-cozy .fc-or { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--ink-2); } .skin-cozy .fc-or::before, .skin-cozy .fc-or::after { height: 2px; border-radius: 2px; } .skin-cozy #utopia-fast-checkout { padding: 0 20px 20px; border: 2px solid var(--line-strong); border-radius: 28px; background: var(--white); } html body.skin-cozy div#utopia-fast-checkout > h3 { position: relative; margin: 0 -20px; padding: 20px 20px 18px; border-bottom: 2px dashed var(--line-strong); border-radius: 26px 26px 0 0; background: var(--butter) !important; font-size: 28px; font-weight: 600; } html body.skin-cozy div#utopia-fast-checkout > h3::after { margin-top: 6px; font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink-2); } /* Ticket notches on the perforation, in the page colour: half circles cut in from the card's outer edge (the box starts on that edge, so only the inner half is painted). */ html body.skin-cozy div#utopia-fast-checkout > h3::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: -11px; height: 20px; pointer-events: none; background: radial-gradient(circle at 0 50%, var(--cream) 0 8px, var(--line-strong) 8px 10px, transparent 10.5px), radial-gradient(circle at 100% 50%, var(--cream) 0 8px, var(--line-strong) 8px 10px, transparent 10.5px); } .skin-cozy #fast-checkout-form { margin-top: 20px; } .skin-cozy #utopia-fast-checkout :is(.form-input-box input, .form-input-box select, .fc-promo__row input) { border: 2px solid var(--line-strong); border-radius: 14px; } .skin-cozy #utopia-fast-checkout .form-input-box input:user-invalid { border-color: var(--sale); } /* The city list waits for the governorate: quiet, dashed, never the brightest field. */ .skin-cozy #utopia-fast-checkout .form-input-box select:disabled { background-color: var(--white); border-style: dashed; color: var(--muted); } .skin-cozy #utopia-fast-checkout .fc-wheel-note { border-radius: 14px; } .skin-cozy #utopia-fast-checkout .order-summary { margin-top: 16px; padding: 14px 16px 12px; border-radius: 20px; } .skin-cozy #utopia-fast-checkout .order-summary h4 { font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); } .skin-cozy #utopia-fast-checkout .order-line .label strong { font-family: var(--serif); font-weight: 600; } .skin-cozy #utopia-fast-checkout .order-line .variation { color: var(--ink-2); } .skin-cozy #utopia-fast-checkout .order-line.total { border-top: 2px dashed var(--line-strong); font-family: var(--serif); font-weight: 600; } .skin-cozy #utopia-fast-checkout .order-line.total .value { font-size: 21px; } .skin-cozy .fc-pack-pieces { color: var(--ink-2); } .skin-cozy .fc-promo { border-top: 2px dashed var(--line-strong); } .skin-cozy .fc-promo__toggle { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--ink); } .skin-cozy .fc-promo__apply { height: 42px; border-width: 2px; font-family: var(--serif); font-size: 14px; font-weight: 600; } .skin-cozy .fc-promo__applied { border-radius: 14px; font-family: var(--serif); font-size: 14px; } .skin-cozy .fc-promo .coupon-hint { font-family: var(--serif); font-size: 14px; font-weight: 500; } .skin-cozy .fc-promo .code-chip { height: 34px; padding: 0 5px 0 12px; border: 2px dashed var(--accent); border-radius: 999px; background: var(--butter); font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink); } .skin-cozy .fc-promo .code-chip__off { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--white); font-weight: 600; } .skin-cozy .fc-promo .code-chip:hover { border-style: solid; background: var(--card); color: var(--ink); } .skin-cozy .fc-promo .code-chip:hover .code-chip__off { color: var(--white); } .skin-cozy #utopia-fast-checkout .quantity-box { border-width: 2px; } .skin-cozy #utopia-fast-checkout .quantity-box input[type="number"] { font-family: var(--serif); font-size: 17px; font-weight: 600; } .skin-cozy #utopia-fast-checkout .quantity-box span:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 999px; } /* Confirm: Fredoka like every Cozy button, pressable. Its colours are inline (inc/fast-checkout.php sets ink / cherry). */ .skin-cozy #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt { font-family: var(--serif); font-size: 16px; font-weight: 600; box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } @container (max-width: 400px) { .skin-cozy #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt { font-size: 15px; } } /* 360 px phones (a 284 px card): a slimmer stepper and 14 px keep "Confirmer la commande" on one line (it wrapped in 176 px); narrower still, it may wrap as the last resort (fast-checkout.css). */ @container (max-width: 300px) { .skin-cozy #utopia-fast-checkout .quantity-box { width: 92px; } .skin-cozy #utopia-fast-checkout .quantity-box span { width: 30px; } .skin-cozy #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt { padding-inline: 10px; font-size: 14px; } } .skin-cozy #utopia-fast-checkout .fast-checkout-message > div { border-radius: 16px !important; background: var(--blush) !important; font-family: var(--serif) !important; font-size: 14px !important; } .skin-cozy #utopia-fast-checkout .fast-checkout-message > div[style*="f0fff4"] { background: var(--sky) !important; } .skin-cozy #utopia-fast-checkout .terms { color: var(--ink-2); } /* Prévenez-moi (sold-out choice, inc/engage.php): same Cozy card and fields. */ .skin-cozy .notify { border: 2px solid var(--line-strong); border-radius: 24px; background: var(--white); } .skin-cozy .notify__title { font-family: var(--serif); font-size: 16px; font-weight: 600; } .skin-cozy .notify__field input { border: 2px solid var(--line-strong); border-radius: 14px; } /* ---------- "Complétez votre tenue": white cards like the details above, univers sticker, ink + button ---------- */ .skin-cozy .outfit__title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .skin-cozy .mini { border: 2px solid var(--line); border-radius: 20px; } .skin-cozy .mini:hover { border-color: var(--line-strong); } .skin-cozy .mini__img { border-radius: 12px; } .skin-cozy .mini__type { justify-self: start; padding: 1px 9px; border-radius: 999px; background: var(--univers); font-family: var(--serif); font-size: 12px; font-weight: 600; color: var(--ink); } .skin-cozy .mini__name { font-family: var(--serif); font-size: 16px; font-weight: 600; } .skin-cozy .mini__price { font-family: var(--serif); font-weight: 500; } .skin-cozy .mini__add { border: 0; background: var(--ink); color: var(--cream); box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: background-color .2s var(--ease), transform .12s var(--ease), box-shadow .12s var(--ease); } .skin-cozy .mini__add:hover { background: var(--accent); color: var(--white); } .skin-cozy .mini__add:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } @media (hover: none) { .skin-cozy .mini__add:hover { background: var(--ink); color: var(--cream); } } /* ---------- Buy bar (phones, tablets): docked to the bottom edge, chosen colour / size as chips ---------- */ @media (max-width: 1023px) { .skin-cozy .buybar { left: 0; right: 0; bottom: 0; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--cream); } } .skin-cozy .buybar__price { font-family: var(--serif); font-size: 14px; font-weight: 500; } .skin-cozy .buybar__opts { gap: 4px; margin-top: 3px; } .skin-cozy .buybar__opts span { padding: 0 8px; border-radius: 999px; background: var(--univers); font-family: var(--serif); font-size: 12px; font-weight: 600; line-height: 18px; color: var(--ink); } .skin-cozy .buybar__opts span + span::before { content: none; } /* ---------- Size guide: Fredoka, cherry progress and pointer, the action bar on the panel colour ---------- */ .skin-cozy .size-guide__kicker { color: var(--ink-2); } .skin-cozy .seg__btn { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink-2); } .skin-cozy .seg__btn.is-active { color: var(--ink); box-shadow: 0 2px 0 rgba(43, 27, 23, .12); } .skin-cozy .sg-units button { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--ink-2); } .skin-cozy .sg-units button.is-active { color: var(--cream); } .skin-cozy .sg-wiz__bar li { height: 6px; border-radius: 999px; } .skin-cozy .sg-wiz__bar li.is-on { background: var(--accent); } .skin-cozy :is(.sg-step__title, .sg-match strong, .sg-how-title) { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; } .skin-cozy .sg-step__sub { color: var(--ink-2); } .skin-cozy .sg-ruler__head { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .sg-ruler__head output { color: var(--ink-2); } .skin-cozy .sg-ruler__head output b { font-family: var(--serif); font-weight: 600; } .skin-cozy .sg-ruler__track { border: 2px solid var(--line); border-radius: 18px; background: var(--white); } .skin-cozy .sg-ruler::after { border-top-color: var(--accent); } .skin-cozy .sg-ruler::before { background: linear-gradient(var(--accent), rgba(215, 38, 61, 0)); } .skin-cozy .sg-shape { border: 2px solid transparent; border-radius: 20px; background: var(--soft); } .skin-cozy .sg-shape span { font-family: var(--serif); font-weight: 500; } .skin-cozy .sg-shape__body { fill: var(--blush); } .skin-cozy .sg-shape:has(input:checked) { border-color: var(--accent); background: var(--white); box-shadow: 0 3px 0 rgba(215, 38, 61, .16); } .skin-cozy .sg-shape:has(input:checked) span { font-weight: 600; } .skin-cozy .sg-shape:has(input:checked) .sg-shape__body, .skin-cozy .sg-shape:has(input:checked) .sg-fit__ico { fill: var(--accent); background: var(--accent); } .skin-cozy .sg-more { border-top: 2px dashed var(--line); } .skin-cozy .sg-more summary { font-family: var(--serif); font-weight: 600; } .skin-cozy .sg-match { border-radius: 24px; background: var(--butter); } .skin-cozy .sg-match__ico { background: var(--accent); } .skin-cozy .sg-match strong { font-size: 46px; } .skin-cozy .sg-match p { font-family: var(--serif); font-weight: 500; } .skin-cozy .sg-scale span { border: 2px solid var(--line-strong); border-radius: 999px; font-family: var(--serif); font-weight: 500; color: var(--ink-2); } .skin-cozy .sg-scale span.is-on { border-color: var(--ink); background: var(--ink); color: var(--cream); box-shadow: 0 2px 0 rgba(43, 27, 23, .28); } .skin-cozy .sg-between { border-radius: 18px; background: var(--sky); } .skin-cozy .sg-recap { color: var(--ink-2); } .skin-cozy .sg-wiz__foot { border-top: 2px solid var(--line); background: var(--cream); } .skin-cozy .sg-privacy { color: var(--ink-2); } .skin-cozy .sg-table-wrap { border: 2px solid var(--line); border-radius: 20px; background: var(--white); } .skin-cozy .sg-table thead th { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--cream); } .skin-cozy .sg-table tr.is-match > * { background: var(--butter); } .skin-cozy .sg-unit, .skin-cozy .sg-how { color: var(--ink-2); } /* Quantity stepper next to « Ajouter au panier » (2026-11-10), like the express form's. */ .skin-cozy .pdp__buy:has(.fc-wrap) .quantity { border-width: 2px; background: var(--cream); } .skin-cozy .pdp__buy .quantity input.qty { font-family: var(--serif); font-size: 17px; font-weight: 600; } .skin-cozy .qty-step:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 999px; } /* -- end 4e -- */ /* -- 4f cart, checkout, cart drawer -- */ /* ---------- Header bag count: a little cherry sticker ---------- */ .skin-cozy .hdr-btn--cart .cart-count { min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; background: var(--accent); font-family: var(--serif); font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px var(--cream); } /* ---------- Cart drawer (woocommerce/cart/mini-cart.php, assets/css/mini-cart.css) ---------- */ .skin-cozy .drawer__count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 600; line-height: 1; vertical-align: .18em; transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(43, 27, 23, .16); } .skin-cozy .drawer__paren { display: none; } .skin-cozy .mcart__item { border-bottom: 2px dotted var(--line-strong); } .skin-cozy .mcart__thumb { border-radius: 16px; } .skin-cozy .mcart__name { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: 0; } .skin-cozy .mcart__pack { background: var(--accent); font-family: var(--serif); font-size: 12px; transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(43, 27, 23, .14); } .skin-cozy .mcart__qty { border: 2px solid var(--line-strong); background: var(--white); } .skin-cozy .mcart__qty button:active:not(:disabled) { background: var(--butter); } .skin-cozy :is(.mcart__n, .mcart__price strong) { font-family: var(--serif); font-weight: 600; } .skin-cozy .mcart__price strong.is-sale { color: var(--accent-ink); } .skin-cozy .mcart__promises .reassure li { background: var(--butter); } .skin-cozy .mcart__promises .reassure li:nth-child(2) { background: var(--sky); } .skin-cozy .mcart__promises .reassure li:nth-child(3) { background: var(--blush); } .skin-cozy .mcart__promises .reassure .icon { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--white); box-shadow: 0 3px 0 rgba(43, 27, 23, .08); } .skin-cozy .mcart__promises .reassure span { font-family: var(--serif); font-size: 13px; } .skin-cozy .mcart__promises .reassure strong { font-weight: 600; } .skin-cozy .mcart__foot { border-top: 0; background: var(--cream); box-shadow: 0 -10px 24px rgba(43, 27, 23, .07); border-radius: 24px 24px 0 0; } .skin-cozy .mcart__total span { font-family: var(--serif); font-weight: 500; } .skin-cozy .mcart__total strong { font-family: var(--serif); font-size: 22px; font-weight: 600; } .skin-cozy .mcart__savings { justify-self: start; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-weight: 500; transform: rotate(-1deg); } .skin-cozy .mcart__savings :is(.icon, strong) { color: var(--white); } .skin-cozy .mcart__empty-icon { width: 84px; height: 84px; background: var(--butter); color: var(--accent); transform: rotate(-6deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .12); } .skin-cozy .mcart__empty-text { color: var(--ink-2); } .skin-cozy .proof--cart .proof__icon { background: var(--butter); color: var(--accent); border-radius: 16px; } .skin-cozy .proof--cart .proof__text strong { font-family: var(--serif); font-weight: 600; } /* Accent words on cart titles get the same wavy underline as the page titles. */ .skin-cozy :is(.mcart__empty-title, .cart-empty-state__title, .commerce .cart-rec .display-3) em { text-decoration: underline wavy rgba(215, 38, 61, .38); text-decoration-thickness: .06em; text-underline-offset: .16em; text-decoration-skip-ink: none; } /* Room under that wave: the intro's accents (pièces, arrivées) nearly touched it at 8 px. */ .skin-cozy .commerce .cart-rec__intro { margin-top: 16px; } /* ---------- Page frame: the steps as stickers, a wavy thread between them ---------- */ .skin-cozy .checkout-steps__n { border-width: 2px; font-family: var(--serif); font-weight: 600; } .skin-cozy .checkout-steps .is-current .checkout-steps__n { background: var(--accent); border-color: var(--accent); color: var(--white); transform: rotate(-6deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .18); } .skin-cozy .checkout-steps .is-current .checkout-steps__label { font-family: var(--serif); font-weight: 600; } .skin-cozy .checkout-steps .is-done .checkout-steps__n { background: var(--butter); border-color: var(--butter); color: var(--ink); } .skin-cozy .checkout-steps li + li::before { height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 3q3-3 6 0t6 0' fill='none' stroke='%23e6d0a5' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 12px 6px; } /* ---------- Reassurance: three pastel tiles, no hairlines ---------- */ .skin-cozy .commerce .reassure { gap: 8px; border: 0; background: none; } .skin-cozy .commerce .reassure li { border: 0; border-radius: 20px; background: var(--butter); } .skin-cozy .commerce .reassure li:nth-child(2) { background: var(--sky); } .skin-cozy .commerce .reassure li:nth-child(3) { background: var(--blush); } .skin-cozy .commerce .reassure strong { font-family: var(--serif); font-weight: 600; } .skin-cozy .commerce .reassure small { color: var(--ink-2); } .skin-cozy .commerce .reassure .icon { border: 0; box-shadow: 0 3px 0 rgba(43, 27, 23, .08); } @media (max-width: 767px) { .skin-cozy .commerce .reassure li { padding: 14px 6px; } .skin-cozy .commerce .reassure .icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--white); } .skin-cozy .commerce .reassure strong { font-size: 13px; } } @media (min-width: 768px) { .skin-cozy .commerce .reassure { gap: 12px; } } /* ---------- Cart lines ---------- */ .skin-cozy .cart-head { border-bottom: 2px solid var(--line-strong); } .skin-cozy .cart-head__title { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 0; } .skin-cozy .cart-line { border-bottom: 2px dotted var(--line-strong); } .skin-cozy .cart-line__thumb { border-radius: 16px; } .skin-cozy .cart-line__type { font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; } .skin-cozy .cart-line__name { font-family: var(--serif); font-weight: 600; letter-spacing: 0; } .skin-cozy .cart-line__price strong { font-family: var(--serif); font-weight: 600; } .skin-cozy .cart-line__price strong.is-sale { color: var(--accent-ink); } .skin-cozy .cart-qty { border-width: 2px; background: var(--white); } .skin-cozy .woocommerce-cart-form .cart-qty input.qty.input-text { background: transparent; border-radius: 0; box-shadow: none; font-family: var(--serif); font-weight: 600; } .skin-cozy .cart-qty button:active:not(:disabled) { background: var(--butter); } .skin-cozy :is(.cart-line__meta, .co-item__info) dl.variation dd.variation-Offre p { background: var(--accent); font-family: var(--serif); font-size: 12px; transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(43, 27, 23, .14); } .skin-cozy .cart-coupon__label { font-family: var(--serif); font-size: 16px; font-weight: 600; } /* The welcome code: the wheel ticket's look (dashed cherry on butter). */ .skin-cozy .code-chip { height: 36px; padding: 0 14px; border: 2px dashed var(--accent); border-radius: 999px; background: var(--butter); font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .06em; transform: rotate(-2deg); } .skin-cozy .code-chip:hover { background: var(--card); color: var(--ink); border-style: dashed; } .skin-cozy .coupon-hint > span { font-family: var(--serif); font-weight: 600; color: var(--accent-ink); } /* ---------- Summary: the total in Fredoka, free delivery and savings as stickers ---------- */ .skin-cozy :is(.cart-summary__rows, .co-totals) .order-total :is(dt, dd) { font-family: var(--serif); font-weight: 600; } .skin-cozy :is(.cart-summary__rows, .co-totals) .order-total dd { font-size: 26px; } .skin-cozy :is(.cart-summary__rows, .co-totals) .is-free { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--sky); font-family: var(--serif); font-weight: 600; transform: rotate(-2deg); } .skin-cozy .cart-summary__rows > div { border-bottom: 2px dotted var(--line-strong); } .skin-cozy .cart-summary__rows .order-total { border-bottom: 0; } .skin-cozy .cart-summary__savings { padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 14px; font-weight: 500; transform: rotate(-1deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .14); } .skin-cozy .cart-summary__savings :is(strong, .icon) { color: var(--white); } .skin-cozy .cart-summary__note { color: var(--ink-2); } .skin-cozy :is(.cart-summary__rows, .co-totals) .cart-discount dd { color: var(--accent-ink); } .skin-cozy .cart-summary__rows .woocommerce-remove-coupon, .skin-cozy .co-totals .woocommerce-remove-coupon { color: var(--ink-2); } /* Phones and tablets: the total bar is cream with rounded top corners, like the product buy bar. */ @media (max-width: 1023px) { .skin-cozy.woocommerce-cart .cart-sticky { background: rgba(255, 250, 240, .97); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 24px rgba(43, 27, 23, .1); } .skin-cozy .cart-sticky__total strong { font-family: var(--serif); font-weight: 600; font-size: 20px; } } /* Toast after a cart update. */ .skin-cozy .cart-toast { background: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 15px; box-shadow: 0 6px 0 rgba(43, 27, 23, .12), 0 16px 32px rgba(43, 27, 23, .2); } .skin-cozy .cart-toast__icon { background: var(--butter); color: var(--accent); } /* ---------- Empty cart: a butter sticker card, like the 404 and empty favourites ---------- */ .skin-cozy .cart-empty-state { max-width: 640px; padding: 40px 24px 36px; border-radius: 36px; background: var(--butter); } .skin-cozy .cart-empty-state__icon { background: var(--white); color: var(--accent); transform: rotate(-6deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .12); } .skin-cozy .commerce .cart-empty-state ~ .cart-rec { border-top: 0; } @media (max-width: 767px) { .skin-cozy .cart-empty-state { padding: 32px 20px 28px; border-radius: 28px; } } /* ---------- Rows under the cart: a wavy thread instead of the hairline ---------- */ .skin-cozy .commerce .cart-rec { border-top: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4q6-6 12 0t12 0' fill='none' stroke='%23e6d0a5' stroke-width='2'/%3E%3C/svg%3E") repeat-x top / 24px 8px; } .skin-cozy .commerce .cart-empty-state ~ .cart-rec:first-of-type { background: none; } /* Room for the cards' hover lift and shadow inside the scroller (as on the other carousels). */ .skin-cozy .commerce .cart-rec .carousel__track { padding-top: 8px; padding-bottom: 28px; margin-top: -8px; margin-bottom: -28px; } /* ---------- Checkout ---------- */ .skin-cozy form.checkout h2 { font-weight: 600; } .skin-cozy .woocommerce form.checkout .form-row label { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .woocommerce form.checkout .form-row .optional { font-family: var(--font); font-size: 13px; } .skin-cozy .woocommerce form .woocommerce-invalid :is(.input-text, .select2-selection) { background-color: #fff6f7; } /* The city list waiting for the governorate looks as in the express form: white, dashed, ink chevron (not butter). */ .skin-cozy .select2-container--default.select2-container--disabled .select2-selection--single { background: var(--white); } .skin-cozy .select2-container--disabled .select2-selection__arrow { opacity: 1; } .skin-cozy .checkout-inline-error-message { color: var(--accent-ink); font-family: var(--serif); font-weight: 500; } .skin-cozy .checkout-inline-error-message::before { background: var(--accent-ink); } .skin-cozy .woocommerce form.checkout .validate-required.woocommerce-validated .input-text:not(:focus) { padding-right: 42px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8f62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; } .skin-cozy .woocommerce form.checkout .validate-required.woocommerce-validated textarea.input-text:not(:focus) { padding-right: 16px; background-image: none; } .skin-cozy :is(.cart-summary__rows, .co-totals) .order-total dt small { font-family: var(--font); font-weight: 400; } .skin-cozy .co-jump { border: 0; background: var(--butter); } .skin-cozy .co-jump strong { font-family: var(--serif); font-weight: 600; } .skin-cozy .woocommerce .co-coupon__row input { height: 48px; border-radius: 14px; } .skin-cozy .co-coupon__row .btn { min-height: 48px; } .skin-cozy .co-coupon__label { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .co-coupon, .skin-cozy .co-item { border-bottom: 2px dotted var(--line-strong); } .skin-cozy .co-item__thumb img { border-radius: 12px; } .skin-cozy .co-item__name { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .co-item__price { font-family: var(--serif); font-weight: 600; } .skin-cozy .co-item__qty { background: var(--accent); font-family: var(--serif); transform: rotate(-8deg); box-shadow: 0 0 0 2px var(--soft); } .skin-cozy .co-totals .order-total { border-top: 2px solid var(--line-strong); } .skin-cozy .co-coupon__msg :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { border-radius: 14px; } .skin-cozy .co-coupon__msg .woocommerce-message { background: var(--sky); } /* The single cash-on-delivery method as a ticket. */ .skin-cozy #payment .wc_payment_method { border: 2px solid var(--ink); box-shadow: 0 4px 0 rgba(43, 27, 23, .12); } .skin-cozy #payment .wc_payment_method::before { background-color: var(--accent); } .skin-cozy #payment .wc_payment_method > label { font-family: var(--serif); font-size: 16px; font-weight: 600; } .skin-cozy #payment .payment_box { color: var(--ink-2); } .skin-cozy .co-trust li { color: var(--ink-2); } .skin-cozy .co-trust .icon { color: var(--accent); } /* -- end 4f -- */ /* -- 4g pages (account, favourites, contact, La Maison, 404, tracking lookup) -- */ /* Small buttons in these pages (.btn--sm lost to the generic Cozy button size, 0,2,1). */ .skin-cozy :is(.dash, .empty-state .search-inline) .btn.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; } /* Stickers shared by the page heads: the eyebrow becomes a tilted cherry pill (white on cherry, AA). */ .skin-cozy .favs__head .eyebrow, .skin-cozy.error404 .empty-state .eyebrow { display: inline-block; padding: 5px 13px 4px; border-radius: 999px; background: var(--accent); color: var(--white); transform: rotate(-3deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .12); } /* The 4a eyebrow colour (--accent-ink) is (0,4,1) through :is(): keep white text on the cherry stickers. */ .skin-cozy .maison__hero .maison__hero-text p.eyebrow, .skin-cozy .favs .favs__head p.eyebrow, .skin-cozy.error404 .empty-state p.eyebrow { color: var(--white); } /* ---------- La Maison ---------- */ .skin-cozy .maison__hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .skin-cozy .maison__aside img { border-radius: 28px; } .skin-cozy .maison__content .is-lead { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; } /* Principles: a cherry number chip (like the craft list) instead of "01 —" in the text. */ .skin-cozy .principles { counter-reset: principle; } /* Whole words only: the core Columns block sets word-break: break-word, which split "L’intem/porel" beside the chip; a title too long for the row now drops whole under the chip instead. */ .skin-cozy .principles h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; word-break: normal; overflow-wrap: normal; } /* 1024–1279: the three cards are too narrow for chip + title on one row (112–162px), so the chip sits on top in all three. */ @media (min-width: 1024px) and (max-width: 1279px) { .skin-cozy .principles h3 { flex-direction: column; align-items: flex-start; gap: 8px; } } .skin-cozy .principles h3::before { counter-increment: principle; content: counter(principle); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 15px; } /* Promises: one butter band with white icon discs, close to the principles. */ .skin-cozy .maison__body { padding-bottom: 40px; } .skin-cozy .promises { margin: 0 var(--gutter); padding: 28px 22px; border: 0; border-radius: 32px; background: var(--butter); } .skin-cozy .promises__list { gap: 28px 16px; } .skin-cozy .promises__list .icon { box-sizing: content-box; margin-bottom: 4px; padding: 10px; border-radius: 50%; background: var(--white); color: var(--accent); } .skin-cozy .promises__list h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .skin-cozy .promises__list p { color: var(--ink-2); } @media (min-width: 1024px) { .skin-cozy .maison__body { padding-bottom: 72px; } .skin-cozy .promises { padding: 40px; } .skin-cozy .promises__list h3 { font-size: 21px; } } /* ---------- Contact ---------- */ .skin-cozy .contact__ways > li:nth-child(3n+1) .way { background: var(--butter); } .skin-cozy .contact__ways > li:nth-child(3n+2) .way { background: var(--sky); } .skin-cozy .contact__ways > li:nth-child(3n+3) .way { background: var(--blush); } .skin-cozy .way { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; } .skin-cozy .way .icon { box-sizing: content-box; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .72); } .skin-cozy .way__label { font-family: var(--serif); font-size: 14px; font-weight: 500; color: var(--ink-2); } .skin-cozy .way__value { text-wrap: pretty; } @media (hover: hover) { .skin-cozy a.way { transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .skin-cozy a.way:hover { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 6px 0 rgba(43, 27, 23, .08); } } /* Form result: the Cozy notice (sky with a check, blush for errors). */ .skin-cozy .contact__form-wrap .form-status { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 12px 16px 12px 12px; border-radius: 18px; font-family: var(--serif); font-size: 15px; font-weight: 500; } .skin-cozy .contact__form-wrap .form-status--ok { background: var(--sky); color: var(--ink); } .skin-cozy .contact__form-wrap .form-status--ok::before { content: "✓"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--white); color: var(--accent); font-weight: 700; } .skin-cozy .contact__form-wrap .form-status--error { padding-left: 16px; background: var(--blush); color: #8a1020; } /* FAQ: butter cards with a round cherry plus that turns into a cross. */ .skin-cozy .contact__faq .accordion { display: grid; gap: 10px; border-top: 0; } .skin-cozy .contact__faq .accordion__item { padding: 0 18px; border: 0; border-radius: 20px; background: var(--butter); } .skin-cozy .contact__faq .accordion__item summary { gap: 14px; font-weight: 500; } .skin-cozy .contact__faq summary .icon { box-sizing: content-box; flex: none; padding: 5px; border-radius: 50%; background: var(--accent); color: var(--white); } .skin-cozy .contact__faq .accordion__body { padding-bottom: 18px; } /* Map: warm sepia instead of cold grey, to sit on the cream page. */ .skin-cozy .contact__map iframe { filter: grayscale(1) sepia(.28) contrast(1.02); } /* Small desktops: two equal columns so "Questions fréquentes" stays on one line beside "Écrivez-nous". */ @media (min-width: 1024px) and (max-width: 1279px) { .skin-cozy .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } .skin-cozy .contact__grid .display-3 { font-size: 42px; } } /* ---------- Account: login / register ---------- */ /* Segmented tabs: butter track, ink pill that slides to the chosen tab. */ .skin-cozy .auth__tabs { position: relative; padding: 5px; background: var(--butter); } .skin-cozy .auth__tabs button { position: relative; z-index: 1; height: 46px; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink-2); } .skin-cozy .auth__tabs [aria-selected="true"] { background: var(--ink); color: var(--cream); box-shadow: 0 3px 0 rgba(43, 27, 23, .2); } @supports selector(:has(*)) { .skin-cozy .auth__tabs::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); box-shadow: 0 3px 0 rgba(43, 27, 23, .2); transition: transform .3s var(--ease); } .skin-cozy .auth__tabs:has(#tab-register[aria-selected="true"])::before { transform: translateX(100%); } .skin-cozy .auth__tabs [aria-selected="true"] { background: transparent; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .skin-cozy .auth__tabs::before { transition: none; } } .skin-cozy .auth input.input-text:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* Rounded checkbox, cherry when ticked (the native one was square and black). */ .skin-cozy .check input { -webkit-appearance: none; appearance: none; display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--muted); border-radius: 7px; background: var(--white); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); } .skin-cozy .check input::after { content: ""; width: 10px; height: 5px; border: solid var(--white); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .15s var(--ease); } .skin-cozy .check input:hover { border-color: var(--ink); } .skin-cozy .check input:checked { border-color: var(--accent); background: var(--accent); } .skin-cozy .check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); } .skin-cozy .check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Photo: a small welcome sticker; on desktop the perks become a cream sticker card. */ .skin-cozy .auth__media::after { content: "Bienvenue ✨"; content: "Bienvenue ✨" / ""; position: absolute; top: 16px; left: 16px; padding: 6px 14px 5px; border-radius: 999px; background: var(--accent); color: var(--white); font: 600 15px/1.2 var(--serif); transform: rotate(-4deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .12); } @media (min-width: 1024px) { .skin-cozy .auth__media::after { top: 24px; left: 24px; font-size: 17px; padding: 7px 16px 6px; } .skin-cozy .auth__perks { left: 20px; right: 20px; bottom: 20px; padding: 22px 24px 18px; border-radius: 24px; background: rgba(255, 250, 240, .96); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 30px rgba(43, 27, 23, .14); transform: rotate(-1deg); } .skin-cozy .auth__perks-title { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .skin-cozy .auth__perks li { color: var(--ink-2); } .skin-cozy .auth__perks .icon { box-sizing: content-box; flex: none; padding: 7px; border-radius: 50%; background: var(--butter); color: var(--accent); } .skin-cozy .auth__perks li:nth-child(2) .icon { background: var(--sky); } .skin-cozy .auth__perks li:nth-child(3) .icon { background: var(--blush); } } /* Lost password / new password: a butter card with a key sticker. */ .skin-cozy .auth__card { padding: 28px 22px 24px; border-radius: 32px; background: var(--butter); } .skin-cozy .auth__card::before { content: "🔑"; content: "🔑" / ""; display: block; margin-bottom: 12px; font-size: 44px; line-height: 1; } .skin-cozy .auth__card--sent::before { content: "💌"; content: "💌" / ""; } .skin-cozy .auth__card :is(.auth__note, .auth__lead) { color: var(--ink-2); } .skin-cozy .auth__card .btn + .auth__note { margin-top: 16px; } @media (min-width: 768px) { .skin-cozy .auth__card { padding: 40px; } } /* ---------- Account: logged in ---------- */ .skin-cozy .woocommerce-MyAccount-navigation a { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .woocommerce-MyAccount-navigation .is-active a { color: var(--cream); } @media (min-width: 1024px) { .skin-cozy .woocommerce-MyAccount-navigation a { border-radius: 999px; padding: 0 18px; } } .skin-cozy .dash__order { border: 2px solid var(--line-strong); border-radius: 24px; } .skin-cozy .dash__order-main strong, .skin-cozy .dash__card-title { font-family: var(--serif); font-weight: 600; } .skin-cozy .dash__order-label { color: var(--ink-2); } .skin-cozy .dash__cards > li:nth-child(3n+1) .dash__card { background: var(--butter); } .skin-cozy .dash__cards > li:nth-child(3n+2) .dash__card { background: var(--sky); } .skin-cozy .dash__cards > li:nth-child(3n+3) .dash__card { background: var(--blush); } .skin-cozy .dash__card { border-radius: 24px; } .skin-cozy .dash__card .muted { color: var(--ink-2); } .skin-cozy .dash__card .icon { box-sizing: content-box; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .72); } .skin-cozy .woocommerce-Address { border-radius: 24px; background: var(--butter); } .skin-cozy :is(.woocommerce-Address-title h2, .woocommerce-EditAccountForm legend) { font-family: var(--serif); font-weight: 600; } .skin-cozy .woocommerce-Address-title .edit { font-family: var(--serif); font-weight: 600; } @media (hover: hover) { .skin-cozy .dash__card { transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .skin-cozy .dash__card:hover { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 6px 0 rgba(43, 27, 23, .08); } } /* ---------- Favourites: a blush band like the shop's, count as a sticker ---------- */ .skin-cozy .favs { padding-top: 8px; } .skin-cozy .favs__head { margin: 0 0 24px; padding: 18px 20px 24px; border-radius: 28px; background: var(--blush); } .skin-cozy .favs__head .eyebrow { margin-bottom: 10px; } .skin-cozy .favs__head .display-1 { font-size: 46px; line-height: .98; } .skin-cozy .favs__head .lead { margin-top: 10px; color: var(--ink-2); text-wrap: pretty; } .skin-cozy .favs__empty { margin: 0; } @media (min-width: 1024px) { .skin-cozy .favs { padding-top: 8px; } .skin-cozy .favs__head { margin-bottom: 32px; padding: 28px 40px 36px; border-radius: 32px; } .skin-cozy .favs__head .display-1 { font-size: 72px; } } /* ---------- 404 and empty states ---------- */ .skin-cozy .empty-state :is(.lead, .display-1, .display-3) { text-wrap: balance; } .skin-cozy.error404 .empty-state .eyebrow { font-size: 20px; padding: 6px 16px 5px; transform: rotate(-4deg); } /* Chips: white on the butter card (sand vanished on it); univers in their own colour. */ .skin-cozy .empty-state .chip { background: var(--white); box-shadow: inset 0 0 0 2px var(--line-strong); transition: box-shadow .15s var(--ease), transform .15s var(--ease); } .skin-cozy .empty-state .chip:hover { box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy .empty-state .chip:active { transform: translateY(1px); } .skin-cozy .empty-state .chip--femme { background: var(--blush); box-shadow: none; } .skin-cozy .empty-state .chip--homme { background: var(--sky); box-shadow: none; } .skin-cozy .empty-state :is(.chip--femme, .chip--homme):hover { box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy .empty-state .chip .muted { color: var(--ink-2); } @media (prefers-reduced-motion: no-preference) { .skin-cozy.error404 .empty-state::before { animation: cozy-wobble 3.2s ease-in-out infinite; } .skin-cozy .favs__icon .icon { animation: cozy-beat 2.4s ease-in-out infinite; } } @keyframes cozy-wobble { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } } @keyframes cozy-beat { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } } /* ---------- /track-order/ lookup (plugin template; the order view is block 4i) ---------- */ .skin-cozy .ufc-ty-empty { border: 0; border-radius: 32px; background: var(--butter); } .skin-cozy .ufc-ty-empty::before { content: "📦"; content: "📦" / ""; display: block; margin-bottom: 10px; font-size: 48px; line-height: 1; } .skin-cozy .ufc-ty-empty__title { font-weight: 600; letter-spacing: -0.015em; } .skin-cozy .ufc-ty-empty__text { color: var(--ink-2); text-wrap: balance; } .skin-cozy .ufc-ty-empty__error { border-radius: 14px; background: var(--blush); } .skin-cozy .ufc-ty-lookup label { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .ufc-ty-lookup input { border-radius: 14px; font-family: inherit; } .skin-cozy .ufc-ty-lookup input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .skin-cozy .ufc-ty-lookup .ufc-ty-cta { background: var(--ink); color: var(--cream); font: 600 16px var(--serif); box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: background-color .2s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy .ufc-ty-lookup .ufc-ty-cta:hover { background: var(--accent); color: var(--white); } .skin-cozy .ufc-ty-lookup .ufc-ty-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } .skin-cozy .ufc-ty-empty__help { color: var(--ink-2); } .skin-cozy .ufc-ty-empty__help a { display: inline-block; padding: 6px 0; font-family: var(--serif); font-weight: 600; } /* Helper links under the tracking lookup and the lost-password cards: the cherry wavy underline of every other Cozy text link (.link-underline, block 4b) instead of the straight black one. */ .skin-cozy :is(.ufc-ty-empty__help a, .auth__note a, .auth__back span) { padding-bottom: 7px; text-decoration: none; font-family: var(--serif); font-weight: 600; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3Q3 0 6 3T12 3' fill='none' stroke='%23d7263d' stroke-opacity='.8' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100% / 12px 6px; transition: color .2s var(--ease); } .skin-cozy .auth__back { color: var(--ink); transition: color .2s var(--ease); } .skin-cozy :is(.ufc-ty-empty__help a:hover, .auth__note a:hover, .auth__back:hover) { color: var(--accent); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .skin-cozy :is(.ufc-ty-empty__help a:hover, .auth__note a:hover, .auth__back:hover span) { animation: cozy-wave .7s linear infinite; } } /* -- end 4g -- */ /* -- 4h search (panel, suggestions, results) -- */ /* Header field: a pill like the header bar, with nothing behind it (the panel wrapper stays transparent). */ .skin-cozy .search-panel__form { padding-left: 22px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--line), 0 14px 34px rgba(43, 27, 23, .12); } .skin-cozy .search-panel__form > .icon-search, .skin-cozy .search-inline > .icon-search { color: var(--accent); } .skin-cozy .search-panel__close:hover { background: var(--soft); } .skin-cozy .search-panel__submit { font-family: var(--serif); font-size: 15px; font-weight: 600; box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: background-color .2s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy .search-panel__submit:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } .skin-cozy .search-inline { border-width: 1.5px; } @media (max-width: 767px) { /* Arrow-only submit on phones (beats the 404 field's .btn--sm padding in 4g). */ .skin-cozy :is(.empty-state, .plp__header) .search-inline .btn.search-submit { width: 44px; padding: 0; } } .skin-cozy .search-inline:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215, 38, 61, .16); } /* the 4a field ring */ /* Suggestions: a cream card, Fredoka names with the typed letters in cherry, pastel chips per univers. */ .skin-cozy .suggest { padding: 10px; border-radius: 24px; background: var(--cream); box-shadow: 0 0 0 1.5px var(--line), 0 18px 44px rgba(43, 27, 23, .16); } .skin-cozy .suggest.is-split { padding: 18px; } .skin-cozy .suggest.is-split .suggest__side { border-right: 1.5px solid var(--line); } .skin-cozy .suggest__label { margin: 0 10px; font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); } .skin-cozy .suggest__clear { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; } .skin-cozy .suggest__row { padding: 6px 10px; border-radius: 16px; } .skin-cozy :is(a.suggest__row:hover, button.suggest__row:hover, .suggest__row.is-active) { background: var(--white); box-shadow: 0 0 0 1.5px var(--line); } .skin-cozy .suggest__name { font-family: var(--serif); font-size: 16px; font-weight: 500; } .skin-cozy .suggest__name b { font-weight: 600; color: var(--accent); } .skin-cozy .suggest__meta { color: var(--muted); } .skin-cozy .suggest__icon { color: var(--accent); } .skin-cozy .suggest__pic { border-radius: 12px; background: var(--butter); } .skin-cozy .suggest__thumb { border-radius: 14px; background: var(--butter); } .skin-cozy .suggest--femme .suggest__thumb { background: var(--blush); } .skin-cozy .suggest--homme .suggest__thumb { background: var(--sky); } .skin-cozy .suggest__dot { box-shadow: 0 0 0 3px var(--white), 0 0 0 4.5px var(--line-strong); } .skin-cozy .suggest__price { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .suggest__chips { padding: 4px 10px 10px; } .skin-cozy .suggest__chip { gap: 8px; border: 0; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-strong); font-family: var(--serif); font-size: 15px; font-weight: 500; transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy .suggest__chip small { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--ink-2); } .skin-cozy .suggest__chip.suggest--femme { background: var(--blush); box-shadow: none; } .skin-cozy .suggest__chip.suggest--homme { background: var(--sky); box-shadow: none; } .skin-cozy .suggest__chip.suggest--enfant { background: var(--butter); box-shadow: none; } .skin-cozy :is(a.suggest__chip:hover, .suggest__chip.is-active) { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--ink); } .skin-cozy .suggest__chip:not([class*="suggest--"]) small { background: var(--cream); } .skin-cozy .suggest__chip.is-soon { border: 1.5px dashed var(--line-strong); box-shadow: none; color: var(--ink-2); } .skin-cozy .suggest__chip.is-soon:not([class*="suggest--"]) { background: transparent; } .skin-cozy .suggest__empty { padding: 10px 10px 4px; font-family: var(--serif); font-size: 17px; font-weight: 500; } .skin-cozy .suggest__empty::before { content: "🧶"; margin-right: 6px; } .skin-cozy .suggest__empty b { color: var(--accent); } .skin-cozy .suggest__all { min-height: 50px; font-family: var(--serif); font-size: 16px; font-weight: 600; box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: background-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy .suggest__all .suggest__icon { color: currentColor; } .skin-cozy .suggest__all:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } .skin-cozy .suggest__all--quiet { border: 0; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-strong); } .skin-cozy .suggest__all--quiet:hover, .skin-cozy .suggest__all--quiet.is-active { background: var(--soft); } .skin-cozy .suggest.is-cards .suggest__pic { border-radius: 16px; } .skin-cozy .suggest.is-wide .suggest__all { margin-left: 10px; } /* -- end 4h -- */ /* -- 4i thank-you pages + upsell -- */ /* Order received (woocommerce/checkout/thankyou.php), the /track-order/ order view (plugin template) and the thank-you upsell (inc/upsell.php). Classic rules: thankyou.css + fast-checkout.css. Text on the pastels uses --ink / --ink-2 (--muted and cherry fail AA there at small sizes). */ /* ---------- Shared: cherry check sticker, next steps ---------- */ .skin-cozy :is(.thanks__check, .ufc-ty-wrap .ufc-ty-check) { background: var(--accent); color: var(--white); transform: rotate(-6deg); box-shadow: 0 4px 0 rgba(43, 27, 23, .16); } .skin-cozy .ufc-ty-wrap .ufc-ty-check { font-family: var(--serif); font-size: 28px; font-weight: 600; } .skin-cozy .next-steps__icon { border: 0; background: var(--butter); color: var(--ink); } .skin-cozy .next-steps__item:nth-child(2) .next-steps__icon { background: var(--sky); } .skin-cozy .next-steps__item:nth-child(3) .next-steps__icon { background: var(--blush); } .skin-cozy .next-steps__item:nth-child(4) .next-steps__icon { background: var(--butter); } .skin-cozy .next-steps__item.is-done .next-steps__icon { background: var(--accent); color: var(--white); transform: rotate(-6deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .16); } .skin-cozy .next-steps__item:not(:last-child)::before { width: 0; background: none; border-left: 2px dashed var(--line-strong); } .skin-cozy .next-steps__title { font-family: var(--serif); font-size: 17px; font-weight: 600; } @media (min-width: 768px) { .skin-cozy .next-steps__item:not(:last-child)::before { width: auto; height: 0; border-left: 0; border-top: 2px dashed var(--line-strong); } } /* ---------- Order received ---------- */ .skin-cozy .thanks__hero { border-radius: 32px; background: var(--butter); } .skin-cozy .thanks .thanks__hero .woocommerce-thankyou-order-received { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; text-wrap: pretty; } .skin-cozy .thanks .thanks__hero .woocommerce-order-overview { color: var(--ink-2); } .skin-cozy .thanks .thanks__hero .woocommerce-order-overview li, .skin-cozy .thanks__pay { border-top: 2px dashed rgba(43, 27, 23, .16); } .skin-cozy .thanks .thanks__hero .woocommerce-order-overview strong { font-family: var(--serif); font-size: 17px; font-weight: 600; } .skin-cozy .thanks__pay { color: var(--ink-2); } @media (min-width: 768px) { .skin-cozy .thanks__hero { padding: 32px 32px 28px; } .skin-cozy .thanks .thanks__hero .woocommerce-thankyou-order-received { font-size: 28px; } } /* Order details: a white receipt card beside (desktop) or under the main column. */ .skin-cozy .thanks__side { border: 2px solid var(--line); border-radius: 28px; background: var(--white); } .skin-cozy .thanks .thanks__side h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; } .skin-cozy .thanks__side table.shop_table :is(th, td) { border-bottom-color: var(--line); } .skin-cozy .thanks__side .product-name { font-family: var(--serif); font-weight: 500; } .skin-cozy .thanks__side .product-quantity { font-weight: 500; color: var(--ink-2); } .skin-cozy .thanks__side table.shop_table tfoot th { color: var(--ink-2); } .skin-cozy .thanks__side table.shop_table tfoot tr:nth-last-child(2) > * { font-family: var(--serif); font-size: 18px; font-weight: 600; } .skin-cozy .thanks-item__img { border-radius: 12px; background: var(--soft); } .skin-cozy .thanks__side .wc-item-meta { color: var(--ink-2); } /* ---------- /track-order/ order view (the lookup form is block 4g) ---------- */ .skin-cozy .ufc-ty-wrap .ufc-ty-banner { padding: 36px 22px 30px; border-radius: 32px; background: var(--butter); } .skin-cozy .ufc-ty-wrap .ufc-ty-greeting { font-size: 40px; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; } .skin-cozy .ufc-ty-wrap .ufc-ty-greeting span { font-style: normal; color: var(--accent); } .skin-cozy .ufc-ty-wrap .ufc-ty-msg-fr { color: var(--ink-2); text-wrap: pretty; } .skin-cozy .ufc-ty-wrap .ufc-ty-msg-fr strong { font-weight: 600; } .skin-cozy .ufc-ty-wrap .ufc-ty-msg-ar { padding: 12px 16px; border: 0; border-radius: 18px; background: var(--white); color: var(--ink-2); } .skin-cozy .ufc-ty-wrap .ufc-ty-order-num { padding: 7px 16px 6px; border: 0; background: var(--ink); color: var(--cream); font-family: var(--serif); font-size: 14px; font-weight: 500; transform: rotate(-1.5deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .16); } .skin-cozy .ufc-ty-wrap .ufc-ty-order-num strong { font-weight: 600; color: var(--cream); } .skin-cozy .ufc-ty-wrap .ufc-ty-card { border: 2px solid var(--line); border-radius: 28px; } .skin-cozy .ufc-ty-wrap .ufc-ty-card-header { padding: 22px 22px 6px; } .skin-cozy .ufc-ty-wrap .ufc-ty-card-header h3 { font-size: 22px; letter-spacing: -0.015em; } .skin-cozy .ufc-ty-wrap .ufc-ty-row .label { color: var(--ink-2); } .skin-cozy .ufc-ty-wrap .ufc-ty-product-img { border-radius: 14px; } .skin-cozy .ufc-ty-wrap .ufc-ty-product-name { font-family: var(--serif); font-size: 15px; font-weight: 500; } .skin-cozy .ufc-ty-wrap .ufc-ty-product-qty { color: var(--ink-2); } .skin-cozy .ufc-ty-wrap .ufc-ty-product-price { font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .ufc-ty-wrap .ufc-ty-total-row--discount span:last-child { color: var(--accent); } .skin-cozy .ufc-ty-wrap .ufc-ty-total-row:last-child { font-family: var(--serif); font-weight: 600; } .skin-cozy .ufc-ty-wrap .ufc-ty-total-row:last-child span:last-child { font-size: 24px; } .skin-cozy .ufc-ty-wrap > .ufc-ty-cta { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 24px; padding: 0 22px; background: var(--ink); color: var(--cream); font-family: var(--serif); font-size: 16px; font-weight: 600; box-shadow: 0 3px 0 rgba(43, 27, 23, .28); transition: background-color .2s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); } .skin-cozy .ufc-ty-wrap > .ufc-ty-cta:hover { background: var(--accent); color: var(--white); } .skin-cozy .ufc-ty-wrap > .ufc-ty-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 27, 23, .28); } @media (min-width: 768px) { .skin-cozy .ufc-ty-wrap .ufc-ty-banner { padding: 44px 40px 36px; } .skin-cozy .ufc-ty-wrap .ufc-ty-greeting { font-size: 56px; } .skin-cozy .ufc-ty-wrap :is(.ufc-ty-card-header, .ufc-ty-row, .ufc-ty-product, .ufc-ty-totals) { padding-left: 28px; padding-right: 28px; } } /* ---------- Thank-you upsell: a pastel card in the order's univers colour ---------- */ .skin-cozy .upsell { --upsell-bg: var(--sky); border: 0; border-radius: 32px; background: var(--upsell-bg); } .skin-cozy .upsell--femme { --upsell-bg: var(--blush); } .skin-cozy .upsell--enfant { --upsell-bg: var(--butter); } .skin-cozy .upsell__kicker { margin-bottom: 16px; padding: 6px 14px 5px; background: var(--accent); color: var(--white); font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: 0; transform: rotate(-2deg); box-shadow: 0 3px 0 rgba(43, 27, 23, .14); } .skin-cozy .upsell h2.upsell__title { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; } .skin-cozy .upsell__title em { font-style: normal; color: var(--accent); text-decoration: underline wavy rgba(215, 38, 61, .38); text-decoration-thickness: .06em; text-underline-offset: .16em; text-decoration-skip-ink: none; } .skin-cozy .upsell__sub, .skin-cozy .upsell__note { color: var(--ink-2); } .skin-cozy .upsell__note { font-weight: 500; } .skin-cozy .upsell-item { border-top: 2px dashed rgba(43, 27, 23, .14); } .skin-cozy .upsell-item__img { border-radius: 18px; background: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); } .skin-cozy .upsell-item__cat { font-family: var(--serif); font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--ink-2); } .skin-cozy .upsell-item__name { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .skin-cozy .upsell-item__price { font-family: var(--serif); font-size: 17px; font-weight: 600; } .skin-cozy .upsell-item__price del { color: var(--ink-2); font-weight: 500; } .skin-cozy .upsell-item__price ins { color: var(--ink); } .skin-cozy .upsell-opt__label { font-family: var(--serif); font-size: 14px; font-weight: 600; } .skin-cozy .upsell-opt__current { font-weight: 500; color: var(--ink-2); } .skin-cozy .upsell-chip { min-height: 42px; padding: 6px 15px; border: 2px solid var(--white); border-radius: 999px; background: var(--white); font-family: var(--serif); font-size: 15px; font-weight: 500; } .skin-cozy .upsell-chip:hover { border-color: var(--ink); } .skin-cozy .upsell-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--cream); } .skin-cozy .upsell-chip.is-na { border-color: transparent; background: rgba(255, 255, 255, .5); color: var(--ink-2); text-decoration: line-through; } .skin-cozy .upsell-chip--dot { width: 42px; height: 42px; min-height: 0; padding: 5px; border: 0; box-shadow: none; } .skin-cozy .upsell-chip--dot:hover { box-shadow: inset 0 0 0 2px var(--ink-2); } .skin-cozy .upsell-chip--dot[aria-pressed="true"] { background: var(--white); box-shadow: inset 0 0 0 2.5px var(--ink); } .skin-cozy .upsell-chip--dot.is-na { background: rgba(255, 255, 255, .5); text-decoration: none; } .skin-cozy .upsell-item__error { font-family: var(--serif); font-size: 14px; color: #8a1020; } .skin-cozy .upsell-item__add { min-height: 50px; font-size: 16px; } .skin-cozy .upsell-item__done { display: inline-flex; align-items: center; margin-top: 12px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--white); color: var(--ink); font-family: var(--serif); font-size: 15px; font-weight: 600; } .skin-cozy .upsell-item__done svg { margin: 0; background: var(--accent); } .skin-cozy .upsell-item__undo { display: flex; color: var(--ink-2); font-family: var(--serif); font-size: 14px; font-weight: 500; } .skin-cozy .upsell-item__undo:hover { color: var(--accent); } .skin-cozy .upsell__status { font-family: var(--serif); font-size: 15px; font-weight: 600; } /* Phones: three "T1 (38-40)" pills on one line (they need 278 px at 9 px padding; the chips get 284 px on /track-order/ and 288 px on order received at 360). */ @container (max-width: 340px) { .skin-cozy .upsell-chip:not(.upsell-chip--dot) { padding-left: 9px; padding-right: 9px; font-size: 14px; } } @media (min-width: 768px) { .skin-cozy .upsell { padding: 32px 32px 10px; } .skin-cozy .ufc-ty-wrap .upsell { padding-left: 28px; padding-right: 28px; } /* Same edge as the cards under it. */ .skin-cozy .upsell h2.upsell__title { font-size: 40px; } } /* -- end 4i -- */