/* cork.css — the corkboard look for every page that doesn't carry its own copy. Added 2026-09-16 so the whole site reads as one TackBoard: CSS-only cork, paper sheets with red pins, pastel sticky notes. Linked last in , so it wins over each page's own styles without touching any copy (and so without touching any of the 18 translations). The home pages, /blog, /reviews, /roadmap and /review-edit have their own inline versions of this look, so /review-edit's .stage is deliberately not a sheet here (its heading is cream-on-cork). */ :root { --cork: #c79a5e; --paper: #FDFAF7; --ink-muted: #645C50; } body { background-color: var(--cork) !important; background-image: radial-gradient(circle at 18% 24%, rgba(90,60,28,.20) 0 1.6px, transparent 2.6px), radial-gradient(circle at 62% 16%, rgba(140,100,58,.18) 0 2px, transparent 3px), radial-gradient(circle at 82% 62%, rgba(80,52,22,.18) 0 1.4px, transparent 2.4px), radial-gradient(circle at 34% 74%, rgba(150,112,66,.16) 0 2.2px, transparent 3.2px), radial-gradient(circle at 8% 88%, rgba(90,60,28,.16) 0 1.5px, transparent 2.5px), radial-gradient(circle at 50% 48%, rgba(255,240,210,.10) 0 1.2px, transparent 2.2px), linear-gradient(135deg, rgba(255,235,200,.10), rgba(120,82,38,.10)) !important; background-size: 84px 84px, 116px 116px, 96px 96px, 132px 132px, 72px 72px, 60px 60px, 100% 100% !important; } .hero-grid, .faq-hero-grid { display: none !important; } /* ---------- sheets: every top-level block of content is paper pinned to the board ---------- */ body > section, body > .features-dark, body > .quote-section, body > .faq-section, body > .pricing-section, body > #pricing, body > .wrap, body > main, .article-hero, .article-body, .faq-hero, .faq-wrap, .faq-cta, .legal-wrap, .legal, .guide-wrap { position: relative; background: var(--paper) !important; border: none !important; border-radius: 6px; box-shadow: 0 18px 40px rgba(60,38,12,.28), 0 3px 8px rgba(26,23,20,.12); width: calc(100% - 48px); margin: 56px auto !important; box-sizing: border-box; } body > .features-dark { background: #1f1b17 !important; } /* full-bleed bands become sheets the width of the board */ body > section.hero, body > .features-dark, body > .quote-section, body > .faq-section { max-width: 1180px; } body > .wrap, body > main { padding-block: 48px; padding-inline: clamp(20px, 5vw, 56px); } /* the pin */ body > section::after, body > .features-dark::after, body > .quote-section::after, body > .faq-section::after, body > .pricing-section::after, body > #pricing::after, body > .wrap::after, body > main::after, .article-hero::after, .faq-hero::after, .faq-wrap::after, .faq-cta::after, .legal-wrap::after, .legal::after, .guide-wrap::after { content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; z-index: 5; pointer-events: none; background: radial-gradient(circle at 34% 30%, #ff8a6a 0 28%, #E8622A 72%); box-shadow: 0 4px 7px rgba(26,23,20,.4); border: 1px solid rgba(0,0,0,.06); } /* pages built under a fixed header: the first sheet clears it instead of padding for it */ [data-tn-nav="fixed"] .article-hero, [data-tn-nav="fixed"] body > section.hero { margin-top: 112px !important; padding-top: 56px !important; } /* a blog post is one sheet: hero and body joined, the text measure kept */ .article-hero { max-width: 860px; margin-bottom: 0 !important; border-radius: 6px 6px 0 0; padding-bottom: 24px !important; clip-path: inset(-60px -60px 0 -60px); } .article-body { max-width: 860px; margin-top: 0 !important; border-radius: 0 0 6px 6px; padding: 8px clamp(20px, 7vw, 90px) 56px !important; } .related { max-width: 860px; width: calc(100% - 48px); margin-inline: auto !important; } .related h2, .related h3, .related .related-title { color: #fff8ec; text-shadow: 0 2px 8px rgba(60,38,12,.45); } /* ---------- sticky notes ---------- */ .use-case-card, .feature-card, .badge-card, .card, .related a { position: relative; background: #FFF6CE !important; border: none !important; border-radius: 3px !important; backdrop-filter: none !important; box-shadow: 0 11px 24px rgba(60,38,12,.22), 0 2px 5px rgba(26,23,20,.10) !important; transform: rotate(-1deg); transition: transform .18s ease, box-shadow .18s ease; } .use-case-card:nth-child(5n+2), .feature-card:nth-child(5n+2), .badge-card:nth-child(5n+2), .related a:nth-child(5n+2) { background: #FFE7CE !important; } .use-case-card:nth-child(5n+3), .feature-card:nth-child(5n+3), .badge-card:nth-child(5n+3), .related a:nth-child(5n+3) { background: #E6F1D8 !important; } .use-case-card:nth-child(5n+4), .feature-card:nth-child(5n+4), .badge-card:nth-child(5n+4), .related a:nth-child(5n+4) { background: #DCEBF3 !important; } .use-case-card:nth-child(5n), .feature-card:nth-child(5n), .badge-card:nth-child(5n), .related a:nth-child(5n) { background: #F4E2EF !important; } .use-case-card:nth-child(even), .feature-card:nth-child(even), .badge-card:nth-child(even), .card:nth-child(even), .related a:nth-child(even) { transform: rotate(1.1deg); } .use-case-card:hover, .feature-card:hover, .badge-card:hover, .related a:hover { transform: rotate(0) translateY(-4px) !important; box-shadow: 0 20px 38px rgba(60,38,12,.30) !important; } /* a card holding a form stays level: typing on a tilted field is harder than it looks */ .card:has(input, textarea, select, .cf-turnstile) { transform: none !important; } .pricing-card { border: none !important; border-radius: 6px !important; transform: rotate(-.8deg); box-shadow: 0 18px 40px rgba(60,38,12,.24) !important; } /* shared footer on paper */ .tn-footer { background: rgba(253,250,247,.92) !important; border-radius: 18px 18px 0 0; max-width: 1100px; margin: 60px auto 0 !important; } @media (max-width: 768px) { body > section, body > .features-dark, body > .quote-section, body > .faq-section, body > .pricing-section, body > #pricing, body > .wrap, body > main, .article-hero, .article-body, .faq-hero, .faq-wrap, .faq-cta, .legal-wrap, .legal, .guide-wrap, .related { width: calc(100% - 20px); margin-top: 36px !important; margin-bottom: 36px !important; } .article-hero { margin-bottom: 0 !important; } .article-body { margin-top: 0 !important; } [data-tn-nav="fixed"] .article-hero, [data-tn-nav="fixed"] body > section.hero { margin-top: 92px !important; padding-top: 40px !important; } } @media (prefers-reduced-motion: reduce) { .use-case-card, .feature-card, .badge-card, .card, .related a { transition: none; } } @media print { body { background: #fff !important; } body > section, body > .wrap, body > main, .article-hero, .article-body, .faq-hero, .faq-wrap, .legal-wrap, .legal, .guide-wrap { box-shadow: none; margin: 0 auto !important; } body > section::after, body > .wrap::after, body > main::after, .article-hero::after, .faq-hero::after, .faq-wrap::after, .legal-wrap::after, .legal::after, .guide-wrap::after { display: none; } }