/** * Use Case Library — wireframe-level styling. * * Intentionally plain: neutral cards, generic line icons, simple controls. * Designers can restyle any .uc-* class. Accent follows the InterWorks purple * (#6633ff); the type label reuses the blog eyebrow purple (#612BD1) and the * titles/body/tags reuse the blog's Nunito Sans in normal case. */ :root { /* InterWorks purple — used across the site; accent for the use-case library. */ --uc-accent: #6633ff; /* Blog category/eyebrow purple, reused for the type label. */ --uc-eyebrow: #612BD1; --uc-ink: #2c2c2c; --uc-muted: #6b7280; --uc-line: #e2e4e7; --uc-bg-soft: #f6f5fb; --uc-radius: 8px; } /* Clip horizontal scroll on the use-cases templates. The site's off-canvas contact popup (.popup, position:fixed, parked off to the right) adds phantom document scroll width because is overflow-x:visible. body already clips; this closes the gap at the root for these pages only. */ html:has(body.page-template-use-cases), html:has(body.page-template-use-cases-technology) { overflow-x: hidden; } /* box-sizing on everything in the use-cases UI so padding/border never pushes an element past the viewport (the theme does not set border-box globally). Includes the CTA band, which is a sibling OUTSIDE .uc-library. */ .uc-library, .uc-library *, .uc-library *::before, .uc-library *::after, .uc-single, .uc-single *, .uc-single *::before, .uc-single *::after, .use_case_contact, .use_case_contact *, .use_case_contact *::before, .use_case_contact *::after { box-sizing: border-box; } .uc-library, .uc-single { box-sizing: border-box; width: 100%; max-width: 1100px; margin: 0 auto; padding: 40px 20px 60px; color: var(--uc-ink); } /* The single template drops the Bridge title banner, so add breathing room at the top so content clears the sticky/hovering nav. Tuned so the title sits ~120px below the nav (per design). */ .uc-single { padding-top: 185px; } /* ---- Top gradient behind the nav (approved design) ---- The redesign dropped the Bridge title banner, which used to trigger the theme's animated header gradient (#top-block-primary). That element is a site-wide feature that starts hidden (opacity:0) and is normally faded in by the theme's JS on plain pages. Force it visible on the use-case templates so the animated gradient shows behind the nav. */ .page-template-use-cases #top-block-primary, .page-template-use-cases-technology #top-block-primary, body.single-use_case #top-block-primary { opacity: 1 !important; } /* ---- Centered header (approved design) ---- Both landing templates render their own heading (no Bridge title banner), so they need top clearance under the sticky/hovering nav. */ .uc-library-centered { position: relative; z-index: 1; padding-top: 190px; text-align: center; } .uc-header { max-width: 820px; margin: 0 auto 70px; } /* Optional page logo (Featured Image) centered above the title on technology landing pages. `--uc-logo-max` is set inline from the "Logo width" slider; the image scales down naturally on narrow screens via width:100%. */ .uc-page-logo { margin: 0 auto 22px; text-align: center; } .uc-page-logo .uc-page-logo-img { display: inline-block; width: 100%; max-width: var(--uc-logo-max, 140px); height: auto; } .uc-page-title { font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 64px; line-height: 1.1; text-transform: none; color: #000; margin: 0 0 22px; } .uc-intro, .uc-intro p { font-size: 26px; font-weight: 400; line-height: 1.4; color: #000; margin: 0; } .uc-intro p:last-child { margin-bottom: 0; } /* ---- Controls (search + filters) — matches the blog primary search bar ---- White fields, soft shadow, 1px #eee border, rounded; the search input has a purple magnifier icon inside on the right. Left-aligned within the centered page via a max-width wrapper. */ .uc-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; justify-content: center; margin: 0 auto 42px; text-align: left; } .uc-search { position: relative; flex: 1 1 360px; max-width: 400px; } .uc-search input[type="search"] { width: 100%; height: 46px; padding: 0 44px 0 18px; font-size: 14px; color: #000; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.03); box-sizing: border-box; -webkit-appearance: none; appearance: none; } .uc-search input[type="search"]::-webkit-search-decoration, .uc-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .uc-search-icon { position: absolute; top: 0; right: 12px; bottom: 0; width: 20px; background: url(/wp-content/themes/interworks/images/purple-search2.svg) no-repeat center center; background-size: 17px auto; pointer-events: none; } .uc-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; } .uc-filter-group { display: flex; } .uc-filter { height: 46px; min-width: 160px; padding: 0 38px 0 18px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; color: var(--uc-ink); background-color: #fff; /* purple chevron */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%236633ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px auto; border: 1px solid #eee; border-radius: 8px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.03); box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .uc-filter:focus { outline: none; border-color: var(--uc-accent); } /* Reset stays available but visually subordinate. */ .uc-reset { height: 46px; padding: 0 18px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; border: 1px solid #eee; background: #fff; border-radius: 8px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.03); cursor: pointer; color: var(--uc-muted); } .uc-reset:hover { border-color: var(--uc-accent); color: var(--uc-ink); } /* Result count hidden per design. Kept in the DOM (aria-live) for a11y and easy re-enable — remove this display:none to show it again. */ .uc-result-count { display: none; font-size: 0.85rem; color: var(--uc-muted); margin: 0 0 22px; text-align: left; } /* ---- Card grid ---- */ .uc-grid { display: grid; /* minmax(0, 1fr) stops long unbreakable content from blowing out a column. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; } .uc-card { border: none; border-radius: 10px; background: #fff; box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.1); transition: box-shadow 0.15s ease, transform 0.15s ease; } /* The theme (Bridge) sets display on
, which overrides the browser's default [hidden]{display:none}. Force-hide filtered-out cards so the JS filter/search actually removes them from the grid. */ .uc-card[hidden] { display: none !important; } .uc-card:hover { /* Neutral lift on hover — no purple glow. */ box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12); transform: translateY(-3px); } .uc-card-link { display: flex; flex-direction: column; gap: 16px; padding: 30px 28px; height: 100%; text-decoration: none; color: inherit; } /* Never underline the card title/summary on hover (the theme underlines anchors on :hover; the whole card is one anchor). */ .uc-card-link:hover, .uc-card-link:focus, .uc-card-link:hover .uc-card-title, .uc-card-link:hover .uc-card-summary, .uc-card-link:hover .uc-card-type { text-decoration: none; } .uc-card-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--uc-radius); background: rgba(102, 51, 255, 0.10); color: var(--uc-accent); flex: 0 0 auto; } .uc-type-icon { width: 28px; height: 28px; } /* Uploaded industry icon: 54px square. Larger than the 52px tile on purpose — it overflows/covers the tile edges. flex-shrink:0 + max-width:none stop the flex tile from constraining its width. */ .uc-card-icon .uc-industry-icon { width: 54px; height: 54px; max-width: none; flex: 0 0 auto; object-fit: contain; display: block; } /* Type label = blog "post-cat" eyebrow: purple, normal case, no letterspacing. */ .uc-card-type { display: inline-block; font-family: 'Nunito Sans', sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--uc-eyebrow); margin-bottom: 6px; } /* Title = blog "post-title": bold, normal case. Sized down from the blog's 24px for the denser library grid. */ .uc-card-title { font-family: 'Nunito Sans', sans-serif; font-weight: bold; font-size: 19px; line-height: 1.25em; text-transform: none; margin: 0 0 8px; color: var(--uc-ink); } /* Description = blog body font/color, sized down for the card. Clamp to a maximum of 4 lines, with an ellipsis at the cut. */ .uc-card-summary { font-family: 'Nunito Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.55; color: #4a4a4a; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .uc-card-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; } /* Card chips use the same blog-style outline as the single-page tags, sized down a touch for the compact card meta row. */ .uc-card-meta .uc-chip { padding: 7px 14px; } .uc-no-results, .uc-empty { padding: 40px 0; text-align: center; color: var(--uc-muted); font-size: 1rem; } .uc-reset-link, .uc-reset-link:focus { background: none; border: none; color: var(--uc-accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; } /* ---- Single use-case detail ---- */ /* Small, unobtrusive "Back to {Technology} Use Cases" link below the Team section, in the brand purple. */ .uc-single-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--uc-accent); text-decoration: none; transition: opacity 0.15s ease; } .uc-single-back:hover, .uc-single-back:focus { color: var(--uc-accent); opacity: 0.7; text-decoration: none; } .uc-single-back-arrow { font-size: 16px; line-height: 1; } /* Header: eyebrow + title only (icon, facts line and
removed per design). */ .uc-single-header { margin-bottom: 34px; } .uc-single-type { display: inline-block; font-family: 'Nunito Sans', sans-serif; font-size: 22px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--uc-eyebrow); margin-bottom: 8px; } .uc-single-title { font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-size: 48px; text-transform: none; line-height: 1.25; color: #000; margin: 0; } /* Two-column layout: content + sticky right rail. NOTE: no `align-items: start` — the rail column must stretch to the full row height so the sticky rail inside it has room to travel as you scroll. */ .uc-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; } .uc-single-lead { font-size: 18px; color: #000; line-height: 1.75; margin-bottom: 8px; } .uc-block { margin: 0 0 28px; } /* Block headings: no left border per design. */ .uc-block h2 { font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-size: 28px; text-transform: none; /* Override Bridge's default teal h2 color. */ color: #000; margin: 0 0 10px; } .uc-block p { font-size: 18px; color: #000; line-height: 1.75; margin: 0 0 10px; } .uc-bullets { /* Indent the whole list in from the surrounding prose so it stands out. */ margin: 4px 0 10px 26px; padding-left: 22px; /* Override the theme's list-style-position:inside so wrapped lines hang and align with the text instead of dropping under the bullet. */ list-style-position: outside; list-style-type: disc; } .uc-bullets li { font-size: 18px; color: #000; line-height: 1.75; margin-bottom: 6px; list-style-position: outside; padding-left: 6px; } /* Nested sub-lists: indent naturally under the parent (no extra left margin — the parent list already provides the base indent) and use a hollow marker so the hierarchy reads clearly. Wrapped sub-lines still hang to the text. */ .uc-bullets .uc-bullets-sub { margin: 6px 0 4px; padding-left: 24px; list-style-type: circle; } .uc-bullets .uc-bullets-sub .uc-bullets-sub { list-style-type: square; } /* Tags: pill row at the bottom of the article (no top divider). Matches the blog tag style (.tags_text a): purple outline, dark text, uppercase. We have no "topic", so every tag uses the outline style. */ .uc-single-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; } .uc-chip { display: inline-block; background: #fff; color: #000; border: 1px solid var(--uc-accent); border-radius: 8px; padding: 10px 20px; font-family: 'Nunito Sans', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1; } /* ---- Right rail ---- */ /* position:sticky is broken by any ancestor whose overflow is hidden/scroll/auto. The theme's body + .wrapper_inner are overflow:hidden. We add the theme's own `remove-overflow` body class on single use-case pages (via body_class filter in the mu-plugin), which sets overflow:unset there — freeing the rail to stick. Horizontal bleed is still prevented by the html overflow-x:clip below and the box-sizing reset. */ html:has(body.single-use_case) { overflow-x: clip; } /* overflow-x:clip (not hidden) clamps horizontal bleed from the off-canvas contact popup WITHOUT creating a scroll container that would break the sticky rail. !important overrides the theme's `.remove-overflow` (overflow:unset !important) which we add for the sticky rail. */ body.single-use_case.remove-overflow { overflow-x: clip !important; overflow-y: visible !important; } .uc-rail-sticky { position: sticky; top: 120px; /* clears the sticky/hovering nav */ display: flex; flex-direction: column; gap: 20px; } .uc-rail-facts { border: 1px solid var(--uc-accent); border-radius: 12px; padding: 32px 30px; display: flex; flex-direction: column; gap: 20px; } .uc-rail-fact { display: flex; flex-direction: column; gap: 3px; } .uc-rail-fact-label { font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-size: 16px; color: var(--uc-ink); } .uc-rail-fact-value { font-size: 15px; color: var(--uc-muted); } /* Rail CTA card — mini version of the footer band. */ .uc-rail-cta { border-radius: 12px; padding: 34px 30px 36px; background: radial-gradient(120% 120% at 0% 100%, #120243 0%, #12024300 70%), radial-gradient(120% 120% at 100% 0%, #9b75ff 0%, #9b75ff00 72%), #6633ff; } .uc-rail-cta-heading { font-family: 'new-spirit', Georgia, 'Times New Roman', serif; font-weight: 400; /* Sized so the full "Need help with … optimization?" sentence fits the fixed-width rail without long words (implementation/optimization) hyphenating mid-word. Capped at 25px. */ font-size: clamp(24px, 2.6vw, 25px); line-height: 1.25; text-transform: none; color: #fff; margin: 0 0 22px; /* Last-resort only: break a genuinely too-long single token (e.g. an unusually long technology name) rather than let it overflow the card. No hyphens:auto — we don't want ordinary words like "implementation" splitting when the line is just a little tight. */ overflow-wrap: break-word; } /* Long-technology-name steps (set from the template by longest-word length), so a big term like "Cortex Document Intelligence" stays inside the card. */ .uc-rail-cta-heading--sm { font-size: clamp(22px, 2.3vw, 25px); } .uc-rail-cta-heading--xs { font-size: clamp(19px, 2vw, 22px); } .uc-rail-cta-btn { display: block; width: 100%; padding: 10px 30px; background: #fff; color: var(--uc-ink); font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 16px; text-align: center; border: 2px solid #fff; border-radius: 999px; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .uc-rail-cta-btn:hover, .uc-rail-cta-btn:focus { background: transparent; color: #fff; text-decoration: none; } /* ---- Related use cases ---- */ .uc-related-wrap { margin-top: 20px; /* Space between the related cards and the full-width CTA band below. */ margin-bottom: 90px; } /* Match the article's centered, gutter-padded container so the related section doesn't touch the viewport edge on tablet/mobile. */ .uc-related-wrap .container_inner { max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .uc-related-heading { font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-size: 32px; text-transform: none; color: var(--uc-ink); margin: 0 0 34px; } .uc-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* [use_cases] shortcode: reuses the related-cards look but with balanced margins (it isn't sitting above a CTA band) and a configurable column count. */ .uc-shortcode.uc-related-wrap { margin-top: 0; margin-bottom: 0; } .uc-shortcode-grid { grid-template-columns: repeat(var(--uc-shortcode-cols, 3), minmax(0, 1fr)); } /* ---- CTA band (purple gradient) — sits above the site's primary footer ---- */ .use_case_contact { position: relative; overflow: hidden; background-size: 100% 100%; background-position: 0px 0px, 0px 0px, 0px 0px; background-image: radial-gradient(49% 81% at 0% 100%, #120243 1%, #12024300 98%), radial-gradient(49% 81% at 100% 0%, #9b75ff 1%, #9b75ff00 97%), radial-gradient(142% 91% at 111% 84%, #6633ff 0%, #6633ff 100%); } /* Noise texture overlay per the approved design. */ .comingSoonContainer:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='4' stitchTiles='stitch' result='noise'/%3E%3CfeComponentTransfer in='noise'%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px 120px; opacity: .25; z-index: 1; pointer-events: none; mix-blend-mode: overlay; } .use_case_contact_inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 90px 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 30px; } .use_case_contact_heading { /* New Spirit — the brand serif display face, loaded site-wide via the Typekit kit in header.php (same face used on /ai-services etc.). */ font-family: 'new-spirit', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 46px; line-height: 1.15; /* Override Bridge's uppercase h2 rule — the design uses title case. */ text-transform: none; color: #fff; margin: 0; max-width: 620px; } .use_case_contact_actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .use_case_contact_btn { display: inline-block; padding: 18px 40px; font-family: 'Nunito Sans', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.2; border-radius: 999px; border: 2px solid #fff; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } /* No underline / shadow / movement on hover — only a solid<->outline swap. */ .use_case_contact_btn:hover, .use_case_contact_btn:focus { text-decoration: none; box-shadow: none; transform: none; } /* Solid: white fill, dark text -> hover becomes outline. */ .use_case_contact_btn--solid { background: #fff; color: var(--uc-ink); } .use_case_contact_btn--solid:hover, .use_case_contact_btn--solid:focus { background: transparent; color: #fff; } /* Outline: transparent + white border/text -> hover becomes solid. */ .use_case_contact_btn--outline { background: transparent; color: #fff; } .use_case_contact_btn--outline:hover, .use_case_contact_btn--outline:focus { background: #fff; color: var(--uc-ink); } /* ---- Wide desktop: align the single-post content edges to the primary nav ---- At >=1180px the viewport is wide enough that the 1100px centered content column lines up with the nav/menu. Drop the article's extra horizontal padding so its edges match the nav instead of sitting inset. Both the article and the related section share the same edges. */ @media (min-width: 1180px) { .uc-single, .uc-related-wrap .container_inner { max-width: 1100px; padding-left: 0; padding-right: 0; } } /* ---- Narrow desktop (993–1179px): keep a gutter ---- Below 1180px the 1100px column would reach the viewport edges (the nav keeps its own ~22px margin here). Restore a horizontal gutter so the content — and the related section — don't touch the screen edges before the tablet layout kicks in at 992px. */ @media (min-width: 993px) and (max-width: 1179px) { .uc-single, .uc-related-wrap .container_inner { max-width: 1100px; padding-left: 30px; padding-right: 30px; } } /* ---- Responsive ---- */ /* Tablet: 2-up grid; controls wrap to search-on-top, filters-below. */ @media (max-width: 992px) { .uc-library-centered { padding-top: 160px; } /* Tablet: trim the desktop title-clearance (185px) — the tablet nav is shorter, so less space is needed above the title. (Mobile trims further.) */ .uc-single { padding-top: 130px; } .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .uc-page-title { font-size: 42px; } /* Search takes the full first row; filters sit on the row below. */ .uc-search { flex: 1 1 100%; max-width: none; } .uc-filters { flex: 1 1 100%; justify-content: flex-start; } .use_case_contact_heading { font-size: 36px; } .use_case_contact_inner { flex-direction: column; align-items: flex-start; text-align: left; padding: 64px 30px; } /* Single: rail drops below the content; related grid 2-up. */ .uc-single-layout { grid-template-columns: 1fr; gap: 40px; } .uc-rail-sticky { position: static; flex-direction: row; flex-wrap: wrap; } .uc-rail-facts, .uc-rail-cta { /* Size to content and share the row evenly — a fixed 260px basis left awkward empty space in the cards. */ flex: 1 1 auto; } .uc-related-grid, .uc-shortcode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Phone: single-column grid; controls fully stacked and full width. */ @media (max-width: 600px) { .uc-library, .uc-single { padding-left: 16px; padding-right: 16px; } /* Mobile: the desktop title-clearance (185px) is far too much under the shorter mobile nav — tighten it. Desktop/tablet keep 185px. */ .uc-single { padding-top: 120px; } .uc-library-centered { padding-top: 130px; } .uc-header { margin-bottom: 40px; } .uc-grid { grid-template-columns: 1fr; gap: 20px; } .uc-controls { flex-direction: column; align-items: stretch; gap: 12px; } .uc-search, .uc-search input[type="search"] { flex: 1 1 auto; max-width: none; width: 100%; } .uc-filters { width: 100%; flex-direction: column; gap: 12px; } .uc-filter-group { width: 100%; } .uc-filter { width: 100%; min-width: 0; } .uc-reset { width: 100%; } .uc-page-title { font-size: 32px; } .uc-intro, .uc-intro p { font-size: 18px; } .uc-single-title { /* Match the theme's standard post title size on mobile (36px). */ font-size: 36px; } .uc-rail-sticky { flex-direction: column; } /* Phone: center the rail CTA card content (heading + button). */ .uc-rail-cta { text-align: center; } /* Phone: fixed 25px heading (the long words in the new copy wrap tightly on narrow screens). Override the desktop clamp and the --sm/--xs steps. */ .uc-rail-cta-heading, .uc-rail-cta-heading--sm, .uc-rail-cta-heading--xs { font-size: 25px; line-height: 1.25; } .uc-related-heading { font-size: 26px; } .uc-related-grid, .uc-shortcode-grid { grid-template-columns: 1fr; } .uc-related-wrap .container_inner { padding-left: 16px; padding-right: 16px; } /* CTA: two-line heading; buttons stack full width so nothing overflows. Center everything on phone. */ .use_case_contact_inner { padding: 48px 22px; gap: 24px; align-items: center; text-align: center; } .use_case_contact_heading { font-size: 28px; } .use_case_contact_actions { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; } .use_case_contact_btn { width: 100%; text-align: center; padding: 15px 18px; font-size: 16px; } }