/* ============================================================ GoPromotes — static promo-blog site styles Design system: warm paper + ink, emerald primary, amber/coral accents Fonts: Sora (display) + Inter (body), loaded in ============================================================ */ /* ---------- Tokens ---------- */ :root { /* palette */ --paper: #faf7f0; --paper-2: #f3eee2; --card: #ffffff; --ink: #1d1b16; --ink-soft: #57534b; --ink-faint: #8a857a; --line: #e7e0d1; --line-strong: #d8cfba; --brand: #0f7a4d; --brand-deep: #0a5a38; --brand-ink: #10231b; --brand-soft: #e3f2e9; --amber: #e8a33d; --amber-soft: #fdf1dc; --coral: #e2572e; --coral-soft: #fde9e1; /* type */ --font-display: "Sora", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* geometry */ --radius-lg: 20px; --radius-md: 14px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(29, 27, 22, 0.06); --shadow-md: 0 6px 18px -6px rgba(29, 27, 22, 0.14); --shadow-lg: 0 18px 40px -14px rgba(16, 35, 27, 0.28); /* layout */ --container: 1180px; --nav-h: 68px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--brand-deep); text-decoration: none; } a:hover { text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 0.5em; } p { margin: 0 0 1em; } ul { padding-left: 1.2em; } figure { margin: 0; } ::selection { background: var(--amber); color: var(--ink); } .container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } .section { padding: 64px 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .section-head h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin: 0; } .section-head p { margin: 0; color: var(--ink-soft); } .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 8px; } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--amber); } /* ---------- Announcement bar ---------- */ .announce { background: var(--brand-ink); color: #d9e8df; font-size: 0.86rem; text-align: center; padding: 8px 16px; } .announce strong { color: #fff; } .announce .sample-note { opacity: 0.7; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 240, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; gap: 20px; height: var(--nav-h); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: var(--ink); letter-spacing: -0.02em; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-deep); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.95rem; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); } .brand small { display: block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-faint); font-family: var(--font-body); } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-links a { padding: 9px 13px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 550; font-size: 0.94rem; transition: color 0.16s ease, background 0.16s ease; } .nav-links a:hover { color: var(--ink); background: var(--paper-2); } .nav-cta { margin-left: 8px; background: var(--brand); color: #fff !important; font-weight: 600; padding: 10px 18px !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm); } .nav-cta:hover { background: var(--brand-deep); } .nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: 0.2s; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 650; font-size: 0.95rem; padding: 13px 22px; border-radius: var(--radius-md); border: 0; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; text-decoration: none; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--brand-deep); box-shadow: var(--shadow-lg); } .btn-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); } .btn-light:hover { background: var(--paper-2); } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); } .btn-ghost:hover { border-color: var(--ink); background: #fff; } .btn-cta { background: var(--amber); color: var(--ink); box-shadow: var(--shadow-md); width: 100%; } .btn-cta:hover { background: #db9230; } .btn .aff-flag { font-size: 0.68rem; font-weight: 700; background: rgba(0,0,0,0.12); padding: 2px 7px; border-radius: 20px; letter-spacing: 0.04em; } .btn .sec-arrow { display: inline-block; transition: transform 0.18s ease; } .btn:hover .sec-arrow { transform: translateX(4px); } /* ---------- Hero (index) ---------- */ .hero { position: relative; overflow: hidden; color: #eef4ef; background: radial-gradient(1100px 500px at 85% -10%, rgba(232, 163, 61, 0.16), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(15, 122, 77, 0.35), transparent 55%), var(--brand-ink); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 44px 44px; } .hero .container { position: relative; z-index: 1; padding-top: 84px; padding-bottom: 96px; } /* Gentle scroll-down cue (homepage) */ .hero-scroll { position: absolute; right: 28px; bottom: 26px; opacity: 0.75; transition: opacity 0.2s ease, transform 0.2s ease; } .hero-scroll:hover { opacity: 1; transform: translateY(3px); } .hs-track { display: block; width: 24px; height: 40px; border: 2px solid rgba(255,255,255,0.5); border-radius: 14px; position: relative; } .hs-track i { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 3px; background: var(--amber); animation: hs-nudge 1.8s ease-in-out infinite; } @keyframes hs-nudge { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(9px); opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .hs-track i { animation: none; } } .hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); color: #fff; max-width: 14ch; margin-bottom: 18px; } .hero h1 .accent { color: var(--amber); } .hero .lede { max-width: 56ch; color: #c9d8cf; font-size: 1.1rem; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-trust { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; color: #9fb5a9; font-size: 0.86rem; } .hero-trust b { color: #eaf3ed; font-family: var(--font-display); } /* ---------- Category nav (chips grid) ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .cat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; position: relative; overflow: hidden; } .cat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--amber); opacity: 0; transition: opacity 0.16s; } .cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .cat-card:hover::before { opacity: 1; } .cat-card .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; background: var(--brand-soft); } .cat-card b { font-family: var(--font-display); font-size: 0.95rem; } .cat-card span { font-size: 0.78rem; color: var(--ink-faint); } .cat-card:nth-child(2n) .ico { background: var(--amber-soft); } .cat-card:nth-child(3n) .ico { background: var(--coral-soft); } /* ---------- Section bands ---------- */ .band-alt { background: var(--paper-2); } .band-dark { background: var(--brand-ink); color: #dbe7df; } .band-dark .section-head h2 { color: #fff; } .band-dark .section-head p { color: #a7bdb0; } /* ---------- Deal cards ---------- */ .deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .deal-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 12px 12px 0 0; background: var(--paper-2); } .deal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease; } .deal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .deal-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .deal-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; } .tag-hot { background: var(--coral-soft); color: var(--coral); } .tag-new { background: var(--brand-soft); color: var(--brand-deep); } .tag-end { background: var(--amber-soft); color: #a06a12; } .tag-fav { background: #eee9f8; color: #6b4fc0; } .sample-pill { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; padding: 2px 7px; border: 1px dashed var(--ink-faint); color: var(--ink-faint); border-radius: 4px; } .deal-name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; margin: 0; } .deal-cat { font-size: 0.76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .deal-desc { font-size: 0.9rem; color: var(--ink-soft); flex-grow: 1; margin: 0; } .deal-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--ink-soft); } .deal-count { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; color: var(--coral); background: var(--coral-soft); padding: 3px 8px; border-radius: 20px; } .deal-count b { color: var(--coral); } .deal-price { text-align: right; } .deal-price .cur { font-size: 0.68rem; color: var(--ink-faint); display: block; text-transform: uppercase; letter-spacing: 0.06em; } .deal-price .amt { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; } .deal-price .amt s { color: var(--ink-faint); font-weight: 500; font-size: 0.85rem; margin-right: 6px; } .deal-foot { display: flex; gap: 8px; align-items: center; } .deal-foot .btn { padding: 9px 14px; font-size: 0.86rem; flex: 1; } .deal-foot .fake-link { font-size: 0.74rem; color: var(--ink-faint); text-decoration: underline dotted; cursor: help; } /* ---------- Countdown ---------- */ .count-zone { font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; } .count-bar { width: 70px; height: 5px; background: var(--paper-2); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; } .count-bar i { display: block; height: 100%; width: 100%; background: var(--coral); border-radius: 4px; animation: drain 6s linear infinite; transform-origin: left; } @keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0.25); } } /* ---------- Guide / article cards ---------- */ .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } .guide-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); transition: transform 0.18s ease, box-shadow 0.18s ease; } .guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .guide-thumb { aspect-ratio: 16 / 9; background: var(--paper-2); position: relative; display: grid; place-items: center; } .guide-thumb .ph { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: rgba(16, 35, 27, 0.18); letter-spacing: 0.02em; } .guide-thumb .ph-meta { position: absolute; right: 10px; bottom: 8px; font-size: 0.62rem; color: var(--ink-faint); letter-spacing: 0.08em; } .guide-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; } .guide-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pill { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; background: var(--brand-soft); color: var(--brand-deep); } .pill.amber { background: var(--amber-soft); color: #a06a12; } .pill.coral { background: var(--coral-soft); color: var(--coral); } .pill.neutral { background: var(--paper-2); color: var(--ink-soft); } .guide-date { font-size: 0.76rem; color: var(--ink-faint); margin-left: auto; } .guide-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; margin: 0; line-height: 1.35; } .guide-ex { font-size: 0.9rem; color: var(--ink-soft); margin: 0; } .guide-more { margin-top: auto; font-weight: 650; font-size: 0.9rem; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 6px; } .guide-more::after { content: "→"; transition: transform 0.15s ease; } .guide-card:hover .guide-more::after { transform: translateX(4px); } /* ---------- Post layout ---------- */ .post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; } .post-main { min-width: 0; } .post-main .article-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 44px); } .breadcrumb { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 18px; } .breadcrumb a { color: var(--ink-soft); } .breadcrumb a:hover { color: var(--brand-deep); } .post-hero-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 14px; } .post-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--ink-faint); font-size: 0.84rem; margin-bottom: 20px; } .post-meta .dot { opacity: 0.5; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-deep); color: #fff; display: inline-grid; place-items: center; font-size: 0.72rem; font-weight: 700; font-family: var(--font-display); } .post-hero-img { aspect-ratio: 16 / 7; border-radius: var(--radius-md); background: linear-gradient(120deg, var(--brand-soft), var(--amber-soft)); display: grid; place-items: center; margin-bottom: 26px; border: 1px solid var(--line); color: rgba(16,35,27,0.35); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; } .post-hero-img small { display: block; text-align: center; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em; } /* disclosure callout */ .disclosure { background: var(--amber-soft); border: 1px solid #f0dcb4; border-left: 4px solid var(--amber); border-radius: var(--radius-md); padding: 14px 18px; font-size: 0.88rem; color: #6d5526; margin: 22px 0; } .disclosure b { display: inline-flex; align-items: center; gap: 6px; } .disclosure .fine { display: block; margin-top: 4px; font-size: 0.78rem; opacity: 0.85; } /* article typography */ .article-body { font-size: 1.02rem; } .article-body h2 { font-size: 1.45rem; margin: 2em 0 0.6em; scroll-margin-top: calc(var(--nav-h) + 20px); } .article-body h3 { font-size: 1.16rem; margin: 1.6em 0 0.5em; scroll-margin-top: calc(var(--nav-h) + 20px); } .article-body p { margin-bottom: 1.15em; } .article-body ul { margin-bottom: 1.2em; } .article-body li { margin-bottom: 0.4em; } .article-body .lead { font-size: 1.12rem; color: var(--ink-soft); } .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; } .pros-cons .box { border-radius: var(--radius-md); padding: 16px 18px; font-size: 0.94rem; } .pros-cons .pros { background: var(--brand-soft); border: 1px solid #cfe6d7; } .pros-cons .cons { background: var(--coral-soft); border: 1px solid #f6d2c6; } .pros-cons h4 { margin: 0 0 8px; font-size: 0.95rem; } .article-body .cta-wrap { background: var(--paper-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 24px; margin: 28px 0; text-align: center; } .article-body .cta-wrap p { margin-bottom: 14px; } .cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .article-body blockquote { margin: 22px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--amber); color: var(--ink-soft); font-style: italic; } /* TOC sidebar */ .toc { position: sticky; top: calc(var(--nav-h) + 24px); } .toc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; } .toc-card h4 { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; } .toc-list a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--ink-soft); border-left: 2px solid transparent; } .toc-list a:hover { color: var(--ink); background: var(--paper-2); } .toc-list a.active { color: var(--brand-deep); font-weight: 650; border-left-color: var(--brand); background: var(--brand-soft); } .toc-side .mini-cta { margin-top: 16px; background: var(--brand-ink); color: #e8f0ea; border-radius: var(--radius-md); padding: 16px; font-size: 0.85rem; } .toc-side .mini-cta b { color: var(--amber); display: block; font-family: var(--font-display); margin-bottom: 4px; } .toc-side .mini-cta .btn { margin-top: 10px; font-size: 0.84rem; padding: 10px 14px; width: 100%; } /* author box */ .author-box { display: flex; gap: 16px; background: var(--paper-2); border-radius: var(--radius-lg); padding: 20px; margin-top: 34px; align-items: flex-start; } .author-box .avatar { width: 52px; height: 52px; font-size: 1.1rem; flex-shrink: 0; } .author-box h4 { margin: 0 0 2px; font-size: 1rem; } .author-box p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); } /* ---------- Category page ---------- */ .cat-hero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 46px 0; } .cat-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 6px; } .cat-hero .sub { color: var(--ink-soft); max-width: 62ch; margin: 0; } .cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .cat-tab { font-size: 0.84rem; font-weight: 600; padding: 8px 15px; border-radius: 30px; border: 1.5px solid var(--line-strong); color: var(--ink-soft); background: var(--card); cursor: pointer; transition: 0.15s ease; } .cat-tab:hover { border-color: var(--ink); color: var(--ink); } .cat-tab.active { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; } .pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; } .pager .btn { padding: 9px 16px; font-size: 0.86rem; } .pager .page-dots { font-size: 0.8rem; color: var(--ink-faint); letter-spacing: 0.1em; } .pager .cur-page { font-weight: 800; font-family: var(--font-display); } /* ---------- Simple pages (about / disclosure) ---------- */ .simple-hero { padding: 64px 0 34px; } .simple-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 8px; } .simple-hero .sub { color: var(--ink-soft); font-size: 1.08rem; max-width: 64ch; } .page-stack { display: grid; gap: 26px; max-width: 820px; } .page-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; } .page-card h2 { font-size: 1.25rem; } .page-card h3 { font-size: 1.05rem; } .page-card ul li { margin-bottom: 0.5em; } .page-card .num { font-family: var(--font-display); font-weight: 800; color: var(--amber); margin-right: 6px; } .info-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px 20px; font-size: 0.95rem; } .info-row dt { font-weight: 650; color: var(--ink-soft); } .info-row dd { margin: 0; } /* ---------- Newsletter ---------- */ .newsletter { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; } .newsletter h2 { margin-bottom: 6px; font-size: 1.4rem; } .newsletter p { color: var(--ink-soft); margin: 0; font-size: 0.94rem; } .news-form { display: flex; gap: 10px; } .news-form input { flex: 1; min-width: 0; border: 1.5px solid var(--line-strong); background: #fff; border-radius: var(--radius-md); padding: 13px 15px; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); } .news-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 122, 77, 0.15); } /* ---------- Footer ---------- */ .site-footer { background: var(--brand-ink); color: #b6c8bd; margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding: 52px 0 36px; } .footer-grid h5 { color: #fff; font-family: var(--font-display); font-size: 0.92rem; margin: 0 0 14px; letter-spacing: 0.02em; } .footer-grid a { display: block; color: #b6c8bd; font-size: 0.9rem; padding: 4px 0; } .footer-grid a:hover { color: var(--amber); } .footer-brand .brand { color: #fff; } .footer-brand p { font-size: 0.88rem; margin: 14px 0 0; max-width: 34ch; } .footer-legal { border-top: 1px solid rgba(255,255,255,0.09); padding: 22px 0 28px; font-size: 0.78rem; color: #8ba094; } .footer-legal p { margin: 0 0 8px; max-width: 90ch; } .footer-legal .mini-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; } .footer-legal .mini-nav a { color: #9db4a6; } .footer-legal .mini-nav a:hover { color: var(--amber); } /* ---------- Reveal animation ---------- Only elements below the initial viewport get the hidden `.pre` state (added by JS) — everything visible at load renders immediately, so screenshots, link previews and first paint never show empty bands. */ .js .reveal { transition: opacity 0.55s ease, transform 0.55s ease; } .js .reveal.pre { opacity: 0; transform: translateY(16px); } .reveal.in { opacity: 1; transform: none; } /* Below-fold items first get .pre (specificity 0,3,0) which beats .in (0,2,0). When the observer later adds .in, the card would stay invisible without this combined rule (0,4,0) forcing it visible. (AppSumo deal site — GoPromotes reveal fix.) */ .js .reveal.pre.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js .reveal.pre, .js .reveal.pre.in { opacity: 1; transform: none; transition: none; } .count-bar i { animation: none; } .btn, .deal-card, .guide-card, .cat-card { transition: none; } } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .post-grid { grid-template-columns: 1fr; } .toc { position: static; order: -1; } .toc-card { padding: 14px 16px; } .toc-list { max-height: none; flex-direction: row; flex-wrap: wrap; gap: 4px; } .footer-grid { grid-template-columns: 1fr 1fr; } .newsletter { grid-template-columns: 1fr; } } @media (max-width: 720px) { .section { padding: 46px 0; } .nav-burger { display: block; } .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px 18px 18px; display: none; box-shadow: var(--shadow-lg); z-index: 49; } .nav-links.open { display: flex; } .nav-links a { padding: 12px 10px; font-size: 1rem; } .nav-cta { margin-left: 0; text-align: center; } .cta-row, .pros-cons { grid-template-columns: 1fr; } .info-row { grid-template-columns: 1fr; gap: 2px; } .footer-grid { grid-template-columns: 1fr; gap: 26px; } .news-form { flex-direction: column; } } /* ============================================================ Real-guide extras (tables, figures, snippet boxes, step-flow timeline, branded ad placeholders) — added for the real guides. ============================================================ */ /* Comparison tables */ .table-scroll { overflow-x: auto; margin: 26px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); } .cmp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 560px; } .cmp-table th { background: var(--paper-2); font-family: var(--font-display); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); text-align: left; } .cmp-table th, .cmp-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } .cmp-table tbody tr:nth-child(even) { background: #fdfbf6; } .cmp-table tbody tr:last-child td { border-bottom: 0; } .cmp-table td:first-child { font-weight: 600; } .cmp-table .tick { color: var(--brand); font-weight: 800; } .cmp-table .cross { color: var(--coral); font-weight: 800; } .cmp-table .muted { color: var(--ink-faint); font-weight: 400; } /* Figures (official product screenshots) */ figure.article-fig { margin: 26px 0; } .article-fig img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-2); } .article-fig figcaption { font-size: 0.78rem; color: var(--ink-faint); margin-top: 8px; line-height: 1.5; } .post-hero-img.photo { padding: 0; overflow: hidden; background: var(--paper-2); } .post-hero-img.photo img { width: 100%; height: 100%; object-fit: cover; } /* "Information gain" fast-answer box */ .info-gain { background: var(--amber-soft); border: 1px solid #f0dcb4; border-left: 4px solid var(--amber); border-radius: var(--radius-md); padding: 18px 22px; margin: 26px 0; } .info-gain .ig-label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #a06a12; margin-bottom: 10px; } .info-gain p { margin: 0; } /* ============================================================ Premium step-flow timeline (v4) Replaces the old monospace ASCII process map. A vertical connector rail links numbered badge + icon cards. ============================================================ */ /* Lead-in "Setup" chip (the old top box of the ASCII map) */ .step-flow-pre { display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap; background: var(--brand-soft); border: 1.5px dashed #b6dcc5; color: var(--brand-deep); border-radius: var(--radius-md); padding: 9px 16px 9px 10px; margin: 4px 0 20px; font-size: 0.92rem; box-shadow: var(--shadow-sm); } .step-flow-pre p { margin: 0; } .step-flow-pre .sfp-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: var(--brand-deep); color: #fff; display: grid; place-items: center; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); } /* Timeline list: badges on the rail, cards to the right */ .step-flow { list-style: none; margin: 0 0 10px; padding: 0; position: relative; display: grid; gap: 14px; } .step-flow::before { content: ""; position: absolute; left: 21px; top: 34px; bottom: 16px; width: 2px; background: linear-gradient(180deg, var(--amber), var(--brand) 55%, var(--line-strong)); border-radius: 2px; opacity: 0.65; } .step-flow-item { position: relative; padding-left: 86px; } .step-flow-badge { position: absolute; left: 0; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--brand-deep); box-shadow: 0 0 0 5px var(--paper), var(--shadow-sm); z-index: 1; } .step-flow-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 18px; display: flex; gap: 13px; align-items: flex-start; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .step-flow-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .step-flow-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: var(--brand-soft); color: var(--brand-deep); display: grid; place-items: center; } .step-flow-body h4 { margin: 1px 0 3px; font-size: 0.98rem; } .step-flow-body p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); } @media (max-width: 560px) { .step-flow-item { padding-left: 64px; } .step-flow::before { left: 17px; } .step-flow-badge { width: 36px; height: 36px; font-size: 0.92rem; } .step-flow-card { padding: 12px 13px; gap: 10px; flex-direction: column; } .step-flow-ico { width: 30px; height: 30px; border-radius: 9px; } } @media (prefers-reduced-motion: reduce) { .step-flow-card, .step-flow-card:hover { transform: none; transition: none; } } /* ============================================================ Branded ad placeholders + graceful collapse (v4) The fake AdSense snippets were removed. Each former slot is now a deliberate, elegant placeholder panel; a real responsive unit can be dropped inside .ad-slot later, and the JS guard collapses the wrapper if an ad ever fails to fill. ============================================================ */ .ad-slot { margin: 30px 0; } .ad-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 26px 24px 22px; background: var(--paper-2); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-faint); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .ad-placeholder::before { content: ""; position: absolute; inset: 7px; pointer-events: none; border-radius: calc(var(--radius-lg) - 7px); border: 1px solid rgba(216, 207, 186, 0.55); } .ad-placeholder:hover { border-color: #c9bda0; box-shadow: var(--shadow-sm); } .ad-eyebrow { position: relative; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); background: var(--card); border: 1px solid var(--line-strong); padding: 4px 13px; border-radius: 30px; margin-bottom: 3px; } .ad-ico { position: relative; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--brand); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .ad-msg { position: relative; margin: 3px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; } .ad-msg strong { font-family: var(--font-display); font-size: 1.04rem; color: var(--ink); } .ad-msg span { font-size: 0.8rem; color: var(--ink-faint); } .ad-note { position: relative; margin: 4px auto 0; max-width: 54ch; font-size: 0.8rem; line-height: 1.55; color: var(--ink-faint); } /* Graceful collapse: JS adds this when a real unit renders empty */ .ad-slot.ad-collapsed { display: none; } @media (max-width: 560px) { .ad-placeholder { padding: 22px 16px 20px; } } /* Photo thumbnails inside guide cards (homepage / category grids) */ .guide-thumb.thumb-photo .ph, .guide-thumb.thumb-photo .ph-meta { display: none; } .guide-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ============================================================ v4 premium polish — richer surfaces, clearer hierarchy Visual only: no content, links, or SEO structure changes. ============================================================ */ /* Article card + type hierarchy */ .post-main .article-card { box-shadow: 0 1px 2px rgba(29,27,22,0.04), 0 26px 50px -30px rgba(16,35,27,0.28); } .article-body h2 { margin-top: 2.1em; } .article-body h2::after { content: ""; display: block; width: 52px; height: 3px; margin-top: 12px; border-radius: 99px; background: var(--amber); } .article-body h3 { color: var(--brand-ink); } /* Refined pros/cons boxes */ .pros-cons .box { box-shadow: var(--shadow-sm); } .pros-cons h4 { display: flex; align-items: center; gap: 8px; } .pros-cons .pros h4::before { content: "\2713"; color: var(--brand); font-weight: 800; } .pros-cons .cons h4::before { content: "\2715"; color: var(--coral); font-weight: 800; } /* "Information gain" fast-answer box */ .info-gain { border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(29,27,22,0.04), 0 16px 32px -24px rgba(160,106,18,0.6); } /* Disclosure callout */ .disclosure { border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(29,27,22,0.03); } /* Affiliate CTA blocks */ .article-body .cta-wrap { position: relative; overflow: hidden; background: radial-gradient(560px 180px at 50% -60px, rgba(232,163,61,0.2), transparent 70%), var(--paper-2); border: 1px solid #ead9b4; box-shadow: var(--shadow-md); } .article-body .cta-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--amber); } .article-body .cta-wrap > * { position: relative; } .cta-row .btn-cta { box-shadow: 0 12px 24px -12px rgba(216,147,48,0.75); } .cta-row .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(216,147,48,0.85); } /* Comparison tables */ .table-scroll { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .cmp-table th { background: var(--brand-ink); color: #eef4ef; font-weight: 650; letter-spacing: 0.08em; } .cmp-table tbody tr { transition: background 0.12s ease; } .cmp-table tbody tr:hover td { background: var(--amber-soft); } .cmp-table tbody tr:hover td:first-child { color: var(--brand-deep); } /* Figures */ .article-fig img { box-shadow: var(--shadow-sm); } .post-hero-img.photo { border-radius: var(--radius-lg); } /* Focus visibility */ .btn:focus-visible, a:focus-visible, .cat-tab:focus-visible { outline: 3px solid rgba(15,122,77,0.35); outline-offset: 2px; } /* Card hover depth + thumbnail zoom (homepage + article rails) */ .deal-card:hover, .guide-card:hover { border-color: #d6ccb4; box-shadow: 0 16px 38px -18px rgba(16,35,27,0.32); } .guide-thumb img { transition: transform 0.5s ease; } .guide-card:hover .guide-thumb img { transform: scale(1.045); } .section { padding: 70px 0; } @media (max-width: 720px) { .section { padding: 46px 0; } } @media (prefers-reduced-motion: reduce) { .guide-thumb img, .cmp-table tbody tr { transition: none; } }