/* ============================================ InternetArc.com — Design System Implements "Premium Editorial Arc". Every token lives in variables.css, which is loaded first on every page. This file used to re-declare a :root of its own, which silently won the cascade and overrode variables.css — that block is gone. Do not add token declarations here; edit variables.css instead. ============================================ */ /* --- Fonts --- Plus Jakarta Sans is the brand voice (headlines, labels, buttons). DM Sans is the workhorse (body, metadata) — a taller x-height and open apertures that hold up at the 18px reading size articles use. */ /* Fonts are loaded from with preconnect. An @import here would serialise the request behind this file downloading and parsing. */ /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Keyboard focus indicator (WCAG 2.4.7): a 2px primary ring with offset, the same ring inputs use, so focus reads identically everywhere. On the dark footer the indigo would disappear, so it flips to the light tone there. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } .site-footer :focus-visible { outline-color: var(--inverse-primary); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; padding: 0; font-family: var(--font-body); font-size: var(--body-md-size); line-height: 1.7; color: var(--color-text); /* Warm off-white, not pure white. Cards and the header sit on top of it in --surface-container-lowest, which is how depth is expressed here — tonal layers rather than heavy borders. */ background-color: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } /* The UA default of `margin: 1em 40px` on
was shifting every absolutely-positioned blog card image 40px right and 16px down, so the photo no longer covered its card. */ figure { margin: 0; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-dark); text-decoration: underline; } /* --- Typography --- Display sizes carry negative tracking; at 48px the default spacing reads loose and the headline stops feeling like a single object. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-primary); margin-top: 0; margin-bottom: var(--stack-md); } h1 { font-size: var(--display-lg-size); line-height: var(--display-lg-line); letter-spacing: var(--display-lg-tracking); font-weight: 700; } h2 { font-size: 32px; line-height: 40px; font-weight: 700; } h3 { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 600; } h4 { font-size: 20px; line-height: 28px; font-weight: 600; } h5 { font-size: var(--body-lg-size); line-height: var(--body-lg-line); font-weight: 600; } h6 { font-size: var(--body-md-size); line-height: var(--body-md-line); font-weight: 600; } p { margin-top: 0; margin-bottom: var(--stack-lg); color: var(--color-text); } p:last-child { margin-bottom: 0; } /* Small caps-ish label role — category chips, badges, eyebrow text */ .label-sm, .section-label, .badge, .hero-cat-label { font-family: var(--font-heading); font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: 600; letter-spacing: var(--label-sm-tracking); text-transform: uppercase; } /* Byline, dateline, reading time. Held at on-surface-variant rather than --text-muted: at 14px the muted grey is 4.35:1 and misses AA. */ .meta-info { font-family: var(--font-body); font-size: var(--meta-info-size); line-height: var(--meta-info-line); color: var(--color-text-secondary); } /* --- Container --- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-desktop); } /* The 800px reading lane. Longer than this and the eye loses the line return on an 18px body size. */ .container-narrow { max-width: var(--container-narrow); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); line-height: 1; padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius); /* 8px — buttons and inputs share this */ cursor: pointer; transition: all var(--transition-base); text-decoration: none !important; white-space: nowrap; } .btn-primary { background: var(--color-accent); color: var(--color-white) !important; border-color: var(--color-accent); } .btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Secondary is a light-grey ghost, not an outlined clone of primary — one filled purple button per view keeps the hierarchy legible. */ .btn-secondary { background: var(--surface-container-high); color: var(--on-surface) !important; border-color: transparent; } .btn-secondary:hover { background: var(--surface-container-highest); color: var(--on-surface) !important; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--color-primary) !important; border-color: var(--color-border); } .btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent) !important; } .btn-sm { padding: 0.5rem 1rem; font-size: var(--text-xs); } .btn-lg { padding: 1rem 2rem; font-size: var(--text-base); } /* --- Cards --- Elevation L1: a white plane on the warm surface, held up by a wide, very soft shadow rather than a border. Hover lifts to L2. */ .card { background: var(--surface-container-lowest); border: none; border-radius: var(--radius-lg); /* 16px */ box-shadow: var(--shadow-md); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card-body { padding: var(--stack-lg); } .card-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .card-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-sm); font-family: var(--font-heading); } .card-text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; } /* --- Affiliate Disclosure Banner --- A quiet slate bar, centred above the headline. Deliberately low-contrast as a *background* — but the text itself is 8.5:1, because an FTC disclosure has to stay clear and conspicuous even while it recedes visually. Understated container, fully legible copy. */ .affiliate-banner { background: #F1F5F9; border: none; border-radius: var(--radius); padding: var(--stack-sm) var(--stack-md); margin-bottom: var(--stack-lg); text-align: center; font-family: var(--font-body); font-size: var(--meta-info-size); line-height: var(--meta-info-line); color: var(--color-text-secondary); } .affiliate-banner strong { color: var(--color-text); font-weight: 500; } /* --- Author Box --- */ .author-box { display: flex; gap: var(--space-lg); align-items: flex-start; padding: var(--space-xl); background: var(--color-bg); border-radius: var(--radius-lg); margin: var(--space-2xl) 0; } .author-avatar { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--color-accent); display: flex; align-items: center; justify-content: center; color: var(--color-white); font-weight: 700; font-size: var(--text-xl); flex-shrink: 0; font-family: var(--font-heading); } .author-info { flex: 1; } .author-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-base); color: var(--color-primary); margin-bottom: var(--space-xs); } .author-bio { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; } /* --- Breadcrumbs --- */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg); padding: var(--space-sm) 0; } .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-accent); } .breadcrumbs .separator { color: var(--color-border); font-size: var(--text-xs); } .breadcrumbs .current { color: var(--color-text-secondary); font-weight: 500; } /* --- Article Meta --- */ .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .article-meta .author-link { color: var(--color-accent); font-weight: 500; text-decoration: none; } .article-meta .author-link:hover { text-decoration: underline; } .article-meta .date { color: var(--color-text-muted); } /* Category chips are pills — the fully-rounded shape separates "this is a label" from "this is a button", which share a page constantly here. */ .article-meta .category-tag { display: inline-block; padding: 0.25rem 0.75rem; background: var(--primary); color: var(--on-primary) !important; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-sm-tracking); text-decoration: none !important; } /* --- Featured Badge / Tags --- */ .tag { display: inline-block; padding: 0.25rem 0.75rem; background: var(--secondary-container); color: var(--on-primary-fixed) ; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-sm-tracking); } /* --- Section Titles --- */ .section-title { font-family: var(--font-heading); font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 700; color: var(--color-primary); margin-bottom: var(--stack-lg); padding-bottom: var(--stack-sm); border-bottom: 2px solid var(--primary); display: inline-block; } /* --- Hero Section --- Large background sections use the pale lilac, not a dark slab. A review site's first screen should read as a page you can trust and read, not a SaaS landing banner — the restraint is the premium signal. */ .hero-section { background: var(--background-subtle); color: var(--on-surface); padding: var(--section-gap) 0; margin-bottom: var(--section-gap); position: relative; overflow: hidden; } .hero-section h1 { color: var(--on-surface); font-size: var(--display-lg-size); line-height: var(--display-lg-line); letter-spacing: var(--display-lg-tracking); margin-bottom: var(--stack-md); } .hero-section p { color: var(--on-surface-variant); font-size: var(--body-lg-size); line-height: var(--body-lg-line); max-width: 600px; margin-bottom: var(--stack-lg); } .hero-content { max-width: 720px; } .hero-badge { display: inline-block; background: var(--primary-fixed); border: none; color: var(--on-primary-fixed); padding: 0.35rem 1rem; border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-sm-tracking); margin-bottom: var(--stack-lg); } .text-accent { color: var(--color-accent); } .hero-subtitle { font-size: var(--body-lg-size); line-height: var(--body-lg-line); } .hero-search-bar { display: flex; gap: var(--stack-sm); max-width: 560px; margin-bottom: var(--stack-lg); } /* Inputs: white field, 1px hairline, 2px primary ring on focus with offset */ .hero-search-bar input[type="text"] { flex: 1; padding: 0.875rem 1.25rem; border: 1px solid var(--outline-variant); border-radius: var(--radius); background: var(--surface-container-lowest); color: var(--on-surface); font-size: var(--body-md-size); font-family: var(--font-body); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .hero-search-bar input[type="text"]::placeholder { color: var(--text-muted); } .hero-search-bar input[type="text"]:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); } .hero-categories { display: flex; align-items: center; flex-wrap: wrap; gap: var(--stack-sm); } .hero-cat-label { color: var(--on-surface-variant); margin-right: var(--space-xs); } .category-pill { display: inline-block; padding: 0.35rem 1rem; border: 1px solid var(--outline-variant); border-radius: var(--radius-full); background: var(--surface-container-lowest); color: var(--on-surface-variant) !important; font-size: var(--meta-info-size); line-height: var(--meta-info-line); font-weight: 500; text-decoration: none !important; transition: all var(--transition-fast); } .category-pill:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary) !important; } /* The wave masked the old dark hero into the page. On a light hero it only needs to match the page surface. */ .hero-wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: var(--surface); clip-path: ellipse(75% 100% at 50% 100%); } .disclosure-bar { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border-light); } .disclosure-bar p { margin: 0; padding: 10px 0; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-secondary); } .disclosure-bar a { color: var(--color-accent); /* The accent only reaches 1.4:1 against the muted disclosure copy around it, so colour alone cannot mark this as a link (WCAG 2.1 AA 1.4.1). */ text-decoration: underline; } .featured-section { padding: var(--space-lg, 1.5rem) 0 0; background: var(--surface); } .section-label { color: var(--primary); margin-bottom: 1.25rem; display: block; } .hero-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 40px; /* stretch pairs with `justify-content: space-between` on .rail below: the slack is shared out between the four items instead of pooling as a void at the bottom, so the columns end level whatever the hero title's length. */ align-items: stretch; } /* Featured Card */ .featured-card { background: var(--surface-container-lowest); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); text-decoration: none; color: inherit; display: block; transition: opacity 0.2s; } .featured-card:hover { box-shadow: var(--shadow-lg); } .featured-image-wrap { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-alt); } .featured-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .featured-image-wrap .badges { position: absolute; top: 16px; left: 16px; display: flex; gap: 6px; } .featured-image-wrap .badge { padding: 4px 12px; border-radius: var(--radius-full); background: rgba(255,255,255,.92); backdrop-filter: blur(6px); color: var(--on-surface); } .featured-body { padding: 28px; } .featured-body .meta { font-size: 13px; color: var(--color-teal); font-weight: 500; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .featured-body .meta span { color: var(--color-text-muted); font-weight: 400; } .featured-body .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border); } .featured-body h1 { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--color-navy); margin: 0 0 14px 0; } .featured-body .excerpt { font-size: 15px; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } /* Secondary Rail */ .rail { display: flex; flex-direction: column; gap: 0; justify-content: space-between; } .rail-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: inherit; transition: opacity 0.2s; } .rail-item:hover { opacity: 0.9; } .rail-item:first-child { padding-top: 0; } .rail-item:last-child { border-bottom: none; padding-bottom: 0; } .rail-text { flex: 1; display: flex; flex-direction: column; gap: 5px; justify-content: center; } .rail-text .meta { font-size: 12px; color: var(--color-teal); font-weight: 500; } .rail-text .meta span { color: var(--color-text-muted); font-weight: 400; } .rail-text h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-navy); margin: 0; } .rail-text .snippet { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .rail-text .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; } .rail-text .tag { padding: 2px 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; letter-spacing: var(--label-sm-tracking); background: var(--surface-container-high); color: var(--on-surface-variant); } .rail-thumb { flex: 0 0 100px; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); } .rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rail-footer { /* With four rail items the column lands within a pixel of the hero card's bottom edge; the extra top margin was the last thing pushing it past. */ margin-top: 0; text-align: center; } .rail-footer a { font-size: 13px; font-weight: 500; color: var(--color-teal); text-decoration: none; } .rail-footer a:hover { text-decoration: underline; } /* --- Latest Articles Section --- */ .latest-section { background: var(--surface); padding: var(--section-gap) 0; } .section-header { text-align: center; margin-bottom: var(--space-2xl); } .section-header h2 { margin-bottom: var(--space-sm); } .section-header p { color: var(--color-text-secondary); font-size: var(--text-base); max-width: 500px; margin: 0 auto; } .content-with-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-2xl); } .main-content-area { min-width: 0; } /* Article Card */ .article-card { transition: all var(--transition-base); } .article-card-link { display: flex; flex-direction: column; text-decoration: none !important; color: inherit; } .article-card-img { overflow: hidden; } .article-card-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform var(--transition-slow); } .article-card:hover .article-card-img img { transform: scale(1.04); } .article-card-body { padding: var(--space-md) var(--space-lg); } .article-card-body h3 { font-size: var(--text-base); font-weight: 600; margin: var(--space-sm) 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-card-date { font-size: var(--text-xs); color: var(--color-text-muted); } .load-more-wrap { text-align: center; margin-top: var(--space-2xl); } .load-more-wrap .btn { min-width: 200px; } /* Sidebar */ .sidebar { min-width: 0; /* The feed auto-loads the whole corpus as the reader scrolls, so the left column runs several thousand pixels. Pinned, the widget stays beside it the whole way instead of leaving a growing empty column. align-self:start is what lets sticky work here — a grid-stretched item is already as tall as its row and has nothing to travel within. 24px clears the 72px header. */ align-self: start; position: sticky; top: calc(var(--header-height, 72px) + 24px); } /* Flat, not a card: the white fill and border read as a raised panel beside the feed's own cards, giving the column two competing card treatments. */ .sidebar-widget { background: transparent; border: none; padding: 0; margin-bottom: var(--space-xl); } .sidebar-title { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-accent); } /* Mirrors .rail-item above: text column left, square thumb right, category as a chip. The two "here is what else to read" lists on the page were using two unrelated card shapes. */ .sidebar-item { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: inherit; transition: opacity 0.2s; } .sidebar-item:hover { opacity: 0.9; } .sidebar-item:first-child { padding-top: 0; } .sidebar-item:last-child { border-bottom: none; padding-bottom: 0; } .sidebar-item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; } .sidebar-item-content h4 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-navy); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-item:hover .sidebar-item-content h4 { color: var(--color-accent); } .sidebar-item-content .tag { align-self: flex-start; padding: 2px 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; letter-spacing: var(--label-sm-tracking); background: var(--surface-container-high); color: var(--on-surface-variant); } /* 48px, not the rail's 100px: in a 320px column a bigger thumb squeezed the title to 184px and three lines. Competitor sidebars run 36-43px. */ .sidebar-thumb { flex: 0 0 48px; /* align-self, or the flex row's default `stretch` overrides the height that aspect-ratio would derive and the square renders as a 48x67 rectangle. */ align-self: center; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); } .sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar-date { font-size: var(--text-xs); color: var(--color-text-muted); } .tag-sm { font-size: 12px !important; padding: 0.15rem 0.5rem !important; } .sidebar-affiliate-widget { background: #FFFBF0; border: 1px solid #F0E4C8; } .sidebar-affiliate-widget p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.6; margin: 0; } /* --- Social Links --- */ .social-links { display: flex; gap: var(--space-sm); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1); color: var(--color-text-secondary); text-decoration: none !important; transition: all var(--transition-fast); font-size: var(--text-base); } .social-links a:hover { background: var(--color-accent); color: var(--color-white); } /* --- Grid Layouts --- */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } /* --- Page Header --- */ .page-header { background: var(--background-subtle); padding: var(--space-3xl) 0; margin-bottom: var(--space-3xl); border-bottom: none; } .page-header h1 { margin-bottom: var(--stack-sm); } .page-header p { color: var(--color-text-secondary); font-size: var(--body-lg-size); line-height: var(--body-lg-line); max-width: 600px; } /* --- Content Area --- The reading lane. Article prose runs at body-lg (18/28) — the whole point of the 800px cap is that a larger body size stays comfortable. */ .content-area { max-width: var(--container-narrow); margin: 0 auto; padding: var(--stack-lg) var(--margin-desktop); } .content-area p, .content-area li { font-size: var(--body-lg-size); line-height: var(--body-lg-line); } .content-area h2 { margin-top: var(--space-3xl); } .content-area ul, .content-area ol { margin-bottom: var(--stack-lg); } .content-area li { margin-bottom: var(--stack-sm); } /* --- Table of Contents --- */ .toc { background: var(--surface-container-low); border: none; border-radius: var(--radius-lg); padding: var(--stack-lg); margin-bottom: var(--space-3xl); } .toc-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-md); color: var(--color-primary); } .toc-list { list-style: none; padding: 0; margin: 0; } .toc-list li { padding: var(--space-xs) 0; } .toc-list a { color: var(--color-text-secondary); font-size: var(--text-sm); text-decoration: none; display: block; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border-light); } .toc-list a:hover { color: var(--color-accent); } /* --- Star Ratings --- */ .stars { color: var(--color-warning); font-size: var(--text-lg); letter-spacing: 2px; } /* --- Pros/Cons --- */ .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin: var(--space-2xl) 0; } .pros-box, .cons-box { padding: var(--space-lg); border-radius: var(--radius-lg); } .pros-box { background: #F0FAF3; border: 1px solid #D6EDDD; } .cons-box { background: var(--error-container); border: 1px solid #F5C6C0; } .pros-box h4, .cons-box h4 { margin-bottom: var(--space-md); font-size: var(--text-base); } .pros-box ul, .cons-box ul { list-style: none; padding: 0; margin: 0; } .pros-box li, .cons-box li { padding: var(--space-xs) 0; font-size: var(--text-sm); line-height: 1.6; } /* --- Verdict Box --- */ .verdict-box { background: var(--inverse-surface); color: var(--inverse-on-surface); border-radius: var(--radius-xl); padding: var(--space-2xl); margin: var(--space-3xl) 0; } .verdict-box h3 { color: var(--inverse-on-surface); margin-bottom: var(--stack-md); } .verdict-box p { color: var(--inverse-on-surface); font-size: var(--body-lg-size); line-height: var(--body-lg-line); } /* --- CTA Button (affiliate) --- */ .cta-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); background: var(--cta-button); color: var(--cta-button-text) !important; font-family: var(--font-heading); font-weight: 700; font-size: var(--body-md-size); padding: 1rem 2rem; border-radius: var(--radius); text-decoration: none !important; transition: all var(--transition-base); width: 100%; max-width: 400px; text-align: center; } .cta-button:hover { background: var(--cta-button-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* --- Responsive --- */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } h1 { font-size: 40px; line-height: 48px; } h2 { font-size: 28px; line-height: 36px; } .hero-section h1 { font-size: 40px; line-height: 48px; } .content-with-sidebar { grid-template-columns: 1fr; } .hero-grid { grid-template-columns: 1fr; gap: 32px; } .featured-image-wrap { aspect-ratio: 16/9; } .rail-thumb { flex: 0 0 120px; } } @media (max-width: 768px) { :root { --header-height: 60px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* display-lg-mobile: 32/40 with lighter negative tracking */ h1 { font-size: var(--display-lg-mobile-size); line-height: var(--display-lg-mobile-line); letter-spacing: var(--display-lg-mobile-tracking); } h2 { font-size: 24px; line-height: 32px; } .hero-section h1 { font-size: var(--display-lg-mobile-size); line-height: var(--display-lg-mobile-line); letter-spacing: var(--display-lg-mobile-tracking); } /* Spacing steps down ~25% on mobile: 80px section gaps become 60px */ .hero-section { padding: 60px 0; margin-bottom: 60px; } .featured-section, .latest-section { padding: 60px 0; } .featured-section { padding-bottom: 0; } .hero-search-bar { flex-direction: column; } .trust-bar-inner { gap: var(--space-lg); } .trust-divider { display: none; } /* Rail items stack on mobile. Without the column direction the 100%-wide thumb below sits beside the text column and overflows the viewport. */ .rail-item { flex-direction: column; gap: 16px; } .rail-thumb { flex: none; width: 100%; aspect-ratio: 16/9; } .rail-thumb img { width: 100%; height: 100%; } .rail-text h3 { font-size: var(--text-sm); } .pros-cons { grid-template-columns: 1fr; } .container, .content-area { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); } .author-box { flex-direction: column; align-items: center; text-align: center; } .hero-wave { height: 24px; } } @media (max-width: 480px) { .hero-section h1 { font-size: 28px; line-height: 36px; } .page-header { padding: var(--space-2xl) 0; } } /* --- Utility Classes --- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-sm); } .mt-2 { margin-top: var(--space-md); } .mt-3 { margin-top: var(--space-lg); } .mt-4 { margin-top: var(--space-xl); } .mt-5 { margin-top: var(--space-2xl); } .mt-6 { margin-top: var(--space-3xl); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-sm); } .mb-2 { margin-bottom: var(--space-md); } .mb-3 { margin-bottom: var(--space-lg); } .mb-4 { margin-bottom: var(--space-xl); } .mb-5 { margin-bottom: var(--space-2xl); } .mb-6 { margin-bottom: var(--space-3xl); } .py-1 { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .py-2 { padding-top: var(--space-md); padding-bottom: var(--space-md); } .py-3 { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } .py-4 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .py-5 { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } .py-6 { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: var(--space-sm); padding-right: var(--space-sm); } .px-2 { padding-left: var(--space-md); padding-right: var(--space-md); } .px-3 { padding-left: var(--space-lg); padding-right: var(--space-lg); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================ Page Tools: Breadcrumbs + Disclosure + Author ============================================ */ .page-tools { max-width: var(--container-max); margin: 0 auto; padding: var(--stack-md) var(--margin-desktop) 0; } /* --- Breadcrumbs --- */ .breadcrumbs { margin-bottom: 12px; } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .breadcrumbs li { font-size: 13px; color: var(--color-text-secondary); display: inline-flex; align-items: center; } .breadcrumbs li:not(:last-child)::after { content: '\203A'; margin-left: 4px; color: var(--outline); font-size: 14px; } .breadcrumbs a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; } .breadcrumbs a:hover { color: var(--color-accent-dark); text-decoration: underline; } .breadcrumbs li[aria-current="page"] { color: var(--color-text-secondary); font-weight: 500; } /* --- Article Affiliate Disclosure Banner --- Sits above the headline as a quiet slate bar. Same reasoning as .affiliate-banner: recessive container, but the copy itself stays at 8.5:1 so the FTC disclosure is never merely decorative. */ .article-disclosure { background: #F1F5F9; border: none; border-radius: var(--radius); padding: var(--stack-sm) var(--stack-md); margin-bottom: var(--stack-md); text-align: center; } .article-disclosure p { margin: 0; font-size: var(--meta-info-size); line-height: var(--meta-info-line); color: var(--on-surface-variant); } .article-disclosure a { color: var(--primary); text-decoration: underline; font-weight: 500; } .article-disclosure a:hover { color: var(--on-primary-fixed-variant); } /* --- Author Byline (scoped under .author-byline to avoid conflicts with .author-box) --- */ .author-byline { display: flex; align-items: center; gap: var(--stack-md); padding: var(--stack-sm) 0; background: transparent; border-radius: 0; margin-bottom: var(--stack-lg); } /* 32px circular avatar. The logo gradient is the one place the raw brand hues appear in the UI — it ties the byline back to the mark without putting an inaccessible colour anywhere near text. */ .author-byline .author-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 13px; flex-shrink: 0; position: relative; } .author-byline .author-info { display: flex; flex-direction: column; } .author-byline .author-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--label-sm-size); line-height: var(--label-sm-line); letter-spacing: var(--label-sm-tracking); text-transform: uppercase; color: var(--color-text); } .author-byline .author-title { font-size: var(--meta-info-size); line-height: var(--meta-info-line); color: var(--color-text-secondary); } /* --- Responsive Page Tools --- */ @media (max-width: 768px) { .page-tools { padding: 12px var(--margin-mobile) 0; } .breadcrumbs { margin-bottom: 10px; } .breadcrumbs li { font-size: 12px; } .article-disclosure { padding: 10px 12px; } .article-disclosure p { font-size: 12px; } .author-byline { padding: 10px 12px; } .author-byline .author-avatar { width: 32px; height: 32px; } } /* --- Editorial Sections --- */ .editors-picks-section, .buying-guides-section, .editors-picks-section .section-header, .buying-guides-section .section-header { margin-bottom: var(--space-xl); } /* Card Grid System */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .card-grid-2 { grid-template-columns: repeat(2, 1fr); } .card-grid-4 { grid-template-columns: repeat(4, 1fr); } /* Card with thumbnail (editorial cards) */ .card-thumb { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-alt); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* .card img { height: auto } sits later in this file at equal specificity and would otherwise win, letting thumbnails overflow or under-fill the box. */ .card .card-thumb img, .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Latest Section Responsive */ @media (max-width: 1024px) { .content-with-sidebar { grid-template-columns: 1fr; } .sidebar { margin-top: var(--space-xl); /* Stacked, the sidebar is just the next block down — sticking it would pin the widget to the top of the viewport as the reader scrolls past. */ position: static; } } @media (max-width: 768px) { .card-grid, .card-grid-4 { grid-template-columns: 1fr; } .editors-picks-section, .buying-guides-section { padding: var(--space-2xl) 0; } } /* --- Trust & Compliance Pages --- about, contact, editorial-policy, affiliate-disclosure, disclaimer, privacy-policy, terms-of-service. Long-form legal and policy prose, so the headings need more air than an article and the lists need to stay scannable. */ .trust-page { padding-bottom: var(--space-3xl); } .trust-page h2 { font-size: var(--text-2xl, 1.5rem); margin-top: var(--space-3xl); margin-bottom: var(--stack-sm); padding-top: var(--stack-md); border-top: 1px solid var(--color-border-light, #e6e3ee); } .trust-page h2:first-of-type { border-top: none; padding-top: 0; } .trust-page h3 { font-size: var(--text-lg, 1.125rem); margin-top: var(--space-xl); margin-bottom: var(--stack-xs, 0.5rem); } /* The opening paragraph carries the summary a reviewer skims first. */ .lede { font-size: var(--body-lg-size, 1.125rem); line-height: 1.6; color: var(--color-text-secondary, #464554); padding-bottom: var(--stack-md); margin-bottom: var(--stack-md); border-bottom: 1px solid var(--color-border-light, #e6e3ee); } .page-updated { font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #727586); margin: 0; } /* Deliberately loud: these are slots the site owner must still fill in, and they must be impossible to miss on a page a reviewer will read. */ .fill-me { display: inline-block; background: #FFF3CD; border: 1px dashed #B8860B; border-radius: var(--radius-sm, 4px); padding: 2px 8px; color: #7A5C00; font-size: 0.9em; font-weight: 600; } .network-list { columns: 2; column-gap: var(--space-2xl, 2.5rem); margin-bottom: var(--stack-lg); } .network-list li { break-inside: avoid; } /* --- Contact form --- */ .contact-form-wrap { background: var(--surface-container-low, #f6f2f7); border-radius: var(--radius-lg, 12px); padding: var(--space-xl, 2rem); margin-bottom: var(--space-2xl, 2.5rem); } .contact-form-wrap h2 { margin-top: 0; border-top: none; padding-top: 0; } .form-group { margin-bottom: var(--space-md, 1rem); } .form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: var(--text-sm, 0.875rem); color: var(--color-text, #1c1b1b); } .form-group input, .form-group textarea { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--color-border, #c7c4d7); border-radius: var(--radius-md, 8px); font-family: inherit; font-size: var(--text-base, 1rem); background: var(--color-white, #fff); color: var(--color-text, #1c1b1b); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent, #4648d4); box-shadow: 0 0 0 3px rgba(70, 72, 212, 0.12); } .form-note { font-size: var(--text-sm, 0.875rem) !important; color: var(--color-text-muted, #727586); margin-top: var(--space-sm, 0.5rem); } .contact-list { list-style: none; padding: 0; } .contact-list li { display: flex; align-items: baseline; gap: var(--space-sm, 0.5rem); } .contact-list i { color: var(--color-accent, #4648d4); width: 18px; flex-shrink: 0; } @media (max-width: 640px) { .network-list { columns: 1; } .contact-form-wrap { padding: var(--space-md, 1rem); } } /* Postal address block -- legal entity plus operations, used on the trust pages */ .postal-address { display: block; line-height: 1.6; } .postal-address em { color: var(--color-text-muted, #666); font-style: normal; font-size: 0.92em; } /* --------------------------------------------------------------------------- Accessibility and layout corrections (WCAG AA + mobile ergonomics) --------------------------------------------------------------------------- */ /* Category chips were 10px — below the readable floor on mobile */ .tag, span.tag { font-size: 12px; letter-spacing: 0.04em; } /* Footer contact link was #4648D4 on #313030 = 1.95:1. Lift to ~8:1. */ .footer-newsletter a[href^="mailto:"], .footer-col a[href^="mailto:"] { color: #b9c0ff; text-decoration: underline; text-underline-offset: 2px; } .footer-newsletter a[href^="mailto:"]:hover, .footer-col a[href^="mailto:"]:hover { color: #ffffff; } /* Reserve space for every content image so nothing shifts as they decode (CLS) */ .artical_first_blog img, .content-area img, .card img, .post-card img { height: auto; max-width: 100%; } /* The article byline sat flush to the viewport while the body was centred */ .artical_first_blog .author-row, .artical_first_blog .post-author, .blog_artical .author-row { max-width: var(--measure, 730px); margin-inline: auto; } /* Comparison tables in article bodies. The only prior table rule was scoped to the Quill editor's own wrapper class, so a plain rendered unruled. */ /* Wide tables must scroll inside their own box rather than forcing the page to scroll horizontally on a phone. */ .artical_first_blog .table-scroll, .content-area .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .artical_first_blog table, .content-area table { width: 100%; margin: var(--space-lg) 0; border-collapse: collapse; font-size: var(--text-sm); } .artical_first_blog th, .artical_first_blog td, .content-area th, .content-area td { padding: 0.625rem 0.75rem; border: 1px solid var(--color-border); text-align: left; vertical-align: top; } .artical_first_blog thead th, .content-area thead th { background: var(--color-bg-alt); font-weight: 600; } @media (max-width: 1024px) { /* Touch targets: 44px is the iOS minimum, 48px the Android one */ .footer-col ul li a, .footer-bottom-links a, .nav-menu a { display: inline-block; min-height: 44px; line-height: 44px; } } /* The search pill crowded the logo and clipped its own placeholder. Phone widths only — on tablet there is room for the expanded field. */ @media (max-width: 767px) { .site-search, .search-form { max-width: 44px; transition: max-width 0.2s ease; } .site-search:focus-within, .search-form:focus-within { max-width: min(70vw, 320px); } .site-search input, .search-form input { min-width: 0; } } /* ------------------------------------------------------------------ Touch targets — measured at 320px, everything interactive was 17–36px tall. iOS wants 44px, Android 48px. ------------------------------------------------------------------ */ @media (max-width: 1024px) { .site-nav .nav-toggle, .nav-search button, .footer-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .site-nav .site-logo { display: inline-flex; align-items: center; min-height: 44px; } .rail-footer a, .footer-newsletter p a[href^="mailto:"] { display: inline-block; min-height: 44px; line-height: 44px; } .btn.btn-sm { min-height: 44px; line-height: 1.2; padding-block: 0.75rem; } } @media (max-width: 1024px) { /* Breadcrumb links are a nav list, not inline prose — they need a real touch target. Measured at 20px before this. */ .breadcrumbs a, .breadcrumbs .current { display: inline-block; min-height: 44px; line-height: 44px; } } /* Archive card dateline — the publishing cadence should be visible on the listing, not only inside the article. */ .card-date { display: block; margin-top: 0.5rem; font-size: var(--meta-info-size); line-height: var(--meta-info-line); color: var(--color-text-secondary); } /* Archive pagination */ .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin: 0 0 4rem; } .pagination a, .pagination-current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--body-size); text-decoration: none; color: var(--color-text); } .pagination a:hover { border-color: var(--primary); color: var(--primary); } .pagination-current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } .page-of { margin: 0.25rem 0 0; font-size: var(--meta-info-size); color: var(--color-text-secondary); } /* WCAG 2.5.8 (AA) target minimum is 24x24 CSS px. Pointer-width screens keep the compact look but must not fall under that floor; the 44px touch sizing in the <=1024px blocks above still overrides this on tablet and phone. */ @media (min-width: 1025px) { .breadcrumbs a, .breadcrumbs .current, .footer-bottom-links a, .footer-newsletter p a[href^="mailto:"], .rail-footer a { display: inline-block; min-height: 24px; line-height: 24px; } } /* Heroes sourced from Wikimedia Commons. The caption carries the photographer and licence, which the licences require — it is not optional decoration. */ .article-hero { margin: 0 0 1.5rem; } .article-hero img { width: 100%; height: auto; display: block; border-radius: var(--radius-md, 8px); } .article-hero figcaption { margin-top: .5rem; font-size: .8125rem; line-height: 1.5; color: var(--color-text-secondary, #666); } /* Cluster hub (/surfshark) — a front door for the twelve Surfshark pieces. Deliberately a list, not the card grid the archives use: the point of this page is the scope line under each title, and a thumbnail grid buries it. */ .cluster-hub { max-width: 46rem; margin: 0 auto 4rem; } .cluster-intro { font-size: var(--body-size); line-height: var(--body-line); color: var(--color-text-secondary); margin: 0 0 1rem; } .cluster-group { margin: 2.5rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); font-size: 1.25rem; } .cluster-list { list-style: none; margin: 0; padding: 0; } .cluster-item { padding: 1rem 0; border-bottom: 1px solid var(--color-border); } .cluster-item:last-child { border-bottom: none; } .cluster-link { display: inline-block; min-height: 24px; font-weight: 600; font-size: 1.0625rem; line-height: 1.45; color: var(--color-text); text-decoration: none; } .cluster-link:hover, .cluster-link:focus-visible { color: var(--primary); text-decoration: underline; } .cluster-scope { margin: 0.35rem 0 0.4rem; font-size: var(--meta-info-size); line-height: 1.6; color: var(--color-text-secondary); } .cluster-date { font-size: var(--meta-info-size); color: var(--color-text-secondary); } .hub-backlink { margin: 1.25rem 0 0; font-size: var(--meta-info-size); line-height: 1.6; color: var(--color-text-secondary); } /* --- Bulma shim --------------------------------------------------------- bulma.min.css was 243KB of which the markup used eleven utility classes. Those rules are reproduced here verbatim and the stylesheet was removed. Do not add to this block; use the design tokens in variables.css instead. */ .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .mr-2 { margin-right: 0.5rem !important; } .pl-3 { padding-left: 0.75rem !important; } .has-text-black { color: #0a0a0a !important; } .has-text-white { color: #fff !important; } .is-size-5 { font-size: 1.25rem !important; } .is-family-monospace { font-family: monospace !important; } .image { display: block; position: relative; } .image.is-64x64 { height: 64px; width: 64px; } .image.is-64x64 img { height: 100%; width: 100%; object-fit: cover; } .columns.is-mobile > .column.is-12 { flex: none; width: 100%; } /* Section heading present for document outline and assistive tech, but not shown -- the card grid reads as its own section visually. */ .sr-only-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Touch targets: 48px is the Android minimum, 44px iOS. Applied at mobile widths only so desktop nav density is unchanged. */ @media (max-width: 1024px) { .site-nav a, .footer-col ul li a, .article-card-link, .breadcrumb a, .pagination a { min-height: 48px; display: flex; align-items: center; } } /* Closing related-articles block inside the article body. */ .related-reading { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .related-reading h2 { font-size: 20px; line-height: 28px; } .related-reading ul { margin: 0; padding-left: 1.1rem; } .related-reading li { margin-bottom: 0.4rem; } /* The category chip's label was wrapped in a link so it points at the archive. Anchors default to --color-accent, which is the same indigo as the chip background, so the text disappeared. Inherit the chip's own colour instead. */ .tag.has-category a, .tag.has-category a:hover, .tag.has-category a:visited { color: inherit; text-decoration: none; } .tag.has-category a:hover { text-decoration: underline; } /* Framing copy on the archive hubs. Without it these pages are almost entirely card link-text, which reads as thin to any retrieval system. */ .hub-intro { max-width: var(--measure, 730px); margin: 0 0 var(--space-lg); color: var(--color-text-secondary); font-size: var(--body-lg-size); line-height: 1.7; }