/* Static content pages (how-it-works, brands, faq, contact). Same AESTHETE monochrome-luxe language as results.css / listing.css: near-black ink, cream surfaces, Libre Caslon display, Hanken Grotesk body, sharp 1px outlines, uppercase micro-labels. Light theme only, like the rest of the site. */ :root { --ink: #1a1c1c; --ink-soft: #44474d; --line: #c5c6cd; --line-strong: #75777e; --surface: #f9f9f9; --surface-low: #f4f3f3; --surface-container: #eeeeee; --in: #2f6b46; --out: #b3261e; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--surface); } body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); } a { color: inherit; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* Scroll reveal: elements start hidden only when JS is present (pages.js adds .js to ), so no-JS visitors and reduced-motion users see everything. */ .js .reveal { opacity: 0; transform: translateY(12px); } .js .reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- topbar */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 18px 64px; background: rgba(249, 249, 249, 0.88); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--line); } .topbar a.home { flex: none; display: flex; align-items: center; text-decoration: none; } .topbar .brand-logo { width: 40px; height: 40px; object-fit: contain; display: block; } form.search { flex: 1; max-width: 480px; display: flex; } .search-bar { flex: 1; display: flex; align-items: center; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 4px 6px 4px 18px; transition: border-color .2s ease; } .search-bar:focus-within { border-color: var(--ink); } .scx-input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 15px; color: var(--ink); padding: 11px 6px; } .scx-input::placeholder { color: var(--line-strong); } .submit { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--ink); border: none; border-radius: 0; color: #fff; cursor: pointer; transition: background .2s ease; } .submit:hover { background: #000; } .submit:active { transform: scale(0.97); } .submit svg { stroke: currentColor; } .site-links { margin-left: auto; display: flex; align-items: center; gap: 26px; } .site-links a { font-size: 11px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } .site-links a:hover { color: var(--ink); border-bottom-color: var(--ink); } .site-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); } /* ---- mobile menu ---- */ /* The four links do not fit beside the search box on a phone. They used to wrap into a scrolling strip, which hid the last of them; below 720px they move into a sheet instead. Burger + sheet are injected by pages.js from these links. */ .nav-burger { display: none; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; align-items: center; justify-content: center; flex-direction: column; background: transparent; border: 1px solid var(--line); border-radius: 0; color: var(--ink); cursor: pointer; } .nav-burger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .nav-burger span { display: block; width: 17px; height: 1.5px; background: currentColor; transition: transform .28s var(--ease), opacity .2s ease; } .nav-burger span + span { margin-top: 5px; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-sheet { position: fixed; inset: 0; z-index: 60; background: var(--surface); opacity: 0; visibility: hidden; transition: opacity .26s var(--ease), visibility .26s var(--ease); } .nav-sheet.open { opacity: 1; visibility: visible; } .nav-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line); min-height: 70px; } .nav-sheet-head .brand-logo { width: 34px; height: 34px; object-fit: contain; } .nav-sheet-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; } .nav-sheet nav { display: flex; flex-direction: column; padding: 8px 24px 40px; } .nav-sheet nav a { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 26px; color: var(--ink); text-decoration: none; padding: 22px 2px; border-bottom: 1px solid var(--line); } .nav-sheet nav a[aria-current="page"] { color: var(--ink-soft); } body.menu-open { overflow: hidden; } /* ---------------------------------------------------------- page scaffold */ .page { max-width: 1240px; margin: 0 auto; padding: 0 64px 96px; } .section { padding: 76px 0 0; } .section.tight { padding-top: 56px; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; } .h-display { font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .h-section { font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 16px; } .h-sub { font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.25; margin: 0 0 8px; } .lede { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 58ch; margin: 20px 0 0; } .body-text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 65ch; } .body-text b { color: var(--ink); font-weight: 600; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 0; border: 1px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover { background: #000; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .btn:disabled { opacity: .45; cursor: default; transform: none; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* -------------------------------------------------------------- page hero */ .page-hero { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 72px; align-items: end; padding: 72px 0 48px; border-bottom: 1px solid var(--line); } .page-hero .hero-cta { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; } /* No side column: the copy carries the row on its own, so cap its measure. */ .page-hero.solo { grid-template-columns: 1fr; } .page-hero.solo > div { max-width: 62ch; } /* ------------------------------------------------ source section + logos */ /* Copy on the left, the actual discounter logos on the right. The logos are the evidence for the claim, so they sit beside it rather than in a strip. */ .source { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; } .logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .logo-cell { background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 22px 16px; min-height: 92px; } /* 11 stores into a 4-wide grid leaves a hole; the last cell closes the row. */ .logo-cell:last-child { grid-column: span 2; } .logo-cell img { max-height: 26px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: opacity .3s var(--ease), filter .3s var(--ease); } .logo-cell:hover img { filter: grayscale(0); opacity: 1; } /* Square emblems read tiny at wordmark height; give them room, as the hero does. */ .logo-cell.is-emblem img { max-height: 44px; } .logo-cell .wordmark { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--line-strong); text-align: center; } /* ------------------------------------------------- live comparison panel */ /* Real offers for one real bottle, fetched from /api/search at page load. Never a hand-drawn mock: if the fetch fails the whole section is removed. */ .compare { border: 1px solid var(--ink); background: #fff; } .compare-head { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-bottom: 1px solid var(--ink); } .compare-shot { flex: none; width: 72px; height: 72px; background: var(--surface-low); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 8px; } .compare-shot img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .compare-title { min-width: 0; } .compare-title .cbrand { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .compare-title .cname { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 24px; line-height: 1.2; margin: 4px 0 0; } .compare-title .csize { margin-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--line-strong); } .crow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 16px 26px; border-bottom: 1px solid var(--line); } .crow:last-of-type { border-bottom: 0; } .crow.best { background: var(--surface-low); } .crow-store { display: flex; align-items: center; gap: 14px; min-width: 0; } .crow-store img { height: 20px; max-width: 118px; object-fit: contain; } .crow-store .cstore-name { font-size: 13.5px; font-weight: 600; } .crow-flag { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 4px 8px; white-space: nowrap; } .crow-oos { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--out); border: 1px solid var(--out); padding: 3px 7px; white-space: nowrap; } .crow-price { text-align: right; line-height: 1.25; } .crow-price .ctotal { font-size: 19px; font-weight: 700; color: var(--ink); } .crow-price .cship { display: block; font-size: 10.5px; color: var(--line-strong); letter-spacing: 0.02em; margin-top: 2px; } .crow.dim .crow-store, .crow.dim .crow-price { opacity: 0.55; } .compare-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid var(--ink); background: var(--surface-low); } .compare-foot .cnote { font-size: 12px; color: var(--ink-soft); } .compare-foot a { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; } .compare-foot a:hover { border-color: var(--ink); } .compare.loading .crow-sk { height: 20px; margin: 18px 26px; background: linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; } .compare-spread { margin-top: 22px; font-size: 14.5px; color: var(--ink); } .compare-spread b { font-weight: 700; } /* ------------------------------------------------------------ store cards */ .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .store-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); background: var(--surface); padding: 22px 24px 20px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .store-card:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(26,28,28,0.06); } .store-card .slogo { height: 24px; max-width: 150px; object-fit: contain; align-self: flex-start; } .store-card .sname { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; } .store-card .sblurb { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; flex: 1; } .store-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .srating { font-size: 13px; color: var(--ink); font-weight: 600; } .srating .rcount { font-weight: 400; color: var(--line-strong); margin-left: 6px; font-size: 11.5px; } .srating.none { font-weight: 400; color: var(--line-strong); font-size: 11.5px; letter-spacing: 0.04em; } .sships { font-size: 10.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--line-strong); } /* ------------------------------------------------------- verification grid */ /* Four cells, four different surfaces: photo, ink, tint, plain. */ .verify-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } .vcell { background: var(--surface); padding: 34px 32px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; } .vcell h3 { font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; font-size: 24px; margin: 0 0 10px; } .vcell p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); } .vcell.tint { background: var(--surface-container); } .vcell.ink { background: var(--ink); } .vcell.ink h3 { color: #fff; } .vcell.ink p { color: rgba(255,255,255,0.72); } /* The scrim has to carry AA contrast for white body copy over a bright sky, so it is heavy at the bottom where the text sits, not merely decorative. */ .vcell.photo { background: linear-gradient(180deg, rgba(12,20,30,0.10) 0%, rgba(12,20,30,0.62) 52%, rgba(12,20,30,0.90) 100%), url('../uploads/back.jpg') center 35% / cover no-repeat; min-height: 300px; } .vcell.photo h3 { color: #fff; } .vcell.photo p { color: rgba(255,255,255,0.88); } /* -------------------------------------------------------------- CTA band */ .band { margin-top: 84px; border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 56px 56px 52px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .band h2 { font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; margin: 0; color: #fff; } .band p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 52ch; } .band .btn { background: #fff; color: var(--ink); border-color: #fff; } .band .btn:hover { background: var(--surface-container); } /* ------------------------------------------------------------- brand grid */ .brand-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; } .brand-filter { display: flex; align-items: center; border-bottom: 1px solid var(--line-strong); min-width: 260px; } .brand-filter:focus-within { border-color: var(--ink); } .brand-filter input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--ink); padding: 8px 2px; } .brand-filter input::placeholder { color: var(--line-strong); } .brand-count { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } .bcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); background: var(--surface); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } /* display:flex above beats the [hidden] UA rule, so the filter needs this. */ .bcard[hidden] { display: none; } .bcard:hover { border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(26,28,28,0.06); } .bcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .bcard-img { aspect-ratio: 4 / 3; background: var(--surface-low); display: flex; align-items: center; justify-content: center; padding: 18px; overflow: hidden; } .bcard-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease); } .bcard:hover .bcard-img img { transform: scale(1.03); } .bcard-img.loading { background: linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; } .bcard-img.empty { color: var(--line-strong); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .bcard-body { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 22px; flex: 1; } .bcard-name { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 22px; line-height: 1.2; margin: 0; } .bcard-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; flex: 1; } .bcard-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); } .bcard-price { font-size: 15px; font-weight: 700; color: var(--ink); } .bcard-price.none { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--line-strong); } .bcard-go { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .bcard:hover .bcard-go { color: var(--ink); } /* Featured house: one wide editorial row above the grid. */ .house { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; border: 1px solid var(--line); background: var(--surface-low); padding: 48px 52px; } .house-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .house-shots[hidden] { display: none; } .house-shot { aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 14px; } .house-shot img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .house-shot.loading { background: linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 37%,#f0f0f0 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; } .brand-empty { padding: 70px 20px; text-align: center; color: var(--ink-soft); } .brand-empty b { color: var(--ink); } /* --------------------------------------------------------------- accordion */ .faq-layout { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 72px; align-items: start; } .faq-aside { position: sticky; top: 116px; } .faq-aside nav { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; } .faq-aside nav a { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color .2s ease; } .faq-aside nav a:hover { color: var(--ink); } .faq-group + .faq-group { margin-top: 56px; } .faq-group > h2 { font-family: 'Libre Caslon Text', Georgia, serif; font-weight: 400; font-size: 26px; margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); } details.qa { border-bottom: 1px solid var(--line); } details.qa summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; transition: color .2s ease; } details.qa summary::-webkit-details-marker { display: none; } details.qa summary:hover { color: #000; } details.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } details.qa summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 1px; background: var(--ink); } details.qa summary::before { content: ""; position: absolute; right: 11px; top: 50%; margin-top: -5px; width: 1px; height: 11px; background: var(--ink); transition: transform .25s var(--ease), opacity .25s var(--ease); } details.qa[open] summary::before { transform: rotate(90deg); opacity: 0; } details.qa .qa-body { padding: 0 60px 24px 0; animation: fadeIn .3s var(--ease) both; } details.qa .qa-body p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-soft); } details.qa .qa-body p + p { margin-top: 12px; } details.qa .qa-body a { color: var(--ink); } /* -------------------------------------------------------------------- form */ .contact-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: start; } .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .field label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .field .hint { font-size: 12.5px; color: var(--ink-soft); } .field input, .field select, .field textarea { font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 13px 14px; outline: none; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; } .field textarea { resize: vertical; min-height: 150px; line-height: 1.6; } .field input::placeholder, .field textarea::placeholder { color: var(--line-strong); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26,28,28,0.07); } .field .err { font-size: 12.5px; color: var(--out); min-height: 0; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--out); } .form-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; } .form-note { font-size: 12.5px; color: var(--ink-soft); max-width: 40ch; line-height: 1.5; } .form-status { margin-top: 24px; border: 1px solid var(--in); border-left-width: 3px; padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--ink); animation: cardIn .35s var(--ease) both; } .form-status[hidden] { display: none; } .form-status b { color: var(--in); } .contact-facts { border-top: 1px solid var(--ink); padding-top: 8px; } .fact { padding: 22px 0; border-bottom: 1px solid var(--line); } .fact h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; } .fact p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); } .fact p a { color: var(--ink); } .fact p.soft { color: var(--ink-soft); font-size: 13.5px; } /* ------------------------------------------------------------------ footer */ .site-footer { border-top: 1px solid var(--line); background: var(--surface-low); margin-top: 96px; } .footer-inner { max-width: 1240px; margin: 0 auto; padding: 56px 64px 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; } .footer-inner .brand-logo { width: 42px; height: 42px; object-fit: contain; } .footer-blurb { margin: 18px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); max-width: 38ch; } .footer-col h4 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; } .footer-col a { display: block; font-size: 14px; color: var(--ink-soft); text-decoration: none; margin-bottom: 11px; transition: color .2s ease; } .footer-col a:hover { color: var(--ink); } .footer-legal { max-width: 1240px; margin: 0 auto; padding: 20px 64px 34px; font-size: 11.5px; color: var(--line-strong); letter-spacing: 0.03em; } /* -------------------------------------------------------------- responsive */ @media (max-width: 1024px) { .site-links { gap: 18px; } .site-links a { font-size: 10.5px; letter-spacing: 0.08em; } form.search { max-width: 300px; } .page-hero { grid-template-columns: 1fr; gap: 44px; align-items: start; } .faq-layout, .contact-layout, .house { grid-template-columns: 1fr; gap: 40px; } .faq-aside { position: static; } .house { padding: 36px 32px; } } @media (max-width: 900px) { .topbar { gap: 16px; padding: 14px 24px; } .page { padding: 0 24px 72px; } .footer-inner { padding: 44px 24px 36px; grid-template-columns: 1fr 1fr; gap: 36px; } .footer-legal { padding: 16px 24px 30px; } .source { grid-template-columns: 1fr; gap: 36px; } .verify-grid { grid-template-columns: 1fr; } .compare-head { flex-wrap: wrap; gap: 16px; } .band { grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; } } @media (max-width: 720px) { /* Links move into the sheet; the search box keeps the row. */ .topbar { gap: 12px; padding: 12px 18px; } .site-links { display: none; } .nav-burger { display: flex; } .topbar .brand-logo { width: 34px; height: 34px; } form.search { max-width: none; } /* 16px keeps iOS Safari from zooming the page in when the field is focused. */ .scx-input { font-size: 16px; padding: 10px 6px; } .search-bar { padding-left: 14px; } } @media (max-width: 560px) { .section { padding-top: 56px; } .page { padding: 0 18px 64px; } .brand-grid, .store-grid { grid-template-columns: 1fr; } .logo-wall { grid-template-columns: repeat(2, 1fr); } /* 11 cells over 2 columns: the odd last cell spans the row on its own. */ .logo-cell:last-child { grid-column: span 2; } .crow, .compare-head, .compare-foot { padding-left: 18px; padding-right: 18px; } .crow { grid-template-columns: 1fr auto; gap: 14px; } .crow-store { flex-wrap: wrap; gap: 8px; } .house { padding: 28px 20px; } .house-shots { grid-template-columns: repeat(3, 1fr); gap: 8px; } .footer-inner { grid-template-columns: 1fr; padding: 40px 18px 32px; } .footer-legal { padding: 16px 18px 30px; } .band { padding: 32px 22px; margin-top: 64px; } .vcell { padding: 28px 22px; min-height: 200px; } .brand-toolbar { gap: 16px; } .brand-filter { min-width: 0; width: 100%; } details.qa summary { padding-right: 34px; font-size: 15px; } details.qa .qa-body { padding-right: 0; } .form-foot { gap: 14px; } .form-foot .btn { width: 100%; } }