/* * REAL.PRO STUDIOS * CREATIVE SERVICES · FINAL VISUAL POLISH * * Scope: * /services/ only. * * Purpose: * - professional CTA hierarchy * - strong accessible contrast * - refined media framing * - preserve content/destinations * - no footer/header authority */ /* ========================================================= MEDIA ========================================================= */ html body.rp-page-services main#main section[id^="service-category-"] .service-category__media{ position:relative !important; overflow:hidden !important; border: 1px solid rgba(26,43,76,.12) !important; border-radius: clamp(18px,1.7vw,26px) !important; background:#E9EDF1 !important; box-shadow: 0 22px 54px rgba(7,17,31,.12), 0 3px 10px rgba(7,17,31,.05) !important; } html body.rp-page-services main#main section[id^="service-category-"] .service-category__media img{ width:100% !important; height:100% !important; object-fit:cover !important; opacity:1 !important; filter: saturate(1.025) contrast(1.02) brightness(1.025) !important; transform:none !important; } /* Fine premium inner edge, no dark overlay. */ html body.rp-page-services main#main section[id^="service-category-"] .service-category__media::after{ content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; border-radius:inherit !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.20) !important; } /* ========================================================= ACTION SYSTEM Primary = Explore Secondary = Email Tertiary = Call ========================================================= */ html body.rp-page-services main#main section[id^="service-category-"] .rp-service-actions{ display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:10px 12px !important; width:min(100%,520px) !important; margin-top: clamp(22px,2.3vw,32px) !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-service-actions > a{ box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:50px !important; margin:0 !important; padding: 11px clamp(16px,1.4vw,22px) !important; border-radius:999px !important; text-decoration:none !important; text-align:center !important; font-weight:760 !important; line-height:1.15 !important; letter-spacing:.015em !important; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease !important; } /* --------------------------------------------------------- PRIMARY · EXPLORE SERVICE REAL.PRO red with deep premium red gradient. --------------------------------------------------------- */ html body.rp-page-services main#main section[id^="service-category-"] .rp-service-detail-link{ grid-column:1 / -1 !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; background: linear-gradient( 135deg, #D9363E 0%, #CC2E37 48%, #B9212C 100% ) !important; border: 1px solid rgba(128,15,27,.20) !important; box-shadow: 0 10px 24px rgba(191,31,43,.20), inset 0 1px 0 rgba(255,255,255,.16) !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-service-detail-link span{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; margin-left:8px !important; transition: transform .22s ease !important; } /* --------------------------------------------------------- SECONDARY · SEND EMAIL Deep REAL.PRO navy. --------------------------------------------------------- */ html body.rp-page-services main#main section[id^="service-category-"] .rp-contact-button--email{ color:#F7FAFE !important; -webkit-text-fill-color:#F7FAFE !important; background: linear-gradient( 135deg, #132742 0%, #0B1A2D 54%, #07111F 100% ) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 9px 22px rgba(7,17,31,.16), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* --------------------------------------------------------- TERTIARY · CALL Warm neutral surface with navy typography. --------------------------------------------------------- */ html body.rp-page-services main#main section[id^="service-category-"] .rp-contact-button--call{ color:#142640 !important; -webkit-text-fill-color:#142640 !important; background: linear-gradient( 180deg, #FFFDF9 0%, #F6F2EB 100% ) !important; border: 1px solid rgba(20,38,64,.22) !important; box-shadow: 0 8px 20px rgba(7,17,31,.08), inset 0 1px 0 rgba(255,255,255,.85) !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-contact-button--call span{ color:inherit !important; -webkit-text-fill-color:inherit !important; font-weight:780 !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-contact-button--call small{ display:block !important; margin-left:7px !important; color:inherit !important; -webkit-text-fill-color:inherit !important; opacity:.72 !important; font-size:.69rem !important; font-weight:650 !important; letter-spacing:0 !important; } /* ========================================================= INTERACTION ========================================================= */ @media (hover:hover) and (pointer:fine){ html body.rp-page-services main#main section[id^="service-category-"] .rp-service-detail-link:hover{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; background: linear-gradient( 135deg, #E03D46 0%, #D2313B 48%, #C02531 100% ) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 30px rgba(191,31,43,.27), inset 0 1px 0 rgba(255,255,255,.18) !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-service-detail-link:hover span{ transform: translate(2px,-2px) !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-contact-button--email:hover{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; background: linear-gradient( 135deg, #19304F, #0C1C30 ) !important; border-color: rgba(255,255,255,.18) !important; transform: translateY(-2px) !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-contact-button--call:hover{ color:#142640 !important; -webkit-text-fill-color:#142640 !important; background:#FFFFFF !important; border-color: rgba(211,47,47,.38) !important; transform: translateY(-2px) !important; } } /* Keyboard accessibility. */ html body.rp-page-services main#main section[id^="service-category-"] .rp-service-actions > a:focus-visible{ outline: 3px solid rgba(211,47,47,.34) !important; outline-offset: 4px !important; } /* ========================================================= SMALL REFINEMENT OF SERVICE TOKENS Keeps them informative, not button-like. ========================================================= */ html body.rp-page-services main#main section[id^="service-category-"] .service-item-list li{ color:#253750 !important; background: rgba(255,255,255,.82) !important; border-color: rgba(26,43,76,.13) !important; box-shadow: 0 3px 10px rgba(7,17,31,.035) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:760px){ html body.rp-page-services main#main section[id^="service-category-"] .service-category__media{ border-radius: 18px !important; box-shadow: 0 16px 38px rgba(7,17,31,.11) !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-service-actions{ width:100% !important; gap:9px !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-service-actions > a{ min-height:50px !important; padding: 11px 14px !important; } } @media (max-width:360px){ html body.rp-page-services main#main section[id^="service-category-"] .rp-service-actions{ grid-template-columns: 1fr !important; } html body.rp-page-services main#main section[id^="service-category-"] .rp-service-detail-link{ grid-column:auto !important; } }