/* * AquaNetica Marketplace — Feed & Nutrition. * * TOKENS are the same values as marketplace.css (which ports them from * consultants.css, which ports them from ocnark's directory.css), so the feed * marketplace is visually one product with the equipment marketplace, the * consultant directory and the company directory. * * CLASS NAMES are namespaced aqnf-* with ZERO selectors shared with aqnm-*, * aqnc-* or any theme class. SiteGround Optimizer combines stylesheets, and a * shared name has already broken a plugin on this site once (see the header * of consultants.css). Identical visual language, no shared selector, no * generic names. * * Mobile first. Every interactive target is at least 44px, every text input * is at least 16px on a phone (anything smaller makes iOS Safari zoom the * page on focus), focus is always visible, and nothing overflows the * viewport horizontally — wide things scroll inside their own container. * * No framework, no build step, no external font. */ .aqnf-root, .aqnf-root *, .aqnf-root *::before, .aqnf-root *::after { box-sizing: border-box; } /* * The [hidden] attribute has to actually hide things. * * The browser's own rule is `[hidden] { display: none }` at UA specificity, * which ANY class selector setting a display beats — so `.aqnf-field { * display: block }` silently defeated `hidden` on the conditional fields, * and `.aqnf-compare-tray { display: flex }` defeated it on the compare tray, * which then sat on screen saying "0 selected". Every hidden state in this * file is driven from JS by the attribute, so it gets one rule that wins. */ .aqnf-root [hidden], .aqnf-root[hidden] { display: none !important; } .aqnf-root { --c-teal: #15807d; --c-teal-ink: #15807d; --c-teal-hover: #0d6b68; --c-bg: #f8fafc; --c-surface: #fff; --c-border: #e2e8f0; --c-card-border: #e6eef0; --c-panel-border: #e3eceb; --c-heading: #0b1320; --c-text: #0f172a; --c-body: #475569; --c-muted: #64748b; --c-chip: #f1f5f9; --c-good: #166534; --c-good-bg: #dcfce7; --c-warn: #92400e; --c-warn-bg: #fef3c7; --c-err: #b32d2e; --c-err-bg: #fee2e2; --r-card: 16px; --r-control: 10px; background: var(--c-bg); color: var(--c-text); padding: 40px 0; font-size: 16px; line-height: 1.5; } /* * The marketplace shell. 1200px, and a gutter that grows with the viewport * rather than one value stretched across every device: 16 on a phone, 20 on a * tablet, 24 on a laptop, 32 on a desktop. The equipment marketplace uses the * same 1200px measure, so the two verticals line up. */ /* ======================================================================== * THE CONTENT SHELL * * ONE definition of the horizontal gutter, for every top-level wrapper this * plugin renders, so no page depends on the theme to keep its content off the * edge of the screen. * * WHY THIS EXISTS. .aqnf-container carried the gutter and the form pages did * not use it: /list-feed/ emitted .aqnf-root > .aqnf-form-wrap with zero * horizontal padding at every level, and borrowed its margin from whatever * the theme's content wrapper happened to supply. On the block theme used for * testing that is 31px from .entry-content and the page looks fine. On a * full-width Astra or Elementor container it is nothing, and every element * lands at x=0: measured, the back link's chevron sat exactly on the viewport * edge. The gutter is ours to own, not the theme's to donate. * * width:100% rather than 100vw, deliberately: 100vw includes the scrollbar on * desktop and overflows by its width, which is the classic source of a page * that scrolls sideways by 15px for no visible reason. * ===================================================================== */ .aqnf-root { --aqnf-gutter: 16px; --aqnf-measure: 1200px; } @media (min-width: 640px) { .aqnf-root { --aqnf-gutter: 20px; } } @media (min-width: 960px) { .aqnf-root { --aqnf-gutter: 24px; } } @media (min-width: 1280px) { .aqnf-root { --aqnf-gutter: 32px; } } .aqnf-container, .aqnf-form-wrap { width: 100%; margin-inline: auto; padding-inline: var(--aqnf-gutter); } .aqnf-container { max-width: var(--aqnf-measure); } .aqnf-container-narrow { max-width: 820px; } /* * Safe areas, as an enhancement rather than a replacement. A browser without * env() support drops the whole max() declaration, which would take the * gutter with it, so the plain value above stays and this only ever widens it * on a device that actually has a notch or a rounded corner. */ @supports (padding: max(0px)) { .aqnf-container, .aqnf-form-wrap { padding-inline: max(var(--aqnf-gutter), env(safe-area-inset-left)) max(var(--aqnf-gutter), env(safe-area-inset-right)); } } .aqnf-root h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.15; margin: 0 0 12px; color: var(--c-heading); } .aqnf-root h2 { font-size: clamp(20px, 3vw, 26px); line-height: 1.2; margin: 0 0 12px; color: var(--c-heading); } .aqnf-root h3, .aqnf-subhead { font-size: 17px; margin: 24px 0 10px; color: var(--c-heading); } .aqnf-root p { margin: 0 0 12px; color: var(--c-body); } .aqnf-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-teal-ink); font-weight: 700; margin-bottom: 10px; } .aqnf-muted { color: var(--c-muted); } .aqnf-fineprint { font-size: 13px; line-height: 1.5; color: var(--c-muted); margin: 16px 0 0; } .aqnf-fineprint a { color: var(--c-teal-ink); } /* * MARKETPLACE INFORMATION and the CALCULATOR RESPONSIBILITY NOTE. * * Two separate blocks answering two separate questions: who sells the feed, * and what the calculator does not know. Both use the same quiet treatment, * built from tokens that already exist. Neither is an alert: no red, no * warning yellow, no icon. Nothing has gone wrong, and dressing a standing * fact as a problem is the most reliable way to make people stop reading it. */ /* Below the results, with real air on both sides. */ .aqnf-info { display: block; margin: 40px 0 0; padding: 16px 18px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-chip); } /* * Scoped to .aqnf-root deliberately. These are real h2 and h3 elements, and * ".aqnf-root h2" is a type-plus-class selector that out-specifies a bare * class, so an unscoped rule here rendered the heading at the section size. */ .aqnf-root .aqnf-info-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--c-heading); margin: 0 0 6px; } .aqnf-info-body { font-size: 14px; line-height: 1.5; color: var(--c-body); margin: 0; } .aqnf-info-link { margin: 8px 0 0; font-size: 14px; line-height: 1.5; } .aqnf-info-link a { color: var(--c-teal-ink); font-weight: 600; } /* A 44px tap target for the terms link on a phone, without turning it into a * button on a desktop where it is plainly a link. */ @media (max-width: 640px) { .aqnf-info { padding: 16px; } .aqnf-info-link a { display: inline-flex; align-items: center; min-height: 44px; } } /* The calculator's own note, directly under the results and FX information. */ .aqnf-disclaimer { display: block; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-chip); } .aqnf-root .aqnf-disclaimer-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--c-heading); margin: 0 0 6px; } .aqnf-disclaimer-body { font-size: 13.5px; line-height: 1.5; color: var(--c-body); margin: 0; } .aqnf-disclaimer-inline { font-size: 13px; line-height: 1.5; color: var(--c-muted); background: var(--c-chip); border-radius: var(--r-control); padding: 12px 14px; margin: 16px 0 0; } .aqnf-hint { font-size: 14px; color: var(--c-muted); margin: 0 0 12px; } .aqnf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ======================================================================== * Buttons — 44px minimum, always * ===================================================================== */ .aqnf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: var(--r-control); border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .aqnf-btn-primary { background: var(--c-teal); border-color: var(--c-teal); color: #fff; } .aqnf-btn-primary:hover { background: var(--c-teal-hover); border-color: var(--c-teal-hover); color: #fff; } .aqnf-btn-secondary { background: var(--c-surface); border-color: var(--c-teal); color: var(--c-teal-ink); } .aqnf-btn-secondary:hover { background: #f0f9f8; color: var(--c-teal-hover); } .aqnf-btn-quiet { background: transparent; border-color: var(--c-border); color: var(--c-body); } .aqnf-btn-quiet:hover { border-color: var(--c-teal); color: var(--c-teal-ink); } .aqnf-btn-block { display: flex; width: 100%; margin-bottom: 8px; } .aqnf-btn.is-disabled { opacity: .5; pointer-events: none; } .aqnf-root a:focus-visible, .aqnf-root button:focus-visible, .aqnf-root input:focus-visible, .aqnf-root select:focus-visible, .aqnf-root textarea:focus-visible, .aqnf-root summary:focus-visible { outline: 3px solid rgba(21,128,125,.45); outline-offset: 2px; } /* ======================================================================== * Forms * ===================================================================== */ .aqnf-form-wrap { max-width: 880px; } .aqnf-form-wrap > .aqnf-backlink { margin-bottom: 4px; } .aqnf-form-title { margin-bottom: 8px; } .aqnf-form-sub { margin-bottom: 24px; } .aqnf-field { display: block; margin: 0 0 16px; } .aqnf-field > span, .aqnf-fieldset > legend { display: block; font-size: 14px; font-weight: 600; color: var(--c-text); margin: 0 0 6px; padding: 0; } .aqnf-field input[type=text], .aqnf-field input[type=number], .aqnf-field input[type=search], .aqnf-field input[type=date], .aqnf-field select, .aqnf-field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-text); /* 16px is not a style choice: below it, iOS Safari zooms the page. */ font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; } .aqnf-field textarea { min-height: 120px; resize: vertical; } .aqnf-field input:focus, .aqnf-field select:focus, .aqnf-field textarea:focus { border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(21,128,125,.15); } /* File inputs are styled once, in the upload block at the end of this file. * This rule used to set font-size:15px at (0,2,1), which out-specified it and * reinstated the iOS zoom-on-focus that every other control here avoids. */ .aqnf-field input[type=file] { width: 100%; } .aqnf-dir-search { width: 100%; height: 52px; padding: 0 14px 0 40px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-text); /* 16px is not a style choice: below it, iOS Safari zooms the page. */ font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; } .aqnf-dir-search:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(21,128,125,.15); } .aqnf-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; } .aqnf-fieldset { border: 1px solid var(--c-panel-border); border-radius: var(--r-card); padding: 16px; margin: 0 0 20px; } .aqnf-fieldset.is-invalid { border-color: var(--c-err); } .aqnf-checkgrid { display: grid; grid-template-columns: 1fr; gap: 4px; } .aqnf-checkgroup { margin: 0 0 14px; } .aqnf-checkgroup-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: 0 0 6px; } .aqnf-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; font-size: 15px; color: var(--c-body); cursor: pointer; line-height: 1.3; } .aqnf-check input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--c-teal); cursor: pointer; } .aqnf-check-standalone { align-items: flex-start; } .aqnf-radio-cards { display: block; } .aqnf-radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 0 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); cursor: pointer; } .aqnf-radio-card input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-teal); flex: 0 0 auto; } .aqnf-radio-card:has(input:checked) { border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(21,128,125,.12); } .aqnf-radio-card-body strong { display: block; font-size: 15px; color: var(--c-heading); } .aqnf-radio-card-body small { display: block; font-size: 13.5px; color: var(--c-muted); margin-top: 3px; } .aqnf-radio-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; } .aqnf-radio { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--c-body); cursor: pointer; } .aqnf-radio input { width: 20px; height: 20px; accent-color: var(--c-teal); } .aqnf-analysis-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; } .aqnf-suffix-wrap { position: relative; display: block; } .aqnf-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: 14px; pointer-events: none; } .aqnf-field-pct input { padding-right: 34px; } .aqnf-inline-pair { display: grid; grid-template-columns: 1fr 110px; gap: 8px; } .aqnf-inline-pair input, .aqnf-inline-pair select { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-text); } .aqnf-req { color: var(--c-err); font-style: normal; } .aqnf-details { border: 1px solid var(--c-panel-border); border-radius: var(--r-card); padding: 4px 16px; margin: 0 0 20px; background: var(--c-surface); } .aqnf-details > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--c-teal-ink); } .aqnf-details[open] > summary { margin-bottom: 8px; } .aqnf-tier-row { padding: 10px 0; border-top: 1px solid var(--c-chip); } .aqnf-cert-row { padding: 14px 0; border-top: 1px solid var(--c-chip); } .aqnf-cert-row:first-of-type { border-top: 0; } .aqnf-cert-verified { font-size: 13px; color: var(--c-good); background: var(--c-good-bg); border-radius: 8px; padding: 8px 10px; } .aqnf-inline-error { display: block; margin-top: 6px; font-size: 13.5px; color: var(--c-err); } .aqnf-notice { border-radius: var(--r-control); padding: 14px 16px; margin: 0 0 20px; font-size: 15px; } .aqnf-notice-ok { background: var(--c-good-bg); color: var(--c-good); } .aqnf-notice-err { background: var(--c-err-bg); color: var(--c-err); } .aqnf-notice-warn { background: var(--c-warn-bg); color: var(--c-warn); } /* * INHERIT THE NOTICE COLOUR, BUT NOT ONTO BUTTONS. * * This rule is (0,1,1) and .aqnf-btn-primary is (0,1,0), so without the * :not() it won its own stylesheet's colour fight: the primary CTA inside the * success card rendered teal fill with the notice's dark green text instead of * white, and the secondary lost its teal ink the same way. Prose links inside * a notice should still take the notice colour, so the rule stays, narrowed. */ .aqnf-notice a:not(.aqnf-btn) { color: inherit; font-weight: 600; } .aqnf-done-facts { margin: 10px 0 16px; padding-left: 20px; } .aqnf-done-facts li { margin: 0 0 6px; } .aqnf-done-lead { font-weight: 700; font-size: 17px; color: inherit; } .aqnf-steps-progress { margin: 0 0 20px; } .aqnf-steps-label { font-size: 14px; font-weight: 600; color: var(--c-body); margin: 0 0 8px; } .aqnf-steps-bar { height: 6px; border-radius: 3px; background: var(--c-chip); overflow: hidden; } .aqnf-steps-bar-fill { display: block; height: 100%; width: 0; background: var(--c-teal); transition: width .25s; } .aqnf-step-heading { margin-bottom: 16px; } .aqnf-steps-nav { display: flex; gap: 10px; margin: 20px 0 0; } .aqnf-steps-nav .aqnf-btn { flex: 1; } .aqnf-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; } .aqnf-form-actions .aqnf-btn { flex: 1 1 auto; } .aqnf-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; } .aqnf-strip-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-control); overflow: hidden; background: var(--c-chip); display: flex; align-items: center; justify-content: center; } .aqnf-strip-item img { width: 100%; height: 100%; object-fit: cover; } .aqnf-strip-item-error { background: var(--c-err-bg); } .aqnf-strip-msg { font-size: 12px; color: var(--c-err); padding: 6px; text-align: center; } .aqnf-strip-spinner { font-size: 22px; color: var(--c-muted); } .aqnf-strip-cover { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 8px; background: rgba(15,23,42,.75); color: #fff; font-size: 11px; font-weight: 600; } .aqnf-strip-remove { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(15,23,42,.7); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .aqnf-doc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); } .aqnf-doc-row-name { flex: 1 1 160px; font-size: 14px; word-break: break-word; } .aqnf-doc-row-type { font-size: 12px; color: var(--c-muted); } .aqnf-doc-row-remove { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--c-err); font: inherit; font-size: 14px; cursor: pointer; } .aqnf-doc-error { color: var(--c-err); font-size: 14px; } .aqnf-gate-note { font-size: 15px; } /* ======================================================================== * Hub * ===================================================================== */ .aqnf-hub-head { text-align: center; max-width: 720px; margin: 0 auto 28px; } .aqnf-hub-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .aqnf-hub-card { background: var(--c-surface); border: 1px solid var(--c-card-border); border-radius: var(--r-card); padding: 24px; box-shadow: 0 8px 24px rgba(14,31,51,.05); display: flex; flex-direction: column; align-items: flex-start; } .aqnf-hub-card-primary { border-color: var(--c-teal); } .aqnf-hub-card h2 { margin-bottom: 8px; } .aqnf-hub-card p { flex: 1 1 auto; } .aqnf-hub-count { font-size: 13px; color: var(--c-teal-ink); font-weight: 600; } .aqnf-hub-card .aqnf-btn { margin-top: 6px; } .aqnf-hub-secondary { margin-top: 10px; font-size: 14px; color: var(--c-teal-ink); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; } /* ======================================================================== * Directory * ===================================================================== */ /* Hero to CTA group: 20. CTA group to discovery panel: 32. */ .aqnf-dir-head { text-align: center; max-width: 760px; margin: 0 auto 32px; } .aqnf-dir-head h1 { margin-bottom: 12px; } .aqnf-dir-support { margin-bottom: 0; } .aqnf-dir-support { font-size: 15px; } .aqnf-dir-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; } /* Same horizontal padding the equipment header CTAs use, so a "List feed" * next to a "List an item" is the same object at the same size. */ .aqnf-dir-cta .aqnf-btn { padding-left: 22px; padding-right: 22px; } .aqnf-finder { background: var(--c-surface); border: 1px solid var(--c-panel-border); border-radius: var(--r-card); padding: 20px; margin: 0 0 24px; box-shadow: 0 8px 24px rgba(14,31,51,.05); } .aqnf-finder-title { font-size: 17px; font-weight: 700; color: var(--c-heading); margin: 0 0 14px; } .aqnf-finder-grid { display: grid; grid-template-columns: 1fr; gap: 0 12px; } .aqnf-finder-go { width: 100%; } .aqnf-dir-toolbar { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; margin: 24px 0 20px; align-items: center; } .aqnf-dir-search-wrap { position: relative; } .aqnf-dir-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; } .aqnf-dir-sort, .aqnf-dir-filter-toggle { min-height: 44px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px; cursor: pointer; } /* * The SORT SELECT is 16px at every width, not just on a phone. * * iOS Safari zooms the page when a focused select is under 16px and does not * zoom back, and an iPad runs iOS Safari at tablet and desktop viewport * widths. A media query keyed on width would have left the bug in place on * every iPad, so this is unconditional. The filter toggle stays at 14px: it * is a button, and buttons do not trigger focus zoom. */ .aqnf-dir-sort { font-size: 16px; } .aqnf-dir-filter-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } /* The count is a number beside the word, not a coloured dot: a bare dot says * something is on without saying how much. */ .aqnf-dir-filter-count { font-variant-numeric: tabular-nums; color: var(--c-teal-ink); font-weight: 700; } .aqnf-dir-count { font-size: 14px; color: var(--c-muted); margin: 0 0 12px; } .aqnf-dir-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } .aqnf-dir-filters { background: var(--c-surface); border: 1px solid var(--c-panel-border); border-radius: var(--r-card); padding: 18px; } .aqnf-dir-filters-head { display: none; justify-content: space-between; align-items: center; margin-bottom: 12px; } .aqnf-dir-filters-close { width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--c-muted); cursor: pointer; } .aqnf-filter-group { padding: 14px 0; border-top: 1px solid var(--c-chip); } .aqnf-filter-group:first-of-type { padding-top: 0; border-top: 0; } .aqnf-filter-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--c-text); margin-bottom: 8px; } /* Long facet lists scroll inside themselves rather than making the sidebar * a mile long; the scroll container is the group, never the page. */ .aqnf-filter-options { max-height: 240px; overflow-y: auto; } .aqnf-filter-chip { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14.5px; color: var(--c-body); cursor: pointer; } .aqnf-filter-chip input { width: 18px; height: 18px; accent-color: var(--c-teal); flex: 0 0 auto; } .aqnf-range-inputs { display: flex; align-items: center; gap: 8px; color: var(--c-muted); } .aqnf-range-inputs input { width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: 8px; font: inherit; font-size: 16px; background: var(--c-surface); color: var(--c-text); } .aqnf-dir-clear { width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: none; color: var(--c-body); font: inherit; font-size: 14px; cursor: pointer; } /* * The equipment scan grid, unchanged: two columns on a phone from ~360px, * three at tablet, four on a desktop. Explicit breakpoints, not auto-fill. * Feed cards are taller than equipment cards, not wider, so the same column * counts hold. */ .aqnf-dir-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (min-width: 768px) { .aqnf-dir-grid { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aqnf-dir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Below ~360px two columns stop being legible; one is the honest answer. */ @media (max-width: 359px) { .aqnf-dir-grid { grid-template-columns: minmax(0, 1fr); } } .aqnf-card { position: relative; background: var(--c-surface); border: 1px solid var(--c-card-border); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 8px 24px rgba(14,31,51,.05); transition: transform .15s, box-shadow .15s; } .aqnf-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,31,51,.09); } .aqnf-card-link { display: block; text-decoration: none; color: inherit; } .aqnf-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #eaf5f4 0%, #d6e9e7 100%); background-size: cover; background-position: center; } .aqnf-card-badge { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 700; background: var(--c-chip); color: var(--c-body); } .aqnf-card-badge-available_stock, .aqnf-card-badge-limited_stock { background: var(--c-good-bg); color: var(--c-good); } .aqnf-card-badge-contract_supply { background: #e0e7ff; color: #3730a3; } .aqnf-card-body { display: block; padding: 16px; } .aqnf-card-name { display: block; font-size: 16.5px; font-weight: 700; color: var(--c-heading); line-height: 1.25; } .aqnf-card-maker { display: block; font-size: 14px; color: var(--c-teal-ink); font-weight: 600; margin-top: 2px; } .aqnf-card-for { display: block; font-size: 13.5px; color: var(--c-muted); margin-top: 4px; } /* Says the certificate was checked. Says nothing about the feed. */ .aqnf-card-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 10px; background: var(--c-good-bg); color: var(--c-good); font-size: 11.5px; font-weight: 700; line-height: 1.4; } .aqnf-card-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .aqnf-spec { display: inline-block; padding: 3px 9px; border-radius: 8px; background: var(--c-chip); color: var(--c-text); font-size: 12.5px; font-weight: 600; } .aqnf-spec-claim { background: #ecfccb; color: #3f6212; } .aqnf-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .aqnf-card-place { font-size: 13.5px; color: var(--c-muted); } .aqnf-card-price { font-size: 14.5px; font-weight: 700; color: var(--c-heading); } .aqnf-card-cta { display: block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--c-teal-ink); } .aqnf-card-compare { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 12px; font-size: 13.5px; color: var(--c-muted); cursor: pointer; } .aqnf-card-compare input { width: 18px; height: 18px; accent-color: var(--c-teal); } .aqnf-dir-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; justify-content: center; } @media (max-width: 640px) { .aqnf-dir-empty-actions .aqnf-btn { flex: 1 1 100%; } } .aqnf-dir-empty { background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--r-card); padding: 28px 20px; text-align: center; } .aqnf-dir-loadmore { align-self: center; min-height: 48px; margin: 24px auto 0; padding: 0 24px; border: 0; border-radius: var(--r-control); background: var(--c-teal); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .aqnf-compare-tray { /* The home indicator sits over the bottom of the viewport on a modern * iPhone, so a bar pinned to bottom:0 puts its buttons underneath it. */ position: sticky; bottom: 0; z-index: 20; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 12px 16px; background: var(--c-surface); border: 1px solid var(--c-teal); border-radius: var(--r-card); box-shadow: 0 -6px 20px rgba(14,31,51,.12); } .aqnf-compare-count { margin: 0; font-size: 14px; font-weight: 600; color: var(--c-text); } .aqnf-compare-actions { display: flex; gap: 8px; } .aqnf-rfq-strip { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--c-border); } .aqnf-rfq-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } .aqnf-rfq-item a { display: block; padding: 14px 16px; text-decoration: none; background: var(--c-surface); border: 1px solid var(--c-card-border); border-radius: var(--r-control); } .aqnf-rfq-item-title { display: block; font-weight: 600; color: var(--c-heading); font-size: 15px; } .aqnf-rfq-item-meta { display: block; font-size: 13px; color: var(--c-muted); margin-top: 3px; } /* ======================================================================== * Single listing * ===================================================================== */ .aqnf-backbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; } .aqnf-backlink, .aqnf-terms-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; color: var(--c-teal-ink); text-decoration: none; font-weight: 600; } .aqnf-listing-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } .aqnf-listing-byline { font-size: 15px; color: var(--c-teal-ink); font-weight: 600; } .aqnf-listing-topfacts, .aqnf-deflist { margin: 16px 0 0; display: grid; grid-template-columns: 1fr; gap: 0; } .aqnf-listing-topfacts > div, .aqnf-deflist > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-top: 1px solid var(--c-chip); } .aqnf-listing-topfacts dt, .aqnf-deflist dt { font-size: 13px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; } .aqnf-listing-topfacts dd, .aqnf-deflist dd { margin: 0; font-size: 15px; color: var(--c-text); } .aqnf-summary-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; padding: 0; } .aqnf-chip { display: inline-block; padding: 6px 12px; border-radius: 10px; background: var(--c-chip); color: var(--c-text); font-size: 13.5px; font-weight: 600; } .aqnf-chip-claim { background: #ecfccb; color: #3f6212; } .aqnf-chip-commercial { background: var(--c-good-bg); color: var(--c-good); } .aqnf-chip-place { background: #e0e7ff; color: #3730a3; } .aqnf-gallery { margin: 0 0 24px; } .aqnf-gallery-main img { width: 100%; height: auto; border-radius: var(--r-card); display: block; } .aqnf-gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; } .aqnf-gallery-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; } .aqnf-gallery-thumb.is-active { border-color: var(--c-teal); } .aqnf-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .aqnf-block { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--c-border); } .aqnf-prose { color: var(--c-body); } .aqnf-prose p { margin: 0 0 12px; } .aqnf-taglabel { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: 18px 0 8px; } .aqnf-taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .aqnf-tag { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--c-chip); color: var(--c-body); font-size: 13px; } /* Wide content scrolls inside its own container, never the page. */ .aqnf-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; } .aqnf-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 320px; } .aqnf-table th, .aqnf-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-chip); vertical-align: top; } .aqnf-table th[scope=row] { font-weight: 600; color: var(--c-body); width: 46%; } .aqnf-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); } .aqnf-compare-table { min-width: 640px; } /* Column headers in the comparison are the product links, so they are real * tap targets and get the 44px floor like every other control. */ .aqnf-compare-table th a { display: inline-flex; align-items: center; min-height: 44px; } .aqnf-compare-table th[scope=row] { width: auto; } .aqnf-compare-highlight td, .aqnf-compare-highlight th { background: var(--c-good-bg); font-weight: 700; color: var(--c-good); } .aqnf-certs, .aqnf-docs, .aqnf-responses, .aqnf-supplier-support { list-style: none; margin: 0; padding: 0; } .aqnf-cert { padding: 12px 0; border-bottom: 1px solid var(--c-chip); } .aqnf-cert-name { display: block; font-weight: 700; color: var(--c-heading); } .aqnf-cert-state { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--c-chip); color: var(--c-body); } .aqnf-cert-verified .aqnf-cert-state { background: var(--c-good-bg); color: var(--c-good); } .aqnf-cert-meta { display: block; font-size: 13px; color: var(--c-muted); margin-top: 4px; } .aqnf-cert-doc { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--c-teal-ink); font-weight: 600; } .aqnf-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--c-chip); flex-wrap: wrap; } .aqnf-doc a { display: inline-flex; flex-direction: column; min-height: 44px; justify-content: center; text-decoration: none; } .aqnf-doc-type { font-weight: 600; color: var(--c-teal-ink); font-size: 15px; } .aqnf-doc-label { font-size: 13px; color: var(--c-muted); } .aqnf-doc-size { font-size: 12.5px; color: var(--c-muted); } .aqnf-cta-card, .aqnf-supplier-card, .aqnf-enquiry-card, .aqnf-score-card { background: var(--c-surface); border: 1px solid var(--c-panel-border); border-radius: var(--r-card); padding: 20px; margin: 0 0 16px; box-shadow: 0 8px 24px rgba(14,31,51,.05); } .aqnf-cta-price { font-size: 22px; font-weight: 800; color: var(--c-heading); margin: 0 0 2px; } .aqnf-cta-price-poa { font-size: 18px; } .aqnf-cta-availability { font-size: 13.5px; color: var(--c-muted); margin: 0 0 14px; } .aqnf-supplier-name { font-size: 16px; font-weight: 700; color: var(--c-heading); margin: 0 0 2px; } .aqnf-supplier-type { font-size: 13.5px; font-weight: 600; color: var(--c-teal-ink); margin: 0 0 6px; } .aqnf-supplier-place, .aqnf-supplier-since, .aqnf-supplier-markets { font-size: 13.5px; color: var(--c-muted); margin: 0 0 4px; } .aqnf-supplier-support li { font-size: 13.5px; color: var(--c-body); padding: 3px 0 3px 16px; position: relative; } .aqnf-supplier-support li::before { content: '·'; position: absolute; left: 4px; } .aqnf-supplier-profile { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--c-teal-ink); } .aqnf-supplier-verified { font-size: 13px; color: var(--c-good); background: var(--c-good-bg); border-radius: 8px; padding: 8px 10px; margin-top: 10px; } .aqnf-score-value { font-size: 26px; font-weight: 800; color: var(--c-heading); margin: 0; } .aqnf-score-bar { height: 8px; border-radius: 4px; background: var(--c-chip); overflow: hidden; margin: 8px 0 10px; } .aqnf-score-bar span { display: block; height: 100%; background: var(--c-teal); } .aqnf-score-hint { font-size: 13.5px; color: var(--c-body); } .aqnf-closed { background: var(--c-warn-bg); color: var(--c-warn); border-radius: var(--r-card); padding: 18px 20px; margin: 0 0 20px; } .aqnf-closed p { color: inherit; } .aqnf-closed-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ======================================================================== * RFQ * ===================================================================== */ .aqnf-rfq-head { margin: 0 0 20px; } .aqnf-rfq-byline { font-size: 15px; color: var(--c-teal-ink); font-weight: 600; } .aqnf-response { padding: 16px 0; border-bottom: 1px solid var(--c-chip); } .aqnf-response-supplier { font-weight: 700; color: var(--c-heading); margin: 0; } /* ======================================================================== * Calculator * ===================================================================== */ /* * The calculator is a different thing from the marketplace above it, and the * gap says so: 56px on a desktop, 40 on a phone where 56 reads as a hole in * the page rather than a boundary. * * TWO-CLASS SELECTORS, and the directory drops its own bottom padding, both * for the same reason. .aqnf-root restates padding inside the 640 and 960 * media blocks further down this file, so a one-class rule here loses on * source order and the gap silently becomes 64. And with both sections * padded the space between them is the SUM of the two, not either one. * * The directory only gives up its bottom padding when a calculator actually * follows it, which PHP knows and marks, so a page rendered with the * calculator switched off still ends properly. */ /* * A theme sitting between our two sections would otherwise decide this gap. * Block themes give flow children a margin-block-start, so the real distance * became the theme's block gap PLUS our padding, and differed from theme to * theme. Zeroed between two of our own sections so the number below is the * number rendered, wherever this plugin is installed. */ .aqnf-root + .aqnf-root { margin-block-start: 0; margin-top: 0; } .aqnf-root.aqnf-dir-has-calc { padding-bottom: 0; } .aqnf-root.aqnf-calc { padding-top: 56px; } @media (max-width: 640px) { .aqnf-root.aqnf-calc { padding-top: 40px; } } /* Calculator heading to tabs: 16. */ .aqnf-calc-head { max-width: 720px; margin: 0 0 16px; } /* Calculator heading to tabs: 16. Tabs to panel: 20. */ .aqnf-calc-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 20px; padding-bottom: 4px; } .aqnf-calc-tab { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); color: var(--c-body); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .aqnf-calc-tab.is-active { background: var(--c-teal); border-color: var(--c-teal); color: #fff; } .aqnf-calc-panel { background: var(--c-surface); border: 1px solid var(--c-panel-border); border-radius: var(--r-card); padding: 20px; box-shadow: 0 8px 24px rgba(14,31,51,.05); } .aqnf-calc-lead { font-size: 17px; font-weight: 700; color: var(--c-heading); margin: 0 0 16px; } .aqnf-calc-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; } .aqnf-calc-scenario { border: 1px solid var(--c-panel-border); border-radius: var(--r-control); padding: 14px; margin: 0 0 14px; } .aqnf-calc-scenario legend { font-size: 14px; font-weight: 700; color: var(--c-heading); padding: 0 6px; } .aqnf-calc-grid-3 { display: grid; grid-template-columns: 1fr; gap: 0 16px; } .aqnf-calc-optional { font-weight: 400; color: var(--c-muted); font-size: 13px; } /* The calculate button. Full width on a phone, sized to its label above it, * and separated from the inputs so it reads as the end of the form. */ /* Inputs to the primary action: 24. */ .aqnf-calc-run { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--c-chip); } .aqnf-calc-run .aqnf-btn { width: 100%; } /* * The result is a card, not more form rows. Tinted ground, its own border, * and a heading, so nobody has to work out where the inputs stop and the * answer starts. */ .aqnf-calc-out { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-border); } .aqnf-calc-result { /* Action to results: 24. */ margin-top: 24px; padding: 20px; border: 1px solid var(--c-panel-border); border-top: 2px solid var(--c-teal); border-radius: var(--r-card); background: var(--c-bg); } .aqnf-calc-result-title { margin: 0 0 14px; font-size: 17px; color: var(--c-heading); } /* Inputs changed since this was computed. Kept on screen, plainly labelled. */ .aqnf-calc-result.is-stale { opacity: .5; } .aqnf-calc-result.is-stale::before { content: 'Inputs have changed. Calculate again to update this result.'; display: block; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--c-warn); } .aqnf-calc-headline { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; } .aqnf-calc-headline-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); } .aqnf-calc-headline-value { font-size: clamp(28px, 7vw, 38px); font-weight: 800; color: var(--c-teal-ink); line-height: 1.1; } .aqnf-calc-rows { margin: 0; display: grid; grid-template-columns: 1fr; } .aqnf-calc-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-chip); } .aqnf-calc-rows dt { font-size: 14px; color: var(--c-body); } .aqnf-calc-rows dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--c-text); text-align: right; } .aqnf-calc-row-strong dt, .aqnf-calc-row-strong dd { font-weight: 700; color: var(--c-heading); } .aqnf-calc-note { font-size: 13px; color: var(--c-muted); margin: 12px 0 0; } .aqnf-calc-error { color: var(--c-err); font-size: 14.5px; margin: 14px 0 0; } .aqnf-calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; } .aqnf-calc-verdict { font-size: 15px; color: var(--c-body); margin: 14px 0 0; } .aqnf-calc-verdict.is-surprise { background: var(--c-warn-bg); color: var(--c-warn); border-radius: var(--r-control); padding: 12px 14px; font-weight: 600; } .aqnf-calc-best th, .aqnf-calc-best td { background: var(--c-good-bg); font-weight: 700; color: var(--c-good); } /* * Comparison matrix — metrics down, feeds across. * * The label column is sticky so the table can scroll sideways at 390px and * still tell you which number you are looking at. Figures are tabular so the * digits line up column to column, which is the only way two prices can be * compared at a glance. */ .aqnf-compare-matrix { width: 100%; border-collapse: collapse; font-size: 14px; } .aqnf-compare-matrix th, .aqnf-compare-matrix td { padding: 10px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--c-chip); font-variant-numeric: tabular-nums; } .aqnf-compare-matrix tbody th, .aqnf-compare-matrix .aqnf-matrix-corner { position: sticky; left: 0; z-index: 1; text-align: left; white-space: normal; min-width: 148px; background: var(--c-bg); color: var(--c-body); font-weight: 600; } .aqnf-compare-matrix thead th { background: var(--c-bg); color: var(--c-heading); font-weight: 700; border-bottom: 2px solid var(--c-border); } .aqnf-compare-matrix td { color: var(--c-text); } /* The cheapest-per-kg-of-gain column, marked end to end. */ .aqnf-compare-matrix .aqnf-matrix-best { background: var(--c-good-bg); color: var(--c-good); } .aqnf-compare-matrix .aqnf-matrix-headline th, .aqnf-compare-matrix .aqnf-matrix-headline td { font-weight: 800; font-size: 15px; color: var(--c-heading); border-top: 2px solid var(--c-border); border-bottom: 0; } .aqnf-compare-matrix .aqnf-matrix-headline .aqnf-matrix-best { color: var(--c-good); } /* ======================================================================== * FX provenance (1.6.5) * * Deliberately quiet. The exchange rate is context for the comparison, not * the point of it, so this reads as a footnote and never competes with the * cost-per-kg row above it. * ===================================================================== */ .aqnf-fx { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); } .aqnf-fx-stamp { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--c-text); } .aqnf-fx-sources { margin: 0 0 6px; font-size: 13px; color: var(--c-body); } .aqnf-fx-sources:empty { display: none; } .aqnf-fx-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); } .aqnf-fx-refresh { min-height: 44px; } .aqnf-fx-message { margin: 10px 0 0; font-size: 13px; color: var(--c-body); } .aqnf-fx-message:empty { display: none; } @media (max-width: 640px) { .aqnf-fx-refresh { width: 100%; } } /* * The winner and the unconvertible carry a WORD each, not only a colour. * A tint alone fails anyone reading in greyscale or with a screen reader, * and this table's whole job is to say which one costs least. */ .aqnf-matrix-tag { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4; white-space: normal; } .aqnf-compare-matrix .aqnf-matrix-unconverted { background: var(--c-warn-bg); color: var(--c-warn); } .aqnf-compare-matrix thead th.aqnf-matrix-unconverted { color: var(--c-warn); } /* Validation beside the field it belongs to, never in a banner above. */ .aqnf-field-error { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--c-err); } .aqnf-field.has-error > input, .aqnf-field.has-error > select, .aqnf-field.has-error > textarea { border-color: var(--c-err); } /* ======================================================================== * BUYER REQUESTS (1.6.4) * * These classes render in TWO places: the public Requests view, inside * .aqnf-root, and My Requests in the account, inside .aqnm-root. The account * shell declares a different token set, so the colours here are literal * rather than var() references. Everything else in this file may keep using * the tokens; only the shared-surface classes below may not. * * A request card is deliberately NOT a product card: no photo, no price, no * Buy. What it leads with is what it is. * ===================================================================== */ .aqnf-req-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 768px) { .aqnf-req-grid { gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aqnf-req-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .aqnf-req-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid #e6eef0; border-left: 4px solid #92400e; border-radius: 16px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(14,31,51,.05); } /* The kind label leads, on the card and on the request's own page. */ .aqnf-req-kind { display: inline-block; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 3px 9px; } .aqnf-req-kind-lg { font-size: 12px; padding: 4px 11px; margin-bottom: 10px; } .aqnf-req-subject { font-size: 18px; line-height: 1.25; margin: 0 0 10px; color: #0b1320; } .aqnf-req-subject a { color: inherit; text-decoration: none; } .aqnf-req-subject a:hover { color: #15807d; } .aqnf-req-subject a:focus-visible { outline: 3px solid rgba(21,128,125,.45); outline-offset: 2px; border-radius: 4px; } .aqnf-req-facts { list-style: none; margin: 0 0 12px; padding: 0; } .aqnf-req-facts li { font-size: 14.5px; color: #475569; line-height: 1.5; } .aqnf-req-qty { font-weight: 700; color: #0f172a; font-size: 16px !important; font-variant-numeric: tabular-nums; } .aqnf-req-status { margin: 0 0 14px; } /* Status pills. Never clipped: they wrap rather than truncate, and they keep * their own line height so a two-word status is not cut off at 390px. */ .aqnf-req-pill { display: inline-block; max-width: 100%; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; background: #f1f5f9; color: #475569; } .aqnf-req-pill-open { background: #dcfce7; color: #166534; } .aqnf-req-pill-quotes_received { background: #e0f2f1; color: #0f5132; } .aqnf-req-pill-under_review { background: #fef3c7; color: #92400e; } .aqnf-req-pill-draft { background: #f1f5f9; color: #475569; } .aqnf-req-pill-closed { background: #e2e8f0; color: #475569; } .aqnf-req-pill-withdrawn { background: #fee2e2; color: #991b1b; } .aqnf-req-go { margin-top: auto; } @media (max-width: 640px) { .aqnf-req-go { width: 100%; } } /* The submitted screen. A heading, a paragraph, then the three routes on. */ /* * SUCCESS CARD RHYTHM. * * One scale, top to bottom: heading 12 copy 20 actions, then 12 between the * two buttons and 18 before the tertiary link. The last of those is the point * of this pass: the text action sat flush against the Browse feed button. * * Two-class selectors throughout, because .aqnf-root p is (0,1,1) and a bare * .aqnf-done-more is (0,1,0): the 14px this rule used to ask for never * applied at all, and the measured gap was 0. */ .aqnf-root .aqnf-done-lead { margin: 0 0 12px; } .aqnf-root .aqnf-done-copy { max-width: 62ch; margin: 0; } .aqnf-root .aqnf-done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; } .aqnf-root .aqnf-done-more { margin: 18px 0 0; font-size: 14.5px; } /* Tertiary: lighter than either button, and still a 44px target. */ .aqnf-root .aqnf-done-more a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; } @media (max-width: 640px) { /* Stacked full width, so the hierarchy reads down the page rather than * across it, and the two buttons keep the same 12px the desktop row uses. */ .aqnf-root .aqnf-done-actions { gap: 12px; } .aqnf-root .aqnf-done-actions .aqnf-btn { flex: 1 1 100%; } } .aqnf-rfq-owner-nav { font-size: 14.5px; margin: 0 0 14px; } /* My Requests rows, rendered inside the account shell. */ .aqnm-req-item .aqnf-req-kind { margin-bottom: 6px; } .aqnm-req-quotes { margin: 6px 0 0; font-size: 14px; font-weight: 600; } .aqnm-req-quotes a { color: #15807d; } /* Every control on this screen is a 44px target, including on desktop. */ .aqnm-my-requests .aqnm-my-actions .aqnm-btn { min-height: 44px; } .aqnm-my-requests .aqnm-my-item { align-items: flex-start; } .aqnm-req-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 8px 10px; } /* Preview bar (1.6.1). Owned by the preview route, which renders it above * the listing so nobody mistakes an unpublished page for a live one. */ .aqnf-preview-bar { padding: 14px 0; background: var(--c-warn-bg); color: var(--c-warn); } .aqnf-preview-bar p { margin: 0; color: inherit; font-size: 15px; } .aqnf-preview-bar a { color: inherit; font-weight: 700; } /* * Drawer scroll lock. * * overflow:hidden on body is enough on Android and on a desktop, and is NOT * enough on iOS Safari: the page keeps scrolling and rubber-banding behind * the drawer. iOS needs the body taken out of flow, which loses the scroll * position, so the JS stores it and puts it back. Both halves are required; * neither works alone. */ body.aqnf-noscroll { overflow: hidden; position: fixed; width: 100%; } /* ======================================================================== * Tablet — 640px * ===================================================================== */ @media (min-width: 640px) { .aqnf-root { padding: 56px 0; } .aqnf-row { grid-template-columns: 1fr 1fr; } .aqnf-row-3 { grid-template-columns: repeat(3, 1fr); } .aqnf-row-4 { grid-template-columns: repeat(2, 1fr); } .aqnf-checkgrid { grid-template-columns: 1fr 1fr; } .aqnf-checkgrid-dense { grid-template-columns: repeat(3, 1fr); } .aqnf-analysis-grid { grid-template-columns: 1fr 1fr; } .aqnf-calc-grid { grid-template-columns: 1fr 1fr; } .aqnf-calc-grid-3 { grid-template-columns: repeat(2, 1fr); } .aqnf-calc-grid-4 { grid-template-columns: repeat(2, 1fr); } .aqnf-finder-grid { grid-template-columns: 1fr 1fr; } .aqnf-finder-go { width: auto; min-width: 200px; } .aqnf-calc-run .aqnf-btn { width: auto; min-width: 240px; } .aqnf-hub-grid { grid-template-columns: 1fr 1fr; } .aqnf-listing-topfacts, .aqnf-deflist { grid-template-columns: 1fr 1fr; gap: 0 24px; } .aqnf-listing-topfacts > div, .aqnf-deflist > div { grid-template-columns: 140px 1fr; align-items: baseline; gap: 12px; } .aqnf-form-actions .aqnf-btn { flex: 0 0 auto; } .aqnf-photo-strip { grid-template-columns: repeat(4, 1fr); } } /* ======================================================================== * Desktop — 960px * ===================================================================== */ @media (min-width: 960px) { .aqnf-root { padding: 64px 0; } .aqnf-dir-layout { grid-template-columns: 260px 1fr; gap: 32px; } .aqnf-dir-filters { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; } .aqnf-dir-filter-toggle { display: none; } .aqnf-listing-layout { grid-template-columns: minmax(0, 1fr) 340px; } .aqnf-hub-grid { grid-template-columns: repeat(3, 1fr); } .aqnf-row-4 { grid-template-columns: repeat(4, 1fr); } .aqnf-calc-grid-3 { grid-template-columns: repeat(3, 1fr); } .aqnf-calc-grid-4 { grid-template-columns: repeat(4, 1fr); } .aqnf-finder-grid { grid-template-columns: repeat(4, 1fr); } .aqnf-checkgrid { grid-template-columns: repeat(3, 1fr); } .aqnf-checkgrid-dense { grid-template-columns: repeat(4, 1fr); } .aqnf-rfq-list { grid-template-columns: repeat(2, 1fr); } .aqnf-calc-rows { grid-template-columns: 1fr 1fr; gap: 0 32px; } } /* ======================================================================== * Phone — matches the equipment breakpoints exactly * ===================================================================== */ @media (max-width: 960px) { .aqnf-dir-toolbar { grid-template-columns: 1fr auto; } } @media (max-width: 640px) { .aqnf-dir-toolbar { grid-template-columns: 1fr; } /* 40px is under the 44px minimum, and a filter row is one of the most * tapped things on this page. */ .aqnf-filter-chip { min-height: 44px; } .aqnf-dir-cta .aqnf-btn { flex: 1 1 100%; } /* At 390 the label column was eating half the visible table. Tighter * labels and cells leave room for a whole feed column beside them. */ .aqnf-compare-matrix { font-size: 13px; } .aqnf-compare-matrix th, .aqnf-compare-matrix td { padding: 9px 10px; } .aqnf-compare-matrix tbody th, .aqnf-compare-matrix .aqnf-matrix-corner { min-width: 112px; } .aqnf-calc-result { padding: 16px 14px; } } /* ======================================================================== * Desktop gutter. Declared AFTER the 960 block on purpose: both match at * 1280 and equal specificity means source order decides, so a 32px desktop * gutter written above the 24px laptop one would never apply. * ===================================================================== */ @media (min-width: 1280px) { } /* ======================================================================== * Mobile filter drawer — below 960px the sidebar is a full-screen panel * ===================================================================== */ @media (max-width: 959px) { .aqnf-dir-filters { display: none; position: fixed; inset: 0; z-index: 1000; border-radius: 0; max-height: none; overflow-y: auto; padding: 20px; } .aqnf-dir-filters.is-open { display: block; } .aqnf-dir-filters-head { display: flex; } .aqnf-filter-options { max-height: none; } /* * Except the country facet. The drawer scrolls, so an uncapped list is * navigable in principle, but 186 countries between Delivery to and the * next facet means nobody ever reaches the next facet. It scrolls inside * itself instead, like it does on a desktop. */ .aqnf-filter-group[data-filter="country"] .aqnf-filter-options { max-height: 260px; overflow-y: auto; } } @media (prefers-reduced-motion: reduce) { .aqnf-root *, .aqnf-root *::before, .aqnf-root *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ======================================================================== * Wizard state (1.7.2) * ===================================================================== */ /* * NOT SUBMITTED. Deliberately not the green success panel: pressing Submit * for review and getting a green tick that says "Draft saved" is exactly how * the two actions became indistinguishable. */ .aqnf-root .aqnf-incomplete { padding: 16px 18px; } .aqnf-root .aqnf-incomplete-lead { display: block; font-size: 17px; font-weight: 700; } .aqnf-root .aqnf-incomplete-copy { margin: 8px 0 0; font-size: 15px; } .aqnf-root .aqnf-incomplete-need { margin: 12px 0 0; padding: 10px 12px; font-size: 15px; font-weight: 600; background: var(--c-surface); border-radius: var(--r-control); } .aqnf-root .aqnf-incomplete-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; } .aqnf-root .aqnf-incomplete-state { margin: 12px 0 0; font-size: 14.5px; } /* * STEP CHIPS. Seven of them do not fit 390px in a row, so they scroll * horizontally inside their own strip rather than wrapping into a block that * pushes the form off the first screen. The strip scrolls, the page does not. */ .aqnf-step-jump { display: flex; gap: 8px; margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; } .aqnf-step-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-body); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; } .aqnf-step-chip .aqnf-chip-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-chip); font-size: 12.5px; font-weight: 700; } .aqnf-step-chip .aqnf-chip-tick { display: none; font-weight: 700; } .aqnf-step-chip.is-done { border-color: var(--c-teal); color: var(--c-teal-ink); } .aqnf-step-chip.is-done .aqnf-chip-n { background: var(--c-teal); color: #fff; } .aqnf-step-chip.is-done .aqnf-chip-tick { display: inline; } .aqnf-step-chip.is-current { border-color: var(--c-teal); background: #f0f9f8; color: var(--c-teal-ink); } .aqnf-step-chip.is-current .aqnf-chip-n { background: var(--c-teal); color: #fff; } .aqnf-step-chip[aria-disabled="true"] { opacity: .45; cursor: default; } .aqnf-step-chip:not([aria-disabled="true"]):hover { border-color: var(--c-teal); } @media (max-width: 640px) { /* The titles alone are wider than the viewport, so the strip carries * numbers on a phone and the step label above still names the step. */ .aqnf-step-chip .aqnf-chip-t { display: none; } .aqnf-step-chip { padding: 0 12px; } } /* A group that failed "choose at least one" reads as a group, not a field. */ .aqnf-fieldset.is-invalid { border-color: var(--c-err); } /* Review summary (1.7.2): the last thing before Submit. */ .aqnf-review { margin: 24px 0 0; } .aqnf-review-title { font-size: 17px; font-weight: 700; color: var(--c-heading); margin: 0 0 12px; } .aqnf-review-body { display: grid; grid-template-columns: 1fr; gap: 12px; } .aqnf-review-group { border: 1px solid var(--c-panel-border); border-radius: var(--r-card); background: var(--c-surface); padding: 14px 16px; } .aqnf-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .aqnf-review-group-title { font-size: 15px; font-weight: 700; color: var(--c-heading); margin: 0; } .aqnf-review-edit { min-height: 44px; padding: 0 14px; border: 1px solid var(--c-teal); border-radius: var(--r-control); background: transparent; color: var(--c-teal-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .aqnf-review-edit:hover { background: #f0f9f8; } .aqnf-review-rows { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 4px 16px; margin: 10px 0 0; } .aqnf-review-rows dt { font-size: 14px; color: var(--c-muted); } .aqnf-review-rows dd { font-size: 14.5px; font-weight: 600; color: var(--c-body); margin: 0; overflow-wrap: anywhere; } .aqnf-review-empty { margin: 8px 0 0; font-size: 14px; color: var(--c-muted); } @media (min-width: 900px) { .aqnf-review-body { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { /* Two columns of a definition list at 390 leaves 5rem for the value. */ .aqnf-review-rows { grid-template-columns: 1fr; gap: 2px; } .aqnf-review-rows dd { margin-bottom: 6px; } } /* ======================================================================== * Upload controls (1.7.3) * * These were unstyled native inputs: measured 22px and 43px tall at 390, * both under the 44px minimum, and the file name ran the full width of the * control with nothing bounding it. * * NO capture ATTRIBUTE anywhere, deliberately. Adding one forces the camera * and takes away Photo Library and Choose File; without it iOS offers all * three, which is what somebody photographing a feed bag on a pier and * somebody attaching a spec sheet at a desk each need. * ===================================================================== */ .aqnf-root .aqnf-photo-input, .aqnf-root .aqnf-doc-input { display: block; width: 100%; max-width: 100%; min-height: 48px; padding: 10px 12px; border: 1px dashed var(--c-border); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-body); /* 16px, so focusing the control never zooms the page on iOS. */ font: inherit; font-size: 16px; line-height: 1.4; cursor: pointer; } .aqnf-root .aqnf-photo-input:hover, .aqnf-root .aqnf-doc-input:hover { border-color: var(--c-teal); } /* The part people actually tap. Vendor-prefixed twice: WebKit shipped * ::-webkit-file-upload-button long before the standard name, and iOS Safari * still answers to it. */ .aqnf-photo-input::-webkit-file-upload-button, .aqnf-doc-input::-webkit-file-upload-button { min-height: 40px; padding: 0 14px; margin-right: 12px; border: 1px solid var(--c-teal); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-teal-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .aqnf-photo-input::file-selector-button, .aqnf-doc-input::file-selector-button { min-height: 40px; padding: 0 14px; margin-right: 12px; border: 1px solid var(--c-teal); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-teal-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } /* A long file name is the browser's own text; keep it inside the control. */ .aqnf-doc-name, .aqnf-strip-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ======================================================================== * Listing CTA card: two actions that are not the same action (1.7.4) * * The buttons keep the standard primary/secondary treatment; what changes is * that each owns a sentence describing what IT does. The helper text is * deliberately quiet: it explains, it does not compete with the control it * sits under. * ===================================================================== */ .aqnf-cta-action { margin: 0 0 16px; } .aqnf-cta-action:last-of-type { margin-bottom: 0; } .aqnf-cta-action .aqnf-btn { margin-bottom: 0; } .aqnf-root .aqnf-cta-help { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--c-muted); } /* ======================================================================== * "You are requesting a quote for" panel * ===================================================================== */ .aqnf-quote-for { border: 1px solid var(--c-panel-border); border-left: 3px solid var(--c-teal); border-radius: var(--r-card); background: var(--c-surface); padding: 16px 18px; margin: 0 0 20px; } .aqnf-root .aqnf-quote-for-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); } .aqnf-quote-for-rows { display: grid; gap: 10px; margin: 0; } .aqnf-quote-for-rows > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; } .aqnf-quote-for-rows dt { font-size: 14px; color: var(--c-muted); } .aqnf-quote-for-rows dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--c-heading); overflow-wrap: anywhere; } .aqnf-quote-for-rows dd a { color: var(--c-teal-ink); } .aqnf-root .aqnf-quote-for-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--c-border); font-size: 13.5px; color: var(--c-body); } @media (max-width: 480px) { /* Two columns leave about 5rem for a supplier name at 390. */ .aqnf-quote-for-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .aqnf-quote-for-rows { gap: 12px; } } /* ======================================================================== * Searchable country selector (1.7.6) * * 186 countries is too many to scroll on a phone. The control stays a real *