/* ========================================================================== Augmented Systems — SOLUTIONS HUB + INDUSTRY EXPERTISE HUB (.as-hub*) Added 2026-08-19 from the client reference pages: https://augmentedtechlabs.techbookcreations.com/solutions https://augmentedtechlabs.techbookcreations.com/industry-expertise Both reference pages are the same shape — solo hero, then ONE card grid — so both hubs share this single file. Only the card interior differs: .as-hub-card--sol solutions: bare blue icon, "Core Pillar" tag on the three pillars, 3 bullet items, "View solution ->" .as-hub-card--ind industries: 48px tinted icon tile, no list, "Explore ->" The reference is DARK-themed; this is the project's established LIGHT adaptation of it — the same palette as .as-hero2 / .as-chal / .as-sol / .as-appr (blue #3b6fd4 + orange #f4692a over near-navy ink #0f1b33), so the shared header, footer, hero and CTA components drop in unchanged. SIZING: fixed px, not rem. The theme sets :root{font-size:20px}, so rem lengths render ~25% larger than intended. Nothing here overrides a global theme file — every rule is prefixed .as-hub*. ========================================================================== */ .as-hub { --hb-ink: #0f1b33; --hb-body: #5b6579; --hb-blue: #3b6fd4; --hb-blue-deep: #2f4fb8; --hb-orange: #f4692a; --hb-line: #dde4ee; --hb-soft: #f1f4f9; background: #fff; } /* --- Grid ------------------------------------------------------------------ Reference: lg:grid-cols-3 / md (solutions) sm (industries) :grid-cols-2 / 1. minmax(0,1fr) so a long unbroken word can never blow the column out. */ .as-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* --- Card ------------------------------------------------------------------ The whole card is the link (the reference wraps each card in ), so the hover state lives here and the "View solution ->" row is decorative. */ .as-hub-card { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 32px; background: #fff; border: 1px solid var(--hb-line); border-radius: 16px; text-decoration: none; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .as-hub-card:hover, .as-hub-card:focus-visible { transform: translateY(-6px); border-color: rgba(59, 111, 212, 0.5); box-shadow: 0 14px 34px rgba(15, 27, 51, 0.09); } .as-hub-card:focus-visible { outline: 2px solid var(--hb-blue); outline-offset: 3px; } /* The three core pillars carry a stronger border, as in the reference. */ .as-hub-card--core { border-color: rgba(59, 111, 212, 0.4); } /* "CORE PILLAR" tag — orange, the reference's only accent on this page. */ .as-hub-tag { display: block; margin-bottom: 12px; color: var(--hb-orange); font-size: 10px; font-weight: 800; letter-spacing: 0.25em; line-height: 1; text-transform: uppercase; } /* --- Icons ----------------------------------------------------------------- Solutions: bare 32px blue glyph. Industries: 48px tinted rounded tile. */ .as-hub-ico { display: block; margin-bottom: 16px; color: var(--hb-blue); font-size: 32px; line-height: 1; } .as-hub-tile { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border: 1px solid rgba(59, 111, 212, 0.25); border-radius: 12px; background: rgba(59, 111, 212, 0.1); color: var(--hb-blue); font-size: 24px; line-height: 1; transition: background 0.3s ease, border-color 0.3s ease; } .as-hub-card:hover .as-hub-tile { background: rgba(59, 111, 212, 0.16); border-color: rgba(59, 111, 212, 0.45); } /* --- Card type ------------------------------------------------------------- h3 only, so the "main .wrapper h2" size override in home-revamp.css is not in play here. */ .as-hub-card h3 { margin: 0; color: var(--hb-ink); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; transition: color 0.3s ease; } .as-hub-card:hover h3, .as-hub-card:focus-visible h3 { color: var(--hb-blue); } /* flex:1 pushes the "View solution ->" row to the bottom so every card in a row ends on the same line regardless of copy length. */ .as-hub-card p { flex: 1; margin: 12px 0 0; color: var(--hb-body); font-size: 14.5px; line-height: 1.62; } /* --- Included list (solutions only) ---------------------------------------- */ .as-hub-list { list-style: none; margin: 20px 0 0; padding: 0; } .as-hub-list li { position: relative; padding-left: 16px; color: var(--hb-body); font-size: 13px; line-height: 1.5; } .as-hub-list li + li { margin-top: 6px; } .as-hub-list li::before { content: "\2022"; position: absolute; left: 0; top: 0; color: var(--hb-blue); } /* --- "View solution ->" / "Explore ->" ------------------------------------- */ .as-hub-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--hb-blue); font-size: 14px; font-weight: 700; line-height: 1.2; } .as-hub-more i { font-size: 16px; transition: transform 0.3s ease; } .as-hub-card:hover .as-hub-more i, .as-hub-card:focus-visible .as-hub-more i { transform: translateX(4px); } /* ========================================================================== RESPONSIVE The grid re-flows; the cards do not shrink. No horizontal scrolling at any width. ========================================================================== */ @media (max-width: 991.98px) { .as-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .as-hub-card { padding: 26px; } .as-hub-tile { width: 44px; height: 44px; margin-bottom: 20px; font-size: 22px; } } @media (max-width: 575.98px) { .as-hub-grid { grid-template-columns: 1fr; gap: 16px; } .as-hub-card { padding: 22px; border-radius: 14px; } .as-hub-card h3 { font-size: 17px; } .as-hub-card p { font-size: 14px; } .as-hub-ico { font-size: 28px; margin-bottom: 14px; } .as-hub-more { margin-top: 20px; } }