/* ============================================================================ HostReview design system Dark dramatic hero -> bright scannable content. Data visualisation over prose. Motion that guides the eye. Everything is transform/opacity so it stays 60fps. ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { --display: "Instrument Sans", "Inter", system-ui, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --ink: #0a0e1a; --ink-2: #4a5468; --ink-3: #8892a6; --surface: #ffffff; --surface-2: #f6f8fc; --surface-3: #eaeef7; --line: #e3e8f2; --line-2: #d1d9e8; /* vivid triad — used as gradients, never as flat fills */ --a1: #4f46e5; /* indigo */ --a2: #8b5cf6; /* violet */ --a3: #06b6d4; /* cyan */ --accent: var(--a1); --accent-ink: #ffffff; --accent-soft: #eef0ff; --accent-line: #c7cdfb; --grad: linear-gradient(135deg, var(--a2) 0%, var(--a1) 55%, #3730c9 100%); --grad-bright: linear-gradient(120deg, var(--a3), var(--a2) 55%, var(--a1)); --good: #059669; --good-soft: #e6f7f1; --warn: #b45309; --warn-soft: #fdf3e3; --bad: #dc2626; --bad-soft: #fdedee; --gold: #d97706; --r-sm: .55rem; --r: .85rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --sh-1: 0 1px 2px rgba(10,14,26,.05), 0 1px 3px rgba(10,14,26,.04); --sh-2: 0 2px 6px rgba(10,14,26,.05), 0 10px 28px -8px rgba(10,14,26,.12); --sh-3: 0 6px 12px rgba(10,14,26,.06), 0 24px 48px -14px rgba(10,14,26,.20); --sh-glow: 0 8px 28px -8px rgba(79,70,229,.5); --ease: cubic-bezier(.22,.61,.36,1); --spring: cubic-bezier(.34,1.4,.64,1); } @media (prefers-color-scheme: dark) { :root { --ink: #eef1f8; --ink-2: #a1abc0; --ink-3: #6f7a91; --surface: #0a0d16; --surface-2: #10141f; --surface-3: #191f2e; --line: #1f2637; --line-2: #2b3346; --a1: #7c76ff; --a2: #a78bfa; --a3: #22d3ee; --accent-ink: #070a12; --accent-soft: #161c33; --accent-line: #2f3862; --good: #34d399; --good-soft: #0c2a22; --warn: #fbbf24; --warn-soft: #2a2011; --bad: #fb7185; --bad-soft: #2c1219; --gold: #fbbf24; --sh-1: 0 1px 2px rgba(0,0,0,.55); --sh-2: 0 2px 8px rgba(0,0,0,.5), 0 12px 32px -10px rgba(0,0,0,.6); --sh-3: 0 8px 18px rgba(0,0,0,.55), 0 28px 60px -16px rgba(0,0,0,.75); --sh-glow: 0 8px 30px -8px rgba(124,118,255,.55); } } /* The same palette, selectable. The media query alone gave a visitor no way to choose; data-theme on wins over it in BOTH directions, so someone on a dark OS can force light and vice versa. */ :root[data-theme="dark"] { --ink: #eef1f8; --ink-2: #a1abc0; --ink-3: #6f7a91; --surface: #0a0d16; --surface-2: #10141f; --surface-3: #191f2e; --line: #1f2637; --line-2: #2b3346; --a1: #7c76ff; --a2: #a78bfa; --a3: #22d3ee; --accent-ink: #070a12; --accent-soft: #161c33; --accent-line: #2f3862; --good: #34d399; --good-soft: #0c2a22; --warn: #fbbf24; --warn-soft: #2a2011; --bad: #fb7185; --bad-soft: #2c1219; --gold: #fbbf24; --sh-1: 0 1px 2px rgba(0,0,0,.55); --sh-2: 0 2px 8px rgba(0,0,0,.5), 0 12px 32px -10px rgba(0,0,0,.6); --sh-3: 0 8px 18px rgba(0,0,0,.55), 0 28px 60px -16px rgba(0,0,0,.75); --sh-glow: 0 8px 30px -8px rgba(124,118,255,.55); } :root[data-theme="light"] { color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* clip, NOT hidden: `hidden` would make the body a scroll container and break every position:sticky on the site. This is the safety net for residual decorative overflow at very narrow widths (~360px) — the real causes at 390px and up are fixed properly, in .sec-head and the .doc grid. */ overflow-x: clip; font: 400 16.5px/1.7 var(--sans); letter-spacing: -.006em; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ------------------------------------------------------------ typography */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.032em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.15rem, 1.45rem + 2.4vw, 3.25rem); letter-spacing: -.038em; } h2 { font-size: clamp(1.38rem, 1.2rem + .8vw, 1.85rem); margin-top: 0; letter-spacing: -.03em; } h3 { font-size: 1.12rem; letter-spacing: -.024em; font-weight: 600; } p { margin: 0 0 1.1em; } a { color: var(--a1); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s var(--ease); } a:hover { color: var(--a2); } img { max-width: 100%; height: auto; display: block; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } /* Prose pages. This class was used by method/privacy/terms/cookies/contact but never defined, so all five rendered at the full 1180px — roughly 130 characters a line, about double a readable measure. */ /* Self-sufficient, like .wrap. It previously set only max-width, which left every section using it flush against the left edge with no gutter at all — /about, /vps-hosting and /search all shipped that way, and on a phone the text touched the screen edge. Nothing combines this with .wrap, so the padding cannot double up. */ .wrap-narrow { max-width: 52rem; margin-inline: auto; padding: 0 1.5rem; } /* Anchor targets have to clear the sticky header, or a jump lands with the heading hidden underneath it. Scoped to sections and headings on purpose — on every `[id]` it would also over-scroll form fields when they take focus. */ :target, section[id], .doc-sec, h2[id], h3[id] { scroll-margin-top: 5.5rem; } /* Section header: title + rule (+ optional link). Declared AFTER .wrap on purpose — `.wrap { margin: 0 auto }` is a shorthand that resets margin-top, so on
whichever rule comes last wins. */ .sec { margin-top: 5rem; } .sec-head { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: 1.75rem; /* wrap + min-width:0 below: h2 was flex:0 0 auto and .sec-link was nowrap, so a long heading or note could not shrink and pushed the whole page wider than a phone viewport. This was the single biggest cause of horizontal scroll. */ flex-wrap: wrap; } .sec-head h2 { margin: 0; flex: 0 1 auto; min-width: 0; } .sec-head::after { content: ""; flex: 1 0 2rem; height: 1px; background: var(--line); } .sec-head .sec-link { font: 650 .84rem/1 var(--sans); text-decoration: none; min-width: 0; overflow-wrap: anywhere; } .sec-head .sec-link.muted { white-space: normal; } @media (max-width: 640px) { /* The decorative rule earns nothing once the row wraps. */ .sec-head::after { display: none; } } .sec-sub { margin: -1rem 0 2rem; font-size: .95rem; color: var(--ink-2); max-width: 66ch; } /* Full-bleed tinted band. Alternating white / tinted / dark gives the page a rhythm; an unbroken run of white cards is what reads as "a simple page". */ .band { background: var(--surface-2); border-block: 1px solid var(--line); padding: 4.25rem 0; margin-top: 5rem; } .band .sec, .band > .wrap > .sec:first-child { margin-top: 0; } .band-tight { padding: 2.25rem 0; } /* ------------------------------------------------------------------ byline */ .byline { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; margin-top: 1.6rem; } .avatar { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--grad); color: #fff; font: 800 .68rem/1 var(--sans); letter-spacing: .02em; flex: 0 0 auto; box-shadow: none; } .by-text { display: grid; gap: .1rem; min-width: 0; } .by-name { font-size: .86rem; color: var(--ink-2); } .by-name strong { color: var(--ink); font-weight: 650; } .by-meta { font-size: .76rem; color: var(--ink-3); } .by-link { margin-left: auto; font: 650 .82rem/1 var(--sans); text-decoration: none; white-space: nowrap; } /* ----------------------------------------------------------- method strip */ .method-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } @media (max-width: 820px) { .method-strip { grid-template-columns: 1fr; gap: 1.35rem } } .ms-item { display: flex; gap: .75rem; align-items: flex-start; } .ms-icon { display: grid; place-items: center; flex: 0 0 auto; width: auto; height: auto; border: 0; background: none; box-shadow: none; color: var(--a1); padding-top: .1rem; } .ms-title { display: block; font: 600 .92rem/1.35 var(--sans); color: var(--ink); letter-spacing: -.012em; } .ms-body { display: block; font-size: .82rem; line-height: 1.5; color: var(--ink-2); margin-top: .15rem; } .muted { color: var(--ink-2); } .small { font-size: .875rem; } .tiny { font-size: .76rem; } .mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; } .center { text-align: center; } .nowrap { white-space: nowrap; } /* The page deck. Capped at 18px: at 20.5px it competed with the h1 above it instead of introducing it, and pushed every intro onto three lines. */ .lead { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.65; color: var(--ink-2); max-width: 66ch; } .grad-text { background: var(--grad-bright); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font: 700 .72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--a1); margin-bottom: 1.1rem; } /* live pulsing dot — cheap way to make a static page feel alive */ .dot-live { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; position: relative; flex: 0 0 auto; } .dot-live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #22c55e; animation: pulse 2.2s var(--ease) infinite; } @keyframes pulse { 0% { transform: scale(.7); opacity: 1 } 100% { transform: scale(1.9); opacity: 0 } } /* =========================================================== hero: aurora */ .hero { position: relative; isolation: isolate; overflow: hidden; background: #070a14; color: #f2f5fc; padding: 4rem 0 4.25rem; } /* the band below butts straight against the hero — no white sliver between */ .hero + .band { margin-top: 0; border-top: 0; } .hero::after { /* fine grid overlay for depth */ content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 25%, transparent 75%); } .aurora { position: absolute; inset: 0; z-index: -2; filter: blur(72px); opacity: .85; /* The blobs are up to 40rem wide with negative offsets; without this they push the document scroll width out on a phone. */ overflow: hidden; } .aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; } .aurora i:nth-child(1) { width: 40rem; height: 26rem; left: -8rem; top: -8rem; background: radial-gradient(circle, #4f46e5, transparent 68%); animation: drift1 22s var(--ease) infinite alternate; } .aurora i:nth-child(2) { width: 34rem; height: 24rem; right: -6rem; top: -4rem; background: radial-gradient(circle, #06b6d4, transparent 68%); animation: drift2 26s var(--ease) infinite alternate; } .aurora i:nth-child(3) { width: 38rem; height: 22rem; left: 28%; bottom: -12rem; background: radial-gradient(circle, #8b5cf6, transparent 68%); animation: drift3 30s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate3d(9rem, 4rem, 0) scale(1.18) } } @keyframes drift2 { to { transform: translate3d(-7rem, 6rem, 0) scale(1.12) } } @keyframes drift3 { to { transform: translate3d(5rem, -5rem, 0) scale(1.22) } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 4rem; align-items: center; } @media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; gap: 3rem } } .hero .eyebrow { color: #a5b4fc; } .hero h1 { max-width: 20ch; margin-bottom: 1rem; } .hero .lead { color: #aab4cc; max-width: 46ch; font-size: 1.06rem; line-height: 1.62; } /* "what are you building?" chooser — first thing a visitor can click */ .chooser { margin-top: 2rem; } .chooser-label { font: 700 .72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .13em; color: #7d8aa8; margin-bottom: .9rem; display: block; } .chips-row { display: flex; gap: .6rem; flex-wrap: wrap; } .chip-link { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.05rem; border-radius: 999px; text-decoration: none; font: 650 .88rem/1 var(--sans); color: #e8ecf7; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); transition: transform .2s var(--spring), background .2s var(--ease), border-color .2s var(--ease); } .chip-link:hover { color: #fff; transform: translateY(-2px) scale(1.03); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); } .chip-link .ico { color: #b6c0d6; } .chip-link:hover .ico { color: #fff; } .trust-bar { display: flex; gap: 2.25rem; flex-wrap: wrap; margin-top: 2.25rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.11); } .stat b { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #fff; } .stat span { font-size: .68rem; color: #8794ad; text-transform: uppercase; letter-spacing: .11em; font-weight: 650; } /* ------------------------------------------------ hero visual: live monitor */ /* The 3D tilt plus the floating cards need breathing room or they clip against the hero's overflow:hidden — hence the inset margins. */ .hero-visual { position: relative; margin: 1.5rem 1.75rem 3.4rem 0; } @media (max-width: 1080px) { .hero-visual { max-width: 34rem; margin: 0 1.75rem 2.5rem 0 } } .monitor { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(12px); transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg) scale(.985); transform-origin: center right; transition: transform .6s var(--ease); } .monitor:hover { transform: perspective(1600px) rotateY(-1.5deg) rotateX(.5deg) scale(1); } @media (max-width: 1080px) { .monitor, .monitor:hover { transform: none } } .monitor-glow { position: absolute; inset: auto -20% -60% -20%; height: 70%; background: radial-gradient(ellipse at 50% 100%, rgba(6,182,212,.35), transparent 65%); pointer-events: none; } .monitor-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04); } .monitor-title { display: inline-flex; align-items: center; gap: .5rem; font: 700 .74rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #dbe2f2; } .monitor-window { font: 600 .7rem/1 var(--sans); color: #7f8ca8; letter-spacing: .04em; } .monitor-body { padding: .4rem .5rem; } .mon-logo { --bc: #4f46e5; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: .45rem; background: linear-gradient(150deg, var(--bc), color-mix(in srgb, var(--bc) 72%, black)); font: 800 .58rem/1 var(--sans); color: #fff; letter-spacing: -.03em; text-shadow: 0 1px 1px rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); } .mon-name { font: 650 .82rem/1 var(--sans); color: #e6ebf7; white-space: nowrap; } .mon-val { font: 700 .76rem/1 var(--mono); color: #6ee7c8; font-variant-numeric: tabular-nums; } .monitor-foot { display: flex; gap: 1.4rem; justify-content: flex-end; padding: .8rem 1.15rem; border-top: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.22); font: 500 .72rem/1 var(--sans); color: #8494b0; } .monitor-foot b { color: #e6ebf7; font-weight: 700; } /* floating accent cards */ .float-card { position: absolute; z-index: 2; display: grid; gap: .15rem; padding: .7rem .95rem; border-radius: .7rem; background: rgba(16,20,33,.85); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 36px -12px rgba(0,0,0,.7); backdrop-filter: blur(10px); animation: bob 6s var(--ease) infinite alternate; } .float-a { top: -1.25rem; right: -1.25rem; } /* sits mostly *below* the panel so it never covers the footer readout */ .float-b { bottom: -3.1rem; left: -1.25rem; animation-delay: -3s; } @keyframes bob { to { transform: translateY(-9px) } } .fc-label { font: 600 .62rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #7f8ca8; } .fc-value { font-family: var(--sans); font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: -.02em; color: #fff; } .fc-warn { color: #fbbf24; } @media (max-width: 1080px) { .float-b { left: auto; right: 1.5rem; bottom: -1.25rem } } @media (max-width: 620px) { .float-card { display: none } } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1.3rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 650 .91rem/1.2 var(--sans); letter-spacing: -.008em; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--sh-1); transition: transform .18s var(--spring), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), filter .18s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--ink-3); color: var(--ink); } .btn:active { transform: translateY(0) scale(.985); } .btn-primary { position: relative; overflow: hidden; border-color: transparent; color: #fff; background: var(--grad); box-shadow: var(--sh-glow); } .btn-primary::after { /* sheen sweep on hover */ content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%); transition: transform .6s var(--ease); } .btn-primary:hover { color: #fff; filter: brightness(1.1); box-shadow: 0 12px 34px -8px rgba(79,70,229,.6); } .btn-primary:hover::after { transform: translateX(110%); } .btn-ghost { background: transparent; box-shadow: none; border-color: var(--line-2); } .btn-light { background: #fff; color: #0a0e1a; border-color: transparent; } .btn-outline-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); box-shadow: none; } .btn-outline-light:hover { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); } .btn-block { width: 100%; } .btn-sm { padding: .42rem .8rem; font-size: .81rem; } .btn-lg { padding: .92rem 1.75rem; font-size: 1rem; } .btn-danger { color: var(--bad); border-color: var(--line); box-shadow: none; } .btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------- reveal on scroll */ /* Only hidden when JS confirmed it can reveal them. Without JS, or if the observer never fires, content stays visible — never a blank page. */ .js-anim .reveal { opacity: 0; transform: translateY(18px); } .js-anim .reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); } /* ------------------------------------------------------------ score ring */ .ring { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 4.3rem; height: 4.3rem; border-radius: 50%; background: conic-gradient(from -90deg, var(--a3) 0deg, var(--a2) calc(var(--v) * 1.8deg), var(--a1) calc(var(--v) * 3.6deg), var(--surface-3) calc(var(--v) * 3.6deg)); } .ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 4px rgba(10,14,26,.07); } .ring > * { position: relative; z-index: 1; } .ring b { font-family: var(--display); font-weight: 800; font-size: 1.38rem; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .ring-lg { width: 7.5rem; height: 7.5rem; } .ring-lg::after { inset: 8px; } .ring-lg b { font-size: 2.55rem; } /* mini rubric bars — compact data viz, reads faster than a spec list */ .minibars { display: flex; align-items: flex-end; gap: 3px; height: 1.6rem; } .minibars i { width: 5px; border-radius: 2px; background: var(--grad); opacity: .6; transition: opacity .2s var(--ease), transform .3s var(--spring); transform-origin: bottom; } .host-row:hover .minibars i, .spotlight:hover .minibars i { opacity: 1; } /* -------------------------------------------------------------- spec chips */ .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; font: 600 .72rem/1.5 var(--sans); letter-spacing: -.002em; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); } .chip-ok { background: var(--good-soft); border-color: transparent; color: var(--good); } .chip-no { color: var(--ink-3); opacity: .75; } .chip-hot { background: var(--warn-soft); border-color: transparent; color: var(--warn); } .chip-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .55rem; } /* ======================================================= winner spotlight */ .spotlight { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: start; padding: 2rem 2.25rem; margin: 0 0 1.5rem; border-radius: var(--r-xl); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: var(--sh-3); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .spotlight:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(10,14,26,.08), 0 36px 70px -20px rgba(79,70,229,.3); } .spotlight-tag { position: absolute; top: -.85rem; left: 2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; color: #fff; background: var(--grad); font: 800 .68rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .1em; box-shadow: var(--sh-glow); } .spotlight h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); margin: .1rem 0 .3rem; } .spotlight h3 a { color: var(--ink); text-decoration: none; } .spotlight h3 a:hover { color: var(--a1); } .spotlight > .ring-lg { margin-top: .3rem; } /* line the ring up with the logo row */ .spot-rubric { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.6rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .spot-metric { display: grid; grid-template-columns: 5.4rem 1fr 1.8rem; gap: .55rem; align-items: center; } .sm-label { font: 600 .74rem/1 var(--sans); color: var(--ink-3); } .sm-val { font: 700 .74rem/1 var(--mono); color: var(--ink-2); text-align: right; } @media (max-width: 640px) { .spot-rubric { grid-template-columns: 1fr } } .spotlight-cta { display: grid; gap: .5rem; min-width: 12rem; align-self: center; } .spotlight-price { font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; } @media (max-width: 900px) { .spotlight { grid-template-columns: auto 1fr; gap: 1.35rem 1.5rem; padding: 2.25rem 1.35rem 1.5rem; } .spotlight-cta { grid-column: 1 / -1; min-width: 0; } } /* ----------------------------------------------------------- toplist rows */ .toplist { display: grid; gap: 1rem; margin: 2rem 0 3rem; } .host-row { position: relative; display: grid; grid-template-columns: 2.3rem minmax(13rem, 1.5fr) 8rem 5.4rem 10.5rem; gap: 1.5rem; align-items: center; padding: 1.4rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .host-row::before { /* accent edge that grows on hover */ content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); opacity: 0; transition: opacity .22s var(--ease), top .22s var(--ease), bottom .22s var(--ease); } .host-row:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); } .host-row:hover::before { opacity: 1; top: 8%; bottom: 8%; } .host-row.is-selected { border-color: var(--a1); box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-2); } .rank { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: var(--surface-2); border: 1px solid var(--line); font: 700 .88rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; } .host-row.is-top .rank, .rank-1 { color: #fff; border-color: transparent; background: var(--grad); box-shadow: var(--sh-glow); } .host-id { display: flex; align-items: center; gap: 1rem; min-width: 0; } /* Painted in the brand's own colour — see partials/logo.php for why. */ .host-logo { --bc: var(--a1); flex: 0 0 auto; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: .8rem; background: linear-gradient(155deg, color-mix(in srgb, var(--bc) 92%, white), var(--bc) 55%, color-mix(in srgb, var(--bc) 72%, black)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); font: 800 1rem/1 var(--sans); letter-spacing: -.04em; box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--bc) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .3s var(--spring), box-shadow .3s var(--ease); overflow: hidden; } .host-row:hover .host-logo, .spotlight:hover .host-logo { transform: scale(1.05) rotate(-2deg); box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--bc) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } /* real logo files sit on a white plate so any mark stays legible */ .host-logo.has-img { background: #fff; border: 1px solid var(--line); padding: .4rem; } .host-logo img { width: 100%; height: 100%; object-fit: contain; } .host-logo-lg { width: 4.4rem; height: 4.4rem; font-size: 1.28rem; border-radius: 1rem; } .host-logo-sm { width: 2.2rem; height: 2.2rem; font-size: .68rem; border-radius: .5rem; } .tested-on { display: inline-block; margin-top: .5rem; font: 600 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .best-for { display: inline-block; font: 700 .68rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .1em; background: var(--grad-bright); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Brand names are product names, not editorial headings — keep them in the sans so they read as labels and stay legible at small sizes. */ .host-name { display: block; font-family: var(--sans); font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; color: var(--ink); text-decoration: none; } .host-name:hover { color: var(--a1); } .host-tag { font-size: .83rem; line-height: 1.45; color: var(--ink-3); margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .price-cell b { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; } .price-cell .per { font-size: .73rem; color: var(--ink-3); } .price-cell .renew { display: inline-block; margin-top: .35rem; padding: .12rem .45rem; border-radius: .3rem; font-size: .69rem; font-weight: 700; color: var(--warn); background: var(--warn-soft); } .score-cell { display: grid; justify-items: center; gap: .4rem; } .verdict-word { font: 700 .64rem/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); } .stars { color: var(--gold); font-size: .8rem; letter-spacing: .09em; } .ugc { font-size: .69rem; color: var(--ink-3); } .cta-cell { display: grid; gap: .4rem; } .cta-cell .tcs { font-size: .66rem; color: var(--ink-3); text-align: center; } /* compare toggle */ .cmp-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .55rem; border-radius: .4rem; cursor: pointer; font: 600 .72rem/1.3 var(--sans); color: var(--ink-3); background: transparent; border: 1px dashed var(--line-2); transition: all .16s var(--ease); } .cmp-toggle:hover { color: var(--a1); border-color: var(--a1); background: var(--accent-soft); } .cmp-toggle[aria-pressed="true"] { color: #fff; background: var(--grad); border-style: solid; border-color: transparent; } @media (max-width: 1020px) { .host-row { grid-template-columns: 2rem 1fr auto; grid-template-areas: "rank id score" "price price cta"; row-gap: 1.1rem; padding: 1.4rem 1.25rem; } .rank { grid-area: rank } .host-id { grid-area: id } .score-cell { grid-area: score } .price-cell { grid-area: price; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1rem; } .cta-cell { grid-area: cta; border-top: 1px solid var(--line); padding-top: 1rem; } } @media (max-width: 560px) { .host-row { grid-template-areas: "rank id id" "score price price" "cta cta cta"; } .price-cell { border: 0; padding-top: 0 } .cta-cell { padding-top: .5rem } .host-logo { width: 2.9rem; height: 2.9rem; font-size: .9rem } } /* ================================================== sticky compare drawer */ .cmp-drawer { position: fixed; left: 50%; bottom: 1.25rem; z-index: 70; transform: translate(-50%, 150%); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 1.15rem; padding: .8rem .85rem .8rem 1.35rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 92%, transparent); color: #fff; box-shadow: 0 16px 44px -12px rgba(0,0,0,.55); backdrop-filter: blur(14px); max-width: calc(100vw - 2rem); transition: transform .42s var(--spring), opacity .3s var(--ease); } .cmp-drawer.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .cmp-drawer .cmp-names { font: 650 .88rem/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-drawer .cmp-hint { font-size: .74rem; opacity: .6; } .cmp-drawer .cmp-clear { background: none; border: 0; color: rgba(255,255,255,.6); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .2rem .4rem; } .cmp-drawer .cmp-clear:hover { color: #fff; } @media (prefers-color-scheme: dark) { .cmp-drawer { background: color-mix(in srgb, var(--surface-3) 94%, transparent); border: 1px solid var(--line-2); } } /* ---------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem; box-shadow: var(--sh-1); } /* exactly three across on desktop so a 6-card set never leaves an orphan */ .grid-cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 960px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 600px) { .grid-cards { grid-template-columns: 1fr } } /* --------------------------------------------------------------- review */ .review-head { display: grid; grid-template-columns: 1fr 21rem; gap: 3rem; align-items: start; padding: 2.5rem 0 1rem; } @media (max-width: 940px) { .review-head { grid-template-columns: 1fr; gap: 2rem } } /* .crumbs now lives with the breadcrumb partial, later in this file. */ .verdict-box { position: relative; background: none; border: 0; border-left: 2px solid var(--a1); border-radius: 0; padding: .25rem 0 .25rem 1.5rem; overflow: hidden; } .verdict-box::before { display: none; } .verdict-box h2 { font-family: var(--sans); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--a1); margin: 0 0 .6rem; } .verdict-box p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--ink); } /* at-a-glance grid on review pages */ .glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2rem; border-radius: 0; overflow: visible; background: none; border: 0; border-top: 1px solid var(--line); } @media (max-width: 620px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)) } } .glance-item { display: grid; gap: .3rem; padding: 1.1rem 1.25rem 1.1rem 0; background: none; border-bottom: 1px solid var(--line); } .g-label { font: 650 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); } .g-value { font: 800 1.32rem/1.15 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .g-warn { color: var(--warn); } .g-none { font: 500 .82rem/1.3 var(--sans); color: var(--ink-3); letter-spacing: 0; } .buy-box { position: sticky; top: 6.5rem; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 1.75rem; background: var(--surface); box-shadow: none; display: grid; justify-items: center; gap: .1rem; } .buy-box .btn { margin-top: 1.15rem } .buy-box > .tiny { line-height: 1.5; } .rubric { display: grid; gap: .75rem; width: 100%; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line) } .rubric-row { display: grid; grid-template-columns: 5.9rem 1fr 1.9rem; gap: .75rem; align-items: center; font-size: .82rem } .rubric-row span:first-child { color: var(--ink-2) } .bar { height: .45rem; border-radius: 999px; background: var(--surface-3); overflow: hidden } .bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad-bright); transform-origin: left; animation: growBar .9s var(--ease) both } @keyframes growBar { from { transform: scaleX(0) } to { transform: scaleX(1) } } .pros-cons { display: grid; gap: 2.5rem 3.5rem; grid-template-columns: 1fr 1fr; margin: 2.5rem 0 } @media (max-width: 700px) { .pros-cons { grid-template-columns: 1fr } } .pros-cons > .card { background: none; border: 0; border-top: 2px solid var(--line); border-radius: 0; box-shadow: none; padding: 1.35rem 0 0; } .pros-cons > .pros { border-top-color: var(--good); } .pros-cons > .cons { border-top-color: var(--bad); } .pros-cons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem } .pros-cons li { display: flex; gap: .7rem; font-size: .95rem; line-height: 1.6; color: var(--ink-2) } .pros-cons li::before { flex: 0 0 auto; font-weight: 800 } .pros h3, .cons h3 { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 1rem; } .pros h3 { color: var(--good) } .cons h3 { color: var(--bad) } .pros li::before { content: "\2713"; color: var(--good) } .cons li::before { content: "\2715"; color: var(--bad) } /* .prose is defined in full further down — it serves the guides and the review body. */ /* --------------------------------------------------------------- tables */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0 2.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-1); } table.data { width: 100%; border-collapse: collapse; font-size: .9rem } table.data th, table.data td { padding: .82rem 1rem; text-align: left } table.data thead th { font: 800 .68rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; } table.data tbody tr + tr th, table.data tbody tr + tr td { border-top: 1px solid var(--line) } table.data tbody th { font-weight: 650; color: var(--ink-2); font-size: .85rem } table.data tbody tr { transition: background .12s var(--ease) } table.data tbody tr:hover { background: var(--surface-2) } /* ------------------------------------------------------------------- ugc */ .ugc-meta { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; font-size: .78rem; color: var(--ink-3) } .ugc-meta strong { color: var(--ink); font-weight: 650; font-size: .88rem } .badge-verified { color: var(--good); font: 800 .65rem/1 var(--sans); letter-spacing: .07em; background: var(--good-soft); padding: .24rem .45rem; border-radius: .3rem } /* ---------------------------------------------------------------- forms */ label { display: block; margin-bottom: 1rem; font-size: .84rem; font-weight: 650; color: var(--ink-2) } label.check { display: flex; gap: .55rem; align-items: center; font-weight: 500; color: var(--ink) } input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], select, textarea { width: 100%; margin-top: .35rem; padding: .65rem .78rem; font: 400 .93rem/1.5 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: inset 0 1px 2px rgba(10,14,26,.04); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } input:hover, select:hover, textarea:hover { border-color: var(--ink-3) } input:focus, select:focus, textarea:focus { border-color: var(--a1); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 18%, transparent); } textarea { min-height: 7.5rem; resize: vertical } fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; margin: 0 0 1.5rem; background: var(--surface) } legend { font: 800 .7rem/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); padding: 0 .45rem } .field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)) } .note { padding: .95rem 1.2rem; border-radius: var(--r-sm); font-size: .88rem; line-height: 1.6; margin: 1.25rem 0; border: 1px solid var(--line); border-left-width: 3px } .note-good { background: var(--good-soft); border-color: var(--good) } .note-warn { background: var(--warn-soft); border-color: var(--warn) } .note-bad { background: var(--bad-soft); border-color: var(--bad) } /* ============================================================================ FILTERS Was one 999px pill holding six identical chips. Price is one-of-four and the includes are any-of-two, but both looked the same, so the control gave no clue which choices were exclusive. Now: a segmented control for the radio group, a checkbox toggle for each independent option. ========================================================================== */ /* Shared shell: the JS auto-submit hook, and the surface both bars sit on. /compare uses this as a single inline row, so the shell stays neutral and the stacked-group layout is a modifier. */ .filter-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .9rem 1.1rem; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--sh-1); } .filter-bar .fb-label { font: 700 .655rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); padding: 0 .35rem; } /* The global `select` rule adds a .35rem top margin for stacked form fields, which left the selects sitting low against the label and button in this row. */ .filter-bar select { margin-top: 0; } .filter-bar label { margin-bottom: 0; } /* Ranking pages: labelled groups, so items align on their controls' baseline. */ .filter-bar.fb-groups { gap: 1.6rem; align-items: flex-end; padding: 1rem 1.15rem; } .filter-form { margin: 2rem 0 1.5rem; } /* fieldset stays `display: block` — `legend` inside a grid or flex fieldset is laid out inconsistently across browsers. The global `fieldset` rule also sets a white background and the global `label` rule a 1rem bottom margin, which drew a white slab behind each group and left dead space under the controls. Both have to be cleared here. */ .fgroup { border: 0; margin: 0; padding: 0; background: none; } .fseg-o, .ftog { margin-bottom: 0; } .fgroup legend { display: block; padding: 0; margin-bottom: .5rem; font: 700 .655rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); } /* ------------------------------------------------- segmented control (one of) */ .fseg { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--sh-1); } .fseg-o { position: relative; cursor: pointer; padding: .52rem .85rem; font: 650 .82rem/1 var(--sans); color: var(--ink-2); white-space: nowrap; transition: color .15s var(--ease), background-color .15s var(--ease); } .fseg-o:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .fseg-o:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .fseg-o + .fseg-o { border-left: 1px solid var(--line); } .fseg-o input { position: absolute; opacity: 0; width: 0; height: 0; } .fseg-o:hover { color: var(--ink); background: var(--surface-2); } /* `.on` is server-rendered; `:has` makes the control respond to the click immediately, before the auto-submit round trip. */ .fseg-o.on, .fseg-o:has(input:checked) { color: #fff; background: var(--a1); } /* A --line divider against the filled segment would show as a pale sliver. */ .fseg-o.on + .fseg-o, .fseg-o:has(input:checked) + .fseg-o { border-left-color: var(--a1); } .fseg-o:has(input:focus-visible) { outline: 2px solid var(--a1); outline-offset: -2px; z-index: 1; } /* ------------------------------------------------------ toggles (any of) */ .ftogs { display: flex; flex-wrap: wrap; gap: .4rem; } .ftog { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .78rem .48rem .6rem; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-1); font: 650 .82rem/1 var(--sans); color: var(--ink-2); white-space: nowrap; transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease); } .ftog input { position: absolute; opacity: 0; width: 0; height: 0; } .ftog i { /* a real checkbox affordance */ flex: none; width: .95rem; height: .95rem; border-radius: .25rem; border: 1.5px solid var(--line-2); background: var(--surface); display: grid; place-items: center; transition: background-color .15s var(--ease), border-color .15s var(--ease); } .ftog i::after { content: "\2713"; font-size: .6rem; font-weight: 700; line-height: 1; color: #fff; opacity: 0; transition: opacity .12s var(--ease); } .ftog:hover { color: var(--ink); border-color: var(--ink-3); } /* Toggles fill with the accent tint rather than solid accent, so they stay visually distinct from the exclusive segmented control above. */ .ftog.on, .ftog:has(input:checked) { color: var(--a1); background: var(--accent-soft); border-color: var(--accent-line); } .ftog.on i, .ftog:has(input:checked) i { background: var(--a1); border-color: var(--a1); } .ftog.on i::after, .ftog:has(input:checked) i::after { opacity: 1; } .ftog:has(input:focus-visible) { outline: 2px solid var(--a1); outline-offset: 2px; } /* ------------------------------------------------------------- result count */ .fresult { margin-left: auto; display: flex; align-items: center; gap: .8rem; padding-bottom: .15rem; } .fresult-n { font: 500 .785rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; } .fresult-n b { font-weight: 800; color: var(--ink); } .fclear { display: inline-flex; align-items: center; gap: .35rem; padding: .46rem .68rem; font: 650 .78rem/1 var(--sans); color: var(--ink-2); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); transition: color .15s var(--ease), border-color .15s var(--ease); } .fclear span { font-size: .68rem; } .fclear:hover { color: var(--warn); border-color: var(--warn); } @media (max-width: 780px) { .filter-bar.fb-groups { gap: 1.1rem; padding: .9rem 1rem; } .fb-groups .fgroup, .fb-groups .fseg { width: 100%; } .fseg { display: flex; } .fseg-o { flex: 1; text-align: center; padding: .52rem .5rem; } .fresult { margin-left: 0; width: 100%; padding-top: .9rem; border-top: 1px solid var(--line); } .fclear { margin-left: auto; } } /* ---------------------------------------------------------------- cta band */ /* Vivid accent, NOT near-black: the footer below is already near-black, and two dark bands touching read as one muddy slab with a seam in it. */ .cta-band { position: relative; overflow: hidden; isolation: isolate; margin-top: 4.5rem; padding: 3.75rem 0; background: linear-gradient(135deg, #4338ca 0%, #6d5cf7 48%, #8b5cf6 100%); color: #fff; text-align: center; } .cta-band::after { /* faint grid so the flat gradient has texture */ content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 20%, transparent 78%); } .cta-band h2 { margin-top: 0; color: #fff } .cta-band p { color: #e2e0ff; max-width: 48ch; margin-inline: auto } .cta-band .aurora { display: none } /* ----------------------------------------------------------------- admin */ .admin-shell { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh } @media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr } } .admin-side { background: var(--surface-2); border-right: 1px solid var(--line); padding: 1.5rem 1.15rem } .admin-side a { display: block; padding: .52rem .72rem; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: .89rem; font-weight: 600; margin-bottom: .15rem; transition: background .12s var(--ease), color .12s var(--ease) } .admin-side a:hover { background: var(--surface-3); color: var(--ink) } .admin-side a.on { color: #fff; background: var(--grad); box-shadow: var(--sh-glow) } .admin-main { padding: 2rem 2.5rem 4rem; max-width: 1120px } @media (max-width: 640px) { .admin-main { padding: 1.35rem } } .admin-main > h1 { font-size: 1.8rem; margin-bottom: 1.25rem } .kpi-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin-bottom: 1.75rem } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.3rem; box-shadow: var(--sh-1) } .kpi b { display: block; font-family: var(--display); font-size: 1.95rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums } .kpi span { font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); font-weight: 700 } .spark { display: flex; align-items: flex-end; gap: 2px; height: 4rem; margin-top: .8rem } .spark i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--grad); opacity: .85 } .spark i:hover { opacity: 1 } .pill { display: inline-block; padding: .2rem .58rem; border-radius: 999px; font: 800 .67rem/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase } .pill-live { background: var(--good-soft); color: var(--good) } .pill-draft { background: var(--surface-3); color: var(--ink-3) } /* ---------------------------------------------------------------- motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { transition: none !important; animation: none !important } .js-anim .reveal { opacity: 1; transform: none } .btn:hover, .host-row:hover, .cat-card:hover, .spotlight:hover { transform: none } } /* --------------------------------------------------- hero: the renewal gap */ /* Replaces the old fake uptime sparklines. Two bars per host: published intro price vs published renewal price, scaled against the largest on show. */ .gap-row { display: grid; grid-template-columns: 1.85rem minmax(4.5rem, auto) 1fr 2.6rem; gap: .7rem; align-items: center; padding: .62rem .65rem; border-radius: .6rem; transition: background .2s var(--ease); } .gap-row:hover { background: rgba(255,255,255,.05); } .gap-bars { display: grid; gap: 3px; min-width: 0; } .gap-bar { display: flex; align-items: center; justify-content: flex-end; height: .82rem; width: var(--w); min-width: 2.6rem; border-radius: 3px; padding-right: .3rem; transform: scaleX(0); transform-origin: left; animation: gapGrow .55s var(--ease) forwards; animation-delay: var(--d, 0ms); } .gap-bar b { font: 700 .62rem/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); } @keyframes gapGrow { to { transform: scaleX(1) } } .gap-intro { background: linear-gradient(90deg, #22d3ee, #06b6d4); } .gap-renew-hot { background: linear-gradient(90deg, #f59e0b, #ef4444); } .gap-renew-flat { background: linear-gradient(90deg, #6d5cf7, #8b5cf6); } .gap-mult { font: 800 .76rem/1 var(--sans); text-align: right; font-variant-numeric: lining-nums tabular-nums; } .gap-mult.is-hot { color: #fbbf24; } .gap-mult.is-flat { color: #6ee7c8; font-weight: 700; font-size: .68rem; } .gap-key { display: inline-flex; align-items: center; gap: .35rem; } .gap-key i { width: .6rem; height: .6rem; border-radius: 2px; display: block; } .gap-key .k-intro { background: #06b6d4; } .gap-key .k-renew { background: #ef4444; } .gap-caveat { margin-left: auto; opacity: .8; } /* ============================================================================ REVIEW PAGE ========================================================================== */ /* ------------------------------------------------------------ chapter nav */ /* Long review pages need a spine. Sticks under the header, highlights the section you are in, and carries a CTA so the buy button never scrolls away. */ .chapter-nav { position: sticky; top: 4.4rem; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-block: 1px solid var(--line); margin: 2.5rem 0 2rem; } .chapter-inner { display: flex; align-items: center; gap: .3rem; min-height: 3.35rem; overflow-x: auto; scrollbar-width: none; } .chapter-inner::-webkit-scrollbar { display: none; } .chapter-label { font: 700 .72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding-right: .9rem; margin-right: .3rem; border-right: 1px solid var(--line); white-space: nowrap; flex: 0 0 auto; } .chapter-inner a:not(.chapter-cta) { padding: .45rem .8rem; border-radius: var(--r-sm); white-space: nowrap; font: 600 .87rem/1 var(--sans); color: var(--ink-2); text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); } .chapter-inner a:not(.chapter-cta):hover { background: var(--surface-3); color: var(--ink); } .chapter-inner a.is-current { color: var(--a1); background: var(--accent-soft); } .chapter-cta { margin-left: auto; flex: 0 0 auto; } @media (max-width: 720px) { .chapter-label, .chapter-cta { display: none } } .g-none { font: 500 .82rem/1.3 var(--sans); color: var(--ink-3); letter-spacing: 0; } /* --------------------------------------------------------- cost-over-time */ .cost-module { display: grid; gap: 1.25rem; } .cost-years { display: grid; grid-template-columns: 1fr 1fr minmax(0, .85fr); gap: 1.25rem; } @media (max-width: 900px) { .cost-years { grid-template-columns: 1fr } } .cost-year, .cost-total { display: grid; gap: .5rem; align-content: start; padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .cost-total { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: var(--sh-2); } .cy-label { font: 700 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); } .cy-amount, .ct-amount { font-family: var(--display); font-weight: 700; font-size: 2.1rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; } .cy-amount.is-hot { color: var(--warn); } .ct-amount { font-size: 2.4rem; } .cy-bar { display: block; height: .5rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .cy-fill { display: block; height: 100%; width: var(--w); border-radius: 999px; transform-origin: left; animation: growBar .8s var(--ease) both; } .cy-intro { background: linear-gradient(90deg, #22d3ee, #06b6d4); } .cy-hot { background: linear-gradient(90deg, #f59e0b, #ef4444); } .cy-flat { background: var(--grad-bright); } .cy-rate { font-size: .82rem; color: var(--ink-2); } .cy-rate b { color: var(--warn); } .ct-note { font-size: .82rem; color: var(--ink-2); min-height: 2.4em; } .cost-total .btn { margin-top: .35rem; } .cost-context { margin: 0; padding: 1rem 1.25rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: .9rem; line-height: 1.6; color: var(--ink-2); } .cost-context strong { color: var(--ink); } .cost-caveat { margin: 0; font-size: .78rem; color: var(--ink-3); } /* -------------------------------------------------------------- spec grid */ /* Replaces a two-column key/value table, which reads as raw database output. */ .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .spec-item { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; gap: .1rem .75rem; align-items: center; padding: 1.15rem 1.35rem; background: var(--surface); transition: background .15s var(--ease); } .spec-item:hover { background: var(--surface-2); } .spec-icon { grid-row: 1 / 3; font-size: 1.15rem; opacity: .75; } .spec-label { font: 650 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); } .spec-value { font: 600 .95rem/1.4 var(--sans); color: var(--ink); } /* ------------------------------------------------------------- plan cards */ .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.25rem; } .plan-card { position: relative; display: grid; align-content: start; gap: .35rem; padding: 1.6rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .plan-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); } .plan-card.is-featured { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: var(--sh-2); } .plan-flag { position: absolute; top: -.7rem; left: 1.4rem; padding: .2rem .6rem; border-radius: 999px; color: #fff; background: var(--grad); font: 800 .62rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .1em; box-shadow: var(--sh-glow); } .plan-name { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; margin: 0; letter-spacing: -.02em; } .plan-price { display: flex; align-items: baseline; gap: .25rem; } .pp-now { font-family: var(--display); font-weight: 700; font-size: 2.05rem; line-height: 1; letter-spacing: -.035em; font-variant-numeric: lining-nums tabular-nums; } .pp-per { font-size: .8rem; color: var(--ink-3); } .plan-renew { font-size: .84rem; color: var(--ink-2); } .plan-renew.is-hot { color: var(--warn); } .plan-renew strong { font-weight: 700; } .plan-term { font-size: .74rem; color: var(--ink-3); } .plan-specs { list-style: none; margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .4rem; } .plan-specs li { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; } .plan-specs span { color: var(--ink-3); } .plan-specs b { font-weight: 650; text-align: right; } .plan-note { margin: .8rem 0 0; padding: .5rem .7rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--a1); font: 600 .78rem/1.4 var(--sans); } .plan-card .btn { margin-top: 1rem; } /* ---------------------------------------------------------- reviews layout */ @media (max-width: 900px) { .reviews-layout { grid-template-columns: 1fr } } /* Empty state: fills the column instead of leaving a hole beside a tall form. */ /* ------------------------------------------------------------- alt cards */ .alt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; } .alt-card { display: grid; align-content: start; gap: .55rem; text-decoration: none; color: inherit; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .alt-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--accent-line); color: inherit; } .alt-top { display: flex; align-items: center; gap: .65rem; } .alt-name { font: 700 1.05rem/1.2 var(--sans); letter-spacing: -.025em; flex: 1; min-width: 0; } .alt-score { font: 800 .82rem/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--a1); background: var(--accent-soft); padding: .28rem .45rem; border-radius: .35rem; } .alt-tag { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--ink-3); } .alt-prices { display: flex; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-block: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); } .alt-prices b { font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; } .alt-renew b { color: var(--warn); } .alt-why { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); } .alt-card .arrow { margin-top: .35rem; font: 700 .8rem/1 var(--sans); color: var(--a1); display: inline-flex; gap: .35rem; align-items: center; } .alt-card .arrow span { transition: transform .25s var(--spring); } .alt-card:hover .arrow span { transform: translateX(4px); } /* ============================================================================ HEADER Slim dark utility bar -> sticky frosted nav with a Rankings mega-menu -> disclosure strip. Three tiers so the commercial disclosure stays visible without competing with navigation. ========================================================================== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .7rem 1.1rem; background: var(--ink); color: #fff; border-radius: 0 0 var(--r-sm) 0; font: 650 .88rem/1 var(--sans); } .skip-link:focus { left: 0; color: #fff; } /* ------------------------------------------------------------- utility bar */ .util-bar { background: #070a14; color: #9aa6bf; font-size: .76rem; } .util-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.35rem; flex-wrap: wrap; } .util-left { display: inline-flex; align-items: center; gap: .5rem; letter-spacing: .01em; } .util-right { display: inline-flex; align-items: center; gap: .8rem; } .util-right a { color: #b6c0d6; text-decoration: none; } .util-right a:hover { color: #fff; } .util-sep { width: 1px; height: .85rem; background: rgba(255,255,255,.15); } .util-badge { display: inline-flex; align-items: center; padding: .12rem .5rem; border-radius: 999px; font: 700 .66rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #6ee7c8; background: rgba(110,231,200,.12); border: 1px solid rgba(110,231,200,.25); } @media (max-width: 700px) { .util-right a, .util-sep { display: none } } /* ---------------------------------------------------------------- main nav */ .site-head { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease), background .25s var(--ease); } .site-head.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 30px -14px rgba(10,14,26,.25); background: color-mix(in srgb, var(--surface) 94%, transparent); } .head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.4rem; } .brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); } .brand-mark { width: 2.15rem; height: 2.15rem; flex: 0 0 auto; border-radius: .62rem; box-shadow: var(--sh-glow); transition: transform .3s var(--spring); } .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); } /* Wordmark. Larger and set tighter than body copy so it reads as a mark rather than as a heading, with the two words weighted differently — "Host" lighter, "Cliff" at full weight. That is not decoration: the cliff is what the site is about and what the name refers to, so the emphasis falls where the meaning is. Rendered by .brand-name b, which the header and footer wrap around the second word; if it is ever a single word the whole thing simply renders at the lighter weight and still works. */ .brand-name { font-family: var(--display); font-weight: 500; font-size: 1.42rem; letter-spacing: -.035em; font-variation-settings: "SOFT" 0, "WONK" 0; white-space: nowrap; } .brand-name b { font-weight: 800; /* No negative margin here. An earlier version pulled the words together by -.06em, which closed up the space in "Host Cliff" and made it read as one word again — the opposite of the point. The space stays a space. */ } .main-nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; } .nav-item { display: inline-flex; align-items: center; gap: .3rem; padding: .48rem .8rem; border-radius: var(--r-sm); font: 600 .9rem/1 var(--sans); color: var(--ink-2); background: none; border: 0; cursor: pointer; text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease); } .nav-item:hover, .nav-item[aria-expanded="true"] { background: var(--surface-3); color: var(--ink); } .nav-item.on { color: var(--a1); background: var(--accent-soft); } .caret { font-size: .62rem; opacity: .6; transition: transform .2s var(--ease); } .nav-item[aria-expanded="true"] .caret { transform: rotate(180deg); } .nav-cta { margin-left: .6rem; } /* ---------------------------------------------------------------- mega menu */ .has-mega { position: relative; } .mega { position: absolute; top: calc(100% + .7rem); left: 50%; transform: translateX(-50%); width: min(58rem, calc(100vw - 3rem)); z-index: 70; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; animation: megaIn .18s var(--ease); } @keyframes megaIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px) } } .mega[hidden] { display: none; } .mega-inner { display: grid; grid-template-columns: 1fr 15rem; } .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: 1rem; } .mega-item { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem; border-radius: var(--r-sm); text-decoration: none; color: inherit; transition: background .15s var(--ease); } .mega-item:hover { background: var(--surface-2); color: inherit; } .mega-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: .55rem; font-size: .95rem; background: var(--surface-2); border: 1px solid var(--line); } .mega-item:hover .mega-icon { border-color: var(--accent-line); background: var(--accent-soft); } .mega-text { display: grid; gap: .15rem; min-width: 0; } .mega-title { font: 650 .92rem/1.3 var(--sans); color: var(--ink); } .mega-desc { font-size: .78rem; line-height: 1.45; color: var(--ink-3); } .mega-pick { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; font: 650 .72rem/1 var(--sans); color: var(--ink-2); } .pick-chip { --bc: var(--a1); display: grid; place-items: center; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border-radius: .3rem; background: linear-gradient(150deg, color-mix(in srgb, var(--bc) 80%, white), var(--bc)); color: #fff; font: 800 .5rem/1 var(--sans); letter-spacing: -.02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); } .mega-side { padding: 1.35rem 1.35rem 1.5rem; background: var(--surface-2); border-left: 1px solid var(--line); } @media (max-width: 900px) { .mega-inner { grid-template-columns: 1fr } .mega-side { border-left: 0; border-top: 1px solid var(--line) } } /* --------------------------------------------------------- mobile nav panel */ .nav-toggle { display: none; margin-left: auto; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; padding: 0; place-items: center; gap: 4px; flex-direction: column; } .nav-toggle span { display: block; width: 1.05rem; height: 1.8px; border-radius: 2px; background: var(--ink); transition: transform .22s var(--ease), opacity .18s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg) } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg) } @media (max-width: 860px) { /* * The header's backdrop-filter has to go at this width, and this is the whole mobile nav bug. * * backdrop-filter creates a containing block for position:fixed descendants. The nav panel * lives inside
, so its `position: fixed` resolved against the HEADER — 71px tall — * instead of the viewport. The result was a 49px panel with `top: 156px` measured from the * header's own box: the menu appeared to open, showed one row, and let the page underneath * show straight through it. * * Nothing in the nav CSS or JS was wrong, which is why reading them found nothing. Only asking * the browser which ancestors establish a containing block located it. * * The background goes fully opaque here because the blur was what made an 84%-transparent * header read as deliberate rather than broken. */ .site-head, .site-head.is-stuck { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-toggle { display: flex; } .main-nav { position: fixed; inset: auto 0 0 0; top: var(--head-bottom, 7rem); flex-direction: column; align-items: stretch; gap: .2rem; margin: 0; padding: 1rem 1.25rem 2rem; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--sh-3); overflow-y: auto; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); } .main-nav.open { transform: none; opacity: 1; pointer-events: auto; } .nav-item { padding: .8rem .9rem; font-size: 1rem; justify-content: space-between; } .nav-cta { margin: .7rem 0 0; justify-content: center; } .mega { position: static; transform: none; width: auto; animation: none; border: 0; box-shadow: none; border-radius: 0; background: transparent; } .mega-inner { grid-template-columns: 1fr } .mega-grid { grid-template-columns: 1fr; padding: .25rem 0 .5rem } .mega-side { display: none } } /* -------------------------------------------------------------- disclosure */ .disclosure { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .78rem; line-height: 1.5; color: var(--ink-2); } .disclosure-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; flex-wrap: wrap; } .disclosure strong { color: var(--ink); font-weight: 650; } .disclosure a { white-space: nowrap; font-weight: 600; text-decoration: none; } .disclosure a:hover { text-decoration: underline; } /* ============================================================================ FOOTER - dark, four columns, real data, working newsletter. ========================================================================== */ .site-foot { position: relative; isolation: isolate; overflow: hidden; margin-top: 5rem; padding: 3.75rem 0 1.75rem; background: #070a14; color: #c2cbdf; font-size: .9rem; } /* The CTA band is the last child of
; the footer is a sibling of
, not of the band. So `.cta-band + .site-foot` never matched on any page and every band was followed by an 80px white sliver before the dark footer — which read as a rendering fault rather than a gap. Select it for real. */ /* `~`, not `+`: the fixed-position compare drawer is a DOM sibling sitting between
and the footer, so the adjacent combinator cannot reach it. */ main:has(> .cta-band:last-child) ~ .site-foot { margin-top: 0; } .foot-glow { position: absolute; inset: -55% 25% auto -15%; height: 32rem; z-index: -1; background: radial-gradient(ellipse at 35% 45%, rgba(79,70,229,.30), transparent 62%); pointer-events: none; } /* ---------------------------------------------------------- stats strip -- */ /* Was computed in the partial and never rendered. */ .foot-stats { /* Columns come from the item count, which the footer sets in --cols. It was hardcoded to 4 while the markup emits 5 whenever a price check exists, so the fifth wrapped onto its own row, took a left border from `li + li`, and sat next to three empty cells. */ display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 0; margin: 0 0 2.75rem; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); } .foot-stats li { display: grid; gap: .2rem; padding: 1.1rem 1.25rem 1.1rem 0; } .foot-stats li + li { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.09); } .foot-stats b { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.035em; color: #fff; font-variant-numeric: lining-nums tabular-nums; } .foot-stats span { font-size: .74rem; line-height: 1.3; color: #77839c; } @media (max-width: 780px) { /* Two columns, so --cols is overridden. Every ODD item is first in its row and must lose the left border — nth-child(3) alone was right for four items and left a stray border on the fifth, which is the same off-by-one the desktop layout had. Odd works for any count. */ .foot-stats { grid-template-columns: 1fr 1fr; } .foot-stats li:nth-child(odd) { padding-left: 0; border-left: 0; } .foot-stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.09); } } .foot-grid { display: grid; grid-template-columns: 1.55fr .9fr 1fr .9fr; gap: 2.75rem; padding-bottom: 2.5rem; } @media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem } .foot-brand { grid-column: 1 / -1 } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr } } .foot-logo { color: #fff; margin-bottom: 1rem; } .foot-logo .brand-name { color: #fff; } .foot-blurb { max-width: 40ch; font-size: .86rem; line-height: 1.65; color: #98a3ba; } /* Chips rather than a run of text ticks, which wrapped 2 + 1 and read as prose. */ .foot-proof { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.15rem 0 0; } .fp-item { display: inline-flex; align-items: center; gap: .38rem; font: 600 .715rem/1 var(--sans); color: #a7b2c9; padding: .36rem .55rem .36rem .48rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); border-radius: .3rem; } .fp-item::before { content: "\2713"; font-size: .72rem; color: #6ee7c8; font-weight: 700; } .foot-col { display: grid; align-content: start; gap: .1rem; } .foot-title { font: 700 .7rem/1 var(--sans); text-transform: uppercase; letter-spacing: .13em; color: #6f7c96; margin: 0 0 .95rem; } .foot-col a { display: block; padding: .3rem 0; font-size: .865rem; color: #b3bdd2; text-decoration: none; transition: color .15s var(--ease); } .foot-col a:hover { color: #fff; } .foot-host { display: flex !important; align-items: center; gap: .55rem; } .fh-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fh-score { font: 700 .74rem/1 var(--sans); color: #6ee7c8; font-variant-numeric: tabular-nums; background: rgba(110,231,200,.1); padding: .18rem .38rem; border-radius: .28rem; } /* ------------------------------------------------------------- newsletter */ /* Its own panel. It was the last thing in the tallest column — the only element in the footer asking for an action, in the least prominent spot. */ .sub-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 1.5rem 2.5rem; align-items: center; margin: 0 0 2.5rem; padding: 1.5rem 1.65rem; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-lg); } @media (max-width: 860px) { .sub-panel { grid-template-columns: 1fr; gap: 1.1rem; } } .sub-label { display: block; margin-bottom: .3rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.022em; color: #fff; } .sub-sub { margin: 0; font-size: .82rem; line-height: 1.6; color: #8f9bb4; max-width: 46ch; } .sub-row { display: flex; gap: .45rem; } .sub-row input { flex: 1; min-width: 0; margin: 0; padding: .58rem .75rem; font: 400 .88rem/1.4 var(--sans); color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-sm); box-shadow: none; } .sub-row input::placeholder { color: #6f7c96; } .sub-row input:hover { border-color: rgba(255,255,255,.28); } .sub-row input:focus { border-color: var(--a2); outline: none; box-shadow: 0 0 0 3px rgba(139,92,246,.25); } .sub-note { display: block; margin-top: .5rem; font-size: .74rem; color: #77839c; } .sub-ok { color: #6ee7c8; } .sub-bad { color: #fb7185; } /* ----------------------------------------------------------------- legal */ .foot-legal { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem 2.5rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.09); padding-top: 1.4rem; font-size: .76rem; line-height: 1.6; color: #6f7c96; } /* The markup used a bare

, so this max-width never applied and the note ran the full remaining width. */ .foot-legal-note { margin: 0; max-width: 62ch; text-align: right; } @media (max-width: 860px) { .foot-legal-note { text-align: left; } } /* ------------------------------------------------------------- provenance */ /* A price with no date and no source is just a rumour. */ .provenance { margin: 2rem 0 0; padding: 1.2rem 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: .85rem; line-height: 1.6; color: var(--ink-2); } .prov-title { display: block; font: 700 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: .8rem; } .provenance p { margin: 0 0 .45rem; } .provenance strong { color: var(--ink); font-weight: 650; } .prov-foot { margin: .9rem 0 0 !important; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .8rem; } /* ------------------------------------------------------- numeral hygiene */ /* Some display faces default to old-style (descending) figures, which reads as a bug in data contexts — "4 of 7" dips below the baseline. Force lining, tabular figures everywhere a number is presented as data. */ .stat b, .ring b, .price-cell b, .spotlight-price, .kpi b, .g-value, .fc-value, .mon-val, .sm-val, .monitor-foot b, table.data td, table.data th { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; } /* ------------------------------------------------------- real logo variants */ /* Fetched logos are transparent-background PNGs, so they need a light plate to stay legible — including inside the dark hero chart and footer. */ .mon-logo.has-img, .pick-chip.has-img { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); padding: 2px; overflow: hidden; } .mon-logo.has-img img, .pick-chip.has-img img { width: 100%; height: 100%; object-fit: contain; display: block; } /* --------------------------------------------------------- "see all" strip */ /* Sits under a truncated ranking. States the number withheld rather than just trailing off — a list that silently stops reads as a bug or as the whole set. */ .see-all { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.25rem; padding: 1.35rem 1.6rem; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); } .sa-count { display: block; font: 700 1.02rem/1.3 var(--display); letter-spacing: -.025em; color: var(--ink); } .sa-note { display: block; font-size: .86rem; color: var(--ink-2); margin-top: .15rem; } /* ---------------------------------------------------- full review + aside */ .review-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; align-items: start; } @media (max-width: 920px) { .review-body { grid-template-columns: 1fr; gap: 1.75rem } } .review-body .prose { max-width: 66ch; } .review-aside { display: grid; gap: 1rem; position: sticky; top: 9rem; } @media (max-width: 920px) { .review-aside { position: static } } .review-aside .provenance { margin: 0; font-size: .8rem; } .aside-cta { display: grid; gap: .5rem; padding: 1.2rem 0 0; background: none; border: 0; box-shadow: none; border-top: 1px solid var(--line); } .ac-label { font: 700 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); margin-bottom: .2rem; } /* The old .contact-layout / .ca-* rules lived here. The page now uses .ct-* further down — see the CONTACT block at the end of this file. */ /* ---------------------------------------------------------- icon system */ .ico { display: block; flex: 0 0 auto; } /* The old compare-hub picker (.cmp-picker / .cp-*) lived here. Both pages now render partials/vs-picker, so those rules were dead — see .vs-picker below. */ /* --------------------------------------------------------- comparison cards */ .cmp-card { display: grid; align-content: start; gap: .7rem; text-decoration: none; color: inherit; box-shadow: none; } .cmp-card:hover { box-shadow: var(--sh-2); } .cc-brands { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .cc-brand { display: inline-flex; align-items: center; gap: .4rem; font: 700 .98rem/1.2 var(--sans); letter-spacing: -.025em; } .cc-vs { font-size: .78rem; color: var(--ink-3); } .cc-why { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--ink-2); } .cc-stats { display: grid; gap: .25rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); } .cc-stats b { color: var(--ink); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; } .cc-cost b { color: var(--ink); } /* ============================================================================ COMPARE PAGE Was a single 16-row table with no brand identity. Now: the two brands as objects first, then three-year cost, then a grouped spec table. ========================================================================== */ .vs-word { color: var(--ink-3); font-weight: 500; } /* ------------------------------------------------------------ head-to-head */ .vs-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; } @media (max-width: 820px) { .vs-hero { grid-template-columns: 1fr; gap: .75rem } } .vs-card { position: relative; display: grid; justify-items: center; gap: .35rem; padding: 2rem 1.6rem 1.6rem; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .vs-card.is-winner { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: var(--sh-2); } .vs-flag { position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); padding: .2rem .7rem; border-radius: 999px; white-space: nowrap; color: #fff; background: var(--grad); font: 800 .62rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .1em; box-shadow: var(--sh-glow); } .vs-card .host-logo { margin-bottom: .5rem; } .vs-name { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; margin: 0; } .vs-tag { font-size: .84rem; line-height: 1.5; color: var(--ink-3); margin: 0 0 .9rem; max-width: 26ch; } .vs-card .ring { margin-bottom: .1rem; } .vs-verdict { font: 700 .66rem/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); margin-bottom: .9rem; } .vs-price { margin-bottom: 1rem; } .vp-now { display: block; font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; } .vp-renew { display: block; font-size: .78rem; color: var(--warn); margin-top: .25rem; } .vs-card .btn { max-width: 15rem; } .vs-divider { display: grid; place-items: center; } .vs-divider span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); font: 800 .72rem/1 var(--sans); letter-spacing: .04em; color: var(--ink-3); } @media (max-width: 820px) { .vs-divider span { width: 2.2rem; height: 2.2rem; font-size: .66rem } } .c-unit { font-size: .62em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; } /* ------------------------------------------------------- three-year cost -- */ .vs-cost { display: grid; gap: 1.1rem; } .vc-row { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr auto; grid-template-areas: "name track total" ". detail detail"; gap: .35rem .9rem; align-items: center; } @media (max-width: 640px) { .vc-row { grid-template-columns: 1fr auto; grid-template-areas: "name total" "track track" "detail detail" } } .vc-name { grid-area: name; display: inline-flex; align-items: center; gap: .5rem; font: 650 .92rem/1.3 var(--sans); min-width: 0; } .vc-track { grid-area: track; display: block; height: 1.5rem; background: var(--surface-3); border-radius: .4rem; overflow: hidden; } .vc-bar { display: block; height: 100%; width: var(--w); border-radius: .4rem; background: linear-gradient(90deg, #f59e0b, #ef4444); transform-origin: left; animation: growBar .8s var(--ease) both; } .vc-bar.is-best { background: linear-gradient(90deg, #22d3ee, #06b6d4); } .vc-total { grid-area: total; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.035em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } .vc-total.is-best { color: var(--good); } .vc-detail { grid-area: detail; font-size: .78rem; color: var(--ink-3); } .vc-detail b { color: var(--warn); } /* ============================================================================ LINE BY LINE (grouped head-to-head table) Was three bare columns of text on hairlines: no container, no separation between the two brands' columns, the winner marked only by a small green tick, and no sense of magnitude — "9.5 vs 8.9" looked like "5.9 vs 8.0". ========================================================================== */ /* NB: no `overflow: hidden` on the panel — it would kill the sticky header. */ .vs-table { margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } /* --- three shared columns. One definition, so header and rows stay aligned. */ .vs-sticky-head, .vs-row { display: grid; grid-template-columns: minmax(10rem, 1.15fr) 1fr 1fr; } .vs-sticky-head { position: sticky; top: 4.4rem; z-index: 30; border-bottom: 1px solid var(--line-2); border-radius: var(--r-lg) var(--r-lg) 0 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .vs-sticky-head > * { padding: .9rem 1.1rem; } .vsh-k { align-self: center; font: 700 .655rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); } .vsh-brand { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font: 700 .92rem/1.2 var(--sans); letter-spacing: -.02em; border-left: 1px solid var(--line); } .vsh-wins { font: 700 .645rem/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--good); background: var(--good-soft); padding: .26rem .42rem; border-radius: .3rem; } /* ------------------------------------------------------------ group bands */ .vs-group-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; padding: .8rem 1.1rem; background: var(--surface-2); border-top: 1px solid var(--line); } .vg-n { font: 800 .66rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; } .vg-title { font: 700 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .13em; color: var(--a1); } .vg-note { font-size: .76rem; color: var(--ink-3); } /* ------------------------------------------------------------------ rows */ .vs-row { border-top: 1px solid var(--line); transition: background .12s var(--ease); } .vs-row > * { padding: .8rem 1.1rem; } .vs-row:hover { background: var(--surface-2); } .vr-label { font-size: .88rem; font-weight: 550; color: var(--ink-2); } .vr-label em { display: block; font-style: normal; font-size: .74rem; color: var(--ink-3); margin-top: .1rem; } /* A rule between the two brands' columns, so a value is never ambiguous. */ .vr-val { border-left: 1px solid var(--line); font-size: .92rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; } .vr-v { display: block; } .vr-val strong { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.03em; } /* The winning cell is filled, not just recoloured — in a two-way comparison "who won this row" is the whole point of the row. */ .vr-val.is-win { background: var(--good-soft); color: var(--good); font-weight: 650; } .vr-val.is-win strong { color: var(--good); } .vr-val.is-win .vr-v::after { content: " \2713"; font-size: .82em; } /* Magnitude, for the bounded rows. Grey for the loser, green for the winner, so the bar carries both the size of the gap and the outcome. */ .vr-meter { display: block; height: 3px; max-width: 5.5rem; margin-top: .45rem; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .vr-meter i { display: block; height: 100%; width: var(--w); background: var(--line-2); border-radius: 999px; } .vr-val.is-win .vr-meter i { background: var(--good); } @media (max-width: 700px) { /* Label on its own row: three columns in ~340px leaves nothing for the values. */ .vs-row { grid-template-columns: 1fr 1fr; } .vs-row > * { padding: .7rem .85rem; } .vr-label { grid-column: 1 / -1; padding-bottom: .25rem; font-weight: 700; color: var(--ink); } .vr-val:nth-of-type(1) { border-left: 0; } .vs-sticky-head { grid-template-columns: 1fr 1fr; } .vs-sticky-head > * { padding: .7rem .85rem; } .vsh-k { display: none; } .vsh-brand:nth-of-type(1) { border-left: 0; } .vsh-brand { font-size: .84rem; } } /* ------------------------------------------------------------ plans blocks */ /* Plans compared — see the PLANS COMPARED block at the end of this file. */ /* ============================================================================ REFINEMENT PASS The page had become card-inside-card-inside-card. Premium layouts carry structure with hairlines, whitespace and type hierarchy — boxes are the fallback, not the default. These rules override the earlier card chrome. ========================================================================== */ /* ------------------------------------------------------------- icon system */ .ico { display: block; flex: 0 0 auto; } /* -------------------------------------------------------- specs: hairlines */ /* Was: a bordered grid of 8 boxed cells. Now: quiet rows with a rule between, which lets the values themselves carry the emphasis. */ .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; } .spec-item { display: grid; grid-template-columns: 1.35rem 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; align-items: baseline; padding: 1.15rem .5rem 1.15rem 0; background: none; border-bottom: 1px solid var(--line); } .spec-item:hover { background: none; } .spec-icon { grid-row: 1 / 3; color: var(--ink-3); align-self: center; } .spec-label { font: 600 .7rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); } .spec-value { font: 500 .96rem/1.45 var(--sans); color: var(--ink); letter-spacing: -.008em; } /* ------------------------------------------------- pros / cons: no boxes */ .pros-cons { gap: 2.5rem 3.5rem; margin: 2.5rem 0; } .pros-cons > .card { background: none; border: 0; border-top: 2px solid var(--line); border-radius: 0; box-shadow: none; padding: 1.35rem 0 0; } .pros-cons > .pros { border-top-color: var(--good); } .pros-cons > .cons { border-top-color: var(--bad); } .pros-cons h3 { font-size: .72rem; letter-spacing: .13em; margin-bottom: 1rem; } .pros-cons li { font-size: .95rem; line-height: 1.6; gap: .7rem; } .pros-cons ul { gap: .8rem; } /* ---------------------------------------------- method strip: no icon boxes */ .ms-icon { width: auto; height: auto; border: 0; background: none; box-shadow: none; color: var(--a1); padding-top: .1rem; } .ms-item { gap: .75rem; } .ms-title { font-weight: 600; letter-spacing: -.012em; } /* -------------------------------------------- feature cards: quieter chrome */ /* ------------------------------------------------------- chooser + mega icons */ .chip-link .ico { color: #b6c0d6; } .chip-link:hover .ico { color: #fff; } .mega-icon { width: auto; height: auto; background: none; border: 0; box-shadow: none; color: var(--ink-3); padding-top: .15rem; } .mega-item:hover .mega-icon { background: none; border: 0; color: var(--a1); } /* ------------------------------------------------------- glance: hairlines */ /* A 1px-gap grid of white cells reads as a table screenshot. Rules only. */ .glance { gap: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; margin-top: 2rem; } .glance-item { padding: 1.1rem 1.25rem 1.1rem 0; background: none; border-bottom: 1px solid var(--line); gap: .3rem; } .g-label { font-size: .68rem; letter-spacing: .11em; } .g-value { font-size: 1.32rem; letter-spacing: -.035em; } /* ------------------------------------------------------ section rhythm */ .sec { margin-top: 5rem; } .band { padding: 4.25rem 0; margin-top: 5rem; } .sec-head { margin-bottom: 1.75rem; gap: 1.25rem; } .sec-sub { margin: -1rem 0 2rem; } /* ------------------------------------------------------ verdict: quieter */ .verdict-box { background: none; border: 0; border-left: 2px solid var(--a1); border-radius: 0; padding: .25rem 0 .25rem 1.5rem; } .verdict-box::before { display: none; } .verdict-box h2 { font-size: .68rem; letter-spacing: .14em; margin-bottom: .6rem; } .verdict-box p { font-size: 1.08rem; line-height: 1.65; color: var(--ink); } /* --------------------------------------------------------- byline: quieter */ .byline { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; margin-top: 1.6rem; gap: .8rem; } .avatar { width: 2.1rem; height: 2.1rem; box-shadow: none; } /* ---------------------------------------------------- provenance: quieter */ .provenance { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.2rem 0 0; } .review-aside .provenance { border-top-color: var(--line-2); } .aside-cta { background: none; border: 0; box-shadow: none; padding: 1.2rem 0 0; border-top: 1px solid var(--line); } /* ------------------------------------------------------------ plan cards */ /* Keep the boxes here — these are purchase choices and boxes help comparison — but lighten them so they do not shout over the cost module. */ .plan-card { box-shadow: none; } .plan-card:hover { box-shadow: var(--sh-2); } .plan-note { background: none; padding: 0; color: var(--ink-2); font-weight: 500; } .plan-note::before { content: "— "; color: var(--a1); } /* --------------------------------------------------- cost module: emphasis */ .cost-year, .cost-total { box-shadow: none; } .cy-amount, .ct-amount { letter-spacing: -.04em; } .ct-amount { font-size: 2.55rem; } .cost-context { background: none; border: 0; border-left: 2px solid var(--accent-line); border-radius: 0; padding: .2rem 0 .2rem 1.25rem; } /* ------------------------------------------------------------- empty state */ /* ------------------------------------------------------------- alt cards */ .alt-card { box-shadow: none; } .alt-card:hover { box-shadow: var(--sh-2); } /* ============================================================================ FLAT-PRICE FRAMING A provider whose price never rises used to render as two identical grey numbers and a small grey caption. These rules give that case its own visual weight, so the best fact about the host is the most prominent one. ========================================================================== */ /* glance strip: sub-labels and a positive state */ .g-ok { color: var(--good); } .g-sub { display: block; margin-top: .25rem; font: 500 .72rem/1.3 var(--sans); letter-spacing: 0; color: var(--ink-3); } .g-sub-warn { color: var(--warn); } /* cost module, flat variant */ .cost-flat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; align-items: start; } @media (max-width: 900px) { .cost-flat { grid-template-columns: 1fr; } } .cf-lead { padding: 1.75rem 2rem 1.75rem 0; } .cf-compare { padding: 1.75rem 0 1.75rem 2rem; border-left: 1px solid var(--line); } @media (max-width: 900px) { .cf-lead { padding: 0 0 1.5rem; } .cf-compare { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--line); } } .cf-price { display: block; margin: .5rem 0 .75rem; font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: lining-nums tabular-nums; } .cf-per { font-family: var(--sans); font-size: .3em; font-weight: 600; color: var(--ink-3); letter-spacing: -.01em; } .cf-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: var(--good-soft); color: var(--good); font: 700 .74rem/1.4 var(--sans); letter-spacing: .01em; } .cf-copy { margin: 1.1rem 0 0; font-size: .95rem; line-height: 1.65; color: var(--ink-2); max-width: 40ch; } .cf-bar-row { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr auto; gap: .9rem; align-items: center; margin-top: .9rem; } @media (max-width: 560px) { .cf-bar-row { grid-template-columns: 1fr auto; } .cf-track { grid-column: 1 / -1; } } .cf-bar-k { font: 600 .84rem/1.35 var(--sans); color: var(--ink-2); } .cf-bar-k em { display: block; font-style: normal; font-size: .72rem; color: var(--ink-3); font-weight: 500; margin-top: .1rem; } .cf-track { height: 1.5rem; background: var(--surface-3); border-radius: .3rem; overflow: hidden; } .cf-fill { display: block; height: 100%; width: var(--w); border-radius: .3rem; transform-origin: left; } .js-anim .cf-fill { animation: growBar .8s var(--ease) both; } .cf-flat { background: linear-gradient(90deg, #22d3ee, #06b6d4); } .cf-hot { background: linear-gradient(90deg, #f59e0b, #ef4444); } .cf-bar-v { font: 800 1.05rem/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } .cf-bar-v.is-hot { color: var(--warn); } .cf-verdict { margin: 1.35rem 0 1.25rem; padding-left: 1.1rem; border-left: 2px solid var(--accent-line); font-size: .92rem; line-height: 1.65; color: var(--ink-2); } .cf-verdict strong { color: var(--ink); } /* plans: a held price is a feature, not an absence */ .plan-renew.is-flat { color: var(--good); font-weight: 650; } /* ============================================================================ READER REVIEWS Was two plain boxes and a default form with a with its five explanations listed separately in a sidebar, so you chose "Correction" in one place and read what that meant in another. The options now carry their own explanation, which also empties out most of what the sidebar was for. ========================================================================== */ .ct-sec { margin-top: 2rem; } .ct-errs { margin: .4rem 0 0; padding-left: 1.2rem; } .ct-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 1.5rem; } @media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ------------------------------------------------------------- the form */ .ct-form { display: grid; gap: 1.1rem; } .ct-form label { margin-bottom: 0; } .ct-form textarea { min-height: 9.5rem; } .ct-form .btn { justify-self: start; } .ct-legal { margin: 0; font-size: .78rem; line-height: 1.65; color: var(--ink-3); } .ct-hp { position: absolute; left: -9999px; } /* ------------------------------------------------------ topic as cards */ .ct-topics { border: 0; margin: 0; padding: 0; background: none; } .ct-topics legend { display: block; padding: 0; margin-bottom: .6rem; font: 700 .655rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); } .ct-topic-grid { display: grid; gap: .5rem; } .ct-topic { position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 1.1rem; gap: .75rem; align-items: start; margin-bottom: 0; padding: .85rem .95rem; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-1); transition: border-color .15s var(--ease), background-color .15s var(--ease); } .ct-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ct-topic:hover { border-color: var(--ink-3); } .ct-topic.on, .ct-topic:has(input:checked) { border-color: var(--a1); background: var(--accent-soft); } .ct-topic:has(input:focus-visible) { outline: 2px solid var(--a1); outline-offset: 2px; } .ct-topic-i { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .5rem; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); transition: color .15s var(--ease), background-color .15s var(--ease); } .ct-topic.on .ct-topic-i, .ct-topic:has(input:checked) .ct-topic-i { color: #fff; background: var(--a1); border-color: var(--a1); } .ct-topic-t { display: grid; gap: .15rem; min-width: 0; } .ct-topic-t b { font: 700 .9rem/1.3 var(--sans); letter-spacing: -.018em; color: var(--ink); } .ct-topic-t em { /* The global `label` rule sets font-weight 650, which the hint inherits and which made it read as bold as the option it describes. */ font-style: normal; font-weight: 400; font-size: .795rem; line-height: 1.55; color: var(--ink-2); } /* Radio affordance, drawn rather than native so it matches the card. */ .ct-topic-tick { align-self: center; justify-self: end; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .ct-topic.on .ct-topic-tick, .ct-topic:has(input:checked) .ct-topic-tick { border-color: var(--a1); box-shadow: inset 0 0 0 3.5px var(--surface), inset 0 0 0 1rem var(--a1); } /* ---------------------------------------------------------- the sidebar */ .ct-aside { display: grid; gap: .75rem; } .ct-block { padding: 1.2rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .ct-block-strong { background: var(--surface-2); } .ct-k { display: block; margin-bottom: .6rem; font: 700 .645rem/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); } .ct-block p { margin: 0; font-size: .825rem; line-height: 1.65; color: var(--ink-2); } .ct-mail { display: block; margin-bottom: .5rem; font: 700 .95rem/1.3 var(--sans); letter-spacing: -.018em; word-break: break-all; } /* What we will and will not do — stated as a list, because a paragraph buries it. */ .ct-will { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: 0; } .ct-will li { position: relative; padding: .55rem 0 .55rem 1.5rem; border-bottom: 1px solid var(--line); font-size: .825rem; line-height: 1.55; color: var(--ink-2); } .ct-will li:last-child { border-bottom: 0; } .ct-will li::before { position: absolute; left: 0; top: .6rem; font-size: .72rem; font-weight: 700; } .ct-will li.yes::before { content: "\2713"; color: var(--good); } .ct-will li.no::before { content: "\2715"; color: var(--warn); } /* ============================================================================ GUIDED FINDER (/finder) One question per screen, answers in the query string. Options are submit buttons, so the whole flow works without JavaScript and a result is a URL someone can send to a colleague. ========================================================================== */ .fd-sec { margin-top: 2rem; } /* ------------------------------------------------------------ the question */ .fd-card { max-width: 40rem; margin: 0 auto; padding: 1.9rem 2rem 1.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); } @media (max-width: 560px) { .fd-card { padding: 1.4rem 1.35rem 1.3rem; } } .fd-progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; } .fd-step { font: 700 .655rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); } .fd-dots { display: flex; gap: .3rem; } .fd-dots i { width: 1.4rem; height: .28rem; border-radius: 999px; background: var(--surface-3); } .fd-dots i.done { background: var(--accent-line); } .fd-dots i.now { background: var(--a1); } .fd-q { margin: 0 0 .4rem; font-size: clamp(1.35rem, 1.2rem + .8vw, 1.7rem); letter-spacing: -.03em; } .fd-hint { margin: 0 0 1.4rem; font-size: .875rem; line-height: 1.6; color: var(--ink-3); } /* Options are