/* ============================================================ AIPUSH · AEO Analysis pages (Hub + Article) Catppuccin Latte (light) / Mocha (dark) — tokenized. Theme via data-theme on . Components use only var(--…). className-driven · mobile-first · ports 1:1 to static HTML. ============================================================ */ :root, :root[data-theme="light"] { --ctp-base: #eff1f5; --ctp-mantle: #e6e9ef; --ctp-crust: #dce0e8; --ctp-text: #4c4f69; --ctp-sub1: #5c5f77; --ctp-sub0: #6c6f85; --ctp-surface0:#ccd0da; --ctp-surface1:#bcc0cc; --ctp-surface2:#acb0be; --ctp-overlay0:#9ca0b0; --ctp-overlay1:#8c8fa1; --ctp-overlay2:#7c7f93; --ctp-blue: #1e66f5; --ctp-lavender:#7287fd; --ctp-mauve: #8839ef; --ctp-green: #40a02b; --ctp-yellow: #df8e1d; --ctp-red: #d20f39; --ctp-peach: #fe640b; --ctp-teal: #179299; --ctp-sky: #04a5e5; --surface-background: var(--ctp-base); --gradient-background: radial-gradient(1100px 620px at 78% -8%, color-mix(in oklab, var(--ctp-yellow) 12%, transparent), transparent 60%), radial-gradient(900px 560px at 8% 8%, color-mix(in oklab, var(--ctp-lavender) 9%, transparent), transparent 60%), linear-gradient(180deg, var(--ctp-base), var(--ctp-mantle)); --surface-card: #ffffff; --surface-card-strong: var(--ctp-mantle); --surface-inset: var(--ctp-crust); --surface-border: var(--ctp-surface0); --surface-border-strong: var(--ctp-surface1); --text-primary: var(--ctp-text); --text-secondary: var(--ctp-sub0); --text-tertiary: var(--ctp-overlay1); --accent: var(--ctp-yellow); --accent-strong: #c47e16; --on-accent: #1e1e2e; --status-info-dim: color-mix(in oklab, var(--ctp-blue) 10%, var(--surface-card)); --status-info-border: color-mix(in oklab, var(--ctp-blue) 30%, var(--surface-border)); --score-low: var(--ctp-red); --score-mid: var(--ctp-yellow); --score-high: var(--ctp-green); --focus: color-mix(in oklab, var(--accent) 70%, transparent); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --shadow-sm: 0 1px 2px rgba(76,79,105,.06), 0 1px 3px rgba(76,79,105,.05); --shadow-md: 0 4px 14px rgba(76,79,105,.10), 0 2px 6px rgba(76,79,105,.06); --shadow-lg: 0 18px 50px rgba(76,79,105,.16), 0 6px 18px rgba(76,79,105,.08); --shadow-accent: 0 6px 22px color-mix(in oklab, var(--accent) 42%, transparent); color-scheme: light; } :root[data-theme="dark"] { --ctp-base: #1e1e2e; --ctp-mantle: #181825; --ctp-crust: #11111b; --ctp-text: #cdd6f4; --ctp-sub1: #bac2de; --ctp-sub0: #a6adc8; --ctp-surface0:#313244; --ctp-surface1:#45475a; --ctp-surface2:#585b70; --ctp-overlay0:#6c7086; --ctp-overlay1:#7f849c; --ctp-overlay2:#9399b2; --ctp-blue: #89b4fa; --ctp-lavender:#b4befe; --ctp-mauve: #cba6f7; --ctp-green: #a6e3a1; --ctp-yellow: #f9e2af; --ctp-red: #f38ba8; --ctp-peach: #fab387; --ctp-teal: #94e2d5; --ctp-sky: #89dceb; --surface-background: var(--ctp-base); --gradient-background: radial-gradient(1100px 620px at 80% -10%, color-mix(in oklab, var(--ctp-yellow) 13%, transparent), transparent 58%), radial-gradient(900px 560px at 6% 6%, color-mix(in oklab, var(--ctp-mauve) 12%, transparent), transparent 58%), linear-gradient(180deg, var(--ctp-base), var(--ctp-mantle)); --surface-card: #232336; --surface-card-strong: var(--ctp-mantle); --surface-inset: var(--ctp-crust); --surface-border: var(--ctp-surface0); --surface-border-strong: var(--ctp-surface1); --text-primary: var(--ctp-text); --text-secondary: var(--ctp-sub0); --text-tertiary: var(--ctp-overlay1); --accent: var(--ctp-yellow); --accent-strong: #ffe9bd; --on-accent: #1e1e2e; --status-info-dim: color-mix(in oklab, var(--ctp-blue) 14%, var(--surface-card)); --status-info-border: color-mix(in oklab, var(--ctp-blue) 30%, var(--surface-border)); --score-low: var(--ctp-red); --score-mid: var(--ctp-yellow); --score-high: var(--ctp-green); --focus: color-mix(in oklab, var(--accent) 70%, transparent); --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 6px 18px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30); --shadow-lg: 0 22px 60px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.40); --shadow-accent: 0 6px 24px color-mix(in oklab, var(--accent) 30%, transparent); color-scheme: dark; } /* score band helper — set .band-low / .band-mid / .band-high */ .band-low { --band: var(--score-low); } .band-mid { --band: var(--score-mid); } .band-high { --band: var(--score-high); } * { box-sizing: border-box; } html { background: var(--gradient-background) no-repeat; background-size: cover; min-height: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; background: transparent; color: var(--text-primary); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.7; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; padding-top: 52px; } .theme-fab { position: fixed; top: 16px; right: 16px; z-index: 40; } @media (prefers-reduced-motion: no-preference) { html { transition: background-color .3s ease; } body { transition: color .3s ease; } } img { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; } ::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; } /* ---------- shell / column ---------- */ .shell { width: 100%; max-width: 808px; margin: 0 auto; padding: 0 20px; } /* ============================================================ Header ============================================================ */ .hd { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--surface-background) 82%, transparent); backdrop-filter: saturate(1.1) blur(10px); -webkit-backdrop-filter: saturate(1.1) blur(10px); border-bottom: 1px solid var(--surface-border); } .hd-in { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-primary); font-weight: 800; letter-spacing: -.01em; font-size: 17px; } .brand .spark { width: 13px; height: 13px; flex: none; transform: rotate(45deg); border-radius: 3px; background: var(--accent); } .brand:hover { color: var(--accent-strong); } .toggle { width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center; cursor: pointer; background: var(--surface-card); color: var(--text-secondary); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); transition: color .15s, border-color .15s; } .toggle:hover { color: var(--text-primary); border-color: var(--surface-border-strong); } .toggle svg { width: 19px; height: 19px; } .toggle .i-sun { display: none; } :root[data-theme="dark"] .toggle .i-sun { display: block; } :root[data-theme="dark"] .toggle .i-moon { display: none; } /* ---------- language switch ---------- */ .lang { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-card-strong); border: 1px solid var(--surface-border); } .lang button, .lang a { appearance: none; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: color .15s, background .15s; } .lang button[aria-pressed="true"], .lang a[aria-pressed="true"] { color: var(--text-primary); background: var(--surface-card); box-shadow: var(--shadow-sm); } .lang button:hover, .lang a:hover { color: var(--text-primary); } /* ============================================================ Hero (hub) ============================================================ */ .hub-hero { padding: 46px 0 8px; display: grid; gap: 14px; } .hub-hero h1 { margin: 0; font-size: clamp(30px, 7vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; } .hub-hero p { margin: 0; max-width: 56ch; color: var(--text-secondary); font-size: 16px; } .hub-hero .lang { margin-top: 6px; justify-self: start; } /* ============================================================ Article cards (hub stack + related) ============================================================ */ .stack { display: grid; gap: 14px; padding: 30px 0 8px; } .acard { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; text-decoration: none; color: inherit; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .acard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--surface-border-strong); } @media (min-width: 560px) { .acard { grid-template-columns: 92px 1fr; gap: 20px; padding: 16px; } } /* vertical 9:16 thumbnail with play badge */ .thumb { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-inset); border: 1px solid var(--surface-border); } .thumb .poster { position: absolute; inset: 0; width: 100%; height: 100%; } .thumb .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--ctp-crust) 55%, transparent); backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,.28); } .thumb .play svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; } .acard-body { min-width: 0; display: grid; gap: 8px; } .acard-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--text-primary); text-wrap: pretty; } @media (min-width: 560px) { .acard-title { font-size: 18.5px; } } .acard-domain { font-size: 13px; color: var(--text-tertiary); font-weight: 500; } .acard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; } /* score badge NN/100 */ .score-badge { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: var(--band); background: color-mix(in oklab, var(--band) 13%, var(--surface-card)); border: 1px solid color-mix(in oklab, var(--band) 34%, var(--surface-border)); } .score-badge b { font-size: 15px; } .score-badge span { font-size: 11px; font-weight: 700; opacity: .7; } /* level pill */ .level-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); background: var(--surface-card-strong); border: 1px solid var(--surface-border); } .level-pill .bars { display: inline-flex; gap: 2px; } .level-pill .bars i { width: 4px; height: 11px; border-radius: 2px; background: var(--surface-border-strong); } .level-pill .bars i.on { background: var(--band, var(--accent)); } .dot-sep { width: 3px; height: 3px; border-radius: 9px; background: var(--text-tertiary); flex: none; } .acard-date { font-size: 12.5px; color: var(--text-tertiary); font-weight: 500; white-space: nowrap; } /* load more */ .load-more { display: flex; justify-content: center; padding: 26px 0 8px; } .load-more button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 22px; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .1s; } .load-more button:hover { border-color: var(--surface-border-strong); } .load-more button:active { transform: translateY(1px); } /* ============================================================ Footer ============================================================ */ .ft { margin-top: auto; border-top: 1px solid var(--surface-border); } .ft-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 26px 0 40px; font-size: 13px; color: var(--text-tertiary); } .ft-in a { color: var(--text-secondary); text-decoration: none; font-weight: 500; } .ft-in a:hover { color: var(--accent-strong); } .ft-in .copy { margin-left: auto; } /* ============================================================ Article page ============================================================ */ .art { padding: 38px 0 0; } .art-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-decoration: none; } .crumb:hover { color: var(--accent-strong); } .crumb svg { width: 15px; height: 15px; } .art h1 { margin: 22px 0 0; font-size: clamp(28px, 6.2vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.07; text-wrap: balance; } .art h1 .brandword { color: var(--accent-strong); } .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: 13.5px; color: var(--text-secondary); } .meta-row .m { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; } .meta-row .m b { color: var(--text-primary); font-weight: 700; } /* hero row: short + gauge */ .hero-row { display: grid; gap: 18px; margin-top: 26px; } @media (min-width: 720px) { .hero-row { grid-template-columns: minmax(0, 248px) 1fr; align-items: stretch; } } .short { position: relative; aspect-ratio: 9 / 16; max-width: 248px; width: 100%; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-inset); border: 1px solid var(--surface-border); box-shadow: var(--shadow-md); } .short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .short .poster { position: absolute; inset: 0; cursor: pointer; border: 0; padding: 0; width: 100%; background: none; } .short .poster .poster-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .short .poster .ph { align-items: flex-end; } .short .poster .ph span { margin-bottom: 16px; } .short .poster .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); box-shadow: var(--shadow-accent); } .short .poster .play svg { width: 22px; height: 22px; fill: var(--on-accent); margin-left: 3px; } .short .tag { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: color-mix(in oklab, var(--ctp-crust) 50%, transparent); backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,.22); } .short .tag i { width: 6px; height: 6px; border-radius: 9px; background: var(--ctp-red); } /* gauge card */ .gauge-card { display: grid; gap: 14px; place-items: center; align-content: center; padding: 24px 22px; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-md); } .gauge { position: relative; width: 300px; max-width: 100%; } .gauge svg { width: 100%; height: auto; display: block; } .gauge .track { stroke: var(--surface-inset); } .gauge .val { stroke: var(--band); } .gauge .num { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 20px; line-height: 1; } .gauge .num b { font-size: 58px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .gauge .num span { font-size: 13px; color: var(--text-tertiary); font-weight: 600; margin-top: 5px; } /* level badge (5-bar) */ .level-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--surface-card-strong); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); } .level-badge .bars { display: inline-flex; gap: 3px; } .level-badge .bars i { width: 7px; height: 14px; border-radius: 3px; background: var(--surface-border); } .level-badge .bars i.on { background: var(--band); } .level-badge .lv { font-size: 14px; font-weight: 700; color: var(--text-primary); } .level-badge .nm { font-size: 14px; font-weight: 500; color: var(--text-secondary); } /* ---------- atomic answer ---------- */ .atomic { margin-top: 28px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); } .atomic .kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-strong); } .atomic .kicker .spark { width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); } .atomic p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--text-primary); text-wrap: pretty; } /* ---------- section heading ---------- */ .sec { margin-top: 46px; } .sec > h2 { margin: 0 0 6px; font-size: clamp(21px, 4.6vw, 27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .sec > .lead { margin: 0 0 18px; color: var(--text-secondary); font-size: 16px; text-wrap: pretty; } .prose p { color: var(--text-secondary); margin: 14px 0; } .prose strong { color: var(--text-primary); font-weight: 700; } .prose h3 { font-size: 18px; font-weight: 700; margin: 24px 0 6px; color: var(--text-primary); } /* ---------- category bar chart (pure SVG) ---------- */ .chart { margin-top: 8px; padding: 22px 22px 18px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); } .chart svg { width: 100%; height: auto; display: block; overflow: visible; } .chart .c-track { fill: var(--surface-inset); } .chart .c-val { } .chart .c-val.band-low { fill: var(--score-low); } .chart .c-val.band-mid { fill: var(--score-mid); } .chart .c-val.band-high { fill: var(--score-high); } .chart .c-label { fill: var(--text-primary); font-size: 14px; font-weight: 600; } .chart .c-score { fill: var(--text-secondary); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } /* ---------- screenshot gallery ---------- */ .gallery { display: grid; gap: 18px; margin-top: 8px; } @media (min-width: 600px) { .gallery.two { grid-template-columns: 1fr 1fr; } } .shot { display: grid; gap: 10px; } .shot-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--surface-border); background: var(--surface-card); box-shadow: var(--shadow-sm); } .shot-chrome { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface-card-strong); border-bottom: 1px solid var(--surface-border); } .shot-chrome .dots { display: inline-flex; gap: 5px; } .shot-chrome .dots i { width: 9px; height: 9px; border-radius: 9px; background: var(--surface-border-strong); } .shot-chrome .bar { flex: 1; min-width: 0; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; color: var(--text-tertiary); background: var(--surface-inset); font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shot-img { aspect-ratio: 16 / 10; } .shot-cap { font-size: 12.5px; color: var(--text-tertiary); font-family: ui-monospace, "SF Mono", Menlo, monospace; line-height: 1.5; } /* placeholder fill (striped) for posters & screenshots */ .ph { width: 100%; height: 100%; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ctp-overlay0) 16%, transparent) 0 2px, transparent 2px 11px), linear-gradient(180deg, var(--surface-card-strong), var(--surface-inset)); display: grid; place-items: center; } .ph span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .03em; color: var(--text-tertiary); text-align: center; padding: 0 10px; max-width: 90%; } /* ---------- fix cards (Goal / Issue / Fix) ---------- */ .fixes { display: grid; gap: 14px; margin-top: 6px; } .fix { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); } .fix-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--surface-border); } .fix-head .n { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--on-accent); background: var(--accent); } .fix-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; } .fix-rows { display: grid; } .fix-rows .r { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 13px 18px; } .fix-rows .r + .r { border-top: 1px solid var(--surface-border); } .fix-rows .r .lab { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding-top: 2px; } .fix-rows .r.goal .lab { color: var(--text-tertiary); } .fix-rows .r.issue .lab { color: var(--score-low); } .fix-rows .r.fix .lab { color: var(--score-high); } .fix-rows .r p { margin: 0; font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; } .fix-rows .r.fix p { color: var(--text-primary); } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 10px; margin-top: 6px; } .faq details { border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-sm); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15.5px; font-weight: 700; color: var(--text-primary); } .faq summary::-webkit-details-marker { display: none; } .faq summary .chev { flex: none; width: 18px; height: 18px; color: var(--text-tertiary); transition: transform .2s; } .faq details[open] summary .chev { transform: rotate(180deg); } .faq .ans { padding: 0 18px 16px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; } /* ---------- CTA ---------- */ .cta { margin-top: 46px; padding: 30px 26px; border-radius: var(--radius-xl); text-align: center; display: grid; gap: 14px; justify-items: center; background: radial-gradient(640px 200px at 50% -40%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%), var(--surface-card); border: 1px solid var(--surface-border); box-shadow: var(--shadow-md); } .cta h2 { margin: 0; font-size: clamp(22px, 5vw, 28px); font-weight: 800; letter-spacing: -.02em; } .cta p { margin: 0; color: var(--text-secondary); max-width: 48ch; } .cta-btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; padding: 14px 26px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; color: var(--on-accent); background: var(--accent); box-shadow: var(--shadow-accent); transition: transform .12s ease; } .cta-btn:hover { transform: translateY(-2px); } .cta-btn svg { width: 18px; height: 18px; } /* ---------- related ---------- */ .related { margin-top: 46px; } .related h2 { margin: 0 0 16px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; } /* reveal-on-load for hidden hub cards */ .is-hidden { display: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }