/* Secure Bytes Solutions R4.0.3.3.2 — Know The Service CTA Visual Repair Narrow homepage-only refinement: - fixes service-card action hierarchy at desktop/browser zoom levels - turns Request This Service into the clear primary action - turns View Full Service Details into a compact secondary action - removes the oversized empty-button appearance - improves service icon presentation - preserves all pricing, hrefs, forms, data and dedicated service pages */ body.r4-home-unified.r403-home-customer-first .r21-service-card{ position:relative !important; display:flex !important; flex-direction:column !important; min-height:310px !important; } /* Keep description area visually consistent across the 3-column grid. */ body.r4-home-unified.r403-home-customer-first .r21-service-card > p:not(.r21-duration){ min-height:2.7em !important; margin-bottom:12px !important; } /* Actual inline SVG inserted by home-service-polish-r40332.js. */ body.r4-home-unified.r403-home-customer-first .individual-service-icon{ width:40px !important; height:40px !important; flex:0 0 40px !important; display:grid !important; place-items:center !important; overflow:hidden !important; border:1px solid rgba(56,189,248,.52) !important; border-radius:10px !important; background: radial-gradient(circle at 35% 25%,rgba(56,189,248,.16),transparent 70%), rgba(7,26,48,.92) !important; color:#54ccff !important; box-shadow: inset 0 0 0 1px rgba(125,211,252,.04), 0 0 20px rgba(56,189,248,.05) !important; } body.r4-home-unified.r403-home-customer-first .individual-service-icon::before{ display:none !important; content:none !important; } body.r4-home-unified.r403-home-customer-first .individual-service-icon > i{ display:none !important; } body.r4-home-unified.r403-home-customer-first .individual-service-icon > svg{ width:21px !important; height:21px !important; display:block !important; fill:none !important; stroke:currentColor !important; stroke-width:1.9 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } /* --------------------------------------------------------- ACTION HIERARCHY The existing page rendered View Full Service Details as the largest button and Request This Service as a small text link. R4.0.3.3.2 reverses that visual priority. --------------------------------------------------------- */ /* Primary: Request This Service */ body.r4-home-unified.r403-home-customer-first .r21-service-card .individual-service-cta{ width:100% !important; min-height:42px !important; display:flex !important; align-items:center !important; justify-content:center !important; align-self:stretch !important; margin:14px 0 0 !important; padding:10px 14px !important; border:1px solid rgba(78,203,255,.66) !important; border-radius:9px !important; background: linear-gradient(180deg,rgba(56,189,248,.22),rgba(37,99,235,.15)) !important; color:#f3fbff !important; font-size:.82rem !important; font-weight:850 !important; letter-spacing:.01em !important; line-height:1.2 !important; text-align:center !important; text-decoration:none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.10) !important; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } /* Secondary: full details. Compact text/ghost treatment, never full-card button. */ body.r4-home-unified.r403-home-customer-first .r21-service-card .r356-service-detail-link{ width:auto !important; min-width:0 !important; min-height:30px !important; display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; align-self:flex-start !important; margin:7px 0 0 !important; padding:4px 2px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#77d4ff !important; font-size:0 !important; font-weight:750 !important; line-height:1.2 !important; text-align:left !important; text-decoration:none !important; white-space:nowrap !important; } body.r4-home-unified.r403-home-customer-first .r21-service-card .r356-service-detail-link::after{ content:"View details →" !important; font-size:.76rem !important; letter-spacing:.015em !important; } /* Make source order irrelevant: JS adds stable visual action classes. */ body.r4-home-unified.r403-home-customer-first .r21-service-card .sbs-r40332-primary-action{ order:90 !important; } body.r4-home-unified.r403-home-customer-first .r21-service-card .sbs-r40332-secondary-action{ order:91 !important; } /* Prevent inherited legacy pseudo-elements from making either action look oversized. */ body.r4-home-unified.r403-home-customer-first .r21-service-card .individual-service-cta::before, body.r4-home-unified.r403-home-customer-first .r21-service-card .individual-service-cta::after{ box-shadow:none !important; } @media (hover:hover) and (pointer:fine){ body.r4-home-unified.r403-home-customer-first .r21-service-card .individual-service-cta:hover{ transform:translateY(-1px) !important; border-color:rgba(103,218,255,.92) !important; background: linear-gradient(180deg,rgba(56,189,248,.30),rgba(37,99,235,.20)) !important; box-shadow:0 10px 24px rgba(19,120,177,.13) !important; } body.r4-home-unified.r403-home-customer-first .r21-service-card .r356-service-detail-link:hover{ color:#b6ebff !important; text-decoration:underline !important; text-underline-offset:3px !important; } } /* At very wide CSS viewports (including 80% browser zoom), keep cards balanced. */ @media (min-width:1500px){ body.r4-home-unified.r403-home-customer-first .r21-service-grid{ max-width:1120px !important; margin-left:auto !important; margin-right:auto !important; } body.r4-home-unified.r403-home-customer-first .r21-service-card{ min-height:300px !important; } } @media (max-width:700px){ body.r4-home-unified.r403-home-customer-first .r21-service-card{ min-height:0 !important; } body.r4-home-unified.r403-home-customer-first .r21-service-card .individual-service-cta{ min-height:44px !important; font-size:.88rem !important; } body.r4-home-unified.r403-home-customer-first .r21-service-card .r356-service-detail-link::after{ font-size:.80rem !important; } }