/* === Shopify CSS Imports (auto) === */ @import url("https://pickleheadshop.com/cdn/shopifycloud/portable-wallets/latest/accelerated-checkout-backwards-compat.css"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-cart-items.css?v=127384614032664249911728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-predictive-search.css?v=118923337488134913561728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/base.css?v=128821462606845544911737778037"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-cart-drawer.css?v=19530961819213608911728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-cart.css?v=165982380921400067651728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-totals.css?v=15906652033866631521728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-price.css?v=70172745017360139101728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-discounts.css?v=152760482443307489271728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/quantity-popover.css?v=78745769908715669131728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-card.css?v=120341546515895839841728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-slideshow.css?v=170654395204511176521728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-slider.css?v=14039311878856620671728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-list-menu.css?v=151968516119678728991728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-search.css?v=165164710990765432851728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-menu-drawer.css?v=110695408305392539491728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-cart-notification.css?v=54116361853792938221728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/section-image-banner.css?v=124819179385751388401728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/template-collection.css?v=58558206033505836701728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-rating.css?v=179577762467860590411728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-volume-pricing.css?v=111870094811454961941728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/quick-order-list.css?v=38387008350345892421728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/section-rich-text.css?v=155250126305810049721728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/section-footer.css?v=132862842274480233871736545261"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-newsletter.css?v=4727253280200485261728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-list-payment.css?v=69253961410771838501728272323"); @import url("https://pickleheadshop.com/cdn/shop/t/2/assets/component-list-social.css?v=35792976012981934991728272323"); /* === Shopify inline styles (auto) === */ #shopify-buyer-consent { margin-top: 1em; display: inline-block; width: 100%; } #shopify-buyer-consent.hidden { display: none; } #shopify-subscription-policy-button { background: none; border: none; padding: 0; text-decoration: underline; font-size: inherit; cursor: pointer; } #shopify-subscription-policy-button::before { box-shadow: none; } @font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_n4.c32e4d4eca5273f6d4ee95ddf54b5bbb75fc9b61.woff2") format("woff2"), url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_n4.5f3406f8d94162b37bfa232b486ac93ee892406d.woff") format("woff"); } @font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_n7.a9393be1574ea8606c68f4441806b2711d0d13e4.woff2") format("woff2"), url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_n7.7b8af34a6ebf52beb1a4c1d8c73ad6910ec2e553.woff") format("woff"); } @font-face { font-family: "Open Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_i4.6f1d45f7a46916cc95c694aab32ecbf7509cbf33.woff2") format("woff2"), url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_i4.4efaa52d5a57aa9a57c1556cc2b7465d18839daa.woff") format("woff"); } @font-face { font-family: "Open Sans"; font-weight: 700; font-style: italic; font-display: swap; src: url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_i7.916ced2e2ce15f7fcd95d196601a15e7b89ee9a4.woff2") format("woff2"), url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_i7.99a9cff8c86ea65461de497ade3d515a98f8b32a.woff") format("woff"); } @font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_n4.c32e4d4eca5273f6d4ee95ddf54b5bbb75fc9b61.woff2") format("woff2"), url("//pickleheadshop.com/cdn/fonts/open_sans/opensans_n4.5f3406f8d94162b37bfa232b486ac93ee892406d.woff") format("woff"); } :root, .color-scheme-1 { --color-background: 255,255,255; --gradient-background: #ffffff; --color-foreground: 18,18,18; --color-background-contrast: 191,191,191; --color-shadow: 18,18,18; --color-button: 111,0,0; --color-button-text: 255,255,255; --color-secondary-button: 255,255,255; --color-secondary-button-text: 18,18,18; --color-link: 18,18,18; --color-badge-foreground: 18,18,18; --color-badge-background: 255,255,255; --color-badge-border: 18,18,18; --payment-terms-background-color: rgb(255 255 255); } .color-scheme-2 { --color-background: 111,0,0; --gradient-background: #6f0000; --color-foreground: 245,245,245; --color-background-contrast: 137,0,0; --color-shadow: 18,18,18; --color-button: 111,0,0; --color-button-text: 243,243,243; --color-secondary-button: 111,0,0; --color-secondary-button-text: 18,18,18; --color-link: 18,18,18; --color-badge-foreground: 245,245,245; --color-badge-background: 111,0,0; --color-badge-border: 245,245,245; --payment-terms-background-color: rgb(111 0 0); } .color-scheme-3 { --color-background: 36,40,51; --gradient-background: #242833; --color-foreground: 255,255,255; --color-background-contrast: 47,52,66; --color-shadow: 18,18,18; --color-button: 255,255,255; --color-button-text: 0,0,0; --color-secondary-button: 36,40,51; --color-secondary-button-text: 255,255,255; --color-link: 255,255,255; --color-badge-foreground: 255,255,255; --color-badge-background: 36,40,51; --color-badge-border: 255,255,255; --payment-terms-background-color: rgb(36 40 51); } .color-scheme-4 { --color-background: 18,18,18; --gradient-background: #121212; --color-foreground: 255,255,255; --color-background-contrast: 146,146,146; --color-shadow: 18,18,18; --color-button: 255,255,255; --color-button-text: 18,18,18; --color-secondary-button: 18,18,18; --color-secondary-button-text: 255,255,255; --color-link: 255,255,255; --color-badge-foreground: 255,255,255; --color-badge-background: 18,18,18; --color-badge-border: 255,255,255; --payment-terms-background-color: rgb(18 18 18); } .color-scheme-5 { --color-background: 51,79,180; --gradient-background: #334fb4; --color-foreground: 255,255,255; --color-background-contrast: 23,35,81; --color-shadow: 18,18,18; --color-button: 255,255,255; --color-button-text: 51,79,180; --color-secondary-button: 51,79,180; --color-secondary-button-text: 255,255,255; --color-link: 255,255,255; --color-badge-foreground: 255,255,255; --color-badge-background: 51,79,180; --color-badge-border: 255,255,255; --payment-terms-background-color: rgb(51 79 180); } body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5 { color: rgba(var(--color-foreground), 0.75); background-color: rgb(var(--color-background)); } :root { --font-body-family: "Open Sans", sans-serif; --font-body-style: normal; --font-body-weight: 400; --font-body-weight-bold: 700; --font-heading-family: "Open Sans", sans-serif; --font-heading-style: normal; --font-heading-weight: 400; --font-body-scale: 1.0; --font-heading-scale: 1.0; --media-padding: px; --media-border-opacity: 0.05; --media-border-width: 1px; --media-radius: 0px; --media-shadow-opacity: 0.0; --media-shadow-horizontal-offset: 0px; --media-shadow-vertical-offset: 4px; --media-shadow-blur-radius: 5px; --media-shadow-visible: 0; --page-width: 160rem; --page-width-margin: 0rem; --product-card-image-padding: 0.0rem; --product-card-corner-radius: 0.0rem; --product-card-text-alignment: left; --product-card-border-width: 0.0rem; --product-card-border-opacity: 0.1; --product-card-shadow-opacity: 0.0; --product-card-shadow-visible: 0; --product-card-shadow-horizontal-offset: 0.0rem; --product-card-shadow-vertical-offset: 0.4rem; --product-card-shadow-blur-radius: 0.5rem; --collection-card-image-padding: 0.0rem; --collection-card-corner-radius: 0.0rem; --collection-card-text-alignment: left; --collection-card-border-width: 0.0rem; --collection-card-border-opacity: 0.1; --collection-card-shadow-opacity: 0.0; --collection-card-shadow-visible: 0; --collection-card-shadow-horizontal-offset: 0.0rem; --collection-card-shadow-vertical-offset: 0.4rem; --collection-card-shadow-blur-radius: 0.5rem; --blog-card-image-padding: 0.0rem; --blog-card-corner-radius: 0.0rem; --blog-card-text-alignment: left; --blog-card-border-width: 0.0rem; --blog-card-border-opacity: 0.1; --blog-card-shadow-opacity: 0.0; --blog-card-shadow-visible: 0; --blog-card-shadow-horizontal-offset: 0.0rem; --blog-card-shadow-vertical-offset: 0.4rem; --blog-card-shadow-blur-radius: 0.5rem; --badge-corner-radius: 4.0rem; --popup-border-width: 1px; --popup-border-opacity: 0.1; --popup-corner-radius: 0px; --popup-shadow-opacity: 0.05; --popup-shadow-horizontal-offset: 0px; --popup-shadow-vertical-offset: 4px; --popup-shadow-blur-radius: 5px; --drawer-border-width: 1px; --drawer-border-opacity: 0.1; --drawer-shadow-opacity: 0.0; --drawer-shadow-horizontal-offset: 0px; --drawer-shadow-vertical-offset: 4px; --drawer-shadow-blur-radius: 5px; --spacing-sections-desktop: 0px; --spacing-sections-mobile: 0px; --grid-desktop-vertical-spacing: 8px; --grid-desktop-horizontal-spacing: 8px; --grid-mobile-vertical-spacing: 4px; --grid-mobile-horizontal-spacing: 4px; --text-boxes-border-opacity: 0.1; --text-boxes-border-width: 0px; --text-boxes-radius: 0px; --text-boxes-shadow-opacity: 0.0; --text-boxes-shadow-visible: 0; --text-boxes-shadow-horizontal-offset: 0px; --text-boxes-shadow-vertical-offset: 4px; --text-boxes-shadow-blur-radius: 5px; --buttons-radius: 0px; --buttons-radius-outset: 0px; --buttons-border-width: 1px; --buttons-border-opacity: 1.0; --buttons-shadow-opacity: 0.0; --buttons-shadow-visible: 0; --buttons-shadow-horizontal-offset: 0px; --buttons-shadow-vertical-offset: 4px; --buttons-shadow-blur-radius: 5px; --buttons-border-offset: 0px; --inputs-radius: 0px; --inputs-border-width: 1px; --inputs-border-opacity: 0.55; --inputs-shadow-opacity: 0.0; --inputs-shadow-horizontal-offset: 0px; --inputs-margin-offset: 0px; --inputs-shadow-vertical-offset: 4px; --inputs-shadow-blur-radius: 5px; --inputs-radius-outset: 0px; --variant-pills-radius: 40px; --variant-pills-border-width: 1px; --variant-pills-border-opacity: 0.55; --variant-pills-shadow-opacity: 0.0; --variant-pills-shadow-horizontal-offset: 0px; --variant-pills-shadow-vertical-offset: 4px; --variant-pills-shadow-blur-radius: 5px; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; font-size: calc(var(--font-body-scale) * 62.5%); height: 100%; } body { display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: 100%; min-height: 100%; margin: 0; font-size: 1.5rem; letter-spacing: 0.06rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); } @media screen and (min-width: 750px) { body { font-size: 1.6rem; } } /* === FTB Blog Theme (default.css) === */ /* ========================================================= FTB Sites Default Theme (Cleaned) - Inter font - 1200px container (.ftb-container) - Blog listing grid (auto: 1/2/3, and 2-even / 1-full) - Post page: 1200 card, 1100 reading width, images match reading width ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root{ --bg: #ffffff; --text: #0f172a; --muted: #64748b; --card: #ffffff; --border: #e2e8f0; --shadow: 0 8px 24px rgba(15, 23, 42, 0.06); --accent: #000000; --radius: 16px; --container: 1200px; --padX: 20px; --reading: 1100px; } *{ box-sizing: border-box; } html, body{ height: 100%; } /* Default behavior (non-Shopify sites): keep the old body styling */ body{ margin: 0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Shopify Exact Mode: When we wrap blog content in .ftb-scope, apply FTB typography only inside it, so Dawn controls the header/footer exactly. */ .ftb-scope{ font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Default behavior (non-Shopify sites) */ a{ color: var(--accent); text-decoration: none; } a:hover{ text-decoration: none; } /* Shopify Exact Mode: only style links inside blog content */ .ftb-scope a{ color: var(--accent); text-decoration: none; } .ftb-scope a:hover{ text-decoration: none; } /* Default behavior */ img{ max-width: 100%; height: auto; } /* Shopify Exact Mode (blog content only) */ .ftb-scope img{ max-width: 100%; height: auto; } /* ========================================================= Container utility (use this in header/article/footer) ========================================================= */ .ftb-container{ width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--padX); padding-right: var(--padX); } /* If legacy templates still output .site-container, neutralize it so it won't double-pad/double-constrain when you use .ftb-container. */ .site-container{ max-width: none; padding-left: 0; padding-right: 0; } /* ========================================================= Legacy site shell (used by default header/footer templates) ========================================================= */ .site-shell{ min-height: 100vh; display: flex; flex-direction: column; } .site-main{ flex: 1; padding-top: 18px; } .site-footer{ border-top: 1px solid var(--border); padding: 22px var(--padX) 28px; margin-top: auto; } .site-footer-inner{ max-width: var(--container); margin: 0 auto; color: var(--muted); font-size: 0.9rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ========================================================= Blog hero (advanced header mode uses header > .ftb-container) ========================================================= */ .ftb-blog-hero-kicker{ font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .ftb-blog-hero-title{ margin: 0 0 8px; font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; } .ftb-blog-hero-subtitle{ margin: 0; max-width: 70ch; color: var(--muted); line-height: 1.6; font-size: 1.02rem; } /* ========================================================= Home / Blog list (home.php) ========================================================= */ .ftb-blog-home{ color: var(--text); padding: 6px 0 24px; } /* Empty state */ .ftb-blog-empty{ margin: 22px 0 0; min-height: 280px; display: flex; align-items: center; justify-content: center; padding: 34px 18px; border: 1px dashed var(--border); border-radius: var(--radius); background: #f8fafc; text-align: center; } .ftb-blog-empty-title{ font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; } .ftb-blog-empty-desc{ color: var(--muted); margin: 0; } /* Smart grid: - 3 when space allows - if only 2 cards exist, they become 2 even columns - if only 1 card exists, it becomes full width */ .ftb-blog-grid{ display: grid; gap: 18px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Make the entire card clickable */ .ftb-post-card-link{ display: block; color: inherit; text-decoration: none; min-width: 0; } /* Card */ .ftb-post-card{ border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .ftb-post-card-link:hover .ftb-post-card{ transform: translateY(-2px); border-color: #cbd5e1; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10); } .ftb-post-card-thumb img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .ftb-post-card-body{ padding: 14px 16px 16px; } .ftb-post-card-title{ margin: 0 0 8px; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; } .ftb-post-card-meta{ font-size: 0.85rem; color: var(--muted); margin: 0 0 10px; } .ftb-post-card-excerpt{ margin: 0 0 14px; color: var(--muted); line-height: 1.55; font-size: 0.95rem; } .ftb-post-card-readmore{ display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--accent); } /* Pagination */ .ftb-blog-pagination{ margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .ftb-blog-pagination-info{ color: var(--muted); font-size: 0.92rem; } .ftb-blog-pagination-links{ display: flex; gap: 14px; flex-wrap: wrap; } .ftb-blog-pagination-link{ font-weight: 600; color: var(--accent); } /* ========================================================= Single Post (post.php) Structure: article > .ftb-container > .ftb-post-card > .ftb-post-content ========================================================= */ .ftb-post-card{ /* reused on home + post page */ } .ftb-post-breadcrumb{ font-size: 0.95rem; margin: 0; padding: 18px 22px 0; } .ftb-post-back{ color: var(--accent); text-decoration: none; font-weight: 600; } .ftb-post-title{ margin: 10px 0 10px; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; } .ftb-post-meta{ font-size: 0.92rem; color: var(--muted); margin: 0 0 14px; } /* Reading column */ .ftb-post-content{ max-width: var(--reading); margin: 0 auto; padding: 18px 22px 22px; font-size: 1.03rem; line-height: 1.8; } /* Typography */ .ftb-post-content :where(h2){ margin: 1.6em 0 0.6em; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.2; } .ftb-post-content :where(h3){ margin: 1.4em 0 0.5em; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.25; } .ftb-post-content :where(p){ margin: 0 0 1.05em; } .ftb-post-content :where(ul, ol){ margin: 0 0 1.05em 1.25em; } .ftb-post-content :where(li){ margin: 0.35em 0; } .ftb-post-content :where(a){ color: var(--accent); text-decoration: none; } .ftb-post-content :where(blockquote){ margin: 1.3em 0; padding: 1em 1.1em; border-left: 4px solid #cbd5e1; background: #f8fafc; border-radius: var(--radius); color: var(--text); } .ftb-post-content :where(code){ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1.03em; background: #f1f5f9; border: 1px solid var(--border); padding: 0.15em 0.35em; border-radius: 8px; } .ftb-post-content :where(pre){ overflow: auto; padding: 14px 14px; border-radius: var(--radius); background: #0b1220; color: #e2e8f0; border: 1px solid #0f172a; } .ftb-post-content :where(hr){ border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; } /* TOC */ .ftb-post-content .ftb-toc{ margin: 0 0 18px; padding: 14px 14px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #f7f7f7; } .ftb-post-content .ftb-toc h2{ margin: 0 0 8px; font-size: 1.05rem; } .ftb-post-content .ftb-toc ul{ margin: 0; padding-left: 1.1rem; } .ftb-post-content .ftb-toc li{ margin: 6px 0; } /* Images: featured + inline match reading width */ .ftb-post figure.ftb-inline-image{ display: block; margin: 18px auto; max-width: var(--reading); padding: 0; } .ftb-post figure.ftb-inline-image img{ display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); } /* Also apply border/radius to any other images inside content */ .ftb-post-content :where(img){ border-radius: var(--radius); border: 1px solid var(--border); } /* ========================================================= Email CTA block ========================================================= */ .ftb-post-content .ftb-email-cta{ margin: 28px 0 34px; padding: 26px 22px; text-align: center; background: #f7f7f7; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); } .ftb-post-content .ftb-email-cta p{ margin: 0 0 16px; font-size: 1.05rem; line-height: 1.65; color: var(--text); } .ftb-post-content .ftb-cta-button{ display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; background: #0f172a; color: #ffffff; font-weight: 650; font-size: 0.95rem; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); } .ftb-post-content .ftb-cta-button:hover{ background: #020617; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.22); } /* ========================================================= Not Found ========================================================= */ .ftb-notfound{ max-width: var(--reading); margin: 0 auto; padding: 26px 0 40px; } .ftb-notfound-card{ border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 18px; background: rgba(15, 23, 42, 0.72); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); padding: 20px 18px; } .ftb-notfound-kicker{ font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(148, 163, 184, 0.85); margin: 0 0 8px; } .ftb-notfound-title{ margin: 0 0 8px; font-size: 1.55rem; line-height: 1.15; } .ftb-notfound-desc{ margin: 0 0 14px; color: rgba(148, 163, 184, 0.9); line-height: 1.55; } .ftb-notfound-link{ display: inline-flex; align-items: center; gap: 8px; color: #38bdf8; font-weight: 650; text-decoration: none; } .ftb-notfound-link:hover{ text-decoration: underline; } /* ========================================================= AI blocks: hide from humans ========================================================= */ .ftb-aio, .ftb-geo-topic-map, .ftb-geo, .ftb-post-insights{ display: none !important; } /* Dark mode tweaks (minimal) */ @media (prefers-color-scheme: dark){ :root{ --bg: #0b1220; --text: #e5e7eb; --muted: #9ca3af; --card: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.10); --shadow: none; --accent: #ffffff; } /* Default behavior (non-Shopify sites) */ body{ background: var(--bg); color: var(--text); } /* Shopify Exact Mode */ .ftb-scope{ color: var(--text); } .ftb-blog-empty, .ftb-post-content .ftb-toc, .ftb-post-content .ftb-email-cta, .ftb-post-content :where(blockquote){ background: rgba(255,255,255,0.06); } .ftb-post-content :where(pre){ border-color: rgba(255,255,255,0.10); } .ftb-post-content .ftb-cta-button{ background: #ffffff; color: #020617; box-shadow: none; } .ftb-post-content .ftb-cta-button:hover{ background: #e5e7eb; } } /* ========================================================= SHOPIFY EXACT MODE OVERRIDES - Blog content only (inside .ftb-scope) - Prevents Dawn header/footer collisions ========================================================= */ .ftb-scope{ /* ensure blog typography is consistent even if Dawn changes fonts */ font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); } .ftb-scope .ftb-container{ width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--padX); padding-right: var(--padX); } /* Blog home */ .ftb-scope .ftb-blog-home{ color: var(--text); padding: 6px 0 24px; } .ftb-scope .ftb-blog-grid{ display: grid; gap: 18px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .ftb-scope .ftb-post-card-link{ display: block; color: inherit; text-decoration: none; min-width: 0; } .ftb-scope .ftb-post-card{ border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .ftb-scope .ftb-post-card-link:hover .ftb-post-card{ transform: translateY(-2px); border-color: #cbd5e1; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10); } .ftb-scope .ftb-post-card-thumb img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .ftb-scope .ftb-post-card-body{ padding: 14px 16px 16px; } .ftb-scope .ftb-post-card-title{ margin: 0 0 8px; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; } .ftb-scope .ftb-post-card-meta{ font-size: 0.85rem; color: var(--muted); margin: 0 0 10px; } .ftb-scope .ftb-post-card-excerpt{ margin: 0 0 14px; color: var(--muted); line-height: 1.55; font-size: 0.95rem; } .ftb-scope .ftb-post-card-readmore{ display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--accent); } /* Single post */ .ftb-scope .ftb-post-breadcrumb{ font-size: 0.95rem; margin: 0; padding: 18px 22px 0; } .ftb-scope .ftb-post-back{ color: var(--accent); text-decoration: none; font-weight: 600; } .ftb-scope .ftb-post-title{ margin: 10px 0 10px; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; } .ftb-scope .ftb-post-meta{ font-size: 0.92rem; color: var(--muted); margin: 0 0 14px; } .ftb-scope .ftb-post-content{ max-width: var(--reading); margin: 0 auto; padding: 18px 22px 22px; font-size: 1.40rem; line-height: 1.8; } .ftb-scope .ftb-post-content :where(h2){ margin: 1.6em 0 0.6em; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.2; } .ftb-scope .ftb-post-content :where(h3){ margin: 1.4em 0 0.5em; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.25; } .ftb-scope .ftb-post-content :where(p){ margin: 0 0 1.05em; } .ftb-scope .ftb-post-content :where(ul, ol){ margin: 0 0 1.05em 1.25em; } .ftb-scope .ftb-post-content :where(li){ margin: 0.35em 0; } .ftb-scope .ftb-post-content :where(a){ color: var(--accent); text-decoration: none; } .ftb-scope .ftb-post-content :where(blockquote){ margin: 1.3em 0; padding: 1em 1.1em; border-left: 4px solid #cbd5e1; background: #f8fafc; border-radius: var(--radius); color: var(--text); } .ftb-scope .ftb-post-content .ftb-toc{ margin: 0 0 18px; padding: 14px 14px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: #f7f7f7; } .ftb-scope .ftb-post-content .ftb-email-cta{ margin: 28px 0 34px; padding: 26px 22px; text-align: center; background: #f7f7f7; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); } /* Hide AI blocks (blog content only) */ .ftb-scope .ftb-aio, .ftb-scope .ftb-geo-topic-map, .ftb-scope .ftb-geo, .ftb-scope .ftb-post-insights{ display: none !important; } /* === End Shopify auto-import === */ .ftb-scope{ font-size: 22px; /* example */ }