/* ========================================================================== Portfolio slider — the shared mobile treatment for every "nav + switchable cards" section in the theme. Source of truth: Figma YmLzL45Qaw4FJRduYrQQM1, page "mobile screens", node 215:4601 (frame 215:4046 "Automation"), supplied by the user as THE portfolio pattern. Figma draws the same component on the home page (213:4913) and AI-in-Business (215:6374) under identical frame names — Frame 1948756053 -> Frame 1948755994 + case-1 — so this is one component, not three lookalikes. The spec, measured rather than eyeballed: header block vertical, 16px eyebrow->heading, 32px heading->tabs tab strip horizontal, 16px gap, scrolls (844px of tabs in a 402 frame), tabs hug their labels, padding 20/32 tab state 6px bottom border, #9a60fa active / #e6e6e6 idle; Inter 16px/19.2px, active 500 at #171717, idle 400 at #171717 @ 48% card one at a time, radius 24 (244:7070), padding 24/16 section->card 40px BEHAVIOUR NEEDS NO NEW JS. Every section below already hands its nav to initScrollSpyNav() in js/main.js via data-scrollspy-nav / data-scrollspy-item. Below 1024px that helper shows one card and sets [hidden] on the rest; at 1024px+ it reverts to the sticky-nav scroll-spy with every card visible. This file only dresses that behaviour. THE [hidden] RULE IS THE LOAD-BEARING PART. The browser implements [hidden] as `display: none` in its OWN stylesheet, which ANY author `display` declaration outranks. Four of these six sections set `display: flex` on the card, so the helper was setting the attribute and nothing happened — the tabs looked dead and every card stayed on screen. That was true on /automation/ before 2026-09-22 and is still the reason the home page's own cards needed .usecase-card[hidden] the same day. NOT COVERED HERE, deliberately: .usecases (home, css/content.css) and .automation-demos (css/automation.css) already carry this treatment in their own files and are verified working in a browser. Folding them in would mean re-testing two signed-off sections to remove duplication that costs nothing at runtime. If a third place ever needs the pattern, migrate all three together rather than adding a fourth copy. ========================================================================== */ /* [hidden] first, and OUTSIDE the media query on purpose: an element carrying the attribute should be hidden at every width, and the helper can set it before the query is evaluated. Two classes are not needed — [hidden] adds an attribute selector, so these already outrank the bare class rules that set `display`. */ body.tbi-portfolio-slider .agp-card[hidden], body.tbi-portfolio-slider .shopify_service-work-card[hidden], body.tbi-portfolio-slider .dms-work-card[hidden], body.tbi-portfolio-slider .shopify-work-card[hidden], body.tbi-portfolio-slider .aibusiness-proven__case[hidden], body.tbi-portfolio-slider .ecom-work-card[hidden] { display: none; } @media (max-width: 767px) { /* ---- Tab strip: horizontal, scrolling, gutter-bleeding ---- margin-inline uses the sitewide container token so the first tab starts flush with the section's own edge on every one of these pages, which do not agree on a gutter value. */ body.tbi-portfolio-slider .agp__navlist, body.tbi-portfolio-slider .shopify_service-work__nav, body.tbi-portfolio-slider .dms-work__nav, body.tbi-portfolio-slider .shopify-work__nav, body.tbi-portfolio-slider .aibusiness-proven__nav, body.tbi-portfolio-slider .ecom-work__nav { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px; overflow-x: auto; margin-inline: calc(var(--container-padding-inline) * -1); padding-inline: var(--container-padding-inline); scroll-padding-inline: var(--container-padding-inline); scrollbar-width: none; scroll-snap-type: x proximity; border: 0; } body.tbi-portfolio-slider .agp__navlist::-webkit-scrollbar, body.tbi-portfolio-slider .shopify_service-work__nav::-webkit-scrollbar, body.tbi-portfolio-slider .dms-work__nav::-webkit-scrollbar, body.tbi-portfolio-slider .shopify-work__nav::-webkit-scrollbar, body.tbi-portfolio-slider .aibusiness-proven__nav::-webkit-scrollbar, body.tbi-portfolio-slider .ecom-work__nav::-webkit-scrollbar { display: none; } /* ---- Tabs: hug the label, 6px underline carries the state ---- */ body.tbi-portfolio-slider .agp__navitem, body.tbi-portfolio-slider .shopify_service-work__nav-item, body.tbi-portfolio-slider .dms-work__nav-item, body.tbi-portfolio-slider .shopify-work__nav-item, body.tbi-portfolio-slider .aibusiness-proven__nav-item, body.tbi-portfolio-slider .ecom-work__nav-item { flex: 0 0 auto; width: auto; min-height: 0; padding: 20px 32px; border: 0; border-bottom: 6px solid #e6e6e6; border-radius: 0; background: none; font-family: var(--font-base); font-weight: 400; font-size: 16px; line-height: 19.2px; color: rgba(23, 23, 23, 0.48); text-align: left; white-space: nowrap; scroll-snap-align: start; } body.tbi-portfolio-slider .agp__navitem.is-active, body.tbi-portfolio-slider .shopify_service-work__nav-item.is-active, body.tbi-portfolio-slider .dms-work__nav-item.is-active, body.tbi-portfolio-slider .shopify-work__nav-item.is-active, body.tbi-portfolio-slider .aibusiness-proven__nav-item.is-active, body.tbi-portfolio-slider .ecom-work__nav-item.is-active { border-bottom-color: #9a60fa; font-weight: 500; color: #171717; } /* Several of these pages sit on a dark section, where #171717 text would be invisible. The tab ink is inverted there rather than per-page-overridden in six stylesheets. */ body.tbi-portfolio-slider .agp__navitem, body.tbi-portfolio-slider .aibusiness-proven__nav-item { color: rgba(255, 255, 255, 0.48); } body.tbi-portfolio-slider .agp__navitem.is-active, body.tbi-portfolio-slider .aibusiness-proven__nav-item.is-active { color: #ffffff; } body.tbi-portfolio-slider .agp__navlist .agp__navitem, body.tbi-portfolio-slider .aibusiness-proven__nav .aibusiness-proven__nav-item { border-bottom-color: rgba(255, 255, 255, 0.16); } body.tbi-portfolio-slider .agp__navlist .agp__navitem.is-active, body.tbi-portfolio-slider .aibusiness-proven__nav .aibusiness-proven__nav-item.is-active { border-bottom-color: #9a60fa; } /* The desktop composition marks the active item with a bar or rule to the left of the label; the mobile design uses the underline instead, so those indicators are dropped rather than left stacking with it. */ body.tbi-portfolio-slider .agp__navbar, body.tbi-portfolio-slider .aibusiness-proven__nav-indicator, body.tbi-portfolio-slider .dms-work__nav-indicator, body.tbi-portfolio-slider .shopify-work__nav-indicator, body.tbi-portfolio-slider .shopify_service-work__nav-indicator, body.tbi-portfolio-slider .ecom-work__nav-indicator { display: none; } /* ---- Card: one at a time, 40px below the strip ---- Radius 24, not 16: Figma node 244:7070 (2026-09-23), the dedicated mobile portfolio card, supersedes 215:4601's 16 for the card itself. */ body.tbi-portfolio-slider .agp-card, body.tbi-portfolio-slider .shopify_service-work-card, body.tbi-portfolio-slider .dms-work-card, body.tbi-portfolio-slider .shopify-work-card, body.tbi-portfolio-slider .aibusiness-proven__case, body.tbi-portfolio-slider .ecom-work-card { width: 100%; max-width: 100%; min-width: 0; margin-top: 40px; padding: 24px 16px; border-radius: 24px; overflow: hidden; } }