/* ========================================================================
comparison.css -- comparison-table component (mobile-first)
Styles the consumer + legal comparison tables emitted by
Pages/Shared/_ComparisonGrid.cshtml. Consumed by Pricing and Index.
Markup contract (do not change without coordinating with the Razor
partial):
The ScribeHold column is the highlighted one (.col-highlight) -- it gets
an accent left border, an accent-tinted background wash, and a slightly
stronger header treatment.
Responsive strategy (mobile-first, per architecture.md Decision 2):
- Base styles assume a narrow viewport. The table is wrapped in a
.comparison-scroll-wrapper that allows horizontal scroll so the
table never breaks out of the page or shrinks below readable width.
- At >= 768px (md) the wrapper becomes inert -- the table fits and
the wrapper neither scrolls nor scrollbar-pads.
Breakpoints (per tokens.css; literal because CSS custom properties are
not permitted inside @media queries):
md: 768px
lg: 1024px
Tokens consumed (from tokens.css). Fallbacks are provided so this file
degrades gracefully if tokens.css is missing or reordered:
--color-bg-card, --color-bg-manila
--color-border
--color-ink, --color-muted
--color-accent, --color-accent-ink
--color-accent-wash-04, --color-accent-wash-06,
--color-accent-wash-10, --color-accent-wash-15
--space-2 .. --space-12
--font-size-xs .. --font-size-md
--font-weight-semibold
--line-height-snug, --line-height-loose
--radius-md
--shadow-sm
======================================================================== */
/* ------------------------------------------------------------------------
1. Section wrapper
------------------------------------------------------------------------ */
.comparison-section {
padding-block: var(--space-10, 40px);
}
@media (min-width: 768px) {
.comparison-section {
padding-block: var(--space-12, 48px);
}
}
.comparison-section > h2 {
margin-top: 0;
}
/* ------------------------------------------------------------------------
2. Mobile horizontal-scroll wrapper
On narrow viewports the table is given a horizontal scroll container
so its columns can keep readable width without forcing the page wider
than the viewport. The wrapper is always safe to use -- on wider
viewports it becomes a no-op.
-webkit-overflow-scrolling: touch enables momentum scroll on iOS Safari.
overscroll-behavior-inline: contain prevents the scroll from chaining to
the page when the user reaches an edge of the table.
------------------------------------------------------------------------ */
.comparison-scroll-wrapper {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-inline: contain;
margin-top: var(--space-6, 24px);
/* A soft inset edge hints there's more content when scrolled. */
border: 1px solid var(--color-border, #e6e2d6);
border-radius: var(--radius-md, 8px);
background: var(--color-bg-card, #fff);
}
@media (min-width: 768px) {
.comparison-scroll-wrapper {
/* At >= md the table fits without scrolling. Drop the scroll
container chrome so the table sits flush with the section. */
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
}
/* ------------------------------------------------------------------------
3. Table -- base (mobile baseline + desktop overrides)
Base sets a min-width so columns don't collapse to unreadable widths
inside the scroll wrapper. At >= md we relax the min-width and let
the table fill its container.
------------------------------------------------------------------------ */
.comparison-grid {
width: 100%;
min-width: 640px; /* keeps columns readable in the scroller */
border-collapse: collapse;
font-size: var(--font-size-sm, 0.875rem);
line-height: var(--line-height-snug, 1.3);
color: var(--color-ink, #1f2024);
}
@media (min-width: 768px) {
.comparison-grid {
min-width: 0;
margin-top: var(--space-6, 24px);
font-size: var(--font-size-md, 1rem);
line-height: var(--line-height-loose, 1.7);
}
}
/* ------------------------------------------------------------------------
4. Cells -- shared base
------------------------------------------------------------------------ */
.comparison-grid th,
.comparison-grid td {
padding: var(--space-3, 12px) var(--space-4, 16px);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-border, #e6e2d6);
}
.comparison-grid tbody tr:last-child th,
.comparison-grid tbody tr:last-child td {
/* Last row has no rule -- the wrapper border (mobile) or the
section padding (desktop) closes the table visually. */
border-bottom: 0;
}
/* ------------------------------------------------------------------------
5. Header row
------------------------------------------------------------------------ */
.comparison-grid thead th {
background: var(--color-bg-manila, #f4f1e8);
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-ink, #1f2024);
border-bottom: 1px solid var(--color-border, #e6e2d6);
/* Sticky header keeps column labels visible during vertical scroll
on tall tables; harmless on short ones. */
position: sticky;
top: 0;
z-index: 1;
}
/* ------------------------------------------------------------------------
6. Column-width hints (only meaningful at >= md when the table
occupies the section's full width)
------------------------------------------------------------------------ */
@media (min-width: 768px) {
.comparison-grid .col-question {
width: 28%;
}
.comparison-grid .col-scribehold {
width: 28%;
}
.comparison-grid .col-competitor {
width: 22%;
}
}
/* ------------------------------------------------------------------------
7. ScribeHold Pro column -- the highlighted column
The highlighted column gets:
- an accent-tinted background wash (subtle, kept WCAG-safe with
--color-ink),
- a stronger accent wash in the header,
- an accent left border (3px) that runs the full column height,
- bolder cell text so the value column reads as the primary answer.
.col-highlight is applied to every | / | in the ScribeHold column
in the markup, so the styling cascades cell-by-cell rather than relying
on a (which can't carry interactive state).
------------------------------------------------------------------------ */
.comparison-grid .col-highlight {
background: var(--color-accent-wash-06, rgba(155, 104, 34, 0.06));
border-left: 3px solid var(--color-accent, #9b6822);
font-weight: var(--font-weight-semibold, 600);
color: var(--color-ink, #1f2024);
}
.comparison-grid thead .col-highlight {
/* Composite the translucent amber wash over the opaque manila base so
the sticky header stays fully opaque — otherwise table rows show
through the 15%-alpha wash during vertical scroll. */
background:
linear-gradient(var(--color-accent-wash-15, rgba(155, 104, 34, 0.15)),
var(--color-accent-wash-15, rgba(155, 104, 34, 0.15))),
var(--color-bg-manila, #f4f1e8);
color: var(--color-accent-ink, #6a4514);
}
/* ------------------------------------------------------------------------
8. Row highlight -- the "hero" row (first row, marked .row-highlight
in the markup; e.g. legal variant's flagship Bates/PDF/A row).
The highlighted row gets a faint wash across every cell, with a deeper
wash on the ScribeHold column so the intersection reads as the most
important answer in the table.
------------------------------------------------------------------------ */
.comparison-grid .row-highlight td {
background: var(--color-accent-wash-04, rgba(155, 104, 34, 0.04));
}
.comparison-grid .row-highlight .col-highlight {
background: var(--color-accent-wash-10, rgba(155, 104, 34, 0.10));
}
/* ------------------------------------------------------------------------
9. Inline glyphs and footnote references inside cells
------------------------------------------------------------------------ */
.comparison-grid abbr {
cursor: help;
text-decoration: none;
color: var(--color-muted, #5a5d66);
font-size: var(--font-size-xs, 0.78rem);
border-bottom: 1px dotted var(--color-muted, #5a5d66);
}
.comparison-grid abbr:focus-visible {
outline: 2px solid var(--color-accent, #9b6822);
outline-offset: 2px;
}
.comparison-grid .fn-ref,
.comparison-footnotes .fn-ref {
color: var(--color-muted, #5a5d66);
font-size: var(--font-size-xs, 0.78rem);
vertical-align: super;
line-height: 1;
}
/* ------------------------------------------------------------------------
10. Footnotes block (sits below the table)
------------------------------------------------------------------------ */
.comparison-footnotes {
margin: var(--space-4, 16px) 0 0;
font-size: var(--font-size-xs, 0.78rem);
line-height: var(--line-height-loose, 1.7);
color: var(--color-muted, #5a5d66);
}
.comparison-footnotes a {
color: var(--color-link, #6a4514);
}
.comparison-footnotes a:hover {
color: var(--color-link-hover, #9b6822);
}
/* ------------------------------------------------------------------------
11. Reduced-motion safety
The scroll wrapper uses native overflow scrolling; nothing animates by
default. base.css already disables animations globally under
prefers-reduced-motion -- this block exists as a defensive guard in
case future variants add transitions to highlighted cells.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.comparison-grid .col-highlight,
.comparison-grid .row-highlight td {
transition: none;
}
}
|