/* The prototype's styles for the buy box additions, with its tokens written out: ink #672c45, soft ink rgb(103 44 69 / 0.78), body font = the theme's body font. Sizes are the same at 1440px and 390px. */ /* Price row: price 17px/21px bold; struck one-time price 17px regular, soft ink; rating 14px/18px, soft ink, 16px after the struck price. On a phone the row stays on one line. */ .bb-price-was { font-weight: 400; color: rgb(103 44 69 / 0.78); } .bb-price-was[hidden] { display: none; } .rt-rating { display: inline-flex; align-items: center; gap: 10px; color: rgb(103 44 69 / 0.78); font-size: 14px; line-height: 18px; text-decoration: none; } .rt-rating strong { color: #672c45; font-weight: 700; } .rt-rating:hover { opacity: 0.8; } .rt-rating:focus-visible { outline: 3px solid #672c45; outline-offset: 4px; border-radius: 4px; } /* Stars fill to the rating: 4.7 / 5 = 94%. */ .rt-stars { --fill: calc(var(--rating) / 5 * 100%); flex: none; width: 90px; height: 17px; background: linear-gradient(90deg, #672c45 var(--fill), rgb(103 44 69 / 0.22) var(--fill)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 17'%3E%3Cpath d='M9 0l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L9 13.6l-5.4 3 1.2-6.1L.3 6.3l6.1-.7z'/%3E%3C/svg%3E") 0 0 / 18px 17px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 17'%3E%3Cpath d='M9 0l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L9 13.6l-5.4 3 1.2-6.1L.3 6.3l6.1-.7z'/%3E%3C/svg%3E") 0 0 / 18px 17px repeat-x; } /* The note inside the subscribe option. */ .rt-sub-note { display: block; margin-top: 3px; font-size: 14px; line-height: 18px; color: rgb(103 44 69 / 0.78); } /* Shipping and returns line, 18px under Add to cart. */ .rt-assure { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 18px; font-weight: 500; color: #672c45; } .rt-assure li { display: inline-flex; align-items: center; gap: 8px; } .rt-assure svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* The rep this visit is credited to, 16px under the shipping line: initials in a plum disc, then the sentence and a link to their My Site. */ .bb-rep { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgb(103 44 69 / 0.06); color: #672c45; font-size: 14px; line-height: 1.2; text-decoration: none; transition: background-color .15s ease; } .bb-rep:hover { background: rgb(103 44 69 / 0.1); } .bb-rep-initials { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #672c45; color: #fffcf8; font-size: 12px; font-weight: 600; letter-spacing: .02em; } .bb-rep-initials:empty { display: none; } .bb-rep-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bb-rep-text strong { font-weight: 600; } .bb-rep-role { font-size: 12px; line-height: 1.2; color: rgb(103 44 69 / 0.7); } .bb-rep-chevron { flex: none; margin-left: 2px; opacity: .55; } /* Made without chips, 16px under that. */ .rt-free { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; line-height: 1; color: rgb(103 44 69 / 0.78); } .rt-free > span:first-child { margin-right: 4px; } .rt-chip { padding: 6px 10px; border-radius: 999px; background: rgb(103 44 69 / 0.07); color: #672c45; font-weight: 500; } /* Description 17px/25px, 32px under the chips; award line 14px bold, under the description. */ .bb-description { margin-top: 32px; font-size: 17px; line-height: 25px; } /* The compact full-ingredient list. */ .bb-inci { margin-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 10px 0; } .bb-inci summary { cursor: pointer; font-size: 14px; line-height: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .bb-inci p { margin-top: 10px; font-size: 14px; line-height: 21px; } /* If the theme has no screen-reader-only helper yet. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Fitting the theme's buy box to the prototype. */ .bb .bb-price { align-items: center; gap: 12px; flex-wrap: wrap; } .bb .bb-price strong { font-size: 17px; line-height: 21px; } .bb .bb-price span { border-left: 0; padding-left: 0; font-size: inherit; } .bb .bb-price .rt-rating { margin-left: 4px; } .bb-price-was { font-size: 17px; line-height: 17px; } .bb .bb-description p { margin: 0; } .bb .bb-award-description { margin-top: 24px; font-size: 14px; line-height: 25px; } /* Oct 8 (Briton): above the description now */ .bb .bb-award-description + .bb-description { margin-top: 12px; } .bb .bb-purchase-options legend { font-size: 14px; line-height: 18px; font-weight: 500; margin-bottom: 4px; } .bb .bb-purchase-option { grid-template-columns: 16px 1fr auto; gap: 12px; margin-top: 8px; padding: 12px; border: 1px solid rgb(103 44 69 / 0.32); border-radius: 4px; } /* Oct 8 (Briton): the card's line matches the radio's โ€” 1px (a 1.25 rounds to 1 on 2x screens), plum at .32 */ .bb .bb-purchase-option.is-selected { border-color: #672c45; } .bb .bb-purchase-option span, .bb .bb-purchase-option strong { font-size: 17px; line-height: 21px; font-weight: 400; } .bb .bb-purchase-option .rt-sub-note { font-size: 14px; line-height: 18px; color: rgb(103 44 69 / 0.78); } /* The prototype's styles for the fit strip and the result section, tokens written out. Colours: ink #672c45, soft ink rgb(103 44 69 / 0.78), hairline rgb(103 44 69 / 0.16), surface #f7efe6, lime #e4e825, cream #fffbf5. Display serif = the theme's 'Fraunces' (as in assets/rootist-ferment.css); body = "Helvetica Neue". Content width = the theme's .rt-wrap, min(1260px, 87.5%). Sizes by width: display 48px/52px, 40px/44px from 1068px down, 32px/36px from 734px down; tile 28px/32px, 24px/28px, 21px/25px; intro 21px/29px, 19px/27px, 17px/25px. */ /* Fit strip */ .rt-fit { padding: 40px 0; background: #f7efe6; } .rt-fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin: 0 auto; padding: 0; list-style: none; } .rt-fit-grid li { display: flex; flex-direction: column; gap: 6px; } .rt-fit-q { margin: 0; font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); } .rt-fit-a { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 32px; color: #672c45; } /* tile size */ .rt-fit-d { margin: 0; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } @media (max-width: 734px) { .rt-fit-grid { grid-template-columns: minmax(0, 1fr); } } /* The result section */ .rt-claims { padding: 128px 0; } /* 88px from 734px down */ .rt-claims-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; } .rt-claims-visual { max-width: 560px; } .rt-claims .rt-eyebrow { font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); } .rt-claims .rt-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px; line-height: 52px; color: #672c45; } /* display size */ .rt-claims .rt-intro { font: 400 21px/29px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); margin-top: 20px; } /* intro size */ .rt-claims-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin: 36px 0 0; padding: 0; list-style: none; } .rt-claims-stats li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgb(103 44 69 / 0.16); } .rt-claims-value { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.01em; color: #672c45; } /* display size */ .rt-claims-label { font: 400 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-claims .rt-link { font: 700 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #672c45; text-decoration: none; } /* as the fermentation section's link */ .rt-claims .rt-actions { margin-top: 36px; } .rt-claims .rt-footnotes { margin-top: 28px; font: 400 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } @media (max-width: 1068px) { .rt-claims-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } .rt-claims-visual { max-width: 560px; width: 100%; } } /* The slider, restyled: a square frame that fills its column, 4px plum border, corners 8.2% of its width, lime pill labels flush to the inner edges, a 3px plum divider with a round cream handle. Label size scales with the frame: top 8.06%, height 8.92%, width 30.36%, font 5.83% of the frame's width (container units: container-type: inline-size on the frame, then cqw). */ .rt-ba { --reveal: 50%; position: relative; width: 100%; aspect-ratio: 1; box-sizing: border-box; border: 4px solid #672c45; border-radius: 8.2%; overflow: hidden; background: #d8c0a8; touch-action: pan-y; isolation: isolate; cursor: ew-resize; user-select: none; container-type: inline-size; } .rt-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* The two panels weren't shot together: this lines the before photo up with the after. max-width: none matters, because the theme's img reset caps width at 100% and leaves a band of background at the bottom (the theme's current slider shows it). */ .rt-ba .rt-ba-before { z-index: 1; inset: -4.9% auto auto -2.5%; width: 105%; height: 105%; max-width: none; object-fit: cover; } .rt-ba-after-wrap { position: absolute; z-index: 2; inset: 0; overflow: hidden; clip-path: inset(0 0 0 var(--reveal)); } .rt-ba-label { position: absolute; z-index: 4; top: 8.06cqw; height: 8.92cqw; width: 30.36cqw; display: flex; align-items: center; justify-content: center; background: #e4e825; color: #672c45; font: 700 5.83cqw/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; pointer-events: none; } .rt-ba-label-before { left: 0; border-radius: 0 4.46cqw 4.46cqw 0; } .rt-ba-label-after { right: 0; border-radius: 4.46cqw 0 0 4.46cqw; } .rt-ba-divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--reveal); width: 3px; background: #672c45; transform: translateX(-1.5px); pointer-events: none; } .rt-ba-divider > span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border: 2px solid #672c45; border-radius: 50%; background: #fffbf5; transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(41, 36, 33, 0.18); } .rt-ba-divider > span::before, .rt-ba-divider > span::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border-top: 2px solid #672c45; border-left: 2px solid #672c45; } .rt-ba-divider > span::before { left: 10px; transform: translateY(-50%) rotate(-45deg); } .rt-ba-divider > span::after { right: 10px; transform: translateY(-50%) rotate(135deg); } /* An invisible range input over the frame gives keyboard and screen-reader control. */ .rt-ba-range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } /* Keyboard focus only: a press on the frame focuses the range, which Chrome treats as keyboard focus, so rootist-before-after.js marks the frame data-pointer on a press and clears it on the next navigation key. */ .rt-ba:has(.rt-ba-range:focus-visible):not([data-pointer]) { outline: 4px solid #672c45; outline-offset: 6px; } /* Spacing in the result's right column: the copy stacks, the four numbers sit two by two. */ .rt-claims-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; } .rt-claims-copy > * { grid-column: 1 / -1; margin: 0; } .rt-claims-copy > .rt-stat { grid-column: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgb(103 44 69 / 0.16); margin-top: 28px; } .rt-claims-copy > .rt-h2 { margin-top: 16px; } .rt-claims-copy > .rt-intro { margin-top: 20px; } .rt-claims-copy > .rt-intro + .rt-stat, .rt-claims-copy > .rt-intro + .rt-stat + .rt-stat { margin-top: 36px; } .rt-claims-copy > .rt-actions { margin-top: 36px; } .rt-claims-copy > .rt-footnotes { margin-top: 28px; } .rt-claims .rt-eyebrow { margin: 0; } @media (max-width: 1068px) { .rt-claims .rt-h2, .rt-claims-value { font-size: 40px; line-height: 44px; } .rt-fit-a { font-size: 24px; line-height: 28px; } .rt-claims .rt-intro { font-size: 19px; line-height: 27px; } } @media (max-width: 734px) { .rt-claims { padding: 88px 0; } .rt-claims .rt-h2, .rt-claims-value { font-size: 32px; line-height: 36px; } .rt-fit-a { font-size: 21px; line-height: 25px; } .rt-claims .rt-intro { font-size: 17px; line-height: 25px; } } /* One buy column: the title and the buy box in one column in the page's flow (the page scroll moves it, so a tall column is always reachable), with no scroll area of their own; the photo pane beside it is what stays pinned (see "The photo pane" below). On phones the gallery stays first. */ .bb .bb-buy { min-width: 0; } @media (min-width: 761px) { .bb .bb-buy { grid-column: 2; grid-row: 1 / span 2; align-self: start; } .bb .bb-buy > .bb-heading, .bb .bb-buy > .bb-purchase { position: static; top: auto; max-height: none; overflow: visible; } } @media (max-width: 760px) { .bb .bb-buy { order: 2; } } /* The cart message line takes no room until it has something to say. */ .bb .bb-cart-status:empty { min-height: 0; margin-top: 0; } /* ------------------------------------------------------------------ * Which serum is for you? (prototype P4) * ------------------------------------------------------------------ */ .rt-compare { padding: 128px 0; background: #f7efe6; } .rt-compare .rt-h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px; line-height: 52px; color: #672c45; } .rt-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 0; } .rt-compare-tile { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 19px; border: 0; border-radius: 28px; background: #fffbf5; } /* Oct 8 (Briton): no borders (the current card keeps its soft lift and its label); container-spacing: 19px puts the last line's ink 24 from the bottom, matching the 24 at the sides */ .rt-compare-tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: #efe6dc; } .rt-compare-name { margin: 8px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 32px; color: #672c45; } .rt-compare-fit { margin: 0; font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); } .rt-compare-points { flex: 1; display: grid; align-content: start; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .rt-compare-points li { position: relative; padding-left: 22px; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; } .rt-compare-points li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 11px; height: 6px; border-left: 2px solid #672c45; border-bottom: 2px solid #672c45; transform: rotate(-45deg); } .rt-compare-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0 0; font: 400 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-compare-meta strong { color: #672c45; } .rt-compare-meta .rt-stars { width: 75px; height: 14px; -webkit-mask-size: 15px 14px; mask-size: 15px 14px; } .rt-compare-price { margin-left: auto; font: 700 17px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; } .rt-compare-here { font: 700 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: rgb(103 44 69 / 0.78); line-height: 20px; } /* same line box as Shop now, so both last lines end 24 from the bottom */ .rt-compare .rt-link { font: 700 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #672c45; text-decoration: none; } .rt-compare .rt-footnotes { margin: 28px 0 0; font: 400 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } /* ------------------------------------------------------------------ * How to use (prototype P8): the heading, then the steps beside the model video on plum, then the film. * ------------------------------------------------------------------ */ .rt-howto-head { padding: 128px 0 40px; } .rt-howto .rt-h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px; line-height: 52px; color: #672c45; } .rt-howto-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #672c45; color: #fffbf5; } .rt-howto-video { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; background: #d9c2ad; } .rt-howto-panel { display: flex; align-items: center; padding: 48px clamp(20px, 6.25vw, 90px) 48px clamp(20px, 6vw, 86px); } .rt-steps { position: relative; counter-reset: rt-step; display: grid; gap: 20px; width: 100%; max-width: 38rem; margin: 0; padding: 0; list-style: none; } /* Rootist's lime line runs down through the step numbers, drawn from the first to the last when the steps come into view (assets/rootist-pdp.js adds .is-drawn). */ .rt-steps::before { content: ""; position: absolute; top: 13px; bottom: 13px; left: 14px; width: 2px; border-radius: 2px; background: #e4e825; transform: scaleY(0); transform-origin: center top; transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1); } .rt-steps.is-drawn::before { transform: scaleY(1); } .rt-steps li { counter-increment: rt-step; position: relative; padding-left: 48px; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; } .rt-steps li::before { content: counter(rt-step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; background: #672c45; font: 700 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; } @media (prefers-reduced-motion: reduce) { .rt-steps::before { transition: none; } } .rt-howto-film { padding: 20px 0 0; } .rt-howto-film-video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #efe6dc; } @media (min-width: 768px) { .rt-howto-film-video { width: min(1260px, 87.5%); margin: 0 auto; aspect-ratio: 5 / 2; border-radius: 28px; } } @media (max-width: 1068px) { .rt-compare .rt-h2, .rt-howto .rt-h2 { font-size: 40px; line-height: 44px; } .rt-compare-name { font-size: 24px; line-height: 28px; } } @media (max-width: 767px) { .rt-howto-band { grid-template-columns: minmax(0, 1fr); } .rt-howto-panel { padding: 40px 20px; } } @media (max-width: 734px) { .rt-compare { padding: 88px 0; } .rt-howto-head { padding: 88px 0 32px; } .rt-compare .rt-h2, .rt-howto .rt-h2 { font-size: 32px; line-height: 36px; } .rt-compare-name { font-size: 21px; line-height: 25px; } /* Phones: the three serums become a swipeable row, the first card on the column's edge. */ .rt-compare-grid { display: flex; gap: 14px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 calc(50vw - 50%) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc(50vw - 50%); scrollbar-width: none; } .rt-compare-grid::-webkit-scrollbar { display: none; } .rt-compare-tile { flex: 0 0 78%; scroll-snap-align: start; } } /* ------------------------------------------------------------------ * What's in it, and what isn't (prototype P10) * ------------------------------------------------------------------ */ .rt-ingredients { padding: 128px 0; } .rt-ingredient-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0 0; padding: 0; list-style: none; } .rt-ingredient-grid li { display: flex; flex-direction: column; gap: 8px; } .rt-ingredient-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; margin-bottom: 12px; object-fit: cover; border-radius: 28px; background: #efe6dc; } .rt-ingredient-grid p { margin: 0; max-width: 34em; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-without { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; } /* Oct 8 (Briton): no rule, no chips; the link alone */ .rt-without-label { margin: 0; font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); } .rt-without-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .rt-without-list li { padding: 7px 12px; border-radius: 999px; background: rgb(103 44 69 / 0.07); color: #672c45; font: 500 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; } .rt-without .rt-link, .rt-reviews .rt-link { font: 700 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #672c45; text-decoration: none; } .rt-without .rt-link { margin-left: auto; } /* ------------------------------------------------------------------ * Reviews (prototype P5): the homepage's review card in a row that runs to the window's edge, with paddles. * ------------------------------------------------------------------ */ .rt-reviews { padding: 128px 0; background: #f7efe6; } .rt-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; } .rt-reviews-summary { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-track { display: flex; gap: 20px; margin: 0; padding: 4px calc((100% - min(1260px, 87.5%)) / 2) 8px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100% - min(1260px, 87.5%)) / 2); scrollbar-width: none; } .rt-track::-webkit-scrollbar { display: none; } .rt-track > li { flex: none; scroll-snap-align: start; } .rt-track:focus-visible { outline: 3px solid #672c45; outline-offset: -3px; } .rt-paddles { display: flex; gap: 12px; } .rt-paddle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(103 44 69 / 0.08); color: #672c45; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .rt-paddle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rt-paddle:hover { background: rgb(103 44 69 / 0.16); } .rt-paddle:disabled { opacity: 0.35; cursor: default; } .rt-paddle:focus-visible { outline: 3px solid #672c45; outline-offset: 2px; } .rt-review { width: clamp(280px, 27vw, 380px); } .rt-review article { display: flex; flex-direction: column; gap: 18px; height: 100%; box-sizing: border-box; padding: 28px 28px 24px; border-radius: 28px; background: #fffbf5; } .rt-review-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rt-review-top time { font: 400 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-review .rt-stars { width: 85px; height: 16px; -webkit-mask-size: 17px 16px; mask-size: 17px 16px; } .rt-review-text { flex: none; margin: 0; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; } .rt-review-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 0; } /* CHANGE 56: the reviewer signs the review, under its text, the way a quote is attributed; the product sits at the foot. */ .rt-review-name::before { content: "\2014\00a0"; font-weight: 400; } .rt-review-name { font: 700 17px/21px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; } .rt-review-badge { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-review-badge svg { width: 15px; height: 15px; } .rt-review-badge circle { fill: #672c45; } .rt-review-badge path { fill: none; stroke: #fffbf5; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rt-reviews > .rt-actions { margin-top: 36px; } @media (prefers-reduced-motion: reduce) { .rt-track { scroll-behavior: auto; } } /* The How to use steps are cream on plum; the theme's .rootist-store li rule makes every list item plum. */ .rt-howto-band .rt-steps li { color: #fffbf5; } /* Section headings and card names at the prototype's sizes. The theme sets every h2 and h3 to 40px with !important (.rootist-store h2/h3), so these need !important and a more specific selector to win. */ .rootist-store :is(.rt-claims, .rt-compare, .rt-howto, .rt-ingredients, .rt-reviews, .rt-faq, .rt-routine) h2.rt-h2 { font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.005em; } .rootist-store :is(.rt-compare-name, .rt-ingredient-name) { font-size: 28px !important; line-height: 32px !important; } .rootist-store .rt-compare-tile .rt-compare-name { margin-left: -0.054em; } /* 1.5px at 28px, 1.1 at 21 */ /* Oct 8 (container-spacing): Fraunces' side bearing put the title 1.5px right of the image, stars and labels; the layout's .rootist-store h3 { margin: 0 } outranks the plain class */ @media (max-width: 1068px) { .rootist-store :is(.rt-claims, .rt-compare, .rt-howto, .rt-ingredients, .rt-reviews, .rt-faq, .rt-routine) h2.rt-h2 { font-size: 40px !important; line-height: 44px !important; } .rootist-store :is(.rt-compare-name, .rt-ingredient-name) { font-size: 24px !important; line-height: 28px !important; } } @media (max-width: 734px) { .rootist-store :is(.rt-claims, .rt-compare, .rt-howto, .rt-ingredients, .rt-reviews, .rt-faq, .rt-routine) h2.rt-h2 { font-size: 32px !important; line-height: 36px !important; } .rootist-store :is(.rt-compare-name, .rt-ingredient-name) { font-size: 21px !important; line-height: 25px !important; } .rt-ingredients, .rt-reviews { padding: 88px 0; } .rt-ingredient-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .rt-ingredient-grid img { aspect-ratio: 3 / 2; } .rt-without .rt-link { margin-left: 0; } .rt-gallery-head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 24px; } .rt-paddles { align-self: flex-end; } } /* ------------------------------------------------------------------ * FAQ (prototype P9): the heading and contact on the left, the questions on the right, opening smoothly. * ------------------------------------------------------------------ */ .rt-faq { padding: 128px 0; } .rt-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; } /* Sticky 32px under the 83px header (pass 3 integrator: it was 32px from the window top, so the header hid the heading's first 51px), the same as the FAQ page. */ .rt-faq-head { position: sticky; top: calc(83px + 32px); } .rt-faq-head .rt-intro { margin-top: 20px; font: 400 21px/29px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-faq-head .rt-intro p { margin: 0; } .rt-faq-head .rt-intro a, .rt-faq-a a { color: #672c45; font-weight: 700; text-decoration: none; } .rt-faq-head .rt-intro a:hover, .rt-faq-a a:hover { opacity: 0.72; } .rt-faq-head .rt-actions { margin-top: 28px; } .rt-faq .rt-link, .rt-routine .rt-link { font: 700 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #672c45; text-decoration: none; } .rt-faq-list { border-top: 1px solid rgb(103 44 69 / 0.16); } .rt-faq-item { border-bottom: 1px solid rgb(103 44 69 / 0.16); } .rt-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 24px; list-style: none; cursor: pointer; } /* The site-wide summary rule (.rootist-store summary) leaves 18px of margin for a native disclosure marker; these rows draw their own +/- icon, so that margin only pushed each question out of line with its answer. */ .rootist-store .rt-faq-item summary { margin-left: 0; } .rt-faq-item summary::-webkit-details-marker { display: none; } .rt-faq-item summary:focus-visible { outline: 3px solid #672c45; outline-offset: -3px; border-radius: 4px; } .rt-faq-q { font: 700 21px/29px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; } .rt-faq-icon { flex: none; position: relative; width: 32px; height: 32px; border-radius: 6px; background: rgb(103 44 69 / 0.07); transition: background-color 0.2s ease; } .rt-faq-icon::before, .rt-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: #672c45; transform: translate(-50%, -50%); transition: transform 0.3s ease; } .rt-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .rt-faq-item[open] .rt-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .rt-faq-item summary:hover .rt-faq-icon { background: rgb(103 44 69 / 0.14); } .rt-faq-a { padding: 0 24px 28px; } .rt-faq-a p { margin: 0; max-width: 40em; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-faq-a p + p { margin-top: 12px; } .rt-faq-a ul { margin: 12px 0 0; padding-left: 20px; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; } .rt-faq-a ul li { color: rgb(103 44 69 / 0.78); } @supports (interpolate-size: allow-keywords) { .rt-faq-list { interpolate-size: allow-keywords; } .rt-faq-item::details-content { height: 0; overflow: clip; transition: height 0.35s ease, content-visibility 0.35s allow-discrete; } .rt-faq-item[open]::details-content { height: auto; } } /* ------------------------------------------------------------------ * Worth Rooting For (Rootist's own, prototype P7): the photo with their spinning badge, the text beside it with room. * ------------------------------------------------------------------ */ .rt-worth { background: #fff; } .rt-worth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .rt-worth-media, .rt-worth-frame { position: relative; height: 100%; } .rt-worth-photo { display: block; width: 100%; height: 100%; object-fit: cover; } .rt-worth-badge { position: absolute; inset: 0; z-index: 1; width: 150px; height: 150px; margin: auto; object-fit: contain; pointer-events: none; animation: rt-worth-spin 10s linear infinite; } @keyframes rt-worth-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .rt-worth-badge { animation: none; } } .rt-worth-copy { display: flex; align-items: center; aspect-ratio: 5 / 4; padding: 48px clamp(40px, 6.25vw, 96px); } .rt-worth-inner { max-width: 30rem; } .rootist-store .rt-worth-title { margin: 0 0 16px; color: #672c45; } .rt-worth-text p { margin: 0; font: 400 16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; text-wrap: pretty; } .rt-worth-text p + p { margin-top: 12px; } /* a second paragraph (Clarify Serum's "Pro tip") gets the site's paragraph gap */ /* ------------------------------------------------------------------ * The routine behind the result (prototype P6): shampoo, conditioner, then BioBrew. * ------------------------------------------------------------------ */ .rt-routine { padding: 128px 0; } .rt-routine .rt-gallery-head { align-items: flex-end; } .rt-btn-outline { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 32px; box-sizing: border-box; border: 1.5px solid #672c45; border-radius: 8px; background: transparent; color: #672c45; font: 700 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } .rt-btn-outline:hover { background: #672c45; color: #fff; } .rt-btn-outline:focus-visible { outline: 3px solid #672c45; outline-offset: 3px; } .rt-routine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .rt-routine-step a { display: flex; flex-direction: column; gap: 6px; color: #672c45; text-decoration: none; } .rt-routine-step img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 10px; box-sizing: border-box; border: 2px solid transparent; border-radius: 28px; background: #efe6dc; } .rt-routine-step.is-current img { border-color: #672c45; } .rt-routine-num { font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); } .rt-routine-name { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 32px; } .rt-routine-price { font: 700 17px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; } .rt-routine-step a:hover .rt-routine-name { opacity: 0.72; } @media (max-width: 1068px) { .rt-faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .rt-faq-head { position: static; } .rt-faq-head .rt-intro, .rt-faq-q { font-size: 19px; line-height: 27px; } .rt-routine-name { font-size: 24px; line-height: 28px; } } @media (max-width: 767px) { .rt-worth-grid { grid-template-columns: minmax(0, 1fr); } .rt-worth-photo { height: auto; aspect-ratio: 100 / 114; } .rt-worth-badge { width: 96px; height: 96px; } .rt-worth-copy { aspect-ratio: auto; padding: 40px 20px 56px; } .rootist-store .rt-worth h2.rt-worth-title { font-size: 30px !important; line-height: 44px !important; } } @media (max-width: 734px) { .rt-faq, .rt-routine { padding: 88px 0; } .rt-faq-head .rt-intro, .rt-faq-q { font-size: 17px; line-height: 25px; } .rt-faq-item summary { padding: 22px 4px; } .rt-faq-a { padding: 0 4px 24px; } .rt-routine .rt-gallery-head { align-items: flex-start; } .rt-routine .rt-btn-outline { align-self: flex-start; } .rt-routine-grid { gap: 12px; } .rt-routine-name { font-size: 14px; line-height: 18px; } .rt-routine-step img { border-radius: 14px; } } /* The theme's own FAQ component makes .rt-faq a 12-column grid and puts its child div in columns 6 to 12, which squeezed the product page's FAQ into the right half on desktop. This one lays itself out. */ .rt-faq.rt-faq--pdp { display: block; } .rt-faq.rt-faq--pdp > .rt-faq-grid { grid-column: auto; } /* Same reason as in rootist-site.css: .rootist-store p { margin: 0 } outranks a single class. */ .rt-reviews .rt-reviews-summary { margin: 16px 0 0; } .bb .rt-free { margin: 16px 0 0; } /* The review row's optional product (the homepage's reviews name what each one is about) and the summary's bold figures ("89% of reviewers recommend The Rootist"). */ .rt-reviews .rt-reviews-summary-text p { margin: 0; color: inherit; } /* Richtext intros keep the intro's softer ink (the theme colours every paragraph). */ .rt-faq-head .rt-intro p { color: inherit; } .rt-reviews .rt-reviews-summary strong { color: #672c45; font-weight: 700; } /* No rule above the product (Briton, 2026-09-24): the card's space sets it apart. */ .rt-review-product { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; color: #672c45; text-decoration: none; } .rt-review-product img { flex: none; width: 40px; height: 52px; border-radius: 8px; object-fit: cover; background: #efe6dc; } .rt-review-product span { display: flex; flex-direction: column; gap: 3px; font: 700 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; } .rt-review-product small { font: 400 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .rt-review-product:hover span { opacity: 0.72; } /* Swipe rows (results, press, reviews) start on the same edge as the section heading's .rt-wrap. The wrap's inset is (100% - min(--rt-max, 100% - 2 * --rt-gutter)) / 2 = max(--rt-gutter, (100% - --rt-max) / 2); the rows used the prototype's column, (100% - min(1260px, 87.5%)) / 2, which starts 8 to 30px further in. */ .rt-track { --rt-row-inset: max(var(--rt-gutter), calc((100% - var(--rt-max)) / 2)); padding-inline: var(--rt-row-inset); scroll-padding-inline: var(--rt-row-inset); } @media (max-width: 734px) { /* The serum row: in scroll-padding the % is the scroller's own width, so calc(50vw - 50%) was 0 and snapping parked the first tile on the screen edge. Snap to the column's inset instead. */ .rt-compare-grid { scroll-padding-inline: max(var(--rt-gutter), calc((100% - var(--rt-max)) / 2)); } } /* Asterisk-free claims: keep the longer rating/source lines and stat labels from ending on one word, and give each compare tile's REVIEWS.io line its own row under the stars + price. */ .rootist-store :is(.rt-rating, .rt-compare-meta) > span:not(.rt-stars, .rt-compare-price), .rootist-store :is(.rt-bigstat-label, .rt-claims-label) { text-wrap: pretty; } .rootist-store .rt-compare-meta > span:not(.rt-stars, .rt-compare-price) { order: 1; flex-basis: 100%; } /* CHANGE 47: the Worth Rooting For ring is live text now, its words, turns, speed, size and place settings on the photo block. It's larger and slower than the old picture of words, and by default it sits over the photo's edge, half on the photo and half on the sand, low enough to clear the heading. */ .rt-worth-ring { position: absolute; z-index: 2; width: var(--rt-ring-size, 240px); height: var(--rt-ring-size, 240px); overflow: visible; pointer-events: none; animation: rt-worth-spin var(--rt-ring-speed, 40s) linear infinite; } .rt-worth-ring text { font: 500 23px/1 'Fraunces', Georgia, serif; letter-spacing: 0.03em; fill: #672c45; } .rt-worth-ring--center { inset: 0; margin: auto; } .rt-worth-ring--edge { right: calc(var(--rt-ring-size, 240px) / -2); bottom: 9%; } @media (max-width: 734px) { .rt-worth-ring { width: min(var(--rt-ring-size, 240px), 150px); height: min(var(--rt-ring-size, 240px), 150px); } .rt-worth-ring--edge { right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .rt-worth-ring { animation: none; } } /* The copy's 5:4 box made it wider than its column between 735px and 1068px, and the page scrolled sideways. */ @media (min-width: 735px) and (max-width: 1068px) { .rootist-store .rt-worth-copy { aspect-ratio: auto; } } /* ------------------------------------------------------------------ * Every product on the one template (pdp pack). A section with nothing for this product renders nothing, which leaves * the engine's empty
wrapper, so rootist-site.css's rule for two white sections in a row no longer sees them * as neighbours. The same gap across up to six empty wrappers, taken from the second one's top padding. * ------------------------------------------------------------------ */ .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section > :is(.rt-claims, .rt-faq, .rt-ingredients, .rt-routine), .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section > .rt-howto > .rt-howto-head, .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section > :is(.rt-claims, .rt-faq, .rt-ingredients, .rt-routine), .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section > .rt-howto > .rt-howto-head, .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > :is(.rt-claims, .rt-faq, .rt-ingredients, .rt-routine), .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > .rt-howto > .rt-howto-head, .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > :is(.rt-claims, .rt-faq, .rt-ingredients, .rt-routine), .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > .rt-howto > .rt-howto-head, .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > :is(.rt-claims, .rt-faq, .rt-ingredients, .rt-routine), .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > .rt-howto > .rt-howto-head, .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > :is(.rt-claims, .rt-faq, .rt-ingredients, .rt-routine), .rootist-store main > section:has(> :is(.rt-claims, .rt-faq, .rt-ingredients)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section:not(:has(*)) + section > .rt-howto > .rt-howto-head { padding-top: 0; } /* One photo: no dots. */ .bb .bb-dots:has(> button:only-child) { display: none; } /* What's inside (the bundles and the kit): a row per product, its photo, name and price; the kit lists names only. */ .bb .bb-includes { margin-top: 32px; color: #672c45; } .bb .bb-includes-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .bb .bb-include { display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 21px; color: #672c45; } .bb .bb-include-link { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; color: inherit; text-decoration: none; } .bb .bb-include img { flex: none; width: 48px; height: 60px; object-fit: cover; border-radius: 10px; background: #efe6dc; } .bb .bb-include-name { flex: 1; min-width: 0; } .bb .bb-include-price { font-weight: 700; } .bb .bb-include-link:hover .bb-include-name { opacity: 0.72; } /* Fit strip with two items: two columns. */ @media (min-width: 735px) { .rt-fit-grid:not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* The result section: a single result photo (the Densify composites carry their own labels), and before/after photos taken together, which need none of the demo panels' lining up. */ .rt-claims-visual .rt-result-image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .rt-ba.rt-ba--aligned img, .rt-ba.rt-ba--aligned .rt-ba-before { inset: 0; width: 100%; height: 100%; object-fit: cover; } /* How to use: a photo in the video's place; with neither, the steps take the band. */ .rt-howto-media .rt-howto-photo { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; background: #d9c2ad; } .rt-howto-band.rt-howto-band--steps { grid-template-columns: minmax(0, 1fr); } .rt-howto-band--steps .rt-howto-panel { justify-content: center; } /* Reviews with a rating but no review cards yet: the link sits under the heading. */ .rt-reviews .rt-gallery-head + .rt-actions { margin-top: 0; } /* Worth Rooting For. The page scrolled about 306px sideways until the photo loaded: the photo's placeholder was taller than the 5:4 copy box, and the copy grew wider to keep its ratio. From 1069px the copy sets the row's height and the photo fills the row out of flow (the same look once it has loaded). The ring stays inside the photo, clear of the copy, and anything past the photo's edge is clipped. */ .rt-worth { overflow-x: clip; } .rt-worth-frame { overflow: clip; } @media (min-width: 1069px) { .rt-worth-media > .rt-worth-frame { position: absolute; inset: 0; height: auto; } .rootist-store .rt-worth-photo { position: absolute; inset: 0; width: 100%; height: 100%; } } @media (min-width: 735px) { .rt-worth-ring--edge { right: 6%; } } /* Jump links land just under the 83px sticky header (html's scroll-padding-top is 96px): the rating to #reviews, See the full routine to #routine, and Full ingredient list to #inci with its INGREDIENTS (INCI) line in view. */ .rootist-store :is(#reviews, #routine) { scroll-margin-top: -13px; } .rootist-store #inci { scroll-margin-top: 76px; } /* Product gallery on phones (gallery-fix). - The strip scrolls sideways under a finger. rootist-consolidated.css gives it touch-action: pan-y, so only the dots moved it. Up and down still scroll the page, and pinch zoom works. - The lightbox shows its "n / total" count and its arrows. The phone block's .bb .bb-gallery-controls { display: none !important } hid them there too. The arrows get 48px boxes for a thumb (the glyphs stay as on desktop), and the page gallery keeps its dots. */ @media (max-width: 760px) { .rootist-store .bb .bb-stage, .rootist-store .bb .bb-stage[style] { touch-action: manipulation; } .rootist-store .bb .bb-lightbox .bb-gallery-controls { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 10px 0 0; padding: 0 0 env(safe-area-inset-bottom, 0px); } .rootist-store .bb .bb-lightbox .bb-gallery-controls .bb-control { width: 48px; height: 48px; } .rootist-store .bb .bb-lightbox [data-gallery-count] { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; } } /* Buy box refinements (pdp-refine, 2026-09-24). Price row: the price, the struck price and "4.7 ยท 126 reviews" share one baseline. An empty flex item's baseline is its bottom edge, so the stars stand on that baseline; 3px lower puts their middle on the middle of the digits (the 17px price and the 14px rating alike, within 1px). The row used to centre each piece's line box, which left the stars 1-2px high. The rating's number keeps the rating's 14px instead of the price's 17px. */ .bb .bb-price { align-items: baseline; } .bb .bb-price .rt-rating { align-self: baseline; align-items: baseline; } .bb .bb-price .rt-rating strong { font-size: inherit; line-height: inherit; } .bb .bb-price .rt-stars { position: relative; top: 3px; align-self: baseline; } /* The title is followed by the price and rating, then the purchase options; "Purchase Options" is the fieldset's legend for screen readers only. */ .bb .bb-purchase-options { margin-top: 12px; } /* Products without purchase options: Add to cart keeps the same 20px from the price row (it was 8px). */ .bb .bb-commerce > .bb-buy-row:first-child { margin-top: 20px; } .bb .bb-purchase-options > legend.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Subscribe & save: the note right under the title (17/21 then 14/18). It starts with the renewal line; the Subscription note block follows after a dot, and when the two don't fit on one line the second moves down whole, its dot clipped at the line's start. */ .bb .bb-purchase-option > span { gap: 0; } .bb .bb-purchase-option .rt-sub-note { margin-top: 1px; overflow: hidden; } .bb .bb-purchase-option .rt-sub-note span { display: inline; font: inherit; color: inherit; } .bb .bb-purchase-option .rt-sub-note .rt-sub-renews { display: inline-block; margin-right: 0.5em; } .bb .bb-purchase-option .rt-sub-note .rt-sub-extra { display: inline-block; position: relative; } .bb .bb-purchase-option .rt-sub-note .rt-sub-extra::before { content: "\00B7"; content: "\00B7" / ""; position: absolute; right: 100%; width: 0.8em; text-align: center; } /* Delivery frequency: the terms are a tooltip on the info button inside the box, left of the chevron. */ .bb .bb-cadence-field { position: relative; } .bb .bb-cadence-field select { padding-right: 84px; } .bb .bb-cadence-field .bb-terms-button { position: absolute; top: 50%; right: 44px; display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; margin: -16px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgb(103 44 69 / 0.78); cursor: help; -webkit-tap-highlight-color: transparent; } .bb .bb-cadence-field .bb-terms-button:hover { color: #672c45; } .bb .bb-cadence-field .bb-terms-button:focus-visible { outline: 2px solid #672c45; outline-offset: 0; } .bb .bb-terms-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .bb .bb-terms-button .bb-terms-dot { fill: currentColor; stroke: none; } .bb .bb-terms-tip { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 20; box-sizing: border-box; width: min(340px, 100%); padding: 12px 14px; border-radius: 8px; background: #672c45; color: #fffbf5; font-size: 14px; line-height: 20px; font-weight: 400; text-align: left; text-wrap: pretty; box-shadow: 0 10px 28px rgb(41 18 28 / 0.18); opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms; } .bb .bb-terms-tip.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 150ms ease, transform 150ms ease; } .bb .bb-terms-tip::after { content: ""; position: absolute; top: 100%; right: 53px; border: 7px solid transparent; border-top-color: #672c45; } .bb .bb-terms-tip::before { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 12px; } .bb .bb-terms-tip.is-below { top: calc(100% + 10px); bottom: auto; transform: translateY(-4px); } .bb .bb-terms-tip.is-below.is-open { transform: none; } .bb .bb-terms-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #672c45; } .bb .bb-terms-tip.is-below::before { top: auto; bottom: 100%; } @media (prefers-reduced-motion: reduce) { .bb .bb-terms-tip, .bb .bb-terms-tip.is-open, .bb .bb-terms-tip.is-below { transform: none; transition: none; } } /* The summary, under the shipping and returns lines. */ .bb .bb-commerce > .bb-summary { margin: 24px 0 0; } /* Product page, second pass (pdp-refine2, 2026-09-24). One type scale for the buy column, a notch under the old 17px where rootist.com is smaller (their buy box is 16/22), same font stack, whole-pixel line heights: title 34/38 (28/32 on a phone) and price 17/21, unchanged; row and "How to use" titles 17/24 bold; body 16/24: purchase options, delivery select, quantity, summary, description, How to use steps, row text; small 14/20: subscribe note, "Delivery frequency", shipping and returns, award line, full ingredient list; Add to cart 14px bold capitals, unchanged. */ .bb .bb-purchase-option span, .bb .bb-purchase-option strong { font-size: 16px; line-height: 24px; } .bb .bb-purchase-option .rt-sub-note { font-size: 14px; line-height: 20px; } .bb .bb-cadence > label { font-size: 14px; line-height: 20px; font-weight: 500; } .bb .bb-cadence-field select, .bb .bb-quantity input { font-size: 16px; line-height: 24px; } .rt-assure { gap: 10px 16px; line-height: 20px; } .rt-assure li { gap: 6px; } .bb .bb-commerce > .bb-summary, .bb .bb-description { font-size: 16px; line-height: 24px; } .bb .bb-award-description { line-height: 20px; } /* The radio sits 16px from its label (it was 12px). */ .bb .bb-purchase-option { column-gap: 16px; } /* 36px between the delivery frequency box and the quantity + Add to cart row (it was 26px). */ .bb .bb-purchase-options .bb-cadence { margin-bottom: 0; } .bb .bb-purchase-options + .bb-buy-row { margin-top: 36px; } /* How to use: short steps, 16/24, 6px apart; a single step has no number. */ .bb .bb-how { margin: 28px 0 0; font-size: 16px; line-height: 24px; } .bb .bb-how-label { margin-bottom: 8px; font-size: 17px; line-height: 24px; } .bb .bb-how ol { padding-left: 22px; } .bb .bb-how li { margin: 0; padding-left: 2px; } .bb .bb-how li + li { margin-top: 6px; } .bb .bb-how ol:has(> li:only-child) { padding-left: 0; list-style: none; } .bb .bb-how ol > li:only-child { padding-left: 0; } /* What it does, Why you'll love it, Who it's for and the full ingredient list: the FAQ's accordion (same markup, plus icon and height animation), sized for the buy column and closed until opened. */ .bb .bb-rows { margin-top: 32px; } .bb .bb-rows .rt-faq-item summary { gap: 16px; margin: 0; padding: 16px 0; } .bb .bb-rows .rt-faq-q { font-size: 17px; line-height: 24px; } .bb .bb-rows .rt-faq-a { padding: 0 48px 20px 0; } .bb .bb-rows .rt-faq-a :is(p, ul) { max-width: none; margin: 0; padding: 0; font: 400 16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); } .bb .bb-rows .rt-faq-a ul { padding-left: 20px; } .bb .bb-rows .rt-faq-a li + li { margin-top: 4px; } .bb .bb-rows .rt-faq-a * + :is(p, ul) { margin-top: 12px; } .bb .bb-rows .rt-faq-a strong { color: #672c45; font-weight: 700; } .bb .bb-rows .bb-row--inci .rt-faq-a p { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; } /* Review cards: the reviewer's line sits at the foot of every card (above "Reviewing..." on the homepage), so names line up along a row (the homepage's product row keeps a two-line height); at least the card's 18px gap under the text. The dash before the name is a bar as heavy as the bold name, centred on its x-height. The badge is a scalloped seal with the tick cut out in the card's white. */ .rt-review .rt-review-by { margin-top: auto; } .rt-review .rt-review-product { margin-top: 0; min-height: 73px; } /* 18px + a two-line product name, so names still line up */ .rt-review-name::before { content: ""; display: inline-block; width: 13px; height: 2.5px; margin-right: 7px; border-radius: 1.25px; background: currentColor; vertical-align: middle; } .rt-review-badge .rt-seal { fill: #672c45; stroke: none; } .rt-review-badge .rt-seal-tick { fill: none; stroke: #fff; stroke-width: 1.7; } /* Product page, pass 2 (2026-09-24). */ /* Subscribe & save holds its delivery frequency. The card is the frame (1px hairline, the options' 4px corners, plum when chosen) and its label keeps the option's layout: radio, title, renewal line, price. The select sits under the title's column inside the frame with the same 4px corners, its info button and chevron as before; "Delivery frequency" is its aria-label. For a one-time purchase it stays in place, dimmed and disabled (clicks pass to the card, which chooses Subscribe & save), so the card never changes height. Where the buy column is narrow (761-900px, phones under 401px) the select uses the card's full inner width. */ .bb .bb-purchase-card { margin-top: 8px; border: 1px solid rgb(103 44 69 / 0.32); border-radius: 4px; } .bb .bb-purchase-card.is-selected { border-color: #672c45; } @media (hover: hover) and (pointer: fine) { .bb .bb-purchase-card:not(.is-selected):hover { border-color: #672c45; cursor: pointer; } } .bb .bb-purchase-card > .bb-purchase-option, .bb .bb-purchase-card > .bb-purchase-option.is-selected { margin: 0; border: 0; border-radius: 0; } .bb .bb-purchase-options .bb-purchase-card > .bb-cadence { margin: 0; padding: 0 12px 12px 44px; } .bb .bb-purchase-card .bb-cadence-field select { min-height: 44px; border-radius: 4px; } .bb .bb-purchase-card .bb-cadence.is-disabled { opacity: 1; } .bb .bb-purchase-card .bb-cadence.is-disabled :is(select, .bb-terms-button) { opacity: 0.55; } .bb .bb-purchase-card .bb-cadence.is-disabled select { pointer-events: none; } /* The renewal line names the chosen frequency ("Renews every 3 months at $40.80"), so the Subscription note starts its own line, and where even the renewal line can wrap (narrow columns) rootist-biobrew.js keeps the note at its tallest frequency's height: the card is the same height whichever frequency is chosen. */ .bb .bb-purchase-card .rt-sub-note .rt-sub-extra { display: block; } @media (max-width: 400px), (min-width: 761px) and (max-width: 900px) { .bb .bb-purchase-options .bb-purchase-card > .bb-cadence { padding-left: 12px; } } /* The gallery from 761px: every place stacked in one column, 20px apart, on the page's paper (the apricot behind the strip is for phones), inside the photo pane (below). A horizontal stack (a gallery block with a second or third image) is one place: its images side by side in one row, the same 20px apart. On phones the stack steps aside (display: contents), so each image is its own swipe. */ .bb .bb-stack { display: contents; } @media (min-width: 761px) { .bb .bb-gallery, .bb .bb-stage { background: transparent; } .bb .bb-stage { gap: 20px; } .bb .bb-slide { background: #f4ece3; } .bb .bb-stack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; align-items: start; min-width: 0; } .bb .bb-stack > .bb-slide { min-width: 0; } } .bb .bb-thumbs, .bb .bb-thumbs[hidden] { display: none; } /* Two-column product area (from 761px): the header's content column (--rt-max, --rt-gutter), so the outer gutters match the header and the sections below at every width, 1280 to 2560 alike, and nothing runs to the window's edge. The media column takes what the buy column (43%, 330-520px: from 1280px the renewal line and the shipping line stay on one line) and the gap leave. Both start 20px under the header. The area ends 64px (--bb-foot) above the next section, so neither the last photo nor the buy column meets the row below it (see "Space under the product area" below). */ @media (min-width: 761px) { .rootist-store { --bb-foot: 64px; } .rootist-store .bb .bb-grid { width: min(var(--rt-max), calc(100% - 2 * var(--rt-gutter))); max-width: none; margin: 0 auto; padding: 20px 0 var(--bb-foot); grid-template-columns: minmax(0, 1fr) clamp(330px, 43%, 520px); column-gap: clamp(40px, 4vw, 64px); } .bb .bb-buy > .bb-heading, .bb .bb-buy > .bb-purchase { padding-left: 0; padding-right: 0; } .bb .bb-buy > .bb-heading h1 { margin-top: 0; } } /* The photo pane (from 761px). The media column is one pane pinned under the header beside the buy column: sticky 20px under the 83px header (--bb-pane-top), as tall as the rest of the window (or as its photos, when they are shorter), and its photos scroll inside it (.bb-stage). A wheel or trackpad over the photos moves the photos; over the buy column, or anywhere else, it moves the page. The pane scrolls smoothly and chains: at its first or last photo the scroll carries on into the page (overscroll-behavior stays auto), so it is never a trap. It stays pinned until the product area ends (its grid area), then leaves with it. The pane is a Tab stop (rootist-biobrew.js gives it tabindex from 761px), so the arrow keys, Page Up/Down and Space scroll it, with the site's 3px plum ring inside its edge. With the thumbnail rail beside the photos (from 1200px) the rail is the position indicator and the pane's scrollbar is hidden; without it (761-1199px, or a JS-less page) a thin, faint scrollbar shows. Reduced motion: every scroll is instant (rootist-consolidated.css sets .bb * to scroll-behavior: auto, and the rail script asks for 'instant'). Phones keep the swipe strip exactly as it was. */ @media (min-width: 761px) { .rootist-store .bb { --bb-pane-top: 103px; } .rootist-store .bb .bb-gallery { position: sticky; top: var(--bb-pane-top); align-self: start; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: auto; min-height: 0; max-height: calc(100dvh - var(--bb-pane-top)); } .rootist-store .bb .bb-stage { grid-column: 1; grid-row: 1; align-self: stretch; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgb(103 44 69 / 0.28) transparent; } .rootist-store .bb .bb-stage:focus-visible { outline: 3px solid #672c45; outline-offset: -3px; } } /* rootist-consolidated.css holds the stage at overflow: visible !important up to 900px (the old stacked tablet layout). */ @media (min-width: 761px) and (max-width: 900px) { .rootist-store .bb .bb-stage { overflow-x: hidden !important; overflow-y: auto !important; } } /* The thumbnail rail (from 1200px, when the product has more than one place): a column of 64px squares at the pane's left, beside the photos and as tall as the pane (it scrolls inside itself past that, and chains on at its ends). A thumbnail scrolls the pane to its place; the place in view is marked. The current place's thumbnail is full strength with a plum hairline; the others are lighter until hovered. Keyboard focus is a 2px plum ring. A stack's thumbnail shows its first image with a second edge behind it. The rail's 4px padding (margin -4px) is room for the rings; it puts the first thumbnail on the pane's top line, level with the photos. */ @media (min-width: 1200px) { .rootist-store .bb .bb-gallery.bb-gallery--rail { grid-template-columns: 68px minmax(0, 1fr); column-gap: 20px; } .rootist-store .bb .bb-gallery--rail > .bb-stage { grid-column: 2; grid-row: 1; } .bb .bb-gallery--rail > :not(.bb-thumbs, .bb-stage) { grid-column: 2; } .rootist-store .bb .bb-gallery--rail:has(> .bb-thumbs:not([hidden])) > .bb-stage { scrollbar-width: none; } .rootist-store .bb .bb-gallery--rail:has(> .bb-thumbs:not([hidden])) > .bb-stage::-webkit-scrollbar { display: none; } .bb .bb-gallery--rail > .bb-thumbs:not([hidden]) { grid-column: 1; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 72px; max-height: calc(100% + 4px); margin: -4px 0 0 -4px; padding: 4px; overflow-y: auto; overscroll-behavior: auto; scrollbar-width: none; } .bb .bb-thumbs::-webkit-scrollbar { display: none; } .bb .bb-thumb { position: relative; display: block; flex: none; width: 64px; height: 64px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: #f4ece3; color: inherit; cursor: pointer; opacity: 0.6; transition: opacity 150ms ease; } .bb .bb-thumb img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .bb .bb-thumb[aria-current="true"] { opacity: 1; outline: 1px solid #672c45; outline-offset: 3px; } .bb .bb-thumb--stack { box-shadow: 4px 4px 0 -1px #fffbf5, 4px 4px 0 0 rgb(103 44 69 / 0.35); } .bb .bb-thumb:focus-visible { opacity: 1; outline: 2px solid #672c45; outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .bb .bb-thumb:hover { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bb .bb-thumb { transition: none; } } } /* Space under the product area, on the page's section rhythm (from 761px; phones keep their 54px: the buy column's 26px foot plus the grid's 28px). The product area ends --bb-foot (64px) above whatever follows, so the last photo and the buy column never meet a sand band (fit strip, compare, reviews, Worth Rooting For) or the footer. When the first section with content after it is a plain cream one that brings its own top (claims, how to use, ingredients, FAQ, routine), the two share one gap, as elsewhere on the site (rootist-site.css, "Section rhythm"): that section's top gives up the --bb-foot, so the gap stays one token (112px desktop, 88px tablet) and never stacks to 176px. The engine leaves an empty
for each section with nothing to show on this product, so "first with content" is the first later section that has a child element other than a or