must stop constraining them. Astra's page-builder layout drops the container, but it also ships .ast-single-post.ast-page-builder-template .site-main > article { padding: 20px } at specificity (0,3,1). A plain `.bs-design-page .ast-article-single` (0,2,0) loses to it, so the reset below re-uses Astra's own anchors plus our body class to land at (0,4,1) and win on merit rather than with !important. ========================================================================== */ .bs-design-page.ast-page-builder-template .site-main > article, .bs-design-page.ast-single-post.ast-page-builder-template .site-main > article, .bs-design-page .site-main > article.ast-article-single{ padding:0; margin:0; border:0; background:none; box-shadow:none; } .bs-design-page .site-main{padding:0;margin:0} .bs-design-page .content-area{padding:0;margin:0} .bs-design-page .site-content .ast-container{padding:0;margin:0;max-width:100%} .bs-design-page .entry-content{max-width:none;margin:0} .bs-design-page .site-content{padding-top:0} /* The design's bands own their own spacing. */ .bs-design-page .entry-content > section{margin:0;width:100%} .bs-design-page .entry-content > *:first-child{margin-top:0} /* Media inside the designs must never force a horizontal scrollbar. */ .bs-design-page section img, .bs-design-page section svg{max-width:100%} /* ========================================================================== Link underlines. Requested: links should not be underlined sitting on the page, only on hover. Astra underlines links inside .entry-content, and the design system's .prose block underlines body links. Both are turned off at rest and restored on hover/focus, so the affordance is still there when you reach for it and keyboard users keep an equivalent cue. ========================================================================== */ .bs-design-page .entry-content a, .bs-design-page .entry-content a:visited, .bs-design-page .prose a, .entry-content .prose a{ text-decoration:none; } .bs-design-page .entry-content a:hover, .bs-design-page .entry-content a:focus-visible, .bs-design-page .prose a:hover, .bs-design-page .prose a:focus-visible, .entry-content .prose a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } /* Buttons and cards are whole-surface targets — never underline those. */ .bs-design-page .entry-content a[role="button"]:hover, .bs-design-page .entry-content a:has(> svg):hover{ text-decoration:none; } /* ========================================================================== Tab groups — stacked states captured per tab. ========================================================================== */ [data-bs-tabgroup] > [data-bs-tabstate][hidden]{display:none} [data-bs-tabgroup] > [data-bs-tabstate]{animation:bsFadeIn 300ms var(--ease-standard) both} @keyframes bsFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} [data-bs-tabgroup] [role="tab"]{cursor:pointer} [data-bs-tabgroup] [role="tab"]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px} /* ========================================================================== Image placeholders. No real photography or client logos exist yet. Any that fails to load falls back to a branded mist tile instead of a broken-image icon. ========================================================================== */ .bs-design-page img{background:var(--mist);border-radius:var(--radius-sm)} .bs-design-page img[src=""], .bs-design-page img:not([src]){ display:block; min-height:180px; background:linear-gradient(135deg,var(--mist) 0%,#DCE9FB 100%); } /* The logo marks are real assets — keep them transparent. */ .bs-design-page img[src*="logo-"]{background:none;border-radius:0} /* ========================================================================== Interaction polish ========================================================================== */ .bs-design-page button{cursor:pointer} .bs-design-page [aria-expanded]{cursor:pointer} .bs-design-page a, .bs-design-page button{-webkit-tap-highlight-color:transparent} /* Anchor targets clear the sticky header when jumped to. */ .bs-design-page [id]{scroll-margin-top:96px} @media (prefers-reduced-motion:reduce){ [data-bs-tabgroup] > [data-bs-tabstate]{animation:none} } /* ========================================================================== Micro-interactions. The captured designs are static snapshots, so every hover state the runtime used to apply was lost. These restore the design system's own motion rules: transform/opacity only, 300ms cubic-bezier(0.4,0,0.2,1), subtle scale, no bounce — and nothing continuous except the ticker and carousel. ========================================================================== */ /* Cards and tiles lift on hover, as the design system specifies (4px). */ .bs-design-page .entry-content a[style*="border-radius"]:hover, .bs-design-page .entry-content div[style*="border-radius: 16px"]:hover, .bs-design-page .entry-content div[style*="border-radius: 24px"]:hover{ transform:translateY(-4px); transition:transform var(--dur-hover) var(--ease-standard),box-shadow var(--dur-hover) var(--ease-standard); } /* Every link and button gets a calm, consistent transition. */ .bs-design-page .entry-content a, .bs-design-page .entry-content button{ transition:transform var(--dur-interactive) var(--ease-standard), background-color var(--dur-interactive) var(--ease-standard), border-color var(--dur-interactive) var(--ease-standard), color var(--dur-interactive) var(--ease-standard), box-shadow var(--dur-interactive) var(--ease-standard), opacity var(--dur-interactive) var(--ease-standard); } /* Primary actions: darken and lift slightly, never scale text. */ .bs-design-page .entry-content a[style*="background: var(--blue)"]:hover, .bs-design-page .entry-content a[style*="background:var(--blue)"]:hover{ background:var(--blue-hover); transform:translateY(-2px); box-shadow:0 10px 24px rgba(49,92,253,.28); } /* Arrow glyphs nudge right on hover — the design system's link affordance. */ .bs-design-page .entry-content a:hover > span:last-child{ transform:translateX(3px); transition:transform var(--dur-interactive) var(--ease-standard); } /* Accordion rows respond to the pointer. */ .bs-design-page .entry-content h3 button[aria-expanded]{ transition:color var(--dur-interactive) var(--ease-standard); } .bs-design-page .entry-content h3 button[aria-expanded]:hover{ color:var(--blue); } /* Tabs: clearer affordance and a smooth active swap. */ [data-bs-tabgroup] [role="tab"]{transition:color var(--dur-interactive) var(--ease-standard),opacity var(--dur-interactive) var(--ease-standard)} [data-bs-tabgroup] [role="tab"]:hover{opacity:.85} /* Accordion panels ease open rather than snapping. */ [data-bs-acc-panel]{animation:bsAccIn 220ms var(--ease-standard) both} @keyframes bsAccIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* Headings the typography pass enlarged should still wrap gracefully. */ .bs-design-page [data-bs-scaled]{text-wrap:balance} @media (prefers-reduced-motion:reduce){ .bs-design-page .entry-content a, .bs-design-page .entry-content button, [data-bs-acc-panel]{transition:none;animation:none} .bs-design-page .entry-content a:hover{transform:none} } /* FAQ category states — only the active category is shown. */ [data-bs-faqgroup] > [data-bs-faqstate][hidden]{display:none} [data-bs-faqgroup] > [data-bs-faqstate]{animation:bsFadeIn 260ms var(--ease-standard) both} [data-bs-faqgroup] button{cursor:pointer} @media (prefers-reduced-motion:reduce){[data-bs-faqgroup] > [data-bs-faqstate]{animation:none}} /* ========================================================================== Reveal failsafe — content must never depend on JS to be visible. The captured designs froze their scroll-reveal animations at inline `opacity: 0`. The reveal script clears those, but it was scoped to `.entry-content`, which does not exist once a page is rendered by Elementor, so entire cards and SVG illustrations rendered blank. The script is fixed, but the guarantee belongs in CSS: inline styles can only be beaten by !important, and a blank page is a far worse failure than a lost fade-in. If the script runs it simply agrees with this. ========================================================================== */ section [style*="opacity: 0"], section [style*="opacity:0"], .elementor section [style*="opacity: 0"], .elementor section [style*="opacity:0"]{ opacity:1 !important; } /* Those same elements were parked off-position by the reveal transform. */ section [style*="opacity: 0"][style*="translate"], section [style*="opacity:0"][style*="translate"], .elementor section [style*="opacity: 0"][style*="translate"], .elementor section [style*="opacity:0"][style*="translate"]{ transform:none !important; } /* SVG children carry opacity as a presentation attribute, which inline style does not always override — cover those explicitly. */ section svg[opacity="0"], section svg [opacity="0"], .elementor section svg[opacity="0"], .elementor section svg [opacity="0"]{ opacity:1 !important; } /* Hero images are appended after the design's own hero grid, so they would render full-bleed under the headline. Until each design's right-hand column is targeted directly, constrain them to the content width and give them the card treatment so they read as part of the hero rather than an afterthought. */ .bs-hero-img{max-width:1120px;margin:32px auto 0;padding:0 24px;box-sizing:border-box} .bs-hero-img img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:var(--shadow-card)} @media (max-width:768px){.bs-hero-img{margin-top:24px;padding:0 16px}} /* --------------------------------------------------------------------------- BS: narrow-viewport grid collapse The captured designs carry their column counts as inline styles, so a stylesheet cannot reach them without matching the attribute and forcing the override. Fixed two-column rows keep their widths below the breakpoint and push their own content past the container, which squeezes anything sitting inside them. Collapse those rows, and only those. -------------------------------------------------------------------------- */ @media (max-width:880px){ .elementor [style*="grid-template-columns: 0.62fr 1fr"], .elementor [style*="grid-template-columns:0.62fr 1fr"], .elementor [style*="grid-template-columns: 1fr 1fr"], .elementor [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; } /* the paired text/image rows stack in source order once they wrap, so trade the side gap for the vertical rhythm */ .elementor [style*="display:flex"][style*="flex-wrap:wrap"]{gap:28px !important} } /* The impact card reserves 44px of side padding for a 1120px canvas, which leaves almost nothing for its contents on a phone. */ @media (max-width:700px){ .elementor [style*="padding: 56px 44px"]{padding:32px 22px !important} .elementor [style*="display: flex"][style*="flex-direction: row"]{flex-wrap:wrap} }