/* * PhoneMatrix "Spec-Sheet Dark" theme, layered on top of vendored * Bootstrap 5.3 (bootstrap.min.css) via Bootstrap's own dark color-mode * variables (`[data-bs-theme=dark]`, set on in the layouts) — no * component markup rewrite, every .card/.table/.btn/.form-control/ * .list-group already dark-mode-aware, this file only retunes the palette, * adds glow/elevation, and a couple of small new components (gauge bars). */ /* Bumps every rem-based size site-wide (Bootstrap's whole scale — text, spacing, component sizing — is rem-relative to this), since a content- dense comparison/spec-table site reads a little cramped at the 16px browser default. */ html { font-size: 17px; } :root, [data-bs-theme="dark"] { --pm-bg: #0a0e14; --pm-bg-elevated: #121822; --pm-bg-elevated-2: #1a2230; --pm-border: rgba(148, 163, 184, 0.14); --pm-border-strong: rgba(148, 163, 184, 0.28); --pm-text: #e7ecf3; --pm-text-secondary: #99a5b8; --pm-text-muted: #6b7686; --pm-accent: #3b82f6; --pm-accent-hover: #60a5fa; --pm-accent-rgb: 59, 130, 246; --pm-accent-glow: rgba(59, 130, 246, 0.35); --pm-cta: #f7b733; --pm-cta-strong: #f2994a; --pm-success: #22c55e; --pm-success-rgb: 34, 197, 94; color-scheme: dark; --bs-body-bg: var(--pm-bg); --bs-body-color: var(--pm-text); --bs-emphasis-color: #fff; --bs-secondary-color: var(--pm-text-secondary); --bs-tertiary-color: var(--pm-text-muted); --bs-border-color: var(--pm-border); --bs-border-color-translucent: var(--pm-border); --bs-secondary-bg: var(--pm-bg-elevated); --bs-tertiary-bg: var(--pm-bg-elevated-2); --bs-primary: var(--pm-accent); --bs-primary-rgb: var(--pm-accent-rgb); --bs-link-color: var(--pm-accent); --bs-link-color-rgb: var(--pm-accent-rgb); --bs-link-hover-color: var(--pm-accent-hover); --bs-link-hover-color-rgb: 96, 165, 250; --bs-card-bg: var(--pm-bg-elevated); --bs-card-border-color: var(--pm-border); --bs-table-striped-bg: var(--pm-bg-elevated-2); } body { background: radial-gradient(1100px 520px at 50% -12%, rgba(59, 130, 246, 0.14), transparent 60%), var(--pm-bg); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Header */ .site-header { position: sticky; top: 0; z-index: 1030; background: rgba(10, 14, 20, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pm-border); } /* Hide-on-scroll-down / reveal-on-scroll-up (header-scroll.js) — mobile only, since the header only eats meaningful viewport space there. Desktop keeps the header always visible. */ @media (max-width: 767.98px) { .site-header { transition: transform 0.25s ease; } .site-header.site-header--hidden { transform: translateY(-100%); } } .navbar-brand svg { color: var(--pm-accent); filter: drop-shadow(0 0 6px var(--pm-accent-glow)); } /* Brand nav dropdown (header) — plain
/, see the HTML comment in layouts/main.php for why this isn't Bootstrap's JS dropdown component. Positioning/panel styling only; the disclosure behavior itself is native. */ .pm-brand-nav { position: relative; } .pm-brand-nav > summary { cursor: pointer; list-style: none; } .pm-brand-nav > summary::-webkit-details-marker { display: none; } .pm-brand-nav-menu { position: absolute; top: 100%; right: 0; z-index: 1040; margin-top: 0.5rem; padding: 0.5rem 0; min-width: 200px; max-height: 60vh; overflow-y: auto; list-style: none; background: var(--pm-bg-elevated); border: 1px solid var(--pm-border); border-radius: 0.5rem; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.8); } .pm-brand-nav-menu li a { display: block; padding: 0.4rem 1rem; color: var(--pm-text); text-decoration: none; } .pm-brand-nav-menu li a:hover, .pm-brand-nav-menu li a:focus-visible { background: var(--pm-bg-elevated-2); color: var(--pm-accent-hover); } /* Compare picker (site-wide nav "Compare" menu) */ .pm-compare-nav { position: relative; } .pm-compare-nav > summary { cursor: pointer; list-style: none; } .pm-compare-nav > summary::-webkit-details-marker { display: none; } .pm-compare-picker { position: absolute; top: 100%; right: 0; z-index: 1040; margin-top: 0.5rem; padding: 1rem; width: 280px; background: var(--pm-bg-elevated); border: 1px solid var(--pm-border); border-radius: 0.5rem; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.8); } /* Footer */ .site-footer { background: var(--pm-bg-elevated); border-top: 1px solid var(--pm-border); } /* Headline accent underline — applies to every page's opening

without touching each view template individually. */ article > h1:first-child, .pm-hero-content > h1:first-child { letter-spacing: -0.02em; font-weight: 800; } article > h1:first-child::after, .pm-hero-content > h1:first-child::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 0.65rem; border-radius: 999px; background: linear-gradient(90deg, var(--pm-accent), var(--pm-accent-hover)); } .lead { color: var(--pm-text-secondary); } /* Breadcrumb — colors already inherited from the global --bs-secondary-color/ --bs-link-color retuning above; only the divider glyph is worth overriding here. */ .breadcrumb { --bs-breadcrumb-divider: "›"; } /* Cards */ .card { border-radius: 0.9rem; box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.65); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .card:hover { border-color: var(--pm-accent-glow); box-shadow: 0 0 0 1px var(--pm-accent-glow), 0 16px 34px -18px rgba(0, 0, 0, 0.75); } .card-title .bi { color: var(--pm-accent); } /* Video embed styling — shared by the comparison-page video, the product-page comparisons grid thumbnails, and the home hero. */ .ratio-16x9 { border-radius: 0.9rem; overflow: hidden; border: 1px solid var(--pm-border); box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.8); } /* Comparison-page video only — capped and centered so it doesn't render at the full .container width (up to 1320px on wide desktop, ~742px tall at 16:9) as the dominant element on the page. Scoped to its own class rather than capping .ratio-16x9 itself, which would also shrink the product-page comparisons grid thumbnails and the home hero. */ .pm-video-embed { max-width: 720px; margin-inline: auto; } /* Tables */ .table { --bs-table-color: var(--pm-text); } .table thead th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--pm-text-muted); border-bottom-color: var(--pm-border-strong); } .table td, .table th { vertical-align: middle; } /* Comparison spec tables (9 separate elements, one per category — Battery, Camera, Display...). Each one auto-sizes its own columns from its own content by default, so column boundaries never line up from one section to the next: Battery's short numbers and Software's "iOS 26"/ "One UI 8" pull the same column to different widths in each table. table-layout: fixed + explicit percentages on every table forces every section's three columns to the same width regardless of content, so column edges (and, as a side effect, exactly how each name wraps) are now identical everywhere on the page. */ .pm-spec-table { table-layout: fixed; } .pm-spec-table th:first-child, .pm-spec-table td:first-child { width: 26%; } .pm-spec-table th:not(:first-child), .pm-spec-table td:not(:first-child) { width: 37%; } /* Product-page spec tables (9 separate
elements, one per section — Display, Camera, Battery...) — same misalignment, same fix, but a 2-column label+value layout instead of the compare page's label+2 phones, so its own class/percentages rather than reusing .pm-spec-table. */ .pm-product-spec-table { table-layout: fixed; } .pm-product-spec-table th:first-child, .pm-product-spec-table td:first-child { width: 35%; /* Extra breathing room between the label and value columns, on top of Bootstrap's default cell padding — column width stays fixed at 35% either way, this just shrinks the label's usable text area a bit rather than moving the column boundary. */ padding-right: 2rem; } .pm-product-spec-table th:not(:first-child), .pm-product-spec-table td:not(:first-child) { width: 65%; } /* Flex, not the default inline flow: a plain only centers its thumbnail against its own line box, which drifts whenever the phone name wraps to a different number of lines — and each spec-table section sizes this column independently (browser auto table layout, keyed off whatever value row is widest in THAT table), so the same name can wrap to one line in Battery and two in Software. min-height guarantees every section's header row is the same height regardless, so align-items: center always centers the thumbnail at the identical position. */ .pm-spec-header-link { display: flex; align-items: center; gap: 0.4rem; min-height: 48px; color: inherit; text-decoration: none; } .pm-spec-header-link:hover, .pm-spec-header-link:focus-visible { color: var(--pm-accent-hover); text-decoration: underline; } /* Winner highlight (comparison spec table) — flat, no cell background fill: just a thin left-border accent on the cell and bold green on the value itself, reusing the existing --pm-success token (#22c55e). Computed contrast against both this table's possible row backgrounds (--pm-bg-elevated #121822 and the striped --pm-bg-elevated-2 #1a2230): 7.8:1 and 7.0:1 — both clear WCAG AA (4.5:1) with room to spare. */ .pm-winner-cell { box-shadow: inset 3px 0 0 var(--pm-success); } .pm-winner-value { color: var(--pm-success); font-weight: 700; } /* Spec-table header thumbnails (comparison pages) — per-phone visual identification without duplicating the video thumbnail's full-width renders below it. */ .pm-spec-thumb { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; background: #FAFAFA; border-radius: 6px; } /* Buttons */ .btn { font-weight: 600; border-radius: 0.6rem; } .btn-primary { --bs-btn-bg: var(--pm-accent); --bs-btn-border-color: var(--pm-accent); --bs-btn-hover-bg: var(--pm-accent-hover); --bs-btn-hover-border-color: var(--pm-accent-hover); --bs-btn-active-bg: var(--pm-accent-hover); --bs-btn-active-border-color: var(--pm-accent-hover); box-shadow: 0 8px 20px -8px var(--pm-accent-glow); } .btn-warning { --bs-btn-bg: linear-gradient(135deg, var(--pm-cta), var(--pm-cta-strong)); background: linear-gradient(135deg, var(--pm-cta), var(--pm-cta-strong)); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-color: #1a1200; --bs-btn-hover-color: #1a1200; --bs-btn-active-color: #1a1200; box-shadow: 0 10px 24px -10px rgba(247, 183, 51, 0.55); } .btn-warning:hover, .btn-warning:focus { background: linear-gradient(135deg, #ffc861, var(--pm-cta)); box-shadow: 0 12px 28px -10px rgba(247, 183, 51, 0.7); } /* Overflow comparisons disclosure */ summary { width: fit-content; } summary:hover, summary:focus-visible { color: var(--pm-accent); } /* List group (search results) */ .list-group-item { background: var(--pm-bg-elevated); border-color: var(--pm-border); } .list-group-item-action:hover, .list-group-item-action:focus { background: var(--pm-bg-elevated-2); border-color: var(--pm-accent-glow); z-index: 1; } /* Percentile ranking gauges (product pages) */ .pm-ranking { margin-bottom: 0.9rem; } .pm-ranking:last-child { margin-bottom: 0; } .pm-ranking p { color: var(--pm-text-secondary); } .pm-gauge { height: 0.45rem; border-radius: 999px; background: var(--pm-bg-elevated-2); border: 1px solid var(--pm-border); overflow: hidden; } .pm-gauge-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pm-accent), var(--pm-accent-hover)); box-shadow: 0 0 10px var(--pm-accent-glow); } /* Product hero (product detail page) — single column (image, then name/ summary/specs/CTA) below 768px so source order matches visual order; two-column grid above it, image fixed-width left, content flexing right. Capped max-width keeps it from sprawling on ultra-wide desktop screens, centered via margin-inline: auto. */ .pm-hero { display: grid; grid-template-columns: 1fr; align-items: start; gap: 1.5rem; max-width: 880px; margin-inline: auto; margin-bottom: 1.5rem; } @media (min-width: 768px) { .pm-hero { grid-template-columns: 320px 1fr; align-items: center; } /* Grid auto-placement would otherwise drop a lone .pm-hero-content (no photo for this product, so .pm-hero-media never rendered) into the first 320px track instead of spanning full width. */ .pm-hero-content:only-child { grid-column: 1 / -1; } } /* Product hero photo — same white-well treatment as the brand-grid cards (.pm-product-card-media) for cross-page visual consistency. object-fit: contain on a fixed-size box so the full render is always visible; the old aspect-ratio: 1/1 + object-fit: cover combo cropped top/bottom off every portrait source photo instead. */ .pm-hero-media { display: flex; align-items: center; justify-content: center; max-width: 320px; margin-inline: auto; padding: 20px; background: #FAFAFA; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .pm-hero-media img { display: block; width: 100%; height: 380px; object-fit: contain; } .pm-hero-specs { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; } .pm-hero-specs li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; background: var(--pm-bg-elevated-2); border: 1px solid var(--pm-border); border-radius: 999px; font-size: 0.85rem; color: var(--pm-text-secondary); } .pm-hero-specs .bi { color: var(--pm-accent); } /* Product cards (brand grid) — fixed total card height (not h-100/row stretch, which only equalizes height *within a row*) so every card is identical regardless of row position or title wrapping. The media container is a deliberate "shadowbox" rather than an attempt to hide the source photos' baked-in white background: framing it with padding, a dark panel, and its own drop shadow reads as a styled product-photo card instead of a cropping artifact. */ .pm-product-card { height: 420px; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .pm-product-card:hover { transform: translateY(-4px); border-color: var(--pm-border-strong); } .pm-product-card-media { flex: 0 0 auto; height: 70%; margin: 1.1rem 1.1rem 0; padding: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #FAFAFA; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: border-color 0.25s ease; } .pm-product-card:hover .pm-product-card-media { border-color: rgba(0, 0, 0, 0.12); } .pm-product-card-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; } .pm-product-card-media .bi { width: 3.5rem; height: 3.5rem; color: var(--pm-text-muted); } .pm-product-card-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .pm-product-card-info { margin-top: auto; } /* Accessibility */ a:focus-visible, .btn:focus-visible, .form-control:focus-visible, .list-group-item:focus-visible { outline: 2px solid var(--pm-accent); outline-offset: 2px; } ::selection { background: var(--pm-accent); color: #fff; } .bi { vertical-align: -0.125em; }