/* ============================================================ pSEO Template — style.css All CSS via variables. Light/dark via data-theme on . Mobile-first. No frameworks. ============================================================ */ /* ── 1. Design Tokens ────────────────────────────────────── */ :root { /* Brand (overridden per site via inline style or config) */ --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-accent: #0ea5e9; /* Surface */ --color-bg: #ffffff; --color-surface: #f8fafc; --color-surface-2: #f1f5f9; --color-border: #e2e8f0; /* Text */ --color-text: #0f172a; --color-text-muted: #64748b; --color-text-inverse: #ffffff; /* Feedback */ --color-success: #16a34a; --color-warning: #ca8a04; --color-danger: #dc2626; /* Elevation */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Shape */ --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed:1.625; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Layout */ --container-max: 1200px; --container-prose: 760px; --header-height: 64px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Quick answer accent */ --quick-answer-bg: #eff6ff; --quick-answer-border:#2563eb; --quick-answer-icon: "💡"; } /* ── Dark Theme ──────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #334155; --color-border: #334155; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); --quick-answer-bg: #1e3a5f; --quick-answer-border:var(--color-primary); } /* ── 2. Reset & Base ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text); background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; transition: background var(--transition-base), color var(--transition-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } a:hover { opacity: 0.8; text-decoration: underline; } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } ul, ol { list-style: none; } button { cursor: pointer; font-family: inherit; } input, select, textarea { font-family: inherit; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-base); } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } strong { font-weight: var(--font-weight-semibold); } /* ── 3. Layout Utilities ─────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); } @media (min-width: 768px) { .container { padding: 0 var(--space-6); } } @media (min-width: 1024px) { .container { padding: 0 var(--space-8); } } .container--prose { max-width: var(--container-prose); } main { flex: 1; } .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-content { padding: var(--space-8) 0 var(--space-16); } /* ── 4. Header / Nav ─────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: background var(--transition-base), box-shadow var(--transition-base); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .site-header__logo { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--color-primary); letter-spacing: -0.02em; text-decoration: none; display: flex; align-items: center; gap: var(--space-2); } .site-header__logo:hover { opacity: 0.85; text-decoration: none; } .site-header__logo svg { width: 28px; height: 28px; } .site-nav { display: none; align-items: center; gap: var(--space-1); } @media (min-width: 768px) { .site-nav { display: flex; } } .site-nav__link { padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); transition: color var(--transition-fast), background var(--transition-fast); } .site-nav__link:hover { color: var(--color-text); background: var(--color-surface); text-decoration: none; } .site-nav__link.active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius); background: transparent; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); transition: all var(--transition-fast); } .theme-toggle:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-primary); } /* Hamburger */ .hamburger { display: flex; flex-direction: column; gap: 5px; width: 36px; height: 36px; padding: var(--space-2); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; } @media (min-width: 768px) { .hamburger { display: none; } } .hamburger__line { width: 100%; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-fast); } .hamburger.open .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open .hamburger__line:nth-child(2) { opacity: 0; } .hamburger.open .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav drawer */ .mobile-nav { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: var(--space-4); box-shadow: var(--shadow-lg); z-index: 99; } .mobile-nav.open { display: block; } .mobile-nav__link { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-weight: var(--font-weight-medium); color: var(--color-text); transition: background var(--transition-fast); } .mobile-nav__link:hover { background: var(--color-surface); text-decoration: none; } /* ── 5. Hero — Homepage ──────────────────────────────────── */ .hero { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-bg)) 0%, var(--color-bg) 60%, color-mix(in srgb, var(--color-accent) 4%, var(--color-bg)) 100%); border-bottom: 1px solid var(--color-border); padding: var(--space-16) 0 var(--space-12); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, transparent 70%); pointer-events: none; } .hero__inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: var(--space-4); } .hero__title { font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl)); font-weight: var(--font-weight-extrabold); letter-spacing: -0.03em; margin-bottom: var(--space-4); color: var(--color-text); } .hero__title span { color: var(--color-primary); } .hero__subtitle { font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 560px; margin: 0 auto var(--space-8); line-height: var(--line-height-relaxed); } .hero__search { display: flex; gap: var(--space-2); max-width: 480px; margin: 0 auto; } .hero__search-input { flex: 1; height: 48px; padding: 0 var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .hero__search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); } .hero__search-input::placeholder { color: var(--color-text-muted); } .hero__search-btn { height: 48px; padding: 0 var(--space-6); background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); transition: background var(--transition-fast), transform var(--transition-fast); } .hero__search-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); } .hero__stats { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-10); flex-wrap: wrap; } .hero__stat { text-align: center; } .hero__stat-number { display: block; font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); color: var(--color-primary); } .hero__stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); } /* ── 6. Article Hero (detail/category pages) ─────────────── */ .article-hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-10) 0 var(--space-8); } .article-hero__inner { } .article-hero__label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); } .article-hero__title { font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl)); font-weight: var(--font-weight-extrabold); letter-spacing: -0.025em; margin-bottom: var(--space-3); } .article-hero__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; color: var(--color-text-muted); font-size: var(--font-size-sm); } .article-hero__meta-item { display: flex; align-items: center; gap: var(--space-1); } /* ── 7. Quick Answer Box ─────────────────────────────────── */ .quick-answer { background: var(--quick-answer-bg); border-left: 4px solid var(--quick-answer-border); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; position: relative; } .quick-answer__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); } .quick-answer__label::before { content: '⚡'; font-size: var(--font-size-sm); } .quick-answer__text { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text); line-height: var(--line-height-snug); } /* ── 8. Stat Cards ───────────────────────────────────────── */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .stat-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); } .stat-card__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); color: var(--color-primary); letter-spacing: -0.02em; line-height: 1; margin-bottom: var(--space-1); } .stat-card__label { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); } .stat-card__change { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); margin-top: var(--space-2); } .stat-card__change.up { color: var(--color-success); } .stat-card__change.down { color: var(--color-danger); } /* ── 9. Data Table ───────────────────────────────────────── */ .data-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin: var(--space-6) 0; } .data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .data-table thead { background: var(--color-surface-2); position: sticky; top: var(--header-height); z-index: 1; } .data-table th { padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--color-border); white-space: nowrap; user-select: none; } .data-table th.sortable { cursor: pointer; position: relative; padding-right: var(--space-7); transition: color var(--transition-fast); } .data-table th.sortable:hover { color: var(--color-primary); } .data-table th.sortable::after { content: '↕'; position: absolute; right: var(--space-3); opacity: 0.4; font-size: 10px; } .data-table th.sortable.sort-asc::after { content: '↑'; opacity: 1; color: var(--color-primary); } .data-table th.sortable.sort-desc::after { content: '↓'; opacity: 1; color: var(--color-primary); } .data-table th.sortable.sort-asc, .data-table th.sortable.sort-desc { color: var(--color-primary); } .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); color: var(--color-text); vertical-align: middle; transition: background var(--transition-fast); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--color-surface); } .data-table td a { font-weight: var(--font-weight-medium); color: var(--color-primary); } .data-table .badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } .data-table .badge--green { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); } .data-table .badge--yellow { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); } .data-table .badge--red { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); } /* ── 10. Search Filter ───────────────────────────────────── */ .table-controls { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; } .table-search { flex: 1; min-width: 200px; height: 40px; padding: 0 var(--space-4) 0 36px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center; color: var(--color-text); font-size: var(--font-size-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .table-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); } .table-search::placeholder { color: var(--color-text-muted); } .table-count { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; } /* ── 11. Breadcrumbs ─────────────────────────────────────── */ .breadcrumbs { padding: var(--space-3) 0; margin-bottom: var(--space-2); } .breadcrumbs__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); } .breadcrumbs__item { display: flex; align-items: center; gap: var(--space-1); } .breadcrumbs__item::after { content: '/'; color: var(--color-border); font-weight: var(--font-weight-normal); } .breadcrumbs__item:last-child::after { display: none; } .breadcrumbs__link { color: var(--color-text-muted); transition: color var(--transition-fast); } .breadcrumbs__link:hover { color: var(--color-primary); text-decoration: none; } .breadcrumbs__current { color: var(--color-text); font-weight: var(--font-weight-medium); } /* ── 12. FAQ Accordion ───────────────────────────────────── */ .faq-section { margin: var(--space-10) 0; } .faq-section__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); } .faq-section__title::before { content: '❓'; font-size: var(--font-size-xl); } .faq-list { display: flex; flex-direction: column; gap: var(--space-2); } .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition-fast); } .faq-item:hover { box-shadow: var(--shadow); } .faq-item.open { border-color: var(--color-primary); box-shadow: var(--shadow); } .faq-question { width: 100%; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); text-align: left; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); cursor: pointer; transition: background var(--transition-fast); } .faq-question:hover { background: var(--color-surface-2); } .faq-item.open .faq-question { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); } .faq-question__icon { width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-border); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); color: var(--color-text-muted); transition: all var(--transition-fast); } .faq-item.open .faq-question__icon { background: var(--color-primary); color: var(--color-text-inverse); transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow) ease; } .faq-item.open .faq-answer { max-height: 600px; } .faq-answer__inner { padding: var(--space-4) var(--space-5) var(--space-5); font-size: var(--font-size-base); color: var(--color-text-muted); line-height: var(--line-height-relaxed); border-top: 1px solid var(--color-border); } .faq-answer__inner p { margin-bottom: var(--space-3); } .faq-answer__inner p:last-child { margin-bottom: 0; } /* ── 13. Email CTA ───────────────────────────────────────── */ .email-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) 0%, var(--color-surface) 100%); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); margin: var(--space-10) 0; text-align: center; } .email-cta__icon { font-size: 2rem; margin-bottom: var(--space-3); } .email-cta__headline { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); color: var(--color-text); } .email-cta__subtext { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); } .email-cta__form { display: flex; gap: var(--space-2); max-width: 420px; margin: 0 auto; flex-direction: column; } @media (min-width: 480px) { .email-cta__form { flex-direction: row; } } .email-cta__input { flex: 1; height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-sm); transition: border-color var(--transition-fast); } .email-cta__input:focus { outline: none; border-color: var(--color-primary); } .email-cta__input::placeholder { color: var(--color-text-muted); } .email-cta__btn { height: 44px; padding: 0 var(--space-5); background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); white-space: nowrap; transition: background var(--transition-fast), transform var(--transition-fast); } .email-cta__btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); } .email-cta__disclaimer { margin-top: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); } .email-cta--success { color: var(--color-success); font-weight: var(--font-weight-semibold); margin-top: var(--space-3); display: none; } .email-cta--success.show { display: block; } /* ── 14. Affiliate CTA ───────────────────────────────────── */ .affiliate-cta { display: flex; align-items: center; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; transition: box-shadow var(--transition-fast); flex-direction: column; text-align: center; } @media (min-width: 480px) { .affiliate-cta { flex-direction: row; text-align: left; } } .affiliate-cta:hover { box-shadow: var(--shadow-md); } .affiliate-cta__icon { font-size: 2rem; flex-shrink: 0; } .affiliate-cta__content { flex: 1; } .affiliate-cta__text { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--space-1); } .affiliate-cta__subtext { font-size: var(--font-size-sm); color: var(--color-text-muted); } .affiliate-cta__btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); background: var(--color-accent); color: var(--color-text-inverse); border-radius: var(--radius); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); white-space: nowrap; transition: filter var(--transition-fast), transform var(--transition-fast); text-decoration: none; flex-shrink: 0; } .affiliate-cta__btn:hover { filter: brightness(0.9); transform: translateY(-1px); text-decoration: none; opacity: 1; } /* ── 15. Tag List ────────────────────────────────────────── */ .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; } .tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--color-surface-2); color: var(--color-text-muted); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); text-decoration: none; } .tag:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); text-decoration: none; } /* ── 16. Pagination ──────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-8) 0; flex-wrap: wrap; } .pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); transition: all var(--transition-fast); text-decoration: none; } .pagination__item:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; } .pagination__item.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } .pagination__item.disabled { opacity: 0.4; pointer-events: none; } /* ── 17. Cards grid (category page) ─────────────────────── */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--space-2); } .card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); transform: translateY(-2px); text-decoration: none; } .card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); } .card__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); } .card__value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); } /* ── 18. Content prose ───────────────────────────────────── */ .prose { line-height: var(--line-height-relaxed); } .prose h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .prose h2:first-child { border-top: none; margin-top: 0; padding-top: 0; } .prose h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin: var(--space-6) 0 var(--space-3); } .prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: var(--space-4); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: var(--space-1); } .prose blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-4); color: var(--color-text-muted); font-style: italic; margin: var(--space-4) 0; } .prose code { font-family: var(--font-mono); font-size: 0.9em; padding: 2px var(--space-2); background: var(--color-surface-2); border-radius: var(--radius-sm); color: var(--color-primary); } /* ── 19. Last Updated badge ──────────────────────────────── */ .last-updated { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 3px var(--space-3); } .last-updated::before { content: '🕐'; font-size: 10px; } /* ── 20. Section headings ────────────────────────────────── */ .section-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); letter-spacing: -0.02em; } .section-subtitle { font-size: var(--font-size-base); color: var(--color-text-muted); margin-bottom: var(--space-6); } /* ── 21. Footer ──────────────────────────────────────────── */ .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-10) 0 var(--space-6); margin-top: auto; } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-8); } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } } .site-footer__brand {} .site-footer__logo { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); color: var(--color-primary); margin-bottom: var(--space-3); } .site-footer__description { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); max-width: 300px; } .site-footer__col-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); } .site-footer__links { display: flex; flex-direction: column; gap: var(--space-2); } .site-footer__link { font-size: var(--font-size-sm); color: var(--color-text-muted); transition: color var(--transition-fast); } .site-footer__link:hover { color: var(--color-primary); text-decoration: none; } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--font-size-xs); color: var(--color-text-muted); } .site-footer__legal { display: flex; gap: var(--space-4); flex-wrap: wrap; } .site-footer__legal a { color: var(--color-text-muted); transition: color var(--transition-fast); } .site-footer__legal a:hover { color: var(--color-primary); } /* ── 22. Buttons ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-radius: var(--radius); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; text-decoration: none; } .btn:hover { text-decoration: none; } .btn--primary { background: var(--color-primary); color: var(--color-text-inverse); border: 1px solid var(--color-primary); } .btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); opacity: 1; } .btn--outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn--outline:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); opacity: 1; } .btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .btn--ghost:hover { background: var(--color-surface); opacity: 1; } .btn--lg { height: 48px; padding: 0 var(--space-8); font-size: var(--font-size-base); border-radius: var(--radius-md); } .btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--font-size-xs); border-radius: var(--radius-sm); } /* ── 23. AdSense placeholder ─────────────────────────────── */ .ad-slot { background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; min-height: 90px; color: var(--color-text-muted); font-size: var(--font-size-xs); margin: var(--space-6) 0; } /* ── 24. Notice / Alert ──────────────────────────────────── */ .notice { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin: var(--space-4) 0; font-size: var(--font-size-sm); } .notice--info { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); color: var(--color-text); } .notice--warning { background: color-mix(in srgb, var(--color-warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent); color: var(--color-text); } .notice__icon { flex-shrink: 0; font-size: var(--font-size-base); } /* ── 25. Related links / internal linking ────────────────── */ .related-links { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: var(--space-8) 0; } .related-links__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--font-size-xs); } .related-links__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); } .related-links__item a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--color-text); transition: all var(--transition-fast); } .related-links__item a:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); text-decoration: none; } .related-links__item a::before { content: '→'; font-size: 12px; color: var(--color-primary); } /* ── 26. Skip nav ────────────────────────────────────────── */ .skip-nav { position: absolute; top: -100%; left: var(--space-4); background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-2) var(--space-4); border-radius: var(--radius); font-weight: var(--font-weight-semibold); z-index: 999; transition: top var(--transition-fast); } .skip-nav:focus { top: var(--space-4); } /* ── 27. Loading / skeleton ──────────────────────────────── */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .skeleton { background: linear-gradient( 90deg, var(--color-surface) 25%, var(--color-surface-2) 37%, var(--color-surface) 63% ); background-size: 1000px 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius); } /* ── 28. Back-to-top ─────────────────────────────────────── */ .back-to-top { position: fixed; bottom: var(--space-6); right: var(--space-6); width: 44px; height: 44px; background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-full); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); opacity: 0; pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-fast); z-index: 50; } .back-to-top.visible { opacity: 1; pointer-events: auto; } .back-to-top:hover { transform: translateY(-3px); } /* ── 29. Responsive: tablet ──────────────────────────────── */ @media (min-width: 768px) { h1 { font-size: var(--font-size-5xl); } .page-content { padding: var(--space-10) 0 var(--space-20); } } /* ── 30. Responsive: desktop ─────────────────────────────── */ @media (min-width: 1024px) { .page-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-10); align-items: start; } .page-layout__sidebar { position: sticky; top: calc(var(--header-height) + var(--space-6)); } } /* ── 31. Print ───────────────────────────────────────────── */ @media print { .site-header, .site-footer, .email-cta, .affiliate-cta, .back-to-top, .mobile-nav, .hamburger, .theme-toggle { display: none !important; } body { font-size: 12pt; } a { color: inherit; text-decoration: underline; } } /* ── 32. Reduced motion ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }