/* * Brush labels (owner 2026-10-23, from Neya's LA to San Francisco flyer; mockup docs/design/brush_labels_mockup.html). * Loaded only while the active palette asks for them (includes-palettes.php, 'labels' => 'brush'). * A: page eyebrows on an olive brush stroke. B: MomHop pick badges on a deep-olive brush. E: Guide section heads * as a navy tab with an olive circle. The stroke is a mask, so its color is always the palette's. */ /* Classes are repeated to outweigh the app's own eyebrow rules (body.momhop-app-route .momhop-page .x). */ /* A and B share the stroke: white capitals with the brush drawn behind them. */ html body .momhop-results-eyebrow.momhop-results-eyebrow.momhop-results-eyebrow, html body .momhop-guides__eyebrow.momhop-guides__eyebrow.momhop-guides__eyebrow, html body .momhop-hero__eyebrow.momhop-hero__eyebrow.momhop-hero__eyebrow, html body .momhop-about2__label.momhop-about2__label.momhop-about2__label, html body .momhop-guide-island.momhop-guide-island .mh-kicker, html body .momhop-card__pickchip.momhop-card__pickchip.momhop-card__pickchip, html body .momhop-outing-glance__pick.momhop-outing-glance__pick.momhop-outing-glance__pick, html body .momhop-homefresh__seal.momhop-homefresh__seal.momhop-homefresh__seal, html body .momhop-shell-side__seal.momhop-shell-side__seal.momhop-shell-side__seal, html body .momhop-homefresh__gcat.momhop-homefresh__gcat.momhop-homefresh__gcat { background: none; border: 0; border-radius: 0; box-shadow: none; color: #fff; display: inline-block; font-family: var(--mh-ui-font); font-weight: 800; isolation: isolate; letter-spacing: .13em; line-height: 1.25; position: relative; justify-self: start; align-self: flex-start; max-width: max-content; text-transform: uppercase; width: fit-content; } html body .momhop-results-eyebrow.momhop-results-eyebrow.momhop-results-eyebrow::before, html body .momhop-guides__eyebrow.momhop-guides__eyebrow.momhop-guides__eyebrow::before, html body .momhop-hero__eyebrow.momhop-hero__eyebrow.momhop-hero__eyebrow::before, html body .momhop-about2__label.momhop-about2__label.momhop-about2__label::before, html body .momhop-guide-island.momhop-guide-island .mh-kicker::before, html body .momhop-card__pickchip.momhop-card__pickchip.momhop-card__pickchip::before, html body .momhop-outing-glance__pick.momhop-outing-glance__pick.momhop-outing-glance__pick::before, html body .momhop-homefresh__seal.momhop-homefresh__seal.momhop-homefresh__seal::before, html body .momhop-shell-side__seal.momhop-shell-side__seal.momhop-shell-side__seal::before, html body .momhop-homefresh__gcat.momhop-homefresh__gcat.momhop-homefresh__gcat::before { background: var(--mh-coral); content: ""; inset: 0; -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M14%209%20L26%2013%20L38%2013%20L50%2012%20L62%2010%20L74%2014%20L86%2014%20L98%2012%20L110%2012%20L122%2010%20L134%208%20L146%2011%20L158%2013%20L170%209%20L182%2014%20L194%2010%20L206%2010%20L218%208%20L230%2016%20L242%2014%20L254%2015%20L266%2013%20L278%208%20L290%2011%20L302%2012%20L314%209%20L326%2016%20L338%2011%20L350%209%20L362%2014%20L374%209%20L386%2015%20L393%2014%20L393%2020%20L394%2026%20L397%2032%20L388%2038%20L394%2044%20L394%2050%20L395%2056%20L387%2062%20L386%2068%20L374%2068%20L362%2067%20L350%2068%20L338%2066%20L326%2064%20L314%2071%20L302%2066%20L290%2070%20L278%2066%20L266%2072%20L254%2071%20L242%2070%20L230%2070%20L218%2069%20L206%2070%20L194%2065%20L182%2068%20L170%2071%20L158%2066%20L146%2071%20L134%2071%20L122%2067%20L110%2067%20L98%2068%20L86%2067%20L74%2072%20L62%2067%20L50%2064%20L38%2065%20L26%2070%20L14%2072%20L2%2066%20L5%2060%20L15%2054%20L5%2048%20L9%2042%20L4%2036%20L1%2030%20L0%2024%20L13%2018Z%22/%3E%3Crect%20x%3D%221%22%20y%3D%2253%22%20width%3D%229%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22394%22%20y%3D%2263%22%20width%3D%2210%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22-0%22%20y%3D%2234%22%20width%3D%2210%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%221%22%20y%3D%2237%22%20width%3D%2213%22%20height%3D%221.5%22/%3E%3C/svg%3E') center / 100% 100% no-repeat; mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M14%209%20L26%2013%20L38%2013%20L50%2012%20L62%2010%20L74%2014%20L86%2014%20L98%2012%20L110%2012%20L122%2010%20L134%208%20L146%2011%20L158%2013%20L170%209%20L182%2014%20L194%2010%20L206%2010%20L218%208%20L230%2016%20L242%2014%20L254%2015%20L266%2013%20L278%208%20L290%2011%20L302%2012%20L314%209%20L326%2016%20L338%2011%20L350%209%20L362%2014%20L374%209%20L386%2015%20L393%2014%20L393%2020%20L394%2026%20L397%2032%20L388%2038%20L394%2044%20L394%2050%20L395%2056%20L387%2062%20L386%2068%20L374%2068%20L362%2067%20L350%2068%20L338%2066%20L326%2064%20L314%2071%20L302%2066%20L290%2070%20L278%2066%20L266%2072%20L254%2071%20L242%2070%20L230%2070%20L218%2069%20L206%2070%20L194%2065%20L182%2068%20L170%2071%20L158%2066%20L146%2071%20L134%2071%20L122%2067%20L110%2067%20L98%2068%20L86%2067%20L74%2072%20L62%2067%20L50%2064%20L38%2065%20L26%2070%20L14%2072%20L2%2066%20L5%2060%20L15%2054%20L5%2048%20L9%2042%20L4%2036%20L1%2030%20L0%2024%20L13%2018Z%22/%3E%3Crect%20x%3D%221%22%20y%3D%2253%22%20width%3D%229%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22394%22%20y%3D%2263%22%20width%3D%2210%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22-0%22%20y%3D%2234%22%20width%3D%2210%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%221%22%20y%3D%2237%22%20width%3D%2213%22%20height%3D%221.5%22/%3E%3C/svg%3E') center / 100% 100% no-repeat; position: absolute; z-index: -1; } /* A: page eyebrows. */ html body .momhop-results-eyebrow.momhop-results-eyebrow.momhop-results-eyebrow, html body .momhop-guides__eyebrow.momhop-guides__eyebrow.momhop-guides__eyebrow, html body .momhop-hero__eyebrow.momhop-hero__eyebrow.momhop-hero__eyebrow, html body .momhop-about2__label.momhop-about2__label.momhop-about2__label, html body .momhop-guide-island.momhop-guide-island .mh-kicker { font-size: var(--mh-fs-micro); margin: 0 0 8px; padding: 6px 18px 7px; } html body .momhop-guide-island.momhop-guide-island .mh-kicker::after { display: none; } /* B: MomHop pick badges, a deeper stroke so they read on photos and on white. */ html body .momhop-card__pickchip.momhop-card__pickchip.momhop-card__pickchip, html body .momhop-outing-glance__pick.momhop-outing-glance__pick.momhop-outing-glance__pick, html body .momhop-homefresh__seal.momhop-homefresh__seal.momhop-homefresh__seal, html body .momhop-shell-side__seal.momhop-shell-side__seal.momhop-shell-side__seal, html body .momhop-homefresh__gcat.momhop-homefresh__gcat.momhop-homefresh__gcat { font-size: 10.5px; letter-spacing: .1em; padding: 4px 13px 5px; } html body .momhop-card__pickchip.momhop-card__pickchip.momhop-card__pickchip::before, html body .momhop-outing-glance__pick.momhop-outing-glance__pick.momhop-outing-glance__pick::before, html body .momhop-homefresh__seal.momhop-homefresh__seal.momhop-homefresh__seal::before, html body .momhop-shell-side__seal.momhop-shell-side__seal.momhop-shell-side__seal::before, html body .momhop-homefresh__gcat.momhop-homefresh__gcat.momhop-homefresh__gcat::before { background: var(--mh-coral-deep); -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M14%2012%20L26%2012%20L38%2015%20L50%2012%20L62%2012%20L74%2013%20L86%2010%20L98%2012%20L110%2013%20L122%2014%20L134%2010%20L146%2011%20L158%2010%20L170%2014%20L182%2013%20L194%209%20L206%2015%20L218%2015%20L230%2013%20L242%2013%20L254%2010%20L266%209%20L278%2012%20L290%209%20L302%2010%20L314%2010%20L326%209%20L338%2012%20L350%2012%20L362%2014%20L374%2012%20L386%2013%20L388%2014%20L389%2020%20L387%2026%20L387%2032%20L396%2038%20L388%2044%20L393%2050%20L392%2056%20L388%2062%20L386%2068%20L374%2069%20L362%2068%20L350%2067%20L338%2071%20L326%2071%20L314%2070%20L302%2069%20L290%2067%20L278%2066%20L266%2067%20L254%2065%20L242%2070%20L230%2067%20L218%2070%20L206%2067%20L194%2071%20L182%2070%20L170%2065%20L158%2066%20L146%2070%20L134%2068%20L122%2071%20L110%2067%20L98%2065%20L86%2069%20L74%2070%20L62%2067%20L50%2066%20L38%2067%20L26%2071%20L14%2070%20L11%2066%20L3%2060%20L9%2054%20L3%2048%20L6%2042%20L4%2036%20L5%2030%20L14%2024%20L11%2018Z%22/%3E%3Crect%20x%3D%22390%22%20y%3D%2231%22%20width%3D%2214%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%223%22%20y%3D%2245%22%20width%3D%228%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22391%22%20y%3D%2228%22%20width%3D%229%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22-0%22%20y%3D%2220%22%20width%3D%2211%22%20height%3D%221.5%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M14%2012%20L26%2012%20L38%2015%20L50%2012%20L62%2012%20L74%2013%20L86%2010%20L98%2012%20L110%2013%20L122%2014%20L134%2010%20L146%2011%20L158%2010%20L170%2014%20L182%2013%20L194%209%20L206%2015%20L218%2015%20L230%2013%20L242%2013%20L254%2010%20L266%209%20L278%2012%20L290%209%20L302%2010%20L314%2010%20L326%209%20L338%2012%20L350%2012%20L362%2014%20L374%2012%20L386%2013%20L388%2014%20L389%2020%20L387%2026%20L387%2032%20L396%2038%20L388%2044%20L393%2050%20L392%2056%20L388%2062%20L386%2068%20L374%2069%20L362%2068%20L350%2067%20L338%2071%20L326%2071%20L314%2070%20L302%2069%20L290%2067%20L278%2066%20L266%2067%20L254%2065%20L242%2070%20L230%2067%20L218%2070%20L206%2067%20L194%2071%20L182%2070%20L170%2065%20L158%2066%20L146%2070%20L134%2068%20L122%2071%20L110%2067%20L98%2065%20L86%2069%20L74%2070%20L62%2067%20L50%2066%20L38%2067%20L26%2071%20L14%2070%20L11%2066%20L3%2060%20L9%2054%20L3%2048%20L6%2042%20L4%2036%20L5%2030%20L14%2024%20L11%2018Z%22/%3E%3Crect%20x%3D%22390%22%20y%3D%2231%22%20width%3D%2214%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%223%22%20y%3D%2245%22%20width%3D%228%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22391%22%20y%3D%2228%22%20width%3D%229%22%20height%3D%221.5%22/%3E%3Crect%20x%3D%22-0%22%20y%3D%2220%22%20width%3D%2211%22%20height%3D%221.5%22/%3E%3C/svg%3E'); } html body .momhop-homefresh__seal.momhop-homefresh__seal.momhop-homefresh__seal { position: absolute; } /* E: Guide section heads as the flyer's navy tab with an olive circle, and a rule running on. */ html body .momhop-guide-island.momhop-guide-island .mh-sechead { align-items: center; display: flex; gap: 0; } html body .momhop-guide-island.momhop-guide-island .mh-sechead::after { background: var(--mh-ink); content: ""; flex: 1; height: 1.5px; margin-left: 10px; min-width: 16px; opacity: .35; } html body .momhop-guide-island.momhop-guide-island .mh-sechead .mh-ico { align-items: center; background: var(--mh-coral-deep); border-radius: 50%; box-shadow: 0 0 0 3px var(--mh-cream); display: flex; flex: 0 0 40px; font-size: 19px; height: 40px; justify-content: center; position: relative; width: 40px; z-index: 1; } html body .momhop-guide-island.momhop-guide-island .mh-sechead h2 { background: var(--mh-ink); border-radius: 0 999px 999px 0; color: #fff; font-family: var(--mh-ui-font); font-size: var(--mh-fs-small); font-weight: 700; letter-spacing: .08em; line-height: 1.25; margin: 0 0 0 -16px; padding: 8px 18px 8px 26px; text-transform: uppercase; } /* The seasonal hero's label takes the season's color (includes-home-seasons.php). */ html body .momhop-hero--season .momhop-hero__eyebrow.momhop-hero__eyebrow.momhop-hero__eyebrow::before { background: var(--season-label, var(--mh-coral)); } /* Home Guide covers: the category label on the brush, in the category's color, kept in the cover's corner. */ html body .momhop-homefresh__gcat.momhop-homefresh__gcat.momhop-homefresh__gcat { position: absolute; } html body .momhop-homefresh__gcat.momhop-homefresh__gcat.momhop-homefresh__gcat::before { background: var(--momhop-guide-cat, var(--mh-coral-deep)); } /* About page labels sit centered over their headings. */ html body .momhop-about2__label.momhop-about2__label.momhop-about2__label { justify-self: center; }