/* public/css/products.css (PRD-03) * * The product-discovery design system. Loaded by views/layouts/main.ejs only * for `type` values 'product' and 'product-category', the same way blog.css is * loaded only for the blog surfaces — so no other page pays for it. * * Everything is scoped under `.products-page`, set on the of the product * templates, so none of this can leak into admin, landing or blog pages. * * Why hand-authored CSS and not Tailwind: * public/css/output.css is a committed build with no rebuild step in * `npm start`, so a newly invented utility class would simply not exist at * runtime. This file is linked AFTER output.css, so it also wins cascade ties * without needing !important. * * --------------------------------------------------------------------------- * Design direction — "the specification sheet" * * Pooyesh sells systems that replace ad-hoc paperwork with structured records, * and half the catalogue is physical hardware bought on its specs. So the page * is built like a well-set spec sheet: a strict baseline, hairline rules doing * the separating instead of boxes and shadows, and a monospace-ish treatment on * the metadata that a buyer scans for. Cards earn a border, not a drop shadow. * * The one deliberate exception is the solution pairings, which sit on a tinted * surface — they are the editorial part of the page, arguing that a device and * its software are one purchase, and they should not read as more catalogue. * ========================================================================== */ .products-page { --pp-ink: #18181B; --pp-ink-2: #3F3F46; --pp-muted: #71717A; --pp-faint: #A1A1AA; --pp-rule: #E4E4E7; --pp-rule-soft: #F4F4F5; --pp-surface: #FAFAFA; --pp-accent: #0C66E4; --pp-accent-soft: #EBF3FE; --pp-accent-strong: #0A57C2; --pp-radius: 14px; } /* ------------------------------------------------------------------ hero -- */ .pp-hero { padding: 88px 0 44px; border-bottom: 1px solid var(--pp-rule); } .pp-hero__inner { max-width: 52rem; margin: 0 auto; text-align: center; } .pp-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--pp-accent-strong); background: var(--pp-accent-soft); border-radius: 999px; padding: 5px 14px; margin-bottom: 18px; } .products-page .pp-hero__title { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.55; color: var(--pp-ink); margin: 0 0 16px; } .pp-hero__lede { font-size: clamp(0.88rem, 1.6vw, 1rem); line-height: 2.1; color: var(--pp-muted); margin: 0 auto 26px; max-width: 42rem; } .pp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* --------------------------------------------------------------- buttons -- */ .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .pp-btn--primary { background: var(--pp-accent); color: #fff; } .pp-btn--primary:hover { background: var(--pp-accent-strong); color: #fff; } .pp-btn--ghost { background: #fff; color: var(--pp-ink-2); border-color: var(--pp-rule); } .pp-btn--ghost:hover { background: var(--pp-surface); color: var(--pp-ink); } .pp-btn--sm { height: 38px; padding: 0 16px; font-size: 12.5px; } /* Every interactive element keeps a visible focus ring. The Tailwind reset strips the UA outline, so without this the page is unusable by keyboard. */ .products-page a:focus-visible, .products-page button:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; border-radius: 6px; } /* ------------------------------------------------------------- section -- */ .pp-section { padding: 52px 0; } .pp-section + .pp-section { border-top: 1px solid var(--pp-rule-soft); } .pp-section--tint { background: var(--pp-surface); } .pp-section__head { max-width: 46rem; margin: 0 0 28px; } .pp-section__head--center { margin-inline: auto; text-align: center; } .products-page .pp-section__title { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--pp-ink); line-height: 1.6; margin: 0 0 8px; } .pp-section__lede { font-size: 0.88rem; line-height: 2; color: var(--pp-muted); margin: 0; } /* ------------------------------------------------------ solution pairings -- */ /* The editorial block: a problem, and the software + hardware that answer it together. This is the only place on the site that says the attendance device and the attendance software are one purchase. */ .pp-pairings { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .pp-pairing { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pp-rule); border-radius: var(--pp-radius); padding: 22px; } .pp-pairing__problem { font-size: 0.98rem; font-weight: 800; color: var(--pp-ink); line-height: 1.7; margin: 0 0 8px; } .pp-pairing__text { font-size: 0.82rem; line-height: 1.95; color: var(--pp-muted); margin: 0 0 16px; } .pp-pairing__links { display: grid; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--pp-rule); } .pp-pairing__link { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 600; color: var(--pp-ink-2); text-decoration: none; padding: 7px 9px; border-radius: 8px; transition: background-color .15s ease, color .15s ease; } .pp-pairing__link:hover { background: var(--pp-accent-soft); color: var(--pp-accent-strong); } .pp-pairing__kind { font-size: 10.5px; font-weight: 700; color: var(--pp-faint); border: 1px solid var(--pp-rule); border-radius: 5px; padding: 1px 6px; flex: none; } /* ------------------------------------------------------------------ grid -- */ .pp-group + .pp-group { margin-top: 40px; } .pp-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--pp-rule); } .products-page .pp-group__title { font-size: 1.05rem; font-weight: 800; color: var(--pp-ink); margin: 0; } .pp-group__count { font-size: 12px; color: var(--pp-faint); font-weight: 500; margin-inline-start: 8px; } .pp-group__all { font-size: 12.5px; font-weight: 600; color: var(--pp-accent); text-decoration: none; flex: none; } .pp-group__all:hover { text-decoration: underline; } .pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; } /* ------------------------------------------------------------------ card -- */ /* Not "image + title + button". Each card carries: what it is, the one-line proposition, up to three published capabilities, who it is for, and an action labelled by where it goes. * * The whole card is deliberately NOT a link — the title and the CTA are, so the * description stays selectable and screen readers get two meaningful targets * rather than one enormous one. */ .pp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pp-rule); border-radius: var(--pp-radius); overflow: hidden; transition: border-color .15s ease, transform .15s ease; } .pp-card:hover { border-color: #C7D8F5; transform: translateY(-2px); } /* Fixed-ratio plate so different screenshot aspect ratios stop making the grid ragged — I3 in the analysis. */ .pp-card__media { display: block; aspect-ratio: 16 / 10; background: var(--pp-surface); border-bottom: 1px solid var(--pp-rule-soft); padding: 16px; } .pp-card__media img { width: 100%; height: 100%; object-fit: contain; } .pp-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .pp-card__kind { display: inline-flex; align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--pp-muted); background: var(--pp-rule-soft); border-radius: 5px; padding: 3px 8px; margin-bottom: 10px; } .products-page .pp-card__title { font-size: 1.02rem; font-weight: 800; line-height: 1.6; margin: 0 0 7px; } .pp-card__title a { color: var(--pp-ink); text-decoration: none; } .pp-card__title a:hover { color: var(--pp-accent); } .pp-card__tagline { font-size: 0.84rem; line-height: 1.95; color: var(--pp-muted); margin: 0 0 14px; } .pp-card__points { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; } .pp-card__points li { position: relative; font-size: 0.79rem; line-height: 1.8; color: var(--pp-ink-2); padding-inline-start: 17px; } /* Check glyph drawn in CSS — an inline SVG per bullet would be ~40 extra nodes on this page for a decoration. */ .pp-card__points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 8px; height: 4px; border-inline-start: 1.5px solid var(--pp-accent); border-bottom: 1.5px solid var(--pp-accent); transform: rotate(-45deg); } .pp-card__audience { font-size: 0.76rem; line-height: 1.8; color: var(--pp-faint); padding-top: 12px; margin: auto 0 14px; border-top: 1px dashed var(--pp-rule); } .pp-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pp-card__price { font-size: 0.84rem; font-weight: 700; color: var(--pp-ink); } .pp-card__price small { font-weight: 500; color: var(--pp-faint); font-size: 11px; } /* ------------------------------------------------------------ categories -- */ /* PRD-02 built brand and series pages. Before this section they were reachable only from a division page, so /products orphaned them (S1). */ .pp-chips { display: flex; flex-wrap: wrap; gap: 8px; } .pp-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--pp-ink-2); background: #fff; border: 1px solid var(--pp-rule); border-radius: 999px; padding: 7px 15px; text-decoration: none; transition: border-color .15s ease, color .15s ease; } .pp-chip:hover { border-color: var(--pp-accent); color: var(--pp-accent); } .pp-chip__n { font-size: 11px; color: var(--pp-faint); } /* ------------------------------------------------------------------- cta -- */ .pp-cta { background: var(--pp-accent-soft); border: 1px solid #D6E5FB; border-radius: 18px; padding: 36px 28px; text-align: center; } .products-page .pp-cta__title { font-size: clamp(1.1rem, 2.2vw, 1.45rem); font-weight: 800; color: var(--pp-accent-strong); margin: 0 0 10px; line-height: 1.6; } .pp-cta__text { font-size: 0.87rem; line-height: 2; color: var(--pp-ink-2); max-width: 34rem; margin: 0 auto 22px; } .pp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ------------------------------------------------------------- responsive -- */ @media (max-width: 767px) { .pp-hero { padding: 76px 0 34px; } .pp-section { padding: 38px 0; } .pp-grid { grid-template-columns: 1fr; gap: 16px; } .pp-pairings { grid-template-columns: 1fr; } .pp-group__head { flex-direction: column; align-items: flex-start; gap: 6px; } .pp-cta { padding: 28px 20px; border-radius: 14px; } /* Full-width tap targets on the smallest screens — a 44px pill in a wrapped row is easy to miss with a thumb. */ .pp-hero__actions .pp-btn, .pp-cta__actions .pp-btn { width: 100%; } } @media (min-width: 480px) and (max-width: 767px) { .pp-hero__actions .pp-btn, .pp-cta__actions .pp-btn { width: auto; } } @media (prefers-reduced-motion: reduce) { .products-page * { transition: none !important; } .pp-card:hover { transform: none; } } /* ============================================================================ Taxonomy pages — /products/ (PRD-04) These render through views/product/category.ejs and share _card.ejs with /products. After the /products rebuild they were the odd one out: new cards inside an old shell, so the page carried two design languages at once — a grey breadcrumb slab, a thin bare header, a sticky pill row duplicating the breadcrumb, and section headings in a different scale from the index. Same vocabulary as the index below: hairline rules, bordered cards, one spacing rhythm. ========================================================================== */ /* ------------------------------------------------------------ breadcrumbs -- */ .pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 74px 0 0; font-size: 12.5px; color: var(--pp-faint); } .pp-crumbs a { color: var(--pp-muted); text-decoration: none; } .pp-crumbs a:hover { color: var(--pp-accent); } .pp-crumbs__sep { color: var(--pp-rule); } .pp-crumbs__current { color: var(--pp-ink-2); font-weight: 600; } /* ------------------------------------------------------------ node header -- */ .pp-node { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 26px 0 34px; border-bottom: 1px solid var(--pp-rule); } .pp-node--media { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .pp-node__figure { border: 1px solid var(--pp-rule); border-radius: var(--pp-radius); background: var(--pp-surface); padding: 18px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } .pp-node__figure img { max-width: 100%; max-height: 100%; object-fit: contain; } .pp-node__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .pp-tag { font-size: 11px; font-weight: 700; color: var(--pp-muted); background: var(--pp-rule-soft); border-radius: 5px; padding: 3px 9px; } .pp-tag--brand { color: var(--pp-accent-strong); background: var(--pp-accent-soft); text-decoration: none; } .pp-tag--brand:hover { background: #DCE9FB; } .products-page .pp-node__title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; line-height: 1.5; color: var(--pp-ink); margin: 0 0 12px; } .pp-node__lede { font-size: 0.9rem; line-height: 2.1; color: var(--pp-muted); margin: 0; max-width: 46rem; } .pp-node__price { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 18px; padding: 10px 16px; border: 1px solid var(--pp-rule); border-radius: 10px; background: var(--pp-surface); } .pp-node__price b { font-size: 1.05rem; color: var(--pp-ink); } .pp-node__price span { font-size: 11.5px; color: var(--pp-faint); } .pp-node__points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 22px; max-width: 46rem; } .pp-node__points li { position: relative; font-size: 0.83rem; line-height: 1.9; color: var(--pp-ink-2); padding-inline-start: 18px; } .pp-node__points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.66em; width: 8px; height: 4px; border-inline-start: 1.5px solid var(--pp-accent); border-bottom: 1.5px solid var(--pp-accent); transform: rotate(-45deg); } .pp-node__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } /* --------------------------------------------------------- sibling switch -- */ /* Replaces the sticky pill row. Not sticky: it sat at `top-16` under a header that is `fixed` on some page types and `sticky` on others, so it disappeared behind the header at certain scroll positions. */ .pp-switch { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 0; } .pp-switch__label { font-size: 12px; color: var(--pp-faint); align-self: center; margin-inline-end: 4px; } .pp-chip--on { background: var(--pp-ink); border-color: var(--pp-ink); color: #fff; } .pp-chip--on:hover { color: #fff; border-color: var(--pp-ink); } /* -------------------------------------------------------------- sub-nodes -- */ .pp-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; } .pp-sub { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 14px; border: 1px solid var(--pp-rule); border-radius: var(--pp-radius); text-decoration: none; background: #fff; transition: border-color .15s ease, transform .15s ease; } .pp-sub:hover { border-color: #C7D8F5; transform: translateY(-2px); } .pp-sub img { height: 56px; width: 100%; object-fit: contain; } .pp-sub__name { font-size: 0.85rem; font-weight: 700; color: var(--pp-ink); } .pp-sub__n { font-size: 11px; color: var(--pp-faint); } /* ------------------------------------------------------------------ specs -- */ .pp-specs { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .pp-specs tr { border-bottom: 1px solid var(--pp-rule-soft); } .pp-specs tr:last-child { border-bottom: 0; } .pp-specs th { text-align: start; font-weight: 600; color: var(--pp-muted); padding: 11px 14px; width: 34%; vertical-align: top; background: var(--pp-surface); } .pp-specs td { padding: 11px 14px; color: var(--pp-ink-2); } .pp-specs-wrap { border: 1px solid var(--pp-rule); border-radius: var(--pp-radius); overflow: hidden; } /* ------------------------------------------------------------------ prose -- */ .pp-prose { font-size: 0.9rem; line-height: 2.1; color: var(--pp-ink-2); max-width: 48rem; } .pp-prose h2 { font-size: 1.15rem; font-weight: 800; color: var(--pp-ink); margin: 1.6em 0 .6em; } .pp-prose h3 { font-size: 1rem; font-weight: 700; color: var(--pp-ink); margin: 1.4em 0 .5em; } .pp-prose p { margin: 0 0 1em; } .pp-prose ul, .pp-prose ol { margin: 0 0 1em; padding-inline-start: 1.3em; } .pp-prose li { margin-bottom: .4em; } .pp-prose a { color: var(--pp-accent); } .pp-prose img { max-width: 100%; height: auto; border-radius: 10px; } /* ------------------------------------------------------------------ empty -- */ .pp-empty { text-align: center; padding: 44px 20px; border: 1px dashed var(--pp-rule); border-radius: var(--pp-radius); background: var(--pp-surface); color: var(--pp-muted); font-size: 0.88rem; } @media (max-width: 900px) { .pp-node--media { grid-template-columns: 1fr; } .pp-node__figure { max-width: 340px; } } @media (max-width: 767px) { .pp-crumbs { padding-top: 68px; } .pp-node { padding: 20px 0 26px; } .pp-subgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .pp-node__actions .pp-btn { width: 100%; } }