/* Theme Name: TBFS Theme URI: https://www.thebreastfeedingshop.com Author: The Breastfeeding Shop Description: Lean block theme for thebreastfeedingshop.com. No page builders. Version: 0.4.5 Requires at least: 6.5 Requires PHP: 8.1 License: Proprietary Text Domain: tbfs */ /* ---------- Section rhythm ---------- Every top-level band on the page is a .tbfs-section; spacing lives here, not in block attributes, so the whole page scales together. Design tokens (--wp--custom--*) are defined in theme.json settings.custom: band spacing, border/text/footer colors, and card shadows. Change them there, not here. */ .tbfs-section { padding: var(--wp--custom--spacing--band-y) var(--wp--custom--spacing--band-x); } /* WP gives each template-level section (header/main/footer) a 24px top margin as default page rhythm. Regular pages rely on it, but the homepage and payer landing pages are full-bleed bands that must butt together — so zero it on those templates only. */ .home .wp-site-blocks > *, .page-template-page-payer .wp-site-blocks > * { margin-block-start: 0; } /* Same rule one level down: payer page CONTENT is also full-bleed bands. Without this, the default block gap shows as a thin white bar wherever two colored sections meet (e.g. cream products against the teal FAQ on generated pages). */ .page-template-page-payer .wp-block-post-content > * { margin-block-start: 0; } .tbfs-section-title { margin-bottom: 0.6rem; letter-spacing: -0.01em; } .tbfs-section-title::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--wp--preset--color--coral); margin: 0.9rem auto 0; } /* ---------- Header ---------- */ /* The ReviewTube vendor stylesheet sets html,body{overflow-y:scroll}, which makes a scroll container and silently disables position:sticky on every page it loads on. Restore the default; the modal scroll-locks (Woo + nav overlay) are excluded so they still work. */ body:not(.wc-modal--open):not(.wc-block-product-gallery-modal-open) { overflow: visible !important; } /* Full-bleed strips inside constrained containers stretch with 100vw, which includes the scrollbar gutter; clip (not hidden - that would re-enable a scroll container and kill position:sticky) the few stray pixels. */ html { overflow-x: clip; } /* Sticky lives on the template-part wrapper: .tbfs-header inside it is exactly the wrapper's height, so sticking the inner div has no room to travel and silently does nothing. */ header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } /* The fixed admin bar overlays the viewport top when logged in. */ body.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); } .tbfs-header { z-index: 50; border-bottom: 1px solid var(--wp--custom--color--border-warm); background: #fff; padding: 0.8rem var(--wp--custom--spacing--band-x); transition: box-shadow 0.25s ease, padding 0.2s ease; } /* Blur only where the mobile overlay can't open: backdrop-filter turns the header into the containing block for position:fixed descendants, which would trap the nav overlay inside the header's box. */ @media (min-width: 1024px) { .tbfs-header { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); } } /* The header nav switches to the hamburger overlay below 1024px, not core's 600px: between those widths the tab row would wrap into stacked lines, which reads broken and misplaces the mega panels. Core only offers 600px ("mobile") or always-on, so we re-hide the inline nav and re-show the open button in the gap ourselves. */ @media (min-width: 600px) and (max-width: 1023px) { .tbfs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } .tbfs-nav .wp-block-navigation__responsive-container-open { display: flex !important; } } /* Desktop (>=1024px): the tab row may never wrap. Tabs, cart and CTA sit on one nowrap line under the logo; type and gaps flex with the viewport so the row always fits the rail. */ @media (min-width: 1024px) { .tbfs-header .wp-block-group:has(> .tbfs-nav) { flex-wrap: nowrap; gap: clamp(0.6rem, 1.2vw, 1.5rem); } .tbfs-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: clamp(0.7rem, 1.4vw, 1.4rem); } .tbfs-nav .wp-block-navigation-item { white-space: nowrap; } } /* Content sits flush under the header on every page: the root block gap otherwise opens a white strip between the header and hero bands. Some templates wrap content in
, Woo product pages in a plain div, so this zeroes every top-level child except the footer, which keeps its breathing room above the band. */ .wp-site-blocks > :not(footer) { margin-block-start: 0; } /* .is-scrolled is toggled by scroll-reveal.js once the page moves. Scrolled = condensed: tighter padding, smaller logo and CTA, so the sticky header hands most of the screen back while browsing. */ .tbfs-header.is-scrolled { box-shadow: 0 6px 20px rgba(63, 40, 34, 0.08); padding-top: 0.35rem; padding-bottom: 0.35rem; } .tbfs-header.is-scrolled .tbfs-logo a { font-size: 1.05rem; } .tbfs-header.is-scrolled .tbfs-header-cta .wp-block-button__link { padding: 0.4rem 1rem; font-size: 0.88rem; } .tbfs-header.is-scrolled > .alignwide { row-gap: 0.15rem; } /* Wide screens: the condensed header collapses to a single row (logo left, nav + cart + CTA right). Everything shrinks just enough that the full nav fits inside the 1180px rail; below 1260px it stays a two-row condensed header rather than clipping. Measured at 1280px: logo 191px + group 953px inside the 1180px rail. */ @media (min-width: 1260px) { .tbfs-header.is-scrolled > .alignwide { flex-wrap: nowrap; } .tbfs-header.is-scrolled .tbfs-logo a { font-size: 1rem; } .tbfs-header.is-scrolled .tbfs-nav a { font-size: 0.85rem; white-space: nowrap; } .tbfs-header.is-scrolled .wp-block-group:has(> .tbfs-nav) { gap: 0.75rem; flex-wrap: nowrap; } .tbfs-header.is-scrolled .tbfs-nav .wp-block-navigation__container { flex-wrap: nowrap; gap: 0.9rem; } .tbfs-header.is-scrolled .tbfs-header-cta .wp-block-button__link { padding: 0.4rem 0.85rem; font-size: 0.85rem; } } .tbfs-header > .alignwide { flex-wrap: wrap; row-gap: 0.4rem; min-width: 0; } .tbfs-logo a { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--wp--preset--color--teal-dark); text-decoration: none; white-space: nowrap; transition: font-size 0.2s ease; } .tbfs-nav a { font-weight: 500; font-size: 0.95rem; } .tbfs-header-cta .wp-block-button__link { padding: 0.55rem 1.3rem; white-space: nowrap; } /* Desktop tab-row typography flexes with the viewport so the nowrap row above always fits the rail (see the never-wrap block near the top). */ @media (min-width: 1024px) { .tbfs-nav a { font-size: clamp(0.83rem, 0.45vw + 0.55rem, 0.95rem); } .tbfs-header-cta .wp-block-button__link { font-size: clamp(0.85rem, 0.45vw + 0.57rem, 1rem); padding: 0.5rem clamp(0.85rem, 1.2vw, 1.3rem); } } /* ---------- Mega menu ---------- Aeroflow-style panels. The nav block's own submenus are for the overlay only; on desktop (>=1024px, our raised nav breakpoint) they are hidden and the .tbfs-mega-panel groups open under the header instead. Panels are plain blocks in parts/header.html, editable in the Site Editor; mega-menu.js toggles .is-open (hover/focus, Escape, click-outside). */ @media (min-width: 1024px) { /* desktop: core dropdowns stay closed; panels take over. !important because the block-library stylesheet loads after this one and wins the cascade at equal specificity. */ .tbfs-nav .wp-block-navigation__submenu-container { display: none !important; } /* chevron stays as the "this opens a panel" affordance */ .tbfs-nav .wp-block-navigation__submenu-icon { margin-left: 0.3rem; } /* trigger item shows coral when its panel is open */ .tbfs-nav .tbfs-mm.is-open > a { color: var(--wp--preset--color--coral); } .tbfs-mega-panels { position: absolute; left: 0; right: 0; top: 100%; /* zero the block margin (WP's default flow gap made the panel float below a see-through strip) but keep horizontal auto: the header's constrained layout caps this container at 1180px, and auto margins are what center it on wider screens */ margin: 0 auto !important; } .tbfs-mega-panel { display: none; /* centered card at any viewport width (don't stretch on wide Macs) */ max-width: 1180px; margin: 0 auto !important; background: #fff; border-top: 1px solid var(--wp--custom--color--border-warm); border-radius: 0 0 22px 22px; box-shadow: 0 30px 60px rgba(63, 40, 34, 0.18); padding: 2rem var(--wp--custom--spacing--band-x) 2.2rem; } .tbfs-mega-panel.is-open { display: block; animation: tbfs-mega-in 0.18s ease; } @keyframes tbfs-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .tbfs-mega-cols { gap: clamp(1.5rem, 3vw, 3rem); } } /* desktop: the CTA lives in the header as a button; hide its nav-item twin */ @media (min-width: 1024px) { .tbfs-nav .tbfs-nav-cta { display: none; } } /* ---------- Overlay header + accordion (<1024px) ---------- The nav overlay is the subnav here; mega panels never render. Core CSS forces every submenu open inside the overlay, so we collapse them and let core's own chevron toggle buttons (they flip aria-expanded) drive an accordion. !important mirrors the desktop overrides: block-library CSS loads after this sheet. */ @media (max-width: 1023px) { .tbfs-mega-panels { display: none; } /* one row: logo left; cart + hamburger right */ .tbfs-header { padding: 0.7rem 1.1rem; } .tbfs-header > .alignwide { flex-wrap: nowrap; } .tbfs-header .wp-block-group:has(> .tbfs-nav) { gap: 0.4rem; } /* the header CTA button is too wide for the row; .tbfs-nav-cta inside the overlay menu replaces it on mobile */ .tbfs-header .tbfs-header-cta { display: none; } /* cart before hamburger so the menu button sits in the thumb corner */ .tbfs-header .wp-block-woocommerce-mini-cart { order: 1; } .tbfs-nav { order: 2; } .tbfs-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 4.2rem 1.4rem 2rem; } /* --- accordion: collapsed by default, chevron opens --- */ .tbfs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: none !important; } .tbfs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container { display: flex !important; } /* core hides the chevron toggles inside the overlay (its submenus used to be always-open there); the accordion needs them back */ .tbfs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { display: flex !important; align-items: center; } /* the menu list shrinks to its widest row by default; fill the overlay. Row rhythm comes from the rows' own padding, not the layout gap. */ .tbfs-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0 !important; } /* top-level rows: label left, chevron right, divider under each */ .tbfs-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--wp--custom--color--border-warm); } .tbfs-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a { font-size: 1.05rem; font-weight: 600; padding: 0.85rem 0; flex: 1; } /* generous tap target for the toggle; rotate when open. width: auto — core's 0.6em fixed width plus this padding leaves a 0px content box (border-box) and the chevron vanishes */ .tbfs-nav .is-menu-open .wp-block-navigation-submenu__toggle { width: auto; padding: 0.85rem 0.4rem 0.85rem 1.2rem; margin: 0; } /* !important: core's ".wp-block-navigation .wp-block-navigation__submenu-icon svg { width: inherit }" ties on specificity and loads later, which collapses the chevron to 0px */ .tbfs-nav .is-menu-open .wp-block-navigation-submenu__toggle svg { width: 15px !important; height: 15px !important; transition: transform 0.18s ease; } .tbfs-nav .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* child links: indented, quieter, own full-width block under the row. !important where core's overlay CSS re-pads them */ .tbfs-nav .is-menu-open .wp-block-navigation__submenu-container { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 0 0.8rem 0.9rem !important; } .tbfs-nav .is-menu-open .wp-block-navigation__submenu-container a { font-size: 0.95rem; font-weight: 400; color: var(--wp--preset--color--muted); padding: 0.5rem 0 !important; } /* overlay CTA: styled as the coral pill the header shows on desktop */ .tbfs-nav .is-menu-open .wp-block-navigation__container > .tbfs-nav-cta { border-bottom: none; margin-top: 1.1rem; } .tbfs-nav .is-menu-open .tbfs-nav-cta > a { flex: 1; text-align: center; background: var(--wp--preset--color--coral); color: #fff; border-radius: 999px; padding: 0.8rem 1.3rem; } } /* The ReviewTube band pins itself bottom-left with a maxed-out z-index, on top of the nav overlay (z 100000) — it was covering the menu's CTA. Hide it whenever a modal (menu overlay, mini-cart drawer) is open. */ html.has-modal-open #seesawengage, html.has-modal-open #survey-frame, html.has-modal-open #sb-frame { display: none !important; } .tbfs-mega-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 0.7rem; } /* Panel link groups are List blocks so each link is its own editable item */ ul.tbfs-mega-links { list-style: none; padding: 0; margin: 0; } ul.tbfs-mega-links li { margin: 0; } .tbfs-mega-links a { display: block; font-size: 0.95rem; font-weight: 500; color: var(--wp--preset--color--contrast); text-decoration: none; padding: 0.3rem 0; } .tbfs-mega-links a:hover { color: var(--wp--preset--color--teal-dark); text-decoration: underline; text-underline-offset: 3px; } /* "View all" lead link: teal with an arrow */ .tbfs-mega-links a.tbfs-mega-viewall { color: var(--wp--preset--color--teal-dark); font-weight: 600; } .tbfs-mega-links a.tbfs-mega-viewall::after { content: " \2192"; } /* brand list flows into two columns */ .tbfs-mega-brandlist { columns: 2; column-gap: 1.5rem; } .tbfs-mega-text { font-size: 0.92rem; color: var(--wp--preset--color--muted); line-height: 1.6; margin: 0 0 0.8rem; } /* promo card (featured product / contact) */ .tbfs-mega-promo { background: var(--wp--preset--color--coral-soft); border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem; height: 100%; } .tbfs-mega-promo-img { margin: 0 0 0.9rem; } .tbfs-mega-promo-img img { display: block; width: 100%; height: 150px; object-fit: contain; border-radius: 10px; } /* photos (vs cut-out product shots) fill their frame */ .tbfs-mega-panel--compression .tbfs-mega-promo-img img, .tbfs-mega-panel--accessories .tbfs-mega-promo-img img { object-fit: cover; } .tbfs-mega-promo-tag { display: inline-block; background: var(--wp--preset--color--coral); color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border-radius: 999px; padding: 0.28rem 0.6rem; margin: 0 0 0.5rem; } .tbfs-mega-promo-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.08rem; line-height: 1.3; margin: 0 0 0.35rem; } .tbfs-mega-promo-text { font-size: 0.85rem; color: var(--wp--custom--color--text-warm); margin: 0 0 0.9rem; } .tbfs-mega-promo-btn .wp-block-button__link { padding: 0.5rem 1.2rem; } .tbfs-mega-contact { background: var(--wp--preset--color--teal-light); } .tbfs-mega-phone { margin: 0 0 0.9rem; } .tbfs-mega-phone a { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.35rem; color: var(--wp--preset--color--teal-dark); text-decoration: none; } .tbfs-mega-phone a:hover { text-decoration: underline; } /* ---------- Hero (Aeroflow-style split band) ---------- */ .tbfs-hero-split { display: grid; /* capped tracks + centered: on very wide screens the text and photo stay near each other in the middle while the coral band runs full-bleed */ grid-template-columns: minmax(0, 780px) minmax(0, 640px); justify-content: center; background: var(--wp--preset--color--coral-soft); position: relative; overflow: hidden; } /* playful dot cluster pinned to the band's top-left corner (never green: the top-left accent must stay in the coral family) */ .tbfs-hero-split::before { content: ""; position: absolute; top: -30px; left: -30px; width: 170px; height: 170px; background-image: radial-gradient(rgba(243, 120, 104, 0.28) 2.5px, transparent 3px); background-size: 18px 18px; border-radius: 50%; pointer-events: none; } .tbfs-hero-split__panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem); /* heavier left inset so the text block sits comfortably in from the viewport edge on wide screens */ padding-left: clamp(1.5rem, 7vw, 7.5rem); position: relative; overflow: hidden; } .tbfs-hero-split__media { display: flex; align-items: center; justify-content: center; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); } /* Photo composition: rounded card over an organic blob, with floating badges */ .tbfs-hero-figure { position: relative; width: min(100%, 380px); } .tbfs-hero-figure .wp-block-image { margin: 0; } .tbfs-hero-figure::before { content: ""; position: absolute; inset: -8% -12% -5% -12%; background: var(--wp--preset--color--teal-light); border-radius: 55% 45% 52% 48% / 48% 55% 45% 52%; z-index: 0; } /* coral dot cluster, bottom-right */ .tbfs-hero-figure::after { content: ""; position: absolute; right: -48px; bottom: -30px; width: 140px; height: 140px; background-image: radial-gradient(rgba(243, 120, 104, 0.5) 2.5px, transparent 3px); background-size: 18px 18px; border-radius: 50%; z-index: 0; pointer-events: none; } .tbfs-hero-figure img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 28px 28px 28px 96px; border: 6px solid #fff; box-shadow: 0 24px 48px rgba(63, 40, 34, 0.16); } .tbfs-hero-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.65rem; background: #fff; border-radius: 16px; padding: 0.6rem 0.95rem; box-shadow: 0 12px 30px rgba(63, 40, 34, 0.18); } .tbfs-hero-badge p { margin: 0; } /* Badges drift gently on the hero photo; the two run at different speeds and phases so they never move in lockstep. */ @media (prefers-reduced-motion: no-preference) { .tbfs-hero-badge { animation: tbfs-float 6s ease-in-out infinite; } .tbfs-hero-badge--new { animation-duration: 7s; animation-delay: 1.2s; } } @keyframes tbfs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } .tbfs-hero-badge--specs { left: -14%; bottom: 10%; } .tbfs-hero-badge--new { top: -4%; right: -11%; } .tbfs-hero-badge__tag { flex: none; background: var(--wp--preset--color--coral); color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border-radius: 999px; padding: 0.28rem 0.6rem; } .tbfs-hero-badge__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wp--preset--color--teal); color: #fff; font-weight: 700; display: grid; place-items: center; } .tbfs-hero-badge__text { line-height: 1.3; font-size: 0.78rem; color: var(--wp--custom--color--text-warm); } .tbfs-hero-badge__text strong { display: block; font-size: 0.92rem; color: var(--wp--preset--color--contrast); } .tbfs-eyebrow, p.is-style-tbfs-eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--teal-dark); margin: 0 0 1.1rem; } /* In the hero, the eyebrow gets a rounded halo of the band's own color so the corner dot cluster can never run into the text */ .tbfs-hero-split .tbfs-eyebrow, .tbfs-payer-hero .tbfs-eyebrow { position: relative; z-index: 1; width: fit-content; background: var(--wp--preset--color--coral-soft); border-radius: 999px; box-shadow: 0 0 0 14px var(--wp--preset--color--coral-soft); } .tbfs-hero-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(2.1rem, 3.4vw + 1rem, 3.4rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 1.1rem; max-width: 13em; } .tbfs-hero-sub { font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem); color: var(--wp--custom--color--text-warm); max-width: 32em; margin: 0 0 1.9rem; line-height: 1.7; } .tbfs-hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } /* Hero buttons are core button blocks; theme.json supplies the coral pill, these classes add the shadow/hover lift and turn the second one into a plain text link. */ .tbfs-hero-btn .wp-block-button__link { font-size: 1rem; padding: 0.85rem 2.1rem; box-shadow: 0 6px 18px rgba(243, 120, 104, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .tbfs-hero-btn .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(243, 120, 104, 0.42); } .tbfs-hero-link .wp-block-button__link, .is-style-tbfs-text-link .wp-block-button__link { background: transparent; color: var(--wp--preset--color--teal-dark); font-weight: 600; font-size: 1rem; padding: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 4px; } .tbfs-hero-link .wp-block-button__link:hover, .is-style-tbfs-text-link .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--contrast); } .tbfs-hero-note { font-size: 0.85rem; color: var(--wp--custom--color--text-warm-light); margin: 1.4rem 0 0; } @media (max-width: 781px) { .tbfs-hero-split { grid-template-columns: 1fr; } .tbfs-hero-split__media { padding: 1rem 2rem 3rem; } .tbfs-hero-split__panel { padding-bottom: 1.5rem; } .tbfs-hero-figure { width: min(72vw, 300px); } .tbfs-hero-figure::after { right: -24px; bottom: -18px; width: 96px; height: 96px; } .tbfs-hero-badge { padding: 0.45rem 0.7rem; border-radius: 12px; gap: 0.45rem; } .tbfs-hero-badge__text { font-size: 0.68rem; } .tbfs-hero-badge__text strong { font-size: 0.8rem; } .tbfs-hero-badge__icon { width: 26px; height: 26px; } .tbfs-hero-badge__tag { font-size: 0.56rem; padding: 0.22rem 0.5rem; } .tbfs-hero-badge--specs { left: -9%; bottom: 8%; } .tbfs-hero-badge--new { top: -4%; right: -7%; } .tbfs-hero-split__panel { text-align: center; align-items: center; } .tbfs-hero-split::before { display: none; } } /* Press feedback: every button compresses slightly while held. Specificity matches the per-button :hover rules so pressing always wins the cascade (this block must stay after those rules in the file). */ @media (prefers-reduced-motion: no-preference) { .wp-block-button__link { transition: transform 0.1s ease; } .wp-block-button .wp-block-button__link:active { transform: scale(0.97); } } .tbfs-cta .wp-block-button__link { font-size: 1.02rem; box-shadow: 0 6px 18px rgba(243, 120, 104, 0.32); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tbfs-cta .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(243, 120, 104, 0.42); } /* ---------- Payer landing pages ---------- Compact hero band shared by every payer page (patterns/payer-hero.php in templates/page-payer.html). Same coral family as the homepage hero; the H1 is the page title, so this CSS must hold up for short ("TRICARE") and long ("Blue Cross Blue Shield of Texas") payer names alike. */ .tbfs-payer-hero { background: var(--wp--preset--color--coral-soft); position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 4.5rem) var(--wp--custom--spacing--band-x) clamp(3.25rem, 6vw, 5rem); } /* same coral-only dot cluster as the homepage hero's top-left corner */ .tbfs-payer-hero::before { content: ""; position: absolute; top: -30px; left: -30px; width: 170px; height: 170px; background-image: radial-gradient(rgba(243, 120, 104, 0.28) 2.5px, transparent 3px); background-size: 18px 18px; border-radius: 50%; pointer-events: none; } .tbfs-payer-hero__inner { position: relative; z-index: 1; } .tbfs-payer-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 1.1rem; max-width: 18em; } /* ---------- Order-flow hero ---------- Compact coral-soft band above the wizard on /order-through-insurance/. The extra bottom padding is what the wizard card overlaps into (the .tbfs-flow-body group below pulls itself up), so the first card straddles the band edge instead of floating under a bare heading. */ .tbfs-flow-hero { background: var(--wp--preset--color--coral-soft); position: relative; overflow: hidden; padding: clamp(2.1rem, 4vw, 2.9rem) var(--wp--custom--spacing--band-x) clamp(3.6rem, 6vw, 4.6rem); } /* same coral-only dot cluster as the homepage and payer heroes */ .tbfs-flow-hero::before { content: ""; position: absolute; top: -30px; left: -30px; width: 170px; height: 170px; background-image: radial-gradient(rgba(243, 120, 104, 0.28) 2.5px, transparent 3px); background-size: 18px 18px; border-radius: 50%; pointer-events: none; } .tbfs-flow-hero__inner { position: relative; z-index: 1; } .tbfs-flow-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(1.8rem, 2.2vw + 1rem, 2.7rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.8rem; } .tbfs-flow-sub { color: var(--wp--custom--color--text-warm); margin: 0; } /* pull the wizard up so its sticky bar card overlaps the band edge */ .tbfs-flow-body { margin-top: -2.4rem; } /* "Good to know" card under the wizard, on the same 828px rail; the calc keeps side gutters on screens narrower than the rail */ .tbfs-flow-notes { width: min(828px, calc(100% - 2rem)); margin: 2.8rem auto 0; /* The support email is one long unbreakable string; let it wrap instead of running past the card edge on phones. */ overflow-wrap: anywhere; } /* ---------- Coverage checklist card ---------- */ .tbfs-coverage-card { background: var(--wp--preset--color--teal-light); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem); } .tbfs-coverage-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 1rem; } ul.tbfs-check-list { list-style: none; padding: 0; margin: 0 0 1rem; } ul.tbfs-check-list li { position: relative; padding-left: 2rem; margin: 0 0 0.55rem; } ul.tbfs-check-list li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background-color: var(--wp--preset--color--teal); background-image: url("data:image/svg+xml,"); background-repeat: no-repeat; background-position: center; background-size: 0.7rem; } .tbfs-coverage-note { color: var(--wp--preset--color--muted); margin: 0; } /* "Not covered" companion card: white with a warm border instead of teal, and coral x markers instead of teal checks. Pairs with .tbfs-coverage-card in a two-column layout on payer pages. */ .tbfs-coverage-card--not { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-warm); } ul.tbfs-cross-list { list-style: none; padding: 0; margin: 0 0 1rem; } ul.tbfs-cross-list li { position: relative; padding-left: 2rem; margin: 0 0 0.55rem; } ul.tbfs-cross-list li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background-color: var(--wp--preset--color--coral-soft); background-image: url("data:image/svg+xml,"); background-repeat: no-repeat; background-position: center; background-size: 0.65rem; } /* stacked coverage columns keep a gap on mobile */ .tbfs-coverage-cols { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.4rem; } /* ---------- YouTube facade ---------- Click-to-load video (assets/js/yt-facade.js). The button holds a self-hosted thumbnail; the iframe only exists after a click. */ .tbfs-yt-facade { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; box-shadow: var(--wp--custom--shadow--card); background: #000; margin-top: 2.2rem; } .tbfs-yt-facade__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .tbfs-yt-facade__btn img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, opacity 0.3s ease; } .tbfs-yt-facade__btn:hover img { transform: scale(1.02); opacity: 0.92; } .tbfs-yt-facade__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--wp--preset--color--coral); box-shadow: 0 10px 30px rgba(63, 40, 34, 0.35); transition: transform 0.15s ease, background 0.15s ease; pointer-events: none; } .tbfs-yt-facade__play::after { content: ""; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%); border-style: solid; border-width: 0.75rem 0 0.75rem 1.25rem; border-color: transparent transparent transparent #fff; } .tbfs-yt-facade__btn:hover .tbfs-yt-facade__play { transform: translate(-50%, -50%) scale(1.08); background: var(--wp--preset--color--coral-dark); } .tbfs-yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- Step cards ---------- */ .tbfs-steps { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.4rem; } .tbfs-step-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 18px; padding: 1.7rem 1.6rem; box-shadow: var(--wp--custom--shadow--card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tbfs-step-card:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } .tbfs-step-head { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.8rem; } .tbfs-step-head p, .tbfs-step-head h3 { margin: 0; } .tbfs-step-num { flex: 0 0 auto; width: 2.3rem; height: 2.3rem; line-height: 2.3rem; text-align: center; border-radius: 50%; background: var(--wp--preset--color--teal); color: #fff; font-weight: 700; font-size: 1.05rem; } .tbfs-step-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.22rem; line-height: 1.3; letter-spacing: -0.01em; } .tbfs-step-card .has-small-font-size { color: var(--wp--preset--color--muted); } /* ---------- Why cards + icons ---------- */ .tbfs-why-grid { gap: clamp(0.9rem, 1.5vw, 1.2rem); margin-top: 2.4rem; } .tbfs-why-card { background: var(--wp--preset--color--base); border-radius: 16px; padding: 1.6rem 1.4rem; box-shadow: var(--wp--custom--shadow--card-sm); } .tbfs-why-title { font-weight: 600; font-size: 1.02rem; margin: 0.9rem 0 0.45rem; } .tbfs-why-card .has-small-font-size { color: var(--wp--preset--color--muted); margin: 0; } /* Icon circles are pure CSS on the card (no markup to break in the editor); stroke color is teal-dark (#3f9e97) baked into the SVG since background images can't be tinted with mask the way the old span could. */ .tbfs-why-card::before { content: ""; display: block; width: 2.7rem; height: 2.7rem; border-radius: 50%; background-color: var(--wp--preset--color--teal-light); background-image: var(--tbfs-icon); background-repeat: no-repeat; background-position: center; background-size: 1.35rem; } .tbfs-why-card--shield { --tbfs-icon: url("data:image/svg+xml,"); } .tbfs-why-card--check { --tbfs-icon: url("data:image/svg+xml,"); } .tbfs-why-card--truck { --tbfs-icon: url("data:image/svg+xml,"); } .tbfs-why-card--heart { --tbfs-icon: url("data:image/svg+xml,"); } /* ---------- Brands ---------- */ .tbfs-brands { padding-top: clamp(2.25rem, 4vw, 3.25rem); padding-bottom: clamp(2.25rem, 4vw, 3.25rem); } .tbfs-brands-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 1.1rem; } .tbfs-brands-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; } .tbfs-pill, p.is-style-tbfs-pill { display: inline-block; margin: 0; padding: 0.4rem 1.1rem; border: 1px solid var(--wp--custom--color--border-cool); border-radius: 999px; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.98rem; color: var(--wp--preset--color--teal-dark); background: #fff; } /* ---------- About blurb ---------- */ .tbfs-about-text { color: var(--wp--preset--color--muted); line-height: 1.7; } /* ---------- Payer band ---------- */ .tbfs-payers-sub { color: var(--wp--preset--color--muted); margin: -0.6rem auto 1.4rem; max-width: 42em; } .tbfs-payers-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; } .tbfs-pill--link { padding: 0; } .tbfs-pill--link a { display: inline-block; padding: 0.4rem 1.1rem; color: inherit; text-decoration: none; } .tbfs-pill--link:hover { border-color: var(--wp--preset--color--coral); color: var(--wp--preset--color--coral); } .tbfs-pill--more { background: var(--wp--preset--color--teal-dark); border-color: var(--wp--preset--color--teal-dark); color: #fff; } .tbfs-pill--more:hover { background: var(--wp--preset--color--coral); color: #fff; } .tbfs-payers-note { color: var(--wp--preset--color--muted); margin-top: 1.2rem; } /* ---------- Testimonial ---------- */ /* The stars are the review's own five-star rating; the aggregate Google score is the small .tbfs-rating line under the attribution. */ .tbfs-stars { text-align: center; color: var(--wp--preset--color--coral); font-size: 1.25rem; letter-spacing: 0.3em; margin: 0 0 1.1rem; } .tbfs-rating { font-size: 0.8rem; color: var(--wp--preset--color--muted); margin-top: 0.35rem; } .tbfs-quote { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.15rem, 0.7vw + 1rem, 1.45rem); line-height: 1.55; max-width: 34em; margin-left: auto; margin-right: auto; position: relative; } /* Real quotation marks wrap the quote inline; no floating glyph. */ .tbfs-quote::before, .tbfs-quote::after { color: var(--wp--preset--color--coral); font-size: 1.25em; line-height: 0; vertical-align: -0.08em; } .tbfs-quote::before { content: "\201C"; margin-right: 0.06em; } .tbfs-quote::after { content: "\201D"; margin-left: 0.06em; } .tbfs-quote-attr { font-size: 0.88rem; font-weight: 600; color: var(--wp--preset--color--muted); margin-top: 1.2rem; } /* ---------- CTA card ---------- */ /* CTA follows the teal FAQ band, so it needs full top rhythm of its own (the reduced top it had when it followed a white section reads cramped) */ .tbfs-cta-card { background: linear-gradient(135deg, var(--wp--preset--color--teal-light) 0%, #f3fbfa 55%, var(--wp--preset--color--coral-soft) 100%); border-radius: 24px; padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem); } .tbfs-cta-sub { color: var(--wp--preset--color--muted); margin-bottom: 1.6rem; } /* ---------- Category cards ---------- */ .tbfs-cats { gap: clamp(0.9rem, 1.5vw, 1.2rem); margin-top: 2.4rem; } .tbfs-cat-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 16px; padding: 1.6rem 1.4rem; box-shadow: var(--wp--custom--shadow--card-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tbfs-cat-card:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } /* Same CSS-icon technique as the why-cards */ .tbfs-cat-card::before { content: ""; display: block; width: 2.7rem; height: 2.7rem; border-radius: 50%; background-color: var(--wp--preset--color--coral-soft); background-image: var(--tbfs-icon); background-repeat: no-repeat; background-position: center; background-size: 1.35rem; } .tbfs-cat-card--pump { --tbfs-icon: url("data:image/svg+xml,"); } .tbfs-cat-card--socks { --tbfs-icon: url("data:image/svg+xml,"); } .tbfs-cat-card--box { --tbfs-icon: url("data:image/svg+xml,"); } .tbfs-cat-card--chat { --tbfs-icon: url("data:image/svg+xml,"); } .tbfs-cat-title { font-weight: 600; font-size: 1.02rem; margin: 0.9rem 0 0.45rem; } .tbfs-cat-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .tbfs-cat-title a:hover { color: var(--wp--preset--color--teal-dark); text-decoration: underline; text-underline-offset: 3px; } .tbfs-cat-card .has-small-font-size { color: var(--wp--preset--color--muted); margin: 0; } /* ---------- Product cards ---------- */ .tbfs-products-sub { color: var(--wp--preset--color--muted); margin-top: 1.4rem; } .tbfs-products { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.4rem; } .tbfs-product-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 18px; padding: 1.4rem 1.4rem 1.6rem; box-shadow: var(--wp--custom--shadow--card); transition: transform 0.15s ease, box-shadow 0.15s ease; text-align: center; } .tbfs-product-card:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } .tbfs-product-img { margin: 0 0 1rem; background: #fff; border-radius: 12px; overflow: hidden; } .tbfs-product-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } @media (prefers-reduced-motion: no-preference) { .tbfs-product-img img { transition: transform 0.3s ease; } .tbfs-product-card:hover .tbfs-product-img img { transform: scale(1.04); } } .tbfs-product-name { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.5rem; } .tbfs-product-name a { color: var(--wp--preset--color--contrast); text-decoration: none; } .tbfs-product-name a:hover { color: var(--wp--preset--color--teal-dark); text-decoration: underline; text-underline-offset: 3px; } .tbfs-product-desc { color: var(--wp--preset--color--muted); margin: 0 0 0.9rem; } .tbfs-product-badge { display: inline-block; margin: 0; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--wp--preset--color--teal-light); color: var(--wp--preset--color--teal-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tbfs-products-more { margin-top: 2rem; } /* ---------- Resupply strip ---------- */ /* Strip bands (resupply, military) are not .tbfs-section: their vertical padding is tuned so the WHITE gap on each side matches the section rhythm, accounting for colored neighbors whose padding doesn't read as whitespace. */ .tbfs-resupply { /* products section (white) above supplies its own bottom padding; why-section below is teal, so all the white gap must come from here */ padding: 0 var(--wp--custom--spacing--band-x) var(--wp--custom--spacing--band-y); } .tbfs-resupply-card { background: var(--wp--preset--color--coral-soft); border-radius: 20px; padding: 1.4rem clamp(1.4rem, 3vw, 2.2rem); align-items: center; gap: 1rem 2rem; } .tbfs-resupply-text { margin: 0; max-width: 38em; color: var(--wp--custom--color--text-warm); } .tbfs-resupply-text strong { color: var(--wp--preset--color--contrast); } .tbfs-resupply-btn .wp-block-button__link { background: #fff; color: var(--wp--preset--color--teal-dark); font-weight: 600; padding: 0.65rem 1.5rem; box-shadow: 0 4px 12px rgba(63, 40, 34, 0.1); } .tbfs-resupply-btn .wp-block-button__link:hover { background: var(--wp--preset--color--teal-dark); color: #fff; } /* ---------- Military / TRICARE band ---------- */ .tbfs-military { /* testimonial above is coral, journal below is white: white gap above comes from here, white gap below from the journal's top padding */ padding: var(--wp--custom--spacing--band-y) var(--wp--custom--spacing--band-x) 0; } /* flipped neighbors (white section above, colored band below): the white gap above comes from the neighbor's bottom padding, so this band owns only the gap below. Used on payer pages (TriWest card before the FAQ). */ .tbfs-military--flip { padding: 0 var(--wp--custom--spacing--band-x) var(--wp--custom--spacing--band-y); } .tbfs-military-card { border: 1px solid var(--wp--custom--color--border-cool); border-radius: 20px; padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.4rem, 3vw, 2.4rem); align-items: center; justify-content: flex-start; gap: 1rem clamp(1.5rem, 3vw, 2.5rem); background: var(--wp--preset--color--base); } .tbfs-military-img { margin: 0; flex: 0 0 auto; } .tbfs-military-img img { display: block; width: clamp(150px, 16vw, 200px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; } .tbfs-military-text { flex: 1 1 24rem; min-width: 0; max-width: 44em; } .tbfs-military-actions { margin-top: 1.1rem; } .tbfs-military-text .tbfs-eyebrow { margin-bottom: 0.2rem; } .tbfs-military-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem); letter-spacing: -0.01em; margin: 0; } .tbfs-military-text .has-small-font-size { color: var(--wp--preset--color--muted); margin: 0.4rem 0 0; } .tbfs-military-btn .wp-block-button__link { background: transparent; border: 2px solid var(--wp--preset--color--teal-dark); color: var(--wp--preset--color--teal-dark); font-weight: 600; padding: 0.6rem 1.5rem; } .tbfs-military-btn .wp-block-button__link:hover { background: var(--wp--preset--color--teal-dark); color: #fff; } /* ---------- Journal cards ---------- The homepage journal is a Query Loop (patterns/journal.php): the ul gets .tbfs-journal and each li.wp-block-post is a card, so new posts pick up the card look automatically. .tbfs-journal-card remains for hand-built cards inserted on other pages. */ .tbfs-journal { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 2.4rem; } .tbfs-journal-query { margin-block-start: 2.4rem; } ul.tbfs-journal { list-style: none; padding: 0; margin: 0; } .tbfs-journal > .wp-block-post, .tbfs-journal-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 18px; overflow: hidden; box-shadow: var(--wp--custom--shadow--card); transition: transform 0.15s ease, box-shadow 0.15s ease; padding-bottom: 1.4rem; } .tbfs-journal > .wp-block-post:hover, .tbfs-journal-card:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } .tbfs-journal-img { margin: 0 0 1.1rem; } .tbfs-journal-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .tbfs-journal-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.12rem; line-height: 1.35; letter-spacing: -0.01em; margin: 0 1.4rem 0.5rem; } .tbfs-journal-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .tbfs-journal-title a:hover { color: var(--wp--preset--color--teal-dark); text-decoration: underline; text-underline-offset: 3px; } .tbfs-journal-card .has-small-font-size, .tbfs-journal-excerpt { color: var(--wp--preset--color--muted); margin: 0 1.4rem; } .tbfs-journal-excerpt p { margin: 0; } .tbfs-journal-more { margin-top: 2rem; } /* ---------- FAQ ---------- */ .tbfs-faq { margin-top: 2.2rem; } .tbfs-faq-item { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 14px; padding: 1rem 1.3rem; } .tbfs-faq-item summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; color: var(--wp--preset--color--contrast); list-style: none; position: relative; padding-right: 2rem; } .tbfs-faq-item summary::-webkit-details-marker { display: none; } .tbfs-faq-item summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 500; color: var(--wp--preset--color--teal-dark); transition: transform 0.2s ease; } /* the + rotates into an x rather than swapping glyphs, so it can animate */ .tbfs-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .tbfs-faq-item p { margin: 0.8rem 0 0.2rem; color: var(--wp--preset--color--muted); font-size: 0.95rem; line-height: 1.65; } @media (prefers-reduced-motion: no-preference) { .tbfs-faq-item[open] p { animation: tbfs-faq-open 0.22s ease; } } @keyframes tbfs-faq-open { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } } /* ---------- FAQ page (/breast-pumping-faq/) ---------- The full FAQ page (pattern tbfs/faq-page) reuses .tbfs-faq / .tbfs-faq-item for the accordions and adds an intro hero + labeled category headings. */ .tbfs-faqpage { padding-block: var(--wp--custom--spacing--band-y); padding-inline: var(--wp--custom--spacing--band-x); } .tbfs-faqpage-hero { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .tbfs-faqpage-title { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.02em; margin: 0; } .tbfs-faqpage-intro { color: var(--wp--preset--color--muted); max-width: 60ch; margin: 1rem auto 0; line-height: 1.7; } .tbfs-faqpage-intro a { color: var(--wp--preset--color--teal-dark); font-weight: 600; white-space: nowrap; } /* Category label above each accordion group */ .tbfs-faq-cat { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.01em; margin: clamp(2rem, 4vw, 2.8rem) 0 0.4rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--wp--custom--color--border-warm); } /* Tighten the group's own top margin since the category heading spaces it */ .tbfs-faqpage .tbfs-faq { margin-top: 1rem; } /* The closing CTA sits below the last group with breathing room */ .tbfs-faqpage .tbfs-cta-card { margin-top: clamp(2.5rem, 5vw, 3.5rem); } /* ---------- Sizing chart (/maternity-compression/maternity-compression-chart/) Hero is the shared .tbfs-payer-hero coral band. The body is a stack of plain outlined tables (no per-table cards), each with a coral-accented title. */ .tbfs-sizing-page { padding-block: clamp(2.5rem, 5vw, 3.75rem) var(--wp--custom--spacing--band-y); padding-inline: var(--wp--custom--spacing--band-x); } .tbfs-sizing-section-title { margin-top: 0; } .tbfs-sizing-block { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); } .tbfs-sizing-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 0.9rem; padding-left: 0.85rem; border-left: 3px solid var(--wp--preset--color--coral); } /* The table scrolls on narrow screens rather than breaking the layout */ .tbfs-sizing-table { overflow-x: auto; margin: 0; } /* A clean outlined table (not a card): thin border + rounded corners */ .tbfs-sizing-table table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--wp--custom--color--border-cool); border-radius: 12px; overflow: hidden; font-size: 0.95rem; } /* Drop core's per-cell gridlines; the header tint + zebra rows carry structure */ .tbfs-sizing-table th, .tbfs-sizing-table td { border: 0; } /* Soft teal-tint header instead of a heavy solid band */ .tbfs-sizing-table thead th { background: var(--wp--preset--color--teal-light); color: var(--wp--preset--color--teal-dark); font-family: var(--wp--preset--font-family--heading); font-weight: 600; text-align: center; padding: 0.72rem 0.9rem; white-space: nowrap; } .tbfs-sizing-table thead th:first-child { text-align: left; } /* Row label: bold teal, no fill, lets the zebra do the separating */ .tbfs-sizing-table tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--wp--preset--color--teal-dark); padding: 0.72rem 0.9rem; white-space: nowrap; } .tbfs-sizing-table tbody td { text-align: center; padding: 0.72rem 0.9rem; color: var(--wp--preset--color--contrast); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Zebra rows for scanability, no hard gridlines */ .tbfs-sizing-table tbody tr:nth-child(even) th, .tbfs-sizing-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--cream); } .tbfs-sizing-table figcaption { color: var(--wp--preset--color--muted); font-size: 0.85rem; margin-top: 0.85rem; text-align: left; line-height: 1.5; } .tbfs-sizing-page .tbfs-cta-card { margin-top: clamp(2.5rem, 5vw, 3.5rem); } /* Sizing tables on phones: shrink type + padding and let cells wrap so the tables (each 3-4 columns after the sizes-as-rows transpose) fit at width:100% with no horizontal scroll. The overflow-x:auto on the figure is only a safety net for the wider >600px nowrap layout. */ @media (max-width: 600px) { .tbfs-sizing-table table { font-size: 0.78rem; } .tbfs-sizing-table thead th, .tbfs-sizing-table tbody th[scope="row"], .tbfs-sizing-table tbody td { padding: 0.5rem 0.4rem; white-space: normal; /* let headers + labels wrap so the table fits the screen */ } } /* ---------- Breast pump comparison tool (/breast-pump-comparison-chart/) Coral hero + intro, then the interactive widget rendered by the [tbfs_pump_compare] shortcode (its .tbfs-pc-* styles ship with the plugin). We only own the intro blurb and disclaimer typography here. */ .tbfs-compare-page { padding-block: clamp(2.5rem, 5vw, 3.75rem) var(--wp--custom--spacing--band-y); padding-inline: var(--wp--custom--spacing--band-x); } .tbfs-compare-page .tbfs-cta-card { margin-top: clamp(2.5rem, 5vw, 3.5rem); } .tbfs-compare-blurb { color: var(--wp--preset--color--muted); max-width: 60ch; margin: 0.6rem auto 0 auto; line-height: 1.7; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); } .tbfs-compare-disclaimer { color: var(--wp--preset--color--muted); line-height: 1.6; margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; max-width: 70ch; margin-inline: auto; } /* ---------- Due date calculator (/whats-my-due-date/) ---------- Coral hero, then a title-less body wrapping the self-contained calculator (its own scoped styles live in the wp:html block). We only own the outer page rhythm and the CTA gap here. */ .tbfs-duedate-page { padding-block: clamp(2.5rem, 5vw, 3.75rem) var(--wp--custom--spacing--band-y); padding-inline: var(--wp--custom--spacing--band-x); } .tbfs-duedate-page .tbfs-cta-card { margin-top: clamp(2.5rem, 5vw, 3.5rem); } .tbfs-duedate-disclaimer { color: var(--wp--preset--color--muted); line-height: 1.6; margin: clamp(1.25rem, 3vw, 1.75rem) auto 0 auto; text-align: center; max-width: 60ch; } /* ---------- Downloads (/sample-prescription/) ---------- */ .tbfs-downloads-grid { gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: 0; } .tbfs-download-card { height: 100%; background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 18px; box-shadow: var(--wp--custom--shadow--card-sm); padding: clamp(1.4rem, 3vw, 1.9rem); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tbfs-download-card:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } /* Small document icon above the title, pure CSS so nothing breaks in the editor */ .tbfs-download-card::before { content: ""; display: block; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 12px; background: var(--wp--preset--color--coral-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c8503c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cpolyline points='9 15 12 18 15 15'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .tbfs-download-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; letter-spacing: -0.01em; margin: 0 0 0.6rem; } .tbfs-download-desc { color: var(--wp--preset--color--muted); line-height: 1.65; margin: 0 0 1.3rem; } .tbfs-downloads-note { color: var(--wp--preset--color--muted); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); } .tbfs-downloads-note a { color: var(--wp--preset--color--teal-dark); font-weight: 600; } /* ---------- About (/about/) ---------- */ .tbfs-about-h2 { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.01em; margin: 0 0 1.1rem; } .tbfs-about-story p { color: var(--wp--preset--color--contrast); font-size: 1.06rem; line-height: 1.75; margin: 0 0 1.2rem; } .tbfs-about-privacy { background: var(--wp--preset--color--cream); border-radius: 18px; max-width: 820px; margin-inline: auto; } .tbfs-about-privacy-text { color: var(--wp--preset--color--muted); line-height: 1.7; margin: 0; } .tbfs-about-privacy-text a { color: var(--wp--preset--color--teal-dark); font-weight: 600; } /* ---------- Contact (/contact/) ---------- */ .tbfs-contact-cols { gap: clamp(1.5rem, 4vw, 3rem); } .tbfs-contact-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--teal-dark); margin: 0 0 0.4rem; } .tbfs-contact-phone { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.1; } .tbfs-contact-phone a { color: var(--wp--preset--color--contrast); text-decoration: none; } .tbfs-contact-phone a:hover { color: var(--wp--preset--color--teal-dark); } .tbfs-contact-hours { color: var(--wp--preset--color--muted); margin: 0.5rem 0 0; } .tbfs-contact-rule { border-color: var(--wp--custom--color--border-warm); margin: 1.5rem 0; } .tbfs-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .tbfs-contact-list li { line-height: 1.5; color: var(--wp--preset--color--contrast); } .tbfs-contact-list strong { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-dark); } .tbfs-contact-list a { color: var(--wp--preset--color--teal-dark); word-break: break-word; } /* Location card (fills the right column, links out for directions) */ .tbfs-location-card { background: var(--wp--preset--color--teal-light); border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.2rem); } .tbfs-location-card::before { content: ""; display: block; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%232a6f6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); background-repeat: no-repeat; } .tbfs-location-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--teal-dark); margin: 0 0 0.5rem; } .tbfs-location-address { font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; line-height: 1.35; color: var(--wp--preset--color--contrast); margin: 0; } .tbfs-location-note { color: var(--wp--preset--color--muted); margin: 0.75rem 0 1.25rem; } /* Self-service card grid */ .tbfs-help-grid { gap: clamp(0.9rem, 2vw, 1.25rem); margin-top: 2.2rem; } .tbfs-help-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 16px; box-shadow: var(--wp--custom--shadow--card-sm); padding: 1.4rem 1.3rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .tbfs-help-card:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } .tbfs-help-title { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.01em; margin: 0 0 0.4rem; } .tbfs-help-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .tbfs-help-title a::after { content: " \2192"; color: var(--wp--preset--color--teal-dark); } .tbfs-help-card:hover .tbfs-help-title a { color: var(--wp--preset--color--teal-dark); } .tbfs-help-desc { color: var(--wp--preset--color--muted); margin: 0; line-height: 1.55; } /* ---------- Legal / policy pages ---------- */ .tbfs-legal-header { padding-block: clamp(2.5rem, 5vw, 3.75rem) 0; padding-inline: var(--wp--custom--spacing--band-x); } .tbfs-legal-title { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.02em; margin: 0; } .tbfs-legal-updated { color: var(--wp--preset--color--muted); font-size: 0.9rem; margin: 0.9rem 0 0; } .tbfs-legal-body { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) var(--wp--custom--spacing--band-y); padding-inline: var(--wp--custom--spacing--band-x); color: var(--wp--preset--color--contrast); font-size: 0.98rem; line-height: 1.72; } .tbfs-legal-body h2 { font-family: var(--wp--preset--font-family--heading); font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1.3; margin: 2.2rem 0 0.8rem; } .tbfs-legal-body h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.14rem; margin: 1.6rem 0 0.6rem; } .tbfs-legal-body h4 { font-weight: 600; margin: 1.3rem 0 0.5rem; } .tbfs-legal-body p { margin: 0 0 1.1rem; } .tbfs-legal-body ul, .tbfs-legal-body ol { margin: 0 0 1.1rem; padding-left: 1.4rem; } .tbfs-legal-body li { margin-bottom: 0.4rem; } .tbfs-legal-body a { color: var(--wp--preset--color--teal-dark); text-underline-offset: 2px; word-break: break-word; } /* Warranty / any legal table: compact bordered layout that scrolls on mobile */ .tbfs-legal-body table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: 0.92rem; } .tbfs-legal-body th, .tbfs-legal-body td { border: 1px solid var(--wp--custom--color--border-cool); padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; } .tbfs-legal-body thead th, .tbfs-legal-body tr:first-child td { background: var(--wp--preset--color--cream); font-weight: 600; } /* ---------- Block styles ---------- "Card" is pickable on Group and Column blocks in the editor Styles panel: the generic card recipe without needing a tbfs-* class. */ .is-style-tbfs-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 18px; padding: 1.7rem 1.6rem; box-shadow: var(--wp--custom--shadow--card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .is-style-tbfs-card:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } /* ---------- Scroll reveal ---------- .tbfs-reveal is added by assets/js/scroll-reveal.js at runtime, so the page renders fully visible without JS. Reduced-motion users never get the class at all. */ .tbfs-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .tbfs-reveal.is-revealed { opacity: 1; transform: none; } /* ---------- Footer ---------- */ .tbfs-footer { padding: 3rem var(--wp--custom--spacing--band-x) 2rem; } .tbfs-footer a { color: var(--wp--custom--color--footer-link); text-decoration: none; } .tbfs-footer a:hover { color: #fff; text-decoration: underline; } .tbfs-footer-head { letter-spacing: 0.1em; font-weight: 700; color: var(--wp--preset--color--teal); } .tbfs-footer-contact { color: var(--wp--custom--color--footer-muted); margin-top: 1.2rem; } .tbfs-footer-contact a { color: var(--wp--custom--color--footer-link); } .tbfs-footer-policies { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.15); color: var(--wp--custom--color--footer-muted); } /* the policies row above owns the divider; legal is a quiet last line */ .tbfs-footer-legal { margin-top: 0.6rem; color: var(--wp--custom--color--footer-muted); } /* ---------- Shop archives (shop, category, brand) ---------- */ .tbfs-shop-hero { padding: 3.2rem var(--wp--custom--spacing--band-x) 0.4rem; text-align: center; } .tbfs-shop-title { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -0.01em; margin: 0; } /* Term SEO copy sits under the grid, dressed as a soft cream band so it reads as a buying guide rather than a text dump. The term-description block renders nothing when the term has no copy, so empty archives get no stray band. */ .tbfs-shop-desc { max-width: 900px; margin: 3.6rem auto 0; padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 5vw, 4rem); background: var(--wp--preset--color--cream); border-radius: 24px; color: var(--wp--preset--color--muted); font-size: 0.95rem; line-height: 1.75; } .tbfs-shop-desc h2 { font-family: var(--wp--preset--font-family--heading); font-size: 1.4rem; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 2.4rem 0 0.8rem; } .tbfs-shop-desc h2:first-child { margin-top: 0; } .tbfs-shop-desc h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.1rem; color: var(--wp--preset--color--contrast); margin: 1.8rem 0 0.5rem; } .tbfs-shop-desc p { margin: 0 0 1em; } .tbfs-shop-desc a { color: var(--wp--preset--color--teal-dark); text-decoration: underline; text-underline-offset: 3px; } .tbfs-shop-body { padding: 1.6rem var(--wp--custom--spacing--band-x) 4rem; } /* Toolbar: brand pills left, count + sorting right; wraps on small screens */ .tbfs-shop-toolbar { margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--wp--preset--color--muted); } /* Row under the pills: count left, search + sorting right */ .tbfs-shop-sort { margin-top: 1.1rem; } .tbfs-shop-sort-controls { gap: 0.6rem; } .tbfs-shop-search input[type="search"] { padding: 0 1rem; width: clamp(160px, 18vw, 240px); } .tbfs-shop-search input[type="search"]:focus { outline: none; border-color: var(--wp--preset--color--teal-dark); } .tbfs-shop-search input[type="search"]::placeholder { color: var(--wp--preset--color--muted); } /* Grid dims while a live-search fetch is in flight */ .tbfs-shop-grid.is-searching { opacity: 0.5; transition: opacity 0.15s ease; } @media (max-width: 600px) { .tbfs-shop-sort-controls, .tbfs-shop-search, .tbfs-shop-search input[type="search"] { width: 100%; } } .tbfs-shop-toolbar .woocommerce-result-count { margin: 0; white-space: nowrap; } /* Search input and sort select share one control style so they sit as a matched pair (same height, radius, type size). */ .tbfs-shop-toolbar .woocommerce-ordering, .tbfs-shop-toolbar .tbfs-shop-search { margin: 0; display: flex; align-items: center; } .tbfs-shop-toolbar .woocommerce-ordering select, .tbfs-shop-search input[type="search"] { box-sizing: border-box; height: 2.5rem; border: 1px solid var(--wp--custom--color--border-cool); border-radius: 999px; font-size: 0.9rem; font-family: inherit; line-height: 1.2; color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); } .tbfs-shop-toolbar .woocommerce-ordering select { padding: 0 2rem 0 1rem; } /* Brand chips restyled as brand pills. The row hides itself when the collection yields fewer than two brands (accessories carry no brands, matching live), so most non-pump archives show only count + sorting. */ .tbfs-brand-pills:not(:has(.wc-block-product-filter-chips__item:nth-child(2))) { display: none; } .tbfs-brand-pills .wc-block-product-filter-chips__items { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tbfs-brand-pills .wc-block-product-filter-chips__item { appearance: none; background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 999px; padding: 0.32rem 0.95rem; font-size: 0.88rem; color: var(--wp--preset--color--contrast); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .tbfs-brand-pills .wc-block-product-filter-chips__item:hover { border-color: var(--wp--preset--color--teal-dark); } .tbfs-brand-pills .wc-block-product-filter-chips__item[aria-checked="true"], .tbfs-brand-pills .wc-block-product-filter-chips__item.is-selected { background: var(--wp--preset--color--teal-light); border-color: var(--wp--preset--color--teal-dark); color: var(--wp--preset--color--teal-dark); font-weight: 600; } /* Product Collection items pick up the same card language as the hand-picked homepage cards (.tbfs-product-card). */ .tbfs-shop-grid .wc-block-product-template { gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.6rem; } .tbfs-shop-grid .wc-block-product { background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-cool); border-radius: 18px; padding: 1.4rem 1.4rem 1.6rem; box-shadow: var(--wp--custom--shadow--card); transition: transform 0.15s ease, box-shadow 0.15s ease; text-align: center; } .tbfs-shop-grid .wc-block-product:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--card-hover); } .tbfs-shop-grid .tbfs-shop-img { background: #fff; border-radius: 12px; overflow: hidden; margin: 0 0 1rem; } .tbfs-shop-grid .tbfs-shop-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } .tbfs-shop-grid .tbfs-shop-name { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 0.4rem; } .tbfs-shop-grid .tbfs-shop-name a { color: var(--wp--preset--color--contrast); text-decoration: none; } .tbfs-shop-grid .tbfs-shop-name a:hover { color: var(--wp--preset--color--teal-dark); text-decoration: underline; text-underline-offset: 3px; } .tbfs-shop-grid .tbfs-shop-price { color: var(--wp--preset--color--muted); font-size: 0.95rem; } /* .tbfs-shop-pagination is styled with .tbfs-blog-pagination in the shared Pagination block below (Blog section). */ /* ---------- Content landing pages (page-landing template) ---------- */ .tbfs-landing-benefit .wp-block-media-text__media img { border-radius: 18px; width: 100%; height: auto; object-fit: cover; } .tbfs-landing-mediatext { gap: clamp(1.6rem, 4vw, 3.5rem); } .tbfs-landing-h2 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.01em; margin: 0 0 1rem; } .tbfs-landing-teaser { background: var(--wp--preset--color--cream); border-radius: 18px; padding: 2rem; } .tbfs-landing-teaser p { color: var(--wp--preset--color--muted); } /* ---------- Single product (PDP) ---------- */ .tbfs-pdp { padding: 2rem var(--wp--custom--spacing--band-x) 3.6rem; } .tbfs-pdp-breadcrumbs { font-size: 0.85rem; color: var(--wp--preset--color--muted); margin-bottom: 1.6rem; } .tbfs-pdp-cols { gap: clamp(1.6rem, 3.5vw, 3.2rem); } .tbfs-pdp .tbfs-pdp-gallery { background: #fff; border: 1px solid var(--wp--custom--color--border-cool); border-radius: 18px; padding: 1rem; align-self: start; } .tbfs-pdp-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.01em; margin: 0 0 0.9rem; } .tbfs-pdp-badge { margin-bottom: 1.2rem; } /* Intro blurb beside the gallery (product excerpt, as on live) */ .tbfs-pdp .tbfs-pdp-short { margin-bottom: 1.4rem; } .tbfs-pdp .tbfs-pdp-short p { font-size: 0.98rem; line-height: 1.7; color: var(--wp--preset--color--muted); margin: 0 0 0.8rem; } /* Live blurbs sometimes open with their own heading; keep it subordinate to the product H1 above it */ .tbfs-pdp .tbfs-pdp-short h2, .tbfs-pdp .tbfs-pdp-short h3 { font-size: 1.1rem; letter-spacing: -0.01em; margin: 0 0 0.6rem; } .tbfs-pdp .tbfs-pdp-short p:last-child { margin-bottom: 0; } .tbfs-pdp .tbfs-pdp-short .wp-block-post-excerpt__more-text { display: none; } /* Insurance path is the hero action on every product */ .tbfs-pdp-insurance { background: var(--wp--preset--color--teal-light); border-radius: 14px; padding: 1.3rem 1.4rem 1.4rem; margin-bottom: 1.4rem; } .tbfs-pdp-insurance-lead { margin: 0 0 0.9rem; color: var(--wp--preset--color--teal-dark); font-weight: 500; } /* Ordering states: the template always renders both the insurance CTA and the retail box; the plugin's body class (tbfs-avail-*) decides what shows. Products default to retail-only until explicitly marked. */ /* Retail only: no insurance claims anywhere, retail becomes the one action */ .tbfs-avail-retail .tbfs-pdp-insurance, .tbfs-avail-retail .tbfs-pdp-badge, .tbfs-avail-retail .tbfs-pdp-retail-label { display: none; } .tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail { border: none; padding: 0; } .tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button, .tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button { background: var(--wp--preset--color--coral); border-color: var(--wp--preset--color--coral); color: var(--wp--preset--color--base); padding: 0.8rem 1.8rem; } .tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button:hover, .tbfs-avail-retail .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button:hover { background: var(--wp--preset--color--coral-dark); border-color: var(--wp--preset--color--coral-dark); color: var(--wp--preset--color--base); } /* Insurance only: hide the retail path even if a price exists */ .tbfs-avail-insurance .tbfs-pdp .tbfs-pdp-retail { display: none; } /* Both: belt-and-braces for products marked "both" without a retail price (Woo renders no cart form, so the box would sit empty) */ .tbfs-avail-both .tbfs-pdp .tbfs-pdp-retail:not(:has(form.cart)) { display: none; } .tbfs-pdp .tbfs-pdp-retail { border: 1px solid var(--wp--custom--color--border-cool); border-radius: 14px; padding: 1.1rem 1.4rem 1.3rem; } .tbfs-pdp-retail-label { font-weight: 600; font-size: 0.92rem; margin: 0 0 0.3rem; } .tbfs-pdp-price { color: var(--wp--preset--color--contrast); font-size: 1.15rem; font-weight: 600; } .tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button, .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button { background: transparent; color: var(--wp--preset--color--teal-dark); border: 1.5px solid var(--wp--preset--color--teal-dark); border-radius: 999px; font-weight: 600; padding: 0.6rem 1.6rem; } .tbfs-pdp .tbfs-pdp-retail .wp-block-add-to-cart-form button:hover, .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button:hover { background: var(--wp--preset--color--teal-dark); color: #fff; } .tbfs-pdp-meta { margin-top: 1.3rem; font-size: 0.85rem; color: var(--wp--preset--color--muted); } .tbfs-pdp .tbfs-pdp-details { margin-top: 2.4rem; } /* --- Gallery: uniform thumbnail strip under the main image --- Woo's flexslider owns the main viewport; thumbnails live in ol.flex-control-thumbs, so that's what gets the grid. */ .tbfs-pdp .tbfs-pdp-gallery .woocommerce-product-gallery__image img { border-radius: 10px; } /* !important: flexslider JS re-measures and re-floats these after load, so plain cascade wins are undone at runtime. Scoped tightly to the PDP gallery. */ .tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs { position: static !important; width: 100% !important; display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 0.55rem; margin: 0.8rem 0 0; padding: 0; list-style: none; } .tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs li { display: block !important; margin: 0 !important; padding: 0; width: auto !important; float: none !important; } .tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--wp--custom--color--border-cool); cursor: pointer; opacity: 0.55; transition: opacity 0.15s ease, border-color 0.15s ease; } .tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs img:hover, .tbfs-pdp .tbfs-pdp-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--wp--preset--color--teal-dark); } /* --- Cart forms: quantity, selects, buttons share one height and language --- */ .tbfs-pdp .tbfs-pdp-retail form.cart { margin: 0.9rem 0 0; } .tbfs-pdp .tbfs-pdp-retail form.cart:not(.variations_form), .tbfs-pdp .tbfs-pdp-retail form.cart .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 0.7rem; } .tbfs-pdp .tbfs-pdp-retail .quantity input.qty { width: 4.4rem; padding: 0.6rem 0.4rem; height: 100%; text-align: center; font: inherit; color: var(--wp--preset--color--contrast); border: 1.5px solid var(--wp--custom--color--border-cool); border-radius: 999px; background: var(--wp--preset--color--base); } .tbfs-pdp .tbfs-pdp-retail .quantity input.qty:focus { outline: none; border-color: var(--wp--preset--color--teal-dark); } /* Variation picker: label + branded select, no table chrome */ .tbfs-pdp .tbfs-pdp-retail table.variations { border-collapse: collapse; margin: 0; } .tbfs-pdp .tbfs-pdp-retail table.variations th, .tbfs-pdp .tbfs-pdp-retail table.variations td { border: none; padding: 0 0 0.7rem; text-align: left; vertical-align: middle; } .tbfs-pdp .tbfs-pdp-retail table.variations th.label { padding-right: 0.9rem; font-weight: 600; font-size: 0.92rem; } .tbfs-pdp .tbfs-pdp-retail table.variations select { font: inherit; font-size: 0.95rem; color: var(--wp--preset--color--contrast); padding: 0.5rem 2.2rem 0.5rem 0.95rem; border: 1.5px solid var(--wp--custom--color--border-cool); border-radius: 999px; background-color: var(--wp--preset--color--base); appearance: none; background-image: url("data:image/svg+xml,"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 0.85em; } .tbfs-pdp .tbfs-pdp-retail table.variations select:focus { outline: none; border-color: var(--wp--preset--color--teal-dark); } .tbfs-pdp .tbfs-pdp-retail .reset_variations { font-size: 0.8rem; color: var(--wp--preset--color--muted); } .tbfs-pdp .tbfs-pdp-retail .woocommerce-variation-price { margin-bottom: 0.7rem; font-size: 1.15rem; font-weight: 600; } .tbfs-pdp .tbfs-pdp-retail .woocommerce-variation-availability .out-of-stock { color: var(--wp--preset--color--coral-dark); font-size: 0.9rem; margin: 0 0 0.7rem; } .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button.disabled, .tbfs-pdp .tbfs-pdp-retail .single_add_to_cart_button:disabled { opacity: 0.4; cursor: not-allowed; } .tbfs-pdp .tbfs-pdp-retail .stock.out-of-stock { color: var(--wp--preset--color--muted); font-size: 0.92rem; } /* --- Details tabs: quiet underline nav instead of Woo's grey boxes --- */ .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs { display: flex; gap: 1.6rem; margin: 0 0 1.8rem; padding: 0; list-style: none; border-bottom: 1px solid var(--wp--custom--color--border-cool); } .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs::before, .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs::after, .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li::before, .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li::after { display: none; } .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li, .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li.active { margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; } .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li a { display: inline-block; padding: 0.55rem 0.1rem 0.7rem; font-weight: 600; font-size: 0.98rem; color: var(--wp--preset--color--muted); text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px; } .tbfs-pdp .tbfs-pdp-details .woocommerce-tabs ul.tabs.wc-tabs li.active a { color: var(--wp--preset--color--teal-dark); border-bottom-color: var(--wp--preset--color--teal-dark); } /* Woo injects a heading that repeats the active tab's name; the tab is the label */ .tbfs-pdp .tbfs-pdp-details .woocommerce-Tabs-panel > h2:first-child { display: none; } /* --- Details prose: readable measure, calm hierarchy --- */ .tbfs-pdp .tbfs-pdp-details .wc-tab { max-width: 76ch; } .tbfs-pdp .tbfs-pdp-details .wc-tab p, .tbfs-pdp .tbfs-pdp-details .wc-tab li { font-size: 1rem; line-height: 1.75; color: var(--wp--custom--color--text-warm, var(--wp--preset--color--contrast)); } .tbfs-pdp .tbfs-pdp-details .wc-tab h2 { font-size: 1.45rem; letter-spacing: -0.01em; margin: 2.2rem 0 0.8rem; } .tbfs-pdp .tbfs-pdp-details .wc-tab h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; } .tbfs-pdp .tbfs-pdp-details .wc-tab > h2:nth-child(2), .tbfs-pdp .tbfs-pdp-details .wc-tab > h3:nth-child(2) { margin-top: 0; } /* Live descriptions drop images mid-paragraph as inline floats; give them their own line so text never wraps around a ragged edge. */ .tbfs-pdp .tbfs-pdp-details .wc-tab img { display: block; max-width: min(100%, 560px); height: auto; margin: 1.6rem 0; border-radius: 12px; } /* Additional information (attributes) table */ .tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes { border-collapse: collapse; max-width: 76ch; } .tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes th, .tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes td { border: none; border-bottom: 1px solid var(--wp--custom--color--border-cool); padding: 0.65rem 1.4rem 0.65rem 0; text-align: left; font-style: normal; background: none; } .tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes th { font-weight: 600; width: 11rem; } .tbfs-pdp .tbfs-pdp-details .woocommerce-product-attributes p { margin: 0; } @media (max-width: 781px) { .tbfs-shop-grid .wc-block-product { padding: 1.1rem 1rem 1.2rem; } .tbfs-pdp-cols { gap: 1.4rem; } } /* ---------- Responsive ---------- */ @media (max-width: 781px) { .wp-block-button.tbfs-header-cta { display: none; } .tbfs-steps, .tbfs-why-grid, .tbfs-cats, .tbfs-products, .tbfs-journal { gap: 0.9rem; } .tbfs-why-card, .tbfs-step-card, .tbfs-cat-card { padding: 1.3rem 1.2rem; } .tbfs-resupply-card, .tbfs-military-card { justify-content: center; text-align: center; } .tbfs-military-img { /* size the figure, not just the img: the figure otherwise shrink-wraps to the image's natural width and overflows the card */ width: min(100%, 320px); margin: 0 auto; } .tbfs-military-img img { width: 100%; aspect-ratio: 3 / 2; } .tbfs-military-actions { justify-content: center; } /* keep product images from going edge-to-edge when columns stack */ .tbfs-product-img img { max-width: 260px; margin: 0 auto; } } /* ========================================================================== Blog: index (posts page) + single post The index reuses .tbfs-journal card styling (see Journal cards above); the rules here add the title band, the meta line on cards, pagination, and the full single-post reading layout. ========================================================================== */ /* ---------- Blog index ---------- */ .tbfs-blog-hero { padding-block: var(--wp--custom--spacing--band-y) 0; padding-inline: var(--wp--custom--spacing--band-x); } .tbfs-blog-title { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.02em; margin: 0; } .tbfs-blog-intro { color: var(--wp--preset--color--muted); max-width: 62ch; margin: 1.1rem auto 0; line-height: 1.7; } .tbfs-blog-body { padding-block: clamp(2.25rem, 5vw, 3.5rem) var(--wp--custom--spacing--band-y); padding-inline: var(--wp--custom--spacing--band-x); } /* Card meta line: category pill + date, sitting above the title */ .tbfs-journal-meta { margin: 1.1rem 1.4rem 0; align-items: center; gap: 0.5rem 0.7rem; font-size: var(--wp--preset--font-size--small); } .tbfs-journal-meta .tbfs-journal-cat { color: var(--wp--preset--color--teal-dark); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.72rem; } .tbfs-journal-meta .tbfs-journal-cat a { color: inherit; text-decoration: none; } .tbfs-journal-meta .tbfs-journal-cat a:hover { text-decoration: underline; text-underline-offset: 2px; } .tbfs-journal-meta .wp-block-post-date { color: var(--wp--preset--color--muted); margin: 0; } /* When the card carries a meta line, tighten the title's top margin */ .tbfs-blog-grid .tbfs-journal-title { margin-top: 0.5rem; } /* ---------- Pagination (shared: blog index + shop/category archives) ---------- The blog and Woo query loops both render core .wp-block-query-pagination with .page-numbers cells and prev/next blocks, so one treatment styles both: each cell is a soft rounded button, the current page is filled teal, and prev/next collapse to chevron-only buttons (their verbose "Previous Page" text hidden). */ .tbfs-blog-pagination, .tbfs-shop-pagination { margin-top: clamp(2.4rem, 4vw, 3.4rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; } .tbfs-blog-pagination .wp-block-query-pagination-numbers, .tbfs-shop-pagination .wp-block-query-pagination-numbers { display: inline-flex; align-items: center; gap: 0.4rem; } .tbfs-blog-pagination .page-numbers, .tbfs-shop-pagination .page-numbers, .tbfs-blog-pagination .wp-block-query-pagination-previous, .tbfs-blog-pagination .wp-block-query-pagination-next, .tbfs-shop-pagination .wp-block-query-pagination-previous, .tbfs-shop-pagination .wp-block-query-pagination-next { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 2.7rem; height: 2.7rem; padding: 0 0.65rem; border-radius: 999px; border: 1px solid var(--wp--custom--color--border-cool); background: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--heading); font-size: 0.95rem; font-weight: 600; line-height: 1; color: var(--wp--preset--color--contrast); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } /* Only the clickable cells (anchors) react to hover */ .tbfs-blog-pagination a.page-numbers:hover, .tbfs-shop-pagination a.page-numbers:hover, .tbfs-blog-pagination .wp-block-query-pagination-previous:hover, .tbfs-blog-pagination .wp-block-query-pagination-next:hover, .tbfs-shop-pagination .wp-block-query-pagination-previous:hover, .tbfs-shop-pagination .wp-block-query-pagination-next:hover { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal-dark); transform: translateY(-1px); box-shadow: var(--wp--custom--shadow--card-sm); } /* Current page: filled teal */ .tbfs-blog-pagination .page-numbers.current, .tbfs-shop-pagination .page-numbers.current { background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--base); } /* The "…" gap is text, not a button */ .tbfs-blog-pagination .page-numbers.dots, .tbfs-shop-pagination .page-numbers.dots { min-width: 1.4rem; padding: 0 0.2rem; border-color: transparent; background: transparent; color: var(--wp--preset--color--muted); } /* Prev/next: hide the verbose label, show a chevron glyph instead */ .tbfs-blog-pagination .wp-block-query-pagination-previous, .tbfs-blog-pagination .wp-block-query-pagination-next, .tbfs-shop-pagination .wp-block-query-pagination-previous, .tbfs-shop-pagination .wp-block-query-pagination-next { font-size: 0; padding: 0; } .tbfs-blog-pagination .wp-block-query-pagination-previous::before, .tbfs-shop-pagination .wp-block-query-pagination-previous::before { content: "\2039"; /* ‹ */ font-size: 1.4rem; } .tbfs-blog-pagination .wp-block-query-pagination-next::before, .tbfs-shop-pagination .wp-block-query-pagination-next::before { content: "\203A"; /* › */ font-size: 1.4rem; } /* ---------- Single post ---------- */ .tbfs-post { padding-block: clamp(2rem, 5vw, 3.25rem) 0; padding-inline: var(--wp--custom--spacing--band-x); } .tbfs-post-header { text-align: center; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .tbfs-post-eyebrow { color: var(--wp--preset--color--teal-dark); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.78rem; margin-bottom: 0.75rem; } .tbfs-post-eyebrow a { color: inherit; text-decoration: none; } .tbfs-post-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; } .tbfs-post-title { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.85rem; } .tbfs-post-date { color: var(--wp--preset--color--muted); margin: 0; } .tbfs-post-featured { margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); max-width: 980px; } .tbfs-post-featured img { width: 100%; border-radius: 18px; box-shadow: var(--wp--custom--shadow--card); } /* Reading column: comfortable measure, generous rhythm */ .tbfs-post-content { color: var(--wp--preset--color--contrast); font-size: 1.06rem; line-height: 1.75; } .tbfs-post-content p { margin: 0 0 1.35rem; } .tbfs-post-content h2, .tbfs-post-content h3, .tbfs-post-content h4 { font-family: var(--wp--preset--font-family--heading); letter-spacing: -0.01em; line-height: 1.25; margin: 2.2rem 0 0.9rem; } .tbfs-post-content h2 { font-size: 1.7rem; } .tbfs-post-content h3 { font-size: 1.35rem; } .tbfs-post-content a { color: var(--wp--preset--color--teal-dark); text-underline-offset: 3px; } .tbfs-post-content img { max-width: 100%; height: auto; border-radius: 14px; } .tbfs-post-content ul, .tbfs-post-content ol { margin: 0 0 1.35rem; padding-left: 1.4rem; line-height: 1.7; } .tbfs-post-content li { margin-bottom: 0.5rem; } .tbfs-post-content blockquote { border-left: 3px solid var(--wp--preset--color--coral); margin: 1.75rem 0; padding: 0.4rem 0 0.4rem 1.25rem; color: var(--wp--preset--color--text-warm, #7a6a66); font-style: italic; } .tbfs-post-divider { max-width: 760px; margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.5rem, 3vw, 2rem); border-color: var(--wp--custom--color--border-warm); } .tbfs-post-nav { max-width: 760px; margin: 0 auto; gap: 1rem; } .tbfs-post-nav .wp-block-post-navigation-link { font-family: var(--wp--preset--font-family--heading); font-weight: 600; } .tbfs-post-nav .wp-block-post-navigation-link a { color: var(--wp--preset--color--teal-dark); text-decoration: none; } .tbfs-post-nav .wp-block-post-navigation-link a:hover { text-decoration: underline; text-underline-offset: 3px; } .tbfs-post-related { margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--wp--preset--color--cream); } @media (max-width: 781px) { .tbfs-post-content { font-size: 1rem; } .tbfs-post-content h2 { font-size: 1.45rem; } .tbfs-blog-grid, .tbfs-related-query .tbfs-journal { gap: 0.9rem; } }