/* Smile Lab USA — design foundation: motion tokens, depth, component layer. Stage 1 of docs/DESIGN-PLAN.md. Loaded last in on every page, so it wins over the theme and over the page-builder skins. Palette: cream #faf7f2 · warm card #f1ece4 · forest #14322b · gold #d8a548 ink #1c1b19 · copper #b4400f (actions only) */ /* ------------------------------------------------------------- tokens ---- */ :root { /* Warby Parker two-family motion scale */ --dur-fast: 150ms; /* productive: press, swatch ring, hover colour */ --dur-base: 250ms; /* productive: image zoom, panel colour */ --dur-entrance: 500ms; /* expressive: content appearing */ --ease-productive: cubic-bezier(.25, 0, .35, .95); --ease-expressive: cubic-bezier(.25, .85, .35, 1); /* two levels of depth, tuned for cream so they read as air, not as grey */ --shadow-soft: 0 2px 8px rgba(20, 50, 43, .06); --shadow-lift: 0 8px 24px rgba(20, 50, 43, .10); /* radii */ --radius-card: 12px; --radius-chip: 8px; --sl-cream: #faf7f2; --sl-cream-warm: #f1ece4; --sl-forest: #14322b; --sl-gold: #d8a548; --sl-ink: #1c1b19; --sl-copper: #b4400f; --sl-copper-dark: #9c370d; --sl-hairline: #eee7db; } /* --------------------------------------------- transition hardening ------ */ /* Never `transition: all` — every reference site lists concrete properties. Accordion height animations are deliberately left alone. */ .dev-btn, .atc-btn, a.ecom__element--button, .ecom-menu_title, .ecom-social-icon, .card-swatch, .text-block, .divi-cont { transition-property: background-color, border-color, color, box-shadow, opacity, transform; transition-duration: var(--dur-fast); transition-timing-function: var(--ease-productive); } img { transition-property: opacity, transform; } /* ------------------------------------------------------------ buttons ---- */ /* One action colour, one shape, one reaction: 150 ms colour darkening. */ a.dev-btn, a.atc-btn, button.atc-btn, a.ecom__element--button, button.ecom-product-single__add-to-cart--submit { border-radius: 50px !important; } /* one copper, one reaction: sl-motion.js tags the buttons that are actually filled with the action colour, so outline and light buttons are untouched */ [data-slcta] { background-color: var(--sl-copper) !important; color: #fff !important; } [data-slcta]:hover, [data-slcta]:focus-visible { background-color: var(--sl-copper-dark) !important; color: #fff !important; } a.dev-btn:focus-visible, a.atc-btn:focus-visible, a.ecom__element--button:focus-visible, button.ecom-product-single__add-to-cart--submit:focus-visible { outline: 2px solid var(--sl-forest); outline-offset: 2px; } /* ------------------------------------------------------- product cards --- */ /* Ritual rule: the image zooms inside a clipped tile, the card itself never moves. Also kills the inverted hover where the card border only faded out. */ /* clip only — existing radii and display modes are left exactly as they are, so nothing in the composition moves */ a.ecom-image-picture-link, .offer-card .offer-img, .smile-card .video-wrapper-sec, [data-slmedia] { overflow: hidden; } a.ecom-image-picture-link img, .offer-card .offer-img img, .smile-card .video-wrapper-sec img, [data-slmedia] img { transition: transform var(--dur-base) var(--ease-productive); will-change: transform; } a.ecom-image-picture-link:hover img, [data-slcard]:hover a.ecom-image-picture-link img, [data-slcard]:focus-within a.ecom-image-picture-link img, .offer-card:hover .offer-img img, .smile-card:hover .video-wrapper-sec img, [data-slmedia]:hover img { transform: scale(1.05); } /* the card body stays put — only its depth answers */ [data-slcard], .offer-card, .smile-card, .transformation-card { transition: box-shadow var(--dur-base) var(--ease-productive), border-color var(--dur-base) var(--ease-productive); } [data-slcard]:hover, .offer-card:hover, .smile-card:hover, .transformation-card:hover { box-shadow: var(--shadow-lift); } /* never let a hover erase the card outline (the old inverted behaviour where the border faded from grey to white and the card looked broken) */ [data-slcard]:hover, [data-slcard]:focus-within { border-color: var(--sl-hairline); } /* --------------------------------------------------------------- depth --- */ .slsteps .slsteps__list > li, .slh-col, .sl-hsa--card { box-shadow: var(--shadow-soft); } /* ------------------------------------------------ background outliers ---- */ /* Six background families reduced to three: cream, forest, white card. Pink, lavender, cold grey and cold cyan panels are repainted in place — backgrounds and their bound text only, composition untouched. */ /* pink → cream (PDP benefits panel, variant picker) */ .ecom-core.ecom-53pybkwo5pe, .ecom-core.ecom-sb92ec1zb5n, .ecom-core.ecom-l4hdckbsdve .ecom-product-single__variant-picker-container { background-color: var(--sl-cream) !important; } .ecom-core.ecom-l4hdckbsdve .ecom-product-single__variant-picker-container { border: 1px solid var(--sl-hairline) !important; border-radius: var(--radius-card) !important; } /* lavender → cream (PDP reviews, PDP secondary panel) */ .ecom-core.ecom-e2oe8yaizd, .ecom-core.ecom-833fhfj451m { background-color: var(--sl-cream) !important; } /* cold grey-green panels → warm cream card (how-it-works) */ .ecom-core.ecom-1kr5m16ncej > .core__column--wrapper, .ecom-core.ecom-1u6y9o3k01o > .core__column--wrapper, .ecom-core.ecom-4z26xbrxlp > .core__column--wrapper, .ecom-core.ecom-eauu58cjtqo > .core__column--wrapper, .ecom-core.ecom-k47fndq4spk > .core__column--wrapper, .ecom-core.ecom-rtqpwundg > .core__column--wrapper, .ecom-core.ecom-s1mkpln67a > .core__column--wrapper, .ecom-core.ecom-whpmizl1u7 > .core__column--wrapper, .ecom-core.ecom-c96mj5a9xrt, .ecom-core.ecom-aixa9fcy35c .tabs__body, .ecom-core.ecom-aixa9fcy35c .tabs__navs { background-color: var(--sl-cream-warm) !important; color: var(--sl-ink) !important; } /* cold cyan / mint accordion (summer) → cream and forest */ .ecom-core.ecom-9c4chasvf3l .ecom-accordion__body > .ec-flex-wp { background-color: var(--sl-cream) !important; } .ecom-core.ecom-9c4chasvf3l .ecom-accordion__title.ecom-item-active { background-color: var(--sl-cream-warm) !important; color: var(--sl-forest) !important; } /* cold grey chips (blog tags, accordion icons) → cream */ .ecom-core.ecom-gqyov1xjpa .ecom-accordion__title .ecom-items--icon, .ecom-core.ecom-gqyov1xjpa .ecom-items.ecom-item-active .ecom-items--icon, .ecom-core.ecom-9h39rzmhw7 .ecom-shopify__article--tags-item a { background-color: var(--sl-cream-warm) !important; color: var(--sl-forest) !important; } .ecom-core.ecom-gqyov1xjpa .ecom-items:hover .ecom-items--icon { background-color: var(--sl-gold) !important; color: var(--sl-forest) !important; } /* cold table zebra (how-it-works fact table) → cream */ .ecom-core.ecom-0ly675cos4ba .ecom-element-table tbody tr, .ecom-core.ecom-0ly675cos4ba .ecom-element-table tbody tr:nth-child(2n) { background-color: var(--sl-cream) !important; } /* mint feature card in the comparison grid → gold-tinted cream */ .sl-feat { background: #fbf6ea !important; } /* Dawn's cold-grey scheme mapped onto cream, in case a section adopts it */ .color-background-2 { --color-background: 250, 247, 242; } /* ================================================================ motion == */ /* ---------------------------------------------------------- reveal ------- */ /* Applied only once sl-motion.js has confirmed IntersectionObserver support, so a page without JS shows everything. Opacity and transform only — no layout property is animated, the composition cannot shift. */ html.sl-mo [data-slrv] { opacity: 0; transform: translateY(12px); } html.sl-mo [data-slrv].sl-in { opacity: 1; transform: none; /* Apple cascade: one start, decreasing duration in 20 ms steps */ transition: opacity var(--slrv-d, var(--dur-entrance)) var(--ease-expressive), transform var(--slrv-d, var(--dur-entrance)) var(--ease-expressive); } /* ---------------------------------------------------------- header ------- */ /* Oura: sticky header rides up on `top`, no transform, no layout jump. */ .section-header { transition: top var(--dur-entrance) var(--ease-productive); } .section-header.sl-hdr-off { top: calc(-1 * var(--sl-hdr-h, 88px)); } /* -------------------------------------------------------- carousels ------ */ .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-slide { scroll-snap-align: start; } [data-slsnap] { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } [data-slsnap]::-webkit-scrollbar { display: none; } [data-slsnap] > * { scroll-snap-align: start; } /* stroke pagination, Aesop-style: thin dashes, active one gold and longer */ .slrail { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 16px auto 2px; padding: 0; list-style: none; } .slrail button { width: 22px; height: 2px; margin: 0; padding: 0; border: 0; border-radius: 2px; background: rgba(20, 50, 43, .22); cursor: pointer; appearance: none; transition: background-color var(--dur-base) var(--ease-productive), width var(--dur-base) var(--ease-productive); } .slrail button:hover { background: rgba(20, 50, 43, .42); } .slrail button[aria-current="true"] { width: 34px; background: var(--sl-gold); } /* native pagination of the page builder, restyled into the same strokes */ .swiper-pagination-bullet, .ecom-swiper-pagination-bullet, .ec_splide__pagination__page { width: 22px !important; height: 2px !important; margin: 0 4px !important; border: 0 !important; border-radius: 2px !important; background: rgba(20, 50, 43, .22) !important; opacity: 1 !important; transition: background-color var(--dur-base) var(--ease-productive), width var(--dur-base) var(--ease-productive); } .swiper-pagination-bullet-active, .ecom-swiper-pagination-bullet.ecom-swiper-pagination-bullet-active, .ec_splide__pagination__page.is-active { width: 34px !important; background: var(--sl-gold) !important; transform: none !important; } /* drag plus strokes replaces the chevrons, per the no-arrows rule */ .sl-paged .swiper-button-next, .sl-paged .swiper-button-prev, .sl-paged .ecom-swiper-button-next, .sl-paged .ecom-swiper-button-prev, .sl-paged .ec_splide__arrow { display: none !important; } /* ------------------------------------------------- reduced motion -------- */ @media (prefers-reduced-motion: reduce) { html.sl-mo [data-slrv], html.sl-mo [data-slrv].sl-in { opacity: 1 !important; transform: none !important; transition: none !important; } .section-header { transition: none !important; } a.ecom-image-picture-link:hover img, [data-slcard]:hover a.ecom-image-picture-link img, .offer-card:hover .offer-img img, .smile-card:hover .video-wrapper-sec img, [data-slmedia]:hover img { transform: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } @media print { html.sl-mo [data-slrv] { opacity: 1 !important; transform: none !important; } }