/* ===================================================== Healio — social proof below the product grid. The homepage runs these sections full-bleed. Here they live inside .page-shell, which already has the site's max-width and side padding, so every rule below is doing one of three things: undoing a second layer of padding, closing the corners so a full-bleed background reads as a panel instead of a broken edge, or trimming the vertical rhythm — a page that already showed 24 products cannot afford homepage-sized breathing room. ===================================================== */ .arch-social { margin-top: clamp(52px, 7vw, 88px); display: grid; gap: clamp(38px, 4.6vw, 62px); /* Two blocks below run the full width of the window out of this centred column. The usual width:100vw escape is wrong in a boxed layout: 100vw counts the classic desktop scrollbar that clientWidth does not, so a bleeding child overhangs by ~15px and the whole page gains a horizontal scrollbar. --healio-sbw is that gap, measured and published by the inline script in inc/archive-social-proof.php. The percentage in --bleed-m resolves against the child that uses it, which is a grid item in this same column, so both blocks land on the window edge together. overflow-x:hidden on would have been shorter and would have silently killed the sticky Research Notes heading. */ --sbw: var(--healio-sbw, 0px); --bleed-w: calc(100vw - var(--sbw)); --bleed-m: calc(50% - 50vw + var(--sbw) / 2); } /* Landing spot for "Back to products". The offset clears the sticky header, so the first row of cards is not tucked underneath it on arrival. */ .arch-anchor { display: block; height: 0; scroll-margin-top: 110px; } .arch-social__cta { text-align: center; margin-top: calc(clamp(38px, 4.6vw, 62px) * -0.35); } /* ----------------------------------------------------- 1. Video wall ----------------------------------------------------- */ .ugc-real--archive { padding: clamp(36px, 4.6vw, 60px) 0 clamp(32px, 4vw, 52px); border: 1px solid var(--line); border-radius: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-soft); } /* .page-shell has already paid for the side padding; .ugc-real__inner and the rail would each charge for it again. */ .ugc-real--archive .ugc-real__inner { max-width: none; padding: 0 clamp(20px, 3vw, 40px); } .ugc-real--archive .ugc-rail--home { max-width: none; padding: 0 clamp(20px, 3vw, 40px); } .ugc-real--archive .ugc-real__rail-wrap { margin-top: clamp(26px, 3.2vw, 40px); } /* The homepage heading is sized off the viewport (7vw) because it runs the full width of the page. In a panel that is ~80px narrower on each side the same term overflows, so the archive gets its own, gentler curve — still one unbroken line, just a smaller one. */ .ugc-real--archive .ugc-real__inner h2, .ugc-real--archive .ugc-real__inner .hd--h2 { font-size: clamp(21px, 4.6vw, 40px); } /* The orbs are sized for a full-width band; scaled down they stay soft background wash rather than two obvious pink blobs in a small box. */ .ugc-real--archive .ugc-real__orb--1 { width: 260px; height: 260px; top: -90px; left: -70px; } .ugc-real--archive .ugc-real__orb--2 { width: 220px; height: 220px; bottom: -90px; right: -60px; } /* ----------------------------------------------------- 2. Written reviews ----------------------------------------------------- */ .arch-reviews__head { text-align: center; margin-bottom: clamp(24px, 3vw, 36px); } .arch-reviews__head .eyebrow { justify-content: center; } .arch-reviews__head h2, .arch-reviews__head .hd--h2 { font-size: clamp(25px, 3vw, 38px); } /* ----------------------------------------------------- 3. "In The Wild" photo band ----------------------------------------------------- */ /* Runs the full width of the window, exactly as it does on the homepage — inside .page-shell it was reading as a card, and a marquee that stops short of the screen edge looks boxed in rather than endless. Everything else is inherited from .wild in main.css, including the 280px tiles and the phone breakpoint, so the two placements cannot drift apart. */ .wild--archive { width: var(--bleed-w); margin-inline: var(--bleed-m); padding: clamp(34px, 4.4vw, 56px) 0; } .wild--archive .wild-head h2, .wild--archive .wild-head .hd--h2 { font-size: clamp(25px, 3vw, 38px); } /* ----------------------------------------------------- Phones ----------------------------------------------------- */ @media (max-width: 860px) { /* The rail turns into a full-bleed marquee at this width (ugc.css), and a marquee that stops short of the panel edge looks like a mistake — the fade mask is what should end it, not a gap. */ .ugc-real--archive .ugc-rail--home { padding: 0; } .arch-anchor { scroll-margin-top: 84px; } } /* ----------------------------------------------------- 4. "Explore" tiles — round category portraits ----------------------------------------------------- */ .arch-tiles__head { text-align: center; margin-bottom: clamp(26px, 3.2vw, 40px); } .arch-tiles__head h2, .arch-tiles__head .hd--h2 { font-size: clamp(24px, 2.8vw, 36px); } .arch-tiles__sub { max-width: 56ch; margin: 14px auto 0; color: var(--mauve); font-size: 16px; line-height: 1.6; } /* Six across on desktop, always exactly six — healio_archive_tile_slugs() tops the row up with Best Sellers when the current collection is dropped from it, so the grid never has to cope with a ragged last cell. */ .arch-tiles__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 26px); align-items: start; } .arch-tile { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; text-decoration: none; color: var(--wine); } .arch-tile__circle { display: block; width: 100%; max-width: 168px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; /* The blush disc is what shows through while the picture is still loading, and stays put when a category has neither its own image nor a product to borrow one from, so the tile always reads as a tile. */ background: var(--blush-soft); box-shadow: 0 1px 2px rgba(43, 10, 20, 0.06); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } .arch-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; } .arch-tile:hover .arch-tile__circle { transform: translateY(-6px); box-shadow: 0 20px 38px -16px rgba(43, 10, 20, 0.38); } .arch-tile__name { font-family: var(--font-display); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.3; letter-spacing: 0.01em; } .arch-tile:hover .arch-tile__name { color: var(--berry); } /* ----------------------------------------------------- 5. Scrolling trust strip Bleeds to the window edge on the --bleed-* variables set on .arch-social. ----------------------------------------------------- */ .arch-bar { width: var(--bleed-w); margin-inline: var(--bleed-m); padding: 17px 0; overflow: hidden; /* Deliberately unlike the homepage's wine strip, and deliberately flat: one plain ground and two hairlines, no gradient, no shadow, no fade at the ends. A band this thin only has to read as a printed rule of small type — any depth on it makes it the loudest object on a page whose job is to sell what is above it. */ background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .arch-bar__track { display: flex; width: max-content; animation: arch-bar-scroll var(--arch-bar-duration, 40s) linear infinite; } .arch-bar:hover .arch-bar__track { animation-play-state: paused; } /* Two groups sit flush inside the track; the trailing gap on the last item supplies the space after it, so both groups measure the same and the -50% slide lands on a seam. */ .arch-bar__group { display: flex; align-items: center; } .arch-bar__item { display: inline-flex; align-items: center; gap: 9px; margin-right: 56px; white-space: nowrap; } .arch-bar__ico { flex: 0 0 auto; display: grid; place-items: center; width: 17px; height: 17px; color: var(--rose); } .arch-bar__ico svg { width: 100%; height: 100%; } .arch-bar__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wine); } @keyframes arch-bar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .arch-bar__track { animation: none; } .arch-tile__circle, .arch-tile:hover .arch-tile__circle { transition: none; transform: none; } } /* ----------------------------------------------------- Tablets and phones — the tile row rewraps ----------------------------------------------------- */ @media (max-width: 1000px) { .arch-tiles__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; } } @media (max-width: 560px) { /* Two up rather than a scroller: six tiles read fine as three rows at this width, and a horizontal scroller here would be the fourth swipeable strip on the page. */ .arch-tiles__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arch-tile__circle { max-width: 140px; } .arch-bar__item { margin-right: 34px; } .arch-bar__label { font-size: 11px; letter-spacing: 0.1em; } }